/* Revive Auto Detailing · spojená verzia (revive-spojena), jeden vzhľad: revive-svetlo-zlata
   Grammar „Čelo auta“ (z revive-svetlo): jedna čierna zem, šošovka svetlometu je jediný tvar média,
   sekcie delí pás mriežky chladiča. Zem z jeho cenníka, zlato z jeho loga.
   Animuje sa len transform / opacity (clip-path pre odkrytie šošoviek). */

@font-face { font-family: "Unbounded"; font-weight: 200 900; font-display: swap; src: url(fonts/unbounded-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-017F; } /* podmnožina Latin Extended-A (slovenčina, čeština), 15. 10. 2026 */
@font-face { font-family: "Unbounded"; font-weight: 200 900; font-display: swap; src: url(fonts/unbounded-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(fonts/onest-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-017F; } /* podmnožina Latin Extended-A (slovenčina, čeština), 15. 10. 2026 */
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap; src: url(fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --sc-canvas: #13110f;      /* the black of his price list */
  --sc-surface: #2a2622;     /* warm concrete */
  --sc-ink: #f3efe8;
  --sc-ink-soft: #b2a897;    /* grey tinted toward the gold */
  --sc-accent: #d9bb8c;      /* gold of his logo (light side) */
  --sc-accent-ink: #17120c;
  --sc-font-display: "Unbounded", system-ui, sans-serif;
  --sc-font-text: "Onest", system-ui, sans-serif;
  --gold-deep: #9a7649;      /* gold of his logo (shadow side) */
  --led: #f7f1e6;
  --warm: #ffcf8a;
  --r: 10px;
  --bar: 64px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --shadow-color: 30 25% 3%;
}

html { scroll-behavior: auto; }
body { font-size: 1.0625rem; line-height: 1.62; letter-spacing: 0.005em; background: var(--sc-canvas); }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* the engine writes --sc-p on its act element every frame; an empty probe keeps that off the section's content (verify.md) */
.act-probe { position: absolute; inset: 0; pointer-events: none; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* N39: skip link, off screen until it gets keyboard focus (site.js focusAt moves focus to the hero heading) */
.skip { position: fixed; left: 12px; top: -100px; z-index: 70; }
.skip:focus { top: 12px; }
#uvod:focus { outline: none; }

.h2 {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.04; letter-spacing: -0.03em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.18rem, 1.8vw, 1.55rem); line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.body { color: var(--sc-ink-soft); max-width: 34rem; text-wrap: pretty; }
a { text-decoration-color: rgb(217 187 140 / .55); }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: currentColor; } }

/* ------------------------------------------------------------------ buttons */
.btn, .call {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 1.25rem; border-radius: var(--r); border: 0; cursor: pointer;
  font-family: var(--sc-font-text); font-weight: 600; font-size: 1rem; white-space: nowrap;
  text-decoration: none; transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn--call, .call {
  background: var(--sc-accent); color: var(--sc-accent-ink);
  box-shadow: inset 0 1px 0 rgb(255 248 230 / .55), inset 0 -1px 0 rgb(120 90 50 / .35), 0 6px 16px -6px hsl(var(--shadow-color) / .7);
}
.btn--ghost { background: transparent; color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px rgb(217 187 140 / .5); }
@media (hover: hover) and (pointer: fine) {
  .btn--call:hover, .call:hover { background: #e8d0a8; }
  .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgb(217 187 140 / .95); }
}
.btn:active, .call:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------------- bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar);
  display: flex; align-items: center; gap: 1.5rem; padding: 0 var(--gut);
  background: rgb(16 14 12 / .94); box-shadow: inset 0 -1px 0 rgb(217 187 140 / .14);
}
.mark { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; min-height: 44px; }
.mark__crest { width: auto; height: 38px; }
.mark__word { width: auto; height: 13px; }
.call { min-height: 42px; padding: 0 1rem; font-size: .95rem; }
.call__short { display: none; }

/* rotary light switch = where you are on the page */
.switch { display: flex; align-items: center; gap: .75rem; }
.switch__name { font-size: .85rem; color: var(--sc-ink-soft); min-width: 6em; text-align: right; }
.switch__dial { position: relative; width: 150px; height: 56px; }
.switch__pos {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; padding: 4px;
  border: 0; background: none; border-radius: 50%; cursor: pointer; color: rgb(178 168 151 / .62);
  transition: color 160ms var(--sc-ease-out);
}
.switch__pos::before { content: ""; position: absolute; inset: -6px 0; }   /* taller tap target; sideways the positions are spaced apart instead */
.switch__pos svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.switch__pos svg path:not(.ray) { fill: currentColor; stroke: none; }
.switch__pos svg text { fill: currentColor; stroke: none; font: 600 12px var(--sc-font-text); }
.switch__pos.is-on { color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .switch__pos:hover { color: var(--sc-ink); } }
/* five positions on the arc: 0 / parking / low beam / high beam / fog */
.switch__pos[data-i="0"] { left: 20px; top: 30px; }
.switch__pos[data-i="1"] { left: 47px; top: 15px; }
.switch__pos[data-i="2"] { left: 75px; top: 10px; }
.switch__pos[data-i="3"] { left: 103px; top: 15px; }
.switch__pos[data-i="4"] { left: 130px; top: 30px; }
.switch__knob {
  position: absolute; left: 75px; top: 44px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4e4840, #1c1916 70%);
  box-shadow: inset 0 0 0 1.5px #9d8a6c, inset 0 1px 0 2px rgb(255 240 210 / .12), 0 3px 6px hsl(var(--shadow-color) / .7);
  will-change: transform; pointer-events: none;
}
.switch__notch { position: absolute; left: 50%; top: 3px; width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--sc-accent); }

/* ------------------------------------------------------------------- lenses */
.lens { position: relative; }
.lens__clip {
  position: absolute; inset: 0; display: block; overflow: hidden;
  background: radial-gradient(ellipse 70% 80% at 50% 45%, #26221e, #0e0c0b 75%);
}
.lens--r .lens__clip { clip-path: url(#lensR); }
.lens--l .lens__clip { clip-path: url(#lensL); }
.lens--v .lens__clip { clip-path: url(#lensV); }
.lens__on { position: absolute; inset: 0; display: block; }
.lens__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lens__rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lens__rim use { fill: none; stroke: url(#chrome); stroke-width: 2.5; }
.lens__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -7%; height: 26%; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(var(--shadow-color) / .75), transparent);
}
.lens figcaption { position: absolute; top: calc(100% + .7rem); font-size: .92rem; color: var(--sc-ink-soft); }
.lens--l figcaption { right: 4%; text-align: right; }
.lens--r figcaption { left: 4%; }

/* ------------------------------------------------------------------- shared world */
.led {
  position: absolute; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--led) 6%, var(--led) 94%, transparent);
  transform: rotate(-2.2deg);
}
.led::after {
  content: ""; position: absolute; inset: -22px -2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(247 241 230 / .18), transparent);
}
.grille {
  position: relative; z-index: 2; height: 26px;
  background:
    radial-gradient(circle, #090807 46%, transparent 52%) 0 0 / 11px 10px,
    radial-gradient(circle, #090807 46%, transparent 52%) 5.5px 5px / 11px 10px,
    linear-gradient(#3c3832, #1f1c19 60%, #2c2925);
  box-shadow: inset 0 1px 0 rgb(255 240 210 / .16), inset 0 -1px 0 rgb(0 0 0 / .6);
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cert { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; color: var(--sc-ink); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.cert svg, .slat svg { flex: none; width: 20px; height: 20px; color: var(--sc-accent); }
.price {
  margin-top: 1rem; font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-accent);
  font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.price span { display: block; margin-top: .3rem; font-family: var(--sc-font-text); font-weight: 400; font-size: .9rem; letter-spacing: 0; color: var(--sc-ink-soft); }

/* --------------------------------------------------------------------- hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: clip; isolation: isolate; }
.hero__wall {
  position: absolute; inset: -4% 0 -4% 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 60% at 62% 18%, #2d2924, transparent 70%),
    linear-gradient(180deg, #1c1a17, #15130f 55%, #12100e);
}
.hero__wall .led--1 { top: 15%; left: 46%; width: 44%; }
.hero__wall .led--2 { top: 21%; left: 58%; width: 36%; opacity: .85; }
.hero__wall .led--3 { top: 27%; left: 70%; width: 26%; opacity: .7; }
.hero__wall .led--4 { top: 13.4%; left: 4%; width: 30%; opacity: .5; }
.hero__door {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1;
  background: linear-gradient(to top, rgb(255 207 138 / .22), rgb(255 207 138 / .07) 38%, transparent 80%);
}
.hero__door::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9%; height: 2px;
  background: linear-gradient(90deg, transparent 2%, rgb(255 207 138 / .85) 22%, rgb(255 207 138 / .9) 60%, transparent 96%);
}
.hero__door::after {
  content: ""; position: absolute; left: 4%; right: 6%; bottom: calc(9% - 26px); height: 56px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 207 138 / .2), transparent);
}
.hero__copy { position: absolute; z-index: 4; left: var(--gut); top: calc(var(--bar) + clamp(2.5rem, 9vh, 5.5rem)); max-width: 46rem; }
.hero__title {
  font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(2.1rem, min(4.7vw, 8.6vh), 4.6rem); line-height: 1.0; letter-spacing: -0.035em; text-wrap: balance;
}
.hero__lead { margin-top: 1.25rem; max-width: 27rem; color: #d3cabb; font-size: 1.12rem; text-wrap: pretty; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }
.hero__lens { position: absolute; z-index: 3; right: -3vw; bottom: -7vh; width: min(73vw, 128vh); aspect-ratio: 2.05; will-change: transform; }
.hero__lens .lens__stack { position: absolute; left: 0; right: 0; top: -6%; height: 112%; display: block; will-change: transform; }
.hero__lens .lens__slide { object-position: var(--pos, 50% 50%); opacity: 0; transition: opacity 1.2s ease; }
.hero__lens .lens__slide.is-on { opacity: 1; }
.hero__lens .lens__rim use { stroke-width: 3; }
.hero__pad { position: absolute; z-index: 5; right: -1vw; bottom: -12vh; width: 21vw; height: auto; will-change: transform; pointer-events: none; }

/* --------------------------------------------------------------------- top services */
.top { position: relative; max-width: 84rem; margin: 0 auto; padding: clamp(5rem, 11vh, 8rem) var(--gut) clamp(3rem, 7vh, 5rem); }
.top__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.top__head .body { margin-top: .9rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); margin-bottom: clamp(3.5rem, 8vh, 5rem); }
.pair--svc { align-items: start; margin-bottom: clamp(3rem, 7vh, 4.5rem); }
.shot { aspect-ratio: 2.1; }
.lens__on { will-change: clip-path; }
.lens__on .lens__img { will-change: transform; }
.svc-card__text { margin-top: 1.5rem; padding: 0 5%; }
.svc-card__text > p:not(.price):not(.cert) { margin-top: .6rem; color: var(--sc-ink-soft); max-width: 34rem; text-wrap: pretty; }
.ppf { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ppf__text { margin-top: 0; padding: 0; }
.ppf__text .btn { margin-top: 1.5rem; }
.ppf__lens { margin-bottom: 2rem; }
.more { list-style: none; margin: clamp(3rem, 7vh, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, 2.5vw, 2.2rem); }
.more__item { position: relative; padding-top: 1.1rem; box-shadow: inset 0 1px 0 rgb(217 187 140 / .35); display: flex; flex-direction: column; }
.more__no { display: block; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -0.04em; color: var(--sc-accent); margin-bottom: .8rem; font-variant-numeric: tabular-nums; }
.more__name { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1rem, 1.35vw, 1.12rem); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.more__item > p:not(.more__price) { margin-top: .55rem; color: var(--sc-ink-soft); font-size: .95rem; line-height: 1.5; text-wrap: pretty; flex: 1; }
.more__price { margin-top: .9rem; font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-accent); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------- skúška časom (z revive-keramika) */
.time {
  position: relative; max-width: 84rem; margin: 0 auto; padding: clamp(4rem, 9vh, 6rem) var(--gut) clamp(3rem, 7vh, 5rem);
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.time__read .body { margin-top: .9rem; }
.time__now {
  margin-top: clamp(1.1rem, 2.6vh, 1.8rem); min-height: 1em;
  font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--sc-accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.time__stops { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.time__stops button {
  min-height: 42px; padding: 0 .8rem; border-radius: 8px; border: 0; cursor: pointer; font-weight: 600; font-size: .92rem;
  color: var(--sc-ink); background: rgb(255 240 210 / .04); box-shadow: inset 0 0 0 1px rgb(217 187 140 / .35);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.time__stops button[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .time__stops button:not([aria-pressed="true"]):hover { background: rgb(217 187 140 / .14); } }
.time__stops button:active { transform: scale(.97); }
.time__event { margin-top: 1.4rem; min-height: 8.6em; padding-top: 1rem; box-shadow: inset 0 1px 0 rgb(217 187 140 / .22); }
.time__ev { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.3; }
.time__quote { margin-top: .5rem; color: var(--sc-ink-soft); font-size: .98rem; line-height: 1.55; max-width: 34rem; text-wrap: pretty; }
.time__quote cite { display: block; margin-top: .35rem; font-style: normal; font-size: .86rem; color: var(--sc-accent); }

/* the test panel: one piece of black lacquer, five protections side by side, his LED tubes reflected in it */
.panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); aspect-ratio: 16 / 10.4; border-radius: 16px;
  background: linear-gradient(176deg, #26221d 0%, #12100e 30%, #0b0a09 62%, #191613 100%);
  box-shadow: inset 0 0 0 1px rgb(217 187 140 / .3), inset 0 1px 0 rgb(255 240 210 / .16), inset 0 -30px 60px rgb(0 0 0 / .5),
              0 26px 50px -18px hsl(var(--shadow-color) / .9);
}
.panel__led { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.panel__led i {
  position: absolute; left: -10%; width: 120%; height: 2%;
  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / .05) 12%, rgb(247 241 230 / .5) 40%, rgb(255 255 255 / .7) 52%, rgb(247 241 230 / .36) 66%, transparent 92%);
  transform: rotate(-7deg);
}
.panel__led i:nth-child(1) { top: 37%; opacity: .6; }
.panel__led i:nth-child(2) { top: 45%; opacity: .32; height: 1.3%; }
.panel__led i:nth-child(3) { top: 78%; opacity: .16; height: 1%; transform: rotate(-4deg); }
/* day 0: the IR lamp above the panel, warm, fades as soon as time passes */
.panel__ir {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: opacity;
  background: radial-gradient(70% 55% at 50% -8%, rgb(255 128 80 / .55), rgb(214 70 40 / .24) 46%, transparent 86%);
}
.field { position: relative; z-index: 2; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.field + .field { box-shadow: inset 1px 0 0 rgb(217 187 140 / .16); }
.field__name { position: relative; z-index: 4; display: grid; gap: .15rem; padding: 1rem .85rem 0; line-height: 1.25; }
.field__name b { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(.78rem, .95vw, .92rem); letter-spacing: -0.01em; }
.field__name span { font-size: clamp(.72rem, .85vw, .82rem); color: var(--sc-ink-soft); }
.field__lak { position: relative; z-index: 2; margin: .5rem .4rem; }
.field__film {
  position: absolute; inset: 6% 8%; opacity: 0; border-radius: 40% 55% 45% 60% / 55% 40% 60% 45%; will-change: opacity;
  background:
    radial-gradient(40% 30% at 35% 35%, rgb(235 228 215 / .15), transparent 70%),
    radial-gradient(45% 35% at 65% 70%, rgb(235 228 215 / .11), transparent 72%),
    radial-gradient(60% 50% at 50% 50%, rgb(170 160 145 / .1), transparent 75%);
}
.bead {
  position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius: 50%; will-change: transform, opacity;
  background: radial-gradient(circle at 50% 52%, rgb(4 4 4 / .92) 0 56%, rgb(4 4 4 / .5) 66%, transparent 72%);
  box-shadow: 1px 3px 3px rgb(0 0 0 / .6), 0 1px 1px rgb(0 0 0 / .5);
}
.bead i { position: absolute; inset: 0; border-radius: 50%; }
.bead .rim {
  background:
    radial-gradient(circle at 62% 72%, rgb(255 255 255 / .6) 0 9%, transparent 26%),
    radial-gradient(circle, transparent 0 57%, rgb(220 215 205 / .4) 65%, rgb(255 255 255 / .2) 69%, transparent 72%);
}
.bead .spec { inset: 20% 16% 64% 22%; transform: rotate(-7deg); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .85) 28%, #fff 52%, rgb(255 255 255 / .5) 78%, transparent); }
/* kvapka po ťuknutí (site.js dropAt): nad ostatnými guľôčkami, lak je klikateľný */
.drop { z-index: 3; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .field__lak { cursor: pointer; } }
.field__state {
  position: relative; z-index: 4; display: flex; align-items: center; gap: .4rem; padding: 0 .85rem .9rem;
  font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(.7rem, .85vw, .82rem); color: var(--sc-ink);
}
.field__state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 2px rgb(247 241 230 / .15); }
.field[data-s="slabne"] .field__state { color: var(--sc-ink-soft); }
.field[data-s="slabne"] .field__state::before { background: transparent; box-shadow: inset 0 0 0 2px var(--sc-ink-soft); }
.field[data-s="dosluhuje"] .field__state, .field[data-s="nedrzi"] .field__state { color: #8a8274; }
.field[data-s="dosluhuje"] .field__state::before, .field[data-s="nedrzi"] .field__state::before { background: transparent; box-shadow: inset 0 0 0 1px #6f685c; }
.field[data-s="nedrzi"] .field__name b { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgb(217 187 140 / .7); }

/* 36 months, his two check-ups marked */
.months { position: relative; display: grid; grid-template-columns: repeat(36, minmax(0, 1fr)); gap: 2px; padding: 22px 0 22px; }
.months b { height: 8px; border-radius: 1px; background: rgb(243 239 232 / .12); transition: background-color 160ms var(--sc-ease-out); }
.months b.is-past { background: rgb(217 187 140 / .6); }
.months b.is-now { background: var(--sc-ink); }
.months span { position: absolute; transform: translateX(-50%); font-size: .74rem; font-weight: 600; white-space: nowrap; color: var(--sc-ink-soft); line-height: 1; }
.months .m-ev { top: 4px; color: var(--sc-accent); }
.months .m-yr { bottom: 3px; }
.time__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.time__note { color: var(--sc-ink-soft); font-size: .85rem; line-height: 1.5; max-width: 30rem; text-wrap: pretty; }

/* --------------------------------------------------------------------- práca: his reel (z revive-reel) */
.reel { position: relative; height: 200vh; }
.reel__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
  max-width: 84rem; margin: 0 auto; padding: calc(var(--bar) + clamp(1rem, 3.5vh, 2.2rem)) var(--gut) clamp(1rem, 3.5vh, 2.2rem);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.reel__media { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
.reel__card { height: calc(100svh - var(--bar) - clamp(2rem, 7vh, 4.4rem) - 84px); aspect-ratio: 9 / 16; width: auto; }
.reel__card .lens__clip { background: #0e0c0b; }
.reel__poster, .reel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__canvas { opacity: 0; }
.reel__card.is-live .reel__canvas { opacity: 1; }
.reel__card .lens__shadow { left: 10%; right: 10%; bottom: -3%; height: 10%; }

/* the meter: white LED fill to its own 100 mark (one notch per job), gold overflow past it */
.meter { position: relative; height: 30px; margin-top: 18px; }
.meter__track { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: rgb(243 239 232 / .16); }
.meter__fill { position: absolute; inset: 0; border-radius: 2px; background: var(--led); transform-origin: left center; transform: scaleX(0); will-change: transform; }
.meter__notches { position: absolute; inset: 0; }
.meter__notches i { position: absolute; top: -3px; width: 1px; height: 10px; background: rgb(243 239 232 / .38); }
.meter__cap { position: absolute; right: 0; bottom: 11px; font-family: var(--sc-font-display); font-weight: 600; font-size: 13px; line-height: 1; color: var(--sc-ink-soft); }
.meter__cap::after { content: ""; position: absolute; right: 0; top: calc(100% + 1px); width: 2px; height: 14px; background: var(--sc-ink); }
.meter__over { position: absolute; left: 100%; bottom: 0; height: 4px; width: 40vw; pointer-events: none; }
.meter__over i { position: absolute; inset: 0; border-radius: 0 2px 2px 0; background: var(--sc-accent); transform-origin: left center; transform: scaleX(0); will-change: transform; }
.meter__over::after { content: ""; position: absolute; inset: 0; border-bottom: 1px dashed rgb(217 187 140 / .35); }

.reel__text { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; }
.reel__src { font-size: .88rem; color: var(--sc-ink-soft); }
.reel__h { margin-top: .55rem; }
.reel__car { margin-top: .9rem; display: grid; gap: .2rem; }
.reel__car b { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.reel__car span { color: var(--sc-accent); font-size: .92rem; overflow-wrap: anywhere; }
.jobs { margin-top: 1rem; columns: 2; column-gap: 2.2rem; font-size: .98rem; line-height: 1.42; }
.jobs li { break-inside: avoid; padding-left: 1em; text-indent: -1em; margin-bottom: .22rem; }
.jobs li::before { content: "-"; display: inline-block; width: 1em; text-indent: 0; color: var(--sc-ink-soft); }
.reel__end { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-top: clamp(1rem, 3vh, 2rem); }
.extra__line {
  font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.02rem, 1.55vw, 1.4rem); line-height: 1.22; letter-spacing: -0.015em;
  color: var(--sc-accent); opacity: .3; max-width: 23ch; will-change: opacity;
}
.extra__src { margin-top: .35rem; font-size: .82rem; color: var(--sc-ink-soft); }
.readout {
  flex: none; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(3.2rem, 6.6vw, 6.4rem); line-height: .85; letter-spacing: -0.045em;
  color: var(--sc-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.readout__u { font-size: .42em; font-weight: 600; letter-spacing: -0.02em; }
.readout.is-over { color: var(--sc-accent); }
.signoff {
  margin-top: clamp(.8rem, 2.4vh, 1.4rem); font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.25; letter-spacing: -0.01em;
  opacity: 0; transform: translate3d(0, 8px, 0); will-change: opacity, transform;
}
.signoff span { display: block; margin-top: .25rem; font-family: var(--sc-font-text); font-weight: 400; font-size: .82rem; letter-spacing: 0; color: var(--sc-ink-soft); }
.joblist-m { display: none; }

/* --------------------------------------------------------------------- príbeh (z revive-pribeh) */
.story { position: relative; max-width: 84rem; margin: 0 auto; padding: clamp(5rem, 11vh, 7rem) var(--gut) clamp(4rem, 9vh, 6rem); }
.story__head { margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.story__head .body { margin-top: .9rem; }
.pair--story { align-items: start; }
.chap__text { margin-top: 1.4rem; padding: 0 5%; }
.chap .lens:has(figcaption) + .chap__text { margin-top: 2.9rem; }
.chap__date {
  margin-bottom: .6rem; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1;
  letter-spacing: -0.04em; color: var(--sc-accent); font-variant-numeric: tabular-nums;
}
.chap__text > p:not(.chap__date):not(.chap__days) { margin-top: .6rem; color: var(--sc-ink-soft); max-width: 34rem; text-wrap: pretty; }
.chap__quote { margin-top: .9rem; }
.chap__quote p { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; }
.chap__quote cite { display: block; margin-top: .3rem; font-style: normal; font-size: .85rem; color: var(--sc-ink-soft); }
.chap--today { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.chap--today .chap__text { margin-top: 0; padding: 0; }
.chap--today .shot { aspect-ratio: 1.95; margin-bottom: 1.5rem; }
.chap__days { margin-top: 1.3rem; color: var(--sc-ink-soft); }
.chap__days b { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.04em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------- peak */
.peak__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; isolation: isolate; }
.peak__wall {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 50% at 30% 10%, #262320, transparent 70%), linear-gradient(180deg, #181614, #131110);
}
.peak__wall .led--1 { top: 13%; left: 52%; width: 40%; opacity: .5; }
.peak__wall .led--2 { top: 18%; left: 64%; width: 30%; opacity: .38; }
.peak__wall .led--3 { top: 10%; left: 64%; width: 24%; opacity: .3; }
.peak__spot {
  position: absolute; z-index: 1; right: -6vw; top: 12vh; width: 58vw; height: 84vh; opacity: 0; will-change: opacity;
  background: radial-gradient(closest-side, rgb(255 255 255 / .16), rgb(240 245 255 / .05) 60%, transparent);
}
.peak__head { position: absolute; z-index: 4; left: var(--gut); top: calc(var(--bar) + 4vh); max-width: 31rem; will-change: transform, opacity; }
.peak__head .body { margin-top: .8rem; }
.lamp { position: absolute; z-index: 3; left: 3vw; top: 33vh; width: 54vw; aspect-ratio: 1600 / 917; will-change: transform; transform-origin: 50% 50%; }
.lamp__frame { position: absolute; inset: 0; }
.lamp__art img, .haze img { position: absolute; display: block; max-width: none; }
.lamp__art > img:first-child { inset: 0; width: 100%; height: 100%; }
.haze { position: absolute; inset: 0; }
.haze img, .lamp__lit { will-change: opacity; }
.lamp__lit { opacity: 0; }
.lamp__pad {
  position: absolute; left: 0; top: 0; z-index: 2; height: auto; opacity: 0; pointer-events: none; will-change: transform, opacity;
  filter: drop-shadow(0 14px 18px hsl(var(--shadow-color) / .7));
}
.lamp__beam { position: absolute; z-index: -1; left: 87%; top: 51.5%; width: 56vw; height: 76vh; transform-origin: 0 50%; opacity: 0; will-change: transform, opacity; pointer-events: none; }
.lamp__beam svg, .lamp__beam img { display: block; width: 100%; height: 100%; }
.svc { position: absolute; z-index: 5; left: 58vw; right: var(--gut); top: 50%; transform: translateY(-40%); display: grid; gap: .3rem; }
.svc li { opacity: 0; will-change: transform, opacity; }
.svc a {
  display: grid; grid-template-columns: 2.1rem 1fr auto; column-gap: .8rem; align-items: baseline; padding: .2rem 0; text-decoration: none; color: inherit; border-radius: 6px;
}
.svc__name { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(.95rem, 1.22vw, 1.12rem); letter-spacing: -0.015em; line-height: 1.2; }
.svc__price { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(.92rem, 1.2vw, 1.05rem); color: var(--sc-accent); white-space: nowrap; align-self: baseline; font-variant-numeric: tabular-nums; }
.svc__no { font-family: var(--sc-font-display); font-weight: 700; font-size: .86rem; color: var(--sc-accent); font-variant-numeric: tabular-nums; text-align: right; opacity: .9; }
.svc__price--cert { display: inline-flex; align-self: center; }
.svc__price--cert svg { width: 1.15rem; height: 1.15rem; color: var(--sc-accent); }
.svc__line { grid-column: 2 / -1; font-size: .93rem; color: #cfc6b6; line-height: 1.38; }
.svc__last { margin-top: .4rem; padding-top: .6rem; box-shadow: inset 0 1px 0 rgb(217 187 140 / .3); }
@media (hover: hover) and (pointer: fine) { .svc a:hover .svc__name { color: var(--sc-accent); } }

/* --------------------------------------------------------------------- cenník */
.pricing { position: relative; max-width: 84rem; margin: 0 auto; padding: clamp(5rem, 11vh, 7rem) var(--gut) clamp(2rem, 5vh, 3rem); }
.pricing__head .body { margin-top: .9rem; max-width: 40rem; }
.pricing__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 5vh, 3rem); align-items: start; }
.pricing__col { display: grid; gap: 1rem; }
.pg {
  border-radius: 14px; scroll-margin-top: calc(var(--bar) + 1rem);
  background: linear-gradient(180deg, #2a2622, #1b1916 40%, #181613);
  box-shadow: inset 0 1px 0 rgb(255 240 210 / .14), inset 0 0 0 1px rgb(217 187 140 / .16), 0 14px 30px -16px hsl(var(--shadow-color) / .85);
}
.pg summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: .9rem 1.3rem; border-radius: 14px;
  font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: -0.015em;
}
.pg summary::-webkit-details-marker { display: none; }
.pg summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: -4px 4px 0 0;
  border-right: 2px solid var(--sc-accent); border-bottom: 2px solid var(--sc-accent); transform: rotate(45deg);
  transition: transform 180ms var(--sc-ease-out);
}
.pg[open] summary::after { transform: translateY(4px) rotate(225deg); }
@media (hover: hover) and (pointer: fine) { .pg summary:hover { color: var(--sc-accent); } }
.pg ul { padding: 0 1.3rem 1rem; }
.pg li { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; padding: .72rem 0; box-shadow: inset 0 1px 0 rgb(255 240 210 / .07); }
.pi b { display: block; font-weight: 600; line-height: 1.35; }
.pi small { display: block; margin-top: .2rem; font-size: .87rem; line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }
.pp { color: var(--sc-accent); font-weight: 700; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------- hodnotenia (z revive-domov) */
.voices { position: relative; max-width: 84rem; margin: 0 auto; padding: clamp(5rem, 11vh, 7rem) var(--gut) clamp(2rem, 5vh, 3rem); }
.voices__head .body { margin-top: .9rem; }
.voices__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2.5rem, 6vh, 4rem); }
.voice { padding-top: 1.2rem; box-shadow: inset 0 1px 0 rgb(217 187 140 / .35); }
.voice__year { font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1; letter-spacing: -0.04em; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.voice__q { margin-top: .9rem; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }
.voice footer { margin-top: 1rem; color: var(--sc-ink-soft); font-size: .92rem; }
.voices__more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(3rem, 7vh, 4.5rem); align-items: start; }
.rating { font-size: 1.1rem; line-height: 1.5; max-width: 30rem; }
.rating strong { font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.voices__links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.voices__links a { color: var(--sc-accent); font-weight: 600; }
.regulars__list { margin-top: 1rem; display: grid; gap: 1.05rem; }
.regulars__list li { display: grid; gap: .12rem; }
.regulars__list b { font-weight: 700; font-size: .95rem; }
.regulars__list span { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }
.regulars__list small { color: var(--sc-ink-soft); font-size: .86rem; }

/* --------------------------------------------------------------------- poukaz (revive-svetlo-zlata) */
.gift { position: relative; isolation: isolate; padding: clamp(4rem, 10vh, 7rem) var(--gut) clamp(3rem, 7vh, 5rem); overflow: clip; }
.close__beam {
  position: absolute; z-index: -1; left: -20vw; top: -30vh; width: 110vw; height: 150vh; opacity: 0; will-change: opacity; pointer-events: none;
  background: radial-gradient(ellipse 42% 34% at 42% 46%, rgb(255 255 255 / .12), rgb(240 245 255 / .04) 55%, transparent 75%);
}
.gift__grid { max-width: 84rem; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.voucher-wrap { max-width: 40rem; scroll-margin-top: calc(var(--bar) + 1rem); }
.gift__lens { aspect-ratio: 1.75; }

/* the ticket: black card with a gold foil edge, like his price list */
.voucher {
  position: relative; display: grid; grid-template-columns: 1fr auto; color: var(--sc-ink); border-radius: 14px;
  background: linear-gradient(135deg, #27231e, #171411 55%, #1f1b17);
  box-shadow: inset 0 0 0 1px rgb(217 187 140 / .6), inset 0 0 0 5px #1a1714, inset 0 0 0 6px rgb(217 187 140 / .22),
              0 4px 8px hsl(var(--shadow-color) / .5), 0 26px 50px -18px hsl(var(--shadow-color) / .9);
  transform: rotate(-1.6deg);
}
.voucher__main { padding: 1.6rem 1.4rem 1.5rem 1.8rem; min-width: 0; }
.voucher__logo { width: min(15rem, 100%); height: auto; }
.voucher__title { margin-top: 1.1rem; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.01em; }
.voucher__value {
  display: flex; align-items: baseline; gap: .2em; margin-top: .5rem; min-height: 1.05em;
  font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.8rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.04em;
  color: var(--sc-accent); font-variant-numeric: tabular-nums;
}
.voucher__input {
  width: 3.3ch; padding: 0; border: 0; border-bottom: 2px solid rgb(217 187 140 / .6); border-radius: 0; background: transparent;
  font: inherit; letter-spacing: inherit; color: inherit; -moz-appearance: textfield; appearance: textfield;
}
.voucher__input::-webkit-outer-spin-button, .voucher__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.voucher__input::placeholder { color: rgb(217 187 140 / .45); }
.voucher__pick { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.voucher__pick button {
  min-height: 40px; padding: 0 .7rem; border-radius: 8px; border: 0; cursor: pointer; font-weight: 600; font-size: .92rem;
  color: var(--sc-ink); background: rgb(255 240 210 / .04); box-shadow: inset 0 0 0 1px rgb(217 187 140 / .35);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.voucher__pick button[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .voucher__pick button:not([aria-pressed="true"]):hover { background: rgb(217 187 140 / .14); } }
.voucher__pick button:active { transform: scale(.97); }
.voucher__stub {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem;
  padding: 1.5rem 1.4rem 1.5rem 1.5rem; min-width: 10rem;
  border-left: 2px dashed rgb(217 187 140 / .4); font-size: .9rem; color: var(--sc-ink-soft); line-height: 1.4;
}
.voucher__stub::before, .voucher__stub::after {
  content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--sc-canvas);
  box-shadow: inset 0 0 0 1px rgb(217 187 140 / .45);
}
.voucher__stub::before { top: -11px; } .voucher__stub::after { bottom: -11px; }
.voucher__crest { width: 46px; height: auto; margin-bottom: auto; }
.voucher__tel { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.26rem; letter-spacing: -0.02em; color: var(--sc-ink); white-space: nowrap; }
.voucher__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.voucher__note { margin-top: 1.1rem; color: var(--sc-ink-soft); max-width: 36rem; font-size: .96rem; }
.voucher__note a { color: var(--sc-ink); }

/* --------------------------------------------------------------------- rezervácia: zákazkový list (z revive-domov) */
.order {
  position: relative; max-width: 84rem; margin: 0 auto; padding: clamp(3rem, 8vh, 5rem) var(--gut);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.order__form .body { margin-top: .9rem; }
.order__form > .f { margin-top: 1.3rem; }
.f { display: grid; gap: .35rem; min-width: 0; }
.f--wide { grid-column: 1 / -1; }
.f > span { font-size: .9rem; font-weight: 600; }
.f i { font-style: normal; font-weight: 400; color: var(--sc-ink-soft); }
.f input, .f select, .f textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border: 0; border-radius: var(--r);
  background: #0f0e0c; color: var(--sc-ink); box-shadow: inset 0 0 0 1px rgb(255 240 210 / .16);
  transition: box-shadow 140ms var(--sc-ease-out);
}
.f textarea { resize: vertical; min-height: 92px; line-height: 1.45; }
.f select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--sc-accent) 50%), linear-gradient(135deg, var(--sc-accent) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat;
}
.f select option, .f select optgroup { background: #1b1916; color: var(--sc-ink); }
.f input::placeholder, .f textarea::placeholder { color: #8a8272; } /* N42: kontrast 5,07 : 1 na poli #0f0e0c (predtým #7f7768, 4,36 : 1) */
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.f input[type="date"] { color-scheme: dark; }
.f [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #e7a07a; }

.picks { margin: 1.3rem 0 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.picks legend { width: 100%; padding: 0; margin-bottom: .55rem; font-size: .9rem; font-weight: 600; }
.picks label { position: relative; cursor: pointer; }
.picks input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picks span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 .85rem; border-radius: 8px;
  font-weight: 600; font-size: .92rem; color: var(--sc-ink); background: rgb(255 240 210 / .04); box-shadow: inset 0 0 0 1px rgb(217 187 140 / .35);
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.picks span::before { content: "-"; margin-right: .4em; color: var(--sc-ink-soft); }
.picks input:checked + span { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }
.picks input:checked + span::before { color: var(--sc-accent-ink); }
.picks input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .picks label:hover input:not(:checked) + span { background: rgb(217 187 140 / .14); } }
.order__two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.3rem; }
.order__err { margin-top: 1rem; color: #f0b497; font-weight: 600; font-size: .95rem; }
.order__btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.order__small { margin-top: 1rem; font-size: .9rem; color: var(--sc-ink-soft); }
.order__small a { color: var(--sc-ink); }

/* the job sheet, written in his format while the visitor ticks */
.sheet { padding-top: .4rem; min-width: 0; }
.sheet__card {
  padding: clamp(1.4rem, 3vw, 2.1rem); border-radius: 16px; transform: rotate(1.2deg);
  background: linear-gradient(180deg, #26221e, #191714 50%, #161412);
  box-shadow: inset 0 0 0 1px rgb(217 187 140 / .5), inset 0 0 0 5px #1a1714, inset 0 0 0 6px rgb(217 187 140 / .18),
              0 4px 8px hsl(var(--shadow-color) / .5), 0 26px 50px -18px hsl(var(--shadow-color) / .9);
}
.sheet__head { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--sc-accent); overflow-wrap: anywhere; }
.sheet__lines { margin-top: .9rem; display: grid; gap: .25rem; min-height: 2rem; }
.sheet__lines li::before { content: "-"; }
.sheet__lines .sheet__empty { color: var(--sc-ink-soft); }
.sheet__lines .sheet__empty::before { content: ""; }
.sheet__last { margin-top: .25rem; font-weight: 700; }
.sheet__foot { margin-top: 1.1rem; padding-top: .8rem; box-shadow: inset 0 1px 0 rgb(217 187 140 / .2); font-size: .9rem; color: var(--sc-ink-soft); }
.sheet__note { margin-top: 1.2rem; font-size: .88rem; color: var(--sc-ink-soft); }

/* --------------------------------------------------------------------- kontakt a finále (z revive-blackyellow) */
.finale { position: relative; padding: clamp(3rem, 8vh, 5rem) var(--gut) 0; }
.finale__grid { max-width: 84rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.finale__lens { aspect-ratio: 1.75; }
.finale__logo { display: block; width: min(100%, 25rem); height: auto; }
.finale__line { margin-top: 1.5rem; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.25rem, 2.1vw, 1.8rem); line-height: 1.2; letter-spacing: -0.02em; }
.finale__tel {
  display: block; margin-top: .7rem; text-decoration: none; white-space: nowrap; color: var(--sc-ink);
  font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.3rem, 4.6vw, 4.2rem); letter-spacing: -0.04em; line-height: 1.05;
}
@media (hover: hover) and (pointer: fine) { .finale__tel:hover { color: var(--sc-accent); } }
.finale__btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.finale__free { margin-top: 1rem; color: var(--sc-ink-soft); font-size: .95rem; max-width: 30rem; text-wrap: pretty; }
.finale__free a { color: var(--sc-ink); }
.finale .foot { margin-top: clamp(3rem, 8vh, 5rem); }
.where { margin-top: clamp(2.4rem, 6vh, 3.4rem); display: grid; gap: 1.8rem; }

.map { position: relative; }
.map__link { position: relative; display: block; border-radius: var(--r); overflow: hidden; aspect-ratio: 1.5; box-shadow: inset 0 0 0 1px rgb(255 240 210 / .08), 0 18px 36px -18px hsl(var(--shadow-color) / .9); }
.map__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .map__link:hover img { transform: scale(1.02); } }
.map__pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 6px rgb(217 187 140 / .25), 0 3px 6px hsl(var(--shadow-color) / .8); }
.map figcaption { margin-top: .9rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; align-items: baseline; }
.map figcaption a { font-weight: 600; color: var(--sc-accent); }
.map figcaption span { flex-basis: 100%; font-weight: 400; font-size: .75rem; color: var(--sc-ink-soft); }

.contact__lines { margin-top: 1.8rem; display: grid; gap: .8rem; }
.where .contact__lines { margin-top: 2rem; }
.contact__lines div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; }
.contact__lines dt { color: var(--sc-ink-soft); font-size: .92rem; padding-top: .1rem; }
.contact__lines dd a { color: var(--sc-ink); }
.foot {
  max-width: 84rem; margin: clamp(4rem, 9vh, 6rem) auto 0; padding: 1.6rem 0 2rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center;
  box-shadow: inset 0 1px 0 rgb(217 187 140 / .16); font-size: .85rem; color: var(--sc-ink-soft);
}
.foot__crest { width: 26px; height: auto; }
.foot__mark { color: var(--sc-ink); margin-right: auto; }


.where .contact__lines { margin-top: 0; }
.contact__lines div { grid-template-columns: 9.5rem 1fr; }

/* =================================================================== phone */
@media (max-width: 860px) {
  :root { --bar: 56px; }
  body { font-size: 1rem; }
  .bar { gap: .6rem; }
  .mark__word, .switch__name { display: none; }
  .mark__crest { height: 34px; }
  .switch__dial { transform: scale(.9); margin: 0 -6px; }
  .call__full { display: none; } .call__short { display: inline; }
  .call { min-height: 40px; padding: 0 .9rem; }

  .hero__copy { right: var(--gut); top: calc(var(--bar) + 1.6rem); }
  .hero__title { font-size: 2.1rem; }
  .hero__lead { font-size: 1rem; margin-top: .9rem; }
  .hero__btns { margin-top: 1.2rem; gap: .55rem; }
  .hero__btns .btn { min-height: 46px; padding: 0 1rem; }
  .hero__lens { width: 112vw; right: -18vw; bottom: -3svh; aspect-ratio: 1.02; }
  .hero__lens .lens__slide { object-position: var(--pos-m, 14% 64%); }
  .hero__pad { width: 46vw; right: -10vw; bottom: -7svh; }
  .hero__wall .led--1 { top: 52%; left: 34%; width: 62%; }
  .hero__wall .led--2 { top: 56.5%; left: 50%; width: 48%; }
  .hero__wall .led--3 { display: none; }
  .hero__wall .led--4 { top: 11.5%; left: 50%; width: 46%; }

  .pair { grid-template-columns: 1fr; gap: 3.2rem; margin-bottom: 3.2rem; }
  .shot { width: 88%; aspect-ratio: 1.75; }
  .shot.lens--r { justify-self: end; }
  .pair--svc { gap: 3rem; margin-bottom: 3rem; }
  .svc-card .shot { width: 92%; }
  .svc-card:nth-child(2) .shot { margin-left: auto; }
  .svc-card__text { margin-top: 1.2rem; padding: 0; }
  .ppf { grid-template-columns: 1fr; gap: 1.4rem; }
  .ppf__lens { order: -1; width: 92%; justify-self: end; margin-bottom: 2.2rem; }
  .more { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.2rem; }

  /* skúška časom: the five fields become five rows */
  .time { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 3.5rem; }
  .time__now { font-size: 2.5rem; margin-top: 1rem; }
  .time__stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .time__stops button { min-height: 42px; padding: 0 .4rem; font-size: .88rem; }
  .time__event { min-height: 9.4em; margin-top: 1.1rem; }
  .time__quote { font-size: .94rem; }
  .panel { grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(0, 1fr)); aspect-ratio: auto; height: clamp(300px, 86vw, 360px); border-radius: 14px; }
  .panel__led i:nth-child(1), .panel__led i:nth-child(2) { display: none; }
  .field { grid-template-columns: 8.6rem minmax(0, 1fr) 5.2rem; grid-template-rows: 1fr; align-items: center; }
  .field + .field { box-shadow: inset 0 1px 0 rgb(217 187 140 / .16); }
  .field__name { padding: 0 0 0 .8rem; gap: .05rem; }
  .field__name b { font-size: .76rem; }
  .field__name span { font-size: .7rem; }
  .field__lak { margin: .25rem .2rem; height: calc(100% - .5rem); }
  .field__state { padding: 0 .75rem 0 0; justify-content: flex-end; font-size: .7rem; white-space: nowrap; gap: .3rem; }
  .field__state::before { width: 7px; height: 7px; }
  .months { padding: 20px 0 18px; gap: 1.5px; }
  .months b { height: 6px; }
  .months span { font-size: .68rem; }
  .time__foot { flex-direction: column; align-items: flex-start; gap: .9rem; }

  /* reel: header, card with the readout beside it, the 110 line under; the job list follows the section */
  .reel__stage {
    grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "h h" "media side" "end end" "sign sign";
    align-content: center; align-items: end; gap: .9rem 1rem; padding-top: calc(var(--bar) + 1rem); padding-bottom: 1rem;
  }
  .reel__text, .reel__end { display: contents; }
  .reel__src, .reel__car, .reel__text > .jobs { display: none; }
  .reel__h { grid-area: h; margin: 0; font-size: 1.65rem; }
  .reel__media { grid-area: media; }
  .reel__card { height: min(calc(100svh - var(--bar) - 300px), calc((100vw - 2 * var(--gut) - 7.6rem) * 16 / 9)); }
  .meter { margin-top: 14px; }
  .readout { grid-area: side; align-self: end; justify-self: end; text-align: right; margin-bottom: 40px; font-size: clamp(2.7rem, 14vw, 4rem); white-space: normal; }
  .readout__u { display: block; font-size: .5em; }
  .extra { grid-area: end; }
  .extra__line { font-size: 1.04rem; max-width: none; }
  .extra__src { font-size: .78rem; }
  .signoff { grid-area: sign; margin-top: 0; font-size: 1rem; }
  .joblist-m { display: block; max-width: 84rem; margin: 0 auto; padding: 2.4rem var(--gut) .5rem; }
  .joblist-m__h { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.15; }
  .joblist-m__head { margin-top: .5rem; color: var(--sc-accent); font-size: .88rem; overflow-wrap: anywhere; }
  .joblist-m .jobs { columns: 1; margin-top: .8rem; font-size: .95rem; }
  .joblist-m__x { margin-top: .5rem; color: var(--sc-accent); font-family: var(--sc-font-display); font-weight: 500; font-size: 1.02rem; line-height: 1.3; }

  .story { padding-top: 3.5rem; }
  .chap .shot.lens--r { margin-left: auto; }
  .chap__text { margin-top: 1.2rem; padding: 0; }
  .chap .lens:has(figcaption) + .chap__text { margin-top: 2.6rem; }
  .chap--today { grid-template-columns: 1fr; gap: 1.4rem; }
  .chap--today .shot { order: -1; width: 92%; justify-self: end; aspect-ratio: 1.75; margin-bottom: 1.6rem; }

  .peak__head { right: var(--gut); top: calc(var(--bar) + 1.2rem); }
  .peak__head .h2 { font-size: 1.8rem; }
  .peak__head .body { font-size: .95rem; }
  .peak__wall .led { display: none; }
  .lamp { left: 3vw; width: 94vw; top: 40svh; }
  .lamp__beam { left: 52%; top: 82%; width: 62svh; height: 120vw; }
  .peak__spot { left: -10vw; right: auto; width: 120vw; top: 30svh; height: 70svh; }
  /* N07 (15. 10. 2026): zoznam začína až pod zdvihnutou lampou (lišta + 10 px + výška lampy 94vw × 917/1600), na úzkych telefónoch ostáva 13,5rem */
  .svc { left: var(--gut); right: var(--gut); top: max(calc(var(--bar) + 13.5rem), min(calc(var(--bar) + 10px + 94vw * 917 / 1600 - 5px), calc(100svh - 17.5rem))); transform: none; gap: .22rem; }
  .svc a { grid-template-columns: 1.6rem 1fr auto; column-gap: .55rem; padding: .12rem 0; }
  .svc__no { font-size: .74rem; }
  .svc__name { font-size: .86rem; line-height: 1.22; }
  .svc__price { font-size: .8rem; }
  .svc__line { font-size: .82rem; line-height: 1.3; }
  .svc__last { margin-top: .15rem; padding-top: .45rem; }

  .voices { padding-top: 3.5rem; }
  .voices__pair, .voices__more { grid-template-columns: 1fr; gap: 2.2rem; }
  .voice__q { font-size: 1.3rem; }

  .pricing__groups { grid-template-columns: 1fr; }
  .pg ul { padding: 0 1rem .9rem; }
  .pg summary { padding: .8rem 1rem; }

  .gift__grid { grid-template-columns: 1fr; gap: 3rem; }
  .gift__lens { width: 92%; justify-self: end; }
  .voucher { grid-template-columns: 1fr; transform: rotate(-1deg); }
  .voucher__main { padding: 1.4rem 1.2rem 1.2rem 1.5rem; }
  .voucher__stub { border-left: 0; border-top: 2px dashed rgb(217 187 140 / .4); flex-direction: row; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; padding: 1rem 1.2rem 1.2rem 1.5rem; min-width: 0; }
  .voucher__stub::before, .voucher__stub::after { top: -12px; bottom: auto; }
  .voucher__stub::before { left: -11px; } .voucher__stub::after { left: auto; right: -11px; }
  .voucher__crest { width: 34px; margin: 0; }

  .order { grid-template-columns: 1fr; gap: 2.4rem; }
  .order__two { grid-template-columns: 1fr; }
  .sheet { position: static; }
  .sheet__card { transform: rotate(.8deg); }

  .finale__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .finale__lens { width: 92%; justify-self: end; }
  .where { margin-top: 2.4rem; }
  .map__link { aspect-ratio: 1.6; }
  .contact__lines div { grid-template-columns: 1fr; gap: .1rem; }
  .finale__logo { width: min(100%, 20rem); }
  .foot { gap: .4rem 1rem; margin-top: 2.6rem; padding: 1.2rem 0 1.4rem; }
  .foot__credit { flex-basis: 100%; }
}
/* short desktops (Matěj's 150 % display is about 1280×600) */
@media (min-width: 861px) and (max-height: 760px) {
  .peak__head { top: calc(var(--bar) + 2.6vh); }
  .peak__head .body { max-width: 40rem; }
  .lamp { width: min(54vw, 84vh); top: calc(var(--bar) + 11rem); }
  .svc { gap: .16rem; }
  .svc__name { font-size: clamp(.92rem, 1.25vw, 1.06rem); }
  .svc__line { font-size: .88rem; }
  .reel__src { display: none; }
  .reel__h { margin-top: 0; font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
  .reel__car { margin-top: .6rem; }
  .reel__car b { font-size: .98rem; }
  .jobs { margin-top: .7rem; font-size: .9rem; line-height: 1.34; }
  .jobs li { margin-bottom: .12rem; }
  .readout { font-size: clamp(3rem, 5.6vw, 5rem); }
  .extra__line { font-size: clamp(.98rem, 1.35vw, 1.2rem); }
  .signoff { font-size: 1rem; }
}
/* short phones: the projected list needs every pixel */
@media (max-width: 860px) and (max-height: 700px) {
  .hero__btns .btn--ghost { display: none; }
  .peak__head .body { display: none; }
  .lamp { width: 72vw; left: 14vw; }
  .svc { top: calc(var(--bar) + 10.6rem); gap: .08rem; }
  .svc__line { display: none; }
  .svc__name { font-size: .8rem; }
  .svc__price { font-size: .74rem; }
  .reel__h { font-size: 1.4rem; }
  .reel__card { height: min(calc(100svh - var(--bar) - 250px), calc((100vw - 2 * var(--gut) - 7rem) * 16 / 9)); }
  .extra__src { display: none; }
}

/* ========================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero [data-plane], .lamp, .peak__head, .lamp__pad { transform: none !important; }
  .lens__on { clip-path: none !important; }
  .reel { height: auto; }
  .reel__stage { position: relative; height: auto; min-height: 100vh; min-height: 100svh; }
  .signoff { opacity: 1; transform: none; }
}
.svc li:focus-within { opacity: 1 !important; }

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

/* ======================================== ostrá verzia (revive-web, 14. 10. 2026): len doplnky, nič zo schváleného vzhľadu sa nemení */
/* mapa: obrázok je náš, Google sa načíta až po kliknutí na Zobraziť mapu */
.map__box { position: relative; }
.map__load {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 1;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 0; border-radius: var(--r); cursor: pointer;
  font: 600 .95rem/1 var(--sc-font-text); color: var(--sc-ink); background: rgb(19 17 15 / .9);
  box-shadow: inset 0 0 0 1.5px rgb(217 187 140 / .6), 0 8px 18px -8px hsl(var(--shadow-color) / .9);
  transition: transform 140ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .map__load:hover { box-shadow: inset 0 0 0 1.5px rgb(217 187 140 / 1), 0 8px 18px -8px hsl(var(--shadow-color) / .9); } }
.map__load:active { transform: translateY(1px) scale(.98); }
.map__live { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 1.5; background: var(--sc-surface); box-shadow: inset 0 0 0 1px rgb(255 240 210 / .08), 0 18px 36px -18px hsl(var(--shadow-color) / .9); }
.map__live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map figcaption .map__note { line-height: 20px; margin-top: -0.2px; } /* riadok 20 px + medzera 3 px = celé px, nič pod mapou sa neposunie o zlomok */
.map figcaption span a { font-weight: 400; color: var(--sc-ink-soft); }
/* pätička: odkaz na ochranu osobných údajov, firemné údaje (skryté, kým nie sú doplnené) */
.foot__links { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem 1.5rem; }
.foot__privacy, .foot__design { color: var(--sc-ink-soft); }
.foot__imprint { color: var(--sc-ink-soft); margin-right: auto; }
@media (max-width: 860px) {
  .map__live { aspect-ratio: 1.6; }
  .foot__links { flex-direction: column; align-items: flex-start; }
}
/* Skúška časom: veta klienta o kontrole keramiky (14. 10. 2026); výška celá v px, aby sa nič pod ňou neposunulo o zlomok pixela */
.time__check { margin-top: 6px; color: var(--sc-ink); font-size: .85rem; line-height: 20px; max-width: 30rem; text-wrap: pretty; }
/* desktop: veta visí pod poznámkou mimo toku (v spodnom odsadení sekcie), takže výška sekcie ostáva 624 px ako v schválenom návrhu
   a nadpis, panel aj tlačidlo sú na rovnakých px (inak by centrovaná mriežka posunula ľavý stĺpec o 19,5 px nadol) */
@media (min-width: 861px) { .time__notes { position: relative; } .time__check { position: absolute; left: 0; top: 100%; margin-top: 6px; } }

/* =================================================================== NAŠE REELS (ostrá verzia, 14. 10. 2026)
   Bez pinu, prirodzený tok. Karty = čočka svetlometu postavená na výšku (ako jeho reel vyššie), 9:16.
   Všetky výšky v celých px (round), aby sa sekcie pod ňou neposunuli o zlomok pixela. */
.rl { position: relative; max-width: 84rem; margin: 0 auto; padding: 96px var(--gut) 32px; }
.rl__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; margin-bottom: 40px; }
.rl__h { line-height: 1.04; line-height: round(nearest, 1.04em, 1px); }
.rl__body { margin-top: 14px; line-height: 27px; }
.rl__nav { display: flex; align-items: center; gap: 10px; }
.rl__arrow {
  width: 48px; height: 48px; border: 0; border-radius: var(--r); cursor: pointer; background: transparent; color: var(--sc-ink);
  box-shadow: inset 0 0 0 1.5px rgb(217 187 140 / .5); font: 600 24px/1 var(--sc-font-text);
  transition: transform 140ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .rl__arrow:hover { box-shadow: inset 0 0 0 1.5px rgb(217 187 140 / .95); } }
.rl__arrow:active { transform: translateY(1px) scale(.98); }
.rl__arrow:disabled { opacity: .35; cursor: default; }
.rl__rail {
  --rl-gap: 24px;
  display: flex; gap: var(--rl-gap); margin: 0; padding: 0 0 8px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
  container-type: inline-size;
}
.rl__item { flex: 0 0 calc((100cqw - 3 * var(--rl-gap)) / 4); min-width: 0; scroll-snap-align: start; }
.rl__card {
  position: relative; width: 100%;
  aspect-ratio: 9 / 16;
  height: round(nearest, calc((100cqw - 3 * var(--rl-gap)) / 4 * 16 / 9), 1px);
}
.rl__card .lens__clip { background: #0e0c0b; }
.rl__card .lens__shadow { left: 10%; right: 10%; bottom: -3%; height: 10%; }
.rl__poster, .rl__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rl__video { opacity: 0; transition: opacity 260ms var(--sc-ease-out); }
.rl__video.is-on { opacity: 1; }
.rl__toggle { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 18%; }
.rl__toggle:focus-visible { outline-offset: -6px; }
.rl__icon {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgb(19 17 15 / .72); box-shadow: inset 0 0 0 1.5px rgb(217 187 140 / .75);
  opacity: 0; transform: scale(.9); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
.rl__icon::before { content: ""; position: absolute; left: 22px; top: 18px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--sc-accent); }
.rl__item.is-playing .rl__icon::before { left: 20px; top: 19px; width: 5px; height: 18px; border: 0; background: var(--sc-accent); box-shadow: 10px 0 0 var(--sc-accent); }
/* ikona: vždy, keď video stojí (poster, pauza, reduced motion); pri prehrávaní len pri fokuse / hover */
.rl__item:not(.is-playing) .rl__icon, .rl__toggle:focus-visible .rl__icon { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .rl__toggle:hover .rl__icon { opacity: 1; transform: none; } }
.rl__item.is-auto:not(.is-playing) .rl__icon { opacity: 0; }   /* kým sa video samo spúšťa, nech neblikne tlačidlo */
.rl__item .rl__toggle:focus-visible .rl__icon { opacity: 1; transform: none; }
.rl__cap { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-size: 16px; line-height: 24px; }
.rl__cap b { font-weight: 600; }
.rl__cap time { color: var(--sc-ink-soft); font-size: 14px; }
.rl__line { margin-top: 4px; color: var(--sc-ink-soft); font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.rl__link { display: block; width: fit-content; margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--sc-accent); }

@media (max-width: 860px) {
  .rl { padding: 64px 0 16px; }
  .rl__head { padding: 0 var(--gut); margin-bottom: 28px; }
  .rl__body { line-height: 26px; }
  .rl__arrow { display: none !important; }
  .rl__rail { --rl-gap: 16px; padding: 0 var(--gut) 8px; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .rl__rail::-webkit-scrollbar { display: none; }
  .rl__item { flex-basis: 62vw; max-width: 300px; }
  .rl__card { height: round(nearest, calc(min(62vw, 300px) * 16 / 9), 1px); }
}
@media (prefers-reduced-motion: reduce) { .rl__video { transition: none; } .rl__rail { scroll-behavior: auto; } }

/* =================================================================== doladenie 15. 10. 2026 */
/* N05: fotky v čočkách na najetie myšou: fotka sa vo svojom ráme jemne priblíži, popisok sa zdvihne o 4 px.
   Vlastnosť scale (nie transform), lebo setShot v site.js píše fotke inline transform. Bez filtra: fotky sa nestmavujú ani neprefarbujú. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lens:has(.lens__on) .lens__img { transition: scale .5s var(--sc-ease-out); }
  .lens:has(.lens__on):hover .lens__img { scale: 1.04; }
  .lens:has(.lens__on) figcaption { transition: translate .5s var(--sc-ease-out); }
  .lens:has(.lens__on):hover figcaption { translate: 0 -4px; }
}

/* N06: telefón so zníženým pohybom: vrchol bez pinu, nadpis, svetlomet a zoznam služieb pod sebou (overflow: clip zo .peak__stage ostáva).
   Stage ostáva sticky (scrollcraft.js to kontroluje a inak píše varovanie do konzoly); pri .peak s height: auto nemá kam ísť, takže stojí. */
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .peak { height: auto !important; }
  .peak__stage { height: auto; display: flex; flex-direction: column; gap: 1.6rem; padding: calc(var(--bar) + 1.5rem) var(--gut) 3rem; }
  .peak__head, .lamp, .svc { position: relative; top: auto; left: auto; right: auto; }
  .lamp { width: 100%; }
}

/* N02: pás skutočných hodnotení (reviews.js + reviews.json); šípky ako pri reels, na telefóne len posun prstom a počítadlo */
.rv { margin-top: clamp(3rem, 7vh, 4.5rem); min-width: 0; }
.rv__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 24px; }
.rv__src { margin-top: .4rem; color: var(--sc-ink-soft); font-size: .92rem; }
.rv__nav { display: flex; align-items: center; gap: 10px; }
.rv__count { margin-right: 6px; font-family: var(--sc-font-display); font-weight: 600; font-size: .92rem; color: var(--sc-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rv:not(.is-live) .rv__nav { visibility: hidden; }
.rv__track {
  --rv-gap: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; gap: var(--rv-gap); margin: 0; padding: 0 0 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rv__track::-webkit-scrollbar { display: none; }
.rv__track:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: 4px; }
.rv__item { flex: 0 0 calc((100% - 2 * var(--rv-gap)) / 3); min-width: 0; scroll-snap-align: start; padding-top: 1.2rem; box-shadow: inset 0 1px 0 rgb(217 187 140 / .35); }
.rv__q { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.35; letter-spacing: -0.01em; text-wrap: pretty; overflow-wrap: anywhere; }
.rv__who { margin-top: .7rem; color: var(--sc-ink-soft); font-size: .88rem; }

/* N03: čo sa dá mať za zvolenú sumu poukazu: riadky ako v cenníku (.pi, .pp), karta ako skupina cenníka (.pg) */
.vtip {
  margin-top: 2rem; padding: 1rem 1.3rem 1.1rem; border-radius: 14px;
  background: linear-gradient(180deg, #2a2622, #1b1916 40%, #181613);
  box-shadow: inset 0 1px 0 rgb(255 240 210 / .14), inset 0 0 0 1px rgb(217 187 140 / .16), 0 14px 30px -16px hsl(var(--shadow-color) / .85);
}
.vtip__h { padding: .2rem 0 .45rem; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.25rem); letter-spacing: -0.015em; }
.vtip li { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; padding: .72rem 0; box-shadow: inset 0 1px 0 rgb(255 240 210 / .07); }
.vtip__note { margin-top: .3rem; padding-top: .7rem; box-shadow: inset 0 1px 0 rgb(255 240 210 / .07); font-size: .87rem; line-height: 1.45; color: var(--sc-ink-soft); text-wrap: pretty; }

/* N04: údaje do správy k poukazu (všetko nepovinné), polia ako v zákazkovom liste (.f, .order__two) */
.vform { margin: 2rem 0 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 1rem; }
.vform legend { padding: 0; margin-bottom: .2rem; font-size: .9rem; font-weight: 600; }
.vform legend i { font-style: normal; font-weight: 400; color: var(--sc-ink-soft); }
.vform .order__two { margin-top: 0; }
.vform .f textarea { min-height: 72px; }
.vform + .voucher__actions { margin-top: 1.3rem; }

/* Poukaz na PC (dooprava 15. 10. 2026): fotka zázemia zase pri lístku ako v schválenom návrhu. Pod lístok pribudli tip, polia a tlačidlá
   (N03, N04), preto fotka už nie je na strede celého stĺpca, ale v riadku lístka (stĺpec lístka je podmriežka, každý blok jeden riadok).
   Záporný spodný okraj posunie stred fotky o 5,375rem pod stred lístka (ako keď pod lístkom boli len tlačidlá a poznámka)
   a zároveň fotka nenaťahuje riadok lístka. Mobil bez zmeny. */
@media (min-width: 861px) {
  @supports (grid-template-rows: subgrid) {
    .gift__grid { row-gap: 0; }
    .voucher-wrap { grid-row: span 6; display: grid; grid-template-rows: subgrid; }
    .gift__lens { grid-row: 1; grid-column: 2; margin-bottom: -10.75rem; }
  }
}

@media (max-width: 860px) {
  .rv { margin-top: 2.6rem; }
  .rv__item { flex-basis: 84%; }
  .vtip { padding: .9rem 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .rv__track { scroll-behavior: auto; } }

/* N12 (15. 10. 2026): telefón na šírku (napr. 844×390): text hera vľavo mimo fotky, čočka vpravo, všetkých 10 služieb vo vrchole na obrazovke, karta reelu pod nadpisom. Na výšku a na PC sa nič nemení.
   Vrchol len bez zníženého pohybu: so zníženým pohybom ostáva rozloženie pod sebou z N06 (inak by sa zoznam posunul doprava a orezal). */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 0; }
  .hero__copy { right: auto; max-width: 42vw; top: calc(var(--bar) + 1.2rem); }
  .hero__lens { width: min(58vw, 128svh); aspect-ratio: 2.05; right: -3vw; bottom: -4svh; }
  .hero__lens .lens__slide { object-position: var(--pos, 50% 50%); }
  .reel__card { height: calc(100svh - var(--bar) - 10rem); }
  .signoff, .extra__src { display: none; }
}
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) and (prefers-reduced-motion: no-preference) {
  .lamp { width: 38vw; left: 3vw; }
  .svc { left: 45vw; right: var(--gut); top: calc(var(--bar) + .4rem); gap: 0; }
  .svc a { padding: .06rem 0; }
  .svc__name { font-size: .78rem; line-height: 1.18; }
  .svc__line { display: none; }
}

/* PC: the service list sits right in the beam at the end of the pin; a dark halo keeps the gold numbers,
   names and the focus ring readable there (colours, type and the beam itself unchanged; phone unchanged) */
@media (min-width: 861px) {
  .svc a { text-shadow: 0 0 2px rgb(19 17 15 / .9), 0 0 10px rgb(19 17 15 / .75); }
  .svc__no { opacity: 1; text-shadow: 0 0 1px rgb(19 17 15), 0 0 4px rgb(19 17 15 / .95), 0 0 10px rgb(19 17 15 / .85); }
  .svc a:focus-visible { box-shadow: 0 0 0 5px rgb(19 17 15 / .85); }
}

/* in-page links and the switch move focus to the target (site.js focusAt); no ring after a mouse click */
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* N35 (15. 10. 2026): rada pod „Poslať e-mailom“ (skrytá, kým sa neklikne): tlačidlo Skopírovať text vyzerá ako odkaz */
.order__copy { font: inherit; color: var(--sc-accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

/* N37 (15. 10. 2026): telefón: dotykové plochy aspoň 44 px. Len neviditeľné rozšírenie (padding so záporným okrajom, prázdne ::after);
   texty, tlačidlá ani riadky sa neposúvajú. Odkazy .voices__links (26 px) ostávajú. */
@media (max-width: 860px) {
  .map figcaption > a, .contact__lines dd a, .foot__privacy, .foot__design { display: inline-block; padding-block: 11px; margin-block: -11px; }
  /* riadok „Mapa © prispievatelia OpenStreetMap“ pod odkazom na mapu: jeho text nechytá dotyk (spodok plochy patrí odkazu na mapu), odkaz OpenStreetMap áno */
  .map figcaption > span:not(.map__note) { pointer-events: none; }
  .map figcaption > span a { pointer-events: auto; }
  /* dole len 8 px = spodné odsadenie pásu reels, inak by pás šiel o 3 px posúvať aj zvislo; relative, aby horné 4 px nezakryl riadok popisku nad ním */
  .rl__link { position: relative; padding-block: 12px 8px; margin: -4px 0 -8px; }
  .call, .time__stops button, .voucher__pick button, .mark { position: relative; }
  .call::after, .time__stops button::after, .voucher__pick button::after { content: ""; position: absolute; inset: -2px 0; }
  .picks input { top: -1px; height: calc(100% + 2px); }
  /* logo 30 px: plocha o 7 px do strán cez ::after (min-width by na 320 px posunul prepínač a Zavolať o 5 px) */
  .mark::after { content: ""; position: absolute; inset: 0 -7px; }
}