/* ==========================================================================
   Brand layer (loaded after main.css)
   Calm two-colour system: navy (--ink / --navy) + brand blue (--blue).
   Teal (--teal) is used only as a small accent (ticks, highlighted words).
   ========================================================================== */

/* Thin brand line on top of header and footer */
.site-header::before, .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); }
.site-footer { position: relative; }

/* Eyebrows as subtle pills */
.eyebrow { padding: 6px 12px; border-radius: 999px; background: var(--blue-50); }
.eyebrow-light { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #d6e0ff; }

/* Highlighted words in headings: one solid accent colour, no animation */
.grad-text { color: color-mix(in srgb, var(--teal) 70%, #fff); }
.section .grad-text, .section-soft .grad-text { color: var(--blue); }

/* Hero background: quiet navy with a soft blue glow (no moving colours) */
.hero-glow { background: radial-gradient(900px 520px at 15% -10%, color-mix(in srgb, var(--blue) 32%, transparent), transparent 65%), radial-gradient(700px 480px at 95% 20%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 60%); overflow: hidden; }
.blob { display: none; }

/* Clients strip + marquee */
.clients { background: #fff; }
.clients-track-wrap { display: flex; gap: 48px; min-width: 0; }
.clients-track-wrap.is-marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.clients-track-wrap.is-marquee .clients-list { flex: none; flex-wrap: nowrap; animation: marquee 32s linear infinite; padding-right: 48px; }
.clients-track-wrap.is-marquee:hover .clients-list { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.client-name { color: var(--ink); opacity: .55; transition: opacity .2s; }
.client-name:hover { opacity: 1; }
.client-logo { display: grid; place-items: center; height: 56px; padding: 0 6px; }
.client-logo img { max-height: 44px; max-width: 150px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .25s, opacity .25s; }
.client-logo img:hover { filter: none; opacity: 1; }

/* Pillars: both in the brand blue family */
.pillar::before { height: 4px; background: var(--blue); }
.pillar-project::before { background: var(--ink); }
.pillar-icon, .pillar-project .pillar-icon { background: var(--blue-50); color: var(--blue); box-shadow: none; }
.pillar-project .pillar-icon { background: color-mix(in srgb, var(--ink) 8%, #fff); color: var(--ink); }
.pillar-project .ticks .icon { background: var(--teal-50); color: var(--teal-700); }

/* Cards: single accent instead of a colour cycle */
.skill-icon, .service-icon { background: var(--blue); box-shadow: none; }
.feature .feature-icon, .value .feature-icon, .capability .feature-icon { background: var(--blue-50) !important; color: var(--blue) !important; }
.capability { background: var(--soft); border: 1px solid var(--line); }
.capability .feature-icon { background: #fff !important; }
.industry { border-left: 3px solid var(--blue); }
.industry .icon { color: color-mix(in srgb, var(--blue) 55%, #fff); }

/* Process steps: navy numbers, first one in brand blue */
.step::after { display: none; }
.step-num, .step:nth-child(2) .step-num, .step:nth-child(3) .step-num, .step:nth-child(4) .step-num { background: var(--ink); }
.step:first-child .step-num { background: var(--blue); }
.step { transition: transform .25s ease, box-shadow .25s ease; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Stats band: navy to blue */
.stats-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--navy-900) 0%, color-mix(in srgb, var(--blue) 75%, var(--navy)) 100%); }
.stats-band .container { position: relative; }
.stat dd { background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; }
.stat dt { color: rgba(255, 255, 255, .8); }

/* Job cards: one quiet accent line */
.job-card { overflow: hidden; }
.job-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); opacity: .85; }
.pill-c2h { background: var(--blue-50); color: var(--blue-600); }

/* Testimonials */
.testimonials-section { background: var(--soft); }
.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 380px)); justify-content: center; gap: 32px 24px; }
.testimonial { position: relative; margin: 0; padding: 36px 28px 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.quote-mark { position: absolute; top: -18px; left: 24px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--blue); color: #fff; font-family: Georgia, serif; font-size: 2.2rem; line-height: 1; padding-top: 12px; }
.testimonial blockquote { margin: 8px 0 24px; color: var(--ink); font-size: 1.02rem; line-height: 1.7; flex: 1; }
.testimonial blockquote p { margin: 0 0 .8em; }
.testimonial figcaption { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.t-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.t-initials { display: grid; place-items: center; background: var(--ink); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: .9rem; }
.t-who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.t-who strong { color: var(--ink); font-family: var(--font-head); }
.t-who small { color: var(--muted); font-size: .82rem; }
.t-kind { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--blue-50); color: var(--blue-600); }

/* CTA split: navy + light blue */
.cta-employer { background: var(--navy-900); }
.cta-employer::before { background: radial-gradient(500px 300px at 0% 0%, color-mix(in srgb, var(--blue) 40%, transparent), transparent 70%); }
.cta-candidate, .info-card-accent { background: var(--blue-50); border: 0; }
.cta-candidate .cta-icon, .info-card-accent .info-icon { color: var(--blue); }

/* Dark section (industries) */
.section-dark { background: var(--navy-900); }

.footer-logo { height: 84px; max-height: none; }
@media (max-width: 760px) { .footer-logo { height: 72px; } }
.social:hover { background: var(--blue); }

@media (max-width: 760px) {
	.testimonials { grid-template-columns: 1fr; gap: 36px; }
	.clients-track-wrap { gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
	.clients-track-wrap.is-marquee .clients-list { animation: none; }
}

/* Map remaining multi-colour tokens/selectors onto the two-colour system */
:root { --grad: var(--blue); --grad-cool: var(--ink); }
.a1, .a3 { background: var(--blue); }
.a2, .a4 { background: var(--ink); }
.hv-match span { background: var(--blue); }
.compare thead th:last-child { color: var(--blue); }
.compare td:last-child { background: color-mix(in srgb, var(--blue) 4%, #fff); }
.mini-steps li > span { background: var(--blue-50); color: var(--blue); }
.prose ul li::before { background: var(--blue); }