/* Cluster Solutions Inc - site styles. Colors taken from the logo (navy wordmark, teal and green mark). */
:root {
	--navy: #16244f;
	--navy-soft: #3a4670;
	--teal: #1f8fb5;
	--green: #2fb84a;
	--ink: #1b2240;
	--muted: #55607f;
	--bg: #ffffff;
	--tint: #f3f7fa;
	--line: #dde4ec;
	--radius: 12px;
	--shadow: 0 6px 24px rgba(22, 36, 79, 0.08);
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); }
h1, h2, h3 { color: var(--navy); line-height: 1.2; margin: 0 0 0.6em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -48px; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--navy); text-decoration: none; }
.brand-inc { font-weight: 500; color: var(--navy-soft); }
.brand-small { font-size: 0.95rem; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.97rem; }
.site-nav a:hover { color: var(--teal); }
.site-nav .nav-cta { background: var(--navy); color: #fff; padding: 9px 16px; border-radius: 999px; }
.site-nav .nav-cta:hover { background: var(--teal); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; color: var(--navy); padding: 8px; cursor: pointer; }

/* Buttons */
.btn { display: inline-block; padding: 13px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn-primary { background: linear-gradient(90deg, var(--teal), var(--green)); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-ghost { border: 2px solid var(--line); color: var(--navy); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-large { padding: 15px 30px; font-size: 1.05rem; }

/* Hero */
.hero { padding-block: clamp(48px, 8vw, 96px); background: linear-gradient(180deg, var(--tint), var(--bg)); }
.hero-inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; color: var(--teal); margin-bottom: 0.8em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-media img, .split-media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* Sections */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section-tint { background: var(--tint); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-copy p { color: var(--muted); max-width: 36em; }

/* Service cards */
.cards { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; transition: transform 0.2s, box-shadow 0.2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card p { color: var(--muted); font-size: 0.97rem; margin: 0; }
.card-icon { width: 40px; height: 40px; padding: 8px; margin-bottom: 16px; border-radius: 10px; background: rgba(31, 143, 181, 0.1); fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Expertise */
.stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; margin-top: 32px; }
.stack-group h3 { font-size: 1rem; margin-bottom: 0.8em; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; font-size: 0.92rem; color: var(--navy-soft); }
.section-tint .chips li { background: var(--bg); }
.chips-large li { font-size: 0.97rem; padding: 7px 15px; }

/* Contact */
.contact { background: var(--navy); color: #fff; text-align: center; }
.contact h2 { color: #fff; }
.contact p { color: #c9d2e8; }
.contact-inner { max-width: 640px; }
.contact .btn { margin-top: 12px; }
.contact-email { margin-top: 18px; font-size: 0.95rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding-block: 26px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.footer-inner p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Tablet */
@media (max-width: 960px) {
	.cards { grid-template-columns: repeat(2, 1fr); }
	.hero-inner, .split { grid-template-columns: 1fr; gap: 32px; }
	.split-reverse .split-media { order: -1; }
}

/* Phone */
@media (max-width: 720px) {
	body { font-size: 16px; }
	.nav-toggle { display: inline-flex; }
	.site-nav { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 20px 16px; }
	.site-nav.is-open { display: flex; }
	.site-nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); }
	.site-nav .nav-cta { margin-top: 12px; text-align: center; border-bottom: 0; }
	.cards { grid-template-columns: 1fr; }
	.hero-actions .btn { flex: 1 1 auto; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.card, .btn { transition: none; }
	.card:hover { transform: none; }
}

/* Contact: form + email box */
.contact { text-align: left; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start; }
.contact-intro p { color: #c9d2e8; }
.email-box { margin-top: 28px; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04); }
.email-label { margin: 0 0 4px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: #9fb0d6; }
.email-address { margin: 0 0 16px; font-size: 1.15rem; font-weight: 600; color: #fff !important; word-break: break-all; }
.email-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-light { background: #fff; color: var(--navy); border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.btn-light:hover { background: #e8eef7; }
.btn-outline-light { border: 2px solid rgba(255, 255, 255, 0.45); color: #fff; }
.btn-outline-light:hover { border-color: #fff; }
.copy-status { min-height: 1.4em; margin: 10px 0 0; font-size: 0.9rem; }
.contact-form { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 28px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--navy); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; font: inherit; color: var(--ink); padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(31, 143, 181, 0.18); }
.field textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { width: 100%; border: 0; cursor: pointer; font: inherit; font-weight: 600; margin-top: 4px; }
.contact-form .btn:disabled { opacity: 0.7; cursor: progress; }
.form-status { min-height: 1.4em; margin: 12px 0 0; font-size: 0.95rem; color: var(--muted) !important; }
.form-status.is-success { color: #1f7a35 !important; font-weight: 600; }
.form-status.is-error { color: #b42318 !important; font-weight: 600; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Section labels: darker teal for AA contrast on light backgrounds */
.eyebrow { color: #146f8f; }
.picture-fill, picture { display: block; }

/* Back to top */
.back-to-top { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: var(--shadow); text-decoration: none; transition: background 0.2s, transform 0.2s; }
.back-to-top:hover { background: var(--teal); transform: translateY(-2px); }

/* Print: just the content, no navigation or form controls */
@media print {
	.site-header, .back-to-top, .nav-toggle, .hero-actions, .contact-form, .email-actions, .skip-link { display: none !important; }
	body { font-size: 11pt; color: #000; }
	.section, .hero { padding-block: 16pt; background: none !important; }
	.contact { background: none !important; color: #000; }
	.contact h2, .contact p, .email-address { color: #000 !important; }
	.card, .chips li { border-color: #999; box-shadow: none; }
	.split, .hero-inner { grid-template-columns: 1fr 1fr; }
	img { max-height: 180pt; width: auto; }
	a[href^="mailto"]::after { content: ""; }
}

.back-to-top[hidden] { display: none; }

/* ---------- Motion & menu polish ---------- */
:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* Scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--green)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.1s linear; }

/* Header: compact + shadow when scrolled */
.site-header { transition: box-shadow 0.3s var(--ease), background 0.3s; }
.header-inner { transition: min-height 0.3s var(--ease); }
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(22, 36, 79, 0.08); }
.site-header.is-scrolled .header-inner { min-height: 58px; }
.brand img { transition: transform 0.6s var(--ease); }
.brand:hover img { transform: rotate(90deg); }

/* Menu links: animated underline + active section */
.site-nav a:not(.nav-cta) { position: relative; padding-block: 6px; transition: color 0.2s; }
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--green)); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.site-nav a:not(.nav-cta):hover::after, .site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--navy); font-weight: 600; }
.site-nav .nav-cta { transition: background 0.25s, transform 0.25s var(--ease), box-shadow 0.25s; }
.site-nav .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31, 143, 181, 0.35); }

/* Buttons */
.btn { transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(47, 184, 74, 0.28); }

/* Photo hover: slow zoom + soft brand glow, clipped to the rounded frame */
.photo-frame { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); isolation: isolate; }
.photo-frame img { border-radius: 0; box-shadow: none; transition: transform 0.9s var(--ease), filter 0.9s var(--ease); }
.photo-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(31, 143, 181, 0.28), rgba(47, 184, 74, 0.18)); opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; }
.photo-frame:hover img { transform: scale(1.06); filter: saturate(1.1); }
.photo-frame:hover::after { opacity: 1; }

/* Service cards: lift + icon fills with brand color */
.card { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s; }
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(22, 36, 79, 0.12); border-color: transparent; }
.card-icon { transition: background 0.35s, stroke 0.35s, transform 0.35s var(--ease); }
.card:hover .card-icon { background: linear-gradient(135deg, var(--teal), var(--green)); stroke: #fff; transform: scale(1.08); }
.chips li { transition: border-color 0.2s, color 0.2s, transform 0.2s var(--ease); }
.chips li:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }

/* Scroll reveal (only when JS has opted in, so content is never hidden without it) */
.reveal-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* Phone menu: slide down instead of popping */
@media (max-width: 720px) {
	.site-nav { display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s; box-shadow: 0 12px 24px rgba(22, 36, 79, 0.1); }
	.site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
	.site-header.is-scrolled .site-nav { top: 58px; }
	.site-nav a:not(.nav-cta)::after { display: none; }
	.site-nav a.is-active { color: var(--teal); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
	.photo-frame:hover img, .card:hover, .btn-primary:hover, .brand:hover img { transform: none; }
}

/* Services: 8 cards, featured AI card, intro line */
.section-lead { color: var(--muted); max-width: 46em; margin-top: -0.2em; }
.card { position: relative; display: flex; flex-direction: column; }
.card h3 { margin-bottom: 0.5em; }
.card-featured { border-color: transparent; background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(135deg, var(--teal), var(--green)) border-box; border: 1.5px solid transparent; }
.card-featured .card-icon { background: linear-gradient(135deg, var(--teal), var(--green)); stroke: #fff; }
.card-badge { position: absolute; top: 18px; right: 18px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, var(--teal), var(--green)); padding: 3px 9px; border-radius: 999px; }

.stack-group-wide { grid-column: 1 / -1; }
.card-featured h3 { padding-right: 44px; }

/* ---------- Card styling v2: soft edge shadows, accent line, glow on hover ---------- */
.cards { gap: 24px; }
.card {
	border: 1px solid rgba(22, 36, 79, 0.06);
	border-radius: 16px;
	padding: 28px 24px 26px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
	box-shadow:
		0 1px 2px rgba(22, 36, 79, 0.04),
		0 4px 10px rgba(22, 36, 79, 0.05),
		0 12px 28px rgba(22, 36, 79, 0.06);
	overflow: hidden;
}
/* thin brand accent line along the top edge */
.card::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
	background: linear-gradient(90deg, var(--teal), var(--green));
	transform: scaleX(0.18); transform-origin: left; opacity: 0.55;
	transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
/* soft corner glow, visible on hover */
.card::after {
	content: ""; position: absolute; width: 180px; height: 180px; right: -70px; bottom: -70px; border-radius: 50%;
	background: radial-gradient(circle, rgba(47, 184, 74, 0.16), rgba(31, 143, 181, 0.08) 45%, transparent 70%);
	opacity: 0; transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); transform: scale(0.8); pointer-events: none;
}
.card:hover {
	transform: translateY(-6px);
	border-color: rgba(31, 143, 181, 0.22);
	box-shadow:
		0 2px 4px rgba(22, 36, 79, 0.05),
		0 10px 24px rgba(22, 36, 79, 0.09),
		0 24px 48px rgba(31, 143, 181, 0.14);
}
.card:hover::before { transform: scaleX(1); opacity: 1; }
.card:hover::after { opacity: 1; transform: scale(1); }
.card > * { position: relative; z-index: 1; }

.card-icon {
	width: 48px; height: 48px; padding: 11px; border-radius: 14px; margin-bottom: 18px;
	background: linear-gradient(135deg, rgba(31, 143, 181, 0.12), rgba(47, 184, 74, 0.12));
	box-shadow: inset 0 0 0 1px rgba(31, 143, 181, 0.15);
}
.card:hover .card-icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 18px rgba(31, 143, 181, 0.28); }
.card h3 { font-size: 1.12rem; letter-spacing: -0.005em; }

/* featured AI card: gradient border + faint brand tint */
.card-featured {
	border: 1.5px solid transparent;
	background:
		linear-gradient(180deg, #f6fbfd 0%, #f3fbf5 100%) padding-box,
		linear-gradient(135deg, var(--teal), var(--green)) border-box;
	box-shadow: 0 4px 12px rgba(31, 143, 181, 0.08), 0 16px 36px rgba(47, 184, 74, 0.1);
}
.card-featured::before { display: none; }
.card-featured .card-icon { box-shadow: 0 6px 16px rgba(31, 143, 181, 0.3); }
.card-badge { z-index: 2; box-shadow: 0 4px 10px rgba(47, 184, 74, 0.3); }

@media (prefers-reduced-motion: reduce) {
	.card::before, .card::after { transition: none; }
}
.card > .card-badge { position: absolute; top: 18px; right: 18px; z-index: 2; }
.card::after { width: 220px; height: 220px; right: -110px; bottom: -110px; background: radial-gradient(circle, rgba(47, 184, 74, 0.10), rgba(31, 143, 181, 0.05) 50%, transparent 72%); }

/* ---------- Card styling v3: 3D depth + pointer tilt ---------- */
.cards { perspective: 1200px; }
.card {
	transform-style: preserve-3d;
	--rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%;
	transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
	transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.35s;
	/* raised look: light top edge + layered shadows underneath */
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 1px rgba(22, 36, 79, 0.05),
		0 3px 6px rgba(22, 36, 79, 0.06),
		0 10px 20px rgba(22, 36, 79, 0.07),
		0 22px 44px rgba(22, 36, 79, 0.08);
}
.card:hover {
	transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) translateZ(0);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 2px 3px rgba(22, 36, 79, 0.05),
		0 8px 16px rgba(22, 36, 79, 0.08),
		0 20px 40px rgba(22, 36, 79, 0.12),
		0 36px 70px rgba(31, 143, 181, 0.16);
}
.card.is-tilting { transition: transform 0.08s linear, box-shadow 0.45s var(--ease), border-color 0.35s; }
/* glare that follows the pointer */
.card .card-glare {
	position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; opacity: 0;
	background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
	transition: opacity 0.4s var(--ease);
}
.card:hover .card-glare { opacity: 1; }
/* icon and title float slightly above the card surface */
.card .card-icon { transform: translateZ(28px); }
.card h3 { transform: translateZ(18px); }
.card:hover .card-icon { transform: translateZ(40px) scale(1.06); }
.card-featured { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 6px rgba(31,143,181,0.08), 0 14px 30px rgba(31,143,181,0.12), 0 26px 52px rgba(47,184,74,0.12); }

@media (hover: none), (prefers-reduced-motion: reduce) {
	.card, .card:hover { transform: none; }
	.card .card-icon, .card h3, .card:hover .card-icon { transform: none; }
	.card .card-glare { display: none; }
}
/* after the scroll-reveal finishes, the card's own 3D transform takes over */
.reveal-ready .card.reveal.is-visible { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0); }
.reveal-ready .card.reveal.is-visible:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) translateZ(0); }
@media (hover: none), (prefers-reduced-motion: reduce) {
	.reveal-ready .card.reveal.is-visible, .reveal-ready .card.reveal.is-visible:hover { transform: none; }
}

/* ---------- Typography & color refresh ---------- */
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }

:root {
	--navy: #0f1a3c;          /* deeper, richer navy for headings + dark sections */
	--navy-soft: #3b4a78;
	--indigo: #2b2f7a;
	--teal: #0d86ad;
	--teal-bright: #19a9d1;
	--green: #22b45a;
	--ink: #1a2340;
	--muted: #556282;         /* blue-tinted gray for body copy */
	--tint: #f2f6fb;
	--line: #dfe6f0;
	--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--grad: linear-gradient(100deg, var(--teal) 0%, var(--teal-bright) 45%, var(--green) 100%);
}
body { font-family: var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--ink); }
h1, h2, h3, .brand, .btn, .site-nav a, .eyebrow, .card-badge { font-family: var(--font-display); }
h1 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-weight: 800; letter-spacing: -0.025em; }
h3 { font-weight: 700; letter-spacing: -0.01em; }
.lead { font-size: 1.18rem; line-height: 1.65; }
.eyebrow { font-weight: 700; letter-spacing: 0.16em; color: #0b6f91; }
.brand { font-weight: 800; letter-spacing: -0.01em; }
.site-nav a { font-weight: 600; }

/* gradient key phrase in the hero headline */
.text-gradient { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* hero: soft brand glow behind content */
.hero { position: relative; overflow: hidden; background:
	radial-gradient(800px 420px at 88% 8%, rgba(25, 169, 209, 0.16), transparent 60%),
	radial-gradient(700px 380px at 6% 92%, rgba(34, 180, 90, 0.12), transparent 60%),
	linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%); }

/* buttons: richer gradient + navy outline */
.btn-primary { background: var(--grad); background-size: 140% 100%; background-position: 0% 0; transition: background-position 0.5s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s; }
.btn-primary:hover { background-position: 100% 0; }
.btn-ghost { border-color: #cfd9e8; }
.site-nav .nav-cta { background: var(--navy); }
.site-nav .nav-cta:hover { background: var(--grad); }

/* tinted sections: faint cool gradient instead of flat gray */
.section-tint { background: linear-gradient(180deg, #f3f7fc 0%, #eef4fa 100%); }

/* contact: navy-to-indigo depth with a subtle brand glow */
.contact { background:
	radial-gradient(700px 360px at 85% 0%, rgba(25, 169, 209, 0.22), transparent 60%),
	radial-gradient(600px 320px at 0% 100%, rgba(34, 180, 90, 0.16), transparent 60%),
	linear-gradient(135deg, #0f1a3c 0%, #1c2563 60%, #2b2f7a 100%); }

/* chips and progress bar pick up the refined gradient */
.scroll-progress span { background: var(--grad); }
.card-badge { background: var(--grad); }
.chips li { color: var(--navy-soft); border-color: #dbe3ef; }

::selection { background: rgba(25, 169, 209, 0.22); }

/* ---------- Cards: consistent alignment ---------- */
.cards { align-items: stretch; }
.card { display: grid; grid-template-rows: auto auto 1fr; align-content: start; }
.card .card-icon { margin-bottom: 18px; }
.card h3 { margin: 0 0 10px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-featured h3 { padding-right: 0; }
.card p { margin: 0; line-height: 1.6; }

@media (max-width: 1180px) and (min-width: 721px) { .cards { grid-template-columns: repeat(2, 1fr); } }


/* ---------- Industries: modern icon tiles (icons: Lucide, ISC) ---------- */
.industry-grid { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.industry {
	--accent: var(--teal);
	position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	padding: 20px 18px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(15,26,60,0.06);
	box-shadow: 0 1px 2px rgba(15,26,60,0.05), 0 8px 20px rgba(15,26,60,0.06);
	transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}
.industry::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.industry::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.industry-icon {
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
	color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, #fff);
	transition: background 0.3s, color 0.3s, transform 0.35s var(--ease), box-shadow 0.3s;
}
.industry-icon svg { width: 23px; height: 23px; }
.industry-text { display: flex; flex-direction: column; gap: 3px; }
.industry-name { font: 600 1rem/1.3 var(--font-display); color: var(--navy); }
.industry-sector { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.industry:hover, .reveal-ready .industry.reveal.is-visible:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 4px 8px rgba(15,26,60,0.06), 0 18px 38px color-mix(in srgb, var(--accent) 22%, transparent); }
.industry:hover::before { transform: scaleX(1); }
.industry:hover::after { opacity: 1; }
.industry:hover .industry-icon { color: #fff; background: var(--accent); transform: rotate(-6deg) scale(1.06); box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
@media (max-width: 1100px) { .industry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .industry { padding: 16px 14px; } .industry-name { font-size: 0.95rem; } }
@media (max-width: 360px) { .industry-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .industry:hover, .industry:hover .industry-icon { transform: none; } }

/* ---------- Contact: elegant navy/teal redesign ---------- */
.contact { position: relative; overflow: hidden; background:
	radial-gradient(680px 380px at 88% 8%, rgba(25,169,209,0.26), transparent 62%),
	radial-gradient(560px 340px at 4% 96%, rgba(34,180,90,0.18), transparent 62%),
	linear-gradient(150deg, #0b1533 0%, #0f1a3c 45%, #0c2a4a 100%); }
.contact::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
	background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.2px); background-size: 22px 22px;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%); }
.contact .container { position: relative; }
.contact-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.eyebrow-light { color: var(--teal-bright); }
.contact h2 { font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.12; margin-bottom: 14px; }
.contact .text-gradient { background: linear-gradient(90deg, #3cc4ea, #4fd88a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-lead { font-size: 1.06rem; max-width: 30em; }
.contact-steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; position: relative; }
.contact-steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: linear-gradient(var(--teal-bright), var(--green)); opacity: 0.35; }
.contact-steps li { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.step-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 0.85rem var(--font-display); color: #fff; background: var(--grad); box-shadow: 0 0 0 4px rgba(15,26,60,0.9), 0 6px 14px rgba(13,134,173,0.35); }
.contact-steps strong { display: block; color: #fff; font-family: var(--font-display); font-weight: 600; margin-bottom: 2px; }
.contact-steps li > span:last-child { color: #b8c5e0; font-size: 0.95rem; line-height: 1.5; }
.email-box { display: flex; gap: 16px; align-items: flex-start; margin-top: 30px; padding: 20px; border-radius: 16px;
	background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.14);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.email-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(25,169,209,0.16); color: var(--teal-bright); }
.email-icon svg { width: 22px; height: 22px; }
.email-body { min-width: 0; }
.email-label { color: #8fa3cc; font-size: 0.78rem; }
.email-address { margin-bottom: 14px; }
.btn-small { padding: 9px 16px; font-size: 0.92rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-ico { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover .btn-ico { transform: translateX(2px); }
.btn-outline-light { border-width: 1px; border-color: rgba(255,255,255,0.35); }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); }

.contact-form { position: relative; padding: 32px 30px 28px; border-radius: 20px; overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 24px 60px rgba(4,10,30,0.45), 0 0 0 1px rgba(255,255,255,0.06); }
.contact-form::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad); }
.form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #e8eef6; }
.form-head-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--grad); box-shadow: 0 8px 18px rgba(13,134,173,0.3); }
.form-head-icon svg { width: 21px; height: 21px; }
.form-title { margin: 0; font: 700 1.15rem var(--font-display); color: var(--navy); }
.form-sub { margin: 2px 0 0; font-size: 0.88rem; color: var(--muted) !important; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field label { font-size: 0.86rem; letter-spacing: 0.01em; }
.field input, .field textarea { background: #f5f8fc; border-color: #e1e8f2; border-radius: 10px; padding: 12px 14px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.field input:hover, .field textarea:hover { border-color: #c9d6e6; }
.field input:focus, .field textarea:focus { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(13,134,173,0.14); }
.field textarea::placeholder { color: #9aa7bf; }
.contact-form .btn { margin-top: 6px; padding: 15px 24px; }
.contact-form .btn:hover .btn-ico { transform: translateX(4px); }
@media (max-width: 860px) { .contact-grid { gap: 36px; } }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } .contact-form { padding: 26px 20px 22px; } .email-box { flex-direction: column; } }
.contact-form .form-title { color: var(--navy); }
.contact-form .form-sub { color: var(--muted); }
.contact-form .field label { color: var(--navy); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.email-box { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; }
.email-box .email-address { margin-bottom: 0; }
.email-box .email-actions, .email-box .copy-status { grid-column: 1 / -1; }
.email-box .copy-status { margin: 0; min-height: 0; }
.email-box .copy-status:empty { display: none; }
@media (max-width: 520px) { .email-box { flex-direction: unset; } }

/* ---------- Hero: circular "Start a conversation" badge ---------- */
.hero-actions { align-items: center; gap: 22px; }
.talk-badge { position: relative; flex: none; display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; text-decoration: none; color: var(--navy); }
.talk-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: talk-spin 18s linear infinite; }
.talk-ring text { font: 700 10.5px var(--font-display); letter-spacing: 0.12em; fill: var(--navy); }
.talk-core { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; background: var(--grad);
	box-shadow: 0 10px 24px rgba(13,134,173,0.35), inset 0 1px 0 rgba(255,255,255,0.35); transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.talk-core::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(25,169,209,0.35); animation: talk-pulse 2.6s var(--ease) infinite; }
.talk-core svg { width: 28px; height: 28px; }
.talk-badge:hover .talk-core, .talk-badge:focus-visible .talk-core { transform: scale(1.08) rotate(-8deg); box-shadow: 0 14px 30px rgba(13,134,173,0.45); }
.talk-badge:hover .talk-ring { animation-duration: 7s; }
.talk-badge:hover .talk-ring text { fill: var(--teal); }
.talk-badge:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 4px; }
@keyframes talk-spin { to { transform: rotate(360deg); } }
@keyframes talk-pulse { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.25); opacity: 0; } }
@media (max-width: 720px) { .hero-actions .talk-badge { flex: none; } }
@media (prefers-reduced-motion: reduce) { .talk-ring, .talk-core::after { animation: none; } }

/* ---------- Hero: "See what we do" icon link ---------- */
.see-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--navy); padding: 6px 4px; }
.see-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--teal);
	background: linear-gradient(145deg, #ffffff, #e9f4f9); border: 1px solid rgba(13,134,173,0.18);
	box-shadow: 0 8px 18px rgba(15,26,60,0.08), inset 0 1px 0 #fff; transition: transform 0.35s var(--ease), background 0.3s, color 0.3s, box-shadow 0.3s; }
.see-icon svg { width: 24px; height: 24px; }
.see-text { display: flex; flex-direction: column; line-height: 1.25; }
.see-label { position: relative; font: 700 1.02rem var(--font-display); width: fit-content; }
.see-label::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.see-sub { font-size: 0.85rem; color: var(--muted); margin-top: 3px; }
.see-arrow { width: 18px; height: 18px; color: var(--teal); transition: transform 0.3s var(--ease); }
.see-link:hover .see-icon, .see-link:focus-visible .see-icon { color: #fff; background: var(--grad); border-color: transparent; transform: rotate(-6deg); box-shadow: 0 12px 24px rgba(13,134,173,0.3); }
.see-link:hover .see-label::after, .see-link:focus-visible .see-label::after { transform: scaleX(1); }
.see-link:hover .see-arrow { transform: translate(3px, 3px); }
.see-link:focus-visible { outline: 3px solid var(--teal-bright); outline-offset: 4px; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .see-link:hover .see-icon, .see-link:hover .see-arrow { transform: none; } }

/* ---------- Hero: extended description + highlights ---------- */
.lead-more { margin: 14px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.65; max-width: 34em; }
.hero-highlights { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.hero-highlights li { display: flex; align-items: flex-start; gap: 11px; color: var(--navy-soft); font-size: 0.97rem; line-height: 1.5; }
.hero-highlights strong { color: var(--navy); font-weight: 600; }
.hl-check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: 0 4px 10px rgba(13,134,173,0.25); }
.hl-check svg { width: 13px; height: 13px; }
.hero-actions { margin-top: 26px; }

/* ---------- Technologies we work with: logo marquee ---------- */
.tech { padding-bottom: 72px; }
.tech-head { text-align: center; }
.tech-head .section-lead { margin-left: auto; margin-right: auto; }
.tech-marquee { position: relative; margin-top: 36px; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.tech-track { display: flex; width: max-content; animation: tech-scroll 48s linear infinite; }
.tech-marquee:hover .tech-track, .tech-marquee:focus-within .tech-track { animation-play-state: paused; }
.tech-list { list-style: none; margin: 0; padding: 6px 0; display: flex; gap: 14px; padding-right: 14px; }
.tech-list li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 20px; border-radius: 14px;
	background: #fff; border: 1px solid rgba(15,26,60,0.07); box-shadow: 0 1px 2px rgba(15,26,60,0.04), 0 6px 16px rgba(15,26,60,0.05);
	font: 600 0.95rem var(--font-display); color: var(--navy-soft); transition: transform 0.3s var(--ease), box-shadow 0.3s, color 0.3s, border-color 0.3s; }
.tech-list svg { width: 24px; height: 24px; flex: none; color: #8a96ae; filter: grayscale(1); opacity: 0.85; transition: color 0.3s, filter 0.3s, opacity 0.3s, transform 0.3s var(--ease); }
.tech-list li:hover { transform: translateY(-3px); color: var(--navy); border-color: color-mix(in srgb, var(--brand) 35%, transparent); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 18%, transparent); }
.tech-list li:hover svg { color: var(--brand); filter: none; opacity: 1; transform: scale(1.12); }
@keyframes tech-scroll { to { transform: translateX(-50%); } }
@media (max-width: 720px) { .tech-list li { padding: 10px 16px; font-size: 0.9rem; } .tech-list svg { width: 21px; height: 21px; } .tech-track { animation-duration: 36s; } }
@media (prefers-reduced-motion: reduce) {
	.tech-marquee { -webkit-mask-image: none; mask-image: none; }
	.tech-track { animation: none; width: auto; }
	.tech-list { flex-wrap: wrap; justify-content: center; padding: 0 16px; }
	.tech-list[aria-hidden="true"] { display: none; }
}

/* ---------- Mobile polish (phones) ---------- */
@media (max-width: 720px) {
	/* hero: tighter text, badge + link side by side */
	.hero .lead { font-size: 1.05rem; line-height: 1.6; }
	.lead-more { font-size: 0.95rem; margin-top: 12px; }
	.hero-highlights { gap: 8px; margin-top: 16px; }
	.hero-highlights li { font-size: 0.93rem; }
	.hero-actions { flex-wrap: nowrap; gap: 12px; margin-top: 22px; }
	.talk-badge { width: 100px; height: 100px; }
	.talk-core { width: 52px; height: 52px; }
	.talk-core svg { width: 23px; height: 23px; }
	.see-link { gap: 11px; min-width: 0; }
	.see-icon { width: 44px; height: 44px; border-radius: 13px; }
	.see-icon svg { width: 21px; height: 21px; }
	.see-label { font-size: 0.98rem; }
	.see-sub { font-size: 0.8rem; }

	/* services: compact cards, icon beside title */
	.cards { gap: 14px; }
	.card { grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 10px; align-items: center; padding: 20px 20px 22px; }
	.card .card-icon { grid-column: 1; grid-row: 1; margin: 0; width: 44px; height: 44px; }
	.card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.08rem; padding-right: 48px; }
	.card p { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 0.94rem; }
	.card > .card-badge { top: 22px; right: 18px; }

	/* industries: clean one-column rows */
	.industry-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
	.industry { flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; }
	.industry-icon { width: 40px; height: 40px; border-radius: 12px; flex: none; }
	.industry-icon svg { width: 20px; height: 20px; }
	.industry-text { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
	.industry-name { font-size: 0.97rem; }
	.industry-sector { font-size: 0.68rem; }

	/* contact email box */
	.email-address { font-size: 1.02rem; word-break: normal; overflow-wrap: anywhere; }
	.email-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.email-actions .btn { padding: 10px 6px; font-size: 0.86rem; white-space: nowrap; }
	.email-actions .btn-ico, .hide-sm { display: none; }
	.contact h2 { font-size: 2rem; }
}
@media (max-width: 380px) {
	.talk-badge { width: 92px; height: 92px; }
	.see-sub { display: none; }
	.industry-sector { display: none; }
}
@media (max-width: 720px) {
	.industry-text { flex-direction: column; align-items: flex-start; gap: 2px; }
	#about .split-media { display: none; }
}

/* Mail app fallback: nudge the alternatives when no mail program opened */
.email-box .copy-status strong { color: #fff; }
.btn-nudge { animation: btn-nudge 1.6s var(--ease) 1; }
@keyframes btn-nudge {
	0%, 100% { box-shadow: 0 0 0 0 rgba(25,169,209,0); }
	20%, 60% { box-shadow: 0 0 0 4px rgba(25,169,209,0.55); transform: translateY(-2px); }
	40%, 80% { box-shadow: 0 0 0 2px rgba(25,169,209,0.25); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .btn-nudge { animation: none; outline: 2px solid var(--teal-bright); outline-offset: 2px; } }