/*
 * NAVO Design — scoped styly (port etalonu, podetapa 2b/1: foundation).
 * Zdroj: docs/design/navo-web-2026-06-26/{navo-tokens.css, home.css}.
 *
 * IZOLACE (tvrdá podmínka): VŠE scopováno pod `.navo-root`. Žádné top-level /
 * element selektory mimo `.navo-root`, žádný import z globals.css. Změna tohoto
 * souboru nemůže prosáknout do ARMA ani e-shopů.
 *
 * PALETA: etalon má "hard-locked" paletu (dark #171b21 / gold #d5ac87 /
 * paper #faf9f7). Portujeme ji přímo sem (ne přes DB --theme-color-*), protože
 * NAVO vizuál = 100% parita s etalonem. DB ShopTheme tedy NEN­Í barevný driver
 * NAVO renderu (obsah teče z DB, paleta je locked v CSS).
 *
 * Fonty: ./navo-fonts.css (scoped @font-face, self-host /navo/fonts/).
 */

/* ============================================================
   Tokeny + lokální aliasy (etalon :root → .navo-root)
   ============================================================ */
.navo-root {
  /* Brand (hard-locked) */
  --dark: #171b21;
  --gold: #d5ac87;
  --white: #ffffff;
  --paper: #faf9f7;
  --steel: #6b6f76;
  --line: #e8e4dc;

  /* Semantic aliasy */
  --bg: var(--paper);
  --fg: var(--dark);
  --fg-secondary: var(--steel);
  --accent: var(--gold);
  --border: var(--line);

  /* Type families (viz navo-fonts.css) */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --display: var(--font-display);
  --display-weight: 500;
  --display-tracking: -0.02em;
  --weight-display: 500;
  --weight-body: 400;
  --weight-meta: 500;

  /* Scale */
  --fs-overline: 11px;
  --fs-meta: clamp(12px, 0.3vw + 11px, 13px);
  --fs-body: clamp(15px, 0.4vw + 13.5px, 17px);
  --fs-lead: clamp(17px, 0.6vw + 15px, 20px);
  --fs-h6: clamp(16px, 0.5vw + 14px, 18px);
  --fs-h2: clamp(38px, 4.5vw, 52px);

  /* Line heights / spacing */
  --lh-tight: 1.05;
  --lh-snug: 1.18;
  --lh-normal: 1.45;
  --lh-prose: 1.6;
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-overline: 0.18em;
  --ls-wide: 0.14em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* Layout */
  --measure: 66ch;
  --container: 1320px;
  --container-wide: 1560px;
  --gutter: 32px;
  --page-pad: 40px;
  --nav-h: 66px;

  /* Borders / motion */
  --hairline: 1px;
  --radius-0: 0;
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 480ms;

  /* Text + hairline tints on dark surfaces */
  --on-dark: rgba(255, 255, 255, 0.82);
  --on-dark-soft: rgba(255, 255, 255, 0.62);
  --on-dark-faint: rgba(255, 255, 255, 0.45);
  --hairline-on-dark: rgba(255, 255, 255, 0.16);

  /* Page surface */
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

/* ============================================================
   Base reset (scoped)
   ============================================================ */
.navo-root *,
.navo-root *::before,
.navo-root *::after { box-sizing: border-box; }

.navo-root img { display: block; max-width: 100%; }
.navo-root button { font-family: inherit; }

/* Nav je `position: fixed` (mimo tok) — main odsadí svůj obsah o výšku nav,
   aby stránky bez hera nezmizely pod navem. Hero tuto mezeru ruší vlastním
   záporným margin-top (viz `.hero`), takže sám sedí až k hornímu okraji. */
.navo-root main { padding-top: var(--nav-h); }

.navo-root :focus { outline: none; }
.navo-root :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.navo-root ::selection { background: var(--dark); color: var(--gold); }

.navo-root :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.navo-root p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
.navo-root a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.navo-root a:hover { color: var(--gold); border-color: var(--gold); }

/* ---- Skip link ---- */
.navo-root .skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  transform: translateY(calc(-100% - var(--s-4)));
  background: var(--dark);
  color: var(--paper);
  border: 1px solid var(--gold);
  padding: 12px 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.navo-root .skip-link:focus { transform: translateY(0); }

/* ============================================================
   Display headings + utility
   ============================================================ */
.navo-root .h-1, .navo-root .h-2, .navo-root .h-3, .navo-root .h-4, .navo-root .h-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.96;
  color: inherit;
  margin: 0;
  text-wrap: balance;
  /* Tailwind (globals.css) má utility `.h-1`..`.h-4` = height:0.25rem..1rem.
     Naše stejnojmenné nadpisové třídy by jinak zdědily Tailwindí height a
     zkolabovaly (text přetéká). `.navo-root .h-N` (spec 0,2,0) přebije
     Tailwindí `.h-N` (0,1,0). Harness bez Tailwindu problém neměl. */
  height: auto;
  width: auto;
}
.navo-root .h-1 { font-size: clamp(56px, 6.6vw, 96px); }
.navo-root .h-2 { font-size: clamp(40px, 4.5vw, 60px); letter-spacing: -0.015em; line-height: 1.04; }
.navo-root .h-3 { font-size: clamp(28px, 2.4vw, 36px); letter-spacing: -0.01em; line-height: 1.15; }
.navo-root .h-4 { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -0.005em; line-height: 1.2; }

.navo-root .overline {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--steel);
  margin: 0;
  display: inline-block;
  /* `.overline` koliduje s globální Tailwind utilitou `.overline`
     (`text-decoration-line: overline`) z app shellu, do kterého je `.navo-root`
     zanořený → bez resetu prosákne čára NAD textem (etalon ji nemá). Vyšší
     specificita (`.navo-root .overline`) ji přebije. NEovlivní `::before` linku
     u `.overline--rule` (ta je background, ne text-decoration). */
  text-decoration-line: none;
}
.navo-root .overline--gold { color: var(--gold); }
.navo-root .overline--rule { display: inline-flex; align-items: center; gap: 14px; }
.navo-root .overline--rule::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.navo-root .overline--lead { margin-bottom: var(--s-4); }

.navo-root .lede { font-size: var(--fs-lead); line-height: 1.55; max-width: 56ch; color: inherit; margin: 0; }
.navo-root .meta { font-size: var(--fs-meta); color: var(--steel); line-height: 1.5; }

.navo-root .container { max-width: var(--container); margin: 0 auto; padding-inline: var(--page-pad); }
.navo-root .container-wide { max-width: var(--container-wide); margin: 0 auto; padding-inline: var(--page-pad); }

.navo-root .hair { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- Buttons ---- */
.navo-root .btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 17px 24px; border-radius: 0;
  border: 1px solid var(--dark);
  background: var(--dark); color: var(--white);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
.navo-root .btn:hover { background: transparent; color: var(--dark); }
.navo-root .btn--ghost { background: transparent; color: var(--dark); }
.navo-root .btn--ghost:hover { background: var(--dark); color: var(--white); }
.navo-root .btn--gold { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.navo-root .btn--gold:hover { background: transparent; color: var(--gold); }
.navo-root .btn--invert-ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.navo-root .btn--invert-ghost:hover { background: var(--paper); color: var(--dark); }

.navo-root .text-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding: 6px 0;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.navo-root .text-link:hover { color: var(--gold); border-color: var(--gold); }

/* ---- Sections ---- */
.navo-root .section { padding-block: 128px; position: relative; }
.navo-root .section--dark { background: var(--dark); color: var(--paper); }
.navo-root .section--dark .overline { color: rgba(255, 255, 255, 0.55); }
.navo-root .section--dark .overline--gold { color: var(--gold); }
.navo-root .section--dark :is(.h-1, .h-2, .h-3, .h-4) { color: var(--paper); }
.navo-root .section--dark .lede,
.navo-root .section--dark p { color: rgba(255, 255, 255, 0.78); }

/* ============================================================
   Top nav
   ============================================================ */
.navo-root .topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(23, 27, 33, 0);
  color: var(--paper);
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.navo-root .topnav-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 18px 40px;
  display: flex; align-items: center; gap: 32px;
}
.navo-root .topnav-logo {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto; text-decoration: none; color: inherit;
  border: 0; border-bottom: 0 !important;
}
.navo-root .topnav-logo:hover,
.navo-root .topnav-logo:focus,
.navo-root .topnav-logo:focus-visible { text-decoration: none; border-bottom: 0; }
.navo-root .logo-stack { position: relative; display: inline-block; line-height: 0; }
.navo-root .logo-navo { height: 24px; }
.navo-root .logo-dama { height: 30px; }
.navo-root .logo-img { display: block; height: 100%; width: auto; transition: opacity 250ms var(--ease-out); }
.navo-root .logo-stack .logo-dark { position: absolute; inset: 0; opacity: 0; }
.navo-root .logo-stack .logo-light { opacity: 1; }
.navo-root .logo-sep { display: none; }

.navo-root .topnav-links {
  flex: 1; display: flex; justify-content: center;
  gap: clamp(18px, 1.4vw, 30px); white-space: nowrap;
}
.navo-root .topnav-links a {
  position: relative;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(12px, 0.95vw, 16px);
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap; color: inherit; text-decoration: none;
  padding: 6px 0; border-bottom: 0;
  transition: color var(--dur) var(--ease-out);
}
.navo-root .topnav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.navo-root .topnav-links a:hover { color: var(--gold); }
.navo-root .topnav-links a:hover::after,
.navo-root .topnav-links a:focus-visible::after,
.navo-root .topnav-links a[aria-current="page"]::after { transform: scaleX(1); }

.navo-root .topnav-right { flex: 0 0 auto; display: flex; align-items: center; gap: 22px; }
.navo-root .lang {
  position: relative;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(12px, 0.95vw, 16px);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.navo-root .lang-toggle {
  appearance: none; background: transparent; border: 0; color: inherit;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  padding: 6px 14px; display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; transition: color var(--dur) var(--ease-out);
}
.navo-root .lang-toggle:hover,
.navo-root .lang:focus-within .lang-toggle { color: var(--gold); }
.navo-root .lang-caret {
  width: 7px; height: 4px; opacity: 0.65;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.navo-root .lang:hover .lang-caret,
.navo-root .lang:focus-within .lang-caret { transform: rotate(180deg); opacity: 1; }
.navo-root .lang-menu {
  position: absolute; top: calc(100% + 14px); left: -1px;
  margin: 0; padding: 0; list-style: none; min-width: calc(100% + 2px);
  background: var(--dark); color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 220ms var(--ease-out);
  z-index: 60;
}
.navo-root .lang:hover .lang-menu,
.navo-root .lang:focus-within .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.navo-root .lang-menu a {
  display: block; padding: 10px 14px; color: inherit; text-decoration: none;
  border: 0; font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
  transition: color var(--dur) var(--ease-out);
}
.navo-root .lang-menu a:hover,
.navo-root .lang-menu a:focus-visible { color: var(--gold); border-color: transparent; }
.navo-root .lang-menu li + li { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.navo-root .lang::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }

.navo-root .social { display: flex; gap: 12px; border-left: 1px solid rgba(255, 255, 255, 0.18); padding-left: 22px; }
.navo-root .social a { color: inherit; opacity: 1; text-decoration: none; border: 0; transition: color var(--dur) var(--ease-out); display: flex; }
.navo-root .social a:hover { color: var(--gold); }
.navo-root .social svg { width: 18px; height: 18px; display: block; }

.navo-root .topnav.is-stuck {
  background: var(--dark); color: var(--paper);
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

/* ---- Mobile hamburger ---- */
.navo-root .nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto; padding: 0;
  background: transparent; border: 0; color: inherit; cursor: pointer;
}
.navo-root .nav-toggle-bars,
.navo-root .nav-toggle-bars::before,
.navo-root .nav-toggle-bars::after {
  content: ""; display: block; width: 22px; height: 2px; background: currentColor;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.navo-root .nav-toggle-bars { position: relative; }
.navo-root .nav-toggle-bars::before { position: absolute; left: 0; top: -7px; }
.navo-root .nav-toggle-bars::after { position: absolute; left: 0; top: 7px; }
.navo-root .topnav.is-open .nav-toggle-bars { background: transparent; }
.navo-root .topnav.is-open .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.navo-root .topnav.is-open .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

@media screen and (max-width: 1140px) {
  .navo-root .topnav-inner { flex-wrap: wrap; gap: 0; }
  .navo-root .nav-toggle { display: inline-flex; }
  .navo-root .topnav.is-open { background: var(--dark); border-bottom-color: rgba(255, 255, 255, 0.16); transition: none; }
  .navo-root .topnav-links,
  .navo-root .topnav-right { flex-basis: 100%; display: none; }
  .navo-root .topnav.is-open .topnav-links {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    padding: var(--s-3) 0 var(--s-4);
  }
  .navo-root .topnav-links a { width: 100%; padding: 12px 0; font-size: 14px; }
  .navo-root .topnav.is-open .topnav-right {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-5); padding: var(--s-4) 0 var(--s-5);
    border-top: var(--hairline) solid rgba(255, 255, 255, 0.16);
  }
}

/* ============================================================
   Footer (dark) — CTA · NAVO + DAMA NET · columns
   ============================================================ */
.navo-root .footer {
  background: var(--dark); color: var(--paper);
  position: relative; overflow: hidden;
  padding-block: var(--s-8) var(--s-6);
}
.navo-root .footer::before {
  content: ""; position: absolute; inset: 0;
  background-image: image-set(url("/navo/texture-navo.avif") type("image/avif"), url("/navo/texture-navo.webp") type("image/webp"));
  background-repeat: repeat; background-size: 320px auto;
  opacity: 0.08; pointer-events: none; mix-blend-mode: lighten;
}
.navo-root .footer-inner {
  position: relative; z-index: 1;
  max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--page-pad);
}
.navo-root .footer-cta {
  display: grid; gap: var(--s-6); padding-bottom: var(--s-7);
  border-bottom: var(--hairline) solid var(--hairline-on-dark);
}
.navo-root .footer-cta .overline { color: var(--gold); margin-bottom: var(--s-4); }
.navo-root .footer-headline {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(34px, 5vw, 60px); line-height: var(--lh-tight);
  letter-spacing: var(--display-tracking); color: var(--paper);
  margin: 0 0 var(--s-4); max-width: 18ch;
}
.navo-root .footer-lede { color: var(--on-dark-soft); max-width: 46ch; margin: 0; }
.navo-root .footer-cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 880px) {
  .navo-root .footer-cta { grid-template-columns: 1.5fr 1fr; align-items: end; gap: var(--s-8); }
  .navo-root .footer-cta-actions { justify-content: flex-end; }
}

.navo-root .footer-main {
  display: grid; gap: var(--s-7); padding-block: var(--s-7);
  border-bottom: var(--hairline) solid var(--hairline-on-dark);
}
@media (min-width: 1040px) {
  .navo-root .footer-main { grid-template-columns: minmax(220px, 1fr) 2.3fr; gap: var(--s-9); align-items: start; }
}
.navo-root .footer-logos { display: flex; align-items: center; gap: var(--s-4); }
.navo-root .footer-logo { display: block; width: auto; }
.navo-root .footer-logo--navo { height: 26px; }
.navo-root .footer-logo--dama { height: 30px; }
.navo-root .footer-logo-sep { width: var(--hairline); height: 28px; background: var(--hairline-on-dark); }
.navo-root .footer-about { color: var(--on-dark-soft); max-width: 40ch; margin: var(--s-4) 0 0; }

.navo-root .footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
@media (min-width: 1040px) { .navo-root .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.navo-root .footer-col-title {
  font-family: var(--font-body); font-weight: var(--weight-meta);
  font-size: var(--fs-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--on-dark-faint); margin: 0 0 var(--s-4);
}
.navo-root .footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.navo-root .footer-list a,
.navo-root .footer-addr a { color: var(--on-dark); border-bottom: var(--hairline) solid transparent; }
.navo-root .footer-list a:hover,
.navo-root .footer-addr a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.navo-root .footer-addr { font-style: normal; color: var(--on-dark); line-height: var(--lh-normal); }
.navo-root .footer-note {
  display: block; font-size: var(--fs-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--on-dark-faint); margin-top: var(--s-3);
}
.navo-root .footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-4); padding-top: var(--s-5);
}
.navo-root .footer-copy,
.navo-root .footer-legal a {
  font-size: var(--fs-overline); letter-spacing: var(--ls-overline);
  text-transform: uppercase; color: var(--on-dark-faint);
}
.navo-root .footer-legal { display: flex; gap: var(--s-5); }
.navo-root .footer-legal a { border-bottom: 0; }
.navo-root .footer-legal a:hover { color: var(--gold); }

/* ============================================================
   Foundation body placeholder (podetapa 1) — dočasný render
   contentTop/contentBottom jako raw text. Sekční komponenty
   nahradí v podetapě 2/3.
   ============================================================ */
.navo-root .navo-foundation-body { padding-block: var(--s-9); }
.navo-root .navo-foundation-body .navo-raw {
  white-space: pre-wrap; color: var(--steel);
  border-top: 1px solid var(--line); padding-top: var(--s-5); margin-top: var(--s-5);
  font-size: var(--fs-meta);
}

/* ============================================================
   HOME SEKCE (podetapa 2) — port home.css, scoped pod .navo-root.
   Fotky: optimalizované WebP/AVIF přes image-set (avif → webp).
   Scroll-reveal (animace) NEPORTOVÁN — přijde v podetapě 4 s islandem.
   ============================================================ */

/* ---- Hero ---- */
.navo-root .hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--dark);
  color: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Nav je `position: fixed` (mimo tok). Hero je první dítě <main>; jeho
     margin-top RUŠÍ `main { padding-top: var(--nav-h) }` se STEJNOU proměnnou
     → top hera = přesně 0 nezávisle na hodnotě --nav-h. Hero (tmavé pozadí +
     foto) proto vyplní plochu až k hornímu okraji pod transparentní navem →
     žádný světlý pruh při ŽÁDNÉ výšce nav (i18n/mobil robustní). */
  margin-top: calc(-1 * var(--nav-h));
}
.navo-root .hero-photo {
  position: absolute;
  inset: 0;
  background-color: var(--dark);
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 54%, rgba(0,0,0,0.18) 64%, rgba(0,0,0,0.42) 80%, rgba(0,0,0,0.7) 95%, rgba(0,0,0,0.8) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.06) 26%, transparent 46%),
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.36) 8%, rgba(0,0,0,0.12) 16%, transparent 22%),
    image-set(url("/navo/photos/hero-01.avif") type("image/avif"), url("/navo/photos/hero-01.webp") type("image/webp"));
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  z-index: 0;
}
.navo-root .hero-photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.012) 14px 15px);
  pointer-events: none;
}
.navo-root .hero-inner {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-width: var(--container-wide); margin: 0 auto; width: 100%;
  padding: var(--s-8) var(--page-pad) var(--s-5); /* Home v2: menší spodní odsazení (README 2.7) */
}
.navo-root .hero-overline { color: var(--white); margin-bottom: 22px; } /* Home v2: bílý eyebrow přes světlou fotku (README 2.7) */
.navo-root .hero h1 { max-width: 18ch; color: var(--paper); }
.navo-root .hero-sub {
  margin-top: 28px; max-width: 42ch;
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(255,255,255,0.78);
}
.navo-root .hero-trust {
  position: relative; z-index: 1; width: 100%; margin: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  padding-inline: max(var(--page-pad), calc((100% - var(--container-wide)) / 2 + var(--page-pad)));
  border-top: var(--hairline) solid var(--hairline-on-dark);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.34));
}
.navo-root .trust-item {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-4); border-top: var(--hairline) solid var(--hairline-on-dark);
}
.navo-root .trust-item:nth-child(-n + 2) { border-top: 0; }
.navo-root .trust-item:nth-child(even) {
  border-left: var(--hairline) solid var(--hairline-on-dark); padding-left: var(--s-5);
}
.navo-root .trust-value {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(22px, 2.2vw, 30px); line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug); color: var(--paper);
}
.navo-root .trust-value .star { color: var(--gold); }
.navo-root .trust-item .overline { color: var(--on-dark-soft); }
@media (min-width: 760px) {
  .navo-root .hero-trust { grid-template-columns: repeat(4, 1fr); }
  .navo-root .trust-item { border-top: 0; border-left: var(--hairline) solid var(--hairline-on-dark); padding: var(--s-5); }
  .navo-root .trust-item:first-child { border-left: 0; padding-left: 0; }
}

/* ---- Paths (Dvě cesty, featured) ---- */
.navo-root .paths { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.navo-root .paths-inner { max-width: var(--container-wide); margin: 0 auto; }
.navo-root .paths-grid { display: grid; grid-template-columns: 1fr 1fr; }
.navo-root .path { padding: 56px 40px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.navo-root .path + .path { border-left: 1px solid var(--line); }
.navo-root .path-head { display: flex; align-items: center; gap: 14px; }
.navo-root .path-num { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); }
.navo-root .path-overline { color: var(--gold); }
.navo-root .path h2 { font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -0.01em; line-height: 1.1; }
.navo-root .path p { color: var(--steel); max-width: 36ch; margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; }
.navo-root .path-cta { margin-top: 10px; }
.navo-root .paths--feature {
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative; padding: clamp(64px, 7vw, 104px) 0; overflow: hidden;
}
.navo-root .paths--feature .paths-inner { padding-inline: var(--gutter); }
.navo-root .paths-intro {
  max-width: 760px; margin: 0 auto clamp(40px, 4vw, 64px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.navo-root .paths-intro .overline--rule { color: var(--gold); }
.navo-root .paths-title { color: var(--dark); font-size: clamp(34px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; }
.navo-root .paths-lede { color: var(--steel); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; max-width: 60ch; margin: 0; }
.navo-root .paths--feature .paths-grid { background: var(--dark); border: 1px solid var(--dark); }
.navo-root .paths--feature .path { padding: clamp(40px, 4vw, 64px); gap: 20px; transition: background var(--dur) var(--ease-out); }
.navo-root .paths--feature .path + .path { border-left: 1px solid rgba(255,255,255,0.14); }
.navo-root .paths--feature .path:hover { background: rgba(255,255,255,0.025); }
.navo-root .paths--feature .path-num { color: rgba(255,255,255,0.5); }
.navo-root .paths--feature .path h2 { color: var(--white); font-size: clamp(28px, 2.7vw, 38px); }
.navo-root .paths--feature .path p { color: rgba(255,255,255,0.62); }
@media (max-width: 760px) {
  .navo-root .paths--feature .paths-grid { grid-template-columns: 1fr; }
  .navo-root .paths--feature .path + .path { border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); }
}

/* ---- Realizace (work) ---- */
.navo-root .work { background: var(--paper); }
.navo-root .work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: var(--s-6); }
.navo-root .work-head .h-1 { max-width: 14ch; }
.navo-root .work-head .right { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; text-align: right; }
.navo-root .work-head .right .meta { max-width: 32ch; }
.navo-root .work-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-7); align-items: stretch; }
.navo-root .work-list { margin: 0; padding: 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; list-style: none; }
.navo-root .work-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 24px; align-items: baseline;
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line); cursor: pointer; position: relative;
  transition: padding-left var(--dur) var(--ease-out);
}
.navo-root .work-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold);
  transform: scaleY(0); transform-origin: center; transition: transform var(--dur) var(--ease-out);
}
.navo-root .work-row.is-active::before { transform: scaleY(0.45); }
.navo-root .work-row.is-active { padding-left: 18px; }
.navo-root .work-row-num { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; color: var(--steel); }
.navo-root .work-row-title {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(19px, 1.4vw, 23px); letter-spacing: -0.005em; line-height: 1.1; color: var(--dark);
  transition: color var(--dur) var(--ease-out);
}
.navo-root .work-row:hover .work-row-title, .navo-root .work-row.is-active .work-row-title { color: var(--dark); }
.navo-root .work-row-meta { font-size: 12px; letter-spacing: 0.04em; color: var(--steel); margin-top: var(--s-1); text-transform: none; }
.navo-root .work-row-arrow {
  font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--steel);
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.navo-root .work-row:hover .work-row-arrow, .navo-root .work-row.is-active .work-row-arrow { color: var(--gold); transform: translateX(4px); }
.navo-root .work-photo {
  position: sticky; top: 100px; aspect-ratio: 4 / 3; background: #1f242c;
  background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden;
  transition: background-image var(--dur) var(--ease-out);
}
.navo-root .work-photo.has-image {
  background-image: image-set(url("/navo/photos/work-obradni-sin.avif") type("image/avif"), url("/navo/photos/work-obradni-sin.webp") type("image/webp"));
}
.navo-root .work-photo-frame {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 28px; color: var(--paper);
  background-image:
    radial-gradient(140% 90% at 70% 30%, rgba(255,255,255,0.04) 0%, transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.7) 100%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,0.03) 14px 15px);
}
.navo-root .work-photo.has-image .work-photo-frame {
  background-image: linear-gradient(180deg, transparent 28%, rgba(0,0,0,0.28) 52%, rgba(0,0,0,0.75) 88%, rgba(0,0,0,0.88) 100%);
}
.navo-root .work-photo-cap { display: flex; flex-direction: column; gap: 6px; }
.navo-root .work-photo-cap .overline { color: var(--gold); }
.navo-root .work-photo-cap h3 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--white);
}
.navo-root .work-photo-cap .meta { color: var(--white); }

/* ---- Pro architekty (b2b, dark) ---- */
.navo-root .b2b { position: relative; overflow: hidden; }
.navo-root .b2b-inner {
  max-width: var(--container); margin: 0 auto; padding-inline: var(--page-pad);
  display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center;
}
.navo-root .b2b-left .overline { margin-bottom: 22px; }
.navo-root .b2b-left h2 { max-width: 14ch; }
.navo-root .b2b-right p { color: rgba(255,255,255,0.78); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; margin: 0 0 28px; max-width: 48ch; }
.navo-root .b2b-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Recenze ---- */
.navo-root .reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.navo-root .reviews-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.navo-root .review {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; padding: 56px 0;
  border-bottom: 1px solid var(--line); align-items: baseline; position: relative;
}
.navo-root .review:last-child { border-bottom: 0; }
.navo-root .review-aside { display: flex; flex-direction: column; gap: 14px; }
.navo-root .review-stars { color: var(--gold); letter-spacing: 4px; font-size: 15px; line-height: 1; }
.navo-root .review-meta { display: flex; flex-direction: column; gap: 14px; }
.navo-root .review-body { margin: 0; padding: 0; border: 0; }
.navo-root .review-quote {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(20px, 1.9vw, 28px); line-height: 1.4; letter-spacing: -0.005em;
  color: var(--dark); margin: 0; max-width: none; text-wrap: pretty;
}
.navo-root .review-quote::before { content: "„"; margin-right: 2px; color: var(--gold); }
.navo-root .review-quote::after { content: "“"; margin-left: 2px; color: var(--gold); }
.navo-root .review-name { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--dark); }
.navo-root .review-date { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); }
.navo-root .reviews-foot {
  margin-top: 8px; padding-top: 36px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px;
}
.navo-root .reviews-rating { display: flex; align-items: center; gap: 18px; }
.navo-root .reviews-rating .num { font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(36px, 4vw, 48px); line-height: 1; letter-spacing: -0.02em; }
.navo-root .reviews-rating .stars { color: var(--gold); letter-spacing: 4px; font-size: 18px; }
.navo-root .reviews-rating .count { color: var(--steel); font-size: 14px; }

/* ---- Co děláme / pilíře ---- */
.navo-root .pillars-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 80px; align-items: flex-end; }
.navo-root .pillars-head p { color: var(--steel); font-size: clamp(16px, 1.3vw, 18px); max-width: 44ch; margin: 0; }
.navo-root .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.navo-root .pillar { display: flex; flex-direction: column; gap: 20px; }
.navo-root .pillar-photo { aspect-ratio: 4 / 5; background: var(--line); border: 1px solid var(--line); position: relative; overflow: hidden; }
.navo-root .pillar-photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(23,27,33,0.04) 14px 15px);
}
.navo-root .pillar-photo--filled { background-size: cover; background-position: center; background-repeat: no-repeat; border-color: transparent; }
.navo-root .pillar-photo--filled::before { background-image: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45) 100%); }
.navo-root .pillar-photo[data-caption]::after {
  content: attr(data-caption); position: absolute; left: 20px; bottom: 16px;
  font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--steel); z-index: 1;
}
.navo-root .pillar-photo--filled[data-caption]::after { color: rgba(255,255,255,0.78); }
.navo-root .pillar-photo--navrh { background-image: image-set(url("/navo/photos/pillar-navrh.avif") type("image/avif"), url("/navo/photos/pillar-navrh.webp") type("image/webp")); }
.navo-root .pillar-photo--vyroba { background-image: image-set(url("/navo/photos/pillar-vyroba.avif") type("image/avif"), url("/navo/photos/pillar-vyroba.webp") type("image/webp")); }
.navo-root .pillar-photo--montaz { background-image: image-set(url("/navo/photos/pillar-montaz.avif") type("image/avif"), url("/navo/photos/pillar-montaz.webp") type("image/webp")); }
.navo-root .pillar-num { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; color: var(--gold); }
.navo-root .pillar h3 { margin: 0; }
.navo-root .pillar p { margin: 0; color: var(--steel); font-size: clamp(15px, 1vw, 16px); line-height: 1.55; max-width: 36ch; }
.navo-root .pillar .text-link { align-self: flex-start; margin-top: 4px; }

/* ---- Showroom + Živá kuchyně ---- */
.navo-root .showroom-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center; }
.navo-root .showroom-photo { aspect-ratio: 4 / 5; min-height: 560px; background: #d6d1c6; position: relative; overflow: hidden; }
.navo-root .showroom-photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,0.04) 14px 15px);
}
.navo-root .showroom-photo--filled { background-size: cover; background-position: center; background-repeat: no-repeat; }
.navo-root .showroom-photo--filled::before { background-image: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.55) 100%); }
.navo-root .showroom-photo[data-caption]::after {
  content: attr(data-caption); position: absolute; left: 22px; bottom: 18px;
  font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(0,0,0,0.5);
}
.navo-root .showroom-photo--filled[data-caption]::after { color: rgba(255,255,255,0.85); }
.navo-root .showroom-photo--showroom { background-image: image-set(url("/navo/photos/showroom.avif") type("image/avif"), url("/navo/photos/showroom.webp") type("image/webp")); }
.navo-root .showroom-text { display: flex; flex-direction: column; gap: 22px; max-width: 44ch; }
.navo-root .showroom-text > .overline { margin-bottom: 0; }
.navo-root .showroom-text p { margin: 0; color: var(--steel); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; }
.navo-root .feature-box {
  border-left: 2px solid var(--gold); padding: 20px 22px; background: rgba(213,172,135,0.08);
  margin-top: 6px; display: flex; flex-direction: column; gap: 10px;
}
.navo-root .feature-box .overline { color: var(--gold); }
.navo-root .feature-box p {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(18px, 1.6vw, 20px); line-height: 1.32; letter-spacing: -0.005em; color: var(--dark); margin: 0;
}
.navo-root .feature-box .text-link { align-self: flex-start; margin-top: 6px; }
.navo-root .showroom-cta { margin-top: 14px; }

/* ---- Partneři carousel ---- */
.navo-root .partners-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.navo-root .partners-nav { display: flex; gap: 8px; }
.navo-root .partners-nav button {
  width: 48px; height: 48px; border: 1px solid var(--line); background: transparent; cursor: pointer;
  color: var(--dark); display: flex; align-items: center; justify-content: center;
  transition: all var(--dur) var(--ease-out);
}
.navo-root .partners-nav button:hover { border-color: var(--dark); background: var(--dark); color: var(--paper); }
.navo-root .partners-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.navo-root .partners-nav button:disabled:hover { background: transparent; color: var(--dark); border-color: var(--line); }
.navo-root .partners-nav svg { width: 18px; height: 18px; }
.navo-root .partners-viewport { overflow: hidden; position: relative; cursor: grab; user-select: none; }
.navo-root .partners-viewport.is-dragging { cursor: grabbing; }
.navo-root .partners-track { display: flex; gap: 0; transition: transform 400ms var(--ease-out); will-change: transform; }
.navo-root .partners-viewport.is-dragging .partners-track { transition: none; }
.navo-root .partner {
  flex: 0 0 20%; aspect-ratio: 5 / 3; border-right: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; opacity: 0.7;
  transition: opacity var(--dur) var(--ease-out); position: relative; pointer-events: none; padding: 0 22px;
}
.navo-root .partners-viewport:hover .partner { opacity: 0.55; }
.navo-root .partner:hover { opacity: 1; }
.navo-root .partner-logo {
  max-height: 38px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.navo-root .partner-logo[src*="corian"] { max-height: 64px; }
.navo-root .partners-viewport .partner:first-child { border-left: 1px solid var(--line); }

/* ---- Section head (shared) ---- */
.navo-root .section-head { margin-bottom: 64px; }
.navo-root .section-head .overline { margin-bottom: 20px; }
.navo-root .section-head h2 { max-width: 16ch; }

/* ---- Responsive (Home sekce) ---- */
@media (max-width: 1140px) {
  .navo-root .b2b-inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .navo-root .b2b-left h2 { max-width: 22ch; }
  .navo-root .work-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .navo-root .work-photo { position: static; order: -1; aspect-ratio: 3 / 2; }
  .navo-root .work-photo-frame { display: none; }
  .navo-root .work-row, .navo-root .work-row.is-active { padding-left: var(--s-4); }
  .navo-root .showroom-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .navo-root .showroom-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .navo-root .pillars-head { grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-7); }
  .navo-root .pillars-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
  .navo-root .partner { flex-basis: 33.333%; }
}
@media (max-width: 768px) {
  .navo-root .work-head { flex-direction: column; align-items: flex-start; }
  .navo-root .work-head .right { align-items: flex-start; text-align: left; }
  .navo-root .work-head .right .meta { max-width: none; }
  .navo-root .reviews-head { flex-direction: column; align-items: flex-start; }
  .navo-root .review { grid-template-columns: 1fr; gap: var(--s-4); padding-block: var(--s-6); }
  .navo-root .b2b-actions { width: 100%; }
  .navo-root .pillars-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .navo-root { --page-pad: 22px; }
  .navo-root .h-1 { font-size: clamp(38px, 11vw, 54px); }
  .navo-root .partners-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .navo-root .partner { flex-basis: 50%; }
  .navo-root .work-row, .navo-root .work-row.is-active { padding-left: 0; }
  .navo-root .work-row::before { left: -12px; }
}
@media (min-width: 1141px) {
  .navo-root .work-row { flex: 1 1 0; align-items: center; }
}

/* ============================================================
   „CO DĚLÁME" (podetapa 3) — port co-delame.css, scoped pod .navo-root.
   Staví na Home sekcích (.section, .pillars, .hero, .btn …); jen nové
   layouty (services / split / why / area / faq) + cd-hero override.
   Fotky: optimalizované WebP/AVIF přes image-set (avif → webp).
   ============================================================ */

/* Fallback default pro --img-cd-hero (dílna, pillar-vyroba). Každá cd-hero
   stránka si foto přebíjí vlastním modifikátorem (--codelame, --architekti,
   --kdojsme, --showroom, --kontakt); tenhle default už žádný hero přímo nepoužívá. */
.navo-root { --img-cd-hero: image-set(url("/navo/photos/pillar-vyroba.avif") type("image/avif"), url("/navo/photos/pillar-vyroba.webp") type("image/webp")); }

/* ---- 1 · Hero (cd-hero) — levý H1, lead, dvě CTA, bez trust baru ---- */
.navo-root .cd-hero { min-height: 78vh; min-height: 78svh; }
.navo-root .cd-hero .hero-photo {
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
    linear-gradient(180deg, transparent 6%, rgba(0,0,0,0.32) 34%, rgba(0,0,0,0.60) 60%, rgba(0,0,0,0.78) 84%, rgba(0,0,0,0.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.44) 40%, rgba(0,0,0,0.08) 72%, transparent 90%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 12%, transparent 24%),
    var(--img-cd-hero);
  background-position: center 30%;
}
.navo-root .cd-hero .hero-inner { padding-block: var(--s-9) var(--s-8); gap: 0; }
.navo-root .cd-hero h1 { max-width: 20ch; }
.navo-root .cd-hero .hero-sub { max-width: 54ch; }

/* Foto/kadr Co děláme scopujeme na modifikátor `.cd-hero--codelame` (vzor
   `.cd-hero--kdojsme`), NE na base `.cd-hero .hero-photo` — tu sdílí Architekti,
   Kdo jsme, Showroom i Kontakt. Foto codelame-hero = přechod skica → realita
   (návrh kuchyně vlevo, hotová realizace s kamennou deskou a spotřebiči vpravo),
   sedí k „Co děláme". Kadr center 48 % drží ve výřezu linku desky, dřez s baterií
   (skica) a varnou desku s troubou (realita), ořízne prázdný strop i podlahu.
   Scrim beze změny (base cd-hero gradienty). */
.navo-root .cd-hero--codelame { --img-cd-hero: image-set(url("/navo/photos/codelame-hero.avif") type("image/avif"), url("/navo/photos/codelame-hero.webp") type("image/webp")); }
.navo-root .cd-hero--codelame .hero-photo { background-position: center 48%; }
.navo-root .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ---- 2 · Tři kroky — reuse .pillars; delší text ---- */
.navo-root .steps { padding-top: clamp(56px, 6vw, 84px); }
.navo-root .steps .pillar p { max-width: 40ch; line-height: var(--lh-prose); }
.navo-root .steps-intro { color: var(--steel); font-size: clamp(16px, 1.3vw, 18px); line-height: var(--lh-prose); max-width: 46ch; margin: 0; }

/* ---- 3 · Služby — 8-card grid, hairline frame, gentle lift ---- */
.navo-root .section-head--block { margin-bottom: var(--s-7); max-width: 60ch; }
.navo-root .section-head--block .overline { margin-bottom: var(--s-4); }
.navo-root .section-head--block h2 { max-width: 18ch; margin-bottom: var(--s-4); }
.navo-root .section-head--block .steps-intro { max-width: 56ch; }

.navo-root .services-grid {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
.navo-root .service-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper); transition: border-color var(--dur) var(--ease-out);
}
.navo-root .service-card::before {
  content: ""; position: absolute; inset: 0; background: var(--dark);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.38s var(--ease-out); z-index: 0;
}
.navo-root .service-card > * { position: relative; z-index: 1; }
.navo-root .service-icon { width: 34px; height: 34px; color: var(--gold); flex: 0 0 auto; transition: color var(--dur) var(--ease-out); }
.navo-root .service-icon svg { width: 100%; height: 100%; display: block; }
.navo-root .service-card h3 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(19px, 1.5vw, 23px); letter-spacing: -0.01em; line-height: 1.15; margin: 0;
}
.navo-root .service-card h3 a { color: var(--dark); border-bottom: 0; transition: color var(--dur) var(--ease-out); }
.navo-root .service-card h3 a:hover { color: var(--gold); }
.navo-root .service-card h3 a::after { content: ""; position: absolute; inset: 0; }
.navo-root .service-card p {
  margin: 0; color: var(--steel); font-size: var(--fs-body); line-height: var(--lh-prose);
  max-width: none; transition: color var(--dur) var(--ease-out);
}
.navo-root .service-more {
  margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--steel);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.navo-root .service-more-arr { font-size: 15px; letter-spacing: 0; }
@media (hover: hover) {
  .navo-root .service-card:hover { border-color: var(--dark); z-index: 1; }
  .navo-root .service-card:hover::before { transform: scaleX(1); }
  .navo-root .service-card:hover h3 a { color: var(--paper); }
  .navo-root .service-card:hover p { color: rgba(255, 255, 255, 0.74); }
  .navo-root .service-card:hover .service-icon { color: var(--gold); }
  .navo-root .service-card:hover .service-more { color: var(--gold); border-color: rgba(213, 172, 135, 0.38); }
}
@media (prefers-reduced-motion: reduce) {
  .navo-root .service-card::before { transition: none; }
}
.navo-root .service-card:focus-within { border-color: var(--dark); z-index: 1; }
@media (min-width: 700px) { .navo-root .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .navo-root .services-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- 4 · Dvě cesty — 50/50 split, light + dark ---- */
.navo-root .split-grid { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); }
.navo-root .split-side { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: clamp(40px, 4vw, 64px); }
.navo-root .split-side .split-num {
  font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--steel);
}
.navo-root .split-side h3 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -0.01em; line-height: 1.12; margin: 0; max-width: 16ch;
}
.navo-root .split-side p { margin: 0; color: var(--steel); font-size: clamp(16px, 1.2vw, 17px); line-height: var(--lh-prose); max-width: 42ch; }
.navo-root .split-side .btn,
.navo-root .split-side .text-link { margin-top: var(--s-3); }
.navo-root .split-side--dark { background: var(--dark); color: var(--paper); }
.navo-root .split-side--dark .split-num { color: rgba(255,255,255,0.62); }
.navo-root .split-side--dark h3 { color: var(--paper); }
.navo-root .split-side--dark p { color: rgba(255,255,255,0.82); }
.navo-root .split-side--dark .split-num--gold { color: var(--gold); }
@media (min-width: 880px) { .navo-root .split-grid { grid-template-columns: 1fr 1fr; } }

/* ---- 5 · Proč NAVO — 3 points + featured Živá kuchyně ---- */
.navo-root .why-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: stretch; }
.navo-root .why-feature { display: flex; flex-direction: column; }
.navo-root .why-photo {
  aspect-ratio: 4 / 3; background: #1f242c;
  background-image:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.78) 100%),
    image-set(url("/navo/photos/showroom.avif") type("image/avif"), url("/navo/photos/showroom.webp") type("image/webp"));
  background-size: cover; background-position: center; position: relative;
  display: flex; align-items: flex-end; padding: var(--s-5);
}
.navo-root .why-photo .overline { color: var(--gold); }
.navo-root .why-feature-body { padding: var(--s-5) 0 0; border-top: 2px solid var(--gold); margin-top: -1px; }
.navo-root .why-feature-body h3 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 var(--s-3);
}
.navo-root .why-feature-body p { margin: 0; color: var(--steel); font-size: clamp(16px, 1.2vw, 17px); line-height: var(--lh-prose); max-width: 46ch; }
.navo-root .why-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.navo-root .why-list li { padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.navo-root .why-list h3 {
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(19px, 1.5vw, 23px); letter-spacing: -0.005em; line-height: 1.15; margin: 0 0 var(--s-2);
}
.navo-root .why-list p { margin: 0; color: var(--steel); font-size: var(--fs-body); line-height: var(--lh-prose); max-width: 50ch; }
@media (min-width: 980px) { .navo-root .why-grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-9); } }

/* ---- 6 · Kde působíme — text + stylized radius graphic ---- */
.navo-root .area-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); align-items: center; }
.navo-root .area-text p { color: var(--steel); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; max-width: 46ch; }
.navo-root .area-graphic { position: relative; width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 1 / 1; }
.navo-root .area-graphic svg { width: 100%; height: 100%; display: block; }
.navo-root .area-ring { fill: none; stroke: var(--line); }
.navo-root .area-ring--accent { stroke: var(--gold); stroke-dasharray: 2 7; }
.navo-root .area-center { fill: var(--gold); }
.navo-root .area-spoke { stroke: var(--line); }
.navo-root .area-dot { fill: var(--steel); }
.navo-root .area-label {
  font-family: var(--font-body); font-weight: 500; font-size: 12.5px; letter-spacing: 0.1em;
  text-transform: uppercase; fill: var(--steel);
}
.navo-root .area-label--home { fill: var(--dark); font-size: 14px; letter-spacing: 0.1em; }
.navo-root .area-radius {
  font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; fill: var(--steel);
}
@media (min-width: 880px) { .navo-root .area-grid { grid-template-columns: 1fr 1fr; gap: var(--s-9); } }

/* ---- 7 · FAQ — accordion, hairline dividers, gold toggle ---- */
.navo-root .faq-list { border-top: 1px solid var(--line); max-width: 920px; }
.navo-root .faq-item { border-bottom: 1px solid var(--line); }
.navo-root .faq-q {
  appearance: none; width: 100%; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; text-align: left;
  font-family: var(--display); font-weight: var(--display-weight);
  font-size: clamp(18px, 1.6vw, 23px); letter-spacing: -0.005em; line-height: 1.25;
  color: var(--dark); transition: color var(--dur) var(--ease-out);
}
.navo-root .faq-q:hover { color: var(--gold); }
.navo-root .faq-toggle { position: relative; flex: 0 0 auto; width: 22px; height: 22px; }
.navo-root .faq-toggle::before,
.navo-root .faq-toggle::after {
  content: ""; position: absolute; background: var(--gold);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.navo-root .faq-toggle::before { left: 0; top: 10px; width: 22px; height: 2px; }
.navo-root .faq-toggle::after  { left: 10px; top: 0; width: 2px; height: 22px; }
.navo-root .faq-item.is-open .faq-toggle::after { transform: scaleY(0); opacity: 0; }
.navo-root .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.navo-root .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.navo-root .faq-a-inner { overflow: hidden; }
.navo-root .faq-a p { margin: 0; padding: 0 0 var(--s-5); color: var(--steel); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; max-width: 64ch; }
@media (prefers-reduced-motion: reduce) {
  .navo-root .faq-a { transition: none; }
}

/* ============================================================
   Scroll reveal (podetapa 4) — generic [data-reveal] entrance.
   Gated za `.navo-root.navo-reveal` (třídu přidá ScrollReveal island po
   hydrataci) + prefers-reduced-motion: no-preference. Bez islandu / pod
   reduce je vše rovnou viditelné (žádné skrytí). Entrance je animation-driven
   (ne transition) — settles spolehlivě.
   ============================================================ */
.navo-root.navo-reveal [data-reveal] { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .navo-root.navo-reveal [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(18px); }
  .navo-root.navo-reveal [data-reveal].is-visible { animation: navoReveal var(--dur-slow) var(--ease-out) both; }
}
@keyframes navoReveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
 * NAVO „Co děláme" — CSS additions
 * Append these rules to storefront navo.css (component/layout layer).
 * They only use existing DS tokens (--white, --line, --gold, --s-5,
 * --s-6, --steel, --dark). No new tokens, no new colors except the
 * hover tint #f3efe8 (warm paper, same value used on both card types).
 * ============================================================ */

/* ---- Unified vertical rhythm --------------------------------
 * Stacked intro paragraphs in a section head all use --s-5 (24px).
 * A .btn placed directly after a .section-head--block sits --s-6
 * (32px) below it — same gap as .hero-actions. The head block's own
 * bottom margin is zeroed in that case so the gap doesn't stack. */
.navo-root .section-head--block .steps-intro + .steps-intro { margin-top: var(--s-5); }
.navo-root .section-head--block:has(+ .btn) { margin-bottom: 0; }
.navo-root .section-head--block + .btn { margin-top: var(--s-6); }

/* Equal block gaps: the Steps section ships a tighter top padding in
 * the DS; normalize to 128px so every content .section matches. */
.navo-root .steps { padding-top: 128px; }

/* ---- Scenarios (Začátek spolupráce, {#paths-duo}) -----------
 * Replaces the old 2-box .split-grid. Three equal cards, hairline +
 * 3px gold top rule, warm hover tint, full-width CTA pinned to the
 * card bottom. Grid uses minmax(0,1fr) so the right card never hugs
 * the viewport edge. */
.navo-root .scenarios-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 960px) { .navo-root .scenarios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 768px) { .navo-root .scenarios-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

.navo-root .scenario-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding: clamp(32px, 3vw, 44px); height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  transition: background-color .22s cubic-bezier(0.2,0.6,0.2,1), border-color .22s cubic-bezier(0.2,0.6,0.2,1);
}
.navo-root .scenario-card:hover { background: #f3efe8; border-color: var(--gold); }
.navo-root .scenario-card h3 { margin: 0; max-width: 18ch; letter-spacing: -0.01em; }
.navo-root .scenario-body { margin: 0; color: var(--steel); font-size: clamp(15px, 1.05vw, 16px); line-height: var(--lh-prose); }
.navo-root .scenario-cta { margin-top: auto; align-self: stretch; justify-content: center; }

/* ---- Services 3+3 (Co pro vás děláme, {#services}) ----------
 * Add the .services-grid--six modifier to the services grid. Desktop
 * shows 3 columns (3+3) instead of the default 4. Cards get a white
 * resting fill and the lighter hover (warm tint + inset gold outline)
 * instead of the default dark sweep. Tablet 2-up, mobile 1-up come
 * from the base .services-grid rules unchanged. */
@media (min-width: 1100px) { .navo-root .services-grid--six { grid-template-columns: repeat(3, 1fr); } }

.navo-root .services-grid--six .service-card {
  background: var(--white);
  transition: background-color .22s cubic-bezier(0.2,0.6,0.2,1), outline-color .22s cubic-bezier(0.2,0.6,0.2,1);
}
.navo-root .services-grid--six .service-card::before { display: none; } /* kill dark sweep */
@media (hover: hover) {
  .navo-root .services-grid--six .service-card:hover {
    background: #f3efe8;
    border-color: var(--line);
    outline: 1px solid var(--gold);
    outline-offset: -1px;
    z-index: 1;
  }
  .navo-root .services-grid--six .service-card:hover h3 a { color: var(--dark); }
  .navo-root .services-grid--six .service-card:hover p { color: var(--steel); }
  .navo-root .services-grid--six .service-card:hover .service-icon { color: var(--gold); }
  .navo-root .services-grid--six .service-card:hover .service-more { color: var(--steel); border-color: var(--line); }
}
.navo-root .services-grid--six .service-card:focus-within {
  border-color: var(--line);
  outline: 1px solid var(--gold);
  outline-offset: -1px;
  z-index: 1;
}

/* ---- Region list (Kde působíme, {#area}) --------------------
 * Číslovaný seznam krajů (varianta místo SVG „mapy spádu"), pravý
 * sloupec .area-grid. Jen existující tokeny (--line, --gold, --dark,
 * --font-body, --font-display). Pořadí je řízené v Area.tsx (code-only). */
.navo-root .region-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.navo-root .region-item { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.navo-root .region-num { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; color: var(--gold); }
.navo-root .region-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.5vw, 23px); letter-spacing: -0.005em; color: var(--dark); }

/* =====================================================================
   NAVO Home v2 — přírůstky (docs/content/navo/design_handoff_home_v2/code/
   navo.css.additions.css). Používá jen DS tokeny.

   Pozn.: dvě pravidla z handoff-additions (`.hero-overline` bílý eyebrow a
   `.hero-inner { padding-bottom }`) NEJSOU zde — kolidovala s existujícími
   base pravidly, proto jsou složena přímo do těch base pravidel výše
   (řádky ~538-540), aby v souboru zůstal jen jeden selektor (zadání:
   „duplicitní/kolidující pravidla neduplikuj - vyřeš").
   ===================================================================== */

/* --- Sekce 2 · „Co pro vás umíme zařídit" (offer) — seznam odkazů vpravo --- */
.navo-root .why-list--offer { border-top: 1px solid var(--line); position: relative; z-index: 1; }
.navo-root .why-list--offer li { border-bottom: 1px solid var(--line); padding: 0; }
.navo-root .why-list--offer a { border-bottom: none; position: relative; z-index: 1; display: block; padding: var(--s-5) 0; transition: color 120ms cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .why-list--offer a h3 { transition: color 120ms cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .why-list--offer a::before {
  content: ""; position: absolute; left: -22px; top: 4px; bottom: 4px;
  width: 2px; background: var(--gold);
  opacity: 0; transition: opacity 120ms cubic-bezier(0.2,0.6,0.2,1);
}
.navo-root .why-list--offer a:hover::before { opacity: 1; }
.navo-root .why-list--offer a:hover h3 { color: var(--gold); }
/* Horní linka seznamu zarovnaná na H2 (pod eyebrow) — jen 2sloupcový desktop. */
@media (min-width: 980px) { .navo-root .why-list--offer { margin-top: 45px; } }

/* --- Sekce 3 · Rozcestník „Každý projekt může začít jinak" (paths-duo, tmavá) ---
   3 karty, celá karta klikací, čitelnější na tmavém pozadí.               */
.navo-root .paths-grid .path-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(28px, 2.6vw, 40px);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.20);
  text-decoration: none; color: inherit;
  transition: background-color .22s cubic-bezier(0.2,0.6,0.2,1), border-color .22s cubic-bezier(0.2,0.6,0.2,1);
}
@media (hover: hover) {
  .navo-root .paths-grid .path-card:hover { background: rgba(213,172,135,0.08); border-color: var(--gold); }
  .navo-root .paths-grid .path-card:hover .path-cta { color: var(--gold); }
  .navo-root .paths-grid .path-card:hover .path-cta span[aria-hidden] { transform: translateX(4px); }
}
.navo-root .paths-grid .path-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.navo-root .paths-grid .path-cta {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  letter-spacing: 0.01em; color: var(--gold);
  padding-top: 4px;
  transition: color .12s cubic-bezier(0.2,0.6,0.2,1);
}
.navo-root .paths-grid .path-cta span[aria-hidden] { transition: transform .22s cubic-bezier(0.2,0.6,0.2,1); }

/* --- Sekce 5 · „Proč NAVO" (pillars) — pilíře jako karty (styl scénářů z Co děláme) --- */
.navo-root .pillars-grid--cards { align-items: stretch; }
.navo-root .pillar-card {
  align-items: flex-start; gap: 18px;
  padding: clamp(32px, 3vw, 44px); height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  text-decoration: none; color: inherit;
  transition: background-color .22s cubic-bezier(0.2,0.6,0.2,1), border-color .22s cubic-bezier(0.2,0.6,0.2,1);
}
@media (hover: hover) {
  .navo-root .pillar-card:hover { background: #f3efe8; border-color: var(--gold); }
  .navo-root .pillar-card:hover h3 { color: var(--gold); }
  .navo-root .pillar-card:hover .text-link { color: var(--gold); }
  .navo-root .pillar-card:hover .text-link span[aria-hidden] { transform: translateX(4px); }
}
.navo-root .pillar-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.navo-root .pillar-card h3 { transition: color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .pillar-card .text-link { margin-top: auto; }
.navo-root .pillar-card .text-link span[aria-hidden] { transition: transform .22s cubic-bezier(0.2,0.6,0.2,1); }

/* --- Sekce 4 · Realizace (work) — celý řádek jako jednotný klikací odkaz ---
   Stretch-link přes celou plochu řádku (řeší „klikací jen polovina").
   `.work-row` už má v navo.css `position: relative`.                       */
.navo-root .work-row-link { position: absolute; inset: 0; z-index: 2; border-bottom: none; text-decoration: none; }
.navo-root .work-row-link:hover { border-bottom: none; }
.navo-root .work-row-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* --- Sekce 6 · Showroom — fotografie vždy na výšku textového sloupce ---
   (kompaktní 2sloupcový layout; na mobilu ponechává DS poměr stran).       */
@media (min-width: 941px) {
  .navo-root .showroom-grid { align-items: stretch; }
  .navo-root .showroom-photo { aspect-ratio: auto; min-height: 0; height: 100%; }
}

/* --- Sekce 1 · Hero — zlatý accent pruh pod H1 (doplňková barva; 1px/2px gold
   rule dle DS). Bílý eyebrow a menší spodní odsazení jsou složeny do base
   `.hero-overline` / `.hero-inner` výše (viz poznámka na začátku bloku).     */
/* App-shell globals.css kreslí na `h1` element zlatý background podtržník
   (linear-gradient(... var(--color-brand-accent) 3px)). Prosákne do hero H1
   (jediný skutečný `<h1>` na stránce) a vytvořil druhou linku nad `.hero-rule`.
   CD reference žádný H1 podtržník nemá — jediná hero linka = `.hero-rule`. */
.navo-root .hero .h-1 { background: none; }
.navo-root .hero-rule {
  display: block; width: clamp(96px, 12vw, 160px); height: 2px;
  background: var(--gold); margin-top: 30px; border: 0;
}

/* Hero na MOBILU (<=759px): první obrazovka = celá fotka + eyebrow/H1/text
   u spodního okraje; trust pás (30+/4,9/…) padá pod fold na vlastní tmavé
   pozadí a objeví se až po odscrollování. Desktop/tablet beze změny.        */
@media (max-width: 759px) {
  .navo-root .hero { min-height: 100svh; }
  .navo-root .hero-inner { min-height: 100svh; }
  .navo-root .hero-trust {
    background: var(--dark);
    padding-block: var(--s-2) var(--s-3);
  }
}

/* ============================================================
   „ARCHITEKTI" (výrobní partner pro architekty a designéry)
   Handoff: docs/content/navo/design_handoff_architekti/code/navo.css.additions.css
   Vše scoped pod .navo-root, jen existující tokeny. Nové hodnoty:
   hover tint #f3efe8, jemný papír #f5f2ec, tmavé plochy formuláře
   #20252d / #2a2f37, chybová linka #c98a6a.
   ============================================================ */

/* Hero — varianta „Co děláme" (.cd-hero). Foto architekti-hero (dva lidé nad
   výkresy a vzorky) + posun kadru scopujeme na modifikátor `.cd-hero--architekti`,
   aby se NEDOTKLO Co děláme (scoped `.cd-hero--codelame`, codelame-hero @ center 48%)
   ani Kdo jsme (`.cd-hero--kdojsme`). Kadr biasnut dolů,
   aby ve výřezu byly ruce s výkresem a vzorky, ne horní regály. */
.navo-root .cd-hero--architekti { --img-cd-hero: image-set(url("/navo/photos/architekti-hero.avif") type("image/avif"), url("/navo/photos/architekti-hero.webp") type("image/webp")); }
.navo-root .cd-hero--architekti .hero-photo { background-position: center 70%; }

/* Široká hlavička sekce: nadpis přes celou šířku, úvodní text na užší míře */
.navo-root .section-head--wide { max-width: none; }
.navo-root .section-head--wide h2 { max-width: none; }
.navo-root .section-head--wide .steps-intro { max-width: 60ch; }

/* PROČ S NÁMI — karty s gold horní linkou (jako pilíře na HP) */
.navo-root .why-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
@media (max-width: 980px) { .navo-root .why-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .navo-root .why-cards { grid-template-columns: 1fr; } }
.navo-root .why-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: clamp(28px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 14px; transition: background-color .22s cubic-bezier(0.2,0.6,0.2,1), border-color .22s cubic-bezier(0.2,0.6,0.2,1); }
@media (hover: hover) { .navo-root .why-card:hover { background: #f3efe8; border-color: var(--gold); } .navo-root .why-card:hover h3 { color: var(--gold); } }
.navo-root .why-card h3 { margin: 0; transition: color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .why-card p { margin: 0; color: var(--steel); font-size: clamp(15px, 1.05vw, 16px); line-height: var(--lh-prose); }

/* PROCES — tmavé karty s číslem + gold štítkem (sekce je `.section--dark`) */
.navo-root .proc-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
@media (max-width: 1080px) { .navo-root .proc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .navo-root .proc-grid { grid-template-columns: 1fr; } }
.navo-root .proc-card { display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 2.4vw, 36px); background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.20); }
.navo-root .proc-top { display: flex; align-items: center; gap: 10px; }
.navo-root .proc-num { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; color: rgba(255,255,255,0.5); }
.navo-root .proc-sep { color: rgba(255,255,255,0.28); }
.navo-root .proc-card h3 { color: var(--paper); margin: 0; font-size: clamp(20px, 1.7vw, 25px); letter-spacing: -0.01em; line-height: 1.15; }
.navo-root .proc-card p { color: rgba(255,255,255,0.72); margin: 0; line-height: 1.55; font-size: clamp(15px, 1.1vw, 16px); }

/* PRO KOHO — jemné karty (hairline, bez gold linky) */
.navo-root .whom-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
@media (max-width: 760px) { .navo-root .whom-grid { grid-template-columns: 1fr; } }
.navo-root .whom-card { background: var(--white); border: 1px solid var(--line); padding: clamp(28px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.navo-root .whom-card h3 { margin: 0; }
.navo-root .whom-card p { margin: 0; color: var(--steel); line-height: var(--lh-prose); font-size: clamp(15px, 1.1vw, 17px); }

/* ROZSAH SPOLUPRÁCE — jemně odlišená sekce + dvousloupcový seznam */
.navo-root .scope-section { background: #f5f2ec; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.navo-root .scope-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(32px, 4vw, 64px); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .navo-root .scope-list { grid-template-columns: 1fr; } }
.navo-root .scope-list li { display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.navo-root .scope-marker { color: var(--gold); flex: 0 0 auto; line-height: 1.3; }
.navo-root .scope-txt { font-family: var(--font-display); font-weight: 500; font-size: clamp(17px, 1.4vw, 21px); letter-spacing: -0.005em; color: var(--dark); line-height: 1.25; }

/* REALIZACE — carousel (ve stejném duchu jako partneři; peek na další slide) */
.navo-root .work-carousel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.navo-root .work-carousel-head .head-text { display: flex; flex-direction: column; gap: 16px; }
.navo-root .work-carousel-head h2 { margin: 0; }
.navo-root .work-carousel-intro { color: var(--steel); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; max-width: 60ch; margin: 0; }
@media (max-width: 768px) { .navo-root .work-carousel-head { flex-direction: column; align-items: flex-start; gap: 24px; } }
.navo-root .work-viewport { overflow: hidden; position: relative; cursor: grab; user-select: none; }
.navo-root .work-viewport.is-dragging { cursor: grabbing; }
.navo-root .work-track { display: flex; gap: 0; transition: transform 400ms cubic-bezier(0.2,0.6,0.2,1); will-change: transform; }
.navo-root .work-viewport.is-dragging .work-track { transition: none; }
.navo-root .work-slide { flex: 0 0 46%; padding-right: clamp(20px, 2.4vw, 32px); box-sizing: border-box; }
@media (max-width: 900px) { .navo-root .work-slide { flex-basis: 64%; } }
@media (max-width: 600px) { .navo-root .work-slide { flex-basis: 88%; } }
.navo-root .work-slide-photo { aspect-ratio: 3/2; background: #1f242c; background-size: cover; background-position: center; position: relative; overflow: hidden; }
.navo-root .work-slide-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(0,0,0,0.5) 100%); }
.navo-root .work-slide-photo::after { content: attr(data-cap); position: absolute; left: 18px; bottom: 14px; font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.85); z-index: 1; }
.navo-root .work-slide-body { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; }
.navo-root .work-slide-body .overline { color: var(--gold); }
.navo-root .work-slide-body h3 { margin: 0; }
.navo-root .work-slide-body p { margin: 0; color: var(--steel); line-height: var(--lh-prose); font-size: clamp(15px, 1.1vw, 16px); max-width: 42ch; }

/* OSOBNÍ KONTAKT — sloučeno do tmavého formulářového bloku (levý sloupec) */
.navo-root .person-col { display: flex; flex-direction: column; }
.navo-root .person-col > .overline { margin-bottom: 26px; }
.navo-root .person-card { display: flex; gap: clamp(20px, 2.5vw, 34px); align-items: flex-start; }
.navo-root .person-figure { flex: 0 0 auto; width: clamp(150px, 17vw, 214px); aspect-ratio: 4/5; overflow: hidden; background: #2a2f37; border: 1px solid rgba(255,255,255,0.16); }
.navo-root .person-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navo-root .person-ident { display: flex; flex-direction: column; gap: 14px; }
.navo-root .person-ident h2 { color: var(--paper); margin: 0; }
.navo-root .person-lines { display: flex; flex-direction: column; gap: 6px; }
.navo-root .person-lines a { color: var(--paper); font-size: 15px; width: fit-content; border-bottom-color: rgba(255,255,255,0.28); }
.navo-root .person-lines a:hover { color: var(--gold); border-color: var(--gold); }
.navo-root .person-quote2 { margin: 32px 0 0; padding: 0; border: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.42; letter-spacing: -0.005em; color: rgba(255,255,255,0.9); max-width: 46ch; }
.navo-root .person-quote2::before { content: "\201E"; color: var(--gold); }
.navo-root .person-quote2::after { content: "\201C"; color: var(--gold); }
@media (max-width: 480px) { .navo-root .person-card { flex-direction: column; align-items: flex-start; gap: 18px; } }

/* PARTNEŘI — intro text v hlavičce (jinak znovupoužít home Partners) */
.navo-root .partners-intro { color: var(--steel); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; max-width: 54ch; margin: 10px 0 0; }

/* FORMULÁŘ (tmavý blok) */
.navo-root .form-section { background: var(--dark); color: var(--paper); scroll-margin-top: 90px; }
.navo-root .form-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .navo-root .form-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.navo-root .form-lead { color: rgba(255,255,255,0.74); margin: 0 0 30px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; max-width: 48ch; }

/* Vlastní dropdown (Typ projektu) — chování řeší KÓD (ArchitektiFormClient.tsx) */
.navo-root .dropdown { position: relative; }
.navo-root .dropdown-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-body); font-size: 15px; color: var(--paper); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; padding: 13px 14px; cursor: pointer; text-align: left; transition: border-color .12s cubic-bezier(0.2,0.6,0.2,1), background-color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .dropdown-toggle:hover { border-color: rgba(255,255,255,0.34); }
.navo-root .dropdown.is-open .dropdown-toggle, .navo-root .dropdown-toggle:focus-visible { outline: none; border-color: var(--gold); background: rgba(255,255,255,0.07); }
.navo-root .dropdown-toggle[data-empty="true"] .dropdown-value { color: rgba(255,255,255,0.36); }
.navo-root .dropdown-caret { width: 11px; height: 7px; flex: 0 0 auto; color: var(--gold); transition: transform .18s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .dropdown.is-open .dropdown-caret { transform: rotate(180deg); }
.navo-root .dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none; background: #20252d; border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; max-height: 300px; overflow: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s cubic-bezier(0.2,0.6,0.2,1), transform .18s cubic-bezier(0.2,0.6,0.2,1), visibility .18s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.navo-root .dropdown-menu li { padding: 11px 12px; font-size: 15px; color: rgba(255,255,255,0.82); cursor: pointer; border-radius: 2px; transition: background-color .12s cubic-bezier(0.2,0.6,0.2,1), color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .dropdown-menu li:hover { background: rgba(213,172,135,0.14); color: var(--paper); }
.navo-root .dropdown-menu li[aria-selected="true"] { color: var(--gold); }

/* Formulářová pole */
.navo-root .arch-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .navo-root .arch-form { grid-template-columns: 1fr; } }
.navo-root .arch-form .full { grid-column: 1 / -1; }
.navo-root .field { display: flex; flex-direction: column; gap: 8px; }
.navo-root .field label { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.navo-root .field label .req { color: var(--gold); margin-left: 3px; }
.navo-root .field input, .navo-root .field textarea { font-family: var(--font-body); font-size: 15px; color: var(--paper); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; padding: 13px 14px; width: 100%; transition: border-color .12s cubic-bezier(0.2,0.6,0.2,1), background-color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .field textarea { resize: vertical; min-height: 130px; }
.navo-root .field input:focus, .navo-root .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,0.07); }
.navo-root .field input::placeholder, .navo-root .field textarea::placeholder { color: rgba(255,255,255,0.36); }
.navo-root .form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 4px; }
.navo-root .form-note { color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.5; margin: 0; max-width: 42ch; }
.navo-root .form-note a { color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.28); }
.navo-root .form-note a:hover { color: var(--gold); border-color: var(--gold); }
.navo-root .form-error-global { color: #c98a6a; font-size: 14px; margin: 16px 0 0; }

/* Stavy po odeslání (úspěch / chyba) — přepínají se v KÓDU */
.navo-root .form-msg { border: 1px solid rgba(255,255,255,0.2); border-left: 2px solid var(--gold); padding: 24px 26px; }
.navo-root .form-msg h3 { color: var(--paper); margin: 0 0 8px; font-size: clamp(20px, 1.7vw, 24px); }
.navo-root .form-msg p { color: rgba(255,255,255,0.74); margin: 0; }
.navo-root .form-msg--error { border-left-color: #c98a6a; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVO — „Kdo jsme" (about page)
   Handoff: docs/content/navo/design_handoff_kdo_jsme/code/navo.css.additions.css
   Scoped pod `.navo-root`, jen existující tokeny. Jediné nespojité hodnoty
   (shodné se zbytkem webu): hover tint karet #f3efe8, jemná sekce #f5f2ec,
   tmavá plocha fotky #2a2f37.

   Odchylka od verbatim additions (kontrola duplicit):
   - Foto/kadr hera scopujeme na modifikátor `.cd-hero--kdojsme` (vzor
     `.cd-hero--architekti`), NE globálně na `.cd-hero .hero-photo` — ta má
     stejnou specificitu jako base (`center 30%`) a přepsala by Co děláme.
   - `.approach-photo` dostává reálné foto hero-01 přes image-set (vzor
     `.pillar-photo--montaz`); handoff foto řešil v kódu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* HERO — varianta „Co děláme" (nižší, tmavší fotka, levé zarovnání, bez trust baru).
   Modifikátor scopuje foto kdojsme-hero (pět lidí týmu nad výkresy a vzorky) +
   posun kadru jen na Kdo jsme. Kadr volen tak, aby ve výřezu byly obličeje lidí
   a stůl se vzorky, ne strop. */
.navo-root .cd-hero--kdojsme { --img-cd-hero: image-set(url("/navo/photos/kdojsme-hero.avif") type("image/avif"), url("/navo/photos/kdojsme-hero.webp") type("image/webp")); }
.navo-root .cd-hero--kdojsme .hero-photo { background-position: center 52%; }
.navo-root .hero-sub--note { margin-top: 18px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(255,255,255,0.62); max-width: 64ch; }

/* Široká hlavička sekce: nadpis přes celou šířku, dva úvodní odstavce na užší míře.
   Používají sekce „Dvě zázemí" i „Co nás odlišuje". */
.navo-root .dama-head { max-width: none; }
.navo-root .dama-intro { display: flex; flex-direction: column; gap: 18px; max-width: 64ch; margin-top: var(--s-4); }
.navo-root .dama-intro p { margin: 0; color: var(--steel); font-size: clamp(15px, 1.2vw, 17px); line-height: var(--lh-prose); }

/* DVĚ ZÁZEMÍ. JEDEN VÝSLEDEK. — 4 statistické pilíře na hairline mřížce */
.navo-root .stat-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--line); margin-top: clamp(48px, 5vw, 72px); }
@media (max-width: 900px) { .navo-root .stat-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .navo-root .stat-cards { grid-template-columns: 1fr; } }
.navo-root .stat-card { display: flex; flex-direction: column; gap: 10px; padding: clamp(28px, 2.4vw, 40px) clamp(24px, 2vw, 34px) clamp(30px, 2.6vw, 42px) 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.navo-root .stat-card:nth-child(4n) { border-right: none; padding-right: 0; }
@media (max-width: 900px) { .navo-root .stat-card:nth-child(4n) { border-right: 1px solid var(--line); padding-right: clamp(24px, 2vw, 34px); } .navo-root .stat-card:nth-child(2n) { border-right: none; padding-right: 0; } }
@media (max-width: 520px) { .navo-root .stat-card { border-right: none !important; padding-right: 0 !important; } }
.navo-root .stat-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 4.4vw, 58px); line-height: 0.95; letter-spacing: -0.03em; color: var(--dark); }
.navo-root .stat-num--word { font-size: clamp(34px, 3.6vw, 48px); }
.navo-root .stat-num .stat-plus { color: var(--gold); }
.navo-root .stat-label { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dark); }
.navo-root .stat-desc { margin: 6px 0 0; color: var(--steel); font-size: 14px; line-height: 1.55; max-width: 30ch; }

/* NÁŠ PŘÍSTUP — tmavá sekce (`.section--dark`), dvousloupec text + fotka.
   Fotka se roztahuje na výšku textu (align-items: stretch). */
.navo-root .approach-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(40px, 5vw, 72px); align-items: stretch; }
@media (max-width: 880px) { .navo-root .approach-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.navo-root .approach-text { display: flex; flex-direction: column; gap: 22px; max-width: 52ch; }
.navo-root .approach-text .section-head--block { margin-bottom: 0; }
.navo-root .approach-text p { margin: 0; }
.navo-root .approach-photo { align-self: stretch; min-height: 340px; background: #2a2f37; background-size: cover; background-position: center; border: 1px solid rgba(255,255,255,0.16); position: relative; overflow: hidden; }
.navo-root .approach-photo { background-image: image-set(url("/navo/photos/hero-01.avif") type("image/avif"), url("/navo/photos/hero-01.webp") type("image/webp")); }
@media (max-width: 880px) { .navo-root .approach-photo { aspect-ratio: 3/2; min-height: 0; } }
.navo-root .approach-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.5) 100%); }
.navo-root .approach-photo[data-cap]::after { content: attr(data-cap); position: absolute; left: 22px; bottom: 18px; font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.85); }

/* CO NÁS ODLIŠUJE — jemně tónovaná sekce + 4 karty s gold horní linkou */
.navo-root .tint-section { background: #f5f2ec; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.navo-root .gain-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
@media (max-width: 1080px) { .navo-root .gain-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .navo-root .gain-cards { grid-template-columns: 1fr; } }
.navo-root .gain-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: clamp(28px, 2.6vw, 38px); display: flex; flex-direction: column; gap: 14px; transition: background-color .22s cubic-bezier(0.2,0.6,0.2,1), border-color .22s cubic-bezier(0.2,0.6,0.2,1); }
@media (hover: hover) { .navo-root .gain-card:hover { background: #f3efe8; border-color: var(--gold); } .navo-root .gain-card:hover h3 { color: var(--gold); } }
.navo-root .gain-card h3 { margin: 0; transition: color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .gain-card p { margin: 0; color: var(--steel); font-size: clamp(15px, 1.05vw, 16px); line-height: var(--lh-prose); }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVO — „Showroom" (showroom page)
   Handoff: docs/content/navo/design_handoff_showroom/code/navo.css.additions.css
   Scoped pod `.navo-root`, jen existující tokeny. Nové nespojité hodnoty
   (shodné se zbytkem webu): tónovaný pás #f5f2ec, tmavé plochy formuláře
   #20252d, fallback fotky #1f242c, chybová linka #c98a6a.

   KONTROLA DUPLICIT — do souboru se NEPŘIDÁVÁ, co už existuje:
   - form: form-grid, form-lead, dropdown, arch-form, field, form-submit,
     form-note, form-msg už jsou z „Architekti" (ř. ~1334+) → reuse.
   - `.showroom-grid/.showroom-photo*`, `.why-grid`, `.hero-rule`, bílý
     `.hero-overline` už jsou z Home v2 / DS → reuse.
   Odchylka od verbatim additions: hero scrim + kadr + foto scopujeme na
   `.cd-hero--showroom` (vzor `.cd-hero--kdojsme`), NE globálně na `.cd-hero`
   (regresovalo by Co děláme / Architekti / Kdo jsme).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kotvy v rámci stránky: odsazení pod fixní nav */
.navo-root #pred-navstevou, .navo-root #co-uvidite, .navo-root #objednat-navstevu { scroll-margin-top: 90px; }

/* HERO — scoped modifikátor: foto showroom-hero + kadr + scrim (světlá fotka →
   čitelný bílý text). Bílý eyebrow (`.hero-overline`) a `.hero-rule` už v DS. */
.navo-root .cd-hero--showroom { --img-cd-hero: image-set(url("/navo/photos/showroom-hero.avif") type("image/avif"), url("/navo/photos/showroom-hero.webp") type("image/webp")); }
.navo-root .cd-hero--showroom .hero-photo { background-position: center 46%; }
.navo-root .cd-hero--showroom::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20,22,26,0.55) 0%, rgba(20,22,26,0.24) 40%, transparent 64%), linear-gradient(0deg, rgba(20,22,26,0.5) 0%, rgba(20,22,26,0.12) 30%, transparent 46%); }
.navo-root .cd-hero--showroom .hero-sub { max-width: 58ch; }

/* NÁVŠTĚVA SHOWROOMU / S ČÍM PŘIJÍT — tónovaný pás + hairline nahoře/dole */
.navo-root .notice { background: #f5f2ec; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.navo-root .notice-panel { max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.navo-root .notice-panel .h-2 { max-width: 20ch; }
.navo-root .notice-panel p.notice-body { color: var(--steel); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; max-width: 60ch; margin: 0; }
.navo-root .notice-micro { color: var(--steel); font-size: 14px; line-height: 1.55; max-width: 52ch; margin: 4px 0 0; }

/* CO U NÁS UVIDÍTE — carousel fotografií s popiskem na fotce (1:1) */
.navo-root .sr-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 44px; }
.navo-root .sr-head-text { margin-bottom: 0; }
.navo-root .sr-nav { flex: 0 0 auto; }
@media (max-width: 760px) { .navo-root .sr-head { flex-direction: column; align-items: flex-start; gap: 24px; } .navo-root .sr-nav { display: none; } }
.navo-root .sr-viewport { overflow: hidden; position: relative; cursor: grab; user-select: none; }
.navo-root .sr-viewport.is-dragging { cursor: grabbing; }
.navo-root .sr-track { display: flex; gap: 0; transition: transform 400ms cubic-bezier(0.2,0.6,0.2,1); will-change: transform; }
.navo-root .sr-viewport.is-dragging .sr-track { transition: none; }
.navo-root .sr-slide { flex: 0 0 30%; padding-right: clamp(20px, 2.4vw, 32px); box-sizing: border-box; }
@media (max-width: 900px) { .navo-root .sr-slide { flex-basis: 52%; } }
@media (max-width: 600px) { .navo-root .sr-slide { flex-basis: 82%; } }
.navo-root .sr-photo { aspect-ratio: 1 / 1; background: #1f242c; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; }
.navo-root .sr-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,0.55) 100%); }
.navo-root .sr-photo[data-caption]::after { content: attr(data-caption); position: absolute; left: 22px; bottom: 18px; right: 22px; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.9); z-index: 1; }
.navo-root .sr-photo--materialy-dekory { background-image: image-set(url("/navo/photos/showroom-materialy-dekory.avif") type("image/avif"), url("/navo/photos/showroom-materialy-dekory.webp") type("image/webp")); }
.navo-root .sr-photo--kuchyne { background-image: image-set(url("/navo/photos/showroom-kuchyne.avif") type("image/avif"), url("/navo/photos/showroom-kuchyne.webp") type("image/webp")); }
.navo-root .sr-photo--dyhy { background-image: image-set(url("/navo/photos/showroom-dyhy.avif") type("image/avif"), url("/navo/photos/showroom-dyhy.webp") type("image/webp")); }
.navo-root .sr-photo--skrine-revego { background-image: image-set(url("/navo/photos/showroom-skrine-revego.avif") type("image/avif"), url("/navo/photos/showroom-skrine-revego.webp") type("image/webp")); }
.navo-root .sr-photo--pracovni-desky { background-image: image-set(url("/navo/photos/showroom-pracovni-desky.avif") type("image/avif"), url("/navo/photos/showroom-pracovni-desky.webp") type("image/webp")); }
.navo-root .sr-photo--spotrebice { background-image: image-set(url("/navo/photos/showroom-spotrebice.avif") type("image/avif"), url("/navo/photos/showroom-spotrebice.webp") type("image/webp")); }
.navo-root .sr-photo--odstiny-hrany { background-image: image-set(url("/navo/photos/showroom-odstiny-hrany.avif") type("image/avif"), url("/navo/photos/showroom-odstiny-hrany.webp") type("image/webp")); }
.navo-root .sr-photo--povrchy-detail { background-image: image-set(url("/navo/photos/showroom-povrchy-detail.avif") type("image/avif"), url("/navo/photos/showroom-povrchy-detail.webp") type("image/webp")); }
.navo-root .sr-photo--vzorky { background-image: image-set(url("/navo/photos/showroom-vzorky.avif") type("image/avif"), url("/navo/photos/showroom-vzorky.webp") type("image/webp")); }

/* ŽIVÁ KUCHYŇ / VÝBĚR MATERIÁLŮ — fotka stejně vysoká jako text (kompaktní).
   Modifikátor `--stretch` (nový); base `.showroom-grid/.showroom-photo` z DS.
   POZOR breakpoint: DS stohuje `.showroom-grid` na 1140px, override spíná na
   stejné hranici (jinak 420px letterbox v pásmu 981–1140px). */
.navo-root .showroom-grid--stretch { align-items: stretch; }
.navo-root .showroom-grid--stretch .showroom-photo { aspect-ratio: auto; min-height: 420px; align-self: stretch; }
@media (max-width: 1140px) { .navo-root .showroom-grid--stretch .showroom-photo { aspect-ratio: 4 / 3; min-height: 0; } }
.navo-root .showroom-photo--ziva-kuchyn { background-image: image-set(url("/navo/photos/showroom-ziva-kuchyn.avif") type("image/avif"), url("/navo/photos/showroom-ziva-kuchyn.webp") type("image/webp")); }
.navo-root .showroom-photo--vyber-materialu { background-image: image-set(url("/navo/photos/showroom-vyber-materialu.avif") type("image/avif"), url("/navo/photos/showroom-vyber-materialu.webp") type("image/webp")); }
/* `.showroom-text p` (base, steel) je v souboru ZA `.section--dark p` → ve tmavé
   sekci Živá kuchyň by přebilo světlou barvu. Scoped override (2 třídy) to srovná. */
.navo-root .liva .showroom-text p { color: rgba(255,255,255,0.78); }
.navo-root .liva-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: clamp(48px, 5vw, 72px); }
.navo-root .liva-point { display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 2.4vw, 34px); border: 1px solid rgba(255,255,255,0.16); border-top: 3px solid var(--gold); }
.navo-root .liva-point h3 { margin: 0; color: var(--paper); }
.navo-root .liva-point p { margin: 0; color: rgba(255,255,255,0.72); font-size: clamp(15px, 1.1vw, 16px); line-height: 1.55; }
.navo-root .liva-num { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; color: var(--gold); }
@media (max-width: 860px) { .navo-root .liva-points { grid-template-columns: 1fr; } }

/* S ČÍM PŘIJÍT — checklist (gold pomlčka). Zarovnání shora podle nadpisu řeší JS. */
.navo-root .checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.navo-root .checklist li { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; font-size: clamp(17px, 1.35vw, 20px); color: var(--dark); text-wrap: pretty; }
.navo-root .checklist li::before { content: ""; flex: none; width: 14px; height: 2px; background: var(--gold); transform: translateY(-5px); }

/* PRO KOHO — centrovaný blok. `p:not(.overline)` aby se nepřebil eyebrow. */
.navo-root .center-block { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.navo-root .center-block .overline { white-space: nowrap; }
.navo-root .center-block p:not(.overline) { color: var(--steel); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.62; max-width: 64ch; margin: 0; }

/* FORMULÁŘ — levý sloupec `.form-intro` (sticky). `.form-grid/.field/.arch-form/
   .form-*` už z „Architekti" → reuse. */
.navo-root .form-intro { display: flex; flex-direction: column; gap: 18px; position: sticky; top: calc(var(--nav-h) + 24px); }
@media (max-width: 900px) { .navo-root .form-intro { position: static; } }
.navo-root .form-intro h2 { color: var(--paper); margin: 0; }
.navo-root .form-intro p:not(.overline) { color: rgba(255,255,255,0.74); margin: 0; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; max-width: 46ch; }

/* ═══════════════════════════════════════════════════════════════════════════
   NAVO — „Kontakt" (stránka /kontakt). Vše scoped pod `.navo-root`, existující
   tokeny. Formulářové a dropdown třídy (arch-form, field, dropdown, form-submit,
   form-note, form-msg, form-lead) jsou z „Architekti/Showroom" - REUSE, nezduplikováno.
   Nové literály (fallback fotek): #ece7dd (placeholder tým), #c9bfae (iniciály).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- 1 · HERO (kontakt + formulář) — scoped `.cd-hero--kontakt` ---- */
/* Sloučený hero: přes fotku leží CELÝ formulář. Ztmavení dodávají SMĚROVÉ
   gradienty vrstvy A na .hero-photo (dle CD, vrstvení base cd-hero + kadr 44):
   flat 0.40, vertikální bottom-heavy, levý (levý sloupec textu tmavší) a horní.
   ::after (vrstva B) je jen jemný svislý scrim. Cíl: nahoře ~0.6, dole ~0.8,
   vlevo tmavší, fotka jen prosvítá, formulář čitelný. Scoped jen na kontakt
   modifikátor (base .cd-hero .hero-photo se sem nedědí). */
.navo-root .cd-hero--kontakt { --img-cd-hero: image-set(url("/navo/photos/kontakt-hero.avif") type("image/avif"), url("/navo/photos/kontakt-hero.webp") type("image/webp")); }
.navo-root .cd-hero--kontakt .hero-photo { background-image: linear-gradient(0deg, rgba(0,0,0,0.40), rgba(0,0,0,0.40)), linear-gradient(180deg, transparent 6%, rgba(0,0,0,0.32) 34%, rgba(0,0,0,0.60) 60%, rgba(0,0,0,0.78) 84%, rgba(0,0,0,0.88) 100%), linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.44) 40%, rgba(0,0,0,0.08) 72%, transparent 90%), linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 12%, transparent 24%), var(--img-cd-hero); background-size: cover; background-position: center 44%; background-repeat: no-repeat; background-color: var(--dark); }
.navo-root .cd-hero--kontakt::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,22,26,0.40) 0%, rgba(20,22,26,0.36) 44%, rgba(20,22,26,0.58) 100%); }

/* Sloučený hero: výšku řídí obsah; nahoře prostor pod fixní menu. */
.navo-root .contact-hero { min-height: auto; }
.navo-root .contact-hero .hero-inner { justify-content: flex-start; padding: 0; }
.navo-root .contact-hero .hero-inner > .container { padding-top: calc(var(--nav-h) + clamp(40px, 6vh, 88px)); padding-bottom: clamp(56px, 7vw, 112px); }

.navo-root .contact-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(44px, 5vw, 88px); align-items: start; }
@media (max-width: 940px) { .navo-root .contact-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

/* Hlavička sloupce (levý i pravý) — zarovnané eyebrow/nadpisy. */
.navo-root .ci-form-head { margin-bottom: 26px; }
.navo-root .ci-form-head h2 { color: var(--paper); margin: 14px 0 0; }
.navo-root .ci-form-head .form-lead { margin: 16px 0 0; max-width: 50ch; }

/* Levý sloupec — kontaktní informace */
.navo-root .ci-left { display: flex; flex-direction: column; }
.navo-root .ci-contacts { display: flex; flex-direction: column; gap: 26px; margin-top: clamp(38px, 4vw, 52px); padding-top: clamp(34px, 3.6vw, 46px); border-top: 1px solid rgba(255,255,255,0.16); }
.navo-root .ci-row { display: flex; flex-direction: column; gap: 8px; }
.navo-root .ci-row .overline { color: rgba(255,255,255,0.5); }
.navo-root .ci-value { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; color: var(--paper); width: fit-content; border-bottom: 1px solid rgba(255,255,255,0.22); padding-bottom: 3px; transition: color .12s cubic-bezier(0.2,0.6,0.2,1), border-color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .ci-value:hover { color: var(--gold); border-color: var(--gold); }
.navo-root .ci-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.navo-root .ci-social a { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 12px; border: 1px solid rgba(255,255,255,0.2); border-radius: 2px; color: rgba(255,255,255,0.82); font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; transition: border-color .12s cubic-bezier(0.2,0.6,0.2,1), color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .ci-social a svg { width: 16px; height: 16px; flex: 0 0 auto; }
.navo-root .ci-social a:hover { border-color: var(--gold); color: var(--gold); }
.navo-root .ci-micro { color: rgba(255,255,255,0.5); font-size: 13.5px; line-height: 1.6; margin: 28px 0 0; max-width: 44ch; }

/* ---- 2 · TÝM ---- */
.navo-root .team-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 28px); margin-top: clamp(48px, 5vw, 72px); }
@media (max-width: 1040px) { .navo-root .team-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px) { .navo-root .team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.navo-root .team-card { display: flex; flex-direction: column; gap: 14px; }
.navo-root .team-photo { aspect-ratio: 4/5; background: #ece7dd; border: 1px solid var(--line); position: relative; overflow: hidden; }
.navo-root .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navo-root .team-photo[data-initials]::after { content: attr(data-initials); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3vw, 34px); letter-spacing: 0.02em; color: #c9bfae; }
.navo-root .team-ident { display: flex; flex-direction: column; gap: 4px; }
.navo-root .team-name { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.2; color: var(--dark); }
.navo-root .team-role { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }

/* ---- 3 · ADRESY ---- */
.navo-root .addr-section { background: #f5f2ec; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.navo-root .addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 44px); margin-top: clamp(44px, 4.5vw, 64px); }
@media (max-width: 820px) { .navo-root .addr-grid { grid-template-columns: 1fr; } }
.navo-root .addr-card { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold); padding: clamp(30px, 2.8vw, 44px); display: flex; flex-direction: column; }
.navo-root .addr-card .overline { margin-bottom: 18px; }
.navo-root .addr-lines { font-style: normal; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.4; color: var(--dark); }
.navo-root .addr-lines .addr-name, .navo-root .addr-lines .addr-street { display: block; }
.navo-root .addr-ids { display: flex; gap: 26px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.navo-root .addr-ids div { display: flex; flex-direction: column; gap: 3px; }
.navo-root .addr-ids .addr-id-label { font-family: var(--font-body); font-weight: 500; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }
.navo-root .addr-ids .addr-id-value { font-family: var(--font-body); font-size: 15px; color: var(--dark); }
.navo-root .addr-note { color: var(--steel); font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.6; margin: 20px 0 0; }
.navo-root .addr-link { margin-top: 22px; }
.navo-root .addr-legal { color: var(--steel); font-size: 13px; line-height: 1.6; margin: clamp(32px, 3.4vw, 44px) 0 0; max-width: 78ch; }

/* ---- 4 · MAPA ---- */
.navo-root .map-frame { margin-top: clamp(36px, 3.6vw, 48px); border: 1px solid var(--line); background: #ece7dd; height: clamp(360px, 44vw, 520px); position: relative; }
.navo-root .map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.24) contrast(1.02); }
.navo-root .map-note { display: flex; align-items: baseline; gap: 12px; margin-top: 20px; color: var(--steel); font-size: clamp(14px, 1.1vw, 16px); line-height: 1.55; }
.navo-root .map-note .map-marker { color: var(--gold); flex: 0 0 auto; }

/* ---- 5 · EU DOTACE (decentní technický blok nad patičkou) ---- */
.navo-root .eu-section { background: #f5f2ec; border-top: 1px solid var(--line); }
.navo-root .eu-section .container { padding-top: clamp(40px, 4vw, 56px); padding-bottom: clamp(40px, 4vw, 56px); }
.navo-root .eu-inner { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 3vw, 48px); align-items: start; }
@media (max-width: 720px) { .navo-root .eu-inner { grid-template-columns: 1fr; gap: 24px; } }
.navo-root .eu-logo { border: 1px solid var(--line); background: var(--white); padding: 20px 22px; display: flex; align-items: center; }
@media (max-width: 720px) { .navo-root .eu-logo { justify-self: start; max-width: 300px; } }
.navo-root .eu-logo img { width: 100%; height: auto; display: block; }
.navo-root .eu-body { color: var(--steel); font-size: 12.5px; line-height: 1.65; }
.navo-root .eu-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 28px; margin: 0 0 14px; }
@media (max-width: 560px) { .navo-root .eu-meta { grid-template-columns: 1fr; } }
.navo-root .eu-meta div { display: flex; gap: 6px; }
.navo-root .eu-meta .eu-k { color: var(--dark); flex: 0 0 auto; }
.navo-root .eu-body p { margin: 0 0 10px; max-width: 90ch; }
.navo-root .eu-body p:last-child { margin-bottom: 0; }
.navo-root .eu-budget { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 4px 0 12px; }
.navo-root .eu-budget span strong { color: var(--dark); font-weight: 500; }


/* ###################### REALIZACE — VÝPIS (listing) ###################### */
/* =========================================================================
   NAVO — Realizace / VÝPIS (listing)  (route /realizace)
   Přílohové styly k připojení na KONEC navo.css (verbatim).
   Prefix .navo-root .rz-* / .rz2-* — nekoliduje s ostatními stránkami.
   Používá tokeny NAVO DS + jednu nespojitou hodnotu #14181e (podklad
   dlaždice než se načte cover foto). Text přes foto = scrim gradient.
   ========================================================================= */

html, body { margin: 0; background: #faf9f7; }
html { scroll-behavior: smooth; }

/* HERO — stejný vzor jako „Co děláme": foto pod navem, gradienty pro čitelný text */
.navo-root .rz-hero { min-height: 78vh; min-height: 78svh; }
.navo-root .rz-hero .hero-photo {
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.34), rgba(0,0,0,0.34)),
    linear-gradient(90deg, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.44) 38%, rgba(0,0,0,0.08) 70%, transparent 90%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 12%, transparent 24%),
    var(--img-rz-hero);
  background-size: cover;
  background-position: center 42%;
}
.navo-root .rz-hero .hero-inner { padding-block: var(--s-9) var(--s-8); gap: 0; }
.navo-root .rz-hero h1 { max-width: 20ch; }
.navo-root .rz-hero .hero-sub { max-width: 56ch; }

/* FILTR KATEGORIÍ */
.navo-root .rz-filter-wrap { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.navo-root .rz-filter { max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px); display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); }
.navo-root .rz-tab { appearance: none; background: none; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); padding: 22px 0; position: relative; transition: color .12s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .rz-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .18s cubic-bezier(0.2,0.6,0.2,1); }
.navo-root .rz-tab:hover { color: var(--dark); }
.navo-root .rz-tab.is-active { color: var(--gold); }
.navo-root .rz-tab.is-active::after { transform: scaleX(1); }
.navo-root .rz-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ===== GRID REALIZACÍ v2 — text přes fotky ===== */
.navo-root .rz2-wrap { display: flex; flex-direction: column; gap: clamp(20px, 2vw, 30px); }

/* společné chování dlaždice s textem přes fotku */
.navo-root .rz2-tile { position: relative; display: block; overflow: hidden; background: #14181e; text-decoration: none; border-bottom: 0; isolation: isolate; }
.navo-root .rz2-tile:hover { border-bottom: 0; }
.navo-root .rz2-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.navo-root .rz2-img { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.02); transition: transform 720ms cubic-bezier(0.2,0.6,0.2,1); }
@media (hover: hover) { .navo-root .rz2-tile:hover .rz2-img { transform: scale(1.075); } }
.navo-root .rz2-scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(18,22,28,0) 38%, rgba(18,22,28,0.45) 66%, rgba(18,22,28,0.90) 100%);
  transition: opacity .3s cubic-bezier(0.2,0.6,0.2,1); }
@media (hover: hover) { .navo-root .rz2-tile:hover .rz2-scrim { opacity: 0.9; } }
.navo-root .rz2-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(22px, 2.2vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.navo-root .rz2-title { margin: 0; color: #fff; letter-spacing: -0.015em; text-shadow: 0 1px 24px rgba(0,0,0,0.35); }
.navo-root .rz2-metarow { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.navo-root .rz2-meta { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.02em; color: rgba(255,255,255,0.82); margin: 0; }
.navo-root .rz2-arrow { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.30); color: #fff; font-size: 17px; line-height: 1; transform: translateX(-4px); opacity: 0; transition: opacity .28s cubic-bezier(0.2,0.6,0.2,1), transform .28s cubic-bezier(0.2,0.6,0.2,1), background-color .12s, border-color .12s, color .12s; }
@media (hover: hover) {
  .navo-root .rz2-tile:hover .rz2-arrow { opacity: 1; transform: translateX(0); }
  .navo-root .rz2-tile:hover .rz2-arrow { background: var(--gold); border-color: var(--gold); color: var(--dark); }
}
@media (hover: none) { .navo-root .rz2-arrow { opacity: 1; transform: none; } }

/* featured — široká cinematická dlaždice */
.navo-root .rz2-featured { aspect-ratio: 16/7; }
.navo-root .rz2-featured .rz2-cap { max-width: 720px; padding: clamp(24px, 3vw, 48px); }
.navo-root .rz2-featured .rz2-title { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.04; }
@media (max-width: 760px) { .navo-root .rz2-featured { aspect-ratio: 4/5; } }

/* mozaika — pevná výška řádku => stejně vysoké dlaždice, žádné mezery */
.navo-root .rz2-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: clamp(240px, 24vw, 340px); gap: clamp(20px, 2vw, 30px); }
.navo-root .rz2-grid .rz2-tile.rz2-wide { grid-column: span 2; }
.navo-root .rz2-grid .rz2-title { font-size: clamp(21px, 1.55vw, 26px); line-height: 1.1; }
@media (max-width: 900px) { .navo-root .rz2-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: clamp(230px, 34vw, 320px); } .navo-root .rz2-grid .rz2-tile.rz2-wide { grid-column: span 2; } }
@media (max-width: 560px) { .navo-root .rz2-grid { grid-template-columns: 1fr; grid-auto-rows: 68vw; } .navo-root .rz2-grid .rz2-tile.rz2-wide { grid-column: span 1; } }

/* PÁS JAK PRACUJEME — tmavý, krátký */
.navo-root .rz-how { background: var(--dark); color: var(--paper); }
.navo-root .rz-how-inner { max-width: 1240px; margin: 0 auto; padding: clamp(64px, 7vw, 96px) clamp(24px, 5vw, 64px); display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(28px, 4vw, 64px); flex-wrap: wrap; }
.navo-root .rz-how-text { max-width: 54ch; }
.navo-root .rz-how-text h2 { color: var(--paper); margin: 16px 0 0; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.015em; line-height: 1.18; }
.navo-root .rz-how-link { flex: 0 0 auto; }


/* ###################### REALIZACE — DETAIL PROJEKTU ###################### */
/* =========================================================================
   NAVO — Realizace / DETAIL PROJEKTU  (route /realizace/[slug])
   Přílohové styly k připojení na KONEC navo.css (verbatim).
   Vše prefixováno .navo-root .rd-* — nekoliduje s ostatními stránkami.
   Používá jen tokeny NAVO DS (--dark/--gold/--paper/--steel/--line,
   --nav-h, --page-pad, --container-wide, --s-8/--s-9, --ease-out) +
   jednu nespojitou hodnotu: #3a3f47 (tělo prózy, měkká čerň) a #14181e
   (podklad dlaždice „další realizace" než se načte foto).
   ========================================================================= */

/* ---- Breadcrumb bar (pod hero, na paper) ---- */
.navo-root .rd-crumbbar { border-bottom: 1px solid var(--line); }
.navo-root .rd-crumbbar-inner {
  max-width: var(--container-wide); margin: 0 auto;
  padding: 20px var(--page-pad);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel);
}
.navo-root .rd-crumbbar-inner a { border-bottom: 0; color: var(--steel); display: inline-flex; align-items: center; gap: 8px; }
.navo-root .rd-crumbbar-inner a:hover { color: var(--gold); }
.navo-root .rd-crumbbar-inner a .arr { transition: transform .2s var(--ease-out); }
.navo-root .rd-crumbbar-inner a:hover .arr { transform: translateX(-3px); }
.navo-root .rd-crumbbar-inner .sep { color: var(--line); }
.navo-root .rd-crumbbar-inner .cur { color: var(--dark); }

/* ---- Hero (full-bleed foto, jako ostatní stránky) ---- */
.navo-root .rd-hero { min-height: 92vh; min-height: 92svh; }
.navo-root .rd-hero .hero-photo {
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.42), rgba(0,0,0,0.42)),
    linear-gradient(90deg, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.58) 45%, rgba(0,0,0,0.30) 72%, rgba(0,0,0,0.10) 92%),
    linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 16%, transparent 34%, transparent 62%, rgba(0,0,0,0.46) 100%),
    var(--img-rd-hero);
  background-size: cover; background-position: center 45%; background-repeat: no-repeat;
}
.navo-root .rd-hero .hero-inner { justify-content: flex-end; padding-block: calc(2 * var(--nav-h) + 24px) var(--s-8); gap: 0; }
.navo-root .rd-hero h1 { max-width: 18ch; color: var(--paper); }
.navo-root .rd-hero .rd-lede {
  margin-top: 26px; max-width: 56ch;
  font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: rgba(255,255,255,0.80);
}

/* meta strip v heru — na tmavém scrimu */
.navo-root .rd-herometa {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(40px, 4vw, 58px); padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.navo-root .rd-herometa .m {
  padding: 0 24px; border-left: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-direction: column; gap: 9px;
}
.navo-root .rd-herometa .m:first-child { border-left: 0; padding-left: 0; }
.navo-root .rd-herometa .k {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.navo-root .rd-herometa .v {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 1.4vw, 22px); line-height: 1.2; letter-spacing: -0.01em; color: var(--paper);
}
@media (max-width: 720px) {
  .navo-root .rd-herometa { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .navo-root .rd-herometa .m:nth-child(3) { border-left: 0; padding-left: 0; }
}

/* ---- Full-bleed figure ---- */
.navo-root .rd-bleed { margin: 0; }
.navo-root .rd-bleed .rd-img {
  width: 100%; background-color: var(--line);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.navo-root .rd-ar-32 { aspect-ratio: 3 / 2; }
.navo-root .rd-ar-169 { aspect-ratio: 16 / 9; }
.navo-root figure { margin: 0; }
.navo-root .rd-cap {
  max-width: var(--container-wide); margin: 0 auto;
  padding: 16px var(--page-pad) 0;
  display: flex; gap: 16px; align-items: baseline;
  font-family: var(--font-body); font-size: 13px; color: var(--steel); letter-spacing: 0.01em;
}
.navo-root .rd-cap .idx {
  font-weight: 500; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); flex: 0 0 auto;
}

/* ---- Prose section (long-form) ---- */
.navo-root .rd-prose { max-width: var(--container-wide); margin: 0 auto; padding-inline: var(--page-pad); }
.navo-root .rd-block { padding-block: clamp(72px, 9vw, 128px); }
.navo-root .rd-block--tight { padding-block: clamp(48px, 6vw, 88px); }
.navo-root .rd-grid {
  display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 62ch);
  gap: clamp(32px, 6vw, 96px); align-items: start;
}
.navo-root .rd-grid .rd-eyebrow {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  position: sticky; top: calc(var(--nav-h) + 28px);
}
.navo-root .rd-grid .rd-eyebrow .num { display: block; color: var(--steel); margin-bottom: 10px; }
.navo-root .rd-body h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.015em;
  color: var(--dark); margin: 0 0 24px;
}
.navo-root .rd-body p {
  color: #3a3f47; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.66;
  max-width: 62ch; margin: 0 0 20px;
}
.navo-root .rd-body p:last-child { margin-bottom: 0; }
.navo-root .rd-body strong { font-weight: 500; color: var(--dark); }
@media (max-width: 860px) {
  .navo-root .rd-grid { grid-template-columns: 1fr; gap: 24px; }
  .navo-root .rd-grid .rd-eyebrow { position: static; }
}

/* ---- Two-up detail pair ---- */
.navo-root .rd-pair {
  max-width: var(--container-wide); margin: 0 auto; padding-inline: var(--page-pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 30px);
}
.navo-root .rd-pair figure { display: flex; flex-direction: column; }
.navo-root .rd-pair .rd-img { aspect-ratio: 4 / 5; }
.navo-root .rd-pair figcaption {
  margin-top: 14px; font-family: var(--font-body); font-size: 13px; color: var(--steel);
  display: flex; gap: 14px; align-items: baseline;
}
.navo-root .rd-pair figcaption .idx {
  font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
@media (max-width: 640px) { .navo-root .rd-pair { grid-template-columns: 1fr; } }

/* ---- Pull statement ---- */
.navo-root .rd-pull { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.navo-root .rd-pull-inner {
  max-width: var(--container-wide); margin: 0 auto; padding: clamp(72px, 9vw, 120px) var(--page-pad);
  display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px);
}
.navo-root .rd-pull .overline { color: var(--gold); }
.navo-root .rd-pull q {
  font-family: var(--font-display); font-weight: 500; quotes: none;
  font-size: clamp(26px, 3vw, 44px); line-height: 1.22; letter-spacing: -0.02em;
  color: var(--dark); max-width: 22ch; display: block;
}
@media (max-width: 860px) { .navo-root .rd-pull-inner { grid-template-columns: 1fr; gap: 22px; } }

/* ---- Specs (definition list) ---- */
.navo-root .rd-specs { border-top: 1px solid var(--line); }
.navo-root .rd-specs .r {
  display: grid; grid-template-columns: minmax(0, 22ch) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 96px); padding: 22px 0; border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.navo-root .rd-specs .k {
  font-family: var(--font-body); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel);
}
.navo-root .rd-specs .v { color: var(--dark); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.5; }
.navo-root .rd-specs .v .sub { color: var(--steel); }
@media (max-width: 640px) { .navo-root .rd-specs .r { grid-template-columns: 1fr; gap: 6px; } }

/* ---- Gallery mozaika (zbylé fotky) ---- */
.navo-root .rd-mosaic {
  max-width: var(--container-wide); margin: 0 auto; padding-inline: var(--page-pad);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 2vw, 30px);
}
.navo-root .rd-mosaic .rd-img { aspect-ratio: 1 / 1; }
.navo-root .rd-mosaic .t-3 { grid-column: span 3; }
.navo-root .rd-mosaic .t-3 .rd-img { aspect-ratio: 3 / 2; }
.navo-root .rd-mosaic .t-2 { grid-column: span 2; }
@media (max-width: 760px) {
  .navo-root .rd-mosaic { grid-template-columns: repeat(2, 1fr); }
  .navo-root .rd-mosaic .t-3, .navo-root .rd-mosaic .t-2 { grid-column: span 1; }
  .navo-root .rd-mosaic .t-3 .rd-img { aspect-ratio: 1 / 1; }
}

/* ---- Next projects ---- */
.navo-root .rd-next { border-top: 1px solid var(--line); }
.navo-root .rd-next-inner { max-width: var(--container-wide); margin: 0 auto; padding: clamp(56px, 6vw, 88px) var(--page-pad); }
.navo-root .rd-next-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(28px, 3vw, 44px); flex-wrap: wrap;
}
.navo-root .rd-next-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.015em; color: var(--dark); margin: 0; }
.navo-root .rd-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 30px); }
.navo-root .rd-ntile { display: block; text-decoration: none; border-bottom: 0; position: relative; overflow: hidden; }
.navo-root .rd-ntile:hover { border-bottom: 0; }
.navo-root .rd-ntile .rd-nimg { aspect-ratio: 4 / 3; background: #14181e; background-size: cover; background-position: center; transform: scale(1.02); transition: transform 720ms cubic-bezier(0.2,0.6,0.2,1); }
@media (hover: hover) { .navo-root .rd-ntile:hover .rd-nimg { transform: scale(1.07); } }
.navo-root .rd-ntile .rd-ncap { padding-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.navo-root .rd-ntile h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.4vw, 22px); letter-spacing: -0.01em; color: var(--dark); margin: 0; transition: color .12s var(--ease-out); }
.navo-root .rd-ntile:hover h3 { color: var(--gold); }
.navo-root .rd-ntile .nmeta { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em; color: var(--steel); }
.navo-root .rd-ntile .narr { font-size: 15px; color: var(--steel); transition: color .12s var(--ease-out), transform .2s var(--ease-out); }
.navo-root .rd-ntile:hover .narr { color: var(--gold); transform: translateX(4px); }
@media (max-width: 760px) { .navo-root .rd-next-grid { grid-template-columns: 1fr; } }


/* ###################### REALIZACE — <picture> fill (mimo CD) ###################### */
/* Doplněk k CD stylům: CD používá background-image na .rz2-img/.rd-img/.rd-nimg.
   Zadání ale žádá <picture> avif+webp, proto v těchto kontejnerech renderujeme
   <picture><img>. Tyto řádky jen zajistí, aby <img> vyplnil kontejner (object-fit
   cover) se zachováním CD layoutu/hoveru. Scoped .navo-root, žádná jiná stránka. */
.navo-root .rz2-img, .navo-root .rd-img, .navo-root .rd-nimg { display: block; }
.navo-root .rz2-img > img,
.navo-root .rd-img > img,
.navo-root .rd-nimg > img { display: block; width: 100%; height: 100%; object-fit: cover; }