/* =============================================================
   JAPO MEDIA — Kreativní studio holdingu JAP
   Světlý design systém (v2) — inspirováno brand manuálem JAP
   -------------------------------------------------------------
   Princip: čisté bílé/off-white plátno, sytě černý text a CTA,
   holdingový gradient (plum → magenta → coral) drží roli
   signature prvku (hero, srdce, dekorace). Cinematic, ale světlé.
   ============================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Plátno — neutrály dle manuálu, kap. 2.1 */
  --paper:   #ffffff;   /* White */
  --bone:    #f1f1f1;   /* Grey 02 */
  --bone-2:  #e2e2e2;   /* Grey 01 */
  --ink:     #000000;   /* Black */
  --ink-2:   #1a1a1a;
  --line:    rgba(0,0,0,0.12);
  --line-2:  rgba(0,0,0,0.06);
  --line-w:  rgba(255,255,255,0.16);

  /* Text */
  --slate:   #5c5c5c;   /* sekundární */
  --ash:     #8a8a8a;   /* tlumené */
  --faint:   #bcbcbc;   /* velmi tlumené */

  /* Brandové barvy — výhradně z palety manuálu, kap. 2.1.
     --magenta nese 37 textových použití, proto dostává Fuchsia 01:
     kontrast na bílé 7,08:1 (Fuchsia 02 by dala jen 3,61:1 = pod normou AA). */
  --coral:   #f36b44;   /* Orange 01  */
  --rose:    #ff9932;   /* Orange 02  */
  --magenta: #871bc2;   /* Fuchsia 01 */
  --violet:  #cd5db4;   /* Fuchsia 02 */
  --plum:    #871bc2;   /* Fuchsia 01 */

  --grad:     linear-gradient(105deg, #f36b44 0%, #ff9932 24%, #cd5db4 58%, #871bc2 100%);
  --grad-br:  linear-gradient(135deg, #f36b44 0%, #ff9932 24%, #cd5db4 58%, #871bc2 100%);
  --grad-soft: linear-gradient(135deg, rgba(243,107,68,0.14), rgba(205,93,180,0.12) 55%, rgba(135,27,194,0.14));

  /* Typografie */
  /* Primární písmo Geist (kap. 3.1). Arial je dle kap. 3.4 sekundární
     písmo = náhrada, proto stojí ve fallbacku, ne jako druhá designová rodina. */
  --display: "Geist", Arial, system-ui, sans-serif;
  --serif:   "Geist", Arial, system-ui, sans-serif;
  --body:    "Geist", Arial, system-ui, sans-serif;

  /* Rytmus */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --pad-x:   clamp(20px, 5vw, 90px);
  --maxw:    1600px;
  --radius:  6px;
  --radius-lg: 18px;

  /* Logo JAPO Media — geometrie zmerena z oficialniho vektoru.
     Ochranna zona (kap. 1.10) = vyska pismene J = 0.969x vyska logotypu. */
  --logo-ratio: 9.936;
  --logo-clear: 0.969;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  line-height: 1.5;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

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

/* Loga se nesmi deformovat (kap. 1.12). Globalni max-width vyse orizne sirku,
   ale vysku ne — object-fit: contain proto zachova pomer stran vzdy. */
.nav__logo img, .preloader__logo, .footer__brand h3 img,
.cmorph__logo img, .heart, .ctaband__heart, .person__heart,
.deliv__ic img, .fx__avatar img { object-fit: contain; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--magenta); color: #fff; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 2px; }

/* ---------- Typografické utility ---------- */
.eyebrow {
 font-family: var(--serif); font-weight: 400;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem); color: var(--magenta);
  letter-spacing: 0.01em;
}
.tag {
  font-family: var(--body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ash);
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Text jen pro odecitace obrazovky - vizualne skryty, ale citelny */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Heart motif inline */
.heart { display: inline-block; height: 1em; width: auto; vertical-align: -0.12em; }

/* =============================================================
   Grain — jemná filmová vrstva (světlá varianta)
   ============================================================= */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 92;
  background-image: url("../assets/img/grain.png");
  background-size: 180px;
  opacity: 0.5; mix-blend-mode: multiply;
}

/* =============================================================
   Preloader
   ============================================================= */
.preloader {
  position: fixed; inset: 0; z-index: 2000; background: var(--paper);
  display: grid; place-items: center; overflow: hidden;
  animation: preloaderSafety .5s 5s forwards;
}
/* Druhy a dalsi prichod na domovskou stranku v ramci jedne navstevy:
   uvodni obrazovka se vubec nevykresli (trida se nastavuje uz v hlavicce). */
.bez-uvodu .preloader { display: none; }
@keyframes preloaderSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.preloader__inner { text-align: center; position: relative; z-index: 2; --logo-h: clamp(30px, 5.5vw, 52px); }
.preloader__logo { display: block; height: var(--logo-h); width: auto; margin: 0 auto; }
.preloader__mark { overflow: hidden; line-height: 0; }
.preloader__mark span { display: inline-block; transform: translateY(110%); }
.preloader__sub {
 margin-top: max(16px, calc(var(--logo-h) * var(--logo-clear))); font-family: var(--serif); 
  font-size: clamp(.9rem, 2vw, 1.15rem); color: var(--slate); opacity: 0;
}
.preloader__count {
  position: absolute; right: var(--pad-x); bottom: clamp(24px, 5vw, 56px);
  font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 9vw, 5.6rem);
  letter-spacing: -0.03em; color: var(--faint); z-index: 2;
}
.preloader__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0%; background: var(--grad); z-index: 2; }

/* ---------- uvodni znelka s logem ----------
   Video se do stranky vygeneruje jen kdyz soubor lezi v repozitari
   (components/Preloader.astro). Dokud tam neni, tenhle blok nema na co platit
   a uvodni obrazovka vypada presne jako driv. */
.preloader__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; opacity: 0;
  transition: opacity .45s var(--ease);
}
/* Logotyp a pocitadlo ustoupi az ve chvili, kdy znelka opravdu bezi. */
.preloader--hraje .preloader__video { opacity: 1; }
.preloader--hraje .preloader__inner,
.preloader--hraje .preloader__count,
.preloader--hraje .preloader__bar { opacity: 0; visibility: hidden; }
/* Znelka byva delsi nez puvodni pocitadlo, takze se zachranna animace odsune.
   Vlastni pojistka v js/main.js (9 s) ji zamerne predbiha. */
.preloader--znelka { animation-delay: 12s; }

/* =============================================================
   Navigace
   ============================================================= */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  --logo-h: clamp(15px, 1.5vw, 21px);
  --logo-gap: calc(var(--logo-h) * var(--logo-clear));   /* ochranna zona, kap. 1.10 */
  gap: var(--logo-gap);
  padding: max(clamp(16px, 2.2vw, 26px), var(--logo-gap)) var(--pad-x);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.is-solid {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  padding-top: max(clamp(12px, 1.6vw, 18px), var(--logo-gap));
  padding-bottom: max(clamp(12px, 1.6vw, 18px), var(--logo-gap));
  box-shadow: 0 1px 0 var(--line-2);
}
.nav__logo {
  position: relative; display: block; flex: 0 0 auto;
  height: var(--logo-h); aspect-ratio: var(--logo-ratio);
}
.nav__logo img {
  position: absolute; left: 0; top: 0; height: 100%; width: auto;
  transition: opacity .5s var(--ease);
}
.nav__logo .logo--on-light { opacity: 0; }
.nav.is-solid .nav__logo .logo--on-dark { opacity: 0; }
.nav.is-solid .nav__logo .logo--on-light { opacity: 1; }
.nav__links { display: flex; gap: clamp(18px, 2.2vw, 38px); align-items: center; }
.nav__links a {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: #fff; position: relative; padding: 4px 0; transition: color .5s var(--ease); opacity: .92;
}
.nav.is-solid .nav__links a { color: var(--ink-2); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: currentColor; transition: width .5s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; }
.nav__links a.is-active { color: var(--magenta); }
.nav.is-solid .nav__links a.is-active { color: var(--magenta); }
.nav__cta {
  display: inline-flex; align-items: center; gap: .6em; padding: 11px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  transition: transform .3s var(--ease), background .4s var(--ease);
}
.nav__cta:hover { transform: translateY(-2px); }
.nav__cta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); }
.nav__burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); align-items: center; justify-content: center; color: #fff; }
.nav.is-solid .nav__burger { border-color: var(--line); color: var(--ink); }
.nav__burger span { display: block; width: 18px; height: 1.6px; background: currentColor; position: relative; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.6px; background: currentColor; }
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }

/* Fullscreen menu */
.menu {
  position: fixed; inset: 0; z-index: 150; background: var(--grad-br);
  display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad-x);
  clip-path: inset(0 0 100% 0); pointer-events: none;
}
.menu.is-open { clip-path: inset(0 0 0% 0); pointer-events: auto; }
.menu__close { position: absolute; top: clamp(16px, 2.2vw, 26px); right: var(--pad-x); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; color: #fff; transition: background .4s var(--ease), transform .4s var(--ease); }
.menu__close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }
.menu__list { list-style: none; display: flex; flex-direction: column; gap: clamp(2px, .8vw, 8px); }
.menu__list li { overflow: hidden; }
.menu__list a {
  font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 9vw, 6.2rem);
  letter-spacing: -0.04em; line-height: 1.04; color: #fff; display: inline-flex; align-items: baseline; gap: .4em;
  transform: translateY(110%); transition: opacity .4s var(--ease); opacity: .92;
}
.menu__list a small { font-family: var(--body); font-size: .85rem; font-weight: 500; letter-spacing: .1em; color: rgba(255,255,255,.7); }
.menu__list a:hover { opacity: 1; }
.menu__foot { position: absolute; left: var(--pad-x); bottom: clamp(24px, 4vw, 48px); display: flex; gap: 32px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,.8); }
.menu__foot a:hover { color: #fff; }

/* =============================================================
   Buttons
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .8em; padding: 16px 28px; border-radius: 999px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  position: relative; overflow: hidden; transition: transform .3s var(--ease), color .4s var(--ease);
  will-change: transform;
}
.btn svg { transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink::before { content: ""; position: absolute; inset: 0; background: var(--grad); transform: translateY(101%); transition: transform .5s var(--ease); z-index: 0; }
.btn--ink:hover::before { transform: translateY(0); }
.btn--ink span, .btn--ink svg { position: relative; z-index: 1; }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative; min-height: 100svh; width: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad-x);
  background: var(--grad-br);
}
/* Clona nad videem. Drzi se stejne sily jako .pagehead::after (.42 nahore),
   aby byl efekt na domovske stejne citelny jako v hlavickach podstranek.

   Drive tu byly dve vrstvy vcetne vinetace, ktera pridavala na okrajich az
   dalsich 50 % ztmaveni. Davalo to smysl, dokud tu bezelo stare video jako
   jemna textura pres gradient - nad shaderem ale efekt dusila.

   Spodni konec je o neco silnejsi nez u podstranek kvuli tlacitkum. Kdyby
   byl obraz porad moc zaduseny, snizuj hodnoty smerem k .30. */
.hero__grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(30,12,40,.42) 0%, rgba(30,12,40,.14) 45%, rgba(30,12,40,.44) 100%);
}
.hero__content { position: relative; z-index: 3; max-width: var(--maxw); width: 100%; margin: 0 auto; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(16px, 2.4vw, 28px); color: #fff; }
.hero__eyebrow .heart { height: 16px; width: auto; }
.hero__eyebrow span { color: rgba(255,255,255,.92); font-family: var(--serif); font-size: clamp(.9rem,1.3vw,1.1rem); }
.hero__title {
  font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 12.5vw, 14rem);
  line-height: .84; letter-spacing: -0.05em; color: #fff;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: inline-block; }
.has-js:not(.reduce) .hero__title .line > span { transform: translateY(102%); }
.hero__title .thin { font-weight: 300; font-family: var(--serif); letter-spacing: -0.01em; }
.hero__sub {
  margin-top: clamp(22px, 3vw, 40px); max-width: 600px; color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6;
}
.hero__sub b { color: #fff; font-weight: 600; }
.hero__actions { margin-top: clamp(26px, 3.4vw, 44px); display: flex; gap: 14px; flex-wrap: wrap; }
.hero__actions .btn--light { color: var(--ink); }
.hero__actions .btn--outline { border: 1px solid rgba(255,255,255,.5); color: #fff; }
.hero__actions .btn--outline:hover { background: #fff; color: var(--ink); }
@media (min-width: 821px) {
  .hero__actions { margin-top: clamp(6px, 1vw, 14px); }
}

.hero__foot {
  position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: clamp(20px, 3vw, 38px);
  z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.hero__disciplines { display: flex; gap: 8px; flex-wrap: wrap; }
.hero__chip {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85);
  padding: 8px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.hero__chip.is-live { color: var(--plum); border-color: transparent; background: #fff; }

/* =============================================================
   Sekce — obecné
   ============================================================= */
.section { position: relative; padding: clamp(80px, 12vw, 210px) var(--pad-x); }
.section--bone { background: var(--bone); }
.section__inner { max-width: var(--maxw); margin: 0 auto; }
.section__head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(38px, 6vw, 84px); flex-wrap: wrap; }
.section__index { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .05em; color: var(--magenta); }
.section__label { font-family: var(--serif); font-size: clamp(1rem, 1.6vw, 1.4rem); color: var(--slate); }
.section__lead { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.14; letter-spacing: -0.02em; max-width: 20ch; }

.has-js:not(.reduce) [data-reveal] { opacity: 0; }
.has-js:not(.reduce) [data-reveal="up"] { transform: translateY(34px); }
.has-js:not(.reduce) .line-mask > span { transform: translateY(102%); }
.line-mask { display: block; overflow: hidden; }

/* =============================================================
   MANIFESTO
   ============================================================= */
.manifesto__grid { display: grid; grid-template-columns: 240px 1fr; gap: clamp(30px, 5vw, 72px); }
.manifesto__aside .tag { display: block; }
.manifesto__aside p { margin-top: 20px; font-size: .95rem; color: var(--slate); max-width: 240px; }
.manifesto__statement {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 4.4vw, 3.8rem);
  line-height: 1.14; letter-spacing: -0.02em; color: var(--ash); max-width: 21ch;
}
.manifesto__statement em { font-style: normal; color: var(--ink); }
.manifesto__statement .grad-text { font-style: normal; }

/* =============================================================
   STATS
   ============================================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2); border-block: 1px solid var(--line-2); }
.stat { background: var(--paper); padding: clamp(30px, 4vw, 60px) clamp(20px, 2.4vw, 40px); }
.section--bone .stat { background: var(--bone); }
.stat__num { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -0.03em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label { margin-top: 14px; font-size: .92rem; color: var(--slate); max-width: 24ch; }

/* =============================================================
   SLUŽBY
   ============================================================= */
.services__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.svc { grid-column: span 6; background: var(--paper); padding: clamp(30px, 3.4vw, 52px); min-height: 320px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; transition: background .5s var(--ease); }
.section--bone .svc { background: var(--bone); }
.svc::before { content: ""; position: absolute; inset: 0; opacity: 0; background: var(--grad-soft); transition: opacity .5s var(--ease); }
.svc:hover::before { opacity: 1; }
.svc__top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.svc__no { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--faint); }
.svc__icon { width: 40px; height: 40px; color: var(--slate); transition: color .5s var(--ease), transform .6s var(--ease); }
.svc:hover .svc__icon { color: var(--magenta); transform: translateY(-4px) rotate(-6deg); }
.svc__body { position: relative; z-index: 1; }
.svc h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.3rem); letter-spacing: -0.02em; text-wrap: balance; }
.svc p { margin-top: 12px; color: var(--slate); font-size: .98rem; line-height: 1.55; max-width: 42ch; }
.svc__link { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); transition: color .4s var(--ease); }
.svc:hover .svc__link { color: var(--ink); }
.svc__link svg { transition: transform .4s var(--ease); }
.svc:hover .svc__link svg { transform: translateX(5px); }

/* =============================================================
   Kinetický marquee
   ============================================================= */
.marquee { padding: clamp(46px, 7vw, 120px) 0; border-block: 1px solid var(--line-2); overflow: hidden; }
.marquee--ink { background: var(--ink); }
.marquee__row { display: flex; gap: 0; white-space: nowrap; will-change: transform; }
.marquee__row span { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 7.5vw, 7.5rem); letter-spacing: -0.03em; padding: 0 .35em; color: transparent; -webkit-text-stroke: 1.2px var(--faint); }
.marquee--ink .marquee__row span { -webkit-text-stroke-color: rgba(255,255,255,.24); }
.marquee__row span.fill { color: var(--ink); -webkit-text-stroke: 0; }
.marquee--ink .marquee__row span.fill { color: #fff; }
.marquee__row span.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; color: transparent; }
/* Oddělovač mezi slovy. Je to tečka ze stejného řezu Geistu jako text vedle
   ní - ne dokreslený kroužek - takže drží stejnou optickou váhu i tvar jako
   zbytek pruhu. Dřív tu byla hvězdička, ta ale do písma nepatřila. */
.marquee__row .dot { -webkit-text-stroke: 0; color: var(--magenta); }
/* Na černém pruhu je Fuchsia 01 příliš tmavá (2,97:1); Fuchsia 02 dá 5,82:1. */
.marquee--ink .marquee__row .dot { color: var(--violet); }

/* =============================================================
   PRÁCE — bento
   ============================================================= */
.work__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(180px, 22vw, 300px); gap: clamp(12px, 1.4vw, 22px); }
.wcard { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--bone-2); }
/* Fotka CELÁ + rozmazaná výplň. Dlaždice mozaiky má pevný tvar (a s šířkou
   okna se mění), fotky od klienta mají libovolný poměr — plakát na výšku,
   foto na šířku. Cover by fotku ořízl, u plakátu s textem vzal půl nápisu.
   Adresu fotky nese inline style; vlastní pozadí prvku se nekreslí
   (background-size: 0 0) a místo něj ji kreslí dvě vrstvy, které si ji
   zdědí: ::before rozmazaná, ztmavená kopie přes celou dlaždici (přesah
   -12 % schová světlé okraje rozostření i posun paralaxy), ::after ostrá
   fotka celá (contain). Stejný princip má .case__media .im níže. */
.wcard__img { position: absolute; inset: 0; background-size: 0 0; background-position: center; transform: scale(1.02); transition: transform .9s var(--ease); will-change: transform; }
.wcard__img::before, .wcard__img::after { content: ""; position: absolute; background-image: inherit; background-position: center; background-repeat: no-repeat; }
.wcard__img::before { inset: -12%; background-size: cover; filter: blur(22px) brightness(.72) saturate(1.15); }
.wcard__img::after { inset: 0; background-size: contain; }
.wcard:hover .wcard__img { transform: scale(1.08); }
.wcard__grade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(30,12,40,.82) 0%, rgba(30,12,40,.05) 55%); opacity: .55; transition: opacity .6s var(--ease); }
.wcard:hover .wcard__grade { opacity: 1; }
.wcard__meta { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; transform: translateY(8px); opacity: .9; transition: transform .6s var(--ease), opacity .6s var(--ease); color: #fff; }
.wcard:hover .wcard__meta { transform: translateY(0); opacity: 1; }
.wcard__cat { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.wcard__name { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.6rem); letter-spacing: -0.02em; margin-top: 5px; color: #fff; }
.wcard--a { grid-column: 1 / 3; grid-row: span 2; }
.wcard--b { grid-column: 3 / 5; grid-row: span 1; }
.wcard--c { grid-column: 5 / 7; grid-row: span 2; }
.wcard--d { grid-column: 3 / 4; grid-row: span 1; }
.wcard--e { grid-column: 4 / 5; grid-row: span 1; }
.wcard--f { grid-column: 1 / 4; grid-row: span 1; }
.wcard--g { grid-column: 4 / 7; grid-row: span 1; }

.work__more { margin-top: clamp(40px, 5vw, 70px); display: flex; justify-content: center; }

/* =============================================================
   TESTIMONIALS
   ============================================================= */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2vw, 28px); }
/* Pozor: tyhle hodnoty drive prebijelo stejnojmenne pravidlo .quote z bloku
   konfiguratoru poptavky, ktery byl niz v souboru - reference na uvodni strance
   se proto vykreslovaly na "bone", ne na "paper". Konfigurator uz na webu neni,
   takze jsou tu hodnoty slouceny tak, aby reference vypadaly presne jako pred
   jeho odstranenim. */
.quote { margin: clamp(30px,5vw,60px) 0; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px,4vw,48px); }
.section--bone .quote { background: #fff; }
.quote__stars { color: var(--magenta); letter-spacing: .2em; font-size: .9rem; }
.quote p { margin-top: 16px; font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink-2); }
.quote__who { margin-top: 20px; font-size: .9rem; color: var(--slate); font-family: var(--body); font-style: normal; }
.quote__who b { color: var(--ink); font-weight: 600; }

/* =============================================================
   CTA band (gradient)
   ============================================================= */
.ctaband { position: relative; background: var(--grad-br); overflow: hidden; }
.ctaband__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(70px, 11vw, 180px) var(--pad-x); position: relative; z-index: 1; text-align: center; }
.ctaband__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 9vw, 9rem); line-height: .92; letter-spacing: -0.04em; color: #fff; }
.ctaband p { margin: clamp(18px,2.4vw,30px) auto 0; max-width: 44ch; color: rgba(255,255,255,.9); font-size: clamp(1rem,1.4vw,1.2rem); }
.ctaband .btn { margin-top: clamp(28px, 3.4vw, 46px); }
.ctaband__heart { position: absolute; opacity: .18; }
.ctaband__heart--1 { width: 40%; top: -10%; left: -6%; transform: rotate(-12deg); }
.ctaband__heart--2 { width: 32%; bottom: -18%; right: -4%; transform: rotate(8deg); }

/* =============================================================
   FOOTER
   ============================================================= */
.footer { background: var(--ink); color: #fff; }
.footer__top { max-width: var(--maxw); margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--pad-x) clamp(40px, 5vw, 60px); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(30px, 4vw, 60px); }
.footer__brand { --logo-h: clamp(26px, 3.4vw, 46px); }
.footer__brand h3 { display: block; line-height: 0; }
.footer__brand h3 img { display: block; width: min(100%, calc(var(--logo-h) * var(--logo-ratio))); height: auto; }
.footer__brand p { margin-top: max(18px, calc(var(--logo-h) * var(--logo-clear))); color: rgba(255,255,255,.66); max-width: 34ch; line-height: 1.6; }
.footer__col h5 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.footer__col a, .footer__col span { display: block; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 2; transition: color .4s var(--ease); width: fit-content; }
.footer__col a:hover { color: var(--coral); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer__bottominner { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--pad-x); display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.5); }
.to-top { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.7); }
.to-top:hover { color: #fff; } .to-top svg { transition: transform .4s var(--ease); } .to-top:hover svg { transform: translateY(-4px); }

.magnetic { display: inline-block; will-change: transform; }

/* =============================================================
   PAGE HEADER (vnitřní stránky)
   ============================================================= */
.pagehead { position: relative; padding: clamp(140px, 20vw, 260px) var(--pad-x) clamp(50px, 8vw, 110px); background: var(--grad-br); overflow: hidden; color: #fff; }
.pagehead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,12,40,.3), rgba(30,12,40,.12)); }
.pagehead__inner { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 1; }
.pagehead__eyebrow { font-family: var(--serif); font-size: clamp(1rem,1.5vw,1.3rem); color: rgba(255,255,255,.9); display: inline-flex; align-items: center; gap: 10px; }
.pagehead__eyebrow .heart { height: 16px; width: auto; }
.pagehead h1 { margin-top: 16px; font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 11vw, 11rem); line-height: .86; letter-spacing: -0.05em; }
.pagehead h1 .line { display: block; overflow: hidden; }
.pagehead h1 .line > span { display: inline-block; }
.has-js:not(.reduce) .pagehead h1 .line > span { transform: translateY(102%); }
.pagehead__sub { margin-top: clamp(20px,2.6vw,34px); max-width: 620px; color: rgba(255,255,255,.9); font-size: clamp(1rem,1.4vw,1.2rem); line-height: 1.6; }

/* =============================================================
   ZÓNOVÉ VIDEO POZADÍ (.pagehead, .ctaband)
   Nahrazuje WebGL gradient (.gl-canvas) v těchto dvou zónách —
   viz js/main.js, sekce 24. Poster drží vzhled do chvíle, než se
   video rozjede; při chybě nebo reduce zůstane poster natrvalo.

   Vrstvy jdou odspodu: ::before (poster) → <video> → <canvas>.
   Video je jen ZDROJ TEXTURY pro canvas — na obrazovku ho pouští
   až fallback .is-raw (bez WebGL, mobil, dotyk). Proto nesmí být
   display: none — prohlížeč by přestal dekódovat snímky a shader
   by neměl co vzorkovat. Průhlednost mu nevadí.

   Ladicí páčky ztmavení textu jsou .pagehead::after / .ctaband::after
   níže, síla čočky (LENS_FLOW, LENS_PULL, LENS_STREAK) sedí
   v js/main.js 4c.
   ============================================================= */
/* Zamerne BEZ overflow: hidden - orez si dela az .pagehead/.ctaband (oba ho maji). */
.zonavideo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.zonavideo__v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  /* scale(1.07) = stejný ořez, jaký si v shaderu bere LENS_ZOOM. Díky tomu
     ukazuje poster, fallbackové video i canvas totožný výřez a při prolnutí
     mezi nimi obraz nepodskočí. V shaderu je ten ořez navíc rezervou, ze
     které si domain warp bere pixely místo rozmazaných okrajů textury. */
  transform: scale(1.07);
  transition: opacity 1.2s var(--ease-io);
}
/* WebGL plátno s čočkou — leží nad videem a kreslí ho i s deformací. */
.zonavideo__gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease-io);
}
.zonavideo.is-gl .zonavideo__gl { opacity: 1; }
/* Fallback: čočka není k dispozici, ukážeme rovnou video. */
.zonavideo.is-raw .zonavideo__gl { display: none; }
.zonavideo.is-raw.is-live .zonavideo__v { opacity: 1; }
/* poster jako podklad — vidíme ho hned, ještě než se video načte */
.zonavideo::before {
  content: ""; position: absolute; inset: 0;
  background: var(--zona-poster) center / cover no-repeat;
  opacity: .95;
  /* stejná rezerva jako u videa, ať se vrstvy kryjí */
  transform: scale(1.07);
}
.hero     .zonavideo { --zona-poster: url("/assets/video/hero-loop-poster.webp"); }
.pagehead .zonavideo { --zona-poster: url("/assets/video/hero-loop-poster.webp"); }
.ctaband  .zonavideo { --zona-poster: url("/assets/video/cta-loop-poster.webp"); }
/* Čitelnost textu. .pagehead::after už existuje výše — jen ho zesilujeme,
   .ctaband scrim neměl vůbec a s videem ho potřebuje. */
.pagehead::after { background: linear-gradient(180deg, rgba(30,12,40,.42), rgba(30,12,40,.20)); }
.ctaband::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Delší smyčka má výraznější tvary než ta původní, proto silnější clona.
     Kdyby byl obraz naopak moc zadušený, sniž .52 směrem k .40. */
  background:
    radial-gradient(115% 85% at 50% 45%, rgba(30,12,40,.52), rgba(30,12,40,.20) 72%),
    linear-gradient(180deg, rgba(30,12,40,.10), rgba(30,12,40,.28));
}
@media (max-width: 820px) {
  /* na mobilu čočku nespouštíme (není kurzor) a scrim posilujeme kvůli menší ploše */
  .ctaband::after { background: linear-gradient(180deg, rgba(30,12,40,.30), rgba(30,12,40,.50)); }
}

/* Breadcrumb-ish index list on work page */
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(30px,4vw,54px); }
.filterbar button { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; transition: all .3s var(--ease); }
.filterbar button:hover { color: var(--ink); border-color: var(--ink); }
.filterbar button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Case study rows (work page) */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,64px); align-items: center; padding: clamp(40px,6vw,90px) 0; border-bottom: 1px solid var(--line-2); }
.case:nth-child(even) .case__media { order: 2; }
.case__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; background: var(--bone-2); }
/* Fotka celá + rozmazaná výplň, viz .wcard__img. */
.case__media .im { position: absolute; inset: 0; background-size: 0 0; background-position: center; transform: scale(1.04); transition: transform 1s var(--ease); }
.case__media .im::before, .case__media .im::after { content: ""; position: absolute; background-image: inherit; background-position: center; background-repeat: no-repeat; }
.case__media .im::before { inset: -12%; background-size: cover; filter: blur(22px) brightness(.72) saturate(1.15); }
.case__media .im::after { inset: 0; background-size: contain; }
.case:hover .case__media .im { transform: scale(1.1); }
.case__index { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--magenta); letter-spacing: .05em; }
.case h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem,3.6vw,3.2rem); letter-spacing: -0.02em; margin-top: 12px; }
.case .cat { font-family: var(--serif); color: var(--slate); margin-top: 8px; display: block; }
.case p { margin-top: 20px; color: var(--slate); max-width: 46ch; line-height: 1.6; }
.case__tags { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.case__tags span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
/* Rozdelana studie jeste nema fotku. Misto rozbiteho obrazku drzi misto srdce
   z loga - podklad uz je neutralni z .case__media. */
.case__heart { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34%; height: auto; opacity: .45; }

/* services deep — accordion/list on sluzby page */
.svcbig { border-top: 1px solid var(--line); }
.svcbig__item { border-bottom: 1px solid var(--line); padding: clamp(28px,4vw,56px) 0; display: grid; grid-template-columns: 80px 1fr 1fr; gap: clamp(20px,3vw,50px); align-items: start; }
/* Cil kotvy z domovske stranky (#sluzba-N): prichod nesmi skoncit pod
   pevnou hlavickou, proto rezerva na jeji vysku. */
.svcbig__item { scroll-margin-top: clamp(96px, 12vh, 130px); }
.svcbig__no { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem,2.4vw,2.4rem); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svcbig h3 { font-family: var(--display); font-weight: 700; font-size: clamp(2rem,4vw,3.4rem); letter-spacing: -0.02em; text-wrap: balance; }
.svcbig h3 + .cat { font-family: var(--serif); color: var(--magenta); margin-top: 8px; display: block; }
.svcbig__desc p { color: var(--slate); line-height: 1.7; }
.svcbig__desc ul:first-child { margin-top: 6px; }
.svcbig__desc ul { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.svcbig__desc li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); font-size: .98rem; }
/* Srdce jako odrazka. Kresli se maskou, ne barevnym PNG - jen tak se da
   prebarvit tokenem (v noci pak zbeli spolu s textem, viz blok NOC). */
.svcbig__desc li::before {
  content: ""; width: 18px; height: 12px; flex: 0 0 auto;
  background: var(--coral);
  -webkit-mask: url("../assets/img/logo/japo-media-symbol-black.svg") no-repeat center / contain;
          mask: url("../assets/img/logo/japo-media-symbol-black.svg") no-repeat center / contain;
  transform: translateY(2px);
}

/* FAQ */
.faq { border-top: 1px solid var(--line); max-width: 980px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(22px,2.6vw,32px) 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem,1.8vw,1.5rem); letter-spacing: -0.01em; color: var(--ink); }
.faq__q .ic { width: 26px; height: 26px; flex: 0 0 auto; position: relative; }
.faq__q .ic::before, .faq__q .ic::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.6px; background: var(--magenta); transition: transform .4s var(--ease); }
.faq__q .ic::after { transform: rotate(90deg); }
.faq__item.is-open .ic::after { transform: rotate(0); }
.faq__a { overflow: hidden; height: 0; }
.faq__a p { padding-bottom: clamp(22px,2.6vw,32px); color: var(--slate); line-height: 1.7; max-width: 70ch; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .services__grid .svc { grid-column: span 6; }
  .work__grid { grid-template-columns: repeat(4, 1fr); }
  .wcard--a { grid-column: 1 / 3; } .wcard--c { grid-column: 3 / 5; }
  .wcard--b { grid-column: 1 / 3; } .wcard--d { grid-column: 3 / 4; }
  .wcard--e { grid-column: 4 / 5; } .wcard--f { grid-column: 1 / 3; } .wcard--g { grid-column: 3 / 5; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav__cta { display: none; }
}
@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .manifesto__grid { grid-template-columns: 1fr; gap: 26px; }
  .quotes { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; }
  .services__grid .svc { grid-column: span 1; min-height: 260px; }
  .work__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 42vw; }
  .wcard { grid-column: auto !important; grid-row: auto !important; }
  .wcard--a, .wcard--c { grid-column: 1 / 3 !important; grid-row: span 2 !important; }
  .case { grid-template-columns: 1fr; }
  .case:nth-child(even) .case__media { order: 0; }
  .svcbig__item { grid-template-columns: 1fr; gap: 14px; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .work__grid { grid-template-columns: 1fr; grid-auto-rows: 62vw; }
  .wcard--a, .wcard--c { grid-column: auto !important; grid-row: span 1 !important; }
  .stats { grid-template-columns: 1fr; }
  .hero__disciplines { gap: 7px; }
  .hero__chip { padding: 6px 10px; font-size: 10px; }
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .line-mask > span, .hero__title .line > span, .pagehead h1 .line > span, .menu__list a, .preloader__mark span { transform: none !important; }
  /* video pozadi zon: zustava jen staticky poster, zadna cocka ani video */
  .zonavideo__v { display: none; }
  .zonavideo__gl { display: none !important; }
  .grain { display: none; }
}

/* ============================================================
   SERVICE SUBPAGES  (svchero, demo widgets, deliverables…)
   ============================================================ */
.svchero { padding: calc(var(--nav-h, 74px) + clamp(50px,9vw,120px)) var(--pad-x) clamp(40px,6vw,80px); }
.svchero__inner { max-width: var(--maxw); margin: 0 auto; }
.crumbs { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: clamp(28px,5vw,60px); }
.crumbs a { color: var(--slate); } .crumbs a:hover { color: var(--magenta); }
.crumbs em { font-style: normal; color: var(--ink); }
.svchero__grid { display: grid; grid-template-columns: minmax(0,0.9fr) 2fr; gap: clamp(20px,4vw,60px); align-items: start; }
.svchero__no { font-family: var(--display); font-weight: 800; font-size: clamp(5rem,16vw,15rem); line-height: .82; letter-spacing: -0.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svchero__kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); color: var(--magenta); font-size: 1.05rem; }
.svchero__kicker .heart { height: 14px; width: auto; }
.svchero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(3rem,9vw,7rem); line-height: .9; letter-spacing: -0.045em; margin: 14px 0 8px; }
.svchero__cat { font-family: var(--serif); color: var(--slate); font-size: 1.15rem; }
.svchero__lead { margin-top: 22px; max-width: 54ch; color: var(--ink-2); font-size: clamp(1rem,1.5vw,1.18rem); line-height: 1.65; }
.svchero__cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

/* demo section */
.demo__title { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem,3.8vw,3rem); letter-spacing: -0.02em; line-height: 1.06; max-width: 20ch; margin-top: 8px; }
.demo__note { margin-top: 16px; color: var(--slate); max-width: 56ch; line-height: 1.6; }
.demo__stage { margin-top: clamp(30px,5vw,60px); }

/* chip buttons (shared control) */
.chipbtns { display: flex; flex-wrap: wrap; gap: 10px; }
.chipbtn { font-family: var(--body); font-size: 13px; letter-spacing: .02em; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 11px 20px; cursor: pointer; transition: all .35s var(--ease); }
.chipbtn:hover { border-color: var(--ink); transform: translateY(-1px); }
.chipbtn.is-active { color: #fff; background: var(--ink); border-color: var(--ink); }

/* deliverables */
.deliv__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.deliv { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.deliv:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -30px rgba(78,26,99,.35); }
.deliv__ic { width: 40px; height: 40px; border-radius: 12px; background: var(--grad); display: grid; place-items: center; margin-bottom: 20px; }
.deliv__ic img { height: 16px; width: auto; }
.deliv h4 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.deliv p { margin-top: 10px; color: var(--slate); font-size: .95rem; line-height: 1.55; }

/* process steps */
.pstep__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; counter-reset: p; }
.pstep { padding: 28px 0 0; border-top: 2px solid var(--ink); }
.pstep__no { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--magenta); }
.pstep h4 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin-top: 14px; }
.pstep p { margin-top: 8px; color: var(--slate); font-size: .92rem; line-height: 1.55; }

/* next services */
.nextsvc__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.nextsvc { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 30px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; transition: all .45s var(--ease); }
.nextsvc span { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem,2.4vw,1.9rem); letter-spacing: -0.02em; }
.nextsvc svg { color: var(--magenta); transition: transform .4s var(--ease); }
.nextsvc:hover { border-color: var(--ink); transform: translateY(-3px); }
.nextsvc:hover svg { transform: translateX(6px); }

/* ---------- GRAFIKA · channel morph ---------- */
.cmorph { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(24px,4vw,56px); align-items: center; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px,4vw,56px); }
.cmorph__stage { display: grid; place-items: center; min-height: 360px; }
.cmorph__frame { position: relative; width: min(100%, 420px); max-height: 460px; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(78,26,99,.5); transition: aspect-ratio .6s var(--ease); }
.cmorph__bg { position: absolute; inset: 0; background: var(--grad-br); }
.cmorph__art { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; text-align: center; padding: 8%; }
.cmorph__logo { --logo-h: clamp(15px,2.6vw,24px); display: block; line-height: 0; }
.cmorph__logo img { display: block; height: var(--logo-h); width: auto; }
.cmorph__tag { font-family: var(--serif); opacity: .92; font-size: 1rem; }
.cmorph__read { margin-top: 22px; font-size: 1.05rem; color: var(--ink); } .cmorph__read b { color: var(--magenta); }
.cmorph__sub { margin-top: 10px; color: var(--slate); line-height: 1.6; max-width: 42ch; }
.cmorph__panel .chipbtns { margin-bottom: 4px; }

/* ---------- VIDEO · reframe + timeline ---------- */
.reframe { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(24px,4vw,56px); align-items: center; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px,4vw,56px); }
.reframe__screen { display: grid; place-items: center; min-height: 380px; }
.reframe__frame { position: relative; width: min(100%, 560px); max-height: 460px; border-radius: 8px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(20,10,30,.6); transition: aspect-ratio .6s var(--ease); }
.reframe__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.reframe__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,8,28,.15), rgba(20,8,28,.5)); }
.reframe__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 66px; height: 66px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--plum); display: grid; place-items: center; cursor: pointer; z-index: 2; transition: transform .4s var(--ease); }
.reframe__play:hover { transform: translate(-50%,-50%) scale(1.08); }
.reframe__badge { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 6px 12px; }
.timeline { margin-top: 26px; user-select: none; }
.timeline__track { position: relative; height: 4px; border-radius: 4px; background: var(--line); cursor: pointer; }
.timeline__fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; border-radius: 4px; background: var(--grad); }
.timeline__head { position: absolute; top: 50%; left: 0%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--magenta); transform: translate(-50%,-50%); box-shadow: 0 4px 12px rgba(201,60,130,.4); }
.timeline__shots { margin-top: 14px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .06em; color: var(--slate); }
.timeline__shots .is-on { color: var(--magenta); font-weight: 600; }

/* ---------- FOTO / PRINT · before-after slider ---------- */
.ba { display: block; }
.ba__stage { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; background: var(--bone-2); touch-action: none; cursor: ew-resize; }
.ba__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ba__before { width: 100%; clip-path: inset(0 50% 0 0); }
.ba__before.ba__img { filter: grayscale(1) contrast(.9) brightness(1.05); }
.ba__tag { position: absolute; top: 14px; z-index: 3; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.42); border-radius: 999px; padding: 6px 12px; }
.ba__tag--l { left: 14px; } .ba__tag--r { right: 14px; }
.ba__handle { position: absolute; top: 0; left: 50%; width: 44px; height: 100%; transform: translateX(-50%); z-index: 4; cursor: ew-resize; display: grid; place-items: center; }
.ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: #fff; }
.ba__handle span { position: relative; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.3); display: grid; place-items: center; }
.ba__handle span::before, .ba__handle span::after { content: ""; position: absolute; width: 0; height: 0; border-block: 5px solid transparent; }
.ba__handle span::before { border-right: 7px solid var(--ink); left: 9px; }
.ba__handle span::after { border-left: 7px solid var(--ink); right: 9px; }

/* crops row */
.crops { margin-top: 28px; }
.crops__lead { color: var(--slate); margin-bottom: 14px; font-family: var(--serif); }
.crops__row { display: grid; grid-template-columns: repeat(3,1fr) 1.4fr; gap: 12px; }
.crop { position: relative; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background-size: cover; }
.crop--wide { aspect-ratio: auto; }
.crop small { position: absolute; left: 10px; bottom: 10px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.4); border-radius: 999px; padding: 5px 10px; }

/* print screen->paper specifics */
.s2p__screen.ba__img { filter: saturate(1.35) brightness(1.05) hue-rotate(-6deg); clip-path: inset(0 50% 0 0); }
.s2p__paper.ba__img { filter: saturate(.8) contrast(.94) brightness(.98) sepia(.1); }
.s2p .ba__stage { background: #efeae3; }

/* jemne podbarveni radku sluzby pri prejeti mysi */
.svcbig__item { transition: background .4s var(--ease); }
.svcbig__item:hover { background: linear-gradient(90deg, rgba(201,60,130,.04), transparent 60%); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .deliv__grid, .pstep__grid { grid-template-columns: repeat(2,1fr); }
  .svchero__grid { grid-template-columns: 1fr; }
  .svchero__no { font-size: clamp(4rem,20vw,8rem); }
}
@media (max-width: 860px) {
  .cmorph, .reframe { grid-template-columns: 1fr; }
  .nextsvc__grid { grid-template-columns: 1fr; }
  .reframe__frame, .cmorph__frame { width: 100%; }
}
@media (max-width: 560px) {
  .deliv__grid, .pstep__grid { grid-template-columns: 1fr; }
  .crops__row { grid-template-columns: repeat(2,1fr); }
  .crop--wide { grid-column: span 2; aspect-ratio: 16/9; }
  .ba__stage { aspect-ratio: 4/5; }
}

/* scroll progress bar (global, injected by JS) */
.scrollprog { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; z-index: 1600; pointer-events: none; will-change: transform; }
.reduce .scrollprog { display: none; }

/* ============================================================
   REALITY — pruh s čísly
   ============================================================ */
.statband__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.statband__item { padding: 34px 0; border-top: 2px solid var(--ink); }
.statband__n { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem,6vw,4.6rem); line-height: 1; letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.statband__n--txt { letter-spacing: -0.02em; }
.statband__item small { display: block; margin-top: 14px; color: var(--slate); font-size: .95rem; max-width: 22ch; }
@media (max-width: 820px) { .statband__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .statband__grid { grid-template-columns: 1fr; } }
/* Varianta se tremi dlazdicemi. Obe pravidla jsou zamerne v media dotazu -
   nepodmineny zapis by jako pozdejsi a stejne specificky prebil breakpointy
   vyse a na mobilu by pruh zustal trisloupcovy.

   Druhy dotaz je presny opak prvniho ("not all and"), ne max-width: 820px.
   Dvojice min-width/max-width by na zlomkovych sirkach mezi nimi (napr. 820,5 px
   pri zoomu) neplatila ani jednou a pruh by spadl zpet na ctyri sloupce se tremi
   dlazdicemi. Takhle je pokryta kazda sirka. */
@media (min-width: 821px) { .statband__grid--tri { grid-template-columns: repeat(3,1fr); } }
@media not all and (min-width: 821px) { .statband__grid--tri { grid-template-columns: 1fr; } }

/* ============================================================
   404
   ============================================================ */
.err { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 140px var(--pad-x) 80px; }
.err__inner { max-width: 720px; }
.err__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); color: var(--magenta); font-size: 1.05rem; }
.err__eyebrow .heart { height: 14px; width: auto; }
.err__code { font-family: var(--display); font-weight: 800; font-size: clamp(6rem,26vw,18rem); line-height: .9; letter-spacing: -0.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 10px 0; }
.err__lead { color: var(--ink-2); font-size: clamp(1.05rem,1.6vw,1.25rem); line-height: 1.6; }
.err__cta { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.err__links { margin-top: 40px; display: flex; gap: 26px; justify-content: center; }
.err__links a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); position: relative; }
.err__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--magenta); transition: width .4s var(--ease); }
.err__links a:hover { color: var(--magenta); } .err__links a:hover::after { width: 100%; }

/* =============================================================
   ROZŠÍŘENÍ v3 — DETAIL PRÁCE (case study) + VYLEPŠENÉ SLUŽBY
   Staví výhradně na stávajících tokenech (:root) a jazyce webu.
   Signature: kinematografický, světlý, holdingový gradient jako akcent.
   ============================================================= */

/* ---------- PROJEKT: hero (kinematografický, tmavý) ---------- */
.prjhero {
  position: relative; min-height: 94svh; display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden; color: #fff;
  padding: calc(var(--nav-h, 74px) + 40px) var(--pad-x) clamp(40px, 6vw, 84px);
  background: var(--plum);
}
.prjhero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.08); will-change: transform; }
.prjhero__grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(24,10,32,.55) 0%, rgba(24,10,32,.12) 34%, rgba(24,10,32,.86) 100%),
    radial-gradient(120% 90% at 30% 20%, rgba(209,52,138,.28), transparent 55%);
}
.prjhero__inner { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; }
.prjhero .crumbs { color: rgba(255,255,255,.72); margin-bottom: clamp(24px,4vw,42px); }
.prjhero .crumbs a { color: rgba(255,255,255,.72); }
.prjhero .crumbs a:hover { color: #fff; }
.prjhero .crumbs em { color: #fff; }
.prjhero__kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: clamp(1rem,1.5vw,1.25rem); color: rgba(255,255,255,.95); }
.prjhero__kicker .heart { height: 14px; width: auto; }
.prjhero__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.7rem, 10vw, 9rem); line-height: .88; letter-spacing: -0.045em; margin: 14px 0 0; max-width: 16ch; }
.prjhero__title .line { display: block; overflow: hidden; }
.prjhero__title .line > span { display: inline-block; }
.has-js:not(.reduce) .prjhero__title .line > span { transform: translateY(103%); }
.prjhero__meta { margin-top: clamp(26px,4vw,44px); display: flex; flex-wrap: wrap; gap: clamp(26px,4vw,60px); }
.prjhero__meta .m { min-width: 90px; }
.prjhero__meta .m span { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.prjhero__meta .m b { display: block; margin-top: 7px; font-family: var(--display); font-weight: 600; font-size: clamp(1rem,1.5vw,1.22rem); letter-spacing: -0.01em; color: #fff; }
.prjhero__scroll { position: absolute; right: var(--pad-x); bottom: clamp(30px,5vw,60px); z-index: 2; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.75); }
.prjhero__scroll .tag { color: rgba(255,255,255,.75); }
.prjhero__scroll i { display: block; width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.7), transparent); }
@media (max-width: 760px){ .prjhero__scroll { display: none; } }

/* ---------- PROJEKT: intro (sticky fakta + velký lead) ---------- */
.prjintro__grid { display: grid; grid-template-columns: 0.8fr 1.7fr; gap: clamp(30px,5vw,80px); align-items: start; }
.prjintro__facts { position: sticky; top: calc(var(--nav-h,74px) + 30px); display: grid; gap: 22px; }
.prjfact { border-top: 1px solid var(--line); padding-top: 16px; }
.prjfact span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); }
.prjfact b { display: block; margin-top: 8px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); }
.prjfact b em { font-style: normal; color: var(--magenta); }
.prjintro__lead { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem,3.4vw,2.7rem); line-height: 1.16; letter-spacing: -0.02em; color: var(--ink); }
.prjintro__lead em { font-family: var(--serif); font-weight: 400; }
.prjintro__lead .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prjintro__body { margin-top: 26px; max-width: 60ch; }
.prjintro__body p { color: var(--slate); font-size: clamp(1rem,1.3vw,1.12rem); line-height: 1.75; }
.prjintro__body p + p { margin-top: 18px; }
@media (max-width: 900px){ .prjintro__grid { grid-template-columns: 1fr; } .prjintro__facts { position: static; grid-template-columns: repeat(2,1fr); } }

/* ---------- PROJEKT: full-bleed feature obrázek (parallax) ---------- */
.prjfeature { position: relative; height: clamp(60vh, 82vh, 900px); overflow: hidden; background: var(--bone-2); }
.prjfeature__im { position: absolute; inset: -8% 0; background-size: cover; background-position: center; will-change: transform; }
.prjfeature__cap { position: absolute; left: var(--pad-x); bottom: 26px; z-index: 2; color: #fff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.32); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 16px; }

/* ---------- PROJEKT: střídavé bloky (výzva / řešení / výsledek) ---------- */
.prjsplit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,72px); align-items: center; }
.prjsplit + .prjsplit { margin-top: clamp(48px,7vw,120px); }
.prjsplit--flip .prjsplit__media { order: 2; }
.prjsplit__media { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background: var(--bone-2); }
.prjsplit__media .im { position: absolute; inset: -6% 0; background-size: cover; background-position: center; will-change: transform; }
.prjsplit__step { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--magenta); }
.prjsplit__h { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem,3.4vw,2.6rem); letter-spacing: -0.02em; line-height: 1.05; margin-top: 14px; }
.prjsplit__p { margin-top: 18px; color: var(--slate); font-size: clamp(1rem,1.3vw,1.1rem); line-height: 1.7; max-width: 46ch; }
.prjsplit__tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.prjsplit__tags span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; }
@media (max-width: 820px){ .prjsplit { grid-template-columns: 1fr; gap: 26px; } .prjsplit--flip .prjsplit__media { order: 0; } }

/* ---------- PROJEKT: tažitelná galerie ---------- */
.prjgal { margin-top: clamp(28px,4vw,50px); }
/* Obal pasu. Sipky v nem sedi absolutne, proto position: relative. */
.prjgal__okno { position: relative; }
/* scroll-snap tu zamerne NENI. S nim se poloha behem tazeni pretahovala zpet
   na okraj dlazdice a pas drhnul; zarovnani na dlazdici resi az sipky, ktere
   dojedou presne na jeji okraj (main.js sekce 20).
   overscroll-behavior brani tomu, aby posun na konci pasu prebral prohlizec
   jako gesto "zpet" nebo jako scroll cele stranky. */
.prjgal__track {
  display: flex; gap: clamp(14px,1.6vw,24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 14px; cursor: grab;
  user-select: none; -webkit-user-select: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.prjgal__track::-webkit-scrollbar { display: none; }
.prjgal__track.is-drag { cursor: grabbing; }
/* Dlazdice se ridi skutecnym tvarem fotky, ne naopak.
   Vsechny maji stejnou VYSKU - to je u vodorovneho pasu podminka, aby
   licovaly - a sirka se dopocita z pomeru stran, ktery dodava komponenta
   v promenne --pomer (components/GalerieProjektu.astro cte rozmery ze
   souboru pri sestaveni). Diky tomu se z fotky neorizne nic a zaroven
   nikde nezbyde prazdne misto.

   Drive tu byl pevny pomer, ktery se stridal (3:2 a 4:5). Klient ale
   nahrava fotky pres /admin a nema jak ovlivnit jejich tvar - portret v
   ramecku na sirku se orizl shora i zdola a zmizela z nej hlava.
   Mimochodem ten pevny pomer stejne nefungoval: rada je flexbox a
   dlazdice se natahly na vysku te nejvyssi, takze 3:2 se nikdy
   neuplatnilo.

   min/max sirka je pojistka na extremni tvary, aby velmi vysoka fotka
   nebyla uzka jako proutek a panorama nezabralo pul obrazovky. Teprve
   tam se zacne orezavat, protoze v tu chvili uz ramecek pomer nedrzi. */
.prjgal__item {
  position: relative; flex: 0 0 auto;
  /* Vyska pasu. Druha mez je kvuli uzkym displejum: kdyby dlazdice zustala
     tak vysoka, nejsirsi fotka v galerii by musela byt sirsi nez obrazovka
     a musela by se oriznout. Timhle se pas na telefonu zkrati presne tak,
     aby se i ta nejsirsi vesla cela.

     Pocita se z nejsirsiho pomeru v teto galerii (--max-pomer-inv dodava
     komponenta), takze galerie plna portretu se zbytecne nezkracuje. */
  height: min(clamp(275px, 40vw, 575px), calc(92vw * var(--max-pomer-inv, .667)));
  aspect-ratio: var(--pomer, 3/2);
  min-width: 130px; max-width: 92vw;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bone-2);
}
.prjgal__item .im { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .9s var(--ease); }
.prjgal__item:hover .im { transform: scale(1.06); }
.prjgal__item small { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.4); border-radius: 999px; padding: 6px 12px; }
/* Sipky na obe strany. V HTML jsou vzdycky, ale ukazou se az kdyz main.js
   pozna, ze se pas do okna nevejde, a prida obalu tridu prjgal--ovladani.
   Bez JS tak nikde neprekazi tlacitko, ktere nic nedela. */
.prjgal__sip {
  position: absolute; top: 50%; z-index: 3;
  display: none; place-items: center;
  width: clamp(40px, 3.2vw, 52px); aspect-ratio: 1;
  margin: 0; padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--magenta);
  box-shadow: 0 10px 26px -14px rgba(78,26,99,.45);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Sipky jsou jen pro mys. Na dotyku se pas posouva prstem, ktery ma vlastni
   setrvacnost - kulate tlacitko by tam navic zakrylo velkou cast fotky.
   Rozhoduje druh ovladani, ne sirka okna: na tabletu i na sirokem telefonu
   je okno klidne pres 700 px, ale mys tam neni. */
@media (hover: hover) and (pointer: fine) and (min-width: 621px) {
  .prjgal--ovladani .prjgal__sip { display: grid; }
}
.prjgal__sip:hover { background: var(--magenta); color: #fff; border-color: var(--magenta); }
.prjgal__sip:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.prjgal__sip--vlevo { left: clamp(6px, .8vw, 14px); }
.prjgal__sip--vpravo { right: clamp(6px, .8vw, 14px); }
/* Na uzkem okne by kulate tlacitko zabralo prilis velkou cast fotky - tam
   staci prst a vlastni setrvacnost prohlizece. */
@media (max-width: 620px) { .prjgal--ovladani .prjgal__sip { display: none; } }

.prjgal__hint { margin-top: 16px; display: flex; align-items: center; gap: 10px; color: var(--ash); font-size: 12px; letter-spacing: .06em; }
.prjgal__hint svg { color: var(--magenta); }
/* Napoveda musi rikat pravdu: kde nejsou sipky, nesmi se nabizet. Prepina se
   za uplne stejne podminky jako ony. Vychozi je varianta bez sipek, aby na
   dotyku nikdy nesvitila nabidka neceho, co tam neni. */
.prjgal__hint-sirka { display: none; }
.prjgal__hint-uzko { display: inline; }
@media (hover: hover) and (pointer: fine) and (min-width: 621px) {
  .prjgal__hint-sirka { display: inline; }
  .prjgal__hint-uzko { display: none; }
}

/* ---------- PROJEKT: použité služby (cross-link) ---------- */
.prjuses__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.prjuse { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; transition: all .45s var(--ease); }
.prjuse b { font-family: var(--display); font-weight: 600; font-size: clamp(1.1rem,1.8vw,1.45rem); letter-spacing: -0.02em; }
.prjuse small { display: block; margin-top: 4px; color: var(--slate); font-size: .82rem; letter-spacing: 0; text-transform: none; }
.prjuse__heart { width: 22px; height: auto; flex: 0 0 auto; opacity: .9; }
@media (max-width: 820px){ .prjuses__grid { grid-template-columns: 1fr; } }

/* ---------- PROJEKT: další projekt (velká hover karta) ---------- */
.prjnext { position: relative; display: block; overflow: hidden; min-height: clamp(340px, 46vw, 560px); color: #fff; }
.prjnext__im { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1.1s var(--ease); }
.prjnext:hover .prjnext__im { transform: scale(1.1); }
.prjnext__grade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,10,32,.5), rgba(24,10,32,.78)); transition: opacity .6s var(--ease); }
.prjnext__inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: clamp(50px,8vw,110px) var(--pad-x); display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; min-height: inherit; }
.prjnext__label { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.prjnext__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem,8vw,7rem); line-height: .92; letter-spacing: -0.04em; margin-top: 14px; }
.prjnext__title .a { display: inline-block; transition: transform .5s var(--ease); }
.prjnext:hover .prjnext__title .a { transform: translateX(10px); }
.prjnext__cat { margin-top: 16px; font-family: var(--serif); color: rgba(255,255,255,.9); font-size: 1.1rem; }

/* ---------- LIGHTBOX (galerie / feature) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1800; display: grid; place-items: center; padding: clamp(20px,5vw,70px); background: rgba(16,8,22,.9); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: min(1200px, 92vw); max-height: 86vh; width: auto; border-radius: var(--radius); box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); transform: scale(.96); transition: transform .5s var(--ease); }
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close { position: absolute; top: clamp(18px,3vw,34px); right: clamp(18px,3vw,34px); width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff; display: grid; place-items: center; transition: background .3s var(--ease); }
.lightbox__close:hover { background: rgba(255,255,255,.24); }
.lightbox__close:focus-visible, .lightbox__sip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Serie: sipky po stranach a pocitadlo dole. Bez serie (jedna fotka) jsou
   schovane. Na uzkem okne jdou sipky do spodnich rohu, aby nezakryvaly
   fotku - listuje se tam hlavne prejetim prstem, sipky jsou zaloha. */
.lightbox__sip {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
  display: none; place-items: center; transition: background .3s var(--ease);
}
.lightbox__sip--vlevo { left: clamp(14px,3vw,34px); }
.lightbox__sip--vpravo { right: clamp(14px,3vw,34px); }
.lightbox__sip:hover { background: rgba(255,255,255,.24); }
.lightbox--serie .lightbox__sip { display: grid; }
.lightbox__pocet {
  position: absolute; left: 50%; bottom: clamp(14px,3vw,28px); transform: translateX(-50%);
  font-family: var(--display); font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,.8);
  display: none;
}
.lightbox--serie .lightbox__pocet { display: block; }
.lightbox__img.is-prepina { opacity: .35; }
.lightbox__img { transition: transform .5s var(--ease), opacity .25s var(--ease); max-height: 86vh; max-height: 86dvh; }
/* Prejeti prstem obsluhuje JS pres pointer udalosti; pinch-zoom zustava
   prohlizeci, ale pan si nebere, jinak by prsty scrollovaly strankou pod. */
.lightbox { touch-action: pinch-zoom; }
html.lightbox-otevren { overflow: hidden; }
@media (max-width: 620px) {
  .lightbox { padding: 16px; }
  .lightbox__img { max-width: 100%; max-height: 78vh; max-height: 78dvh; }
  .lightbox__sip { top: auto; bottom: 14px; transform: none; width: 42px; height: 42px; }
  .lightbox__sip--vlevo { left: 16px; } .lightbox__sip--vpravo { right: 16px; }
  .lightbox__pocet { bottom: 27px; }
}
.reduce .lightbox { transition: none; } .reduce .lightbox__img { transition: none; }

/* =============================================================
   VYLEPŠENÍ STRÁNEK SLUŽEB (svchero glow, benefits, related, faq)
   ============================================================= */
.svchero { position: relative; }
.svchero__glow { position: absolute; z-index: 0; width: clamp(360px, 46vw, 760px); aspect-ratio: 1; right: -8%; top: -18%; border-radius: 50%; background: var(--grad-soft); filter: blur(30px); opacity: .9; pointer-events: none; }
.has-js:not(.reduce) .svchero__glow { animation: svcFloat 16s ease-in-out infinite; }
@keyframes svcFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4%, 4%) scale(1.06); } }
.svchero__inner { position: relative; z-index: 1; }
.svchero__tags { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.svchero__tags span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; background: #fff; }

/* benefits — proč to funguje */
.benefits__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.benefit { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(28px,3vw,40px); position: relative; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.section--bone .benefit { background: var(--bone); }
.benefit::before { content: ""; position: absolute; inset: 0; opacity: 0; background: var(--grad-soft); transition: opacity .5s var(--ease); }
.benefit:hover { transform: translateY(-6px); box-shadow: 0 26px 56px -34px rgba(78,26,99,.4); }
.benefit:hover::before { opacity: 1; }
.benefit__no { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem,4vw,3.2rem); letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.benefit h4 { position: relative; z-index: 1; margin-top: 18px; font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.benefit p { position: relative; z-index: 1; margin-top: 12px; color: var(--slate); font-size: .96rem; line-height: 1.6; }
@media (max-width: 860px){ .benefits__grid { grid-template-columns: 1fr; } }

/* related work — cross-link na projekty */
.relwork__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,20px); }
.relwork { position: relative; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 4/5; background: var(--bone-2); color: #fff; display: block; }
.relwork__im { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); transition: transform .9s var(--ease); }
.relwork:hover .relwork__im { transform: scale(1.09); }
.relwork__grade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24,10,32,.82), rgba(24,10,32,.04) 60%); opacity: .7; transition: opacity .6s var(--ease); }
.relwork:hover .relwork__grade { opacity: 1; }
.relwork__meta { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; transform: translateY(6px); transition: transform .5s var(--ease); }
.relwork:hover .relwork__meta { transform: translateY(0); }
.relwork__cat { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.relwork__name { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem,1.6vw,1.5rem); letter-spacing: -0.02em; margin-top: 5px; }
.relwork__go { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(6px); transition: all .5s var(--ease); }
.relwork:hover .relwork__go { opacity: 1; transform: translateY(0); }
@media (max-width: 860px){ .relwork__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .relwork__grid { grid-template-columns: 1fr; } }

/* enhanced next-service card (obrázkové pozadí) */
.nextsvc { position: relative; overflow: hidden; }
.nextsvc__im { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity .5s var(--ease), transform .8s var(--ease); }
.nextsvc__grade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,10,32,.7), rgba(24,10,32,.25)); opacity: 0; transition: opacity .5s var(--ease); }
.nextsvc:hover .nextsvc__im { opacity: .5; transform: scale(1); }
.nextsvc:hover .nextsvc__grade { opacity: 1; }
.nextsvc > span, .nextsvc > svg { position: relative; z-index: 2; transition: color .4s var(--ease); }
.nextsvc:hover > span { color: #fff; }
.nextsvc:hover > svg { color: #fff; }

/* section lead helper on subpages */
.demo .section__head { margin-bottom: 10px; }

/* responsive tweaks */
@media (max-width: 700px){ .prjuses__grid { grid-template-columns: 1fr; } }

/* =============================================================
   PŘEPÍNAČ PALET (v4) — témata dle design manuálu JAP
   -------------------------------------------------------------
   DŮLEŽITÉ: Výchozí web (bez atributu data-theme, resp. "studio")
   NENÍ nijak změněn — platí původní :root. Následující pravidla se
   aktivují POUZE když je zvoleno jiné téma (opt-in přepnutí barev).
   Vše je řešeno přemapováním stávajících tokenů, layout se nemění.
   ============================================================= */

/* ---------- MANUÁL — světlý, plný brandový gradient (Holding) ---------- */
html[data-theme="manual"] {
  --paper:#ffffff; --bone:#f1f1f1; --bone-2:#e2e2e2;
  --ink:#000000; --ink-2:#1a1a1a;
  --line: rgba(0,0,0,0.12); --line-2: rgba(0,0,0,0.06);
  --slate:#5c5c5c; --ash:#8a8a8a; --faint:#bcbcbc;
  --coral:#f36b44; --rose:#ff9932; --magenta:#cd5db4; --violet:#a12bb0; --plum:#871bc2;
  --grad: linear-gradient(105deg,#f36b44 0%,#ff9932 22%,#cd5db4 55%,#a12bb0 80%,#871bc2 100%);
  --grad-br: linear-gradient(135deg,#f36b44 0%,#ff9932 24%,#cd5db4 58%,#871bc2 100%);
  --grad-soft: linear-gradient(135deg,rgba(243,107,68,.14),rgba(205,93,180,.12) 55%,rgba(135,27,194,.14));
}

/* ---------- FUCHSIA — světlý, fialový akcent (Reality) ---------- */
html[data-theme="fuchsia"] {
  --paper:#ffffff; --bone:#f7f2f6; --bone-2:#efe4ee;
  --ink:#160f18; --ink-2:#2a1f2c;
  --line: rgba(22,15,24,0.12); --line-2: rgba(22,15,24,0.06);
  --slate:#6b5f6c; --ash:#998f9a; --faint:#c7bcc8;
  --coral:#cd5db4; --rose:#d96fb0; --magenta:#a12bb0; --violet:#8f22a0; --plum:#871bc2;
  --grad: linear-gradient(105deg,#cd5db4 0%,#b23fae 45%,#a12bb0 72%,#871bc2 100%);
  --grad-br: linear-gradient(135deg,#cd5db4 0%,#a12bb0 55%,#871bc2 100%);
  --grad-soft: linear-gradient(135deg,rgba(205,93,180,.14),rgba(135,27,194,.14));
}

/* ---------- ORANGE — světlý, oranžový akcent (Development) ---------- */
html[data-theme="orange"] {
  --paper:#ffffff; --bone:#f7f3ef; --bone-2:#efe6dd;
  --ink:#171009; --ink-2:#2b2015;
  --line: rgba(23,16,9,0.12); --line-2: rgba(23,16,9,0.06);
  --slate:#6d6155; --ash:#9a8e82; --faint:#c8bcb0;
  --coral:#f36b44; --rose:#ff9932; --magenta:#f36b44; --violet:#e0562b; --plum:#c2451f;
  --grad: linear-gradient(105deg,#ff9932 0%,#f8814f 45%,#f36b44 75%,#c2451f 100%);
  --grad-br: linear-gradient(135deg,#ff9932 0%,#f36b44 55%,#c2451f 100%);
  --grad-soft: linear-gradient(135deg,rgba(255,153,50,.16),rgba(243,107,68,.12) 55%,rgba(194,69,31,.14));
}

/* ---------- NOC — tmavé téma (brandový gradient jako akcent) ---------- */
html[data-theme="noc"] {
  --paper:#141019; --bone:#1d1626; --bone-2:#271d33;
  --ink:#f4eee9; --ink-2:#ddd4d3;
  --line: rgba(255,255,255,0.14); --line-2: rgba(255,255,255,0.07); --line-w: rgba(255,255,255,0.16);
  --slate:#b6aab2; --ash:#8f8391; --faint:#6f6577;
  /* akcenty a gradient zůstávají brandové (dědí se ze :root) */
}
/* Noc — tmavé plochy, které původně používaly var(--ink) jako pozadí */
html[data-theme="noc"] .nav.is-solid { background: rgba(18,13,24,0.82); }
html[data-theme="noc"] .nav__cta { background:#0c0810; }
html[data-theme="noc"] .btn--ink { background:#0c0810; }
html[data-theme="noc"] .btn--ghost:hover { background:#0c0810; color:#fff; }
html[data-theme="noc"] .btn--light { color:#16110f; }
html[data-theme="noc"] .marquee--ink { background:#0c0810; }
html[data-theme="noc"] .footer { background:#0c0810; }
html[data-theme="noc"] .filterbar button.is-active { background:#0c0810; color:#fff; }
/* Noc — chip tlačítka (byla bílá) */
html[data-theme="noc"] .chipbtn { background: var(--bone-2); color: var(--ink); border-color: var(--line); }
html[data-theme="noc"] .chipbtn.is-active { background: var(--grad-br); color:#fff; border-color: transparent; }
/* Noc — karty, které měly natvrdo bílé pozadí */
html[data-theme="noc"] .section--bone .crewcard,
html[data-theme="noc"] .revs__btn,
html[data-theme="noc"] .section--bone .revs__btn,
html[data-theme="noc"] .section--bone .quote,
html[data-theme="noc"] .section--bone .benefit,
html[data-theme="noc"] .deliv,
html[data-theme="noc"] .nextsvc,
html[data-theme="noc"] .prjuse,
html[data-theme="noc"] .svchero__tags span { background: var(--bone-2); }
html[data-theme="noc"] .s2p .ba__stage { background:#211a2b; }
/* Noc - odrazky na Sluzbach zbeli spolu s textem seznamu */
html[data-theme="noc"] .svcbig__desc li::before { background: #fff; }
/* Noc — jemné doladění zrna, ať nemizí do černé */
html[data-theme="noc"] .grain { mix-blend-mode: screen; opacity:.06; }

/* =============================================================
   Plovoucí přepínač palet (UI)
   ============================================================= */
/* Vlevo dole - vpravo dole sedi tlacitko objednavky (.tallylaunch). */
.themer { position: fixed; left: clamp(14px,2vw,24px); bottom: clamp(14px,2vw,24px); z-index: 140; font-family: var(--body); }
.themer__btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 13px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 14px 34px -18px rgba(30,12,40,.5); cursor: pointer;
  font-size: 12px; letter-spacing: .04em; font-weight: 500;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.themer__btn:hover { transform: translateY(-2px); border-color: var(--ink); }
.themer__swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--grad); flex: 0 0 auto; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.themer__label b { font-weight: 600; }
.themer__label span { color: var(--slate); }
.themer__chev { width: 12px; height: 12px; color: var(--slate); transition: transform .4s var(--ease); }
.themer.is-open .themer__chev { transform: rotate(180deg); }

.themer__panel {
  position: absolute; left: 0; bottom: calc(100% + 12px); width: 264px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(30,12,40,.6); padding: 12px;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: 0 100%;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.themer.is-open .themer__panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.themer__head { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--ash); padding: 6px 8px 10px; }
.themer__opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 12px; cursor: pointer; color: var(--ink);
  transition: background .3s var(--ease);
}
.themer__opt:hover { background: var(--bone); }
.themer__bar { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; border: 1px solid var(--line-2); }
.themer__meta { flex: 1; min-width: 0; }
.themer__meta b { display: block; font-family: var(--display); font-weight: 600; font-size: .98rem; letter-spacing: -0.01em; }
.themer__meta small { color: var(--slate); font-size: .78rem; }
.themer__check { width: 18px; height: 18px; color: var(--magenta); opacity: 0; transform: scale(.6); transition: opacity .3s var(--ease), transform .3s var(--ease); flex: 0 0 auto; }
.themer__opt.is-active .themer__check { opacity: 1; transform: scale(1); }
.themer__opt.is-active { background: var(--bone); }

@media (max-width: 520px){ .themer__label { display: none; } .themer__panel { width: 240px; } }
@media print { .themer { display: none !important; } }
.reduce .themer__btn, .reduce .themer__panel, .reduce .themer__chev, .reduce .themer__check { transition: none; }

/* =============================================================
   Objednávka přes Tally
   Plovoucí tlačítko vpravo dole (přepínač palet sedí vlevo dole),
   vložený formulář na Kontaktu a rezervace termínu na /dekujeme.
   ============================================================= */
.tallylaunch {
  position: fixed; right: clamp(14px,2vw,24px); bottom: clamp(14px,2vw,24px); z-index: 140;
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 14px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: 999px;
  box-shadow: 0 14px 34px -18px rgba(30,12,40,.5); cursor: pointer;
  font-family: var(--body); font-size: 12px; letter-spacing: .04em; font-weight: 500;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tallylaunch:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -18px rgba(30,12,40,.6); }
.tallylaunch__ic { display: inline-flex; }
.tallylaunch__ic svg { width: 18px; height: 18px; }
@media (max-width: 520px) { .tallylaunch__label { display: none; } .tallylaunch { padding: 12px; } }
@media print { .tallylaunch { display: none !important; } }
.reduce .tallylaunch { transition: none; }

/* Formulář vložený do stránky (Kontakt) */
/* Formular je zamerne uzsi nez zbytek stranky (--maxw je 1600px) a vycentrovany.
   Roztazeny pres celou sirku pusobil rozsypane vuci uzkemu uvodnimu textu.
   Bila karta na svetle sedem pozadi sekce ho drzi pohromade; overflow:hidden
   zaroven orizne uvodni obrazek formulare do zaoblenych rohu. */
/* =============================================================
   KONTAKTNÍ FORMULÁŘ (zpráva) — components/FormularZprava.astro
   -------------------------------------------------------------
   Dvě podoby stejného formuláře: "svetly" na Kontaktu (karta na papíru,
   stejná jako objednávkový formulář nad ním) a "tmavy" v CTA pruhu (sklo
   na gradientu, stejné jako karty lidí). Barvy jdou přes proměnné, aby
   pravidla polí byla jen jednou.
   ============================================================= */
.zprava {
  --z-text: var(--ink); --z-pole: rgba(20,8,28,.04); --z-linka: var(--line);
  --z-linka-aktiv: var(--magenta); --z-popisek: var(--slate); --z-pozadi: var(--paper);
  position: relative; text-align: left;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--radius-lg); background: var(--z-pozadi); border: 1px solid var(--z-linka);
  color: var(--z-text);
}
.zprava--svetly { box-shadow: 0 30px 70px -40px rgba(30,12,40,.45); }
.zprava--tmavy {
  --z-text: #fff; --z-pole: rgba(255,255,255,.08); --z-linka: rgba(255,255,255,.26);
  --z-linka-aktiv: #fff; --z-popisek: rgba(255,255,255,.72); --z-pozadi: rgba(20,8,28,.66);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  max-width: 720px; margin: clamp(34px, 4vw, 56px) auto 0;
}
.zprava__obal { max-width: 820px; margin: clamp(26px,3vw,40px) auto 0; }
.zprava__hlava { text-align: center; margin-bottom: clamp(18px, 2vw, 26px); }
.zprava__nadpis { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 1.8vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.15; }
.zprava__podtext { margin-top: 8px; color: var(--z-popisek); font-size: .98rem; line-height: 1.55; max-width: 44ch; margin-left: auto; margin-right: auto; }
.zprava__mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.4vw, 18px); }
.zprava__pole { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zprava__pole--cela { grid-column: 1 / -1; }
.zprava__pole label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--z-popisek); }
.zprava__pole input, .zprava__pole textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--z-text);
  padding: 12px 14px; border-radius: var(--radius); background: var(--z-pole);
  border: 1px solid var(--z-linka); outline: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.zprava__pole textarea { resize: vertical; min-height: 120px; }
.zprava__pole input:focus, .zprava__pole textarea:focus { border-color: var(--z-linka-aktiv); box-shadow: 0 0 0 3px rgba(135,27,194,.16); }
.zprava--tmavy .zprava__pole input:focus, .zprava--tmavy .zprava__pole textarea:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.zprava__pole input:user-invalid, .zprava__pole textarea:user-invalid { border-color: #d64a4a; }
/* Past na roboty: mimo obrazovku, ne display:none - nektere roboty
   display:none poznaji a pole preskoci. */
.zprava__past { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.zprava__captcha { margin-top: clamp(14px, 1.6vw, 20px); min-height: 0; }
.zprava__captcha:empty { display: none; }
.zprava__pata { margin-top: clamp(16px, 1.8vw, 22px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.zprava__gdpr { flex: 1 1 260px; font-size: .8rem; line-height: 1.5; color: var(--z-popisek); }
.zprava__stav { margin-top: 14px; font-size: .92rem; color: var(--z-text); }
.zprava__stav.is-chyba { color: #ff7b7b; }
.zprava--svetly .zprava__stav.is-chyba { color: #c43b3b; }
.zprava.is-odesila { opacity: .85; }
.zprava.is-odesila .btn { pointer-events: none; }
@media (max-width: 620px) {
  .zprava { padding: 20px 16px; }
  .zprava__mrizka { grid-template-columns: 1fr; }
  .zprava__pata { flex-direction: column; align-items: stretch; }
  .zprava__pata .btn { justify-content: center; }
}

.tallyform { margin: clamp(26px,3vw,40px) auto 0; max-width: 820px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 30px 70px -40px rgba(30,12,40,.45); overflow: hidden; }
.tallyform iframe { display: block; width: 100%; border: 0; }
.tallyform__noscript { color: var(--slate); }
.tallyform__noscript a { color: var(--magenta); text-decoration: underline; }

/* Rezervace termínu (/dekujeme) */
.kalendar { margin-top: clamp(26px,3vw,40px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.kalendar iframe { display: block; width: 100%; border: 0; }
.kalendar--nahrada { padding: clamp(28px,4vw,48px); }
.kalendar--nahrada p { font-family: var(--serif); font-size: clamp(1.05rem,1.5vw,1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.kalendar__kontakt { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; }
.kalendar__pozn { margin-top: 22px; font-size: .95rem; color: var(--slate); }
.kalendar__pozn a { color: var(--magenta); }

/* =============================================================
   v5 — KINETICKÉ DOLADĚNÍ (animace + interaktivita)
   Vše je progresivní vylepšení: bez JS/GSAP nebo při reduce
   zůstává obsah plně viditelný a funkční.
   ============================================================= */

/* Auto-skrývání navigace při scrollu dolů */
.nav { transition: transform .55s var(--ease), background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease); }
.nav--hidden { transform: translateY(-118%); }
.reduce .nav--hidden { transform: none; }

/* Kinematografické odkrytí médií (clip-path řídí JS/GSAP) */
.prjfeature, .prjsplit__media, .relwork, .prjgal__item, .case__media { will-change: clip-path; }

/* 3D náklon karet — transition necháme jen na stínu, transform řídí GSAP */
.tilt-card { transition: box-shadow .5s var(--ease) !important; transform-style: preserve-3d; }


/* Pulz na tlačítku přehrání (video demo) */
@keyframes playPulse { 0% { transform: translate(-50%,-50%) scale(1); } 40% { transform: translate(-50%,-50%) scale(.86); } 100% { transform: translate(-50%,-50%) scale(1); } }
.reframe__play.is-press { animation: playPulse .5s var(--ease); }
.reframe__ring { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); transform: translate(-50%,-50%); pointer-events: none; z-index: 2; opacity: 0; }
.reframe__ring.is-go { animation: playRing .7s var(--ease) forwards; }
@keyframes playRing { 0% { opacity:.7; transform: translate(-50%,-50%) scale(1); } 100% { opacity:0; transform: translate(-50%,-50%) scale(2.4); } }

/* Plynulý přechod barev při přepnutí palety */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .5s ease, color .5s ease, border-color .5s ease, box-shadow .5s ease, fill .5s ease, stroke .5s ease !important;
}
.reduce.theme-anim, .reduce.theme-anim * { transition: none !important; }

/* jemné doladění: marquee skew origin */
.marquee__row { transform-origin: center; }

/* =============================================================
   v6 — SIGNATURE „LIVING GRADIENT" (WebGL) + sheen
   Živý tekutý gradient pod obsah gradientových ploch.
   Progresivní vylepšení: bez WebGL / při reduce zůstává
   původní statický gradient (var(--grad-br)).
   ============================================================= */
.gl-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity 1.1s ease; }
.gl-canvas.is-in { opacity: 1; }
.reduce .gl-canvas { display: none !important; }
/* pagehead ztmavení necháme nad canvasem kvůli kontrastu */
.pagehead::after { z-index: 0; }

/* Sheen — světelný přejezd přes velký titulek při odkrytí */
.sheen { position: relative; }
.sheen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  background-size: 250% 100%; background-position: 180% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  mix-blend-mode: screen; opacity: 0;
}
.sheen.is-lit::after { animation: sheenSweep 1.15s cubic-bezier(.22,1,.36,1) .15s both; }
@keyframes sheenSweep { 0% { background-position: 180% 0; opacity: 0; } 12% { opacity: .9; } 100% { background-position: -60% 0; opacity: 0; } }
.reduce .sheen.is-lit::after { animation: none; }

/* =============================================================
   v7 — FEED „Z CHAOSU ŘÁD" (sociální sítě, přepracovaný widget)
   Interaktivní ukázka hodnoty: náhodný feed → poznatelný brand.
   Theme-aware (order dlaždice staví na tokenech), fallback bez JS.
   ============================================================= */
.fx { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1fr); gap: clamp(28px,4.5vw,60px); align-items: center; background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px,4vw,54px); }

/* --- Telefon --- */
.fx__phone { width: min(100%, 334px); margin: 0 auto; background: var(--paper); border: 1px solid var(--line); border-radius: 32px; padding: 12px 12px 16px; box-shadow: 0 44px 74px -42px rgba(78,26,99,.55); position: relative; }
.fx__status { display: flex; justify-content: space-between; align-items: center; padding: 4px 12px 8px; font-size: 11px; font-weight: 600; color: var(--ink); opacity: .7; }
.fx__sig { display: inline-flex; gap: 3px; align-items: flex-end; }
.fx__sig::before, .fx__sig::after { content: ""; width: 3px; border-radius: 2px; background: currentColor; }
.fx__sig::before { height: 6px; } .fx__sig::after { height: 9px; }
.fx__head { display: flex; align-items: center; gap: 11px; padding: 4px 8px 13px; }
.fx__avatar { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto; background: var(--faint); position: relative; overflow: hidden; transition: background .6s var(--ease); display: grid; place-items: center; }
.fx__avatar::after { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .6s var(--ease); }
.fx__avatar img { position: relative; z-index: 1; height: 18px; width: auto; opacity: 0; transition: opacity .5s var(--ease); }
.fx.is-order .fx__avatar { background: var(--grad); }
.fx.is-order .fx__avatar::after { opacity: 1; }
.fx.is-order .fx__avatar img { opacity: 1; }
.fx__id { flex: 1; min-width: 0; }
.fx__id b { display: block; font-size: 14px; letter-spacing: -0.01em; }
.fx__id small { color: var(--slate); font-size: 11.5px; }
.fx__id small span { font-variant-numeric: tabular-nums; }
.fx__check { width: 19px; height: 19px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 11px; flex: 0 0 auto; transform: scale(0); transition: transform .5s var(--back, cubic-bezier(.34,1.56,.64,1)); }
.fx.is-order .fx__check { transform: scale(1); }

/* --- Mřížka dlaždic --- */
.fx__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.fx__tile { position: relative; aspect-ratio: 1; border-radius: 9px; overflow: hidden; transform-origin: center; will-change: transform; background: var(--bone-2); }
.fx__order, .fx__chaos { position: absolute; inset: 0; }
.fx__order::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 32% 26%, rgba(255,255,255,.28), transparent 60%); mix-blend-mode: screen; }
.fx__chaos { opacity: 0; transition: opacity .55s var(--ease); }
.fx.is-chaos .fx__chaos { opacity: 1; }
.fx__grain { position: absolute; inset: 0; opacity: .12; background-image: radial-gradient(rgba(255,255,255,.4) 0.5px, transparent 0.6px); background-size: 3px 3px; mix-blend-mode: overlay; pointer-events: none; }
.fx__like { position: absolute; left: 8px; bottom: 7px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.fx.is-order .fx__tile:hover { transform: translateY(-3px) scale(1.02); z-index: 3; }
.fx.is-order .fx__tile:hover .fx__like { opacity: 1; transform: translateY(0); }

/* order gradientové varianty (brandové makro-rendery) — staví na tokenech */
.fx-g1 { background: radial-gradient(120% 100% at 28% 24%, var(--coral), transparent 56%), linear-gradient(142deg, var(--magenta), var(--plum)); }
.fx-g2 { background: radial-gradient(120% 100% at 72% 38%, var(--magenta), transparent 60%), linear-gradient(205deg, var(--plum), var(--coral)); }
.fx-g3 { background: radial-gradient(120% 110% at 50% 70%, var(--coral), transparent 58%), linear-gradient(120deg, var(--plum), var(--magenta)); }
.fx-g4 { background: radial-gradient(110% 100% at 24% 68%, var(--magenta), transparent 55%), linear-gradient(160deg, var(--coral), var(--plum)); }
.fx-g5 { background: radial-gradient(130% 100% at 70% 26%, var(--coral), transparent 60%), linear-gradient(220deg, var(--magenta), var(--plum)); }
.fx-g6 { background: radial-gradient(120% 100% at 40% 40%, var(--plum), transparent 55%), linear-gradient(135deg, var(--magenta), var(--coral)); }
.fx-g7 { background: radial-gradient(120% 100% at 60% 60%, var(--magenta), transparent 58%), linear-gradient(180deg, var(--plum), var(--coral)); }
.fx-g8 { background: radial-gradient(120% 100% at 30% 50%, var(--coral), transparent 56%), linear-gradient(110deg, var(--plum), var(--magenta)); }
.fx-g9 { background: radial-gradient(120% 100% at 66% 46%, var(--coral), transparent 58%), linear-gradient(200deg, var(--magenta), var(--plum)); }

/* --- Boční panel --- */
.fx__side { max-width: 440px; }
.fx__toggle { display: inline-flex; align-items: center; gap: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 20px 8px 8px; cursor: pointer; margin-bottom: 26px; transition: border-color .35s var(--ease), box-shadow .35s var(--ease); }
.fx__toggle:hover { border-color: var(--ink); }
.fx__track { position: relative; width: 52px; height: 30px; border-radius: 999px; background: var(--line); flex: 0 0 auto; transition: background .45s var(--ease); }
.fx__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.28); transition: transform .45s var(--back, cubic-bezier(.34,1.56,.64,1)); }
.fx.is-order .fx__track { background: var(--grad); }
.fx.is-order .fx__knob { transform: translateX(22px); }
.fx__toggleTxt { font-family: var(--display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }

/* měřič konzistence (kruh) */
.fx__meter { display: flex; align-items: center; gap: 20px; padding: 6px 0 22px; }
.fx__ring { width: 92px; height: 92px; flex: 0 0 auto; transform: rotate(-90deg); }
.fx__ringBg { fill: none; stroke: var(--line); stroke-width: 9; }
.fx__ringFg { fill: none; stroke: var(--magenta); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 215.6; transition: stroke-dashoffset 1.05s cubic-bezier(.22,1,.36,1); }
.fx__meterTxt b { font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem,3.4vw,2.4rem); letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.fx__meterTxt i { font-style: normal; font-weight: 700; font-size: 1.1rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-left: 1px; }
.fx__meterTxt small { display: block; color: var(--slate); font-size: .82rem; margin-top: 2px; }

/* statistiky */
.fx__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 1px solid var(--line); padding-top: 20px; }
.fx__num { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,3.2vw,2.2rem); letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.fx__stat small { color: var(--slate); font-size: .84rem; }
.fx__bar { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 2px; }
.fx__barFill { display: block; height: 100%; width: 29%; border-radius: 999px; background: var(--grad); transition: width 1s cubic-bezier(.22,1,.36,1); }
.fx.is-order .fx__barFill { width: 100%; }

.fx__msg { margin-top: 20px; color: var(--slate); font-size: .96rem; line-height: 1.6; min-height: 3em; }
.fx__msg b { color: var(--ink); font-weight: 600; }

@media (max-width: 860px) { .fx { grid-template-columns: 1fr; } .fx__side { max-width: none; } }
.reduce .fx__chaos, .reduce .fx__ringFg, .reduce .fx__barFill, .reduce .fx__knob, .reduce .fx__avatar, .reduce .fx__check { transition: none; }

/* =============================================================
   v8 — VYLEPŠENÉ INTERAKTIVNÍ UKÁZKY SLUŽEB
   grafika (cmorph) · video (reframe) · foto (ba) · print (s2p)
   Cíl: každá ukázka lépe „prodává" danou disciplínu.
   Vše progresivní: bez JS/GSAP zůstává funkční a čitelné.
   ============================================================= */

/* ---- sdílené: chip s aktivním „pill" pocitem ---- */
.chipbtn { position: relative; }
.chipbtn.is-active { box-shadow: 0 6px 16px -6px rgba(78,26,99,.5); }

/* ---- GRAFIKA · cmorph: obsah se přeskládá podle formátu ---- */
.cmorph__frame { transition: aspect-ratio .65s var(--ease); will-change: aspect-ratio; }
.cmorph__grain { position: absolute; inset: 0; z-index: 1; opacity: .1; background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .6px); background-size: 3px 3px; mix-blend-mode: overlay; pointer-events: none; }
.cmorph__art { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; text-align: center; padding: 11%; transition: padding .55s var(--ease), gap .55s var(--ease); }
.cmorph__logo { transition: height .55s var(--ease); }
.cmorph__tag { transition: opacity .4s var(--ease), font-size .55s var(--ease); }
.cmorph__meta { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: 0; height: 0; overflow: hidden; transition: opacity .4s var(--ease); font-family: var(--body); }
.cmorph__safe { position: absolute; inset: 7%; z-index: 3; border: 1px dashed rgba(255,255,255,.55); border-radius: 5px; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.cmorph__safe.is-show { opacity: 1; }
/* formáty */
.cmorph__frame[data-fmt="story"] .cmorph__art { justify-content: space-between; padding: 16% 11%; }
.cmorph__frame[data-fmt="story"] .cmorph__logo { --logo-h: clamp(16px,3vw,26px); }
.cmorph__frame[data-fmt="poster"] .cmorph__logo { --logo-h: clamp(19px,4vw,34px); }
.cmorph__frame[data-fmt="poster"] .cmorph__art { justify-content: center; gap: 8px; }
.cmorph__frame[data-fmt="poster"] .cmorph__tag { position: absolute; bottom: 9%; font-size: .95rem; }
.cmorph__frame[data-fmt="card"] .cmorph__art { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; padding: 9% 10%; }
.cmorph__frame[data-fmt="card"] .cmorph__logo { --logo-h: clamp(11px,2vw,15px); }
.cmorph__frame[data-fmt="card"] .cmorph__tag { opacity: 0; }
.cmorph__frame[data-fmt="card"] .cmorph__meta { opacity: .82; height: auto; }
.cmorph__frame[data-fmt="card"] .cmorph__art { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; }

/* ---- VIDEO · reframe: rohové značky (crop) + play stav ---- */
.reframe__marks { position: absolute; inset: 9%; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.reframe__marks.is-show { opacity: .9; }
.reframe__marks i { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.9); }
.reframe__marks i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.reframe__marks i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.reframe__marks i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.reframe__marks i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.reframe__img { transition: background-position .6s var(--ease); }
.reframe__play.is-playing svg { opacity: 0; }
.reframe__play.is-playing::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 8px; height: 16px; border-left: 4px solid var(--plum); border-right: 4px solid var(--plum); }
.timeline__track { height: 5px; }
.timeline__shots span { transition: color .3s var(--ease); cursor: pointer; }
.timeline__thumb { position: absolute; bottom: 20px; width: 64px; aspect-ratio: 16/10; border-radius: 6px; background-size: cover; background-position: center; transform: translateX(-50%) translateY(6px) scale(.9); opacity: 0; pointer-events: none; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); border: 2px solid #fff; transition: opacity .3s var(--ease), transform .3s var(--ease); z-index: 5; }
.timeline:hover .timeline__thumb, .timeline.is-scrub .timeline__thumb { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* ---- FOTO / PRINT · před-po: zářivý předěl + štítek ---- */
.ba__handle::before { box-shadow: 0 0 18px rgba(255,255,255,.55); }
.ba__handle span { transition: transform .25s var(--ease); }
.ba.is-drag .ba__handle span, .s2p.is-drag .ba__handle span { transform: scale(1.12); }
.ba__pct { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 5; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.5); border-radius: 999px; padding: 5px 12px; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; }
.ba.is-drag .ba__pct, .s2p.is-drag .ba__pct { opacity: 1; }

/* ---- PRINT · CMYK polotón + pasovací značky (na straně papíru) ---- */
.s2p__halftone { position: absolute; inset: 0; z-index: 2; background-image: radial-gradient(circle, rgba(15,8,20,.62) 32%, transparent 34%); background-size: 6px 6px; mix-blend-mode: multiply; opacity: .44; pointer-events: none; clip-path: inset(0 0 0 50%); }
.s2p__reg { position: absolute; inset: 0; z-index: 3; pointer-events: none; clip-path: inset(0 0 0 50%); }
.s2p__reg i { position: absolute; width: 16px; height: 16px; }
.s2p__reg i::before, .s2p__reg i::after { content: ""; position: absolute; background: rgba(30,15,35,.6); }
.s2p__reg i::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.s2p__reg i::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.s2p__reg i:nth-child(1) { top: 10px; right: 10px; }
.s2p__reg i:nth-child(2) { bottom: 10px; right: 10px; }
.s2p__reg i:nth-child(3) { bottom: 10px; left: 52%; }
.s2p__paper.ba__img { transition: filter .4s var(--ease); }

.reduce .cmorph__frame, .reduce .cmorph__art, .reduce .reframe__img { transition: none; }

/* =============================================================
   KONTAKT v7 — REFERENCE JAKO POSUVNÍK
   -------------------------------------------------------------
   Vzhled karty (.quote) zůstává přesně jako na úvodní stránce.
   Mění se jen to, jak jsou karty naskládané: místo pevné mřížky
   vodorovná dráha se scroll-snapem. Touchpad i dotyk tak fungují
   nativně (žádný vlastní drag), šipky nad sekcí jen volají
   scrollBy(). Bez JS z toho zůstane rolovatelný seznam referencí,
   jen bez šipek a teček.
   ============================================================= */
.revs { position: relative; margin-top: clamp(30px, 5vw, 60px); }
.revs__track {
  --revs-gap: clamp(18px, 2vw, 28px);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--revs-gap)) / 2);
  gap: var(--revs-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  /* stín a obrys karty se nesmí oříznout o hranu dráhy */
  padding: 2px 2px 4px;  margin: -2px -2px -4px;
}
.revs__track::-webkit-scrollbar { display: none; }
.revs__track:focus-visible { outline-offset: 6px; }
/* .quote nese v mřížce svislé okraje — v dráze je řeší .revs */
.revs__track > .quote { margin: 0; scroll-snap-align: start; height: 100%; }

/* Šipky sedí v hlavičce sekce, zarovnané doprava */
.revs__nav { display: inline-flex; gap: 10px; margin-left: auto; }
.revs__btn {
  width: 46px; height: 46px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  display: grid; place-items: center;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease);
}
.section--bone .revs__btn { background: #fff; }
.revs__btn:hover:not([aria-disabled="true"]) { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
/* Na kraji drahy se sipka jen ztlumi. Nepouzivame `disabled`, protoze by
   prohlizec vyhodil fokus na <body> a clovek na klavesnici by z posuvniku
   vypadl - misto toho zustava v poradi tabulatoru a jen nic nedela. */
.revs__btn[aria-disabled="true"] { opacity: .28; cursor: default; }
/* V tmave palete je --ink skoro bila; bez teto vyjimky by po najeti vzniklo
   bile na bilem (pravidlo vyse ma vyssi specificitu nez prebarveni tematu). */
html[data-theme="noc"] .revs__btn:hover:not([aria-disabled="true"]) { background: #0c0810; color: #fff; border-color: #0c0810; }
.revs__btn svg { pointer-events: none; }

/* Tečky: aktivní se protáhne do pilulky s brandovým gradientem */
.revs__dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(22px, 3vw, 34px); }
.revs__dot {
  width: 8px; height: 8px; padding: 0; border-radius: 999px; border: 0;
  background: var(--bone-2);
  transition: background .45s var(--ease);
}
/* Aktivni tecka zustava teckou - jen se obarvi. Drive se roztahovala do
   pilulky a nesla si gradient, ktery se na osmi pixelech slil do sedive
   silmouhy. Plna brandova barva je na tehle velikosti citelna. */
.revs__dot.is-on { background: var(--magenta); }

/* Když se reference vejdou na jednu obrazovku, ovládání nemá co dělat */
.revs--static .revs__nav, .revs--static .revs__dots { display: none; }
.revs--static .revs__track { overflow-x: visible; scroll-snap-type: none; }

@media (max-width: 820px) {
  .revs__track { grid-auto-columns: 88%; }
  .revs__btn { width: 42px; height: 42px; }
}

/* =============================================================
   KONTAKT v7 — ZÁVĚREČNÝ BLOK S FORMULÁŘEM
   -------------------------------------------------------------
   „Pojďme něco vytvořit" bývalo přes celou šířku ve velikosti
   nadpisu stránky. Tady je záměrně drobné a přechodové — má jen
   uvést formulář, ne s ním soupeřit o pozornost.
   ============================================================= */
.formlead { max-width: 52ch; margin: 0 auto; text-align: center; }
.formlead__rule { display: block; width: 54px; height: 3px; border-radius: 999px; background: var(--grad); margin: 0 auto; }
.formlead h2 {
  margin-top: clamp(18px, 2.2vw, 26px);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.06; letter-spacing: -0.025em;
}
.formlead p { margin-top: 14px; color: var(--slate); line-height: 1.7; }
.formlead__links { margin-top: 22px; display: flex; gap: clamp(18px, 3vw, 34px); flex-wrap: wrap; justify-content: center; }
.formlead__links a { font-size: .95rem; color: var(--slate); position: relative; transition: color .35s var(--ease); }
.formlead__links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 0;
  background: var(--magenta); transition: width .4s var(--ease);
}
.formlead__links a:hover { color: var(--magenta); }
.formlead__links a:hover::after { width: 100%; }
.formlead + .tallyform { margin-top: clamp(34px, 5vw, 64px); }

/* =============================================================
   KONTAKT v7 — TLAČÍTKA V HLAVIČCE STRÁNKY
   -------------------------------------------------------------
   Záměrně drobná a tlumená: na gradientu hlavičky mají jen
   naznačit, kam se dá skočit, ne překřičet nadpis. Odhaluje je
   revealHero() v main.js spolu s podtextem; skrytý výchozí stav
   je proto podmíněný třídou .has-js, aby bez JS zůstala vidět.
   ============================================================= */
.pagehead__actions { margin-top: clamp(24px, 3vw, 38px); display: flex; gap: 12px; flex-wrap: wrap; }
.has-js:not(.reduce) .pagehead__actions { opacity: 0; }
.btn--quiet {
  padding: 13px 22px; font-size: 11px;
  border: 1px solid rgba(255,255,255,.42); color: #fff;
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .45s var(--ease), border-color .45s var(--ease),
              color .45s var(--ease), transform .3s var(--ease);
}
.btn--quiet:hover { background: #fff; border-color: #fff; color: var(--ink); transform: translateY(-2px); }
.btn--quiet svg { opacity: .8; }
.btn--quiet:hover svg { opacity: 1; }
/* Globální fokusový kroužek je magenta — jenže ta je zároveň koncová barva
   gradientu hlavičky, takže by na něm zmizel. Tady proto bílý s tmavou
   svatozáří, aby byl vidět nad oranžovým i nad fialovým koncem. */
.btn--quiet:focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px rgba(20,8,28,.45); }
/* V tmavé paletě je --ink skoro bílá, takže by po najetí vznikl bílý text
   na bílé ploše. */
html[data-theme="noc"] .btn--quiet:hover { color: #16110f; }

/* =============================================================
   KONTAKT v7 — MŘÍŽKA FOTOGRAFŮ
   -------------------------------------------------------------
   Osm karet ve dvou řadách po čtyřech. Rozbalení řeší čisté CSS:
   karta je flexový prvek s basis 0, takže stačí zvednout
   flex-grow a řada se sama přepočítá. Sourozenci se nikam
   neztratí — jen se stlačí a ztlumí, takže je pořád vidět, že se
   dá najet na dalšího. Žádný FLIP, žádné překrývání, a tedy ani
   blikání na hranici karet.

   Aktivní stavy jsou tři a NESMÍ platit dva naráz — dvě rozbalené
   karty v jedné řadě by se praly o šířku a obě by zůstaly
   oříznuté. Pořadí přednosti je: myš > klávesnice > klepnutí.
     :hover        — jen na širokém okně s myší (blok níž)
     :focus-within — klávesnice, platí všude
     .is-open      — klepnutí, dopisuje main.js sekce 28, a to
                     jen tam, kde hover nerozbaluje
   ============================================================= */
.crew .section__head { margin-bottom: clamp(14px, 1.8vw, 22px); }
.crew__lead {
  max-width: 60ch; margin-bottom: clamp(34px, 5vw, 62px);
  color: var(--slate); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.7;
}
.crew__grid { --crew-gap: clamp(12px, 1.4vw, 20px); display: flex; flex-direction: column; gap: var(--crew-gap); }
.crewrow { display: flex; gap: var(--crew-gap); align-items: stretch; min-height: clamp(360px, 29vw, 460px); }

.crewcard {
  position: relative; flex: 1 1 0; min-width: 0;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  overflow: hidden; contain: layout paint;
  transition: flex-grow .72s var(--ease), opacity .5s var(--ease), filter .6s var(--ease),
              box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.section--bone .crewcard { background: #fff; }
.section--bone .crewcard__badge { background: #fff; }
html[data-theme="noc"] .section--bone .crewcard__badge { background: var(--bone-2); }
/* Jemná gradientová záplava, která se rozsvítí jen u rozbalené karty */
.crewcard::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--grad-soft); opacity: 0; transition: opacity .6s var(--ease);
}
.crewcard__inner {
  position: relative; z-index: 1; height: 100%;
  display: flex; align-items: center;
  padding: clamp(20px, 2vw, 32px);
}
.crewcard__main {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}

/* Srdce = kotva karty. Při rozbalení se zvětší; postava se ořezává jeho
   tvarem (blok "člověk ve srdci" níže). max-width drží srdce uvnitř
   i ve stlačené kartě.

   Rámeček má nahoře zónu pro vyčuhující hlavu (48 % výšky srdce, stejné
   číslo jako --hlava-nad) a srdce sedí až dole v .crewcard__srdce. Zóna je
   součástí rámečku u všech karet — i bez fotky — takže srdce i jméno jsou
   ve všech kartách stejně vysoko bez ohledu na to, kolik z hlavy vyčuhuje.
   Dřív ji dělal margin-top odvozený od postavy: kratší výřez, který se
   musel propadnout, tak posunul celé srdce i s textem výš než sousedům. */
.crewcard__frame {
  --sirka: clamp(140px, 14.5vw, 212px);
  --vyska: calc(var(--sirka) * 342 / 513);
  position: relative; max-width: 100%;
  width: var(--sirka); aspect-ratio: 513 / 506.16; /* 342 × 1,48 */
  transition: width .72s var(--ease);
}
.crewcard__srdce {
  position: absolute; left: 0; right: 0; bottom: 0; height: 67.568%; /* 1 / 1,48 */
  /* Postava a maska se měří z této krabice (cqw), viz blok "člověk ve srdci". */
  container-type: inline-size;
}
.crewcard__heart { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.crewcard__name {
  margin-top: clamp(16px, 1.6vw, 24px);
  font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
  font-size: clamp(1.05rem, 1.35vw, 1.35rem); color: var(--magenta);
  transition: font-size .72s var(--ease);
}
.crewcard__role { display: block; margin-top: 5px; color: var(--ink); font-size: .98rem; }
.crewcard__short { margin-top: 12px; max-width: 30ch; font-size: .88rem; line-height: 1.65; color: var(--slate); }
.crewcard__badge {
  position: absolute; top: clamp(14px, 1.4vw, 20px); left: clamp(14px, 1.4vw, 20px); z-index: 2;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  background: var(--paper);
}

/* Pravý sloupec. Zavřený má nulovou šířku (flex-grow: 0), takže karta
   vypadá přesně jako portrétová karta na Studiu. Spodní mez šířky vnitřku
   brání tomu, aby se text během rozbalování přeléval po jednom slově. */
.crewcard__detail {
  flex: 0 1 0; min-width: 0; overflow: hidden; opacity: 0;
  display: flex; align-items: center;
  transition: flex-grow .72s var(--ease), opacity .5s var(--ease) .1s;
}
.crewcard__detailin {
  flex: 1 1 auto; width: 100%; min-width: 210px;
  padding-left: clamp(22px, 2.4vw, 38px);
  border-left: 1px solid var(--line-2);
}
.crewcard__text {
  color: var(--ink-2); font-size: clamp(.92rem, 1.05vw, 1rem); line-height: 1.72;
  transform: translateY(10px); opacity: 0;
  transition: transform .6s var(--ease) .12s, opacity .6s var(--ease) .12s;
}
.crewcard__cta {
  margin-top: clamp(20px, 2.2vw, 30px); transform: translateY(10px); opacity: 0;
  transition: transform .6s var(--ease) .2s, opacity .6s var(--ease) .2s;
}

/* ---------- rozbalený stav: klávesnice a klepnutí (platí všude) ---------- */
.crewcard:focus-within, .crewcard.is-open {
  border-color: rgba(135,27,194,.28);
  box-shadow: 0 34px 70px -38px rgba(78,26,99,.5);
}
.crewcard:focus-within::before, .crewcard.is-open::before { opacity: .55; }
.crewcard:focus-within .crewcard__frame,
.crewcard.is-open .crewcard__frame { --sirka: clamp(160px, 16vw, 238px); }
.crewcard:focus-within .crewcard__name,
.crewcard.is-open .crewcard__name { font-size: clamp(1.25rem, 1.75vw, 1.7rem); }
.crewcard:focus-within .crewcard__detail,
.crewcard.is-open .crewcard__detail { flex-grow: 1.15; opacity: 1; }
.crewcard:focus-within .crewcard__text, .crewcard:focus-within .crewcard__cta,
.crewcard.is-open .crewcard__text, .crewcard.is-open .crewcard__cta { transform: none; opacity: 1; }
.crewcard:focus-within .fxm, .crewcard.is-open .fxm { opacity: .9; transform: none; }

/* ---------- rozbalení do šířky: jen tam, kde je na něj místo ----------
   Pod 1181 px (a na dotyku) se karta místo toho rozbaluje dolů — blok
   níž. Kdyby :hover pravidla platila i tam, myš by kartu nechala viset
   v půlce: text by dostal opacity 1, ale mřížka by ho držela na 0fr. */
@media (hover: hover) and (min-width: 1181px) {
  .crewcard:hover, .crewcard:focus-within, .crewcard.is-open { flex-grow: 3.6; }

  /* Aktivní je vždycky nejvýš jedna karta v řadě. Myš přebíjí zapamatovaný
     fokus i klepnutí — poražená karta se musí zavřít celá, ne se jen zúžit. */
  .crewrow:has(.crewcard:hover) .crewcard:not(:hover):not(:focus-within),
  .crewrow:not(:has(.crewcard:hover)):has(.crewcard:focus-within) .crewcard:not(:focus-within),
  .crewrow:not(:has(.crewcard:hover)):not(:has(.crewcard:focus-within)):has(.crewcard.is-open) .crewcard:not(.is-open) {
    flex-grow: 1; opacity: .58; filter: saturate(.35);
  }
  .crewrow:has(.crewcard:hover) .crewcard:not(:hover):not(:focus-within)::before,
  .crewrow:not(:has(.crewcard:hover)):has(.crewcard:focus-within) .crewcard:not(:focus-within)::before { opacity: 0; }
  .crewrow:has(.crewcard:hover) .crewcard:not(:hover):not(:focus-within) .crewcard__detail,
  .crewrow:not(:has(.crewcard:hover)):has(.crewcard:focus-within) .crewcard:not(:focus-within) .crewcard__detail { flex-grow: 0; opacity: 0; }
  .crewrow:has(.crewcard:hover) .crewcard:not(:hover):not(:focus-within) .crewcard__frame,
  .crewrow:not(:has(.crewcard:hover)):has(.crewcard:focus-within) .crewcard:not(:focus-within) .crewcard__frame { --sirka: clamp(140px, 14.5vw, 212px); }
  .crewrow:has(.crewcard:hover) .crewcard:not(:hover):not(:focus-within) .crewcard__name,
  .crewrow:not(:has(.crewcard:hover)):has(.crewcard:focus-within) .crewcard:not(:focus-within) .crewcard__name { font-size: clamp(1.05rem, 1.35vw, 1.35rem); }
  .crewrow:has(.crewcard:hover) .crewcard:not(:hover):not(:focus-within) .fxm,
  .crewrow:not(:has(.crewcard:hover)):has(.crewcard:focus-within) .crewcard:not(:focus-within) .fxm { opacity: 0; transform: scale(.86) rotate(-8deg); }
  .crewrow:has(.crewcard:hover) .crewcard:not(:hover):not(:focus-within) .fxm *,
  .crewrow:not(:has(.crewcard:hover)):has(.crewcard:focus-within) .crewcard:not(:focus-within) .fxm * { animation-play-state: paused; }

  .crewcard:hover { border-color: rgba(135,27,194,.28); box-shadow: 0 34px 70px -38px rgba(78,26,99,.5); }
  .crewcard:hover::before { opacity: .55; }
  .crewcard:hover .crewcard__frame { --sirka: clamp(160px, 16vw, 238px); }
  .crewcard:hover .crewcard__name { font-size: clamp(1.25rem, 1.75vw, 1.7rem); }
  .crewcard:hover .crewcard__detail { flex-grow: 1.15; opacity: 1; }
  .crewcard:hover .crewcard__text, .crewcard:hover .crewcard__cta { transform: none; opacity: 1; }
  .crewcard:hover .fxm { opacity: .9; transform: none; }
  .crewcard:hover .fxm * { animation-play-state: running; }
}

/* ---------- užší okno a dotyk: dvě karty vedle sebe, rozbaluje se dolů ----------
   Horní mez je schválně 1180.98px, aby mezi oběma dotazy nezůstala
   škvíra na zlomkových šířkách okna (např. 1180.5 px při zoomu). */
@media (max-width: 1180.98px) {
  .crewrow { flex-wrap: wrap; min-height: 0; }
  /* flex-grow je 0 zamerne. Dve karty vyplni radek presne, ale lichy zbytek
     (rada po trech = 2 + 1) by se s grow:1 roztahl na celou sirku a vypadal
     jako pruh. Takhle zustane na polovine, licuje s kartou nad sebou. */
  .crewcard { flex: 0 1 calc(50% - var(--crew-gap) / 2); }
  .crewcard__inner { flex-direction: column; }
  .crewcard__main { flex: 0 0 auto; width: 100%; }
  .crewcard__detail {
    flex: 0 0 auto; width: 100%; display: grid; grid-template-rows: 0fr; margin-top: 0;
    transition: grid-template-rows .55s var(--ease), opacity .45s var(--ease), margin-top .55s var(--ease);
  }
  .crewcard__detail > * { overflow: hidden; }
  .crewcard.is-open .crewcard__detail, .crewcard:focus-within .crewcard__detail {
    grid-template-rows: 1fr; opacity: 1; margin-top: clamp(16px, 2.4vw, 24px);
  }
  .crewcard__detailin {
    width: 100%; min-width: 0; padding-left: 0; padding-top: clamp(16px, 2.4vw, 22px);
    border-left: 0; border-top: 1px solid var(--line-2);
  }
  .crewcard.is-open .crewcard__frame, .crewcard:focus-within .crewcard__frame { --sirka: clamp(170px, 26vw, 240px); }
}
@media (max-width: 620px) {
  .crewcard { flex: 1 1 100%; }
}

/* ---------- osamocena karta v neuplne posledni rade ----------
   Sedm lidi po trech = 3 + 3 + 1. Posledni karta je jediny flex prvek ve sve
   rade, takze by se roztahla pres celou sirku a vypadala jako pruh. Drzime ji
   proto na tretine, aby licovala s kartami nad sebou.

   Pravidlo plati jen tam, kde rada opravdu stoji po trech (>= 1181 px). Uzsi
   okna maji vlastni rozvrzeni v bloku vyse a to se tim nesmi prebit.
   Rozbaleni resi druhe pravidlo pres flex-basis, ne pres flex-grow: shorthand
   `flex` vyse uz grow vynuloval a ma vyssi specificitu nez `.crewcard:hover`. */
@media (min-width: 1181px) {
  .crewrow > .crewcard:only-child {
    flex: 0 1 calc((100% - 2 * var(--crew-gap)) / 3);
    /* Zakladni .crewcard ma v prechodu flex-grow, protoze bezna karta roste.
       Osamocena karta ale meni sirku pres flex-basis - bez nej v seznamu by
       se pri najeti rozskocila naraz misto plynuleho rozbaleni. */
    transition: flex-basis .72s var(--ease), opacity .5s var(--ease), filter .6s var(--ease),
                box-shadow .6s var(--ease), border-color .6s var(--ease);
  }
  /* Bez tohodle drzi flex-start karty vlevo (pod prvnim sloupcem). Vycentrujeme
     radu, aby osamocena karta licovala pod prostrednim sloupcem rad nad ni. */
  .crewrow:has(> .crewcard:only-child) { justify-content: center; }
  .crewrow > .crewcard:only-child:hover,
  .crewrow > .crewcard:only-child:focus-within,
  .crewrow > .crewcard:only-child.is-open {
    flex-basis: calc((100% - 2 * var(--crew-gap)) / 3 * 2 + var(--crew-gap));
  }
}

/* =============================================================
   REALITY — velke karty sluzeb
   -------------------------------------------------------------
   Stejny modul jako tym na Kontaktu (.crewrow / .crewcard), jen jinak
   poskladany: hlavicka (otocene srdce + nazev) sedi vlevo nahore a pod ni je
   mrizka nahledu. Chovani (hover, :focus-within, klepnuti pres main.js)
   zustava v puvodnich tridach, aby se Kontakt nemohl rozbit.

   Blok stoji az za vsemi puvodnimi pravidly .crewcard zamerne - stavy maji
   stejnou specificitu (0,3,0), takze rozhoduje poradi v souboru.
   ============================================================= */
.crewrow--velke { min-height: clamp(420px, 34vw, 560px); }

/* Velikost nazvu je na jednom miste, protoze se od ni odvozuje i srdce vedle
   nej - jinak by pri zmene pisma prestaly sedet proporce z navrhu. */
.crewcard--velka { --nazev-velikost: clamp(1.35rem, 2vw, 2rem); }

/* Obsah zacina v levem hornim rohu, ne uprostred karty. Detail vedle nej se
   drzi taky nahore, aby licoval s nazvem. */
.crewcard--velka .crewcard__inner { align-items: stretch; }
.crewcard--velka .crewcard__main {
  align-items: stretch; justify-content: flex-start; text-align: left;
}
.crewcard--velka .crewcard__detail { align-items: flex-start; }

/* ---------- hlavicka: srdce vlevo, nazev a perex vedle nej ---------- */
.crewcard__hlava { display: flex; align-items: flex-start; gap: clamp(10px, 1.1vw, 16px); }
.crewcard__hlavatext { min-width: 0; }

/* Srdce z loga otocene o 90 stupnu (spicka doprava). Kresli se maskou, ne
   barevnym PNG - jen tak se da obarvit tokenem.

   Rotace nemeni misto v layoutu, proto ma vnejsi prvek rovnou rozmery PO
   otoceni a vnitrni ::before je ma prohozene. Po otoceni kolem stredu tak
   presne vyplni box rodice a sousedni text se nikam neposune. Pomer 273:181,5
   je viewBox symbolu. */
.crewcard__znak {
  /* Vyska se odvozuje od nazvu vedle, aby srdce zustalo v proporci z navrhu
     (zhruba jako vyska verzalek) na kazde sirce okna. Odsazeni shora srovna
     hlavicku s hornim okrajem pisma, ne s radkovym boxem.

     Zalozni hodnota patri az do var(), ne do vlastni deklarace - deklarace na
     prvku by zdedenou velikost z karty prebila a srdce by na ni prestalo
     reagovat. */
  --znak-v: calc(var(--nazev-velikost, 1.6rem) * .8);  /* vyska po otoceni */
  --znak-s: calc(var(--znak-v) * 181.52 / 273.02);     /* sirka po otoceni */
  position: relative; flex: 0 0 auto;
  width: var(--znak-s); height: var(--znak-v);
  margin-top: calc(var(--nazev-velikost, 1.6rem) * .1);
}
.crewcard__znak::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--znak-v); height: var(--znak-s);
  transform: translate(-50%, -50%) rotate(-90deg);
  background: var(--coral);
  -webkit-mask: url("../assets/img/logo/japo-media-symbol-black.svg") no-repeat center / contain;
          mask: url("../assets/img/logo/japo-media-symbol-black.svg") no-repeat center / contain;
}

.crewcard--velka .crewcard__name { margin-top: 0; font-size: var(--nazev-velikost); }

/* Hlavicka drzi porad stejnou velikost - i kdyz je karta rozbalena, i kdyz je
   naopak ztlumena vedle rozbalene sousedky. Zakladni modul si velikost nazvu
   ve stavech meni (u tymu na Kontaktu to tak ma byt) a ta pravidla maji az
   specificitu (0,8,0), takze je nestaci prebit jednim slabsim - musi se
   zrcadlit selektor po selektoru s pridanym modifikatorem.

   Bez toho by se nadpis pri najeti zmensoval, zatimco srdce vedle nej zustava
   stejne velke, a proporce 0,8 z navrhu by se rozpadla (u ztlumenych karet by
   srdce bylo dokonce vyssi nez pismo). */
.crewcard--velka:hover .crewcard__name,
.crewcard--velka:focus-within .crewcard__name,
.crewcard--velka.is-open .crewcard__name,
.crewrow:has(.crewcard:hover) .crewcard--velka:not(:hover):not(:focus-within) .crewcard__name,
.crewrow:not(:has(.crewcard:hover)):has(.crewcard:focus-within) .crewcard--velka:not(:focus-within) .crewcard__name {
  font-size: var(--nazev-velikost);
}

.crewcard--velka .crewcard__short { margin-top: 8px; max-width: 34ch; font-size: 1rem; }
/* Perex ma vyhrazenou vysku dvou radku, i kdyz je text jen na jeden. Bez toho
   zacina mrizka nahledu v kazde karte jinde: kratky perex se vejde na radek,
   delsi se na uzsi karte zalomi a fotky pod nim spadnou o radek niz (nejvic
   videt mezi 1181 a ~1300 px, kde rada stoji po trech). Rezerva se pocita
   v em, takze drzi i pri jine velikosti pisma.

   Plati az od 821 px - pod tim je karta na celou sirku, perex se na jeden
   radek vejde vzdycky a rezerva by delala jen praznou mezeru. */
@media (min-width: 821px) {
  .crewcard--velka .crewcard__short { min-height: calc(2 * 1.65em); }
}
.crewcard--velka .crewcard__text { font-size: clamp(1rem, 1.15vw, 1.1rem); }

/* ---------- mrizka nahledu (3-4 fotky z tematu) ----------
   auto-fit slozi prazdne stopy, takze tri i ctyri nahledy vzdycky rovnomerne
   vyplni sirku karty a na uzkem miste se zalomi. */
.crewcard__galerie {
  position: relative;
  margin-top: clamp(20px, 2.4vw, 32px);
  display: grid; grid-template-columns: repeat(var(--fotek, 3), minmax(0, 1fr));
  gap: clamp(8px, .9vw, 14px);
  transition: flex-grow .72s var(--ease);
  /* Vodorovne prejeti obsluhuje had (main.js), svisle zustava scrollu. */
  touch-action: pan-y;
}
/* Behem otoceni hada animuje GSAP transformace; prechod pomeru stran by se
   s nim pral. */
.crewcard__galerie.is-had .crewcard__foto { transition: none; }
.crewcard__foto:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.crewcard__foto--duch { z-index: 1; border-color: transparent; }
/* Sipky hada: sedi na velke fotce (svislou polohu dopocitava JS), videt jen
   v rozbalene karte - v zavrene zadna velka fotka neni. */
.crewcard__sip {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  /* Polopruhledna, aby fotku nezakryvala; rozostreni pozadi drzi sipku
     citelnou i na svetle fotce. Pri najeti plna bila. */
  background: rgba(255,255,255,.5); color: var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -8px rgba(20,8,28,.5);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), background .3s var(--ease);
}
.crewcard__sip--vlevo { left: 10px; }
.crewcard__sip--vpravo { right: 10px; }
.crewcard__sip:hover { background: #fff; }
.crewcard__sip:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; opacity: 1; pointer-events: auto; }
@media (min-width: 821px) {
  .crewcard--velka:hover .crewcard__sip,
  .crewcard--velka:focus-within .crewcard__sip,
  .crewcard--velka.is-open .crewcard__sip { opacity: 1; pointer-events: auto; }
}
/* Prazdna dlazdice zustava jako neutralni misto pro snimek - stejna konvence
   jako u rozdelanych pripadovych studii. */
.crewcard__foto {
  aspect-ratio: 1; border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--bone-2) center / cover no-repeat;
  transition: aspect-ratio .6s var(--ease);
}
/* V noci ma karta sama barvu --bone-2, takze by s ni dlazdice splynula. */
html[data-theme="noc"] .crewcard__foto { background-color: var(--bone); }

/* =============================================================
   REALITY — motivy ve spodku karty
   -------------------------------------------------------------
   Kazda sluzba ma svuj motiv (components/RealitniAnimace.astro), ktery
   vyplni volne misto pod mrizkou nahledu ZAVRENE karty. Ma jediny stav:
   pomalou, nenapadnou smycku, at karta neni mrtva.

   Jakmile se karta rozbali, motiv se sbali do nuly a misto po nem prevezme
   galerie nahledu - viz blok "REALITY - rozbalena karta" nize. Zadna "akce"
   motivu proto neexistuje: v rozbalene karte neni motiv videt, takze by se
   animace nemela komu prehrat.
   ============================================================= */
.rean {
  flex: 1 1 auto; width: 100%; min-height: clamp(110px, 11vw, 175px);
  margin-top: clamp(14px, 1.6vw, 24px);
  display: block; overflow: visible; pointer-events: none;
  color: var(--magenta); opacity: .62;
  transition: opacity .45s var(--ease), color .6s var(--ease),
              flex-grow .72s var(--ease), min-height .72s var(--ease),
              margin-top .72s var(--ease);
}
/* Na siroko ma karta pevnou vysku a motiv si volne misto bere pres flex-grow.
   Nulovy zaklad je tu proto nutny: SVG ma pomer stran, takze pri flex-basis:
   auto by si drzelo vlastni vysku kresby (pres 200 px) a pri rozbaleni karty
   by z ni skocilo rovnou na nulu misto plynuleho sbaleni.

   Uzsi okna to zamerne nemaji - tam ma sloupec prirozenou vysku, zadne volne
   misto k rozdeleni neexistuje a nulovy zaklad by kresbu zbytecne zmensil na
   min-height. */
@media (min-width: 1181px) { .rean { flex-basis: 0; } }

/* Otaceni kolem vlastniho stredu kresby, ne kolem rohu SVG. */
.rean__clona, .rean__lamely,
.rean__vrtule-a, .rean__vrtule-b, .rean__vrtule-c, .rean__vrtule-d,
.rean__civka--a, .rean__civka--b,
.rean__oblouk, .rean__okno, .rean__list { transform-box: fill-box; transform-origin: center; }

@keyframes reanDech    { 0%, 100% { transform: scale(1); } 50% { transform: scale(.93); } }
@keyframes reanKrouzi  { to { transform: rotate(360deg); } }
@keyframes reanVznos   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes reanVanek   { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes reanSvit    { 0%, 100% { stroke-opacity: .5; } 50% { stroke-opacity: .95; } }

/* ---------- klid ---------- */
.rean--foto .rean__clona,
.rean--foto .rean__lamely { animation: reanDech 7s var(--ease-io) infinite; }
.rean--foto .rean__dioda { animation: reanSvit 4.5s var(--ease-io) infinite; }
.rean--video .rean__civka--a,
.rean--video .rean__civka--b { animation: reanKrouzi 14s linear infinite; }
.rean--dron .rean__stroj { animation: reanVznos 5.4s var(--ease-io) infinite; }
.rean--dron .rean__vrtule-a, .rean--dron .rean__vrtule-b,
.rean--dron .rean__vrtule-c, .rean--dron .rean__vrtule-d { animation: reanKrouzi 3.2s linear infinite; }
.rean--vizualizace .rean__okno { animation: reanDech 8s var(--ease-io) infinite; }
.rean--homestaging .rean__list { transform-origin: bottom center; animation: reanVanek 6s var(--ease-io) infinite; }
.rean--homestaging .rean__list--2 { animation-delay: -2.4s; }
.rean--pudorysy .rean__oblouk { transform-origin: right bottom; animation: reanDech 9s var(--ease-io) infinite; }

/* =============================================================
   REALITY — rozbalena karta: motiv pryc, fotky do popredi
   -------------------------------------------------------------
   Zavrena karta ukazuje malou mrizku nahledu a pod ni motiv, ktery
   vyplni zbytek vysky. Po rozbaleni se motiv sbali do nuly a uvolnenou
   vysku prevezme galerie: prvni fotka se roztahne pres celou sirku
   sloupce a zbyle se srovnaji pod ni vedle sebe.

   Pocet sloupcu spodni rady dodava sablona v promenne --fotek-dole
   (pocet nahledu minus ta velka nahore), takze rozvrzeni sedne na tri
   i ctyri fotky bez zasahu do CSS.

   Vsechno je scopnute na .crewcard--velka, aby se karty tymu na
   Kontaktu, ktere sdileji stejny modul, nemohly rozbit.

   Plati az od 821 px. Pod tim je karta na celou sirku a rovnou
   rozbalena (blok nize), takze zadny "zavreny" stav neexistuje a motiv
   tam zustava natrvalo.
   ============================================================= */
@media (min-width: 821px) {
  /* Motiv se sbali do nuly. Vyska se meni pres min-height a flex-grow,
     aby galerie nad nim rostla plynule, ne skokem. */
  .crewcard--velka:hover .rean,
  .crewcard--velka:focus-within .rean,
  .crewcard--velka.is-open .rean {
    flex: 0 0 0; min-height: 0; margin-top: 0; opacity: 0;
  }

  /* Galerie prevezme uvolnene misto. min-height: 0 je nutny - bez nej by ji
     vlastni obsah drzel na prirozene vysce a fr radky by se nedopocitaly. */
  .crewcard--velka:hover .crewcard__galerie,
  .crewcard--velka:focus-within .crewcard__galerie,
  .crewcard--velka.is-open .crewcard__galerie {
    flex: 1 1 0; min-height: 0;
    grid-template-columns: repeat(var(--fotek-dole, 2), minmax(0, 1fr));
    grid-template-rows: 1.75fr 1fr;
  }
  /* Vysku dlazdice urcuje radek mrizky, ne uz pomer stran. */
  .crewcard--velka:hover .crewcard__foto,
  .crewcard--velka:focus-within .crewcard__foto,
  .crewcard--velka.is-open .crewcard__foto { aspect-ratio: auto; }
  .crewcard--velka:hover .crewcard__foto:first-child,
  .crewcard--velka:focus-within .crewcard__foto:first-child,
  .crewcard--velka.is-open .crewcard__foto:first-child { grid-column: 1 / -1; }

  /* Rozbalena karta da fotkam vic sirky nez textu. Zaklad ma 1.15 ve
     prospech textu, coz by fotky nechalo presne tak uzke jako v zavrene
     karte - misto by vzniklo jen na vysku. */
  .crewcard--velka:hover .crewcard__detail,
  .crewcard--velka:focus-within .crewcard__detail,
  .crewcard--velka.is-open .crewcard__detail { flex-grow: .9; }
}

/* Mezi 821 a 1180.98 px se karta rozbaluje DOLU, ne do sirky. Zadna vyska se
   tim neuvolnuje, obsah sloupce ma prirozenou vysku - a fr radky by se v nem
   slozily do nuly. Galerie tu proto drzi pomer stran a karta pod ni proste
   povyroste. */
@media (min-width: 821px) and (max-width: 1180.98px) {
  .crewcard--velka:hover .crewcard__galerie,
  .crewcard--velka:focus-within .crewcard__galerie,
  .crewcard--velka.is-open .crewcard__galerie {
    /* Zpatky na vlastni vysku obsahu. Sloupec tu nema volne misto k
       rozdeleni, takze s nulovym zakladem z bloku vyse by se galerie
       slozila na nulu a fotky by z karty vypadly. */
    flex-basis: auto;
    grid-template-rows: auto auto;
  }
  .crewcard--velka:hover .crewcard__foto,
  .crewcard--velka:focus-within .crewcard__foto,
  .crewcard--velka.is-open .crewcard__foto { aspect-ratio: 16 / 10; }
  .crewcard--velka:hover .crewcard__foto:first-child,
  .crewcard--velka:focus-within .crewcard__foto:first-child,
  .crewcard--velka.is-open .crewcard__foto:first-child { aspect-ratio: 16 / 9; }
}

/* Pod 820 px jdou karty pod sebe a jsou rovnou rozbalene. Na dotyku neni
   hover, takze by delsi text jinak zustal schovany za klepnutim - a nic se
   uz nesmi natrvalo schovat zpatky. */
@media (max-width: 820px) {
  .crewrow--velke .crewcard--velka { flex: 1 1 100%; }
  .crewrow--velke .crewcard--velka .crewcard__detail {
    grid-template-rows: 1fr; opacity: 1; margin-top: clamp(16px, 2.4vw, 24px);
  }
  .crewrow--velke .crewcard--velka .crewcard__text { transform: none; opacity: 1; }
  /* Karta je tu porad rozbalena, takze i galerie ma rozbalenou podobu:
     velka fotka pres celou sirku a rada malych pod ni - rada ctverecku by
     na telefonu byla titerna (to je presne to, co klientovi vadilo). */
  .crewrow--velke .crewcard--velka .crewcard__galerie {
    grid-template-columns: repeat(var(--fotek-dole, 2), minmax(0, 1fr));
  }
  .crewrow--velke .crewcard--velka .crewcard__foto { aspect-ratio: 16 / 10; }
  .crewrow--velke .crewcard--velka .crewcard__foto:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .crewrow--velke .crewcard--velka .crewcard__sip { opacity: 1; pointer-events: auto; }
}

/* =============================================================
   REALITY — road mapa (postup zakazky)
   -------------------------------------------------------------
   Na siroko bezi zleva doprava jako pruh s linkou nad kroky (stejna kresba
   jako .statband), na uzkem okne se preklopi na svislou casovou osu.
   ============================================================= */
.roadmap {
  list-style: none; margin-top: clamp(30px, 4vw, 54px);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 26px);
}
.roadmap__step { position: relative; padding-top: 30px; border-top: 2px solid var(--line); }
/* Kolecko na lince - naznacuje postup a odsazuje jednotlive kroky */
.roadmap__step::before {
  content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px;
  border-radius: 50%; background: var(--grad-br);
}
.roadmap__no { display: block; font-family: var(--display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; color: var(--magenta); }
.roadmap__text { display: block; margin-top: 10px; color: var(--ink-2); font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.5; }

@media (max-width: 820px) {
  .roadmap { grid-template-columns: 1fr; gap: 0; }
  .roadmap__step { padding: 0 0 26px 24px; border-top: 0; border-left: 2px solid var(--line); }
  .roadmap__step:last-child { padding-bottom: 0; }
  .roadmap__step::before { top: 0; left: -7px; }
}

/* =============================================================
   KONTAKT v7 — MOTIVY (pohyblivé kresby kolem srdce)
   -------------------------------------------------------------
   POZOR na pořadí: `animation-play-state: paused` musí stát AŽ ZA
   všemi zkratkami `animation: ...`. Zkratka totiž nevypsané části
   resetuje na výchozí hodnotu, takže dřív zapsané zastavení by
   zase přepsala na `running` — a všech osm motivů by se točilo
   pořád dokola, i když je karta zavřená a kresba neviditelná.

   Při prefers-reduced-motion je globální pravidlo výše v souboru
   zkrátí na nulu, takže zůstane jen statická kresba.
   ============================================================= */
.fxm {
  position: absolute; inset: -19%; width: 138%; height: 138%;
  pointer-events: none; overflow: visible; color: var(--magenta);
  opacity: 0; transform: scale(.86) rotate(-8deg);
  transition: opacity .6s var(--ease) .05s, transform .85s var(--ease) .05s;
}

@keyframes fxSpin     { to { transform: rotate(360deg); } }
@keyframes fxSpinBack { to { transform: rotate(-360deg); } }
@keyframes fxIris     { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(30deg) scale(.82); } }
@keyframes fxBurst    { 0% { transform: scale(.55); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes fxRay      { 0%, 100% { opacity: .25; } 12% { opacity: 1; } }
@keyframes fxSweep    { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }
@keyframes fxGlow     { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
@keyframes fxDraw     { 0% { stroke-dashoffset: 300; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes fxDrift    { to { stroke-dashoffset: -64; } }
@keyframes fxBob      { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes fxScan     { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .8; } 90% { opacity: .8; } 100% { transform: translateY(158px); opacity: 0; } }
@keyframes fxHead     { 0% { transform: translateX(0); } 100% { transform: translateX(158px); } }
@keyframes fxClipIn   { 0% { transform: translateX(-14px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
@keyframes fxPerf     { to { transform: translateY(-38px); } }

/* Rotace se točí kolem středu čtverce, ne kolem rohu SVG */
.fxm__spin-s, .fxm__iris, .fxm__blades, .fxm__rim, .fxm__tick,
.fxm__shutter, .fxm__sweep, .fxm__burst, .fxm__craft { transform-origin: 100px 100px; transform-box: view-box; }

.fxm__spin-s { animation: fxSpin 26s linear infinite; }
.fxm__iris   { animation: fxIris 4.6s var(--ease-io) infinite; }
.fxm__blades { animation: fxIris 4.6s var(--ease-io) infinite reverse; }

.fxm__burst    { animation: fxBurst 2.4s var(--ease) infinite; }
.fxm__burst--2 { animation-delay: 1.2s; }
.fxm__rays path { animation: fxRay 2.4s linear infinite; }
.fxm__rays path:nth-child(1) { animation-delay: 0s; }
.fxm__rays path:nth-child(2) { animation-delay: .1s; }
.fxm__rays path:nth-child(3) { animation-delay: .2s; }
.fxm__rays path:nth-child(4) { animation-delay: .3s; }
.fxm__rays path:nth-child(5) { animation-delay: .4s; }
.fxm__rays path:nth-child(6) { animation-delay: .5s; }
.fxm__rays path:nth-child(7) { animation-delay: .6s; }
.fxm__rays path:nth-child(8) { animation-delay: .7s; }

.fxm__sweep  { animation: fxSweep 5.2s var(--ease-io) infinite; }
.fxm__bounce { animation: fxGlow 5.2s var(--ease-io) infinite; }

.fxm__room path { stroke-dasharray: 300; animation: fxDraw 4.4s var(--ease) infinite; }
.fxm__room path:nth-child(2) { animation-delay: .12s; }
.fxm__room path:nth-child(3) { animation-delay: .24s; }
.fxm__room path:nth-child(4) { animation-delay: .36s; }
.fxm__room path:nth-child(5) { animation-delay: .48s; }
.fxm__room path:nth-child(6) { animation-delay: .6s; }
.fxm__horizon { animation: fxDrift 3.6s linear infinite; }

.fxm__shutter { animation: fxIris 3.4s var(--ease-io) infinite; }
.fxm__rim     { animation: fxGlow 3.4s var(--ease-io) infinite; }
.fxm__tick    { animation: fxSpin 12s linear infinite; }

.fxm__perf rect { animation: fxPerf 1.5s linear infinite; }
.fxm__scan      { animation: fxScan 3.4s var(--ease-io) infinite; }

.fxm__craft    { animation: fxBob 3.6s var(--ease-io) infinite; }
.fxm__rotor    { transform-box: fill-box; transform-origin: center; animation: fxSpin .9s linear infinite; }
.fxm__rotor--b { animation: fxSpinBack .9s linear infinite; }
.fxm__ground   { animation: fxDrift 2.6s linear infinite; }

.fxm__clip    { transform-box: fill-box; transform-origin: left center; animation: fxClipIn 4.2s var(--ease) infinite; }
.fxm__clip--2 { animation-delay: .12s; }
.fxm__clip--3 { animation-delay: .24s; }
.fxm__clip--4 { animation-delay: .36s; }
.fxm__clip--5 { animation-delay: .48s; }
.fxm__clip--6 { animation-delay: .6s; }
.fxm__head    { animation: fxHead 4.2s var(--ease-io) infinite; }

/* AŽ TEĎ, za všemi zkratkami: ve výchozím stavu všechno stojí.
   Zavřená karta tak nestojí ani takt procesoru, i když jich je osm.

   Selektor je schválně .crewcard .fxm *, ne .fxm * — tři pravidla výše
   (.fxm__rays path, .fxm__room path, .fxm__perf rect) míří na prvek, takže
   mají specificitu (0,1,1) a samotné .fxm * (0,1,0) by přebila. Přidaná
   třída dává (0,2,0) a přebíjí je zpátky; stavy níž mají (0,3,0) a vyhrají. */
.crewcard .fxm * { animation-play-state: paused; }
.crewcard:focus-within .fxm *, .crewcard.is-open .fxm * { animation-play-state: running; }

/* Tlačítko se šipkou dolů míří na sekci níž — ať se hýbe stejným směrem. */
.btn--down:hover svg { transform: translateY(4px); }

/* =============================================================
   v8 — ZÁVĚREČNÝ PRUH: LIDÉ (srdce jako odkaz na formulář)
   -------------------------------------------------------------
   Srdce je ze stejné palety jako gradient pod ním, takže by na
   něm samo o sobě zaniklo — hlavně jeho tmavý střed. Sedí proto
   na matném skleněném podstavci a má za sebou jemnou světelnou
   záři: plocha se prosvětlí přesně tam, kde je potřeba, aniž
   bychom do gradientu vrazili bílou kartu.

   Rámeček má poměr stran přesně podle vektoru loga (513×342),
   takže srdce vyplní plochu bez prázdných pásů nad a pod. Nechává
   si overflow: visible — až placeholder nahradí skutečná fotka,
   postava může ze srdce vystupovat ven.
   ============================================================= */
/* Tlacitko pod srdcickami je inline-flex, takze se jeho vlastni margin-top
   schova do radkoveho boxu a mezera vyjde sotva 12 px. Odstup drzi proto
   blokovy prvek nad nim. */
.ctacrew { margin-top: clamp(40px, 6vw, 82px); margin-bottom: clamp(26px, 3.4vw, 46px); }
.ctacrew__label {
  display: inline-block; margin-bottom: clamp(20px, 2.6vw, 30px);
  padding: 7px 15px; border-radius: 999px;
  background: rgba(20,8,28,.5); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.94);
}
.ctacrew__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
}
.ctacrew__item { flex: 0 1 clamp(236px, 20vw, 266px); display: flex; }
/* Karta uz neni odkaz (uvnitr ma klikaci e-mail, telefon a tlacitko), proto
   se pri najeti nezveda ani nezvyraznuje - jen se pousmeje srdce nize. */
.ctacrew__card {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(22px, 2.4vw, 32px) clamp(16px, 2vw, 24px) clamp(18px, 2vw, 24px);
  border-radius: var(--radius-lg);
  background: rgba(20,8,28,.66);
  border: 1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
}

/* Rozmery se pocitaji z jedine promenne --sirka, aby se od nich dal odvodit
   i presah postavy. V procentech to nejde: procentualni margin-top se pocita
   ze SIRKY rodice, ne z vysky, a vysledek by pak zavisel na sirce karty. */
.ctacrew__frame {
  --sirka: clamp(126px, 12.5vw, 172px);
  --vyska: calc(var(--sirka) * 342 / 513);
  position: relative; display: block; overflow: visible;
  /* Nahore zona pro vycuhujici hlavu (48 % vysky srdce = --hlava-nad),
     srdce sedi dole v .ctacrew__srdce - stejne jako karty tymu na Kontaktu,
     aby srdce i jmeno byly u vsech stejne vysoko. */
  width: var(--sirka); aspect-ratio: 513 / 506.16; /* 342 x 1,48 */
  margin-bottom: clamp(16px, 1.8vw, 22px);
  /* Zvetseni pri najeti sedi na ramecku, ne na srdci a postave zvlast -
     jinak by se rozjely, protoze kazde ma jiny pocatek otaceni. Takhle se
     hybou jako jeden kus. */
  transition: transform .55s var(--ease);
}
.ctacrew__card:hover .ctacrew__frame { transform: scale(1.06); }
.ctacrew__srdce {
  position: absolute; left: 0; right: 0; bottom: 0; height: 67.568%; /* 1 / 1,48 */
  container-type: inline-size;
}
/* Světelná záře pod srdcem — dává tmavému středu kontrast proti gradientu */
.ctacrew__srdce::before {
  content: ""; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 104%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), rgba(255,255,255,0) 70%);
}
.ctacrew__heart {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain;
}
/* =============================================================
   ČLOVĚK VE SRDCI — společně pro karty týmu i pro CTA pruh
   -------------------------------------------------------------
   Výřez s průhledným pozadím stojí PŘED srdcem a přesahuje ho nahoru, takže
   člověku vyčuhuje hlava a ramena ven. Pod hranicí 26 % výšky srdce je
   vidět jen uvnitř obrysu srdce, takže se cokoli přetékajícího — typicky
   lokty — samo usekne a nikde nevznikne viditelná hrana řezu.

   VŠECHNO SE POČÍTÁ Z POSTAVY, NE Z PLÁTNA FOTKY.
   Komponenty k tomu dodávají hodnoty změřené při sestavení z alfa kanálu
   (--p-stred, --p-vrch, --hlava-inv, --pomer-hv; viz lib/obrysPostavy.mjs).
   Je proto jedno, jak klient výřez ořízne nebo kam ho na plátno posadí.

   PROČ SE MĚŘÍTKO ODVOZUJE OD HLAVY:
   Výřezy se hodně liší podle pózy a ořezu — poměr výška/šířka jde od 1,42
   (lokty od těla, ořez v pase) po 3,01 (ruce u těla, ořez po kolena). Při
   stejné šířce obálky by jedna hlava vyšla dvakrát větší než druhá a řada
   lidí by vypadala rozbitě. Podle hlavy vyjdou všichni stejně velcí a
   stejně vysoko nad srdcem; rozdíly v póze se projeví jen šířkou, což je
   přirozené.

   Dvě čísla, kterými se to řídí:
     --hlava-cil  šířka hlavy vůči šířce srdce
     --hlava-nad  jak vysoko je temeno nad horní hranou srdce (podíl výšky)

   Hranice, odkud dolů se ořezává tvarem srdce, je 26 % jeho výšky a je
   zapečená v masce (assets/img/logo/srdce-maska-s-pruhem.svg). Je záměrná:
   srdce má nahoře mezi laloky výkroj, který sahá přesně do 26 % (změřeno
   z alfa kanálu loga). Kdyby maska začínala výš, výkroj by ukousl kus
   ramene.

   Převrácené hodnoty (--hlava-inv, --pomer-hv) se předávají proto, že dělení
   proměnnou v calc() některé prohlížeče neberou; násobit se dá vždycky.
   ============================================================= */
.crewcard__frame--osoba,
.ctacrew__frame--osoba {
  --hlava-cil: .22;
  --hlava-nad: .48; /* musí sedět s poměrem rámečku 513 / (342 × 1,48) */

  /* Skutečná šířka a výška srdce. Bez cqw se bere --sirka, což sedí, dokud
     rámeček nikdo nestlačí; přepis níže v @supports. */
  --srdce-s: var(--sirka);
  --srdce-v: var(--vyska);

  --obr-s: calc(var(--srdce-s) * var(--hlava-cil) * var(--hlava-inv, 4.5));
  --obr-v: calc(var(--obr-s) * var(--pomer-hv, 1.5));
  /* Kde v obrázku začíná temeno. */
  --p-vrch-px: calc(var(--obr-v) * var(--p-vrch, 0));
  /* Kam by postava sedla podle temene — to je ten obvyklý případ. */
  --kotva-vrch: calc(-1 * var(--hlava-nad) * var(--srdce-v) - var(--p-vrch-px));
  /* Nejvýš, kam smí sednout, aby spodní hrana fotky dosáhla pod špičku srdce
     a obrys ji schoval.

     Většina výřezů sahá hluboko pod srdce (u nahraných fotek 10 až 155 px),
     takže se to neuplatní. Ale výřez oříznutý v pase končí UVNITŘ srdce a
     jeho rovná spodní hrana by byla vidět — tomu se dá vyhnout jen tím, že
     se postava o ten kus propadne. Daní je, že takový člověk má hlavu níž
     než ostatní; lepší řešení je nahrát fotku oříznutou aspoň v půli stehen. */
  --dno-vrch: calc(var(--srdce-v) - var(--obr-v));
  --obr-vrch: max(var(--kotva-vrch), var(--dno-vrch));
}
/* Postava a maska se měří ze SKUTEČNÉ šířky krabice srdce, ne z --sirka.
   Karta týmu se při rozbalení souseda stlačí a max-width rámeček zmenší
   pod --sirka — postava počítaná z --sirka pak byla větší než srdce a maska
   seděla vedle. S cqw jde všechno z jedné míry a při rozbalování se srdce,
   postava i maska hýbou jako jeden kus (bez vlastních přechodů na fotce).
   Prohlížeče bez cqw (Safari < 16) zůstávají u --sirka. */
@supports (width: 1cqw) {
  .crewcard__frame--osoba,
  .ctacrew__frame--osoba { --srdce-s: 100cqw; --srdce-v: calc(100cqw * 342 / 513); }
}

.crewcard__osoba,
.ctacrew__osoba {
  position: absolute; left: 50%; top: var(--obr-vrch);
  width: var(--obr-s); height: auto; max-width: none;
  aspect-ratio: var(--pomer, .667);
  /* Vodorovně se centruje STŘED POSTAVY, ne střed plátna. */
  transform: translateX(calc(var(--p-stred, .5) * var(--obr-s) * -1));
  pointer-events: none;

  /* Maska je JEDEN tvar: pruh odshora až k 26 % výšky srdce + obrys srdce,
     obojí v jednom SVG. Postava je nad hranicí vidět celá, pod ní jen
     uvnitř srdce.

     Dřív to byly dvě vrstvy (gradientový pruh + srdce) sečtené přes
     mask-composite: add. WebKit — Safari, a na iPhonu i každý jiný
     prohlížeč — ale vícevrstvou masku omezí na plochu poslední vrstvy:
     nad srdcem nevykreslil nic a lidem usekl hlavu. Jednovrstvá SVG maska
     funguje všude, proto je pruh součástí SVG.

     SVG je 3× širší a 3× vyšší než srdce: srdce sedí dole uprostřed, pruh
     nad ním sahá dvě výšky srdce nahoru a do stran o šířku srdce na každou
     stranu. To s rezervou pokryje každý výřez — temeno bývá nad srdcem
     nejvýš ~1,2 výšky, do šířky plátno fotky nepřesáhne ~1,3 šířky srdce.

     Kde v obrázku leží srdce: obrázek je posunutý tak, aby střed postavy
     seděl na středu srdce, a maska se posouvá s ním — musí se proto počítat
     ze stejného posunu, ne ze středu plátna. */
  --srdce-x: calc(var(--p-stred, .5) * var(--obr-s) - var(--srdce-s) / 2);
  --srdce-y: calc(var(--obr-vrch) * -1);
  -webkit-mask-image: url("../assets/img/logo/srdce-maska-s-pruhem.svg");
          mask-image: url("../assets/img/logo/srdce-maska-s-pruhem.svg");
  -webkit-mask-size: calc(3 * var(--srdce-s)) calc(3 * var(--srdce-v));
          mask-size: calc(3 * var(--srdce-s)) calc(3 * var(--srdce-v));
  -webkit-mask-position: calc(var(--srdce-x) - var(--srdce-s)) calc(var(--srdce-y) - 2 * var(--srdce-v));
          mask-position: calc(var(--srdce-x) - var(--srdce-s)) calc(var(--srdce-y) - 2 * var(--srdce-v));
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.ctacrew__text { display: flex; flex-direction: column; align-items: center; min-width: 0; padding-bottom: clamp(16px, 1.8vw, 22px); }
.ctacrew__name {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.15rem); letter-spacing: -0.01em; line-height: 1.2; color: #fff;
}
.ctacrew__role { display: block; margin-top: 4px; font-size: .88rem; color: rgba(255,255,255,.9); }
/* Klikací e-mail a telefon — stejné chování jako v kartách týmu na Kontaktu
   (.crewkont a), jen bíle na skle. Dlouhý e-mail se smí zalomit uvnitř
   slova, jinak by v užší kartě přetekl. */
.ctacrew__kont { display: flex; flex-direction: column; align-items: inherit; gap: 3px; margin-top: 10px; }
.ctacrew__kontlink {
  position: relative; font-size: .84rem; line-height: 1.4; color: rgba(255,255,255,.88);
  overflow-wrap: anywhere; transition: color .35s var(--ease);
}
.ctacrew__kontlink::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: #fff; transition: width .4s var(--ease);
}
.ctacrew__kontlink:hover { color: #fff; }
.ctacrew__kontlink:hover::after { width: 100%; }
.ctacrew__kontlink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
/* Tlačítko na poptávku drží spodek karty (margin-top: auto), takže je ve
   všech třech kartách stejně nízko i při různě dlouhých údajích. Vzhled
   podle .btn--light, jen menší. */
.ctacrew__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  margin-top: auto; padding: 11px 20px; border-radius: 999px;
  background: #fff; color: var(--ink);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .4s var(--ease);
}
.ctacrew__btn svg { transition: transform .4s var(--ease); }
.ctacrew__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(20,8,28,.8); }
.ctacrew__btn:hover svg { transform: translateX(4px); }
.ctacrew__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 700px) {
  /* Na mobilu na výšku by tři karty pod sebou byly zbytečně dlouhé —
     překlopí se proto na řádek: srdce vlevo, vedle jméno, role a kontakty,
     tlačítko na celou šířku pod nimi. */
  .ctacrew__item { flex: 1 1 100%; }
  .ctacrew__card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 14px 18px 16px; text-align: left; }
  .ctacrew__frame { --sirka: 92px; margin-bottom: 0; flex: 0 0 auto; }
  .ctacrew__text { flex: 1 1 0; align-items: flex-start; padding-bottom: 0; }
  .ctacrew__btn { flex: 1 1 100%; margin-top: 14px; }
}

/* =============================================================
   v8 — KONTAKTNÍ ÚDAJE V KARTĚ FOTOGRAFA
   ============================================================= */
.crewkont {
  margin-top: clamp(16px, 1.8vw, 22px); padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--line-2);
  display: grid; gap: clamp(9px, 1vw, 12px);
}
.crewkont__row { display: grid; grid-template-columns: minmax(58px, auto) 1fr; gap: 2px 14px; align-items: baseline; }
.crewkont dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.crewkont dd { margin: 0; font-size: clamp(.88rem, .95vw, .96rem); line-height: 1.4; }
.crewkont a { position: relative; color: var(--ink); transition: color .35s var(--ease); }
.crewkont a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--magenta); transition: width .4s var(--ease);
}
.crewkont a:hover { color: var(--magenta); }
.crewkont a:hover::after { width: 100%; }