/* ==========================================================================
 3. CONTACT page components
 ========================================================================== */
/* Left column — channels */
.tc-aside { position: sticky; top: 40px; }

.tc-panel {
position: relative; overflow: hidden;
border: 1px solid var(--tc-hair); border-radius: 20px;
background: var(--tc-surface);
}
.tc-panel + .tc-panel { margin-top: 1.25rem; }
.tc-panel__title {
margin: 0; padding: 1.25rem 1.5rem 0;
font-size: 1rem; font-weight: 600; color: var(--text);
}

.tc-channels { margin: 0; padding: 0; list-style: none; }
.tc-channel {
display: flex; align-items: center; gap: 1rem;
padding: 1.25rem 1.5rem;
transition: background-color .3s;
}
.tc-channel + .tc-channel { border-top: 1px solid var(--tc-hair); }
.tc-channel:hover { background: rgba(255, 255, 255, .015); }

.tc-channel__icon {
position: relative; display: grid; place-items: center;
flex: 0 0 44px; height: 44px; border-radius: 12px;
border: 1px solid rgba(var(--purple-rgb), .22);
background: rgba(var(--purple-rgb), .1); color: var(--purple);
}
.tc-channel__body { flex: 1 1 auto; min-width: 0; }
.tc-channel__label { display: block; margin-bottom: .15rem; font-size: .8125rem; color: var(--dim); }
.tc-channel__value {
display: inline-block; font-size: 1rem; font-weight: 500; line-height: 1.45;
color: var(--text); overflow-wrap: anywhere; font-style: normal;
transition: color .25s;
}
a.tc-channel__value:hover { color: var(--tc-link); }
.tc-channel__company { display: block; font-weight: 600; }

.tc-copy {
position: relative; display: inline-grid; place-items: center;
flex: 0 0 36px; height: 36px; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, .1); background: transparent;
color: var(--dim); cursor: pointer;
transition: color .25s, border-color .25s, background-color .25s;
}
.tc-copy:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
.tc-copy .tc-icon { width: 16px; height: 16px; grid-area: 1 / 1; transition: transform .3s var(--tc-ease), opacity .2s; }
.tc-copy__done { opacity: 0; transform: scale(.5); color: var(--purple); }
.tc-copy.is-copied { border-color: rgba(var(--purple-rgb), .5); background: rgba(var(--purple-rgb), .1); }
.tc-copy.is-copied .tc-copy__idle { opacity: 0; transform: scale(.5); }
.tc-copy.is-copied .tc-copy__done { opacity: 1; transform: scale(1); }

.tc-hours--panel { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0; padding: 1rem 1.5rem 1.35rem; font-size: .9375rem; }
.tc-hours--panel dt { font-weight: 500; color: var(--text); }
.tc-hours--panel dd { margin: 0; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* Right column — form */
.tc-form-card {
position: relative; overflow: hidden;
padding: clamp(1.5rem, 4vw, 2.75rem);
border: 1px solid var(--tc-hair); border-radius: 24px;
background:
  radial-gradient(90% 60% at 100% 0%, rgba(var(--purple-rgb), .1), transparent 60%),
  var(--tc-surface);
}
.tc-form-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, rgba(var(--purple-rgb), .8), transparent 65%);
}
.tc-form-card__kicker {
display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
font-size: .875rem; font-weight: 500; color: var(--tc-link);
}
.tc-form-card__kicker .tc-icon { width: 16px; height: 16px; }
.tc-form-card__title {
margin-bottom: .6rem; font-size: clamp(1.625rem, 3vw, 2.25rem);
font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--text);
}
.tc-form-card__intro { margin-bottom: 2rem; line-height: 1.65; max-width: 52ch; }

.tc-label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 500; color: var(--text); }
.tc-label__opt { margin-left: .35rem; font-weight: 400; color: var(--dim); }

.tc-input {
display: block; width: 100%;
padding: .85rem 1rem;
border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
background: var(--tc-field); color: var(--text);
font: inherit; font-size: 1rem; line-height: 1.5;
transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.tc-input::placeholder { color: #57575b; }
.tc-input:hover { border-color: rgba(255, 255, 255, .18); }
.tc-input:focus {
outline: none; border-color: var(--purple); background: #121113;
box-shadow: 0 0 0 4px rgba(var(--purple-rgb), .15);
}
textarea.tc-input { min-height: 140px; resize: vertical; }

.tc-error { display: none; margin-top: .45rem; font-size: .8125rem; color: var(--tc-error); }
.tc-field.is-invalid .tc-input { border-color: var(--tc-error); box-shadow: 0 0 0 4px rgba(255, 107, 139, .12); }
.tc-field.is-invalid .tc-error { display: block; animation: tc-nudge .35s var(--tc-ease); }
@keyframes tc-nudge { 0% { transform: translateX(-4px); opacity: 0; } 100% { transform: none; opacity: 1; } }

.tc-field__foot { display: flex; justify-content: space-between; gap: 1rem; }
.tc-counter { margin-top: .45rem; margin-left: auto; font-size: .8125rem; color: var(--dim); font-variant-numeric: tabular-nums; }

/* Node count — segmented choice */
.tc-seg { border: 0; margin: 0; padding: 0; min-width: 0; }
.tc-seg legend { float: none; width: auto; }
.tc-seg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.tc-seg__input { position: absolute; opacity: 0; pointer-events: none; }
.tc-seg__opt {
position: relative; display: flex; flex-direction: column; gap: .15rem; height: 100%;
padding: .9rem 1rem .9rem 1rem;
border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
background: var(--tc-field); cursor: pointer;
transition: border-color .25s, background-color .25s, transform .25s var(--tc-ease);
}
.tc-seg__opt:hover { border-color: rgba(255, 255, 255, .2); }
.tc-seg__opt::after {
content: ""; position: absolute; top: .85rem; right: .85rem;
width: 14px; height: 14px; border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .22);
transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.tc-seg__value { font-family: 'Poppins', sans-serif; font-size: 1.0625rem; font-weight: 600; color: var(--text); padding-right: 1.25rem; white-space: nowrap; }
.tc-seg__note { font-size: .8125rem; color: var(--dim); line-height: 1.35; }
.tc-seg__input:checked + .tc-seg__opt {
border-color: rgba(var(--purple-rgb), .7);
background: rgba(var(--purple-rgb), .08);
}
.tc-seg__input:checked + .tc-seg__opt::after {
border-color: var(--purple); background: var(--purple);
box-shadow: inset 0 0 0 3px #1a1020, 0 0 10px rgba(var(--purple-rgb), .6);
}
.tc-seg__input:focus-visible + .tc-seg__opt { outline: 2px solid var(--purple); outline-offset: 3px; }
.tc-seg__input:active + .tc-seg__opt { transform: scale(.98); }

/* Full-width submit (extends .tc-btn) */
.tc-btn--block {
position: relative; overflow: hidden;
justify-content: center; width: 100%;
padding: 1rem 1.6rem;  padding: .9rem 1.9rem;
border-radius: 999px;
font-weight: 600;
font-size: .95rem; font-size: 1rem; cursor: pointer;
}
.tc-btn--block::after {
content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
opacity: 0;
}
.tc-btn--block.is-sending { cursor: progress; filter: saturate(.85); transform: none; }
.tc-btn--block.is-sending::after { opacity: 1; animation: tc-sweep 1s linear infinite; }
@keyframes tc-sweep { to { left: 100%; } }

.tc-form-note { margin: 1rem 0 0; font-size: .8125rem; line-height: 1.6; text-align: center; color: var(--dim); }
.tc-form-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .25); }
.tc-form-note a:hover { color: var(--text); }

/* Form / success swap */
.tc-form, .tc-success { transition: opacity .45s var(--tc-ease), transform .45s var(--tc-ease); }
.tc-form-card.is-sent .tc-form { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.tc-success {
position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center;
padding: clamp(1.5rem, 4vw, 2.75rem);
opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
}
.tc-form-card.is-sent .tc-success { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }

.tc-success__badge {
position: relative; display: grid; place-items: center;
width: 84px; height: 84px; margin-bottom: 1.5rem; border-radius: 50%;
background: rgba(var(--purple-rgb), .1); border: 1px solid rgba(var(--purple-rgb), .35);
color: var(--purple);
}
.tc-success__badge::before {
content: ""; position: absolute; inset: -1px; border-radius: 50%;
border: 1px solid rgba(var(--purple-rgb), .6); opacity: 0;
}
.tc-form-card.is-sent .tc-success__badge::before { animation: tc-ping 1.2s var(--tc-ease) .3s; }
@keyframes tc-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }
.tc-success__badge svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tc-success__badge path { stroke-dasharray: 30; stroke-dashoffset: 30; }
.tc-form-card.is-sent .tc-success__badge path { animation: tc-draw .6s var(--tc-ease) .35s forwards; }
@keyframes tc-draw { to { stroke-dashoffset: 0; } }

.tc-success__title { margin-bottom: .6rem; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.tc-success__text { max-width: 40ch; margin-bottom: 1.75rem; line-height: 1.65; }
.tc-success__text strong { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.tc-ghost {
padding: .7rem 1.25rem; border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .15); background: transparent;
font: inherit; font-size: .9375rem; font-weight: 500; color: var(--text); cursor: pointer;
transition: border-color .25s, background-color .25s;
}
.tc-ghost:hover { border-color: rgba(var(--purple-rgb), .6); background: rgba(var(--purple-rgb), .08); }

.tc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


@media (max-width: 1399.98px) {
.tc-seg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
.tc-aside { position: static; }
}
@media (max-width: 575.98px) {
.tc-channel { padding: 1.1rem 1.25rem; }
.tc-hours--panel, .tc-panel__title { padding-inline: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.tc-success__badge path { stroke-dashoffset: 0; }
.tc-page *, .tc-page *::before, .tc-page *::after { animation-duration: .01ms !important; }
}