/* KRIVA · /contact · page-scoped (trucking design system) */
body.page-contact{
  background:#fff;
  color:var(--ink);
  overflow-x:clip
}
body.page-contact main{
  color:var(--steel);
  font-size:16px;
  line-height:1.62
}

body.page-contact .d1{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.85rem,1rem + 3.55vw,4.65rem);
  line-height:.94;
  letter-spacing:-.032em;
  color:var(--ink)
}
body.page-contact .d2{
  font-size:clamp(2rem,3.8vw,3.4rem);
  line-height:1.08;
  letter-spacing:-.025em;
  font-weight:700;
  color:var(--ink);
  max-width:16ch
}
body.page-contact .d3{
  font-size:clamp(1.28rem,2vw,1.7rem);
  line-height:1.16;
  letter-spacing:-.022em;
  color:var(--ink)
}
body.page-contact .lede{
  max-width:46ch;
  font-size:clamp(1.05rem,1.3vw,1.22rem);
  letter-spacing:-.01em;
  line-height:1.6;
  color:var(--steel)
}
body.page-contact .body-sm{
  font-size:15px;
  line-height:1.62;
  color:var(--steel);
  max-width:48ch
}
body.page-contact main .btn{border-radius:8px}

#book,#brief,#chat{scroll-margin-top:96px}

/* ── Hero ── */
body.page-contact .hero{
  background:#fff;
  color:var(--ink);
  overflow:hidden;
  padding:calc(72px + clamp(28px,5vw,64px)) 0 clamp(48px,6vw,88px);
  scroll-margin-top:88px
}
body.page-contact .ct-hero-copy .d1{margin:18px 0 20px;max-width:14ch}
body.page-contact .ct-tag{
  display:block;
  margin-top:10px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--steel)
}

.ct-promise{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin-top:28px
}
.ct-promise div{background:#fff;padding:16px 18px}
.ct-promise b{
  display:block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cta);
  margin-bottom:8px
}
.ct-promise span{font-size:14px;line-height:1.45;color:var(--ink)}

.ct-details{
  background:#fff;
  border-top:1px solid var(--rule);
  padding:clamp(48px,6vw,80px) 0
}
.ct-details .ct-direct{margin-top:0;border-top:0}
.ct-details .ct-steps{margin-top:clamp(28px,3vw,40px);padding-top:0;border-top:0}
.ct-direct{margin-top:34px;border-top:1px solid var(--rule)}
.ct-direct div{
  display:grid;
  grid-template-columns:clamp(72px,9vw,104px) 1fr;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid var(--rule);
  align-items:baseline
}
.ct-direct dt{
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--steel)
}
.ct-direct dd{font-size:15px;color:var(--ink)}
.ct-direct dd a{
  border-bottom:1px solid var(--rule);
  transition:border-color var(--t-fast),color var(--t-fast);
  display:inline-block;
  min-height:24px
}
.ct-direct dd a:hover{border-color:var(--blue);color:var(--blue)}

.ct-steps{
  margin-top:clamp(36px,4vw,52px);
  padding-top:clamp(28px,3vw,40px);
  border-top:1px solid var(--rule)
}
.ct-steps h2{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:18px
}
.ct-steps ol{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,2vw,24px)
}
.ct-steps li{
  padding-top:14px;
  border-top:2px solid var(--rule)
}
.ct-steps .n{
  display:block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--cta);
  margin-bottom:10px
}
.ct-steps b{
  display:block;
  font-size:14.5px;
  line-height:1.35;
  color:var(--ink);
  font-weight:600;
  margin-bottom:6px
}
.ct-steps span{font-size:13.5px;line-height:1.5;color:var(--steel)}

.ct-explore{
  margin-top:clamp(24px,3vw,36px);
  font-size:14.5px;
  line-height:1.6;
  color:var(--steel);
  max-width:62ch
}
.ct-explore a{
  border-bottom:1px solid var(--rule);
  transition:border-color var(--t-fast),color var(--t-fast)
}
.ct-explore a:hover{border-color:var(--blue);color:var(--blue)}

/* ── Primary form (dark) ── */
.ct-primary{
  background:#101014;
  color:#c8c9d0;
  color-scheme:dark;
  padding:clamp(72px,9vw,120px) 0;
  scroll-margin-top:88px
}
.ct-primary .eyebrow{color:#8b8c94}
body.page-contact .ct-primary .d2{color:#fff;margin-top:18px;max-width:20ch}
.ct-primary .lede{color:#c8c9d0;max-width:42ch;margin-top:16px}
.ct-primary .ct-trust{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:20px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#8b8c94
}
.ct-primary .ct-trust span{display:flex;align-items:center;gap:8px}
.ct-primary .ct-trust span:before{
  content:"";
  width:5px;
  height:5px;
  background:var(--amber);
  flex:none
}
.ct-primary .body-sm{color:#8b8c94}
.ct-primary .body-sm a{color:#c8c9d0;border-bottom:1px solid #3a3a44}
.ct-primary .body-sm a:hover{color:#fff;border-color:#fff}
.ct-primary :focus-visible{outline-color:var(--amber)}

.ct-primary-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(32px,5vw,72px);
  align-items:start
}

/* ── Brief section (light) ── */
.ct-brief{
  background:#f7f8f9;
  border-top:1px solid #e6e7ea;
  padding:clamp(72px,9vw,120px) 0
}
.ct-brief .d2{margin-top:16px}
.ct-brief-grid{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(26px,4vw,72px);
  align-items:start;
  margin-top:clamp(26px,3vw,46px)
}
.ct-aside{position:sticky;top:104px}
.ct-assur{
  list-style:none;
  display:grid;
  gap:0;
  margin-top:24px;
  border-top:1px solid var(--rule)
}
.ct-assur li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--rule);
  font-size:14.5px;
  color:var(--ink)
}
.ct-assur li i{font-style:normal;color:var(--green)}
.ct-brief .body-sm a{
  border-bottom:1px solid var(--rule);
  transition:border-color var(--t-fast),color var(--t-fast)
}
.ct-brief .body-sm a:hover{border-color:var(--blue);color:var(--blue)}

/* ── Forms ── */
body.page-contact form{display:grid;gap:0}
body.page-contact fieldset{
  border:0;
  padding:0 0 clamp(22px,2.5vw,32px);
  margin-bottom:clamp(22px,2.5vw,32px);
  border-bottom:1px solid var(--rule)
}
body.page-contact .ct-primary fieldset{border-bottom-color:#2a2a32}
body.page-contact fieldset:last-of-type{border-bottom:0;margin-bottom:0}
body.page-contact legend{
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:11px
}
body.page-contact .ct-primary legend{color:#8b8c94}
body.page-contact legend:before{
  content:"";
  width:18px;
  height:1px;
  background:currentColor;
  opacity:.6
}
.fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,22px)
}
.f{display:grid;gap:8px}
.f.full{grid-column:1/-1}
.f label{
  font-size:14px;
  font-weight:500;
  display:flex;
  align-items:baseline;
  gap:8px;
  color:var(--ink)
}
body.page-contact .ct-primary .f label{color:#c8c9d0}
.f label .req{
  font-family:var(--f-mono);
  font-size:9px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel)
}
body.page-contact .ct-primary .f label .req{color:var(--lilac)}
.f .hint{font-size:12.5px;color:var(--steel);line-height:1.5}
body.page-contact .ct-primary .f .hint{color:#8b8c94}
.f input,.f select,.f textarea{
  font:inherit;
  font-size:16px;
  width:100%;
  min-height:48px;
  padding:12px 14px;
  background-color:var(--white);
  border:1px solid var(--rule);
  border-radius:8px;
  color:var(--ink);
  transition:border-color var(--t-fast) var(--e),box-shadow var(--t-fast) var(--e)
}
body.page-contact .ct-primary .f input,
body.page-contact .ct-primary .f select,
body.page-contact .ct-primary .f textarea{
  background-color:#1a1a22;
  border-color:#2a2a32;
  color:#fff
}
.f textarea{min-height:140px;resize:vertical;line-height:1.6}
#fitForm textarea{min-height:110px}
.f select,
.select-wrap select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:40px;
  cursor:pointer
}
.f select::-ms-expand,
.select-wrap select::-ms-expand{display:none}
.select-wrap{
  position:relative;
  display:block;
  width:100%
}
.select-wrap::after{
  content:"";
  position:absolute;
  top:50%;
  right:14px;
  width:12px;
  height:8px;
  transform:translateY(-50%);
  background: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.5 6 6.5 11 1.5' fill='none' stroke='%235C6770' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events:none
}
body.page-contact .ct-primary .select-wrap::after{
  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.5 6 6.5 11 1.5' fill='none' stroke='%238b8c94' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--steel-2)}
body.page-contact .ct-primary .f input:hover,
body.page-contact .ct-primary .f select:hover,
body.page-contact .ct-primary .f textarea:hover{border-color:#4a4a56}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(27,68,200,.14)
}
body.page-contact .ct-primary .f input:focus,
body.page-contact .ct-primary .f select:focus,
body.page-contact .ct-primary .f textarea:focus{
  border-color:var(--cta);
  box-shadow:0 0 0 3px rgba(79,70,229,.35)
}
.f input[aria-invalid="true"],.f select[aria-invalid="true"],.f textarea[aria-invalid="true"]{
  border-color:var(--red);
  background:#FBF4F3
}
body.page-contact .ct-primary .f input[aria-invalid="true"],
body.page-contact .ct-primary .f select[aria-invalid="true"],
body.page-contact .ct-primary .f textarea[aria-invalid="true"]{
  border-color:#f87171;
  background:#2a1518
}
.err{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--red);
  display:none
}
.err.on{display:block}
.hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}

.summary{
  display:none;
  padding:16px 18px;
  border:1px solid var(--red);
  background:#FBF4F3;
  margin-bottom:22px;
  border-radius:8px
}
body.page-contact .ct-primary .summary{background:#2a1518;border-color:#f87171}
.summary.on{display:block}
.summary b{
  display:block;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:10px;
  font-weight:400
}
.summary ul{margin:0;padding-left:18px;font-size:14px}
.summary a{color:var(--red);border-bottom:1px solid currentColor}

.submit-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:clamp(22px,2.5vw,32px)
}
.submit-row .btn{min-height:48px}
.submit-note{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--steel)
}
body.page-contact .ct-primary .submit-note{color:#8b8c94}
.spin{
  width:13px;
  height:13px;
  border:1.5px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:none
}
.btn.loading .spin{display:block}
.btn.loading i{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.done{
  display:none;
  border:1px solid var(--green);
  background:var(--white);
  padding:clamp(24px,3vw,38px);
  border-radius:12px
}
body.page-contact .ct-primary .done{
  background:#1a1a22;
  border-color:#2a2a32
}
.done.on{display:block}
.done .tick{
  width:38px;
  height:38px;
  border:1px solid var(--green);
  border-radius:8px;
  display:grid;
  place-items:center;
  color:var(--green);
  margin-bottom:20px;
  font-size:16px
}
.done h3{margin-bottom:12px;color:var(--ink)}
body.page-contact .ct-primary .done h3{color:#fff}
.done p{color:var(--steel)}
body.page-contact .ct-primary .done p{color:#c8c9d0}
.done ol{
  list-style:none;
  display:grid;
  gap:0;
  margin-top:22px;
  border-top:1px solid var(--rule)
}
body.page-contact .ct-primary .done ol{border-top-color:#2a2a32}
.done ol li{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--rule);
  font-size:14.5px;
  color:var(--ink)
}
body.page-contact .ct-primary .done ol li{
  border-bottom-color:#2a2a32;
  color:#c8c9d0
}
.done ol li u{
  text-decoration:none;
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--green);
  padding-top:3px
}
.done .after{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}
.done .after .btn{min-height:48px}
form.sent{display:none}

.ct-brief-form-wrap{
  background:#fff;
  border:1px solid #e6e7ea;
  border-radius:12px;
  padding:clamp(24px,3vw,36px)
}

@media(max-width:1024px){
  .ct-primary-grid,.ct-brief-grid{grid-template-columns:1fr;gap:30px}
  .ct-aside{position:static}
  .ct-steps ol{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .ct-promise{grid-template-columns:1fr}
  .ct-steps ol{grid-template-columns:1fr}
}
@media(max-width:760px){
  .fields{grid-template-columns:1fr}
  .submit-row .btn,.done .after .btn{width:100%;justify-content:center}
}
@media(max-width:640px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center;min-height:48px}
}
@media(max-width:390px){
  body.page-contact .hero .d1{font-size:1.9rem}
}
@media(min-width:1600px){
  body.page-contact .hero .d1{font-size:4.55rem}
}
@media (prefers-reduced-motion:reduce){
  .spin{animation:none}
}