/* Contact us page (6 Nov 2026, Owen's mockup). Loaded by page-contact-us.php only; every rule sits under .skp-contact.
   Tokens from style.css: navy/blue headings, red accents and button, 9px radius (nav pills, card corners). */
.skp-contact { --c-tile: #E1E8F2; --c-band: #DCE5F1; --c-rule: #C7D1DF; padding-top: 4px; }
.skp-contact h1.skp-contact-title { font-size: 42px; font-weight: 700; color: var(--skp-blue); margin: 4px 0 18px; }
.skp-contact h1.skp-contact-title::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--skp-red); margin-top: 12px; }
.skp-contact .skp-contact-intro { max-width: 680px; margin-bottom: 18px; color: #1A1A1A; }

.skp-contact .skp-contact-tile { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9px; background: var(--c-tile); color: var(--skp-blue); }
.skp-contact .skp-contact-tile svg { display: block; }
.skp-contact .skp-contact-email { display: flex; align-items: center; gap: 14px; margin: 0 0 26px; }
.skp-contact .skp-contact-email a { color: var(--skp-blue); font-weight: 600; font-size: 18px; text-underline-offset: 3px; }
.skp-contact .skp-contact-email a:hover { color: var(--skp-red); }

.skp-contact .skp-contact-rule { border: 0; border-top: 1px solid var(--c-rule); margin: 0 0 24px; }
.skp-contact h2.skp-contact-h2 { font-size: 28px; font-weight: 700; margin: 0 0 18px; }

.skp-contact .skp-contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
/* Each card is a subgrid over four shared rows (head, description, label, examples), so the EXAMPLES lines align across the row */
.skp-contact .skp-contact-card { background: #fff; border-radius: 9px; padding: 20px 20px 18px; display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; box-shadow: 0 2px 10px rgba(19, 69, 132, .08); }
.skp-contact .skp-contact-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.skp-contact .skp-contact-card h3 { font-size: 24px; font-weight: 700; color: var(--skp-blue); }
.skp-contact .skp-contact-card > p { font-size: 15px; line-height: 1.5; margin: 0 0 16px; color: #1A1A1A; }
.skp-contact .skp-contact-card p.skp-contact-label { margin: 0 0 8px; padding-top: 12px; border-top: 1px solid var(--skp-line); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #555; }
.skp-contact .skp-contact-examples { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.skp-contact .skp-contact-examples li { display: flex; align-items: baseline; gap: 9px; margin: 0 0 7px; font-weight: 400; line-height: 1.4; }
.skp-contact .skp-contact-examples li:last-child { margin-bottom: 0; }
.skp-contact .skp-contact-examples svg { flex: 0 0 auto; color: var(--skp-red); position: relative; top: 2px; }
.skp-contact .skp-contact-examples a { color: var(--skp-blue); font-weight: 600; text-underline-offset: 2px; }
.skp-contact .skp-contact-examples a:hover { color: var(--skp-red); }

.skp-contact .skp-contact-band { background: var(--c-band); border-radius: 9px; padding: 26px 20px 28px; text-align: center; }
.skp-contact .skp-contact-band h2 { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.skp-contact .skp-contact-band p { margin: 0 0 18px; color: #1A1A1A; }
.skp-contact .skp-contact-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--skp-red-2); color: #fff; text-decoration: none; padding: 11px 26px; border-radius: 9px; font-size: 17px; font-weight: 600; transition: background-color .15s; }
.skp-contact .skp-contact-btn:hover, .skp-contact .skp-contact-btn:focus { background: #B5142A; color: #fff; }

/* Tablet and phone: the cards stack */
@media (max-width: 900px) {
  .skp-contact .skp-contact-cards { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 767px) {
  .skp-contact h1.skp-contact-title { font-size: 34px; }
  .skp-contact h2.skp-contact-h2, .skp-contact .skp-contact-band h2 { font-size: 24px; }
  .skp-contact .skp-contact-email a { font-size: 16px; }
  .skp-contact .skp-contact-card { padding: 18px 16px 16px; }
}