/* ==========================================================================
   sections.css — układy poszczególnych sekcji
   Zasada: każda sekcja ma inną rodzinę układu. Żadnego zig-zagu na 8 ekranów.
   ========================================================================== */

/* --- HERO: split. Typografia po lewej, zdjęcie wychodzi do prawej krawędzi.
   Zdjęcie jest pionowe (1080×1440), więc dostaje własną kolumnę zamiast
   być rozciągane na całą szerokość — zostaje ostre i nie traci kadru. ------ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38vw);
  overflow: hidden;
}
.hero__media { position: relative; }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
}
/* Miękkie zejście w tło od lewej i od dołu — bez twardej krawędzi kolumny */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--paper-900), rgb(242 240 235 / 0.4) 22%, transparent 55%),
    linear-gradient(to top, var(--paper-900), transparent 28%);
}
.hero__dim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper-900);
  opacity: 0;
  pointer-events: none;
}

.hero__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-content: end;
  padding-block: calc(72px + 2rem) clamp(2.5rem, 6vw, 4.5rem);
  padding-inline-start: max(var(--gutter), (100vw - var(--maxw)) / 2 + var(--gutter));
  padding-inline-end: clamp(1.5rem, 3vw, 3rem);
}
.hero__line {
  height: 1px;
  background: var(--red-500);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero h1 {
  font-size: clamp(2.3rem, 5vw, 4.6rem);
  max-width: 18ch;
  font-variation-settings: 'wdth' 100;
}
.hero h1 em {
  font-style: normal;
  color: var(--red-500);
}
.hero__bottom { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.hero__meta .lead { max-width: 46ch; }
@media (max-width: 900px) {
  /* Poniżej tej szerokości kolumna na zdjęcie robi się bezużyteczna.
     Na jasnym motywie nie kładziemy tekstu na rozbielonym zdjęciu (szary
     kadr, słaby kontrast), tylko stawiamy je pod treścią jako zwykły blok.
     Próg = próg pinowania z motion.js (900 px): stos wyższy od okna nie
     może być przypięty, bo jego dół nigdy nie wjechałby na ekran. */
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__media img { object-position: 50% 40%; }
  .hero__media::after { background: linear-gradient(to bottom, var(--paper-900), transparent 14%); }
  .hero__inner {
    position: relative;
    z-index: 3;
    padding-inline: var(--gutter);
    padding-block-end: clamp(2rem, 6vw, 3rem);
  }
}
@media (max-width: 760px) {
  .hero__actions .btn { flex: 1 1 100%; }
}

/* --- Kurtyna nad przypiętym hero -----------------------------------------
   Hero jest pinowane z pinSpacing:false, więc kolejne sekcje przejeżdżają po
   nim. Każda z nich musi mieć własne, nieprzezroczyste tło i leżeć wyżej w
   stosie — inaczej treść hero prześwituje przez całą stronę. */
.hero { z-index: 0; }
main > section:not(.hero),
main > div,
.marquee,
.footer {
  position: relative;
  z-index: 1;
  background: var(--paper-900);
}
.marquee, .footer { background: var(--paper-850); }

/* --- ZAUFALI NAM: ściana logotypów, same znaki, zero podpisów ------------- */
.logos {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.logos__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-400);
  margin-bottom: 1.5rem;
}
.logos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
/* Logotypy to grafitowe sylwetki z prawdziwą alfą (alfa z białych sylwetek
   v1, kolor przestawiony na #16181c). Bez filter i mix-blend-mode, bo te dwa
   zabiegi dawały szare prostokąty przy logotypach z niebiałym tłem. */
.logos__grid img {
  width: 100%;
  max-width: 7.5rem;
  height: auto;
  opacity: 0.6;
  transition: opacity var(--dur-base) var(--ease-out-soft);
}
.logos__grid img:hover { opacity: 1; }

/* --- MARQUEE: zasięg terytorialny ---------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.1rem;
  background: var(--paper-850);
  cursor: default;
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-variation-settings: 'wdth' 115;
  padding-inline: 1.6rem;
  color: var(--graphite-300);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.marquee__track span::after {
  content: '';
  width: 7px; height: 7px;
  background: var(--red-500);
  flex: none;
}

/* --- ZAKRES PRAC: poziomy pan na desktopie, stos na mobile ----------------
   Sekcja jest pinowana na `top top`, więc wszystko, co nie mieści się w
   100dvh, zostaje pod krawędzią ekranu i nie ma jak do tego doscrollować.
   Dlatego pinowany kontener ma sztywną wysokość okna, a karta jest siatką
   `1fr auto`: tekst bierze tyle, ile potrzebuje, zdjęcie oddaje resztę.
   Przy niskim oknie kurczy się kadr, nigdy treść. */
.pan { position: relative; }
.pan__head { display: grid; gap: 1.25rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.pan__viewport { overflow: hidden; }
.pan__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--gutter);
  width: max-content;
}
.job {
  position: relative;
  width: clamp(18rem, 27vw, 24rem);
  flex: none;
  background: var(--paper-800);
  border: 1px solid var(--line);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.job__media { aspect-ratio: 4 / 3; overflow: hidden; min-height: 0; }
.job__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out-soft);
}

@media (min-width: 901px) {
  .pan {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: calc(72px + 1.25rem) clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
  }
  .pan__head {
    flex: none;
    gap: 0.9rem;
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  }
  .pan__head h2 { font-size: var(--step-3); }
  .pan__head .body-muted { max-width: 58ch; }
  .pan__viewport { flex: 1 1 auto; min-height: 0; }
  .pan__track { height: 100%; align-items: stretch; }
  .job {
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto;   /* zdjęcie ustępuje, treść nie */
  }
  .job__media { aspect-ratio: auto; min-height: 9rem; }
}

/* Niskie okna laptopowe: nagłówek sekcji oddaje wysokość kartom, zamiast
   ściskać zdjęcia do paska. Treść zostaje, zmienia się tylko skala. */
@media (min-width: 901px) and (max-height: 830px) {
  .pan__head h2 { font-size: var(--step-2); }
  .pan__head { gap: 0.6rem; padding-bottom: 1.25rem; }
  .pan { padding-block: calc(72px + 0.75rem) 1.25rem; }
}
.job:hover .job__media img { transform: scale(1.05); }
.job__body { padding: 1.5rem 1.5rem 1.75rem; display: grid; gap: 0.7rem; align-content: start; }
.job__no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--red-500);
  letter-spacing: 0.12em;
}
.job h3 { font-size: var(--step-1); font-variation-settings: 'wdth' 105; }
.job p { font-size: 0.92rem; color: var(--graphite-300); }
.job__specs {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--graphite-400);
  letter-spacing: 0.03em;
}

@media (max-width: 900px) {
  .pan__viewport { overflow: visible; }
  .pan__track {
    width: auto;
    flex-wrap: wrap;
    padding-inline: 0;
    gap: 1rem;
  }
  .job { width: 100%; }
}

/* --- PARAMETRY: karty, nie tabela ----------------------------------------- */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}
.spec {
  background: var(--paper-900);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.spec__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: 'wdth' 108;
  color: var(--graphite-100);
}
.spec__value small {
  font-size: 0.42em;
  color: var(--red-500);
  letter-spacing: 0;
  margin-left: 0.25em;
}
.spec__label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--graphite-400);
}
.spec p { font-size: 0.88rem; color: var(--graphite-300); }

/* --- PROCES: sticky stack ------------------------------------------------- */
.steps { position: relative; }
.step {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background: var(--paper-900);
  border-top: 1px solid var(--line);
}
.step__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  width: 100%;
}
.step__no {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  font-variation-settings: 'wdth' 120;
  color: transparent;
  -webkit-text-stroke: 1px var(--paper-500);
}
.step:nth-child(odd) .step__no { -webkit-text-stroke-color: var(--red-logo); }
.step__body { display: grid; gap: 1rem; max-width: 46ch; }
.step__body h3 { font-size: var(--step-3); }
@media (max-width: 860px) {
  .step { min-height: auto; padding-block: clamp(3rem, 12vw, 5rem); position: static; }
  .step__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- REALIZACJE: siatka asymetryczna z parallaxem -------------------------- */
.works {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.75rem);
}
.work { position: relative; display: grid; gap: 0.9rem; }
.work__frame { overflow: hidden; background: var(--paper-800); }
.work__frame img { width: 100%; height: 100%; object-fit: cover; }
.work h3 { font-size: var(--step-1); font-variation-settings: 'wdth' 104; }
.work p { font-size: 0.9rem; color: var(--graphite-300); max-width: 44ch; }
.work__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red-500);
}

.work--a { grid-column: 1 / span 7; }
.work--a .work__frame { aspect-ratio: 16 / 10; }
.work--b { grid-column: 9 / span 4; align-self: end; }
.work--b .work__frame { aspect-ratio: 3 / 4; }
.work--c { grid-column: 1 / span 4; }
.work--c .work__frame { aspect-ratio: 4 / 5; }
.work--d { grid-column: 6 / span 7; align-self: center; }
.work--d .work__frame { aspect-ratio: 4 / 3; }
@media (max-width: 800px) {
  .works { grid-template-columns: 1fr; }
  .work--a, .work--b, .work--c, .work--d { grid-column: 1 / -1; }
  .work__frame { aspect-ratio: 4 / 3 !important; }
}

/* --- PASEK LICZB ---------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-block: 1px solid var(--line-strong);
}
.stat { display: grid; gap: 0.4rem; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variation-settings: 'wdth' 112;
}
.stat__value span { color: var(--red-500); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding: 1.5rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.015em;
  color: var(--graphite-100);
  transition: color var(--dur-fast) ease;
}
.faq__q:hover { color: var(--red-500); }
.faq__icon {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-hop);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__q[aria-expanded='true'] .faq__icon::after { transform: rotate(0deg); }
.faq__a {
  overflow: hidden;
  height: 0;
}
.faq__a > div { padding-bottom: 1.75rem; }
.faq__a p { color: var(--graphite-300); max-width: 68ch; }

/* --- WYCENA: split ------------------------------------------------------- */
.quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .quote { grid-template-columns: 1fr; } }
.quote__aside { display: grid; gap: 1.5rem; align-content: start; }
.quote__panel {
  background: var(--paper-800);
  border: 1px solid var(--line);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Zamiast formularza: dwa kanały kontaktu, cała karta jest linkiem.
   E-mail otwiera się z szablonem pytań, więc wycena przychodzi kompletna. */
.quote__aside h2 { font-size: var(--step-3); }
.quote__needs { list-style: none; padding: 0; display: grid; gap: 0.7rem; counter-reset: need; max-width: 46ch; }
.quote__needs li { counter-increment: need; display: grid; grid-template-columns: 2.25rem 1fr; align-items: baseline; }
.quote__needs li::before {
  content: counter(need, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--red-500);
}
.reach { padding: 0; display: grid; }
.reach__item {
  display: grid; gap: 0.55rem; justify-items: start;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  transition: background var(--dur-fast) var(--ease-out-soft);
}
.reach__item + .reach__item { border-top: 1px solid var(--line); }
.reach__item:hover { background: var(--paper-50); }
.reach__label {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--graphite-400);
}
.reach__value {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2);
  letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.reach__value--mail { font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem); overflow-wrap: anywhere; }
.reach__note { color: var(--graphite-300); font-size: 0.95rem; max-width: 44ch; }
.reach__item .btn { margin-top: 0.85rem; }

/* --- Nagłówek sekcji ------------------------------------------------------ */
.sec-head { display: grid; gap: 1.1rem; max-width: 60rem; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
/* 52ch liczone od rozmiaru body łamało duże H2 na 5 wierszy; limit trzyma tylko akapit */
.sec-head .body-muted { max-width: 58ch; }
.sec-head--wide { max-width: none; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-500);
}

/* --- STATEMENT: nagłówek na pełną szerokość, fakty jako lista opisowa ----- */
.statement { border-top: 1px solid var(--line); }
.statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) { .statement__grid { grid-template-columns: 1fr; } }
.statement h2 { font-size: var(--step-3); }
.statement__body { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.statement__facts { display: grid; gap: 1px; background: var(--line); margin: 0; }
.statement__facts > div {
  background: var(--paper-900);
  padding: 1.5rem 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  border-top: 1px solid var(--line);
}
.statement__facts > div:first-child { border-top: 0; padding-top: 0; }
.statement__facts dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 104;
}
.statement__facts dd { margin: 0; color: var(--graphite-300); font-size: 0.95rem; }
@media (max-width: 620px) {
  .statement__facts > div { grid-template-columns: 1fr; }
}