/* Formularz zapytania (/kontakt/zapytanie/).
   Ten sam język co /kontakt: jasne tło, Inter, tytuł krojem HVMBAK Pro, etykiety 10 px wersalikami, ostre rogi.
   Regulamin i polityka prywatności mają osobny, klasyczny styl: dokument.css. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Inter; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'HVMBAK Pro'; font-style: normal; font-weight: 900; font-display: block; src: url(fonts/hvmbak-pro.woff2) format('woff2'); }

/* TLO:START tło jak na stronie z kasetami (stage.js: gradient + winieta); blok wstawia tools/tlo.mjs, nie poprawiać ręcznie */
  :root { --tlo-u: 1vh; --tlo: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) calc(var(--tlo-u)*35), rgba(0,0,0,.0039) calc(var(--tlo-u)*41.25), rgba(0,0,0,.0118) calc(var(--tlo-u)*47.5), rgba(0,0,0,.0235) calc(var(--tlo-u)*53.75), rgba(0,0,0,.0431) calc(var(--tlo-u)*60), rgba(0,0,0,.0588) calc(var(--tlo-u)*66.25), rgba(0,0,0,.0784) calc(var(--tlo-u)*72.5), rgba(0,0,0,.098) calc(var(--tlo-u)*78.75), rgba(0,0,0,.1176) calc(var(--tlo-u)*85), rgba(0,0,0,.1333) calc(var(--tlo-u)*91.25), rgba(0,0,0,.149) calc(var(--tlo-u)*97.5), rgba(0,0,0,.1569) calc(var(--tlo-u)*103.75), rgba(0,0,0,.1608) calc(var(--tlo-u)*110)),
    radial-gradient(circle at 50% 44%, #ecedee 0, #ecedee calc(var(--tlo-u)*6.17), #ebeced calc(var(--tlo-u)*12.35), #eaeced calc(var(--tlo-u)*18.52), #e9ebec calc(var(--tlo-u)*24.69), #e8e9eb calc(var(--tlo-u)*30.86), #e6e8ea calc(var(--tlo-u)*37.04), #e4e7e9 calc(var(--tlo-u)*43.21), #e2e5e7 calc(var(--tlo-u)*49.38), #e1e3e6 calc(var(--tlo-u)*55.56), #dfe2e5 calc(var(--tlo-u)*61.73), #dee1e4 calc(var(--tlo-u)*67.9), #dee1e4 calc(var(--tlo-u)*74.07)); }
  @supports (height: 1svh) { :root { --tlo-u: 1svh; } }
  /* TLO:KONIEC */
:root { color-scheme: light; --fg: #111; --dim: #6d7278; --line: rgba(17,17,17,.2); --pad: 9vw; }
* { box-sizing: border-box; }
html { background: #e0e2e5; }
html, body { margin: 0; min-height: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; /* stopka zostaje na dole także przy krótkiej treści */
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--fg); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
/* tło jak na /kontakt i na stronie z kasetami, przypięte do okna osobną warstwą (background-attachment: fixed nie działa w Safari na iOS) */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--tlo); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

header { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; padding: 34px 0; pointer-events: none; }
header a { pointer-events: auto; display: block; line-height: 0; }
header .logo { height: 28px; width: auto; }
.back { position: absolute; top: 34px; left: 44px; line-height: 28px; font-size: 10px; letter-spacing: 0.22em; color: var(--dim); text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.back:hover { color: var(--fg); }

main { flex: 1 0 auto; padding: 168px var(--pad) 0; }
h1 { font-family: 'HVMBAK Pro', Inter, sans-serif; font-weight: 900; font-synthesis: none; text-transform: uppercase;
     font-size: clamp(34px, 6vw, 112px); letter-spacing: 0; line-height: 1.04; margin: 0 0 0 -0.084em; }
.etykieta { font-size: 10px; letter-spacing: 0.22em; color: var(--dim); text-transform: uppercase; }

/* formularz */
form { margin-top: 56px; max-width: 560px; }
.pole { display: block; margin: 0 0 30px; }
.pole .etykieta { display: block; margin-bottom: 8px; }
.pole input, .pole textarea {
  display: block; width: 100%; margin: 0; padding: 6px 0 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--fg); font: 500 18px/1.4 Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.01em;
  -webkit-appearance: none; appearance: none; outline: none;
}
.pole textarea { min-height: 132px; resize: vertical; line-height: 1.5; }
.pole input:hover, .pole textarea:hover { border-bottom-color: rgba(17,17,17,.45); }
.pole input:focus, .pole textarea:focus { border-bottom-color: var(--fg); box-shadow: 0 1px 0 var(--fg); }
.pole input[aria-invalid="true"], .pole textarea[aria-invalid="true"],
.pole input[aria-invalid="true"]:focus, .pole textarea[aria-invalid="true"]:focus { border-bottom-color: #b42318; box-shadow: 0 1px 0 #b42318; }
.blad { display: block; min-height: 0; margin-top: 8px; font-size: 12px; line-height: 1.4; color: #b42318; }
.blad:empty { display: none; }
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.wyslij {
  display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 30px; border: 0; border-radius: 0; cursor: pointer;
  background: var(--fg); color: #fff; font: 600 11px/1 Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.22em; text-transform: uppercase;
  -webkit-appearance: none; appearance: none;
}
.wyslij:hover { background: #000; }
.wyslij[disabled] { opacity: .5; cursor: default; }
.stan { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #b42318; }
.stan:empty { display: none; }
.klauzula { margin: 26px 0 0; max-width: 520px; font-size: 12px; line-height: 1.6; color: var(--dim); }
.klauzula a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.klauzula a:hover { color: var(--fg); }
.wyslane { margin-top: 56px; max-width: 560px; }
.wyslane p { margin: 0 0 10px; font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; }
.wyslane[hidden], form[hidden] { display: none; }
.wyslane a.etykieta { display: inline-block; margin-top: 18px; text-decoration: none; }
.wyslane a.etykieta:hover { color: var(--fg); }

/* stopka: dane firmy i dokumenty */
footer { margin: 96px var(--pad) 0; padding: 22px 0 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 40px; max-width: 920px;
         font-size: 10px; letter-spacing: 0.22em; line-height: 1.9; color: var(--dim); text-transform: uppercase; }
footer a { text-decoration: none; white-space: nowrap; }
footer a:hover { color: var(--fg); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
main.formularz + footer { border-top: 0; margin-top: 72px; }

@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  :root { --pad: 24px; }
  header { padding: 26px 0; }
  header .logo { height: 17px; }
  .back { top: 26px; left: 24px; line-height: 17px; font-size: 9px; }
  main { padding-top: 112px; }
  h1 { font-size: clamp(26px, 8.2vw, 40px); }
  .etykieta { font-size: 9px; }
  form, .wyslane { margin-top: 40px; }
  .pole { margin-bottom: 26px; }
  .pole input, .pole textarea { font-size: 17px; } /* 16 px i więcej: iOS nie przybliża strony po wejściu w pole */
  .wyslij { width: 100%; justify-content: center; }
  footer { margin-top: 64px; padding-bottom: 32px; font-size: 9px; }
}