/* ============================================================================
   th-contact.css — Contact page on the theme-lab shell ($th_lab_layout).
   Binds tokens.css only. Zero raw brand hex.
   ============================================================================ */

.page-contact .svc-masthead-inner .th-giant{max-width:10ch}

/* ---- Reach us grid ---- */
.contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(240px,.85fr);
    gap:clamp(28px,4vw,48px);
    align-items:start;
}
.contact-form-col{min-width:0}
.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-field{margin:0}

.page-contact .section-sub strong{color:var(--white);font-weight:600}

/* ---- Form controls (no Bootstrap) ---- */
.page-contact .form-control,
.page-contact .form-select{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:.75rem .9rem;
    border-radius:10px;
    border:1px solid var(--gray-line);
    background:var(--bg-2);
    color:var(--white);
    font:inherit;
    font-size:.95rem;
    line-height:1.45;
    transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.page-contact .form-control::placeholder{color:var(--gray)}
.page-contact .form-select{
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right .9rem center;
    padding-right:2.4rem;
    cursor:pointer;
}
.page-contact .form-select:invalid{color:var(--gray)}
.page-contact .form-select option{background:var(--bg-2);color:var(--white)}
.page-contact textarea.form-control{min-height:9rem;resize:vertical}
.page-contact .form-control:hover,
.page-contact .form-select:hover{border-color:color-mix(in srgb, var(--white) 18%, transparent)}
.page-contact .form-control:focus,
.page-contact .form-select:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 3px var(--blue-a20);
}
.page-contact .form-control:focus-visible,
.page-contact .form-select:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:2px;
}

.page-contact .contact-form .btn-primary{
    align-self:flex-start;
    margin-top:.35rem;
    min-height:44px;
}
.page-contact .contact-form .btn-primary:disabled{
    opacity:.65;
    cursor:wait;
}

.contact-privacy{
    margin:1rem 0 0;
    font-size:.85rem;
    color:var(--gray);
    line-height:1.55;
}

.visually-hidden{
    position:absolute!important;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);
    white-space:nowrap;border:0;
}

/* ---- Alerts ---- */
.contact-alert{
    margin:0 0 .25rem;
    padding:.85rem 1rem;
    border-radius:10px;
    border:1px solid var(--gray-line);
    font-size:.92rem;
    line-height:1.5;
}
.contact-alert--success{
    background:var(--blue-a12);
    border-color:var(--blue-a20);
    color:var(--white);
}
.contact-alert--danger{
    background:color-mix(in srgb, #dc3545 14%, transparent);
    border-color:color-mix(in srgb, #dc3545 45%, transparent);
    color:#fecaca;
}

/* ---- Direct panel ---- */
.contact-direct{
    padding:clamp(1.15rem,2vw,1.45rem) clamp(1.15rem,2vw,1.5rem);
    border-radius:16px;
    background:var(--bg-card);
    border:1px solid var(--gray-line);
    position:sticky;
    top:88px;
}
.contact-direct-label{
    margin:0 0 .35rem;
    font-family:var(--font-data);
    font-size:.68rem;
    letter-spacing:1.8px;
    text-transform:uppercase;
    color:var(--blue);
}
.contact-direct-title{
    margin:0 0 1.1rem;
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:-.2px;
    color:var(--white);
}
.contact-direct-list{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.contact-direct-list li{
    display:flex;
    flex-direction:column;
    gap:3px;
}
.contact-direct-key{
    font-family:var(--font-data);
    font-size:.62rem;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--gray);
}
.contact-direct-list a,
.contact-direct-list span:not(.contact-direct-key){
    color:var(--white);
    text-decoration:none;
    font-size:.95rem;
    line-height:1.45;
}
.contact-direct-list a:hover{color:var(--blue-light)}
.contact-direct-list a:focus-visible{
    outline:2px solid var(--blue);
    outline-offset:3px;
    border-radius:4px;
}

@media(max-width:720px){
    .contact-grid{grid-template-columns:1fr}
    .contact-direct{position:static}
    .page-contact .contact-form .btn-primary{
        width:100%;
        justify-content:center;
    }
}

/* ---- Embed mode (quote modal iframe) ---- */
body.th-embed #navbar,
body.th-embed footer,
body.th-embed .mobile-cta-bar,
body.th-embed .svc-masthead,
body.th-embed .th-modal{
    display:none!important;
}
body.th-embed{
    background:var(--bg);
}
body.th-embed #main-content{
    min-height:0;
}
body.th-embed .section{
    padding:clamp(20px,4vw,36px) 0;
    border-top:0;
}
body.th-embed .kicker{margin-bottom:1rem}
body.th-embed .section-sub{margin-bottom:1.4rem}
body.th-embed .contact-grid{grid-template-columns:1fr}
body.th-embed .contact-direct{position:static;margin-top:.5rem}
body.th-embed .wrap{padding-left:clamp(16px,3vw,28px);padding-right:clamp(16px,3vw,28px)}