/* Contact page (31 Oct 2026, in the homepage's language).
   The hero is split as on the switching page: the copy and a black WhatsApp button beside the form, the form on a grey dot stage.
   Then the three ways to reach us (WhatsApp, email, the chat inside the system) as white cards on grey, the short way for other
   questions (trainees to their studio, switching, partnerships) and the company's details.
   Shared pieces come from site.css ("Inner pages, in the homepage's language"). */

/* ---------- Hero: copy beside the form ---------- */
/* the kit's .ih.split also picks up the old .split rule (a 1.2fr/.8fr grid) from site.css; the section itself stays a block */
.ih.split { display: block; }
.ct-hero .ih-title { font-size: clamp(44px, 4.9vw, 74px); line-height: 1.02; }
.ct-hero .ih-sub { font-size: clamp(18px, 1.5vw, 21px); }
.ct-hero .actions { align-items: center; gap: 14px 22px; }
.ct-hero .btn-ink svg { color: #25D366; }
.ct-fstage { height: auto; display: grid; place-items: center; padding: clamp(14px, 3.4vw, 44px); }
.ct-card { width: 100%; max-width: 480px; padding: clamp(22px, 3vw, 34px); border-radius: 24px; background: #fff; color: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 40px 80px -48px rgba(0, 0, 0, .45); }
.ct-card h2 { margin-bottom: 4px; font-family: var(--display); font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.ct-card .body-2 { margin-bottom: 20px; font-size: 18px; }
.ct-card .form { gap: 14px; }
.ct-card .field label { font-size: 16px; font-weight: 600; }
.ct-card .field label small { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.ct-card .field input, .ct-card .field textarea { height: 52px; border: 1px solid #C9C9CF; border-radius: 12px; background: #fff; font: inherit; font-size: 17px; color: var(--ink); }
.ct-card .field input { padding: 0 14px; }
.ct-card .field textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.ct-card .field input:focus, .ct-card .field textarea:focus { outline: 3px solid #000; outline-offset: 1px; border-color: #000; }
.ct-card .field input[aria-invalid="true"] { border-color: #B3261E; }
.ct-card .btn { min-height: 56px; margin-top: 4px; font-size: 17.5px; }
.ct-card .fine { text-align: center; }
.ct-card .form-ok { border-radius: 14px; background: #E3FBEF; color: #000; font-size: 17px; line-height: 1.6; }

/* the topic, as two segments (the WhatsApp popup's two topics, with the same values) */
.ct-topic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.ct-topic legend { margin-bottom: 6px; padding: 0; font-size: 16px; font-weight: 600; }
.ct-topic label { position: relative; display: grid; place-items: center; min-height: 52px; padding: 8px 12px; border-radius: 12px;
  background: var(--paper-2); font-size: 15.5px; font-weight: 600; line-height: 1.25; text-align: center; cursor: pointer; transition: background-color .15s, box-shadow .15s; }
.ct-topic input { position: absolute; opacity: 0; pointer-events: none; }
.ct-topic label:has(input:checked) { background: #fff; box-shadow: inset 0 0 0 1.5px #000; }
.ct-topic label:has(input:focus-visible) { outline: 3px solid #000; outline-offset: 2px; }

@media (max-width: 599px) {
  .ct-fstage { border-radius: 22px; }
  .ct-card { border-radius: 20px; }
  .ct-card h2 { font-size: 26px; }
}

/* ---------- The ways to reach us: white cards on the grey block ---------- */
.ct-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ct-ways li { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 10px; padding: 26px 26px 28px; border-radius: 22px; background: #fff; }
.ct-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; background: #000; color: #fff; }
.ct-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-ic.wa { background: #25D366; }
.ct-ic.wa svg { width: 26px; height: 26px; fill: #fff; stroke: none; }
.ct-ways h3 { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.ct-ways p { color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.ct-go { justify-self: start; margin-top: 6px; font-size: 18px; font-weight: 700; color: #000; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.ct-go:hover { text-decoration-thickness: 2.5px; }
@media (max-width: 899px) { .ct-ways { grid-template-columns: 1fr; } }

/* ---------- Other questions: three cards that take you there; then the company ---------- */
.ct-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ct-routes a { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; height: 100%; padding: 26px 26px 28px; border-radius: 22px;
  background: var(--paper-2); color: #000; text-decoration: none; transition: background-color .15s; }
.ct-routes a:hover { background: #E8E8EA; }
.ct-tag { justify-self: start; padding: 4px 12px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 700; }
.ct-routes h3 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.ct-routes p { color: var(--ink-2); font-size: 17px; line-height: 1.6; }
/* the whole card is the link; the arrow, not an underline, says so (an underline would run under the arrow too) */
.ct-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 17px; font-weight: 700; }
.ct-more::after { content: "←"; transition: transform .15s; }
.ct-routes a:hover .ct-more::after { transform: translateX(-4px); }
@media (max-width: 899px) { .ct-routes { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .ct-routes a, .ct-topic label, .ct-more::after { transition: none; }
}