/* ============================================================================
   CloudTart — Client Fit (consultation request)
   ----------------------------------------------------------------------------
   A public page inside the normal site frame (header rail + footer), so unlike
   the Project Brief this stylesheet only owns the section between them. It
   reuses the theme's navy/rose-gold language and the same control idiom as the
   contact forms, under its own .ct-fit__* namespace.
   ========================================================================== */

:root {
    --ctf-navy:       #0d1b2e;
    --ctf-gold:       #d6b9a8;
    --ctf-gold-light: #e7d3c5;
    --ctf-gold-pale:  #f3e7dd;
    --ctf-gold-deep:  #b08d6b;
    --ctf-line:       rgba(214, 185, 168, 0.18);
}

.ct-fit {
    position: relative;
    /* `clip` rather than `hidden`: this element is taller than a phone
       viewport, and `hidden` would make it a scroll container that swallows
       touch drags instead of letting the page scroll. */
    overflow: hidden;
    overflow: clip;
    background: var(--ctf-navy);
    color: var(--ctf-gold-pale);
    padding: clamp(60px, 9vw, 130px) 0 clamp(70px, 10vw, 150px);
}

/* Two soft lights, echoing the brief page's intro without the motion — this
   page sits in the normal site flow and shouldn't animate for its own sake. */
.ct-fit__aura { position: absolute; inset: 0; pointer-events: none; }
.ct-fit__aura span {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4;
}
.ct-fit__aura span:first-child  { width: 44vmin; height: 44vmin; top: -8%; inset-inline-end: 4%; background: rgba(214,185,168,0.26); }
.ct-fit__aura span:last-child   { width: 36vmin; height: 36vmin; bottom: -6%; inset-inline-start: 2%; background: rgba(90,140,210,0.22); }

.ct-fit__shell {
    position: relative; z-index: 1;
    width: min(1040px, 100%);
    margin: 0 auto;
    padding: 0 clamp(18px, 5vw, 48px);
}

/* ── intro ── */
.ct-fit__intro { text-align: center; margin-bottom: clamp(34px, 6vw, 62px); }
.ct-fit__eyebrow {
    display: inline-block; padding: 6px 18px; margin-bottom: 16px;
    border: 1px solid var(--ctf-line); border-radius: 999px;
    font-size: 11.5px; letter-spacing: 0.08em; color: var(--ctf-gold);
}
.ct-fit__headline {
    margin: 0 0 16px; font-size: clamp(26px, 4.6vw, 46px); font-weight: 700; line-height: 1.4;
    background: linear-gradient(120deg, var(--ctf-gold-pale), var(--ctf-gold) 55%, var(--ctf-gold-deep));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ct-fit__lede { margin: 0 auto; max-width: 68ch; font-size: 15px; line-height: 2.05; color: rgba(243,231,221,0.66); }

/* Sets expectations up front — length and confidentiality are the two things
   people weigh before starting a form like this. */
.ct-fit__assure {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
    list-style: none; margin: 24px 0 0; padding: 0;
}
.ct-fit__assure li {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: rgba(243,231,221,0.5);
}
.ct-fit__assure i { color: var(--ctf-gold-deep); font-size: 11px; }

/* ── rail ── */
.ct-fit__rail {
    display: flex; gap: 6px; list-style: none; margin: 0 0 18px; padding: 2px 0 8px;
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.ct-fit__rail.is-complete { -webkit-mask-image: none; mask-image: none; }
.ct-fit__rail::-webkit-scrollbar { display: none; }
.ct-fit__rail-item {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    scroll-snap-align: center; cursor: pointer; white-space: nowrap;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid transparent; background: rgba(255,255,255,0.03);
    font-size: 11.5px; color: rgba(243,231,221,0.45);
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ct-fit__rail-item.is-current { color: var(--ctf-navy); background: var(--ctf-gold); border-color: var(--ctf-gold); font-weight: 500; }
.ct-fit__rail-item.is-done { color: var(--ctf-gold); border-color: rgba(214,185,168,0.35); background: rgba(214,185,168,0.08); }

.ct-fit__progress { height: 3px; border-radius: 3px; background: rgba(214,185,168,0.12); overflow: hidden; margin-bottom: 34px; }
.ct-fit__progress span {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, var(--ctf-gold-deep), var(--ctf-gold-light));
    box-shadow: 0 0 10px rgba(214,185,168,0.5);
    transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── steps ── */
.ct-fit__step { display: none; }
.ct-fit__step.is-active { display: block; animation: ctf-in 0.5s ease both; }
@keyframes ctf-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.ct-fit__step-head { margin-bottom: 28px; }
.ct-fit__step-n { display: block; font-size: 11.5px; letter-spacing: 0.06em; color: var(--ctf-gold-deep); margin-bottom: 8px; }
.ct-fit__step-title { margin: 0 0 8px; font-size: clamp(20px, 3.2vw, 28px); font-weight: 700; color: var(--ctf-gold-pale); }
.ct-fit__step-intro { margin: 0; font-size: 13.5px; line-height: 1.9; color: rgba(243,231,221,0.55); }

.ct-fit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ct-fit__field { grid-column: 1 / -1; }
.ct-fit__field.is-half { grid-column: span 1; }

.ct-fit__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--ctf-gold-pale); line-height: 1.8; }
.ct-fit__req { color: var(--ctf-gold-deep); margin-inline-start: 4px; }
.ct-fit__help { margin: -3px 0 10px; font-size: 12.5px; line-height: 1.85; color: rgba(243,231,221,0.45); }

/* ── controls ── */
.ct-fit__control { position: relative; border-radius: 12px; }
.ct-fit__glow {
    position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    background: linear-gradient(120deg, rgba(214,185,168,0.55), rgba(214,185,168,0) 45%, rgba(214,185,168,0) 60%, rgba(214,185,168,0.35));
    opacity: 0; transition: opacity 0.35s ease;
}
.ct-fit__control:focus-within .ct-fit__glow { opacity: 1; }

.ct-fit__control input,
.ct-fit__control textarea,
.ct-fit__control select {
    position: relative; z-index: 1;
    width: 100%; padding: 13px 16px;
    background: rgba(255,255,255,0.035);
    border: 1px solid var(--ctf-line); border-radius: 12px;
    color: var(--ctf-gold-pale);
    font-family: inherit; font-size: 14px; line-height: 1.9;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.ct-fit__control textarea { resize: vertical; min-height: 108px; }
.ct-fit__control select { appearance: none; cursor: pointer; }
.ct-fit__control select option { background: #142338; color: var(--ctf-gold-pale); }
.ct-fit__control input::placeholder,
.ct-fit__control textarea::placeholder { color: rgba(243,231,221,0.28); }
.ct-fit__control input:focus,
.ct-fit__control textarea:focus,
.ct-fit__control select:focus { outline: none; border-color: rgba(214,185,168,0.55); background: rgba(255,255,255,0.055); }

/* ── choices ── */
.ct-fit__choices { display: flex; flex-direction: column; gap: 9px; }
.ct-fit__choice {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 12px 16px; cursor: pointer;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ctf-line); border-radius: 12px;
    font-size: 13.5px; line-height: 1.7; color: rgba(243,231,221,0.78);
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.ct-fit__choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.ct-fit__choice-box {
    flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
    border: 1.5px solid rgba(214,185,168,0.4); position: relative;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.ct-fit__choices.is-multi .ct-fit__choice-box { border-radius: 5px; }
.ct-fit__choice-box::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 8px; height: 8px; border-radius: inherit;
    background: var(--ctf-navy); transform: scale(0); transition: transform 0.2s ease;
}
.ct-fit__choice:hover { border-color: rgba(214,185,168,0.4); background: rgba(214,185,168,0.06); color: var(--ctf-gold-pale); }
.ct-fit__choice input:checked ~ .ct-fit__choice-box { background: var(--ctf-gold); border-color: var(--ctf-gold); }
.ct-fit__choice input:checked ~ .ct-fit__choice-box::after { transform: scale(1); }
.ct-fit__choice:has(input:checked) { border-color: rgba(214,185,168,0.6); background: rgba(214,185,168,0.11); color: var(--ctf-gold-pale); }
.ct-fit__choice input:focus-visible ~ .ct-fit__choice-box { box-shadow: 0 0 0 3px rgba(214,185,168,0.25); }

/* ── validation ── */
.ct-fit__error { margin: 7px 0 0; font-size: 12px; color: #e8a0a0; }
.ct-fit__field.has-error .ct-fit__control input,
.ct-fit__field.has-error .ct-fit__control textarea,
.ct-fit__field.has-error .ct-fit__control select { border-color: rgba(232,160,160,0.65); }
.ct-fit__field.has-error .ct-fit__choices { outline: 1px solid rgba(232,160,160,0.4); outline-offset: 6px; border-radius: 12px; }

/* ── nav ── */
.ct-fit__nav { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.ct-fit__back, .ct-fit__next, .ct-fit__submit {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 28px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 500;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.ct-fit__back { background: transparent; border: 1px solid var(--ctf-line); color: rgba(243,231,221,0.6); }
.ct-fit__back:hover { border-color: rgba(214,185,168,0.5); color: var(--ctf-gold-pale); }
.ct-fit__next, .ct-fit__submit {
    margin-inline-start: auto; border: 0;
    background: linear-gradient(120deg, var(--ctf-gold), var(--ctf-gold-light));
    color: #10192a;
    box-shadow: 0 10px 26px rgba(214,185,168,0.22);
}
.ct-fit__next:hover, .ct-fit__submit:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(214,185,168,0.34); }
.ct-fit__submit[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

.ct-fit__status { margin: 16px 0 0; font-size: 13px; min-height: 1.4em; color: rgba(243,231,221,0.6); }
.ct-fit__status.is-error { color: #e8a0a0; }

/* ── done ── */
.ct-fit__done { text-align: center; padding: clamp(40px, 8vw, 80px) 20px; animation: ctf-in 0.6s ease both; }
.ct-fit__done[hidden] { display: none; }
.ct-fit__done-mark {
    width: 74px; height: 74px; margin: 0 auto 22px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(214,185,168,0.12);
    border: 1px solid rgba(214,185,168,0.45); color: var(--ctf-gold); font-size: 26px;
    box-shadow: 0 0 34px rgba(214,185,168,0.24);
}
.ct-fit__done h2 { margin: 0 0 12px; font-size: clamp(22px, 4vw, 32px); color: var(--ctf-gold-pale); }
.ct-fit__done p  { margin: 0 auto 28px; max-width: 56ch; font-size: 14.5px; line-height: 2; color: rgba(243,231,221,0.62); }
.ct-fit__done-link {
    display: inline-block; padding: 13px 30px; border-radius: 999px;
    border: 1px solid var(--ctf-line); color: var(--ctf-gold);
    text-decoration: none; font-size: 13.5px; transition: background 0.25s ease, border-color 0.25s ease;
}
.ct-fit__done-link:hover { background: rgba(214,185,168,0.1); border-color: rgba(214,185,168,0.5); }

/* ── responsive ── */
/* Below 992px the theme's header rail becomes a full-width FIXED top bar
   (~83px). This section is the first thing on the page, so it needs to clear
   that bar or the eyebrow ends up tucked under the logo. */
@media (max-width: 991px) {
    .ct-fit { padding-top: calc(clamp(60px, 9vw, 130px) + 86px); }
}
@media (max-width: 1024px) {
    .ct-fit__rail-label { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 860px) {
    .ct-fit__grid { grid-template-columns: 1fr; }
    .ct-fit__field.is-half { grid-column: 1 / -1; }
    .ct-fit__rail-label { display: none; }
    .ct-fit__rail-item { padding: 10px 13px; }
}
@media (max-width: 560px) {
    .ct-fit__nav { flex-wrap: wrap; }
    .ct-fit__next, .ct-fit__submit { width: 100%; justify-content: center; margin-inline-start: 0; }
    .ct-fit__back { width: 100%; justify-content: center; order: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-fit__step.is-active, .ct-fit__done { animation: none !important; }
}