/* Contact — kontakt | SALT Concept */
body{margin:0;background:#0b0a09}
a{color:#f4efe7}
a:hover{color:#ffffff}
a:focus-visible, button:focus-visible{outline:1px solid #ffe2aa; outline-offset:6px}

.field{box-sizing:border-box; width:100%; min-height:54px; padding:14px 18px; background:transparent; border:1px solid #8a8378; border-radius:0; color:#f4efe7; font-family:inherit; font-weight:300; font-size:16px; line-height:1.5; letter-spacing:.02em; transition:border-color .4s ease}
.field::placeholder{color:#b8b0a4; opacity:1}
.field:hover{border-color:#b8b0a4}
.field:focus{outline:none; border-color:#ffe2aa}
textarea.field{min-height:150px; resize:vertical}
.cta{transition:background-color .5s ease, color .5s ease, border-color .5s ease}
.cta:hover{background:#f4efe7; color:#14110e; border-color:#f4efe7}

/* zdjęcie biura wyłania się miękko po wczytaniu: z lekkiego rozmycia i powiększenia do ostrości,
   w oryginalnych kolorach; po najechaniu bardzo wolno się przybliża */
.shot{overflow:hidden; background:#14110e}
.fade{opacity:0; filter:blur(22px); transform:scale(1.08); transition:opacity 2.8s ease, filter 3.2s ease, transform 3.6s cubic-bezier(.2,.7,.2,1)}
.fade.in{opacity:1; filter:blur(0); transform:none}
@media (hover:hover){
  .shot:hover .fade.in{transform:scale(1.03); transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
}
[data-root]:not([data-js]) .fade{animation:failsafe 1s ease 2.5s forwards}
@keyframes failsafe{
  100%{opacity:1; filter:blur(0); transform:none}
}
@media (max-width: 760px){
  .pad{padding-left:22px !important; padding-right:22px !important}
  .inset{padding-left:0 !important}
}
@media (prefers-reduced-motion: reduce){
  .fade{opacity:1; filter:none; transform:none; transition:none; animation:none}
  .shot:hover .fade.in{transform:none}
  .cta, .field{transition:none}
}
/* Miękkie wejście strony: nagłówek przejaśnia się od razu (.soft), a kolejne elementy (.gate)
   czekają na swoją kolej (data-gate, w ms od otwarcia) i na wjechanie w ekran. Bez skryptu wszystko jest widoczne. */
.soft{animation:softIn 2.25s cubic-bezier(.4,0,.2,1) var(--d, 0s) both}
@keyframes softIn{
  0%{opacity:0; filter:blur(3px); transform:translateY(4px)}
  100%{opacity:1; filter:blur(0); transform:none}
}
.gate{opacity:0; filter:blur(6px); transform:translateY(14px)}
.gate.in{opacity:1; filter:blur(0); transform:none; transition:opacity 1.8s ease, filter 2s ease, transform 2.1s cubic-bezier(.2,.7,.2,1)}
/* gdyby skrypt się nie uruchomił, elementy i tak pojawią się po chwili */
[data-root]:not([data-js]) .gate{animation:gateSafe 1.2s ease 7s forwards}
@keyframes gateSafe{
  100%{opacity:1; filter:blur(0); transform:none}
}
@media (prefers-reduced-motion: reduce){
  .soft{animation:none}
  .gate, .gate.in{opacity:1; filter:none; transform:none; transition:none; animation:none}
}