/* TEJAT — Sub-Page Stylesheet
   page-head · crumbs · cta-strip · section padding
   Used on dlaczego.html, warunki.html, proces.html. */

section{padding:var(--space-10) var(--space-7);position:relative}

/* ---------------- PAGE HEAD ---------------- */
.page-head{
  padding:var(--space-11) var(--space-7) var(--space-8);
  background:var(--bg-2);
  border-bottom:1px solid var(--line);
}
.page-head .container{max-width:var(--max);margin:0 auto}
.page-head .crumbs{
  font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--fg-mute);
  margin-bottom:28px;
}
.page-head .crumbs a{color:var(--fg-mute);transition:color .25s var(--ease)}
.page-head .crumbs a:hover{color:var(--accent)}
.page-head h1{
  font-size:clamp(40px,6vw,84px);
  max-width:18ch;
  margin-bottom:24px;
}
.page-head p{
  color:var(--fg-dim);
  max-width:54ch;
  font-size:16px;
  line-height:1.7;
}

/* ---------------- CTA STRIP ---------------- */
.cta-strip{
  background:var(--bg-3);
  padding:var(--space-9) var(--space-7);
  border-top:1px solid var(--line);
}
.cta-strip .wrap{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:32px;
}
.cta-strip h2{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(28px,3.4vw,44px);
  letter-spacing:-0.02em;
  max-width:22ch;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:960px){
  section{padding:var(--space-8) var(--space-5)}
  .page-head{padding:var(--space-10) var(--space-5) var(--space-7)}
  .cta-strip{padding:var(--space-8) var(--space-5)}
  .cta-strip .wrap{flex-direction:column;align-items:flex-start}
}