/* ==========================================================
   CONTACT PAGE — hero, form + info cards, social row,
   office locations, final CTA. Markup: contact.html
   Loaded after header.css/buttons.css/base.css/tokens.css.
   Shares .eyebrow, .back-home, .cta-banner, .btn-outline-light,
   .btn-lg, .site-footer/.footer-grid with products.css — see
   the note in solutions.css about eventually moving those into
   shared hero.css/cta.css/footer.css files.
   ========================================================== */

/* ==========================================
   HERO — shorter version of the full-bleed
   treatment used on Products/Solutions: no
   stat row or dashboard mockup, just heading,
   description and two buttons.
========================================== */

.contact-hero{
    position:relative;
    overflow:hidden;
    color:var(--white);
    padding:170px 0 88px;
    background:
        linear-gradient(115deg, rgba(21,17,26,.92) 0%, rgba(21,17,26,.62) 45%, rgba(163,31,65,.38) 100%),
        url('../assets/hero/contact-hero-bg.png') center / cover no-repeat,
        var(--ink);
}
.contact-hero .eyebrow::before{
    box-shadow:0 0 0 3px rgba(203,41,82,.4);
}
.contact-hero h1{
    color:var(--white);
    font-size:clamp(32px,4.2vw,48px);
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.08;
    margin-bottom:18px;
}
.contact-hero .lead{
    font-size:17px;
    line-height:1.65;
    color:rgba(255,255,255,.82);
    max-width:600px;
    margin-bottom:32px;
}
.contact-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

@media (max-width:980px){
    .contact-hero{padding:150px 0 72px;}
}
@media (max-width:620px){
    .contact-hero{padding:130px 0 56px;}
}

/* ==========================================
   MAIN CONTACT SECTION — form + info cards
========================================== */

.contact-section{
    padding:88px 0;
}
.contact-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:40px;
    align-items:start;
}

/* Form card */
.contact-form-card{
    background:var(--bg-alt);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-lg);
    padding:40px;
}
.contact-form-card h2{
    font-size:22px;
    font-weight:800;
    letter-spacing:-.01em;
    color:var(--ink);
    margin-bottom:28px;
}
.form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}
.form-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-bottom:18px;
}
.form-row .form-field{
    margin-bottom:0;
}
.form-field label{
    font-size:12.5px;
    font-weight:700;
    color:var(--gray-700);
}
.form-field input,
.form-field select,
.form-field textarea{
    font-family:inherit;
    font-size:14.5px;
    color:var(--ink);
    background:var(--white);
    border:1px solid var(--gray-300);
    border-radius:var(--radius-sm);
    padding:11px 14px;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
    outline:none;
    border-color:var(--crimson);
    box-shadow:0 0 0 3px var(--crimson-tint);
}
.form-field textarea{
    resize:vertical;
    min-height:110px;
}
.contact-form-card .btn{
    width:100%;
    margin-top:6px;
    padding:13px 20px;
}
.form-status{
    min-height:20px;
    font-size:13px;
    font-weight:600;
    margin-top:10px;
}
.form-status.success{
    color:#1E8E4E;
}
.form-status.error{
    color:#C4304C;
}
.form-hp{
    position:absolute;
    left:-9999px;
    opacity:0;
}

/* Info cards */
.contact-info{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.info-card{
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-md);
    padding:22px 24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    transition:transform .2s ease, box-shadow .2s ease;
}
.info-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px -22px rgba(21,17,26,.3);
}
.info-icon{
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--crimson-tint);
    color:var(--crimson-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.info-icon svg{width:20px; height:20px;}
.info-card h3{
    font-size:15px;
    font-weight:800;
    color:var(--ink);
    margin-bottom:6px;
}
.info-card p, .info-card a{
    display:block;
    font-size:13.5px;
    color:var(--gray-700);
    line-height:1.6;
}
.info-card a:hover{
    color:var(--crimson);
}

@media (max-width:900px){
    .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
    .form-row{grid-template-columns:1fr;}
    .contact-form-card{padding:26px;}
}

/* ==========================================
   SOCIAL MEDIA SECTION
========================================== */

.social-section{
    padding:80px 0;
    background:var(--bg-alt);
    text-align:center;
}
.social-section h2{
    font-size:clamp(24px,2.8vw,32px);
    font-weight:800;
    letter-spacing:-.015em;
    color:var(--ink);
    margin-bottom:12px;
}
.social-section p{
    max-width:56ch;
    margin:0 auto 32px;
    font-size:15px;
    color:var(--gray-700);
}
.social-row{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}
.social-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--white);
    border:1px solid var(--gray-150);
    color:var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.social-icon:hover{
    background:var(--crimson);
    border-color:var(--crimson);
    color:var(--white);
    transform:translateY(-3px);
}

/* ==========================================
   OFFICE LOCATIONS
========================================== */

.locations-section{
    padding:88px 0;
}
.locations-section h2{
    font-size:clamp(24px,2.8vw,32px);
    font-weight:800;
    letter-spacing:-.015em;
    color:var(--ink);
    margin-bottom:40px;
}
.locations-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
}
.location-card{
    background:var(--white);
    border:1px solid var(--gray-150);
    border-radius:var(--radius-lg);
    overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease;
}
.location-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.location-map{
    aspect-ratio:16/9;
    overflow:hidden;
}
.location-map iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}
.location-body{
    padding:24px;
}
.location-body h3{
    font-size:17px;
    font-weight:800;
    color:var(--ink);
    margin-bottom:14px;
}
.location-detail{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14px;
    color:var(--gray-700);
    margin-bottom:8px;
}
.location-detail svg{
    width:16px;
    height:16px;
    color:var(--crimson);
    flex-shrink:0;
    margin-top:2px;
}
.location-detail a{
    color:var(--gray-700);
}
.location-detail a:hover{
    color:var(--crimson);
}
.location-btn{
    margin-top:18px;
}
.location-btn a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 20px;
    border-radius:999px;
    background:var(--crimson);
    color:#fff;
    font-weight:600;
    font-size:14px;
    text-decoration:none;
    transition:.25s ease;
}
.location-btn a:hover{
    background:var(--crimson-dark);
    transform:translateY(-2px);
}
.locations-section .section-subtitle{
    text-align:center;
    color:var(--gray-500);
    max-width:650px;
    margin:0 auto 40px;
    line-height:1.7;
}

@media (max-width:760px){
    .locations-grid{grid-template-columns:1fr;}
}