/* ====== Base & Tokens ====== */
:root {
--bg: #fff;
--ink: #1b1e27;
--ink-2: #4b4744;
--muted: #6e6e6e;
--line: rgba(24, 30, 21, 0.2);
--primary-900: #042f6b;
--primary-500: #006aff;
/* tighter page for alignment with comp */
--container: 1160px;
--card: #e8e7e1;
--chip: #266eff;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
}
img {
max-width: 100%;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
p {
margin: 0 0 12px;
}
h1,
h2,
h3 {
margin: 0 0 12px;
}
/* typography (unchanged scale) */
.title {
font-family:
"Montserrat",
system-ui,
-apple-system,
Segoe UI,
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
"Liberation Sans",
sans-serif;
font-weight: 600;
}
.title--tight {
font-size: 30px;
line-height: 1.2;
text-transform: uppercase;
}
.h2 {
font:
700 56px/1.1 "Inter",
system-ui,
sans-serif;
margin-bottom: 20px;
}
.h2.up {
text-transform: uppercase;
}
.lead {
font:
400 16px/1.5 "Inter",
sans-serif;
color: var(--ink-2);
}
.eyebrow {
font:
600 16px/1 "Inter",
sans-serif;
color: var(--ink-2);
margin-bottom: 16px;
}
.focus {
font:
500 44px/1.05 "Inter",
sans-serif;
color: var(--muted);
opacity: 0.9;
}
.focus-strong {
font:
700 34px/1.1 "Inter",
sans-serif;
letter-spacing: 0.25px;
}
.muted {
color: var(--ink-2);
font:
400 18px/1.6 "Inter",
sans-serif;
}
/* layout */
.container {
width: min(var(--container), calc(100% - 40px));
margin-inline: auto;
}
.block {
padding: 72px 0;
}
.divider {
border: 0;
height: 1px;
background: var(--line);
margin: 16px 0 32px;
}
/* buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
justify-content: center;
font:
600 14px/1 "Open Sans",
system-ui,
sans-serif;
padding: 10px 20px;
border-radius: 999px;
}
.btn--pill {
border-radius: 999px;
}
.btn--outline-gradient {
background: #fff;
color: #0f0f0f;
border: 1px solid #1f61e6;
box-shadow: 0 0 0 0.5px rgba(4, 47, 107, 0.15) inset;
}
.btn--outline-gradient:hover {
background:
linear-gradient(0deg, rgba(31, 97, 230, 0.04), rgba(31, 97, 230, 0.04)),
#fff;
}
.btn--dark {
background: #1c1c1c;
color: #f5f5f5;
padding: 12px 16px;
border-radius: 12px;
}
.btn .icon {
display: inline-block;
}
/* header */
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: #fff;
}
.header__bar {
display: flex;
align-items: center;
gap: 24px;
padding: 18px 0;
}
.brand__logo {
width: 90px;
height: 90px;
}
.nav {
margin-left: auto;
display: flex;
gap: 40px;
align-items: center;
}
.nav__link {
font:
400 16px/24px "Inter",
sans-serif;
color: #11111a;
}
/* hero */
.hero .container {
position: relative;
}
.hero__head {
display: flex;
align-items: center;
gap: 100px;
padding: 20px 0 16px;
margin-left: 80px;
}
.hero__media {
margin-top: 16px;
border-radius: 8px;
overflow: hidden;
}
/* split */
.split__grid {
display: grid;
grid-template-columns: 120px 1fr;
gap: 400px;
align-items: start;
}
.contact-card {
margin-top: 24px;
background: var(--card);
border-radius: 6px;
padding: 16px;
display: grid;
grid-template-columns: 114px 1fr;
gap: 16px;
}
.contact-card__body {
margin-left: 20px;
margin-right: 120px;
margin-top: 16px;
}
.contact-card__img {
width: 114px;
height: 142px;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.contact-card__title {
font:
600 16px/1 "Inter",
sans-serif;
color: var(--ink-1);
margin-bottom: 15px;
}
.contact-card__email {
color: #2b3625;
font:
500 16px/1.2 "Inter",
sans-serif;
}
/* services (consistent cards & overlay) */
.services .cards-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.svc-card {
position: relative;
overflow: hidden;
border-radius: 6px;
color: #fff;
}
.svc-card__img {
width: 100%;
height: 415px;
object-fit: cover;
}
.svc-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(31, 39, 27, 0) 42%, #1f271b 100%);
}
.svc-card__tag {
position: absolute;
top: 12px;
left: 12px;
background: rgba(232, 231, 225, 0.6);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
color: #1b1e27;
border: 1px solid rgba(31, 39, 27, 0.05);
padding: 6px 10px;
border-radius: 6px;
font:
400 16px/1 "Inter",
sans-serif;
z-index: 1;
}
.svc-card__title {
position: absolute;
left: 16px;
bottom: 24px;
font:
500 26px/1.3 "Inter",
sans-serif;
z-index: 1;
}
/* vision & mission */
.vision__top {
display: flex;
align-items: flex-end;
gap: 40px;
margin-bottom: 24px;
}
.vision__mini {
color: var(--muted);
}
.vision__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
align-items: stretch;
}
.kpi {
border: 1px solid #d9d9d9;
border-radius: 20px;
padding: 24px;
position: relative;
background: #fff;
}
.kpi--row {
display: flex;
flex-direction: column;
gap: 16px;
}
.avatars {
display: flex;
align-items: center;
gap: 10px;
}
.avatars img {
width: 38px;
height: 38px;
border-radius: 50%;
box-shadow: 0 50px 30px -2.5px rgba(0, 0, 0, 0.1);
}
.avatars img:nth-child(2) {
width: 32px;
height: 32px;
}
.avatars img:nth-child(3) {
width: 26px;
height: 26px;
}
.avatars img:nth-child(4) {
width: 17px;
height: 17px;
}
.kpi__meta {
font:
700 10px/1 "Inter",
sans-serif;
text-transform: uppercase;
color: #6e6e6e;
margin-left: auto;
}
.kpi__text {
color: #1c1c1c;
font:
400 14px/1.7 "Inter",
sans-serif;
}
.kpi__title {
color: rgba(28, 28, 28, 0.9);
font:
400 20px/1.2 "Inter",
sans-serif;
}
.kpi__stat {
margin-top: 8px;
display: flex;
align-items: flex-end;
gap: 8px;
}
.kpi__stat .num {
font:
500 66px/1 "Inter",
sans-serif;
color: var(--primary-900);
}
.kpi__stat .plus {
font:
600 54px/1 "Inter",
sans-serif;
color: #9c9c9c;
opacity: 0.6;
}
.kpi__stat .label {
display: block;
font:
600 16px/24px "Inter",
sans-serif;
color: #6e6e6e;
}
.badge {
position: absolute;
right: 24px;
bottom: 24px;
border: 1px solid #d9d9d9;
padding: 12px 16px;
border-radius: 16px;
font:
700 10px/1 "Inter",
sans-serif;
text-transform: uppercase;
color: #6e6e6e;
display: flex;
gap: 10px;
align-items: center;
}
.badge .dot {
width: 9px;
height: 9px;
border-radius: 6px;
background: #33d478;
box-shadow: 0 0 0 8px rgba(51, 212, 120, 0.24) inset;
}
.badge--online {
background: #fff;
}
/* mission panel */
.mission {
background: linear-gradient(32deg, #042f6b 0%, #1f71e4 100%);
color: #fff;
border-radius: 20px;
padding: 28px;
position: relative;
overflow: hidden;
}
.rating {
display: flex;
align-items: center;
gap: 16px;
margin-top: 24px;
}
.rating__big {
font:
500 66px/1 "Inter",
sans-serif;
color: #f5f5f5;
}
.rating__out {
opacity: 0.7;
font:
600 34px/1 "Inter",
sans-serif;
}
.stars {
letter-spacing: 2px;
}
.rating__label {
font:
700 10px/1.4 "Inter",
sans-serif;
text-transform: uppercase;
color: #d1d1d1;
}
/* KPI circles */
.blurb-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
list-style: none;
padding: 80px;
margin: 36px 0 0;
margin-left: 200px;
margin-right: 200px;
}
.blurb-row li {
display: flex;
gap: 16px;
align-items: center;
}
.bubble {
width: 100px;
height: 100px;
display: grid;
place-items: center;
border-radius: 9999px;
background: linear-gradient(268deg, #fff 0%, #dfedff 100%);
font:
700 36px/1 "Inter",
sans-serif;
}
/* HOW WE WORKS */
.section {
padding: 56px 0;
}
.wrap {
max-width: 1240px;
margin-inline: auto;
padding-inline: 24px;
}
.eyebrow-up {
font: 700 14px/1.2 Inter;
letter-spacing: 0.02em;
color: #000;
margin: 0 0 28px;
text-transform: uppercase;
}
.t-title {
font: 700 18px/1.3 Inter;
letter-spacing: 0.02em;
color: #1b1e27;
margin: 0 0 14px;
}
.small {
font: 500 16px/1.6 Inter;
margin: 0;
}
.meta {
margin: 0.6rem 0 0;
color: #666;
}
.desc {
color: var(--muted);
margin: 0.4rem 0 0;
}
.step {
color: #777;
margin: 0 0 8px;
font-weight: 600;
}
.hww {
position: relative;
overflow: hidden;
}
.hww-row {
display: grid;
grid-template-columns: 1fr 360px;
gap: 28px;
align-items: start;
padding: 18px 0 64px;
border-bottom: 0px solid rgba(0, 0, 0, 0.12);
}
.hww-row:last-child {
border-bottom: 0;
}
.hww-text h3 {
font: 500 32px/1.3 Inter;
color: #000;
margin: 0;
}
.hww-media img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}
/* text-only rows: align to left column only */
.hww-row--textonly {
grid-template-columns: 1fr;
}
.hww-glow {
position: absolute;
left: -80px;
top: 60px;
width: 340px;
height: 340px;
background: linear-gradient(
40deg,
rgba(0, 107, 255, 0.25),
rgba(0, 107, 255, 0)
);
filter: blur(40px);
transform: skewY(-10deg);
opacity: 0.6;
pointer-events: none;
}
/* PARTNERS */
.partners {
padding-top: 24px;
}
.partners-grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: 40px;
align-items: center;
}
.partners-copy .desc {
max-width: 420px;
}
.partners-img img {
width: 100%;
height: auto;
border-radius: 6px;
display: block;
}
.chip {
display: inline-block;
margin-top: 16px;
padding: 10px 20px;
border-radius: 999px;
background: linear-gradient(90deg, #042f6b, rgba(0, 106, 255, 0.9));
color: #0f0f0f;
font:
600 14px/1 Open Sans,
Inter,
sans-serif;
}
/* NOTE / QUOTE */
.note-grid {
display: grid;
grid-template-columns: 520px 1fr;
gap: 28px;
align-items: center;
}
.note-img img {
width: 100%;
height: auto;
border-radius: 8px;
display: block;
}
.note-copy .small {
font-size: 18px;
}
.note-copy .meta {
font-size: 14px;
}
/* INSIGHTS */
.insights__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 16px;
}
.chip {
display: inline-block;
border: 1px solid #d9d9d9;
border-radius: 28px;
padding: 6px 12px;
color: var(--chip);
font:
700 10px/1 "Inter",
sans-serif;
text-transform: uppercase;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.post {
border: 1px solid #d9d9d9;
border-radius: 20px;
padding: 16px;
}
.post img {
border-radius: 16px;
height: 232px;
width: 100%;
object-fit: cover;
background: #1c1c1c;
}
.post__tag {
border: 1px solid #d9d9d9;
border-radius: 28px;
padding: 6px 12px;
display: inline-block;
color: #fff;
margin-top: 12px;
font:
700 10px/1 "Inter",
sans-serif;
text-transform: uppercase;
background: rgba(0, 0, 0, 0.5);
}
.post h3 {
font:
500 24px/1.3 "Inter",
sans-serif;
margin-top: 12px;
}
.post p {
color: var(--muted);
}
.post__by {
margin-top: 12px;
color: var(--muted);
}
/* FAQ */
.faq__intro {
max-width: 480px;
margin-bottom: 24px;
}
.faq__item {
border-bottom: 1px solid #d4d4d4;
padding: 18px 0;
}
.faq__item > summary {
list-style: none;
cursor: pointer;
font:
600 18px/1.6 "Inter",
sans-serif;
color: rgba(0, 0, 0, 0.8);
}
.faq__item > summary::-webkit-details-marker {
display: none;
}
.faq__item[open] > summary {
color: #000;
}
.faq__item p {
font:
400 15px/1.6 "Open Sans",
sans-serif;
max-width: 720px;
}
/* CTA */
.cta {
position: relative;
background: #fff;
border-top: 1px solid #e4e4e4;
border-bottom: 0.1px solid #e4e4e4;
box-shadow: 0 2px 8px rgba(162, 190, 243, 0.1);
}
.cta__glow {
position: absolute;
inset: auto 0 0;
height: 345px;
pointer-events: none;
background: radial-gradient(
closest-side,
rgba(0, 107, 255, 0.4),
rgba(0, 107, 255, 0)
)
50% 100% / 385px 385px no-repeat;
filter: blur(60px);
}
.cta__inner {
text-align: center;
padding: 40px 0 0;
}
.cta__kicker {
font:
700 34px/1 "Inter",
sans-serif;
margin: 0 0 8px;
}
.cta__sub {
font:
400 20px/1.5 "Inter",
sans-serif;
color: #212121;
opacity: 0.9;
margin-bottom: 16px;
}
.cta__title {
font:
700 90px/1 "Inter",
sans-serif;
color: #2465bf;
margin: 12px 0 24px;
}
.cta__img {
margin: 0 auto 40px;
}
/* ==== ABOUT: HERO (pixel match) ==== */
.about-hero {
position: relative;
min-height: 520px;
overflow: hidden;
background: #000;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
/* Center-left alignment: vertically center the hero copy while keeping it left-aligned
This makes About and Services hero content sit center vertically and aligned to the left. */
.about-hero .container,
.svc-hero .container {
display: flex;
align-items: center;
height: 100%;
}
.about-hero > img {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
opacity: 0.92;
}
/* Services hero background sizing to visually match About hero */
.svc-hero__bg {
width: 100%;
height: 520px;
object-fit: cover;
display: block;
opacity: 0.92;
}
/* Left-heavy + bottom vignette for readability */
.about-hero__overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.62) 0%,
rgba(0, 0, 0, 0.28) 38%,
rgba(0, 0, 0, 0) 64%
),
linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3) 100%);
pointer-events: none;
}
/* Content column: left, with a sane max-width so text doesn't span */
.about-hero__copy {
position: absolute;
inset: 0;
display: grid;
align-content: center;
padding-left: 32px;
padding-right: 32px;
max-width: 540px;
color: #fff;
}
/* Correct type scale */
.about-hero__title {
font:
700 clamp(48px, 6vw, 72px) / 1.05 "Montserrat",
system-ui,
sans-serif;
text-transform: uppercase;
letter-spacing: 0.3px;
margin: 6px 0 10px;
}
.about-hero__sub {
font:
500 16px/1.5 "Inter",
sans-serif;
color: rgba(255, 255, 255, 0.94);
margin-bottom: 12px;
}
/* Ensure the pill never becomes full-width */
.about-hero__cta {
display: inline-flex !important;
width: auto !important;
max-width: fit-content;
white-space: nowrap;
}
/* Tighten spacing below hero so the next rounded card sits close */
.about-hero-wrap {
padding-bottom: 16px;
}
/* Responsive */
@media (max-width: 992px) {
.about-hero {
min-height: 420px;
}
.about-hero > img {
height: 420px;
}
.about-hero__copy {
align-content: end;
padding-bottom: 22px;
max-width: 90vw;
}
.about-hero__title {
font-size: clamp(34px, 8vw, 48px);
}
}
/* ===== Global Button System (site-wide, pill outline) ===== */
:root {
--btn-bg: #ffffff;
--btn-ink: #0f0f0f;
--btn-outline: #042f6b; /* navy from your comp */
--btn-shadow: 0 0 0 0.5px rgba(4, 47, 107, 0.15) inset;
--btn-hover-tint: rgba(4, 47, 107, 0.06);
}
.btn,
a.btn,
button.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 22px;
border-radius: 999px; /* full pill */
background: var(--btn-bg);
color: var(--btn-ink);
border: 1.5px solid var(--btn-outline);
box-shadow: var(--btn-shadow);
font:
600 14px/1 "Open Sans",
system-ui,
sans-serif;
text-decoration: none;
transition:
background 0.18s ease,
box-shadow 0.18s ease,
transform 0.06s ease;
}
.btn .icon,
.btn svg {
color: inherit;
stroke: currentColor;
}
.btn:hover,
a.btn:hover,
button.btn:hover {
background:
linear-gradient(0deg, var(--btn-hover-tint), var(--btn-hover-tint)),
var(--btn-bg);
box-shadow: 0 4px 14px rgba(4, 47, 107, 0.1);
}
.btn:active {
transform: translateY(0.5px) scale(0.99);
}
/* Make sure “pill” helpers and prior variants follow the new look */
.btn--pill,
.btn--outline-gradient,
.btn--outlineBlue,
.btn--dark,
.btn-primary {
background: var(--btn-bg) !important;
color: var(--btn-ink) !important;
border: 1.5px solid var(--btn-outline) !important;
border-radius: 999px !important;
box-shadow: var(--btn-shadow) !important;
}
/* Optional: small + large size helpers if you need them later */
.btn-sm {
padding: 8px 16px;
font-size: 13px;
}
.btn-lg {
padding: 12px 26px;
font-size: 15px;
}
/* Keep “chip” links visually in-family (outlined) */
.chip {
background: var(--btn-bg) !important;
color: var(--btn-ink) !important;
border: 1.5px solid var(--btn-outline) !important;
border-radius: 999px !important;
padding: 10px 20px !important;
}
/* Hero CTA — shared style for About + Services hero buttons */
.hero-cta {
/* base hero CTA (keeps spacing/shape consistent) */
background: transparent;
color: var(--btn-ink);
border: 1.5px solid var(--btn-outline);
padding: 12px 26px;
border-radius: 999px;
font-weight: 700;
box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}
.hero-cta .arrow {
margin-left: 8px;
font-weight: 800;
}
/* Variant: white text with white border (requested) */
.hero-cta--white {
background: transparent; /* keep transparent so background image shows through */
color: #ffffff; /* white text */
border: 1.5px solid rgba(255, 255, 255, 0.9); /* white border */
box-shadow: 0 6px 18px rgba(255, 255, 255, 0.06); /* subtle light lift */
}
/* KPI + “What we do” */
.lead-tight {
font:
400 16px/1.5 "Inter",
sans-serif;
color: var(--ink-2);
}
.about-stats {
list-style: none;
margin: 36px auto 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 993px;
}
.about-stats li {
display: flex;
gap: 16px;
align-items: center;
}
.bubble {
width: 100px;
height: 100px;
display: grid;
place-items: center;
border-radius: 999px;
background: linear-gradient(268deg, #ffffff 0%, #dfedff 100%);
font:
700 36px/1 "Inter",
sans-serif;
}
.col-lg-2 {
width: 40%;
}
.h2 {
font-size: 46px;
}
.ceo-card {
margin-top: 24px;
background: var(--card);
border-radius: 6px;
padding: 16px;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
background: linear-gradient(90deg, #0047ac 0%, #a6cdff 100%);
overflow: hidden;
}
/* === KPI STRIP — flat, tight, icons on right ========================= */
.kpi-strip {
background: none;
} /* ensure no inherited background */
.kpi-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 56px; /* spacing between items (desktop) */
}
.kpi {
display: flex;
align-items: center;
gap: 12px; /* space between text block and icon */
/* prevent awkward wrapping between number+label and its icon */
flex-wrap: nowrap;
}
.kpi__unit {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 12px; /* number ↔ label spacing */
align-items: center;
}
.kpi__num {
font:
800 28px/1 "Inter",
system-ui;
color: #0f1720;
letter-spacing: 0.2px;
}
.kpi__label {
margin: 0;
font:
600 12.5px/1.2 "Inter",
system-ui;
color: #111;
opacity: 0.9;
}
.kpi__icon {
display: block;
width: 24px;
height: 24px;
object-fit: contain;
}
/* Responsive tweaks */
@media (max-width: 1200px) {
.kpi-list {
gap: 44px;
}
}
@media (max-width: 992px) {
.kpi-list {
gap: 32px;
}
.kpi__num {
font-size: 24px;
}
}
@media (max-width: 680px) {
.kpi-list {
gap: 22px;
flex-wrap: wrap; /* allow wrapping on small phones */
}
.kpi {
gap: 10px;
}
.kpi__unit {
column-gap: 10px;
}
}
/* ================= HOW WE WORKS (scrollytelling) =================
One sticky portrait image on the right.
Left side shows ONE step at a time, centered vertically.
The section height = number_of_steps × image_height, so no overlap.
=================================================================== */
/* tune once; the rest auto-calculates */
.howwe {
/* image width responsive but capped */
--frame-w: min(42vw, 520px);
/* portrait 3:4 => height = width * 4/3 */
--frame-h: calc(var(--frame-w) * 4 / 3);
background: #fff;
padding: 72px 0 0; /* top spacing; no bottom so we compute exact height */
overflow: visible;
}
.howwe__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 16px 96px; /* safe bottom so next section breathes */
}
.howwe__head h2 {
font:
700 clamp(26px, 5vw, 38px) / 1.05 "Fira Sans Extra Condensed",
"Montserrat",
system-ui;
text-transform: uppercase;
margin: 0 0 10px;
color: #101114;
}
.howwe__rule {
height: 1px;
background: rgba(0, 0, 0, 0.12);
margin-bottom: 40px;
}
/* two columns */
.howwe__grid {
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: 64px;
align-items: start;
overflow: visible;
}
/* ================= RIGHT (sticky image) ================= */
.howwe__media {
position: sticky;
top: 96px; /* adjust to your header height */
align-self: start;
display: flex;
justify-content: flex-end; /* push frame to the right */
}
.howwe__frame {
width: var(--frame-w);
height: var(--frame-h);
border-radius: 16px;
overflow: hidden;
background: #f3f6fb;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
}
.howwe__frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ================= LEFT (one-centered-step per "screen") ================= */
/* The total scrolling height will be rows × frame height.
Each row is exactly the image height and centers its content. */
.howwe__steps {
position: relative;
overflow: visible;
}
.howwe__row {
min-height: var(--frame-h); /* <-- the trick: row equals image height */
display: flex;
align-items: center; /* center vertically */
/* Optional: snap each step to the middle feel */
scroll-margin-top: 20vh;
}
.howwe__step {
max-width: 520px;
}
.howwe__step small {
display: block;
font:
600 13px/1.2 Inter,
system-ui;
color: #6b7380;
margin-bottom: 8px;
}
.howwe__step p {
font:
400 18px/1.7 Inter,
system-ui;
color: #0f1116;
margin: 0;
}
/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {
.howwe__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.howwe__media {
position: relative;
top: 0;
justify-content: center;
}
.howwe__frame {
width: min(86vw, 420px);
height: calc(min(86vw, 420px) * 4 / 3);
}
.howwe {
--frame-w: min(86vw, 420px);
--frame-h: calc(var(--frame-w) * 4 / 3);
}
}
/* ========== Shared section vertical rhythm ========== */
.fx-pad {
padding-block: clamp(40px, 7vw, 72px);
}
/* ========== PARTNERS (exact look) ========== */
.partners__copy {
max-width: 470px;
}
.partners__eyebrow {
margin: 0 0 10px;
font:
600 12px/1.2 Inter,
system-ui;
color: #6b7280;
}
.partners__title {
margin: 0 0 10px;
font-family: Geist, Inter, system-ui;
font-weight: 800;
font-size: clamp(26px, 4.2vw, 32px);
line-height: 1.15;
letter-spacing: 0.2px;
color: #1b1e27;
text-transform: uppercase; /* reference uses uppercase lockup */
}
.partners__lead {
margin: 0 0 14px;
color: #1c1c1c;
opacity: 0.82;
font:
400 13.5px/1.6 Inter,
system-ui; /* small, tight body */
}
/* tiny outlined pill (About) */
.pill-ghost-sm {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid #dde3ea;
color: #0f1a1a;
font:
600 12.5px/1 Inter,
system-ui;
text-decoration: none;
background: #fff;
}
.pill-ghost-sm:hover {
border-color: #1e64c6;
color: #1e64c6;
}
/* Right portrait styling */
.portrait-frame {
margin: 0;
display: flex;
justify-content: flex-end;
}
.portrait-img {
width: 100%;
max-width: 420px; /* visually equal to reference width */
aspect-ratio: 3/4;
object-fit: cover;
border-radius: 10px;
border: 1px solid #e6eaf2;
background: #f7faff;
box-shadow: 0 18px 40px rgba(16, 24, 40, 0.1);
}
/* ==================== PHOTO + BLUE QUOTE CARD — FINAL ==================== */
.photo-quote__media {
position: relative;
margin: 0 auto;
max-width: 680px; /* narrow like the ref */
border-radius: 12px;
overflow: hidden; /* clips the floating card */
background: #f3f6fb;
/* very subtle lift, no bright halo */
box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
border: 1px solid #e6eaf2; /* thin frame seen in ref */
}
.photo-quote__img {
display: block;
width: 100%;
height: 380px; /* vertical feel from ref */
object-fit: cover;
border-radius: 0; /* container owns rounding */
border: 0;
}
/* ================= PHOTO + BLUE QUOTE — ROW, SAME HEIGHT ================= */
/* Global section padding already handled by .fx-pad */
.photo-quote {
/* Set a single source of truth for the row height */
--pq-h: 340px; /* desktop default - tweak to match your Figma exactly */
}
@media (max-width: 1199.98px) {
.photo-quote {
--pq-h: 320px;
}
}
@media (max-width: 991.98px) {
.photo-quote {
--pq-h: 300px;
}
}
@media (max-width: 575.98px) {
.photo-quote {
--pq-h: 260px;
}
}
/* Remove column padding so the two blocks “stick” together */
.pq-row > [class^="col-"] {
padding-left: 0;
padding-right: 0;
}
/* Left block: framed image, equal height */
.pq-frame {
height: var(--pq-h);
margin: 0;
border-radius: 12px 0 0 12px; /* left corners rounded only */
overflow: hidden;
background: #f3f6fb;
border: 1px solid #e6eaf2;
box-shadow: 0 8px 22px rgba(16, 24, 40, 0.06);
}
.pq-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Right block: gradient card, equal height */
.pq-card {
height: var(--pq-h);
margin: 0;
display: flex;
flex-direction: column;
justify-content: center; /* center text vertically */
padding: 24px 24px 20px;
color: #fff;
/* darker gradient per your note */
background: linear-gradient(110deg, #273be6 0%, #3650f2 45%, #5e7cff 100%);
/* right corners rounded only so it mates perfectly with the image */
border-radius: 0 12px 12px 0;
/* subtle lift like the reference */
box-shadow: 0 10px 28px rgba(16, 24, 40, 0.12);
border: 1px solid rgba(255, 255, 255, 0.04); /* tiny edge definition inside gradient */
}
/* Type scale & spacing to match mock */
.pq-text {
margin: 0 0 14px;
font:
500 14px/1.55 Inter,
system-ui;
letter-spacing: 0.15px;
}
.pq-name {
font:
700 12.5px/1.2 Inter,
system-ui;
}
.pq-role {
font:
600 11.5px/1.2 Inter,
system-ui;
opacity: 0.9;
}
/* Stack on small screens (keeps same look vertically) */
@media (max-width: 991.98px) {
.pq-frame {
border-radius: 12px 12px 0 0;
}
.pq-card {
border-radius: 0 0 12px 12px;
}
}
/* ================= PHOTO + BLUE QUOTE — ROW, EQUAL HEIGHT, NO RADIUS ================= */
/* single source of truth for height */
.photo-quote {
--pq-h: 340px;
} /* adjust if your Figma is taller/shorter */
@media (max-width: 1199.98px) {
.photo-quote {
--pq-h: 320px;
}
}
@media (max-width: 991.98px) {
.photo-quote {
--pq-h: 300px;
}
}
@media (max-width: 575.98px) {
.photo-quote {
--pq-h: 260px;
}
}
/* remove gutters so blocks touch */
.pq-row > [class^="col-"] {
padding-left: 0;
padding-right: 0;
}
/* LEFT: image panel — no rounded corners */
.pq-frame {
height: var(--pq-h);
margin: 0;
overflow: hidden;
background: #f3f6fb;
border: 1px solid #e6eaf2;
/* no corner rounding */
border-radius: 0;
/* subtle lift; keep very soft */
box-shadow: 0 8px 22px rgba(16, 24, 40, 0.06);
}
.pq-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* RIGHT: blue block — no rounded corners; top/bottom pinning */
.pq-card {
height: var(--pq-h);
margin: 0;
display: flex;
flex-direction: column;
/* Top/bottom pinning: paragraph stays at top, meta sits at bottom */
justify-content: space-between;
/* internal spacing */
padding: 24px 24px 20px;
/* gradient aligned with other blues used on the page (vm-gradient family) */
background: linear-gradient(32deg, #042f6b 0%, #1f71e4 100%);
/* no corner rounding to “stick” perfectly to the image */
border-radius: 0;
/* keep lift subtle */
box-shadow: 0 10px 28px rgba(16, 24, 40, 0.1);
border: 1px solid rgba(255, 255, 255, 0.04);
color: #fff;
}
/* type scale */
.pq-text {
margin: 0; /* pin to top */
font:
500 14px/1.55 Inter,
system-ui;
letter-spacing: 0.15px;
}
.pq-meta {
margin-top: 0;
} /* stays at bottom via space-between */
.pq-name {
font:
700 12.5px/1.2 Inter,
system-ui;
}
.pq-role {
font:
600 11.5px/1.2 Inter,
system-ui;
opacity: 0.9;
}
/* stack on small screens */
@media (max-width: 991.98px) {
.pq-frame,
.pq-card {
height: var(--pq-h);
}
}
/* ================= UNLEASH THE FULL POWER OF DATA ================= */
.data-power {
padding-block: clamp(48px, 8vw, 84px);
}
.dp-head {
max-width: 820px;
margin: 0 auto 28px;
}
.dp-icon {
width: 32px;
height: 32px;
margin: 0 auto 12px;
display: grid;
place-items: center;
border-radius: 999px;
background: rgba(31, 113, 228, 0.08);
}
.dp-spark {
font-size: 14px;
color: #1f71e4;
line-height: 1;
}
.dp-title {
margin: 0 0 10px;
font:
800 clamp(18px, 2.2vw, 22px) / 1.25 Inter,
system-ui;
color: #0f1a1a;
}
.dp-sub {
margin: 0 auto;
max-width: 720px;
color: #6b7280;
font:
400 13.8px/1.75 Inter,
system-ui;
}
/* KPI strip */
.dp-kpis {
margin-top: 26px;
}
.dp-kpi {
text-align: center;
padding: 6px 8px;
}
.dp-kpi__num {
font-family: Inter, system-ui;
font-weight: 800;
letter-spacing: 0.2px;
color: #1f3c90; /* deep brand blue like other gradients */
font-size: clamp(22px, 3.2vw, 28px);
line-height: 1.1;
}
.dp-kpi__num span {
font-weight: 800;
color: #1f71e4; /* accent for AUM suffix */
}
.dp-kpi__meta {
margin-top: 6px;
color: #7a7f87;
font:
600 11.5px/1.4 Inter,
system-ui;
text-transform: none;
}
/* Responsive alignment: stack to single column on small screens */
@media (max-width: 767.98px) {
.dp-kpi {
padding: 10px 0;
}
}
/* ================= BLOGS / INSIGHTS HEADING ROW ================= */
.fx-pad--tight {
padding-block: clamp(24px, 4.5vw, 36px);
}
.pill.micro {
display: inline-block;
border: 1px solid #dde3ea;
color: #0f1a1a;
background: #fff;
padding: 6px 10px;
border-radius: 999px;
font:
700 11px/1 Inter,
system-ui;
letter-spacing: 0.3px;
}
.ih-left {
display: flex;
flex-direction: column;
gap: 10px;
}
.ih-title {
margin: 0;
color: #1c1c1c;
font:
700 clamp(18px, 2.6vw, 24px) / 1.2 Inter,
system-ui;
}
.ih-title span {
opacity: 0.9;
}
.ih-viewall {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
font:
700 12.5px/1 Inter,
system-ui;
color: #0f1a1a;
background: #fff;
border: 1px solid #e2e8f0;
padding: 10px 14px;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
}
.ih-viewall:hover {
border-color: #1f71e4;
color: #1f71e4;
}
.ih-arrow {
font-weight: 800;
}
/* Keep heading/button aligned on small screens */
@media (max-width: 991.98px) {
.ih-viewall {
display: inline-flex;
}
.insights-head .text-lg-end {
text-align: left !important;
margin-top: 6px;
}
}
/* ================= FAQ (two-column, reference-accurate) ================= */
.faq {
padding-block: clamp(48px, 7.5vw, 88px);
}
.faq-left {
max-width: 520px;
}
.faq-eyebrow {
display: inline-block;
margin-bottom: 8px;
color: #6b7280;
font:
700 11.5px/1 Inter,
system-ui;
letter-spacing: 0.3px;
}
.faq-title {
margin: 0 0 12px;
color: #1c1c1c;
font-family: Inter, system-ui;
font-weight: 800;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.2;
text-transform: uppercase; /* matches the mock */
}
.faq-copy {
margin: 0 0 14px;
color: #6b7280;
font:
400 14px/1.7 Inter,
system-ui;
max-width: 460px;
}
/* Contact pill (re-uses your micro pill style) */
.faq .pill.micro {
border: 1px solid #dde3ea;
color: #0f1a1a;
background: #fff;
padding: 8px 14px;
border-radius: 999px;
font:
700 12px/1 Inter,
system-ui;
}
/* Right list */
.faq-list {
width: 100%;
max-width: 720px; /* keeps right column readable width */
margin-left: auto;
}
.faq-item {
border-bottom: 1px solid #e9edf3;
padding: 10px 0;
}
.faq-q {
width: 100%;
padding: 14px 8px 14px 0;
background: none;
border: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
text-align: left;
color: #0f172a;
font:
700 15px/1.35 Inter,
system-ui; /* tight like the ref */
}
.faq-icon {
width: 22px;
height: 22px;
border-radius: 999px;
display: grid;
place-items: center;
color: #1f71e4;
background: rgba(31, 113, 228, 0.08); /* subtle blue chip */
flex: 0 0 22px;
}
.faq-a {
padding: 0 0 14px;
color: #4b5563;
font:
400 13.5px/1.65 Inter,
system-ui;
max-width: 560px;
}
/* open state (first item in mock) */
.faq-item.is-open .faq-q .faq-icon {
background: rgba(31, 113, 228, 0.12);
color: #1a5ed0;
}
.faq-item.is-open .faq-q .bi {
font-weight: 900;
} /* dash icon feels heavier */
/* spacing control between columns on wide view */
@media (min-width: 992px) {
.faq .col-lg-5 {
padding-right: 28px;
}
.faq .col-lg-7 {
padding-left: 28px;
}
}
/* stack nicely on small screens */
@media (max-width: 991.98px) {
.faq-left {
max-width: 100%;
}
.faq-list {
max-width: 100%;
margin-left: 0;
}
}
/* =================== CTA — Schedule your meeting (final, forced spin) =================== */
.cta-hero {
--cta-orb-size: clamp(330px, 35vw, 500px); /* smaller than before */
--cta-orb-bottom-cut: -150px; /* keep the crop looking right */
position: relative;
padding-top: clamp(36px, 5vw, 48px);
padding-bottom: clamp(110px, 16vw, 190px);
overflow: hidden; /* crops orb */
isolation: isolate;
}
.cta-stack {
position: relative;
}
.cta-eyebrow {
margin: 0 0 8px;
font:
800 18px/1.2 Inter,
system-ui;
color: #1c1c1c;
}
.cta-sub {
margin: 0 auto 14px;
max-width: 720px;
color: #6b7280;
font:
400 14px/1.7 Inter,
system-ui;
}
/* EXACT solid brand blue (no gradient) */
.cta-title {
margin: 0 0 90px;
color: var(--cta-blue);
font:
900 clamp(44px, 8vw, 92px) / 1.05 Inter,
system-ui;
letter-spacing: -0.5px;
position: relative;
z-index: 3;
}
/* Glow behind everything */
.cta-hero::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: calc(100% - clamp(260px, 22vw, 340px));
width: clamp(520px, 56vw, 920px);
height: clamp(300px, 36vw, 560px);
z-index: 0;
pointer-events: none;
background: radial-gradient(
50% 50% at 50% 50%,
color-mix(in oklab, var(--cta-blue) 40%, transparent) 0%,
color-mix(in oklab, var(--cta-blue) 22%, transparent) 38%,
color-mix(in oklab, var(--cta-blue) 10%, transparent) 58%,
transparent 72%
);
filter: blur(6px);
}
/* Orb BACKGROUND pseudo element (cannot overlap text) */
.cta-hero::after {
content: "";
position: absolute;
left: 50%;
width: var(--cta-orb-size);
height: calc(var(--cta-orb-size) * 0.72);
transform: translateX(-50%) rotate(0deg);
transform-origin: 50% 50%;
z-index: 1; /* below text */
pointer-events: none;
/* FORCE animation (even if reduced-motion is on) */
animation-name: ctaSpin;
animation-duration: 16s;
animation-timing-function: linear;
animation-iteration-count: infinite;
will-change: transform;
}
.cta-hero::after {
/* ... keep other properties as-is ... */
bottom: -150px; /* was -230px; raise it a bit so it's clearly visible */
background: url("../images/schedule_your_meeting.png") center / contain
no-repeat; /* FIXED PATH */
}
@keyframes ctaSpin {
from {
transform: translateX(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) rotate(360deg);
}
}
@media (max-width: 575.98px) {
.cta-hero {
--cta-orb-size: clamp(360px, 78vw, 560px);
--cta-orb-bottom-cut: -170px;
}
}
:root {
/* Use YOUR exact CTA blue here */
--cta-blue: #2047a7; /* <-- change this hex to your original blue if different */
}
/* visibility state */
.tgx-megamenu {
display: none;
position: fixed;
top: var(--tgx-header-bottom, 110px);
left: 0;
right: 0;
z-index: 10001;
}
.tgx-megamenu.is-open {
display: block;
}
/* ===== 3 cards + CTA at far right ===== */
.services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(180px, max-content); /* 3 cards + CTA column */
column-gap: 28px;
row-gap: 28px;
align-items: end; /* baseline-align bottoms of items */
}
/* CTA styles */
.services-cta-btn {
justify-self: end; /* push to far right column */
align-self: end; /* align to bottom baseline */
padding: 14px 22px;
border-radius: 12px;
background: #1c1c1c;
color: #f5f5f5;
text-decoration: none;
font:
600 16px/1 "Inter",
sans-serif;
border: 1px solid rgba(12, 12, 12, 0.4);
box-shadow:
0 35px 55px -10px rgba(0, 0, 0, 0.35),
0 8px 18px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.services-cta-btn:hover {
transform: translateY(-2px);
background: #111;
}
/* ——— Responsive behavior ——— */
/* when space tight, drop CTA below grid but keep it right-aligned */
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(
3,
minmax(0, 1fr)
); /* keep 3 cards; CTA moves to its own row */
}
.services-cta-btn {
grid-column: 1 / -1; /* full row */
justify-self: end; /* align right under the cards */
margin-top: 8px;
}
}
/* 2-up and 1-up fallbacks if needed */
@media (max-width: 992px) {
.services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
.services-grid {
grid-template-columns: 1fr;
}
}
#mega-allpages {
position: fixed !important;
top: 0px;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 999999 !important;
background: #fff !important;
border-radius: 60px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
display: none;
}
/* ===== Vision & Mission (Figma absolute layout, extracted) ===== */
.vm {
position: relative;
width: 100%;
height: 100%;
}
.vm__artboard {
position: relative; /* we’ll place children absolutely inside */
width: 1280px;
height: 403px;
margin: 294px 0 0 0; /* matches top:294px from original */
}
/* --- LEFT GROUP --- */
.vm__left {
position: absolute;
left: 0;
top: -30px;
width: 740px;
height: 403px;
}
/* Mini card (top) */
.vm__mini {
width: 349.5px;
height: 74px;
border-radius: 16px;
border: 1px #d9d9d9 solid;
}
.vm__mini-inner {
position: absolute;
left: 24px;
top: 24px;
width: 311.5px;
height: 36px;
}
.vm__avatars {
position: absolute;
left: 0;
top: 0;
width: 143px;
height: 36px;
}
.vm__ava {
position: absolute;
border-radius: 28px;
box-shadow: 0 50px 30px -2.5px rgba(0, 0, 0, 0.1);
}
.vm__ava--xs {
width: 17px;
height: 17px;
left: 0;
top: 9.5px;
}
.vm__ava--md {
width: 32px;
height: 32px;
left: 21px;
top: 2px;
}
.vm__ava--sm {
width: 26px;
height: 26px;
left: 57px;
top: 5px;
}
.vm__ava--lg {
width: 38px;
height: 38px;
left: 87px;
top: -1px;
}
.vm__ava--xxs {
width: 14px;
height: 14px;
left: 129px;
top: 11px;
}
.vm__investors {
position: absolute;
right: 0;
top: 9.62px;
width: 85px;
height: 16px;
text-align: right;
color: #6e6e6e;
font:
700 10px/16px Geist,
Inter,
system-ui;
text-transform: uppercase;
}
/* Stats card (bottom) */
.vm__stat {
position: absolute;
left: 0;
top: 80px;
width: 349.5px;
height: 303px;
border-radius: 20px;
}
.vm__stat-border {
position: absolute;
inset: 0;
border: 1px #d9d9d9 solid;
border-radius: 20px;
}
.vm__stat-numwrap {
position: absolute;
left: 24px;
top: 172.2px;
width: 311.5px;
height: 106.8px;
overflow: hidden;
}
.vm__stat-num {
position: absolute;
left: 0;
top: 8px;
width: 135.42px;
height: 74.8px;
color: #042f6b;
font:
500 66.8px/74.8px Inter,
system-ui;
}
.vm__plus {
position: absolute;
left: 85px;
top: 17.42px;
width: 36px;
height: 39px;
opacity: 0.6;
color: #9c9c9c;
font:
600 54px/57.2px Inter,
system-ui;
}
.vm__stat-label {
position: absolute;
left: 0;
top: 82.8px;
color: #6e6e6e;
font:
700 21px/24px Geist,
Inter,
system-ui;
}
/* Paragraph on left card */
.vm__stat-copy {
position: absolute;
left: 18px;
top: 21px;
width: 318px;
height: 142px;
color: #1c1c1c;
font:
400 14px/23.8px Geist,
Inter,
system-ui;
margin: 0;
}
/* --- MIDDLE COLUMN (quotes + clients) --- */
.vm__mid {
position: absolute;
left: 372px;
top: -30px;
width: 327.5px;
height: 403px;
overflow: hidden;
border-radius: 20px;
}
.vm__mid-border {
position: absolute;
inset: 0 0 80px 0; /* visual grouping */
border: 1px #d9d9d9 solid;
border-radius: 20px;
}
/* 3-line list: width + leading like Figma */
.vm__mid-lines {
position: absolute;
left: 24px;
top: 26px;
width: 295px; /* lock column width */
margin: 0;
padding: 0;
list-style: none;
color: rgba(28, 28, 28, 0.9);
font:
400 16px/22px Geist,
Inter,
system-ui;
}
.vm__mid-lines li {
margin: 0 0 10px 0;
}
.vm__mid-lines li:last-child {
margin-bottom: 0;
}
.vm__mid-lines strong {
font-weight: 700;
}
.vm__mid-numwrap {
position: absolute;
left: 23.5px;
top: 186.62px;
width: 319.5px;
height: 106.8px;
overflow: hidden;
}
.vm__mid-num {
position: absolute;
left: 0;
top: 10px;
width: 135.42px;
height: 74.8px;
color: #042f6b;
font:
500 66.8px/74.8px Inter,
system-ui;
}
.vm__mid-plus {
position: absolute;
left: 106px;
top: 29px;
width: 35px;
height: 33px;
opacity: 0.6;
color: #9c9c9c;
font:
600 54px/57.2px Inter,
system-ui;
}
.vm__mid-label {
position: absolute;
left: 0;
top: 83px;
width: 240px;
height: 24px;
color: #6e6e6e;
font:
600 16px/24px Inter,
system-ui;
}
/* Availability pill */
.vm__availability {
position: absolute;
left: 0;
bottom: 10px;
width: 327.5px;
height: 64px;
border-radius: 16px;
}
.vm__availability-border {
position: absolute;
left: 0;
bottom: 10px;
width: 327.5px;
height: 64px;
border-radius: 16px;
border: 1px #d9d9d9 solid;
}
.vm__dot {
position: absolute;
border-radius: 8px;
}
.vm__dot--halo {
left: 22px;
top: 24px;
width: 16.36px;
height: 16.36px;
background: #33d478;
opacity: 0.24;
}
.vm__dot--solid {
left: 24.5px;
top: 27.5px;
width: 9px;
height: 9px;
background: #33d478;
}
.vm__avail-text {
position: absolute;
left: 46px;
top: 24px;
color: #6e6e6e;
font:
700 10px/16px Inter,
system-ui;
text-transform: uppercase;
}
/* --- RIGHT BLUE GRADIENT CARD --- */
.vm__blue {
position: absolute;
left: 715px;
top: -30px;
width: 475px;
height: 400px;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(32deg, #042f6b 0%, #1f71e4 100%);
box-shadow: 0 50px 30px -2.5px rgba(0, 0, 0, 0.13);
}
.vm__blue-arrow {
position: absolute;
right: -12px;
bottom: 54px;
width: 390px;
height: auto;
opacity: 0.3;
z-index: 0;
pointer-events: none;
user-select: none;
}
.vm__blue-copy {
position: absolute;
left: 28px;
top: 35px;
width: 365px;
height: 156px;
margin: 0;
color: #fff;
font:
400 16px/25px Geist,
Inter,
system-ui;
}
/* Rating row: score | stars | trust, aligned cleanly */
.vm__rating {
position: absolute;
left: 28px;
bottom: 26px;
display: flex;
align-items: center;
gap: 22px;
z-index: 1;
}
.vm__score {
display: flex;
align-items: baseline;
}
.vm__score-num {
color: #f5f5f5;
font:
500 62px/1 Inter,
system-ui;
letter-spacing: -0.5px;
}
.vm__score-den {
color: rgba(245, 245, 245, 0.75);
font:
600 32px/1 Inter,
system-ui;
margin-left: 6px;
}
/* Stars: crisp SVG, exact spacing */
.vm__stars {
display: flex;
align-items: center;
gap: 6px;
transform: translateY(2px);
}
.vm__star {
width: 12px;
height: 12px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 0.25px 0 rgba(0, 0, 0, 0.25));
}
/* Trust label: optical balance with star row */
.vm__trust {
color: #d6e2ff;
text-transform: uppercase;
display: inline-block;
font:
700 10px/14px Inter,
system-ui;
letter-spacing: 0.4px;
}
/* --- HEADER (title + rule) --- */
.vm__header {
position: absolute;
left: 0;
top: -294px;
width: 1283px;
height: 98px;
}
.vm__title {
position: absolute;
left: 0;
top: 0;
margin: 0;
color: #1b1e27;
font:
700 56px/61.6px Geist,
Inter,
system-ui;
text-transform: uppercase;
}
.vm__rule {
position: absolute;
left: 3px;
top: 97px;
width: 1180px;
height: 1px;
background: rgba(24, 30, 21, 0.2);
}
/* --- SUBHEAD / RIGHT PARA ROW --- */
.vm__sub {
position: absolute;
left: 0;
top: -166px;
width: 1035.43px;
height: 100px;
}
.vm__sub-left {
position: absolute;
left: 0;
top: 0;
width: 722px;
height: 100px;
opacity: 0.7;
color: #1c1c1c;
font:
500 33.66px/46.2px Geist,
Inter,
system-ui;
}
.vm__sub-grey {
color: #6e6e6e;
font-size: 33.66px;
font: Geist, Inter, system-ui;
}
.vm__sub-bold {
color: #1c1c1c;
font-size: 23.66px;
font: Geist, Inter, system-ui;
font-weight: 600;
}
.vm__sub-right {
position: absolute;
left: 552px;
top: 41.78px;
width: 283.43px;
height: 49.8px;
margin: 0;
color: #6e6e6e;
font:
400 15.86px/25.8px Inter,
system-ui;
}
/* === MID LIST CLEANUP === */
.vm__mid-lines {
position: absolute;
left: 24px;
top: 27px;
width: 279px; /* tighter to match figma column */
margin: 0;
padding: 0;
list-style: none; /* no bullets in figma */
color: rgba(28, 28, 28, 0.9);
font:
400 18px/24px Geist,
Inter,
system-ui; /* slightly tighter line height */
}
.vm__mid-lines li {
margin: 0 0 10px 0; /* spacing between lines */
text-wrap: balance; /* nicer breaks */
}
.vm__mid-lines li:last-child {
margin-bottom: 0;
}
.vm__mid-lines strong {
font-weight: 700;
}
/* keep the numbers group exactly where it is, just nudge for new width */
.vm__mid-numwrap {
left: 24px;
top: 186px;
}
.vm__mid-label {
width: 260px;
}
/* Stars: tiny, crisp, and aligned with trust label */
.vm__stars {
display: flex;
align-items: center;
gap: 6px;
transform: translateY(2px);
}
.vm__star {
width: 12px;
height: 12px;
display: inline-block;
fill: #f7b900; /* gold fill */
filter: drop-shadow(0 0.25px 0 rgba(0, 0, 0, 0.25));
}
/* make text a touch wider; arrow sits behind at right-bottom */
.vm__blue-copy {
width: 408px;
max-width: 408px;
top: 32px;
left: 28px;
}
.vm__blue-arrow {
position: absolute;
right: -18px;
bottom: 58px;
width: 360px;
height: auto;
opacity: 0.32;
z-index: 0;
pointer-events: none;
}
/* keep copy + rating above the arrow */
.vm__blue-copy,
.vm__rating {
z-index: 1;
position: absolute;
}
/* ================================
FIX 1 — Middle list with dots
================================ */
.vm__mid-lines {
position: absolute;
left: 24px;
top: 27px;
width: 295px;
margin: 0;
padding-left: 20px;
list-style-type: disc;
color: rgba(28, 28, 28, 0.9);
font:
400 17px/26px Geist,
Inter,
system-ui;
}
.vm__mid-lines li {
margin-bottom: 4px;
text-wrap: balance;
}
.vm__mid-lines li:last-child {
margin-bottom: 0;
}
.vm__mid-lines strong {
font-weight: 700;
}
/* ================================
FIX 2 — Blue arrow, stars, trust
================================ */
.vm__blue {
position: absolute;
background: linear-gradient(32deg, #042F6B 0%, #1F71E4 100%); box-shadow: 0px 50px 30px -2.5px rgba(0, 0, 0, 0.13); overflow: hidden; border-radius: 20px;
}
/* Text width slightly increased so arrow fits visually */
.vm__blue-copy {
position: absolute;
left: 28px;
top: 34px;
width: 410px;
color: #fff;
font:
400 15.5px/24px Geist,
Inter,
system-ui;
margin: 0;
z-index: 2;
}
/* Arrow now placed in the visual gap — middle-right */
.vm__blue-arrow {
position: absolute;
right: 200px;
top: 180px; /* halfway between text and rating */
width: 280px;
height: auto;
opacity: 0.35;
z-index: 1;
pointer-events: none;
user-select: none;
transform: translateY(-20px);
}
/* Rating section: score left, stars stacked above trust right */
.vm__rating {
position: absolute;
left: 28px;
bottom: 26px;
width: 420px;
display: flex;
justify-content: space-between;
align-items: flex-end;
z-index: 2;
}
/* Score (left side) */
.vm__score {
display: flex;
align-items: baseline;
}
.vm__score-num {
color: #f5f5f5;
font:
500 62px/1 Inter,
system-ui;
}
.vm__score-den {
color: rgba(245, 245, 245, 0.75);
font:
600 32px/1 Inter,
system-ui;
margin-left: 3px;
}
/* Right cluster (stars stacked over trust) */
.vm__rating-right {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
transform: translateY(-4px);
}
/* Stars row */
.vm__stars {
display: flex;
gap: 6px;
align-items: center;
}
.vm__star {
width: 12px;
height: 12px;
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,");
filter: drop-shadow(0 0.3px 0 rgba(0, 0, 0, 0.25));
}
/* Trust text under stars */
.vm__trust {
color: #d6e2ff;
text-transform: uppercase;
font:
700 10px/14px Inter,
system-ui;
letter-spacing: 0.4px;
margin-top: 0;
}
/* ===== Insights Section ===== */
:root {
--ink: #1c1c1c;
--muted: #6e6e6e;
--stroke: #d9d9d9;
--surface: #ffffff;
--brand: #266eff;
--radius-lg: 20px;
--radius-md: 16px;
--shadow-lg: 0 50px 30px -2.5px rgba(0, 0, 0, 0.13);
--shadow-sm: 0 40px 20px -2.5px rgba(0, 0, 0, 0.06);
}
.insights {
padding: 24px 0 8px;
}
.insights__container {
max-width: 1144px;
margin: 0 auto;
padding: 0 16px;
}
/* Header row */
.insights__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 24px;
}
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
padding: 6px 12px;
border-radius: 999px;
font:
700 11px/1 Inter,
system-ui;
text-transform: none;
gap: 8px;
white-space: nowrap;
}
.pill--outline {
border: 1px solid var(--stroke);
color: var(--brand);
background: #fff;
}
.insights__title {
margin: 8px 0 0;
font:
500 43.66px/46.2px Inter,
system-ui;
}
.insights__title .muted {
color: var(--muted);
opacity: 0.6;
}
.insights__title .strong {
color: var(--ink);
}
.insights__left {
display: flex;
flex-direction: column;
gap: 12px;
}
.insights__cta {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--ink);
color: #f5f5f5;
text-decoration: none;
padding: 12px 20px;
border-radius: 12px;
box-shadow: var(--shadow-lg);
font:
600 16px/1.6 Inter,
system-ui;
}
.insights__cta .cta__arrow {
width: 20px;
height: 20px;
}
/* Grid */
.insights__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
/* Card */
.card {
background: var(--surface);
border: 1px solid var(--stroke);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 60px 40px -2.5px rgba(0, 0, 0, 0.14);
}
.card__media {
position: relative;
height: 232px;
margin: 16px 16px 0;
border-radius: var(--radius-md);
overflow: hidden;
background: #1c1c1c;
box-shadow: var(--shadow-sm);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card__media::after {
/* top-to-bottom black gradient overlay like Figma */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
0deg,
rgba(112, 112, 112, 0.9) 0%,
rgba(82, 81, 81, 0.5) 100%
);
}
/* top-right tag inside image */
.tag {
position: absolute;
right: 16px;
top: 12px;
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 16px;
border-radius: 28px;
color: #fff;
font:
700 10px/16px Inter,
system-ui;
text-transform: uppercase;
border: 1px solid var(--stroke);
z-index: 1; /* above overlay */
backdrop-filter: blur(2px);
}
/* Body */
.card__body {
padding: 16px;
padding-bottom: 18px;
}
.card__title {
margin: 1px 0 8px 0;
color: var(--ink);
font:
500 23.81px/31.2px Inter,
system-ui;
}
.card__excerpt {
margin: 10px 0 18px 0;
color: var(--muted);
font:
400 16px/24px Inter,
system-ui;
}
.card__meta {
display: flex;
align-items: center;
gap: 10px;
}
.card__avatar {
width: 32px;
height: 32px;
border-radius: 44px;
box-shadow: var(--shadow-sm);
}
.card__by {
color: var(--muted);
font:
400 16px/24px Inter,
system-ui;
}
/* Responsiveness */
@media (max-width: 1024px) {
.insights__grid {
gap: 28px;
}
}
@media (max-width: 768px) {
.insights__head {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.insights__grid {
grid-template-columns: 1fr;
}
.insights__cta {
align-self: flex-end;
}
}
/* ===== FAQ Section ===== */
.faq {
padding: 56px 0;
}
.faq-left {
display: flex;
flex-direction: column;
gap: 12px;
}
.faq-eyebrow {
font:
700 12px/1 Inter,
system-ui;
letter-spacing: 0.12em;
color: #6e6e6e;
}
.faq-title {
margin: 0;
font:
700 40px/1.2 Inter,
system-ui;
color: #1b1e27;
}
.faq-copy {
color: #6e6e6e;
margin: 8px 0 12px;
}
.pill.micro {
display: inline-flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 16px;
border-radius: 999px;
border: 1px solid #266eff;
color: #266eff;
text-decoration: none;
font:
600 14px/1 Inter,
system-ui;
}
/* List */
.faq-list {
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.faq-item {
border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}
.faq-q {
width: 100%;
background: transparent;
border: 0;
text-align: left;
padding: 18px 52px 18px 0;
display: flex;
align-items: center;
justify-content: space-between;
font:
600 18px/1.4 Inter,
system-ui;
color: #1c1c1c;
position: relative;
}
.faq-q:focus-visible {
outline: 2px solid #266eff;
outline-offset: 2px;
border-radius: 8px;
}
.faq-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
background: #266eff;
display: inline-grid;
place-items: center;
}
.faq-icon::before,
.faq-icon::after {
content: "";
display: block;
background: #fff;
border-radius: 1px;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
.faq-icon::before {
width: 14px;
height: 2px;
}
.faq-icon::after {
width: 2px;
height: 14px;
position: absolute;
}
/* open state → minus (hide the vertical bar) */
.faq-item.is-open .faq-icon::after {
opacity: 0;
transform: scaleY(0);
}
.faq-a {
display: none;
padding: 0 52px 18px 0;
color: #6e6e6e;
font:
400 16px/24px Inter,
system-ui;
}
.faq-item.is-open .faq-a {
display: block;
}
.faq-a ul {
margin: 8px 0 0 18px;
}
.faq-a li {
margin: 6px 0;
}
/* Spacing tune for large screens */
@media (min-width: 992px) {
.faq {
padding: 72px 0;
}
.faq-title {
font-size: 48px;
}
}
.pill.micro {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: auto;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid #266eff;
color: #266eff;
text-decoration: none;
font:
600 13px/1 Inter,
system-ui;
background: transparent;
transition: all 0.2s ease;
}
.pill.micro:hover {
background: #266eff;
color: #fff;
}
/* ====== Base ====== */
:root {
--bg: #ffffff;
--ink: #0d0d0d;
--ink-2: #1b1e27;
--muted: #4b4744;
--muted-2: #667085;
--brand-start: #042f6b;
--brand-end: #006affe6;
--accent: #2465bf;
--line: #eaecf0;
--card: #ffffff;
--chip: #2b3625;
--container: 1280px;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
color: var(--ink);
background: var(--bg);
font:
400 16px/1.6 Inter,
system-ui,
-apple-system,
Segoe UI,
Roboto,
sans-serif;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ====== Utilities ====== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: 32px;
}
.eyebrow {
color: #0d0d0d;
font-weight: 600;
letter-spacing: 0;
font-size: 16px;
}
.section-title {
font-family: "Fira Sans Extra Condensed", system-ui, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 56px;
line-height: 61.6px;
margin: 0 0 16px;
color: var(--ink-2);
}
.muted {
color: var(--muted-2);
}
.divider {
border: 0;
height: 1px;
background: var(--line);
margin: 48px 0;
}
/* ====== Hero ====== */
.hero {
position: relative;
min-height: 500px;
}
.hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
}
.hero__inner {
position: relative;
min-height: 500px;
display: flex;
align-items: flex-end;
}
.hero__title {
margin: 0 0 48px;
color: #fff;
font-family: "Fira Sans Extra Condensed", sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 100px;
line-height: 100px;
}
/* ====== Intro ====== */
.intro {
padding: 96px 0;
}
.intro__grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 32px;
align-items: start;
}
.intro__eyebrow {
color: #4b4744;
font:
600 16px Geist,
Inter,
sans-serif;
}
.intro__copy p {
margin: 0 0 12px;
color: #4b4744;
}
.chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--chip);
color: #fff;
padding: 12px 14px;
border-radius: 50px;
text-decoration: none;
font:
600 14px Inter,
sans-serif;
margin-top: 8px;
}
/* ====== Values ====== */
.values {
padding: 96px 0;
}
.values__head {
max-width: 920px;
}
.values__grid {
margin-top: 48px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.value-card {
display: flex;
flex-direction: column;
gap: 16px;
}
.value-card__media {
height: 206px;
border-radius: 4px;
background: #c9ccc8;
}
.value-card h3 {
margin: 0;
font:
500 24px/1.4 Inter,
sans-serif;
color: #141a11;
}
.value-card p {
margin: 0;
color: #4b4744;
}
/* ====== Who we are ====== */
.who {
padding: 96px 0;
background: linear-gradient(14deg, #fff 0%, #e8f2ff 100%);
}
.who__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.who__media {
border-radius: 8px;
overflow: hidden;
}
.who__media img {
height: 100%;
width: 100%;
object-fit: cover;
}
/* ====== Quote strip with image ====== */
.quote-strip {
padding: 96px 0;
}
.quote-strip__inner {
background: linear-gradient(90deg, #a6cdff 0%, #0047ac 100%);
border-radius: 6px;
overflow: hidden;
display: grid;
grid-template-columns: 2fr 1.2fr;
}
.quote-strip__img img {
height: 100%;
width: 100%;
object-fit: cover;
}
.quote-strip__copy {
padding: 40px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.quote-strip__copy p {
font:
500 24px/1.4 Geist,
Inter,
sans-serif;
margin: 0;
}
.quote-strip__person {
display: flex;
flex-direction: column;
gap: 4px;
}
.quote-strip__person strong {
font:
700 20px Geist,
Inter,
sans-serif;
}
.quote-strip__person span {
opacity: 0.9;
}
/* ====== Roles / Jobs ====== */
.roles {
padding: 96px 0;
background: #fff;
}
.roles__head {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: center;
flex-wrap: wrap;
}
.roles__head-left {
flex: 1;
}
@media (max-width: 768px) {
.roles__head {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.roles__filters {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.roles__title {
font:
600 36px/44px Inter,
sans-serif;
margin: 0;
}
.roles__sub {
margin: 8px 0 0;
color: var(--muted-2);
font-size: 20px;
line-height: 30px;
}
.roles__filters {
display: flex;
align-items: center;
gap: 12px;
}
.select {
border: 1px solid #d0d5dd;
border-radius: 8px;
padding: 10px 14px;
background: #fff;
cursor: pointer;
}
.roles__row {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 64px;
align-items: start;
margin: 48px 0;
}
.roles__col h4 {
margin: 0 0 8px;
font: 500 20px/30px Inter;
}
.roles__col p {
margin: 0;
color: var(--muted-2);
}
.roles__cards {
display: grid;
gap: 24px;
}
.job {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
.job__top {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.job__top h5 {
margin: 0;
font: 500 18px/28px Inter;
}
.pill {
background: #f2f4f7;
padding: 2px 10px;
border-radius: 16px;
font: 500 14px/20px Inter;
color: #344054;
}
.job__meta {
display: flex;
gap: 24px;
}
.meta {
color: #667085;
}
.roles__wide {
margin-top: 96px;
}
.roles__wide img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 6px;
}
/* ====== Contact Block ====== */
.contact-block {
padding: 96px 0;
}
.contact__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.contact__media {
border-radius: 20px;
overflow: hidden;
}
.contact__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.contact__form {
max-width: 480px;
margin-left: auto;
}
.contact__head h3 {
margin: 0;
font: 600 36px/44px Inter;
}
.contact__head p {
margin: 8px 0 24px;
color: #535862;
font-size: 20px;
line-height: 30px;
}
.tabs {
display: flex;
border-bottom: 1px solid #eaeaea;
}
.tab {
background: #fff;
border: 1px solid #000;
border-bottom: 0;
border-radius: 4px 4px 0 0;
padding: 12px 16px;
font: 700 16px/20px Inter;
cursor: pointer;
}
.tab + .tab {
border: 0;
border-bottom: 1px solid #eaeaea;
font-weight: 500;
color: rgba(0, 0, 0, 0.7);
}
.tab--active {
z-index: 1;
}
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.field {
display: block;
}
.field span {
display: block;
font: 500 14px/20px Inter;
color: #414651;
margin-bottom: 6px;
}
.field input,
.field textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #d5d7da;
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
font: 400 16px/24px Inter;
}
.input-combo {
display: flex;
border: 1px solid #d5d7da;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.input-combo select {
border: 0;
padding: 12px 12px 12px 16px;
background: #fff;
}
.input-combo input {
border: 0;
border-left: 1px solid #d5d7da;
flex: 1;
}
.check {
display: flex;
align-items: center;
gap: 12px;
margin: 8px 0 16px;
}
.check a {
color: #535862;
text-decoration: underline;
}
/* =================== FOOTER (Figma-accurate) =================== */
.site-footer {
position: relative;
background: #fff;
padding: 72px 0 120px; /* room above links + watermark space */
overflow: hidden;
border-top: 1px solid rgba(24, 30, 21, 0.12);
color: #101828;
isolation: isolate;
}
.footer-grid {
display: grid;
grid-template-columns: 1.15fr 0.7fr 0.7fr 0.7fr 0.7fr; /* office + 4 columns */
gap: 48px 64px;
align-items: start;
}
.footer-col h4 {
margin: 0 0 12px;
font:
700 16px/1.1 Inter,
system-ui;
color: #0b1221;
}
.footer-col p,
.footer-col a {
display: block;
margin: 8px 0;
font:
400 16px/1.7 Inter,
system-ui;
color: #111827;
text-decoration: none;
}
.footer-col a:hover {
text-decoration: underline;
}
/* Office column micro layout */
.footer-office p {
max-width: 420px;
}
.footer-office a {
word-break: break-all;
}
/* Socials */
.footer-socials {
display: flex;
gap: 16px;
margin-top: 20px;
}
.footer-socials .social-icon {
width: 32px;
height: 32px;
border: 1px solid #0b1221;
border-radius: 6px;
display: grid;
place-items: center;
color: #0b1221;
}
.footer-socials .social-icon:hover {
background: #0b1221;
color: #fff;
}
/* Watermark */
.footer-watermark {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -18px;
white-space: nowrap;
pointer-events: none;
user-select: none;
font:
700 clamp(120px, 18vw, 220px) / 0.9 Montserrat,
system-ui;
letter-spacing: 0.02em;
color: #e2eeff; /* exact pale blue */
opacity: 0.9; /* subtle but visible */
filter: drop-shadow(0 2px 8px rgba(33, 89, 196, 0.1));
z-index: 0; /* behind grid content */
}
/* Responsive */
@media (max-width: 1199.98px) {
.footer-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 991.98px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 36px 28px;
}
}
@media (max-width: 575.98px) {
.site-footer {
padding: 56px 0 96px;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-watermark {
font-size: 120px;
bottom: -12px;
}
}
/* =================== /FOOTER =================== */
/* ==== FOOTER — authoritative rules (keep at file end) ==== */
.site-footer {
position: relative;
background: #fff;
border-top: 1px solid rgba(24, 30, 21, 0.12);
padding: 72px 0 132px;
overflow: hidden;
isolation: isolate;
}
/* Left + Right (Office + Links wrapper) */
.site-footer .footer-grid {
display: grid;
grid-template-columns: 1.15fr 2.85fr;
gap: 48px 64px;
align-items: start;
}
/* Make the four link columns actually four columns */
.site-footer .footer-links {
display: grid;
grid-template-columns: repeat(4, 0.7fr);
gap: 0 64px;
align-items: start;
}
/* Headings */
.site-footer .footer-col h4,
.site-footer .footer-links h4 {
margin: 0 0 12px;
font:
700 16px/1.1 Inter,
system-ui;
color: #0b1221;
}
.page-hero {
position: relative;
width: 100%;
height: 580px;
overflow: hidden;
display: flex;
align-items: center;
background: #000;
color: #fff;
}
.page-hero-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.page-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.4) 0%,
rgba(0, 0, 0, 0.5) 100%
);
z-index: 1;
}
.page-hero-title {
font:
700 64px/1.1 "Fira Sans Extra Condensed",
sans-serif;
text-transform: uppercase;
color: #fff;
}
.page-hero-sub {
font:
400 18px/1.7 "Inter",
sans-serif;
color: #e5e7eb;
max-width: 540px;
}
.btn-hero {
background: #fff;
color: #000;
font-weight: 600;
padding: 10px 28px;
border-radius: 100px;
transition: all 0.25s ease;
}
.btn-hero:hover {
background: #111;
color: #fff;
}
.arrow {
margin-left: 6px;
font-size: 1.2em;
transition: transform 0.25s ease;
}
.btn-hero:hover .arrow {
transform: translate(3px, -3px);
}
/* ====== GLOBAL / CONTAINER ====== */
:root {
--ink-950: #0f0f0f;
--ink-900: #1b1e27;
--ink-800: #212121;
--ink-700: #4b4744;
--ink-500: #6a6a6a;
--blue-600: #042f6b;
--blue-500: rgba(0, 106, 255, 0.9);
--stroke: #ededed;
}
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
background: #fff;
color: var(--ink-900);
font-family:
Geist,
Inter,
system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
width: 100%;
max-width: 1180px;
margin-inline: auto;
padding-inline: 0;
}
/* ====== HERO ====== */
.srp-hero {
position: relative;
margin-top: 72px; /* more air like ref */
display: flex;
flex-direction: column;
gap: 32px;
}
/* Decorative thin rounded frames on right side */
.srp-hero::before,
.srp-hero::after {
content: "";
position: absolute;
right: -190px;
top: -52px;
width: 760px;
height: 520px;
border-top-right-radius: 120px;
border-right: 1.5px rgba(0, 0, 0, 0.11) solid;
border-top: 0.5px rgba(0, 0, 0, 0.11) solid;
pointer-events: none;
}
.srp-hero::after {
right: -110px;
top: 0;
width: 650px;
height: 460px;
border-top-right-radius: 70px;
border-right: 1.5px rgba(0, 0, 0, 0.11) solid;
border-top: 0.5px rgba(0, 0, 0, 0.11) solid;
opacity: 0.8;
}
.srp-hero__row {
display: flex;
align-items: flex-end;
gap: 24px;
}
.srp-hero__title-wrap {
width: 872px;
display: flex;
align-items: flex-end;
}
.srp-hero__title {
margin: 0;
color: var(--ink-900);
font-family: "Fira Sans Extra Condensed", Impact, system-ui, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 100px;
line-height: 100px; /* matches screenshot’s tight lockup */
letter-spacing: 0.2px;
}
.srp-hero__copy-wrap {
width: 384px;
}
.srp-hero__copy {
margin: 0;
color: #6d6d6d; /* lighter like ref */
font:
400 14px/20px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-hero__image {
position: relative;
height: 580px;
border-radius: 12px;
overflow: hidden;
background: #f6f6f6;
box-shadow:
0 2px 0 rgba(0, 0, 0, 0.04),
0 12px 28px rgba(0, 0, 0, 0.06);
}
.srp-hero__image img {
width: 1280px;
height: 580px;
display: block;
object-fit: cover;
border-radius: 12px;
}
/* ====== BODY COPY COLUMN + SIDECARD ====== */
.srp-body {
position: relative;
margin-top: 56px;
display: grid;
grid-template-columns: 912px 1fr; /* text column then side card */
gap: 56px;
}
.srp-body__col {
width: 912px;
}
/* headings like the ref (subheads left, 20/32) */
.srp-h3 {
margin: 0;
color: #0f0e0d;
font:
600 20px/32px Geist,
Inter,
system-ui,
sans-serif;
}
.mt-32 {
margin-top: 32px;
}
/* paragraph system */
.srp-p {
margin: 12px 0 0 0;
color: #4b4744;
font:
400 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-strong {
font-weight: 700;
}
/* Bullet list with compact rhythm & custom dot feel */
.srp-list {
margin: 12px 0 0 0;
padding-left: 20px;
list-style: none;
}
.srp-list li {
position: relative;
margin: 0 0 6px 0;
padding-left: 14px;
color: #4b4744;
font:
400 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-list li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #6e6e6e;
opacity: 0.9;
}
/* Side help card (matches translucent white tile) */
.srp-sidecard {
align-self: start;
display: flex;
gap: 16px;
background: rgba(255, 255, 255, 0.65);
border-radius: 6px;
padding: 8px;
overflow: hidden;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.srp-sidecard__img {
width: 114px;
height: 142px;
border-radius: 4px;
overflow: hidden;
flex: 0 0 auto;
}
.srp-sidecard__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.srp-sidecard__content {
display: block;
}
.srp-sidecard__title {
margin: 0 0 6px;
color: #141a11;
font:
600 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-sidecard__text {
margin: 0 0 10px;
color: #181e15;
font:
400 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-sidecard__email {
display: inline-block;
color: #2b3625;
text-decoration: none;
font:
500 16px/19.2px Inter,
system-ui,
sans-serif;
}
/* ====== “All Services” row link (plain, small chevron) ====== */
.srp-cta {
margin-top: 12px;
display: flex;
align-items: center;
}
.srp-btn {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
background: transparent;
padding: 0;
border: 0;
}
.srp-btn span {
color: #0f0f0f;
text-decoration: underline;
font:
600 14px/1 Open Sans,
system-ui,
sans-serif;
}
.srp-btn__arrow {
position: relative;
width: 18px;
height: 18px;
}
.srp-btn__arrow::before {
content: "";
position: absolute;
left: 6px;
top: 5px;
width: 6px;
height: 10px;
border-right: 2px solid #111;
border-top: 2px solid #111;
transform: rotate(45deg);
}
/* ====== RESPONSIVE ====== */
@media (max-width: 1320px) {
.container {
padding-inline: 20px;
}
.srp-hero::before,
.srp-hero::after {
display: none;
} /* hide decorative frames on tight view */
.srp-hero__image img {
width: 100%;
}
}
@media (max-width: 1100px) {
.srp-hero__row {
flex-direction: column;
align-items: flex-start;
}
.srp-hero__title-wrap,
.srp-hero__copy-wrap {
width: 100%;
}
.srp-body {
grid-template-columns: 1fr;
}
.srp-body__col {
width: 100%;
}
.srp-sidecard {
order: -1;
margin-bottom: 24px;
}
}
@media (max-width: 720px) {
.srp-hero {
margin-top: 48px;
}
.srp-hero__title {
font-size: 64px;
line-height: 64px;
}
.srp-hero__copy {
font-size: 14px;
line-height: 20px;
}
}
/* ====== BODY COPY COLUMN + SIDECARD (stacked layout) ====== */
.srp-body {
position: relative;
margin-top: 56px;
display: flex;
flex-direction: column; /* stack main content and got-questions vertically */
align-items: center; /* center everything horizontally */
justify-content: center; /* center vertically within container */
gap: 40px; /* spacing between main text and got questions */
text-align: left;
}
/* Main text column */
.srp-body__col {
width: 912px;
display: flex;
flex-direction: column;
justify-content: center; /* vertically center text */
align-items: center; /* center horizontally */
}
/* Got questions card BELOW main text */
.srp-sidecard {
width: 912px; /* align width with text column */
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
background: rgba(255, 255, 255, 0.65);
border-radius: 6px;
padding: 16px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
text-align: center;
}
/* Inside card */
.srp-sidecard__img {
width: 114px;
height: 142px;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
}
.srp-sidecard__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.srp-sidecard__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 640px;
}
.srp-sidecard__title {
margin: 8px 0 4px;
color: #141a11;
font:
600 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-sidecard__text {
margin: 0 0 8px;
color: #181e15;
font:
400 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-sidecard__email {
text-decoration: none;
color: #2b3625;
font:
500 16px/19.2px Inter,
system-ui,
sans-serif;
}
/* =========================
1) HERO: match ref spacing
========================= */
.srp-hero {
position: relative;
margin-top: 72px; /* more air above hero */
display: flex;
flex-direction: column;
gap: 24px; /* tighter than before */
}
.srp-hero__row {
display: flex;
align-items: flex-end;
gap: 24px;
}
.srp-hero__title {
margin: 0;
font-family: "Fira Sans Extra Condensed", Impact, system-ui, sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 100px;
line-height: 100px;
letter-spacing: 0.2px; /* same visual weight as ref */
color: #1b1e27;
}
.srp-hero__copy-wrap {
width: 384px;
}
.srp-hero__copy {
margin: 0;
max-width: 340px; /* smaller column like ref */
color: #6d6d6d;
font-size: 13.5px;
line-height: 20px;
}
/* Subtle, soft hero image card feel */
.srp-hero__image {
position: relative;
height: 580px;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 2px 0 rgba(0, 0, 0, 0.04),
0 12px 28px rgba(0, 0, 0, 0.06);
}
.srp-hero__image img {
width: 1280px;
height: 580px;
object-fit: cover;
display: block;
border-radius: 12px;
}
/* Right-side thin rounded frames (desktop only) */
@media (min-width: 1321px) {
.srp-hero::before,
.srp-hero::after {
content: "";
position: absolute;
right: -180px;
top: -48px;
width: 760px;
height: 520px;
border-top-right-radius: 120px;
border-right: 1.5px rgba(0, 0, 0, 0.11) solid;
border-top: 0.5px rgba(0, 0, 0, 0.11) solid;
pointer-events: none;
}
.srp-hero::after {
right: -95px;
top: 0;
width: 650px;
height: 460px;
border-top-right-radius: 70px;
opacity: 0.85;
}
}
/* ============================================
2) BODY: stack + center + bottom-aligned look
============================================ */
.srp-body {
position: relative;
margin-top: 56px;
display: flex; /* stack, not grid */
flex-direction: column;
align-items: center; /* center 912px block */
justify-content: center;
gap: 40px; /* space between text and card */
text-align: left;
}
/* Main text column matches ref width */
.srp-body__col {
width: 912px;
display: flex;
flex-direction: column;
justify-content: center; /* keeps the block visually centered vertically */
align-items: flex-start; /* text stays left-aligned */
}
/* Subheads & paragraphs rhythm */
.srp-h3 {
margin: 0;
color: #0f0e0d;
font:
600 20px/32px Geist,
Inter,
system-ui,
sans-serif;
}
.mt-32 {
margin-top: 32px;
}
.srp-p {
margin: 12px 0 0;
color: #4b4744;
font:
400 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-strong {
font-weight: 700;
}
/* Bullets exactly like the ref (small dot, tight) */
.srp-list {
margin: 12px 0 0;
padding-left: 20px;
list-style: none;
}
.srp-list li {
position: relative;
margin: 0 0 6px;
padding-left: 14px;
color: #4b4744;
font:
400 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-list li::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #6e6e6e;
opacity: 0.9;
}
/* “Got questions?” card BELOW and centered, same width as text */
.srp-sidecard {
width: 912px;
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.65);
border-radius: 6px;
padding: 16px;
text-align: center;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.srp-sidecard__img {
width: 114px;
height: 142px;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
}
.srp-sidecard__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.srp-sidecard__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 640px;
}
.srp-sidecard__title {
margin: 8px 0 4px;
color: #141a11;
font:
600 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-sidecard__text {
margin: 0 0 8px;
color: #181e15;
font:
400 16px/24px Geist,
Inter,
system-ui,
sans-serif;
}
.srp-sidecard__email {
text-decoration: none;
color: #2b3625;
font:
500 16px/19.2px Inter,
system-ui,
sans-serif;
}
/* “All Services” row link — left aligned, minimal */
.srp-cta {
width: 912px;
margin: 12px auto 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.srp-btn {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
background: transparent;
padding: 0;
border: 0;
}
.srp-btn span {
color: #0f0f0f;
text-decoration: underline;
font:
600 14px/1 Open Sans,
system-ui,
sans-serif;
}
.srp-btn__arrow {
position: relative;
width: 18px;
height: 18px;
}
.srp-btn__arrow::before {
content: "";
position: absolute;
left: 6px;
top: 5px;
width: 6px;
height: 10px;
border-right: 2px solid #111;
border-top: 2px solid #111;
transform: rotate(45deg);
}
/* =====================
3) RESPONSIVE TWEAKS
===================== */
@media (max-width: 1320px) {
.container {
padding-inline: 20px;
}
}
@media (max-width: 1100px) {
.srp-hero::before,
.srp-hero::after {
display: none;
}
.srp-hero__title {
font-size: 76px;
line-height: 76px;
}
.srp-hero__image {
height: auto;
}
.srp-hero__image img {
width: 100%;
height: auto;
}
.srp-body__col,
.srp-sidecard,
.srp-cta {
width: 100%;
}
}
@media (max-width: 720px) {
.srp-hero {
margin-top: 48px;
}
.srp-hero__title {
font-size: 56px;
line-height: 56px;
}
.srp-hero__copy {
font-size: 13px;
line-height: 20px;
}
}
/* === Unified “What we do + CEO” block locks (non-destructive) === */
#what-we-do.block {
background: #fff;
padding: 64px 0;
}
#what-we-do .eyebrow {
margin: 0;
color: #6b7280;
font-weight: 600;
}
#what-we-do .h2.up {
margin-bottom: 12px;
}
#what-we-do .lead-tight {
font-size: 16px;
line-height: 1.7;
color: #111827;
}
.ceo-card {
background: linear-gradient(90deg, #1e64c6 0%, #a9c9ff 100%);
border-radius: 12px;
padding: 16px 18px;
color: #fff;
}
.ceo {
display: flex;
gap: 16px;
align-items: center;
}
.ceo__img {
width: 114px;
height: 143px;
border-radius: 8px;
object-fit: cover;
flex: 0 0 auto;
}
.ceo__name {
margin: 0 0 4px 0;
font-family:
Geist,
Inter,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial,
sans-serif;
font-weight: 600;
font-size: 20px;
line-height: 24px;
color: #fff;
}
.ceo__role {
margin: 0 0 10px 0;
font-family:
Inter,
Geist,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial,
sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 19.2px;
color: #fff;
}
.ceo__blurb {
margin: 0;
max-width: 466px;
font-family:
Geist,
Inter,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Helvetica,
Arial,
sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 20px;
color: #fff;
}
@media (max-width: 576px) {
.ceo {
align-items: flex-start;
}
.ceo__img {
width: 96px;
height: 120px;
}
}
.vm,
.vision__grid,
.mission {
position: relative;
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding-block: clamp(72px, 8vw, 120px);
overflow: visible !important;
}
.vm__rating {
position: absolute;
left: 28px;
bottom: 26px;
width: 420px;
display: flex;
gap: 84px;
justify-content: flex-start;
align-items: flex-end;
z-index: 2;
flex-wrap: nowrap;
}
/* ===== CTA — SVG arrow rail (scoped) ===== */
.cta-hero { position: relative; }
.cta-hero .sch-rail-wrap{
position:absolute; left:0; right:0; top:50%;
transform: translateY(-30%); /* raise/lower to cut through the title */
height: 60px; /* rail height (SVG viewBox height) */
z-index: 30; pointer-events:none; /* sits over text, never blocks clicks */
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.cta-hero .sch-rail{
width: 100%; height: 100%;
overflow: visible; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
/* Seamless loop: two tracks slide left at the same speed */
.cta-hero .track { animation: sch-rail-move 12s linear infinite; }
.cta-hero .track-b { animation-delay: -6s; } /* half cycle offset for continuity */
@keyframes sch-rail-move{
0% { transform: translateX(0); filter: brightness(.9); }
50% { transform: translateX(-1600px); filter: brightness(1.06) drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
100% { transform: translateX(-3200px); filter: brightness(.9) drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
}
/* --- Tuning knobs (optional) ---
1) Arrow size/shape: In , change stroke-width or the path coords.
2) Gap: uses are spaced by 320px (x="0,320,640,..."). Increase for wider gaps.
3) Speed: change 12s duration. 8s = faster, 16s = slower.
4) Overlap: tweak translateY(-30%) to pass exactly through the headline.
*/
@media (max-width: 768px){
.cta-hero .sch-rail-wrap{ transform: translateY(-18%); }
}