/* =========================================================
   CONTACT PAGE
   Relies on tokens/header/footer/.btn/.eyebrow/.reveal
   already defined in css/style.css — do not redefine them
   here, just add to them.
========================================================= */

.contact-hero{
    padding:70px 6% 20px;
    text-align:center;
}

.contact-hero-inner{
    max-width:640px;
    margin:0 auto;
}

.contact-title{
    font-size:clamp(32px,5vw,52px);
    font-weight:800;
    letter-spacing:-0.5px;
    line-height:1.15;
    margin-bottom:16px;
}

.contact-lead{
    color:var(--text-muted);
    font-size:16.5px;
    max-width:520px;
    margin:0 auto;
}

.contact-body{
    max-width:var(--container);
    margin:0 auto;
    padding:50px 6% 120px;
}

.contact-grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:60px;
    align-items:start;
}

/* ---------- Info column ---------- */

.contact-info{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.info-card{
    display:flex;
    align-items:flex-start;
    gap:16px;
    background:var(--white);
    border-radius:var(--radius-md);
    padding:20px 22px;
    box-shadow:0 10px 26px rgba(34,31,26,.08);
}

.info-icon{
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(38,67,196,.1), rgba(14,165,122,.1));
    color:var(--kalaa-blue);
}

.info-card h3{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.5px;
    font-weight:600;
    color:var(--text-muted);
    margin-bottom:4px;
}

.info-card a,
.info-card p{
    font-size:16px;
    font-weight:500;
    color:var(--text-dark);
    text-decoration:none;
}

.info-card a:hover{
    color:var(--siddhi-green);
}

.social-row{
    display:flex;
    gap:12px;
    margin-top:8px;
}

.social-btn{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--white);
    color:var(--kalaa-blue);
    box-shadow:0 10px 22px rgba(34,31,26,.08);
    transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.social-btn:hover{
    background:linear-gradient(100deg,var(--kalaa-blue),var(--siddhi-green));
    color:var(--white);
    transform:translateY(-3px);
}

/* ---------- Form column ---------- */

.contact-form-wrap{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:40px;
    box-shadow:0 20px 44px rgba(34,31,26,.1);
}

.contact-form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.form-row{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-row label{
    font-size:13.5px;
    font-weight:600;
    color:var(--text-dark);
}

.form-row .optional{
    font-weight:400;
    color:var(--text-muted);
}

.form-row input,
.form-row select,
.form-row textarea{
    font-family:var(--font-body);
    font-size:15px;
    padding:13px 16px;
    border-radius:12px;
    border:1.5px solid rgba(34,31,26,.12);
    background:var(--ivory);
    color:var(--text-dark);
    outline:none;
    transition:border-color .25s ease, box-shadow .25s ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
    border-color:var(--siddhi-green);
    box-shadow:0 0 0 3px rgba(14,165,122,.15);
}

.form-row textarea{ resize:vertical; }

.form-submit{
    margin-top:6px;
    width:100%;
}

.form-note{
    text-align:center;
    font-size:13px;
    color:var(--text-muted);
}

.form-status{
    text-align:center;
    font-size:14px;
    font-weight:500;
    min-height:1px;
}

.form-status.is-success{ color:var(--siddhi-green); }
.form-status.is-error{ color:#C0392B; }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){

    .contact-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .contact-form-wrap{ padding:28px; }
}

@media (max-width:560px){

    .contact-hero { padding: 40px 5% 10px; }
    .contact-body { padding: 30px 5% 80px; }
    .contact-form-wrap { padding: 20px; }

    .info-card{ padding:16px 18px; }

    /* .contact-form-wrap{ padding:22px; border-radius:var(--radius-md); } */

    .social-row{ justify-content:center; }
}

/* =========================================================
   POLICIES
========================================================= */

.policies{
    max-width:900px;
    margin:0 auto;
    padding:20px 6% 110px;
}

.policies-intro{
    text-align:center;
    margin-bottom:44px;
}

.policies-lead{
    color:var(--text-muted);
    font-size:16px;
    margin-top:10px;
}

.policies-accordion{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.policy-item{
    background:var(--white);
    border-radius:var(--radius-md);
    box-shadow:0 10px 26px rgba(34,31,26,.08);
    overflow:hidden;
}

.policy-item summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:20px 24px;
    cursor:pointer;
    font-weight:600;
    font-size:16px;
    color:var(--text-dark);
}

.policy-item summary::-webkit-details-marker{ display:none; }

.policy-item .chev{
    color:var(--gold);
    flex-shrink:0;
    transition:transform .3s var(--ease);
}

.policy-item[open] .chev{
    transform:rotate(180deg);
}

.policy-body{
    padding:0 24px 24px;
    color:var(--text-muted);
    font-size:15px;
    line-height:1.85;
}

.policy-body p{ margin-bottom:14px; }
.policy-body p:last-child{ margin-bottom:0; }

.policy-body a{
    color:var(--siddhi-green);
    font-weight:500;
    text-decoration:underline;
    text-underline-offset:2px;
}

.policy-list{
    margin:0 0 14px 20px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.policy-note{
    background:var(--ivory);
    border-radius:12px;
    padding:16px 18px;
    font-size:14px;
}

.policies-footnote{
    text-align:center;
    font-size:13.5px;
    color:var(--text-muted);
    margin-top:36px;
}

.policies-footnote a{
    color:var(--siddhi-green);
    font-weight:500;
}

@media (max-width:560px){

    .policies{ padding:10px 5% 80px; }

    .policy-item summary{ padding:16px 18px; font-size:15px; }

    .policy-body{ padding:0 18px 20px; font-size:14.5px; }
}