/* Brand tokens — zdroj: wiki/brand/brand-guide.md */
@font-face {
  font-family: "Akkordeon";
  src: url("/fonts/akkordeon/Akkordeon-Eight.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* block (ne swap): u běžícího nápisu by záměna fontu za běhu měnila šířku
     stopy a animace by viditelně poskočila */
  font-display: block;
}

@font-face {
  /* Použito jen na homepage hero, výhradně dle Figmy */
  font-family: "Akkordeon-Six";
  src: url("/fonts/akkordeon/Akkordeon-Six.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans/InstrumentSans-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/instrument-sans/InstrumentSans-Variable-Italic.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Primární */
  --color-lime: #ACCE00;
  --color-magenta: #E31D94;
  --color-purple: #7F38B2;

  /* Sekundární */
  --color-lime-light: #D6E799;
  --color-pulse: #EDB9E0;
  --color-violet: #CAA0DD;
  --color-berry: #631244;
  --color-pine: #132F28;
  --color-void: #3C1253;

  --color-bg: #FFFFFF;
  --color-text: #1A1A1A;

  --font-heading: "Akkordeon", "Bebas Neue", sans-serif;
  --font-body: "Instrument Sans", Arial, sans-serif;

  --container-width: 1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

/* Odkazy v menu sjíždějí plynule, ne skokem. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-pine);
  margin: 0 0 0.5em 0;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: 1.375rem; }

a { color: var(--color-purple); }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.site-header .logo img {
  height: 32px;
  display: block;
}

.site-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: var(--color-pine);
  text-decoration: none;
  font-weight: 500;
}

.site-nav a:hover { color: var(--color-magenta); }

.site-nav__lang {
  color: var(--color-pine);
  font-weight: 600;
}
.site-nav__lang span { font-weight: 400; opacity: 0.6; }

/* Footer (Zapati) */
.site-footer {
  background: var(--color-lime);
  color: var(--color-pine);
  padding: 64px 24px;
  margin-top: 80px;
}

.footer-grid {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 40px;
  align-items: end;
}

.footer-logo img { height: 48px; grid-column: 1 / -1; margin-bottom: 24px; }

.footer-info p, .footer-social p { margin: 4px 0; }
.footer-social { text-align: right; }
.footer-social a { color: var(--color-pine); text-decoration: none; }
.footer-social a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-social { text-align: left; }
}

.placeholder-note {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--color-lime-light);
  color: var(--color-pine);
  font-size: 0.85rem;
}

/* Zástupný obrázek — dokud nemáme reálnou fotku */
.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #F2F2F2, #F2F2F2 10px, #E8E8E8 10px, #E8E8E8 20px);
  color: #8A8A8A;
  font-size: 0.85rem;
  text-align: center;
  border-radius: 4px;
}

/* ---- Homepage (1:1 dle Figmy, pevná šířka 1440px, desktop-only zatím) ---- */

/* Přesné souřadnice z Figmy — absolutní layout, plátno 1440 x 9022 */
.fig-canvas { position: relative; width: 1440px; height: 9022px; margin: 0 auto; }
.fig-canvas section, .fig-canvas > footer { position: absolute; }

/* 1. HOME_PAGE (hero) — left 0, top 0, 1440x800 */
.fig-hero { left: 0; top: 0; width: 1440px; height: 800px; background: var(--color-lime); }
.fig-hero__nav { position: absolute; left: 40px; top: 30px; width: 1359px; display: flex; justify-content: flex-end; align-items: flex-start; gap: 8px; }
.fig-hero__nav a, .fig-hero__nav .fig-lang { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--color-pine); text-decoration: none; padding: 8px 24px; white-space: pre; }
.fig-hero__nav .fig-lang span { font-weight: 400; }
.fig-hero__logo { position: absolute; left: 110px; top: 195px; width: 1220px; height: 231px; }
/* Skládané logo, hamburger a zlom nadpisu patří jen mobilu. */
.fig-hero__logo--skladane, .fig-burger, .fig-zaves, .zlom-mobil { display: none; }

/* Kontakty jsou odkazy (mailto/tel), ale mají vypadat jako okolní text. */
.fig-footer__info a, .fig-contact__info a { color: inherit; text-decoration: none; }
.fig-footer__info a:hover, .fig-contact__info a:hover { text-decoration: underline; }
.fig-hero__text { position: absolute; left: 126px; top: 461px; width: 1182px; padding: 8px 0; text-align: center; }
.fig-hero__text h1 { font-family: "Akkordeon-Six", var(--font-heading); font-weight: 400; font-size: 72px; line-height: 1.3; color: var(--color-pine); margin: 0; white-space: nowrap; }
.fig-hero__text p { font-family: var(--font-body); font-weight: 500; font-size: 20px; line-height: 43px; color: var(--color-pine); margin: 0; white-space: nowrap; }
.fig-hero__scroll { position: absolute; left: 599.5px; top: 628px; width: 241px; display: flex; flex-direction: column; align-items: center; }
.fig-hero__scroll a { display: block; padding: 48px 0; font-family: var(--font-body); font-size: 20px; line-height: 1.3; color: var(--color-pine); text-decoration: underline; white-space: nowrap; }

/* 2. O_NAS — left 126, top 800, w 1188, pt 48 pb 120 */
.fig-about { left: 126px; top: 800px; width: 1188px; padding: 48px 0 120px; text-align: center; color: var(--color-pine); font-family: var(--font-body); }
.fig-about p { margin: 0; font-size: 20px; line-height: 1.3; }
.fig-about p.lead { font-weight: 600; font-size: 32px; line-height: 1.3; }
.fig-about p.spacer { height: 26px; }
.fig-about strong { font-weight: 600; }

/* 3. NAS_PROCESY — left 0, top 1353, 1440x774, px 40, pb 80 */
.fig-process { left: 0; top: 1353px; width: 1440px; height: 774px; background: var(--color-pine); padding: 0 40px 80px; box-sizing: border-box; }
.fig-process h2 { width: 1360px; font-family: var(--font-heading); font-weight: 400; font-size: 112px; line-height: 1.2; letter-spacing: 0.02em; color: #FFFFFF; text-align: center; padding: 56px 0; margin: 0; }
.fig-process__row { display: flex; gap: 35px; align-items: center; }
/* Figma: karta 430 x 420, obsah 350 px + padding 40 po stranách */
.fig-process__card { position: relative; width: 430px; height: 420px; background: #FFFFFF; padding: 48px 40px 56px; box-sizing: border-box; display: flex; flex-direction: column; gap: 32px; }
/* Puntík v pravém horním rohu karty (Figma: kolečko 24 px). Je posazený
   absolutně, aby nezasahoval do sazby nadpisu. */
.fig-process__dot { position: absolute; top: 36px; right: 32px; width: 24px; height: 24px; border-radius: 50%; background: var(--color-pine); }
.fig-process__card--lime-light { background: var(--color-lime-light); }
.fig-process__card--lime { background: var(--color-lime); }
.fig-process__card-head { display: flex; align-items: flex-end; width: 350px; }
.fig-process__card-head--pr { padding-right: 16px; }
.fig-process__card h3 { flex: 1; min-width: 0; font-family: var(--font-heading); font-weight: 400; font-size: 72px; line-height: 82px; letter-spacing: -0.015em; text-transform: uppercase; color: var(--color-pine); margin: 0; }
.fig-process__h3--fixed { flex: none !important; width: 350px; }
.fig-process__text { display: flex; align-items: flex-start; width: 350px; }
.fig-process__card p { width: 350px; font-family: var(--font-body); font-size: 20px; line-height: 1.5; color: var(--color-pine); margin: 0; }
/* šipka: 82 x 82, otočená o 90° */
.fig-arrow { flex: none; width: 82px; height: 82px; display: flex; align-items: center; justify-content: center; }
.fig-arrow svg { width: 82px; height: 82px; transform: rotate(90deg); }
.fig-arrow--offset { position: absolute; left: 308px; top: 128px; }

/* 4. CTA — nadpis left 126 top 2205 w 1184 py 40 */
/* scroll-margin: po skoku na #stavime slogan nesedí natěsno u horní hrany okna */
.fig-cta { left: 126px; top: 2205px; width: 1184px; padding: 40px 0; scroll-margin-top: 40px; }
.fig-cta__heading { font-family: var(--font-heading); font-weight: 400; font-size: 112px; line-height: 1.2; letter-spacing: 0.02em; color: var(--color-pine); text-transform: uppercase; }
/* Odsazení řádků v procentech šířky nadpisu — vychází z odměřené sazby ve Figmě
   (117,9 a 340,7 px na šířce 1184 px) a drží stejný obraz i na mobilu. */
.fig-cta__r1, .fig-cta__r2, .fig-cta__r3 { display: block; white-space: nowrap; }
/* Odsazení platí jen pro slogan na úvodce — na Konzultacích začínají oba řádky
   u levého kraje a odsazený řádek by naběhl pod růžovou ceduli. */
.fig-cta .fig-cta__r2 { padding-left: 9.958%; }
.fig-cta .fig-cta__r3 { padding-left: 28.775%; }
/* Logo se do růžového pole centruje flexem — pevné odsazení 34px shora nechávalo
   dole jen 17px, takže nápis seděl nízko. */
/* Cedule a připínáček jsou teď uvnitř druhého řádku nadpisu, takže se souřadnice
   počítají vůči .fig-cta (dřív vůči celému plátnu). */
.fig-cta-pill { position: absolute; left: 516px; top: 173px; width: 500px; height: 134px; background: var(--color-magenta); box-sizing: border-box; padding-left: 28px; display: flex; align-items: center; }
.fig-cta-pill img { width: 444px; height: 83px; display: block; }
/* Připínáček sedí v pravém horním rohu cedule. Rozměry i pozice jsou v procentech
   cedule (z Figmy: 58,1 x 65,8 px na ceduli 500 x 134), takže se sám zmenší
   s cedulí na mobilu a nemusí mít vlastní pravidlo. */
.fig-cta-ribbon { position: absolute; left: 91.8%; top: -12.7%; width: 11.62%; height: 49.08%; display: flex; align-items: center; justify-content: center; }
.fig-cta-ribbon > span { width: 27.5%; height: 109.5%; background: var(--color-berry); transform: rotate(-39.45deg); display: block; }

/* 5. PROJEKTY — left 40, top 2765, w 1360, pb 80 */
.fig-projects { left: 40px; top: 2765px; width: 1360px; padding-bottom: 80px; }
.fig-projects__row { display: flex; justify-content: space-between; }
.fig-project { width: 672px; text-decoration: none; color: inherit; display: block; }
.fig-project img, .fig-project .photo-placeholder { width: 672px; height: 448px; object-fit: cover; display: block; }
.fig-project__caption { padding: 16px 0 48px; }
.fig-project__caption h3 { font-family: var(--font-body); font-weight: 600; font-size: 28px; line-height: 1.5; color: var(--color-pine); margin: 0; }
.fig-project__caption p { font-family: var(--font-body); font-size: 24px; line-height: 1.5; color: var(--color-pine); margin: 0; }

/* 6. WOOOW — top 5201, h 460 */
.fig-wooow { left: 0; top: 5201px; width: 1440px; height: 460px; background: var(--color-berry); }
/* Běžící nápis WOOOW — okno vpravo od textového bloku, smyčka zprava doleva */
.fig-wooow__big { position: absolute; left: 712px; right: calc((100vw - 1440px) / -2); top: 5201px; width: auto; height: 460px; overflow: hidden; display: flex; align-items: center; z-index: 1; }
.fig-wooow__track { display: flex; flex: none; will-change: transform; backface-visibility: hidden; animation: wooow-marquee 40s linear infinite; }
.fig-wooow__track span { font-family: var(--font-heading); font-weight: 400; font-size: 550px; line-height: 1.2; letter-spacing: 11px; color: var(--color-pulse); white-space: nowrap; padding-right: 80px; }
/* stopa obsahuje 2x stejnou sadu; posun o -50 % je proto bezešvý */
@keyframes wooow-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .fig-wooow__track { animation: none; } }
.fig-wooow__text { left: 0; top: 5201px; width: 712px; height: 460px; display: flex; align-items: center; justify-content: center; padding: 80px 40px 96px; box-sizing: border-box; z-index: 2; }
.fig-wooow__text p { font-family: var(--font-body); font-size: 32px; line-height: 1.3; color: #FFFFFF; text-align: center; margin: 0; }
.fig-wooow__text strong { font-weight: 600; }

/* 7. Osoby — left 158, top 5661, w 1156, py 96, gap 72 */
.fig-osoby { left: 158px; top: 5661px; width: 1156px; padding: 96px 0; display: flex; flex-direction: column; gap: 72px; }
.fig-osoba { display: flex; gap: 134px; align-items: center; }
.fig-osoba__photo { width: 436px; height: 552px; object-fit: cover; flex: none; }
.fig-osoba__text { width: 586px; }
.fig-osoba__text h3 { font-family: var(--font-heading); font-weight: 400; font-size: 112px; line-height: 1.2; letter-spacing: 0.02em; margin: 0 0 40px; }
.fig-osoba__text p { font-family: var(--font-body); font-size: 20px; line-height: 1.3; color: var(--color-pine); margin: 0 0 14px; }
.fig-osoba__text p.lead { font-weight: 600; }

/* 8. PROC — left 0, top 7029, 1440 wide, px 40, pb 50 */
.fig-proc2 { left: 0; top: 7029px; width: 1440px; background: var(--color-pine); padding: 0 40px 50px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; }
.fig-proc2__inner { width: 1188px; padding: 56px 0 80px; }
.fig-proc2 h2 { font-family: var(--font-heading); font-weight: 400; font-size: 112px; line-height: 1.2; letter-spacing: 0.02em; color: var(--color-lime); text-align: center; margin: 0 0 40px; }
.fig-proc2__inner p { font-family: var(--font-body); font-size: 20px; line-height: 1.3; color: #FFFFFF; text-align: center; margin: 0 0 20px; }
.fig-proc2__inner strong { font-weight: 700; }
.fig-proc2__photo { display: block; width: 1360px; height: 450px; object-fit: cover; }

/* 9. NAPISTE_NAM — nadpis left 213 top 8095 w 1015 py 40; řádek left 213 top 8196 */
.fig-contact-heading { left: 213px; top: 8095px; width: 1015px; padding: 40px 0; font-family: var(--font-heading); font-weight: 400; font-size: 112px; line-height: 1.2; letter-spacing: 0.02em; color: var(--color-pine); white-space: nowrap; }
.fig-contact-row { left: 213px; top: 8196px; display: flex; align-items: flex-end; }
.fig-contact__info { width: 585px; height: 130px; display: flex; flex-direction: column; justify-content: flex-end; }
.fig-contact__info p { font-family: var(--font-body); font-weight: 600; font-size: 24px; line-height: 1.3; color: var(--color-pine); margin: 0; }
.fig-contact__badgewrap { width: 462px; height: 239px; display: flex; align-items: center; justify-content: center; }
.fig-contact__badge { display: flex; align-items: flex-start; justify-content: flex-end; gap: 16px; width: 440px; height: 158px; background: var(--color-magenta); box-sizing: border-box; padding: 16px 24px 16px 40px; transform: rotate(-11.05deg); }
.fig-contact__badge span { font-family: var(--font-heading); font-weight: 400; font-size: 112px; line-height: 1.2; letter-spacing: 0.02em; color: #FFFFFF; white-space: nowrap; }
.fig-contact__badge .fig-dot { width: 25px; height: 25px; border-radius: 50%; background: #FFFFFF; flex: none; }

/* 10. Zapati — left 0, top 8532, h 490 */
/* Bez overflow: hidden — ořezávalo full-bleed pruh (::before o šířce 100vw),
   takže limetka na širokém monitoru končila na hraně plátna. */
.fig-footer { left: 0; top: 8532px; width: 1440px; height: 490px; background: var(--color-lime); }
.fig-footer__row { position: absolute; left: 43px; top: 0; width: 1357px; display: flex; justify-content: space-between; }
.fig-footer__info { width: 774px; padding: 56px 0 64px 20px; opacity: 0.8; box-sizing: border-box; }
.fig-footer__social { width: 583px; padding: 56px 20px 64px 0; opacity: 0.8; box-sizing: border-box; text-align: right; }
.fig-footer__info p, .fig-footer__social p { font-family: var(--font-body); font-size: 24px; line-height: 1.3; color: var(--color-pine); margin: 0 0 8px; }
.fig-footer__social a { color: var(--color-pine); text-decoration: none; }
.fig-footer__logo { position: absolute; left: 43px; top: 207px; width: 1356.55px; height: 258.66px; object-fit: contain; }

/* stará (fluid) sada tříd níže — už nepoužito na homepage, ponecháno pro pozdější stránky */
.hp-hero {
  background: var(--color-lime);
  padding: 100px 24px 64px;
  text-align: center;
}

.hp-hero__logo {
  max-width: 640px;
  width: 90%;
  margin: 0 auto 48px;
  display: block;
}

.hp-hero h1 {
  font-family: "Akkordeon-Six", var(--font-heading);
  color: var(--color-pine);
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  max-width: 1000px;
  margin: 0 auto 24px;
  line-height: 1.2;
}

.hp-hero p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
}

.hp-hero__scroll {
  display: inline-block;
  margin-top: 48px;
  color: var(--color-pine);
  text-decoration: underline;
}

.hp-section {
  padding: 80px 24px;
}

.hp-section--dark {
  background: var(--color-pine);
  color: #FFFFFF;
}
.hp-section--dark h2 { color: var(--color-lime); }

.hp-about {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.hp-about p { margin: 0 0 1em; }
.hp-about strong { font-weight: 600; }

.hp-proces-grid {
  max-width: var(--container-width);
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.hp-proces-card {
  background: #FFFFFF;
  color: var(--color-pine);
  padding: 40px 32px;
}
.hp-proces-card--lime-light { background: var(--color-lime-light); }
.hp-proces-card--lime { background: var(--color-lime); }
.hp-proces-card h3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hp-cta {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}
.hp-cta h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.3;
}
.hp-cta__logo-pill {
  display: inline-flex;
  align-items: center;
  background: var(--color-magenta);
  padding: 8px 20px;
  margin: 0 8px;
  vertical-align: middle;
}
.hp-cta__logo-pill img { height: 0.75em; }

.hp-projects {
  max-width: var(--container-width);
  margin: 0 auto;
}
.hp-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px 40px;
}
@media (min-width: 800px) {
  .hp-projects-grid { grid-template-columns: 1fr 1fr; }
}
.hp-project-card { text-decoration: none; color: inherit; display: block; }
.hp-project-card .photo-placeholder,
.hp-project-card__photo { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; display: block; }
.hp-project-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--color-pine);
  margin: 16px 0 4px;
}
.hp-project-card p { margin: 0; color: var(--color-pine); }

.hp-wooow {
  background: var(--color-berry);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 320px;
  overflow: hidden;
}
.hp-wooow__text {
  color: #FFFFFF;
  padding: 48px;
  font-size: 1.4rem;
  text-align: center;
}
.hp-wooow__text strong { display: block; margin-top: 8px; }
.hp-wooow__big {
  font-family: var(--font-heading);
  color: var(--color-pulse);
  font-size: clamp(4rem, 12vw, 10rem);
  text-align: center;
  letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .hp-wooow { grid-template-columns: 1fr; }
}

.hp-osoba {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: var(--container-width);
  margin: 0 auto 96px;
}
.hp-osoba:last-child { margin-bottom: 0; }
.hp-osoba__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.hp-osoba h3 {
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin-bottom: 16px;
}
.hp-osoba .lead { font-weight: 600; margin-bottom: 1em; }
@media (max-width: 800px) {
  .hp-osoba { grid-template-columns: 1fr; }
  .hp-osoba > div:first-child { order: 2; }
}

.hp-proc-photo {
  display: block;
  max-width: var(--container-width);
  margin: 48px auto 0;
  aspect-ratio: 16 / 6;
  width: 100%;
  object-fit: cover;
}

.hp-contact {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 80px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.hp-contact h2 { font-size: clamp(2rem, 5vw, 4rem); max-width: 700px; }
.hp-contact__badge {
  background: var(--color-magenta);
  color: #FFFFFF;
  padding: 16px 24px;
  font-weight: 700;
  font-size: 1.5rem;
  transform: rotate(-6deg);
  display: inline-block;
}
.hp-contact__info { font-weight: 600; }

/* ==== Sdílené prvky podstránek (Figma) ==== */

/* Horní lišta: logo + menu — left 40, top 30, w 1359 */
.fig-topbar { position: absolute; left: 40px; top: 30px; width: 1359px; display: flex; align-items: flex-start; justify-content: space-between; }
/* Na úvodce je lišta schovaná nad hranou okna a vyjede, až hero odscrolluje.
   Platí na mobilu i na desktopu — obojí má lištu fixní. */
.fig-topbar--auto { transform: translateY(-100%); transition: transform 0.3s ease; }
.fig-topbar--auto.is-shown { transform: none; }
.fig-topbar--lime { background: var(--color-lime); }
.fig-topbar--pulse { background: var(--color-pulse); }
.fig-topbar__home { display: block; }
.fig-topbar__logo { width: 301px; height: 57px; display: block; }
.fig-menu { display: flex; align-items: center; gap: 8px; }
.fig-menu a, .fig-menu .fig-lang { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--color-pine); text-decoration: none; padding: 8px 24px; white-space: pre; }
/* Podtržení aktivní položky posazené níž, ať se nelepí na text. */
.fig-menu a.is-active { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.fig-menu .fig-lang span { font-weight: 400; }

/* ==== Konzultace (Figma: 1440 x 4306) ==== */
.fig-canvas--konzultace { height: 4306px; }

.kon-hero { left: 0; top: 0; width: 1440px; height: 648px; background: var(--color-pulse); }
.kon-hero__text { position: absolute; left: 40px; top: 154px; width: 1359px; }
.kon-hero__text h1 { font-family: var(--font-heading); font-weight: 400; font-size: 112px; line-height: 1.2; letter-spacing: 0.02em; color: var(--color-void); margin: 0; padding: 56px 0; white-space: nowrap; }
.kon-hero__text p { width: 1186px; padding-bottom: 80px; margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 32px; line-height: 1.3; color: var(--color-void); }

.kon-info { left: 46px; top: 648px; width: 1354px; padding: 80px 0; display: flex; align-items: flex-start; justify-content: space-between; }
.kon-info__text { width: 626px; }
.kon-info__text p { margin: 0; font-family: var(--font-body); font-size: 20px; line-height: 1.3; color: var(--color-pine); }
.kon-info__nabidka { width: 672px; font-family: var(--font-body); font-size: 20px; line-height: 1.3; color: var(--color-pine); }
.kon-info__lead { font-weight: 600; margin: 0 0 20px; }
.kon-info__nabidka ul { margin: 0; padding-left: 30px; }
.kon-info__nabidka li { margin-bottom: 12px; }

.kon-fotopas { left: 0; top: 1160px; width: 1440px; background: var(--color-void); padding: 120px 40px; box-sizing: border-box; display: flex; justify-content: center; }
.kon-fotopas__row { width: 1360px; display: flex; align-items: center; justify-content: space-between; }
.kon-fotopas__item { display: block; object-fit: cover; }
.kon-fotopas__item--narrow { width: 323px; height: 484px; }
.kon-fotopas__item--wide { width: 658px; height: 484.429px; }

.kon-cta { left: 126px; top: 1920px; width: 1184px; padding: 40px 0; }
/* vůči .kon-cta (126, 1920): 738-126 = 612, 2094-1920 = 174 */
.kon-cta-pill { left: 612px; top: 174px; }
.kon-proc2 { top: 2363px; }

/* ==== Stránka projektu (Figma) ==== */
.prj-topbg { left: 0; top: 0; width: 1440px; height: 113px; background: var(--color-lime); }
/* position: absolute musí být tady — obecné pravidlo v plátně platí jen pro
   <section> a <footer>, takže u <img> se souřadnice jinak vůbec neuplatní
   a fotka spadne pod menu. */
.prj-hero { position: absolute; left: 40px; top: 158px; width: 1360px; height: 432px; object-fit: cover; display: block; }

/* PROJEKT+Text — left 40, top 590, w 1360, pt 56 pb 96, gap 24 */
.prj-head { left: 40px; top: 590px; width: 1360px; padding: 56px 0 96px; display: flex; flex-direction: column; gap: 24px; }
.prj-head h1 { font-family: var(--font-heading); font-weight: 400; font-size: 72px; line-height: 1.3; text-transform: uppercase; color: var(--color-pine); margin: 0; }
.prj-head__row { display: flex; gap: 64px; align-items: flex-start; }
.prj-head__about { flex: 1; padding-right: 32px; }
.prj-head__about p { margin: 0; font-family: var(--font-body); font-size: 20px; line-height: 1.3; color: var(--color-pine); }
.prj-head__summary { width: 648px; display: flex; flex-direction: column; gap: 16px; }
.prj-summary-row { display: flex; align-items: center; font-family: var(--font-body); font-size: 16px; line-height: 1.3; color: var(--color-pine); }
.prj-summary-row dt { width: 208px; margin: 0; }
.prj-summary-row dd { width: 414px; margin: 0; text-align: right; }
.prj-summary-sep { height: 1px; background: var(--color-pine); opacity: 0.25; }

/* Video — left 40, w 1360, h 750 */
.prj-video { left: 40px; width: 1360px; height: 750px; background: #C4C4C4; display: flex; align-items: center; justify-content: center; }
.prj-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.prj-video__note { font-family: var(--font-body); font-size: 16px; color: #6B6B6B; text-align: center; }

/* Fotoblokové sekce */
.prj-block { left: 40px; width: 1360px; }
.prj-block--full { height: 750px; }
.prj-block--full img, .prj-block--full .photo-placeholder { width: 1360px; height: 750px; object-fit: cover; display: block; }
.prj-block--pair { height: 484.429px; display: flex; align-items: center; justify-content: space-between; }
.prj-block--pair img, .prj-block--pair .photo-placeholder { width: 658px; height: 484.429px; object-fit: cover; display: block; }
/* Trojice: jedna půlka bloku nese dvě úzké fotky vedle sebe (323 + 12 + 323 = 658),
   druhá jednu širokou (658). Podle Figmy bývá úzká dvojice vlevo i vpravo. */
.prj-block--trio { height: 484.429px; display: flex; align-items: center; justify-content: space-between; }
.prj-block--trio .prj-trio-narrow { width: 658px; display: flex; align-items: center; justify-content: space-between; }
.prj-block--trio .prj-trio-narrow img, .prj-block--trio .prj-trio-narrow .photo-placeholder { width: 323px; height: 484.429px; object-fit: cover; display: block; }
.prj-block--trio > img, .prj-block--trio > .photo-placeholder { width: 658px; height: 484.429px; object-fit: cover; display: block; }

.prj-block--textphoto { height: 484px; display: flex; align-items: center; justify-content: space-between; }
.prj-block--textphoto .prj-longtext { width: 658px; height: 484px; display: flex; align-items: center; padding: 100px 0; box-sizing: border-box; }
.prj-block--textphoto .prj-longtext > div { width: 588px; }
.prj-block--textphoto .prj-longtext p { margin: 0 0 1em; font-family: "DM Sans", var(--font-body); font-size: 20px; line-height: normal; color: var(--color-pine); }
.prj-block--textphoto img, .prj-block--textphoto .photo-placeholder { width: 658px; height: 484.429px; object-fit: cover; display: block; }

/* DALŠÍ PROJEKTY — left 40, w 1360, pb 80 */
.prj-more { left: 40px; width: 1360px; padding-bottom: 80px; }
.prj-more h2 { width: 1360px; font-family: var(--font-heading); font-weight: 400; font-size: 112px; line-height: 1.2; letter-spacing: 0.02em; color: var(--color-pine); text-align: center; padding: 56px 0; margin: 0; }
.prj-more__row { display: flex; align-items: center; justify-content: space-between; }

/* Magenta linka */
.prj-line { left: 0; width: 1440px; height: 25px; background: var(--color-magenta); }

/* =========================================================================
   RESPONZIVITA (< 1200 px)
   Prvky se skládají do bloků pod sebe, ale drží grafickou strukturu z Figmy:
   stejné pořadí, stejné barevné pásy, stejné poměry stran fotek a stejná
   typografická hierarchie (nadpisy škálují podle šířky okna jako v návrhu).
   Odchylka: tělo textu má spodní hranici 16 px. Čistě poměrový přepočet
   (20 px z 1440) by na telefonu vyšel ~5 px, což je nečitelné.
   !important je nutné, protože přepisujeme inline styly z šablon.
   ========================================================================= */
@media (max-width: 1199px) {
  :root {
    /* Poměry z návrhu 1440 px (112/72/32/… px). Spodní hranice drží
       typografickou hierarchii — čistý přepočet by na telefonu srazil
       nadpisy skoro na velikost běžného textu. */
    --d112: clamp(2.75rem, 7.78vw, 112px);
    --d72: clamp(1.9rem, 5vw, 72px);
    --d32: clamp(1.15rem, 2.22vw, 32px);
    --d28: clamp(1.1rem, 1.94vw, 28px);
    --d24: clamp(1.05rem, 1.67vw, 24px);
    --d20: clamp(1rem, 1.39vw, 20px);
    --d16: clamp(0.875rem, 1.11vw, 16px);
    --arrow: clamp(2.2rem, 5.7vw, 82px);
    --pad: 5.55vw;
    --lista-mobil: 64px;
  }

  .fig-canvas {
    position: static !important;
    width: 100% !important;
    height: auto !important;
  }
  .fig-canvas section,
  .fig-canvas > footer,
  .fig-canvas > div,
  .fig-hero__logo, .fig-hero__text, .fig-hero__scroll,
  .fig-topbar, .kon-hero__text,
  .fig-footer__row, .fig-footer__logo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  /* Horní lišta */
  /* Lišta drží nahoře po celou dobu scrollování; obsah pod ni nesmí zajet,
     proto plátno se lištou dostane odsazení shora (.fig-canvas--lista). */
  .fig-canvas .fig-topbar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0;
    width: 100% !important; height: var(--lista-mobil); z-index: 150;
    display: flex; flex-wrap: nowrap; gap: 12px; align-items: center;
    justify-content: space-between; padding: 0 var(--pad) !important; }
  .fig-canvas--lista { padding-top: var(--lista-mobil); }
  .fig-topbar__logo { width: 38vw !important; max-width: 220px; height: auto !important; }
  .fig-menu { flex-wrap: wrap; gap: 0; }
  .fig-menu a, .fig-menu .fig-lang { font-size: var(--d20); padding: 6px 10px; }

  /* 1. Hero */
  .fig-hero { position: relative !important; padding: 16px var(--pad) 8vw; text-align: center; }

  /* Hamburger — v horní liště stojí v toku vedle loga, v heru úvodky se
     posadí absolutně do pravého horního rohu. */
  .fig-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px;
    flex: none; z-index: 220;
    width: 44px; height: 44px; padding: 10px 8px; margin: 0;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .fig-burger span { display: block; height: 2px; width: 100%; background: var(--color-pine);
    border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
  /* v otevřeném stavu se prostřední čárka ztratí a krajní udělají křížek */
  .fig-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .fig-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .fig-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .fig-hero .fig-burger { position: absolute; top: 4vw; right: var(--pad); }

  /* Zásuvka s menu vyjíždí zprava — společná pro hero i pro horní lištu */
  .fig-zasuvka {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(78vw, 340px); height: 100%; z-index: 210;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 8px; padding: 88px 28px 28px; box-sizing: border-box;
    background: var(--color-lime); box-shadow: -12px 0 32px rgba(19, 47, 40, 0.18);
    transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto;
  }
  .fig-zasuvka.is-open { transform: none; }
  .fig-zasuvka a, .fig-zasuvka .fig-lang { font-size: var(--d32) !important; padding: 10px 0 !important; text-align: left; }

  .fig-zaves { display: block; position: fixed; inset: 0; z-index: 205;
    background: rgba(19, 47, 40, 0.35); opacity: 0; transition: opacity 0.3s ease; }
  .fig-zaves.is-open { opacity: 1; }
  .fig-zaves[hidden] { display: none; }

  /* Logo: skládaná varianta na střed */
  .fig-hero__logo--siroke { display: none; }
  .fig-hero__logo--skladane { display: block; width: 62% !important; max-width: 340px;
    height: auto !important; margin: 2vw auto 6vw; }

  .zlom-mobil { display: inline; }
  .fig-hero__logo { width: 85% !important; margin: 0 auto 6vw; }
  .fig-hero__text h1 { font-size: 9.6vw !important; line-height: 1.2 !important; white-space: normal !important; }
  /* Podnadpis odsazený od nadpisu stejně, jako je odsazená šipka pod ním. */
  .fig-hero__text p { margin-top: 6vw !important; font-size: var(--d20) !important; line-height: 1.5 !important; white-space: normal !important; }
  .fig-hero__scroll { margin: 6vw auto 0; }
  .fig-hero__scroll a { padding: 4vw 0; font-size: var(--d20); }
  .fig-hero__scroll svg { width: 8vw; height: 8vw; max-width: 50px; max-height: 50px; }

  /* 2. O nás */
  .fig-about { padding: 8vw var(--pad) !important; }
  .fig-about p { font-size: var(--d20); }
  .fig-about p.lead { font-size: var(--d32); }
  .fig-about p.spacer { height: 3vw; }

  /* 3. Náš proces */
  .fig-process { padding: 0 var(--pad) 8vw !important; }
  .fig-process h2 { width: auto !important; font-size: 18vw !important; padding: 8vw 0 6vw !important; }
  /* Karty jdou pod sebe, ale drží poměry z Figmy: karta 430 px, v ní nadpis
     72 px, text 20 px, šipka 82 px, puntík 24 px a odsazení 48/40/56 px.
     Vše přepočtené na mobilní šířku karty (100 % - 2x --pad = 88,9vw). */
  .fig-process__row { flex-direction: column; gap: 5vw; align-items: stretch; }
  .fig-process__card { width: 100% !important; height: auto !important; padding: 9.9vw 8.3vw 11.6vw !important; gap: 6.6vw; }
  .fig-process__dot { top: 5vw; right: 5vw; width: 5vw; height: 5vw; max-width: 24px; max-height: 24px; }
  .fig-process__card-head { position: relative; width: 100% !important; padding-right: 0 !important; align-items: flex-end; }
  /* Nadpis dostává celou šířku karty a šipka na něj dosedá zprava mimo tok —
     stejně jako na desktopu. V toku by nadpisu ubrala šířku a 2. karta by se
     zalomila na tři řádky místo dvou. */
  .fig-process__card h3, .fig-process__h3--fixed { flex: none !important; width: 100% !important;
    font-size: 14.8vw !important; line-height: 1.14 !important; }
  .fig-process__card-head .fig-arrow { position: absolute !important;
    right: 0; bottom: 0; left: auto !important; top: auto !important; }
  .fig-process__text, .fig-process__card p { width: 100% !important; font-size: max(1rem, 4.13vw); }
  .fig-arrow { width: 16.9vw; height: 16.9vw; max-width: 82px; max-height: 82px; }
  .fig-arrow svg { width: 100%; height: 100%; }

  /* 4. CTA */
  .fig-cta, .kon-cta { padding: 8vw var(--pad) !important; }
  /* Slogan drží stejnou sazbu jako desktop: odsazení řádků jsou v procentech,
     stačí proto dopočítat velikost písma na šířku bloku (112/1184 z 88,9vw)
     a růžovou ceduli vrátit do řádku. */
  .fig-cta__heading { font-size: 8.4vw !important; line-height: 1.2 !important; }
  .fig-cta__r2 { display: flex !important; align-items: center; white-space: nowrap; }
  /* relative, ne static — cedule musí zůstat vztažným rámcem pro připínáček,
     jinak by se jeho procenta počítala z celé sekce. */
  .fig-cta-pill { position: relative !important; left: auto !important; top: auto !important; flex: none;
    width: 37.5vw !important; height: auto !important; aspect-ratio: 500 / 134;
    padding-left: 5.6% !important; margin-left: 0.15em; }
  .fig-cta-pill img { width: 88.8% !important; height: auto !important; }

  /* 5. Projekty — jednotná mezera mezi všemi dlaždicemi. Dřív měla mezeru jen
     dvojice uvnitř řádku, mezi řádky nebyla žádná. */
  .fig-projects { padding: 0 var(--pad) 8vw !important; display: flex; flex-direction: column; gap: 8vw; }
  .fig-projects__row { flex-direction: column; gap: 8vw; }
  .fig-project { width: 100%; }
  .fig-project img, .fig-project .photo-placeholder { width: 100% !important; height: auto !important; aspect-ratio: 672 / 448; }
  .fig-project__caption { padding: 2vw 0 0; }
  .fig-project__caption h3 { font-size: var(--d28); }
  .fig-project__caption p { font-size: var(--d24); }

  /* 6. WOOOW */
  .fig-wooow { display: none !important; }
  /* Nejdřív text, pod ním běžící nápis (pořadí je dané v šabloně). */
  .fig-wooow__text { background: var(--color-berry); padding: 10vw var(--pad) 6vw !important; }
  .fig-wooow__text p { font-size: var(--d32) !important; }
  .fig-wooow__big { background: var(--color-berry); overflow: hidden !important; padding-bottom: 8vw; }
  .fig-wooow__track span { font-size: 34vw !important; letter-spacing: 0.02em; padding-right: 6vw; }

  /* 7. Osoby */
  .fig-osoby { padding: 8vw var(--pad) !important; gap: 10vw; }
  .fig-osoba { flex-direction: column !important; gap: 5vw; }
  .fig-osoba__photo { width: 100% !important; height: auto !important; aspect-ratio: 436 / 552; order: -1; }
  .fig-osoba__text { width: 100% !important; }
  .fig-osoba__text h3 { font-size: var(--d112) !important; line-height: 1.1 !important; margin-bottom: 4vw !important; }
  .fig-osoba__text p { font-size: var(--d20); }

  /* 8. Jeden tým / PROC */
  .fig-proc2 { padding: 0 var(--pad) 8vw !important; }
  .fig-proc2__inner { width: 100% !important; padding: 8vw 0 6vw !important; }
  .fig-proc2 h2 { font-size: var(--d112) !important; margin-bottom: 5vw !important; }
  .fig-proc2__inner p { font-size: var(--d20); }
  .fig-proc2__photo { width: 100% !important; height: auto !important; aspect-ratio: 1360 / 450; }

  /* 9. Ozvěte se nám */
  /* Cedule PŘIVRTÁME dokončuje větu, takže musí jít hned za nadpisem —
     ne až pod kontakty. Písmo má stejnou velikost jako nadpis, jako na desktopu. */
  .fig-contact-heading { padding: 8vw var(--pad) 0 !important; font-size: 9.5vw !important; line-height: 1.15 !important; white-space: normal !important; }
  .fig-contact-row { flex-direction: column; align-items: flex-start !important; gap: 7vw; padding: 3vw var(--pad) 8vw !important; }
  .fig-contact__badgewrap { order: -1; width: 100% !important; height: auto !important; justify-content: flex-end; margin: 2vw 0 1vw; }
  .fig-contact__badge { width: auto !important; height: auto !important; padding: 2vw 4vw !important; gap: 3vw; align-items: flex-start; }
  .fig-contact__badge span { font-size: 9.5vw !important; }
  .fig-contact__badge .fig-dot { width: 2.2vw; height: 2.2vw; max-width: 25px; max-height: 25px; }
  .fig-contact__info { width: 100% !important; height: auto !important; }
  .fig-contact__info p { font-size: var(--d24); }

  /* 10. Patička — údaje pod sebou po skupinách, logo přes celou šířku. */
  .fig-footer { padding: 8vw var(--pad) !important; }
  .fig-footer__row { flex-direction: column; gap: 7vw; }
  .fig-footer__info, .fig-footer__social { width: 100% !important; padding: 0 !important; text-align: left; }
  .fig-footer__info p, .fig-footer__social p { font-size: var(--d24); }
  .fig-footer__info p { margin-bottom: 5vw; }
  .fig-footer__info p:last-child { margin-bottom: 0; }
  .jen-desktop { display: none; }
  .fig-footer__logo { margin-top: 9vw;
    width: calc(100% + 2 * var(--pad)) !important;
    margin-left: calc(-1 * var(--pad)); }

  /* ---- Konzultace ---- */
  .kon-hero { padding: 0 0 6vw; }
  .kon-hero__text { padding: 0 var(--pad); }
  .kon-hero__text h1 { font-size: 15vw !important; line-height: 1.1 !important; padding: 6vw 0 !important; white-space: normal !important; }
  .kon-hero__text p { width: auto !important; font-size: var(--d32) !important; padding-bottom: 0 !important; }
  .kon-info { flex-direction: column; gap: 6vw; padding: 8vw var(--pad) !important; }
  .kon-info__text, .kon-info__nabidka { width: 100% !important; font-size: var(--d20); }
  .kon-fotopas { padding: 8vw var(--pad) !important; }
  .kon-fotopas__row { width: 100% !important; flex-direction: column; gap: 4vw; }
  .kon-fotopas__item { width: 100% !important; height: auto !important; aspect-ratio: 323 / 484; }
  .kon-fotopas__item--wide { aspect-ratio: 658 / 484; }

  /* ---- Stránka projektu ---- */
  .prj-topbg { display: none !important; }
  /* zpátky do toku — jinak by si absolutní úvodní foto drželo left: 40px
     a při šířce 100 % vystrčilo stránku o 40 px ven z okna */
  .prj-hero { position: static !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 1360 / 432; }
  .prj-head { padding: 6vw var(--pad) !important; gap: 4vw; }
  .prj-head h1 { font-size: var(--d72) !important; line-height: 1.2 !important; }
  .prj-head__row { flex-direction: column; gap: 5vw; }
  .prj-head__about { padding-right: 0 !important; }
  .prj-head__about p { font-size: var(--d20); }
  .prj-head__summary { width: 100% !important; }
  .prj-summary-row { font-size: var(--d16); }
  .prj-summary-row dt { width: 40%; }
  .prj-summary-row dd { width: 60%; }
  .fig-canvas .prj-video { margin: 0 var(--pad) 4vw; width: calc(100% - 2 * var(--pad)) !important; height: auto !important; aspect-ratio: 1360 / 750; }
  .prj-block { padding: 0 var(--pad); margin-bottom: 4vw; }
  .prj-block--pair, .prj-block--textphoto { flex-direction: column; gap: 4vw; }
  .prj-block--full img, .prj-block--full .photo-placeholder { width: 100% !important; height: auto !important; aspect-ratio: 1360 / 750; }
  .prj-block--pair img, .prj-block--pair .photo-placeholder,
  .prj-block--textphoto img, .prj-block--textphoto .photo-placeholder { width: 100% !important; height: auto !important; aspect-ratio: 658 / 484; }
  .prj-block--textphoto .prj-longtext { width: 100% !important; height: auto !important; padding: 0 !important; }
  .prj-block--textphoto .prj-longtext > div { width: 100% !important; }
  .prj-block--textphoto .prj-longtext p { font-size: var(--d20); }
  /* Trojice: široká fotka jde pod sebe, ale úzká dvojice zůstává vedle sebe —
     je to záměr grafičky (dva portréty vedle sebe), ne náhodné dvousloupí. */
  .prj-block--trio { flex-direction: column; gap: 4vw; }
  .prj-block--trio .prj-trio-narrow { width: 100% !important; gap: 2vw; }
  .prj-block--trio .prj-trio-narrow img, .prj-block--trio .prj-trio-narrow .photo-placeholder { flex: 1 1 0; min-width: 0; width: auto !important; height: auto !important; aspect-ratio: 323 / 484; }
  .prj-block--trio > img, .prj-block--trio > .photo-placeholder { width: 100% !important; height: auto !important; aspect-ratio: 658 / 484; }
  .prj-more { padding: 0 var(--pad) 8vw !important; }
  .prj-more h2 { width: auto !important; font-size: var(--d112) !important; padding: 8vw 0 6vw !important; }
  .prj-more__row { flex-direction: column; gap: 8vw; }
  .prj-line { height: 2vw !important; max-height: 25px; }
}

/* =========================================================================
   FIXNÍ HORNÍ LIŠTA (>= 1200 px)
   Menu s barevným pásem zůstává nahoře po celou dobu scrollování.
   Lišta se vytrhne z plátna 1440 px, takže se pás roztáhne přes celé okno
   sám a obsah se dorovná zpátky na plátno paddingem. Pod 1200 px zůstává
   v toku, aby na úzkém okně nezabírala výšku obrazovky.
   ========================================================================= */
@media (min-width: 1200px) {
  .fig-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 113px;
    z-index: 100;
    box-sizing: border-box;
    /* 680 = půlka plátna (720) mínus jeho vnitřní okraj (40) */
    padding: 30px max(40px, calc(50% - 680px)) 0;
  }

  /* Kotva nesmí skončit pod fixní lištou. */
  html { scroll-padding-top: 113px; }
}


/* =========================================================================
   FULL-BLEED barevné pásy (>= 1200 px)
   Obsah zůstává na plátně 1440 px podle Figmy, ale barevná pozadí se
   roztáhnou přes celou šířku okna — jinak by na širokých monitorech
   zůstávaly bílé okraje.
   ========================================================================= */
@media (min-width: 1200px) {
  /* clip, ne hidden: `overflow-x: hidden` udělá z <html> scrollovací kontejner
     a odkazy s kotvou (#stavime) pak v Safari a Firefoxu skáčou jinam, než mají.
     `clip` ořízne přetečení stejně, ale scrollovací kontejner nevytváří. */
  html { overflow-x: clip; }

  .fig-hero::before, .fig-process::before, .fig-wooow::before,
  .fig-proc2::before, .fig-footer::before, .kon-hero::before,
  .kon-fotopas::before, .prj-topbg::before, .prj-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    z-index: -1;
  }
  .fig-hero::before   { background: var(--color-lime); }
  .fig-process::before{ background: var(--color-pine); }
  .fig-wooow::before  { background: var(--color-berry); }
  .fig-proc2::before  { background: var(--color-pine); }
  .fig-footer::before { background: var(--color-lime); }
  .kon-hero::before   { background: var(--color-pulse); }
  .kon-fotopas::before{ background: var(--color-void); }
  .prj-topbg::before  { background: var(--color-lime); }
  .prj-line::before   { background: var(--color-magenta); }
}