/* ==========================================================================
   Mateusz Kotfasiński — prywatny szef kuchni
   Arkusz stylów. Skala jest płynna: body ma font-size w vw, a prawie
   wszystkie wymiary są w em — cała strona skaluje się z szerokością okna.
   Spis treści:
     1. Tokeny        6. Nawigacja + menu mobilne   11. Stopka
     2. Reset         7. Wspólne komponenty         12. Podstrony (hero)
     3. Typografia    8. Strona główna — hero       13. O mnie / Menu
     4. Układ         9. Strona główna — sekcje     14. Galeria + lightbox
     5. Przyciski    10. Wiersze (opinie, FAQ)      15. Kontakt + formularz
                                                    16. Tryb bez animacji
   ========================================================================== */

/* 0. Fonty (hostowane lokalnie — bez Google Fonts, bezpieczniej pod kątem RODO) ---- */
/* Inter 5.2.8 (licencja OFL, assets/fonts/inter/OFL.txt): opisy, menu, przyciski */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter/inter-latin-ext-300-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/inter/inter-latin-300-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Menseal (Envato Elements — licencja z subskrypcji właściciela strony): nagłówki (400) i logo (500) */
@font-face { font-family: "Menseal"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/menseal/menseal-400.woff2") format("woff2"); }
@font-face { font-family: "Menseal"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/menseal/menseal-500.woff2") format("woff2"); }

/* 1. Tokeny ------------------------------------------------------------- */
:root {
  --c-cream: #f0ebe2;
  --c-dark: #1a1817;
  --c-green: #b4ccba;
  --c-blue: #c2cdd8;
  --c-accent: #b4ccba; /* szałwia (jak menu mobilne i plansza przejścia) — kropki, metki z opiniami, wybrane opcje */
  --c-ocre: #dbc1b4;
  --c-error: #a3342b;

  /* Font nagłówków (podmiana w jednym miejscu): krój, grubość nagłówków i logo */
  --ff-serif: "Menseal", "Iowan Old Style", Georgia, serif;
  --fw-serif: 400;
  --fw-logo: 500;
  --ff-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --serif-axes: normal;

  --sp-xxs: 1.5em;
  --sp-xs: 2em;
  --sp-s: 4em;
  --sp-m: 7em;
  --sp-l: 10em;
  --sp-xl: 14em;

  --gutter: 3vw;
  --gap: 1.5em;
  --ease-expo: cubic-bezier(.16, 1, .3, 1);

  /* kolory strefy, która na scrollu przechodzi z kremowej w ciemną */
  --zone-bg: var(--c-cream);
  --zone-fg: var(--c-dark);
}

/* 2. Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ff-sans);
  font-size: 1vw;
  line-height: 1.2;
  font-weight: 400;
  color: var(--c-dark);
  background: var(--c-cream);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (max-width: 991px) { body { font-size: 1.3vw; } }
@media (max-width: 767px) { body { font-size: 1.7vw; } :root { --gutter: 5vw; } }
@media (max-width: 479px) { body { font-size: 2.2vw; } }

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

[hidden] { display: none !important; }
::selection { background: var(--c-green); color: var(--c-dark); }
:focus-visible { outline: 1px solid currentColor; outline-offset: .4em; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: var(--gutter);
  top: 1em;
  z-index: 2000;
  padding: .8em 1.5em;
  border-radius: 2em;
  background: var(--c-dark);
  color: var(--c-cream);
  font-size: max(1.1em, 13px);
  transform: translateY(-300%);
  transition: transform .5s var(--ease-expo);
}
.skip-link:focus { transform: none; }

.is-locked, .is-locked body { overflow: hidden; }

/* 3. Typografia ------------------------------------------------------------ */
.serif, .h-xl, .h-m, .h-s, .statement {
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-variation-settings: var(--serif-axes);
  font-optical-sizing: auto;
}

.h-xl {
  font-size: 9.6em;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.h-xl--hero { font-size: 12em; }
.h-m { font-size: 4.8em; line-height: 1.1; letter-spacing: -.005em; }
.h-s { font-size: 3em; line-height: 1.15; }
.statement { font-size: 3.97em; line-height: 1.4; letter-spacing: -.005em; }

.label { font-size: max(.93em, 11px); line-height: 1.4; font-weight: 500; letter-spacing: .01em; }
.text { font-size: max(1.19em, 13px); line-height: 1.55; }
.text-l { font-size: max(1.6em, 15px); line-height: 1.45; }
.text + .text { margin-top: 1em; }
.muted { opacity: .62; }

@media (max-width: 991px) {
  .h-xl { font-size: 8.5em; }
  .h-xl--hero { font-size: 10em; }
  .h-m { font-size: 3.8em; }
  .statement { font-size: 3.6em; }
  .label { font-size: 1.1em; }
  .text { font-size: 1.4em; }
  .text-l { font-size: 1.9em; }
}
@media (max-width: 767px) {
  .h-xl { font-size: 7.4em; }
  .h-xl--hero { font-size: 8.4em; }
  .h-m { font-size: 4em; }
  .statement { font-size: 4.2em; }
  .label { font-size: 1.35em; }
  .text { font-size: 1.7em; }
  .text-l { font-size: 2.1em; }
}
@media (max-width: 479px) {
  .h-xl { font-size: 5.4em; }
  .h-xl--hero { font-size: 6.2em; }
  .h-m { font-size: 3.2em; }
  .h-s { font-size: 2.5em; }
  .statement { font-size: 3em; }
  .label { font-size: 1.4em; }
  .text { font-size: 1.6em; }
  .text-l { font-size: 1.9em; }
}

/* Maska linii tytułu. Padding + ujemny margines robią miejsce na polskie
   znaki diakrytyczne (Ś, Ó, Ż nad wersalikami, ogonki Ą/Ę pod linią). */
.line-mask {
  display: block;
  overflow: hidden;
  overflow: clip;
  padding: .14em .02em .1em;
  margin: -.14em -.02em -.1em;
}
.line { display: block; }

/* 4. Układ --------------------------------------------------------------- */
.container { width: calc(100% - var(--gutter) * 2); margin-inline: auto; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

.section { padding-block: var(--sp-l); }

/* Scena przyklejona: w trybie natywnym działa CSS sticky, a gdy działa
   ScrollSmoother (desktop) — przypina ją ScrollTrigger. */
.js-sticky { position: -webkit-sticky; position: sticky; top: 0; }
.has-smoother .js-sticky { position: relative; top: auto; }

/* 5. Przyciski ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .7em 1.5em;
  border: 1px solid currentColor;
  border-radius: 2em;
  font-size: max(1.19em, 13px);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .5s var(--ease-expo), color .5s var(--ease-expo), border-color .5s var(--ease-expo);
}
.btn:hover { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-cream); }
.on-dark .btn:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-dark); }
.theme-zone .btn:hover { background: var(--zone-fg); border-color: var(--zone-fg); color: var(--zone-bg); }
.btn--lg { font-size: max(1.6em, 15px); padding: .8em 1.8em; }
.btn[disabled] { opacity: .5; pointer-events: none; }

@media (max-width: 991px) { .btn { font-size: 1.4em; } .btn--lg { font-size: 1.8em; } }
@media (max-width: 767px) { .btn { font-size: 1.7em; } .btn--lg { font-size: 2em; } }
@media (max-width: 479px) { .btn { font-size: 1.6em; } .btn--lg { font-size: 1.9em; } }

/* 6. Nawigacja + menu mobilne ----------------------------------------------- */
.page-transition {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  z-index: 1000;
  background: var(--c-green);
  transform-origin: left center;
  pointer-events: none;
}
.no-js .page-transition,
.failsafe .page-transition,
.reduced-motion .page-transition { display: none; }
/* Na telefonach bez zielonej planszy (wejście i przejścia między stronami) */
@media (max-width: 767px) { .page-transition { display: none; } }

/* Elementy animowane w intro są ukryte od pierwszej klatki, dopóki intro nie wystartuje
   (klasa .intro-ready) — dzięki temu nie widać „nieruchomego” napisu przed animacją.
   Bez JS, przy awarii (.failsafe) i w trybie bez animacji wszystko jest widoczne od razu. */
.js:not(.reduced-motion):not(.failsafe):not(.intro-ready) .hero__stage > *,
.js:not(.reduced-motion):not(.failsafe):not(.intro-ready) .page-hero__grid > *,
.js:not(.reduced-motion):not(.failsafe):not(.intro-ready) .nav__inner { visibility: hidden; }

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  color: var(--c-cream);
  transition: color .6s var(--ease-expo);
  pointer-events: none;
}
.nav[data-theme="dark"], .menu-open .nav { color: var(--c-dark); }

/* Tło nagłówka pojawia się po przewinięciu (klasa .is-solid) — dopasowane do sekcji pod spodem,
   żeby wielkie napisy strony nie zlewały się z logo i linkami */
.nav::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(100% + 1.2em);
  background: var(--nav-bg, rgba(240, 235, 226, .84));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  transition: opacity .5s var(--ease-expo), background-color .6s var(--ease-expo);
  pointer-events: none;
}
.nav[data-theme="dark"] { --nav-bg: rgba(240, 235, 226, .84); }
.nav[data-theme="light"] { --nav-bg: rgba(26, 24, 23, .6); }
.nav.is-solid::before { opacity: 1; }
.menu-open .nav::before { opacity: 0; }
.nav__inner { position: relative; }

.nav__inner {
  width: calc(100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-top: var(--sp-xs);
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.nav__logo {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--ff-serif);
  font-weight: var(--fw-logo);
  font-variation-settings: var(--serif-axes);
  font-size: 2.1em;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.nav__logo-mark { font-family: var(--ff-sans); font-size: .42em; line-height: 1; margin-left: .12em; }

.nav__links { display: flex; align-items: center; gap: 2.3em; margin-left: auto; margin-right: 6.5em; }
.nav__link { position: relative; padding-block: .35em; font-size: max(1.02em, 12px); font-weight: 500; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease-expo);
}
.nav__link:hover::after, .nav__link[aria-current]::after { transform: scaleX(1); transition-duration: .8s; }

.nav__cta { font-size: max(1.19em, 13px); }
.nav .nav__cta:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-dark); }
.nav[data-theme="dark"] .nav__cta:hover, .menu-open .nav .nav__cta:hover { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-cream); }

.nav__burger { display: none; position: relative; width: 44px; height: 44px; margin-left: .8em; margin-right: -10px; }
.nav__burger i {
  position: absolute;
  left: 10px; right: 10px;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease-expo), opacity .4s var(--ease-expo);
}
.nav__burger i:nth-child(1) { top: 16px; }
.nav__burger i:nth-child(2) { top: 22px; }
.nav__burger i:nth-child(3) { top: 28px; left: 22px; }
.menu-open .nav__burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-open .nav__burger i:nth-child(2) { transform: rotate(-45deg); }
.menu-open .nav__burger i:nth-child(3) { opacity: 0; transform: translateX(6px); }

/* Przełącznik języka PL / EN: na desktopie za „Kontakt”, na tablecie i telefonie
   tuż na lewo od hamburgera. Bieżący język jest podkreślony (jak aktywny link w nawigacji).
   Na wąskim telefonie zostaje tylko link do drugiego języka — obok logo nie ma miejsca na oba. */
.lang {
  flex: none;
  display: flex;
  align-items: center;
  gap: .5em;
  margin-left: 2.2em;
  font-size: max(1.02em, 12px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .04em;
}
.lang__sep { opacity: .35; }
.lang__link {
  position: relative;
  padding-block: .35em;
  opacity: .5;
  transition: opacity .5s var(--ease-expo);
}
.lang__link::before { content: ""; position: absolute; inset: -1.1em -.4em; } /* większe pole do stuknięcia palcem */
.lang__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease-expo);
}
.lang__link:hover, .lang__link[aria-current] { opacity: 1; }
.lang__link:hover::after, .lang__link[aria-current]::after { transform: scaleX(1); transition-duration: .8s; }

@media (max-width: 991px) {
  .nav__logo { font-size: 2.4em; }
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; font-size: 1.3em; }
  .nav__burger { display: block; }
  .lang { margin-left: 2em; }
  .lang + .nav__burger { margin-left: 1em; }
}
@media (max-width: 767px) {
  .nav__logo { font-size: 2.8em; }
  .nav__cta { display: none; }
  .nav__burger { flex: none; margin-left: auto; }
  .lang { margin-left: auto; padding-left: 1.2em; font-size: 13px; }
  .lang + .nav__burger { margin-left: 1.2em; }
}
@media (max-width: 479px) {
  .nav__logo { font-size: 2.6em; }
  .lang__sep, .lang__link[aria-current] { display: none; }
  .lang__link { opacity: 1; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: calc(var(--sp-xs) + 44px + 1.5em) var(--gutter) var(--sp-xs);
  overflow-y: auto;
  background: var(--c-green);
  color: var(--c-dark);
  visibility: hidden;
  clip-path: inset(0 100% 0 0);
}
/* linki wyśrodkowane w pionie między nawigacją a stopką menu */
.mobile-menu__links { display: flex; flex-direction: column; margin-block: auto; }
.mobile-menu__link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1em;
  overflow: hidden;
  overflow: clip;
  padding: .1em 0 .06em;
  margin: -.1em 0 -.06em;
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-variation-settings: var(--serif-axes);
  font-size: min(8.4em, 10.5vh);
  line-height: 1.08;
  letter-spacing: -.015em;
}
.mobile-menu__link > span { display: block; }
.mobile-menu__num {
  padding-top: .9em;
  font-family: var(--ff-sans);
  font-size: max(.15em, 11px);
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .55;
}
.mobile-menu__link[aria-current] { opacity: .45; }
.mobile-menu__footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2em;
  margin-top: var(--sp-s);
  padding-top: 1.2em;
  border-top: 1px solid rgba(26, 24, 23, .25);
  font-size: 1.4em;
  line-height: 1.5;
}
@media (min-width: 992px) { .mobile-menu { display: none; } }

/* 7. Wspólne komponenty ------------------------------------------------------ */
.section-head { display: flex; flex-direction: column; gap: .5em; }
.section-head__line { height: 1px; background: currentColor; transform-origin: left center; }

.title-block { padding-top: var(--sp-s); row-gap: var(--sp-s); }
.title-block__title { grid-column: 1 / -1; }
.title-block__aside {
  grid-column: 8 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-xs);
}

/* Ramka na zdjęcie: przycięcie + opcjonalna paralaksa wnętrza */
.frame { position: relative; overflow: hidden; background: rgba(26, 24, 23, .08); }
.frame > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.frame[data-parallax] > img { height: 125%; }
.frame--portrait { aspect-ratio: 2 / 3; }
.frame--tall { aspect-ratio: 3 / 4; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--landscape { aspect-ratio: 4 / 3; }
.frame--wide { aspect-ratio: 16 / 9; }

@media (max-width: 767px) {
  .title-block__aside { grid-column: 1 / -1; }
}

/* 8. Strona główna — hero ------------------------------------------------------ */
.hero {
  position: relative;
  z-index: 0;
  height: 400vh;
  background: var(--c-dark);
  color: var(--c-cream);
  overflow: hidden;
  overflow: clip;
}

.hero__stage {
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  contain: strict;
}
.hero__stage > * { grid-area: 1 / 1; }

.hero__bg { position: absolute; inset: 0; opacity: .4; will-change: transform, opacity; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3.5em) saturate(1.15);
  transform: scale(1.25);
}

/* Owal: rozmiar liczony z jednej zmiennej --grow (0 → 1), którą animuje GSAP.
   Na końcu zawsze przykrywa ekran — także na pionowych telefonach.
   Centrowany marginesami (nie transformem), bo transform należy do GSAP,
   a wyrównanie siatki przestaje centrować element większy niż kontener. */
.hero__oval {
  --grow: 0;
  --w0: 26em;
  --h0: 37em;
  --w1: max(100em, 100vw + 4em);
  --h1: max(100em, 100vh + 30em);
  --w: calc(var(--w0) + (var(--w1) - var(--w0)) * var(--grow));
  --h: calc(var(--h0) + (var(--h1) - var(--h0)) * var(--grow));
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border-radius: 14em;
  overflow: hidden;
  opacity: .9; /* napis na łuku (pod owalem) prześwituje przez zdjęcie na ~10% */
  isolation: isolate;
  will-change: transform;
}
.hero__oval img { width: 100%; height: 100%; object-fit: cover; }

.wordmark {
  position: relative;
  z-index: 2;
  margin-top: -.4em;
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-variation-settings: var(--serif-axes);
  font-size: 8.6em;
  line-height: .95;
  letter-spacing: -.015em;
  color: var(--c-cream);
  text-align: center;
  pointer-events: none;
}
.wordmark__line { position: relative; display: block; white-space: nowrap; }
.wordmark .char, .wordmark .char-mask { display: inline-block; }
/* Maska litery: SplitText ustawia overflow: clip, którego nie zna Safari < 16 —
   wtedy działa ta reguła (inaczej litery „schowane” pod linią byłyby widoczne przed animacją) */
.wordmark .char-mask { overflow: hidden; padding: .16em .04em .1em; margin: -.16em -.04em -.1em; }

.hero__mark {
  position: absolute;
  top: .12em;
  right: -.42em;
  font-family: var(--ff-sans);
  font-size: .26em;
  line-height: 1;
}
.hero__mark-inner { display: block; }
.hero__mark-inner::before { content: "°"; }

/* Napis na łuku leży POD owalem: gdy zdjęcie rośnie, najeżdża na napis i go przykrywa */
.hero__tagline {
  position: absolute;
  left: 50%;
  top: calc(50% + 5.5em);
  width: 34em;
  margin-left: -17em;
  z-index: 0;
  pointer-events: none;
}
.hero__tagline-svg { width: 100%; height: auto; overflow: visible; }
.hero__tagline text {
  fill: var(--c-cream);
  font-family: var(--ff-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

@media (max-width: 479px) {
  .wordmark { font-size: 6.2em; }
}

/* 9. Strona główna — sekcje ------------------------------------------------------ */
/* Strefa nasuwa się na przypiętą scenę hero (ostatnie 100vh jej przewijania) */
.theme-zone {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  background: var(--zone-bg);
  color: var(--zone-fg);
}

.statement-section { padding-block: var(--sp-l); }
.statement-section .statement { grid-column: 2 / span 10; }
@media (max-width: 767px) { .statement-section .statement { grid-column: 1 / -1; } }

/* Usługi — poziomy tor */
.services { padding-top: var(--sp-l); }
.services__scroll { position: relative; height: 300vh; margin-top: var(--sp-s); }
.services__sticky {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.services__viewport { overflow: hidden; overflow: clip; }
.services__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  column-gap: var(--gap);
  will-change: transform;
}
.services__panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  height: 34em;
}
.services__panel-title { display: none; grid-column: 1 / -1; }
.services__img { position: relative; overflow: hidden; background: rgba(26, 24, 23, .08); }
.services__img--lg { grid-column: span 6; }
.services__img--sm { grid-column: span 3; }
.services__img img { position: absolute; top: 0; left: -8%; width: 116%; height: 100%; object-fit: cover; }

.services__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2em;
  padding-top: var(--sp-xs);
}
/* Każdy tytuł ma własny, wyższy „slot”, żeby ogonki liter (j, y, ę)
   poprzedniego tytułu nie wystawały nad bieżący i nie były ucinane */
.services__ticker { height: 1.45em; overflow: hidden; overflow: clip; }
.services__ticker-inner > span { display: block; height: 1.45em; padding-top: .1em; line-height: 1.1; white-space: nowrap; }
.services__dots { display: flex; gap: .8em; padding-bottom: .9em; }
.services__dots span { display: block; width: 4em; height: 2px; background: currentColor; }

@media (max-width: 767px) {
  .services__panel { height: auto; row-gap: var(--gap); }
  .services__img--lg { grid-column: 1 / -1; height: 30em; }
  .services__img--sm { grid-column: span 6; height: 26em; }
}

/* Lista menu 01–05 */
.menu-list { padding-top: var(--sp-l); }
.menu-item { position: relative; display: grid; grid-template-rows: 100vh auto; }
.menu-item__text { z-index: 1; height: 100vh; align-self: start; }
.menu-item__grid { height: 100%; padding-block: var(--sp-l) var(--sp-s); align-content: space-between; row-gap: var(--sp-s); }
.menu-item__num { grid-column: 1 / span 1; padding-top: .9em; }
.menu-item__title { grid-column: 2 / -1; }
.menu-item__body {
  grid-column: 9 / span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-xs);
}
/* Blok ze zdjęciem przejeżdża nad przyklejonym tekstem — nie może przechwytywać
   kliknięć (inaczej przyciski „Zobacz menu” / „Zapytaj o termin” przestają działać) */
.menu-item__media { position: relative; z-index: 2; padding-bottom: var(--sp-m); pointer-events: none; }
.menu-item__img { grid-column: 5 / span 3; }

@media (max-width: 767px) {
  .menu-item { display: block; }
  .menu-item__text { position: relative; height: auto; }
  .menu-item__grid { padding-block: var(--sp-m) var(--sp-s); }
  .menu-item__num { grid-column: 1 / -1; padding-top: 0; }
  .menu-item__title { grid-column: 1 / -1; }
  .menu-item__body { grid-column: 1 / span 10; }
  .menu-item__img { grid-column: 2 / span 8; }
}

/* Szef kuchni */
.chef { padding-top: var(--sp-l); padding-bottom: var(--sp-l); }
.chef__gallery { margin-top: var(--sp-l); align-items: start; pointer-events: none; }
.chef__img--1 { grid-column: 1 / span 3; margin-top: var(--sp-s); }
.chef__img--2 { grid-column: 5 / span 4; margin-top: var(--sp-l); }
.chef__img--3 { grid-column: 10 / span 3; margin-top: calc(var(--sp-l) * 2.2); }
@media (max-width: 767px) {
  .chef__img--1 { grid-column: 1 / span 5; margin-top: 0; }
  .chef__img--2 { grid-column: 7 / span 6; margin-top: var(--sp-l); }
  .chef__img--3 { grid-column: 3 / span 7; margin-top: var(--sp-m); }
}

/* Instagram — poziomy tor */
.insta { padding-top: var(--sp-l); }
.insta__scroll { position: relative; height: 300vh; }
.insta__sticky { height: 100vh; overflow: hidden; display: flex; align-items: center; }
.insta__track { display: flex; align-items: flex-start; gap: var(--sp-xs); padding-inline: var(--gutter); will-change: transform; }
.insta-card { flex: none; width: 22em; display: flex; flex-direction: column; gap: 1em; }
.insta-card__head { display: flex; align-items: center; gap: .8em; font-size: max(.93em, 11px); }
.insta-card__avatar {
  display: grid;
  place-items: center;
  width: 3.2em; height: 3.2em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--ff-serif);
  font-size: .95em;
}
.insta-card__media { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: rgba(240, 235, 226, .08); }
.insta-card__zoom { position: absolute; inset: 0; transition: transform 1.2s var(--ease-expo); }
.insta-card:hover .insta-card__zoom { transform: scale(1.06); }
.insta-card__media img { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; object-fit: cover; }
.insta-card__meta { display: flex; gap: 1.4em; font-size: max(.93em, 11px); }
.insta-card__caption { font-size: max(1.02em, 12px); line-height: 1.5; opacity: .85; }
@media (max-width: 991px) { .insta-card { width: 30em; } .insta-card__head, .insta-card__meta { font-size: 1.1em; } .insta-card__caption { font-size: 1.25em; } }
@media (max-width: 479px) { .insta-card { width: 34em; } .insta-card__head, .insta-card__meta { font-size: 1.3em; } .insta-card__caption { font-size: 1.45em; } }

/* Opinie */
.reviews { padding-block: var(--sp-l); }
.reviews__list { margin-top: var(--sp-m); }

/* Duże zdjęcie przed stopką */
.wide { position: relative; z-index: 1; background: var(--c-cream); }
.wide__frame { aspect-ratio: 16 / 9; }
@media (max-width: 767px) { .wide__frame { aspect-ratio: 4 / 5; } }

/* 10. Wiersze (opinie, wartości, FAQ) ----------------------------------------------- */
.row { position: relative; display: block; }
.row::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: currentColor;
  opacity: .3;
}
.row:last-child::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .3;
}
.row__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
  width: 100%;
  padding-block: var(--sp-xs);
  text-align: left;
}
.row__dot {
  grid-column: 1;
  width: .7em; height: .7em;
  border-radius: 50%;
  background: currentColor;
  transition: transform .8s var(--ease-expo), background-color .5s var(--ease-expo);
}
.row__main { grid-column: 2 / span 8; display: flex; flex-direction: column; gap: .6em; }
.faq .row__main { grid-column: 2 / span 10; }
/* Każda kopia tytułu ma własny, wyższy „slot”, żeby ogonki liter (g, j, ę)
   tytułu przesuniętego w górę nie wystawały nad widoczny tytuł */
.row__flip { position: relative; display: block; height: 1.4em; overflow: hidden; overflow: clip; }
.row__title { display: block; height: 1.4em; padding-top: .1em; line-height: 1.15; white-space: nowrap; transition: transform .7s var(--ease-expo); }
.row__title--clone { position: absolute; left: 0; top: 100%; }
.row__meta { opacity: .7; }
.row__aside { grid-column: 10 / -1; justify-self: end; text-align: right; }
.row__tag {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  width: 28em;
  padding: 2em 2.2em;
  border-radius: .7em;
  background: var(--c-accent);
  color: var(--c-dark);
  transform: translateY(-50%) scale(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--ease-expo);
  pointer-events: none;
}
.row__tag p { opacity: 0; transition: opacity .5s var(--ease-expo); }

@media (hover: hover) {
  .row:hover .row__title, .row:focus-visible .row__title { transform: translateY(-100%); }
  .row:hover .row__dot, .row:focus-visible .row__dot { transform: scale(2); background: var(--c-accent); }
  .row:hover .row__tag, .row:focus-visible .row__tag { transform: translateY(-50%) scale(1); }
  .row:hover .row__tag p, .row:focus-visible .row__tag p { opacity: 1; transition-delay: .2s; }
}
.row.is-open .row__title { transform: translateY(-100%); }
.row.is-open .row__dot { transform: scale(2); background: var(--c-accent); }

@media (hover: none) {
  /* Na dotyku metka rozwija się pod wierszem (animacja wysokości w core.js).
     Odstęp wewnętrzny jest na akapicie, żeby metkę dało się zwinąć do zera. */
  .row__tag {
    position: relative;
    right: auto; top: auto;
    width: auto;
    padding: 0;
    margin-bottom: var(--sp-xs);
    overflow: hidden;
    transform: none;
    display: none;
  }
  .row__tag p { padding: 2em 2.2em; }
  .row.is-open .row__tag { display: block; }
  .row.is-open .row__tag p { opacity: 1; }
}
/* na tablecie tytuł opinii w jednej linii potrzebuje całej szerokości wiersza */
@media (max-width: 991px) { .row__main { grid-column: 2 / -1; } }
@media (max-width: 767px) {
  .row__aside { display: none; }
  .row__title { height: auto; padding-top: 0; white-space: normal; }
  .row__flip { height: auto; }
  .row__title--clone { display: none; }
  .row:hover .row__title, .row.is-open .row__title { transform: none; }
  .row__tag { width: 100%; }
}

/* 11. Stopka ------------------------------------------------------------------- */
.footer {
  position: relative;
  z-index: 2;
  overflow: hidden;
  overflow: clip;
  padding-top: var(--sp-l);
  background: var(--c-blue);
  color: var(--c-dark);
}
.footer__lines { display: flex; flex-direction: column; }
.footer__line { display: flex; white-space: nowrap; will-change: transform; }
.footer__line span {
  flex: none;
  padding-right: .35em;
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-variation-settings: var(--serif-axes);
  font-size: 9.6em;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.footer__cta { display: flex; align-items: center; justify-content: space-between; gap: 2em; margin-top: var(--sp-m); }
.footer__cta .text-l { max-width: 24em; }
.footer__bottom { position: relative; margin-top: var(--sp-l); padding-block: var(--sp-xs); row-gap: var(--sp-xs); }
.footer__bottom::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .3; }
.footer__col { grid-column: span 3; display: flex; flex-direction: column; gap: .7em; }
.footer__col a:not(.social-link) { width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease-expo); }
.footer__col a:not(.social-link):hover { background-size: 100% 1px; }
/* Podstrony w siatce 2×2 zamiast długiej listy */
.footer__pages { display: grid; grid-template-columns: repeat(2, max-content); gap: .45em 2.4em; }
/* Social media: ikonki w kółkach — jak przyciski strony (ramka 1px, najechanie odwraca kolory) */
.footer__social { display: flex; flex-wrap: wrap; gap: max(.7em, 10px); }
.social-link {
  display: grid;
  place-items: center;
  width: max(3.1em, 44px);
  height: max(3.1em, 44px);
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .5s var(--ease-expo), color .5s var(--ease-expo);
}
.social-link svg { width: 48%; height: 48%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.social-link .social-link__dot { fill: currentColor; stroke: none; }
@media (hover: hover) { .social-link:hover { background: var(--c-dark); color: var(--c-blue); } }
.footer__copy { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 2em; opacity: .6; }
.footer__top { display: inline-flex; align-items: center; gap: .4em; font: inherit; }
.footer__top span { transition: transform .6s var(--ease-expo); }
.footer__top:hover span { transform: translateY(-.3em); }

@media (max-width: 767px) {
  .footer__line span { font-size: 8em; }
  .footer__cta { flex-direction: column; align-items: flex-start; }
  .footer__col { grid-column: span 6; }
  .footer__copy { align-items: center; gap: 1em; } /* „Do góry” zostaje po prawej, w jednym wierszu */
}
@media (max-width: 479px) {
  .footer__line span { font-size: 6em; }
  .footer__col { grid-column: 1 / -1; }
  .footer__col--social, .footer__col--pages { grid-column: span 6; } /* ikonki i podstrony obok siebie */
}

/* 12. Podstrony — hero -------------------------------------------------------------- */
.page-hero { padding-top: calc(var(--sp-xl) + 1em); padding-bottom: var(--sp-m); }
.page-hero__grid { row-gap: var(--sp-s); align-items: end; }
.page-hero__eyebrow { grid-column: 1 / -1; }
.page-hero__title { grid-column: 1 / -1; }
.page-hero__rule { grid-column: 1 / -1; height: 3px; background: currentColor; transform-origin: left center; }
.page-hero__lead { grid-column: 7 / span 5; }
@media (max-width: 767px) {
  .page-hero { padding-top: 12em; }
  .page-hero__lead { grid-column: 1 / -1; }
}

/* 13. O mnie / Menu ----------------------------------------------------------------- */
.split { align-items: start; row-gap: var(--sp-m); }
.split__media { grid-column: 1 / span 6; }
.split__body { grid-column: 8 / span 4; display: flex; flex-direction: column; gap: var(--sp-xs); padding-top: var(--sp-m); }
.split--reverse .split__media { grid-column: 7 / span 6; grid-row: 1; }
.split--reverse .split__body { grid-column: 1 / span 5; grid-row: 1; }
@media (max-width: 767px) {
  .split__media, .split--reverse .split__media { grid-column: 1 / -1; grid-row: auto; }
  .split__body, .split--reverse .split__body { grid-column: 1 / -1; grid-row: auto; padding-top: 0; }
}

.trio { align-items: start; margin-top: var(--sp-l); pointer-events: none; }
.trio__img--1 { grid-column: 1 / span 4; }
.trio__img--2 { grid-column: 6 / span 3; margin-top: var(--sp-l); }
.trio__img--3 { grid-column: 10 / span 3; margin-top: var(--sp-s); }
@media (max-width: 767px) {
  .trio__img--1 { grid-column: 1 / span 7; }
  .trio__img--2 { grid-column: 8 / span 5; margin-top: var(--sp-l); }
  .trio__img--3 { grid-column: 3 / span 8; margin-top: var(--sp-s); }
}

.steps { margin-top: var(--sp-m); }
.step { position: relative; padding-block: var(--sp-xs); align-items: baseline; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .3; }
.step__num { grid-column: 1 / span 1; }
.step__title { grid-column: 2 / span 5; }
.step__text { grid-column: 8 / span 5; }
@media (max-width: 767px) {
  .step__num { grid-column: 1 / span 2; }
  .step__title { grid-column: 3 / -1; }
  .step__text { grid-column: 3 / -1; margin-top: 1em; }
}

.dishes { margin-top: var(--sp-m); }
.dish-group { position: relative; padding-block: var(--sp-xs) var(--sp-s); }
.dish-group::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .3; }
.dish-group__name { grid-column: 1 / span 3; padding-top: .6em; }
.dish-group__items { grid-column: 5 / -1; display: grid; gap: var(--sp-xs); }
.dish__name { font-family: var(--ff-serif); font-weight: var(--fw-serif); font-variation-settings: var(--serif-axes); font-size: 2.6em; line-height: 1.2; }
.dish__desc { margin-top: .5em; }
@media (max-width: 767px) {
  .dish-group__name { grid-column: 1 / -1; padding-bottom: 1.5em; }
  .dish-group__items { grid-column: 1 / -1; }
  .dish__name { font-size: 3em; }
}

.cta-band { padding-block: var(--sp-l); text-align: center; }
.cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-s); }
.cta-band .h-xl { text-align: center; }

/* 14. Galeria + lightbox ------------------------------------------------------------ */
.gallery-section { padding-bottom: var(--sp-l); }
.gallery-filters { display: flex; flex-wrap: wrap; gap: .8em; margin-bottom: var(--sp-s); }
.chip {
  padding: .6em 1.35em;
  border: 1px solid currentColor;
  border-radius: 2em;
  font-size: max(1.02em, 12px);
  transition: background-color .5s var(--ease-expo), color .5s var(--ease-expo);
}
.chip:hover { background: rgba(26, 24, 23, .08); }
.chip[aria-pressed="true"] { background: var(--c-dark); color: var(--c-cream); }

.gallery { column-count: 3; column-gap: var(--gap); }
.gallery__item { display: block; width: 100%; margin-bottom: var(--sp-xs); break-inside: avoid; }
.gallery__item[hidden] { display: none; }
.gallery__open { display: block; width: 100%; text-align: left; cursor: zoom-in; }
/* <span> jest domyślnie inline — bez display:block aspect-ratio nie działa i zdjęcie ma 0 px wysokości */
.gallery__frame { display: block; position: relative; overflow: hidden; aspect-ratio: var(--ar, 3 / 4); background: rgba(26, 24, 23, .08); }
.gallery__frame img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery__frame[data-parallax] img { height: 125%; }
.gallery__zoom { position: absolute; inset: 0; transition: transform 1.2s var(--ease-expo); }
.gallery__open:hover .gallery__zoom { transform: scale(1.05); }
.gallery__caption { display: flex; justify-content: space-between; gap: 1em; padding-top: .8em; }
@media (max-width: 991px) { .chip { font-size: 1.3em; } }
@media (max-width: 767px) { .gallery { column-count: 2; } .chip { font-size: 1.6em; } }

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-cream);
  overflow: hidden;
  font-size: 1vw;
}
.lightbox::backdrop { background: transparent; }
.lightbox__bg { position: absolute; inset: 0; background: rgba(26, 24, 23, .95); }
.lightbox__stage { position: absolute; inset: 7em 8em 8em; display: grid; place-items: center; }
.lightbox__figure { position: relative; max-width: 100%; max-height: 100%; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 15em); width: auto; height: auto; object-fit: contain; }
.lightbox__bar {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 2.5em;
  display: flex; align-items: center; justify-content: space-between; gap: 2em;
  font-size: max(1.02em, 12px);
}
.lightbox__close { position: absolute; top: 2em; right: var(--gutter); }
.lightbox__arrow {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: max(44px, 4.4em); height: max(44px, 4.4em);
  margin-top: max(-22px, -2.2em);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: max(1.2em, 14px);
  transition: background-color .5s var(--ease-expo), color .5s var(--ease-expo);
}
.lightbox__arrow:hover { background: var(--c-cream); color: var(--c-dark); }
.lightbox__arrow--prev { left: var(--gutter); }
.lightbox__arrow--next { right: var(--gutter); }
@media (max-width: 991px) { .lightbox { font-size: 1.3vw; } }
@media (max-width: 767px) {
  .lightbox { font-size: 1.7vw; }
  .lightbox__stage { inset: 8em var(--gutter) 11em; }
  .lightbox__arrow { top: auto; bottom: 6em; margin-top: 0; }
}
@media (max-width: 479px) { .lightbox { font-size: 2.2vw; } }

/* 15. Kontakt + formularz ----------------------------------------------------------- */
.contact { padding-bottom: var(--sp-l); align-items: start; row-gap: var(--sp-m); }
.contact__info { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--sp-xs); }
.contact__form { grid-column: 6 / -1; }
.info-item { position: relative; display: flex; flex-direction: column; gap: .4em; padding-top: 1em; }
.info-item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: currentColor; opacity: .3; }
.info-item a { width: fit-content; }
@media (max-width: 767px) {
  .contact__info, .contact__form { grid-column: 1 / -1; }
}

.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xs) var(--gap); }
.field { display: flex; flex-direction: column; gap: .5em; }
.field--full { grid-column: 1 / -1; }
.field label, .field__label { font-size: max(.93em, 12px); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .45em 0;
  border: 0;
  border-bottom: 1px solid rgba(26, 24, 23, .35);
  border-radius: 0;
  background: transparent;
  font-size: max(1.4em, 16px);
  line-height: 1.4;
  outline: none;
  transition: border-color .3s var(--ease-expo);
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--c-dark); }
/* Wiadomość zaczyna jako jedna linia (jak pozostałe pola) i rośnie razem z tekstem */
.field textarea { display: block; min-height: 0; resize: none; overflow: hidden; }
.field select {
  padding-right: 1.6em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231a1817' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2em center;
  background-size: .75em auto;
}
.field__error { min-height: 1.3em; font-size: max(.93em, 12px); color: var(--c-error); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--c-error); }
.field.is-invalid .check input { color: var(--c-error); }

.check { display: flex; align-items: flex-start; gap: .9em; font-size: max(1.02em, 13px); line-height: 1.5; cursor: pointer; }
.check input {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.25em; height: 1.25em;
  margin: .15em 0 0;
  border: 1px solid currentColor;
  border-radius: .2em;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color .3s var(--ease-expo);
}
/* Zaznaczone: cały kwadrat wypełniony, w środku jasny „ptaszek” */
.check input::after {
  content: "";
  width: .6em;
  height: .32em;
  border-left: max(1.5px, .08em) solid var(--c-cream);
  border-bottom: max(1.5px, .08em) solid var(--c-cream);
  transform: translateY(-.07em) rotate(-45deg) scale(0);
  transition: transform .35s var(--ease-expo);
}
.check input:checked { background: currentColor; }
.check input:checked::after { transform: translateY(-.07em) rotate(-45deg) scale(1); }
.check a { text-decoration: underline; text-underline-offset: .2em; }

/* Lista rozwijana w stylu strony (JS zamienia natywny <select data-enhance>) */
.select { position: relative; }
.select__native {
  position: absolute !important;
  left: 0; bottom: 0;
  width: 100% !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: .45em 0;
  border-bottom: 1px solid rgba(26, 24, 23, .35);
  font-size: max(1.4em, 16px);
  line-height: 1.4;
  text-align: left;
  transition: border-color .3s var(--ease-expo);
}
.select__button:focus-visible { outline: none; border-color: var(--c-dark); }
.select.is-open .select__button { border-color: var(--c-dark); }
.field.is-invalid .select__button { border-color: var(--c-error); }
.select__value.is-placeholder { opacity: .45; }
.select__chevron {
  flex: none;
  width: .5em; height: .5em;
  margin: -.3em .25em 0 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .6s var(--ease-expo), margin .6s var(--ease-expo);
}
.select.is-open .select__chevron { transform: rotate(-135deg); margin-top: .3em; }
.select__list {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + .7em);
  z-index: 20;
  margin: 0;
  padding: .6em;
  border: 1px solid rgba(26, 24, 23, .14);
  border-radius: .8em;
  background: #f6f2ec;
  box-shadow: 0 2em 4em -1.5em rgba(26, 24, 23, .35);
  outline: none;
  visibility: hidden;
}
.select__option {
  display: flex;
  align-items: center;
  gap: .75em;
  padding: .55em .7em;
  border-radius: .45em;
  font-family: var(--ff-serif);
  font-weight: var(--fw-serif);
  font-variation-settings: var(--serif-axes);
  font-size: max(1.75em, 18px);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .3s var(--ease-expo);
}
.select__option.is-active { background: rgba(26, 24, 23, .07); }
.select__dot {
  flex: none;
  width: max(.36em, 8px); height: max(.36em, 8px); /* poniżej ~8px kółko renderuje się jak kwadracik */
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: transform .6s var(--ease-expo), background-color .3s, border-color .3s;
}
.select__option.is-active .select__dot { transform: scale(1.35); }
.select__option[aria-selected="true"] .select__dot { background: var(--c-accent); border-color: var(--c-accent); transform: scale(1.6); }

/* Liczba gości: pole + duże przyciski −/+ (zamiast systemowych strzałek) */
.stepper {
  display: flex;
  align-items: center;
  gap: .6em;
  border-bottom: 1px solid rgba(26, 24, 23, .35);
  transition: border-color .3s var(--ease-expo);
}
.stepper:focus-within { border-color: var(--c-dark); }
.field.is-invalid .stepper { border-color: var(--c-error); }
.field .stepper input { flex: 1; min-width: 0; border-bottom: 0; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: max(2.8em, 40px);
  height: max(2.8em, 40px);
  margin-block: .35em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: max(1.3em, 18px);
  line-height: 1;
  transition: background-color .4s var(--ease-expo), color .4s var(--ease-expo), opacity .3s;
  touch-action: manipulation; /* szybkie stukanie bez zoomu */
}
.stepper__btn:hover { background: var(--c-dark); color: var(--c-cream); }
.stepper__btn[disabled] { opacity: .3; pointer-events: none; }
@media (max-width: 767px) { .stepper__btn { width: 44px; height: 44px; } }

/* Data wydarzenia: własny kalendarz (JS zamienia natywne <input type="date" data-datepicker>) */
.datepicker { position: relative; }
.datepicker__native {
  position: absolute !important;
  left: 0; bottom: 0;
  width: 100% !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.datepicker__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: .45em 0;
  border-bottom: 1px solid rgba(26, 24, 23, .35);
  font-size: max(1.4em, 16px);
  line-height: 1.4;
  text-align: left;
  transition: border-color .3s var(--ease-expo);
}
.datepicker__button:focus-visible { outline: none; border-color: var(--c-dark); }
.datepicker.is-open .datepicker__button { border-color: var(--c-dark); }
.field.is-invalid .datepicker__button { border-color: var(--c-error); }
.datepicker__value.is-placeholder { opacity: .45; }
.datepicker__icon { flex: none; width: 1em; height: 1em; }
.datepicker__icon path, .datepicker__icon rect { fill: none; stroke: currentColor; stroke-width: 1.2; }
.datepicker__panel {
  position: absolute;
  left: 0;
  top: calc(100% + .7em);
  z-index: 20;
  width: max(100%, 22em);
  padding: 1.2em;
  border: 1px solid rgba(26, 24, 23, .14);
  border-radius: .8em;
  background: #f6f2ec;
  box-shadow: 0 2em 4em -1.5em rgba(26, 24, 23, .35);
  outline: none;
  visibility: hidden;
}
.datepicker__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.2em;
}
.datepicker__nav {
  display: grid;
  place-items: center;
  width: max(2.2em, 32px);
  height: max(2.2em, 32px);
  border: 1px solid rgba(26, 24, 23, .25);
  border-radius: 50%;
  transition: background-color .4s var(--ease-expo), color .4s var(--ease-expo), border-color .4s var(--ease-expo), opacity .3s;
}
.datepicker__nav svg { width: 45%; height: 45%; }
.datepicker__nav path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.datepicker__nav:hover { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-cream); }
.datepicker__nav[disabled] { opacity: .25; pointer-events: none; }
/* Nazwa miesiąca = przycisk przełączający na widok miesięcy i roku */
.datepicker__title {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  max-width: 100%;
  padding: .3em .8em;
  border-radius: 2em;
  transition: background-color .3s var(--ease-expo);
}
.datepicker__title:hover, .datepicker__title.is-open { background: rgba(26, 24, 23, .07); }
.datepicker__title-text { font-size: max(1.7em, 17px); line-height: 1.2; white-space: nowrap; }
.datepicker__caret { flex: none; width: max(.8em, 11px); height: max(.8em, 11px); transition: transform .5s var(--ease-expo); }
.datepicker__caret path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.datepicker__title.is-open .datepicker__caret { transform: rotate(180deg); }
/* Widok miesięcy: siatka 3 × 4 */
.datepicker__months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; align-content: center; }
.datepicker__m {
  height: max(3em, 44px);
  border-radius: 2em;
  font-size: max(1.2em, 15px);
  transition: background-color .3s var(--ease-expo), color .3s var(--ease-expo);
}
.datepicker__m:hover { background: rgba(26, 24, 23, .07); }
.datepicker__m:focus-visible { outline: 1px solid var(--c-dark); outline-offset: 1px; }
.datepicker__m[aria-current="date"] { box-shadow: inset 0 0 0 1px rgba(26, 24, 23, .45); }
.datepicker__m[aria-pressed="true"] { background: var(--c-accent); color: var(--c-dark); box-shadow: none; }
.datepicker__m[disabled] { opacity: .25; pointer-events: none; }
.datepicker__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.datepicker__grid th { padding-bottom: .6em; font-size: max(.93em, 12px); font-weight: 500; opacity: .55; text-align: center; }
.datepicker__grid td { padding: 2px; text-align: center; }
.datepicker__day {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 3.2em;
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 50%;
  font-size: max(1.2em, 15px);
  line-height: 1;
  transition: background-color .3s var(--ease-expo), color .3s var(--ease-expo);
}
.datepicker__day:hover { background: rgba(26, 24, 23, .07); }
.datepicker__day:focus-visible { outline: 1px solid var(--c-dark); outline-offset: 1px; }
.datepicker__day[aria-current="date"] { box-shadow: inset 0 0 0 1px rgba(26, 24, 23, .45); }
.datepicker__day[aria-pressed="true"] { background: var(--c-accent); color: var(--c-dark); box-shadow: none; }
.datepicker__day[disabled] { opacity: .25; pointer-events: none; }
.datepicker__foot { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin-top: .8em; font-size: max(.93em, 12px); }
.datepicker__foot button { text-decoration: underline; text-underline-offset: .2em; }
.datepicker__foot button[hidden] { display: none; }
@media (max-width: 767px) {
  .datepicker__panel { width: 100%; padding: 1em; }
}

/* Desktop: pola, liczba gości, lista i kalendarz o stopień mniejsze. Okienka listy
   i kalendarza mają ograniczoną skalę — na bardzo szerokich ekranach nie rosną z oknem. */
@media (min-width: 992px) {
  .field input, .field textarea, .select__button, .datepicker__button { font-size: max(1.2em, 16px); }
  .stepper__btn { width: max(2.5em, 40px); height: max(2.5em, 40px); margin-block: .25em; font-size: max(1.05em, 16px); }
  .select__list, .datepicker__panel { font-size: min(1em, 18px); }
  .select__option { font-size: max(1.4em, 17px); }
  .datepicker__panel { width: min(100%, 24em); padding: 1em; }
  .datepicker__head { margin-bottom: .9em; }
  .datepicker__nav { width: max(2em, 30px); height: max(2em, 30px); }
  .datepicker__title-text { font-size: max(1.35em, 17px); }
  .datepicker__day, .datepicker__m { font-size: max(1.05em, 14px); }
  .datepicker__day { max-width: 2.9em; }
  .datepicker__m { height: max(2.6em, 40px); }
}

/* Wysyłanie i komunikaty */
.form__submit { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 1.2em 1.5em; }
.form__status { flex: 1 1 20em; font-size: max(1.02em, 13px); line-height: 1.5; }
.form__status:empty { display: none; }
.form__status.is-error {
  display: flex;
  align-items: flex-start;
  gap: .8em;
  padding: .9em 1.1em;
  border-radius: .6em;
  background: rgba(163, 52, 43, .08);
  color: var(--c-error);
}
.form__status.is-error::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5em; height: 1.5em;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .85em;
  font-weight: 600;
  line-height: 1;
}

.form__success {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-xs);
  row-gap: var(--sp-xxs);
  align-items: start;
  padding: var(--sp-s);
  border-radius: .8em;
  background: var(--c-dark);
  color: var(--c-cream);
}
.form__success-icon { grid-row: 1 / span 3; width: 4.4em; height: 4.4em; color: var(--c-accent); }
.form__success-icon circle, .form__success-icon path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.form__success-title { font-size: 3.4em; line-height: 1.1; }
.form__success-actions { display: flex; flex-wrap: wrap; gap: .8em; margin-top: var(--sp-xs); }
.form__success-actions .btn:hover { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-dark); }
@media (max-width: 767px) {
  .form__success { grid-template-columns: 1fr; padding: var(--sp-s) var(--sp-xs); }
  .form__success-icon { grid-row: auto; width: 5.5em; height: 5.5em; }
  .form__success-title { font-size: 4.2em; }
}

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .form { grid-template-columns: 1fr; } }

/* Link „informacji o danych osobowych” w polu zgody (otwiera okienko) */
.check__link {
  display: inline;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.check__link:hover { text-decoration-thickness: 2px; }

/* Okienko (dialog) — informacja o danych osobowych */
.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-dark);
  overflow: hidden;
  font-size: min(1vw, 15px); /* na bardzo szerokich ekranach okienko nie rośnie ponad ekran */
}
.modal[open] { display: grid; place-items: center; }
.modal::backdrop { background: transparent; }
.modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(26, 24, 23, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal__panel {
  position: relative;
  z-index: 1;
  width: min(58em, calc(100% - var(--gutter) * 2));
  max-height: calc(100% - 4em);
  overflow-y: auto;
  padding: 3em;
  border-radius: .8em;
  background: var(--c-cream);
  box-shadow: 0 3em 6em -2em rgba(26, 24, 23, .45);
  scrollbar-width: none; /* bez widocznego paska przewijania (przewijanie nadal działa) */
}
.modal__panel::-webkit-scrollbar { display: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.modal__close { position: relative; flex: none; width: 44px; height: 44px; margin: -12px -12px -12px 0; }
.modal__close i {
  position: absolute;
  left: 12px; right: 12px; top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform .7s var(--ease-expo);
}
.modal__close i:nth-child(1) { transform: rotate(45deg); }
.modal__close i:nth-child(2) { transform: rotate(-45deg); }
.modal__close:hover i:nth-child(1) { transform: rotate(135deg); }
.modal__close:hover i:nth-child(2) { transform: rotate(45deg); }
.modal__line { display: block; height: 1px; margin-top: .6em; background: currentColor; opacity: .35; transform-origin: left center; }
.modal__title { margin-top: 1.1em; max-width: 18em; font-size: 2.8em; line-height: 1.15; }
.modal__body { display: grid; gap: 1em; margin-top: 1.6em; }
.modal__body .text { font-size: max(1.02em, 13px); line-height: 1.6; opacity: .8; }
.modal__body a { text-decoration: underline; text-underline-offset: .2em; }
.modal__actions { display: flex; justify-content: flex-end; margin-top: 2.4em; }
@media (max-width: 991px) { .modal { font-size: 1.3vw; } }
@media (max-width: 767px) {
  .modal { font-size: 1.7vw; }
  .modal[open] { place-items: end center; } /* na telefonie wysuwa się od dołu */
  .modal__panel { width: 100%; max-height: 88%; padding: var(--sp-s) var(--gutter) var(--sp-xs); border-radius: 1.2em 1.2em 0 0; }
  .modal__title { font-size: 3.6em; }
  .modal__body .text { font-size: 1.6em; }
  .modal__actions .btn { width: 100%; }
}
@media (max-width: 479px) { .modal { font-size: 2.2vw; } }

.faq__btn { cursor: pointer; }
/* FAQ: pytanie stoi w miejscu (bez efektu przewijania tytułu) — reaguje tylko kropka */
.faq .row__flip { height: auto; overflow: visible; }
.faq .row__title { height: auto; padding-top: 0; white-space: normal; transform: none !important; transition: none; }
.faq .row__title--clone { display: none; }
.faq__plus { grid-column: 12; justify-self: end; position: relative; width: 1.4em; height: 1.4em; }
.faq__plus::before, .faq__plus::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform .6s var(--ease-expo);
}
.faq__plus::after { transform: rotate(90deg); }
.faq__item.is-open .faq__plus::after { transform: rotate(0deg); }
.faq__panel { overflow: hidden; }
.faq__answer { padding: 0 0 var(--sp-xs); max-width: 48em; margin-left: calc((100% + var(--gap)) / 12); }
@media (max-width: 767px) { .faq__answer { margin-left: 0; } }

/* 16. Tryb bez animacji (prefers-reduced-motion / ?motion=reduce) ------------------------- */
.reduced-motion .hero { height: 100vh; }
.reduced-motion .theme-zone { margin-top: 0; }
.reduced-motion .js-sticky { position: relative; top: auto; }
.reduced-motion .services__scroll { height: auto; }
.reduced-motion .services__sticky { height: auto; display: block; }
.reduced-motion .services__track { grid-auto-flow: row; grid-auto-columns: auto; row-gap: var(--sp-s); }
.reduced-motion .services__panel { height: auto; row-gap: var(--gap); }
.reduced-motion .services__panel-title { display: block; }
.reduced-motion .services__img { aspect-ratio: 3 / 4; }
.reduced-motion .services__img--lg { aspect-ratio: 4 / 3; }
.reduced-motion .services__bar { display: none; }
.reduced-motion .insta__scroll { height: auto; padding-block: var(--sp-s); }
.reduced-motion .insta__sticky { height: auto; overflow-x: auto; }
.reduced-motion .insta__track { padding-bottom: 1em; }
.reduced-motion .menu-item { display: block; }
.reduced-motion .menu-item__text { height: auto; }
.reduced-motion .menu-item__grid { padding-block: var(--sp-m) var(--sp-s); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}