
.mg-contact-page{
    width:min(1180px,calc(100vw - 34px));
    max-width:1180px;
    margin:0 auto 54px;
    padding:0;
    box-sizing:border-box;
    color:#143d34;
}
.mg-contact-hero{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    min-height:350px;
    margin:24px auto 24px;
    overflow:hidden;
    border:1px solid #ead4ca;
    border-radius:20px;
    background:
        radial-gradient(circle at 80% 20%, rgba(232,143,160,.2), transparent 30%),
        radial-gradient(circle at 65% 85%, rgba(244,207,167,.35), transparent 30%),
        linear-gradient(135deg,#fffaf6,#fcebed);
    box-shadow:0 8px 24px rgba(60,38,20,.05);
}
.mg-contact-hero.has-image{
    background-position:center;
    background-size:cover;
}
.mg-contact-hero.has-image:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(255,250,246,.96) 0%,rgba(255,250,246,.82) 38%,rgba(255,250,246,.20) 72%,rgba(255,250,246,.04) 100%);
}
.mg-contact-hero-copy{
    position:relative;
    z-index:2;
    align-self:center;
    padding:46px;
}
.mg-contact-kicker{
    font-size:10px;
    font-weight:800;
    letter-spacing:2px;
    color:#b97534;
    text-transform:uppercase;
}
.mg-contact-hero h1,
.mg-contact-form-card h2,
.mg-contact-side-card h3{
    font-family:Georgia,"Times New Roman",serif;
    color:#103d34;
    line-height:1.05;
}
.mg-contact-hero h1{
    margin:8px 0 12px;
    font-size:44px;
    max-width:620px;
}
.mg-contact-hero p{
    max-width:620px;
    margin:0 0 20px;
    color:#657169;
    font-size:15px;
    line-height:1.55;
}
.mg-contact-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.mg-contact-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:999px;
    background:#184c38;
    color:#fff!important;
    text-decoration:none!important;
    padding:11px 18px;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}
.mg-contact-btn.secondary{
    background:#fff;
    color:#184c38!important;
    border:1px solid #b8c5be;
}
.mg-contact-hero-art{
    position:relative;
    z-index:1;
    min-height:350px;
}
.mg-contact-flower,.mg-contact-gift,.mg-contact-heart{
    position:absolute;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    box-shadow:0 14px 30px rgba(75,42,23,.09);
    background:rgba(255,255,255,.85);
}
.mg-contact-flower{width:150px;height:150px;font-size:78px;right:120px;top:55px}
.mg-contact-gift{width:115px;height:115px;font-size:58px;right:35px;bottom:42px}
.mg-contact-heart{width:85px;height:85px;font-size:42px;color:#dc4d6b;right:260px;bottom:38px}
.mg-contact-info-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin:0 0 22px;
}
.mg-contact-info-card{
    display:flex;
    gap:12px;
    align-items:center;
    min-height:86px;
    padding:15px;
    background:#fff9f6;
    border:1px solid #ead5cc;
    border-radius:15px;
    box-sizing:border-box;
}
.mg-contact-info-card>span{font-size:24px}
.mg-contact-info-card strong{
    display:block;
    font-size:12px;
    margin-bottom:4px;
    color:#163d34;
}
.mg-contact-info-card p,
.mg-contact-info-card a{
    margin:0;
    color:#68736d!important;
    font-size:11px;
    line-height:1.35;
    text-decoration:none;
}
.mg-contact-main{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
    gap:20px;
    align-items:start;
}
.mg-contact-form-card,
.mg-contact-side-card,
.mg-contact-map{
    background:#fff9f6;
    border:1px solid #ead5cc;
    border-radius:17px;
}
.mg-contact-form-card{padding:26px}
.mg-contact-form-card h2{
    margin:6px 0 8px;
    font-size:28px;
}
.mg-contact-form-card>p,
.mg-contact-side-card p{
    margin:0 0 18px;
    color:#69736e;
    font-size:12px;
    line-height:1.55;
}
.mg-contact-form{display:grid;gap:12px}
.mg-contact-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.mg-contact-form label{
    display:grid;
    gap:6px;
    color:#345247;
    font-size:11px;
    font-weight:700;
}
.mg-contact-form input,
.mg-contact-form select,
.mg-contact-form textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid #ddcec6;
    border-radius:11px;
    background:#fff;
    color:#233a32;
    padding:11px 12px;
    font:inherit;
    outline:none;
}
.mg-contact-form input:focus,
.mg-contact-form select:focus,
.mg-contact-form textarea:focus{
    border-color:#84a092;
    box-shadow:0 0 0 3px rgba(24,76,56,.08);
}
.mg-contact-hp{
    position:absolute!important;
    left:-99999px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
}
.mg-contact-side{display:grid;gap:14px}
.mg-contact-side-card{padding:24px}
.mg-contact-side-card h3{
    margin:6px 0 10px;
    font-size:24px;
}
.mg-contact-side-card.mini{padding:16px}
.mg-contact-mini-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}
.mg-contact-mini-grid div{
    min-height:72px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    background:#fff;
    border:1px solid #eee0d8;
    border-radius:12px;
    padding:8px;
}
.mg-contact-mini-grid span{font-size:23px}
.mg-contact-mini-grid strong{font-size:10px;color:#52645a}
.mg-contact-notice{
    margin:12px 0 16px;
    padding:11px 13px;
    border-radius:10px;
    font-size:11px;
    font-weight:700;
}
.mg-contact-notice.success{background:#e8f4ec;color:#1f6a45}
.mg-contact-notice.warning{background:#fff0e8;color:#9a532e}
.mg-contact-map{
    margin-top:22px;
    padding:8px;
    overflow:hidden;
}
.mg-contact-map iframe{
    display:block;
    width:100%!important;
    min-height:360px;
    border:0;
    border-radius:12px;
}
@media(max-width:900px){
    .mg-contact-page{width:calc(100vw - 24px)}
    .mg-contact-hero{grid-template-columns:1fr}
    .mg-contact-hero-art{display:none}
    .mg-contact-info-grid{grid-template-columns:repeat(2,1fr)}
    .mg-contact-main{grid-template-columns:1fr}
}
@media(max-width:580px){
    .mg-contact-page{width:calc(100vw - 16px)}
    .mg-contact-hero{min-height:auto;border-radius:14px}
    .mg-contact-hero-copy{padding:24px}
    .mg-contact-hero h1{font-size:31px}
    .mg-contact-info-grid{grid-template-columns:1fr}
    .mg-contact-row{grid-template-columns:1fr}
    .mg-contact-form-card,.mg-contact-side-card{padding:18px}
}
