/* Contact: the direct details on the right in groups split by thin lines, with the social dock last; the short form (sends to WhatsApp,
   js/sections/contact-form.js) on the left in a raised card. */
.contact{display:grid;grid-template-columns:1fr 1.45fr;gap:56px;align-items:start;padding:64px var(--gutter) 88px}
.ct-card{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-22);padding:40px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-content:start}
.form .full{grid-column:1/-1}
.form .btn[type=submit]{width:100%}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.direct{display:grid;align-content:start}
.direct .ct-head{padding:0 0 36px;border-bottom:1px solid var(--line);margin-bottom:28px}
.direct .ct-head h2{font-size:clamp(34px,3.8vw,52px);margin:0}
.direct h2{font-size:var(--fs-26);color:var(--title);margin-bottom:8px}
.ct-group{display:grid;gap:26px;padding:28px 0;border-bottom:1px solid var(--line)}
.ct-group:last-child{border-bottom:0}
.direct .row{display:flex;gap:16px;align-items:flex-start;font-size:var(--fs-16);color:var(--char);line-height:1.6}
.direct .row svg{flex:none;color:var(--red);margin-top:3px}
.direct .row b{display:block;color:var(--head);margin-bottom:2px}
.direct .row a{color:var(--char);text-decoration:none;transition:color .2s ease}
.direct .row a.ltr{display:block;direction:ltr;text-align:right}
@media (hover:hover) and (pointer:fine){.direct .row a:hover{color:var(--red-on-dark)}}
.ct-soc .dock{margin:0;width:max-content;--dock-a:44px;--dock-ic:20px;--dock-gap:10px;--dock-pad:8px;border-radius:var(--r-16)}
.ok{display:flex;gap:14px;align-items:flex-start;background:var(--ok-bg);border-radius:var(--r-14);padding:16px 18px;color:var(--ok-fg);font-size:var(--fs-16)}
.ok b{color:var(--ok-strong);display:block}
.ok svg{flex:none;margin-top:3px}
@media (max-width:1000px){.contact{grid-template-columns:1fr;gap:32px}
  /* one column: the heading, then the form, then the contact details */
  .direct{display:contents}
  .direct .ct-head{order:1;margin-bottom:-4px}
  .ct-card{order:2}
  .direct>h2,.direct .ct-group{order:3}
  .direct .ct-group{padding:0 0 26px}
  .direct>h2{margin-top:8px}}
@media (max-width:760px){.contact{padding:40px var(--gutter-m) 64px}.ct-card{padding:24px 18px}.form{grid-template-columns:1fr}}
.form-msg{color:var(--red-on-dark);font-size:var(--fs-15);min-height:0}
.form-msg:empty{display:none}
/* fields as filled boxes with the placeholder as the label (the real labels stay for screen readers) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ct-card .field input,.ct-card .field textarea{background:var(--ink-2);border-color:transparent;min-height:58px;padding-inline:18px}
.ct-card .field textarea{min-height:150px;padding-block:16px}
.ct-card .field input::placeholder,.ct-card .field textarea::placeholder{color:var(--grey)}
.ct-card .field input[dir=ltr]::placeholder{direction:rtl;text-align:right}
.ct-card .field input[dir=ltr]{text-align:right}
.ct-card .field input[dir=ltr]:not(:placeholder-shown){text-align:left}
.ct-card .btn[type=submit]{margin-top:8px}
.ct-card .field.err input{border-color:var(--red)}