/* ============================================================
   CONTACT — lead / "Let's talk" form page (light), v2 system
   ============================================================ */
html { background: #fff; }
body.contact { background: #fff; }

/* focused lead page: no nav links, no Let's-talk, no footer — only the
   Demand Curve wordmark (top-right) as a way out */
body.contact .nav-bar .navlink,
body.contact .nav-bar .nav-contact,
body.contact .cta { display: none !important; }
/* mobile: drop the hamburger + menu, keep the wordmark (top-left, as usual) */
body.contact .mobile-bar .nav-toggle,
body.contact .mobile-menu { display: none !important; }

.contact-sec { position: relative; z-index: 2; background: #fff; color: var(--n900); padding: clamp(120px, 16vh, 190px) 0 clamp(80px, 12vh, 140px); }
.contact-grid { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); align-items: flex-start; }
.contact-intro { flex: 1 1 360px; min-width: 0; }
.contact-form { flex: 1 1 440px; min-width: 0; }
.contact-submit .arrow { display: none; }

/* ---- intro (left) ---- */
.contact-intro .overline { display: block; color: var(--n500); margin: 0 0 18px; }
.contact-title { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(42px, 5.6vw, 84px); line-height: 0.95; letter-spacing: -0.01em; color: var(--n900); margin: 0; }
.contact-sub { font-family: var(--body); font-size: var(--fs-lead); line-height: 1.55; color: var(--n600); margin: clamp(22px, 3vh, 32px) 0 0; max-width: 46ch; }
.contact-stats { display: flex; gap: clamp(22px, 3vw, 44px); margin-top: clamp(32px, 4vh, 48px); padding-top: 28px; border-top: 1px solid var(--n300); }
.cstat { display: flex; flex-direction: column; gap: 5px; }
.cstat-num { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(26px, 3vw, 40px); line-height: 1; color: var(--n900); }
.cstat-label { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--n500); }
.contact-note { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.55; color: var(--n500); margin: clamp(28px, 4vh, 40px) 0 0; max-width: 42ch; }

/* ---- form (right) ---- */
.contact-form { display: flex; flex-direction: column; gap: 18px; flex: 1 1 440px; min-width: 0; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }
.cf-lab { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--n600); }
.cf-input { font-family: var(--body); font-size: var(--fs-sm); color: var(--n900); background: #fff; border: 1px solid var(--n300); padding: 13px 15px; width: 100%; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cf-input::placeholder { color: var(--n400); }
.cf-input:focus { outline: none; border-color: var(--n900); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); }
.cf-select { appearance: none; -webkit-appearance: none; cursor: url("cursors/hand.png") 6 1, pointer; padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23171818' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.cf-select:hover { border-color: var(--n700); }

/* ---- custom dropdown (fully styled, incl. the open list) ---- */
.cf-dropdown { position: relative; }
.cf-dd-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; cursor: url("cursors/hand.png") 6 1, pointer;
  font-family: var(--body); font-size: var(--fs-sm); color: var(--n900); background: #fff; border: 1px solid var(--n300); padding: 13px 15px; text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.cf-dd-trigger:hover { border-color: var(--n700); }
.cf-dropdown.open .cf-dd-trigger { border-color: var(--n900); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08); }
.cf-dropdown:not(.filled) .cf-dd-val { color: var(--n400); }
.cf-dd-trigger svg { flex: 0 0 auto; color: var(--n700); transition: transform 0.2s ease; }
.cf-dropdown.open .cf-dd-trigger svg { transform: rotate(180deg); }
.cf-dd-list { position: absolute; z-index: 30; top: calc(100% + 5px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--n900); max-height: 256px; overflow-y: auto; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16); }
.cf-dd-opt { font-family: var(--body); font-size: var(--fs-sm); color: var(--n800); padding: 11px 12px; cursor: url("cursors/hand.png") 6 1, pointer; transition: background 0.12s ease; }
.cf-dd-opt:hover { background: var(--n100); color: var(--n900); }
.cf-dd-opt.sel { background: var(--n100); color: var(--n900); }
.cf-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.cf-check { display: flex; align-items: flex-start; gap: 10px; font-family: var(--body); font-size: var(--fs-sm); line-height: 1.4; color: var(--n600); margin-top: 4px; cursor: url("cursors/hand.png") 6 1, pointer; }
.cf-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--n700); flex: 0 0 auto; }

/* submit — corner-bracket button, fills blue on hover */
.contact-submit { position: relative; overflow: hidden; z-index: 0; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-sm); letter-spacing: 0.06em; color: #fff; background: var(--n900); border: none;
  padding: 19px 44px; cursor: url("cursors/hand.png") 6 1, pointer; margin-top: 8px; transition: background 0.25s ease; }
.contact-submit:hover { background: #34373f; }
.contact-submit .brk i { position: absolute; width: 8px; height: 8px; border: 0 solid rgba(255, 255, 255, 0.65); }
.contact-submit .brk .tl { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
.contact-submit .brk .tr { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; }
.contact-submit .brk .bl { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; }
.contact-submit .brk .br { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }
.contact-submit .arrow { transition: transform 0.3s ease; }
.contact-submit:hover .arrow { transform: translateX(4px); }
.cf-fine { font-family: var(--body); font-size: var(--fs-sm); line-height: 1.5; color: var(--n500); margin: 10px 0 0; }
.cf-fine a { color: var(--n700); text-decoration: underline; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 480px) {
  .cf-row { grid-template-columns: 1fr; }
}

/* ---- value points ---- */
.ci-points { list-style: none; margin: clamp(22px, 3.5vh, 34px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ci-points li { display: flex; align-items: center; gap: 11px; font-family: var(--body); font-size: var(--fs-md); color: var(--n800); }
.ci-points li svg { color: var(--n500); flex: 0 0 auto; }

/* ---- great-fit-for block ---- */
.ci-fit { margin-top: clamp(34px, 4.5vh, 52px); }

/* ---- client marquee ---- */
.ci-proof { margin-top: clamp(30px, 4vh, 44px); }
.ci-proof-label { display: block; font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: 0.1em; color: var(--n500); margin-bottom: 14px; }
.ci-marquee { overflow: hidden; position: relative; min-width: 0; max-width: 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent); }
.ci-marquee-track { display: inline-flex; gap: 30px; white-space: nowrap; animation: ci-marq 36s linear infinite; will-change: transform; }
.ci-marquee:hover .ci-marquee-track { animation-play-state: paused; }
.ci-marquee-track span { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: 21px; color: var(--n400); }
@keyframes ci-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- testimonial ---- */
/* match the homepage .rcard testimonial styling */
.ci-quote { margin: clamp(30px, 4vh, 46px) 0 0; padding: 28px; border: 1px solid rgba(0, 0, 0, 0.22); background: #fff; display: flex; flex-direction: column; gap: 18px; }

/* ---- multi-step form ---- */
.cf-progress { display: flex; gap: 6px; margin-bottom: clamp(22px, 3vh, 32px); }
.cf-seg { flex: 1; height: 4px; background: var(--n300); transition: background 0.3s ease; }
.cf-seg.on { background: var(--n700); }
.cf-step { display: flex; flex-direction: column; gap: 16px; animation: cf-fade 0.3s ease; }
.cf-step[hidden] { display: none !important; }
@keyframes cf-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cf-step-title { font-family: var(--display); font-weight: 400; font-synthesis: none; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.05; color: var(--n900); margin: 0; }
.cf-step-sub { font-family: var(--body); font-size: var(--fs-sm); color: var(--n600); margin: -8px 0 4px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cf-chip { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--n700); background: #fff; border: 1px solid var(--n300); padding: 11px 16px; cursor: url("cursors/hand.png") 6 1, pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.cf-chip:hover { border-color: var(--n900); }
.cf-chip.on { background: var(--n900); color: #fff; border-color: var(--n900); }
.cf-chips--sm { gap: 8px; }
.cf-chip--sm { padding: 8px 13px; }
.cf-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.cf-actions .contact-submit { margin-top: 0; }
#scope-fields { display: flex; flex-direction: column; gap: 30px; }
#scope-fields .cf-field { gap: 12px; }
.cf-chips--sm { margin-top: 4px; }
.cf-back-btn { font-family: var(--mono); text-transform: uppercase; font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--n500); background: none; border: none; cursor: url("cursors/hand.png") 6 1, pointer; padding: 8px 4px; }
.cf-back-btn:hover { color: var(--n900); }
.cf-done-mark { width: 54px; height: 54px; display: grid; place-items: center; color: #fff; background: var(--n900); margin-bottom: 4px; }

/* form validation states */
.cf-input.cf-bad { border-color: #c0392b !important; box-shadow: 0 0 0 1px rgba(192,57,43,0.3); }
.cf-warn { color: #c0392b; font-size: 12px; margin-top: 6px; font-family: var(--body); }