/* ==========================================================================
   hidrologi.net — Modern v2.8.1 About
   Visual language follows Engineer Profile.
   ========================================================================== */

.mv28-about-page{
    background:var(--mv28-page,#f4f7fb);
}

.mv28-about-main{
    min-height:65vh;
    padding-top:18px;
}

.mv28-about-cover{
    width:min(var(--mv28-container,1160px),calc(100% - 36px));
    margin:0 auto;
    overflow:hidden;
    border-radius:12px;
    color:#fff;
    background:
        radial-gradient(circle at 88% 8%,rgba(43,186,158,.25),transparent 30%),
        radial-gradient(circle at 12% 100%,rgba(43,155,224,.20),transparent 28%),
        linear-gradient(135deg,#07385f 0%,#07599d 60%,#0b7582 100%);
    box-shadow:0 5px 18px rgba(31,72,107,.055);
}

.mv28-about-cover-inner{
    min-height:265px;
    padding:36px 34px;
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:flex-end;
}

.mv28-about-brandmark{
    max-width:760px;
    display:grid;
    grid-template-columns:62px minmax(0,1fr);
    gap:18px;
    align-items:start;
}

.mv28-about-brand-icon{
    width:62px;
    height:62px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;
    color:#fff;
    background:rgba(255,255,255,.10);
}

.mv28-about-brand-icon svg{
    width:31px;
    height:31px;
}

.mv28-about-kicker{
    display:block;
    margin-top:2px;
    color:#bfe8f1;
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.mv28-about-cover h1{
    margin:8px 0 0;
    color:#fff;
    font-size:40px;
    line-height:1.06;
    letter-spacing:-1px;
}

.mv28-about-cover p{
    max-width:660px;
    margin:12px 0 0;
    color:#dcebf3;
    font-size:14px;
    line-height:1.65;
}

.mv28-about-actions{
    flex:0 0 auto;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.mv28-about-button{
    min-height:39px;
    padding:0 15px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:7px;
    color:#fff;
    background:rgba(255,255,255,.08);
    font-size:11px;
    font-weight:900;
}

.mv28-about-button svg{
    width:14px;
    height:14px;
}

.mv28-about-button.is-primary{
    border-color:#fff;
    color:#0871ca;
    background:#fff;
}

.mv28-about-button.is-orange{
    border-color:#f58a25;
    background:#f58a25;
    color:#fff;
}

.mv28-about-summary{
    margin-top:-26px;
    position:relative;
    z-index:3;
}

.mv28-about-summary-card{
    width:min(var(--mv28-container,1160px),calc(100% - 70px));
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    border:1px solid #dfe7ef;
    border-radius:12px;
    background:#fff;
    box-shadow:0 7px 22px rgba(31,72,107,.075);
}

.mv28-about-summary-card article{
    min-width:0;
    min-height:102px;
    padding:17px 18px;
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:11px;
    align-items:center;
    border-right:1px solid #e8eef3;
}

.mv28-about-summary-card article:last-child{
    border-right:0;
}

.mv28-about-summary-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:#0871ca;
    background:#edf7ff;
}

.mv28-about-summary-icon svg{
    width:20px;
    height:20px;
}

.mv28-about-summary-card strong{
    display:block;
    color:#173e5e;
    font-size:12px;
}

.mv28-about-summary-card small{
    display:block;
    margin-top:4px;
    color:#71879a;
    font-size:9px;
    line-height:1.4;
}

.mv28-about-section{
    padding:28px 0 42px;
}

.mv28-about-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;
    gap:18px;
    align-items:start;
}

.mv28-about-main-column{
    display:grid;
    gap:16px;
}

.mv28-about-sidebar{
    display:grid;
    gap:16px;
    position:sticky;
    top:82px;
}

.mv28-about-card{
    padding:23px;
    border:1px solid #dfe7ef;
    border-radius:12px;
    background:#fff;
    box-shadow:0 5px 18px rgba(31,72,107,.05);
}

.mv28-about-section-label{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#0871ca;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mv28-about-section-label::before{
    content:"";
    width:17px;
    height:2px;
    background:#f58a25;
}

.mv28-about-section-label.is-light{
    color:#bfe8f1;
}

.mv28-about-card h2,
.mv28-about-direction h2{
    margin:9px 0 0;
    color:#123d5e;
    font-size:22px;
    line-height:1.2;
}

.mv28-about-card p{
    margin:11px 0 0;
    color:#587187;
    font-size:13px;
    line-height:1.72;
}

.mv28-about-intro p strong{
    color:#123d5e;
}

.mv28-about-objectives{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
    margin-top:18px;
}

.mv28-about-objectives>div{
    min-width:0;
    padding:15px;
    border:1px solid #e2eaf1;
    border-radius:10px;
    background:#fbfdff;
}

.mv28-about-objectives>div>span{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    color:#0871ca;
    background:#edf7ff;
}

.mv28-about-objectives svg{
    width:18px;
    height:18px;
}

.mv28-about-objectives strong{
    display:block;
    margin-top:10px;
    color:#173e5e;
    font-size:12px;
}

.mv28-about-objectives p{
    margin-top:5px;
    font-size:11px;
    line-height:1.55;
}

.mv28-about-dual{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.mv28-about-dual h2{
    font-size:19px;
}

.mv28-about-list{
    list-style:none;
    padding:0;
    margin:13px 0 0;
}

.mv28-about-list li{
    position:relative;
    margin-top:9px;
    padding-left:24px;
    color:#587187;
    font-size:12px;
    line-height:1.55;
}

.mv28-about-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:17px;
    height:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#0871ca;
    background:#edf7ff;
    font-size:9px;
    font-weight:900;
}

.mv28-about-direction{
    padding:23px;
    display:flex;
    justify-content:space-between;
    gap:24px;
    align-items:flex-end;
    overflow:hidden;
    border-radius:12px;
    color:#fff;
    background:
        radial-gradient(circle at 100% 0%,rgba(255,255,255,.12),transparent 30%),
        linear-gradient(135deg,#07385f,#0871c8 66%,#0b796f);
    box-shadow:0 5px 18px rgba(31,72,107,.06);
}

.mv28-about-direction h2{
    color:#fff;
}

.mv28-about-direction p{
    max-width:720px;
    margin:10px 0 0;
    color:#d8e9f3;
    font-size:12px;
    line-height:1.7;
}

.mv28-about-sidebar-card h2{
    font-size:18px;
}

.mv28-about-sidebar-card p{
    font-size:12px;
    line-height:1.65;
}

.mv28-about-links{
    margin-top:12px;
    display:grid;
    gap:6px;
}

.mv28-about-links a{
    min-height:42px;
    padding:0 10px;
    display:grid;
    grid-template-columns:28px minmax(0,1fr) 14px;
    gap:8px;
    align-items:center;
    border:1px solid #e2eaf1;
    border-radius:8px;
    color:#355b77;
    background:#fbfdff;
    font-size:11px;
    font-weight:800;
}

.mv28-about-links a:hover{
    color:#0871ca;
    border-color:#bfd8eb;
    background:#f2f8fd;
}

.mv28-about-links a>span{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    color:#0871ca;
    background:#edf7ff;
}

.mv28-about-links a>span svg{
    width:15px;
    height:15px;
}

.mv28-about-links a>svg{
    width:13px;
    height:13px;
}

/* Tablet ---------------------------------------------------------------- */
@media(max-width:900px){
    .mv28-about-cover-inner{
        align-items:flex-start;
        flex-direction:column;
    }

    .mv28-about-summary-card{
        grid-template-columns:1fr 1fr;
    }

    .mv28-about-summary-card article:nth-child(2){
        border-right:0;
    }

    .mv28-about-summary-card article:nth-child(-n+2){
        border-bottom:1px solid #e8eef3;
    }

    .mv28-about-layout{
        grid-template-columns:1fr;
    }

    .mv28-about-sidebar{
        position:static;
        grid-template-columns:1fr 1fr;
    }

    .mv28-about-sidebar-card:last-child{
        grid-column:1 / -1;
    }
}

/* Mobile ---------------------------------------------------------------- */
@media(max-width:620px){
    .mv28-about-main{
        padding-top:10px;
    }

    .mv28-about-cover{
        width:calc(100% - 18px);
        border-radius:11px;
    }

    .mv28-about-cover-inner{
        min-height:0;
        padding:25px 18px 42px;
    }

    .mv28-about-brandmark{
        grid-template-columns:46px minmax(0,1fr);
        gap:12px;
    }

    .mv28-about-brand-icon{
        width:46px;
        height:46px;
        border-radius:11px;
    }

    .mv28-about-brand-icon svg{
        width:23px;
        height:23px;
    }

    .mv28-about-cover h1{
        font-size:29px;
    }

    .mv28-about-cover p{
        font-size:12px;
    }

    .mv28-about-actions{
        width:100%;
    }

    .mv28-about-button{
        flex:1 1 auto;
        min-height:38px;
        font-size:10px;
    }

    .mv28-about-summary{
        margin-top:-22px;
    }

    .mv28-about-summary-card{
        width:calc(100% - 36px);
        grid-template-columns:1fr 1fr;
    }

    .mv28-about-summary-card article{
        min-height:100px;
        padding:13px;
        grid-template-columns:34px minmax(0,1fr);
        gap:8px;
    }

    .mv28-about-summary-icon{
        width:34px;
        height:34px;
    }

    .mv28-about-summary-card strong{
        font-size:10px;
    }

    .mv28-about-summary-card small{
        font-size:8px;
    }

    .mv28-about-section{
        padding:20px 0 30px;
    }

    .mv28-about-card{
        padding:17px;
    }

    .mv28-about-card h2,
    .mv28-about-direction h2{
        font-size:19px;
    }

    .mv28-about-card p{
        font-size:12px;
    }

    .mv28-about-objectives,
    .mv28-about-dual,
    .mv28-about-sidebar{
        grid-template-columns:1fr;
    }

    .mv28-about-sidebar-card:last-child{
        grid-column:auto;
    }

    .mv28-about-direction{
        padding:18px;
        align-items:flex-start;
        flex-direction:column;
    }

    .mv28-about-direction p{
        font-size:11px;
    }
}