/* Consolidated inline page styles moved from HTML blocks */
:root {
--tb-page-banner-hero-min-height: clamp(25rem, 42vw, 34rem);
--tb-page-banner-hero-min-height-tablet: clamp(23rem, 70vw, 29rem);
--tb-page-banner-hero-min-height-mobile: clamp(22rem, 108vw, 27rem);
--tb-page-banner-hero-padding-top: clamp(5rem, 8vw, 6rem);
--tb-page-banner-hero-padding-bottom: clamp(1.7rem, 4vw, 2.75rem);
--tb-page-banner-hero-padding-inline: max(
1rem,
calc((100vw - 1320px) / 2 + 0.75rem)
);
--tb-page-banner-hero-overlay:
linear-gradient(
90deg,
rgba(6, 18, 50, 0.84) 0%,
rgba(6, 18, 50, 0.68) 34%,
rgba(6, 18, 50, 0.34) 58%,
rgba(6, 18, 50, 0.12) 100%
),
linear-gradient(
180deg,
rgba(6, 18, 50, 0.08) 0%,
rgba(6, 18, 50, 0.38) 100%
);
--tb-page-banner-hero-overlay-mobile:
linear-gradient(
180deg,
rgba(6, 18, 50, 0.5) 0%,
rgba(6, 18, 50, 0.7) 38%,
rgba(6, 18, 50, 0.8) 100%
),
linear-gradient(90deg, rgba(6, 18, 50, 0.72) 0%, rgba(6, 18, 50, 0.26) 100%);
}
/* about-us.html */
.tb-about-top-shell {
background: radial-gradient(
74.52% 74.52% at 50% 25.48%,
#e9f0ff 0%,
#fff 100%
);
}
.tb-about-hero {
padding: clamp(1rem, 2.4vw, 1.8rem) 0 clamp(1.1rem, 2.3vw, 2rem);
padding-top: 0;
padding-bottom: 0;
}
.tb-about-hero > .container-xl {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.tb-about-hero-card {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: var(--tb-page-banner-hero-min-height);
width: 100%;
padding: var(--tb-page-banner-hero-padding-top)
var(--tb-page-banner-hero-padding-inline)
var(--tb-page-banner-hero-padding-bottom);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: end;
border-radius: 0;
box-shadow: none;
}
.tb-about-hero-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--tb-page-banner-hero-overlay);
pointer-events: none;
}
.tb-about-hero-copy {
position: relative;
z-index: 2;
display: grid;
gap: 0.54rem;
max-width: 38rem;
}
.tb-about-kicker {
margin: 0;
color: #2f6be4;
font-size: var(--tb-fs-16);
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.tb-about-hero-copy h1 {
margin: 0;
color: #fff;
font-size: var(--tb-heading-size-xl);
line-height: 1.13;
font-weight: 700;
letter-spacing: -0.01em;
max-width: 34rem;
}
.tb-about-hero-copy p {
margin: 0.12rem 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(var(--tb-fs-16), 1.2vw, var(--tb-fs-18));
line-height: 1.55;
max-width: 34rem;
}
.tb-about-hero-actions {
margin-top: 0.9rem;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.tb-about-hero-art {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.tb-about-hero-art picture,
.tb-res-hero-art picture,
.tb-contact-hero-art picture,
.tb-careers-hero-art picture {
display: block;
width: 100%;
height: 100%;
}
.tb-about-hero-art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
.section-common-margin {
margin: 2em 0;
}
.vision-and-mission-section {
margin: 2em 0;
padding-left: 2em;
padding-right: 2em;
}
.vision-and-mission-section .container {
max-width: 1172px;
padding-left: 16px;
padding-right: 16px;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 1em;
align-items: center;
}
.tab-btn-wrapper {
display: flex;
align-items: center;
padding-bottom: 1.3rem;
}
.tab-btn {
font-size: 20px;
border: none;
background: #fff;
transition: 0.3s;
color: #063e63;
width: max-content;
cursor: pointer;
padding: 0;
margin-right: 16px;
text-align: left;
}
.tab-underline {
display: block;
height: 2px;
background: #f39130;
border-radius: 100vw;
margin: 6px 0;
width: 0;
transition: 0.3s;
}
.tab-btn-active .tab-underline {
width: 100%;
}
.tab-btn-active {
font-weight: 700;
}
.vision-title {
color: #ff6803;
font-weight: 800;
}
.img-container-wrapper {
padding: 1em;
}
.img-container {
width: 100%;
height: 363px;
position: relative;
box-sizing: border-box;
perspective: 1200px;
}
.img-container-item {
position: absolute;
top: 0;
left: 0;
border-radius: 22px;
height: auto;
width: 54%;
backface-visibility: hidden;
transform-style: preserve-3d;
transition:
transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
opacity 0.42s ease,
filter 0.42s ease,
box-shadow 0.42s ease;
}
.img-container-item-mission {
z-index: 1;
transform: translate3d(85%, 0, 0) scale(0.95) rotate(0deg);
opacity: 0.9;
filter: saturate(0.9);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}
.img-container-item-vision {
z-index: 2;
transform: translate3d(0, 43%, 22px) scale(1) rotate(0deg);
opacity: 1;
filter: saturate(1);
box-shadow: 0 20px 38px rgba(15, 23, 42, 0.18);
}
.img-container.is-mission-active .img-container-item-mission {
z-index: 2;
transform: translate3d(0, 43%, 22px) scale(1) rotate(0deg);
opacity: 1;
filter: saturate(1);
box-shadow: 0 20px 38px rgba(15, 23, 42, 0.18);
}
.img-container.is-mission-active .img-container-item-vision {
z-index: 1;
transform: translate3d(85%, 0, 0) scale(0.95) rotate(0deg);
opacity: 0.9;
filter: saturate(0.9);
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}
@media (prefers-reduced-motion: reduce) {
.img-container-item {
transition: none;
}
}
.info {
display: none;
}
.info-mission {
display: none;
}
.info-item-title {
color: #063e63;
font-size: 28px;
margin-bottom: 0.5em;
}
.info-item-description {
font-size: 14px;
line-height: 1.5;
margin-right: 2em;
}
.info-img-wrapper {
display: none;
}
.vision-mission-mobile-section {
display: none;
padding: 1em 10px;
}
.vision-mission-tab-wrapper {
display: flex;
align-items: center;
gap: 1em;
}
.content-toggle-btn {
padding: 12px 0;
width: fit-content;
font-size: 16px;
font-weight: 700;
color: #063e63;
cursor: pointer;
}
.content-toggle-btn .underline {
display: block;
height: 2px;
background: #f39130;
margin-top: 6px;
border-radius: 12px;
width: 0;
transition: 0.3s;
}
.content-toggle-btn-active .underline {
width: 100%;
}
.content-toggle-btn-info {
display: none;
}
.content-toggle-btn-info p {
line-height: 1.5;
color: #063e63;
font-size: 14px;
}
.content-toggle-btn-info span {
margin: 6px 0;
display: block;
font-size: 14px;
}
.tb-about-purpose {
padding: clamp(1.6rem, 3.6vw, 2.4rem) 0 clamp(2rem, 4vw, 3rem);
background: #fff;
}
.tb-about-purpose-shell {
display: grid;
gap: 1rem;
}
.tb-about-purpose-tabs {
display: inline-flex;
align-items: center;
gap: 0.35rem;
width: fit-content;
padding: 0.28rem;
border-radius: 999px;
border: 1px solid #d6e4f8;
background: #f4f8ff;
}
.tb-about-purpose-tab {
border: 0;
background: transparent;
color: #5b6f8f;
font-size: var(--tb-fs-16);
line-height: 1;
font-weight: 600;
padding: 0.62rem 1.05rem;
border-radius: 999px;
transition:
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease;
}
.tb-about-purpose-tab:hover {
color: var(--tb-heading-color);
}
.tb-about-purpose-tab.is-active {
background: #ffffff;
color: var(--tb-heading-color);
box-shadow: 0 6px 16px rgba(11, 31, 83, 0.09);
}
.tb-about-purpose-tab:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(47, 107, 228, 0.2);
}
.tb-about-purpose-panel {
display: none;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
align-items: center;
gap: clamp(1rem, 2.8vw, 2rem);
opacity: 0;
transform: translateY(10px);
}
.tb-about-purpose-panel.is-active {
display: grid;
animation: tb-purpose-panel-in 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tb-about-purpose-copy {
display: grid;
gap: 1.5rem;
max-width: 37rem;
}
.tb-about-purpose-panel.is-active .tb-about-purpose-copy {
animation: tb-purpose-copy-in 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tb-about-purpose-panel.is-active .tb-about-purpose-media {
animation: tb-purpose-media-in 480ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.tb-about-purpose-tab-slot {
margin-top: 0.85rem;
}
.tb-about-purpose-media {
margin: 0;
border-radius: 16px;
overflow: hidden;
background: #edf3ff;
border: 1px solid #d6e4f8;
min-height: clamp(220px, 28vw, 340px);
box-shadow: var(--tb-shadow-soft);
}
.tb-about-purpose-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.tb-about-purpose-index {
margin: 0;
color: #8fb4e6;
font-size: var(--tb-fs-16);
line-height: 1;
font-weight: 700;
letter-spacing: 0.12em;
}
.tb-about-purpose-title {
margin: 0;
color: var(--tb-heading-color);
font-size: clamp(1.6rem, 3vw, 2.15rem);
line-height: 1.12;
font-weight: 600;
letter-spacing: -0.01em;
}
.tb-about-purpose-title strong {
color: #061b45;
font-weight: 600;
}
.tb-about-purpose-text {
margin: 0;
color: #5d6e86;
font-size: clamp(var(--tb-fs-16), 1.2vw, var(--tb-fs-18));
line-height: 1.5;
max-width: 48ch;
}
.tb-about-metrics {
padding: 1rem 0 2.2rem;
}
.tb-about-section-head {
text-align: center;
max-width: 48rem;
margin: 0 auto 1.2rem;
display: grid;
gap: 1rem;
}
.tb-about-section-head p {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-18);
font-size: 14px;
line-height: 1.5;
margin-bottom: 40px;
}
.tb-about-values {
padding: clamp(2.5rem, 4.8vw, 3.7rem) 0;
background: #fff;
}
.tb-about-value-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.85rem;
}
.tb-about-value-card {
border: 1px solid #dfe6f2;
border-radius: 14px;
background: #fff;
box-shadow: var(--tb-shadow-soft);
padding: 1rem 1rem 1.05rem;
display: grid;
gap: 0.46rem;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.tb-about-value-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(12, 43, 115, 0.14);
}
.tb-about-value-card h3 {
margin: 0;
color: var(--tb-heading-color);
font-size: 1.05rem;
line-height: 1.3;
font-weight: 600;
}
.tb-about-value-card p {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.45;
}
.tb-about-team {
padding: clamp(2.6rem, 5vw, 3.8rem) 0;
background: #f7f9fd;
}
.tb-about-team-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(0.78rem, 1.35vw, 1rem);
}
.tb-about-team-pagination {
display: none;
align-items: center;
justify-content: center;
gap: 0.42rem;
margin-top: 0.8rem;
}
.tb-about-team-page {
width: 8px;
height: 8px;
border: 0;
border-radius: 999px;
background: #d2dff4;
padding: 0;
transition:
width 0.2s ease,
background-color 0.2s ease;
}
.tb-about-team-page.is-active {
width: 22px;
background: #2f6be4;
}
.tb-about-team-card {
position: relative;
overflow: hidden;
border: 1px solid #d6e2f4;
border-radius: 20px;
background: #d4ddea;
box-shadow: var(--tb-shadow-soft);
min-height: 320px;
aspect-ratio: 4 / 5;
isolation: isolate;
}
.tb-about-team-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
transition: transform 0.35s ease;
}
.tb-about-team-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 52%;
background: linear-gradient(
180deg,
rgba(9, 24, 59, 0) 0%,
rgba(9, 24, 59, 0.84) 66%,
rgba(9, 24, 59, 0.96) 100%
);
z-index: 0;
}
.tb-about-team-card:hover img {
transform: scale(1.035);
}
.tb-about-team-linkedin {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 38px;
border-radius: 0 18px 0 14px;
background: #0c3f78;
color: #fff;
font-size: 0.78rem;
line-height: 1;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: lowercase;
z-index: 2;
transition: background-color 0.2s ease;
}
.tb-about-team-linkedin:hover {
color: #fff;
background: #0f276f;
}
.tb-about-team-meta {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.05rem 0.95rem 0.95rem;
display: grid;
gap: 0.3rem;
z-index: 1;
}
.tb-about-team-meta h3 {
margin: 0;
color: #fff;
font-size: clamp(1rem, 1.15vw, 1.25rem);
line-height: 1.25;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.tb-about-team-meta .tb-about-team-role {
margin: 0;
color: rgba(244, 248, 255, 0.96);
font-size: var(--tb-fs-16);
line-height: 1.45;
font-weight: 500;
}
.tb-about-team-meta .tb-about-team-bio {
margin: 0;
color: rgba(230, 239, 253, 0.92);
font-size: 12px;
line-height: 1.4;
font-weight: 400;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
display: none;
}
.tb-about-journey {
padding: clamp(2.5rem, 4.8vw, 3.8rem) 0;
background: #fff;
padding-bottom: 0;
}
.tb-about-journey-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.9rem;
margin-bottom: 0.9rem;
}
.tb-about-section-head.tb-about-section-head-left {
margin: 0;
text-align: left;
max-width: 40rem;
}
.tb-about-journey-controls {
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex-shrink: 0;
}
.tb-about-journey-arrow {
width: 40px;
height: 40px;
border-radius: 999px;
border: 1px solid #d6e2f4;
background: #fff;
color: var(--tb-heading-color);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px rgba(12, 31, 73, 0.08);
transition:
border-color 0.2s ease,
color 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease;
}
.tb-about-journey-arrow:hover {
border-color: #2f6be4;
color: #2f6be4;
background: #f5f9ff;
transform: translateY(-1px);
}
.tb-about-journey-arrow:disabled {
opacity: 0.45;
cursor: default;
transform: none;
}
.tb-about-journey-arrow svg {
width: 18px;
height: 18px;
display: block;
}
.tb-about-journey-viewport {
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 0.3rem;
}
.tb-about-journey-viewport::-webkit-scrollbar {
display: none;
}
.tb-about-journey-track {
position: relative;
display: flex;
align-items: stretch;
gap: 2.85rem;
min-width: max-content;
padding-top: 0.1rem;
padding-bottom: 40px;
}
.tb-about-journey-track::before {
content: "";
position: absolute;
left: 0.85rem;
right: 0.85rem;
top: 5.3rem;
height: 2px;
background: #d8e4f8;
}
.tb-about-milestone {
width: min(19.5rem, 78vw);
padding: 0;
display: grid;
gap: 2rem;
scroll-snap-align: start;
position: relative;
}
.tb-about-milestone-year {
margin: 0;
color: rgba(6, 27, 69, 0.12);
font-size: clamp(2.8rem, 5vw, 3rem);
line-height: 1;
font-weight: 700;
letter-spacing: -0.03em;
transition: color 0.22s ease;
}
.tb-about-milestone-dot {
width: 1.42rem;
height: 1.42rem;
border-radius: 999px;
background: #eaf2ff;
border: 2px solid #b7ccef;
box-shadow: 0 0 0 4px #fff;
margin-left: 0.3rem;
margin-top: -0.12rem;
position: relative;
z-index: 1;
}
.tb-about-milestone-card {
border: 1px solid #dfe6f2;
border-radius: 12px;
background: #fff;
padding: 1.05rem 1rem 1.05rem;
min-height: 8.35rem;
transition:
transform 0.22s ease,
border-color 0.22s ease,
box-shadow 0.22s ease;
}
.tb-about-milestone:hover .tb-about-milestone-card {
transform: translateY(-3px);
border-color: #c8daf9;
box-shadow: 0 14px 30px rgba(11, 31, 83, 0.1);
}
.tb-about-milestone:hover .tb-about-milestone-year,
.tb-about-milestone:focus-within .tb-about-milestone-year {
color: rgba(47, 107, 228, 0.32);
}
.tb-about-milestone-card h3 {
margin: 0 0 0.45rem;
color: var(--tb-heading-color);
font-size: 1.03rem;
line-height: 1.32;
font-weight: 600;
}
.tb-about-milestone-card p {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.45;
}
.tb-about-presence {
padding: clamp(1.6rem, 3.2vw, 2.3rem) 0;
background: radial-gradient(
74.52% 74.52% at 50% 24.48%,
#e9f0ff 0%,
#ffffff 100%
);
}
.tb-about-presence-head {
text-align: center;
margin-bottom: 0.85rem;
}
.tb-about-presence-head .tb-title {
color: var(--tb-heading-color);
}
.tb-about-presence-head p {
margin: 0.35rem 0 0;
color: #5d6e86;
font-size: var(--tb-fs-18);
line-height: 1.5;
}
.tb-about-presence-map {
position: relative;
border-radius: 16px;
overflow: hidden;
border: 1px solid #d5e2f7;
background:
radial-gradient(
62% 62% at 50% 52%,
rgba(56, 116, 235, 0.12) 0%,
rgba(56, 116, 235, 0) 72%
),
linear-gradient(180deg, #f7fbff 0%, #edf4ff 100%);
min-height: clamp(13.5rem, 38vw, 27rem);
}
.tb-about-presence-map map-container {
position: absolute;
inset: 0;
display: block;
}
.tb-about-presence-map map-container svg {
width: 100%;
height: 100%;
display: block;
}
.tb-about-presence-map [data-presence-map-marker] {
cursor: pointer;
transition:
fill 0.2s ease,
filter 0.2s ease,
opacity 0.2s ease;
}
.tb-about-presence-map [data-presence-map-marker]:hover,
.tb-about-presence-map [data-presence-map-marker]:focus-visible {
fill: #2f6be4;
filter: drop-shadow(0 0 8px rgba(47, 107, 228, 0.35));
outline: none;
}
.tb-about-presence-map [data-presence-map-marker].is-active {
fill: #f39130;
filter: drop-shadow(0 0 12px rgba(243, 145, 48, 0.45));
}
.tb-about-presence-tooltip {
position: absolute;
left: 0;
top: 0;
padding: 0.45rem 0.7rem;
border-radius: 999px;
background: rgba(12, 27, 86, 0.94);
color: #fff;
font-size: 12px;
line-height: 1;
font-weight: 600;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translate(-50%, calc(-100% - 10px)) scale(0.96);
transform-origin: center;
transition:
opacity 0.18s ease,
transform 0.18s ease;
box-shadow: 0 10px 24px rgba(12, 27, 86, 0.18);
z-index: 3;
}
.tb-about-presence-tooltip::after {
content: "";
position: absolute;
left: 50%;
bottom: -5px;
width: 10px;
height: 10px;
background: inherit;
transform: translateX(-50%) rotate(45deg);
border-radius: 2px;
}
.tb-about-presence-tooltip.is-visible {
opacity: 1;
transform: translate(-50%, calc(-100% - 12px)) scale(1);
}
.tb-about-presence-locations {
margin: 0.68rem auto 0;
display: flex;
flex-wrap: wrap;
gap: 0.36rem;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
padding: 0.36rem;
border: 1px solid #dfe6f2;
border-radius: 14px;
background: rgba(255, 255, 255, 0.97);
/* box-shadow: 0 8px 22px rgba(12, 31, 73, 0.08); */
backdrop-filter: blur(4px);
scroll-behavior: smooth;
}
.tb-about-presence-city {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 999px;
background: #f6f9ff;
color: #5d6e86;
font-size: 13px;
line-height: 1;
font-weight: 500;
padding: 0.48rem 0.8rem;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.tb-about-presence-city strong {
display: inline;
color: inherit;
font-size: inherit;
line-height: 1;
font-weight: 500;
}
.tb-about-presence-city span {
display: none;
}
.tb-about-presence-city:hover {
background: #edf3ff;
color: #1d4f98;
}
.tb-about-presence-city.is-active {
background: #2f6be4;
border-color: #2f6be4;
color: #fff;
}
.tb-about-presence-city:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(47, 107, 228, 0.16);
}
.tb-about-presence-city.is-active strong {
color: #fff;
}
.tb-contact-city-btn.is-active strong {
color: #fff;
}
.tb-about-presence-address {
margin-top: 0.6rem;
border-radius: 12px;
border: 1px solid #d5e2f7;
background: #f8fbff;
padding: 1rem 1.1rem;
display: grid;
gap: 0.18rem;
text-align: center;
}
.tb-about-presence-address strong {
color: var(--tb-heading-color);
font-size: var(--tb-fs-18);
line-height: 1.2;
font-weight: 600;
}
.tb-about-presence-address p {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.45;
}
@keyframes tb-presence-ping {
0% {
transform: scale(0.75);
opacity: 0.8;
}
100% {
transform: scale(1.85);
opacity: 0;
}
}
@keyframes tb-purpose-panel-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tb-purpose-copy-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tb-purpose-media-in {
from {
opacity: 0;
transform: translateY(12px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media only screen and (max-width: 1366px) {
.tab-btn {
font-size: 16px;
}
.info-item-title {
font-size: 22px;
}
.info-item-description {
font-size: 14px;
}
.vision-title {
margin: 0;
display: block;
}
.img-container {
height: 299px;
}
}
@media only screen and (max-width: 600px) {
.vision-and-mission-section {
display: none;
padding-left: 1em;
padding-right: 1em;
}
.vision-mission-mobile-section {
display: block;
}
.info-img-wrapper {
display: block;
}
.info-img-wrapper img {
width: 100%;
height: 250px;
border-radius: 12px;
}
.vision-and-mission-section .container {
grid-template-columns: 1fr;
}
.img-container-item {
border-radius: 22px;
height: 55%;
width: auto;
}
.vision-and-mission-section .img-container-wrapper {
padding: 1em 0;
display: none;
}
.vision-and-mission-section .info img {
position: static;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.tb-about-purpose-panel.is-active,
.tb-about-purpose-panel.is-active .tb-about-purpose-copy,
.tb-about-purpose-panel.is-active .tb-about-purpose-media {
animation: none;
}
}
@media (max-width: 1199.98px) {
.tb-about-value-grid,
.tb-about-team-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tb-about-presence-locations {
gap: 0.36rem;
}
}
@media (max-width: 991.98px) {
.tb-about-hero-card {
min-height: clamp(23rem, 70vw, 29rem);
padding: 6rem 1.5rem 1.5rem;
}
.tb-about-hero-copy {
text-align: left;
max-width: min(100%, 31rem);
}
.tb-about-hero-actions {
justify-content: flex-start;
align-items: flex-start;
}
.tb-about-purpose-panel {
grid-template-columns: 1fr;
gap: 1rem;
}
.tb-about-purpose-media {
min-height: 210px;
}
.tb-about-presence-map {
min-height: clamp(13rem, 52vw, 18.5rem);
}
.tb-about-journey-head {
align-items: center;
}
}
@media (max-width: 767.98px) {
.tb-about-hero {
padding: 0.6rem 0 1.15rem;
}
.tb-about-hero-card {
min-height: clamp(22rem, 108vw, 27rem);
padding: 110px 1rem 1.2rem;
}
.tb-about-hero-copy h1 {
font-size: var(--tb-fs-36);
}
.tb-about-hero-copy p,
.tb-about-section-head p,
.tb-about-purpose-text {
font-size: var(--tb-fs-16);
}
.tb-about-hero-copy h1,
.tb-about-hero-copy p {
text-align: left;
}
.tb-about-section-head p,
.tb-about-purpose-text {
text-align: center;
}
.tb-about-purpose-tabs {
width: 100%;
}
.tb-about-hero-copy {
max-width: min(100%, 23rem);
}
.tb-about-hero-card::after {
background:
linear-gradient(
180deg,
rgba(6, 18, 50, 0.5) 0%,
rgba(6, 18, 50, 0.7) 38%,
rgba(6, 18, 50, 0.8) 100%
),
linear-gradient(
90deg,
rgba(6, 18, 50, 0.72) 0%,
rgba(6, 18, 50, 0.26) 100%
);
}
.tb-about-purpose-tab {
flex: 1 1 0;
text-align: center;
justify-content: center;
padding: 0.62rem 0.82rem;
}
.tb-about-purpose-panel {
gap: 0.85rem;
}
.tb-about-purpose-media {
min-height: 180px;
}
.tb-about-purpose-title {
font-size: clamp(1.45rem, 6vw, 1.9rem);
}
.tb-about-value-grid,
.tb-about-team-grid {
grid-template-columns: 1fr;
}
.tb-about-presence-locations {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0.36rem 0;
box-sizing: border-box;
scroll-padding-inline: 10px;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.tb-about-presence-locations::before,
.tb-about-presence-locations::after {
content: "";
flex: 0 0 10px;
}
.tb-about-presence-city {
flex: 0 0 auto;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.tb-about-presence-locations::-webkit-scrollbar {
display: none;
}
.tb-about-team-grid {
display: flex;
gap: 0.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* padding-bottom: 0.35rem; */
}
.tb-about-team-grid::-webkit-scrollbar {
display: none;
}
.tb-about-team-card {
min-height: 300px;
height: 250px;
flex: 0 0 100%;
width: 100%;
max-width: 100%;
scroll-snap-align: start;
}
.tb-about-team-pagination {
display: flex;
width: 100%;
justify-content: center;
}
.tb-about-journey-head {
flex-direction: column;
align-items: flex-start;
}
}
/* careers.html */
.tb-careers-top-shell {
background: radial-gradient(
74.52% 74.52% at 50% 25.48%,
#e9f0ff 0%,
#fff 100%
);
}
.tb-careers-hero {
padding: 0;
}
.tb-careers-hero > .container-xl {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.tb-careers-hero-card {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: var(--tb-page-banner-hero-min-height);
width: 100%;
padding: var(--tb-page-banner-hero-padding-top)
var(--tb-page-banner-hero-padding-inline)
var(--tb-page-banner-hero-padding-bottom);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: end;
border-radius: 0;
box-shadow: none;
}
.tb-careers-hero-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--tb-page-banner-hero-overlay);
pointer-events: none;
}
.tb-careers-hero-copy {
position: relative;
z-index: 2;
display: grid;
gap: 0.52rem;
max-width: 39rem;
}
.tb-careers-kicker {
margin: 0;
color: #2f6be4;
font-size: var(--tb-fs-16);
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.tb-careers-hero-copy h1 {
margin: 0;
color: #fff;
font-size: var(--tb-heading-size-xl);
line-height: 1.13;
font-weight: 700;
letter-spacing: -0.01em;
max-width: 34rem;
}
.tb-careers-hero-copy p {
margin: 0.1rem 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(var(--tb-fs-16), 1.2vw, var(--tb-fs-18));
line-height: 1.55;
max-width: 33rem;
}
.tb-careers-actions {
margin-top: 0.85rem;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.tb-careers-hero-art {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.tb-careers-hero-art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
.tb-careers-apply {
padding: 0.5rem 0 2.4rem;
/* background: radial-gradient(74.52% 74.52% at 50% 25.48%, #E9F0FF 0%, #FFF 100%); */
scroll-margin-top: 110px;
position: relative;
z-index: 5;
overflow: visible;
}
.tb-careers-apply-card {
border-radius: 22px;
border: 1px solid #d5e2f8;
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(244, 249, 255, 0.96) 44%,
rgba(255, 255, 255, 0.98) 100%
);
box-shadow:
0 22px 54px rgba(12, 43, 115, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
padding: clamp(1.15rem, 2.4vw, 1.75rem);
display: grid;
gap: clamp(0.9rem, 1.4vw, 1.1rem);
align-content: start;
width: 100%;
position: relative;
overflow: visible;
isolation: isolate;
}
.tb-careers-apply-card::before {
content: "";
position: absolute;
left: -18%;
top: -38%;
width: 62%;
height: 70%;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(47, 107, 228, 0.15) 0%,
rgba(47, 107, 228, 0) 74%
);
pointer-events: none;
}
.tb-careers-apply-card::after {
content: "";
position: absolute;
right: -16%;
bottom: -56%;
width: 58%;
height: 76%;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(15, 39, 111, 0.09) 0%,
rgba(15, 39, 111, 0) 74%
);
pointer-events: none;
}
.tb-careers-apply-card > * {
position: relative;
z-index: 1;
}
.tb-careers-apply-copy {
display: grid;
gap: 0.6rem;
align-content: center;
justify-items: center;
text-align: center;
}
.tb-careers-apply-copy h2 {
margin: 0;
color: #f6fbff;
font-size: var(--tb-heading-size-md);
line-height: 1.2;
font-weight: 700;
}
.tb-careers-apply-copy p {
margin: 0;
color: rgba(233, 244, 255, 0.9);
font-size: var(--tb-fs-16);
line-height: 1.5;
}
.tb-careers-benefits {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.4rem;
width: fit-content;
justify-self: center;
}
.tb-careers-benefits li {
color: #dceeff;
font-size: var(--tb-fs-16);
line-height: 1.35;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.45rem;
}
.tb-careers-benefits li::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #2f6be4;
flex-shrink: 0;
}
.tb-careers-form {
display: grid;
gap: 1rem;
}
.tb-careers-form-head {
text-align: center;
display: grid;
gap: 0.42rem;
margin-bottom: 0.1rem;
}
.tb-careers-form-head h2 {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-md);
line-height: 1.2;
font-weight: 700;
}
.tb-careers-form-head p {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.5;
}
.tb-careers-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.82rem 0.92rem;
}
.tb-careers-field {
display: block;
}
.tb-careers-field.is-full {
grid-column: 1 / -1;
}
.tb-careers-form input,
.tb-careers-form textarea,
.tb-careers-select-trigger {
width: 100%;
border: 1px solid #cedcf2;
border-radius: 14px;
background: #fcfdff;
color: #20314d;
font-size: var(--tb-fs-16);
line-height: 1.35;
padding: 0.86rem 0.98rem;
min-height: 48px;
outline: none;
box-shadow:
0 1px 2px rgba(18, 47, 106, 0.04),
inset 0 1px 2px rgba(18, 47, 106, 0.02);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease;
}
.tb-careers-select {
position: relative;
}
.tb-careers-select.is-open {
z-index: 40;
}
.tb-careers-select-trigger {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
text-align: left;
cursor: pointer;
padding-right: 0.82rem;
}
.tb-careers-select-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #8a97ad;
}
.tb-careers-select.has-value .tb-careers-select-label {
color: #20314d;
}
.tb-careers-select-caret {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
color: #1f4e96;
flex-shrink: 0;
margin-right: 0.14rem;
transition: transform 0.2s ease;
}
.tb-careers-select.is-open .tb-careers-select-caret {
transform: rotate(180deg);
}
.tb-careers-form input::placeholder,
.tb-careers-form textarea::placeholder {
color: #8a97ad;
}
.tb-careers-form input:hover,
.tb-careers-form textarea:hover {
border-color: #afc5e9;
background-color: #fff;
}
.tb-careers-select-trigger:hover {
border-color: #afc5e9;
background-color: #fff;
}
.tb-careers-form textarea {
min-height: 96px;
height: 96px;
resize: none;
}
.tb-careers-form input:focus,
.tb-careers-form textarea:focus {
border-color: #2f6be4;
box-shadow:
0 0 0 4px rgba(47, 107, 228, 0.15),
inset 0 1px 2px rgba(18, 47, 106, 0.02);
background-color: #ffffff;
transform: translateY(-1px);
}
.tb-careers-select-trigger:focus-visible,
.tb-careers-select.is-open .tb-careers-select-trigger {
border-color: #2f6be4;
box-shadow:
0 0 0 4px rgba(47, 107, 228, 0.15),
inset 0 1px 2px rgba(18, 47, 106, 0.02);
background-color: #fff;
transform: translateY(-1px);
outline: none;
}
.tb-careers-select-menu {
position: absolute;
top: calc(100% + 0.42rem);
left: 0;
right: 0;
margin: 0;
padding: 0.32rem;
list-style: none;
border-radius: 14px;
border: 1px solid #cedcf2;
background: #fff;
box-shadow: 0 14px 30px rgba(15, 39, 111, 0.14);
max-height: 15rem;
overflow: auto;
z-index: 20;
}
.tb-careers-select-menu[hidden] {
display: none;
}
.tb-careers-select-option {
width: 100%;
border: 0;
border-radius: 10px;
background: transparent;
color: #20314d;
font-size: var(--tb-fs-16);
line-height: 1.35;
text-align: left;
padding: 0.56rem 0.68rem;
transition:
background-color 0.18s ease,
color 0.18s ease;
cursor: pointer;
}
.tb-careers-select-option:hover,
.tb-careers-select-option:focus-visible {
background: #edf3ff;
color: #1d4f98;
outline: none;
}
.tb-careers-select-option.is-active {
background: #2f6be4;
color: #fff;
}
.tb-careers-select.is-invalid .tb-careers-select-trigger {
border-color: #d94157;
box-shadow: 0 0 0 3px rgba(217, 65, 87, 0.13);
}
.tb-careers-file-upload {
position: relative;
display: grid;
gap: 0.45rem;
}
.tb-careers-file-upload input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.tb-careers-file-label {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 0.8rem;
width: 100%;
border: 1px solid #cedcf2;
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
box-shadow:
0 1px 2px rgba(18, 47, 106, 0.04),
inset 0 1px 2px rgba(18, 47, 106, 0.02);
padding: 0.78rem 0.9rem;
cursor: pointer;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease;
}
.tb-careers-file-label:hover {
border-color: #afc5e9;
background-color: #fff;
}
.tb-careers-file-upload
input[type="file"]:focus-visible
+ .tb-careers-file-label {
border-color: #2f6be4;
box-shadow:
0 0 0 4px rgba(47, 107, 228, 0.15),
inset 0 1px 2px rgba(18, 47, 106, 0.02);
background-color: #fff;
transform: translateY(-1px);
}
.tb-careers-file-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.8rem;
height: 2.8rem;
border-radius: 12px;
background: #edf3ff;
color: #2f6be4;
flex-shrink: 0;
}
.tb-careers-file-copy {
display: grid;
gap: 0.16rem;
min-width: 0;
}
.tb-careers-file-text {
color: #20314d;
font-size: var(--tb-fs-16);
line-height: 1.2;
font-weight: 600;
}
.tb-careers-file-meta {
color: #7d8ba1;
font-size: 13px;
line-height: 1.3;
}
.tb-careers-file-name {
min-width: 0;
color: #7d8ba1;
font-size: 13px;
line-height: 1.3;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tb-careers-file-action {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.35rem;
padding: 0.56rem 0.9rem;
border-radius: 999px;
background: #2f6be4;
color: #fff;
font-size: 14px;
line-height: 1;
/* font-weight: 600; */
white-space: nowrap;
box-shadow: 0 8px 18px rgba(47, 107, 228, 0.2);
}
.tb-careers-file-upload.has-file .tb-careers-file-name {
color: #20314d;
font-weight: 500;
}
.tb-careers-file-upload.has-file .tb-careers-file-label {
border-color: #b8cff3;
background: linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
}
.tb-careers-file-upload.is-invalid .tb-careers-file-label {
border-color: #d94157;
box-shadow: 0 0 0 3px rgba(217, 65, 87, 0.13);
}
.tb-careers-file-error {
min-height: 1rem;
color: #d94157;
font-size: 13px;
line-height: 1.35;
padding-inline: 0.1rem;
}
.tb-careers-form .tb-btn {
justify-self: center;
min-width: 12.5rem;
min-height: 2.5rem;
margin-top: 0.3rem;
padding-inline: 1.2rem;
}
.tb-careers-form .tb-btn.tb-btn-blue {
border-radius: 12px;
}
.tb-careers-form .tb-btn.tb-btn-blue:hover,
.tb-careers-form .tb-btn.tb-btn-blue:focus-visible {
color: #3a76ea;
background: #ffffff;
border-color: #3a76ea;
}
.tb-careers-culture,
.tb-careers-roles {
padding: clamp(2.5rem, 4vw, 4rem) 0;
}
.tb-careers-culture {
background: #fff;
}
.tb-careers-culture-slider {
position: relative;
}
.tb-careers-culture-pagination {
display: none;
justify-content: center;
align-items: center;
gap: 0.42rem;
margin-top: 1rem;
}
.tb-careers-culture-pagination-dot {
width: 8px;
height: 8px;
border: 0;
border-radius: 999px;
background: #d2dff4;
padding: 0;
transition:
width 0.2s ease,
background-color 0.2s ease;
}
.tb-careers-culture-pagination-dot.is-active {
width: 22px;
background: #2f6be4;
}
.tb-careers-section-head {
text-align: center;
max-width: 44rem;
margin: 0 auto 1.2rem;
display: grid;
gap: 0.45rem;
}
.tb-careers-section-head p {
margin: 0;
color: #5d6e86;
font-size: 14px;
line-height: 1.5;
}
.tb-careers-culture-card {
height: 100%;
border: 1px solid #d6e3f7;
border-radius: 15px;
background: linear-gradient(165deg, #ffffff 0%, #f7fbff 100%);
box-shadow: 0 12px 28px rgba(12, 43, 115, 0.09);
overflow: hidden;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
display: flex;
flex-direction: column;
}
.tb-careers-culture-card:hover {
transform: translateY(-4px);
border-color: #c9daf5;
box-shadow: 0 16px 34px rgba(12, 43, 115, 0.13);
}
.tb-careers-culture-card img {
width: 100%;
height: 178px;
object-fit: cover;
display: block;
}
.tb-careers-culture-body {
padding: 0.88rem;
display: grid;
gap: 0.55rem;
align-content: start;
flex: 1;
}
.tb-careers-culture-body h3 {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-md);
line-height: 1.2;
font-weight: 600;
}
.tb-careers-culture-body p {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.5;
}
.tb-careers-roles {
background: rgba(240, 245, 255, 0.42);
}
.tb-careers-role-grid {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.tb-careers-role-card {
border: 1px solid #e2e9f5;
border-radius: 24px;
background: #fff;
box-shadow: 0 12px 28px rgba(12, 43, 115, 0.08);
padding: 1.1rem 1.15rem 1.2rem;
display: grid;
gap: 0.9rem;
/* min-height: 238px; */
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.tb-careers-role-card:hover {
transform: translateY(-4px);
border-color: #d2ddf2;
box-shadow: 0 16px 34px rgba(12, 43, 115, 0.12);
}
.tb-careers-role-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.tb-careers-role-card h3 {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-fs-20);
line-height: 1.34;
font-weight: 600;
max-width: 80%;
}
.tb-careers-role-arrow {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: #2f6be4;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition:
transform 0.2s ease,
filter 0.2s ease;
}
.tb-careers-role-arrow svg {
width: 16px;
height: 16px;
display: block;
}
.tb-careers-role-arrow:hover,
.tb-careers-role-arrow:focus-visible {
transform: translateX(2px);
filter: brightness(0.95);
}
.tb-careers-role-lines {
margin: 0;
display: grid;
gap: 0.42rem;
}
.tb-careers-role-lines p {
margin: 0;
color: #21446f;
font-size: clamp(var(--tb-fs-16), 1.15vw, var(--tb-fs-20));
line-height: 1.45;
letter-spacing: 0;
}
.tb-careers-role-lines strong {
font-weight: 500;
}
.tb-careers-open-app {
margin-top: 1.1rem;
text-align: center;
display: grid;
gap: 0.62rem;
justify-items: center;
}
.tb-careers-open-app p {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.45;
}
@media (max-width: 1199.98px) {
.tb-careers-role-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.tb-careers-hero-card {
grid-template-columns: 1fr;
padding: 110px 0 0 0;
}
.tb-careers-hero-copy {
text-align: left;
}
.tb-careers-actions {
justify-content: flex-start;
align-items: flex-start;
}
.tb-careers-hero-art {
order: -1;
width: 100%;
justify-content: center;
}
.tb-careers-hero-art img {
width: min(100%, 22rem);
}
.tb-careers-apply-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 767.98px) {
.tb-careers-shell,
.tb-careers-top-shell,
.tb-careers-hero,
.tb-careers-hero-card,
.tb-careers-hero-copy,
.tb-careers-apply,
.tb-careers-apply-card,
.tb-careers-form,
.tb-careers-form-grid,
.tb-careers-field,
.tb-careers-select,
.tb-careers-file-upload,
.tb-careers-file-label,
.tb-careers-role-grid,
.tb-careers-role-card,
.tb-careers-role-head,
.tb-careers-role-lines {
min-width: 0;
max-width: 100%;
}
.tb-careers-form input,
.tb-careers-form textarea,
.tb-careers-select-trigger {
min-width: 0;
max-width: 100%;
}
.tb-careers-file-label {
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
}
.tb-careers-file-name {
max-width: 100%;
grid-column: 2;
text-align: left;
white-space: normal;
}
.tb-careers-file-action {
grid-column: 1 / -1;
justify-self: start;
}
.tb-careers-culture-track {
--bs-gutter-x: 0;
--bs-gutter-y: 0;
display: flex;
flex-wrap: nowrap;
gap: 0.85rem;
margin: 0;
overflow-x: auto;
overflow-y: visible;
padding: 0.1rem 0 0.35rem;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.tb-careers-culture-track::-webkit-scrollbar {
display: none;
}
.tb-careers-culture-slide {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding: 0;
scroll-snap-align: start;
}
.tb-careers-culture-pagination {
display: flex;
}
}
@media (max-width: 575.98px) {
.tb-about-hero-copy h1,
.tb-careers-hero-copy h1 {
font-size: 24px;
}
.tb-careers-hero-copy p,
.tb-careers-section-head p {
font-size: var(--tb-fs-16);
}
.tb-careers-actions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
}
.tb-careers-actions .tb-btn {
width: auto;
min-width: 0;
}
.tb-careers-form-grid,
.tb-careers-role-grid {
grid-template-columns: 1fr;
}
.tb-careers-form-grid,
.tb-careers-apply-card {
overflow-x: hidden;
overflow-y: clip;
}
.tb-careers-culture-body h3,
.tb-careers-role-card h3,
.tb-careers-form-head h2 {
font-size: var(--tb-heading-size-md);
}
.tb-careers-form input,
.tb-careers-select-trigger {
min-height: 48px;
font-size: 16px;
}
.tb-careers-form textarea {
min-height: 96px;
font-size: 16px;
}
.tb-careers-hero-art img {
width: 50%;
}
.tb-careers-form .tb-btn {
width: 100%;
min-width: 0;
}
.tb-careers-select-menu {
max-height: 12rem;
-webkit-overflow-scrolling: touch;
}
}
/* contact-us.html */
.tb-contact-top-shell {
background: radial-gradient(
74.52% 74.52% at 50% 25.48%,
#e9f0ff 0%,
#fff 100%
);
}
.tb-contact-hero {
padding: 0;
}
.tb-contact-hero > .container-xl {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.tb-contact-hero-card {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: var(--tb-page-banner-hero-min-height);
width: 100%;
padding: var(--tb-page-banner-hero-padding-top)
var(--tb-page-banner-hero-padding-inline)
var(--tb-page-banner-hero-padding-bottom);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: end;
border-radius: 0;
box-shadow: none;
}
.tb-contact-hero-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--tb-page-banner-hero-overlay);
pointer-events: none;
}
.tb-contact-hero-content {
position: relative;
z-index: 2;
display: grid;
gap: 0.46rem;
max-width: 36rem;
}
.tb-contact-kicker {
margin: 0;
color: #dbe6ff;
font-size: var(--tb-fs-16);
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.tb-contact-hero-content h1 {
margin: 0;
color: #fff;
font-size: var(--tb-heading-size-xl);
line-height: 1.13;
font-weight: 700;
letter-spacing: -0.01em;
}
.tb-contact-hero-text {
margin: 0.15rem 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(var(--tb-fs-16), 1.2vw, var(--tb-fs-18));
line-height: 1.55;
max-width: 31rem;
}
.tb-contact-hero-art {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.tb-contact-hero-art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
.tb-contact-banner {
padding: clamp(1rem, 2.8vw, 2.4rem);
position: relative;
overflow: visible;
}
.tb-contact-banner > * {
position: relative;
z-index: 1;
}
.tb-contact-title {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-xl);
line-height: 1.13;
font-weight: 700;
}
.tb-contact-subtitle {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-18);
line-height: 1.5;
max-width: 54rem;
}
.tb-contact-grid {
margin-top: clamp(1.1rem, 2.2vw, 1.7rem);
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: stretch;
}
.tb-contact-form {
border-radius: 22px;
border: 1px solid #d5e2f8;
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(244, 249, 255, 0.96) 44%,
rgba(255, 255, 255, 0.98) 100%
);
box-shadow:
0 22px 54px rgba(12, 43, 115, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.88);
padding: clamp(1.2rem, 2.4vw, 1.9rem);
display: grid;
gap: clamp(0.9rem, 1.4vw, 1.1rem);
align-content: start;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
position: relative;
overflow: clip;
isolation: isolate;
}
.tb-contact-form::before {
content: "";
position: absolute;
left: -18%;
top: -38%;
width: 62%;
height: 70%;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(47, 107, 228, 0.15) 0%,
rgba(47, 107, 228, 0) 74%
);
pointer-events: none;
}
.tb-contact-form::after {
content: "";
position: absolute;
right: -16%;
bottom: -56%;
width: 58%;
height: 76%;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(15, 39, 111, 0.09) 0%,
rgba(15, 39, 111, 0) 74%
);
pointer-events: none;
}
.tb-contact-form > * {
position: relative;
z-index: 1;
}
.tb-contact-form-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.9rem;
flex-wrap: wrap;
}
.tb-contact-form-copy {
display: grid;
gap: 0.38rem;
max-width: 38rem;
}
.tb-contact-form-head h2 {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-md);
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.01em;
}
.tb-contact-form-head p {
margin: 0;
color: #5d6e86;
font-size: 14px;
line-height: 1.5;
max-width: 48rem;
}
.tb-contact-form-tabs-shell {
display: flex;
align-items: center;
gap: 0.42rem;
margin-left: auto;
min-width: 0;
max-width: 100%;
}
.tb-contact-form-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.44rem;
justify-content: flex-end;
align-items: center;
width: fit-content;
max-width: 100%;
min-width: 0;
padding: 0.46rem;
border: 1px solid #dfe6f2;
border-radius: 14px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 8px 22px rgba(12, 31, 73, 0.08);
backdrop-filter: blur(4px);
scroll-behavior: smooth;
}
.tb-contact-form-tabs-nav {
display: none;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid #d6e2f4;
background: #fff;
color: var(--tb-heading-color);
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(12, 31, 73, 0.08);
transition:
border-color 0.2s ease,
color 0.2s ease,
background-color 0.2s ease;
}
.tb-contact-form-tabs-nav:hover {
border-color: #2f6be4;
color: #2f6be4;
background: #f5f9ff;
}
.tb-contact-form-tabs-nav svg {
width: 16px;
height: 16px;
display: block;
}
.tb-contact-form-tabs-nav {
display: none !important;
}
.tb-contact-form-tabs-pagination {
display: none;
justify-content: center;
align-items: center;
gap: 0.42rem;
margin-top: 1rem;
}
.tb-contact-form-tabs-pagination-dot {
width: 8px;
height: 8px;
border: 0;
border-radius: 999px;
background: #d2dff4;
padding: 0;
transition:
width 0.2s ease,
background-color 0.2s ease;
}
.tb-contact-form-tabs-pagination-dot.is-active {
width: 22px;
background: #2f6be4;
}
@media (max-width: 575.98px) {
.tb-contact-form-tabs-pagination {
display: flex;
}
}
.tb-contact-form-tabs-nav[hidden] {
display: none !important;
}
.tb-contact-form-tab {
border: 1px solid transparent;
border-radius: 999px;
background: #f6f9ff;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1;
font-weight: 500;
padding: 0.56rem 0.92rem;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.tb-contact-form-tab:hover {
background: #edf3ff;
color: #1d4f98;
}
.tb-contact-form-tab.is-active {
background: #2f6be4;
border-color: #2f6be4;
color: #fff;
}
.tb-contact-form-tab:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(47, 107, 228, 0.16);
}
#contactTabGeneral,
#contactTabServices,
#contactTabDemo {
scroll-margin-top: 7.5rem;
}
.tb-contact-form-panel {
display: none;
}
.tb-contact-form-panel.is-active {
display: block;
}
.tb-contact-form-panel form {
display: grid;
gap: clamp(0.9rem, 1.4vw, 1.1rem);
}
.tb-contact-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.86rem 0.92rem;
}
.tb-contact-form .tb-field {
display: block;
}
.tb-contact-form .tb-field.is-full {
grid-column: 1 / -1;
}
.tb-contact-form label {
color: #1b3f8b;
font-size: 12px;
letter-spacing: 0.06em;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
}
.tb-contact-form input,
.tb-contact-form textarea {
width: 100%;
border: 1px solid #d2def3;
border-radius: 14px;
background: #fbfdff;
color: #20314d;
font-size: 0.95rem;
line-height: 1.35;
padding: 0.78rem 0.9rem;
outline: none;
box-shadow: inset 0 1px 2px rgba(18, 47, 106, 0.04);
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease,
transform 0.2s ease;
}
.tb-contact-form input::placeholder,
.tb-contact-form textarea::placeholder {
color: #8a97ad;
}
.tb-contact-form input:hover,
.tb-contact-form textarea:hover {
border-color: #b9cbea;
background: #fff;
}
.tb-contact-form input:focus,
.tb-contact-form textarea:focus {
border-color: #2f6be4;
box-shadow:
0 0 0 4px rgba(47, 107, 228, 0.15),
inset 0 1px 2px rgba(18, 47, 106, 0.02);
background-color: #ffffff;
transform: translateY(-1px);
}
.tb-contact-form textarea {
min-height: 96px;
height: 96px;
resize: none;
}
.tb-contact-form .tb-btn {
justify-self: center;
min-width: 12.5rem;
min-height: 2.5rem;
margin-top: 0.15rem;
padding-inline: 1.2rem;
}
.tb-contact-form-confirmation {
margin: 0;
color: #1d4f98;
font-size: var(--tb-fs-16);
line-height: 1.4;
font-weight: 500;
background: #edf3ff;
border: 1px solid #d6e4ff;
border-radius: 12px;
padding: 0.55rem 0.72rem;
width: fit-content;
max-width: 100%;
}
.tb-contact-office-block {
margin-top: clamp(1rem, 2.4vw, 1.65rem);
border-radius: 16px;
/* border: 1px solid #dfe6f2;
background: #FFF;
box-shadow: var(--tb-shadow-soft); */
padding: 1rem;
padding-bottom: 1rem;
}
.tb-contact-city-tabs {
margin: 0.68rem auto 0;
display: flex;
flex-wrap: wrap;
gap: 0.36rem;
align-items: center;
justify-content: center;
width: fit-content;
max-width: 100%;
padding: 0.36rem;
border: 1px solid #dfe6f2;
border-radius: 14px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(4px);
scroll-behavior: smooth;
}
.tb-contact-city-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 999px;
background: #f6f9ff;
color: #5d6e86;
font-size: 13px;
font-weight: 500;
line-height: 1;
padding: 0.48rem 0.8rem;
white-space: nowrap;
cursor: pointer;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
}
.tb-contact-city-btn strong {
display: inline;
color: inherit;
font-size: inherit;
line-height: 1;
font-weight: 500;
}
.tb-contact-city-btn span {
display: none;
}
.tb-contact-city-btn:hover {
background: #edf3ff;
color: #1d4f98;
}
.tb-contact-city-btn.is-active {
background: #2f6be4;
border-color: #2f6be4;
color: #fff;
}
.tb-contact-city-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(47, 107, 228, 0.16);
}
.tb-contact-city-pagination {
display: none;
justify-content: center;
align-items: center;
gap: 0.42rem;
margin-top: 0.72rem;
}
.tb-contact-city-pagination[hidden] {
display: none !important;
}
.tb-contact-city-pagination-dot {
width: 8px;
height: 8px;
border: 0;
border-radius: 999px;
background: #d2dff4;
padding: 0;
transition:
width 0.2s ease,
background-color 0.2s ease;
cursor: pointer;
}
.tb-contact-city-pagination-dot.is-active {
width: 22px;
background: #2f6be4;
}
.tb-contact-city-content {
margin-top: 0.9rem;
text-align: center;
}
.tb-contact-city-content h3 {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-md);
line-height: 1.2;
font-weight: 600;
}
.tb-contact-city-content p {
margin: 0.45rem auto 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.45;
max-width: 66rem;
}
.tb-contact-map-shell {
margin-top: 0.85rem;
border-radius: 14px;
overflow: hidden;
border: 1px solid #dfe6f2;
background: #fdfdfd;
}
.tb-contact-map-shell iframe {
width: 100%;
height: 420px;
border: 0;
display: block;
}
@media (max-width: 991.98px) {
.tb-contact-hero-card {
grid-template-columns: 1fr;
padding-top: 1.1rem;
}
.tb-contact-hero-content {
text-align: left;
}
.tb-contact-hero-art {
order: -1;
width: 100%;
justify-content: center;
}
.tb-contact-hero-art img {
width: min(100%, 22rem);
}
.tb-contact-grid {
grid-template-columns: 1fr;
}
.tb-contact-map-shell iframe {
height: 340px;
}
}
.contact-con {
background: radial-gradient(
74.52% 74.52% at 50% 25.48%,
#e9f0ff 0%,
#fff 100%
);
padding: clamp(1rem, 2.8vw, 2.4rem) 0;
padding-top: 0;
padding-bottom: clamp(1rem, 2.8vw, 2.4rem);
}
.contact-con .container-xl {
padding-left: clamp(1rem, 2vw, 1.5rem);
padding-right: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 575.98px) {
.tb-contact-hero {
padding-top: 0.72rem;
}
.tb-contact-subtitle {
font-size: var(--tb-fs-16);
}
.tb-contact-hero-card {
border-radius: 16px;
grid-template-columns: 1fr;
gap: 0.75rem;
padding: 0.95rem 0.85rem;
}
.tb-contact-kicker {
font-size: 12px;
}
.tb-contact-hero-content h1 {
font-size: 24px;
}
.tb-contact-hero-text {
font-size: var(--tb-fs-16);
}
section.tb-contact-form {
grid-template-columns: minmax(0, 1fr);
}
.tb-contact-banner {
padding: 0;
}
.tb-contact-office-block {
padding: 0;
}
.tb-contact-hero-art {
justify-content: center;
}
.tb-contact-hero-art img {
width: min(100%, 18.6rem);
}
.tb-contact-form .tb-btn {
width: 100%;
min-width: 0;
}
.tb-contact-form-grid {
grid-template-columns: 1fr;
}
.tb-contact-form {
border-radius: 16px;
padding: 1rem 0.88rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.tb-contact-form-head {
gap: 0.72rem;
flex-direction: column;
align-items: stretch;
}
.tb-contact-form-copy {
max-width: 100%;
/* text-align: center; */
}
.tb-contact-form-head h2 {
font-size: var(--tb-heading-size-md);
}
.tb-contact-form-head p {
font-size: 0.9rem;
max-width: 100%;
}
.tb-contact-form-tabs-shell {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
margin-left: 0;
padding: 0.46rem;
border: 1px solid #dfe6f2;
border-radius: 14px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 8px 22px rgba(12, 31, 73, 0.08);
backdrop-filter: blur(4px);
box-sizing: border-box;
}
.tb-contact-form-tabs {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
width: 100%;
min-width: 0;
gap: 0.44rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
scroll-snap-type: x mandatory;
scroll-padding-inline: 0;
scrollbar-width: none;
}
.tb-contact-form-tabs::-webkit-scrollbar {
display: none;
}
.tb-contact-form-tabs-nav {
display: none !important;
}
.tb-contact-form-tab {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 50%;
max-width: 50%;
text-align: center;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.tb-contact-form-tabs-pagination {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 0.72rem;
}
.tb-contact-form-tabs-pagination[hidden] {
display: none !important;
}
.tb-contact-city-tabs {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
width: 100%;
max-width: 100%;
min-width: 0;
padding: 0.36rem 0;
box-sizing: border-box;
scroll-padding-inline: 10px;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.tb-contact-city-tabs::before,
.tb-contact-city-tabs::after {
content: "";
flex: 0 0 10px;
}
.tb-contact-city-tabs::-webkit-scrollbar {
display: none;
}
.tb-contact-city-btn {
flex: 0 0 auto;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.tb-contact-city-pagination {
display: flex;
}
.tb-contact-city-content h3 {
font-size: var(--tb-heading-size-md);
}
.tb-contact-city-content p {
line-height: 1.5;
}
.tb-contact-form input {
min-height: 48px;
font-size: 16px;
}
.tb-contact-form textarea {
min-height: 96px;
height: 96px;
font-size: 16px;
resize: vertical;
}
.tb-contact-form-panel form {
gap: 0.95rem;
}
.tb-contact-form-confirmation {
width: 100%;
}
.tb-contact-map-shell iframe {
height: 250px;
}
}
/* legal.html */
.tb-legal-shell {
background: radial-gradient(
74.52% 74.52% at 50% 25.48%,
#e9f0ff 0%,
#fff 100%
);
padding-top: clamp(6.2rem, 9vh, 7.6rem);
padding-bottom: clamp(2rem, 4vh, 3rem);
}
.tb-legal-header {
margin-bottom: 1.5rem;
}
.tb-legal-header .tb-title {
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-xl);
line-height: 1.13;
font-weight: 700;
letter-spacing: -0.01em;
}
.tb-legal-subtitle {
margin: 0.55rem 0 0;
color: #5d6e86;
font-size: var(--tb-fs-18);
line-height: 1.5;
max-width: 52rem;
}
.tb-legal-layout {
display: grid;
grid-template-columns: 17.5rem minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.tb-legal-nav {
border-radius: 14px;
border: 1px solid #dfe6f2;
/* background: #FDFDFD; */
/* box-shadow: 0 8px 20px rgba(12, 43, 115, 0.08); */
padding: 0.95rem;
position: sticky;
top: 5.75rem;
}
.tb-legal-nav-label {
margin: 0 0 0.55rem;
color: #5d6e86;
font-size: var(--tb-fs-16);
font-weight: 600;
}
.tb-legal-nav-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.35rem;
}
.tb-legal-nav-list a {
display: block;
color: #1d3e86;
font-size: var(--tb-fs-16);
line-height: 1.35;
padding: 0.5rem 0.6rem;
border-radius: 10px;
border: 1px solid transparent;
}
.tb-legal-nav-list a:hover {
background: #edf3ff;
border-color: #dfe6f2;
}
.tb-legal-nav-list a.is-active {
color: #005bab;
background: #edf3ff;
border-color: #dfe6f2;
font-weight: 600;
}
.tb-legal-card {
border-radius: 16px;
border: 1px solid #f6f7f7;
/* background: #FFF; */
/* box-shadow: var(--tb-shadow-soft); */
padding: clamp(1rem, 2.4vw, 2.2rem);
}
.tb-legal-card-head {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #dfe6f2;
padding-bottom: 0.9rem;
margin-bottom: 1rem;
}
.tb-legal-card-head h2 {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-md);
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.01em;
}
.tb-legal-chip {
border-radius: 999px;
border: 1px solid #dfe6f2;
background: #fdfdfd;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1;
padding: 0.45rem 0.7rem;
}
.tb-legal-article h3 {
margin: 1.15rem 0 0.45rem;
color: var(--tb-heading-color);
font-size: var(--tb-fs-20);
margin-top: 40px;
line-height: 1.2;
font-weight: 600;
}
.tb-legal-article p {
margin: 0;
color: #5d6e86;
font-size: 0.95rem;
line-height: 1.6;
}
.tb-legal-article ul {
margin: 0.5rem 0 0;
padding-left: 1.15rem;
color: #5d6e86;
font-size: 0.95rem;
line-height: 1.6;
}
.tb-legal-article li {
margin-bottom: 0.28rem;
}
.tb-legal-note {
margin-top: 1.15rem;
border-radius: 12px;
border: 1px solid #dfe6f2;
background: #fdfdfd;
padding: 0.8rem;
}
.tb-legal-note p {
margin: 0;
}
.tb-legal-note a {
color: #005bab;
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 991.98px) {
.tb-legal-shell {
padding-top: 5.75rem;
}
.tb-legal-layout {
grid-template-columns: 1fr;
}
.tb-legal-nav {
position: static;
top: auto;
}
}
@media (max-width: 575.98px) {
.tb-legal-header .tb-title {
font-size: var(--tb-heading-size-xl);
}
.tb-legal-subtitle {
font-size: var(--tb-fs-16);
}
.tb-legal-card-head h2 {
font-size: var(--tb-heading-size-md);
}
.tb-legal-article h3 {
font-size: var(--tb-heading-size-md);
}
}
/* resources.html */
.tb-res-top-shell {
background: radial-gradient(
74.52% 74.52% at 50% 25.48%,
#e9f0ff 0%,
#fff 100%
);
}
.tb-res-hero {
padding: clamp(1rem, 2.3vw, 1.7rem) 0;
padding-top: 0;
padding-bottom: 0;
}
/* .tb-res-hero>.container-xl {
max-width: none;
padding-left: 0;
padding-right: 0;
} */
.tb-res-hero-card {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: var(--tb-page-banner-hero-min-height);
width: 100%;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: var(--tb-page-banner-hero-padding-top)
var(--tb-page-banner-hero-padding-inline)
var(--tb-page-banner-hero-padding-bottom);
display: grid;
padding-left: 0;
padding-right: 0;
grid-template-columns: minmax(0, 1fr);
gap: 0;
align-items: end;
}
.tb-res-hero-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--tb-page-banner-hero-overlay);
pointer-events: none;
}
.tb-res-hero-copy {
position: relative;
z-index: 2;
display: grid;
gap: 0.5rem;
max-width: 38rem;
}
.tb-res-kicker {
margin: 0;
color: #2f6be4;
font-size: var(--tb-fs-16);
line-height: 1.2;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.tb-res-hero-copy h1 {
margin: 0;
color: #fff;
font-size: var(--tb-heading-size-xl);
line-height: 1.13;
font-weight: 700;
letter-spacing: -0.01em;
}
.tb-res-hero-copy p {
margin: 0.1rem 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(var(--tb-fs-16), 1.2vw, var(--tb-fs-18));
line-height: 1.55;
max-width: 34rem;
}
.tb-res-hero-actions {
margin-top: 0.9rem;
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.tb-res-news-form .tb-btn {
background: #fff;
color: #0f276f;
border-color: #0f276f;
box-shadow: none;
}
.tb-res-news-form .tb-btn:hover {
background: #edf3ff;
color: #0c1f58;
border-color: #0c1f58;
}
.tb-res-hero-art {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.tb-res-hero-art img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
.tb-res-filter-wrap {
margin-top: 1rem;
/* position: sticky; */
top: 5.25rem;
z-index: 15;
}
.tb-res-filter {
border: 1px solid #dfe6f2;
border-radius: 14px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 8px 22px rgba(12, 31, 73, 0.08);
backdrop-filter: blur(4px);
padding: 0.72rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.tb-res-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.44rem;
}
.tb-res-tabs-shell {
display: flex;
align-items: center;
gap: 0.42rem;
min-width: 0;
}
.tb-res-tabs-pagination {
display: none;
justify-content: center;
align-items: center;
gap: 0.42rem;
margin-top: 0.45rem;
}
.tb-res-tabs-pagination-dot {
width: 8px;
height: 8px;
border: 0;
border-radius: 999px;
background: #d2dff4;
padding: 0;
transition:
width 0.2s ease,
background-color 0.2s ease;
}
.tb-res-tabs-pagination-dot.is-active {
width: 22px;
background: #2f6be4;
}
.tb-res-tabs-nav {
display: none;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid #d6e2f4;
background: #fff;
color: var(--tb-heading-color);
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(12, 31, 73, 0.08);
transition:
border-color 0.2s ease,
color 0.2s ease,
background-color 0.2s ease;
}
.tb-res-tabs-nav:hover {
border-color: #2f6be4;
color: #2f6be4;
background: #f5f9ff;
}
.tb-res-tabs-nav svg {
width: 16px;
height: 16px;
display: block;
}
.tb-res-tabs-nav[hidden] {
display: none !important;
}
.tb-res-tab {
border: 1px solid transparent;
border-radius: 999px;
background: #f6f9ff;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1;
font-weight: 500;
padding: 0.56rem 0.92rem;
white-space: nowrap;
}
.tb-res-tab:hover {
background: #edf3ff;
color: #1d4f98;
}
.tb-res-tab.is-active {
background: #2f6be4;
border-color: #2f6be4;
color: #fff;
}
.tb-res-sort {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1;
white-space: nowrap;
}
.tb-res-sort select {
border: 1px solid #d6e0f0;
border-radius: 999px;
background: #fff;
color: #2a3446;
font-size: var(--tb-fs-16);
line-height: 1;
padding: 0.5rem 1.95rem 0.5rem 0.76rem;
outline: none;
}
.tb-res-content {
margin-top: 1rem;
}
.tb-res-layout {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: start;
}
.tb-res-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.85rem;
padding-bottom: 40px;
}
.tb-res-card {
border: 1px solid #dfe6f2;
border-radius: 15px;
background: #fff;
box-shadow: var(--tb-shadow-soft);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.tb-res-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(12, 43, 115, 0.14);
}
.tb-res-card-media {
height: 148px;
position: relative;
border-bottom: 1px solid #edf2fb;
background: linear-gradient(135deg, #1d3e86 0%, #2f6be4 100%);
}
.tb-res-card-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.tb-res-card-media.bg-2 {
background: linear-gradient(135deg, #f6f9ff 0%, #dbe8ff 100%);
}
.tb-res-card-media.bg-3 {
background: linear-gradient(135deg, #0c1b56 0%, #1d3e86 100%);
}
.tb-res-card-media.bg-4 {
background: linear-gradient(135deg, #10234d 0%, #2b4f9f 100%);
}
.tb-res-card-media.bg-5 {
background: linear-gradient(135deg, #eaf3ff 0%, #c7dcff 100%);
}
.tb-res-card-media.bg-6 {
background: linear-gradient(135deg, #edf2ff 0%, #d4e4ff 100%);
}
.tb-res-chip {
position: absolute;
left: 0.65rem;
top: 0.65rem;
border-radius: 999px;
border: 1px solid #d6e4ff;
background: rgba(255, 255, 255, 0.95);
color: #1d4f98;
font-size: 11px;
line-height: 1;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.32rem 0.54rem;
}
.tb-res-card-body {
padding: 0.75rem 0.78rem 0.82rem;
display: grid;
gap: 0.5rem;
flex: 1;
}
.tb-res-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
color: #7a879c;
font-size: 12px;
line-height: 1.2;
}
.tb-res-meta .dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: #a9b6cb;
align-self: center;
margin-top: 1px;
}
.tb-res-card h3 {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-fs-20);
line-height: 1.25;
font-weight: 600;
}
.tb-res-card p {
margin: 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.5;
}
.tb-res-card-link {
margin-top: auto;
color: #2f6be4;
font-size: var(--tb-fs-16);
font-weight: 600;
line-height: 1.2;
display: inline-flex;
align-items: center;
gap: 0.28rem;
border-radius: 0.45rem;
padding: 0.15rem 0.1rem;
}
.tb-res-card-link:hover {
color: #1d4f98;
background: #edf3ff;
}
.tb-res-side {
display: grid;
gap: 0.82rem;
position: sticky;
top: 9.9rem;
}
.tb-res-side-card {
border-radius: 14px;
border: 1px solid #dfe6f2;
background: #fff;
box-shadow: var(--tb-shadow-soft);
padding: 0.82rem;
}
.tb-res-side-card.is-highlight {
background: linear-gradient(145deg, #f3f8ff 0%, #ffffff 100%);
border-color: #cfe0ff;
}
.tb-res-side-card h4 {
margin: 0;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-md);
line-height: 1.2;
font-weight: 600;
}
.tb-res-side-card p {
margin: 0.45rem 0 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.5;
}
.tb-res-side-card .tb-btn {
margin-top: 0.7rem;
width: 100%;
}
.tb-res-news-form {
margin-top: 0.7rem;
display: grid;
gap: 0.48rem;
border: 1px solid #cfe0ff;
border-radius: 12px;
background: linear-gradient(180deg, #eaf3ff 0%, #f3f8ff 100%);
padding: 0.48rem;
}
.tb-res-news-form input {
width: 100%;
border: 1px solid #d6e1f5;
border-radius: 12px;
background: #eef5ff;
color: #2a3446;
font-size: var(--tb-fs-16);
line-height: 1.3;
padding: 0.62rem 0.72rem;
outline: none;
}
.tb-res-news-form input:focus {
border-color: #2f6be4;
box-shadow: 0 0 0 4px rgba(47, 107, 228, 0.12);
}
.tb-res-note {
margin-top: 0.5rem;
color: #8b98ad;
font-size: 11px;
line-height: 1.35;
}
@media (max-width: 1199.98px) {
.tb-res-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 991.98px) {
.tb-res-hero-card {
min-height: clamp(23rem, 70vw, 29rem);
padding: 6rem 1.5rem 1.5rem;
}
.tb-res-hero-copy {
text-align: left;
max-width: min(100%, 31rem);
}
.tb-res-filter-wrap {
top: 5.05rem;
}
.tb-res-layout {
grid-template-columns: 1fr;
}
.tb-res-side {
position: static;
top: auto;
}
}
@media (max-width: 575.98px) {
.tb-res-hero-card {
min-height: clamp(22rem, 108vw, 27rem);
padding: 110px 1rem 1.2rem;
}
.tb-res-kicker {
font-size: 12px;
}
.tb-res-hero-copy h1 {
font-size: 24px;
}
.tb-res-hero-copy p {
font-size: var(--tb-fs-16);
}
.tb-res-hero-copy {
max-width: min(100%, 23rem);
}
.tb-res-hero-card::after {
background:
linear-gradient(
180deg,
rgba(6, 18, 50, 0.5) 0%,
rgba(6, 18, 50, 0.7) 38%,
rgba(6, 18, 50, 0.8) 100%
),
linear-gradient(
90deg,
rgba(6, 18, 50, 0.72) 0%,
rgba(6, 18, 50, 0.26) 100%
);
}
.tb-res-tabs-shell {
width: 100%;
max-width: 100%;
}
.tb-res-tabs-pagination {
display: flex;
width: 100%;
}
.tb-res-tabs {
flex-wrap: nowrap;
overflow-x: auto;
width: 100%;
min-width: 0;
padding-bottom: 0.08rem;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
scroll-padding-left: 0;
}
.tb-res-tab {
flex: 0 0 auto;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.tb-res-tabs::-webkit-scrollbar {
display: none;
}
.tb-res-card-grid {
grid-template-columns: 1fr;
}
}
/* blog page */
.tb-blog-shell {
background: radial-gradient(
74.52% 74.52% at 50% 25.48%,
#e9f0ff 0%,
#fff 100%
);
padding-top: clamp(6.2rem, 9vh, 7.6rem);
padding-bottom: clamp(2rem, 4vh, 3rem);
}
.tb-blog-article {
/* max-width: 50rem; */
margin: 0 auto;
}
/* .tb-blog-header {
margin-bottom: 2rem;
} */
.tb-blog-back {
display: inline-flex;
align-items: center;
color: #2f6be4;
font-size: var(--tb-fs-16);
font-weight: 500;
margin-bottom: 1rem;
}
.tb-blog-back:hover {
color: #1d4f98;
}
.tb-blog-title {
margin: 0;
color: var(--tb-heading-color);
font-size: clamp(28px, 4vw, 36px);
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.01em;
}
.tb-blog-meta {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
color: #5d6e86;
font-size: var(--tb-fs-16);
}
.tb-blog-meta span {
display: inline-flex;
align-items: center;
}
.tb-blog-category {
border-radius: 999px;
background: #edf3ff;
color: #2f6be4;
padding: 0.25rem 0.75rem;
font-weight: 500;
}
.tb-blog-featured {
border-radius: 16px;
overflow: hidden;
margin-bottom: 2rem;
}
.tb-blog-featured img {
width: 100%;
height: auto;
display: block;
}
.tb-blog-content {
/* background: #fff; */
border-radius: 16px;
padding: clamp(1.5rem, 3vw, 2.5rem);
/* box-shadow: var(--tb-shadow-soft); */
}
.tb-blog-lead {
font-size: clamp(var(--tb-fs-18), 1.2vw, var(--tb-fs-20));
line-height: 1.6;
color: #1d3e86;
font-weight: 500;
margin-bottom: 2rem;
}
.tb-blog-content h2 {
margin: 2rem 0 1rem;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-md);
line-height: 1.3;
font-weight: 600;
}
.tb-blog-content h2:first-of-type {
margin-top: 0;
}
.tb-blog-content p {
margin: 0 0 1rem;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.7;
}
.tb-blog-content ul {
margin: 1rem 0;
padding-left: 1.5rem;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.7;
}
.tb-blog-content li {
margin-bottom: 0.5rem;
}
.tb-blog-cta {
margin-top: 3rem;
padding: 2rem;
border-radius: 12px;
background: #edf3ff;
text-align: center;
}
.tb-blog-cta h3 {
margin: 0 0 0.5rem;
color: var(--tb-heading-color);
font-size: var(--tb-heading-size-md);
font-weight: 600;
}
.tb-blog-cta p {
margin: 0 0 1.5rem;
color: #5d6e86;
}
.tb-blog-related-head {
margin: 0 auto 1rem;
margin-left: 0;
max-width: 50rem;
}
.tb-blog-related-head .tb-title {
margin: 0;
}
.tb-blog-related-head p {
margin: 0.45rem 0 0;
color: #5d6e86;
font-size: var(--tb-fs-16);
line-height: 1.6;
}
@media (max-width: 991.98px) {
.tb-blog-shell {
padding-top: 5.75rem;
}
.tb-blog-related-head {
text-align: left;
}
}
@media (max-width: 991.98px) {
.tb-about-hero-card,
.tb-res-hero-card,
.tb-contact-hero-card,
.tb-careers-hero-card {
min-height: var(--tb-page-banner-hero-min-height-tablet);
padding: 6rem 1.5rem 1.5rem;
}
.tb-about-hero-copy,
.tb-res-hero-copy,
.tb-contact-hero-content,
.tb-careers-hero-copy {
max-width: min(100%, 31rem);
}
}
/* Mobile overflow fix for careers page */
@media (max-width: 768px) {
.tb-careers-shell {
overflow-x: hidden;
}
.tb-res-shell {
overflow-x: hidden;
}
.tb-about-hero,
.tb-res-hero,
.tb-contact-hero,
.tb-careers-hero {
padding: 0;
overflow-x: hidden;
}
body {
overflow: auto !important;
}
.tb-about-hero-card,
.tb-res-hero-card,
.tb-contact-hero-card,
.tb-careers-hero-card {
min-height: var(--tb-page-banner-hero-min-height-mobile);
padding: 110px 1rem 1.2rem;
gap: 0;
border-radius: 0;
overflow-x: hidden;
}
.tb-about-hero-copy,
.tb-res-hero-copy,
.tb-contact-hero-content,
.tb-careers-hero-copy {
max-width: min(100%, 23rem);
overflow-x: hidden;
}
.tb-about-hero-card::after,
.tb-res-hero-card::after,
.tb-contact-hero-card::after,
.tb-careers-hero-card::after {
background: var(--tb-page-banner-hero-overlay-mobile);
}
.tb-about-section-head p {
margin-bottom: 0;
}
/* Additional mobile overflow fixes for careers page */
.tb-careers-apply,
.tb-careers-culture,
.tb-careers-roles {
overflow-x: hidden;
}
.tb-careers-apply-card {
overflow-x: hidden;
}
.tb-careers-form-grid {
overflow-x: hidden;
}
.tb-careers-culture-track {
overflow-x: hidden;
}
.tb-careers-select-menu {
overflow-x: hidden;
}
.tb-about-hero-art img,
.tb-res-hero-art img,
.tb-contact-hero-art img,
.tb-careers-hero-art img {
width: 100%;
height: 100%;
}
.tb-res-filter {
flex-direction: column;
align-items: flex-start;
}
.functional-modules-shell {
grid-template-columns: 1fr 1fr;
}
.tb-careers-apply,
.tb-careers-culture,
.tb-careers-roles {
overflow-x: hidden;
overflow-y: clip;
}
.tb-careers-role-grid {
grid-template-columns: 1fr;
}
}