/* ============================================================================
   CONTACT PAGE
   ============================================================================ */
.contact-hero{text-align:center;max-width:60ch;margin:0 auto}
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;max-width:1040px;margin:44px auto 0;align-items:start}

/* left: form card */
.contact-form{background:#fff;border:1px solid var(--paper-line);border-radius:18px;padding:30px 32px;box-shadow:var(--shadow-float)}
.contact-form h2{font-family:var(--font-display);font-size:22px;font-weight:700;margin:0 0 4px}
.contact-form__sub{font-size:14px;color:var(--ink-55);margin:0 0 24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;background:var(--paper-2);
  border:1px solid var(--ink-12);border-radius:11px;padding:12px 14px;font:inherit;font-size:14.5px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--emerald);
  box-shadow:0 0 0 3px rgba(15,157,107,.14);background:#fff}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field--error input,.field--error select,.field--error textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(229,72,77,.12)}
.field__err{font-size:12.5px;color:var(--red);margin-top:6px;display:none}
.field--error .field__err{display:block}
.field__hint{font-size:12px;color:var(--ink-40);margin-top:6px}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.contact-submit{background:var(--emerald);color:#fff;border:0;border-radius:12px;padding:14px 26px;font-size:15px;
  font-weight:700;cursor:pointer;transition:all .14s;flex:1;min-width:180px}
.contact-submit:hover{background:#0caf78}
.contact-submit:active{transform:scale(.98)}
.contact-wa{background:#25d366;color:#fff;border:0;border-radius:12px;padding:14px 22px;font-size:15px;font-weight:700;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px;justify-content:center;transition:all .14s}
.contact-wa:hover{background:#1fbe5a}
.form-note{font-size:12px;color:var(--ink-40);margin-top:16px;line-height:1.5}
.form-success{display:none;background:#e7f5ef;border:1px solid #bfe3d2;border-radius:12px;padding:16px 18px;
  color:#0a7a52;font-size:14.5px;line-height:1.55;margin-bottom:20px}
.form-success[data-show="true"]{display:block}

/* right: contact info cards */
.contact-info{display:flex;flex-direction:column;gap:14px}
.info-card{background:#fff;border:1px solid var(--paper-line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-card);
  display:flex;gap:15px;align-items:flex-start;text-decoration:none;transition:transform .13s,border-color .13s}
.info-card:hover{transform:translateY(-2px);border-color:var(--amber)}
.info-card__ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;font-size:20px}
.info-card__ic.wa{background:#e4f7ea;color:#1fbe5a}
.info-card__ic.mail{background:#e8eefb;color:#2f5fd0}
.info-card__ic.phone{background:#fdf0d8;color:#b8790a}
.info-card__ic.loc{background:#fdecec;color:#c0393e}
.info-card__ic.time{background:#eef0f3;color:#3a4a5e}
.info-card__t{font-weight:700;font-size:15px;color:var(--ink);margin-bottom:2px}
.info-card__v{font-size:14px;color:var(--ink-70);line-height:1.5;word-break:break-word}
.info-card__v strong{color:var(--ink)}

/* department emails strip */
.depts{max-width:1040px;margin:40px auto 0;background:var(--paper-2);border:1px solid var(--paper-line);border-radius:16px;padding:26px 30px}
.depts h3{font-family:var(--font-display);font-size:18px;font-weight:700;margin:0 0 4px}
.depts__sub{font-size:13.5px;color:var(--ink-55);margin:0 0 20px}
.depts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.dept a{color:var(--emerald-deep);text-decoration:none;font-size:14px;font-family:var(--font-mono)}
.dept a:hover{text-decoration:underline}
.dept__label{font-size:12px;color:var(--ink-40);text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}

@media(max-width:820px){
  .contact-grid{grid-template-columns:1fr;gap:24px}
  .contact-form{padding:24px 20px}
  .contact-actions{flex-direction:column}
  .contact-submit,.contact-wa{width:100%}
}