/* =========================================================================
   P.T.U.H. Adam Grys — arkusz główny
   1. tokeny  2. reset  3. typografia  4. layout  5. ruch  6. nawigacja
   7. komponenty  8. formularz  9. stopka  10. kursor
   ========================================================================= */

/* ---------- 1. TOKENY --------------------------------------------------- */

@property --sweep { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  color-scheme: dark light;

  --bg:        #100E0C;
  --bg-2:      #17140F;
  --surface:   #1C1813;
  --surface-2: #24201A;
  --line:      rgb(240 232 218 / .13);
  --line-soft: rgb(240 232 218 / .07);
  --fg:        #F1E9DB;
  --fg-dim:    #A29787;
  --fg-faint:  #6B6357;
  --accent:    #D8944A;
  --accent-ink:#100E0C;
  --moss:      #8AA07A;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* skala płynna — bez skoków między breakpointami */
  --t-xs:  clamp(.75rem,  .72rem + .12vw,  .82rem);
  --t-sm:  clamp(.85rem,  .82rem + .16vw,  .95rem);
  --t-base:clamp(1rem,    .96rem + .22vw,  1.15rem);
  --t-md:  clamp(1.15rem, 1.06rem + .45vw, 1.45rem);
  --t-lg:  clamp(1.5rem,  1.25rem + 1.2vw, 2.4rem);
  --t-xl:  clamp(2.1rem,  1.5rem + 3vw,    4rem);
  --t-2xl: clamp(2.8rem,  1.6rem + 5.6vw,  6.5rem);
  --t-3xl: clamp(3.4rem,  1.4rem + 9vw,    10rem);

  --gutter:  clamp(1.25rem, 4vw, 4.5rem);
  --wrap:    1440px;
  --sec-y:   clamp(4.5rem, 10vw, 11rem);
  --r-sm: 6px;  --r-md: 14px;  --r-lg: 26px;  --r-xl: 40px;

  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-io:   cubic-bezier(.65, 0, .35, 1);
  --head-h:    clamp(64px, 8vw, 84px);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #F6F2EA;
  --bg-2:      #EFE9DD;
  --surface:   #FFFFFF;
  --surface-2: #F2ECE0;
  --line:      rgb(24 19 14 / .14);
  --line-soft: rgb(24 19 14 / .07);
  --fg:        #171310;
  --fg-dim:    #59503F;
  --fg-faint:  #8C8272;
  --accent:    #A55E17;
  --accent-ink:#FFF8EF;
  --moss:      #5C7049;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:        #F6F2EA;
    --bg-2:      #EFE9DD;
    --surface:   #FFFFFF;
    --surface-2: #F2ECE0;
    --line:      rgb(24 19 14 / .14);
    --line-soft: rgb(24 19 14 / .07);
    --fg:        #171310;
    --fg-dim:    #59503F;
    --fg-faint:  #8C8272;
    --accent:    #A55E17;
    --accent-ink:#FFF8EF;
    --moss:      #5C7049;
  }
}

/* ---------- 2. RESET ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
  overflow-x: clip; /* siatka bezpieczeństwa — element wystający w bok nie przesuwa strony */
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 350;
  line-height: 1.6;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; top: .6rem; left: .6rem; z-index: 999;
  padding: .7rem 1.1rem; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--t-sm); font-weight: 600;
  transform: translateY(-160%);
  transition: transform .25s var(--ease);
}
.skip:focus { transform: none; }

/* subtelne ziarno — zdejmuje cyfrową płaskość dużych płaszczyzn */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. TYPOGRAFIA ---------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.03em;
  text-wrap: balance;
}

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

p { text-wrap: pretty; }

.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim);
}
.kicker::before {
  content: ""; inline-size: clamp(1.5rem, 4vw, 3rem); block-size: 1px;
  background: currentColor; opacity: .5;
}

.lead { font-size: var(--t-md); line-height: 1.5; color: var(--fg-dim); max-inline-size: 62ch; }

.prose { color: var(--fg-dim); max-inline-size: 68ch; }
.prose p + p { margin-block-start: 1.15em; }
.prose strong { color: var(--fg); font-weight: 600; }

.num { font-family: var(--display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.04em; }

.accent { color: var(--accent); }

/* ---------- 4. LAYOUT --------------------------------------------------- */

.wrap { inline-size: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.section--alt { background: var(--bg-2); }

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.rule { block-size: 1px; border: 0; background: linear-gradient(90deg, var(--line), transparent 70%); }

.sec-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  align-items: end;
  margin-block-end: clamp(2.5rem, 5vw, 5rem);
}
.sec-head__idx { grid-column: 1 / -1; font-size: var(--t-xs); font-weight: 500; letter-spacing: .2em; color: var(--fg-faint); }
.sec-head__title { grid-column: 1 / -1; }
.sec-head__text  { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .sec-head__idx   { grid-column: 1 / 2; padding-block-end: .55rem; }
  .sec-head__title { grid-column: 2 / 8; }
  .sec-head__text  { grid-column: 8 / 13; padding-block-end: .55rem; }
}

/* ---------- 5. RUCH ----------------------------------------------------- */

/* Przejścia między stronami — natywne, bez routera i bez frameworka. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .26s var(--ease-io) both; }
::view-transition-new(root) { animation: vt-in  .44s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(16px); } }

/* Wejścia elementów: napędem są scroll-driven animations (czysty CSS).
   Gdy przeglądarka ich nie zna, przejmuje IntersectionObserver (klasa .is-in). */
[data-reveal] { --rv-y: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--rv-y), 0);
    transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 80ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  @supports (animation-timeline: view()) {
    .js.has-sda [data-reveal] {
      opacity: 1; transform: none; transition: none;
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 24%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, var(--rv-y), 0); }
  to   { opacity: 1; transform: none; }
}

/* Nagłówek rozbity na słowa — wjeżdżają kaskadą spod maski. */
.split .w { display: inline-block; clip-path: inset(-.3em -.12em -.22em); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-split] .w {
    opacity: 0;
    transform: translateY(.85em) rotate(1.5deg);
    transition: opacity .8s var(--ease-out) calc(var(--i) * 55ms),
                transform .95s var(--ease-out) calc(var(--i) * 55ms);
  }
  .js [data-split].is-in .w { opacity: 1; transform: none; }
}

/* Paralaksa napędzana pozycją scrolla. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .parallax > img, .parallax > picture {
      animation: par linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
@keyframes par {
  from { transform: translate3d(0, calc(var(--par, 8) * -1%), 0) scale(1.16); }
  to   { transform: translate3d(0, calc(var(--par, 8) * 1%), 0)  scale(1.16); }
}

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

/* ---------- 6. NAWIGACJA ------------------------------------------------ */

.site-head {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  block-size: var(--head-h);
  border-block-end: 1px solid transparent;
  transition: transform .5s var(--ease), background-color .4s var(--ease),
              border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
/* Stan „top": nagłówek zostaje przezroczysty, ale nie leży na gołym zdjęciu —
   miękka poświata od górnej krawędzi daje napisom tło. Kolor bierzemy z --bg,
   więc w ciemnym motywie przyciemnia, a w jasnym rozjaśnia. */
.site-head::before {
  content: "";
  position: absolute; inset-inline: 0; inset-block-start: 0;
  block-size: 230%; z-index: -1; pointer-events: none;
  /* Siła poświaty to jedna liczba do regulacji — 72% czyta się jako delikatne
     przyciemnienie górnej krawędzi, nie jak pełny pasek. */
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--bg) 72%, transparent),
    color-mix(in oklab, var(--bg) 34%, transparent) 46%,
    transparent);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.site-head[data-state="top"]::before { opacity: 1; }

/* Nad zdjęciem tekst musi być jaśniejszy niż w stanie z solidnym tłem. */
.site-head[data-state="top"] .site-head__bar {
  text-shadow: 0 1px 14px color-mix(in oklab, var(--bg) 85%, transparent);
}
.site-head[data-state="top"] .nav__link { color: color-mix(in oklab, var(--fg) 94%, transparent); }
.site-head[data-state="top"] .brand__sub { color: color-mix(in oklab, var(--fg) 66%, transparent); }
.site-head[data-state="top"] .head-phone,
.site-head[data-state="top"] .theme-btn,
.site-head[data-state="top"] .burger { border-color: color-mix(in oklab, var(--fg) 34%, transparent); }

.site-head[data-state="scrolled"] {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  border-block-end-color: var(--line-soft);
}
.site-head[data-state="hidden"] {
  transform: translateY(-102%);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
}

.site-head__bar {
  inline-size: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto; block-size: 100%;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}

.brand { display: flex; align-items: center; gap: .75rem; margin-inline-end: auto; }
.brand__mark { inline-size: clamp(30px, 4vw, 38px); color: var(--accent); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .brand:hover .brand__mark { animation: ringspin 1.2s var(--ease); }
}
@keyframes ringspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.brand__text { display: grid; line-height: 1.05; }
.brand__name { font-family: var(--display); font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -.02em; }
.brand__sub  { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
@media (max-width: 480px) { .brand__sub { display: none; } }

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: block; } }

.nav__list { display: flex; align-items: center; gap: clamp(.5rem, 1.6vw, 1.75rem); }
.nav__item { position: relative; }

.nav__link {
  display: block; padding: .55rem .2rem;
  font-size: var(--t-sm); font-weight: 450; color: var(--fg-dim);
  transition: color .3s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--fg); }

.nav__label { position: relative; display: inline-block; }
.nav__label::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -3px;
  block-size: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover .nav__label::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active .nav__label::after { transform: scaleX(1); }

.mega {
  position: absolute; inset-block-start: calc(100% + .55rem); inset-inline-start: 50%;
  inline-size: min(46rem, 76vw); padding: .5rem;
  background: color-mix(in oklab, var(--surface) 94%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .6);
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-10px) scale(.985);
  transition: opacity .35s var(--ease), transform .45s var(--ease), visibility .35s;
}
.nav__item.has-mega:hover .mega,
.nav__item.has-mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: translateX(-50%);
}
.mega__inner { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }

.mega__card {
  position: relative; display: grid; gap: .3rem;
  padding: 1.35rem 1.4rem 1.5rem; border-radius: var(--r-md);
  transition: background-color .35s var(--ease);
}
.mega__card:hover { background: var(--surface-2); }
.mega__title { font-family: var(--display); font-size: 1.25rem; }
.mega__desc  { font-size: var(--t-xs); color: var(--fg-dim); line-height: 1.5; }
.mega__arrow {
  position: absolute; inset-block-start: 1.35rem; inset-inline-end: 1.4rem;
  color: var(--accent); opacity: 0; transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.mega__card:hover .mega__arrow { opacity: 1; transform: none; }

.site-head__actions { display: flex; align-items: center; gap: .5rem; }

.head-phone {
  display: none; align-items: center; gap: .55rem;
  padding: .55rem 1.05rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-sm); font-variant-numeric: tabular-nums;
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
@media (min-width: 760px) { .head-phone { display: inline-flex; } }
.head-phone:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
.head-phone__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--moss); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .head-phone__dot { animation: pulse 2.8s var(--ease-io) infinite; }
}
@keyframes pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--moss) 55%, transparent); }
  35% { box-shadow: 0 0 0 7px transparent; }
}

.theme-btn, .burger {
  display: grid; place-items: center;
  inline-size: 42px; block-size: 42px;
  border: 1px solid var(--line); border-radius: 50%;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.theme-btn:hover, .burger:hover { border-color: var(--accent); }

.theme-btn__icon {
  inline-size: 15px; block-size: 15px; border-radius: 50%; background: var(--fg);
  box-shadow: inset -4px -3px 0 0 var(--bg);
  transition: box-shadow .5s var(--ease), transform .6s var(--ease);
}
:root[data-theme="light"] .theme-btn__icon { box-shadow: inset 0 0 0 0 var(--bg); transform: rotate(180deg); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-btn__icon { box-shadow: inset 0 0 0 0 var(--bg); transform: rotate(180deg); }
  :root[data-theme="dark"] .theme-btn__icon { box-shadow: inset -4px -3px 0 0 var(--bg); transform: none; }
}

@media (min-width: 1000px) { .burger { display: none; } }
.burger__box { position: relative; inline-size: 17px; block-size: 11px; }
.burger__box i {
  position: absolute; inset-inline: 0; block-size: 1.5px; background: var(--fg);
  transition: transform .45s var(--ease), inset-block-start .3s var(--ease);
}
.burger__box i:first-child { inset-block-start: 0; }
.burger__box i:last-child  { inset-block-start: 9.5px; }
.burger[aria-expanded="true"] .burger__box i:first-child { inset-block-start: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:last-child  { inset-block-start: 5px; transform: rotate(-45deg); }

.site-head__progress {
  position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  block-size: 2px; inline-size: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 40%, var(--moss)));
  transform-origin: left; transform: scaleX(var(--p, 0));
}
@supports (animation-timeline: scroll()) {
  .site-head__progress {
    transform: scaleX(0);
    animation: prog linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* menu mobilne */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--head-h) + 2rem) var(--gutter) 2.5rem;
  background: var(--bg);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }

.mobile-menu__nav ul { display: grid; align-content: center; gap: .1rem; block-size: 100%; }
.mobile-menu__nav a {
  display: flex; align-items: baseline; gap: 1rem; padding-block: .3rem;
  font-family: var(--display);
  font-size: clamp(2rem, 10vw, 3.4rem);
  line-height: 1.05; letter-spacing: -.03em;
  opacity: 0; transform: translateY(30px);
  transition: opacity .6s var(--ease-out) calc(var(--i) * 55ms + .2s),
              transform .7s var(--ease-out) calc(var(--i) * 55ms + .2s),
              color .3s var(--ease);
}
.mobile-menu.is-open .mobile-menu__nav a { opacity: 1; transform: none; }
.mobile-menu__nav li.is-child a {
  font-size: clamp(1.05rem, 4.5vw, 1.45rem);
  padding-inline-start: 2.4rem; color: var(--fg-dim);
}
.mobile-menu__nav a[aria-current] { color: var(--accent); }
.mobile-menu__idx { font-family: var(--sans); font-size: .7rem; letter-spacing: .15em; color: var(--fg-faint); }
.mobile-menu__nav li.is-child .mobile-menu__idx { display: none; }

.mobile-menu__foot {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  padding-block-start: 1.6rem; border-block-start: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--fg-dim); font-variant-numeric: tabular-nums;
}

/* ---------- 7. KOMPONENTY ---------------------------------------------- */

/* --- przycisk --- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--t-sm); font-weight: 550; letter-spacing: -.01em;
  overflow: hidden;
  transition: color .4s var(--ease), transform .5s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fg);
  clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
  transition: clip-path .55s var(--ease);
}
.btn:hover { color: var(--bg); }
.btn:hover::before { clip-path: circle(140% at var(--mx, 50%) var(--my, 50%)); }
.btn__arrow { transition: transform .45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--fg);
  border: 1px solid var(--line);
}
.btn--ghost:hover { color: var(--accent-ink); }
.btn--ghost::before { background: var(--accent); }

/* --- link z podkreśleniem --- */
.link-u {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  color: var(--fg); font-size: var(--t-sm); font-weight: 500;
  padding-block-end: 2px;
}
.link-u::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: 1px; background: currentColor;
  transform-origin: right; transform: scaleX(1);
  transition: transform .45s var(--ease);
}
.link-u:hover::after { transform: scaleX(0); transform-origin: left; }

/* --- hero --- */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid; align-items: end;
  padding-block: calc(var(--head-h) + 3rem) clamp(2.5rem, 6vw, 5rem);
  overflow: clip;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--bg) 2%, color-mix(in oklab, var(--bg) 55%, transparent) 38%, transparent 78%),
    linear-gradient(to right, color-mix(in oklab, var(--bg) 72%, transparent), transparent 62%);
}

.hero__inner {
  inline-size: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: end;
}

.hero__title {
  grid-column: 1 / -1;
  font-size: var(--t-3xl);
  line-height: .89;
  letter-spacing: -.045em;
  margin-block-end: .3em;
}
.hero__title em {
  font-style: italic;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  color: var(--accent);
}
@media (min-width: 900px) { .hero__title { grid-column: 1 / 9; } }

.hero__aside { grid-column: 1 / -1; display: grid; gap: 1.75rem; }
@media (min-width: 900px) { .hero__aside { grid-column: 9 / 13; padding-block-end: .8rem; } }

.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }

.hero__scroll {
  position: absolute; inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-end: var(--gutter);
  display: none; align-items: center; gap: .7rem;
  font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-faint);
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }
.hero__scroll i { display: block; inline-size: 1px; block-size: 42px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll i::after {
  content: ""; position: absolute; inset-inline: 0; block-size: 40%;
  background: var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll i::after { animation: drip 2.4s var(--ease-io) infinite; }
}
@keyframes drip { 0% { transform: translateY(-100%); } 100% { transform: translateY(250%); } }

/* --- pasek gatunków (marquee) --- */
.marquee {
  --gap: clamp(1.5rem, 4vw, 3.5rem);
  display: flex; gap: var(--gap); overflow: hidden;
  padding-block: clamp(1.2rem, 2.5vw, 2rem);
  border-block: 1px solid var(--line-soft);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  user-select: none;
}
.marquee__row { display: flex; gap: var(--gap); flex: none; min-inline-size: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__row { animation: slide 38s linear infinite; }
  .marquee:hover .marquee__row { animation-play-state: paused; }
}
@keyframes slide { to { transform: translateX(calc(-100% - var(--gap))); } }

.marquee__item {
  display: inline-flex; align-items: center; gap: var(--gap);
  font-family: var(--display); font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  letter-spacing: -.03em; color: var(--fg-dim); white-space: nowrap;
}
.marquee__item::after { content: "·"; color: var(--accent); }

/* --- blok intro (obraz + tekst, świadomie niesymetryczny) --- */
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.intro__media { grid-column: 1 / -1; position: relative; }
.intro__body  { grid-column: 1 / -1; display: grid; gap: 1.5rem; align-content: start; }

@media (min-width: 900px) {
  .intro__media { grid-column: 1 / 7; }
  .intro__body  { grid-column: 8 / 13; }
  .intro--flip .intro__media { grid-column: 7 / 13; order: 2; }
  .intro--flip .intro__body  { grid-column: 1 / 6;  order: 1; }
}

.frame {
  position: relative; overflow: clip;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  aspect-ratio: 4 / 5;
}
.frame > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.frame--wide { aspect-ratio: 16 / 10; }
.frame--tall { aspect-ratio: 3 / 4; }

/* plakietka z liczbą lat, zawieszona na krawędzi kadru.
   Na wąskich ekranach zostaje w środku — inaczej rozpycha stronę w poziomie. */
.badge-year {
  position: absolute; inset-block-end: -1.5rem; inset-inline-end: .75rem;
  display: grid; place-items: center; gap: .1rem;
  inline-size: clamp(6.5rem, 12vw, 9rem); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  text-align: center; line-height: 1;
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / .55);
}
.badge-year__num { font-family: var(--display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.badge-year__lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
@media (min-width: 900px) { .badge-year { inset-inline-end: -1.25rem; } }

/* --- statystyki --- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.stat { background: var(--bg); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem); display: grid; gap: .35rem; }
.section--alt .stat { background: var(--bg-2); }
.stat__num { font-family: var(--display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat__num small { font-size: .45em; color: var(--accent); vertical-align: super; letter-spacing: 0; }
.stat__lbl { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }

/* --- duże karty oferty --- */
.offer-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.offer-card {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-content: end; gap: .9rem;
  min-block-size: clamp(24rem, 46vw, 34rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: #F1E9DB;
}
.offer-card__bg { position: absolute; inset: 0; z-index: -2; }
.offer-card__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.offer-card:hover .offer-card__bg img { transform: scale(1.06); }
.offer-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgb(10 8 6 / .9) 4%, rgb(10 8 6 / .45) 44%, rgb(10 8 6 / .12));
  transition: opacity .6s var(--ease);
}
.offer-card:hover::after { opacity: .82; }
.offer-card__idx { font-size: var(--t-xs); letter-spacing: .2em; color: rgb(241 233 219 / .55); }
.offer-card__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.offer-card__desc { font-size: var(--t-sm); color: rgb(241 233 219 / .78); max-inline-size: 34ch; }
.offer-card__more { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-sm); font-weight: 500; color: var(--accent); margin-block-start: .3rem; }
.offer-card__more span { transition: transform .45s var(--ease); }
.offer-card:hover .offer-card__more span { transform: translateX(5px); }
.offer-card__link { position: absolute; inset: 0; z-index: 3; }

/* --- lista gatunków --- */
.species { border-block-start: 1px solid var(--line); }
.species__row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  gap: 1rem 1.25rem; align-items: baseline;
  padding-block: clamp(1.1rem, 2.4vw, 1.8rem);
  border-block-end: 1px solid var(--line);
  position: relative; isolation: isolate;
  transition: padding-inline .5s var(--ease), color .4s var(--ease);
}
.species__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface-2);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s var(--ease);
}
@media (hover: hover) {
  .species__row:hover { padding-inline: 1.25rem; }
  .species__row:hover::before { transform: scaleY(1); transform-origin: top; }
}
.species__idx { font-size: var(--t-xs); color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.species__name { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: -.03em; }
.species__latin { font-style: italic; font-size: var(--t-sm); color: var(--fg-faint); margin-inline-start: .7rem; }
.species__note { font-size: var(--t-sm); color: var(--fg-dim); grid-column: 2 / -1; max-inline-size: 46ch; }
.species__tag {
  justify-self: end; align-self: center;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-dim);
}

/* --- klasy jakości --- */
.classes { display: grid; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-md); overflow: clip; }
.class-row {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.5rem; align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.5vw, 1.9rem);
  background: var(--bg);
}
.section--alt .class-row { background: var(--bg-2); }
.class-row__letter {
  font-family: var(--display); font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1;
  inline-size: 2.2ch; color: var(--accent);
}
.class-row__body { display: grid; gap: .55rem; }
.class-row__title { font-size: var(--t-base); font-weight: 500; }
.class-row__meter { block-size: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.class-row__meter i {
  display: block; block-size: 100%; inline-size: var(--lvl);
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--moss)));
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.1s var(--ease-out) calc(var(--d, 0) * 110ms);
}
.class-row.is-in .class-row__meter i, .has-sda .class-row__meter i { transform: scaleX(1); }

/* --- sortymenty / definicje --- */
.defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.def {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line); border-radius: var(--r-md);
  display: grid; gap: .7rem; align-content: start;
  background: var(--surface);
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}
.def:hover { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); transform: translateY(-3px); }
.def__name { font-family: var(--display); font-size: var(--t-lg); }
.def__spec { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.def__desc { font-size: var(--t-sm); color: var(--fg-dim); }

/* --- flota --- */
.fleet { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.fleet-card {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-block-start: 1px solid var(--line);
}
.fleet-card__media { grid-column: 1 / -1; }
.fleet-card__body  { grid-column: 1 / -1; display: grid; gap: 1.25rem; }
@media (min-width: 900px) {
  .fleet-card__media { grid-column: 1 / 7; }
  .fleet-card__body  { grid-column: 8 / 13; }
  .fleet-card:nth-child(even) .fleet-card__media { grid-column: 7 / 13; order: 2; }
  .fleet-card:nth-child(even) .fleet-card__body  { grid-column: 1 / 6; order: 1; }
}
.spec-list { display: grid; gap: 0; }
.spec-list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: .85rem; border-block-end: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--fg-dim);
}
.spec-list b { font-family: var(--display); font-size: var(--t-md); color: var(--fg); font-weight: 400; font-variant-numeric: tabular-nums; }
.spec-list b small { font-size: .6em; color: var(--accent); margin-inline-start: .15em; }

/* --- wyróżniki --- */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.value { display: grid; gap: .8rem; align-content: start; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
.value__idx { font-size: var(--t-xs); letter-spacing: .2em; color: var(--accent); }
.value__title { font-family: var(--display); font-size: var(--t-lg); }
.value__desc { font-size: var(--t-sm); color: var(--fg-dim); }

/* --- oś czasu --- */
.timeline { display: grid; gap: 0; border-block-start: 1px solid var(--line); }
.tl-item {
  display: grid; grid-template-columns: minmax(4.5rem, 8rem) 1fr;
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-block-end: 1px solid var(--line);
}
.tl-year { font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--accent); line-height: 1; }
.tl-body { display: grid; gap: .5rem; }
.tl-title { font-size: var(--t-md); font-weight: 500; }
.tl-desc { font-size: var(--t-sm); color: var(--fg-dim); max-inline-size: 60ch; }

/* --- pas CTA z paralaksą --- */
.cta-band { position: relative; overflow: clip; padding-block: clamp(5rem, 12vw, 10rem); }
.cta-band__media { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.cta-band__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cta-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 8 6 / .88), rgb(10 8 6 / .55) 60%, rgb(10 8 6 / .3)); }
.cta-band__inner { position: relative; color: #F1E9DB; display: grid; gap: 1.5rem; max-inline-size: 46rem; }
.cta-band__inner p { color: rgb(241 233 219 / .8); }

/* --- galeria --- */
.gallery { columns: 1; column-gap: clamp(.6rem, 1.4vw, 1.1rem); }
@media (min-width: 620px) { .gallery { columns: 2; } }
@media (min-width: 1000px) { .gallery { columns: 3; } }

.gallery__item {
  break-inside: avoid;
  margin-block-end: clamp(.6rem, 1.4vw, 1.1rem);
  position: relative; overflow: clip; border-radius: var(--r-md);
  background: var(--surface-2);
  display: block; inline-size: 100%;
  cursor: zoom-in;
}
.gallery__item img { inline-size: 100%; transition: transform .9s var(--ease), filter .6s var(--ease); }
.gallery__item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(10 8 6 / .5), transparent 55%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.045); }
.gallery__item:hover::after { opacity: 1; }
.gallery__cap {
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 2;
  padding: 1rem 1.15rem; font-size: var(--t-xs); color: #F1E9DB;
  opacity: 0; transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .5s var(--ease);
}
.gallery__item:hover .gallery__cap { opacity: 1; transform: none; }

.lightbox { border: 0; padding: 0; background: transparent; max-inline-size: 100%; max-block-size: 100%; inline-size: 100%; block-size: 100%; }
.lightbox::backdrop { background: rgb(8 6 5 / .92); backdrop-filter: blur(6px); }
.lightbox__fig { block-size: 100%; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); margin: 0; }
.lightbox__fig img { max-block-size: 82svh; inline-size: auto; border-radius: var(--r-md); }
.lightbox__cap { color: #F1E9DB; font-size: var(--t-sm); padding-block-start: 1rem; text-align: center; }
.lightbox__close, .lightbox__nav {
  position: fixed; z-index: 5;
  inline-size: 46px; block-size: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #F1E9DB;
  border: 1px solid rgb(241 233 219 / .22);
  background: rgb(20 16 12 / .5); backdrop-filter: blur(8px);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.lightbox__close { inset-block-start: 1.2rem; inset-inline-end: 1.2rem; }
.lightbox__nav--prev { inset-inline-start: 1.2rem; inset-block-start: 50%; translate: 0 -50%; }
.lightbox__nav--next { inset-inline-end: 1.2rem; inset-block-start: 50%; translate: 0 -50%; }

/* --- nagłówek podstrony --- */
.page-head {
  padding-block: calc(var(--head-h) + clamp(3rem, 8vw, 7rem)) clamp(2.5rem, 6vw, 5rem);
  position: relative; overflow: clip;
}
.page-head--media { min-block-size: clamp(20rem, 44vw, 30rem); display: grid; align-items: end; }
.page-head__media { position: absolute; inset: 0; z-index: -2; overflow: clip; }
.page-head__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.page-head__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 3%, color-mix(in oklab, var(--bg) 45%, transparent) 55%, color-mix(in oklab, var(--bg) 20%, transparent)); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--t-xs); color: var(--fg-faint); margin-block-end: 1.5rem; }
.crumbs a:hover { color: var(--accent); }
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: .5rem; opacity: .5; }
.crumbs ol { display: contents; }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; }

/* --- notka / przypis --- */
.note {
  font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.7;
  padding-inline-start: 1.1rem; border-inline-start: 2px solid var(--line);
  max-inline-size: 70ch;
}

/* ---------- 8. FORMULARZ ------------------------------------------------ */

.form { display: grid; gap: 1.1rem; }
.field { position: relative; display: grid; gap: .45rem; }
.field label { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.field input, .field textarea {
  inline-size: 100%;
  padding: .95rem 1.05rem;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.field textarea { resize: vertical; min-block-size: 9rem; }
.field input:hover, .field textarea:hover { border-color: color-mix(in oklab, var(--fg) 22%, var(--line)); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--surface-2); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #C4553D; }
.field__err { font-size: var(--t-xs); color: #E0765C; min-block-size: 0; }

.form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.65; }
.consent input { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .15rem; accent-color: var(--accent); }
.consent a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 2px; }

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.form__status { font-size: var(--t-sm); padding: .9rem 1.1rem; border-radius: var(--r-sm); display: none; }
.form__status.is-ok  { display: block; background: color-mix(in oklab, var(--moss) 20%, transparent); border: 1px solid color-mix(in oklab, var(--moss) 50%, transparent); }
.form__status.is-err { display: block; background: color-mix(in oklab, #C4553D 18%, transparent); border: 1px solid color-mix(in oklab, #C4553D 45%, transparent); }

.btn[aria-busy="true"] { pointer-events: none; opacity: .6; }

/* --- kafle kontaktowe --- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.contact-grid__info { grid-column: 1 / -1; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-content: start; }
.contact-grid__form { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .contact-grid__info { grid-column: 1 / 6; }
  .contact-grid__form { grid-column: 7 / 13; }
}

.info-block { display: grid; gap: .5rem; padding-block-start: 1.1rem; border-block-start: 1px solid var(--line); }
.info-block__h { font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); }
.info-block a { transition: color .3s var(--ease); }
.info-block a:hover { color: var(--accent); }
.info-block ul { display: grid; gap: .25rem; font-variant-numeric: tabular-nums; }
.info-block .row { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); }
.info-block .row.is-closed { color: var(--fg-faint); }

.map-frame { border-radius: var(--r-lg); overflow: clip; border: 1px solid var(--line); background: var(--surface-2); }
.map-frame iframe { display: block; inline-size: 100%; block-size: clamp(18rem, 40vw, 26rem); border: 0; filter: grayscale(.35); }
:root[data-theme="dark"] .map-frame iframe { filter: grayscale(.5) invert(.9) hue-rotate(180deg) brightness(.95); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-frame iframe { filter: grayscale(.5) invert(.9) hue-rotate(180deg) brightness(.95); }
}

/* ---------- 9. STOPKA --------------------------------------------------- */

.site-foot { border-block-start: 1px solid var(--line); background: var(--bg-2); }

.site-foot__top {
  inline-size: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  border-block-end: 1px solid var(--line);
}
.site-foot__kicker { font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-faint); margin-block-end: 1.25rem; }
.site-foot__cta { font-size: var(--t-2xl); line-height: .95; }
.site-foot__cta a { display: inline; }
.site-foot__cta a:hover .w { color: var(--accent); }
.site-foot__cta .w { transition: color .4s var(--ease) calc(var(--i) * 30ms); }
.site-foot__arrow { display: inline-block; margin-inline-start: .3em; color: var(--accent); transition: transform .5s var(--ease); }
.site-foot__cta a:hover .site-foot__arrow { transform: translateX(.18em); }

.site-foot__grid {
  inline-size: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  display: grid; gap: clamp(1.75rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.foot-col--brand { min-inline-size: min(100%, 16rem); }
.foot-legal { font-family: var(--display); font-size: var(--t-md); line-height: 1.15; max-inline-size: 22ch; }
.foot-since { font-size: var(--t-xs); color: var(--fg-faint); margin-block-start: .5rem; }
.foot-social { display: flex; gap: 1rem; margin-block-start: 1.25rem; font-size: var(--t-sm); }
.foot-social a { color: var(--fg-dim); transition: color .3s var(--ease); }
.foot-social a:hover { color: var(--accent); }

.foot-h { font-family: var(--sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); margin-block-end: 1rem; }
.foot-col address { font-style: normal; font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.75; }
.foot-list { display: grid; gap: .4rem; font-size: var(--t-sm); color: var(--fg-dim); }
.foot-list a { transition: color .3s var(--ease); }
.foot-list a:hover { color: var(--accent); }
.foot-list--hours li { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.foot-list--hours li.is-closed { color: var(--fg-faint); }

.site-foot__bottom {
  inline-size: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto;
  padding-block: 1.5rem; border-block-start: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: var(--t-xs); color: var(--fg-faint);
}
.to-top { display: inline-flex; align-items: center; gap: .5rem; color: var(--fg-dim); transition: color .3s var(--ease); }
.to-top:hover { color: var(--accent); }
.to-top span { transition: transform .45s var(--ease); }
.to-top:hover span { transform: translateY(-3px); }

/* ---------- 10. KURSOR -------------------------------------------------- */

/* Pierścień powtarza motyw słojów ze znaku firmowego. Włącza się wyłącznie
   przy myszy (nie na dotyku) i tylko wtedy, gdy JavaScript zdążył go zbudować —
   inaczej zostaje systemowy kursor. Osoby z prefers-reduced-motion dostają
   systemowy kursor zawsze; podmiana wskaźnika bywa dla nich problemem. */

@property --cs { syntax: "<length>"; inherits: false; initial-value: 30px; }

.cursor {
  position: fixed; inset-block-start: 0; inset-inline-start: 0;
  z-index: 10000; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
}
.cursor.is-ready { opacity: 1; }

.cursor__ring, .cursor__dot {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  border-radius: 999px; will-change: transform;
}

.cursor__ring {
  --cs: 30px;
  inline-size: var(--cs); block-size: var(--cs);
  margin-block-start: calc(var(--cs) / -2);
  margin-inline-start: calc(var(--cs) / -2);
  border: 1px solid color-mix(in oklab, var(--accent) 80%, transparent);
  display: grid; place-items: center;
  transition: --cs .45s var(--ease), border-color .3s var(--ease),
              background-color .35s var(--ease), border-radius .35s var(--ease);
}

/* drugi, wewnętrzny słój — pojawia się nad elementami klikalnymi */
.cursor__ring::after {
  content: ""; position: absolute;
  inset: 22%; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  opacity: 0; transform: scale(.6);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}

.cursor__dot {
  inline-size: 5px; block-size: 5px;
  margin-block-start: -2.5px; margin-inline-start: -2.5px;
  background: var(--accent);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.cursor__label {
  font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}

/* --- stany --- */

/* nad linkiem lub przyciskiem: pierścień rośnie, kropka chowa się w środku */
.cursor[data-state="hover"] .cursor__ring {
  --cs: 56px;
  background: color-mix(in oklab, var(--accent) 9%, transparent);
}
.cursor[data-state="hover"] .cursor__ring::after { opacity: 1; transform: none; }
.cursor[data-state="hover"] .cursor__dot { opacity: 0; transform: scale(.4); }

/* nad zdjęciem w galerii: pierścień z podpisem */
.cursor[data-state="media"] .cursor__ring {
  --cs: 88px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(3px);
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
}
.cursor[data-state="media"] .cursor__label { opacity: 1; transform: none; }
.cursor[data-state="media"] .cursor__dot { opacity: 0; }

/* nad polem tekstowym: pionowa belka zamiast pierścienia */
.cursor[data-state="text"] .cursor__ring {
  --cs: 22px;
  inline-size: 1px; margin-inline-start: -.5px;
  border-radius: 0; border: 0;
  background: var(--accent);
}
.cursor[data-state="text"] .cursor__ring::after { opacity: 0; }
.cursor[data-state="text"] .cursor__dot { opacity: 0; }

/* wciśnięty przycisk myszy */
.cursor[data-pressed] .cursor__ring { --cs: 22px; }
.cursor[data-pressed][data-state="hover"] .cursor__ring { --cs: 46px; }
.cursor[data-pressed] .cursor__dot { transform: scale(1.6); }

/* kursor poza oknem */
.cursor[data-out] { opacity: 0; }

/* Systemowy wskaźnik chowamy dopiero, gdy własny naprawdę istnieje. */
:root.has-cursor body,
:root.has-cursor a,
:root.has-cursor button,
:root.has-cursor input,
:root.has-cursor textarea,
:root.has-cursor label,
:root.has-cursor .gallery__item { cursor: none; }

/* Lightbox rysuje się w warstwie nadrzędnej, ponad którą nic nie sięgnie —
   tam oddajemy pole systemowemu kursorowi. */
:root.cursor-off .cursor { opacity: 0; }
:root.cursor-off body,
:root.cursor-off button { cursor: auto; }

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
  :root.has-cursor body,
  :root.has-cursor a,
  :root.has-cursor button,
  :root.has-cursor input,
  :root.has-cursor textarea,
  :root.has-cursor label,
  :root.has-cursor .gallery__item { cursor: auto; }
}