/* Omedia UI kit — shared presentation layer. Content and URLs remain unchanged. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap");
:root {
	--bg-1: #fff;
	--bg-2: #f5f7fc;
	--bg-3: #eef2ff;
	--bg-4: #e5eaf2;
	--text-1: #17223b;
	--text-2: #596579;
	--text-3: #8995a7;
	--accent: #315efb;
	--accent-2: #7658e8;
	--accent-blue: #315efb;
	--accent-pink: #7658e8;
	--border-1: #e5eaf2;
	--border-2: #dfe6f8;
	--border-3: #cdd8ff;
}
html,
body {
	background: #fff;
	color: #17223b;
	font-family: Inter, Manrope, sans-serif;
	font-weight: 400;
	cursor: auto;
}
a,
button {
	cursor: pointer;
}
h1,
h2,
h3,
h4,
.h-1,
.h-2,
.h-display,
.case-hero h1,
.case-block h2,
.case-meta-v,
.logo,
.footer-giant-logo {
	font-family: Manrope, Inter, sans-serif;
	letter-spacing: -0.035em;
	line-height: 1.12;
}
p,
.lead,
.body {
	font-family: Inter, Manrope, sans-serif;
	font-weight: 400;
	line-height: 1.65;
}
.header,
.header.scrolled {
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid #e5eaf2;
	backdrop-filter: blur(16px);
}
.logo,
.nav a.active,
.nav a:hover {
	color: #17223b;
}
.nav a,
.lead,
.hero-sub {
	color: #596579;
}
.nav a:hover {
	background: #eef2ff;
}
.logo-mark {
	background: #eef2ff;
}
.menu-toggle-bar {
	background: #17223b;
}
.mobile-menu-overlay {
	background: rgba(23, 34, 59, 0.45);
}
.mobile-menu {
	background: #fff;
	color: #17223b;
}
.mobile-menu-link {
	color: #17223b;
}
.cursor-dot,
.cursor-ring,
.noise {
	display: none;
}
.mesh-bg,
.grid-bg {
	opacity: 0.16;
}
.hero,
.case-hero {
	background: #f5f7fc;
	color: #17223b;
}
.hero h1,
.hero h2,
.hero-tagline,
.case-hero h1,
.case-block h2,
.case-meta-v,
.related-card h3 {
	color: #17223b;
}
.hero h1 .accent,
.hero h1 .hl,
.case-block h2 .hl,
.accent,
.hl {
	color: #315efb;
}
.hero-sub,
.case-hero p,
.case-block p,
.case-block li {
	color: #596579;
	font-weight: 400;
}
.hero h1,
.hero h2,
.hero p {
	max-width: 100%;
	overflow-wrap: break-word;
}
.service-card,
.case-card,
.case-tile,
.price-card,
.contact-card,
.tech-card,
.team-tile,
.principle,
.related-card,
.article-card,
.day-card,
.founder-card,
.arch-tile,
.eco-col {
	background: #fff;
	color: #17223b;
	border: 1px solid #e5eaf2;
	border-radius: 18px;
	box-shadow: 0 12px 30px #253c760a;
	transition:
		border-color 0.2s,
		box-shadow 0.2s,
		transform 0.2s;
}
.service-card:hover,
.case-card:hover,
.case-tile:hover,
.price-card:hover,
.contact-card:hover,
.tech-card:hover,
.article-card:hover,
.related-card:hover {
	border-color: #a9bcfa;
	box-shadow: 0 12px 30px #253c7610;
	transform: translateY(-2px);
}
.service-card h3,
.case-title,
.case-tile h3,
.price-title,
.tech-card-name,
.contact-v,
.principle h3,
.team-tile h3,
.article-card h2,
.card-title,
.service-title,
.case-link {
	color: #17223b;
}
.service-desc,
.case-desc,
.price-desc,
.card-excerpt,
.contact-k,
.tech-group-desc {
	color: #596579;
}
.cta-pill,
.cta-btn,
.btn-primary,
.mobile-menu-cta {
	background: #315efb;
	color: #fff;
	border-radius: 12px;
	font-weight: 700;
	box-shadow: none;
}
.btn-ghost,
.case-pill,
.tech-pill,
.filter-pill,
.service-pill,
.eco-pill,
.case-tile-tag,
.price-pill {
	background: #eef2ff;
	color: #315efb;
	border: 1px solid #dfe6f8;
	border-radius: 12px;
}
.filter-pill.active,
.case-pill.accent,
.case-pill.blue,
.case-pill.purple {
	background: #315efb;
	color: #fff;
	border-color: #315efb;
}
.cta-section,
.tech-strip,
.case-meta,
.values-strip,
.clients-section,
.marquee {
	background: #f5f7fc;
}
.cta-box {
	background: #eef2ff;
	border: 1px solid #dfe6f8;
	border-radius: 24px;
	color: #17223b;
}
.cta-box h2,
.cta-box p {
	color: #17223b;
}
.cta-btn-light {
	background: #315efb;
	color: #fff;
	border-radius: 12px;
}
.footer {
	background: #f5f7fc;
	color: #596579;
	border-top: 1px solid #e5eaf2;
}
.footer a,
.footer h2,
.footer h3,
.footer-giant-logo {
	color: #17223b;
}
.case-hero::before {
	background: #315efb;
}
.case-hero-content {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.35fr);
}
.case-meta-v small {
	color: #596579;
}
.case-mockup,
.case-gallery-item {
	background: #f5f7fc;
	border: 1px solid #e5eaf2;
	box-shadow: 0 12px 30px #253c7610;
}
.article {
	color: #17223b;
}
.highlight-box,
.checklist {
	background: #f5f7fc;
	color: #17223b;
}
:focus-visible {
	outline: 3px solid #8ea9ff;
	outline-offset: 3px;
}
@media (max-width: 900px) {
	.case-hero-content {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 0;
	}
	.case-hero::before {
		width: 12px;
	}
	.vertical-logo {
		display: none;
	}
	.case-block-grid,
	.tech-strip-grid {
		grid-template-columns: minmax(0, 1fr);
	}
	.container {
		min-width: 0;
	}
}
@media (max-width: 600px) {
	h1,
	.hero h1,
	.case-hero h1 {
		font-size: clamp(30px, 9vw, 48px);
		overflow-wrap: anywhere;
	}
	.header-inner {
		gap: 12px;
	}
	.case-meta-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta-box {
		padding: 32px 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
/* Ensure legacy light-on-dark accents remain legible on the new light surfaces. */
.hero-tagline .underline,
.counter-num {
	color: #315efb;
	-webkit-text-fill-color: #315efb;
}
.logo-mark {
	-webkit-text-fill-color: #0a0c14;
	background: #eef2ff;
	background-clip: border-box;
}
/* Page-specific legacy typography and light-surface contrast. */
.hero h1,
.hero-tagline,
.service-title,
.case-hero h1,
.case-block h2,
.counter-card h2 {
	font-family: Manrope, Inter, sans-serif;
}
.hero h1 {
	font-size: clamp(38px, 6vw, 68px);
	line-height: 1.08;
	letter-spacing: -0.04em;
}
.counter-card {
	background: #fff;
	border: 1px solid #e5eaf2;
	border-radius: 18px;
	transform: none;
	box-shadow: 0 12px 30px #253c760a;
}
.counter-card h2 {
	background: none;
	background-clip: border-box;
	-webkit-text-fill-color: #315efb;
	color: #315efb;
}
.mobile-menu {
	border-radius: 18px;
	padding: 20px;
}
.mobile-menu-link {
	font-family: Manrope, Inter, sans-serif;
}
.mobile-menu-link:hover {
	color: #315efb;
	background: #eef2ff;
}
@media (max-width: 600px) {
	.hero h1 {
		font-size: clamp(32px, 9vw, 48px);
	}
}

/* Keep the case footer wordmark within narrow screens. */
@media (max-width: 480px) {
	.footer-giant-logo {
		font-size: clamp(40px, 20vw, 80px);
	}
}

/* Compact article headers use an inline wordmark rather than the site logo markup. */
body:has(.article) .header .logo,
body:has(.articles) .header .logo {
	display: inline-flex;
	align-items: center;
	gap: 0;
}
body:has(.article) .header .logo-mark,
body:has(.articles) .header .logo-mark {
	display: inline;
	background: transparent;
	color: #315efb;
	-webkit-text-fill-color: #315efb;
}

/* Article templates have their own header and no burger: keep navigation visible. */
@media (max-width: 768px) {
	body:has(.article) .header,
	body:has(.articles) .header {
		position: relative;
		padding: 16px 20px;
	}
	body:has(.article) .header-inner,
	body:has(.articles) .header-inner {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 14px;
	}
	body:has(.article) .nav,
	body:has(.articles) .nav {
		display: flex;
		flex-wrap: wrap;
		gap: 10px 18px;
		width: 100%;
	}
	body:has(.article) .article {
		padding-top: 48px;
	}
	body:has(.articles) .hero {
		padding-top: 64px;
	}
	body:has(.articles) .articles-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	}
	body:has(.article) .article-meta {
		flex-wrap: wrap;
	}
}