/* Contact page: a full-screen, one-question-at-a-time project form (js/contact.js),
   with client proof beside it on desktop. Without JS every question shows as one long form. */

.cv { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding-top: 104px; }

/* progress across the very top */
.cv__bar { position: fixed; inset: 0 0 auto; z-index: 70; height: 3px; background: rgba(255, 255, 255, 0.06); }
.cv__fill { display: block; height: 100%; background: linear-gradient(90deg, #18cdfd, #0a86fa); box-shadow: 0 0 12px rgba(24, 205, 253, 0.7); transform-origin: left; transform: scaleX(0); transition: transform 0.6s var(--m-ease, var(--ease-out)); }

.cv__stage {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: center;
  gap: clamp(36px, 5vw, 64px);
  width: 100%;
  max-width: calc(1240px + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter) 110px;
}
.cv__form { max-width: 720px; }

/* ---------- one question ---------- */
.cv__step { min-width: 0; margin: 0; padding: 0; border: 0; outline: none; }
.cv__step + .cv__step { margin-top: 90px; }
.cv--on .cv__step { margin-top: 0; }
.cv--on .cv__step:not(.is-active) { display: none; }
.cv__step.is-in { animation: cvIn 0.6s var(--m-ease, var(--ease-out)) both; }
.cv__step.is-out { animation: cvOut 0.24s ease-in both; }
@keyframes cvIn { from { opacity: 0; translate: 0 calc(var(--dir, 1) * 40px); } }
@keyframes cvOut { to { opacity: 0; translate: 0 calc(var(--dir, 1) * -28px); } }

.cv__q { display: block; width: 100%; padding: 0; color: var(--text-1); font-size: clamp(30px, 3vw, 42px); font-weight: 600; line-height: 1.14; letter-spacing: -0.035em; text-wrap: balance; }
/* the quieter second tone: question endings, and the title's last line */
.cv__q em, .cv__title > span:last-child { color: var(--ink-quiet); font-style: normal; }
.cv__sub { padding-top: 10px; color: var(--text-3); font-size: 17px; line-height: 1.5; }
.cv__kbd { padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: var(--text-2); font-size: 14px; white-space: nowrap; }

/* typed answers: big text on a single line */
.cv__input {
  display: block;
  width: 100%;
  margin-top: 30px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: clamp(22px, 2.1vw, 28px);
  letter-spacing: -0.02em;
  transition: border-color 0.25s;
}
.cv__input::placeholder { color: rgba(255, 255, 255, 0.26); }
.cv__input:focus { outline: none; border-bottom-color: var(--accent); }
.cv__input.is-invalid { border-bottom-color: #ff8a7a; }
.cv__area { resize: none; overflow: hidden; line-height: 1.4; }

.cv__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.cv__field { display: block; }
.cv__field > span { display: block; color: var(--text-3); font-size: 14.5px; }
.cv__field i { color: var(--text-4); font-style: normal; }
.cv__field .cv__input { margin-top: 4px; }
.cv__private { display: flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--text-4); font-size: 14px; }
.cv__legal { margin-top: 16px; color: var(--text-4); font-size: 12.5px; line-height: 1.5; }
.cv__legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* the badge is replaced by the line above, which Google allows */
.grecaptcha-badge { visibility: hidden; }
.cv__private svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* picked answers: lettered choices */
.opts { display: grid; gap: 10px; max-width: 540px; margin-top: 28px; }
.opts--row { display: flex; flex-wrap: wrap; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 140px;
  padding: 11px 16px 11px 11px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--text-1);
  font-size: 18px;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), translate 0.3s var(--ease-out);
}
.opt:hover { background: rgba(255, 255, 255, 0.09); translate: 3px 0; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt__key { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); color: var(--text-2); font-size: 13px; font-weight: 600; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.opt__tick { width: 20px; height: 20px; margin-left: auto; padding-left: 4px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.3s var(--ease-out); }
.opt:has(input:checked) { background: rgba(24, 205, 253, 0.13); box-shadow: inset 0 0 0 1.5px var(--accent); }
.opt:has(input:checked) .opt__key { background: var(--accent); box-shadow: none; color: #001224; }
.opt:has(input:checked) .opt__tick { opacity: 1; transform: none; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
/* a quick double blink confirms the pick before moving on */
.opt.is-picked { animation: optBlink 0.36s steps(1) 2; }
@keyframes optBlink { 50% { background: rgba(24, 205, 253, 0.04); } }

/* OK button + keyboard hint */
.cv__ok { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 30px; }
.cv__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1668ff, #0a4dff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 12px 28px -12px rgba(10, 77, 255, 0.9);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: translate 0.3s var(--ease-out), box-shadow 0.3s var(--ease);
}
.cv__btn i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; transition: transform 0.4s var(--ease-out); }
.cv__btn svg { width: 16px; height: 16px; fill: none; stroke: #0a4dff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cv__btn:hover { translate: 0 -2px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 16px 34px -12px rgba(10, 77, 255, 1); }
.cv__btn:hover i { transform: translateX(2px) rotate(-45deg); }
.cv__btn:active { translate: 0 1px; }
.cv__hint { color: var(--text-4); font-size: 13.5px; }
.cv__hint b { color: var(--text-3); font-weight: 600; }
.cv__err { margin-top: 14px; color: #ff9b8e; font-size: 15px; }
.cv__err:empty { display: none; }
.cv__step.is-shake .cv__input, .cv__step.is-shake .opts { animation: cvShake 0.4s var(--ease); }
@keyframes cvShake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 6px 0; } }

/* ---------- intro ---------- */
.cv__status { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.cv__status img { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); }
.cv__status > span { display: flex; flex-direction: column; line-height: 1.35; }
.cv__status b { color: var(--text-1); font-size: 16px; font-weight: 600; }
.cv__status i { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 14px; font-style: normal; }
.cv__live { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #2bd47d; }
.cv__live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2bd47d; animation: live 2s var(--ease) infinite; }
.cv__title { color: var(--text-1); font-size: clamp(42px, 5vw, 72px); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.cv__title > span:last-child { display: block; }
.cv__title--md { font-size: clamp(34px, 3.6vw, 52px); }
/* "Thanks, Maria." stays on one line; only phones may wrap a long name */
@media (min-width: 768px) { .cv__thanks { white-space: nowrap; } }
.cv__lede { max-width: 560px; margin-top: 20px; color: var(--text-2); font-size: 19px; line-height: 1.6; }
.cv__lede b { color: var(--text-1); font-weight: 500; }
.cv__intro .cv__ok { margin-top: 34px; }
/* the small CTA is built around a photo on its left; without one the label needs its own room */
.cv__intro .sq-btn { padding-left: 22px; }
.cv__alt { margin-top: 34px; color: var(--text-4); font-size: 14.5px; }
.cv__alt a { color: var(--text-2); white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.25); text-underline-offset: 3px; transition: color 0.2s; }
.cv__alt a:hover { color: var(--text-1); }

/* ---------- sent ---------- */
.cv__done-i { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 26px; border-radius: 50%; background: rgba(43, 212, 125, 0.14); box-shadow: inset 0 0 0 1px rgba(43, 212, 125, 0.35); }
.cv__done-i svg { width: 26px; height: 26px; fill: none; stroke: #2bd47d; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cv__sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; max-width: 640px; margin-top: 28px; padding: 22px 24px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.cv__sum:empty { display: none; }
.cv__sum div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cv__sum dt { color: var(--text-4); font-size: 13px; }
.cv__sum dd { margin-top: 2px; color: var(--text-1); font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cv__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cv__err a { color: inherit; text-decoration: underline; }
.cv__btn:disabled { opacity: 0.7; cursor: progress; }
.cv__done-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; }
.cv__home { color: var(--text-3); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.cv__home:hover { color: var(--text-1); }

/* ---------- proof ---------- */
/* the reviews sell the start; once questions begin they step aside and the question takes the centre */
.js .cv:not([data-at="intro"]) .cv__proof { display: none; }
.js .cv:not([data-at="intro"]) .cv__form { grid-column: 1 / -1; justify-self: center; width: 100%; }
.cv--on .cv__proof { animation: cvIn 0.7s var(--m-ease, var(--ease-out)) 0.15s both; }
.cv__proof { padding: 30px; border-radius: 26px; background: linear-gradient(150deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.045)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 40px 80px -60px rgba(10, 77, 255, 0.55); }
.cv__quotes { display: grid; margin-top: 18px; }
/* one quote fades out before the next fades in, so they never overlap */
.cv__quote { grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 -8px; transition: opacity 0.35s var(--ease), translate 0.35s var(--ease); pointer-events: none; }
.cv__quote.is-on { opacity: 1; translate: none; pointer-events: auto; transition: opacity 0.6s var(--ease) 0.35s, translate 0.7s var(--ease-out) 0.35s; }
.cv__quote blockquote { color: var(--text-1); font-size: 18px; line-height: 1.55; letter-spacing: -0.2px; }
.cv__quote blockquote::before { content: "\201C"; display: block; height: 24px; color: var(--accent); font-size: 46px; font-weight: 700; line-height: 1; }
.cv__quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.cv__quote img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16); }
.cv__quote figcaption span { display: flex; flex-direction: column; line-height: 1.35; }
.cv__quote b { color: var(--text-1); font-size: 15px; font-weight: 600; }
.cv__quote i { color: var(--text-3); font-size: 13.5px; font-style: normal; }
.cv__gets { display: grid; gap: 10px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.cv__gets li { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 15px; }
.cv__gets svg { flex: none; width: 18px; height: 18px; fill: none; stroke: #2bd47d; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- step count + arrows ---------- */
.cv__nav { position: fixed; right: var(--gutter); bottom: 26px; z-index: 40; display: none; align-items: center; gap: 8px; }
.cv--on .cv__nav { display: flex; }
.cv[data-at="intro"] .cv__nav, .cv[data-at="done"] .cv__nav { display: none; }
.cv__count { margin-right: 8px; color: var(--text-3); font-size: 14px; font-variant-numeric: tabular-nums; }
.cv__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.08); transition: background-color 0.2s, opacity 0.2s; }
.cv__arrow:hover { background: rgba(255, 255, 255, 0.14); }
.cv__arrow:disabled { opacity: 0.35; pointer-events: none; }
.cv__arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--text-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- light theme ---------- */
[data-theme="light"] .cv__bar { background: rgba(6, 30, 66, 0.06); }
[data-theme="light"] .cv__input { border-bottom-color: rgba(6, 30, 66, 0.18); }
[data-theme="light"] .cv__input::placeholder { color: #9aabbf; }
[data-theme="light"] .cv__kbd { background: rgba(6, 30, 66, 0.07); }
[data-theme="light"] .opt { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--line-card); }
[data-theme="light"] .opt:hover { background: #fff; }
[data-theme="light"] .opt__key { box-shadow: inset 0 0 0 1px rgba(6, 30, 66, 0.25); }
[data-theme="light"] .opt:has(input:checked) { background: rgba(10, 127, 230, 0.1); }
[data-theme="light"] .opt:has(input:checked) .opt__key { color: #fff; }
[data-theme="light"] .cv__status img { box-shadow: 0 0 0 2px var(--line-card); }
[data-theme="light"] .cv__alt a { text-decoration-color: rgba(6, 30, 66, 0.25); }
[data-theme="light"] .cv__sum { background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--line-card); }
[data-theme="light"] .cv__proof { background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px var(--line-card), 0 30px 60px -44px rgba(10, 40, 90, 0.4); }
[data-theme="light"] .cv__quote img { box-shadow: 0 0 0 2px var(--line-card); }
[data-theme="light"] .cv__arrow { background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 0 1px var(--line-card); }
[data-theme="light"] .cv__arrow:hover { background: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* the reviews sit under the start screen instead of beside it */
  .cv__stage { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 40px; padding-top: 4vh; }
  .cv__proof { max-width: 560px; }
}
@media (max-width: 767px) {
  .cv { padding-top: 84px; }
  .cv__stage { align-items: start; padding-top: 6vh; padding-bottom: 110px; }
  .cv__q { font-size: clamp(26px, 7.2vw, 32px); }
  .cv__sub { font-size: 15.5px; }
  .cv__input { margin-top: 24px; font-size: 21px; }
  .cv__pair { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 24px; }
  .opts { margin-top: 22px; gap: 8px; }
  .opt { padding: 10px 14px 10px 10px; font-size: 16.5px; }
  .opts--row .opt { flex: 1; }
  .cv__title { font-size: clamp(38px, 10.4vw, 46px); }
  .cv__lede { font-size: 17px; }
  .cv__sum { grid-template-columns: minmax(0, 1fr); padding: 18px; }
  .cv__sum div:last-child:nth-child(odd) { grid-column: auto; }
  .cv__hint { display: none; }
  /* step count and arrows become a bar along the bottom */
  .cv__nav { left: 0; right: 0; bottom: 0; justify-content: flex-end; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 45%); }
  .cv__count { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cv__step.is-in, .cv__step.is-out, .opt.is-picked, .cv--on .cv__proof, .cv__live::after, .cv__step.is-shake .cv__input, .cv__step.is-shake .opts { animation: none !important; }
}