/* ---------- hero ---------- */
.contact-hero{padding:140px 0 60px;background:linear-gradient(180deg,var(--court-pale) 0%,#fff 100%)}
.contact-hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;line-height:1.08;letter-spacing:-1.5px;margin:12px 0 18px}
.contact-hero .lead{max-width:60ch}
.reply-note{display:inline-flex;align-items:center;gap:9px;margin:26px 0 0;padding:9px 16px;border-radius:50px;font-size:13px;font-weight:600;color:var(--text-2);background:#fff;border:1px solid rgba(45,147,172,.18);box-shadow:var(--sh-sm)}
.reply-note svg{flex:none;width:15px;height:15px;color:var(--court)}

/* ---------- contact channel cards ----------
   Self-contained on purpose. The site's .f-card / .f-icon component was
   added for the Open Play page and lives in that page's stylesheet, which
   this page does not load — so .f-icon svg{width:26px} never applied and
   the inline SVGs, having a viewBox but no intrinsic size, expanded to
   fill the card. These .cc-* rules reproduce the same look with no
   external dependency. */
.cc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cc-card{--accent:var(--court);position:relative;display:flex;flex-direction:column;
  padding:32px 28px 30px;border-radius:22px;background:#fff;
  border:1px solid var(--border);border-top:4px solid var(--accent);
  box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.cc-card:nth-child(2){--accent:var(--yellow-dark)}
.cc-card:nth-child(3){--accent:#7c3aed}
.cc-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:var(--accent)}
.cc-icon{flex:none;display:grid;place-items:center;width:56px;height:56px;
  border-radius:16px;margin-bottom:22px;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  transition:transform .4s var(--ease),background .3s,color .3s}
.cc-icon svg{width:26px;height:26px}
.cc-card:hover .cc-icon{transform:rotate(-8deg) scale(1.08);background:var(--accent);color:#fff}
.cc-card h3{font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.2px;margin:0 0 10px}
.cc-card p{font-size:14.5px;line-height:1.75;color:var(--text-2);margin:0}
.cc-link{margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--accent);overflow-wrap:anywhere}
.cc-link span{transition:transform .3s var(--ease)}
.cc-link:hover span{transform:translateX(4px)}
@media (max-width:1000px){
  .cc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-cards .cc-card:last-child{grid-column:1/-1}
}
@media (max-width:768px){.cc-cards{grid-template-columns:minmax(0,1fr);gap:16px}}
@media (hover:none) and (pointer:coarse){.cc-card:hover{transform:none}}

/* ---------- form ---------- */
.contact-form{display:grid;gap:20px;max-width:660px;margin-top:28px}
.cf-row{display:grid;gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cf-field{display:grid;gap:8px;min-width:0}
.cf-field label{font-size:13.5px;font-weight:700;color:var(--text)}
.cf-field .opt{font-weight:500;color:var(--text-3)}
.cf-field input,.cf-field select,.cf-field textarea{
  width:100%;min-width:0;padding:13px 15px;border-radius:14px;
  border:1px solid var(--border);background:#fff;
  font:400 15px/1.55 var(--font);color:var(--text);
  -webkit-appearance:none;appearance:none;
  transition:border-color .25s,box-shadow .25s}
.cf-field textarea{min-height:160px;resize:vertical}
.cf-field select{
  padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d93ac' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--text-3)}
.cf-field input:hover,.cf-field select:hover,.cf-field textarea:hover{border-color:rgba(45,147,172,.4)}
.cf-field input:focus-visible,.cf-field select:focus-visible,.cf-field textarea:focus-visible{
  outline:none;border-color:var(--court);box-shadow:0 0 0 4px rgba(45,147,172,.16)}
.cf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.cf-consent{max-width:62ch;font-size:13px;line-height:1.7;color:var(--text-3)}
.cf-consent a{color:var(--court-dark);font-weight:600}
.cf-consent a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:620px){
  .cf-row{grid-template-columns:minmax(0,1fr)}
  .contact-hero{padding:118px 0 48px}
  .contact-form button{width:100%}
}