/* ---------------------------------------------------------- main: visual + form */
.ct-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding: clamp(48px, 8vh, 88px) 0 clamp(40px, 6vh, 72px); }
.ct-visual h1 { margin: 20px 0 0; color: var(--kz-strong); font-size: clamp(44px, 5.2vw, 82px); line-height: .95; letter-spacing: -.055em; }
.ct-visual h1 em { color: var(--kz-accent); font-style: normal; }
.ct-lead { max-width: 480px; margin: 22px 0 0; color: var(--kz-muted); font-size: 17px; line-height: 1.65; }

/* The business card floats in light instead of sitting in a boxed panel. */
.ct-scene.consultation-scene { height: clamp(360px, 44vh, 460px); margin-top: 14px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.ct-scene.consultation-scene::before { width: 520px; height: 300px; bottom: 6%; background: radial-gradient(circle, rgba(36,104,255,.32), rgba(36,104,255,.06) 46%, transparent 72%); }
.ct-scene .consultation-scene-status { left: 0; bottom: 0; }
/* styles.css offsets the card 220px from the top for the old boxed scene; use the full height here. */
.ct-scene .consultation-card-3d { top: 0; bottom: 34px; }
.ct-scene .consultation-orbit { top: 50%; height: auto; aspect-ratio: 1; }
.ct-scene .consultation-orbit--one { width: min(460px, 100%); }
.ct-scene .consultation-orbit--two { width: min(330px, 72%); }

.ct-direct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--kz-border); }
.ct-direct li { display: grid; gap: 6px; padding: 18px 16px 0 0; }
.ct-direct li + li { padding-left: 16px; border-left: 1px solid var(--kz-border); }
.ct-direct span { color: var(--kz-faint); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.ct-direct a, .ct-direct b { color: var(--kz-strong); font-size: 15px; font-weight: 600; text-decoration: none; }
.ct-direct a:hover { color: var(--kz-accent); }

/* ---------------------------------------------------------- form card */
.ct-form { position: relative; overflow: hidden; padding: clamp(26px, 3vw, 40px); border: 1px solid var(--kz-border-strong); border-radius: 30px; background: radial-gradient(80% 50% at 100% 0%, rgba(47,109,255,.14), transparent 65%), var(--kz-panel-strong); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.ct-form::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, #5c93ff, #35d6e8, transparent); }
.ct-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ct-form-head span { color: var(--kz-accent); font: 500 11px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.ct-form-head h2 { margin: 14px 0 0; color: var(--kz-strong); font-size: clamp(30px, 2.8vw, 40px); line-height: 1; letter-spacing: -.045em; }
.ct-progress { display: grid; gap: 8px; justify-items: end; flex: none; padding-top: 2px; }
.ct-progress b { color: var(--kz-soft); font: 500 12px/1 "IBM Plex Mono", monospace; }
.ct-progress i { display: block; width: 92px; height: 4px; overflow: hidden; border-radius: 4px; background: var(--kz-border); }
.ct-progress em { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5c93ff, #35d6e8); box-shadow: 0 0 10px rgba(92,147,255,.7); transition: width .5s cubic-bezier(.16,1,.3,1); }
.ct-form-lead { margin: 14px 0 0; color: var(--kz-muted); font-size: 15px; line-height: 1.6; }

.ct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.ct-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 14px 16px; border: 1px solid var(--kz-border); border-radius: 16px; background: rgba(255,255,255,.015); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.ct-field--wide { grid-column: 1 / -1; }
.ct-field:focus-within { border-color: rgba(92,147,255,.6); background: rgba(47,109,255,.05); box-shadow: 0 0 0 4px rgba(47,109,255,.1); }
.ct-field > span, .ct-field legend { padding: 0; color: var(--kz-faint); font: 500 10px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; text-transform: uppercase; }
.ct-field input, .ct-field textarea { width: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--kz-strong); font: 500 16px/1.4 "Manrope", sans-serif; resize: vertical; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #4d5a72; }
.ct-field.is-invalid { border-color: rgba(230,120,120,.6); }

/* Focus as colour-coded chips (one per service). */
.ct-focus legend { float: left; width: 100%; margin-bottom: 12px; }
.ct-chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-chips label { position: relative; cursor: pointer; }
.ct-chips input { position: absolute; opacity: 0; pointer-events: none; }
.ct-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--kz-border-strong); border-radius: 99px; color: var(--kz-soft); font: 600 13px/1 "Manrope", sans-serif; transition: color .25s ease, border-color .25s ease, background .25s ease; }
.ct-chips span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .5; transition: opacity .25s ease, box-shadow .25s ease; }
.ct-chips label:hover span { color: var(--kz-strong); }
.ct-chips input:checked + span { color: var(--kz-strong); border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ct-chips input:checked + span::before { opacity: 1; box-shadow: 0 0 10px var(--accent); }
.ct-chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.ct-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 22px; }
.ct-submit .kz3-button { flex: 1 1 260px; justify-content: center; cursor: pointer; }
.ct-submit small { color: var(--kz-faint); font: 500 11px/1.5 "IBM Plex Mono", monospace; letter-spacing: .06em; }

/* Hidden honeypot field for spam bots. */
.ct-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ct-error { margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(230,120,120,.45); border-radius: 12px; background: rgba(230,120,120,.08); color: #f0b4b4; font-size: 14px; line-height: 1.5; }
.ct-error a, .ct-privacy a { color: var(--kz-accent); }
.ct-privacy { margin: 14px 0 0; color: var(--kz-faint); font-size: 12.5px; line-height: 1.5; }
.ct-submit .kz3-button:disabled { opacity: .7; cursor: progress; }

/* Success state replaces the form body in place. */
.ct-form-body { transition: opacity .35s ease, transform .35s ease; }
.ct-success { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 40px; text-align: center; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .45s ease .15s, transform .45s ease .15s; }
.ct-form.is-sent .ct-form-body { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.ct-form.is-sent .ct-success { opacity: 1; pointer-events: auto; transform: none; }
.ct-success svg { width: 76px; height: 76px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ct-success circle { stroke: rgba(87,207,169,.35); stroke-width: 2; }
.ct-success path { stroke: #57cfa9; stroke-width: 3.5; stroke-dasharray: 40; stroke-dashoffset: 40; filter: drop-shadow(0 0 8px rgba(87,207,169,.7)); }
.ct-form.is-sent .ct-success path { animation: ct-tick .6s ease .5s forwards; }
@keyframes ct-tick { to { stroke-dashoffset: 0; } }
.ct-success h2 { margin: 6px 0 0; color: var(--kz-strong); font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -.045em; }
.ct-success p { max-width: 380px; margin: 0; color: var(--kz-muted); font-size: 16px; line-height: 1.6; }

/* ---------------------------------------------------------- what happens next */
.ct-next { padding-top: clamp(56px, 8vh, 96px); }
.ct-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 44px 0 0; padding: 0; list-style: none; }
.ct-steps::before { content: ""; position: absolute; left: 28px; right: 28px; top: 35px; height: 1px; background: linear-gradient(90deg, #5c93ff, #49c7cf, #57cfa9); opacity: .4; }
.ct-steps li { position: relative; padding: 24px 28px 30px; border: 1px solid var(--kz-border); border-radius: 22px; background: var(--kz-panel-strong); }
.ct-steps span { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 50%; background: var(--kz-panel-strong); color: var(--accent); font: 500 10px/1 "IBM Plex Mono", monospace; box-shadow: 0 0 0 5px var(--kz-panel-strong), 0 0 14px color-mix(in srgb, var(--accent) 50%, transparent); }
.ct-steps h3 { margin: 24px 0 0; color: var(--kz-strong); font-size: clamp(22px, 2vw, 28px); letter-spacing: -.035em; }
.ct-steps p { margin: 10px 0 0; color: var(--kz-muted); font-size: 15px; line-height: 1.6; }
.ct-steps li:nth-child(2) { transition-delay: .08s; }
.ct-steps li:nth-child(3) { transition-delay: .16s; }

@media (max-width: 960px) {
  .ct-main { grid-template-columns: 1fr; }
  .ct-steps { grid-template-columns: 1fr; }
  .ct-steps::before { display: none; }
}

@media (max-width: 760px) {
  .ct-fields { grid-template-columns: 1fr; }
  .ct-direct { grid-template-columns: 1fr; }
  .ct-direct li, .ct-direct li + li { padding: 14px 0 0; border-left: 0; }
  .ct-scene.consultation-scene { height: 320px; }
}