/* ======================================================
   MyDogNI Content Pages
   ====================================================== */

body.page-id-24 #main-content,
body.page-id-22 #main-content,
body.page-id-23 #main-content{

    background:#040b13 !important;
}


body.page-id-24 .entry-title,
body.page-id-22 .entry-title,
body.page-id-23 .entry-title{

    display:none !important;
}


body.page-id-24 #main-content>.container,
body.page-id-22 #main-content>.container,
body.page-id-23 #main-content>.container{

    width:100% !important;
    max-width:none !important;

    padding:0 !important;
}


body.page-id-24 #main-content .container::before,
body.page-id-22 #main-content .container::before,
body.page-id-23 #main-content .container::before{

    display:none !important;
}


body.page-id-24 #left-area,
body.page-id-22 #left-area,
body.page-id-23 #left-area{

    width:100% !important;

    float:none !important;

    padding:0 !important;
}


.mdni-content-shell{

    --text:#f5fbff;
    --muted:#a9bfd0;
    --cyan:#46d5ff;

    width:100vw;

    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);

    color:var(--text);

    overflow:hidden;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(24,145,235,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(46,208,255,.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #040a12,
            #071522 48%,
            #040c15
        );
}


.mdni-content-wrap{

    width:min(1180px,92%);

    margin:auto;
}


.mdni-content-eyebrow{

    display:inline-flex;

    padding:8px 13px;

    border-radius:999px;

    color:#83e4ff;

    border:
        1px solid rgba(64,196,243,.46);

    background:
        linear-gradient(
            180deg,
            rgba(39,165,226,.17),
            rgba(9,67,103,.12)
        );

    font-size:.73rem;

    font-weight:950;

    letter-spacing:.11em;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10);
}


.mdni-about-hero{

    padding:95px 0 90px;
}


.mdni-about-hero h1{

    max-width:950px;

    margin:20px 0;

    color:#fff;

    font-size:
        clamp(3.5rem,7vw,6.5rem);

    line-height:.98;

    letter-spacing:-.055em;

    font-weight:950;
}


.mdni-about-hero h1 span,
.mdni-section-heading h2 span,
.mdni-about-product-copy h2 span,
.mdni-about-quote-card h2 span{

    color:#4bd5ff;
}


.mdni-about-lead{

    max-width:760px;

    color:#afc4d4;

    font-size:1.17rem;

    line-height:1.7;
}


.mdni-about-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:28px;
}


.mdni-content-btn{

    position:relative;

    display:inline-flex;

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

    min-height:52px;

    padding:14px 23px;

    border-radius:14px;

    text-decoration:none !important;

    font-weight:900;

    overflow:hidden;

    transition:
        transform .18s ease,
        filter .18s ease;
}


.mdni-content-btn:hover{

    transform:translateY(-2px);

    filter:brightness(1.10);
}


.mdni-content-primary{

    color:#fff !important;

    border:1px solid #70ddff;

    background:
        linear-gradient(
            180deg,
            #3ecbff,
            #168ee8 50%,
            #085bb4
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 0 15px rgba(37,180,244,.25),
        0 9px 22px rgba(0,0,0,.28);
}


.mdni-content-secondary{

    color:#edf9ff !important;

    border:1px solid #416a86;

    background:
        linear-gradient(
            180deg,
            #193b55,
            #0f283d 52%,
            #081a29
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.13),
        0 8px 18px rgba(0,0,0,.23);
}


.mdni-content-section{

    padding:88px 0;
}


.mdni-about-dark{

    background:
        linear-gradient(
            180deg,
            rgba(3,10,17,.18),
            rgba(13,44,65,.12)
        );
}


.mdni-about-story-grid,
.mdni-about-product-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:42px;

    align-items:center;
}


.mdni-about-story-photo{

    min-height:500px;

    overflow:hidden;

    border-radius:23px;

    border:1px solid #39799b;

    background:#071725;

    box-shadow:
        0 25px 55px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.07);
}


.mdni-story-photo{

    width:100%;
    height:100%;

    min-height:500px;

    object-fit:cover;
}


.mdni-story-placeholder{

    min-height:500px;

    display:flex;

    flex-direction:column;

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

    text-align:center;

    gap:10px;

    padding:30px;

    background:
        radial-gradient(
            circle at center,
            rgba(37,178,239,.14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #102b42,
            #071521
        );
}


.mdni-story-placeholder-icon{

    display:flex;

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

    width:78px;
    height:78px;

    border-radius:20px;

    border:1px solid #4acaf4;

    background:
        linear-gradient(
            180deg,
            #1c7baa,
            #0b4568
        );

    font-size:32px;

    box-shadow:
        0 0 18px rgba(53,196,245,.18);
}


.mdni-story-placeholder strong{

    color:#fff;

    font-size:1.35rem;
}


.mdni-story-placeholder span{

    color:#8daabd;
}


.mdni-about-story-copy h2,
.mdni-about-product-copy h2,
.mdni-section-heading h2,
.mdni-about-final-card h2{

    margin:15px 0 17px;

    color:#fff;

    font-size:
        clamp(2.5rem,4.5vw,4.2rem);

    line-height:1.05;

    letter-spacing:-.045em;

    font-weight:950;
}


.mdni-about-story-copy p,
.mdni-about-product-copy p{

    color:#a9bfd0;

    font-size:1.03rem;

    line-height:1.72;
}


.mdni-section-heading{

    max-width:900px;

    margin-bottom:38px;
}


.mdni-about-cards{

    display:grid;

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

    gap:20px;
}


.mdni-about-cards article{

    padding:30px;

    border-radius:19px;

    border:1px solid #284c66;

    background:
        linear-gradient(
            145deg,
            #112d45,
            #071624
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 16px 38px rgba(0,0,0,.25);
}


.mdni-about-card-icon{

    display:flex;

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

    width:50px;
    height:50px;

    margin-bottom:18px;

    border-radius:14px;

    border:1px solid #51ccef;

    background:
        linear-gradient(
            180deg,
            #218ec9,
            #0a4a70
        );

    font-size:22px;
}


.mdni-about-cards h3{

    margin:0 0 9px;

    color:#fff;

    font-size:1.25rem;

    font-weight:900;
}


.mdni-about-cards p{

    margin:0;

    color:#9db6c7;

    line-height:1.6;
}


.mdni-about-dashboard{

    overflow:hidden;

    display:block;

    border-radius:22px;

    border:1px solid #39799c;

    background:#06111c;

    text-decoration:none !important;

    box-shadow:
        0 26px 58px rgba(0,0,0,.40),
        0 0 25px rgba(37,172,234,.12);

    transition:
        transform .18s ease,
        border-color .18s ease;
}


.mdni-about-dashboard:hover{

    transform:translateY(-4px);

    border-color:#57d5ff;
}


.mdni-about-dashboard img{

    width:100%;

    display:block;

    max-height:520px;

    object-fit:cover;

    object-position:top center;
}


.mdni-about-dashboard span{

    display:block;

    padding:15px 19px;

    color:#68ddff;

    background:#081927;

    font-weight:900;
}


.mdni-about-quote{

    padding:20px 0 90px;
}


.mdni-about-quote-card{

    position:relative;

    padding:48px;

    border-radius:24px;

    border:1px solid #39799b;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(56,201,255,.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #10304a,
            #071723
        );

    box-shadow:
        0 24px 55px rgba(0,0,0,.30);
}


.mdni-quote-mark{

    position:absolute;

    right:28px;
    top:7px;

    color:#2ec6f6;

    font-size:8rem;

    line-height:1;

    opacity:.20;

    font-weight:900;
}


.mdni-about-quote-card h2{

    max-width:850px;

    margin:0 0 14px;

    color:#fff;

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

    line-height:1.06;

    letter-spacing:-.045em;

    font-weight:950;
}


.mdni-about-quote-card p{

    margin:0;

    color:#a7c0d1;

    font-size:1.07rem;
}


.mdni-about-final{

    padding:0 0 90px;
}


.mdni-about-final-card{

    display:flex;

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

    gap:35px;

    padding:38px 42px;

    border-radius:22px;

    border:1px solid #347695;

    background:
        linear-gradient(
            135deg,
            #102c43,
            #071723
        );
}


@media(max-width:900px){

    .mdni-about-story-grid,
    .mdni-about-product-grid{

        grid-template-columns:1fr;
    }


    .mdni-about-cards{

        grid-template-columns:1fr;
    }


    .mdni-about-final-card{

        display:block;
    }
}


@media(max-width:650px){

    .mdni-about-hero{

        padding:62px 0;
    }


    .mdni-content-section{

        padding:60px 0;
    }


    .mdni-about-actions{

        flex-direction:column;
    }


    .mdni-content-btn{

        width:100%;
    }


    .mdni-about-story-photo,
    .mdni-story-photo,
    .mdni-story-placeholder{

        min-height:360px;
    }


    .mdni-about-quote-card{

        padding:30px 24px;
    }
}



/* ======================================================
   MyDogNI Adventures Page
   ====================================================== */

.mdni-adventures-hero{

    padding:90px 0 95px;
}


.mdni-adventures-hero-grid{

    display:grid;

    grid-template-columns:
        .92fr 1.08fr;

    gap:52px;

    align-items:center;
}


.mdni-adventures-hero h1{

    margin:18px 0 20px;

    color:#fff;

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

    line-height:.98;

    letter-spacing:-.055em;

    font-weight:950;
}


.mdni-adventures-hero h1 span{

    color:#48d4ff;
}


.mdni-adventures-intro{

    max-width:650px;

    color:#8faabd;

    line-height:1.7;

    font-size:1.02rem;
}


.mdni-adventures-hero-photo{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    border:1px solid #3b8ab0;

    background:#071522;

    box-shadow:
        0 0 30px rgba(35,174,239,.14),
        0 28px 65px rgba(0,0,0,.43),
        inset 0 1px 0 rgba(255,255,255,.08);
}


.mdni-adventures-hero-photo img{

    display:block;

    width:100%;

    aspect-ratio:1.12 / 1;

    object-fit:cover;

    object-position:center;
}


.mdni-adventure-photo-badge{

    position:absolute;

    left:16px;
    bottom:16px;

    padding:8px 12px;

    border-radius:999px;

    color:#e9fbff;

    border:1px solid #55d4ff;

    background:
        linear-gradient(
            180deg,
            rgba(18,107,154,.92),
            rgba(6,58,91,.94)
        );

    font-size:.70rem;

    font-weight:950;

    letter-spacing:.05em;

    box-shadow:
        0 0 14px rgba(49,197,247,.22);
}


.mdni-adventure-card-grid{

    display:grid;

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

    gap:18px;
}


.mdni-adventure-card-grid article{

    padding:27px;

    border-radius:19px;

    border:1px solid #284c66;

    background:
        linear-gradient(
            145deg,
            #112d44,
            #071624
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 15px 36px rgba(0,0,0,.24);
}


.mdni-adventure-card-grid h3{

    margin:0 0 9px;

    color:#fff;

    font-size:1.18rem;

    font-weight:900;
}


.mdni-adventure-card-grid p{

    margin:0;

    color:#9eb7c8;

    line-height:1.6;
}


.mdni-adventure-road-grid{

    display:grid;

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

    gap:50px;

    align-items:center;
}


.mdni-adventure-road-copy h2{

    margin:15px 0 18px;

    color:#fff;

    font-size:
        clamp(2.5rem,4.5vw,4.2rem);

    line-height:1.05;

    letter-spacing:-.045em;

    font-weight:950;
}


.mdni-adventure-road-copy p{

    color:#a8bfd0;

    line-height:1.72;

    font-size:1.03rem;
}


.mdni-adventure-stat-panel{

    display:grid;

    gap:14px;
}


.mdni-adventure-stat{

    padding:23px 25px;

    border-radius:17px;

    border:1px solid #2c5872;

    background:
        linear-gradient(
            145deg,
            #102b42,
            #071624
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06);
}


.mdni-adventure-stat strong{

    display:block;

    color:#52d8ff;

    font-size:2rem;

    font-weight:950;

    line-height:1;
}


.mdni-adventure-stat span{

    display:block;

    margin-top:8px;

    color:#a5bccd;

    font-weight:750;
}


.mdni-adventure-streambox{

    padding-top:30px;
}


.mdni-adventure-stream-card{

    display:flex;

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

    gap:45px;

    padding:45px;

    border-radius:24px;

    border:1px solid #397d9f;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(52,202,255,.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #10304a,
            #071724
        );

    box-shadow:
        0 25px 55px rgba(0,0,0,.31);
}


.mdni-adventure-stream-card > div:first-child{

    max-width:730px;
}


.mdni-adventure-stream-card h2{

    margin:15px 0;

    color:#fff;

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

    line-height:1.05;

    letter-spacing:-.045em;

    font-weight:950;
}


.mdni-adventure-stream-card p{

    color:#a6bdcd;

    line-height:1.66;
}


.mdni-adventure-stream-actions{

    display:flex;

    flex-direction:column;

    gap:10px;

    min-width:240px;
}


.mdni-adventures-section-text{

    color:#a6bdcd;

    line-height:1.65;

    font-size:1.03rem;
}


.mdni-adventure-mini-grid{

    display:grid;

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

    gap:20px;
}


.mdni-adventure-mini-grid article{

    padding:29px;

    border-radius:18px;

    border:1px solid #294e68;

    background:
        linear-gradient(
            145deg,
            #102b42,
            #071522
        );
}


.mdni-adventure-mini-grid span{

    color:#48d4ff;

    font-size:2.3rem;

    font-weight:950;

    opacity:.75;
}


.mdni-adventure-mini-grid h3{

    margin:12px 0 8px;

    color:#fff;

    font-size:1.25rem;

    font-weight:900;
}


.mdni-adventure-mini-grid p{

    margin:0;

    color:#9eb5c6;

    line-height:1.58;
}


@media(max-width:1000px){

    .mdni-adventures-hero-grid,
    .mdni-adventure-road-grid{

        grid-template-columns:1fr;
    }


    .mdni-adventure-card-grid{

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


    .mdni-adventure-stream-card{

        display:block;
    }


    .mdni-adventure-stream-actions{

        margin-top:28px;

        flex-direction:row;

        flex-wrap:wrap;
    }
}


@media(max-width:650px){

    .mdni-adventures-hero{

        padding:60px 0;
    }


    .mdni-adventure-card-grid,
    .mdni-adventure-mini-grid{

        grid-template-columns:1fr;
    }


    .mdni-adventure-stream-card{

        padding:28px 24px;
    }


    .mdni-adventure-stream-actions{

        flex-direction:column;
    }
}



/* ======================================================
   MyDogNI Videos Page
   ====================================================== */


.mdni-videos-hero{

    padding:92px 0 82px;
}


.mdni-videos-hero h1{

    max-width:980px;

    margin:19px 0;

    color:#fff;

    font-size:
        clamp(3.4rem,7vw,6.3rem);

    line-height:.98;

    letter-spacing:-.055em;

    font-weight:950;
}


.mdni-videos-hero h1 span{

    display:block;

    color:#4bd5ff;
}


.mdni-videos-lead{

    max-width:760px;

    color:#aec4d3;

    font-size:1.15rem;

    line-height:1.70;
}


.mdni-youtube-btn{

    color:#fff !important;

    border:
        1px solid #ff6b70 !important;

    background:
        linear-gradient(
            180deg,
            #ff4a51,
            #d9141d 52%,
            #991016
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 0 15px rgba(255,46,54,.20),
        0 9px 22px rgba(0,0,0,.28) !important;
}


.mdni-videos-player-section{

    padding-top:35px;
}


.mdni-videos-section-copy{

    color:#a6bdcd;

    font-size:1.03rem;

    line-height:1.65;
}


.mdni-youtube-player{

    overflow:hidden;

    border-radius:23px;

    border:
        1px solid #397e9f;

    background:#050e17;

    box-shadow:
        0 0 30px rgba(36,173,236,.13),
        0 28px 65px rgba(0,0,0,.43);
}


.mdni-youtube-bar{

    display:flex;

    align-items:center;

    gap:12px;

    min-height:64px;

    padding:10px 15px;

    border-bottom:
        1px solid #244a62;

    background:
        linear-gradient(
            180deg,
            #122f47,
            #091c2c
        );
}


.mdni-youtube-logo{

    display:flex;

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

    width:42px;
    height:42px;

    flex:0 0 42px;

    border-radius:13px;

    color:#fff;

    background:
        linear-gradient(
            180deg,
            #ff4850,
            #ba1018
        );

    border:
        1px solid #ff7479;

    box-shadow:
        0 0 12px rgba(255,51,59,.18);

    font-size:17px;

    font-weight:950;
}


.mdni-youtube-bar strong{

    display:block;

    color:#fff;

    font-size:.83rem;

    font-weight:950;

    letter-spacing:.05em;
}


.mdni-youtube-bar span{

    color:#8faabd;

    font-size:.72rem;
}


.mdni-youtube-live-dot{

    margin-left:auto;

    padding:6px 9px;

    border-radius:999px;

    border:
        1px solid rgba(55,225,133,.48);

    color:#83ffb6;

    background:
        rgba(31,156,88,.17);

    font-size:.65rem;

    font-weight:950;

    letter-spacing:.06em;

    box-shadow:
        0 0 10px rgba(47,218,124,.10);
}


.mdni-video-frame{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    background:#000;
}


.mdni-video-frame iframe{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border:0;
}


.mdni-video-card-grid{

    display:grid;

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

    gap:18px;
}


.mdni-video-card-grid article{

    padding:28px;

    border-radius:19px;

    border:
        1px solid #294f68;

    background:
        linear-gradient(
            145deg,
            #112d44,
            #071624
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 15px 36px rgba(0,0,0,.24);
}


.mdni-video-card-icon{

    display:flex;

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

    width:50px;
    height:50px;

    margin-bottom:17px;

    border-radius:14px;

    border:
        1px solid #50cef3;

    background:
        linear-gradient(
            180deg,
            #208dc8,
            #0a4b72
        );

    font-size:22px;
}


.mdni-video-card-grid h3{

    margin:0 0 9px;

    color:#fff;

    font-size:1.18rem;

    font-weight:900;
}


.mdni-video-card-grid p{

    margin:0;

    color:#9fb7c8;

    line-height:1.6;
}


.mdni-video-vegas-grid{

    display:grid;

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

    gap:50px;

    align-items:center;
}


.mdni-video-vegas-grid h2{

    margin:15px 0 18px;

    color:#fff;

    font-size:
        clamp(2.5rem,4.5vw,4.2rem);

    line-height:1.05;

    letter-spacing:-.045em;

    font-weight:950;
}


.mdni-video-vegas-grid p{

    color:#a7bdcd;

    line-height:1.70;

    font-size:1.03rem;
}


.mdni-vegas-callout{

    padding:42px;

    border-radius:23px;

    border:
        1px solid #3a819f;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(59,204,255,.13),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #12334d,
            #071724
        );

    box-shadow:
        0 23px 50px rgba(0,0,0,.30);
}


.mdni-vegas-callout span{

    display:block;

    color:#54d8ff;

    font-size:
        clamp(2.5rem,5vw,4.8rem);

    line-height:.95;

    font-weight:950;

    letter-spacing:-.05em;
}


.mdni-vegas-callout strong{

    display:block;

    margin-top:7px;

    color:#fff;

    font-size:1.2rem;

    letter-spacing:.12em;
}


.mdni-vegas-callout p{

    margin:
        20px 0 0;

    color:#91aabd;
}


.mdni-video-streambox-section{

    padding-top:30px;
}


.mdni-video-streambox-card{

    display:flex;

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

    gap:40px;

    padding:44px;

    border-radius:24px;

    border:
        1px solid #397c9e;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(54,204,255,.13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #10304a,
            #071724
        );

    box-shadow:
        0 24px 55px rgba(0,0,0,.30);
}


.mdni-video-streambox-card > div:first-child{

    max-width:720px;
}


.mdni-video-streambox-card h2{

    margin:15px 0;

    color:#fff;

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

    line-height:1.05;

    letter-spacing:-.045em;

    font-weight:950;
}


.mdni-video-streambox-card h2 span{

    color:#4bd5ff;
}


.mdni-video-streambox-card p{

    color:#a5bdcd;

    line-height:1.68;
}


.mdni-video-streambox-actions{

    min-width:245px;

    display:flex;

    flex-direction:column;

    gap:10px;
}


@media(max-width:1000px){

    .mdni-video-card-grid{

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


    .mdni-video-vegas-grid{

        grid-template-columns:1fr;
    }


    .mdni-video-streambox-card{

        display:block;
    }


    .mdni-video-streambox-actions{

        margin-top:28px;

        flex-direction:row;

        flex-wrap:wrap;
    }
}


@media(max-width:650px){

    .mdni-videos-hero{

        padding:60px 0;
    }


    .mdni-video-card-grid{

        grid-template-columns:1fr;
    }


    .mdni-video-streambox-card{

        padding:28px 24px;
    }


    .mdni-video-streambox-actions{

        flex-direction:column;
    }


    .mdni-vegas-callout{

        padding:30px 24px;
    }
}