/* «How would you like to reach us?» (partials/contact-sheet.php): a card on a computer, a sheet from below on a phone. */
.cc { width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 26px; background: #fff; color: #0b1a33; box-shadow: 0 30px 80px rgb(6 12 24 / .35); overflow: auto; font-family: inherit; }
.cc::backdrop { background: rgb(6 12 24 / .55); backdrop-filter: blur(3px); }
.cc[open] { animation: cc-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes cc-in { from { opacity: 0; transform: translateY(14px); } }
.cc__in { position: relative; padding: 26px 22px 22px; }
.cc__x { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgb(11 26 51 / .06); color: inherit; cursor: pointer; }
.cc__x svg { width: 20px; height: 20px; }
.cc__t { margin: 0; padding-inline-end: 52px; font-family: var(--font-display, inherit); font-size: 23px; font-weight: 800; line-height: 1.4; }
.cc__s { margin: 6px 0 18px; color: rgb(11 26 51 / .66); font-size: 14.5px; line-height: 1.8; }
.cc__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cc__way--wa { grid-column: 1 / -1; }
.cc__way a, .cc__form { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border-radius: 16px; background: rgb(11 26 51 / .05); color: inherit; text-decoration: none; transition: background-color .15s; }
.cc__way a:hover, .cc__form:hover { background: rgb(11 26 51 / .1); }
.cc__way a:focus-visible, .cc__form:focus-visible, .cc__x:focus-visible { outline: 2px solid #0b1a33; outline-offset: 2px; }
.cc__way svg, .cc__form svg { flex: none; width: 26px; height: 26px; }
.cc__way span, .cc__form span { display: grid; min-width: 0; }
.cc__way b, .cc__form b { font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.cc__way small, .cc__form small { overflow: hidden; color: rgb(11 26 51 / .62); font-size: 12.5px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.cc__way small[dir="ltr"] { text-align: end; unicode-bidi: plaintext; }
.cc__way--wa a { background: #1f9d55; color: #fff; }
.cc__way--wa a:hover { background: #1a8748; }
.cc__way--wa small { color: rgb(255 255 255 / .85); }
.cc__way--tg svg { color: #2481cc; }
.cc__way--ig svg { color: #c13584; }
.cc__form { margin-top: 10px; background: none; box-shadow: inset 0 0 0 1.5px rgb(11 26 51 / .18); }
.cc__form small { white-space: normal; }
@media (max-width: 560px) {
  .cc { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 26px 26px 0 0; max-height: 92dvh; }
  .cc__in { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .cc[open] { animation-name: cc-up; }
  @keyframes cc-up { from { transform: translateY(100%); } }
}
@media (prefers-reduced-motion: reduce) { .cc[open] { animation: none; } }