/* ==========================================================================
   SOULISTKA - HOMEPAGE ulmanova.com
   WordPress + OHIO + WPBakery | předloha Neiden
   Vložit: WPBakery editor stránky > ozubené kolo (Page settings) > Custom CSS
   Předpona tříd: su-   |   Bez JavaScriptu, pouze CSS (Flexbox / Grid)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. OHIO - plná šířka a čistě bílé pozadí jen pro tuto stránku
   (page-id = nová homepage; :has() jako pojistka po změně ID)
   -------------------------------------------------------------------------- */
body.page-id-230898,
body.page-id-230898 #content.site-content,
body:has(.su-hero),
body:has(.su-hero) #content.site-content { background-color: var(--bg-page); }
body.page-id-230898 .page-container,
body:has(.su-hero) .page-container { max-width: none; padding-left: 0; padding-right: 0; }
body.page-id-230898,
body:has(.su-hero) { overflow-x: clip; }   /* mobilní menu OHIO přesahuje o 20 px */
body.page-id-230898 .circle-cursor,
body:has(.su-hero) .circle-cursor { mix-blend-mode: difference; }   /* kurzor OHIO: monochrom, čitelný na bílé i černé */
body.page-id-230898 .circle-cursor-outer,
body:has(.su-hero) .circle-cursor-outer { border-color: var(--text-light); }
body.page-id-230898 .circle-cursor-inner,
body:has(.su-hero) .circle-cursor-inner { background-color: var(--bg-page); }
body.page-id-230898 header.header,
body:has(.su-hero) header.header {
  background-color: var(--bg-page);   /* plně krycí - text tmavých sekcí pod hlavičkou neprosvítá */
  box-shadow: 0 1px 0 rgba(20, 21, 23, .10);
}

/* --------------------------------------------------------------------------
   1. PROMĚNNÉ
   -------------------------------------------------------------------------- */
:root {
  /* ===== Design system "Zjemněný knižní tón & Dusty Rose" (10/2026) ===== */
  /* Pozadí a neutrály */
  --bg-page: #F8F7F4;          /* Teplý matný podklad (archivní papír) */
  --bg-card: #FFFFFF;          /* Karty ceníku, boxy, floating prvky */
  --bg-dark: #141517;          /* Hluboká tiskařská tuš pro hero sekci, tmavé bloky a patičku */
  /* Typografie */
  --text-primary: #141517;     /* Hlavní text na světlých plochách */
  --text-muted: #6E7178;       /* Sekundární popisky, metadata, drobné parametry */
  --text-light: #F8F7F4;       /* Hlavní světlý text na tmavém podkladu */
  --text-light-muted: #A3A7AF; /* Tlumený text na tmavém podkladu */
  /* Akcent - Dusty Rose */
  --accent-primary: #C48B8B;   /* Pudrová růže - náhrada karmínové */
  --accent-hover: #B57B7B;     /* Mírně hlubší odstín pro hover stavy */
  --accent-soft: rgba(196, 139, 139, 0.12); /* Jemný podkres pro badge / chips */
  /* Linky a ohraničení */
  --border-light: #E8E6E1;     /* Nenápadné dělicí linky a rámečky karet */
  --border-dark: rgba(248, 247, 244, 0.12); /* Linky v tmavých sekcích */
  /* Odvozené (doplněk systému) */
  --bg-page-alt: #F1EFEA;      /* střídání světlých sekcí (o stupeň tmavší papír) */
  --bg-dark-2: #1E2023;        /* tmavé plochy o stupeň světlejší než tuš */
  --bg-dark-3: #2A2C30;        /* nejsvětlejší tmavá plocha (přechody) */
  --accent-ink: #9A5B5B;       /* růže pro drobný text na světlém podkladu (kontrast 4,9:1) */

  --su-bg: var(--bg-page);               /* čistá bílá - světlé sekce            */
  --su-ink: var(--text-primary);              /* černá - text, tmavé sekce            */
  --su-muted: var(--text-light-muted);            /* neutrální šedá - štítky na tmavé     */
  --su-muted-text: var(--text-muted);       /* drobný text na bílé (kontrast 6,7:1) */
  --su-wine: var(--text-primary);             /* černá pro hover/fokus (monochrom)    */
  --su-accent: var(--accent-primary);           /* Červená z lodiček (ulmanova-home.webp) - jediný zvýrazňující akcent (jako červená v Neiden) */
  --su-accent-soft: var(--accent-primary);      /* tentýž odstín zesvětlený pro linky na černé */
  --su-line: var(--border-light);
  --su-line-dark: var(--border-dark);
  --su-text-dark: rgba(248, 247, 244, .78);
  --su-card: var(--bg-card);

  --su-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;   /* drobné podnadpisy */
  --su-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --su-max: 1800px;                         /* sazební zrcadlo jako Neiden   */
  --su-gutter: clamp(16px, 5.2vw, 104px);   /* boční okraj ~5 % jako Neiden  */
  --su-col-gap: clamp(32px, 5vw, 96px);     /* mezera mezi sloupci           */
  --su-sec-y: clamp(72px, 8vw, 152px);      /* vertikální rytmus sekcí       */
  --su-header: 96px;                        /* výška hlavičky OHIO (překrývá-li hero) */
  --su-ease: cubic-bezier(.22, .61, .36, 1);

  --su-fs-display: clamp(2.75rem, 1.55rem + 5.2vw, 6rem);
  --su-fs-h2: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
  --su-fs-h3: clamp(1.375rem, 1.2rem + .75vw, 1.75rem);
  --su-fs-quote: clamp(1.5rem, 1.2rem + 1.3vw, 2rem);
  --su-fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --su-fs-body: clamp(1.0625rem, 1.02rem + .2vw, 1.125rem);
  --su-fs-small: .875rem;
  --su-fs-label: .75rem;
}

/* --------------------------------------------------------------------------
   2. ZÁKLAD STRÁNKY
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--su-header) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body.home { background-color: var(--su-bg); }

/* --------------------------------------------------------------------------
   3. SEKCE = ŘÁDEK WPBakery (.su-sec)
   Sazební zrcadlo: dvě svislé vlasové linky přes background-image (0 DOM).
   -------------------------------------------------------------------------- */
.su-sec.vc_row {
  --su-guide: var(--su-line);
  --clb-grid-gutter: 0px;   /* OHIO přidává sloupcům 20 px - obsah má lícovat s linkami */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: clamp(40px, 6vw, 96px);
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: var(--su-sec-y);
  padding-bottom: var(--su-sec-y);
  padding-left: max(var(--su-gutter), env(safe-area-inset-left), calc((100% - var(--su-max)) / 2));
  padding-right: max(var(--su-gutter), env(safe-area-inset-right), calc((100% - var(--su-max)) / 2));
  border-top: 1px solid var(--su-line);
  background-color: var(--su-bg);
  background-image: linear-gradient(var(--su-guide), var(--su-guide)), linear-gradient(var(--su-guide), var(--su-guide));
  background-size: 1px 100%, 1px 100%;
  background-repeat: no-repeat;
  background-position:
    left max(var(--su-gutter), calc((100% - var(--su-max)) / 2)) top 0,
    right max(var(--su-gutter), calc((100% - var(--su-max)) / 2)) top 0;   /* linky = hrany obsahu */
  color: var(--su-ink);
  font-family: var(--su-font);
  font-size: var(--su-fs-body);
  font-weight: 400;
  line-height: 1.7;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.su-sec.vc_row::before,
.su-sec.vc_row::after { display: none; content: none; }   /* clearfix WPBakery ve flexu nepotřebujeme */

.su-sec--dark.vc_row {
  --su-guide: var(--su-line-dark);
  background-color: var(--su-ink);
  border-top-color: var(--su-line-dark);
  color: var(--su-bg);
}

/* Sloupce */
.su-sec > .wpb_column { float: none; position: relative; z-index: 1; }
.su-sec .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; padding-top: 0; }
.su-sec .wpb_content_element,
.su-sec .wpb_text_column,
.su-sec .wpb_single_image { margin-bottom: 0; }
.su-sec .wpb_text_column + .wpb_text_column,
.su-sec .wpb_single_image + .wpb_text_column { margin-top: clamp(24px, 3vw, 40px); }
.su-sec .wpb_text_column + .wpb_single_image { margin-top: clamp(40px, 5vw, 64px); }
.su-sec .su-project + .wpb_single_image,
.su-sec .wpb_single_image + .su-project { margin-top: 0; }
.su-h2 + .su-text,
.su-h2 + .su-refs,
.su-h2 + .su-lead { margin-top: clamp(28px, 3.5vw, 48px); }

@media (min-width: 768px) {
  .su-sec > .su-col--end > .vc_column-inner { padding-left: var(--su-col-gap); }
}

.su-row--stretch.vc_row { align-items: stretch; }
.su-row--center.vc_row { align-items: center; }
.su-row--end.vc_row { align-items: flex-end; }

/* Sticky levý sloupec (sekce 3 a 10) */
@media (min-width: 768px) {
  .su-col--sticky > .vc_column-inner,
  .su-col--sticky > .vc_column-inner > .wpb_wrapper { height: 100%; }
  .su-col--sticky .su-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--su-header) + 32px);
  }
}

/* --------------------------------------------------------------------------
   4. TYPOGRAFIE
   -------------------------------------------------------------------------- */
/* :where() = nulová specificita, takže okraje komponent níže vždy vyhrají */
.su-sec :where(h1, h2, h3, h4, ul, ol, figure, blockquote) { margin: 0; padding: 0; }
.su-sec h1, .su-sec h2, .su-sec h3, .su-sec h4 { font-family: var(--su-font); color: inherit; text-transform: none; }

.su-display {
  font-size: var(--su-fs-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.su-h2 {
  font-size: var(--su-fs-h2);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.018em;
  text-wrap: balance;
  max-width: 20ch;
}
.su-h3 {
  font-size: var(--su-fs-h3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.su-lead {
  font-size: var(--su-fs-lead);
  line-height: 1.65;
  max-width: 40em;
}
.su-sub {
  margin-top: clamp(24px, 3vw, 36px);
  font-size: var(--su-fs-lead);
  line-height: 1.6;
  max-width: 34em;
}
.su-text > div { max-width: 64ch; }
.su-text > div + div { margin-top: 1.1em; }
.su-micro {
  margin-top: 16px;
  font-size: var(--su-fs-small);
  line-height: 1.6;
  color: var(--su-muted-text);
}
.su-note {
  margin-top: clamp(40px, 5vw, 64px);
  max-width: 62ch;
  color: var(--su-muted-text);
}
.su-sec--dark .su-micro,
.su-sec--dark .su-note { color: var(--su-muted); }
.su-sec strong { font-weight: 600; }

/* Štítek sekce:  • [ 02 - S KÝM SPOLUPRACUJI ] */
.su-label {
  display: flex;
  align-items: center;
  gap: .75em;
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: var(--su-fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted-text);
}
.su-label::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--su-accent);
}
.su-sec--dark .su-label::before { background: var(--su-accent-soft); }
.su-label > span::before { content: "[\00a0"; }
.su-label > span::after { content: "\00a0]"; }
.su-sec--dark .su-label { color: var(--su-muted); }
.su-sec--dark { --su-wine: var(--text-light); }            /* akcent na černé = bílá */
.su-sec--dark .su-form { --su-wine: var(--text-primary); }   /* bílá karta v tmavé sekci */

/* --------------------------------------------------------------------------
   5. TLAČÍTKA A ODKAZY
   -------------------------------------------------------------------------- */
.su-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  margin-top: clamp(32px, 4vw, 48px);
}
.su-sec a.su-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background-color: var(--su-ink);
  color: var(--su-bg);
  font: 500 1rem/1.2 var(--su-font);
  letter-spacing: .01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--su-ease), color .3s var(--su-ease), box-shadow .3s var(--su-ease);
}
.su-sec a.su-btn:hover { background-color: transparent; color: var(--su-ink); box-shadow: inset 0 0 0 1px var(--su-ink); }
.su-sec--dark a.su-btn,
.su-sec a.su-btn--light { background-color: var(--su-bg); color: var(--su-ink); }
.su-sec--dark a.su-btn:hover,
.su-sec a.su-btn--light:hover { background-color: transparent; color: var(--su-bg); box-shadow: inset 0 0 0 1px var(--su-bg); }

.su-btn__icon {
  display: inline-block;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .4s var(--su-ease);
}
a:hover > .su-btn__icon { transform: rotate(90deg); }

.su-sec a.su-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  text-decoration-color: var(--su-muted);
  transition: color .25s var(--su-ease), text-decoration-color .25s var(--su-ease);
}
.su-sec a.su-link:hover { color: var(--su-ink); text-decoration-color: currentColor; }
.su-sec--dark a.su-link:hover { color: var(--su-bg); text-decoration-color: var(--su-bg); }

.su-sec a:focus-visible,
.su-sec summary:focus-visible,
.su-sec input:focus-visible,
.su-sec select:focus-visible,
.su-sec textarea:focus-visible {
  outline: 2px solid var(--su-wine);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. OBRÁZKY (vc_single_image) - rezervovaný prostor = nulový CLS
   -------------------------------------------------------------------------- */
.su-media { background-color: var(--bg-card); }
.su-sec--dark .su-media { background-color: rgba(248, 247, 244, .06); }
.su-media .vc_figure,
.su-media .vc_single_image-wrapper { display: block; width: 100%; }
.su-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--su-ratio, 4 / 5);
  object-fit: cover;
}
.su-media--hero { --su-ratio: 4 / 5; }
.su-media--portrait { --su-ratio: 4 / 5; }
.su-media--project { --su-ratio: 3 / 2; }
.su-media--wide { --su-ratio: 21 / 9; }
@media (max-width: 767px) {
  .su-media--wide { --su-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   7. SPOLEČNÉ KOMPONENTY
   -------------------------------------------------------------------------- */
.su-list-reset { list-style: none; margin: 0; padding: 0; }
.su-list-reset > li { padding-left: 0; }
.su-list-reset > li::before { content: none; }

/* Osoba / mini karta */
.su-person {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  padding: 16px;
  border: 1px solid var(--su-line);
  background: var(--su-card);
}
.su-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--su-ink);
  color: var(--su-bg);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
}
.su-person__name { display: block; font-weight: 500; line-height: 1.35; }
.su-person__role {
  display: block;
  margin-top: 2px;
  font-size: var(--su-fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--su-muted-text);
}
.su-person__text { margin-top: 2px; font-size: var(--su-fs-small); line-height: 1.5; color: var(--su-muted-text); }
.su-person a.su-link { display: inline-block; margin-top: 6px; font-size: var(--su-fs-small); }

/* Štítky v tenkých rámečcích */
.su-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.su-tags > li {
  padding: 6px 12px;
  border: 1px solid var(--su-line);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
}
.su-tags > li::before { content: none; }
.su-sec--dark .su-tags > li { border-color: var(--su-line-dark); }

/* Meta řádek verzálkami */
.su-meta {
  margin-top: 20px;
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.5;
}
.su-meta span { color: var(--su-muted-text); }
.su-sec--dark .su-meta span { color: var(--su-muted); }

/* --------------------------------------------------------------------------
   8. SEKCE 1 - HERO
   -------------------------------------------------------------------------- */
.su-hero.vc_row {
  padding-top: calc(var(--su-header) + clamp(40px, 7vw, 120px));
  border-top: 0;
}
@media (min-width: 768px) {
  .su-hero.vc_row {
    min-height: 90vh;      /* starší prohlížeče */
    min-height: 90svh;     /* iOS / Android: bez skoku při skrývání lišty */
    align-items: flex-end;
  }
  .su-hero .su-col--end > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .su-hero .su-col--end .wpb_single_image { width: 100%; }
}
/* papírové zrno - statická SVG textura, bez obrázku ke stažení */
.su-hero.vc_row::after {
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.su-hero h1.su-label { font-size: .8125rem; }
.su-paths {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: clamp(28px, 3vw, 40px);
  padding-top: 20px;
  border-top: 1px solid var(--su-line);
  font-size: var(--su-fs-small);
}
.su-hero__card { width: 100%; max-width: 420px; }

/* --------------------------------------------------------------------------
   9. SEKCE 2 - DŮKAZ STABILITY
   -------------------------------------------------------------------------- */
.su-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--su-line);
  border-left: 1px solid var(--su-line);
}
.su-logos > li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 104px;
  padding: 16px 12px;
  border-right: 1px solid var(--su-line);
  border-bottom: 1px solid var(--su-line);
  font-size: var(--su-fs-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--su-muted-text);
  overflow-wrap: anywhere;
}
.su-logos > li::before { content: none; }
.su-logos img { width: auto; max-width: 120px; height: auto; max-height: 40px; filter: grayscale(1); opacity: .75; }
@media (min-width: 768px) {
  .su-logos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Kolotoč klientů (princip Neiden): nekonečný pás, uprostřed každé třetiny ostrý,
   na hranách třetin rozmazaný. Čisté CSS, duplikovaný seznam je aria-hidden. */
.su-marquee {
  --su-mq-gap: clamp(56px, 7vw, 120px);
  position: relative;
  margin-top: clamp(28px, 3vw, 40px);
  overflow: hidden;
  border-top: 1px solid var(--su-line);
  border-bottom: 1px solid var(--su-line);
  /* svislé linky třetin jako v rastru Neiden */
  background-image: linear-gradient(var(--su-line), var(--su-line)), linear-gradient(var(--su-line), var(--su-line));
  background-size: 1px 100%, 1px 100%;
  background-position: 33.333% 0, 66.666% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.su-marquee__track {
  display: flex;
  width: max-content;
  animation: su-marquee 60s linear infinite;
}
.su-marquee:hover .su-marquee__track { animation-play-state: paused; }
.su-sec .su-marquee__list {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--su-mq-gap);
  margin: 0;
  padding: 0 var(--su-mq-gap) 0 0;
  list-style: none;
}
.su-marquee__list > li {
  display: flex;
  align-items: center;
  min-height: clamp(160px, 16vw, 260px);
  margin: 0;
  padding: 0;
  font-size: clamp(1.125rem, .95rem + .7vw, 1.625rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: var(--su-ink);
}
.su-marquee__list > li::before { content: none; }
/* Loga klientů: jednotně černá silueta (monochrom), stejná optická výška */
.su-marquee__logo {
  display: block;
  width: auto;
  height: clamp(26px, 2.2vw, 40px);
  max-width: clamp(120px, 12vw, 200px);
  object-fit: contain;
  filter: grayscale(1) brightness(0);
}
.su-marquee__logo--tall { height: clamp(44px, 3.8vw, 68px); }
.su-marquee__blur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  /* rozmazání jen u hran třetin, střed každé třetiny zůstává ostrý */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 11%, transparent 22%, #000 33.333%, transparent 44%, transparent 55%, #000 66.666%, transparent 77%, transparent 89%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 11%, transparent 22%, #000 33.333%, transparent 44%, transparent 55%, #000 66.666%, transparent 77%, transparent 89%, #000 100%);
}
@keyframes su-marquee { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 767px) {
  .su-marquee { background-image: none; }
  .su-marquee__track { animation-duration: 40s; }
  .su-marquee__blur {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
            mask-image: linear-gradient(90deg, #000 0%, transparent 25%, transparent 75%, #000 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .su-marquee { -webkit-mask-image: none; mask-image: none; background-image: none; }
  .su-marquee__track { width: auto; animation: none; }
  .su-sec .su-marquee__list { flex-wrap: wrap; justify-content: center; gap: 16px 48px; padding: 40px 0; }
  .su-marquee__list > li { min-height: 0; }
  .su-marquee__list[aria-hidden="true"],
  .su-marquee__blur { display: none; }
}

.su-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  margin-top: clamp(48px, 6vw, 80px);
}
@media (min-width: 768px) {
  .su-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.su-fact__num {
  display: block;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}
.su-fact__txt {
  display: block;
  margin-top: 10px;
  max-width: 24ch;
  font-size: var(--su-fs-small);
  line-height: 1.5;
  color: var(--su-muted-text);
}

/* --------------------------------------------------------------------------
   10. SEKCE 3 - HODNOTA KONTINUITY
   -------------------------------------------------------------------------- */
.su-values {
  list-style: none;
  counter-reset: su-val;
  margin: clamp(32px, 4vw, 48px) 0 0;
  padding: 0;
  border-top: 1px solid var(--su-line);
}
.su-values > li {
  counter-increment: su-val;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--su-line);
}
.su-values > li::before {
  content: counter(su-val, decimal-leading-zero);
  font-size: var(--su-fs-small);
  line-height: 2;
  color: var(--su-muted-text);
}

.su-quote figure {
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--su-line);
}
.su-sec blockquote {
  border: 0;
  background: none;
  font-style: normal;
  quotes: none;
}
.su-sec blockquote::before,
.su-sec blockquote::after { content: none; }
.su-quote blockquote {
  max-width: 26em;
  font-size: var(--su-fs-quote);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
}
.su-quote figcaption,
.su-ref figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   11. SEKCE 4 - KULTURA DIALOGU (proces podle Neiden)
   Vlevo sticky: štítek, H2, perex, citace. Vpravo rastr 2 × 2 karet
   s vlasovými linkami, pořadí "hadem" 01 02 / 04 03, karta 04 černá.
   -------------------------------------------------------------------------- */
.su-process.vc_row { background-color: var(--bg-page-alt); }
.su-sec .su-process__title { max-width: 16ch; font-size: clamp(2rem, 1.35rem + 2vw, 3.25rem); line-height: 1.08; }
.su-process .su-lead { max-width: 40ch; }
.su-process__quote {
  margin: clamp(48px, 7vw, 120px) 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--su-line);
  max-width: 40ch;
}
.su-process__quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(1.125rem, 1.05rem + .45vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--su-ink);
}
.su-process__quote blockquote::before,
.su-process__quote blockquote::after { content: none; }
.su-process__quote figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.su-process__avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  filter: grayscale(1);
}

.su-process__main > .vc_column-inner > .wpb_wrapper { container-type: inline-size; }
.su-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--su-line);
  border-left: 1px solid var(--su-line);
}
.su-steps > li::before { content: none; }
.su-step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(88px, 9vw, 160px);   /* pevná mezera = nadpisy v řádku na stejné výšce */
  min-height: clamp(320px, 30vw, 460px);
  margin: 0;
  padding: clamp(24px, 3vw, 48px);
  border-right: 1px solid var(--su-line);
  border-bottom: 1px solid var(--su-line);
  background-color: var(--su-bg);
  color: var(--su-ink);
}
.su-step__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.su-step__num {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--su-line);
  border-radius: 8px;
  background-color: var(--su-bg);
  color: var(--su-ink);
  font-size: var(--su-fs-small);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.su-step__tag {
  padding-top: 15px;
  font-size: var(--su-fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
}
.su-step__title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: inherit;
}
.su-step__text {
  margin-top: clamp(20px, 2.5vw, 32px);
  max-width: 42ch;
  color: var(--su-muted-text);
}
.su-step--dark {
  background-color: var(--su-ink);
  border-color: var(--su-ink);
  color: var(--su-bg);
}
.su-step--dark .su-step__num { border-color: var(--su-accent); background-color: var(--su-accent); color: var(--text-primary); }
.su-step--dark .su-step__text { color: var(--su-text-dark); }

/* Hover jako Neiden: černé pozadí PŘEJEDE na kartu pod kurzorem.
   Jeden černý blok (.su-steps__hl) se posouvá po rastru 2 × 2, text karet mění barvu. */
.su-steps__hl { display: none; }
.su-step__num,
.su-step__text,
.su-step { transition: color .35s var(--su-ease) .1s, background-color .35s var(--su-ease) .1s, border-color .35s var(--su-ease) .1s; }
@container (min-width: 600px) {
  .su-steps { position: relative; grid-auto-rows: 1fr; background-color: var(--su-bg); }
  .su-step { position: relative; z-index: 1; background-color: transparent; }
  .su-step--dark { background-color: transparent; border-color: var(--su-line); }
  .su-steps__hl {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    margin: 0;
    padding: 0;
    background-color: var(--su-ink);
    pointer-events: none;
    transform: translate3d(0, 100%, 0);            /* výchozí poloha = karta 04 */
    transition: transform .6s cubic-bezier(.7, 0, .2, 1);
  }
  .su-steps__hl::before { content: none; }
  .su-steps:has(.su-step:nth-child(1):hover) .su-steps__hl { transform: translate3d(0, 0, 0); }
  .su-steps:has(.su-step:nth-child(2):hover) .su-steps__hl { transform: translate3d(100%, 0, 0); }
  .su-steps:has(.su-step:nth-child(3):hover) .su-steps__hl { transform: translate3d(100%, 100%, 0); }
  .su-steps:has(.su-step:nth-child(4):hover) .su-steps__hl { transform: translate3d(0, 100%, 0); }
  @supports selector(:has(*)) {
    .su-steps:has(.su-step:hover) .su-step--dark:not(:hover) { color: var(--su-ink); }
    .su-steps:has(.su-step:hover) .su-step--dark:not(:hover) .su-step__num { border-color: var(--su-line); background-color: var(--su-bg); color: var(--su-ink); }
    .su-steps:has(.su-step:hover) .su-step--dark:not(:hover) .su-step__text { color: var(--su-muted-text); }
    .su-step:hover { color: var(--su-bg); }
    .su-step:hover .su-step__num { border-color: var(--su-accent); background-color: var(--su-accent); color: var(--text-primary); }
    .su-step:hover .su-step__text { color: var(--su-text-dark); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .su-step, .su-step__num, .su-step__text, .su-steps__hl { transition: none; }
}

@container (min-width: 600px) {
  .su-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-step:nth-child(3) { grid-column: 2; grid-row: 2; }   /* had: 01 02 / 04 03 */
  .su-step:nth-child(4) { grid-column: 1; grid-row: 2; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1100px) {
    .su-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .su-step:nth-child(3) { grid-column: 2; grid-row: 2; }
    .su-step:nth-child(4) { grid-column: 1; grid-row: 2; }
  }
}
@media (min-width: 768px) and (max-width: 1099px) {
  /* úzký rozsah: sekce na celou šířku, karty pod textem */
  .su-process > .su-process__side,
  .su-process > .su-process__main { width: 100%; }
  .su-process > .su-process__main > .vc_column-inner { padding-left: 0; }
  .su-process .su-col--sticky .su-sticky { position: static; }
}
@media (min-width: 1100px) {
  /* jako Neiden: úzký textový sloupec, rastr karet přes dvě třetiny šířky */
  .su-process > .su-process__side { width: 34%; }
  .su-process > .su-process__main { width: 66%; }
  .su-process > .su-process__main > .vc_column-inner { padding-left: clamp(32px, 3.5vw, 64px); }
}

/* --------------------------------------------------------------------------
   12. SEKCE 5 - ROLE A OBLASTI
   -------------------------------------------------------------------------- */
.su-roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--su-line);
}
.su-role { padding: 32px 0; scroll-margin-top: calc(var(--su-header) + 24px); }
.su-role + .su-role { border-top: 1px solid var(--su-line); }
.su-role__tag {
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted-text);
}
.su-role .su-h3 {
  display: inline-block;
  margin-top: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--su-ease);
}
.su-role:target .su-h3 { border-bottom-color: var(--su-wine); }   /* aktivní cesta z hero, bez JS */
.su-role > div:last-child { margin-top: 14px; max-width: 52ch; }
@media (min-width: 768px) {
  .su-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-role + .su-role { border-top: 0; border-left: 1px solid var(--su-line); padding-left: var(--su-col-gap); }
  .su-role:first-child { padding-right: var(--su-col-gap); }
}

.su-services {
  list-style: none;
  margin: clamp(56px, 7vw, 112px) 0 0;
  padding: 0;
  border-top: 1px solid var(--su-line);
}
.su-services > li::before { content: none; }
.su-service {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 32px;
  padding: clamp(32px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--su-line);
}
.su-service__num { font-size: var(--su-fs-small); font-weight: 500; color: var(--su-muted-text); }
.su-service__for { margin-top: 10px; max-width: 40ch; color: var(--su-muted-text); }
.su-service__body .su-tags { margin-top: 0; }
.su-service__body a.su-link { display: inline-block; margin-top: 16px; font-size: var(--su-fs-small); }
@media (min-width: 992px) {
  .su-service { grid-template-columns: 6rem minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .su-service__num { padding-top: 8px; }
}

/* --------------------------------------------------------------------------
   13. SEKCE 6 - KDO ZA TÍM STOJÍ
   -------------------------------------------------------------------------- */
.su-signature {
  margin-top: 32px;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--su-wine);
}
.su-sec--dark .su-signature { color: var(--su-bg); }
.su-signature img { display: block; width: auto; height: 56px; }   /* po nahrání SVG podpisu */

/* --------------------------------------------------------------------------
   SEKCE 3 - model spolupráce | SEKCE 5 - Komu pomáhám / Co řeším
   -------------------------------------------------------------------------- */
.su-model {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 32px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-top: 1px solid var(--su-ink);
  border-bottom: 1px solid var(--su-line);
}
.su-model__label {
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted-text);
}
.su-model__text { max-width: 60ch; }
@media (min-width: 768px) { .su-model { grid-template-columns: 10rem minmax(0, 1fr); } }

.su-needs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--su-line);
  border-left: 1px solid var(--su-line);
  margin-bottom: clamp(56px, 7vw, 112px);
}
.su-needs__col {
  padding: clamp(24px, 3vw, 48px);
  border-right: 1px solid var(--su-line);
  border-bottom: 1px solid var(--su-line);
}
.su-sec .su-needs__title {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.su-needs__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--su-ink); }
.su-needs__list > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--su-line);
  line-height: 1.55;
}
.su-needs__list > li::before { content: none; }
.su-needs__num { font-size: var(--su-fs-small); font-weight: 500; color: var(--su-muted-text); font-variant-numeric: tabular-nums; padding-top: 2px; }
.su-needs__col:last-child { background-color: var(--bg-card); }
@media (min-width: 900px) { .su-needs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   SEKCE 5 - SLUŽBY v layoutu Neiden "Articles":
   úvod | velký titulek, 3 karty s fotkou realizace, černý CTA pruh pod prostřední kartou
   -------------------------------------------------------------------------- */
.su-svcs { margin-top: clamp(72px, 9vw, 144px); }
.su-svcs__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border-top: 1px solid var(--su-line);
}
.su-svcs__intro { padding: clamp(32px, 4vw, 64px) 0 clamp(16px, 2vw, 24px); }
.su-svcs__lead { margin-top: 24px; max-width: 36ch; color: var(--su-muted-text); }
.su-svcs__title {
  padding: clamp(16px, 3vw, 48px) 0 clamp(32px, 4vw, 64px);
  font-size: clamp(3.25rem, 1.6rem + 6.4vw, 8.5rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--su-ink);
}
.su-svcs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--su-line);
  border-left: 1px solid var(--su-line);
}
.su-svc { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--su-line); border-bottom: 1px solid var(--su-line); background-color: var(--bg-card); }
.su-svc__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--border-light); }
.su-svc:first-child .su-svc__media { clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px); }
.su-svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--su-ease); }
.su-svc:hover .su-svc__media img { transform: scale(1.04); }
.su-svc__body { padding: clamp(24px, 3vw, 48px); }
.su-svc__meta { font-size: var(--su-fs-small); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; color: var(--su-muted-text); }
.su-svc__meta span { margin: 0 6px; }
.su-svc__meta b { font-weight: 600; color: var(--su-ink); }
.su-sec .su-svc__title { margin: 18px 0 0; font-size: clamp(1.375rem, 1.2rem + .7vw, 1.875rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.su-svc__for { margin-top: 12px; max-width: 40ch; color: var(--su-muted-text); }
.su-svc__items { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--su-line); }
.su-svc__items > li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--su-line); font-size: var(--su-fs-small); line-height: 1.5; }
.su-svc__items > li::before { content: none; }
.su-svcs__cta { display: grid; grid-template-columns: minmax(0, 1fr); border-left: 1px solid var(--su-line); border-right: 1px solid var(--su-line); border-bottom: 1px solid var(--su-line); }
.su-sec a.su-svcs__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 56px;
  background-color: var(--su-ink);
  color: var(--su-bg);
  font-size: var(--su-fs-small);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s var(--su-ease), color .3s var(--su-ease);
}
.su-sec a.su-svcs__btn > span { position: absolute; right: 24px; font-size: 1.25rem; font-weight: 400; transition: transform .4s var(--su-ease); }
.su-sec a.su-svcs__btn:hover { background-color: #0B0C0E; }
.su-sec a.su-svcs__btn:hover > span { transform: rotate(90deg); }
@media (min-width: 768px) {
  .su-svcs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-svcs__cta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-svcs__btn { grid-column: 2; }
}
@media (min-width: 1100px) {
  .su-svcs__head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .su-svcs__intro { padding-right: clamp(24px, 3vw, 48px); }
  .su-svcs__title { padding: clamp(32px, 4vw, 64px) 0; }
}

/* --------------------------------------------------------------------------
   SEKCE 6 - O MNĚ jako timeline (princip Neiden "The Journey")
   3 sloupce: úvod + citace | portrét (sticky) | časová osa s linkou,
   která se při scrollu "plní". Čisté CSS (scroll-driven), bez JS.
   -------------------------------------------------------------------------- */
.su-journey.vc_row { column-gap: 0; }
.su-sec .su-journey__title {
  margin: 28px 0 0;
  max-width: 11ch;
  font-size: clamp(2.5rem, 1.5rem + 2.8vw, 4.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  overflow-wrap: normal;
  word-break: keep-all;
  -webkit-hyphens: none;
          hyphens: none;
  color: var(--su-bg);
}
.su-journey__lead { margin-top: clamp(24px, 3vw, 40px); max-width: 38ch; color: var(--su-text-dark); }
.su-journey__quote { margin: clamp(56px, 8vw, 120px) 0 0; max-width: 40ch; }
.su-journey__quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: clamp(1.125rem, 1.05rem + .45vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--su-bg);
}
.su-journey__quote blockquote::before,
.su-journey__quote blockquote::after { content: none; }
.su-journey__quote .su-signature { margin-top: 24px; }

.su-journey__photo { overflow: hidden; clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 48px); }
.su-journey__photo img { --su-ratio: 4 / 5; filter: grayscale(1); object-position: 50% 15%; }

.su-timeline {
  --tl-pad: 40px;
  position: relative;
  margin: 0;
  padding: 0 0 0 var(--tl-pad);
  list-style: none;
}
.su-timeline::before,
.su-timeline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
}
.su-timeline::before { background: var(--su-line-dark); }
.su-timeline::after { background: var(--su-accent-soft); transform-origin: top; }   /* plná linka = uražená cesta */
.su-tl {
  position: relative;
  margin: 0;
  padding: clamp(24px, 2.5vw, 32px) 0 clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--su-line-dark);
}
.su-tl:first-child { border-top: 0; padding-top: 0; }
.su-tl:last-child { padding-bottom: 0; }
.su-tl::before {
  content: "";
  position: absolute;
  top: calc(clamp(24px, 2.5vw, 32px) + 8px);
  left: calc(var(--tl-pad) * -1 - 3px);
  width: 7px;
  height: 7px;
  background: var(--su-accent-soft);
}
.su-tl:first-child::before { top: 8px; }
.su-tl__year {
  font-size: var(--su-fs-label);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted);   /* letopočty v tichém tónu */
  font-variant-numeric: tabular-nums;
}
.su-sec .su-tl__title {
  margin: clamp(12px, 1.5vw, 20px) 0 0;
  font-size: clamp(1.25rem, 1.12rem + .55vw, 1.625rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--su-bg);
}
.su-tl__role { margin-top: 6px; font-size: var(--su-fs-small); font-weight: 500; line-height: 1.5; color: var(--su-bg); }
.su-tl__text { margin-top: 14px; max-width: 44ch; font-size: var(--su-fs-small); line-height: 1.65; color: var(--su-text-dark); }
.su-tl__edu { margin: 16px 0 0; padding: 0; list-style: none; }
.su-tl__edu > li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--su-line-dark);
  font-size: var(--su-fs-small);
  line-height: 1.5;
  color: var(--su-bg);
}
.su-tl__edu > li::before { content: none; }
.su-tl__edu-y { color: var(--su-muted); font-variant-numeric: tabular-nums; }
.su-tl__note { margin-top: 18px; max-width: 44ch; font-size: var(--su-fs-small); font-style: italic; line-height: 1.6; color: var(--su-text-dark); }

@media (min-width: 768px) {
  .su-journey > .su-journey__intro { width: 100%; }
  .su-journey > .su-journey__media { width: 40%; }
  .su-journey > .su-journey__line { width: 60%; }
  .su-journey > .su-journey__line > .vc_column-inner { padding-left: var(--su-col-gap); }
  .su-journey__media .su-journey__photo { position: sticky; top: calc(var(--su-header) + 32px); }
}
@media (min-width: 1100px) {
  .su-journey > .su-journey__intro,
  .su-journey > .su-journey__media,
  .su-journey > .su-journey__line { width: 33.333%; }
  .su-journey > .su-journey__media > .vc_column-inner { padding: clamp(96px, 10vw, 180px) clamp(24px, 3vw, 48px) 0 clamp(24px, 3vw, 48px); height: 100%; }
  .su-journey > .su-journey__media > .vc_column-inner > .wpb_wrapper { height: 100%; }
  .su-journey > .su-journey__line > .vc_column-inner { padding-left: clamp(24px, 3vw, 48px); }
  /* úvod: nadpis nahoře, citace dole */
  .su-journey__intro > .vc_column-inner,
  .su-journey__intro > .vc_column-inner > .wpb_wrapper,
  .su-journey__intro .su-journey__intro-text,
  .su-journey__intro .su-journey__intro-text > .wpb_wrapper { height: 100%; }
  .su-journey__intro .su-journey__intro-text > .wpb_wrapper { display: flex; flex-direction: column; justify-content: space-between; }
  .su-journey__intro .vc_column-inner { padding-right: clamp(24px, 3vw, 48px); }
}
@media (max-width: 767px) {
  .su-journey__photo img { --su-ratio: 4 / 5; max-height: 72svh; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .su-timeline::after {
      animation: su-tl-fill linear both;
      animation-timeline: view();
      animation-range: entry 40% exit 60%;
    }
    .su-tl {
      animation: su-tl-on linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}
@keyframes su-tl-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes su-tl-on { from { opacity: .28; } to { opacity: 1; } }

/* Zakončení sekce 6 - pás s čísly (princip Neiden), monochrom: bílý pás, černé číslice */
.su-stats.vc_row { --su-guide: rgba(248, 247, 244, .18); padding-top: 0; padding-bottom: 0; border-top: 0; background-color: var(--su-accent); color: var(--text-light); }   /* akcentní pás jako Neiden */
.su-stats__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid rgba(248, 247, 244, .18);
}
.su-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 16px 24px;
  min-height: clamp(240px, 24vw, 400px);
  margin: 0;
  padding: clamp(24px, 3vw, 48px);
  border-right: 1px solid rgba(248, 247, 244, .18);
  border-bottom: 1px solid rgba(248, 247, 244, .18);
}
.su-stat::before { content: none; }
.su-stat__idx { font-size: var(--su-fs-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.su-stat__label { justify-self: end; max-width: 18ch; font-size: var(--su-fs-small); font-weight: 500; line-height: 1.4; text-align: right; }
.su-stat__num {
  grid-column: 1 / -1;
  align-self: end;
  font-size: clamp(4rem, 2.2rem + 6vw, 8.5rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--text-light);
}
@media (min-width: 768px) {
  .su-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-stat { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   14. SEKCE 7 - REALIZACE (tmavá galerie)
   -------------------------------------------------------------------------- */
.su-project > .wpb_wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 32px;
  padding: 24px 0 clamp(56px, 7vw, 112px);
}
.su-project__meta {
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--su-muted);
}
.su-project__main > div { margin-top: 10px; max-width: 52ch; color: var(--su-text-dark); }
.su-project .su-tags { margin-top: 0; align-content: flex-start; }
@media (min-width: 992px) {
  .su-project > .wpb_wrapper { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); align-items: start; }
  .su-project__meta { padding-top: 6px; }
}
.su-sec a.su-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 20px 0;
  border-top: 1px solid var(--su-line-dark);
  border-bottom: 1px solid var(--su-line-dark);
  color: inherit;
  font-size: var(--su-fs-small);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   15. SEKCE 8 - REFERENCE
   -------------------------------------------------------------------------- */
.su-ref { padding-top: 32px; border-top: 1px solid var(--su-line); }
.su-ref__tag {
  margin-bottom: 20px;
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted-text);
}
.su-ref blockquote {
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.375rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--su-muted-text);
}
.su-ref blockquote strong { font-weight: 500; color: var(--su-ink); }
.su-ref--lead blockquote { max-width: 26em; font-size: var(--su-fs-quote); line-height: 1.5; }
.su-refs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  margin-top: clamp(56px, 7vw, 96px);
}
@media (min-width: 768px) {
  .su-refs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--su-col-gap); }
}

/* --------------------------------------------------------------------------
   16. SEKCE 9 - SPOLUPRÁCE A CENY
   -------------------------------------------------------------------------- */
/* Ceník v layoutu Neiden: 3 karty v rastru, prostřední (Brand + Web Set) vysunutá nahoru,
   horní část s cenou oddělená linkou, seznamy s checkboxy ve čtverečcích, CTA na šířku karty. */
.su-prices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-left: 1px solid var(--su-line);
  border-top: 1px solid var(--su-line);
}
.su-price {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--su-line);
  border-bottom: 1px solid var(--su-line);
  background-color: var(--bg-card);
}
.su-price__top {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 48px);
  border-bottom: 1px solid var(--su-line);
}
.su-price__idx {
  font-size: var(--su-fs-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--su-ink);
}
.su-price__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(28px, 3vw, 44px); }
.su-sec .su-price__name {
  margin: 0;
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.su-price__badge {
  padding: 6px 12px;
  background-color: var(--su-accent);
  color: var(--text-primary);
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.su-price__for { margin-top: 14px; max-width: 34ch; line-height: 1.55; color: var(--su-muted-text); }
.su-price__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: clamp(28px, 3vw, 44px);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.su-price__amount small,
.su-price__cur {
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted-text);
}
.su-price__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px) clamp(24px, 3vw, 48px);
}
.su-price__group {
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted-text);
}
.su-checks + .su-price__group { margin-top: clamp(28px, 3vw, 40px); }
.su-checks { list-style: none; margin: 12px 0 0; padding: 0; }
.su-checks > li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 40px;
  border-bottom: 1px solid var(--su-line);
  font-weight: 500;
  line-height: 1.45;
}
.su-checks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--su-bg);
  box-shadow: 0 0 0 1px var(--su-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.1L11 1.5' fill='none' stroke='%23111111' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  border: 0;
  transform: none;
}
.su-price--featured .su-checks--extra > li::before {
  background-color: var(--su-accent);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.2l3.2 3.1L11 1.5' fill='none' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3C/svg%3E");
}
.su-sec a.su-price__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 64px;
  margin-top: auto;
  padding: 0 56px;
  background-color: var(--su-bg);
  box-shadow: inset 0 0 0 1px var(--su-line);
  color: var(--su-ink);
  font-size: var(--su-fs-small);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s var(--su-ease), color .3s var(--su-ease), box-shadow .3s var(--su-ease);
}
.su-checks--extra { margin-bottom: clamp(32px, 4vw, 48px); }
.su-sec a.su-price__cta > span {
  position: absolute;
  right: 24px;
  font-size: 1.25rem;
  font-weight: 400;
  transition: transform .4s var(--su-ease);
}
.su-sec a.su-price__cta:hover { box-shadow: inset 0 0 0 1px var(--su-ink); }
.su-sec a.su-price__cta:hover > span { transform: rotate(90deg); }
.su-sec a.su-price__cta--dark { background-color: var(--su-accent); box-shadow: none; color: var(--text-primary); }
.su-sec a.su-price__cta--dark:hover { background-color: var(--su-ink); color: var(--text-light); box-shadow: none; }
@media (min-width: 992px) {
  .su-prices { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
  .su-price--featured { margin-top: -57px; border-top: 1px solid var(--su-line); box-shadow: -1px 0 0 var(--su-line); }   /* vysunutá karta jako Neiden */
  .su-price--featured .su-price__head { margin-top: clamp(20px, 2vw, 28px); }
}

.su-rows { list-style: none; margin: 0; padding: 0; }
.su-rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--su-line);
}
.su-rows > li::before { content: none; }
.su-rows__name { font-weight: 500; }
.su-rows__for { color: var(--su-muted-text); font-size: var(--su-fs-small); line-height: 1.6; }
.su-rows__price { font-weight: 500; white-space: nowrap; }
@media (min-width: 768px) {
  .su-rows > li { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); align-items: baseline; }
  .su-rows__price { text-align: right; }
}

.su-audit {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--su-ink);
  color: var(--su-bg);
}
.su-audit .su-label { color: var(--su-muted); }
.su-audit__text { margin-top: 14px; max-width: 58ch; color: var(--su-text-dark); }
.su-audit .su-actions { margin-top: 0; }
@media (min-width: 992px) {
  .su-audit { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; }
  .su-audit .su-actions { justify-content: flex-end; }
}

.su-principles-title { margin-top: clamp(56px, 7vw, 96px); }
.su-principles { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--su-line); }
.su-principles > li { padding: 18px 0; border-bottom: 1px solid var(--su-line); max-width: 72ch; }
.su-principles > li::before { content: none; }
.su-capacity {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 62ch;
}
.su-capacity::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--su-wine);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   17. SEKCE 10 - FAQ (nativní , bez JS)
   -------------------------------------------------------------------------- */
.su-faq { border-top: 1px solid var(--su-line); }
.su-faq details { border-bottom: 1px solid var(--su-line); }
.su-faq summary {
  display: block;
  position: relative;
  padding: 24px 48px 24px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
.su-faq summary::-webkit-details-marker { display: none; }
.su-faq summary::marker { content: ""; }
.su-faq summary::after {
  content: "+";
  position: absolute;
  top: 20px;
  right: 4px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .35s var(--su-ease);
}
.su-faq details[open] > summary::after { transform: rotate(45deg); }
.su-faq summary:hover { color: var(--su-wine); }
.su-faq__a {
  max-width: 62ch;
  padding: 0 48px 28px 0;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--su-muted-text);
}
.su-faq-side .su-person { margin-top: clamp(32px, 4vw, 48px); }

/* --------------------------------------------------------------------------
   18. SEKCE 11 - KONTAKT A P.S. (tmavá)
   -------------------------------------------------------------------------- */
.su-sec--contact.vc_row { padding-top: clamp(48px, 6vw, 96px); }
#kontakt.su-sec.vc_row { aspect-ratio: auto !important; height: auto !important; }   /* přebíjí staré globální pravidlo #kontakt.vc_row */
.su-media--contact { position: relative; }
.su-media--contact img { object-position: 50% 50%; }   /* nohy s notebookem (ulmanova-home.webp) */
.su-sec .wpb_text_column + .su-project { margin-top: clamp(40px, 5vw, 64px); }
.su-media--contact::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to bottom, rgba(20, 21, 23, 0), var(--su-ink));
  pointer-events: none;
}
.su-sec--contact .su-lead { color: var(--su-text-dark); margin-top: 24px; }
.su-contacts { margin-top: clamp(32px, 4vw, 48px); }
.su-sec .su-contacts a {
  display: block;
  width: fit-content;
  color: var(--su-bg);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--su-ease);
}
.su-sec .su-contacts a:hover { border-bottom-color: var(--su-bg); }

/* Formulář (Contact Form 7) - typografické pole, podtržené řádky */
.su-form {
  padding: clamp(24px, 3.5vw, 48px);
  background: var(--su-bg);
  color: var(--su-ink);
}
.su-form .wpcf7 form > p,
.su-form .su-field { margin: 0 0 22px; }
.su-form label {
  display: block;
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted-text);
}
.su-form .wpcf7-form-control-wrap { display: block; }
.su-form input[type="text"],
.su-form input[type="email"],
.su-form input[type="tel"],
.su-form select,
.su-form textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--su-muted);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: var(--su-ink);
  font: 400 16px/1.5 var(--su-font);     /* 16 px = iOS nezoomuje */
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s var(--su-ease), box-shadow .25s var(--su-ease);
}
.su-form select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px 8px;
}
.su-form textarea { min-height: 120px; resize: vertical; }
.su-form input:focus,
.su-form select:focus,
.su-form textarea:focus {
  outline: none;
  border-bottom-color: var(--su-wine);
  box-shadow: 0 1px 0 0 var(--su-wine);
}
.su-form .su-hint { display: block; margin-top: 6px; font-size: .8125rem; line-height: 1.5; color: var(--su-muted-text); text-transform: none; letter-spacing: 0; font-weight: 400; }
.su-form input[type="submit"] {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  padding: 0 24px;
  border: 0;
  border-radius: 0;
  background-color: var(--su-ink);
  color: var(--su-bg);
  font: 500 1rem/1.2 var(--su-font);
  letter-spacing: .01em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .3s var(--su-ease);
}
.su-form input[type="submit"]:hover { background-color: #0B0C0E; }
.su-form .wpcf7-not-valid-tip { margin-top: 6px; font-size: .8125rem; color: var(--su-wine); }
.su-form .wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--su-line);
  font-size: var(--su-fs-small);
}
.su-form .wpcf7-spinner { display: block; margin: 12px 0 0; }
.su-form .su-micro { margin-top: 16px; }

.su-ps {
  max-width: 46ch;
  padding-top: 32px;
  border-top: 1px solid var(--su-line-dark);
  color: var(--su-text-dark);
}
.su-ps strong { color: var(--su-bg); }

.su-colophon {
  margin-top: clamp(80px, 10vw, 160px);
  padding-top: 32px;
  border-top: 1px solid var(--su-line-dark);
}
.su-colophon__claim {
  font-size: var(--su-fs-label);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--su-muted);
}
.su-colophon__logo {
  margin-top: 16px;
  font-size: clamp(3rem, 17vw, 14rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--su-bg);
}


/* Rezervační karta (sekce 11) - Calendly + e-mail, bez formulářového pluginu */
.su-booking .su-label { color: var(--su-muted-text); }
.su-booking__text { margin-top: 14px; max-width: 46ch; color: var(--su-muted-text); }
.su-actions--stack { flex-direction: column; align-items: stretch; gap: 12px; }
.su-actions--stack a.su-btn { width: 100%; }
.su-sec--dark .su-booking a.su-btn { background-color: var(--su-ink); color: var(--su-bg); }
.su-sec--dark .su-booking a.su-btn:hover { background-color: transparent; color: var(--su-ink); box-shadow: inset 0 0 0 1px var(--su-ink); }
.su-sec .su-booking a.su-btn--outline,
.su-sec--dark .su-booking a.su-btn--outline { background-color: transparent; color: var(--su-ink); box-shadow: inset 0 0 0 1px var(--su-ink); }
.su-sec .su-booking a.su-btn--outline:hover,
.su-sec--dark .su-booking a.su-btn--outline:hover { background-color: var(--su-ink); color: var(--su-bg); }

/* --------------------------------------------------------------------------
   SEKCE 8 - REFERENCE v layoutu Neiden ("True Stories")
   Rastr 1/3 + 2/3 s vlasovými linkami: úvod | velký nadpis,
   pak pro každou referenci fotografie realizace | karta s citací.
   Barvu nesou jen fotografie realizací.
   -------------------------------------------------------------------------- */
.su-tst {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--su-line);
  border-left: 1px solid var(--su-line);
}
.su-tst > * {
  min-width: 0;
  border-right: 1px solid var(--su-line);
  border-bottom: 1px solid var(--su-line);
}
.su-tst__intro,
.su-tst__head,
.su-tst__card { padding: clamp(24px, 3vw, 48px); }
.su-tst__lead { margin-top: 24px; max-width: 36ch; color: var(--su-muted-text); }
.su-sec .su-tst__title {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--su-ink);
}
.su-tst__item { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.su-tst__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--bg-card);
  clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px);   /* seříznutý roh jako Neiden */
}
.su-tst__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.su-tst__card {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 96px);
  background-color: var(--su-bg);
}
.su-tst__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  font-size: var(--su-fs-small);
  line-height: 1.5;
}
.su-tst__k { font-weight: 600; color: var(--su-ink); }
.su-tst__v { max-width: 24ch; text-align: right; color: var(--su-muted-text); }
.su-sec .su-tst__quote {
  margin: auto 0;
  padding: 0;
  border: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem);   /* min. 24 px = "velký text" pro kontrast 3:1 */
  font-style: normal;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--text-light-muted);
}
.su-tst__quote::before,
.su-tst__quote::after { content: none; }
.su-sec .su-tst__quote strong { font-weight: 500; color: var(--su-ink); }
.su-tst__by {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.su-tst__role {
  display: block;
  margin-top: 2px;
  max-width: 40ch;
  font-size: var(--su-fs-small);
  line-height: 1.5;
  color: var(--su-muted-text);
}
.su-tst__brand {
  flex: 0 0 auto;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--su-ink);
}
@media (min-width: 900px) {
  .su-tst { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .su-tst__intro,
  .su-tst__head { min-height: clamp(240px, 22vw, 340px); }
  .su-tst__head { display: flex; align-items: flex-start; }
  .su-tst__item { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .su-tst__media { aspect-ratio: auto; min-height: clamp(480px, 42vw, 640px); }
  .su-tst__card { border-left: 1px solid var(--su-line); }
}
@media (max-width: 599px) {
  .su-tst__by { flex-direction: column; align-items: flex-start; }
  .su-tst__media { clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%, 0 36px); }
}

/* --------------------------------------------------------------------------
   SEKCE 8 - REFERENCE v layoutu Neiden "The Team":
   nahoře úvod (1/3) + běžící titulek (2/3), pod tím řada portrétů klientů
   se jménem, funkcí a citací. Barvu nesou jen fotografie.
   -------------------------------------------------------------------------- */
.su-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.su-clients-sec.vc_row { padding-top: 0; }
.su-clients__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--su-line);
}
.su-clients__intro { padding: clamp(48px, 6vw, 96px) 0 clamp(24px, 3vw, 40px); }
.su-clients__lead { margin-top: 24px; max-width: 36ch; color: var(--su-muted-text); }
.su-clients__ticker {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(140px, 16vw, 280px);
  /* svislé linky třetin uvnitř titulku (navazují na rastr) */
  background-image: linear-gradient(var(--su-line), var(--su-line));
  background-size: 1px 100%;
  background-position: 50% 0;
  background-repeat: no-repeat;
}
.su-clients__track {
  display: flex;
  width: max-content;
  animation: su-marquee 40s linear infinite;
}
.su-clients__track > span {
  flex: 0 0 auto;
  padding-right: .6em;
  font-size: clamp(3.25rem, 1.6rem + 6.4vw, 8.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: var(--su-ink);
}
.su-clients {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 5vw, 64px) 0;
  padding-top: clamp(40px, 4vw, 64px);
}
.su-client { margin: 0; min-width: 0; }
.su-client__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--border-light);
}
.su-client:first-child .su-client__photo { clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px); }   /* seříznutý roh */
.su-client__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: filter .6s var(--su-ease), transform .8s var(--su-ease);
}
/* Hover jako Neiden: portrét se rozostří, vpravo nahoře ostrý náhled, dole klíčová věta citace */
.su-client__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 21, 23, .55) 0%, rgba(20, 21, 23, .1) 55%, rgba(20, 21, 23, 0) 100%);
  opacity: 0;
  transition: opacity .6s var(--su-ease);
  pointer-events: none;
}
.su-client__thumb {
  position: absolute;
  top: 7%;
  right: 8%;
  z-index: 1;
  width: 29%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(.96);
  transition: opacity .5s var(--su-ease), transform .6s var(--su-ease);
}
.su-client__hq {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 8%;
  z-index: 1;
  font-size: clamp(1rem, .9rem + .45vw, 1.25rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--text-light);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .5s var(--su-ease) .05s, transform .6s var(--su-ease) .05s;
}
@media (hover: hover) {
  .su-client:hover .su-client__img,
  .su-client:focus-within .su-client__img { filter: blur(14px); transform: scale(1.06); }
  .su-client:hover .su-client__photo::after,
  .su-client:focus-within .su-client__photo::after { opacity: 1; }
  .su-client:hover .su-client__thumb,
  .su-client:hover .su-client__hq,
  .su-client:focus-within .su-client__thumb,
  .su-client:focus-within .su-client__hq { opacity: 1; transform: none; }
}
@media (hover: none) {
  .su-client__thumb, .su-client__hq { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .su-client__img, .su-client__thumb, .su-client__hq, .su-client__photo::after { transition: none; }
}
.su-client__initials {
  font-size: clamp(3rem, 2rem + 4vw, 6rem);
  font-weight: 500;
  letter-spacing: -.04em;
  color: var(--text-light-muted);
}
.su-client__by { display: block; padding: 24px clamp(0px, 2vw, 32px) 0 0; }
.su-client__name { display: block; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--su-ink); }
.su-client__role { display: block; margin-top: 4px; font-size: var(--su-fs-small); line-height: 1.5; color: var(--su-muted-text); }
.su-sec .su-client__quote {
  margin: 20px 0 0;
  padding: 20px clamp(0px, 2vw, 32px) 0 0;
  border: 0;
  border-top: 1px solid var(--su-line);
  font-size: var(--su-fs-body);
  font-style: normal;
  font-weight: 400;
  line-height: 1.6;
  color: var(--su-muted-text);
}
.su-client__quote::before,
.su-client__quote::after { content: none; }
.su-sec .su-client__quote strong { font-weight: 500; color: var(--su-ink); }
@media (min-width: 768px) {
  .su-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .su-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .su-clients__head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .su-clients__intro { padding-right: clamp(24px, 3vw, 48px); border-right: 1px solid var(--su-line); }
}
@media (prefers-reduced-motion: reduce) {
  .su-clients__track { animation: none; }
  .su-clients__track > span + span { display: none; }
  .su-clients__track > span { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 5rem); white-space: normal; }
}

/* Kolotoč referencí: nekonečný pás karet, při najetí se zastaví (hover efekt Neiden funguje) */
.su-clients-mq {
  margin-top: clamp(40px, 4vw, 64px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.su-clients-mq__track {
  display: flex;
  width: max-content;
  animation: su-marquee 39s linear infinite;   /* 6 karet - stejná rychlost jako dřív u 10 karet / 65 s */
}
.su-clients-mq:hover .su-clients-mq__track { animation-play-state: paused; }
.su-sec .su-clients-mq__list {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  list-style: none;
}
.su-clients-mq .su-client {
  flex: 0 0 auto;
  width: clamp(240px, 22vw, 380px);
  margin: 0;
}
.su-clients-mq .su-client::before { content: none; }
.su-clients-mq .su-client .su-client__photo { clip-path: none; }
.su-client__photo--plain { background-color: var(--bg-card); box-shadow: inset -1px 0 0 var(--su-line); }
.su-client__img--logo { object-fit: contain !important; padding: 28%; background-color: var(--bg-card); }
.su-client__by { padding: 20px 24px 0 0; }
.su-client__key { margin-top: 12px; padding-right: 24px; font-size: var(--su-fs-small); line-height: 1.55; color: var(--su-muted-text); }
@media (hover: hover) { .su-client__key { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .su-clients-mq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .su-clients-mq__track { animation: none; }
  .su-clients-mq__list[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   SEKCE 7 - REALIZACE podle Neiden: projekty pod sebou bez mezer.
   Za každým projektem tentýž obrázek silně rozostřený přes celou šířku okna;
   rozostřené vrstvy sousedních projektů se nahoře i dole prolínají maskou,
   takže pozadí přechází naprosto plynule. Pod fotkou lišta ve 3 sloupcích
   s 1px svislými linkami: nahoře název / rozsah, dole číslo / rok / obor.
   -------------------------------------------------------------------------- */
.neiden-projects.vc_row { position: relative; isolation: isolate; row-gap: 0; padding-bottom: 0; }
#realizace.neiden-projects.vc_row { overflow: hidden !important; overflow: clip !important; }   /* aura přes 100vw nesmí rozšířit stránku */
.neiden-projects > .neiden-col { width: 100%; z-index: auto; }   /* bez vlastních vrstev: všechny aury pod všemi popředími */
.neiden-projects > .wpb_column:first-child { margin-bottom: clamp(48px, 6vw, 80px); }

.project-wrapper { --amb-bleed: clamp(160px, 18vw, 320px); position: relative; }
.project-ambient-bg {
  position: absolute;
  top: calc(var(--amb-bleed) * -1);
  bottom: calc(var(--amb-bleed) * -1);
  left: 50%;
  z-index: 0;
  width: 100vw;
  margin-left: -50vw;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(24px) saturate(1.6) brightness(.48);   /* barvy zůstanou, bílý text zůstane čitelný i u světlých fotek */
  transform: scale(1.08);
  pointer-events: none;
  will-change: transform;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--amb-bleed), #000 calc(100% - var(--amb-bleed)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--amb-bleed), #000 calc(100% - var(--amb-bleed)), transparent 100%);
}
.project-ambient-bg--accent { background-color: var(--su-accent); filter: brightness(.8); }
.project-foreground { position: relative; z-index: 2; }
.project-foreground * { background-color: transparent; }
.neiden-project-card { margin: 0; color: var(--text-light); }

.neiden-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 12 / 5;
  max-height: 78vh;
  overflow: hidden;
  background-color: rgba(20, 21, 23, .2) !important;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.neiden-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
@media (hover: hover) {
  .neiden-project-card:hover .neiden-card-image img { transform: scale(1.03); }
}
.neiden-card-image--type { display: flex; align-items: flex-end; padding: clamp(24px, 4vw, 64px); background-color: var(--su-accent) !important; }
.neiden-card-image--type span {
  font-size: clamp(3rem, 1.6rem + 6vw, 8rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--text-primary);
}
.neiden-project-card p:empty,
.neiden-caption > p,
.neiden-caption__col > p,
.project-ambient-bg + p { display: none; }

/* Lišta pod fotkou */
.neiden-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(220px, 21vw, 400px);
  margin: 0;
}
.neiden-caption__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
  padding: 24px 24px 24px 0;
}
.neiden-caption__col + .neiden-caption__col { padding-left: 24px; border-left: 1px solid rgba(248, 247, 244, .14); }
.neiden-caption__idx { margin-top: auto; }
.su-sec .neiden-caption__title {
  margin: 0;
  font-size: clamp(16px, .9rem + .3vw, 19px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--text-light);
}
.neiden-caption__desc {
  margin-top: 12px;
  max-width: 44ch;
  font-size: clamp(13px, .8rem + .1vw, 14px);
  line-height: 1.55;
  color: rgba(248, 247, 244, .78);
}
.neiden-caption__scope { margin: 0; padding: 0; list-style: none; }
.neiden-caption__scope > li { margin: 0; padding: 0; }
.neiden-caption__scope > li::before { content: none; }
.neiden-caption__idx,
.neiden-caption__meta,
.neiden-caption__scope > li {
  font-family: var(--su-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, .62);
}
.neiden-caption__meta { color: var(--text-light); }
.neiden-caption__meta span { margin-right: 6px; color: rgba(248, 247, 244, .55); }
.su-sec .neiden-caption > .neiden-caption__col,
.su-sec .neiden-caption__col > * { margin-top: 0; }
.su-sec .neiden-caption__col > .neiden-caption__meta,
.su-sec .neiden-caption__col > .neiden-caption__idx { margin-top: auto; }
@media (min-width: 768px) {
  .neiden-caption { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .neiden-card-image { aspect-ratio: 4 / 3; }
  .neiden-caption { min-height: 0; }
  .neiden-caption__col { padding: 16px 0 0; }
  .neiden-caption__col + .neiden-caption__col { padding-left: 0; border-left: 0; border-top: 1px solid rgba(248, 247, 244, .14); }
  .neiden-caption__col:first-child { display: none; }
  .neiden-caption__col:last-child { padding-bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .neiden-card-image img { transition: none; }
}

/* --------------------------------------------------------------------------
   SEKCE 9 - ZÁSADY SPOLUPRÁCE v layoutu Neiden "How We Work":
   úvod | velký titulek, pod tím 3 buňky: zásady | vizuál s plovoucími údaji | černá karta 25+
   -------------------------------------------------------------------------- */
.su-how { margin-top: clamp(72px, 9vw, 144px); }
.su-how__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border-top: 1px solid var(--su-line);
}
.su-how__intro { padding: clamp(32px, 4vw, 64px) 0 clamp(16px, 2vw, 24px); }
.su-how__lead { margin-top: 24px; max-width: 36ch; color: var(--su-muted-text); }
.su-sec .su-how__title {
  margin: 0;
  padding: clamp(16px, 3vw, 48px) 0 clamp(32px, 4vw, 64px);
  font-size: clamp(3.25rem, 1.6rem + 6.4vw, 8.5rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--su-ink);
}
.su-how__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--su-line);
  border-left: 1px solid var(--su-line);
}
.su-how__grid > * { min-width: 0; border-right: 1px solid var(--su-line); border-bottom: 1px solid var(--su-line); }
.su-how__card {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 96px);
  padding: clamp(24px, 3vw, 48px);
}
.su-how__brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.su-how__mark { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.su-how__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; filter: grayscale(1); box-shadow: 0 0 0 3px var(--su-bg); }
.su-sec .su-how__name { margin: 0; font-size: clamp(1.375rem, 1.2rem + .7vw, 1.875rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.su-how__text { margin-top: 16px; max-width: 46ch; color: var(--su-muted-text); }
.su-how__list { margin-top: 24px; }
.su-how__list > li { font-weight: 400; font-size: var(--su-fs-small); line-height: 1.55; color: var(--su-muted-text); }
.su-how__list > li strong { font-weight: 600; color: var(--su-ink); }

.su-how__visual { position: relative; min-height: clamp(420px, 44vw, 640px); overflow: hidden; background-color: var(--bg-card); }
.su-how__visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.su-chip {
  position: absolute;
  display: grid;
  gap: 2px;
  padding: 14px 20px;
  border-radius: 14px;
  background-color: rgba(248, 247, 244, .86);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(20, 21, 23, .12);
  color: var(--su-ink);
  font-size: var(--su-fs-small);
  line-height: 1.3;
}
.su-chip strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.su-chip span { color: var(--su-muted-text); }
.su-chip--dark { background-color: rgba(20, 21, 23, .92); color: var(--su-bg); }
.su-chip--dark span { color: var(--su-text-dark); }
.su-chip--a { left: 6%; top: 48%; }
.su-chip--b { right: 6%; top: 18%; }
.su-chip--c { right: 8%; bottom: 14%; }

.su-how__stat {
  display: flex;
  flex-direction: column;
  min-height: clamp(360px, 40vw, 640px);
  padding: clamp(24px, 3vw, 48px);
  background-color: var(--su-accent);
  color: var(--text-primary);
}
.su-how__stat-top { display: flex; justify-content: space-between; gap: 16px; font-size: var(--su-fs-small); font-weight: 500; }
.su-how__stat-top span:last-child { color: rgba(20, 21, 23, .65); }
.su-how__stat-num {
  margin-top: auto;
  font-size: clamp(5rem, 3rem + 7vw, 10rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.06em;
}
.su-how__stat-txt {
  margin-top: 24px;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
@media (min-width: 768px) {
  .su-how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-how__card { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .su-how__head { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .su-how__intro { padding-right: clamp(24px, 3vw, 48px); }
  .su-sec .su-how__title { padding: clamp(32px, 4vw, 64px) 0; }
  .su-how__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-how__card { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   SPODNÍ HRANA OKNA (princip Neiden): postupné rozostření obsahu u spodní hrany
   + pevná záložka CTA vpravo dole. Čisté CSS, nic nepřekrývá kliknutí.
   -------------------------------------------------------------------------- */
.su-fixed-ui.vc_row { height: 0; min-height: 0; margin: 0 !important; padding: 0 !important; border: 0; overflow: visible; }
.su-fixed-ui .vc_column-inner,
.su-fixed-ui .wpb_wrapper,
.su-fixed-ui .wpb_text_column { margin: 0 !important; padding: 0 !important; }
.su-edge {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  height: clamp(96px, 12.75vh, 140px);   /* Neiden: 120 px při výšce okna 941 px */
  pointer-events: none;
}
.su-edge > i {
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: blur(var(--b)) saturate(1.2);
          backdrop-filter: blur(var(--b)) saturate(1.2);
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--s), #000 var(--e), #000 100%);
          mask-image: linear-gradient(to bottom, transparent var(--s), #000 var(--e), #000 100%);
}
/* progresivní blur jako Neiden: 8 vrstev, 0.3 -> 20 px, krok masky 8.75 % */
.su-edge > i:nth-child(1) { --b: 0.3px; --s: 0.00%; --e: 8.75%; }
.su-edge > i:nth-child(2) { --b: 1.3px; --s: 8.75%; --e: 17.50%; }
.su-edge > i:nth-child(3) { --b: 2.8px; --s: 17.50%; --e: 26.25%; }
.su-edge > i:nth-child(4) { --b: 5px; --s: 26.25%; --e: 35.00%; }
.su-edge > i:nth-child(5) { --b: 7.8px; --s: 35.00%; --e: 43.75%; }
.su-edge > i:nth-child(6) { --b: 11.3px; --s: 43.75%; --e: 52.50%; }
.su-edge > i:nth-child(7) { --b: 15.3px; --s: 52.50%; --e: 61.25%; }
.su-edge > i:nth-child(8) { --b: 20px; --s: 61.25%; --e: 70.00%; }

.su-sec a.su-tab,
a.su-tab {
  position: fixed;
  right: clamp(16px, 3.2vw, 64px);
  bottom: 0;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: clamp(52px, 4.4vw, 64px);
  padding: 0 clamp(20px, 2vw, 32px);
  background-color: var(--su-ink);
  color: var(--text-light);
  font-family: var(--su-font);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s var(--su-ease);
}
a.su-tab > span { color: rgba(248, 247, 244, .55); font-weight: 500; }
a.su-tab > b { margin-left: 12px; font-size: 1.125rem; font-weight: 400; transition: transform .4s var(--su-ease); }
a.su-tab:hover { background-color: var(--su-accent); color: var(--text-primary); }
a.su-tab:hover > b { transform: rotate(90deg); }
a.su-tab:focus-visible { outline: 2px solid var(--su-accent); outline-offset: 3px; }
@media (max-width: 599px) {
  a.su-tab > span { display: none; }
}
@media print { .su-edge, a.su-tab { display: none; } }

/* --------------------------------------------------------------------------
   19. JEMNÝ POHYB - čisté CSS (scroll-driven), bez JS
   Bez podpory nebo při omezení pohybu: obsah je okamžitě viditelný.
   Animují se jen opacity / transform (GPU) a krátký blur nadpisů.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .su-reveal {
      animation: su-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes su-reveal {
  from { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(4px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

/* --------------------------------------------------------------------------
   20. MOBIL
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .su-h2 { max-width: none; }
  .su-hero.vc_row { padding-top: calc(var(--su-header) + 40px); }
  .su-hero__card { max-width: none; }
  .su-person { max-width: none; }
  .su-faq summary { font-size: 1.0625rem; }
  .su-faq__a { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   DOPLŇKOVÝ FONT (Fragment Mono z původního webu) pro drobné podnadpisy a štítky
   -------------------------------------------------------------------------- */
.su-label,
.su-step__tag,
.su-step__num,
.su-price__idx,
.su-price__group,
.su-price__badge,
.su-stat__idx,
.su-stat__label,
.su-tl__year,
.su-tl__edu-y,
.su-how__stat-top,
.su-svc__meta,
.su-needs__num,
.su-model__label,
.su-chip span,
a.su-tab > span {
  font-family: var(--su-mono);
  font-weight: 400;
  letter-spacing: .02em;
}
.su-svc__meta b { font-weight: 400; }

/* --------------------------------------------------------------------------
   PARALAXA v Realizacích (Neiden): fotka se uvnitř rámu při scrollu posouvá
   pomaleji než stránka. Čisté CSS (scroll-driven animations), bez JS.
   Zoom při najetí používá samostatnou vlastnost `scale`, takže se s paralaxou nebije.
   -------------------------------------------------------------------------- */
.neiden-card-image img { transform: none !important; scale: 1; transition: scale .8s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .neiden-project-card:hover .neiden-card-image img { scale: 1.03; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .neiden-card-image img {
      inset: auto;
      top: -10%;
      left: 0;
      height: 120%;
      animation: su-parallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .project-ambient-bg {
      animation: su-parallax-bg linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes su-parallax { from { translate: 0 -8%; } to { translate: 0 8%; } }
@keyframes su-parallax-bg { from { translate: 0 6%; } to { translate: 0 -6%; } }

/* Oprava paralaxy: rám fotky nesmí být scroll-kontejner (overflow: hidden by
   svázal časovou osu s rámem a fotka by stála). overflow: clip ořízne stejně,
   ale osa se váže na posun celé stránky. */
.neiden-card-image { overflow: clip !important; view-timeline-name: --su-pimg; view-timeline-axis: block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .neiden-card-image img { animation-timeline: --su-pimg; animation-range: cover 0% cover 100%; }
    .project-wrapper { view-timeline-name: --su-pwrap; view-timeline-axis: block; }
    .project-ambient-bg { animation-timeline: --su-pwrap; }
  }
}
@keyframes su-parallax { from { translate: 0 -9%; } to { translate: 0 9%; } }

/* Výraznější paralaxa (posun fotky v rámu ±13 %) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .neiden-card-image img { top: -16%; height: 132%; }
  }
}
@keyframes su-parallax { from { translate: 0 -12%; } to { translate: 0 12%; } }

/* ===== Sekce 8 - pozadí karty = ukázka z portfolia, vpravo nahoře foto klienta ===== */
.su-clients-mq .su-client__photo { background-color: var(--border-light); }
.su-clients-mq .su-client__img { object-position: 50% 50%; }
.su-clients-mq .su-client__photo.su-client__photo--type { background-color: var(--bg-dark); }
.su-client__brand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  padding: 0 8% 9%;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--text-light);
  transition: filter .6s var(--su-ease), opacity .6s var(--su-ease);
}
.su-client__thumb--ini {
  display: grid;
  place-items: center;
  font-family: var(--su-mono);
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: .04em;
  color: var(--su-ink);
  background-color: var(--bg-card);
}
@media (hover: hover) {
  .su-client:hover .su-client__brand,
  .su-client:focus-within .su-client__brand { filter: blur(10px); opacity: .4; }
}

/* ===== Pás s čísly - místo akcentní barvy černobílá fotka v plné šířce, rozostření jako ambient v portfoliu ===== */
.su-stats.vc_row { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background-color: var(--bg-dark); }
.su-stats.vc_row::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/wp-content/uploads/2026/05/Radka-Ulmanova-Soulistka-2026.webp") 50% 28% / cover no-repeat;
  filter: blur(24px) grayscale(1) brightness(.48);
  transform: scale(1.08);
  pointer-events: none;
}

/* ===== Sekce 8 - hover: jméno + firma vedle malé fotky, celá citace (typografie jako popisky v portfoliu) ===== */
.su-clients-mq .su-client__photo { container-type: inline-size; }
.su-clients-mq .su-client__thumb { top: 7%; right: 7%; width: 24%; }
.su-client__who-in {
  position: absolute;
  top: 7%;
  left: 7%;
  right: calc(7% + 24% + 16px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-light);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .5s var(--su-ease), transform .6s var(--su-ease);
  pointer-events: none;
}
.su-client__who-name {
  display: block;
  font-size: clamp(14px, 4.6cqi, 19px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.su-client__who-role {
  display: block;
  font-family: var(--su-mono);
  font-size: clamp(10px, 3cqi, 12px);
  line-height: 1.5;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(248, 247, 244, .72);
}
.su-clients-mq .su-client__hq {
  left: 7%;
  right: 7%;
  bottom: 7%;
  font-size: clamp(15px, 5cqi, 20px);
  line-height: 1.4;
}
.su-clients-mq .su-client__hq--m { font-size: clamp(13px, 3.9cqi, 16px); line-height: 1.45; }
.su-clients-mq .su-client__hq--l { font-size: clamp(11.5px, 3.4cqi, 14px); font-weight: 400; line-height: 1.45; letter-spacing: 0; color: rgba(248, 247, 244, .92); }
.su-clients-mq .su-client__photo::after { background: linear-gradient(to top, rgba(20, 21, 23, .8) 0%, rgba(20, 21, 23, .55) 55%, rgba(20, 21, 23, .45) 100%); }
@media (hover: hover) {
  .su-client:hover .su-client__who-in,
  .su-client:focus-within .su-client__who-in { opacity: 1; transform: none; }
}
@media (hover: none) { .su-client__who-in { display: none; } }
@media (prefers-reduced-motion: reduce) { .su-client__who-in { transition: none; } }

/* Pojistka proti vodorovnému posunu stránky (patička OHIO přesahuje o 20 px) */
body { overflow-x: clip; }

/* ===== Sekce 8 - Neiden Logo Ticker (BlurredLogoScroller), čisté CSS ===== */
.neiden-logo-ticker {
  width: 100%;
  overflow: hidden;
  padding: 40px 0;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.ticker-track {
  display: flex;
  width: max-content;
  gap: 80px;
  animation: neidenTicker 35s linear infinite;
}

.neiden-logo-ticker:hover .ticker-track {
  animation-play-state: paused;
}

.ticker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.ticker-item img {
  max-height: 36px;
  width: auto;
  height: 36px;        /* SVG loga nemají pevnou šířku - bez výšky by v pásu spadla na 0 */
  max-width: none;     /* OHIO dává img max-width:100 % */
  flex: none;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.ticker-item img:hover {
  opacity: 1;
}

@keyframes neidenTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 40px)); }
}

/* ===== Pás s pohyblivou mřížkou 3x3 (Neiden) - před Realizacemi =====
   Efekt oddálení jako Neiden Showreel: sticky scéna přes celé okno, střední dlaždice začíná
   přes celou obrazovku (scale 3) a při scrollu se plynule oddálí na celou mřížku 3x3. */
.su-reel-sec.vc_row { padding-top: 0 !important; padding-bottom: 0 !important; border-top: 0; background-color: var(--bg-dark); }
.su-reel-sec .wpb_column, .su-reel-sec .vc_column-inner, .su-reel-sec .wpb_wrapper { padding: 0 !important; margin: 0 !important; }
.su-reel-sec p:empty { display: none; }
.su-reel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  view-timeline-name: --su-reel;
}
.su-reel__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; overflow: clip; background-color: var(--bg-dark); }
.su-reel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
.su-reel__tile { position: relative; min-height: 0; overflow: hidden; overflow: clip; background-color: var(--bg-dark); }
.su-reel__media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--kb-o, 50% 50%);
}
.su-reel__tile:not(.su-reel__tile--video) .su-reel__media {
  transform-origin: 50% 50%;
  animation: su-reel-kb var(--kb-d, 18s) ease-in-out infinite alternate;
}
@keyframes su-reel-kb {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.16) translate3d(var(--kb-x, 0), var(--kb-y, 0), 0); }
}
.su-reel__tile--video .su-reel__media { filter: grayscale(1) contrast(1.05); }
.su-reel__cap {
  position: absolute;
  left: clamp(16px, 2vw, 32px);
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(14px, 1.8vw, 28px);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--su-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-light);
}
.su-reel__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: clamp(2.75rem, 1rem + 6.4vw, 8.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--text-light);
  opacity: 0;
  pointer-events: none;
}
/* plynulé rozostření spodní hrany do černého pruhu */
.su-reel__edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 22%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 70%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 70%);
  background: linear-gradient(to bottom, rgba(30, 32, 35, 0) 0%, rgba(30, 32, 35, .55) 70%, var(--bg-dark-2) 100%);   /* navazuje na černý pruh */
}
@supports (animation-timeline: view()) {
  .su-reel { height: 340vh; }
  .su-reel__stage { position: sticky; top: 0; }
  .su-reel__grid, .su-reel__title, .su-reel__edge {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --su-reel;
    animation-range: contain 0% contain 100%;
  }
  .su-reel__grid { animation-name: su-reel-zoomout; }
  .su-reel__title { animation-name: su-reel-title; }
  .su-reel__edge { animation-name: su-reel-edge; }
  /* Neiden: 0 % černo + titulek, 25 % střední video přes celé okno, pak lineární oddálení 3 -> 1 */
  @keyframes su-reel-zoomout {
    0% { scale: 3; opacity: 0; }
    14% { scale: 3; opacity: 1; }
    92% { scale: 1; opacity: 1; }
    100% { scale: 1; opacity: 1; }
  }
  @keyframes su-reel-title {
    0% { opacity: 1; }
    24% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes su-reel-edge {
    0% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
  }
}
@supports not (animation-timeline: view()) {
  .su-reel__stage { height: auto; }
  .su-reel__grid { height: auto; grid-template-rows: none; }
  .su-reel__tile { aspect-ratio: 7 / 4; }
}
@media (prefers-reduced-motion: reduce) {
  .su-reel { height: auto !important; }
  .su-reel__stage { position: relative !important; height: auto; }
  .su-reel__grid { height: auto; grid-template-rows: none; animation: none !important; scale: 1; opacity: 1; }
  .su-reel__tile { aspect-ratio: 7 / 4; }
  .su-reel__tile .su-reel__media { animation: none !important; }
  .su-reel__title, .su-reel__edge { animation: none !important; }
}


/* ===== Vstupní služba - audit v layoutu Neiden (case karta: foto + citace + 2 tmavé statistiky) ===== */
.su-auditx {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--su-line);
  border-left: 1px solid var(--su-line);
  background-color: var(--bg-card);
}
.su-auditx > * { border-right: 1px solid var(--su-line); border-bottom: 1px solid var(--su-line); }
.su-auditx__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 15 / 16;
  overflow: hidden;
  background-color: var(--border-light);
  clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px);
}
.su-auditx__photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 28% 50%; }
.su-auditx__q { position: absolute; top: 9%; right: auto; left: calc(72px + 4%);   /* vpravo nahoře je na fotce telefon */ width: clamp(48px, 5vw, 80px); height: auto; fill: var(--text-light); opacity: .9; }   /* fotka má tmavé pozadí */
.su-auditx__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 64px);
  padding: clamp(28px, 3.4vw, 60px);
}
.su-auditx__top, .su-auditx__bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.su-auditx__bottom { align-items: flex-end; flex-wrap: wrap; }
.su-auditx__label { font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--su-ink); }
.su-auditx__scope { font-size: 15px; line-height: 1.55; text-align: right; color: var(--su-muted-text); }
.su-sec .su-auditx__title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(1.75rem, 1rem + 2.3vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--su-ink);
}
.su-auditx__name { display: block; font-size: 15px; font-weight: 600; color: var(--su-ink); }
.su-auditx__role { display: block; margin-top: 4px; font-size: 15px; color: var(--su-muted-text); }
.su-auditx__role strong { font-weight: 600; color: var(--su-ink); }
.su-auditx__empty { display: none; }
.su-auditx__stat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto auto;
  min-height: clamp(260px, 22vw, 340px);
  padding: clamp(24px, 2.6vw, 44px);
  background-color: var(--bg-dark);
  color: var(--text-light);
  border-color: rgba(248, 247, 244, .12) !important;
  box-shadow: 0 40px 50px -34px rgba(20, 21, 23, .55);
}
.su-auditx__dots {
  width: 34px;
  height: 8px;
  background-image: radial-gradient(circle, rgba(248, 247, 244, .35) 1px, transparent 1.4px);
  background-size: 7px 4px;
}
.su-auditx__slabel { justify-self: end; max-width: 16ch; font-size: 15px; font-weight: 500; line-height: 1.45; text-align: right; }
.su-auditx__delta {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-bottom: 8px;
  font-size: 14px;
  color: rgba(248, 247, 244, .5);
}
.su-auditx__delta span { margin-right: 8px; color: var(--su-accent-soft); }
.su-auditx__num {
  grid-column: 1 / -1;
  grid-row: 4;
  font-size: clamp(3.25rem, 1.6rem + 4.2vw, 6rem);
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.04em;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .su-auditx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-auditx__photo { aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 1100px) {
  .su-auditx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-auditx__photo { grid-column: 1; grid-row: 1; aspect-ratio: 15 / 16; }
  .su-auditx__panel { grid-column: 2 / 4; grid-row: 1; }
  .su-auditx__empty { display: block; }
}

/* Akcent šablony OHIO (kurzor, výběr textu, odkazy) = stejná červená */
:root { --clb-color-primary: var(--accent-primary); --clb-color-primary-50: rgba(196, 139, 139, .5); }

/* ===== Služby v layoutu Neiden "What We Build" (sticky levý sloupec + karty služeb) ===== */
.su-svx {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(64px, 8vw, 128px);
  border-top: 1px solid var(--su-line);
}
.su-svx__side { padding: clamp(40px, 5vw, 80px) 0 clamp(32px, 4vw, 56px); }
.su-svx__sticky { display: flex; flex-direction: column; gap: 24px; }
.su-sec .su-svx__h {
  margin: 8px 0 0;
  max-width: 7ch;
  font-size: clamp(3rem, 1.4rem + 4.6vw, 7.25rem);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.055em;
  color: var(--su-ink);
}
.su-svx__lead { max-width: 34ch; font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.5; color: var(--su-muted-text); }
.su-svx__more { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: clamp(32px, 4vw, 72px); }
.su-svx__kicker { font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--su-ink); }
.su-svx__note { margin-bottom: 24px; font-size: 17px; color: var(--su-muted-text); }
.su-svx__list { border-left: 1px solid var(--su-line); }
.su-svx__item { border-bottom: 1px solid var(--su-line); }
.su-svx__item:last-child { border-bottom: 0; }
.su-svx__head { padding: clamp(48px, 5.5vw, 96px) clamp(20px, 3vw, 48px) clamp(32px, 4vw, 64px); }
.su-svx__num { margin-bottom: 12px; font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--su-muted); }
.su-svx__num b { font-weight: 400; color: var(--su-ink); }
.su-sec .su-svx__title {
  margin: 0;
  font-size: clamp(2rem, 1rem + 2.8vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--su-ink);
}
.su-svx__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background-color: var(--su-line); }
.su-svx__img { margin: 0; aspect-ratio: 12 / 7; overflow: hidden; overflow: clip; background-color: var(--border-light); }
.su-svx__img img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .9s var(--su-ease);
}
@media (hover: hover) { .su-svx__img:hover img { transform: scale(1.05); } }
.su-svx__foot { display: grid; grid-template-columns: minmax(0, 1fr); }
.su-svx__text, .su-svx__tags { padding: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 48px) clamp(40px, 4.5vw, 72px); }
.su-svx__desc { max-width: 46ch; font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.55; color: var(--su-muted-text); }
.su-svx__price { margin-top: 28px; font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--su-ink); }
.su-sec .su-svx__tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin: 0; list-style: none; }
.su-sec .su-svx__tags li {
  margin: 0;
  padding: 7px 11px;
  border: 1px solid var(--su-line);
  font-size: 15px;
  line-height: 1.2;
  color: var(--su-ink);
  background-color: var(--bg-card);
}
.su-svx__tags li::before { content: none; }
.su-svx p:empty { display: none; }
@media (min-width: 768px) {
  .su-svx__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-svx__tags { border-left: 1px solid var(--su-line); }
}
@media (min-width: 1100px) {
  .su-svx { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .su-svx__side { padding-right: clamp(24px, 3vw, 56px); }
  .su-svx__sticky { position: sticky; top: 168px; }   /* pod fixní hlavičkou */
  .su-svx__side { padding-top: clamp(48px, 5.5vw, 96px); }
}
@media (max-width: 1099px) { .su-svx__list { border-left: 0; border-top: 1px solid var(--su-line); } }

/* ===== Černý pruh nad referencemi (Neiden: pás ocenění + běžící wordmark) ===== */
.su-band-sec.vc_row { padding-top: clamp(32px, 3.6vw, 64px) !important; padding-bottom: 0 !important; overflow: clip !important; background-color: var(--bg-dark-2); }
.su-band-sec p:empty { display: none; }
.su-band { position: relative; }
.su-sec .su-band__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(248, 247, 244, .1);
  border-bottom: 1px solid rgba(248, 247, 244, .1);
}
.su-sec .su-band__cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: clamp(24px, 2.4vw, 36px) clamp(20px, 1.8vw, 32px);
  color: var(--text-light);
}
.su-band__cell::before { content: none; }
.su-band__cell + .su-band__cell { border-top: 1px solid rgba(248, 247, 244, .1); }
.su-band__logo { flex: none; width: auto; max-width: 112px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.su-band__mono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(248, 247, 244, .5); border-radius: 50%; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.su-band__name { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--text-light); }
.su-band__pre { color: rgba(248, 247, 244, .45); }
.su-band__sub { margin-top: 2px; font-size: 15px; line-height: 1.4; color: rgba(248, 247, 244, .45); }
.su-band__yr { position: absolute; top: clamp(14px, 1.4vw, 22px); right: clamp(16px, 1.6vw, 26px); font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; color: rgba(248, 247, 244, .45); }
.su-band__ticker {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(96px, 12vw, 200px);
  padding-top: 30px;
  padding-bottom: 14px;
  overflow: hidden;
  overflow: clip;
}
.su-band__track { display: flex; width: max-content; animation: su-band-mq 40s linear infinite; }
.su-band__track > div { display: flex; flex: none; }
.su-band__track span {
  flex: none;
  padding-right: clamp(40px, 5vw, 96px);
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text-light);
}
.su-band__track--ghost { position: absolute; top: 4px; left: 0; animation-duration: 55s; }
.su-band__track--ghost span { color: rgba(248, 247, 244, .14); filter: blur(.6px); }
@keyframes su-band-mq { to { transform: translate3d(-50%, 0, 0); } }
@media (min-width: 900px) {
  .su-sec .su-band__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .su-band__cell + .su-band__cell { border-top: 0; border-left: 1px solid rgba(248, 247, 244, .1); }
}
@media (prefers-reduced-motion: reduce) { .su-band__track { animation: none; } }

/* Oprava vodorovného posunu stránky: OHIO vnucuje .vc_row overflow:visible !important */
.su-stats.vc_row { overflow: clip !important; }
.site-footer, #colophon, footer.site-footer { overflow-x: clip; }

/* ===== Ceník v layoutu Neiden Pricing (3 sloupce, střední vyvýšený) ===== */
.su-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(64px, 7vw, 120px);
  border-top: 1px solid var(--su-line);
}
.su-plan { position: relative; display: flex; flex-direction: column; background-color: var(--bg-card); border-bottom: 1px solid var(--su-line); }
.su-plan__top { padding: clamp(32px, 3.2vw, 56px) clamp(24px, 2.6vw, 48px) clamp(32px, 3vw, 48px); border-bottom: 1px solid var(--su-line); }
.su-plan__idx { font-size: 15px; color: var(--su-muted); }
.su-plan__idx b { font-weight: 600; color: var(--su-ink); }
.su-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: clamp(24px, 2.4vw, 40px); }
.su-sec .su-plan__name { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); font-weight: 600; line-height: 1.1; letter-spacing: -.03em; color: var(--su-ink); }
.su-plan__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-primary);
  background-color: var(--su-accent);
}
.su-plan__desc { margin-top: 18px; max-width: 40ch; font-size: clamp(1rem, .95rem + .2vw, 1.125rem); line-height: 1.5; color: var(--su-muted-text); }
.su-plan__price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0 8px; margin-top: clamp(32px, 3.4vw, 56px); color: var(--su-ink); }
.su-plan__price sup { align-self: flex-start; top: 0; margin-top: .35em; font-size: 15px; font-weight: 600; line-height: 1; }
.su-plan__price b { font-size: clamp(3rem, 1.9rem + 2.6vw, 4.5rem); font-weight: 600; line-height: .9; letter-spacing: -.05em; }
.su-plan__price span { padding-bottom: .5em; font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--su-muted-text); }
.su-plan__body { display: flex; flex-direction: column; flex: 1; padding: clamp(28px, 3vw, 48px) clamp(24px, 2.6vw, 48px) clamp(32px, 3vw, 48px); }
.su-plan__group { margin: 8px 0 14px; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: var(--su-muted); }
.su-plan__list + .su-plan__group { margin-top: 32px; }
.su-sec .su-plan__list { margin: 0; padding: 0; list-style: none; }
.su-sec .su-plan__list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid var(--su-line);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--su-ink);
}
.su-plan__list li::before { content: none !important; }
.su-plan__ck {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background-color: var(--bg-card);
  box-shadow: 0 1px 2px rgba(20, 21, 23, .08), inset 0 0 0 1px rgba(20, 21, 23, .06);
}
.su-plan__ck::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--su-ink);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}
.su-sec .su-plan__list li.su-plan__no { color: var(--su-muted); font-weight: 400; }
.su-plan__no .su-plan__ck { background: none; box-shadow: none; }
.su-plan__no .su-plan__ck::after { left: 5px; top: 10px; width: 12px; height: 0; border-width: 1.4px 0 0; border-color: var(--su-muted); transform: none; }
/* rozšíření: vyvýšený = akcentní plné, tmavý = černé plné */
.su-plan--featured .su-plan__list--extra .su-plan__ck { background-color: var(--su-accent); box-shadow: none; }
.su-plan--dark .su-plan__list--extra .su-plan__ck { background-color: var(--bg-dark); box-shadow: none; }
.su-plan--featured .su-plan__list--extra .su-plan__ck::after,
.su-plan--dark .su-plan__list--extra .su-plan__ck::after { border-color: var(--text-light); }
.su-plan__dot { text-decoration: underline dotted rgba(20, 21, 23, .45); text-underline-offset: 4px; }
.su-tip {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(20, 21, 23, .25);
  border-radius: 50%;
  font-family: var(--su-mono);
  font-size: 10px;
  line-height: 1;
  color: var(--su-muted);
  cursor: help;
}
.su-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  color: var(--text-light);
  background-color: var(--bg-dark);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  pointer-events: none;
}
.su-tip:hover::after, .su-tip:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.su-plan__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: auto;
  padding: 22px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--su-ink);
  background-color: var(--bg-card);
  box-shadow: 0 18px 40px -18px rgba(20, 21, 23, .28);
  transition: background-color .3s ease, color .3s ease;
}
.su-plan__body > .su-plan__list--extra { margin-bottom: clamp(32px, 3.4vw, 48px); }
.su-plan__cta span { position: absolute; right: 24px; font-size: 18px; font-weight: 400; }
.su-sec a.su-plan__cta:hover { color: var(--text-light); background-color: var(--bg-dark); }
.su-sec a.su-plan__cta--accent { color: var(--text-primary); background-color: var(--su-accent); box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--su-accent) 70%, transparent); }
.su-sec a.su-plan__cta--accent:hover { background-color: var(--bg-dark); }
@media (min-width: 992px) {
  .su-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; border-left: 1px solid var(--su-line); }
  .su-plan { border-right: 1px solid var(--su-line); border-bottom: 0; }
  .su-plan--featured { margin-top: -56px; padding-top: 0; border-top: 1px solid var(--su-line); }
  .su-plan:not(.su-plan--featured) .su-plan__top { padding-top: clamp(40px, 3.6vw, 64px); }
  .su-plans { align-items: stretch; }
}

/* ===== Přepínač Projekt / Průběžně (Neiden Monthly / Annual), čisté CSS ===== */
.su-billing { position: relative; }
.su-billing__cb { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.su-billing__ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(48px, 5vw, 80px);
}
.su-billing__a, .su-billing__b { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--su-muted); cursor: pointer; transition: color .3s ease; }
.su-billing__cb:not(:checked) ~ .su-billing__ui .su-billing__a,
.su-billing__cb:checked ~ .su-billing__ui .su-billing__b { color: var(--su-ink); }
.su-billing__sw {
  position: relative;
  width: 66px;
  height: 36px;
  margin: 0;
  border-radius: 999px;
  background-color: var(--bg-card);
  box-shadow: inset 0 0 0 1px rgba(20, 21, 23, .14);
  cursor: pointer;
}
.su-billing__sw i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--bg-dark);
  box-shadow: 0 10px 24px -6px rgba(20, 21, 23, .45);
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.su-billing__cb:checked ~ .su-billing__ui .su-billing__sw i { transform: translateX(30px); }
.su-billing__cb:focus-visible ~ .su-billing__ui .su-billing__sw { outline: 2px solid var(--su-accent); outline-offset: 3px; }
.su-billing__pill { margin-left: 10px; padding: 6px 12px; border: 1px solid var(--su-line); border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--su-ink); background-color: var(--bg-card); }
.su-billing .su-plans { margin-top: clamp(56px, 5.5vw, 96px); }
.su-billing__cb:checked ~ .su-plans--a,
.su-billing__cb:not(:checked) ~ .su-plans--b { display: none; }
.su-billing__cb:checked ~ .su-plans--b .su-plan,
.su-billing__cb:not(:checked) ~ .su-plans--a .su-plan { animation: su-plan-in .6s var(--su-ease) both; }
.su-plans .su-plan:nth-child(2) { animation-delay: .06s; }
.su-plans .su-plan:nth-child(3) { animation-delay: .12s; }
@keyframes su-plan-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .su-plan { animation: none !important; } .su-billing__sw i { transition: none; } }

/* ===== Objednávka auditu v layoutu Neiden "Subscribe" (pole pro doménu) ===== */
.su-ordr-sec.vc_row { padding-top: 0 !important; padding-bottom: 0 !important; background-color: var(--bg-page); }
.su-ordr-sec p:empty { display: none; }
.su-ordr { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 40px; padding: clamp(64px, 7vw, 112px) 0; }
.su-sec .su-ordr__title { margin: 18px 0 0; font-size: clamp(3rem, 1.6rem + 4vw, 6rem); font-weight: 600; line-height: .95; letter-spacing: -.055em; color: var(--su-ink); }
.su-ordr__lead { margin-top: 24px; max-width: 34ch; font-size: 15px; line-height: 1.5; color: var(--su-muted-text); }
.su-ordr__form { margin: 0; }
.su-ordr__lbl { display: block; margin: 0 0 12px; font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--su-ink); }
.su-ordr__field { display: flex; align-items: stretch; height: 56px; }
.su-sec .su-ordr__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 16px;
  color: var(--su-ink);
  background-color: var(--bg-card);
  box-shadow: none;
  outline: 0;
}
.su-ordr__input::placeholder { color: var(--text-light-muted); }
.su-ordr__input:focus-visible { box-shadow: inset 0 0 0 1px var(--su-ink); }
.su-sec .su-ordr__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--text-light);
  background-color: var(--bg-dark);
  cursor: pointer;
  transition: background-color .3s ease;
}
.su-ordr__btn svg { width: 16px; height: 16px; transition: transform .3s ease; }
.su-sec .su-ordr__btn:hover { background-color: var(--su-accent);
  color: var(--text-primary);
}
.su-ordr__btn:hover svg { transform: translate(2px, -2px);
  color: var(--text-primary);
}
.su-ordr__note { max-width: 32ch; font-size: 13px; line-height: 1.55; color: var(--su-muted-text); }
.su-ordr__note strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--su-ink); }
@media (min-width: 992px) {
  .su-ordr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .su-ordr__form { padding: 0 clamp(0px, 0vw, 0px); }
  .su-ordr__note { padding-left: clamp(24px, 2.4vw, 40px); }
}

/* ===== Kontakt - fotka přes celou šířku (nohy s notebookem) ===== */
#kontakt.vc_row { overflow: clip !important; }
.su-media--contact { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); }
.su-media--contact img { width: 100%; max-width: none; }
/* ceník: bez pořadových čísel, jen štítek služby */
.su-plan__idx span { font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--su-muted); }

/* Mřížka Ukázky: ostrý přechod do černého pruhu, bez rozostření (jako Neiden) */
.su-reel__edge { display: none !important; }   /* bez rozostření mezi mřížkou a černým pruhem */

/* ===== Černý pruh: místo log citát (bez běžícího wordmarku) ===== */
.su-band-sec.vc_row { padding-bottom: clamp(48px, 5vw, 88px) !important; }
.su-band--quote .su-band__quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  margin: 0;
  padding: clamp(32px, 3.4vw, 56px) clamp(20px, 1.8vw, 32px);
  border-top: 1px solid rgba(248, 247, 244, .1);
  border-bottom: 1px solid rgba(248, 247, 244, .1);
}
.su-band__by { display: flex; align-items: center; gap: 14px; margin: 0; }
.su-band__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.su-band__who { display: block; font-size: 15px; font-weight: 500; color: var(--text-light); }
.su-band__role { display: block; margin-top: 2px; font-family: var(--su-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(248, 247, 244, .45); }
.su-sec .su-band__text {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 26ch;
  font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--text-light);
  quotes: none;
}
.su-band__text::before, .su-band__text::after { content: none; }
@media (min-width: 900px) {
  .su-band--quote .su-band__quote { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; padding-left: 0; padding-right: 0; }
  .su-band__by { align-self: end; padding: 0 clamp(20px, 1.8vw, 32px); }
  .su-sec .su-band__text { padding: 0 clamp(20px, 2vw, 40px); border-left: 1px solid rgba(248, 247, 244, .1); }
}

/* Kontakt - fotka hned od horní hrany sekce (bez černého pruhu nad ní) */
#kontakt.vc_row { padding-top: 0 !important; }
#kontakt > .wpb_column:first-child, #kontakt > .wpb_column:first-child > .vc_column-inner { padding-top: 0 !important; margin-top: 0 !important; }

/* ===== Hero v layoutu Alexfolio: portrét uprostřed, běžící jméno přes fotku (exclusion), role vpravo dole ===== */
.su-hx-sec.vc_row { padding: 0 !important; border: 0; overflow: clip !important; background-color: var(--bg-dark); }
.su-hx-sec .wpb_column, .su-hx-sec .vc_column-inner, .su-hx-sec .wpb_wrapper { padding: 0 !important; margin: 0 !important; }
.su-hx-sec p:empty { display: none; }
.su-hx {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: calc(100vh - var(--su-header, 96px));
  height: calc(100svh - var(--su-header, 96px));
  min-height: 560px;
  overflow: hidden;
  overflow: clip;
  background-color: var(--bg-dark);
  color: var(--text-light);
}
.su-hx__img {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  width: auto;
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: 50% 100%;
  filter: grayscale(1) contrast(1.06);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.su-hx__mq {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  z-index: 5;
  transform: translateY(-50%);
  mix-blend-mode: exclusion;
  pointer-events: none;
}
.su-hx__track { display: flex; width: max-content; animation: su-hx-mq 38s linear infinite; }
.su-hx__track > div { display: flex; flex: none; }
.su-hx__track span {
  flex: none;
  font-size: clamp(5rem, 1rem + 15vw, 17.5rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--text-light);
}
@keyframes su-hx-mq { to { transform: translate3d(-50%, 0, 0); } }
.su-hx__left {
  position: absolute;
  left: clamp(16px, 1.6vw, 28px);
  bottom: clamp(24px, 3vw, 44px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: min(34ch, 40vw);
}
.su-hx__claim { font-size: 15px; line-height: 1.5; color: rgba(248, 247, 244, .72); }
.su-hx__links { display: flex; flex-direction: column; gap: 10px; }
.su-sec .su-hx__links a { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(16px, 1.2vw, 19px); color: var(--text-light); text-decoration: none; }
.su-hx__links i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(248, 247, 244, .7);
  font-style: normal;
  font-size: 13px;
  line-height: 1;
  transition: background-color .3s ease, color .3s ease;
}
.su-sec .su-hx__links a:hover i { color: var(--text-primary); background-color: var(--bg-card); }
.su-sec .su-hx__role {
  position: absolute;
  right: clamp(16px, 1.6vw, 28px);
  bottom: clamp(20px, 2.6vw, 40px);
  z-index: 6;
  margin: 0;
  font-size: clamp(2rem, 1rem + 2.6vw, 4.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
  text-align: right;
  color: var(--text-light);
}
@media (max-width: 767px) {
  .su-hx { height: auto; min-height: calc(100svh - var(--su-header, 80px)); }
  .su-hx__img { height: 78%; }
  .su-hx__mq { top: 40%; }
  .su-hx__left { right: 16px; max-width: none; }
  .su-sec .su-hx__role { top: 20px; bottom: auto; }
  .su-hx__claim { display: none; }
}
@media (prefers-reduced-motion: reduce) { .su-hx__track { animation: none; } }

/* ===== Hlavička nad hero: průhledná, dokud se nescrolluje (OHIO přidá .showed) ===== */
.su-hx { height: 100vh; height: 100svh; }
.header.-fixed { transition: background-color .4s ease, box-shadow .4s ease; }
.header.-fixed:not(.showed) { background-color: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.header.-fixed:not(.showed) .logo img { filter: invert(1); }
.header.-fixed:not(.showed) .button.btn-optional { color: var(--text-light) !important; background-color: transparent !important; }
.header.-fixed:not(.showed) .button.btn-optional:hover { color: var(--text-primary) !important; background-color: var(--bg-card) !important; }

/* ===== Hero: vlevo dole ikony sociálních sítí (Behance, Instagram, Facebook) ===== */
.su-hx__soc { display: flex; flex-direction: column; gap: 12px; }
.su-sec .su-hx__soc a { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(16px, 1.2vw, 20px); color: var(--text-light); text-decoration: none; transition: opacity .2s ease; }
.su-hx__soc svg { flex: none; width: 22px; height: 22px; }
.su-sec .su-hx__soc a:hover { opacity: .6; }

/* ===== Hero: menu v layoutu Alexfolio - logo zůstává (OHIO), vpravo položky menu; po scrollu běžná hlavička ===== */
.su-hx__nav {
  position: absolute;
  top: calc(var(--su-hdr-h, 113px) / 2);
  left: clamp(16px, 1.6vw, 28px);
  right: clamp(16px, 1.6vw, 28px);
  z-index: 7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-50%);
}
.su-hx__navspacer { width: 60px; }
.su-sec .su-hx__nav a { font-size: clamp(16px, 1.25vw, 20px); font-weight: 400; color: var(--text-light); text-decoration: none; transition: opacity .2s ease; }
.su-sec .su-hx__nav a:hover { opacity: .6; }
.header.-fixed .button.btn-optional, .header.-fixed .hamburger-button { transition: opacity .3s ease, visibility .3s; }
@media (min-width: 768px) {
  .header.-fixed:not(.showed) .button.btn-optional,
  .header.-fixed:not(.showed) .hamburger-button { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 767px) { .su-hx__nav { display: none; } }

/* ===== Hlavička: logo zarovnané na svislou linku mřížky (gutter) ===== */
.header.-fixed { padding-left: var(--su-gutter); padding-right: var(--su-gutter); }

/* ===== Rytmus stránky (UX/UI revize) ===== */
/* 1) jeden nadpis sekce = jedna velikost (dřív 52 / 56 / 68 px) */
:root { --su-h2-size: clamp(2.5rem, 1.5rem + 2.4vw, 3.5rem); }
.su-sec .su-h2,
.su-sec .su-process__title,
.su-sec .su-journey__title { font-size: var(--su-h2-size); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
/* 2) střídání ploch: bílá / #FAFAFA / tmavá - Spolupráce dostává jemný podklad, aby za sebou nebyly 3 bílé sekce */
#spoluprace.vc_row { background-color: var(--bg-page-alt); }
/* 3) kratší scrollovací úsek mřížky Ukázky (méně dlouhé tmavé pasáže) */
@supports (animation-timeline: view()) { .su-reel { height: 260vh; } }

/* ===== Sekce 03 - typografie podle Neiden "From brief to launch" ===== */
#jak-spolupracuji .su-h2.su-process__title { font-size: clamp(2.75rem, 1rem + 3.6vw, 4.5rem); font-weight: 600; line-height: .92; letter-spacing: -.05em; }
#jak-spolupracuji .su-lead { max-width: 36ch; font-size: clamp(15px, .85rem + .2vw, 17px); line-height: 1.45; letter-spacing: -.01em; color: rgba(20, 21, 23, .7); }
#jak-spolupracuji .su-step__num { font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
#jak-spolupracuji .su-step__tag { font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0; }
#jak-spolupracuji .su-step__title { font-size: clamp(1.375rem, 1rem + .6vw, 1.5625rem); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; }
#jak-spolupracuji .su-step__text { font-size: 16px; line-height: 1.4; letter-spacing: -.01em; }
#jak-spolupracuji .su-process__quote blockquote { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.035em; }
#jak-spolupracuji .su-person__name { font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
#jak-spolupracuji .su-person__role { font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; text-transform: none; color: rgba(20, 21, 23, .5); }
#jak-spolupracuji .su-note { font-size: 16px; line-height: 1.45; }

/* ===== Sekce 03 - věrněji Neiden: krátký nadpis, sans štítky, bílé odznaky čísel, průhledné karty, ikona uvozovek ===== */
#jak-spolupracuji .su-h2.su-process__title { max-width: 6ch; font-size: clamp(3rem, 1rem + 4.6vw, 5.625rem); font-weight: 600; line-height: .9; letter-spacing: -.045em; word-spacing: .04em; }
#jak-spolupracuji .su-steps { background-color: transparent !important; }
#jak-spolupracuji .su-step:not(.su-step--dark) { background-color: transparent; }
#jak-spolupracuji .su-step__num,
#jak-spolupracuji .su-step__tag { font-family: inherit; text-transform: uppercase; }
#jak-spolupracuji .su-step__num {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0 !important;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--su-ink);
  background-color: var(--bg-card);
  box-shadow: 0 1px 2px rgba(20, 21, 23, .06), 0 6px 16px -8px rgba(20, 21, 23, .18);
}
#jak-spolupracuji .su-step--dark .su-step__num { color: var(--text-primary); background-color: var(--su-accent); box-shadow: none; }
#jak-spolupracuji .su-step__tag { font-size: 12px; font-weight: 600; letter-spacing: 0; }
#jak-spolupracuji .su-step__title { font-size: clamp(1.375rem, 1rem + .6vw, 1.5625rem); font-weight: 700; line-height: 1.1; letter-spacing: -.04em; word-spacing: .03em; }
#jak-spolupracuji .su-step__text { max-width: 40ch; font-size: 16px; line-height: 1.4; letter-spacing: -.015em; color: rgba(20, 21, 23, .7); }
#jak-spolupracuji .su-step--dark .su-step__text { color: rgba(248, 247, 244, .5); }
#jak-spolupracuji .su-process__quote::before { content: ""; display: block; width: 48px; height: 39px; margin: 0 0 22px 56px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2080%2064%22%3E%3Cpath%20fill%3D%22%23D4D4D4%22%20d%3D%22M0%2064V38C0%2017%2010%205%2031%200l4%209C23%2013%2018%2021%2017%2030h15v34H0Zm45%200V38C45%2017%2055%205%2076%200l4%209C68%2013%2063%2021%2062%2030h15v34H45Z%22%2F%3E%3C%2Fsvg%3E") 0 0 / contain no-repeat; }
#jak-spolupracuji .su-process__quote blockquote { text-indent: 56px; letter-spacing: -.04em; }

/* ===== Ceník - hlavička v layoutu Neiden "Packages" (3 sloupce, obří nadpis uprostřed, přepínač pod ním) ===== */
.su-pkhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.su-pkhead__lead { margin-top: 24px; max-width: 34ch; font-size: clamp(15px, .85rem + .2vw, 17px); line-height: 1.45; letter-spacing: -.01em; color: rgba(20, 21, 23, .7); }
.su-sec .su-pkhead__title { margin: 0; font-size: clamp(4rem, 1rem + 7.2vw, 9.25rem); font-weight: 600; line-height: .9; letter-spacing: -.06em; color: var(--su-ink); }
#spoluprace .su-billing__ui { margin-top: clamp(32px, 4vw, 72px); }
@media (min-width: 992px) {
  .su-pkhead { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; }
  .su-pkhead__side { padding-right: clamp(24px, 3vw, 56px); }
  .su-sec .su-pkhead__title { justify-self: center; padding-top: clamp(40px, 5vw, 96px); }
}

/* ===== Neiden systém pro celý web (podle sekce 03): krátké obří nadpisy, malý šedý lead, tučné titulky karet ===== */
:root { --su-h2-size: clamp(3rem, 1rem + 4.6vw, 5.625rem); }
.su-sec .su-h2,
.su-sec .su-process__title,
.su-sec .su-journey__title { font-size: var(--su-h2-size); font-weight: 600; line-height: .9; letter-spacing: -.045em; word-spacing: .04em; }
.su-sec .su-label + .su-h2, .su-journey__top .su-journey__title { margin-top: clamp(24px, 2.4vw, 40px); }
.su-sec .su-lead,
.su-sec .su-journey__lead { max-width: 40ch; margin-top: clamp(24px, 2.4vw, 36px); font-size: clamp(15px, .85rem + .2vw, 17px); line-height: 1.45; letter-spacing: -.01em; color: rgba(20, 21, 23, .7); }
.su-sec--dark .su-lead,
.su-sec--dark .su-journey__lead { color: rgba(248, 247, 244, .6); }
/* 02 Role: lead pod nadpisem vlevo, vpravo model + hodnoty v Neiden stylu */
#hodnota .su-model__text, #hodnota .su-values li { font-size: 16px; line-height: 1.45; letter-spacing: -.015em; }
#hodnota .su-values strong, #hodnota .su-model__text strong { font-weight: 700; letter-spacing: -.03em; }
/* titulky karet a otázek jako Neiden (25 px / 700) */
.su-sec .su-faq summary { font-size: clamp(1.125rem, .95rem + .4vw, 1.375rem); font-weight: 600; letter-spacing: -.035em; }
.su-sec .su-faq__a { font-size: 16px; line-height: 1.45; color: rgba(20, 21, 23, .7); }
.su-sec .su-plan__name { font-weight: 700; letter-spacing: -.045em; }
.su-sec .su-svx__title { font-weight: 600; letter-spacing: -.05em; }
.su-sec .su-svx__desc { font-size: 16px; line-height: 1.45; color: rgba(20, 21, 23, .7); }
.su-sec .su-svx__h { max-width: 7ch; font-size: var(--su-h2-size); line-height: .9; letter-spacing: -.05em; }

/* ===== Hlavička stejná po celé stránce: logo + Služby / Realizace / Kontakt (menu přesunuté do OHIO hlavičky) ===== */
.su-hx__nav.su-hx__nav--hdr { position: absolute; top: 50%; left: var(--su-gutter); right: var(--su-gutter); transform: translateY(-50%); z-index: 2; pointer-events: none; }
.su-hx__nav--hdr a { pointer-events: auto; font-size: clamp(16px, 1.25vw, 20px); font-weight: 400; color: var(--text-light); text-decoration: none; transition: color .4s ease, opacity .2s ease; }
.su-hx__nav--hdr a:hover { opacity: .6; }
.header.showed .su-hx__nav--hdr a { color: var(--su-ink); }
.su-hx__nav--hdr .su-hx__navspacer { width: 80px; }
@media (min-width: 768px) {
  .header.-fixed .button.btn-optional,
  .header.-fixed .hamburger-button { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}
@media (max-width: 767px) { .su-hx__nav.su-hx__nav--hdr { display: none; } }

/* Mřížka Ukázky: místo textu logo Soulistka (SVG) */
.su-reel__logo { display: block; width: min(56vw, 980px); max-width: none; height: auto; }

/* Ceník: střední sloupec nejdelší (jako Neiden) - přesahuje nahoru i dolů, tlačítko níž */
@media (min-width: 992px) {
  .su-billing .su-plans { align-items: start; }
  .su-plans .su-plan--featured { border-bottom: 1px solid var(--su-line); box-shadow: 0 40px 60px -40px rgba(20, 21, 23, .12); }
  .su-plans .su-plan--featured .su-plan__body > .su-plan__list--extra { margin-bottom: calc(clamp(32px, 3.4vw, 48px) + 72px); }
}

/* ===== Černý pruh v layoutu Neiden "What we believe": červeně tónovaný portrét ve tvaru uvozovek + velký výrok přes linky ===== */
.su-bel-sec.vc_row { padding-top: 0 !important; padding-bottom: 0 !important; background: radial-gradient(120% 90% at 50% 0%, var(--bg-dark-3) 0%, var(--bg-dark) 60%, var(--bg-dark) 100%) !important; }
.su-bel { position: relative; padding: clamp(96px, 10vw, 180px) 0 clamp(96px, 9vw, 160px); }
.su-bel__fig { position: absolute; left: 0; top: clamp(48px, 6vw, 110px); z-index: 0; width: min(31%, 560px); aspect-ratio: 4 / 5; }
.su-bel__p { position: absolute; overflow: hidden; background-color: var(--su-accent); }
.su-bel__p img { position: absolute; display: block; max-width: none; object-fit: cover; object-position: 50% 15%; filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: luminosity; opacity: .92; }
.su-bel__p--a { left: 0; top: 0; width: 70%; height: 100%; border-radius: 62% 18px 14px 14px / 40% 18px 14px 14px; }
.su-bel__p--a img { left: 0; top: 0; width: 142.857%; height: 100%; }
.su-bel__p--b { left: 74%; top: 56%; width: 26%; height: 44%; border-radius: 100% 14px 14px 14px / 70% 14px 14px 14px; }
.su-bel__p--b img { left: -284.6%; top: -127.3%; width: 384.6%; height: 227.3%; }
.su-bel__label { position: relative; z-index: 2; margin-left: 33.333%; }
.su-sec .su-bel__text {
  position: relative;
  z-index: 2;
  margin: clamp(28px, 3vw, 48px) 0 0;
  padding: 0;
  border: 0;
  text-indent: 6%;
  font-size: clamp(2rem, .9rem + 3vw, 4.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.04em;
  color: var(--text-light);
  quotes: none;
  background-image: linear-gradient(to bottom, transparent calc(100% - 1px), rgba(248, 247, 244, .1) calc(100% - 1px));
  background-size: 100% 1.12em;
}
.su-bel__text::before, .su-bel__text::after { content: none; }
.su-bel__meta { position: relative; z-index: 2; margin: clamp(48px, 5vw, 80px) 0 0 33.333%; max-width: 38ch; }
.su-bel__lead { font-size: clamp(15px, .85rem + .25vw, 18px); line-height: 1.45; letter-spacing: -.01em; color: rgba(248, 247, 244, .55); }
.su-bel__who { margin-top: clamp(40px, 4vw, 64px); font-size: 15px; font-weight: 600; color: var(--text-light); }
.su-bel__role { margin-top: 4px; font-size: 15px; color: rgba(248, 247, 244, .8); }
.su-bel__role span { color: rgba(248, 247, 244, .4); }
.su-bel__role b { font-weight: 600; color: var(--text-light); }
.su-bel__sign { margin-top: 28px; font-family: "Mrs Saint Delafield", cursive; font-size: clamp(2.5rem, 1.6rem + 1.6vw, 3.5rem); line-height: 1; color: var(--su-accent-soft); transform: rotate(-4deg); transform-origin: left center; }
@media (max-width: 899px) {
  .su-bel__fig { position: relative; top: 0; width: 70%; margin-bottom: 40px; }
  .su-bel__label, .su-bel__meta { margin-left: 0; }
}

/* ===== 09 Otázky - levý sloupec podle Neiden "Quick answers" ===== */
.su-faq-side { display: flex; flex-direction: column; min-height: 100%; }
.su-faqmore { margin-top: clamp(96px, 14vw, 240px); }
.su-faqmore__t { font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-transform: uppercase; color: var(--su-ink); }
.su-faqmore__s { margin-top: 4px; font-size: clamp(15px, .85rem + .2vw, 17px); letter-spacing: -.01em; color: rgba(20, 21, 23, .6); }
.su-sec a.su-faqmore__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 300px);
  margin-top: 28px;
  padding: 22px 56px 22px 24px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-light);
  background-color: var(--bg-dark);
  transition: background-color .3s ease;
}
.su-faqmore__btn span { position: absolute; right: 24px; font-size: 20px; font-weight: 400; }
.su-sec a.su-faqmore__btn:hover { background-color: var(--su-accent);
  color: var(--text-primary);
}

/* Čemu věřím: portrét v brýlích bez červeného filtru, bez podpisu */
.su-bel__p { background-color: var(--bg-dark-2); }
.su-bel__p img { filter: none; mix-blend-mode: normal; opacity: 1; object-position: 45% 40%; }
.su-bel__sign { display: none; }

/* ===== Patička v layoutu Neiden: "Let's Talk" pás, kontakty + formulář, navigace + obří logo ===== */
.su-ft-sec.vc_row { padding: 0 !important; background-color: var(--bg-dark) !important; overflow: clip !important; }
.su-ft-sec p:empty, .su-ft-sec script { display: none; }
.su-ft { --ft-line: rgba(248, 247, 244, .1); color: var(--text-light); }
.su-ft__k { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: rgba(248, 247, 244, .45); }
/* 1) pás Ozvěte se */
.su-ft__talk { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(80px, 9vw, 150px) 0; border-bottom: 1px solid var(--ft-line); }
.su-ft__talkbg { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: center / cover no-repeat; filter: blur(40px) grayscale(.2) brightness(.32); transform: scale(1.15); }
.su-ft__lead { margin-top: 24px; max-width: 32ch; font-size: clamp(15px, .85rem + .2vw, 17px); line-height: 1.45; color: rgba(248, 247, 244, .55); }
.su-sec .su-ft__big { margin: 0; font-size: clamp(3.5rem, 1rem + 6.4vw, 8rem); font-weight: 600; line-height: .9; letter-spacing: -.06em; white-space: nowrap; color: var(--text-light); }
.su-ft__cap { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: rgba(248, 247, 244, .7); }
.su-ft__cap b { color: var(--text-light); font-weight: 600; }
.su-ft__bars { display: inline-flex; gap: 3px; }
.su-ft__bars i { width: 3px; height: 14px; background-color: var(--su-accent-soft); }
/* 2) kontakty + formulář */
.su-ft__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding: clamp(56px, 6vw, 96px) 0; border-bottom: 1px solid var(--ft-line); }
.su-sec .su-ft__phone { display: block; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 500; letter-spacing: -.03em; color: var(--text-light); text-decoration: none; }
.su-sec .su-ft__mail { display: block; margin-top: 6px; font-size: 18px; font-weight: 500; color: var(--text-light); text-decoration: none; }
.su-ft__addr { margin: 18px 0 40px; font-size: 14px; color: rgba(248, 247, 244, .45); }
.su-ft__soc { display: flex; gap: 18px; margin-bottom: 40px; }
.su-sec .su-ft__soc a { color: var(--text-light); transition: opacity .2s ease; }
.su-sec .su-ft__soc a:hover { opacity: .6; }
.su-ft__soc svg { width: 20px; height: 20px; display: block; }
.su-ft__lt { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: rgba(248, 247, 244, .45); }
.su-ft__lt b { color: var(--text-light); font-weight: 600; font-variant-numeric: tabular-nums; }
.su-ft__form { margin: 0; }
.su-ft__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.su-ft__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; }
.su-ft__f { position: relative; display: block; margin: 0; padding-top: 22px; border-bottom: 1px solid var(--ft-line); }
.su-ft__f > span { position: absolute; top: 0; right: 10px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--text-light); }
.su-ft__f > span::after { content: ""; position: absolute; top: 1px; right: -10px; border: 4px solid transparent; border-top-color: var(--su-accent-soft); border-right-color: var(--su-accent-soft); }
.su-sec .su-ft__f input, .su-sec .su-ft__f textarea { display: block; width: 100%; margin: 0; padding: 12px 0 16px; border: 0; border-radius: 0; font: inherit; font-size: 15px; color: var(--text-light); background: transparent; box-shadow: none; outline: 0; resize: vertical; }
.su-ft__f input::placeholder, .su-ft__f textarea::placeholder { color: rgba(248, 247, 244, .3); }
.su-ft__f:focus-within { border-bottom-color: rgba(248, 247, 244, .6); }
.su-ft__f--full { margin-top: 18px; }
.su-ft__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 28px; }
.su-sec .su-ft__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 20px 56px 20px 24px; border: 0; border-radius: 0; font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-primary); background-color: var(--bg-card); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.su-ft__btn span { position: absolute; right: 22px; font-size: 20px; font-weight: 400; }
.su-sec .su-ft__btn:hover { color: var(--text-primary); background-color: var(--su-accent); }
.su-ft__hours { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--text-light); }
.su-ft__hours span { display: block; margin-bottom: 4px; color: rgba(248, 247, 244, .45); }
.su-ft__note { margin-top: 16px; font-size: 12px; color: rgba(248, 247, 244, .45); }
.su-sec .su-ft__note a { color: var(--text-light); text-decoration: none; }
.su-ft__msg { display: none; margin-top: 16px; padding: 14px 16px; font-size: 14px; color: var(--text-light); background-color: rgba(248, 247, 244, .06); }
.su-form-ok .su-ft__msg--ok, .su-form-err .su-ft__msg--err { display: block; }
.su-ft__msg--err { background-color: color-mix(in srgb, var(--su-accent) 35%, transparent); }
/* 3) navigace + obří logo + právní řádek */
.su-ft__bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding: clamp(56px, 6vw, 96px) 0 clamp(96px, 8vw, 140px); }
.su-ft__nav { display: flex; flex-direction: column; gap: 10px; }
.su-sec .su-ft__nav a { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--text-light); text-decoration: none; }
.su-sec .su-ft__nav a:hover { color: var(--su-accent-soft); }
.su-ft__brand { position: relative; }
.su-ft__meta { display: flex; gap: 16px; margin-bottom: 18px; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: rgba(248, 247, 244, .45); }
.su-ft__meta b { color: var(--text-light); font-weight: 600; }
.su-ft__logo { display: block; width: 100%; max-width: none; height: auto; }
.su-ft__legal { display: grid; gap: 20px; font-size: 12px; color: rgba(248, 247, 244, .45); }
.su-ft__made { display: flex; align-items: center; gap: 12px; }
.su-ft__made img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.su-ft__made b, .su-ft__copy b { color: var(--text-light); font-weight: 600; }
.su-ft__links { display: flex; gap: 24px; }
.su-sec .su-ft__links a { color: rgba(248, 247, 244, .45); text-decoration: none; text-transform: uppercase; }
.su-sec .su-ft__links a:hover { color: var(--text-light); }
@media (min-width: 992px) {
  .su-ft__talk { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .su-ft__c1 { padding-right: clamp(24px, 3vw, 56px); }
  .su-ft__cap { justify-self: end; }
  .su-ft__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; }
  .su-ft__info { padding-right: clamp(24px, 3vw, 56px); }
  .su-ft__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-ft__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .su-ft__bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; row-gap: 40px; }
  .su-ft__meta { position: absolute; top: 0; right: 0; }
  .su-ft__brand { padding-top: 40px; }
  .su-ft__legal { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .su-ft__links { justify-content: flex-end; }
}
/* původní patička šablony OHIO se na této stránce nezobrazuje - nahrazuje ji tato */
.site-footer, footer.site-footer, #colophon { display: none !important; }
/* patička: gutter + neutralizace odstavců z wpautop */
.su-ft-sec.vc_row { padding-left: var(--su-gutter) !important; padding-right: var(--su-gutter) !important; }
.su-ft p { display: contents; margin: 0; }
.su-ft__nav a { display: block; }
.su-ft__info a { display: block; }
.su-ft__logo { width: 100%; }

/* Sekce 03 - oprava hoveru: text a odznak čísla se přebarví podle toho, kde je černý blok */
#jak-spolupracuji .su-step__text, #jak-spolupracuji .su-step__num { transition: color .35s var(--su-ease) .1s, background-color .35s var(--su-ease) .1s, box-shadow .35s var(--su-ease) .1s; }
#jak-spolupracuji .su-steps .su-step:hover .su-step__text { color: rgba(248, 247, 244, .55); }
#jak-spolupracuji .su-steps .su-step:hover .su-step__num { color: var(--text-primary); background-color: var(--su-accent); box-shadow: none; }
#jak-spolupracuji .su-steps:has(.su-step:hover) .su-step--dark:not(:hover) .su-step__text { color: rgba(20, 21, 23, .7); }
#jak-spolupracuji .su-steps:has(.su-step:hover) .su-step--dark:not(:hover) .su-step__num { color: var(--su-ink); background-color: var(--bg-card); box-shadow: 0 1px 2px rgba(20, 21, 23, .06), 0 6px 16px -8px rgba(20, 21, 23, .18); }

/* Reference: bez jmen pod fotkami (jméno a firma jsou v kartě po najetí myší) */
@media (hover: hover) { .su-clients-mq .su-client__by { display: none; } }

/* Reference: Jméno Příjmení / funkce / firma - bez verzálek */
.su-client__who-in { gap: 4px; }
.su-client__who-name { margin-bottom: 4px; font-size: clamp(15px, 4.6cqi, 19px); font-weight: 600; letter-spacing: -.02em; text-transform: none !important; }
.su-client__who-fn, .su-client__who-co { display: block; font-family: inherit; font-size: clamp(12px, 3.4cqi, 14px); line-height: 1.35; letter-spacing: -.005em; text-transform: none; }
.su-client__who-fn { color: rgba(248, 247, 244, .85); }
.su-client__who-co { color: rgba(248, 247, 244, .6); }

/* Reference: místo samo-běžícího kolotoče carousel se šipkami (posun po kartách, swipe na mobilu) */
.su-cx__nav { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: clamp(32px, 3vw, 48px) 0 16px; }
.su-cx__hint { margin-right: 12px; font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--su-muted); }
.su-sec .su-cx__btn { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid var(--su-line); border-radius: 0; font: inherit; font-size: 18px; line-height: 1; color: var(--su-ink); background-color: var(--bg-card); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.su-sec .su-cx__btn:hover { color: var(--text-light); background-color: var(--bg-dark); }
.su-clients-mq { overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-mask-image: none !important; mask-image: none !important; overscroll-behavior-x: contain; }
.su-clients-mq::-webkit-scrollbar { display: none; }
.su-clients-mq .su-clients-mq__track { animation: none !important; transform: none !important; }
.su-clients-mq .su-client { scroll-snap-align: start; }

/* Ceník: poznámka pod ceníkem na střed */
.su-sec .su-note--center { max-width: none; margin-left: auto; margin-right: auto; text-align: center; line-height: 1.7; }

/* Čemu věřím: podpis Senior Art Director / Radka Ulmanová / Soulistka */
.su-bel__sig { margin-top: clamp(40px, 4vw, 64px); }
.su-bel__sig .su-bel__role { margin-top: 0; font-size: 13px; letter-spacing: .02em; color: rgba(248, 247, 244, .55); }
.su-bel__sig .su-bel__who { margin-top: 6px; }
.su-bel__co { margin-top: 2px; font-size: 15px; color: rgba(248, 247, 244, .8); }

/* Patička: ateliér na Opavské + povinné údaje */
.su-ft__addr span { display: block; margin-top: 8px; color: rgba(248, 247, 244, .45); }
.su-ft__reg { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(248, 247, 244, .12); line-height: 1.7; }
.su-ft__reg b { color: var(--text-light); font-weight: 600; }

/* Hlavička jako Alexfolio: menu jen v hero, při scrollu odjede s ním */
.header.-fixed { position: absolute !important; transform: none !important; }
.header.-fixed.showed { background-color: transparent !important; box-shadow: none !important; }
.header.showed .su-hx__nav--hdr a { color: var(--text-light); }

/* Timeline: vybraní klienti u každé pozice */
.su-tl__cl { margin-top: 16px; max-width: 44ch; font-size: var(--su-fs-small); line-height: 1.6; color: var(--su-text-dark); }
.su-tl__cl-k { display: block; margin-bottom: 6px; font-family: var(--su-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--su-accent-soft); }
.su-tl__cl-v { display: block; }
.su-bel__sig .su-bel__who:first-child { margin-top: 0; }

/* Hero: claim lícuje zleva s pravým sloupcem sekce 02 (Model spolupráce) */
@media (min-width: 768px) {
  .su-hx { container-type: inline-size; }
  .su-hx__claim { position: relative; left: calc(var(--su-gutter) + (100cqw - 2 * var(--su-gutter)) * 5 / 12 - clamp(16px, 1.6vw, 28px)); }
}

/* Hero: claim pod rotujícím jménem, 2 řádky, lícuje s Model spolupráce; ikony zůstávají vlevo dole */
@media (min-width: 768px) {
  .su-hx__left { display: contents; }
  .su-hx__soc { position: absolute; left: clamp(16px, 1.6vw, 28px); bottom: clamp(24px, 3vw, 44px); z-index: 6; }
  .su-hx__claim { position: absolute; z-index: 6; left: calc(var(--su-gutter) + (100cqw - 2 * var(--su-gutter)) * 5 / 12); top: calc(46% + .45 * clamp(5rem, 1rem + 15vw, 17.5rem) + 24px); max-width: 68ch; text-wrap: balance; }
}
/* Sekce 03: nadpis s nedělitelnou mezerou "Od zadání" se nesmí lámat uvnitř slova */
#jak-spolupracuji .su-h2.su-process__title { max-width: none; overflow-wrap: normal; }

/* Reference: dlouhá recenze - na hover se text pomalu odroluje (teleprompter), na dotyku rozbalovací "Celá recenze" */
.su-clients-mq .su-client__hq--roll { top: 36%; bottom: 7%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.su-clients-mq .su-client__hq--roll.is-long { justify-content: flex-start; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 86%, transparent 100%); }
.su-client__roll { padding: 12px 0; transform: translate3d(0, 0, 0); transition: transform .8s var(--su-ease); }
@media (hover: hover) {
  .su-client:hover .su-client__hq--roll.is-long .su-client__roll,
  .su-client:focus-within .su-client__hq--roll.is-long .su-client__roll { transform: translate3d(0, var(--roll, 0), 0); transition: transform var(--roll-t, 0s) linear 1.4s; }
}
@media (prefers-reduced-motion: reduce) {
  .su-clients-mq .su-client__hq--roll.is-long { overflow-y: auto; }
  .su-client__roll { transition: none !important; transform: none !important; }
}
.su-client__more { margin-top: 10px; }
.su-client__more summary { display: inline-flex; gap: 8px; font-family: var(--su-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); cursor: pointer; list-style: none; }
.su-client__more summary::-webkit-details-marker { display: none; }
.su-client__more summary::after { content: "+"; }
.su-client__more[open] summary::after { content: "-"; }
.su-client__more div { margin-top: 8px; }

/* Calendly v popup okně (načítá se až po kliknutí) */
.calendly-overlay { background-color: rgba(20, 21, 23, .82) !important; backdrop-filter: blur(6px); }
.calendly-overlay .calendly-popup { border-radius: 0 !important; }
.calendly-overlay .calendly-popup-close { filter: none; }

/* Reference: rotující titulek o něco menší */
.su-clients__ticker { min-height: clamp(120px, 13vw, 230px); }
.su-clients__track > span { font-size: clamp(2.75rem, 1.3rem + 5.2vw, 7rem); }
/* Calendly: globální pravidlo šablony [class*=header] [class*=overlay] {opacity:0} skrývalo popup */
html body div.calendly-overlay.calendly-overlay { opacity: 1 !important; background: rgba(20, 21, 23, .82) !important; }
/* Calendly: zavírací křížek jako výrazné tlačítko u pravého horního rohu okna */
html body .calendly-overlay .calendly-popup-close { width: 44px; height: 44px; background-color: var(--bg-dark); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; filter: invert(1); box-shadow: 0 8px 24px rgba(248, 247, 244, .12); opacity: 1; cursor: pointer; transition: transform .2s ease; }
html body .calendly-overlay .calendly-popup-close:hover { transform: rotate(90deg); }
@media (min-width: 976px) {
  html body .calendly-overlay .calendly-popup-close { top: max(12px, calc(50vh - min(45vh, 350px) - 56px)); right: calc((100vw - clamp(900px, 80vw, 1000px)) / 2); }
}
/* Calendly: stylový křížek - tenký kruh, linkové X, popisek Zavřít, na hover červená + otočení */
html body .calendly-overlay .calendly-popup-close { width: 48px; height: 48px; border: 1px solid rgba(248, 247, 244, .45); border-radius: 50%; background: transparent none; filter: none; box-shadow: none; transform: none; transition: background-color .3s ease, border-color .3s ease; }
html body .calendly-overlay .calendly-popup-close::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(45deg, transparent calc(50% - .75px), var(--bg-card) calc(50% - .75px), var(--bg-card) calc(50% + .75px), transparent calc(50% + .75px)), linear-gradient(-45deg, transparent calc(50% - .75px), var(--bg-card) calc(50% - .75px), var(--bg-card) calc(50% + .75px), transparent calc(50% + .75px)); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
html body .calendly-overlay .calendly-popup-close::after { content: "Zavřít"; position: absolute; top: 50%; right: calc(100% + 14px); transform: translateY(-50%); font-family: var(--su-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: rgba(248, 247, 244, .7); pointer-events: none; transition: color .3s ease; }
html body .calendly-overlay .calendly-popup-close:hover { transform: none; background-color: var(--su-accent); border-color: var(--su-accent); }
html body .calendly-overlay .calendly-popup-close:hover::before { transform: rotate(90deg); }
html body .calendly-overlay .calendly-popup-close:hover::after { color: var(--text-light); }

/* ==========================================================================
   22. CENÍK - barvy Styl B (rozložení, hrany a typografie zůstávají podle Neiden)
   ========================================================================== */
#spoluprace .su-plan__badge { color: var(--accent-primary); background-color: var(--accent-soft); }
#spoluprace .su-plan__cta,
#spoluprace a.su-plan__cta--accent { color: var(--text-light); background-color: var(--bg-dark); box-shadow: none; }
#spoluprace a.su-plan__cta:hover,
#spoluprace a.su-plan__cta--accent:hover { color: var(--text-light); background-color: var(--bg-dark-3); }
/* Jak spolupracuji - zarovnání hover bloku: téma dává li margin 4px, karta pak nesedí s černým blokem */
#jak-spolupracuji .su-steps > li.su-step,
#jak-spolupracuji .su-steps > li.su-steps__hl { margin: 0 !important; }
/* Ceník: střed nejdelší (přesah nahoru i dolů), boční karty stejně vysoké */
@media (min-width: 992px) {
  .su-billing .su-plans { align-items: stretch; }
  .su-billing .su-plans .su-plan--featured { margin-bottom: -56px; }
  .su-billing .su-plans .su-plan--featured .su-plan__body > .su-plan__list--extra { margin-bottom: clamp(32px, 3.4vw, 48px); }
}

/* Strategický audit: nadpis na 3 řádky ve vlastním sloupci (nepřetéká do formuláře) */
@media (min-width: 992px) {
  .su-sec .su-ordr__title { font-size: clamp(3rem, 1.2rem + 3.2vw, 5rem); }
  .su-ordr__col { padding-right: clamp(24px, 2.4vw, 40px); }
}
/* Realizace: odkazy u projektu (případová studie, brandbook, živý web) */
.neiden-card-image > a { display: block; width: 100%; height: 100%; }
.su-sec ul.neiden-caption__links { display: grid; gap: 10px; margin: 20px 0 0 !important; padding: 0; list-style: none; }
.neiden-caption__links > li { margin: 0; padding: 0; }
.neiden-caption__links > li::before { content: none; }
.su-sec .neiden-caption__links a { display: flex; justify-content: space-between; gap: 16px; max-width: 280px; padding-bottom: 6px; border-bottom: 1px solid rgba(248, 247, 244, .24); font-family: var(--su-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); text-decoration: none; transition: color .3s ease, border-color .3s ease; }
.su-sec .neiden-caption__links a:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
/* Odkazy u projektu v prvním sloupci; na mobilu se sloupec s odkazy ukáže až za popisem */
.su-sec .neiden-caption__col:first-child > ul.neiden-caption__links { margin-top: 0 !important; }
@media (max-width: 767px) {
  .neiden-caption__col:first-child:has(.neiden-caption__links) { display: flex; order: 3; padding-bottom: 40px; }
  .neiden-caption__col:first-child:has(.neiden-caption__links) .neiden-caption__idx { display: none; }
}
/* Hero: CTA na audit pod claimem */
.su-hx__claim-t { display: block; }
.su-sec a.su-hx__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; margin-top: 20px; padding: 0 20px; border: 0; border-radius: 0; background-color: var(--accent-primary); color: var(--text-primary); font: 500 15px/1.2 var(--su-font); letter-spacing: .01em; text-decoration: none; transition: background-color .3s var(--su-ease), color .3s var(--su-ease); }
.su-sec a.su-hx__cta:hover { background-color: var(--text-light); color: var(--text-primary); }
.su-hx__cta span { font-size: 18px; font-weight: 400; }
@media (max-width: 767px) {
  .su-hx__claim { display: block; }
  .su-hx__claim-t { display: none; }
  .su-sec a.su-hx__cta { margin-top: 0; }
}
/* Mobil: bez vodorovného posunu stránky; role v hero pod hlavičkou (nepřekrývá tlačítka) */
html, body { overflow-x: clip; }
@media (max-width: 767px) {
  .su-sec .su-hx__role { top: 112px; }
}
/* Pás log klientů: víc vzduchu nad logy */
.neiden-logo-ticker { padding-top: clamp(72px, 7vw, 128px); }

/* Hero: pozadí sjednocené s černým pozadím portrétu */
.su-hx-sec, .su-sec .su-hx { background-color: #000 !important; }

/* Reference: nápověda k citacím bokem nad karuselem */
.su-cx__note { margin-right: auto; font-family: var(--su-mono); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--su-muted); }
@media (max-width: 599px) { .su-cx__nav { flex-wrap: wrap; } .su-cx__note { flex: 1 0 100%; margin-bottom: 8px; } }

/* Dva odstavce leadu pod sebou */
.su-sec .su-lead + .su-lead { margin-top: 1em; }

/* Mobil: popisek přes portrét v mřížce Ukázky skrýt */
@media (max-width: 767px) { .su-reel__cap { display: none !important; } }

/* Mobil a dotyková zařízení: nápověda "Najetím na ukázku..." nedává smysl */
@media (max-width: 767px), (hover: none) { .su-cx__note { display: none !important; } }

/* FAQ: na mobilu výzva "Máte jinou otázku?" až pod otázkami */
.su-faqmore.su-faqmore--m { display: none; }
@media (max-width: 767px) {
  .su-faq-side .su-faqmore { display: none; }
  .su-faqmore.su-faqmore--m { display: block; margin-top: 40px; }
}

/* V číslech: číslo nahoře, čitelný popisek pod ním (rev 2026-10-05) */
.su-stats .su-stat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 0; }
.su-stats .su-stat .su-stat__num { grid-column: 1; align-self: end; }
.su-stats .su-stat .su-stat__label {
  justify-self: start; max-width: 24ch; margin-top: clamp(14px, 1.4vw, 22px);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(1rem, .92rem + .35vw, 1.25rem);
  font-weight: 500; line-height: 1.35; letter-spacing: -.01em; text-transform: none; text-align: left;
  color: rgba(248, 247, 244, .86);
}

/* Model spolupráce + hodnoty: jedna linka místo dvou (rev 2026-10-05) */
.su-model + .su-values { border-top: 0; margin-top: 0; }
/* Výrok "Čemu věřím": levý praporek ve sloupci textu, ne přes fotku (rev 2026-10-05) */
@media (min-width: 900px) {
  .su-sec .su-bel__text { margin-left: 33.333%; text-indent: 0; text-align: left; font-size: clamp(2rem, .6rem + 2.4vw, 3.75rem); }
  .su-sec .su-bel__text p { margin: 0; text-align: left; }
}