/* ==========================================================================
   hidrologi.net — Modern v2.8 Unified Layout System
   Visual master: Engineer Profile
   ========================================================================== */

:root{
    --mv28-page:#f4f7fb;
    --mv28-surface:#ffffff;
    --mv28-line:#dfe7ef;
    --mv28-line-soft:#eaf0f5;
    --mv28-ink:#153b5b;
    --mv28-body:#536f86;
    --mv28-muted:#7b91a3;
    --mv28-blue:#0874d8;
    --mv28-blue-dark:#0566c3;
    --mv28-orange:#f58a25;
    --mv28-radius:12px;
    --mv28-shadow:0 5px 18px rgba(31,72,107,.055);
    --mv28-shadow-hover:0 9px 24px rgba(31,72,107,.08);
    --mv28-header:64px;
    --mv28-container:1160px;
}

/* Global canvas --------------------------------------------------------- */
html{
    background:var(--mv28-page);
}

body.mv2-body{
    color:var(--mv28-ink);
    background:var(--mv28-page);
    font-size:14px;
    line-height:1.55;
}

.mv2-container{
    width:min(var(--mv28-container),calc(100% - 36px));
    margin-left:auto;
    margin-right:auto;
}

/* Header — follows Engineer Profile proportions ------------------------ */
.mv2-header{
    height:var(--mv28-header);
    border-bottom:1px solid var(--mv28-line-soft);
    background:rgba(255,255,255,.98);
    box-shadow:0 1px 5px rgba(30,66,96,.025);
}

.mv2-header-inner{
    width:min(var(--mv28-container),calc(100% - 36px));
    height:100%;
    grid-template-columns:170px minmax(0,1fr) auto;
    gap:15px;
}

.mv2-logo img{
    height:34px!important;
    max-width:165px;
}

.mv2-nav{
    justify-content:flex-start;
    gap:2px;
}

.mv2-nav>a,
.mv2-nav-dropdown-trigger{
    min-height:38px;
    padding:0 9px;
    font-size:11px;
    font-weight:700;
    border-radius:7px;
}

.mv2-nav>a.is-active,
.mv2-nav>a:hover,
.mv2-nav-dropdown.is-active .mv2-nav-dropdown-trigger,
.mv2-nav-dropdown-trigger:hover{
    color:var(--mv28-blue);
    background:#f2f8fd;
}

.mv2-header-actions{
    gap:7px;
}

.mv28-header-search{
    width:206px;
    height:34px;
    padding:0 10px;
    display:flex;
    align-items:center;
    gap:7px;
    border:1px solid #d8e3ec;
    border-radius:8px;
    background:#f8fafc;
}

.mv28-header-search:focus-within{
    border-color:#9bc9ee;
    box-shadow:0 0 0 3px rgba(8,116,216,.07);
    background:#fff;
}

.mv28-header-search span{
    display:flex;
    color:#7c91a4;
}

.mv28-header-search svg{
    width:14px;
    height:14px;
}

.mv28-header-search input{
    min-width:0;
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#355773;
    font:inherit;
    font-size:10px;
}

.mv28-header-search input::placeholder{
    color:#8da0af;
}

.mv2-link-login,
.mv2-link-register{
    min-width:70px;
    height:34px;
    padding:0 12px;
    border-radius:7px;
    font-size:10px;
}

.mv2-link-login{
    border-color:#d2dfe9;
    color:#355b78;
}

.mv2-link-register{
    background:linear-gradient(180deg,#1183e9,#0870d2);
    box-shadow:0 4px 10px rgba(8,112,210,.13);
}

/* Mega menu ------------------------------------------------------------- */
.mv2-data-mega{
    width:min(820px,calc(100vw - 38px));
    border-radius:12px;
    box-shadow:0 15px 38px rgba(17,65,101,.13);
}

.mv2-data-mega-column>a{
    min-height:58px;
}

.mv2-data-mega-column>a strong{
    font-size:10px;
}

.mv2-data-mega-column>a small{
    font-size:8px;
}

/* Homepage canvas ------------------------------------------------------- */
.mv2-home{
    background:var(--mv28-page);
    padding-top:18px;
}

.mv2-home .mv2-hero{
    width:min(var(--mv28-container),calc(100% - 36px));
    min-height:370px;
    margin:0 auto;
    overflow:hidden;
    border-radius:var(--mv28-radius);
    box-shadow:var(--mv28-shadow);
}

.mv2-home .mv2-hero-content{
    width:100%;
    min-height:370px;
    padding-left:34px;
    padding-right:34px;
    grid-template-columns:minmax(0,1fr) 230px;
}

.mv2-home .mv2-hero-copy{
    padding:40px 0 46px;
}

.mv2-home .mv2-hero-copy h1{
    max-width:620px;
    font-size:42px;
    line-height:1.07;
    letter-spacing:-1.3px;
}

.mv2-home .mv2-hero-copy p{
    max-width:600px;
    font-size:14px;
    line-height:1.6;
}

.mv2-home .mv2-btn{
    height:40px;
    padding:0 19px;
    border-radius:7px;
    font-size:11px;
}

/* The module tray now behaves like the horizontal profile-stat card. */
.mv2-home .mv2-modules-section{
    margin-top:-25px;
    padding-bottom:24px;
    background:transparent;
}

.mv2-home .mv2-module-tray{
    border-radius:var(--mv28-radius);
    border-color:var(--mv28-line);
    box-shadow:var(--mv28-shadow);
}

.mv2-home .mv2-module-card{
    min-height:110px;
    padding:17px 9px 13px;
}

.mv2-home .mv2-module-card strong{
    font-size:12px;
}

.mv2-home .mv2-module-card small{
    max-width:125px;
    margin-top:5px;
    color:#607b91;
    font-size:9px;
    line-height:1.35;
}

/* Homepage sections: unified profile-style white cards ----------------- */
.mv2-section,
.mv2-section-soft{
    background:var(--mv28-page)!important;
}

.mv2-data-layout,
.mv2-opportunity-layout,
.mv2-insight-layout{
    gap:16px;
}

.mv2-data-layout{
    grid-template-columns:1.48fr .92fr;
    padding-bottom:16px;
}

.mv2-opportunity-layout{
    grid-template-columns:1.48fr .92fr;
    padding-bottom:16px;
}

.mv2-insight-layout{
    grid-template-columns:1.48fr .92fr;
    padding-bottom:32px;
}

.mv2-panel,
.mv2-jobs,
.mv2-article-card,
.mv2-job-card{
    border-color:var(--mv28-line);
    box-shadow:var(--mv28-shadow);
}

.mv2-panel,
.mv2-jobs{
    border-radius:var(--mv28-radius);
}

.mv2-panel{
    min-height:300px;
}

/* Coverage -------------------------------------------------------------- */
.mv2-coverage-panel{
    padding:0 20px 16px;
}

.mv2-coverage-map{
    height:155px;
}

.mv2-coverage-map img{
    height:135px;
}

.mv2-coverage-copy h2{
    font-size:18px;
}

.mv2-coverage-copy p{
    margin-top:5px;
    font-size:11px;
    line-height:1.45;
}

.mv2-coverage-stats{
    margin-top:16px;
}

.mv2-coverage-stats strong{
    font-size:26px;
}

.mv2-coverage-stats span{
    margin-top:5px;
    font-size:10px;
}

.mv2-map-button{
    height:38px;
    min-width:180px;
    font-size:10px;
}

/* Groundwater ----------------------------------------------------------- */
.mv2-groundwater-panel{
    min-height:300px;
    padding:27px 25px 20px;
}

.mv2-groundwater-panel h2{
    font-size:23px;
}

.mv2-groundwater-panel p{
    margin-top:8px;
    font-size:11px;
    line-height:1.5;
}

.mv2-coordinate-single input,
.mv2-analysis-button{
    height:38px;
    font-size:10px;
}

.mv2-example-link{
    font-size:9px;
}

/* Headings -------------------------------------------------------------- */
.mv2-list-heading{
    margin-bottom:14px;
}

.mv2-list-heading h2{
    font-size:20px;
}

.mv2-list-heading p{
    margin-top:5px;
    font-size:11px;
    line-height:1.4;
}

.mv2-list-heading>a{
    font-size:10px;
}

/* Jobs ------------------------------------------------------------------ */
.mv2-jobs{
    padding:20px 18px 18px;
}

.mv2-job-list{
    gap:11px;
}

.mv2-job-card{
    min-height:124px;
    padding:14px;
    border-radius:9px;
}

.mv2-job-card h3{
    font-size:13px;
    line-height:1.3;
}

.mv2-job-card p{
    margin:5px 0 10px;
    font-size:10px;
    line-height:1.4;
}

.mv2-job-meta{
    font-size:9px;
}

.mv2-job-card small{
    margin-top:10px;
    font-size:9px;
}

/* Engineer network card ------------------------------------------------ */
.mv2-engineer-network{
    min-height:248px;
    padding:24px 20px;
    border-radius:var(--mv28-radius);
    box-shadow:var(--mv28-shadow);
}

.mv2-engineer-network h2{
    font-size:24px;
}

.mv2-engineer-network p{
    margin-top:10px;
    font-size:10px;
    line-height:1.55;
}

.mv2-engineer-cta{
    height:38px;
    font-size:10px;
}

/* Articles -------------------------------------------------------------- */
.mv2-article-list{
    gap:11px;
}

.mv2-article-card{
    border-radius:10px;
}

.mv2-article-image{
    height:118px;
}

.mv2-article-copy{
    padding:12px 13px 13px;
}

.mv2-article-copy time{
    font-size:9px;
}

.mv2-article-copy h3{
    min-height:42px;
    margin:6px 0 9px;
    font-size:12px;
    line-height:1.3;
}

.mv2-category-pill{
    font-size:8.5px;
}

/* Why ------------------------------------------------------------------- */
.mv2-why{
    padding:18px 12px 0;
}

.mv2-why h2{
    font-size:21px;
}

.mv2-why-list{
    gap:14px;
}

.mv2-why-list article{
    grid-template-columns:44px minmax(0,1fr);
}

.mv2-why-list article>span{
    width:42px;
    height:42px;
    border:1px solid #e2eaf1;
    box-shadow:var(--mv28-shadow);
}

.mv2-why-list strong{
    font-size:11px;
}

.mv2-why-list p{
    margin-top:3px;
    font-size:9.5px;
    line-height:1.4;
}

/* Footer — same canvas width as profile / homepage --------------------- */
.mv2-footer{
    margin-top:0;
}

.mv2-footer .mv2-container{
    width:min(var(--mv28-container),calc(100% - 36px));
}

.mv2-footer-main{
    grid-template-columns:220px minmax(0,1fr) 230px;
    gap:36px;
}

.mv2-footer-columns strong{
    font-size:11px;
}

.mv2-footer-columns a{
    font-size:9px;
}

.mv2-footer-bottom{
    font-size:9px;
}

/* Public static pages --------------------------------------------------- */
.mv2-static-page,
.mv27-public-data,
.mv-kamus-page{
    background:var(--mv28-page)!important;
}

.mv2-static-page .mv2-page-hero,
.mv27-public-data .mv27-hero,
.mv-kamus-page .mv-kamus-hero{
    margin-top:18px;
    margin-left:auto;
    margin-right:auto;
    width:min(var(--mv28-container),calc(100% - 36px));
    border-radius:var(--mv28-radius);
    box-shadow:var(--mv28-shadow);
}

.mv2-static-page .mv2-page-section,
.mv27-public-data .mv27-section,
.mv-kamus-page .mv-kamus-section{
    background:transparent!important;
}

.mv2-static-page .mv2-page-card,
.mv2-static-page .mv2-page-callout,
.mv27-public-data .mv27-card,
.mv-kamus-page .mv-kamus-card,
.mv-kamus-page .mv-kamus-term,
.mv-kamus-page .mv-kamus-content-card,
.mv-kamus-page .mv-kamus-side-card{
    border-color:var(--mv28-line);
    border-radius:var(--mv28-radius);
    box-shadow:var(--mv28-shadow);
}

/* Public Data scale follows Engineer Profile readability. */
.mv27-public-data .mv27-hero h1{
    font-size:clamp(34px,3vw,44px);
}

.mv27-public-data .mv27-toolbar-copy h2,
.mv-kamus-page .mv-kamus-list-head h2{
    font-size:22px;
}

.mv27-public-data .table,
.mv27-public-data .mv27-table{
    font-size:12px;
}

/* Kamus card composition ------------------------------------------------ */
.mv-kamus-grid{
    gap:15px;
}

.mv-kamus-term{
    padding:20px;
}

.mv-kamus-term h3{
    font-size:17px;
}

.mv-kamus-term p{
    font-size:13px;
}

/* Interactive lift: profile-like, restrained. */
@media(hover:hover){
    .mv2-job-card:hover,
    .mv2-article-card:hover,
    .mv2-panel:hover,
    .mv-kamus-term:hover,
    .mv27-card:hover{
        box-shadow:var(--mv28-shadow-hover);
    }
}

/* Tablet ---------------------------------------------------------------- */
@media(max-width:1080px){
    :root{
        --mv28-container:960px;
    }

    .mv2-header-inner{
        grid-template-columns:150px minmax(0,1fr) auto;
        gap:8px;
    }

    .mv2-nav>a,
    .mv2-nav-dropdown-trigger{
        padding-left:6px;
        padding-right:6px;
        font-size:10px;
    }

    .mv28-header-search{
        width:155px;
    }

    .mv2-link-login,
    .mv2-link-register{
        min-width:62px;
        padding:0 9px;
    }
}

/* Mobile: preserve compact composition, but with unified scale ---------- */
@media(max-width:760px){
    :root{
        --mv28-header:66px;
    }

    .mv2-container{
        width:min(100% - 22px,620px);
    }

    .mv2-header{
        height:var(--mv28-header);
    }

    .mv2-header-inner{
        width:calc(100% - 20px);
        grid-template-columns:minmax(0,1fr) auto;
    }

    .mv2-logo img{
        height:32px!important;
    }

    .mv28-header-search{
        display:none;
    }

    .mv2-nav{
        top:66px;
    }

    .mv2-home{
        padding-top:10px;
    }

    .mv2-home .mv2-hero{
        width:calc(100% - 18px);
        min-height:282px;
        border-radius:11px;
    }

    .mv2-home .mv2-hero-content{
        min-height:282px;
        width:100%;
        padding-left:16px;
        padding-right:16px;
    }

    .mv2-home .mv2-hero-copy h1{
        max-width:330px;
        font-size:28px;
    }

    .mv2-home .mv2-hero-description-mobile{
        font-size:11px!important;
    }

    .mv2-home .mv2-modules-section{
        margin-top:-8px;
        padding-bottom:12px;
    }

    .mv2-module-card strong{
        font-size:10px;
    }

    .mv2-groundwater-panel p,
    .mv2-coverage-copy p,
    .mv2-list-heading p{
        font-size:9px;
    }

    .mv2-job-card h3{
        font-size:10.5px;
    }

    .mv2-job-card p{
        font-size:8.5px;
    }

    .mv2-article-copy h3{
        font-size:8px;
    }

    .mv2-why-list strong{
        font-size:7.5px;
    }

    .mv2-why-list p{
        font-size:6.3px;
    }

    .mv2-static-page .mv2-page-hero,
    .mv27-public-data .mv27-hero,
    .mv-kamus-page .mv-kamus-hero{
        width:calc(100% - 18px);
        margin-top:10px;
        border-radius:11px;
    }

    .mv2-footer .mv2-container{
        width:calc(100% - 20px);
    }
}

@media(max-width:520px){
    .mv2-link-login,
    .mv2-link-register{
        min-width:58px;
        height:34px;
    }

    .mv2-home .mv2-hero-copy h1{
        font-size:24px;
    }
}

/* Print: avoid the homepage looking narrower than Engineer Profile. ----- */
@media print{
    body.mv2-body{
        background:#f4f7fb!important;
    }

    .mv2-container,
    .mv2-header-inner,
    .mv2-footer .mv2-container{
        width:calc(100% - 24px)!important;
        max-width:none!important;
    }

    .mv2-home .mv2-hero{
        width:calc(100% - 24px)!important;
        max-width:none!important;
    }

    .mv28-header-search{
        display:flex!important;
    }
}


/* ==========================================================================
   Modern v2.8.3 — Homepage Mobile Refinement
   Scope is intentionally limited to .mv2-home + mobile header/footer.
   Desktop layout is unchanged.
   ========================================================================== */

@media(max-width:760px){

    /* Overall rhythm ---------------------------------------------------- */
    .mv2-home{
        padding-top:8px;
    }

    .mv2-home .mv2-container{
        width:calc(100% - 18px);
    }

    .mv2-home .mv2-data-layout,
    .mv2-home .mv2-opportunity-layout,
    .mv2-home .mv2-insight-layout{
        gap:12px;
        padding-bottom:12px;
    }

    /* Header ------------------------------------------------------------ */
    .mv2-header-inner{
        width:calc(100% - 16px);
        gap:6px;
    }

    .mv2-logo img{
        height:31px!important;
        max-width:145px!important;
    }

    .mv2-header-actions{
        gap:5px;
    }

    .mv2-link-login,
    .mv2-link-register{
        min-width:62px;
        height:34px;
        padding:0 8px;
        font-size:9.5px;
    }

    .mv2-menu-button{
        width:32px;
        height:34px;
    }

    .mv2-menu-button svg{
        width:22px;
        height:22px;
    }

    .mv2-nav{
        left:8px;
        right:8px;
        top:64px;
        max-height:calc(100vh - 78px);
        overflow:auto;
        border-radius:0 0 11px 11px;
    }

    /* Hero -------------------------------------------------------------- */
    .mv2-home .mv2-hero{
        width:calc(100% - 14px);
        min-height:320px;
        border-radius:11px;
        background-position:58% center;
    }

    .mv2-home .mv2-hero-content{
        min-height:320px;
        padding:24px 18px 22px;
    }

    .mv2-home .mv2-hero-copy{
        width:70%;
        max-width:420px;
    }

    .mv2-home .mv2-hero-copy h1{
        max-width:360px;
        font-size:28px;
        line-height:1.07;
        letter-spacing:-.7px;
    }

    .mv2-home .mv2-hero-description-mobile{
        max-width:330px!important;
        margin-top:11px!important;
        font-size:12px!important;
        line-height:1.48!important;
    }

    .mv2-home .mv2-hero-actions{
        margin-top:16px;
    }

    .mv2-home .mv2-btn-orange{
        height:39px;
        padding:0 17px;
        border-radius:7px;
        font-size:10.5px;
    }

    .mv2-home .mv2-hero-quote{
        right:17px;
        top:24px;
        width:132px;
        padding-left:11px;
    }

    .mv2-home .mv2-hero-quote p{
        font-size:9.5px;
        line-height:1.45;
    }

    /* Modules: 4 + 3, all cards equal width ---------------------------- */
    .mv2-home .mv2-modules-section{
        margin-top:-10px;
        padding-bottom:12px;
    }

    .mv2-home .mv2-module-tray{
        grid-template-columns:repeat(12,minmax(0,1fr));
        gap:7px;
        padding:8px;
        border-radius:11px;
    }

    .mv2-home .mv2-module-card{
        grid-column:span 3!important;
        min-height:78px!important;
        padding:9px 3px 8px;
        border-radius:8px;
    }

    .mv2-home .mv2-module-card:nth-child(n+5){
        grid-column:span 4!important;
        min-height:74px!important;
    }

    .mv2-home .mv2-module-icon{
        width:29px;
        height:29px;
        margin-bottom:4px;
    }

    .mv2-home .mv2-module-icon svg{
        width:27px;
        height:27px;
    }

    .mv2-home .mv2-module-card strong{
        font-size:10px;
        line-height:1.2;
    }

    /* Groundwater ------------------------------------------------------- */
    .mv2-home .mv2-groundwater-panel{
        min-height:226px;
        padding:20px 18px 17px;
    }

    .mv2-home .mv2-groundwater-content{
        width:65%;
        max-width:390px;
    }

    .mv2-home .mv2-groundwater-panel h2{
        font-size:21px;
    }

    .mv2-home .mv2-groundwater-panel p{
        max-width:330px;
        margin-top:6px;
        font-size:11px;
        line-height:1.45;
    }

    .mv2-home .mv2-coordinate-single,
    .mv2-home .mv2-analysis-button,
    .mv2-home .mv2-groundwater-status{
        width:100%;
    }

    .mv2-home .mv2-coordinate-single input,
    .mv2-home .mv2-analysis-button{
        height:39px;
        font-size:10.5px;
    }

    .mv2-home .mv2-example-link{
        margin-top:10px;
        font-size:9.5px;
    }

    .mv2-home .mv2-groundwater-illustration{
        width:175px;
        right:-4px;
        bottom:-2px;
        opacity:.88;
    }

    /* Coverage ---------------------------------------------------------- */
    .mv2-home .mv2-coverage-panel{
        min-height:0;
        padding:16px 15px 14px;
        display:grid;
        grid-template-columns:minmax(0,1fr) 165px;
        grid-template-areas:
            "copy map"
            "stats stats"
            "button button";
        column-gap:12px;
        row-gap:0;
    }

    .mv2-home .mv2-coverage-copy h2{
        font-size:16px;
        line-height:1.25;
    }

    .mv2-home .mv2-coverage-copy p{
        margin-top:5px;
        font-size:10px;
        line-height:1.4;
    }

    .mv2-home .mv2-coverage-map{
        height:74px;
    }

    .mv2-home .mv2-coverage-map img{
        height:72px;
    }

    .mv2-home .mv2-coverage-stats{
        margin-top:12px;
    }

    .mv2-home .mv2-coverage-stats strong{
        font-size:22px;
    }

    .mv2-home .mv2-coverage-stats span{
        font-size:8.5px;
        line-height:1.25;
    }

    .mv2-home .mv2-map-button{
        height:37px;
        margin-top:11px;
        font-size:10px;
    }

    /* Jobs -------------------------------------------------------------- */
    .mv2-home .mv2-jobs{
        padding:16px 14px 14px;
    }

    .mv2-home .mv2-list-heading{
        margin-bottom:11px;
    }

    .mv2-home .mv2-list-heading h2{
        font-size:18px;
    }

    .mv2-home .mv2-list-heading>a{
        font-size:9.5px;
    }

    .mv2-home .mv2-job-list{
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .mv2-home .mv2-job-card{
        min-height:116px;
        padding:11px;
    }

    .mv2-home .mv2-job-card h3{
        font-size:11.5px;
        line-height:1.3;
    }

    .mv2-home .mv2-job-card p{
        margin:5px 0 9px;
        font-size:9.5px;
        line-height:1.38;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .mv2-home .mv2-job-meta{
        display:grid;
        gap:4px;
        font-size:8.5px;
    }

    .mv2-home .mv2-job-card small{
        margin-top:8px;
        font-size:8.5px;
    }

    /* Engineer Network -------------------------------------------------- */
    .mv2-home .mv2-engineer-network{
        min-height:190px;
        padding:20px 18px;
    }

    .mv2-home .mv2-engineer-copy{
        position:relative;
        z-index:2;
        width:62%;
    }

    .mv2-home .mv2-engineer-network h2{
        font-size:20px;
        line-height:1.05;
    }

    .mv2-home .mv2-engineer-network p{
        margin-top:8px;
        font-size:10px;
        line-height:1.45;
    }

    .mv2-home .mv2-engineer-cta{
        height:37px;
        margin-top:12px;
        font-size:10px;
    }

    .mv2-home .mv2-engineer-image{
        width:43%;
    }

    .mv2-home .mv2-engineer-network blockquote{
        display:none;
    }

    /* Articles ---------------------------------------------------------- */
    .mv2-home .mv2-articles{
        padding:0;
    }

    .mv2-home .mv2-article-list{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
    }

    .mv2-home .mv2-article-image{
        height:86px;
    }

    .mv2-home .mv2-article-copy{
        padding:9px;
    }

    .mv2-home .mv2-article-copy time{
        font-size:8px;
    }

    .mv2-home .mv2-article-copy h3{
        min-height:39px;
        margin:4px 0 7px;
        font-size:9.5px;
        line-height:1.25;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .mv2-home .mv2-category-pill{
        padding:4px 7px;
        font-size:7.5px;
    }

    /* Why: 2 x 2 instead of four unreadably narrow items -------------- */
    .mv2-home .mv2-why{
        padding:14px;
        border:1px solid #dfe7ef;
        border-radius:11px;
        background:#fff;
        box-shadow:0 5px 18px rgba(31,72,107,.05);
    }

    .mv2-home .mv2-why h2{
        margin-bottom:11px;
        font-size:18px;
    }

    .mv2-home .mv2-why-list{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .mv2-home .mv2-why-list article{
        min-height:96px;
        padding:10px 8px;
        display:grid;
        grid-template-columns:37px minmax(0,1fr);
        gap:8px;
        align-items:start;
        text-align:left;
        border:1px solid #e7edf2;
        border-radius:9px;
        background:#fbfdff;
    }

    .mv2-home .mv2-why-list article>span{
        width:37px;
        height:37px;
        margin:0;
        box-shadow:none;
    }

    .mv2-home .mv2-why-list strong{
        display:block;
        font-size:10px;
        line-height:1.25;
    }

    .mv2-home .mv2-why-list p{
        margin-top:4px;
        font-size:8.5px;
        line-height:1.35;
    }

    /* Footer ------------------------------------------------------------ */
    .mv2-footer-bottom > span:first-of-type{
        font-size:8px!important;
        line-height:1.35;
    }
}

/* Phones around 360–520px ---------------------------------------------- */
@media(max-width:520px){

    .mv2-home .mv2-container{
        width:calc(100% - 14px);
    }

    /* Header remains one clean row. */
    .mv2-header-inner{
        width:calc(100% - 12px);
    }

    .mv2-logo img{
        height:28px!important;
        max-width:128px!important;
    }

    .mv2-link-login,
    .mv2-link-register{
        min-width:54px;
        height:32px;
        padding:0 6px;
        font-size:8.8px;
    }

    .mv2-menu-button{
        width:30px;
        height:32px;
    }

    /* Hero: remove the quote to avoid collision with headline. */
    .mv2-home .mv2-hero{
        width:calc(100% - 10px);
        min-height:300px;
        background-position:61% center;
    }

    .mv2-home .mv2-hero-content{
        min-height:300px;
        padding:22px 15px 18px;
    }

    .mv2-home .mv2-hero-copy{
        width:82%;
    }

    .mv2-home .mv2-hero-copy h1{
        max-width:300px;
        font-size:25px;
        line-height:1.08;
    }

    .mv2-home .mv2-hero-description-mobile{
        max-width:275px!important;
        font-size:11px!important;
        line-height:1.45!important;
    }

    .mv2-home .mv2-hero-quote{
        display:none;
    }

    /* Modules keep the 4 + 3 rhythm. */
    .mv2-home .mv2-module-tray{
        gap:6px;
        padding:7px;
    }

    .mv2-home .mv2-module-card{
        min-height:73px!important;
    }

    .mv2-home .mv2-module-card:nth-child(n+5){
        min-height:70px!important;
    }

    .mv2-home .mv2-module-icon{
        width:27px;
        height:27px;
    }

    .mv2-home .mv2-module-icon svg{
        width:25px;
        height:25px;
    }

    .mv2-home .mv2-module-card strong{
        font-size:9px;
    }

    /* Groundwater: readability wins over illustration. */
    .mv2-home .mv2-groundwater-panel{
        min-height:0;
        padding:18px 15px 16px;
    }

    .mv2-home .mv2-groundwater-content{
        width:100%;
        max-width:none;
    }

    .mv2-home .mv2-groundwater-panel h2{
        font-size:20px;
    }

    .mv2-home .mv2-groundwater-panel p{
        font-size:10.5px;
    }

    .mv2-home .mv2-groundwater-illustration{
        display:none;
    }

    /* Coverage switches to a simple vertical card. */
    .mv2-home .mv2-coverage-panel{
        display:block;
        padding:15px 14px 14px;
    }

    .mv2-home .mv2-coverage-map{
        height:95px;
        margin:-3px 0 8px;
    }

    .mv2-home .mv2-coverage-map img{
        height:92px;
        width:100%;
    }

    .mv2-home .mv2-coverage-copy{
        text-align:center;
    }

    .mv2-home .mv2-coverage-copy h2{
        font-size:16px;
    }

    .mv2-home .mv2-coverage-copy p{
        font-size:9.5px;
    }

    .mv2-home .mv2-coverage-stats{
        grid-template-columns:1fr 1fr;
        gap:0;
        margin-top:13px;
        border-top:1px solid #e7edf2;
        border-bottom:1px solid #e7edf2;
    }

    .mv2-home .mv2-coverage-stats article{
        padding:11px 5px;
        border-right:1px solid #e7edf2;
        border-bottom:1px solid #e7edf2;
    }

    .mv2-home .mv2-coverage-stats article:nth-child(2n){
        border-right:0;
    }

    .mv2-home .mv2-coverage-stats article:nth-child(n+3){
        border-bottom:0;
    }

    .mv2-home .mv2-coverage-stats strong{
        font-size:20px;
    }

    .mv2-home .mv2-coverage-stats span{
        font-size:8px;
    }

    /* Jobs: one column on small phones. */
    .mv2-home .mv2-job-list{
        grid-template-columns:1fr;
    }

    .mv2-home .mv2-job-card{
        min-height:0;
    }

    .mv2-home .mv2-job-card h3{
        font-size:12px;
    }

    .mv2-home .mv2-job-card p{
        font-size:10px;
    }

    .mv2-home .mv2-job-meta{
        display:flex;
        flex-wrap:wrap;
        gap:7px;
        font-size:9px;
    }

    /* Engineer Network -------------------------------------------------- */
    .mv2-home .mv2-engineer-network{
        min-height:176px;
        padding:18px 15px;
    }

    .mv2-home .mv2-engineer-copy{
        width:64%;
    }

    .mv2-home .mv2-engineer-network h2{
        font-size:18px;
    }

    .mv2-home .mv2-engineer-network p{
        font-size:9px;
    }

    .mv2-home .mv2-engineer-image{
        width:40%;
        opacity:.92;
    }

    /* Articles become horizontal snap cards instead of microscopic 3 cols. */
    .mv2-home .mv2-article-list{
        display:grid;
        grid-auto-flow:column;
        grid-auto-columns:82%;
        grid-template-columns:none;
        gap:10px;
        overflow-x:auto;
        padding:1px 2px 8px;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }

    .mv2-home .mv2-article-list::-webkit-scrollbar{
        display:none;
    }

    .mv2-home .mv2-article-card{
        scroll-snap-align:start;
    }

    .mv2-home .mv2-article-image{
        height:130px;
    }

    .mv2-home .mv2-article-copy{
        padding:11px 12px 12px;
    }

    .mv2-home .mv2-article-copy time{
        font-size:9px;
    }

    .mv2-home .mv2-article-copy h3{
        min-height:34px;
        font-size:11px;
        line-height:1.3;
        -webkit-line-clamp:2;
    }

    .mv2-home .mv2-category-pill{
        font-size:8.5px;
    }

    /* Why remains 2x2 with readable text. */
    .mv2-home .mv2-why{
        padding:13px;
    }

    .mv2-home .mv2-why-list{
        gap:7px;
    }

    .mv2-home .mv2-why-list article{
        min-height:104px;
        display:block;
        padding:10px 8px;
        text-align:center;
    }

    .mv2-home .mv2-why-list article>span{
        margin:0 auto 7px;
    }

    .mv2-home .mv2-why-list strong{
        font-size:9.5px;
    }

    .mv2-home .mv2-why-list p{
        font-size:8px;
    }

    /* Footer text should remain legible. */
    .mv2-footer-bottom > span:first-of-type{
        font-size:7.5px!important;
    }
}

/* Very narrow devices --------------------------------------------------- */
@media(max-width:390px){

    .mv2-logo img{
        max-width:116px!important;
    }

    .mv2-link-login,
    .mv2-link-register{
        min-width:50px;
        padding:0 5px;
        font-size:8.2px;
    }

    .mv2-home .mv2-hero-copy{
        width:88%;
    }

    .mv2-home .mv2-hero-copy h1{
        font-size:23px;
    }

    .mv2-home .mv2-module-card strong{
        font-size:8.5px;
    }

    .mv2-home .mv2-engineer-network{
        min-height:168px;
    }

    .mv2-home .mv2-engineer-copy{
        width:68%;
    }
}


/* ==========================================================================
   Modern v2.8.4 — Mobile homepage full-width sections
   Fixes: Air Tanah, Data/Coverage, Lowongan, Artikel, Mengapa Hidrologi.net
   ========================================================================== */

@media(max-width:760px){

    /* Make the main homepage content rows use the full phone canvas. */
    .mv2-home .mv2-data-layout,
    .mv2-home .mv2-opportunity-layout,
    .mv2-home .mv2-insight-layout{
        width:calc(100vw - 12px);
        max-width:none;
        margin-left:calc(50% - 50vw + 6px);
        margin-right:calc(50% - 50vw + 6px);
        padding-left:0;
        padding-right:0;
    }

    /* Full-width panels inside those rows. */
    .mv2-home .mv2-groundwater-panel,
    .mv2-home .mv2-coverage-panel,
    .mv2-home .mv2-jobs,
    .mv2-home .mv2-engineer-network,
    .mv2-home .mv2-articles,
    .mv2-home .mv2-why{
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
        box-sizing:border-box;
    }

    /* Groundwater ------------------------------------------------------- */
    .mv2-home .mv2-groundwater-panel{
        border-radius:10px;
    }

    /* Data / Coverage --------------------------------------------------- */
    .mv2-home .mv2-coverage-panel{
        border-radius:10px;
    }

    /* Jobs -------------------------------------------------------------- */
    .mv2-home .mv2-jobs{
        border-radius:10px;
    }

    /* Articles ---------------------------------------------------------- */
    .mv2-home .mv2-articles{
        overflow:hidden;
    }

    .mv2-home .mv2-article-list{
        width:100%;
        max-width:none;
    }

    /* Why --------------------------------------------------------------- */
    .mv2-home .mv2-why{
        border-radius:10px;
    }
}

@media(max-width:520px){

    /* Slightly tighter edge gap on smaller phones. */
    .mv2-home .mv2-data-layout,
    .mv2-home .mv2-opportunity-layout,
    .mv2-home .mv2-insight-layout{
        width:calc(100vw - 8px);
        margin-left:calc(50% - 50vw + 4px);
        margin-right:calc(50% - 50vw + 4px);
    }

    /* Air Tanah form truly fills the card. */
    .mv2-home .mv2-groundwater-content{
        width:100%!important;
        max-width:none!important;
    }

    .mv2-home .mv2-coordinate-single,
    .mv2-home .mv2-analysis-button{
        width:100%!important;
        max-width:none!important;
    }

    /* Coverage / Data full width and balanced. */
    .mv2-home .mv2-coverage-panel{
        width:100%;
    }

    /* Jobs full width, one card per row. */
    .mv2-home .mv2-job-list{
        width:100%;
        grid-template-columns:1fr!important;
    }

    .mv2-home .mv2-job-card{
        width:100%;
    }

    /* Articles full width horizontal swipe area. */
    .mv2-home .mv2-article-list{
        width:100%;
        padding-left:0;
        padding-right:0;
    }

    .mv2-home .mv2-article-card{
        width:100%;
    }

    /* Why full width. */
    .mv2-home .mv2-why{
        width:100%;
    }
}


/* ==========================================================================
   Modern v2.8.5 — TRUE mobile full-width homepage rows
   Structural fix: homepage paired rows no longer use .mv2-container.
   ========================================================================== */

/* Desktop/tablet keeps the same unified 1160px canvas. */
.mv2-home-layout-shell{
    width:min(var(--mv28-container,1160px),calc(100% - 36px));
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}

/* Ensure the parent sections themselves are not width constrained. */
.mv2-home > .mv2-section{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    box-sizing:border-box;
}

@media(max-width:760px){

    /* The actual row now fills the phone viewport.
       Only a 4px safe gutter is kept on each side. */
    .mv2-home-layout-shell{
        width:100%;
        max-width:none;
        margin-left:0;
        margin-right:0;
        padding-left:4px;
        padding-right:4px;
        box-sizing:border-box;
    }

    .mv2-home .mv2-data-layout,
    .mv2-home .mv2-opportunity-layout,
    .mv2-home .mv2-insight-layout{
        width:100%!important;
        max-width:none!important;
        margin-left:0!important;
        margin-right:0!important;
        padding-left:4px!important;
        padding-right:4px!important;
        box-sizing:border-box!important;
    }

    /* Every primary block fills the row itself. */
    .mv2-home .mv2-data-coverage,
    .mv2-home .mv2-data-groundwater,
    .mv2-home .mv2-groundwater-panel,
    .mv2-home .mv2-coverage-panel,
    .mv2-home .mv2-jobs,
    .mv2-home .mv2-engineer-network,
    .mv2-home .mv2-articles,
    .mv2-home .mv2-why{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
        margin-left:0!important;
        margin-right:0!important;
        box-sizing:border-box!important;
    }

    /* Avoid child contents visually appearing narrower than their card. */
    .mv2-home .mv2-groundwater-content,
    .mv2-home .mv2-coordinate-single,
    .mv2-home .mv2-analysis-button,
    .mv2-home .mv2-groundwater-status,
    .mv2-home .mv2-job-list,
    .mv2-home .mv2-article-list,
    .mv2-home .mv2-why-list{
        max-width:none!important;
        box-sizing:border-box;
    }
}

@media(max-width:520px){

    /* On small phones use almost edge-to-edge content. */
    .mv2-home-layout-shell,
    .mv2-home .mv2-data-layout,
    .mv2-home .mv2-opportunity-layout,
    .mv2-home .mv2-insight-layout{
        padding-left:3px!important;
        padding-right:3px!important;
    }

    .mv2-home .mv2-groundwater-panel,
    .mv2-home .mv2-coverage-panel,
    .mv2-home .mv2-jobs,
    .mv2-home .mv2-engineer-network,
    .mv2-home .mv2-why{
        border-radius:9px;
    }

    /* Articles swipe region is full card width. */
    .mv2-home .mv2-articles{
        padding-left:0!important;
        padding-right:0!important;
    }

    .mv2-home .mv2-article-list{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
    }
}


/* ==========================================================================
   Modern v2.8.7 — Mobile grid-column correction
   ROOT CAUSE:
   template.css correctly changed the homepage paired rows to one column at
   <=760px, but unified.css was loaded afterwards and restored the desktop
   1.48fr/.92fr columns. The result was a blank right column on Data and
   side-by-side Lowongan/Engineer + Artikel/Mengapa on mobile.
   ========================================================================== */

@media(max-width:760px){

    /* Data / Air Tanah — one true full-width column */
    .mv2-home .mv2-data-layout{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        grid-template-areas:
            "groundwater"
            "coverage"!important;
        width:100%!important;
        max-width:none!important;
    }

    .mv2-home .mv2-data-groundwater{
        grid-area:groundwater!important;
        width:100%!important;
        min-width:0!important;
    }

    .mv2-home .mv2-data-coverage{
        grid-area:coverage!important;
        width:100%!important;
        min-width:0!important;
    }

    /* Lowongan / Engineer Network — stack vertically, each 100% */
    .mv2-home .mv2-opportunity-layout{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        width:100%!important;
        max-width:none!important;
    }

    .mv2-home .mv2-opportunity-layout > *{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
    }

    /* Artikel / Mengapa Hidrologi.net — stack vertically, each 100% */
    .mv2-home .mv2-insight-layout{
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        width:100%!important;
        max-width:none!important;
    }

    .mv2-home .mv2-insight-layout > *{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
    }

    /* Prevent any inherited desktop width from constraining the cards. */
    .mv2-home .mv2-groundwater-panel,
    .mv2-home .mv2-coverage-panel,
    .mv2-home .mv2-jobs,
    .mv2-home .mv2-engineer-network,
    .mv2-home .mv2-articles,
    .mv2-home .mv2-why{
        width:100%!important;
        max-width:none!important;
        min-width:0!important;
    }
}

@media(max-width:520px){

    /* Keep the previously agreed mobile presentation once rows are full width. */
    .mv2-home .mv2-job-list{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .mv2-home .mv2-article-list{
        width:100%!important;
        max-width:none!important;
    }

    .mv2-home .mv2-why-list{
        width:100%!important;
        max-width:none!important;
    }
}