/* DuoRive inquiry experience · graphite, monochrome + ember orange.
   Dedicated to /contact/; all selectors are page-scoped.
   This sheet intentionally loads after site.css/pages.css to override legacy form rules. */

.contact-page .cf-card {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.48fr);
  gap:clamp(30px,4.4vw,70px);
  width:100%;
  max-width:1180px;
  margin:clamp(40px,6vw,74px) auto 0;
  padding:clamp(28px,4vw,60px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:clamp(22px,2.7vw,32px);
  background:
    radial-gradient(ellipse at 0 0,rgba(253,119,6,.13),transparent 44%),
    linear-gradient(145deg,#222329 0%,#17181C 52%,#101114 100%);
  box-shadow:0 30px 78px rgba(16,17,20,.2);
  color:#F6F7F9;
  isolation:isolate;
}
.contact-page .cf-head {
  align-self:stretch;
  padding:4px clamp(22px,3vw,42px) 12px 0;
  border-right:1px solid rgba(255,255,255,.15);
}
.contact-page .cf-kicker {
  display:block;
  color:#FD7706;
  font-size:11px;
  font-weight:750;
  letter-spacing:.22em;
  line-height:1.5;
  text-transform:uppercase;
}
.contact-page #cfTitle {
  max-width:12ch;
  margin:25px 0 0;
  color:#F7F8FA;
  font-size:clamp(31px,3.2vw,46px);
  font-weight:820;
  letter-spacing:-.045em;
  line-height:1.08;
}
.contact-page .cf-sub {
  max-width:32ch;
  margin:20px 0 0;
  color:#BDC1C9;
  font-size:15px;
  line-height:1.7;
}
.contact-page .cf-form {min-width:0; margin:0}
.contact-page .cf-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:18px;
}
.contact-page .cf-field {min-width:0}
.contact-page .cf-grid > .cf-field:nth-child(3),
.contact-page .cf-grid > .cf-wide {grid-column:1/-1}
.contact-page .cf-float {position:relative}
.contact-page .cf-float input,
.contact-page .cf-float textarea {
  display:block;
  width:100%;
  min-height:70px;
  margin:0;
  padding:27px 19px 12px;
  border:1px solid rgba(243,244,246,.23);
  border-radius:17px;
  outline:0;
  background:rgba(247,248,250,.055);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
  color:#FAFAFB;
  caret-color:#FD7706;
  font:inherit;
  font-size:15.5px;
  line-height:1.35;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .22s,background-color .22s,box-shadow .22s;
}
.contact-page .cf-float textarea {
  min-height:149px;
  resize:vertical;
  padding-top:29px;
  line-height:1.55;
}
.contact-page .cf-float input:hover,
.contact-page .cf-float textarea:hover {
  border-color:rgba(255,255,255,.47);
}
.contact-page .cf-float input:focus,
.contact-page .cf-float textarea:focus {
  border-color:#FD7706;
  background:rgba(247,248,250,.10);
  box-shadow:0 0 0 3px rgba(253,119,6,.18);
}
.contact-page .cf-float label {
  position:absolute;
  top:23px;
  left:19px;
  max-width:calc(100% - 38px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#BBC0C9;
  font-size:14.5px;
  line-height:1.3;
  pointer-events:none;
  transition:top .19s,color .19s,font-size .19s,letter-spacing .19s;
}
.contact-page .cf-float input:focus + label,
.contact-page .cf-float input:not(:placeholder-shown) + label,
.contact-page .cf-float textarea:focus + label,
.contact-page .cf-float textarea:not(:placeholder-shown) + label {
  top:9px;
  color:#FD9D49;
  font-size:10px;
  font-weight:750;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.contact-page .cf-float input:invalid:not(:placeholder-shown):not(:focus),
.contact-page .cf-float textarea:invalid:not(:placeholder-shown):not(:focus){
  border-color:rgba(255,131,118,.75);
}
.contact-page .cf-float input:-webkit-autofill,
.contact-page .cf-float input:-webkit-autofill:hover,
.contact-page .cf-float input:-webkit-autofill:focus {
  -webkit-text-fill-color:#FAFAFB;
  box-shadow:0 0 0 100px #2A2B30 inset;
  transition:background-color 9999s;
}
.contact-page .cf-budget {
  min-width:0;
  margin:3px 0 0;
  padding:0;
  border:0;
}
.contact-page .cf-group-label {
  display:block;
  width:100%;
  margin:0 0 13px;
  padding:0;
  color:#CBD0D7;
  font-size:11px;
  font-weight:750;
  letter-spacing:.15em;
  line-height:1.6;
  text-transform:uppercase;
}
.contact-page .cf-chips {display:flex;flex-wrap:wrap;gap:9px}
.contact-page .cf-chip {position:relative;display:inline-flex;max-width:100%;cursor:pointer}
.contact-page .cf-chip input {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.contact-page .cf-chip span {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:41px;
  padding:10px 16px;
  border:1px solid rgba(245,246,248,.25);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#E4E5EA;
  font-size:12.5px;
  font-weight:650;
  line-height:1.3;
  text-align:center;
  transition:border-color .2s,background-color .2s,color .2s,transform .2s;
}
.contact-page .cf-chip:hover span {
  border-color:#FD7706;
  background:rgba(253,119,6,.13);
  transform:translateY(-1px);
}
.contact-page .cf-chip input:checked + span {
  border-color:#FD7706;
  background:#FD7706;
  color:#101114;
}
.contact-page .cf-chip input:focus-visible + span {
  outline:2px solid #FD9D49;
  outline-offset:3px;
}
.contact-page .cf-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:22px;
  margin:26px 0 0;
  padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.contact-page .cf-note {
  max-width:31ch;
  color:#B6BAC3;
  font-size:12.5px;
  line-height:1.65;
}
.contact-page .cf-submit {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  min-height:56px;
  margin:0;
  padding:17px 25px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#FD7706,#EA6500);
  box-shadow:0 10px 24px rgba(253,119,6,.19);
  color:#101114;
  font-family:var(--font);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s,background .2s,box-shadow .2s;
}
.contact-page .cf-submit:hover {
  transform:translateY(-2px);
  background:linear-gradient(135deg,#FF9738,#FD7706);
  box-shadow:0 14px 26px rgba(253,119,6,.25);
}
.contact-page .cf-submit:focus-visible {
  outline:2px solid #FD9D49;
  outline-offset:4px;
}
.contact-page .cf-submit:disabled {opacity:.55;pointer-events:none;transform:none}
.contact-page .cf-status {
  margin:16px 0 0;
  min-height:1.3em;
  color:#E0E2E7;
  font-size:13.5px;
  line-height:1.55;
}
.contact-page .cf-status:empty {display:none}
.contact-page .cf-status.err {color:#FFAF9F}
.contact-page .cf-success {
  grid-column:1/-1;
  align-self:center;
  padding:24px 0;
  text-align:center;
}
.contact-page .cf-success[hidden] {display:none}
.contact-page .cf-check {
  display:grid;
  place-items:center;
  width:68px;
  height:68px;
  margin:0 auto 18px;
  border-radius:50%;
  background:#FD7706;
  color:#101114;
  font-size:32px;
}
.contact-page .cf-success-title {
  color:#FAFAFB;
  font-size:32px;
  font-weight:820;
  letter-spacing:-.035em;
}
.contact-page .cf-success-text {
  max-width:40ch;
  margin:12px auto 0;
  color:#BDC1C9;
  line-height:1.6;
}
.contact-page .hp-field {
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
@media(max-width:960px) {
  .contact-page .cf-card {grid-template-columns:1fr;gap:30px}
  .contact-page .cf-head {
    padding:0 0 25px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  .contact-page #cfTitle {max-width:none;font-size:clamp(30px,5.5vw,43px);margin-top:12px}
  .contact-page .cf-sub {max-width:58ch;margin-top:12px}
}
@media(max-width:600px) {
  .contact-page .cf-card {padding:27px 20px;border-radius:24px;margin-top:38px}
  .contact-page .cf-grid {grid-template-columns:1fr;gap:15px}
  .contact-page .cf-grid > .cf-field {grid-column:1/-1}
  .contact-page .cf-float input {min-height:67px}
  .contact-page .cf-chips {gap:8px}
  .contact-page .cf-chip span {padding:10px 13px;font-size:12px}
  .contact-page .cf-foot {align-items:stretch}
  .contact-page .cf-note {max-width:none}
  .contact-page .cf-submit {width:100%}
}
@media(prefers-reduced-motion:reduce) {
  .contact-page .cf-float input,
  .contact-page .cf-float textarea,
  .contact-page .cf-float label,
  .contact-page .cf-chip span,
  .contact-page .cf-submit {transition:none}
}
