/* ============================================================
   Develop2Any — Contact ("Start a project")
   Exact rebuild of contact-page-mockup. Depends on main.css tokens.
   Styles the Contact Form 7 markup into the mockup's custom fields.
   ============================================================ */

/* page-specific kicker delta (base rule shared via main.css) */
.cp .sec-kicker{display:block}
.cp .sec-kicker.is-red{color:var(--red-2)}

/* =========================================================
   HERO
   ========================================================= */
.cp-hero-sec{padding-top:50px;padding-bottom:40px}
.cp-hero-sec .sec-kicker{letter-spacing:2px}
.cp-h1{font-family:'Archivo Black',sans-serif;font-size:84px;line-height:.95;letter-spacing:-2px;margin-top:18px;font-weight:400}
.cp-h1 .hl{background:linear-gradient(transparent 80%,#c6d92e 80%,#c6d92e 97%,transparent 97%)}
.cp-lead{font-family:'Source Serif 4',serif;font-size:30px;line-height:1.25;margin-top:24px;max-width:560px}
.cp-lead em{color:var(--red-2);font-style:italic}
.cp-subintro{font-size:15.5px;color:var(--muted);margin-top:20px}

/* =========================================================
   TRUST BAR
   ========================================================= */
.cp-trust-sec{padding-top:30px;padding-bottom:30px}
.cp-trust{display:flex;align-items:center}
.cp-trust-item{flex:1;display:flex;align-items:center;gap:14px;padding:0 24px}
.cp-trust-item:first-child{padding-left:0}
.cp-trust-item:last-child{padding-right:0}
.cp-trust-ic{flex:none}
.cp-trust-tx{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1px;line-height:1.5;color:var(--text-2)}
.cp-trust-item.is-green .cp-trust-tx{color:var(--lime-3)}
.cp-trust-item .cp-trust-sub{color:var(--text-2)}
.cp-trust-sep{width:1px;height:40px;background:var(--line);flex:none}

/* =========================================================
   MAIN TWO-COLUMN
   ========================================================= */
.cp-main{padding-top:44px;padding-bottom:56px}
.cp-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:start}
.cp-form-title{font-family:'Archivo Black',sans-serif;font-size:32px;letter-spacing:-.5px;margin-top:12px;padding-bottom:18px;border-bottom:1px solid var(--line);font-weight:400}
.cp-noform{margin-top:24px;color:var(--muted)}
.cp-noform a{color:var(--red-2);text-decoration:underline}

/* form field heads */
.cp-field-head{margin-top:30px;display:flex;align-items:baseline;gap:10px}
.cp-q{font-weight:700;font-size:15px}
.cp-hint{font-family:'Space Mono',monospace;font-size:11px;color:#888}
.cp-hint.cp-req{color:var(--red-2)}
.cp-label{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.cp-strong{font-weight:700;font-size:14px}
.cp-block{margin-top:30px}
.cp-sub{font-size:13px;color:#777;margin-bottom:12px}

/* two-up rows */
.cp-2{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:30px}

/* ---- CF7 generic resets within the contact form ---- */
.cp-left .wpcf7-form p{margin:0}
.cp-left .wpcf7 .wpcf7-form-control-wrap{display:block}

/* underline text/url/email + select fields */
.cp-field,
.cp-left input.wpcf7-text,
.cp-left input.wpcf7-email,
.cp-left input.wpcf7-url,
.cp-left select.wpcf7-select{
  width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--border-divider);
  padding:10px 2px;font-family:'Archivo',sans-serif;font-size:15px;color:var(--ink);
  outline:none;transition:border-color .2s ease;border-radius:0;
}
.cp-left input.wpcf7-text:focus,
.cp-left input.wpcf7-email:focus,
.cp-left input.wpcf7-url:focus,
.cp-left select.wpcf7-select:focus{border-bottom-color:var(--red)}
.cp-left input::placeholder{color:#a8a08c}
.cp-left select.wpcf7-select{cursor:pointer}

/* textarea */
.cp-left textarea.wpcf7-textarea{
  width:100%;min-height:120px;resize:vertical;background:#fff;border:1.5px solid var(--line);
  border-radius:6px;padding:14px 16px;font-family:'Archivo',sans-serif;font-size:15px;color:var(--ink);outline:none;
}
.cp-left textarea.wpcf7-textarea:focus{border-color:var(--red)}
.cp-left textarea::placeholder{color:#a8a08c}

/* ---- "What do you need" pill grid (CF7 checkbox) ---- */
.cp-opts .wpcf7-checkbox{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:16px}
/* ---- "How to engage" pill grid (CF7 radio) ---- */
.cp-eng .wpcf7-radio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}

.cp-opt{position:relative;border:1.5px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;margin:0}
.cp-opt:hover{transform:translateY(-2px)}
.cp-opt.is-sel{border-color:var(--lime);background:#fbfdf0}
.cp-opt label{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 8px;cursor:pointer;font-weight:500;font-size:12px;text-align:center}
.cp-eng .cp-opt label{flex-direction:row;align-items:center;gap:14px;padding:18px 20px;font-size:14px;font-weight:600;text-align:left}
.cp-opt input[type=checkbox],.cp-opt input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.cp-opt .wpcf7-list-item-label{order:2}
.cp-opt-ic{order:1;display:inline-flex;align-items:center;justify-content:center}
.cp-check{position:absolute;top:8px;right:8px;opacity:0;transition:opacity .2s ease;z-index:2}
.cp-opt.is-sel .cp-check{opacity:1}
/* CF7 wraps list items in spans with default margins */
.cp-opts .wpcf7-list-item,.cp-eng .wpcf7-list-item{margin:0}

/* consent + submit */
.cp-left .wpcf7-acceptance{margin-top:18px;display:block}
.cp-left .wpcf7-acceptance .wpcf7-list-item{margin:0}
.cp-left .wpcf7-acceptance label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-2);cursor:pointer}
.cp-left .wpcf7-acceptance input{width:16px;height:16px;accent-color:var(--red)}
.cp-submit,.cp-left input.wpcf7-submit{
  margin-top:24px;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  background:var(--red);color:#fff;border:none;border-radius:4px;padding:17px 60px;
  font-family:'Space Mono',monospace;font-size:15px;font-weight:700;cursor:pointer;
}
.cp-left input.wpcf7-submit:hover{background:#7a1717}

/* CF7 validation + response messages */
.cp-left .wpcf7-not-valid-tip{color:var(--red-2);font-size:12px;font-family:'Space Mono',monospace;margin-top:4px}
.cp-left .wpcf7-not-valid{border-bottom-color:var(--red-2) !important}
.cp-left .wpcf7-response-output{margin:18px 0 0 !important;border:1.5px solid var(--line) !important;border-radius:6px;padding:12px 16px !important;font-size:14px;background:#fff}
.cp-left .wpcf7-mail-sent-ok{border-color:var(--lime-3) !important;color:#2e5a12}

/* =========================================================
   SIDEBAR
   ========================================================= */
.cp-right{border-left:1px solid var(--line);padding-left:40px}
.cp-side-kicker{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:1.5px;color:var(--red-2)}
.cp-side-rule{border:none;height:1px;background:var(--line-2);margin:26px 0}
.cp-side-email{display:flex;align-items:center;gap:12px;margin-top:14px}
.cp-side-email a{font-weight:700;font-size:15px;color:var(--ink)}
.cp-side-note{font-family:'Source Serif 4',serif;font-size:13.5px;color:var(--text-soft);margin-top:8px}
.cp-side-resp{display:flex;align-items:center;gap:12px;margin-top:14px;font-family:'Space Mono',monospace;font-weight:700;font-size:16px}
.cp-timeline{margin-top:18px;position:relative}
.cp-timeline-line{position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:var(--line-2)}
.cp-tl-step{position:relative;display:flex;gap:16px;padding-bottom:20px}
.cp-tl-step:last-child{padding-bottom:0}
.cp-tl-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--lime);display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:11px;font-weight:700}
.cp-tl-title{font-weight:700;font-size:14px}
.cp-tl-desc{font-size:13px;color:var(--text-soft);line-height:1.5;margin-top:3px}
.cp-offices{margin-top:16px;display:flex;flex-direction:column;gap:16px}
.cp-office{display:flex;align-items:center;gap:14px}
.cp-office-ic{flex:none}
.cp-office-meta{flex:1}
.cp-office-name{font-weight:700;font-size:14px}
.cp-office-city{font-size:13px;color:var(--text-soft)}
.cp-office-tz{font-family:'Space Mono',monospace;font-size:12px;color:var(--text-2);text-align:right}
.cp-fit{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.cp-fit-item{display:flex;align-items:center;gap:10px;font-size:13.5px}

/* =========================================================
   DARK PROCESS BAND
   ========================================================= */
.cp-proc-band{background:var(--dark);color:#fff;padding:56px 0}
.cp-proc-title{font-family:'Archivo Black',sans-serif;font-size:30px;letter-spacing:-.5px;margin-top:12px;margin-bottom:40px;font-weight:400}
.cp-proc{display:grid;grid-template-columns:repeat(4,1fr)}
.cp-proc-step{padding:0 30px;border-left:1px solid #2e2e2e}
.cp-proc-step:first-child{padding-left:0;border-left:0}
.cp-proc-step:last-child{padding-right:0}
.cp-proc-top{display:flex;align-items:center;gap:14px}
.cp-proc-ic{flex:none}
.cp-proc-num{font-family:'Space Mono',monospace;font-size:15px;font-weight:700;color:var(--lime)}
.cp-proc-dash{flex:1;height:1px;border-top:1px dashed #444}
.cp-proc-name{font-family:'Archivo Black',sans-serif;font-size:16px;margin-top:18px;font-weight:400}
.cp-proc-desc{font-size:13px;color:#9a9a9a;line-height:1.55;margin-top:8px}

/* CTA row styles are shared — see main.css (.cta-row…). */

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:920px){
  .cp-grid{grid-template-columns:1fr}
  .cp-right{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:40px;margin-top:8px}
  .cp-2{grid-template-columns:1fr}
  .cp-opts .wpcf7-checkbox{grid-template-columns:repeat(3,1fr)}
  .cp-eng .wpcf7-radio{grid-template-columns:1fr}
  .cp-proc{grid-template-columns:1fr 1fr;row-gap:32px}
  .cp-proc-step{border-left:0;padding:0}
  .cp-h1{font-size:14vw}
  .cta-row-inner{flex-wrap:wrap}
}
@media (max-width:560px){
  .cp-opts .wpcf7-checkbox{grid-template-columns:1fr 1fr}
  .cp-trust{flex-wrap:wrap;gap:18px}
  .cp-trust-sep{display:none}
  .cp-trust-item{flex:1 1 44%;padding:0}
  .cp-proc{grid-template-columns:1fr}
  .cp-lead{font-size:24px}
}