/* ══ CONTACT ══════════════════════════════════════════════════════════════ */
.zr-ct__grid{
  display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:56px; align-items:start;
  padding-block:clamp(32px,3.4vw,52px) clamp(48px,5vw,80px);
}
.zr-ct__form{
  display:flex; flex-direction:column; gap:18px;
  padding:28px; background:#fff; border:1px solid var(--bl-hair); border-radius:20px;
  box-shadow:var(--bl-card-sh);
}
/* NOT .zr-field — index.html already owns that name for the hero's input
   wrapper, which caps width at 497px and paints a blue radial behind it.
   Reusing it here put a blue block behind every contact field and stopped
   them filling their column. */
.zr-ct__f{ display:flex; flex-direction:column; gap:7px; min-width:0; width:100%; }
.zr-ct__f > label{ font-size:13.5px; font-weight:500; line-height:20px; color:var(--bl-ink); }
.zr-ct__f > label s{ text-decoration:none; font-weight:400; color:var(--bl-dim); }
.zr-ct__f input, .zr-ct__f select, .zr-ct__f textarea{
  width:100%; padding:0 14px; height:46px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:10px;
  font:inherit; font-size:15px; color:var(--zr-ink);
  transition:border-color .16s var(--zr-ease-out-quad), box-shadow .16s var(--zr-ease-out-quad);
}
.zr-ct__f textarea{ height:auto; min-height:132px; padding:12px 14px; line-height:23px; resize:vertical; }
.zr-ct__f input::placeholder, .zr-ct__f textarea::placeholder{ color:#A9AEB5; }
.zr-ct__f :is(input,select,textarea):focus{
  outline:none; border-color:#9FC0FF; box-shadow:0 0 0 3px rgba(20,99,245,.12);
}
.zr-ct__f :is(input,select,textarea):user-invalid{
  border-color:#E9A3A0; box-shadow:0 0 0 3px rgba(252,65,61,.10);
}
.zr-ct__err{ font-size:12.5px; line-height:18px; color:#C0342F; }
.zr-ct__f :is(input,select,textarea):user-invalid ~ .zr-ct__err{ display:block; }
.zr-ct__err{ display:none; }
.zr-ct__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.zr-ct__submit{
  display:flex; align-items:center; justify-content:center; gap:9px;
  height:50px; border:0; border-radius:10px;
  background:var(--zr-blue); color:#fff; font:inherit; font-size:16px; font-weight:500;
  cursor:pointer;
  box-shadow:0 1px 1px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.35);
  transition:background .16s linear, box-shadow .16s linear;
}
.zr-ct__submit:hover{ background:#0D55DD; box-shadow:0 1px 1px rgba(0,0,0,.1), inset 0 3px 14px rgba(255,255,255,.5); }
.zr-ct__submit:active{ translate:0 1px; box-shadow:inset 0 2px 8px rgba(15,23,42,.24); }
.zr-ct__fine{ margin:0; font-size:12.5px; line-height:19px; color:var(--bl-dim); }
.zr-ct__fine a{ color:var(--zr-blue); }

/* the sent state replaces the form rather than sitting above it */
.zr-ct__done{
  display:none; flex-direction:column; align-items:flex-start; gap:10px;
  padding:28px; background:#F3FBF6; border:1px solid #BFE5CD; border-radius:20px;
}
.zr-ct__done svg{ width:30px; height:30px; color:#0F9D58; }
.zr-ct__done b{ font-size:19px; font-weight:500; line-height:27px; color:#0F7A45; }
.zr-ct__done p{ margin:0; font-size:15px; line-height:23px; color:#2D6B4A; }
.zr-ct.is-sent .zr-ct__form{ display:none; }
.zr-ct.is-sent .zr-ct__done{ display:flex; }

.zr-ct__side{ display:flex; flex-direction:column; gap:14px; }
.zr-ct__card{ padding:20px; background:#fff; border:1px solid var(--bl-hair); border-radius:16px; }
.zr-ct__card h3{ margin:0 0 4px; font-size:15.5px; font-weight:500; line-height:23px; color:var(--bl-ink); }
.zr-ct__card p{ margin:0; font-size:14px; line-height:22px; color:var(--bl-dim); }
.zr-ct__card a{ color:var(--zr-blue); text-decoration:none; }
.zr-ct__card a:hover{ text-decoration:underline; }
.zr-ct__ico{
  display:grid; place-items:center; width:34px; height:34px; margin-bottom:12px;
  border-radius:10px; background:#fff; border:1px solid #E4EAF7; color:var(--zr-blue);
}
.zr-ct__ico svg{ width:18px; height:18px; display:block; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .zr-art__grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .zr-art__rail{ position:static; flex-direction:row; flex-wrap:wrap; gap:16px; margin-bottom:28px; }
  .zr-toc{ flex:1 1 260px; }
  .zr-rail-cta{ flex:1 1 260px; }
  .zr-ct__grid{ grid-template-columns:minmax(0,1fr); gap:28px; }
}
@media (max-width:900px){
  .zr-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-feat{ flex-direction:column; align-items:stretch; gap:20px; }
  .zr-feat .zr-cover{ width:100%; max-width:none; }
  .zr-news{ padding:28px; gap:24px; }
}
@media (max-width:620px){
  .zr-cards{ grid-template-columns:minmax(0,1fr); }
  .zr-news__form{ flex-wrap:wrap; }
  .zr-news__form button{ width:100%; }
  .zr-ct__row{ grid-template-columns:1fr; }
  .zr-ct__form{ padding:20px; }
  .zr-art__rail{ flex-direction:column; }
}