/* ==========================================================================
   KAUSTYA INFOTECH — design system v2
   Hand-written CSS. No framework, no preprocessor, no build step.

   1.  Tokens (light) + dark mode
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Buttons, tags, chips
   6.  Header, nav, mega menu, mobile nav, theme toggle
   7.  Hero
   8.  Homepage sections
   9.  Inner page components
   10. Forms
   11. Footer
   12. Floating elements & overlays
   13. Utilities, motion, responsive, print
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
	/* Brand — the Customizer overrides these at runtime */
	--color-primary: #2563EB;
	--color-primary-dark: #1D4ED8;
	--color-primary-rgb: 37, 99, 235;

	--color-secondary: #14B8A6;
	--color-secondary-rgb: 20, 184, 166;
	--color-accent: #7C3AED;
	--color-accent-rgb: 124, 58, 237;

	--color-navy: #0F172A;
	--color-navy-2: #1E293B;
	--color-navy-3: #334155;

	/* Semantic surfaces — dark mode reassigns only these */
	--bg: #FFFFFF;
	--bg-alt: #F8FAFC;
	--card: #FFFFFF;
	--ink: #0F172A;
	--ink-2: #1E293B;
	--body: #334155;
	--muted: #64748B;
	--line: #E2E8F0;
	--line-soft: #F1F5F9;

	/* Inverted sections keep a fixed dark palette in both themes */
	--dark-bg: #0F172A;
	--dark-bg-2: #1E293B;
	--dark-ink: #F8FAFC;
	--dark-body: rgba(248, 250, 252, .70);
	--dark-muted: rgba(248, 250, 252, .52);
	--dark-line: rgba(248, 250, 252, .10);

	--glass: rgba(255, 255, 255, .72);
	--glass-line: rgba(226, 232, 240, .85);

	/* Gradients */
	--grad-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent));
	--grad-brand-soft: linear-gradient(135deg, rgba(var(--color-primary-rgb), .12), rgba(var(--color-accent-rgb), .12));
	--grad-teal: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	--grad-text: linear-gradient(100deg, var(--color-primary) 0%, var(--color-accent) 55%, var(--color-secondary) 100%);

	/* Type */
	--font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-deva: "Noto Sans Devanagari", "Nirmala UI", "Mangal", var(--font-body);

	--text-xs: 0.8125rem;
	--text-sm: 0.9375rem;
	--text-base: 1.125rem;
	--text-md: 1.25rem;
	--text-lg: 1.375rem;
	--text-xl: 1.5rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2rem;
	--text-4xl: clamp(2rem, 3.2vw, 2.625rem);
	--text-5xl: clamp(2.25rem, 4vw, 3.25rem);
	--text-hero: clamp(2.75rem, 5.4vw, 4.5rem);

	/* Space */
	--section-py: clamp(80px, 10vw, 132px);
	--section-py-tight: clamp(52px, 6vw, 80px);
	--container: 1240px;
	--container-md: 1024px;
	--container-sm: 760px;
	--gutter: clamp(20px, 4vw, 40px);

	/* Radius */
	--radius-xs: 10px;
	--radius-sm: 14px;
	--radius-md: 18px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-full: 9999px;

	/* Shadow — soft, cool-tinted, layered */
	--shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
	--shadow-sm: 0 2px 8px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .04);
	--shadow-md: 0 8px 24px rgba(15, 23, 42, .07), 0 2px 6px rgba(15, 23, 42, .04);
	--shadow-lg: 0 20px 48px rgba(15, 23, 42, .10), 0 4px 12px rgba(15, 23, 42, .05);
	--shadow-xl: 0 32px 80px rgba(15, 23, 42, .16);
	--shadow-brand: 0 8px 24px rgba(var(--color-primary-rgb), .28);
	--shadow-brand-lg: 0 16px 40px rgba(var(--color-primary-rgb), .34);

	/* Motion */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.4, 0, .2, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--fast: 160ms;
	--base: 320ms;
	--slow: 600ms;

	--header-h: 76px;
	--topbar-h: 40px;

	color-scheme: light;
}

/* --- Dark mode --- */

[data-theme="dark"] {
	--bg: #0B1220;
	--bg-alt: #0F172A;
	--card: #131C2E;
	--ink: #F8FAFC;
	--ink-2: #E2E8F0;
	--body: #CBD5E1;
	--muted: #94A3B8;
	--line: #24304A;
	--line-soft: #1B2437;

	--dark-bg: #0B1220;
	--dark-bg-2: #131C2E;

	--glass: rgba(11, 18, 32, .74);
	--glass-line: rgba(36, 48, 74, .9);

	--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, .38);
	--shadow-lg: 0 20px 48px rgba(0, 0, 0, .46);
	--shadow-xl: 0 32px 80px rgba(0, 0, 0, .55);

	color-scheme: dark;
}

/* Theme switch reads as a dimmer, not a flash. Applied only while toggling,
   and only to colour properties so transforms and animations are untouched. */
[data-theme-transition] *,
[data-theme-transition] *::before,
[data-theme-transition] *::after {
	transition: background-color var(--base) var(--ease-in-out),
	            border-color var(--base) var(--ease-in-out),
	            color var(--base) var(--ease-in-out) !important;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.65;
	color: var(--body);
	background: var(--bg);
	overflow-x: hidden;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "kern" 1, "liga" 1;
	text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.12;
	color: var(--ink);
	letter-spacing: -0.028em;
	text-wrap: balance;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection { background: rgba(var(--color-primary-rgb), .2); color: var(--ink); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 20px;
	background: var(--color-primary);
	color: #fff;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }

.site-main { display: block; }

.section { padding-block: var(--section-py); position: relative; }
.section--tight { padding-block: var(--section-py-tight); }
.section--surface { background: var(--bg-alt); }

.section--dark { background: var(--dark-bg); color: var(--dark-body); }

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--dark-ink); }

.section-foot { margin-top: clamp(40px, 5vw, 60px); text-align: center; }

.card-grid {
	display: grid;
	gap: clamp(18px, 2vw, 28px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
}

.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); }
.card-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 10px;
	border-radius: var(--radius-full);
	background: var(--grad-brand-soft);
	border: 1px solid rgba(var(--color-primary-rgb), .18);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 20px;
}

.eyebrow__rule { width: 18px; height: 2px; border-radius: 2px; background: var(--grad-brand); flex: none; }

.eyebrow--light {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .16);
	color: #fff;
	backdrop-filter: blur(8px);
}

.eyebrow--light .eyebrow__rule { background: var(--color-secondary); }

.section-title { font-size: var(--text-4xl); line-height: 1.1; letter-spacing: -0.032em; max-width: 22ch; }

.section-title em {
	font-style: normal;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.section-sub { margin-top: 18px; font-size: var(--text-md); line-height: 1.6; color: var(--muted); max-width: 60ch; text-wrap: pretty; }

.section-head { margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head--center .section-title { max-width: 24ch; }
.section-head--left .section-sub { max-width: 54ch; }
.section-head--dark .section-title,
.section-head--dark h2 { color: var(--dark-ink); }
.section-head--dark .section-sub { color: var(--dark-muted); }

.prose { color: var(--body); }
.prose > * + * { margin-top: 1.15em; }
.prose p { text-wrap: pretty; }
.prose--sm { font-size: var(--text-sm); line-height: 1.7; }
.prose--page { font-size: var(--text-md); line-height: 1.75; }
.prose h2 { font-size: var(--text-2xl); margin-top: 1.7em; }
.prose h3 { font-size: var(--text-lg); margin-top: 1.5em; color: var(--ink); }

.prose a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(var(--color-primary-rgb), .35);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition: text-decoration-color var(--fast) var(--ease-out);
}

.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--color-primary); }

.prose blockquote {
	border-left: 3px solid var(--color-primary);
	padding-left: 22px;
	font-size: var(--text-md);
	color: var(--ink);
}

.prose--legal h2 { font-size: var(--text-lg); padding-top: .5em; border-top: 1px solid var(--line); }
.prose--legal h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.legal-updated { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--muted); }

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--color-primary);
	transition: gap var(--fast) var(--ease-out);
}

.link-arrow:hover { gap: 12px; }

.link-ghost { font-weight: 500; font-size: var(--text-sm); color: var(--ink); transition: color var(--fast) var(--ease-out); }
.link-ghost:hover { color: var(--color-primary); }

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, .55);
	margin-bottom: 24px;
}

.crumbs a { transition: color var(--fast) var(--ease-out); }
.crumbs a:hover { color: var(--color-secondary); }
.crumbs span[aria-hidden] { opacity: .4; }

/* ==========================================================================
   5. BUTTONS, TAGS, CHIPS
   ========================================================================== */

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 26px;
	border-radius: var(--radius-full);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: 600;
	letter-spacing: -0.005em;
	border: 1px solid transparent;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--base) var(--ease-out),
	            box-shadow var(--base) var(--ease-out),
	            background-color var(--fast) var(--ease-out),
	            border-color var(--fast) var(--ease-out),
	            color var(--fast) var(--ease-out);
}

.btn svg { flex: none; transition: transform var(--base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.985); }

.btn--sm { padding: 9px 18px; font-size: var(--text-xs); }
.btn--lg { padding: 16px 32px; font-size: var(--text-base); }
.btn--block { width: 100%; }

/* Ripple origin is set by JS as custom properties. */
.btn::after {
	content: "";
	position: absolute;
	top: var(--ripple-y, 50%);
	left: var(--ripple-x, 50%);
	width: 0;
	height: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none;
	z-index: -1;
}

.btn.is-rippling::after { animation: ripple 620ms var(--ease-out); }

.btn--primary {
	background: var(--grad-brand);
	background-size: 160% 160%;
	color: #fff;
	box-shadow: var(--shadow-brand);
}

.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-brand-lg); background-position: 100% 0; }

.btn--secondary { background: var(--ink); color: var(--bg); }
.btn--secondary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn--outline-dark { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn--outline-dark:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.btn--outline-light {
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
	background: rgba(255, 255, 255, .06);
	backdrop-filter: blur(10px);
}

.btn--outline-light:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .13); transform: translateY(-2px); }

.btn--ghost { color: var(--ink); background: transparent; }
.btn--ghost:hover { color: var(--color-primary); background: var(--line-soft); }

.tag {
	display: inline-block;
	padding: 5px 13px;
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 600;
	background: rgba(var(--color-primary-rgb), .1);
	color: var(--color-primary);
}

.tag--muted { background: var(--line-soft); color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }

.chips__label {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	margin-right: 4px;
}

.chip {
	display: inline-block;
	padding: 6px 13px;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--body);
	background: var(--card);
	transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.chip:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.chips--stack { margin-top: 0; margin-bottom: 28px; }

/* ==========================================================================
   6. HEADER / NAV
   ========================================================================== */

.topbar { background: var(--dark-bg); color: var(--dark-muted); font-size: var(--text-xs); position: relative; z-index: 60; }

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--topbar-h);
	padding-block: 8px;
}

.topbar__note { margin: 0; }
.topbar__links { display: flex; align-items: center; gap: 20px; flex: none; }
.topbar__links a { display: inline-flex; align-items: center; gap: 6px; transition: color var(--fast) var(--ease-out); }
.topbar__links a:hover { color: var(--color-secondary); }
.topbar__close { display: grid; place-items: center; color: rgba(255, 255, 255, .4); transition: color var(--fast) var(--ease-out); }
.topbar__close:hover { color: #fff; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--glass);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid transparent;
	transition: box-shadow var(--base) var(--ease-out),
	            background-color var(--base) var(--ease-out),
	            border-color var(--base) var(--ease-out);
}

.site-header.is-scrolled { border-bottom-color: var(--glass-line); box-shadow: var(--shadow-sm); }

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--header-h);
}

.brand { flex: none; display: block; }
.brand__logo { height: 40px; width: auto; object-fit: contain; transition: transform var(--base) var(--ease-spring); }
.brand:hover .brand__logo { transform: scale(1.03); }
.brand__logo--light { display: none; }

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

.nav { flex: 1; display: flex; justify-content: center; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links > li { position: relative; }

.nav__links > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 14px;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--ink-2);
	border-radius: var(--radius-xs);
	transition: color var(--fast) var(--ease-out);
}

.nav__links > li > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--base) var(--ease-out);
}

.nav__links > li > a:hover { color: var(--color-primary); }
.nav__links > li > a:hover::after,
.nav__links > .current-menu-item > a::after,
.nav__links > .current_page_item > a::after { transform: scaleX(1); }

.nav__links > .current-menu-item > a,
.nav__links > .current_page_item > a { color: var(--color-primary); }

.nav__links > li > a svg { transition: transform var(--base) var(--ease-out); }
.nav__links > li:hover > a svg { transform: rotate(180deg); }

.nav__links .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	min-width: 230px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px) scale(.98);
	transform-origin: top left;
	transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out), visibility var(--base);
}

.nav__links li:hover > .sub-menu,
.nav__links li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.nav__links .sub-menu a {
	display: block;
	padding: 10px 13px;
	border-radius: var(--radius-xs);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--ink-2);
	transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.nav__links .sub-menu a:hover { background: var(--bg-alt); color: var(--color-primary); }

.mega {
	position: fixed;
	left: 0;
	right: 0;
	background: var(--card);
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	padding: 34px 0 28px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out), visibility var(--base);
	z-index: 49;
}

.has-mega:hover > .mega,
.has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; }

.mega__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), transform var(--base) var(--ease-out);
}

.mega__item:hover { background: var(--bg-alt); border-color: var(--line); transform: translateY(-2px); }

.mega__icon {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-xs);
	background: var(--grad-brand-soft);
	color: var(--color-primary);
	transition: background var(--base) var(--ease-out), color var(--base) var(--ease-out);
}

.mega__item:hover .mega__icon { background: var(--grad-brand); color: #fff; }

.mega__text { display: block; min-width: 0; }

.mega__text strong {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 3px;
}

.mega__text span { display: block; font-size: var(--text-xs); color: var(--muted); line-height: 1.55; }
.mega__foot { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); text-align: center; }

/* Theme toggle */
.theme-toggle {
	position: relative;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	border: 1px solid var(--line);
	background: var(--card);
	color: var(--ink-2);
	flex: none;
	transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), transform var(--base) var(--ease-spring);
}

.theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); transform: rotate(-18deg); }
.theme-toggle svg { position: absolute; transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out); }
.theme-toggle .icon-moon { opacity: 0; transform: scale(.5) rotate(-90deg); }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: scale(.5) rotate(90deg); }
[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; transform: none; }

/* Burger */
.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-xs);
	border: 1px solid var(--line);
	background: var(--card);
}

.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--base) var(--ease-out), opacity var(--fast) var(--ease-out); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
.mobile-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); z-index: 70; animation: fade-in var(--base) var(--ease-out); }

.mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 90vw);
	background: var(--bg);
	z-index: 80;
	padding: 20px 26px 34px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-xl);
	animation: slide-in var(--base) var(--ease-out);
}

.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.mobile-nav__title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.mobile-nav__close {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-full);
	border: 1px solid var(--line);
	color: var(--ink);
}

.mobile-nav__links > li { position: relative; }

.mobile-nav__links > li > a {
	display: block;
	padding: 15px 2px;
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 700;
	color: var(--ink);
	border-bottom: 1px solid var(--line-soft);
}

.mobile-nav__toggle {
	position: absolute;
	top: 13px;
	right: 0;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-xs);
	color: var(--muted);
	transition: transform var(--base) var(--ease-out), color var(--fast) var(--ease-out);
}

.mobile-nav__toggle:hover { color: var(--color-primary); }
.mobile-nav__toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--color-primary); }
.mobile-nav__links .sub-menu { padding: 4px 0 12px 14px; }
.mobile-nav__links .sub-menu a { display: block; padding: 9px 0; font-size: var(--text-sm); color: var(--muted); }
.mobile-nav__foot { margin-top: auto; padding-top: 26px; }
.mobile-nav__contact { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: var(--text-sm); font-weight: 500; color: var(--body); }

/* Overlay header on the front page */
body:not(.has-solid-header) .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 61;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}

body.has-top-bar:not(.has-solid-header) .site-header { top: var(--topbar-h); }

body:not(.has-solid-header) .site-header .nav__links > li > a,
body:not(.has-solid-header) .site-header .link-ghost { color: rgba(255, 255, 255, .86); }

body:not(.has-solid-header) .site-header .nav__links > li > a:hover,
body:not(.has-solid-header) .site-header .link-ghost:hover { color: #fff; }

body:not(.has-solid-header) .site-header .burger,
body:not(.has-solid-header) .site-header .theme-toggle {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .2);
	color: #fff;
	backdrop-filter: blur(8px);
}

body:not(.has-solid-header) .site-header .burger span { background: #fff; }
body:not(.has-solid-header) .brand__logo--light { display: block; }
body:not(.has-solid-header) .brand__logo--dark { display: none; }

body:not(.has-solid-header) .site-header.is-stuck {
	position: fixed;
	top: 0;
	background: var(--glass);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom-color: var(--glass-line);
	box-shadow: var(--shadow-sm);
	animation: drop-in var(--base) var(--ease-out);
}

body:not(.has-solid-header) .site-header.is-stuck .nav__links > li > a,
body:not(.has-solid-header) .site-header.is-stuck .link-ghost { color: var(--ink-2); }
body:not(.has-solid-header) .site-header.is-stuck .nav__links > li > a:hover { color: var(--color-primary); }
body:not(.has-solid-header) .site-header.is-stuck .burger span { background: var(--ink); }

body:not(.has-solid-header) .site-header.is-stuck .burger,
body:not(.has-solid-header) .site-header.is-stuck .theme-toggle {
	background: var(--card);
	border-color: var(--line);
	color: var(--ink-2);
}

body:not(.has-solid-header) .site-header.is-stuck .brand__logo--light { display: none; }
body:not(.has-solid-header) .site-header.is-stuck .brand__logo--dark { display: block; }

/* In dark mode the light logo reads correctly everywhere. */
[data-theme="dark"] .brand__logo--dark,
[data-theme="dark"] body:not(.has-solid-header) .site-header.is-stuck .brand__logo--dark { display: none; }
[data-theme="dark"] .brand__logo--light,
[data-theme="dark"] body:not(.has-solid-header) .site-header.is-stuck .brand__logo--light { display: block; }

/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero { position: relative; background: var(--dark-bg); color: rgba(255, 255, 255, .8); overflow: hidden; }
.hero__slides { display: grid; grid-template-areas: "slide"; }

.hero__slide {
	grid-area: slide;
	position: relative;
	min-height: clamp(600px, 88vh, 900px);
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--slow) var(--ease-in-out), visibility var(--slow);
}

.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.07);
	transition: transform 11s var(--ease-out);
}

.hero__slide.is-active .hero__media img { transform: scale(1); }

/* Layered wash: deep navy over the copy, brand light bleeding through. */
.hero__wash {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 620px at 12% 30%, rgba(var(--color-primary-rgb), .38), transparent 68%),
		radial-gradient(700px 520px at 88% 78%, rgba(var(--color-accent-rgb), .32), transparent 66%),
		linear-gradient(96deg, rgba(15, 23, 42, .95) 0%, rgba(15, 23, 42, .84) 42%, rgba(15, 23, 42, .42) 76%, rgba(15, 23, 42, .62) 100%);
}

/* Ambient floating shapes */
.hero::before,
.hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	z-index: 1;
}

.hero::before {
	width: 420px;
	height: 420px;
	top: -120px;
	left: -80px;
	background: rgba(var(--color-primary-rgb), .34);
	animation: float-a 18s var(--ease-in-out) infinite;
}

.hero::after {
	width: 340px;
	height: 340px;
	bottom: -110px;
	right: 8%;
	background: rgba(var(--color-secondary-rgb), .24);
	animation: float-b 22s var(--ease-in-out) infinite;
}

.hero__inner { position: relative; z-index: 2; padding-block: calc(var(--header-h) + 56px) 104px; }
.hero__content { max-width: 48rem; }

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 12px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 28px;
}

.hero__badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-secondary);
	animation: pulse-dot 2.4s var(--ease-in-out) infinite;
}

.hero__title {
	font-size: var(--text-hero);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.04em;
	color: #fff;
	margin-bottom: 24px;
}

.hero__title em {
	display: block;
	font-style: normal;
	background: linear-gradient(100deg, #60A5FA 0%, #A78BFA 50%, #5EEAD4 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__text { font-size: var(--text-md); line-height: 1.6; color: rgba(255, 255, 255, .72); max-width: 54ch; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(24px, 4vw, 56px);
	margin-top: 52px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero__stat dt {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 2.8vw, 2.375rem);
	font-weight: 800;
	color: #fff;
	line-height: 1;
	letter-spacing: -0.03em;
}

.hero__stat dd { margin: 8px 0 0; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

.hero__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 36px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.hero__dots { display: flex; gap: 10px; }
.hero__dot { width: 32px; height: 4px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .25); transition: background var(--base) var(--ease-out), width var(--base) var(--ease-out); }
.hero__dot.is-active { background: var(--grad-teal); width: 56px; }
.hero__arrows { display: flex; gap: 10px; }

.hero__arrow {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
	background: rgba(255, 255, 255, .07);
	backdrop-filter: blur(10px);
	transition: background var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), transform var(--base) var(--ease-spring);
}

.hero__arrow:hover { background: var(--grad-brand); border-color: transparent; transform: scale(1.08); }

/* ==========================================================================
   8. HOMEPAGE SECTIONS
   ========================================================================== */

/* --- Trusted marquee --- */
.trusted { padding-block: clamp(44px, 5vw, 66px); border-bottom: 1px solid var(--line-soft); background: var(--bg); overflow: hidden; }

.trusted__title {
	text-align: center;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 32px;
}

.trusted__viewport {
	position: relative;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.trusted__track {
	display: flex;
	align-items: center;
	gap: clamp(40px, 6vw, 80px);
	width: max-content;
	animation: marquee var(--marquee-duration, 40s) linear infinite;
}

.trusted__viewport:hover .trusted__track { animation-play-state: paused; }
.trusted__item { flex: none; display: grid; place-items: center; }

.trusted__item img {
	height: 32px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .5;
	transition: filter var(--base) var(--ease-out), opacity var(--base) var(--ease-out);
}

.trusted__item:hover img { filter: none; opacity: 1; }

.trusted__word {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--muted);
	white-space: nowrap;
	transition: color var(--base) var(--ease-out);
}

.trusted__item:hover .trusted__word { color: var(--ink); }

/* --- Stats --- */
.stats { background: var(--dark-bg); padding-block: clamp(52px, 6vw, 76px); position: relative; overflow: hidden; }

.stats::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(760px 300px at 14% 0%, rgba(var(--color-primary-rgb), .3), transparent 70%),
		radial-gradient(620px 260px at 86% 100%, rgba(var(--color-accent-rgb), .24), transparent 70%);
	pointer-events: none;
}

.stats__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(24px, 3vw, 36px); }
.stat { text-align: center; }

.stat__icon {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--radius-xs);
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .1);
	color: var(--color-secondary);
	margin-bottom: 16px;
}

.stat__value {
	font-family: var(--font-display);
	font-size: clamp(2.125rem, 3.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	letter-spacing: -0.035em;
}

.stat__number { font-variant-numeric: tabular-nums; }

.stat__suffix {
	background: linear-gradient(120deg, #5EEAD4, #60A5FA);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.stat__label { margin: 12px 0 0; font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* --- About --- */
.about__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.about__media { position: relative; }

.about__frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; }

.about__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, .4));
	pointer-events: none;
}

.about__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.about__media:hover .about__frame img { transform: scale(1.05); }

.about__badge {
	position: absolute;
	right: -20px;
	bottom: 36px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: 20px 26px;
	text-align: center;
}

.about__badge strong {
	display: block;
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.about__badge span { display: block; margin-top: 6px; font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.about__body .section-head { margin-bottom: 28px; }

.checklist { margin-top: 30px; display: grid; gap: 13px; }
.checklist--2col { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: 28px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-sm); color: var(--body); }

.checklist__icon {
	flex: none;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(var(--color-secondary-rgb), .14);
	color: var(--color-secondary);
	margin-top: 1px;
}

.about__body .btn { margin-top: 34px; }

/* --- Pasaydan verse: the signature block --- */
.verse { padding-block: clamp(44px, 5vw, 76px); background: var(--bg); text-align: center; position: relative; overflow: hidden; }

.verse__inner {
	position: relative;
	max-width: 58rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(38px, 4.5vw, 64px) clamp(24px, 4vw, 60px);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(var(--color-accent-rgb), .08), transparent 62%),
		var(--card);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.verse__inner::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--grad-brand);
	opacity: .55;
}

.verse__mark { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--color-accent)); margin-bottom: 18px; }

.verse__devanagari {
	font-family: var(--font-deva);
	font-size: clamp(1.125rem, 1.7vw, 1.4rem);
	font-weight: 500;
	color: var(--color-accent);
	letter-spacing: .05em;
	margin-bottom: 16px;
}

.verse__line {
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
	letter-spacing: -0.035em;
	max-width: 22ch;
}

.verse__meaning { margin-top: 14px; font-size: var(--text-base); color: var(--body); }
.verse__body { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.7; color: var(--muted); max-width: 62ch; text-wrap: pretty; }

/* --- Cards --- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 30px 28px;
	overflow: hidden;
	transition: transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease-out), border-color var(--base) var(--ease-out);
}

/* Gradient border drawn as a mask so the card fill stays flat. */
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--grad-brand);
	-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;
	opacity: 0;
	transition: opacity var(--base) var(--ease-out);
	pointer-events: none;
}

.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card:hover::before { opacity: 1; }

.card__icon {
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	background: var(--grad-brand-soft);
	color: var(--color-primary);
	margin-bottom: 22px;
	transition: background var(--base) var(--ease-out), color var(--base) var(--ease-out), transform var(--base) var(--ease-spring);
}

.card:hover .card__icon { background: var(--grad-brand); color: #fff; transform: translateY(-2px) rotate(-6deg); }
.card__icon--plain { width: 46px; height: 46px; background: var(--bg-alt); color: var(--ink); }

.card__title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.022em; margin-bottom: 10px; }
.card__text { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; text-wrap: pretty; }

.card__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 22px;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-primary);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}

.card:hover .card__more { opacity: 1; transform: translateY(0); }

.card__badge {
	position: absolute;
	top: 22px;
	right: 22px;
	padding: 4px 11px;
	border-radius: var(--radius-full);
	background: var(--grad-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.card--industry .card__title { font-size: var(--text-md); }
.card--post { padding: 0; }
.card--post .card__body { padding: 26px 28px 28px; }
.card--post .card__media { display: block; overflow: hidden; }
.card--post .card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--slow) var(--ease-out); }
.card--post:hover .card__media img { transform: scale(1.06); }

.card__meta { font-size: var(--text-xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 12px; }
.card__meta span[aria-hidden] { color: var(--muted); }

.card__contacts { margin-top: 20px; display: grid; gap: 10px; }
.card__contacts li { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--body); }
.card__contacts svg { color: var(--color-primary); flex: none; }
.card__contacts a:hover { color: var(--color-primary); }

/* --- Case cards --- */
.case-card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 28px;
	transition: transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease-out), border-color var(--base) var(--ease-out);
}

.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(var(--color-primary-rgb), .28); }
.case-card__head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.case-card__title { font-size: var(--text-lg); line-height: 1.25; margin-bottom: 10px; }
.case-card__title a { transition: color var(--fast) var(--ease-out); }
.case-card__title a:hover { color: var(--color-primary); }
.case-card__client { font-size: var(--text-sm); color: var(--muted); margin-bottom: 22px; }

.case-card__results { display: grid; gap: 13px; padding-top: 20px; border-top: 1px solid var(--line-soft); margin-top: auto; }
.case-card__results > div { display: flex; align-items: baseline; gap: 12px; }

.case-card__results dt {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 800;
	letter-spacing: -0.03em;
	min-width: 80px;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.case-card__results dd { margin: 0; font-size: var(--text-sm); color: var(--body); }
.case-card .link-arrow { margin-top: 22px; }

/* --- Tech stack --- */
.tech__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(20px, 2.5vw, 32px); }

.tech__group {
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--radius-lg);
	background: rgba(255, 255, 255, .035);
	backdrop-filter: blur(12px);
	transition: border-color var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}

.tech__group:hover { border-color: rgba(var(--color-secondary-rgb), .4); transform: translateY(-4px); }
.tech__cat { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 20px; }
.tech__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.tech__chip {
	padding: 7px 14px;
	border-radius: var(--radius-full);
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
	color: rgba(255, 255, 255, .82);
	font-size: var(--text-xs);
	font-weight: 500;
	transition: border-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out), background var(--fast) var(--ease-out);
}

.tech__chip:hover { border-color: transparent; background: rgba(var(--color-primary-rgb), .35); color: #fff; }
.tech__chip img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .82; }

.tech__quote {
	margin-top: clamp(40px, 5vw, 60px);
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: rgba(255, 255, 255, .78);
	max-width: 46ch;
	margin-inline: auto;
}

/* --- Leadership --- */
.leaders__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(22px, 3vw, 34px); }

.leader {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 26px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--base) var(--ease-out), border-color var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}

.leader:hover { box-shadow: var(--shadow-lg); border-color: rgba(var(--color-primary-rgb), .25); transform: translateY(-4px); }
.leader__photo { position: relative; overflow: hidden; }

.leader__photo img {
	width: 100%;
	height: 100%;
	min-height: 280px;
	object-fit: cover;
	object-position: top center;
	transition: transform var(--slow) var(--ease-out);
}

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

.leader__role {
	position: absolute;
	left: 0;
	bottom: 18px;
	padding: 6px 14px;
	background: var(--grad-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.leader__body { padding: 28px 28px 28px 0; display: flex; flex-direction: column; }
.leader__name { font-size: var(--text-xl); margin-bottom: 5px; }
.leader__title { font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.leader__quote { font-size: var(--text-sm); line-height: 1.65; color: var(--body); }
.leader__quote-mark { display: block; color: rgba(var(--color-primary-rgb), .3); margin-bottom: 10px; }

/* --- Testimonials --- */
.testi { position: relative; }
.testi__viewport { overflow: hidden; padding: 4px; }
.testi__track { display: flex; gap: 24px; transition: transform var(--slow) var(--ease-out); will-change: transform; }
.testi__item { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; }

.testi__card {
	height: 100%;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
	margin: 0;
	transition: box-shadow var(--base) var(--ease-out), border-color var(--base) var(--ease-out);
}

.testi__card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--color-primary-rgb), .22); }
.testi__stars { color: #F59E0B; letter-spacing: .14em; margin-bottom: 18px; font-size: var(--text-sm); }
.testi__quote { font-size: var(--text-base); line-height: 1.65; color: var(--body); text-wrap: pretty; flex: 1; }
.testi__quote::before { content: "“"; }
.testi__quote::after { content: "”"; }

.testi__by { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line-soft); }

.testi__avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--grad-brand);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--text-sm);
	overflow: hidden;
}

.testi__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi__who strong { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.testi__who span { display: block; font-size: var(--text-xs); color: var(--muted); }
.testi__controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; }

.testi__arrow {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--ink);
	background: var(--card);
	transition: all var(--fast) var(--ease-out);
}

.testi__arrow:hover { background: var(--grad-brand); border-color: transparent; color: #fff; transform: scale(1.06); }
.testi__count { font-size: var(--text-sm); font-weight: 600; color: var(--muted); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }

/* --- Closing CTA --- */
.cta-strip { position: relative; padding-block: clamp(80px, 9vw, 128px); background: var(--dark-bg); overflow: hidden; text-align: center; }
.cta-strip__media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .2; }

.cta-strip::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(760px 400px at 20% 10%, rgba(var(--color-primary-rgb), .4), transparent 66%),
		radial-gradient(640px 360px at 82% 90%, rgba(var(--color-accent-rgb), .34), transparent 66%),
		linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(15, 23, 42, .95));
}

.cta-strip__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cta-strip__title { font-size: var(--text-5xl); font-weight: 800; line-height: 1.08; letter-spacing: -0.038em; color: #fff; max-width: 20ch; }

.cta-strip__title em {
	font-style: normal;
	background: linear-gradient(100deg, #60A5FA, #A78BFA 55%, #5EEAD4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.cta-strip__text { margin-top: 22px; font-size: var(--text-md); color: rgba(255, 255, 255, .7); max-width: 56ch; text-wrap: pretty; }
.cta-strip__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 38px; }
.cta-strip__phone { margin-top: 28px; font-size: var(--text-sm); color: rgba(255, 255, 255, .5); }
.cta-strip__phone a { color: #fff; font-weight: 600; margin-left: 6px; border-bottom: 1px solid var(--color-secondary); }

/* ==========================================================================
   9. INNER PAGE COMPONENTS
   ========================================================================== */

.page-hero {
	position: relative;
	background: var(--dark-bg);
	color: rgba(255, 255, 255, .72);
	padding-block: clamp(64px, 7vw, 104px) clamp(56px, 6vw, 84px);
	overflow: hidden;
}

.page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(720px 340px at 6% 0%, rgba(var(--color-primary-rgb), .38), transparent 68%),
		radial-gradient(560px 300px at 92% 100%, rgba(var(--color-accent-rgb), .26), transparent 70%);
	pointer-events: none;
}

.page-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .18; }
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title { font-size: var(--text-5xl); font-weight: 800; line-height: 1.06; letter-spacing: -0.038em; color: #fff; max-width: 20ch; }

.page-hero__title em {
	font-style: normal;
	background: linear-gradient(100deg, #60A5FA, #A78BFA 55%, #5EEAD4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.page-hero__text { margin-top: 22px; font-size: var(--text-md); color: rgba(255, 255, 255, .68); max-width: 62ch; text-wrap: pretty; }
.page-hero__meta { margin-top: 16px; font-size: var(--text-sm); color: rgba(255, 255, 255, .5); display: flex; gap: 10px; }
.page-hero__actions { margin-top: 32px; }
.page-hero__search { margin-top: 26px; max-width: min(100%, 460px); }

.page-hero__stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .13); }
.page-hero__stats dt { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1; }
.page-hero__stats dd { margin: 8px 0 0; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* --- About page --- */
.about-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 76px); align-items: start; }
.about-story__media img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; object-fit: cover; }

.mission-list { display: grid; gap: 0; max-width: 78ch; margin-inline: auto; }

.mission-list__item {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
	transition: padding-left var(--base) var(--ease-out);
}

.mission-list__item:first-child { border-top: 1px solid var(--line); }
.mission-list__item:hover { padding-left: 8px; }

.mission-list__num {
	flex: none;
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 800;
	min-width: 42px;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mission-list__item p { font-size: var(--text-md); color: var(--body); text-wrap: pretty; }

.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 3vw, 34px); }
.phase { position: relative; padding-top: 28px; border-top: 2px solid var(--line); transition: border-top-color var(--base) var(--ease-out); }
.phase:hover { border-top-color: var(--color-primary); }
.phase__step { display: block; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; letter-spacing: .06em; color: var(--color-primary); margin-bottom: 12px; }
.phase__title { font-size: var(--text-md); margin-bottom: 8px; }
.phase__text { font-size: var(--text-sm); color: var(--muted); }

.timeline { display: grid; gap: 0; max-width: 78ch; margin-inline: auto; position: relative; }

.timeline::before {
	content: "";
	position: absolute;
	left: 86px;
	top: 12px;
	bottom: 12px;
	width: 2px;
	background: linear-gradient(180deg, transparent, rgba(var(--color-primary-rgb), .5) 12%, rgba(var(--color-accent-rgb), .5) 88%, transparent);
}

.milestone { position: relative; display: grid; grid-template-columns: 86px 1fr; gap: 36px; padding-block: 24px; }

.milestone::after {
	content: "";
	position: absolute;
	left: 81px;
	top: 34px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--grad-brand);
	box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb), .16);
}

.milestone__year { font-family: var(--font-display); font-size: var(--text-md); font-weight: 800; color: #fff; text-align: right; line-height: 1.6; letter-spacing: -0.02em; }
.milestone__title { font-size: var(--text-md); color: #fff; margin-bottom: 7px; }
.milestone__text { font-size: var(--text-sm); color: rgba(255, 255, 255, .6); }

.awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 20px; }

.award {
	text-align: center;
	padding: 28px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
	transition: transform var(--base) var(--ease-out), box-shadow var(--base) var(--ease-out);
}

.award:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.award img { margin: 0 auto 16px; max-height: 56px; width: auto; }
.award strong { display: block; font-size: var(--text-sm); color: var(--ink); }
.award span { font-size: var(--text-xs); color: var(--muted); }

/* --- Services rows --- */
.service-list { display: grid; gap: 0; }

.service-row {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: clamp(20px, 4vw, 52px);
	padding-block: clamp(36px, 4vw, 56px);
	border-top: 1px solid var(--line);
}

.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row__aside { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

.service-row__num {
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--line);
	transition: color var(--base) var(--ease-out);
}

.service-row:hover .service-row__num { color: rgba(var(--color-primary-rgb), .35); }

.service-row__icon {
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	background: var(--grad-brand-soft);
	color: var(--color-primary);
	transition: background var(--base) var(--ease-out), color var(--base) var(--ease-out);
}

.service-row:hover .service-row__icon { background: var(--grad-brand); color: #fff; }
.service-row__title { font-size: var(--text-3xl); margin-bottom: 10px; }
.service-row__title a { transition: color var(--fast) var(--ease-out); }
.service-row__title a:hover { color: var(--color-primary); }
.service-row__lede { font-size: var(--text-md); color: var(--ink-2); font-weight: 500; margin-bottom: 16px; text-wrap: pretty; }
.service-row .checklist { margin-top: 26px; }
.service-row .link-arrow { margin-top: 24px; }

/* --- Industry rows --- */
.industry-list { display: grid; gap: 0; }
.industry-row { padding-block: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.industry-row:last-child { border-bottom: 1px solid var(--line); }
.industry-row__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
.industry-row__count { font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; color: var(--muted); }

.industry-row__icon {
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	background: var(--grad-brand-soft);
	color: var(--color-primary);
}

.industry-row__title { font-size: var(--text-3xl); }
.industry-row__title a { transition: color var(--fast) var(--ease-out); }
.industry-row__title a:hover { color: var(--color-primary); }
.industry-row__lede { font-size: var(--text-md); color: var(--body); text-wrap: pretty; }
.industry-row__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 48px); }

.industry-col__title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }

.bullets { display: grid; gap: 11px; }
.bullets li { position: relative; padding-left: 24px; font-size: var(--text-sm); color: var(--body); }

.bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .58em;
	width: 8px;
	height: 8px;
	border-radius: 3px;
}

.bullets--problem li::before { background: var(--line); border: 1px solid var(--muted); }
.bullets--solution li::before { background: var(--grad-teal); }

.industry-row__impact {
	margin-top: 28px;
	padding: 18px 22px;
	border-left: 3px solid var(--color-secondary);
	background: var(--bg-alt);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: var(--text-sm);
	color: var(--body);
}

.industry-row__impact strong { color: var(--ink); margin-right: 6px; }

/* --- Case rows --- */
.case-list { display: grid; gap: 0; }
.case-row { padding-block: clamp(36px, 4vw, 56px); border-top: 1px solid var(--line); }
.case-row:last-child { border-bottom: 1px solid var(--line); }
.case-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.case-row__num { font-size: var(--text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.case-row__title { font-size: var(--text-4xl); line-height: 1.14; max-width: 26ch; margin-bottom: 10px; }
.case-row__title a { transition: color var(--fast) var(--ease-out); }
.case-row__title a:hover { color: var(--color-primary); }
.case-row__client { font-size: var(--text-sm); color: var(--muted); margin-bottom: 30px; }
.case-row__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 48px); }
.case-col__title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

.results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
	gap: 22px;
	margin-top: 32px;
	padding: 30px;
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.results__item dt {
	font-family: var(--font-display);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.035em;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.results__item dd { margin: 10px 0 0; font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* --- Detail layout --- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 64px); align-items: start; }

.detail__icon {
	display: inline-grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: var(--radius-md);
	background: var(--grad-brand-soft);
	color: var(--color-primary);
	margin-bottom: 28px;
}

.detail__h2 { font-size: var(--text-3xl); margin: 48px 0 22px; padding-top: 24px; border-top: 1px solid var(--line); }

.sticky-card {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 30px 28px;
}

.sticky-card__title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.sticky-card__title + .sticky-card__title { margin-top: 28px; }
.sticky-card__text { font-size: var(--text-sm); color: var(--body); margin-bottom: 22px; }

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
	padding: 24px 26px;
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	margin-bottom: 36px;
}

.facts span { display: block; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.facts strong { font-size: var(--text-sm); color: var(--ink); }

.pullquote {
	margin: 44px 0;
	padding: 34px 36px;
	border-radius: var(--radius-lg);
	background: var(--grad-brand-soft);
	border: 1px solid rgba(var(--color-primary-rgb), .16);
}

.pullquote blockquote { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.45; letter-spacing: -0.025em; color: var(--ink); }
.pullquote figcaption { margin-top: 18px; font-size: var(--text-sm); color: var(--muted); }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; margin-top: 36px; }
.gallery-grid figure { overflow: hidden; border-radius: var(--radius-lg); }
.gallery-grid img { width: 100%; transition: transform var(--slow) var(--ease-out); }
.gallery-grid figure:hover img { transform: scale(1.05); }

/* --- Profile --- */
.profile { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-block: clamp(32px, 4vw, 52px); }
.profile + .profile { border-top: 1px solid var(--line); }
.profile--flip .profile__media { order: 2; }
.profile__media { position: relative; }

.profile__media img {
	width: 100%;
	border-radius: var(--radius-xl);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top center;
	box-shadow: var(--shadow-lg);
}

.profile__role {
	position: absolute;
	left: 20px;
	bottom: 20px;
	padding: 8px 16px;
	background: var(--grad-brand);
	color: #fff;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-brand);
}

.profile__name { font-size: var(--text-4xl); }
.profile__title { font-size: var(--text-sm); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 10px 0 26px; }

.profile__quote {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.025em;
	color: var(--ink);
	padding-left: 24px;
	border-left: 3px solid var(--color-primary);
	margin-bottom: 28px;
}

.profile__stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }

.profile__stats dt {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.profile__stats dd { margin: 8px 0 0; font-size: var(--text-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* --- Accordion --- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__head { margin: 0; }

.accordion__btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 24px 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	transition: color var(--fast) var(--ease-out);
}

.accordion__btn:hover { color: var(--color-primary); }
.accordion__btn svg { flex: none; color: var(--color-primary); transition: transform var(--base) var(--ease-out); }
.accordion__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion__panel { padding-bottom: 26px; font-size: var(--text-base); color: var(--muted); max-width: 70ch; }

/* --- Blog --- */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 56px); align-items: start; }
.blog-sidebar { display: grid; gap: 26px; }
.widget { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }

.widget__title,
.widget-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }

.widget ul { display: grid; gap: 9px; font-size: var(--text-sm); }
.widget a { transition: color var(--fast) var(--ease-out); }
.widget a:hover { color: var(--color-primary); }

.post-figure { margin-bottom: 36px; overflow: hidden; border-radius: var(--radius-xl); }
.post-figure img { width: 100%; }

.result-list { display: grid; gap: 0; }
.result { padding-block: 28px; border-bottom: 1px solid var(--line); }
.result:first-child { border-top: 1px solid var(--line); }
.result__type { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 9px; }
.result__title { font-size: var(--text-xl); margin-bottom: 9px; }
.result__title a { transition: color var(--fast) var(--ease-out); }
.result__title a:hover { color: var(--color-primary); }
.result__text { font-size: var(--text-sm); color: var(--muted); }

.empty-state { text-align: center; font-size: var(--text-md); color: var(--muted); padding-block: 44px; }

.error-404 { text-align: center; }
.error-404 .eyebrow, .error-404 .section-title, .error-404 .section-sub { margin-inline: auto; }
.error-404 .section-title { max-width: 18ch; }
.error-404__search { margin: 34px auto 0; max-width: 460px; }
.error-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.pagination { margin-top: 50px; }
.pagination .nav-links,
.page-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.page-links { margin-top: 50px; }
.pagination .nav-links > .page-numbers.dots { border: 0; background: none; min-width: 24px; }

.pagination .page-numbers,
.page-links a,
.page-links > span {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-xs);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
	background: var(--card);
	transition: all var(--fast) var(--ease-out);
}

.pagination .page-numbers:hover,
.page-links a:hover { border-color: var(--color-primary); color: var(--color-primary); }

.pagination .current,
.page-links > span { background: var(--grad-brand); border-color: transparent; color: #fff; }

/* ==========================================================================
   10. FORMS
   ========================================================================== */

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

.form-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-xl);
	padding: clamp(26px, 4vw, 44px);
	box-shadow: var(--shadow-md);
}

.form-card__title { font-size: var(--text-2xl); margin-bottom: 10px; }
.form-card__intro { font-size: var(--text-sm); color: var(--muted); margin-bottom: 30px; }

.kform { display: grid; gap: 20px; }
.kform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.kform__field { display: grid; gap: 8px; }
.kform__field label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--body); }
.kform__field label span { color: var(--color-primary); }

.kform input[type="text"],
.kform input[type="email"],
.kform input[type="tel"],
.kform select,
.kform textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--bg-alt);
	font-size: var(--text-sm);
	color: var(--ink);
	transition: border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}

.kform textarea { resize: vertical; min-height: 140px; }

.kform input:focus,
.kform select:focus,
.kform textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	background: var(--card);
	box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), .12);
}

.kform input[aria-invalid="true"],
.kform textarea[aria-invalid="true"] { border-color: #EF4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .1); }

.kform select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 42px;
}

.kform__consent { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-sm); color: var(--muted); }
.kform__consent input { margin-top: 4px; accent-color: var(--color-primary); flex: none; width: 18px; height: 18px; }
.kform__consent a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.kform__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kform__status { font-size: var(--text-sm); padding: 0; border-radius: var(--radius-sm); text-align: center; }
.kform__status.is-ok { padding: 15px 20px; background: rgba(var(--color-secondary-rgb), .1); color: #0F766E; border: 1px solid rgba(var(--color-secondary-rgb), .3); }
.kform__status.is-error { padding: 15px 20px; background: rgba(239, 68, 68, .08); color: #B91C1C; border: 1px solid rgba(239, 68, 68, .25); }

[data-theme="dark"] .kform__status.is-ok { color: #5EEAD4; }
[data-theme="dark"] .kform__status.is-error { color: #FCA5A5; }

.btn.is-busy { opacity: .7; pointer-events: none; }

.office + .office { margin-top: 24px; }
.office { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.office__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 18px; }
.office__label span { color: var(--muted); font-weight: 500; }
.office__entity { font-size: var(--text-sm); font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.office--registered { background: transparent; border-style: dashed; }
.office__list { display: grid; gap: 15px; }
.office__list li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-sm); color: var(--body); }
.office__list svg { color: var(--color-primary); flex: none; margin-top: 3px; }
.office__list a:hover { color: var(--color-primary); }
.office__map { margin-top: 22px; border-radius: var(--radius-md); overflow: hidden; }
.office__map iframe { width: 100%; height: 220px; border: 0; }

.searchform { display: flex; gap: 8px; }

.searchform input {
	flex: 1;
	min-width: 0;
	padding: 14px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	background: var(--card);
	font-size: var(--text-sm);
	color: var(--ink);
}

.searchform input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), .12); }

.searchform button {
	width: 50px;
	height: 50px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--grad-brand);
	color: #fff;
	transition: transform var(--base) var(--ease-spring), box-shadow var(--base) var(--ease-out);
}

.searchform button:hover { transform: scale(1.06); box-shadow: var(--shadow-brand); }

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.before-footer { padding-block: 44px; background: var(--bg-alt); }

.site-footer {
	background: var(--dark-bg);
	color: var(--dark-body);
	padding-block: clamp(60px, 7vw, 90px) 32px;
	position: relative;
	overflow: hidden;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(700px 320px at 88% 0%, rgba(var(--color-primary-rgb), .22), transparent 68%),
		radial-gradient(520px 260px at 8% 100%, rgba(var(--color-accent-rgb), .16), transparent 70%);
	pointer-events: none;
}

.site-footer .container { position: relative; z-index: 1; }

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
	gap: clamp(28px, 4vw, 54px);
	padding-bottom: clamp(38px, 5vw, 56px);
	border-bottom: 1px solid var(--dark-line);
}

.footer-brand__logo { height: 44px; width: auto; margin-bottom: 24px; }
.footer-brand__text { font-size: var(--text-sm); line-height: 1.65; max-width: 40ch; text-wrap: pretty; }

.socials { display: flex; gap: 10px; margin-top: 26px; }

.socials a {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	border: 1px solid rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .7);
	transition: all var(--base) var(--ease-out);
}

.socials a:hover { background: var(--grad-brand); border-color: transparent; color: #fff; transform: translateY(-3px); }
.socials--dark a { border-color: var(--line); color: var(--ink); }
.socials--dark a:hover { color: #fff; }

.footer-col__title { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 22px; }
.footer-links { display: grid; gap: 12px; }

.site-footer .page_item a,
.footer-links a { font-size: var(--text-sm); transition: color var(--fast) var(--ease-out), padding-left var(--fast) var(--ease-out); }

.site-footer .page_item a:hover,
.footer-links a:hover { color: var(--color-secondary); padding-left: 5px; }

.footer-contact { display: grid; gap: 16px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--text-sm); line-height: 1.6; }
.footer-contact svg { color: var(--color-secondary); flex: none; margin-top: 3px; }
.footer-contact a:hover { color: #fff; }

.footer-contact__reg-label,
.footer-contact__reg-name { display: block; font-size: var(--text-xs); line-height: 1.5; }

.footer-contact__reg-label { font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: 4px; }
.footer-contact__reg-name { font-weight: 600; color: rgba(255, 255, 255, .68); }

.newsletter { margin-top: 30px; }
.newsletter__title { font-size: var(--text-sm); color: rgba(255, 255, 255, .8); margin-bottom: 14px; }
.newsletter__form { display: flex; gap: 8px; }

.newsletter__form input {
	flex: 1;
	min-width: 0;
	padding: 12px 18px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, .05);
	color: #fff;
	font-size: var(--text-sm);
}

.newsletter__form input::placeholder { color: rgba(255, 255, 255, .36); }
.newsletter__form input:focus { outline: none; border-color: var(--color-secondary); }

.newsletter__form button {
	width: 46px;
	height: 46px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--grad-brand);
	color: #fff;
	transition: transform var(--base) var(--ease-spring);
}

.newsletter__form button:hover { transform: scale(1.08); }

.footer-map { margin-top: 34px; border-radius: var(--radius-lg); overflow: hidden; }
.footer-map iframe { width: 100%; height: 260px; border: 0; filter: grayscale(1) invert(.9) contrast(.85); }

.footer-badges { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-block: 28px; border-bottom: 1px solid var(--dark-line); }
.footer-badges li { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: rgba(255, 255, 255, .5); }
.footer-badges svg { color: var(--color-secondary); }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 28px; font-size: var(--text-xs); color: rgba(255, 255, 255, .45); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-legal a:hover { color: var(--color-secondary); }

/* ==========================================================================
   12. FLOATING ELEMENTS & OVERLAYS
   ========================================================================== */

.floats { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }

.float-btn {
	width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	border-radius: var(--radius-full);
	color: #fff;
	box-shadow: var(--shadow-lg);
	transition: transform var(--base) var(--ease-spring), opacity var(--base) var(--ease-out);
}

.float-btn:hover { transform: translateY(-3px) scale(1.06); }
.float-btn--wa { background: #25D366; }
.float-btn__label { display: none; }
.float-btn--top { background: var(--grad-brand); opacity: 0; pointer-events: none; transform: translateY(12px); }
.float-btn--top.is-visible { opacity: 1; pointer-events: auto; transform: none; }

.float-cta {
	position: fixed;
	left: 50%;
	bottom: 22px;
	transform: translate(-50%, 140%);
	z-index: 58;
	display: flex;
	align-items: center;
	gap: 20px;
	max-width: min(700px, calc(100vw - 116px));
	padding: 14px 16px 14px 26px;
	background: var(--glass);
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid var(--glass-line);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-xl);
	transition: transform var(--slow) var(--ease-out);
}

.float-cta.is-visible { transform: translate(-50%, 0); }
.float-cta__text { font-size: var(--text-sm); color: var(--ink); font-weight: 500; }

.float-cta__close {
	width: 32px;
	height: 32px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--muted);
	transition: background var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.float-cta__close:hover { background: var(--line-soft); color: var(--ink); }

.cookie-bar {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 62;
	width: min(420px, calc(100vw - 40px));
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	padding: 24px 26px;
	animation: rise-in var(--slow) var(--ease-out);
}

.cookie-bar__text { font-size: var(--text-sm); color: var(--body); margin-bottom: 20px; }
.cookie-bar__text a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar__actions { display: flex; gap: 10px; justify-content: flex-end; }

.preloader {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: grid;
	place-items: center;
	background: var(--dark-bg);
	transition: opacity var(--slow) var(--ease-out), visibility var(--slow);
}

.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__mark {
	font-family: var(--font-display);
	font-size: 3.5rem;
	font-weight: 800;
	letter-spacing: -0.05em;
	background: linear-gradient(100deg, #60A5FA, #A78BFA, #5EEAD4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: pulse 1.5s var(--ease-in-out) infinite;
}

/* ==========================================================================
   13. UTILITIES, MOTION, RESPONSIVE, PRINT
   ========================================================================== */

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* WordPress core classes */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: var(--text-xs); color: var(--muted); margin-top: 8px; }
.sticky, .gallery-caption, .bypostauthor { display: block; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drop-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb), .22); } 50% { box-shadow: 0 0 0 8px rgba(var(--color-secondary-rgb), .06); } }
@keyframes ripple { from { width: 0; height: 0; opacity: .55; } to { width: 320px; height: 320px; opacity: 0; } }
@keyframes float-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(50px, 40px); } }
@keyframes float-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, -50px); } }

/* --- Breakpoints --- */

@media (max-width: 1180px) {
	.mega__grid { grid-template-columns: repeat(2, 1fr); }
	.detail { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 1024px) {
	.nav,
	.site-header__actions .link-ghost,
	.site-header__actions .btn { display: none; }

	.burger { display: flex; }

	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
	.footer-col--contact { grid-column: 1 / -1; }

	.about__grid { grid-template-columns: 1fr; }
	.about__media { max-width: 470px; }
	.about__frame { aspect-ratio: 5 / 4; }
	.about__badge { right: 16px; }

	.about-story { grid-template-columns: 1fr; }
	.about-story__media { max-width: 470px; }

	.contact-grid { grid-template-columns: 1fr; }
	.blog-layout { grid-template-columns: 1fr; }
	.detail { grid-template-columns: 1fr; }
	.sticky-card { position: static; }

	.profile { grid-template-columns: 1fr; }
	.profile__media { max-width: 380px; }
	.profile--flip .profile__media { order: 0; }

	.testi__item { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 860px) {
	.topbar__note { display: none; }
	.topbar__inner { justify-content: center; }

	.leader { grid-template-columns: 1fr; }
	.leader__photo img { min-height: 0; aspect-ratio: 3 / 2; }
	.leader__body { padding: 0 26px 28px; }
	.leader__role { bottom: auto; top: 18px; }

	.service-row { grid-template-columns: 1fr; gap: 18px; }
	.service-row__aside { flex-direction: row; align-items: center; gap: 16px; }
	.service-row__num { font-size: 1.625rem; }
	.service-row__icon { width: 48px; height: 48px; }

	.hero__slide { min-height: 640px; }
	.hero__controls { bottom: 24px; }
	.hero__arrows { display: none; }

	.milestone { grid-template-columns: 1fr; gap: 8px; padding-left: 34px; }
	.milestone__year { text-align: left; }
	.timeline::before { left: 5px; }
	.milestone::after { left: 0; top: 18px; }
}

@media (max-width: 640px) {
	.card-grid, .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
	.testi__item { flex-basis: 100%; }
	.hero__actions .btn { flex: 1 1 100%; }
	.footer-grid { grid-template-columns: 1fr; }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	.cookie-bar { left: 12px; right: 12px; width: auto; }
	.about__badge { position: static; margin-top: 18px; display: inline-block; }
}

/* --- Phones ---
   Content-sized hero: a three-line headline, subtext, two buttons and three
   stats do not fit a fixed-height box on a small screen. -------------------- */
@media (max-width: 560px) {
	:root {
		--text-hero: clamp(2.125rem, 9vw, 2.875rem);
		--text-5xl: clamp(1.875rem, 7.5vw, 2.375rem);
		--text-4xl: clamp(1.625rem, 6.5vw, 2rem);
		--text-3xl: 1.5rem;
		--text-base: 1.0625rem;
		--section-py: 60px;
		--gutter: 18px;
	}

	.hero__slide { min-height: 0; }
	.hero__inner { padding-block: calc(var(--header-h) + 34px) 88px; }
	.hero__badge { margin-bottom: 20px; padding: 7px 14px 7px 10px; font-size: 11px; }
	.hero__title { margin-bottom: 18px; }
	.hero__actions { margin-top: 28px; gap: 10px; }
	.hero__stats { margin-top: 34px; padding-top: 24px; gap: 18px 26px; }
	.hero__stat dt { font-size: 1.625rem; }
	.hero__controls { bottom: 20px; }
	.hero::before, .hero::after { display: none; }

	.btn { white-space: normal; padding: 12px 20px; }
	.btn--lg { padding: 14px 24px; font-size: var(--text-sm); }
	.cta-strip__actions .btn, .error-404__links .btn { flex: 1 1 100%; }

	.section-head { margin-bottom: 32px; }
	.card, .case-card, .form-card, .testi__card { padding: 24px 22px; }
	.checklist--2col { grid-template-columns: 1fr; }
	.results { grid-template-columns: 1fr 1fr; gap: 18px; padding: 22px; }
	.facts { grid-template-columns: 1fr 1fr; padding: 20px; }

	.page-hero { padding-block: 48px 44px; }
	.page-hero__stats { gap: 18px 26px; margin-top: 32px; }
	.detail__h2 { margin-top: 34px; }

	.service-row__title, .case-row__title, .industry-row__title { font-size: var(--text-xl); }
	.mission-list__item { gap: 16px; }
	.mission-list__item p { font-size: var(--text-base); }
	.tech__group, .office { padding: 22px; }
	.results__item dt { font-size: 1.625rem; }
	.trusted__item img { height: 26px; }
	.trusted__word { font-size: 1.0625rem; }

	.float-cta { display: none !important; }
	.floats { right: 14px; bottom: 14px; }
	.float-btn { width: 48px; height: 48px; }
}

@media (max-width: 380px) {
	:root { --gutter: 15px; }
	.hero__stats { gap: 14px 18px; }
	.results, .facts { grid-template-columns: 1fr; }
}

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

	.js .reveal { opacity: 1; transform: none; }
	.trusted__track { animation: none; }
	.hero__media img { transform: none; }
	.hero::before, .hero::after { animation: none; }
}

@media print {
	.site-header, .topbar, .mobile-nav, .floats, .float-cta,
	.cookie-bar, .hero__controls, .site-footer, .theme-toggle { display: none !important; }

	body { color: #000; background: #fff; }
	.section { padding-block: 24px; }
	a::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

/* ==========================================================================
   14. INSIGHTS — blog index, article, sidebar, comments (v2.3.0)
   ========================================================================== */

/* --- shared --- */
.section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* --- blog / article hero --- */
.page-hero--blog .page-hero__text,
.page-hero--article .page-hero__text { max-width: 62ch; }

.page-hero--article .article__title { max-width: 20ch; }
.page-hero--article .article__standfirst { font-size: var(--text-md); line-height: 1.6; }
.page-hero--article .eyebrow--light a { color: inherit; }
.page-hero--article .eyebrow--light a:hover { color: #fff; }

.page-hero__meta {
	margin-top: 18px;
	font-size: var(--text-sm);
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .62);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

/* --- topic filter bar --- */
.topic-bar {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
}

.topic-bar__inner {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-block: 18px;
	scrollbar-width: none;
}

.topic-bar__inner::-webkit-scrollbar { display: none; }

.topic-pill {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--body);
	background: var(--card);
	white-space: nowrap;
	transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out), background var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}

.topic-pill:hover { color: var(--color-primary); border-color: rgba(var(--color-primary-rgb), .45); transform: translateY(-1px); }
.topic-pill.is-active { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: var(--shadow-brand); }

/* --- layout --- */
.blog-layout { align-items: start; }
.blog-main { min-width: 0; }
.blog-grid { margin-top: clamp(28px, 3vw, 40px); }

/* --- lead story card --- */
.card--post-lead { grid-column: 1 / -1; }

@media (min-width: 1025px) {
	.card--post-lead {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: stretch;
	}
	.card--post-lead .card__media { height: 100%; }
	.card--post-lead .card__media img { height: 100%; object-fit: cover; }
	.card--post-lead .card__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3vw, 44px); }
	.card--post-lead .card__title { font-size: var(--text-2xl); line-height: 1.22; }
	.card--post-lead .card__text { font-size: var(--text-base); }
}

.card__cat {
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-primary);
	transition: color var(--fast) var(--ease-out);
}

.card__cat:hover { color: var(--color-accent); }

.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* --- article body --- */
.article-wrap { padding-top: clamp(34px, 4vw, 56px); }

.post-figure--lift {
	margin-top: clamp(-72px, -6vw, -40px);
	box-shadow: var(--shadow-lg);
	border: 1px solid var(--line);
	background: var(--card);
}

.prose--article {
	font-size: var(--text-base);
	line-height: 1.78;
	color: var(--body);
	max-width: 68ch;
}

.prose--article h2 {
	margin-top: 2.2em;
	margin-bottom: .6em;
	font-size: var(--text-2xl);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--ink);
	scroll-margin-top: 110px;
}

.prose--article h2::before {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 18px;
	border-radius: 999px;
	background: var(--grad-brand);
}

.prose--article h3 { margin-top: 1.8em; margin-bottom: .5em; font-size: var(--text-lg); color: var(--ink); }
.prose--article p { margin-bottom: 1.25em; text-wrap: pretty; }
.prose--article > p:first-of-type { font-size: var(--text-md); line-height: 1.66; color: var(--ink-2); }
.prose--article ul,
.prose--article ol { margin: 0 0 1.5em; padding-left: 0; list-style: none; display: grid; gap: 12px; }

.prose--article ul li { position: relative; padding-left: 30px; }

.prose--article ul li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: .68em;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--grad-brand);
}

.prose--article ol { counter-reset: kaustya-ol; }
.prose--article ol li { position: relative; padding-left: 34px; counter-increment: kaustya-ol; }

.prose--article ol li::before {
	content: counter(kaustya-ol);
	position: absolute;
	left: 0;
	top: .1em;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: rgba(var(--color-primary-rgb), .10);
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: 700;
}

.prose--article strong { color: var(--ink); font-weight: 650; }

.prose--article a {
	color: var(--color-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--fast) var(--ease-out);
}

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

.prose--article blockquote {
	margin: 2em 0;
	padding: 24px 28px;
	border-left: 3px solid transparent;
	border-image: var(--grad-brand) 1;
	background: var(--bg-alt);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--text-md);
	color: var(--ink-2);
}

/* --- article footer: tags + share --- */
.article__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: clamp(38px, 4vw, 56px);
	padding-top: 26px;
	border-top: 1px solid var(--line);
}

.article__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.article__tags a {
	display: inline-flex;
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--muted);
	transition: color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out);
}

.article__tags a:hover { color: var(--color-primary); border-color: rgba(var(--color-primary-rgb), .45); }

.article__share { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.article__share-label {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.share-btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--body);
	background: var(--card);
	transition: all var(--fast) var(--ease-out);
}

.share-btn:hover {
	color: #fff;
	background: var(--grad-brand);
	border-color: transparent;
	transform: translateY(-2px);
	box-shadow: var(--shadow-brand);
}

/* --- author card --- */
.author-card {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-top: clamp(32px, 3.5vw, 44px);
	padding: clamp(22px, 2.6vw, 30px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-alt);
}

.author-card__avatar img { border-radius: 999px; display: block; }
.author-card__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.author-card__name { margin-top: 4px; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.author-card__bio { margin-top: 8px; font-size: var(--text-sm); line-height: 1.65; color: var(--muted); max-width: 60ch; }

/* --- sidebar panels --- */
.blog-sidebar { position: sticky; top: 104px; }

.topic-list { display: grid; gap: 2px; }

.topic-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	font-size: var(--text-sm);
	color: var(--body);
	border-bottom: 1px solid var(--line-soft);
}

.topic-list li:last-child a { border-bottom: 0; }
.topic-list a:hover { color: var(--color-primary); }

.topic-list__count {
	flex: none;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(var(--color-primary-rgb), .10);
	color: var(--color-primary);
	font-size: var(--text-xs);
	font-weight: 700;
	text-align: center;
}

.mini-list { display: grid; gap: 16px; }
.mini-post { display: flex; gap: 12px; align-items: flex-start; }

.mini-post__media {
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: var(--radius-xs);
	overflow: hidden;
}

.mini-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-post__body { display: grid; gap: 4px; min-width: 0; }
.mini-post__title { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; color: var(--ink); }
.mini-post__title:hover { color: var(--color-primary); }
.mini-post__date { font-size: var(--text-xs); color: var(--muted); }

.widget--cta {
	background: var(--grad-brand);
	border-color: transparent;
	color: #fff;
	box-shadow: var(--shadow-brand);
}

.widget--cta__eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.widget--cta__text { margin: 10px 0 18px; font-size: var(--text-sm); line-height: 1.6; color: rgba(255, 255, 255, .92); }
.widget--cta .btn--primary { background: #fff; color: var(--color-primary); box-shadow: none; }
.widget--cta .btn--primary:hover { background: #fff; transform: translateY(-2px); }

/* --- comments --- */
.comments { margin-top: clamp(40px, 4.5vw, 64px); padding-top: clamp(32px, 3.5vw, 44px); border-top: 1px solid var(--line); }
.comments__title { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.02em; color: var(--ink); margin-bottom: 26px; }
.comments__list { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 18px; }
.comments__list .children { list-style: none; margin: 18px 0 0; padding-left: clamp(18px, 3vw, 40px); display: grid; gap: 18px; }

.comment-item__inner {
	display: flex;
	gap: 16px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--card);
}

.comment-item__avatar img { border-radius: 999px; display: block; }
.comment-item__body { min-width: 0; flex: 1; }
.comment-item__meta { font-size: var(--text-sm); color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.comment-item__meta strong { color: var(--ink); }
.comment-item__pending { margin-top: 8px; font-size: var(--text-xs); font-weight: 600; color: var(--color-accent); }
.comment-item__text { margin-top: 10px; font-size: var(--text-sm); line-height: 1.7; color: var(--body); }
.comment-item__text p { margin-bottom: .8em; }
.comment-item__text p:last-child { margin-bottom: 0; }

.comment-item__reply a {
	display: inline-flex;
	margin-top: 12px;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.comment-item__reply a:hover { color: var(--color-accent); }
.comments__closed { font-size: var(--text-sm); color: var(--muted); }

.comment-respond {
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-alt);
}

.comments__form-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); margin-bottom: 8px; }
.comments__notes { font-size: var(--text-xs); color: var(--muted); margin-bottom: 22px; }
.comment-respond .comment-reply-title small { margin-left: 10px; font-size: var(--text-xs); font-weight: 500; }

.kform--comment { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.kform--comment .kfield { display: grid; gap: 8px; margin: 0; }
.kform--comment .kfield--full { grid-column: 1 / -1; }
.kform--comment .kfield label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--body); }
.kform--comment .kfield__req { color: var(--color-primary); }
.kform--comment .form-submit { grid-column: 1 / -1; margin: 0; }

.kform--comment input[type="url"],
.kform--comment input[type="text"],
.kform--comment input[type="email"],
.kform--comment textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--card);
	font-size: var(--text-sm);
	font-family: inherit;
	color: var(--ink);
	transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}

.kform--comment input:focus,
.kform--comment textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), .12);
}

.kform--comment textarea { resize: vertical; min-height: 150px; }
.kform--comment .comment-form-cookies-consent { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--muted); }
.kform--comment .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-weight: 500; }
.kform--comment input[type="checkbox"] { width: auto; accent-color: var(--color-primary); }

/* --- responsive --- */
@media (max-width: 1024px) {
	.blog-sidebar { position: static; }
	.article__share { margin-left: 0; }
	.post-figure--lift { margin-top: -24px; }
}

@media (max-width: 640px) {
	.comment-item__inner { flex-direction: column; gap: 12px; }
	.comments__list .children { padding-left: 14px; }
}

/* ==========================================================================
   15. MOBILE REFINEMENTS (v2.4.0)
   ========================================================================== */

/* --- Leadership: a compact row instead of a tall photo panel --------------
   The portrait crop left ~240px of dead background above and below the
   subject on a phone. The photo becomes an 88px thumbnail beside the name,
   with the quote spanning the full card width underneath. */
@media (max-width: 860px) {
	.leader {
		grid-template-columns: 88px minmax(0, 1fr);
		grid-template-rows: auto auto auto;
		align-items: start;
		gap: 4px 16px;
		padding: 20px;
	}

	.leader__photo {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 88px;
		height: 88px;
		border-radius: var(--radius-md);
		border: 1px solid var(--line);
	}

	.leader__photo img {
		min-height: 0;
		height: 100%;
		aspect-ratio: 1;
		object-fit: cover;
		object-position: center 22%;
	}

	/* The badge duplicates the job title directly beside it on a phone. */
	.leader__role { display: none; }

	/* Lets the name, title and quote become grid items of the card itself,
	   so the quote can run the full width under the thumbnail. */
	.leader__body { display: contents; }

	.leader__name { grid-column: 2; grid-row: 1; align-self: end; font-size: var(--text-lg); margin-bottom: 2px; }
	.leader__title { grid-column: 2; grid-row: 2; align-self: start; margin-bottom: 0; font-size: 11px; letter-spacing: .06em; }
	.leader__quote { grid-column: 1 / -1; grid-row: 3; margin-top: 16px; }
	.leader__quote-mark { margin-bottom: 6px; }

	.leader:hover { transform: none; }
	.leader:hover .leader__photo img { transform: none; }
}

/* --- Inner page hero: less vertical weight on a phone --- */
@media (max-width: 640px) {
	.page-hero { padding-block: clamp(40px, 9vw, 60px) clamp(36px, 8vw, 52px); }
	.page-hero__title { font-size: clamp(1.75rem, 7.4vw, 2.25rem); max-width: 18ch; }
	.page-hero__text { margin-top: 16px; font-size: var(--text-base); line-height: 1.55; }
	.page-hero--blog .page-hero__text,
	.page-hero--article .page-hero__text { font-size: var(--text-sm); line-height: 1.6; }
	.page-hero__meta { margin-top: 14px; font-size: var(--text-xs); gap: 8px; }
	.page-hero--article .article__standfirst { font-size: var(--text-base); }
}

/* --- Topic bar: bleed to the screen edges and show it can be scrolled --- */
@media (max-width: 860px) {
	.topic-bar__inner {
		max-width: none;
		padding-inline: var(--gutter);
		padding-block: 14px;
		gap: 8px;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%);
	}

	.topic-pill { padding: 8px 15px; scroll-snap-align: start; }
	.topic-pill:last-child { margin-right: 24px; }
}

/* --- Article and blog spacing on a phone --- */
@media (max-width: 640px) {
	.post-figure--lift { margin-top: -18px; border-radius: var(--radius-md); }
	.prose--article { font-size: var(--text-sm); line-height: 1.72; }
	.prose--article > p:first-of-type { font-size: var(--text-base); }
	.prose--article h2 { font-size: var(--text-xl); margin-top: 1.9em; }
	.prose--article h2::before { width: 32px; margin-bottom: 14px; }

	.article__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
	.article__share { margin-left: 0; }

	.author-card { flex-direction: column; gap: 14px; }
	.card--post-lead .card__body { padding: 22px; }
	.blog-grid { margin-top: 20px; }
	.blog-sidebar { margin-top: 8px; }
}

/* --- Floating buttons: smaller footprint over content --- */
@media (max-width: 640px) {
	.floats { right: 12px; bottom: 12px; gap: 10px; }
	.float-btn { width: 46px; height: 46px; box-shadow: var(--shadow-md); }
	.float-btn--top { width: 40px; height: 40px; }
	.float-btn--top svg { width: 16px; height: 16px; }
}

/* ==========================================================================
   16. BLOG — mobile corrections (v2.5.0)
   ========================================================================== */

/* The post meta line inherits .card__meta, which is uppercase and brand blue.
   With category + date + reading time that turned the whole line into shouty
   blue caps and wrapped to two lines on a phone. Only the category keeps the
   treatment; the date and reading time drop back to muted sentence case. */
.card--post .card__meta {
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
	font-size: var(--text-xs);
	gap: 7px;
	row-gap: 2px;
}

.card--post .card__meta .card__cat { text-transform: uppercase; letter-spacing: .07em; color: var(--color-primary); }
.card--post .card__meta span[aria-hidden] { color: var(--line); }

@media (max-width: 640px) {
	/* Cards: tighter padding, shallower image, no hover lift on touch. */
	.card--post .card__body { padding: 20px 18px 22px; }
	.card--post .card__media img { aspect-ratio: 16 / 9; }
	.card--post .card__title { font-size: var(--text-lg); line-height: 1.3; }
	.card--post .card__text { font-size: var(--text-sm); }
	.card--post-lead .card__body { padding: 20px 18px 22px; }

	/* The lead story is the same shape as the rest on a phone. */
	.card--post-lead .card__title { font-size: var(--text-xl); }

	/* Grid gap was tuned for desktop columns. */
	.card-grid { gap: 18px; }
	.blog-layout { gap: 34px; }

	/* Sidebar panels: less padding, smaller thumbnails. */
	.blog-sidebar .widget { padding: 20px; }
	.mini-post__media { width: 54px; height: 54px; }
	.widget--cta__text { font-size: var(--text-xs); }

	/* Pagination: keep the row on one line at 360px. */
	.pagination { margin-top: 34px; }
	.pagination .nav-links { gap: 6px; }
	.pagination .page-numbers { min-width: 40px; height: 40px; padding-inline: 9px; font-size: var(--text-xs); }

	/* Article hero and body. */
	.page-hero--article .article__title { max-width: none; }
	.comments { margin-top: 32px; padding-top: 26px; }
	.comments__title { font-size: var(--text-xl); }
	.comment-respond { padding: 20px 18px; }
	.related .section-head--row { gap: 14px; }
	.related .section-head { margin-bottom: 24px; }
}

/* Nothing on a touch screen should shift under a finger. */
@media (hover: none) {
	.card:hover { transform: none; box-shadow: none; }
	.card--post:hover .card__media img { transform: none; }
	.topic-pill:hover { transform: none; }
	.share-btn:hover { transform: none; }
}

/* Guard against a stray element widening the page on small screens. */
@media (max-width: 860px) {
	.blog-main,
	.blog-sidebar,
	.prose--article { max-width: 100%; }
	.prose--article img,
	.prose--article table { max-width: 100%; height: auto; }
	.prose--article pre { overflow-x: auto; }
}

/* ==========================================================================
   17. MOTION LAYER (v2.6.0)
   Everything here degrades to a static, correct design if motion.js does not
   load or prefers-reduced-motion is set.
   ========================================================================== */

/* --- Reading progress on articles --- */
.read-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 1200;
	opacity: 0;
	transition: opacity var(--base) var(--ease-out);
	pointer-events: none;
}

.read-progress.is-on { opacity: 1; }

.read-progress__fill {
	display: block;
	height: 100%;
	transform: scaleX(0);
	transform-origin: 0 50%;
	background: var(--grad-brand);
	box-shadow: 0 0 14px rgba(var(--color-primary-rgb), .5);
}

/* --- Pointer spotlight -------------------------------------------------- */
.has-spotlight { position: relative; }

.has-spotlight::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		220px circle at var(--mx, 50%) var(--my, 0%),
		rgba(var(--color-primary-rgb), .10),
		transparent 62%
	);
	opacity: 0;
	transition: opacity var(--base) var(--ease-out);
	pointer-events: none;
	z-index: 0;
}

.has-spotlight:hover::after { opacity: 1; }
.has-spotlight > * { position: relative; z-index: 1; }

/* The dark stat blocks want the accent, not the primary. */
.stat.has-spotlight::after {
	background: radial-gradient( 200px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--color-accent-rgb), .16), transparent 60% );
}

/* --- Magnetic buttons --------------------------------------------------- */
.has-motion .btn--primary,
.has-motion .float-btn,
.has-motion .share-btn {
	transform: translate3d( var(--pull-x, 0), var(--pull-y, 0), 0 );
	transition: transform 260ms var(--ease-spring), box-shadow var(--base) var(--ease-out), background var(--base) var(--ease-out), color var(--base) var(--ease-out);
}

.has-motion .btn--primary:hover { transform: translate3d( var(--pull-x, 0), calc( var(--pull-y, 0px) - 2px ), 0 ); }

/* A single light sweep across the primary button on hover. */
.btn--primary { position: relative; overflow: hidden; }

.btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 55%;
	height: 100%;
	background: linear-gradient( 100deg, transparent, rgba(255, 255, 255, .38), transparent );
	transform: skewX(-18deg);
	transition: left 620ms var(--ease-out);
	pointer-events: none;
}

.btn--primary:hover::after { left: 130%; }
.btn--primary > * { position: relative; z-index: 1; }

/* --- Headline word reveal ----------------------------------------------- */
.is-split .word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.5em) rotate(1.2deg);
	transition:
		opacity 620ms var(--ease-out) calc( var(--i, 0) * 46ms ),
		transform 720ms var(--ease-spring) calc( var(--i, 0) * 46ms );
	will-change: transform, opacity;
}

.is-split.is-lit .word { opacity: 1; transform: none; }

/* Once the animation has run, drop the hint so text stays selectable/crisp. */
.is-split.is-lit .word { will-change: auto; }

/* --- Parallax drift ----------------------------------------------------- */
.has-drift { transform: translate3d( 0, var(--drift, 0), 0 ); transition: transform 120ms linear; }
.verse__inner.has-drift { transition: transform 240ms linear; }

/* --- Staggered grid reveal ---------------------------------------------- */
.js .card-grid > .reveal,
.js .blog-grid > .reveal { transition-delay: calc( var(--stagger, 0) * 70ms ); }

/* --- Section head: the eyebrow rule draws itself in ---------------------- */
.eyebrow__rule { transform-origin: 0 50%; }
.js .reveal .eyebrow__rule { transform: scaleX(0); transition: transform 640ms var(--ease-out) 140ms; }
.js .reveal.is-in .eyebrow__rule { transform: scaleX(1); }

/* --- Navigation: an underline that sweeps rather than appears ------------ */
.nav__links > li > a { position: relative; }

.nav__links > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: var(--grad-brand);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 420ms var(--ease-out);
}

.nav__links > li > a:hover::after,
.nav__links > li.current-menu-item > a::after,
.nav__links > li.current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: 0 50%; }

/* --- Links: arrow travels on hover -------------------------------------- */
.link-arrow svg,
.card__more svg { transition: transform 320ms var(--ease-spring); }
.link-arrow:hover svg,
.card:hover .card__more svg { transform: translateX(5px); }

/* --- Topic pills and tags: a gentle press ------------------------------- */
.topic-pill:active,
.article__tags a:active { transform: scale(.97); }

/* --- Footer socials: pop rather than slide ------------------------------ */
.socials a { transition: transform 300ms var(--ease-spring), background var(--base) var(--ease-out), border-color var(--base) var(--ease-out), color var(--base) var(--ease-out); }
.socials a:hover { transform: translateY(-3px) scale(1.08); }

/* --- Focus ring: visible, on brand, never clipped ----------------------- */
:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
	border-radius: var(--radius-xs);
}

/* --- Respect the user's setting above all of the above ------------------ */
@media (prefers-reduced-motion: reduce) {
	.read-progress { display: none; }
	.is-split .word { opacity: 1; transform: none; transition: none; }
	.has-drift { transform: none; }
	.has-spotlight::after { display: none; }
	.btn--primary::after { display: none; }
	.js .card-grid > .reveal,
	.js .blog-grid > .reveal { transition-delay: 0s; }
	.js .reveal .eyebrow__rule { transform: scaleX(1); transition: none; }
}

/* Pointer effects have no meaning on a touch screen. */
@media (hover: none) {
	.has-spotlight::after { display: none; }
	.btn--primary::after { display: none; }
	.has-motion .btn--primary,
	.has-motion .float-btn,
	.has-motion .share-btn { transform: none; }
}

/* ==========================================================================
   18. INSIGHTS — full responsive scale (v2.7.0)

   The blog was written with its own 620/900px breakpoints, which did not line
   up with the rest of the theme (1180 / 1024 / 860 / 640 / 560 / 380) and left
   tablets in a gap: the sidebar had already dropped below the articles at
   1024px but was still styled as a narrow desktop column.

   This section owns the blog at every width. It comes last, so it wins.
   ========================================================================== */

/* --- Safety: nothing on this page may widen the viewport ---------------- */
.blog-layout,
.blog-main,
.blog-sidebar,
.topic-bar { min-width: 0; max-width: 100%; }

.blog-main img,
.blog-main iframe,
.blog-main video,
.blog-main table { max-width: 100%; height: auto; }

.blog-main pre,
.blog-main table { overflow-x: auto; display: block; }

/* ==========================================================================
   Large desktop — 1181px and up
   Sidebar at full width, articles two-up.
   ========================================================================== */
@media (min-width: 1181px) {
	.blog-layout { grid-template-columns: minmax(0, 1fr) 320px; }
	.blog-sidebar { position: sticky; top: 104px; }
}

/* ==========================================================================
   Small desktop / large tablet landscape — 1025px to 1180px
   Sidebar narrows before it drops.
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1180px) {
	.blog-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 32px; }
	.blog-sidebar { position: sticky; top: 96px; }
	.blog-sidebar .widget { padding: 22px; }
	.mini-post__media { width: 56px; height: 56px; }
}

/* ==========================================================================
   Tablet — 861px to 1024px
   The sidebar moves below the articles here, so it stops being a column and
   becomes a row of panels. Previously it stretched to full width as three
   tall stacked blocks, which is what made this range look unfinished.
   ========================================================================== */
@media (max-width: 1024px) {
	.blog-layout { grid-template-columns: 1fr; gap: 44px; }

	.blog-sidebar {
		position: static;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
		gap: 20px;
		align-items: start;
		padding-top: 34px;
		border-top: 1px solid var(--line);
	}

	.blog-sidebar .widget { margin: 0; height: 100%; }
	.widget--cta { display: flex; flex-direction: column; justify-content: center; }

	/* Topic bar bleeds to the screen edges from tablet down. */
	.topic-bar__inner {
		max-width: none;
		padding-inline: var(--gutter);
		mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
	}

	.article__foot { padding-top: 24px; }
}

/* Tablet portrait keeps two article columns where the space allows. */
@media (min-width: 700px) and (max-width: 1024px) {
	.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.card--post-lead .card__title { font-size: var(--text-2xl); }
}

/* ==========================================================================
   Large phone / small tablet — 641px to 860px
   ========================================================================== */
@media (max-width: 860px) {
	.blog-layout { gap: 38px; }
	.blog-sidebar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; padding-top: 28px; }
	.page-hero--blog .page-hero__title { max-width: 16ch; }
	.related .section-head--row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Phone — 640px and down
   Single column everywhere; the sidebar stacks.
   ========================================================================== */
@media (max-width: 640px) {
	.blog-layout { gap: 32px; }
	.blog-grid { grid-template-columns: 1fr; }

	.blog-sidebar {
		grid-template-columns: 1fr;
		gap: 14px;
		padding-top: 24px;
	}

	.card--post-lead { display: block; }
	.card--post-lead .card__media img { aspect-ratio: 16 / 9; height: auto; }

	.topic-bar__inner { padding-block: 13px; gap: 8px; }
	.topic-pill { padding: 8px 14px; font-size: 12px; }

	.article__share { flex-wrap: wrap; }
	.share-btn { width: 38px; height: 38px; }
}

/* ==========================================================================
   Small phone — 560px and down
   ========================================================================== */
@media (max-width: 560px) {
	.page-hero--blog .page-hero__title,
	.page-hero--article .article__title { max-width: none; }
	.page-hero__meta { font-size: 12px; }

	.card--post .card__body { padding: 18px 16px 20px; }
	.card--post .card__title { font-size: var(--text-base); }
	.card--post .card__meta { font-size: 11px; }

	.blog-sidebar .widget { padding: 18px 16px; }
	.widget__title { font-size: var(--text-sm); }

	.pagination .page-numbers { min-width: 38px; height: 38px; padding-inline: 8px; }

	.comment-item__inner { padding: 16px; }
	.comment-respond { padding: 18px 16px; }
	.kform--comment { grid-template-columns: 1fr; }

	.author-card { padding: 18px 16px; }
	.prose--article h2::before { width: 28px; margin-bottom: 12px; }
}

/* ==========================================================================
   Very small phone — 380px and down
   ========================================================================== */
@media (max-width: 380px) {
	.card--post .card__body { padding: 16px 14px 18px; }
	.topic-pill { padding: 7px 12px; }
	.pagination .nav-links { gap: 5px; }
	.pagination .page-numbers { min-width: 34px; height: 34px; font-size: 11px; }
	.mini-post__media { width: 48px; height: 48px; }
	.article__share-label { display: none; }
}