/* =========================================================
   Sekuła Design — styles
   Structure:
     1. Reset
     2. Base
     3. Layout primitives
     4. Components (nav, buttons, links, footer)
     5. Sections (hero, statement, work, process, katarzyna, sklep, kontakt)
     6. Reveal + motion
     7. Responsive refinements
   ========================================================= */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, figure, blockquote,
ol, ul, dl, dt, dd {
  margin: 0;
  padding: 0;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}
button, input, select, textarea { font: inherit; color: inherit; }
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
ul, ol { list-style: none; }
:focus-visible {
  outline: 2px solid var(--color-dark);
  outline-offset: 3px;
}

/* ---------- 2. Base ---------- */
html {
  scroll-behavior: smooth;
  /* Polish typography: avoid widows after single-letter prepositions.
     We also inject   in markup for i, o, a, w, z, u. */
  hyphens: manual;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-weight: 400;
  overflow-x: clip;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-dark);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
h1, .display-xl {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { max-width: var(--prose-width); text-wrap: pretty; }

::selection {
  background: var(--color-dark);
  color: var(--color-bg);
}

/* ---------- 3. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}
.container--content {
  max-width: calc(var(--content-width) + 2 * var(--gutter-desktop));
}

.section {
  padding-block: var(--section-py);
  position: relative;
}
.section--tight { padding-block: var(--section-py-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.rule {
  height: 1px;
  background: var(--color-divider);
  border: 0;
  margin: 0;
}

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text);
}
.label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.label--plain::before { display: none; }

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter-desktop);
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  z-index: calc(var(--z-nav) + 1);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-4); }

/* ---------- 4. Components ---------- */

/* Arrow link — the primary call-to-action everywhere.
   Minimal, uppercase, animated underline. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-dark);
  position: relative;
  padding-bottom: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.arrow-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 28px;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}
.arrow-link:hover::after,
.arrow-link:focus-visible::after { width: 100%; }
.arrow-link svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-out);
}
.arrow-link:hover svg,
.arrow-link:focus-visible svg { transform: translateX(4px); }
.arrow-link--on-dark { color: var(--color-white); }
.arrow-link--lg { font-size: var(--fs-small); }

/* ---- Navigation ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: var(--space-5) var(--gutter-desktop);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--color-white);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0));
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: -1;
}
.nav--scrolled {
  background: var(--color-bg);
  color: var(--color-dark);
  padding-block: var(--space-4);
  border-bottom-color: var(--color-divider);
}
.nav--scrolled::before { opacity: 0; }

.nav__group {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.nav__group--right { justify-content: flex-end; }

.nav__link {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  padding-block: 6px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { width: 100%; }

.nav__logo {
  display: block;
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: inherit;
  white-space: nowrap;
}
.nav__logo strong { font-weight: 400; }
.nav__logo em {
  font-style: normal;
  font-size: 0.68em;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  opacity: 0.75;
}
.nav__logo {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.nav__logo img {
  display: block;
  transition: opacity var(--dur-base) var(--ease-out);
}
.nav__logo-word {
  height: 24px;
  width: auto;
}
.nav__logo-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 20px;
  width: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.nav--scrolled .nav__logo-word { opacity: 0; }
.nav--scrolled .nav__logo-icon { opacity: 1; }

.nav__toggle {
  display: none;
  width: 32px;
  height: 32px;
  position: relative;
}
.nav__toggle span {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              top var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle span:nth-child(1) { top: 12px; }
.nav__toggle span:nth-child(2) { top: 20px; }
.is-menu-open .nav__toggle span:nth-child(1) {
  top: 16px;
  transform: rotate(45deg);
}
.is-menu-open .nav__toggle span:nth-child(2) {
  top: 16px;
  transform: rotate(-45deg);
}

/* Mobile overlay menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter-mobile);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.is-menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu-overlay ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.menu-overlay a {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 7vw, 3.5rem);
  color: var(--color-dark);
  display: block;
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  transition: padding-left var(--dur-base) var(--ease-out);
}
.menu-overlay a:hover { padding-left: var(--space-4); }
.menu-overlay__footer {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text);
}

/* Lock scroll when mobile menu is open */
body.is-menu-open { overflow: hidden; }

/* ---------- 5. Sections ---------- */

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--color-white);
  isolation: isolate;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 2400ms var(--ease-out);
}
.is-loaded .hero__media img { transform: scale(1); }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 18, 14, 0.28) 0%,
    rgba(20, 18, 14, 0.00) 28%,
    rgba(20, 18, 14, 0.00) 52%,
    rgba(20, 18, 14, 0.55) 100%);
}

.hero__inner {
  position: relative;
  padding: var(--gutter-desktop);
  padding-bottom: clamp(4rem, 3rem + 3vw, 7rem);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-6) var(--space-7);
  align-items: end;
}
.hero__eyebrow {
  grid-column: 1 / -1;
  color: var(--color-white);
  opacity: 0.85;
}
.hero__eyebrow::before { background: currentColor; }

.hero__title {
  grid-column: 1;
  font-size: var(--fs-display-xl);
  line-height: 0.94;
  letter-spacing: -0.022em;
  color: var(--color-white);
  max-width: 16ch;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--color-white-70);
}

.hero__meta {
  grid-column: 2;
  align-self: end;
  text-align: right;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.72;
  line-height: 1.6;
  white-space: nowrap;
}
.hero__meta span { display: block; }

/* Scroll cue — thin animated line, bottom center */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.7;
}
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 52px;
  background: currentColor;
  transform-origin: top;
  animation: scroll-cue 2.6s var(--ease-in-out) infinite;
}
@keyframes scroll-cue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---- Statement ---- */
.statement {
  padding-block: var(--section-py);
  background: var(--color-bg);
}
.statement__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.statement__label { padding-top: 14px; }
.statement__body {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 1.9vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.014em;
  color: var(--color-dark);
  max-width: 24ch;
}
.statement__body p + p { margin-top: var(--space-5); }
.statement__cta {
  margin-top: var(--space-7);
  display: block;
}

/* ---- Work reel ---- */
.work {
  background: var(--color-bg);
  padding-block: var(--section-py);
}
.work__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--space-5);
  padding-inline: var(--gutter-desktop);
  max-width: var(--max-width);
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.work__title {
  font-size: var(--fs-display-md);
  max-width: 14ch;
}
.work__meta {
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: var(--space-3);
}

.reel {
  position: relative;
  display: flex;
  gap: var(--space-5);
  padding-inline: var(--gutter-desktop);
  padding-block: var(--space-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: var(--gutter-desktop);
}
.reel::-webkit-scrollbar { display: none; }

.reel__item {
  flex: 0 0 auto;
  width: min(60vw, 640px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  cursor: grab;
}
.reel__item:active { cursor: grabbing; }

.reel__item--wide { width: min(72vw, 860px); }
.reel__item--tall { width: min(44vw, 480px); }

/* One shared height for every card — the height of a 4:3 card at the
   narrowest width. Widths still vary so the reel has rhythm, but the
   top and bottom of every image line up cleanly. */
.reel__figure {
  position: relative;
  height: clamp(280px, 48vh, 480px);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-image);
  background: var(--color-bg-deep);
}
.reel__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
  will-change: transform;
}
.reel__item:hover .reel__figure img { transform: scale(1.035); }

.reel__caption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding-inline: 2px;
}
.reel__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--color-dark);
}
.reel__idx {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}
.reel__tag {
  grid-column: 1 / -1;
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.7;
}

.work__foot {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
  margin-top: var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-5);
}

/* ---- Process — numbered letter ---- */
.process {
  background: var(--color-bg);
  padding-block: var(--section-py);
}
.process__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}
.process__head {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-9);
  align-items: start;
}
.process__head .label { padding-top: 18px; }
.process__title {
  font-size: var(--fs-display-md);
  max-width: 14ch;
}

.process__list {
  counter-reset: process;
  border-top: 1px solid var(--color-divider-strong);
}
.process__item {
  counter-increment: process;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-divider);
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
/* Trim the leading above the first line so every cell's cap-top lands
   on the same horizontal — proper optical alignment across three very
   different font sizes. */
.process__item::before,
.process__step,
.process__desc {
  -webkit-text-box-trim: trim-start;
  -webkit-text-box-edge: cap alphabetic;
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}
.process__item::before {
  content: counter(process, decimal-leading-zero);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.process__step {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem);
  color: var(--color-dark);
  line-height: 1;
}
.process__desc {
  color: var(--color-text);
  max-width: 46ch;
  font-size: var(--fs-lead);
  line-height: 1.55;
}
/* Fallback for browsers without text-box-trim: manual half-leading
   compensation so the three cells still line up visually. */
@supports not (text-box-trim: trim-start) {
  .process__desc { margin-top: -0.32em; }
  .process__item::before { margin-top: 0.18em; }
}
.process__foot { margin-top: var(--space-8); }

/* ---- Katarzyna (the human) ---- */
.katarzyna {
  background: var(--color-bg);
  padding-block: var(--section-py);
}
.katarzyna__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: center;
}
.katarzyna__figure {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--color-bg-deep);
}
.katarzyna__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.katarzyna__signature {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  right: var(--space-5);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  text-shadow: 0 1px 16px rgba(0,0,0,0.35);
}

.katarzyna__body {
  max-width: 520px;
}
.katarzyna__label { margin-bottom: var(--space-5); }
.katarzyna__title {
  font-size: var(--fs-display-md);
  line-height: 1.08;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.katarzyna__lead {
  font-size: var(--fs-lead);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.katarzyna__lead + .katarzyna__lead { margin-top: var(--space-4); }
.katarzyna__stats {
  display: flex;
  gap: var(--space-7);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-5);
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}
.katarzyna__stats dt {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);
  color: var(--color-dark);
  line-height: 1;
}
.katarzyna__stats dd {
  margin-top: var(--space-2);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

/* ---- Sklep doorway ---- */
.sklep {
  background: var(--color-bg-deep);
  padding-block: var(--section-py);
  border-block: 1px solid var(--color-divider);
}
.sklep__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: center;
}
.sklep__copy { max-width: 440px; }
.sklep__title {
  font-size: var(--fs-display-md);
  margin-bottom: var(--space-5);
  line-height: 1.08;
}
.sklep__text {
  font-size: var(--fs-lead);
  margin-bottom: var(--space-6);
  color: var(--color-text);
}
.sklep__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
  font-size: var(--fs-small);
  color: var(--color-text);
}
.sklep__list li {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.sklep__list li::before {
  content: attr(data-idx);
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}

.sklep__stack {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sklep__cover {
  position: absolute;
  width: 48%;
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(52, 50, 48, 0.35),
              0 8px 24px -12px rgba(52, 50, 48, 0.25);
  transition: transform var(--dur-base) var(--ease-out);
}
.sklep__cover img { width: 100%; height: auto; display: block; }
.sklep__cover--1 {
  transform: rotate(-6deg) translate(-28%, -6%);
  z-index: 1;
}
.sklep__cover--2 {
  transform: rotate(2deg) translateY(4%);
  z-index: 3;
}
.sklep__cover--3 {
  transform: rotate(8deg) translate(28%, -2%);
  z-index: 2;
}
.sklep__stack:hover .sklep__cover--1 { transform: rotate(-9deg) translate(-34%, -8%); }
.sklep__stack:hover .sklep__cover--2 { transform: rotate(2deg) translateY(2%) scale(1.03); }
.sklep__stack:hover .sklep__cover--3 { transform: rotate(11deg) translate(34%, -4%); }

/* ---- Kontakt moment ---- */
.kontakt {
  background: var(--color-bg);
  padding-block: clamp(6rem, 3rem + 8vw, 11rem);
  text-align: center;
}
.kontakt__inner {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}
.kontakt__label {
  margin-bottom: var(--space-7);
  justify-content: center;
}
.kontakt__label::before,
.kontakt__label::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.kontakt__label::after { display: inline-block; }
.kontakt__title {
  font-size: var(--fs-display-lg);
  line-height: 1.02;
  margin-bottom: var(--space-8);
  max-width: 18ch;
  margin-inline: auto;
}
.kontakt__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.7vw, 1.75rem);
  color: var(--color-dark);
}
.kontakt__lines a {
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
  display: inline-block;
}
.kontakt__lines a:hover { color: var(--color-text); }
.kontakt__cta { margin-top: var(--space-4); }

/* ---- Footer ---- */
.footer {
  background: var(--color-dark);
  color: var(--color-bg);
  padding-block: clamp(4rem, 2rem + 5vw, 8rem) var(--space-7);
}
.footer a { transition: opacity var(--dur-fast) var(--ease-out); }
.footer a:hover { opacity: 0.65; }
.footer__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}
.footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  line-height: 1;
  color: var(--color-bg);
  margin-bottom: var(--space-5);
  display: block;
}
.footer__brand img {
  display: block;
  height: clamp(96px, 8vw, 128px);
  width: auto;
}
.footer__addr {
  font-size: var(--fs-small);
  opacity: 0.72;
  line-height: 1.6;
  font-style: normal;
}
.footer__col h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-white-50);
  margin-bottom: var(--space-5);
}
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__col li { font-size: var(--fs-small); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-6);
  font-size: var(--fs-meta);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--color-white-50);
}

/* ---------- 6. Reveal + motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.is-visible .reveal,
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--slow { transition-duration: var(--dur-cinematic); }

/* ---------- 7. Responsive refinements ---------- */
@media (max-width: 1024px) {
  .statement__inner,
  .process__head {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .statement__label,
  .process__head .label { padding-top: 0; }
  .process__item {
    grid-template-columns: 56px 1fr;
    gap: var(--space-5);
    row-gap: var(--space-4);
  }
  .process__desc { grid-column: 2 / -1; }
  .katarzyna__inner,
  .sklep__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .katarzyna__figure { max-width: 540px; }
  .sklep__stack { max-width: 520px; margin-inline: auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav {
    padding: var(--space-4) var(--gutter-mobile);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
  }
  .nav__group { display: none; }
  .nav__toggle { display: block; flex-shrink: 0; }
  .nav--scrolled { padding-block: var(--space-3); }
  .nav__logo-word { height: 20px; }
  .nav__logo-icon {
    height: 18px;
    left: 0;
    transform: translate(0, -50%);
  }

  .menu-overlay__footer {
    font-size: 0.8125rem;
    word-break: break-word;
  }
  .menu-overlay__footer a { display: inline-block; max-width: 100%; }

  .container { padding-inline: var(--gutter-mobile); }

  .hero__inner {
    padding: var(--gutter-mobile);
    padding-bottom: var(--space-9);
    grid-template-columns: 1fr;
  }
  .hero__title { max-width: 14ch; }
  .hero__meta {
    grid-column: 1;
    text-align: left;
    margin-top: var(--space-5);
  }
  .hero__scroll { display: none; }

  .statement__inner,
  .work__head,
  .process__inner,
  .katarzyna__inner,
  .sklep__inner,
  .kontakt__inner,
  .footer__inner { padding-inline: var(--gutter-mobile); }

  .reel { padding-inline: var(--gutter-mobile); }
  .reel__item { width: 84vw; }
  .reel__item--wide { width: 92vw; }
  .reel__item--tall { width: 68vw; }

  .work__head {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .work__meta { padding-bottom: 0; }
  .work__foot {
    padding-inline: var(--gutter-mobile);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .process__item {
    grid-template-columns: auto 1fr;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-6);
    align-items: baseline;
  }
  .process__item::before {
    font-size: 0.875rem;
    align-self: baseline;
  }
  .process__step { font-size: 1.75rem; line-height: 1.1; }
  @supports not (text-box-trim: trim-start) {
    .process__item::before { margin-top: 0; }
  }

  .katarzyna__stats { gap: var(--space-5); flex-wrap: wrap; }
  .sklep__stack { aspect-ratio: 4 / 3; }
  .sklep__cover { width: 56%; }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .footer__bottom {
    flex-direction: column;
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  .hero__title { font-size: clamp(2.75rem, 11vw, 4rem); }
  .kontakt__title { font-size: clamp(2.5rem, 10vw, 4rem); }
}