/* ============================================================
   ZÁKLAD – tokens, reset, typografia
   1rem = 10px (62.5%). Veľkosti zapisujeme v rem.
   ============================================================ */
:root {
  /* paleta */
  --cream:        #f5efe6;     /* hlavné krémové pozadie */
  --cream-2:      #ede5d6;     /* hlbší tón pre sekcie */
  --paper:        #faf6ef;     /* svetlejšia varianta krému */
  --espresso:     #2a1c14;     /* tmavá hnedá – hlavný foreground */
  --espresso-2:   #1a110b;     /* takmer čierna na footer */
  --burgundy:     #7a2a1d;     /* cihlovo-burgundská, akcent sparingly */
  --brass:        #8a7a52;     /* tlumená mosaz na hairlines */
  --ink:          #221812;     /* deep ink pre body text */
  --line:         rgba(42, 28, 20, .18);
  --line-soft:    rgba(42, 28, 20, .10);

  /* typografia */
  --serif: "Fraunces", "GT Super", "Newsreader", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* „Mono" texty teraz nie sú monospace – je to bold sans s vyrazenym letter-spacingom (2px). */
  --label: var(--sans);

  /* layout */
  --pad-x:     clamp(2.4rem, 4vw, 7.2rem);
  --maxw:      152rem;
  --gut:       clamp(2.4rem, 2vw, 3.2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1.55;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* utility – container */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* utility – meta caption (mosadzový hairline štítok) */
.eyebrow {
  font-family: var(--label);
  font-size: 1.2rem;
  letter-spacing: .2rem; /* 2px */
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.8rem;
  height: 1px;
  background: var(--brass);
}

/* ============================================================
   NAVIGÁCIA – sticky, minimal
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--cream) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
/* tmavá varianta pri prekrytí hero */
.nav.is-dark {
  background: color-mix(in oklab, var(--espresso-2) 35%, transparent);
  border-bottom-color: rgba(245, 239, 230, .14);
  color: var(--cream);
}
.nav.is-dark .nav__cta { border-color: var(--cream); }
.nav.is-dark .nav__logo .dot { background: var(--cream); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4.8rem;
  height: 8.4rem;
}
.nav__right-group {
  display: flex;
  align-items: center;
  gap: 4.8rem;
  margin-left: auto;
}
.nav__logo {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: 2.4rem;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.nav__logo .dot {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--burgundy);
  display: inline-block;
}
.nav__menu {
  display: flex;
  gap: 3.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.nav__menu a {
  position: relative;
  padding: .6rem 0;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav__menu a:hover::after { transform: scaleX(1); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 1.4rem;
}
.nav__cta {
  border: 1px solid var(--espresso);
  background: transparent;
  color: inherit;
  padding: 1.1rem 1.8rem;
  border-radius: 999px;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .02em;
  transition: background .25s, color .25s;
}
.nav__cta:hover { background: var(--espresso); color: var(--cream); }
.nav.is-dark .nav__cta:hover { background: var(--cream); color: var(--espresso); }

/* ============================================================
   HERO – fullbleed, dark photo, hrdý serifový claim
   ============================================================ */
.hero {
  position: relative;
  margin-top: -8.4rem;   /* nav je transparentný cez foto */
  height: 100vh;
  min-height: 68rem;
  overflow: hidden;
  background: var(--espresso-2);
  color: var(--cream);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media::after {
  /* gradient overlay – aby bola typo dobre čitateľná */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,9,5,.55) 0%, rgba(15,9,5,.25) 40%, rgba(15,9,5,.75) 100%),
    radial-gradient(120% 80% at 80% 30%, transparent 0%, rgba(15,9,5,.5) 70%);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.05);
  transform: scale(1.05);
  animation: heroDrift 18s ease-out forwards;
}
@keyframes heroDrift {
  from { transform: scale(1.12); }
  to   { transform: scale(1.02); }
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 8.4rem;
  padding-bottom: 4.8rem;
}
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2.4rem; }
.hero__top .eyebrow { color: rgba(245, 239, 230, .75); }
.hero__top .eyebrow::before { background: rgba(245, 239, 230, .55); }
.hero__meta {
  font-family: var(--label);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .2rem;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .6);
  text-align: right;
  line-height: 1.9;
}
.hero__meta span { display: block; }

.hero__claim {
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(5.6rem, 9.2vw, 13.2rem);
  line-height: .92;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 18ch;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
.hero__claim em {
  font-style: italic;
  font-weight: 300;
  color: #e9b9a4;            /* teplejší cihlový tón pre dôraz */
}

.hero__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 4rem;
}
.hero__sub {
  max-width: 42ch;
  font-size: 1.65rem;
  line-height: 1.55;
  color: rgba(245, 239, 230, .82);
  font-weight: 300;
}
.hero__since {
  justify-self: end;
  text-align: right;
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .6);
}
.hero__since b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  letter-spacing: -.01em;
  color: var(--cream);
  text-transform: none;
  margin-top: .4rem;
}

/* ============================================================
   SEKCIA: VITAJTE + HODNOTY
   ============================================================ */
.intro {
  padding: 14rem 0 12rem;
  position: relative;
}
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8rem;
  align-items: start;
}
.intro__left {
  position: sticky;
  top: 12rem;
  padding-left: 2.4rem;
  border-left: 1px solid var(--line);
}
.intro__left .eyebrow { margin-bottom: 3.2rem; }
.intro__motto {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 3.2rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--espresso);
  max-width: 22ch;
}
/* uvodzovky odstranene */
.intro__since {
  margin-top: 4.8rem;
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  color: var(--brass);
}
.intro__since b {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--espresso);
  font-size: 4.8rem;
  letter-spacing: -.02em;
  text-transform: none;
  margin-top: .8rem;
}

.intro__right h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(3.6rem, 4.2vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 3.6rem;
  color: var(--espresso);
  max-width: 18ch;
  text-wrap: balance;
}
.intro__right h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--burgundy);
}
.intro__right p {
  font-size: 1.85rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 0 2.4rem;
  text-wrap: pretty;
}
.intro__right p.lead {
  font-size: 2.1rem;
  line-height: 1.5;
  font-weight: 400;
}

/* tri hodnoty */
.values {
  margin-top: 8rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.value {
  padding: 4rem 3.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.value:first-child { padding-left: 0; }
.value:last-child  { padding-right: 0; }
.value + .value::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4rem;
  bottom: 4rem;
  width: 1px;
  background: var(--line);
}
.value__num {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  color: var(--brass);
  text-transform: uppercase;
}
.value__title {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0;
}
.value__title em { font-style: italic; font-weight: 300; }
.value__text {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ink);
  opacity: .85;
  margin: 0;
  max-width: 32ch;
}

/* ============================================================
   PONUKA – 4 kategórie ako veľké štvorcové karty
   ============================================================ */
.ponuka {
  background: var(--cream-2);
  padding: 14rem 0;
  position: relative;
}
.ponuka__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 7.2rem;
}
.ponuka__head h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(4.8rem, 6vw, 8.4rem);
  line-height: .95;
  letter-spacing: -.025em;
  margin: 2rem 0 0;
  color: var(--espresso);
  max-width: 14ch;
}
.ponuka__head h2 em { font-style: italic; font-weight: 300; }
.ponuka__head p {
  font-size: 1.65rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 44ch;
  opacity: .85;
  margin: 0;
  justify-self: end;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gut);
}
.card {
  position: relative;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--espresso);
}
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card__media img { transform: scale(1.10); }
.card:hover .card__media .ph { transform: scale(1.10); }
.card__media .ph { transition: transform .9s cubic-bezier(.2,.7,.2,1); transform-origin: center; }
.card__num {
  position: absolute;
  top: 1.8rem;
  left: 1.8rem;
  z-index: 2;
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .2rem;
  color: white;
  text-transform: uppercase;
}
.card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2.4rem 2rem 2.8rem;
  gap: 1.6rem;
  background: var(--paper);
}
.card__title {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--espresso);
  margin: 0;
  line-height: 1.1;
}
.card__title em { font-style: italic; font-weight: 300; }
.card__arrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  color: var(--brass);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  transition: gap .25s ease, color .25s ease;
}
.card:hover .card__arrow { gap: 1.4rem; color: var(--espresso); }
.card__arrow::after {
  content: "→";
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
}

/* ============================================================
   ROZVOZ – 50/50
   ============================================================ */
.rozvoz {
  padding: 14rem 0;
}
.rozvoz__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(4rem, 6vw, 9.6rem);
  align-items: center;
}
.rozvoz__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--espresso);
}
.rozvoz__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.rozvoz:hover .rozvoz__media img { transform: scale(1.03); }
.rozvoz__tag {
  position: absolute;
  top: 2.4rem;
  left: 2.4rem;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  padding: 1rem 1.6rem;
  border-radius: 999px;
}
.rozvoz__text .eyebrow { margin-bottom: 2.8rem; }
.rozvoz__text h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(4rem, 5.5vw, 7.2rem);
  line-height: .98;
  letter-spacing: -.025em;
  margin: 0 0 3.2rem;
  color: var(--espresso);
  max-width: 14ch;
}
.rozvoz__text h2 em { font-style: italic; font-weight: 300; color: var(--burgundy); }
.rozvoz__text p {
  font-size: 1.7rem;
  line-height: 1.65;
  color: var(--ink);
  max-width: 48ch;
  opacity: .9;
  margin: 0 0 1.8rem;
}
.rozvoz__list {
  list-style: none;
  margin: 3.2rem 0 4rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.rozvoz__list li {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.55rem;
}
.rozvoz__list li span:first-child {
  font-family: var(--mono);
  font-size: 1.1rem;
  letter-spacing: .15em;
  color: var(--brass);
}
.rozvoz__list li span:last-child {
  font-family: var(--mono);
  font-size: 1.2rem;
  letter-spacing: .04em;
  color: var(--espresso);
}

.cta-row { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.btn {
  --bg: var(--espresso);
  --fg: var(--cream);
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding: 1.9rem 3.2rem;
  border-radius: 999px;
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .02em;
  border: 1px solid var(--bg);
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  overflow: hidden;
  transition: transform .2s ease;
  will-change: transform;
}
.btn::after {
  content: "→";
  font-family: var(--serif);
  font-size: 1.7rem;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.btn:hover::after { transform: translateX(.4rem); }
.btn--ghost {
  --bg: transparent;
  --fg: var(--espresso);
  border-color: var(--espresso);
}
.btn--ghost:hover { background: var(--espresso); color: var(--cream); }

.tel-link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--espresso);
  border-bottom: 1px solid var(--line);
  padding-bottom: .4rem;
}
.tel-link:hover { border-color: var(--espresso); }

/* ============================================================
   PREDAJNE – 3 karty
   ============================================================ */
.shops {
  background: var(--cream-2);
  padding: 14rem 0;
}
.shops__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 7.2rem;
}
.shops__head h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(4.8rem, 6vw, 8.4rem);
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--espresso);
  margin: 2rem 0 0;
  max-width: 12ch;
}
.shops__head h2 em { font-style: italic; font-weight: 300; }
.shops__head p {
  font-size: 1.65rem;
  line-height: 1.6;
  max-width: 44ch;
  opacity: .85;
  margin: 0;
  justify-self: end;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gut);
}
.shop {
  background: var(--paper);
  padding: 3.2rem 3.2rem 3.6rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  border: 1px solid var(--line-soft);
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease;
}
.shop:hover {
  transform: translateY(-.6rem);
  box-shadow: 0 3rem 6rem -3rem rgba(42, 28, 20, .25);
}
.shop__map {
  aspect-ratio: 16 / 11;
  background: var(--cream);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.shop__map iframe {
  width: 100%;
  height: 25rem;
  object-fit: contain;
  object-position: center;
}
/* schematická mapa kreslená SVG – nie ikona, len abstraktné ulice */
.shop__map svg { width: 100%; height: 100%; display: block; }
.shop__map .pin {
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--burgundy);
  border-radius: 50%;
  box-shadow: 0 0 0 .6rem rgba(122, 42, 29, .15);
}
.shop__num {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .2rem;
  color: var(--brass);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}
.shop__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--espresso);
}
.shop__title em { font-style: italic; font-weight: 300; }
.shop__addr {
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--ink);
  opacity: .85;
  margin: 0;
}
.shop__hours {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 1.6rem;
  font-family: var(--label);
  font-size: 1.4rem;
  font-weight: 400;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.6rem;
}
.shop__hours span {
  padding: .8rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.shop__hours span:nth-last-child(-n+2) { border-bottom: none; }
.shop__hours span:nth-child(odd) {
  font-weight: 700;
  letter-spacing: .2rem;
  text-transform: uppercase;
  font-size: 1.15rem;
  color: var(--ink);
  opacity: .6;
  align-self: center;
}
.shop__hours span:nth-child(even) { text-align: right; color: var(--espresso); font-weight: 500; }
.shop__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  letter-spacing: .02em;
  color: var(--espresso);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  align-self: flex-start;
  transition: gap .25s ease, border-color .25s ease;
}
.shop__cta::after { content: "→"; font-family: var(--serif); font-size: 1.6rem; }
.shop__cta:hover { gap: 1.6rem; border-bottom-color: var(--espresso); }

/* ============================================================
   GALÉRIA / ZÁKULISIE – asymetrická mriežka
   ============================================================ */
.gallery {
  padding: 14rem 0;
  position: relative;
  display: none;
}
.gallery__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 7.2rem;
}
.gallery__head h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(4.8rem, 6vw, 8.4rem);
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--espresso);
  margin: 2rem 0 0;
  max-width: 14ch;
}
.gallery__head h2 em { font-style: italic; font-weight: 300; color: var(--burgundy); }
.gallery__head .right {
  justify-self: end;
  max-width: 40ch;
  text-align: right;
}
.gallery__head p {
  font-size: 1.6rem;
  opacity: .85;
  margin: 0 0 2rem;
}

.masonry {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 6rem;
  gap: var(--gut);
}
.gphoto {
  overflow: hidden;
  background: var(--espresso);
  position: relative;
}
.gphoto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter: saturate(.95);
}
.gphoto:hover img { transform: scale(1.05); filter: saturate(1.1); }
.gphoto__cap {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2rem 2rem 1.6rem;
  background: linear-gradient(180deg, transparent, rgba(15,9,5,.7));
  color: var(--cream);
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(.6rem);
  transition: opacity .4s ease, transform .4s ease;
}
.gphoto:hover .gphoto__cap { opacity: 1; transform: translateY(0); }

/* layout positions */
.g1 { grid-column: span 5; grid-row: span 7; }
.g2 { grid-column: span 4; grid-row: span 5; }
.g3 { grid-column: span 3; grid-row: span 6; }
.g4 { grid-column: span 3; grid-row: span 5; }
.g5 { grid-column: span 5; grid-row: span 6; }
.g6 { grid-column: span 4; grid-row: span 6; }
.g7 { grid-column: span 4; grid-row: span 4; }
.g8 { grid-column: span 8; grid-row: span 4; }

/* ============================================================
   FOOTER – tmavý, editoriálny
   ============================================================ */
.foot {
  background: var(--espresso-2);
  color: var(--cream);
  padding: 12rem 0 4rem;
  position: relative;
}
.foot__big {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(6rem, 11vw, 18rem);
  line-height: .85;
  letter-spacing: -.04em;
  margin: 0 0 8rem;
  color: var(--cream);
}
.foot__big span {
  font-style: normal;
  font-weight: 350;
  color: #c69a82;
}

.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 4rem;
  padding-top: 6rem;
  border-top: 1px solid rgba(245, 239, 230, .14);
}
.foot__col h4 {
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .55);
  margin: 0 0 2.4rem;
}
.foot__col p,
.foot__col a {
  display: block;
  font-size: 1.55rem;
  line-height: 1.65;
  color: rgba(245, 239, 230, .85);
  margin: 0 0 .4rem;
}
.foot__col a:hover { color: var(--cream); }
.foot__col .strong {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2rem;
  color: var(--cream);
  margin-bottom: .8rem;
}
.foot__bottom {
  margin-top: 8rem;
  padding-top: 2.4rem;
  border-top: 1px solid rgba(245, 239, 230, .14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .5);
  flex-wrap: wrap;
  gap: 2rem;
}
.foot__social { display: flex; gap: 2.4rem; }
.foot__social a:hover { color: var(--cream); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* placeholder „foto" – designovaný fallback, ak Unsplash zlyhá.
   Každá variantka má vlastný teplý tón, aby karty držali pohromade. */
.ph {
  background-color: #3a2a20;
  background-image:
    radial-gradient(140% 100% at 20% 10%, rgba(255, 220, 190, .12), transparent 60%),
    linear-gradient(160deg, #4a2c1e 0%, #2a1c14 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 2rem;
  font-family: var(--label);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .55);
}
.ph--rose  { background-image: radial-gradient(140% 100% at 20% 10%, rgba(255, 200, 175, .18), transparent 60%), linear-gradient(160deg, #6a2d24 0%, #3a1815 100%); }
.ph--tan   { background-image: radial-gradient(140% 100% at 20% 10%, rgba(255, 220, 180, .2), transparent 60%), linear-gradient(160deg, #8a5a3a 0%, #4a2c1e 100%); }
.ph--smoke { background-image: radial-gradient(140% 100% at 20% 10%, rgba(220, 180, 140, .14), transparent 60%), linear-gradient(160deg, #3a2418 0%, #1a0f08 100%); }
.ph--wine  { background-image: radial-gradient(140% 100% at 20% 10%, rgba(255, 180, 160, .16), transparent 60%), linear-gradient(160deg, #5a1f1a 0%, #2a0f0c 100%); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .nav__menu { gap: 2.4rem; }
  .intro__grid { grid-template-columns: 1fr; gap: 4rem; }
  .intro__left { position: static; padding-left: 2rem; }
  .values { grid-template-columns: 1fr; }
  .value { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; }
  .value:last-child { border-bottom: none; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .rozvoz__grid { grid-template-columns: 1fr; }
  .shops__head, .ponuka__head, .gallery__head { grid-template-columns: 1fr; gap: 2rem; }
  .shops__head p, .ponuka__head p, .gallery__head .right { justify-self: start; text-align: left; max-width: 100%; }
  .shop-grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .masonry { grid-template-columns: repeat(6, 1fr); }
  .g1, .g5, .g8 { grid-column: span 6; }
  .g2, .g3, .g4, .g6, .g7 { grid-column: span 3; }
}
@media (max-width: 680px) {
  .nav__menu { display: none; }
  .nav__inner { gap: 2rem; height: 7.2rem; }
  .nav__right-group { gap: 2rem; }
  .nav__right { gap: 1.2rem; }
  .hero { min-height: 56rem; }
  .hero__claim { font-size: clamp(4.6rem, 13vw, 7rem); }
  .hero__bottom { grid-template-columns: 1fr; }
  .hero__since { justify-self: start; text-align: left; }
  .intro, .ponuka, .rozvoz, .shops, .gallery { padding: 8rem 0; }
  .cards { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .masonry { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .gphoto { aspect-ratio: 4/5; }
  .g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8 { grid-column: 1; grid-row: auto; }
  .gphoto img { position: static; }
}

/* prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   TORN PAPER PRECHODY medzi sekciami
   Každá sekcia má ::after s vlastnou farbou pozadia, maskovaný
   SVG cestou s natrhaným okrajom. Odhalí farbu sekcie pod ňou.
   ============================================================ */
.hero, .intro, .ponuka, .rozvoz, .shops, .gallery {
  position: relative;
}
.hero::after,
.intro::after,
.ponuka::after,
.rozvoz::after,
.shops::after,
.gallery::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4rem;
  pointer-events: none;
  z-index: 3;
  -webkit-mask-position: bottom;
          mask-position: bottom;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.hero::after,
.ponuka::after,
.shops::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201600%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200L1600%200L1600%2012.0%20L1582.1%2029.9%20L1561.7%2026.9%20L1542.2%2032.6%20L1527.9%2032.3%20L1506.6%2024.0%20L1495.2%2017.4%20L1475.4%2016.7%20L1462.5%2028.6%20L1439.4%2027.8%20L1421.4%2020.9%20L1402.1%2021.9%20L1383.8%2020.9%20L1365.2%2024.9%20L1349.5%2018.3%20L1337.4%2021.6%20L1316.7%2021.5%20L1299.4%2018.4%20L1279.5%2018.9%20L1261.3%2029.6%20L1249.3%2025.1%20L1226.6%2035.3%20L1208.2%2026.3%20L1193.7%2025.0%20L1176.2%2052.1%20L1159.4%2035.8%20L1138.4%2024.4%20L1118.5%2027.3%20L1104.2%2035.2%20L1089.3%2022.9%20L1067.6%2029.0%20L1054.1%2037.6%20L1030.8%2036.1%20L1010.8%2018.9%20L997.8%2028.4%20L981.7%2022.4%20L955.1%2016.2%20L942.6%2029.5%20L924.4%2013.9%20L906.5%2013.5%20L886.0%2019.0%20L867.5%2012.0%20L848.9%2018.6%20L835.3%2019.2%20L820.5%2020.4%20L798.3%2028.9%20L783.7%2019.4%20L759.9%2030.3%20L742.1%2020.5%20L723.9%2028.3%20L709.8%2037.0%20L692.5%2033.6%20L675.5%2036.6%20L657.3%2045.0%20L640.0%2049.4%20L622.7%2039.7%20L608.0%2031.0%20L591.7%2032.7%20L567.7%2043.5%20L550.5%2036.9%20L528.6%2027.8%20L520.8%2031.5%20L499.7%2022.5%20L480.3%2023.6%20L467.1%2025.5%20L443.3%2019.0%20L423.8%2026.8%20L413.2%2023.5%20L394.6%2015.9%20L372.4%2026.8%20L351.1%2014.7%20L335.1%2018.4%20L318.2%2012.6%20L304.8%2019.9%20L288.7%2014.9%20L263.7%2020.3%20L244.9%2027.2%20L231.5%2020.7%20L210.5%2029.2%20L192.7%2043.9%20L176.5%2041.7%20L155.6%2024.5%20L144.6%2035.9%20L122.9%2028.0%20L111.1%2044.8%20L86.5%2033.3%20L73.3%2039.4%20L51.6%2029.2%20L36.3%2025.4%20L21.3%2034.7%20L0.3%2031.7L0%2012.0Z%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201600%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200L1600%200L1600%2012.0%20L1582.1%2029.9%20L1561.7%2026.9%20L1542.2%2032.6%20L1527.9%2032.3%20L1506.6%2024.0%20L1495.2%2017.4%20L1475.4%2016.7%20L1462.5%2028.6%20L1439.4%2027.8%20L1421.4%2020.9%20L1402.1%2021.9%20L1383.8%2020.9%20L1365.2%2024.9%20L1349.5%2018.3%20L1337.4%2021.6%20L1316.7%2021.5%20L1299.4%2018.4%20L1279.5%2018.9%20L1261.3%2029.6%20L1249.3%2025.1%20L1226.6%2035.3%20L1208.2%2026.3%20L1193.7%2025.0%20L1176.2%2052.1%20L1159.4%2035.8%20L1138.4%2024.4%20L1118.5%2027.3%20L1104.2%2035.2%20L1089.3%2022.9%20L1067.6%2029.0%20L1054.1%2037.6%20L1030.8%2036.1%20L1010.8%2018.9%20L997.8%2028.4%20L981.7%2022.4%20L955.1%2016.2%20L942.6%2029.5%20L924.4%2013.9%20L906.5%2013.5%20L886.0%2019.0%20L867.5%2012.0%20L848.9%2018.6%20L835.3%2019.2%20L820.5%2020.4%20L798.3%2028.9%20L783.7%2019.4%20L759.9%2030.3%20L742.1%2020.5%20L723.9%2028.3%20L709.8%2037.0%20L692.5%2033.6%20L675.5%2036.6%20L657.3%2045.0%20L640.0%2049.4%20L622.7%2039.7%20L608.0%2031.0%20L591.7%2032.7%20L567.7%2043.5%20L550.5%2036.9%20L528.6%2027.8%20L520.8%2031.5%20L499.7%2022.5%20L480.3%2023.6%20L467.1%2025.5%20L443.3%2019.0%20L423.8%2026.8%20L413.2%2023.5%20L394.6%2015.9%20L372.4%2026.8%20L351.1%2014.7%20L335.1%2018.4%20L318.2%2012.6%20L304.8%2019.9%20L288.7%2014.9%20L263.7%2020.3%20L244.9%2027.2%20L231.5%2020.7%20L210.5%2029.2%20L192.7%2043.9%20L176.5%2041.7%20L155.6%2024.5%20L144.6%2035.9%20L122.9%2028.0%20L111.1%2044.8%20L86.5%2033.3%20L73.3%2039.4%20L51.6%2029.2%20L36.3%2025.4%20L21.3%2034.7%20L0.3%2031.7L0%2012.0Z%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E");
}
.intro::after,
.rozvoz::after,
.gallery::after {
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201600%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200L1600%200L1600%2012.0%20L1578.3%2039.6%20L1565.3%2023.0%20L1548.5%2022.8%20L1530.2%2031.0%20L1513.2%2020.0%20L1497.2%2040.1%20L1480.6%2026.1%20L1456.7%2035.0%20L1435.2%2038.9%20L1420.2%2035.1%20L1400.5%2034.0%20L1387.3%2039.3%20L1363.7%2025.6%20L1355.4%2042.2%20L1333.9%2035.0%20L1317.7%2024.8%20L1296.0%2029.9%20L1284.1%2025.0%20L1265.1%2039.3%20L1246.1%2026.6%20L1222.1%2032.3%20L1209.5%2033.1%20L1194.8%2026.0%20L1169.1%2019.1%20L1158.8%2016.2%20L1136.3%2024.3%20L1116.8%2029.5%20L1102.0%2018.2%20L1084.4%2017.0%20L1070.5%2028.8%20L1053.8%2028.4%20L1028.2%2022.4%20L1008.8%2017.4%20L1000.0%2022.9%20L974.1%2032.1%20L959.3%2025.4%20L941.5%2032.4%20L925.1%2027.7%20L904.0%2034.0%20L893.2%2025.7%20L875.9%2025.7%20L856.5%2024.4%20L839.4%2037.7%20L816.1%2027.5%20L800.8%2032.0%20L781.4%2027.0%20L762.2%2035.0%20L747.8%2030.9%20L731.8%2021.3%20L708.1%2029.0%20L691.8%2028.6%20L676.7%2026.9%20L656.5%2014.7%20L635.7%2014.5%20L618.7%2017.2%20L599.3%2013.4%20L582.0%2025.9%20L571.1%2019.4%20L546.9%2018.2%20L532.2%2023.1%20L513.8%2014.5%20L496.4%2014.8%20L484.2%2030.9%20L460.5%2021.2%20L440.3%2034.5%20L429.1%2030.8%20L411.1%2026.4%20L393.7%2029.0%20L375.1%2030.9%20L351.8%2023.7%20L333.2%2036.3%20L323.7%2027.2%20L306.6%2035.2%20L286.1%2034.9%20L266.8%2047.3%20L252.7%2025.3%20L234.9%2032.1%20L216.4%2026.2%20L200.4%2019.4%20L178.8%2022.3%20L156.0%2025.7%20L147.1%2028.3%20L128.6%2026.0%20L109.4%2024.6%20L86.8%2015.5%20L76.1%2021.2%20L49.7%2016.4%20L33.3%2023.9%20L20.8%2018.3%20L-4.8%2030.3L0%2012.0Z%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201600%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%200L1600%200L1600%2012.0%20L1578.3%2039.6%20L1565.3%2023.0%20L1548.5%2022.8%20L1530.2%2031.0%20L1513.2%2020.0%20L1497.2%2040.1%20L1480.6%2026.1%20L1456.7%2035.0%20L1435.2%2038.9%20L1420.2%2035.1%20L1400.5%2034.0%20L1387.3%2039.3%20L1363.7%2025.6%20L1355.4%2042.2%20L1333.9%2035.0%20L1317.7%2024.8%20L1296.0%2029.9%20L1284.1%2025.0%20L1265.1%2039.3%20L1246.1%2026.6%20L1222.1%2032.3%20L1209.5%2033.1%20L1194.8%2026.0%20L1169.1%2019.1%20L1158.8%2016.2%20L1136.3%2024.3%20L1116.8%2029.5%20L1102.0%2018.2%20L1084.4%2017.0%20L1070.5%2028.8%20L1053.8%2028.4%20L1028.2%2022.4%20L1008.8%2017.4%20L1000.0%2022.9%20L974.1%2032.1%20L959.3%2025.4%20L941.5%2032.4%20L925.1%2027.7%20L904.0%2034.0%20L893.2%2025.7%20L875.9%2025.7%20L856.5%2024.4%20L839.4%2037.7%20L816.1%2027.5%20L800.8%2032.0%20L781.4%2027.0%20L762.2%2035.0%20L747.8%2030.9%20L731.8%2021.3%20L708.1%2029.0%20L691.8%2028.6%20L676.7%2026.9%20L656.5%2014.7%20L635.7%2014.5%20L618.7%2017.2%20L599.3%2013.4%20L582.0%2025.9%20L571.1%2019.4%20L546.9%2018.2%20L532.2%2023.1%20L513.8%2014.5%20L496.4%2014.8%20L484.2%2030.9%20L460.5%2021.2%20L440.3%2034.5%20L429.1%2030.8%20L411.1%2026.4%20L393.7%2029.0%20L375.1%2030.9%20L351.8%2023.7%20L333.2%2036.3%20L323.7%2027.2%20L306.6%2035.2%20L286.1%2034.9%20L266.8%2047.3%20L252.7%2025.3%20L234.9%2032.1%20L216.4%2026.2%20L200.4%2019.4%20L178.8%2022.3%20L156.0%2025.7%20L147.1%2028.3%20L128.6%2026.0%20L109.4%2024.6%20L86.8%2015.5%20L76.1%2021.2%20L49.7%2016.4%20L33.3%2023.9%20L20.8%2018.3%20L-4.8%2030.3L0%2012.0Z%27%20fill%3D%27white%27%2F%3E%3C%2Fsvg%3E");
}
.hero::after    { background: var(--espresso-2); }
.intro::after   { background: var(--cream); }
.ponuka::after  { background: var(--cream-2); }
.rozvoz::after  { background: var(--cream); }
.shops::after   { background: var(--cream-2); }
.gallery::after { background: var(--cream); }

/* na mobile zmenšiť výšku natrhnutia */
@media (max-width: 680px) {
  .hero::after, .intro::after, .ponuka::after,
  .rozvoz::after, .shops::after, .gallery::after {
    height: 2.6rem;
  }
}

.intro__quote {
    font-family: var(--serif);
    font-weight: 350;
    font-style: italic;
    font-size: clamp(3.6rem, 4.2vw, 5.6rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #5a1f1a;
    margin-bottom: -4rem;
}