/*
Theme Name: ELPE
Theme URI: https://elpe.cz
Description: Custom WordPress theme for ELPE s.r.o.
Author: stepandavid.cz
Author URI: https://stepandavid.cz
Version: 1.106.17
Text Domain: elpe
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root {
  /* Brand */
  --red:       #E52329;
  --red-700:   #C41E24;
  --red-800:   #A81920;
  --navy:      #191E30;
  --navy-700:  #232A42;
  --blue:      #2C5AA6;
  --blue-600:  #244C8E;
  --blue-100:  #DCE6F5;
  --blue-50:   #ECF2FB;

  /* Greyscale */
  --g0:        #E4E5EC;
  --g1:        #E5E5E9;
  --g2:        #CCCDD6;
  --g3:        #B2B4C2;
  --g4:        #9A9CAE;
  --g5:        #7F839A;
  --white:     #FFFFFF;
  --black:     #0B0D14;
  --ink:       #191E30;
  --muted:     #5b6075;

  /* Surfaces */
  --surface:      #F5F5F8;
  --surface-warm: #F3F3F7;

  /* Layout */
  --maxw:      1320px;
  --section-pad: clamp(100px, 11vw, 160px);
  --r:         16px;
  --r-lg:      24px;
  --r-xl:      32px;

  /* Shadows — more refined */
  --shadow-sm: 0 1px 3px rgba(25,30,48,.05), 0 4px 12px rgba(25,30,48,.05);
  --shadow:    0 12px 36px rgba(25,30,48,.09), 0 2px 6px rgba(25,30,48,.05);
  --shadow-lg: 0 28px 72px rgba(25,30,48,.16);
  --shadow-xl: 0 48px 96px rgba(25,30,48,.22);

  --font-body:    'League Spartan', 'League Spartan Fallback', 'League Spartan Fallback DejaVu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'League Gothic', 'League Gothic Fallback Narrow', 'League Gothic Fallback DejaVu', 'League Gothic Fallback', 'League Gothic Fallback DejaVu Sans', 'League Spartan', sans-serif;

  /* ---------------------------------------------------------
     TYPOGRAFICKÁ ŠKÁLA NADPISŮ (display font, vždy váha 400)

     Hodnoty NEJSOU vymyšlené — jsou odvozené z odsouhlasených
     stránek (homepage, /sluzby/, /sluzby/trafostanice/, /o-nas/,
     /reference/). Škála se tedy nedrží nějakého ideálu, ale toho,
     co klient schválil; zbytek webu se stahuje k ní.

     Nová komponenta si NEVYMÝŠLÍ vlastní velikost — sáhne po
     nejbližším tokenu. Když žádný nesedí, je to signál, že se buď
     zavádí nová úroveň (a patří sem), nebo je nadpis špatně zvolený.
     --------------------------------------------------------- */
  --h1-hero:    clamp(62px, 8vw, 122px);  /* H1 homepage */
  --h1-page:    clamp(54px, 7vw, 104px);  /* H1 podstránky (hero) */
  --h1-article: clamp(36px, 5vw, 68px);   /* H1 článku / autora (užší sloupec) */

  --h2-xl:      clamp(56px, 7vw, 96px);   /* největší nadpis sekce (homepage „Co pro vás uděláme?") */
  --h2-l:       clamp(50px, 6.2vw, 84px); /* výchozí nadpis sekce — použij, když váháš */
  --h2-m:       clamp(44px, 5.4vw, 72px);
  --h2-s:       clamp(38px, 4.6vw, 64px);
  --h2-cta:     clamp(34px, 4vw, 60px);   /* CTA pruh — záměrně tišší než nadpis sekce */
  --h2-xs:      clamp(28px, 3.2vw, 44px); /* nadpis uvnitř panelu/karty */
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
/* Video nesmí přetéct kontejner ani bez vlastních stylů — kritické CSS (inline) pokrývá
   jen viewport a neostylované <video> pod ohybem by na mobilu roztáhlo layout viewport
   (fixní hlavička 832 px místo 412). Ve finálním CSS mají všechna videa šířku 100 %, takže bez vlivu. */
video { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.15; }
/* Zákaz falšovaného tučného řezu u nadpisů.
   League Gothic (--font-display) existuje JEN ve váze 400. <h1>–<h6> mají
   z prohlížeče default bold, takže pravidlo, které nastaví display font
   a zapomene `font-weight: 400`, dostane syntetický bold — mechanicky
   roztažené tahy, které vypadají rozmazaně. Tohle to plošně vypne: správně
   napsané nadpisy se nezmění (League Spartan má reálné řezy 300–900),
   a zapomenutá váha vykreslí čistou 400 místo faux boldu.
   Longhand (ne `font-synthesis: none`) → kurzíva se dál syntetizovat smí. */
h1, h2, h3, h4, h5, h6 { font-synthesis-weight: none; }
::selection { background: var(--red); color: #fff; }

/* Display heading compression — League Gothic treatment */
.hero h1,
.about h2,
.shops__head h2,
.eshop__body h2,
.contact h2,
.scard__b h3,
.shop__b h3 {
  display: inline-block;
  transform: scaleX(.86);
  transform-origin: left center;
}
.svc__head h2,
.partners h2,
.support h2 {
  display: inline-block;
  transform: scaleX(.86);
  transform-origin: center;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.section { padding: var(--section-pad) 0; }
.section[id] { scroll-margin-top: 100px; } /* fixní nav – aby kotva neskončila pod hlavičkou */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 52px); width: 100%; }

/* Detail služby — čitelný sloupec textu z editoru */
.sluzba-body { padding-top: clamp(48px, 6vw, 80px); }
.prose { max-width: 760px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin-top: 1.6em; }
.prose h3 { font-size: 22px; margin-top: 1.4em; }
.prose p, .prose li { font-size: 18px; line-height: 1.7; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose img { border-radius: var(--r); height: auto; }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* Právní / „legal" stránka (Ochrana osobních údajů, Obchodní podmínky…).
   Hero i typografie sdílené s podstránkami: .refhero (odsazení pod hlavičkou
   + drobečky + titulek) a .sluzba-body .prose (čitelný sloupec z editoru). */
.refhero--legal .refhero__title { margin-top: 0; }
.legal .sluzba-body { padding-top: clamp(8px, 1.5vw, 20px); } /* na hero přímo navazuje text */
.legal__body { max-width: 820px; } /* legal text o něco širší než výchozích 760 px .prose */
.legal__body h2 { color: var(--navy); }
/* Perex — zvýrazněný úvodní odstavec (styl bloku „Perex"). */
.legal__body .is-style-perex,
.prose .is-style-perex {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 0;
  margin-bottom: clamp(20px, 3vw, 36px);
}

/* =========================================================
   OZNAMOVACÍ PLATFORMA (171/2023) — bohatší legal vzhled.
   Vše nad nativními Gutenberg bloky (className), takže klient
   dál edituje text běžně v editoru; grafiku nese CSS.
   ========================================================= */
/* Skupina s právním textem — čitelný sloupec + odsazení sekce (hero je
   samostatný blok nad ní, kontakt samostatná sekce pod ní). */
.legal--oznameni .oz-legal {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 56px) 20px clamp(44px, 6vw, 84px);
}
.legal--oznameni .oz-legal > *:first-child { margin-top: 0; }

/* Nadpisy sekcí — červený akcent + horní vlasová linka. */
.legal--oznameni .prose h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  color: var(--navy);
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--g1);
}
.legal--oznameni .prose h2::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: var(--red);
}
/* Paragrafové nadpisy (§) — výraznější, s modrým podtiskem. */
.legal--oznameni .prose h2.oz-para {
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.4vw, 30px);
  border-top: 0;
  border-radius: 16px;
  background: var(--blue-50, #ECF2FB);
  color: var(--navy);
}
.legal--oznameni .prose h2.oz-para::before { width: 34px; }

/* Úvodní panel — povinný subjekt. */
.oz-subject {
  margin: clamp(6px, 1.5vw, 14px) 0 clamp(24px, 3vw, 36px);
  padding: clamp(20px, 2.6vw, 30px) clamp(22px, 2.6vw, 32px) clamp(20px, 2.6vw, 30px) clamp(60px, 6vw, 76px);
  background: var(--navy);
  border-radius: 18px;
  position: relative;
  color: #fff;
}
.oz-subject::before {
  content: "";
  position: absolute;
  left: clamp(20px, 2.4vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23E52329' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V7l8-4v18M19 21V11l-6-4M9 9v.01M9 12v.01M9 15v.01M9 18v.01'/%3E%3C/svg%3E");
}
.oz-subject .oz-subject__label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.oz-subject .oz-subject__name {
  margin: 6px 0 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}

/* Karty příslušných osob. */
.oz-persons { margin: clamp(18px, 3vw, 30px) 0; gap: clamp(14px, 2vw, 22px); }
.oz-persons .wp-block-column { flex-basis: 0; }
.oz-person {
  height: 100%;
  padding: clamp(20px, 2.4vw, 28px);
  background: #fff;
  border: 1px solid var(--g1);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.oz-person h3 {
  margin: 0 0 16px;
  padding-left: 46px;
  min-height: 36px;
  display: flex;
  align-items: center;
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 700;
  color: var(--navy);
  position: relative;
}
.oz-person h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--blue-50, #ECF2FB) no-repeat center/18px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23E52329' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E");
}
.oz-person .oz-tel,
.oz-person .oz-mail {
  margin: 8px 0 0;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  position: relative;
  word-break: break-word;
}
.oz-person .oz-tel::before,
.oz-person .oz-mail::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 19px;
  height: 19px;
  background: no-repeat center/contain;
}
.oz-person .oz-tel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%237F839A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E");
}
.oz-person .oz-mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%237F839A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6l9 -6'/%3E%3C/svg%3E");
}
/* Proklikový telefon/e-mail — laděné do karty, ne červené podtržené jako .prose a. */
.oz-person .oz-tel a,
.oz-person .oz-mail a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.oz-person .oz-tel a:hover,
.oz-person .oz-mail a:hover {
  color: var(--red);
  border-bottom-color: currentColor;
}

/* Číslované seznamy — červené kroužky s číslem. */
.legal--oznameni .prose ol.oz-ol {
  list-style: none;
  counter-reset: ozol;
  padding-left: 0;
  margin-top: 1.1em;
}
.legal--oznameni .prose ol.oz-ol > li {
  counter-increment: ozol;
  position: relative;
  padding-left: 54px;
  min-height: 34px;
}
.legal--oznameni .prose ol.oz-ol > li + li { margin-top: 16px; }
.legal--oznameni .prose ol.oz-ol > li::before {
  content: counter(ozol);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* Písmenné pod-seznamy (a, b, c). */
.legal--oznameni .prose ol.oz-oa {
  list-style: none;
  counter-reset: ozoa;
  padding-left: 0;
  margin: 12px 0 4px;
}
.legal--oznameni .prose ol.oz-oa > li {
  counter-increment: ozoa;
  position: relative;
  padding-left: 34px;
}
.legal--oznameni .prose ol.oz-oa > li + li { margin-top: 10px; }
.legal--oznameni .prose ol.oz-oa > li::before {
  content: counter(ozoa, lower-alpha) ")";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--red);
}

/* Odrážkové seznamy — červené tečky. */
.legal--oznameni .prose ul.oz-ul { list-style: none; padding-left: 0; margin: 10px 0 4px; }
.legal--oznameni .prose ul.oz-ul > li {
  position: relative;
  padding-left: 26px;
}
.legal--oznameni .prose ul.oz-ul > li + li { margin-top: 9px; }
.legal--oznameni .prose ul.oz-ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
}
/* Vnořený seznam uvnitř položky — jemné odsazení a mezera. */
.legal--oznameni .prose li > ol,
.legal--oznameni .prose li > ul { margin-top: 10px; }

/* Zdroje / dokumenty — řádky s ikonou souboru. */
.oz-sources { margin-top: clamp(30px, 4vw, 52px); display: grid; gap: 10px; }
.oz-sources .oz-doc {
  margin: 0;
  padding: 15px 18px 15px 52px;
  background: var(--surface);
  border: 1px solid var(--g1);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
  position: relative;
}
.oz-sources .oz-doc::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23E52329' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 9h1M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
/* Proklikový zdroj — celá řádka reaguje, šipka napravo. */
.oz-sources .oz-doc:has(a) { padding-right: 44px; }
.oz-sources .oz-doc a {
  color: var(--navy);
  text-decoration: none;
  display: block;
}
.oz-sources .oz-doc:has(a)::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237F839A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17L17 7'/%3E%3C/svg%3E");
  transition: transform .15s ease;
}
.oz-sources .oz-doc:has(a):hover { border-color: var(--red); }
.oz-sources .oz-doc:has(a):hover a { color: var(--red); }
.oz-sources .oz-doc:has(a):hover::after { transform: translateY(-50%) translate(2px, -2px); }

@media (max-width: 600px) {
  .oz-persons { flex-wrap: wrap; }
  .oz-persons .wp-block-column { flex-basis: 100% !important; }
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .24em;
  text-transform: uppercase;
  /* #de1a20 místo brand #e52329: o odstín tmavší, aby 16px tučný text splnil
     kontrast 4,5:1 i na šedém pozadí sekcí (#f5f5f8 → 4,51; bílá → 4,91).
     Opticky nerozeznatelné, Lighthouse/PSI přístupnost 100. */
  color: #de1a20;
}
.lead { font-size: 21px; line-height: 1.55; color: var(--muted); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .08em;
  padding: 17px 32px;
  border-radius: 999px;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease, color .2s ease;
  white-space: nowrap;
  text-transform: uppercase;
}
.btn .ti.ar { font-size: 15px; transition: transform .22s ease; }
.btn:hover .ti.ar { transform: translateX(5px); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 8px 24px rgba(229,35,41,.24); }
.btn--primary:hover { background: var(--red-700); box-shadow: 0 14px 32px rgba(229,35,41,.32); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-700); box-shadow: 0 8px 24px rgba(25,30,48,.24); }
.btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--g2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); background: transparent; }
.btn--white { background: #fff; color: var(--navy); }
.btn--white:hover { background: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.btn--sm { padding: 12px 22px; font-size: 12px; }

/* text link */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  transition: color .18s;
}
.tlink .ti { transition: transform .22s ease; }
.tlink:hover { color: #fff; }
.tlink:hover .ti { transform: translateX(5px); }

/* =========================================================
   LOGO
   ========================================================= */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  color: var(--red);
}
.logo__svg { display: block; width: auto; color: inherit; fill: currentColor; }
.logo--light { color: #fff; }

/* =========================================================
   ICONS
   ========================================================= */
.ti { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1);
}
.reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
}

/* =========================================================
   NAVIGATION
   ========================================================= */
header.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 20px clamp(20px, 3.5vw, 52px);
  transition: padding .3s cubic-bezier(.4,0,.2,1);
}
/* Scrollnutá pilulka je samostatný plovoucí prvek, nemusí lícovat s obsahem →
   jde blíž ke krajům okna, čímž dostane menu i tlačítka víc vzduchu. */
header.nav.scrolled { padding: 12px clamp(16px, 2vw, 32px); }

.nav__top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 auto 10px;
  padding: 0 16px;
  height: 22px;
  overflow: hidden;
  transition: height .3s ease, opacity .3s ease, margin .3s ease;
}
.nav__top a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.85);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
  transition: opacity .15s;
}
.nav__top a strong { font-weight: 800; color: #fff; }
.nav__top a:hover { opacity: .75; }
header.nav.scrolled .nav__top { height: 0; opacity: 0; margin-bottom: 0; }

/* Grid auto | 1fr | auto: logo vlevo, CTA vpravo, menu vycentrované MEZI NIMI.
   CTA je širší než logo, takže menu na přesném středu lišty mělo vpravo o polovinu
   méně vzduchu než vlevo; centrování ve zbylém prostoru dává stejné mezery na obou
   stranách. Sloupce se nikdy nepřekryjí — dřív bylo menu absolutně centrované
   a na 1180–1300 px najíždělo do tlačítek vpravo. */
.nav__bar {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  height: 72px;
  padding: 0 20px 0 28px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, height .3s ease;
}
header.nav.scrolled .nav__bar {
  height: 62px;
  background: rgba(14,17,28,.84);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 48px rgba(8,10,18,.32), 0 1px 0 rgba(255,255,255,.04) inset;
}
.nav__logo { display: inline-flex; align-items: center; justify-self: start; }

.nav__menu { justify-self: center; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: .01em;
  color: rgba(255,255,255,.9);
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav__link:hover { background: transparent; color: var(--red); }
.nav__link .chev { transition: transform .2s ease; display: inline-flex; opacity: .7; }
.nav__item.open .nav__link .chev { transform: rotate(180deg); }
.nav__item.open .nav__link { background: rgba(255,255,255,.1); color: #fff; }

.nav__spacer { display: none; }
.nav__cta { display: flex; align-items: center; gap: 10px; justify-self: end; }

/* Notebooky 1121–1440 px: menu (5 položek) kompaktnější, ať má od loga i CTA vzduch. */
@media (max-width: 1440px) {
  .nav__list { gap: 6px; }
  .nav__link { font-size: 17px; padding: 10px 12px; }
}

.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.85);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 0 6px;
  white-space: nowrap;
  transition: color .15s;
}
.nav__phone:hover { color: var(--red); }

.nav__bar .btn {
  font-size: 14px;
}
.nav__bar .btn--ghost {
  color: rgba(255,255,255,.92);
  letter-spacing: .08em;
  background: transparent;
  box-shadow:
    0 2px 8px rgba(0,0,0,.10),
    inset  3px  3px .5px -3.5px rgba(255,255,255,.10),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.82),
    inset  1px  1px  1px  -.5px rgba(255,255,255,.62),
    inset -1px -1px  1px  -.5px rgba(255,255,255,.62),
    inset  0    0   8px   8px   rgba(255,255,255,.09),
    inset  0    0   2px   2px   rgba(255,255,255,.05),
    0 0 14px rgba(0,0,0,.16);
  backdrop-filter: url('#liquid-glass') blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .28s ease, color .2s ease, transform .15s ease;
}
.nav__bar .btn--ghost:hover {
  color: #fff;
  box-shadow:
    0 2px 8px rgba(0,0,0,.12),
    inset  3px  3px .5px -3.5px rgba(255,255,255,.16),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.96),
    inset  1px  1px  1px  -.5px rgba(255,255,255,.80),
    inset -1px -1px  1px  -.5px rgba(255,255,255,.80),
    inset  0    0   8px   8px   rgba(255,255,255,.14),
    inset  0    0   2px   2px   rgba(255,255,255,.08),
    0 0 20px rgba(0,0,0,.22);
}

/* Košík v e-shop tlačítku — červená a o ~25 % větší */
.btn__cart-icon {
  display: inline-flex;
  color: var(--red);
}
.btn__cart-icon svg { display: block; }

/* =========================================================
   MEGA MENU (desktop)
   ========================================================= */
/* Široký panel (Služby) se centruje na střed .nav__menu (a tím viewportu),
   ne na položku — jinak by přetekl z obrazovky. Kompaktní panel (O nás) se
   naopak ukotví pod svou položku. */
.nav__item.has-mega { position: static; }
.nav__item.has-mega:has(.mega--compact) { position: relative; }
.mega {
  position: absolute;
  top: calc(100% + 26px);
  left: 50%;
  width: min(96vw, 1120px);
  background: #fff;
  border: 1px solid rgba(25,30,48,.06);
  border-radius: var(--r-lg);
  box-shadow: 0 48px 96px rgba(8,10,18,.4);
  padding: 26px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .22s cubic-bezier(.4,0,.2,1), visibility .22s, transform .22s cubic-bezier(.4,0,.2,1);
  z-index: 60;
}
/* Neviditelný „most" mezi linkem a panelem — kurzor nepropadne mezerou */
.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 28px;
}
.nav__item.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.mega__inner { display: flex; gap: 24px; }
.mega__cols {
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px 22px;
}

/* Plochá varianta (bez kategorií) — mřížka odkazů, řádkové plnění. */
.mega__flat {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 14px;
  align-content: start;
}
.mega__flat .megalink { align-items: center; }

/* Kompaktní varianta (málo položek, např. O nás) — úzký jednosloupcový panel
   bez featured panelu. Šířka se přizpůsobí obsahu. */
.mega--compact { width: auto; padding: 14px; }
.mega--compact .mega__flat { grid-template-columns: minmax(220px, 1fr); }

/* Řádková mřížka bez promo panelu (Obchody) — vícesloupcová jako Služby, ale
   šířka dle obsahu (bez featured panelu na celou šíři). */
.mega--grid { width: auto; }
.mega--grid .mega__flat { grid-template-columns: repeat(3, minmax(200px, 1fr)); }

.megacol { min-width: 0; }
.megacol__title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g4);
  padding: 6px 12px;
  margin: 0 0 2px;
}
.megacol__list { list-style: none; margin: 0; padding: 0; }

.megalink {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--navy);
  transition: background .2s ease;
}
/* Hover pozadí = neutrální šedá → červené akcenty (ikona/nadpis/šipka) sedí čistě */
.megalink:hover,
.megalink:focus-visible { background: var(--surface); outline: none; }
.megalink__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  /* Nejsvětlejší modré pozadí + červená ikona (solidní = bez probliknutí) */
  background: var(--blue-50);
  color: var(--red);
  transition: background .2s ease;
}
/* Hover → chip se plynule prosvětlí na bílou; jen barva, žádný pohyb (= žádný flicker).
   Ikona zůstává červená a na bílé víc vynikne. */
.megalink:hover .megalink__ico,
.megalink:focus-visible .megalink__ico {
  background: #fff;
}
.megalink__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 1px;
  min-width: 0;
}
.megalink__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  transition: color .2s ease;
}
.megalink:hover .megalink__title { color: var(--red); }
.megalink__desc {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}
.megalink__ar {
  flex: none;
  align-self: center;
  margin-left: auto;
  color: var(--red);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s cubic-bezier(.22,.61,.36,1);
}
.megalink:hover .megalink__ar { opacity: 1; transform: none; }

/* Featured panel */
.mega__feat {
  flex: none;
  width: 290px;
  border-radius: var(--r);
  padding: 26px;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 100%);
  color: #fff;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.mega__feat--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mega-img) center / cover no-repeat;
  opacity: .42;
}
.mega__feat--photo {
  background:
    linear-gradient(0deg, rgba(11,13,20,.94) 0%, rgba(11,13,20,.55) 60%, rgba(11,13,20,.30) 100%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 100%);
}
.mega__feat-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.mega__feat--photo .mega__feat-eyebrow { color: #fff; opacity: .8; }
.mega__feat-title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: .98;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.mega__feat-desc { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.78); margin: 0 0 18px; }
.mega__feat-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mega__feat-actions .btn { width: 100%; justify-content: center; }
.mega__feat-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  transition: color .15s;
}
.mega__feat-phone:hover { color: var(--red); }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: background .15s;
}
.burger:hover { background: rgba(255,255,255,.14); }
.burger span,
.burger span::before,
.burger span::after {
  content: "";
  display: block;
  width: 18px;
  height: 1.5px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  transition: .2s;
}
.burger span::before { position: absolute; top: -5.5px; }
.burger span::after  { position: absolute; top: 5.5px; }

/* Mobile sheet */
.msheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(11,13,20,.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
  backdrop-filter: blur(2px);
}
.msheet.show { opacity: 1; visibility: visible; }
/* Dvojité ťuknutí na mobilu = zoom stránky (iOS): v menu a na všech ovládacích prvcích
   ho vypnout (`manipulation` nechá pinch-zoom i scroll, jen zruší double-tap zoom
   a 300ms čekání na druhý tap). Štěpán 12. 9. 2026: rychlé klikání v menu zoomovalo. */
.msheet, .msheet *, .nav, .nav *, a, button, [role="button"], summary, label, input, select, textarea, .vhot, .faq__q { touch-action: manipulation; }
.msheet__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(380px, 88vw);
  background: #fff;
  padding: 28px 28px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.msheet.show .msheet__panel { transform: none; }
.msheet__logo { color: var(--red); display: inline-flex; }

.msheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.msheet__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background .15s, transform .15s;
}
.msheet__close:hover { background: var(--g1); transform: rotate(90deg); }

.msheet__nav { display: flex; flex-direction: column; }

/* Accordion */
.macc { border-bottom: 1px solid var(--g1); }
.macc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.macc__chev { display: inline-flex; color: var(--g4); transition: transform .25s cubic-bezier(.4,0,.2,1); }
.macc__trigger[aria-expanded="true"] .macc__chev { transform: rotate(180deg); color: var(--red); }

/* Split řádek: název = odkaz na stránku sekce, šipka = samostatné, zřetelně
   klikací tlačítko (44px terč) — rozbaluje podseznam. */
.macc__row { display: flex; align-items: center; gap: 12px; }
.macc__top {
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  font-weight: 700;
  font-size: 18px;
  color: var(--navy);
  transition: color .12s;
}
.macc__top:hover, .macc__top:active { color: var(--red); }
.macc--split .macc__trigger {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  justify-content: center; /* základní .macc__trigger má space-between → jediná buňka by seděla vlevo */
  border-radius: 12px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--g2);
  transition: background .16s, box-shadow .16s;
}
.macc--split .macc__trigger .macc__chev { color: var(--navy); }
.macc--split .macc__trigger:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.macc--split .macc__trigger[aria-expanded="true"] { background: var(--red); box-shadow: none; }
.macc--split .macc__trigger[aria-expanded="true"] .macc__chev { color: #fff; }
.macc--split .macc__trigger:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.macc__panel { padding: 2px 0 14px; }
.macc__group {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--g4);
  margin: 12px 0 4px;
}
.macc__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  color: var(--navy);
  transition: background .14s;
}
.macc__link:active,
.macc__link:hover { background: var(--surface); }
.macc__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--blue-50);
  color: var(--blue);
}
.macc__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.macc__t { font-weight: 600; font-size: 15px; line-height: 1.2; }
.macc__d { font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.3; }

.msheet__top {
  display: block;
  padding: 16px 0;
  font-weight: 700;
  font-size: 18px;
  border-bottom: 1px solid var(--g1);
  color: var(--navy);
  transition: color .12s, padding-left .12s;
}
.msheet__top:hover { color: var(--red); padding-left: 4px; }

.msheet__foot {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.msheet__foot .btn { flex: 1; justify-content: center; }
.msheet__foot .btn--ghost { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--g2); }
.msheet__foot .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
}
/* inset -20% nahoře/dole = rezerva pro parallax, aby nevznikla mezera */
.hero__bg { position: absolute; inset: -20% 0; z-index: -2; overflow: hidden; will-change: transform; }
/* Mobil: bez parallaxu (main.js) → bez rezervy −20 %. Box pozadí byl 1,4× vyšší než hero
   a video (1080 řádků) se na iPhonu 14 Pro natahovalo 3,9× fyzicky; s inset 0 je to 2,8×
   a je vidět o 40 % širší výřez masteru. (Štěpán 12. 9. 2026: video na mobilu rozmazané.) */
@media (max-width: 900px) { .hero__bg { inset: 0; } }
/* Poster (<img>, LCP) a video leží přes sebe ve stejném boxu; video je průhledné,
   dokud se nerozjede (initHeroVideo přidá .is-playing) — do té doby je vidět
   poster, stejně jako dřív atribut poster u <video>. */
.hero__bg img,
.hero__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.hero__bg video { opacity: 0; transition: opacity .6s ease; }
.hero__bg video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__bg video { transition: none; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(108deg,
      rgba(11,13,20,.88) 0%,
      rgba(13,16,28,.72) 28%,
      rgba(13,16,28,.35) 58%,
      rgba(13,16,28,.08) 100%
    ),
    linear-gradient(270deg,
      rgba(11,13,20,.82) 0%,
      rgba(11,13,20,.55) 25%,
      rgba(11,13,20,0)   55%
    ),
    linear-gradient(180deg,
      rgba(11,13,20,.25) 0%,
      rgba(11,13,20,0) 30%,
      rgba(11,13,20,0) 52%,
      rgba(11,13,20,.75) 100%
    );
}
.hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 80% at 84% 10%, rgba(229,35,41,.18) 0%, transparent 55%);
  mix-blend-mode: screen;
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 60px clamp(20px, 3.5vw, 52px) 185px;
  display: grid;
  grid-template-columns: 1fr clamp(260px, 28vw, 380px);
  align-items: end;
  gap: 0 clamp(40px, 6vw, 110px);
}
.hero__main { min-width: 0; }
.hero .eyebrow { color: rgba(255,255,255,.7); }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1-hero);
  line-height: 1.0;
  letter-spacing: .005em;
  color: #fff;
  margin: 0;
}
/* Vstupní animace hera jede v CSS, ne v GSAP: začíná hned s prvním vykreslením
   (nečeká na stažení JS), takže LCP = první paint textu, ne až JS + animace.
   Časování/easing kopíruje původní GSAP timeline (power3.out / power2.out).
   Start z opacity .01 místo 0: opticky totéž, ale prohlížeč prvek už počítá
   jako vykreslený → LCP se neposouvá na konec animace. */
@keyframes hero-in-up    { from { opacity: .01; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes hero-in-up-sm { from { opacity: .01; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hero-in-up-xs { from { opacity: .01; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hero-in-right { from { opacity: .01; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.hero__main h1  { animation: hero-in-up    1.1s cubic-bezier(.215,.61,.355,1) .12s both; }
.hero__ctas     { animation: hero-in-up-sm .65s cubic-bezier(.25,.46,.45,.94) .72s both; }
.hero__sub      { animation: hero-in-right .6s  cubic-bezier(.25,.46,.45,.94) .97s both; }
.hero__scroll   { animation: hero-in-up-xs .7s  cubic-bezier(.25,.46,.45,.94) 1.4s both; }
@media (prefers-reduced-motion: reduce) {
  .hero__main h1, .hero__ctas, .hero__sub, .hero__scroll { animation: none; }
}
.hero h1 .hl { color: #fff; }
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}
.hero__sub {
  padding-bottom: 6px;
}
.hero__body {
  font-size: 16px;
  line-height: 1.72;
  color: rgba(212,215,226,1);
  font-weight: 400;
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid rgba(229,35,41,.38);
}
.hero .btn--ghost,
.shopcard .btn--ghost,
.refhero__contact .btn--ghost,
.fsplit--dark .btn--white { /* glass tlačítko i v tmavém feature-splitu (např. Trafostanice) */
  color: rgba(255,255,255,.92);
  background: transparent;
  box-shadow:
    0 2px 10px rgba(0,0,0,.12),
    inset  3px  3px .5px -3.5px rgba(255,255,255,.10),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.82),
    inset  1px  1px  1px  -.5px rgba(255,255,255,.62),
    inset -1px -1px  1px  -.5px rgba(255,255,255,.62),
    inset  0    0   8px   8px   rgba(255,255,255,.09),
    inset  0    0   2px   2px   rgba(255,255,255,.05),
    0 0 18px rgba(0,0,0,.18);
  backdrop-filter: url('#liquid-glass') blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow .28s ease, color .2s ease, transform .15s ease;
}
.hero .btn--ghost:hover,
.shopcard .btn--ghost:hover,
.refhero__contact .btn--ghost:hover,
.fsplit--dark .btn--white:hover {
  color: #fff;
  box-shadow:
    0 2px 10px rgba(0,0,0,.14),
    inset  3px  3px .5px -3.5px rgba(255,255,255,.16),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.96),
    inset  1px  1px  1px  -.5px rgba(255,255,255,.80),
    inset -1px -1px  1px  -.5px rgba(255,255,255,.80),
    inset  0    0   8px   8px   rgba(255,255,255,.15),
    inset  0    0   2px   2px   rgba(255,255,255,.08),
    0 0 24px rgba(0,0,0,.22);
}

/* Scroll cue */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.48); /* dřív .38 = kontrast 3,53 (a11y fail), .48 = 4,85 */
  cursor: pointer;
  z-index: 2;
  transition: color .3s;
  background: none;
  border: none;
  padding: 0;
}
.hero__scroll:hover { color: rgba(255,255,255,.7); }

.hero__scroll-label {
  font-size: 9px;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font-body);
}

/* Elektrický vodič — jiskra cestuje dolů */
.hero__wire {
  display: block;
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,.15);
  position: relative;
  overflow: hidden;
}
.hero__wire::before {
  content: '';
  position: absolute;
  left: -1px;
  top: -28px;
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    transparent       0%,
    rgba(229,35,41,.5) 35%,
    rgba(255,255,255,.95) 65%,
    transparent       100%
  );
  animation: wire-spark 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
/* Druhý průchod — kratší echo s delayem */
.hero__wire::after {
  content: '';
  position: absolute;
  left: 0;
  top: -14px;
  width: 1px;
  height: 14px;
  border-radius: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.3), transparent);
  animation: wire-spark 2.2s cubic-bezier(.4,0,.2,1) .9s infinite;
}

@keyframes wire-spark {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(84px); opacity: 0; }
}

/* =========================================================
   STAT BAND
   ========================================================= */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes border-spin {
  to { --angle: 360deg; }
}
/* Animace --angle = překreslení celého okraje každý snímek. Vlastní vrstva pro
   pseudo-element (will-change) drží překreslení jen v něm; sekce mimo viewport
   animace zastaví (.anim-off, initAnimPause v main.js). */
.about__stats::before,
.refwhy--band .refwhy__grid::before { will-change: transform; }
.anim-off, .anim-off *, .anim-off::before, .anim-off::after, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* =========================================================
   SERVICES
   ========================================================= */
.svc__head { text-align: center; max-width: 720px; margin: 0 auto 24px; }
.svc__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xl);
  line-height: .92;
  color: var(--navy);
  margin: 16px 0 0;
}
.svc__head p { margin: 20px auto 0; font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 580px; }

.vmap {
  position: relative;
  margin: 52px auto 0;
  max-width: 1100px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0,0,0,.06);
}
.vmap__img { width: 100%; display: block; aspect-ratio: 7653/4305; object-fit: cover; }
.vmap__hint {
  position: absolute;
  left: 20px;
  top: 18px;
  background: rgba(255,255,255,.94);
  padding: 9px 16px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 9px;
  align-items: center;
  z-index: 4;
}
.vmap__hint .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  animation: pls 1.8s infinite;
}
@keyframes pls {
  0%   { box-shadow: 0 0 0 0 rgba(229,35,41,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(229,35,41,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,35,41,0); }
}

.hot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  box-shadow: 0 4px 16px rgba(229,35,41,.5);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s, box-shadow .2s;
  z-index: 3;
}
.hot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  opacity: .45;
  animation: hp 2.6s infinite;
}
@keyframes hp {
  0%   { transform: scale(.7); opacity: .5; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { opacity: 0; }
}
.hot b { width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.hot:hover,
.hot.on {
  background: var(--navy);
  transform: translate(-50%, -50%) scale(1.22);
  box-shadow: 0 6px 20px rgba(25,30,48,.4);
  z-index: 5;
}
.hot:hover::after, .hot.on::after { border-color: var(--navy); }
.hot__tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--navy);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  box-shadow: var(--shadow);
}
.hot__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
}
.hot:hover .hot__tip,
.hot.on .hot__tip { opacity: 1; transform: translateX(-50%); }

/* ── SVG interactive illustration ─────────────────────────── */
.vmap--svg {
  /* Vesnice na plnou šířku wrapu = stejně široká jako grid karet (#sluzby = 1544 → obsah ~1440) */
  /* Poměr stran = viewBox SVG (3674×2067): SVG se dotahuje až JS (data-svg), kontejner
     má tedy správnou výšku od začátku → hotspoty sedí a nic neskáče (CLS 0). */
  aspect-ratio: 3674 / 2067;
  max-width: none;
  width: 100%;
  margin-inline: auto;
  border-radius: 0;
  box-shadow: none;
  border: none;
  overflow: visible;
  background: none;
}
.vmap__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* SVG overlay groups — hidden by default, shown on active hotspot */
.svg-ov {
  display: none;
  pointer-events: none;
}
.svg-ov.svg-ov--on { display: block; }

/* Dark scrim — uniform dim; lit groups are re-stacked above it by JS */
/* Designer layer overrides — VN svod je v originále 6px, sjednotit s ostatním vedením */
#ov-trafostanice .tf-18 {
  stroke-width: 3px;
}

#ov-scrim {
  transition: opacity .35s ease;
}
.vmap--svg.is-active #ov-scrim {
  opacity: .94;
}

/* ── Hotspot button ── */
.vhot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  text-decoration: none; /* .vhot je <a> na detail služby */
}
.vhot__dot {
  position: relative;
  z-index: 2;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(229,35,41,.22);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.vhot__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(229,35,41,.55);
  animation: vhp 2.6s ease-out infinite;
}
@keyframes vhp {
  0%   { transform: scale(.5); opacity: .7; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
.vhot:hover .vhot__dot,
.vhot:focus-visible .vhot__dot {
  transform: scale(1.45);
  box-shadow: 0 0 0 5px rgba(229,35,41,.28);
}

/* ── Label pill ── */
.vhot__label {
  position: absolute;
  pointer-events: none;
  white-space: nowrap;
  background: var(--red);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 18px 7px;
  border-radius: 8px;
  opacity: 0;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(11,13,20,.35);
  transition: opacity .16s ease, transform .16s ease;
}
/* Arrow on label */
.vhot__label::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
}

/* Position variants */
.vhot[data-pos="top"] .vhot__label {
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
}
.vhot[data-pos="top"] .vhot__label::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--red);
}
.vhot[data-pos="bottom"] .vhot__label {
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(-5px);
}
.vhot[data-pos="bottom"] .vhot__label::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--red);
}
.vhot[data-pos="right"] .vhot__label {
  left: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%) translateX(-5px);
}
.vhot[data-pos="right"] .vhot__label::after {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--red);
}
.vhot[data-pos="left"] .vhot__label {
  right: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%) translateX(5px);
}
.vhot[data-pos="left"] .vhot__label::after {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--red);
}

/* Show label on hover */
.vhot:hover .vhot__label,
.vhot:focus-visible .vhot__label {
  opacity: 1;
}
.vhot:hover[data-pos="top"] .vhot__label    { transform: translateX(-50%) translateY(0); }
.vhot:hover[data-pos="bottom"] .vhot__label { transform: translateX(-50%) translateY(0); }
.vhot:hover[data-pos="right"] .vhot__label  { transform: translateY(-50%) translateX(0); }
.vhot:hover[data-pos="left"] .vhot__label   { transform: translateY(-50%) translateX(0); }

/* Nedokončené hotspoty (bez data-overlay) — klientská ukázka: na hover nic.
   Tečka + pulzující kroužek zůstávají, ale label nevyjíždí a tečka neroste.
   Až bude služba hotová a dostane data-overlay, hover efekt se zapne sám. */
.vhot:not([data-overlay]) { cursor: default; }
.vhot:not([data-overlay]):hover .vhot__dot,
.vhot:not([data-overlay]):focus-visible .vhot__dot {
  transform: none;
  box-shadow: 0 0 0 3px rgba(229,35,41,.22);
}
.vhot:not([data-overlay]):hover .vhot__label,
.vhot:not([data-overlay]):focus-visible .vhot__label {
  opacity: 0;
}

/* Mobile — hide hotspots on small screens */
@media (max-width: 640px) {
  .vhot { display: none; }
  .vmap--svg { overflow: hidden; border-radius: 16px; }
}
/* Mobil + tablet: vesnice se vůbec nezobrazuje (interaktivní hotspoty tam nedávají
   smysl, sekce Služby jde rovnou z nadpisu na karty). JS (initVillageLazy) pod
   1024 px SVG ani nestahuje. */
@media (max-width: 1023px) {
  #sluzby .vmap--svg { display: none; }
  #sluzby .svc__grid { margin-top: clamp(28px, 5vw, 44px); }
}

/* Služby + obchody — širší container na velkých monitorech, cap 1840 px
   (premium „wow", ale karty na ultrawide nebobtnají). Na 1920 → 1840,
   na 2560+ cap 1840 s velkými okraji, níž škáluje přes 96vw. */
#sluzby > .wrap,
#obchody > .wrap,
#vsechny-sluzby > .wrap,   /* podstránka Služby = stejně široký kontejner jako homepage */
.services > .wrap,   /* blok elpe/service-cards = stejná šířka jako homepage #sluzby */
.shops > .wrap { max-width: min(1840px, 96vw); }

.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 60px; }
.scard {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  height: 280px;
  cursor: pointer;
  transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s ease;
  box-shadow: 0 2px 12px rgba(11,13,20,.1);
}
.scard:hover {
  box-shadow: 0 32px 64px -16px rgba(11,13,20,.28), 0 6px 16px -6px rgba(11,13,20,.14);
}
.scard.on {
  box-shadow: 0 0 0 2px var(--red), 0 20px 48px -12px rgba(229,35,41,.2);
  transform: translateY(-6px);
}

/* ── Fotka */
.scard__img { position: absolute; inset: 0; overflow: hidden; }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.scard:hover .scard__img img { transform: scale(1.08); }
#scard-1 .scard__img img { object-position: 55% 30%; transform: scale(1.28); }
#scard-1:hover .scard__img img { transform: scale(1.36); }

/* ── Diagonální šipka — žádný box, čistý symbol */
.scard__go {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(5px, -5px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.scard__go .ti {
  font-size: 26px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  transition: color .2s ease;
}
.scard__go-label { display: none; }

.scard:hover .scard__go {
  opacity: 1;
  transform: none;
}
.scard:hover .scard__go .ti {
  color: var(--red);
}

/* ── Gradient — stejný jako karty obchody */
.scard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(11,13,20,.8));
  z-index: 1;
  pointer-events: none;
  transition: background .4s ease;
}
/* Při hoveru se rozbalí popisek výš přes fotku — ztmavíme scrim,
   ať je bílý text čitelný i přes světlé části fotek. */
.scard:hover::after {
  background: linear-gradient(180deg, rgba(11,13,20,.30) 0%, rgba(11,13,20,.62) 45%, rgba(11,13,20,.94) 100%);
}

/* ── Obsah */
.scard__b {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 26px 26px;
  z-index: 2;
  color: #fff;
}
.scard__b h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  margin: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.scard:hover .scard__b h3 {
  transform: translateY(-6px);
}

/* Grid-rows trick — plynulá animace výšky bez max-height jankiness */
.scard__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1);
}
.scard__reveal > div {
  overflow: hidden;
  padding-top: 0;
  transition: padding-top .45s cubic-bezier(.22,1,.36,1);
}
.scard:hover .scard__reveal {
  grid-template-rows: 1fr;
}
.scard:hover .scard__reveal > div {
  padding-top: 12px;
}

.scard__b p {
  font-size: 16px;
  line-height: 1.58;
  color: rgba(255,255,255,.82);
  margin: 0 0 12px;
  max-width: 460px; /* jednotná šířka textu napříč všemi službami */
  opacity: 0;
  text-wrap: pretty; /* rovnoměrnější zalomení, bez osamělých slov na konci */
  transition: opacity .3s ease .15s;
}
.scard:hover .scard__b p { opacity: 1; }

/* ── Celá karta klikací — neviditelný overlay odkaz (stretched link).
   Leží nad obsahem (z-index 4 > gradient 1, obsah 2, šipka 3), takže klik
   kdekoli vede na detail. Klávesnice: focus odkryje popisek jako hover. ── */
.scard--link { cursor: pointer; }
.scard__link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.scard__link:focus-visible { outline: 3px solid #fff; outline-offset: -4px; }
.scard:focus-within .scard__reveal { grid-template-rows: 1fr; }
.scard:focus-within .scard__reveal > div { padding-top: 12px; }
.scard:focus-within .scard__b p { opacity: 1; }
.scard:focus-within .scard__b h3 { transform: translateY(-6px); }
.scard:focus-within .scard__go { opacity: 1; transform: none; }
.scard:focus-within::after { background: linear-gradient(180deg, rgba(11,13,20,.30) 0%, rgba(11,13,20,.62) 45%, rgba(11,13,20,.94) 100%); }

.scard__b .tlink {
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--g2); /* plná světle šedá #CCCDD6 — bez průhlednosti, AA kontrast na tmavém scrimu */
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .3s ease .22s, color .2s;
}
.scard:hover .scard__b .tlink { opacity: 1; }
.scard__b .tlink:hover { color: #fff; }

/* Dotykové zařízení — bez hoveru, vše vždy viditelné */
@media (hover: none) {
  /* Popisek je rozbalený trvale (leží přes fotku), ale ztmavení scrimu viselo
     jen na `.scard:hover::after` → na mobilu se nikdy nespustilo a bílý text
     na světlé fotce (tráva, střecha, bílý rozvaděč) byl nečitelný. Scrim tedy
     jede rovnou v hover-stavu (o kus silněji, text zabírá víc plochy karty)
     a text má vlastní stín jako druhou pojistku pro místa s prosvětlenou fotkou. */
  .scard::after {
    background: linear-gradient(180deg, rgba(11,13,20,.32) 0%, rgba(11,13,20,.66) 42%, rgba(11,13,20,.95) 100%);
  }
  .scard__b h3 { text-shadow: 0 2px 10px rgba(11,13,20,.55); }
  .scard__b p {
    color: rgba(255,255,255,.94);
    text-shadow: 0 1px 6px rgba(11,13,20,.5);
  }
  .scard__b .tlink { text-shadow: 0 1px 6px rgba(11,13,20,.5); }
  .scard__reveal {
    grid-template-rows: 1fr;
  }
  .scard__reveal > div {
    padding-top: 12px;
  }
  .scard__b p,
  .scard__b .tlink {
    opacity: 1;
  }
  .scard__go {
    background: var(--red);
    color: #fff;
    border-color: transparent;
  }
}
.svc__all { display: flex; justify-content: center; margin-top: 52px; }
.svc__all .btn { min-width: 360px; height: 76px; padding-block: 0; }

/* Placeholder, když služba nemá foto (overlay karta .scard) */
.scard__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-700) 100%);
  color: rgba(255,255,255,.5);
}

/* ── Kontakt: stacked layout (podstránka) + karta kontaktní osoby */
/* z-index jako u .contact__grid — 3D marquee pod sekcí se zasouvá nahoru
   záporným margin-topem (−220px), takže by bez toho ležel PŘES spodek
   formuláře (souhlas + tlačítko) a klik by se k tlačítku nedostal. */
.contact__stack { max-width: 680px; margin: 0 auto; position: relative; z-index: 2; }
.contact__head { text-align: center; margin-bottom: 36px; }
.contact__head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.05; transform-origin: center; }
.contact__head .contact__sub { margin: 16px auto 0; font-size: 18px; color: var(--muted); max-width: 520px; }
.contact__stack .form { max-width: 560px; margin: 0 auto; }
.contact__person { text-align: center; margin-top: 48px; }
.contact__person-lead { font-size: 18px; color: var(--muted); margin: 0 0 24px; }
.contact__person-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top; /* ořez od horního okraje → celá hlava */
  margin: 0 auto 14px;
  display: block;
  box-shadow: var(--shadow-sm);
}
.contact__person-name { font-size: 20px; font-weight: 700; margin: 0; color: var(--ink); }
.contact__person-role { font-size: 14px; color: var(--muted); margin: 4px 0 12px; }
.contact__person-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  transition: color .15s;
}
.contact__person-tel:hover { color: var(--red); }
.contact__person-mail { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); transition: color .15s; }
.contact__person-mail:hover { color: var(--red); }
/* Ikonky telefonu / e-mailu v kartičce vždy značkově červené (text zůstává). */
.contact__person-tel svg,
.contact__person-mail svg { color: var(--red); }

/* =========================================================
   SHOPS
   ========================================================= */
.shops { background: var(--surface); }
.shops__head {
  display: grid;
  grid-template-columns: minmax(0, .78fr) 1.22fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 52px;
}
.shops__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-l);
  line-height: .92;
  color: var(--navy);
  margin: 16px 0 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.shops__head p { font-size: 17px; line-height: 1.72; color: var(--muted); margin: 0; padding-top: 4px; }

.shopgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.shop {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 280px;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
  box-shadow: var(--shadow-sm);
}
.shop:hover { box-shadow: var(--shadow-lg); }
.shop img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.shop:hover img { transform: scale(1.06); }
.shop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(11,13,20,.8));
}
.shop__b { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; z-index: 2; color: #fff; }
.shop__b h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  margin: 0;
}
.shop__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.9); /* pin + název + šipka jednotně výrazné (tenký pin/text při .65 působil slaběji než plný glyf šipky) */
  margin-top: 7px;
}
.shop__loc .ti-map-pin {
  transform: translateY(-1.5px); /* optický střed vůči textu (glyf pinu sedí níž) */
}
.shop__loc .ar {
  font-size: 15px;
  margin-left: -1px; /* přiblížit k slovu (ruší gap) */
  transition: transform .22s ease;
}
.shop:hover .shop__loc .ar { transform: translateX(4px); }
.shop__go {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate(5px, -5px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.shop__go .ti {
  font-size: 26px;
  color: #fff;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
  transition: color .2s ease;
}
.shop:hover .shop__go {
  opacity: 1;
  transform: none;
}
.shop:hover .shop__go .ti {
  color: var(--red);
}

/* =========================================================
   Prodejny — karta (varianta „detail", /obchody)
   Foto hero nahoře přecházející gradientem do navy panelu dole
   (jeden tmavý celek). Bílý pill se stavem, velký název přes spodek
   fota, pod tím navy panel se všemi texty z wireframu (popis, celá
   otevírací doba s dneškem, pobočky, kontakty, odkaz). Bílý text.
   Mikrodetaily: lift, zoom fota, podtržení odkazů. Reveal = .js-stagger.
   ========================================================= */
.shops--detail .shops__head { justify-content: center; text-align: center; }

/* Užší kontejner pro sekci prodejen (přebíjí širokou skupinu #obchody/.shops) */
.shops--detail > .wrap,
#obchody.shops--detail > .wrap { max-width: min(1840px, 96vw); }

.shopgrid--detail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2vw, 28px);
  align-items: stretch;
}

/* Karta = tmavý celek (foto → navy panel) */
.shopcard {
  display: flex;
  flex-direction: column;
  background: var(--navy);
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.shopcard:hover { box-shadow: var(--shadow-lg); }

/* Foto hero — přechází gradientem do navy panelu */
.shopcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy);
}
.shopcard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.shopcard:hover .shopcard__img { transform: scale(1.06); }
.shopcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgb(25,30,48) 1%,
    rgba(25,30,48,.85) 16%,
    rgba(25,30,48,.40) 40%,
    rgba(25,30,48,0)   60%);
}

/* Stav — bílý pill */
.shopcard__titlerow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.shopcard__titlerow .shopcard__name { min-width: 0; }
.shopcard__status {
  align-self: flex-start;
  flex: none;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(15,18,30,.44);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 6px 18px rgba(16,24,40,.28);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.shopcard__sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.shopcard__status--open   { color: #34c759; }
.shopcard__status--closed { color: #ff5a5f; }
.shopcard__status--open   .shopcard__sdot { background: #34c759; animation: shoppulse 2.6s ease-in-out infinite; }
.shopcard__status--closed .shopcard__sdot { background: #ff5a5f; }
.shopcard__snote { color: rgba(255,255,255,.72); font-weight: 500; }
.shopcard__snote::before { content: "·"; margin: 0 5px 0 3px; }
@keyframes shoppulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,199,89,.5); }
  50%      { box-shadow: 0 0 0 5px rgba(52,199,89,0); }
}

/* Hero — název přes spodek fota */
.shopcard__hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2vw, 24px) clamp(12px, 1.2vw, 16px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.shopcard__kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.shopcard__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: .96;
  color: #fff;
}
.shopcard__name a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.shopcard__name a:hover { opacity: .82; }

/* Celá karta klikací: krycí odkaz .shopcard__cover přes celou kartu (přímý potomek article,
   hero je absolute → ::after v názvu nešel). Vnořené odkazy (tel, mail, adresa, CTA)
   leží nad ním a fungují samostatně; klávesnice jde přes odkaz v názvu. */
.shopcard--link { position: relative; cursor: pointer; }
.shopcard__cover { position: absolute; inset: 0; z-index: 3; }
.shopcard--link .shopcard__hero { z-index: 4; pointer-events: none; }
.shopcard--link .shopcard__name a { pointer-events: auto; }
.shopcard--link .shopcard__addr,
.shopcard--link .shopcard__mi,
.shopcard--link .shopcard__cta { position: relative; z-index: 4; }
.shopcard--link:hover .shopcard__cta .ti.ar { transform: translateX(5px); }

/* Navy panel — texty těsně, minimalisticky, červené ikony (Apple) */
.shopcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(10px, 1vw, 14px) clamp(18px, 1.8vw, 22px) clamp(22px, 2.4vw, 30px);
  gap: 18px;
}
.shopcard__desc {
  margin: 0;
  font-size: 16px;
  line-height: 1.58;
  color: rgba(255,255,255,.82);
}

/* Kontaktní hlavička těla — osoba/kontakty vlevo, QR vizitka vpravo */
.shopcard__ctop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(14px, 1.6vw, 20px);
}
.shopcard__cinfo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.shopcard__qr {
  flex: none;
  margin: 0;
  width: clamp(88px, 12vw, 112px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.shopcard__qrimg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 22px rgba(16,24,40,.32);
}
.shopcard__qrcap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.62);
  text-align: center;
}
.shopcard__qrcap svg { color: var(--red); flex: none; }
@media (max-width: 420px) {
  .shopcard__ctop { flex-wrap: wrap; }
  .shopcard__qr { width: 104px; }
}

/* Pobočky — oddělené jemnou vlasovou linkou */
.shopcard__branches { display: flex; flex-direction: column; gap: 16px; }
.shopcard__branch {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.shopcard__city {
  margin: 0 0 1px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}

/* Řádky s ikonou (adresa, kontakty) — červená ikona, těsně u textu */
.shopcard__addr,
.shopcard__mi {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.shopcard__addr svg,
.shopcard__mi svg { color: var(--red); flex: none; }
.shopcard__addr span,
.shopcard__mi span {
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s ease, color .2s ease;
}
.shopcard__addr:hover,
.shopcard__mi:hover { color: #fff; }
.shopcard__addr:hover span,
.shopcard__mi:hover span { background-size: 100% 1px; }

/* Otevírací doba — ikona + jeden zalomitelný řádek (zarovnáno s adresou) */
.shopcard__hoursrow { display: flex; align-items: flex-start; gap: 9px; }
.shopcard__hoursrow > svg { color: var(--red); flex: none; margin-top: 2px; }
.shopcard__hours {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  row-gap: 2px;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  font-variant-numeric: tabular-nums;
}
.shopcard__hlabel {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.shopcard__ohd { color: rgba(255,255,255,.5); margin-right: 3px; }
.shopcard__oh.is-today { color: #fff; font-weight: 600; }
.shopcard__oh.is-today .shopcard__ohd { color: #fff; }

/* Kontakty — na jeden řádek (zalomí se jen když se nevejdou) */
.shopcard__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }

/* CTA — stejné tlačítko jako „Naše služby"/„Obchody" na homepage (.btn btn--ghost) */
.shopcard__cta { margin-top: auto; align-self: flex-start; }

/* Responsivně */
@media (max-width: 1080px) { .shopgrid--detail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .shopgrid--detail { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .shopcard, .shopcard__img { transition: none; }
  .shopcard__cta .ti.ar { transition: none; }
  .shopcard--link:hover .shopcard__cta .ti.ar { transform: none; }
  .shopcard:hover { transform: none; }
  .shopcard:hover .shopcard__img { transform: none; }
  .shopcard__status--open .shopcard__sdot { animation: none; }
}

/* =========================================================
   ESHOP BAND
   ========================================================= */
/* Karta: thumb | body | cta na jednom řádku, fotka na pozadí */
.eshop__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  --epad: clamp(32px, 4vw, 64px);
  --epad-y: clamp(22px, 2.4vw, 38px);
  gap: clamp(28px, 3.5vw, 56px);
  padding: var(--epad-y) var(--epad);
  border-radius: 32px;
  overflow: hidden;
  color: #fff;
  /* Živý vícevrstvý gradient z naší --red; pod textem tmavší (bílá ≥5.8:1, prakticky AAA ~7-9:1) */
  background:
    radial-gradient(95% 115% at 90% 6%, rgba(229,35,41,.92), transparent 48%),   /* jasná --red energie vpravo nahoře */
    radial-gradient(80% 110% at 4% 98%, rgba(25,30,48,.55), transparent 54%),     /* firemní navy hloubka vlevo dole */
    conic-gradient(from 210deg at 76% 24%, rgba(255,255,255,.10), transparent 26%),/* jemný diagonální lesk */
    linear-gradient(135deg, #A81920 0%, #8E1116 60%, #6F0E13 100%);              /* tmavý červený podklad */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 40px 90px -34px color-mix(in srgb, var(--blue-100) 80%, transparent);
}
/* Fotka přes celý pruh + tmavě-červený scrim vlevo (text čitelný, fotka prosvítá vpravo) */
.eshop__bgphoto {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* ztmavení pravého okraje za CTA — čitelnost červeného tlačítka */
    linear-gradient(270deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.34) 15%,
      rgba(0,0,0,0) 34%) no-repeat,
    /* hlavní scrim zleva pro text */
    linear-gradient(100deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.78) 30%,
      rgba(0,0,0,.34) 56%,
      rgba(0,0,0,.04) 82%) no-repeat,
    /* fotka — vždy vystředěná v obou osách, vyplní pruh bez deformace */
    var(--bg) center center / cover no-repeat;
  pointer-events: none;
}
.eshop__inner > :not(.eshop__bgphoto) { position: relative; z-index: 1; }
.eshop__body { flex: 1 1 auto; min-width: 0; max-width: 620px; }
.eshop { position: relative; overflow: hidden; }
.eshop .wrap { position: relative; }
.eshop__body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xs);
  line-height: .98;
  letter-spacing: -.01em;
  margin: 0;
}
.eshop__subhead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.35;
  color: #fff;
  margin: 10px 0 0;
  /* 42ch drží podnadpis „…5 000 položkami skladem." na dvou vyrovnaných
     řádcích i na užších laptopech (MacBook Air) místo ošklivého sirotka. */
  max-width: 42ch;
  text-wrap: balance;
}
.eshop__body p { font-size: 16px; line-height: 1.55; margin: 12px 0 0; max-width: 540px; color: #fff; }
.eshop__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  font-weight: 600;
  font-size: 15.5px;
  color: #fff;
}
.eshop__stars { display: flex; gap: 2px; }
/* Loga platforem pod hvězdičkami — bílá mono na červené */
.eshop__platforms { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; }
.eshop__platforms a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 18px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.eshop__platforms a:hover,
.eshop__platforms a:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.06); }
.eshop__platforms img { height: var(--lh, 18px); width: auto; display: block; }
/* CTA tlačítko vpravo — bílé na červené, hover navy */
.eshop__cta {
  flex: 0 0 auto;
  margin-left: auto;
  background: var(--red);
  color: #fff;
  box-shadow: 0 14px 32px -12px rgba(0,0,0,.45);
}
.eshop__cta:hover { background: var(--navy); color: #fff; }

/* — Pozadí sekce za CTA komponentami — volitelné v editoru (atribut sectionBg
     bloků elpe/cta-banner a elpe/eshop-band). Karta CTA „plave" na barevné
     ploše. Sdíleno s ruční modrou zónou na O nás (.onas-bluezone). — */
.onas-bluezone,
.elpe-secbg--blue {
  position: relative;
  background:
    radial-gradient(120% 72% at 50% 0%, rgba(255,255,255,.72), transparent 60%),
    linear-gradient(180deg, var(--blue-50) 0%, #E3ECF9 52%, var(--blue-100) 100%);
}
.elpe-secbg--blue-soft {
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--surface) 100%);
}
.elpe-secbg--surface { background: var(--surface); }
.elpe-secbg--navy {
  position: relative;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(44,90,166,.20), transparent 58%),
    radial-gradient(100% 80% at 0% 100%, rgba(229,35,41,.10), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
}
/* — E-shop CTA „Nenašli jste…" — VARIANTA „panel" (O nás): červené pozadí s
   elektro ikonami stažené do boxu na šířku kontejneru (jako „Rady z praxe").
   CTA fotka-karta je na CELOU šířku panelu, červené ikony tvoří pruhy nad a pod ní
   (vertikální padding). Full-bleed surface podklad. */
.eshop--panel { background: var(--surface); }
/* Červené pozadí ŠIROKÉ (min 1840 jako Obchody/Reference). */
.eshop--panel > .wrap {
  position: relative;
  max-width: min(1840px, 96vw);
  background: var(--red);                     /* červené pozadí v boxu */
  border-radius: clamp(28px, 3vw, 48px);      /* tvar boxu jako Rady z praxe */
  overflow: clip;                             /* ořízne ikony na zaoblené rohy */
  padding: clamp(80px, 9vw, 150px) clamp(28px, 4vw, 64px);
}
/* Karta = STANDARDNÍ šířka podstránky (1320, jako CTA banner jinde),
   vycentrovaná → červené pozadí s ikonami ji rámuje ze všech stran. */
.eshop--panel .eshop__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);  /* bez vrženého stínu */
}
/* Elektro ikony v širokém červeném panelu (kolem karty): bílé, jemné. */
.eshop--panel .elpe-deco__sym { color: #fff; opacity: .2; }
/* Maska pro reveal nadpisu po slovech (GSAP). Padding/margin kvůli dotažnicím
   (g, p, ý…), aby je overflow:hidden neořezával. */
.elpe-wword {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Rezerva nad i pod řádkem: League Gothic s line-height .98 má háčky (Ř, Š)
     nad linkou a overflow:hidden je ořezával („Řešení pro všechny typy objektů"
     na /sluzby/fotovoltaika/). Záporný margin rezervu zase vyruší v layoutu. */
  padding: .16em 0 .14em;
  margin: -.16em 0 -.14em;
}
.elpe-wword > span { display: inline-block; will-change: transform; }
/* Řádek nadpisu (elpeSplitLines) — clip-path reveal zdola. Výchozí stav je
   odkrytý, aby text zůstal čitelný, když GSAP neběží; zakrytí nastaví JS. */
.elpe-wline { display: inline-block; }
/* Jemná horní hrana proti světlé sekci nad zónou. */
.onas-bluezone::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(44,90,166,.18) 18%, rgba(44,90,166,.18) 82%, transparent);
}

/* =========================================================
   ABOUT
   ========================================================= */
.about { position: relative; background: var(--navy); color: #fff; overflow: clip; }
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 85% 0%, rgba(44,90,166,.20), transparent 58%),
    radial-gradient(100% 80% at 0% 100%, rgba(229,35,41,.10), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
  z-index: 0;
  pointer-events: none;
}
.about > .wrap { position: relative; z-index: 1; }
.about__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 72px; align-items: start; }
.about__intro { position: sticky; top: 96px; align-self: start; }
.about h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-l);
  line-height: .92;
  margin: 18px 0 0;
}
.about p { font-size: 17px; line-height: 1.72; color: rgba(188,191,206,.85); margin: 24px 0 0; }
.about__eyebrow { color: rgba(255,255,255,.5); }
.about__stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 40px 0 36px;
  background:
    linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 38%, rgba(255,255,255,0) 72%),
    rgba(25, 30, 48, 0.55);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 30px 64px rgba(0,0,0,.36);
}
/* Elektrický oblouk — stejný jako hero StatBand */
.about__stats::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: conic-gradient(
    from var(--angle),
    transparent           0deg,
    transparent         158deg,
    rgba(229,35,41,.04) 166deg,
    rgba(255,255,255,.18) 178deg,
    rgba(229,35,41,.04) 190deg,
    transparent         198deg,
    transparent         330deg,
    rgba(229,35,41,.06) 340deg,
    rgba(229,35,41,.28) 352deg,
    rgba(255,160,140,.58) 356deg,
    rgba(255,255,255,.96) 358deg,
    rgba(255,160,140,.58) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 3.5s linear infinite;
  filter: blur(0.5px);
  pointer-events: none;
  z-index: 2;
}
.about__stats > div {
  position: relative;
  padding: 34px 22px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: background .22s ease;
}
.about__stats > div:hover { background: rgba(255,255,255,.04); }
.about__stats-ic {
  display: flex;
  margin-bottom: 2px;
  color: var(--red);
}
.about__stats .v {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: .92;
  color: #fff;
  letter-spacing: .01em;
  display: inline-block;
  transform: scaleX(.86);
  transform-origin: left;
  white-space: nowrap;
}
.about__stats .l {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(159,163,182,.8);
  max-width: 160px;
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .about__stats::before { animation: none; opacity: 0; }
}
/* Scrollovací galerie 3 vysokých fotek (pravý sloupec) */
.about__gallery { display: grid; gap: 28px; }
.about__shot {
  position: relative;
  margin: 0;
  height: 780px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 36px 72px rgba(0,0,0,.42);
}
.about__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Team sphere (CPT Zaměstnanci — pro budoucí stránku Kontakty) ---- */
.sphere {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  touch-action: none;
  cursor: grab;
}
.sphere.is-grabbing { cursor: grabbing; }
.sphere__node {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  will-change: transform, opacity, width, height;
  box-shadow: 0 10px 26px rgba(0,0,0,.42);
  outline: 1.5px solid rgba(255,255,255,.16);
  outline-offset: -1.5px;
  transition: box-shadow .2s ease;
}
.sphere__node img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.sphere__node:hover { box-shadow: 0 10px 30px rgba(229,35,41,.45); }
.sphere__node:hover img { transform: scale(1.12); }
.sphere__node--demo { cursor: grab; }
.sphere__node:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---- Sphere modal ---- */
.sphere-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10,12,20,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: sm-fade .25s ease-out;
}
.sphere-modal[hidden] { display: none; }
.sphere-modal__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--navy);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.55);
  outline: 1px solid rgba(255,255,255,.08);
  animation: sm-scale .25s ease-out;
}
.sphere-modal__media { aspect-ratio: 4/3; overflow: hidden; }
.sphere-modal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sphere-modal__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(10,12,20,.55);
  color: #fff; font-size: 18px; cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s ease;
}
.sphere-modal__close:hover { background: var(--red); }
.sphere-modal__body { padding: 24px 26px 28px; color: #fff; }
.sphere-modal__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  margin: 0;
}
.sphere-modal__funkce {
  color: var(--red);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  margin: 8px 0 0;
}
.sphere-modal__contact { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; }
.sphere-modal__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(212,215,226,.92);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.sphere-modal__contact a:hover { color: #fff; }
.sphere-modal__contact i { color: var(--red); font-size: 18px; }
.sphere-modal__popis { color: rgba(188,191,206,.85); line-height: 1.6; font-size: 14px; margin: 16px 0 0; }
.sphere-modal__popis[hidden] { display: none; }
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sm-scale { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sphere-modal, .sphere-modal__card { animation: none; }
}
.about .btn--white {
  color: rgba(255,255,255,.92);
  background: transparent;
  box-shadow:
    0 2px 10px rgba(0,0,0,.12),
    inset  3px  3px .5px -3.5px rgba(255,255,255,.10),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.82),
    inset  1px  1px  1px  -.5px rgba(255,255,255,.62),
    inset -1px -1px  1px  -.5px rgba(255,255,255,.62),
    inset  0    0   8px   8px   rgba(255,255,255,.09),
    inset  0    0   2px   2px   rgba(255,255,255,.05),
    0 0 18px rgba(0,0,0,.18);
  backdrop-filter: url('#liquid-glass') blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow .28s ease, color .2s ease, transform .15s ease;
}
.about .btn--white:hover {
  color: #fff;
  background: transparent;
  box-shadow:
    0 2px 10px rgba(0,0,0,.14),
    inset  3px  3px .5px -3.5px rgba(255,255,255,.16),
    inset -3px -3px .5px -3.5px rgba(255,255,255,.96),
    inset  1px  1px  1px  -.5px rgba(255,255,255,.80),
    inset -1px -1px  1px  -.5px rgba(255,255,255,.80),
    inset  0    0   8px   8px   rgba(255,255,255,.15),
    inset  0    0   2px   2px   rgba(255,255,255,.08),
    0 0 24px rgba(0,0,0,.22);
}

/* =========================================================
   PARTNERS
   ========================================================= */
.partners {
  /* Bílá shora (za nadpisem a logy) plynule přechází dolů do šedé plochy,
     která navazuje na sekci KONTAKT. */
  background: linear-gradient(180deg,
    var(--white)   0%,
    var(--white)  46%,
    var(--surface) 100%);
  padding: clamp(96px, 13vh, 168px) 0;  /* vzdušnější na výšku */
  text-align: center;
  position: relative;
}
.partners h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xs);
  color: var(--navy);
  margin: 0 0 clamp(48px, 6vh, 80px);
}
/* Wrapper řeší overflow-x — nelze mít overflow-x:hidden + overflow-y:visible na
   jednom elementu (spec je změní oba na hidden/auto). Wrapper ořízne horizontálně,
   .plogos samotný je overflow:visible → loga nejsou oříznutá shora/zdola. */
.plogos-clip {
  overflow-x: hidden;
}
.plogos {
  --mg: 96px;
  position: relative;
  display: flex;
  gap: var(--mg);
  overflow: visible;
  user-select: none;
  padding: 16px 0 20px;
}
.plogos:hover .plogos__group {
  animation-play-state: paused;
}
.plogos__group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--mg);
  min-width: 100%;                  /* každá skupina pokryje celý viewport */
  animation: plogos-scroll 20s linear infinite;
}
@keyframes plogos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--mg))); }
}
.plogo-link {
  display: block;
  flex-shrink: 0;
  line-height: 0;
  outline-offset: 6px;
}
.plogo {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.plogo-link:hover .plogo {
  transform: scale(1.12);
}
/* Progressive blur krajů — pouze levý a pravý okraj */
.pblur {
  position: absolute;
  top: 0; bottom: 0;
  width: 180px;
  pointer-events: none;
  z-index: 2;
}
.pblur--l { left: 0; }
.pblur--r { right: 0; }
.pblur > div { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
  .plogos__group { animation: none; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact { background: var(--surface); position: relative; overflow: clip; padding-bottom: 0; }
/* Formulář + intro nad 3D marquee (marquee se zasouvá pod ně) */
.contact__grid { display: grid; grid-template-columns: 1fr .92fr; gap: 56px; align-items: start; position: relative; z-index: 2; }
.contact__intro { position: sticky; top: 104px; }
.contact h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .96;
  color: var(--navy);
  margin: 16px 0 0;
  text-wrap: balance; /* rovnoměrné řádky, žádná osamělá slova u dlouhých nadpisů */
}
.contact__sub { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 22px 0 32px; max-width: 420px; }
.contact__phone {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 24px 16px 16px;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  color: var(--navy);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease;
}
.contact__phone:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.contact__phone .ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-shadow: 0 6px 16px rgba(229,35,41,.28);
}
.contact__phone-txt { display: flex; flex-direction: column; }
.contact__phone small {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g5);
  margin-bottom: 2px;
}
.contact__phone strong { font-size: 19px; font-weight: 700; color: var(--navy); transition: color .18s; }
.contact__phone:hover strong { color: var(--red); }

/* ── Kontakt: split + kontaktní osoba (podstránky služeb).
   Karta osoby je uvnitř levého sloupce — stejné schéma jako telefonní karta
   na homepage. Rozestup od perexu řídí spodní margin .contact__sub (jako HP). */
.contact__person--inline {
  display: flex;
  align-items: center;
  gap: 18px;
  text-align: left;
  margin: 0;
  padding: 20px 22px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.contact__person--inline .contact__person-photo { width: 76px; height: 76px; margin: 0; flex: none; }
.contact__person--inline .contact__person-info { display: flex; flex-direction: column; }
.contact__person--inline .contact__person-lead {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g5);
  margin: 0 0 4px;
}
.contact__person--inline .contact__person-name { font-size: 18px; }
.contact__person--inline .contact__person-role { margin: 2px 0 8px; }
.contact__person--inline .contact__person-tel { font-size: 15px; font-weight: 400; color: var(--muted); }
.contact__person--inline .contact__person-mail { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }

/* Kontakt bez 3D marquee → vrátit spodní odsazení. S marquee musí pás dosednout
   na patu sekce; jinak pod ním zůstane prázdný pruh přes celou šířku (blok
   `elpe/contact` marquee vykresluje vždy, proto se to týkalo všech podstránek). */
.sluzby-page .contact:not(:has(.marquee3d)),
.contact--block:not(:has(.marquee3d)) { padding-bottom: var(--section-pad); }

.form { background: #fff; border-radius: 22px; padding: 40px; box-shadow: var(--shadow); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: .03em;
}
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 14px 18px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input:hover, .field textarea:hover { background: var(--g1); }
/* Chybné pole: červený rámeček + text pod polem (elpeValidateFields v main.js). */
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--red); background: rgba(229,35,41,.04); box-shadow: 0 0 0 3px rgba(229,35,41,.12); }
.field.is-invalid label { color: var(--red); }
.field__err { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--red); }
.field__err::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229,35,41,.1);
}
.field textarea { resize: vertical; min-height: 130px; }
.form__consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 12.5px;
  line-height: 1.55;
  color: #6f7389; /* dřív var(--g5) #7f839a = kontrast 3,73; #6f7389 = 4,73 (AA pro 12,5px) */
  margin: 6px 0 20px;
  cursor: pointer;
}
.form__consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Honeypot (inc/form-guard.php): mimo obrazovku, ne display:none — to boti přeskakují. */
.form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form__consent-box {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--g3);
  border-radius: 7px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.form__consent-box svg { opacity: 0; transform: scale(.6); transition: opacity .16s ease, transform .16s ease; }
.form__consent:hover .form__consent-box { border-color: var(--red); }
.form__consent input:checked + .form__consent-box { background: var(--red); border-color: var(--red); }
.form__consent input:checked + .form__consent-box svg { opacity: 1; transform: scale(1); }
.form__consent input:focus-visible + .form__consent-box { outline: 2px solid var(--red); outline-offset: 2px; }
.form__consent.is-invalid .form__consent-box { border-color: var(--red); animation: consent-shake .32s ease; }
.form__consent-txt a { color: var(--red); text-decoration: underline; }
@keyframes consent-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .form__consent.is-invalid .form__consent-box { animation: none; }
}
.form .btn { width: 100%; justify-content: center; }
.form__ok {
  display: none;
  align-items: center;
  gap: 10px;
  background: #e8f5ee;
  color: #1a6e35;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  margin-top: 16px;
}
.form__ok.show { display: flex; }
.form__err {
  display: none;
  align-items: center;
  gap: 10px;
  background: #fdecea;
  color: var(--red-700);
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  margin-top: 16px;
}
.form__err.show { display: flex; }

/* ── 3D Marquee (Aceternity, vanilla port) — galerie realizací ─────
   Velký nakloněný plán (rotateX/rotateZ), 4 sloupce driftující nahoru
   a dolů v protisměru, ořezané do full-bleed okna. */
.marquee3d {
  --m3d-gap:   clamp(18px, 1.8vw, 34px);
  position: relative;
  z-index: 1;                                 /* pod formulářem             */
  width: 100vw;
  margin-left: calc(50% - 50vw);              /* full-bleed přes celý web   */
  /* Lehký posun nahoru → horní (vyfadovaná) hrana se jen mírně zasune pod
     kontaktní formulář (prémiový layer, nadpis zůstává nad čistou plochou) */
  margin-top: calc(clamp(48px, 6vw, 96px) - 220px);
  height: clamp(460px, 46vw, 720px);
  overflow: hidden;
  perspective: 1600px;
  /* Plynulý, dlouhý fade seshora (víc kroků = bez tvrdé hrany) */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.05) 10%,
    rgba(0,0,0,.25) 22%,
    rgba(0,0,0,.6) 34%,
    rgba(0,0,0,.9) 46%,
    #000 56%, #000 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.05) 10%,
    rgba(0,0,0,.25) 22%,
    rgba(0,0,0,.6) 34%,
    rgba(0,0,0,.9) 46%,
    #000 56%, #000 100%);
}
.marquee3d__plane {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Vždy širší než viewport → nakloněný plán vyplní celou obrazovku */
  width: max(2000px, 165vw);
  display: grid;
  grid-template-columns: repeat(var(--m3d-cols, 6), 1fr);
  gap: var(--m3d-gap);
  transform-style: preserve-3d;
  /* Mírnější rotateZ → diagonála líp vyplní širokou obrazovku (bez mezery
     vpravo); rotateX drží 3D hloubku. */
  transform:
    translate(-50%, -50%)
    rotateX(52deg) rotateZ(-28deg);
}
.marquee3d__col {
  display: flex;
  flex-direction: column;
  gap: var(--m3d-gap);
  animation: m3d-drift-up 18s ease-in-out infinite alternate;
  /* Sloupce nesou 3D hloubku → karty se mohou na hover „vysunout“
     směrem k divákovi (translateZ) bez cukání. */
  transform-style: preserve-3d;
  will-change: transform;
}
.marquee3d__col:nth-child(even) {
  animation-name: m3d-drift-down;
  animation-duration: 24s;
}
/* Drift sloupce zamrzne, jakmile je nad ním kurzor → hoverovaná karta se
   přestane pohybovat pod myší a nepřepíná zap/vyp (konec „poskakování“).
   play-state jen zmrazí/rozjede na místě, žádný skok při najetí/odjetí. */
.marquee3d__col:hover { animation-play-state: paused; }
@keyframes m3d-drift-up {
  from { transform: translateY(3.5%); }
  to   { transform: translateY(-8%); }
}
@keyframes m3d-drift-down {
  from { transform: translateY(-8%); }
  to   { transform: translateY(3.5%); }
}
.marquee3d__card {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--g1);
  box-shadow:
    inset 0 0 0 1px rgba(25,30,48,.06),
    0 18px 40px -20px rgba(25,30,48,.5);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.marquee3d__card img {
  display: block;
  width: 100%;
  aspect-ratio: 970 / 700;
  object-fit: cover;
}
.marquee3d__card:hover {
  /* Vysunutí po normále nakloněného plánu k divákovi — střed zůstává pod
     kurzorem, takže hover nikdy „nepropadne“ (žádné cukání). */
  transform: translateZ(70px) scale(1.04);
  box-shadow:
    inset 0 0 0 1px rgba(25,30,48,.1),
    0 40px 70px -28px rgba(25,30,48,.6);
}
@media (prefers-reduced-motion: reduce) {
  .marquee3d__col { animation: none; }
  .marquee3d__card { transition: none; }
  .marquee3d__card:hover { transform: none; }
}
/* Tablet — kratší okno, plán o něco menší */
@media (max-width: 860px) {
  .marquee3d { height: clamp(400px, 54vw, 520px); }
  .marquee3d__plane { width: max(1500px, 200vw); }
}
/* Mobil — plošší náklon, plán pořád přes celou šíři */
@media (max-width: 600px) {
  .marquee3d { height: 440px; perspective: 1200px; }
  .marquee3d__plane {
    width: max(1100px, 260vw);
    transform: translate(-50%, -50%) rotateX(50deg) rotateZ(-26deg);
  }
}

/* =========================================================
   SUPPORT
   ========================================================= */
.support { text-align: center; }
.support h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  color: var(--navy);
  margin: 16px 0 0;
}
.support p { font-size: 18px; color: var(--muted); margin: 16px 0 0; }

/* Loga — carousel se šipkami. Scroll-snap viewport, šipky po stranách.
   Funguje pro libovolný počet log; dokud se vejdou, track se centruje
   a šipky se schovají (řídí JS přes .is-static). */
.support__carousel {
  --cg: clamp(48px, 4.6vw, 96px); /* mezera mezi logy — větší = vzdušnější, méně viditelných (~8) */
  margin: clamp(44px, 6vw, 72px) auto 0;
  max-width: min(1840px, 96vw);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 28px);
}
/* Reference: 3 řady pod sebou, bez šipek, střídavý směr driftu (řídí JS). */
.support__rows {
  margin: clamp(44px, 6vw, 72px) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 40px);
}
.support__rows .support__carousel {
  margin: 0;
  width: 100%;
}
.support__nav {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--navy) 22%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  font-size: 22px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.support__nav:hover,
.support__nav:focus-visible {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.support__nav:disabled {
  opacity: .25;
  pointer-events: none;
}
.support__carousel.is-static .support__nav { display: none; }
.support__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab; /* drag-to-scroll: chytni a projeď loga */
  /* Jemný fade na okrajích naznačuje pokračování obsahu */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.support__carousel.is-static .support__viewport { cursor: default; }
.support__carousel.is-dragging { user-select: none; }
.support__carousel.is-dragging .support__viewport { cursor: grabbing; }
/* Při tažení nesmí prohlížeč chytat nativní drag obrázku ani odkazu —
   jinak by uchopení přímo za logo spustilo „drag" místo scrollu. */
.support__viewport .support__logo,
.support__viewport .support__logo img {
  -webkit-user-drag: none;
  user-select: none;
}
.support__carousel.is-static .support__viewport {
  -webkit-mask-image: none;
  mask-image: none;
}
.support__viewport::-webkit-scrollbar { display: none; }
.support__viewport:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 6px;
  border-radius: 8px;
}
.support__track {
  display: flex;
  align-items: center;
  gap: var(--cg);
  width: max-content;
  margin-inline: auto; /* málo log → vycentrováno */
  padding: 6px clamp(12px, 2vw, 32px);
}
.support__group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--cg);
}
/* Duplikát sady je potřeba jen pro nekonečnou smyčku */
.support__carousel:not(.is-loop) .support__group[aria-hidden] { display: none; }
/* Plynulý drift se nesnese se snapem */
.support__carousel.is-loop .support__viewport { scroll-snap-type: none; }
/* Loga v přirozené šířce — nic se neořezává. */
.support__item {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  scroll-snap-align: center;
}
.support__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 84px;
}
.support__logo img {
  /* Pevná výška + auto šířka — SVG s pouhým viewBox (bez intrinsic rozměrů)
     by jinak kolabovalo na 0×0. Šířka se dopočítá z poměru stran viewBoxu.
     --logo-scale dovolí opticky doladit jednotlivá „těžká" loga (níže). */
  --logo-scale: 1;
  height: calc(clamp(40px, 4.2vw, 60px) * var(--logo-scale));
  width: auto;
  /* Strop na šířku zkrotí ultraširoké wordmarky (conteg, rimowa, spokar…),
     aby opticky nepřebíjely kompaktnější loga. object-fit drží poměr. */
  max-width: clamp(150px, 16vw, 205px);
  object-fit: contain;
  /* Loga barevná v plné sytosti (žádný grayscale). */
  transition: transform .35s cubic-bezier(.22,.61,.36,1), filter .35s ease;
}
/* Opticky „velká"/tučná loga — sjednotit dolů (~80 %), ať sedí k ostatním. */
.support__logo img[src*="conteg"],
.support__logo img[src*="agrodam"],
.support__logo img[src*="strabag"] {
  --logo-scale: .8;
}
/* Hover/fokus: jemný lift + scale + měkký stín ve tvaru loga — barva zůstává. */
.support__logo:hover img,
.support__logo:focus-visible img,
a.support__logo:hover img,
a.support__logo:focus-visible img {
  transform: translateY(-5px) scale(1.06);
  filter: drop-shadow(0 8px 16px rgba(25,30,48,.16));
}
/* Invert vypnut (uživatel si bílá loga řeší ručně). Třída .support__logo--invert
   se může stále vyskytovat v markupu, ale je bez efektu — hover lift/scale/stín
   na tato loga platí přes obecné pravidlo .support__logo:hover výše. */

/* Sbory dobrovolných hasičů — textové položky uvnitř carouselu, za logy */
.support__sdh-item {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.2;
  color: var(--navy);
  opacity: .6;
}
/* Tablet/mobil — o něco menší rozestupy/loga. */
@media (max-width: 860px) {
  .support__nav { width: 42px; height: 42px; font-size: 18px; }
  .support__carousel { --cg: clamp(30px, 6vw, 56px); }
  .support__logo { min-height: 64px; }
  .support__logo img {
    height: calc(clamp(34px, 7vw, 50px) * var(--logo-scale));
    max-width: clamp(120px, 42vw, 170px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .support__logo img { transition: none; }
  .support__logo:hover img,
  a.support__logo:hover img { transform: none; }
}

/* =========================================================
   FOOTER
   ========================================================= */
footer.ft { position: relative; background: var(--navy); color: #cfd2de; padding: clamp(72px, 8vw, 96px) 0 0; overflow: hidden; }
/* Jemný motiv elektro-ikon (icons-overlays.svg) u spodní hrany patičky —
   opakovaný vodorovně 2× (50 % šířky = 2 větší dlaždice), shora plynule
   vyfadovaný do barvy pozadí přes mask-gradient (žádná tvrdá horní hrana). */
.ft::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 300px;
  background: url(assets/overlays/icons-overlays.svg) repeat-x center bottom;
  background-size: 50% auto;
  opacity: .028;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to top, #000 12%, transparent 75%);
          mask-image: linear-gradient(to top, #000 12%, transparent 75%);
}
/* Obsah nad vzorem */
.ft > .wrap { position: relative; z-index: 1; }
/* Obsah patičky v „hero" containeru 1480px — stejný tier jako
   .hero__inner / .refhero__inner; drží container systém. */
.ft > .wrap { max-width: 1480px; }
/* Logo v patičce — červená brand varianta (SVG dědí currentColor) */
.ft .logo--light { color: var(--red); }
.ft__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: 56px clamp(40px, 4vw, 64px);
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
/* Logo v patičce = odkaz na homepage (jako v hlavičce). */
.ft__logo { display: inline-flex; color: inherit; text-decoration: none; }
.ft__logo:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.ft__desc { font-size: 16px; line-height: 1.7; color: #A8ADBF; margin: 24px 0 0; max-width: 360px; }
/* Recenzní karta — hvězdy, skóre a loga platforem v jednom bloku */
.ft__rating {
  max-width: 360px;
  margin-top: 28px;
}
.ft__rating-head { display: flex; align-items: center; gap: 14px; }
.ft__rating-score { font-size: 40px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: .005em; }
.ft__rating .rstars { font-size: 17px; }
/* Částečně vyplněné hvězdy — plná vrstva oříznutá přes overflow nad obrysovou */
.rstars { position: relative; display: inline-block; line-height: 1; }
.rstars__base, .rstars__fill { white-space: nowrap; color: inherit; }
.rstars__base i, .rstars__fill i { display: inline-block; }
.rstars__base i + i, .rstars__fill i + i { margin-left: 2px; }
.rstars__fill { position: absolute; top: 0; left: 0; overflow: hidden; }
.ft__rating-num { display: flex; flex-direction: column; gap: 3px; line-height: 1.25; }
/* Jen přímý textový span — ať pravidlo nepřebije zlatou na vnořených .rstars vrstvách */
.ft__rating-num > span { font-size: 13px; line-height: 1.45; color: #A8ADBF; }
/* Řádek spokojenosti se zeleným check */
.ft__rating-sat { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; font-size: 14px; color: #cfd2de; }
.ft__check { display: inline-flex; color: #3DBE78; }
.ft__check svg { display: block; }
/* Štítek nad logy platforem — z log se stává ověřitelný zdroj */
.ft__rating-verified {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #7C8197;
}
.ft__stars { display: flex; gap: 2px; color: var(--red); }
/* Nadpisy bílé (bez podtržítka) */
.ft h3 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 22px;
}
.ft__col a { display: block; font-size: 16px; line-height: 1.35; color: #A8ADBF; padding: 6px 0; transition: color .15s, transform .15s; }
.ft__col a:hover { color: #fff; transform: translateX(3px); }
/* Služby v jednom sloupci (patička bude vyšší — záměr) */
.ft__cols2 a { break-inside: avoid; }
.ft__loc { margin-bottom: 28px; }
.ft__loc b { color: #fff; font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ft__loc div { font-size: 15px; line-height: 1.65; color: #A8ADBF; }
/* Adresa (→ Google Maps) a telefon (→ tel:) jako odkazy — vzhled jako .ft__loc div,
   přebíjí .ft__col a (display:block/16px/padding/translateX). */
.ft__col a.ft__loc-link {
  display: block;
  width: fit-content;
  font-size: 15px;
  line-height: 1.65;
  color: #A8ADBF;
  padding: 0;
}
.ft__col a.ft__loc-link:hover { color: var(--red); transform: none; }
/* .ft__col a nastavuje display:block — pro flexové odkazy přebijeme specificitou,
   jinak se align-items:center neuplatní a ikony sedí mimo střed textu. */
.ft__col a.ft__email,
.ft__col a.ft__cta { display: flex; width: fit-content; padding: 0; }
.ft__email { align-items: center; gap: 9px; color: #D2D5DF; font-weight: 500; margin-top: 16px; font-size: 16px; line-height: 1; transition: color .15s; }
.ft__email svg, .ft__cta .ar svg, .ft__loc b svg { display: block; }
.ft__email:hover { color: var(--red); }
/* Hodnoticí platformy (Google, Heuréka, Zboží, Firmy) — jeden řádek, bílá mono */
.ft__ratlogos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 11px;
}
.ft__ratlogos a { display: inline-flex; }
.ft__ratlogos img {
  height: var(--lh, 13px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .8;
  transition: opacity .2s ease;
}
.ft__ratlogos a:hover img,
.ft__ratlogos a:focus-visible img { opacity: .95; }
/* Sociální sítě pod hodnocením — čisté vyplněné ikony bez rámečku, vzdušné mezery */
.ft__social { display: flex; align-items: center; gap: 32px; margin-top: 28px; }
.ft__social a {
  display: inline-flex;
  color: var(--red);
  line-height: 1;
  transition: color .2s ease, transform .2s ease;
}
.ft__social a:hover,
.ft__social a:focus-visible {
  color: #fff;
  transform: translateY(-2px);
}
/* SVG ikony (Tabler, stroke 1.0 — konzistentní s trust barem) */
.ft__social a svg { display: block; }
.ft__pin { display: inline-flex; color: var(--red); }
.ft__email svg { color: var(--red); flex: none; }
.ft__cta .ar { display: inline-flex; color: var(--red); }
.ft__cta:hover .ar { color: inherit; }
/* CTA odkaz pod sloupcem */
.ft__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  transition: color .15s;
}
.ft__cta:hover { color: var(--red); }
.ft__cta .ar { transition: transform .2s ease; }
.ft__cta:hover .ar { transform: translateX(3px); }
/* Vedoucí ikona u CTA (košík u e-shopu) — vždy červená */
.ft__cta-ic { display: inline-flex; color: var(--red); }
.ft__cta-ic svg { display: block; }
.ft__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ft__bottom a { font-size: 12.5px; color: #A8ADBF; transition: color .12s; }
.ft__bottom a:hover { color: #fff; }
.ft__bsep { flex: 1; }
.ft__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  padding: 24px 0 40px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 12.5px;
  color: #9499AD;
}
.ft__legal a { color: #9499AD; transition: color .12s; }
.ft__legal a:hover { color: #fff; }
/* Autorský podpis — „Tvorba webu Pelhřimov" + logo stepandavid.cz.
   Decentní v klidu; na hover ožije zelený brand accent loga + jemné nadzvednutí. */
.ft__author { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ft__author-made { font-size: 12.5px; color: #7C8197; transition: color .25s ease; }
.ft__author-logo {
  height: 16px;
  width: auto;
  display: block;
  opacity: .5;
  filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}
.ft__author:hover .ft__author-logo,
.ft__author:focus-visible .ft__author-logo {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-1px);
}
.ft__author:hover .ft__author-made,
.ft__author:focus-visible .ft__author-made { color: #B6BAC9; }
@media (prefers-reduced-motion: reduce) {
  .ft__author:hover .ft__author-logo { transform: none; }
}

/* =========================================================
   ZPĚT NAHORU — globální, objeví se po 50 % stránky
   ========================================================= */
.backtotop {
  position: fixed;
  right: clamp(16px, 2.4vw, 34px);
  bottom: clamp(16px, 2.4vw, 34px);
  z-index: 90;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .2s ease, border-color .2s ease;
}
.backtotop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.backtotop:hover,
.backtotop:focus-visible { background: var(--red); border-color: var(--red); }
.backtotop svg { display: block; }
@media (prefers-reduced-motion: reduce) {
  .backtotop { transition: opacity .2s ease; transform: none; }
  .backtotop.is-visible { transform: none; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1120px) {
  .nav__menu { display: none; }
  .nav__bar { grid-template-columns: auto 1fr; } /* bez menu: logo | CTA+burger vpravo (justify-self: end) */
  .burger { display: flex; }
  .nav__phone { display: none; }
}
/* Mega menu: nikdy nepřeteče malé desktopy a respektuje reduced-motion */
@media (max-width: 1180px) {
  .mega { width: min(96vw, 1000px); }
}
@media (prefers-reduced-motion: reduce) {
  .mega { transition: opacity .01ms, visibility .01ms; transform: translate(-50%, 0); }
  .nav__item.open .mega { transform: translate(-50%, 0); }
  .macc__chev { transition: none; }
}
@media (max-width: 1080px) {
  .about__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .hero { align-items: center; }
  .hero__inner {
    grid-template-columns: 1fr;
    padding: 140px clamp(20px, 3.5vw, 52px) 100px;
  }
  .hero__sub { margin-top: 36px; padding-bottom: 0; }
  .hero__scroll { display: none; }
  .svc__grid { grid-template-columns: repeat(2, 1fr); }
  .hot { width: 26px; height: 26px; }
  .shops__head { grid-template-columns: 1fr; gap: 20px; }
  .shopgrid { grid-template-columns: repeat(2, 1fr); }
  .eshop__inner { flex-direction: column; align-items: flex-start; }
  .eshop__bgphoto {
    background:
      linear-gradient(180deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.78) 55%, rgba(0,0,0,.72) 100%) no-repeat,
      var(--bg) center center / cover no-repeat;
  }
  .eshop__body { max-width: none; }
  .eshop__cta { align-self: stretch; justify-content: center; margin-left: 0; }
  .about__grid { grid-template-columns: 1fr; gap: 48px; }
  .about__intro { position: static; top: auto; }
  .about__shot { height: 560px; }
  .about__gallery { gap: 22px; }
  .sphere { max-width: 540px; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__intro { position: static; top: auto; }
  /* Stacked layout je vysoký — posun nahoru vypnut, marquee zůstává pod formem */
  .marquee3d { margin-top: clamp(40px, 8vw, 72px); }
  .ft__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
/* Nízké viewporty (MacBook Air 13" apod.): hero s min-height:100vh by
   vytlačil StatBand pod fold. Zastropujeme výšku hera podle výšky okna,
   ať se trust bar vejde do prvního výřezu. Jen desktop layout (≥981px),
   pod tím se hero restrukturalizuje vlastním breakpointem. */
@media (min-width: 981px) and (max-height: 820px) {
  /* Dolů ukotvený obsah (flex-end) nesmí při nízkém okně vyjet pod fixní
     hlavičku (~144px) → spodní hranice výšky hera musí pojmout hlavičku +
     H1 + spodní rezervu; stat band pořád koukne do foldu (margin-top:-88px). */
  .hero { min-height: clamp(640px, 80vh, 750px); }
  .hero__inner { padding-bottom: clamp(104px, 16vh, 165px); }
}
@media (max-width: 600px) {
  /* Mobil: logo, Poptávka a burger byly nalepené (mezera 12 px) a přitom po
     stranách zbývalo 30 px. Lišta jde blíž ke krajům, logo je o krok menší,
     tlačítko má užší padding → mezi logem a tlačítky je ~60 px vzduchu. */
  header.nav { padding: 12px 10px; }
  header.nav.scrolled { padding: 10px 10px; }
  .nav__bar { padding: 0 10px 0 14px; gap: 8px; height: 60px; }
  .nav__logo .logo__svg { height: 21px; }
  /* Poptávka na střed mezi logem a burgerem: CTA blok zabere zbylou šířku,
     Poptávka se centruje v 1fr sloupci, burger drží pravý kraj. */
  .nav__cta { justify-self: stretch; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
  .nav__cta .btn--primary { justify-self: center; }
  .nav__cta .btn--primary.btn--sm { padding: 12px 16px; }
  .nav__cta .btn--ghost { display: none; }
  .svc__grid { grid-template-columns: 1fr; }
  .scard, .shop { height: 340px; }
  .hot { width: 22px; height: 22px; }
  .hot b { width: 8px; height: 8px; }
  .shopgrid { grid-template-columns: 1fr; }
  .about__stats { grid-template-columns: repeat(2, 1fr); }
  .about__shot { height: 440px; }
  .sphere { max-width: 440px; }
  .eshop__inner { padding: 32px 22px; gap: 24px; }
  .form__row { grid-template-columns: 1fr; }
  .ft__top { grid-template-columns: 1fr; }
  .form { padding: 28px 22px; }
}

/* =========================================================
   REFERENCE / REALIZACE — od 1.103.0 blokový obsah (page.php + elpe/hero,
   trust-bar, reference-grid, clients, cta-banner); sekce s bočními znaky si
   vodorovný přesah ořezávají samy (overflow-x: clip níže).
   ========================================================= */

/* ---- Hero ---- */
.refhero {
  padding: clamp(150px, 18vh, 220px) 0 clamp(60px, 7vw, 110px);
  background: linear-gradient(180deg, var(--surface) 0%, var(--white) 100%);
}

/* ---- Drobečková navigace ---- */
.crumbs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.crumbs__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
.crumbs__ico {
  display: inline-flex;
  color: currentColor;
  opacity: .75;
  transition: opacity .2s ease;
}
.crumbs__ico svg { display: block; transform: translateY(-1px); }
.crumbs__txt {
  position: relative;
}
.crumbs__txt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.crumbs__link:hover { color: var(--red); }
.crumbs__link:hover .crumbs__ico { opacity: 1; }
.crumbs__link:hover .crumbs__txt::after { transform: scaleX(1); }
.crumbs__sep {
  display: inline-flex;
  color: var(--muted);
  opacity: .4;
}
.crumbs__sep svg { display: block; transform: translateY(-1px); }
.crumbs__current { color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  .crumbs__txt::after { transition: none; }
}
.refhero__inner {
  max-width: 1480px;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 72px);
}
/* Drobečky jsou prvním prvkem heru (mimo textový sloupec i mimo grid), aby
   seděly na stejné výšce v obou variantách — jinak je layout classic (align-
   items:end) tlačí dolů podle výšky perexu, kdežto split je drží nahoře.
   Záporný margin ruší flex/grid gap kontejneru, ať pod nimi zůstane
   původních 20 px k nadpisu. */
.refhero__inner > .crumbs {
  align-self: start;
  margin-bottom: calc(20px - clamp(40px, 5vw, 72px));
}
.onas-hero--split .refhero__inner > .crumbs {
  grid-column: 1 / -1;
  margin-bottom: calc(20px - clamp(36px, 5vw, 80px));
}
.refhero__top {
  display: grid;
  grid-template-columns: 1fr clamp(260px, 28vw, 380px);
  align-items: end;
  gap: clamp(40px, 6vw, 110px);
}
.refhero__aside { align-self: start; }
.refhero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1-page);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 18px 0 0;
}
.refhero__lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
}
/* Procenta v perexu (40 %, 50–70 %) — nejsilnější argument nemá zaniknout
   v odstavci. Doplňuje elpe_highlight_numbers(), text se nemění. */
.refhero__lead .num {
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  background: linear-gradient(180deg, transparent 62%, rgba(229, 35, 41, .18) 62%);
  padding: 0 .1em;
}
.refhero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.refhero__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* 16:9 místo extrémně širokého 1480/600 → fotky 4:3 se ořežou výrazně méně */
  aspect-ratio: 16 / 9;
}
.refhero__slides { position: absolute; inset: 0; overflow: hidden; }
.refhero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.3s ease, transform 1.3s ease;
  will-change: opacity, transform;
}
/* Aktivní snímek = pomalý zoom + jemný posun (Ken Burns), zatímco se prolíná */
.refhero__slide.is-active {
  opacity: 1;
  animation: ref-kenburns 7s ease-out forwards;
}
.refhero__slide.is-active:nth-child(even) { animation-name: ref-kenburns-alt; }
@keyframes ref-kenburns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.03) translate(-0.5%, -0.4%); }
}
@keyframes ref-kenburns-alt {
  from { transform: scale(1.03) translate(0.45%, 0.3%); }
  to   { transform: scale(1.0) translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .refhero__slide { transform: none; transition: none; }
  .refhero__slide.is-active { animation: none; }
}
.refhero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.refhero__badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 22px;
  border-radius: var(--r);
  background: rgba(25,30,48,.78);
  backdrop-filter: blur(10px);
  color: #fff;
  max-width: 60%;
}
.refhero__badge strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  color: #fff;
}
.refhero__badge span { font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.78); }

/* ---- Proč spolupracovat (full-bleed světlý luxusní gradient) ---- */
.refwhy {
  position: relative;
  z-index: 0;
  padding-top: clamp(48px, 5vw, 80px);
  /* Menší mezera mezi boxy a nadpisem další sekce (cca −50 %). */
  padding-bottom: clamp(50px, 5.5vw, 80px);
  background:
    radial-gradient(58% 46% at 16% 50%, rgba(44,90,166,.06) 0%, transparent 72%),
    radial-gradient(52% 44% at 90% 56%, rgba(229,35,41,.04) 0%, transparent 72%),
    linear-gradient(180deg,
      #FFFFFF 0%,
      #F6F9FD 26%,
      #F3F7FC 50%,
      #F6F9FD 74%,
      #FFFFFF 100%);
}
/* Dekorativní „E" znaky v bočních pruzích (hairline outline, à la Moneta).
   Vrstva je za obsahem (.wrap), nad pozadím sekce. Horizontální přesah ořezává
   overflow-x: clip na sekci (níže) → znaky vertikálně neořízne. */
.refwhy__marks,
.ref-grid__marks,
.fsplit__marks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.refwhy .wrap,
.ref-grid .wrap,
.fsplit--marked .wrap { position: relative; z-index: 1; }
/* Znak je posunutý za pravou hranu (translate 18 %) → bez oříznutí přeteče
   viewport a naskočí vodorovný posuvník. `overflow-x: clip` ořízne jen
   vodorovně; `hidden` by podle specifikace přepnul i svislou osu a ořezal
   reveal animace uvnitř sekce. */
.refwhy,
.ref-grid,
.fsplit--marked { position: relative; overflow-x: clip; }
.refwhy__mark {
  position: absolute;
  width: clamp(420px, 42vw, 760px);
  opacity: 1;
}
.refwhy__mark .refwhy__e { display: block; width: 100%; height: auto; }
/* Pravý znak (blesk) je úzký a vysoký → vlastní šířka; míň posunutý mimo okraj, ať je vidět.
   Bílá silueta na bílém pozadí sekce → jemný stín ji odlepí (bolt je jednoduchý tvar → stín rovnoměrný). */
.ref-grid__mark--right {
  top: -6%;
  right: 0;
  width: clamp(240px, 24vw, 400px);
  transform: translate(18%, 0) rotate(-18deg);
  filter: drop-shadow(0 6px 18px rgba(44, 90, 166, .12));
}
/* Na užších viewportech by znaky zasahovaly do obsahu — schováme je. */
@media (max-width: 1100px) {
  .refwhy__marks,
  .ref-grid__marks,
  .fsplit__marks { display: none; }
}
/* Volitelný podnadpis trust-baru — stejný tón jako .offer__sub; přebírá
   spodní odsazení od h2, které se s podnadpisem zkrátí. */
.refwhy__h2:has(+ .refwhy__sub) { margin-bottom: 12px; }
.refwhy__sub {
  max-width: 720px;
  margin: 0 0 clamp(32px, 4vw, 56px);
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.5;
}
.refwhy__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-l);
  line-height: 1;
  color: var(--navy);
  margin-bottom: clamp(32px, 4vw, 56px);
}
/* Volitelné tlačítko pod kartami (blok umí ctaLabel; většina pruhů ho nemá). */
.refwhy__cta {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  justify-content: center;
}
.refwhy__grid {
  display: grid;
  grid-template-columns: repeat(var(--refwhy-cols, 4), minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 32px);
  /* Karty v řadě mají VŽDY stejnou výšku (nerovné spodní hrany působí rozbitě,
     texty karet bývají různě dlouhé). Varianty pillars/audience i 5sloupcový
     --wide si stretch stejně vynucovaly samy → sjednoceno do výchozího stavu. */
  align-items: stretch;
}
/* Víc karet (5) → širší kontejner, ať karty nejsou úzké */
.refwhy--wide > .wrap { max-width: min(1840px, 94vw); }
/* Široký 5sloupcový trust bar (např. „Komu jsou naše služby určeny") — karty jsou
   užší a texty delší: výchozí benefits varianta by nechala velkou pozaďovou ikonu
   procházet textem a karty různě vysoké. Tady (jen .refwhy--wide → nikde jinde 5
   karet není; Reference/O nás se nedotkne) srovnáme výšky a ikonu víc „zařízneme"
   do pravého horního rohu mimo tok textu. Platí nezávisle na zvolené variantě. */
/* 5sloupcový pruh: užší mezery mezi kartami → karty jsou širší a text vzdušnější
   (vyváženější rozložení). Netýká se 2–4sloupcových variant, ty drží plný gap. */
.refwhy--wide .refwhy__grid { align-items: stretch; gap: clamp(14px, 1.2vw, 20px); }
/* Bez velké pozaďové ikony (rušila by text) a s větší ikonou nahoře. Barva ikony
   zůstává default z varianty (přes :not(...) vyloučené varianty si vše řídí samy
   — stats, audience i band „Trust bar — pruh"). */
.refwhy--wide:not(.onas-stats):not(.refwhy--audience):not(.refwhy--band) .benefit__bg { display: none; }
.refwhy--wide:not(.onas-stats):not(.refwhy--audience):not(.refwhy--band) .benefit__icon { margin-bottom: clamp(18px, 1.8vw, 26px); }
.refwhy--wide:not(.onas-stats):not(.refwhy--audience):not(.refwhy--band) .benefit__icon svg { width: 54px; height: 54px; }
/* U širokého 5sloupcového pruhu jsou karty úzké — výchozí max-width:78% popisku
   ho stlačí do 1–2 slov na řádek. Tady text roztáhneme na plnou šířku karty a
   zmenšíme řádkování, ať drží kompaktní odstavec (netýká se stats/audience/band,
   ty si šířku i řádkování řídí samy). */
.refwhy--wide:not(.onas-stats):not(.refwhy--audience):not(.refwhy--band) .benefit__text {
  max-width: none;
  line-height: 1.45;
  text-wrap: pretty;
}
.benefit {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 2.4vw, 36px);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 1px 3px rgba(25,30,48,.05), 0 12px 30px rgba(25,30,48,.10);
}
/* Velká ikona uříznutá vpravo — světlý brand akcent, oživení boxu.
   Výška navázaná na výšku karty (top/bottom) → ikona vyplní skoro celou výšku
   a roste s kartou; bleeduje za pravý okraj. */
.benefit__bg {
  position: absolute;
  top: 7%;
  bottom: 7%;
  right: -135px;
  color: var(--g1);
  line-height: 0;
  pointer-events: none;
  z-index: 0;
  transform-origin: center;
  /* Hover „ožije" — extra plynulé, jen ikona, karta stojí */
  transition: transform .7s cubic-bezier(.4, 0, .2, 1), color .6s ease;
  will-change: transform;
}
.benefit__bg svg { height: 100%; width: auto; }
/* U benefits karet (nadpis + delší popisek) bývá karta vysoká → ikona vázaná na
   její výšku prorůstala textem. Držíme ji proto v pevném rozsahu a v pravém
   horním rohu, jako u 5sloupcových „čísel" (.onas-stats), kde to sedí. */
.refwhy:not(.onas-stats) .benefit__bg {
  top: 7%;
  bottom: auto;
  height: clamp(120px, 11vw, 180px);
  right: -92px;
}
/* Varianta „čísla" (.onas-stats): karty jsou úzké (5 sloupců) a text sedí vlevo
   nahoře (číslo + popisek). Velkou ikonu proto kotvíme do pravého dolního rohu
   a necháme ji vybíhat rohem — bulk je ve volném rohu, jen špička jde jemně za
   text. Zvětšená, ať je jako čitelný akcent, ne úzký proužek u okraje. */
.onas-stats .benefit__bg {
  top: -38px;
  bottom: auto;
  right: -38px;
  height: clamp(160px, 14vw, 200px);
}
.benefit:hover .benefit__bg {
  transform: scale(1.06) rotate(-4deg);
  color: var(--g2);
}
@media (prefers-reduced-motion: reduce) {
  .benefit__bg { transition: none; }
  .benefit:hover .benefit__bg { transform: none; }
}
.benefit__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  margin-bottom: 18px;
}
/* Benefits varianta má malý titulek → ikona potřebuje víc vzduchu pod sebou,
   ať nepůsobí nalepená (stats/čísla na O nás mají velké číslo, vzduch netřeba). */
.refwhy:not(.onas-stats) .benefit__icon { margin-bottom: 28px; }
/* Logo partnerské značky v slotu ikony — výšku drží CSS, poměr stran obrázek.
   Loga jsou často širší než vysoká, proto width:auto + strop na šířku. */
.benefit__logoimg {
  display: block;
  height: 39px;
  width: auto;
  max-width: 100%;
}
.benefit__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.22;
  color: var(--navy);
  margin-bottom: 8px;
}
.benefit__text { position: relative; z-index: 1; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 94%; }
/* Volitelný odkaz na popisku karty (trust-bar item „url") — dědí barvu textu,
   podtržení jako signál odkazu, akcent na hover. */
.benefit__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .18s ease; }
.benefit__link:hover, .benefit__link:focus-visible { color: var(--red, #e2001a); }
/* Celá karta jako odkaz (trust-bar item „url" bez „urlText") — neviditelná
   vrstva přes celý box; obsah zůstává čitelný, klik/fokus řeší tento překryv. */
.benefit--linked { cursor: pointer; }
.benefit__stretch { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.benefit__stretch:focus-visible { outline: 2px solid var(--red, #e2001a); outline-offset: 3px; }
/* — Trust bar varianta „Pilíře" (3. styl komponenty) — čisté rovnoměrné karty
   s ikonou v jemném badge, bez velké bleedující ikony za textem → zvládá delší
   popisky bez kolize. Vhodné např. pro „Hlavní pilíře" na detailu služby. — */
.refwhy--pillars .refwhy__grid { align-items: stretch; }
.refwhy--pillars .benefit {
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s ease;
}
.refwhy--pillars .benefit__bg { display: none; }
.refwhy--pillars .benefit__icon {
  width: clamp(48px, 4vw, 56px);
  height: clamp(48px, 4vw, 56px);
  border-radius: 14px;
  background: rgba(229, 35, 41, .08);
  margin-bottom: clamp(18px, 1.8vw, 24px);
}
.refwhy--pillars .benefit__text { max-width: none; margin-top: 6px; }
.refwhy--pillars .benefit:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 3px rgba(25, 30, 48, .06), 0 22px 44px rgba(25, 30, 48, .14);
}
@media (prefers-reduced-motion: reduce) {
  .refwhy--pillars .benefit { transition: none; }
  .refwhy--pillars .benefit:hover { transform: none; }
}

/* — Trust bar varianta „Cílové skupiny" (4. styl komponenty) — vystředěné bílé
   karty v duchu zbytku webu (jemný stín, brand červená), ale s „wow" prvkem: na
   hover se kolem karty rozběhne ELEKTRICKÝ OBLOUK (stejný conic-gradient motiv
   jako tmavý stat band na homepage → sdílí @property --angle a border-spin).
   Vhodné pro segmenty zákazníků („Komu jsou naše služby určeny"). — */
.refwhy--audience .refwhy__grid { align-items: stretch; }
.refwhy--audience .benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1), box-shadow .42s ease;
}
.refwhy--audience .benefit__bg { display: none; }
/* Elektrický oblouk po okraji karty — skrytý, naběhne a roztočí se na hover. */
.refwhy--audience .benefit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent           0deg,
    transparent         300deg,
    rgba(229,35,41,.10) 332deg,
    rgba(229,35,41,.55) 350deg,
    rgba(255,150,130,.9) 356deg,
    #fff                358deg,
    rgba(255,150,130,.9) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 3;
}
/* Ikona v jemném červeném kruhu (světlá, brandová). */
.refwhy--audience .benefit__icon {
  width: clamp(58px, 5vw, 70px);
  height: clamp(58px, 5vw, 70px);
  border-radius: 50%;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--red) 22%, #fff);
  margin-bottom: clamp(16px, 1.7vw, 22px);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, background .35s ease;
}
.refwhy--audience .benefit__title { font-size: 18px; max-width: none; }
.refwhy--audience .benefit__text { max-width: none; }
.refwhy--audience .benefit:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 3px rgba(25, 30, 48, .06), 0 30px 60px -20px rgba(25, 30, 48, .22), 0 0 36px -14px rgba(229, 35, 41, .35);
}
.refwhy--audience .benefit:hover::after { opacity: 1; animation: border-spin 3.5s linear infinite; }
.refwhy--audience .benefit:hover .benefit__icon {
  transform: scale(1.08);
  background: color-mix(in srgb, var(--red) 12%, #fff);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 6%, transparent), 0 8px 22px -6px rgba(229, 35, 41, .4);
}
@media (prefers-reduced-motion: reduce) {
  .refwhy--audience .benefit,
  .refwhy--audience .benefit__icon { transition: none; }
  .refwhy--audience .benefit:hover { transform: none; }
  .refwhy--audience .benefit:hover::after { animation: none; opacity: .8; }
  .refwhy--audience .benefit:hover .benefit__icon { transform: none; }
}

/* — Trust bar varianta „Pruh" (5. styl komponenty) — tmavý souvislý panel s buňkami
   a animovaným elektrickým okrajem, stejně jako stat band na homepage (.statcard).
   Sdílí @property --angle a @keyframes border-spin. — */
.refwhy--band .refwhy__grid {
  position: relative;
  /* Sloupce dle obsahu + rozprostření „space-between": obsah zůstává zarovnaný
     doleva, ale krajní mezera (karta↔první/poslední buňka) je vlevo i vpravo
     stejná = šířka vnitřního paddingu buňky. */
  grid-template-columns: repeat(var(--refwhy-cols, 4), max-content);
  justify-content: space-between;
  gap: 0;
  align-items: stretch;
  background: rgba(25, 30, 48, .92);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.refwhy--band .refwhy__grid::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: conic-gradient(
    from var(--angle),
    transparent           0deg,
    transparent         158deg,
    rgba(229,35,41,.04) 166deg,
    rgba(255,255,255,.18) 178deg,
    rgba(229,35,41,.04) 190deg,
    transparent         198deg,
    transparent         330deg,
    rgba(229,35,41,.06) 340deg,
    rgba(229,35,41,.28) 352deg,
    rgba(255,160,140,.58) 356deg,
    rgba(255,255,255,.96) 358deg,
    rgba(255,160,140,.58) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 3.5s linear infinite;
  filter: blur(.5px);
  pointer-events: none;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .refwhy--band .refwhy__grid::before { animation: none; opacity: 0; }
}
.refwhy--band .benefit {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: clamp(34px, 3vw, 48px) clamp(24px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: background .22s ease;
}
.refwhy--band .benefit:hover { background: rgba(255, 255, 255, .04); }
.refwhy--band .benefit__bg { display: none; }
.refwhy--band .benefit__icon { color: var(--red); margin-bottom: 2px; }
.refwhy--band .benefit__icon svg { width: 44px; height: 44px; }
/* Webfont fallback (.ti) — když ikona nemá SVG, ať má stejnou velikost jako SVG */
.refwhy--band .benefit__icon i { font-size: 44px; line-height: 1; }
/* Logo značky v pruhu: wordmark je široký, plná výška ikony by ho zvětšila
   nad úroveň nadpisu — držíme optickou výšku a strop šířky buňky. */
/* Slot loga má stejnou výšku jako slot ikony (44 + 2 px), logo v něm dosedá
   dolů → sedí o 15 px níž a nadpis buňky zůstane zarovnaný se sousedy. */
.refwhy--band .benefit__logo {
  min-height: 45px;
  align-items: flex-end;
  margin-bottom: 1px;
}
.refwhy--band .benefit__logoimg { height: 30px; max-width: 190px; }
.refwhy--band .benefit__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.02;
  letter-spacing: .01em;
  color: #fff;
  max-width: none;
  margin: 0;
}
.refwhy--band .benefit__text {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(159, 163, 182, .85);
  max-width: 210px;
  margin: 0;
}
/* — Statband („Klíčová čísla"): stejná komponenta „Pruh", jen bez nadpisu a bez
   sekčního odsazení/pozadí — překrývá hero (homepage, /sluzby/), užší karta 1240 px
   s blurem, pevné odsazení buněk, ikona blíž k hodnotě, hodnota na jednom řádku.
   Vykresluje elpe_stat_band() → elpe_trust_bar([variant=band, class=refwhy--statband]).
   Specificita (0,3,0) záměrně: musí přebít `.refwhy:not(.onas-stats) .benefit__icon`
   i `.refwhy--wide` pravidla (5 buněk = --wide) bez ohledu na pořadí v souboru. — */
.refwhy.refwhy--statband { z-index: 6; margin-top: -88px; padding: 0 clamp(20px, 3.5vw, 52px); background: none; }
.refwhy--statband > .wrap { max-width: 1240px; padding: 0; }
.refwhy--band.refwhy--statband .refwhy__grid {
  background: rgba(25, 30, 48, .90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}
.refwhy--band.refwhy--statband .benefit { padding: 48px 36px 44px; }
.refwhy--band.refwhy--statband .benefit__icon { margin-bottom: 2px; }
.refwhy--band.refwhy--statband .benefit__title { white-space: nowrap; }
.refwhy--band.refwhy--statband .benefit__text { max-width: 170px; color: rgba(159, 163, 182, .8); }
/* 5 buněk = .refwhy--wide, které pod 1380 px láme na 3 sloupce; statband drží
   5 sloupců dle obsahu až do 1080 px (jako původní .statcard). */
@media (max-width: 1380px) {
  .refwhy--band.refwhy--statband .refwhy__grid { grid-template-columns: repeat(var(--refwhy-cols, 5), max-content); justify-content: space-between; }
}

/* Stacking na užších šířkách → oddělovací linky mezi buňkami. Mobilní chování je
   SPOLEČNÉ pro všechny pruhy (blok „Pruh" i statband) — jeden zdroj pravdy. */
@media (max-width: 1080px) {
  .refwhy--band .benefit { border-top: 1px solid rgba(255, 255, 255, .08); }
  .refwhy--band .refwhy__grid > .benefit:nth-child(-n+2) { border-top: none; }
  /* statband s 5 buňkami: 3 sloupce (3 + 2), linka až od 4. buňky */
  .refwhy--band.refwhy--statband.refwhy--wide .refwhy__grid { grid-template-columns: repeat(3, 1fr); justify-content: normal; }
  .refwhy--band.refwhy--statband.refwhy--wide .refwhy__grid > .benefit:nth-child(-n+3) { border-top: none; }
}
@media (max-width: 680px) {
  .refwhy.refwhy--statband { margin-top: -56px; }
}
@media (min-width: 621px) and (max-width: 680px) {
  /* Tablet/velký mobil: 2 sloupce, hustší buňky (desktopové odsazení dělalo z pruhu
     sloup), svislý oddělovač, lichá poslední buňka přes celou šířku. */
  .refwhy--band.refwhy--statband.refwhy--wide .refwhy__grid { grid-template-columns: repeat(2, 1fr); }
  .refwhy--band.refwhy--statband.refwhy--wide .refwhy__grid > .benefit:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .refwhy--band .benefit,
  .refwhy--band.refwhy--statband .benefit { padding: 26px 22px 24px; gap: 8px; }
  .refwhy--band .refwhy__grid .benefit__icon svg { width: 36px; height: 36px; }
  .refwhy--band .refwhy__grid .benefit__icon i { font-size: 36px; }
  .refwhy--band .benefit__title { font-size: 24px; }
  .refwhy--band .benefit__text,
  .refwhy--band.refwhy--statband .benefit__text { font-size: 14px; max-width: none; }
  .refwhy--band .refwhy__grid > .benefit:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .08); }
  .refwhy--band .refwhy__grid > .benefit:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
}
/* ---- TRUST BAR — SPOLEČNÝ MOBIL (≤620 px) pro VŠECHNY varianty ----
   Jedna komponenta = jedno chování: pod 620 px se každá varianta (benefity,
   čísla, pilíře, segmenty, karty i tmavý pruh) přepne na řádkový výpis —
   ikona vlevo, nadpis + popisek vpravo, položky pod sebou. Vysoké karty pod
   sebou zabíraly přes obrazovku (pruh 1 177 px, karty ještě víc); výpis má být
   přehlédnutelný jedním pohledem. Barvy/pozadí si varianty dál řídí samy. */
@media (max-width: 620px) {
  .refwhy .refwhy__grid,
  .refwhy--wide .refwhy__grid,
  .refwhy--band .refwhy__grid,
  .refwhy--band.refwhy--statband.refwhy--wide .refwhy__grid { grid-template-columns: 1fr; gap: 12px; justify-content: normal; }
  .refwhy .benefit,
  .refwhy--band .benefit,
  .refwhy--band.refwhy--statband .benefit {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 18px;
    row-gap: 4px;
    align-items: center;
    text-align: left;
    padding: 18px 22px;
    grid-column: auto;
    border-right: 0;
  }
  .refwhy .refwhy__grid > .benefit:last-child:nth-child(odd) { grid-column: auto; }
  .refwhy .benefit__icon,
  .refwhy:not(.onas-stats) .benefit__icon,
  .refwhy--band .refwhy__grid .benefit__icon {
    grid-row: 1 / span 2;
    margin: 0;
    align-self: center;
    justify-self: center;
    width: 44px;
    height: 44px;
  }
  .refwhy .benefit__icon svg,
  .refwhy--band .refwhy__grid .benefit__icon svg,
  .refwhy--wide:not(.onas-stats):not(.refwhy--audience):not(.refwhy--band) .benefit__icon svg { width: 32px; height: 32px; }
  .refwhy .benefit__icon i,
  .refwhy--band .refwhy__grid .benefit__icon i { font-size: 32px; }
  .refwhy .benefit__title,
  .refwhy--audience .benefit__title { font-size: 18px; line-height: 1.2; margin: 0; }
  .refwhy .benefit__text,
  .refwhy--band .benefit__text,
  .refwhy--band.refwhy--statband .benefit__text,
  .refwhy--wide:not(.onas-stats):not(.refwhy--audience):not(.refwhy--band) .benefit__text { font-size: 14px; line-height: 1.45; max-width: none; margin: 0; }
  /* Velká pozaďová ikona (benefity): do rohu, ztlumená, ať nepodkládá text. */
  .refwhy:not(.onas-stats) .benefit__bg { height: 96px; top: auto; bottom: -22px; right: -26px; opacity: .55; }

  /* Tmavý pruh: místo mezer linky mezi řádky (stejně jako dosud pod 440 px). */
  .refwhy--band .refwhy__grid,
  .refwhy--band.refwhy--statband.refwhy--wide .refwhy__grid { gap: 0; }
  .refwhy--band .benefit,
  .refwhy--band.refwhy--statband .benefit { padding: 16px 22px; column-gap: 16px; row-gap: 3px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .refwhy--band .refwhy__grid > .benefit:nth-child(2),
  .refwhy--band .refwhy__grid > .benefit:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, .08); }
  .refwhy--band .refwhy__grid > .benefit:first-child { border-top: none; }
  .refwhy--band .benefit__title,
  .refwhy--band.refwhy--statband .benefit__title { font-size: 23px; line-height: 1.05; white-space: normal; }
  .refwhy--band .benefit__title br { display: none; }
  .refwhy--band .benefit__text { font-size: 13.5px; line-height: 1.4; }
  /* Logo místo ikony (SYKORA): wordmark je širší než slot ikony → sloupec dle obsahu. */
  .refwhy--band .benefit:has(.benefit__logo) { grid-template-columns: auto 1fr; }
  .refwhy--band .refwhy__grid .benefit__logo { min-height: 0; width: auto; height: auto; }
  .refwhy--band .benefit__logoimg { height: 24px; max-width: 96px; }

  /* Karty (cards): kroužek s ikonou vlevo, číslo + popisek vpravo, text a CTA pod tím. */
  .refwhy--cards .benefit--card { display: flex; flex-direction: column; align-items: stretch; padding: 18px 22px; gap: 10px; }
  .refwhy--cards .benefit__figure { align-items: flex-start; }
  .refwhy--cards .benefit__top { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 16px; margin: 0; }
  .refwhy--cards .benefit__ring { width: 44px; height: 44px; }
  .refwhy--cards .benefit__num { font-size: 26px; }
  .refwhy--cards .benefit__caption { margin-top: 2px; font-size: 16px; }
  .refwhy--cards .benefit__text { font-size: 14px; line-height: 1.45; }
  .refwhy--cards .benefit__cta,
  .refwhy--cards .benefit__cta:only-of-type { margin-top: 4px; padding-top: 0; }
}

/* =========================================================
   TRUST BAR — varianta „cards" (.refwhy--cards)
   Karta: velké číslo + popisek vlevo nahoře, ikona v kroužku vpravo,
   text a volitelné ghost CTA dole. Všechna pole nepovinná. CTA se drží
   u dolní hrany (margin-top:auto), aby karty s různě dlouhým textem
   měly tlačítka zarovnaná v řádku.
   ========================================================= */
.refwhy--cards .refwhy__grid { align-items: stretch; }
.refwhy--cards .benefit--card {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 2.6vw, 40px);
  border-radius: var(--r-xl);
  background: #fff;
  /* Bez rámečku — kartu drží jen stín. Dvě vrstvy: úzká kontaktní (drží
     kartu „na papíře") + široký měkký rozptyl s malým offsetem, takže je
     stín vidět rovnoměrně kolem celé karty, ne jen pod ní. */
  box-shadow:
    0 3px 8px rgba(25, 30, 48, .04),
    0 20px 50px rgba(25, 30, 48, .10);
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.4, 0, .2, 1);
}
.refwhy--cards .benefit--card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 6px 16px rgba(25, 30, 48, .06),
    0 30px 64px rgba(25, 30, 48, .14);
}
/* Horní řádek: číslo+popisek vlevo, ikona v kroužku vpravo. */
.benefit__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(26px, 2.8vw, 38px);
}
.benefit__figure { display: flex; flex-direction: column; min-width: 0; }
.benefit__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .9;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.benefit__caption {
  margin-top: 6px;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.2;
  color: var(--navy);
}
/* Ikona v kroužku — sekundární modrý akcent, ať nesoupeří s číslem.
   (Změna na červenou = swap --blue* za --red / rgba(229,35,41,…).) */
.benefit__ring {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(52px, 5vw, 64px);
  height: clamp(52px, 5vw, 64px);
  border-radius: 50%;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--red);
  transition: background .3s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.benefit__ring svg { display: block; }
.refwhy--cards .benefit--card:hover .benefit__ring {
  background: var(--blue-100);
  transform: scale(1.06);
}
.refwhy--cards .benefit__text {
  margin: 0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}
/* CTA u dolní hrany karty. */
.benefit__cta { align-self: flex-start; margin-top: clamp(20px, 2.4vw, 30px); }
.refwhy--cards .benefit__cta:only-of-type { margin-top: auto; padding-top: clamp(20px, 2.4vw, 30px); }
@media (prefers-reduced-motion: reduce) {
  .refwhy--cards .benefit--card,
  .benefit__ring { transition: none; }
  .refwhy--cards .benefit--card:hover { transform: none; }
  .refwhy--cards .benefit--card:hover .benefit__ring { transform: none; }
}

/* ---- Výběr realizací (grid + filtr) ---- */
.ref-grid { position: relative; z-index: 0; scroll-margin-top: 120px; background: var(--white); padding: clamp(60px, 7vw, 100px) 0 clamp(120px, 13vw, 200px); }
.ref-grid__head { max-width: 880px; margin-bottom: clamp(28px, 3vw, 48px); }
.ref-grid__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-l);
  line-height: 1.02;
  color: var(--navy);
  margin-bottom: 22px;
}
.ref-grid__sub { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 60ch; }

.ref-grid__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(40px, 4.5vw, 68px);
}
.ref-chip {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: normal;
  padding: 13px 24px;
  border-radius: 12px;
  color: var(--navy);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--g2);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.ref-chip:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.ref-chip.is-active {
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 20px rgba(229,35,41,.22);
}

.ref-grid__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 3.2vw, 52px);
}
.rcard {
  background: transparent;
  transition: transform .35s ease, opacity .35s ease;
}
.rcard.is-hidden { display: none; }
.rcard:hover { transform: translateY(-5px); }
.rcard__figure { position: relative; }
/* Náznak galerie: druhá fotka srovnaná pod obálkou a lehce odsunutá dolů (stoh snímků) */
.rcard__peek {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  transform: translate(8px, 8px) rotate(1.5deg);
  transform-origin: bottom center;
  box-shadow: 0 10px 24px rgba(25,30,48,.16);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.rcard__peek img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.9) saturate(.9); }
.rcard:hover .rcard__peek { transform: translate(11px, 11px) rotate(2.5deg); }
.rcard--has-gallery .rcard__media { position: relative; z-index: 1; }
.rcard__media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(25,30,48,.06), 0 16px 38px rgba(25,30,48,.12);
  transition: box-shadow .3s ease;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.rcard__media--static { cursor: default; }
.rcard:hover .rcard__media {
  box-shadow: 0 2px 6px rgba(25,30,48,.08), 0 26px 54px rgba(25,30,48,.18);
}
.rcard__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.rcard:hover .rcard__media img { transform: scale(1.05); }

/* Ztmavení + hint na hover/focus obrázku s galerií */
.rcard__media[data-gallery]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20,17,28,0);
  transition: background .2s ease;
  z-index: 1;
}
.rcard__media[data-gallery]:hover::after,
.rcard__media[data-gallery]:focus-visible::after { background: rgba(20,17,28,.2); }
.rcard__count {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20,17,28,.72);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  pointer-events: none;
}
.rcard__count .ti { font-size: 15px; color: var(--red); }
.rcard__zoom {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.94);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.rcard__zoom .ti { font-size: 17px; color: var(--red); }
.rcard__media[data-gallery]:hover .rcard__zoom,
.rcard__media[data-gallery]:focus-visible .rcard__zoom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- Lightbox galerie ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  background: rgba(20,17,28,.94);
  padding: clamp(14px, 2.5vw, 26px);
}
.lightbox.is-open { display: flex; }
.lightbox__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; margin-bottom: 14px; }
.lightbox__titles { min-width: 0; }
.lightbox__eyebrow { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); }
.lightbox__title { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lightbox__tools { display: flex; align-items: center; gap: 14px; flex: none; }
.lightbox__counter { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.lightbox__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.lightbox__btn:hover { background: rgba(255,255,255,.22); }
.lightbox__btn .ti { font-size: 22px; }
.lightbox__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; --lb-gap: 24px; }
/* Track se třemi sloty (předchozí | aktuální | další): listování = posun tracku
   (JS, translate3d), swipe = track jede za prstem. Sousedi sedí o šířku stage
   + mezeru vedle, takže při posunu vjíždí nová fotka plynule za odjíždějící.
   Mezera (--lb-gap) musí sedět s GAP v main.js. */
.lightbox__track { position: absolute; inset: 0; touch-action: pan-y; will-change: transform; }
.lightbox__slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lightbox__slide--prev { transform: translateX(calc(-100% - var(--lb-gap))); }
.lightbox__slide--next { transform: translateX(calc(100% + var(--lb-gap))); }
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.lightbox__video { max-width: 100%; max-height: 100%; border-radius: 10px; background: #000; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 8px; }
.lightbox__nav--next { right: 8px; }
/* Obě šipky stejně: neutrální sklo, červená až na hover/focus (jasná zpětná vazba) */
.lightbox__nav:hover,
.lightbox__nav:focus-visible { background: var(--red); }
.lightbox__thumbs { display: flex; gap: 8px; justify-content: center; overflow-x: auto; margin-top: 12px; padding-bottom: 2px; }
.lightbox__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 54px;
  border: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: .55;
  outline: 2.5px solid transparent;
  outline-offset: 1px;
  transition: opacity .15s ease;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Náhled videa v liště — play ikona na tmavém poli (video nemá obrázkový thumb). */
.lightbox__thumbplay { display: grid; place-items: center; width: 100%; height: 100%; background: var(--navy-700); color: #fff; font-size: 20px; }
.lightbox__thumb.is-active { opacity: 1; outline-color: var(--red); }
.lightbox__hint { text-align: center; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.5); letter-spacing: .04em; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .rcard__zoom, .lightbox__btn, .lightbox__thumb, .rcard__peek { transition: none; }
}
@media (max-width: 640px) {
  .lightbox__hint { display: none; }
  .lightbox__thumb { width: 56px; height: 42px; }
}
.rcard__body { position: relative; padding: 22px 4px 0; }
.rcard__cat {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color .18s ease;
}
a.rcard__cat:hover { color: var(--red); }
.rcard__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(22px, 1.6vw, 26px);
  line-height: 1.18;
  color: var(--navy);
  margin-bottom: 8px;
}
.rcard__text { font-size: 15px; line-height: 1.55; color: var(--muted); }
.rcard__meta {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--g5);
}
/* CTA = .tlink, ale na světlé kartě → brand červená (default tlink je bílý pro tmavou sekci) */
.rcard__cta { margin-top: 18px; color: var(--red); }
.rcard__cta:hover { color: var(--red-700); }

/* ---- Důvěřují nám (nadpis i loga = stejné jako homepage „Podporujeme") ---- */
.reflogos { padding-bottom: clamp(48px, 5vw, 80px); background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 42%); text-align: center; }
.reflogos__h2 {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  color: var(--navy);
  margin: 16px 0 0;
  transform: scaleX(.86);
  transform-origin: center;
}

/* =========================================================
   Důvěřují nám — VARIANTA v2 (loga v bílých boxech + marquee,
   à la upmind.com). Stačí přidat třídu .reflogos--v2 na sekci.
   ========================================================= */
.reflogos--v2 {
  /* Jemný světlý podklad v celé výšce → bílé boxy „vyskočí". */
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--surface) 100%);
  /* Symetrický vertikální rytmus: stejná mezera nad nadpisem i pod logy. */
  padding: clamp(72px, 8vw, 120px) 0;
}
/* Bez extra horního marginu → horní mezera = čistý padding sekce (= dolní). */
.reflogos--v2 .reflogos__h2 { margin-top: 0; }
/* Volitelný podtitulek pod nadpisem (např. „Dlouhodobě spolupracujeme…"). */
.reflogos__sub {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--muted);
}
.reflogos--v2 .support__rows {
  margin-top: clamp(32px, 4vw, 56px);
  /* Vertikální mezera mezi řádky = 2×7px track padding-block (viz níže) + 0
     flex gap = 14px → shodná s vodorovnou mezerou log (--cg: 14px). */
  gap: 0;
}
/* Logo-zeď bez scroll-reveal fade — ten držel opacitu <1, takže loga působila
   poloprůhledně a barva vypadala světlejší než plné #CCCDD6. Marquee pohyb stačí. */
.reflogos--v2 .support__rows.reveal { opacity: 1 !important; transform: none !important; }
.reflogos--v2 .support__carousel { --cg: 14px; }   /* těsnější rozestup boxů */
.reflogos--v2 .support__track { padding-block: 7px; }   /* prostor pro hover lift (-4px); 2×7=14px = --cg */
/* Okrajový fade řad (maska jako upmind). */
.reflogos--v2 .support__viewport {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
/* Logo i textová položka = bílý box. */
.reflogos--v2 .support__logo,
.reflogos--v2 .support__sdh-item {
  box-sizing: border-box;
  width: clamp(170px, 19vw, 216px);
  min-height: clamp(84px, 9vw, 104px);
  padding: 18px 26px;
  background: var(--white);
  border-radius: 12px;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
/* Loga monochromaticky v brand modré (zachová kresbu i u rastrů); barva se vrátí na hover. */
.reflogos--v2 .support__logo img {
  height: clamp(26px, 2.8vw, 38px);
  max-width: 100%;
  filter: url(#elpe-mono-blue);
  transition: filter .35s ease, opacity .35s ease;
}
/* Hover: box se zvedne, logo dostane zpět barvu. */
.reflogos--v2 .support__logo:hover,
.reflogos--v2 a.support__logo:hover,
.reflogos--v2 .support__logo:focus-visible {
  transform: translateY(-4px);
}
.reflogos--v2 .support__logo:hover img,
.reflogos--v2 a.support__logo:hover img,
.reflogos--v2 .support__logo:focus-visible img {
  filter: none;
  opacity: 1;
  transform: none;        /* lift řeší box, ne obrázek */
}
/* Textová položka (klient bez loga) v boxu. */
.reflogos--v2 .support__sdh-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(18px, 1.8vw, 26px);
  color: #6f7389; /* dřív var(--g3) #B2B4C2 (kontrast 2,05 — a11y fail); #6f7389 = 4,73 i pro 18px na mobilu */
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .reflogos--v2 .support__logo,
  .reflogos--v2 .support__logo img { transition: none; }
}

/* ---- CTA banner ---- */
/* Horní mezera odlepí banner od pruhu s logy nad ním. */
.refcta {
  position: relative;
  padding-top: clamp(72px, 9vw, 132px);
  padding-bottom: clamp(80px, 9vw, 140px);
}
/* Dekorativní elektro ikony v pozadí pruhu (sdílené — CTA banner, e-shop pruh;
   motiv z Reference). Jemné, za kartou; karta má plné pozadí + overflow:hidden,
   takže překryje ikony pod sebou, viditelné zůstanou hlavně v okolním prostoru. */
.elpe-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.elpe-deco__sym {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  color: var(--navy);
  opacity: .06;
}
.elpe-deco__sym svg { display: block; }
.refcta .wrap { position: relative; z-index: 1; }
.refcta__inner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* Stejná výška jako e-shop pruh na homepage — sdílené padding tokeny */
  --epad: clamp(32px, 4vw, 64px);
  --epad-y: clamp(22px, 2.4vw, 38px);
  gap: clamp(28px, 4vw, 56px);
  padding: var(--epad-y) var(--epad);
  /* Stejná výška jako e-shop pruh na homepage (.eshop__inner). E-shop má víc
     obsahu → vyšší; tady dorovnáme min-výškou, obsah se vycentruje (flex). */
  min-height: clamp(220px, 22vw, 272px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(44,90,166,.4) 0%, transparent 55%),
    radial-gradient(120% 160% at 0% 100%, rgba(229,35,41,.32) 0%, transparent 55%),
    linear-gradient(120deg, #20263f 0%, var(--navy) 55%, #14182a 100%);
  box-shadow: var(--shadow-lg);
}
/* Fotka přes celý pruh + scrim zleva (text) a vpravo (CTA) — jako e-shop band */
.refcta__bgphoto {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(270deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.34) 15%,
      rgba(0,0,0,0) 34%) no-repeat,
    linear-gradient(100deg,
      rgba(20,24,42,.94) 0%,
      rgba(20,24,42,.8) 30%,
      rgba(20,24,42,.36) 56%,
      rgba(20,24,42,.06) 82%) no-repeat,
    /* fotka — vždy vystředěná v obou osách, vyplní pruh bez deformace */
    var(--bg) center center / cover no-repeat;
  pointer-events: none;
}
.refcta__inner > :not(.refcta__bgphoto) { position: relative; z-index: 1; }
.refcta__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-cta);
  line-height: .98;
  color: #fff;
  margin: 14px 0 12px;
}
.refcta__text { font-size: 17px; line-height: 1.55; color: rgba(212,215,226,.85); max-width: 44ch; }
.eyebrow--light { color: rgba(255,255,255,.7); }

/* ---- Vyzvednutí (highlight) — barevný panel, vyzvedne jednu klíčovou věc ---- */
.highlight {
  position: relative;
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: clamp(56px, 7vw, 104px);
}
.highlight__panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(36px, 4.4vw, 68px) clamp(32px, 4vw, 72px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  color: #fff;
}
/* Červená (brand) — výchozí. */
.highlight__panel--red {
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(255,255,255,.16) 0%, transparent 55%),
    radial-gradient(120% 160% at 0% 100%, rgba(0,0,0,.22) 0%, transparent 55%),
    linear-gradient(120deg, var(--red) 0%, var(--red-700) 55%, var(--red-800) 100%);
}
.highlight__panel--navy {
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(44,90,166,.4) 0%, transparent 55%),
    radial-gradient(120% 160% at 0% 100%, rgba(229,35,41,.28) 0%, transparent 55%),
    linear-gradient(120deg, #20263f 0%, var(--navy) 55%, #14182a 100%);
}
.highlight__panel--blue {
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(255,255,255,.16) 0%, transparent 55%),
    radial-gradient(120% 160% at 0% 100%, rgba(0,0,0,.2) 0%, transparent 55%),
    linear-gradient(120deg, var(--blue) 0%, var(--blue-600) 60%, #1c3c72 100%);
}
/* Značkový blesk jako dekor — velký, přetéká pravou hranou, jemný. */
.highlight__deco {
  position: absolute;
  right: clamp(-40px, -2vw, 8px);
  top: 50%;
  transform: translateY(-50%) rotate(8deg);
  width: clamp(160px, 22vw, 280px);
  opacity: .1;
  pointer-events: none;
  z-index: 0;
}
.highlight__deco svg { display: block; width: 100%; height: auto; }
.highlight__body { position: relative; z-index: 1; max-width: 60ch; }
.highlight__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin-bottom: 14px;
}
.highlight__ico {
  display: inline-flex;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
}
.highlight__ico svg { display: block; }
.highlight__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-cta);
  line-height: 1;
  color: #fff;
  margin: 0 0 14px;
}
.highlight__text {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  max-width: 52ch;
  margin: 0;
}
.highlight__cta { position: relative; z-index: 1; flex-shrink: 0; }
.highlight__body .highlight__cta { margin-top: 26px; }

/* Foto panel — fotka vyplní celý panel, přetažená značkovým gradientem (scrim);
   text čitelně přes ni. Stejný jazyk jako refcta__bgphoto / e-shop pruh. */
.highlight__panel--photo {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* jinak base align-items:center centruje text horizontálně */
  justify-content: center;
  min-height: clamp(320px, 34vw, 440px);
  padding: clamp(40px, 5.4vw, 84px) clamp(32px, 5vw, 80px);
  background: var(--navy); /* podklad, než doběhne fotka */
}
.highlight__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg) center center / cover no-repeat;
  /* jemné oživení fotky — sytější, s hloubkou */
  filter: saturate(1.05) contrast(1.02);
}
/* Scrim = barevný gradient přes fotku. Sytý vlevo (kde je text), doprava
   slábne, aby fotka (u nás firemní totem ELPE) zůstala čitelná. Dole clona
   pro hloubku. Barvu drží tón panelu. */
.highlight__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.highlight__panel--red.highlight__panel--photo .highlight__bg::after {
  background:
    linear-gradient(96deg, rgba(168,25,32,.96) 0%, rgba(196,30,36,.9) 28%, rgba(196,30,36,.6) 52%, rgba(196,30,36,.2) 74%, rgba(196,30,36,0) 100%),
    linear-gradient(0deg, rgba(15,8,9,.5) 0%, rgba(15,8,9,0) 42%),
    radial-gradient(120% 140% at 92% 4%, rgba(255,255,255,.14) 0%, transparent 46%);
}
.highlight__panel--navy.highlight__panel--photo .highlight__bg::after {
  background:
    linear-gradient(96deg, rgba(15,18,32,.96) 0%, rgba(20,24,42,.9) 30%, rgba(20,24,42,.62) 54%, rgba(20,24,42,.22) 76%, rgba(20,24,42,0) 100%),
    linear-gradient(0deg, rgba(6,8,16,.5) 0%, rgba(6,8,16,0) 42%),
    radial-gradient(120% 150% at 4% 100%, rgba(229,35,41,.3) 0%, transparent 52%);
}
.highlight__panel--blue.highlight__panel--photo .highlight__bg::after {
  background:
    linear-gradient(96deg, rgba(23,45,86,.96) 0%, rgba(36,76,142,.9) 30%, rgba(36,76,142,.6) 54%, rgba(36,76,142,.2) 76%, rgba(36,76,142,0) 100%),
    linear-gradient(0deg, rgba(8,16,32,.5) 0%, rgba(8,16,32,0) 42%),
    radial-gradient(120% 140% at 92% 4%, rgba(255,255,255,.14) 0%, transparent 46%);
}
.highlight__panel--photo .highlight__body { position: relative; z-index: 1; max-width: 50ch; }
.highlight__panel--photo .highlight__text { color: rgba(255,255,255,.94); }

@media (max-width: 620px) {
  .highlight__panel { flex-direction: column; align-items: flex-start; text-align: left; }
  .highlight__cta { width: 100%; }
  .highlight__deco { display: none; }
  .highlight__panel--photo { min-height: 0; }
  /* Na úzkém panelu scrim zesílí přes celou plochu, ať text drží kontrast. */
  .highlight__panel--red.highlight__panel--photo .highlight__bg::after {
    background:
      linear-gradient(180deg, rgba(168,25,32,.82) 0%, rgba(196,30,36,.9) 100%),
      linear-gradient(0deg, rgba(15,8,9,.4) 0%, rgba(15,8,9,0) 60%);
  }
  .highlight__panel--navy.highlight__panel--photo .highlight__bg::after {
    background: linear-gradient(180deg, rgba(15,18,32,.82) 0%, rgba(20,24,42,.92) 100%);
  }
  .highlight__panel--blue.highlight__panel--photo .highlight__bg::after {
    background: linear-gradient(180deg, rgba(23,45,86,.82) 0%, rgba(36,76,142,.92) 100%);
  }
}

/* ---- Responsive ---- */
/* Široký 5sloupcový pruh: mezikrok na 3 sloupce, ať karty neskočí rovnou z 5 na
   2 (na tabletu by pak byly buď přeplácané, nebo osamocené). */
@media (max-width: 1380px) {
  .refwhy--wide .refwhy__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
  .refwhy__grid { grid-template-columns: repeat(2, 1fr); }
  .refwhy--wide .refwhy__grid { grid-template-columns: repeat(2, 1fr); }
  /* band má specifičtější max-content sloupce → musí se stackovat explicitně */
  .refwhy--band .refwhy__grid { grid-template-columns: repeat(2, 1fr); justify-content: normal; }
  .ref-grid__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .refhero__top { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .refhero__media { aspect-ratio: 16 / 10; }
  .refhero__title { font-size: clamp(48px, 12vw, 72px); }
}
@media (max-width: 620px) {
  .refwhy__grid { grid-template-columns: 1fr; }
  .ref-grid__cards { grid-template-columns: 1fr; }
  .refcta__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .refcta__inner .btn { width: 100%; }
  .elpe-deco { display: none; } /* karta přes celou šířku → ikony by se schovaly/tlačily */
}
/* Řádkový layout pod 620 px (všechny varianty) je v bloku „SPOLEČNÝ MOBIL" u trust
   baru; tady jen pojistka pořadí — `.refwhy--wide .refwhy__grid` výše nesmí vyhrát. */
@media (max-width: 620px) {
  .refwhy--wide .refwhy__grid,
  .refwhy--band .refwhy__grid,
  .refwhy--band.refwhy--statband.refwhy--wide .refwhy__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   PODSTRÁNKY — světlý nav (modré položky, červený accent)
   Homepage (.home) má tmavý hero → ponechán beze změny.
   Platí pro všechny šablony mimo front-page.
   ========================================================= */
/* Horní lišta (rychlý kontakt) — tmavý text místo bílého */
body:not(.home):not(.nav-dark-hero) .nav__top a {
  color: var(--ink);
  text-shadow: none;
}
body:not(.home):not(.nav-dark-hero) .nav__top a strong { color: var(--navy); }

/* Bar — stejná logika jako homepage: nahoře transparentní (bez pillu),
   po scrollu plynule přejde do světlého pillu. Liší se jen barvou
   (bílé pozadí + modrý text), animace a přechody jsou identické. */
body:not(.home):not(.nav-dark-hero) header.nav.scrolled .nav__bar {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-color: transparent;
  box-shadow: 0 16px 48px rgba(44, 90, 166, .12);
}

/* Položky — tmavě modré, hover červený */
body:not(.home):not(.nav-dark-hero) .nav__link { color: var(--navy); }
body:not(.home):not(.nav-dark-hero) .nav__link:hover { color: var(--red); }
body:not(.home):not(.nav-dark-hero) .nav__item.open .nav__link {
  background: var(--blue-50);
  color: var(--navy);
}

/* E-shop ghost tlačítko — modrý outline místo liquid-glass */
body:not(.home):not(.nav-dark-hero) .nav__bar .btn--ghost {
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--navy);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:not(.home):not(.nav-dark-hero) .nav__bar .btn--ghost:hover {
  color: var(--red);
  border-color: var(--red);
  box-shadow: none;
}

/* Burger (mobil) — modré čáry na světlém baru */
body:not(.home):not(.nav-dark-hero) .burger {
  background: var(--blue-50);
  border-color: var(--blue-100);
}
body:not(.home):not(.nav-dark-hero) .burger:hover { background: var(--blue-100); }
body:not(.home):not(.nav-dark-hero) .burger span,
body:not(.home):not(.nav-dark-hero) .burger span::before,
body:not(.home):not(.nav-dark-hero) .burger span::after {
  background: var(--navy);
}

/* =========================================================
   O NÁS  (podstránka — od 1.103.0 blokový obsah přes page.php; .onas-* třídy nesou bloky)
   Reuse refhero / statcard / service cards / shops / eshop /
   partners / refcta; nové sekce: tým + „Rady z praxe".
   ========================================================= */

/* — Hero v2 (split) — text vlevo pod H1, slideshow vpravo — */
.onas-hero--split .refhero__inner {
  display: grid;
  /* Levý (textový) sloupec širší — pojme velký H1 ve stejné velikosti jako Reference. */
  grid-template-columns: 1.18fr .82fr;
  gap: clamp(36px, 5vw, 80px);
  /* Pinout nahoru: drobečky + H1 začínají na stejné výšce jako na Reference
     (align-items:center by je proti vyšší slideshow stlačilo dolů → nekonzistentní). */
  align-items: start;
}
.onas-hero__left { min-width: 0; }
/* H1 zůstává ve velikosti jako na Reference (.refhero__title clamp 54–104).
   Bez napevno vloženého <br> — zalomí se přirozeně, balance rozloží řádky rovnoměrně. */
.onas-hero--split .refhero__title { text-wrap: balance; }
.onas-hero__subtitle {
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  color: var(--muted);
}
.onas-hero__subtitle + .onas-hero__text { margin-top: clamp(12px, 1.4vw, 18px); }
.onas-hero__text { margin-top: clamp(20px, 2.4vw, 32px); }
.onas-hero__text p + p { margin-top: 16px; }
.onas-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
/* Mobil: tlačítka v hero na plnou šířku a se zalomením (jako hero na homepage).
   Bez toho „Chci nezávaznou nabídku zdarma" (nowrap, padding 32 px) přetékalo
   přes pravé odsazení stránky — na 393 px končilo 3 px od kraje displeje. */
@media (max-width: 600px) {
  .onas-hero__cta .btn {
    width: 100%;
    padding-inline: 20px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}
/* Pravý sloupec — portrétnější poměr než širokoúhlé refhero dole */
.onas-hero--split .refhero__media { aspect-ratio: 4 / 5; }

@media (max-width: 860px) {
  .onas-hero--split .refhero__inner { grid-template-columns: 1fr; }
  .onas-hero--split .refhero__media { aspect-ratio: 16 / 10; }
}

/* — Hero split: karta prodejny místo slideshow (stejná karta jako blok
     branch-contacts — foto → navy). .refhero__contact = jen poziční obal;
     vzhled řeší .shopcard. Pravý sloupec o něco užší. */
.onas-hero--contact .refhero__inner { grid-template-columns: 1.24fr .76fr; }
.refhero__contact { align-self: start; min-width: 0; }
.refhero__contact .shopcard { height: 100%; }

@media (max-width: 860px) {
  .onas-hero--contact .refhero__inner { grid-template-columns: 1fr; }
  .refhero__contact { max-width: 520px; }
}

/* — Trust bar (design .refwhy/.benefit jako na Reference; čísla = display font) — */
.onas-stats .benefit__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 3vw, 46px);
  line-height: 1;
  margin-bottom: 6px;
}
/* Mobil: 5sloupcová mřížka padala na 2 sloupce po 158 px → titulek i popisek se
   lámaly po 1–2 slovech, karty 300 px vysoké, pátá osiřelá, sekce 2,6 obrazovky.
   Řádkový layout (ikona vlevo, titulek + popisek vpravo) — stejný jazyk jako
   pruh „Klíčová čísla": karta ~112 px, celý výčet na jednu obrazovku. */
@media (max-width: 620px) {
  .onas-stats .refwhy__grid,
  .onas-stats.refwhy--wide .refwhy__grid { grid-template-columns: 1fr; gap: 12px; }
  .onas-stats .benefit {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 18px;
    row-gap: 4px;
    align-items: center;
    padding: 20px 22px;
  }
  .onas-stats .benefit__icon { grid-row: 1 / span 2; margin: 0; align-self: center; }
  .onas-stats .benefit__icon svg { width: 36px; height: 36px; }
  .onas-stats .benefit__title { font-size: 26px; margin: 0; }
  .onas-stats .benefit__text { font-size: 14.5px; line-height: 1.45; max-width: none; margin: 0; }
  /* Ghost ikona jen jako podpis v rohu, ne šum za textem. */
  .onas-stats .benefit__bg { height: 96px; top: auto; bottom: -22px; right: -26px; opacity: .55; }
}
/* Tablet: lichá poslední karta přes celou šířku, ať není osiřelá. */
@media (min-width: 621px) and (max-width: 1080px) {
  .onas-stats .refwhy__grid > .benefit:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* — Naše služby — dlouhý nadpis: širší box + rovnoměrné zalomení
   (homepage má krátký nadpis v 720px, tady je delší → jinak se láme divně) — */
/* Služby i Obchody sdílí stejnou hlavičku (.shops__head: nadpis vlevo, text
   vpravo) — sjednocený styl napříč podstránkou O nás. Perex zúžen na šířku
   textového bloku v hero (levý sloupec 1.18fr → ~685px při plné šířce wrapu),
   ať má stejnou délku řádku jako lead v hero. Blokově: service-cards varianta
   „onas" (.onas-services) a shops-grid s volbou užšího perexu (.shops--narrow-perex). */
.onas .shops__head p,
.onas-services .shops__head p,
.shops--narrow-perex .shops__head p { max-width: 685px; }

/* — Partneři + CTA „Ukázky našich prací" — čistý rytmus jako na Reference. —
   Na homepage .partners končí šedým gradientem, který navazuje na KONTAKT;
   na O nás po partnerech KONTAKT není, proto plochá bílá a zkrácený spodní
   padding — tlačítko „Ukázky našich prací" pak tvoří patičku sekce.
   `.partners--cta` = blok elpe/partners s tlačítkem pod sekcí. */
.onas .partners,
.partners--cta {
  background: var(--white);
  padding-bottom: clamp(48px, 6vw, 80px);
}
/* CTA sedí těsně pod partnery (jako patička), spodní mezeru k „Naše služby"
   tvoří padding-top následující .section → symetrický rytmus, ne plovoucí
   tlačítko ve velké prázdné ploše. */
.onas-work-cta .svc__all { margin-top: 0; }

/* — Tým: úvodní band — „background appears" à la masek.cz: sekce je průhledná,
   navy se VYNOŘÍ cross-fadem přes vrstvu .team-intro__bg (opacity 0→1, řízeno JS,
   start v ~50 % obrazovky). Obsah (nadpis) naskakuje SYNCHRONNĚ s navy → nikdy
   bílý text na bílém. Obsah leží nad vrstvou (z-index 1). — */
.team-intro { position: relative; background: transparent; color: #fff; overflow: clip; }
.team-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1; /* default plné (no-JS / reduced-motion = čitelné) */
  background:
    radial-gradient(130% 90% at 85% 0%, rgba(44,90,166,.24), transparent 58%),
    radial-gradient(90% 70% at 12% 12%, rgba(44,90,166,.14), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(229,35,41,.12), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
  /* Plynulý timed fade (princip masek.cz) — delší a jemnější doběh,
     nezávislý na rychlosti scrollu. */
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
/* JS: glow vrstva startuje skrytá a při vstupu se plynule dofadeuje (na trvalém
   navy podkladu → čitelnost není nikdy ohrožená). */
.team-intro.js-bgfade .team-intro__bg { opacity: 0; }
.team-intro.js-bgfade.is-bg-in .team-intro__bg { opacity: 1; }

/* Dekorační elektro ikony — světlé, nízká sytost; pár akcentů svítí navy-modrou.
   Sdílí fade-in s pozadím (vynoří se zároveň s navy). */
.team-intro__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.team-intro.js-bgfade .team-intro__deco { opacity: 0; }
.team-intro.js-bgfade.is-bg-in .team-intro__deco { opacity: 1; }
.team-intro__sym {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  color: #fff;
  opacity: var(--o, .07);
}
/* Levitace — pohyb je na svg (rotace + centrování drží span), ať se transformy
   nepřebíjejí. Různé doby/delaye/výkyvy → ikony plují nezávisle a s hloubkou. */
.team-intro__sym svg { display: block; animation: teamFloat var(--d, 8s) ease-in-out var(--dl, 0s) infinite; }
@keyframes teamFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(-1 * var(--fy, 16px))); }
}
.team-intro__sym--accent {
  color: #5b86d6;
  opacity: .22;
  filter: drop-shadow(0 0 14px rgba(91,134,214,.35));
}
.team-intro > .wrap { position: relative; z-index: 1; }
@media (max-width: 700px) {
  /* Na mobilu drž jen lehčí akcenty, ať pozadí nešumí pod textem. */
  .team-intro__sym:not(.team-intro__sym--accent) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .team-intro__deco { transition: none; }
  .team-intro__sym svg { animation: none; }
}
.team-intro__head { max-width: 880px; margin-bottom: clamp(28px, 3vw, 48px); }
.team-intro__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .98;
  letter-spacing: -.01em;
  color: #fff;
  margin: 0;
}
.team-intro__p {
  font-size: 19px;
  line-height: 1.6;
  color: rgba(188,191,206,.85);
  margin: 18px 0 0;
  max-width: 56ch;
}
/* Fotogalerie (blok elpe/photo-gallery) běží na světlém pozadí stránky —
   styl .team-intro je dělaný na tmavou sekci (bílý nadpis). Přebarvit. */
.wp-block-elpe-photo-gallery .team-intro__h2 { color: var(--navy); }
.wp-block-elpe-photo-gallery .team-intro__p { color: var(--muted); }
/* Varianta s navy glow podkladem (deco „husté pole" bez jiného pozadí) = tatáž
   sekce jako „Za ELPE stojí sehraný tým" na O nás → texty zpátky na bílé,
   jinak by navy nadpis zmizel v tmavém pozadí. */
.wp-block-elpe-photo-gallery.team-intro--glow .team-intro__h2 { color: #fff; }
.wp-block-elpe-photo-gallery.team-intro--glow .team-intro__p { color: rgba(188, 191, 206, .85); }
.team-intro--glow > .wrap { position: relative; z-index: 1; }
.team-intro__cta { margin-top: clamp(28px, 3vw, 44px); text-align: center; }

/* — Fotogalerie (.pgal) — kaskádová mozaika: 4 nezávislé sloupce
     s posunutými horními hranami, dlaždice v různém poměru stran.
     Sdílený lightbox. — */
.pgal {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 1.6vw, 26px);
}
.pgal__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 26px);
}
/* Kaskáda — rozeseté horní hrany sloupců (efekt „pod sebe"). */
.pgal__col:nth-child(2) { margin-top: clamp(26px, 4.5vw, 76px); }
.pgal__col:nth-child(3) { margin-top: clamp(10px, 2vw, 34px); }
.pgal__col:nth-child(4) { margin-top: clamp(40px, 6vw, 100px); }

.pgal__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-700);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 20px 44px -16px rgba(0,0,0,.55);
  transition: box-shadow .5s cubic-bezier(.22,.61,.36,1);
}
/* Různé poměry stran → mozaikový rytmus (2 dlaždice na sloupec). */
.pgal__col:nth-child(1) .pgal__item:nth-child(2) { aspect-ratio: 4 / 3; }
.pgal__col:nth-child(2) .pgal__item:nth-child(1) { aspect-ratio: 1 / 1; }
.pgal__col:nth-child(3) .pgal__item:nth-child(2) { aspect-ratio: 1 / 1; }
.pgal__col:nth-child(4) .pgal__item:nth-child(1) { aspect-ratio: 4 / 3; }

/* — Varianta „mřížka" (.pgal--grid) a „duo" (.pgal--duo): stejné dlaždice 4:3
     vedle sebe. Grid = 3 sloupce (delší série realizací), duo = 2 sloupce
     (dvojice fotek roztažená na šíři kontejneru). Sloupce rušíme přes
     display:contents → dlaždice jdou přímo do CSS gridu v pořadí výběru.
     Tablet 2 sloupce, mobil 1. — */
.pgal--grid,
.pgal--duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.pgal--grid { grid-template-columns: repeat(3, 1fr); }
/* Přesně 2 fotky (grid má jediný .pgal__col) → dvojice na půl kontejneru,
   ať ve třetím sloupci nezůstane díra. */
.pgal--grid:has(.pgal__col > .pgal__item:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.pgal--grid .pgal__col,
.pgal--duo .pgal__col { display: contents; }
.pgal--grid .pgal__item,
.pgal--duo .pgal__item { aspect-ratio: 4 / 3 !important; margin-top: 0 !important; }
@media (max-width: 900px) {
  .pgal--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pgal--grid,
  .pgal--duo { grid-template-columns: 1fr; }
}

/* Mřížková galerie (3 sloupce) dostane širší kontejner než zbytek stránky —
   dlaždice by jinak v 1320px vyšly úzké. Roztažení se týká celé sekce včetně
   nadpisu, aby zarovnání sedělo. Uvnitř článku platí override níže. */
.team-intro:has(.pgal--grid) > .wrap { max-width: 1560px; }
/* Volitelná šířka obsahu (atribut `width` bloku). Výchozí 'auto' = pravidlo výše,
   takže beze změny všude, kde se šířka neřeší. Dvojitá třída kvůli specificitě —
   `:has()` bere specificitu svého argumentu, takže pravidlo nad tímto váží 0,3,0. */
.team-intro.team-intro--w-content > .wrap { max-width: var(--maxw); }
.team-intro.team-intro--w-wide > .wrap { max-width: min(1840px, 94vw); }
.team-intro.team-intro--w-full > .wrap { max-width: none; }

/* Blok Fotogalerie (.team-intro) VLOŽENÝ DO ČLÁNKU (světlé pozadí):
   zarovnat na šíři textového sloupce (.wrap odsazení pryč, jako text/tabulky),
   barvy a velikost nadpisu na světlé pozadí, přiměřené svislé mezery. */
.article__body .team-intro.section { padding: clamp(28px, 3.6vw, 44px) 0; color: inherit; }
.article__body .team-intro > .wrap { max-width: none; padding-left: 0; padding-right: 0; }
.article__body .team-intro__head { max-width: none; margin-bottom: clamp(16px, 2vw, 28px); }
.article__body .team-intro__h2 { color: var(--navy); font-size: clamp(28px, 3vw, 40px); }
.article__body .team-intro__p { color: var(--muted); }

/* — „Za ELPE stojí sehraný tým" — větší fotky + výraznější kaskáda.
     Scroll-scrub „objevení" každé dlaždice řídí JS (initGSAP →
     .team-intro .pgal__item: clip-path wipe + posun + scale). — */
.team-intro .pgal { gap: clamp(16px, 1.9vw, 30px); }
.team-intro .pgal__col { gap: clamp(16px, 1.9vw, 30px); }
/* Jednotná výška všech dlaždic (~380px na desktopu, responzivní na mobil).
   !important přebíjí mozaikové per-dlaždice poměry (.pgal__col:nth-child…). */
.team-intro .pgal__item {
  aspect-ratio: auto !important;
  height: clamp(240px, 24vw, 380px) !important;
  will-change: transform, opacity;
}
.team-intro .pgal__col:nth-child(2) { margin-top: clamp(40px, 6.5vw, 120px); }
.team-intro .pgal__col:nth-child(3) { margin-top: clamp(16px, 3vw, 52px); }
.team-intro .pgal__col:nth-child(4) { margin-top: clamp(56px, 8.5vw, 150px); }

.pgal__item img,
.pgal__item video,
.article__body .pgal__item img {   /* přebij .article__body img (height:auto + border-radius) */
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.pgal__item:hover,
.pgal__item:focus-visible {
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -18px rgba(0,0,0,.72);
}
.pgal__item:hover img,
.pgal__item:hover video,
.pgal__item:focus-visible img,
.pgal__item:focus-visible video { transform: scale(1.06); }
/* Play badge na video dlaždici (přes náhled prvního snímku). */
.pgal__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 44px;
  pointer-events: none;
  text-shadow: 0 4px 18px rgba(0,0,0,.55);
  z-index: 1;
  transition: opacity .3s ease, transform .4s ease;
}
.pgal__item--video:hover .pgal__play { transform: scale(1.08); }
/* Když video hraje (autoplay ve viewportu), play badge schovej. */
.pgal__item--video.is-playing .pgal__play { opacity: 0; }
.pgal__zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(180deg, rgba(25,30,48,0) 40%, rgba(25,30,48,.5) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.pgal__item:hover .pgal__zoom,
.pgal__item:focus-visible .pgal__zoom { opacity: 1; }
/* Dotyková zařízení nemají hover → trvalý jemný signál, že fotka je klikací. */
@media (hover: none) {
  .pgal__zoom {
    opacity: 1;
    font-size: 20px;
    background: linear-gradient(180deg, rgba(25,30,48,0) 60%, rgba(25,30,48,.42) 100%);
  }
  .pgal__zoom .ti { padding: 7px; border-radius: 50%; background: rgba(25,30,48,.45); }
}

@media (prefers-reduced-motion: reduce) {
  .pgal__item img { transition: none; }
  .pgal__item:hover img { transform: none; }
}

/* — Tým: mřížka lidí — */
.team { background: var(--surface); }
/* Sekce „Lidé…" — pozadí jako „Důvěřují nám" (modrý gradient) + jemné elektro
   ikony jako u CTA „Chcete podobnou realizaci?". `.team--deco` = blok
   elpe/team-grid s dekorací (O nás od 1.103.0 blokově, bez main.onas). */
.onas .team,
.team--deco {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--surface) 100%);
}
.onas .team > .wrap,
.team--deco > .wrap { position: relative; z-index: 1; }
.team__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.team__sym {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  color: var(--navy);
  opacity: .06;
}
.team__sym svg { display: block; }
.team__head { max-width: 880px; margin-bottom: clamp(28px, 3vw, 48px); }
.team__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.team__card { margin: 0; }
.team__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--g0);
  box-shadow: var(--shadow-sm);
}
.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.team__card:hover .team__photo img { transform: scale(1.05); }
.team__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--g4);
}
.team__meta { padding: 16px 2px 0; }
.team__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.7vw, 27px);
  line-height: 1.05;
  color: var(--navy);
  margin: 0;
}
.team__role { font-size: 15px; line-height: 1.45; color: var(--muted); margin: 6px 0 0; }
.team__cta { margin-top: clamp(40px, 4vw, 64px); }

@media (prefers-reduced-motion: reduce) {
  .team__card:hover .team__photo img { transform: none; }
}

/* — Rady z praxe (blog listing) — */
.blog__head { max-width: 880px; margin-bottom: clamp(28px, 3vw, 48px); }
.blog__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-l);
  line-height: .96;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0;
}
.blog__sub { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 16px 0 0; }
.blog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(24px, 2.6vw, 40px);
}
/* Editorial bezrámečková karta (dle reference) — zaoblená fotka + text pod ní. */
.blog__card { display: flex; flex-direction: column; }
.blog__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--g0);
  margin-bottom: clamp(16px, 1.6vw, 20px);
}
.blog__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.blog__card:hover .blog__media img { transform: scale(1.04); }
.blog__body { display: flex; flex-direction: column; flex: 1; }
.blog__cat {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--g5);
}
.blog__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.35;
  color: var(--navy);
  margin: 6px 0 0;
}
.blog__title a { color: inherit; transition: color .18s; }
.blog__title a:hover { color: var(--red); }
.blog__perex { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 8px 0 0; }
.blog__foot { display: flex; align-items: center; gap: 8px; margin-top: clamp(16px, 1.8vw, 22px); font-size: 14px; }
.blog__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: visible;
  background: var(--g1);
  display: grid;
  place-items: center;
  position: relative;
}
.blog__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 50%; }
.blog__avatar-ph { color: var(--g4); display: grid; place-items: center; }
.blog__author { font-weight: 600; color: var(--navy); }
a.blog__cat,
a.blog__author { transition: color .18s; }
a.blog__cat:hover,
a.blog__author:hover { color: var(--red); }
.blog__dot { color: var(--g3); }
.blog__date { color: var(--muted); }
.blog__more { margin-top: clamp(14px, 1.6vw, 18px); color: #de1a20; /* kontrast 4,5:1 na #f5f5f8 */ }
.blog__more:hover { color: var(--red-700); }

/* — Rady z praxe na O nás: BÍLÝ zaoblený panel (.wrap) na šedém (#f5f5f8)
   full-bleed podkladu (sekce). Karty jsou „editorial" bezrámečkové, bez stínu
   — splývají s bílým panelem. blog__* používá jen elpe_blog_listing (O nás).
   `.blog--panel` = blok elpe/blog-listing ve variantě „panel" (O nás blokově). */
.onas .blog,
.blog--panel {
  background: var(--surface);   /* #f5f5f8 za bílým panelem i kolem něj */
  border-radius: 0;
  margin-inline: 0;
}
.onas .blog > .wrap,
.blog--panel > .wrap {
  position: relative;
  overflow: clip;            /* ořízne značku na zaoblený panel */
  max-width: min(1840px, 96vw);  /* stejný container jako Služby/Obchody (.shops > .wrap) */
  background: var(--white);
  border-radius: clamp(28px, 3vw, 48px);
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
/* Brandová značka (blesk z loga) — stejný design jako na Reference
   (.ref-grid__mark--right): bílá silueta + jemný modrý stín, natočená,
   vykukuje z pravého horního rohu. Dekorace za obsahem. */
.blog__brandmark {
  position: absolute;
  top: clamp(-48px, -3vw, -24px);
  right: 0;
  width: clamp(200px, 22vw, 360px);
  z-index: 0;
  pointer-events: none;
  transform: translate(18%, 0) rotate(-18deg);
  filter: drop-shadow(0 6px 18px rgba(44, 90, 166, .12));
}
.blog__brandmark svg { display: block; width: 100%; height: auto; }
/* Obsah panelu nad značkou. */
.onas .blog__head,
.onas .blog__grid,
.blog--panel .blog__head,
.blog--panel .blog__grid { position: relative; z-index: 1; }
/* Široký panel → 4 kartičky v řadě. */
.onas .blog__grid,
.blog--panel .blog__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .onas .blog__grid, .blog--panel .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .onas .blog__grid, .blog--panel .blog__grid { grid-template-columns: 1fr; } }
.onas .blog__card,
.blog--panel .blog__card {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.onas .blog__card:hover,
.blog--panel .blog__card:hover { box-shadow: none; }
/* Značka „E" z loga v kolečku — vrstva v pravém dolním rohu avataru autora. */
.blog__mark {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 17px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 2px 8px -2px rgba(11, 13, 20, .4);
  z-index: 2;
}
.blog__mark svg { width: 58%; height: auto; display: block; }
/* Avatar v hlavičce článku = zaoblený čtverec (jako karta autora), ne kolečko.
   Scoped na .article__author → karty v mřížce/výpisu zůstávají kolečka. */
.article__author .blog__avatar,
.article__author .blog__avatar img { border-radius: 22%; }

@media (max-width: 900px) {
  .pgal { flex-wrap: wrap; }
  .pgal__col { flex: 1 1 calc(50% - 16px); }
  .pgal__col:nth-child(2) { margin-top: clamp(36px, 8vw, 72px); }
  .pgal__col:nth-child(3),
  .pgal__col:nth-child(4) { margin-top: 0; }
}
@media (max-width: 560px) {
  .pgal { gap: 14px; }
  .pgal__col { flex: 1 1 calc(50% - 7px); }
  .pgal__col:nth-child(2) { margin-top: 28px; }
}
@media (max-width: 560px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .blog__grid { grid-template-columns: 1fr; }
}

/* Výpis blogu/rubriky — PEVNÝ počet sloupců (4/3/2/1, vše dělí 12 článků/stránku),
   aby byly řádky vždy plné. Auto-fill jinak na širokém displeji udělal 5 sloupců
   → neúplný poslední řádek + prázdné místo před stránkováním. */
.blogpage__list .blog__grid,
.article__related .blog__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1280px) { .blogpage__list .blog__grid, .article__related .blog__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .blogpage__list .blog__grid, .article__related .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .blogpage__list .blog__grid, .article__related .blog__grid { grid-template-columns: 1fr; } }

/* =========================================================
   BLOG — výpis (home.php) + detail (single.php)
   ========================================================= */
/* Hero i featured karta = užší jako podstránky (1480, .refhero__inner / Reference).
   Mřížka článků = široká jako „Rady z praxe" na O nás → min(1840px, 96vw). */
.article .wrap,
.blogpage__featured > .wrap { max-width: 1480px; }
.blogpage__list > .wrap,
.article__related > .wrap { max-width: min(1840px, 96vw); } /* related = stejný kontejner jako výpis blogu */
/* Hero = .refhero (sdílený s Reference). Tady jen mezery navazujících sekcí. */
.blogpage__featured { padding-block: 0 clamp(40px, 5vw, 72px); }
.blogpage__list { padding-top: clamp(8px, 1.5vw, 20px); }
.blogpage__empty { font-size: 18px; color: var(--muted); }
.blogpage__all { text-align: center; margin-top: clamp(32px, 4vw, 52px); }

/* Klikací kategorie na kartách → archiv rubriky. */
a.blog__cat { transition: color .18s ease; }
a.blog__cat:hover { color: var(--red); }
a.bfeat__cat { transition: color .18s ease; }
a.bfeat__cat:hover { color: var(--red-700); }

/* — Featured velká karta — stejný design jako malá karta, jen na šířku:
   zaoblená fotka + zaoblený surface panel s textem, oddělené mezerou. */
.bfeat {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  align-items: stretch;
  gap: clamp(18px, 2vw, 36px);
}
.bfeat__media { display: block; overflow: hidden; border-radius: var(--r-xl); }
.bfeat__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.bfeat:hover .bfeat__media img { transform: scale(1.04); }
.bfeat__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.2vw, 56px);
}
.bfeat__cat { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #de1a20; /* kontrast 4,5:1 na #f5f5f8 (jako .eyebrow) */ }
.bfeat__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xs);
  line-height: 1.02;
  color: var(--navy);
  margin: 12px 0 0;
}
.bfeat__title a { color: inherit; transition: color .18s; }
.bfeat__title a:hover { color: var(--red); }
.bfeat__perex { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 16px 0 0; max-width: 54ch; }
.bfeat__foot { display: flex; align-items: center; gap: 8px; margin: clamp(20px, 2vw, 28px) 0 0; font-size: 14px; }
.bfeat__cta { margin-top: clamp(22px, 2.4vw, 32px); }
@media (prefers-reduced-motion: reduce) {
  .bfeat__media img { transition: none; }
  .bfeat:hover .bfeat__media img { transform: none; }
}
@media (max-width: 860px) {
  .bfeat { grid-template-columns: 1fr; }
  .bfeat__media img { min-height: 0; aspect-ratio: 16 / 10; }
  .bfeat__body { padding: clamp(24px, 5vw, 40px); }
}

/* — Stránkování — */
.blogpag { margin-top: clamp(40px, 5vw, 64px); }
.blogpag ul.page-numbers {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.blogpag a.page-numbers,
.blogpag span.page-numbers,
.blogpag button.page-numbers {
  display: inline-grid; place-items: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: 12px; font-weight: 600; font-size: 15px;
  color: var(--navy); background: var(--surface); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.blogpag a.page-numbers:hover,
.blogpag button.page-numbers:hover { background: var(--navy); color: #fff; }
.blogpag span.page-numbers.current { background: var(--red); color: #fff; cursor: default; }
.blogpag .page-numbers.dots { background: transparent; }

/* Filtr rubrik na blogu: na indexu KLIENTSKÝ filtr (tlačítka .ref-chip,
   initBlogFilter) — filtruje karty v místě, bez navigace/skoku; na archivu
   rubriky (category.php) jsou to odkazy. Do rubriky vede štítek na kartě. */
.blog__filter { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 4.5vw, 68px); }
/* Klientský filtr nesmí poskakovat: (1) overflow-anchor vypne automatické
   dorovnání scrollu prohlížečem při skrytí karet; (2) min-výška drží stránku
   dost vysokou, aby při málo článcích nezkrátla pod scroll pozici. */
.blogpage__list { overflow-anchor: none; }
.blogpage__list .blog__grid { min-height: 72vh; align-content: start; }
a.ref-chip { text-decoration: none; display: inline-flex; align-items: center; }
.blog__card.is-hidden,
.bfeat.is-hidden { display: none; }

/* =========================================================
   ČLÁNEK — detail (single.php)
   ========================================================= */
/* Hlavička detailu sedí stejně jako hero podstránek (top padding pod fixní nav). */
.article__head {
  padding-top: clamp(150px, 18vh, 220px);
  padding-bottom: clamp(20px, 2.5vw, 36px);
  background: linear-gradient(180deg, var(--surface) 0%, var(--white) 100%);
}
/* Titulek, chip kategorie a meta/autor v užším sloupci textu (jako .article__body);
   drobečky zůstávají v plné šířce .wrap. */
.article__head-inner { max-width: 760px; margin-inline: auto; }
.article__h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1-article);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 14px 0 0;
  max-width: 20ch;
}
/* Kategorie jako šedý chip pod titulkem. */
.article__cat {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: clamp(20px, 2.4vw, 32px);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--g1);
  color: var(--navy);
  font-size: 14px;
  font-weight: 500;
  transition: background .18s, color .18s;
}
.article__cat:hover { background: var(--red); color: var(--white); }
/* Firemní informace (interní zpravodaj) — štítek místo rubriky, bez hoveru. */
.article__cat--info { gap: 8px; cursor: default; }
.article__cat--info:hover { background: var(--g1); color: var(--navy); }
.article__cat--info svg { flex: none; }
.blogpage__empty { max-width: 60ch; color: var(--muted); font-size: 17px; }
/* Meta řádek roztažený na šířku: autor | datum | doba čtení. */
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(24px, 3vw, 48px);
  margin-top: clamp(28px, 3.2vw, 44px);
  font-size: 15px;
  color: var(--muted);
}
.article__author { display: inline-flex; align-items: center; gap: 12px; }
.article__author-text { display: flex; flex-direction: column; line-height: 1.3; }
.article__role { font-size: 14px; color: var(--muted); }
.article__rt { display: inline-flex; align-items: center; gap: 5px; }
.article__updated { color: var(--g5); font-style: italic; }
.article__hero { margin: clamp(20px, 3vw, 40px) 0 0; }
/* Hlavní fotka přesně na šíři textového sloupce (760px) — omezujeme samotný
   obrázek (jako .article__body), ne .wrap (ten má ještě boční padding, který
   by fotku zúžil na ~656px). */
.article__hero img {
  width: 100%; max-width: 760px; margin: 0 auto;
  height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-xl); display: block;
}
.article__bodywrap { padding-top: clamp(40px, 5vw, 64px); }
.article__body {
  max-width: 760px; margin: 0 auto;
  font-size: 18px; line-height: 1.78; color: var(--ink);
}
.article__body > * { margin: 0 0 20px; }
.article__body > *:last-child { margin-bottom: 0; }
.article__body h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px); line-height: 1.05; color: var(--navy);
  margin: clamp(32px, 3.5vw, 48px) 0 14px;
}
.article__body h3 { font-size: 22px; font-weight: 700; color: var(--navy); margin: 28px 0 10px; }
.article__body h4 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 22px 0 6px; }
/* Importovaný obsah má často <strong>/<b> UVNITŘ nadpisů → přes display font
   vzniká „fake bold" (přetučnělé). Dědit váhu i řez nadpisu. */
.article__body h1 strong, .article__body h1 b,
.article__body h2 strong, .article__body h2 b,
.article__body h3 strong, .article__body h3 b,
.article__body h4 strong, .article__body h4 b,
.article__body h5 strong, .article__body h5 b,
.article__body h6 strong, .article__body h6 b { font-weight: inherit; font-family: inherit; }
.article__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.article__body a:hover { color: var(--red); }
.article__body img { max-width: 100%; height: auto; border-radius: var(--r-lg); }
/* Obrázek vložený přímo do textu (samostatná figure) — vzdušné okraje, volitelný popisek. */
.article__body figure { margin: clamp(28px, 3.6vw, 44px) 0; }
.article__body figure img { display: block; width: 100%; }
.article__body figcaption {
  margin-top: 10px; font-size: 15px; line-height: 1.5;
  color: var(--muted); text-align: center;
}
/* Logo/úzký snímek v textu — necpat na plnou šířku sloupce. */
.article__body figure.is-logo { text-align: center; }
.article__body figure.is-logo img { width: auto; max-width: min(320px, 100%); margin: 0 auto; }
.article__body ul, .article__body ol { padding-left: 1.3em; }
.article__body li { margin: 6px 0; }
.article__body blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--red);
  font-size: 21px; line-height: 1.5; color: var(--navy);
}
/* Tabulky v článku — čistý design dle ELPE, vodorovný scroll na mobilu.
   Platí pro custom `.etable` i pro nativní Gutenberg blok `.wp-block-table`
   (ten klient vkládá z adminu) → vypadají stejně. */
.article__body .etable-wrap,
.article__body .wp-block-table {
  margin: clamp(24px, 3vw, 36px) 0;
  overflow-x: auto;
  border: 1px solid var(--g1);
  border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}
.article__body .etable,
.article__body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
}
.article__body .etable th,
.article__body .etable td,
.article__body .wp-block-table th,
.article__body .wp-block-table td {
  padding: 13px 18px;
  text-align: left;
  vertical-align: top;
  border: 0;
}
.article__body .etable thead th,
.article__body .wp-block-table thead th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  white-space: nowrap;
}
.article__body .etable tbody td,
.article__body .wp-block-table tbody td {
  border-top: 1px solid var(--g1);
  color: var(--navy);
}
.article__body .etable tbody tr:nth-child(even),
.article__body .wp-block-table tbody tr:nth-child(even) { background: var(--surface); }
.article__body .etable tbody tr:hover,
.article__body .wp-block-table tbody tr:hover { background: var(--g0); }
/* Popisek tabulky (figcaption uvnitř wp-block-table) sedí na styl popisků fotek. */
.article__body .wp-block-table figcaption { margin-top: 0; }

.article__foot { max-width: 760px; margin: clamp(36px, 4vw, 56px) auto 0; }
/* „Zpět na blog" na konci článku (za souvisejícími) — vycentrované. */
.article__back { text-align: center; }

/* — Pod obsahem: sdílení + karta autora (oba v šíři textového sloupce 760px) — */
.article__share,
.authorbio { max-width: 760px; margin-inline: auto; }

.article__share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(18px, 2.4vw, 32px);
  margin-top: clamp(32px, 4vw, 52px);
  padding-bottom: clamp(20px, 2.4vw, 28px);
}
.article__share-label { font-weight: 700; color: var(--navy); }
.article__share-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--navy);
  transition: color .18s ease;
}
.article__share-link svg { flex: none; }
.article__share-link span {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article__share-link:hover { color: var(--red); }

.authorbio {
  margin-top: clamp(28px, 3.2vw, 40px);
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: clamp(28px, 3.4vw, 44px);
}
.authorbio__head { display: flex; align-items: center; gap: 18px; }
.authorbio__avatar {
  flex: none;
  position: relative;
  width: 80px; height: 80px;
  /* overflow viditelný → kolečko se znakem E (.blog__mark) může přesáhnout roh;
     zaoblení proto na samotném obrázku/placeholderu, ne na wrapperu. */
}
.authorbio__avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 16px;
}
.authorbio__avatar-ph {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  color: var(--g5);
  background: var(--g1);
  border-radius: 16px;
}
.authorbio__avatar .blog__mark { width: 26px; right: -5px; bottom: -5px; }
.authorbio__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.authorbio__name { font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1.2; }
a.authorbio__name { transition: color .18s ease; }
a.authorbio__name:hover { color: var(--red); }
.authorbio__role { font-size: 15px; color: var(--muted); }
.authorbio__text {
  margin-top: clamp(18px, 2vw, 24px);
  font-size: 16px; line-height: 1.7; color: var(--ink);
}
.authorbio__text > *:last-child { margin-bottom: 0; }
.authorbio__all {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(18px, 2vw, 24px);
  font-weight: 700; color: var(--navy);
  transition: color .18s ease;
}
.authorbio__all .ti { transition: transform .22s ease; }
.authorbio__all:hover { color: var(--red); }
.authorbio__all:hover .ti { transform: translateX(5px); }
@media (max-width: 560px) {
  .authorbio__head { gap: 14px; }
  .authorbio__avatar { width: 64px; height: 64px; }
}

/* Související články */
.article__related { background: var(--surface); }
.article__related-h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xs);
  line-height: 1.02;
  color: var(--navy);
  margin: 0 0 clamp(28px, 3vw, 44px);
}
/* Autor klikací (karty, featured, detail) → detail autora. */
a.blog__author { transition: color .18s ease; }
a.blog__author:hover { color: var(--red); }

/* =========================================================
   AUTOR — detail (single-autor.php)
   ========================================================= */
.autorpage__head {
  /* Identický padding jako sdílený hero podstránek (.refhero). */
  padding: clamp(150px, 18vh, 220px) 0 clamp(60px, 7vw, 110px);
  background: linear-gradient(180deg, var(--surface) 0%, var(--white) 100%);
}
/* Hlavička autora = stejný užší kontejner jako hero blogu (1480, .refhero__inner).
   Výpis článků = široký jako blog list → min(1840px, 96vw). */
.autorpage__head > .wrap { max-width: 1480px; }
.autorpage__list > .wrap { max-width: min(1840px, 96vw); }
.autorpage__card {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 40px);
  max-width: 940px;
  margin-top: 68px;
}
.autorpage__avatar {
  position: relative;
  flex: none;
  align-self: start;
  width: clamp(220px, 24vw, 280px);
  height: clamp(220px, 24vw, 280px);
  aspect-ratio: 1;
  border-radius: 20%;
  background: var(--g1);
  display: grid;
  place-items: center;
}
.autorpage__avatar img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 20%; display: block; }
.autorpage__avatar-ph { color: var(--g4); }
.autorpage__avatar .blog__mark { width: clamp(44px, 5.5vw, 58px); right: -4px; bottom: -4px; }
.autorpage__info { min-width: 0; }
.autorpage__role { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.autorpage__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1-article);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 8px 0 0;
}
.autorpage__bio { font-size: 17px; line-height: 1.7; color: var(--muted); margin: 16px 0 0; max-width: 64ch; }
.autorpage__bio p { margin: 0 0 12px; }
.autorpage__bio p:last-child { margin-bottom: 0; }
.autorpage__list { padding-top: clamp(8px, 1.5vw, 20px); }
.autorpage__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xs);
  line-height: 1.02;
  color: var(--navy);
  margin: 0 0 clamp(28px, 3vw, 44px);
}
@media (max-width: 600px) {
  .autorpage__card { flex-direction: column; }
}

/* =========================================================
   DETAIL SLUŽBY — sdílené sekce (Trafostanice)
   ========================================================= */

/* Sdílený sekční nadpis (vlevo, display font) */
.fsplit__body h2,
.modes__head h2,
.related__head h2,
.work__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: .96;
  color: var(--navy);
  margin: 0;
}
.modes__head,
.related__head,
.work__head { margin: 0 0 clamp(32px, 4vw, 56px); }
.modes__sub { margin: 14px 0 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; max-width: 60ch; }

/* ── Střídavá sekce text + foto (.fsplit) ── */
.fsplit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.fsplit__media {
  order: 2;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--g1);
  aspect-ratio: 7 / 6;
  margin: 0;
  display: grid;
  place-items: center;
}
.fsplit__grid--imgleft .fsplit__media { order: 0; }
/* Celý obrázek bez ořezu (plakát, dokument, logo): bílá „karta" s okrajem, jemný stín. */
.fsplit__media--contain { background: #fff; padding: clamp(18px, 2vw, 28px); box-shadow: 0 2px 12px rgba(11,13,20,.06); }
.fsplit__media--contain img { object-fit: contain; height: auto; max-height: 100%; }
/* Textová varianta bez fotky — jeden sloupec, čitelná šířka řádku. */
.fsplit__grid--textonly { grid-template-columns: 1fr; max-width: 760px; }
.fsplit__footer { margin-top: 18px; }
.fsplit__media img,
.fsplit__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fsplit__ph { color: var(--g4); font-size: 20px; }
.fsplit__body { order: 1; }
/* Světlé pozadí celé sekce (např. promo pruh „Akce na spotřebič"). */
.fsplit.elpe-secbg--surface { background: var(--surface); }
.fsplit__text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin: clamp(18px, 2vw, 26px) 0 clamp(24px, 2.6vw, 34px);
  max-width: 46ch;
}
/* Společný nadpis nad sérií střídavých sekcí (např. „Naše služby v oblasti
   ochrany před bleskem" u Hromosvodů). Typografie shodná s .refwhy__h2
   (trust-bar), aby sekční nadpisy napříč detaily služeb vypadaly stejně. */
.fsplit__sectionh {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-l);
  line-height: 1;
  color: var(--navy);
  margin: 0 0 clamp(32px, 4vw, 56px);
  max-width: 20ch;
}
.fsplit--dark .fsplit__sectionh { color: #fff; }
/* Volitelné odrážky pod textem — stejný rytmus jako .offer__catlist. */
.fsplit__list {
  list-style: none; margin: calc(-1 * clamp(12px, 1.4vw, 18px)) 0 clamp(24px, 2.6vw, 34px);
  padding: 0; display: grid; gap: 10px; max-width: 46ch;
}
/* Bez perexu jde seznam rovnou za nadpisem — záporný horní margin (ten sedí
   jen pod .fsplit__text) by ho vtáhl do nadpisu. Odsazení pak stejné jako
   u perexu, ať je rytmus sekce shodný s variantou s textem. */
.fsplit__body h2 + .fsplit__list { margin-top: clamp(18px, 2vw, 26px); }
.fsplit__list li { position: relative; padding-left: 20px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.fsplit__list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.fsplit--dark .fsplit__list li { color: rgba(255,255,255,.78); }
/* Cena přivěšená ke konkrétní odrážce — pilulka na vlastním řádku pod textem
   položky, aby byla vazba položka↔cena jednoznačná (rozpisy služeb). */
.fsplit__litext { display: block; }
.fsplit__price {
  display: inline-block; margin-top: 7px;
  padding: 3px 11px; border-radius: 999px;
  background: var(--blue-50, #eef3fb); color: var(--navy);
  font-size: 13.5px; font-weight: 700; line-height: 1.45;
  white-space: nowrap;
}
.fsplit--dark .fsplit__price { background: rgba(255,255,255,.12); color: #fff; }

/* Tmavá varianta (navy gradient jako „Za ELPE stojí sehraný tým" na O nás) */
.fsplit--dark { position: relative; color: #fff; overflow: clip; }
.fsplit__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 90% at 85% 0%, rgba(44,90,166,.24), transparent 58%),
    radial-gradient(90% 70% at 12% 12%, rgba(44,90,166,.14), transparent 55%),
    radial-gradient(100% 80% at 0% 100%, rgba(229,35,41,.12), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
}
.fsplit--dark > .wrap { position: relative; z-index: 1; }
.fsplit--dark .fsplit__body h2 { color: #fff; }
.fsplit--dark .fsplit__text { color: rgba(255,255,255,.78); }
.fsplit--dark .fsplit__media { background: rgba(255,255,255,.06); position: relative; }
.fsplit--dark .fsplit__ph { color: rgba(255,255,255,.45); }

/* WOW — rozházené elektro ikony v pozadí (stejný motiv jako Reference CTA),
   jen prosvícené pro tmavé pozadí. Obsah je nad nimi (.wrap z-index:1). */
.fsplit--dark .elpe-deco__sym { color: #fff; opacity: .05; }
/* Animovaný elektrický oblouk po okraji fotky (stejný motiv jako tmavý stat band). */
.fsplit--dark .fsplit__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent            0deg,
    transparent          300deg,
    rgba(229, 35, 41, .45) 338deg,
    rgba(255, 160, 140, .9) 352deg,
    #fff                  358deg,
    rgba(255, 160, 140, .9) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 4.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .fsplit--dark .fsplit__bg::before,
  .fsplit--dark .fsplit__media::after { animation: none; }
}

/* Opt-in „spark" — týž elektrický oblouk po okraji fotky i na SVĚTLÉ variantě
   feature-splitu (tmavá ho má napevno výše). Zapíná atribut bloku `spark`. */
.fsplit__media--spark { position: relative; }
.fsplit__media--spark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--angle),
    transparent            0deg,
    transparent          300deg,
    rgba(229, 35, 41, .45) 338deg,
    rgba(255, 160, 140, .9) 352deg,
    #fff                  358deg,
    rgba(255, 160, 140, .9) 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-spin 4.5s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .fsplit__media--spark::after { animation: none; }
}

/* ── Režimy / srovnání (.modes) ── */
.modes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
.modes__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.modes__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .modes__grid--cols-3,
  .modes__grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .modes__grid--cols-3,
  .modes__grid--cols-4 { grid-template-columns: 1fr; }
}
/* Pilulka jen s číslem (krok bez slovního popisku) — kompaktní kolečko. */
.modes__step--num { min-width: 34px; justify-content: center; padding: 7px 12px; font-size: 14px; }
/* Karty ve stylu „kroků" (light surface, velký bold nadpis, outline pill). */
.modes__col {
  background: var(--surface);
  border: 1px solid rgba(25, 30, 48, .06);
  border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 3.4vw, 48px);
  box-shadow: none;
}
.modes__colhead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: clamp(16px, 1.8vw, 22px);
}
/* Outline pill „Režim N" — modrý okraj + modrý text na bílém (jako „Step N"). */
.modes__step {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--blue);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--blue) 32%, #fff);
  border-radius: 999px;
  padding: 7px 16px;
  flex: none;
}
.modes__title {
  font-family: var(--font-body);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 clamp(12px, 1.4vw, 18px);
}
.modes__badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, #fff);
  border-radius: 999px;
  padding: 6px 12px;
}
.modes__intro { font-weight: 400; color: var(--muted); font-size: 16px; line-height: 1.6; margin: 0 0 clamp(18px, 2vw, 26px); }
.modes__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.modes__list li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
/* Check ikona místo tečky — čistší „feature" výpis pod popisem. */
.modes__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%232C5AA6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 11px no-repeat,
    color-mix(in srgb, var(--blue) 12%, #fff);
}
.modes__cta { margin-top: clamp(28px, 3vw, 44px); text-align: center; }

/* =========================================================
   TIMELINE KROKŮ  (.mtime — blok elpe/modes, rozložení „timeline")

   Kroky sedí na stoupající křivce (levý dolní → pravý horní roh). Uzly jsou
   běžné HTML prvky na procentech plochy, křivka je jedno SVG přes celou
   plochu s preserveAspectRatio="none" — path se tedy natáhne úplně stejně
   jako procenta uzlů, a `vector-effect: non-scaling-stroke` přitom udrží
   stálou tloušťku čáry.

   Na scroll se čára kreslí a jak dojede k uzlu, ten se i s textem rozsvítí
   (initModesTimeline). Bez JS je vykreslená celá a všechny kroky svítí.
   Pod 1024 px se to překlopí do svislé osy — křivka nemá na úzkém displeji
   smysl a text by se do sloupečků nevešel.
   ========================================================= */
/* Křivka schválně přetéká přes okraje wrapu (přichází zdálky a pokračuje dál),
   proto sekci ořízneme — jinak by o ten přesah povyrostl dokument. */
.modes--time { overflow-x: clip; }
.mtime {
  position: relative;
  margin-top: clamp(24px, 3vw, 44px);
  min-height: clamp(420px, 38vw, 580px);
}
.mtime__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.mtime__track,
.mtime__line,
.mtime__pulse {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.mtime__track { stroke: rgba(25, 30, 48, .1); }
.mtime__line  { stroke: var(--red); }
/* Impuls „proudu" — světlý úsek, který po lince pořád dokola probíhá.
   Výchozí prázdný dash = neviditelný, dokud ho JS nerozjede. */
.mtime__pulse {
  stroke: #fff;
  stroke-width: 5;
  stroke-dasharray: 0 1000;
  opacity: .9;
  filter: drop-shadow(0 0 7px rgba(229, 35, 41, .95));
}

.mtime__steps { list-style: none; margin: 0; padding: 0; }
/* Posun uzlu i ghost čísla jede přes `translate`, ne `transform` — ten patří
   GSAPu (rozsvěcování), jinak by si obojí přepisovalo hodnoty. */
.mtime__step {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(200px, calc(94% / var(--mt-n, 3)), 320px);
  translate: -50% 0;
}
/* Uzel na křivce — bílý talířek s tečkou, po rozsvícení červený a větší. */
.mtime__dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(25, 30, 48, .14);
  display: grid;
  place-items: center;
  z-index: 2;
}
.mtime__dot::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--g3);
  transition: background .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.mtime__step.is-on .mtime__dot::after {
  background: var(--red);
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(229, 35, 41, .14);
}
/* Vlna, která se od uzlu rozběhne ve chvíli, kdy k němu linka dojede. */
.mtime__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--red);
  opacity: 0;
  pointer-events: none;
}
/* Ripple se pouští třídou `is-ping` (JS ji při každém průchodu impulsu sundá
   a znovu nasadí, aby se CSS animace přehrála od začátku). */
.mtime__dot.is-ping::before {
  animation: mtime-ripple 1.1s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes mtime-ripple {
  0%   { transform: scale(.5);  opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}
/* Obří číslo kroku — pozadí, ne informace (tu nese pilulka v kartě). */
.mtime__ghost {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(120px, 13vw, 200px);
  line-height: .78;
  color: var(--g1);
  opacity: .8;
  pointer-events: none;
  user-select: none;
  translate: 6% -46%;
}
.mtime__card {
  position: relative;
  z-index: 1;
  padding-top: 40px;
}
.mtime__step-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  transition: background .45s ease, color .45s ease;
}
.mtime__step.is-on .mtime__step-label { background: rgba(229, 35, 41, .1); color: var(--red); }
.mtime__title {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--navy);
  text-wrap: balance;
}
.mtime__text {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.mtime__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.mtime__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.mtime__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
}

/* ── Svislá osa: úzké displeje (a editor, kde křivka nemá kde stoupat) ── */
@media (max-width: 1023px) {
  .mtime { min-height: 0; padding-left: 34px; }
  .mtime__svg { display: none; }
  .mtime__steps { display: grid; gap: clamp(28px, 5vw, 44px); }
  .mtime__step {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    translate: none;
  }
  /* Osa = pseudo-linka vlevo, poslední krok ji nekreslí (nikam nepokračuje). */
  .mtime__step::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 8px;
    bottom: calc(-1 * clamp(28px, 5vw, 44px) - 8px);
    width: 2px;
    background: rgba(25, 30, 48, .1);
  }
  .mtime__step:last-child::before { display: none; }
  .mtime__dot {
    left: -34px;
    top: 8px;
    width: 22px;
    height: 22px;
    margin: 0 0 0 -10px;
    box-shadow: none;
  }
  .mtime__dot::after { width: 10px; height: 10px; }
  .mtime__ghost { font-size: clamp(84px, 20vw, 120px); translate: 0 -34%; left: auto; right: 0; }
  .mtime__card { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mtime__dot::after,
  .mtime__step-label { transition: none; }
  .mtime__dot.is-ping::before { animation: none; }
  .mtime__pulse { display: none; }
}

/* ── „Mohlo by vás také zajímat" (.related) — overlay foto karty jako .scard,
   ale s trvale viditelným popisem (nalákání na další služby) ── */
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.related__card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  min-height: 400px;
  color: #fff;
  box-shadow: 0 2px 12px rgba(11,13,20,.1);
  transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s ease;
}
.related__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 64px -16px rgba(11,13,20,.28), 0 6px 16px -6px rgba(11,13,20,.14);
}
.related__img { position: absolute; inset: 0; overflow: hidden; background: var(--navy); }
.related__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.related__card:hover .related__img img { transform: scale(1.08); }
.related__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,13,20,.22) 0%, rgba(11,13,20,.58) 45%, rgba(11,13,20,.94) 100%);
  z-index: 1;
  pointer-events: none;
}
.related__go {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 3;
  opacity: 0;
  transform: translate(5px, -5px);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.related__go .ti { font-size: 26px; color: #fff; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); transition: color .2s ease; }
.related__card:hover .related__go { opacity: 1; transform: none; }
.related__card:hover .related__go .ti { color: var(--red); }
.related__b {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 26px 26px;
  z-index: 2;
}
.related__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1;
  color: #fff;
  margin: 0 0 12px;
}
.related__text { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.85); margin: 0 0 16px; }
.related__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.related__card:hover .related__link .ar { transform: translateX(4px); }
/* Varianta „compact": nízká karta, jen foto + nadpis (blok Mohlo by vás zajímat, 11. 9. 2026). */
.related--compact .related__card { min-height: 200px; }
.related--compact .related__b { padding: 0 22px 20px; }
.related--compact .related__title { margin: 0; font-size: clamp(24px, 1.9vw, 28px); }
.related--compact .related__card::after { background: linear-gradient(180deg, rgba(11,13,20,.08) 0%, rgba(11,13,20,.42) 50%, rgba(11,13,20,.88) 100%); }
@media (max-width: 700px) { .related--compact .related__card { min-height: 150px; } }
.related__link .ar { transition: transform .2s ease; }

/* ── Pruh realizací (.work) ── */
.work__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.work__card { display: flex; flex-direction: column; gap: 14px; color: var(--navy); }
.work__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--g1);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.work__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.work__card:hover .work__media img { transform: scale(1.05); }
.work__ph { color: var(--g4); font-size: 16px; }
.work__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.work__cta { margin-top: clamp(28px, 3vw, 44px); text-align: center; }

@media (max-width: 980px) {
  .fsplit__grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .fsplit__media,
  .fsplit__grid--imgleft .fsplit__media { order: 0; }
/* Celý obrázek bez ořezu (plakát, dokument, logo): bílá „karta" s okrajem, jemný stín. */
.fsplit__media--contain { background: #fff; padding: clamp(18px, 2vw, 28px); box-shadow: 0 2px 12px rgba(11,13,20,.06); }
.fsplit__media--contain img { object-fit: contain; height: auto; max-height: 100%; }
  .fsplit__body { order: 1; }
  .fsplit__text { max-width: none; }
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .related__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .modes__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .work__grid { grid-template-columns: 1fr; }
  .modes__badge { margin-left: 0; }
}

/* =========================================================
   VELKOOBCHOD ELEKTRO — Kontaktní údaje poboček (.bcontacts)
   ========================================================= */
.bcontacts__head { margin-bottom: clamp(28px, 3vw, 48px); }
.bcontacts__head h2 { font-size: clamp(30px, 3.4vw, 46px); color: var(--navy); text-wrap: balance; }
.bcontacts__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
}
/* Karta pobočky = přesně vizuál karty prodejny na /obchody (.shopcard):
   foto 16:9 → gradient → navy panel. Zde jen navíc kontaktní osoba. */
.bcontact .shopcard__kicker { margin-bottom: -2px; }
.bcontact__person { display: flex; align-items: center; gap: 14px; }
.bcontact__avatar {
  flex: 0 0 auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.bcontact__avatar img { width: 100%; height: 100%; object-fit: cover; }
.bcontact__initials { font-family: var(--font-display); font-size: 20px; color: #fff; }
.bcontact__persontext { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.bcontact__name { font-weight: 700; color: #fff; font-size: 17px; }
.bcontact__role { color: rgba(255, 255, 255, .64); font-size: 14px; }
.bcontact__personmeta { display: flex; flex-direction: column; gap: 9px; margin-top: -8px; }
.bcontact .shopcard__branch { gap: 12px; }
@media (max-width: 1024px) {
  .bcontacts__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   VELKOOBCHOD ELEKTRO — Nabídka sortimentu (.offer)
   ========================================================= */
.offer__head { margin-bottom: clamp(30px, 3.2vw, 52px); max-width: 720px; }
.offer__head h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: .96; color: var(--navy); }
.offer__sub { margin-top: 12px; color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); }
.offer__cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 44px) clamp(28px, 3vw, 56px);
  margin-bottom: clamp(40px, 4.4vw, 72px);
}
.offer__cat { padding-top: 18px; border-top: 2px solid var(--g1); }
.offer__cattitle { font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.15; color: var(--navy); margin-bottom: 8px; }
.offer__cattext { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.offer__catintro { color: var(--navy); font-weight: 600; font-size: 15.5px; line-height: 1.55; margin-bottom: 12px; }
.offer__catlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.offer__catlist li { position: relative; padding-left: 20px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.offer__catlist li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}

/* Kategorie s odrážkami a bez fotky (Kovomat, Maloobchod elektro, Pracovní
   oděvy) — panelová podoba. Světlá karta v jazyce `.modes__col`: sekce pak
   vypadá jako komponenta, ne jako holý sloupec textu pod linkou. Linka rytmu
   se z horní hrany přesouvá nad nadpis jako krátký červený akcent. */
.offer__cats--panels { gap: clamp(18px, 1.8vw, 28px); align-items: stretch; }
.offer__cat--panel {
  padding: clamp(24px, 2.6vw, 38px);
  border-top: 0;
  background: #fff;
  border: 0;
  border-radius: clamp(18px, 1.8vw, 26px);
  box-shadow: var(--shadow);
  transition: box-shadow .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}
.offer__cat--panel::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: var(--red);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}
.offer__cat--panel:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
/* Šablona „světlá s konturou" — původní vzhled bez stínu (přepínač v bloku). */
.offer__cat--outline {
  background: var(--surface);
  border: 1px solid rgba(25, 30, 48, .06);
  box-shadow: none;
  transition: border-color .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}
.offer__cat--outline:hover {
  border-color: color-mix(in srgb, var(--navy) 14%, transparent);
  box-shadow: none;
}
.offer__cat--panel .offer__cattitle { margin-bottom: 10px; }
.offer__cat--panel .offer__catintro { color: var(--muted); font-weight: 400; }

/* Panel s reportážní fotkou z prodejny (Kovomat). Na rozdíl od výřezů z e-shopu
   se kreslí `cover` — fotka je plnohodnotná hlavička karty, ne produkt na bílém.
   Červený akcent nahrazuje fotka, jinak by nad sebou seděly dva „proužky". */
.offer__cat--photo {
  /* Fotka má stejný odstup zleva/zprava jako zeshora — vyváženější karta.
     Boční mezera panelu je větší než horní, proto fotku vytáhneme ven o rozdíl
     obou paddingů (drží se stejných clamp() hodnot, takže sedí i responzivně). */
  --offer-photo-inset: clamp(14px, 1.4vw, 18px);
  padding-top: var(--offer-photo-inset);
}
.offer__cat--photo::before { content: none; }
.offer__catmedia--photo {
  margin: 0 calc(var(--offer-photo-inset) - clamp(24px, 2.6vw, 38px)) clamp(18px, 1.8vw, 24px);
  padding: 0;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: clamp(12px, 1.2vw, 18px);
  background: var(--g0);
  display: block;
  overflow: hidden;
}
.offer__catmedia--photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  display: block;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.offer__cat--photo:hover .offer__catmedia--photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .offer__cat--panel { transition: none; }
  .offer__cat--panel:hover { transform: none; }
  .offer__cat--photo:hover .offer__catmedia--photo img { transform: none; }
}

/* Přepínač počtu sloupců mřížky kategorií (nastavení bloku „Nabídka sortimentu").
   'auto' nedává žádnou třídu → platí výchozí .offer__cats. Pevné volby vynutí
   2 nebo 3 sloupce nezávisle na počtu prvků (2×2, 2×3, …) na celou šířku. */
.offer__cats--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer__cats--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Ve 2sloupcovém režimu má panel s fotkou horizontální skladbu: foto vlevo,
   text vpravo. Široký sloupec tak karta zaplní vyváženě a není zbytečně vysoká.
   Platí až od desktopu — na užších obrazovkách zůstává foto nahoře (svislá karta). */
@media (min-width: 901px) {
  .offer__cats--cols-2 .offer__cat--photo {
    display: grid;
    grid-template-columns: clamp(215px, 34%, 360px) 1fr;
    column-gap: clamp(22px, 2.2vw, 36px);
    /* fotka drží nahoře a v přirozené výšce — nestraší se do výšky karty */
    align-items: start;
    padding-top: clamp(24px, 2.6vw, 38px);
  }
  /* Reportážní fotky z prodejny (Maloobchod): ukázat CELOU fotku (bez ořezu)
     a přitom bez bílého okraje → dlaždice má výšku podle fotky (natural aspect).
     (Produktové výřezy na bílém používají variantu `--media` s `contain`.) */
  .offer__cats--cols-2 .offer__cat--photo > .offer__catmedia--photo {
    margin: 0;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    background: transparent;
  }
  .offer__cats--cols-2 .offer__cat--photo > .offer__catmedia--photo img {
    width: 100%;
    height: auto;
    object-fit: fill;
  }
  .offer__cats--cols-2 .offer__cat--photo > .offer__catbody {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* Kategorie s produktovou fotkou (Velkoobchod elektro — snímky z e-shopu).
   Fotky jsou výřezy na bílém, proto `contain` na světlé dlaždici a ne `cover`:
   ořez by uřízl konektory i popisky přístrojů. Vodorovná linka rytmu se
   přesouvá z horní hrany dlaždice pod fotku, aby zůstala u nadpisu. */
.offer__cats--media { gap: clamp(28px, 3vw, 52px) clamp(24px, 2.4vw, 44px); }
.offer__cat--media { padding-top: 0; border-top: 0; }
/* Opět mimo fotovariantu — jinak by ji tohle pravidlo (stejná specificita,
   ale níž v souboru) přebilo celou: poměr 4/3, odsazení, rámeček i světlý
   gradient patří výřezovým produktovým snímkům, ne reportážní fotce. */
.offer__catmedia:not(.offer__catmedia--photo) {
  position: relative;
  margin: 0 0 18px;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  padding: clamp(16px, 1.8vw, 28px);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 100% at 50% 0%, #fff 0%, var(--surface) 62%, var(--g0) 100%);
  border: 1px solid var(--g1);
  overflow: hidden;
}
/* Výslovně mimo fotovariantu: `.offer__catmedia--photo img` má stejnou
   specificitu a stojí výš, takže by ho tohle pravidlo přebilo — reportážní
   fotky by dostaly `contain` i `multiply` a vybledly by do pozadí. */
.offer__catmedia:not(.offer__catmedia--photo) img {
  width: 100%; height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;      /* bílé pozadí výřezu splyne s dlaždicí */
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.offer__cat--media:hover .offer__catmedia img { transform: scale(1.05); }
.offer__cat--media .offer__cattitle {
  padding-top: 16px;
  border-top: 2px solid var(--g1);
  transition: border-color .25s ease;
}
.offer__cat--media:hover .offer__cattitle { border-top-color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .offer__catmedia img { transition: none; }
  .offer__cat--media:hover .offer__catmedia img { transform: none; }
}

.offer__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 1.8vw, 28px);
}
.offer__card {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(24px, 2.2vw, 34px);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--navy-700);
}
/* Malý náhled v tmavé kartě — obdélník se zaoblenými rohy nad nadpisem. */
.offer__cardthumb {
  width: clamp(96px, 9vw, 124px);
  aspect-ratio: 4 / 3;
  margin: 0 0 18px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.offer__cardthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.offer__cardtitle { font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; color: #fff; margin-bottom: 10px; }
.offer__cardtext { color: rgba(255,255,255,.74); font-size: 15.5px; line-height: 1.6; }
/* Proklik do e-shopu na kategorii („Naše produkty"). Šipka se odsune na hover. */
.offer__cardcta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
  font-size: 15px;
  color: var(--red);
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.offer__cardcta i { font-size: 17px; transition: transform .2s ease; }
.offer__cardcta:hover { color: var(--red-700); gap: 12px; }
.offer__cardcta:hover i { transform: translateX(3px); }
/* U karet s fotkou drží CTA dole → mřížka má zarovnané paty i při různě dlouhém textu. */
.offer__card--media .offer__cardcta { margin-top: auto; padding-top: 16px; }
@media (prefers-reduced-motion: reduce) {
  .offer__cardcta, .offer__cardcta i { transition: none; }
  .offer__cardcta:hover { gap: 8px; }
  .offer__cardcta:hover i { transform: none; }
}

/* Karty s fotkou (Tepelná čerpadla — typy systémů).
   Žádný rám, výplň ani barevný proužek: velká fotka, nadpis, text — nic víc.
   Karta nese obsah, ne dekoraci; rytmus drží samotná fotka a bílé místo. */
/* Širší kontejner → víc místa pro fotky. Šířka MUSÍ sedět s `.refwhy--wide`
   (sekce „Komu jsou naše služby určeny" na Trafostanici) — na detailu služby
   jdou obě sekce pod sebou a jiná hodnota by je viditelně rozhodila.
   Jen u varianty s fotkami; textové sortimenty zůstávají na 1320. */
.offer--media > .wrap { max-width: min(1840px, 94vw); }
.offer--media .offer__head { max-width: 860px; }
.offer__cards--media { gap: clamp(30px, 3.2vw, 60px); }
.offer__card--media {
  display: flex;
  flex-direction: column;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.offer__cardmedia {
  margin: 0 0 clamp(20px, 2vw, 30px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--g0);
  aspect-ratio: 3 / 4;                          /* na výšku → fotka dominuje */
  display: block;
  position: relative;                           /* kotva pro absolutní fotku */
}
.offer__cardmedia img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
/* Fotka VŽDY překryje celý zaoblený tvar (stejná výška/šířka/rohy u všech
   karet) — absolutní kotva je odolná vůči lazy-loadu i náhledu v editoru,
   kde grid+height:100% občas nechal fotku nedotaženou. Gallery varianta má
   vlastní skládání snímků, tu se nedotýkáme. */
.offer__card--media:not(.offer__card--gallery) .offer__cardmedia img {
  position: absolute;
  inset: 0;
}
.offer__card--media:hover .offer__cardmedia img { transform: scale(1.04); }
/* Varianta „na šířku" (cardsRatio=landscape) — produktové rendery a fotky na
   šířku; 3:4 slot by je obalil bílým prostorem a karty by byly zbytečně vysoké.
   16:9, ne 4:3: produktové rendery klimatizací mají po ořezu poměr 1,7–2,8, takže
   ve 4:3 slotu zbývaly nad a pod nimi široké bílé pruhy (bílé plátno splývá
   s pozadím sekce a čte se jako prázdné místo). */
.offer--media-wide .offer__cardmedia { aspect-ratio: 16 / 9; }

/* Karta s víc fotkami — stoh snímků + lightbox, stejný jazyk jako karty
   realizací (.rcard--has-gallery). Tam je slot 3/2, tady 3/4 → peek se
   odsouvá o něco méně, aby na výšku nevyčníval z mřížky. */
.offer__card--gallery .offer__cardmedia {
  overflow: visible;                            /* peek smí vykouknout ven */
  background: none;
  border-radius: 0;
  position: relative;
  display: block;
}
.offer__peek {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  transform: translate(7px, 7px) rotate(1.4deg);
  transform-origin: bottom center;
  box-shadow: 0 10px 24px rgba(25,30,48,.16);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.offer__peek img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.9) saturate(.9); }
.offer__card--gallery:hover .offer__peek { transform: translate(10px, 10px) rotate(2.4deg); }
.offer__media {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: var(--r-lg);
  background: var(--g0);
  box-shadow: 0 1px 3px rgba(25,30,48,.06), 0 16px 38px rgba(25,30,48,.12);
  transition: box-shadow .3s ease;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.offer__card--gallery:hover .offer__media {
  box-shadow: 0 2px 6px rgba(25,30,48,.08), 0 26px 54px rgba(25,30,48,.18);
}
.offer__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20,17,28,0);
  transition: background .2s ease;
  z-index: 1;
}
.offer__media:hover::after,
.offer__media:focus-visible::after { background: rgba(20,17,28,.2); }
.offer__count {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20,17,28,.72);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  pointer-events: none;
}
.offer__count .ti { font-size: 15px; color: var(--red); }
.offer__zoom {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.94);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.offer__zoom .ti { font-size: 17px; color: var(--red); }
.offer__media:hover .offer__zoom,
.offer__media:focus-visible .offer__zoom {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.offer__ph { font-size: 15px; letter-spacing: .04em; color: var(--g4); }
/* Bez tmavé karty se text vrací na světlé pozadí sekce. */
.offer__card--media .offer__cardtitle {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--navy);
  margin-bottom: 10px;
}
.offer__card--media .offer__cardtext {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 38ch;
}
@media (prefers-reduced-motion: reduce) {
  .offer__cardmedia img { transition: none; }
  .offer__card--media:hover .offer__cardmedia img { transform: none; }
  .offer__peek, .offer__zoom { transition: none; }
  .offer__card--gallery:hover .offer__peek { transform: translate(7px, 7px) rotate(1.4deg); }
}

/* =========================================================
   TEPELNÁ ČERPADLA — Značky výrobců (.brands)
   ========================================================= */
.brands__h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;              /* stažené řádkování jako u ostatních velkých nadpisů */
  color: var(--navy);
  max-width: 22ch;
  text-wrap: balance;
  margin-bottom: clamp(34px, 3.6vw, 60px);
}
.brands__list { display: grid; gap: 0; }
.brands__row {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(28px, 3.4vw, 72px);
  align-items: center;
  padding: clamp(26px, 2.8vw, 44px) 0;
  border-top: 1px solid var(--g1);
}
.brands__row:last-child { border-bottom: 1px solid var(--g1); }
.brands__logo {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: clamp(88px, 8vw, 130px);
  padding: clamp(14px, 1.4vw, 22px);
  background: var(--surface);
  border-radius: var(--r);
}
/* Loga se srovnávají VÝŠKOU, ne šířkou — každá značka má jiný poměr stran
   (NIBE je široký nápis, Regulus podsaditá značka se swooshem) a škálování
   na šířku by je opticky rozhodilo. Šířka je jen pojistka pro velmi široká loga. */
.brands__logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: clamp(34px, 3.6vw, 46px);
  max-width: min(100%, 210px);
}
.brands__ph { font-size: 15px; letter-spacing: .04em; color: var(--g4); }
.brands__text {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--navy);
  text-wrap: pretty;
}
.brands__cta { margin-top: clamp(38px, 4vw, 64px); display: flex; justify-content: center; }
@media (max-width: 700px) {
  .brands__row { grid-template-columns: 1fr; gap: 20px; }
  .brands__logo { justify-self: start; min-width: 200px; }
}

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

/* =========================================================
   VELKOOBCHOD ELEKTRO — Nejčastější otázky (.faq, accordion)
   ========================================================= */
/* Sekce drží sdílenou dekorativní vrstvu .elpe-deco (naše elektro ikony) —
   proto relative + obsah nad ní. */
.faq { position: relative; overflow: hidden; }
.faq__inner { position: relative; z-index: 1; }

.faq__head { margin-bottom: clamp(28px, 3vw, 46px); }
.faq__eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 13px; font-weight: 700;
  color: var(--red);
  margin-bottom: 10px;
}
.faq__head h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.12; color: var(--navy); }
.faq__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 28px);
  align-items: start;
}
.faq__col { display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 16px); }
.faq__item {
  background: #fff;
  border: 1px solid var(--g1);
  border-radius: var(--r);
  overflow: hidden;
}
.faq__q { margin: 0; }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%;
  padding: clamp(16px, 1.5vw, 22px) clamp(18px, 1.6vw, 24px);
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font: inherit;
}
.faq__qtext { font-weight: 700; color: var(--navy); font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.35; }
.faq__toggle {
  flex: 0 0 auto;
  display: inline-flex; color: var(--red);
  transition: transform .25s ease;
}
.faq__toggle svg { display: block; }
.faq__item:not(.is-collapsed) .faq__toggle { transform: rotate(45deg); }
.faq__a {
  display: grid;
  grid-template-rows: 1fr;      /* bez JS zůstanou odpovědi čitelné */
}
.faq__item.is-collapsed .faq__a { grid-template-rows: 0fr; }
/* Animace se zapíná až PO prvním sbalení (třídu .is-ready dá JS po vynuceném
   layoutu). Kdyby transition běžela hned, Chrome neumí interpolovat výchozí
   1fr → 0fr a řádek zamrzne na plné výšce — odpověď pak zůstane vidět
   i se zavřeným accordionem. Projevilo se to až u FAQ s vyplněnými odpověďmi. */
.faq__item.is-ready .faq__a { transition: grid-template-rows .3s ease; }
.faq__ainner { min-height: 0; overflow: hidden; }
.faq__ainner > * { padding: 0 clamp(18px, 1.6vw, 24px) clamp(16px, 1.5vw, 22px); margin: 0; }
.faq__ainner { color: var(--muted); font-size: 15.5px; line-height: 1.62; }

/* Málo otázek (1–3) — jeden sloupec přes celou šířku, ať nezůstane půl mřížky
   prázdné. S vyplněným nadpisem se z toho na desktopu udělá asymetrický
   dvousloupec: nadpis vlevo, otázky vpravo (.faq--split). */
.faq--few .faq__cols { grid-template-columns: minmax(0, 1fr); }
.faq--few .faq__qtext { font-size: clamp(16px, 1.35vw, 19px); }
.faq--few .faq__btn { padding: clamp(18px, 1.7vw, 26px) clamp(20px, 1.8vw, 28px); }
.faq--few .faq__ainner > * { padding: 0 clamp(20px, 1.8vw, 28px) clamp(18px, 1.7vw, 26px); }
@media (min-width: 900px) {
  .faq--split .faq__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: center;
  }
  .faq--split .faq__head { margin-bottom: 0; }
  .faq--split .faq__head h2 { text-wrap: balance; }
}
@media (max-width: 720px) {
  .faq__cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__a { transition: none; }
  .faq__toggle { transition: none; }
  /* Karta pobočky dědí .shopcard — reduced-motion má vlastní blok u .shopcard. */
}

/* =========================================================
   FOTOGALERIE — tmavá (navy) zóna (photo-gallery sectionBg=navy)
   Fotky "plavou" na navy pruhu = silné vizuální oddělení sekce.
   Navy gradient dán natvrdo (specificita nad .team-intro{background:transparent}).
   ========================================================= */
.team-intro.elpe-secbg--navy {
  color: #fff;
  overflow: clip;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(44,90,166,.20), transparent 58%),
    radial-gradient(100% 80% at 0% 100%, rgba(229,35,41,.10), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
}
/* Signaturní "spark" linka na horní hraně (červená → modrá = ELPE) */
.team-intro.elpe-secbg--navy::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229,35,41,.55) 22%, rgba(44,90,166,.5) 78%, transparent);
  z-index: 2;
  pointer-events: none;
}
.team-intro.elpe-secbg--navy > .wrap { position: relative; z-index: 1; }
.team-intro.elpe-secbg--navy .elpe-deco__sym { color: #fff; opacity: .05; }
.team-intro.elpe-secbg--navy .team-intro__h2 { color: #fff; }
.team-intro.elpe-secbg--navy .team-intro__p { color: rgba(188,191,206,.85); }
/* Dlaždice na tmavé: hlubší podklad, jemnější ring, dramatičtější stín */
.team-intro.elpe-secbg--navy .pgal__item {
  background: #10131f;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 32px 64px -24px rgba(0,0,0,.72);
}
.team-intro.elpe-secbg--navy .pgal__item:hover {
  box-shadow: 0 0 0 1px rgba(229,35,41,.55), 0 42px 84px -26px rgba(0,0,0,.85);
}

/* Bleskový předěl navy galerie → bílá (⚡ z ostrých hran E).
   Bez statické kontury — po hraně běží rozžhavená jiskra + echo (motiv
   „elektrického oblouku" ze stat bandu, jen po dráze místo kolem karty). */
.team-intro.elpe-secbg--navy .team-intro__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* -1px zakryje sub-pixel šev mezi sekcemi */
  height: clamp(58px, 6.2vw, 118px);
  z-index: 2;
  pointer-events: none;
  line-height: 0;
}
.team-intro__edge svg { display: block; width: 100%; height: 100%; }

/* Kometa běžící po hraně blesku (jako vesnice na homepage): rozžhavená hlava
   s vrstveným glow ocasem = „fake gaussian" (vrstvené stroky klesající šířky
   červená→bílé jádro, BEZ blur filtru kvůli výkonu). Všechny vrstvy sdílí dash
   i animaci → drží zarovnané do jednoho glow tělesa. */
.team-intro__flow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 9 91;       /* krátký decentní segment = kometa, ne kontura */
  stroke-dashoffset: 0;
  animation: elpe-bolt-flow 4.5s linear infinite;  /* pomalejší = smooth glide */
}
.team-intro__flow--halo { stroke: rgba(229,35,41,.13);   stroke-width: 7; }   /* vzdálená corona */
.team-intro__flow--glow { stroke: rgba(255,120,80,.28);  stroke-width: 4.5; } /* rozžhavení */
.team-intro__flow--mid  { stroke: rgba(255,200,165,.6);  stroke-width: 2.6; } /* horké jádro */
.team-intro__flow--core { stroke: rgba(255,255,255,.92); stroke-width: 1.4; } /* bílý spike */

/* Echo — druhá, jemnější kometa 180° za hlavní (odrazová vlna jako u oblouku) */
.team-intro__comet--echo { opacity: .28; }
.team-intro__comet--echo .team-intro__flow { animation-delay: -2.25s; }

@keyframes elpe-bolt-flow {
  to { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
  .team-intro__flow { animation: none; }
  .team-intro__comet { opacity: 0; }   /* klidná čistá silueta */
}

/* =========================================================
   PROMO / AKCE  (.promo — blok elpe/promo)
   Tmavá karta: foto vpravo přechází do tmy, vlevo odznak,
   nadpis (display font), text a řada benefitů s ikonami.
   Akcent je token → dá se přepnout na brand červenou.
   ========================================================= */
/* Kompaktní karta → poloviční sekční mezery, jinak kolem ní zůstává prázdno
   dimenzované pro plnohodnotné sekce. Sekce je kotva pro pás i pro scrub. */
.promo {
  --promo-accent: var(--red);
  padding: calc(var(--section-pad) / 2) 0;
  position: relative;
  /* Pás je širší než viewport → ořezat vodorovně. `clip` místo `hidden`, ať
     svislé reveal animace uvnitř sekce zůstanou nedotčené. */
  overflow-x: clip;
}

/* ── Pás nad kartou: obrysový text, který na scroll jede doleva (JS scrub).
      Bez JS stojí a je čitelný — dekorace, ne nosič informace. */
.promo__ticker {
  position: relative;
  /* Lehké naklonění pásu (~5°). Vlastnost `rotate`, ne `transform` — na
     .promo__tickerrow sedí JS scrub přes transform a nesmí se přebít.
     Negativní inline margin + větší svislé mezery kryjí rohy po rotaci. */
  rotate: -5deg;
  transform-origin: 50% 50%;
  margin-inline: -3vw;
  /* Pás vysunutý o 80 px nahoru; margin-bottom to dorovnává, aby karta pod ním
     zůstala na svém místě a nevznikla díra. */
  margin-top: calc(clamp(12px, 2vw, 30px) - 80px);
  margin-bottom: calc(clamp(30px, 4vw, 58px) + 80px);
  pointer-events: none;
  user-select: none;
  /* Konce pásu se rozpouští do pozadí, ať useknutá slova nebijí do očí. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.promo__tickerrow {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 34px);
  width: max-content;
  will-change: transform;
}
.promo__tickeritem {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  /* Obrysové písmo — pás je textura, ne druhý nadpis. */
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(25, 30, 48, .22);
}
.promo__tickerbolt { display: inline-flex; color: var(--promo-accent); }
.promo__tickerbolt svg { display: block; }
/* Každá druhá instance plná — rytmus, ať pás nevypadá jako chyba renderu. */
.promo__tickeritem:nth-child(4n + 1) {
  color: rgba(25, 30, 48, .07);
  -webkit-text-stroke: 0;
}

/* ── Klíčové slovo v nadpisu (ZDARMA) — jen brand výplň, bez podtržení.
      Při vstupu karty do viewportu se rozzáří (třídu .is-lit přidá JS). */
.promo__hl {
  font-style: normal;
  color: var(--promo-accent);
  white-space: nowrap;
  text-shadow: 0 0 0 rgba(229, 35, 41, 0);
  transition: text-shadow .7s cubic-bezier(.16, 1, .3, 1) .25s;
}
.promo__card.is-lit .promo__hl { text-shadow: 0 0 26px rgba(229, 35, 41, .55); }

@media (prefers-reduced-motion: reduce) {
  .promo__tickerrow { transform: none !important; }
  .promo__hl { transition: none; }
}

.promo__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #1B2135 0%, var(--navy) 55%, #121624 100%), var(--navy);
  color: #fff;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}

/* Foto vyplňuje pravou půlku, scrim ho vlevo rozpustí do tmy. */
.promo__media { position: absolute; inset: 0 0 0 42%; z-index: 0; }
.promo__media img,
.promo__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(25,30,48,.92) 26%, rgba(25,30,48,.35) 62%, rgba(25,30,48,.12) 100%);
}

/* Kompaktní varianta — svislé rozměry cca poloviční oproti původnímu návrhu
   (padding, mezery, nadpis, ikony); vodorovný padding zůstává. */
.promo__body {
  position: relative; z-index: 1;
  padding: clamp(15px, 2vw, 31px) clamp(30px, 4vw, 62px);
  max-width: 58%;
}
.promo__card--noimg .promo__body { max-width: 78ch; }

.promo__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 999px;
  background: var(--promo-accent); color: #fff;
  font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1;
}
.promo__badgeico { display: inline-flex; }
.promo__badgeico svg { display: block; }

/* Stejná typografická konvence jako ostatní sekční nadpisy (.fsplit__body h2 …).
   League Gothic má JEN řez 400 — jakýkoli bold by prohlížeč syntetizoval
   (rozmazaná faux-bold), proto weight 400. */
.promo__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xs);
  line-height: .96;
  margin: clamp(9px, 1vw, 14px) 0 0;
  color: #fff;
  text-wrap: balance;
}
.promo__text {
  font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,.8);
  margin: clamp(7px, .8vw, 11px) 0 0;
  max-width: 52ch;
}

/* Spodní řada benefitů — svislé oddělovače mezi položkami. */
.promo__items {
  list-style: none; margin: clamp(14px, 1.6vw, 23px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(18px, 2.4vw, 38px);
}
.promo__item {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 132px; max-width: 200px;
}
.promo__item + .promo__item {
  border-left: 1px solid rgba(255,255,255,.16);
  padding-left: clamp(18px, 2.4vw, 38px);
}
/* Tlačítko pod obsahem karty (volitelné, `ctaLabel`). */
.promo__cta { margin-top: clamp(22px, 2.6vw, 36px); }
.promo__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--promo-accent);
}
.promo__ico svg { display: block; }
.promo__itxt { display: block; font-size: 15.5px; line-height: 1.4; font-weight: 700; color: #fff; }
.promo__ilabel { display: block; }
.promo__ivalue { display: block; color: var(--promo-accent); font-weight: 800; }

@media (max-width: 1024px) {
  .promo__body { max-width: 100%; }
  /* Foto pod textem jako pás, ať text zůstane čitelný. */
  .promo__media { position: relative; inset: auto; height: clamp(120px, 20vw, 170px); }
  .promo__scrim { background: linear-gradient(0deg, rgba(25,30,48,.55) 0%, rgba(25,30,48,.12) 60%, transparent 100%); }
  .promo__card { display: flex; flex-direction: column-reverse; }
}
@media (max-width: 560px) {
  .promo__items { gap: 20px; }
  .promo__item { min-width: 0; flex: 1 1 100%; max-width: none; }
  .promo__item + .promo__item { border-left: 0; padding-left: 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); }
}

/* =========================================================
   CESTA SVĚTLA  (.lpath — blok elpe/light-path)
   Připnutá scéna: scroll vede proud od rozvaděče ke stožárům,
   obloha přechází ze dne do noci a s každou rozsvícenou lampou
   se odkryje jeden krok služby.

   Dvě podoby jednoho markupu:
   • BEZ JS / reduced-motion (výchozí) — kroky jako běžný číslovaný
     seznam pod sebou, scéna staticky v noci. Plně čitelné.
   • S JS (třídu .is-scene doplní initLightPath) — stage se připne,
     kroky se překryjí a přepínají, --lp-night řídí denní dobu.
   ========================================================= */
.lpath {
  --lp-night: 1;              /* 0 = den, 1 = noc; JS scrubuje mezi tím */
  position: relative;
  overflow-x: clip;
  padding: 0;
  color: #fff;
  isolation: isolate;
}
.lpath__stage {
  position: relative;
  padding: clamp(64px, 8vw, 120px) 0 clamp(72px, 9vw, 130px);
  overflow: hidden;
}
/* Obloha: den (světlá) → noc (navy). Míchání řídí --lp-night, takže celý
   přechod je jedna kompozitní vrstva bez překreslování layoutu. */
.lpath__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #0B1020 calc(var(--lp-night) * 100%), #DCE4F2) 0%,
      color-mix(in srgb, #141B33 calc(var(--lp-night) * 100%), #EEF2F9) 55%,
      color-mix(in srgb, #1B2238 calc(var(--lp-night) * 100%), #F5F5F8) 100%);
}
/* Ambientní záře nad horizontem — v noci sytější (světelný smog nad obcí). */
.lpath__stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: min(1200px, 96vw);
  height: 340px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 208, 128, calc(.22 * var(--lp-night))) 0%,
    rgba(255, 190, 110, calc(.08 * var(--lp-night))) 42%,
    transparent 72%);
}
.lpath__inner { position: relative; z-index: 1; }
.lpath__head { max-width: 60ch; margin-bottom: clamp(28px, 3.6vw, 52px); }
.lpath__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .98;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.lpath__intro {
  margin: clamp(12px, 1.4vw, 20px) 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .74);
  max-width: 54ch;
}

/* ── Kroky (výchozí: prostý seznam) ── */
.lpath__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 3.4vw, 48px); }
.lpath__step { position: relative; }
.lpath__label {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.lpath__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;
  margin: 0;
  color: #fff;
}
.lpath__text {
  margin: 12px 0 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .76);
  max-width: 48ch;
}
.lpath__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 48ch;
}
.lpath__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
}
.lpath__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px rgba(229, 35, 41, .8);
}
.lpath__cta { margin-top: clamp(32px, 4vw, 56px); }

/* ── Fotografie kroku ── */
.lpath__shots {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
}
.lpath__shot {
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.lpath__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Ukazatel postupu */
.lpath__dots {
  list-style: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: clamp(16px, 2vw, 26px) 0 0;
  padding: 0;
}
.lpath__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.lpath__dot.is-on {
  background: #FFD37A;
  box-shadow: 0 0 14px rgba(255, 211, 122, .9);
  transform: scale(1.25);
}

/* ── Režim scény (JS): stage se připne, kroky se překrývají ── */
.lpath.is-scene { --lp-night: 0; }
.lpath.is-scene .lpath__stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
}
.lpath.is-scene .lpath__body {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(24px, 3vw, 56px);
}
.lpath.is-scene .lpath__steps {
  display: grid;
  gap: 0;
}
/* Všechny kroky ve stejné buňce → přepínání bez skoku výšky. Neaktivní kroky
   jen zprůhledníme (ne `visibility`/`display`), takže zůstanou v accessibility
   tree — odečítač přečte celý proces, i když je vizuálně odkrývaný scrollem.
   Interaktivní prvky uvnitř nejsou, takže nevzniká skrytý fokus. */
.lpath.is-scene .lpath__step {
  grid-area: 1 / 1;
  pointer-events: none;
}
.lpath.is-scene .lpath__step.is-active { pointer-events: auto; }

/* ── „Resolve from blur" — text se vynořuje z rozostření (styl Apple) ──
   Viditelnost drží POTOMCI kroku, ne krok sám: kdyby se prolínal i rodič,
   opacity by se násobila a přechod by zkalil doprostřed. Krok tak řeší
   jen pointer-events, veškerý pohyb je na jeho částech. */
.lpath.is-scene .lpath__step > * {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 24px, 0);
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    filter .8s cubic-bezier(.22, 1, .36, 1),
    transform .95s cubic-bezier(.16, 1, .3, 1);
}
.lpath.is-scene .lpath__step.is-active > * {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
/* Kaskáda — popisek, nadpis, text a odrážky se zaostřují po sobě, ne naráz. */
.lpath.is-scene .lpath__step.is-active > :nth-child(1) { transition-delay: .04s; }
.lpath.is-scene .lpath__step.is-active > :nth-child(2) { transition-delay: .12s; }
.lpath.is-scene .lpath__step.is-active > :nth-child(3) { transition-delay: .2s; }
.lpath.is-scene .lpath__step.is-active > :nth-child(4) { transition-delay: .28s; }
/* Odchod je rychlý a bez prodlevy — nastupující krok nesmí čekat na odcházející. */
.lpath.is-scene .lpath__step:not(.is-active) > * {
  transition-duration: .32s;
  transition-delay: 0s;
}

/* Odrážky se zaostřují po jedné, ne jako blok. Seznam sám proto z animace
   vyřazujeme — jinak by se blur rodiče a položky sčítal a text by zkalil. */
.lpath.is-scene .lpath__step > .lpath__list {
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}
.lpath.is-scene .lpath__step .lpath__list li {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 16px, 0);
  transition:
    opacity .7s cubic-bezier(.22, 1, .36, 1),
    filter .7s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
}
.lpath.is-scene .lpath__step.is-active .lpath__list li {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.lpath.is-scene .lpath__step.is-active .lpath__list li:nth-child(1) { transition-delay: .16s; }
.lpath.is-scene .lpath__step.is-active .lpath__list li:nth-child(2) { transition-delay: .24s; }
.lpath.is-scene .lpath__step.is-active .lpath__list li:nth-child(3) { transition-delay: .32s; }
.lpath.is-scene .lpath__step.is-active .lpath__list li:nth-child(4) { transition-delay: .4s; }
.lpath.is-scene .lpath__step.is-active .lpath__list li:nth-child(n + 5) { transition-delay: .48s; }
.lpath.is-scene .lpath__step:not(.is-active) .lpath__list li {
  transition-duration: .3s;
  transition-delay: 0s;
}
/* Fotky leží přes sebe, viditelná je vždy ta patřící aktivnímu kroku.
   Prolnutí + drobné přiblížení — jen opacity/transform, tedy GPU. */
.lpath.is-scene .lpath__shots { margin-top: 0; display: grid; }
.lpath.is-scene .lpath__shot {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
.lpath.is-scene .lpath__shot.is-active {
  opacity: 1;
  transform: none;
}
/* Tečky patří pod fotku, ne do její mřížky. */
.lpath.is-scene .lpath__dots { grid-area: 2 / 1; }

@media (max-width: 1024px) {
  /* Pod tablet scénu nepinujeme (JS ji vypne) — fotky nad kroky, kroky pod sebou. */
  .lpath.is-scene .lpath__body { grid-template-columns: 1fr; }
}

/* =========================================================
   LAYOUT „DOCS" (.lpath--docs)
   Vzor = sekce About na homepage: vlevo text, který drží (sticky),
   vpravo obsah, který projíždí. Tady navíc: text kroku se při scrollu
   vyměňuje (vynoří se z rozostření, řídí GSAP) a fotky vpravo jedou
   nonstop ve dvou pásech proti sobě — sekce žije, i když stojíš.

   Výšku scrollu dává min-height odvozená z počtu kroků (--lp-steps),
   takže sticky sloupce mají po čem jezdit. Žádný pin → žádný pinSpacing.

   Bez JS / reduced-motion: kroky pod sebou, pásy stojí, fotky se
   omezí na jednu sadu.
   ========================================================= */
.lpath--docs { --lp-night: 1; }
.lpath--docs .lpath__sky {
  opacity: 1;
  background:
    radial-gradient(130% 90% at 85% 0%, rgba(44, 90, 166, .20), transparent 58%),
    radial-gradient(100% 80% at 0% 100%, rgba(229, 35, 41, .10), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
}
.lpath--docs .pbg { display: none; }
.lpath--docs .lpath__stage {
  padding: clamp(72px, 8vw, 120px) 0 clamp(76px, 8.5vw, 128px);
  overflow: visible;              /* jinak by sticky sloupce neměly kde jezdit */
}
.lpath--docs .lpath__stage::after { display: none; }

.lpath--docs .lpath__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 4vw, 64px);
}
.lpath--docs .lpath__head { max-width: 34ch; margin-bottom: clamp(24px, 2.6vw, 40px); }
.lpath--docs .lpath__h2 { letter-spacing: -.015em; }
.lpath--docs .lpath__intro { max-width: 46ch; }
.lpath--docs .lpath__title { font-size: clamp(25px, 2.2vw, 34px); }
.lpath--docs .lpath__list { max-width: 44ch; }
.lpath--docs .lpath__dots { justify-content: flex-start; }
.lpath--docs .lpath__cta { margin-top: clamp(26px, 3vw, 40px); }

/* ── Pás fotek ── */
.lpath--docs .lpath__reel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.lpath--docs .lpath__reeltrack {
  display: grid;
  gap: clamp(12px, 1.4vw, 22px);
  align-content: start;
}
.lpath--docs .lpath__reelshot {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-700);
  box-shadow: 0 22px 54px rgba(11, 16, 32, .34);
}
.lpath--docs .lpath__reelshot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* ── Scéna (JS, od 1024 px) ── */
.lpath--docs.is-scene .lpath__body {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 4.4vw, 84px);
  align-items: start;
  /* Dráha pro sticky sloupce — každý krok dostane necelou výšku okna. */
  min-height: calc(var(--lp-steps, 3) * 82vh);
}
.lpath--docs.is-scene .lpath__aside {
  position: sticky;
  top: clamp(92px, 15vh, 160px);
  align-self: start;
}
/* Kroky leží přes sebe → výměna bez skoku výšky (grid-area dědí z .is-scene). */
.lpath--docs.is-scene .lpath__steps { display: grid; gap: 0; }

.lpath--docs.is-scene .lpath__reel {
  position: sticky;
  top: clamp(72px, 9vh, 116px);
  height: min(84vh, 940px);
  overflow: hidden;
  /* Konce pásu se rozpouští, ať fotky nemizí přes ostrou hranu. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.lpath--docs.is-scene .lpath__reeltrack { will-change: transform; }

/* Přechody obsahu řídí GSAP (přesné hodnoty a stagger) → deklarativní blur
   kaskádu vypínáme, jinak by na sobě běžely dvě animace. Výchozí skrytý stav
   ale necháváme z CSS, ať nic neproblikne, než JS naběhne. */
.lpath--docs.is-scene .lpath__step > *,
.lpath--docs.is-scene .lpath__step .lpath__list li { transition: none; }
.lpath--docs.is-scene .lpath__step > .lpath__list { opacity: 1; filter: none; transform: none; }

/* ── Pod scénou: prostý stack, jedna sada fotek, žádný pohyb ── */
@media (max-width: 1023px) {
  .lpath--docs .lpath__reelshot.is-dupe { display: none; }
  .lpath--docs .lpath__reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .lpath--docs .lpath__reel { grid-template-columns: 1fr; }
  .lpath--docs .lpath__reelcol:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lpath--docs .lpath__reeltrack { transform: none !important; }
}

/* =========================================================
   LAYOUT „STORY" (.lpath--story)
   Vzor = sekce About na homepage: text drží vlevo (sticky),
   vpravo projíždí sloupec vysokých fotek. Jak se fotka dostane
   do zorného pole, vymění se i text kroku (JS přepíná .is-active).

   Proti scéně „cesta světla": žádný pin, žádný přechod dne a noci —
   plochý navy podklad. Bez JS zůstává čitelný seznam kroků.
   ========================================================= */
.lpath--story { --lp-night: 1; }
/* Podklad shodný se sekcí About na homepage (.about::before) — plochý navy
   s jemnými modrým a červeným nádechem. Ve story se nepřechází den→noc,
   proto ani foto-pozadí sekce: fotky nesou fotky kroků, ne kulisa. */
.lpath--story .lpath__sky {
  opacity: 1;
  background:
    radial-gradient(130% 90% at 85% 0%, rgba(44, 90, 166, .20), transparent 58%),
    radial-gradient(100% 80% at 0% 100%, rgba(229, 35, 41, .10), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
}
.lpath--story .pbg { display: none; }
.lpath--story .lpath__stage::after { display: none; }
.lpath--story .lpath__stage {
  padding: clamp(72px, 9vw, 132px) 0 clamp(80px, 9.5vw, 140px);
  overflow: visible;              /* jinak by sticky sloupec neměl kde jezdit */
}
.lpath--story .lpath__head { max-width: 46ch; }
/* Odsazení fotek platí i bez JS (mobil, reduced-motion) — jinak by na sebe dosedly. */
.lpath--story .lpath__shots { display: grid; gap: clamp(24px, 3vw, 44px); }

/* Scéna: dva sloupce, levý drží, pravý scrolluje. */
.lpath--story.is-scene .lpath__stage {
  min-height: 0;
  display: block;
  align-content: initial;
}
.lpath--story.is-scene .lpath__body {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.lpath--story.is-scene .lpath__steps {
  position: sticky;
  top: clamp(96px, 12vh, 150px);
  align-self: start;
}
/* Kroky leží přes sebe (grid-area 1/1 dědí z .is-scene) — sloupec si drží
   výšku nejvyššího kroku, takže se sticky blok při přepnutí nehýbe. */

/* Fotky ve story NEleží přes sebe — projíždějí pod sebou jako na homepage. */
.lpath--story.is-scene .lpath__shots {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  margin-top: 0;
}
.lpath--story.is-scene .lpath__shot {
  grid-area: auto;
  opacity: 1;
  transform: none;
  transition: transform .9s cubic-bezier(.16, 1, .3, 1), box-shadow .6s ease;
}
.lpath--story.is-scene .lpath__shot img { aspect-ratio: 4 / 5; }
/* Fotka mimo aktivní krok jemně ustoupí — vede oko, ale nic neschovává. */
.lpath--story.is-scene .lpath__shot:not(.is-active) {
  transform: scale(.985);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

/* Ukazatel postupu plave přes sloupec fotek. Řádek přes celou mřížku →
   sticky má kam jezdit (jinak by se držel jen ve své buňce). */
.lpath--story.is-scene .lpath__dots {
  grid-area: 1 / 1 / -1 / -1;
  align-self: end;
  position: sticky;
  bottom: clamp(20px, 3vh, 34px);
  z-index: 2;
  height: max-content;
  width: max-content;
  justify-self: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(11, 16, 32, .58);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 1024px) {
  /* Sticky nemá na úzkém displeji smysl — fotky nad kroky, vše v toku. */
  .lpath--story.is-scene .lpath__body { grid-template-columns: 1fr; }
  .lpath--story.is-scene .lpath__steps { position: static; }
  .lpath--story.is-scene .lpath__shot img { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .lpath--story.is-scene .lpath__shot { transition: none; transform: none; }
}

/* =========================================================
   LAYOUT „BAND" (.lpath--band)
   Modrý gradient, text na střed a fotky ve full-bleed pruhu,
   který na scroll jede do strany. Mechanika pásu je stejná jako
   u obrysového tickeru nad promo kartou: řada je 3× delší než
   sada a JS ji scrubem posune přesně o jednu sadu (ease: none).

   Scéna se tu NEpouští (žádná .is-scene) — kroky jsou pořád
   viditelné vedle sebe, pruh je dekorace. Bez JS pruh jen stojí.
   ========================================================= */
/* `overflow-x: clip` — pruh fotek jde full-bleed přes `calc(50% - 50vw)`, jenže
   `vw` počítá i se scrollbarem, takže by sekce o jeho šířku přetekla dokument
   (na Windows/Linuxu vodorovný posuv celé stránky). Clip ořízne jen vodorovně
   a na rozdíl od `hidden` nevyrábí scroll-container, takže sticky/pin uvnitř
   pořád fungují. */
.lpath--band { --lp-night: 1; overflow-x: clip; }
/* Podklad = přesně ten z homepage (.about::before). Žádná vlastní modř —
   sekce má vypadat jako součást webu, ne jako cizí ostrov. */
.lpath--band .lpath__sky {
  opacity: 1;
  background:
    radial-gradient(130% 90% at 85% 0%, rgba(44, 90, 166, .20), transparent 58%),
    radial-gradient(100% 80% at 0% 100%, rgba(229, 35, 41, .10), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
}
.lpath--band .pbg { display: none; }
.lpath--band .lpath__stage::after { display: none; }

/* Dekorativní ikony v pozadí — stejná síla jako v tmavém feature-splitu,
   ať to nekřičí. Leží nad oblohou, ale pod obsahem. */
.lpath--band .elpe-deco { z-index: -1; }
.lpath--band .elpe-deco__sym { color: #fff; opacity: .05; }
@media (max-width: 700px) {
  .lpath--band .elpe-deco { display: none; }
}

.lpath--band .lpath__stage { padding: clamp(60px, 9vw, 150px) 0 clamp(64px, 9vw, 156px); }

/* ── Hlavička: jeden velký vzdušný nádech, nic víc ──
   Šířka v px (ne v ch): `ch` se počítá z písma rodiče, ne z display fontu
   nadpisu, takže se to lámalo na tři řádky. Takhle drží 1 řádek na desktopu
   a 2 na užších šířkách. */
.lpath--band .lpath__head {
  max-width: min(100%, 1000px);
  margin: 0 auto clamp(44px, 5.2vw, 84px);
  text-align: center;
}
.lpath--band .lpath__h2 { letter-spacing: -.015em; text-wrap: balance; }
.lpath--band .lpath__intro {
  margin: clamp(16px, 1.8vw, 26px) auto 0;
  max-width: 52ch;
  font-size: clamp(17px, 1.5vw, 19px);
  color: rgba(255, 255, 255, .66);
}
.lpath--band .lpath__body { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 96px); }

/* ── Kroky: tři sloupce dělené vlasovou linkou ──
   `width: 100%` je nutné: `margin-inline: auto` na flex položce zruší stretch,
   takže by se mřížka srazila na shrink-to-fit (v jednosloupcovém režimu pak
   text držel jen ~335 px uprostřed prázdné šířky). */
.lpath--band .lpath__steps {
  /* Sloupců tolik, kolik je kroků (--lp-cols z PHP) — se dvěma kroky by fixní
     trojka nechala prázdné místo vpravo a text by nedržel osu sekce. */
  grid-template-columns: repeat(var(--lp-cols, 3), minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}
.lpath--band .lpath__step {
  padding: 0 clamp(18px, 2.6vw, 46px);
  text-align: center;
}
.lpath--band .lpath__step + .lpath__step { border-left: 1px solid rgba(255, 255, 255, .12); }

.lpath--band .lpath__title {
  font-size: clamp(25px, 2.2vw, 33px);
  line-height: 1.04;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.lpath--band .lpath__text {
  margin: clamp(12px, 1.4vw, 18px) auto 0;
  max-width: min(34ch, 100%);
  font-size: 16px;
  color: rgba(255, 255, 255, .72);
}
/* Odrážky zůstávají zarovnané doleva — víceřádkové věty na střed se rozpadají.
   Blok seznamu se ale vycentruje pod nadpisem, takže sloupec drží osu. */
.lpath--band .lpath__list {
  margin: clamp(20px, 2.2vw, 30px) auto 0;
  max-width: min(32ch, 100%);
  width: fit-content;
  text-align: left;
  gap: clamp(12px, 1.4vw, 17px);
}
.lpath--band .lpath__list li {
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .66);
}
.lpath--band .lpath__list li::before {
  width: 5px;
  height: 5px;
  top: .62em;
  box-shadow: 0 0 10px rgba(229, 35, 41, .7);
}
.lpath--band .lpath__cta { text-align: center; margin-top: clamp(44px, 5vw, 76px); }

/* ── Pruh fotek od kraje ke kraji ──
   Mechaniku (drift, drag-to-scroll, smyčka) dodává .support__carousel — sdílená
   komponenta s řadou log klientů. Tady se řeší jen rozměry a rámování dlaždic. */
.lpath--band .lpath__shots {
  order: -1;                                /* pruh patří nad kroky */
  --cg: clamp(10px, 1.6vw, 26px);           /* mezera mezi dlaždicemi (čte .support__track) */
  display: block;                           /* support je flex kvůli šipkám; tady žádné nejsou */
  max-width: none;                          /* přebít min(1840px, 96vw) ze support */
  /* Ven z .wrap až ke krajům. Záporný margin (ne 100vw + transform) — uvnitř
     flex sloupce drží spolehlivě a nevyrábí další containing block. */
  margin: 0 calc(50% - 50vw);
}
.lpath--band .lpath__strip { padding-block: clamp(10px, 1.4vw, 20px); }

/* Rozměr dlaždice řídí jen šířka; výšku dopočítá poměr, takže všechny dlaždice
   mají na každé šířce shodnou výšku bez ohledu na orientaci nahrané fotky
   (fotka se ořízne přes object-fit). Na mobilu je dlaždice užší, aby ze
   sousední byl vidět kus a pruh se četl jako pruh, ne jako jedna fotka. */
.lpath--band .lpath__shot {
  flex: 0 0 auto;
  position: relative;
  width: clamp(190px, 24vw, 400px);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(11, 16, 32, .34);
}
/* Dlaždice s galerií je <button> — shodit nativní vzhled tlačítka. */
.lpath--band .lpath__shot--zoom {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.lpath--band .lpath__shot img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; }
/* Lupa = stejný signál „klik otevře galerii" jako u dlaždic fotogalerie. */
.lpath__zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 26px;
  background: linear-gradient(180deg, rgba(25, 30, 48, 0) 40%, rgba(25, 30, 48, .5) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
.lpath__shot--zoom:hover .lpath__zoom,
.lpath__shot--zoom:focus-visible .lpath__zoom { opacity: 1; }
/* Při tažení nesmí prohlížeč chytat nativní drag obrázku. */
.lpath--band .lpath__shot img { -webkit-user-drag: none; user-select: none; }

@media (max-width: 960px) {
  /* Jeden sloupec → dělící linka se překlopí zvisla na vodorovnou.
     Práh je 960, ne 900: pod ním vycházel sloupec na ~274 px a odrážky se
     lámaly po dvou slovech — jeden široký sloupec se čte líp než tři úzké.
     Odsazení je oboustranné, aby linka ležela v půli mezery a nelepila se
     na odrážky kroku nad ní; krajní kroky si své vnější odsazení odpouští. */
  .lpath--band .lpath__steps { grid-template-columns: 1fr; gap: 0; }
  .lpath--band .lpath__step { padding: clamp(28px, 5.4vw, 44px) 0; }
  .lpath--band .lpath__step:first-child { padding-top: 0; }
  .lpath--band .lpath__step:last-child { padding-bottom: 0; }
  .lpath--band .lpath__step + .lpath__step {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  /* Nadpis kroku nesmí přerůst nadpis sekce — v jednom sloupci jsou hned pod sebou. */
  .lpath--band .lpath__title { font-size: clamp(22px, 4.4vw, 28px); }
  /* V jednom sloupci je místa dost — text i odrážky smí být širší než v mřížce. */
  .lpath--band .lpath__text { max-width: min(46ch, 100%); }
  .lpath--band .lpath__list { max-width: min(42ch, 100%); }
  /* Dlaždice se váže na šířku okna, ne na desktopových 24 vw — jinak by na
     tabletu spadla na spodní hranici clampu a pruh by vypadal jako drobky. */
  .lpath--band .lpath__shot { width: clamp(190px, 30vw, 260px); }
}
@media (max-width: 560px) {
  /* CTA přes celou šířku — na úzkém displeji je terč palce důležitější než tvar. */
  .lpath--band .lpath__cta .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  /* Pojistka: při vypnutých animacích scéna neběží (GSAP se vůbec nespustí),
     ale kdyby .is-scene přesto zůstala, text musí být ostrý a viditelný. */
  .lpath.is-scene .lpath__step > *,
  .lpath.is-scene .lpath__step .lpath__list li {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}
@media (max-width: 640px) {
  .lpath__step { padding-top: clamp(10px, 3vw, 18px); }
}

/* =========================================================
   PARALLAX FOTO-POZADÍ  (.pbg — sdílená komponenta)
   Vkládá se jako spodní vrstva libovolné sekce přes
   elpe_parallax_bg(). Fotka je o kus vyšší než sekce, takže
   se s ní dá posouvat, aniž by vznikla mezera. Posun řídí JS
   (--pbg-y); bez JS zůstane statická a vycentrovaná.
   ========================================================= */
.pbg {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}
.pbg__img {
  position: absolute;
  left: 0;
  /* Přesah nahoře i dole = rezerva pro posun (--pbg-depth v % výšky). */
  top: calc(-1% * var(--pbg-depth, 12));
  width: 100%;
  height: calc(100% + 2% * var(--pbg-depth, 12));
  object-fit: cover;
  object-position: center;
  transform: translate3d(0, calc(1% * var(--pbg-y, 0)), 0);
  will-change: transform;
}
/* Závoj nad fotkou — drží kontrast textu bez ohledu na zvolený snímek. */
.pbg::after {
  content: "";
  position: absolute;
  inset: 0;
}
.pbg--dark::after { background: linear-gradient(180deg, rgba(9,12,22,.62) 0%, rgba(9,12,22,.78) 100%); }
.pbg--navy::after { background: linear-gradient(180deg, rgba(25,30,48,.72) 0%, rgba(25,30,48,.88) 100%); }
.pbg--none::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pbg__img { transform: none; }
}

/* Cesta světla s fotkou v pozadí: obloha se z krycí vrstvy mění na závoj,
   aby foto bylo ve dne vidět a v noci ho pohltila tma. */
.lpath--photo .lpath__sky {
  z-index: -2;
  opacity: calc(.35 + .65 * var(--lp-night));
}
.lpath--photo .lpath__stage::after { z-index: -1; }

/* =========================================================
   REFERENCE ZÁKAZNÍKŮ  (.tstm — blok elpe/testimonials)
   Karty s citací; uvozovka je dekorace za textem, ne obsah.
   ========================================================= */
.tstm__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: 1;
  color: var(--navy);
  margin: 0 0 clamp(28px, 3.4vw, 48px);
}
.tstm__grid {
  display: grid;
  grid-template-columns: repeat(var(--tstm-cols, 2), minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  align-items: stretch;
}
.tstm__card {
  position: relative;
  margin: 0;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: var(--r-xl);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: clamp(300px, 26vw, 400px);
  overflow: hidden;
}
/* Uvozovka nahoře — plná, v barvě značky; kotví kartu jako v referenci. */
.tstm__mark {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(64px, 6vw, 88px);
  line-height: .78;
  height: .5em;
  color: var(--red);
  pointer-events: none;
  user-select: none;
}
.tstm__quote {
  position: relative;
  margin: clamp(26px, 2.8vw, 38px) 0 0;
  flex: 1;
}
.tstm__quote p {
  margin: 0;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.42;
  letter-spacing: -.01em;
  color: var(--navy);
  text-wrap: pretty;
}
.tstm__who {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: auto;
  padding-top: clamp(22px, 2.4vw, 32px);
}
.tstm__author { font-weight: 700; font-size: 15px; color: var(--navy); }
.tstm__place { font-size: 14px; line-height: 1.35; color: var(--muted); }
.tstm__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  font-size: 15px;
  color: var(--red);
  text-decoration: none;
}
.tstm__link:hover { color: var(--red-700); }
.tstm__link .ar { transition: transform .2s ease; }
.tstm__link:hover .ar { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .tstm__link .ar { transition: none; }
}

@media (max-width: 900px) {
  .tstm__grid { grid-template-columns: 1fr; }
  .tstm__card { min-height: 0; }
}

/* =========================================================
   KONTAKTNÍ OSOBY  (.cper — blok elpe/contact-persons)
   Vycentrovaná dvojice/trojice kontaktů pod formulářem.
   ========================================================= */
.cper__head { margin: 0 0 clamp(28px, 3.4vw, 46px); }
.cper__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: 1.02;
  color: var(--navy);
  text-align: center;
  margin: 0;
}
/* Podnadpis = středisko / oddělení pod názvem sekce. */
.cper__sub {
  margin: clamp(8px, 1vw, 14px) auto 0;
  max-width: 54ch;
  text-align: center;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--muted);
}
.cper__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(32px, 5vw, 88px);
}
.cper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  min-width: 220px;
}
/* Rám fotky — kolečko ve výchozí variantě, velká karta ve variantě „cards". */
.cper__media {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 10px;
  flex: 0 0 auto;
}
.cper__photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.cper__media--ph {
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--g4, #9aa0b4);
}

/* ── Varianta „cards" — velké karty ve stejném duchu jako mřížka týmu na O nás.
   Foto 4/5 v mřížce, text pod ním zarovnaný doleva; kontakty zůstávají odkazy. */
.cper--cards .cper__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  justify-content: stretch;
}
.cper--cards .cper__item {
  align-items: flex-start;
  text-align: left;
  min-width: 0;
  gap: 0;
}
.cper--cards .cper__media {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--g0);
  box-shadow: var(--shadow-sm);
  margin-bottom: clamp(14px, 1.4vw, 20px);
}
.cper--cards .cper__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.7vw, 27px);
  line-height: 1.05;
}
.cper--cards .cper__role { font-size: 15px; line-height: 1.45; margin-top: 6px; }
.cper--cards .cper__contacts { width: auto; margin: 12px 0 0; }
@media (max-width: 560px) {
  /* Mobil: řádkový výpis (foto vlevo, text vpravo) — dvě karty vedle sebe lámaly
     e-maily na dva řádky (karta 167 px, „jmeno.prijmeni@elpe.cz" potřebuje ~185 px)
     a sloupec vysokých karet pod sebou by přerostl obrazovku. Stejný princip jako
     mobilní Trust bar. */
  .cper--cards .cper__grid { grid-template-columns: 1fr; gap: 14px; }
  .cper--cards .cper__item {
    display: grid;
    grid-template-columns: 104px 1fr;
    column-gap: 16px;
    align-items: center;
  }
  .cper--cards .cper__media { width: 104px; margin: 0; grid-row: 1 / span 4; border-radius: var(--r-md, 12px); }
  .cper--cards .cper__name { font-size: 21px; }
  .cper--cards .cper__role { margin-top: 3px; font-size: 14px; }
  .cper--cards .cper__contacts { margin-top: 8px; gap: 4px; }
  .cper--cards .cper__link { font-size: 14px; }
}
.cper__name { font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--navy); }
.cper__role { font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
/* Kontakty jako sloupec — blok vycentrovaný, řádky uvnitř na levé hraně,
   ať ikony telefonu a mailu sedí přesně pod sebou. */
.cper__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: fit-content;
  margin: 12px auto 0;
  text-align: left;
}
.cper__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.cper__link--mail { word-break: break-word; }
.cper__link:hover { color: var(--red); }
/* Ikonky telefonu / e-mailu značkově červené — stejně jako kartička kontaktní
   osoby u formuláře (.contact__person), ať mají obě „kontaktní" komponenty
   jednotný vzhled. Text zůstává tlumený, na hover zčervená celý řádek. */
.cper__ico { display: inline-flex; flex: none; color: var(--red); }
.cper__link:hover .cper__ico { color: var(--red); }
.cper__ico svg { display: block; }
/* Poznámka pod kontakty — adresa provozovny, otevírací doba. */
.cper__note {
  margin: clamp(24px, 3vw, 36px) auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

/* Mobil (výchozí kolečková varianta): místo vycentrovaných sloupců pod sebou
   (foto, jméno, kontakty = ~200 px na osobu) řádkový výpis jako v Kontaktech —
   kolečko vlevo, jméno + telefon + e-mail vpravo, zarovnané doleva, tenký
   oddělovač mezi osobami. Nadpis zůstává. Mřížka bez mezer, ať sekce nezabírá
   zbytečně výšku. Varianta „cards" má vlastní mobilní pravidlo výše. */
@media (max-width: 640px) {
  .cper:not(.cper--cards) .cper__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    justify-content: stretch;
  }
  .cper:not(.cper--cards) .cper__item {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 16px;
    align-items: center;
    text-align: left;
    min-width: 0;
    padding: 14px 0;
    border-top: 1px solid var(--g1);
  }
  .cper:not(.cper--cards) .cper__item:first-child { border-top: 0; padding-top: 0; }
  .cper:not(.cper--cards) .cper__item:last-child { padding-bottom: 0; }
  .cper:not(.cper--cards) .cper__media {
    width: 64px;
    height: 64px;
    margin: 0;
    grid-row: 1 / span 3;
  }
  .cper:not(.cper--cards) .cper__name { font-size: 17px; }
  .cper:not(.cper--cards) .cper__contacts { margin: 6px 0 0; gap: 4px; width: auto; }
  .cper:not(.cper--cards) .cper__link { font-size: 14px; }
  .cper:not(.cper--cards) .cper__head { margin-bottom: 22px; }
  .cper:not(.cper--cards) .cper__h2,
  .cper:not(.cper--cards) .cper__sub { text-align: left; margin-left: 0; }
  .cper:not(.cper--cards) .cper__note { text-align: left; margin-left: 0; }
  /* Po kompaktním týmu následuje „Mohlo by vás zajímat" jako poslední sekce
     (výjimka výše jí nechává plný horní padding) → na mobilu 2× 100 px prázdna.
     Horní padding pryč, mezera = spodní padding týmu. */
  .cper:not(.cper--cards) ~ .related { padding-top: 0; }
}

/* Dvě navazující sekce týmu (Energetika: středisko Pelhřimov + Jihlava) mají
   každá plný --section-pad, takže se mezi nimi sčítá do dvojnásobku. Zrušíme
   horní padding následující sekce → prázdný prostor mezi týmy klesne ~o 50 %. */
.cper + .cper { padding-top: 0; }

/* E-shop pruh (.eshop, „Nakupujte i online") a „Mohlo by vás zajímat" (.related)
   navazují na předchozí sekci s plným --section-pad, takže se prostor nad nimi
   sčítá do 2×. Zrušíme horní padding → prostor nad sekcí klesne o ~50 %.
   Obecný sourozenec (~), protože mezi sekcemi bývá <script> se schématem (FAQ),
   který by adjacentní (+) selektor rozbil.
   ALE jen když NEjsou poslední sekce: je-li .eshop/.related poslední před
   patičkou (typicky /obchody/, detaily služeb), horní padding ponecháme →
   prostor nad kartou zůstane symetrický s prostorem pod ní. */
.section ~ .eshop:not(:last-child),
.section ~ .related:not(:last-child) { padding-top: 0; }

/* Sortiment (.offer) přímo následovaný pruhem značek (.brands) — obě sekce mají
   plný --section-pad, takže se mezi kartami a nadpisem značek sčítá do 2×
   (až 320 px). Zrušíme horní padding pruhu → mezera klesne o ~50 %.
   Týká se /sluzby/klimatizace/ a /sluzby/tepelna-cerpadla/. */
.offer + .brands { padding-top: 0; }

/* Klimatizace (#1086): dvě ikonové mřížky (.refwhy) za sebou — „Co pro vás
   moderní klimatizace zajistí" a „Pro koho klimatizace realizujeme". Padding
   se mezi nimi sčítá; scope na stránku, protože Kuchyňské studio má stejnou
   dvojici a je klientem schválené. */
.postid-1086 .refwhy + .refwhy { padding-top: 0; }

/* Pracovní oděvy (#1383): sortiment (.offer) přímo následovaný CTA bannerem
   „Prohlédněte si celou nabídku" (.refcta) — mezi „Ochrana dýchání" a bannerem
   se sčítá offer padding-bottom + refcta padding-top. Zrušíme horní padding
   banneru → mezera klesne ~o 50 %. Scope na stránku, jinde ať rytmus zůstane. */
.page-id-1383 .offer + .refcta { padding-top: 0; }

/* Kovomat (#1263): stejný případ — sortiment (.offer „Nabídka sortimentu…")
   přímo následovaný CTA bannerem „Náhradní díly Narex skladem" (.refcta).
   Zrušíme horní padding banneru → mezera klesne ~o 50 %. Scope na stránku. */
.page-id-1263 .offer + .refcta { padding-top: 0; }

/* Maloobchod (#1342): CTA „Tekutá hydroizolace Canada Rubber" má dlouhý nadpis
   i delší text. Bez omezení šířky se nadpis roztáhl přes celý pruh až k tlačítku
   a působil rozházeně. Držíme nadpis i text v jednom úhledném levém sloupci se
   zarovnanými hranami (nadpis se zalomí ve stejné šířce jako text), fotka tak
   dostane víc prostoru vpravo. Zároveň srovnáme mezeru po předchozím sortimentu.
   Scope na stránku. */
.page-id-1342 .offer + .refcta { padding-top: 0; }
.page-id-1342 .refcta__body { max-width: 34rem; }
.page-id-1342 .refcta__text { max-width: none; }

/* Hliníkové štítky (sluzba #916): mezi tmavým feature-splitem a e-shop pruhem
   „Objednejte štítky online" chtěl klient výraznější oddech. Přidáme nad pruh
   horní odsazení navíc. Scope na detail služby. */
.postid-916 .fsplit--dark + .eshop { margin-top: clamp(48px, 6vw, 96px); }

/* Kariéra (#1526): CTA „Chcete pracovat v ELPE…" má na pozadí fotku s lidmi.
   Full-bleed pruh (dobrý pro produktové scény jako Kovomat / prac. obuv) tady
   ořezával oběma zaměstnankyním hlavy nahoře a působil zbytečně vysoký. Na TÉTO
   stránce z něj proto uděláme redakční split: text na navy ploše vlevo, fotka
   v pravé části karty s měkkým přechodem do pozadí a ostřením na obličeje.
   Scope jen sem — ostatní CTA bannery s fotkou zůstávají full-bleed.

   Mobil / úzké šířky = fallback: fotka nahoře, navy dole, text čitelně na tmavé. */
.page-id-1526 .refcta__h2 { white-space: pre-line; } /* zalomení nadpisu přes \n */
.page-id-1526 .refcta__bgphoto {
  background:
    linear-gradient(0deg,
      var(--navy) 0%,
      rgba(25,30,48,.94) 26%,
      rgba(25,30,48,.55) 58%,
      rgba(25,30,48,.12) 88%,
      rgba(25,30,48,0) 100%) no-repeat,
    var(--bg) 50% 24% / cover no-repeat;
}
@media (max-width: 720px) {
  .page-id-1526 .refcta__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: clamp(340px, 84vw, 470px);
  }
  .page-id-1526 .refcta__inner .btn { width: 100%; }
}
/* Desktop = split: text vlevo, fotka vpravo. Levá hrana fotky se NEřeší barevným
   překryvem (ten dělal tvrdý šev proti diagonálnímu pozadí karty) — místo toho
   fotku odmaskujeme (mask-image): její levý okraj plynule zprůhlední a prosvítá
   skutečné pozadí karty za ní. Žádný šev, obličeje zůstávají v plné části vpravo. */
@media (min-width: 721px) {
  .page-id-1526 .refcta__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(16px, 2vw, 26px);
    min-height: clamp(276px, 25vw, 336px);
    padding-right: 46%;
  }
  .page-id-1526 .refcta__body { margin: 0; }
  .page-id-1526 .refcta__bgphoto {
    left: auto;
    right: 0;
    width: 52%;
    background: var(--bg) 62% 30% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.15) 20%,
      rgba(0,0,0,.6) 38%,
      #000 56%);
    mask-image: linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.15) 20%,
      rgba(0,0,0,.6) 38%,
      #000 56%);
  }
}

/* E-shop pruh (.eshop, „Nenašli jste, co hledáte?" / „Nakupujte i online")
   přímo následovaný „Mohlo by vás zajímat" (.related) — obě mají plný
   --section-pad, takže se mezi nimi prostor sčítá do 2×. Když je .related
   poslední sekce (obchodní podstránky – Velkoobchod #1159, Kovomat #1263…),
   nechává ji obecné pravidlo výše kvůli :not(:last-child) s plným horním
   paddingem. Zrušíme horní padding .related, kdykoli navazuje na .eshop →
   mezera mezi oběma CTA klesne ~o 50 % na všech obchodních podstránkách.
   POZOR: obecný sourozenec (~) bral odsazení i přes FAQ + kontakt s marquee
   (Hliníkové destičky: „Mohlo by vás zajímat" nalepené na fotky). Proto jen
   když mezi nimi NENÍ žádná další sekce (skript se schématem nevadí). */
.eshop:not(:has(~ section ~ .related)) ~ .related { padding-top: 0; }

/* =========================================================
   PŘEHLÍDKA ŘEŠENÍ  (.lshow — blok elpe/light-path, layout „cover")

   Světlá sekce s přepínačem: nadpis, pod ním karty s ikonou (výběr typu
   objektu) a jeden panel — velká fotka vlevo, popis s odrážkami vpravo.
   Návštěvník si vybere, co se ho týká, místo aby projel tři kapitoly.

   Bez JS (dokud initLightShow nedoplní .is-ready) se přepínač nevykreslí
   a panely zůstanou pod sebou jako běžný seznam — obsah je vždy celý
   dostupný, i pro vyhledávače a čtečky.
   ========================================================= */
.lshow {
  --lshow-r: clamp(18px, 2vw, 30px);
  background: var(--white);
  color: var(--ink);
  overflow-x: clip;
}
.lshow__head {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  max-width: 62ch;
}
.lshow__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .98;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
.lshow__intro {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}

/* ── Přepínač typů — tři karty s ikonou ──
   Místo úzké pilulky plnohodnotné cíle: ikona typu objektu + název.
   Aktivní karta je navy s bílým textem a červenou ikonou, ostatní světlé.
   Do doby, než JS doplní .is-ready, je pruh skrytý (bez JS by nefungoval). */
.lshow__tabs { display: none; }
.lshow.is-ready .lshow__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: clamp(30px, 3.6vw, 48px) 0 0;
}
.lshow__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.7vw, 22px);
  border: 1px solid rgba(25, 30, 48, .1);
  border-radius: var(--r);
  background: var(--white);
  color: var(--muted);
  font-family: inherit;
  /* Nadzvednutí jede přes `translate`, ne `transform` — ten patří GSAPu
     (nájezdová animace), jinak by si obojí přepisovalo hodnoty. */
  transition: background .35s ease, border-color .35s ease, color .35s ease, translate .35s ease, box-shadow .35s ease;
}
.lshow__tabico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--navy);
  transition: background .35s ease, color .35s ease;
}
.lshow__tabico svg { display: block; width: 26px; height: 26px; }
.lshow__tabname {
  font-size: clamp(15.5px, 1.2vw, 17px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
  transition: color .35s ease;
}
.lshow__tab:hover {
  border-color: rgba(25, 30, 48, .2);
  translate: 0 -2px;
  box-shadow: var(--shadow-sm);
}
.lshow__tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  box-shadow: 0 16px 34px rgba(25, 30, 48, .22);
  translate: 0 -2px;
}
.lshow__tab.is-active .lshow__tabname { color: #fff; }
.lshow__tab.is-active .lshow__tabico { background: rgba(255, 255, 255, .1); color: var(--red); }
.lshow__tab:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ── Panely ──
   S JS leží všechny na sobě (jedna buňka gridu), takže přepnutí nemění
   výšku sekce a stránka pod ní neposkakuje. */
.lshow__panels { margin-top: clamp(28px, 3.4vw, 48px); display: grid; gap: clamp(56px, 7vw, 96px); }
.lshow.is-ready .lshow__panels { gap: 0; }
.lshow__panel {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 3.6vw, 64px);
  align-items: center;
}
.lshow.is-ready .lshow__panel { grid-area: 1 / 1; }
.lshow.is-ready .lshow__panel:not(.is-active) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Fotka ── */
.lshow__frame { transform-origin: 50% 60%; }
.lshow__media {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--lshow-r);
  overflow: hidden;
  background: var(--g1);
  box-shadow: 0 28px 70px rgba(25, 30, 48, .14);
}
.lshow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lshow__media--zoom { cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.lshow__zoom {
  position: absolute;
  right: clamp(12px, 1.4vw, 20px);
  bottom: clamp(12px, 1.4vw, 20px);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 19px;
  background: rgba(11, 13, 20, .38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.lshow__media--zoom:hover .lshow__zoom,
.lshow__media--zoom:focus-visible .lshow__zoom { opacity: 1; transform: translateY(0); }
.lshow__media--zoom:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

/* ── Text panelu ── */
.lshow__copy { display: grid; align-content: center; }
/* O stupeň níž než nadpis sekce (clamp(42–72)) — stejná škála jako ostatní
   nadpisy uvnitř sekcí v tématu. */
.lshow__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.005em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.lshow__text {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 46ch;
}
.lshow__bullets {
  list-style: none;
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 46ch;
}
.lshow__bullets li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
}
.lshow__bullets .ti {
  font-size: 18px;
  line-height: 1.35;
  color: var(--red);
}
/* Tlačítko sedí pod textovým sloupcem — stejná mřížka jako panel, aby jeho
   levá hrana lícovala s textem (ne s levým okrajem fotky). */
.lshow__cta {
  margin-top: clamp(16px, 1.8vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 3.6vw, 64px);
}
.lshow__cta .btn { grid-column: 2; justify-self: start; }

@media (max-width: 900px) {
  .lshow__panel { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .lshow__media { aspect-ratio: 3 / 2; }
  .lshow__cta { grid-template-columns: 1fr; }
  .lshow__cta .btn { grid-column: 1; }
}
/* Na úzkém displeji karty pod sebe — celá šířka je pohodlnější cíl než mřížka. */
@media (max-width: 560px) {
  .lshow.is-ready .lshow__tabs { grid-template-columns: 1fr; gap: 8px; }
  .lshow__tab { padding: 12px 14px; gap: 12px; }
  .lshow__tabico { width: 40px; height: 40px; border-radius: 10px; }
  .lshow__tabico svg { width: 22px; height: 22px; }
  .lshow__cta .btn { width: 100%; justify-content: center; }
}

/* Bez pohybu: žádný dojezd ani nadzvedávání karet. */
@media (prefers-reduced-motion: reduce) {
  .lshow__frame { transform: none !important; }
  .lshow__tab { transition: none; }
  .lshow__tab:hover,
  .lshow__tab.is-active { translate: none; }
}

/* =========================================================
   ROZVADĚČ OKRUHŮ  (.cpanel — blok elpe/circuit-panel)

   Oblasti služby visí na DIN liště jako modulární jističe. Na scroll se
   okruhy postupně sepnou (páčka nahoru, LED naskočí) a od jističe sjede
   po vodiči jiskra do karty s popisem. Klik jistič vypne — karta zůstane
   čitelná, jen ztlumená, takže to je hračka, ne skrývání obsahu.

   Bez JS je všechno sepnuté a na svém místě (třídy `is-on` sedí v markupu).
   ========================================================= */
.cpanel {
  background: var(--navy);
  color: #fff;
  overflow-x: clip;
}
.cpanel__head { max-width: 62ch; display: grid; gap: clamp(12px, 1.4vw, 18px); }
.cpanel__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: .98;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.cpanel__sub {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
  max-width: 58ch;
}

.cpanel__rig { position: relative; margin-top: clamp(40px, 5vw, 72px); }

/* ── DIN lišta se sběrnicí ── */
.cpanel__rail {
  position: relative;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(180deg, #2b3350 0%, #1d2439 55%, #262e48 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .3);
  overflow: hidden;
}
/* Jiskra putující po sběrnici — jediná trvalá animace sekce. */
.cpanel__spark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -22%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(229, 35, 41, .85), transparent);
  animation: cpanel-bus 5.5s linear infinite;
}
@keyframes cpanel-bus {
  0%   { transform: translateX(0); }
  100% { transform: translateX(560%); }
}

.cpanel__row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--cp-n, 3), minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px);
}
.cpanel__slot { position: relative; display: grid; justify-items: center; }

/* ── Jistič ── */
.cpanel__breaker {
  position: relative;
  margin-top: -6px;
  width: 76px;
  height: 132px;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: 6px 6px 8px 8px;
  background: linear-gradient(180deg, #f4f5f8 0%, #dfe1e9 62%, #c9ccd8 100%);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .9);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding-top: 12px;
  transition: box-shadow .35s ease, translate .35s ease;
}
.cpanel__breaker:hover { translate: 0 -3px; box-shadow: 0 20px 38px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .9); }
.cpanel__breaker:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
/* Zoubky na boku, ať to není jen šedý obdélník. */
.cpanel__breaker::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  height: 22px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(25, 30, 48, .16) 0 2px, transparent 2px 7px);
}
.cpanel__led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9aa0b4;
  box-shadow: none;
  transition: background .4s ease, box-shadow .4s ease;
}
/* Okénko s páčkou */
.cpanel__lever {
  position: relative;
  width: 30px;
  height: 54px;
  border-radius: 4px;
  background: #1d2439;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.cpanel__grip {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 22px;
  bottom: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ff5a5f 0%, var(--red) 60%, var(--red-800) 100%);
  transition: bottom .42s cubic-bezier(.34, 1.56, .64, 1);
}
.cpanel__code {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #3c4260;
}
/* Text jen pro čtečky — jistič sám je jen obrázek. */
.cpanel__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sepnutý okruh: páčka nahoře, LED svítí. */
.cpanel__slot.is-on .cpanel__grip { bottom: 28px; }
.cpanel__slot.is-on .cpanel__led {
  background: #4ade80;
  box-shadow: 0 0 10px rgba(74, 222, 128, .9);
}

/* ── Vodič od jističe ke kartě ── */
.cpanel__wire {
  position: relative;
  width: 2px;
  height: clamp(28px, 3.4vw, 48px);
  margin: 10px 0 0;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
}
.cpanel__flow {
  position: absolute;
  left: -1px;
  right: -1px;
  top: -60%;
  height: 60%;
  background: linear-gradient(180deg, transparent, var(--red), transparent);
  opacity: 0;
}
.cpanel__slot.is-on .cpanel__wire { background: rgba(229, 35, 41, .35); }
/* Proud teče po vodiči, dokud je okruh sepnutý. Fázový posun podle --i,
   ať jiskry nejedou ve všech okruzích naráz. */
.cpanel__slot.is-on .cpanel__flow {
  animation: cpanel-flow 2.6s ease-in infinite;
  animation-delay: calc(var(--i, 0) * .5s);
}
@keyframes cpanel-flow {
  0%   { transform: translateY(0);    opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translateY(280%); opacity: 0; }
  100% { transform: translateY(280%); opacity: 0; }
}

/* ── Karta okruhu ── */
.cpanel__card {
  position: relative;
  width: 100%;
  border-radius: var(--r);
  padding: clamp(18px, 2vw, 26px);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  text-align: left;
  transition: background .45s ease, border-color .45s ease, opacity .45s ease;
}
.cpanel__slot:not(.is-on) .cpanel__card { opacity: .42; }

/* ── Proud obíhající po obvodu karty ──
   Kónický gradient s krátkým světlým úsekem; maska nechá jen rámeček, takže
   po hraně karty putuje jiskra. Úhel animuje registrovaná vlastnost --cp-ang
   (bez @property by conic-gradient nešel plynule dopočítat). Vypnutý okruh
   pravidlo ztratí → animace i proud okamžitě mizí. */
@property --cp-ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.cpanel__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--cp-ang),
    transparent 0deg 248deg,
    rgba(229, 35, 41, .55) 288deg,
    rgba(229, 35, 41, .95) 322deg,
    #fff2f2 336deg,
    rgba(229, 35, 41, .95) 350deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.cpanel__slot.is-on .cpanel__card::before {
  opacity: 1;
  animation: cpanel-orbit 4.6s linear infinite;
  animation-delay: calc(var(--i, 0) * -1.4s);
}
@keyframes cpanel-orbit {
  to { --cp-ang: 360deg; }
}
.cpanel__ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  margin-bottom: 14px;
  background: rgba(229, 35, 41, .16);
  color: var(--red);
  transition: background .45s ease, color .45s ease;
}
.cpanel__slot:not(.is-on) .cpanel__ico { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .5); }
.cpanel__ico svg { display: block; }
.cpanel__title {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-wrap: balance;
}
.cpanel__text {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}
.cpanel__cta { margin-top: clamp(32px, 4vw, 56px); }

@media (max-width: 860px) {
  /* Na úzkém displeji lišta nedává smysl — z rozvaděče se stane sloupec,
     jistič si sedne vedle karty jako ikona okruhu. */
  .cpanel__rail { display: none; }
  .cpanel__row { grid-template-columns: 1fr; gap: 16px; }
  .cpanel__slot {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 14px;
  }
  .cpanel__breaker { margin: 0; width: 56px; height: 100px; }
  .cpanel__lever { width: 24px; height: 42px; }
  .cpanel__slot.is-on .cpanel__grip { bottom: 20px; }
  .cpanel__wire { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cpanel__spark { animation: none; display: none; }
  .cpanel__slot.is-on .cpanel__flow { animation: none; }
  /* Proud kolem karty zůstane jako klidný červený obrys, jen neobíhá. */
  .cpanel__slot.is-on .cpanel__card::before {
    animation: none;
    background: rgba(229, 35, 41, .5);
  }
  .cpanel__grip,
  .cpanel__breaker { transition: none; }
}

/* =========================================================
   TRASA VEDENÍ  (.lpline — blok elpe/light-path, rozložení „line")

   Nad kartami kroků stojí sloupy, mezi nimi visí vodič. Vodič je jedno SVG
   přes celou šířku s preserveAspectRatio="none" — path se natáhne úplně
   stejně jako procentní pozice sloupů, a `vector-effect: non-scaling-stroke`
   přitom udrží stálou tloušťku čáry (stejná technika jako u .mtime).

   POZOR: mřížka kroků je BEZ mezery (gap 0) a odsazení dělá vnitřní padding.
   Se `gap` by se střed buňky rozešel s procentní pozicí sloupu na vodiči
   (u tří sloupců zhruba o 10 px) a vodič by se sloupu nedržel.

   Na scroll se vodič zapne (kreslí se zleva doprava), u každého sloupu
   rozsvítí izolátory a vytáhne kartu; pak po něm dokola probíhá impuls
   (initPowerLine). Bez JS je vodič celý a všechny kroky svítí.
   ========================================================= */
.lpline {
  position: relative;
  isolation: isolate;
  overflow-x: clip;                 /* vodič přetéká přes okraje wrapu */
  padding: clamp(72px, 9vw, 150px) 0 clamp(64px, 8vw, 140px);
  color: #fff;
}
/* Podklad = přesně ten z homepage (.about::before), shodně s layoutem „band" —
   sekce má vypadat jako součást webu, ne jako cizí ostrov. */
.lpline__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(130% 90% at 85% 0%, rgba(44, 90, 166, .20), transparent 58%),
    radial-gradient(100% 80% at 0% 100%, rgba(229, 35, 41, .10), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
}
.lpline .elpe-deco { z-index: -1; }
.lpline .elpe-deco__sym { color: #fff; opacity: .05; }
@media (max-width: 700px) {
  .lpline .elpe-deco { display: none; }
}

.lpline__head {
  max-width: min(100%, 1000px);
  margin: 0 auto clamp(40px, 4.6vw, 74px);
  text-align: center;
}
.lpline__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.lpline__intro {
  margin: clamp(16px, 1.8vw, 26px) auto 0;
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .66);
}

/* ── Trasa ── */
.lpline__rig {
  --lpl-band: clamp(104px, 10vw, 158px);    /* výška pásu s vodičem = výška sloupu */
  position: relative;
  padding-top: var(--lpl-band);
  max-width: 1240px;
  margin-inline: auto;
}
.lpline__svg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--lpl-band);
  width: 100%;
  overflow: visible;
  pointer-events: none;
}
.lpline__track,
.lpline__wire,
.lpline__pulse {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.lpline__track { stroke: rgba(255, 255, 255, .18); stroke-width: 1.6; }
.lpline__wire  { stroke: var(--red); stroke-width: 2.2; }
/* Impuls „proudu" — světlý úsek, který po vodiči pořád dokola probíhá.
   Výchozí prázdný dash = neviditelný, dokud ho JS nerozjede. */
.lpline__pulse {
  stroke: #fff;
  stroke-width: 4;
  stroke-dasharray: 0 1000;
  opacity: .95;
  filter: drop-shadow(0 0 8px rgba(229, 35, 41, .95));
}

.lpline__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--lpl-n, 3), minmax(0, 1fr));
  gap: 0;                                   /* viz komentář v hlavičce sekce */
}
.lpline__step {
  position: relative;
  padding-inline: clamp(10px, 1.5vw, 24px);
}

/* Sloup stojí přesně nad středem karty a horní hranou navazuje na vodič. */
.lpline__mast {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  height: var(--lpl-band);
  width: calc(var(--lpl-band) * .64);
}
.lpline__mast svg { display: block; width: 100%; height: 100%; }
/* Plošná kresba (ne drátěnka) — stejný jazyk jako ilustrace vesnice na
   homepage: světlá plocha + tmavší hrana pro objem, konzoly s podsvětlením. */
.lpline__post    { fill: rgba(255, 255, 255, .26); transition: fill .45s ease; }
.lpline__post--edge { fill: rgba(11, 15, 32, .34); }
.lpline__arm     { fill: rgba(255, 255, 255, .32); transition: fill .45s ease; }
.lpline__armedge { fill: rgba(11, 15, 32, .34); }
.lpline__brace   { fill: rgba(255, 255, 255, .16); transition: fill .45s ease; }
.lpline__ins {
  fill: rgba(255, 255, 255, .4);
  transition: fill .45s ease, filter .45s ease;
}
.lpline__step.is-on .lpline__post,
.lpline__step.is-on .lpline__arm { fill: rgba(255, 255, 255, .42); }
.lpline__step.is-on .lpline__brace { fill: rgba(255, 255, 255, .22); }
.lpline__step.is-on .lpline__post--edge { fill: rgba(11, 15, 32, .34); }
.lpline__step.is-on .lpline__ins {
  fill: var(--red);
  filter: drop-shadow(0 0 5px rgba(229, 35, 41, .75));
}

/* ── Karta kroku ── */
.lpline__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: 20px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .5s ease, border-color .5s ease;
}
.lpline__step.is-on .lpline__card {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}
.lpline__media {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 clamp(16px, 1.7vw, 22px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.lpline__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.lpline__media--zoom { cursor: zoom-in; }
.lpline__media--zoom:hover img,
.lpline__media--zoom:focus-visible img { transform: scale(1.05); }
.lpline__media--zoom:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.lpline__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 13, 20, .55);
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transition: opacity .3s ease;
}
.lpline__media--zoom:hover .lpline__zoom,
.lpline__media--zoom:focus-visible .lpline__zoom { opacity: 1; }

.lpline__label {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(229, 35, 41, .16);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lpline__title {
  margin: 0;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
.lpline__text {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.lpline__list {
  list-style: none;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(11px, 1.2vw, 15px);
}
.lpline__list li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}
.lpline__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px rgba(229, 35, 41, .7);
}
.lpline__cta { text-align: center; margin-top: clamp(40px, 4.6vw, 72px); }

/* Pod 900 px trasa nedává smysl — zůstane sloupec karet. */
@media (max-width: 900px) {
  .lpline__rig { --lpl-band: 0px; padding-top: 0; }
  .lpline__svg,
  .lpline__mast { display: none; }
  .lpline__steps { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 28px); }
  .lpline__step { padding-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lpline__pulse { display: none; }
  .lpline__card,
  .lpline__post,
  .lpline__arm,
  .lpline__brace,
  .lpline__ins,
  .lpline__media img { transition: none; }
}

/* =========================================================
   TEPLOVZDUŠNÝ KOLEKTOR (.sflow — blok elpe/solar-flow)

   Řez fasádou. Vzduch proudí pořád (CSS `offset-path`), fáze jen rozsvěcí
   část kresby a její popisek. Bez JS zůstane fáze 1 a kroky jsou seznam.
   ========================================================= */
.sflow {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: clamp(72px, 9vw, 150px) 0 clamp(64px, 8vw, 140px);
  color: var(--ink);

  /* Barvy drží paletu vesnice: studená slate, teplá značková červená,
     světlo slunce stejné jako kužely lamp na homepage. */
  --sf-cold: #4c6a88;   /* studený vzduch — modrá z oken vesnice */
  --sf-hot:  #E52329;   /* ohřátý vzduch — značková červená */
  --sf-amber:#efa70e;   /* svítící plocha; vesnice ji má na světlech aut */
  --sf-glow: #fbea68;   /* její světlejší jádro, odtamtud stejně */
  --sf-wet:  #2c5d7d;
}
/* Ilustrace vesnice je světlá kresba — celá sekce je proto světlá, jinak by
   scéna svítila jako lightbox uprostřed tmy. */
.sflow__sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(44, 90, 166, .07), transparent 60%),
    radial-gradient(100% 80% at 0% 100%, rgba(229, 35, 41, .05), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--surface) 100%);
}
.sflow .elpe-deco { z-index: -1; }

.sflow__head { max-width: 66ch; display: grid; gap: clamp(12px, 1.4vw, 18px); }
.sflow__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: .96;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.sflow__intro { margin: 0; color: var(--muted); font-size: clamp(17px, 1.3vw, 20px); }

.sflow__stage { margin-top: clamp(36px, 4.4vw, 64px); }

/* ── Scéna ─────────────────────────────────────────────── */
/* Ilustrace vesnice je světlá kresba na bílém — scéna proto sedí ve světlé
   kartě přesně jako .vmap na homepage, ne na tmavé obloze sekce. */
.sflow__scene {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, #f6f8f7 100%);
  border: 1px solid rgba(25, 30, 48, .07);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.sflow__svg { display: block; width: 100%; height: auto; }

/* Části kresby: neaktivní se jen ztlumí, nikdy nezmizí (schéma musí být
   pořád čitelné jako celek). */
.sflow__g {
  opacity: .45;
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
}

/* Reflektor. Závoj v barvě podkladu spolkne okolí a maska v něm nechá díru
   nad aktivní částí — kresba nezmizí, jen ustoupí. */
.sflow__veil {
  fill: #fbfcfc;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.sflow__stage[data-phase="1"] .sflow__veil[data-part="sun"],
.sflow__stage[data-phase="2"] .sflow__veil[data-part="intake"],
.sflow__stage[data-phase="3"] .sflow__veil[data-part="duct"],
.sflow__stage[data-phase="4"] .sflow__veil[data-part="dry"] { opacity: .74; }
.sflow__stage[data-phase="1"] .sflow__g[data-part="sun"],
.sflow__stage[data-phase="2"] .sflow__g[data-part="intake"],
.sflow__stage[data-phase="3"] .sflow__g[data-part="duct"],
.sflow__stage[data-phase="4"] .sflow__g[data-part="dry"] { opacity: 1; }

/* Terén pod domem — šalvějová plocha vesnice a k ní plochý vržený stín. */
.sflow__terrain { fill: url(#sf-terrain); }
.sflow__shadow  { fill: url(#sf-shadow); }

/* Slunce. Plochý kotouč a tenké paprsky — vesnice nezná záři ani gradienty
   na tělesech, takže sem nepatří ani aura kolem slunce. */
.sflow__sun     { fill: var(--sf-amber); }
.sflow__suncore { fill: var(--sf-glow); }
.sflow__sunring {
  fill: none;
  stroke: var(--sf-amber);
  stroke-width: 2;
  opacity: .5;
  transform-box: view-box;
  transform-origin: 1330px 1010px;
  animation: sf-halo 4.4s ease-in-out infinite;
}
@keyframes sf-halo {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.26); opacity: 0;   }
}
.sflow__ray {
  fill: none;
  stroke: var(--sf-amber);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 26 40;
  opacity: .85;
  animation: sf-ray 2.4s linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes sf-ray { from { stroke-dashoffset: 66; } to { stroke-dashoffset: 0; } }

/* ── Kolektor na fasádě ────────────────────────────────── */
/* Rámová deska má tři plochy jako každé těleso ve vesnici: čelo, světlá
   horní hrana, tmavší bok. Moduly na ní jsou stavěné jako FVE na střeše —
   plocha s bílým lemem a bílou mřížkou. */
.sflow__ptop  { fill: #5d6266; }
.sflow__pside { fill: #3f4a52; }
.sflow__pface { fill: #4a5660; }
.sflow__pv    { fill: #4c6a88; stroke: #fff; stroke-width: 2; stroke-miterlimit: 10; }
.sflow__grid  { fill: none; stroke: #fff; stroke-width: .75; }
.sflow__abs   { fill: #26333f; stroke: #fff; stroke-width: 2; stroke-miterlimit: 10; }
/* Absorbér se rozžhaví jen ve fázi „sběr energie". */
.sflow__heat  { fill: url(#sf-heat); opacity: .22; transition: opacity .7s ease; }
.sflow__stage[data-phase="1"] .sflow__heat { opacity: 1; }
/* Perforace = nasávání; ve své fázi zesvětlá, jinak je to jen rastr dírek. */
.sflow__perf { fill: #fff; fill-opacity: .28; transition: fill .5s ease, fill-opacity .5s ease; }
/* Na tmavém absorbéru musí zvýrazněná perforace zesvětlat, ne ztmavnout. */
.sflow__stage[data-phase="2"] .sflow__perf { fill: #dceaf7; fill-opacity: 1; }

/* Interiér: teplo přibývá ve fázi 3, vlhkost mizí ve fázi 4. Vzduch se barví
   po plochách — každá stěna má vlastní krytí, stejně jako každá plocha
   ve vesnici má vlastní odstín. */
.sflow__warm { opacity: 0;  transition: opacity .8s ease; }
.sflow__damp { opacity: .9; transition: opacity .8s ease; }
.sflow__warm .sflow__face { fill: var(--sf-hot); }
.sflow__damp .sflow__face { fill: var(--sf-cold); }
.sflow__face--wall-l { opacity: .19; }
.sflow__face--wall-r { opacity: .13; }
.sflow__face--floor  { opacity: .09; }
.sflow__stage[data-phase="3"] .sflow__warm,
.sflow__stage[data-phase="4"] .sflow__warm { opacity: 1; }
.sflow__stage[data-phase="4"] .sflow__damp { opacity: 0; }

/* Prostup zdí + ventilátor — stejná stavba jako vrtule tepelného čerpadla
   ve vesnici: zapuštěný panel, kruh s tenkým obrysem, osm paprsků. */
.sflow__duct    { fill: #7c8b8e; stroke: #3d546a; stroke-width: 1; stroke-miterlimit: 10; }
.sflow__fanring { fill: #5f6c72; stroke: #3d546a; stroke-width: 1; }
.sflow__spoke   { stroke: #3d546a; stroke-width: 1.2; stroke-linecap: round; }
.sflow__fanhub  { fill: #3d546a; }
.sflow__fan {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: sf-spin 2.6s linear infinite;
}
.sflow__stage[data-phase="3"] .sflow__fan { animation-duration: 1.1s; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* Aktivní část se obtáhne červeně — přesně jak vesnice na homepage značí
   vybranou službu (assets/overlays/*.svg: fill none, #e3000f, 3 px). */
.sflow__mark {
  fill: none;
  stroke: #e3000f;
  stroke-width: 3;
  stroke-miterlimit: 10;
  opacity: 0;
  transition: opacity .45s ease;
}
.sflow__stage[data-phase="1"] .sflow__g[data-part="sun"] .sflow__mark,
.sflow__stage[data-phase="2"] .sflow__g[data-part="intake"] .sflow__mark,
.sflow__stage[data-phase="3"] .sflow__g[data-part="duct"] .sflow__mark,
.sflow__stage[data-phase="4"] .sflow__g[data-part="dry"] .sflow__mark { opacity: 1; }
.sflow__airline,
.sflow__dryline {
  fill: none;
  stroke: rgba(60, 84, 106, .3);
  stroke-width: 1.2;
  stroke-dasharray: 5 8;
}

/* ── Částice na dráze ──────────────────────────────────── */
/* Bez podpory offset-path by seděly v levém horním rohu → radši je vůbec
   nezobrazovat; dráha zůstane naznačená čárkovanou linkou. */
.sflow__dash,
.sflow__drop { display: none; }

@supports (offset-path: path("M 0 0 L 1 1")) {
  .sflow__dash,
  .sflow__drop {
    display: block;
    transform-box: view-box;
    offset-rotate: auto;
  }
  /* Dráha přichází z `--p` na rodičovské skupině — jediný zdroj je PHP,
     které tutéž křivku vykreslí i jako naznačenou linku. */
  .sflow__dash {
    fill: none;
    stroke: var(--sf-cold);
    stroke-width: 4;
    stroke-linecap: round;
    offset-path: var(--p);
    animation: sf-air 8s linear infinite;
    animation-delay: var(--d, 0s);
  }
  .sflow__drop {
    fill: var(--sf-wet);
    opacity: 0;
    offset-path: var(--p);
    offset-rotate: 0deg;
    animation: sf-dry 7.2s linear infinite;
    animation-delay: var(--d, 0s);
  }
}
/* Barva se mění po cestě: studený venkovní vzduch → ohřátý v interiéru. */
@keyframes sf-air {
  0%   { offset-distance: 0%;   stroke: var(--sf-cold); opacity: 0; }
  7%   { opacity: .95; }
  38%  { stroke: var(--sf-cold); }
  60%  { stroke: var(--sf-hot); }
  93%  { opacity: .95; }
  100% { offset-distance: 100%; stroke: var(--sf-hot); opacity: 0; }
}
@keyframes sf-dry {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: .8; }
  88%  { opacity: .8; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* Kapky mají smysl jen u odvlhčení — jinde by mátly. */
.sflow__drops { opacity: 0; transition: opacity .5s ease; }
.sflow__stage[data-phase="4"] .sflow__drops { opacity: 1; }

/* ── Popisky nad scénou ────────────────────────────────── */
.sflow__tag {
  position: absolute;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(25, 30, 48, .08);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity .45s ease, translate .45s cubic-bezier(.22, 1, .36, 1);
}
.sflow__tag i { font-size: 1.15em; color: var(--red); }
.sflow__tag b { font-weight: 800; }
.sflow__tag--sun    { left: 2%;  top: 20%; }
.sflow__tag--intake { left: 4%;  top: 78%; }
.sflow__tag--duct   { left: 40%; top: 93%; }
.sflow__tag--dry    { right: 2%; top: 36%; }
.sflow__stage[data-phase="1"] .sflow__tag--sun,
.sflow__stage[data-phase="2"] .sflow__tag--intake,
.sflow__stage[data-phase="3"] .sflow__tag--duct,
.sflow__stage[data-phase="4"] .sflow__tag--dry { opacity: 1; translate: 0 0; }

/* ── Kroky = zároveň přepínač fází ─────────────────────── */
.sflow__steps {
  list-style: none;
  margin: clamp(22px, 2.6vw, 36px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.sflow__btn {
  display: grid;
  gap: 8px;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: var(--r);
  background: #fff;
  border: 1px solid rgba(25, 30, 48, .08);
  box-shadow: var(--shadow-sm);
  color: inherit;
  transition: background .35s ease, border-color .35s ease, translate .35s cubic-bezier(.22, 1, .36, 1);
}
.sflow__btn:hover { box-shadow: var(--shadow); translate: 0 -3px; }
.sflow__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sflow__num {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--g3);
  transition: color .35s ease;
}
.sflow__ico { display: block; color: var(--g4); transition: color .35s ease; }
.sflow__ico svg { width: 24px; height: 24px; }
.sflow__title { font-weight: 700; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.25; }
.sflow__text  { color: var(--muted); font-size: 15px; line-height: 1.55; }

.sflow__step.is-on .sflow__btn {
  background: rgba(229, 35, 41, .05);
  border-color: rgba(229, 35, 41, .5);
}
.sflow__step.is-on .sflow__num,
.sflow__step.is-on .sflow__ico { color: var(--red); }

.sflow__cta { margin-top: clamp(36px, 4vw, 64px); text-align: center; }

/* Bez JS nemá „přepínač" co přepínat — kroky pak vypadají jako seznam. */
.sflow__stage:not(.is-ready) .sflow__btn { cursor: default; }

@media (max-width: 900px) {
  .sflow__tag { font-size: 11px; padding: 6px 10px; }
  .sflow__tag--sun    { left: 1%;  top: 14%; }
  .sflow__tag--intake { left: 2%;  top: 80%; }
  .sflow__tag--duct   { left: 34%; top: 94%; }
  .sflow__tag--dry    { right: 1%; top: 30%; }
}
@media (max-width: 620px) {
  /* Na mobilu by se popisky přes sebe překrývaly — scéna zůstane čistá. */
  .sflow__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sflow__dash,
  .sflow__drop,
  .sflow__ray,
  .sflow__sunring { animation: none; }
  /* Zamrzlá čárka by zůstala jako pahýl u slunce — paprsek radši dokreslím. */
  .sflow__ray { stroke-dasharray: none; opacity: .4; }
  .sflow__sunring { opacity: .3; }
  .sflow__dash,
  .sflow__drop    { display: none; }
  .sflow__fan     { animation: none; }
  .sflow__tag,
  .sflow__g,
  .sflow__veil,
  .sflow__btn     { transition: none; }
}

/* =========================================================
   PROHLÍDKA SPOLEČNÝCH PROSTOR  (.rhouse — blok elpe/riser-house)

   Fotka z reálné realizace jako podklad pro značky. Fotka se proto nejdřív
   ztlumí (odbarvení + navy duotón filtrem, přes ni vinětace a zrno) — jinak by
   se červené hotspoty ztratily v pestrém pozadí. Hotspoty visí v procentech,
   každý má protějšek v seznamu vedle scény a obě strany se zvýrazňují spolu.

   Přepnutí fáze není crossfade: přes scénu přejede červený sken, pod ním se
   fotka vymění (odchozí odjede, příchozí dojede z lehkého přiblížení) a
   hotspoty naskočí po sobě. Bez JS zůstane vidět první fáze, přepínač je skrytý.
   ========================================================= */
.rhouse {
  background: var(--navy);
  color: #fff;
  overflow-x: clip;
}
.rhouse__head { max-width: 62ch; display: grid; gap: clamp(12px, 1.4vw, 18px); }
.rhouse__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: .98;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.rhouse__intro {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
  max-width: 58ch;
}

.rhouse__stage {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

/* ── Scéna ── */
.rhouse__scene {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #0F1322;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .45);
  isolation: isolate;

  /* Souřadnice vybrané značky + míra přiblížení. Z nich si polohu dopočítá
     jak zoom fotky (transform-origin), tak samy značky — jinak by se od
     obrazu odtrhly, jakmile se fotka přiblíží. */
  --hx: 50%;
  --hy: 50%;
  --s: 1;
}
.rhouse__scene.is-zoomed { --s: 1.14; }

/* Fáze leží na sobě; viditelná je ta s .is-on. */
.rhouse__shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  scale: 1.06;
  transition: opacity .55s ease, visibility .55s, scale .8s cubic-bezier(.22, 1, .36, 1);
}
.rhouse__shot.is-on { opacity: 1; visibility: visible; scale: 1; }

/* Přibližuje se jen fotka. Bod pod vybranou značkou je pevný bod transformace,
   takže značka zůstane přesně tam, kde byla. */
.rhouse__zoom {
  position: absolute;
  inset: 0;
  transform: scale(var(--s));
  transform-origin: var(--hx) var(--hy);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1), transform-origin .5s ease;
}
.rhouse__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* „Ořídnutí": odbarvit a lehce stáhnout jas, aby se fotka stala podkladem.
     Chladný nádech dodá vrstva .rhouse__grade nad ní. Pozor na míru — při
     silnějším ztlumení přestane být na fotce vidět, co značky ukazují. */
  filter: grayscale(.45) saturate(.85) contrast(1.05) brightness(.92);
}

/* Grade: navy nádech + vinětace + jemné zrno v jedné vrstvě. Leží MIMO zoom,
   aby vinětace držela u rámu a nelezla dovnitř obrazu. Zrno je inline SVG
   (feTurbulence) — žádný externí soubor, žádný request navíc. */
.rhouse__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* clona pod popiskou fotky — ta padá i na světlou podlahu */
    linear-gradient(0deg, rgba(11, 13, 20, .78) 0%, rgba(11, 13, 20, 0) 26%),
    radial-gradient(120% 92% at 50% 42%, rgba(11, 13, 20, 0) 45%, rgba(11, 13, 20, .5) 100%),
    linear-gradient(180deg, rgba(25, 30, 48, .34) 0%, rgba(25, 30, 48, .42) 100%),
    radial-gradient(72% 58% at 78% 12%, rgba(229, 35, 41, .22) 0%, rgba(229, 35, 41, 0) 70%);
}
.rhouse__grade::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Reflektor — ztmaví scénu všude kromě okolí vybrané značky. */
.rhouse__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, background .5s ease;
  /* Poloměry vyladěné na scéně 420–460 px: čisté okno kolem detailu, měkký
     přechod a jen mírné ztmavení okolí — silnější clona fotku uduší. */
  background: radial-gradient(circle at var(--hx) var(--hy),
    rgba(11, 13, 20, 0) 0,
    rgba(11, 13, 20, 0) 78px,
    rgba(11, 13, 20, .52) 235px,
    rgba(11, 13, 20, .52) 100%);
}
.rhouse__scene.is-zoomed .rhouse__spot { opacity: 1; }

/* Technický rám: rohové značky jako v zaměřovacím hledáčku. */
.rhouse__frame {
  position: absolute;
  inset: 14px;
  pointer-events: none;
  border-radius: 8px;
  background:
    linear-gradient(var(--red), var(--red)) left top / 22px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) left top / 2px 22px no-repeat,
    linear-gradient(var(--red), var(--red)) right top / 22px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) right top / 2px 22px no-repeat,
    linear-gradient(var(--red), var(--red)) left bottom / 22px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) left bottom / 2px 22px no-repeat,
    linear-gradient(var(--red), var(--red)) right bottom / 22px 2px no-repeat,
    linear-gradient(var(--red), var(--red)) right bottom / 2px 22px no-repeat;
  opacity: .8;
}

/* Sken: proužek světla, který přejede scénu při změně fáze. Animace se
   restartuje přidáním třídy z JS (a hned zase odebráním na animationend). */
.rhouse__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 34%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg,
    rgba(229, 35, 41, 0) 0%,
    rgba(229, 35, 41, .1) 55%,
    rgba(255, 214, 215, .85) 92%,
    rgba(229, 35, 41, .95) 100%);
  box-shadow: 0 6px 26px rgba(229, 35, 41, .6);
}
.rhouse__stage.is-scanning .rhouse__scan { animation: rhouse-scan .75s cubic-bezier(.4, 0, .2, 1); }
@keyframes rhouse-scan {
  0%   { opacity: 0; transform: translateY(-110%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(300%); }
}

/* ── Značka ── */
.rhouse__hot {
  position: absolute;
  /* Poloha po přiblížení: bod (x,y) se od pevného bodu (hx,hy) vzdálí --s×.
     Při --s:1 vyjde zpátky přesně x/y. */
  left: calc(var(--hx) + (var(--x) - var(--hx)) * var(--s));
  top: calc(var(--hy) + (var(--y) - var(--hy)) * var(--s));
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  padding: 0;
  display: grid;
  place-items: center;
  z-index: 3;
  opacity: 0;
  scale: .6;
  transition: opacity .4s ease, scale .4s cubic-bezier(.34, 1.56, .64, 1),
    left .8s cubic-bezier(.22, 1, .36, 1), top .8s cubic-bezier(.22, 1, .36, 1);
}
/* Značky naskakují po sobě, až když je fáze na scéně. */
.rhouse__shot.is-on .rhouse__hot {
  opacity: 1;
  scale: 1;
  transition-delay: calc(.35s + var(--i, 0) * .1s), calc(.35s + var(--i, 0) * .1s), 0s, 0s;
}
/* Vybraná značka jde nad ostatní, ať ji rozbalená karta nepodleze. */
.rhouse__hot.is-active { z-index: 5; }
/* Ostatní značky při vybrané ustoupí do pozadí. */
.rhouse__scene.is-zoomed .rhouse__hot:not(.is-active) { opacity: .5; }

.rhouse__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(229, 35, 41, .25), 0 2px 10px rgba(0, 0, 0, .5);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.rhouse__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(229, 35, 41, .55);
  animation: rhouse-ping 2.6s ease-out infinite;
  animation-delay: calc(var(--i, 0) * .45s);
}
@keyframes rhouse-ping {
  0%   { transform: scale(.5); opacity: .75; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
/* Vybraná značka nepulzuje — kroužek se zastaví jako pevné zaměření. */
.rhouse__hot.is-active .rhouse__ring {
  animation: none;
  transform: scale(1.35);
  border-color: rgba(255, 255, 255, .85);
  opacity: 1;
}
.rhouse__hot:hover .rhouse__dot,
.rhouse__hot.is-active .rhouse__dot {
  transform: scale(1.5);
  box-shadow: 0 0 0 6px rgba(229, 35, 41, .3), 0 2px 12px rgba(0, 0, 0, .55);
}

/* Ukazatel běhu automatického průvodce — obíhá po obvodu značky. */
@property --rh-p {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
.rhouse__prog {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  opacity: 0;
  background: conic-gradient(from -90deg, var(--red) calc(var(--rh-p) * 360deg), rgba(255, 255, 255, .16) 0);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 2px));
          mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 2px));
}
.rhouse__hot.is-touring .rhouse__prog {
  opacity: 1;
  animation: rhouse-prog 3.8s linear;
}
@keyframes rhouse-prog {
  from { --rh-p: 0; }
  to   { --rh-p: 1; }
}

/* Popiska ve fotce: jen název, a jen u vybrané značky.
   Popisky u všech značek naráz se na fotce překrývaly — v klidu tedy zůstanou
   samotné tečky a název vyjede až po najetí (nebo když značku ukáže průvodce
   či řádek v seznamu). Celý popis nese seznam vedle scény.
   Skrývá se přes opacity/visibility, ne display: none — layoutPills() si
   potřebuje změřit šířku popisky, i když není vidět. */
.rhouse__pill {
  position: absolute;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 9px;
  background: rgba(180, 22, 27, .92);
  border: 1px solid rgba(255, 255, 255, .34);
  backdrop-filter: blur(7px);
  box-shadow: 0 6px 22px rgba(11, 13, 20, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s, transform .28s cubic-bezier(.34, 1.56, .64, 1);
}
.rhouse__hot:hover .rhouse__pill,
.rhouse__hot.is-active .rhouse__pill { opacity: 1; visibility: visible; }
.rhouse__pill::after {
  /* Neviditelný můstek k tečce, ať popiska nezmizí při přejetí mezerou. */
  content: "";
  position: absolute;
  inset: -6px -18px;
  z-index: -1;
}
.rhouse__ptitle {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
/* Vodicí čárka od tečky k popisce — popiska je o kus dál, ať nelepí na značku. */
.rhouse__pill::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, .4);
}
.rhouse__hot[data-pos="right"] .rhouse__pill { left: calc(100% + 14px); top: 50%; transform: translate(-6px, -50%); }
.rhouse__hot[data-pos="left"]  .rhouse__pill { right: calc(100% + 14px); top: 50%; transform: translate(6px, -50%); }
.rhouse__hot[data-pos="top"]   .rhouse__pill { bottom: calc(100% + 14px); left: 50%; transform: translate(-50%, 6px); }
.rhouse__hot[data-pos="bottom"] .rhouse__pill { top: calc(100% + 14px); left: 50%; transform: translate(-50%, -6px); }
/* Vybraná popiska dosedne na místo — drobné vyjetí od tečky. */
.rhouse__hot:hover .rhouse__pill,
.rhouse__hot.is-active .rhouse__pill { transform: translate(0, -50%); }
.rhouse__hot[data-pos="top"]:hover .rhouse__pill,
.rhouse__hot[data-pos="top"].is-active .rhouse__pill,
.rhouse__hot[data-pos="bottom"]:hover .rhouse__pill,
.rhouse__hot[data-pos="bottom"].is-active .rhouse__pill { transform: translate(-50%, 0); }
.rhouse__hot[data-pos="right"] .rhouse__pill::before { right: 100%; top: 50%; width: 14px; height: 1px; }
.rhouse__hot[data-pos="left"]  .rhouse__pill::before { left: 100%;  top: 50%; width: 14px; height: 1px; }
/* Překlopení: dlouhý název by u kraje fotky vylezl ven z rámu, tak si popiska
   sedne na druhou stranu značky (třídu dává JS podle změřené šířky). */
.rhouse__hot[data-pos="right"].is-flip .rhouse__pill { left: auto; right: calc(100% + 14px); }
.rhouse__hot[data-pos="left"].is-flip  .rhouse__pill { right: auto; left: calc(100% + 14px); }
.rhouse__hot[data-pos="right"].is-flip .rhouse__pill::before { right: auto; left: 100%; }
.rhouse__hot[data-pos="left"].is-flip  .rhouse__pill::before { left: auto; right: 100%; }
.rhouse__hot[data-pos="top"]   .rhouse__pill::before { top: 100%;  left: 50%; width: 1px; height: 14px; }
.rhouse__hot[data-pos="bottom"] .rhouse__pill::before { bottom: 100%; left: 50%; width: 1px; height: 14px; }

/* Popiska fotky v rohu scény — při výběru značky ustoupí, ať nepřekáží. */
.rhouse__note {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  transition: opacity .4s ease;
}
.rhouse__scene.is-zoomed .rhouse__note { opacity: 0; }

/* ── Panel vedle scény ── */
.rhouse__panel { display: grid; gap: clamp(18px, 2.2vw, 26px); align-content: center; }

/* Přepínač je do doby, než ho JS oživí, schovaný — mrtvé tlačítko neukazujeme. */
.rhouse__switch { display: none; }
.rhouse__stage.is-ready .rhouse__switch {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  justify-self: start;
}
.rhouse__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  transition: background .3s ease, color .3s ease;
}
.rhouse__btn:hover { color: #fff; }
.rhouse__btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.rhouse__btn[aria-pressed="true"] { background: #fff; color: var(--navy); }
.rhouse__btnico { display: grid; place-items: center; }
.rhouse__btnico svg { display: block; }
.rhouse__btn[aria-pressed="true"] .rhouse__btnico { color: var(--red); }

/* Seznamy leží v jedné buňce gridu → přepnutí nehne výškou sekce. */
.rhouse__states { display: grid; }
.rhouse__list {
  grid-area: 1 / 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.rhouse__list.is-on { opacity: 1; visibility: visible; }
/* Řádek = tlačítko: ovládá reflektor na fotce a je zároveň jediná tabovací
   cesta k obsahu (značky ve fotce jsou jen vizuální dvojníci). */
.rhouse__itembtn {
  position: relative;
  width: 100%;
  display: block;
  text-align: left;
  padding: clamp(13px, 1.5vw, 18px);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .25s ease, border-color .25s ease, translate .25s ease;
}
.rhouse__itembtn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.rhouse__item.is-active .rhouse__itembtn {
  background: rgba(229, 35, 41, .14);
  border-color: rgba(229, 35, 41, .5);
  translate: 4px 0;
}
/* Tenký proužek u aktivního řádku — spojí ho opticky se značkou ve fotce. */
.rhouse__itembtn::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--red);
  opacity: 0;
  transition: opacity .25s ease;
}
.rhouse__item.is-active .rhouse__itembtn::before { opacity: 1; }
.rhouse__body { display: grid; gap: 3px; }
.rhouse__label { font-size: 16.5px; font-weight: 800; line-height: 1.3; color: #fff; }
.rhouse__text { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .68); }
.rhouse__caption {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .45);
}

/* ── Karty důvodů ── */
.rhouse__cards {
  list-style: none;
  margin: clamp(44px, 5vw, 76px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--rh-cards, 4), minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.rhouse__card {
  border-radius: var(--r);
  padding: clamp(20px, 2.2vw, 28px);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
}
.rhouse__cardico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  margin-bottom: 14px;
  background: rgba(229, 35, 41, .16);
  color: var(--red);
}
.rhouse__cardico svg { display: block; }
.rhouse__cardtitle {
  margin: 0;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-wrap: balance;
}
.rhouse__cardtext { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.rhouse__cta { margin-top: clamp(32px, 4vw, 56px); display: flex; justify-content: center; }

@media (max-width: 1080px) {
  /* Vedle sebe by scéna i seznam zbyly příliš úzké — pod sebe, fotka na střed. */
  .rhouse__stage { grid-template-columns: minmax(0, 1fr); }
  .rhouse__scene { max-width: 420px; margin-inline: auto; }
  .rhouse__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rhouse__cards { grid-template-columns: minmax(0, 1fr); }
  .rhouse__stage.is-ready .rhouse__switch { grid-auto-flow: row; border-radius: var(--r); justify-self: stretch; }
  .rhouse__btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* Zůstává jen výběr a reflektor — žádné pulzování, přibližování ani průvodce. */
  .rhouse__ring { animation: none; opacity: .5; }
  .rhouse__stage.is-scanning .rhouse__scan { animation: none; }
  .rhouse__hot.is-touring .rhouse__prog { animation: none; opacity: 0; }
  .rhouse__scene.is-zoomed { --s: 1; }
  .rhouse__shot { scale: 1; transition: opacity .01s, visibility .01s; }
  .rhouse__zoom { transition: none; }
  .rhouse__hot { transition: none; }
  .rhouse__shot.is-on .rhouse__hot { transition-delay: 0s; }
  .rhouse__pill,
  .rhouse__dot,
  .rhouse__itembtn,
  .rhouse__list { transition: none; }
}

/* =========================================================
   GEODETICKÁ SCÉNA  (.gsurv — blok elpe/geo-survey)

   Scéna je kus ilustrace vesnice z homepage: dům i totální stanice jsou
   doslova vyříznuté z `vesnice-komplet.svg` (viz assets/gsurv-scene.svg)
   a všechno dokreslené drží stejný jazyk jako hoverové overlaye vesnice —
   červené tahy, červené uzly, popisky v červené pilulce. Ilustrace je světlá
   kresba, takže celá sekce je světlá; na tmavém podkladu by scéna svítila
   jako lightbox uprostřed tmy (stejný důvod jako u .sflow).

   Tři režimy (katastr / vytyčení stavby / digitalizace) přepínají, co se nad
   pozemkem kreslí. Stav drží jediný atribut `data-mode` na .gsurv__scene —
   CSS z něj odvodí zbytek, JS jen přepíná hodnotu a záložky. Animace se
   rozjedou tím, že selektor začne sedět, takže se každé přepnutí přehraje
   znovu.

   Bez JS jsou záložky skryté (.is-ready je odemyká), popisy leží pod sebou
   a scéna zůstane v prvním režimu.
   ========================================================= */
.gsurv {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(44, 90, 166, .07), transparent 60%),
    radial-gradient(100% 80% at 0% 100%, rgba(229, 35, 41, .05), transparent 62%),
    linear-gradient(180deg, #fff 0%, var(--surface) 100%);

  /* Paleta kresby drží tóny vesnice: značková červená overlayů, modrá
     z panelů a oken, jantar ze světel aut. */
  --gs-red: #e3000f;
  --gs-blue: #2658b0;
  --gs-amber: #efa70e;
}
.gsurv .elpe-deco { z-index: -1; }
/* Širší kontejner — stejná hodnota jako `.refwhy--wide` a `.offer--media`,
   ať sekce na detailu služby nevyskočí z řady. */
.gsurv > .wrap { max-width: min(1840px, 94vw); }
.gsurv__head { max-width: 62ch; display: grid; gap: clamp(12px, 1.4vw, 18px); }
.gsurv__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: .98;
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}
.gsurv__intro {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 58ch;
}

/* ── Přepínač režimů ── */
.gsurv__tabs { display: none; }
.gsurv.is-ready .gsurv__tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: clamp(30px, 3.6vw, 48px) 0 0;
  /* V širokém kontejneru by se tři záložky roztáhly přes 1800 px a vypadaly
     by jako pruhy — drží se proto v šířce hlavičky. */
  max-width: 1180px;
}
.gsurv__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.7vw, 22px);
  border: 1px solid var(--g1);
  border-radius: var(--r);
  background: #fff;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, translate .25s ease, box-shadow .25s ease;
}
.gsurv__tabico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--navy);
  transition: background .25s ease, color .25s ease;
}
.gsurv__tabico svg { display: block; width: 26px; height: 26px; }
.gsurv__tabname {
  font-weight: 700;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.25;
}
.gsurv__tab:hover { border-color: var(--g2); translate: 0 -2px; box-shadow: 0 10px 26px rgba(11, 13, 20, .07); }
.gsurv__tab:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.gsurv__tab.is-active {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
.gsurv__tab.is-active .gsurv__tabico { background: rgba(229, 35, 41, .1); color: var(--red); }

/* ── Scéna + popisy ── */
.gsurv__stage {
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  /* Sloupce se dělí poměrem, ne pevná kresba + zbytek — jinak si 860 px vezme
     skoro celou šířku a na text zbyde úzký proužek se slovem na řádek. Kresba
     se tedy zmenšuje s viewportem, strop 860 px drží `.gsurv__scene`. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 3.2vw, 56px);
  align-items: center;
}
/* Scéna stojí volně na podkladu sekce — žádný rám ani karta, kresba má
   dýchat (rám ji uzavíral do obdélníku a ubíral jí prostor). Po levé a pravé
   hraně mizí do ztracena, aby nebyl vidět okraj terénu ani vržený stín —
   kresba splývá s podkladem sekce. */
.gsurv__scene {
  position: relative;
  max-width: 860px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.gsurv__svg { display: block; width: 100%; height: auto; }

/* ── Podklad scény ── */
.gsurv__terrain { fill: url(#gs-terrain); }
.gsurv__shadow  { fill: url(#gs-shadow); }

/* Vrstvy režimů. Každý režim má dvě — jednu pod ilustrací (kresba na zemi),
   druhou nad ní (popisky, mračno bodů). */
.gsurv__layer { opacity: 0; visibility: hidden; transition: opacity .35s ease; }
[data-mode="katastr"] .gsurv__layer--katastr,
[data-mode="stavba"]  .gsurv__layer--stavba,
[data-mode="digital"] .gsurv__layer--digital { opacity: 1; visibility: visible; }

/* Záměrný paprsek stanice — jediný prvek společný všem režimům; v každém
   režimu se rozhlíží jinam (po rozích parcely / po kolících / po domě). */
.gsurv__beam { transform-origin: 0 0; }
.gsurv__beam path {
  fill: none;
  stroke: var(--gs-red);
  stroke-width: 3.4;
  stroke-dasharray: 26 18;
  opacity: .5;
}
[data-mode="katastr"] .gsurv__beam { animation: gsurv-look-katastr 7s ease-in-out infinite alternate; }
[data-mode="stavba"]  .gsurv__beam { animation: gsurv-look-stavba 6s ease-in-out infinite alternate; }
[data-mode="digital"] .gsurv__beam { animation: gsurv-look-digital 5s ease-in-out infinite alternate; }
@keyframes gsurv-look-katastr { from { rotate: -20deg; } to { rotate: 23deg; } }
@keyframes gsurv-look-stavba  { from { rotate: -44deg; } to { rotate: -6deg; } }
@keyframes gsurv-look-digital { from { rotate: 27deg; } to { rotate: 41deg; } }

/* ── Režim 1: katastr — hranice, lomové body, dělení ── */
.gsurv__parcel {
  fill: var(--gs-red);
  fill-opacity: .06;
  stroke: var(--gs-red);
  stroke-width: 4.4;
  stroke-linejoin: round;
  stroke-dasharray: 3500;
}
[data-mode="katastr"] .gsurv__parcel { animation: gsurv-draw 1.5s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes gsurv-draw {
  from { stroke-dashoffset: 3500; }
  to   { stroke-dashoffset: 0; }
}
.gsurv__split {
  fill: none;
  stroke: var(--gs-red);
  stroke-width: 4;
  stroke-dasharray: 20 15;
  stroke-opacity: .85;
}
[data-mode="katastr"] .gsurv__split { animation: gsurv-in .5s ease-out .95s both, gsurv-flow 1.4s linear 1.4s infinite; }
/* Sdílený náběh — cílová průhlednost prvku se řeší přes stroke-opacity,
   aby ji `both` na konci animace nepřebilo. */
@keyframes gsurv-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes gsurv-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -35; }
}
/* Lomový bod: značka ležící na zemi (proto elipsa, ne kruh) s křížkem. */
.gsurv__vtx ellipse { fill: var(--gs-red); }
.gsurv__vtx path    { stroke: var(--gs-red); stroke-width: 3.4; fill: none; }
.gsurv__vtx circle  { fill: #fff; }
[data-mode="katastr"] .gsurv__vtx {
  transform-box: fill-box;
  transform-origin: center;
  animation: gsurv-pop .5s cubic-bezier(.2, 1.3, .4, 1) both;
  animation-delay: calc(.55s + var(--i, 0) * .14s);
}
@keyframes gsurv-pop {
  from { opacity: 0; scale: .4; }
  to   { opacity: 1; scale: 1; }
}

/* Popisek = stejná červená pilulka, jakou má hotspot ve vesnici. */
.gsurv__chip rect { fill: var(--gs-red); }
.gsurv__chip text {
  fill: #fff;
  font-family: var(--font-body);
  /* Pilulka má na obrazovce vyjít stejně velká jako popisek hotspotu ve
     vesnici (16 px) — kresba je 1900 jednotek široká a vykresluje se na
     860 px, tedy v poměru ≈ 0,45. */
  font-size: 36px;
  font-weight: 700;
  letter-spacing: .02em;
}
.gsurv__chip--wa rect { fill: var(--gs-blue); }
.gsurv__chip--ga rect { fill: var(--gs-amber); }
.gsurv__chip--ga text { fill: #1f2a37; }
.gsurv__chip--el text,
.gsurv__chip--wa text,
.gsurv__chip--ga text { font-size: 32px; letter-spacing: .06em; }
[data-mode="katastr"] .gsurv__layer--katastr .gsurv__chip,
[data-mode="stavba"]  .gsurv__layer--stavba  .gsurv__chip,
[data-mode="digital"] .gsurv__layer--digital .gsurv__chip {
  animation: gsurv-rise .5s cubic-bezier(.2, 1.1, .4, 1) both;
  /* Dřív 1,6 s — po kliknutí na záložku to vypadalo, jako by pilulky
     vůbec nebyly. Naskočí hned po obkreslení hranice. */
  animation-delay: calc(.7s + var(--i, 0) * .14s);
}
@keyframes gsurv-rise {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ── Režim 2: vytyčení stavby — půdorys, kolíky, kóty ── */
.gsurv__build {
  fill: var(--gs-red);
  fill-opacity: .08;
  stroke: var(--gs-red);
  stroke-width: 4;
  stroke-dasharray: 22 14;
  stroke-linejoin: round;
}
[data-mode="stavba"] .gsurv__build { animation: gsurv-in .7s ease-out both, gsurv-flow 1.6s linear .7s infinite; }
.gsurv__stake ellipse { fill: var(--gs-red); }
.gsurv__stake path    { stroke: var(--gs-red); stroke-width: 5; fill: none; }
.gsurv__stake .gsurv__flag { fill: var(--gs-red); stroke: none; }
[data-mode="stavba"] .gsurv__stake {
  animation: gsurv-drop .5s cubic-bezier(.2, 1.25, .4, 1) both;
  animation-delay: calc(.5s + var(--i, 0) * .17s);
}
@keyframes gsurv-drop {
  from { opacity: 0; translate: 0 -26px; }
  to   { opacity: 1; translate: 0 0; }
}
.gsurv__dim path { stroke: var(--gs-red); stroke-width: 3; fill: none; opacity: .75; }
[data-mode="stavba"] .gsurv__dim {
  animation: gsurv-in .5s ease-out both;
  animation-delay: calc(.95s + var(--i, 0) * .14s);
}

/* ── Režim 3: digitalizace — mračno bodů, skenovací rovina, sítě ── */
.gsurv__tint { fill: var(--gs-blue); fill-opacity: .06; }
.gsurv__pt   { fill: var(--gs-blue); opacity: .68; }
[data-mode="digital"] .gsurv__pt {
  /* Zpoždění podle polohy v šířce domu → body naskakují za skenovací
     rovinou, jak přejíždí zleva doprava. */
  animation: gsurv-cloud 1.1s ease-out both;
  animation-delay: calc(.35s + var(--k, 0) * 2.1s);
}
@keyframes gsurv-cloud {
  from { opacity: 0; scale: .3; }
  60%  { opacity: 1; }
  to   { opacity: .68; scale: 1; }
}
.gsurv__scan { fill: url(#gs-scan); }
[data-mode="digital"] .gsurv__scan { animation: gsurv-scan 3.4s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes gsurv-scan {
  0%   { translate: 0 0; opacity: 0; }
  8%   { opacity: 1; }
  62%  { translate: 860px 0; opacity: 1; }
  70%  { translate: 860px 0; opacity: 0; }
  100% { translate: 0 0; opacity: 0; }
}
.gsurv__util {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 34 20;
  stroke-opacity: .85;
}
.gsurv__util--el { stroke: var(--gs-red); }
.gsurv__util--wa { stroke: var(--gs-blue); }
.gsurv__util--ga { stroke: var(--gs-amber); }
[data-mode="digital"] .gsurv__util {
  animation: gsurv-in .6s ease-out both, gsurv-flow 1.8s linear infinite;
  animation-delay: calc(.6s + var(--i, 0) * .2s), calc(.6s + var(--i, 0) * .2s);
}

/* ── Popisy vedle scény ── */
.gsurv__panels { display: grid; }
.gsurv__panel {
  grid-area: 1 / 1;
  max-width: 620px;
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  align-content: start;
}
.gsurv.is-ready .gsurv__panel { visibility: hidden; opacity: 0; pointer-events: none; }
.gsurv.is-ready .gsurv__panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
/* Bez JS jsou panely obyčejný seznam pod sebou. */
.gsurv:not(.is-ready) .gsurv__panels { grid-auto-flow: row; gap: clamp(32px, 4vw, 56px); }
.gsurv:not(.is-ready) .gsurv__panel { grid-area: auto; }
.gsurv__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.06;
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}
.gsurv__text { margin: 0; color: var(--muted); line-height: 1.65; }
.gsurv__bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gsurv__bullets li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink);
  line-height: 1.55;
}
.gsurv__bullets i { color: var(--red); font-size: 20px; line-height: 1.3; }
.gsurv__cta { justify-self: start; margin-top: clamp(4px, .8vw, 10px); }

/* Pod 1000 px už dvousloupec text tiskne moc na úzko → scéna nahoru přes celou
   šířku (vycentrovaná, strop 860), popis pod ní. */
@media (max-width: 1000px) {
  .gsurv__stage { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); justify-items: center; }
  .gsurv__scene { width: 100%; margin-inline: auto; }
  .gsurv__panel { max-width: 720px; width: 100%; }
}
@media (max-width: 620px) {
  .gsurv__cta { justify-self: stretch; text-align: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  /* Scéna se ukáže rovnou hotová — pohyb je tu ozdoba, ne informace. */
  .gsurv__beam,
  .gsurv__scan { animation: none; }
  .gsurv__scan { opacity: 0; }
  .gsurv__parcel { stroke-dasharray: none; animation: none; }
  .gsurv__build,
  .gsurv__split,
  .gsurv__util,
  .gsurv__vtx,
  .gsurv__stake,
  .gsurv__dim,
  .gsurv__chip,
  .gsurv__pt { animation: none; opacity: 1; }
  .gsurv__pt { opacity: .68; }
}

/* =========================================================
   KARIÉRA — VOLNÉ POZICE (.jobs)
   Rozbalovací karty pozic. Sbalování = grid-template-rows 0fr↔1fr
   (stejný mechanismus jako FAQ — animuje se plynule bez měření výšek).
   ========================================================= */
.jobs__head { margin-bottom: clamp(36px, 4vw, 56px); }
.jobs__head .eyebrow { display: block; margin-bottom: 10px; }
.jobs__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .95;
  letter-spacing: -.005em;
  color: var(--navy);
}
.jobs__empty {
  max-width: 640px;
  font-size: 18px;
  color: var(--muted);
}
.jobs__list { display: flex; flex-direction: column; gap: 14px; }

.job {
  position: relative;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: background .28s ease, border-color .28s ease, box-shadow .35s ease, transform .35s ease;
}
/* Vlásková linka nahoře, která se při hoveru „rozsvítí“ zleva doprava —
   stejný elektrický motiv jako oblouk u stat bandu, jen zkrocený do řádku. */
.job::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--red), rgba(229,35,41,0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  z-index: 2;
}
.job:hover, .job:focus-within {
  background: #fff;
  border-color: var(--g1);
  box-shadow: var(--shadow);
}
.job:hover::before, .job:focus-within::before, .job.is-open::before { transform: scaleX(1); }
.job.is-open { background: #fff; border-color: var(--g1); box-shadow: var(--shadow); }
.job--closed { opacity: .62; }

.job__h3 { margin: 0; }
.job__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: clamp(14px, 2vw, 32px);
  width: 100%;
  padding: clamp(18px, 1.8vw, 26px) clamp(20px, 2vw, 32px);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.job__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--g1);
  color: var(--navy);
  backdrop-filter: blur(6px);
}
.job__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--g3);
  flex: none;
}
.job__pill--open .job__dot { background: #22A45D; box-shadow: 0 0 0 0 rgba(34,164,93,.5); animation: job-pulse 2.4s ease-out infinite; }
.job__pill--soon .job__dot { background: #E8A317; }
.job__pill--closed .job__dot { background: var(--g3); }
@keyframes job-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,164,93,.45); }
  70%  { box-shadow: 0 0 0 7px rgba(34,164,93,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,164,93,0); }
}
.job__title {
  font-weight: 700;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.25;
  color: var(--navy);
}
.job__pay {
  font-weight: 800;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--navy);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.job__loc { font-size: 14px; color: var(--muted); white-space: nowrap; }
.job__chev {
  display: inline-flex;
  color: var(--navy);
  transition: transform .3s cubic-bezier(.4,0,.2,1), color .2s ease;
}
.job__chev svg { display: block; }
.job:hover .job__chev { color: var(--red); }
.job.is-open .job__chev { transform: rotate(180deg); color: var(--red); }

.job__panel { display: grid; grid-template-rows: 1fr; }
.job.is-collapsed .job__panel { grid-template-rows: 0fr; }
.job.is-ready .job__panel { transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1); }
.job__inner { min-height: 0; overflow: hidden; }
.job__inner > * { margin: 0; }
/* Vnitřní padding nese wrapper obsahu, ne .job__inner — jinak by při
   grid-template-rows:0fr zůstal padding vidět jako prázdný pruh. */
.job__perex,
.job__block,
.job__foot { padding-left: clamp(20px, 2vw, 32px); padding-right: clamp(20px, 2vw, 32px); }
.job__perex {
  max-width: 78ch;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.66;
  padding-bottom: 6px;
}
.job__block { padding-top: clamp(18px, 1.8vw, 26px); }
.job__h4 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1;
  color: var(--navy);
  font-weight: 400;
}
.job__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 28px;
}
.job__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.job__tick {
  display: inline-flex;
  margin-top: 4px;
  color: var(--red);
}
.job__tick svg { display: block; }
.job__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-top: clamp(24px, 2.6vw, 36px);
  padding-bottom: clamp(24px, 2.4vw, 34px);
}
.job__foot .contact__person--inline {
  border: 1px solid var(--g1);
  box-shadow: none;
  background: var(--surface);
}

@media (max-width: 1080px) {
  .job__btn { grid-template-columns: minmax(0, 1fr) auto; row-gap: 10px; }
  .job__pill { grid-column: 1 / -1; justify-self: start; }
  .job__title { grid-column: 1; }
  .job__chev { grid-column: 2; grid-row: 2; }
  .job__pay, .job__loc { grid-column: 1 / -1; }
  .job__pay { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .job, .job::before, .job__chev, .job.is-ready .job__panel { transition: none; }
  .job__pill--open .job__dot { animation: none; }
}

/* =========================================================
   KARIÉRA — BENEFITY (.perks)
   Mřížka karet se „spotlightem“: kurzor rozsvěcí kartu pod sebou
   (JS dopisuje --mx/--my, gradient kreslí CSS → nulová práce v JS na frame).
   ========================================================= */
.perks { background: var(--surface); }
.perks__head { margin-bottom: clamp(36px, 4vw, 56px); }
.perks__head .eyebrow { display: block; margin-bottom: 10px; }
.perks__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .95;
  color: var(--navy);
}
.perks__grid {
  display: grid;
  grid-template-columns: repeat(var(--perks-cols, 4), minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 18px);
}
.perk {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 2.2vw, 32px);
  border-radius: var(--r-xl);
  background: #fff;
  /* Bez rámečku — kartu drží jen stín. Dvě vrstvy: úzká kontaktní + široký
     měkký rozptyl s malým offsetem, aby byl vidět rovnoměrně kolem karty. */
  box-shadow:
    0 3px 8px rgba(25, 30, 48, .04),
    0 20px 50px rgba(25, 30, 48, .10);
  transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s ease;
}
/* Horní řádek: nadpis vlevo, ikona v kroužku vpravo. */
.perk__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(14px, 1.4vw, 18px);
}
.perk__glow {
  position: absolute;
  inset: -1px;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(229,35,41,.14), transparent 62%);
  transition: opacity .35s ease;
}
.perk:hover {
  transform: translateY(-4px);
  box-shadow:
    0 6px 16px rgba(25, 30, 48, .06),
    0 30px 64px rgba(25, 30, 48, .14);
}
.perk:hover .perk__glow { opacity: 1; }
/* Ikona v kroužku vpravo nahoře — modrý akcent, ať nesoupeří s nadpisem.
   (Přepnutí na červenou = záměna --blue* za --red / rgba(229,35,41,…).) */
.perk__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(46px, 4vw, 56px);
  height: clamp(46px, 4vw, 56px);
  border-radius: 50%;
  /* Vzor .megalink__ico z mega menu: nejsvětlejší modrý podklad + červená
     ikona. Modrá je u nás klidová (pozadí, podklady), akcent nese červená —
     tvar z ukázky tak zůstává, ale barevně to sedí ke zbytku webu. */
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--red);
  transition: background .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.perk__icon svg { display: block; }
.perk:hover .perk__icon { background: var(--blue-100); transform: scale(1.06); }
.perk__title {
  font-size: clamp(16px, 1.25vw, 18.5px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
  min-width: 0;
}
.perk__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

@media (max-width: 1180px) { .perks__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .perks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .perks__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .perk, .perk__icon, .perk__glow { transition: none; }
  .perk:hover { transform: none; }
  .perk:hover .perk__icon { transform: none; }
}

/* =========================================================
   KARIÉRA — PŘIHLÁŠKA (.apply)
   Vlevo kroky výběrového řízení se svislou linkou, která se dokresluje
   podle scrollu (GSAP scrub), vpravo lepivá karta formuláře.
   ========================================================= */
.apply__head { margin-bottom: clamp(40px, 4.5vw, 64px); max-width: 780px; }
.apply__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .95;
  color: var(--navy);
}
.apply__sub { margin: 14px 0 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.apply__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

.apply__steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 3vw, 42px);
}
/* Kolejnice = šedá stopa přes celou výšku; --p (0–1) plní červenou část.
   Vede středem uzlů (.apply__dot má 46 px → střed 23 px). */
.apply__rail {
  position: absolute;
  left: 22px;
  top: 23px;
  bottom: 23px;
  width: 2px;
  background: var(--g1);
  border-radius: 2px;
  overflow: hidden;
}
.apply__rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--red), var(--red-800));
  transform: scaleY(var(--p, 0));
  transform-origin: top center;
}
.apply__step {
  position: relative;
  display: grid;
  grid-template-columns: 46px auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 1.8vw, 26px);
  padding: 0;
}
/* Uzel — převzato z timeline .mtime na detailech služeb: bílý kroužek se
   stínem a tečkou uvnitř, která při aktivaci zčervená a dostane halo. */
.apply__dot {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(25, 30, 48, .14);
}
.apply__dot::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--g3);
  transition: background .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.apply__step.is-on .apply__dot::after {
  background: var(--red);
  transform: scale(1.15);
  box-shadow: 0 0 0 6px rgba(229, 35, 41, .14);
}
/* Velké číslo kroku vedle uzlu — nahradilo pilulku 01–04. */
.apply__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 3.4vw, 56px);
  line-height: .9;
  color: var(--g2);
  transition: color .45s ease;
  user-select: none;
}
.apply__step.is-on .apply__num { color: var(--red); }
.apply__body { position: relative; z-index: 1; min-width: 0; }
.apply__steptext {
  margin: 0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.45;
  color: var(--navy);
  font-weight: 700;
  text-wrap: balance;
}

.apply__formwrap { position: sticky; top: 112px; }
.apply__form {
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--g1);
  padding: clamp(26px, 2.4vw, 36px);
  box-shadow: var(--shadow);
}
.apply__formh {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1;
  font-weight: 400;
  color: var(--navy);
}
.apply__note { margin: 16px 4px 0; font-size: 13px; color: var(--g5); }

/* Select ve stylu ostatních polí (nativní šipku schováme, kreslíme Tabler). */
.field__sel { position: relative; }
.field__sel select {
  width: 100%;
  appearance: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 14px 46px 14px 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field__sel select:hover { background: var(--g1); }
.field__sel select:focus {
  outline: none;
  background: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229,35,41,.1);
}
.field__sel .ti {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--g5);
  font-size: 18px;
}

/* Nahrání životopisu — celý blok je <label>, takže klik i drop fungují
   bez JS; JS jen dopisuje název souboru a stav přetažení. */
.drop {
  position: relative;   /* kotva pro skrytý input — bez ní přetékal vpravo z okna */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1.5px dashed var(--g2);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.drop:hover, .drop.is-over { border-color: var(--red); background: rgba(229,35,41,.04); }
.drop__input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; }
.drop__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #fff;
  color: var(--red);
  flex: none;
}
.drop__ic svg { display: block; }
.drop__txt { display: block; min-width: 0; }
.drop__name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop__txt small { display: block; font-size: 12.5px; color: var(--g5); margin-top: 2px; }
.drop.has-file { border-style: solid; border-color: #22A45D; background: rgba(34,164,93,.05); }

/* Průběh nahrávání příloh (kariéra, reklamace) — pod tlačítkem Odeslat. */
.uprog { display: none; margin-top: 14px; max-width: 420px; }
.uprog.is-on { display: block; }
.uprog__bar { height: 8px; border-radius: 999px; background: var(--g1); overflow: hidden; }
.uprog__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--red); transition: width .25s ease; }
.uprog.is-indeterminate .uprog__fill { width: 40% !important; animation: uprog-slide 1.1s ease-in-out infinite; }
@keyframes uprog-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
.uprog__text { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .uprog.is-indeterminate .uprog__fill { animation: none; width: 100% !important; opacity: .5; } }
.drop.has-file .drop__ic { color: #22A45D; }
/* Seznam vybraných příloh — je SOUROZENEC .drop (ne uvnitř), protože .drop je
   <label for>; klik na „odebrat" uvnitř labelu by jinak otevřel dialog souborů. */
.drop__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.drop__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 14px;
  border-radius: 12px;
  background: var(--surface);
}
.drop__itemname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
}
.drop__itemsize { font-size: 12.5px; color: var(--g5); font-variant-numeric: tabular-nums; }
.drop__remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--g5);
  font-size: 15px;
  transition: background .2s ease, color .2s ease;
}
.drop__remove:hover { background: rgba(229, 35, 41, .1); color: var(--red); }
.drop__remove:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.apply__form .form__consent { margin-top: 18px; }

@media (max-width: 1024px) {
  .apply__grid { grid-template-columns: 1fr; }
  .apply__formwrap { position: static; }
}
@media (max-width: 560px) {
  .apply__step { grid-template-columns: 38px auto minmax(0, 1fr); gap: 12px; }
  .apply__dot { width: 38px; height: 38px; }
  .apply__dot::after { width: 11px; height: 11px; }
  .apply__num { font-size: 34px; }
  .apply__rail { left: 18px; top: 19px; bottom: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .apply__dot::after, .apply__num { transition: none; }
  .apply__rail-fill { transform: scaleY(1); }
}

/* =========================================================
   REKLAMACE (.complaint — blok elpe/complaint-form)
   „Jak postupovat" (nadpis + odrážky + text) nad vycentrovaným
   formulářem. Formulář sdílí vzhled s Kariérou (.apply__form).
   ========================================================= */
.complaint__intro {
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}
.complaint__h2 {
  margin: 0 0 clamp(18px, 2vw, 26px);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1;
  font-weight: 400;
  color: var(--navy);
}
.complaint__list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.complaint__item {
  position: relative;
  padding-left: 34px;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--navy);
}
/* Odrážka = červený kroužek s tečkou, stejný jazyk jako uzly kroků. */
.complaint__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(229, 35, 41, .14);
}
.complaint__p {
  margin: 0 0 14px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--g5);
}
.complaint__p:last-child { margin-bottom: 0; }

.complaint__formwrap {
  max-width: 640px;
  margin: 0 auto;
}
.complaint__formwrap .apply__formh { text-align: center; }
.complaint .apply__form { position: static; }

/* Hlavička s předsádkou (eyebrow) u sdílených komponent — Kariéra ji
   používá u trust-baru „Co vás v ELPE čeká" i u sekce foto+text. */
.refwhy__eyebrow,
.fsplit__eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--red);
}
.fsplit__eyebrow { margin-bottom: 12px; }

/* =========================================================
   PRO ŠKOLY — přepínač programů (.edu)
   Vzdušná hlavička na střed, pilulky jako na blogu (.ref-chip)
   a jeden velký panel text ↔ fotka + mřížka fotek programu.
   V pozadí značkový blesk + jemná modrá záře.
   ========================================================= */
.edu {
  --edu-r: clamp(20px, 2.2vw, 32px);
  position: relative;
  /* `clip` klipuje dekoraci stejně jako `hidden`, ale NEvytváří scroll-kontejner,
     takže uvnitř funguje `position: sticky` u přepínače (na rozdíl od `hidden`). */
  overflow: clip;
  /* Modrý nádech uprostřed, oba konce bílé → navazuje na hero i galerii bez švu. */
  background: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 38%, var(--white) 100%);
}
/* Dekorace: blesk z loga + měkká modrá záře. Čistě pozadí, nic neklikatelného. */
.edu__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.edu__deco::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22%;
  width: min(1100px, 96vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(44, 90, 166, .13) 0%, rgba(44, 90, 166, 0) 62%);
}
.edu__bolt {
  position: absolute;
  right: -6%;
  top: 6%;
  height: 88%;
  opacity: .5;
}
.edu__bolt svg { height: 100%; width: auto; display: block; }
.edu__bolt svg path { fill: var(--blue-100); }
.edu__inner { position: relative; z-index: 1; }

/* ── Hlavička ── */
.edu__head { max-width: 860px; margin: 0 auto; text-align: center; }
.edu__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
.edu__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(229, 35, 41, .14);
}
.edu__h2 {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: 1.02;
  color: var(--navy);
  transform: scaleX(.86);
  transform-origin: center;
}
.edu__intro {
  margin: 18px auto 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
}

/* ── Přepínač = pilulky z blogu, jen na skle ── */
.edu__switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(36px, 4vw, 60px);
  /* Sticky lišta — přepínač zůstane po ruce i při čtení delšího programu.
     top ≈ výška zmenšené fixní hlavičky (.nav.scrolled). */
  position: sticky;
  top: 80px;
  z-index: 20;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(25, 30, 48, .10), inset 0 0 0 1px rgba(25, 30, 48, .05);
}
.edu__tab {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
@media (max-width: 640px) {
  /* Na mobilu je hlavička nižší → posadit lištu výš a nechat ji na plnou šířku. */
  .edu__switch { top: 66px; padding: 8px 10px; border-radius: 22px; }
}
.edu__tab:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* ── Panely ── */
.edu__panels { margin-top: clamp(44px, 5vw, 76px); display: grid; gap: clamp(56px, 7vw, 96px); }
/* Se zapnutým přepínačem drží výšku JEN aktivní panel (zůstává v toku),
   neaktivní leží absolutně nad ním — jinak by sekce byla vždy vysoká jako
   nejdelší program a pod kratším by zela mezera. */
.edu.is-ready .edu__panels { display: block; position: relative; }
/* Neaktivní panel je mimo tok i mimo přístupnost — ale zůstává v HTML,
   takže obsah všech tří programů vidí i vyhledávač na jedné URL. */
.edu.is-ready .edu__panel:not(.is-active) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.edu__split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.edu__copy { display: grid; align-content: center; }
.edu__kicker {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--blue);
}
.edu__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.06;
  color: var(--navy);
}
.edu__text {
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 52ch;
}
.edu__bullets {
  list-style: none;
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.edu__bullets li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.edu__check {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--white);
  color: var(--red);
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(25, 30, 48, .08), inset 0 0 0 1px rgba(229, 35, 41, .18);
}
.edu__cta { margin-top: clamp(26px, 3vw, 40px); justify-self: start; }

/* ── Callout „Pro koho je program určen?" ── */
.edu__audience {
  margin-top: clamp(40px, 4.5vw, 64px);
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  border-radius: var(--edu-r, 20px);
  background: var(--white);
  box-shadow: 0 2px 8px rgba(25, 30, 48, .06), inset 0 0 0 1px rgba(25, 30, 48, .06);
  border-left: 4px solid var(--red);
}
.edu__audience-label {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--navy);
}
.edu__audience-text {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}

/* ── Mřížka karet programu (wireframové dlaždice titulek + popis) ── */
.edu__cards-heading {
  margin: clamp(44px, 5vw, 72px) 0 clamp(20px, 2.2vw, 30px);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  color: var(--navy);
}
.edu__cards {
  list-style: none;
  margin: clamp(40px, 4.5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 860px) {
  .edu__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .edu__cards { grid-template-columns: 1fr; }
}
.edu__cards-heading + .edu__cards { margin-top: 0; }
.edu__card {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--edu-r, 20px);
  background: var(--white);
  box-shadow: 0 20px 48px rgba(25, 30, 48, .08), inset 0 0 0 1px rgba(25, 30, 48, .05);
}
/* Karta s fotkou — foto zarovnané k hornímu okraji, text pod ním. */
.edu__card--media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.edu__card-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface, #f1f3f7);
}
.edu__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.edu__card--media .edu__card-body {
  padding: clamp(20px, 2.2vw, 28px);
}
.edu__card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.edu__card-text {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Citační banner programu ── */
.edu__quote {
  position: relative;
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: clamp(26px, 3.2vw, 44px) clamp(26px, 3.4vw, 52px);
  border-radius: var(--edu-r, 20px);
  background: linear-gradient(135deg, var(--navy), #232a44);
  color: var(--white);
  overflow: hidden;
}
.edu__quote-mark {
  display: inline-grid;
  place-items: center;
  color: var(--red);
  opacity: .9;
  margin-bottom: 8px;
}
.edu__quote-mark svg { display: block; }
.edu__quote p {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.45;
  font-weight: 600;
  max-width: 46ch;
}

/* ── Zeď škol v panelu — bílé dlaždice ve stejném jazyce jako sekce
   „Spolupracující školy" (.reflogos--v2), ale staticky uvnitř panelu
   a s zalomením textu (názvy ZŠ jsou dlouhé). ── */
.edu__schools { margin-top: clamp(34px, 4vw, 56px); }
.edu__schools-heading {
  margin: 0 0 clamp(18px, 2vw, 28px);
  text-align: center;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--navy);
}
.edu__schools-heading:has(+ .edu__schools-lead) { margin-bottom: 10px; }
.edu__schools-lead {
  margin: 0 auto clamp(22px, 2.4vw, 34px);
  max-width: 60ch;
  text-align: center;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--muted);
}
.edu__schools-lead a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.edu__schools-wall {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.edu__schools .support__item { flex: 0 1 auto; }
/* Dlaždice = bílý box (radius 12) se zvednutím na hover — jako reflogos--v2. */
.edu__schools .support__sdh-item {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: clamp(190px, 21vw, 260px);
  max-width: 340px;
  min-height: clamp(76px, 8vw, 96px);
  padding: 16px 24px;
  background: var(--white);
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.35;
  color: var(--navy);
  box-shadow: 0 10px 30px rgba(25, 30, 48, .08), 0 1px 3px rgba(25, 30, 48, .05);
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}
.edu__schools a.support__sdh-item:hover,
.edu__schools a.support__sdh-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(25, 30, 48, .14), 0 2px 6px rgba(25, 30, 48, .06);
  color: var(--red);
}
@media (prefers-reduced-motion: reduce) {
  .edu__schools .support__sdh-item { transition: none; }
  .edu__schools a.support__sdh-item:hover { transform: none; }
}

/* ── Varianta s logy — barevné znaky škol (bez duotónu) nad názvem.
   Dlaždice zůstává bílá jako u textové zdi, jen obsah je logo + popisek. ── */
.edu__schools-wall--logos { gap: clamp(16px, 2vw, 24px); }
.edu__schools .support__sdh-item--logo {
  flex-direction: column;
  gap: 14px;
  min-width: clamp(180px, 20vw, 230px);
  min-height: clamp(150px, 15vw, 180px);
  padding: 22px 22px 18px;
}
.edu__schools-logo {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* Znaky mají různou výšku (i drobné 78–102 px), sjednotí je společný strop. */
  max-height: 86px;
  object-fit: contain;
  /* Plná barva — školní znaky (slunce, duha, kočka) nesmí do modrého duotónu. */
  filter: none;
}
.edu__schools-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.3;
  color: var(--navy);
  transition: color .35s ease;
}
.edu__schools a.support__sdh-item--logo:hover .edu__schools-name,
.edu__schools a.support__sdh-item--logo:focus-visible .edu__schools-name {
  color: var(--red);
}

/* ── Hlavní fotka panelu ── */
.edu__media {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--edu-r);
  overflow: hidden;
  background: var(--g1);
  box-shadow: 0 32px 80px rgba(25, 30, 48, .16), 0 2px 6px rgba(25, 30, 48, .06);
}
.edu__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Štítek lokality — sklo na fotce (stejný jazyk jako pilulky stavu prodejen). */
.edu__badge {
  position: absolute;
  left: clamp(14px, 1.6vw, 22px);
  bottom: clamp(14px, 1.6vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(25, 30, 48, .16);
}
.edu__badgeico { display: grid; place-items: center; color: var(--red); }
.edu__badgeico svg { display: block; }

/* ── Mřížka fotek programu = tmavá fotogalerie PŘES CELOU ŠÍŘKU STRÁNKY
   (stejný vzhled jako navy fotogalerie na ostatních podstránkách).
   Prorazí kontejner (.wrap) na 100vw; obsah se vrací do šířky 1560px.
   Sdílí .pgal s blokem Fotogalerie. ── */
.edu__gallery {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: clamp(48px, 6vw, 84px);
  padding: clamp(48px, 6vw, 88px) 0;
  overflow: clip;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(44, 90, 166, .20), transparent 58%),
    radial-gradient(100% 80% at 0% 100%, rgba(229, 35, 41, .10), transparent 60%),
    linear-gradient(155deg, #20263f 0%, var(--navy) 52%, #14182a 100%);
}
/* Signaturní „spark" linka na horní hraně (červená → modrá = ELPE). */
.edu__gallery::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(229, 35, 41, .55) 22%, rgba(44, 90, 166, .5) 78%, transparent);
  pointer-events: none;
  z-index: 2;
}
/* Jemná elektro-textura v pozadí — bílá a málo viditelná, jako navy fotogalerie
   na Obchodech (.team-intro.elpe-secbg--navy .elpe-deco__sym). */
.edu__gallery .elpe-deco__sym { color: #fff; opacity: .05; }
/* Fotky zpět do šířky obsahu (jako navy galerie na ostatních podstránkách). */
.edu__gallery .pgal {
  position: relative;
  z-index: 1;
  max-width: 1560px;
  margin-inline: auto;
  padding-inline: clamp(20px, 3.5vw, 52px);
}
/* Dlaždice na tmavé: hlubší podklad, jemný ring, dramatičtější stín (jako navy galerie). */
.edu__gallery .pgal__item {
  background: #10131f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 32px 64px -24px rgba(0, 0, 0, .72);
}
.edu__gallery .pgal__item:hover {
  box-shadow: 0 0 0 1px rgba(229, 35, 41, .55), 0 42px 84px -26px rgba(0, 0, 0, .85);
}

@media (max-width: 900px) {
  .edu__split { grid-template-columns: 1fr; }
  .edu__copy { order: 2; }
  .edu__media { order: 1; }
  .edu__bolt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .edu__media img { transform: none !important; }
}

/* =========================================================
   Spolupracující školy — zeď log (varianta .reflogos--edu)
   Sdílí boxy i drift s „Důvěřují nám", jen s hlavičkou vlevo
   a bez modrého přechodu (navazuje na světlou sekci nad ní).
   ========================================================= */
/* Z bílé galerie nad sekcí plynule do surface, na které pokračuje publicita. */
.reflogos--edu { background: linear-gradient(180deg, var(--white) 0%, var(--blue-50) 46%, var(--surface) 100%); }
.reflogos--edu .reflogos__head { text-align: left; }
.reflogos--edu .reflogos__h2 { transform-origin: left center; }
.reflogos--edu .reflogos__lead {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.7;
  color: var(--muted);
}
/* Jedna řada u málo škol — vycentrovat a nechat boxy dýchat. */
.reflogos--edu .support__rows { margin-top: clamp(36px, 4.5vw, 64px); }
.reflogos--edu .support__logo,
.reflogos--edu .support__sdh-item {
  width: clamp(190px, 21vw, 250px);
  min-height: clamp(96px, 10vw, 120px);
  box-shadow: 0 1px 3px rgba(25, 30, 48, .05), 0 10px 26px rgba(25, 30, 48, .06);
}
.reflogos--edu a.support__sdh-item {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
  text-align: center;
  white-space: normal;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), color .25s ease;
}
.reflogos--edu a.support__sdh-item:hover { transform: translateY(-4px); color: var(--red); }
@media (max-width: 860px) {
  .reflogos--edu .reflogos__head { text-align: center; }
  .reflogos--edu .reflogos__h2 { transform-origin: center; }
  .reflogos--edu .reflogos__lead { margin-inline: auto; }
}

/* Šipka dolů u „Mám zájem" míří na formulář pod seznamem — hover ji proto
   posouvá svisle, ne vodorovně jako u běžných „dál" tlačítek (.ar). */
.job__foot .btn .ti-arrow-down.ar { transition: transform .22s ease; }
.job__foot .btn:hover .ti-arrow-down.ar { transform: translateY(4px); }

/* =========================================================
   MAPA „KDE NÁS NAJDETE"  (.gmap — blok elpe/map)

   Živá Google mapa v rámu a nad ní prosklená karta s adresou. Mapa je
   `loading="lazy"`, takže se Google natáhne až při doscrollování — do té
   doby sekce nestojí nic. Rám má vlastní barevný nádech, aby mapa nevypadala
   jako cizí prvek nalepený na web.

   Na mobilu karta mapu NEPŘEKRÝVÁ (zakryla by půlku výřezu), ale sedá pod ni.
   ========================================================= */
.gmap {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(90% 70% at 92% 0%, rgba(44, 90, 166, .06), transparent 62%),
    radial-gradient(80% 70% at 0% 100%, rgba(229, 35, 41, .05), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--surface) 100%);
}
.gmap__head { max-width: 62ch; display: grid; gap: clamp(12px, 1.4vw, 18px); }
.gmap__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: .98;
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}
.gmap__intro {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.65;
  color: var(--muted);
  max-width: 58ch;
}

/* ── Rám s mapou ── */
.gmap__stage { position: relative; margin-top: clamp(28px, 3.6vw, 48px); }
.gmap__stage--photo .gmap__frame { aspect-ratio: 16 / 9; }
.gmap__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--g1);
  background: var(--surface);
  box-shadow: 0 34px 70px -34px rgba(11, 13, 20, .38);
}
.gmap__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Google dlaždice jsou syté a studené — decentní doladění, ať sedí do
     světlé palety webu. Žádný grayscale, mapa musí zůstat čitelná. */
  filter: saturate(.92) contrast(1.02);
}

/* ── Souhlas s načtením mapy (Google Maps pod cookie souhlasem) ── */
.gmap__consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 30%, rgba(229, 35, 41, .06), transparent 40%),
    linear-gradient(180deg, #f6f7fb, #eceef5);
  color: var(--navy);
}
.gmap__consent-ico { color: var(--red); display: grid; }
.gmap__consent-txt { max-width: 40ch; margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted, #5b6078); }
.gmap__consent-link { font-size: 13px; color: var(--muted, #5b6078); text-decoration: underline; text-underline-offset: 3px; }
.gmap__consent-link:hover { color: var(--navy); }
.gmap__frame.is-loaded .gmap__consent { display: none; }
/* Karta na mobilu sedá pod mapu — souhlasový panel nesmí být níž než rám. */
@media (max-width: 720px) { .gmap__consent { padding: 16px; } .gmap__consent-txt { font-size: 14px; } }

/* ── Prosklená karta ── */
.gmap__card {
  position: absolute;
  left: clamp(16px, 2.2vw, 34px);
  bottom: clamp(16px, 2.2vw, 34px);
  width: min(390px, calc(100% - 2 * clamp(16px, 2.2vw, 34px)));
  display: grid;
  gap: 12px;
  padding: clamp(18px, 1.9vw, 26px);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 20px 44px -20px rgba(11, 13, 20, .45);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
}
.gmap__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.gmap__row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0;
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
}
.gmap__row--addr { font-size: 17px; font-weight: 700; color: var(--navy); }
.gmap__ico { color: var(--red); display: grid; place-items: start center; }
.gmap__ico svg { display: block; width: 22px; height: 22px; }
.gmap__row a { color: inherit; text-decoration: none; }
.gmap__row a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.gmap__cta { justify-self: start; margin-top: 4px; }

@media (max-width: 900px) {
  /* Karta pod mapu — přes malý výřez by zakryla, co má ukazovat.
     Varianta s fotkou se musí přebít taky, jinak by jí zůstal široký 16/9
     proužek z desktopu (má vyšší specificitu než holé `.gmap__frame`). */
  .gmap__frame,
  .gmap__stage--photo .gmap__frame { aspect-ratio: 4 / 3; }
  .gmap__card {
    position: static;
    width: auto;
    margin-top: 14px;
    background: #fff;
    border-color: var(--g1);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    box-shadow: 0 14px 34px -22px rgba(11, 13, 20, .4);
  }
}
@media (max-width: 620px) {
  .gmap__frame,
  .gmap__stage--photo .gmap__frame { aspect-ratio: 1 / 1; }
  .gmap__cta { justify-self: stretch; }
}

/* Fotka provozovny nad adresou — ať je vidět, co se na místě hledá. */
.gmap__photo {
  margin: 0 0 2px;
  border-radius: calc(var(--r) - 8px);
  overflow: hidden;
  background: var(--surface);
  aspect-ratio: 16 / 9;
}
.gmap__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   KONTAKTY — adresář lidí (.cdir), rychlé kanály (.chan),
   fakturační údaje (.cfacts)

   Záměr: co nejtišší plocha. Žádné boxy kolem karet, jen
   vlasové linky a rytmus — obsahem jsou lidé a čísla, ne rámečky.
   Skupina = dvousloupcová řádka „název oddělení | karty",
   takže oddělení s jedním člověkem vypadá stejně klidně jako
   Projektování s dvanácti.
   ========================================================= */

.cdir { background: var(--white); }
.cdir__head { max-width: 780px; margin: 0 0 clamp(30px, 3.6vw, 52px); }
.cdir__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: 1.02;
  color: var(--navy);
  margin: 0;
}
.cdir__sub {
  margin: clamp(10px, 1.2vw, 18px) 0 0;
  max-width: 60ch;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--muted);
}

/* ── Lišta filtru — přilepená pod fixní hlavičku, aby šlo hledat
   i uprostřed dlouhého seznamu. Rozostřené pozadí drží text čitelný. */
.cdir__bar {
  position: sticky;
  top: 90px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 14px 0 16px;
  margin-bottom: clamp(20px, 2.6vw, 36px);
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--g1);
}
.cdir__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  max-width: 420px;
}
.cdir__search-ic {
  position: absolute;
  left: 16px;
  display: inline-flex;
  color: var(--g4);
  pointer-events: none;
}
.cdir__search-ic svg { display: block; }
.cdir__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  padding: 13px 42px 13px 46px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow .2s ease, background .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cdir__input::placeholder { color: var(--g4); font-weight: 500; }
.cdir__input::-webkit-search-cancel-button { display: none; }
.cdir__input:focus {
  outline: none;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.cdir__clear {
  position: absolute;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--g2);
  color: var(--white);
  cursor: pointer;
  transition: background .18s ease;
}
.cdir__clear:hover { background: var(--navy); }
.cdir__clear svg { display: block; }

.cdir__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cdir__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  color: var(--navy);
  background: var(--surface);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.cdir__pill:hover { box-shadow: inset 0 0 0 1.5px var(--g2); }
.cdir__pill-n {
  font-size: 12.5px;
  font-weight: 600;
  color: #6b6f88; /* místo --g5 #7f839a: 12,5px text na #f5f5f8 potřebuje 4,5:1 (3,43 → 4,54) */
  font-variant-numeric: tabular-nums;
}
.cdir__pill.is-active {
  background: var(--navy);
  color: var(--white);
  box-shadow: none;
}
.cdir__pill.is-active .cdir__pill-n { color: rgba(255,255,255,.62); }
/* Aktivní pilulka konkrétního oddělení z deep-linku (/kontakty/?oddeleni=…) —
   nese ✕ na zrušení a návrat k „Vše". Dědí vzhled .is-active (navy). */
.cdir__pill--dept .cdir__pill-x { display: inline-flex; margin: 0 -5px 0 1px; opacity: .75; }
.cdir__pill--dept .cdir__pill-x svg { display: block; }
.cdir__pill--dept:hover .cdir__pill-x { opacity: 1; }

/* ── Sekce (Vedení / Služby / Obchody…) */
.cdir__sec { padding-top: clamp(34px, 4vw, 60px); }
.cdir__sec:first-child { padding-top: 0; }
.cdir__sec.is-hidden { display: none; }
.cdir__sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  color: var(--navy);
  margin: 0 0 clamp(18px, 2vw, 28px);
}

/* ── Skupina = oddělení. Label vlevo, karty vpravo, mezi skupinami vlasová linka. */
.cdir__group {
  display: grid;
  grid-template-columns: minmax(180px, 250px) 1fr;
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(26px, 3vw, 40px) 0;
  border-top: 1px solid var(--g1);
}
.cdir__group.is-hidden { display: none; }
.cdir__group-label { position: sticky; top: 172px; align-self: start; }
.cdir__group-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--navy);
  margin: 0;
}
.cdir__group-desc {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.cdir__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Stejný rastr jako mřížka týmu na O nás, ať portréty sedí v obou místech. */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px);
}
.cdir__item.is-hidden { display: none; }

/* ── Karta člověka — portrét 4/5 ve stejném provedení jako mřížka týmu na
   O nás (.team__card): zaoblená fotka přes celou šířku karty, pod ní jméno
   v display fontu. Kontakty jsou navíc oproti O nás. */
.pcard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--g0);
  box-shadow: var(--shadow-sm);
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.pcard:hover .pcard__media img { transform: scale(1.05); }
/* Monogram místo portrétu — u lidí, kteří fotku (zatím) nemají. */
.pcard__media--mono {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 68px);
  line-height: 1;
  color: var(--g4);
  background: var(--surface);
  box-shadow: none;
}
.pcard__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 1.7vw, 27px);
  line-height: 1.05;
  color: var(--navy);
  margin: 16px 0 0;
}
.pcard__role {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}
.pcard__links {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 12px;
}
.pcard__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease;
  font-variant-numeric: tabular-nums;
}
.pcard__link--mail { color: var(--muted); }
.pcard__link--mail .pcard__val { word-break: break-word; }
.pcard__ic { display: inline-flex; flex: none; color: var(--g4); transition: color .15s ease; }
.pcard__ic svg { display: block; }
.pcard__link:hover { color: var(--red); }
.pcard__link:hover .pcard__ic { color: var(--red); }

.cdir__empty {
  margin: clamp(40px, 5vw, 72px) 0 0;
  text-align: center;
  font-size: 17px;
  color: var(--muted);
}
.cdir__empty a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.cdir__note {
  margin: clamp(28px, 3vw, 44px) 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .pcard:hover .pcard__media img { transform: none; }
}

@media (max-width: 900px) {
  .cdir__group { grid-template-columns: 1fr; gap: 18px; }
  .cdir__group-label { position: static; }
}
@media (max-width: 640px) {
  .cdir__bar { top: 78px; gap: 10px; }
  .cdir__search { max-width: none; flex-basis: 100%; }
  .cdir__pills { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .cdir__pills::-webkit-scrollbar { display: none; }
  .cdir__pill { flex: none; }
  .cdir__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pcard__name { font-size: 21px; }
  .pcard__role { font-size: 14px; }
  .pcard__link { font-size: 13.5px; }
}

/* =========================================================
   RYCHLÉ KANÁLY (.chan — blok elpe/contact-channels)
   Velké dlaždice pro to, co lidé hledají první: ústředna,
   e-shop, poptávka FVE, fakturace.
   ========================================================= */
.chan { background: var(--white); }
.chan__head { max-width: 720px; margin: 0 0 clamp(28px, 3.2vw, 48px); }
.chan__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: 1.02;
  color: var(--navy);
  margin: 0;
}
.chan__sub {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--muted);
}
.chan__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
}
.chan__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), background .32s ease, box-shadow .32s ease;
}
a.chan__card:hover {
  transform: translateY(-4px);
  background: var(--white);
  box-shadow: var(--shadow);
}
.chan__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--white);
  color: var(--red);
  margin-bottom: clamp(18px, 2vw, 26px);
  transition: background .32s ease, color .32s ease;
}
.chan__ic svg { display: block; }
a.chan__card:hover .chan__ic { background: var(--red); color: var(--white); }
.chan__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g5);
  margin-bottom: 7px;
}
.chan__value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 21px);
  line-height: 1.25;
  color: var(--navy);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}
.chan__note {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.chan__go {
  position: absolute;
  top: clamp(24px, 2.4vw, 32px);
  right: clamp(24px, 2.4vw, 32px);
  display: inline-flex;
  color: var(--g3);
  transition: color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.chan__go svg { display: block; }
a.chan__card:hover .chan__go { color: var(--red); transform: translate(2px, -2px); }

/* =========================================================
   FAKTURAČNÍ ÚDAJE (.cfacts — blok elpe/company-details)
   ========================================================= */
.cfacts { background: var(--white); }
.cfacts__panel {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  gap: clamp(28px, 4vw, 72px);
  padding: clamp(30px, 3.6vw, 56px);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.cfacts__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xs);
  line-height: 1.04;
  color: var(--navy);
  margin: 0;
}
.cfacts__company {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--navy);
}
.cfacts__sub {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.cfacts__grid { margin: 0; display: grid; gap: 0; align-content: start; }
.cfacts__row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--g1);
}
.cfacts__row:first-child { border-top: 0; padding-top: 0; }
.cfacts__label {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}
.cfacts__value {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.cfacts__link { color: inherit; text-decoration: none; }
.cfacts__link:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.cfacts__note {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
@media (max-width: 900px) {
  .cfacts__panel { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cfacts__row { grid-template-columns: 1fr; gap: 4px; }
}

/* Dvě mapy pod sebou (Pelhřimov + Jihlava na Kontaktech) — druhá je
   pokračování téže myšlenky, ne nová sekce, tak ať mezi nimi není propast. */
.gmap + .gmap { padding-top: 0; }

/* =========================================================
   KONTAKTNÍ HERO (.chero — blok elpe/contact-hero)

   Dle wireframu Kontakty: vlevo eyebrow + H1 + stručný seznam
   „kam zavolat / napsat", vpravo rovnou poptávkový formulář.
   Staví na .refhero (stejné odsazení a drobečky jako ostatní
   podstránky), mění jen vnitřní mřížku.
   ========================================================= */
/* Mřížka patří na .chero__grid, ne na .refhero__inner — ten zůstává flex
   sloupcem (drobečky nad obsahem), jinak by se do levé kolony zabalil
   i formulář a pravá polovina zůstala prázdná. */
.chero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr);
  gap: clamp(36px, 5vw, 88px);
  align-items: start;
}
.chero__left { min-width: 0; display: flex; flex-direction: column; }
.chero__eyebrow {
  margin: 0;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}
.chero__title { margin-top: 6px; }

.chero__list {
  list-style: none;
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  max-width: 480px;
}
.chero__item { display: flex; align-items: flex-start; gap: 16px; }
.chero__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--white);
  color: var(--red);
  box-shadow: var(--shadow-sm);
}
.chero__ic svg { display: block; }
.chero__body { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.chero__label {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}
.chero__value {
  margin-top: 3px;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
  text-decoration: none;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
a.chero__value:hover { color: var(--red); }
.chero__note {
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
  word-break: break-word;
  transition: color .15s ease;
}
a.chero__note:hover { color: var(--red); }

/* Fotka pod kontakty — dorovnává levý sloupec k výšce formuláře, ať hero
   nekončí prázdnou plochou. `margin-top: auto` ji přisune ke spodní hraně,
   takže obě kolony dosednou na stejné dno bez ohledu na počet kontaktů. */
.chero__photo {
  margin: clamp(30px, 3.6vw, 52px) 0 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--g0);
  box-shadow: 0 34px 70px -34px rgba(11, 13, 20, .38);
}
.chero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Formulář v heru — karta .form si nese vlastní pozadí a stín, hlavička nad ní. */
.chero__form { min-width: 0; }
.chero__form-head { text-align: center; margin-bottom: clamp(18px, 2vw, 26px); }
.chero__form-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-xs);
  line-height: 1.02;
  color: var(--navy);
  margin: 0;
}
.chero__form-head p {
  margin: 8px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 1080px) {
  .chero__grid { grid-template-columns: 1fr; }
  .chero__list { max-width: none; }
  .chero__form-head { text-align: left; }
  .chero__photo { aspect-ratio: 21 / 9; }
}
@media (max-width: 560px) {
  .chero__ic { width: 40px; height: 40px; border-radius: 12px; }
  .chero__item { gap: 13px; }
}

/* Pilulka, která nefiltruje, ale skáče na jinou sekci (dle wireframu
   „Fakturační údaje"). Odlišená rámečkem místo plochy, ať je jasné,
   že se chová jinak než filtr. */
.cdir__pill--link {
  text-decoration: none;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--g2);
  color: var(--muted);
}
.cdir__pill--link:hover { box-shadow: inset 0 0 0 1.5px var(--navy); color: var(--navy); }
.cdir__pill-go { display: inline-flex; }
.cdir__pill-go svg { display: block; }

/* Kotva sekce fakturačních údajů nesmí skončit pod fixní hlavičkou. */
.cfacts[id] { scroll-margin-top: 110px; }

/* Kotva formuláře (tlačítko Poptávka v hlavičce) — offset pod fixní nav. */
.chero__form[id] { scroll-margin-top: 100px; }

/* ---- Tmavá varianta (.chero--dark) ----------------------------------------
   Stejný jazyk jako hero na homepage: fotka full-bleed na pozadí, tmavý scrim,
   bílý obsah vlevo, bílá karta formuláře vpravo (vyniká na tmavém podkladu). */
.chero--dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
}
.chero--dark .chero__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.chero--dark .chero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
}
/* Slideshow na pozadí — prolínání jednotlivých fotek (JS přehazuje .is-active).
   Bez JS / jedna fotka: první snímek je vidět, ostatní čekají skryté. */
.chero--dark .chero__bg[data-slideshow] .chero__slide {
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: opacity;
}
.chero--dark .chero__bg[data-slideshow] .chero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .chero--dark .chero__bg[data-slideshow] .chero__slide { transition: none; }
}
.chero--dark .chero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(108deg,
      rgba(11,13,20,.92) 0%,
      rgba(13,16,28,.78) 30%,
      rgba(13,16,28,.42) 62%,
      rgba(13,16,28,.18) 100%
    ),
    linear-gradient(180deg,
      rgba(11,13,20,.30) 0%,
      rgba(11,13,20,0) 26%,
      rgba(11,13,20,0) 60%,
      rgba(11,13,20,.55) 100%
    );
}
.chero--dark .chero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 80% at 88% 8%, rgba(229,35,41,.16) 0%, transparent 55%);
  mix-blend-mode: screen;
}
/* Drobečky + obsah zbělají. */
.chero--dark .crumbs__link,
.chero--dark .crumbs__sep,
.chero--dark .crumbs__current { color: rgba(255,255,255,.72); }
.chero--dark .crumbs__current { color: #fff; }
.chero--dark .crumbs__link:hover { color: #fff; }
.chero--dark .chero__eyebrow { color: rgba(255,255,255,.72); }
.chero--dark .chero__title { color: #fff; }
.chero--dark .chero__label { color: rgba(255,255,255,.62); }
.chero--dark .chero__value { color: #fff; }
.chero--dark a.chero__value:hover { color: var(--red-2, #ff5a5f); }
.chero--dark .chero__note { color: rgba(255,255,255,.58); }
.chero--dark a.chero__note:hover { color: #fff; }
/* Hlavička formuláře nad bílou kartou — na tmavém podkladu musí zbělat. */
.chero--dark .chero__form-head h2 { color: #fff; }
.chero--dark .chero__form-head p { color: rgba(255,255,255,.72); }

/* =========================================================
   MAPA — víc poboček (.gmap--multi)

   Dvě mapy pod sebou = dvakrát tentýž velký rám a dvakrát
   načtený Google iframe. Segmentovaný přepínač nechá rám velký,
   na první pohled ukáže, kde všude jsme, a druhou mapu natáhne
   až při přepnutí.
   ========================================================= */
.gmap__tabs {
  display: inline-flex;
  gap: 6px;
  margin-top: clamp(24px, 3vw, 40px);
  padding: 6px;
  border-radius: 999px;
  background: var(--surface);
  max-width: 100%;
}
.gmap__tab {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 22px 11px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.gmap__tab:hover { background: rgba(255,255,255,.7); }
.gmap__tab.is-active {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.gmap__tab-ic { display: inline-flex; flex: none; color: var(--g4); transition: color .25s ease; }
.gmap__tab-ic svg { display: block; }
.gmap__tab.is-active .gmap__tab-ic { color: var(--red); }
.gmap__tab-txt { display: flex; flex-direction: column; min-width: 0; }
.gmap__tab-name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.gmap__tab-addr {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmap__tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Panel se po přepnutí jemně objeví — bez posunu layoutu, jen opacita. */
.gmap__panel[hidden] { display: none; }
.gmap__panel.is-active { animation: gmap-fade .32s ease both; }
@keyframes gmap-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gmap__panel.is-active { animation: none; }
}

@media (max-width: 600px) {
  /* Na úzkém displeji je pilulkový pás těsný — segmenty na plnou šířku pod sebe. */
  .gmap__tabs { display: grid; gap: 4px; width: 100%; border-radius: var(--r); }
  .gmap__tab { border-radius: calc(var(--r) - 4px); }
  .gmap__tab-addr { white-space: normal; }
}

/* =========================================================
   CENÍK — ŘÁDKOVÝ SEZNAM (.plist — blok elpe/price-list)

   Vznikl vyříznutím ceníku z konfigurátoru štítků, který se ukázal jako
   slepá ulička; tahle část ale fungovala, tak zůstala samostatně.

   Řádky drží pohromadě jako jedna tabulka: mřížka s mezerou 1 px na šedém
   podkladu udělá dělicí linky bez `border` na každé buňce, takže se nikde
   nezdvojí. Sloupce jsou název / cena / odkaz, cena zarovnaná doprava, ať
   se dá porovnávat shora dolů.
   ========================================================= */
.plist { background: var(--surface); }
.plist__box { max-width: 860px; }
.plist__h {
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.plist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;                      /* mezera v mřížce = dělicí linka */
  background: var(--g1);
  border: 1px solid var(--g1);
  border-radius: var(--r);
  overflow: hidden;
}
.plist__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 24px;
  padding: 16px clamp(16px, 2vw, 24px);
  background: #fff;
}
.plist__label { font-size: 16px; font-weight: 600; }
.plist__price { display: grid; justify-items: end; gap: 2px; white-space: nowrap; }
.plist__price b { font-size: 17px; font-weight: 800; }
.plist__net { font-size: 12.5px; color: var(--muted); }
.plist__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}
.plist__link .ar { transition: transform .22s ease; }
.plist__link:hover .ar { transform: translateX(4px); }
.plist__note { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.plist__all { margin-top: clamp(20px, 2.4vw, 28px); }

@media (max-width: 640px) {
  /* Odkaz se nevejde vedle ceny → na vlastní řádek pod ni. */
  .plist__item { grid-template-columns: minmax(0, 1fr) auto; }
  .plist__link, .plist__note { grid-column: 1 / -1; }
}

/* =========================================================
   KE STAŽENÍ (.dl) — soubory seskupené do sekcí, karty 2 sl.
   ========================================================= */
/* Ke stažení: zmenšit mezeru mezi herem a kartami o 50 % (jen tady). */
.refhero:has(+ .section.dl) { padding-bottom: clamp(30px, 3.5vw, 55px); }
.section.dl { padding-top: clamp(50px, 5.5vw, 80px); }
/* Vložená sekce (mode=section, např. „Povinná publicita" na Pro školy): stejné karty,
   nadpis jako běžná sekce (H2 ve škále --h2-m), volitelné pozadí přes .elpe-secbg--*. */
.dl--section { padding-top: var(--section-pad); }
.dl__head { max-width: 880px; margin-bottom: clamp(28px, 3vw, 48px); }
.dl__h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-m);
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0;
}
.dl__lead { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 18px 0 0; max-width: 56ch; }
.dl--section.elpe-secbg--navy .dl__h2 { color: #fff; }
.dl__group + .dl__group { margin-top: clamp(40px, 5vw, 68px); }
.dl__h {
  margin: 0 0 clamp(16px, 2vw, 22px);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.dl__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.dl__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  height: 100%;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  background: #fff;
  border: 1px solid var(--g1);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.dl__link:hover {
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.dl__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--surface);
  color: var(--red);
  transition: background .22s ease, color .22s ease;
}
.dl__link:hover .dl__ico { background: var(--red); color: #fff; }
.dl__ico svg { display: block; }
.dl__body { display: grid; gap: 3px; min-width: 0; }
.dl__name {
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}
.dl__meta {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}
.dl__dl {
  display: inline-flex;
  color: var(--muted);
  opacity: .55;
  transition: opacity .22s ease, color .22s ease, transform .22s ease;
}
.dl__link:hover .dl__dl { opacity: 1; color: var(--red); transform: translateY(2px); }
.dl__dl svg { display: block; }

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

/* =========================================================
   AKCE A LETÁKY (.sale) — blok `elpe/offers`

   Probíhající akce výrobců (Kuchyňské studio). Náhledy letáků
   přicházejí od výrobců v různých poměrech stran — A4 titulka
   i široký banner — proto je media plocha jednotná dlaždice
   s `object-fit: contain` na bílé. Žádný ořez: leták musí
   zůstat čitelný, je to jeho jediný smysl.
   ========================================================= */
.sale__head { max-width: 720px; margin-bottom: clamp(30px, 3.2vw, 52px); }
.sale__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-s);
  line-height: .96;
  color: var(--navy);
}
.sale__lead {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.3vw, 18px);
}
.sale__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.sale__item { display: flex; }
.sale__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--g1);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.sale__card:hover {
  border-color: transparent;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.sale__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: clamp(14px, 1.6vw, 22px);
  background: #fff;
  border-bottom: 1px solid var(--g1);
}
.sale__media img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}
.sale__ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--g3);
}
.sale__ph svg { display: block; }
.sale__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
}
.sale__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: clamp(20px, 2.2vw, 28px);
}
.sale__brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.sale__title {
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy);
}
.sale__text {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}
.sale__cta {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--g1);
  color: var(--navy);
  font-weight: 700;
  font-size: 15.5px;
  transition: color .22s ease;
}
.sale__cta:hover { color: var(--red); }
.sale__ctaico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--red);
  transition: background .22s ease, color .22s ease;
}
.sale__cta:hover .sale__ctaico { background: var(--red); color: #fff; }
.sale__ctaico svg { display: block; }
.sale__ctatxt { display: grid; gap: 2px; min-width: 0; line-height: 1.25; }
.sale__ctameta {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}
.sale__cta .ar { transition: transform .22s ease; }
.sale__cta:hover .ar { transform: translateX(3px); }

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

/* =========================================================
   VYSKAKOVACÍ OKNO (.popup — inc/popup.php + initPopup)
   ========================================================= */
.popup { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 24px; }
.popup[hidden] { display: none; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(25, 30, 48, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .26s ease; }
.popup__card {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .26s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
  outline: none;
}
.popup.is-open .popup__backdrop { opacity: 1; }
.popup.is-open .popup__card { opacity: 1; transform: none; }
.has-popup { overflow: hidden; }
.popup__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--navy); cursor: pointer;
  box-shadow: var(--shadow-sm); transition: background .15s ease, transform .15s ease;
}
.popup__close:hover { background: #fff; transform: scale(1.06); }
.popup__close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.popup__media { aspect-ratio: 16 / 9; background: var(--g1); }
.popup__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.popup__body { padding: clamp(24px, 4vw, 36px) clamp(24px, 4vw, 40px) clamp(26px, 4vw, 38px); }
.popup__card--noimg .popup__body { padding-top: clamp(56px, 7vw, 64px); }
.popup__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 4vw, 44px); line-height: 1; color: var(--navy); margin: 0 0 14px; text-wrap: balance; }
.popup__text { color: var(--muted); font-size: 16px; line-height: 1.6; }
.popup__text p { margin: 0 0 12px; }
.popup__text p:last-child { margin-bottom: 0; }
.popup__text strong { color: var(--navy); }
.popup__text a { color: var(--red); text-decoration: underline; }
.popup__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.popup__later { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; padding: 8px 4px; }
.popup__later:hover { color: var(--navy); }
/* Jen grafika (banner): karta má velikost obrázku, nic se neořezává. */
.popup__card--banner { width: auto; max-width: min(760px, 100%); display: block; background: var(--navy); }
.popup__banner { display: block; line-height: 0; }
.popup__banner img { display: block; width: auto; height: auto; max-width: min(760px, calc(100vw - 48px)); max-height: calc(100vh - 48px); }
a.popup__banner:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.popup__card--banner .popup__close { background: rgba(255,255,255,.92); }

/* Obrázek na výšku: karta se rozšíří, obrázek celý vlevo, text vpravo. */
.popup__card--portrait { width: min(900px, 100%); display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
.popup__card--portrait .popup__media { aspect-ratio: var(--popup-ar, 3 / 4); height: 100%; background: var(--surface); }
.popup__card--portrait .popup__media img { object-fit: cover; }
.popup__card--portrait .popup__body { align-self: center; padding-top: clamp(40px, 5vw, 56px); }
.popup__card--portrait .popup__close { background: rgba(255,255,255,.92); }
@media (max-width: 760px) and (min-width: 641px) {
  .popup__card--portrait { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .popup { padding: 0; align-items: end; }
  .popup--banner { padding: 16px; align-items: center; }
  .popup__card--banner { border-radius: var(--r-lg); }
  .popup__banner img { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
  .popup__card--portrait { display: block; }
  .popup__card--portrait .popup__media { aspect-ratio: auto; height: auto; max-height: 52vh; }
  .popup__card--portrait .popup__media img { height: auto; max-height: 52vh; object-fit: contain; }
  .popup__card--portrait .popup__body { padding-top: clamp(24px, 4vw, 36px); }
  .popup__card { width: 100%; max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(40px); }
  .popup__media { aspect-ratio: 4 / 3; }
  .popup__actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .popup__backdrop, .popup__card { transition: none; transform: none; }
}

/* =========================================================
   NÁHLED VYSKAKOVACÍHO OKNA (/nahled-okna/<okno>/)
   Servisní stránka pro schvalování oken klientem — okno se na ní otevře samo,
   pod ním je jen shrnutí nastavení a odkazy na ostatní okna. Bez ozdob:
   hlavní je okno samo, stránka pod ním má být klidné pozadí.
   ========================================================= */
.popuprev__wrap { max-width: 760px; }
.popuprev__eyebrow {
  display: block; margin-bottom: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--red);
}
.popuprev__h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--h1-m, clamp(38px, 5vw, 64px)); line-height: 1.02; color: var(--navy); }
.popuprev__lead { margin-top: 16px; color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 60ch; }
.popuprev__facts { margin: clamp(28px, 3vw, 40px) 0 0; display: grid; gap: 0; }
.popuprev__facts > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--g1); }
.popuprev__facts > div:last-child { border-bottom: 1px solid var(--g1); }
.popuprev__facts dt { font-weight: 600; color: var(--navy); }
.popuprev__facts dd { margin: 0; color: var(--muted); }
.popuprev__actions { margin: clamp(26px, 3vw, 38px) 0 0; }
.popuprev__more { margin-top: clamp(40px, 5vw, 72px); }
.popuprev__h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 34px); color: var(--navy); margin-bottom: 14px; }
.popuprev__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.popuprev__list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border: 1px solid var(--g1); border-radius: var(--r);
  color: var(--navy); text-decoration: none; font-weight: 600;
  transition: border-color .2s, background .2s;
}
.popuprev__list a:hover { border-color: var(--navy); background: var(--g0); }
.popuprev__list span { font-weight: 400; font-size: 15px; color: var(--muted); }
@media (max-width: 640px) {
  .popuprev__facts > div { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================================
   MOBILNÍ TYPOGRAFIE — kontaktní údaje a drobné texty (≤640 px)
   Audit 11. 9. 2026 (393 px): telefon/e-mail v adresáři 13,5 px, na kartách
   týmu 14 px, popisky formuláře 13 px — pro klíčové kontaktní informace málo.
   Sjednoceno: kontaktní hodnoty 15 px, popisky polí 14 px, souhlas 13 px,
   tlačítka 15 px. Eyebrow/drobečky/patička zůstávají záměrně drobné.
   Blok je na konci souboru, aby přebil dřívější mobilní pravidla komponent.
   ========================================================= */
@media (max-width: 640px) {
  /* Adresář (Kontakty): jeden sloupec s fotkou vlevo — dvě karty vedle sebe
     (165 px) by 15px e-mail nepobraly. Stejný řádkový princip jako tým/Trust bar. */
  .cdir__grid { grid-template-columns: 1fr; gap: 14px; }
  .pcard { display: grid; grid-template-columns: 96px 1fr; column-gap: 16px; align-items: center; }
  .pcard__media { width: 96px; grid-row: 1 / span 3; border-radius: var(--r-md, 12px); }
  .pcard__media--mono { font-size: 34px; }
  .pcard__name { margin: 0; font-size: 21px; }
  .pcard__role { margin-top: 3px; font-size: 15px; }
  .pcard__links { margin-top: 8px; gap: 4px; }
  .pcard__link { font-size: 15px; }

  /* Karty týmu (blok Kontaktní osoby) a vedoucí prodejny. */
  .cper--cards .cper__role,
  .cper--cards .cper__link,
  .cper__link { font-size: 15px; }
  .bcontact__role { font-size: 15px; }
  .shopcard__kicker,
  .shopcard__hlabel { font-size: 13px; }
  .shopcard__qrcap { font-size: 12px; }

  /* Formuláře. */
  .field label { font-size: 14px; }
  .form__consent-txt { font-size: 13px; }

  /* Tlačítka (ne drobná .btn--sm v liště). */
  .btn:not(.btn--sm) { font-size: 15px; }
}
@media (max-width: 380px) {
  /* Užší telefony: menší foto, ať se i nejdelší e-mail adresáře vejde na řádek. */
  .pcard { grid-template-columns: 80px 1fr; column-gap: 14px; }
  .pcard__media { width: 80px; }
}

/* =========================================================
   404 / 410 — „Tady někdo vypnul proud." (404.php)
   Tmavá scéna: obrysové číslice, do nuly visí žárovka ze stropu, vypínač
   (button) přepne data-power=on → žárovka svítí, číslice se vyplní světlem.
   ========================================================= */
.err404 {
  --e4-warm: #FFC66B;
  --e4-line: rgba(255, 255, 255, .28);
  --e4-muted: rgba(255, 255, 255, .68);
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: clip;
}
/* teplé světlo po zapnutí — celá scéna zteplá */
.err404::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 72% 42%, rgba(255, 198, 107, .22), transparent 70%);
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.err404[data-power="on"]::after { opacity: 1; }
/* animovaný gradient (js/err404-bg.js, WebGL port Figma „Moving gradient");
   bez WebGL se canvas odstraní a zůstane navy z .err404 */
.err404__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.err404__scene { position: relative; z-index: 1; }
.err404__grid {
  display: grid;
  grid-template-columns: minmax(0, 12fr) minmax(0, 8fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  min-height: 100svh;
  padding-top: clamp(112px, 14vh, 150px);
  padding-bottom: clamp(32px, 5vh, 56px);
}

/* ---- text ---- */
.err404 .crumbs__link,
.err404 .crumbs__sep { color: var(--e4-muted); }
.err404 .crumbs__link:hover { color: #fff; }
.err404__kicker {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--e4-muted);
}
/* H1 jako na ostatních podstránkách (.refhero__title): token --h1-page,
   League Gothic bez verzálek — web nadpisy kapitálkami nikde nesází. */
.err404__title {
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  font-family: var(--font-display);
  font-size: var(--h1-page);
  line-height: .95;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
.err404__lead {
  max-width: 52ch;
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.6;
  color: var(--e4-muted);
}

/* vypínač */
.err404__switch {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 2.8vw, 30px);
  padding: 8px 18px 8px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.err404__switch:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.err404__switch:active { transform: scale(.97); }
.err404__switch:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.err404__switch-track {
  position: relative;
  width: 58px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
  transition: background .25s ease;
}
.err404__switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
}
.err404__switch:hover .err404__switch-knob { transform: translateX(4px); }
.err404[data-power="on"] .err404__switch-track { background: var(--red); }
.err404[data-power="on"] .err404__switch-knob,
.err404[data-power="on"] .err404__switch:hover .err404__switch-knob { transform: translateX(26px); }

.err404__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 12px; }
/* kompaktnější tlačítka, ať se cesty dál vejdou do jednoho řádku */
.err404__actions .btn, .err404__contacts .btn { padding: 14px 22px; font-size: 13px; }
.err404 .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px var(--e4-line); }
.err404 .btn--ghost:hover { color: var(--navy); background: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
/* kontakty = druhý řádek tlačítek, stejný rytmus jako cesty dál */
.err404__contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; }
.err404__contacts-label { font-size: 15px; color: var(--e4-muted); margin-right: 4px; }
.err404__contacts .btn { gap: 8px; }
.err404__contacts .btn svg { flex: none; }

/* ---- scéna: číslice + žárovka ---- */
.err404__stage { position: relative; display: flex; justify-content: center; }
.err404__code {
  display: flex;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(150px, 22vw, 330px);
  line-height: .86;
  letter-spacing: -.01em;
  color: transparent;
  -webkit-text-stroke: 2px var(--e4-line);
  transition: color .8s cubic-bezier(.16, 1, .3, 1), -webkit-text-stroke-color .8s ease, text-shadow .8s ease;
}
.err404__code > span { display: block; }
.err404[data-power="on"] .err404__code {
  color: #fff;
  -webkit-text-stroke-color: transparent;
  text-shadow: 0 0 40px rgba(255, 198, 107, .45), 0 0 90px rgba(255, 198, 107, .25);
}
.err404__zero { position: relative; }
.err404__bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .38em;
  height: 1.52em; /* 4 : 1 jako viewBox; střed žárovky (y≈346/400) míří do středu nuly */
  overflow: visible;
  transform: translate(-50%, -86.5%);
}
.err404__cable { stroke: rgba(255, 255, 255, .55); stroke-width: 3; }
.err404__socket { fill: #2E3650; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.err404__thread { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
.err404__glass {
  fill: rgba(255, 255, 255, .05);
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 2.5;
  transition: fill .5s ease, stroke .5s ease;
}
.err404__filament { stroke: rgba(255, 255, 255, .35); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease, filter .3s ease; }
.err404__glow { opacity: 0; transform-origin: 50px 346px; transition: opacity .5s ease; }
/* vadný kontakt — jednou za čas blikne, ať je jasné, že se dá zapnout */
.err404[data-power="off"] .err404__glow { animation: err404-flicker 7s linear infinite; }
@keyframes err404-flicker {
  0%, 88%, 100% { opacity: 0; }
  89% { opacity: .55; }
  90% { opacity: 0; }
  91.5% { opacity: .3; }
  92% { opacity: 0; }
  95% { opacity: .7; }
  95.6% { opacity: 0; }
}
.err404[data-power="on"] .err404__glow { opacity: 1; animation: err404-breathe 3.2s ease-in-out infinite; }
@keyframes err404-breathe { 50% { transform: scale(1.06); opacity: .88; } }
.err404[data-power="on"] .err404__glass { fill: url(#err404-glass); stroke: #FFF3D6; }
.err404[data-power="on"] .err404__filament { stroke: #fff; filter: drop-shadow(0 0 4px #fff); }

@media (max-width: 900px) {
  .err404__grid { grid-template-columns: 1fr; gap: 0; padding-top: clamp(120px, 16vh, 150px); }
  .err404__stage { order: -1; margin-bottom: clamp(28px, 6vw, 48px); }
  .err404__code { font-size: clamp(120px, 34vw, 220px); }
  .err404::after { background: radial-gradient(ellipse 80% 40% at 50% 18%, rgba(255, 198, 107, .22), transparent 70%); }
}
@media (max-width: 560px) {
  .err404__actions, .err404__contacts { flex-direction: column; align-items: stretch; }
  .err404__actions .btn, .err404__contacts .btn { width: 100%; justify-content: center; }
  .err404__contacts-label { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .err404__glow { animation: none !important; }
  .err404::after, .err404__code, .err404__glass, .err404__filament, .err404__glow, .err404__switch-knob, .err404__switch-track { transition: none; }
}

/* =========================================================
   DĚKOVNÁ STRÁNKA po odeslání formuláře (page-dekujeme.php, inc/thanks.php)
   Kostra 404/legal (refhero--legal), navíc odznak s fajfkou, kroky
   „Co bude dál“ a cesty dál. Bez scrollu se má vejít hero + první řádek kroků.
   ========================================================= */
.thanks .refhero--legal { padding-top: clamp(132px, 17vh, 176px); padding-bottom: clamp(20px, 3vw, 36px); }
.thanks .refhero--legal .refhero__inner { gap: 18px; align-items: flex-start; }
.thanks .refhero--legal .refhero__inner > .crumbs { margin-bottom: 6px; }
.thanks .refhero--legal .refhero__title { font-size: clamp(32px, 4.4vw, 60px); max-width: none; text-wrap: balance; } /* věta „Děkujeme, Vaše … byla odeslána.“ v jednom řádku (Štěpán 15. 9.); při zlomu na mobilu vyvážené řádky */
.thanks__lead { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; color: var(--muted); }

/* Odznak: červený kruh s fajfkou + pulzující prstenec (jen bez reduced-motion). */
.thanks__badge { position: relative; width: 72px; height: 72px; flex: none; }
.thanks__mark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--red) 55%, transparent);
}
.thanks__mark svg { width: 34px; height: 34px; }
.thanks__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--red); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .thanks__mark { animation: thanks-pop .55s cubic-bezier(.2, .9, .3, 1.3) both; }
  .thanks__ring { animation: thanks-ring 1.6s ease-out .35s 2; }
}
@keyframes thanks-pop  { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes thanks-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

.thanks .thanks__body { padding-top: clamp(8px, 1.5vw, 20px); padding-bottom: clamp(48px, 6vw, 88px); }
.thanks__h2 {
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  color: var(--navy);
}
.thanks__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px);
  counter-reset: none;
}
.thanks__step {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--navy) 6%, transparent);
}
.thanks__num {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  color: color-mix(in srgb, var(--navy) 28%, #fff);
}
.thanks__ico {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: #fff; color: var(--red);
  box-shadow: 0 1px 2px rgba(25, 30, 48, .06);
}
.thanks__ico svg { width: 26px; height: 26px; }
.thanks__step-title { margin: 6px 0 0; font-size: 19px; line-height: 1.25; color: var(--navy); }
.thanks__step-txt { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

.thanks__foot { margin-top: clamp(28px, 4vw, 48px); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 clamp(14px, 2vw, 22px); }
.thanks__note { margin: 0; color: var(--muted); font-size: 15px; }
.thanks__note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.thanks__note a:hover { color: var(--red); }

@media (max-width: 900px) {
  .thanks__steps { grid-template-columns: 1fr; }
  .thanks__step { padding-right: 56px; }
}
@media (max-width: 560px) {
  .thanks__badge { width: 60px; height: 60px; }
  .thanks__mark svg { width: 28px; height: 28px; }
  .thanks__actions { flex-direction: column; }
  .thanks__actions .btn { width: 100%; justify-content: center; }
}