/* Homepage — varianta 2a „Plný med“
   Tokeny a rozměry podle design_handoff_mazatech_homepage/README.md.
   Žádné stíny, gradienty, zaoblení ani tmavé sekce. */

/* Self-hosted Google Fonts (OFL): Big Shoulders Display, Archivo, JetBrains Mono — latin + latin-ext. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/archivo-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/archivo-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/big-shoulders-display-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/big-shoulders-display-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/big-shoulders-display-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/big-shoulders-display-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --honey: #EDAA35;
  --honey-stripe-a: #E19E2C;
  --honey-stripe-b: #E6A535;
  --paper: #F6F4EF;
  --ink: #15130F;
  --ink-hover: #3A352D;
  --rule-soft: #D6D1C7;
  --muted: #5E5850;

  --f-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-text: 'Archivo', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --gutter: 48px;
  --section-y: 88px;
  --rule: 2px solid var(--ink);
  --rule-thin: 1px solid var(--ink);
}

*, *::before, *::after { box-sizing: border-box; }

/* Položky mřížek se nesmí roztáhnout přes šířku kvůli dlouhému slovu. */
.hero__body > *, .approach > *, .contact > *, .stats__top > *, .project > *, .service > * { min-width: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--honey);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- typografie ----------
   Nadpisy mají řádkování .96 místo .82–.9 z předlohy: při těsnějším
   řádkování narážejí čárky a háčky (Á, Ě, Ř…) do řádku nad sebou. */

.display {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.num { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- tlačítka ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 16px 22px;
  border: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink-honey { background: var(--ink); color: var(--honey); }
/* hover jen u zařízení s myší: na dotykovém displeji by po klepnutí zůstal „viset“ */
@media (hover: hover) {
  .btn--ink:hover, .btn--ink-honey:hover { background: var(--ink-hover); }
  .btn--outline:hover { color: var(--honey); }
}
.btn--outline { border: 2px solid var(--ink); padding: 14px 20px; background: transparent; }
.btn[disabled] { opacity: .6; cursor: progress; }

.link-mono {
  display: inline-block;
  padding-block: 4px;
  font-family: var(--f-mono);
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-mono:hover { text-decoration-thickness: 2px; }

/* ---------- header ---------- */

.top { background: var(--honey); }

.masthead { position: sticky; top: 0; z-index: 50; background: var(--honey); }

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px var(--gutter);
  border-bottom: var(--rule);
}
.logo {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
}
.nav { display: flex; gap: 24px; font-size: 15px; font-weight: 600; }
.nav a {
  padding: 4px 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .12s;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: var(--ink); }

.header__side { display: flex; align-items: center; gap: 18px; }
.langs { display: flex; gap: 8px; font-family: var(--f-mono); font-size: 13px; }
.langs button {
  min-width: 28px;
  min-height: 28px;
  padding: 4px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.langs button[aria-pressed="true"] { font-weight: 700; border-bottom-color: var(--ink); }
.header .btn { padding: 11px 18px; font-size: 15px; }

.menu-toggle { display: none; min-width: 64px; padding: 12px 16px; font-size: 14px; justify-content: center; }

.mobile-menu {
  display: none;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 20px 24px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-hover);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-menu .langs { gap: 16px; padding-top: 18px; font-size: 14px; }
.mobile-menu .langs button { min-width: 44px; min-height: 44px; padding: 8px 4px; border: 0; color: var(--paper); }
.mobile-menu .langs button[aria-pressed="true"] { color: var(--honey); }

/* ---------- hero ---------- */

.hero__title {
  padding: 56px var(--gutter) 0;
  /* druhá mez: delší řádek nadpisu se musí vejít na šířku okna, jinak by na úzkém
     mobilu přetekl. --h1-len (šířka řádku, měří site.js podle jazyka) je v „znacích“ */
  font-size: min(clamp(44px, 16vw, 196px), calc((100vw - 2 * var(--gutter)) / (var(--h1-len, 13) * .46)));
  line-height: .96;
  letter-spacing: -.005em;
}
.hero__title .line { display: block; }
.hero__title .line__in { display: inline-block; white-space: nowrap; }

.hero__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin: 56px var(--gutter) 0;
  padding: 28px 0 48px;
  border-top: var(--rule);
}
.hero__copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 28px; }
.hero__lead { font-size: 22px; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero__shots {
  grid-column: 7 / span 6;
  display: grid;
  /* poměr sloupců = poměr stran obou screenshotů, takže vyjdou stejně vysoké */
  grid-template-columns: 1.279fr 1fr;
  gap: 16px;
  align-items: end;
}
.shot { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.shot__img {
  width: 100%;
  object-fit: cover;
  object-position: top left;
  border: var(--rule);
  background: repeating-linear-gradient(135deg, var(--honey-stripe-a) 0 10px, var(--honey-stripe-b) 10px 20px);
}
.shot__img { height: auto; }
.shot__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
}
.shot:hover .shot__name { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- společné hlavičky sekcí ---------- */

.section { padding: var(--section-y) var(--gutter); }
.section + .section { border-top: var(--rule); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  padding-bottom: 20px;
  border-bottom: var(--rule);
}
.section-head__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.section-head__aside p { text-align: right; }
.section-head p { max-width: 420px; font-size: 19px; font-weight: 500; line-height: 1.4; text-wrap: pretty; }

/* ---------- projekty ---------- */

.projects__title { font-size: clamp(64px, 11.7vw, 150px); line-height: .96; }

.rows { list-style: none; margin: 0; padding: 0; }

.project {
  display: grid;
  grid-template-columns: 1fr 1.2fr 180px;
  gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: var(--rule-thin);
}
.project__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 5.3vw, 68px);
  line-height: .96;
  text-transform: uppercase;
  text-decoration: none;
  overflow-wrap: break-word;
  hyphens: auto;
}
a.project__name:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.project { position: relative; }
a.project__name::before { content: ''; position: absolute; inset: 0; }
.project__body { display: flex; flex-direction: column; gap: 8px; }
.project__meta a { position: relative; z-index: 1; }
.project__desc { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.project__meta { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.project__meta a { display: inline-block; padding-block: 4px; color: var(--ink); text-underline-offset: 3px; }
.project__status { justify-self: end; text-align: right; letter-spacing: .08em; }

/* ---------- náš přístup ---------- */

.approach {
  background: var(--honey);
  border-top: var(--rule);
  border-bottom: var(--rule);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.approach + .section { border-top: 0; }
.approach__label { grid-column: 1 / -1; }
.approach__title { grid-column: 1 / span 8; font-size: clamp(40px, 5.2vw, 76px); line-height: .96; }
.approach__aside {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
}
.approach__aside p { font-size: 18px; line-height: 1.55; font-weight: 500; text-wrap: pretty; }
.points {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule);
}
.point { display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 0 0; }
.point__n { font-family: var(--f-mono); font-size: 13px; }
.point__t {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 34px;
  line-height: .95;
  text-transform: uppercase;
  hyphens: auto;
}
.point__d { font-size: 16px; line-height: 1.55; text-wrap: pretty; }

/* ---------- statistiky ---------- */

.stats { padding-top: 56px; }
.stats__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: var(--rule);
}
.stats__top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats__turnover { grid-column: span 2; padding: 28px 24px 28px 0; border-bottom: var(--rule-thin); border-right: var(--rule-thin); }
.stats__big {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(76px, 13.1vw, 168px);
  line-height: .85;
}
.stat__label { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; margin-top: 8px; }
.stats__impact {
  padding: 28px 0 28px 24px;
  border-bottom: var(--rule-thin);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
}
.stats__impact strong { font-size: 24px; line-height: 1.15; }
.stats__impact p { font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.stats__impact .btn { padding: 12px 16px; font-size: 15px; }

.stats__rest {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.stats__rest li { padding: 24px 16px 0 0; margin-right: 16px; border-right: 1px solid var(--rule-soft); }
.stats__rest li:last-child { border-right: 0; margin-right: 0; }
.stats__rest .num { font-family: var(--f-display); font-weight: 900; font-size: clamp(46px, 5.4vw, 76px); line-height: .9; }
.stats__rest .stat__label { font-size: 12px; margin-top: 6px; }

/* ---------- služby ---------- */

.services__title { font-size: clamp(36px, 4.4vw, 64px); line-height: .96; }

.service {
  display: grid;
  grid-template-columns: 64px 1fr 1.2fr 240px;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: var(--rule-thin);
}
.service__n { font-family: var(--f-mono); font-size: 13px; }
.service__name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: .96;
  text-transform: uppercase;
  hyphens: auto;
}
.service__desc { font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.service__tech { justify-self: end; text-align: right; font-family: var(--f-mono); font-size: 12px; }

/* ---------- kalkulačka ---------- */

.calc { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); }
.calc__form { padding: 72px var(--gutter); display: flex; flex-direction: column; gap: 24px; }
.calc__title { font-size: clamp(46px, 6.9vw, 88px); line-height: .96; }
.calc__form > p { font-size: 16px; line-height: 1.55; text-wrap: pretty; }

.segments { display: flex; flex-direction: column; gap: 6px; }
.segment {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  background: transparent;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
.segment small { font-family: var(--f-mono); font-size: 12px; font-weight: 400; }
.segment[aria-pressed="true"] { background: var(--ink); color: var(--honey); }
.segment:not([aria-pressed="true"]):hover { background: rgba(21, 19, 15, .06); }

.range { display: flex; flex-direction: column; gap: 8px; }
.range__row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 500; }
.range__row b { font-family: var(--f-mono); white-space: nowrap; }
.range input { width: 100%; margin: 0; accent-color: var(--ink); min-height: 24px; }

.calc__result {
  background: var(--honey);
  border-left: var(--rule);
  padding: 72px var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.calc__monthly { display: flex; flex-direction: column; gap: 6px; }
.calc__monthly .mono { font-size: 13px; letter-spacing: .1em; }
.calc__big {
  font-family: var(--f-display);
  font-weight: 900;
  /* druhá mez: i nejdelší částka (--len znaků, nastavuje site.js) se vejde do panelu */
  font-size: min(clamp(72px, 13.1vw, 168px), calc((var(--calc-w, 50vw - 2 * var(--gutter))) / (var(--len, 7) * .46)));
  line-height: 1.1;
  padding: 8px 0;
}
.calc__currency { font-weight: 700; font-size: 28px; }
.calc__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule); }
.calc__figures > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 0; }
.calc__figures > div:first-child { padding-left: 0; }
.calc__figures > div + div { border-left: var(--rule-thin); }
.calc__figures .num { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.1vw, 40px); line-height: 1; }
.calc__figures .mono { font-size: 11px; letter-spacing: 0; }
.calc__cta { display: flex; flex-direction: column; gap: 10px; }
.calc__cta .btn { font-size: 18px; padding: 18px 22px; text-align: left; }
.calc__cta > span { font-family: var(--f-mono); font-size: 12px; }

/* ---------- kontakt ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  padding-block: 96px;
  border-top: var(--rule);
}
.contact__intro { grid-column: 1 / span 7; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.contact__title { font-size: clamp(44px, 6vw, 88px); line-height: .96; }
.badge { background: var(--honey); padding: 6px 10px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.contact__links { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 20px; font-weight: 600; }
.contact__links a { text-decoration: none; border-bottom: 2px solid transparent; }
.contact__links a:hover { border-bottom-color: var(--ink); }

.form { grid-column: 9 / span 4; display: flex; flex-direction: column; border-top: var(--rule); }
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: var(--rule-thin);
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
}
.field:focus-within { border-bottom: var(--rule); padding-bottom: 11px; }
.field input, .field textarea {
  border: 0;
  padding: 4px 0;
  background: transparent;
  font-family: var(--f-text);
  font-size: 18px;
  line-height: 1.5;
  text-transform: none;
  resize: vertical;
}
.field textarea { font-size: 16px; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
.form .btn { margin-top: 16px; }
.form__status { margin-top: 12px; font-size: 15px; font-weight: 500; }
.form__note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form__note a { color: var(--ink); text-underline-offset: 3px; }
.form__status[data-state="error"] { color: #8A1C0C; }

/* ---------- patička ---------- */

.footer {
  background: var(--honey);
  border-top: var(--rule);
  padding: 40px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.footer__brand { display: flex; flex-direction: column; gap: 12px; }
.footer__claim { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.footer__claim .logo { font-size: 30px; }
/* tagline se nepřekládá: vždy anglicky, malými písmeny, v mono */
.footer__tagline { font-family: var(--f-mono); font-size: 14px; font-weight: 500; letter-spacing: .1em; }
.footer__legal { font-family: var(--f-mono); font-size: 11px; line-height: 1.7; }
.footer__links { display: flex; gap: 24px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.footer__links a { text-decoration: none; border-bottom: 2px solid transparent; }
.footer__links a:hover { border-bottom-color: var(--ink); }

/* =========================================================
   Pod ~1200 px: mobilní menu
   ========================================================= */

@media (max-width: 1199px) {
  .header .nav, .header .langs, .header__write { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* =========================================================
   Tablet: zúžené mřížky
   ========================================================= */

@media (max-width: 1023px) {
  :root { --gutter: 32px; --section-y: 64px; }

  .hero__copy { grid-column: 1 / -1; }
  .hero__shots { grid-column: 1 / -1; }

  /* hlavičky sekcí pod sebou, jinak se velký nadpis láme uprostřed slova */
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .section-head__aside { align-items: flex-start; text-align: left; }
  .section-head__aside p { text-align: left; }

  .project { grid-template-columns: 1fr auto; gap: 8px 16px; }
  .project__body { grid-column: 1 / -1; grid-row: 2; }

  .stats__top { grid-template-columns: 1fr; }
  .stats__turnover { grid-column: auto; border-right: 0; padding-right: 0; }
  .stats__impact { padding-left: 0; }

  .approach__title, .approach__aside { grid-column: 1 / -1; }
  .points { grid-template-columns: 1fr; }
  .point { padding-right: 0; }

  .stats__rest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats__rest li { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule-soft); padding-bottom: 14px; }

  .service { grid-template-columns: 48px 1fr; }
  .service__desc, .service__tech { grid-column: 2; justify-self: start; text-align: left; }

  .calc { grid-template-columns: 1fr; }
  .calc { --calc-w: calc(100vw - 2 * var(--gutter)); }
  .calc__result { border-left: 0; border-top: var(--rule); }

  .contact__intro, .form { grid-column: 1 / -1; }

  .footer { flex-direction: column; align-items: flex-start; }
  .footer__links { white-space: normal; flex-wrap: wrap; }
}

/* =========================================================
   Mobil (390 px)
   ========================================================= */

@media (max-width: 719px) {
  :root { --gutter: 20px; --section-y: 36px; }

  body { background: var(--honey); }

  .header { padding: 14px var(--gutter); }
  .header > .logo { font-size: 28px; }
  .header__side { gap: 12px; }
  .header__lang-code { font-family: var(--f-mono); font-size: 12px; }

  .hero__title { padding-top: 44px; line-height: .96; }
  .hero__title .line { display: inline-block; }
  .hero__body { margin-top: 28px; padding: 18px 0 28px; gap: 18px; }
  .hero__copy { gap: 18px; }
  .hero__lead { font-size: 17px; }
  .hero__actions { flex-direction: column; gap: 8px; }
  .hero__actions .btn { font-size: 16px; padding: 15px 18px; }
  .hero__actions .btn--outline { padding: 13px 16px; }
  .hero__shots { grid-template-columns: 1fr; }
  .shot--sm { display: none; }
  .shot__name { font-size: 18px; }

  main > .section, main > .calc, main > .contact { background: var(--paper); }
  main > .approach { background: var(--honey); }
  .approach { border-bottom: 0; gap: 14px; }
  .approach + .section { border-top: var(--rule); }

  .section-head { flex-direction: column; align-items: flex-start; gap: 6px; border-bottom: 0; padding-bottom: 16px; }
  .section-head p { font-size: 15px; }
  .section-head .mono { order: -1; }

  .project { grid-template-columns: 1fr auto; gap: 6px 10px; padding: 14px 0; border-bottom: 0; border-top: var(--rule-thin); }
  .project__body { grid-column: 1 / -1; grid-row: 2; gap: 4px; }
  .project__desc { font-size: 14px; }
  .project__meta { font-size: 11px; }
  .section-head__aside { display: contents; }
  .section-head__aside p { text-align: left; }
  .project__status { font-size: 11px; }

  .approach__title { font-size: min(40px, 10vw); line-height: .96; }
  .approach__aside { gap: 14px; }
  .approach__aside p { font-size: 15px; line-height: 1.5; }
  .points { margin-top: 0; border-top: 0; gap: 14px; }
  .point { padding: 12px 0 0; border-top: var(--rule); gap: 4px; }
  .point__n { display: none; }
  .point__t { font-size: 24px; line-height: 1; }
  .point__d { font-size: 14px; line-height: 1.5; }
  .approach__aside .link-mono { order: 2; }

  .stats__head { font-size: 11px; letter-spacing: .08em; padding-bottom: 10px; }
  .stats__top { grid-template-columns: 1fr; }
  .stats__turnover { grid-column: auto; border-right: 0; padding: 18px 0; }
  .stat__label { font-size: 11px; margin-top: 6px; }
  .stats__impact { padding: 18px 0; order: 2; border-bottom: 0; }
  .stats__impact strong { font-size: 20px; }
  .stats__impact .btn { width: 100%; padding: 15px 18px; }
  .stats__rest { grid-template-columns: 1fr 1fr; }
  .stats__rest li { padding: 14px 0; }
  .stats__rest .stat__label { font-size: 11px; margin-top: 4px; }

  .services__title { font-size: min(36px, 9.5vw); line-height: .96; }
  .service { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 0; border-top: var(--rule-thin); }
  .service__n { display: none; }
  .service__desc, .service__tech { grid-column: 1; }
  .service__desc { font-size: 14px; line-height: 1.5; }
  .service__tech { font-size: 11px; color: var(--muted); }

  .calc__form { padding: var(--section-y) var(--gutter) 16px; gap: 16px; }
  .calc__title { font-size: min(46px, 11.5vw); line-height: .96; }
  .segment { flex-direction: column; gap: 2px; padding: 12px 14px; font-size: 14px; }
  .range__row { font-size: 14px; }
  .calc__result {
    background: var(--paper);
    border-top: 0;
    padding: 0 var(--gutter) var(--section-y);
    gap: 16px;
  }
  .calc__box { background: var(--honey); border: var(--rule); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
  .calc { --calc-w: calc(100vw - 2 * var(--gutter) - 44px); }
  .calc__big { font-size: min(72px, calc(var(--calc-w) / (var(--len, 7) * .46))); line-height: 1; padding: 0; }
  .calc__currency { font-size: 28px; }
  .calc__figures { grid-template-columns: 1fr; padding-top: 10px; gap: 4px; }
  .calc__figures > div,
  .calc__figures > div:first-child {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 0;
    border-left: 0 !important;
  }
  .calc__figures .num { font-family: var(--f-mono); font-weight: 400; font-size: 14px; }
  .calc__figures .mono { font-family: var(--f-text); text-transform: none; font-size: 14px; }
  .calc__cta .btn { font-size: 15px; padding: 16px 18px; }
  .calc__cta > span { font-size: 11px; color: var(--muted); }

  .contact { padding-block: var(--section-y); gap: 14px; }
  .contact__intro { gap: 14px; }
  .contact__title { font-size: min(44px, 11vw); line-height: .96; }
  .contact__links { font-size: 16px; gap: 6px 20px; }
  .form { border-top: 0; }
  .field input { font-size: 16px; }
  .form .btn { justify-content: center; }

  .footer { padding: 28px var(--gutter); gap: 16px; }
  .footer__claim .logo { font-size: 24px; }
  .footer__tagline { font-size: 12px; }
  .footer__legal { font-size: 11px; }
}

/* Dva sloupce: výsledek drží pohromadě a při scrollu zůstává na očích, takže je
   vidět i ve chvíli, kdy člověk hýbe posuvníky dole. Medové pozadí sloupce proto
   nese .calc (ostrý předěl v půlce, ne přechod) a dělicí linku formulář. */
@media (min-width: 1024px) {
  .calc { background: linear-gradient(to right, var(--paper) 50%, var(--honey) 50%); align-items: start; }
  .calc__form { border-right: var(--rule); }
  .calc__result { position: sticky; top: 64px; border-left: 0; background: none; justify-content: flex-start; gap: 40px; }
}

/* Na desktopu se medový box kalkulačky „rozpouští“ do pravého sloupce. */
@media (min-width: 720px) {
  .calc__box { display: contents; }
  .header__lang-code { display: none; }
}


/* =========================================================
   POHYB
   Vše se zapíná třídou .motion na <html> (nastaví inline skript v <head>,
   jen když uživatel nemá v systému omezené animace). Bez ní je stránka
   statická a plně čitelná.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.2, .75, .15, 1);
  --ease-draw: cubic-bezier(.65, 0, .15, 1);
}

/* ---------- header: přichycení a zmenšení ---------- */

.header, .header > .logo { transition: padding .2s var(--ease-out), font-size .2s var(--ease-out); }
.masthead.is-stuck .header { padding-block: 12px; }
.masthead.is-stuck .header > .logo { font-size: 28px; }
.nav a[aria-current="true"] { border-bottom-color: var(--ink); }
.mobile-menu { max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; }
body.menu-open { overflow: hidden; }

/* ---------- tlačítka ---------- */

.btn .arr { display: inline-block; transition: transform .15s var(--ease-out); }
@media (hover: hover) { .btn:hover .arr { transform: translateX(5px); } }
.btn--outline {
  background: linear-gradient(var(--ink), var(--ink)) left / 0% 100% no-repeat;
  transition: background-size .22s var(--ease-out), color .12s;
}
/* výplň Inkoustem se při hoveru „nalije“ zleva; barvu textu přepíná pravidlo u .btn--outline výše.
   Hover nesmí nastavovat zkratku `background`, ta by výplň (gradient) smazala a medový text
   by zůstal na medovém pozadí. */
@media (hover: hover) { .btn--outline:hover { background-size: 100% 100%; } }

/* ---------- posuvníky kalkulačky ---------- */

.range input {
  -webkit-appearance: none;
  appearance: none;
  height: 24px;
  background: linear-gradient(var(--ink), var(--ink)) left center / var(--fill, 50%) 4px no-repeat,
              linear-gradient(var(--rule-soft), var(--rule-soft)) center / 100% 2px no-repeat;
  cursor: pointer;
}
.range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--ink);
  border: 2px solid var(--paper);
  outline: 2px solid var(--ink);
  transition: transform .12s;
}
.range input::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 0;
  background: var(--ink); border: 2px solid var(--paper); outline: 2px solid var(--ink);
}
.range input:active::-webkit-slider-thumb { transform: scale(1.15); }
.range input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---------- projekty: medová výplň a náhled u kurzoru ---------- */

@media (hover: hover) and (pointer: fine) {
  .project { position: relative; isolation: isolate; }
  .project::before {
    content: '';
    position: absolute;
    inset: 0 calc(-1 * var(--gutter));
    z-index: -1;
    background: var(--honey);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease-out);
  }
  .project:hover::before { transform: scaleX(1); }
  .project:hover .project__meta { color: var(--ink); }
  /* text-indent místo transformu: transform by z odkazu udělal kontejner
     a roztažená klikací plocha (a::before) by se zmenšila na název */
  .project__name { transition: text-indent .35s var(--ease-out); }
  .project:hover .project__name { text-indent: 12px; }
}

.cursor-preview {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  width: 300px;
  height: 190px;
  object-fit: cover;
  object-position: top left;
  background: var(--paper);
  border: var(--rule);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-999px, -999px, 0);
  transition: opacity .18s;
}
.cursor-preview.is-visible { opacity: 1; }
.cursor-preview[src$=".svg"] { object-fit: contain; padding: 24px; }

/* ---------- běžící pás (samostatný prvek, lze smazat) ---------- */

.ticker {
  overflow: hidden;
  background: var(--honey);
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: 18px 0;
}
.ticker__track { display: flex; width: max-content; animation: ticker 45s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.ticker span::after { content: ''; width: 12px; height: 12px; background: var(--ink); }
.ticker + .section { border-top: 0; }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- úvod hero ---------- */

.motion .hero__title .line { clip-path: inset(-.3em -.1em -.15em -.1em); }
.motion .hero__title .line__in { transform: translateY(130%); transition: transform 1s var(--ease-out); }
.motion .hero__title .line + .line .line__in { transition-delay: .12s; }
.motion.is-loaded .hero__title .line__in { transform: none; }

.motion .intro { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
/* perex v hero se neschovává: je to LCP prvek a má být vidět hned */
.motion .hero__shots.intro { transition-delay: .45s; }
.motion.is-loaded .intro { opacity: 1; transform: none; }

/* ---------- odhalení při scrollu ---------- */

.motion [data-reveal]:not(.rise) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.motion [data-reveal].is-in { opacity: 1; transform: none; }

.motion .rise { clip-path: inset(-.3em -.1em -.15em -.1em); }
.motion .rise.is-done { clip-path: none; }
.motion .rise .rise__in { display: block; transform: translateY(110%); transition: transform .9s var(--ease-out); }
.motion .rise.is-in .rise__in { transform: none; }

/* ---------- linky, které se dokreslí ---------- */

.motion [data-draw] { position: relative; --dw: 2px; }
.motion .project[data-draw], .motion .service[data-draw] { --dw: 1px; }
.motion [data-draw="bottom"] { border-bottom-color: transparent; }
.motion [data-draw="top"] { border-top-color: transparent; }
.motion [data-draw]::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: var(--dw);
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-draw);
  transition-delay: var(--delay, 0s);
  pointer-events: none;
}
.motion [data-draw="bottom"]::after { bottom: calc(-1 * var(--dw)); }
.motion [data-draw="top"]::after { top: calc(-1 * var(--dw)); }
.motion [data-draw].is-in::after { transform: scaleX(1); }
.motion .hero__body[data-draw]::after { transition-delay: .3s; }

@media (max-width: 719px) {
  /* na mobilu mají řádky linku nahoře a některé hlavičky žádnou */
  .motion .project[data-draw], .motion .service[data-draw] { border-top-color: transparent; }
  .motion .project[data-draw]::after, .motion .service[data-draw]::after { top: -1px; bottom: auto; }
  .motion .section-head[data-draw]::after, .motion .points[data-draw]::after { display: none; }
}

/* Hero na homepage vyplní celé okno pod headerem (žádný kus další sekce pod ním). */
.hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 90px);
  min-height: min(calc(100svh - 90px), 75vw);
}
/* Screenshoty se ukazují celé, v původním poměru stran. Výšku, která v okně zbude,
   si bere spodní část hero: perex nahoře, tlačítka a screenshoty u spodní hrany.
   Na oknech vyšších než širších se hero dál nenatahuje (strop podle šířky). */
.hero__body { flex: 1; grid-template-rows: 1fr; }
.hero__copy { justify-content: space-between; }
.hero__shots { align-self: end; }
@media (max-width: 1023px) {
  .hero__body { grid-template-rows: auto 1fr; }
}
@media (max-width: 719px) {
  .hero { min-height: calc(100vh - 74px); min-height: min(calc(100svh - 74px), 190vw); }
}
/* na nízkých a širokých oknech nadpis nesmí vytlačit spodek pod okraj */
@media (min-width: 720px) and (max-height: 820px) {
  .hero__title { font-size: min(clamp(44px, min(16vw, 22vh), 196px), calc((100vw - 2 * var(--gutter)) / (var(--h1-len, 13) * .46))); padding-top: 40px; }
  .hero__body { margin-top: 32px; }
}
/* nízké okno: screenshoty se smí zkrátit zespodu (nikdy z boku), aby se hero vešlo */
@media (min-width: 1024px) and (max-height: 820px) {
  .hero__shots { align-self: stretch; align-items: stretch; }
  .shot { container-type: inline-size; justify-content: flex-end; }
  .shot__img { flex: 1 1 0; height: 0; min-height: 110px; }
  .shot--lg .shot__img { max-height: calc(100cqw * .6313); }
  .shot--sm .shot__img { max-height: calc(100cqw * .8075); }
}

/* =========================================================
   SDÍLENÉ PRVKY (header a patička se vkládají ze site.js)
   ========================================================= */

/* místo pro header, než ho site.js vloží (bez posunu layoutu) */
.masthead:empty { min-height: 90px; }
@media (max-width: 719px) { .masthead:empty { min-height: 74px; } }
.footer:empty { min-height: 160px; }
.footer__claim a.logo { text-decoration: none; }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* =========================================================
   PODSTRÁNKY — komponenty
   ========================================================= */

.page-hero { background: var(--honey); }
.page-hero__inner { padding: 48px var(--gutter) 0; }
.back-link { display: inline-flex; gap: 8px; align-items: center; min-height: 32px; margin-bottom: 32px; font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.page-kicker { margin-bottom: 20px; }
.page-title { font-size: clamp(56px, 13vw, 176px); line-height: .96; letter-spacing: -.005em; }
.page-title .line { display: block; }
.page-title .line__in { display: inline-block; }
.page-hero__body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin: 40px var(--gutter) 0;
  padding: 28px 0 48px;
  border-top: var(--rule);
}
.page-hero__body > * { min-width: 0; }
.page-lead { grid-column: 1 / span 6; font-size: 22px; line-height: 1.45; font-weight: 500; text-wrap: pretty; }
.page-hero__aside { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 20px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.facts { display: grid; gap: 0; margin: 0; border-top: var(--rule-thin); }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px; padding: 12px 0; border-bottom: var(--rule-thin); }
.facts dt { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding-top: 3px; }
.facts dd { margin: 0; font-weight: 500; }

/* velký screenshot / obrázek */
.figure { margin: 0; }
.figure__frame { display: block; width: 100%; padding: 0; border: var(--rule); background: var(--paper); cursor: zoom-in; }
.figure__frame img { width: 100%; height: auto; }
.figure figcaption { display: flex; justify-content: space-between; gap: 16px; padding-top: 10px; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.page-figure { padding: 0 var(--gutter) 56px; background: linear-gradient(var(--honey) 50%, var(--paper) 50%); }

/* číslovaná sekce: štítek vlevo, obsah vpravo */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.split > * { min-width: 0; }
.split__label { grid-column: 1 / span 3; display: flex; gap: 12px; align-items: baseline; }
.split__label .num-tag { font-family: var(--f-display); font-weight: 900; font-size: 56px; line-height: .9; }
.split__body { grid-column: 4 / span 9; display: flex; flex-direction: column; gap: 28px; }
.split__title { font-size: clamp(40px, 5.6vw, 84px); line-height: .96; }

.prose { display: flex; flex-direction: column; gap: 16px; max-width: 68ch; font-size: 18px; line-height: 1.6; text-wrap: pretty; }
.prose--lead { font-size: 21px; font-weight: 500; line-height: 1.5; }

/* řádky typu „název — text" */
.kv { margin: 0; padding: 0; list-style: none; border-top: var(--rule); }
.kv > * { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; padding: 20px 0; border-bottom: var(--rule-thin); }
.kv dt, .kv__t { font-family: var(--f-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: .96; text-transform: uppercase; }
.kv dd, .kv__d { margin: 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.kv ul { margin: 10px 0 0; padding-left: 18px; }
.kv li { margin: 4px 0; }

/* karty v mřížce (bez stínů, jen linky) */
.cells { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); border-top: var(--rule); border-left: var(--rule-thin); margin: 0; padding: 0; list-style: none; }
.cells > * { min-width: 0; padding: 24px; border-right: var(--rule-thin); border-bottom: var(--rule-thin); display: flex; flex-direction: column; gap: 10px; }
.cells h3 { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: .96; text-transform: uppercase; }
.cells p { font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.cells .mono { color: var(--muted); }

/* časová osa */
.timeline { margin: 0; padding: 0; list-style: none; border-top: var(--rule); }
.timeline li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 24px; padding: 20px 0; border-bottom: var(--rule-thin); }
.timeline time, .timeline .timeline__when { font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; padding-top: 4px; }
.timeline h3 { font-family: var(--f-display); font-weight: 800; font-size: 30px; line-height: .96; text-transform: uppercase; margin-bottom: 6px; }
.timeline p { line-height: 1.55; }

/* telefony / galerie */
.gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px; }
.gallery .figure__frame { background: var(--honey); padding: 16px; }
.gallery .figure__frame img { margin: 0 auto; max-height: 520px; width: auto; }

/* štítky technologií */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags li { padding: 6px 10px; border: var(--rule-thin); font-family: var(--f-mono); font-size: 12px; }

/* výzva na konci stránky */
.cta-band { background: var(--honey); border-top: var(--rule); padding: var(--section-y) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.cta-band > * { min-width: 0; }
.cta-band__title { grid-column: 1 / span 8; font-size: clamp(48px, 8vw, 120px); line-height: .96; }
.cta-band__aside { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cta-band__aside p { font-size: 18px; line-height: 1.5; font-weight: 500; }

/* odkaz na související projekt */
.related { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 24px; border: var(--rule); }
.related img { width: 72px; height: 72px; }
.related h3 { font-family: var(--f-display); font-weight: 800; font-size: 32px; line-height: .96; text-transform: uppercase; }

/* lightbox */
.lightbox { max-width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: var(--rule); background: var(--paper); }
.lightbox::backdrop { background: rgba(21, 19, 15, .82); }
.lightbox img { max-width: 100%; max-height: calc(92vh - 64px); margin: 0 auto; }
.lightbox__close { position: sticky; top: 0; z-index: 1; width: 100%; justify-content: center; }

@media (max-width: 1023px) {
  .page-lead, .page-hero__aside { grid-column: 1 / -1; }
  .split__label, .split__body { grid-column: 1 / -1; }
  .cta-band__title, .cta-band__aside { grid-column: 1 / -1; }
  .cells { --cols: 1 !important; }
  .gallery { --cols: 3; gap: 12px; }
}

@media (max-width: 719px) {
  .page-hero__inner { padding-top: 28px; }
  .back-link { margin-bottom: 20px; }
  .page-title { font-size: clamp(40px, 13vw, 96px); }
  .page-hero__body { margin-top: 24px; padding: 18px 0 28px; }
  .page-lead { font-size: 17px; }
  .page-figure { padding-bottom: 32px; }
  .split__label .num-tag { font-size: 40px; }
  .split__body { gap: 20px; }
  .prose { font-size: 16px; }
  .prose--lead { font-size: 18px; }
  .kv > *, .timeline li, .facts > div { grid-template-columns: 1fr; gap: 6px; }
  .cells > * { padding: 18px; }
  .gallery { --cols: 1 !important; }
  .gallery .figure__frame img { max-height: 440px; }
  .related { grid-template-columns: 1fr; }
}

/* úvod podstránek: stejné chování jako hero na homepage */
.motion .page-title .line { clip-path: inset(-.3em -.1em -.15em -.1em); }
.motion .page-title .line__in { transform: translateY(130%); transition: transform 1s var(--ease-out); }
.motion .page-title .line + .line .line__in { transition-delay: .12s; }
.motion.is-loaded .page-title .line__in { transform: none; }
.motion .page-hero__body[data-draw]::after { transition-delay: .3s; }

.stats__rest--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 719px) { .stats__rest--4 { grid-template-columns: 1fr 1fr; } }
a.related { text-decoration: none; transition: background-color .15s; }
a.related:hover { background: var(--honey); }
.split__body > h3.mono { margin-bottom: -12px; }

/* Nadpisy se zalamují jen mezi slovy (žádné „PROGRAMÁ-TOŘI") a víceřádkové
   mají řádkování 1.04, aby háčky a čárky (Ř, Ť, Á) nenarážely do řádku nad nimi.
   Velikosti písma jsou nastavené tak, aby se nejdelší slovo vešlo i v DE/PL. */
.display, .project__name, .service__name, .point__t, .kv dt, .kv__t, .timeline h3, .cells h3, .related h3 {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}
:is(.approach__title, .services__title, .calc__title, .contact__title, .split__title, .cta-band__title, .page-title) { line-height: 1.04; }
:is(.project__name, .service__name, .point__t) { line-height: 1; }

/* úzké displeje: nejdelší slovo/číslo se musí vejít celé */
.calc__figures > div:last-child .num { white-space: normal; }
@media (max-width: 719px) {
  .stats__big { font-size: min(76px, 20vw); }
  .split__title { font-size: min(40px, 10vw); }
}

/* slogan ve statistikách */
.stats__impact .stats__slogan { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; font-weight: 900; }
@media (max-width: 719px) { .stats__impact .stats__slogan { font-size: min(36px, 9.5vw); } }

/* stránka Kontakt */
.contact--page { border-top: 0; }
.contact--page .contact__intro { gap: 24px; }
.contact__facts { width: 100%; max-width: 640px; }
.contact__facts dd a { text-decoration: none; border-bottom: 2px solid transparent; }
.contact__facts dd a:hover { border-bottom-color: var(--ink); }
.contact__facts dd { font-size: 18px; }
.contact__facts > div:last-child dd { font-size: 14px; font-weight: 400; line-height: 1.6; }
.contact__note { color: var(--muted); }
.form__title { padding: 12px 0; border-bottom: var(--rule-thin); }

/* 404 */
.notfound { background: var(--honey); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; min-height: calc(100svh - 90px - 160px); padding: 48px var(--gutter) var(--section-y); }
.notfound > * { min-width: 0; }
.notfound__code { grid-column: 1 / span 7; font-size: clamp(120px, 30vw, 420px); line-height: .8; }
.notfound__body { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 12px; }
.notfound__title { font-size: clamp(36px, 4vw, 60px); line-height: 1.04; }
.notfound__text { font-size: 18px; line-height: 1.5; }
@media (max-width: 1023px) {
  .notfound__code, .notfound__body { grid-column: 1 / -1; }
}

/* =========================================================
   SOUHLAS S MĚŘENÍM (lištu vkládá site.js, dokud návštěvník nerozhodne)
   ========================================================= */

.consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  width: min(420px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  line-height: 1.5;
}
.consent a { text-underline-offset: 3px; }
.consent__actions { display: flex; gap: 8px; }
.consent .btn { flex: 1; justify-content: center; min-height: 44px; padding: 10px 16px; font-size: 15px; }
.consent__yes { background: var(--honey); color: var(--ink); }
.consent__yes:hover { background: var(--paper); }
.consent__no { background: transparent; color: var(--paper); border: 2px solid var(--paper); padding: 8px 14px; }
.consent__no:hover { background: var(--paper); color: var(--ink); }
.consent :focus-visible { outline-color: var(--honey); }

/* stránka /privacy */
.privacy .kv dd a { text-underline-offset: 3px; }
.privacy .kv dd .btn { margin-top: 14px; }

/* =========================================================
   Formulář: chyby u polí, odesílání, potvrzení
   ========================================================= */

.field__error {
  font-family: var(--f-text);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  color: #8A1C0C;
}
.field.is-invalid { border-bottom: 2px solid #8A1C0C; padding-bottom: 11px; }
.field.is-invalid > span:first-child { color: #8A1C0C; }

/* odesílání: tenký pruh pod tlačítkem */
.form .btn { position: relative; }
.form.is-sending .btn { cursor: progress; }
.form.is-sending .btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--ink) 40%, var(--ink) 60%, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: form-progress 1s linear infinite;
}
@keyframes form-progress { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .form.is-sending .btn::after { animation: none; background: var(--ink); opacity: .4; } }

/* potvrzení a chyba */
.form__result[hidden] { display: none; }
.form__result { margin-top: 20px; padding: 24px; border: var(--rule); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.form__result[data-state="success"] { background: var(--honey); margin-top: 0; }
.form__result[data-state="error"] { background: var(--paper); border-color: #8A1C0C; }
.form__result-label { letter-spacing: .12em; }
.form__result-title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04; }
.form__result-title:focus { outline: none; }
.form__result-title--error { font-family: var(--f-text); font-weight: 700; font-size: 20px; line-height: 1.3; text-transform: none; color: #8A1C0C; }
.form__result-text { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.form__result .btn { margin-top: 8px; }

/* po odeslání formulář zmizí a zůstane jen potvrzení */
.form.is-done > :not(.form__result):not(.form__title) { display: none; }
.motion .form__result[data-state="success"] { animation: form-done .45s var(--ease-out); }
@keyframes form-done { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* „KnedlíčekAI" ve verzálkách: AI opticky oddělit, jinak se slije se jménem */
.name-ai { margin-left: .12em; }

/* projekty: typ · stav a šipka (→ studie na webu, ↗ externí web) */
.project { grid-template-columns: 1fr 1.2fr 220px; }
.project__status { display: inline-flex; justify-content: flex-end; align-items: baseline; gap: 10px; }
.project__arrow { font-family: var(--f-text); font-size: 18px; letter-spacing: 0; transition: transform .2s var(--ease-out); }
.project:hover .project__arrow { transform: translateX(4px); }
.project__desc { max-width: 62ch; }
@media (max-width: 1023px) { .project { grid-template-columns: 1fr auto; } }
@media (max-width: 719px) { .project__arrow { font-size: 15px; } }