/* =========================================
   JUSTWEB OS — CONTACT PAGE
   contact.css  ·  contact.php only
   ========================================= */

:root {
    --red:        #D93025;
    --red-glow:   rgba(217,48,37,0.22);
    --red-soft:   rgba(217,48,37,0.10);
    --blue:       #1A56E8;
    --green:      #00C96B;
    --green-dim:  rgba(0,201,107,0.55);

    --dark:       #0F1117;
    --dark-2:     #161B27;
    --dark-3:     #1C2235;
    --dark-card:  rgba(22,27,39,0.90);

    --white:      #FFFFFF;
    --off-white:  #F7F6F2;
    --cream:      #F0EDE6;

    --ink:        #0E1018;
    --ink-mid:    #374151;
    --ink-soft:   #6B7280;

    --border:     rgba(255,255,255,0.07);
    --border-b:   rgba(255,255,255,0.13);

    --font-b:     'Plus Jakarta Sans', sans-serif;
    --font-m:     'IBM Plex Mono', monospace;
    --ease:       cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font-b); -webkit-font-smoothing:antialiased; }
img,video { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
.mono { font-family:var(--font-m); }

.container-wide {
    width:100%; max-width:1360px;
    margin:0 auto; padding:0 44px;
}

/* ── SHARED COLOUR ─────────────────────────────── */
.c-blue { color:var(--blue); }
.c-red  { color:var(--red); }

/* ── SHARED EYEBROW ─────────────────────────────── */
.jw-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--red); flex-shrink:0; display:inline-block;
}
.jw-dot.green {
    background:var(--green);
    box-shadow:0 0 0 0 var(--green-dim);
    animation:dotPulse 2.4s ease infinite;
}
@keyframes dotPulse {
    0%  { box-shadow:0 0 0 0 var(--green-dim); }
    60% { box-shadow:0 0 0 7px transparent; }
    100%{ box-shadow:0 0 0 0 transparent; }
}

/* ── SHARED BUTTONS ─────────────────────────────── */
.jw-btn-red {
    display:inline-flex; align-items:center; gap:10px;
    background:var(--red); color:#fff;
    font-family:var(--font-b); font-size:14px; font-weight:700;
    padding:15px 30px; border-radius:6px; border:none; cursor:pointer;
    transition:background .3s,transform .2s,box-shadow .3s;
    white-space:nowrap;
}
.jw-btn-red:hover {
    background:#b82920; transform:translateY(-2px);
    box-shadow:0 14px 36px var(--red-glow);
}
.jw-btn-red .arr { font-size:16px; transition:transform .3s var(--ease); }
.jw-btn-red:hover .arr { transform:translate(2px,-2px); }
.jw-btn-red--submit { min-width:220px; justify-content:center; }
.jw-btn-red:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.jw-btn-outline-light {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent; color:rgba(255,255,255,.5);
    font-family:var(--font-m); font-size:10px; font-weight:600;
    letter-spacing:.12em; padding:14px 20px;
    border:1px solid rgba(255,255,255,.1); border-radius:6px;
    cursor:pointer; transition:color .2s,border-color .2s;
}
.jw-btn-outline-light:hover { color:#fff; border-color:rgba(255,255,255,.3); }

.jw-btn-ghost-dark {
    display:inline-flex; align-items:center;
    color:rgba(255,255,255,.6); font-size:14px; font-weight:600;
    padding:14px 0; border-bottom:1.5px solid rgba(255,255,255,.2);
    transition:color .25s,border-color .25s;
}
.jw-btn-ghost-dark:hover { color:#fff; border-color:rgba(255,255,255,.6); }

/* ═══════════════════════════════════════════════
   1. HERO
   Dark · grain · grid-lines
   ═══════════════════════════════════════════════ */
.ct-hero {
    position:relative; overflow:hidden;
    background:var(--dark);
    padding:140px 0 100px;
    border-bottom:1px solid var(--border);
}

/* Grain */
.ct-hero__grain {
    position:absolute; inset:0; pointer-events:none;
    opacity:.035; z-index:1;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px;
}

/* Subtle grid */
.ct-hero__grid-lines {
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:80px 80px;
}

.ct-hero__inner { position:relative; z-index:5; }

.ct-hero__eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-m); font-size:10px; letter-spacing:.18em;
    color:rgba(255,255,255,.38); margin-bottom:32px;
    animation:fadeUp .9s var(--ease) .1s both;
}
.ct-hero__live-dot {
    width:5px; height:5px; background:var(--green); border-radius:50%;
    box-shadow:0 0 0 0 var(--green-dim); animation:dotPulse 2.4s ease infinite;
}

.ct-hero__title {
    font-size:clamp(52px,8vw,112px);
    font-weight:800; line-height:1.0; letter-spacing:-.04em; color:#fff;
    animation:fadeUp .9s var(--ease) .2s both;
}
.ct-hero__title-red { color:var(--red); }

.ct-hero__sub {
    font-size:17px; font-weight:400; line-height:1.72;
    color:rgba(255,255,255,.52); max-width:520px;
    margin:28px 0 48px;
    animation:fadeUp .9s var(--ease) .3s both;
}

/* Meta row */
.ct-hero__meta {
    display:flex; align-items:center; gap:0;
    animation:fadeUp .9s var(--ease) .4s both;
}
.ct-hero__meta-item {
    display:flex; flex-direction:column; gap:5px; padding:0 36px 0 0;
}
.ct-hero__meta-item span {
    font-family:var(--font-m); font-size:9px; letter-spacing:.18em;
    color:rgba(255,255,255,.3); text-transform:uppercase;
}
.ct-hero__meta-item strong { font-size:18px; font-weight:700; color:#fff; }
.ct-hero__meta-sep { width:1px; height:36px; background:rgba(255,255,255,.1); margin-right:36px; }

/* Scroll cue */
.ct-hero__scroll-cue {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:7px; z-index:5;
}
.ct-hero__scroll-cue span { font-family:var(--font-m); font-size:8px; letter-spacing:.24em; color:rgba(255,255,255,.18); }
.ct-hero__scroll-line {
    width:1px; height:44px;
    background:linear-gradient(180deg,rgba(255,255,255,.3),transparent);
    animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%,100%{opacity:.35;transform:scaleY(1)} 50%{opacity:.9;transform:scaleY(.55)}
}

@keyframes fadeUp {
    from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)}
}


/* ═══════════════════════════════════════════════
   2. DEPLOY FORM SECTION
   ═══════════════════════════════════════════════ */
.ct-deploy {
    background:var(--dark-2);
    padding:80px 0 100px;
}

/* ── SHELL ── */
.ct-form-shell {
    display:grid;
    grid-template-columns:300px 1fr;
    gap:0;
    background:rgba(12,15,22,0.8);
    backdrop-filter:blur(32px) saturate(160%);
    -webkit-backdrop-filter:blur(32px) saturate(160%);
    border:1px solid var(--border-b);
    border-radius:20px; overflow:hidden;
    box-shadow:0 60px 120px rgba(0,0,0,0.5);
}

/* ── SIDEBAR ── */
.ct-sidebar {
    background:rgba(0,0,0,0.35);
    border-right:1px solid var(--border);
    padding:48px 36px;
    display:flex; flex-direction:column; gap:40px;
}

/* Steps */
.ct-sidebar__steps { display:flex; flex-direction:column; gap:0; }

.ct-step {
    display:flex; align-items:flex-start; gap:16px;
    opacity:.3; transition:opacity .45s ease;
}
.ct-step--active { opacity:1; }
.ct-step--done   { opacity:.6; }

.ct-step__indicator {
    display:flex; flex-direction:column; align-items:center; gap:0;
    flex-shrink:0;
}
.ct-step__dot {
    width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.03);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .4s,background .4s,box-shadow .4s;
    flex-shrink:0;
}
.ct-step__dot span {
    font-family:var(--font-m); font-size:9px; letter-spacing:.1em;
    color:rgba(255,255,255,.4);
}
.ct-step--active .ct-step__dot {
    border-color:var(--red); background:rgba(217,48,37,.12);
    box-shadow:0 0 18px rgba(217,48,37,.25);
}
.ct-step--active .ct-step__dot span { color:var(--red); }
.ct-step--done .ct-step__dot { border-color:rgba(0,201,107,.4); background:rgba(0,201,107,.08); }
.ct-step--done .ct-step__dot span { color:var(--green); }
.ct-step--done .ct-step__dot span::before { content:'✓'; }

.ct-step__line {
    width:1px; height:40px;
    background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
    margin:4px 0;
}

.ct-step__text { padding-top:8px; }
.ct-step__label {
    display:block; font-size:13px; font-weight:700; color:#fff; margin-bottom:3px;
}
.ct-step__sub { display:block; font-size:9px; letter-spacing:.14em; color:rgba(255,255,255,.3); }

/* Terminal */
.ct-terminal {
    background:rgba(0,0,0,.6);
    border:1px solid rgba(255,255,255,.06);
    border-radius:8px; overflow:hidden;
}
.ct-terminal__bar {
    background:rgba(255,255,255,.03);
    border-bottom:1px solid rgba(255,255,255,.05);
    padding:10px 14px;
    display:flex; align-items:center; gap:6px;
}
.ct-terminal__dot { width:9px; height:9px; border-radius:50%; }
.ct-terminal__title { font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.25); margin-left:8px; }
.ct-terminal__body {
    padding:18px 16px;
    font-size:10px; line-height:2;
    color:rgba(255,255,255,.35);
    min-height:100px;
}
.ct-t-line { display:block; }
.ct-t-green { color:var(--green); }
#termStatus { color:rgba(255,255,255,.5); }
.ct-t-cursor { color:var(--red); animation:blink .8s step-end infinite; }
@keyframes blink { 50%{opacity:0} }

/* Direct contact in sidebar */
.ct-sidebar__direct {
    display:flex; flex-direction:column; gap:10px;
    padding-top:24px; border-top:1px solid var(--border);
}
.ct-sidebar__direct-label {
    font-size:9px; letter-spacing:.2em; color:rgba(255,255,255,.25);
    display:block; margin-bottom:4px;
}
.ct-sidebar__wa {
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; color:var(--green);
    transition:opacity .2s;
}
.ct-sidebar__wa:hover { opacity:.75; }
.ct-sidebar__email {
    font-size:10px; letter-spacing:.08em;
    color:rgba(255,255,255,.3); transition:color .2s;
}
.ct-sidebar__email:hover { color:rgba(255,255,255,.6); }

/* ── FORM WRAP ── */
.ct-form-wrap { padding:48px 52px; display:flex; flex-direction:column; gap:0; }

/* Progress bar */
.ct-progress {
    display:flex; align-items:center; gap:16px; margin-bottom:44px;
}
.ct-progress__track {
    flex:1; height:2px; background:rgba(255,255,255,.08);
    border-radius:2px; overflow:hidden;
}
.ct-progress__fill {
    height:100%;
    background:linear-gradient(90deg,var(--red),var(--blue));
    border-radius:2px;
    transition:width .5s var(--ease);
}
.ct-progress__label {
    font-size:9px; letter-spacing:.16em; color:rgba(255,255,255,.3);
    white-space:nowrap;
}

/* Step panes */
.ct-step-pane { display:none; animation:paneIn .5s var(--ease) both; }
.ct-step-pane--active { display:flex; flex-direction:column; gap:0; }
@keyframes paneIn {
    from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)}
}

/* Pane header */
.ct-pane-header { margin-bottom:36px; }
.ct-pane-eyebrow {
    font-size:9px; letter-spacing:.2em; color:var(--red);
    display:block; margin-bottom:12px;
}
.ct-pane-title {
    font-size:clamp(24px,2.8vw,36px); font-weight:800;
    letter-spacing:-.03em; color:#fff; margin-bottom:10px; line-height:1.1;
}
.ct-pane-sub { font-size:14px; line-height:1.7; color:rgba(255,255,255,.45); max-width:560px; }

/* ── SERVICE CARDS (Step 1) ── */
.ct-service-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
    margin-bottom:32px;
}

.ct-svc-card { cursor:pointer; user-select:none; }
.ct-svc-card input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }

.ct-svc-card__inner {
    display:flex; flex-direction:column; gap:8px;
    padding:20px 16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    transition:border-color .3s,background .3s,transform .2s,box-shadow .3s;
}

.ct-svc-card:hover .ct-svc-card__inner {
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.15);
    transform:translateY(-2px);
}

.ct-svc-card.is-selected .ct-svc-card__inner,
.ct-svc-card input:checked + .ct-svc-card__inner {
    border-color:var(--red);
    background:var(--red-soft);
    box-shadow:0 0 0 1px var(--red), 0 8px 24px rgba(217,48,37,.15);
}

.ct-svc-card__icon {
    font-size:22px; color:rgba(255,255,255,.25); line-height:1;
    transition:color .3s;
}
.ct-svc-card.is-selected .ct-svc-card__icon,
.ct-svc-card input:checked ~ .ct-svc-card__inner .ct-svc-card__icon { color:var(--red); }

.ct-svc-card__name {
    font-size:12px; font-weight:700; color:#fff; line-height:1.3;
}
.ct-svc-card__desc {
    font-size:9px; letter-spacing:.1em; color:rgba(255,255,255,.3); line-height:1.5;
}

/* ── FIELDS (Step 2+) ── */
.ct-fields { display:flex; flex-direction:column; gap:22px; margin-bottom:36px; }
.ct-field-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ct-field { display:flex; flex-direction:column; gap:8px; }

.ct-label {
    font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.4);
    text-transform:uppercase;
}
.req { color:var(--red); }

.ct-input {
    width:100%; background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.09); border-radius:8px;
    padding:15px 18px; color:#fff; font-family:var(--font-b);
    font-size:14px; transition:border-color .3s,background .3s,box-shadow .3s;
    appearance:none; -webkit-appearance:none;
}
.ct-input::placeholder { color:rgba(255,255,255,.2); }
.ct-input:focus {
    outline:none;
    border-color:var(--red);
    background:rgba(217,48,37,.06);
    box-shadow:0 0 0 3px rgba(217,48,37,.12);
}
.ct-input:valid:not(:placeholder-shown) { border-color:rgba(0,201,107,.3); }

.ct-select { cursor:pointer; }
.ct-select option { background:var(--dark-3); color:#fff; }

.ct-textarea { resize:vertical; min-height:120px; line-height:1.65; }

/* Phone input */
.ct-phone-wrap { display:flex; align-items:stretch; }
.ct-phone-prefix {
    display:flex; align-items:center; padding:0 14px;
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
    border-right:none; border-radius:8px 0 0 8px;
    font-size:13px; color:rgba(255,255,255,.5); white-space:nowrap;
    letter-spacing:.04em;
}
.ct-input--phone { border-radius:0 8px 8px 0; }

/* Char count */
.ct-char-count { font-size:9px; letter-spacing:.12em; color:rgba(255,255,255,.25); align-self:flex-end; margin-top:4px; }

/* ── BUDGET CARDS (Step 3) ── */
.ct-budget-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }

.ct-budget-card { cursor:pointer; user-select:none; }
.ct-budget-card input { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }

.ct-budget-card__inner {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:20px 12px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
    border-radius:10px; text-align:center;
    transition:border-color .3s,background .3s,transform .2s;
}
.ct-budget-card:hover .ct-budget-card__inner {
    border-color:rgba(255,255,255,.15); transform:translateY(-2px);
}
.ct-budget-card.is-selected .ct-budget-card__inner,
.ct-budget-card input:checked + .ct-budget-card__inner {
    border-color:var(--red); background:var(--red-soft);
    box-shadow:0 0 0 1px var(--red);
}
.ct-budget-card__range { font-size:15px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.ct-budget-card__label { font-size:8px; letter-spacing:.18em; color:rgba(255,255,255,.35); }
.ct-budget-card.is-selected .ct-budget-card__label,
.ct-budget-card input:checked + .ct-budget-card__inner .ct-budget-card__label { color:var(--red); }

/* ── SUMMARY BOX (Step 4) ── */
.ct-summary {
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
    border-radius:10px; padding:22px 24px;
}
.ct-summary__label { font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.3); margin-bottom:16px; display:block; }
.ct-summary__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; }
.ct-summary__grid > div { display:flex; flex-direction:column; gap:4px; }
.ct-summary__grid span { font-size:8px; letter-spacing:.16em; color:rgba(255,255,255,.3); }
.ct-summary__grid strong { font-size:13px; font-weight:700; color:#fff; word-break:break-all; }

/* ── PANE FOOTER ── */
.ct-pane-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:28px; border-top:1px solid rgba(255,255,255,.06);
    gap:16px; flex-wrap:wrap;
}

/* Error msg */
.ct-error-msg {
    font-size:12px; color:var(--red); font-weight:600;
    min-height:16px; text-align:right;
}

/* ═══════════════════════════════════════════════
   SUCCESS / ERROR STATE
   ═══════════════════════════════════════════════ */
.ct-success {
    display:flex; flex-direction:column; align-items:center; text-align:center;
    padding:80px 40px; max-width:600px; margin:0 auto;
}
.ct-success__icon {
    width:72px; height:72px; border-radius:50%;
    border:2px solid var(--green); color:var(--green);
    display:flex; align-items:center; justify-content:center;
    font-size:32px; font-weight:700;
    box-shadow:0 0 30px rgba(0,201,107,.2);
    margin-bottom:28px;
    animation:popIn .6s var(--ease) both;
}
@keyframes popIn {
    from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1}
}
.ct-success__eyebrow { font-family:var(--font-m); font-size:10px; letter-spacing:.2em; color:var(--green); margin-bottom:16px; }
.ct-success__title { font-size:clamp(32px,4vw,52px); font-weight:800; letter-spacing:-.03em; color:#fff; margin-bottom:18px; line-height:1.1; }
.ct-success__body { font-size:15px; line-height:1.75; color:rgba(255,255,255,.5); margin-bottom:40px; }
.ct-success__body strong { color:#fff; }
.ct-success__actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center; }


/* ═══════════════════════════════════════════════
   3. CONTACT CHANNELS — white/cream section
   ═══════════════════════════════════════════════ */
.ct-channels {
    background:var(--off-white);
    padding:100px 0 110px;
    border-top:1px solid rgba(0,0,0,.06);
}

.ct-channels__hdr { margin-bottom:56px; }
.ct-channels__eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-m); font-size:10px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px;
}
.ct-channels__title {
    font-size:clamp(32px,4vw,52px); font-weight:800;
    letter-spacing:-.03em; color:var(--ink); line-height:1.1;
}

.ct-channels__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }

.ct-channel {
    display:flex; align-items:flex-start; gap:20px;
    padding:36px 32px;
    background:var(--white);
    border:1px solid rgba(0,0,0,.07); border-radius:14px;
    transition:transform .35s var(--ease),box-shadow .35s ease,border-color .3s;
    cursor:default;
}
a.ct-channel { cursor:pointer; }
a.ct-channel:hover {
    transform:translateY(-6px);
    box-shadow:0 24px 56px rgba(0,0,0,.09);
    border-color:rgba(0,0,0,.14);
}
.ct-channel--primary {
    background:var(--ink); border-color:var(--ink);
}
.ct-channel--primary .ct-channel__type  { color:rgba(255,255,255,.3); }
.ct-channel--primary .ct-channel__val   { color:#fff; }
.ct-channel--primary .ct-channel__desc  { color:rgba(255,255,255,.45); }
.ct-channel--primary .ct-channel__icon  { color:#fff; background:rgba(255,255,255,.1); }
.ct-channel--primary .ct-channel__arr   { color:rgba(255,255,255,.4); }
.ct-channel--primary:hover .ct-channel__arr { color:#fff; }

.ct-channel--location { cursor:default; }

.ct-channel__icon {
    width:46px; height:46px; border-radius:10px;
    background:rgba(0,0,0,.05);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    color:var(--ink);
}
.ct-channel__icon svg { width:20px; height:20px; }

.ct-channel__info { flex:1; display:flex; flex-direction:column; gap:5px; }
.ct-channel__type { font-family:var(--font-m); font-size:9px; letter-spacing:.2em; color:var(--ink-soft); }
.ct-channel__val  { font-size:16px; font-weight:700; color:var(--ink); }
.ct-channel__desc { font-size:13px; color:var(--ink-soft); line-height:1.5; }

.ct-channel__arr  { font-size:18px; color:var(--ink-soft); align-self:flex-start; transition:transform .25s var(--ease),color .2s; }
a.ct-channel:hover .ct-channel__arr { transform:translate(3px,-3px); color:var(--red); }
.ct-channel--primary:hover .ct-channel__arr { color:#fff; }


/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media(max-width:1100px){
    .container-wide { padding:0 28px; }

    .ct-form-shell { grid-template-columns:1fr; }

    .ct-sidebar {
        border-right:none; border-bottom:1px solid var(--border);
        padding:32px 28px; flex-direction:row; flex-wrap:wrap;
        gap:24px; align-items:flex-start;
    }
    .ct-sidebar__steps { flex-direction:row; gap:8px; flex-wrap:wrap; }
    .ct-step { flex-direction:column; align-items:center; text-align:center; gap:8px; }
    .ct-step__indicator { flex-direction:row; align-items:center; }
    .ct-step__line { width:24px; height:1px; margin:0 4px; background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.02)); }
    .ct-step__text { display:none; }
    .ct-terminal { display:none; }
    .ct-sidebar__direct { flex-direction:row; align-items:center; gap:16px; border-top:none; padding-top:0; }

    .ct-form-wrap { padding:36px 28px; }

    .ct-service-grid { grid-template-columns:repeat(2,1fr); }
    .ct-budget-grid  { grid-template-columns:repeat(2,1fr); }
    .ct-field-row    { grid-template-columns:1fr; }

    .ct-channels__grid { grid-template-columns:1fr; }
}

@media(max-width:600px){
    .ct-hero { padding:110px 0 72px; }
    .ct-hero__meta { flex-direction:column; gap:20px; }
    .ct-hero__meta-sep { display:none; }

    .ct-form-wrap { padding:28px 20px; }
    .ct-service-grid { grid-template-columns:1fr 1fr; }
    .ct-budget-grid  { grid-template-columns:1fr 1fr; }

    .ct-pane-footer { flex-direction:column; align-items:stretch; }
    .ct-pane-footer > * { width:100%; }
    .ct-pane-footer > div { display:flex; flex-direction:column; align-items:stretch; }
    .jw-btn-red--submit { width:100%; justify-content:center; }
    .jw-btn-outline-light { justify-content:center; }

    .ct-success__actions { flex-direction:column; align-items:stretch; }

    .ct-channel { padding:24px; }
}