/* contact.html: page-specific finish, loaded after inner.css and scoped to body[data-page="contact"]. */

/* ---------- enquiry routes: icon tile, label and title, description, then an action row on the card's bottom edge ---------- */
body[data-page="contact"] .pg-ico{--tc:var(--teal);display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;color:var(--tc);margin-bottom:8px;
  background:color-mix(in srgb,var(--tc) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tc) 24%,transparent);
  transition:transform .6s var(--spring),background .3s,color .3s}
body[data-page="contact"] .pg-ico svg.li{width:21px;height:21px;stroke-width:1.9}
body[data-page="contact"] .cards.c4{gap:16px}
body[data-page="contact"] .card.ic{padding:24px 24px 20px;gap:8px;border-radius:18px;scroll-margin-top:150px}
body[data-page="contact"] .card.ic:nth-child(3n+2) .pg-ico{--tc:var(--turmeric)}
body[data-page="contact"] .card.ic:hover .pg-ico{transform:rotate(-8deg) scale(1.08);background:var(--tc);color:var(--surface)}
body[data-page="contact"] .card.ic h3{font-size:19.5px}
body[data-page="contact"] .card.ic p{line-height:1.6}
body[data-page="contact"] .card.ic .acts{margin-top:10px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
body[data-page="contact"] .card.ic .acts .btn{min-height:38px}
body[data-page="contact"] .card.ic .acts .btn:first-child{background:color-mix(in srgb,var(--teal) 9%,transparent);border-color:color-mix(in srgb,var(--teal) 28%,transparent);color:var(--teal)}
body[data-page="contact"] .card.ic .acts .btn:first-child:hover{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
body[data-page="contact"] .card.ic:target{border-color:var(--teal);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 14%,transparent),var(--lift-hi)}

/* ---------- send a message ---------- */
body[data-page="contact"] #form .two{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
body[data-page="contact"] #form h2{margin-top:14px}
body[data-page="contact"] #form .lead-p{line-height:1.65;color:var(--ink-2)}
body[data-page="contact"] .ct-mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0;padding:14px 16px;border-radius:16px;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 80%,transparent);box-shadow:var(--lift)}
body[data-page="contact"] .ct-mail > svg.li{width:36px;height:36px;padding:8px;border-radius:11px;color:var(--teal);background:color-mix(in srgb,var(--teal) 11%,transparent);stroke-width:1.9}
body[data-page="contact"] .ct-mail code{font-family:var(--sans);font-weight:600;letter-spacing:-.005em;color:var(--ink);min-width:0;overflow-wrap:anywhere;flex:1 1 200px}
body[data-page="contact"] .ct-mail .linkbtn{padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--teal) 9%,transparent);transition:background .25s,color .25s}
body[data-page="contact"] .ct-mail .linkbtn:hover{text-decoration:none;background:var(--teal);color:var(--teal-ink)}
body[data-page="contact"] #form .muted{line-height:1.6}

/* the form: sentence-case labels, 48px fields, a clear focus ring, and the submit row set apart */
body[data-page="contact"] .form{gap:18px 18px;padding:30px;border-radius:22px;box-shadow:var(--lift-hi)}
body[data-page="contact"] .form label{font:600 13.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px}
body[data-page="contact"] .form input,body[data-page="contact"] .form select{height:48px;padding:0 14px;font-size:15px}
body[data-page="contact"] .form textarea{min-height:140px;padding:12px 14px;font-size:15px;line-height:1.55}
body[data-page="contact"] .form input,body[data-page="contact"] .form select,body[data-page="contact"] .form textarea{background:var(--paper);border-color:color-mix(in srgb,var(--line) 90%,transparent)}
body[data-page="contact"] .form input:hover,body[data-page="contact"] .form select:hover,body[data-page="contact"] .form textarea:hover{border-color:color-mix(in srgb,var(--teal) 35%,var(--line))}
body[data-page="contact"] .form input:focus,body[data-page="contact"] .form select:focus,body[data-page="contact"] .form textarea:focus{background:var(--surface)}
body[data-page="contact"] .form select{cursor:pointer}
body[data-page="contact"] .form .actions{margin-top:4px;padding-top:20px;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);gap:12px 16px}
body[data-page="contact"] .form .actions .btn{min-height:48px;padding-inline:26px;font-size:15px}
body[data-page="contact"] .form .done{padding:14px 16px;border-radius:14px;line-height:1.55;border:1px solid color-mix(in srgb,var(--teal) 25%,transparent);animation:ct-in .5s var(--ease-out) backwards}
@keyframes ct-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1000px){body[data-page="contact"] #form .two{gap:36px}}
@media (max-width:860px){body[data-page="contact"] #form .two{grid-template-columns:1fr;gap:28px}}
@media (max-width:560px){
  body[data-page="contact"] .card.ic{padding:20px 20px 18px}
  body[data-page="contact"] .form{padding:20px;gap:16px}
  body[data-page="contact"] .form .actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion: reduce){
  html:not(.force-motion) body[data-page="contact"] .form .done{animation:none}
  html:not(.force-motion) body[data-page="contact"] .pg-ico{transition:none}
  html:not(.force-motion) body[data-page="contact"] .card.ic:hover .pg-ico{transform:none}
}

/* a photo from a past Hyderabad congress across the top of each topic card; it zooms gently on hover */
body[data-page="contact"] .card.ic{overflow:hidden}
body[data-page="contact"] .ct-img{position:relative;margin:-24px -24px 14px;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2)}
body[data-page="contact"] .ct-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
body[data-page="contact"] .ct-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgb(10 10 31 / .25))}
body[data-page="contact"] .card.ic:hover .ct-img img{transform:scale(1.06)}
@media (max-width:560px){body[data-page="contact"] .ct-img{margin:-20px -20px 12px}}
body[data-page="contact"] .form input[readonly]{background:color-mix(in srgb,var(--teal) 6%,var(--paper));color:var(--ink);font-weight:600;cursor:default}