/* ══════════════════════════════════════════════════════════════════
   EMPIRE BARBERHOUSE
   Paleta wyprowadzona ze zdjęcia lokalu: podświetlone zielone witryny
   przy Domaniewskiej 22A (próbki: #307254 → #60A284, hue ≈ 153°).
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── kolor ─────────────────────────────────────────────────────── */
  --forest:    #0B6E43;   /* zieleń marki — dominanta */
  --pine:      #06170F;   /* zieleń-czerń — sekcje ciemne */
  --jade:      #17A063;   /* akcent, tylko na ciemnym */
  --bone:      #F2EFE6;   /* papier + tekst na zieleni */
  --ash:       #7E9B8C;   /* tekst drugorzędny na ciemnym */
  --bone-dim:  #D0DCCD;   /* tekst drugorzędny na zieleni (AA 4.6:1) */

  --line-on-dark:  rgba(242, 239, 230, .22);
  --line-on-light: rgba(6, 23, 15, .18);

  /* ── typografia ────────────────────────────────────────────────── */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text:    "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  /* Archivo (i Newsreader) NIE mają cyrylicy — bez podmiany wersje /ua i /ru
     renderowałyby nagłówki Arialem, a akapity Georgią, obok łacińskiego
     wordmarku w Archivo. Golos Text i Literata mają oba alfabety, więc
     w jednej linii („записатися в booksy") krój się nie rozjeżdża.
     IBM Plex Mono cyrylicę ma i zostaje bez zmian. */
  --f-znak:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --fs-mono:  clamp(10.5px, .74vw, 12.5px);
  --fs-body:  clamp(15.5px, 1.05vw, 18px);
  --fs-lead:  clamp(20px,   2.1vw,  32px);
  --fs-h3:    clamp(21px,   2.3vw,  33px);
  --fs-h2:    clamp(31px,   4.4vw,  68px);

  /* ── siatka i rytm ─────────────────────────────────────────────── */
  --edge:   clamp(18px, 4vw, 56px);
  --gut:    clamp(14px, 1.5vw, 24px);
  --bar-h:  clamp(58px, 5.2vw, 76px);
  --sec-y:  clamp(72px, 9vw, 168px);

  --ease:   cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.45, 0, .55, 1);
}

/* wersje cyrylickie: /ua (lang=uk) i /ru */
html[lang="uk"], html[lang="ru"] {
  --f-display: "Golos Text", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text:    "Literata", Georgia, "Times New Roman", serif;
}

/* ── reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Architektura scrolla jak w inspiracji: body ma twardo overflow-y hidden
   (viewport NIGDY nie scrolluje, więc przeglądarka nie ma gdzie dokleić
   paska), a przewija się wewnętrzny kontener .page na całą szerokość,
   z ukrytym własnym paskiem. Rolę wskazówki pełni pastylka „przewiń”. */
html, body { height: 100%; }

body {
  background: var(--forest);
  color: var(--bone);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  overflow-y: hidden;
}

.page {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: clip;
  scroll-behavior: smooth;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* stary Edge/IE */
}
.page::-webkit-scrollbar {      /* Chrome / Safari / Edge */
  display: none;
  width: 0;
  height: 0;
}

/* blokada przewijania: na czas intra i przy otwartym menu mobilnym */
body.is-locked .page { overflow-y: hidden; }

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
s { text-decoration: none; }
address { font-style: normal; }

:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}
.approach :focus-visible,
.reviews :focus-visible,
.strip :focus-visible,
.row__a:focus-visible { outline-color: var(--pine); }

::selection { background: var(--pine); color: var(--bone); }

.skip {
  position: fixed; z-index: 200; top: 10px; left: 10px;
  padding: 10px 16px;
  background: var(--bone); color: var(--pine);
  font-family: var(--f-mono); font-size: var(--fs-mono);
  text-transform: uppercase; letter-spacing: .1em;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* ── wspólne prymitywy ───────────────────────────────────────────── */
.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.eyebrow {
  color: var(--bone-dim);
  padding-bottom: clamp(20px, 3vw, 44px);
}

/* tekst wyłącznie dla czytników ekranu (nie display:none — to by go usunęło
   również z drzewa dostępności) */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* kategoria sekcji — największy głos na stronie (cennik / opinie / o empire);
   opis pod nią schodzi do drugiej roli (.sub) */
.cat {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 118%;
  font-size: var(--fs-h2);
  line-height: .95;
  letter-spacing: -.035em;
  text-transform: lowercase;
}
.sub {
  font-family: var(--f-display);
  font-weight: 500; font-stretch: 104%;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--bone-dim);
}
.approach .sub, .reviews .sub { color: var(--pine); opacity: .7; }

.dash {
  display: inline-block;
  width: 1.6em; height: 1px;
  margin: 0 .5em;
  vertical-align: middle;
  background: currentColor;
  opacity: .5;
}

.link {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: 6px 0 5px;                 /* cel ≥ 24px (WCAG 2.5.8) */
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 calc(100% - 4px);
  background-repeat: no-repeat;
  transition: opacity .25s var(--ease-io);
}
.link:hover { opacity: .55; }

.btn {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: 14px 22px;
  min-height: 44px;
  transition: background-color .3s var(--ease-io), color .3s var(--ease-io);
}
.btn--solid { background: var(--bone); color: var(--pine); }
.btn--solid:hover { background: var(--jade); color: var(--bone); }
.btn--wide { display: block; text-align: center; }
.btn--big {
  padding: 20px 32px;
  font-size: clamp(13px, 1.1vw, 17px);
}

/* linijka milimetrowa — motyw „dopracowane co do milimetra” */
.ruler {
  height: 14px;
  margin-top: var(--sec-y);
  background-image:
    linear-gradient(currentColor, currentColor),
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 10px),
    repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px 50px);
  background-size: 100% 1px, 100% 5px, 100% 12px;
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%, 0 100%;
  opacity: .4;
}
.ruler--top {
  margin: 0 0 var(--sec-y);
  background-position: 0 0, 0 0, 0 0;
}

/* ══════════════════════════════════════════════════════════════════
   OTWARCIE — przelot przez pokój z napisów
   Wnętrze sześcianu: cztery ściany wyklejone powtarzanym hasłem,
   na wprost tylna ściana z wordmarkiem. Kamera (scena) jedzie w głąb.
   ══════════════════════════════════════════════════════════════════ */
.loader {
  position: fixed; z-index: 300; inset: 0;
  background: var(--forest);
  transition: opacity .55s var(--ease-io), visibility .55s;
}
.loader.is-done { opacity: 0; visibility: hidden; }


.room {
  position: absolute; inset: 0;
  overflow: hidden;
  perspective: min(120vmin, 1100px);
  transition: opacity .5s var(--ease-io);
}
/* przy przekazaniu tło loadera znika NATYCHMIAST (ekran kryje wtedy tylna
   ściana pokoju) — podmiana znaku na prawdziwy nagłówek odbywa się bez
   żadnej półprzezroczystej warstwy nad słowem; inaczej słowo na moment
   ciemniało pod gasnącym zielonym tłem */
.loader.is-handoff { background: transparent; }
.loader.is-handoff .room { opacity: 0; }

.room__scene {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* głębokość pokoju */
.room { --depth: 130vmax; }

/* kamera rusza DOPIERO, gdy paski zaczynają wylatywać */
.loader.is-loading .room__scene {
  animation: room-fly 1.6s cubic-bezier(.55, 0, .28, 1) 2.15s forwards;
}
@keyframes room-fly {
  from { transform: translateZ(0); }
  to   { transform: translateZ(calc(var(--depth) * .84)); }
}

/* pudełko zakotwiczone w płaszczyźnie tylnej ściany — ściany-klapy
   obracają się wokół jego krawędzi z płaszczyzny w głąb pokoju */
.room__box {
  position: absolute; inset: 0;
  transform: translateZ(calc(-1 * var(--depth)));
  transform-style: preserve-3d;
}
.room__face--back {
  position: absolute; inset: 0;
  background: var(--forest);
  display: grid; place-items: center;
}

/* Ściany stoją od początku (puste = niewidoczne na zielonym tle).
   Tekst biegnie W POPRZEK tunelu: na suficie/podłodze paski poziome,
   na bokach pionowe — paski czterech ścian o tym samym --i tworzą
   pierścień. Każdy pierścień wjeżdża jako dwa L-kawałki, jak w inspiracji:
   sufit→prawa ściana i podłoga→lewa ściana (tekst płynie zgodnie z ruchem
   wskazówek zegara), pasek po pasku od tylnej ściany. Przy przelocie
   wyjeżdżają tą samą drogą. Kierunek wjazdu paska siedzi w --ring-from. */
.room__flap {
  position: absolute;
  background: var(--forest);
  overflow: hidden;
  backface-visibility: hidden;
}
/* starty po przekątnej: sufit wjeżdża z PRAWEGO górnego rogu, podłoga
   z LEWEGO dolnego; boki kontynuują zawinięcie (lewa w dół za sufitem,
   prawa w górę za podłogą) — obieg przeciwny do wskazówek zegara.
   Wyjazd NIE cofa się: tekst kontynuuje ruch i wylatuje po drugiej
   stronie (--ring-to = przeciwległa krawędź). */
.room__flap--top {
  left: 0; bottom: 100%; width: 100%; height: var(--depth);
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  --ring-from: translateX(115%);             /* płynie w lewo… */
  --ring-to:   translateX(-115%);            /* …i wylatuje lewą */
}
.room__flap--bottom {
  left: 0; top: 100%; width: 100%; height: var(--depth);
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  --ring-from: translateX(-115%);            /* płynie w prawo… */
  --ring-to:   translateX(115%);             /* …i wylatuje prawą */
}
.room__flap--left {
  top: 0; right: 100%; width: var(--depth); height: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(90deg);
  --ring-from: translateY(-115%);            /* płynie w dół… */
  --ring-to:   translateY(115%);             /* …i wylatuje dołem */
}
.room__flap--right {
  top: 0; left: 100%; width: var(--depth); height: 100%;
  transform-origin: 0 50%;
  transform: rotateY(-90deg);
  --ring-from: translateY(115%);             /* płynie w górę… */
  --ring-to:   translateY(-115%);            /* …i wylatuje górą */
}

.room__roll {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* na bokach paski są kolumnami ułożonymi wzdłuż głębi */
.room__flap--left .room__roll,
.room__flap--right .room__roll { flex-direction: row; }

/* pasek — wypełnia JS, --i (na pasku) to numer pierścienia licząc od
   tylnej ściany. Box paska musi obejmować cały tekst (max-content),
   żeby translateX/Y(±102%) naprawdę chowało go za krawędzią. */
.room__roll i {
  display: block;
  width: max-content;
  font-style: normal;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 125%;
  font-size: clamp(92px, 17.5vmax, 310px);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: lowercase;
  color: var(--pine);
  user-select: none;
  transform: var(--ring-from);
  will-change: transform;
}
.room__flap--left .room__roll i,
.room__flap--right .room__roll i {
  writing-mode: vertical-rl;
  width: auto;
  height: max-content;
  align-self: flex-start;
}
/* co drugi pasek przesunięty, żeby ściana nie była tapetą w kratkę */
.room__flap--top .room__roll i:nth-child(even),
.room__flap--bottom .room__roll i:nth-child(even) { margin-left: -.9em; }
.room__flap--left .room__roll i:nth-child(even),
.room__flap--right .room__roll i:nth-child(even) { margin-top: -.9em; }

/* delay musi być policzony NA PASKU (tam żyje --i) — dlatego longhand
   per ściana, a nie zmienna liczona na poziomie ściany */
/* wjazd: wolno → szybko (ease-in); wyjazd: ruch trwa dalej w tę samą
   stronę i pasek wylatuje po przeciwnej krawędzi. Tempo skrócone —
   intro ma być otwarciem strony, nie ekranem ładowania. */
.loader.is-loading .room__roll i {
  animation:
    ring-in  1.1s cubic-bezier(.5, 0, .85, .4)  0s both,
    ring-out .6s  cubic-bezier(.55, 0, .85, .3) 0s forwards;
}
.loader.is-loading .room__flap--top .room__roll i,
.loader.is-loading .room__flap--bottom .room__roll i {
  animation-delay: calc(.1s + var(--i) * .11s), calc(2.3s + var(--i) * .07s);
}
.loader.is-loading .room__flap--left .room__roll i,
.loader.is-loading .room__flap--right .room__roll i {
  animation-delay: calc(.36s + var(--i) * .11s), calc(2.15s + var(--i) * .07s);
}
@keyframes ring-in  { from { transform: var(--ring-from); } to { transform: none; } }
@keyframes ring-out { from { transform: none; } to { transform: var(--ring-to); } }

/* Te same metryki co .hero__word (krój, szerokość, tracking, interlinia) —
   dzięki temu przekazanie do hero to czysty translate + scale, glif w glif. */
.room__mark {
  display: flex;
  font-family: var(--f-znak);
  font-weight: 700; font-stretch: 125%;
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: .84;
  letter-spacing: -.035em;
  text-transform: lowercase;
  color: var(--bone);
  overflow: hidden;
  will-change: transform;
}
.room__mark span {
  display: block;
  transform: translateY(110%);
  transition: transform .9s var(--ease) .35s;
}
.loader.is-loading .room__mark span { transform: none; }
.room__mark span:nth-child(2) { transition-delay: .4s; }
.room__mark span:nth-child(3) { transition-delay: .45s; }
.room__mark span:nth-child(4) { transition-delay: .5s; }
.room__mark span:nth-child(5) { transition-delay: .55s; }
.room__mark span:nth-child(6) { transition-delay: .6s; }

/* ══════════════════════════════════════════════════════════════════
   INDYKATOR PRZEWIJANIA
   Pojawia się po intrze, znika przy pierwszym scrollu. Wędrująca
   kreska w poziomej linijce — nawiązanie do motywu milimetrów.
   ══════════════════════════════════════════════════════════════════ */
.hint {
  position: fixed; z-index: 80;
  right: var(--edge); bottom: 20px;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px;
  background: var(--forest);
  border: 1px solid var(--line-on-dark);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease-io), transform .8s var(--ease), visibility .6s;
  pointer-events: none;
}
.hint.is-on   { opacity: 1; transform: none; }
.hint.is-gone { opacity: 0; transform: translateY(10px); visibility: hidden; }

.hint__line {
  position: relative;
  width: 46px; height: 1px;
  background: var(--line-on-dark);
  overflow: hidden;
}
.hint__line i {
  position: absolute; top: 0; left: 0;
  width: 14px; height: 100%;
  background: var(--jade);
  animation: hint-slide 1.7s var(--ease-io) infinite;
}
@keyframes hint-slide {
  from { transform: translateX(-16px); }
  to   { transform: translateX(48px); }
}

/* ══════════════════════════════════════════════════════════════════
   BELKA / NAWIGACJA
   ══════════════════════════════════════════════════════════════════ */
.bar {
  position: fixed; z-index: 100; top: 0; left: 0;
  width: 100%; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--gut);
  padding: 0 var(--edge);
  color: var(--bone);
  transition: background-color .4s var(--ease-io), border-color .4s;
  border-bottom: 1px solid transparent;
}
.bar.is-stuck {
  background: var(--forest);
  border-bottom-color: var(--line-on-dark);
}
.bar.is-open { background: var(--forest); }

.bar__mark {
  display: flex; flex-direction: column;
  font-family: var(--f-znak);
  font-weight: 700; font-stretch: 112%;
  line-height: .96;
  letter-spacing: -.02em;
  text-transform: lowercase;
  margin-right: auto;
}
.bar__mark-1 { font-size: clamp(17px, 1.5vw, 23px); }
.bar__mark-2 {
  font-family: var(--f-mono);
  font-weight: 400; font-stretch: normal;
  font-size: clamp(8.5px, .62vw, 10.5px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.bar__nav { display: flex; gap: clamp(14px, 1.9vw, 34px); }
.bar__nav a {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: 6px 0;
  position: relative;
}
.bar__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s var(--ease);
}
.bar__nav a:hover::after { transform: scaleX(1); }

.bar__end { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 24px); }
.bar__tel {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: .08em;
  padding: 8px 0;                     /* cel ≥ 24px */
}

/* ══════════════════════════════════════════════════════════════════
   PRZEŁĄCZNIK JĘZYKA
   W belce: natywne <details> — działa bez JS i z klawiatury, a zwinięte
   zajmuje 35 px, więc mieści się w belce na każdej szerokości (cztery
   kody obok siebie już nie). W menu mobilnym: wiersz z pełnymi nazwami.
   ══════════════════════════════════════════════════════════════════ */
.lang { position: relative; flex: none; }
.lang__now {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 2px;
  min-height: 24px;
  cursor: pointer;
  list-style: none;
  transition: opacity .25s var(--ease-io);
}
.lang__now::-webkit-details-marker { display: none; }
.lang__now:hover { opacity: .6; }
.lang__now:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
/* strzałka: dwie kreski w daszek, bez ikonografii z zewnątrz */
.lang__v {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .3s var(--ease);
}
.lang[open] .lang__v { transform: translateY(1px) rotate(-135deg); }

.lang__list {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  min-width: 150px;
  display: flex; flex-direction: column;
  background: var(--pine);
  border: 1px solid var(--line-on-dark);
  padding: 6px 0;
}
.lang__list a {
  padding: 11px 18px;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: .06em;
  white-space: nowrap;
  transition: background-color .2s var(--ease-io);
}
.lang__list a:hover { background: var(--forest); }

/* menu mobilne */
.lang-m {
  display: flex; flex-wrap: wrap;
  gap: 0 clamp(14px, 4vw, 26px);
  padding-bottom: clamp(18px, 3vw, 28px);
}
.lang-m a, .lang-m__on {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: 10px 0;
  min-height: 44px;
  display: flex; align-items: center;
}
.lang-m__on { color: var(--bone-dim); text-decoration: underline; text-underline-offset: 5px; }
.lang-m a { color: var(--bone); opacity: .75; transition: opacity .25s var(--ease-io); }
.lang-m a:hover { opacity: 1; }

.burger { display: none; align-items: center; gap: 9px; padding: 10px 0; min-height: 44px; }
.burger__lines { display: block; width: 22px; }
.burger__lines i {
  display: block; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s;
}
.burger__lines i:first-child { margin-bottom: 5px; }
.burger.is-on i:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger.is-on i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
.burger__txt {
  font-family: var(--f-mono); font-size: var(--fs-mono);
  text-transform: uppercase; letter-spacing: .11em;
}

/* menu mobilne */
.menu {
  position: fixed; z-index: 90; inset: 0;
  padding: calc(var(--bar-h) + 6vh) var(--edge) calc(var(--edge) + 8px);
  background: var(--forest);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .25s var(--ease-io);   /* wygaszenie w rytmie JS (hidden po 260 ms) */
}
.menu.is-in { opacity: 1; }
.menu[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(32px, 10vw, 58px);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-transform: lowercase;
  padding: 6px 0;
  overflow: hidden;
}
.menu__nav a span { display: block; transform: translateY(105%); }
.menu.is-in .menu__nav a span {
  transform: none;
  transition: transform .7s var(--ease);
}
.menu.is-in .menu__nav a:nth-child(2) span { transition-delay: .05s; }
.menu.is-in .menu__nav a:nth-child(3) span { transition-delay: .1s; }
.menu.is-in .menu__nav a:nth-child(4) span { transition-delay: .15s; }
.menu.is-in .menu__nav a:nth-child(5) span { transition-delay: .2s; }
.menu.is-in .menu__nav a:nth-child(6) span { transition-delay: .25s; }

.menu__foot { padding-top: 8vh; }
.menu__foot .mono { color: var(--bone-dim); }
.menu__tel {
  display: block;
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(26px, 8vw, 40px);
  letter-spacing: -.02em;
  padding: 14px 0 22px;
}

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--bar-h) + clamp(24px, 4vw, 56px)) var(--edge) 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  overflow: clip;
}

/* nadtytuł niesie kategorię i dzielnicę — ma się dać przeczytać, więc pełna
   kość zamiast przygaszonej i stopień ponad --fs-mono */
.hero__eyebrow {
  color: var(--bone);
  font-size: clamp(11.5px, .92vw, 15px);
  letter-spacing: .14em;
}

.hero__type {
  container-type: inline-size;
  padding-top: clamp(16px, 3vw, 40px);
  font-size: 1rem;      /* h1 nie może narzucić dzieciom 2em ani boldu — */
  font-weight: 400;     /* każda część lockupu ustawia swoje metryki sama */
}
/* 25.5cqw wynika z pomiaru: „empire” w Archivo 700 / wdth 125 / tracking
   -.035em ma szerokość 3.93em, więc szerokość kolumny / 3.93 ≈ .255 */
.hero__word {
  display: block;
  font-family: var(--f-znak);
  font-weight: 700; font-stretch: 125%;
  font-size: 23cqw;   /* ~90% szerokości kolumny (25.5 = pełna) */
  line-height: .84;
  letter-spacing: -.035em;
  text-transform: lowercase;
  text-align: center;
}
.hero__spread {
  display: flex; justify-content: space-between;
  width: 90.4%;   /* = szerokość wordmarku przy 23cqw */
  margin-inline: auto;   /* wyśrodkowane razem ze słowem nad spodem */
  padding-top: clamp(6px, .8vw, 12px);
  font-family: var(--f-mono);
  font-size: clamp(9px, 1.02cqw, 15px);
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* druga część nagłówka: kategoria i adres. Mniejsza od wordmarku, ale wciąż
   głosem nagłówka — stąd Archivo, a nie mono jak nadtytuł nad znakiem */
.hero__where {
  display: block;
  padding-top: clamp(12px, 1.7cqw, 24px);
  font-family: var(--f-znak);
  font-weight: 500; font-stretch: 104%;
  font-size: clamp(15px, 3.2cqw, 28px);
  line-height: 1.18;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
  color: var(--bone-dim);
}

.hero__say { padding-top: clamp(28px, 4vw, 60px); max-width: 48ch; }
.hero__quote {
  font-family: var(--f-text);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.7vw, 42px);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.hero__note {
  padding-top: 14px;
  font-size: var(--fs-body);
  color: var(--bone-dim);
  max-width: 48ch;
}

/* panel rezerwacji — kość na zieleni, najmocniejszy punkt hero */
.hero__book {
  margin: clamp(32px, 5vw, 48px) calc(var(--edge) * -1) 0;
  background: var(--bone);
  color: var(--pine);
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 40px);
  gap: clamp(28px, 4vw, 56px);
}
/* eyebrow wytłuszczony — ma otwierać panel, nie szeptać */
.hero__book-eyebrow { font-weight: 500; letter-spacing: .14em; }

/* CTA Booksy i telefon w ramkach — jednoznacznie klikalne,
   hover odwraca kolory (kość ↔ zieleń-czerń) */
.hero__book-cta {
  display: block;
  border: 2px solid var(--pine);
  padding: clamp(18px, 2.2vw, 30px);
  transition: background-color .3s var(--ease-io), color .3s var(--ease-io);
}
.hero__book-cta:hover,
.hero__book-cta:focus-visible { background: var(--pine); color: var(--bone); }
/* dopisek POD ramką, nie w niej — tak chciał klient */
.hero__book-cta-sub {
  padding-top: 12px;
  opacity: .7;
}
.hero__book-cta-w {
  display: block;
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 118%;
  font-size: clamp(31px, 3.24vw, 52px);   /* −10% na życzenie klienta */
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: lowercase;
}

.hero__book-alt {
  margin-top: auto;
  border-top: 1px solid var(--line-on-light);
  padding-top: clamp(16px, 2vw, 24px);
}
.hero__book-label { opacity: .6; padding-bottom: 10px; }
.hero__book-tel {
  display: block;   /* pełna szerokość — równo z ramką Booksy */
  border: 2px solid var(--pine);
  padding: 12px 20px;
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1;
  letter-spacing: -.03em;
  transition: background-color .3s var(--ease-io), color .3s var(--ease-io);
}
.hero__book-tel:hover,
.hero__book-tel:focus-visible { background: var(--pine); color: var(--bone); }
.hero__book-addr { padding-top: 14px; opacity: .6; }
/* maźnięcie zielenią marki — delikatnie wybija się z atramentowego panelu
   (forest na kości: kontrast 5,7:1, AA dla drobnego tekstu) */
.hero__book-map {
  margin-top: 10px;
  color: var(--forest);
  font-weight: 500;
}

.hero__foot {
  display: flex; flex-wrap: wrap;
  gap: 0 clamp(18px, 3vw, 48px);
  margin-top: auto;
  padding: clamp(16px, 2vw, 24px) 0;
  border-top: 1px solid var(--line-on-dark);
}
.hero__foot-a {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: 8px 0;
  min-height: 44px;
  display: flex; align-items: center;
  transition: opacity .25s var(--ease-io);
}
.hero__foot-a:hover { opacity: .6; }
/* na zieleni marki jadeitowy TEKST ginie (za mały kontrast z tłem) —
   tekst zostaje jasny, maźnięcie robi jadeitowe podkreślenie */
.hero__foot-a--map {
  margin-left: auto;
  color: var(--bone-dim);
  text-decoration: underline;
  text-decoration-color: var(--jade);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ══════════════════════════════════════════════════════════════════
   PASEK PRZEWIJANY
   ══════════════════════════════════════════════════════════════════ */
.strip {
  background: var(--bone);
  color: var(--pine);
  overflow: hidden;
  padding: 11px 0;
  border-block: 1px solid var(--pine);
}
.strip__track {
  display: flex; width: max-content;
  animation: slide 42s linear infinite;
}
.strip__track span {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  white-space: nowrap;
  padding-right: 2em;
}
.strip__track b { font-weight: 400; opacity: .45; padding: 0 .3em; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ══════════════════════════════════════════════════════════════════
   PODEJŚCIE  (tło jasne)
   ══════════════════════════════════════════════════════════════════ */
.approach {
  background: var(--bone);
  color: var(--pine);
  padding: var(--sec-y) var(--edge) 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gut);
}
.approach .cat { grid-column: 1 / -1; padding-bottom: clamp(24px, 3.4vw, 52px); }
.approach__lead {
  grid-column: 1 / -1;
  font-family: var(--f-display);
  font-weight: 500; font-stretch: 100%;
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.approach__body {
  grid-column: 1 / -1;
  padding-top: clamp(26px, 3.4vw, 52px);
}
.approach__body p { max-width: 46ch; }
.approach__body p + p { margin-top: 1em; }
.approach__body .link { margin-top: clamp(20px, 2.4vw, 34px); }
.approach .ruler { grid-column: 1 / -1; }

/* ══════════════════════════════════════════════════════════════════
   BARBERZY  (zieleń-czerń)
   Sekcja odpowiada na „chcę wracać do tej samej osoby”, więc imiona
   dostają największy głos: cztery tabliczki jak przy fotelach,
   rozdzielone włoskową kreską. Bez wymyślonych specjalizacji —
   dopiszemy je, gdy przyjdą od klienta.
   ══════════════════════════════════════════════════════════════════ */
.crew {
  background: var(--pine);
  padding: var(--sec-y) var(--edge);
}
.crew__head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2.6vw, 38px) var(--gut);
  padding-bottom: clamp(34px, 4.4vw, 66px);
}
.crew__cat  { grid-column: 1 / -1; max-width: 21ch; text-wrap: balance; }
.crew__lead { grid-column: 1 / -1; max-width: 46ch; }

.crew__list {
  --sep: clamp(28px, 3vw, 52px);       /* odstęp między stanowiskami */
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line-on-dark);
}
.crew__one {
  position: relative;
  padding: clamp(15px, 1.8vw, 24px) 0;
  border-bottom: 1px solid var(--line-on-dark);
}
/* Kreska między stanowiskami stoi w POŁOWIE odstępu (pseudoelement, nie
   border), więc wszystkie kolumny — a z nimi kadry zdjęć — mają dokładnie
   tę samą szerokość, a pierwsza i ostatnia trzymają krawędź sekcji.
   Na telefonie (jedna kolumna) kreski nie ma: `content: none` gasi cały
   pseudoelement, włączają go dopiero media query poniżej. */
.crew__one::before {
  content: none;
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--sep) / -2);
  width: 1px;
  background: var(--line-on-dark);
}
.crew__name {
  display: block;
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(27px, 3.2vw, 50px);
  line-height: 1.04;
  letter-spacing: -.03em;
}
/* portret barbera — czeka na zdjęcia (odkomentuj w index.html) */
.crew__photo { display: block; margin-bottom: clamp(14px, 1.6vw, 22px); }
.crew__photo img {
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.crew__foot {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px) var(--gut);
  padding-top: clamp(26px, 3.2vw, 46px);
}
.crew__note { color: var(--ash); max-width: 42ch; }
.crew__go { justify-self: start; }

/* ══════════════════════════════════════════════════════════════════
   CENNIK  (zielony)
   ══════════════════════════════════════════════════════════════════ */
.prices { padding: var(--sec-y) 0; }

.prices__head {
  padding: 0 var(--edge) clamp(38px, 5vw, 74px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gut);
}
.prices__head .cat { grid-column: 1 / -1; }
.prices__head .sub {
  grid-column: 1 / -1;
  padding-top: clamp(14px, 1.6vw, 22px);
}
.prices__intro {
  grid-column: 1 / -1;
  padding-top: clamp(20px, 2.4vw, 30px);
  max-width: 44ch;
  color: var(--bone-dim);
}

.ledger { border-top: 1px solid var(--line-on-dark); }
.row { border-bottom: 1px solid var(--line-on-dark); }

.row__a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 20px) var(--gut);
  padding: clamp(24px, 3vw, 46px) var(--edge);
  transition: color .45s var(--ease-io);
}
.row__fill {
  position: absolute; inset: 0;
  background: var(--bone);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .55s var(--ease);
}
.row__a:hover, .row__a:focus-visible { color: var(--pine); }
.row__a:hover .row__fill,
.row__a:focus-visible .row__fill { clip-path: inset(0); }
.row__a > *:not(.row__fill) { position: relative; }

/* miniatura usługi — aktywna po odkomentowaniu w HTML */
.row__thumb {
  display: block;
  width: clamp(64px, 6vw, 96px);
  aspect-ratio: 1;
  overflow: hidden;
  align-self: start;
}
.row__thumb img { width: 100%; height: 100%; object-fit: cover; }

.row__name {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 118%;
  font-size: clamp(28px, 3.5vw, 54px);
  line-height: .96;
  letter-spacing: -.035em;
  text-transform: lowercase;
  text-wrap: balance;
  align-self: start;
}

.row__flag {
  display: inline-block;
  vertical-align: middle;
  margin-left: .8em;
  padding: 5px 9px 4px;
  font-style: normal;
  font-size: clamp(8.5px, .62vw, 10px);
  letter-spacing: .14em;
  border: 1px solid currentColor;
  color: var(--jade);
  white-space: nowrap;
}
.row__a:hover .row__flag,
.row__a:focus-visible .row__flag { color: var(--forest); }

.row__tags {
  display: flex; flex-wrap: wrap; gap: 6px 0;
  font-size: clamp(11px, .82vw, 13.5px);
  line-height: 1.7;
  letter-spacing: .055em;
}
/* separator jest treścią inline, żeby przy zawijaniu nie zostawał sam */
.row__tags span::after {
  content: "·";
  opacity: .45;
  margin: 0 .55em 0 .6em;
}
.row__tags span:last-child::after { content: none; }

.row__price { display: flex; align-items: baseline; gap: .55em; }
.row__was {
  font-family: var(--f-mono);
  font-size: clamp(13px, 1.1vw, 17px);
  opacity: .55;
  position: relative;
}
.row__was::after {
  content: ""; position: absolute; left: -6%; right: -6%; top: 52%;
  height: 1px; background: currentColor;
}
.row__now {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(34px, 3.6vw, 58px);
  line-height: .9;
  letter-spacing: -.04em;
}
.row__now i {
  font-style: normal;
  font-size: clamp(10px, .8vw, 13px);
  letter-spacing: .12em;
  padding-left: .35em;
  vertical-align: super;
}

/* ── pełny cennik: rozwijana lista pod trzema wierszami ──────────────
   Natywny <details> — treść zostaje w DOM przy zwinięciu, więc widzi ją
   wyszukiwarka, a rzecz działa bez JS i z klawiatury. Zwinięty wiersz
   wygląda jak kolejny wiersz ledgera i zamyka jego stos. */
.full { border-bottom: 1px solid var(--line-on-dark); }

.full__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gut);
  padding: clamp(20px, 2.2vw, 30px) var(--edge);
  cursor: pointer;
  list-style: none;                 /* zdejmuje natywny trójkąt (Firefox) */
  color: var(--bone-dim);
  transition: color .35s var(--ease-io);
}
.full__toggle::-webkit-details-marker { display: none; }   /* i w WebKicie */
.full__toggle:hover,
.full[open] .full__toggle { color: var(--bone); }
.full__toggle:focus-visible { outline-offset: -5px; }

.full__label-b { display: none; }
.full[open] .full__label-a { display: none; }
.full[open] .full__label-b { display: inline; }

/* plus, który przy otwarciu kładzie się w minus */
.full__sign { position: relative; flex: none; width: 15px; height: 15px; }
.full__sign i {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform .4s var(--ease);
}
.full__sign i:last-child { transform: rotate(90deg); }
.full[open] .full__sign i:last-child { transform: none; }

.full__body { padding: 0 var(--edge) clamp(30px, 4vw, 56px); }

.full__group { break-inside: avoid; margin-bottom: clamp(28px, 3.2vw, 46px); }
.full__group:last-child { margin-bottom: 0; }

.full__cat {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(19px, 1.7vw, 27px);
  line-height: 1.1;
  letter-spacing: -.025em;
  text-transform: lowercase;
  padding-bottom: clamp(6px, .8vw, 12px);
}

/* nazwa usługi krojem tekstowym, czas i cena monospace'em — liczby mają
   stać w kolumnie, nazwa ma się czytać jak zdanie */
.full__tab { width: 100%; border-collapse: collapse; }
.full__tab th,
.full__tab td {
  padding: clamp(8px, .85vw, 12px) 0;
  border-bottom: 1px solid var(--line-on-dark);
  text-align: left;
  vertical-align: baseline;
}
.full__tab tr:last-child th,
.full__tab tr:last-child td { border-bottom: 0; }
.full__tab th {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.3;
  padding-right: clamp(12px, 1.4vw, 22px);
}
.full__tab td {
  width: 1%;                        /* kolumny liczbowe kurczą się do treści */
  font-family: var(--f-mono);
  font-size: clamp(11px, .78vw, 13px);
  letter-spacing: .06em;
  white-space: nowrap;
  color: var(--bone-dim);
}
.full__tab td.full__time { padding-right: clamp(14px, 1.6vw, 26px); }
.full__tab td.full__price { text-align: right; color: var(--bone); }

.prices__foot {
  padding: clamp(26px, 3vw, 44px) var(--edge) 0;
  color: var(--bone-dim);
  max-width: 60ch;
}
.prices__foot a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.prices__foot a:hover { opacity: .6; }

/* ══════════════════════════════════════════════════════════════════
   PORTFOLIO  (ciemny) — druga sekcja, zaraz po hero
   W index.html zakomentowana do momentu, gdy wpadną zdjęcia prac.
   Styl gotowy — instrukcja włączenia w HTML.
   ══════════════════════════════════════════════════════════════════ */
.works {
  background: var(--pine);
  padding: var(--sec-y) var(--edge);
}
.works__head {
  padding-bottom: clamp(34px, 4.4vw, 66px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px var(--gut);
}
.works__head .cat  { grid-column: 1; }
.works .sub        { grid-column: 1; color: var(--ash); padding-top: clamp(14px, 1.6vw, 22px); }
.works__hint       { grid-column: 2; grid-row: 2; color: var(--ash); }

/* taśma: przewijana w bok, wysokość stała, szerokości z proporcji zdjęć;
   wyjeżdża spod prawej krawędzi ekranu (sygnał, że jest dalej) */
.reel {
  display: flex;
  gap: var(--gut);
  margin-inline: calc(-1 * var(--edge));
  padding-inline: var(--edge);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--edge);
  scrollbar-width: none;
  cursor: grab;
}
.reel::-webkit-scrollbar { display: none; height: 0; }
.reel.is-drag { cursor: grabbing; scroll-snap-type: none; }
.reel:focus-visible { outline: 2px solid var(--jade); outline-offset: -2px; }

.reel__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  user-select: none;
}
.reel__item img {
  height: clamp(340px, 46vw, 560px);
  width: auto;
  max-width: none;
  pointer-events: none;   /* drag łapie figure, nie natywny image-drag */
}
.reel__item figcaption {
  padding-top: 12px;
  color: var(--ash);
}
.works__more {
  padding-top: clamp(30px, 3.6vw, 54px);
  color: var(--ash);
}
.works__more a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.works__more a:hover { opacity: .6; }

/* ══════════════════════════════════════════════════════════════════
   OPINIE  (tło jasne, układ asymetryczny)
   ══════════════════════════════════════════════════════════════════ */
.reviews {
  background: var(--bone);
  color: var(--pine);
  padding: var(--sec-y) var(--edge);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(38px, 4.6vw, 76px) var(--gut);
  align-items: start;
}
.reviews__head {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--gut);
  border-bottom: 1px solid var(--line-on-light);
  padding-bottom: 14px;
}
.reviews__head .cat { padding-bottom: 0; }

/* Ocena zbiorcza. Jedyna liczba na stronie, więc dostaje w sekcji największy
   stopień, a podpis mówi wprost, skąd jest — link prowadzi do Booksy, gdzie
   każdy sprawdzi, czy się zgadza. */
.score {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px clamp(14px, 1.8vw, 28px);
}
.score__num {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 118%;
  font-size: clamp(52px, 6.6vw, 104px);
  line-height: .82;
  letter-spacing: -.04em;
}
.score__txt {
  font-family: var(--f-display);
  font-weight: 500; font-stretch: 104%;
  font-size: var(--fs-h3);
  line-height: 1.16;
  letter-spacing: -.02em;
  /* baza 24ch: dopóki obok liczby jest tyle miejsca, podpis stoi w jednej
     linii; na wąskim ekranie zawija się pod liczbę, a nie ściska między nią
     i krawędzią */
  flex: 1 1 24ch;
  max-width: 46ch;
  opacity: .72;
}
.score__txt a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.score__txt a:hover { opacity: .6; }

/* skąd są opinie — na wersjach obcojęzycznych mówi też, że to tłumaczenia */
.reviews__zrodlo {
  grid-column: 1 / -1;
  color: var(--pine);
  opacity: .55;
}

.rev blockquote p {
  font-family: var(--f-text);
  font-weight: 300;
  text-wrap: pretty;
}
.rev figcaption {
  padding-top: clamp(14px, 1.6vw, 22px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.rev figcaption > span:last-child { opacity: .6; }
/* kółko z inicjałami — jak awatar przy opinii Google */
.rev__ava {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  letter-spacing: .04em;
}
.rev--long    { grid-column: 1 / -1; }
.rev--mid     { grid-column: 1 / -1; }
.rev--short   { grid-column: 1 / -1; }

.rev--long blockquote p  { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -.012em; }
.rev--mid blockquote p   { font-size: var(--fs-lead); line-height: 1.26; letter-spacing: -.012em; font-style: italic; }
.rev--short blockquote p { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -.012em; }

/* sloty rotacji — pula opinii większa niż widok; JS przełącza .is-on
   kolejno slot po slocie. Z JS slot dostaje .is-dynamic: opinie leżą
   absolutnie, a wysokość slotu (mierzona w main.js) podąża za widoczną
   opinią z płynnym przejściem — krótka opinia nie wisi nad pustką po
   najdłuższej z puli. Bez JS: grid, wysokość najdłuższej, widać pierwszą. */
.rev-slot { display: grid; }
.rev-slot.is-dynamic {
  position: relative;
  transition: height .6s var(--ease-io);
}
.rev-slot.is-dynamic .rev { position: absolute; inset: 0 0 auto; }
.rev-slot .rev {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  transition:
    opacity .45s var(--ease-io),
    transform .45s var(--ease-io),
    visibility 0s linear .45s;
}
.rev-slot .rev.is-on {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity .5s var(--ease-io) .3s,
    transform .5s var(--ease-io) .3s,
    visibility 0s linear .3s;
}
@media (prefers-reduced-motion: reduce) {
  .rev-slot.is-dynamic,
  .rev-slot .rev, .rev-slot .rev.is-on { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   O NAS  (zielony)
   ══════════════════════════════════════════════════════════════════ */
.about { padding: 0 var(--edge) var(--sec-y); }
.about .eyebrow { color: var(--bone-dim); }
.about__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(26px, 3vw, 48px) var(--gut);
}
.about .cat { padding-bottom: clamp(24px, 3.4vw, 52px); }
.about__sub { grid-column: 1 / -1; }
.about__photo { grid-column: 1 / -1; }
.about__photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }   /* kwadrat 1:1 = pełny kadr frontu z szyldem i słupkiem */
.about__photo figcaption { padding-top: 12px; color: var(--bone-dim); }
.about__body { grid-column: 1 / -1; }
.about__body p + p { padding-top: 1.1em; }
.about__body p { max-width: 48ch; }

/* Trzy konkrety pod tekstem sekcji. Ten sam układ „etykieta + zdanie" co
   w bloku rezerwacji, tylko etykiety w przygaszonej kości — jadeit czytelny
   jest na zieleni-czerni, na zieleni marki już nie. */
.facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 2.6vw, 34px) var(--gut);
  border-top: 1px solid var(--line-on-dark);
  padding-top: clamp(22px, 2.6vw, 34px);
}
.facts__label { color: var(--bone-dim); padding-bottom: clamp(10px, 1.2vw, 16px); }
.facts__txt { max-width: 34ch; }

/* ══════════════════════════════════════════════════════════════════
   REZERWACJA + STOPKA  (ciemny blok zamykający)
   ══════════════════════════════════════════════════════════════════ */
.book {
  background: var(--pine);
  padding: var(--sec-y) var(--edge) clamp(56px, 7vw, 110px);
}
.book__title {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 122%;
  font-size: clamp(40px, 9vw, 150px);
  line-height: .86;
  letter-spacing: -.045em;
  text-transform: lowercase;
  padding-bottom: clamp(40px, 5vw, 84px);
}
.book__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 4vw, 56px) var(--gut);
  border-top: 1px solid var(--line-on-dark);
  padding-top: clamp(28px, 3vw, 44px);
}
.book__label { color: var(--jade); padding-bottom: clamp(14px, 1.8vw, 24px); }
.book__hint { padding-top: 16px; color: var(--ash); max-width: 32ch; }
.book__tel {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: -.03em;
  transition: color .3s var(--ease-io);
}
.book__tel:hover { color: var(--jade); }
/* godziny: ten sam krój co telefon, o stopień ciszej — numer zostaje
   najgłośniejszą rzeczą w bloku, bo to on jest wezwaniem do działania */
.book__hours {
  font-family: var(--f-display);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.06;
  letter-spacing: -.03em;
}
.book__hours time { font-variant-numeric: tabular-nums; }
.book__addr { line-height: 1.5; }
.book__addr + .link { margin-top: 18px; }
/* na zieleni-czerni maźnięcie jadeitem (kontrast ~5,4:1) */
.book__map { color: var(--jade); font-weight: 500; }

.foot {
  background: var(--pine);
  padding: 0 var(--edge);
  overflow: clip;
  container-type: inline-size;
}
.foot__top {
  display: flex; flex-wrap: wrap;
  gap: 0 clamp(18px, 2.6vw, 40px);
  border-top: 1px solid var(--line-on-dark);
  padding: clamp(14px, 1.6vw, 20px) 0 clamp(26px, 4vw, 54px);
}
.foot__link {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: 10px 0;
  min-height: 44px;
  display: flex; align-items: center;
  transition: opacity .25s var(--ease-io);
}
.foot__link:hover { opacity: .6; }
/* „© 2026 Empire Barberhouse" to trzy elementy flexa (znak, <span> z rokiem,
   nazwa) — a flex nie renderuje spacji MIĘDZY elementami, więc odstęp musi
   dać gap, inaczej wychodzi „©2026EMPIRE" */
.foot__link--flat { color: var(--ash); margin-left: auto; gap: .35em; }
.foot__link--map {
  text-decoration: underline;
  text-decoration-color: var(--jade);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.foot__word {
  font-family: var(--f-znak);
  font-weight: 700; font-stretch: 125%;
  font-size: 25.5cqw;   /* ta sama proporcja co w hero */
  line-height: .72;
  letter-spacing: -.035em;
  text-transform: lowercase;
  color: var(--forest);
  margin-bottom: -.15em;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════════════
   REVEAL
   ══════════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-io), transform .9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal-mask] { overflow: hidden; }
[data-reveal-mask] > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1s var(--ease);
}
[data-reveal-mask].is-in > span { transform: none; }

/* ══════════════════════════════════════════════════════════════════
   ≥ 620px
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 620px) {

  /* dwie tabliczki w rzędzie, kreska w środku rzędu */
  .crew__list { grid-template-columns: repeat(2, 1fr); column-gap: var(--sep); }
  .crew__one:nth-child(2n)::before { content: ""; }

  .row__a { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .row__name { grid-column: 1; grid-row: 1; }
  .row__price { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .row__what { grid-column: 1 / -1; grid-row: 2; }
  /* wariant z miniaturą (po odkomentowaniu w HTML) */
  .row__a:has(.row__thumb) { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .row__a:has(.row__thumb) .row__name  { grid-column: 2; }
  .row__a:has(.row__thumb) .row__price { grid-column: 3; }
  .row__a:has(.row__thumb) .row__what  { grid-column: 1 / -1; }

  .full__body { columns: 2; column-gap: clamp(40px, 5vw, 80px); }

  .facts { grid-template-columns: repeat(3, 1fr); }

  .book__cols { grid-template-columns: repeat(2, 1fr); }   /* 2×2: rezerwacja / telefon, adres / godziny */


  .rev--long  { grid-column: 1 / span 6; }
  .rev--mid   { grid-column: 8 / span 5; }
  .rev--short { grid-column: 3 / span 5; }
}

/* ══════════════════════════════════════════════════════════════════
   ≥ 860px — układ pełny
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 860px) {
  .burger { display: none !important; }

  .hero {
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: var(--gut);
    padding-right: 0;
    align-content: stretch;
  }
  .hero__eyebrow { grid-column: 1; grid-row: 1; }
  .hero__type    { grid-column: 1; grid-row: 2; }
  .hero__say     { grid-column: 1; grid-row: 3; align-self: center; padding: 0; }
  .hero__foot    { grid-column: 1; grid-row: 4; margin-right: var(--gut); }

  /* panel rezerwacji wypełnia prawą kolumnę na całą wysokość hero */
  .hero__book {
    grid-column: 2;
    grid-row: 1 / -1;
    margin: 0;
    min-height: 0;
  }

  .approach__lead  { grid-column: 1 / span 6; }
  .approach__body  { grid-column: 8 / -1; }

  .crew__head { align-items: end; }
  .crew__cat  { grid-column: 1 / span 7; }
  .crew__lead { grid-column: 9 / -1; }
  /* cztery fotele obok siebie — jeden rząd, trzy kreski */
  .crew__list {
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--line-on-dark);
  }
  .crew__one { border-bottom: 0; }
  .crew__one:nth-child(n+2)::before { content: ""; }
  .crew__foot { grid-template-columns: repeat(12, 1fr); align-items: baseline; }
  .crew__note { grid-column: 1 / span 6; }
  .crew__go   { grid-column: 9 / -1; }

  .prices__head .sub { grid-column: 1 / span 5; }
  .prices__intro { grid-column: 9 / -1; grid-row: 2; padding-top: clamp(14px, 1.6vw, 22px); }

  .row__a { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2.6fr); align-items: start; }
  .row__name  { grid-column: 1; grid-row: 1; }
  .row__what  { grid-column: 2; grid-row: 1; padding-top: .5em; }
  .row__price { grid-column: 3; grid-row: 1; justify-content: flex-end; }
  /* wariant z miniaturą (po odkomentowaniu w HTML) */
  .row__a:has(.row__thumb) { grid-template-columns: auto minmax(0, 4.4fr) minmax(0, 4fr) minmax(0, 2.6fr); }
  .row__a:has(.row__thumb) .row__name  { grid-column: 2; }
  .row__a:has(.row__thumb) .row__what  { grid-column: 3; }
  .row__a:has(.row__thumb) .row__price { grid-column: 4; }
  .row__flag { display: block; margin: .7em 0 0; width: fit-content; }
  .row__tags { display: block; }
  .row__tags span { display: block; }
  .row__tags span::after { content: none; }

  .about__sub   { grid-column: 1 / span 6; grid-row: 1; }
  .about__photo { grid-column: 1 / span 5; grid-row: 2; }
  .about__body  { grid-column: 8 / -1; grid-row: 1 / span 2; }
  .facts        { grid-row: 3; }

  .book__cols { grid-template-columns: repeat(4, 1fr); }

  .foot__word { font-size: 16vw; }
}

/* ══════════════════════════════════════════════════════════════════
   ≥ 1280px — dokręcenie proporcji
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .rev--long  { grid-column: 2 / span 5; }
  .rev--mid   { grid-column: 8 / span 4; }
  .rev--short { grid-column: 4 / span 4; }

}

/* ══════════════════════════════════════════════════════════════════
   MOBILE < 860px — belka
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 859px) {
  .bar__nav, .bar__end { display: none; }
  .burger { display: flex; }
  .hero__foot-a--map { margin-left: 0; }
}

/* kotwice nie chowają się pod belką */
[id] { scroll-margin-top: calc(var(--bar-h) + 8px); }

/* ══════════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .page { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .strip__track { animation: none; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal-mask] > span { transform: none; }
  .loader { display: none; }
}