@font-face{font-family:'Jost';font-style:normal;font-display:swap;font-weight:300;src:url(fonts/jost-latin-ext-300-normal.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:'Jost';font-style:normal;font-display:swap;font-weight:300;src:url(fonts/jost-latin-300-normal.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:'Jost';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jost-latin-ext-400-normal.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:'Jost';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jost-latin-400-normal.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}

:root{
  --ground:#ECE9E2;
  --travertine:#DDD4C5;
  --oak:#94704A;
  --oak-deep:#86643F;
  --green:#2F4A3E;
  --ink:#1E1F1D;
  --paper:#F0EEE7;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:300;font-size:1.0625rem;line-height:1.6}
a{color:inherit}
:focus-visible{outline:2px solid var(--oak);outline-offset:4px}

.top,.tagline,.status,dt,label,button,.scroll,.foot{text-transform:uppercase;letter-spacing:.32em;font-size:.75rem;font-weight:400}

/* top bar */
.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1.5rem clamp(1.25rem,5vw,3.5rem)}
.top-link{text-decoration:none;padding:.75rem 0;border-bottom:1px solid transparent}
.top-link:hover{border-bottom-color:var(--ink)}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6.5rem 1.5rem 4rem}
.logo-wrap{margin:0;width:min(27rem,78vw)}
.logo{display:block;width:100%;height:auto;color:var(--ink);overflow:visible}
.logo-dot{fill:var(--oak)}
.tagline{margin:1.75rem 0 0;letter-spacing:.42em;padding-left:.42em;white-space:nowrap}
@media (max-width:25rem){.status::before,.status::after{width:1.5rem}.tagline{letter-spacing:.26em;padding-left:.26em;font-size:.6875rem}}
.status{white-space:nowrap;margin:4rem 0 0;display:flex;align-items:center;gap:1.1rem;padding-left:.32em}
.status::before,.status::after{content:"";width:2.5rem;height:1px;background:var(--oak)}
.lead{margin:1.25rem 0 0;max-width:24rem;font-size:1.1875rem;line-height:1.55;text-wrap:balance}
.lead-cta{display:block;margin-top:.5rem}
.scroll{margin-top:2.25rem;display:inline-flex;gap:.6rem;align-items:center;text-decoration:none;padding:1.1rem 2rem;background:var(--green);color:var(--paper);transition:background .25s}
.scroll:hover{background:var(--ink)}

/* contact: zielony panel z danymi, trawertynowy z formularzem */
.contact-inner{display:grid}
.panel{padding:clamp(3.5rem,9vw,6.5rem) clamp(1.25rem,6vw,5rem)}
.contact-info{background:var(--green);color:var(--paper)}
#napisz{scroll-margin-top:0}
.contact-form{background:var(--travertine);color:var(--ink)}
h2{margin:0;font-weight:300;font-size:clamp(2.25rem,6vw,3.25rem);line-height:1.1;letter-spacing:.01em}
.who{margin:1.25rem 0 0;font-size:1.125rem}
dl{margin:2.5rem 0 0;display:grid;gap:1.5rem}
dt{color:var(--travertine);font-size:.6875rem}
dd{margin:.3rem 0 0;font-size:1.375rem}
dd a{text-decoration:none;border-bottom:1px solid rgba(240,238,231,.35);padding:.2rem 0;display:inline-block}
dd a:hover{border-bottom-color:var(--paper)}
.contact-info :focus-visible{outline-color:var(--paper)}

.form{display:grid;gap:1.75rem;align-content:start;margin-top:2.5rem;max-width:34rem}
.field{display:grid;gap:.4rem}
label{font-size:.6875rem}
input,textarea{font:inherit;font-size:1.0625rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:.6rem 0;width:100%;min-height:2.75rem}
textarea{resize:vertical;line-height:1.5}
input:focus,textarea:focus{outline:0;border-bottom-color:var(--green);box-shadow:0 2px 0 var(--green)}
.field.invalid input,.field.invalid textarea{border-bottom-color:#9A2F16;box-shadow:0 1px 0 #9A2F16}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
button{font-family:inherit;cursor:pointer;justify-self:start;background:var(--oak-deep);color:#fff;border:0;padding:1.1rem 2rem;min-height:3rem;transition:background .25s}
button:hover{background:var(--ink)}
button:focus-visible{outline-color:var(--ink)}
button[disabled]{opacity:.6;cursor:default}
.form-status{margin:0;font-size:1rem}
.form-status:empty{display:none}
.note{margin:0;font-size:.8125rem;line-height:1.5}

.foot{background:var(--ink);color:var(--travertine);display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;padding:1.75rem clamp(1.25rem,5vw,3.5rem);font-size:.6875rem}

@media (min-width:52rem){
  .contact-inner{grid-template-columns:5fr 7fr}
}

/* logo rysuje się przy wejściu — także na telefonach */
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.6,0,.2,1) forwards}
.d1{animation-delay:.15s}.d2{animation-delay:.35s}.d3{animation-delay:.55s}.d4{animation-delay:.7s}.d5{animation-delay:.9s}
.logo-dot{opacity:0;animation:fade .5s 1.7s forwards}
.tagline,.status,.lead,.scroll{opacity:0;animation:fade .8s forwards}
.tagline{animation-delay:1.5s}.status{animation-delay:1.9s}.lead{animation-delay:2.1s}.scroll{animation-delay:2.3s}
/* przy włączonym „ograniczaniu animacji” w systemie: ta sama animacja, ale szybsza */
@media (prefers-reduced-motion:reduce){
  .draw{animation-duration:.6s}
  .d1,.d2,.d3,.d4,.d5{animation-delay:0s}
  .logo-dot,.tagline,.status,.lead,.scroll{animation-duration:.4s;animation-delay:.5s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}