/* =========================================================
   PROFENAA TECHNOLOGIES
   ABOUT PAGE
   PREMIUM ANTHROPIC-INSPIRED STYLE
   Desktop → Laptop → Tablet → Mobile
   NO HORIZONTAL SCROLL
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {
    --about-bg: #f7f6f2;
    --about-white: #ffffff;
    --about-black: #171717;
    --about-text: #292929;
    --about-muted: #66645f;

    --about-blue: #315fdb;
    --about-cyan: #1597a8;

    --about-border: rgba(23, 23, 23, 0.10);

    --about-radius: 24px;
    --about-radius-sm: 14px;

    --about-shadow:
        0 20px 60px rgba(0, 0, 0, 0.07);

    --about-container: 1180px;

    --about-heading:
        var(--font-display),
        "Space Grotesk",
        sans-serif;

    --about-body:
        var(--font-body),
        "Inter",
        sans-serif;
}


/* =========================================================
   GLOBAL OVERFLOW FIX
   ========================================================= */

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--about-bg);
    color: var(--about-text);
}


/* Prevent wide elements from creating horizontal scroll */

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

section,
main,
header,
footer {
    max-width: 100%;
    overflow-x: clip;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
    width: min(
        calc(100% - 48px),
        var(--about-container)
    );

    margin-inline: auto;
}


/* =========================================================
   EYEBROW
   ========================================================= */

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

    margin-bottom: 16px;

    font-family: var(--about-body);
    font-size: 0.75rem;
    font-weight: 700;

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

    color: var(--about-blue);
}

.eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--about-blue),
            var(--about-cyan)
        );

    border-radius: 50px;
}


/* =========================================================
   GRADIENT TEXT
   ========================================================= */

.text-grad {
    background:
        linear-gradient(
            100deg,
            #315fdb 0%,
            #1597a8 100%
        );

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

    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* =========================================================
   SECTION SPACING
   ========================================================= */

section.page-hero,
section.profile,
section.journey,
section.mission-vision,
section.values,
section.final-cta {
    padding-block: clamp(
        80px,
        9vw,
        130px
    );
}


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

.page-hero {

    position: relative;

    padding-top:
        clamp(
            120px,
            12vw,
            170px
        );

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(49, 95, 219, 0.09),
            transparent 28%
        ),

        radial-gradient(
            circle at 10% 85%,
            rgba(21, 151, 168, 0.07),
            transparent 25%
        ),

        var(--about-bg);
}


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

.page-hero-content {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    gap: clamp(
        45px,
        7vw,
        90px
    );

    align-items: center;
}


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

.page-hero-text {
    min-width: 0;
}

.page-hero-text h1 {

    max-width: 720px;

    margin:
        12px 0 25px;

    font-family:
        var(--about-heading);

    font-size:
        clamp(
            2.4rem,
            4.5vw,
            5.0rem
        );

    line-height: 0.98;

    letter-spacing: -0.055em;

    font-weight: 500;

    color: var(--about-black);
}


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

.page-hero-sub {

    max-width: 65ch;

    margin: 0;

    font-family: var(--about-body);

    font-size:
        clamp(
            0.95rem,
            1.5vw,
            1.08rem
        );

    line-height: 1.85;

    color: var(--about-muted);
}

.page-hero-sub strong {
    color: var(--about-text);
    font-weight: 650;
}


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

.page-hero-image {

    position: relative;

    min-width: 0;

    isolation: isolate;
}

.page-hero-image::before {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -35px;
    top: -35px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(49,95,219,.16),
            rgba(21,151,168,.08)
        );

    filter: blur(2px);

    z-index: -1;
}

.page-hero-image::after {

    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    left: -25px;
    bottom: -25px;

    border-radius: 28px;

    background:
        rgba(49,95,219,.08);

    z-index: -1;
}


.page-hero-image img {

    display: block;

    width: 100%;
    height: auto;

    max-height: 620px;

    object-fit: cover;

    border-radius: 28px;

    border:
        1px solid var(--about-border);

    box-shadow:
        0 30px 80px rgba(0,0,0,.10);
}


/* =========================================================
   COMPANY PROFILE
   ========================================================= */

.profile {
    background: var(--about-white);
}

.split {

    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(0, 1.05fr);

    gap:
        clamp(
            45px,
            7vw,
            95px
        );

    align-items: center;
}


/* =========================================================
   PROFILE IMAGE
   ========================================================= */

.split-visual {
    min-width: 0;
}

.visual-frame {

    position: relative;

    width: 100%;

    border-radius: 28px;

    overflow: hidden;

    background: #eeeeea;

    border:
        1px solid var(--about-border);

    box-shadow:
        var(--about-shadow);
}

.frame-grid {

    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;
}

.frame-grid img {

    display: block;

    width: 100%;
    height: 100% !important;

    object-fit: cover;

    transition:
        transform .7s ease;
}

.visual-frame:hover .frame-grid img {
    transform: scale(1.035);
}


/* =========================================================
   PROFILE BADGE
   ========================================================= */

.frame-badge {

    position: absolute;

    left: 20px;
    bottom: 20px;

    display: flex;

    flex-direction: column;

    gap: 5px;

    min-width: 190px;

    padding:
        16px 20px;

    background:
        rgba(255,255,255,.94);

    border:
        1px solid rgba(0,0,0,.08);

    border-radius: 16px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.12);

    backdrop-filter: blur(14px);
}

.frame-badge strong {

    font-family: var(--about-heading);

    font-size: 1.8rem;

    line-height: 1;

    color: var(--about-blue);
}

.frame-badge span {

    font-family: var(--about-body);

    font-size: .74rem;

    line-height: 1.4;

    color: var(--about-muted);
}


/* =========================================================
   PROFILE CONTENT
   ========================================================= */

.split-copy {
    min-width: 0;
}

.split-copy h2 {

    margin:
        8px 0 20px;

    max-width: 650px;

    font-family:
        var(--about-heading);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.1rem
        );

    line-height: 1.08;

    letter-spacing: -0.04em;

    color: var(--about-black);
}

.split-copy p {

    margin: 0 0 18px;

    font-family: var(--about-body);

    font-size: .98rem;

    line-height: 1.85;

    color: var(--about-muted);
}

.split-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   JOURNEY
   ========================================================= */

.journey {
    position: relative;
    overflow: hidden;

    padding: 100px 0;

    background: #f1f1ed;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.section-head {
    width: min(100%, 760px);

    margin: 0 auto 65px;

    text-align: center;
}

.section-head .eyebrow {
    margin-bottom: 12px;

    color: var(--about-blue);

    font-size: .78rem;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.section-head h2 {
    margin: 8px 0 0;

    font-family: var(--about-heading);

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

    line-height: 1.08;

    letter-spacing: -0.04em;

    color: var(--about-black);
}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {

    position: relative;

    display: grid;

    gap: 38px;

    width: min(
        100%,
        850px
    );

    margin-inline: auto;

    padding-left: 52px;
}


/* =========================================================
   TIMELINE LINE
   ========================================================= */

.timeline::before {

    content: "";

    position: absolute;

    left: 10px;

    top: 10px;
    bottom: 10px;

    width: 2px;

    background:
        linear-gradient(
            180deg,
            var(--about-blue) 0%,
            var(--about-cyan) 50%,
            var(--about-blue) 100%
        );

    opacity: .8;
}


/* =========================================================
   TIMELINE ITEM
   ========================================================= */

.timeline-item {

    position: relative;

    min-width: 0;

    padding: 28px 30px;

    background:
        rgba(255, 255, 255, .82);

    border:
        1px solid rgba(0, 0, 0, .07);

    border-radius: 22px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .045);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

    backdrop-filter: blur(8px);
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.timeline-item:hover {

    transform: translateY(-5px);

    border-color:
        rgba(49, 95, 219, .18);

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .08);
}


/* =========================================================
   TIMELINE DOT
   ========================================================= */

.timeline-dot {

    position: absolute;

    left: -52px;

    top: 34px;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--about-blue),
            var(--about-cyan)
        );

    border:
        4px solid #f1f1ed;

    box-shadow:
        0 0 0 1px rgba(49, 95, 219, .25),
        0 5px 15px rgba(49, 95, 219, .18);

    z-index: 2;
}


/* =========================================================
   TIMELINE YEAR / LABEL
   ========================================================= */

.timeline-year {

    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        5px 12px;

    margin-bottom: 13px;

    border-radius: 50px;

    background:
        rgba(49, 95, 219, .08);

    color:
        var(--about-blue);

    font-size: .7rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================================================
   TIMELINE TITLE
   ========================================================= */

.timeline-item h3 {

    margin:
        0 0 10px;

    font-family:
        var(--about-heading);

    font-size:
        clamp(
            1.15rem,
            2vw,
            1.4rem
        );

    line-height: 1.25;

    letter-spacing: -.02em;

    color:
        var(--about-black);
}


/* =========================================================
   TIMELINE DESCRIPTION
   ========================================================= */

.timeline-item p {

    max-width: 680px;

    margin: 0;

    font-size: .92rem;

    line-height: 1.75;

    color:
        var(--about-muted);
}


/* =========================================================
   FIRST CARD
   ========================================================= */

.timeline-item:first-child {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.95),
            rgba(240,247,255,.92)
        );
}


/* =========================================================
   LAST CARD
   ========================================================= */

.timeline-item:last-child {

    background:
        linear-gradient(
            135deg,
            rgba(240,247,255,.92),
            rgba(255,255,255,.95)
        );
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .journey {

        padding:
            80px 0;
    }

    .section-head {

        margin-bottom:
            50px;

        padding-inline:
            15px;
    }

    .timeline {

        width: 100%;

        gap: 30px;

        padding-left:
            40px;
    }

    .timeline::before {

        left:
            8px;
    }

    .timeline-dot {

        left:
            -40px;

        width: 18px;
        height: 18px;

        top:
            30px;
    }

    .timeline-item {

        padding:
            24px 22px;

        border-radius:
            18px;
    }

    .timeline-item p {

        font-size:
            .88rem;

        line-height:
            1.7;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .journey {

        padding:
            65px 0;
    }

    .section-head {

        margin-bottom:
            40px;
    }

    .section-head h2 {

        font-size:
            1.9rem;

        line-height:
            1.12;
    }

    .timeline {

        gap:
            24px;

        padding-left:
            32px;
    }

    .timeline::before {

        left:
            6px;
    }

    .timeline-dot {

        left:
            -32px;

        top:
            25px;

        width:
            16px;

        height:
            16px;

        border-width:
            3px;
    }

    .timeline-item {

        padding:
            21px 18px;

        border-radius:
            16px;
    }

    .timeline-year {

        padding:
            5px 9px;

        margin-bottom:
            10px;

        font-size:
            .62rem;
    }

    .timeline-item h3 {

        font-size:
            1.1rem;

        line-height:
            1.3;
    }

    .timeline-item p {

        font-size:
            .84rem;

        line-height:
            1.65;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .journey {

        padding:
            55px 0;
    }

    .timeline {

        padding-left:
            27px;
    }

    .timeline::before {

        left:
            5px;
    }

    .timeline-dot {

        left:
            -27px;

        width:
            15px;

        height:
            15px;
    }

    .timeline-item {

        padding:
            18px 15px;
    }

    .section-head h2 {

        font-size:
            1.7rem;
    }
}


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

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

    .timeline-item {

        transition:
            none;
    }

    .timeline-item:hover {

        transform:
            none;
    }
}

/* =========================================================
   MISSION & VISION
   ========================================================= */

.mission-vision {
    background: var(--about-white);
}

.mv-grid {

    display: grid;

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

    gap: 24px;
}

.mv-card {

    position: relative;

    padding:
        clamp(28px, 4vw, 45px);

    background:
        #f7f7f4;

    border:
        1px solid var(--about-border);

    border-radius:
        var(--about-radius);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.mv-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--about-shadow);
}


/* =========================================================
   MV ICON
   ========================================================= */

.mv-icon {

    display: grid;

    place-items: center;

    width: 54px;
    height: 54px;

    margin-bottom: 22px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #315fdb,
            #1597a8
        );

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(49,95,219,.18);
}

.mv-icon svg {

    width: 24px;
    height: 24px;
}

.mv-card h3 {

    margin-bottom: 10px;

    font-family:
        var(--about-heading);

    font-size: 1.4rem;

    color: var(--about-black);
}

.mv-card p {

    margin: 0;

    font-size: .92rem;

    line-height: 1.8;

    color: var(--about-muted);
}


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

.values {

    background:
        #f1f1ed;
}

.values-grid {

    display: grid;

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

    gap: 20px;
}

.value-card {

    position: relative;

    min-width: 0;

    padding:
        32px 28px;

    background:
        var(--about-white);

    border:
        1px solid var(--about-border);

    border-radius:
        var(--about-radius);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.value-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        var(--about-shadow);
}

.value-num {

    display: block;

    margin-bottom: 20px;

    font-family:
        var(--about-heading);

    font-size: 3rem;

    line-height: 1;

    font-weight: 700;

    color:
        rgba(49,95,219,.14);
}

.value-card h3 {

    margin-bottom: 10px;

    font-family:
        var(--about-heading);

    font-size: 1.15rem;

    color: var(--about-black);
}

.value-card p {

    margin: 0;

    font-size: .88rem;

    line-height: 1.75;

    color: var(--about-muted);
}


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

.final-cta {

    background:
        var(--about-white);

    padding-top: 5 !important;
}

.cta-band {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    text-align: center;

    padding:
        clamp(
            55px,
            8vw,
            90px
        )
        clamp(
            25px,
            6vw,
            70px
        );

    border-radius:
        30px;

    background:
        linear-gradient(
            135deg,
            #2e699598 0%,
            #06457a 100%
        );

    color: #ffffff;

    box-shadow:
        0 25px 70px rgba(0,0,0,.13);
}

.cta-band::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -200px;
    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49,95,219,.35),
            transparent 65%
        );

    z-index: -1;
}

.cta-band::after {

    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -200px;
    bottom: -250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(21,151,168,.22),
            transparent 65%
        );

    z-index: -1;
}

.cta-band h2 {

    position: relative;

    max-width: 750px;

    margin:
        0 auto 18px;

    font-family:
        var(--about-heading);

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

    line-height: 1.05;

    letter-spacing: -0.045em;
}

.cta-band p {

    position: relative;

    max-width: 700px;

    margin:
        0 auto 30px;

    font-size: .95rem;

    line-height: 1.8;

    color:
        rgba(255,255,255,.72);
}

.cta-actions {

    position: relative;

    z-index: 3;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;
}


/* =========================================================
   CTA BUTTONS
   ========================================================= */

.cta-actions .btn {

    min-height: 48px;

    padding:
        12px 24px;

    border-radius: 50px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .page-hero-content {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .85fr);

        gap: 45px;
    }

    .page-hero-text h1 {

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

    .split {

        gap: 50px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (max-width: 900px) {

    .container {
        width:
            min(
                calc(100% - 40px),
                var(--about-container)
            );
    }


    /* HERO */

    .page-hero-content {

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .page-hero-text {

        text-align: center;

        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .page-hero-sub {
        max-width: 72ch;
    }

    .page-hero-image {

        width:
            min(
                100%,
                650px
            );

        margin-inline: auto;
    }


    /* PROFILE */

    .split {

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .split-visual {

        width:
            min(
                100%,
                700px
            );

        margin-inline: auto;
    }


    /* MISSION */

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


    /* VALUES */

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .container {

        width:
            calc(100% - 32px);

        padding: 0;
    }


    section.page-hero,
    section.profile,
    section.journey,
    section.mission-vision,
    section.values,
    section.final-cta {

        padding-block:
            65px;
    }


    /* HERO */

    .page-hero {

        padding-top:
            105px !important;
    }

    .page-hero-content {
        gap: 35px;
    }

    .page-hero-text {

        text-align: left;

        align-items: flex-start;
    }

    .eyebrow {

        font-size: .68rem;

        letter-spacing: .10em;

        margin-bottom: 12px;
    }

    .eyebrow::before {
        width: 20px;
    }

    .page-hero-text h1 {

        font-size:
            clamp(
                2.15rem,
                10vw,
                3.2rem
            );

        line-height: 1.02;

        letter-spacing: -.045em;

        margin:
            8px 0 18px;
    }

    .page-hero-sub {

        font-size: .9rem;

        line-height: 1.75;
    }


    /* HERO IMAGE */

    .page-hero-image img {

        border-radius: 20px;
    }

    .page-hero-image::before {

        width: 80px;
        height: 80px;

        right: -15px;
        top: -15px;
    }

    .page-hero-image::after {

        width: 60px;
        height: 60px;

        left: -15px;
        bottom: -15px;

        border-radius: 18px;
    }


    /* PROFILE */

    .split-copy h2 {

        font-size:
            clamp(
                1.75rem,
                8vw,
                2.4rem
            );

        line-height: 1.1;
    }

    .split-copy p {

        font-size: .9rem;

        line-height: 1.75;
    }


    /* BADGE */

    .frame-badge {

        left: 12px;
        bottom: 12px;

        min-width: 155px;

        padding:
            12px 15px;

        border-radius: 13px;
    }

    .frame-badge strong {
        font-size: 1.45rem;
    }

    .frame-badge span {
        font-size: .65rem;
    }


    /* SECTION */

    .section-head {

        margin-bottom: 35px;
    }

    .section-head h2 {

        font-size:
            clamp(
                1.75rem,
                8vw,
                2.5rem
            );
    }


    /* TIMELINE */

    .timeline {

        gap: 25px;

        padding-left: 27px;
    }

    .timeline::before {

        left: 5px;
    }

    .timeline-dot {

        left: -27px;

        width: 15px;
        height: 15px;

        top: 26px;
    }

    .timeline-item {

        padding:
            20px 18px;

        border-radius: 17px;
    }

    .timeline-item h3 {
        font-size: 1.05rem;
    }

    .timeline-item p {
        font-size: .84rem;
    }


    /* MISSION */

    .mv-card {

        padding: 26px 21px;

        border-radius: 20px;
    }

    .mv-card h3 {
        font-size: 1.2rem;
    }

    .mv-card p {
        font-size: .86rem;
    }


    /* VALUES */

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

    .value-card {

        padding: 25px 21px;

        border-radius: 19px;
    }


    /* CTA */

    .cta-band {

        padding:
            50px 20px;

        border-radius: 22px;
    }

    .cta-band h2 {

        font-size:
            clamp(
                1.8rem,
                8vw,
                2.5rem
            );
    }

    .cta-band p {

        font-size: .85rem;
    }

    .cta-actions {

        flex-direction: column;

        width: 100%;
    }

    .cta-actions .btn {

        width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .container {
        width: calc(100% - 28px);
    }

    section.page-hero,
    section.profile,
    section.journey,
    section.mission-vision,
    section.values,
    section.final-cta {

        padding-block:
            55px;
    }

    .page-hero {
        padding-top:
            90px !important;
    }

    .page-hero-text h1 {

        font-size:
            clamp(
                1.9rem,
                10vw,
                2.5rem
            );
    }

    .page-hero-sub {
        font-size: .84rem;
    }

    .visual-frame {
        border-radius: 19px;
    }

    .frame-grid {
        aspect-ratio: 1 / .9;
    }

    .frame-badge {
        min-width: 145px;
    }

    .frame-badge strong {
        font-size: 1.3rem;
    }

    .timeline-item {
        padding: 18px 15px;
    }

    .mv-card {
        padding: 23px 18px;
    }

    .value-card {
        padding: 22px 18px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .container {
        width: calc(100% - 24px);
    }

    .page-hero {
        padding-top:
            85px !important;
    }

    .page-hero-text h1 {
        font-size: 1.75rem;
    }

    .page-hero-sub {
        font-size: .8rem;
    }

    .frame-badge {
        left: 8px;
        bottom: 8px;

        min-width: 125px;

        padding: 9px 11px;
    }

    .frame-badge strong {
        font-size: 1.15rem;
    }

    .frame-badge span {
        font-size: .58rem;
    }

    .timeline {
        padding-left: 23px;
    }

    .timeline::before {
        left: 4px;
    }

    .timeline-dot {
        left: -23px;
        width: 13px;
        height: 13px;
    }

}


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

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

    html {
        scroll-behavior: auto;
    }

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