/* Contact (contact/). One address with a Copy button (contact.js), a card for each
   reason (each opens your email app with its subject filled in), and what to include. */

.ct { width: min(1100px, calc(100% - 32px)); margin: 0 auto 120px; }

.ct-head { padding: clamp(56px, 8vw, 96px) 0 0; text-align: center; }
.ct-title .l1 { font-size: clamp(46px, 7vw, 92px); }
.ct-title .l2 { font-size: clamp(32px, 5vw, 64px); }
.ct-lede { max-width: 520px; margin: 22px auto 0; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.55; color: #3E3858; }

/* the address, big, with Copy */
.ct-address { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin-top: 32px; padding: 10px 10px 10px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 14px 40px -24px rgba(91, 43, 224, 0.45); }
.ct-mail { white-space: nowrap; color: var(--violet); font: 700 clamp(20px, 5.4vw, 30px)/1.2 var(--display); text-decoration: none; }
.ct-mail:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ct-address .btn { flex: none; width: auto; } /* phones make buttons full width; not this one */

/* a card for each reason */
.ct-reasons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 72px 0 0; padding: 0; list-style: none; }
.ct-reasons li { grid-column: span 2; }
.ct-reasons li:nth-child(4), .ct-reasons li:nth-child(5) { grid-column: span 3; } /* three, then two wider */
.ct-reasons a {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.5, 0.64, 1), border-color 0.15s, box-shadow 0.25s;
}
.ct-reasons a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.ct-reasons svg { width: 44px; height: 44px; margin-bottom: 10px; padding: 10px; border-radius: 13px; background: var(--lilac); fill: none; stroke: var(--violet); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background 0.2s, stroke 0.2s; }
.ct-reasons b { font-size: 17px; font-weight: 600; }
.ct-reasons span { font-size: 15px; line-height: 1.5; color: #3E3858; }
.ct-reasons em { font-style: normal; font-weight: 600; color: var(--ink); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ct-reasons a:hover { transform: translateY(-3px); border-color: #CDBBFF; box-shadow: 0 18px 36px -22px rgba(91, 43, 224, 0.55); }
  .ct-reasons a:hover svg { background: var(--violet); stroke: #fff; }
}

/* what to include */
.ct-tips { max-width: 720px; margin: 88px auto 0; padding: clamp(26px, 4vw, 40px); border-radius: 24px; background: var(--lilac); border: 1px solid #DDD3FB; }
.ct-tips h2 { margin: 0 0 16px; font: 700 clamp(26px, 3vw, 32px)/1.15 var(--display); }
.ct-tips ol { margin: 0; padding: 0; list-style: none; counter-reset: tip; }
.ct-tips li { position: relative; padding-left: 38px; counter-increment: tip; color: #3E3858; }
.ct-tips li + li { margin-top: 10px; }
.ct-tips li::before { content: counter(tip); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--violet); color: #fff; font-size: 14px; font-weight: 600; }
.ct-tips li b { color: var(--ink); }
.ct-tips p { margin: 18px 0 0; color: #3E3858; }
.ct-tips a { color: var(--violet); text-underline-offset: 3px; }

@media (max-width: 1023px) {
  .ct { margin-bottom: 96px; }
  .ct-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-reasons li, .ct-reasons li:nth-child(4), .ct-reasons li:nth-child(5) { grid-column: auto; }
  .ct-reasons li:last-child { grid-column: 1 / -1; }
  .ct-tips { margin-top: 72px; }
}
@media (max-width: 640px) {
  .ct-reasons { grid-template-columns: minmax(0, 1fr); margin-top: 56px; }
  .ct-address { padding-left: 16px; }
}