/* ============================================================
   MDN GENERAL CONTRACTOR LLC
   SERVICE DETAIL TEMPLATE
   CONSTRUCTION & REPAIR

   SIDEBAR:
   - Desktop: follows scroll
   - Stops at end of service content
   - Tablet/Mobile: collapsible navigation
============================================================ */


/* ============================================================
   VARIABLES
============================================================ */

:root{

    --mdnsd-navy-1000:#01050d;
    --mdnsd-navy-950:#020916;
    --mdnsd-navy-900:#031127;
    --mdnsd-navy-850:#061a38;
    --mdnsd-navy-800:#08234b;

    --mdnsd-red:#d80b20;
    --mdnsd-red-dark:#a20718;
    --mdnsd-red-bright:#ff1834;
    --mdnsd-red-soft:#ff5267;

    --mdnsd-blue:#2478ff;
    --mdnsd-blue-dark:#1255b8;

    --mdnsd-white:#ffffff;

    --mdnsd-light:#f7f9fc;
    --mdnsd-light-2:#eef3f8;

    --mdnsd-title:#061a38;
    --mdnsd-text:#46566b;
    --mdnsd-muted:#7e8d9f;

    --mdnsd-border:#dde5ee;

    --mdnsd-container:1480px;

    /*
     * JS changes this value according to
     * the real current header height.
     */
    --mdn-service-sticky-top:110px;

}


/* ============================================================
   RESET
============================================================ */

.mdn-service-hero,
.mdn-service-hero *,
.mdn-service-detail,
.mdn-service-detail *{
    box-sizing:border-box;
}


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

.mdn-service-hero{

    width:100%;

    min-height:590px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    padding:85px 0 95px;

    color:#ffffff;

    background:
        var(--mdnsd-navy-950);

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

    font-size:14px;

}


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

.mdn-service-hero__background{

    position:absolute;

    inset:0;

    background-image:
        url("https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=2200&q=90");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.035);

}


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

.mdn-service-hero__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            90deg,
            rgba(1,5,13,.98) 0%,
            rgba(2,9,22,.95) 32%,
            rgba(3,17,39,.79) 64%,
            rgba(3,17,39,.55) 100%
        ),

        linear-gradient(
            0deg,
            rgba(1,5,13,.91),
            rgba(1,5,13,.12)
        );

}


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

.mdn-service-hero__grid{

    position:absolute;

    inset:0;

    opacity:.22;

    pointer-events:none;

    background-image:

        linear-gradient(
            rgba(255,255,255,.026) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.026) 1px,
            transparent 1px
        );

    background-size:58px 58px;

}


/* ============================================================
   TOP ACCENT
============================================================ */

.mdn-service-hero::before{

    content:"";

    width:100%;
    height:3px;

    position:absolute;

    z-index:10;

    left:0;
    top:0;

    background:
        linear-gradient(
            90deg,
            var(--mdnsd-blue),
            var(--mdnsd-red-bright) 48%,
            transparent 90%
        );

}


/* ============================================================
   DIAGONAL LINE
============================================================ */

.mdn-service-hero::after{

    content:"";

    width:2px;
    height:850px;

    position:absolute;

    z-index:4;

    top:-270px;
    right:17%;

    transform:rotate(27deg);

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,24,52,.72),
            transparent
        );

    box-shadow:
        0 0 20px rgba(255,24,52,.23);

}


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

.mdn-service-hero__glow{

    position:absolute;

    border-radius:50%;

    filter:blur(28px);

    pointer-events:none;

}


.mdn-service-hero__glow--red{

    width:560px;
    height:560px;

    top:-320px;
    right:-280px;

    background:
        radial-gradient(
            circle,
            rgba(255,24,52,.30),
            transparent 68%
        );

}


.mdn-service-hero__glow--blue{

    width:500px;
    height:500px;

    left:-300px;
    bottom:-340px;

    background:
        radial-gradient(
            circle,
            rgba(36,120,255,.19),
            transparent 68%
        );

}


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

.mdn-service-hero__container,
.mdn-service-detail__container{

    width:
        min(
            var(--mdnsd-container),
            calc(100% - 70px)
        );

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

}


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

.mdn-service-hero__container{

    position:relative;

    z-index:6;

}


/* ============================================================
   BREADCRUMB
============================================================ */

.mdn-service-hero__breadcrumb{

    margin-bottom:53px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:11px;

    color:#9ca9b9;

    font-size:14px;

}


.mdn-service-hero__breadcrumb a{

    color:#ffffff;

    text-decoration:none;

    font-weight:700;

    transition:color .25s ease;

}


.mdn-service-hero__breadcrumb a:hover{

    color:
        var(--mdnsd-red-soft);

}


.mdn-service-hero__breadcrumb i{

    color:
        var(--mdnsd-red-bright);

    font-size:9px;

}


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

.mdn-service-hero__layout{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:70px;

}


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

.mdn-service-hero__content{

    max-width:860px;

}


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

.mdn-service-hero__eyebrow{

    margin-bottom:17px;

    display:flex;

    align-items:center;

    gap:12px;

    color:
        var(--mdnsd-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.09em;

}


.mdn-service-hero__eyebrow > span{

    width:44px;
    height:2px;

    position:relative;

    background:
        var(--mdnsd-red-bright);

}


.mdn-service-hero__eyebrow > span::after{

    content:"";

    width:7px;
    height:7px;

    position:absolute;

    top:50%;
    right:0;

    transform:translateY(-50%);

    border-radius:50%;

    background:
        var(--mdnsd-red-bright);

}


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

.mdn-service-hero h1{

    margin:0 0 23px;

    color:#ffffff;

    font-size:
        clamp(
            53px,
            5.5vw,
            84px
        );

    line-height:.96;

    letter-spacing:-.055em;

    font-weight:800;

}


.mdn-service-hero h1 span{

    display:block;

    color:
        var(--mdnsd-red-bright);

}


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

.mdn-service-hero__content > p{

    max-width:710px;

    margin:0 0 28px;

    padding-left:19px;

    border-left:
        3px solid var(--mdnsd-red-bright);

    color:#c4cedb;

    font-size:16px;

    line-height:1.8;

    text-align:justify;

}


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

.mdn-service-hero__actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

}


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

.mdn-service-hero__button{

    min-height:57px;

    padding:0 22px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:13px;

    text-decoration:none;

    font-size:14px;

    font-weight:800;

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

}


.mdn-service-hero__button:hover{

    transform:translateY(-3px);

}


.mdn-service-hero__button--primary{

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #ff5267,
            #ff1834,
            #d80b20
        );

    box-shadow:
        0 16px 38px rgba(255,24,52,.25);

}


.mdn-service-hero__button--secondary{

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

    color:#ffffff;

    background:
        rgba(2,9,22,.56);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

}


/* ============================================================
   HERO SERVICE CARD
============================================================ */

.mdn-service-hero__card{

    min-width:285px;

    padding:21px;

    display:grid;

    grid-template-columns:
        55px 1fr auto;

    align-items:center;

    gap:13px;

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

    border-radius:17px;

    background:
        rgba(3,17,39,.72);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    box-shadow:
        0 25px 65px rgba(0,0,0,.28);

}


.mdn-service-hero__card-icon{

    width:55px;
    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsd-red-soft),
            var(--mdnsd-red)
        );

    font-size:17px;

}


.mdn-service-hero__card > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mdn-service-hero__card small{

    color:
        var(--mdnsd-red-soft);

    font-size:14px;

    font-weight:800;

}


.mdn-service-hero__card strong{

    margin-top:4px;

    color:#ffffff;

    font-size:14px;

}


.mdn-service-hero__card-number{

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

    font-size:14px;

    font-weight:800;

}


/* ============================================================
   MAIN SERVICE DETAIL
============================================================ */

.mdn-service-detail{

    width:100%;

    position:relative;

    /*
     * CRITICAL:
     * Do not use overflow:hidden here.
     */
    overflow:visible !important;

    padding:110px 0 125px;

    color:
        var(--mdnsd-text);

    background:
        #f7f9fc;

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

    font-size:14px;

}


/* ============================================================
   MAIN GRID
============================================================ */

.mdn-service-detail__container{

    position:relative;

    display:grid;

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

    /*
     * CRITICAL:
     * sidebar column receives the full height
     * of the grid row.
     */
    align-items:stretch;

    gap:
        clamp(
            45px,
            5.5vw,
            85px
        );

    overflow:visible !important;

}


/* ============================================================
   SIDEBAR COLUMN
============================================================ */

.mdn-service-detail__sidebar{

    min-width:0;

    position:relative;

    align-self:stretch;

    overflow:visible !important;

}


/* ============================================================
   SIDEBAR BASE
============================================================ */

.mdn-service-detail__sidebar-wrap{

    width:100%;

    position:relative;

    top:auto;
    left:auto;
    bottom:auto;

    padding:24px;

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

    border-radius:20px;

    color:
        var(--mdnsd-text);

    background:#ffffff;

    box-shadow:
        0 20px 55px rgba(6,26,56,.085);

    z-index:40;

}


/* ============================================================
   SIDEBAR FIXED
   THIS IS WHAT FOLLOWS THE SCROLL
============================================================ */

.mdn-service-detail__sidebar-wrap.is-fixed{

    position:fixed;

    z-index:900;

    /*
     * JS sets:
     * top
     * left
     * width
     */

    max-height:
        calc(
            100vh -
            var(--mdn-service-sticky-top) -
            18px
        );

    overflow-y:auto;
    overflow-x:hidden;

    overscroll-behavior:contain;

    scrollbar-width:thin;

    scrollbar-color:
        #cbd4df transparent;

}


/* ============================================================
   SIDEBAR AT BOTTOM
============================================================ */

.mdn-service-detail__sidebar-wrap.is-bottom{

    position:absolute;

    top:auto !important;

    left:0 !important;
    right:0;

    bottom:0;

    width:100% !important;

    max-height:
        calc(
            100vh -
            var(--mdn-service-sticky-top) -
            18px
        );

    overflow-y:auto;
    overflow-x:hidden;

}


/* ============================================================
   SIDEBAR SCROLLBAR
============================================================ */

.mdn-service-detail__sidebar-wrap.is-fixed::-webkit-scrollbar,
.mdn-service-detail__sidebar-wrap.is-bottom::-webkit-scrollbar{

    width:5px;

}


.mdn-service-detail__sidebar-wrap.is-fixed::-webkit-scrollbar-track,
.mdn-service-detail__sidebar-wrap.is-bottom::-webkit-scrollbar-track{

    background:transparent;

}


.mdn-service-detail__sidebar-wrap.is-fixed::-webkit-scrollbar-thumb,
.mdn-service-detail__sidebar-wrap.is-bottom::-webkit-scrollbar-thumb{

    border-radius:20px;

    background:#cbd4df;

}


/* ============================================================
   SIDEBAR HEADER
============================================================ */

.mdn-service-detail__sidebar-head{

    padding-bottom:19px;

    border-bottom:
        1px solid #e7edf3;

}


.mdn-service-detail__sidebar-head > span{

    display:block;

    margin-bottom:5px;

    color:
        var(--mdnsd-red);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


.mdn-service-detail__sidebar-head h2{

    margin:0 0 9px;

    color:
        var(--mdnsd-title);

    font-size:28px;

    line-height:1.12;

    font-weight:800;

}


.mdn-service-detail__sidebar-head p{

    margin:0;

    color:
        var(--mdnsd-muted);

    font-size:14px;

    line-height:1.65;

}


/* ============================================================
   MOBILE SIDEBAR TOGGLE
============================================================ */

.mdn-service-detail__toggle{

    width:100%;

    min-height:56px;

    margin-top:17px;

    padding:0 15px;

    display:none;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border:
        1px solid #dce4ed;

    border-radius:12px;

    color:
        var(--mdnsd-title);

    background:
        #f7f9fc;

    cursor:pointer;

    font-family:inherit;

    font-size:14px;

    font-weight:800;

}


.mdn-service-detail__toggle > span{

    display:flex;

    align-items:center;

    gap:10px;

}


.mdn-service-detail__toggle > span i{

    color:
        var(--mdnsd-red);

}


.mdn-service-detail__toggle > i{

    transition:
        transform .3s ease;

}


.mdn-service-detail__toggle.is-open > i{

    transform:
        rotate(180deg);

}


/* ============================================================
   SIDEBAR NAV
============================================================ */

.mdn-service-detail__nav{

    margin-top:15px;

    display:flex;

    flex-direction:column;

    gap:3px;

}


/* ============================================================
   SIDEBAR SERVICE LINK
============================================================ */

.mdn-service-detail__nav > a{

    min-height:54px;

    padding:7px 8px;

    display:grid;

    grid-template-columns:
        38px minmax(0,1fr) 18px;

    align-items:center;

    gap:10px;

    border:
        1px solid transparent;

    border-radius:11px;

    color:
        var(--mdnsd-text);

    background:
        transparent;

    text-decoration:none;

    transition:
        border-color .3s ease,
        background .3s ease,
        transform .3s ease;

}


.mdn-service-detail__nav > a:hover{

    transform:
        translateX(3px);

    border-color:
        #e3e9ef;

    background:
        #f7f9fc;

}


/* ============================================================
   ACTIVE SERVICE
============================================================ */

.mdn-service-detail__nav > a.is-active{

    border-color:
        rgba(216,11,32,.13);

    background:
        linear-gradient(
            90deg,
            rgba(255,24,52,.08),
            rgba(36,120,255,.025)
        );

}


/* ============================================================
   SERVICE ICON
============================================================ */

.mdn-service-detail__nav > a > span{

    width:38px;
    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid rgba(216,11,32,.10);

    border-radius:10px;

    color:
        var(--mdnsd-red);

    background:
        #fff1f3;

    font-size:14px;

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

}


.mdn-service-detail__nav > a.is-active > span{

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsd-red-soft),
            var(--mdnsd-red)
        );

    box-shadow:
        0 8px 20px rgba(216,11,32,.16);

}


/* ============================================================
   SERVICE TEXT
============================================================ */

.mdn-service-detail__nav > a > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mdn-service-detail__nav small{

    color:
        var(--mdnsd-muted);

    font-size:14px;

    line-height:1;

}


.mdn-service-detail__nav strong{

    margin-top:3px;

    overflow:hidden;

    color:
        var(--mdnsd-title);

    font-size:14px;

    font-weight:800;

    line-height:1.25;

    white-space:nowrap;

    text-overflow:ellipsis;

}


.mdn-service-detail__nav > a > i{

    color:#a2adba;

    font-size:11px;

    transition:
        color .3s ease,
        transform .3s ease;

}


.mdn-service-detail__nav > a:hover > i{

    color:
        var(--mdnsd-red);

    transform:
        translateX(2px);

}


.mdn-service-detail__nav > a.is-active > i{

    color:
        var(--mdnsd-red);

}


/* ============================================================
   SIDEBAR CONTACT
============================================================ */

.mdn-service-detail__contact{

    margin-top:18px;

    padding:15px;

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

    border-radius:14px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.075),
            transparent 45%
        ),

        #f8fafd;

}


/* ============================================================
   CONTACT TOP
============================================================ */

.mdn-service-detail__contact-top{

    display:flex;

    align-items:center;

    gap:10px;

}


.mdn-service-detail__contact-top > span{

    width:43px;
    height:43px;

    flex:0 0 43px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsd-blue),
            var(--mdnsd-blue-dark)
        );

}


.mdn-service-detail__contact-top > div{

    min-width:0;

    display:flex;

    flex-direction:column;

}


.mdn-service-detail__contact-top small{

    color:
        var(--mdnsd-red);

    font-size:14px;

    font-weight:800;

}


.mdn-service-detail__contact-top strong{

    margin-top:2px;

    color:
        var(--mdnsd-title);

    font-size:14px;

}


/* ============================================================
   SIDEBAR PHONE
============================================================ */

.mdn-service-detail__contact > a{

    min-height:43px;

    margin-top:12px;

    padding:0 12px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-radius:10px;

    color:#ffffff;

    background:
        var(--mdnsd-navy-850);

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:
        background .3s ease;

}


.mdn-service-detail__contact > a:hover{

    background:
        var(--mdnsd-red);

}


.mdn-service-detail__contact-language{

    display:block;

    margin-top:9px;

    color:
        var(--mdnsd-muted);

    font-size:14px;

}


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

.mdn-service-detail__main{

    min-width:0;

}


/* ============================================================
   MAIN SERVICE IMAGE
============================================================ */

.mdn-service-detail__main-image{

    width:100%;
    height:500px;

    margin:0 0 54px;

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:
        var(--mdnsd-navy-850);

    box-shadow:
        0 25px 65px rgba(6,26,56,.14);

}


.mdn-service-detail__main-image > img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:
        transform .8s ease;

}


.mdn-service-detail__main-image:hover > img{

    transform:
        scale(1.025);

}


.mdn-service-detail__main-image-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(2,9,22,.03),
            rgba(2,9,22,.74)
        );

}


/* ============================================================
   IMAGE CAPTION
============================================================ */

.mdn-service-detail__main-image figcaption{

    min-width:265px;

    position:absolute;

    left:25px;
    bottom:25px;

    display:flex;

    align-items:center;

    gap:13px;

    padding:12px 16px 12px 12px;

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

    border-radius:14px;

    color:#ffffff;

    background:
        rgba(2,9,22,.75);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

}


.mdn-service-detail__main-image figcaption > span{

    width:47px;
    height:47px;

    flex:0 0 47px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:11px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsd-red-soft),
            var(--mdnsd-red)
        );

}


.mdn-service-detail__main-image figcaption > div{

    display:flex;

    flex-direction:column;

}


.mdn-service-detail__main-image figcaption small{

    color:
        var(--mdnsd-red-soft);

    font-size:14px;

    font-weight:800;

}


.mdn-service-detail__main-image figcaption strong{

    margin-top:3px;

    color:#ffffff;

    font-size:14px;

}


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

.mdn-service-detail__section{

    margin-bottom:70px;

}


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

.mdn-service-detail__section-eyebrow{

    margin-bottom:15px;

    display:flex;

    align-items:center;

    gap:11px;

    color:
        var(--mdnsd-red);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


.mdn-service-detail__section-eyebrow > span{

    width:40px;
    height:2px;

    background:
        var(--mdnsd-red);

}


/* ============================================================
   SECTION TITLE
============================================================ */

.mdn-service-detail__section > h2{

    max-width:800px;

    margin:0 0 23px;

    color:
        var(--mdnsd-title);

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

    line-height:1.04;

    letter-spacing:-.045em;

    font-weight:800;

}


.mdn-service-detail__section > h2 span{

    color:
        var(--mdnsd-red);

}


/* ============================================================
   SECTION PARAGRAPHS
============================================================ */

.mdn-service-detail__section > p{

    max-width:940px;

    margin:0 0 18px;

    color:
        var(--mdnsd-text);

    font-size:16px;

    line-height:1.85;

    text-align:justify;

}


.mdn-service-detail__lead{

    padding-left:20px;

    border-left:
        3px solid var(--mdnsd-red);

    color:
        var(--mdnsd-title) !important;

    font-weight:600;

}


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

.mdn-service-detail__section-head{

    margin-bottom:31px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(250px,.55fr);

    align-items:end;

    gap:50px;

}


.mdn-service-detail__section-head > div > span{

    color:
        var(--mdnsd-red);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


.mdn-service-detail__section-head h2{

    margin:7px 0 0;

    color:
        var(--mdnsd-title);

    font-size:
        clamp(
            34px,
            3.5vw,
            52px
        );

    line-height:1.05;

    letter-spacing:-.04em;

}


.mdn-service-detail__section-head h2 strong{

    color:
        var(--mdnsd-red);

}


.mdn-service-detail__section-head > p{

    margin:0;

    color:
        var(--mdnsd-text);

    font-size:15px;

    line-height:1.75;

    text-align:justify;

}


/* ============================================================
   SUMMARY GRID
============================================================ */

.mdn-service-detail__summary-grid{

    display:grid;

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

    gap:15px;

}


/* ============================================================
   SUMMARY CARD
============================================================ */

.mdn-service-summary-card{

    min-height:255px;

    padding:25px;

    position:relative;

    overflow:hidden;

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

    border-radius:17px;

    background:#ffffff;

    box-shadow:
        0 10px 30px rgba(6,26,56,.05);

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

}


.mdn-service-summary-card:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(216,11,32,.22);

    box-shadow:
        0 22px 48px rgba(6,26,56,.11);

}


/* ============================================================
   SUMMARY ICON
============================================================ */

.mdn-service-summary-card__icon{

    width:52px;
    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    color:
        var(--mdnsd-red);

    background:
        #fff0f2;

    font-size:17px;

}


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

.mdn-service-summary-card__number{

    position:absolute;

    top:25px;
    right:23px;

    color:#a0abb8;

    font-size:14px;

    font-weight:800;

}


/* ============================================================
   SUMMARY TITLE
============================================================ */

.mdn-service-summary-card h3{

    margin:24px 0 11px;

    color:
        var(--mdnsd-title);

    font-size:22px;

    line-height:1.15;

}


/* ============================================================
   SUMMARY TEXT
============================================================ */

.mdn-service-summary-card p{

    margin:0;

    color:
        var(--mdnsd-text);

    font-size:14px;

    line-height:1.72;

}


/* ============================================================
   FEATURE
============================================================ */

.mdn-service-detail__feature{

    margin-bottom:70px;

    overflow:hidden;

    display:grid;

    grid-template-columns:
        minmax(0,.9fr)
        minmax(0,1.1fr);

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

    border-radius:22px;

    background:#ffffff;

    box-shadow:
        0 20px 55px rgba(6,26,56,.08);

}


/* ============================================================
   FEATURE IMAGE
============================================================ */

.mdn-service-detail__feature-image{

    min-height:470px;

    position:relative;

    overflow:hidden;

    background:
        var(--mdnsd-light-2);

}


.mdn-service-detail__feature-image img{

    width:100%;
    height:100%;

    position:absolute;

    inset:0;

    object-fit:cover;

    object-position:center;

}


.mdn-service-detail__feature-image span{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(2,9,22,.15)
        );

}


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

.mdn-service-detail__feature-content{

    padding:55px;

    display:flex;

    justify-content:center;

    flex-direction:column;

}


.mdn-service-detail__feature-content > span{

    color:
        var(--mdnsd-red);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


.mdn-service-detail__feature-content h2{

    margin:8px 0 20px;

    color:
        var(--mdnsd-title);

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

    line-height:1.07;

    letter-spacing:-.04em;

}


.mdn-service-detail__feature-content h2 strong{

    color:
        var(--mdnsd-red);

}


.mdn-service-detail__feature-content p{

    margin:0 0 16px;

    color:
        var(--mdnsd-text);

    font-size:15px;

    line-height:1.8;

    text-align:justify;

}


.mdn-service-detail__feature-content > a{

    width:fit-content;

    min-height:54px;

    margin-top:8px;

    padding:0 20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:12px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsd-red-soft),
            var(--mdnsd-red)
        );

    text-decoration:none;

    font-size:14px;

    font-weight:800;

}


/* ============================================================
   RELATED SERVICES
============================================================ */

.mdn-service-related{

    display:grid;

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

    gap:10px;

}


.mdn-service-related > a{

    min-height:88px;

    padding:14px;

    display:flex;

    align-items:center;

    gap:12px;

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

    border-radius:13px;

    color:
        var(--mdnsd-title);

    background:#ffffff;

    text-decoration:none;

    font-size:14px;

    font-weight:800;

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

}


.mdn-service-related > a:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(216,11,32,.22);

    box-shadow:
        0 15px 30px rgba(6,26,56,.08);

}


.mdn-service-related i{

    width:43px;
    height:43px;

    flex:0 0 43px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    color:
        var(--mdnsd-red);

    background:
        #fff0f2;

}


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

.mdn-service-detail__cta{

    padding:42px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:45px;

    border-radius:22px;

    color:#ffffff;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(255,24,52,.20),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #020916,
            #061a38
        );

    box-shadow:
        0 25px 65px rgba(6,26,56,.16);

}


.mdn-service-detail__cta > div:first-child{

    max-width:690px;

}


.mdn-service-detail__cta > div:first-child > span{

    color:
        var(--mdnsd-red-soft);

    font-size:14px;

    font-weight:800;

    letter-spacing:.08em;

}


.mdn-service-detail__cta h2{

    margin:7px 0 12px;

    color:#ffffff;

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

    line-height:1.08;

}


.mdn-service-detail__cta h2 strong{

    color:
        var(--mdnsd-red-soft);

}


.mdn-service-detail__cta p{

    margin:0;

    color:#b8c4d2;

    font-size:14px;

    line-height:1.75;

}


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

.mdn-service-detail__cta-actions{

    flex:0 0 auto;

    display:flex;

    flex-direction:column;

    gap:9px;

}


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

.mdn-service-detail__cta-primary{

    min-height:55px;

    padding:0 19px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    border-radius:11px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            var(--mdnsd-red-soft),
            var(--mdnsd-red)
        );

    text-decoration:none;

    font-size:14px;

    font-weight:800;

}


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

.mdn-service-detail__cta-phone{

    min-height:60px;

    padding:8px 12px;

    display:flex;

    align-items:center;

    gap:11px;

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

    border-radius:11px;

    color:#ffffff;

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

    text-decoration:none;

}


.mdn-service-detail__cta-phone > i{

    width:40px;
    height:40px;

    flex:0 0 40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            var(--mdnsd-blue),
            var(--mdnsd-blue-dark)
        );

}


.mdn-service-detail__cta-phone > span{

    display:flex;

    flex-direction:column;

}


.mdn-service-detail__cta-phone small{

    color:#8d9bad;

    font-size:14px;

}


.mdn-service-detail__cta-phone strong{

    margin-top:2px;

    color:#ffffff;

    font-size:14px;

}


/* ============================================================
   DESKTOP SIDEBAR
============================================================ */

@media(min-width:981px){

    /*
     * Important:
     * Sidebar column occupies the complete grid row.
     */
    .mdn-service-detail__sidebar{

        height:100%;

    }

}


/* ============================================================
   MEDIUM DESKTOP
============================================================ */

@media(max-width:1200px){

    .mdn-service-hero__container,
    .mdn-service-detail__container{

        width:
            calc(100% - 46px);

    }


    .mdn-service-detail__container{

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

        gap:38px;

    }


    .mdn-service-detail__sidebar-wrap{

        padding:19px;

    }


    .mdn-service-detail__summary-grid{

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

    }


    .mdn-service-related{

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

    }


    .mdn-service-detail__feature-content{

        padding:42px;

    }

}


/* ============================================================
   TABLET
   SIDEBAR BECOMES COLLAPSIBLE
============================================================ */

@media(max-width:980px){

    .mdn-service-hero__layout{

        align-items:flex-start;

        flex-direction:column;

        gap:30px;

    }


    .mdn-service-detail{

        padding:80px 0 90px;

    }


    .mdn-service-detail__container{

        grid-template-columns:1fr;

        align-items:start;

        gap:45px;

    }


    .mdn-service-detail__sidebar{

        height:auto;

    }


    /*
     * CRITICAL:
     * Cancel fixed/absolute modes on tablet/mobile.
     */
    .mdn-service-detail__sidebar-wrap,
    .mdn-service-detail__sidebar-wrap.is-fixed,
    .mdn-service-detail__sidebar-wrap.is-bottom{

        width:100% !important;

        position:relative !important;

        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;

        max-height:none !important;

        overflow:visible !important;

    }


    /* TOGGLE */

    .mdn-service-detail__toggle{

        display:flex;

    }


    /* NAV CLOSED */

    .mdn-service-detail__nav{

        max-height:0;

        margin-top:0;

        overflow:hidden;

        opacity:0;

        visibility:hidden;

        transition:
            max-height .45s ease,
            margin-top .3s ease,
            opacity .3s ease,
            visibility .3s ease;

    }


    /* NAV OPEN */

    .mdn-service-detail__nav.is-open{

        max-height:850px;

        margin-top:14px;

        opacity:1;

        visibility:visible;

    }


    .mdn-service-detail__feature{

        grid-template-columns:1fr;

    }


    .mdn-service-detail__feature-image{

        min-height:400px;

    }


    .mdn-service-detail__cta{

        align-items:flex-start;

        flex-direction:column;

    }


    .mdn-service-detail__cta-actions{

        width:100%;

        flex-direction:row;

    }


    .mdn-service-detail__cta-primary,
    .mdn-service-detail__cta-phone{

        flex:1;

    }

}


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

@media(max-width:700px){

    .mdn-service-hero{

        min-height:540px;

        padding:65px 0 75px;

    }


    .mdn-service-hero__container,
    .mdn-service-detail__container{

        width:
            calc(100% - 30px);

    }


    .mdn-service-hero__breadcrumb{

        margin-bottom:38px;

    }


    .mdn-service-hero h1{

        font-size:
            clamp(
                42px,
                12vw,
                59px
            );

    }


    .mdn-service-hero__content > p{

        font-size:15px;

        text-align:left;

    }


    .mdn-service-hero__actions{

        width:100%;

        align-items:stretch;

        flex-direction:column;

    }


    .mdn-service-hero__button{

        width:100%;

    }


    .mdn-service-hero__card{

        width:100%;

        min-width:0;

    }


    .mdn-service-detail__main-image{

        height:360px;

        margin-bottom:45px;

        border-radius:18px;

    }


    .mdn-service-detail__section > p,
    .mdn-service-detail__section-head > p,
    .mdn-service-detail__feature-content p{

        text-align:left;

    }


    .mdn-service-detail__section-head{

        grid-template-columns:1fr;

        gap:17px;

    }


    .mdn-service-detail__summary-grid{

        grid-template-columns:1fr;

    }


    .mdn-service-detail__feature-content{

        padding:35px 25px;

    }


    .mdn-service-related{

        grid-template-columns:1fr;

    }


    .mdn-service-detail__cta{

        padding:31px 23px;

    }


    .mdn-service-detail__cta-actions{

        flex-direction:column;

    }


    .mdn-service-detail__cta-primary,
    .mdn-service-detail__cta-phone{

        width:100%;

    }

}


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

@media(max-width:480px){

    .mdn-service-hero__container,
    .mdn-service-detail__container{

        width:
            calc(100% - 24px);

    }


    .mdn-service-hero h1{

        font-size:39px;

    }


    .mdn-service-detail__sidebar-wrap{

        padding:17px;

        border-radius:16px;

    }


    .mdn-service-detail__sidebar-head h2{

        font-size:25px;

    }


    .mdn-service-detail__main-image{

        height:300px;

        border-radius:16px;

    }


    .mdn-service-detail__main-image figcaption{

        min-width:0;

        left:13px;
        right:13px;
        bottom:13px;

    }


    .mdn-service-summary-card{

        min-height:0;

        padding:21px;

    }


    .mdn-service-detail__feature-image{

        min-height:300px;

    }


    .mdn-service-detail__feature-content{

        padding:29px 20px;

    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.mdn-service-hero a:focus-visible,
.mdn-service-detail a:focus-visible,
.mdn-service-detail button:focus-visible{

    outline:
        2px solid var(--mdnsd-red-bright);

    outline-offset:4px;

}


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

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

    .mdn-service-hero *,
    .mdn-service-detail *{

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:auto !important;

    }

}