s, so every enhancement here is structure-agnostic and degrades gracefully: the decision callout only fires when a
LEADS with (e.g. the
"X vs Y — when to hire which?" line); pages without it are untouched. */
.hire-fit-card.cluster-intro {
font-family: 'Plus Jakarta Sans', sans-serif;
position: relative; overflow: hidden;
background: linear-gradient(135deg, #ffffff 0%, #f4f8ff 100%);
border: 1px solid #e3ecfb; border-radius: 22px;
padding: 44px 48px; box-shadow: 0 18px 48px rgba(16,76,186,.08);
}
/* keep all real content above the decorative motif */
.hire-fit-card.cluster-intro > * { position: relative; z-index: 1; }
/* left accent bar */
.hire-fit-card.cluster-intro::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
background: linear-gradient(180deg, #104cba 0%, #3b82f6 100%);
}
/* branded lifecycle / model-shipping motif — decorative, generic across roles */
.hire-fit-card.cluster-intro::after {
content: ""; position: absolute; right: -46px; top: 50%; transform: translateY(-50%);
width: 340px; height: 340px; z-index: 0; pointer-events: none; opacity: .85;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none'%3E%3Ccircle cx='160' cy='160' r='120' stroke='%23e3ecfb' stroke-width='2'/%3E%3Ccircle cx='160' cy='160' r='84' stroke='%23eef4ff' stroke-width='2' stroke-dasharray='4 7'/%3E%3Cpath d='M160 40 A120 120 0 0 1 280 160' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M160 280 A120 120 0 0 1 40 160' stroke='%23104cba' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M160 72v40M248 160h-40M160 248v-40M72 160h40' stroke='%23c9dcf8' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='128' y='128' width='64' height='64' rx='15' fill='%23f4f8ff' stroke='%23104cba' stroke-width='2.5'/%3E%3Cpath d='M146 160h28M160 146v28' stroke='%233b82f6' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='160' cy='160' r='5' fill='%23104cba'/%3E%3Ccircle cx='160' cy='40' r='9' fill='%23104cba'/%3E%3Ccircle cx='280' cy='160' r='9' fill='%233b82f6'/%3E%3Ccircle cx='160' cy='280' r='9' fill='%23104cba'/%3E%3Ccircle cx='40' cy='160' r='9' fill='%233b82f6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hire-fit-card.cluster-intro .hire-fit-eyebrow {
display: inline-block; background: #eef6ff; color: #104cba; font-weight: 700;
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
padding: 6px 14px; border-radius: 999px; margin-bottom: 16px;
}
.hire-fit-card.cluster-intro h2 {
font-size: clamp(26px, 3.4vw, 38px); line-height: 1.12; color: #0f172a;
margin: 0 0 20px; font-weight: 700; letter-spacing: -.01em; max-width: 22ch;
}
/* scannable accent rule between headline and body */
.hire-fit-card.cluster-intro h2::after {
content: ""; display: block; width: 56px; height: 4px; border-radius: 3px; margin-top: 18px;
background: linear-gradient(90deg, #104cba 0%, #3b82f6 100%);
}
.hire-fit-card.cluster-intro p { font-size: 16.5px; line-height: 1.75; color: #44546a; max-width: 62ch; }
.hire-fit-card.cluster-intro p + p { margin-top: 16px; }
/* lead/definition paragraph gets a touch more presence */
.hire-fit-card.cluster-intro p:first-of-type { font-size: 17.5px; color: #334155; }
.hire-fit-card.cluster-intro a { color: #104cba; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(16,76,186,.3); }
.hire-fit-card.cluster-intro a:hover { border-bottom-color: #104cba; }
.hire-fit-card.cluster-intro a:focus-visible { outline: 3px solid rgba(16,76,186,.4); outline-offset: 3px; border-radius: 3px; }
/* Decision callout — graceful: only a that LEADS with (the
"X vs Y — when to hire which?" pattern) becomes a bordered blue-accent box.
Pages whose intro has no lead-strong paragraph are unaffected. */
.hire-fit-card.cluster-intro p:has(> strong:first-child) {
margin-top: 24px; max-width: 68ch;
background: #f4f8ff; border: 1px solid #dbe7fb; border-left: 4px solid #104cba;
border-radius: 14px; padding: 20px 24px; font-size: 16px; color: #334155;
}
.hire-fit-card.cluster-intro p:has(> strong:first-child) > strong:first-child {
display: block; color: #104cba; font-size: 15px; letter-spacing: -.01em; margin-bottom: 8px;
}
/* Tasteful entrance — respects reduced-motion */
@media (prefers-reduced-motion: no-preference) {
.hire-fit-card.cluster-intro { animation: clusterIntroIn .6s ease both; }
@keyframes clusterIntroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
/* Desktop: reserve right gutter so text never runs under the motif */
@media (min-width: 981px) {
.hire-fit-card.cluster-intro { padding-right: 320px; }
}
/* Tablet/mobile: drop the motif, reclaim width */
@media (max-width: 980px) {
.hire-fit-card.cluster-intro::after { display: none; }
}
@media (max-width: 600px) {
.hire-fit-card.cluster-intro { padding: 30px 24px; border-radius: 18px; }
.hire-fit-card.cluster-intro h2 { max-width: none; }
.hire-fit-card.cluster-intro p, .hire-fit-card.cluster-intro p:first-of-type { max-width: none; }
}
/* ===== Dark "AI Talent Cluster" section (above projects) ===== */
.cluster-talent {
font-family: 'Plus Jakarta Sans', sans-serif;
background: radial-gradient(120% 140% at 80% 0%, #143a7a 0%, #0b1b39 45%, #07142b 100%);
padding: 72px 0; margin: 0; position: relative; overflow: hidden;
}
.cluster-talent::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(60% 60% at 15% 90%, rgba(59,130,246,.16) 0%, transparent 60%); pointer-events: none;
}
.cluster-talent .ct-head { max-width: 720px; margin: 0 auto 36px; text-align: center; position: relative; }
.cluster-talent .ct-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3b82f6; margin-bottom: 12px; }
.cluster-talent .ct-head h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.12; color: #fff; margin: 0 0 14px; font-weight: 700; }
.cluster-talent .ct-head p { font-size: 16px; line-height: 1.65; color: #b9c7e0; margin: 0; }
.cluster-talent .ct-grid {
position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 36px;
}
.cluster-talent .ct-card {
display: flex; flex-direction: column; gap: 4px; text-decoration: none; position: relative;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px;
padding: 20px 22px; transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}
.cluster-talent .ct-card:hover {
transform: translateY(-3px); background: rgba(255,255,255,.07);
border-color: rgba(59,130,246,.5); box-shadow: 0 14px 32px rgba(3,12,28,.55);
}
.cluster-talent .ct-card-title { font-size: 16px; font-weight: 700; color: #fff; padding-right: 38px; overflow-wrap: anywhere; }
.cluster-talent .ct-card-desc { font-size: 13px; color: #9fb1cf; }
.cluster-talent .ct-card-go { position: absolute; top: 20px; right: 18px; color: #3b82f6; opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; }
.cluster-talent .ct-card:hover .ct-card-go { opacity: 1; transform: translateX(0); }
.cluster-talent .ct-cta { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cluster-talent .ct-cta-btn {
display: inline-flex; align-items: center; gap: 8px; background: #104cba; color: #fff;
font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 12px; text-decoration: none;
transition: transform .18s, box-shadow .18s, background .18s;
}
.cluster-talent .ct-cta-btn:hover { background: #0a2d6e; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16,76,186,.35); }
.cluster-talent .ct-cta-note { font-size: 13px; color: #8ea2c2; }
@media (max-width: 600px) { .cluster-talent { padding: 48px 0; } }
/* ============================================================
Problem-first VARIANTS (A / B / C) — pick after review.
============================================================ */
/* ----- Variant A: framed split, image FULLY shown (no crop) ----- */
.problem-tabs.pf-a .pt-illus { padding: 28px; align-items: center; }
.problem-tabs.pf-a .pt-illus img {
width: 100%; height: auto; max-width: 230px; max-height: 230px; min-height: 0;
object-fit: contain; border-radius: 18px;
background: #ffffff; padding: 14px; box-shadow: 0 10px 26px rgba(16,76,186,.12);
}
@media (max-width: 900px) {
.problem-tabs.pf-a .pt-illus { padding: 24px; }
.problem-tabs.pf-a .pt-illus img { max-width: 180px; max-height: 180px; }
}
/* ----- Variant B: media-top, centered ----- */
.problem-tabs.pf-b .pt-panel.is-active { display: block; }
.problem-tabs.pf-b .pt-content { padding: 0 40px 40px; text-align: center; }
.problem-tabs.pf-b .pb-media {
display: flex; justify-content: center; padding: 36px 0 8px;
}
.problem-tabs.pf-b .pb-media img {
width: 132px; height: 132px; object-fit: contain; border-radius: 50%;
background: radial-gradient(120% 120% at 30% 20%, #eaf2ff 0%, #dbeafe 100%);
padding: 22px; box-shadow: 0 12px 30px rgba(16,76,186,.16);
}
.problem-tabs.pf-b .pt-problem { max-width: 640px; margin: 0 auto; }
.problem-tabs.pf-b .pt-tag { margin-top: 4px; }
.problem-tabs.pf-b .pt-cols { max-width: 760px; margin: 8px auto 0; text-align: left; }
.problem-tabs.pf-b .pt-cta { margin-left: auto; margin-right: auto; }
@media (max-width: 600px) { .problem-tabs.pf-b .pt-content { padding: 0 20px 28px; } }
/* ----- Variant C: scenario card grid (no tabs) ----- */
.problem-tabs.pf-c .pt-panels,
.problem-tabs.pf-c .pt-tablist { display: none; } /* safety if present */
.pf-c-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px;
}
.pf-c-card {
display: flex; flex-direction: column; background: #ffffff;
border: 1px solid #e8eef6; border-radius: 20px; overflow: hidden;
box-shadow: 0 10px 30px rgba(15,23,42,.06); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.pf-c-card:hover { transform: translateY(-4px); border-color: #bcd4f7; box-shadow: 0 18px 44px rgba(16,76,186,.14); }
.pf-c-media {
background: radial-gradient(120% 120% at 30% 15%, #eaf2ff 0%, #dbeafe 100%);
display: flex; align-items: center; justify-content: center; padding: 26px;
}
.pf-c-media img { width: 150px; height: 150px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 10px 20px rgba(16,76,186,.18)); }
.pf-c-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pf-c-body h3 { font-size: 18px; color: #0f172a; margin: 0 0 8px; font-weight: 700; }
.pf-c-prob { font-size: 14.5px; line-height: 1.55; color: #51607a; margin: 0 0 16px; }
.pf-c-solve { background: #eff6ff; border: 1px solid #dbeafe; border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; }
.pf-c-solve-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #104cba; margin-bottom: 8px; }
.pf-c-solve ul { list-style: none; margin: 0; padding: 0; }
.pf-c-solve li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.45; color: #334155; margin-bottom: 7px; }
.pf-c-solve li:last-child { margin-bottom: 0; }
.pf-c-solve li::before {
content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; background-size: contain; background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-8' fill='none' stroke='%23104cba' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pf-c-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: #104cba; font-weight: 600; font-size: 14.5px; text-decoration: none; }
.pf-c-link span { transition: transform .18s; }
.pf-c-link:hover span { transform: translateX(4px); }
/* AEO answer-first lead — quotable answer that leads the "Why teams hire us" section (Marcus, AEO).
Shares the problem-tabs top bg (#f8fafc) so it merges into that section instead of floating in a white gap. */
/* Closing "bottom line" summary — renders AFTER the problem-tabs scenario cards
as the deliberate closer of the "Why teams hire us" section. A contained card
(soft blue tint, rounded, blue top accent + eyebrow) floats on a white band so
it separates cleanly from the cards above and whatever section follows below —
no double-band. Brand blue only, no cyan. */
.hire-answer-wrap { background: #ffffff; padding: 56px 0 64px; }
.hire-answer-lead {
position: relative;
max-width: 760px;
margin: 0 auto;
text-align: center;
font-size: 18px;
line-height: 1.66;
color: #334155;
font-weight: 400;
background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
border: 1px solid #e3ecfb;
border-top: 3px solid #104cba;
border-radius: 16px;
padding: 34px 46px 38px;
box-shadow: 0 12px 30px -18px rgba(16, 76, 186, .28);
}
/* Eyebrow label doubles as the blue accent — signals this is the closing summary */
.hire-answer-lead::before {
content: "The bottom line";
display: block;
font-size: 12px;
letter-spacing: 1.6px;
text-transform: uppercase;
font-weight: 700;
color: #104cba;
margin-bottom: 14px;
}
/* Variant without the "bottom line" label (notes, link lists) */
.hire-answer-lead--plain::before { content: none; }
.hire-answer-lead strong { color: #0f172a; font-weight: 700; }
.hire-answer-lead a { color: #104cba; font-weight: 600; text-decoration: none; }
.hire-answer-lead a:hover { text-decoration: underline; }
/* "Keep reading" related-links card (voice-ai vertical pages): label + one pill per link */
.vai-keep {
max-width: 900px;
margin: 0 auto;
text-align: center;
background: linear-gradient(180deg, #f5f8ff 0%, #ffffff 100%);
border: 1px solid #e3ecfb;
border-top: 3px solid #104cba;
border-radius: 16px;
padding: 30px 32px 34px;
box-shadow: 0 12px 30px -18px rgba(16, 76, 186, .28);
}
.vai-keep__label {
margin: 0 0 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
color: #104cba;
}
.vai-keep__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.vai-keep__list a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border: 1px solid #dbe5f7;
border-radius: 999px;
background: #ffffff;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: #104cba;
text-decoration: none;
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.vai-keep__list a:hover, .vai-keep__list a:focus-visible { background: #104cba; border-color: #104cba; color: #ffffff; transform: translateY(-1px); }
@media (max-width: 640px) {
.vai-keep { padding: 24px 18px 26px; border-radius: 14px; }
.vai-keep__list a { font-size: 14px; padding: 9px 14px; }
}
@media (max-width: 640px) {
.hire-answer-wrap { padding: 40px 0 48px; }
.hire-answer-lead { font-size: 16.5px; padding: 28px 22px 30px; border-radius: 14px; }
}