:root{--brand:#0d3b66;--brand-2:#ffd166;--accent:#06d6a0;--text:#1f2937;--muted:#6b7280;--bg:#ffffff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial;line-height:1.6;color:var(--text);background:var(--bg)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}

header{border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{font-weight:800;font-size:1.1rem;color:var(--brand)}
nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
nav a{padding:.45rem .7rem;border-radius:.5rem}
nav a.active, nav a:hover{background:#f3f4f6;text-decoration:none}
.mobile-toggle{display:none;background:none;border:0;font-size:1.25rem}
@media (max-width:800px){
  nav ul{display:none;position:absolute;right:1rem;top:64px;background:white;border:1px solid #e5e7eb;border-radius:.75rem;flex-direction:column;padding:.75rem;min-width:240px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
  nav ul.open{display:flex}
  .mobile-toggle{display:block}
}

/* Hero */
.hero{padding:3rem 0 2rem}
.hero-banner{
  /* FIXED: relative path from assets/css/ -> assets/img/ */
  background-image:url('../img/hero_banner.jpg');
  background-size:cover;
  background-position:center;
  color:white;
  position:relative;
  padding:5rem 0;
}
.hero-banner .overlay{background:rgba(0,0,0,.45);padding:3rem 0}
.hero-banner h1,.hero-banner p,.hero-banner .kicker{color:#fff}

/* Buttons */
.btn{display:inline-block;padding:.7rem 1rem;border-radius:.7rem;font-weight:700}
.btn-primary{background:var(--brand);color:white}
.btn-secondary{background:var(--brand-2);color:#111827}

/* Grid + Cards */
.grid{display:grid;gap:1.25rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:950px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:650px){.grid-3,.grid-2{grid-template-columns:1fr}}

.card{
  border:1px solid #e5e7eb;border-radius:1rem;padding:1rem;background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.03);
  display:flex;flex-direction:column;
}
.grid .card{height:100%}
.card h3{margin:.2rem 0 .4rem}

/* Type & helpers */
.kicker{letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--muted);font-weight:700}
.footer{border-top:1px solid #e5e7eb;background:#fafafa;margin-top:2rem;padding:2rem 0}
.footer .cols{display:grid;gap:1.25rem;grid-template-columns:1.2fr 1fr 1fr}
@media (max-width:800px){.footer .cols{grid-template-columns:1fr}}
.badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.badge{border:1px solid #e5e7eb;border-radius:.6rem;padding:.25rem .5rem;font-size:.78rem;background:white}
.lead{font-size:1.1rem;color:#374151}
ul.check{list-style:none;padding-left:0}
ul.check li{padding-left:1.5rem;position:relative;margin:.35rem 0}
ul.check li:before{content:"✓";position:absolute;left:.25rem;color:var(--accent);font-weight:900}
img.responsive{max-width:100%;height:auto;border-radius:.75rem;border:1px solid #e5e7eb}
.small{font-size:.9rem;color:#6b7280}

/* ===================================================== */
/* ===============  CONTACT FORM POLISH  =============== */
/* ===================================================== */

/* Make the two columns on /contact stretch evenly */
.contact .grid-2{align-items:stretch}

/* Form layout */
form{display:flex;flex-direction:column;gap:1rem;width:100%}
.form-row{display:flex;flex-direction:column}

/* Labels */
.form-row label{
  font-weight:600;margin-bottom:.25rem;color:#0d3b66;
}

/* Inputs, selects, textareas */
.form-row input,
.form-row select,
.form-row textarea{
  width:100%;
  padding:.6rem .75rem;
  border:1px solid #d1d5db;
  border-radius:8px;
  font-size:1rem;
  background:#fff;
  transition:border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

/* Focus states */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  border-color:#0d3b66;
  outline:none;
  box-shadow:0 0 0 3px rgba(13,59,102,.15);
}

/* Submit button alignment */
button[type="submit"], .btn.btn-primary{
  align-self:flex-start;
  background-color:#0d3b66;
  color:#fff;
  padding:.65rem 1.1rem;
  border:none;border-radius:8px;
  font-size:1rem;cursor:pointer;
  transition:background-color .2s ease-in-out, transform .02s ease-in-out;
}
button[type="submit"]:hover, .btn.btn-primary:hover{background-color:#14508c}
button[type="submit"]:active{transform:translateY(1px)}

/* Optional reCAPTCHA spacing if enabled */
[data-netlify-recaptcha]{margin-top:.25rem}

/* Keep the form from getting too wide on desktop */
@media (min-width:768px){
  .contact form{max-width:620px}
}

/* Tidy select arrow rendering (optional) */
.form-row select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#6b7280 50%),
                   linear-gradient(135deg,#6b7280 50%,transparent 50%),
                   linear-gradient(to right,#d1d5db,#d1d5db);
  background-position:calc(100% - 18px) calc(50% - 3px),
                       calc(100% - 12px) calc(50% - 3px),
                       calc(100% - 2.25rem) 50%;
  background-size:6px 6px,6px 6px,1px 1.75rem;
  background-repeat:no-repeat;
  padding-right:2.5rem; /* room for arrow */
}

/* Balance spacing inside the Contact info card */
.contact .card h2 + p{margin-top:.25rem}
.contact .card h3{margin-top:1rem}

/* Small screens: add breathing room */
@media (max-width:650px){
  .contact .card{padding:1.1rem}
}