/* ==========================================================================
   Signery — vizuální styl webu
   Postaveno podle „Signery — Manuál vizuálního stylu, vydání 01 / 2026".
   Rozložení vychází ze šablony Pipely (home-v2): plovoucí navbar, obsah
   v zaoblených kartách na barevné ploše, velká lehká typografie, pilulkové CTA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · Tokeny
   -------------------------------------------------------------------------- */
:root {
  /* Primární paleta (manuál, str. 17) */
  --moss: #70704e;
  --olive: #37371b;
  --linen: #f0eade;
  --sage: #afae90;
  --white: #ffffff;

  /* Odstíny (manuál, str. 18) — text nikdy nesázíme pod 60 % */
  --moss-80: #8d8d72;
  --moss-40: #c6c6b8;
  --moss-20: #e2e2db;
  --olive-80: #5f5f49;
  --olive-40: #aeae9d;
  --olive-20: #d7d7ce;
  --sage-80: #bfbea7;
  --sage-40: #dfdfd3;
  --sage-20: #efefe9;
  --linen-50: #f7f5ef;
  /* Plocha karet — 30 % Sage v Linen, mezi pozadím a akcentní kartou */
  --surface-tint: #ddd8c7;

  /* Sémantika */
  --bg: var(--linen);
  --surface: var(--white);
  --surface-soft: var(--linen-50);
  --ink: var(--olive);
  /* Odvozené odstíny převzaté přímo z manuálu značky, ne odhadnuté */
  --ink-soft: #55543e;
  --ink-muted: #5f5d4b;
  --ink-on-dark: #c8c6ae;
  --line: #e2dbcd;
  --line-strong: #dcd5c7;

  /* Písmo (manuál, str. 21–23) */
  --font-display: "Poppins", "Arial", sans-serif;
  --font-text: "DM Sans", "Arial", sans-serif;

  /* Rastr: 12 sloupců, gutter 24 px (manuál, str. 32) */
  --wrap: 1240px;
  --gutter: 24px;

  /* Rádiusy — tlačítko 100 px (manuál, str. 32) */
  --r-pill: 100px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;

  /* Rytmus — velkorysý, aby sekce dýchaly */
  --sp-section: clamp(88px, 11vw, 168px);
  --sp-block: clamp(44px, 5.5vw, 80px);

  /* Škála energetických tříd — monochromatický přechod ze značkové palety.
     Konkurence používá zeleno-červenou. Signery zůstává u svých barev. */
  --penb-a: #c9c9ae;
  --penb-b: #afae90;
  --penb-c: #9a9a7c;
  --penb-d: #85856a;
  --penb-e: #70704e;
  --penb-f: #565640;
  --penb-g: #37371b;

  --shadow-soft: 0 1px 2px rgba(55, 55, 27, 0.04), 0 12px 32px rgba(55, 55, 27, 0.05);
  --shadow-lift: 0 2px 4px rgba(55, 55, 27, 0.05), 0 20px 44px rgba(55, 55, 27, 0.09);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   02 · Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5; /* manuál: body 17/26 px */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sage); color: var(--olive); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--olive);
  color: var(--linen);
  border-radius: var(--r-pill);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* --------------------------------------------------------------------------
   03 · Typografie
   -------------------------------------------------------------------------- */
.display,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em; /* manuál: titulky -2 až -4 % */
  line-height: 1.1;
  color: var(--ink);
  overflow-wrap: break-word;
}

.display {
  font-size: clamp(2.125rem, 6.2vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.h1 { font-size: clamp(1.95rem, 5.2vw, 3.75rem); letter-spacing: -0.03em; line-height: 1.05; }
.h2 { font-size: clamp(1.75rem, 3.8vw, 3rem); letter-spacing: -0.03em; line-height: 1.08; }
.h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.2; }
.h4 { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

.body-lg { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); }
.body { color: var(--ink-soft); }
.body-sm { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }

/* Popisek — DM Sans Medium, verzálky, +8 % (manuál, str. 23) */
.label {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
}

.num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 5vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--moss);
}

.u-max-52 { max-width: 52ch; }
.u-max-46 { max-width: 46ch; }
.u-max-38 { max-width: 38ch; }
.u-center { text-align: center; margin-inline: auto; }

/* --------------------------------------------------------------------------
   04 · Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}

.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
.section--flush-top { padding-top: 0; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-bottom: var(--sp-block);
}
.section-head__text { display: grid; gap: 18px; }

@media (min-width: 860px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
    gap: 48px;
  }
  .section-head--split .section-head__aside {
    justify-self: end;
    text-align: left;
    max-width: 42ch;
  }
}

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.stack { display: grid; gap: 20px; }
.stack-sm { display: grid; gap: 12px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Plocha — obsahová karta na ploše Linen */
.panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 56px);
  box-shadow: var(--shadow-soft);
}
.panel--soft { background: var(--surface-soft); box-shadow: none; border: 1px solid var(--line); }
.panel--sage { background: var(--sage); box-shadow: none; }
.panel--moss { background: var(--moss); box-shadow: none; }
.panel--olive { background: var(--olive); box-shadow: none; }

/* Kombinace na plochách (manuál, str. 19) */
.on-dark, .panel--olive, .panel--moss, .cta-band { color: var(--linen); }
.on-dark :is(h1, h2, h3, h4),
.panel--olive :is(h1, h2, h3, h4),
.panel--moss :is(h1, h2, h3, h4),
.cta-band :is(h1, h2, h3, h4) { color: var(--linen); }
.on-dark :is(.lead, .body, .body-lg),
.panel--olive :is(.lead, .body, .body-lg),
.panel--moss :is(.lead, .body, .body-lg),
.cta-band :is(.lead, .body, .body-lg) { color: rgba(240, 234, 222, 0.78); }
.on-dark .body-sm,
.panel--olive .body-sm,
.cta-band .body-sm { color: rgba(240, 234, 222, 0.6); }
.panel--olive .label, .cta-band .label { color: var(--sage); }
.panel--moss .label { color: rgba(240, 234, 222, 0.75); }
.on-dark .num, .cta-band .num { color: var(--sage); }
.panel--sage .label { color: var(--olive); }
.panel--sage .lead, .panel--sage .body { color: rgba(55, 55, 27, 0.75); }

/* --------------------------------------------------------------------------
   05 · Oblouk — grafický prvek (manuál, str. 25)
   Nerotujeme, nezrcadlíme, vždy otevřený dolů a zarovnaný k hraně / základní linii.
   -------------------------------------------------------------------------- */
/* Proporce převzaté přímo z loga: šířka 98,6 · výška 99,6 · noha 28,25 */
.arch {
  --arch-w: clamp(50px, 12vw, 150px);
  display: block;
  border-style: solid;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  border-color: currentColor;
  border-width: calc(var(--arch-w) * 0.2865);
  width: var(--arch-w);
  height: calc(var(--arch-w) * 1.0101);
}
.arch--solid {
  border: 0;
  background: currentColor;
  border-radius: 999px 999px 0 0;
}
.arch--sm { --arch-w: 64px; }

.arch-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.4vw, 18px);
}
.arch-row > * { flex: 0 0 auto; }
.arch-row .arch:nth-child(1) { color: var(--sage); }
.arch-row .arch:nth-child(2) { color: var(--moss-80); }
.arch-row .arch:nth-child(3) { color: var(--moss); }
.arch-row .arch:nth-child(4) { color: var(--olive); }

/* Oblouk jako podklad plochy — dekorace ukotvená ke spodní hraně sekce */
.arch-deco {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px 999px 0 0;
  opacity: 0.5;
}
.arch-deco--left { left: -60px; width: 260px; height: 300px; background: var(--sage-40); }
.arch-deco--right { right: -40px; width: 220px; height: 260px; background: rgba(175, 174, 144, 0.28); }
.section > .wrap { position: relative; z-index: 1; }

/* Oblouky na tmavé ploše — rytmus u spodní hrany, mimo text.
   Manuál str. 27: „Na potisk nikdy nesázíme text." Proto je pro obloučky
   vyhrazený spodní pás plochy a obsah nad ně nikdy nezasahuje. */
.panel.panel--deco-arches,
.cta-band.panel--deco-arches { padding-bottom: clamp(120px, 14vw, 200px); }
.panel--deco-arches::before,
.panel--deco-arches::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px 999px 0 0;
}
.panel--deco-arches::before {
  right: clamp(20px, 5vw, 72px);
  width: clamp(72px, 9vw, 128px);
  height: clamp(84px, 11vw, 150px);
  background: rgba(175, 174, 144, 0.18);
}
.panel--deco-arches::after {
  right: clamp(108px, 16vw, 224px);
  width: clamp(72px, 9vw, 128px);
  height: clamp(56px, 7.5vw, 104px);
  background: rgba(175, 174, 144, 0.1);
}

/* --------------------------------------------------------------------------
   06 · Tlačítka — DM Sans Bold, verzálky, +10 %, rádius 100 px
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
  white-space: nowrap;
}
/* Na úzkých displejích se dlouhá CTA raději zalomí, než aby přetekla */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; line-height: 1.35; }
  .hero__actions .btn { width: 100%; }
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Na ploše Linen: Moss CTA */
.btn--primary { background: var(--moss); color: var(--white); }
.btn--primary:hover { background: var(--olive); }

.btn--ghost { background: transparent; color: var(--olive); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--olive); background: rgba(55, 55, 27, 0.04); }

/* Na ploše Moss: bílé CTA */
.panel--moss .btn--primary,
.on-moss .btn--primary { background: var(--white); color: var(--olive); }
.panel--moss .btn--primary:hover { background: var(--linen); }
.panel--moss .btn--ghost,
.on-moss .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.panel--moss .btn--ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }

/* Na ploše Olive Deep: Moss CTA */
.panel--olive .btn--primary,
.on-olive .btn--primary { background: var(--moss); color: var(--white); }
.panel--olive .btn--primary:hover { background: var(--sage); color: var(--olive); }
.panel--olive .btn--ghost,
.cta-band .btn--ghost { color: var(--linen); border-color: rgba(240, 234, 222, 0.35); }
.panel--olive .btn--ghost:hover,
.cta-band .btn--ghost:hover { border-color: var(--linen); background: rgba(240, 234, 222, 0.08); }
.cta-band .btn--primary:hover { background: var(--sage); color: var(--olive); }

.btn--sm { padding: 12px 22px; font-size: 0.75rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--moss);
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; }
.link-arrow:hover { gap: 14px; color: var(--olive); }
.on-dark .link-arrow { color: var(--sage); }
.on-dark .link-arrow:hover { color: var(--linen); }

/* --------------------------------------------------------------------------
   07 · Logo
   POZOR: wordmark níže je typografická náhrada v Poppins, aby web fungoval.
   Před spuštěním nahraďte originálním SVG ze značkové knihovny (manuál, str. 15:
   „Nikdy nepřekreslujte z PDF ani ze screenshotu.").
   -------------------------------------------------------------------------- */
.logo { display: inline-block; line-height: 0; flex: 0 0 auto; }
.logo__img {
  display: block;
  width: auto;
  /* Poměr wordmarku je 689 : 198. Minimální šířka podle manuálu (str. 10)
     je 104 px, což odpovídá výšce 30 px — pod ni nejdeme. */
  height: 30px;
}
.logo--lg .logo__img { height: 44px; }

/* --------------------------------------------------------------------------
   08 · Navigace — plovoucí pilulka
   -------------------------------------------------------------------------- */
.nav-outer {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 401;   /* nad zrnem — ovládání webu zůstává ostré */
  padding: 14px clamp(16px, 3vw, 28px);
  background: linear-gradient(var(--linen) 62%, rgba(240, 234, 222, 0));
}

.nav {
  max-width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 12px 10px 24px;
  border-radius: var(--r-pill);

  /* Sklo — obsah pod pilulkou prosvítá rozostřený */
  background: rgba(252, 250, 245, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 2px rgba(55, 55, 27, 0.04), 0 14px 36px rgba(55, 55, 27, 0.07);
}

/* Prohlížeče bez backdrop-filter dostanou plnou plochu, ať zůstane čitelná */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(252, 250, 245, 0.96); }
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(4px, 1.4vw, 10px);
}
.nav__link {
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__link:hover { color: var(--olive); background: var(--linen); }
.nav__link[aria-current="page"] { color: var(--olive); background: var(--linen); }

.nav__actions { display: flex; align-items: center; gap: 8px; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 1.5px;
  background: var(--olive);
  border-radius: 2px;
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__cta { display: none; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--linen);
  padding: 96px clamp(20px, 6vw, 40px) 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 4px;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
  overflow-y: auto;
  overflow-x: hidden;
}
.mobile-menu[data-open="true"] { transform: translateY(0); }
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 6.5vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__foot { margin-top: 28px; display: grid; gap: 14px; justify-items: start; }
body[data-menu-open="true"] { overflow: hidden; }

/* 1080px = nejmenší šířka, kde se pět položek vejde na jeden řádek bez zalomení */
@media (min-width: 1080px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .nav__cta { display: inline-flex; }
  .mobile-menu { display: none; }
}

/* --------------------------------------------------------------------------
   09 · Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: 0;
  overflow: hidden;
}
.hero__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 84px) clamp(28px, 5vw, 72px) 0;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.hero__inner { position: relative; z-index: 2; max-width: 900px; }
.hero__title { margin-top: 22px; }
.hero__lead { margin-top: 26px; max-width: 54ch; }
.hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__arches {
  margin-top: clamp(48px, 7vw, 88px);
  position: relative;
  z-index: 2;
}
.hero__foot {
  position: relative;
  z-index: 2;
  margin-top: clamp(28px, 4vw, 44px);
  padding: 22px 0 clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  justify-content: space-between;
}
.hero__foot-claim { max-width: 56ch; }

/* Hero varianta pro podstránky */
.page-hero { padding-top: clamp(40px, 6vw, 72px); }
.page-hero__inner { max-width: 780px; }
.page-hero__title { margin-top: 18px; }
.page-hero__lead { margin-top: 24px; }

/* --------------------------------------------------------------------------
   10 · Pás značek / segmentů (marquee)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.marquee__item::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--sage);
  -webkit-mask: url("../img/logo/arch-olive.svg") center / contain no-repeat;
  mask: url("../img/logo/arch-olive.svg") center / contain no-repeat;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 28px)); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   11 · Karty
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--linen);
  color: var(--moss);
  flex: 0 0 auto;
}
.card__icon svg { width: 24px; height: 24px; }
.card__foot { margin-top: auto; padding-top: 8px; }
.card__index {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--sage);
}
.card--soft { background: var(--surface-soft); }
.card--sage { background: var(--sage); border-color: transparent; }
.card--sage .body, .card--sage .body-sm { color: rgba(55, 55, 27, 0.72); }
.card--olive { background: var(--olive); border-color: transparent; color: var(--linen); }
.card--olive .h3, .card--olive .h4 { color: var(--linen); }
.card--olive .body, .card--olive .body-sm { color: rgba(240, 234, 222, 0.72); }

/* Oblouk jako rám pro obsah — ukotvený ke spodní hraně karty */
.card--arched::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: 0;
  width: 116px;
  height: 132px;
  border-radius: 999px 999px 0 0;
  background: var(--linen);
  opacity: 0.85;
  z-index: 0;
}
.card--arched > * { position: relative; z-index: 1; }
.card--arched::after { background: rgba(255, 255, 255, 0.38); }
.card--sage.card--arched::after { background: rgba(255, 255, 255, 0.22); }
.card--olive.card--arched::after { background: rgba(112, 112, 78, 0.5); }

/* Metriky */
.metric {
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  display: grid;
  gap: 8px;
  align-content: start;
}
.metric__label { font-size: 0.9375rem; color: var(--ink-muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   12 · Pyramida značky (CO / JAK / PROČ)
   -------------------------------------------------------------------------- */
.pyramid { display: grid; gap: 2px; border-radius: var(--r-md); overflow: hidden; }
.pyramid__row {
  display: grid;
  gap: 8px 32px;
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
  background: rgba(240, 234, 222, 0.07);
  align-items: baseline;
}
.pyramid__key {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage);
}
@media (min-width: 720px) {
  .pyramid__row { grid-template-columns: 100px minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   13 · Časová osa spolupráce
   -------------------------------------------------------------------------- */
.timeline { position: relative; display: grid; gap: 0; }
.timeline__step {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 22px 0 22px 42px;
  border-top: 1px solid var(--line);
}
.timeline__step:last-child { border-bottom: 1px solid var(--line); }
.timeline__step::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 30px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--moss);
}
.timeline__step::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: -22px;
  width: 1px;
  background: var(--line-strong);
}
.timeline__step:last-child::after { display: none; }
.timeline__no {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--sage);
}

@media (min-width: 900px) {
  .timeline {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--gutter);
  }
  .timeline__step {
    padding: 46px 12px 0 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 0 !important;
  }
  .timeline__step::before { left: 0; top: -6px; }
  .timeline__step::after { display: none; }
  .timeline__step:last-child { border-bottom: 0; }
}

/* Osa „Jsme tam, kde vznikají dobré stavby" */
.axis { display: grid; gap: 18px; }
.axis__actors {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.axis__actor {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  gap: 6px;
}
.axis__actor-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
}
.axis__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  background: var(--moss);
  color: var(--white);
  border-radius: var(--r-pill);
}
.axis__bar .logo { color: var(--white); font-size: 1.125rem; }
.axis__bar-text {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   14 · Pilíře
   -------------------------------------------------------------------------- */
.pillar {
  display: grid;
  gap: 12px;
  padding: clamp(24px, 3vw, 32px) 0;
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr);
}
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar__no {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1;
  color: var(--sage);
}
@media (min-width: 820px) {
  .pillar {
    grid-template-columns: 80px minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 32px;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   15 · Záložky (reference)
   -------------------------------------------------------------------------- */
.tabs { display: grid; gap: 32px; }
.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  width: max-content;
  max-width: 100%;
}
.tabs__btn {
  padding: 11px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.tabs__btn[aria-selected="true"] { background: var(--moss); color: var(--white); }
.tabs__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   16 · Případové studie
   -------------------------------------------------------------------------- */
.case {
  display: grid;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.case__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sage-40);
  display: grid;
  place-items: end start;
  padding: 20px;
  overflow: hidden;
}
.case__media::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 92px;
  height: 108px;
  border-radius: 999px 999px 0 0;
  background: rgba(112, 112, 78, 0.25);
}
.case__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.case__tag {
  position: relative;
  z-index: 1;
  padding: 7px 14px;
  background: var(--white);
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--moss);
}
.case__body { padding: clamp(22px, 3vw, 30px); display: grid; gap: 18px; }
.case__facts { display: grid; gap: 14px; }
.case__fact { display: grid; gap: 4px; }
.case__fact dt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage);
}
.case__fact dd { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   17 · Služby — seznam
   -------------------------------------------------------------------------- */
.service-list { display: grid; gap: 0; }
.service {
  display: grid;
  gap: 10px 32px;
  padding: clamp(22px, 3vw, 30px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service__no { font-family: var(--font-display); font-size: 0.8125rem; letter-spacing: 0.08em; color: var(--sage); padding-top: 5px; }
.service__badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--linen);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--moss);
}
@media (min-width: 820px) {
  .service { grid-template-columns: 56px minmax(0, 0.85fr) minmax(0, 1.15fr) auto; }
}

/* --------------------------------------------------------------------------
   18 · FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--olive);
}
.faq__sign {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.faq__btn[aria-expanded="true"] .faq__sign {
  transform: rotate(45deg);
  background: var(--moss);
  color: var(--white);
  border-color: var(--moss);
}
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq__panel[data-open="true"] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { padding-bottom: 24px; max-width: 68ch; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   19 · Formulář
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--olive);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  transition: border-color 0.2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--moss); }
.field--row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.form__note { font-size: 0.8125rem; color: var(--ink-muted); }

/* Past na roboty — schovaná tak, aby ji nenašly ani čtečky obrazovky,
   ale aby ji vyplňovač formulářů v prohlížeči robota pořád viděl. */
.form__past {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hlášení po odeslání formuláře */
.form__stav {
  margin-bottom: 24px;
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  border: 1px solid var(--moss);
  background: var(--sage-40);
  color: var(--olive);
}
.form__stav[data-ok="false"] {
  border-color: #b4553f;
  background: #f6e3dd;
  color: #7d3524;
}
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; color: var(--ink-soft); }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex: 0 0 auto; accent-color: var(--moss); }

/* Kontaktní blok */
.contact-item { display: grid; gap: 4px; padding-block: 16px; border-top: 1px solid var(--line); }
.contact-item:last-child { border-bottom: 1px solid var(--line); }
.contact-item a { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; letter-spacing: -0.02em; }
.contact-item a:hover { color: var(--moss); }

/* --------------------------------------------------------------------------
   20 · CTA pás
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--olive);
  color: var(--linen);
  padding: clamp(40px, 6vw, 84px) clamp(28px, 5vw, 72px);
}
.cta-band__inner { position: relative; z-index: 1; display: grid; gap: 26px; max-width: 720px; }

/* --------------------------------------------------------------------------
   21 · Patička
   -------------------------------------------------------------------------- */
.footer { padding-block: var(--sp-block) 32px; }
.footer__panel {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4vw, 56px);
  box-shadow: var(--shadow-soft);
}
.footer__top {
  display: grid;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer__brand { display: grid; gap: 18px; align-content: start; max-width: 34ch; }
.footer__cols { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.footer__col-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 14px;
}
.footer__col li + li { margin-top: 10px; }
.footer__col a { font-size: 0.9375rem; color: var(--ink-soft); transition: color 0.2s var(--ease); }
.footer__col a:hover { color: var(--moss); }
.footer__bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 64px; }
}

/* --------------------------------------------------------------------------
   22 · Animace odhalení (bez JS zůstává obsah viditelný)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   23 · Pomocné
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.u-mt-24 { margin-top: 24px; }
.u-mt-40 { margin-top: 40px; }
.u-mt-56 { margin-top: clamp(32px, 5vw, 56px); }

/* ==========================================================================
   24 · Fotografie
   Styl podle manuálu str. 28: denní světlo, tlumené tóny, jeden hlavní motiv.
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sage-40);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--wide { aspect-ratio: 16 / 9; }
.media--tall { aspect-ratio: 3 / 4; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--square { aspect-ratio: 1 / 1; }

/* Oblouk jako rám pro obsah (manuál, str. 25) — otevřený dolů, nerotovaný */
.media--arch { border-radius: 999px 999px var(--r-lg) var(--r-lg); }

.media__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(18px, 2.5vw, 28px);
  color: var(--linen);
  font-size: 0.875rem;
  background: linear-gradient(180deg, rgba(55, 55, 27, 0) 0%, rgba(55, 55, 27, 0.72) 100%);
}
/* Chip dole — u obloukového rámu by ho horní zaoblení oříznulo */
.media__chip {
  position: absolute;
  bottom: 18px; left: 18px;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--moss);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Jemné dojetí obrazu při odhalení */
.js .media[data-reveal] img { transform: scale(1.07); transition: transform 1.4s var(--ease); }
.js .media[data-reveal].is-in img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .media[data-reveal] img { transform: none; transition: none; }
}

/* Celoplošný pás s fotografií */
.band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* obsah nikdy nepřeteče plochu */
  align-items: end;
  min-height: clamp(400px, 60vh, 640px);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Lehké ztmavení celé plochy — dává snímku hloubku a drží horní okraj */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, rgba(55, 55, 27, 0.42) 0%, rgba(55, 55, 27, 0.12) 45%, rgba(55, 55, 27, 0.45) 100%);
}
/* Stínítko pod textem. Váže se na obsah, takže drží kontrast bez ohledu
   na to, jak je snímek světlý a jak je text dlouhý. */
.band__content::before {
  content: "";
  position: absolute;
  inset: -90px -60% -1px -1px;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(26, 26, 10, 0.90) 0%,
    rgba(26, 26, 10, 0.86) 55%,
    rgba(26, 26, 10, 0.66) 82%,
    rgba(26, 26, 10, 0) 100%);
  /* Doprava se rozplyne, aby stínítko nekončilo ostrou hranou */
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
  mask-image: linear-gradient(to right, #000 52%, transparent 100%);
}

.band__content {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 5vw, 68px);
  color: var(--linen);
  display: grid;
  gap: 18px;
  isolation: isolate;
  max-width: 40ch;
}
.band__content :is(h1, h2, h3) { color: var(--linen); }
.band__content .lead, .band__content .body { color: rgba(240, 234, 222, 0.82); }
.band__content .label { color: var(--sage); }

/* Dvousloupcová sekce obraz + text */
.split { display: grid; gap: clamp(28px, 4.5vw, 72px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--reverse > *:first-child { order: 2; }
  .split--wide-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* ==========================================================================
   25 · Typografický rytmus (méně textu, delší dech)
   ========================================================================== */
.statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}
.statement strong { font-weight: 500; }
.measure { max-width: 34ch; }
.measure-lg { max-width: 46ch; }
.prose { display: grid; gap: 20px; max-width: 56ch; }
.prose p { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.65; }
.prose strong { color: var(--ink); font-weight: 500; }

/* Odrážky bez puntíků — jemná linka místo nich */
.tick-list { display: grid; gap: 0; }
.tick-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.tick-list li:last-child { border-bottom: 1px solid var(--line); }
/* Značka je přesný tvar písmene „n" z loga, ne kreslená napodobenina */
.tick-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 4px;
  background: var(--sage);
  -webkit-mask: url("../img/logo/arch-olive.svg") center / contain no-repeat;
  mask: url("../img/logo/arch-olive.svg") center / contain no-repeat;
}

/* ==========================================================================
   26 · Rozcestí B2B / B2C
   ========================================================================== */
.paths { display: grid; gap: var(--gutter); }
@media (min-width: 860px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.path {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  min-height: clamp(360px, 46vw, 480px);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--linen);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.path > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.path::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(55, 55, 27, 0.28) 0%, rgba(55, 55, 27, 0.9) 82%);
  transition: background 0.4s var(--ease);
}
.path:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.path:hover > img { transform: scale(1.045); }
.path__inner {
  position: relative;
  z-index: 1;
  padding: clamp(26px, 3.4vw, 42px);
  display: grid;
  gap: 14px;
}
.path__inner h3 { color: var(--linen); }
.path__inner p { color: rgba(240, 234, 222, 0.82); font-size: 1rem; line-height: 1.55; }
.path__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--linen);
}
.path__cta svg { width: 17px; height: 17px; transition: transform 0.3s var(--ease); }
.path:hover .path__cta svg { transform: translateX(5px); }

/* ==========================================================================
   27 · Animované objekty z energetického průkazu
   Vše se rozjede až při odhalení sekce a respektuje prefers-reduced-motion.
   ========================================================================== */

/* --- 27a · Škála energetických tříd A–G ------------------------------------ */
.penb {
  display: grid;
  gap: 7px;
  --penb-tip: clamp(12px, 1.6vw, 20px);
}
.penb__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.penb__track { position: relative; height: clamp(30px, 3.4vw, 42px); }
.penb__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  display: flex;
  align-items: center;
  padding-left: clamp(12px, 1.6vw, 18px);
  background: var(--c);
  clip-path: polygon(0 0, calc(100% - var(--penb-tip)) 0, 100% 50%, calc(100% - var(--penb-tip)) 100%, 0 100%);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  color: var(--olive);
  overflow: hidden;
  transition: width 0.95s var(--ease) var(--d, 0s);
}
.penb__bar--dark { color: var(--linen); }
.is-in .penb__bar { width: var(--w); }

.penb__desc {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.5s var(--ease) var(--d, 0s), transform 0.5s var(--ease) var(--d, 0s);
}
.is-in .penb__desc { opacity: 1; transform: none; }

/* Na úzkém displeji necháme jen samotnou škálu — popisky by ji rozbily.
   Textovou alternativu nese aria-label na .penb, takže se nic neztrácí. */
@media (max-width: 720px) {
  .penb__row { grid-template-columns: minmax(0, 1fr); }
  .penb__desc { display: none; }
}

/* Zvýrazněná třída + ukazatel */
.penb__row--active .penb__track::after {
  content: "";
  position: absolute;
  inset: -5px -5px -5px -5px;
  border: 1.5px solid var(--olive);
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.5s var(--ease) 1.15s;
}
.is-in .penb__row--active .penb__track::after { opacity: 1; }
.penb__flag {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(6px, -50%);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--olive);
  color: var(--linen);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.45s var(--ease) 1.3s, transform 0.45s var(--ease) 1.3s;
  white-space: nowrap;
  z-index: 2;
}
.is-in .penb__flag { opacity: 1; transform: translate(0, -50%); }

.penb-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 22px;
  box-shadow: var(--shadow-soft);
}
.penb-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.penb-card__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}
.on-dark .penb-card, .panel--olive .penb-card {
  background: rgba(240, 234, 222, 0.06);
  border-color: rgba(240, 234, 222, 0.14);
  box-shadow: none;
}
.on-dark .penb__desc, .panel--olive .penb__desc { color: rgba(240, 234, 222, 0.62); }
.on-dark .penb-card__foot, .panel--olive .penb-card__foot {
  color: rgba(240, 234, 222, 0.62);
  border-top-color: rgba(240, 234, 222, 0.16);
}
.panel--olive .penb__row--active .penb__track::after { border-color: var(--sage); }
.panel--olive .penb__flag { background: var(--sage); color: var(--olive); }

/* --- 27b · Ručička měřidla ------------------------------------------------- */
.gauge { width: 100%; max-width: 340px; overflow: visible; }
.gauge__track { fill: none; stroke: var(--line); stroke-width: 13; stroke-linecap: round; }
.gauge__value {
  fill: none;
  stroke: var(--moss);
  stroke-width: 13;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.5s var(--ease) 0.15s;
}
.is-in .gauge__value { stroke-dashoffset: calc(100 - var(--pct, 62)); }
.gauge__needle {
  transform: rotate(-92deg);
  transform-origin: 100px 104px;
  transition: transform 1.5s cubic-bezier(0.34, 1.25, 0.5, 1) 0.15s;
}
.is-in .gauge__needle { transform: rotate(calc(-92deg + var(--pct, 62) * 1.8deg)); }
.gauge__needle line { stroke: var(--olive); stroke-width: 3.5; stroke-linecap: round; }
.gauge__needle circle { fill: var(--olive); }
.gauge__cap { fill: var(--white); }
.gauge-figure { display: grid; justify-items: center; gap: 6px; }
.gauge-figure__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--olive);
}

/* --- 27c · Podpis — motiv značky (signery / signature) --------------------- */
.sig { width: clamp(180px, 26vw, 280px); height: auto; overflow: visible; }
.sig__path {
  fill: none;
  stroke: var(--moss);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
.is-in .sig__path { stroke-dashoffset: 0; }
.sig--light .sig__path { stroke: var(--sage); }

/* --- 27d · Obálka budovy a únik tepla ------------------------------------- */
.envelope { width: 100%; max-width: 460px; overflow: visible; }
.envelope__shell { fill: none; stroke: var(--olive); stroke-width: 2.2; stroke-linejoin: round; }
.envelope__fill { fill: rgba(175, 174, 144, 0.22); }
.envelope__inner { fill: none; stroke: var(--sage); stroke-width: 1.6; stroke-dasharray: 5 5; }
.envelope__flow {
  stroke: var(--moss);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
}
.is-in .envelope__flow { animation: flow 3.4s var(--ease) infinite; }
.envelope__flow:nth-of-type(2) { animation-delay: 0.45s; }
.envelope__flow:nth-of-type(3) { animation-delay: 0.9s; }
.envelope__flow:nth-of-type(4) { animation-delay: 1.35s; }
.envelope__flow:nth-of-type(5) { animation-delay: 1.8s; }
@keyframes flow {
  0%   { opacity: 0; transform: translate(0, 0); }
  22%  { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--fx, 22px), var(--fy, -12px)); }
}

/* --- 27e · Počítadlo hodnot ---------------------------------------------- */
.counter {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--moss);
  font-variant-numeric: tabular-nums;
}
.counter-item { display: grid; gap: 10px; align-content: start; }
.counter-item__unit { font-size: 0.8125rem; color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.on-dark .counter, .panel--olive .counter { color: var(--sage); }
.on-dark .counter-item__unit, .panel--olive .counter-item__unit { color: rgba(240, 234, 222, 0.6); }

/* --- 27f · Osa projektu s dojíždějící linkou ------------------------------ */
.rail { position: relative; display: grid; gap: 0; }
.rail__line {
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--line-strong);
  overflow: hidden;
}
.rail__line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--rail-p, 0) * 100%);
  background: var(--moss);
}
.rail__step {
  position: relative;
  padding: 18px 0 18px 40px;
  display: grid;
  gap: 5px;
  /* Položky se roztahují na výšku nejvyšší z nich. Bez tohoto by se volné
     místo rozdělilo mezi řádky a kroky s kratším textem by měly nadpis níž. */
  align-content: start;
}
.rail__step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--bg);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
  transition-delay: var(--d, 0s);
}
.rail__step.is-on::before { border-color: var(--moss); background: var(--moss); }
.rail__step h3 { font-size: 1.0625rem; }
@media (min-width: 960px) {
  .rail { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--gutter); }
  .rail__line { left: 0; right: 0; top: 6px; bottom: auto; width: auto; height: 2px; }
  .rail__line::after { inset: 0 auto 0 0; height: 100%; width: calc(var(--rail-p, 0) * 100%); }
  .rail__step { padding: 34px 16px 0 0; }
  .rail__step::before { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .penb__bar { transition: none; width: var(--w); }
  .penb__desc, .penb__flag { transition: none; opacity: 1; transform: none; }
  .gauge__value { transition: none; stroke-dashoffset: calc(100 - var(--pct, 62)); }
  .gauge__needle { transition: none; transform: rotate(calc(-92deg + var(--pct, 62) * 1.8deg)); }
  .sig__path { transition: none; stroke-dashoffset: 0; }
  .is-in .envelope__flow { animation: none; opacity: 0.75; }
  .rail__step { opacity: 1 !important; }
}

/* --------------------------------------------------------------------------
   24 · ÚVODNÍ SCÉNA — video
   Video drží 80 % šířky, scrollem povyroste do plné plochy a roste do středu.
   Teprve pak se rozostří a ustoupí ploše Linen.
   -------------------------------------------------------------------------- */
.stage { position: relative; height: 420vh; background: var(--olive); }

.stage__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}

/* place-items:center → rám roste na všechny strany od středu */
.stage__media {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}

.stage__frame {
  position: relative;
  width: var(--frame-w, 80vw);
  height: var(--frame-h, 45vw);
  border-radius: var(--frame-r, 20px);
  overflow: hidden;
  will-change: transform, filter;
  filter: blur(var(--blur, 0px));
  box-shadow: 0 50px 130px rgba(0, 0, 0, 0.5);
}

.stage__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--img-s, 1));
  /* Odbarvíme, aby duotón níž mohl obraz přebarvit do palety značky */
  filter: grayscale(1) contrast(1.12) brightness(0.96);
}

/* Duotón — obraz převezme barevnost značky.
   Odbarvené video drží jas, tato vrstva mu dodá odstín Moss → Olive Deep. */
.stage__tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, var(--sage), var(--moss) 45%, var(--olive));
  mix-blend-mode: color;
}
/* Prohloubení stínů, ať obraz není plochý */
.stage__tone {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(112,112,78,.42), rgba(55,55,27,.58));
  mix-blend-mode: multiply;
}

/* Filmové zrno — jemný artový rozklad, drží text čitelný */
.stage__grain {
  position: absolute; inset: -120%; pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.52' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='3' intercept='-0.62'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Závoj pro čitelnost titulku */
.stage__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--olive);
  opacity: var(--veil, 0.32);
}

/* Ztmavení horního pásu, aby navigace držela kontrast i nad světlým záběrem */
.stage__scrim {
  position: absolute; inset: 0 0 auto 0; height: 190px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(24, 24, 10, 0.62), rgba(24, 24, 10, 0));
}

.stage__copy {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap);
  padding-inline: clamp(20px, 5vw, 48px);
  text-align: center; color: var(--linen);
  display: grid; place-items: center;
  pointer-events: none;
}
.stage__layer { grid-area: 1 / 1; }
.stage__copy .display { color: var(--linen); text-shadow: 0 2px 40px rgba(0,0,0,.35); }

.stage__one { opacity: var(--o1, 1); transform: translateY(var(--y1, 0px)); }
.stage__two {
  opacity: var(--o2, 0); transform: translateY(var(--y2, 44px));
  display: grid; justify-items: center;
}
.stage__eyebrow { display: block; margin-bottom: 26px; color: var(--sage); }
.stage__sub {
  margin-top: 26px; max-width: 48ch; margin-inline: auto;
  color: rgba(240, 234, 222, 0.82);
}
.stage__actions {
  margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  pointer-events: auto;
}
.stage__actions .btn--ghost { color: var(--linen); border-color: rgba(240,234,222,.4); }
.stage__actions .btn--ghost:hover { border-color: var(--linen); background: rgba(240,234,222,.1); }

.stage__scroll {
  position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%);
  z-index: 3; display: grid; justify-items: center; gap: 10px;
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(240, 234, 222, 0.7);
  opacity: var(--o1, 1); pointer-events: none;
}
.stage__scroll i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(rgba(240,234,222,.75), transparent);
  animation: drop 2.2s var(--ease) infinite;
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: top; }
  56%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Plocha Linen vyjede zdola a rovnou na sobě nese tvrzení */
.stage__sheet {
  position: absolute; inset: 0; z-index: 4;
  background: var(--linen);
  transform: translateY(var(--sheet, 100%));
  will-change: transform;
  display: grid; place-items: center;
  padding-inline: clamp(20px, 5vw, 48px);
}

.claim {
  text-align: center;
  transform: translateY(var(--claim-y, 30px)) scale(var(--claim-s, 0.96));
  will-change: transform;
}
.claim__eyebrow { opacity: var(--claim-o, 0); }

/* Titulek se píše po písmenech — každé se vynoří z rozostření
   a vyjede o 5 px zespodu. */
.ltr {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  filter: blur(9px);
  transform: translateY(5px);
}
.claim.is-writing .ltr {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition: opacity 0.5s var(--ease), filter 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 26ms);
}

@media (prefers-reduced-motion: reduce) {
  .ltr { opacity: 1; filter: none; transform: none; }
}
.claim__eyebrow { display: block; margin-bottom: clamp(24px, 3.2vw, 48px); }

/* Tvrzení má celou obrazovku samo pro sebe, proto je největší sazbou webu —
   větší než hero, které se o plochu dělí s podtitulkem a tlačítky. */
.claim__title {
  margin-inline: auto;
  max-width: none;
  font-size: clamp(2.25rem, 8.5vw, 7.5rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
}
.claim__soft { color: var(--moss); }

@media (max-width: 780px) {
  .stage { height: 360vh; }
}

@media (prefers-reduced-motion: reduce) {
  .stage { height: auto; background: var(--olive); }
  .stage__sticky { position: static; height: auto; padding-block: clamp(80px, 12vw, 140px); }
  .stage__media { position: relative; inset: auto; margin-bottom: 40px; }
  .stage__frame { width: min(92vw, var(--wrap)); height: auto; aspect-ratio: 16 / 9; filter: none; }
  .stage__grain { animation: none; }
  .stage__one { display: none; }
  .stage__two { opacity: 1; transform: none; }
  .stage__scroll, .stage__sheet { display: none; }
}

/* --------------------------------------------------------------------------
   25 · Navigace nad scénou
   Navigace je fixní, aby video sahalo až k hornímu okraji. Dokud běží scéna,
   je pilulka tmavá a průsvitná; jakmile ji překryje plocha Linen, vrátí se
   do běžné podoby.
   -------------------------------------------------------------------------- */
body { padding-top: 92px; }
body.has-stage { padding-top: 0; }

.nav-outer { transition: background-color 0.4s var(--ease); }
.nav-outer[data-over-stage="true"] { background: none; }
.nav { transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }

.nav-outer[data-over-stage="true"] .nav {
  background: rgba(30, 30, 14, 0.22);
  border-color: transparent;   /* nad videem by světlá hrana rušila */
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-outer[data-over-stage="true"] .logo__img { filter: brightness(0) invert(1); opacity: 0.95; }
.nav-outer[data-over-stage="true"] .nav__link { color: rgba(240, 234, 222, 0.82); }
.nav-outer[data-over-stage="true"] .nav__link:hover,
.nav-outer[data-over-stage="true"] .nav__link[aria-current="page"] {
  color: var(--linen); background: rgba(240, 234, 222, 0.16);
}
.nav-outer[data-over-stage="true"] .nav__cta { background: var(--linen); color: var(--olive); }
.nav-outer[data-over-stage="true"] .nav__cta:hover { background: var(--white); }
.nav-outer[data-over-stage="true"] .nav__toggle { border-color: rgba(240, 234, 222, 0.4); }
.nav-outer[data-over-stage="true"] .nav__toggle span { background: var(--linen); }

/* --------------------------------------------------------------------------
   26 · Čistá plocha — konec bílých boxů
   Sekce leží přímo na ploše Linen, oddělují je mezery a vlasové linky.
   -------------------------------------------------------------------------- */
.hero__panel,
.footer__panel {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding-inline: 0;
}

.panel {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding-inline: 0;
}
/* Barevné plochy zůstávají — nesou vlastní sdělení */
.panel--olive,
.panel--moss,
.panel--sage {
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 56px);
}
.panel--olive { background: var(--olive); }
.panel--moss  { background: var(--moss); }
.panel--sage  { background: var(--sage); }

.panel--soft {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: clamp(32px, 4vw, 56px) 0 0;
}

.card {
  background: var(--surface-tint);
  border: 0;
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: none;
}
.card--link:hover { transform: none; box-shadow: none; }
.card--link:hover .h3 { color: var(--moss); }
.card--soft { background: var(--surface-tint); }
/* Barevné karty si drží plochu */
.card--sage, .card--olive {
  border-top: 0;
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
}
.card--sage { background: var(--sage); }
.card--olive { background: var(--olive); }

.metric {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 24px 0 0;
}

.case {
  background: none;
  border: 0;
  border-radius: 0;
}
.case__media { border-radius: var(--r-md); }
.case__body { padding: 22px 0 0; }

.tabs__list { background: none; border-color: var(--line); }

.field input,
.field select,
.field textarea {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 12px 0;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--moss); }

.footer { padding-top: 0; }
.footer__panel { border-top: 1px solid var(--line); padding-top: clamp(32px, 4vw, 56px); }

/* --------------------------------------------------------------------------
   18 · Otvírací sekvence — rýsování značky
   Oblouk je výřez z písmene „n" ve wordmarku (shodná souřadná soustava),
   takže se dá vykreslit přesně na svém místě a nechat kolem něj dorůst
   zbytek loga. Kóty a osy odkazují na jazyk technického výkresu.
   -------------------------------------------------------------------------- */
.intro {
  position: fixed; inset: 0; z-index: 500;
  display: grid; place-items: center;
  background: var(--olive);
  color: var(--sage);
  transition: transform 0.9s var(--ease), opacity 0.6s var(--ease);
}
.intro[data-done="true"] { transform: translateY(-100%); opacity: 0; }
.intro[hidden] { display: none; }

/* Během sekvence se pod ní nescrolluje */
body[data-intro="true"] { overflow: hidden; }

.intro__inner { width: min(760px, 84vw); display: grid; justify-items: center; gap: 26px; }
.intro__svg { width: 100%; height: auto; overflow: visible; }

/* Sekvence začíná detailem na oblouku a odjede, až kolem něj doroste wordmark.
   Střed oblouku je v souřadnicích výkresu na 346,25 × 88,68 z 689 × 198. */
.intro__zoom {
  transform-box: view-box;
  transform-origin: 50.25% 44.8%;
  transform: scale(2.15);
}
.is-drawing .intro__zoom { animation: introZoom .95s var(--ease) 1.7s forwards; }
@keyframes introZoom { to { transform: scale(1); } }

/* --- pomocné čáry ------------------------------------------------------- */
.intro__guides line { stroke-width: 1; }
.intro__guides line,
.intro__guides circle { opacity: 0; }

.intro__guides line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.is-drawing .g-base  { animation: gLine .55s var(--ease) .10s forwards; opacity: .34; }
.is-drawing .g-axis  { animation: gLine .55s var(--ease) .18s forwards; opacity: .26; }
.is-drawing .g-dim   { animation: gLine .5s  var(--ease) .34s forwards; opacity: .8; }
.is-drawing .g-tick  { animation: gLine .3s  var(--ease) .42s forwards; opacity: .8; }
.is-drawing .g-rad   { animation: gLine .4s  var(--ease) 1.10s forwards; opacity: .8; }
.is-drawing .g-dot   { animation: gFade .3s var(--ease) 1.10s forwards; }

@keyframes gLine { to { stroke-dashoffset: 0; } }
@keyframes gFade { to { opacity: .9; } }

/* --- popisky kót -------------------------------------------------------- */
.intro__labels text {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0;
}
.is-drawing .intro__labels text { animation: gFade .4s var(--ease) .58s forwards; }
.is-drawing .intro__labels text:last-child { animation-delay: 1.25s; }

/* --- oblouk: nejdřív obrys, pak výplň ----------------------------------- */
.intro__arch path {
  fill: var(--linen);
  fill-opacity: 0;
  stroke: var(--sage);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.is-drawing .intro__arch path {
  animation: gLine 1s var(--ease) .40s forwards,
             archFill .55s var(--ease) 1.5s forwards;
}
@keyframes archFill { to { fill-opacity: 1; stroke-opacity: 0; } }

/* --- zbytek wordmarku dorůstá kolem ------------------------------------- */
.intro__rest path { fill: var(--linen); opacity: 0; }
.is-drawing .intro__rest path { animation: gFade1 .55s var(--ease) 1.95s forwards; }
@keyframes gFade1 { to { opacity: 1; } }

/* Kóty po dokreslení ustoupí */
.is-drawing .intro__guides,
.is-drawing .intro__labels { animation: guidesOut .5s var(--ease) 1.85s forwards; }
@keyframes guidesOut { to { opacity: 0; } }

.intro__caption {
  font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(240, 234, 222, 0.45);
  opacity: 0;
}
.intro__caption b { color: var(--sage); font-weight: 500; }
.is-drawing .intro__caption { animation: gFade1 .5s var(--ease) 2.35s forwards; }

.intro__skip {
  position: absolute; right: clamp(16px, 4vw, 32px); bottom: clamp(16px, 4vw, 32px);
  padding: 10px 18px;
  background: transparent; border: 1px solid rgba(240, 234, 222, 0.25);
  border-radius: var(--r-pill); color: rgba(240, 234, 222, 0.7);
  font-family: var(--font-text); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.intro__skip:hover { color: var(--linen); border-color: rgba(240, 234, 222, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* --------------------------------------------------------------------------
   27 · Řádky odhalované zpod masky
   Používá je tvrzení na ploše Linen v úvodní scéně.
   -------------------------------------------------------------------------- */
.lines__row { display: block; }
.lines__row i { display: block; font-style: normal; }

/* --------------------------------------------------------------------------
   28 · Zrno přes celou stránku
   Jemná vrstva přes celý web — sjednotí fotografie s plochou Linen
   a dá webu tištěný, artový tón. Nezachytává kliknutí.
   -------------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.17;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.5' intercept='-0.52'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  body::after { opacity: 0.1; }
}

/* --------------------------------------------------------------------------
   29 · Osa procesu — scéna se zastavením
   Sekce se na chvíli zastaví a další scrollování kreslí linku zleva doprava.
   Kroky přitom postupně tmavnou ze světlé do plné barvy, aby byl proces vidět.
   -------------------------------------------------------------------------- */
.rail-scene { position: relative; }
.rail-scene__sticky { position: relative; }

/* Krok je nejdřív světlý a s příchodem linky ztmavne */
.rail__step {
  opacity: calc(0.22 + 0.78 * var(--sp, 1));
  transition: opacity 0.35s linear;
}

@media (min-width: 960px) {
  /* Zastavení dává smysl jen tam, kde je osa vodorovná */
  .rail-scene { height: 220vh; }
  .rail-scene__sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: grid;
    align-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-scene { height: auto; }
  .rail-scene__sticky { position: static; min-height: 0; }
  .rail__step { opacity: 1; }
  .rail__line::after { width: 100%; height: 100%; }
}

/* --------------------------------------------------------------------------
   30 · Kontaktní formulář na celou šířku sekce
   Vedle formuláře už nic nestojí, proto ho držíme v pohodlné míře čtení
   a centrujeme — přes celou šířku stránky by se řádky rozpadly.
   -------------------------------------------------------------------------- */
.form-single { max-width: 760px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   31 · Rozcestník B2B / B2C — výraznější popisek
   Na přání klientky větší písmo, ať je rozdělení cest čitelné na první pohled.
   -------------------------------------------------------------------------- */
.path__tag {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}