/* ============================================================
   CHATA HRÁDOK — "Lesná noc"
   Design tokens
   ============================================================ */

:root {
  /* Ground: not black — forest-black, a green sunk into charcoal */
  --ink:        #080C08;
  --ink-soft:   #0E140E;
  --ink-raise:  #131B13;
  --line:       #1F2B1F;
  --line-soft:  rgba(194, 161, 90, .16);

  /* Gold is candlelight, not decoration */
  --gold:       #C2A15A;
  --gold-hi:    #F0DFAE;
  --ember:      #E8B44A;

  /* Púdrová ruža. Používa sa len na svadobnej stránke pri voľných termínoch,
     aby boli výrazné a zároveň sedeli k zlatej. */
  --rose:       #E0A9A2;
  --rose-hi:    #F3CFC9;

  --bone:       #EEEAE1;
  --bone-dim:   #99A096;
  --bone-faint: #656B62;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --rail: 0px;   /* ľavá čiara odstránená, pruh už netreba */
  --gut:  clamp(20px, 5vw, 72px);
  --maxw: 1360px;

  --sec-y: clamp(88px, 12vh, 172px);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   Reset & base
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: #080C08;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.005em;
  /* clip namiesto hidden: hidden robí z body vlastný posuvník a Safari
     na iPhone potom pripína fixné prvky inam, než kde stránku kreslí. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

/* Film grain — the whole page sits behind glass lit by a candle */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 900;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -2%); }
  60%  { transform: translate(-1%, -1%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   Typography scale
   ============================================================ */

.display,
h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 1;
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

/* The hero headline is capped by viewport height too, so it never
   pushes the facts strip below the fold on a short laptop screen. */
.d-xl { font-size: clamp(2.6rem, min(7vw, 9.4vh), 6rem); }
.d-lg { font-size: clamp(2.3rem, 5.2vw, 4.3rem); }
.d-md { font-size: clamp(1.75rem, 3.1vw, 2.7rem); letter-spacing: -0.025em; }
.d-sm { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.15; }

.italic { font-style: italic; font-variation-settings: "opsz" 100, "SOFT" 40, "WONK" 1; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  flex: none;
  opacity: .7;
}

.eyebrow.is-plain::before { display: none; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--bone);
  max-width: 46ch;
}

p { margin: 0 0 1.1em; color: var(--bone-dim); max-width: 62ch; }
p:last-child { margin-bottom: 0; }
p strong { color: var(--bone); font-weight: 500; }

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

/* ============================================================
   Layout primitives
   ============================================================ */

.shell {
  padding-left: var(--rail);
}

/* Full-bleed sections ignore the rail and run edge to edge.
   They are direct children of .shell, so a negative margin is enough. */
.hero,
.pagehead,
.band,
.cta,
.dates {
  margin-left: calc(var(--rail) * -1);
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.section { padding: var(--sec-y) 0; position: relative; }
.section.is-tight { padding: clamp(56px, 7vh, 96px) 0; }
.section.is-flush-top { padding-top: 0; }

.rule {
  height: 1px;
  background: var(--line-soft);
  border: 0;
  margin: 0;
  transform-origin: left;
}

/* Editorial split: deliberately uneven */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.split.is-text-first > .split__media { order: 2; }
.split__body { max-width: 54ch; }

.split__media {
  position: relative;
  overflow: hidden;
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  filter: saturate(.86) contrast(1.06) brightness(.92);
  transition: transform 1.6s var(--ease), filter 1.2s var(--ease);
}

.split__media.is-wide img { aspect-ratio: 5 / 4; }
.split__media:hover img { transform: scale(1.03); filter: saturate(.95) contrast(1.04) brightness(1); }

/* Caption tucked under an image, in the utility face */
.cap {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: 14px;
}

/* ============================================================
   Signature: the light trail (svetelná stopa)
   A candle burning down the left edge as you read.
   ============================================================ */

.trail {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--rail);
  height: 100vh;
  z-index: 60;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity .7s var(--ease);
}

/* The rail stays out of the way until the hero has scrolled past. */
body.is-past-hero .trail { opacity: 1; }

.trail__track {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(31, 43, 31, .8) 12%, rgba(31, 43, 31, .8) 88%, transparent);
}

.trail__burn {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, rgba(194,161,90,0), rgba(194,161,90,.75) 22%, var(--ember));
  box-shadow: 0 0 5px rgba(232, 180, 74, .3);
}

.trail__ember {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  margin-left: -2px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 6px 1px rgba(232, 180, 74, .65), 0 0 20px 5px rgba(232, 180, 74, .16);
  animation: flicker 2.6s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1;   transform: scale(1); }
  38%      { opacity: .72; transform: scale(.88); }
  62%      { opacity: .95; transform: scale(1.06); }
}

.trail__label {
  position: absolute;
  left: 50%;
  bottom: 42px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(101, 107, 98, .8);
  transition: color .4s var(--ease);
  white-space: nowrap;
}

/* ============================================================
   Header
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 0;
  transition: background .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}

/* ---------- Tenký pruh nad hlavičkou ----------
   Je súčasťou hlavičky, ale po scrollnutí sa zbalí, takže na obrazovke
   nezaberá miesto celý čas. Na telefóne nie je vôbec, tam sú telefón
   a dopyt v spodnej lište. */

.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(8, 12, 8, .55);
  overflow: hidden;
}


.topbar__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar__l,
.topbar__r { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }

.topbar__a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--bone-dim);
  transition: color .3s var(--ease);
}

.topbar__a:hover { color: var(--gold-hi); }

.topbar__a svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Pin má obrys, nie výplň, tak sa kreslí čiarou ako ostatné ikony v texte */
.topbar__ico svg.is-pin {
  fill: none;
  stroke: var(--bone-dim);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s var(--ease);
}

.topbar__ico:hover svg.is-pin { fill: none; stroke: var(--gold-hi); }

.topbar__ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}

.topbar__ico svg { width: 14px; height: 14px; fill: var(--bone-dim); transition: fill .3s var(--ease); }
.topbar__ico:hover { border-color: var(--gold); background: rgba(194, 161, 90, .1); }
.topbar__ico:hover svg { fill: var(--gold-hi); }

.header.is-stuck {
  background: rgba(8, 12, 8, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--gut);
  transition: padding .45s var(--ease);
}

.header.is-stuck .header__inner { padding: 13px var(--gut); }

.brand { display: flex; align-items: center; gap: 13px; flex: none; }

.brand__mark {
  height: 42px;
  width: auto;
  transition: height .45s var(--ease);
  opacity: .95;
}

.header.is-stuck .brand__mark { height: 34px; }

.brand__word { display: grid; gap: 3px; }

.brand__name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
}

.brand__place {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
}

.brand__place i { font-style: normal; opacity: .5; margin: 0 3px; }

/* Menu stojí v strede medzi logom a tlačidlom */
.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.1vw, 34px);
  flex: 1 1 auto;
}

.nav__link {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--bone);
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  transition: color .3s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}

.nav__link:hover { color: var(--gold-hi); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--gold); }

.header__cta { display: flex; align-items: center; gap: 18px; flex: none; }

.tel {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold);
  white-space: nowrap;
}

/* ============================================================
   Buttons
   ============================================================ */

/* Zlaté tlačidlo: mosadz s odleskom, nie plochá farba.
   Pri prejdení myšou sa odlesk prejde zľava doprava a tlačidlo sa nadvihne. */
.btn {
  --btn-fg: #120E06;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 30px;
  color: var(--btn-fg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  background: linear-gradient(145deg, #F2E1B0 0%, #D9B96E 34%, #C2A15A 66%, #A98442 100%);
  box-shadow:
    0 1px 0 rgba(255, 245, 214, .55) inset,
    0 -1px 0 rgba(90, 66, 24, .35) inset,
    0 10px 26px rgba(0, 0, 0, .45),
    0 2px 6px rgba(194, 161, 90, .28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}

/* prechádzajúci odlesk */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 252, 240, .75), transparent);
  transform: skewX(-18deg);
  transition: left .65s var(--ease);
  z-index: 0;
  pointer-events: none;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 245, 214, .7) inset,
    0 -1px 0 rgba(90, 66, 24, .35) inset,
    0 16px 34px rgba(0, 0, 0, .5),
    0 3px 12px rgba(194, 161, 90, .42);
}

.btn:hover::before { left: 115%; }
.btn:active { transform: translateY(0); }

/* Priehľadné tlačidlo vedľa zlatého */
.btn.is-ghost {
  --btn-fg: var(--bone);
  background: rgba(238, 234, 225, .04);
  border: 1px solid rgba(238, 234, 225, .3);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}

.btn.is-ghost::before { display: none; }

.btn.is-ghost:hover {
  transform: translateY(-2px);
  background: rgba(238, 234, 225, .1);
  border-color: rgba(238, 234, 225, .55);
  color: var(--bone);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .38);
}

.btn.is-sm { padding: 14px 26px; font-size: 13.5px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn.is-ghost { transition: none; }
  .btn:hover, .btn.is-ghost:hover { transform: none; }
  .btn::before { display: none; }
}

.btn__arrow { width: 14px; height: 8px; flex: none; }
.btn__arrow path { stroke: currentColor; stroke-width: 1.4; fill: none; }

/* Text link with a drawn underline */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(194, 161, 90, .35);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}

.tlink:hover { color: var(--gold-hi); border-color: var(--gold-hi); gap: 15px; }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
}

/* Layers stay at 0/1/2 — never negative.
   Safari refuses to composite a <video> that sits at a negative z-index. */
.hero__media,
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* --- Hero slider: one slide per service --- */

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}

.hero__slide.is-on { opacity: 1; }

.hero__slide video,
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04) brightness(.86);
}

/* Copy blocks stack on one grid cell so the hero never jumps height between slides */
.hero__copywrap { display: grid; }

.hero__copy {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  pointer-events: none;
}

.hero__copy.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: .25s;
}

/* Service badge — says plainly what this slide is about, and glows for it */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border: 1px solid rgba(194, 161, 90, .6);
  background: linear-gradient(180deg, rgba(194, 161, 90, .28), rgba(194, 161, 90, .12));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--gold-hi);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 22px;
  animation: badgeGlow 3.6s ease-in-out infinite;
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(194,161,90,.12), 0 4px 26px rgba(232,180,74,.20); }
  50%      { box-shadow: 0 0 0 1px rgba(194,161,90,.26), 0 6px 42px rgba(232,180,74,.42); }
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 9px 1px rgba(232, 180, 74, .85);
  flex: none;
  animation: flicker 2.6s ease-in-out infinite;
}

/* Slide arrows */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 234, 225, .22);
  background: rgba(8, 12, 8, .38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bone);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}

.hero__arrow.is-prev { left: clamp(10px, 1.8vw, 26px); }
.hero__arrow.is-next { right: clamp(10px, 1.8vw, 26px); }
.hero__arrow:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.hero__arrow svg { width: 20px; height: 12px; }
.hero__arrow path { stroke: currentColor; stroke-width: 1.4; fill: none; }

/* Social proof under the call to action */
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px clamp(18px, 2.4vw, 32px);
  margin-top: clamp(18px, 2.6vh, 26px);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.proof__item { display: flex; align-items: center; gap: 10px; }

/* Platform marks make the ratings read as real, not as decoration */
.proof__logo { width: 18px; height: 18px; flex: none; display: block; }
.proof__logo.is-fb { width: 17px; height: 17px; }

.proof__stars { display: flex; gap: 2px; flex: none; }
.proof__stars svg { width: 13px; height: 13px; fill: var(--gold); }
.proof__score { font-size: 14px; font-weight: 600; color: var(--bone); letter-spacing: .01em; }

.proof__src {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.proof a.proof__item:hover .proof__score { color: var(--gold-hi); }
.proof a.proof__item:hover .proof__src { color: var(--gold); }

/* v pätičke sedia hodnotenia na strede */
.proof.is-footer { justify-content: center; }

/* Same block, quieter, sitting above the footer's small print */
.proof.is-footer {
  margin-top: 0;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  gap: 14px clamp(20px, 3vw, 44px);
}

.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.1) brightness(.6);
}

/* Two-stage veil: a deep floor gradient, plus a vignette that closes the frame */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Tieň drží len pod textom a plynulo sa stráca, aby bolo vidno film. */
  background:
    radial-gradient(74% 88% at 24% 50%,
      rgba(8, 12, 8, .90) 0%,
      rgba(8, 12, 8, .74) 30%,
      rgba(8, 12, 8, .40) 56%,
      rgba(8, 12, 8, .12) 78%,
      transparent 92%),
    linear-gradient(to top, rgba(8, 12, 8, .95) 0%, rgba(8, 12, 8, .62) 13%, rgba(8, 12, 8, .2) 24%, transparent 34%),
    linear-gradient(to bottom, rgba(8, 12, 8, .55) 0%, rgba(8, 12, 8, .12) 14%, transparent 24%);
}

/* Column that fills the whole hero: the copy centres itself in the free space,
   the ratings settle on the floor. */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 104px var(--gut) clamp(28px, 4vh, 48px);
}

.hero__copywrap { margin: auto 0; }

/* Two explicit lines per slide, so the box must fit the longer of them */
.hero__title { max-width: none; line-height: 1.06; }

/* The mask needs room below the baseline or descenders (j, y, ť) get clipped.
   Padding gives them space, the negative margin keeps the line rhythm. */
.hero__title .line {
  display: block;
  overflow: hidden;
  padding-bottom: .18em;
  margin-bottom: -.18em;
}

.hero__title .line > span {
  display: block;
  transform: translateY(120%);
  transition: transform 1.15s var(--ease);
}

/* The headline unmasks whenever its slide becomes the active one */
.hero__copy.is-on .hero__title .line > span { transform: translateY(0); }
.hero__copy.is-on .hero__title .line:nth-child(2) > span { transition-delay: .12s; }
.hero__copy.is-on .hero__title .line:nth-child(3) > span { transition-delay: .24s; }

.hero__sub {
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  max-width: 46ch;
  color: var(--bone);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(20px, 3vh, 32px);
}

/* Facts strip pinned to the bottom of the hero */
.facts {
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(26px, 4.4vh, 60px);
  padding-top: clamp(16px, 2.4vh, 22px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease) .75s, transform .9s var(--ease) .75s;
}

.is-ready .facts { opacity: 1; transform: translateY(0); }

.fact__n {
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1;
  color: var(--gold-hi);
  letter-spacing: -0.03em;
}

.fact__l {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-top: 8px;
}

.scroll-hint {
  position: absolute;
  z-index: 2;
  right: var(--gut);
  bottom: clamp(40px, 7vh, 84px);
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bone-faint);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 14px;
}

.scroll-hint::after {
  content: "";
  width: 1px;
  height: 54px;
  background: linear-gradient(var(--gold), transparent);
  animation: drip 2.4s var(--ease) infinite;
}

@keyframes drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: top; }
  56%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Compact hero for inner pages */
.pagehead {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.pagehead__media { position: absolute; inset: 0; z-index: 0; }

.pagehead__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.78) contrast(1.08) brightness(.55);
  transform: scale(1.06);
  animation: slowzoom 18s var(--ease) forwards;
}

@keyframes slowzoom { to { transform: scale(1); } }

.pagehead__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--ink) 1%, rgba(8,12,8,.8) 32%, rgba(8,12,8,.35) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 35%, rgba(8,12,8,.6) 100%);
}

.pagehead__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut) clamp(38px, 6vh, 70px);
}

.pagehead__inner .lead { margin-top: 22px; }

/* ============================================================
   Free dates rail
   ============================================================ */

.dates {
  background: var(--ink-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.dates__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
  padding: 26px var(--gut);
  max-width: var(--maxw);
  margin: 0 auto;
}

.dates__label {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  flex: none;
}

.dates__list { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }

.date-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  border: 1px solid var(--line);
  padding: 9px 16px;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}

.date-chip:hover { border-color: var(--gold); background: rgba(194,161,90,.06); }
.date-chip b { font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.02em; }
.date-chip span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint); }

/* ============================================================
   Services — expanding rows, not cards
   Each row is a service; hovering lifts its photo out of the dark.
   ============================================================ */

.svc { border-top: 1px solid var(--line); }

.svc__row {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) minmax(0, 15rem) 2.5rem;
  align-items: center;
  gap: clamp(14px, 3vw, 40px);
  padding: clamp(26px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
  transition: padding .55s var(--ease);
  isolation: isolate;
}

.svc__row::before {
  content: "";
  position: absolute;
  left: calc(var(--gut) * -1);
  right: calc(var(--gut) * -1);
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(194,161,90,.075), transparent 62%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: -1;
}

.svc__row:hover::before { opacity: 1; }

.svc__idx {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--bone-faint);
  transition: color .4s var(--ease);
}

.svc__row:hover .svc__idx { color: var(--gold); }

.svc__name {
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 1;
  font-size: clamp(1.7rem, 3.6vw, 3.1rem);
  letter-spacing: -0.032em;
  line-height: 1.05;
  transition: color .4s var(--ease), transform .55s var(--ease);
}

.svc__row:hover .svc__name { color: var(--gold-hi); transform: translateX(10px); }

.svc__desc { font-size: 14px; color: var(--bone-dim); line-height: 1.55; margin: 0; max-width: 40ch; }

.svc__go {
  justify-self: end;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}

.svc__go svg { width: 12px; height: 8px; }
.svc__go path { stroke: var(--bone-dim); stroke-width: 1.4; fill: none; transition: stroke .4s var(--ease); }
.svc__row:hover .svc__go { border-color: var(--gold); background: var(--gold); transform: translateX(5px); }
.svc__row:hover .svc__go path { stroke: var(--ink); }

/* The photo that surfaces on hover — follows the cursor, desktop only */
.svc__peek {
  position: fixed;
  top: 0; left: 0;
  width: 270px;
  height: 340px;
  z-index: 120;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(.94);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
  display: none;
}

.svc__peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.svc__peek img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}

/* ============================================================
   Cinematic quote band
   ============================================================ */

.band {
  position: relative;
  min-height: clamp(460px, 76svh, 720px);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.band__media { position: absolute; inset: 0; z-index: 0; }

.band__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.7) contrast(1.1) brightness(.5);
}

.band__veil {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(90% 80% at 50% 50%, rgba(8,12,8,.5) 0%, rgba(8,12,8,.88) 78%);
}

.band__inner { position: relative; z-index: 2; padding: clamp(60px, 10vh, 120px) var(--gut); max-width: 900px; }
.band__inner p { color: var(--bone); margin-left: auto; margin-right: auto; }

.band cite {
  display: block;
  margin-top: 28px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ============================================================
   Recenzie na jednom páse.
   Vľavo citát, ktorý sa sám strieda, vpravo tvrdé čísla.
   Všetko leží na jednej fotke, aby to bola jedna sekcia,
   nie dve pod sebou.
   ============================================================ */

.band.is-reviews { text-align: left; }

.band.is-reviews .band__inner {
  max-width: var(--maxw);
  width: 100%;
  padding-inline: var(--gut);
}

/* Pás má odstavce zarovnané na stred, tu ich potrebujeme zľava,
   inak nadstavec „Recenzie" aj citát plávajú mimo nadpisu. */
.band.is-reviews .band__inner p { margin-left: 0; margin-right: 0; }

.band.is-reviews .band__veil {
  background:
    linear-gradient(to right, rgba(8,12,8,.93) 0%, rgba(8,12,8,.82) 46%, rgba(8,12,8,.66) 100%),
    radial-gradient(90% 80% at 50% 50%, rgba(8,12,8,.35) 0%, rgba(8,12,8,.8) 82%);
}

.revband {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .82fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}

.revband__title {
  margin: 14px 0 clamp(26px, 3.2vw, 40px);
  max-width: min(100%, 600px);
  font-size: clamp(30px, 3.5vw, 49px);
  line-height: 1.08;
  text-wrap: balance;
}

/* citát: navrchu to najsilnejšie, pod tým celá recenzia */
.band.is-reviews .quotes { min-height: clamp(230px, 26vh, 300px); }
.band.is-reviews .quote  { text-align: left; }

.revsay__punc {
  margin: 0;
  max-width: min(100%, 560px);
  font-size: clamp(19px, 2.05vw, 28px);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-weight: 500;
  line-height: 1.26;
  color: var(--gold-hi);
  text-wrap: balance;
}

.revsay__cely {
  margin: 16px 0 0;
  max-width: min(100%, 560px);
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--bone-dim);
}

/* kto to povedal */
.revsay {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(20px, 2.4vw, 28px);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone-dim);
}

.revsay__face {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--line-soft);
}

.revsay__mono {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-variation-settings: "opsz" 20, "SOFT" 0, "WONK" 0;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--gold);
  background: rgba(194, 161, 90, .1);
  box-shadow: inset 0 0 0 1px rgba(194, 161, 90, .3);
}

.revsay__kto b {
  display: block;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--bone);
  letter-spacing: -0.005em;
}

.revsay__kto small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* čísla vedľa citátu */
.revband__proof {
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(28px, 3.4vw, 54px);
}

.revnums { list-style: none; margin: 0; padding: 0; }

.revnums li { border-bottom: 1px solid rgba(238, 234, 225, .1); }
.revnums li:last-child { border-bottom: 0; }

.revnums a,
.revnums li.is-plain {
  display: block;
  padding: 15px 0;
  transition: padding-left .4s var(--ease);
}

.revnums li:first-child a { padding-top: 0; }

.revnums a:hover { padding-left: 10px; }

.revnums__hlava {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.revnums__logo { width: 16px; height: 16px; flex: none; }
.revnums__logo.is-img { width: auto; height: 19px; opacity: .95; }

.revnums__go {
  width: 14px;
  height: 8px;
  margin-left: auto;
  flex: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.revnums__go path { stroke: var(--gold); stroke-width: 1.4; fill: none; }
.revnums a:hover .revnums__go { opacity: 1; transform: none; }

.revnums__cislo {
  margin-top: 5px;
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-family: var(--display);
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-hi);
  transition: color .35s var(--ease);
}

.revnums a:hover .revnums__cislo { color: #FFF3D4; }

.revnums__cislo small {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--bone-dim);
}

@media (max-width: 1000px) {
  .revband { grid-template-columns: 1fr; gap: clamp(34px, 6vw, 52px); }
  .revband__proof {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-left: 0;
    padding-top: clamp(26px, 4vw, 38px);
  }
  .revnums {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(24px, 4vw, 48px);
  }
  .revnums li:nth-child(2) a { padding-top: 0; }
  .revnums li:nth-child(2) { border-bottom: 1px solid rgba(238, 234, 225, .1); }
  .band.is-reviews .quotes { min-height: clamp(240px, 34vh, 300px); }
}

@media (max-width: 560px) {
  .revnums { grid-template-columns: 1fr; }
  .revnums li:nth-child(2) a { padding-top: 15px; }
  .band.is-reviews .quotes { min-height: 330px; }
}

/* ============================================================
   Checklist — what we take off your hands
   ============================================================ */

.checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 clamp(28px, 4vw, 64px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  display: flex;
  align-items: baseline;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--bone);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}

.checks li:hover { color: var(--gold-hi); border-bottom-color: var(--line-soft); }

.checks li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
  transform: translateY(-3px);
  box-shadow: 0 0 8px rgba(194,161,90,.7);
}

/* ============================================================
   MÉDIÁ — odkiaľ nás poznáte.
   Zámerne iná stavba než zvyšok webu: tmavý pás cez celú šírku,
   text vľavo, vpravo koláž z televíznej obrazovky a telefónu,
   ktorý naozaj hrá.
   ============================================================ */

.media {
  position: relative;
  padding: clamp(96px, 13vh, 176px) 0 clamp(104px, 14vh, 190px);
  background: var(--ink-soft);
  overflow: hidden;
  isolation: isolate;
}

/* teplé svetlo spoza koláže */
.media::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -6%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(194, 161, 90, .16) 0%, rgba(194, 161, 90, .05) 42%, transparent 68%);
  pointer-events: none;
}

.media::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-soft) 22%, var(--line-soft) 78%, transparent);
}

.media .wrap { position: relative; z-index: 1; }

.media__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.media__text h2 { margin: 0; }

.media__text > p { color: var(--bone-dim); max-width: 44ch; }

/* očíslované kredity */
.media__credits {
  list-style: none;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0;
  counter-reset: cred;
}

.media__credits li {
  position: relative;
  padding: 22px 0 22px 22px;
  border-top: 1px solid var(--line);
}

/* namiesto čísel jemná zlatá značka na začiatku riadku */
.media__credits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 30px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

.media__credits li:last-child { border-bottom: 1px solid var(--line); }

.media__num {
  font-family: var(--display);
  font-variation-settings: "opsz" 20, "SOFT" 0, "WONK" 0;
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gold);
  padding-top: 3px;
  flex: none;
}

.media__cred {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone-dim);
}

.media__cred b {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 7px;
}

.media__cred a { color: var(--gold-hi); border-bottom: 1px solid var(--line-soft); }
.media__cred a:hover { border-bottom-color: var(--gold); }

/* ---------- koláž ---------- */

.media__stage {
  position: relative;
  padding-bottom: clamp(48px, 7vw, 92px);
}

/* televízna obrazovka */
.media__tv {
  position: relative;
  margin: 0;
  width: 74%;
  border-radius: 3px;
  transform: rotate(-2deg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px var(--line-soft);
  transition: transform .7s var(--ease);
}

.media__stage:hover .media__tv { transform: rotate(-1.2deg); }

.media__tv .media__screen {
  aspect-ratio: 16 / 9;
  border-radius: 3px;
}

.media__tv video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.94) contrast(1.03) brightness(.95);
}

.media__tv figcaption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 34px 20px 16px;
  background: linear-gradient(to top, rgba(8, 12, 8, .92), transparent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
}

.media__live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #E0483C;
  box-shadow: 0 0 0 0 rgba(224, 72, 60, .55);
  animation: mediaLive 2.4s var(--ease) infinite;
}

@keyframes mediaLive {
  0%   { box-shadow: 0 0 0 0 rgba(224, 72, 60, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(224, 72, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 72, 60, 0); }
}

/* telefón, ktorý naozaj hrá */
.media__phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(158px, 30%, 250px);
  aspect-ratio: 9 / 19.2;
  padding: 7px;
  border-radius: 30px;
  background: linear-gradient(160deg, #2A3128, #10160F 55%);
  box-shadow: 0 34px 70px rgba(0, 0, 0, .68), 0 0 0 1px rgba(194, 161, 90, .22);
  transform: rotate(3.4deg);
  transition: transform .7s var(--ease);
}

.media__stage:hover .media__phone { transform: rotate(2deg) translateY(-6px); }

/* výrez reproduktora */
.media__phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 13px;
  border-radius: 999px;
  background: #0A0F09;
}

.media__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ink);
  cursor: pointer;
}

.media__screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* jemný náznak, že sa dá kliknúť */
.media__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 8, .18);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.media__screen:hover::after { opacity: 1; }
.is-still .media__screen { cursor: default; }
.is-still .media__screen::after { display: none; }

/* tlačidlo zvuku */
.media__sound {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.media__sound:hover { background: var(--gold-hi); transform: translateX(-50%) translateY(-2px); }

.media__tv .media__sound { left: 18px; right: auto; bottom: -19px; transform: none; }
.media__tv .media__sound:hover { transform: translateY(-2px); }

/* ikonka reproduktora: prečiarknutá, kým je ticho */
.media__ico {
  position: relative;
  width: 11px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-radius: 1px;
}

.media__ico::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 6px 0 0;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.media__ico::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 15px;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%) rotate(-42deg);
  transition: opacity .3s var(--ease);
}

.is-loud .media__ico::before { opacity: 1; }
.is-loud .media__ico::after  { opacity: 0; }

@media (max-width: 1080px) {
  .media__grid { grid-template-columns: 1fr; gap: clamp(44px, 7vw, 72px); }
  .media__stage {
    max-width: 760px;
    margin-inline: auto;
    padding-bottom: clamp(56px, 12vw, 90px);
  }
  .media__tv { width: 72%; }
  .media__phone { width: clamp(160px, 30%, 230px); }
}

/* Na mobile sa koláž rozloží pod seba, telefón len nakukne cez spodok obrazovky. */
@media (max-width: 620px) {
  .media__stage { padding-bottom: 34px; }
  .media__tv { width: 100%; transform: rotate(-1.4deg); }
  .media__tv .media__sound { right: 12px; }
  .media__phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: 52%;
    margin: 26px 2% 0 auto;
    transform: rotate(2.2deg);
  }
  .media__stage:hover .media__phone { transform: rotate(2.2deg); }
  .media__credits li { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .media__live { animation: none; }
  .media__tv, .media__phone { transition: none; }
}

/* ============================================================
   Ticks — zoznam, ktorý sa pri čítaní sám odškrtáva.
   Fajky sa dokresľujú jedna po druhej, keď sekcia nabehne.
   ============================================================ */

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 5vw, 84px);
  counter-reset: tick;
}

.ticks li {
  counter-increment: tick;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(15px, 1.9vw, 21px) 0;
  border-bottom: 1px solid var(--line);
  font-size: clamp(15px, 1.15vw, 16.5px);
  color: var(--bone-dim);
  transition: color .4s var(--ease), border-color .4s var(--ease);
}

.ticks li:hover { color: var(--bone); border-bottom-color: var(--line-soft); }

.ticks__mark {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
}

/* tenký zlatý krúžok, ktorý sa obkreslí */
.ticks__mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .5s var(--ease);
}

.ticks li:hover .ticks__mark::before { border-color: rgba(194, 161, 90, .5); }

.ticks__mark svg { width: 15px; height: 15px; overflow: visible; }

.ticks__mark path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset .55s var(--ease);
}

/* odškrtávanie postupne, položka po položke */
.ticks.is-in li:nth-child(1)  .ticks__mark path { stroke-dashoffset: 0; transition-delay: .05s; }
.ticks.is-in li:nth-child(2)  .ticks__mark path { stroke-dashoffset: 0; transition-delay: .14s; }
.ticks.is-in li:nth-child(3)  .ticks__mark path { stroke-dashoffset: 0; transition-delay: .23s; }
.ticks.is-in li:nth-child(4)  .ticks__mark path { stroke-dashoffset: 0; transition-delay: .32s; }
.ticks.is-in li:nth-child(5)  .ticks__mark path { stroke-dashoffset: 0; transition-delay: .41s; }
.ticks.is-in li:nth-child(6)  .ticks__mark path { stroke-dashoffset: 0; transition-delay: .50s; }
.ticks.is-in li:nth-child(7)  .ticks__mark path { stroke-dashoffset: 0; transition-delay: .59s; }
.ticks.is-in li:nth-child(8)  .ticks__mark path { stroke-dashoffset: 0; transition-delay: .68s; }

@media (max-width: 720px) {
  .ticks { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ticks__mark path { stroke-dashoffset: 0; transition: none; }
}

/* ============================================================
   Feature stack — alternating editorial blocks
   ============================================================ */

.stack { display: grid; gap: clamp(64px, 9vh, 130px); }

/* ============================================================
   Figrow — čísla priamo v sekcii služieb, bez rámčeka.
   Drží sa rovnakých vlasových liniek ako zvyšok webu.
   ============================================================ */

.figrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: clamp(46px, 6vh, 76px) 0 0;
}

.figrow > div {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 30px) clamp(20px, 2.4vw, 28px) 0;
}

.figrow > div + div { padding-left: clamp(18px, 2.4vw, 34px); }

.figrow > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: var(--line);
}

.figrow dt {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.figrow dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--gold-hi);
}

.figrow small {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--bone-dim);
  margin-top: 9px;
  letter-spacing: 0;
}

@media (max-width: 780px) {
  .figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figrow > div:nth-child(odd) { padding-left: 0; }
  .figrow > div:nth-child(odd)::before { display: none; }
  .figrow > div:nth-child(3),
  .figrow > div:nth-child(4) { border-top: 1px solid var(--line); }
}

@media (max-width: 480px) {
  .figrow { grid-template-columns: 1fr; }
  .figrow > div { padding-left: 0 !important; border-top: 1px solid var(--line); }
  .figrow > div:first-child { border-top: 0; }
  .figrow > div::before { display: none; }
}

/* ============================================================
   Service mosaic — staggered photo panels, the name straddling
   the bottom edge of its picture
   ============================================================ */

.svcgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px) clamp(20px, 2.6vw, 40px);
}

/* Karty sú rovnako vysoké a odkazy dole im sedia v jednej línii. */
.svccard {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.svccard__img { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }

.svccard__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.06) brightness(.78);
  transition: transform 1.5s var(--ease), filter .8s var(--ease);
}

/* the foot of the picture sinks to black so the name stays readable */
.svccard__img::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  background: linear-gradient(to top, var(--ink) 4%, rgba(8, 12, 8, .58) 46%, transparent);
}

.svccard:hover .svccard__img img { transform: scale(1.055); filter: saturate(.95) brightness(.9); }

.svccard__n {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--gold-hi);
}

.svccard__n::after { content: ""; width: 22px; height: 1px; background: var(--gold); opacity: .8; }

.svccard__body {
  position: relative;
  z-index: 2;
  margin-top: -.62em;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Rovnaký rez ako veľké nadpisy (WONK aj SOFT sedia),
   len o stupeň hrubší, aby sa dal prečítať aj takto malý. */
.svccard h3 {
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-weight: 500;
  font-size: clamp(1.34rem, 1.8vw, 1.75rem);
  letter-spacing: -0.026em;
  line-height: 1.18;
  transition: color .4s var(--ease), transform .5s var(--ease);
}

.svccard:hover h3 { color: var(--gold-hi); transform: translateX(8px); }

.svccard p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; max-width: 32ch; }

.svccard__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(194, 161, 90, .3);
  transition: gap .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}

.svccard:hover .svccard__go { gap: 16px; color: var(--gold-hi); border-color: var(--gold-hi); }
.svccard__go svg { width: 13px; height: 8px; }
.svccard__go path { stroke: currentColor; stroke-width: 1.4; fill: none; }

@media (max-width: 900px) {
  .svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .svcgrid { grid-template-columns: 1fr; gap: clamp(40px, 9vw, 60px); }
  .svccard__img { aspect-ratio: 3 / 2; }
}

/* ============================================================
   Cardstack — fotky ako kôpka kariet, ktoré sa samy premiešavajú
   ============================================================ */

.cardstack {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0;
}

.cardstack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.06) brightness(.9);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
  transition: transform 1.15s var(--ease), opacity 1.15s var(--ease);
  will-change: transform;
}

.cardstack img[data-pos="0"] { transform: none;                                    z-index: 4; opacity: 1; }
.cardstack img[data-pos="1"] { transform: rotate(4.5deg)  translate(9%, -3%)  scale(.95); z-index: 3; opacity: .8; }
.cardstack img[data-pos="2"] { transform: rotate(-5.5deg) translate(-9%, 3%)  scale(.92); z-index: 2; opacity: .62; }
.cardstack img[data-pos="3"] { transform: rotate(8deg)    translate(4%, 7%)   scale(.9);  z-index: 1; opacity: .42; }
.cardstack { cursor: pointer; }

/* izby znesú viac svetla než tmavé večerné zábery */
.cardstack.is-bright img { filter: saturate(.94) contrast(1.02) brightness(1.04); }

/* aby vyčnievajúce rohy nemali kam zmiznúť */
.cardstack__wrap { padding: clamp(26px, 4vw, 58px); }


/* ============================================================
   Quotes — recenzie, ktoré sa samy striedajú
   ============================================================ */

.quotes { display: grid; align-items: center; }

.quote {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}

.quote.is-on { opacity: 1; transform: none; pointer-events: auto; }
.quote p { color: var(--bone); max-width: none; margin: 0; }

.quote cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.quotes__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 234, 225, .22);
  background: rgba(8, 12, 8, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--bone);
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}

.quotes__arrow.is-prev { left: clamp(12px, 9vw, 210px); }
.quotes__arrow.is-next { right: clamp(12px, 9vw, 210px); }
.quotes__arrow:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.quotes__arrow svg { width: 17px; height: 10px; }
.quotes__arrow path { stroke: currentColor; stroke-width: 1.4; fill: none; }

@media (max-width: 620px) {
  .quotes__arrow { width: 38px; height: 38px; }
  .cardstack__wrap { padding: clamp(20px, 6vw, 34px); }
}

/* ============================================================
   Trio — three photo tiles with a caption underneath
   ============================================================ */

.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}

.trio figure { margin: 0; }

.trio__img { overflow: hidden; position: relative; }

.trio__img img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(.84) contrast(1.05) brightness(.9);
  transition: transform 1.3s var(--ease), filter .7s var(--ease);
}

.trio figure:hover .trio__img img { transform: scale(1.05); filter: saturate(1) brightness(1); }

.trio h3 { font-size: 1.35rem; margin: 20px 0 8px; }
.trio p { font-size: 14.5px; margin: 0; }

/* ============================================================
   Steps — a real sequence, so it is numbered
   ============================================================ */

.steps { counter-reset: step; display: grid; gap: 0; }

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(26px, 3vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.steps .step:first-child { border-top: 1px solid var(--line); }

.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 0;
  font-size: 2.2rem;
  line-height: .9;
  color: var(--gold);
  letter-spacing: -0.04em;
}

.step h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: 12px; }
.step p { margin: 0; }

/* ============================================================
   Spec list — capacity, rooms, hard numbers
   ============================================================ */

.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.spec > div { background: var(--ink); padding: clamp(22px, 2.6vw, 32px); }
.spec dt { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-faint); margin-bottom: 12px; }

.spec dd {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--gold-hi);
}

.spec small { display: block; font-family: var(--sans); font-size: 13px; color: var(--bone-dim); margin-top: 10px; letter-spacing: 0; }

/* ============================================================
   Reviews
   ============================================================ */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.reviews.is-two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.reviews.is-two .review__text { font-size: 1.16rem; }

.review {
  background: var(--ink);
  padding: clamp(28px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background .45s var(--ease);
}

.review:hover { background: var(--ink-soft); }

.review__stars { display: flex; gap: 4px; }
.review__stars svg { width: 13px; height: 13px; fill: var(--gold); }

.review__text {
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 0;
  font-size: 1.06rem;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin: 0;
  flex: 1;
  max-width: none;
}

.review__who { display: flex; align-items: center; gap: 13px; }
.review__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.review__name { font-size: 13.5px; font-weight: 600; color: var(--bone); }
.review__meta { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint); margin-top: 2px; }

/* ============================================================
   Media mentions
   ============================================================ */

.press {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 4vw, 60px);
}

.press__item { border-top: 1px solid var(--gold); padding-top: 22px; }
.press__tag { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.press__item h3 { font-size: 1.35rem; margin-bottom: 12px; }

/* ============================================================
   Gallery
   ============================================================ */

.gal {
  columns: 3;
  column-gap: 14px;
}

.gal__item {
  break-inside: avoid;
  margin-bottom: 14px;
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink-soft);
  cursor: zoom-in;
}

.gal__item img {
  width: 100%;
  filter: saturate(.82) contrast(1.05) brightness(.88);
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
}

.gal__item:hover img { transform: scale(1.045); filter: saturate(1) contrast(1.02) brightness(1); }

.gal__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color .4s var(--ease);
}

.gal__item:hover::after { border-color: rgba(194,161,90,.5); }

/* ============================================================
   Lightbox (gallery + film)
   ============================================================ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(4, 7, 4, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}

.lb.is-open { opacity: 1; visibility: visible; }

.lb__stage { max-width: min(1200px, 92vw); max-height: 86vh; }
.lb__stage img, .lb__stage video { max-height: 86vh; width: auto; max-width: 100%; }

.lb__close {
  position: absolute;
  top: clamp(16px, 3vw, 34px);
  right: clamp(16px, 3vw, 34px);
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}

.lb__close:hover { border-color: var(--gold); background: var(--gold); color: var(--ink); }

.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  color: var(--bone-dim);
  transition: color .3s var(--ease);
}

.lb__nav:hover { color: var(--gold); }
.lb__nav.is-prev { left: clamp(6px, 2vw, 26px); }
.lb__nav.is-next { right: clamp(6px, 2vw, 26px); }
.lb__nav svg { width: 26px; height: 14px; }
.lb__nav path { stroke: currentColor; stroke-width: 1.2; fill: none; }

.lb__count {
  position: absolute;
  bottom: clamp(16px, 3vw, 30px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--bone-faint);
}

/* ============================================================
   Form
   ============================================================ */

.formwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.form { display: grid; gap: 4px; }

.field { position: relative; border-bottom: 1px solid var(--line); transition: border-color .4s var(--ease); }
.field:focus-within { border-bottom-color: var(--gold); }

.field label {
  display: block;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-faint);
  padding-top: 20px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  background: none;
  border: 0;
  color: var(--bone);
  font: inherit;
  font-size: 16px;
  padding: 9px 0 16px;
  outline: none;
  border-radius: 0;
}

.field textarea { resize: vertical; min-height: 92px; }
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--ink-soft); color: var(--bone); }

.field input::placeholder, .field textarea::placeholder { color: var(--bone-faint); }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7) sepia(1) saturate(3) hue-rotate(3deg); cursor: pointer; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; }

.form__foot { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.form__note { font-size: 12px; color: var(--bone-faint); max-width: 34ch; margin: 0; }

.form__ok {
  border: 1px solid var(--gold);
  background: rgba(194,161,90,.07);
  padding: 20px 24px;
  margin-top: 24px;
  display: none;
}

.form__ok.is-on { display: block; }
.form__ok p { color: var(--bone); margin: 0; }

/* Contact facts list */
.info { display: grid; gap: 0; }

.info__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.info__k { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-faint); }
.info__v { font-size: 15.5px; color: var(--bone); }
.info__v a:hover { color: var(--gold); }

/* ============================================================
   Closing CTA
   ============================================================ */

.cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  border-top: 1px solid var(--line);
}

.cta__media { position: absolute; inset: 0; z-index: 0; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.34); }
.cta__veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(80% 70% at 50% 50%, rgba(8,12,8,.55), rgba(8,12,8,.94)); }
.cta__inner { position: relative; z-index: 2; padding: clamp(72px, 12vh, 150px) var(--gut); max-width: 780px; margin: 0 auto; }
.cta__inner p { margin-left: auto; margin-right: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }

/* ============================================================
   Footer
   ============================================================ */

.footer { background: var(--ink-soft); border-top: 1px solid var(--line); }

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 70px);
  padding: clamp(52px, 7vh, 84px) 0 44px;
}

.footer__brand img { height: auto; width: 190px; max-width: 60%; margin-bottom: 18px; opacity: .92; }
.footer h4 { font-family: var(--sans); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 18px; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer li a { font-size: 14px; color: var(--bone-dim); transition: color .3s var(--ease); }
.footer li a:hover { color: var(--gold-hi); }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding: 22px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: var(--bone-faint);
  letter-spacing: .04em;
}

.socials { display: flex; gap: 12px; }

.socials a {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}

.socials a svg { width: 15px; height: 15px; fill: var(--bone-dim); transition: fill .35s var(--ease); }
.socials a:hover { border-color: var(--gold); background: var(--gold); }
.socials a:hover svg { fill: var(--ink); }

/* ---------- pätička: štyri stĺpce, kontakt s ikonami a mapou ---------- */

.footer__top {
  grid-template-columns: minmax(0, 1fr) minmax(0, .74fr) minmax(0, 1fr);
  align-items: start;
  row-gap: clamp(38px, 5vw, 62px);
}

/* logo má rovnakú výšku ako nadpisy v ostatných stĺpcoch,
   aby text začínal na jednej linke */
.footer__brand img { height: auto; width: 142px; max-width: 52%; margin: -4px 0 18px; opacity: .92; }

.footer__brand p {
  max-width: 100%;
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--bone-dim);
}

.footer__brand p:first-of-type { color: var(--bone); }
.footer__brand p:last-of-type { margin-bottom: 0; }

.footer__col h4 { line-height: 1; padding-top: 5px; }

/* Služby ako riadky s linkou a šípkou, ktorá vybehne pri prejdení myšou */
.fnav { gap: 0; }

.fnav li { border-bottom: 1px solid var(--line); }

.fnav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  font-size: 14px;
  color: var(--bone-dim);
  transition: color .3s var(--ease), padding-left .4s var(--ease);
}

.fnav a:hover { color: var(--gold-hi); padding-left: 8px; }

.fnav__go {
  width: 14px;
  height: 8px;
  margin-left: auto;
  flex: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.fnav__go path { stroke: currentColor; stroke-width: 1.4; fill: none; }
.fnav a:hover .fnav__go { opacity: 1; transform: none; }

/* logo Bridee v riadku dôkazov */
.proof__logo.is-bridee { width: auto; height: 15px; }

/* mapa cez celú šírku pätičky */
.footer__map {
  grid-column: 1 / -1;
  aspect-ratio: 1000 / 205;
  min-height: 190px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--ink-raise);
}

.footer__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(.78) brightness(.88) contrast(1.04);
}

/* kontaktné riadky s ikonkou */
/* kontakt má rovnaké linky ako služby, aby stĺpce vyzerali ako dvojica */
.fcon { gap: 0; }

.fcon li { border-bottom: 1px solid var(--line); }

.fcon a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  transition: padding-left .4s var(--ease);
}

.fcon a:hover { padding-left: 6px; }

.fcon__ico {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}

.fcon__ico svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .35s var(--ease);
}

.fcon a:hover .fcon__ico { border-color: var(--gold); background: rgba(194, 161, 90, .12); }

.fcon__txt b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--bone);
  transition: color .3s var(--ease);
}

.fcon a:hover .fcon__txt b { color: var(--gold-hi); }

.fcon__txt small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--bone-faint);
}

.madeby {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.madeby a {
  display: inline-flex;
  align-items: center;
  border: 0;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.madeby img { height: 15px; width: auto; opacity: .85; }
.madeby a:hover { opacity: 1; transform: translateY(-1px); }
.madeby a:hover img { opacity: 1; }

@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__map { aspect-ratio: 16 / 9; }
}

@media (max-width: 520px) {
  .footer__top { grid-template-columns: 1fr; }
  .footer__map { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Mobile menu
   ============================================================ */

.burger { display: none; width: 40px; height: 40px; position: relative; flex: none; }
.burger span { position: absolute; left: 8px; right: 8px; height: 1px; background: var(--bone); transition: transform .4s var(--ease), opacity .3s var(--ease); }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 23px; }
body.is-menu .burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.is-menu .burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--ink);
  padding: 110px var(--gut) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: translateY(-101%);
  transition: transform .7s var(--ease);
  overflow-y: auto;
}

body.is-menu .menu { transform: translateY(0); }

.menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.menu__list li { border-bottom: 1px solid var(--line); }

.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 1;
  font-size: clamp(1.7rem, 8vw, 2.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

.menu__list a i { font-family: var(--sans); font-style: normal; font-size: 10.5px; letter-spacing: .18em; color: var(--bone-faint); }
.menu__foot { padding-top: 34px; display: grid; gap: 16px; }

/* ============================================================
   Mobile action bar — the header CTA has nowhere to live on a phone
   ============================================================ */

.mbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 180;
  display: none;
  grid-template-columns: 1fr 1.25fr;
  border-top: 1px solid var(--line);
  background: rgba(8, 12, 8, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.mbar a {
  padding: 17px 10px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bone);
}

.mbar a + a { background: var(--gold); color: var(--ink); }

body.is-menu .mbar { display: none; }

/* ============================================================
   Reveal on scroll
   ============================================================ */

.rv { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .09s; }
.rv[data-d="2"] { transition-delay: .18s; }
.rv[data-d="3"] { transition-delay: .27s; }

.rv-rule { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.rv-rule.is-in { transform: scaleX(1); }

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 1100px) {
  .trail { display: block; }
  .svc__peek { display: block; }
}

@media (max-width: 1099px) {
  :root { --rail: 0px; }
  .shell { padding-left: 0; }
}

@media (max-width: 1180px) {
  .nav, .header__cta .tel { display: none; }
  .burger { display: block; }
  .header__cta .btn { display: none; }
  .mbar { display: grid; }
  body { padding-bottom: 55px; }
  .menu { padding-bottom: 90px; }
  /* Video dostane celú výšku obrazovky. Text aj hodnotenia sa odsunú vyššie
     odsadením zvnútra, aby ich neprekryla spodná lišta. */
  .hero { min-height: 100svh; }

  /* Hodnotenia idú úplne na spodok hero sekcie, na predel s ďalšou sekciou.
     Text sa tým pádom môže posunúť nižšie a vyplniť priestor. */
  .hero__inner { padding-bottom: 0; }
  .hero__copywrap { margin: auto 0 0; padding-bottom: clamp(30px, 6vh, 60px); }


  /* arrows would sit on top of the copy — swiping takes over on touch */
  .hero__arrow { display: none; }

  /* na mobile je text cez celú šírku, tak tieň posunieme do stredu */
  .hero__veil {
    background:
      radial-gradient(120% 78% at 50% 46%,
        rgba(8, 12, 8, .90) 0%,
        rgba(8, 12, 8, .76) 34%,
        rgba(8, 12, 8, .44) 62%,
        rgba(8, 12, 8, .14) 84%,
        transparent 96%),
      linear-gradient(to top, rgba(8, 12, 8, .95) 0%, rgba(8, 12, 8, .62) 14%, transparent 34%),
      linear-gradient(to bottom, rgba(8, 12, 8, .6) 0%, rgba(8, 12, 8, .14) 16%, transparent 26%);
  }

  .split { grid-template-columns: 1fr; gap: 34px; }
  .split.is-text-first > .split__media { order: 0; }
  .split__media img { aspect-ratio: 4 / 3; }

  .formwrap { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .gal { columns: 2; }

  .svc__row { grid-template-columns: 2.6rem minmax(0, 1fr) 2.2rem; }
  .svc__desc { display: none; }
}

@media (max-width: 560px) {
  .brand__name { font-size: 11.5px; letter-spacing: .2em; }
  .brand__place { font-size: 8.5px; letter-spacing: .16em; }
  .brand__mark { height: 26px; }
  .header.is-stuck .brand__mark { height: 24px; }
  /* horný pruh je na telefóne zbytočný, telefón aj dopyt sú v spodnej lište */
  .topbar { display: none; }
  .eyebrow { letter-spacing: .18em; flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .form__row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .info__row { grid-template-columns: 1fr; gap: 6px; }
  .scroll-hint { display: none; }
  .gal { columns: 1; }

  /* Vrchný pás videa sa skrýval za hlavičkou. Na telefóne preto film aj závoj
     začínajú až pod ňou, takže je vidieť celý záber a text pod ním získa miesto.
     Výšku hlavičky meria main.js do premennej --headh. */
  .hero { background: var(--ink); }
  .hero__slides,
  .hero__veil { top: var(--headh, 85px); }
  .hero__inner { padding-top: calc(var(--headh, 85px) + 14px); }

  /* Na telefóne bolo všetko natlačené na seba, tak text dostane viac vzduchu. */
  .hero__actions { gap: 10px; margin-top: 28px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; padding: 15px 18px; }
  .hero__sub { font-size: 1rem; line-height: 1.58; margin-top: 22px; }
  .hero__copy .badge { margin-bottom: 18px; }
  .hero__title { margin-bottom: 0; }
  .hero .proof { margin-top: 0; }
  .hero .facts { margin-top: 22px; gap: 16px 14px; }
  .hero .fact__l { font-size: 9.5px; letter-spacing: .14em; margin-top: 5px; }
  .hero .eyebrow { margin-bottom: 16px; }
}

/* ============================================================
   SVADBY — vlastné rozloženia.
   Zámerne žiadne striedanie „fotka vľavo, text vpravo".
   Každá sekcia je postavená inak, aby stránka mala spád.
   ============================================================ */

/* ---------- Voľné termíny: musia udrieť do očí ---------- */

.dates2 {
  position: relative;
  margin-top: -1px;
  padding: clamp(78px, 11vh, 128px) 0 clamp(84px, 12vh, 136px);
  background:
    linear-gradient(180deg,
      var(--ink) 0%,
      #100B0D 14%,
      #170F12 46%,
      #100B0D 84%,
      var(--ink) 100%);
  overflow: hidden;
  isolation: isolate;
}

/* mäkký nábeh z videa hore a odchod do ďalšej sekcie dole */
/* Svetelné škvrny v sekcii sa orezávali na jej hrane a vznikal tvrdý zlom,
   preto sú prekryvy vysoké a vytrácajú sa v troch krokoch. */
.dates2__edge {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(120px, 17vh, 220px);
  z-index: 1;
  pointer-events: none;
}

.dates2__edge.is-top {
  top: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(8, 12, 8, .72) 38%, rgba(8, 12, 8, .28) 68%, transparent 100%);
}

.dates2__edge.is-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--ink) 0%, rgba(8, 12, 8, .72) 38%, rgba(8, 12, 8, .28) 68%, transparent 100%);
}

.dates2::before,
.dates2::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(58vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(4px);
}

.dates2::before {
  top: -34%;
  left: -12%;
  background: radial-gradient(circle, rgba(224, 169, 162, .22) 0%, rgba(224, 169, 162, .06) 45%, transparent 70%);
}

.dates2::after {
  bottom: -40%;
  right: -14%;
  background: radial-gradient(circle, rgba(194, 161, 90, .18) 0%, rgba(194, 161, 90, .05) 46%, transparent 72%);
}

.dates2 .wrap { position: relative; z-index: 2; }

.dates2__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 20px 48px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

/* keď je vedľa nadpisu ešte poznámka, rozdelí sa na dva stĺpce */
.dates2__head:has(.dates2__note) { grid-template-columns: minmax(0, 1fr) auto; }

.dates2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--rose-hi);
}

.dates2__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 0 rgba(224, 169, 162, .6);
  animation: datePulse 2.2s var(--ease) infinite;
}

@keyframes datePulse {
  0%   { box-shadow: 0 0 0 0 rgba(224, 169, 162, .6); }
  70%  { box-shadow: 0 0 0 12px rgba(224, 169, 162, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 169, 162, 0); }
}

.dates2__head h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.06;
}

.dates2__note {
  margin: 0;
  max-width: 34ch;
  font-size: 14px;
  color: var(--bone-dim);
}

/* jednotlivé termíny */
.dates2__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.dcard {
  position: relative;
  display: block;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 24px);
  border: 1px solid rgba(224, 169, 162, .3);
  border-radius: 3px;
  background:
    linear-gradient(160deg, rgba(224, 169, 162, .12) 0%, rgba(224, 169, 162, .03) 46%, transparent 100%),
    rgba(20, 15, 16, .6);
  overflow: hidden;
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

.dcard::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -55%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 236, .16), transparent);
  transform: skewX(-16deg);
  transition: left .7s var(--ease);
  pointer-events: none;
}

.dcard:hover {
  transform: translateY(-5px);
  border-color: var(--rose);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(224, 169, 162, .3);
}

.dcard:hover::after { left: 115%; }

.dcard__den {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
  font-size: clamp(48px, 5.4vw, 74px);
  font-weight: 400;
  line-height: .88;
  color: var(--rose-hi);
}

.dcard__mes {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  color: var(--bone);
}

.dcard__dow {
  display: block;
  margin-top: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.dcard__go {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding-top: 14px;
  border-top: 1px solid rgba(238, 234, 225, .12);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-hi);
}

.dcard__go svg { width: 14px; height: 8px; transition: transform .35s var(--ease); }
.dcard__go path { stroke: currentColor; stroke-width: 1.5; fill: none; }
.dcard:hover .dcard__go svg { transform: translateX(5px); }

.dates2__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: clamp(26px, 3vw, 38px);
}

.dates2__foot p {
  margin: 0;
  font-size: 13px;
  color: var(--bone-faint);
}

/* ---------- Feature: text a dve fotky, ktoré sa míňajú ---------- */

.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 90px);
  align-items: center;
}

.feature.is-mirror .feature__text { order: 2; }

.feature__art {
  position: relative;
  aspect-ratio: 1 / 1;
}

.feature__img {
  position: absolute;
  margin: 0;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

.feature__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.05) brightness(.92);
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
}

.feature__img:hover img { transform: scale(1.04); filter: none; }

.feature__img.is-a { top: 0; right: 0; width: 74%; height: 74%; }
.feature__img.is-b { bottom: 0; left: 0; width: 52%; height: 50%; }

.feature__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 13px 18px;
  background: var(--ink);
  border: 1px solid var(--line-soft);
  font-family: var(--display);
  font-variation-settings: "opsz" 30, "SOFT" 0, "WONK" 1;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--gold-hi);
}

.feature.is-mirror .feature__img.is-a { right: auto; left: 0; }
.feature.is-mirror .feature__img.is-b { left: auto; right: 0; }
.feature.is-mirror .feature__tag { left: auto; right: 0; }

/* ---------- Showcase: fotka cez celú šírku, text v karte na nej ---------- */

.showcase {
  position: relative;
  min-height: clamp(520px, 78vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.showcase__media { position: absolute; inset: 0; z-index: 0; }

.showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.06) brightness(.62);
}

.showcase__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(8, 12, 8, .92) 0%, rgba(8, 12, 8, .74) 42%, rgba(8, 12, 8, .18) 78%, transparent 100%),
    linear-gradient(to bottom, rgba(8, 12, 8, .5) 0%, transparent 22%, rgba(8, 12, 8, .55) 100%);
}

.showcase.is-mirror .showcase__veil {
  background:
    linear-gradient(to left, rgba(8, 12, 8, .92) 0%, rgba(8, 12, 8, .74) 42%, rgba(8, 12, 8, .18) 78%, transparent 100%),
    linear-gradient(to bottom, rgba(8, 12, 8, .5) 0%, transparent 22%, rgba(8, 12, 8, .55) 100%);
}

.showcase__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(60px, 8vh, 96px) var(--gut);
}

.showcase__card { max-width: min(100%, 540px); }
.showcase.is-mirror .showcase__card { margin-left: auto; }

.showcase__card h2 { margin: 14px 0 0; }
.showcase__card p { margin-top: 20px; }
.showcase__card p:last-of-type { margin-bottom: 0; }

/* pásik faktov pod kartou */
.showcase__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 2vw, 30px);
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}

/* tri fakty vedľa seba, nech sa nelámu pod seba */
.showcase__facts.is-row { flex-wrap: nowrap; gap: 10px clamp(14px, 1.6vw, 24px); }
.showcase__facts.is-row span { white-space: nowrap; font-size: 10.5px; letter-spacing: .13em; }
.showcase__facts.is-row b { font-size: 17px; margin-right: 6px; }

.showcase__facts span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.showcase__facts b {
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold-hi);
  margin-right: 7px;
}

/* ---------- Menuboard: nadpis vľavo, text v dvoch stĺpcoch, pás fotiek ---------- */

.mboard__top {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(34px, 4.6vw, 78px);
  align-items: start;
}

.mboard__cols {
  columns: 2;
  column-gap: clamp(28px, 3vw, 48px);
}

.mboard__cols p { break-inside: avoid; margin-top: 0; }
.mboard__cols p + p { margin-top: 18px; }

.mboard__strip {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(34px, 4vw, 58px);
}

.mboard__strip figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.mboard__strip figure:first-child { aspect-ratio: 16 / 11; }

.mboard__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04) brightness(.88);
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
}

.mboard__strip figure:hover img { transform: scale(1.05); filter: none; }

.mboard__strip figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 16px 13px;
  background: linear-gradient(to top, rgba(8, 12, 8, .9), transparent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone);
}

/* ---------- Trojica priestorov ---------- */

.rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
}

/* Plná ponuka: štyri v rade, aby bolo hneď vidieť, koľko toho je. */
.rooms.is-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); }
.rooms.is-wide .room__body { padding: clamp(16px, 1.6vw, 22px); }
.rooms.is-wide .room__body h3 { font-size: clamp(16px, 1.25vw, 19px); }
.rooms.is-wide .room__body p { font-size: 13.5px; }

@media (max-width: 1180px) { .rooms.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .rooms.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .rooms.is-wide { grid-template-columns: 1fr; } }

.room {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--ink-soft);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}

.room:hover { transform: translateY(-6px); border-color: var(--line-soft); }

.room__img { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }

.room__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.05) brightness(.82);
  transition: transform 1.4s var(--ease), filter .8s var(--ease);
}

.room:hover .room__img img { transform: scale(1.06); filter: saturate(.95) brightness(.95); }

.room__cap {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 12px;
  background: rgba(8, 12, 8, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "SOFT" 0, "WONK" 0;
  font-size: 15px;
  color: var(--gold-hi);
}

.room__body { padding: clamp(20px, 2.2vw, 28px); }

.room__body h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.5vw, 22px);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-weight: 500;
}

.room__body p { margin: 0; font-size: 14.5px; color: var(--bone-dim); }

/* ============================================================
   SVADBY — druhé kolo.
   Prechody medzi sekciami, roadmapa, odškrtávací zoznam,
   formulár priamo na stránke a plné ponukové dlaždice.
   ============================================================ */

/* Podklady ostávajú lesné, aby ladili s pätičkou aj kartami.
   Svadobný nádych nerobí hnedá, ale teplé zlaté a ružové svetlo na zelenej. */
.ground-warm  { background: linear-gradient(180deg, var(--ink) 0%, #0B120C 44%, #0B120C 56%, var(--ink) 100%); }
.ground-wine  { background: linear-gradient(180deg, var(--ink) 0%, #0D1510 42%, #0D1510 58%, var(--ink) 100%); }

/* Jemné svetlo v rohu sekcie, aby pozadie žilo. */
.glow { position: relative; isolation: isolate; overflow: hidden; }

.glow::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(64vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(194, 161, 90, .13) 0%, rgba(194, 161, 90, .04) 44%, transparent 70%);
}

.glow.is-left::before  { top: -28%; left: -16%; }
.glow.is-right::before { bottom: -32%; right: -14%; }
.glow.is-rose::before  { background: radial-gradient(circle, rgba(224, 169, 162, .13) 0%, rgba(224, 169, 162, .035) 44%, transparent 70%); }
.glow > .wrap { position: relative; z-index: 1; }

/* ---------- HERO svadby: „áno" ako grafika ---------- */

.whero__lock { display: block; }

.whero__pre,
.whero__post {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 1;
  font-weight: 300;
  line-height: 1;
  color: var(--bone);
}

/* „Vaše áno" sedí na jednom riadku, áno je oveľa väčšie a sadá na účiaru */
.hero .badge { margin-bottom: clamp(14px, 1.4vw, 20px); }

.whero__line {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.4vw, 26px);
  flex-wrap: nowrap;
}

.whero__pre  { font-size: clamp(30px, 4.2vw, 66px); }
.whero__post { font-size: clamp(24px, 2.9vw, 44px); margin-top: clamp(2px, .4vw, 8px); }

.whero__ano {
  display: block;
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-weight: 300;
  font-size: clamp(92px, 13.5vw, 210px);
  line-height: .78;
  letter-spacing: -.02em;
  background: linear-gradient(96deg, #F6E7BE 0%, #D9B96E 38%, #E0A9A2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* stĺpec faktov vpravo, nie pás dole */
.wfacts {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: start;
  gap: 0;
  margin-top: clamp(46px, 7vh, 92px);
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}

.wfacts > * { padding: 0 clamp(18px, 2.2vw, 38px); }
.wfacts > *:first-child { padding-left: 0; }
.wfacts > * + * { border-left: 1px solid var(--line-soft); }

.wfacts__n {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--display);
  font-variation-settings: "opsz" 90, "SOFT" 0, "WONK" 0;
  font-size: 26px;
  line-height: 1;
  color: var(--gold-hi);
}

.wfacts__n svg { width: 15px; height: 15px; flex: none; }
.wfacts__n .proof__stars svg { width: 11px; height: 11px; }

.wfacts__l {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

a.wfacts__row { display: block; transition: padding-left .35s var(--ease); }
a.wfacts__row:hover .wfacts__l { color: var(--gold); }
a.wfacts__row:hover .wfacts__n { color: #FFF3D4; }

/* ---------- Rozprávka: text a pod ním kinematický pás s číslami ---------- */

.tale__head {
  max-width: min(100%, 720px);
  margin: 0 auto;
  text-align: center;
}

.tale__head p { margin-left: auto; margin-right: auto; }

.tale__band {
  position: relative;
  margin-top: clamp(38px, 4.6vw, 66px);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
}

.tale__band img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  filter: saturate(.84) contrast(1.06) brightness(.6);
}

.tale__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 12, 8, .96) 0%, rgba(8, 12, 8, .55) 38%, rgba(8, 12, 8, .12) 72%, transparent 100%);
}

.tale__nums {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0 clamp(18px, 2.4vw, 40px) clamp(18px, 2.2vw, 32px);
}

.tale__nums > div { padding: 0 clamp(10px, 1.4vw, 24px); }
.tale__nums > div + div { border-left: 1px solid rgba(238, 234, 225, .16); }

.tale__nums b {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-hi);
}

.tale__nums span {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* ---------- Showcase s videom ---------- */

.showcase.is-tall { min-height: clamp(600px, 92vh, 900px); }

.showcase__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.06) brightness(.6);
}

/* ---------- Čo všetko zastrešíme: dlaždice s fotkami ---------- */

.offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(12px, 1.3vw, 18px);
}

.offer {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 3px;
  isolation: isolate;
}

.offer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) contrast(1.05) brightness(.62);
  transition: transform 1.5s var(--ease), filter .7s var(--ease);
}

.offer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 12, 8, .92) 4%, rgba(8, 12, 8, .35) 46%, transparent 78%);
}

.offer:hover img { transform: scale(1.07); filter: saturate(.95) brightness(.78); }

.offer__txt {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 18px 18px;
}

.offer__txt h3 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: 19px;
  font-weight: 500;
  color: var(--bone);
}

.offer__txt p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-dim);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.offer:hover .offer__txt p { opacity: 1; transform: none; }

/* ---------- Roadmapa dňa ---------- */

.road { position: relative; }

.road__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-soft) 8%, var(--line-soft) 92%, transparent);
}

.road__fill {
  position: absolute;
  left: 0;
  top: 27px;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, var(--gold), var(--rose));
  transition: width 1.6s var(--ease);
}

.road.is-in .road__fill { width: 100%; }

.road__items {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
}

.road__item { padding-right: 12px; }

.road__dot {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ink);
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "SOFT" 0, "WONK" 0;
  font-size: 15px;
  color: var(--gold);
  transition: border-color .5s var(--ease), color .5s var(--ease), background .5s var(--ease);
}

.road__item:hover .road__dot { border-color: var(--gold); color: var(--gold-hi); background: #14110B; }

.road__item h3 {
  margin: 22px 0 9px;
  font-size: clamp(17px, 1.35vw, 20px);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-weight: 500;
}

.road__item p { margin: 0; font-size: 14px; color: var(--bone-dim); }

.road__when {
  display: block;
  margin-top: 12px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-hi);
}

/* ---------- Odškrtávací zoznam, ktorý sa dá naozaj klikať ---------- */

.picklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(10px, 1.1vw, 14px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pick {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  padding: 17px 20px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--ink-soft);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--bone-dim);
  cursor: pointer;
  transition: border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}

.pick:hover { transform: translateY(-2px); border-color: var(--line-soft); color: var(--bone); }

.pick__box {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  display: grid;
  place-items: center;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}

.pick__box svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset .4s var(--ease);
}

.pick[aria-pressed="true"] {
  border-color: rgba(194, 161, 90, .55);
  background: rgba(194, 161, 90, .09);
  color: var(--bone);
}

.pick[aria-pressed="true"] .pick__box { background: var(--gold); border-color: var(--gold); }
.pick[aria-pressed="true"] .pick__box svg { stroke-dashoffset: 0; }

.picklist__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: clamp(24px, 2.8vw, 34px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.picklist__count {
  font-size: 13px;
  color: var(--bone-dim);
}

.picklist__count b { color: var(--gold-hi); font-weight: 600; }

/* ---------- Formulár priamo na stránke ---------- */

.book {
  position: relative;
  padding: clamp(70px, 10vh, 120px) 0;
  overflow: hidden;
  isolation: isolate;
}

.book__media { position: absolute; inset: 0; z-index: 0; }

.book__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.7) contrast(1.05) brightness(.36);
}

.book__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(11, 19, 13, .9) 24%, rgba(11, 19, 13, .92) 76%, var(--ink) 100%),
    radial-gradient(66% 60% at 72% 40%, rgba(224, 169, 162, .24) 0%, rgba(194, 161, 90, .14) 44%, transparent 74%);
}

.book .wrap { position: relative; z-index: 2; }

.book__head {
  max-width: min(100%, 720px);
  margin-bottom: clamp(34px, 4vw, 54px);
}

.book__head p { color: var(--bone-dim); max-width: 56ch; margin-top: 20px; }

.book__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 3.6vw, 56px);
  align-items: start;
}

.book__label {
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* Výber je vedľa formulára, tak musí byť drobnejší. */
.picklist.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.picklist.is-compact .pick {
  gap: 11px;
  padding: 11px 13px;
  font-size: 13.5px;
  line-height: 1.35;
}

.picklist.is-compact .pick__box { width: 21px; height: 21px; border-radius: 2px; }
.picklist.is-compact .pick__box svg { width: 12px; height: 12px; }

.book__side .picklist__count { margin: 16px 0 0; }

.book__side p { color: var(--bone-dim); }

.book__title {
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.08;
  text-wrap: balance;
}

.book__side .book__title + p { margin-top: 0; max-width: 46ch; }

.book__usp {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.book__usp li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--bone-dim);
}

.book__usp svg { width: 16px; height: 16px; flex: none; margin-top: 3px; fill: none; stroke: var(--gold); stroke-width: 2; }

/* Formulár je najdôležitejší prvok stránky, tak musí vystúpiť z pozadia:
   svetlejší podklad, zlatá linka navrchu a teplé svetlo okolo. */
.book__form {
  position: relative;
  padding: clamp(30px, 3.2vw, 44px);
  border: 1px solid rgba(224, 169, 162, .4);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(24, 34, 25, .96) 0%, rgba(14, 21, 15, .96) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, .6),
    0 0 0 6px rgba(224, 169, 162, .06),
    0 0 70px rgba(224, 169, 162, .16);
}

/* zlatý prúžok navrchu karty */
.book__form::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 22%, var(--rose) 78%, transparent);
}

.book__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.book__field { display: block; margin-bottom: 14px; }

.book__field span {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.book__field input,
.book__field select,
.book__field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(238, 234, 225, .18);
  border-radius: 3px;
  background: rgba(238, 234, 225, .07);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 15px;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}

.book__field textarea { min-height: 96px; resize: vertical; }

.book__field input:focus,
.book__field select:focus,
.book__field textarea:focus {
  outline: none;
  border-color: var(--rose);
  background: rgba(238, 234, 225, .1);
  box-shadow: 0 0 0 3px rgba(224, 169, 162, .2);
}

.book__field input::placeholder,
.book__field textarea::placeholder { color: var(--bone-faint); }

.book__send { display: grid; gap: 12px; margin-top: 4px; }
.book__send .btn { width: 100%; justify-content: center; padding: 17px 26px; font-size: 13.5px; }
.book__send small { font-size: 12px; color: var(--bone-faint); text-align: center; }

.book__done {
  display: none;
  padding: 20px;
  border: 1px solid rgba(194, 161, 90, .5);
  border-radius: 3px;
  background: rgba(194, 161, 90, .1);
  color: var(--bone);
  font-size: 15px;
}

.book.is-sent .book__done { display: block; }
.book.is-sent .book__fields { display: none; }

/* ---------- Ponuka ako vodorovná lišta kariet ---------- */

.rail {
  position: relative;
  margin-top: clamp(28px, 3.2vw, 40px);
}

.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(220px, 20vw, 280px);
  gap: clamp(14px, 1.5vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 22px;
  scrollbar-width: none;
}

.rail__track::-webkit-scrollbar { display: none; }

.rcard {
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  isolation: isolate;
}

.rcard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.05) brightness(.66);
  transition: transform 1.5s var(--ease), filter .7s var(--ease);
}

.rcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 12, 8, .94) 6%, rgba(8, 12, 8, .3) 52%, transparent 82%);
}

.rcard:hover img { transform: scale(1.06); filter: saturate(.95) brightness(.8); }

.rcard__n {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  font-family: var(--display);
  font-variation-settings: "opsz" 30, "SOFT" 0, "WONK" 0;
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--gold);
}

.rcard__txt {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 18px 20px;
}

.rcard__txt h3 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: 18px;
  font-weight: 500;
  color: var(--bone);
}

.rcard__zat { font-size: .74em; font-weight: 400; color: var(--bone-dim); }

.rcard__txt p {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--bone-dim);
}

.rail__bar {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.rail__bar i {
  display: block;
  height: 100%;
  width: 30%;
  background: linear-gradient(to right, var(--gold), var(--rose));
  border-radius: 2px;
  transition: transform .18s linear;
  transform-origin: left;
}

.rail__hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

/* ---------- Gastro: fotky na výšku, posunuté, popisky nad nimi ---------- */

.plates {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  align-items: stretch;
  margin-top: clamp(34px, 4vw, 56px);
}

.plate { position: relative; margin: 0; }

.plate figcaption {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(8, 12, 8, .74);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-hi);
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.plate:hover figcaption { opacity: 1; transform: none; }

.plate__img { overflow: hidden; border-radius: 2px; aspect-ratio: 4 / 5; }

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04) brightness(.86);
  transition: transform 1.5s var(--ease), filter .7s var(--ease);
}

.plate:hover img { transform: scale(1.05); filter: none; }

/* ---------- Recenzie na svadobnej stránke: bodky namiesto šípok ---------- */

/* Recenzie bez fotky. Tri fotkové pásy za sebou sa bili, tak tento
   dostal len farebné pozadie s jemným zlatým a ružovým svetlom. */
.band.is-reviews.is-plainbg {
  background:
    radial-gradient(78% 110% at 10% 18%, rgba(224, 169, 162, .17) 0%, transparent 58%),
    radial-gradient(72% 105% at 90% 84%, rgba(194, 161, 90, .15) 0%, transparent 60%),
    linear-gradient(162deg, #0A0F0B 0%, #161012 44%, #0C120D 100%);
}

.band.is-reviews.is-plainbg .band__veil { background: none; }

.band.is-reviews.is-plainbg::before,
.band.is-reviews.is-plainbg::after { display: none; }

.band.is-reviews.has-dots .quotes__arrow { display: none; }

/* Ovládanie pod citátom: dve šípky a bodky, nič neprekrýva text. */
.qnav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: clamp(26px, 3vw, 36px);
}

.qnav__btn {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(238, 234, 225, .26);
  border-radius: 50%;
  background: rgba(8, 12, 8, .5);
  color: var(--bone);
  cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.qnav__btn svg { width: 15px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.qnav__btn:hover { border-color: var(--gold); color: var(--gold-hi); background: rgba(194, 161, 90, .12); }

.band.is-reviews.has-dots .quotes__dots { display: flex; gap: 14px; margin: 0 0 0 6px; }
.qnav .quotes__dot { width: 8px; height: 8px; }

/* ---------- Majiteľ ako kontaktná osoba pri formulári ---------- */

.owner {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 22px);
  align-items: center;
  margin-top: clamp(28px, 3.2vw, 40px);
  padding-top: clamp(24px, 2.8vw, 34px);
  border-top: 1px solid var(--line-soft);
}

.owner__face {
  width: 92px;
  height: 92px;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 50%;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(194, 161, 90, .35);
}

.owner__kto { margin: 0; }

.owner__kto b {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: 19px;
  font-weight: 500;
  color: var(--bone);
}

.owner__kto span {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold);
}

.owner__kto + .book__call { margin-top: 10px; }

.owner .book__call { margin-top: 0; padding: 11px 20px 11px 12px; }
.owner .book__call i { width: 40px; height: 40px; }
.owner .book__call svg { width: 18px; height: 18px; }
.owner .book__call b { font-size: 20px; letter-spacing: .01em; }
.owner .book__call span span { font-size: 12.5px; margin-top: 3px; }

@media (max-width: 560px) {
  .owner { grid-template-columns: 1fr; }
}

/* ---------- Videá z médií priamo v páse recenzií ---------- */

.revmedia {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 4vw, 66px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 70px);
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid var(--line-soft);
}

.revmedia__head p {
  margin: 16px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--bone-dim);
  max-width: 40ch;
}

/* len odkazy v texte, nie tlačidlo, tomu by to prebilo tmavý text */
.revmedia__head p a { color: var(--gold-hi); border-bottom: 1px solid var(--line-soft); }
.revmedia__head p a:hover { border-bottom-color: var(--gold); }

.revmedia .media__stage { padding-bottom: clamp(30px, 4vw, 52px); }
.revmedia .media__tv { width: 76%; }
.revmedia .media__phone { width: clamp(140px, 27%, 208px); }

@media (max-width: 1000px) {
  .revmedia { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 40px); }
}

/* ---------- Roadmapa: čiara nesmie prechádzať cez čísla ---------- */

.road__dot { z-index: 2; }
.road__line, .road__fill { z-index: 0; }
.road__items { z-index: 1; }

/* ---------- Telefón vedľa formulára ---------- */

.book__call {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: clamp(24px, 2.8vw, 34px);
  padding: 13px 20px 13px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}

.book__call:hover { border-color: var(--gold); background: rgba(194, 161, 90, .08); }

.book__call i {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(194, 161, 90, .14);
}

.book__call svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.book__call b { display: block; font-size: 16px; font-weight: 600; color: var(--bone); }
.book__call span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--bone-faint); }

/* ---------- Mäkké prechody medzi fotkovými pásmi ----------
   Dva pásy s fotkou na sebe pôsobili seknuto, tak sa spodok jedného
   a vrch druhého vytratí do tmavej. ---------------------------------- */

.cta::after,
.band::before,
.band::after,
.book::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(70px, 9vh, 130px);
  z-index: 3;
  pointer-events: none;
}

.cta::after   { bottom: 0; background: linear-gradient(to top, var(--ink), transparent); }
.band::before { top: 0;    background: linear-gradient(to bottom, var(--ink), transparent); }
.band::after  { bottom: 0; background: linear-gradient(to top, var(--ink), transparent); }
.book::before { top: 0;    background: linear-gradient(to bottom, var(--ink), transparent); z-index: 2; }

/* ---------- Obradné miesto: veľká fotka na výšku, karta cez jej roh ---------- */

.cerem__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 0;
}

.cerem__photo {
  grid-column: 2;
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}

.cerem__photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.92) contrast(1.04) brightness(.94);
  transition: transform 1.6s var(--ease);
}

.cerem__photo:hover img { transform: scale(1.03); }

.cerem__tag {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  padding: 12px 18px;
  background: var(--ink);
  border: 1px solid var(--line-soft);
  font-family: var(--display);
  font-variation-settings: "opsz" 30, "SOFT" 0, "WONK" 1;
  font-size: 13px;
  color: var(--gold-hi);
}

.cerem__card {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 2;
  margin-right: clamp(-120px, -7vw, -60px);
  padding: clamp(30px, 3.4vw, 48px);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  background: rgba(12, 19, 13, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .6);
}

.cerem__card h2 { margin: 14px 0 0; }
.cerem__card p { margin-top: 20px; }
.cerem__card p:last-of-type { margin-bottom: 0; }

@media (max-width: 1000px) {
  .cerem__grid { grid-template-columns: 1fr; }
  .cerem__photo { grid-column: 1; grid-row: 1; }
  .cerem__card {
    grid-row: 2;
    grid-column: 1;
    margin: clamp(-70px, -8vw, -40px) clamp(14px, 4vw, 40px) 0;
  }
}

/* ============================================================
   OSLAVY — vlastný svet.
   Svadba je tichá a slávnostná, oslava má byť hlučnejšia: teplé
   svetlo namiesto ruže, striedavo posadené dlaždice namiesto
   úhľadnej mriežky a bežiaci pás namiesto pokojného nadpisu.
   Žiadne „fotka vpravo, text vľavo".
   ============================================================ */

/* --- Hero: nadpis, v ktorom sa mení jedno slovo --- */

.ohero__lock { display: block; line-height: 1.02; }

/* Rovnaký rez ako nadpis na svadbe, aby to bol stále ten istý web. */
.ohero__pre,
.ohero__post {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 1;
  font-weight: 300;
  line-height: 1;
  color: var(--bone);
}

.ohero__pre  { font-size: clamp(28px, 4vw, 62px); }
.ohero__post { font-size: clamp(22px, 2.7vw, 40px); margin-top: clamp(4px, .6vw, 12px); }

/* Slovo sa vymieňa, tak si drží miesto podľa najdlhšieho variantu
   a je podčiarknuté, aby bolo jasné, že sa mení zámerne. */
.ohero__swap {
  position: relative;
  display: inline-block;
  min-width: 1ch;
  max-width: 100%;
  padding-bottom: .08em;
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(46px, 7.4vw, 116px);
  line-height: .96;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Hero je zarovnaný doľava rovnako ako na svadbe, aby si stránky držali
   jeden štýl. Odlišuje ich slovo, ktoré sa mení, a teplá farba. */

/* Čiara sedí tesne pod textom a je za ním, takže cez ňu môžu prejsť
   dotiahy písmen a slovo ostane v popredí. */
.ohero__swap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .24em;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 180, 74, .85), transparent);
}

/* Farba je namaľovaná do tvaru písmen, čiže siaha len po okraj rámčeka slova.
   Pri malej výške riadku doň nespadli dotiahy písmen ako „y" a vyzerali
   odrezané, preto má spodok navyše miesto. */
.ohero__swap > span,
.oswap > span {
  position: relative;      /* aby slovo bolo pred čiarou */
  z-index: 1;
  display: inline-block;
  line-height: 1;
  /* Kurzíva prečnieva doľava aj doprava a farba sa maľuje len po okraj
     rámčeka slova, tak mu treba miesto na všetky štyri strany. */
  padding: .04em .1em .17em .09em;
  margin: 0 -.1em 0 -.09em;
  background: linear-gradient(96deg, var(--ember) 6%, var(--gold-hi) 48%, var(--ember) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}

/* Slovo nezmizne úplne, len sa stiahne. Úplná priehľadnosť robila
   v nadpise na chvíľu prázdne miesto a pôsobilo to ako chyba. */
.ohero__swap.is-out > span,
.oswap.is-out > span { opacity: .14; transform: translateY(-.12em); }

/* To isté slovo, ktoré sa mení, aj v páse s videom */
.oswap {
  display: inline-block;
  min-width: 1ch;
  max-width: 100%;
  white-space: nowrap;
  font-style: italic;
}

/* --- Bežiaci pás príležitostí --- */

.ticker {
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 2vw, 26px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-soft);
}

.ticker::before,
.ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 130px);
  z-index: 2;
  pointer-events: none;
}

.ticker::before { left: 0;  background: linear-gradient(to right, var(--ink-soft), transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left,  var(--ink-soft), transparent); }

/* Pás sa nehýbe sám od seba. Nekonečná animácia cez celú šírku obrazovky
   drží prehliadač v samostatnej vrstve a rozbíja vykresľovanie zvyšku
   stránky, presne ako to kedysi robilo filmové zrno. Namiesto toho ho
   posúva scrollovanie, čo je aj živšie: pás reaguje na človeka. */
.ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.ticker__track > span {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding-right: clamp(20px, 3vw, 44px);
  font-family: var(--display);
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
  font-size: clamp(20px, 2.6vw, 40px);
  font-weight: 400;
  white-space: nowrap;
  color: var(--bone);
}

.ticker__track i {
  font-style: normal;
  font-size: .5em;
  color: var(--ember);
  transform: translateY(-.14em);
}

.ticker__track em { font-style: italic; color: var(--gold-hi); }

/* --- Karty s fotkou: text leží priamo na zábere --- */

.karty {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(40px, 5vw, 68px);
}

.karta {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}

.karta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.05) brightness(.62);
  transition: transform 1.6s var(--ease), filter .7s var(--ease);
}

.karta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(8, 12, 8, .95) 6%, rgba(8, 12, 8, .55) 40%, rgba(8, 12, 8, .1) 72%, transparent 100%);
}

.karta:hover img { transform: scale(1.05); filter: saturate(.95) contrast(1.05) brightness(.72); }

.karta__n {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 1.4vw, 22px);
  left: clamp(16px, 1.6vw, 24px);
  font-family: var(--display);
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 300;
  line-height: 1;
  color: var(--ember);
}

.karta__txt {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 1.6vw, 24px);
  right: clamp(16px, 1.6vw, 24px);
  bottom: clamp(16px, 1.6vw, 24px);
}

.karta__txt h3 {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: clamp(19px, 1.5vw, 25px);
  font-weight: 500;
  color: var(--bone);
}

.karta__txt p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--bone-dim);
}

/* --- Pás troch priestorov --- */

.pas {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(12px, 1.4vw, 22px);
  margin-top: clamp(34px, 4vw, 56px);
}

.pas__f { position: relative; margin: 0; overflow: hidden; border-radius: 3px; }

.pas__f img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04) brightness(.82);
  transition: transform 1.6s var(--ease), filter .7s var(--ease);
}

.pas__f.is-wide img { aspect-ratio: 8 / 5; }
.pas__f:hover img { transform: scale(1.04); filter: none; }

.pas__f figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(8, 12, 8, .9), transparent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

/* --- Dlaždice, ktoré nesedia v jednom rade --- */

.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
}

.tile {
  position: relative;
  padding: clamp(24px, 2.4vw, 38px) clamp(20px, 2.2vw, 32px) clamp(26px, 2.6vw, 40px);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(168deg, rgba(232, 180, 74, .07), rgba(19, 27, 19, .55) 62%);
  overflow: hidden;
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}

/* každá druhá je posadená nižšie, aby rad nebol linka */
.tiles > .tile:nth-child(even) { transform: translateY(clamp(16px, 2.4vw, 40px)); }
.tile:hover { border-color: rgba(232, 180, 74, .5); }
.tiles > .tile:nth-child(even):hover { transform: translateY(clamp(10px, 1.8vw, 32px)); }
.tiles > .tile:nth-child(odd):hover  { transform: translateY(-6px); }

.tile__n {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 300;
  line-height: 1;
  color: rgba(232, 180, 74, .42);
}

.tile h3 {
  margin: 14px 0 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: clamp(19px, 1.5vw, 25px);
  font-weight: 500;
  color: var(--bone);
}

.tile p { margin: 10px 0 0; font-size: 15px; color: var(--bone-dim); }

/* --- Kapacity: čísla, ktoré nesedia na linke --- */

.caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 40px);
  align-items: end;
}

/* Čísla aj popisy pod nimi stoja na jednej linke. Striedavé posúvanie
   nahor a nadol vyzeralo ako chyba, nie ako zámer. */
.caps { align-items: start; }
.cap { position: relative; }

.cap b {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  font-size: clamp(46px, 7vw, 108px);
  font-weight: 300;
  line-height: .88;
  color: var(--gold-hi);
}

.cap b small { font-size: .42em; color: var(--ember); }

.cap span {
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* --- Priestor: koláž namiesto striedania --- */

.kolaz {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  align-items: start;
}

.kolaz figure { margin: 0; overflow: hidden; border-radius: 3px; }

.kolaz img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04) brightness(.88);
  transition: transform 1.6s var(--ease), filter .7s var(--ease);
}

.kolaz figure:hover img { transform: scale(1.04); filter: none; }

.kolaz__big   { grid-column: 1 / 9;  aspect-ratio: 16 / 10; }
.kolaz__tall  { grid-column: 9 / 13; aspect-ratio: 3 / 4; }
.kolaz__wide  { grid-column: 5 / 13; aspect-ratio: 21 / 9; }

.kolaz__card {
  grid-column: 1 / 5;
  align-self: center;
  padding: clamp(22px, 2.2vw, 34px) clamp(20px, 2vw, 30px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ember);
  background: rgba(8, 12, 8, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.kolaz__card p { margin: 0; font-size: 15.5px; color: var(--bone-dim); }
.kolaz__card p + p { margin-top: 14px; }
.kolaz__card strong { color: var(--bone); font-weight: 500; }

/* --- Pás s videom „Aj takto môže vyzerať vaša oslava" --- */

.oband {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(460px, 74vh, 760px);
  display: flex;
  align-items: flex-end;
}

.oband video,
.oband img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.05) brightness(.62);
  z-index: 0;
}

.oband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(8, 12, 8, .97) 4%, rgba(8, 12, 8, .5) 42%, rgba(8, 12, 8, .18) 74%, transparent 100%);
}

.oband__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut) clamp(44px, 6vh, 88px);
}

.oband__inner p.display {
  max-width: 20ch;
  margin: 0;
  color: var(--bone);
}

/* Veta v páse s videom stojí v strede na šírku aj na výšku. */
.oband:has(.is-stred) { align-items: center; }
.oband__inner.is-stred { text-align: center; padding-bottom: 0; }
.oband__inner.is-stred p.display { max-width: none; margin-left: auto; margin-right: auto; }
.ozlat.italic { font-style: italic; }

/* Pás s videom farbí <em> na jantárovú, čo by zlatý prechod prekrylo. */
.oband__inner .ozlat { color: transparent; }

.oband__inner.is-stred .oband__pod { margin-left: auto; margin-right: auto; }

/* Písmená v nadpisoch na oslavách sú o niečo ďalej od seba. Pri základnom
   stiahnutí sa mäkčeň v „veľkú" dotýkal susedného písmena. */


.oband__inner em { color: var(--ember); }

/* --- Kuchyňa: štyri fotky vedľa seba ---
   Pomer 4/5 sedí s pomerom samotných fotiek, takže sa nič neoreže. */

.dishes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}

.dish { position: relative; margin: 0; }

.dish__img { overflow: hidden; border-radius: 3px; aspect-ratio: 4 / 5; }

.dish img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04) brightness(.86);
  transition: transform 1.5s var(--ease), filter .7s var(--ease);
}

.dish:hover img { transform: scale(1.05); filter: none; }

.dish figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 11px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.dish figcaption::before {
  content: "";
  width: 14px;
  height: 1px;
  flex: none;
  background: var(--ember);
}

/* --- Oslavy prefarbia spoločné diely do teplej --- */

.is-osl .badge {
  border-color: rgba(232, 180, 74, .6);
  background: linear-gradient(180deg, rgba(232, 180, 74, .26), rgba(232, 180, 74, .1));
}

.book.is-osl .book__form { border-color: rgba(232, 180, 74, .34); }
.book.is-osl .book__usp svg { stroke: var(--ember); }

/* Nad formulárom je pás s fotkou, tak tu už fotka nie je: dve fotky nad
   sebou si liezli do cesty. Zostáva len tmavý podklad s teplým svetlom.
   Tmavý prechod je len hore a je jemný, dole sa už nemá čo stmavovať. */
.book.is-osl .book__media,
.book.is-fir .book__media { display: none; }

.book.is-osl::before,
.book.is-fir::before { height: clamp(40px, 5vh, 70px); }

.book.is-osl .book__veil {
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 12%, var(--ink-soft) 100%),
    radial-gradient(62% 58% at 74% 38%, rgba(232, 180, 74, .16) 0%, rgba(232, 180, 74, .06) 46%, transparent 76%);
}

@media (max-width: 1000px) {
  .karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pas { grid-template-columns: 1fr 1fr; }
  .pas__f.is-wide { grid-column: 1 / -1; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 34px); }
  .kolaz__big  { grid-column: 1 / 13; }
  .kolaz__tall { grid-column: 1 / 7; aspect-ratio: 4 / 5; }
  .kolaz__wide { grid-column: 7 / 13; aspect-ratio: 4 / 5; }
  .kolaz__card { grid-column: 1 / 13; }
}

/* ============================================================
   FIREMNÉ AKCIE — tretí svet.
   Svadba je slávnostná, oslava hlučná, firmy majú byť vecné.
   Preto tu nie sú meniace sa slová ani bežiace pásy, ale rovné
   linky, čísla a tabuľka. Farba je svetlé zlato, nie jantár.
   ============================================================ */

/* --- Hero: nadpis na dvoch riadkoch s podčiarknutým koncom --- */

.fhero { display: block; line-height: 1.04; }

.fhero__1,
.fhero__2 {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 100, "SOFT" 0, "WONK" 1;
  font-weight: 300;
  color: var(--bone);
}

.fhero__1 { font-size: clamp(26px, 3.5vw, 54px); }

.fhero__2 {
  position: relative;
  display: inline-block;
  margin-top: clamp(4px, .5vw, 10px);
  padding-bottom: .1em;
  font-size: clamp(44px, 6.6vw, 104px);
  font-weight: 400;
  color: var(--gold-hi);
}

/* Karty priestorov stoja v mriežke, nie v posuvnej lište: nič sa nemá
   hľadať posúvaním doprava. Prvé dve sú širšie, aby rad nebol monotónny. */
.pcards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.pcards .rcard { aspect-ratio: 4 / 5; }
.pcards .rcard:nth-child(1),
.pcards .rcard:nth-child(2) { grid-column: span 3; aspect-ratio: 16 / 10; }
.pcards .rcard:nth-child(n + 3) { grid-column: span 2; }

.is-fir-page .rcard__n { color: var(--gold-hi); }

/* V nadpise je zlatá len záverečná časť. Dotiahy „ý" potrebujú dole miesto,
   inak ich orežem farbou, ktorá siaha len po okraj rámčeka slova. */
/* Na týchto podstránkach sú písmená v nadpisoch o kúsok ďalej od seba.
   Pri základnom stiahnutí sa mäkčeň v „hneď", „veľkú" či „koľko" dotýkal
   susedného písmena. Väčšia medzera medzi slovami rieši prípad „hneď bolo".
   Na úvodnej stránke a na svadbách to nechávam tak, ako je odsúhlasené. */
.is-osl-page .display, .is-osl-page h1, .is-osl-page h2, .is-osl-page h3,
.is-fir-page .display, .is-fir-page h1, .is-fir-page h2, .is-fir-page h3,
.is-onas-page .display, .is-onas-page h1, .is-onas-page h2, .is-onas-page h3 {
  letter-spacing: 0.026em;
}

/* Väčšia medzera medzi slovami rieši prípad „hneď bolo", kde mäkčeň
   prečnieval doprava až k susednému slovu. */
.is-onas-page .display, .is-onas-page h1, .is-onas-page h2, .is-onas-page h3 {
  word-spacing: 0.05em;
}

.ozlat {
  display: inline-block;
  /* Prechod sa oreže presne na hrane rámčeka, preto padding na všetky štyri
     strany. Kurzívne „p" na začiatku inak prečnieva doľava a oreže sa.
     Zápornými okrajmi vrátim text späť, nech riadky ostanú pod sebou. */
  padding: .04em .08em .12em .09em;
  margin-left: -.09em;
  margin-right: -.08em;
  font-style: normal;
  line-height: 1.06;
  background: linear-gradient(94deg, var(--gold-hi) 8%, var(--gold) 54%, var(--gold-hi) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Text pod nadpisom nemá čierny obdĺžnik. Čitateľný je vďaka tomu, že
   pás má pod textom silnejší závoj a samotný text je svetlejší. */
.oband__inner.is-stred .oband__pod {
  max-width: 56ch;
  color: var(--bone);
  text-shadow: 0 1px 18px rgba(8, 12, 8, .9), 0 1px 4px rgba(8, 12, 8, .8);
}

.oband:has(.is-stred)::after {
  background: linear-gradient(to top, rgba(8, 12, 8, .97) 4%, rgba(8, 12, 8, .78) 34%, rgba(8, 12, 8, .42) 62%, rgba(8, 12, 8, .12) 86%, transparent 100%);
}

/* --- Štítky formátov --- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: clamp(30px, 3.6vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}

.pills li {
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  letter-spacing: .01em;
  color: var(--bone-dim);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}

.pills li:hover { border-color: var(--gold); color: var(--bone); }

/* --- Tri dôvody: len číslo, linka a text --- */

.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
}

.trio__i { border-top: 1px solid var(--line); padding-top: clamp(18px, 2vw, 28px); }

.trio__n {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--gold);
}

.trio__i h3 {
  margin: 14px 0 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: clamp(21px, 1.8vw, 30px);
  font-weight: 500;
  color: var(--bone);
}

.trio__i p { margin: 12px 0 0; font-size: 15.5px; color: var(--bone-dim); }

/* --- Tabuľka priestorov --- */

.tabulka { border-top: 1px solid var(--line); }

.tabulka__hlava,
.tabulka__r {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .5fr) minmax(0, 1.35fr);
  gap: clamp(14px, 2vw, 34px);
  align-items: baseline;
  padding: clamp(16px, 1.8vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}

.tabulka__hlava {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.tabulka__r { transition: background .35s var(--ease); }
.tabulka__r:hover { background: rgba(194, 161, 90, .045); }

.tabulka__co {
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 500;
  color: var(--bone);
}

.tabulka__k {
  font-family: var(--display);
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 1;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 300;
  color: var(--gold-hi);
}

.tabulka__p { font-size: 14.5px; color: var(--bone-dim); }

/* --- Pás s fotkou namiesto videa --- */

.oband.is-foto { align-items: flex-end; }
.oband__pod { max-width: 54ch; margin: 18px 0 0; font-size: 15.5px; color: var(--bone-dim); }

/* --- Tri fotky cateringu --- */

/* Fotky cateringu stoja vpravo od textu a majú jeho výšku. */
.cater {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 3.4vw, 58px);
  align-items: center;
}

.tri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 14px);
  margin: 0;
}

.tri__f { position: relative; margin: 0; overflow: hidden; border-radius: 3px; }

/* Prvá fotka je na výšku a stojí vedľa dvoch na šírku, aby sa nemusela
   orezávať do pásika. */
.tri__f:first-child { grid-row: span 2; }
.tri__f:first-child img { height: 100%; aspect-ratio: auto; min-height: 100%; }

.tri__f img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04) brightness(.84);
  transition: transform 1.6s var(--ease), filter .7s var(--ease);
}

.tri__f:hover img { transform: scale(1.04); filter: none; }

.tri__f figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(8, 12, 8, .9), transparent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-hi);
}

/* --- Spoločné diely v svetlom zlate --- */

.is-fir .badge {
  border-color: rgba(194, 161, 90, .55);
  background: linear-gradient(180deg, rgba(194, 161, 90, .22), rgba(194, 161, 90, .08));
}

.book.is-fir .book__form { border-color: rgba(194, 161, 90, .3); }

/* Za formulárom nie je fotka, len tmavý podklad so studeným zlatým svetlom. */
.book.is-fir .book__media { display: none; }

.book.is-fir .book__veil {
  background:
    linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 12%, var(--ink-soft) 100%),
    radial-gradient(60% 56% at 26% 34%, rgba(194, 161, 90, .13) 0%, rgba(194, 161, 90, .05) 48%, transparent 78%);
}

/* rovnaký rozostup písmen ako na oslavách, mäkčene inak zavadzajú */


@media (max-width: 1000px) {
  .trio { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 30px); }
  .cater { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
  .pcards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pcards .rcard:nth-child(1),
  .pcards .rcard:nth-child(2) { grid-column: span 2; }
  .pcards .rcard:nth-child(n + 3) { grid-column: span 2; aspect-ratio: 4 / 3; }
  .tri { grid-template-columns: 1fr 1fr; }
  .tri__f:last-child { grid-column: 1 / -1; }
  .tri__f:last-child img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   MOBIL
   Všetko nižšie platí len na telefónoch. Desktop sa nemení.
   ============================================================ */

/* bodky pod citátom */
.quotes__dots { display: none; }

.quotes__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(238, 234, 225, .3);
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.quotes__dot.is-on { background: var(--gold); transform: scale(1.4); }

@media (max-width: 1180px) {
  /* Filmové zrno je pripnutý priesvitný obdĺžnik cez celú obrazovku,
     ktorý sa navyše donekonečna hýbe. Safari na iPhone kvôli nemu drží
     stránku v inej vrstve, než kde má pripnuté prvky, a preto sa hore aj
     dole odkrýval obsah. Na telefónoch ho vypíname, aj tak ho pri 4,5 %
     priehľadnosti na malej obrazovke nikto nevidí. */
  body::after { display: none; animation: none; }

  /* Hlavička je na mobile plná od začiatku, nie až po scrollnutí.
     Predtým bola priehľadná a pozadie sa jej prefarbovalo pol sekundy,
     takže počas rolovania cez ňu presvital obsah. Roztiahne sa aj do
     bezpečnej zóny hore, aby prekryla celý vrch obrazovky. */
  .header {
    top: 0;
    background: var(--ink);
    border-bottom-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
  }

  .header.is-stuck {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: 0;
  }

  /* Pás nad hlavičkou. Safari na iPhone necháva pod svojou lištou presvitať
     obsah stránky, tak si ho zatmavíme rovnakým pozadím ako hlavička. */
  .header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    background: var(--ink);
    pointer-events: none;
  }

  /* Spodná lišta: prsty potrebujú väčší terč, nesmie sedieť na hrane
     a nesmie cez ňu nič presvitať. */
  /* Bezpečnú zónu dole vypĺňajú samotné tlačidlá, nie prázdne pozadie pod nimi.
     Zlaté tlačidlo tak ide až po spodný okraj a nevzniká pod ním tmavý pruh. */
  .mbar {
    padding: 0;
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
  }

  /* Objaví sa až keď človek kúsok poscrolluje. Zámerne cez priehľadnosť,
     nie posunom: posun na pripnutom prvku mení na iPhone to, voči čomu sa
     počíta spodný okraj, a lišta potom nesiahne až na spodok obrazovky. */
  body.is-scrolled .mbar { opacity: 1; pointer-events: auto; }

  .mbar a {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(6px);
    transition: transform .35s var(--ease);
  }

  body.is-scrolled .mbar a { transform: none; }

  /* to isté ako hore: pod lištou nesmie presvitať obsah stránky */
  .mbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 100vh;
    background: var(--ink);
    pointer-events: none;
  }
  .mbar a { padding: 19px 10px 20px; font-size: 12px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* O čosi tmavšie pozadie pod textom, nech je hero text čitateľnejší. */
  .hero__veil {
    background:
      radial-gradient(120% 78% at 50% 46%,
        rgba(8, 12, 8, .95) 0%,
        rgba(8, 12, 8, .84) 34%,
        rgba(8, 12, 8, .56) 62%,
        rgba(8, 12, 8, .22) 84%,
        transparent 96%),
      linear-gradient(to top, rgba(8, 12, 8, .96) 0%, rgba(8, 12, 8, .7) 14%, transparent 36%),
      linear-gradient(to bottom, rgba(8, 12, 8, .68) 0%, rgba(8, 12, 8, .2) 16%, transparent 28%);
  }

  /* Dôkazy pod hero: dva a dva, cez celú šírku, nie jeden dlhý riadok. */
  .hero .proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-top: 0;
    border-top: 0;
  }

  .hero .proof {
    align-items: stretch;
  }

  .hero .proof > * {
    align-content: flex-start;
    padding: 8px 12px 9px;
    border-top: 1px solid var(--line-soft);
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
  }

  /* menšie písmo, aby sa „Facebook · 121 recenzií" zmestilo na jeden riadok
     a horné linky ostali zarovnané */
  .hero .proof .proof__src {
    font-size: 9px;
    letter-spacing: .08em;
    white-space: nowrap;
  }

  .hero .proof .proof__score { font-size: 12px; }
  .hero .proof .proof__logo { width: 14px; height: 14px; }
  .hero .proof .proof__logo.is-fb { width: 13px; height: 13px; }
  .hero .proof .proof__stars svg { width: 10px; height: 10px; }

  .hero .proof > *:nth-child(odd)  { padding-left: 0; border-right: 1px solid var(--line-soft); }
  .hero .proof > *:nth-child(even) { padding-right: 0; }

  .hero .proof .proof__src { flex-basis: 100%; margin-top: 1px; }
  .hero .proof .proof__stars svg { width: 11px; height: 11px; }

  /* Poradie v sekciách: nadpis, fotky, až potom text.
     Týka sa len sekcií, ktoré majú oddelenú hlavičku, teda úvodnej stránky.
     Podstránky ostávajú tak, ako boli. */
  .split:has(.split__head) { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .split:has(.split__head) .split__body { display: contents; }
  .split:has(.split__head) .split__head { order: 1; }
  .split:has(.split__head) .cardstack__wrap,
  .split:has(.split__head) .split__media { order: 2; margin: 0 !important; }
  .split:has(.split__head) .split__text { order: 3; }
  .split:has(.split__head) .split__text > p:first-child { margin-top: 0 !important; }
  .split:has(.split__head) .cardstack__wrap { padding: clamp(20px, 5vw, 34px) !important; }

  /* Fotky v kartách služieb sa orezávali, na mobile im dáme viac výšky. */
  .svccard__img { aspect-ratio: 4 / 5; }
  .svccard__img img { object-position: center 38%; }
}

@media (max-width: 900px) {
  /* MÉDIÁ: na mobile nič nakrivo a nič cez seba, len dve obrazovky pod sebou. */
  .media { padding-top: clamp(52px, 8vh, 76px); }
  .media__grid { gap: 26px; }
  .media__credits { margin-top: 24px; }

  .media__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 460px;
    padding-bottom: 26px;
  }

  .media__tv {
    width: 100%;
    transform: none !important;
    border-radius: 4px;
  }

  .media__phone {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(62%, 220px);
    margin: 0;
    transform: none !important;
  }

  .media__tv .media__sound { left: 50%; transform: translateX(-50%); right: auto; }
  .media__tv .media__sound:hover { transform: translateX(-50%) translateY(-2px); }
}

@media (max-width: 1000px) {
  /* RECENZIE: šípky prekážali menu recenzenta, na mobile ich nahradia bodky. */
  .band.is-reviews .quotes__arrow { display: none; }

  .quotes__dots {
    display: flex;
    gap: 14px;
    margin-top: 26px;
  }

  /* hodnotenia dva a dva vedľa seba */
  .revnums { grid-template-columns: 1fr 1fr !important; }

  /* číslo nad popisom, aby sa popis nelámal do dvoch riadkov */
  .revnums__cislo {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .revnums__cislo small { font-size: 11px; }
  .revnums li { border-bottom: 1px solid rgba(238, 234, 225, .1) !important; }
  .revnums li:nth-child(1) a,
  .revnums li:nth-child(2) a { padding-top: 0 !important; }
  .revnums li:nth-child(3),
  .revnums li:nth-child(4) { border-bottom: 0 !important; }
}

@media (max-width: 620px) {
  /* Nadpisy v hero musia sedieť na dva riadky, nie na tri.
     Najdlhší je „My navaríme aj ustelieme.", podľa neho je nastavená veľkosť. */
  .hero__title { font-size: clamp(25px, 9.4vw, 40px); }
}

@media (max-width: 720px) {
  /* Zoznam „Všetko na jednom mieste" sedel zbytočne nízko. */
  .ticks { margin-top: 30px !important; }
  .ticks li { padding: 13px 0; }
  .band.is-reviews + .section { padding-top: clamp(48px, 7vh, 70px); }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  .mbar, .mbar a { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv, .hero__sub, .hero__actions, .facts, .hero .eyebrow { opacity: 1; transform: none; }
  .hero__title .line > span { transform: none; }
  .rv-rule { transform: none; }
  body::after { display: none; }
  .trail { display: none; }
}

/* ============================================================
   MOBIL — svadobná stránka.
   Musí byť až tu na konci, inak to prebijú základné pravidlá,
   ktoré sú v súbore nižšie než pôvodné mobilné bloky.
   ============================================================ */

@media (max-width: 1000px) {
  /* text a formulár pod seba */
  .book__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  .book__head { margin-bottom: clamp(26px, 4vw, 40px); }

  /* nadpis vľavo, text vpravo -> pod seba */
  .mboard__top { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
  .mboard__cols { columns: 1; }

  /* Obrad: najprv text, fotka až na konci sekcie. */
  .cerem__grid { grid-template-columns: 1fr; }
  .cerem__card { grid-column: 1; grid-row: 1; margin: 0; }
  .cerem__photo { grid-column: 1; grid-row: 2; margin-top: clamp(26px, 5vw, 40px); }

  /* videá v recenziách */
  .revmedia { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 36px); }

  /* Menu: tlačidlo patrí až za fotky jedál, nie hneď pod nadpis.
     Obal aj ľavý stĺpec sa preto na telefóne prestanú kresliť ako rámy
     a ich obsah sa poskladá do jedného stĺpca v poradí, ktoré dáva zmysel. */
  [data-chapter="Menu"] .wrap { display: flex; flex-direction: column; }
  [data-chapter="Menu"] .mboard__top,
  [data-chapter="Menu"] .mboard__top > div:first-child { display: contents; }
  [data-chapter="Menu"] .mboard__top .eyebrow { order: 1; }
  [data-chapter="Menu"] .mboard__top h2 { order: 2; margin-top: 14px; }
  [data-chapter="Menu"] .mboard__cols { order: 3; margin-top: clamp(20px, 4vw, 30px); }
  [data-chapter="Menu"] .plates { order: 4; }
  [data-chapter="Menu"] .mboard__top .hero__actions { order: 5; }
}

@media (max-width: 900px) {
  /* Fakty v hero: dva a dva a poriadne kompaktne, inak sa hero
     natiahne pod okraj obrazovky a posledný riadok nie je vidieť. */
  .wfacts {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    gap: 0;
    margin-top: clamp(24px, 4vh, 44px);
    padding-top: 16px;
  }

  .wfacts > * { padding: 9px 12px; border-left: 0 !important; border-top: 1px solid var(--line-soft); }
  .wfacts > *:first-child,
  .wfacts > *:nth-child(2) { border-top: 0; }
  .wfacts > *:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line-soft); }
  .wfacts > *:nth-child(even) { padding-right: 0; }
  /* Cena patrí do ponuky, nie do hero. Bez nej sú fakty dva a dva
     a hore ostane miesto pre nadpis. */
  .hero.is-wed .wfacts > *:nth-child(5) { display: none; }
  .wfacts > *:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
    padding: 10px 0 0;
    text-align: center;
  }
  .wfacts > *:last-child:nth-child(odd) .wfacts__n { justify-content: center; }
  .wfacts__n { font-size: 19px; gap: 6px; }
  .wfacts__n .proof__stars { gap: 1px; }
  .wfacts__n .proof__stars svg { width: 8px; height: 8px; }
  .wfacts__l { font-size: 9px; letter-spacing: .12em; margin-top: 4px; line-height: 1.35; }

  /* Čísla ležali cez video a nedali sa prečítať. Na telefóne idú pod video
     do jedného riadku, video tým pádom už netreba stmavovať zospodu. */
  .tale__band::after { display: none; }
  .tale__nums {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 14px;
    padding: 14px 0 0;
    border-top: 1px solid var(--line-soft);
  }
  .tale__nums > div { padding: 0 7px; }
  .tale__nums > div:first-child { padding-left: 0; }
  .tale__nums > div:last-child { padding-right: 0; }
  .tale__nums > div + div { border-left: 1px solid var(--line-soft); }
  .tale__nums b { font-size: clamp(19px, 5.6vw, 26px); }
  .tale__nums span { font-size: 7.5px; letter-spacing: .08em; margin-top: 5px; line-height: 1.32; }

  /* fotky jedál: dve v rade, nie päť */
  .plates { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .plates .plate:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .plates .plate:last-child:nth-child(odd) .plate__img { aspect-ratio: 16 / 10; }

  /* Popis nad fotkou mätie, tak ide pod ňu ako tichý riadok s linkou. */
  .plate { display: flex; flex-direction: column; }
  .plate__img { order: 1; }
  .plate figcaption {
    order: 2;
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    padding: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--bone-dim);
    font-size: 9px;
    letter-spacing: .13em;
    opacity: 1;
    transform: none;
  }
  .plate figcaption::before {
    content: "";
    flex: none;
    width: 12px;
    height: 1px;
    background: var(--gold);
  }

  /* Že lôžok je 50, stojí hneď v texte nad tým, tak sa tá dlaždica vypustí
     a zvyšné dve sa zmestia do jedného riadku. */
  .showcase__facts.is-row span:first-child { display: none; }
  .showcase__facts.is-row { flex-wrap: nowrap; gap: 12px; }
  .showcase__facts.is-row span { font-size: clamp(7.5px, 2.2vw, 9.5px); letter-spacing: .1em; }
  .showcase__facts.is-row b { font-size: clamp(12px, 3.6vw, 15px); margin-right: 5px; }

  /* Ubytovanie: video hore, text nad tmavým spodkom. Bočný závoj by na
     úzkej obrazovke nechal polovicu textu na svetlom zábere. */
  .showcase.is-tall { min-height: clamp(560px, 86vh, 760px); align-items: flex-end; }
  .showcase__media video,
  .showcase__media img { filter: saturate(.84) contrast(1.04) brightness(.78); }
  .showcase__veil,
  .showcase.is-mirror .showcase__veil {
    background: linear-gradient(to bottom,
      rgba(8, 12, 8, .58) 0%,
      rgba(8, 12, 8, .34) 22%,
      rgba(8, 12, 8, .82) 52%,
      rgba(8, 12, 8, .96) 78%);
  }

}

@media (max-width: 620px) {
  /* Hero na telefóne: všetko o niečo menšie a celé posadené na stred
     voľného miesta, aby to hore nelepilo na hlavičku a malo kde dýchať. */
  .hero.is-wed .hero__copywrap { margin: auto 0 0; padding-bottom: clamp(30px, 5vh, 46px); }
  .hero.is-wed .badge {
    gap: 7px;
    padding: 5px 11px 5px 9px;
    margin-bottom: 10px;
    font-size: 8px;
    letter-spacing: .12em;
  }
  .hero.is-wed .badge::before { width: 4px; height: 4px; }
  .hero.is-wed .hero__sub { font-size: 14px; line-height: 1.55; margin-top: 18px; }
  .hero.is-wed .hero__actions { gap: 8px; margin-top: 24px; }
  .hero.is-wed .hero__actions .btn { padding: 13px 16px; font-size: 11.5px; }

  /* Nadpis musí byť zreteľne väčší než popisný text pod ním,
     inak splynú do jednej šedej plochy. */
  /* Nadpis musí na telefóne vyjsť presne na dva riadky: „Vaše áno" a pod ním
     zvyšok vety v jednom kuse. Veta je pri danom reze desaťkrát širšia než
     jej veľkosť písma, takže sa veľkosť počíta zo šírky obrazovky. */
  .whero__pre  { font-size: clamp(34px, 11vw, 54px); }
  .whero__ano  { font-size: clamp(62px, 22vw, 110px); }
  .whero__post {
    font-size: min(calc(9.6vw - 4.8px), 46px);
    white-space: nowrap;
    margin-top: 4px;
  }
  .whero__line { gap: 8px; }

  /* termíny */
  .dcard { padding: 20px 20px 16px; }
  .dcard__den { font-size: clamp(42px, 13vw, 62px); }
  .dates2__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
  .dates2__foot .btn { width: 100%; justify-content: center; }

  /* Kontaktná osoba pri formulári. Veta o telefonovaní sa na úzkej obrazovke
     zalamovala do troch riadkov, tak ostane len samotné číslo. */
  .owner { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .owner__face { width: 76px; height: 76px; }
  .owner .book__call { padding: 7px 16px 7px 7px; gap: 10px; }
  .owner .book__call i { width: 34px; height: 34px; }
  .owner .book__call svg { width: 16px; height: 16px; }
  .owner .book__call b { font-size: 17px; }
  .owner .book__call span span { display: none; }

  /* polia formulára pod seba, aby sa nezmestili do dvoch úzkych stĺpcov */
  .book__row { grid-template-columns: 1fr; gap: 0; }
  .book__form { padding: 22px 18px; }

  /* Safari na iPhone kreslí dátum a číslo ako vlastný ovládací prvok, ktorý
     má svoju šírku a nezmenší sa. Bez tohto pole vytŕčalo z formulára von. */
  .book__field { min-width: 0; }
  .book__field input,
  .book__field textarea { max-width: 100%; }
  .book__field input[type="date"],
  .book__field input[type="number"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;            /* iOS ho inak kreslí ako inline prvok s vlastnou šírkou */
    width: 100%;
    min-width: 0;
    min-height: 48px;          /* iOS inak pole zvislo zosekne */
    background-clip: padding-box;
  }
  .book__field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  .book__field input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 0; }

  /* obrazovky v recenziách */
  .revmedia .media__tv { width: 100%; }
  .revmedia .media__phone { width: 52%; }
}

@media (max-width: 720px) {
  /* Film začína až pod hlavičkou, takže sa jeho horný okraj musí stratiť
     v tme. Prvé percentá závoja sú preto úplne nepriehľadné a plynulo
     nadviažu na tmavý pás nad videom. */
  .hero__veil {
    background:
      radial-gradient(120% 78% at 50% 46%,
        rgba(8, 12, 8, .90) 0%,
        rgba(8, 12, 8, .76) 34%,
        rgba(8, 12, 8, .44) 62%,
        rgba(8, 12, 8, .14) 84%,
        transparent 96%),
      linear-gradient(to top, rgba(8, 12, 8, .95) 0%, rgba(8, 12, 8, .62) 14%, transparent 34%),
      linear-gradient(to bottom, var(--ink) 0%, rgba(8, 12, 8, .55) 5%, rgba(8, 12, 8, .14) 18%, transparent 28%);
  }

}

/* ============================================================
   MOBIL — stránka oslavy. Rovnako ako pri svadbe musí byť
   až za základnými pravidlami, inak ju prebijú.
   ============================================================ */

@media (max-width: 900px) {
  /* dlaždice sa neposúvajú, na úzkej obrazovke to len robí diery */
  .tiles > .tile:nth-child(even) { transform: none; }
  .tiles > .tile:nth-child(even):hover,
  .tiles > .tile:nth-child(odd):hover { transform: none; }

  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 4vw, 30px); }
  .caps > .cap { padding-top: 0; }
  .cap b { overflow-wrap: anywhere; }
  .cap b { font-size: clamp(40px, 13vw, 64px); }
  .cap span { font-size: 9px; letter-spacing: .12em; margin-top: 9px; padding-top: 9px; }

  .ticker__track > span { font-size: clamp(17px, 5.4vw, 26px); gap: 16px; padding-right: 16px; }

  /* Pás s videom na telefóne. Dve veci: „vh" na iOS počíta s výškou pred
     zbalením lišty prehliadača, preto svh. A hlavne, pri vysokom páse sa zo
     širokého záberu orezalo pri „cover" vyše polovice šírky, takže z videa
     ostal nečitateľný pruh. Nižší pás ho ukáže podstatne viac. */
  .oband { min-height: clamp(300px, 42svh, 420px); }

  /* Text v strede potrebuje odstup zhora aj zdola, základ ho má len zdola. */
  .oband__inner { padding-bottom: clamp(30px, 4svh, 52px); }
  .oband__inner.is-stred {
    padding-top: clamp(30px, 4svh, 52px);
    padding-bottom: clamp(30px, 4svh, 52px);
  }
  .oband__pod { margin-top: 14px; font-size: clamp(14px, 4.1vw, 16px); }

  /* Nadpis v páse držala pevná veľkosť v pixeloch. Pri užšom displeji, väčšom
     systémovom písme alebo priblížení stránky sa preto zlomil na štyri riadky
     a zlatá časť spadla na vlastný riadok. Veľkosť podľa šírky okna drží
     rovnaký pomer vždy, aj po priblížení, lebo vw sa mení spolu s ním. */
  .oband__inner p.display {
    font-size: clamp(24px, 7.8vw, 37px);
    line-height: 1.08;
    text-wrap: balance;
  }

  /* štyri fotky jedál sa na telefóne poskladajú dva a dva */
  .dishes { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  .dish figcaption { font-size: 9px; letter-spacing: .12em; }
}

@media (max-width: 620px) {
  /* Hero na oslavách: menší odznak, slovo, ktoré sa mení, ostáva
     najväčšie, zvyšok nadpisu sa mu podriadi. */
  .hero.is-osl .badge {
    gap: 7px;
    padding: 5px 11px 5px 9px;
    margin-bottom: 10px;
    font-size: 8px;
    letter-spacing: .12em;
  }
  .hero.is-osl .badge::before { width: 4px; height: 4px; }
  .hero.is-osl .hero__copywrap { margin: auto 0 0; padding-bottom: clamp(30px, 6vh, 54px); }
  .hero.is-osl .hero__sub { font-size: 14px; line-height: 1.55; margin-top: 16px; }
  .hero.is-osl .hero__actions { gap: 8px; margin-top: 24px; }
  .hero.is-osl .hero__actions .btn { padding: 13px 16px; font-size: 11.5px; }

  .ohero__pre  { font-size: clamp(30px, 9.6vw, 44px); }
  .ohero__swap { font-size: clamp(56px, 20vw, 96px); }
  .ohero__post { font-size: clamp(23px, 7.2vw, 34px); margin-top: 6px; }

  /* Vycentrovaný blok uprostred stránky, kde je všetko ostatné zarovnané
     doľava, pôsobí ako cudzí prvok. Na telefóne teda ide doľava ako zvyšok. */
  .cta.is-osl { text-align: left; }
  .cta.is-osl .cta__inner p { margin-left: 0; margin-right: 0; }
  .cta.is-osl .cta__inner .eyebrow { justify-content: flex-start !important; }
  .cta.is-osl .cta__actions { justify-content: flex-start; }

  .karty { grid-template-columns: 1fr; gap: 12px; }
  /* Karta je na telefóne vyššia, aby sa z fotky orezalo čo najmenej.
     Záber je posunutý nad stred, lebo to podstatné, tváre aj prestretie,
     býva v hornej polovici. */
  .karta { aspect-ratio: 5 / 4; }
  .karta img { object-position: 50% 44%; }
  .pas { grid-template-columns: 1fr; }
  .pas__f img,
  .pas__f.is-wide img { aspect-ratio: 16 / 11; }

  .tiles { grid-template-columns: 1fr; gap: 12px; }
  .tile { padding: 20px 18px 22px; }
  .tile__n { font-size: 26px; }

  .kolaz__tall,
  .kolaz__wide { grid-column: 1 / 13; aspect-ratio: 4 / 3; }
}

/* ---------- MOBIL — firemné akcie ---------- */

@media (max-width: 900px) {
  .topbar { display: none; }

  /* Tabuľka sa na telefóne rozpadne na kartičky: názov a kapacita
     v jednom riadku, popis pod tým. Tri stĺpce by boli nečitateľné. */
  .tabulka__hlava { display: none; }
  .tabulka__r {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    align-items: baseline;
  }
  .tabulka__p { grid-column: 1 / -1; }
  .pills li { padding: 8px 14px; font-size: 12.5px; }
  .kapa__zoz li { grid-template-columns: minmax(56px, auto) minmax(0, 1fr); gap: 14px; }
  .kapa__zoz b { font-size: clamp(26px, 8vw, 38px); }
}

@media (max-width: 620px) {
  .hero.is-fir .badge {
    gap: 7px;
    padding: 5px 11px 5px 9px;
    margin-bottom: 10px;
    font-size: 8px;
    letter-spacing: .12em;
  }
  .hero.is-fir .badge::before { width: 4px; height: 4px; }
  .hero.is-fir .hero__copywrap { margin: auto 0 0; padding-bottom: clamp(30px, 6vh, 54px); }
  .hero.is-fir .hero__sub { font-size: 14px; line-height: 1.55; margin-top: 16px; }
  .hero.is-fir .hero__actions { gap: 8px; margin-top: 24px; }
  .hero.is-fir .hero__actions .btn { padding: 13px 16px; font-size: 11.5px; }

  .fhero__1 { font-size: clamp(21px, 6.4vw, 30px); }
  .fhero__2 { font-size: clamp(40px, 13.4vw, 64px); }

  .tri { grid-template-columns: 1fr; }
  .tri__f:last-child img,
  .tri__f img { aspect-ratio: 16 / 10; }
}

/* ============================================================
   Print
   ============================================================ */

@media print {
  .header, .trail, .menu, .lb, .scroll-hint, body::after { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================
   Vyskakovacie okno s krátkym dopytom.
   Ukáže sa raz za sedem dní: po tridsiatich sekundách na stránke
   alebo keď kurzor mieri von z okna. Na telefóne exit intent
   nefunguje, tam ho spustí len čas.
   ============================================================ */

.pop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}

.pop[hidden] { display: none; }

.pop__tien {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 5, .72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.pop__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: min(100%, 880px);
  max-height: min(88svh, 720px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink-soft);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.pop.is-on .pop__tien { opacity: 1; }
.pop.is-on .pop__panel { opacity: 1; transform: none; }

.pop__foto { position: relative; overflow: hidden; }

.pop__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04) brightness(.78);
}

.pop__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 55%, rgba(14, 20, 14, .96) 100%);
}

.pop__telo {
  /* min-height v mriežke musí byť nula, inak riadok narastie podľa obsahu
     a panel ho oreže namiesto toho, aby sa dal rolovať. */
  min-height: 0;
  padding: clamp(26px, 3vw, 42px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pop__eyebrow {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.pop__nadpis {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 400;
  color: var(--bone);
}

.pop__text {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--bone-dim);
}

.pop__form { margin-top: clamp(18px, 2vw, 26px); }

.pop__pole { display: block; margin-bottom: 12px; }

.pop__pole > span {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.pop__pole input {
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(8, 12, 8, .6);
  color: var(--bone);
  font: inherit;
  font-size: 15px;
  transition: border-color .3s var(--ease);
}

.pop__pole input:focus { outline: none; border-color: var(--gold); }

.pop__form .btn { width: 100%; justify-content: center; margin-top: 6px; }

.pop__mini {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--bone-faint);
}

.pop__mini a { color: var(--gold); }

/* Poznámka pod tlačidlom je jediné, čo tam ostalo. Stojí na stred pod ním. */
.pop__mini.je-vacsi {
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: .01em;
  text-align: center;
  color: var(--bone-dim);
}

.pop__x {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 12, 8, .7);
  color: var(--bone-dim);
  font-size: 14px;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.pop__x:hover { color: var(--gold-hi); border-color: var(--gold); }

.pop__hotovo { display: none; }

.pop.is-odoslane .pop__form { display: none; }
.pop.is-odoslane .pop__hotovo { display: block; margin-top: 20px; }
.pop__hotovo strong { display: block; font-size: 17px; color: var(--gold-hi); }
.pop__hotovo span { display: block; margin-top: 8px; font-size: 14px; color: var(--bone-dim); }

/* farebný nádych podľa stránky */
.is-osl-page .pop__eyebrow { color: var(--ember); }
.is-osl-page .pop__pole input:focus { border-color: var(--ember); }

@media (max-width: 760px) {
  .pop {
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .pop__panel {
    grid-template-columns: 1fr;
    /* Fotka si vezme, koľko potrebuje, text dostane zvyšok a roluje sa v ňom. */
    grid-template-rows: auto minmax(0, 1fr);
    width: 100%;
    max-height: 100%;
  }

  .pop__foto { height: clamp(104px, 20svh, 168px); }
  .pop__foto::after { background: linear-gradient(to top, rgba(14, 20, 14, .96) 4%, transparent 70%); }

  .pop__telo { padding: 22px 20px 26px; }
  .pop__nadpis { font-size: 27px; line-height: 1.1; }
  .pop__text { font-size: 14.5px; }
  .pop__pole { margin-bottom: 10px; }

  /* Pod 16px si iOS pri kliknutí do políčka priblíži celú stránku. */
  .pop__pole input { font-size: 16px; padding: 12px 13px; }

  /* iOS kreslí dátumové pole ako inline prvok s vlastnou šírkou, ktorú si
     drží aj proti width: 100%, a pole potom vytŕča z okna von. */
  .pop__pole { min-width: 0; }
  .pop__pole input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    background-clip: padding-box;
  }
  .pop__pole input[type="date"]::-webkit-date-and-time-value { text-align: left; }
  .pop__pole input[type="date"]::-webkit-calendar-picker-indicator { margin-left: 0; }

  .pop__x { top: 8px; right: 8px; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .pop__tien, .pop__panel { transition: none; }
}

/* ============================================================
   O nás — príbeh v kapitolách
   ============================================================ */

.pribeh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 76px);
  align-items: center;
}

.pribeh.is-obratene .pribeh__foto { order: -1; }

.pribeh__txt p { margin-top: 22px; color: var(--bone-dim); }
.pribeh__txt p:last-child { margin-bottom: 0; }
.pribeh__txt strong { color: var(--bone); font-weight: 500; }
.pribeh__txt h2 { margin-top: 14px; }

.pribeh__foto { margin: 0; overflow: hidden; border-radius: 3px; }

.pribeh__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.9) contrast(1.04) brightness(.86);
  transition: transform 1.8s var(--ease), filter .7s var(--ease);
}

.pribeh__foto:hover img { transform: scale(1.04); filter: none; }

/* Galéria sa rozbalí na mieste, nie na inej stránke. */
.gal__item.is-viac { display: none; }
.gal.is-cela .gal__item.is-viac { display: block; }

.galviac { display: flex; justify-content: center; margin-top: clamp(22px, 2.6vw, 34px); }

@media (max-width: 900px) {
  .pribeh { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 32px); }
  .pribeh.is-obratene .pribeh__foto { order: 0; }
}

/* ============================================================
   Kontakt — dlaždice so spojením a farebná mapa
   ============================================================ */

.kdlazdice {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.kdl {
  display: block;
  padding: clamp(22px, 2.2vw, 32px) clamp(18px, 1.8vw, 26px) clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(168deg, rgba(194, 161, 90, .06), rgba(19, 27, 19, .5) 62%);
  transition: border-color .4s var(--ease), transform .5s var(--ease);
}

a.kdl:hover { border-color: rgba(194, 161, 90, .55); transform: translateY(-4px); }

.kdl__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: rgba(8, 12, 8, .5);
}

.kdl__ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kdl__k {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.kdl__v {
  display: block;
  margin-top: 9px;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 500;
  color: var(--bone);
}

.kdl__p { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--bone-dim); }

.ksiete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(24px, 2.6vw, 36px);
}

.ksiete > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-right: 4px;
}

/* Mapa je farebná, len s tenkým rámom, aby nevytŕčala z tmavého webu. */
.mapa {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
}

.mapa iframe { display: block; width: 100%; height: clamp(340px, 46vh, 520px); border: 0; }

/* Popiska pod mapou sa smie zalomiť a stojí na stred rovnako ako mapa. */
.mapa__pod {
  /* Bez zrušenia zdedenej šírky by popiska stála v ľavej tretine pod mapou. */
  max-width: none;
  margin: 16px auto 0;
  text-align: center;
  text-wrap: balance;
}

@media (max-width: 1000px) {
  .kdlazdice { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .kdlazdice { grid-template-columns: 1fr; }
  .kdl { padding: 18px 18px 22px; }
  .kdl__ico { width: 36px; height: 36px; margin-bottom: 14px; }
}

/* Formulár na kontakte začína hneď pod hlavičkou, tak potrebuje odstup,
   aby ho pripnutá hlavička neprekryla. */
.book.is-prvy { padding-top: calc(var(--headh, 146px) + clamp(40px, 6vh, 80px)); }

/* Kapitoly na stránke o nás môžu mať namiesto jednej fotky sadu kariet. */
.pribeh__karty .pcards { gap: clamp(10px, 1vw, 14px); }
.pcards.is-tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcards.is-tri .rcard,
.pcards.is-tri .rcard:nth-child(n) { grid-column: auto; aspect-ratio: 3 / 4; }
.pcards.is-tri .rcard__txt { padding: 16px 14px; }
.pcards.is-tri .rcard__txt h3 { font-size: 15px; }

@media (max-width: 900px) {
  .pcards.is-tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcards.is-tri .rcard { aspect-ratio: 4 / 3; }
}

/* Karty priestorov na firmách potrebujú odstup od trojice dôvodov nad nimi. */
.trio + .pcards { margin-top: clamp(44px, 5vw, 78px); }

/* Na telefóne sa karty priestorov nezmestia do dvoch stĺpcov: pri šírke
   162 px a výške 101 px sa do nich nevošiel ani nadpis. Idú pod seba. */
@media (max-width: 720px) {
  .pcards { grid-template-columns: 1fr !important; }
  .pcards .rcard,
  .pcards .rcard:nth-child(1),
  .pcards .rcard:nth-child(2),
  .pcards .rcard:nth-child(n + 3) {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 10;
  }
  .pcards .rcard__txt { padding: 18px 16px; }
  .pcards .rcard__txt h3 { font-size: 19px; }
  .pcards .rcard__txt p { font-size: 13.5px; }
}

/* Recenzie na stránke o nás bez ružového nádychu, ten patrí svadbám. */
.band.is-reviews.is-bezruze {
  background:
    radial-gradient(78% 110% at 10% 18%, rgba(194, 161, 90, .12) 0%, transparent 58%),
    radial-gradient(72% 105% at 90% 84%, rgba(194, 161, 90, .1) 0%, transparent 60%),
    linear-gradient(162deg, #0A0F0B 0%, #101610 44%, #0C120D 100%);
}

/* Galéria: mriežka namiesto stĺpcov. Pri stĺpcoch prehliadač rozdelil
   fotky len do dvoch a tretí ostal prázdny. */
.gal {
  columns: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.gal__item { margin-bottom: 0; aspect-ratio: 4 / 3; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1180px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .gal { grid-template-columns: 1fr; } }

/* ============================================================
   Poďakovanie po odoslaní dopytu
   Jedno okno pre všetky formuláre na webe.
   ============================================================ */

.dakujem {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}

.dakujem[hidden] { display: none; }

.dakujem__tien {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 5, .78);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}

.dakujem__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  max-height: 92svh;
  overflow-y: auto;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 44px) clamp(28px, 3vw, 40px);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(194, 161, 90, .10), transparent 62%),
    var(--ink-soft);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}

.dakujem.is-on .dakujem__tien { opacity: 1; }
.dakujem.is-on .dakujem__panel { opacity: 1; transform: none; }

.dakujem__znak { display: grid; place-items: center; margin-bottom: 18px; }
.dakujem__znak svg { width: 62px; height: 62px; fill: none; }

.dakujem__kruh {
  stroke: rgba(194, 161, 90, .45);
  stroke-width: 1.6;
}

.dakujem__fajka {
  stroke: var(--gold-hi);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}

.dakujem.is-on .dakujem__fajka { animation: fajka .6s .25s var(--ease) forwards; }

@keyframes fajka { to { stroke-dashoffset: 0; } }

.dakujem__eyebrow {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.dakujem__nadpis {
  margin: 0;
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 400;
  color: var(--bone);
}

.dakujem__text {
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--bone-dim);
}

.dakujem__text a { color: var(--gold-hi); }

.dakujem__cislo {
  margin: 14px 0 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

.dakujem__cislo:empty { display: none; }

.dakujem .dakujem__ok {
  width: 100%;
  justify-content: center;
  margin-top: clamp(22px, 2.6vw, 30px);
}

.dakujem__x {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(8, 12, 8, .7);
  color: var(--bone-faint);
  font-size: 14px;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.dakujem__x:hover { color: var(--gold-hi); border-color: var(--gold); }

/* Kým je poďakovanie na obrazovke, stránka pod ním sa nehýbe. */
body.is-dakujem { overflow: hidden; }

/* Hláška, keď sa odoslanie nepodarí. */
.form-chyba {
  margin: 14px 0 0;
  padding: 11px 14px;
  border-left: 2px solid var(--rose, #E0A9A2);
  border-radius: 2px;
  background: rgba(224, 169, 162, .08);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--bone);
}

@media (prefers-reduced-motion: reduce) {
  .dakujem__tien,
  .dakujem__panel { transition: none; }
  .dakujem.is-on .dakujem__fajka { animation: none; stroke-dashoffset: 0; }
}

/* ============================================================
   Súhlas s cookies
   Lišta dole, po rozkliknutí sa z nej stane panel s prepínačmi.
   ============================================================ */

.suhlas {
  position: fixed;
  z-index: 450;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: auto;
  max-width: 560px;
  margin-left: auto;
  padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(194, 161, 90, .10), transparent 60%),
    rgba(14, 20, 14, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

.suhlas[hidden] { display: none; }
.suhlas.is-on { opacity: 1; transform: none; }

.suhlas__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.suhlas__eyebrow svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.suhlas__nadpis {
  margin: 0 0 8px;
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 400;
  color: var(--bone);
}

.suhlas__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-dim);
}

.suhlas__text a {
  color: var(--gold-hi);
  text-underline-offset: 3px;
}

.suhlas__tlacidla {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(18px, 2vw, 24px);
}

.suhlas__tlacidla .btn { flex: 1 1 auto; justify-content: center; }

.suhlas__ine {
  flex: 1 1 auto;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--bone-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}

.suhlas__ine:hover { color: var(--bone); border-color: var(--gold); }

/* Podrobné nastavenie sa vysunie až po kliknutí na Nastaviť. */
.suhlas__detail {
  display: none;
  margin-top: clamp(18px, 2vw, 22px);
  padding-top: clamp(16px, 1.8vw, 20px);
  border-top: 1px solid var(--line);
}

.suhlas.is-detail .suhlas__detail { display: block; }
.suhlas.is-detail { max-width: 620px; }

.volba {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
}

.volba + .volba { border-top: 1px solid rgba(31, 43, 31, .7); }

.volba__txt { flex: 1; min-width: 0; }
.volba__txt b { display: block; font-size: 14px; font-weight: 600; color: var(--bone); }
.volba__txt span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--bone-faint); }

/* Prepínač. Skutočné políčko je skryté, ale ostáva ovládateľné klávesnicou. */
.prepinac { position: relative; flex: 0 0 auto; width: 44px; height: 25px; }
.prepinac input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.prepinac i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: 25px;
  background: rgba(8, 12, 8, .8);
  transition: background .3s var(--ease), border-color .3s var(--ease);
  pointer-events: none;
}

.prepinac i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--bone-faint);
  transition: transform .3s var(--ease), background .3s var(--ease);
}

.prepinac input:checked + i { background: rgba(194, 161, 90, .28); border-color: var(--gold); }
.prepinac input:checked + i::after { transform: translateX(19px); background: var(--gold-hi); }
.prepinac input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
.prepinac input:disabled { cursor: default; }
.prepinac input:disabled + i { opacity: .55; }

/* Mapa sa načíta až so súhlasom, dovtedy je na jej mieste výzva. */
.mapa__zamok {
  display: grid;
  place-items: center;
  gap: 14px;
  height: clamp(340px, 46vh, 520px);
  padding: 30px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(194, 161, 90, .07), transparent 60%),
    var(--ink-soft);
}

.mapa__zamok p {
  margin: 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-dim);
}

.mapa__zamok svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
}

@media (max-width: 620px) {
  .suhlas { max-width: none; padding: 20px 18px 22px; }
  .suhlas__tlacidla { flex-direction: column; }
  .suhlas__tlacidla .btn,
  .suhlas__ine { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .suhlas { transition: none; }
}

/* ============================================================
   MOBIL — stránka O nás
   Musí ostať na konci súboru, inak ju prebijú skoršie pravidlá.
   ============================================================ */

@media (max-width: 720px) {

  /* Hlavička stránky: vyšší panel nechá text klesnúť nižšie pod menu
     a nad textom ostane vidieť kus fotky. */
  .is-onas-page .pagehead { min-height: 78svh; }
  .is-onas-page .pagehead__inner { padding-bottom: clamp(30px, 5vh, 44px); }
  .is-onas-page .pagehead .lead { margin-top: 16px; }

  /* Kapitoly: fotka patrí hneď pod nadpis, nie až za celý text.
     „display: contents" vytiahne nadpis aj odseky medzi položky mriežky,
     takže ich viem preusporiadať bez zásahu do desktopu. */
  .is-onas-page .pribeh {
    display: flex;
    flex-direction: column;
    /* Základ má „center", čo by v stĺpci zúžilo fotky na šírku obsahu.
       Kôpka fotiek má obrázky mimo toku, takže by spadla na nulu. */
    align-items: stretch;
    gap: 0;
  }

  .is-onas-page .pribeh__txt { display: contents; }

  .is-onas-page .pribeh__txt > .eyebrow { order: 0; }
  .is-onas-page .pribeh__txt > h2 { order: 1; margin-top: 10px; }

  .is-onas-page .pribeh > .pribeh__foto,
  .is-onas-page .pribeh > .cardstack__wrap {
    order: 2;
    margin: 22px 0 0;
  }

  .is-onas-page .pribeh__txt > p { order: 3; margin-top: 22px; }
}

/* ============================================================
   MOBIL — kontaktná osoba pri formulári
   Musí ostať na konci súboru, prebíja skoršie pravidlá pre .owner.
   ============================================================ */

@media (max-width: 560px) {
  /* Meno vedľa fotky, telefón pod nimi cez celú šírku. Predtým sa všetko
     tlačilo do úzkeho stĺpca vedľa fotky a číslo doliehalo na okraj. */
  .owner {
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 14px;
  }

  .owner__face { width: 64px; height: 64px; }

  /* Vytiahne meno aj telefón medzi položky mriežky, aby sa dali rozmiestniť. */
  .owner__txt { display: contents; }

  .owner__kto { grid-column: 2; }

  .owner__kto + .book__call { margin-top: 0; }

  .owner .book__call {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    padding: 9px 18px 9px 9px;
  }

  .owner .book__call b { font-size: 18px; }
}