/* ==========================================================================
   Double A Solutions — style.css
   Sections in source order: base, utilities, buttons, header, hero,
   CRM mock, trusted strip, responsive.
   Design tokens (from Figma):
     --blue        #0057ff   primary CTA / accent
     --blue-ink    #0052cc   italic heading accent
     --amber       #fdc018   hero primary CTA
     --ink         #0a1628   headings
     --body        #3d4f6b   body copy
     --nav         #4a6272   inactive nav links
   ========================================================================== */

:root {
    --blue: #0057ff;
    --blue-ink: #0052cc;
    --blue-soft: #e8f0ff;
    --amber: #fdc018;
    --amber-hover: #eaad06;
    --ink: #0a1628;
    --ink-2: #0b1825;
    --body: #3d4f6b;
    --nav: #4a6272;
    --line: #e6ebf2;
    --card: #ffffff;
    --bg-soft: #f6f8fc;
}

/* === 1. Reset / base === */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font: 400 18px/29px 'DM Sans', sans-serif;
    color: var(--body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

.main-wrapper {
    overflow-x: clip;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--blue);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--blue-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 .4em;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: #fff;
    padding: 10px 18px;
    z-index: 1000;
    border-radius: 0 0 8px 0;
}

.skip-link:focus {
    left: 0;
    color: #fff;
}
p:last-child{
	margin-bottom:0
}
p + .cta-btn{
	margin-top:20px
}
/* === 2. Utilities === */
.relative {
    position: relative;
}

.text_upper {
    text-transform: uppercase;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.container.long {
    max-width: 1420px;
}

.container.wide {
    max-width: 1320px;
}

.container.medium {
    max-width: 1090px
}

/* =========================================================================
   reveal.css — styles for reveal.js
   Paste into your stylesheet, or link this file.
   ========================================================================= */

/* Starting (hidden) state — applied by JS as .reveal */
.reveal {
    opacity: 0;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

/* Directional/scale starting transforms, keyed off data-reveal value */
.reveal[data-reveal="fade-up"],
.reveal[data-reveal=""],
.reveal:not([data-reveal]) {
    transform: translateY(28px);
}

.reveal[data-reveal="fade-down"] {
    transform: translateY(-28px);
}

.reveal[data-reveal="fade-left"] {
    transform: translateX(28px);
}

.reveal[data-reveal="fade-right"] {
    transform: translateX(-28px);
}

.reveal[data-reveal="zoom"] {
    transform: scale(.94);
}

.reveal[data-reveal="fade"] {
    transform: none;
}

/* Revealed (visible) state — reset to natural position */
.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Never leave content hidden if motion is reduced */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* === 3. Buttons === */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 400 18px/1.2 'DM Sans', sans-serif;
    padding: 15px 36px;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
    justify-content: center;
	text-transform:capitalize
}

.cta-btn span {
    font-size: 1.05em;
    line-height: 1;
}

.cta-btn.btn_blue {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 4px 11px rgba(0, 87, 255, .30);
}

.cta-btn.btn_blue:hover {
    background: var(--blue-ink);
    color: #fff;
    transform: translateY(-1px);
}

.cta-btn.btn_amber {
    background: var(--amber);
    color: #fff;
    box-shadow: 0 4.593px 22.967px 0 rgba(0, 87, 255, 0.30);
}

.cta-btn.btn_amber:hover {
    background: var(--amber-hover);
    color: #fff;
    transform: translateY(-1px);
}

.cta-btn.btn_ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.cta-btn.btn_ghost:hover {
    border-color: var(--blue);
    color: #fff;
    background: var(--blue);
}

/* === Header === */

.header-area {
    position: absolute;
    z-index: 20;
    padding: 16px 0;
    width: 100%
}

.header-inn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.header-logo {
    display: inline-flex;
}

.logo-mark .logo-word {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 1px;
    fill: var(--ink);
}

.logo-mark .logo-accent {
    fill: var(--blue);
}

.logo-mark .logo-sub {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 6px;
    fill: var(--ink);
}

.header-menu {
    display: flex;
    align-items: center;
    gap: 40px;
}

.mainmenu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 40px;
}

.mainmenu > ul > li > a {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 16px;
    color: var(--nav);
    position: relative;
    padding: 6px 0;
}

.mainmenu > ul > li > a:hover {
    color: var(--ink-2);
}

.mainmenu > ul > li > a.is-active {
    color: var(--ink-2);
}

.mainmenu > ul > li > a.is-active::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Mobile-only nav CTA: hidden on desktop regardless of vendor utilities */
.mainmenu-cta {
    display: none;
}

#menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform .25s ease, opacity .25s ease;
}

#menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

#menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

#menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* === Hero === */
.hero-area {
    position: relative;
    padding: 70px 0 40px;
    overflow: hidden;
    padding-top: 250px
}

.hero-swoosh {
    position: absolute;
    top: -120px;
    right: -160px;
    width: 1400px;
    height: 760px;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 120% at 80% 20%, rgba(0, 87, 255, .10), rgba(0, 87, 255, 0) 60%);
}

.hero-swoosh::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 760'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230057ff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%230057ff' stop-opacity='0.85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M120 760 C120 560 360 560 360 380 C360 230 620 250 760 250 C1040 250 1180 60 1400 20 L1400 200 C1220 230 1080 420 800 420 C620 420 540 400 540 540 C540 700 320 700 320 760 Z' fill='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
    opacity: .9;
}

.hero-text {
    max-width: 600px;
}

.hero-heading {
    font-size: 48px;
    line-height: 1.22;
    letter-spacing: -1.7px;
    color: var(--ink);
    margin-bottom: 24px;
}

.hero-heading em {
    font-style: italic;
    color: var(--blue-ink);
}

.hero-lead {
    font-size: 18px;
    line-height: 29px;
    color: var(--body);
    margin: 0 0 32px;
}

.hero-action {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.hero-visual {
    position: relative;
    padding: 30px 0 60px;
    min-height: 600px;
}

/* === CRM mock === */
.crm-mock {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 650px;
    margin-left: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(11, 24, 37, .18);
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
}

.crm-mock .bar {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: #e4e9f2;
}

.crm-mock .w40 {
    width: 40%;
}

.crm-mock .w50 {
    width: 50%;
}

.crm-mock .w55 {
    width: 55%;
}

.crm-mock .w60 {
    width: 60%;
}

.crm-mock .w65 {
    width: 65%;
}

.crm-mock .w70 {
    width: 70%;
}

.crm-mock .w75 {
    width: 75%;
}

.crm-mock .w80 {
    width: 80%;
}

.crm-mock .w90 {
    width: 90%;
}

.crm-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--blue);
    padding: 12px 18px;
}

.crm-avatar {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
}

.crm-name {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.crm-topbar .crm-line {
    width: 60px;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .45);
}

.crm-dots {
    margin-left: auto;
    display: flex;
    gap: 5px;
}

.crm-dots .d {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.crm-dots .d1 {
    background: #f5a623;
}

.crm-dots .d2 {
    background: #2ecc71;
}

.crm-dots .d3 {
    background: #9b59b6;
}

.crm-dots .d4 {
    background: #34495e;
}

.crm-body {
    display: flex;
}

.crm-side {
    width: 170px;
    flex-shrink: 0;
    padding: 14px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crm-side-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.crm-side-card.is-active {
    background: var(--blue-soft);
    border-color: #cdddff;
}

.crm-side-card .t {
    font-size: 9px;
    letter-spacing: .06em;
    color: #8a99ad;
    font-weight: 700;
}

.crm-side-card strong {
    font-size: 11px;
    color: var(--ink);
}

.crm-side-card .row-dot {
    display: flex;
    align-items: center;
    gap: 7px;
}

.crm-side-card .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.crm-side-card .dot.g {
    background: #2ecc71;
}

.crm-side-card .dot.y {
    background: #f5a623;
}

.crm-side-card .dot.b {
    background: var(--blue);
}

.crm-main {
    flex: 1;
    padding: 16px 18px;
    min-width: 0;
}

.crm-main-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.crm-main-head .tab {
    font-size: 11px;
    font-weight: 700;
    color: var(--blue);
}

.crm-main-head .bar {
    flex: 0 0 40px;
}

.crm-main-head .seg {
    margin-left: auto;
    display: inline-flex;
    background: #f0f3f9;
    border-radius: 6px;
    padding: 2px;
}

.crm-main-head .seg i {
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    color: #8a99ad;
    padding: 3px 7px;
    border-radius: 4px;
}

.crm-main-head .seg i.on {
    background: var(--blue);
    color: #fff;
}

.crm-select-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.crm-select {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
    background: #eef2f8;
    border-radius: 6px;
    padding: 7px 10px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.crm-input {
    flex: 1;
    background: #f4f6fa;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.crm-chart-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
}

.crm-chart-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.crm-chart-top .lbl {
    font-size: 9px;
    letter-spacing: .06em;
    color: #8a99ad;
    font-weight: 700;
}

.crm-chart-top .amt {
    font-size: 20px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pill {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
}

.pill.up {
    background: #e3f9ec;
    color: #1aa85a;
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 9px;
    color: #8a99ad;
}

.legend span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend .sw {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.legend .sw.b {
    background: var(--blue);
}

.legend .sw.g {
    background: #c7d0dd;
}

.crm-chart {
    position: relative;
    margin: 6px 0 4px;
}

.crm-chart svg {
    width: 100%;
    height: 150px;
    display: block;
}

.crm-chart line {
    stroke: #eef1f6;
    stroke-width: 1;
}

.crm-chart .grid-v {
    stroke: #c9d4e6;
    stroke-width: 1;
    stroke-dasharray: 3 3;
    fill: none;
}

.crm-chart .area {
    fill: rgba(0, 87, 255, .08);
}

.crm-chart .dash {
    fill: none;
    stroke: #c7d0dd;
    stroke-width: 2;
    stroke-dasharray: 4 4;
}

.crm-chart .solid {
    fill: none;
    stroke: var(--blue);
    stroke-width: 2.5;
}

.crm-chart .node {
    fill: #fff;
    stroke: var(--blue);
    stroke-width: 2.5;
}

.crm-chart .node.fill {
    fill: var(--blue);
}

.crm-tip {
    position: absolute;
    top: 22%;
    left: 60%;
    background: var(--ink);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 5px;
    white-space: nowrap;
}

.crm-tag {
    position: absolute;
    top: 44%;
    left: 30%;
    background: #2ecc71;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
}

.crm-axis {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: #aab4c4;
    margin-top: 4px;
}

.crm-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.crm-foot .lbl {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
}

.crm-foot .bar {
    flex: 1;
}

.crm-foot .muted {
    font-size: 9px;
    color: #aab4c4;
}

.crm-save {
    background: var(--blue);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 6px;
}

/* Floating cards */
.crm-float {
    position: absolute;
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(11, 24, 37, .18);
    font-family: 'DM Sans', sans-serif;
}

.crm-float .bar {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #e4e9f2;
}

.crm-float .w55 {
    width: 55%;
}

.crm-float .w70 {
    width: 70%;
}

.crm-float .w75 {
    width: 75%;
}

.crm-float .w90 {
    width: 90%;
}

.crm-float-pipeline {
    left: -10px;
    bottom: 70px;
    width: 230px;
    padding: 12px;
}

.cf-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 10px;
}

.cf-head .cf-ico {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--blue);
}

.cf-head .cf-sub {
    margin-left: auto;
    font-size: 8px;
    color: #aab4c4;
    font-weight: 600;
}

.cf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 6px;
}

.cf-row.is-active {
    border: 1px solid var(--blue);
}

.cf-row .chk,
.cf-row .box {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex-shrink: 0;
}

.cf-row .chk {
    background: var(--blue);
}

.cf-row .box {
    border: 1px solid #cdd5e1;
}

.cf-row .bar {
    flex: 1;
}

.cf-row .badge {
    font-size: 6px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: .04em;
}

.cf-row .badge.done {
    background: #e3f9ec;
    color: #1aa85a;
}

.cf-row .badge.prog {
    background: var(--blue-soft);
    color: var(--blue);
}

.cf-row .badge.todo {
    background: #f0f3f9;
    color: #8a99ad;
}

.crm-float-uptime {
    right: -10px;
    top: 80px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
}

.cu-ico {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.cu-text {
    line-height: 1.1;
}

.cu-text strong {
    display: block;
    font-size: 22px;
    color: var(--ink);
}

.cu-text {
    font-size: 13px;
    color: #8a99ad;
}

/* === Trusted strip (marquee) === */
.trusted-area {
    padding-top: 70px;
}

.trusted-title {
    text-align: center;
    font-size: 14px;
    letter-spacing: .12em;
    color: #0B1825;
    margin: 0 0 28px;
    font-weight: 500;
    display: block
}

.trusted-marquee {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    /* fade the edges so logos slide in/out softly */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.trusted-marquee:hover .trusted-track {
    animation-play-state: paused;
}

.trusted-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 70px;
    padding-right: 70px;
    /* keeps spacing even across the seam */
    animation: trusted-scroll 32s linear infinite;
}

.trusted-logo {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #c2cad6;
    white-space: nowrap;
    transition: color .2s ease;
}

.trusted-track li:hover .trusted-logo {
    color: #94a0b0;
}

@keyframes trusted-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trusted-track {
        animation: none;
    }

    .trusted-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .trusted-track[aria-hidden="true"] {
        display: none;
    }
}

/* === Trusted SaaS & Automation === */
.saas-area {
    padding: 70px 0;
    position: relative;
    z-index: 9
}

.saas-shape {
    position: absolute;
    left: 0;
    top: 0;
    width: 73%;
    height: 75%;
    z-index: -9;
}

.saas-head {
    max-width: 880px;
    margin: 0 auto 50px;
}

.saas-heading {
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: -1.7px;
    color: var(--ink);
    margin-bottom: 18px;
}

.saas-heading em {
    font-style: italic;
    color: var(--blue-ink);
}

.saas-intro {
    font-size: 18px;
    line-height: 29px;
    color: var(--body);
    margin: 0;
}

.saas-stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.saas-stat {
    text-align: left;
}

.saas-stat-num {
    display: block;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--ink);
    margin-bottom: 12px;
}

.saas-stat-label {
    display: block;
    font-size: 16px;
    line-height: 1.45;
    color: var(--body);
}

.saas-split {
    display: flex;
    align-items: center;
    gap: 50px;
}

.saas-split-col {
    flex: 1 1 0;
    min-width: 0;
}

.saas-cards {
    display: flex;
    gap: 24px;
}

.saas-cards .value-card {
    flex: 1 1 0;
}

.value-card {
    height: 100%;
    background: #fff;
    border: 1px solid #E2E8F5;
    border-radius: 16px;
    padding: 30px;
}

.value-card-icon {
    position: relative;
    width: 53px;
    height: 53px;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 26px;
}

/* Fallback glyph shown only if the icon font fails to load */
.value-card-icon::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-radius: 5px;
}

.value-card-icon em {
    position: absolute;
    background: var(--blue-soft);
    padding: 4px;
    border-radius: 4px;
}

.value-card-title {
    font-size: 24px;
    color: var(--ink);
    margin-bottom: 12px;
}

.value-card p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--body);
    margin: 0;
}

.saas-copy {
    padding-left: 20px;
}

.saas-copy-heading {
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: -1.7px;
    color: var(--ink);
    margin-bottom: 22px;
}

.saas-copy p {
    font-size: 18px;
    line-height: 29px;
    color: var(--body);
    margin: 0 0 28px;
}

.saas-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--blue);
}

.saas-link span {
    transition: transform .2s ease;
}

.saas-link:hover span {
    transform: translateX(4px);
}

/* === Custom Software (Services) === */
.bg_dark {
    background: #070d1a;
}

.services-area {
    padding: 90px 0;
}

.services-head {
    max-width: 760px;
    margin: 0 auto 50px;
}

.services-heading {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: -1.7px;
    color: #fff;
    margin-bottom: 16px;
}

.services-heading em {
    font-style: italic;
    font-weight: 700;
    color: var(--blue);
}

.services-subline {
    font-size: 18px;
    line-height: 29px;
    color: rgba(255, 255, 255, .55);
    margin: 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.service-card {
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color .2s ease, transform .2s ease;
    height: 100%
}

.service-card:hover {
    border-color: rgba(58, 123, 255, .45);
    transform: translateY(-3px);
}

.service-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.24;
    color: #fff;
    margin-bottom: 12px;
}

.service-card p {
    font-size: 15px;
    line-height: 26px;
    color: rgba(255, 255, 255, .5);
    margin: 0 0 18px;
}

.service-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #3a7bff;
}

.service-link span {
    transition: transform .2s ease;
}

.service-link:hover {
    color: #5a92ff;
}

.service-link:hover span {
    transform: translateX(4px);
}

/* === Portfolio === */
.divider .divide {
    width: 56px;
    height: 2px;
    background: #DDE3FD;
    border-radius: 2px;
    display: block;
    margin: 0 auto
}

.joint-ventures {
    padding: 90px 0 150px;
    position: relative
}

.portfolio-area {
    padding: 90px 0;
    background: #fff;
    position: relative;
    overflow: hidden
}

.portfolio-area .container {
    position: relative;
    z-index: 9
}

.pf-area-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
    z-index: 1
}

.pf-area-shape {
    position: absolute;
    bottom: -20%;
    left: -10%;
}

.pf-wht-shape-left {
    position: absolute;
    left: 0;
    top: 20%;
    width: 255px;
    height: 152px;
    background: #FFF;
    filter: blur(50px);
    z-index: 9;
}

.pf-wht-shape-right {
    position: absolute;
    right: 0;
    bottom: 25%;
    width: 255px;
    height: 152px;
    background: #FFF;
    filter: blur(50px);
    z-index: 9;
}

.portfolio-head {
    margin: 0 0 44px;
}

.portfolio-heading {
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: -1.7px;
    color: var(--ink);
    margin-bottom: 14px;
}

.portfolio-subline {
    font-size: 18px;
    line-height: 29px;
    color: var(--body);
    margin: 0;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.portfolio-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 38px;
    box-shadow: -10px 16px 40px rgba(11, 24, 37, .04);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: -10px 22px 50px rgba(11, 24, 37, .10);
}

.portfolio-blob {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 146px;
    height: 146px;
    border-bottom-left-radius: 100%;
    background: linear-gradient(135deg, rgba(0, 82, 204, 0) 0%, rgba(0, 82, 204, .05) 100%);
    opacity: 0;
    pointer-events: none;
}

.portfolio-card:hover .portfolio-blob {
    opacity: 1
}

/* Logo placeholders — swap each for the real product logo <img> */
.portfolio-logo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 91px;
    justify-content: center;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1;
    color: var(--ink);
    letter-spacing: -.5px;
    align-items: flex-start
}

.portfolio-logo b {
    font-weight: 800;
    color: var(--blue);
}

.portfolio-logo i {
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--ink);
    margin-top: 6px;
}

.portfolio-tagline {
    font-size: 15px;
    line-height: 27px;
    color: #172b4d;
    margin: 32px 0 0;
}

.portfolio-link {
    margin-top: 36px;
    padding-top: 20px;
    width: 100%;
    border-top: 1px solid #dfe1e6;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #0A1628;
}

.portfolio-card:hover .portfolio-link {
    color: #3A7BFF
}

.portfolio-link span {
    transition: transform .2s ease;
}


.portfolio-link:hover span {
    transform: translateX(4px);
}

/* Wide CTA card — spans the final two columns */
.portfolio-cta {
    position: relative;
    overflow: hidden;
    grid-column: span 2;
    background: #0d1b2e;
    border-radius: 14px;
    padding: 60px 64px;
    display: flex;
    align-items: center;
    height: 100%
}

.portfolio-cta-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.portfolio-cta-rings {
    position: absolute;
    right: 0;
    top: 0
}

.portfolio-cta-text {
    color: #A4BCF5 !important;
    display: block
}

.portfolio-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.portfolio-cta-title {
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -1.4px;
    color: #fff;
    margin-bottom: 14px;
}

.portfolio-cta-text {
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, .6);
    margin: 0 0 28px;
}

/* === Product Standard (Testimonial) === */
.standard-area {
    padding: 90px 0;
    background: linear-gradient(to bottom, #ebf2ff 0%, rgba(235, 242, 255, 0) 70%);
    padding-bottom: 50px
}

.standard-heading {
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: -1.7px;
    color: var(--ink);
    margin: 0 auto 60px;
}

.standard-slider {
    position: relative;
    display: grid;
}

/* All slides stack in the same grid cell; active one fades in */
.standard-slide {
    grid-area: 1 / 1;
    pointer-events: none;
}



.standard-split {
    display: flex;
    align-items: center;
    gap: 80px;
}

.standard-media {
    position: relative;
    flex: 0 0 420px;
    max-width: 420px;
}

/* Blue circle backing + circular photo mask */
.standard-photo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(160deg, #3a7bff 0%, #0057ff 100%);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Silhouette placeholder shown until a real portrait is dropped in */
.standard-photo::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 62%;
    height: 78%;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .35) 0 18%, transparent 19%),
        linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22));
    -webkit-mask: radial-gradient(circle at 50% 22%, #000 0 18%, transparent 19%), linear-gradient(#000 0 0);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}

.standard-photo img {
    position: relative;
    width: 94%;
    height: 100%;
    object-fit: cover;
    object-position: bottom center;
}

/* Decorative plus-mark sparkle, top-left */
.standard-sparkle {
    position: absolute;
    top: 6%;
    left: -4%;
    width: 70px;
    height: 70px;
    z-index: 2;
    pointer-events: none;
    background-image:
        linear-gradient(var(--blue), var(--blue)),
        linear-gradient(var(--blue), var(--blue)),
        linear-gradient(var(--blue), var(--blue)),
        linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-size: 16px 3px, 3px 16px, 11px 2.5px, 2.5px 11px;
    background-position: 6px 12px, 12px 6px, 44px 44px, 49px 39px;
    opacity: .85;
}

/* Floating checklist card, bottom-left */
.standard-float {
    position: absolute;
    left: -28px;
    bottom: 22%;
    z-index: 3;
    width: 185px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(11, 24, 37, .16);
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.standard-float .sf-bar {
    display: flex;
    align-items: center;
    gap: 9px;
}

.standard-float .bar {
    height: 6px;
    border-radius: 3px;
    background: #e4e9f2;
    flex: 1;
}

.standard-float .w45 {
    max-width: 45%;
}

.standard-float .w65 {
    max-width: 65%;
}

.standard-float .w70 {
    max-width: 70%;
}

.standard-float .w80 {
    max-width: 80%;
}

.standard-float .chk {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #cdd5e1;
    flex-shrink: 0;
}

.standard-float .chk.done {
    background: var(--blue);
    border-color: var(--blue);
    position: relative;
}

.standard-float .chk.done::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1.5px;
    width: 4px;
    height: 7px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.standard-copy {
    flex: 1 1 0;
    min-width: 0;
}

.standard-quote {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 40px;
    line-height: 1.18;
    color: #172b4d;
    margin: 0 0 28px;
}

.standard-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .14em;
    color: #8a99ad;
    margin: 0;
}

/* Slider dots */
.standard-dots {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.standard-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d4dbe6;
    cursor: pointer;
    transition: width .25s ease, background-color .25s ease;
}

.standard-dot.is-active {
    width: 28px;
    border-radius: 5px;
    background: var(--blue);
}

/* === Playbook Cards === */
.playbook-area {
    padding: 0 0;
    background: #fff;
}

.playbook-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.playbook-card {
    background: #fff;
    border: 1px solid rgba(66, 82, 110, .13);
    border-radius: 10px;
    padding: 40px 34px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    height: 100%
}

.playbook-card:hover {
    border-color: rgba(58, 123, 255, .35);
    box-shadow: 0 16px 40px rgba(11, 24, 37, .06);
    transform: translateY(-3px);
}

.playbook-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.24;
    color: var(--ink);
    margin-bottom: 12px;
}

.playbook-liner {
    margin: 0 auto
}

.playbook-card p {
    font-size: 15px;
    line-height: 26px;
    color: #42526e;
    margin: 0 0 18px;
}

.playbook-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #3a7bff;
}

.playbook-link span {
    transition: transform .2s ease;
}

.playbook-link:hover {
    color: #5a92ff;
}

.playbook-link:hover span {
    transform: translateX(4px);
}

/* === Careers (Culture) === */
.careers-area {
    padding: 90px 0;
    position: relative
}

.careers-split {
    display: flex;
    align-items: center;
    gap: 70px;
}

.careers-shape {
    position: absolute;
    right: 0;
    top: -70px;
    z-index: -1;
    width: 60%;
    height: 75%
}


.careers-heading {
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: -1.7px;
    color: var(--ink);
    margin-bottom: 20px;
}

.careers-text {
    font-size: 17px;
    line-height: 28px;
    color: var(--body);
    margin: 0 0 34px;
}

.values-list {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    column-gap: 48px;
}

.values-list .col-lg-6 .value-item:last-child {
    border-bottom: none
}

.value-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0 14px;
    border-bottom: 1px solid #dfe1e6;
    break-inside: avoid;
    line-height: 140%
}

.value-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e6effc;
    color: var(--ink);
    font-family: 'DM Sans', monospace;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-text {
    font-size: 14px;
    font-weight: 600;
    color: #172b4d;
}

.careers-action {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Photo collage — overlapping angled frames */


.collage-photo {
    position: absolute;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, #dbe6ff, #b9cdf5);
    box-shadow: 0 22px 50px rgba(11, 24, 37, .16);
}

.collage-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.collage-photo.cp-1 {
    width: 56%;
    height: 62%;
    top: 0;
    left: 4%;
    transform: rotate(-4deg);
    z-index: 1;
}

.collage-photo.cp-2 {
    width: 50%;
    height: 56%;
    top: 18%;
    right: 0;
    transform: rotate(3deg);
    z-index: 3;
}

.collage-photo.cp-3 {
    width: 52%;
    height: 50%;
    bottom: 0;
    left: 14%;
    transform: rotate(2deg);
    z-index: 2;
}

/* === Community === */
.community-area {
    padding: 90px 0;
    background: #fff;
}

.community-head {
    margin-bottom: 40px;
}

.community-eyebrow {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .14em;
    color: #6b778c;
    margin-bottom: 14px;
}

.community-heading {
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: -1.7px;
    color: var(--ink);
    margin: 0;
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.community-card {
    background: #f4f5f7;
    border: 1px solid #dfe1e6;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
    height: 100%
}

.community-card:hover {
    box-shadow: 0 18px 44px rgba(11, 24, 37, .10);
    transform: translateY(-3px);
}

.community-photo {
    display: block;
    height: 270px;
    background: #dfe1e6;
    overflow: hidden;
}

.community-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.community-body {
    border-top: 1px solid #dfe1e6;
    padding: 28px;
}

.community-card-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.5;
    color: #172b4d;
    margin: 0;
}

.community-org {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: .1em;
    color: #6b778c;
    margin: 0 0 14px;
}

.community-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #42526e;
    margin: 0;
}

.community-foot {
    margin-top: 28px;
    text-align: right;
}

.community-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #172B4D;
    font-weight: 500
}

.community-link span {
    transition: transform .2s ease;
}

.community-link:hover span {
    transform: translateX(4px);
}

/* === FAQ === */
.container.smalls {
    max-width: 1080px;
}

.faq-area {
    padding: 80px 0 90px;
    background: linear-gradient(to bottom, #ebf2ff 0%, rgba(235, 242, 255, 0) 70%);
}

.faq-area.v2 {
    padding-top: 100px;
    background: #fff;
    position: relative
}

.faq-area.v2 .container {
    position: relative;
    z-index: 9
}

.faq-area.v2::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #ebf2ff 0%, rgba(235, 242, 255, 0) 70%);
}

.faq-heading {
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: -1.2px;
    color: var(--ink);
    margin: 0 auto 36px;
}

.faq-item {
    border-bottom: 1px solid #dfe1e6;
}

.faq-q {
    width: 100%;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    padding: 24px 4px 25px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 17px;
    color: #172b4d;
}

/* +/× icon built in CSS */
.faq-icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background: #6b778c;
    transition: transform .25s ease, opacity .25s ease;
}

.faq-icon::before {
    top: 8px;
    left: 0;
    width: 18px;
    height: 2px;
}

/* horizontal */
.faq-icon::after {
    left: 8px;
    top: 0;
    width: 2px;
    height: 18px;
}

/* vertical */
.faq-q[aria-expanded="true"] .faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-q[aria-expanded="true"] .faq-icon::before {
    background: var(--blue);
}

.faq-q[aria-expanded="true"] {
    color: var(--blue-ink);
}

.faq-a {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}

.faq-a-inner {
    padding: 0 4px 24px;
}

.faq-a-inner p {
    margin: 0;
    font-size: 16px;
    line-height: 27px;
    color: #42526e;
    max-width: 90%;
}

/* === Footer === */
.footer-area {
    background: #0a1628;
    color: rgba(255, 255, 255, .8);
    padding: 70px 0 0;
    position: relative;
}

.footer-area .container {
    position: relative;
    z-index: 9
}

.footer-shape {
    position: absolute;
    width: 75%;
    height: 100%;
    left: 50px;
    top: 0
}

.footer-top {
    padding-bottom: 30px;
}

.footer-logo {
    display: inline-flex;
    margin-bottom: 26px;
}

.flogo-word {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 1px;
    fill: #fff;
}

.flogo-accent {
    fill: var(--blue);
}

.flogo-sub {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 6px;
    fill: var(--blue);
}

.footer-tagline {
    font-size: 15px;
    line-height: 24px;
    color: rgba(255, 255, 255, .75);
    margin: 0;
    max-width: 320px;
}

.footer-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue);
    margin: 0 0 22px;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col li {
    margin-bottom: 6px;
}

.footer-col a {
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
    transition: color .2s ease;
}

.footer-col a:hover {
    color: #fff;
}

.footer-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-badge {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #006644;
    background: #E3FCEF;
    padding: 4px 7px;
    border-radius: 4px;
    border: 1px solid #ABF5D1;
    line-height: 100%;
}

/* Social row — right aligned, below the columns */
.footer-social-row {
    display: flex;
    justify-content: flex-end;
    padding: 0px 0 40px;
}

.footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 9px;
}





/* Letter fallback if the icon font fails (real glyph sits on top) */

.footer-social a::after {
    position: absolute;
    z-index: 0;
}

.footer-social a em {
    position: relative;
    z-index: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0 30px;
}

.footer-bottom .footer-legal {
    justify-content: flex-end;
}

/* Fallback layout when Bootstrap grid is unavailable */
.no-bs .footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
}

.no-bs .footer-brand {
    flex: 0 0 320px;
}

.no-bs .footer-top > [class*="col-"]:not(.footer-brand) {
    flex: 1 1 0;
}

.no-bs .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.footer-copyright {
    margin: 0;
    font-family: 'DM Sans', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b778c;
}

.footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-legal a {
    font-family: 'DM Sans', ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6b778c;
    transition: color .2s ease;
}

.footer-legal a:hover {
    color: #fff;
}

.footer-legal li[aria-hidden] {
    color: rgba(255, 255, 255, .3);
}

.footer-top-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b778c;
}

.divider {
    padding: 0
}

/* === Custom Css === */
.header-logo-badge {
    display: flex;
    align-items: center;
}

.header-logo {
    margin-right: 16px;
    width: 160px;
}

.header-badge {
    width: 100px
}

.header-area {
    border-bottom: 1px solid rgba(11, 24, 37, 0.13)
}

.hero-bg {
    position: absolute;
    width: 80%;
    height: 100%;
    object-fit: cover;
    left: 50px;
    top: 0
}

.hero-shape {
    position: absolute;
    width: 75%;
    height: 100%;
    object-fit: cover;
    right: 0;
    top: 0;
}

.value-icon {
    margin-bottom: 16px;
    display: block
}

.saas-area {
    background: linear-gradient(0deg, rgba(235, 242, 255, 0) 0%, #ebf2ff 80%);
    position: relative
}

.saas-head-liner {
    margin: 0 auto 30px
}

.about-area {
    padding-top: 30px;
    padding-bottom: 70px
}

.company-photo {
    width: 100%;
    margin-top: -70px
}

.services-area {
    position: relative;
    background: #0A1628;
    padding-top: 0;
    margin-top: -310px
}

.services-area .container {
    position: relative;
    z-index: 9
}

.service-shape {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -270px;
    left: 0;
    z-index: 9
}

.services-subline {
    color: #A4BCF5
}

.portfolio-head {
    position: relative
}

.portfolio-head-image {
    position: absolute;
    right: 0;
    bottom: -70px;
}

.footer-cta-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    height: 300px;
}

.call-to-action {
    background: #102545;
    padding: 50px;
    border-radius: 10px;
    position: relative
}

.cta-image {
    position: absolute;
    right: 50px;
    bottom: 0;
    width: 56%
}

.call-to-action .inner {
    color: #A4BCF5
}

.call-to-action .heading {
    font-size: 42px
}

.careers-collage {
    min-width: 800px;
    max-width: 800px
}

.careers-collage.left-align {
    float: right
}

.careers-shape.left-align {
    left: 0;
    right: auto;
    transform: scaleX(-1);
}

.our-mission {
    position: relative;
    padding-bottom: 90px;
    margin-top: -99px;
    z-index: 99;
    background: #0A1628
}

.mission-shape-left {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -9;
    height: 100%;
    width: 40%;
}

.mission-shape-right {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -9;
    height: 100%;
    width: 40%;
}

.our-mission-text .heading {

    color: #fff;
    font-family: Fraunces;
    font-size: 40px;
    font-weight: 400;

}

.our-mission-text .title {
    color: #6BA6FF;
    margin-bottom: 24px;
    display: inline-block;
    letter-spacing: 3.52px;
    font-weight: 700;
    position: relative;
    padding-left: 40px
}

.our-mission-text .title::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 2px;
    background: #6BA6FF;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

.story-shape {
    position: absolute;
    width: 100%;
    height: 320px;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.story-photo {
    position: relative;

}

.story-area {
    position: relative;
    z-index: 99
}

.z_99 {
    position: relative;
    z-index: 99
}

.footer-contact {
    margin-top: 30px;
}

.footer-contact ul {
    padding: 0;
    list-style: none
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px
}

.footer-contact li em {
    margin-right: 12px;
    min-width: 20px;
    position: relative;
    top: 3px
}

.footer-contact li a {
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
    transition: color .2s ease;
    display: block;
    line-height: 160%
}

.footer-contact li a:hover {
    color: #fff
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    color: #fff;
    border: 1px solid #e4e6ef42;
    font-size: 20px;
    transition: all 0.4s
}

.footer-social a:hover {
    background: #fff;
    color: var(--blue)
}

/* === Responsive === */
@media (max-width: 1199.98px) {
    .hero-heading {
        font-size: 48px;
    }

    .crm-mock {
        max-width: 560px;
    }

    .header-menu {
        gap: 24px;
    }

    .mainmenu > ul {
        gap: 26px;
    }
}

@media (max-width: 991.98px) {
    #menu-toggle {
        display: inline-flex;
    }

    .header-menu {
        gap: 12px;
    }

    .header-nav .cta-btn {
        display: none;
    }

    .mainmenu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--line);
        box-shadow: 0 20px 40px rgba(11, 24, 37, .10);
        padding: 16px 20px 24px;
        display: none;
        z-index: 30;
    }

    .mainmenu.is-open {
        display: block;
    }

    .mainmenu > ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mainmenu > ul > li {
        width: 100%;
    }

    .mainmenu > ul > li > a {
        display: block;
        padding: 12px 0;
        font-size: 18px;
    }

    .mainmenu > ul > li > a.is-active::before {
        display: none;
    }

    .mainmenu-cta {
        display: block;
        margin-top: 14px;
    }

    .mainmenu-cta .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .hero-area {
        padding: 100px 0 20px;
    }

    .hero-heading {
        font-size: 40px;
    }

    .hero-text {
        max-width: none;
    }

    .hero-action {
        margin-bottom: 10px;
    }

    .saas-area {
        padding: 50px 0;
    }

    .saas-heading,
    .saas-copy-heading {
        font-size: 38px;
    }

    .saas-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .saas-stat-num {
        font-size: 52px;
    }

    .saas-split {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
    }

    .saas-copy {
        padding-left: 0;
    }

    .services-area {
        padding: 60px 0;
    }

    .services-heading {
        font-size: 38px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-head-image {
        display: none
    }

    .portfolio-area {
        padding: 60px 0;
    }

    .portfolio-heading {
        font-size: 38px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-cta {
        grid-column: span 2;
        padding: 48px;
    }

    .portfolio-cta-title {
        font-size: 36px;
    }

    .standard-area {
        padding: 60px 0;
    }

    .standard-heading {
        font-size: 38px;
        margin-bottom: 44px;
    }

    .standard-split {
        flex-direction: column;
        gap: 56px;
    }

    .standard-media {
        flex-basis: auto;
        width: 360px;
        max-width: 80%;
        margin: 0 auto;
    }

    .standard-quote {
        font-size: 32px;
        text-align: center;
    }

    .standard-label {
        text-align: center;
    }

    .standard-copy {
        width: 100%;
    }

    .playbook-area {
        padding: 0 0 60px;
    }

    .playbook-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .careers-area {
        padding: 60px 0;
    }

    .careers-heading {
        font-size: 36px;
    }

    .careers-split {
        flex-direction: column;
        gap: 48px;
    }

    .careers-content {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }


    .community-area {
        padding: 60px 0;
    }

    .community-heading {
        font-size: 38px;
    }

    .community-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-social-row {
        justify-content: center
    }

    .community-foot {
        text-align: center
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 16px;
        line-height: 26px;
    }

    .hero-heading {
        font-size: 22px;
        letter-spacing: -1px;
    }

    .hero-lead {
        font-size: 16px;
        line-height: 26px;
    }

    .cta-btn {
        padding: 13px 26px;
        font-size: 16px;
    }

    .hero-action .cta-btn {
        flex: 1 1 100%;
        justify-content: center;
    }

    .trusted-track {
        gap: 40px;
        padding-right: 40px;
    }

    .trusted-logo {
        font-size: 18px;
    }

    .saas-heading,
    .saas-copy-heading {
        font-size: 30px;
    }

    .saas-intro,
    .saas-copy p {
        font-size: 16px;
        line-height: 26px;
    }

    .saas-stats {
        gap: 26px;
        padding-left: 0
    }

    .saas-stat {
        text-align: center;
    }

    .saas-stat-num {
        font-size: 40px;
    }

    .saas-cards {
        flex-direction: column;
    }

    .value-card {
        padding: 24px;
    }

    .value-card-title {
        font-size: 22px;
    }

    .services-heading {
        font-size: 30px;
    }

    .services-subline {
        font-size: 16px;
        line-height: 26px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        padding: 30px 24px;
    }

    .portfolio-heading {
        font-size: 30px;
    }

    .portfolio-subline {
        font-size: 16px;
        line-height: 26px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-card {
        padding: 30px 26px;
    }

    .portfolio-cta {
        grid-column: span 1;
        padding: 36px 26px;
    }

    .portfolio-cta-title {
        font-size: 28px;
    }

    .portfolio-cta-text {
        font-size: 16px;
        line-height: 26px;
    }

    .portfolio-cta .cta-btn {
        width: 100%;
        justify-content: center;
    }

    .playbook-card-title {
        font-size: 18px
    }

    .standard-heading {
        font-size: 28px;
        margin-bottom: 36px;
    }

    .standard-quote {
        font-size: 26px;
    }

    .standard-media {
        width: 280px;
    }

    .standard-float {
        width: 150px;
        left: -14px;
        padding: 12px 11px;
    }

    .playbook-grid {
        grid-template-columns: 1fr;
    }

    .playbook-card {
        padding: 30px 26px;
    }

    .careers-heading {
        font-size: 28px;
    }

    .careers-text {
        font-size: 16px;
        line-height: 26px;
    }

    .values-list {
        columns: 1;
        margin-bottom: 28px;
    }

    .careers-action .cta-btn {
        flex: 1 1 100%;
        justify-content: center;
    }


    .community-heading {
        font-size: 30px;
    }

    .community-grid {
        grid-template-columns: 1fr;
    }

    .community-photo {
        height: 240px;
    }

    .community-foot {
        text-align: center;
    }

    .faq-area {
        padding: 50px 0 60px;
    }

    .faq-heading {
        font-size: 28px;
    }

    .faq-q {
        font-size: 16px;
        gap: 16px;
    }

    .faq-a-inner p {
        max-width: 100%;
        font-size: 15px;
        line-height: 25px;
    }

    .footer-area {
        padding-top: 60px;
    }

    .no-bs .footer-top {
        gap: 36px 50px;
    }

    .no-bs .footer-social-row {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    .logo-mark {
        width: 190px;
        height: 50px;
    }

    .no-bs .footer-top {
        flex-direction: column;
        gap: 28px;
    }

    .no-bs .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom .footer-legal {
        justify-content: flex-start;
    }

    .footer-legal {
        flex-wrap: wrap;
    }

    .values-list .col-lg-6 .value-item:last-child {
        border-bottom: 1px solid #dfe1e6
    }

    .careers-collage {
        min-width: 325px;
        max-width: 400px;
        margin-bottom: 20px
    }
}

section.error-page.text-center {
    padding-top: 200px;
    padding-bottom: 100px;
}
.error-page .h1 {
    font-size: 100px;
    margin-bottom: 0;
	font-weight:700
}
/*Custom Responsive*/

@media (min-width: 2133px) {
    .services-area {
        margin-top: -365px
    }

    .story-shape {
        height: 385px
    }
}

@media (min-width: 1921px) and (max-width: 2133px) {
    .story-shape {
        height: 385px
    }
}

@media (min-width: 2134px) and (max-width: 2400px) {
    .hero-shape {
        width: 70%
    }

    .saas-shape {
        width: 80%;
        height: auto;
        top: -19%;
        left: -2%;
    }

    .services-area {
        margin-top: -440px;
    }

    .story-shape {
        height: 385px
    }
}

@media (min-width: 2401px) and (max-width: 2743px) {
    .hero-shape {
        width: 70%;
    }

    .saas-shape {
        width: 80%;
        height: auto;
        top: -19%;
        left: -2%;
    }

    .services-area {
        margin-top: -490px
    }

    .story-shape {
        height: 385px
    }
}

@media (min-width: 2744px) {
    .hero-shape {
        width: 70%;
    }

    .saas-shape {
        width: 80%;
        height: auto;
        top: -19%;
        left: -2%;
    }

    .services-area {
        margin-top: -510px;
    }

    .service-shape {
        top: -320px;
    }

}
@media(max-width:2400px) {
	.story-shape{
    height: 250px;

	}
	.story-photo {
    margin-top: 15px;
    width: 100%;
}
	.story-photo img {
    transform: rotate(4deg);
}
}

@media(max-width:1800px) {
	.story-shape{
    height: 230px;

	}
	.story-photo {
    margin-top: 15px;
    width: 100%;
}
	.story-photo img {
    transform: rotate(2deg);
}
}

@media(max-width:1400px) {
    .hero-bg {
        width: 100%;
        left: 0;
    }

    .hero-heading {
        font-size: 38px;
    }

    .hero-area {
        padding-top: 150px;
    }

    .saas-heading {
        font-size: 34px;
    }

    .saas-stat-num {
        font-size: 46px
    }

    .about-area {
        padding-bottom: 50px;
    }

    .saas-copy-heading,
    .services-heading,
    .portfolio-heading,
    .standard-heading,
    .careers-heading,
    .community-heading,
    .faq-heading {
        font-size: 32px;
    }

    .value-card-title {
        font-size: 18px;
    }

    .services-area {
        margin-top: -90px;
    }

    .service-card-title {
        font-size: 20px
    }

    .standard-quote {
        font-size: 32px
    }

    .careers-collage {
        min-width: 100%;
        max-width: 100%;
    }

    .careers-shape {
        top: auto;
        width: 65%;
        height: auto;
    }

    .trusted-logo img {
        height: 45px
    }

}

@media(max-width:991px) {
    br {
        display: none
    }

    nav#menu {
        position: absolute;
        top: 99%;
        left: 0;
        width: 100%;
        display: block;
        z-index: 999;
        min-height: calc(100vh - 45px);
        opacity: 0;
        visibility: hidden;
        transition: 0.3s all;
    }

    nav#menu.active {
        opacity: 1;
        visibility: visible;
        transition: 0.3s all;
    }

    .mainmenu ul {
        text-align: left;
    }

    nav#menu,
    nav#menu > ul ul {
        overflow: hidden;
        max-height: 0;
        background: #0a1628;
        -webkit-transition: all 0.4s ease 0s;
        -o-transition: all 0.4s ease 0s;
        transition: all 0.4s ease 0s;
    }

    nav#menu,
    nav#menu > ul ul {
        overflow: auto;
        padding: 50px 20px;
    }

    nav#menu > ul > li {
        display: block !important;
        margin: 0 !important;
        padding: 0;
        position: relative
    }

    nav#menu ul ul,
    nav#menu ul ul ul {
        display: inherit;
        position: relative;
        left: auto;
        top: auto;
        padding: 0
    }

    nav#menu > ul > li > span {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 16px;
        z-index: 2;
    }

    nav#menu ul ul.sub-menu.active {
        visibility: visible;
        opacity: 1;
        max-height: 55em;
    }

    nav#menu > ul > li > a {
        display: block;
        position: relative;
        padding: 15px 0px;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 18px;
        opacity: 1;
        font-weight: 500
    }

    .header-menu a::before {
        display: none
    }

    .header-menu a::after {
        display: none
    }

    nav#menu > ul > li:last-child > a {
        border: none
    }

    .mainmenu ul li > ul {
        border: none
    }

    nav#menu li.has-submenu > a:after {
        border: none;
        content: '+';
        position: absolute;
        top: 10px;
        right: 9px;
        display: block;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        height: auto;
        font-size: 30px;
        font-weight: 400
    }

    .sub-menu::before {
        height: 90% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    .sub-menu::after {
        display: none
    }

    nav#menu li.has-submenu.active > a:after {
        content: "-";
        font-size: 30px
    }

    nav#menu ul ul > li a {
        padding: 6px 0px;
        line-height: normal;
        color: #fff;
        font-size: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        display: block
    }

    ul.sub-menu {
        padding-left: 20px;
    }

    nav#menu > ul ul {
        background: transparent;
        box-shadow: none;
        width: 100%;
        padding-left: 15px
    }


    .header-logo {
        width: 100px;
    }

    .header-badge {
        width: 65px;
    }

    section,
    .section {
        padding: 50px 0
    }

    .services-head {
        max-width: 100%;
        margin: 0 auto 30px;
    }

    .portfolio-link {
        line-height: normal
    }

    #menu-toggle.active span {
        position: relative
    }

    #menu-toggle.active span:nth-child(2) {
        opacity: 0
    }

    #menu-toggle.active span:nth-child(1) {
        top: 7px;
        transform: rotate(45deg);
    }

    #menu-toggle.active span:nth-child(3) {
        top: -6px;
        transform: rotate(-45deg);
    }

    .careers-collage {
        min-width: 100%;
        max-width: 100%;
    }

    .careers-shape {
        right: 0;
        top: auto;
        z-index: -1;
        width: 70%;
        height: auto;
    }

    .hero-shape {
        width: 100%;
        height: auto;
        top: auto
    }

    .hero-bg {
        display: none
    }

    .mainmenu-cta .cta-btn {
        width: auto
    }

    .hero-heading {
        font-size: 32px;
    }

    .saas-heading,
    .saas-copy-heading {
        font-size: 30px;
    }

    .saas-stat-num {
        font-size: 38px;
    }

    .services-area {
        margin-top: -70px;
        padding-top: 0;
    }

    .service-shape {
        width: 800px;
        min-width: 800px;
        height: auto;
        left: -3px;
        z-index: 9;
        object-fit: cover;
        object-position: top center;
        top: -197px;
        transform: rotate(3deg);
    }


    .company-photo {
        width: 100%;
        margin-top: 0;
    }

    .services-heading {
        font-size: 32px;
    }

    .service-card-title {
        font-size: 20px
    }

    .service-card {
        padding: 20px
    }

    .portfolio-heading {
        font-size: 32px;
    }

    .portfolio-logo {
        height: auto;
    }

    .portfolio-logo img {
        height: 40px;
        object-fit: contain;
        object-position: top center;
    }

    .portfolio-card {
        padding: 20px;
        justify-content: space-between;
    }

    .portfolio-tagline {
        margin: 16px 0 0;
    }

    .portfolio-head {
        margin: 0 0 25px;
    }

    .portfolio-cta-title {
        font-size: 30px;
    }

    .portfolio-cta {
        padding: 30px;
    }

    .standard-split {
        flex-direction: row;
        gap: 30px;
    }

    .standard-quote {
        text-align: left
    }

    .standard-label {
        text-align: left
    }

    .standard-quote {
        font-size: 26px;
    }

    .playbook-card {
        padding: 30px
    }

    .playbook-card-title {
        font-size: 18px
    }

    .careers-heading {
        font-size: 32px;
    }

    .careers-area {
        padding-bottom: 0
    }

    .trusted-logo img {
        height: 40px;
        object-fit: contain;
    }

    .community-photo {
        height: 140px;
    }

    .community-body {
        padding: 20px
    }

    .faq-heading {
        font-size: 32px;
    }

    .faq-area {
        padding: 50px 0
    }

    .call-to-action {
        padding: 30px
    }

    .cta-image {
        right: 0
    }

    .call-to-action .heading {
        font-size: 32px;
    }

    .footer-col li {
        margin-bottom: 10px;
    }

    .footer-brand {
        text-align: center;
        margin-bottom: 50px
    }

    .footer-tagline {
        margin: 0 auto;
        max-width: 700px
    }

    .footer-area {
        padding-top: 30px
    }

    .footer-copyright {
        text-align: center
    }

    .footer-bottom .footer-legal {
        justify-content: center;
    }
	section.error-page.text-center {
    padding-top: 110px;
    padding-bottom: 50px;
}
	.error-page .h1 {
    font-size: 50px;
}
}

@media(max-width:767px) {
    .services-area {
        margin-top: 0;
        padding-top: 0;
    }

    .mainmenu-cta .cta-btn {
        width: 100%
    }

    .hero-heading {
        font-size: 32px;
    }

    .service-card-title {
        font-size: 20px;
    }



    .careers-area {
        padding-top: 0;
        padding-bottom: 30px;
    }

    .service-shape {
        width: 800px;
        min-width: 800px;
        height: auto;
        left: -65px;
        z-index: 9;
        object-fit: cover;
        object-position: top center;
        top: -230px;
        transform: rotate(-13deg);
    }

    .community-area {
        padding-top: 0
    }

    .call-to-action .heading {
        font-size: 28px;
    }

    .community-body {
        padding: 20px;
    }

    .footer-logo {
        width: 150px;
        margin-bottom: 12px
    }

    .footer-tagline {
        max-width: 100%
    }



    .trusted-area {
        padding-top: 20px;
    }

    .trusted-logo img {
        height: 40px;
    }

    .saas-head-liner {
        height: 100px;
    }



    .portfolio-head-image {
        display: block
    }

    .portfolio-head-image {
        position: absolute;
        right: 0;
        bottom: -50px;
    }



    .call-to-action {
        padding: 30px
    }

    .cta-image {
        right: 0;
    }

    .footer-title {
        position: relative;
    }

    .footer-widget .footer-title {
        margin-bottom: 0px;
        padding: 12px 0;
        border: none
    }

    .footer-title:before {
        content: "";
        border: 1px solid #fff;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%) rotate(135deg);
        border-width: 2px 2px 0 0;
    }

    .footer-title:after {
        opacity: 0;
        transition: all 0.4s;
        left: 10px
    }

    .footer_acc.acc .footer-title:after {
        opacity: 1
    }

    .footer_acc.acc .footer-title {
        border-color: transparent
    }

    .footer_acc.acc .footer-title:before {
        transform: rotate(-45deg);
    }

    .footer_acc ul {
        display: none;
        padding: 20px;
    }

    .footer_acc.acc ul {
        display: block;
    }



    .footer-widget .footer-title {
        color: #fff
    }

    .footer-social-row {
        padding: 0 0 50px;
    }

    .footer-area {
        padding-top: 30px
    }

    .footer-bottom {
        text-align: center
    }

    .footer-bottom .footer-legal {
        justify-content: center
    }

    .footer-legal {
        gap: 3px;
    }

    .careers-heading {
        font-size: 32px;
    }

    .services-heading,
    .portfolio-heading,
    .careers-heading,
    .faq-heading {
        font-size: 28px
    }

}

@media(max-width:575px) {
    .standard-quote {
        text-align: center
    }

    .standard-label {
        text-align: center
    }

    .standard-split {
        flex-direction: column;
        gap: 30px;
    }

    .saas-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .saas-head-liner {
        height: 50px;
    }

    .hero-area {
        padding: 130px 0 20px;
    }

    .hero-text {
        text-align: center
    }

    .hero-shape {
        width: 100%;
        height: auto;
        right: 0;
        top: auto;
        bottom: 150px;
    }

    .hero-image {
        margin-top: 30px
    }



    .about-area {
        padding-bottom: 30px;
    }

    .saas-shape {
        display: none
    }

    .company-photo {
        margin-top: 0;
    }


    .cta-btn {
        width: 100%;
        text-align: center;
        justify-content: center
    }

    .careers-shape {
        top: 0;
        width: 100%;
        height: auto;
    }

    .footer-cta-area {
        padding-top: 0
    }

    .call-to-action {
        padding: 30px;
        text-align: center;
        padding-bottom: 0
    }

    .saas-cards {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .value-icon img {
        margin: 0 auto
    }

    .cta-image {
        position: inherit;
        right: auto;
        bottom: 0;
        width: 100%;
        margin-top: 30px;
        margin: 30px auto 0;
        display: block;
    }



    .service-card {
        padding: 20px
    }

    .service-card-title {
        font-size: 18px;
    }

    .portfolio-head-image {
        display: none
    }
}

/* ==========================================================================
   ABOUT PAGE — Page Banner
   ========================================================================== */

/* === About — Page Banner === */
.about-banner {
    position: relative;
    padding: 170px 0 70px;
    overflow: hidden;
    isolation: isolate;
}

/* Decorative soft blue mesh wash (source asset host blocked — reproduced in CSS) */
.about-banner-bg {
    position: absolute;
    inset: 0;
    z-index: -1;

}

.about-banner-bg img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.about-banner-badge {
    width: 160px;
    height: auto;
    margin-bottom: 28px;
}

.breadcrumb-link ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.breadcrumb-link a {
    color: #5b6478;
}

.breadcrumb-link a:hover {
    color: var(--blue);
}

.breadcrumb-link .sep {
    color: #c6d8ef;
}

.breadcrumb-link li[aria-current] {
    color: #0b1838;
    font-weight: 500;
}

.about-banner-head {

    text-align: center;
}

.about-banner-title {
    font-size: 48px;
    line-height: 1.22;
    letter-spacing: -1.72px;
    color: var(--ink);
    margin: 0 0 24px;
}

.about-banner-text {
    font-size: 18px;
    line-height: 29px;
    color: var(--body);
    margin: 0 auto 32px;
    max-width: 750px;
}

.about-banner-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* Stat bar */
.about-stats {
    max-width: 1322px;
    margin: 72px auto 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(11, 24, 37, .06);
    border: 1px solid #eef1f7;
}

.about-stats .row {
    --bs-gutter-x: 0;
}

.about-stat {
    text-align: center;
    padding: 31px 24px;
    position: relative;
    height: 100%;
}

.about-stats .col-lg-3:not(:first-child) .about-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 28px;
    width: 1px;
    background: #eef1f7;
    height: 100%;
}

.about-stat-num {
    display: block;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: #0f0f0f;
    margin-bottom: 11px;
}

.about-stat-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 170%;
    color: #4c4a54;
    letter-spacing: -0.5px;
}

/* === About — Page Banner responsive === */
@media (max-width: 991.98px) {
    .about-banner {
        padding: 130px 0 80px;
    }

    .about-banner-title {
        font-size: 44px;
        letter-spacing: -1px;
    }

    .about-stats .col-6:nth-child(odd) .about-stat::after {
        content: "";
        position: absolute;
        right: 0;
        top: 24px;
        bottom: 24px;
        width: 1px;
        background: #eef1f7;
    }

    .about-stats .col-6:nth-child(1) .about-stat,
    .about-stats .col-6:nth-child(2) .about-stat {
        border-bottom: 1px solid #eef1f7;
    }
}

@media (max-width: 767.98px) {
    .about-banner-action {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 575.98px) {
    .about-banner-title {
        font-size: 36px;
    }

    .about-stat-num {
        font-size: 38px;
    }
}

/* === Podcast — About Everyday Business Solutions === */
.pod-about {
    padding: 90px 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
    position: relative
}

.pod-about-border {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 112px;
    height: 2px;
    border-radius: 2px;
    background: rgba(0, 87, 255, 0.40);
}

.pod-about-media {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(10, 22, 40, .14);
}

.pod-about-media img {
    display: block;
    width: 100%;
    height: 482px;
    object-fit: cover;
}


.section-heading em {
    font-style: italic;
    color: var(--blue-ink);
}

.pod-about-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--body);
    margin: 0 0 28px;
}

@media (max-width: 991.98px) {
    .pod-about {
        padding: 60px 0;
    }

    .pod-about-media img {
        height: 360px;
    }


}

@media (max-width: 575.98px) {
    .pod-about-media img {
        height: 260px;
    }



    .pod-about-text {
        font-size: 16px;
    }
}

/* === Podcast — Featured Guest === */
.pod-guest {
    padding: 70px 0 150px;
    position: relative
}

.pod-guest-shape {
    position: absolute;
    right: 0;
    bottom: -30%;
    z-index: -1;
}

.pod-guest-heading {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -1.3px;
    color: var(--ink);
    margin: 0 0 46px;
}

.pod-guest-heading em {
    font-style: italic;
    color: var(--blue-ink);
}

.guest-card {
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 8px;
    box-shadow: 0 30px 70px rgba(10, 22, 40, .08);
    overflow: hidden;
}

/* Left photo panel */
.guest-media {
    position: relative;
    height: 100%;
    min-height: 340px;
    background: #e8f0ff;
    overflow: hidden;
    isolation: isolate;
}

.guest-media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 21px 23px;
    border-radius: 24px;
}

.guest-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(50px);
    z-index: 0;
}

.guest-glow-blue {
    top: -64px;
    right: -64px;
    width: 320px;
    height: 292px;
    background: rgba(0, 82, 204, .15);
}

.guest-glow-amber {
    bottom: -64px;
    left: -40px;
    width: 346px;
    height: 332px;
    background: rgba(255, 171, 0, .15);
}

/* Right content */
.guest-body {
    padding: 48px 56px;
}

.guest-role {
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--blue);
    margin: 0 0 6px;
}

.guest-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -1.26px;
    color: var(--ink);
    margin: 0 0 24px;
}

.guest-quote {
    position: relative;
    padding-left: 28px;
    margin-bottom: 28px;
    margin-top: 30px
}

.guest-quote-mark {
    position: absolute;
    left: -6px;
    top: -18px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 78px;
    line-height: 1;
    color: #dbe7ff;
}

.guest-quote p {
    font-family: 'DM Sans', sans-serif;
    font-size: 16.5px;
    line-height: 1.66;
    color: var(--body);
    margin: 0 0 14px;
}

.guest-quote p:last-child {
    margin-bottom: 0;
}

.guest-quote-lead strong {
    font-weight: 400;
    color: var(--blue);
}

.guest-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.guest-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid #e2e8f5;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--body);
    text-decoration: none;
    transition: border-color .25s, color .25s;
}

.guest-links a:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.guest-links a:hover em {
    color: #fff;
}

.guest-links em {
    font-size: 15px;
    color: var(--body);
}

@media (max-width: 991.98px) {
    .pod-guest {
        padding: 60px 0 60px;
    }

    .pod-guest-heading {
        font-size: 38px;
        letter-spacing: -.8px;
        margin-bottom: 28px;
    }

    .guest-media {
        min-height: 320px;
    }

    .guest-media img {
        height: 400px;
    }

    .guest-body {
        padding: 36px 32px;
    }

    .guest-name {
        font-size: 34px;
        letter-spacing: -.8px;
    }
}

@media (max-width: 575.98px) {
    .pod-guest-heading {
        font-size: 30px;
    }

    .guest-media img {
        height: 300px;
    }

    .guest-body {
        padding: 28px 22px;
    }

    .guest-name {
        font-size: 28px;
    }
}

/* === Podcast — Latest Episode (Navigating Social Media) === */
.pod-latest {
    padding: 40px 0 90px;
    background: #0A1628;
    position: relative
}

.pod-latest .container {
    position: relative;
    z-index: 9
}

.pod-latest-shape {
    position: absolute;
    left: 0;
    bottom: -25%;
    z-index: -1
}

.latest-card {
    position: relative;
    overflow: hidden;
    padding: 56px;
    border-radius: 28px;
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, .12);
}

.latest-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    z-index: 0;
}

.latest-glow-1 {
    top: -120px;
    right: -60px;
    width: 360px;
    height: 300px;
    background: rgba(0, 87, 255, .15);
}

.latest-glow-2 {
    bottom: -120px;
    left: -40px;
    width: 320px;
    height: 280px;
    background: rgba(57, 184, 255, .10);
}

.latest-card .relative {
    position: relative;
    z-index: 1;
}

.latest-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.12;
    letter-spacing: -1.2px;
    color: #fff;
    margin: 0 0 16px;
}

.latest-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: #aebbd4;
    margin: 0 0 24px;
    max-width: 520px;
}

.latest-badge {
    display: inline-block;
    padding: 10px 17px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #dbe5f7;
}

/* Animated waveform */
.latest-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 40px;
    margin-bottom: 16px;
    overflow: hidden;
}

.latest-wave span {
    flex: 1 0 0;
    min-width: 2px;
    max-width: 6px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(57, 184, 255, .1), rgba(0, 87, 255, .1));
    animation: latest-bar 1.4s ease-in-out infinite;
}

@keyframes latest-bar {

    0%,
    100% {
        height: 30%;
    }

    50% {
        height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .latest-wave span {
        animation: none;
        height: 55%;
    }
}

/* Spotify-style episode embed */
.episode-embed {
    position: relative;
    background: #1f1f1f;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(2, 8, 23, .5);
    padding: 24px;
    color: #fff;
}

.episode-embed-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.episode-cover {
    width: 137px;
    height: 137px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 9px 9px rgba(0, 0, 0, .1), 0 0 29px rgba(0, 0, 0, .1);
    margin: 30px auto 0;
}

.episode-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.episode-spotify {
    font-size: 24px;
    color: #fff;
}

.episode-embed-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    margin: 0 0 8px;
}

.episode-embed-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #b3b3b3;
    margin: 0 0 16px;
}

.episode-tag {
    display: inline-block;
    padding: 2px 5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .7);
    color: #121212;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

.episode-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
}

.episode-save em {
    font-size: 22px;
    color: #1ed760;
}

.episode-play {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 9999px;
    background: #fff;
    color: #000;
    font-size: 16px;
    cursor: pointer;
    transition: transform .2s;
}

.episode-play:hover {
    transform: scale(1.06);
}

@media (max-width: 991.98px) {
    .pod-latest {
        padding: 30px 0 60px;
    }

    .latest-card {
        padding: 36px 28px;
    }

    .latest-title {
        font-size: 32px;
        letter-spacing: -.8px;
    }
}

@media (max-width: 575.98px) {
    .latest-card {
        padding: 28px 20px;
    }

    .latest-title {
        font-size: 26px;
    }

    .episode-embed {
        padding: 20px;
    }
}

/* === Podcast — Recent Episodes === */
.pod-recent {
    padding: 90px 0 90px;
    position: relative;
    z-index: 99
}

.pod-recent-heading {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -1.3px;
    color: var(--ink);
    margin: 0 0 40px;
}

.pod-recent-heading em {
    font-style: italic;
    color: var(--blue-ink);
}

.episode-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 20px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}

.episode-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(10, 22, 40, .10);
}

.episode-card-media {
    display: block;
    background: #e8f0ff;
    aspect-ratio: 552 / 310;
    overflow: hidden;
}

.episode-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.episode-card:hover .episode-card-media img {
    transform: scale(1.04);
}

.episode-card-body {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.episode-card-tag {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: #e8f0ff;
    color: var(--blue);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    letter-spacing: .48px;
    margin-bottom: 12px;
}

.episode-card-byline {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #7a8aaa;
    margin: 0 0 8px;
}

.episode-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.28;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
}

.episode-card-title a {
    color: var(--ink);
    text-decoration: none;
    transition: color .25s;
}

.episode-card-title a:hover {
    color: var(--blue);
}

.episode-card-excerpt {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--body);
    margin: 0 0 16px;
}

.episode-card-more {
    margin-top: auto;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: var(--blue);
    text-decoration: none;
}

.episode-card-more:hover {
    text-decoration: underline;
}

.pod-recent-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pod-recent-older {
    padding: 16px 29px;
    border: 1px solid #e2e8f5;
    border-radius: 12px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .25s, color .25s;
}

.pod-recent-older:hover {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
}

@media (max-width: 991.98px) {
    .pod-recent {
        padding: 60px 0 60px;
    }

    .pod-recent-heading {
        font-size: 38px;
        letter-spacing: -.8px;
    }

    .cta-btn.btn_ghost {
        margin-top: 10px
    }

    .blog-banner-head-details {
        flex-direction: column;
        align-items: flex-start !important
    }

    .blog-meta-details {
        margin-top: 8px
    }

    .blog-meta-details::before {
        display: none
    }

    .blog-meta-details {
        margin-left: 10px
    }

}

@media (max-width: 575.98px) {
    .pod-recent-heading {
        font-size: 30px;
    }

    .episode-card-title {
        font-size: 18px;
    }
}

/* === Podcast — Stay Connected (Info Cards + Subscribe) === */
.pod-connect {
    padding: 0 0 90px;
    position: relative;
    z-index: 1;
}

/* Info cards */
.connect-cards {
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

.connect-card {
    height: 100%;
    padding: 33px;
    border-radius: 20px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(0, 87, 255, .26) 0%, rgba(0, 87, 255, 0) 55%),
        var(--ink);
    border: 1px solid #10203c;
    box-shadow: 0 4px 24px rgba(255, 255, 255, .04);
    transition: all 0.3s;
    top: 0;
    position: relative
}

.connect-card:hover {
    top: -5px
}

.connect-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: rgba(0, 87, 255, .2);
    border: 1px solid rgba(120, 160, 255, .38);
    color: #78a0ff;
    font-size: 20px;
    margin-bottom: 18px;
}

.connect-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.12;
    letter-spacing: -0.525px;
    color: #fff;
    margin: 0 0 8px;
}

.connect-card-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: #aebbd4;
    margin: 0 0 16px;
}

.connect-card-link {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: #3a7bff;
    text-decoration: none;
    word-break: break-word;
}

.connect-card-link:hover {
    color: #6a9bff;
    text-decoration: underline;
}

/* Subscribe band — pulled up so cards overlap its top edge */
.connect-band {
    position: relative;
    overflow: hidden;
    margin-top: -120px;
    padding: 180px 64px 64px;
    border-radius: 28px;
    background: radial-gradient(70% 90% at 92% 0%, rgba(0, 87, 255, .42) 0%, rgba(0, 87, 255, 0) 55%),
        radial-gradient(60% 80% at 4% 100%, rgba(57, 184, 255, .16) 0%, rgba(57, 184, 255, 0) 55%),
        var(--ink);
    border: 1px solid rgba(255, 255, 255, .12);
}

.connect-band .relative {
    position: relative;
    z-index: 1;
}

/* faint waveform along the bottom edge */
.connect-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -13px;
    height: 103px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    padding: 0 44px;
    opacity: .32;
    z-index: 0;
}

.connect-wave span {
    width: 19px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(57, 184, 255, .2), rgba(0, 87, 255, .2));
}

.connect-heading {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.14;
    letter-spacing: -1.2px;
    color: #fff;
    margin: 0 0 18px;
    max-width: 540px;
}

.connect-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: #9fb0cc;
    margin: 0 0 18px;
}

.connect-rule {
    display: block;
    width: 120px;
    height: 5px;
    background: #f5c517;
}

/* Form panel */
.connect-form-panel {
    max-width: 485px;
    margin-left: auto;
    padding: 33px;
    background: #121a2d;
    border: 1px solid #1e2d42;
    border-radius: 8px;
}

.connect-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pod-connect .connect-form-panel  label, .pod-connect .connect-form-panel  legend {
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13.6px !important;
    letter-spacing: -0.12px !important;
    color: #e2e8f0 !important;
    margin-bottom: 8px !important;
}

.pod-connect .connect-form-panel .gfield_required_text {
    color: #f59e0b !important;
}

.pod-connect .connect-form-panel  input[type="text"],
.pod-connect .connect-form-panel  input[type="email"] {
    width: 100% !important;
    height: 48px !important;
    padding: 13px 17px !important;
    background: #0f172a !important;
    border: 1px solid #1e2d42 !important;
    border-radius: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.4px !important;
    color: #e2e8f0 !important;
}

.pod-connect .connect-form-panel  input::placeholder {
    color: rgba(226, 232, 240, .5) !important;
}

.pod-connect .connect-form-panel input:focus {
    outline: none !important;
    border-color: #2563eb !important;
}

.connect-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    background: #0f172a;
    border: 1px solid #1e2d42;
    border-radius: 10px;
}

.connect-captcha input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid #64748b;
    border-radius: 4px;
    accent-color: #2563eb;
    flex-shrink: 0;
}

.connect-captcha span {
    font-family: 'Inter', sans-serif;
    font-size: 14.4px;
    color: #94a3b8;
}

.connect-submit {
    width: 100%;
    padding: 16px 36px;
    border: none;
    border-radius: 11px;
    background: #2563eb;
    box-shadow: 0 4px 11px rgba(0, 87, 255, .3);
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    color: #fff;
    cursor: pointer;
    transition: background .25s;
}

.connect-submit:hover {
    background: #1d4fd8;
}

@media (max-width: 991.98px) {
    .pod-connect {
        padding: 0 0 60px;
    }

    .connect-band {
        margin-top: 24px;
        padding: 44px 28px;
    }

    .connect-heading {
        font-size: 32px;
        letter-spacing: -.8px;
    }

    .connect-form-panel {
        margin-left: 0;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .connect-band {
        padding: 32px 20px;
    }

    .connect-heading {
        font-size: 26px;
    }

    .connect-form-panel {
        padding: 24px 20px;
    }
}

/* === Podcast — Meet The Hosts === */
.pod-hosts {
    padding: 70px 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%)
}

.pod-hosts-heading {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -1.3px;
    color: var(--ink);
    margin: 0 0 24px;
}

.pod-hosts-heading em {
    font-style: italic;
    color: var(--blue-ink);
}

.host-card {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 31px 33px;
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 22px;
}

.host-avatar {
    position: relative;
    flex-shrink: 0;
    width: 118px;
    height: 118px;
}

.host-avatar img {
    width: 118px;
    height: 118px;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid #e2e8f5;
}

/* faint outer ring */
.host-avatar::before {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--blue);
    border-radius: 24px;
    opacity: .16;
}

.host-badge {
    position: absolute;
    right: -9px;
    bottom: -9px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--blue);
    border: 3px solid #fff;
    box-shadow: 0 6px 8px rgba(0, 87, 255, .42);
    color: #fff;
    font-size: 14px;
}

.host-info {
    min-width: 0;
}

.host-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -0.55px;
    color: var(--ink);
    margin: 0 0 12px;
}

.host-role {
    display: inline-block;
    padding: 6px 15px;
    border-radius: 999px;
    background: #f3f7ff;
    border: 1px solid #dbe7ff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13.5px;
    color: var(--blue);
    margin-bottom: 18px;
}

.host-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.host-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid #e2e8f5;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--body);
    text-decoration: none;
    transition: border-color .25s, color .25s;
}

.host-links a:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.host-links em {
    font-size: 15px;
    color: var(--blue);
}

.host-links a:hover em {
    color: #fff
}

.hosts-bio {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.66;
    color: var(--body);
    max-width: 1014px;
    margin: 32px 0 0;
}

.hosts-cta {
    margin-top: 24px;
}

.hosts-more {
    display: inline-flex;
    align-items: center;
    padding: 16px 29px;
    border: 1px solid #e2e8f5;
    border-radius: 12px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .25s, color .25s;
}

.hosts-more:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

@media (max-width: 991.98px) {
    .pod-hosts {
        padding: 0 0 60px;
    }

    .pod-hosts-heading {
        font-size: 38px;
        letter-spacing: -.8px;
    }

    .hosts-bio {
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    .pod-hosts-heading {
        font-size: 30px;
    }

    .host-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .host-links {
        justify-content: center;
    }

    .hosts-cta {
        display: flex;
        justify-content: center;
    }
}

/* === Podcast — Previous Episodes (Archive) === */
.pod-archive {
    padding: 0 0 100px;
}
.container.pod-archive:last-child {
    padding-bottom: 0;
}
.archive-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.archive-heading {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -1.3px;
    color: var(--ink);
    margin: 0 0 16px;
}

.archive-heading em {
    font-style: italic;
    color: var(--blue-ink);
}

.archive-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--body);
    margin: 0;
    max-width: 720px;
}

.archive-count {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e8f0ff;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--blue);
}

/* Season tab bar — full-bleed slider with arrow controls */
.archive-tabs {
    margin: 0 -4% 40px;
    background: rgba(246, 248, 253, .86);
    backdrop-filter: blur(5px);
    border-top: 1px solid #e2e8f5;
    border-bottom: 1px solid #e2e8f5;
    overflow: hidden;
}

/* Drag-to-scroll track */
.archive-tabs-track {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    padding: 0 15px
}

.archive-tabs-track::-webkit-scrollbar {
    display: none;
}

.archive-tabs-track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* while dragging, don't let a drag end up triggering the tab link */
.archive-tabs-track.is-dragging a {
    pointer-events: none;
}

.archive-tabs ul {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    width: max-content;
	padding:25px 0
}

.archive-tabs li {
    flex-shrink: 0;
}

.archive-tabs a {
    display: inline-flex;
    align-items: center;
    padding: 9px 19px;
    border: 1px solid #e2e8f5;
    border-radius: 999px;
    background: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--body);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .25s, color .25s, background .25s;
}

.archive-tabs a:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.archive-tabs a.is-active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

/* Season sub-header */
.archive-season-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 20px;
    margin-bottom: 28px;
    border-top: 1px solid #e2e8f5;
}

.archive-season-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--ink);
    margin: 0;
}

.archive-season-count {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: #e8f0ff;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--blue);
}

/* Season header with subtitle variant (single-guest seasons) */
.archive-season-title.lg {
    font-size: 32px;
    letter-spacing: -0.8px;
}

.archive-season-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--body);
    margin: 8px 0 0;
}

.archive-season-sub span {
    color: var(--blue);
}

/* Card meta showing podcast name (lighter grey) instead of guest */
.ep-card-podcast {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #aab6cb;
    margin: 0 0 12px;
}

/* Episode card */
.ep-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 18px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}

.ep-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(10, 22, 40, .10);
}

.ep-card-media {
    position: relative;
    display: block;
    background: #e8f0ff;
    aspect-ratio: 360 / 225;
    overflow: hidden;
}

.ep-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}

.ep-card:hover .ep-card-media img {
    transform: scale(1.04);
}

.ep-card-num {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 10px;
    border-radius: 8px;
    background: rgba(10, 22, 40, .82);
    backdrop-filter: blur(2px);
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .96px;
    color: #fff;
}

.ep-card-body {
    padding: 19px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.ep-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 16.5px;
    line-height: 1.32;
    letter-spacing: -0.41px;
    margin: 0 0 8px;
}

.ep-card-title a {
    color: var(--ink);
    text-decoration: none;
    transition: color .25s;
}

.ep-card-title a:hover {
    color: var(--blue);
}

.ep-card-guest {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #7a8aaa;
    margin: 0 0 12px;
}

.ep-card-guest span {
    color: var(--body);
}

.ep-card-listen {
    margin-top: auto;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: var(--blue);
    text-decoration: none;
}

.ep-card-listen:hover {
    text-decoration: underline;
}

/* Pagination */
.archive-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    height: 44px;
    padding: 0 17px;
    border: 1px solid #e2e8f5;
    border-radius: 12px;
    background: #fff;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .25s, color .25s, background .25s;
}

.page-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.page-btn.is-active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 8px 10px rgba(0, 87, 255, .28);
}

.page-prev,
.page-next {
    color: var(--body);
    font-size: 14px;
}

.page-prev.is-disabled {
    opacity: .4;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .pod-archive {
        padding: 0 0 60px;
    }

    .archive-heading {
        font-size: 38px;
        letter-spacing: -.8px;
    }

    .archive-sub {
        font-size: 16px;
    }
}

@media (max-width: 575.98px) {
    .archive-heading {
        font-size: 30px;
    }
}

/* === Podcast — Listen Now === */
.pod-listen {
    padding: 40px 0 100px;
    text-align: center;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
}

.listen-intro {
    max-width: 720px;
    margin: 0 auto;
}

.listen-heading {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -1.3px;
    color: var(--ink);
    margin: 0 0 17px;
}

.listen-heading em {
    font-style: italic;
    color: var(--blue-ink);
}

.listen-sub {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--body);
    margin: 0;
}

.listen-platforms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 56px;
    list-style: none;
    padding: 0;
    margin: 40px 0 38px;
}

.listen-platforms a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: color .25s, opacity .25s;
    opacity: .85;
}

.listen-platforms a:hover {
    color: var(--blue);
    opacity: 1;
}

.listen-platforms em {
    font-size: 30px;
}

.listen-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
}

.listen-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.listen-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: #0057FF;
    font-size: 16px;
    text-decoration: none;
    transition: color .25s, background .25s;
}

.listen-social a:hover {
    color: var(--blue);
    background: #e8f0ff;
}

@media (max-width: 991.98px) {
    .pod-listen {
        padding: 20px 0 60px;
    }

    .listen-heading {
        font-size: 38px;
        letter-spacing: -.8px;
    }

    .listen-sub {
        font-size: 16px;
    }

    .listen-platforms {
        gap: 20px 36px;
    }

    .listen-platforms a {
        font-size: 17px;
    }

    .listen-platforms em {
        font-size: 24px;
    }
}

@media (max-width: 575.98px) {
    .listen-heading {
        font-size: 30px;
    }
}

/* === About — Our Story === */
.story-area {
    position: relative;
    padding: 60px 0 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
    overflow: hidden;
    isolation: isolate;
}

/* blue gradient wave flowing in from the left, behind the text */
.story-wave {
    position: absolute;
    left: -120px;
    top: 150px;
    width: 760px;
    max-width: 60%;
    z-index: -1;
    pointer-events: none;
}

.story-title {
    font-size: 50px;
    line-height: 1.16;
    letter-spacing: -1.72px;
    color: var(--ink);
    margin: 0;
}

.story-copy p {
    font-size: 18px;
    line-height: 29px;
    color: var(--body);
    margin: 0 0 22px;
}

.story-copy p:last-child {
    margin-bottom: 0;
}

/* full-bleed team photo below the copy */
.story-photo {
    margin-top: 72px;
    width: 100%;
}

.story-photo img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
@media(max-width:1600px) {

	.story-photo {
    margin-top: 15px;
    width: 100%;
}
}

@media (max-width: 991.98px) {
    .story-area {
        padding: 70px 0 0;
    }

    .story-title {
        font-size: 40px;
        margin-bottom: 8px;
    }

    .story-wave {
        top: 120px;
        max-width: 70%;
    }

    .story-photo {
        margin-top: 48px;
    }
}

@media (max-width: 575.98px) {
    .story-title {
        font-size: 34px;
    }

    .story-copy p {
        font-size: 16px;
        line-height: 27px;
    }

    .story-photo {
        margin-top: 36px;
    }
}

/* === About — Our Timeline === */
.timeline-area {
    position: relative;
    padding: 96px 0 90px;
    overflow: hidden;
}

.timeline-blue-shape {
    position: absolute;
    width: 100%;
    left: 0;
    top: 100px;
    height: 30%
}

.timeline-image-shape {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -100px;
    filter: grayscale(1)
}

.timeline-title {
    font-size: 50px;
    line-height: 1.16;
    letter-spacing: -1.72px;
    color: var(--ink);
    margin: 0 0 56px;
}

.timeline {
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
}

/* center spine */
.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: #d9e2f0;
    border-radius: 2px;
}

.timeline::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #1E5BE6;
}

/* each item: 2 rows (card 85.5px, year 49.6px) x 3 cols (1fr | 60px | 1fr) */
.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    margin: 20px 0
}

.timeline-card {
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 12px;
    padding: 18px 23px 19px;
    box-shadow: 0 6px 18px rgba(11, 24, 37, .05);
    align-self: start;
    margin-top: 15px
}

.timeline-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 23px;
    letter-spacing: -0.21px;
    color: #0b1838;
    margin: 0 0 4px;
	text-transform:capitalize
}

.timeline-card-text {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 20px;
    color: #5b6478;
    margin: 0;
	text-transform:capitalize
}

.timeline-year {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 32px;
    line-height: 1.55;
    letter-spacing: -1.088px;
    color: #0b1838;
    white-space: nowrap;
    align-self: center;
}

/* dot: centre column, aligned to the CARD row (row 1) */
.timeline-dot {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: #fff;
    border: 3px solid #fcc419;
    box-shadow: 0 0 0 5px rgba(252, 196, 25, .16);
    z-index: 1;
}

/* Scroll-reveal + active highlight
   Items start slightly dimmed/offset, then animate in and highlight as they
   enter the viewport. Active item: card lifts + blue accent, dot turns blue. */
.timeline-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.timeline-item.in-view {
    opacity: 1;
    transform: translateY(0);
}

.timeline-card {
    transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}

.timeline-item.is-active .timeline-card {
    border-color: #bcd3ff;
    box-shadow: 0 14px 34px rgba(0, 87, 255, .16);
    transform: translateY(-3px);
}

.timeline-year {
    transition: color .4s ease;
}

.timeline-item.is-active .timeline-year {
    color: #0057ff;
}

/* dot recolours yellow -> blue when the item is active */
.timeline-dot {
    transition: border-color .4s ease, box-shadow .4s ease, background .4s ease, transform .4s ease;
}

.timeline-item.is-active .timeline-dot {
    border-color: #0057ff;
    box-shadow: 0 0 0 6px rgba(0, 87, 255, .18);
    transform: scale(1.12);
}

/* If JS is unavailable, never leave items hidden */
@media (prefers-reduced-motion: reduce) {
    .timeline-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.no-js .timeline-item {
    opacity: 1;
    transform: none;
}

/* LEFT items: card row 1 col 1 (right-aligned), year row 2 col 1 (right-aligned, hugs spine) */
.timeline-item.is-left .timeline-card {
    grid-column: 1;
    grid-row: 2;
    text-align: right;
}

.timeline-item.is-left .timeline-year {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    text-align: right;
}

/* RIGHT items: card row 1 col 3 (left-aligned), year row 2 col 3 (left-aligned, hugs spine) */
.timeline-item.is-right .timeline-card {
    grid-column: 3;
    grid-row: 2;
    text-align: left;
    margin-bottom: 0;
    margin-top: 15px
}

.timeline-item.is-right .timeline-year {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    text-align: left;
}

@media (max-width: 991.98px) {
    .timeline-area {
        padding: 70px 0 80px;
    }

    .timeline-title {
        font-size: 40px;
        margin-bottom: 44px;
    }
}

@media (max-width: 575px) {
    .timeline-title {
        font-size: 34px;
    }

    /* collapse to a single left-aligned rail: year on top, card below */
    .timeline::before {
        left: 9px;
    }

    .timeline-item,
    .timeline-item.is-left,
    .timeline-item.is-right {
        display: grid;
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto auto;
        column-gap: 0;
        margin-bottom: 8px;
    }

    .timeline-item.is-left .timeline-year,
    .timeline-item.is-right .timeline-year {
        grid-column: 2;
        grid-row: 1;
        justify-self: start;
        text-align: left;
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .timeline-item.is-left .timeline-card,
    .timeline-item.is-right .timeline-card {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        border-radius: 12px;
        border-top-left-radius: 0;
    }

    .timeline-dot {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
        align-self: start;
        margin-top: 4px;
    }
}

/* === About — Leadership === */
.leadership-area {
    background: #fff;
}

.leadership-title {
    font-size: 52px;
    line-height: 54px;
    letter-spacing: -2.34px;
    color: #0b1825;
    margin: 0 0 48px;
}

.leader-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* blue gradient photo frame with portrait inset */
.leader-photo {
    position: relative;
    display: block;
    height: 371px;
    border-top-left-radius: 12px;
    border-top-radius: 12px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background: linear-gradient(180deg, #408DFF -51.25%, #C8DEFF 19.99%);
    margin-bottom: 24px;
}

.leader-photo img {
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 0;
    top: 12px;
    width: calc(100% - 26px);
    height: calc(100% - 12px);
    object-fit: cover;
    border-radius: 8px 8px 0 0;
    object-position: top
}

.leader-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.425px;
    color: #0b1825;
    margin: 0 0 3px;
}

.leader-role {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.9px;
    color: #8fa0ae;
    margin: 0 0 12px;
}

.leader-bio {
    font-size: 16px;
    line-height: 25px;
    color: var(--body);
    margin: 0 0 18px;
    flex: 1 1 auto;
}

.leader-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 12px;
    color: #002b4e;
    padding-top: 15px;
    border-top: 1px solid #edf0f3;
}

.leader-link span {
    transition: transform .2s ease;
}

.leader-link:hover {
    color: var(--blue);
}

.leader-link:hover span {
    transform: translateX(4px);
}

@media (max-width: 991.98px) {
    .leadership-area {
        padding: 70px 0;
    }

    .leadership-title {
        font-size: 42px;
        letter-spacing: -1.6px;
        margin-bottom: 36px;
    }
}

@media (max-width: 575.98px) {
    .leadership-title {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .leader-photo {
        height: 320px;
    }
}

/* === About — The Values === */
.values-bg-image img {
    width: 100%
}

.values-area {
    padding: 96px 0 100px;
    background: var(--ink);
    overflow: hidden;
    margin-top: -200px;
}

.values-area .container {
    position: relative;
    z-index: 1
}

.value-shape {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1
}

.values-title {
    font-family: 'Anton', 'Zalando Sans', sans-serif;
    font-weight: 400;
    font-size: 72px;
    line-height: 1.04;
    letter-spacing: 0.96px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 40px;
}

.values-grid {
    --bs-gutter-x: 64px;
    --bs-gutter-y: 0;
}

.values-area .value-item {
    display: grid;
    grid-template-columns: 30px 1fr;
    column-gap: 20px;
    align-items: start;
    padding: 26px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 0;
    line-height: normal;
}

.values-area .value-num {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.1;
    color: #0057ff;
    display: block;
}

.values-area .value-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.19px;
    color: #fff;
    margin: 0 0 7px;
}

.values-area .value-desc {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #bbbbbb;
    margin: 0;
}

@media (max-width: 991.98px) {
    .values-area {
        padding: 70px 0;
    }

    .values-title {
        font-size: 52px;
    }

    .values-grid {
        --bs-gutter-x: 40px;
    }
}

@media (max-width: 575.98px) {
    .values-title {
        font-size: 38px;
        letter-spacing: .5px;
    }
}

/* === About — Scholarship === */
.scholarship-area {
    padding: 96px 0 100px;
    background: #fff;
}

.scholarship-area .inner {
    border-radius: 9.113px;
    background: #0A1628;
    box-shadow: 0 1.139px 2.278px 0 rgba(0, 0, 0, 0.05);
    padding: 70px;
    position: relative;
    z-index: 9
}

.scholarship-image {
    position: absolute;
    width: 48%;
    bottom: 0;
    right: 0;
}

.scholarship-shape {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 70%;
}

.scholarship-rings {
    position: absolute;
    top: 0;
    right: 20%;
    z-index: -1;
    width: 30%;
}

/* concentric white rings, top-right */


.scholarship-content {
    position: relative;
    z-index: 2;
    max-width: 638px;
}

.scholarship-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.2;
    letter-spacing: -1.34px;
    color: #fff;
    margin: 0 0 18px;
}

.scholarship-text {
    font-size: 18px;
    line-height: 29px;
    color: #a4bcf5;
    margin: 0 0 32px;
    max-width: 638px;
}

.scholarship-btn {
    border-radius: 5px;
}

.scholarship-photo {
    height: 100%;
    min-height: 582px;
    border-radius: 9px;
    overflow: hidden;
    background: #eef1f7;
}

.scholarship-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991.98px) {
    .scholarship-area {
        padding: 70px 0;
    }

    .scholarship-card {
        padding: 48px 40px;
    }

    .scholarship-title {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .scholarship-photo {
        min-height: 360px;
    }
}

@media (max-width: 575.98px) {
    .scholarship-card {
        padding: 40px 28px;
    }

    .scholarship-title {
        font-size: 32px;
    }

    .scholarship-text {
        font-size: 16px;
        line-height: 27px;
    }

    .scholarship-rings {
        right: -180px;
        opacity: .6;
    }
}

/* === About — Chambers of Commerce === */
.chambers-area {
    padding: 96px 0 100px;
    position: relative;

}

.chambers-shape {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70%;
    height: 100%;
    z-index: -1
}

.chambers-intro {
    margin-bottom: 24px;
}

.chambers-title {
    font-size: 38px;
    line-height: 120%;
    letter-spacing: -1.72px;
    color: #0a1628;
    margin: 0 0 16px;
}

.chambers-text {
    font-size: 18px;
    line-height: 29px;
    color: var(--body);
    margin: 0;
    max-width: 571px;
}

.chambers-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.chamber-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 12px;
    padding: 19px 21px;
}

.chamber-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e5be6;
    font-size: 13px;
}

.chamber-name {
    display: block;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 16.9px;
    color: #0b1838;
}

.chambers-photo {
    border-radius: 12px;
    overflow: hidden;
}

.chambers-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991.98px) {
    .chambers-area {
        padding: 70px 0;
    }

    .chambers-title {
        font-size: 32px;
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .chambers-photo {
        height: 360px;
    }
}

@media (max-width: 575.98px) {
    .chambers-title {
        font-size: 28px;
    }

    .chambers-text {
        font-size: 16px;
        line-height: 27px;
    }

    .chambers-grid {
        grid-template-columns: 1fr;
    }

    .chambers-photo {
        height: 280px;
    }
}

/* ==========================================================================
   ADAM LATHAM BIO PAGE — hero
   ========================================================================== */

/* === Bio Hero === */
.bio-hero {
    position: relative;
    padding: 170px 0 110px;
    overflow: hidden;
    isolation: isolate;
}

.bio-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(55% 50% at 18% 12%, rgba(212, 226, 250, .55) 0%, rgba(212, 226, 250, 0) 65%),
        radial-gradient(50% 55% at 92% 14%, rgba(206, 221, 248, .5) 0%, rgba(206, 221, 248, 0) 62%),
        linear-gradient(180deg, #eef3fc 0%, #f6f9fe 60%, #ffffff 100%);
}

.bio-hero .breadcrumb-link ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.bio-hero .breadcrumb-link a {
    color: #5b6478;
}

.bio-hero .breadcrumb-link a:hover {
    color: var(--blue);
}

.bio-hero .breadcrumb-link .sep {
    color: #c6d8ef;
}

.bio-hero .breadcrumb-link li[aria-current] {
    color: #0b1838;
    font-weight: 500;
}

.bio-hero-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.1;
    letter-spacing: -2px;
    color: #0b1838;
    margin: 0 0 18px;
}

.bio-hero-role {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 1.55;
    letter-spacing: -0.09px;
    color: #1e5be6;
    margin: 0 0 18px;
}

.bio-hero-rule {
    flex-shrink: 0;
    width: 36px;
    height: 1.5px;
    background: #1e5be6;
    display: inline-block;
}

.bio-hero-lead {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29.7px;
    color: #5b6478;
    margin: 0 0 32px;
    max-width: 672px;
}

.bio-hero-action {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* dark LinkedIn button with "in" chip */
.cta-btn.bio-btn-dark {
    background: #0b1838;
    color: #fff;
    border-radius: 11px;
    box-shadow: 0 4.5px 11px rgba(0, 87, 255, .3);
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
}

.cta-btn.bio-btn-dark:hover {
    background: var(--blue);
    color: #fff;
}

.bio-btn-in {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #fff;
    color: #0b1838;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 11px;
    line-height: 1;
}

/* portrait figure with side tab */
.bio-hero-figure {
    position: relative;
    max-width: 460px;
    margin-left: auto;
}

.bio-hero-photo {
    position: relative;
    z-index: 2;
    border-radius: 21px 21px 0 0;
    overflow: hidden;
}

.bio-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* blue rotated "Vice President" tab on the right edge */
.bio-hero-tab {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 9;
    color: #fff;
    font-weight: 700;
    line-height: 24.8px;
    /* 155% */
    letter-spacing: -0.16px;
    font-family: "Zalando Sans";
}

.bio-hero-sparkle {
    position: absolute;
    right: 30px;
    top: 50px
}

/* Stat bar (shared visual with About banner) */
.bio-stats {
    max-width: 1322px;
    margin: 72px auto 0;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(11, 24, 37, .06);
    border: 1px solid #eef1f7;
}

.bio-stats .row {
    --bs-gutter-x: 0;
}

.bio-stat {
    text-align: center;
    padding: 31px 24px;
    position: relative;
    height: 100%;
}

.bio-stats .col-lg-3:not(:first-child) .bio-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: #eef1f7;
}

.bio-stat-num {
    display: block;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: #0f0f0f;
    margin-bottom: 11px;
}

.bio-stat-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #4c4a54;
}

@media (max-width: 991.98px) {
    .bio-hero {
        padding: 130px 0 80px;
    }

    .bio-hero-name {
        font-size: 52px;
        letter-spacing: -1.4px;
    }

    .bio-hero-figure {
        margin: 40px auto 0;
    }

    .bio-stats .col-6:nth-child(odd) .bio-stat::after {
        content: "";
        position: absolute;
        right: 0;
        top: 24px;
        bottom: 24px;
        width: 1px;
        background: #eef1f7;
    }

    .bio-stats .col-6:nth-child(1) .bio-stat,
    .bio-stats .col-6:nth-child(2) .bio-stat {
        border-bottom: 1px solid #eef1f7;
    }
}

@media (max-width: 575.98px) {
    .bio-hero-name {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .bio-hero-action {
        flex-direction: column;
        align-items: stretch;
    }

    .bio-hero-tab {
        right: -30px;
        width: 110px;
        font-size: 14px;
    }

    .bio-stat-num {
        font-size: 38px;
    }
}

/* === About Adam === */
.about-adam {
    background: #0a1629;
    padding: 50px 0;
    overflow: hidden;
    position: relative;
}

.about-adam-figure {
    position: relative;
    min-width: 568px;
    mix-blend-mode: luminosity;
    float: right
}

/* decorative blue blob behind the portrait */


.about-adam-photo {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.about-adam-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: luminosity;
}

.about-adam-text {
    max-width: 657px;
}

.about-adam-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 32px;
}

.about-adam-text p {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #bfc0c1;
    margin: 0 0 24px;
}

.about-adam-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .about-adam {
        padding: 70px 0;
    }

    .about-adam-figure {
        margin: 0 auto;
    }

    .about-adam-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
    }
}

@media (max-width: 575.98px) {
    .about-adam-title {
        font-size: 32px;
    }

    .about-adam-text p {
        font-size: 16px;
        line-height: 27px;
    }
}

/* === What Adam Leads === */
.adam-leads {
    padding: 96px 0;
    position: relative;
    overflow: hidden
}

.adam-leads.archie-leads::before {
    display: none
}

.adam-leads::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 40%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
    z-index: -1
}

.adam-leads-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #0a1628;
    margin: 0 0 32px;
}

.adam-leads-shape {
    position: absolute;
    left: 0;
    top: -34%;
    height: 100%;
    width: 50%;
    z-index: -1;
}

.archie-leads-shape {
    position: absolute;
    left: 0;
    top: 10%;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.lead-card {
    height: 100%;
    border: 1px solid rgba(66, 82, 110, .13);
    border-radius: 10px;
    padding: 40px 34px;
}

.lead-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 29.7px;
    color: #0a1628;
    margin: 0 0 14px;
}

.lead-card-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 15.3px;
    line-height: 26px;
    color: #42526e;
    margin: 0;
}

@media (max-width: 991.98px) {
    .adam-leads {
        padding: 70px 0;
    }

    .adam-leads-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
        margin-bottom: 28px;
    }
}

@media (max-width: 575.98px) {
    .adam-leads-title {
        font-size: 32px;
    }

    .lead-card {
        padding: 32px 26px;
    }
}

/* ==========================================================================
   COMMUNITY PAGE — hero
   ========================================================================== */

.comm-hero {
    position: relative;
    padding: 170px 0 110px;
    overflow: hidden;
    isolation: isolate;
}

.comm-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60% 60% at 80% 8%, rgba(196, 216, 245, .55) 0%, rgba(196, 216, 245, 0) 65%),
        radial-gradient(45% 50% at 10% 14%, rgba(212, 226, 250, .5) 0%, rgba(212, 226, 250, 0) 60%),
        linear-gradient(180deg, #eef3fc 0%, #f6f9fe 60%, #ffffff 100%);
}

/* community photo sits on the right, fading into the background */
.comm-hero-photo {
    position: absolute;
    width: 51%;
    object-fit: contain;
    right: 0;
    top: 0;
}

.comm-hero-photo.podcast {
    width: 62%
}

.comm-hero-photo.scholarship {
    width: 60%
}

.comm-hero-content {
    max-width: 766px;
}

.comm-hero .breadcrumb-link ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.comm-hero .breadcrumb-link a {
    color: #5b6478;
}

.comm-hero .breadcrumb-link a:hover {
    color: var(--blue);
}

.comm-hero .breadcrumb-link .sep {
    color: #c6d8ef;
}

.comm-hero .breadcrumb-link li[aria-current] {
    color: #0b1838;
    font-weight: 500;
}

.comm-hero-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 73.26px;
    letter-spacing: -1.72px;
    color: #0a1628;
    margin: 0 0 18px;
}

.comm-hero-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #3d4f6b;
    margin: 0 0 32px;
    max-width: 574px;
}

.comm-hero-action {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* Stat bar */
.comm-stats {
    max-width: 1322px;
    margin: 72px auto 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .04);
    border: 1px solid #ededed;
}

.comm-stats .row {
    --bs-gutter-x: 0;
}

.comm-stat {
    text-align: center;
    padding: 31px 24px;
    position: relative;
    height: 100%;
}

.comm-stats .col-lg-3:not(:first-child) .comm-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: #ededed;
}

.comm-stat-num {
    display: block;
    font-family: 'Fustat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: #0f0f0f;
    margin-bottom: 11px;
}

.comm-stat-label {
    display: block;
    font-family: 'Menlo', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: -0.5px;
    color: #4c4a54;
}

@media (max-width: 991.98px) {
    .comm-hero {
        padding: 130px 0 80px;
    }

    .comm-hero-photo {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 520px;
        margin: 32px auto 0;
        -webkit-mask-image: none;
        mask-image: none;
        display: block;
    }

    .comm-hero-title {
        font-size: 44px;
        line-height: 1.18;
        letter-spacing: -1px;
    }

    .comm-stats .col-6:nth-child(odd) .comm-stat::after {
        content: "";
        position: absolute;
        right: 0;
        top: 24px;
        bottom: 24px;
        width: 1px;
        background: #ededed;
    }

    .comm-stats .col-6:nth-child(1) .comm-stat,
    .comm-stats .col-6:nth-child(2) .comm-stat {
        border-bottom: 1px solid #ededed;
    }
}

@media (max-width: 575.98px) {
    .comm-hero-title {
        font-size: 34px;
    }

    .comm-hero-action {
        flex-direction: column;
        align-items: stretch;
    }

    .comm-stat-num {
        font-size: 38px;
    }
}

/* === Community — The Causes We Show Up For === */
.causes-area {
    padding: 96px 0 100px;
    background: #fff;
    position: relative
}

.causes-bg {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: auto
}

.causes-title {
    font-family: 'Fustat', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.88px;
    color: #172b4d;
    margin: 0 0 48px;
}

/* LEFT visual stage */
.causes-stage {
    background: linear-gradient(180deg, #ebf2ff 0%, rgba(235, 242, 255, 0) 100%);
    border-radius: 22px;
    padding: 48px;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.causes-stage-inner {
    position: relative;
    width: 100%;
    max-width: 470px;
    aspect-ratio: 470 / 517;
    border-radius: 12px;
    overflow: hidden;
}

.causes-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .4s ease;
}

.causes-img.is-active {
    opacity: 1;
}

/* RIGHT tablist */
.causes-tablist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cause-tab {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 14px;
    padding: 22px 24px;
    cursor: pointer;
    transition: background .25s ease;
    position: relative;
    z-index: 1
}

.cause-tab.is-active {
    background: #fbfbf9;
}

/* blue left bar */
.cause-bar {
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: #1e5be6;
    opacity: 0;
    transition: opacity .25s ease;
}

.cause-tab.is-active .cause-bar {
    opacity: 1;
}

/* icon tile */
.cause-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(30, 91, 230, .1);
    color: #1e5be6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: background .25s ease, color .25s ease;
}

.cause-tab.is-active .cause-icon {
    background: #1e5be6;
    color: #fff;
}

.cause-icon .white {
    display: none
}

.cause-tab.is-active .cause-icon .white {
    display: block
}

.cause-tab.is-active .cause-icon .blue {
    display: none
}

.cause-icon svg {
    display: block;
}

.cause-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cause-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.2px;
    color: #0b1838;
}

.cause-org {
    font-family: 'Menlo', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 11px;
    line-height: 16.5px;
    letter-spacing: 1.1px;
    color: #6b778c;
}

.cause-desc {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #5b6478;
}

.cause-strong {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    color: #0b1838;
}

@media (max-width: 991.98px) {
    .causes-area {
        padding: 70px 0;
    }

    .causes-title {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 32px;
    }

    .causes-stage {
        padding: 32px;
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .causes-title {
        font-size: 30px;
    }

    .cause-tab {
        padding: 18px 18px 18px 20px;
        column-gap: 14px;
    }
}

/* === Community — Where Else You Will Find Us === */
.whereelse-area {
    padding: 50px 0 100px;
    background: #0a1628;
    position: relative;
}

.whereelse-area .container {
    position: relative;
    z-index: 9
}

.whereelse-left-shape {
    position: absolute;
    left: 0;
    bottom: -60%
}

.whereelse-right-shape {
    position: absolute;
    right: 0;
    bottom: 0
}

.whereelse-content {
    max-width: 620px;
}

.whereelse-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 16px;
}

.whereelse-lead {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #bfc0c1;
    margin: 0 0 23px;
}

.whereelse-list {
    list-style: none;
    margin: 0 0 31px;
    padding: 0;
    counter-reset: none;
}

.whereelse-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0 15px;
    border-bottom: 1px solid rgba(223, 225, 230, .2);
}

.whereelse-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e6effc;
    color: #0a1628;
    font-family: 'Menlo', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whereelse-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 18.2px;
    color: #fff;
}

.whereelse-action {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

/* outlined button reads white on the dark band */
.cta-btn.whereelse-ghost {
    color: #fff;
    border-color: #a6b8de;
}

.cta-btn.whereelse-ghost:hover {
    background: #fff;
    color: #0a1628;
    border-color: #fff;
}

.whereelse-photo {
    height: 559px;
    border-radius: 12px;
    overflow: hidden;
    background: #11203a;
}

.whereelse-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991.98px) {
    .whereelse-area {
        padding: 70px 0;
    }

    .whereelse-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .whereelse-photo {
        height: 380px;
    }
}

@media (max-width: 575.98px) {
    .whereelse-title {
        font-size: 32px;
    }

    .whereelse-action {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    .whereelse-photo {
        height: 300px;
    }
}

/* ==========================================================================
   PORTFOLIO PAGE — hero
   ========================================================================== */
.pf-hero {
    position: relative;
    padding: 170px 0 110px;
    overflow: hidden;
    isolation: isolate;
}

.portfolio-banner-shape {
    position: absolute;
    right: 0;
    top: 0;
    width: 52%;
}

.pf-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(55% 55% at 85% 6%, rgba(196, 216, 245, .55) 0%, rgba(196, 216, 245, 0) 62%),
        radial-gradient(50% 55% at 8% 16%, rgba(212, 226, 250, .5) 0%, rgba(212, 226, 250, 0) 60%),
        linear-gradient(180deg, #ebf2ff 0%, rgba(235, 242, 255, 0) 62%, #ffffff 100%);
}

.pf-hero .breadcrumb-link ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.pf-hero .breadcrumb-link a {
    color: #5b6478;
}

.pf-hero .breadcrumb-link a:hover {
    color: var(--blue);
}

.pf-hero .breadcrumb-link .sep {
    color: #c6d8ef;
}

.pf-hero .breadcrumb-link li[aria-current] {
    color: #0b1838;
    font-weight: 500;
}

.pf-hero-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.12;
    letter-spacing: -1.72px;
    color: #0a1628;
    margin: 0 0 18px;
}

.pf-hero-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;
    color: #3d4f6b;
    margin: 0 0 32px;
    max-width: 520px;
}

.pf-hero-action {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

/* ---- floating visual ---- */


@media (max-width: 991.98px) {
    .pf-hero {
        padding: 130px 0 80px;
    }

    .pf-hero-title {
        font-size: 44px;
        letter-spacing: -1px;
    }

    .pf-visual {
        margin: 30px auto 0;
    }
}

@media (max-width: 575.98px) {
    .pf-hero-title {
        font-size: 34px;
    }

    .pf-hero-action {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-visual {
        padding: 20px 16px 60px 0;
    }

    .pf-chart {
        width: 210px;
        right: 0;
    }

    .pf-cursor {
        display: none;
    }
}

/* === Portfolio — Custom Software We Have Built === */
.custombuilt-area {
    padding: 20px 0 100px;
    background: #0a1628;
    position: relative
}

.custombuilt-area .container {
    position: relative;
    z-index: 9
}

.custombuilt-shape {
    position: absolute;
    left: 0;
    bottom: -50%;
}

.z-99 {
    position: relative;
    z-index: 9
}

.custombuilt-head {
    margin-bottom: 56px;
}

.custombuilt-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0;
}

.custombuilt-intro {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;
    color: #bfc0c1;
    margin: 0;
}

.cb-group {
    margin-top: 48px;
}

.cb-label {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 2.93px;
    color: #fff;
    margin: 0 0 28px;
}

.cb-article {
    height: 100%;
    border-top: 4px solid rgba(255, 255, 255, .1);
    padding-top: 29px;
}

.cb-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 39.5px;
    color: #fff;
    margin: 0 0 8px;
}

.cb-desc {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29.6px;
    color: #bbbbbb;
    margin: 0 0 18px;
}

.cb-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.5;
    color: #3a7bff;
}

.cb-link span {
    transition: transform .2s ease;
}

.cb-link:hover {
    color: #6ba6ff;
}

.cb-link:hover span {
    transform: translateX(4px);
}

@media (max-width: 991.98px) {
    .custombuilt-area {
        padding: 70px 0;
    }

    .custombuilt-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .custombuilt-head {
        margin-bottom: 40px;
    }
}

@media (max-width: 575.98px) {
    .custombuilt-title {
        font-size: 32px;
    }

    .cb-name {
        font-size: 22px;
        line-height: 1.3;
    }

    .cb-desc {
        font-size: 16px;
        line-height: 27px;
    }
}

/* === Portfolio — What We Build === */
.wwb-area {
    padding: 96px 0 100px;
    position: relative
}

.wwb-area.v2 {
    padding-bottom: 150px
}

.wwb-area .container {
    position: relative;
    z-index: 100
}

.wwb-area-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
}

.wwb-head {
    margin-bottom: 48px;
}

.wwb-title {
    font-family: 'Fustat', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.88px;
    color: #172b4d;
    margin: 0;
}

.wwb-intro {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;
    color: #3d4f6b;
    margin: 0;
}

.wwb-card {
    height: 100%;
    background: #fff;
    border: 1px solid #dfe1e6;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    display: flex;
    flex-direction: column;
    transition: all 0.4s
}

.wwb-card:hover {
    transform: translateY(-10px)
}

/* illustration frame */
.wwb-illu {
    height: 140px;
    margin-bottom: 24px;
    border-radius: 8px;
}

.wwb-illu img {
    width: 100%
}

/* shared inner illustration tile */
/* kanban board */
.wwb-board {
    height: 104px;
    padding: 14px;
}

.wwb-board-head {
    display: block;
    width: 70%;
    height: 10px;
    border-radius: 4px;
    background: rgba(0, 82, 204, .25);
    margin-bottom: 14px;
}

.wwb-cols {
    display: flex;
    gap: 10px;
}

.wwb-cols i {
    flex: 1;
    height: 48px;
    border-radius: 5px;
    background: rgba(0, 82, 204, .12);
}

/* phone */
.wwb-phone {
    width: 70px;
    height: 104px;
    border-radius: 14px;
    padding: 12px 10px;
    position: relative;
}

.wwb-notch {
    display: block;
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: rgba(0, 82, 204, .3);
    margin: 0 auto 12px;
}

.wwb-phone-lines {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.wwb-phone-lines i {
    height: 9px;
    border-radius: 3px;
    background: rgba(0, 82, 204, .2);
}

.wwb-phone-lines i.short {
    width: 55%;
}

/* toggles */
.wwb-toggles {
    width: auto;
    background: none;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wwb-toggle {
    width: 56px;
    height: 26px;
    border-radius: 14px;
    background: rgba(0, 82, 204, .15);
    position: relative;
    display: block;
}

.wwb-toggle i {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.wwb-toggle.on {
    background: #0057ff;
}

.wwb-toggle.on i {
    left: auto;
    right: 4px;
}

/* chart */
.wwb-chart {
    width: auto;
    background: none;
    border: 0;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 90px;
}

.wwb-chart span {
    width: 18px;
    height: var(--h);
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #6ba6ff, #0057ff);
}

/* api nodes */
.wwb-api {
    width: auto;
    background: none;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: center;
    max-width: 150px;
}

.wwb-node {
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: #0057ff;
    background: #e6effc;
    border: 1px solid rgba(0, 82, 204, .2);
    border-radius: 5px;
    padding: 4px 8px;
}

.wwb-node.alt {
    color: #233566;
    background: #eef1f7;
}

.wwb-pill {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #0057ff;
    border-radius: 6px;
    padding: 4px 12px;
}

/* ai */
.wwb-ai {
    width: 120px;
    height: 96px;
    padding: 16px;
    position: relative;
}

.wwb-ai-lines {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.wwb-ai-lines i {
    height: 10px;
    border-radius: 4px;
    background: rgba(0, 82, 204, .2);
}

.wwb-ai-lines i.short {
    width: 55%;
}

.wwb-spark {
    position: absolute;
    right: 10px;
    bottom: 8px;
    color: #0057ff;
    font-size: 18px;
}

.wwb-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    color: #172b4d;
    margin: 0 0 8px;
}

.wwb-desc {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #42526e;
    margin: 0 0 18px;
    flex: 1 1 auto;
}

.wwb-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    color: #3a7bff;
    margin-top: auto;
}

.wwb-link span {
    transition: transform .2s ease;
}

.wwb-link:hover {
    color: #0057ff;
}

.wwb-link:hover span {
    transform: translateX(4px);
}

/* CTA card */
.wwb-cta {
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #0052CC;
    padding: 56px 52px;
    display: flex;
    align-items: center;
}

.wwb-cta-shape {
    position: absolute;
    top: 0;
    left: 0
}

.wwb-cta-content {
    position: relative;
    z-index: 2;
    max-width: 420px;
}

.wwb-cta-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.6px;
    color: #fff;
    margin: 0 0 12px;
}

.wwb-cta-content .cta-btn {
    background: #fff;
    color: #0052CC
}

.wwb-cta-rings {
    position: absolute;
    right: 0;
    top: 0
}

.wwb-cta-rings-bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 27%;
}

.wwb-cta-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #d6e2ff;
    margin: 0 0 24px;
}

@media (max-width: 991.98px) {
    .wwb-area {
        padding: 70px 0;
    }

    .wwb-title {
        font-size: 36px;
        line-height: 1.2;
    }

    .wwb-head {
        margin-bottom: 36px;
    }

    .wwb-cta {
        padding: 44px 36px;
    }
}

@media (max-width: 575.98px) {
    .wwb-title {
        font-size: 30px;
    }

    .wwb-cta-title {
        font-size: 24px;
    }

    .wwb-cta-rings {
        display: none;
    }
}

/* === Portfolio — What Sets Double A Apart === */
.wsa-area {
    padding: 96px 0 100px;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%)
}

.wsa-area.v2 {
    background: #fff;
    position: relative
}

.wsa-area.v2.gradient {
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%)
}

.wsa-area.v2 .container {
    position: relative;
    z-index: 9
}

.wsa-shape-left {
    position: absolute;
    left: 0;
    top: -30%
}

.wsa-shape-right {
    position: absolute;
    right: 0;
    bottom: -30%
}

.wsa-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #0a1628;
    margin: 0 0 56px;
}

.wsa-item {
    margin-bottom: 40px;
}

.wsa-item:last-child {
    margin-bottom: 0;
}

.wsa-num {
    display: block;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.6px;
    color: #0a1628;
}

.wsa-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.6px;
    color: #0a1628;
    margin: 0 0 12px;
}

.wsa-desc {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.14px;
    color: #42526e;
    margin: 0;
    max-width: 360px;
}

/* center circular image */
.wsa-figure {
    position: relative;
    width: 100%;
    max-width: 448px;
    margin: 0 auto;
    aspect-ratio: 1;
}

.wsa-figure .sparkle {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9;
}


.wsa-circle {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.wsa-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* right column items align text to the right on desktop */
@media (min-width: 992px) {
    .wsa-grid .order-lg-3 .wsa-item {
        text-align: right;
    }

    .wsa-grid .order-lg-3 .wsa-desc {
        margin-left: auto;
    }
}

@media (max-width: 991.98px) {
    .wsa-area {
        padding: 70px 0;
    }

    .wsa-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
        margin-bottom: 40px;
    }

    .wsa-figure {
        max-width: 360px;
        margin: 8px auto 40px;
    }

    .wsa-desc {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .wsa-title {
        font-size: 32px;
    }
}

/* ==========================================================================
   CAREERS PAGE — hero (centered)
   ========================================================================== */
.cr-hero {
    position: relative;
    padding: 150px 0 110px;
    overflow: hidden;
    isolation: isolate;
}

.cr-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 55% at 50% 0%, rgba(196, 216, 245, .5) 0%, rgba(196, 216, 245, 0) 70%),
        radial-gradient(45% 50% at 10% 14%, rgba(212, 226, 250, .45) 0%, rgba(212, 226, 250, 0) 60%),
        radial-gradient(45% 50% at 90% 16%, rgba(206, 221, 248, .42) 0%, rgba(206, 221, 248, 0) 60%),
        linear-gradient(180deg, #eef3fc 0%, #f6f9fe 60%, #ffffff 100%);
}

.cr-hero .breadcrumb-link ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.cr-hero .breadcrumb-link a {
    color: #5b6478;
}

.cr-hero .breadcrumb-link a:hover {
    color: var(--blue);
}

.cr-hero .breadcrumb-link .sep {
    color: #c6d8ef;
}

.cr-hero .breadcrumb-link li[aria-current] {
    color: #0b1838;
    font-weight: 500;
}

.cr-hero-head {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.cr-hero-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 1.2;
    letter-spacing: -1.72px;
    color: #0a1628;
    margin: 0 0 24px;
}

.cr-hero-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;
    color: #3d4f6b;
    margin: 0 0 32px;
}

.cr-hero-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

@media (max-width: 991.98px) {
    .cr-hero {
        padding: 120px 0 80px;
    }

    .cr-hero-title {
        font-size: 44px;
        letter-spacing: -1px;
    }
}

@media (max-width: 575.98px) {
    .cr-hero-title {
        font-size: 34px;
    }

    .cr-hero-action {
        flex-direction: column;
        align-items: stretch;
    }
}

/* === Careers — We Are Double A Solutions === */
.weare-area {
    position: relative;
    padding: 70px 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
    isolation: isolate;
}

.weare-bg {
    position: absolute;
    width: 100%;
    height: 180%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
    z-index: -1
}

/* blue wave flowing in from the right edge */
.weare-wave {
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0;
    width: 60%;
    pointer-events: none;
}

.weare-inner {
    max-width: 460px;
}

.weare-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -1.5px;
    color: #0a1628;
    margin: 0 0 16px;
}

.weare-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #3d4f6b;
    margin: 0;
}

/* video / app card */
.weare-video {
    position: relative;
    width: 100%;
    margin-left: auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 60px -26px rgba(11, 24, 56, .4);
}

.weare-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.weare-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;
    border: 2px solid rgba(255, 255, 255, .8);
    transition: transform .2s ease, background .2s ease;
}

.weare-play img {
    width: 80%
}

.weare-play:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(255, 255, 255, .55);
}

@media (max-width: 991.98px) {
    .weare-area {
        padding: 50px 0;
    }

    .weare-title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .weare-inner {
        max-width: none;
    }

    .weare-wave {
        display: none;
    }

    .weare-video {
        margin: 8px auto 0;
    }
}

@media (max-width: 575.98px) {
    .weare-title {
        font-size: 30px;
    }

    .weare-play {
        width: 54px;
        height: 54px;
        font-size: 16px;
    }
}

/* === Video Modal (lightbox) === */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}

.video-modal[hidden] {
    display: flex;
    /* override default to allow transition */
}

.video-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 12, 26, .82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.video-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 960px;
    transform: scale(.96);
    transition: transform .25s ease;
}

.video-modal.is-open .video-modal-dialog {
    transform: scale(1);
}

.video-modal-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}

.video-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal-close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #0a1628;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px -4px rgba(0, 0, 0, .5);
    transition: transform .2s ease;
    z-index: 2;
}

.video-modal-close:hover {
    transform: scale(1.08);
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 575.98px) {
    .video-modal-close {
        top: -48px;
        right: 0;
    }
}

/* === Careers — Open Roles === */
.roles-area {
    padding: 40px 0 150px;
}

.roles-area .container {
    position: relative;
    z-index: 9
}

.roles-title {
    font-family: 'Fustat', 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.88px;
    color: #172b4d;
    margin: 0 0 32px;
}

.roles-card {
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 24, 56, .04), 0 8px 24px -8px rgba(11, 24, 56, .08);
}

.roles-table {
    width: 100%;
}

.roles-head,
.roles-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) 130px;
    column-gap: 24px;
    align-items: center;
    padding: 0 28px;
}

.roles-head {
    background: #fafbfe;
    border-bottom: 1px solid #eef1f7;
    min-height: 53px;
}

.roles-th {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    line-height: 1.55;
    letter-spacing: 2.31px;
    text-transform: uppercase;
    color: #8a93a8;
}

.roles-row {
    min-height: 83px;
    border-bottom: 1px solid #eef1f7;
}

.roles-role {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.roles-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--dot, #1e5be6);
}

.roles-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 21.25px;
    letter-spacing: -0.204px;
    color: #0b1838;
}

.roles-badge {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 1.98px;
    text-transform: uppercase;
    color: #16a34a;
    background: rgba(22, 163, 74, .1);
    border-radius: 5px;
    padding: 3px 7px;
}

.roles-dept {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 13.5px;
    line-height: 20.93px;
    color: #5b6478;
}

.roles-loc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 400;
    font-size: 13.5px;
    line-height: 20.93px;
    color: #5b6478;
}

.roles-loc em {
    font-size: 12px;
    color: #8a93a8;
}

.roles-action {
    justify-self: start;
}

.roles-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f4f7fe;
    border: 1px solid #bbd0ff;
    border-radius: 8px;
    padding: 9px 15px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.55;
    color: #1e5be6;
    white-space: nowrap;
    transition: background .2s ease;
}

.roles-link em {
    font-size: 10px;
    transition: transform .2s ease;
}

.roles-link:hover {
    background: #e6efff;
    color: #1e5be6;
}

.roles-link:hover em {
    transform: translateX(3px);
}

/* footer */
.roles-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fafbfe;
    border-top: 1px solid #eef1f7;
    padding: 22px 28px;
}

.roles-note {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 13px;
    line-height: 1.55;
    color: #5b6478;
}

.roles-note em {
    color: #16a34a;
    font-size: 13px;
}

.roles-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    color: #1e5be6;
}

.roles-all em {
    font-size: 11px;
    transition: transform .2s ease;
}

.roles-all:hover {
    color: #1e5be6;
}

.roles-all:hover em {
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .roles-area {
        padding: 24px 0 70px;
    }

    .roles-title {
        font-size: 36px;
        line-height: 1.2;
    }
}

/* stacked card layout on small screens */
@media (max-width: 767.98px) {
    .roles-head {
        display: none;
    }

    .roles-row {
        grid-template-columns: 1fr;
        row-gap: 8px;
        padding: 20px 22px;
        min-height: 0;
    }

    .roles-role {
        margin-bottom: 2px;
    }

    .roles-dept::before {
        content: "Department · ";
        color: #8a93a8;
    }

    .roles-action {
        margin-top: 6px;
    }

    .roles-link {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .roles-title {
        font-size: 30px;
    }
}

/* === Careers — Life at Double A === */
.life-area {
    padding: 40px 0 70px;
    background: #0a1628;
    position: relative
}

.life-area .container {
    position: relative;
    z-index: 9
}

.life-area-shape {
    position: absolute;
    top: -30%;
    left: 0;
}

.life-content {
    max-width: 620px;
}

.life-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 20px;
}

.life-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    color: #bfc0c1;
    margin: 0;
}

.life-photo {
    border-radius: 16px;
    overflow: hidden;
}

.life-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === Careers — Apply Directly === */
.apply-area {
    padding: 0;
    margin-top: -200px
}

.apply-card {
    position: relative;
    background: #102443;
    border: 1px solid rgba(238, 241, 247, .07);
    border-radius: 18px;
    padding: 52px;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
}

.apply-rings {
    position: absolute;
    z-index: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}

.apply-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 39.6px;
    letter-spacing: -0.648px;
    color: #fff;
    margin: 0 0 12px;
}

.apply-title em {
    font-style: italic;
    font-weight: 700;
}

.apply-text {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 24px;
    color: #bfc0c1;
    margin: 0;
    max-width: 420px;
}

.apply-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.apply-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #091c3c;
    border: 1px solid rgba(238, 241, 247, .07);
    border-radius: 12px;
    padding: 15px 17px;
}

.apply-ic {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(30, 91, 230, .1);
    color: #6ba6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.apply-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.apply-label {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 15.5px;
    letter-spacing: 2.2px;
    color: #8a93a8;
}

.apply-value {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 17.4px;
    letter-spacing: -0.072px;
    color: #fff;
    word-break: break-word;
}

.apply-value:hover {
    color: #6ba6ff;
}

@media (max-width: 991.98px) {
    .life-area {
        padding: 70px 0;
    }

    .life-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .life-content {
        max-width: none;
    }

    .apply-area {
        padding: 0 0 70px;
    }

    .apply-card {
        padding: 40px 32px;
    }

    .apply-rings {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .life-title {
        font-size: 32px;
    }

    .apply-title {
        font-size: 30px;
    }
}

/* === Careers — Internships === */
.intern-area {
    padding: 96px 0;
    background: #fff;
}

.intern-title {
    font-family: 'Fustat', 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.88px;
    color: #172b4d;
    margin: 0 0 40px;
}

.intern-card {
    height: 100%;
    background: #fff;
    border: 1px solid #eef1f7;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s
}

.intern-card:hover {
    transform: translateY(-10px)
}

.intern-photo {
    display: block;
    height: 301px;
    background: #eef1f7;
}

.intern-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.intern-body {
    padding: 28px 30px 30px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.intern-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 2.42px;
    color: #1e5be6;
    margin-bottom: 16px;
}

.intern-rule {
    width: 24px;
    height: 1.5px;
    background: #1e5be6;
    display: inline-block;
    flex-shrink: 0;
}

.intern-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 25.3px;
    letter-spacing: -0.396px;
    color: #0b1838;
    margin: 0 0 12px;
}

.intern-desc {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 23.2px;
    color: #5b6478;
    margin: 0 0 24px;
    flex: 1 1 auto;
}

.intern-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #eef1f7;
    padding-top: 19px;
}

.intern-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.55;
    color: #8a93a8;
}

.intern-meta em {
    font-size: 12px;
    color: #8a93a8;
}

.intern-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0b1838;
    border-radius: 9px;
    padding: 10px 16px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.55;
    color: #fff;
    transition: background .2s ease;
}

.intern-btn em {
    font-size: 11px;
    transition: transform .2s ease;
}

.intern-btn:hover,
.intern-card:hover .intern-btn {
    background: #1e5be6;
    color: #fff;
}

.intern-btn:hover em {
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .intern-area {
        padding: 70px 0;
    }

    .intern-title {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 32px;
    }
}

@media (max-width: 575.98px) {
    .intern-title {
        font-size: 28px;
    }

    .intern-photo {
        height: 230px;
    }

    .intern-body {
        padding: 24px 22px 26px;
    }
}

/* === Careers — Where to Find Us on Campus === */
.campus-area {
    padding: 96px 0;
    background: linear-gradient(178deg, #EBF2FF 1.7%, rgba(235, 242, 255, 0.00) 96.98%)
}

.campus-title {
    font-family: 'Fustat', 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 60px;
    letter-spacing: -0.88px;
    color: #172b4d;
    margin: 0 0 38px;
}

/* single white panel split into two halves by a vertical divider */
.campus-panel {

    border-radius: 12px;
    overflow: hidden;
}

.campus-card {
    height: 100%;
    padding: 32px;
    border-radius: 12px;
    background: #fff;
}

/* vertical divider between the two columns */
.campus-card-left {
    border-right: 1px solid #e2e2dd;
}

.campus-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 13px;
}



.campus-namewrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.campus-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
    letter-spacing: -0.24px;
    color: #0b1838;
}

.campus-sub {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 12.65px;
    letter-spacing: 0.44px;
    color: #5b6478;
}

.campus-desc {
    font-family: 'Schibsted Grotesk', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 15.2px;
    line-height: 24.32px;
    color: #3c3c3c;
    margin: 0 0 13px;
}

.campus-label {
    display: block;
    font-family: 'Schibsted Grotesk', 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 17.11px;
    letter-spacing: 1.435px;
    color: #8a8a86;
    padding-top: 7px;
    margin-bottom: 4px;
}

.campus-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.campus-item {
    font-family: 'Schibsted Grotesk', 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14.7px;
    line-height: 21.34px;
    color: #111;
    border-bottom: 1px solid #e2e2dd;
    padding: 8.6px 0 10.9px;
}

.campus-item:last-child {
    border-bottom: 0;
}

@media (max-width: 991.98px) {
    .campus-area {
        padding: 70px 0;
    }

    .campus-title {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 32px;
    }
}

@media (max-width: 767.98px) {

    /* stack: divider becomes a bottom border */
    .campus-card-left {
        border-right: 0;
        border-bottom: 1px solid #e2e2dd;
    }
}

@media (max-width: 575.98px) {
    .campus-title {
        font-size: 28px;
    }

    .campus-card {
        padding: 26px 22px;
    }

    .campus-name {
        font-size: 18px;
    }
}

/* === Careers — CTA Cards === */
.ccta-area {
    padding: 0;
    background: #fff;
    position: relative
}

.ccta-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.ccta-card {
    height: 100%;
    min-height: 230px;
    border-radius: 12px;
    overflow: hidden;
    padding: 50px;
    display: flex;
    align-items: flex-start;
}

.ccta-blue {
    background: #0052CC;
}

.ccta-dark {
    background: #0B1838;
}

/* concentric rings, top-right */
.ccta-rings {
    position: absolute;
    top: 0;
    right: 0;

}

.ccta-gradiant {
    position: absolute;
    right: 0;
    top: 0
}

.ccta-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    max-width: 480px;
}

.ccta-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.66px;
    color: #fff;
    margin: 0;
}

.ccta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 14px 22px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.075px;
    line-height: 1;
    white-space: nowrap;
}

.ccta-btn em {
    font-size: 12px;
    transition: transform .2s ease;
}

.ccta-btn:hover em {
    transform: translateX(3px);
}

.ccta-btn-amber {
    background: #fcc419;
    color: #0b1838;
    box-shadow: 0 8px 24px -6px rgba(252, 196, 25, .45);
}

.ccta-btn-amber:hover {
    background: #f5b800;
    color: #0b1838;
}

.ccta-btn-light {
    background: #fff;
    color: #0b1838;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .3);
}

.ccta-btn-light:hover {
    background: #f1f4fa;
    color: #0b1838;
}

@media (max-width: 991.98px) {
    .ccta-area {
        padding: 0 0 70px;
    }

    .ccta-card {
        padding: 40px 32px;
        min-height: 0;
    }

    .ccta-title {
        font-size: 26px;
        line-height: 1.25;
    }
}

@media (max-width: 575.98px) {
    .ccta-title {
        font-size: 23px;
    }

    .ccta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   CUSTOM SOFTWARE DEV PAGE — hero (centered + stat bar)
   ========================================================================== */
.csd-hero {
    position: relative;
    padding: 150px 0 110px;
    overflow: hidden;
    isolation: isolate;
}

.csd-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 55% at 50% 0%, rgba(196, 216, 245, .5) 0%, rgba(196, 216, 245, 0) 70%),
        radial-gradient(45% 50% at 10% 14%, rgba(212, 226, 250, .45) 0%, rgba(212, 226, 250, 0) 60%),
        radial-gradient(45% 50% at 90% 16%, rgba(206, 221, 248, .42) 0%, rgba(206, 221, 248, 0) 60%),
        linear-gradient(180deg, #ebf2ff 0%, #f6f9fe 60%, #ffffff 100%);
}

.csd-hero .breadcrumb-link ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 40px;
    padding: 0;
    list-style: none;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.csd-hero .breadcrumb-link a {
    color: #5b6478;
}

.csd-hero .breadcrumb-link a:hover {
    color: var(--blue);
}

.csd-hero .breadcrumb-link .sep {
    color: #c6d8ef;
}

.csd-hero .breadcrumb-link li[aria-current] {
    color: #0b1838;
    font-weight: 500;
}

.csd-hero-head {
    max-width: 1010px;
    margin: 0 auto;
    text-align: center;
}

.csd-hero-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 73.26px;
    letter-spacing: -1.72px;
    color: #0a1628;
    margin: 0 0 13px;
}

.csd-hero-text {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;
    color: #3d4f6b;
    margin: 0 auto 32px;
    max-width: 800px;
}

.csd-hero-action {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* Stat bar */
.csd-stats {
    max-width: 1322px;
    margin: 64px auto 0;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .04);
    border: 1px solid #ededed;
}

.csd-stats .row {
    --bs-gutter-x: 0;
}

.csd-stat {
    text-align: center;
    padding: 31px 24px;
    position: relative;
    height: 100%;
}

.csd-stats .col-lg-3:not(:first-child) .csd-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 28px;
    bottom: 28px;
    width: 1px;
    background: #ededed;
}

.csd-stat-num {
    display: block;
    font-family: 'Fustat', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2px;
    color: #0f0f0f;
    margin-bottom: 11px;
}

.csd-stat-label {
    display: block;
    font-family: 'Menlo', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: 14px;
    line-height: 1.7;
    letter-spacing: -0.5px;
    color: #4c4a54;
}

@media (max-width: 991.98px) {
    .csd-hero {
        padding: 120px 0 80px;
    }

    .csd-hero-title {
        font-size: 44px;
        line-height: 1.18;
        letter-spacing: -1px;
    }

    .csd-stats .col-6:nth-child(odd) .csd-stat::after {
        content: "";
        position: absolute;
        right: 0;
        top: 24px;
        bottom: 24px;
        width: 1px;
        background: #ededed;
    }

    .csd-stats .col-6:nth-child(1) .csd-stat,
    .csd-stats .col-6:nth-child(2) .csd-stat {
        border-bottom: 1px solid #ededed;
    }
}

@media (max-width: 575.98px) {
    .csd-hero-title {
        font-size: 32px;
    }

    .csd-hero-action {
        flex-direction: column;
        align-items: stretch;
    }

    .csd-stat-num {
        font-size: 38px;
    }
}

/* === Custom Software — More Than Just a Dev Shop === */
.devshop-area {
    padding: 40px 0 96px;
    background: #0a1628;
    position: relative;
    z-index: 99
}

.devshop-area .container {
    position: relative;
    z-index: 9
}

.devshop-shape {
    position: absolute;
    top: -45%;
    left: 0;
    z-index: 1;
    width: 50%
}

.devshop-shape2 {
    position: absolute;
    bottom: -50%;
    left: -20%;
    width: 50%
}

.devshop-photo {
    border-radius: 12px;
    background: #11203a;
}

.launch-update-photo {
    position: relative
}

.launch-tab {
    position: absolute;
    left: -60px;
    bottom: -80px;
}

.devshop-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.devshop-content {
    max-width: 620px;
}

.devshop-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 16px;
}

.devshop-text {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 29px;
    color: #bfc0c1;
    margin: 0 0 20px;
}

.devshop-text:last-child {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
    .devshop-area {
        padding: 70px 0;
    }

    .devshop-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .devshop-content {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .devshop-title {
        font-size: 32px;
    }

    .devshop-text {
        font-size: 16px;
        line-height: 27px;
    }
}

/* === Custom Software — Who We Build Software For === */
.whobuild-area {
    padding: 96px 0;
    background: #0a1628;
    position: relative;
    overflow: visible
}

.whobuild-area.v2 {
    background: #fff
}

.divider.blue {
    background: #0a1628;
}

.whobuild-area.v2 .whobuild-title {
    color: #0A1628;
}

.whobuild-area.v2 .whobuild-text {
    color: #172B4D
}

.whobuild-area.v2 .whobuild-item {
    border-bottom: 1px solid #DFE1E6;
    padding-bottom: 10px
}

.whobuild-area.v2 .whobuild-item:last-child {
    border: none;
    padding-bottom: 0
}

.whobuild-shape {
    position: absolute;
    top: -14%;
    right: 0;
    width: 50%;
}

.whobuild-shape2 {
    position: absolute;
    right: 0;
    top: -58px;
    width: 50%;
}
img.whobuild-shape2.left {
    right: auto;
    left: 0;
    transform: scaleX(-1);
}
.whobuild-blue-shape {
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: 50%
}

.whobuild-area .container {
    position: relative;
    z-index: 9
}

.whobuild-content {
    max-width: 620px;
}

.whobuild-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 16px;
}

.whobuild-lead {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;

    margin: 0 0 23px;
}

.whobuild-area:not(.v2) .whobuild-lead {
    color: #bfc0c1;
}

.whobuild-list {
    list-style: none;
    margin: 0 0 23px;
    padding: 0;
    max-width: 519px;
}

.whobuild-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px
}

.whobuild-item:last-child {
    margin-bottom: 0
}

.whobuild-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e6effc;
    color: #0a1628;
    font-family: 'Menlo', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whobuild-text {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    color: #fff;
}

.whobuild-note {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;
    color: #bfc0c1;
    margin: 0;
    max-width: 519px;
}

.native-card {
    padding: 24px;
    border-radius: 18px;
}

.native-card.bg-light {
    border: 1px solid #EEF1F7;
    background: #FAFBFE;
}

.native-card.bg-yellow {
    border: 1px solid #FCD888;
    background: #FFFCF2;
}

.native-card .icon {
    width: 40px;
    margin-bottom: 20px
}

.native-card .title {
    font-size: 17px
}

.native-card ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.native-card li {
    font-size: 14px
}

.native-card li span {
    margin-right: 10px
}

.native-content .heading {
    font-size: 40px
}

.native-content p {
    margin-bottom: 0
}

.native-performance {
    padding-bottom: 90px
}

/* dashboard card */
.whobuild-visual {
    max-width: 560px;
    margin-left: auto;
}

.dash-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 24, 56, .04), 0 30px 70px -26px rgba(0, 0, 0, .5);
}

.dash-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #f4f6fb;
    border-bottom: 1px solid #eef1f7;
}

.dash-dots {
    display: flex;
    gap: 7px;
}

.dash-dots i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfd6e4;
}

.dash-url {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #7a8398;
}

.dash-body {
    padding: 22px;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.dash-stat {
    border: 1px solid #eef1f7;
    border-radius: 10px;
    padding: 13px 14px;
}

.dash-stat-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    color: #8a93a8;
    margin-bottom: 6px;
}

.dash-stat-val {
    display: block;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: #0b1838;
}

.dash-up {
    color: #16a34a;
}

.dash-chartline {
    height: 64px;
    border-radius: 10px;
    margin-bottom: 16px;
    background:
        linear-gradient(180deg, rgba(0, 87, 255, .12) 0%, rgba(0, 87, 255, 0) 100%),
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(0, 87, 255, .06) 38px 39px);
    position: relative;
    overflow: hidden;
}

.dash-chartline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background:
        radial-gradient(120% 90% at 0% 100%, rgba(0, 87, 255, .35), transparent 60%),
        radial-gradient(120% 120% at 60% 100%, rgba(0, 87, 255, .25), transparent 55%);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000);
    mask-image: linear-gradient(180deg, transparent, #000);
}

.dash-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dash-row {
    display: block;
    height: 9px;
    width: var(--w);
    border-radius: 5px;
    background: linear-gradient(90deg, #eef1f8, #e2e8f0);
}

.dash-row-full {
    background: linear-gradient(90deg, #cfe0ff, #e6effc);
}

@media (max-width: 991.98px) {
    .whobuild-area {
        padding: 70px 0;
    }

    .whobuild-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .whobuild-content {
        max-width: none;
    }

    .whobuild-visual {
        margin: 8px auto 0;
    }
}

@media (max-width: 575.98px) {
    .whobuild-title {
        font-size: 32px;
    }

    .whobuild-text {
        font-size: 16px;
    }

    .whobuild-lead,
    .whobuild-note {
        font-size: 16px;
        line-height: 27px;
    }

    .dash-stat-val {
        font-size: 18px;
    }
}

/* === Custom Software — How We Work === */
.howwork-area {
    padding: 0 0 100px;
    background: #0a1628;
    position: relative;
    z-index: 9
}

.howwork-area.v2 {
    position: relative;
    z-index: 99
}

.howwork-shape {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
}

.howwork-head {
    margin: 0 auto 50px;
}

.howwork-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 16px;
}

.howwork-lead {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;
    color: #bfc0c1;
    margin: 0;
}

/* 5-stage timeline */
.howwork-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    margin-bottom: 56px;
}

/* horizontal line through the icon centers */
.howwork-divider {
    display: none;
}
.howwork-divider--legacy {
    position: absolute;
    top: 42px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(255, 255, 255, .18);
    pointer-events: none;
}

.howwork-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px;
}

.howwork-ic {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #111b2a;
    border: 1px solid #152336;
    color: #fff;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}


.howwork-ic svg {
    display: block;
}

.howwork-ic .white {
    display: none
}

.howwork-stage:hover .white {
    display: block
}

.howwork-stage:hover .blue {
    display: none
}

/* hover interaction on stages */
.howwork-stage {
    cursor: default;
}

.howwork-ic {
    transition: background .25s ease, border-color .25s ease, color .25s ease,
        transform .25s ease, box-shadow .25s ease;
}



.howwork-stage:hover .howwork-ic-active {
    background: #0a4ed6;
}

.howwork-name {
    transition: color .25s ease;
}

.howwork-stage:hover .howwork-name {
    color: #6ba6ff;
}

.howwork-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 21.25px;
    letter-spacing: -0.238px;
    color: #fff;
    margin: 0 0 14px;
}

.howwork-desc {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20.15px;
    color: rgba(255, 255, 255, .55);
    margin: 0;
    max-width: 200px;
}

.howwork-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    color: #fff;
}

.howwork-link span {
    transition: transform .2s ease;
}

.howwork-link:hover {
    color: #6ba6ff;
}

.howwork-link:hover span {
    transform: translateX(4px);
}

@media (max-width: 991.98px) {
    .howwork-area {
        padding: 70px 0;
    }

    .howwork-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .howwork-head {
        margin-bottom: 48px;
    }

    /* 2-column timeline on tablet */
    .howwork-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 0;
    }

    .howwork-divider {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .howwork-title {
        font-size: 32px;
    }

    .howwork-timeline {
        grid-template-columns: 1fr;
        gap: 36px 0;
    }

    .howwork-ic {
        width: 72px;
        height: 72px;
        font-size: 26px;
    }
}

/* === Custom Software — Industries We Have Built For === */
.industries-area {
    padding: 96px 0;
    background: #0a1628;
    overflow: hidden;
}

.industries-area.v2 {
    background: #fff
}

.industries-content {
    max-width: 520px;
}

.industries-area.v2 .industries-title {
    color: #0A1628
}

.industries-area.v2 .industries-item {
    border-bottom: 1px solid #DFE1E6;
    padding-bottom: 10px
}

.industries-area.v2 .industries-item:last-child {
    border: none
}

.industries-area.v2 .industries-text {
    color: #172B4D;
    font-size: 16px
}

.industries-area.v2 .industries-content {
    max-width: 100%
}

.industries-area.v2 .industries-list {
    max-width: 100%
}

.industries-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 58px;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 16px;
}

.industries-lead {
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 29px;
    margin: 0 0 23px;
}

.industries-area:not(.v2) .industries-lead {
    color: #bfc0c1;
}

.industries-list {
    list-style: none;
    margin: 0 0 23px;
    padding: 0;
    max-width: 519px;
}

.industries-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 15px
}

.industries-item:last-child {
    margin-bottom: 0
}

.industries-tick {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.industries-tick svg {
    display: block;
}

.industries-text {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 29px;
    color: #fff;
}

.industries-note {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 15px;
    line-height: 23.25px;
    margin: 0;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 20px
}

.industries-note strong {
    font-weight: 600;
    color: #fff;
}

/* right visual: circular image + overlapping dashboard card */


.industries-accent {
    position: absolute;
    z-index: 0;
    top: -10px;
    right: -10px;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(0, 87, 255, .4) 0%, rgba(0, 87, 255, 0) 68%);
    pointer-events: none;
}

.industries-circle {
    position: relative;
    z-index: 1;
    width: 92%;
    margin-left: auto;
    aspect-ratio: 500 / 484;
    border-radius: 50%;
    overflow: hidden;
    background: #11203a;
}

.industries-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.industries-card {
    position: absolute;
    z-index: 3;
    left: 0;
    bottom: 0;
    width: 292px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(11, 24, 56, .04), 0 24px 50px -18px rgba(0, 0, 0, .55);
}

.industries-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    background: #f4f6fb;
    border-bottom: 1px solid #eef1f7;
}

.industries-card-dots {
    display: flex;
    gap: 5px;
}

.industries-card-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cfd6e4;
}

.industries-card-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: #7a8398;
}

.industries-card-body {
    padding: 14px;
}

.industries-pipe {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.industries-pipe-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: #5b6478;
    white-space: nowrap;
}

.industries-pipe-bar {
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: #eef1f7;
    overflow: hidden;
}

.industries-pipe-bar i {
    display: block;
    height: 100%;
    width: var(--w);
    background: linear-gradient(90deg, #2f6bf0, #0057ff);
}

.industries-pipe-count {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 10px;
    color: #0b1838;
}

.industries-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.industries-step {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 10px;
    color: #42526e;
    background: #f4f6fb;
    border: 1px solid #eef1f7;
    border-radius: 6px;
    padding: 7px 4px;
    text-align: center;
}

.industries-step-live {
    background: #0057ff;
    border-color: #0057ff;
    color: #fff;
}

.industries-out {
    border: 1px solid #eef1f7;
    border-radius: 8px;
    padding: 11px 12px;
}

.industries-out-label {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: #8a93a8;
    margin-bottom: 4px;
}

.industries-out-big {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    color: #0b1838;
    letter-spacing: -0.2px;
}

@media (max-width: 991.98px) {
    .industries-area {
        padding: 70px 0;
    }

    .industries-title {
        font-size: 40px;
        line-height: 1.16;
        letter-spacing: -1px;
    }

    .industries-content {
        max-width: none;
    }

    .industries-visual {
        margin: 20px auto 0;
        max-width: 460px;
    }
}

@media (max-width: 575.98px) {
    .industries-title {
        font-size: 32px;
    }

    .industries-text {
        font-size: 16px;
    }

    .industries-lead {
        font-size: 16px;
        line-height: 27px;
    }

    .industries-card {
        width: 230px;
    }
}

/* === The Moment Off-the-Shelf Software Stops Working === */
.csm-area {
    padding: 90px 0;
    position: relative
}

.csm-devider .devider {
    width: 56px;
    height: 2px;
    border-radius: 2px;
    background: #DDE3FD;
    display: inline-block
}

.csm-area .container {
    position: relative;
    z-index: 9
}

.csm-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
}

.csm-title {
    font-size: 40px;
    line-height: 1.16;
    letter-spacing: -1.72px;
    color: var(--ink);
    margin: 0 0 24px;
}



/* Visual column */
.csm-visual {
    position: relative;
}

.csm-sparkle2 {
    position: absolute;
    top: 20%;
    left: 15%;
    opacity: 0.3;
    transform: rotate(25deg)
}

.csm-sparkle3 {
    position: absolute;
    top: 35%;
    left: 10%
}

.csm-glow {
    position: absolute;
    inset: -20px -30px 20px;
    background: radial-gradient(120% 100% at 70% 30%, rgba(0, 87, 255, .14), rgba(0, 87, 255, 0) 60%);
    filter: blur(6px);
    z-index: 0;
    pointer-events: none;
}

/* Cards (shared) */
.csm-card {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #fff 0%, #fcfdff 100%);
    border: 1px solid rgba(11, 24, 56, .05);
    border-radius: 26px;
    box-shadow: 0 1px 2px rgba(11, 24, 56, .04), 0 18px 40px -14px rgba(11, 24, 56, .16), 0 44px 92px -34px rgba(11, 24, 56, .22);
}

/* Main growth card */
.csm-card-growth {
    padding: 25px 25px 23px;
}

.csm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.csm-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.46px;
    color: var(--ink-2);
}

.csm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 33px;
    padding: 0 11px;
    border-radius: 9px;
    background: #f4f6fb;
    border: 1px solid #eef1f7;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 12px;
    color: #233566;
}

.csm-pill em {
    font-size: 10px;
    color: #8a93a8;
}

/* Bars */
.csm-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    height: 124px;
    padding: 4px 2px 0;
}

.csm-bar {
    position: relative;
    flex: 1 1 0;
    max-width: 46px;
    border-radius: 6px 6px 3px 3px;
    background: linear-gradient(180deg, #9cc2ff 0%, #c6dbff 100%);
}

.csm-bar.is-accent {
    background: linear-gradient(180deg, #2f6bf0 0%, #1e5be6 100%);
}

.csm-bar.is-peak {
    background: linear-gradient(180deg, #ffd24a 0%, #fcc419 100%);
}

.csm-bar-tag {
    position: absolute;
    top: -21px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 10.5px;
    color: var(--ink-2);
    white-space: nowrap;
}

/* Stats */
.csm-stats {
    display: flex;
    border-top: 1px solid #eef1f7;
    margin-top: 21px;
    padding-top: 18px;
}

.csm-stat {
    flex: 1;
    padding-left: 18px;
}

.csm-stat:first-child {
    padding-left: 0;
}

.csm-stat + .csm-stat {
    border-left: 1px solid #eef1f7;
}

.csm-stat-num {
    display: block;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.77px;
    line-height: 1;
    color: var(--ink-2);
}

.csm-stat-num.csm-up {
    color: #1e5be6;
}

.csm-stat-label {
    display: block;
    margin-top: 7px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 1.24px;
    text-transform: uppercase;
    color: #8a93a8;
}

/* Floating deploy / status mini card */
.csm-card-mini {
    position: absolute;
    right: -6px;
    bottom: -30px;
    z-index: 3;
    width: 230px;
    padding: 7px 19px;
}

.csm-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 0;
    font: 400 15px/1.4 'DM Sans', sans-serif;
}

.csm-mini-row + .csm-mini-row {
    border-top: 1px solid #eef1f7;
}

.csm-mini-key {
    color: #8a93a8;
}

.csm-mini-val {
    font-weight: 500;
    color: var(--ink-2);
}

.csm-mini-val.csm-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1e9e5a;
}

/* Cursor tag */
.csm-cursor {
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.csm-cursor em {
    font-size: 16px;
    color: var(--blue);
}

.csm-cursor-label {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--blue);
    color: #fff;
    font: 600 11px/1 'DM Sans', sans-serif;
    box-shadow: 0 6px 16px -6px rgba(0, 87, 255, .55);
}

/* Responsive */
@media (max-width: 991.98px) {
    .csm-area {
        padding: 55px 0;
    }

    .csm-title {
        font-size: 36px;
        letter-spacing: -1px;
        max-width: none;
    }

    .csm-visual {
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 575.98px) {
    .csm-title {
        font-size: 30px;
    }

    .csm-card-mini {
        right: 0;
        width: 200px;
    }

    .csm-bars {
        gap: 5px;
    }
}

/* === Security and Compliance (cssec) === */
.cssec-area {
    position: relative;
    padding: 40px 0 100px;
    background: #0A1628;
}

.cssec-area .container {
    position: relative;
    z-index: 99
}

.cssec-shape {
    position: absolute;
    top: -40px;
    right: 0;
    width: 60%;
}

.cssec-light-shape {
    position: absolute;
    left: 0;
    bottom: -25%;
}

.cssec-title {
    font-size: 50px;
    line-height: 1.16;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 16px;
}

.cssec-copy p {
    margin: 0;
    font: 400 18px/29px 'DM Sans', sans-serif;
    color: #bfc0c1;
}

/* Visual — circular dashboard photo in a blue gradient ring */
.cssec-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 460px;
}

.cssec-visual-sparkle {
    position: absolute;
    left: 0;
    top: 30px
}


/* Responsive */
@media (max-width: 991.98px) {
    .cssec-area {
        padding: 60px 0;
    }

    .cssec-title {
        font-size: 36px;
        letter-spacing: -1px;
        max-width: none;
    }

    .cssec-visual {
        min-height: 0;
    }

    .cssec-circle {
        width: 380px;
    }
}

@media (max-width: 575.98px) {
    .cssec-title {
        font-size: 30px;
    }

    .cssec-circle {
        width: 300px;
    }

    .cssec-sparkle-1 {
        left: 2%;
    }
}

/* === The Kinds of Platforms We Build (cskind) === */
.cskind-area {
    position: relative;
    padding: 0 0 70px;
    background: #0A1628;
    z-index: 9
}

.cskind-area.v2 {
    padding: 20px 0 100px;
    z-index: 99
}

.cskind-area.v3 {
    padding: 20px 0 100px;
    z-index: 99;
}

.cskind-area .container {
    position: relative;
    z-index: 9
}

.cskind-blue-shape {
    position: absolute;
    left: 0;
    top: -200px;
    width: 50%;
}

.cskind-blue-shape2 {
    position: absolute;
    right: 0;
    top: 0;
    width: 40%;
}

.cskind-blue-shape3 {
    position: absolute;
    right: 0;
    top: -15%;
    width: 50%;
}
img.cskind-blue-shape3.left {
    right: auto;
    left: 0;
    transform: scaleX(-1);
}
.cskind-shape {
    position: absolute;
    right: 0;
    bottom: -25%
}

.cskind-shape2 {
    position: absolute;
    left: 0;
    top: -50%;
    width: 38%;
}

.cskind-shape3 {
    position: absolute;
    right: 0;
    bottom: 0;
}

.cskind-title {
    font-size: 50px;
    line-height: 1.16;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 16px;
}

.cskind-intro {
    margin: 0 0 28px;
    font: 400 18px/29px 'DM Sans', sans-serif;
    color: #bfc0c1;
    max-width: 48ch;
}

/* Numbered list */
.cskind-list {
    list-style: none;
    margin: 0 0 31px;
    padding: 0;
    max-width: 519px;
}

.cskind-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
}

.cskind-list li:last-child {
    margin-bottom: 0
}


.cskind-intro ol, .cskind-intro ul {
    counter-reset: item;
    list-style: none;
    padding: 0;
    margin: 0;
}

.cskind-intro ol li, .cskind-intro ul  li {
    counter-increment: item;
    position: relative;
    padding-left: 40px;
    margin-bottom: 15px;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    line-height: 26px;
}

.cskind-intro ol li::before, .cskind-intro ul li::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 0px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0d1b34;
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
}
.cskind li strong {
    font-weight: 700;
}
.cskind-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e6effc;
    color: #0a1628;
    font: 700 11px/1 'Zalando Sans', sans-serif;
    position: relative;
    top: 5px
}

.cskind-text {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 29px;
    color: #fff;
}

.cskind-ask {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 25px;
    border: 1.15px solid #a6b8de;
    border-radius: 12px;
    color: #fff;
    font: 400 18px/1.3 'DM Sans', sans-serif;
    transition: background-color .2s ease, border-color .2s ease;
    font-size: 16px;
    margin-top: 30px;
}

.cskind-ask:hover {
    color: #fff;
    background: rgba(166, 184, 222, .12);
    border-color: #c4d2f0;
}

/* Visual */
.cskind-visual {
    position: relative;
    padding-bottom: 30px;
    padding-left: 30px
}

.cskind-visual-img {
    position: absolute;
    bottom: -70px;
    left: -45px;
}

/* Floating platform mini card */
.cskind-card {
    position: absolute;
    left: -8px;
    bottom: 0;
    width: 250px;
    background: #13213f;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 54px -20px rgba(0, 0, 0, .55);
}

.cskind-card-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 9px 11px 10px;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.cskind-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
}

.cskind-dot.is-on {
    background: #6ba6ff;
}

.cskind-card-label {
    margin-left: 5px;
    font: 700 7.5px/1 'Zalando Sans', sans-serif;
    letter-spacing: .45px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.cskind-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.cskind-card-chart {
    position: relative;
    height: 104px;
    border-radius: 9px;
    background: #0b1838;
    border: 1px solid rgba(255, 255, 255, .1);
    overflow: hidden;
}

.cskind-spark {
    position: absolute;
    inset: 30% 0 0;
    background:
        linear-gradient(90deg, transparent, transparent),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 222 60' preserveAspectRatio='none'%3E%3Cpolyline points='0,52 30,40 55,46 85,30 115,36 150,16 185,22 222,6' fill='none' stroke='%236ba6ff' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.cskind-card-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.cskind-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}

.cskind-tile-line {
    height: 6px;
    width: 80%;
    border-radius: 3px;
    background: rgba(107, 166, 255, .45);
}

.cskind-tile-line.is-amber {
    background: rgba(252, 196, 25, .6);
}

.cskind-tile-line:not(.is-blue):not(.is-amber) {
    height: 14px;
    width: 100%;
    background: rgba(255, 255, 255, .08);
}

/* Responsive */
@media (max-width: 991.98px) {
    .cskind-area {
        padding: 60px 0;
    }

    .cskind-title {
        font-size: 36px;
        letter-spacing: -1px;
        max-width: none;
    }

    .cskind-visual {
        max-width: 560px;
    }
}

@media (max-width: 575.98px) {
    .cskind-title {
        font-size: 30px;
    }

    .cskind-ask {
        width: 100%;
        justify-content: center;
    }

    .cskind-card {
        width: 210px;
        left: 0;
    }
}

/* === Built on Proven Technology (cstech) === */
.cstech-area {
    padding: 70px 0;
    background: #fff;
}

.cstech-title {
    font-size: 50px;
    line-height: 1.16;
    letter-spacing: -1.72px;
    color: var(--ink);
    margin: 0 0 16px;
}

.cstech-copy p {
    margin: 0;
    font: 400 18px/29px 'DM Sans', sans-serif;
    color: var(--body);
}

/* Visual — circular photo + floating URL bar */
.cstech-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 480px;
}

.cstech-sparkle {
    position: absolute;
    top: 60px;
    right: 30px;
}

.cstech-sparkle2 {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: rotate(25deg);
    opacity: 0.5
}

/* Responsive */
@media (max-width: 991.98px) {
    .cstech-area {
        padding: 60px 0;
    }

    .cstech-title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .cstech-visual {
        min-height: 0;
    }

    .cstech-circle {
        width: 400px;
    }
}

@media (max-width: 575.98px) {
    .cstech-title {
        font-size: 30px;
    }

    .cstech-circle {
        width: 300px;
    }

    .cstech-url {
        width: 92%;
        padding: 10px 12px;
        gap: 10px;
    }

    .cstech-url-text {
        font-size: 13px;
    }
}

/* === We Run Seven SaaS Platforms of Our Own (csown) === */
.csown-area {
    position: relative;
    padding: 70px 0;
    background: #0A1629;
    overflow: hidden;
}

.csown-head {
    max-width: 776px;
    margin: 0 auto 48px;
}

.csown-title {
    font-size: 50px;
    line-height: 1.16;
    letter-spacing: -1.72px;
    color: #fff;
    margin: 0 0 16px;
}

.csown-intro {
    margin: 0;
    font: 400 18px/29px 'DM Sans', sans-serif;
    color: #bfc0c1;
}

.csown-grid {
    align-items: stretch;
}

.csown-card {
    height: 100%;
    background: #0a1628;
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 40px 34px;
    border-radius: 4px;
    transition: border-color .25s ease, transform .25s ease;
}

.csown-card:hover {
    border-color: rgba(255, 255, 255, .18);
    transform: translateY(-3px);
}

.csown-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.24;
    color: #fff;
    margin: 0 0 14px;
}

.csown-desc {
    margin: 0;
    font: 400 15px/26px 'DM Sans', sans-serif;
    color: rgba(255, 255, 255, .5);
}

.csown-action {
    margin-top: 44px;
}

.csown-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 500 18px/1.3 'DM Sans', sans-serif;
    color: #fff;
}

.csown-link:hover {
    color: #6ba6ff;
}

/* Responsive */
@media (max-width: 991.98px) {
    .csown-area {
        padding: 60px 0;
    }

    .csown-title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .csown-card {
        padding: 32px 28px;
    }
}

@media (max-width: 575.98px) {
    .csown-title {
        font-size: 30px;
    }
}



/*Custom CSS*/
.BambooHR-ATS-board h2 {
    font-size: 38px !important;
    margin: 0 0 30px !important;
    font-family: 'Zalando Sans', sans-serif !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    border: none !important
}

.BambooHR-ATS-Department-List {
    background: #fff !important;
    border: 1px solid #eef1f7 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(11, 24, 56, .04), 0 8px 24px -8px rgba(11, 24, 56, .08) !important;
    padding: 0 !important
}

.BambooHR-ATS-Department-Header {
    background: #fafbfe !important;
    border-bottom: 1px solid #eef1f7 !important;
    font-family: 'Zalando Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    line-height: 1.55 !important;
    letter-spacing: 2.31px !important;
    text-transform: uppercase !important;
    color: #8a93a8 !important;
    padding: 20px;
}

.BambooHR-ATS-board ul {
    margin: 0 !important;
    padding: 0 !important
}

.BambooHR-ATS-board li li {
    padding: 15px 20px !important;
    border-bottom: 1px solid #eef1f7 !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.BambooHR-ATS-Location {
    padding: 0 !important
}

.BambooHR-ATS-board li li a {
    font-family: 'Zalando Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 21.25px !important;
    letter-spacing: -0.204px !important;
    color: #0b1838 !important;
}

.heading-wrapper {
    margin-bottom: 40px
}

.section-action {
    margin-top: 40px
}

.adam-leads .section-heading {
    margin-bottom: 40px
}

.text_white {
    color: #fff
}

.section-heading {
    font-size: 38px
}

.page-banner {
    padding-top: 100px
}

.page-banner .breadcrumb-link ul {
    margin-bottom: 60px
}

.bio-hero.page-banner {
    padding-bottom: 70px
}

.bio-hero-figure::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 190px;
    height: 100%;
    background: #0057FF;
    border-top-left-radius: 30px
}

.bio-hero-figure::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 190px;
    background: linear-gradient(180deg, rgba(0, 87, 255, 0) 0%, rgba(0, 87, 255, 1) 100%);
    z-index: 11;
}

.bio-hero-tab {
    z-index: 111
}

.bio-hero-tab-rodate {
    color: transparent;
    -webkit-text-stroke: 1px white;
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -1.02px;
    font-family: "Zalando Sans";
    position: absolute;
    opacity: 0.2;
    transform: rotate(-90deg);
    transform-origin: left;
    top: 74%;
    left: 70px;
    white-space: nowrap
}

.section {
    padding: 70px 0
}

.page-banner.style2 .breadcrumb-link ul {
    margin-bottom: 10px;
}

.page-banner.style2 {
    padding-bottom: 0
}

.portfolio-card {
    justify-content: space-between
}

@media (min-width: 2133px) {
    .story-shape {
        height: 470px;
    }

    .our-mission {
        margin-top: -250px;
    }

    .cskind-blue-shape3 {
        width: 32%;
    }

    .weare-wave {
        width: 38%;
    }

    .comm-hero-photo {
        width: 33%;
    }

    .cskind-blue-shape2 {
        width: 30%;
    }

    .cssec-shape {
        width: 38%;
    }

    .whobuild-shape {
        top: -10%;
        width: 34%;
    }

    .whobuild-blue-shape {
        width: 32%;
    }

    .whobuild-shape2 {
        width: 34%;
    }

    .cskind-blue-shape {
        width: 32%;
    }
}

@media (min-width: 1921px) and (max-width: 2133px) {
    .comm-hero-photo {
        width: 39%;
    }

    .cskind-blue-shape2 {
        width: 33%;
    }
}

@media (min-width: 2134px) and (max-width: 2400px) {}

@media (min-width: 2401px) and (max-width: 2743px) {
    .story-shape {
        height: 425px;
    }

    .our-mission {
        margin-top: -150px;
    }

    .cskind-blue-shape3 {
        width: 32%;
    }

    .weare-wave {
        width: 38%;
    }

    .comm-hero-photo {
        width: 39%;
    }

    .cskind-blue-shape2 {
        width: 33%;
    }
}

@media (min-width: 2744px) {}




@media(max-width:1400px) {
    .cta-btn {
        padding: 14px 16px;
    }

    .header-logo {
        margin-right: 16px;
        width: 130px;
    }

    .header-badge {
        width: 76px;
    }

    .timeline-image-shape {
        bottom: 0
    }

    .scholarship-area .inner {
        padding: 40px
    }

    .call-to-action .heading {
        font-size: 34px;
    }

    .call-to-action {
        padding: 40px
    }

    .chambers-title {
        font-size: 32px
    }

    .scholarship-title {
        font-size: 34px
    }

    .bio-hero-role {
        font-size: 15px
    }

    .bio-hero-name {
        font-size: 44px
    }

    .bio-hero-tab-rodate {
        font-size: 40px
    }

    .about-adam-figure {
        min-width: 100%;
        float: none
    }

    .adam-leads {
        padding: 70px 0
    }

    .adam-leads-title {
        font-size: 42px;
    }

    .about-banner-title {
        font-size: 42px;
    }

    .cskind-shape {
        display: none
    }

    .whobuild-shape {
        top: 0;
        right: 0;
        width: 70%;
    }

    .cskind-blue-shape {
        top: 0
    }

    .comm-hero-photo {
        top: 100px
    }

    .cb-name {
        font-size: 18px;
        line-height: 120%;
    }

}

@media(max-width:991px) {
    .about-banner-text {
        font-size: 16px;
        line-height: 26px;
    }

    .page-banner {
        padding-bottom: 50px
    }

    .story-area {
        padding: 50px 0 0;
    }

    .our-mission {
        padding-bottom: 50px
    }

    .leadership-area {
        padding: 50px 0
    }

    .values-area {
        padding: 50px 0
    }

    .saas-shape {
        height: auto
    }

    .story-copy p {
        font-size: 16px;
    }

    .story-title {
        font-size: 34px;
    }

    .leader-bio {
        font-size: 16px;
        line-height: 25px
    }

    .leadership-title {
        font-size: 32px;
        margin-bottom: 25px;
    }

    .values-area {
        margin-top: -90px
    }

    .about-stat {
        padding: 18px
    }

    .about-stats {
        margin: 30px auto 0;
    }

    .our-mission-text .heading {
        font-size: 22px;
    }

    .community-area {
        padding-top: 50px
    }

    .scholarship-title {
        font-size: 28px;
    }

    .page-banner .breadcrumb-link ul {
        margin-bottom: 36px;
    }

    .about-banner-title {
        font-size: 36px;
    }

    .about-banner-action {
        flex-direction: row;
    }

    .about-stat-num {
        font-size: 30px;
    }

    .story-shape {
        height: 150px;
        object-fit: cover;
        object-position: top
    }

    .our-mission {
        padding-bottom: 50px;
        margin-top: -10px;
        padding-top: 0;
    }

    .timeline-area {
        padding-top: 0;
        padding-bottom: 50px
    }

    .timeline-year {
        font-size: 24px;
    }

    .leader-photo {
        height: 200px;
    }


    .scholarship-area .inner {
        padding: 30px
    }

    .scholarship-text,
    .chambers-text {
        font-size: 16px;
        line-height: 25px
    }

    .chambers-title {
        font-size: 32px;
    }

    .chambers-grid {
        display: block
    }

    .chamber-card {
        margin-bottom: 10px
    }

    .chambers-area {
        padding-bottom: 0
    }

    .cta-btn {
        padding: 15px 25px;
    }

    .bio-hero-lead {
        font-size: 16px;
        line-height: 25px;
    }

    .bio-hero-role {
        font-size: 15px
    }

    .bio-hero-tab-rodate {
        font-size: 36px
    }

    .bio-hero.page-banner {
        padding-bottom: 50px
    }


    .lead-card-title {
        font-size: 18px;
        line-height: normal;
    }

    .adam-leads {
        padding: 50px 0
    }

    .bio-hero-name {
        font-size: 34px;
    }

    .bio-hero-rule {
        display: none
    }

    .bio-hero-tab-rodate {
        font-size: 50px;
        top: 49%;
        left: 50px;
    }

    .about-adam-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .about-adam-text p {
        font-size: 16px;
        line-height: 25px;
    }

    .adam-leads-title {
        font-size: 32px;
    }

    .lead-card {
        padding: 20px
    }

    .adam-leads {
        padding-bottom: 0
    }

    .cskind-blue-shape3 {
        top: 0
    }

    .cskind-intro {
        font-size: 16px;
        line-height: 25px
    }

    .cskind-area.v3 {
        padding-bottom: 50px
    }

    .csown-card {
        padding: 25px
    }

    .wwb-illu {
        height: auto;
    }

    .csown-name {
        font-size: 18px
    }

    .wwb-name {
        font-size: 18px;
    }

    .wwb-area.v2 {
        padding-bottom: 90px;
    }

    .industries-area {
        padding: 50px 0
    }

    .section-heading {
        font-size: 28px;
    }

    .howwork-area {
        padding-top: 0
    }

    .howwork-timeline {
        grid-template-columns: repeat(3, 1fr);
    }

    .bio-hero-figure {
        overflow: hidden
    }

    .bio-hero-tab {
        width: 100%;
        text-align: left
    }

    .campus-area {
        padding: 50px 0
    }

    .life-area {
        padding: 50px 0
    }

    .apply-area {
        padding: 0;
        margin-top: auto;
        padding-top: 50px !important;
        padding-bottom: 0 !important;
    }

    .apply-title {
        font-size: 30px
    }

    .apply-text {
        max-width: 100%
    }

    .intern-photo {
        height: 250px;
    }

    .ccta-title {
        font-size: 22px;
    }

    .comm-hero-photo {
        position: absolute;
        top: 0;
        bottom: auto;
        right: 0
    }

    .section {
        padding: 50px 0
    }

    .cstech-copy p {
        font-size: 16px;
        line-height: 25px
    }

    .cssec-copy p {
        font-size: 16px;
        line-height: 25px
    }

    .whobuild-shape {
        top: 0
    }

    .cskind-area.v2 {
        padding: 50px 0;
    }

    .whobuild-shape2 {
        top: 0
    }

    .native-performance {
        padding-top: 0
    }

    .page-banner.style2 .breadcrumb-link ul {
        margin-bottom: 36px;
    }

    .page-banner.style2 {
        padding-bottom: 50px;
    }

    .page-banner.style2 .comm-hero-photo {
        bottom: 50px
    }

    .joint-ventures {
        padding: 50px 0
    }

    .portfolio-tagline {
        line-height: 24px;
        font-size: 14px;
    }

    .cb-name {
        font-size: 18px;
    }

    .cb-link {
        font-size: 15px
    }

    .custombuilt-area {
        padding: 50px 0
    }

    .joint-ventures {
        padding-bottom: 80px
    }

    .wsa-name {
        font-size: 17px;
        line-height: 24px;
    }

    .wsa-area.v2 {
        padding-bottom: 0
    }

    .BambooHR-ATS-board h2 {
        font-size: 28px !important;
        margin: 0 0 20px !important;
    }

    .footer-contact li {
        justify-content: center
    }

}

@media(max-width:767px) {
    .apply-intro {
        text-align: center
    }

    .call-to-action .heading {
        font-size: 28px;
    }

    .lead-card-title {
        font-size: 20px
    }

    .section-heading {
        font-size: 28px;
    }

    .howwork-area {
        padding-top: 0
    }

    .intern-photo {
        height: 220px;
    }

    .campus-card-left {
        border-right: 1px solid #e2e2dd;
        border-bottom: 0;
    }

    .ccta-title {
        font-size: 20px;
        line-height: 1.25;
    }

    .ccta-card {
        padding: 25px
    }

    .roles-foot {
        justify-content: center
    }

    .causes-stage {
        padding: 18px;
        min-height: 0;
    }

    .about-hero-action .cta-btn {
        margin: 5px 0;
    }

    .chambers-area {
        padding-bottom: 50px
    }

    .cssec-shape {
        top: 0
    }

    .wsa-item:last-child,
    .wsa-item {
        margin-bottom: 30px
    }

    .wsa-area.v2 {
        padding-bottom: 20px;
    }

}

@media(max-width:575px) {
    .BambooHR-ATS-board h2 {
        font-size: 26px !important;
        margin: 0 0 20px !important;
    }

    .campus-card-left {
        border-right: 10;
        border-bottom: 1px solid #e2e2dd;
    }

    .intern-photo {
        height: auto;
    }

    .adam-leads {
        padding-bottom: 50px
    }

    .chambers-area {
        padding-bottom: 50px
    }

    .story-shape {
        height: 105px;
        object-fit: cover
    }

    .leadership-area {
        padding-top: 0
    }

    .our-mission {
        margin-top: -10px;
        padding-top: 0
    }


    .timeline::after {
        left: 3px;
        transform: translateX(0%);
    }

    .timeline-item.is-left .timeline-card,
    .timeline-item.is-right .timeline-card {
        margin-bottom: 0;
        margin-top: 0
    }

    .timeline-item,
    .timeline-item.is-left,
    .timeline-item.is-right {
        margin-bottom: 35px
    }

    .values-area {
        margin-top: -70px
    }

    .values-area .value-item {
        display: block
    }

    .values-area .value-num {
        margin-bottom: 10px
    }

    .scholarship-area .inner {
        padding: 30px;
        text-align: center
    }

    .scholarship-image {
        position: inherit;
        width: 100%;
        bottom: -30px;
        right: 0;
        margin-top: 0;
    }

    .scholarship-title {
        font-size: 28px;
    }

    .leader-photo {
        height: 340px;
    }

    .bio-hero.page-banner {
        text-align: center
    }

    .call-to-action {
        padding-bottom: 0
    }

    .lead-card {
        padding: 25px;
    }

    .about-hero-action .cta-btn {
        margin: 5px 0
    }

    .content-img {
        margin-bottom: 30px
    }

    .howwork-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px 0;
    }

    .about-banner-title {
        font-size: 32px;
    }

    .section-heading {
        font-size: 26px;
    }

    .roles-row {
        display: block;
        text-align: left
    }

    .roles-action {
        margin-top: 16px;
        display: block;
        width: 100%;
    }

    .comm-hero-photo {
        position: absolute;
        top: auto;
        bottom: 0
    }

    .banner-image {
        margin-top: 30px
    }




    .portfolio-head {
        text-align: center
    }

    .custombuilt-head {
        text-align: center
    }


}

/* === Scholarship Requirements === */
.scholarship-req-area {
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
    position: relative
}

.scholarship-req-border {
    position: absolute;
    width: 110px;
    height: 2px;
    border-radius: 2px;
    background: rgba(0, 87, 255, 0.40);
    left: 50%;
    bottom: 0;
    transform: translateX(-50%)
}

.scholarship-req-head {
    margin-bottom: 36px;
}

.scholarship-req-area .req-card {
    height: 100%;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--card);
    border: 1px solid #e2e8f5;
    border-radius: 8px;
    padding: 20px 23px 20px 20px;
}

.scholarship-req-area .req-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--blue-soft);
    border-radius: 6px;
}

.scholarship-req-area .req-icon em {
    font-size: 11px;
    line-height: 1;
    color: var(--blue);
}

.scholarship-req-area .req-card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 24px;
    color: var(--body);
}

.scholarship-req-area .req-card p a {
    color: var(--blue);
}

.scholarship-req-area .req-card p a:hover {
    text-decoration: underline;
    color: #000
}

.clr_blue_ink {
    color: var(--blue-ink);
}

@media (max-width: 991px) {
    .scholarship-req-head {
        margin-bottom: 24px;
    }
}

/* === Choose Your Topic === */
.scholarship-topic-area .topic-intro {
    max-width: 569px;
}

.scholarship-topic-area .topic-intro .section-heading em {
    font-style: italic;
}

.scholarship-topic-area .topic-intro p {
    margin: 15px 0 0;
    font-size: 18px;
    line-height: 27.9px;
    color: var(--body);
}

/* Circular photo with gradient ring + decorative marks */
.scholarship-topic-area {
    padding-bottom: 170px
}

.scholarship-topic-area .topic-photo {
    position: relative;
    width: 356px;
    max-width: 100%;
    margin-top: 40px;
}

.topic-photo .sparkle {
    position: absolute;
    right: 0;
    top: 30px;
}

.scholarship-topic-area .topic-photo-marks {
    position: absolute;
    top: 4px;
    right: -14px;
}

.scholarship-topic-shape {
    position: absolute;
    right: 0;
    bottom: -40%;
    z-index: -1;
}

/* Topic picker (right column) */
.scholarship-topic-area .topic-picker-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 31px;
    color: var(--ink);
    margin: 0;
}

.scholarship-topic-area .topic-picker-hint {
    margin: 8px 0 16px;
    font-size: 14px;
    line-height: 21.7px;
    color: #7a8aaa;
}

.scholarship-topic-area .topic-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 628px;
}

.scholarship-topic-area .topic-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid #dfe1e6;
    padding: 14px 8px 15px 0;
    transition: background .18s ease, padding-left .18s ease;
}

.scholarship-topic-area .topic-list li:last-child .topic-item {
    border-bottom: 0;
}

.scholarship-topic-area .topic-num {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e6effc;
    border-radius: 50%;
    font-family: 'DM Sans', ui-monospace, monospace;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    color: var(--ink);
}

.scholarship-topic-area .topic-text {
    font-size: 14px;
    line-height: 18.2px;
    font-weight: 500;
    color: #172b4d;
}


.scholarship-topic-area .topic-item.is-active {
    background: var(--blue-soft);
    padding-left: 10px;
    border-radius: 8px;
    border-bottom-color: transparent;
}

.scholarship-topic-area .topic-item.is-active .topic-num {
    background: var(--blue);
    color: #fff;
}

.scholarship-topic-area .topic-item.is-active .topic-text {
    color: var(--blue-ink);
}

@media (max-width: 991px) {
    .scholarship-topic-area .topic-photo {
        margin: 32px auto 0;
    }
}


/* === Scholarship Info (Announcement + Eligibility) === */
.scholarship-info-area {
    background: #0A1628;
    padding-top: 40px;
    position: relative
}

.scholarship-info-area .container {
    position: relative;
    z-index: 9
}

.scholarship-info-shape {
    position: absolute;
    left: 0;
    bottom: -100%;
    z-index: -1
}

.scholarship-info-area .info-panel {
    height: 100%;
    padding: 40px 41px 41px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: radial-gradient(81.54% 105.07% at 92% -25%, rgba(0, 87, 255, 0.30) 0%, rgba(0, 87, 255, 0.00) 60%), #111B2A;
}

.scholarship-info-area .info-panel-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 28.32px;
    letter-spacing: -0.48px;
    color: #fff;
    margin: 0 0 20px;
}

.scholarship-info-area .info-panel-lead {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 26.35px;
    color: #cdd9ec;
}

.scholarship-info-area .info-dot-list,
.scholarship-info-area .info-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.scholarship-info-area .info-dot-list li,
.scholarship-info-area .info-check-list li {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.scholarship-info-area .info-dot-list li:not(:last-child),
.scholarship-info-area .info-check-list li:not(:last-child) {
    margin-bottom: 16px;
}

.scholarship-info-area .info-dot-list p,
.scholarship-info-area .info-check-list p {
    margin: 0;
    font-size: 15.5px;
    line-height: 24px;
    color: #aebbd4;
}

.scholarship-info-area a {
    color: #8fb4ff;
}

.scholarship-info-area a:hover {
    color: #fff;
    text-decoration: underline
}

.scholarship-info-area .info-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 9px;
    border-radius: 4px;
    background: #39b8ff;
    box-shadow: 0 0 0 3px rgba(57, 184, 255, 0.18);
}

.scholarship-info-area .info-check-box {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin-top: -2px;
    border-radius: 8px;
    background: rgba(0, 87, 255, 0.2);
    border: 1px solid rgba(120, 160, 255, 0.35);
}

/* === Scholarship Reminder (Application Status) === */
.scholarship-reminder-area {
    position: relative;
}

.scholarship-reminder-area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    left: 0;
    top: 0;
    background: #0A1628;
    z-index: -1
}

.scholarship-reminder-area .reminder-panel {
    background: #111b2a;
    border-radius: 8px;
    padding: 52px;
}

.scholarship-reminder-area .reminder-heading {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 37.76px;
    letter-spacing: -0.64px;
    color: #fff;
    margin: 0 0 10px;
}

.scholarship-reminder-area .reminder-copy p {
    margin: 0;
    font-size: 17px;
    line-height: 26.35px;
    color: #b6c2da;
}

.scholarship-reminder-area .reminder-card {
    max-width: 448px;
    margin-left: auto;
    width: 100%;
    background: #121a2d;
    border: 1px solid #1e2d42;
    border-radius: 8px;
    padding: 33px;
}

.scholarship-reminder-area .reminder-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid #1e2d42;
}

.scholarship-reminder-area .reminder-card-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(29, 78, 216, 0.4);
    color: #fff;
    font-size: 18px;
}

.scholarship-reminder-area .reminder-card-title {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16.8px;
    line-height: 25.2px;
    letter-spacing: -0.41px;
    color: #fff;
}

.scholarship-reminder-area .reminder-card-sub {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13.6px;
    line-height: 20.4px;
    letter-spacing: -0.12px;
    color: #64748b;
}

.scholarship-reminder-area .reminder-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.scholarship-reminder-area .reminder-field label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13.6px;
    line-height: 20.4px;
    letter-spacing: -0.12px;
    color: #e2e8f0;
}

.scholarship-reminder-area .reminder-field .req {
    color: #f59e0b;
}

.scholarship-reminder-area .reminder-name-row {
    display: flex;
    gap: 12px;
}

.scholarship-reminder-area .reminder-name-row input {
    flex: 1 1 0;
    min-width: 0;
}

.scholarship-reminder-area .reminder-form input[type="text"],
.scholarship-reminder-area .reminder-form input[type="email"] {
    width: 100%;
    height: 47.594px;
    padding: 13px 17px;
    background: #0f172a;
    border: 1px solid #1e2d42;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 14.4px;
    letter-spacing: -0.18px;
    color: #e2e8f0;
}

.scholarship-reminder-area .reminder-form input::placeholder {
    color: rgba(226, 232, 240, 0.5);
}

.scholarship-reminder-area .reminder-form input:focus {
    outline: none;
    border-color: #2563eb;
}

.scholarship-reminder-area .reminder-captcha {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 17px;
    background: #0f172a;
    border: 1px solid #1e2d42;
    border-radius: 10px;
}

.scholarship-reminder-area .reminder-captcha input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1px solid #64748b;
    border-radius: 4px;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex: 0 0 20px;
}

.scholarship-reminder-area .reminder-captcha input[type="checkbox"]:checked {
    background: #2563eb;
    border-color: #2563eb;
}

.scholarship-reminder-area .reminder-captcha span {
    font-family: 'Inter', sans-serif;
    font-size: 14.4px;
    line-height: 21.6px;
    letter-spacing: -0.18px;
    color: #94a3b8;
}

.scholarship-reminder-area .reminder-submit {
    width: 100%;
    padding: 16px 36px;
    border: 0;
    border-radius: 11.483px;
    background: #2563eb;
    box-shadow: 0 4.593px 11.483px rgba(0, 87, 255, 0.3);
    font-family: 'DM Sans', sans-serif;
    font-size: 18.373px;
    line-height: 29.397px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease;
}

.scholarship-reminder-area .reminder-submit:hover {
    background: #1d4ed8;
}

@media (max-width: 991px) {
    .scholarship-info-area .info-panel {
        padding: 32px 24px;
    }

    .scholarship-reminder-area .reminder-panel {
        padding: 32px 24px;
    }

    .scholarship-reminder-area .reminder-heading {
        font-size: 28px;
        line-height: 34px;
    }

    .scholarship-reminder-area .reminder-card {
        margin: 0;
    }
}

/* === Past Scholarship Winners === */
.scholarship-winners-head {
    margin-bottom: 36px;
}

.scholarship-winners-area .winner-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f4f7fc;
    border: 1px solid #e2e8f5;
    border-radius: 22px;
    padding: 25px;
    transition: all 0.4s
}

.winner-card:hover {
    transform: translateY(-10px)
}

.scholarship-winners-area .winner-card--current {
    background: #eef3ff;
    border: 2px dashed #aac0ec;
    padding: 26px;
}

.scholarship-winners-area .winner-photo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 34px;
}

.scholarship-winners-area .winner-photo {
    display: block;
    width: 148px;
    height: 148px;
    min-width: 148px;
    min-height: 148px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 0 0 4.353px rgba(0, 0, 0, 0.3);
}

.scholarship-winners-area .winner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.scholarship-winners-area .winner-year {
    position: absolute;
    top: 2px;
    right: 2px;
    padding: 5.5px 14px;
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 999px;
    box-shadow: 0 6px 7px rgba(10, 22, 40, 0.08);
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 20.15px;
    color: var(--blue);
    white-space: nowrap;
}

.scholarship-winners-area .winner-info {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 14px 16px rgba(10, 22, 40, 0.12);
}

.scholarship-winners-area .winner-info-text {
    flex: 1 1 0;
    min-width: 0;
}

.scholarship-winners-area .winner-eyebrow {
    display: block;
    margin-bottom: 6px;
    font-size: 10.5px;
    line-height: 13.65px;
    letter-spacing: 0.525px;
    color: var(--blue);
    font-weight: 500;
}

.scholarship-winners-area .winner-name {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 21.24px;
    letter-spacing: -0.36px;
    color: var(--ink);
    margin: 0 0 4px;
}

.scholarship-winners-area .winner-name--accent {
    color: var(--blue);
}

.scholarship-winners-area .winner-school {
    margin: 0;
    font-size: 14px;
    line-height: 18.9px;
    color: #7a8aaa;
}

.scholarship-winners-area .winner-badge-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--blue);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 9px rgba(0, 87, 255, 0.34);
    transition: all 0.4s
}

.scholarship-winners-area .winner-card:hover .winner-badge-icon {
    background: #f5a623;
    box-shadow: 0 8px 9px rgba(245, 166, 35, 0.36);
}

.scholarship-winners-area .winner-badge-icon--amber {
    background: #f5a623;
    box-shadow: 0 8px 9px rgba(245, 166, 35, 0.36);
}

@media (max-width: 991px) {
    .scholarship-winners-head {
        margin-bottom: 24px;
    }
}

/* ==========================================================================
   Contact Us Page
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Contact Banner === */
.contact-banner .about-banner-text {
    max-width: 80%;
    font-size: 17px;
    line-height: 26px;
}

.contact-banner {
    padding-bottom: 200px
}

.contact-breadcrumb ul {
    justify-content: center;
}

/* === Route Cards === */
.route-cards-area {
    position: relative;

}

.route-cards-area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 300%;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%);
    z-index: -1
}

.route-cards-area .container {
    margin-top: -150px;
    z-index: 9;
    position: relative
}

.route-cards-area {
    padding: 30px 0 40px;
}

.route-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 8px;
    padding: 31px;
    transition: box-shadow .2s ease, transform .2s ease;
    display: block
}

.route-card:hover {
    box-shadow: 0 10px 30px rgba(11, 24, 37, .07);
    transform: translateY(-3px);
}

.route-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 20px;
    margin-bottom: 18px;
}

.route-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -0.4px;
    color: var(--ink);
    margin: 0 0 11px;
}

.route-card-text {
    font-size: 15.5px;
    line-height: 24px;
    color: var(--body);
    margin: 0 0 20px;
}

.route-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--blue);
}

.route-card-link:hover {
    color: var(--blue-ink);
}

/* === Contact Form + Call/Address === */
.contact-form-area {
    padding: 70px 0;
}

.contact-form-card {
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8f5;
    border-radius: 8px;
    padding: 57px 45px 45px;
}

.contact-form-title {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 36px;
    line-height: 1.18;
    letter-spacing: -0.72px;
    color: var(--ink);
    margin: 0 0 14px;
}

.contact-form-lead {
    font-size: 17px;
    line-height: 26px;
    color: var(--body);
    margin: 0 0 28px;
}

.field-label, .contact-form label {
    display: block !important;
    font-size: 13px !important;
    letter-spacing: 0.13px !important;
    color: var(--ink) !important;
    margin-bottom: 7px !important;
}

.field-label .req {
    color: var(--blue);
}
.gform-theme--foundation .gform_fields {
    grid-row-gap: 20px !important;
}
.field-input, .contact-form input, .contact-form textarea {
    width: 100% !important;
    height: 52.8px !important;
    background: #fff !important;
    border: 1px solid #e2e8f5 !important;
    border-radius: 11px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
	box-shadow:none !important
}

.field-textarea, .contact-form textarea {
    height: 120px !important;
    min-height: 120px !important;
    padding: 14px 16px !important;
    resize: vertical !important;
}

.field-input:focus, .contact-form input:focus {
    outline: none !important;
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 255, .12) !important;
}

.captcha-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fbfcff;
    border: 1px solid #e2e8f5;
    border-radius: 11px;
    padding: 17px;
}

.captcha-check {
    width: 24px;
    height: 24px;
    border: 2px solid #e2e8f5;
    border-radius: 5px;
    accent-color: var(--blue);
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
}

.captcha-box label {
    font-size: 14px;
    color: #7a8aaa;
    margin: 0;
    cursor: pointer;
}
.contact-form-area form .cta-btn, .pod-connect .connect-form-panel .cta-btn{
	display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font: 400 18px / 1.2 'DM Sans', sans-serif !important;
    padding: 15px 36px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    justify-content: center !important;
	    background: var(--blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 11px rgba(0, 87, 255, .30) !important;
}
.pod-connect .connect-form-panel .cta-btn{
	width:100% !important
}
.pod-connect .connect-form-panel .gform_confirmation_message{
	color:#fff !important
}
.contact-form-area form .cta-btn:hover, .pod-connect .connect-form-panel .cta-btn:hover {
    background: var(--blue-ink) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.gform_validation_errors{
	display:none !important
}
.contact-submit {
    margin-top: 26px;
}
.gform_heading{
	display:none !important
}
/* Give Us A Call aside */
.contact-call-card {
    background: var(--ink);
    border-radius: 20px;
    padding: 47px 36px 36px;
    color: #fff;
}

.call-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 24px;
    line-height: 1.18;
    letter-spacing: -0.48px;
    color: #fff;
    margin: 0 0 12px;
}

.call-card-text {
    font-size: 15.5px;
    line-height: 24px;
    color: #b6c2da;
    margin: 0 0 20px;
}

.call-card-phone {
    display: inline-block;
    font-family: 'Zalando Sans', sans-serif;
    font-size: 30px;
    letter-spacing: -0.6px;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 700
}

.call-card-phone:hover {
    color: var(--amber);
}

.call-card-image {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
}

.call-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 353.61 / 221.11;
    object-fit: cover;
}

.call-card-address {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 21px;
}

.call-address-name {
    font-family: 'Zalando Sans', sans-serif;
    font-size: 17px;
    line-height: 1.18;
    letter-spacing: -0.34px;
    color: #fff;
    margin: 0 0 8px;
}

.call-address-lines {
    font-size: 15.5px;
    line-height: 24.8px;
    color: #aeb9d0;
    margin: 0;
}

@media (max-width: 991px) {


    .contact-form-card {
        padding: 40px 28px 32px;
    }

    .contact-form-title {
        font-size: 30px;
    }

    .contact-call-card {
        padding: 36px 28px 28px;
    }
}

@media (max-width: 575px) {
    .contact-submit {
        width: 100%;
        justify-content: center;
    }
}

/* === Blog === */
.blog-banner {
    padding: 150px 0 70px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

.blog-banner-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(1100px 460px at 50% -140px, rgba(0, 87, 255, .10), rgba(0, 87, 255, 0) 70%),
        linear-gradient(180deg, #f2f6ff 0%, #ffffff 100%);
}

.blog-banner-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 1.2;
    letter-spacing: -1.5px;
    color: var(--ink);
    margin: 0;
}

.blog-listing {
    padding: 70px 0 90px;
    background: linear-gradient(180deg, #EBF2FF 0%, rgba(235, 242, 255, 0.00) 100%)
}

/* Blog card */
.blog-card {
    display: block;
    flex-direction: column;
    height: 100%;
    background: var(--card);
    border: 1px solid #e2e8f5;
    border-radius: 8px;
    overflow: hidden;
}

.blog-card-media {
    display: block;
    position: relative;
    aspect-ratio: 365 / 228;
    background: var(--blue-soft);
    overflow: hidden;
}

.blog-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.blog-card:hover .blog-card-media img {
    transform: scale(1.04);
}

.blog-card-tag {
    position: absolute;
    left: 14px;
    top: 14px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(10, 22, 40, .72);
    border: 1px solid rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: .24px;
    color: #fff;
}

.blog-card-body {
    display: block;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 21px 24px 20px;
}

.blog-card-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.28;
    letter-spacing: -.475px;
    margin: 0 0 12px;
}

.blog-card-title a {
    color: var(--ink);
}

.blog-card-title a:hover {
    color: var(--blue);
}

.blog-card-excerpt {
    font-size: 15px;
    line-height: 23.25px;
    color: var(--body);
    margin: 0 0 20px;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid #e2e8f5;
}

.blog-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: #fff;
}

.blog-card-author {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.blog-card-name {
    font-size: 14px;
    line-height: 18.9px;
    color: var(--ink);
    font-weight: 500;
}

.blog-card-name:hover {
    color: var(--blue);
}

.blog-card-date {
    font-size: 13px;
    line-height: 17.55px;
    color: #7a8aaa;
}

.blog-card-read {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 21.7px;
    color: var(--blue);
    font-weight: 500;
    white-space: nowrap;
}

.blog-card-read:hover {
    color: var(--blue-ink);
}

.blog-card {
    transition: all 0.4s
}

.blog-card:hover {
    transform: translateY(-10px)
}

/* Pagination */
.blog-pagination {
    margin-top: 40px;
}

.blog-pagination-link {
    display: inline-flex;
    align-items: center;
    padding: 15px 29px;
    border: 1px solid #e2e8f5;
    border-radius: 8px;
    background: #fff;
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
}

.blog-pagination-link:hover {
    border-color: var(--blue);
    color: var(--blue);
}

/* Sidebar */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.blog-widget {
    background: var(--card);
    border: 1px solid #e2e8f5;
    border-radius: 8px;
    padding: 27px;
}

.blog-widget-title {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.12;
    letter-spacing: 1.56px;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 16px;
}

/* Search widget */
.blog-search {
    display: flex;
    gap: 8px;
}

.blog-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 47px;
    padding: 0 14px;
    border: 1px solid #e2e8f5;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    color: var(--ink);
    background: #fff;
}

.blog-search input::placeholder {
    color: #757575;
}

.blog-search input:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(0, 87, 255, .12);
}

.blog-search-btn {
    flex-shrink: 0;
    width: 50px;
    height: 47px;
    border: 0;
    border-radius: 10px;
    background: var(--blue);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: background .2s ease;
}

.blog-search-btn:hover {
    background: var(--blue-ink);
}

/* Categories */
.blog-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 11px;
    border-bottom: 1px solid #e2e8f5;
}

.blog-cat-item:last-child {
    border-bottom: 0;
}

.blog-cat-item a {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 23.25px;
    color: var(--ink);
}

.blog-cat-item a:hover {
    color: var(--blue);
}

.blog-cat-sub {
    padding-left: 18px;
    position: relative;
}

.blog-cat-sub::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-left: 1px solid #e2e8f5;
    border-bottom: 1px solid #e2e8f5;
    transform: translateY(-70%);
}

.blog-cat-sub a {
    font-size: 14px;
    line-height: 21.7px;
    color: var(--body);
}

.blog-cat-count {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--blue-soft);
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.55;
    color: var(--blue);
}

/* Recent posts */
.blog-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-recent-list a {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 20.25px;
    color: var(--body);
    line-height: normal;
    display: block
}

.blog-recent-list a:hover {
    color: var(--blue);
}

.blog-banner-head-details {
    display: flex;
    align-items: center
}

.blog-meta-details {
    margin-left: 40px;
    margin-bottom: 0;
    color: #7A8AAA;
    position: relative;
    font-size: 15px
}

.blog-meta-details::before {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 50%;
    left: -20px;
    background: #C2CCE0;
    transform: translateY(-50%);
    border-radius: 50%
}

.blog-meta-details p {
    margin-bottom: 0
}

.blog-meta-details .icon {
    color: #0057FF;
    margin-right: 8px;
    font-size: 16px;
}

.blog-banner-head-details .blog-card-meta {
    padding-top: 0;
    border-top: none;
    margin-top: 0
}

.single-blog-top-img {
    margin-bottom: 50px;
    border: 1px solid #E2E8F5;
    box-shadow: 0 30px 70px 0 rgba(10, 22, 40, 0.16);
    border-radius: 8px;
}

.single-blog-top-img img {
    width: 100%;
    border-radius: 8px;
}

.single-blog-content .border {
    border-radius: 3px;
    background: linear-gradient(90deg, #0057FF 0%, #39B8FF 100%);
    width: 46px;
    height: 3px;
    display: inline-block
}

.single-blog-content {
    color: #3D4F6B
}

.single-blog-content .title {
    margin-top: 20px;
    font-size: 30px
}

.single-blog-content ul {
    list-style: none
}

.single-blog-content ul li {
    position: relative;
    margin-bottom: 10px
}

.single-blog-content ul li:last-child {
    margin-bottom: 0
}

.single-blog-content ul li::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0057FF;
    box-shadow: 0 0 0 4px rgba(0, 87, 255, 0.12);
    top: 8px;
    left: -25px;
}

.single-blog-content p a:hover,
.single-blog-content li a:hover {
    text-decoration: underline
}

.single-blog-cta {
    border-radius: 20px;
    border: 1px solid #E2E8F5;
    background: radial-gradient(98.49% 84.51% at 100% -4950%, rgba(0, 87, 255, 0.10) 0%, rgba(0, 87, 255, 0.00) 60%), linear-gradient(180deg, #FFF 0%, #EEF3FD 100%);
    padding: 40px;
	margin-top:20px
}

.blog-single-social {
    border-top: 1px solid #E2E8F5;
    border-bottom: 1px solid #E2E8F5;
    padding: 40px 0;
    margin-top: 30px
}

.blog-single-social ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center
}

.blog-single-social ul li {
    margin-right: 10px
}

.blog-single-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E8F5;
    border-radius: 7px;
    color: #3D4F6B;
    width: 40px;
    height: 40px
}

.blog-single-social li a:hover {
    background: var(--blue-ink);
    color: #fff;
    ;
    border-color: var(--blue-ink);
}

.blog-single-social ul li:last-child {
    margin-right: 0
}

.blog-single-comment-form ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.blog-single-comment-form {
    border-radius: 18px;
    border: 1px solid #E2E8F5;
    box-shadow: 0 16px 36px 0 rgba(10, 22, 40, 0.07);
    padding: 40px
}

.blog-single-comment-form .field-label .req {
    font-size: 16px
}

.blog-single-comment {
    margin-top: 40px
}

.blog-single-comment-heading a {
    font-size: 14px;
    font-weight: 400;
    margin-left: 10px
}

.blog-single-comment-heading {
    color: #7A8AAA;
    font-size: 14px
}

.blog-details-area {
    position: relative
}

.blog-details-shape {
    position: absolute;
    bottom: 20%;
    right: 0;
    z-index: -1
}

.blog-listing {
    position: relative;
    z-index: 1
}

.blog-page-shape {
    position: absolute;
    bottom: -5%;
    right: 0;
    z-index: -1
}

@media (max-width: 991px) {
    .blog-banner {
        padding: 130px 0 30px;
    }

    .blog-banner-title {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .blog-listing {
        padding: 10px 0 60px;
    }

    .blog-sidebar {
        margin-top: 8px;
    }

    .scholarship-info-area .info-panel-title {
        font-size: 20px
    }

    .scholarship-reminder-area .reminder-submit {
        padding: 12px 25px;
        font-size: 16px;
    }

    .footer-widget a {
        font-size: 15px;
        color: rgba(255, 255, 255, .8);
        transition: color .2s ease;
    }

    .footer-widget ul {
        list-style: none
    }

    .scholarship-topic-area {
        padding-bottom: 80px;
    }

    .route-card {
        padding: 20px
    }

    .route-card-title {
        font-size: 17px
    }

    .contact-banner {
        padding-bottom: 145px;
    }

    .blog-listing {
        padding: 50px 0
    }

    .blog-sidebar {
        margin-top: 48px;
    }

    .blog-card-title {
        font-size: 16px
    }

    .blog-card-meta {
        flex-wrap: wrap
    }

    .single-blog-content .title {
        margin-top: 20px;
        font-size: 22px;
    }

    .about-banner-title {
        font-size: 28px;
    }

    section.blog-listing.blog-details-area {
        padding-bottom: 0
    }

    .blog-banner-head-details {
        flex-direction: row;
        align-items: flex-start !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    .blog-meta-details {
        margin-left: 15px;
        margin-bottom: 15px;
    }

    .single-blog-cta {
        padding: 20px;
        text-align: center
    }

    .blog-single-social ul {
        justify-content: center
    }

    .blog-single-comment-form {
        padding: 20px
    }

    .blog-widget {
        padding: 18px
    }

    .pod-hosts {
        padding: 50px 0
    }

    .guest-name {
        font-size: 28px;
    }

    .episode-card-title {
        font-size: 18px
    }

    .connect-heading {
        font-size: 24px;
    }

    .connect-form-panel {
        padding: 20px
    }

    .host-card {
        padding: 18px;
        flex-direction: column;
        text-align: center
    }

    .archive-head {
        justify-content: center
    }

    .pod-listen {
        padding-bottom: 0
    }

    .connect-card {
        padding: 20px
    }

    .connect-card-title {
        font-size: 16px
    }

    .pod-listen {
        padding-top: 50px
    }
}

@media (max-width: 767px) {

    .scholarship-topic-area {
        padding-bottom: 70px;
    }

    .scholarship-reminder-area .reminder-heading {
        font-size: 20px;
        line-height: 120%
    }

    .scholarship-reminder-area .reminder-copy p {
        font-size: 14px;
        line-height: 23.35px;
    }

    .footer-brand {
        margin-bottom: 10px
    }

    .scholarship-reminder-area .reminder-card {
        max-width: 100%
    }

    .scholarship-winners-area {
        padding-top: 0
    }

    .contact-banner .about-banner-text {
        width: 100%;
        max-width: 100%;
        font-size: 16px
    }

    .contact-banner {
        padding-bottom: 140px;
    }

    .contact-form-card {
        padding: 25px
    }

    .contact-form-title {
        font-size: 26px;
    }

    .call-card-phone {
        font-size: 22px
    }

    .about-banner-title {
        font-size: 24px;
    }

    .latest-title {
        font-size: 22px;
    }

    .connect-card-title {
        font-size: 18px
    }

    .archive-season-title,
    .archive-season-title.lg {
        font-size: 22px;
    }
    .bio-hero-role{
        justify-content: center
    }
}

@media (max-width: 575px) {
    .blog-banner-title {
        font-size: 34px;
    }

    .blog-card-body {
        padding: 20px;
    }

    .contact-form-area {
        padding-top: 0
    }

    .blog-sidebar {
        margin-top: 30px
    }

    .guest-name {
        font-size: 24px;
    }

    .latest-title {
        font-size: 22px;
    }

    .connect-heading {
        font-size: 20px;
    }

    .archive-head {
        justify-content: center
    }

    .archive-season-head {
        justify-content: center;
        text-align: center
    }

    .listen-platforms {
        flex-wrap: wrap;
        gap: 10px
    }

    .listen-platforms li {
        flex: 1 1 auto;
    }

}

/* === Sparkle twinkle animation (applies to all sparkle images) === */
.bio-hero-sparkle img,
.wsa-figure .sparkle,
.topic-photo .sparkle,
img.sparkle {
    animation: sparkle-twinkle 2.8s ease-in-out infinite;
    transform-origin: center;
}

/* stagger a couple so multiple sparkles don't pulse in perfect sync */
.topic-photo .sparkle {
    animation-duration: 3.4s;
    animation-delay: .6s;
}

.bio-hero-sparkle img {
    animation-duration: 2.4s;
}

@keyframes sparkle-twinkle {
    0%, 100% {
        opacity: .55;
        transform: scale(.85) rotate(-6deg);
    }
    45% {
        opacity: 1;
        transform: scale(1.12) rotate(4deg);
    }
    70% {
        opacity: .8;
        transform: scale(1) rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bio-hero-sparkle img,
    .wsa-figure .sparkle,
    .topic-photo .sparkle,
    img.sparkle {
        animation: none;
    }
}

/* === Header dropdown: hide submenus by default (prevents load flash) === */
.mainmenu ul li.has-submenu > ul.sub-menu,
.mainmenu ul li > ul.sub-menu {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}

/* mobile accordion open state re-enables it */
.mainmenu ul li.has-submenu > ul.sub-menu.active,
.mainmenu ul li > ul.sub-menu.active {
    visibility: visible;
    opacity: 1;
    max-height: 55em;
    overflow: visible;
}

/* === Header dropdown menu (desktop) === */
@media (min-width: 992px) {
    /* desktop controls visibility via hover/focus below; clear the base cap */
    .mainmenu ul li.has-submenu > ul.sub-menu {
        max-height: none;
        overflow: visible;
    }

    .mainmenu ul li.has-submenu {
        position: relative;
    }

    /* the auto-injected <span> toggle is mobile-only */
    .mainmenu ul li.has-submenu > span {
        display: none;
    }

    /* caret indicator on parent items */
    .mainmenu ul li.has-submenu > a::after {
        content: "";
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-left: 7px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .25s ease;
        opacity: .7;
    }

    .mainmenu ul li.has-submenu:hover > a::after,
    .mainmenu ul li.has-submenu:focus-within > a::after {
        transform: translateY(1px) rotate(45deg);
        opacity: 1;
    }

    .mainmenu ul li.has-submenu > ul.sub-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        min-width: 232px;
        margin: 0;
        padding: 8px;
        list-style: none;
        background: #fff;
        border: 1px solid var(--line, #eef1f7);
        border-radius: 12px;
        box-shadow: 0 18px 40px rgba(11, 24, 37, .14);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
        z-index: 40;
    }

    /* invisible bridge so the pointer can travel from label to panel */
    .mainmenu ul li.has-submenu > ul.sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -12px;
        height: 12px;
    }

    .mainmenu ul li.has-submenu:hover > ul.sub-menu,
    .mainmenu ul li.has-submenu:focus-within > ul.sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(6px);
    }

    .mainmenu ul li.has-submenu > ul.sub-menu > li {
        width: 100%;
        margin: 0;
    }

    .mainmenu ul li.has-submenu > ul.sub-menu > li > a {
        display: block;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 15px;
        line-height: 1.3;
        color: var(--ink, #0a1628);
        white-space: nowrap;
        transition: background .2s ease, color .2s ease;
    }

    /* neutralise the underline hover effect used by top-level links */
    .mainmenu ul li.has-submenu > ul.sub-menu > li > a::before,
    .mainmenu ul li.has-submenu > ul.sub-menu > li > a::after {
        display: none;
    }

    .mainmenu ul li.has-submenu > ul.sub-menu > li > a:hover,
    .mainmenu ul li.has-submenu > ul.sub-menu > li > a.is-active {
        background: #eef4ff;
        color: #0057ff;
    }
}

/* === How We Work — animated dotted line + sequential reveal === */
.howwork-timeline {
    --hw-accent: #f5a623;
}

/* SVG connector layer injected by JS, sits behind icons, over the divider */
.howwork-line {
    position: absolute;
    top: 42px;
    left: 0;
    width: 100%;
    transform: translateY(-42px);
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

/* thin straight base line across the later gaps */
.howwork-line-base {
    fill: none;
    stroke: rgba(255, 255, 255, .16);
    stroke-width: 1;
}

/* orange dotted arc — fully drawn; a mask reveals it left-to-right (matches Vector.svg) */
.howwork-line-arc {
    fill: none;
    stroke: #fcc419;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-dasharray: 2.21 3.31;
}

/* stages start dimmed, activate one-by-one */
.howwork-stage .howwork-ic,
.howwork-stage .howwork-name {
    transition: background .4s ease, border-color .4s ease, color .4s ease,
        transform .4s ease, box-shadow .4s ease;
}

.howwork-stage {
    opacity: .55;
    transition: opacity .5s ease;
}

.howwork-stage.is-active {
    opacity: 1;
}

.howwork-stage.is-active .howwork-ic {
    background: #0057ff;
    border-color: #0e244e;
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 87, 255, .34);
}

.howwork-stage.is-active .white {
    display: block;
}

.howwork-stage.is-active .blue {
    display: none;
}


/* hover still works and shouldn't fight the active state */
.howwork-stage:hover {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .howwork-stage {
        opacity: 1;
    }
    .howwork-line path {
        transition: none;
        stroke-dashoffset: 0;
    }
}

/* On mobile the timeline stacks vertically — hide the horizontal SVG line */
@media (max-width: 991.98px) {
    .howwork-line {
        display: none;
    }
    .howwork-stage {
        opacity: 1;                       /* no scroll-dimming when stacked */
    }
}
.blog-single-comment li{
	margin:0;
	padding:0;
	list-style:none;
}
section.wsa-area.v2.gradient.bg_white {
    background: transparent;
}

/* ============================================================
   Author profile card (author.php)
   ============================================================ */
.author-banner {
    padding: 150px 0 80px;
}

.author-profile-card {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 900px;
    margin: 28px auto 0;
    padding: 36px 40px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 24px 60px -32px rgba(10, 22, 40, 0.28);
}

.author-profile-avatar {
    flex: 0 0 auto;
}

.author-profile-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--blue-soft);
    display: block;
}

.author-profile-info {
    flex: 1 1 auto;
    min-width: 0;
}

.author-profile-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--blue);
    background: var(--blue-soft);
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.author-profile-name {
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: var(--ink);
    margin: 0 0 10px;
}

.author-profile-bio {
    font-size: 17px;
    line-height: 28px;
    color: var(--body);
    margin: 0 0 18px;
    max-width: 60ch;
}

.author-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.author-profile-count {
    font-size: 15px;
    color: var(--nav);
}

.author-profile-count strong {
    color: var(--ink);
    font-weight: 700;
}

.author-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    padding-left: 24px;
    border-left: 1px solid var(--line);
    transition: color 0.2s ease;
}

.author-profile-link:hover {
    color: var(--blue-ink);
    text-decoration: underline;
}
.single-post-banner .about-banner-title{
	font-size:36px
}
.single-blog-content {
    font-size: 16px;
    line-height: 26px;
}
.single-blog-content h1{
	font-size:32px
}
.single-blog-content h2{
	font-size:28px
}
.single-blog-content h3{
	font-size:26px
}
.single-blog-content h4{
	font-size:24px
}
.single-blog-content h5{
	font-size:22px
}
.single-blog-content h6{
	font-size:20px
}
.single-blog-content .wp-block-column h2{
	font-size:20px
}
.wp-block-buttons .wp-block-button__link:hover{
	color:#fff
}
.newsletter_form  input {
    width: 100% !important;
    height: 52.8px !important;
    background: #fff !important;
    border: 1px solid #e2e8f5 !important;
    border-radius: 11px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    color: var(--ink) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    box-shadow: none !important;
}
.newsletter_form  input::placeholder{
	opacity:0.4 !important
}
.newsletter_form form .cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font: 400 18px / 1.2 'DM Sans', sans-serif !important;
    padding: 15px 36px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    justify-content: center !important;
    background: var(--blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 11px rgba(0, 87, 255, .30) !important;
	width:100% !important
}
.newsletter_form form .cta-btn:hover {
    background: var(--blue-ink) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.blog-pagination a{
	margin-right:10px
}

@media (max-width: 767px) {
    .author-banner {
        padding: 130px 0 60px;
    }
    .author-profile-card {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 28px 22px;
    }
    .author-profile-avatar img {
        width: 96px;
        height: 96px;
    }
    .author-profile-name {
        font-size: 30px;
    }
    .author-profile-meta {
        justify-content: center;
    }
    .author-profile-link {
        padding-left: 0;
        border-left: 0;
    }
}