/* SLUŽBY — page-scoped layout a motion. Zdieľaný ../style.css sa načíta
   prvý kvôli reálnym brandovým primitívam (hlavička, capsule nav, overlay,
   pätka, .btn-accent, tokeny) -- všetko nižšie je len rozšírenie pre túto
   trasu, nikdy druhý dizajnový systém. Prefix `sl-` sa nekríži ani s
   triedami domovskej stránky (`svc-`, `about-`), ani s /o-mne/. */

.sluzby-page {
  --sl-paper: #fbfcfb;
  --sl-ink: #111214;
  --sl-dark: #0b0d10;
  --sl-muted: #62666d;
  --sl-radius: clamp(22px, 2vw, 34px);
  --sl-radius-sm: clamp(14px, 1.2vw, 20px);
  --sl-pad-x: clamp(20px, 4vw, 76px);
  --sl-nav-clearance: calc(var(--nav-top, 20px) + var(--nav-h, 62px) + clamp(30px, 4.5vh, 66px));
  --sl-card-shadow: 0 2px 6px rgba(20, 22, 26, 0.05), 0 22px 54px rgba(20, 22, 26, 0.10);
  min-width: 0;
  color: var(--sl-ink);
  background: var(--sl-paper);
  overflow-x: clip;
}

.sluzby-page main,
.sluzby-page section,
.sluzby-page figure { min-width: 0; }

/* Zdieľaná hlavička je na domovskej stránke skrytá (opacity 0) a odkrýva ju
   až GSAP pri prechode do Hero. Tu žiadny taký prechod nie je. */
.sluzby-page .sl-header { opacity: 1; z-index: 100; }
.sluzby-page .sl-header .site-header-motion {
  padding-top: var(--nav-top, clamp(14px, 1.8vw, 26px));
  padding-bottom: 0;
}
.sluzby-page .capsule-nav { pointer-events: auto; }
.sluzby-page .capsule-links a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }

.sl-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 140;
  transform: translateY(-160%);
  padding: 12px 18px;
  border-radius: 999px;
  color: #0b0d10;
  background: var(--accent);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.sl-skip-link:focus { transform: translateY(0); }

.sluzby-page a:focus-visible,
.sluzby-page button:focus-visible,
.sluzby-page select:focus-visible,
.sluzby-page input:focus-visible,
.sluzby-page textarea:focus-visible,
.sluzby-page [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* ============================================================
   SEKCIA A MRIEŽKA
   Rovnaká geometria buniek ako domov aj /o-mne/ (--grid-cell).
   ============================================================ */
.sl-section {
  position: relative;
  isolation: isolate;
  /* Plocha nikam nepresahuje -- je presne v sekcii a roztiahne sa v nej.
     Orez chráni pred vodorovným pretečením dekorácií. */
  overflow: clip;
  padding: clamp(64px, 8vh, 118px) var(--sl-pad-x) clamp(72px, 9vh, 128px);
  /* Odsadenie kotiev pod fixnou hlavičkou rieši `html { scroll-padding-top }`
     v ../style.css -- jediné miesto v projekte. Tu ostáva len malý odstup,
     aby sekcia nezačínala tesne pod kapsulou; plná výška hlavičky by sa
     inak započítala dvakrát (84 + 102 = 186 px medzera). */
  scroll-margin-top: clamp(10px, 1.6vh, 24px);
}

.sl-section--hero {
  padding-top: var(--sl-nav-clearance);
  min-height: 100svh;
}

.sl-light,
.sl-dark {
  --sl-grid-ink: rgba(127, 131, 134, 0.13);
  background-color: var(--sl-paper);
  background-image:
    linear-gradient(var(--sl-grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--sl-grid-ink) 1px, transparent 1px);
  background-size: var(--grid-cell, 132px) var(--grid-cell, 132px);
  /* --grid-y publikuje alignGrids() rovnako ako domov aj /o-mne/:
     pôvod mriežky nadväzuje naprieč sekciami, nikde neskočí. */
  background-position: 0 var(--grid-y, 0px);
  background-repeat: repeat;
}

.sl-dark {
  color: #fff;
  /* Základ ostáva svetlý so SVETLOU mriežkou; tmu aj tmavú mriežku
     kreslí .sl-stage. Vďaka tomu sú obe mriežky tá istá geometria a
     krížové stmievanie nemôže žiadnu čiaru pohnúť. */
  --sl-grid-ink: rgba(127, 131, 134, 0.13);
  background-color: var(--sl-paper);
}

/* Prechody svetlo↔tma rieši systém CONTAINED STAGE na konci tohto súboru. */

.sl-inner {
  position: relative;
  z-index: 3;
  width: min(100%, 1640px);
  margin-inline: auto;
}

/* ============================================================
   DEKORÁCIE
   Vonkajší obal patrí revealu, vnútorný plávaniu -- nikdy nezapisujú
   do rovnakého transformu.
   ============================================================ */
.sl-decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  line-height: 0;
  will-change: transform;
}
.sl-decor img { width: 100%; height: auto; display: block; }
.sl-decor-float { display: block; will-change: transform; }

.sl-decor--hero-a { top: 9%;  left: -3.2%; width: clamp(84px, 8vw, 150px); }
.sl-decor--hero-b { top: 34%; left: -5%;   width: clamp(120px, 13vw, 248px); }
.sl-decor--hero-c { top: 20%; right: -2.4%; width: clamp(70px, 6.6vw, 126px); }
.sl-decor--show-a { top: 5%;  left: -2.6%; width: clamp(70px, 6.4vw, 122px); }
.sl-decor--show-b { bottom: 6%; left: -4.6%; width: clamp(110px, 12vw, 226px); }
.sl-decor--event-a { top: 6%;  right: -2.2%; width: clamp(78px, 7vw, 132px); }
.sl-decor--event-b { top: 44%; right: -4.4%; width: clamp(112px, 11.5vw, 214px); }
.sl-decor--excl-a { top: 12%; right: -2.6%; width: clamp(76px, 7vw, 138px); }
.sl-decor--why-a  { top: 4%;  left: -4.4%; width: clamp(104px, 11vw, 206px); }
.sl-decor--why-b  { top: 12%; right: -2.2%; width: clamp(74px, 6.8vw, 128px); }
.sl-decor--team-a { top: 8%;  right: -2.4%; width: clamp(76px, 7vw, 136px); }
.sl-decor--team-b { bottom: 4%; left: -4.8%; width: clamp(108px, 11.5vw, 210px); }
.sl-decor--order-a { top: 6%; left: -3%;   width: clamp(76px, 7vw, 132px); }
.sl-decor--order-b { top: 40%; left: -5%;  width: clamp(110px, 11.5vw, 212px); }
.sl-decor--help-a { top: 10%; right: -2.6%; width: clamp(74px, 6.8vw, 128px); }
.sl-decor--help-b { bottom: 12%; left: -4.6%; width: clamp(106px, 11vw, 200px); }

/* ============================================================
   TYPOGRAFIA
   ============================================================ */
.sl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(12px, 1.6vh, 20px);
  color: var(--sl-ink);
  font-size: clamp(11px, 0.82vw, 13px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sl-dark .sl-kicker,
.sl-help-panel .sl-kicker { color: #fff; }
.sl-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.sl-display {
  /* Flex stĺpec, aby sa záporné marginy masiek `.sl-line` (CA-037)
     nezlučovali medzi riadkami -- pri bežnom bloku by dva záporné marginy
     splynuli do jedného a riadkovanie by narástlo o 0,08 em. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
  color: inherit;
  font-size: clamp(38px, 5.1vw, 86px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.sl-display--md { font-size: clamp(32px, 3.9vw, 66px); }
.sl-display--wide { font-size: clamp(29px, 3.3vw, 58px); }

/* CA-037: maska riadku je o 0,12 em vyššia hore (diakritika verzálok
   Á Č É Í Ú Ý Ž Š siaha ~0,10 em nad hranu boxu pri line-height 0.94) a
   o 0,08 em nižšie dole (čiarka). Záporný margin vracia layoutovú výšku
   presne na pôvodnú hodnotu -- riadkovanie sa nemení, mení sa len to, čo
   maska prepustí. Počiatočný `yPercent` revealu je preto 125, nie 105
   (sluzby.js), aby väčšia maska pred odkrytím neukázala vrch písmen. */
.sl-line {
  display: block;
  overflow: hidden;
  padding-block: 0.12em 0.08em;
  margin-block: -0.12em -0.08em;
}
.sl-line-inner { display: block; will-change: transform; }
.sl-line-inner--accent { color: var(--accent); }
.accent-dot { color: var(--accent); }

.sl-copy { margin-top: clamp(16px, 2.2vh, 26px); }
.sl-copy p {
  margin: 0 0 clamp(10px, 1.4vh, 16px);
  max-width: 62ch;
  color: var(--sl-muted);
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.6;
}
.sl-dark .sl-copy p { color: rgba(255, 255, 255, 0.72); }
.sl-copy p:last-child { margin-bottom: 0; }

.sl-lead {
  color: var(--sl-muted);
  font-size: clamp(16px, 1.2vw, 21px) !important;
  line-height: 1.55;
}

.sl-emphasis,
.sl-strong {
  color: var(--sl-ink) !important;
  font-size: clamp(15px, 1.15vw, 20px) !important;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.sl-dark .sl-emphasis,
.sl-dark .sl-strong,
.sl-strong--light { color: #fff !important; }
.sl-strong--light { margin-top: clamp(14px, 2vh, 22px); }

.sl-note {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.55;
}

.sl-callout {
  margin: clamp(16px, 2.2vh, 26px) 0 0;
  padding: clamp(16px, 1.9vw, 26px) clamp(18px, 2.1vw, 30px);
  max-width: 640px;
  border-radius: var(--sl-radius-sm);
  background: #fff;
  box-shadow: var(--sl-card-shadow);
  color: var(--sl-ink);
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ============================================================
   ROZLOŽENIA
   ============================================================ */
.sl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(26px, 3.4vw, 62px);
}

.sl-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  /* CA-041: text a fotografia začínajú na spoločnej hornej osi (predtým
     `center` nechal nad textom 64-144 px prázdneho miesta). Overené na
     sekciách 02, 03 aj 04. */
  align-items: start;
  gap: clamp(26px, 3.4vw, 66px);
}
.sl-split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }

.sl-heading--wide { max-width: 1180px; }

/* ============================================================
   FOTOGRAFIE
   Osoba aj publikum zostávajú vždy vnútri karty -- žiadny výrez
   postavy von z rámu.
   ============================================================ */
.sl-media {
  position: relative;
  margin: 0;
  border-radius: var(--sl-radius);
  overflow: hidden;
  background: #ecece8;
  box-shadow: 0 2px 8px rgba(20, 22, 26, 0.06), 0 28px 66px rgba(20, 22, 26, 0.18);
  will-change: transform;
}
.sl-media-frame { display: block; width: 100%; height: 100%; overflow: hidden; }
.sl-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sl-media--hero { aspect-ratio: 16 / 10; }
.sl-media--hero img { object-position: 50% 40%; }
.sl-media--portrait {
  aspect-ratio: 4 / 5;
  /* CA-041: portrét sa obmedzí dostupnou výškou výrezu (100svh mínus
     zvislé odsadenie sekcie), pomer 4:5 zostáva, focal point sa nemení.
     Na 1366×768 tak fotka končí vo výreze namiesto 813 px. */
  width: min(100%, calc((100svh - 190px) * 0.8));
  justify-self: end;
}
.sl-media--portrait img { object-position: 50% 38%; }
.sl-media--square { aspect-ratio: 1 / 1; }
.sl-media--square img { object-position: 50% 42%; }
.sl-media--team { aspect-ratio: 4 / 3; }
.sl-media--team img { object-position: 50% 46%; }
.sl-media--why { aspect-ratio: 16 / 10; margin-top: clamp(18px, 2.4vh, 28px); }
.sl-media--why img { object-position: 50% 42%; }
.sl-media--order { aspect-ratio: 16 / 9; margin-top: clamp(18px, 2.4vh, 28px); }
.sl-media--order img { object-position: 50% 44%; }
.sl-media--help { aspect-ratio: 4 / 3; }
.sl-media--help img { object-position: 50% 40%; }

.sl-media-badge {
  position: absolute;
  top: clamp(12px, 1.4vw, 20px);
  left: clamp(12px, 1.4vw, 20px);
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(11, 13, 16, 0.82);
  color: #fff;
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   PÁSY (informačné, bez odkazov)
   ============================================================ */
.sl-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 1.6vw, 28px);
  margin: clamp(24px, 3.4vh, 46px) 0 0;
  padding: clamp(13px, 1.5vw, 20px) clamp(20px, 2.6vw, 44px);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--sl-card-shadow);
}
.sl-ribbon span {
  position: relative;
  color: var(--sl-ink);
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sl-ribbon span + span::before {
  content: "";
  position: absolute;
  left: clamp(-14px, -0.8vw, -8px);
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}
.sl-ribbon--inline { justify-content: flex-start; gap: clamp(12px, 1.5vw, 26px); margin-top: clamp(16px, 2.2vh, 26px); }
.sl-ribbon--dark { background: rgba(255, 255, 255, 0.06); box-shadow: none; }
.sl-ribbon--dark span { color: #fff; }

.sl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.9vw, 12px);
  margin: clamp(16px, 2.2vh, 26px) 0 0;
}
.sl-chips span {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   TRI RÝCHLE CESTY
   Celá karta je odkaz; kotva je natívna, žiadne korekčné scrollTo.
   ============================================================ */
.sl-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 26px);
  margin-top: clamp(18px, 2.6vh, 34px);
}

.sl-path {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 20px);
  padding: clamp(20px, 2.2vw, 34px);
  min-height: clamp(230px, 24vh, 290px);
  border-radius: var(--sl-radius);
  text-decoration: none;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.sl-path--light { background: #fff; color: var(--sl-ink); box-shadow: var(--sl-card-shadow); }
.sl-path--accent { background: var(--accent); color: #0b0d10; box-shadow: 0 18px 44px rgba(0, 255, 0, 0.24); }
.sl-path--dark { background: var(--sl-dark); color: #fff; box-shadow: 0 18px 46px rgba(11, 13, 16, 0.28); }

/* CA-044: hover len pre jemny ukazovatel; na dotyku iba kratky :active. */
@media (hover: hover) and (pointer: fine) {
  .sl-path:hover { transform: translateY(-3px); }
  .sl-path--light:hover { box-shadow: 0 4px 10px rgba(20, 22, 26, 0.07), 0 30px 66px rgba(20, 22, 26, 0.14); }
}
@media (hover: none) {
  .sl-path:active { transform: scale(0.99); }
}

.sl-path-head { display: block; }
.sl-path-title {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.55vw, 27px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.sl-path-sub {
  margin: 0;
  font-size: clamp(12px, 0.9vw, 15px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  opacity: 0.72;
}
.sl-path--accent .sl-path-sub { opacity: 0.86; }

.sl-path-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sl-path-chips span {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: clamp(9px, 0.66vw, 11px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sl-path--light .sl-path-chips span { background: rgba(20, 22, 26, 0.05); border: 1px solid rgba(20, 22, 26, 0.10); }
.sl-path--accent .sl-path-chips span { background: #fff; }
.sl-path--dark .sl-path-chips span { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.18); }

.sl-path-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
}
.sl-path-link {
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.sl-arrow-down { display: inline-block; margin-left: 6px; transition: transform 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
  .sl-path:hover .sl-arrow-down { transform: translateY(3px); }
}

.sl-path-icon {
  display: grid;
  place-items: center;
  width: clamp(42px, 3.6vw, 62px);
  height: clamp(42px, 3.6vw, 62px);
  border-radius: 50%;
  flex: none;
}
.sl-path-icon svg { width: 52%; height: 52%; }
.sl-path--light .sl-path-icon { background: var(--accent); color: #0b0d10; }
.sl-path--accent .sl-path-icon { background: #0b0d10; color: var(--accent); }
.sl-path--dark .sl-path-icon { background: var(--accent); color: #0b0d10; }

/* ============================================================
   HERO — CTA a cenový údaj
   ============================================================ */
.sl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  margin-top: clamp(20px, 2.8vh, 34px);
}
.sl-cta { text-decoration: none; }
.sl-cta svg { width: 17px; height: 17px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .sl-cta:hover { transform: translateY(-2px); }
}

.sl-price {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 16px);
  padding: clamp(12px, 1.3vw, 18px) clamp(16px, 1.8vw, 26px);
  border-radius: var(--sl-radius-sm);
  background: #fff;
  box-shadow: var(--sl-card-shadow);
}
.sl-price-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #0b0d10;
  flex: none;
}
.sl-price-icon svg { width: 20px; height: 20px; }
.sl-price-body { display: block; }
.sl-price-label {
  display: block;
  color: var(--sl-muted);
  font-size: clamp(9px, 0.66vw, 11px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sl-price-value {
  display: block;
  color: var(--sl-ink);
  font-size: clamp(22px, 1.8vw, 32px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.sl-price small {
  display: block;
  max-width: 24ch;
  margin-top: 2px;
  color: var(--sl-muted);
  font-size: clamp(10px, 0.72vw, 12px);
  line-height: 1.35;
}

/* CA-040: cena ako sekundárny kompaktný riadok pod CTA (karta `.sl-price`
   súperila s tlačidlom o pozornosť). */
.sl-price-line {
  margin: clamp(12px, 1.6vh, 18px) 0 0;
  max-width: 62ch;
  color: var(--sl-muted);
  font-size: clamp(12px, 0.88vw, 14px);
  line-height: 1.5;
}
.sl-price-line strong { color: var(--sl-ink); font-weight: 900; }

/* ============================================================
   02 — meta, dôkaz, akordeón
   ============================================================ */
.sl-show-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  margin-top: clamp(18px, 2.4vh, 28px);
}
.sl-badge-time {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: clamp(11px, 1.2vw, 15px) clamp(16px, 1.8vw, 24px);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--sl-card-shadow);
  color: var(--sl-ink);
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.sl-badge-time strong { color: var(--accent); }
.sl-badge-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--accent); color: var(--accent); }
.sl-badge-icon svg { width: 15px; height: 15px; }

.sl-proof {
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 24px);
  border-radius: var(--sl-radius-sm);
  background: #fff;
  box-shadow: var(--sl-card-shadow);
}
.sl-proof[hidden] { display: none; }
.sl-proof-notice {
  margin: 0 0 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(20, 22, 26, 0.25);
  background: rgba(20, 22, 26, 0.04);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sl-proof-row { display: flex; align-items: center; gap: 10px; }
.sl-stars { color: var(--accent); letter-spacing: 2px; }
.sl-proof-score { font-weight: 900; }
.sl-proof-quote { margin: 8px 0 4px; color: var(--sl-muted); font-size: 14px; line-height: 1.5; }
.sl-proof-name { color: var(--sl-ink); font-size: 12px; font-weight: 800; font-style: normal; }

.sl-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  margin-top: clamp(20px, 2.8vh, 32px);
}

.sl-accordion { flex: 1 1 240px; min-width: 0; }
.sl-accordion-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 340px;
  min-height: 48px;
  padding: clamp(12px, 1.3vw, 16px) clamp(18px, 2vw, 26px);
  border: 1px solid rgba(20, 22, 26, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--sl-ink);
  font-family: inherit;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sl-accordion-btn:hover { transform: translateY(-2px); box-shadow: var(--sl-card-shadow); }
}
.sl-accordion-sign { font-size: 18px; line-height: 1; transition: transform 0.28s ease; }
.sl-accordion-btn[aria-expanded="true"] .sl-accordion-sign { transform: rotate(45deg); }

.sl-accordion--dark .sl-accordion-btn {
  border-color: rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #fff;
}
/* CA-040: sekundárny textový odkaz „Ako to funguje →" namiesto druhého
   veľkého tlačidla (stále <button> s aria-expanded, ovláda ten istý panel). */
.sl-accordion-btn--link {
  width: auto;
  max-width: none;
  min-height: 44px;
  padding: 10px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-color: rgba(0, 255, 0, 0.55);
}
.sl-accordion-btn--link .sl-accordion-sign { font-size: 15px; transition: transform 0.28s ease; }
.sl-accordion-btn--link[aria-expanded="true"] .sl-accordion-sign { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .sl-accordion-btn--link:hover { transform: none; box-shadow: none; text-decoration-color: var(--accent); }
}

.sl-accordion-panel { overflow: hidden; }
.sl-accordion-panel[hidden] { display: none; }
.sl-accordion-panel > *:first-child { margin-top: clamp(14px, 1.8vh, 20px); }
.sl-accordion-panel ul { margin: 0; padding-left: 20px; }
.sl-accordion-panel li,
.sl-accordion-panel p {
  margin: 0 0 10px;
  max-width: 62ch;
  color: var(--sl-muted);
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.6;
}
.sl-accordion--dark .sl-accordion-panel p { color: rgba(255, 255, 255, 0.72); }
.sl-accordion-panel li strong { color: var(--sl-ink); }
.sl-accordion-note { font-weight: 700; }

/* ============================================================
   03 — pásy typov akcií
   ============================================================ */
.sl-tickers {
  position: relative;
  z-index: 3;
  margin-top: clamp(28px, 4vh, 56px);
  display: grid;
  gap: clamp(10px, 1.2vh, 16px);
}
.sl-ticker { overflow: hidden; padding-block: clamp(10px, 1.2vh, 16px); }
.sl-ticker--dark { background: var(--sl-dark); }
.sl-ticker-track { display: flex; width: max-content; will-change: transform; }
.sl-ticker-set { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 24px); padding-right: clamp(10px, 1.4vw, 24px); }
.sl-ticker-set > span {
  display: inline-flex;
  align-items: center;
  padding: clamp(10px, 1.1vw, 15px) clamp(16px, 1.9vw, 28px);
  border-radius: 999px;
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sl-ticker--light .sl-ticker-set > span { background: #fff; color: var(--sl-ink); box-shadow: var(--sl-card-shadow); }
.sl-ticker--dark .sl-ticker-set > span { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; }
/* Zelené bodky medzi štítkami, presne ako v pásoch na domovskej stránke. */
.sl-ticker-set > span + span { position: relative; }
.sl-ticker-set > span + span::before {
  content: "";
  position: absolute;
  left: clamp(-12px, -0.7vw, -5px);
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

/* Pohyb sa zapne až vtedy, keď JS doplní druhú, aria-hidden kópiu
   obsahu -- inak by pás skákal na konci prvej sady. */
@keyframes sl-ticker-run { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.sl-ticker.is-live .sl-ticker-track {
  animation: sl-ticker-run 42s linear infinite;
}
.sl-ticker.is-live[data-dir="-1"] .sl-ticker-track {
  animation-duration: 47s;
  animation-direction: reverse;
}
/* Pauza pri prejdení myšou aj pri fokuse z klávesnice. */
.sl-ticker.is-live:hover .sl-ticker-track,
.sl-ticker.is-live:focus-within .sl-ticker-track { animation-play-state: paused; }

/* ============================================================
   05 — kompetenčné karty
   ============================================================ */
.sl-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(24px, 3.2vw, 58px);
  margin-top: clamp(22px, 3vh, 40px);
}

.sl-skills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-skill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: clamp(18px, 2vw, 30px) clamp(14px, 1.6vw, 24px);
  border-radius: var(--sl-radius-sm);
  background: #fff;
  box-shadow: var(--sl-card-shadow);
  text-align: center;
}
.sl-skill-icon {
  display: grid;
  place-items: center;
  width: clamp(46px, 3.8vw, 64px);
  height: clamp(46px, 3.8vw, 64px);
  border-radius: 50%;
  background: var(--accent);
  color: #0b0d10;
  flex: none;
}
.sl-skill-icon svg { width: 52%; height: 52%; }
.sl-skill h3 {
  margin: 4px 0 0;
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.sl-skill p { margin: 0; color: var(--sl-muted); font-size: clamp(12px, 0.88vw, 15px); line-height: 1.45; }

/* ============================================================
   06 — výroky tímu
   ============================================================ */
.sl-statements { display: grid; gap: clamp(10px, 1.2vh, 16px); margin-top: clamp(18px, 2.4vh, 28px); }
.sl-statement {
  margin: 0;
  padding: clamp(16px, 1.9vw, 26px) clamp(20px, 2.2vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--sl-radius-sm);
  color: #fff;
  font-size: clamp(17px, 1.5vw, 27px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* ============================================================
   07 — objednávka
   ============================================================ */
.sl-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  align-items: start;
  gap: clamp(24px, 3.2vw, 58px);
}

.sl-service-picker { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.9vw, 12px); margin-top: clamp(18px, 2.4vh, 28px); }
.sl-service {
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid rgba(20, 22, 26, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--sl-ink);
  font-family: inherit;
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}
.sl-service[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sl-service:hover { transform: translateY(-2px); }
}
.sl-service.is-active { background: var(--accent); border-color: var(--accent); }

.sl-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  padding: clamp(13px, 1.4vw, 18px) clamp(16px, 1.8vw, 24px);
  border-radius: var(--sl-radius-sm);
  background: #fff;
  box-shadow: var(--sl-card-shadow);
  color: var(--sl-muted);
  font-size: clamp(12px, 0.88vw, 15px);
  line-height: 1.5;
}
.sl-hint-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #0b0d10; flex: none; }
.sl-hint-icon svg { width: 17px; height: 17px; }

.sl-form-card {
  padding: clamp(20px, 2.4vw, 40px);
  border-radius: var(--sl-radius);
  background: #fff;
  box-shadow: 0 3px 10px rgba(20, 22, 26, 0.05), 0 30px 70px rgba(20, 22, 26, 0.12);
}

/* Vizuálny ukazovateľ logických skupín. Nie je to viackrokový wizard --
   celý formulár je stále jeden prístupný dokument. */
.sl-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 46px);
  margin: 0 0 clamp(20px, 2.6vh, 32px);
  padding: 0;
  list-style: none;
}
.sl-step { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.sl-step + .sl-step::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(9px, 1.2vw, 23px));
  top: 17px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}
.sl-step-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(20, 22, 26, 0.16);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
  transition: background-color 0.24s ease, border-color 0.24s ease;
}
.sl-step.is-active .sl-step-num { background: var(--accent); border-color: var(--accent); }
.sl-step-label { font-size: clamp(9px, 0.68vw, 11px); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sl-muted); }
.sl-step.is-active .sl-step-label { color: var(--sl-ink); }

.sl-fieldset { margin: 0 0 clamp(14px, 1.8vh, 22px); padding: 0; border: 0; }
.sl-legend {
  padding: 0;
  margin-bottom: 10px;
  color: var(--sl-ink);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sl-field { margin-bottom: clamp(12px, 1.5vh, 18px); min-width: 0; }
.sl-field[hidden] { display: none; }
.sl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }

.sl-label {
  display: block;
  margin-bottom: 8px;
  color: var(--sl-ink);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sl-optional { color: var(--sl-muted); font-weight: 700; letter-spacing: 0.04em; text-transform: none; }

.sl-input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid rgba(20, 22, 26, 0.14);
  border-radius: 14px;
  background: #fff;
  color: var(--sl-ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sl-input::placeholder { color: rgba(98, 102, 109, 0.72); }
.sl-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.16); }
.sl-input[aria-invalid="true"] { border-color: #C6362F; }
select.sl-input { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111214' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; padding-right: 44px; }
.sl-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.sl-error { margin: 6px 0 0; color: #C6362F; font-size: 12px; font-weight: 700; min-height: 0; }
.sl-error:empty { display: none; }

.sl-consent { display: flex; align-items: flex-start; gap: 10px; color: var(--sl-muted); font-size: 13px; line-height: 1.5; cursor: pointer; }
.sl-consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--accent); flex: none; }

.sl-submit { width: 100%; justify-content: center; margin-top: clamp(6px, 1vh, 12px); }
.sl-submit svg { width: 17px; height: 17px; }
.sl-submit[disabled] { opacity: 0.6; cursor: progress; }

.sl-form-status { margin: 12px 0 0; font-size: 13px; font-weight: 700; line-height: 1.5; }
.sl-form-status:empty { display: none; }
.sl-form-status.is-error { color: #C6362F; }
.sl-form-status.is-ok { color: #1B7A2E; }

/* ============================================================
   08 — pomoc s výberom
   ============================================================ */
.sl-help-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.2vw, 58px);
  padding: clamp(26px, 3.4vw, 62px);
  border-radius: clamp(26px, 2.6vw, 42px);
  background: var(--sl-dark);
  color: #fff;
  overflow: hidden;
}
.sl-help-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: var(--grid-cell, 132px) var(--grid-cell, 132px);
}
.sl-help-panel > * { position: relative; z-index: 1; }

.sl-help-question {
  margin: 0 0 clamp(12px, 1.6vh, 20px);
  color: #fff;
  font-size: clamp(13px, 1vw, 17px);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sl-help-panel .sl-copy p { color: rgba(255, 255, 255, 0.72); }

.sl-reassure {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 52px);
  margin: clamp(16px, 2.4vh, 30px) 0 0;
  padding: clamp(16px, 2.2vh, 26px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}
.sl-reassure li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: clamp(11px, 0.85vw, 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sl-reassure-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); flex: none; }
.sl-reassure-icon svg { width: 18px; height: 18px; }

/* ============================================================
   PÄTKA
   ============================================================ */
.sl-footer { position: relative; z-index: 2; }
.sl-footer .footer-inner { max-width: 1640px; }
.sl-footer .footer-brand { display: block; line-height: 0; }
.sl-footer .footer-brand img { height: clamp(42px, 4vw, 64px); width: auto; }

.sluzby-page.sl-menu-open { overflow: hidden; }
.sl-nav-overlay { transition: opacity 0.25s ease, visibility 0.25s ease; }

/* Bez JS nesmie nič zostať na nulovej priehľadnosti. Skrývame len vtedy,
   keď skript naozaj beží, a poistka ho odblokuje aj pri jeho zlyhaní. */
.sl-js.sl-pending [data-reveal],
.sl-js.sl-pending [data-decor] { opacity: 0; }

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width: 1280px) {
  .sl-why-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-skills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-order-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-media--order { max-width: 620px; }
}

@media (max-width: 1024px) {
  .sluzby-page { --sl-nav-clearance: calc(var(--nav-top, 18px) + var(--nav-h, 58px) + 28px); }
  .sl-hero-grid,
  .sl-split,
  .sl-split--reverse { grid-template-columns: minmax(0, 1fr); }
  /* Poradie čítania, nie súradnice zo screenshotu: nadpis → text →
     fotografia → možnosti → CTA. */
  .sl-split--reverse .sl-media { order: 2; }
  .sl-split--reverse .sl-split-copy { order: 1; }
  .sl-paths { grid-template-columns: minmax(0, 1fr); }
  .sl-path { min-height: 0; }
  .sl-ribbon { justify-content: flex-start; gap: clamp(12px, 3vw, 24px); border-radius: var(--sl-radius-sm); }
  .sl-help-panel { grid-template-columns: minmax(0, 1fr); }
  .sl-media--hero { aspect-ratio: 16 / 11; }
  .sl-media--portrait,
  .sl-media--square { aspect-ratio: 4 / 3; }
  /* V jednom stĺpci platí plná šírka; výškový strop je desktopová vec. */
  .sl-media--portrait { width: 100%; justify-self: stretch; }
  .sl-skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-section--hero { min-height: 0; }
}

@media (max-width: 768px) {
  .sluzby-page { --sl-pad-x: clamp(16px, 5.2vw, 24px); }
  .sl-row { grid-template-columns: minmax(0, 1fr); }
  .sl-form-card { padding: clamp(18px, 5vw, 26px); }
  .sl-steps { gap: clamp(12px, 5vw, 26px); }
  .sl-hero-actions { align-items: stretch; }
  .sl-price { width: 100%; }
  .sl-accordion-btn { max-width: none; }
  .sl-cta { width: 100%; justify-content: center; }
  .sl-decor { display: none; }
}

@media (max-width: 560px) {
  .sl-skills { grid-template-columns: minmax(0, 1fr); }
  .sl-skill { flex-direction: row; align-items: center; text-align: left; gap: 14px; }
  .sl-skill h3 { margin: 0; }
  .sl-reassure { gap: 12px; }
  .sl-reassure li { width: 100%; }
  .sl-media--hero,
  .sl-media--portrait,
  .sl-media--square,
  .sl-media--team,
  .sl-media--why,
  .sl-media--order,
  .sl-media--help { aspect-ratio: 4 / 3; }
}

/* Telefón naležato: sekcie nesmú byť viazané na výšku okna. */
@media (orientation: landscape) and (max-height: 560px) {
  .sl-section--hero { min-height: 0; }
  .sl-media--hero { aspect-ratio: 16 / 9; }
}

/* ============================================================
   REDUKOVANÝ POHYB
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sl-path,
  .sl-cta,
  .sl-service,
  .sl-accordion-btn,
  .sl-arrow-down,
  .sl-accordion-sign { transition-duration: 0.14s; }
  .sl-path:hover,
  .sl-cta:hover,
  .sl-service:hover,
  .sl-accordion-btn:hover { transform: none; }
  .sl-ticker.is-live .sl-ticker-track,
  .sl-ticker.is-live[data-dir="-1"] .sl-ticker-track { animation: none !important; transform: none !important; }
  /* Bez pohybu sa pásy zalomia do statických štítkov. */
  .sl-ticker { overflow: visible; }
  .sl-ticker-track { width: auto; }
  .sl-ticker-set { flex-wrap: wrap; }
}

/* ============================================================
   CONTAINED STAGE — prechody svetlo <-> tma

   Predchádzajúci pokus riešil hranice širokým rozostreným pásom. Bola to
   zlá technika v princípe: pás vyzeral ako omylom nechaný tieň, mriežku
   v ňom prekrýval gradient a ústup spodnej hrany zosvetľoval spodok
   tmavej sekcie, čím medzi sekciami vznikal prázdny pruh.

   Náhrada vychádza zo schváleného panelu „Pomoc s výberom": prichádzajúca
   sekcia začína ako OHRANIČENÁ ZAOBLENÁ PLOCHA a počas prirodzeného
   scrollu sa roztiahne na celé svoje pozadie. Hrana je `clip-path`, teda
   ostrá a antialiasovaná -- žiadne rozostrenie, žiadny gradient, žiadny
   tieň ako prechod.

   Základ sekcie nesie STARÚ tému, plocha prináša NOVÚ. Preto je pohyb
   čitateľný: vidno jeden objekt, ktorý patrí prichádzajúcej scéne.

   Poradie vrstiev:
     0  základ sekcie (stará téma + jej mriežka)
     0  .sl-stage        (nová téma + jej mriežka, clip-path)
     1  dekoratívne objekty
     3  .sl-inner        -- fotografie, karty, text, CTA (NIKDY sa neoreže)
   Hlavička a sociálne ikony sú fixné nad všetkým.

   Východiskové hodnoty premenných sú ZÁMERNE koncový stav: bez JS aj pri
   redukovanom pohybe je plocha roztiahnutá a stránka kompletná.
   ============================================================ */
.sl-theme {
  --sl-p: 1;                    /* progres plochy 0..1 */
  --sl-x0: 0%;                  /* počiatočný orez: hore/vpravo/dole/vľavo */
  --sl-y0: 0%;
  --sl-x1: 0%;
  --sl-y1: 0%;
  --sl-rad0: clamp(26px, 2.6vw, 42px);
  position: relative;
}

/* Základ nesie tému, z ktorej sa prichádza. */
.sl-theme[data-stage-from="dark"] {
  --sl-grid-ink: rgba(255, 255, 255, 0.075);
  background-color: var(--sl-dark);
}

.sl-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--sl-stage-bg, var(--sl-dark));
  /* Jediná animovaná vlastnosť plochy. Ostrá hrana, žiadny filter. */
  clip-path: inset(
    calc(var(--sl-y0) * (1 - var(--sl-p)))
    calc(var(--sl-x1) * (1 - var(--sl-p)))
    calc(var(--sl-y1) * (1 - var(--sl-p)))
    calc(var(--sl-x0) * (1 - var(--sl-p)))
    round calc(var(--sl-rad0) * (1 - var(--sl-p))));
}

.sl-theme[data-stage-to="light"] .sl-stage { --sl-stage-bg: var(--sl-paper); }

/* Mriežka plochy má rovnakú bunku aj rovnaký pôvod ako mriežka pod ňou --
   `--grid-y` dopĺňa alignGrids() z pozície vrstvy v dokumente. Čiary sa
   tak prekrývajú čiarami a hrana plochy ich nikdy nemôže posunúť. */
.sl-stage-grid {
  position: absolute;
  inset: 0;
  display: block;
  background-size: var(--grid-cell, 132px) var(--grid-cell, 132px);
  background-position: 0 var(--grid-y, 0px);
  background-repeat: repeat;
  background-image:
    linear-gradient(var(--sl-stage-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--sl-stage-ink) 1px, transparent 1px);
}
.sl-theme[data-stage-to="dark"] .sl-stage-grid { --sl-stage-ink: rgba(255, 255, 255, 0.075); }
.sl-theme[data-stage-to="light"] .sl-stage-grid { --sl-stage-ink: rgba(127, 131, 134, 0.13); }

/* ---------- východiskové tvary jednotlivých plôch ---------- */

/* 1 — Exclusive: tmavá plocha vzniká pri fotografii vpravo a roztiahne
   sa doľava. Fotografia je od začiatku na tmavom podklade. */
[data-stage="exclusive"] { --sl-y0: 13%; --sl-x1: 4%; --sl-y1: 20%; --sl-x0: 49%; }

/* 2 — Prečo Christian: svetlý list stúpa zdola s ťažiskom vľavo. */
[data-stage="light-left"] { --sl-y0: 58%; --sl-x1: 20%; --sl-y1: 0%; --sl-x0: 5%; }

/* 3 — Majstri: čierne pódium stúpa zdola cez celú šírku rytmu stránky. */
[data-stage="stage-up"] { --sl-y0: 66%; --sl-x1: 6%; --sl-y1: 0%; --sl-x0: 6%; }

/* 4 — Objednávka: svetlý list stúpa zdola, pokojne a symetricky. */
[data-stage="sheet-up"] { --sl-y0: 62%; --sl-x1: 5%; --sl-y1: 0%; --sl-x0: 5%; }

/* ---------- E — panel Pomoc s výberom (SCHVÁLENÝ, nemenený) ---------- */

/* Kontajnerový panel, nie ďalšia zmena témy celej stránky. Otvára sa
   vodorovnou maskou z osi; `round` drží schválený rádius po celý čas
   a panel sa nikdy neškáluje. */
.sl-help-panel {
  --sl-pp: 1;
  clip-path: inset(0 calc((1 - var(--sl-pp)) * 50%) 0 calc((1 - var(--sl-pp)) * 50%)
             round clamp(26px, 2.6vw, 42px));
}

.sl-help-panel::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(0, 255, 0, 0.5), 0 0 46px rgba(0, 255, 0, 0.16);
  opacity: var(--sl-panel-glow, 0);
}

/* ============================================================
   CONTAINED STAGE — responzivita a redukovaný pohyb
   ============================================================ */

/* Tablet: menšia vodorovná dráha, plocha zostáva ohraničená a zaoblená. */
@media (max-width: 1024px) {
  /* Na tablete je fotografia bližšie k hrane plochy; väčšia rezerva, aby
     ani v mŕtvom pásme hysterézie nevytŕčala ani o pixel. */
  [data-stage="exclusive"] { --sl-y0: 24%; --sl-x1: 5%; --sl-y1: 18%; --sl-x0: 5%; }
  [data-stage="light-left"] { --sl-y0: 55%; --sl-x1: 8%; --sl-y1: 0%; --sl-x0: 6%; }
  [data-stage="stage-up"] { --sl-y0: 62%; --sl-x1: 6%; --sl-y1: 0%; --sl-x0: 6%; }
  [data-stage="sheet-up"] { --sl-y0: 58%; --sl-x1: 6%; --sl-y1: 0%; --sl-x0: 6%; }
}

/* Mobil: obsah je jednostĺpcový, fotografia nie je vpravo -- pravostranná
   maska by tu nedávala zmysel. Plocha preto stúpa zvislo v bežných
   mobilných okrajoch stránky. */
@media (max-width: 768px) {
  [data-stage] {
    --sl-y0: 54%;
    --sl-x1: 4.5%;
    --sl-y1: 0%;
    --sl-x0: 4.5%;
    --sl-rad0: clamp(18px, 5vw, 28px);
  }
}

/* Nízky výrez: kratšie okno aj menšia dráha, obsah má prednosť pred
   choreografiou a nikdy nečaká na dokončenie prechodu. */
@media (max-height: 620px) {
  [data-stage] { --sl-y0: 46%; --sl-y1: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sekcia sa zobrazí rovno v koncovej téme, plocha je roztiahnutá,
     mriežka sa nehýbe, panel je otvorený. */
  .sl-theme { --sl-p: 1 !important; }
  .sl-help-panel {
    --sl-pp: 1 !important;
    --sl-panel-glow: 0 !important;
  }
}

/* ============================================================
   07 / SOCIÁLNE SIETE — social-only záver

   Preberá presne kompozíciu pôvodného panelu „Pomoc s výberom": rovnaký
   tmavý zaoblený panel, rovnaká mriežka vnútri, rovnaký `data-panel`
   contained-stage prílet (`--sl-pp` a `--sl-panel-glow` píše ten istý
   controller). Zmenil sa iba obsah, nie mechanika prechodu.
   ============================================================ */
.sl-social-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 3.2vw, 58px);
  padding: clamp(26px, 3.4vw, 62px);
  border-radius: clamp(26px, 2.6vw, 42px);
  background: var(--sl-dark);
  color: #fff;
  overflow: hidden;
  --sl-pp: 1;
  clip-path: inset(0 calc((1 - var(--sl-pp)) * 50%) 0 calc((1 - var(--sl-pp)) * 50%)
             round clamp(26px, 2.6vw, 42px));
}
.sl-social-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: var(--grid-cell, 132px) var(--grid-cell, 132px);
}
.sl-social-panel::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(0, 255, 0, 0.5), 0 0 46px rgba(0, 255, 0, 0.16);
  opacity: var(--sl-panel-glow, 0);
}
.sl-social-panel > * { position: relative; z-index: 1; }
.sl-social-panel .sl-kicker { color: #fff; }
.sl-social-panel .sl-copy p { color: rgba(255, 255, 255, 0.72); }

/* Nie je to tlačidlo -- CTA sú samotné karty. */
.sl-social-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: clamp(18px, 2.4vh, 30px) 0 0;
  color: var(--accent);
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sl-social-hint svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 1024px) {
  .sl-social-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   PÁS TYPOV AKCIÍ CEZ CELÝ VIEWPORT

   `.sl-tickers` už je mimo `.sl-inner` (mimo `max-width` wrappera), ale
   sekcia mu dávala bočný `padding: ... var(--sl-pad-x)`. Ten sa tu ruší
   záporným okrajom, takže pás siaha presne po hranice sekcie -- a tie sú
   na celú šírku viewportu.

   `100vw` sa zámerne nepoužíva: pri viditeľnom scrollbare je `100vw`
   širšie než plocha dokumentu a vznikol by vodorovný scrollbar.
   `.sl-section { overflow: clip }` navyše presah aj tak oreže.
   ============================================================ */
.sl-tickers {
  margin-inline: calc(var(--sl-pad-x) * -1);
}

/* ============================================================
   KROKOVÝ WIZARD OBJEDNÁVKY

   Cieľ: celý aktívny panel — označenie, progres, otázka, voľby aj spodné
   ovládanie — sa musí zmestiť do jedného bežného desktopového výrezu,
   vrátane výšky 768 px. Typografia aj rozostupy sú preto viazané na `vh`
   cez `clamp()`, nie na pevné pixely.

   Panel NEMÁ vlastný vnútorný scroll: pri nízkom výreze prechádza sekcia do
   normálneho toku a scrolluje stránka.
   ============================================================ */
.sl-section--booking {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(18px, 3.4vh, 56px);
}

.bw-inner {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 26px);
}

.bw-head { display: grid; gap: clamp(4px, 0.8vh, 10px); }

.bw {
  display: grid;
  grid-template-columns: minmax(0, 31fr) minmax(0, 69fr);
  border-radius: clamp(24px, 2.4vw, 34px);
  overflow: hidden;
  background: var(--sl-paper);
  border: 1px solid rgba(8, 11, 13, 0.08);
  box-shadow: 0 30px 80px rgba(8, 11, 13, 0.16), 0 2px 10px rgba(8, 11, 13, 0.06);
}

/* ── Ľavý tmavý rail ─────────────────────────────────────── */
.bw-rail {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 18px);
  padding: clamp(18px, 2.4vh, 38px) clamp(18px, 1.8vw, 34px);
  background: var(--sl-dark);
  color: #fff;
}

.bw-rail-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.bw-num {
  margin: 0;
  color: var(--accent);
  font-size: clamp(44px, 6.4vh, 92px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.bw-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(11px, 0.9vw, 15px);
  line-height: 1.45;
}

.bw-picker { margin-top: auto; }
.bw-picker .sl-service {
  font-size: clamp(9px, 0.72vw, 12px);
  padding: 7px 12px;
}

.bw-summary {
  margin: 0;
  display: grid;
  gap: clamp(3px, 0.5vh, 7px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: clamp(8px, 1.2vh, 16px);
}
.bw-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: clamp(10px, 0.78vw, 13px);
  line-height: 1.35;
}
.bw-sum-row dt { color: rgba(255, 255, 255, 0.5); flex: none; }
.bw-sum-row dd {
  margin: 0;
  color: #fff;
  font-weight: 700;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Pravá pracovná plocha ───────────────────────────────── */
.bw-main {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 22px);
  padding: clamp(18px, 2.6vh, 40px) clamp(18px, 2.2vw, 46px);
  min-width: 0;
}

.bw-progress { display: grid; gap: clamp(5px, 0.8vh, 10px); }
.bw-progress-label {
  margin: 0;
  color: rgba(8, 11, 13, 0.55);
  font-size: clamp(9px, 0.72vw, 12px);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Segmenty majú pevnú výšku aj počet stĺpcov, takže zmena textu nad nimi
   nepohne rozložením. */
.bw-bar { display: grid; grid-auto-flow: column; gap: 6px; height: 4px; }
.bw-seg {
  display: block;
  border-radius: 999px;
  background: rgba(8, 11, 13, 0.12);
  transition: background 220ms ease;
}
.bw-seg.is-done { background: #08090C; }
.bw-seg.is-current { background: var(--accent); }

.bw-form { display: flex; flex-direction: column; gap: clamp(10px, 1.6vh, 22px); min-width: 0; }
.bw-steps { min-width: 0; }

.bw-step {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: clamp(8px, 1.2vh, 16px);
}
.bw-step[hidden] { display: none; }

.bw-q {
  padding: 0;
  margin: 0;
  color: #08090C;
  font-size: clamp(19px, 2.6vh, 34px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.bw-q:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.bw-q-sub {
  margin: 0;
  color: rgba(8, 11, 13, 0.58);
  font-size: clamp(11px, 0.92vw, 15px);
  line-height: 1.45;
}

/* ── Veľké klikateľné voľby ──────────────────────────────── */
.bw-cards { display: grid; gap: clamp(6px, 0.9vh, 12px); }
.bw-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bw-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bw-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(5px, 0.8vh, 10px);
  min-height: clamp(58px, 9vh, 104px);
  padding: clamp(9px, 1.2vh, 16px);
  border-radius: clamp(12px, 1.2vw, 18px);
  border: 1px solid rgba(8, 11, 13, 0.1);
  background: #fff;
  color: #08090C;
  font-family: inherit;
  font-size: clamp(10px, 0.82vw, 14px);
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.bw-card--big {
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(13px, 1.25vw, 21px);
  font-weight: 900;
}
.bw-card-ico { display: block; color: var(--accent); }
.bw-card-ico svg { width: clamp(18px, 1.7vw, 26px); height: auto; display: block; }
@media (hover: hover) and (pointer: fine) {
  .bw-card:hover { border-color: rgba(8, 11, 13, 0.24); transform: translateY(-2px); }
}
.bw-card:active { transform: scale(0.98); }
.bw-card.is-picked {
  background: var(--accent);
  border-color: var(--accent);
  color: #08090C;
}
.bw-card.is-picked .bw-card-ico { color: #08090C; }
/* Jemné potvrdenie výberu -- nie iba farba, aby stav nezávisel od nej. */
.bw-card.is-picked::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 13px;
  font-weight: 900;
}
.bw-card { position: relative; }
.bw-card:focus-visible { outline: 3px solid #08090C; outline-offset: 3px; }

/* ── Menšie sekundárne voľby ─────────────────────────────── */
.bw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(8, 11, 13, 0.14);
  background: #fff;
  color: rgba(8, 11, 13, 0.72);
  font-family: inherit;
  font-size: clamp(9px, 0.74vw, 12px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .bw-chip:hover { border-color: rgba(8, 11, 13, 0.34); }
}
.bw-chip.is-picked { background: var(--accent); border-color: var(--accent); color: #08090C; }
.bw-chip:focus-visible { outline: 3px solid #08090C; outline-offset: 3px; }

.bw-sublabel {
  margin: 0;
  color: rgba(8, 11, 13, 0.55);
  font-size: clamp(9px, 0.74vw, 12px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.bw-textarea { resize: none; max-height: clamp(90px, 16vh, 170px); }
.bw-counter {
  margin: 4px 0 0;
  text-align: right;
  color: rgba(8, 11, 13, 0.45);
  font-size: 11px;
  font-weight: 700;
}

/* ── Prepínač kontaktu ───────────────────────────────────── */
.bw-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border-radius: 999px;
  background: rgba(8, 11, 13, 0.06);
  align-self: start;
}
.bw-toggle-btn {
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(8, 11, 13, 0.6);
  font-family: inherit;
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.bw-toggle-btn.is-active { background: #08090C; color: #fff; }
.bw-toggle-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ── Spodné ovládanie ────────────────────────────────────── */
.bw-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: clamp(6px, 1vh, 14px);
}
.bw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 clamp(16px, 1.6vw, 28px);
  border-radius: 999px;
  font-family: inherit;
  font-size: clamp(11px, 0.86vw, 14px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
}
.bw-btn svg { width: 16px; height: 16px; flex: none; }
.bw-btn--ghost {
  background: transparent;
  border: 1px solid rgba(8, 11, 13, 0.16);
  color: #08090C;
}
.bw-btn--ghost:disabled { opacity: 0.35; cursor: default; }
.bw-btn--skip {
  background: transparent;
  color: rgba(8, 11, 13, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bw-btn--next, .bw-btn--send { margin-left: auto; }
.bw-btn:focus-visible { outline: 3px solid #08090C; outline-offset: 3px; }

/* Priamy kontakt pod wizardom: namiesto nenápadného textového odkazu ide o
   samostatné, dobre trafiteľné akcie. Telefón zostáva v HTML pripravený, ale
   je skrytý, kým klient nepotvrdí reálne číslo. */
.bw-direct {
  width: min(100%, 980px);
  margin: clamp(18px, 3vh, 30px) auto 0;
  display: grid;
  gap: 10px;
}
.bw-direct-label {
  margin: 0;
  color: rgba(8, 11, 13, 0.58);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bw-direct-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 10px;
}
.bw-direct-btn {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(8, 11, 13, 0.1);
  border-radius: 18px;
  background: #08090C;
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(8, 11, 13, 0.12);
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), box-shadow 260ms ease;
}
.bw-direct-btn--mail {
  background: var(--accent);
  color: #08090C;
  box-shadow: 0 12px 30px rgba(0, 255, 0, 0.2);
}
.bw-direct-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.1);
}
.bw-direct-btn--mail .bw-direct-icon { background: rgba(8, 11, 13, 0.1); }
.bw-direct-icon svg { width: 20px; height: 20px; }
.bw-direct-copy { min-width: 0; display: grid; gap: 2px; }

/* Decorative background grids are intentionally disabled site-wide. */
.sl-light,
.sl-dark {
  background-image: none !important;
}

.sl-stage-grid,
.sl-help-panel::before,
.sl-social-panel::before {
  display: none !important;
  background-image: none !important;
}
.bw-direct-copy small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.62;
}
.bw-direct-copy strong { font-size: 13px; line-height: 1.2; }
.bw-direct-arrow { margin-left: auto; font-size: 20px; line-height: 1; }
.bw-direct-btn:focus-visible { outline: 3px solid #08090C; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .bw-direct-btn:hover { transform: translateY(-3px); box-shadow: 0 17px 38px rgba(8, 11, 13, 0.18); }
  .bw-direct-btn--mail:hover { box-shadow: 0 17px 38px rgba(0, 255, 0, 0.3); }
}
.bw-direct-btn:active { transform: scale(0.985); }
.bw-direct-btn[aria-disabled="true"] { opacity: 0.48; pointer-events: none; }

@media (max-width: 560px) {
  .bw-direct-actions { grid-template-columns: 1fr; }
  .bw-direct-btn { min-height: 62px; border-radius: 16px; }
}

/* ── Tablet a mobil ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .bw { grid-template-columns: minmax(0, 1fr); }
  /* Rail sa mení na kompaktnú hlavičku -- nesmie zabrať pol obrazovky. */
  .bw-rail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 14px;
    padding: 16px 20px;
  }
  .bw-rail-label { grid-column: 2; }
  .bw-num { grid-row: 1 / span 2; font-size: 44px; }
  .bw-hint { grid-column: 2; }
  .bw-picker, .bw-summary { grid-column: 1 / -1; }
  .bw-summary { border-top-color: rgba(255, 255, 255, 0.1); padding-top: 10px; }
}

@media (max-width: 767px) {
  .bw-cards--3, .bw-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bw-row { grid-template-columns: minmax(0, 1fr); }
  .bw-nav { flex-wrap: wrap; }
  .bw-btn--next, .bw-btn--send { margin-left: auto; }
  .sl-section--booking { min-height: 100svh; }
}

/* Kompaktný režim wizardu pre nízke výrezy (≤ 720 px výšky na mobile a
   tablete): menší nadpis, tesnejšie medzery, skrytý nepodstatný hint a
   nižšia textarea. Dotykové ciele (karty 52 px, tlačidlá 44 px) sa
   nezmenšujú; ak sa krok ani tak nezmestí (320×568), stránka scrolluje. */
@media (max-height: 820px) and (max-width: 1024px) {
  .sl-section--booking { padding-block: 10px; }
  .bw-inner { gap: 8px; }
  .bw-head { gap: 2px; }
  .bw-head .sl-kicker { margin-bottom: 2px; }
  .bw-hint { display: none; }
  .bw-rail { padding: 10px 14px; gap: 2px 10px; }
  .bw-num { font-size: 30px; }
  .bw-summary { padding-top: 6px; gap: 2px; }
  .bw-main { padding: 12px 14px 14px; gap: 8px; }
  .bw-step { gap: 8px; }
  .bw-cards { gap: 6px; }
  .bw-textarea { max-height: 72px; }
  .bw-nav { padding-top: 4px; }
}
/* Pod 720 px sa zmensi aj nadpis (dva riadky by zabrali stvrtinu vyrezu). */
@media (max-height: 720px) and (max-width: 1024px) {
  .sl-section--booking .sl-display { font-size: clamp(24px, 6.4vw, 32px); }
}

/* Veľmi nízky výrez (napr. telefón naležato): žiadne násilné orezanie --
   sekcia prejde do normálneho toku a scrolluje stránka, nie panel. */
@media (max-height: 560px) {
  .sl-section--booking { min-height: 0; }
  .bw-num { font-size: 34px; }
  .bw-picker { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-card, .bw-chip, .bw-seg { transition: none; }
}

/* `[hidden]` má nízku špecificitu a `display: inline-flex`/`flex` na týchto
   prvkoch ho prebíja -- tlačidlá aj prázdne riadky prehľadu by zostali
   viditeľné, hoci ich JS označil za skryté. */
.bw-btn[hidden],
.bw-sum-row[hidden],
.sl-service[hidden] { display: none; }

/* Na telefóne musí jeden krok vyjsť do jedného výrezu. Rail sa preto zúži
   na číslo + progres a odľahčia sa vnútorné rozostupy; prehľad odpovedí
   zostáva, ale ako jeden kompaktný riadok pod sebou. */
@media (max-width: 767px) {
  .bw-rail { padding: 12px 16px; gap: 2px 12px; }
  .bw-num { font-size: 36px; }
  .bw-hint { font-size: 11px; line-height: 1.35; }
  .bw-main { padding: 14px 16px 16px; gap: 10px; }
  .bw-q { font-size: clamp(18px, 5.4vw, 24px); }
  .bw-card { min-height: 52px; }
  .bw-btn { min-height: 44px; padding: 0 16px; }
  .sl-section--booking { padding-block: 12px; }
}

/* ============================================================
   DESKTOP VIEWPORT SYSTEM

   Desktop sections are composed as viewport stages, but never receive a
   fixed height: browser zoom and unusually short windows may still grow the
   document instead of clipping content.  The height-aware branch below
   reduces media and spacing before that fallback becomes necessary.
   Mobile/tablet rules above remain unchanged.
   ============================================================ */
@media (min-width: 1025px) {
  /* A full-height stage must align with the viewport edge.  The fixed
     header overlays that stage, while each composition keeps its readable
     content in the safe centre/top clearance. */
  html { scroll-padding-top: 0; }

  .sl-section:not(.sl-section--booking) {
    height: var(--viewport-h, 100dvh);
    min-height: 0;
    display: grid;
    align-content: center;
    overflow-x: clip;
    overflow-y: visible;
  }

  .sl-section--booking {
    height: var(--viewport-h, 100dvh);
    min-height: 0;
  }

  .sl-section { scroll-margin-top: 0; }

  /* The former 1280px collapse produced a 736px-wide image and doubled the
     height of section 05 exactly on common 1280x720 laptops. */
  .sl-why-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  }

  /* Square service media must follow available block space as well as
     column width.  60svh keeps the split + ticker inside the same stage. */
  .sl-media--square {
    width: min(100%, 60svh);
    max-width: 100%;
    justify-self: center;
  }

  /* This image used to grow only from column width. On a 21:9 monitor with
     a short window it could add 140+ px beyond the viewport. */
  .sl-media--why {
    width: min(100%, calc(52vh * 1.6));
    width: min(100%, calc(var(--viewport-h, 100dvh) * 0.52 * 1.6));
    justify-self: start;
  }
}

/* At 900px tall the original 230px minimum cards overrun the hero by only
   a few pixels.  This narrow band removes that last hard minimum without
   applying the more aggressive laptop compaction used below. */
@media (min-width: 1025px) and (min-height: 821px) and (max-height: 920px) {
  .sl-section--hero {
    padding-top: calc(var(--nav-top, 18px) + var(--nav-h, 58px) + 14px);
    padding-bottom: clamp(26px, 3.5vh, 34px);
  }
  .sl-section--hero .sl-hero-grid { gap: clamp(24px, 3vw, 46px); }
  .sl-section--hero .sl-media--hero {
    width: min(100%, calc(43vh * 1.6));
    max-height: 43vh;
    justify-self: end;
  }
  .sl-section--hero .sl-path {
    min-height: 184px;
    gap: 8px;
    padding: 18px;
  }
  .sl-section--hero .sl-paths { margin-top: clamp(10px, 1.5vh, 16px); }
  .sl-section--hero .sl-path-icon { width: 44px; height: 44px; }
  .sl-section--hero .sl-path-title { font-size: clamp(18px, 1.45vw, 23px); }
  .sl-section--hero .sl-path-sub { font-size: clamp(11px, 0.84vw, 13px); }
  .sl-section--hero .sl-path-chips { gap: 5px; }
  .sl-section--hero .sl-path-chips span { padding: 5px 10px; }
}

/* Common laptop and split-window heights.  Width-only breakpoints cannot
   handle 1280x720 / 1366x768, so typography, gaps and media also key off vh. */
@media (min-width: 1025px) and (max-height: 820px) {
  .sluzby-page {
    --sl-nav-clearance: calc(var(--nav-top, 18px) + var(--nav-h, 58px) + 12px);
  }

  .sl-section:not(.sl-section--booking) {
    padding-top: clamp(28px, 4vh, 38px);
    padding-bottom: clamp(28px, 4vh, 38px);
  }

  .sl-section--hero {
    padding-top: var(--sl-nav-clearance);
    padding-bottom: clamp(24px, 4vh, 34px);
  }

  .sl-display,
  .sl-display--md,
  .sl-display--wide {
    font-size: clamp(36px, min(4.7vw, 8vh), 64px);
  }

  .sl-copy { margin-top: clamp(10px, 1.6vh, 16px); }
  .sl-copy p { font-size: clamp(14px, min(1.05vw, 2.2vh), 18px); }
  .sl-hero-grid,
  .sl-split,
  .sl-split--reverse { gap: clamp(20px, 2.6vw, 38px); }

  .sl-media--hero {
    width: min(100%, calc(44svh * 1.6));
    max-height: 44svh;
    justify-self: end;
  }

  .sl-media--portrait {
    width: min(100%, calc(68svh * 0.8));
  }

  .sl-media--square { width: min(100%, 56svh); }
  .sl-media--why { margin-top: clamp(10px, 1.6vh, 16px); }

  .sl-hero-actions,
  .sl-actions { margin-top: clamp(12px, 2vh, 18px); }
  .sl-price-line { margin-top: 8px; }

  .sl-paths {
    gap: clamp(12px, 1.2vw, 18px);
    margin-top: clamp(10px, 1.8vh, 16px);
  }
  .sl-path {
    min-height: 190px;
    gap: clamp(7px, 1.1vh, 10px);
    padding: clamp(15px, 1.5vw, 20px);
  }
  .sl-path-title { font-size: clamp(17px, 1.4vw, 22px); }
  .sl-path-sub { font-size: clamp(11px, 0.82vw, 13px); }
  .sl-path-chips { gap: 5px; }
  .sl-path-chips span { padding: 4px 9px; }
  .sl-path-icon { width: 42px; height: 42px; }

  .sl-ribbon,
  .sl-show-meta,
  .sl-why-grid,
  .sl-skills { margin-top: clamp(12px, 2vh, 18px); }

  .sl-tickers {
    margin-top: clamp(12px, 2vh, 18px);
    gap: 7px;
  }
  .sl-ticker { padding-block: 7px; }
  .sl-ticker-set > span { padding-block: 8px; }

  .sl-skill {
    gap: 7px;
    padding: clamp(13px, 1.5vw, 20px) clamp(12px, 1.3vw, 18px);
  }
  .sl-skill-icon { width: 44px; height: 44px; }

  /* The final booking step is taller than the first five.  Reserve the
     fixed header first, then compact the panel rather than letting its title
     slide under the navigation. */
  .sl-section--booking {
    align-content: start;
    padding-top: var(--sl-nav-clearance);
    padding-bottom: 10px;
  }
  .sl-section--booking .sl-display {
    font-size: clamp(38px, min(4.6vw, 7vh), 56px);
  }
  .bw-inner { gap: 6px; }
  .bw-head { gap: 2px; }
  .bw-head .sl-kicker { margin-bottom: 0; }
  .bw { border-radius: 22px; }
  .bw-rail {
    gap: 6px;
    padding: 14px 18px;
  }
  .bw-num { font-size: clamp(44px, 7vh, 58px); }
  .bw-hint { font-size: 11px; line-height: 1.3; }
  .bw-summary { gap: 2px; padding-top: 6px; }
  .bw-main {
    gap: 6px;
    padding: 12px 18px;
  }
  .bw-form,
  .bw-step { gap: 6px; }
  .bw-q { font-size: clamp(20px, 3.2vh, 25px); }
  .bw-q-sub { font-size: 11px; line-height: 1.3; }
  .bw-card {
    min-height: 58px;
    padding: 8px 10px;
  }
  .bw-card-ico svg { width: 20px; }
  .bw-chip { padding: 5px 10px; }
  .bw-row { gap: 10px; }
  .sl-section--booking .sl-field { margin-bottom: 6px; }
  .sl-section--booking .sl-input { min-height: 46px; padding-block: 10px; }
  .sl-section--booking .bw-textarea {
    min-height: 68px;
    height: 68px;
    max-height: 68px;
  }
  .bw-toggle-btn { padding: 5px 14px; }
  .bw-nav { padding-top: 2px; }
  .bw-btn { min-height: 42px; }
  .bw-direct {
    gap: 5px;
    margin-top: 8px;
  }
  .bw-direct-label { font-size: 10px; }
  .bw-direct-btn {
    min-height: 52px;
    padding-block: 6px;
  }
  .bw-direct-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .bw-direct-icon svg { width: 17px; height: 17px; }
}

/* Very short desktop windows still keep the full composition. Nothing is
   hidden: the same information is reflowed with smaller media and rhythm. */
@media (min-width: 1025px) and (max-height: 640px) {
  .sluzby-page {
    --sl-nav-clearance: calc(var(--nav-top, 14px) + var(--nav-h, 54px) + 4px);
  }

  .sl-section:not(.sl-section--booking) {
    padding-top: clamp(16px, 3vh, 24px);
    padding-bottom: clamp(16px, 3vh, 24px);
  }
  .sl-section--hero {
    padding-top: var(--sl-nav-clearance);
    padding-bottom: 12px;
  }
  .sl-display,
  .sl-display--md,
  .sl-display--wide {
    font-size: clamp(30px, min(4vw, 7vh), 46px);
    line-height: 0.92;
  }
  .sl-kicker { margin-bottom: 5px; }
  .sl-copy { margin-top: 6px; }
  .sl-copy p { font-size: clamp(12px, min(0.95vw, 2.3vh), 15px); line-height: 1.42; }
  .sl-hero-actions,
  .sl-actions { margin-top: 8px; }
  .sl-cta { min-height: 40px; padding: 9px 16px; font-size: 11px; }

  .sl-media--hero {
    width: min(100%, calc(34vh * 1.6));
    max-height: 34vh;
  }
  .sl-media--portrait { width: min(100%, calc(58vh * 0.8)); }
  .sl-media--square { width: min(100%, 48vh); }
  .sl-media--why {
    width: min(100%, calc(40vh * 1.6));
    margin-top: 7px;
  }

  .sl-paths { margin-top: 7px; gap: 8px; }
  .sl-path {
    min-height: 142px;
    gap: 4px;
    padding: 10px 12px;
  }
  .sl-path-icon { width: 32px; height: 32px; }
  .sl-path-title { font-size: clamp(14px, 1.25vw, 18px); }
  .sl-path-sub { font-size: 10px; line-height: 1.28; }
  .sl-path-chips { gap: 3px; }
  .sl-path-chips span { padding: 3px 7px; font-size: 8px; }

  .sl-ribbon,
  .sl-show-meta,
  .sl-why-grid,
  .sl-skills { margin-top: 7px; }
  .sl-why-grid { gap: 16px; }
  .sl-skills { gap: 7px; }
  .sl-skill { gap: 4px; padding: 8px; }
  .sl-skill-icon { width: 32px; height: 32px; }
  .sl-skill h3 { font-size: 11px; }
  .sl-skill p { font-size: 10px; line-height: 1.25; }

  .sl-tickers { margin-top: 7px; gap: 4px; }
  .sl-ticker { padding-block: 4px; }
  .sl-ticker-set > span { padding-block: 5px; font-size: 9px; }

  .sl-section--booking {
    padding-top: var(--sl-nav-clearance);
    padding-bottom: 6px;
  }
  .sl-section--booking .sl-display { font-size: clamp(28px, min(3.8vw, 6vh), 40px); }
  .bw-inner { gap: 3px; }
  .bw-head { gap: 0; }
  .bw-head .sl-kicker { margin-bottom: 0; }
  .bw-hint { display: none; }
  .bw { border-radius: 16px; grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr); }
  .bw-rail { gap: 3px; padding: 8px 12px; }
  .bw-num { font-size: clamp(30px, 6vh, 38px); }
  .bw-summary { gap: 1px; padding-top: 3px; }
  .bw-summary dt,
  .bw-summary dd { font-size: 9px; line-height: 1.2; }
  .bw-main { gap: 3px; padding: 8px 12px; }
  .bw-progress-label { font-size: 9px; }
  .bw-form,
  .bw-step { gap: 4px; }
  .bw-q { font-size: clamp(17px, 3.4vh, 21px); }
  .bw-q-sub { font-size: 10px; line-height: 1.2; }
  .bw-cards { gap: 4px; }
  .bw-card { min-height: 44px; padding: 5px 8px; font-size: 10px; }
  .bw-card-ico svg { width: 16px; height: 16px; }
  .bw-chips { gap: 4px; }
  .bw-chip { min-height: 28px; padding: 3px 8px; font-size: 9px; }
  .bw-row { gap: 7px; }
  .sl-section--booking .sl-field { margin-bottom: 2px; }
  .sl-section--booking .sl-label,
  .bw-sublabel { font-size: 9px; }
  .sl-section--booking .sl-input { min-height: 36px; padding: 7px 10px; font-size: 11px; }
  .sl-section--booking .bw-textarea { min-height: 48px; height: 48px; max-height: 48px; }
  .bw-counter { font-size: 8px; }
  .sl-consent { gap: 6px; font-size: 9px; line-height: 1.25; }
  .bw-toggle-btn { min-height: 28px; padding: 3px 10px; font-size: 9px; }
  .bw-nav { padding-top: 1px; }
  .bw-btn { min-height: 36px; padding: 6px 12px; font-size: 10px; }
  .bw-direct { gap: 3px; margin-top: 4px; }
  .bw-direct-actions { gap: 6px; }
  .bw-direct-label { font-size: 9px; }
  .bw-direct-btn { min-height: 42px; padding: 4px 8px; }
  .bw-direct-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .bw-direct-copy small { font-size: 8px; }
  .bw-direct-copy strong { font-size: 10px; }
}

/* Booking has a taller composition than the editorial service stages.  On
   medium-height desktop windows its natural centring could place the title
   behind the fixed navigation even though the lower edge still fitted.
   Keep the whole composition below the measured navigation and reduce only
   the title rhythm in this narrow height band. */
@media (min-width: 1025px) and (min-height: 821px) and (max-height: 1040px) {
  .sl-section--booking {
    align-content: start;
    padding-top: var(--sl-nav-clearance);
    padding-bottom: 10px;
  }
  .sl-section--booking .bw-inner { gap: 6px; }
  .sl-section--booking .bw-head { gap: 2px; }
  .sl-section--booking .bw-head .sl-kicker { margin-bottom: 0; }
  .sl-section--booking .sl-display {
    font-size: clamp(38px, min(4.2vw, 6.2vh), 56px);
  }
  .sl-section--booking .bw-direct {
    margin-top: 0;
  }
  .sl-section--booking .bw-direct-btn {
    min-height: 60px;
    padding-block: 8px;
  }
}

/* The compact 640 px composition and the regular laptop composition have
   different type and action sizes.  Bridge their narrow hand-off band so a
   641 px window cannot become taller than either neighbouring layout. */
@media (min-width: 1025px) and (min-height: 641px) and (max-height: 670px) {
  .sl-section--booking .bw-inner { gap: 3px; }
  .sl-section--booking .bw-head { gap: 0; }
  .sl-section--booking .sl-display {
    font-size: clamp(28px, min(3.8vw, 6vh), 40px);
  }
  .sl-section--booking .bw-direct {
    gap: 3px;
    margin-top: 4px;
  }
  .sl-section--booking .bw-direct-label { font-size: 9px; }
  .sl-section--booking .bw-direct-btn {
    min-height: 42px;
    padding-block: 4px;
  }
}

/* At 480–540 px of desktop height the wizard itself already fits, but the
   secondary direct-contact card used to sit underneath it and get clipped.
   It now shares the heading row.  No information is hidden or scaled as a
   single bitmap; the two real layout columns simply use otherwise-empty
   horizontal room.  This is desktop-only and leaves <=1024 px untouched. */
@media (min-width: 1025px) and (max-height: 540px) {
  .sl-section--booking .bw-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(16px, 2vw, 28px);
    row-gap: 3px;
    align-items: end;
  }
  .sl-section--booking .bw-head {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .sl-section--booking .bw {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .sl-section--booking .bw-direct {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: 380px;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-self: end;
    gap: 8px;
  }
  .sl-section--booking .bw-direct-label { white-space: nowrap; }
  .sl-section--booking .bw-direct-actions {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    gap: 6px;
  }
  .sl-section--booking .bw-direct-btn {
    width: clamp(200px, 23vw, 250px);
    min-width: 0;
    min-height: 40px;
  }
}

/* A heavily minimised desktop window can be only ~430 px tall.  Keep every
   final-step field and action visible by tightening the real controls; no
   content is removed and the rule cannot affect tablet/mobile layouts. */
@media (min-width: 1025px) and (max-height: 460px) {
  .sl-section--booking .bw-main {
    gap: 2px;
    padding: 5px 10px;
  }
  .sl-section--booking .bw-form,
  .sl-section--booking .bw-step { gap: 2px; }
  .sl-section--booking .bw-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sl-section--booking .bw-q-sub {
    font-size: 9px;
    line-height: 1.15;
  }
  .sl-section--booking .sl-input {
    min-height: 32px;
    padding: 4px 8px;
  }
  .sl-section--booking .bw-textarea {
    min-height: 34px;
    height: 34px;
    max-height: 34px;
  }
  .sl-section--booking .bw-toggle-btn {
    min-height: 24px;
    padding: 2px 8px;
  }
  .sl-section--booking .sl-consent {
    gap: 5px;
    font-size: 8px;
    line-height: 1.15;
  }
  .sl-section--booking .bw-nav { padding-top: 0; }
  .sl-section--booking .bw-btn {
    min-height: 32px;
    padding: 4px 10px;
  }
}

/* ============================================================
   NEW SERVICES DESKTOP: one selection stage, three expandable cards,
   and the original social panel as stage 02. All selectors stay on this
   route because sluzby.css is also loaded by Contact and Collaboration.
   ============================================================ */
.sluzby-page .sl-section--hero,
.sluzby-page .sl-section--social {
  background: #fff;
  background-image: none !important;
}
.sluzby-page .sl-social-panel::before { display: none !important; }

.sluzby-page .sl-service-hero-photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  justify-self: stretch;
  background: #063812;
}
.sluzby-page .sl-service-hero-photo .sl-service-hero-stage,
.sluzby-page .sl-service-hero-photo .sl-service-hero-person {
  position: absolute;
  display: block;
  max-width: none;
}
.sluzby-page .sl-service-hero-photo .sl-service-hero-stage {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.sluzby-page .sl-service-hero-photo .sl-service-hero-person {
  left: 16%;
  bottom: -13%;
  width: auto;
  height: 108%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .24));
}
.sluzby-page .sl-service-hero-photo .sl-media-badge { z-index: 2; }

.sluzby-page .sl-service-helper {
  margin: clamp(8px, 1.4vh, 16px) 0 0;
  color: #686b73;
  font-size: clamp(11px, min(.95vw, 1.9vh), 16px);
  line-height: 1.35;
}
.sluzby-page .sl-service-select {
  display: flex;
  align-items: center;
  gap: clamp(7px, 1vw, 16px);
  margin: 0;
  padding-left: 22px;
  border-left: 6px solid var(--accent);
  font-size: clamp(11px, min(.95vw, 2vh), 16px);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.sluzby-page .sl-service-select strong { color: #00c924; }
.sluzby-page .sl-service-select > span:nth-child(2) { color: #888; }
.sluzby-page .sl-service-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  color: #0b0d10;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  letter-spacing: .005em;
  text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(0, 255, 0, .24);
}
.sluzby-page .sl-service-jump span { font-size: 1.2em; line-height: 1; }
.sluzby-page .sl-paths { position: relative; z-index: 1; }
.sluzby-page .sl-path {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border: 1px solid rgba(12, 14, 18, .05);
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform .36s cubic-bezier(.2, .8, .2, 1), box-shadow .36s ease;
}
.sluzby-page .sl-path:focus-visible {
  outline: 3px solid #00d916;
  outline-offset: 3px;
}
.sluzby-page .sl-path-head,
.sluzby-page .sl-path-title,
.sluzby-page .sl-path-sub,
.sluzby-page .sl-path-price { display: block; }
.sluzby-page .sl-path-title { margin-bottom: .35em; }
.sluzby-page .sl-path-sub { text-transform: uppercase; }
.sluzby-page .sl-path-price {
  font-size: clamp(10px, min(.95vw, 1.9vh), 15px);
  font-weight: 900;
  line-height: 1.28;
  text-transform: uppercase;
}
.sluzby-page .sl-path-price em {
  display: inline-block;
  margin-left: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #101214;
  font-style: normal;
  text-transform: none;
}
.sluzby-page .sl-path--dark .sl-path-sub { color: rgba(255,255,255,.72); }
.sluzby-page .sl-path-foot {
  align-items: center;
  padding-top: clamp(6px, 1vh, 12px);
  border-top: 1px solid rgba(13, 15, 18, .18);
}
.sluzby-page .sl-path--dark .sl-path-foot { border-color: rgba(255,255,255,.25); }
.sluzby-page .sl-path--accent .sl-path-foot { border-color: rgba(8,28,8,.28); }
.sluzby-page .sl-path-icon {
  display: grid;
  place-items: center;
  font-size: clamp(20px, min(2.2vw, 5vh), 34px);
  font-weight: 900;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .sluzby-page .sl-path:hover {
    transform: translateY(-2px) scale(1.008);
    box-shadow: 0 18px 44px rgba(17,20,18,.16);
  }
}

.sluzby-page .sl-social-panel {
  background: #101214;
  box-shadow: none;
}
/* The modal stays below the fixed navigation, so the original page context
   and route controls remain visible while a service is expanded. */
.sluzby-page .sl-detail-layer[hidden],
.sluzby-page .sl-detail[hidden] { display: none !important; }
.sluzby-page .sl-detail-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-items: stretch;
  justify-items: center;
  padding: calc(var(--nav-top, 18px) + var(--nav-h, 62px) + clamp(14px, 3vh, 30px)) var(--sl-pad-x) clamp(12px, 2vh, 28px);
}
.sluzby-page .sl-detail-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition: opacity .28s ease;
}
.sluzby-page .sl-detail-layer.is-open .sl-detail-backdrop { opacity: 1; }
.sluzby-page .sl-detail {
  position: relative;
  z-index: 1;
  width: min(100%, 1600px);
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(10px, 1.8vh, 18px);
  padding: clamp(13px, min(2vw, 2vh), 24px) clamp(16px, 3vw, 54px) clamp(14px, 2.6vh, 36px);
  border: 1px solid rgba(10,12,14,.06);
  border-radius: clamp(24px, 2.2vw, 38px);
  background: #fff;
  color: #101214;
  box-shadow: 0 20px 72px rgba(12,14,16,.17);
  overflow: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}
.sluzby-page .sl-detail.is-visible {
  visibility: visible;
  animation: sl-detail-in .16s cubic-bezier(.2,.7,.2,1) both;
}
.sluzby-page .sl-detail.is-leaving {
  visibility: visible;
  animation: sl-detail-out .13s ease-in forwards;
}
@keyframes sl-detail-in {
  from { opacity: .62; transform: translateY(5px) scale(.992); }
  to { opacity: 1; transform: none; }
}
@keyframes sl-detail-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-4px) scale(.995); }
}
.sluzby-page .sl-detail--program { background: #00f316; }
.sluzby-page .sl-detail--promo { background: #111313; color: #fff; }
.sluzby-page .sl-detail-main {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .36fr) minmax(0, .64fr);
  gap: clamp(18px, 2vw, 38px);
}
.sluzby-page .sl-detail-copy {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(8px, 1vw, 18px) 0;
}
.sluzby-page .sl-detail-back {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 auto;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: 800 clamp(10px, min(.9vw, 2vh), 15px)/1.3 Montserrat, sans-serif;
  text-transform: uppercase;
}
.sluzby-page .sl-detail-back span { font-size: 1.45em; line-height: .7; }
.sluzby-page .sl-detail-kicker {
  margin: auto 0 clamp(10px, 2vh, 26px);
  font-size: clamp(12px, min(1.35vw, 2.5vh), 22px);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sluzby-page .sl-detail-kicker span { color: #00dc22; }
.sluzby-page .sl-detail--program .sl-detail-kicker span { color: #101214; }
.sluzby-page .sl-detail-title {
  margin: 0;
  font-size: clamp(30px, min(5.6vw, 10vh), 108px);
  font-weight: 900;
  letter-spacing: -.065em;
  line-height: .88;
  text-transform: uppercase;
}
.sluzby-page .sl-detail-lead {
  margin: clamp(9px, 1.8vh, 22px) 0 0;
  font-size: clamp(13px, min(1.5vw, 3.3vh), 26px);
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.15;
}
.sluzby-page .sl-detail-description {
  margin: clamp(4px, .7vh, 9px) 0 0;
  color: #6f7180;
  font-size: clamp(12px, min(1.15vw, 2.8vh), 20px);
  line-height: 1.35;
}
.sluzby-page .sl-detail--program .sl-detail-description { color: #173b18; }
.sluzby-page .sl-detail--promo .sl-detail-description { color: #bec0c8; }
.sluzby-page .sl-detail-price {
  margin: clamp(10px, 2.4vh, 28px) 0 0;
  font-size: clamp(15px, min(1.8vw, 3vh), 28px);
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}
.sluzby-page .sl-detail--show .sl-detail-price {
  padding-left: 12px;
  border-left: 5px solid var(--accent);
}
.sluzby-page .sl-detail-price strong {
  display: table;
  margin-top: clamp(5px, 1vh, 10px);
  padding: clamp(5px, .9vh, 9px) clamp(13px, 1.5vw, 26px);
  border-radius: 999px;
  background: var(--accent);
  color: #101214;
  font-size: .8em;
  text-transform: none;
}
.sluzby-page .sl-detail-photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(18px, 1.4vw, 28px);
  background: #10401c;
}
.sluzby-page .sl-detail-photo img { position: absolute; display: block; }
.sluzby-page .sl-detail-photo .sl-detail-bg {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sluzby-page .sl-detail-photo--show .sl-detail-person,
.sluzby-page .sl-detail-photo--promo .sl-detail-person {
  bottom: -16%;
  left: 23%;
  width: auto;
  height: 110%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.23));
}
.sluzby-page .sl-detail-photo--show .sl-detail-foreground {
  left: -4%;
  bottom: -23%;
  width: 108%;
  height: auto;
  pointer-events: none;
}
.sluzby-page .sl-detail-photo--program .sl-detail-bg {
  filter: blur(2px) brightness(.72) saturate(1.2);
  transform: scale(1.04);
}
.sluzby-page .sl-detail-photo--program .sl-detail-person {
  bottom: -19%;
  left: 17%;
  width: auto;
  height: 120%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.25));
}
.sluzby-page .sl-detail-photo--promo .sl-detail-bg { filter: brightness(.63) saturate(1.4); }
.sluzby-page .sl-detail-photo--promo .sl-detail-person { left: 22%; bottom: -16%; }
.sluzby-page .sl-detail-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .34fr);
  align-items: center;
  gap: clamp(12px, 2vw, 40px);
  padding-top: clamp(10px, 1.8vh, 22px);
  border-top: 1px solid rgba(14,18,16,.22);
}
.sluzby-page .sl-detail--promo .sl-detail-bottom { border-color: rgba(255,255,255,.24); }
.sluzby-page .sl-detail-features {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(8px, 1.3vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sluzby-page .sl-detail-features li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(5px, .8vw, 14px);
  white-space: nowrap;
  font-size: clamp(10px, min(.95vw, 2vh), 17px);
  font-weight: 600;
}
.sluzby-page .sl-detail-feature-icon {
  width: clamp(29px, min(3.5vw, 7vh), 58px);
  height: clamp(29px, min(3.5vw, 7vh), 58px);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #111;
}
.sluzby-page .sl-detail-feature-icon svg { width: 53%; height: 53%; }
.sluzby-page .sl-detail--program .sl-detail-feature-icon {
  background: #111;
  color: var(--accent);
}
.sluzby-page .sl-detail-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: clamp(46px, 7vh, 78px);
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #101214;
  text-align: center;
  text-decoration: none;
  font-size: clamp(11px, min(1.2vw, 2.3vh), 20px);
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
  box-shadow: 0 8px 26px rgba(0,255,0,.2);
}
.sluzby-page .sl-detail-cta span { font-size: 1.4em; line-height: .7; }
.sluzby-page .sl-detail--program .sl-detail-cta { background: #101214; color: var(--accent); box-shadow: none; }
.sluzby-page .sl-detail-cta:hover { transform: translateY(-2px); }
.sluzby-page .sl-morph-ghost {
  position: fixed !important;
  z-index: 93;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  transform-origin: center;
  overflow: hidden;
  transition: none !important;
  box-shadow: 0 18px 44px rgba(17,20,18,.16);
}
.sluzby-page.sl-detail-open { overflow: hidden; }
.sluzby-page.sl-detail-open .sl-header .site-header-motion {
  transform: translateY(0) !important;
}

@media (min-width: 1025px) {
  .sluzby-page .sl-section--hero {
    display: block;
    height: var(--viewport-h, 100dvh);
    min-height: 0;
    padding: 0 var(--sl-pad-x);
    overflow: clip;
  }
  .sluzby-page .sl-section--hero .sl-inner {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto clamp(150px, 31vh, 294px);
    gap: clamp(7px, 1.5vh, 18px);
    height: 100%;
    min-height: 0;
    max-width: 1640px;
    padding-top: calc(var(--nav-top, 18px) + var(--nav-h, 62px) + clamp(2px, 2vh, 20px));
    padding-bottom: clamp(10px, 2vh, 26px);
  }
  .sluzby-page .sl-hero-grid {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: clamp(20px, 3vw, 56px);
  }
  .sluzby-page .sl-hero-copy {
    display: flex;
    min-height: 0;
    flex-direction: column;
    justify-content: center;
  }
  .sluzby-page .sl-section--hero .sl-display {
    font-size: clamp(34px, min(4.3vw, 8.5vh), 86px);
    line-height: .94;
  }
  .sluzby-page .sl-section--hero .sl-copy { margin-top: clamp(7px, 1.5vh, 20px); }
  .sluzby-page .sl-section--hero .sl-lead {
    font-size: clamp(12px, min(1.2vw, 2.6vh), 21px) !important;
    line-height: 1.35;
  }
  .sluzby-page .sl-section--hero .sl-hero-actions { margin-top: clamp(10px, 2vh, 25px); }
  .sluzby-page .sl-service-jump {
    min-height: clamp(37px, 5.9vh, 68px);
    padding: clamp(8px, 1vh, 13px) clamp(20px, 3vw, 50px);
    font-size: clamp(13px, min(1.4vw, 2.7vh), 23px);
  }
  .sluzby-page .sl-service-select { align-self: start; }
  .sluzby-page .sl-paths {
    height: 100%;
    min-height: 0;
    margin: 0;
    gap: clamp(10px, 1.3vw, 24px);
  }
  .sluzby-page .sl-path {
    min-height: 0;
    height: 100%;
    gap: clamp(3px, .8vh, 10px);
    padding: clamp(10px, min(1.6vw, 1.7vh), 26px) clamp(12px, 1.7vw, 30px);
  }
  .sluzby-page .sl-path-title { font-size: clamp(15px, min(1.5vw, 3vh), 26px); }
  .sluzby-page .sl-path-sub { font-size: clamp(10px, min(.82vw, 1.8vh), 14px); line-height: 1.25; }
  .sluzby-page .sl-path-chips { gap: clamp(3px, .4vw, 7px); }
  .sluzby-page .sl-path-chips span { padding: clamp(3px, .5vh, 6px) clamp(6px, .6vw, 11px); font-size: clamp(8px, min(.65vw, 1.5vh), 11px); }
  .sluzby-page .sl-path-link { font-size: clamp(10px, min(.85vw, 1.9vh), 14px); }
  .sluzby-page .sl-path-icon { width: clamp(30px, min(3.6vw, 5.7vh), 60px); height: clamp(30px, min(3.6vw, 5.7vh), 60px); }
  .sluzby-page .sl-section--social {
    height: var(--viewport-h, 100dvh);
    min-height: 0;
    padding: 0 var(--sl-pad-x);
    display: grid;
    align-content: center;
    overflow: clip;
  }
  .sluzby-page .sl-section--social .sl-inner { width: min(100%, 1640px); }
  .sluzby-page .sl-social-panel {
    height: clamp(250px, 49vh, 480px);
    min-height: 0;
    padding: clamp(18px, 3vw, 52px);
    gap: clamp(16px, 3vw, 50px);
  }
  .sluzby-page .sl-social-panel .sl-display {
    font-size: clamp(31px, min(4vw, 7vh), 68px);
  }
  .sluzby-page .sl-social-panel .sl-copy { margin-top: clamp(8px, 2vh, 18px); }
  .sluzby-page .sl-social-panel .sl-copy p { font-size: clamp(12px, min(1.1vw, 2.1vh), 18px); }
  .sluzby-page .sl-social-hint { margin-top: clamp(9px, 2vh, 24px); font-size: clamp(10px, min(.9vw, 2vh), 15px); }
}

@media (min-width: 1025px) and (max-height: 590px) {
  .sluzby-page .sl-section--hero .sl-inner {
    grid-template-rows: minmax(0, 1fr) auto clamp(132px, 30vh, 176px);
    gap: 5px;
    padding-top: calc(var(--nav-top, 14px) + var(--nav-h, 54px) + 1px);
    padding-bottom: 6px;
  }
  .sluzby-page .sl-section--hero .sl-kicker { margin-bottom: 4px; }
  .sluzby-page .sl-section--hero .sl-display { font-size: clamp(30px, min(4vw, 8vh), 47px); }
  .sluzby-page .sl-service-helper { margin-top: 4px; }
  .sluzby-page .sl-section--hero .sl-hero-actions { margin-top: 6px; }
  .sluzby-page .sl-service-select { font-size: 10px; }
  .sluzby-page .sl-path { gap: 2px; padding: 7px 10px; }
  .sluzby-page .sl-path-title { margin-bottom: 2px; }
  .sluzby-page .sl-path-chips { gap: 2px; }
  .sluzby-page .sl-path-chips span { padding: 1px 5px; font-size: 7px; }
  .sluzby-page .sl-path-icon { width: 26px; height: 26px; }
  .sluzby-page .sl-path-link { font-size: 9px; }
  .sluzby-page .sl-path-price em { padding: 2px 6px; }
  .sluzby-page .sl-social-panel { height: min(69vh, 330px); }
  .sluzby-page .sl-social-panel .sl-display { font-size: clamp(28px, min(3.5vw, 6.5vh), 40px); }
  .sluzby-page .sl-social-panel .sl-copy p { font-size: 11px; }
  .sluzby-page .sl-social-hint { font-size: 9px; }
  .sluzby-page .sl-detail { padding: 7px 13px 10px; gap: 5px; }
  .sluzby-page .sl-detail-copy { padding: 1px 0; }
  .sluzby-page .sl-detail-kicker { margin-bottom: 5px; }
  .sluzby-page .sl-detail-title { font-size: clamp(28px, min(4.5vw, 8vh), 48px); }
  .sluzby-page .sl-detail-lead { margin-top: 5px; }
  .sluzby-page .sl-detail-price { margin-top: 5px; }
  .sluzby-page .sl-detail-bottom { padding-top: 5px; }
}

@media (max-width: 1024px) {
  .sluzby-page .sl-section--hero {
    height: auto;
    min-height: 100svh;
    padding-top: var(--sl-nav-clearance);
    padding-bottom: 48px;
  }
  .sluzby-page .sl-hero-grid { display: grid; gap: 20px; }
  .sluzby-page .sl-service-hero-photo { height: auto; aspect-ratio: 16 / 10; }
  .sluzby-page .sl-paths { margin-top: 14px; height: auto; }
  .sluzby-page .sl-path { min-height: 185px; padding: 20px; }
  .sluzby-page .sl-service-select { margin-top: 30px; }
  .sluzby-page .sl-detail-layer { z-index: 150; padding: 20px; }
  .sluzby-page .sl-detail { height: min(100%, 900px); overflow: auto; }
  .sluzby-page .sl-detail-main { grid-template-columns: minmax(0, 1fr); }
  .sluzby-page .sl-detail-photo { min-height: 260px; }
  .sluzby-page .sl-detail-bottom { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sluzby-page .sl-detail-layer { padding: 8px; }
  .sluzby-page .sl-detail { border-radius: 20px; padding: 16px; }
  .sluzby-page .sl-detail-photo { min-height: 190px; }
  .sluzby-page .sl-detail-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sluzby-page .sl-detail-title { font-size: clamp(34px, 10vw, 58px); }
  .sluzby-page .sl-section--social { height: auto; min-height: 100svh; }
  .sluzby-page .sl-social-panel { min-height: 430px; }
}
@media (prefers-reduced-motion: reduce) {
  .sluzby-page .sl-path:hover { transform: none; }
  .sluzby-page .sl-detail.is-visible,
  .sluzby-page .sl-detail.is-leaving { animation: none; }
  .sluzby-page .sl-detail-backdrop,
  .sluzby-page .sl-path { transition-duration: .01ms; }
}

/* On short windows the detail must scroll from its beginning, not centre
   overflowing copy above the viewport. Preserve the ordinary-height layout. */
@media (max-height: 560px) {
  .sluzby-page .sl-detail {
    max-height: 100%;
    grid-template-rows: auto auto;
    align-content: start;
  }
  .sluzby-page .sl-detail-main { min-height: auto; align-items: start; }
  .sluzby-page .sl-detail-copy { justify-content: flex-start; }
  .sluzby-page .sl-detail-back { min-height: 44px; margin-bottom: 12px; }
  .sluzby-page .sl-detail-kicker { margin-top: 0; }
}

/* The desktop hero and social stage are one white canvas. A slightly warmer
   main background used to flash as a hairline between their viewport-sized
   sections at fractional scroll positions. The final white stage then fades
   into the exact dark base of the footer (which sits one pixel over the seam). */
@media (min-width: 1025px) {
  .sluzby-page[data-page="sluzby"] main {
    background: #fff;
  }
  .sluzby-page[data-page="sluzby"] .sl-section--hero {
    background-color: #fff;
  }
  .sluzby-page[data-page="sluzby"] .sl-section--social {
    background-color: #0b0d10;
    background-image: linear-gradient(to bottom,
      #fff 0%,
      #fff calc(100% - clamp(132px, 18vh, 210px)),
      #0b0d10 100%) !important;
  }
  .sluzby-page[data-page="sluzby"] > .site-footer.ca-footer {
    margin-top: -1px;
    border-top: 0;
  }
}