/* ════════════════════════════════════════════════════════
   PAGE CSS — CONTACT (ct-)
   Ships later as assets/css/page-contact.css
   ════════════════════════════════════════════════════════ */

.ct-hero { padding: 180px 0 60px; }
.ct-hero .wrap { max-width: 980px; }
.ct-hero h1 { margin: 22px 0 26px; }
.ct-hero-sub { color: var(--mist); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.7; max-width: 640px; }
.ct-hero-sub b { color: var(--bone); font-weight: 600; }
[data-theme="light"] .ct-hero-sub b { color: var(--ink-2); }

/* ─── CHANNEL CARDS ─── */
.ct-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 50px; }
.ct-card { border: 1px solid var(--line); border-radius: 16px; padding: 30px 26px; background: var(--ink-2); text-decoration: none; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .5s; }
[data-theme="light"] .ct-card { background: #fff; }
.ct-card:hover { transform: translateY(-6px); border-color: rgba(244,81,30,.45); }
.ct-card .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(244,81,30,.1); margin-bottom: 18px; }
.ct-card .ic svg { width: 20px; height: 20px; stroke: var(--orange); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ct-card h4 { font-family: var(--fd); font-weight: 700; font-size: 22px; letter-spacing: .01em; color: var(--bone); margin-bottom: 6px; }
[data-theme="light"] .ct-card h4 { color: var(--ink-2); }
.ct-card .v { font-size: 14px; color: var(--orange); font-weight: 500; word-break: break-word; }
.ct-card p { color: var(--mist); font-size: 13px; line-height: 1.6; margin-top: 8px; }

/* ─── SPLIT: FORM + PROMISE ─── */
.ct-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; margin-top: 54px; }

/* form embed placeholder */
.ct-form { border: 1px dashed rgba(244,81,30,.4); border-radius: 18px; min-height: 480px; display: grid; place-items: center; background: rgba(244,81,30,.03); }
.ct-form-inner { text-align: center; padding: 40px; }
.ct-form-inner svg { width: 34px; height: 34px; stroke: var(--orange); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.ct-form-inner .t { font-family: var(--fd); font-weight: 700; font-size: 22px; color: var(--bone); margin-bottom: 6px; }
[data-theme="light"] .ct-form-inner .t { color: var(--ink-2); }
.ct-form-inner .s { font-size: 13px; color: var(--mist); font-family: var(--fm, 'JetBrains Mono', monospace); letter-spacing: .04em; max-width: 340px; margin: 0 auto; line-height: 1.7; }

/* ─── SIGNATURE: RESPONSE TRACE ─── */
.ct-trace { border: 1px solid var(--line); border-radius: 18px; background: var(--ink-2); padding: 30px 28px; }
[data-theme="light"] .ct-trace { background: #fff; }
.ct-trace-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ct-trace-head span { font-family: var(--fm, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.ct-trace-head .live { display: flex; align-items: center; gap: 6px; color: var(--green); }
.ct-trace-head .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: ct-pulse 1.6s ease-in-out infinite; }
@keyframes ct-pulse { 50% { opacity: .3; } }
.ct-trace > p { color: var(--mist); font-size: 14px; line-height: 1.65; margin-bottom: 22px; }
.ct-trace > p b { color: var(--bone); font-weight: 600; }
[data-theme="light"] .ct-trace > p b { color: var(--ink-2); }
.ct-tline { position: relative; padding-left: 26px; }
.ct-tline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.ct-tstep { position: relative; padding-bottom: 24px; }
.ct-tstep:last-child { padding-bottom: 0; }
.ct-tstep::before { content: ''; position: absolute; left: -24px; top: 5px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--mist); background: var(--ink-2); }
[data-theme="light"] .ct-tstep::before { background: #fff; }
.ct-tstep.hit::before { border-color: var(--orange); box-shadow: 0 0 12px rgba(244,81,30,.5); }
.ct-tstep .w { font-family: var(--fm, 'JetBrains Mono', monospace); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); display: block; margin-bottom: 4px; }
.ct-tstep h5 { font-family: var(--fd); font-weight: 700; font-size: 18.5px; letter-spacing: .01em; color: var(--bone); margin-bottom: 4px; }
[data-theme="light"] .ct-tstep h5 { color: var(--ink-2); }
.ct-tstep p { color: var(--mist); font-size: 13px; line-height: 1.6; }

/* ─── INFO STRIP ─── */
.ct-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 54px; }
.ct-ibox { border: 1px solid var(--line); border-radius: 16px; padding: 26px; background: var(--ink-2); }
[data-theme="light"] .ct-ibox { background: #fff; }
.ct-ibox .k { font-family: var(--fm, 'JetBrains Mono', monospace); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mist); display: block; margin-bottom: 10px; }
.ct-ibox .v { font-family: var(--fd); font-weight: 700; font-size: 21px; letter-spacing: .01em; color: var(--bone); }
[data-theme="light"] .ct-ibox .v { color: var(--ink-2); }
.ct-ibox p { color: var(--mist); font-size: 13px; line-height: 1.6; margin-top: 6px; }

@media (max-width: 1024px) {
  .ct-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-split { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
  .ct-hero { padding-top: 150px; }
  .ct-grid, .ct-info { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-trace-head .live i { animation: none; }
}

/* ─── NAV DROPDOWNS ─── */
nav li.has-dd { position: relative; }
nav li.has-dd > a { display: inline-flex; align-items: center; gap: 5px; }
.dd-car { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
nav li.has-dd:hover .dd-car, nav li.has-dd:focus-within .dd-car { transform: rotate(180deg); }
.dd { position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px); min-width: 260px;
  background: var(--panel, var(--ink-2)); border: 1px solid var(--line); padding: 10px;
  opacity: 0; visibility: hidden; transition: opacity .3s, transform .3s, visibility .3s;
  box-shadow: 0 24px 60px rgba(0,0,0,.5); z-index: 60; }
[data-theme="light"] .dd { background: #fff; box-shadow: 0 24px 60px rgba(10,15,30,.14); }
.dd::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* hover bridge */
nav li.has-dd:hover .dd, nav li.has-dd:focus-within .dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dd a { display: block; padding: 11px 14px; text-decoration: none; transition: background .25s; }
.dd a:hover { background: rgba(244,81,30,.07); }
.dd a b { display: block; font-family: var(--fd); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; color: var(--text, var(--bone)); }
[data-theme="light"] .dd a b { color: var(--ink-2); }
.dd a small { display: block; font-size: .7rem; color: var(--muted, var(--mist)); margin-top: 2px; }
.dd a.dd-cta { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 13px; }
.dd a.dd-cta b { color: var(--orange); }

/* mobile menu sub-links */
.mm-sub { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0 4px 46px; }
.mm-sub a { font-family: var(--fm); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, var(--mist)); text-decoration: none; }
.mm-sub a:active, .mm-sub a:hover { color: var(--orange); }

/* ─── FOOTER CONTACT ─── */
.fcontact { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fc-row { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.fc-ic { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); background: rgba(244,81,30,.06); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.fc-ic svg { width: 15px; height: 15px; stroke: var(--orange); stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
a.fc-row:hover .fc-ic { border-color: rgba(244,81,30,.5); background: rgba(244,81,30,.12); }
.fc-tx { font-size: .84rem; color: var(--text, var(--bone)); line-height: 1.3; }
[data-theme="light"] .fc-tx { color: var(--ink-2); }
a.fc-row:hover .fc-tx { color: var(--orange); }
.fc-tx small { display: block; font-family: var(--fm); font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted, var(--mist)); margin-bottom: 2px; }