:root{
    /* --- oficjalna paleta marki (Kolory_opis.jpg) --- */
    --bg:#f5f1ef;          /* Kolor strony */
    --el-beige:#ece5df;    /* Elementy 1 */
    --el-sage:#d6d9d2;     /* Elementy 2 */
    --cta:#6f7d6f;         /* CTA, krycie 100% */
    --cta-hover:rgba(218,181,126,0.7); /* CTA hover #DAB57E, krycie 70% */
    --heading:#4f2e29;     /* Tekst Nagłówki (Playfair Display) */
    --hero-heading:#2c2825;/* Napis Baner „Rekrutuję ludzi,” — wyjątek */
    --text:#000000;        /* Tekst black */
    --text-soft:rgba(0,0,0,0.66);
    --white:#ffffff;
    --line: rgba(0,0,0,0.13);
    --shadow: 0 20px 45px -25px rgba(0,0,0,0.35);
    --maxw: 1520px;
    --header-h: 96px;
    --radius: 6px;
    /* tła baneru — próbkowane z plików, żeby styk tekst/zdjęcie na mobile był niewidoczny */
    --hero-mobile-bg:#e3d8d2;  /* tło = kolor tła baneru mobilnego */
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  }

  body{
    margin:0;
    font-family:'Montserrat', 'Segoe UI', sans-serif;
    color:var(--text);
    background:var(--bg);
    font-weight:300;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

  img{ max-width:100%; display:block; }

  /* ---------- Kursor tekstowy ----------
     Wymuszamy standardowy kursor zaznaczania nad treścią (nad przyciskami
     i linkami nadal obowiązuje cursor:pointer z ich własnych reguł). */
  p, li, h1, h2, h3, h4, dt, dd, span, td, th, blockquote, label{ cursor:text; }
  a, a *, button, button *, .btn, .btn *, summary{ cursor:pointer; }

  /* ---------- Ochrona obrazów ----------
     Blokuje przeciąganie i zapisywanie obrazów przez menu kontekstowe.
     Uwaga: to utrudnienie, nie pełne zabezpieczenie — pliki pozostają
     dostępne pod swoimi adresami URL. */
  img{
    -webkit-user-drag:none;
    user-select:none;
    -webkit-user-select:none;
    pointer-events:none;
  }

  h1,h2,h3,h4{
    font-family:'Playfair Display', serif;
    color:var(--heading);
    margin:0 0 0.5em;
    font-weight:500;
    line-height:1.15;
  }

  p{ margin:0 0 1em; }
  a{ color:inherit; }

  /* ---------- Typografia PL: dzielenie wyrazów + zawijanie ----------
     lang="pl" na <html> uruchamia polskie wzorce przenoszenia wyrazów.
     JS na dole strony dokleja twardą spację po sierotach (i, z, w, do, po…). */
  p, li, dd, blockquote{
    -webkit-hyphens:auto;
    hyphens:auto;
    -webkit-hyphenate-limit-before:3;
    -webkit-hyphenate-limit-after:3;
    hyphenate-limit-chars:7 3 3;
    text-wrap:pretty;          /* nowoczesne przeglądarki: brak sierot na końcu akapitu */
    overflow-wrap:break-word;
  }
  h1, h2, h3, h4, .btn, .quote p, .job-tag, .contact-info dt, nav.menu a{
    -webkit-hyphens:manual;
    hyphens:manual;
    text-wrap:balance;         /* nagłówki: równe długości wierszy, bez dzielenia */
  }

  .wrap{
    width:100%;
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 16px;
  }
  @media (min-width:981px){
    .wrap{ padding:0 50px; }
  }

  /* ---------- Buttons ---------- */
  .btn{
    font-family:'Montserrat', sans-serif;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.6em;
    border-radius:999px;
    padding:0.95em 2em;
    font-size:0.95rem;
    font-weight:500;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow .25s ease;
  }
  .btn-primary{
    background:var(--cta);
    color:var(--white);
  }
  .btn-primary:hover{ background:var(--cta-hover); color:var(--hero-heading); transform:translateY(-2px); box-shadow:var(--shadow); }
  .btn-primary:focus-visible{ outline:3px solid var(--heading); outline-offset:3px; }

  .btn-ghost{
    background:transparent;
    color:var(--heading);
    border-color:var(--heading);
  }
  .btn-ghost:hover{ background:var(--heading); color:var(--white); transform:translateY(-2px); }
  .btn-ghost:focus-visible{ outline:3px solid var(--heading); outline-offset:3px; }

  /* ---------- Image placeholders (mockup stand-ins) ---------- */
  .img-ph{
    position:relative;
    width:100%;
    aspect-ratio: var(--ratio, 4/5);
    border-radius:var(--radius);
    overflow:hidden;
    border:1px solid var(--line);
  }
  .img-ph img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  section[id]{ scroll-margin-top: var(--header-h); }
  /* „Model współpracy”, „Aktualne projekty” i „O mnie” mają górny padding
     (clamp(3rem,8vw,6rem)), więc kotwica lądowała na pustym paddingu, a zdjęcie
     i tytuł startowały o tyle niżej niż w „Ofercie” (która paddingu nie ma).
     Odejmujemy padding od offsetu — kotwica trafia w GÓRĘ ZDJĘCIA sekcji,
     dokładnie tak jak w „Ofercie”. */
  section.process, section.projects, section.about{
    scroll-margin-top: calc(var(--header-h) - clamp(3rem,8vw,6rem));
  }

  /* ---------- Header ---------- */
  header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(245,241,239,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:1.1em;
    padding-bottom:1.1em;
  }
  .logo{
    display:inline-flex;
    line-height:0;
  }
  .logo img{
    height:30px;
    width:auto;
    display:block;
  }

  nav.menu{ display:flex; gap:2.2em; align-items:center; }
  nav.menu a{
    font-family:'Montserrat', sans-serif;
    text-decoration:none;
    color:var(--text);
    font-size:0.95rem;
    font-weight:400;
    position:relative;
    padding:0.2em 0;
  }
  nav.menu a::after{
    content:"";
    position:absolute; left:0; bottom:-2px;
    width:0; height:1px; background:var(--heading);
    transition:width .25s ease;
  }
  nav.menu a:hover::after, nav.menu a:focus-visible::after{ width:100%; }
  nav.menu a:focus-visible{ outline:2px solid var(--heading); outline-offset:4px; }

  /* ---------- Hero ---------- */
  .hero{
    background:var(--el-beige);
  }
  .hero-media{ width:100%; overflow:hidden; }
  .hero-media picture{ display:block; }
  .hero-media img{ width:100%; height:auto; display:block; }
  .hero-text-wrap{ padding:clamp(2rem,6vw,3rem) 0; }
  .hero-text{ max-width:900px; }
  .hero h1{
    font-size:clamp(3.76rem, 7.51vw, 5.88rem);
    font-style:italic;
    font-weight:400;
    color:var(--heading);
  }
  .hero h1 .h1-exception{ color:var(--hero-heading); }
  .hero .lede{
    font-size:0.95rem;
    color:var(--text-soft);
    max-width:32em;
    margin-top:1.6em;
  }
  @media (min-width:981px){
    /* lede zawsze w jednej linii — max-width:32em (≈486px) był węższy
       niż tekst złożony Montserratem; kolumna ma ~880px, więc jest zapas */
    .hero .lede{
      max-width:none;
      white-space:nowrap;
      text-wrap:nowrap;
    }
  }
  .hero .cta-row{ margin-top:1.6em; }

  @media (min-width:981px){
    .hero{ position:relative; }
    .hero-text-wrap{
      position:absolute; inset:0; display:flex; align-items:center; padding:0;
    }
  }

  /* ---------- Quote ---------- */
  .quote{
    background:var(--bg);
    padding:clamp(3rem,7vw,5.5rem) 0;
    text-align:center;
  }
  .quote p{
    font-family:'Montserrat', sans-serif;   /* wg poprawki: pierwsza linia Montserratem */
    font-weight:400;
    font-size:clamp(1.2rem, 2.4vw, 1.7rem);
    letter-spacing:0.005em;
    color:var(--text-soft);
    max-width:24em;
    margin:0 auto;
    line-height:1.45;
  }
  .quote p em{
    font-family:'Playfair Display', serif;  /* druga linia bez zmian */
    display:block; color:var(--heading); font-style:italic; font-weight:700;
    font-size:clamp(1.4rem, 3vw, 2.1rem);
    line-height:1.35;
    margin-top:0.35em;
  }

  /* ---------- Services ---------- */
  .services{ background:var(--bg); padding-bottom:clamp(3rem,8vw,6rem); }
  .services .grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:3vw;
    align-items:stretch;
  }
  .services .img-ph{ align-self:start; }
  .cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:1.4rem;
    height:100%;
  }
  .card{
    padding:2rem 1.9rem;
    border-radius:var(--radius);
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    text-align:left;
  }
  .card:nth-child(1){ background:var(--el-sage); }
  .card:nth-child(2){ background:var(--el-beige); }
  .card:nth-child(3){ background:var(--el-beige); }
  .card:nth-child(4){ background:var(--el-beige); }
  .card h3{
    font-family:'Montserrat', sans-serif;
    font-size:1.1rem;
    font-style:normal;
    font-weight:500;
    margin-bottom:0.7em;
  }
  .card p{
    font-size:0.88rem;
    color:var(--text-soft);
    /* tekst zawsze tuż pod tytułem — jednakowa odległość tytuł→opis
       we wszystkich kafelkach (wzorzec: „Headhunting & Direct Search”) */
    margin:0;
    text-align:left;
  }

  /* ---------- Process / Model współpracy ---------- */
  .process{ background:var(--el-sage); padding:clamp(3rem,8vw,6rem) 0; }
  .process .wrap{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:4vw;
    align-items:center;
  }
  .process h2{
    font-family:'Montserrat', sans-serif;   /* wg poprawki: „Transparentny proces.” Montserratem */
    font-size:clamp(1.5rem,2.8vw,2rem);
    font-weight:400;
    letter-spacing:0.005em;
    line-height:1.3;
  }
  .process h2 em{
    font-family:'Playfair Display', serif;  /* druga linia bez zmian */
    display:block; font-style:italic; font-weight:700; color:var(--heading);
    font-size:clamp(1.8rem,3.4vw,2.4rem);
    line-height:1.2;
    margin-top:0.15em;
  }
  .process-grid{
    margin-top:2.2rem;
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line);
  }
  .process-grid .pitem{
    padding:1.8rem 0;
    border-bottom:1px solid var(--line);
  }
  .process-grid .pitem:nth-child(odd){ border-right:1px solid var(--line); padding-right:1.8rem; }
  .process-grid .pitem:nth-child(even){ padding-left:1.8rem; }
  .pitem h3{ font-family:'Montserrat', sans-serif; font-size:1.05rem; font-style:normal; font-weight:500; margin-bottom:0.6em; }
  .pitem p{ font-size:0.87rem; color:var(--text-soft); margin:0; }
  .process .img-ph{ --ratio:3/4; }

  /* ---------- Projects ---------- */
  .projects{ background:var(--bg); padding:clamp(3rem,8vw,6rem) 0; }
  .projects .wrap{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:4vw;
    align-items:start;
  }
  .projects .img-ph{ --ratio:3/4; position:sticky; top:6.5rem; }
  .projects h2{ font-size:clamp(1.8rem,3.4vw,2.4rem); font-style:italic; font-weight:700; }
  .projects .intro{ font-size:0.92rem; color:var(--text-soft); max-width:38em; }
  .projects .intro strong{ color:var(--text); font-weight:600; }

  .projects-col{
    display:flex;
    flex-direction:column;
    min-width:0;
  }
  .projects-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:1.5rem;
    scroll-margin-top:calc(var(--header-h) + 1rem);
  }

  /* ---------- Kafelki ofert (strona główna) ---------- */
  .job-list{ list-style:none; margin:0; padding:0; }
  .job{ border-bottom:1px solid var(--line); }
  .job:first-of-type{ border-top:1px solid var(--line); margin-top:2.2rem; }

  .job-card{
    display:block;
    position:relative;
    padding:1.7rem 0 3.4rem;
    text-decoration:none;
    color:inherit;
    transition:padding-left .25s ease;
  }
  .job-card:hover{ padding-left:0.7rem; }
  .job-card:focus-visible{ outline:2px solid var(--heading); outline-offset:3px; }

  .job-tag{
    font-family:'Montserrat',sans-serif;
    font-size:0.72rem;
    letter-spacing:0.07em;
    color:var(--cta);
    text-transform:uppercase;
    margin-bottom:0.5em;
    display:block;
  }
  .job-title{
    font-family:'Montserrat', sans-serif;
    font-size:1.35rem;
    font-weight:400;
    color:var(--text);
    margin:0 0 0.35em;
  }
  .job-meta{ font-size:0.85rem; font-style:italic; color:var(--text-soft); margin:0; }

  /* CTA w prawym dolnym rogu kafelka, pogrubione */
  .job-cta{
    position:absolute;
    right:0;
    bottom:1.4rem;
    display:inline-flex;
    align-items:center;
    gap:0.55em;
    font-family:'Montserrat', sans-serif;
    font-size:0.88rem;
    font-weight:600;
    color:var(--heading);
    white-space:nowrap;
  }
  .job-cta-label{ display:inline-block; }
  .job-cta svg{
    width:16px; height:16px;
    flex:none;
    transition:transform .25s ease;
  }
  .job-card:hover .job-cta svg,
  .job-card:focus-visible .job-cta svg{ transform:translateX(5px); }
  .job-card:hover .job-cta{ text-decoration:underline; text-underline-offset:3px; }

  .projects-all{ align-self:flex-start; margin-top:2.6rem; }

  .job-detail{ padding-left:3rem; }
  .job-block + .job-block{ margin-top:2rem; }
  .job-block h4{
    font-family:'Montserrat', sans-serif;
    font-style:italic;
    font-weight:500;
    font-size:1.05rem;
    color:var(--heading);
    margin:0 0 1em;
  }
  .job-block p{ font-size:0.9rem; color:var(--text-soft); margin:0 0 1em; }
  .job-block p:last-child{ margin-bottom:0; }
  /* akapit tuż przed listą — lista jest jego kontynuacją, więc mniejszy odstęp */
  .job-block p + ul{ margin-top:0.2rem; }
  .job-block ul{ list-style:none; margin:0; padding:0; }
  .job-block li{
    position:relative;
    padding-left:1.2em;
    margin-bottom:0.9em;
    font-size:0.9rem;
    color:var(--text-soft);
  }
  .job-block li:last-child{ margin-bottom:0; }
  .job-block li::before{
    content:"•";
    position:absolute;
    left:0;
    color:var(--cta);
  }
  .job-apply{
    margin:2rem 0 0;
    font-size:0.85rem;
    color:var(--text-soft);
  }
  .job-apply a{ color:var(--heading); font-weight:500; text-decoration:underline; }

  /* ---------- Contact ---------- */
  .contact{ background:var(--el-beige); padding:clamp(3rem,8vw,6rem) 0; }
  .contact .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5vw;
    align-items:stretch;
  }
  .contact .intro-block{ display:flex; flex-direction:column; }
  .contact h2{ font-size:clamp(1.9rem,3.6vw,2.5rem); font-style:italic; font-weight:700; }
  .contact .intro-txt{ font-size:0.92rem; color:var(--text-soft); max-width:32em; }
  .contact .pledge{ font-weight:600; color:var(--text); margin-top:1.5em; }
  .contact-info{ margin-top:2rem; }
  .contact-info dt{
    font-family:'Montserrat',sans-serif;
    font-size:0.72rem;
    letter-spacing:0.07em;
    text-transform:uppercase;
    color:var(--cta);
    margin-top:1.1em;
  }
  .contact-info dd{
    margin:0.15em 0 0;
    font-weight:600;
    font-size:0.98rem;
  }
  .contact-info a{ text-decoration:none; }
  .contact-info a:hover{ text-decoration:underline; }

  form.msg{ display:flex; flex-direction:column; gap:1rem; height:100%; }
  form.msg .field:last-of-type{ flex:1; display:flex; }
  form.msg .field:last-of-type textarea{ flex:1; min-height:130px; }

  /* Desktop: formularz wyśrodkowany w pionie względem sekcji Kontakt
     (równe odstępy nad i pod formularzem) */
  @media (min-width:981px){
    .contact .wrap{ align-items:center; }
    form.msg{
      height:auto;
      align-self:center;
    }
    form.msg .field:last-of-type{ flex:none; }
    form.msg .field:last-of-type textarea{ flex:none; min-height:160px; }
  }
  form.msg .field{ display:flex; flex-direction:column; gap:0.4em; }
  form.msg label{
    font-family:'Montserrat',sans-serif;
    font-size:0.68rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--text-soft);
  }
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }
  .hp{ display:none; }
  .consent{
    font-family:'Montserrat', sans-serif;
    font-style:italic;
    font-weight:400;
    font-size:0.76rem;
    line-height:1.55;
    color:var(--text-soft);
    text-align:left;
    margin-top:1rem;
  }
  form.msg input, form.msg textarea{
    font-family:'Montserrat', sans-serif;
    font-size:0.95rem;
    padding:0.9em 1em;
    border:1px solid var(--text-soft);
    border-radius:var(--radius);
    background:var(--bg);
    color:var(--text);
    resize:vertical;
  }
  form.msg input:focus-visible, form.msg textarea:focus-visible{
    outline:2px solid var(--heading);
    outline-offset:2px;
  }
  form.msg textarea{ min-height:130px; }

  /* ---------- About ---------- */
  .about{ background:var(--bg); padding:clamp(3rem,8vw,6rem) 0; }
  .about .wrap{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;
    gap:4vw;
    align-items:start;
  }
  .about .img-ph{ --ratio:3/4; }
  .about h2{ font-size:clamp(1.9rem,3.6vw,2.5rem); font-style:italic; font-weight:700; }
  .about p{ font-size:0.92rem; color:var(--text-soft); text-align:justify; }

  /* ---------- Footer ---------- */
  footer{
    background:var(--cta);
    color:var(--white);
    padding:1.8rem 0;
  }
  footer .wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:0.6rem;
    font-size:0.82rem;
  }
  footer a{ color:var(--white); text-decoration:none; }
  footer a:hover{ text-decoration:underline; }
  footer .wrap{ align-items:flex-start; }
  footer .fcompany{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
    line-height:1.5;
  }
  footer .fright{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:0.25rem;
    line-height:1.5;
    opacity:0.92;
  }

  /* ---------- Klauzula RODO w ofercie (kursywa light) ---------- */
  .job-apply-note{
    font-size:0.85rem;
    color:var(--text-soft);
    margin-top:0.5rem;
  }
  .job-clause{
    margin-top:2rem;
    padding-top:1.4rem;
    border-top:1px solid var(--line);
  }
  .job-clause p{
    font-family:'Montserrat', sans-serif;
    font-style:italic;
    font-weight:300;
    font-size:0.82rem;
    line-height:1.6;
    color:var(--text-soft);
    margin:0 0 0.9em;
  }
  .job-clause p:last-child{ margin-bottom:0; }
  /* linia oddzielająca informację o wpisie do KRAZ — taka sama jak nad klauzulą */
  .job-clause .job-agency{
    margin-top:1.4rem;
    padding-top:1.4rem;
    border-top:1px solid var(--line);
  }

  /* ---------- Modal / popup ---------- */
  .modal[hidden]{ display:none; }
  .modal{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(1rem,4vw,2.5rem);
  }
  .modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(44,40,37,0.55);
    backdrop-filter:blur(2px);
  }
  .modal-box{
    position:relative;
    z-index:1;
    width:min(760px, 100%);
    max-height:min(86vh, 900px);
    display:flex;
    flex-direction:column;
    background:var(--bg);
    border-radius:var(--radius);
    box-shadow:0 24px 60px rgba(0,0,0,0.28);
    padding:clamp(1.6rem,4vw,2.8rem);
    animation:modalIn .22s ease-out;
  }
  @keyframes modalIn{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:none; }
  }
  .modal-x{
    position:absolute;
    top:0.9rem; right:0.9rem;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; cursor:pointer;
    font-size:1.6rem; line-height:1;
    color:var(--text-soft);
    border-radius:50%;
    transition:background .2s ease, color .2s ease;
  }
  .modal-x:hover{ background:var(--el-beige); color:var(--heading); }
  .modal-x:focus-visible{ outline:2px solid var(--heading); outline-offset:2px; }
  .modal-title{
    font-size:clamp(1.35rem,2.6vw,1.8rem);
    font-style:italic;
    font-weight:700;
    margin:0 2.6rem 1.2rem 0;
  }
  .modal-body{
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:0.4rem;
  }
  .modal-body p{
    font-size:0.9rem;
    color:var(--text-soft);
    margin:0 0 1em;
  }
  .modal-body p:last-child{ margin-bottom:0; }
  .modal-body a{ color:var(--heading); font-weight:500; text-decoration:underline; }
  .modal-body h3{
    font-family:'Montserrat', sans-serif;
    font-size:0.95rem;
    font-weight:600;
    color:var(--heading);
    margin:1.9rem 0 0.7rem;
    line-height:1.4;
  }
  .modal-body > h3:first-child{ margin-top:0; }
  .modal-body h4{
    font-family:'Montserrat', sans-serif;
    font-size:0.88rem;
    font-weight:600;
    color:var(--text);
    margin:1.3rem 0 0.5rem;
  }
  .modal-body ul{ list-style:none; margin:0 0 1em; padding:0; }
  .modal-body li{
    position:relative;
    padding-left:1.1rem;
    font-size:0.9rem;
    color:var(--text-soft);
    margin-bottom:0.45em;
  }
  .modal-body li::before{
    content:"";
    position:absolute;
    left:0; top:0.62em;
    width:4px; height:4px;
    border-radius:50%;
    background:var(--cta);
  }
  .modal-body .lead{
    font-size:0.82rem;
    font-style:italic;
    color:var(--text-soft);
    margin-bottom:1.6rem;
    padding-bottom:1rem;
    border-bottom:1px solid var(--line);
  }
  .modal-body .highlight{
    background:var(--el-beige);
    border-radius:var(--radius);
    padding:1rem 1.2rem;
    margin-bottom:1.2rem;
  }
  .modal-body .highlight p:last-child{ margin-bottom:0; }
  .modal-table{
    width:100%;
    border-collapse:collapse;
    margin:0 0 1.2rem;
    font-size:0.84rem;
  }
  .modal-table th{
    text-align:left;
    font-family:'Montserrat', sans-serif;
    font-weight:600;
    color:var(--heading);
    padding:0.6em 0.8em;
    border-bottom:1px solid var(--line);
    vertical-align:top;
  }
  .modal-table td{
    padding:0.7em 0.8em;
    border-bottom:1px solid var(--line);
    color:var(--text-soft);
    vertical-align:top;
  }
  .modal-table tr:last-child td{ border-bottom:none; }
  @media (max-width:640px){
    /* tabele składają się w bloki — bez poziomego przewijania */
    .modal-table, .modal-table tbody, .modal-table tr, .modal-table td{ display:block; width:100%; }
    .modal-table thead{ display:none; }
    .modal-table tr{
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:0.6rem 0.8rem;
      margin-bottom:0.8rem;
    }
    .modal-table td{ border:none; padding:0.35em 0; }
    .modal-table td::before{
      content:attr(data-label);
      display:block;
      font-family:'Montserrat', sans-serif;
      font-weight:600;
      font-size:0.72rem;
      text-transform:uppercase;
      letter-spacing:0.06em;
      color:var(--heading);
      margin-bottom:0.2em;
    }
  }
  .modal-foot{
    display:flex;
    justify-content:center;      /* CTA wyśrodkowane do szerokości okna */
    padding-top:1.6rem;
    margin-top:1.2rem;
    border-top:1px solid var(--line);
  }
  body.modal-open{ overflow:hidden; }

  /* link-guzik w stopce i w klauzuli formularza */
  .link-btn{
    background:none;
    border:none;
    padding:0;
    font:inherit;
    color:inherit;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .link-btn:hover{ opacity:0.85; }
  .link-btn:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
  footer .link-btn{ text-decoration:none; }
  footer .link-btn:hover{ text-decoration:underline; }

  .skip-link{
    position:absolute; left:-999px; top:auto;
    background:var(--text); color:var(--white);
    padding:0.8em 1.2em; border-radius:0 0 6px 0; z-index:100;
  }
  .skip-link:focus{ left:0; top:0; }

  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(10px); }
    to{ opacity:1; transform:none; }
  }

  /* =========================================================
     RESPONSIVE — wszystko poniżej 981px (desktop nietknięty)
     ========================================================= */
  @media (max-width:980px){

    /* --- Header: BRAK paska górnego. Samo logo, statyczne (scrolluje się
           razem ze stroną). Desktop ≥981px pozostaje bez zmian. --- */
    header{
      position:static;                 /* nie „jedzie” w dół przy scrollu */
      background:var(--hero-mobile-bg);/* ciągłość z banerem, jak w makiecie */
      backdrop-filter:none;
      border-bottom:none;
    }
    .nav{ position:relative; justify-content:center; padding-top:1.5rem; padding-bottom:1.1rem; }
    .logo{ margin:0 auto; }
    .logo img{ height:34px; }
    nav.menu{ display:none; }          /* menu tylko na desktopie */
    section[id]{ scroll-margin-top:0; }

    /* --- Hero: tekst + CTA nad zdjęciem (kolejność w HTML bez zmian) --- */
    .hero{
      display:flex;
      flex-direction:column-reverse;     /* .hero-text-wrap renderuje się nad .hero-media */
      background:var(--hero-mobile-bg);  /* kolor tła = kolor tła baneru mobilnego */
    }
    /* baner mobilny (1201×2473) — kadr 5/6 od dołu, żeby postać była w całości */
    .hero-media img{
      aspect-ratio:5/6;
      height:auto;
      object-fit:cover;
      object-position:center bottom;
    }
    .hero-text-wrap{ padding:2rem 0 2.6rem; }
    .hero-text{ max-width:none; text-align:center; }
    /* tytuł wypełnia obszar nad zdjęciem — rozmiar dobrany tak, żeby najdłuższy
       wiersz („Rekrutuję ludzi,”) zawsze mieścił się w jednej linii (4 wiersze) */
    .hero h1{ font-size:clamp(2.2rem, 11.5vw, 3.5rem); line-height:1.12; }
    .hero .cta-row{ margin-top:1.8rem; }
    .hero .lede{ display:none; }          /* na mobile bez lede (wg makiety) */
    .h1-dot{ display:none; }              /* na mobile bez kropki na końcu tytułu */

    /* --- Sekcje jednokolumnowe --- */
    .services .grid, .process .wrap, .projects .wrap, .about .wrap{
      grid-template-columns:1fr;
    }

    /* Oferta: karty nad zdjęciem (zgodnie z makietą).
       Każdy kafelek ma wysokość własnej treści — desktopowe wiersze 1fr 1fr
       rozciągały „Doradztwo personalne” do wysokości najdłuższego kafelka. */
    .services .cards{
      order:1;
      grid-template-columns:1fr;
      grid-template-rows:none;
      grid-auto-rows:auto;
      height:auto;
    }
    .services .card{ height:auto; }
    .services .img-ph{ order:2; }

    /* Model współpracy — wg makiety bez zdjęcia (Foto_2) */
    .process h2{ text-align:center; }
    .process .img-ph{ display:none; }
    .process-grid{ grid-template-columns:1fr; }
    .process-grid .pitem:nth-child(odd){ border-right:none; padding-right:0; }
    .process-grid .pitem:nth-child(even){ padding-left:0; }

    /* Aktualne projekty */
    .projects .img-ph{ position:static; --ratio:4/3; }
    .projects-col{ align-self:auto; margin-top:2.5rem; }
    .projects-head{ display:block; text-align:center; }
    .projects .intro{ text-align:center; margin-left:auto; margin-right:auto; }
    /* kafelek: treść po lewej, okrągłe CTA po prawej (wyśrodkowane w pionie) */
    .job-card{ padding:1.6rem 4.9rem 1.6rem 0; text-align:left; }
    .job-card:hover{ padding-left:0; }

    .job-cta{
      top:50%;
      bottom:auto;
      right:0;
      transform:translateY(-50%);
      width:56px;                      /* średnica = wysokość przycisku „Zobacz wszystkie projekty” */
      height:56px;
      border-radius:50%;
      border:1px solid var(--heading); /* obrys identyczny jak w .btn-ghost */
      justify-content:center;
      gap:0;
      transition:background .25s ease, color .25s ease;
    }
    .job-cta-label{                     /* etykieta tylko dla czytników ekranu */
      position:absolute;
      width:1px; height:1px;
      margin:-1px; padding:0;
      overflow:hidden;
      clip:rect(0 0 0 0);
      clip-path:inset(50%);
      white-space:nowrap;
    }
    .job-cta svg{ width:20px; height:20px; }
    .job-card:active .job-cta{ background:var(--heading); color:var(--white); }
    .job-card:hover .job-cta{ text-decoration:none; }
    .job-card:hover .job-cta svg{ transform:none; }

    .projects-all{ align-self:center; margin-top:2.2rem; }
    .job-detail{ padding-left:0; }
    /* mobile: cała treść pod ogłoszeniem w jednym rozmiarze — takim samym
       jak opis nad nią (0.9rem); kursywa light w klauzuli zostaje */
    .job-apply,
    .job-apply-note,
    .job-clause p{ font-size:0.9rem; }

    /* Kontakt: tekst → formularz → dane kontaktowe (kolejność z makiety) */
    .contact .wrap{ display:flex; flex-direction:column; gap:0; text-align:center; }
    .contact .intro-block{ display:contents; }
    .contact h2{ order:1; }
    .contact .intro-txt{ order:2; margin-left:auto; margin-right:auto; }
    .contact .pledge{ order:3; }
    form.msg{ order:4; margin-top:1.8rem; height:auto; text-align:left; }
    /* przycisk był w <div>, więc align-self na .btn nie działał — centrujemy wrapper */
    .form-actions{ display:flex; flex-direction:column; align-items:center; }
    .consent{ text-align:center; }
    .contact-info{ order:5; margin-top:2.4rem; }
    .contact-info dd{ margin-bottom:0.4em; }

    /* O mnie */
    .about p{ text-align:left; }

    /* Stopka: wyśrodkowana, link „Polityka prywatności” na górze */
    /* stopka mobile: wszystko jedno pod drugim, wyśrodkowane */
    footer .wrap{ flex-direction:column; align-items:center; text-align:center; gap:0.9rem; }
    footer .fcompany{ align-items:center; gap:0.2rem; }
    footer .fright{ align-items:center; gap:0.55rem; }
    footer .fcopy{ display:none; }   /* wg poprawki: bez linii © na mobile */
  }

  @media (max-width:640px){
    /* =====================================================================
       TELEFON — hero jako jedna warstwa: pełny baner (bez kadrowania),
       a na nim logo, tytuł (nad głową modelki) i CTA (w dolnej części zdjęcia).
       Wszystkie odstępy w vw, więc skalują się identycznie jak wysokość
       baneru (obraz 1201×2473 → wysokość = 2,059 × szerokość ekranu).
       ===================================================================== */

    /* logo leży NA banerze — nagłówek wychodzi z flow */
    header{
      position:absolute;
      top:0; left:0; right:0;
      z-index:20;
      background:transparent;
    }
    .nav{ padding-top:2.5rem; padding-bottom:0; }
    .logo img{ height:42px; }          /* było 34px — delikatnie większe i niżej */

    .hero{
      display:block;                   /* koniec z column-reverse */
      position:relative;
    }
    .hero-media img{
      aspect-ratio:1201/2473;          /* naturalne proporcje — baner w całości */
      object-position:center top;
    }

    .hero-text-wrap{
      position:absolute;
      inset:0;
      z-index:2;
      padding:0;
    }
    .hero-text-wrap > .wrap{ height:100%; }
    .hero-text{
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;   /* tytuł u góry, CTA na dole */
      padding:31vw 0 29vw;             /* tytuł startuje nad głową, CTA w dolnej części zdjęcia */
    }
    .hero h1{ margin:0; }
    .hero .cta-row{ margin-top:0; }
  }

  @media (max-width:400px){
    /* najwęższe ekrany — tytuł nie może „wyjść” poza 4 wiersze */
    .hero h1{ font-size:11vw; }
  }

/* =====================================================================
   PODSTRONA „AKTUALNE PROJEKTY” (aktualne-projekty.html)
   Reguły działają tylko wtedy, gdy <body> ma klasę .page-projects,
   więc strona główna pozostaje nietknięta.
   ===================================================================== */

  .page-projects main{ padding-top:clamp(2rem,4vw,3rem); }

  .pl-hero{ padding-bottom:clamp(1.2rem,2vw,1.8rem); }
  .pl-hero h1{
    font-size:clamp(2rem,4vw,2.9rem);
    font-style:italic;
    font-weight:700;
    margin:0 0 0.4em;
  }
  /* --- układ dwukolumnowy 1/3 + 2/3 --- */
  .pl-layout{
    display:grid;
    grid-template-columns:minmax(260px, 1fr) 2fr;
    gap:clamp(2rem,4vw,4rem);
    align-items:start;
    padding-bottom:clamp(3.5rem,7vw,6rem);
  }

  /* --- lewa kolumna: lista --- */
  .pl-list{
    position:sticky;
    top:calc(var(--header-h) + 1.5rem);
    min-width:0;
  }
  .pl-list h2{
    font-family:'Montserrat', sans-serif;
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-soft);
    margin:0 0 1rem;
  }
  .pl-list ul{ list-style:none; margin:0; padding:0; }
  .pl-list li{ border-top:1px solid var(--line); }
  .pl-list li:last-child{ border-bottom:1px solid var(--line); }

  .pl-item{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:0;
    border-left:2px solid transparent;
    padding:1.3rem 1rem 1.3rem 1.1rem;
    cursor:pointer;
    font:inherit;
    color:inherit;
    transition:background .22s ease, border-color .22s ease, padding-left .22s ease;
  }
  .pl-item:hover{ background:var(--el-beige); }
  .pl-item:focus-visible{ outline:2px solid var(--heading); outline-offset:-2px; }
  .pl-item[aria-current="true"]{
    background:var(--el-beige);
    border-left-color:var(--cta);
  }
  .pl-item .job-tag{ font-size:0.68rem; margin-bottom:0.45em; }
  .pl-item-title, .pl-item-meta{ display:block; }
  .pl-item .pl-item-title{
    font-family:'Montserrat', sans-serif;
    font-size:1.05rem;
    font-weight:400;
    color:var(--text);
    margin:0 0 0.3em;
    line-height:1.3;
  }
  .pl-item[aria-current="true"] .pl-item-title{ font-weight:600; color:var(--heading); }
  .pl-item .pl-item-meta{
    font-size:0.8rem;
    font-style:italic;
    color:var(--text-soft);
    margin:0;
  }

  /* --- prawa kolumna: szczegóły --- */
  .pl-detail{ min-width:0; }
  .pl-panel{ display:none; scroll-margin-top:calc(var(--header-h) + 1.5rem); }
  .pl-panel.is-active{ display:block; animation:fadeUp .3s ease both; }
  .pl-panel .job-tag{ font-size:0.75rem; }
  .pl-panel .pl-panel-title{
    font-family:'Montserrat', sans-serif;
    font-size:clamp(1.6rem,2.6vw,2.1rem);
    font-weight:400;
    color:var(--text);
    margin:0 0 0.25em;
    line-height:1.2;
  }
  .pl-panel .pl-panel-meta{
    font-size:0.9rem;
    font-style:italic;
    color:var(--text-soft);
    margin:0 0 2.2rem;
    padding-bottom:1.6rem;
    border-bottom:1px solid var(--line);
  }
  .pl-panel .job-detail{ padding-left:0; }

  /* przycisk powrotu do listy — tylko mobile */
  .pl-back{
    display:none;
    align-items:center;
    gap:0.5em;
    background:none;
    border:0;
    padding:0.6em 0;
    margin-bottom:1.2rem;
    font-family:'Montserrat', sans-serif;
    font-size:0.9rem;
    color:var(--text);
    cursor:pointer;
  }
  .pl-back svg{ width:14px; height:14px; }
  .pl-back:focus-visible{ outline:2px solid var(--heading); outline-offset:3px; }

  /* --- hamburger (wyłącznie na tej podstronie) --- */
  .burger{
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    width:34px; height:28px;
    position:relative;
    padding:0;
    z-index:60;
  }
  .burger span, .burger span::before, .burger span::after{
    content:"";
    position:absolute; left:0; right:0;
    height:1px; background:var(--text);
    transition:transform .28s ease, opacity .28s ease, top .28s ease;
  }
  .burger span{ top:13px; }
  .burger span::before{ top:-8px; }
  .burger span::after{ top:8px; }
  .burger[aria-expanded="true"] span{ background:transparent; }
  .burger[aria-expanded="true"] span::before{ transform:rotate(45deg); top:0; }
  .burger[aria-expanded="true"] span::after{ transform:rotate(-45deg); top:0; }
  .burger:focus-visible{ outline:2px solid var(--heading); outline-offset:4px; }
  body.menu-open{ overflow:hidden; }

@media (max-width:980px){
  /* nagłówek podstrony: logo z lewej, hamburger z prawej */
  .page-projects header{
    position:sticky;
    top:0;
    /* UWAGA: bez backdrop-filter — tworzy kontekst pozycjonowania i uwięziłby
       menu position:fixed wewnątrz paska nagłówka */
    background:var(--bg);
    backdrop-filter:none;
    border-bottom:1px solid var(--line);
  }
  .page-projects .nav{
    justify-content:space-between;
    padding-top:1rem;
    padding-bottom:1rem;
  }
  .page-projects .logo{ margin:0; }
  /* logo bez własnej reguły — obowiązują te same wysokości co na stronie
     głównej: 34px do 980px, 42px poniżej 640px */
  .page-projects .burger{ display:block; }

  .page-projects nav.menu{
    display:flex;
    position:fixed;
    inset:0;
    background:var(--bg);
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:0.4rem;
    padding:2rem;
    z-index:55;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
  }
  .page-projects nav.menu[data-open="true"]{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .page-projects nav.menu a{
    font-family:'Montserrat', sans-serif;
    font-size:1.15rem;           /* Montserrat jest optycznie większy od Playfair */
    font-weight:500;
    font-style:normal;
    letter-spacing:0.02em;
    text-transform:none;
    color:var(--heading);
    padding:0.85em 1.2em;        /* strefa dotyku ~48px */
    opacity:0;
    transform:translateY(10px);
  }
  .page-projects nav.menu[data-open="true"] a{
    animation:menuIn .38s ease forwards;
  }
  .page-projects nav.menu[data-open="true"] a:nth-child(1){ animation-delay:.06s; }
  .page-projects nav.menu[data-open="true"] a:nth-child(2){ animation-delay:.12s; }
  .page-projects nav.menu[data-open="true"] a:nth-child(3){ animation-delay:.18s; }
  .page-projects nav.menu[data-open="true"] a:nth-child(4){ animation-delay:.24s; }
  .page-projects nav.menu[data-open="true"] a:nth-child(5){ animation-delay:.30s; }
  .page-projects nav.menu a::after{ bottom:0.55em; }

  @keyframes menuIn{ to{ opacity:1; transform:none; } }

  /* --- układ mobilny: najpierw lista, po wyborze pełny widok oferty --- */
  .pl-layout{
    grid-template-columns:1fr;
    gap:0;
  }
  .pl-list{ position:static; }
  .pl-item{ position:relative; padding:1.25rem 2.4rem 1.25rem 0.9rem; }
  .pl-item::after{                       /* strzałka „wejdź w ofertę” */
    content:"";
    position:absolute;
    right:1rem;
    top:50%;
    width:9px; height:9px;
    border-right:1.5px solid var(--cta);
    border-bottom:1.5px solid var(--cta);
    transform:translateY(-50%) rotate(-45deg);
  }
  /* w widoku listy żaden element nie jest podświetlony — wybór następuje dopiero po dotknięciu */
  .page-projects[data-view="list"] .pl-item[aria-current="true"]{
    background:none;
    border-left-color:transparent;
  }
  .page-projects[data-view="list"] .pl-item[aria-current="true"] .pl-item-title{
    font-weight:400;
    color:var(--text);
  }
  .pl-detail{ margin-top:2rem; }
  .pl-back{ display:inline-flex; }

  /* widok „lista” — szczegóły schowane */
  .page-projects[data-view="list"] .pl-detail{ display:none; }
  /* widok „oferta” — lista schowana, pełna szerokość na treść */
  .page-projects[data-view="detail"] .pl-list{ display:none; }
  .page-projects[data-view="detail"] .pl-hero{ display:none; }
  .page-projects[data-view="detail"] .pl-detail{ margin-top:0; }

  .pl-panel .pl-panel-meta{ margin-bottom:1.8rem; }
}