/* =========================================================
   INDUSTRIAL PRODUCTS SOURCE
   ABOUT PAGE
   ========================================================= */


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

.ips-about-hero{
    position:relative;
    min-height:500px;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
        linear-gradient(
            120deg,
            #f3fbfe 0%,
            #ffffff 55%,
            #fff7f7 100%
        );

    border-bottom:1px solid #e3edf2;
}

.ips-about-hero:after{
    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--cyan) 0 68%,
            var(--red) 68%
        );
}


.ips-about-orb{
    position:absolute;

    border-radius:50%;

    pointer-events:none;
}


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

    left:-180px;
    top:-170px;

    background:
        radial-gradient(
            circle,
            rgba(8,174,224,.13),
            transparent 68%
        );
}


.ips-about-orb-two{
    width:400px;
    height:400px;

    right:-180px;
    bottom:-180px;

    background:
        radial-gradient(
            circle,
            rgba(237,41,57,.09),
            transparent 68%
        );
}


.ips-about-hero-inner{
    min-height:500px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:60px;

    padding:80px 0;
}


.ips-about-hero-content{
    max-width:850px;
}


.ips-about-hero h1{
    margin:25px 0 22px;

    color:var(--navy);

    font-family:"Manrope",sans-serif;

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

    line-height:1.02;

    letter-spacing:-.065em;

    font-weight:800;
}


.ips-about-hero h1 span{
    display:block;
    color:var(--cyan-dark);
}


.ips-about-hero-content p{
    max-width:680px;

    margin:0;

    color:var(--muted);

    font-size:18px;

    line-height:1.8;
}


.ips-about-hero-year{
    width:180px;
    height:180px;

    flex:0 0 180px;

    border-radius:50%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    background:#fff;

    border:1px solid rgba(8,174,224,.35);

    box-shadow:
        0 25px 60px rgba(15,40,65,.10);

    transform:rotate(7deg);
}


.ips-about-hero-year:before{
    content:"";

    position:absolute;

    width:205px;
    height:205px;

    border-radius:50%;

    border:1px dashed rgba(237,41,57,.40);
}


.ips-about-hero-year span{
    color:var(--red);

    font-size:10px;

    font-weight:800;

    letter-spacing:.20em;
}


.ips-about-hero-year strong{
    color:var(--navy);

    font:800 42px/1 "Manrope";

    margin:7px 0;
}


.ips-about-hero-year small{
    color:#7c8b99;

    font-size:10px;

    text-align:center;

    line-height:1.4;
}


/* ========================= INTRO ========================= */

.ips-about-intro{
    padding:115px 0;

    background:#fff;
}


.ips-about-intro-grid{
    display:grid;

    grid-template-columns:
        220px
        1fr;

    gap:70px;
}


.ips-about-intro-label{
    padding-top:10px;

    display:flex;
    flex-direction:column;

    gap:13px;
}


.ips-about-section-number{
    color:var(--cyan);

    font:
        800 46px/1
        "Manrope";
}


.ips-about-label-line{
    width:55px;
    height:3px;

    background:var(--red);

    border-radius:20px;
}


.ips-about-intro-label>span:last-child{
    color:#7c8c9b;

    font-size:10px;

    font-weight:800;

    letter-spacing:.18em;
}


.ips-about-intro-content{
    max-width:1000px;
}


.ips-about-intro-content h2{
    margin:0 0 28px;

    color:var(--navy);

    font:
        800 clamp(2rem,4vw,3.7rem)/1.1
        "Manrope";

    letter-spacing:-.055em;
}


.ips-about-intro-content h2 span{
    color:var(--cyan-dark);
}


.ips-about-intro-content p{
    max-width:920px;

    margin:0 0 20px;

    color:var(--muted);

    font-size:16px;

    line-height:1.9;
}


.ips-about-intro-content .ips-about-lead{
    color:#3c5064;

    font-size:20px;

    line-height:1.85;
}


/* =========================================================
   IPS ABOUT — OUR REACH / PREMIUM
========================================================= */

.ips-about-reach{
    position:relative;
    padding:105px 0;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 8% 50%,
            rgba(8,174,224,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 15%,
            rgba(237,41,57,.06),
            transparent 25%
        ),
        #f3f9fc;
}


/* =========================================================
   MAIN CARD
========================================================= */

.ips-about-reach-card{
    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(310px,.65fr);

    gap:70px;

    padding:72px 75px;

    min-height:500px;

    overflow:hidden;

    border-radius:38px;

    background:
        radial-gradient(
            circle at 78% 20%,
            rgba(8,174,224,.11),
            transparent 25%
        ),
        radial-gradient(
            circle at 15% 100%,
            rgba(237,41,57,.07),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #06172b 0%,
            #0a213a 55%,
            #102f4b 100%
        );

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

    box-shadow:
        0 35px 90px
        rgba(8,35,58,.20);
}


/* =========================================================
   TECHNICAL GRID
========================================================= */

.ips-about-reach-card::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        46px 46px;

    pointer-events:none;
}


/* =========================================================
   LARGE BACKGROUND TYPOGRAPHY
========================================================= */

.ips-about-reach-card::after{
    content:"REACH";

    position:absolute;

    right:-20px;
    bottom:-65px;

    color:transparent;

    font:
        800 190px/.8
        "Manrope",
        sans-serif;

    letter-spacing:-.09em;

    -webkit-text-stroke:
        1px rgba(255,255,255,.045);

    pointer-events:none;
}


/* =========================================================
   DECORATIVE TECHNICAL RINGS
========================================================= */

.ips-about-reach{
    --reach-cyan:#42d8ff;
    --reach-red:#ef2d38;
}


.ips-about-reach-card .ips-about-reach-content::before{
    content:"";

    position:absolute;

    width:430px;
    height:430px;

    left:-250px;
    top:-230px;

    border-radius:50%;

    border:
        1px solid
        rgba(66,216,255,.13);

    box-shadow:
        0 0 0 35px rgba(66,216,255,.025),
        0 0 0 70px rgba(66,216,255,.018);

    pointer-events:none;
}


.ips-about-reach-card .ips-about-reach-stats::before{
    content:"";

    position:absolute;

    width:360px;
    height:360px;

    right:-205px;
    top:-150px;

    border-radius:50%;

    border:
        1px solid
        rgba(66,216,255,.14);

    box-shadow:
        0 0 0 35px rgba(66,216,255,.025),
        0 0 0 70px rgba(66,216,255,.018);

    pointer-events:none;
}


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

.ips-about-reach-content{
    position:relative;

    z-index:5;

    max-width:900px;
}


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

.ips-about-reach-content .ips-eyebrow{
    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:10px 17px;

    margin-bottom:28px;

    border-radius:50px;

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

    border:
        1px solid
        rgba(255,255,255,.13);

    color:#ffffff;

    font-size:10px;

    font-weight:800;

    letter-spacing:.18em;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.08);
}


.ips-about-reach-content .ips-eyebrow::before{
    content:"";

    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:var(--reach-red);

    box-shadow:
        0 0 0 5px
        rgba(239,45,56,.12);
}


/* =========================================================
   HEADING
========================================================= */

.ips-about-reach-content h2{
    position:relative;

    margin:0 0 28px;

    max-width:800px;

    color:#ffffff;

    font:
        800 clamp(2.8rem,5vw,5rem)/.98
        "Manrope",
        sans-serif;

    letter-spacing:-.065em;
}


.ips-about-reach-content h2 span{
    display:block;

    color:var(--reach-cyan);

    position:relative;
}


.ips-about-reach-content h2 span::after{
    content:"";

    position:absolute;

    left:4px;
    bottom:-12px;

    width:90px;
    height:3px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--reach-red),
            transparent
        );
}


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

.ips-about-reach-content p{
    position:relative;

    max-width:900px;

    margin:0;

    color:#b7c9d8;

    font-size:15px;

    line-height:1.95;

    letter-spacing:.01em;
}


/* =========================================================
   STATS AREA
========================================================= */

.ips-about-reach-stats{
    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:0;

    padding-left:20px;
}


/* vertical accent */

.ips-about-reach-stats::after{
    content:"";

    position:absolute;

    left:-1px;
    top:15%;

    width:2px;
    height:70%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--reach-cyan) 25%,
            var(--reach-red) 75%,
            transparent
        );

    opacity:.65;
}


/* =========================================================
   INDIVIDUAL STAT
========================================================= */

.ips-about-stat{
    position:relative;

    display:block;

    padding:
        22px
        20px
        24px
        28px;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

    transition:
        background .35s ease,
        transform .35s ease;
}


.ips-about-stat:last-child{
    border-bottom:0;
}


.ips-about-stat:hover{
    background:
        linear-gradient(
            90deg,
            rgba(66,216,255,.07),
            transparent
        );

    transform:translateX(7px);
}


/* small index */

.ips-about-stat::before{
    content:"";

    position:absolute;

    left:0;
    top:29px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#60798e;

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


.ips-about-stat:hover::before{
    background:var(--reach-cyan);

    box-shadow:
        0 0 0 6px
        rgba(66,216,255,.10);
}


/* number */

.ips-about-stat strong{
    display:block;

    margin:0;

    color:#ffffff;

    font:
        800 clamp(2.5rem,4vw,3.7rem)/1
        "Manrope",
        sans-serif;

    letter-spacing:-.055em;
}


.ips-about-stat strong span{
    color:var(--reach-cyan);
}


/* label */

.ips-about-stat small{
    display:block;

    margin-top:9px;

    color:#7892a7;

    font-size:9px;

    font-weight:800;

    letter-spacing:.18em;
}


/* =========================================================
   SMALL DECORATIVE LINE
========================================================= */

.ips-about-stat small::before{
    content:"";

    display:inline-block;

    width:22px;
    height:1px;

    margin:
        0
        9px
        3px
        0;

    background:var(--reach-red);

    opacity:.8;
}


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

@media(max-width:1000px){

    .ips-about-reach{
        padding:85px 0;
    }

    .ips-about-reach-card{
        grid-template-columns:1fr;

        gap:50px;

        padding:55px;
    }

    .ips-about-reach-content{
        max-width:850px;
    }

    .ips-about-reach-stats{
        display:grid;

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

        padding-left:0;

        gap:0;
    }

    .ips-about-reach-stats::after{
        display:none;
    }

    .ips-about-stat{
        padding:
            20px
            25px;

        border-bottom:0;

        border-right:
            1px solid
            rgba(255,255,255,.09);
    }

    .ips-about-stat:last-child{
        border-right:0;
    }

    .ips-about-stat::before{
        display:none;
    }

}


@media(max-width:600px){

    .ips-about-reach{
        padding:65px 0;
    }

    .ips-about-reach-card{
        padding:35px 25px;

        gap:35px;

        border-radius:27px;
    }

    .ips-about-reach-card::after{
        font-size:100px;

        right:-15px;
        bottom:-25px;
    }

    .ips-about-reach-content .ips-eyebrow{
        margin-bottom:22px;
    }

    .ips-about-reach-content h2{
        font-size:
            clamp(
                2.35rem,
                11vw,
                3.3rem
            );

        line-height:1;
    }

    .ips-about-reach-content h2 span::after{
        width:65px;

        bottom:-9px;
    }

    .ips-about-reach-content p{
        font-size:14px;

        line-height:1.85;
    }

    .ips-about-reach-stats{
        grid-template-columns:1fr;

        gap:0;
    }

    .ips-about-stat{
        padding:
            20px
            10px
            20px
            18px;

        border-right:0;

        border-bottom:
            1px solid
            rgba(255,255,255,.10);
    }

    .ips-about-stat:last-child{
        border-bottom:0;
    }

    .ips-about-stat strong{
        font-size:2.5rem;
    }

}

/* ========================= READERS ========================= */

.ips-about-readers{
    padding:115px 0;

    background:#fff;
}


.ips-about-readers-head{
    max-width:950px;

    margin:0 auto 50px;

    text-align:center;
}


.ips-about-readers-head h2{
    margin:20px 0;

    color:var(--navy);

    font:
        800 clamp(2rem,4vw,3.7rem)/1.1
        "Manrope";

    letter-spacing:-.055em;
}


.ips-about-readers-head h2 span{
    color:var(--cyan-dark);
}


.ips-about-readers-head p{
    max-width:850px;

    margin:auto;

    color:var(--muted);

    font-size:16px;

    line-height:1.85;
}


.ips-reader-marquee{
    padding:28px;

    border:
        1px solid
        #dfe9ef;

    border-radius:25px;

    background:#f8fbfd;

    overflow:hidden;
}


.ips-reader-tags{
    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:11px;
}


.ips-reader-tags span{
    display:inline-flex;

    align-items:center;

    padding:11px 17px;

    border-radius:999px;

    background:#fff;

    border:1px solid #dce7ed;

    color:#52677a;

    font-size:12px;

    font-weight:700;

    transition:.3s ease;
}


.ips-reader-tags span:hover{
    color:#fff;

    background:var(--cyan);

    border-color:var(--cyan);

    transform:translateY(-3px);

    box-shadow:
        0 10px 22px rgba(8,174,224,.18);
}


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

.ips-about-journey{
    padding:115px 0;

    background:
        linear-gradient(
            135deg,
            #f4fafc,
            #ffffff
        );
}


.ips-about-journey-grid{
    display:grid;

    grid-template-columns:
        .85fr
        1.15fr;

    align-items:center;

    gap:90px;
}


.ips-about-image-frame{
    position:relative;

    padding:18px;

    border-radius:30px;

    background:#fff;

    border:1px solid #dce7ed;

    box-shadow:
        0 30px 70px rgba(15,40,65,.10);

    transform:rotate(-2deg);

    transition:.5s ease;
}


.ips-about-image-frame:hover{
    transform:
        rotate(0)
        translateY(-7px);
}


.ips-about-image-frame:before{
    content:"";

    position:absolute;

    width:75px;
    height:75px;

    left:-22px;
    bottom:-22px;

    border-radius:50%;

    background:var(--red);

    opacity:.12;
}


.ips-about-image-frame img{
    width:100%;

    min-height:260px;

    object-fit:contain;

    border-radius:20px;

    background:#f4fafc;
}


.ips-about-journey-content{
    max-width:760px;
}


.ips-about-big-year{
    margin:20px 0 5px;

    color:var(--cyan);

    font:
        800 clamp(4rem,8vw,7rem)/.9
        "Manrope";

    letter-spacing:-.08em;

    opacity:.18;
}


.ips-about-journey-content h2{
    margin:0 0 25px;

    color:var(--navy);

    font:
        800 clamp(2rem,4vw,3.6rem)/1.08
        "Manrope";

    letter-spacing:-.055em;
}


.ips-about-journey-content h2 span{
    display:block;

    color:var(--red);
}


.ips-about-journey-content p{
    margin:0 0 18px;

    color:var(--muted);

    font-size:16px;

    line-height:1.9;
}


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

.ips-about-belief{
    padding:100px 0;

    background:#fff;
}


.ips-about-belief-card{
    position:relative;

    display:grid;

    grid-template-columns:100px 1fr;

    gap:30px;

    padding:65px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            #eaf9fd,
            #fff
        );

    border:1px solid #dcecf2;

    overflow:hidden;
}


.ips-about-belief-mark{
    color:var(--red);

    font:
        800 100px/.7
        Georgia,
        serif;

    opacity:.20;
}


.ips-about-belief-content{
    position:relative;
    z-index:2;
}


.ips-about-belief-content blockquote{
    margin:22px 0 0;

    color:var(--navy);

    font:
        800 clamp(1.8rem,4vw,3.4rem)/1.2
        "Manrope";

    letter-spacing:-.045em;
}


.ips-about-belief-content blockquote span{
    display:block;

    margin-top:8px;

    color:var(--cyan-dark);
}


.ips-about-belief-line{
    position:absolute;

    width:230px;
    height:230px;

    right:-100px;
    bottom:-120px;

    border-radius:50%;

    border:2px solid rgba(237,41,57,.15);

    box-shadow:
        0 0 0 35px rgba(237,41,57,.035),
        0 0 0 70px rgba(237,41,57,.025);
}


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

.ips-about-cta{
    padding:70px 0;

    background:#eefaff;
}


.ips-about-cta-card{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:45px 55px;

    border-radius:27px;

    background:#fff;

    border:1px solid #dce8ee;

    box-shadow:
        0 20px 60px rgba(15,40,65,.07);
}


.ips-about-cta-card h2{
    margin:15px 0 0;

    color:var(--navy);

    font:
        800 clamp(1.8rem,3.5vw,3rem)/1.1
        "Manrope";

    letter-spacing:-.05em;
}


.ips-about-cta-card h2 span{
    color:var(--cyan-dark);
}


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

@media(max-width:900px){

    .ips-about-hero-inner{
        min-height:440px;

        padding:65px 0;

        flex-direction:column;

        align-items:flex-start;

        gap:45px;
    }


    .ips-about-hero-year{
        width:130px;
        height:130px;

        flex-basis:130px;

        align-self:flex-end;
    }


    .ips-about-hero-year:before{
        width:150px;
        height:150px;
    }


    .ips-about-hero-year strong{
        font-size:30px;
    }


    .ips-about-intro-grid{
        grid-template-columns:1fr;

        gap:35px;
    }


    .ips-about-intro-label{
        flex-direction:row;

        align-items:center;
    }


    .ips-about-label-line{
        width:40px;
    }


    .ips-about-reach-card{
        grid-template-columns:1fr;

        padding:45px;
    }


    .ips-about-reach-stats{
        display:grid;

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

        gap:20px;
    }


    .ips-about-stat{
        padding-bottom:0;

        border-bottom:0;

        border-right:
            1px solid
            rgba(255,255,255,.10);
    }


    .ips-about-stat:last-child{
        border-right:0;
    }


    .ips-about-journey-grid{
        grid-template-columns:1fr;

        gap:55px;
    }


    .ips-about-journey-image{
        max-width:650px;

        margin:auto;
    }


    .ips-about-belief-card{
        grid-template-columns:70px 1fr;

        padding:45px;
    }

}


@media(max-width:600px){

    .ips-about-hero{
        min-height:470px;
    }


    .ips-about-hero-inner{
        min-height:470px;

        padding:55px 0;
    }


    .ips-about-hero h1{
        font-size:
            clamp(
                2.7rem,
                12vw,
                4rem
            );
    }


    .ips-about-hero-content p{
        font-size:15px;
    }


    .ips-about-hero-year{
        width:110px;
        height:110px;

        flex-basis:110px;

        align-self:flex-start;
    }


    .ips-about-hero-year:before{
        width:128px;
        height:128px;
    }


    .ips-about-hero-year strong{
        font-size:25px;
    }


    .ips-about-intro,
    .ips-about-readers,
    .ips-about-journey{
        padding:75px 0;
    }


    .ips-about-intro-content h2,
    .ips-about-readers-head h2,
    .ips-about-journey-content h2{
        font-size:2rem;
    }


    .ips-about-intro-content .ips-about-lead{
        font-size:17px;
    }


    .ips-about-reach{
        padding:65px 0;
    }


    .ips-about-reach-card{
        padding:30px 25px;

        border-radius:24px;
    }


    .ips-about-reach-content h2{
        font-size:2rem;
    }


    .ips-about-reach-content p{
        font-size:14px;

        line-height:1.8;
    }


    .ips-about-reach-stats{
        grid-template-columns:1fr;

        gap:0;
    }


    .ips-about-stat{
        padding:20px 0;

        border-right:0;

        border-bottom:
            1px solid
            rgba(255,255,255,.10);
    }


    .ips-about-stat:last-child{
        border-bottom:0;
    }


    .ips-about-stat strong{
        font-size:32px;
    }


    .ips-reader-marquee{
        padding:20px 15px;
    }


    .ips-reader-tags{
        justify-content:flex-start;
    }


    .ips-reader-tags span{
        font-size:11px;

        padding:9px 13px;
    }


    .ips-about-big-year{
        font-size:4.5rem;
    }


    .ips-about-belief{
        padding:65px 0;
    }


    .ips-about-belief-card{
        grid-template-columns:1fr;

        padding:32px 25px;
    }


    .ips-about-belief-mark{
        position:absolute;

        top:25px;
        right:25px;

        font-size:80px;
    }


    .ips-about-belief-content blockquote{
        font-size:1.8rem;
    }


    .ips-about-cta{
        padding:45px 0;
    }


    .ips-about-cta-card{
        padding:30px 25px;

        flex-direction:column;

        align-items:flex-start;

        gap:25px;
    }


    .ips-about-cta-card h2{
        font-size:1.9rem;
    }

}

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

.ips-about-journey{
    display:block;
    position:relative;
    width:100%;
    padding:115px 0;
    background:linear-gradient(
        135deg,
        #f4fafc 0%,
        #ffffff 100%
    );
    overflow:hidden;
}


.ips-about-journey-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    align-items:center;
    gap:90px;
}


/* IMAGE */

.ips-about-journey-image{
    display:block;
    width:100%;
}


.ips-about-image-frame{
    position:relative;
    display:block;

    padding:18px;

    width:100%;

    border-radius:30px;

    background:#fff;

    border:1px solid #dce7ed;

    box-shadow:
        0 30px 70px rgba(15,40,65,.10);

    transform:rotate(-2deg);

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


.ips-about-image-frame:hover{
    transform:rotate(0deg) translateY(-7px);

    box-shadow:
        0 35px 80px rgba(15,40,65,.15);
}


.ips-about-image-frame img{
    display:block;

    width:100%;
    max-width:100%;

    min-height:260px;

    object-fit:contain;

    border-radius:20px;

    background:#f4fafc;
}


/* CONTENT */

.ips-about-journey-content{
    display:block;

    width:100%;

    max-width:760px;
}


.ips-about-big-year{
    margin:20px 0 5px;

    color:var(--cyan);

    font:
        800 clamp(4rem,8vw,7rem)/.9
        "Manrope",
        sans-serif;

    letter-spacing:-.08em;

    opacity:.18;
}


.ips-about-journey-content h2{
    margin:0 0 25px;

    color:var(--navy);

    font:
        800 clamp(2rem,4vw,3.6rem)/1.08
        "Manrope",
        sans-serif;

    letter-spacing:-.055em;
}


.ips-about-journey-content h2 span{
    display:block;

    color:var(--red);
}


.ips-about-journey-content p{
    margin:0 0 18px;

    color:var(--muted);

    font-size:16px;

    line-height:1.9;
}


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

@media(max-width:900px){

    .ips-about-journey{
        padding:80px 0;
    }

    .ips-about-journey-grid{
        grid-template-columns:1fr;
        gap:55px;
    }

    .ips-about-journey-image{
        max-width:650px;
        margin:0 auto;
    }

    .ips-about-journey-content{
        max-width:none;
    }

}


@media(max-width:600px){

    .ips-about-journey{
        padding:70px 0;
    }

    .ips-about-journey-grid{
        gap:40px;
    }

    .ips-about-image-frame{
        padding:12px;
        border-radius:23px;
    }

    .ips-about-image-frame img{
        min-height:180px;
    }

    .ips-about-big-year{
        margin-top:15px;
        font-size:4.5rem;
    }

    .ips-about-journey-content h2{
        font-size:2rem;
    }

    .ips-about-journey-content p{
        font-size:14px;
        line-height:1.8;
    }

}

/* =========================================================
   ABOUT HERO — COMPACT VERSION
========================================================= */

.ips-about-hero{
    position:relative;
    min-height:400px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 12% 50%,
            rgba(8,174,224,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(237,41,57,.07),
            transparent 25%
        ),
        linear-gradient(
            120deg,
            #f2fbfe 0%,
            #ffffff 55%,
            #fff7f7 100%
        );

    border-bottom:1px solid #e3edf2;
}


/* Technical grid */

.ips-about-hero::before{
    content:"";

    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(8,174,224,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,174,224,.035) 1px,
            transparent 1px
        );

    background-size:45px 45px;

    pointer-events:none;
}


/* Cyan/red bottom line */

.ips-about-hero::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--cyan) 0 68%,
            var(--red) 68%
        );
}

.ips-about-hero-inner{
    position:relative;
    z-index:2;

    min-height:400px;

    display:flex;

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

    gap:40px;

    padding:45px 0;
}

/* =========================================================
   ABOUT HERO — PUBLICATION VISUAL
========================================================= */

.ips-about-hero-publication{
    position:relative;

    width:500px;
    height:450px;

    flex:0 0 500px;

    display:flex;

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


/* =========================================================
   BACKGROUND RING
========================================================= */

.ips-publication-ring{
    position:absolute;

    width:410px;
    height:410px;

    border-radius:50%;

    border:
        1px solid
        rgba(8,174,224,.20);

    box-shadow:
        0 0 0 35px rgba(8,174,224,.025),
        0 0 0 70px rgba(237,41,57,.018);

    animation:
        ipsPublicationRing 8s linear infinite;
}


.ips-publication-ring::before{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    left:75px;
    top:75px;

    border-radius:50%;

    border:
        1px dashed
        rgba(237,41,57,.22);
}


@keyframes ipsPublicationRing{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   MAGAZINE BACK
========================================================= */

.ips-magazine-back{
    position:absolute;

    width:235px;
    height:330px;

    left:65px;
    top:58px;

    overflow:hidden;

    border-radius:18px;

    background:#fff;

    box-shadow:
        0 25px 55px
        rgba(10,35,55,.15);

    transform:
        rotate(-9deg)
        translateY(18px);

    opacity:.82;

    transition:.6s ease;
}


.ips-magazine-back img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;
}


.ips-about-hero-publication:hover
.ips-magazine-back{
    transform:
        rotate(-13deg)
        translate(-12px,8px);
}


/* =========================================================
   MAIN MAGAZINE
========================================================= */

.ips-magazine-main{
    position:absolute;

    width:260px;
    height:365px;

    left:125px;
    top:38px;

    overflow:hidden;

    border-radius:20px;

    background:#fff;

    border:
        5px solid
        rgba(255,255,255,.85);

    box-shadow:
        0 35px 75px
        rgba(7,35,55,.24);

    transform:
        rotate(5deg);

    z-index:5;

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


.ips-magazine-main img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;
}


.ips-about-hero-publication:hover
.ips-magazine-main{
    transform:
        rotate(1deg)
        translateY(-8px);

    box-shadow:
        0 45px 90px
        rgba(7,35,55,.28);
}


/* =========================================================
   MAGAZINE SHINE
========================================================= */

.ips-magazine-shine{
    position:absolute;

    width:80px;
    height:150%;

    left:-120px;
    top:-25%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transform:rotate(20deg);

    transition:
        left 1s ease;

    pointer-events:none;
}


.ips-about-hero-publication:hover
.ips-magazine-shine{
    left:120%;
}


/* =========================================================
   SINCE 2004 BADGE
========================================================= */

.ips-publication-badge{
    position:absolute;

    z-index:10;

    display:flex;

    flex-direction:column;

    background:#fff;

    border:1px solid #dce7ed;

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

    border-radius:15px;
}


.ips-badge-year{
    left:15px;
    bottom:55px;

    padding:13px 18px;

    transform:rotate(-5deg);
}


.ips-badge-year span{
    color:#8a9aaa;

    font-size:8px;

    font-weight:800;

    letter-spacing:.18em;
}


.ips-badge-year strong{
    margin-top:3px;

    color:var(--navy);

    font:
        800 23px/1
        "Manrope";
}


/* =========================================================
   READERS BADGE
========================================================= */

.ips-badge-readers{
    right:0;
    top:75px;

    padding:14px 18px;

    transform:rotate(5deg);

    border-top:
        3px solid
        var(--cyan);
}


.ips-badge-readers strong{
    color:var(--navy);

    font:
        800 23px/1
        "Manrope";
}


.ips-badge-readers span{
    margin-top:5px;

    color:#7c8c9b;

    font-size:8px;

    font-weight:800;

    letter-spacing:.1em;
}


/* =========================================================
   PUBLICATION LABEL
========================================================= */

.ips-publication-label{
    position:absolute;

    right:5px;
    bottom:55px;

    z-index:10;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    border-radius:50px;

    background:
        rgba(7,24,43,.94);

    color:#fff;

    font-size:8px;

    font-weight:800;

    letter-spacing:.13em;

    box-shadow:
        0 12px 30px
        rgba(5,25,45,.18);
}


.ips-label-dot{
    width:7px;
    height:7px;

    flex:0 0 7px;

    border-radius:50%;

    background:var(--red);

    box-shadow:
        0 0 0 5px
        rgba(237,41,57,.12);
}


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

@media(max-width:900px){

    .ips-about-hero-publication{
        width:440px;
        height:400px;

        flex:0 0 440px;
    }

    .ips-publication-ring{
        width:350px;
        height:350px;
    }

    .ips-publication-ring::before{
        width:220px;
        height:220px;

        left:65px;
        top:65px;
    }

    .ips-magazine-back{
        width:205px;
        height:290px;

        left:50px;
        top:55px;
    }

    .ips-magazine-main{
        width:230px;
        height:325px;

        left:105px;
        top:40px;
    }

}


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

@media(max-width:600px){

    .ips-about-hero-publication{
        width:100%;
        height:390px;

        flex:0 0 390px;

        margin-top:5px;
    }

    .ips-publication-ring{
        width:310px;
        height:310px;
    }

    .ips-publication-ring::before{
        width:195px;
        height:195px;

        left:57px;
        top:57px;
    }

    .ips-magazine-back{
        width:175px;
        height:250px;

        left:calc(50% - 105px);
        top:62px;
    }

    .ips-magazine-main{
        width:205px;
        height:290px;

        left:calc(50% - 82px);
        top:45px;
    }

    .ips-badge-year{
        left:calc(50% - 150px);
        bottom:30px;
    }

    .ips-badge-readers{
        right:calc(50% - 155px);
        top:32px;
    }

    .ips-publication-label{
        right:50%;

        transform:translateX(50%);

        bottom:0;

        white-space:nowrap;
    }

}