@font-face {
  font-family: "Flaviotte";
  src: url("assets/fonts/flaviotte/Flaviotte-Regular.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist/Geist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/geist/Geist-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/geist/GeistMono-Regular.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #0d1014;
  --bg-soft: #131821;
  --text: rgba(244, 242, 238, 1);
  --lead: rgba(244, 242, 238, 0.8);
  --secondary: rgba(244, 242, 238, 0.62);
  --meta: rgba(244, 242, 238, 0.5);
  --line: rgba(255, 255, 255, 0.14);
  --accent: #c9aa72;
  --accent-soft: #e3cfa7;
  --error: #f3aaaa;
  --success: #96d6a3;

  --container: min(1240px, 92vw);
  --narrow: min(860px, 92vw);

  --h1: clamp(2.3rem, 5vw, 5.4rem);
  --h2: clamp(1.6rem, 2.7vw, 3rem);
  --h3: clamp(1.05rem, 1.4vw, 1.3rem);

  --s1: 0.5rem;
  --s2: 0.9rem;
  --s3: 1.3rem;
  --s4: 2rem;
  --s5: 3.5rem;
  --s6: 6rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  background:
    radial-gradient(circle at 15% 8%, #1a2130 0%, var(--bg) 45%),
    var(--bg);
}

img { display: block; max-width: 100%; height: auto; }
.container { width: var(--container); margin-inline: auto; }
.narrow { width: var(--narrow); }

h1, h2 {
  margin: 0 0 0.5em;
  font-family: "Flaviotte", Georgia, serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.01em;
}
h3 { margin: 0 0 0.35em; font-size: var(--h3); }
p { margin: 0 0 1em; color: var(--secondary); }

.lead { color: var(--lead); font-size: clamp(1.05rem, 1.5vw, 1.22rem); }

.meta {
  margin: 0 0 1rem;
  font-family: "Geist Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  color: var(--meta);
}

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  background: #fff;
  color: #111;
  padding: 8px 10px;
  border-radius: 8px;
  z-index: 9999;
}
.skip-link:focus { top: 10px; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Header base */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  padding: 0.85rem 0;
  transition: background 260ms ease, backdrop-filter 260ms ease, box-shadow 260ms ease;
}

/* HERO state: transparent */
.site-header.is-hero {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* SCROLLED state: visible panel */
.site-header.is-scrolled {
  background: linear-gradient(to bottom, rgba(8, 10, 13, 0.86), rgba(8, 10, 13, 0.5));
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}

/* link readability on hero */
.site-header.is-hero .nav a,
.site-header.is-hero .brand__name {
  color: rgba(244,242,238,0.95);
}

.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.brand__name { font-family: "Flaviotte", serif; font-size: 1.25rem; }
.brand__logo { max-width: 140px; height: auto;}

.nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.1rem;
  align-items: center;
}
.nav a { color: var(--lead); }
.nav a:hover, .nav a.active { color: var(--text); }

.nav-toggle {
  display: none;
  border: 0;
  background: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 5px 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.72rem 1.2rem;
  border: 1px solid transparent;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  font-weight: 500;
}
.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-soft));
  color: #1a1409;
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(201, 170, 114, 0.28); }
.btn--secondary, .btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--secondary:hover, .btn--ghost:hover { background: rgba(255, 255, 255, 0.06); }

/* Hero */
.hero {
  min-height: 100svh;
  position: relative;
  display: grid;
  align-items: end;
  overflow: clip;
}
.hero .container {
  width: min(1240px, 92vw);
}
.hero__media, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img { object-fit: cover; transform: scale(1.02); }
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 7, 9, 0.88) 12%, rgba(6, 7, 9, 0.24) 72%),
    radial-gradient(circle at 75% 20%, rgba(201, 170, 114, 0.24), transparent 52%);
}
/* .hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.02;
  background-image: radial-gradient(#fff 0.55px, transparent 0.55px);
  background-size: 3px 3px;
} */
.hero__content {
  max-width: 1000px;
  margin-left: clamp(5vw, 3vw, 48px); /* przesunięcie bardziej w lewo */
  padding-bottom: 10vh;
}
.hero__kicker {
  font-family: "Geist Mono", monospace;
  color: var(--meta);
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.hero h1 { font-size: var(--h1); }
.hero__lead { color: var(--lead); max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1rem; }

/* Sections */
.section {
  padding: var(--s6) 0;
  position: relative;
}
.section::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.section-head { margin-bottom: 2rem; }

/* ===== ABOUT — structured editorial layout ===== */
.about-shell {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.about-top {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: clamp(1.5rem, 3vw, 2.6rem);
  align-items: start;
}

.about-intro h2 {
  max-width: 17ch;
  margin-bottom: 0.55em;
}
.about-intro .lead {
  max-width: 44ch;
  margin: 0;
}

/* prawa kolumna: czysty info-rail */
.about-facts {
  padding-left: clamp(1rem, 2vw, 1.4rem);
  border-left: 1px solid var(--line);
}

.about-dl {
  margin: 0;
}
.about-row {
  display: grid;
  gap: 0.35rem;
  padding: 0.15rem 0 0.95rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.about-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.about-dl dt {
  margin: 0;
  font-weight: 600;
  color: var(--text);
  font-size: 0.98rem;
}
.about-dl dd {
  margin: 0;
  color: var(--secondary);
  max-width: 42ch;
  line-height: 1.5;
}

/* dół: filary jako osobny logiczny moduł */
.about-bottom {
  max-width: 920px;
  padding-top: 0.35rem;
}
.about-bottom h3 {
  margin-bottom: 1rem;
  font-size: 1.15rem;
}

.pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.pillars::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(227,207,167,0.55), rgba(255,255,255,0.08));
}
.pillars li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.pillars li:last-child {
  margin-bottom: 0;
}
.pillars span {
  font-family: "Geist Mono", ui-monospace, monospace;
  color: var(--accent-soft);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  margin-top: 0.15rem;
}
.pillars p {
  margin: 0;
  color: var(--secondary);
  max-width: 62ch;
}

/* responsive: jeden pion, ale nadal logiczny */
@media (max-width: 980px) {
  .about-top {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-facts {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 0.9rem;
  }

  .about-intro h2 {
    max-width: 20ch;
  }
}

/* ===== SERVICES: wider + premium accordion ===== */
.section--services .container {
  width: var(--container); /* pełna szerokość jak reszta */
}

.services-head {
  margin-bottom: 1.4rem;
}

.section--services .accordion {
  width: 100%;
  border-top: 1px solid var(--line);
}

.section--services .acc-item {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  position: relative;
}

.section--services .acc-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 1.05rem 0.2rem;
  display: grid;
  grid-template-columns: 56px 1fr 26px;
  align-items: center;
  gap: 0.8rem;
  text-align: left;
  font: inherit;
}

.acc-index {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--meta);
}

.acc-title {
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  font-weight: 600;
  color: rgba(244,242,238,0.92);
  transition: color 180ms ease, transform 180ms ease;
}

.section--services .acc-trigger:hover .acc-title {
  color: #fff;
  transform: translateX(2px);
}

.section--services .acc-trigger i {
  width: 11px;
  height: 11px;
  border-right: 1.5px solid rgba(244,242,238,0.72);
  border-bottom: 1.5px solid rgba(244,242,238,0.72);
  transform: rotate(45deg);
  transition: transform 180ms ease, border-color 180ms ease;
  justify-self: end;
}

.section--services .acc-trigger[aria-expanded="true"] i {
  transform: rotate(225deg);
  border-color: var(--accent-soft);
}

.section--services .acc-trigger[aria-expanded="true"] .acc-index {
  color: var(--accent-soft);
}

.section--services .acc-trigger[aria-expanded="true"] .acc-title {
  color: #fff;
}

.section--services .acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}

.section--services .acc-panel > p {
  overflow: hidden;
  margin: 0;
  padding: 0 0 0 56px;
  max-width: 72ch;
  color: var(--secondary);
  line-height: 1.55;
}

.section--services .acc-panel.is-open {
  grid-template-rows: 1fr;
  padding-bottom: 1rem;
}

/* subtelny active glow */
.section--services .acc-item:has(.acc-trigger[aria-expanded="true"])::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(227,207,167,0.65), rgba(227,207,167,0));
}

/* mobile */
@media (max-width: 760px) {
  .section--services .acc-trigger {
    grid-template-columns: 44px 1fr 22px;
    padding: 0.9rem 0;
  }

  .section--services .acc-panel > p {
    padding-left: 44px;
  }
}

/* Masonry cases */
.masonry {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.25fr 1fr;
  grid-template-areas:
    "featured side1"
    "featured side2";
}
.case {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}
.case img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 10;
}
.case--featured { grid-area: featured; min-height: 540px; }
.masonry .case:nth-child(2) { grid-area: side1; }
.masonry .case:nth-child(3) { grid-area: side2; }

.case__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.1rem;
  background: linear-gradient(to top, rgba(8, 9, 12, 0.9), rgba(8, 9, 12, 0.08));
  transform: translateY(8px);
  opacity: 0.92;
  transition: transform 180ms ease, opacity 180ms ease;
}
.case:hover .case__overlay {
  transform: translateY(0);
  opacity: 1;
}
.case__meta {
  margin: 0 0 0.45rem;
  font-family: "Geist Mono", monospace;
  color: var(--meta);
  font-size: 0.8rem;
}

/* ===== PROCESS TIMELINE — aligned ===== */
.timeline--desktop {
  --dot-size: 10px;
  --rail-y: 22px;

  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(0.8rem, 1.8vw, 1.4rem);
  position: relative;
  align-items: start;
}

/* oś */
.timeline--desktop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--rail-y) + (var(--dot-size) / 2));
  height: 1px;
  background: rgba(255,255,255,0.16);
}

/* każdy krok */
.timeline--desktop li {
  position: relative;
  padding-top: calc(var(--rail-y) + 18px); /* miejsce na kropkę + numer */
  min-height: 170px; /* wyrównuje kolumny */
}

/* kropka */
.timeline--desktop li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--rail-y);
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: rgba(232, 236, 240, 0.88);
  box-shadow: 0 0 0 2px rgba(13,16,20,0.95);
  z-index: 1;
}

.timeline--desktop li.is-active::before {
  background: var(--accent-soft);
}

/* numer */
.timeline--desktop li > span {
  position: absolute;
  top: calc(var(--rail-y) + 14px);
  left: 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--accent-soft);
}

/* typografia */
.timeline--desktop li h3 {
  margin: 0.9rem 0 0.35rem;
  line-height: 1.2;
}

.timeline--desktop li p {
  margin: 0;
  max-width: 30ch;
  color: var(--secondary);
  line-height: 1.45;
}

/* ===== TEAM: aligned + premium ===== */
.section--team .container {
  width: var(--container);
}

.team-split {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 520px);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: stretch; /* wyrównanie górnej i dolnej krawędzi */
}

.team-copy {
  padding-top: 0; /* top równo ze zdjęciem */
  max-width: 56ch;
  padding-bottom: 0;
}

.team-copy h2 {
  max-width: 18ch;
  margin-bottom: 0.45em;
}

.team-copy .lead {
  max-width: 44ch;
  margin-bottom: 0.8rem;
}

/* ciekawy, ale subtelny detal */
.team-highlights {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.team-highlights li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.65rem;
  color: var(--secondary);
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.team-highlights span {
  font-family: "Geist Mono", ui-monospace, monospace;
  color: var(--accent-soft);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  margin-top: 0.1rem;
}

/* naprawiony crop zdjęcia */
.team-photo {
  margin: 0;
  /* width: 55%;
  height: 85%; */
  min-height: 0;
  overflow: hidden;
  border-radius: 2px;
  position: relative;
  background: #0d1014;
  box-shadow: 0 14px 40px rgba(0,0,0,0.32);
  align-self: stretch;
}

.team-photo img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center 0%;
  transform: scale(1.03); 
}

/* delikatny editorial wash */
.team-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,9,12,0.22), transparent 45%);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .team-split {
    grid-template-columns: 1fr;
  }

  .team-photo {
    max-width: 560px;
  }
}

/* TEAM: wyrównanie zdjęcia do prawej krawędzi kontenera (oś z Contact) */
.section--team .container.team-split{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 420px !important; /* stała szerokość kolumny foto */
  column-gap: clamp(1.2rem, 2.4vw, 2rem) !important;
  align-items: start !important;
}

.section--team .team-copy{
  max-width: 56ch !important;
}

.section--team .team-photo{
  width: 420px !important;
  max-width: 420px !important;
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  margin: 0 0 0 auto !important;   /* dopycha do prawej */
  justify-self: end !important;     /* dopycha do prawej */
  align-self: start !important;
  overflow: hidden !important;
}

.section--team .team-photo img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 0% !important;
}

/* mobile */
@media (max-width: 1024px){
  .section--team .container.team-split{
    grid-template-columns: 1fr !important;
  }

  .section--team .team-photo{
    width: min(420px, 100%) !important;
    max-width: 420px !important;
    margin-top: 1rem !important;
    margin-left: 0 !important;
    justify-self: start !important;
  }
}

/* TEAM photo - smaller */
.section--team .container.team-split{
  grid-template-columns: minmax(0, 1fr) 320px !important; /* było 420px */
}

.section--team .team-photo{
  width: 320px !important;
  max-width: 320px !important;
}

/* Contact (lekki, nie box-heavy) */
.contact-form {
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.form-row { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; }
label { color: var(--text); font-weight: 500; }
input, textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.75rem;
}
.error { min-height: 1em; color: var(--error); font-size: 0.84rem; }
.form-note { margin-top: 0.8rem; color: var(--success); }
.site-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
/* FIX: contact section height + background visibility */
/* CONTACT — stable background (bez pseudo-elementów) */
.section--contact {
  position: relative;
  z-index: 0;
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  min-height: 70svh;

  /* warstwa: overlay + zdjęcie */
  background-image:
    linear-gradient(to bottom, rgba(13,16,20,0.58), rgba(13,16,20,0.50)),
    radial-gradient(circle at 75% 20%, rgba(201,170,114,0.10), transparent 46%),
    url("./assets/images/contact/contact-architecture.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* wyłącz 1px separator tylko dla contact (to ten „pasek”) */
.section--contact::before {
  display: none !important;
}

/* content nad tłem */
.section--contact .container.narrow {
  position: relative;
  z-index: 1;
}

/* opcjonalnie: lepsza czytelność formularza */
.section--contact .contact-form {
  background: rgba(10, 13, 18, 0.32);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
  .about-split { grid-template-columns: 1fr; }
  .masonry {
    grid-template-columns: 1fr;
    grid-template-areas: "featured" "side1" "side2";
  }
  .case--featured { min-height: 420px; }
  .timeline--desktop { display: none; }
  .timeline--mobile {
    display: grid;
    gap: 1rem;
  }
  .timeline--mobile li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 0.8rem;
    position: relative;
  }
  .timeline--mobile li::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 1.4rem;
    bottom: -0.85rem;
    width: 1px;
    background: var(--line);
  }
  .timeline--mobile li:last-child::after { display: none; }
  .team-split { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    right: 4%;
    width: min(320px, 90vw);
    border: 1px solid var(--line);
    background: rgba(10, 13, 18, 0.96);
    padding: 0.8rem;
    display: none;
  }
  .nav.open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; }

  .hero__actions { flex-direction: column; align-items: start; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== HEADER FINAL (single source of truth) ===== */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  padding: 0.85rem 0;
  transition: background .26s ease, backdrop-filter .26s ease, box-shadow .26s ease;
}

.nav-wrap{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
}

.nav{
  justify-self: end;
}

.nav__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.1rem;
  align-items: center;
}

/* HERO */
.site-header.is-hero{
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.site-header.is-hero .brand__name,
.site-header.is-hero .nav a{
  color: rgba(255,255,255,.98);
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

/* readability capsule only for links */
.site-header.is-hero .nav__list{
  padding: .28rem .55rem;
  padding-left: 1rem;
  border-radius: 999px;
  background: rgba(8,10,13,.28);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(2px);
}

/* SCROLLED */
.site-header.is-scrolled{
  background: linear-gradient(to bottom, rgba(8,10,13,.86), rgba(8,10,13,.50));
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
}

.site-header.is-scrolled .brand__name,
.site-header.is-scrolled .nav a{
  color: var(--lead);
  text-shadow: none;
}

/* mobile */
@media (max-width: 760px){
  .nav-toggle{ display:block; }

  .nav{
    position: absolute;
    top: 100%;
    right: 4%;
    width: min(320px,90vw);
    border: 1px solid var(--line);
    background: rgba(10,13,18,.96);
    padding: .8rem;
    display: none;
  }
  .nav.open{ display:block; }
  .nav__list{ flex-direction: column; align-items: stretch; }

  .brand{ margin-left: 0; } /* na mobile nie przesuwamy brandu */
}

/* DEBUG/FIX: hero header brand alignment */
.site-header.is-hero .container.nav-wrap{
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.site-header.is-hero .nav-wrap{
  position: relative;
  min-height: 40px;
}

.site-header.is-hero .brand{
  position: absolute;
  left: clamp(5vw, 3vw, 48px) !important; /* oś hero contentu */
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
}

.site-header.is-hero .nav{
  position: absolute;
  right: clamp(2rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-50%);
}

/* ===== HERO NAV — text only, elegant readability ===== */
.site-header.is-hero .nav__list{
  background: transparent !important;
  border: 0 !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* spójna czytelność brand + linki */
.site-header.is-hero .brand__name,
.site-header.is-hero .nav a{
  color: rgba(255,255,255,0.96) !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.35);
}

/* delikatna typograficzna poprawa na hero */
.site-header.is-hero .nav a{
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* hover/active bez "glow disco" */
.site-header.is-hero .nav a:hover,
.site-header.is-hero .nav a.active{
  color: #fff !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,0.62),
    0 8px 20px rgba(0,0,0,0.42);
}

/* Contact jako text-only w hero (wyłącza styl przycisku) */
.site-header.is-hero .nav .btn--ghost{
  background: transparent !important;
  border-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: inherit;
  min-height: auto;
}

/* po przejściu w is-scrolled wraca normalny button Contact */
.site-header.is-scrolled .nav .btn--ghost{
  background: transparent;
  border-color: var(--line);
  padding: 0.72rem 1.2rem;
  border-radius: 999px;
}

/* ===== Custom Scrollbar ===== */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(201,170,114,0.75) rgba(255,255,255,0.08);
}

/* Chromium / WebKit */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.03)
  );
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    rgba(201,170,114,0.88),
    rgba(227,207,167,0.78)
  );
  border-radius: 999px;
  border: 2px solid rgba(13,16,20,0.85); /* daje "floating thumb" */
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    rgba(227,207,167,0.96),
    rgba(201,170,114,0.92)
  );
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ===== Motion tokens ===== */
:root{
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-smooth: cubic-bezier(.2,.8,.2,1);
}

/* Nav links micro-hover */
.nav a{
  position: relative;
  transition: color .22s var(--ease-out), transform .22s var(--ease-out);
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  opacity:.8;
  transition: transform .28s var(--ease-smooth);
}
.nav a:hover{
  transform: translateY(-1px);
}
.nav a:hover::after,
.nav a.active::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* Brand subtle float on hover */
.brand__name{
  transition: transform .28s var(--ease-smooth), text-shadow .28s var(--ease-smooth);
}
.brand:hover .brand__name{
  transform: translateY(-1px);
  text-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* Buttons: premium shine */
.btn{
  position: relative;
  overflow: hidden;
  transition: transform .24s var(--ease-out), box-shadow .24s var(--ease-out), border-color .24s var(--ease-out);
}
.btn::before{
  content:"";
  position:absolute;
  inset:-120% auto -120% -40%;
  width:32%;
  transform: rotate(16deg) translateX(-220%);
  background: linear-gradient(to right, transparent, rgba(255,255,255,.35), transparent);
  transition: transform .7s var(--ease-smooth);
  pointer-events:none;
}
.btn:hover::before{
  transform: rotate(16deg) translateX(520%);
}
.btn:hover{
  transform: translateY(-2px);
}

/* Hero content stagger */
.hero__content > *{
  animation: heroRise .7s var(--ease-out) both;
}
.hero__content > *:nth-child(1){ animation-delay: .05s; }
.hero__content > *:nth-child(2){ animation-delay: .14s; }
.hero__content > *:nth-child(3){ animation-delay: .23s; }

@keyframes heroRise{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Case cards interactive */
.case{
  transition: transform .28s var(--ease-smooth), box-shadow .28s var(--ease-smooth), filter .28s var(--ease-smooth);
  transform-style: preserve-3d;
  will-change: transform;
}
.case:hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.case img{
  transition: transform .5s var(--ease-smooth), filter .4s var(--ease-smooth);
}
.case:hover img{
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.03);
}
.case__overlay{
  transition: transform .26s var(--ease-smooth), opacity .26s var(--ease-smooth);
}
.case:hover .case__overlay{
  transform: translateY(0);
}

/* About facts row hover */
.about-row{
  transition: border-color .24s var(--ease-out), transform .24s var(--ease-out), background .24s var(--ease-out);
}
.about-row:hover{
  border-color: rgba(227,207,167,.38);
  transform: translateX(3px);
  background: linear-gradient(90deg, rgba(227,207,167,.07), transparent 55%);
}

/* Timeline hover polish */
.timeline--desktop li{
  transition: transform .24s var(--ease-out);
}
.timeline--desktop li:hover{
  transform: translateY(-2px);
}

/* Team photo subtle life */
.team-photo img{
  transition: transform .7s var(--ease-smooth), filter .5s var(--ease-smooth);
}
.team-photo:hover img{
  transform: scale(1.06) translateY(-2px);
  filter: contrast(1.05) saturate(1.04);
}

/* Form controls nicer hover/focus */
input, textarea{
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
input:hover, textarea:hover{
  border-color: rgba(255,255,255,.26);
}
input:focus, textarea:focus{
  border-color: rgba(227,207,167,.62);
  box-shadow: 0 0 0 3px rgba(201,170,114,.18);
  background: rgba(255,255,255,.05);
  transform: translateY(-1px);
}

/* Footer links */
.footer-links a{
  position: relative;
  color: var(--secondary);
  transition: color .2s var(--ease-out);
}
.footer-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin:right;
  transition: transform .25s var(--ease-smooth);
}
.footer-links a:hover{
  color: var(--text);
}
.footer-links a:hover::after{
  transform: scaleX(1);
  transform-origin:left;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before{ display:none; }
  .hero__content > *{ animation: none !important; }
}

.hero__actions .btn{
  transform: none !important;
}

/* ===== MOBILE HEADER FIX: logo left, hamburger right ===== */
@media (max-width: 760px){
  .site-header .container.nav-wrap,
  .site-header.is-hero .container.nav-wrap{
    width: var(--container) !important;
    max-width: var(--container) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;

    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    min-height: 56px !important;
  }

  /* reset psujących absolutów z hero */
  .site-header.is-hero .brand,
  .site-header .brand{
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    justify-self: start !important;
    max-width: calc(100% - 56px) !important;
    overflow: hidden !important;
  }

  .site-header.is-hero .nav,
  .site-header .nav{
    position: absolute !important;   /* dropdown pod headerem */
    top: calc(100% + 8px) !important;
    right: 4% !important;
    left: auto !important;
    transform: none !important;
    width: min(320px, 92vw) !important;
    display: none;
    z-index: 60 !important;
  }

  .site-header .nav.open{ display: block !important; }

  .site-header .nav-toggle{
    display: inline-grid !important;
    place-items: center !important;
    justify-self: end !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 10px !important;
    background: rgba(10,13,18,.55) !important;
    backdrop-filter: blur(4px);
    z-index: 70 !important;
  }

  .site-header .nav-toggle span{
    width: 18px !important;
    height: 2px !important;
    margin: 2px 0 !important;
  }

  .brand__logo{
    max-width: clamp(120px, 34vw, 160px) !important;
    height: auto !important;
  }
}

/* ===== Mobile hamburger: clean / no background ===== */
@media (max-width: 760px){
  .site-header .nav-toggle{
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 6px !important;

    width: 32px !important;
    height: 24px !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .site-header .nav-toggle span{
    display: block !important;
    height: 2px !important;
    margin: 0 !important;
    background: rgba(255,255,255,.95) !important;
    border-radius: 999px !important;
    transition: transform .24s ease, opacity .2s ease, width .24s ease !important;
    transform-origin: right center !important;
  }

  /* subtelna asymetria premium */
  .site-header .nav-toggle span:nth-child(1){ width: 24px !important; }
  .site-header .nav-toggle span:nth-child(2){ width: 16px !important; }

  .site-header .nav-toggle:hover span:nth-child(2){
    width: 24px !important;
  }

  /* stan open -> X */
  .site-header .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform: translateY(4px) rotate(45deg) !important;
    width: 24px !important;
  }
  .site-header .nav-toggle[aria-expanded="true"] span:nth-child(2){
    transform: translateY(-4px) rotate(-45deg) !important;
    width: 24px !important;
  }

  /* focus accessibility, bez brzydkiego boxa */
  .site-header .nav-toggle:focus-visible{
    outline: 2px solid rgba(227,207,167,.9) !important;
    outline-offset: 6px !important;
    border-radius: 2px !important;
  }
}

/* ===== TEAM MOBILE FIX: tekst nad zdjęciem ===== */
@media (max-width: 900px){
  .section--team .container.team-split,
  .section--team .team-split{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "copy"
      "photo" !important;
    gap: 1rem !important;
    align-items: start !important;
  }

  .section--team .team-copy{
    grid-area: copy !important;
    max-width: 100% !important;
    order: 1 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .section--team .team-photo{
    grid-area: photo !important;
    order: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    margin: .5rem 0 0 0 !important;
    width: min(100%, 420px) !important;
    max-width: 420px !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }

  .section--team .team-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 8% !important;
  }
}

/* ===== PROCESS HARD FIX (mobile) ===== */
@media (max-width: 1024px){
  /* nagłówek sekcji ma być zawsze widoczny */
  .section--process .section-head,
  .section--process .section-head.reveal,
  .section--process .section-head .meta,
  .section--process #process-title{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
  }

  .section--process{
    padding-top: 5.5rem !important;
    padding-bottom: 3rem !important;
  }

  /* ukryj desktop timeline (jak było) */
  .section--process .timeline--desktop{
    display: none !important;
  }

  /* POKAŻ mobile timeline i nadaj jej styl */
  .section--process .timeline--mobile{
    display: grid !important;
    gap: 1rem !important;
    list-style: none !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
  }

  .section--process .timeline--mobile li{
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    gap: .7rem !important;
    align-items: start !important;
  }

  .section--process .timeline--mobile li span{
    font-family: "Geist Mono", ui-monospace, monospace !important;
    color: var(--accent-soft) !important;
    font-size: .78rem !important;
    letter-spacing: .06em !important;
    margin-top: .25rem !important;
  }

  .section--process .timeline--mobile li h3{
    margin: 0 0 .25rem !important;
  }

  .section--process .timeline--mobile li p{
    margin: 0 !important;
    color: var(--secondary) !important;
  }
}

/* domyślnie: tylko desktop */
.timeline--mobile{
  display: none;
}

/* mobile/tablet: ukryj desktop, pokaż mobile */
@media (max-width: 1024px){
  .timeline--desktop{ display: none !important; }
  .timeline--mobile{ display: grid !important; }
}

/* ===== PROCESS TIMELINE MOBILE — PERFECT CENTER LINE ===== */
@media (max-width: 1024px){
  .section--process .timeline--mobile{
    --col-num: 48px;              /* szerokość kolumny numerów */
    --axis-x: calc(var(--col-num) / 2); /* środek kolumny = 24px */
    --item-gap: 0.8rem;

    position: relative !important;
    display: grid !important;
    gap: 1rem !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* jedna pionowa oś idealnie w środku numerów */
  .section--process .timeline--mobile::before{
    content: "";
    position: absolute;
    left: var(--axis-x) !important;
    top: 0.9rem !important;
    bottom: 0.9rem !important;
    width: 1px !important;
    background: rgba(255,255,255,0.18) !important;
    transform: translateX(-0.5px); /* optyczna ostrość */
    pointer-events: none;
  }

  .section--process .timeline--mobile li{
    position: relative !important;
    display: grid !important;
    grid-template-columns: var(--col-num) 1fr !important;
    gap: var(--item-gap) !important;
    align-items: start !important;
  }

  /* wyłącz wszystkie stare segmenty linii */
  .section--process .timeline--mobile li::before,
  .section--process .timeline--mobile li::after{
    content: none !important;
    display: none !important;
  }

  .section--process .timeline--mobile li > span{
    justify-self: center !important;  /* numer idealnie na osi */
    text-align: center !important;
    min-width: 2ch;
    font-family: "Geist Mono", ui-monospace, monospace !important;
    color: var(--accent-soft) !important;
    font-size: .78rem !important;
    letter-spacing: .06em !important;
    line-height: 1.2 !important;
    margin-top: .1rem !important;
  }
}

/* ===== FOOTER DISCLAIMER + LINKS ===== */
.footer-bottom{
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
}

.footer-bottom__copy{
  margin-left: auto;
  color: var(--meta);
  font-size: 0.9rem;
  white-space: nowrap;
}

.footer-bottom__note{
  margin: 0;
  color: var(--secondary);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 90ch;
}

.footer-bottom__cta{
  margin: 0;
  color: var(--secondary);
  font-size: 0.9rem;
  line-height: 1.45;
  max-width: 90ch;

  display: block;
  border-left: 1px solid rgba(255,255,255,0.22); /* mocniej widoczna */
  padding-left: 0.9rem;                            /* KLUCZ */
  margin-left: 0.1rem;                             /* lekki oddech od krawędzi */
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}


.footer-bottom__links{
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--lead);
  font-size: 0.9rem;
}

.footer-bottom__links a{
  color: var(--accent-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(227,207,167,0.45);
}

.footer-bottom__links a:hover{
  color: #fff;
  text-decoration-color: rgba(255,255,255,0.8);
}

@media (max-width: 760px){
  .footer-bottom__copy{
    margin-left: 0;
    width: 100%;
    text-align: left; /* możesz zmienić na right jeśli wolisz */
    margin-top: 0.35rem;
  }
}