/* ==========================================================================
   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;

	/* Hero dissolve: long enough to read as a dissolve, short enough not to
	   feel like the site is waiting for it. */
	--hero-fade: 1100ms;
	--hero-rise: 780ms;

	--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"; }

/*
 * Slides stack in one grid cell and cross-dissolve.
 *
 * A naive crossfade fades the outgoing slide out while the incoming fades in,
 * so halfway through both sit at 50% and the dark background shows between
 * them as a visible dip. Instead the outgoing slide is held at full opacity
 * underneath (.is-leaving) while the incoming one fades in on top of it. The
 * result is a clean dissolve with no flash. main.js adds and removes
 * .is-leaving around each change.
 */
.hero__slide {
	grid-area: slide;
	position: relative;
	min-height: clamp(600px, 88vh, 900px);
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	transition: opacity var(--hero-fade) var(--ease-in-out), visibility var(--hero-fade);
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.hero__slide.is-leaving {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: none;
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }

/*
 * The image is never scaled. It holds its framing for the whole time the
 * slide is on screen — the movement in this hero comes from the dissolve and
 * from the copy, not from the photograph.
 */
.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: none;
}

/* The copy settles in behind the dissolve, one line at a time. */
.hero__slide .hero__badge,
.hero__slide .hero__title,
.hero__slide .hero__text,
.hero__slide .hero__actions,
.hero__slide .hero__stats {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--hero-rise) var(--ease-out), transform var(--hero-rise) var(--ease-out);
}

.hero__slide.is-active .hero__badge,
.hero__slide.is-active .hero__title,
.hero__slide.is-active .hero__text,
.hero__slide.is-active .hero__actions,
.hero__slide.is-active .hero__stats {
	opacity: 1;
	transform: none;
}

.hero__slide.is-active .hero__badge   { transition-delay: 220ms; }
.hero__slide.is-active .hero__title   { transition-delay: 300ms; }
.hero__slide.is-active .hero__text    { transition-delay: 380ms; }
.hero__slide.is-active .hero__actions { transition-delay: 460ms; }
.hero__slide.is-active .hero__stats   { transition-delay: 540ms; }

/* Leaving copy goes quickly and without delay, so it never fights the dissolve. */
.hero__slide.is-leaving .hero__badge,
.hero__slide.is-leaving .hero__title,
.hero__slide.is-leaving .hero__text,
.hero__slide.is-leaving .hero__actions,
.hero__slide.is-leaving .hero__stats {
	opacity: 0;
	transform: none;
	transition: opacity 260ms var(--ease-in-out);
	transition-delay: 0s;
}

/* 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;
}

/*
 * The interior hero photograph fades up once on load and then holds still —
 * same rule as the homepage: no drift, no zoom.
 */
.page-hero__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .18;
	animation: page-hero-in 900ms var(--ease-out) both;
}

@keyframes page-hero-in {
	from { opacity: 0; }
}
.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; }

	/* No stagger, no dissolve — slides simply swap. */
	.hero__slide .hero__badge,
	.hero__slide .hero__title,
	.hero__slide .hero__text,
	.hero__slide .hero__actions,
	.hero__slide .hero__stats {
		opacity: 1;
		transform: none;
		transition-delay: 0s !important;
	}

	.page-hero__media { 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; }
}