/* ==========================================================================
   Contact — v4 "Routes + message form" (merges v1's segmented cards with
   v2's form + support hub, so both a router and a direct channel exist).
   Extends css/site.css (the shared Salla Developers chrome + component set).
   ========================================================================== */

.ct-hero { padding-block: clamp(3rem, 7vw, 5rem); }
.ct-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ct-hero__copy { max-width: 40rem; }
/* deliberately bigger than any .section__head h2 on this page, so the hero
   reads as the top of the hierarchy, not a headline competing with section 01 */
.ct-hero__copy h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); margin: 1.1rem 0 0; letter-spacing: -.02em; }
.ct-hero__copy .lead { margin-top: 1.1rem; font-size: 1.1rem; }

/* a loose preview of the routes below - this page's own visual signature,
   distinct from the terminal/lifecycle-rail/quote used on the other pages */
.ct-hero__routes { position: relative; height: 15rem; }
.ct-hero__chip {
  position: absolute; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--rounded-full);
  padding: .6rem 1.1rem; font-weight: 700; font-size: .88rem; color: var(--heading);
  box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(14px) scale(.94);
  animation: ctChipIn .5s var(--ease) forwards;
}
.ct-hero__chip .hgi { color: hsl(var(--primary-400)); font-size: 1.05em; }
.ct-hero__chip--a { top: 0;     left: 8%;  animation-delay: .05s; }
.ct-hero__chip--b { top: 18%;  left: 46%; animation-delay: .16s; }
.ct-hero__chip--c { top: 42%;  left: 2%;  animation-delay: .27s; }
.ct-hero__chip--d { top: 58%;  left: 40%; animation-delay: .38s; }
.ct-hero__chip--e { top: 82%;  left: 12%; animation-delay: .49s; }
@keyframes ctChipIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ct-hero__chip { animation: none; opacity: 1; transform: none; } }
@media (max-width: 880px) { .ct-hero__inner { grid-template-columns: 1fr; } .ct-hero__routes { display: none; } }

.ct-route { text-decoration: none; }
.ct-route:hover { text-decoration: none; }

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--2 { margin-top: 1.15rem; }
@media (max-width: 640px) { .grid--2 { grid-template-columns: 1fr; } }

.ct-hub .section__head { max-width: 40rem; }

.ct-form {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--rounded-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-xs);
  display: grid; gap: 1.1rem;
}
.ct-form--centered { max-width: 34rem; margin-inline: auto; }
.ct-field { display: grid; gap: .4rem; }
.ct-field label { font-size: .85rem; font-weight: 700; color: var(--heading); }
.ct-field input, .ct-field textarea {
  font: inherit; font-size: .95rem; color: var(--heading); background: var(--page-bg);
  border: 1px solid var(--border-soft); border-radius: var(--rounded-lg);
  padding: .7rem .9rem; width: 100%; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ct-field input:focus, .ct-field textarea:focus {
  outline: none; border-color: hsl(var(--primary-400)); box-shadow: var(--s-shadow-focus);
}
.ct-field textarea { resize: vertical; min-height: 7rem; }
.ct-form .btn { justify-self: start; }
.ct-form__note { font-size: .82rem; color: var(--text-muted); }

/* ---------- custom dropdown (button + listbox, not a native <select>) ----- */
.dd { position: relative; }
.dd__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font: inherit; font-size: .95rem; color: var(--heading); background: var(--page-bg); cursor: pointer;
  border: 1px solid var(--border-soft); border-radius: var(--rounded-lg); padding: .7rem .9rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.dd__btn:hover { border-color: hsl(var(--primary-300)); }
.dd__btn[aria-expanded="true"] { border-color: hsl(var(--primary-400)); box-shadow: var(--s-shadow-focus); }
.dd__btn .hgi { font-size: 1rem; color: var(--text-muted); transition: transform .2s var(--ease); }
.dd__btn[aria-expanded="true"] .hgi { transform: rotate(180deg); color: hsl(var(--primary-400)); }

.dd__menu {
  position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; right: 0;
  list-style: none; margin: 0; padding: .4rem; max-height: 15rem; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg);
  box-shadow: var(--shadow-lg);
}
.dd__menu li {
  padding: .6rem .7rem; border-radius: var(--rounded); font-size: .93rem; color: var(--text);
  cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease);
}
.dd__menu li:hover { background: var(--surface-sunk); }
.dd__menu li[aria-selected="true"] { color: hsl(var(--primary-400)); font-weight: 700; background: var(--surface-sunk); }
.dark .dd__menu li[aria-selected="true"] { color: var(--accent); }
.dd__menu li[aria-selected="true"]::after { content: "\2713"; float: right; }