/* ============================================================
   NAMING  —  read this before adding a class
   ------------------------------------------------------------
   u-*           global utility (layout, type, reveal)
   block         component root            .card
   block__part   a piece of that component .card__title
   block--mod    a variant of it           .card--center
   is-* / has-*  state, never used alone — always written after
                 a block:  .header.is-solid,  .boot.is-moving

   Every class belongs to exactly one block, so no rule can
   reach into another block by accident. Bare, generic names
   (.intro, .grid, .row) are deliberately absent: two blocks
   claiming the same word is how a section ends up pinned to
   the top of the screen.

   CONTENTS
    1 Tokens          8 Lead
    2 Base            9 Values
    3 Utilities      10 Band (coloured sections)
    4 Components     11 Careers + Jobs
    5 Header         12 CTA
    6 Hero           13 Footer
    7 Drawer         14 Boot sequence
   ============================================================ */

/* ============================================================
   1. TOKENS  —  edit here first
   ============================================================ */
:root{
  /* Brand palette */
  --ink:        #0e0e0e;
  --ink-soft:   #55554f;
  --paper:      #ffffff;
  --bone:       #f2f1ec;
  --line:       #d9d8d1;
  --line-dark:  rgba(255,255,255,.28);

  --orange:     #f4511e;
  --mint:       #5fe0ab;
  --electric:   #1a1aff;
  --night:      #0a0a0a;

  /* Typography */
  --font:      "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Kapitałowa antykwa wzorowana na rzymskich inskrypcjach. Ma tylko
     wersaliki (małe litery to kapitaliki), więc nagłówek składamy
     wersalikami. Używana wyłącznie w hero; reszta strony na Archivo. */
  --font-display: "Cinzel", "Times New Roman", serif;

  --fs-display: clamp(2.6rem, 7.4vw, 7.4rem);   /* LATEST NEWS scale   */
  --fs-h1:      clamp(1.4rem, 3.5vw, 3.3rem);   /* hero, wersaliki     */
  --fs-h2:      clamp(1.7rem, 3.1vw, 3.1rem);   /* section statements  */
  --fs-h3:      clamp(1.05rem, 1.5vw, 1.4rem);  /* card titles         */
  --fs-body:    clamp(.98rem, 1.05vw, 1.12rem);
  --fs-meta:    .69rem;

  /* Rhythm */
  --pad:        clamp(1.15rem, 4vw, 4.5rem);
  --section:    clamp(4.5rem, 9vw, 9.5rem);
  --maxw:       1680px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ============================================================
   3. UTILITIES
   ============================================================ */
.u-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.u-section{padding-block:var(--section)}
.u-section--bone{background:var(--bone)}

/* Small uppercase label used for dates and categories */
.u-meta{
  font-size:var(--fs-meta);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-soft);
}

/* Oversized section word-mark (LATEST NEWS / DEALS & CASES …) */
.u-display{
  font-size:var(--fs-display);
  line-height:.86;
  font-weight:800;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

.u-statement{
  font-size:var(--fs-h2);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.u-lede{max-width:46ch;color:var(--ink-soft)}

.u-reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.u-reveal.is-in{opacity:1;transform:none}

/* The logo is defined once as a <symbol> and referenced with <use>. */
.u-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Trzyma frazę w jednej linii — np. nazwisko w nazwie ulicy. */
.u-nowrap{white-space:nowrap}

/* Names the logo for screen readers without showing the text. */
.u-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ============================================================
   4. COMPONENTS
   ============================================================ */

/* --- Pill link ------------------------------------------------ */
.pill{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.72em 1.5em;
  border:1px solid currentColor;border-radius:999px;
  font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.pill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pill--solid:hover{background:transparent;color:var(--ink)}
.pill__arw{transition:transform .35s var(--ease)}
.pill:hover .pill__arw{transform:translateX(4px)}

/* --- Circular "see all" disc ---------------------------------- */
.disc{
  display:grid;place-content:center;gap:.35rem;
  width:clamp(7.5rem,11vw,11.5rem);aspect-ratio:1;
  padding-inline:1.15rem;         /* keeps longer labels off the edge */
  border-radius:50%;text-align:center;text-wrap:balance;
  background:var(--ink);color:var(--paper);
  font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  transition:transform .45s var(--ease);
}
.disc:hover{transform:scale(1.07)}

/* --- Round arrow button --------------------------------------- */
.arrow-btn{
  width:2.9rem;aspect-ratio:1;
  border:1px solid var(--ink);border-radius:50%;
  display:grid;place-content:center;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.arrow-btn:hover{background:var(--ink);color:var(--bone)}

/* --- Card grid held together by hairlines ---------------------- */
.cardgrid{
  display:grid;gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.cardgrid > *{background:var(--paper)}
.cardgrid--1{grid-template-columns:1fr}
.cardgrid--2{grid-template-columns:repeat(2,1fr)}
.cardgrid--3{grid-template-columns:repeat(3,1fr)}
.cardgrid--flush{border-top:0}          /* sits directly under another grid */

.card{
  display:flex;flex-direction:column;gap:1.4rem;
  padding:clamp(1.3rem,2.2vw,2.4rem);
  min-height:clamp(15rem,22vw,20rem);
  transition:background .4s var(--ease), color .4s var(--ease);
}
.card:hover{background:var(--bone)}
.card__head{display:flex;justify-content:space-between;gap:1rem}
.card__title{font-size:var(--fs-h3);font-weight:600;line-height:1.25;letter-spacing:-.01em;margin-top:auto}
/* Wrap title + copy when a card needs both; the wrapper takes over
   the push-to-bottom so the two lines stay tight together. */
.card__body{margin-top:auto;display:grid;gap:.5rem}
.card__body .card__title{margin-top:0}
.card__text{font-size:.92rem;line-height:1.5;opacity:.78}
.card--center{align-items:center;justify-content:center;text-align:center}

/* --- Karty spraw: wyróżniona nazwa produktu + opis + odnośnik --- */
.card--sprawa{gap:1.15rem}
.sprawa__name{
  position:relative;
  font-size:clamp(1.5rem,2.4vw,2.05rem);
  font-weight:600;line-height:1.12;letter-spacing:-.02em;
  padding-bottom:1.1rem;
}
/* Kreska-akcent pod nazwą (echo kreski działowej z logo K|P);
   wydłuża się na hover — spójne z mikro-interakcjami serwisu. */
.sprawa__name::after{
  content:"";position:absolute;left:0;bottom:0;
  width:2.4rem;height:2px;background:var(--ink);
  transition:width .45s var(--ease);
}
.card--sprawa:hover .sprawa__name::after{width:3.6rem}
.card__more{
  margin-top:auto;display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}
.card__arw{transition:transform .35s var(--ease)}
.card--sprawa:hover .card__arw{transform:translateX(4px)}

/* --- Krok w sekcji „Jak to działa": czarne kółko jak .disc -------- */
.krok-badge{
  align-self:center;
  margin-top:clamp(.75rem,2.4vw,1.8rem);
  display:grid;place-content:center;gap:.1rem;
  width:clamp(4.6rem,7vw,5.6rem);aspect-ratio:1;
  border-radius:50%;
  background:var(--ink);color:var(--paper);
  text-align:center;
}
.krok-badge__label{font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.85}
.krok-badge__num{font-size:1.5rem;font-weight:600;line-height:1}

/* --- Brand lockup (header, footer and boot screen all use it) --
   The logo already carries the wordmark, so the lockup is the
   artwork alone. It is drawn in currentColor, which is why the
   same file works white on the hero and black on a solid header.
   Height is the only thing you set; --brand-h drives it.        */
.brand{display:flex;align-items:center;flex:none}
.brand__mark{
  height:var(--brand-h, 38px);
  width:auto;aspect-ratio:208.68 / 116.68;
  fill:currentColor;flex:none;
  transition:height .4s var(--ease);
}
.brand--lg{--brand-h:54px}

/* --- Page header (any subpage: kontakt, polityka-prywatności, …) --
   Przeniesione tu ze styles/kontakt.css, kiedy zaczęła go używać
   druga podstrona — zgodnie z zasadą z README projektu. Górny
   odstęp musi minąć przyklejony pasek (~72 px); dolny jest
   mniejszy, bo to, co następuje pod spodem, ma własne światło. */
.page{
  background:var(--bone);
  padding-block:calc(var(--section) * .5 + 2.2rem) calc(var(--section) * .5);
}
.page__head{display:grid;gap:1.15rem;max-width:54ch}
.page__head .u-display{margin-block:.2rem .35rem}

/* ============================================================
   5. IMAGE PLACEHOLDERS
   Swap a .media for  <img>  when you have real photography.
   ============================================================ */
.media{position:relative;overflow:hidden;background:var(--bone);isolation:isolate}
.media::after{ /* film grain, so flat fills read as photographs */
  content:"";position:absolute;inset:0;z-index:2;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}
.media--fill{position:absolute;inset:0}

/* Prawdziwe zdjęcie w kaflu .media. Wypełnia go w całości, kadr przycina
   się sam. Ziarno spod .media::after jest tu zbędne — gradienty potrzebują
   go, żeby czytać się jak fotografia, fotografia ma własne. */
.media--zdjecie::after{content:none}
.media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Zdjęcie hero. Oryginał jest pionowy, więc dla szerokich ekranów jest
   obrócony w lewo — długopis wędruje wtedy w prawy górny róg, po przekątnej
   od nagłówka. Nad nim i pod nim doklejone są pasy papieru, żeby nie wchodził
   pod przyciski ani w napis. Na wąskich ekranach wraca kadr pionowy, bo cover
   ucinałby boki. */
.media--foto{
  background:var(--night) url('/hero-desktop.jpg') 70% 25%/cover no-repeat;
}
@media (max-width:760px){
  .media--foto{
    background-image:url('/hero-mobile.jpg');
    background-position:58% 40%;
  }
}
.media--blue {background:linear-gradient(155deg,#0b1cc4 0%,#2f6bff 45%,#04061f 100%)}
.media--sand {background:linear-gradient(145deg,#cbbfae 0%,#9b8b76 100%)}
.media--moss {background:linear-gradient(145deg,#38584a 0%,#7fa08c 100%)}
.media--clay {background:linear-gradient(145deg,#b7715a 0%,#6d3a2c 100%)}
.media--ash  {background:linear-gradient(145deg,#9aa0a6 0%,#4d5257 100%)}

/* ============================================================
   6. HEADER
   ============================================================ */
.header{
  position:fixed;inset:0 0 auto;z-index:80;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.05rem var(--pad);
  color:var(--paper);
  transition:background .4s var(--ease), color .4s var(--ease),
             padding .4s var(--ease), opacity .6s var(--ease);
}
.header.is-solid{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);padding-block:.8rem}
.header.is-solid .brand{--brand-h:38px}   /* logo trzyma pełny rozmiar także na białym pasku */
/* Na przezroczystym nagłówku (nad jasnym hero) biały logotyp i „Kontakt"
   dostają delikatny cień — czytelne bez przyciemniania zdjęcia. Na białym
   pasku (is-solid) cień znika. */
.header:not(.is-solid){text-shadow:0 1px 10px rgba(0,0,0,.45)}
.header:not(.is-solid) .brand__mark{filter:drop-shadow(0 1px 7px rgba(0,0,0,.5))}
.header__end{display:flex;align-items:center;gap:.55rem}

/* --- Bar controls --------------------------------------------
   Two pills: a contact link and the menu toggle. Both sit above
   the drawer, so the same button opens and closes the panel.
   When the panel opens the script drops .is-solid from the bar,
   which is what lets the light text read over the dark panel.   */
.bar-btn{
  display:inline-flex;align-items:center;
  padding:.78em 1.7em;
  border:1px solid transparent;border-radius:999px;
  font-size:1rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), opacity .3s var(--ease),
             transform .35s var(--ease);
}
.bar-btn:hover{transform:scale(1.05)}

.bar-btn--solid{background:var(--ink);color:var(--paper)}
body.is-open .bar-btn--solid{background:var(--paper);color:var(--ink)}
.bar-btn__close{display:none}
body.is-open .bar-btn__open{display:none}
body.is-open .bar-btn__close{display:inline}

/* The outline pill inverts differently on the photo and on the
   white bar, so both hovers are spelled out rather than relying
   on currentColor — which would resolve to the new colour and
   paint the fill and the text the same shade. */
.bar-btn--ghost{border-color:currentColor}
.bar-btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.header.is-solid .bar-btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* Contact already sits inside the panel — no need for it twice. */
body.is-open .bar-btn--ghost{opacity:0;pointer-events:none}

/* ============================================================
   7. DRAWER  (the whole navigation, at every width)
   ============================================================ */
.drawer{
  position:fixed;inset:0;z-index:70;background:var(--ink);color:var(--paper);
  /* "safe" centring falls back to top-aligned once the list is taller
     than the screen, so the first item can never end up unreachable. */
  display:grid;align-content:safe center;gap:.15rem;
  padding:6.5rem var(--pad) 3rem;
  overflow-y:auto;
  transform:translateY(-100%);transition:transform .55s var(--ease);
  visibility:hidden;
}
body.is-open{overflow:hidden}
body.is-open .drawer{transform:none;visibility:visible}
.drawer__link{
  font-size:clamp(1.3rem,3.4vw,2.35rem);font-weight:700;letter-spacing:-.03em;
  padding-block:.16em;border-bottom:1px solid var(--line-dark);
  transition:padding-inline .4s var(--ease);
}
.drawer__link:hover{padding-inline:.5rem 0}
.drawer__foot{margin-top:2.5rem}
.drawer__contact{display:grid;gap:.15rem;font-size:.95rem;opacity:.7}


/* ============================================================
   8. HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;color:var(--paper);text-align:center}
.hero__bg{position:absolute;inset:0;z-index:-1}
.hero__bg::after{opacity:.07}   /* papier ma własne ziarno */
.hero__bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  /* Zdjęcie w PEŁNEJ jasności (jak oryginał). Tylko delikatny cień u góry
     (pod nagłówek) i u dołu (pod „przewiń") — środek bez przyciemnienia.
     Czytelność tytułu zapewnia jego własny text-shadow, nie ściemnianie tła. */
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 80%,rgba(0,0,0,.3) 100%);
}
.hero__inner{
  padding-inline:var(--pad);display:grid;justify-items:center;
  /* Tytuł dokładnie na środku kadru (bez zejścia w dół). */
  translate:0;
}

/* One statement, two lines: the firm, then what it does. The
   tagline is sized on its own scale rather than in em, so it
   stays readable when the name shrinks on a phone. */
.hero__title{
  font-family:var(--font-display);
  font-size:var(--fs-h1);line-height:1.24;font-weight:500;
  /* Rzymskie kapitały wymagają dodatniego światła — bez niego zlewają się. */
  letter-spacing:.09em;text-transform:uppercase;
  text-wrap:balance;
  /* Tło hero jest jasne → mocniejszy cień pod samym napisem trzyma biel czytelną. */
  text-shadow:0 1px 2px rgba(0,0,0,.62),0 2px 12px rgba(0,0,0,.55),0 0 34px rgba(0,0,0,.42);
}

/* Wskaźnik przewijania wypada z układu treści i siada na dole
   kadru, żeby wyśrodkowany napis został sam na środku. */
.hero__cue{
  position:absolute;left:50%;bottom:clamp(1.5rem,3vw,2.6rem);translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}
.hero__cue-line{display:block;width:1px;height:2.4rem;background:currentColor;transform-origin:top;animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0)}40%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
/* Grot strzałki na dole trzonu: trzon (.hero__cue-line) animuje się jak wcześniej,
   grot jest statyczny i nie jest skalowany, więc wskaźnik czyta się jako strzałka w dół. */
.hero__cue::after{
  content:"";display:block;box-sizing:border-box;
  width:.5rem;height:.5rem;margin-top:-.85rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}

/* ============================================================
   9. LEAD  (the statement block under the hero)
   ============================================================ */
.lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:start}
.lead__aside{display:grid;gap:1.8rem}

/* ============================================================
   10. VALUES  (carousel behind the petal mark)
   ============================================================ */
.values{background:var(--bone);position:relative;overflow:hidden}
.values__mark{
  position:absolute;top:50%;left:48%;translate:-50% -50%;
  width:min(42vw,520px);opacity:.5;pointer-events:none;
}
.values__mark{fill:#ffffff}
.values__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.values__col{display:grid;gap:clamp(2.5rem,6vw,5rem);min-height:52vh;align-content:space-between}
.values__eyebrow{text-align:start}
.values__media{position:relative;margin:0;width:100%;aspect-ratio:4/5}
.values__photo{object-position:50% 50%;opacity:0;visibility:hidden;transform:scale(1.05);transition:opacity .8s var(--ease),transform 1.5s var(--ease),visibility .8s}
.values__photo.is-in{opacity:1;visibility:visible;transform:none}
.values__slides{display:grid}
.values__slide{
  grid-area:1/1;display:grid;gap:1.1rem;max-width:52ch;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s;
}
.values__slide.is-in{opacity:1;visibility:visible;transform:none}
.values__nav{display:flex;align-items:center;gap:1.2rem}
.values__count{font-size:var(--fs-meta);letter-spacing:.14em;font-weight:600}

/* ============================================================
   11. BAND  (the full-bleed coloured sections)
   ============================================================ */
.band{color:var(--paper)}
.band--orange{background:var(--orange)}
.band--mint{background:var(--mint);color:var(--ink)}
.band--night{background:var(--night)}

.band__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(1.8rem,3.5vw,3.2rem)}
.band__head .u-lede{color:inherit;opacity:.85}
.band__strip{aspect-ratio:21/8}

/* Kolaż zdjęć w sekcji „Wiedza": pionowy portret po lewej + dwa poziome
   kadry po prawej. Cienkie ciemne szczeliny jak w siatce kart. */
.kolaz{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
  background:var(--line-dark);
  aspect-ratio:16/10;
  overflow:hidden;
}
.kolaz__img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.kolaz__img--tall{grid-row:1 / span 2;object-position:50% 22%}
@media (max-width:640px){
  .kolaz{grid-template-columns:1fr;grid-template-rows:auto;aspect-ratio:auto}
  /* height:auto — bez tego `height:100%` (z bazy) w kolumnie o wysokości auto
     tworzy pętlę i na części mobilnych przeglądarek (iOS Safari) obraz zapada
     się/rozjeżdża. Z height:auto proporcje trzyma aspect-ratio. */
  .kolaz__img{aspect-ratio:16/10;height:auto}
  .kolaz__img--tall{grid-row:auto;aspect-ratio:4/5;height:auto}
}

/* A band recolours the grid it contains, but never the artwork. */
.band .cardgrid{background:var(--line-dark);border-color:var(--line-dark)}
.band .cardgrid > *:not(.media){background:transparent}
.band .card:hover{background:rgba(255,255,255,.09)}
.band .u-meta{color:inherit;opacity:.75}
.band .disc{background:var(--paper);color:var(--ink)}
.band--mint .cardgrid{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.18)}
.band--mint .card:hover{background:rgba(255,255,255,.4)}
.band--mint .disc{background:var(--ink);color:var(--paper)}
.band--night .disc{background:var(--ink);color:var(--paper)}

/* ============================================================
   12. CAREERS + JOBS
   ============================================================ */
.careers__head{display:grid;gap:1.6rem;max-width:44ch;margin-bottom:clamp(2rem,4vw,3.5rem)}
.careers__people{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.careers__person{position:relative;margin:0;aspect-ratio:3/4}
.careers__person:nth-child(2),
.careers__person:nth-child(4){transform:translateY(8%)}
.careers__label{
  position:absolute;left:.9rem;bottom:.9rem;z-index:3;
  background:var(--paper);color:var(--ink);
  padding:.5em 1.1em;border-radius:999px;
  font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;font-weight:700;
}

/* ============================================================
   13. CTA — bezpłatna analiza
   ============================================================ */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.cta__body{display:grid;gap:1.6rem;max-width:46ch}
.cta__media{aspect-ratio:4/3}

/* ============================================================
   14. FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--paper);padding-block:clamp(3.5rem,7vw,6rem) 2rem}
.footer a:hover{opacity:.6}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line-dark)}
.footer__head{font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.55;margin-bottom:1.1rem}
.footer__col li{padding-block:.3rem;font-size:.95rem}
.footer__col .brand{font-size:1.3rem;margin-bottom:1rem}
.footer__note{opacity:.65;font-size:.95rem;max-width:32ch}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.8rem;font-size:.8rem;opacity:.55}

/* ============================================================
   15. BOOT SEQUENCE
   The mark appears centred, then flies to its header position.
   html.has-boot is set by an inline script, so with JS disabled
   the page simply renders without the sequence.
   ============================================================ */
html.has-boot{background:var(--night)}   /* bez tego pierwsza klatka jest biała */
html.has-boot body{overflow:hidden;background:var(--night)}
html.has-boot .header{opacity:0}
/* Wskaźnik przewijania leży poza .hero__inner, więc wymieniamy go
   osobno. Centrowanie trzyma `translate`, a kaskada `transform` —
   to dwie różne właściwości, więc się nie znoszą. */
html.has-boot .hero__inner > *,
html.has-boot .hero__cue{opacity:0;transform:translateY(20px)}

body.is-ready .header{opacity:1}
body.is-ready .hero__inner > *,
body.is-ready .hero__cue{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
body.is-ready .hero__inner > *{transition-delay:.06s}
body.is-ready .hero__cue{transition-delay:.34s}

.boot{position:fixed;inset:0;z-index:200;pointer-events:none}
.boot__bg{
  position:absolute;top:0;left:0;bottom:0;
  width:100vw;                 /* also covers the reserved scrollbar gutter */
  background:var(--night);
  overflow:hidden;
  transition:opacity .8s var(--ease) .2s;
}
/* Rozmyte tło hero pod animacją logo. Warstwa obrazu ostrzeje i jaśnieje
   w miarę rysowania logo; nakładka ::after jest IDENTYCZNA jak w hero, więc
   gdy boot znika, odsłania piksel w piksel to samo tło — bez przeskoku. */
.boot__bg::before{
  content:"";position:absolute;inset:0;   /* dokładnie jak .hero__bg → ten sam kadr */
  background:var(--night) url('/hero-desktop.jpg') 70% 25%/cover no-repeat;
  filter:blur(34px) brightness(.62);transform:scale(1.12);
  /* focus kończy się w fazie „hold" (przed odlotem logo), więc w chwili
     odsłonięcia obraz jest już w skali 1:1 = piksel w piksel jak hero. */
  transition:filter .9s var(--ease), transform .9s var(--ease);
}
.boot__bg::after{
  content:"";position:absolute;inset:0;
  /* IDENTYCZNA nakładka jak .hero__bg::before — dla bezszwowego odsłonięcia. */
  background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 80%,rgba(0,0,0,.3) 100%);
}
@media (max-width:760px){
  .boot__bg::before{background-image:url('/hero-mobile.jpg');background-position:58% 40%}
}
/* Centralny cień pod logo — daje kontrast bieli, a znika gdy logo leci do rogu;
   dzięki temu w chwili odsłonięcia boot = dokładnie tło hero (brak przeskoku). */
.boot__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(62% 56% at 50% 50%,rgba(0,0,0,.6) 0%,rgba(0,0,0,.32) 46%,rgba(0,0,0,0) 76%);
  transition:opacity .7s var(--ease);
}
.boot.is-in     .boot__bg::before{filter:blur(14px) brightness(.72);transform:scale(1.06)}
.boot.is-filled .boot__bg::before{filter:blur(0)    brightness(1);transform:scale(1)}
.boot.is-moving .boot__veil{opacity:0}
/* Boot gaśnie w CAŁOŚCI (tło+logo naraz) dopiero PO odsłonięciu prawdziwego
   hero pod spodem — nigdy nie prześwituje czerń (koniec „ciemnej klatki"). */
.boot.is-out{opacity:0;transition:opacity .55s var(--ease)}

.boot__lockup{
  position:fixed;top:0;left:0;z-index:201;
  transform-origin:0 0;        /* makes the flight maths exact */
  white-space:nowrap;color:var(--paper);
  will-change:transform;
  transition:transform .9s var(--ease);
}
.boot__lockup.is-static{transition:none}          /* the very first placement */
.boot.is-moving .boot__lockup{transition:transform .95s var(--ease)}

/* Logo rysuje się kreską, a potem wypełnia — jak pismo odręczne.
   K i P są przecięte napisem LEGALIS, więc każde z nich to kilka
   konturów, które jedna kreska obchodzi po kolei. Litery LEGALIS
   są za drobne na obrys, więc po prostu pojawiają się od lewej.

   --at   kiedy dana część zaczyna się rysować
   --draw jak długo trwa jej kreska
   Długość ścieżek mierzy skrypt (getTotalLength) i wpisuje
   stroke-dasharray — w CSS nie da się jej policzyć.            */
.boot__logo{
  /* Logo renderujemy OD RAZU w docelowym, dużym rozmiarze — dzięki temu
     wektor jest ostry. Animacja tylko ZMNIEJSZA je w locie do nagłówka;
     skalowanie w dół nie rozmywa, w przeciwieństwie do powiększania drobnej
     bitmapy (stąd wcześniejsza „słaba jakość" przy starcie). */
  width:clamp(220px, 44vw, 520px);height:auto;
  overflow:visible;
  stroke:currentColor;
  /* Kreska ma trzymać stałą grubość niezależnie od skali. */
  vector-effect:non-scaling-stroke;stroke-width:1.6px;
  stroke-linejoin:round;stroke-linecap:round;
}
.boot__ink path{
  --at:0s; --draw:1.15s; --len:1000;
  fill-opacity:0;stroke-opacity:0;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-opacity .3s var(--ease) var(--at),
             fill-opacity .85s var(--ease);
}
/* Rysowanie idzie animacją, nie przejściem. Przejście wymaga, żeby
   wartość początkowa zdążyła się utrwalić między klatkami — przy
   starcie zaraz po zbudowaniu DOM-u to zawodzi i kreska pojawia się
   od razu. Animacja ma stan początkowy zapisany w klatce kluczowej. */
@keyframes rysuj{ from{stroke-dashoffset:var(--len)} to{stroke-dashoffset:0} }
.boot__ink path:nth-child(2){--at:.80s; --draw:.45s}   /* kreska między K i P */
.boot__ink path:nth-child(3){--at:1.00s}               /* P                   */

.boot__word path{
  fill-opacity:0;stroke:none;
  transition:fill-opacity .5s var(--ease) var(--at);
}
.boot__word path:nth-child(1){--at:1.75s}
.boot__word path:nth-child(2){--at:1.82s}
.boot__word path:nth-child(3){--at:1.89s}
.boot__word path:nth-child(4){--at:1.96s}
.boot__word path:nth-child(5){--at:1.96s}   /* obie połówki A naraz */
.boot__word path:nth-child(6){--at:2.03s}
.boot__word path:nth-child(7){--at:2.10s}
.boot__word path:nth-child(8){--at:2.17s}

.boot.is-in .boot__ink path{stroke-opacity:1;animation:rysuj var(--draw) linear var(--at) both}
.boot.is-in .boot__word path{fill-opacity:1}

/* Wypełnienie wchodzi, kreska gaśnie. Kontur pokrywa się
   z krawędzią wypełnienia, więc zamiana jest niewidoczna. */
.boot.is-filled .boot__ink path{
  fill-opacity:1;stroke-opacity:0;
  transition:fill-opacity .85s var(--ease), stroke-opacity .7s var(--ease);
}

/* ============================================================
   16. BREAKPOINTS
   ============================================================ */
@media (max-width:900px){
  .lead,.cta{grid-template-columns:1fr}
  .cardgrid--3{grid-template-columns:repeat(2,1fr)}
  .careers__people{grid-template-columns:repeat(2,1fr)}
  .careers__person:nth-child(n){transform:none}
  .footer__top{grid-template-columns:1fr 1fr}
  .values__inner{grid-template-columns:1fr;gap:clamp(1.8rem,6vw,3rem)}
  .values__col{min-height:0}
  .values__media{order:-1;width:100%;max-width:460px;margin-inline:auto}
  .values__mark{left:50%;width:min(62vw,720px)}
}
@media (max-width:760px){
  .band__strip{aspect-ratio:4/3}
}
@media (max-width:520px){
  .bar-btn{padding:.7em 1.15em;font-size:.9rem}
}
@media (max-width:640px){
  .cardgrid--2,.cardgrid--3{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .u-reveal{opacity:1;transform:none;transition:none}
  .hero__cue-line{animation:none}
  .boot{display:none}
  .boot__lockup,.boot__bg,.boot__lockup .brand__mark{transition:none}
}