/* AutoHUMP Contact — aligned to aboutPedigree.css visual language */
:root{
    --blue:#000080;
    --red:#c1121f;
    --black:#000;
    --grey:#d1d1d1;
    --soft:#f6f7f9;
}
*{box-sizing:border-box}
.contactPage{width:100%;background:#fff;color:#161616}

/* HERO */
.contactHero{
    width:min(1600px,calc(100% - 32px));
    min-height:590px;
    margin:24px auto 0;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    overflow:hidden;
    background:#fff;
    border:1px solid #ececec
}
.contactHeroCopy{
    padding:clamp(42px,6vw,92px);
    display:flex;
    flex-direction:column;
    justify-content:center
}
.contactEyebrow,
.contactSectionHeading>span,
.contactFormHeading>span{
    color:var(--red);
    font-size:12px;
    font-weight:900;
    letter-spacing:.13em
}
.contactHero h1{
    max-width:760px;
    margin:12px 0 22px;
    color:#000;
    font-size:clamp(44px,5.6vw,88px);
    line-height:.98;
    letter-spacing:-.045em
}
.contactHero h1 span{color:var(--blue)}
.contactHeroCopy>p{
    max-width:700px;
    margin:0;
    color:#4c4c4c;
    font-size:clamp(17px,1.6vw,22px);
    line-height:1.6
}
.contactHeroPoints{
    margin-top:36px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.contactHeroPoints div{
    padding-top:15px;
    border-top:3px solid #000
}
.contactHeroPoints div:nth-child(2){border-top-color:var(--blue)}
.contactHeroPoints div:nth-child(3){border-top-color:var(--red)}
.contactHeroPoints strong,
.contactHeroPoints span{display:block}
.contactHeroPoints strong{
    font-size:12px;
    letter-spacing:.06em
}
.contactHeroPoints span{
    margin-top:7px;
    color:#666;
    font-size:12px;
    line-height:1.45
}
.contactHeroPoints a{color:inherit;text-decoration:none}
.contactHeroPoints a:hover{color:var(--red)}

.contactHeroMap{
    position:relative;
    min-height:590px;
    background:#e9ebef
}
#map-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    border:0
}
.contactHeroMap:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.13),transparent 42%);
    pointer-events:none
}
.contactMapStamp{
    position:absolute;
    right:30px;
    bottom:30px;
    z-index:2;
    min-width:290px;
    padding:20px 24px;
    background:#fff;
    border-left:6px solid var(--red);
    box-shadow:0 15px 50px rgba(0,0,0,.16)
}
.contactMapStamp b,
.contactMapStamp span{display:block}
.contactMapStamp b{font-size:18px}
.contactMapStamp span{
    margin-top:4px;
    color:var(--blue);
    font-weight:800
}

/* CONTENT */
.contactSection{
    width:min(1400px,calc(100% - 40px));
    margin:0 auto;
    padding:100px 0
}
.contactSectionHeading{
    max-width:920px;
    margin-bottom:48px
}
.contactSectionHeading h2,
.contactFormHeading h2{
    margin:10px 0 14px;
    color:#000;
    font-size:clamp(34px,4.2vw,62px);
    line-height:1.03;
    letter-spacing:-.035em
}
.contactSectionHeading p{
    margin:0;
    color:#5a5a5a;
    font-size:17px;
    line-height:1.7
}
.contactWorkspace{
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:16px;
    align-items:stretch
}

/* INFORMATION CARDS */
.contactDetails{
    display:grid;
    grid-template-columns:1fr;
    gap:12px
}
.contactDetail{
    min-height:190px;
    padding:28px;
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid #e5e5e5;
    border-top:6px solid var(--blue)
}
.contactDetail>span{
    color:var(--blue);
    font-size:11px;
    font-weight:900;
    letter-spacing:.1em
}
.contactDetail h3{
    margin:auto 0 10px;
    font-size:25px;
    line-height:1.08
}
.contactDetail p{
    margin:0 0 8px;
    color:#666;
    font-size:14px;
    line-height:1.6
}
.contactDetail a{
    width:max-content;
    max-width:100%;
    margin-top:3px;
    color:var(--blue);
    font-size:13px;
    font-weight:800;
    text-decoration:none
}
.contactDetail a:hover{color:var(--red)}
.contactDetail--red{border-top-color:var(--red)}
.contactDetail--red>span{color:var(--red)}
.contactDetail--black{
    background:#000;
    border-color:#000;
    border-top-color:#000
}
.contactDetail--black>span,
.contactDetail--black h3{color:#fff}
.contactDetail--black p{color:#d0d0d0}
.contactDetail--black a{color:#fff}
.contactDetail--black a:hover{color:#d1d1d1}

/* FORM */
.contactFormPanel{
    padding:clamp(32px,4vw,58px);
    background:var(--soft);
    border:1px solid #e5e5e5
}
.contactFormHeading{margin-bottom:34px}
.contactFormHeading h2{font-size:clamp(30px,3.5vw,48px)}
.contactForm{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 18px
}
.contactField{min-width:0}
.contactField--full{grid-column:1/-1}
.contactField label{
    display:block;
    margin-bottom:8px;
    color:#111;
    font-size:11px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase
}
.contactField input,
.contactField textarea{
    width:100%;
    margin:0;
    padding:15px 16px;
    border:1px solid #d6d6d6;
    border-radius:0;
    outline:0;
    background:#fff;
    color:#161616;
    font:inherit;
    font-size:14px;
    box-shadow:none;
    transition:border-color .16s ease,box-shadow .16s ease
}
.contactField input{height:52px}
.contactField textarea{
    min-height:210px;
    resize:vertical;
    line-height:1.6
}
.contactField input:focus,
.contactField textarea:focus{
    border-color:var(--blue);
    box-shadow:inset 4px 0 0 var(--blue)
}
.contactField input::placeholder,
.contactField textarea::placeholder{color:#999}
#lblEmail m{
    color:var(--red);
    font-style:normal
}
.contactFormFooter{
    padding-top:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-top:1px solid #ddd
}
.contactFormFooter p{
    max-width:520px;
    margin:0;
    color:#777;
    font-size:11px;
    line-height:1.5
}
.contactSubmit{
    min-width:180px;
    min-height:48px;
    padding:14px 22px;
    border:0;
    border-radius:0;
    background:var(--blue);
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    cursor:pointer;
    transition:background .15s ease
}
.contactSubmit:hover,
.contactSubmit:focus{background:#000}

/* RESPONSIVE */
@media(max-width:1100px){
    .contactHero{grid-template-columns:1fr}
    .contactHeroMap{min-height:480px}
    .contactWorkspace{grid-template-columns:1fr}
    .contactDetails{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
    .contactDetails{grid-template-columns:1fr}
}
@media(max-width:720px){
    .contactHero{
        width:100%;
        margin-top:0;
        border-left:0;
        border-right:0
    }
    .contactHeroCopy{padding:42px 20px}
    .contactHeroPoints{grid-template-columns:1fr}
    .contactHeroMap{min-height:390px}
    .contactMapStamp{
        left:18px;
        right:18px;
        bottom:18px;
        min-width:0
    }
    .contactSection{
        width:min(100% - 28px,1400px);
        padding:70px 0
    }
    .contactFormPanel{padding:30px 20px}
    .contactForm{grid-template-columns:1fr}
    .contactField--full{grid-column:auto}
    .contactFormFooter{
        align-items:stretch;
        flex-direction:column
    }
    .contactSubmit{width:100%}
}