/* =========================================================
   THE ADVERTISERS
   ABOUT PAGE
========================================================= */

.about-page {
    background: #f8fafc;
    color: #111827;
}


/* =========================================================
   COMMON
========================================================= */

.about-page .section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #6366f1;

    margin-bottom: 18px;
}

.about-page .section-title {
    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.1;

    font-weight: 900;

    color: #111827;
}

.about-page .section-title span {
    display: block;
    color: #6366f1;
}

.about-page .section-description {
    margin-top: 20px;

    max-width: 700px;

    font-size: 17px;
    line-height: 1.8;

    color: #64748b;
}


/* =========================================================
   HERO
========================================================= */

.about-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    padding-top: 150px;
    padding-bottom: 150px;

    overflow: hidden;

    background:
            radial-gradient(
                    circle at 15% 20%,
                    rgba(99, 102, 241, 0.24),
                    transparent 32%
            ),
            radial-gradient(
                    circle at 85% 25%,
                    rgba(79, 70, 229, 0.22),
                    transparent 30%
            ),
            linear-gradient(
                    135deg,
                    #111827 0%,
                    #1e1b4b 50%,
                    #111827 100%
            );

    color: white;
}


/* Decorative orbs */

.about-hero-orb {
    position: absolute;

    border-radius: 9999px;

    pointer-events: none;

    filter: blur(1px);

    opacity: 0.5;
}

.about-orb-one {
    width: 420px;
    height: 420px;

    top: 5%;
    left: -160px;

    background: rgba(99, 102, 241, 0.13);

    filter: blur(70px);

    animation: aboutOrbFloat 10s ease-in-out infinite;
}

.about-orb-two {
    width: 360px;
    height: 360px;

    right: -120px;
    bottom: 0;

    background: rgba(56, 189, 248, 0.10);

    filter: blur(70px);

    animation: aboutOrbFloat 12s ease-in-out infinite reverse;
}

@keyframes aboutOrbFloat {

    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(20px, -25px, 0);
    }
}


/* Eyebrow */

.about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 16px;

    border: 1px solid rgba(165, 180, 252, 0.22);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.055);

    backdrop-filter: blur(12px);

    color: #c7d2fe;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.about-eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #818cf8;

    box-shadow: 0 0 14px rgba(129, 140, 248, 0.8);
}


/* Hero title */

.about-hero-title {
    margin-top: 30px;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(3rem, 7vw, 6rem);

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -0.045em;

    color: white;
}

.about-hero-title span {
    display: block;

    margin-top: 8px;

    background:
            linear-gradient(
                    90deg,
                    #a5b4fc,
                    #c4b5fd,
                    #67e8f9
            );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* Hero description */

.about-hero-description {
    max-width: 800px;

    margin: 28px auto 0;

    font-size: 18px;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.68);
}


/* Hero buttons */

.about-hero-actions {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 36px;
}

.about-primary-btn,
.about-secondary-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 54px;

    padding: 0 26px;

    border-radius: 999px;

    font-size: 15px;
    font-weight: 800;

    text-decoration: none;

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            background 0.3s ease;
}

.about-primary-btn {
    color: white;

    background:
            linear-gradient(
                    135deg,
                    #6366f1,
                    #7c3aed
            );

    box-shadow:
            0 15px 40px rgba(79, 70, 229, 0.32);
}

.about-primary-btn:hover {
    transform: translateY(-3px);

    box-shadow:
            0 20px 50px rgba(79, 70, 229, 0.42);
}

.about-secondary-btn {
    color: white;

    border: 1px solid rgba(255, 255, 255, 0.16);

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(12px);
}

.about-secondary-btn:hover {
    transform: translateY(-3px);

    background: rgba(255, 255, 255, 0.12);
}


/* Hero stats */

.about-hero-stats {
    display: flex;

    justify-content: center;
    align-items: center;

    margin: 70px auto 0;

    max-width: 900px;

    padding: 25px 35px;

    border: 1px solid rgba(255, 255, 255, 0.10);

    border-radius: 24px;

    background: rgba(255, 255, 255, 0.045);

    backdrop-filter: blur(16px);
}

.hero-stat {
    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;
}

.hero-stat strong {
    font-size: 22px;

    font-weight: 900;

    color: white;
}

.hero-stat span {
    font-size: 12px;

    color: rgba(255, 255, 255, 0.52);
}

.hero-stat-divider {
    width: 1px;
    height: 45px;

    background: rgba(255, 255, 255, 0.12);
}


/* Hero wave */

.about-hero-wave {
    position: absolute;

    bottom: -1px;
    left: 0;

    width: 100%;
    height: 90px;

    z-index: 2;

    pointer-events: none;
}

.about-hero-wave svg {
    width: 100%;
    height: 100%;

    display: block;
}

.about-hero-wave path {
    fill: #f8fafc;
}


/* =========================================================
   STORY
========================================================= */

.about-story {
    position: relative;

    padding: 110px 0;

    background: #f8fafc;
}

.about-story-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 0.9fr);

    gap: 90px;

    align-items: center;
}

.about-dark-title span {
    color: #6366f1;
}

.about-story-intro {
    margin-bottom: 45px;
}


/* Timeline */

.about-timeline {
    position: relative;

    padding-left: 42px;
}

.about-timeline::before {
    content: '';

    position: absolute;

    top: 5px;
    bottom: 5px;

    left: 10px;

    width: 2px;

    background:
            linear-gradient(
                    to bottom,
                    #6366f1,
                    #c7d2fe,
                    transparent
            );
}

.timeline-card {
    position: relative;

    display: flex;

    gap: 20px;

    margin-bottom: 34px;
}

.timeline-card:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;

    left: -42px;

    top: 1px;

    width: 22px;
    height: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: #6366f1;

    background: white;

    border: 2px solid #818cf8;

    box-shadow:
            0 0 0 6px rgba(99, 102, 241, 0.08);

    z-index: 2;
}

.timeline-marker svg {
    width: 11px;
    height: 11px;
}

.timeline-content {
    padding: 2px 0;
}

.timeline-year {
    display: inline-block;

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.15em;

    color: #6366f1;
}

.timeline-content h3 {
    margin: 0 0 8px;

    font-size: 21px;

    font-weight: 800;

    color: #111827;
}

.timeline-content p {
    margin: 0;

    max-width: 570px;

    font-size: 15px;

    line-height: 1.75;

    color: #64748b;
}

.timeline-current .timeline-marker {
    color: white;

    background: #6366f1;

    border-color: #6366f1;

    box-shadow:
            0 0 0 7px rgba(99, 102, 241, 0.10),
            0 8px 20px rgba(99, 102, 241, 0.25);
}


/* Story image */

.about-story-visual {
    position: relative;

    padding: 25px;
}

.story-image-glow {
    position: absolute;

    inset: 40px 10px 10px 40px;

    border-radius: 34px;

    background:
            linear-gradient(
                    135deg,
                    #6366f1,
                    #7c3aed
            );

    filter: blur(35px);

    opacity: 0.25;
}

.story-image-card {
    position: relative;

    height: 570px;

    overflow: hidden;

    border-radius: 30px;

    border: 1px solid rgba(255, 255, 255, 0.7);

    background: #111827;

    box-shadow:
            0 30px 80px rgba(15, 23, 42, 0.18);
}

.story-image-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
            transform 0.7s ease;
}

.about-story-visual:hover .story-image-card img {
    transform: scale(1.035);
}

.story-image-overlay {
    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    to top,
                    rgba(15, 23, 42, 0.75),
                    transparent 55%
            );
}

.story-image-badge {
    position: absolute;

    top: 25px;
    left: 25px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 17px;

    border-radius: 16px;

    color: white;

    background: rgba(15, 23, 42, 0.58);

    border: 1px solid rgba(255, 255, 255, 0.14);

    backdrop-filter: blur(14px);
}

.story-badge-icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    color: white;

    background: rgba(99, 102, 241, 0.7);
}

.story-image-badge span {
    display: block;

    margin-bottom: 2px;

    font-size: 9px;

    letter-spacing: 0.15em;

    color: rgba(255, 255, 255, 0.55);
}

.story-image-badge strong {
    display: block;

    font-size: 14px;
}

.story-floating-card {
    position: absolute;

    right: -5px;
    bottom: 0;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 18px 22px;

    border-radius: 20px;

    background: white;

    box-shadow:
            0 20px 50px rgba(15, 23, 42, 0.18);
}

.story-floating-number {
    font-size: 34px;

    line-height: 1;

    font-weight: 900;

    color: #6366f1;
}

.story-floating-card strong,
.story-floating-card span {
    display: block;
}

.story-floating-card strong {
    font-size: 15px;

    color: #111827;
}

.story-floating-card span {
    margin-top: 2px;

    font-size: 11px;

    color: #94a3b8;
}


/* =========================================================
   TRANSITION
========================================================= */

.transition-section {
    padding: 110px 0;

    background: white;
}

.transition-header {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}

.transition-header .section-description {
    margin-left: auto;
    margin-right: auto;
}

.transition-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        90px
        1fr;

    align-items: center;

    gap: 25px;

    max-width: 1100px;

    margin: 65px auto 0;
}

.transition-card {
    min-height: 370px;

    padding: 35px;

    border-radius: 28px;

    border: 1px solid;

    transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
}

.transition-card:hover {
    transform: translateY(-6px);
}

.traditional-card {
    border-color: #e2e8f0;

    background:
            linear-gradient(
                    145deg,
                    #ffffff,
                    #f8fafc
            );

    box-shadow:
            0 20px 50px rgba(15, 23, 42, 0.06);
}

.modern-card {
    border-color: rgba(99, 102, 241, 0.18);

    background:
            linear-gradient(
                    145deg,
                    #f5f3ff,
                    #eef2ff
            );

    box-shadow:
            0 25px 60px rgba(99, 102, 241, 0.10);
}

.transition-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;
}

.transition-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #6366f1;

    background: rgba(99, 102, 241, 0.10);
}

.transition-card-top > span {
    padding: 6px 11px;

    border-radius: 999px;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.15em;

    color: #6366f1;

    background: rgba(99, 102, 241, 0.08);
}

.transition-card h3 {
    margin: 0 0 13px;

    font-size: 27px;

    font-weight: 900;

    color: #111827;
}

.transition-card p {
    margin: 0;

    font-size: 15px;

    line-height: 1.75;

    color: #64748b;
}

.transition-points {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 30px;
}

.transition-points span {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 700;

    color: #475569;
}

.transition-points b {
    width: 23px;
    height: 23px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 12px;

    color: #6366f1;

    background: rgba(99, 102, 241, 0.10);
}

.transition-arrow {
    display: flex;

    align-items: center;
    justify-content: center;
}

.transition-arrow-circle {
    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: white;

    background:
            linear-gradient(
                    135deg,
                    #6366f1,
                    #7c3aed
            );

    box-shadow:
            0 12px 30px rgba(99, 102, 241, 0.28);
}


/* =========================================================
   VALUES
========================================================= */

.about-values {
    padding: 110px 0;

    background: #f8fafc;
}

.about-values-header {
    max-width: 800px;

    margin: 0 auto;

    text-align: center;
}

.about-values-header .section-description {
    margin-left: auto;
    margin-right: auto;
}

.values-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;

    margin-top: 60px;
}

.value-card {
    position: relative;

    min-height: 330px;

    padding: 30px;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid #e2e8f0;

    background: white;

    box-shadow:
            0 10px 30px rgba(15, 23, 42, 0.04);

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease;
}

.value-card:hover {
    transform: translateY(-7px);

    border-color: rgba(99, 102, 241, 0.25);

    box-shadow:
            0 25px 50px rgba(15, 23, 42, 0.09);
}

.value-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #6366f1;

    background: #eef2ff;
}

.value-number {
    position: absolute;

    top: 25px;
    right: 25px;

    font-size: 12px;

    font-weight: 900;

    color: #cbd5e1;
}

.value-card h3 {
    margin: 28px 0 10px;

    font-size: 20px;

    font-weight: 900;

    color: #111827;
}

.value-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.75;

    color: #64748b;
}


/* =========================================================
   BELIEF
========================================================= */

.belief-section {
    padding: 110px 0;

    background: white;
}

.belief-box {
    position: relative;

    display: grid;

    grid-template-columns: 1.25fr 1fr;

    gap: 70px;

    align-items: center;

    padding: 65px;

    overflow: hidden;

    border-radius: 32px;

    background:
            radial-gradient(
                    circle at 90% 10%,
                    rgba(99, 102, 241, 0.18),
                    transparent 30%
            ),
            linear-gradient(
                    135deg,
                    #111827,
                    #1e1b4b
            );

    box-shadow:
            0 30px 80px rgba(15, 23, 42, 0.18);
}

.belief-content .section-label {
    color: #a5b4fc;
}

.belief-content h2 {
    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(2.3rem, 4vw, 4rem);

    line-height: 1.1;

    font-weight: 900;

    color: white;
}

.belief-content h2 span {
    display: block;

    color: #a5b4fc;
}

.belief-content p {
    max-width: 650px;

    margin: 24px 0 0;

    font-size: 16px;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.62);
}

.belief-points {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}

.belief-point {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 65px;

    padding: 13px 16px;

    border-radius: 15px;

    border: 1px solid rgba(255, 255, 255, 0.09);

    background: rgba(255, 255, 255, 0.045);

    color: rgba(255, 255, 255, 0.75);

    font-size: 13px;

    font-weight: 700;
}

.belief-point-icon {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #a5b4fc;

    background: rgba(99, 102, 241, 0.16);
}


/* =========================================================
   PROCESS
========================================================= */

.about-process {
    padding: 110px 0;

    background: #f8fafc;
}

.process-header {
    max-width: 760px;

    margin: 0 auto;

    text-align: center;
}

.process-header .section-description {
    margin-left: auto;
    margin-right: auto;
}

.about-process-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 25px;

    margin-top: 60px;
}

.about-process-card {
    position: relative;

    padding: 35px;

    min-height: 300px;

    border-radius: 25px;

    border: 1px solid #e2e8f0;

    background: white;

    box-shadow:
            0 12px 35px rgba(15, 23, 42, 0.045);

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
}

.about-process-card:hover {
    transform: translateY(-7px);

    box-shadow:
            0 25px 55px rgba(15, 23, 42, 0.09);
}

.process-card-number {
    position: absolute;

    top: 24px;
    right: 25px;

    font-size: 12px;

    font-weight: 900;

    color: #cbd5e1;
}

.process-card-icon {
    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 17px;

    color: #6366f1;

    background: #eef2ff;
}

.about-process-card h3 {
    margin: 28px 0 12px;

    font-size: 21px;

    font-weight: 900;

    color: #111827;
}

.about-process-card p {
    margin: 0;

    font-size: 14px;

    line-height: 1.75;

    color: #64748b;
}


/* =========================================================
   FINAL CTA
========================================================= */

.about-final-cta {
    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background:
            radial-gradient(
                    circle at 15% 30%,
                    rgba(99, 102, 241, 0.22),
                    transparent 28%
            ),
            radial-gradient(
                    circle at 85% 70%,
                    rgba(56, 189, 248, 0.12),
                    transparent 28%
            ),
            linear-gradient(
                    135deg,
                    #111827,
                    #1e1b4b
            );
}

.about-cta-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(70px);

    pointer-events: none;
}

.cta-orb-one {
    width: 300px;
    height: 300px;

    top: -100px;
    right: 10%;

    background: rgba(99, 102, 241, 0.15);
}

.cta-orb-two {
    width: 280px;
    height: 280px;

    bottom: -120px;
    left: 8%;

    background: rgba(56, 189, 248, 0.10);
}

.about-cta-content {
    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}

.about-cta-content .cta-label {
    display: inline-block;

    margin-bottom: 20px;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.18em;

    color: #a5b4fc;
}

.about-cta-content h2 {
    margin: 0;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(2.6rem, 5vw, 4.5rem);

    line-height: 1.05;

    font-weight: 900;

    color: white;
}

.about-cta-content h2 span {
    display: block;

    background:
            linear-gradient(
                    90deg,
                    #a5b4fc,
                    #c4b5fd,
                    #67e8f9
            );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.about-cta-content > p {
    max-width: 700px;

    margin: 24px auto 0;

    font-size: 17px;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.62);
}

.about-cta-actions {
    display: flex;

    justify-content: center;
    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;
}

.cta-primary,
.cta-secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 54px;

    padding: 0 27px;

    border-radius: 999px;

    font-size: 15px;

    font-weight: 800;

    text-decoration: none;

    transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            background 0.3s ease;
}

.cta-primary {
    color: white;

    background:
            linear-gradient(
                    135deg,
                    #6366f1,
                    #7c3aed
            );

    box-shadow:
            0 15px 40px rgba(79, 70, 229, 0.30);
}

.cta-primary:hover {
    transform: translateY(-3px);

    box-shadow:
            0 20px 50px rgba(79, 70, 229, 0.42);
}

.cta-secondary {
    color: white;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: rgba(255, 255, 255, 0.06);

    backdrop-filter: blur(12px);
}

.cta-secondary:hover {
    transform: translateY(-3px);

    background: rgba(255, 255, 255, 0.11);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .about-story-grid {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .about-story-visual {
        max-width: 700px;

        width: 100%;

        margin: 0 auto;
    }

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

    .belief-box {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-process-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .transition-grid {
        grid-template-columns: 1fr;

        max-width: 650px;
    }

    .transition-arrow {
        transform: rotate(90deg);

        margin: -5px auto;
    }

    .transition-card {
        min-height: auto;
    }

    .about-process-grid {
        grid-template-columns: 1fr;

        max-width: 650px;

        margin-left: auto;
        margin-right: auto;
    }
}


@media (max-width: 768px) {

    .about-hero {
        min-height: auto;

        padding-top: 135px;
        padding-bottom: 110px;
    }

    .about-hero-title {
        font-size: clamp(2.6rem, 12vw, 4.2rem);
    }

    .about-hero-description {
        font-size: 16px;
    }

    .about-hero-stats {
        flex-direction: column;

        gap: 20px;

        padding: 22px;
    }

    .hero-stat-divider {
        width: 80px;
        height: 1px;
    }

    .about-story,
    .transition-section,
    .about-values,
    .belief-section,
    .about-process {
        padding: 80px 0;
    }

    .story-image-card {
        height: 450px;
    }

    .story-floating-card {
        right: -5px;
        bottom: -10px;
    }

    .belief-box {
        padding: 38px 28px;

        border-radius: 25px;
    }

    .belief-points {
        grid-template-columns: 1fr;
    }

    .about-final-cta {
        padding: 90px 0;
    }
}


@media (max-width: 640px) {

    .about-hero-actions {
        flex-direction: column;

        width: 100%;
    }

    .about-primary-btn,
    .about-secondary-btn {
        width: 100%;

        max-width: 340px;
    }

    .about-story-grid {
        gap: 45px;
    }

    .about-timeline {
        padding-left: 32px;
    }

    .timeline-marker {
        left: -32px;

        width: 20px;
        height: 20px;
    }

    .timeline-content h3 {
        font-size: 19px;
    }

    .timeline-content p {
        font-size: 14px;
    }

    .about-story-visual {
        padding: 10px;
    }

    .story-image-card {
        height: 390px;

        border-radius: 23px;
    }

    .story-image-badge {
        top: 15px;
        left: 15px;
    }

    .story-floating-card {
        right: -3px;

        padding: 14px 16px;
    }

    .story-floating-number {
        font-size: 28px;
    }

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

    .value-card {
        min-height: auto;
    }

    .transition-card {
        padding: 28px;
    }

    .belief-content h2 {
        font-size: 2.35rem;
    }

    .about-cta-actions {
        flex-direction: column;
    }

    .cta-primary,
    .cta-secondary {
        width: 100%;

        max-width: 340px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }
}