/* =========================================================
   INDUSTRIAL PRODUCTS SOURCE — INDEX PAGE
   Design language inspired by supplied reference screenshots
   Logo palette: Cyan / Red / White
========================================================= */

:root{
    --cyan:#08aee0;
    --cyan-dark:#008fbd;
    --red:#ed2939;
    --red-dark:#c9192b;
    --navy:#09172b;
    --navy-2:#10243c;
    --text:#23364d;
    --muted:#65778b;
    --line:#dfe8ef;
    --white:#ffffff;
    --soft:#f4fafc;
    --soft-red:#fff3f4;
    --shadow:0 24px 70px rgba(15,40,65,.09);
    --shadow-sm:0 12px 35px rgba(15,40,65,.07);
    --radius:28px;
    --container:1380px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:#f7fafc;
    color:var(--text);
    font-family:"DM Sans",Arial,sans-serif;
    line-height:1.7;
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;
    background:
        radial-gradient(circle at 8% 10%,rgba(8,174,224,.05),transparent 22%),
        radial-gradient(circle at 93% 45%,rgba(237,41,57,.035),transparent 25%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
.ips-container{
    width:min(var(--container),calc(100% - 80px));
    margin-inline:auto;
}
.ips-progress{
    position:fixed;
    top:0;left:0;
    height:4px;
    width:0;
    background:linear-gradient(90deg,var(--cyan),var(--red));
    z-index:9999;
    box-shadow:0 0 14px rgba(8,174,224,.45);
}

/* ========================= NAVBAR ========================= */
.ips-header{
    position:sticky;
    top:0;
    z-index:900;
    background:rgba(255,255,255,.90);
    border-top:2px solid rgba(237,41,57,.18);
    border-bottom:1px solid rgba(13,45,70,.07);
    backdrop-filter:blur(18px);
}
.ips-header:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:3px;
    background:linear-gradient(90deg,var(--cyan) 0 68%,var(--red) 68%);
}
.ips-nav-wrap{
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}
.ips-brand{
    width:400px;
    flex:0 0 400px;
}
.ips-brand img{
    width:100%;
    height:auto;
    max-height:76px;
    object-fit:contain;
    object-position:left center;
}
.ips-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
}
.ips-nav>a{
    position:relative;
    padding:12px 13px;
    color:var(--navy);
    font-weight:600;
    font-size:15px;
}
.ips-nav>a:not(.ips-nav-cta):after{
    content:"";
    position:absolute;
    left:13px;right:13px;bottom:5px;
    height:2px;
    border-radius:10px;
    background:var(--red);
    transform:scaleX(0);
    transition:.25s ease;
}
.ips-nav>a:hover:after,
.ips-nav>a.active:after{transform:scaleX(1)}
.ips-nav-cta{
    margin-left:13px;
    padding:13px 19px!important;
    color:#fff!important;
    border-radius:999px;
    background:var(--cyan);
    box-shadow:0 10px 24px rgba(8,174,224,.22);
    transition:.25s ease;
}
.ips-nav-cta:hover{
    background:var(--red);
    transform:translateY(-2px);
}
.ips-nav-cta span{margin-left:8px}
.ips-menu-btn{display:none}

/* ========================= HERO ========================= */
.ips-hero{
    min-height:760px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        linear-gradient(120deg,#f5fcfe 0%,#ffffff 57%,#f9f5f5 100%);
}
.ips-hero:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--cyan),var(--red),transparent);
    opacity:.35;
}
.ips-hero-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(1px);
    pointer-events:none;
}
.ips-glow-one{
    width:500px;height:500px;
    left:-230px;top:-220px;
    background:radial-gradient(circle,rgba(8,174,224,.13),transparent 68%);
    animation:floatOrb 9s ease-in-out infinite;
}
.ips-glow-two{
    width:430px;height:430px;
    right:-180px;bottom:-180px;
    background:radial-gradient(circle,rgba(237,41,57,.09),transparent 68%);
    animation:floatOrb 11s ease-in-out infinite reverse;
}
.ips-hero-grid{
    position:absolute;
    inset:0;
    opacity:.32;
    background-image:
        linear-gradient(rgba(8,174,224,.04) 1px,transparent 1px),
        linear-gradient(90deg,rgba(8,174,224,.04) 1px,transparent 1px);
    background-size:55px 55px;
    mask-image:linear-gradient(90deg,#000,transparent 65%);
}
.ips-hero-layout{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:75px;
    align-items:center;
    padding:90px 0 105px;
}
.ips-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 15px;
    border-radius:999px;
    background:#dff8ec;
    color:#11884a;
    font-size:12px;
    line-height:1;
    font-weight:800;
    letter-spacing:.10em;
    text-transform:uppercase;
}
.ips-eyebrow.red{
    background:#fff0f2;
    color:var(--red-dark);
}
.ips-eyebrow-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--red);
    box-shadow:0 0 0 5px rgba(237,41,57,.10);
}
.ips-hero h1{
    margin:27px 0 22px;
    max-width:780px;
    color:var(--navy);
    font-family:"Manrope",sans-serif;
    font-size:clamp(3.25rem,5.2vw,5.6rem);
    line-height:1.03;
    letter-spacing:-.065em;
    font-weight:800;
}
.ips-hero h1 span{
    display:block;
    color:var(--cyan-dark);
    position:relative;
    width:max-content;
    max-width:100%;
}
.ips-hero h1 span:after{
    content:"";
    position:absolute;
    left:0;right:12%;
    bottom:-8px;
    height:7px;
    border-radius:50%;
    background:var(--red);
    transform:rotate(-1deg);
    transform-origin:left;
}
.ips-hero-copy>p{
    max-width:710px;
    margin:0;
    color:var(--muted);
    font-size:18px;
    line-height:1.9;
}
.ips-hero-actions{
    display:flex;
    gap:13px;
    flex-wrap:wrap;
    margin-top:31px;
}
.ips-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:52px;
    padding:13px 22px;
    border-radius:999px;
    border:1px solid transparent;
    font-size:14px;
    font-weight:800;
    transition:.3s ease;
}
.ips-btn:hover{transform:translateY(-3px)}
.ips-btn-primary{
    color:#fff;
    background:var(--cyan);
    box-shadow:0 14px 30px rgba(8,174,224,.23);
}
.ips-btn-primary:hover{background:var(--red);box-shadow:0 14px 30px rgba(237,41,57,.20)}
.ips-btn-light{
    color:var(--navy);
    background:#fff;
    border-color:#d8e3eb;
}
.ips-btn-light:hover{border-color:var(--cyan);color:var(--cyan-dark)}
.ips-btn-red{
    color:#fff;
    background:var(--red);
    box-shadow:0 14px 30px rgba(237,41,57,.22);
}
.ips-btn-red:hover{background:var(--cyan)}
.ips-hero-proof{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:42px;
}
.ips-proof-item{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.ips-proof-item strong{
    color:var(--navy);
    font:800 21px/1 "Manrope",sans-serif;
}
.ips-proof-item span{
    color:#7b8b9b;
    font-size:11px;
    font-weight:600;
}
.ips-proof-divider{width:1px;height:35px;background:#d6e1e8}

/* Hero magazine visual */
.ips-hero-visual{
    position:relative;
    min-height:570px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.ips-hero-card{
    width:min(500px,90%);
    background:#fff;
    border-radius:31px;
    padding:16px;
    box-shadow:0 35px 90px rgba(9,33,55,.18);
    transform:rotate(2deg);
    transition:.5s ease;
}
.ips-hero-card:hover{transform:rotate(0) translateY(-8px)}
.ips-card-topline{
    display:flex;
    justify-content:space-between;
    padding:5px 8px 13px;
    color:#738496;
    font-size:9px;
    letter-spacing:.13em;
    font-weight:800;
}
.ips-cover-art{
    height:430px;
    position:relative;
    overflow:hidden;
    border-radius:21px;
    color:#fff;
    padding:28px;
    background:
        radial-gradient(circle at 82% 20%,rgba(237,41,57,.65),transparent 22%),
        linear-gradient(145deg,#04b5e8 0%,#007ea8 55%,#09243d 100%);
}

/* =========================================================
   IPS COVER - BACKGROUND IMAGE
   DO NOT CHANGE THE MAIN HERO DESIGN
   ========================================================= */

.ips-cover-art {
    position: relative;
    overflow: hidden;

    isolation: isolate;

    /* Keep your existing size */
    border-radius: 26px;

    background: #08a9d5;
}


/* =========================================================
   ACTUAL COVER IMAGE
   ========================================================= */

.ips-cover-bg {
    position: absolute;

    inset: 0;

    z-index: -3;

    background-image: url("../images/ips-cover.jpg");

    background-repeat: no-repeat;

    /*
       COVER keeps the complete area filled.
       Change center to center top if required.
    */
    background-size: cover;
    background-position: center center;

    transform: scale(1.01);

    transition: transform 0.8s ease;
}


/* Very subtle zoom */

.ips-hero-card:hover .ips-cover-bg {
    transform: scale(1.035);
}


/* =========================================================
   BLUE / CYAN SHADING
   THIS IS WHAT KEEPS YOUR CURRENT DESIGN LOOK
   ========================================================= */

.ips-cover-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            135deg,
            rgba(0, 174, 239, 0.58) 0%,
            rgba(0, 155, 205, 0.35) 35%,
            rgba(0, 38, 70, 0.30) 72%,
            rgba(0, 20, 45, 0.55) 100%
        );

    pointer-events: none;
}


/* =========================================================
   SECONDARY SOFT BLUE SHADE
   ========================================================= */

.ips-cover-art::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(237, 28, 36, 0.30),
            transparent 18%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,0.08),
            transparent 45%
        );

    pointer-events: none;
}


/* =========================================================
   EXISTING SHINE
   ========================================================= */

.ips-cover-shine {
    position: absolute;

    top: -30%;
    left: -75%;

    width: 55%;
    height: 170%;

    z-index: 6;

    transform: rotate(25deg);

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

    pointer-events: none;

    transition: left 1s ease;
}


.ips-hero-card:hover .ips-cover-shine {
    left: 130%;
}


/* =========================================================
   IPS BRAND
   ========================================================= */

.ips-cover-brand {
    position: absolute;

    top: 35px;
    left: 35px;

    z-index: 7;

    color: #ffffff;

    font-size: 72px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -5px;

    text-shadow:
        0 5px 20px rgba(0,0,0,0.16);
}


/* =========================================================
   COVER TITLE
   ========================================================= */

.ips-cover-title {
    position: absolute;

    left: 35px;
    bottom: 75px;

    z-index: 7;

    color: #ffffff;

    font-size: 42px;

    line-height: 0.92;

    font-weight: 700;

    letter-spacing: -2px;

    text-shadow:
        0 4px 15px rgba(0,0,0,0.22);
}

.ips-cover-title b {
    font-weight: 900;
}


/* =========================================================
   COVER SUBTITLE
   ========================================================= */

.ips-cover-sub {
    position: absolute;

    left: 37px;
    bottom: 38px;

    z-index: 7;

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

    font-size: 9px;

    font-weight: 800;


    letter-spacing: 2px;

    text-shadow:
        0 2px 8px rgba(0,0,0,0.15);
}


/* =========================================================
   DECORATIVE CIRCULAR LINES
   ========================================================= */

.ips-cover-lines {
    position: absolute;

    right: -80px;
    bottom: -100px;

    width: 330px;
    height: 330px;

    z-index: 5;

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

    border-radius: 50%;

    pointer-events: none;
}

.ips-cover-lines::before,
.ips-cover-lines::after {
    content: "";

    position: absolute;

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

    border-radius: 50%;
}

.ips-cover-lines::before {
    inset: 25px;
}

.ips-cover-lines::after {
    inset: 55px;
}


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

@media (max-width: 600px) {

    .ips-cover-brand {
        top: 25px;
        left: 25px;

        font-size: 55px;
    }

    .ips-cover-title {
        left: 25px;
        bottom: 65px;

        font-size: 34px;
    }

    .ips-cover-sub {
        left: 27px;
        bottom: 30px;

        font-size: 7px;
    }

}
.ips-cover-art:before{
    content:"";
    position:absolute;
    width:290px;height:290px;
    right:-90px;bottom:-90px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    box-shadow:
        0 0 0 28px rgba(255,255,255,.04),
        0 0 0 58px rgba(255,255,255,.04),
        0 0 0 90px rgba(255,255,255,.03);
}
.ips-cover-shine{
    position:absolute;
    width:150%;height:90px;
    top:100px;left:-25%;
    background:rgba(255,255,255,.08);
    transform:rotate(-27deg);
}
.ips-cover-brand{
    position:relative;
    font:800 82px/.9 "Manrope",sans-serif;
    letter-spacing:-.11em;
    color:#fff;
    opacity:.98;
}
.ips-cover-title{
    position:absolute;
    left:29px;bottom:82px;
    font:700 38px/.92 "Manrope",sans-serif;
    letter-spacing:-.04em;
}
.ips-cover-title b{color:#fff}
.ips-cover-sub{
    position:absolute;
    left:30px;bottom:37px;
    font-size:9px;
    letter-spacing:.22em;
    font-weight:800;
    opacity:.86;
}
.ips-cover-lines{
    position:absolute;
    left:30px;right:30px;bottom:24px;
    height:2px;
    background:var(--red);
}
.ips-card-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 7px 2px;
}
.ips-card-bottom small{
    display:block;
    color:#8b9aaa;
    font-size:10px;
}
.ips-card-bottom strong{
    display:block;
    color:var(--navy);
    font-size:14px;
}
.ips-mini-arrow{
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;background:var(--red);
    border-radius:50%;
}
.ips-floating-card{
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 18px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.8);
    border-radius:17px;
    box-shadow:0 18px 45px rgba(14,40,62,.15);
    backdrop-filter:blur(15px);
    animation:floatCard 5.5s ease-in-out infinite;
}
.ips-floating-card strong{
    display:block;
    color:var(--navy);
    font:800 19px/1 "Manrope",sans-serif;
}
.ips-floating-card small{
    display:block;
    color:#7b8b9b;
    font-size:10px;
    margin-top:4px;
}
.ips-float-icon{
    width:39px;height:39px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    background:var(--cyan);
    color:#fff;
}
.ips-float-icon.red{background:var(--red)}
.ips-floating-readers{left:-8px;top:115px}
.ips-floating-reach{right:-8px;bottom:88px;animation-delay:-2s}
.ips-circle-stamp{
    position:absolute;
    left:25px;bottom:18px;
    width:105px;height:105px;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px dashed rgba(8,174,224,.75);
    background:rgba(255,255,255,.86);
    box-shadow:0 14px 35px rgba(8,50,75,.09);
    color:var(--cyan-dark);
    transform:rotate(-9deg);
}
.ips-circle-stamp span{font-size:8px;letter-spacing:.18em;font-weight:800}
.ips-circle-stamp b{font:800 22px "Manrope";margin:2px 0}

/* ========================= TICKER ========================= */
.ips-ticker{
    overflow:hidden;
    background:var(--red);
    color:#fff;
}
.ips-ticker-track{
    display:flex;
    align-items:center;
    gap:22px;
    width:max-content;
    padding:12px 0;
    animation:ticker 30s linear infinite;
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:800;
}
.ips-ticker-track i{font-style:normal;color:#ffd9dd}

/* ========================= SECTIONS ========================= */
.ips-section{padding:120px 0}
.ips-intro{background:#fff}
.ips-section-head{max-width:930px}
.ips-section-head.centered{
    margin:0 auto 55px;
    text-align:center;
}
.ips-section-head h2,
.ips-reach-title h2,
.ips-ad-copy h2,
.ips-contact-card h2{
    margin:17px 0 20px;
    color:var(--navy);
    font:800 clamp(2.3rem,4.2vw,4.25rem)/1.08 "Manrope",sans-serif;
    letter-spacing:-.055em;
}
.ips-section-head h2 span,
.ips-reach-title h2 span,
.ips-ad-copy h2 span{color:var(--cyan-dark)}
.ips-section-head.centered p{
    max-width:760px;
    margin:auto;
    color:var(--muted);
    font-size:17px;
}
.ips-intro-grid{
    margin-top:55px;
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:70px;
    align-items:start;
}
.ips-intro-main{
    max-width:850px;
}
.ips-intro-main p{
    color:var(--muted);
    font-size:17px;
    line-height:1.9;
}
.ips-intro-main .ips-large-copy{
    color:var(--navy-2);
    font-size:23px;
    line-height:1.65;
    font-weight:500;
}
.ips-text-link{
    display:inline-flex;
    gap:12px;
    margin-top:20px;
    color:var(--red-dark);
    font-weight:800;
}
.ips-text-link span{transition:.25s}
.ips-text-link:hover span{transform:translateX(6px)}
.ips-intro-side{display:grid;gap:17px}
.ips-number-card{
    display:grid;
    grid-template-columns:115px 1fr;
    align-items:center;
    gap:20px;
    padding:24px;
    border:1px solid #e1ebf0;
    border-radius:23px;
    background:#f7fcfe;
    box-shadow:var(--shadow-sm);
}
.ips-number-card.red-accent{background:#fff8f8}
.ips-number{
    color:var(--cyan-dark);
    font:800 45px/1 "Manrope";
    letter-spacing:-.06em;
}
.ips-number-card.red-accent .ips-number{color:var(--red)}
.ips-number span{font-size:25px}
.ips-number-card strong{color:var(--navy);font-size:15px}
.ips-number-card p{margin:4px 0 0;color:#8090a0;font-size:12px}

/* ========================= AUDIENCE ========================= */
.ips-audience{background:#f4f8fa}
.ips-audience-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    border-radius:32px;
    background:var(--navy);
    color:#fff;
    box-shadow:var(--shadow);
}
.ips-audience-copy{
    padding:70px;
    background:
        radial-gradient(circle at 0 0,rgba(8,174,224,.25),transparent 35%),
        var(--navy);
}
.ips-audience-copy h2{
    margin:20px 0;
    font:800 clamp(2rem,3.3vw,3.5rem)/1.08 "Manrope";
    letter-spacing:-.05em;
}
.ips-audience-copy p{color:#a9bac9;max-width:590px}
.ips-audience-list{
    padding:45px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(145deg,#102b44,#071827);
}
.ips-audience-list div{
    padding:20px 0;
    border-bottom:1px solid rgba(255,255,255,.10);
    font-size:15px;
    font-weight:600;
}
.ips-audience-list div:last-child{border-bottom:0}
.ips-audience-list span{
    display:inline-flex;
    width:35px;height:35px;
    align-items:center;justify-content:center;
    margin-right:15px;
    border-radius:50%;
    color:var(--cyan);
    border:1px solid rgba(8,174,224,.35);
    font-size:10px;
}

/* ========================= MAGAZINE ========================= */
.ips-magazine{background:#fff}
.ips-issues-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}
.ips-issue{
    position:relative;
    padding:14px;
    background:#f6f9fb;
    border:1px solid #e2eaf0;
    border-radius:28px;
    transition:.4s ease;
}
.ips-issue:hover{
    transform:translateY(-9px);
    box-shadow:var(--shadow);
}
.ips-issue.featured{
    background:#effaff;
    border-color:rgba(8,174,224,.28);
}
.ips-issue-cover{
    position:relative;
    height:430px;
    overflow:hidden;
    border-radius:20px;
    padding:25px;
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.ips-issue-cover:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(130deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);
    transform:translateX(-120%);
    transition:.8s ease;
}
.ips-issue:hover .ips-issue-cover:after{transform:translateX(120%)}
/* ========================= MAGAZINE COVER ========================= */

.ips-issue-cover.march{
    background:
        linear-gradient(
            145deg,
            rgba(10,174,219,.55),
            rgba(6,78,115,.72) 65%,
            rgba(237,41,57,.70)
        ),
        url("../images/june2026.jpg");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.ips-issue-cover.feb{
    background:
        linear-gradient(
            145deg,
            rgba(237,41,57,.58),
            rgba(167,24,40,.72) 58%,
            rgba(7,30,51,.78)
        ),
        url("../images/july2026.jpg");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.ips-issue-cover.jan{
    background:
        linear-gradient(
            145deg,
            rgba(0,143,185,.55),
            rgba(11,62,94,.72) 60%,
            rgba(239,181,29,.65)
        ),
        url("../images/aug2026.jpg");

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}
.ips-issue-number{
    font:800 64px/1 "Manrope";
    opacity:.85;
}
.ips-issue-cover small{
    position:absolute;top:30px;right:27px;
    font-size:11px;letter-spacing:.15em;font-weight:800;
}
.ips-issue-cover b{
    position:absolute;left:25px;bottom:80px;
    font:800 35px/.94 "Manrope";
    letter-spacing:-.06em;
}
.ips-issue-cover em{
    position:absolute;left:26px;bottom:29px;
    font-size:14px;letter-spacing:.14em;font-style:normal;font-weight:800;
}
.ips-issue-info{
    padding:18px 8px 4px;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
}
.ips-issue-info small{
    color:#8797a6;
    font-size:9px;
    letter-spacing:.12em;
    font-weight:800;
}
.ips-issue-info h3{
    margin:4px 0 0;
    color:var(--navy);
    font:800 18px "Manrope";
}
.ips-issue-info a{
    color:var(--red-dark);
    white-space:nowrap;
    font-size:12px;
    font-weight:800;
}
.ips-center-action{text-align:center;margin-top:45px}

/* ========================= REACH ========================= */
.ips-reach{
    background:
        linear-gradient(135deg,#f1fbfe,#fff 55%,#fff7f7);
}
.ips-reach-layout{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:100px;
    align-items:center;
}
.ips-reach-title p{
    color:var(--muted);
    max-width:530px;
    font-size:16px;
}
.ips-metric-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}
.ips-metric{
    min-height:190px;
    padding:32px;
    border-radius:25px;
    background:#fff;
    border:1px solid #e2ebf0;
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.ips-metric:nth-child(2),.ips-metric:nth-child(4){background:#fff7f8}
.ips-metric strong{
    color:var(--cyan-dark);
    font:800 38px/1 "Manrope";
    letter-spacing:-.05em;
}
.ips-metric:nth-child(2) strong,.ips-metric:nth-child(4) strong{color:var(--red)}
.ips-metric span{
    margin-top:9px;
    color:#758798;
    font-size:12px;
}

/* ========================= SECTORS ========================= */
.ips-sectors{background:#fff}
.ips-sector-cloud{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    max-width:1220px;
    margin:auto;
}
.ips-sector-cloud span{
    padding:11px 15px;
    border-radius:999px;
    background:#f3f8fb;
    border:1px solid #e0e9ef;
    color:#455a6d;
    font-size:12px;
    font-weight:700;
    transition:.25s ease;
}
.ips-sector-cloud span:nth-child(3n){
    background:#fff2f3;
    border-color:#f5d7da;
    color:#a72230;
}
.ips-sector-cloud span:hover{
    transform:translateY(-4px);
    color:#fff;
    background:var(--cyan);
    border-color:var(--cyan);
    box-shadow:0 10px 25px rgba(8,174,224,.18);
}

/* ========================= ADVERTISE ========================= */
.ips-advertise{background:#f5f9fb}
.ips-ad-card{
    position:relative;
    min-height:460px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr .75fr;
    border-radius:34px;
    background:var(--navy);
    color:#fff;
    box-shadow:var(--shadow);
}
.ips-ad-copy{
    position:relative;
    z-index:2;
    padding:70px;
}
.ips-ad-copy h2{color:#fff;max-width:720px}
.ips-ad-copy h2 span{color:var(--cyan)}
.ips-ad-copy p{color:#aab9c7;font-size:17px}
.ips-ad-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.ips-ad-art{
    position:relative;
    min-height:460px;
    background:
        radial-gradient(circle at center,rgba(8,174,224,.38),transparent 38%),
        linear-gradient(145deg,#0e314b,#071827);
}
.ips-ad-orbit{
    position:absolute;
    width:340px;height:340px;
    left:50%;top:50%;
    border:1px solid rgba(8,174,224,.45);
    border-radius:50%;
    transform:translate(-50%,-50%);
    animation:spin 20s linear infinite;
}
.ips-ad-orbit:after{
    content:"";
    position:absolute;
    width:13px;height:13px;
    border-radius:50%;
    top:-7px;left:50%;
    background:var(--cyan);
    box-shadow:0 0 25px var(--cyan);
}
.ips-ad-orbit.orbit-b{
    width:230px;height:230px;
    border-color:rgba(237,41,57,.5);
    animation-duration:13s;
    animation-direction:reverse;
}
.ips-ad-orbit.orbit-b:after{background:var(--red);box-shadow:0 0 25px var(--red)}
.ips-ad-badge{
    position:absolute;
    left:50%;top:50%;
    width:130px;height:130px;
    transform:translate(-50%,-50%) rotate(-10deg);
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#fff;
    color:var(--navy);
    font-size:13px;
    font-weight:800;
    letter-spacing:.12em;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.ips-ad-badge b{color:var(--red);font-size:25px}

/* ========================= SUBSCRIBE ========================= */
.ips-subscribe{background:#fff}
.ips-pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    max-width:1000px;
    margin:auto;
}
.ips-price-card{
    position:relative;
    padding:38px 30px;
    border-radius:27px;
    border:1px solid #dfe8ee;
    background:#fff;
    text-align:center;
    transition:.35s;
}
.ips-price-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.ips-price-card.active{
    border:2px solid var(--cyan);
    box-shadow:0 18px 45px rgba(8,174,224,.14);
}
.ips-popular{
    position:absolute;
    left:50%;top:-14px;
    transform:translateX(-50%);
    padding:6px 13px;
    border-radius:999px;
    background:var(--red);
    color:#fff;
    font-size:9px;
    letter-spacing:.1em;
    font-weight:800;
}
.ips-price-card small{
    color:#8292a1;
    font-size:10px;
    letter-spacing:.15em;
    font-weight:800;
}
.ips-price-card strong{
    display:block;
    margin:12px 0 3px;
    color:var(--navy);
    font:800 42px "Manrope";
}
.ips-price-card span{color:#7b8b9a;font-size:12px}
.ips-price-card a{
    display:block;
    margin-top:25px;
    padding:12px;
    border:1px solid var(--cyan);
    border-radius:999px;
    color:var(--cyan-dark);
    font-size:12px;
    font-weight:800;
}
.ips-price-card.active a{background:var(--cyan);color:#fff}
.ips-payment-note{
    max-width:1000px;
    margin:25px auto 0;
    padding:17px 20px;
    border-radius:15px;
    text-align:center;
    background:#fff5f5;
    color:#8e3440;
    font-size:12px;
}

/* ========================= CONTACT ========================= */
.ips-contact{
    padding-top:70px;
    padding-bottom:110px;
}
.ips-contact-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:65px 70px;
    border-radius:32px;
    background:
        radial-gradient(circle at 85% 30%,rgba(8,174,224,.23),transparent 28%),
        var(--navy);
    box-shadow:var(--shadow);
}
.ips-contact-card h2{
    max-width:850px;
    color:#fff;
    font-size:clamp(2.1rem,3.5vw,3.7rem);
}
.ips-contact-card p{color:#aebdca;max-width:720px}

/* ========================= FOOTER ========================= */


/* ========================= REVEAL ========================= */
.ips-reveal{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .85s cubic-bezier(.2,.8,.2,1),
        transform .85s cubic-bezier(.2,.8,.2,1);
}
.ips-reveal-delay{transition-delay:.13s}
.ips-reveal-delay-2{transition-delay:.25s}
.ips-reveal.show{opacity:1;transform:none}

/* ========================= TOP BUTTON ========================= */
.ips-top{
    position:fixed;
    right:24px;
    bottom:24px;
    width:50px;height:50px;
    border:0;
    border-radius:50%;
    background:#fff;
    color:var(--red);
    box-shadow:0 12px 35px rgba(10,40,60,.17);
    border:1px solid #e2eaf0;
    font-size:21px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:.3s;
    z-index:800;
}
.ips-top.show{opacity:1;visibility:visible;transform:none}
.ips-top:hover{background:var(--red);color:#fff}

/* ========================= ANIMATION ========================= */
@keyframes floatOrb{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(0,-20px,0)}
}
@keyframes floatCard{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ========================= RESPONSIVE ========================= */
@media(max-width:1100px){
    .ips-container{width:min(var(--container),calc(100% - 46px))}
    .ips-nav{gap:0}
    .ips-nav>a{padding-inline:9px}
    .ips-nav-cta{margin-left:5px}
    .ips-hero-layout{gap:35px}
    .ips-floating-readers{left:-25px}
    .ips-floating-reach{right:-20px}
}
@media(max-width:900px){

    .ips-nav-wrap{
        min-height:76px;
    }

    .ips-brand{
        width:235px;
        flex-basis:235px;
    }

    /* HAMBURGER BUTTON */
    .ips-menu-btn{
        display:flex;
        flex-direction:column;
        gap:5px;
        width:44px;
        height:44px;
        align-items:center;
        justify-content:center;
        border:1px solid #dce7ed;
        border-radius:12px;
        background:#fff;
        cursor:pointer;
        padding:0;
        position:relative;
        z-index:1001;
    }

    .ips-menu-btn span{
        display:block;
        width:20px;
        height:2px;
        background:var(--navy);
        border-radius:2px;
        transition:.25s ease;
    }

    /* MOBILE NAVIGATION */
    .ips-nav{
        position:absolute;
        left:18px;
        right:18px;
        top:82px;

        padding:14px;

        display:none;
        flex-direction:column;
        align-items:stretch;

        background:#fff;
        border:1px solid #e1eaf0;
        border-radius:18px;
        box-shadow:var(--shadow);

        z-index:1000;
    }

    /* THIS IS THE IMPORTANT FIX */
    .ips-nav.ips-nav-open{
        display:flex;
    }

    .ips-nav>a{
        padding:13px 14px;
    }

    .ips-nav-cta{
        margin:6px 0 0 !important;
        text-align:center;
    }

    /* HAMBURGER ANIMATION */
    .ips-menu-btn.open span:nth-child(1){
        transform:translateY(7px) rotate(45deg);
    }

    .ips-menu-btn.open span:nth-child(2){
        opacity:0;
    }

    .ips-menu-btn.open span:nth-child(3){
        transform:translateY(-7px) rotate(-45deg);
    }

    .ips-hero-layout{
        grid-template-columns:1fr;
        padding:70px 0 80px;
    }

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

    .ips-hero-visual{
        min-height:600px;
    }

    .ips-intro-grid,
    .ips-reach-layout{
        grid-template-columns:1fr;
        gap:45px;
    }

    .ips-audience-card{
        grid-template-columns:1fr;
    }

    .ips-audience-copy{
        padding:50px;
    }

    .ips-issues-grid{
        grid-template-columns:1fr 1fr;
    }

    .ips-issue:last-child{
        grid-column:1/-1;
        max-width:calc(50% - 14px);
        margin:auto;
    }

    .ips-ad-card{
        grid-template-columns:1fr;
    }

    .ips-ad-art{
        min-height:360px;
    }

    .ips-contact-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .ips-footer-top{
        grid-template-columns:1fr 1fr;
    }

    .ips-footer-links{
        justify-content:flex-start;
    }
}
@media(max-width:600px){
    .ips-container{width:min(var(--container),calc(100% - 30px))}
    .ips-brand{width:205px;flex-basis:205px}
    .ips-hero{min-height:auto}
    .ips-hero h1{font-size:3rem}
    .ips-hero h1 span:after{height:5px}
    .ips-hero-copy>p{font-size:15px}
    .ips-hero-proof{gap:11px}
    .ips-proof-item strong{font-size:17px}
    .ips-proof-item span{font-size:9px}
    .ips-hero-visual{min-height:480px}
    .ips-hero-card{width:92%}
    .ips-cover-art{height:340px}
    .ips-cover-title{font-size:29px}
    .ips-floating-card{padding:11px 12px}
    .ips-floating-readers{left:-5px;top:55px}
    .ips-floating-reach{right:-5px;bottom:55px}
    .ips-circle-stamp{left:0;bottom:5px;transform:scale(.78) rotate(-9deg)}
    .ips-section{padding:80px 0}
    .ips-section-head h2,.ips-reach-title h2,.ips-ad-copy h2{font-size:2.25rem}
    .ips-intro-main .ips-large-copy{font-size:19px}
    .ips-number-card{grid-template-columns:85px 1fr;padding:18px}
    .ips-number{font-size:34px}
    .ips-audience-copy{padding:38px 27px}
    .ips-audience-list{padding:30px 27px}
    .ips-issues-grid,.ips-pricing-grid{grid-template-columns:1fr}
    .ips-issue:last-child{grid-column:auto;max-width:none}
    .ips-issue-cover{height:390px}
    .ips-metric-grid{grid-template-columns:1fr 1fr}
    .ips-metric{min-height:145px;padding:23px}
    .ips-metric strong{font-size:29px}
    .ips-sector-cloud{gap:7px}
    .ips-sector-cloud span{font-size:10px;padding:8px 11px}
    .ips-ad-copy{padding:40px 27px}
    .ips-ad-art{min-height:330px}
    .ips-contact-card{padding:42px 27px}
    .ips-footer-top{grid-template-columns:1fr}
    .ips-footer-bottom{flex-direction:column}
    .ips-top{right:15px;bottom:15px}
}
@media(prefers-reduced-motion:reduce){
    *,*:before,*:after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
        transition-duration:.01ms!important;
    }
    .ips-reveal{opacity:1;transform:none}
}
/* =========================================================
   IPS REACH — PREMIUM SECTION
========================================================= */

.ips-reach-premium {
    position: relative;
    overflow: hidden;
    padding: 115px 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 174, 224, 0.15),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(239, 45, 56, 0.12),
            transparent 30%
        ),
        #071b2c;
}


/* background grid */

.ips-reach-premium::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: 55px 55px;

    pointer-events: none;
}


/* decorative circles */

.ips-reach-shape {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.ips-reach-shape-one {
    width: 420px;
    height: 420px;

    top: -250px;
    right: -100px;

    border:
        1px solid
        rgba(0,174,224,.22);
}


.ips-reach-shape-two {
    width: 260px;
    height: 260px;

    bottom: -150px;
    left: -60px;

    border:
        1px solid
        rgba(239,45,56,.20);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.ips-reach-premium-wrap {

    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap: 90px;

    align-items: center;
}


/* =========================================================
   LEFT
========================================================= */

.ips-reach-content {

    max-width: 510px;
}


.ips-reach-label {

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 10px 17px;

    margin-bottom: 30px;

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

    border-radius: 50px;

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

    color: #ffffff;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;
}


.ips-reach-label-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #00aee0;

    box-shadow:
        0 0 0 5px
        rgba(0,174,224,.12);
}


/* Heading */

.ips-reach-content h2 {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(44px, 5vw, 72px);

    line-height: 1.02;

    letter-spacing: -3px;

    font-weight: 800;
}


.ips-reach-content h2 span {

    position: relative;

    display: inline-block;

    color: #00aee0;
}


/* red underline */

.ips-reach-content h2 span::after {

    content: "";

    position: absolute;

    left: 2px;
    bottom: -12px;

    width: 48%;

    height: 5px;

    border-radius: 20px;

    background: #ef2d38;

    transform: rotate(-1deg);
}


/* Paragraph */

.ips-reach-content > p {

    max-width: 475px;

    margin:
        38px 0 32px;

    color:
        rgba(255,255,255,.65);

    font-size: 17px;

    line-height: 1.85;
}


/* decorative line */

.ips-reach-line {

    width: 100%;

    height: 1px;

    margin-bottom: 25px;

    background:
        rgba(255,255,255,.10);
}


.ips-reach-line span {

    display: block;

    width: 80px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #00aee0,
            #ef2d38
        );
}


/* bottom text */

.ips-reach-bottom-text {

    display: flex;

    align-items: center;

    gap: 14px;

    color:
        rgba(255,255,255,.75);

    font-size: 14px;

    font-weight: 600;
}


.ips-reach-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    border-radius: 50%;

    background: #00aee0;

    color: #ffffff;

    font-size: 18px;

    transition:
        .35s ease;
}


.ips-reach-content:hover
.ips-reach-arrow {

    background: #ef2d38;

    transform:
        rotate(45deg);
}


/* =========================================================
   STATISTICS GRID
========================================================= */

.ips-reach-stats {

    display: grid;

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

    gap: 18px;
}


/* Card */

.ips-reach-stat {

    position: relative;

    min-height: 245px;

    padding: 28px 30px;

    overflow: hidden;

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

    border-radius: 25px;

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

    backdrop-filter:
        blur(12px);

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}


.ips-reach-stat::before {

    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -80px;
    bottom: -90px;

    border-radius: 50%;

    background:
        rgba(0,174,224,.09);

    transition:
        .5s ease;
}


.ips-reach-stat:nth-child(2)::before,
.ips-reach-stat:nth-child(4)::before {

    background:
        rgba(239,45,56,.08);
}


/* Hover */

.ips-reach-stat:hover {

    transform:
        translateY(-9px);

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

    border-color:
        rgba(0,174,224,.35);

    box-shadow:
        0 25px 50px
        rgba(0,0,0,.22);
}


.ips-reach-stat:nth-child(2):hover,
.ips-reach-stat:nth-child(4):hover {

    border-color:
        rgba(239,45,56,.35);
}


.ips-reach-stat:hover::before {

    transform: scale(1.5);
}


/* =========================================================
   CARD TOP
========================================================= */

.ips-stat-top {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    margin-bottom: 30px;
}


.ips-stat-index {

    color:
        rgba(255,255,255,.32);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* icon */

.ips-stat-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 43px;
    height: 43px;

    border-radius: 13px;

    background:
        rgba(0,174,224,.14);

    color: #00aee0;
}


.ips-stat-icon.red-icon {

    background:
        rgba(239,45,56,.13);

    color: #ef2d38;
}


.ips-stat-icon svg {

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   NUMBER
========================================================= */

.ips-reach-stat strong {

    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 6px;

    color: #ffffff;

    font-size:
        clamp(38px, 4vw, 57px);

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 800;
}


.ips-reach-stat strong span {

    color: #00aee0;
}


.ips-reach-stat:nth-child(2)
strong span {

    color: #ef2d38;
}


/* Pan India */

.ips-reach-stat
.ips-stat-text {

    font-size:
        clamp(32px, 3vw, 46px);
}


.ips-reach-stat
.ips-stat-text span {

    color: #00aee0;
}


/* Description */

.ips-reach-stat p {

    position: relative;
    z-index: 2;

    margin: 0;

    color:
        rgba(255,255,255,.55);

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   BOTTOM PROGRESS ACCENT
========================================================= */

.ips-stat-bar {

    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 25px;

    height: 3px;

    overflow: hidden;

    border-radius: 20px;

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


.ips-stat-bar span {

    display: block;

    width: 68%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #00aee0,
            #42d9ff
        );

    transform-origin: left;

    transition:
        width .6s ease;
}


.ips-reach-stat:hover
.ips-stat-bar span {

    width: 90%;
}


.ips-stat-bar.red-bar span {

    background:
        linear-gradient(
            90deg,
            #ef2d38,
            #ff6570
        );
}


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

@media
(max-width: 1050px) {

    .ips-reach-premium-wrap {

        grid-template-columns:
            1fr;

        gap: 55px;
    }


    .ips-reach-content {

        max-width: 680px;
    }

}


@media
(max-width: 650px) {

    .ips-reach-premium {

        padding:
            80px 0;
    }


    .ips-reach-stats {

        grid-template-columns:
            1fr;
    }


    .ips-reach-content h2 {

        font-size: 43px;

        letter-spacing: -2px;
    }


    .ips-reach-stat {

        min-height: 220px;
    }

}

/* =========================================================
   ABOUT + WHO READS IPS
========================================================= */

.ips-about-publication {
    position: relative;
    padding: 105px 0;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(0, 174, 224, .07),
            transparent 28%
        ),
        #f7fafc;
}


/* Main card */

.ips-about-card {
    position: relative;

    display: grid;

    grid-template-columns:
        1.05fr
        1px
        .95fr;

    gap: 65px;

    padding: 70px;

    border-radius: 32px;

    background: #ffffff;

    border:
        1px solid
        rgba(15, 42, 67, .07);

    box-shadow:
        0 25px 70px
        rgba(15, 42, 67, .08);

    overflow: hidden;
}


/* Decorative cyan corner */

.ips-about-card::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(0, 174, 224, .16);
}


/* Decorative red corner */

.ips-about-card::after {

    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    left: -100px;
    bottom: -100px;

    border-radius: 50%;

    border:
        1px solid
        rgba(239, 45, 56, .13);
}


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

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


.ips-about-content h2 {

    max-width: 720px;

    margin:
        22px 0 28px;

    color:
        #07152d;

    font-size:
        clamp(38px, 4vw, 57px);

    line-height:
        1.08;

    letter-spacing:
        -2.4px;

    font-weight:
        800;
}


.ips-about-content h2 span {

    position: relative;

    color:
        #079fd0;
}


/* Red underline */

.ips-about-content h2 span::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 85px;
    height: 4px;

    border-radius: 10px;

    background:
        #ef2d38;

    transform:
        rotate(-1deg);
}


/* Copy */

.ips-about-copy {

    max-width: 670px;

    color:
        #64758a;

    font-size:
        16px;

    line-height:
        1.85;
}


.ips-about-copy p {
    margin-bottom: 20px;
}


.ips-about-copy
.ips-large-copy {

    color:
        #50657a;

    font-size:
        19px;

    line-height:
        1.8;

    font-weight:
        500;
}


/* Link */

.ips-about-content
.ips-text-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 10px;

    color:
        #079fd0;

    font-size:
        14px;

    font-weight:
        800;
}


.ips-about-content
.ips-text-link span {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    color: #fff;

    background:
        #ef2d38;

    transition:
        .3s ease;
}


.ips-about-content
.ips-text-link:hover span {

    transform:
        translateX(5px);

    background:
        #079fd0;
}


/* =========================================================
   DIVIDER
========================================================= */

.ips-about-divider {

    width: 1px;

    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #dce5ed 15%,
            #dce5ed 85%,
            transparent
        );
}


/* =========================================================
   RIGHT / READERSHIP
========================================================= */

.ips-reader-content {

    position: relative;

    z-index: 2;

    padding-top: 4px;
}


.ips-reader-content h3 {

    margin:
        22px 0 18px;

    color:
        #07152d;

    font-size:
        clamp(31px, 3vw, 43px);

    line-height:
        1.1;

    letter-spacing:
        -1.7px;

    font-weight:
        800;
}


.ips-reader-content h3 span {

    color:
        #079fd0;
}


.ips-reader-intro {

    margin-bottom:
        30px;

    color:
        #68798c;

    font-size:
        15px;

    line-height:
        1.8;
}


/* =========================================================
   READER LIST
========================================================= */

.ips-reader-list {

    border-top:
        1px solid
        #e4ebf1;
}


.ips-reader-item {

    display:
        flex;

    align-items:
        center;

    gap: 17px;

    min-height:
        58px;

    border-bottom:
        1px solid
        #e4ebf1;

    transition:
        .3s ease;
}


.ips-reader-item span {

    width:
        34px;

    color:
        #a0adba;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1px;

    transition:
        .3s ease;
}


.ips-reader-item strong {

    color:
        #15243b;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        .3s ease;
}


/* Hover */

.ips-reader-item:hover {

    padding-left:
        8px;
}


.ips-reader-item:hover span {

    color:
        #ef2d38;
}


.ips-reader-item:hover strong {

    color:
        #079fd0;
}


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

.ips-about-publication
.ips-eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 15px;

    border-radius:
        50px;

    background:
        #e4f8fd;

    color:
        #087fa8;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.7px;
}


.ips-about-publication
.ips-eyebrow.red {

    background:
        #fff0f1;

    color:
        #df2735;
}


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

@media (max-width: 1000px) {

    .ips-about-card {

        grid-template-columns:
            1fr;

        gap:
            45px;

        padding:
            50px;
    }


    .ips-about-divider {

        width:
            100%;

        height:
            1px;

        background:
            linear-gradient(
                to right,
                transparent,
                #dce5ed,
                transparent
            );
    }

}


@media (max-width: 600px) {

    .ips-about-publication {

        padding:
            70px 0;
    }


    .ips-about-card {

        padding:
            35px 24px;

        border-radius:
            23px;
    }


    .ips-about-content h2 {

        font-size:
            36px;

        letter-spacing:
            -1.5px;
    }


    .ips-about-copy
    .ips-large-copy {

        font-size:
            17px;
    }


    .ips-reader-content h3 {

        font-size:
            31px;
    }


    .ips-reader-item {

        align-items:
            flex-start;

        padding:
            14px 0;
    }

}


/* =========================================================
   ADVERTISE + SUBSCRIBE
   PREMIUM COMBINED SECTION
========================================================= */

.ips-business-section {

    position: relative;

    overflow: hidden;

    padding:
        110px 0;

    background:
        #071b2c;
}


/* subtle grid */

.ips-business-section::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:
        55px 55px;

    pointer-events:
        none;
}


/* cyan glow */

.ips-business-bg {

    position: absolute;

    border-radius: 50%;

    pointer-events:
        none;

    filter:
        blur(1px);
}


.ips-business-bg-one {

    width:
        500px;

    height:
        500px;

    top:
        -300px;

    left:
        -180px;

    border:
        1px solid
        rgba(0,174,224,.22);

    box-shadow:
        0 0 100px
        rgba(0,174,224,.08);
}


.ips-business-bg-two {

    width:
        400px;

    height:
        400px;

    right:
        -180px;

    bottom:
        -260px;

    border:
        1px solid
        rgba(239,45,56,.20);

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


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

.ips-business-card {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        .9fr
        1px
        1.1fr;

    gap:
        65px;

    padding:
        70px;

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

    border-radius:
        32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.045)
        );

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.30);

    backdrop-filter:
        blur(16px);

    overflow:
        hidden;
}


/* top cyan accent */

.ips-business-card::before {

    content: "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            #00aee0 0%,
            #00aee0 58%,
            #ef2d38 58%,
            #ef2d38 100%
        );
}


/* =========================================================
   ADVERTISE SIDE
========================================================= */

.ips-business-intro {

    position:
        relative;

    z-index:
        2;
}


.ips-business-intro h2 {

    margin:
        24px 0 24px;

    color:
        #ffffff;

    font-size:
        clamp(
            40px,
            4.2vw,
            61px
        );

    line-height:
        1.05;

    letter-spacing:
        -2.8px;

    font-weight:
        800;
}


.ips-business-intro h2 span {

    position:
        relative;

    color:
        #00aee0;
}


/* red underline */

.ips-business-intro h2 span::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -10px;

    width:
        75px;

    height:
        4px;

    border-radius:
        10px;

    background:
        #ef2d38;

    transform:
        rotate(-1deg);
}


.ips-business-intro > p {

    max-width:
        470px;

    margin:
        35px 0;

    color:
        rgba(255,255,255,.65);

    font-size:
        17px;

    line-height:
        1.8;
}


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

.ips-ad-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;
}


.ips-business-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    min-width:
        190px;

    padding:
        14px 18px;

    border:
        1px solid
        transparent;

    border-radius:
        14px;

    font-size:
        13px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        .35s ease;
}


.ips-business-btn b {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    border-radius:
        50%;

    font-size:
        15px;

    transition:
        .3s ease;
}


/* Primary */

.ips-business-btn-primary {

    color:
        #ffffff;

    background:
        #00aee0;

    box-shadow:
        0 12px 30px
        rgba(0,174,224,.18);
}


.ips-business-btn-primary b {

    color:
        #00aee0;

    background:
        #ffffff;
}


/* Secondary */

.ips-business-btn-secondary {

    color:
        #ffffff;

    border-color:
        rgba(255,255,255,.18);

    background:
        rgba(255,255,255,.05);
}


.ips-business-btn-secondary b {

    color:
        #ffffff;

    background:
        rgba(255,255,255,.12);
}


.ips-business-btn:hover {

    transform:
        translateY(-4px);

    text-decoration:
        none;
}


.ips-business-btn-primary:hover {

    color:
        #ffffff;

    background:
        #ef2d38;

    box-shadow:
        0 15px 35px
        rgba(239,45,56,.22);
}


.ips-business-btn:hover b {

    transform:
        rotate(45deg);
}


/* =========================================================
   BUSINESS LINE
========================================================= */

.ips-business-line {

    width:
        100%;

    height:
        1px;

    margin-top:
        48px;

    background:
        rgba(255,255,255,.10);
}


.ips-business-line span {

    display:
        block;

    width:
        90px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            #00aee0,
            #ef2d38
        );
}


/* caption */

.ips-business-caption {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        20px;

    color:
        rgba(255,255,255,.55);

    font-size:
        12px;

    font-weight:
        700;
}


.ips-business-caption-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        #ef2d38;
}


/* =========================================================
   DIVIDER
========================================================= */

.ips-business-divider {

    width:
        1px;

    height:
        100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );
}


/* =========================================================
   SUBSCRIPTION
========================================================= */

.ips-subscription-content {

    position:
        relative;

    z-index:
        2;
}


.ips-subscription-content h3 {

    margin:
        22px 0 10px;

    color:
        #ffffff;

    font-size:
        clamp(
            36px,
            3.5vw,
            51px
        );

    line-height:
        1.05;

    letter-spacing:
        -2px;

    font-weight:
        800;
}


.ips-subscription-content h3 span {

    color:
        #00aee0;
}


.ips-subscription-intro {

    margin:
        0 0 30px;

    color:
        rgba(255,255,255,.58);

    font-size:
        15px;
}


/* =========================================================
   PRICE GRID
========================================================= */

.ips-pricing-grid {

    display:
        grid;

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

    gap:
        12px;
}


.ips-price-card {

    position:
        relative;

    min-height:
        205px;

    padding:
        22px 20px;

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

    border-radius:
        18px;

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

    overflow:
        hidden;

    transition:
        .4s ease;
}


.ips-price-card::after {

    content:
        "";

    position:
        absolute;

    width:
        100px;

    height:
        100px;

    right:
        -50px;

    bottom:
        -50px;

    border-radius:
        50%;

    background:
        rgba(0,174,224,.10);

    transition:
        .4s ease;
}


.ips-price-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(0,174,224,.35);

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

    box-shadow:
        0 20px 40px
        rgba(0,0,0,.20);
}


.ips-price-card:hover::after {

    transform:
        scale(1.7);
}


/* featured */

.ips-price-featured {

    border-color:
        rgba(0,174,224,.45);

    background:
        linear-gradient(
            145deg,
            rgba(0,174,224,.17),
            rgba(255,255,255,.055)
        );

    transform:
        translateY(-7px);
}


.ips-price-featured:hover {

    transform:
        translateY(-12px);
}


/* popular */

.ips-popular {

    position:
        absolute;

    top:
        0;

    right:
        0;

    padding:
        7px 11px;

    border-radius:
        0 0 0 10px;

    color:
        #ffffff;

    background:
        #ef2d38;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1px;
}


/* price top */

.ips-price-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        22px;
}


.ips-price-top small {

    color:
        rgba(255,255,255,.45);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;
}


.ips-price-top > span {

    color:
        rgba(255,255,255,.18);

    font-size:
        11px;

    font-weight:
        800;
}


/* price */

.ips-price-card > strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        38px;

    line-height:
        1;

    letter-spacing:
        -1px;

    font-weight:
        800;
}


.ips-price-card > p {

    margin:
        8px 0 18px;

    color:
        rgba(255,255,255,.48);

    font-size:
        12px;
}


/* subscribe */

.ips-price-card > a {

    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #00aee0;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;

    transition:
        .3s ease;
}


.ips-price-card > a span {

    transition:
        .3s ease;
}


.ips-price-card > a:hover {

    color:
        #ffffff;
}


.ips-price-card > a:hover span {

    transform:
        translateX(5px);
}


/* =========================================================
   PAYMENT NOTE
========================================================= */

.ips-payment-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    margin-top:
        20px;

    padding:
        14px 16px;

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

    border-radius:
        13px;

    background:
        rgba(255,255,255,.035);
}


.ips-payment-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        28px;

    height:
        28px;

    flex:
        0 0 28px;

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        #00aee0;

    font-size:
        12px;

    font-weight:
        800;
}


.ips-payment-note p {

    margin:
        0;

    color:
        rgba(255,255,255,.48);

    font-size:
        11px;

    line-height:
        1.65;
}


.ips-payment-note b {

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


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

@media (max-width: 1100px) {

    .ips-business-card {

        grid-template-columns:
            1fr;

        gap:
            50px;

        padding:
            55px;
    }


    .ips-business-divider {

        width:
            100%;

        height:
            1px;

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

}


@media (max-width: 700px) {

    .ips-business-section {

        padding:
            75px 0;
    }


    .ips-business-card {

        padding:
            35px 24px;

        border-radius:
            23px;
    }


    .ips-business-intro h2 {

        font-size:
            38px;

        letter-spacing:
            -1.7px;
    }


    .ips-ad-actions {

        flex-direction:
            column;
    }


    .ips-business-btn {

        width:
            100%;
    }


    .ips-pricing-grid {

        grid-template-columns:
            1fr;
    }


    .ips-price-card {

        min-height:
            185px;
    }


    .ips-price-featured {

        transform:
            none;
    }


    .ips-price-featured:hover {

        transform:
            translateY(-7px);
    }

}

/* =========================================================
   BUSINESS ENQUIRY - COMPACT & ELEGANT
   ========================================================= */

.ips-contact {
    position: relative;
    padding: 45px 0;
    background: #eefaff;
    overflow: hidden;
}

/* subtle cyan background glow */
.ips-contact::before {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    right: -150px;
    top: -180px;
    background: rgba(0, 174, 239, 0.10);
    border-radius: 50%;
    pointer-events: none;
}

/* subtle red accent */
.ips-contact::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    left: -100px;
    bottom: -120px;
    background: rgba(237, 28, 36, 0.06);
    border-radius: 50%;
    pointer-events: none;
}


/* Main compact card */
.ips-contact-card {
    position: relative;
    z-index: 2;

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

    padding: 30px 38px;

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

    border: 1px solid rgba(0, 174, 239, 0.18);
    border-radius: 14px;

    box-shadow:
        0 12px 35px rgba(0, 80, 120, 0.08);

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

.ips-contact-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(0, 80, 120, 0.12);
}


/* Small label */
.ips-contact .ips-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    color: #00aeeF;
}

.ips-contact .ips-eyebrow::before {
    content: "";
    width: 20px;
    height: 2px;

    background: #ed1c24;
}


/* Heading */
.ips-contact h2 {
    margin: 0;

    max-width: 700px;

    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.15;

    font-weight: 700;

    color: #10283d;
}

.ips-contact h2 span {
    color: #00aeeF;
}


/* Description */
.ips-contact p {
    margin: 9px 0 0;

    max-width: 680px;

    font-size: 13px;
    line-height: 1.6;

    color: #657482;
}


/* =========================================================
   BUTTON
   ========================================================= */

.ips-contact-btn {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-width: 195px;

    padding: 13px 20px;

    border-radius: 7px;

    background: #ed1c24;
    color: #ffffff;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;

    box-shadow:
        0 8px 20px rgba(237, 28, 36, 0.18);

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

.ips-contact-btn span {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.ips-contact-btn:hover {
    background: #d71920;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(237, 28, 36, 0.24);
}

.ips-contact-btn:hover span {
    transform: translate(3px, -3px);
}


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

@media (max-width: 768px) {

    .ips-contact {
        padding: 32px 0;
    }

    .ips-contact-card {
        flex-direction: column;
        align-items: flex-start;

        gap: 20px;

        padding: 25px 22px;
    }

    .ips-contact h2 {
        font-size: 23px;
    }

    .ips-contact p {
        font-size: 12px;
    }

    .ips-contact-btn {
        width: 100%;
    }
}

/* =========================================================
   SIMPLE IPS FOOTER - RED
   ========================================================= */

.ips-footer {
    background: #fff5f5;
    border-top: 2px solid #ed1c24;
    padding: 12px 0;
}

.ips-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;


    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;

    color: #6f6666;
}

.ips-footer-bottom span:last-child {
    color: #ed1c24;
    font-weight: 700;
}


/* Mobile */
@media (max-width: 600px) {

    .ips-footer {
        padding: 11px 0;
    }

    .ips-footer-bottom {
        flex-direction: column;
        justify-content: center;
        gap: 4px;

        text-align: center;
        font-size: 10px;
    }

}

/* =========================================================
   IPS - HOW IT WORKS
   ========================================================= */

.ips-how-section {
    position: relative;
    padding: 75px 0 80px;
    background: #ffffff;
}


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

.ips-how-heading {
    max-width: 680px;
    margin: 0 auto 65px;
    text-align: center;
}

.ips-how-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;

    color: #00aeeF;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ips-how-eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #fff1f2;
    color: #ed1c24;

    font-size: 11px;
}

.ips-how-heading h2 {
    margin: 0;

    color: #10283d;

    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.15;
    font-weight: 700;
}

.ips-how-heading h2 span {
    color: #00aeeF;
}


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

.ips-hiw-wrap {
    position: relative;
}


/* Horizontal connecting line */

.ips-hiw-line {
    position: absolute;

    top: 30px;
    left: 16.66%;
    right: 16.66%;

    height: 1px;

    background: linear-gradient(
        90deg,
        rgba(0, 174, 239, 0.18),
        #00aeeF,
        rgba(237, 28, 36, 0.45)
    );

    z-index: 1;
}


/* =========================================================
   THREE COLUMNS
   ========================================================= */

.ips-hiw-grid {
    display: grid;

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

    gap: 50px;

    position: relative;
    z-index: 2;
}


/* =========================================================
   INDIVIDUAL STEP
   ========================================================= */

.ips-hiw-step {
    position: relative;

    text-align: center;

    padding: 0 25px;
}


/* Number circle */

.ips-hiw-number {
    width: 60px;
    height: 60px;

    margin: 0 auto 27px;

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

    position: relative;
    z-index: 3;

    border-radius: 50%;

    background: #ffffff;

    border: 2px solid #00aeeF;

    color: #00aeeF;

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

    box-shadow:
        0 0 0 7px #ffffff,
        0 7px 20px rgba(0, 174, 239, 0.14);

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease;
}


/* Make middle / final steps slightly different */

.ips-hiw-step:nth-child(2) .ips-hiw-number {
    border-color: #ed1c24;
    color: #ed1c24;

    box-shadow:
        0 0 0 7px #ffffff,
        0 7px 20px rgba(237, 28, 36, 0.14);
}

.ips-hiw-step:nth-child(3) .ips-hiw-number {
    border-color: #00aeeF;
    color: #00aeeF;
}


/* Hover */

.ips-hiw-step:hover .ips-hiw-number {
    transform: translateY(-4px);

    background: #00aeeF;
    color: #ffffff;
}

.ips-hiw-step:nth-child(2):hover .ips-hiw-number {
    background: #ed1c24;
    border-color: #ed1c24;
}


/* =========================================================
   STEP TITLE
   ========================================================= */

.ips-hiw-step h3 {
    max-width: 280px;

    margin: 0 auto 12px;

    color: #263b4d;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 700;
}


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

.ips-hiw-step p {
    max-width: 300px;

    margin: 0 auto;

    color: #71808c;

    font-size: 13px;
    line-height: 1.7;
}


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

@media (max-width: 768px) {

    .ips-how-section {
        padding: 55px 0 60px;
    }

    .ips-how-heading {
        margin-bottom: 45px;
    }

    .ips-how-heading h2 {
        font-size: 29px;
    }

    .ips-hiw-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    /* Vertical line on mobile */

    .ips-hiw-line {
        top: 30px;
        bottom: 30px;

        left: 50%;

        right: auto;

        width: 1px;
        height: auto;

        background: linear-gradient(
            180deg,
            rgba(0, 174, 239, 0.25),
            #00aeeF,
            #ed1c24
        );
    }

    .ips-hiw-step {
        padding: 0 15px;
    }

}


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

@media (max-width: 480px) {

    .ips-how-heading {
        margin-bottom: 40px;
    }

    .ips-how-heading h2 {
        font-size: 26px;
    }

    .ips-hiw-step h3 {
        font-size: 18px;
    }

    .ips-hiw-step p {
        font-size: 12px;
    }

}

/* =========================================================
   HERO RIGHT SIDE - TWO PART DESIGN
   ========================================================= */

.ips-hero-visual {
    position: relative;
    width: 100%;
}


/* =========================================================
   TWO PANELS
   ========================================================= */

.ips-hero-right-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(230px, .75fr);

    align-items: stretch;

    gap: 18px;

    position: relative;

    z-index: 2;
}


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

.ips-hero-card {

    position: relative;

    min-width: 0;

    padding: 0 11px 11px;

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

    border-radius: 0 0 25px 25px;

    box-shadow:
        0 25px 60px rgba(14,40,62,.13);

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


.ips-hero-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 35px 75px rgba(14,40,62,.18);
}


/* =========================================================
   MAGAZINE TOP
   ========================================================= */

.ips-card-topline {

    height: 40px;

    padding: 0 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #7f8e9b;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


/* =========================================================
   COVER
   ========================================================= */

.ips-cover-art {

    position: relative;

    height: 430px;

    overflow: hidden;

    border-radius: 21px;

    isolation: isolate;

    background: #04b5e8;
}


/* =========================================================
   COVER IMAGE
   ========================================================= */

.ips-cover-bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    background-image:
        url("../images/ips-cover.jpg");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center;

    transition:
        transform .8s ease;
}


.ips-hero-card:hover
.ips-cover-bg {

    transform: scale(1.035);
}


/* =========================================================
   COVER SHADING
   ========================================================= */

.ips-cover-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        radial-gradient(
            circle at 82% 20%,
            rgba(237,41,57,.50),
            transparent 22%
        ),

        linear-gradient(
            145deg,
            rgba(4,181,232,.45) 0%,
            rgba(0,126,168,.30) 55%,
            rgba(9,36,61,.55) 100%
        );

    pointer-events: none;
}


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

.ips-cover-shine {

    position: absolute;

    width: 150%;
    height: 90px;

    top: 100px;
    left: -25%;

    z-index: 5;

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

    transform:
        rotate(-27deg);

    transition:
        left 1s ease;
}


.ips-hero-card:hover
.ips-cover-shine {

    left: 120%;
}


/* =========================================================
   COVER SUBTITLE
   ========================================================= */

.ips-cover-sub {

    position: absolute;

    left: 30px;
    bottom: 37px;

    z-index: 7;

    color: #fff;

    font-size: 9px;

    letter-spacing: .22em;

    font-weight: 800;

    opacity: .9;
}


/* =========================================================
   RED LINE
   ========================================================= */

.ips-cover-lines {

    position: absolute;

    left: 30px;
    right: 30px;

    bottom: 24px;

    height: 2px;

    z-index: 7;

    background: var(--red);
}


/* =========================================================
   MAGAZINE BOTTOM
   ========================================================= */

.ips-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 7px 2px;
}


.ips-card-bottom small {

    display: block;

    color: #8b9aaa;

    font-size: 9px;
}


.ips-card-bottom strong {

    display: block;

    color: var(--navy);

    font-size: 13px;
}


.ips-mini-arrow {

    width: 38px;
    height: 38px;

    display: flex;

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

    color: #fff;

    background: var(--red);

    border-radius: 50%;

    font-size: 15px;
}


/* =========================================================
   NEW SPECIAL SECTION CARD
   ========================================================= */

.ips-special-card {

    position: relative;

    min-height: 100%;

    padding: 24px 22px;

    border-radius: 22px;

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

    border: 1px solid
        rgba(0,174,239,.14);

    box-shadow:
        0 20px 50px
        rgba(14,40,62,.10);

    overflow: hidden;

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


.ips-special-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 28px 60px
        rgba(14,40,62,.15);
}


/* Decorative glow */

.ips-special-card::before {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(0,174,239,.10);

    pointer-events: none;
}


.ips-special-card::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    left: -70px;
    bottom: -65px;

    border-radius: 50%;

    background:
        rgba(237,28,36,.06);

    pointer-events: none;
}


/* =========================================================
   SPECIAL TOP
   ========================================================= */

.ips-special-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;

    position: relative;

    z-index: 2;
}


.ips-special-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 9px;

    border-radius: 5px;

    background: var(--red);

    color: #fff;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


.ips-special-year {

    color: #00aeeF;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


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

.ips-special-heading {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    line-height: 1.05;

    margin-bottom: 18px;
}


.ips-special-heading span {

    color: #00aeeF;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: .5px;
}


.ips-special-heading strong {

    color: #10283d;

    font-size: 24px;

    font-weight: 800;
}


.ips-special-heading strong:last-child {

    color: #00aeeF;
}


/* =========================================================
   YEAR BOX
   ========================================================= */

.ips-special-year-box {

    position: relative;

    z-index: 2;

    display: inline-flex;

    padding: 8px 14px;

    margin-bottom: 20px;

    background: #697277;

    color: #fff;

    font-size: 19px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   SMALL MAGAZINE
   ========================================================= */

.ips-special-magazine {

    position: relative;

    z-index: 2;

    width: 125px;

    height: 150px;

    margin: 0 auto 18px;

    padding: 5px;

    background: #fff;

    box-shadow:
        0 12px 25px
        rgba(0,50,80,.15);

    transform:
        rotate(-2deg);

    transition:
        transform .4s ease;
}


.ips-special-card:hover
.ips-special-magazine {

    transform:
        rotate(1deg)
        translateY(-3px);
}


.ips-special-magazine-image {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 12px;

    background:

        linear-gradient(
            145deg,
            #08b2df,
            #047da6 60%,
            #083650
        );

    color: #fff;
}


.ips-special-magazine-shade {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(237,28,36,.50),
            transparent 25%
        );

    pointer-events: none;
}


.ips-special-magazine-image span,
.ips-special-magazine-image strong,
.ips-special-magazine-image small {

    position: relative;

    z-index: 2;
}


.ips-special-magazine-image span {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.ips-special-magazine-image strong {

    font-size: 19px;

    line-height: .95;

    margin-top: 4px;
}


.ips-special-magazine-image small {

    font-size: 7px;

    margin-top: 5px;

    letter-spacing: 1px;
}


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

.ips-special-text {

    position: relative;

    z-index: 2;

    margin: 0 auto 20px;

    max-width: 220px;

    text-align: center;

    color: #71818e;

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   SPECIAL BUTTON
   ========================================================= */

.ips-special-btn {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width: 100%;

    padding: 11px 15px;

    border-radius: 7px;

    background: var(--red);

    color: #fff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

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


.ips-special-btn span {

    font-size: 15px;
}


.ips-special-btn:hover {

    color: #fff;

    transform: translateY(-2px);

    box-shadow:
        0 9px 22px
        rgba(237,28,36,.20);
}