/* ==========================================================================
   Malíř a natěrač Dačice – homepage
   Čisté HTML / CSS / JS. Barvy a rozměry se mění v :root.

   Responzivita (mobile-first):
     do 359 px   nejmenší telefony (zmenšené nadpisy, bez postavičky u poptávky)
     od 560 px   formulář ve dvou sloupcích
     od 600 px   tlačítko poptávky v hlavičce, patička ve dvou sloupcích
     od 640 px   služby ve třech sloupcích
     od 760 px   realizace vedle sebe (fotka + výběr), formulář ve třech sloupcích
     od 900 px   hero ve dvou sloupcích
     od 980 px   oblast působnosti ve dvou sloupcích
     od 1100 px  plná navigace, patička ve třech sloupcích
     nad 1920 px se celá stránka plynule zvětšuje (velké monitory)
     telefon na šířku (výška do 540 px) má vlastní úsporné rozložení

   Hranice v @media jsou zapsané v em (1em = 16 px při běžném nastavení prohlížeče;
   v komentáři za každou je hodnota v px). Díky tomu rozložení drží i u lidí, kteří
   mají v prohlížeči nastavené větší písmo.
   ========================================================================== */

/* Písmo Bricolage Grotesque (SIL OFL) – uložené přímo na webu, bez Google Fonts */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/bricolage-grotesque-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 {
  --navy: #0c1f3f;          /* text, tmavé plochy */
  --ink-2: #4b5773;         /* tlumený text */
  --blue: #0b4a91;          /* značková modrá (sekce Oblast) */
  --blue-deep: #083a73;
  --red: #d42b1e;           /* akce, tlačítka */
  --red-deep: #b01f13;
  --yellow: #fcc630;
  --paper: #ffffff;
  --paper-2: #f5f3ee;       /* teplá téměř bílá */
  --line: rgba(12, 31, 63, .14);

  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* šířka obsahu: 1360 px, na monitorech širších než 1920 px roste až na 1760 px */
  --container: clamp(1360px, calc(1360px + (100vw - 1920px) * .55), 1760px);
  /* okraj stránky; na telefonu otočeném na šířku uhne výřezu displeje */
  --gutter: max(clamp(20px, 4.5vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --header-h: 4.5rem;
  --r: 3px;                 /* jen mírné zaoblení */
  --ease: cubic-bezier(.65, 0, .35, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* „Hrana válečku“ – bezešvé dlaždice pro masky (černá = barva) */
  --edge-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='720' viewBox='0 0 36 720'%3E%3Cpath d='M36 0L20.6 0.0L19.2 4.0L20.1 8.0L20.2 12.0L21.6 16.0L23.1 20.0L24.9 24.0L21.4 28.0L21.8 32.0L22.1 36.0L20.0 40.0L22.8 44.0L19.3 48.0L19.0 52.0L19.0 56.0L19.8 60.0L20.2 64.0L18.1 68.0L17.8 72.0L22.5 76.0L19.0 80.0L19.7 84.0L19.4 88.0L19.5 92.0L15.1 96.0L12.1 100.0L13.9 104.0L12.6 108.0L13.2 112.0L12.8 116.0L12.3 120.0L11.5 124.0L13.0 128.0L10.7 132.0L11.6 136.0L10.7 140.0L10.1 144.0L13.3 148.0L18.0 152.0L17.5 156.0L17.0 160.0L18.0 164.0L20.8 168.0L23.5 172.0L23.1 176.0L22.8 180.0L21.7 184.0L22.2 188.0L20.3 192.0L16.2 196.0L17.3 200.0L19.0 204.0L17.8 208.0L17.8 212.0L17.7 216.0L20.4 220.0L17.7 224.0L16.8 228.0L16.4 232.0L16.7 236.0L18.8 240.0L15.9 244.0L18.0 248.0L19.2 252.0L16.8 256.0L17.0 260.0L14.6 264.0L16.2 268.0L15.1 272.0L15.2 276.0L14.5 280.0L17.2 284.0L16.9 288.0L18.4 292.0L18.4 296.0L17.6 300.0L17.7 304.0L19.6 308.0L18.1 312.0L15.9 316.0L17.2 320.0L18.0 324.0L19.8 328.0L19.3 332.0L16.5 336.0L17.6 340.0L16.7 344.0L17.6 348.0L16.9 352.0L20.6 356.0L20.4 360.0L22.0 364.0L21.0 368.0L21.2 372.0L21.3 376.0L21.3 380.0L20.2 384.0L18.1 388.0L22.9 392.0L19.8 396.0L20.2 400.0L21.6 404.0L22.3 408.0L22.9 412.0L21.7 416.0L21.0 420.0L20.5 424.0L20.8 428.0L18.0 432.0L16.0 436.0L17.1 440.0L14.7 444.0L19.5 448.0L21.9 452.0L19.8 456.0L18.1 460.0L17.9 464.0L18.8 468.0L21.0 472.0L20.5 476.0L20.9 480.0L20.4 484.0L19.6 488.0L15.3 492.0L14.5 496.0L14.8 500.0L15.5 504.0L11.3 508.0L12.0 512.0L15.2 516.0L14.2 520.0L14.8 524.0L16.5 528.0L15.8 532.0L15.9 536.0L15.5 540.0L15.5 544.0L13.8 548.0L16.1 552.0L16.6 556.0L15.6 560.0L13.7 564.0L14.1 568.0L16.1 572.0L13.7 576.0L14.9 580.0L17.3 584.0L17.7 588.0L16.1 592.0L14.4 596.0L15.7 600.0L16.8 604.0L16.6 608.0L17.7 612.0L17.9 616.0L18.5 620.0L19.4 624.0L18.9 628.0L16.6 632.0L19.5 636.0L20.4 640.0L18.7 644.0L19.3 648.0L20.1 652.0L19.3 656.0L18.0 660.0L21.0 664.0L20.7 668.0L19.1 672.0L18.1 676.0L17.0 680.0L18.3 684.0L18.7 688.0L20.1 692.0L20.5 696.0L20.6 700.0L20.7 704.0L20.0 708.0L19.8 712.0L17.7 716.0L20.6 720.0L36 720Z'/%3E%3Cellipse cx='7.3' cy='446.5' rx='1.1' ry='2.9'/%3E%3Cellipse cx='8.1' cy='528.9' rx='0.5' ry='1.0'/%3E%3Cellipse cx='12.4' cy='672.1' rx='1.2' ry='1.7'/%3E%3Cellipse cx='12.4' cy='338.2' rx='0.9' ry='1.9'/%3E%3Cellipse cx='17.7' cy='17.2' rx='0.7' ry='1.8'/%3E%3Cellipse cx='11.9' cy='547.1' rx='1.1' ry='1.6'/%3E%3Cellipse cx='13.7' cy='442.7' rx='0.5' ry='1.2'/%3E%3C/svg%3E");
  --edge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='26' viewBox='0 0 900 26'%3E%3Cpath d='M0 26L0.0 14.3L4.0 14.6L8.0 14.2L12.0 12.3L16.0 13.2L20.0 13.6L24.0 12.3L28.0 12.7L32.0 12.6L36.0 13.2L40.0 14.5L44.0 13.8L48.0 13.7L52.0 12.2L56.0 9.8L60.0 12.2L64.0 12.7L68.0 10.9L72.0 10.0L76.0 10.9L80.0 10.7L84.0 11.6L88.0 12.2L92.0 10.8L96.0 10.9L100.0 11.6L104.0 11.6L108.0 13.0L112.0 11.5L116.0 12.5L120.0 13.6L124.0 12.2L128.0 13.5L132.0 14.2L136.0 14.7L140.0 13.3L144.0 14.8L148.0 14.1L152.0 12.4L156.0 12.5L160.0 11.2L164.0 12.2L168.0 11.4L172.0 10.5L176.0 10.1L180.0 11.7L184.0 11.8L188.0 13.3L192.0 14.1L196.0 11.5L200.0 12.7L204.0 12.0L208.0 13.1L212.0 11.5L216.0 11.1L220.0 10.9L224.0 11.9L228.0 12.7L232.0 11.7L236.0 12.1L240.0 14.3L244.0 12.8L248.0 10.3L252.0 12.7L256.0 11.6L260.0 11.9L264.0 11.1L268.0 12.1L272.0 12.7L276.0 11.7L280.0 12.6L284.0 12.1L288.0 11.7L292.0 11.7L296.0 9.3L300.0 11.1L304.0 11.8L308.0 11.9L312.0 13.7L316.0 13.3L320.0 13.2L324.0 12.6L328.0 13.9L332.0 13.9L336.0 14.2L340.0 13.9L344.0 13.0L348.0 13.1L352.0 15.9L356.0 16.3L360.0 16.8L364.0 17.7L368.0 19.1L372.0 18.3L376.0 18.9L380.0 19.8L384.0 17.9L388.0 19.0L392.0 18.6L396.0 18.6L400.0 17.3L404.0 16.8L408.0 14.3L412.0 15.6L416.0 15.7L420.0 14.2L424.0 12.9L428.0 14.1L432.0 14.0L436.0 14.4L440.0 12.6L444.0 13.4L448.0 14.9L452.0 13.6L456.0 15.0L460.0 12.5L464.0 12.8L468.0 12.2L472.0 11.9L476.0 11.3L480.0 11.2L484.0 10.1L488.0 10.3L492.0 9.8L496.0 9.0L500.0 9.9L504.0 11.0L508.0 9.4L512.0 9.7L516.0 9.4L520.0 10.4L524.0 10.8L528.0 10.5L532.0 11.4L536.0 11.9L540.0 12.9L544.0 12.9L548.0 13.1L552.0 11.9L556.0 12.5L560.0 13.3L564.0 12.6L568.0 12.2L572.0 11.0L576.0 10.9L580.0 11.9L584.0 10.4L588.0 10.5L592.0 10.3L596.0 11.8L600.0 10.8L604.0 10.0L608.0 10.9L612.0 11.4L616.0 10.5L620.0 10.7L624.0 11.2L628.0 10.5L632.0 11.5L636.0 11.4L640.0 9.8L644.0 11.7L648.0 11.7L652.0 13.7L656.0 13.3L660.0 14.0L664.0 15.2L668.0 13.8L672.0 14.7L676.0 14.7L680.0 14.2L684.0 13.4L688.0 15.3L692.0 15.2L696.0 15.1L700.0 14.3L704.0 13.7L708.0 12.7L712.0 13.7L716.0 13.9L720.0 13.7L724.0 13.3L728.0 14.2L732.0 14.9L736.0 14.5L740.0 14.5L744.0 14.5L748.0 14.0L752.0 12.5L756.0 11.6L760.0 12.3L764.0 13.6L768.0 14.5L772.0 14.1L776.0 14.2L780.0 15.8L784.0 15.0L788.0 13.1L792.0 15.0L796.0 14.0L800.0 12.6L804.0 13.0L808.0 13.4L812.0 15.0L816.0 13.6L820.0 14.4L824.0 13.8L828.0 14.6L832.0 15.4L836.0 15.7L840.0 14.3L844.0 15.1L848.0 15.1L852.0 14.3L856.0 13.4L860.0 12.2L864.0 11.8L868.0 11.7L872.0 12.9L876.0 14.4L880.0 15.3L884.0 13.6L888.0 12.7L892.0 11.7L896.0 12.4L900.0 14.3L900 26Z'/%3E%3Cellipse cx='236.0' cy='6.1' rx='2.3' ry='1.0'/%3E%3Cellipse cx='170.9' cy='7.9' rx='0.9' ry='0.6'/%3E%3Cellipse cx='657.8' cy='10.2' rx='1.3' ry='0.9'/%3E%3Cellipse cx='267.7' cy='6.7' rx='2.2' ry='1.1'/%3E%3Cellipse cx='18.8' cy='9.4' rx='1.5' ry='0.6'/%3E%3Cellipse cx='725.0' cy='7.2' rx='2.4' ry='1.1'/%3E%3C/svg%3E");
  --edge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='26' viewBox='0 0 900 26'%3E%3Cpath d='M0 0L0.0 12.2L4.0 10.6L8.0 10.4L12.0 10.8L16.0 11.5L20.0 12.3L24.0 12.2L28.0 11.3L32.0 13.3L36.0 14.4L40.0 13.0L44.0 13.4L48.0 12.5L52.0 12.5L56.0 12.4L60.0 12.3L64.0 12.0L68.0 11.9L72.0 12.3L76.0 12.8L80.0 14.3L84.0 15.0L88.0 13.8L92.0 13.4L96.0 15.8L100.0 15.1L104.0 15.6L108.0 15.9L112.0 14.9L116.0 14.2L120.0 14.8L124.0 17.6L128.0 17.1L132.0 18.6L136.0 19.6L140.0 16.9L144.0 18.4L148.0 17.0L152.0 17.9L156.0 19.1L160.0 18.8L164.0 17.8L168.0 16.4L172.0 16.2L176.0 14.7L180.0 14.4L184.0 14.3L188.0 13.9L192.0 12.3L196.0 11.8L200.0 11.8L204.0 13.0L208.0 13.0L212.0 11.8L216.0 10.3L220.0 12.0L224.0 10.6L228.0 11.3L232.0 11.4L236.0 10.9L240.0 13.2L244.0 13.0L248.0 12.0L252.0 12.7L256.0 12.5L260.0 12.8L264.0 14.6L268.0 12.2L272.0 12.7L276.0 12.2L280.0 12.1L284.0 10.1L288.0 7.7L292.0 10.5L296.0 10.3L300.0 9.9L304.0 10.8L308.0 12.4L312.0 12.4L316.0 11.4L320.0 12.7L324.0 12.9L328.0 12.1L332.0 12.4L336.0 13.2L340.0 14.2L344.0 13.5L348.0 12.8L352.0 12.2L356.0 11.1L360.0 11.5L364.0 11.1L368.0 11.6L372.0 11.8L376.0 11.6L380.0 12.3L384.0 13.1L388.0 11.7L392.0 13.3L396.0 12.5L400.0 11.3L404.0 11.5L408.0 12.5L412.0 12.2L416.0 10.5L420.0 11.1L424.0 12.5L428.0 12.8L432.0 13.0L436.0 12.3L440.0 11.7L444.0 12.3L448.0 10.9L452.0 13.0L456.0 12.6L460.0 13.3L464.0 13.2L468.0 12.6L472.0 13.6L476.0 14.5L480.0 12.9L484.0 13.3L488.0 12.8L492.0 12.0L496.0 13.3L500.0 14.0L504.0 13.1L508.0 12.0L512.0 11.7L516.0 12.4L520.0 12.9L524.0 13.9L528.0 13.6L532.0 12.2L536.0 13.7L540.0 13.4L544.0 12.2L548.0 11.6L552.0 13.7L556.0 14.8L560.0 14.0L564.0 13.7L568.0 13.0L572.0 12.7L576.0 14.0L580.0 13.5L584.0 14.4L588.0 15.3L592.0 15.1L596.0 15.5L600.0 15.6L604.0 14.8L608.0 15.8L612.0 13.7L616.0 14.3L620.0 15.6L624.0 16.0L628.0 14.6L632.0 15.6L636.0 15.3L640.0 16.0L644.0 17.7L648.0 15.7L652.0 15.9L656.0 14.0L660.0 15.2L664.0 14.8L668.0 14.9L672.0 13.4L676.0 14.0L680.0 14.2L684.0 12.8L688.0 13.8L692.0 13.2L696.0 13.2L700.0 13.1L704.0 12.8L708.0 12.6L712.0 12.3L716.0 13.1L720.0 11.2L724.0 13.2L728.0 12.5L732.0 12.8L736.0 12.7L740.0 10.9L744.0 12.5L748.0 13.0L752.0 12.2L756.0 11.8L760.0 10.6L764.0 10.6L768.0 11.7L772.0 11.3L776.0 12.5L780.0 12.4L784.0 12.7L788.0 12.8L792.0 15.1L796.0 12.4L800.0 12.4L804.0 12.3L808.0 10.7L812.0 9.8L816.0 9.9L820.0 11.0L824.0 10.3L828.0 10.7L832.0 10.5L836.0 10.3L840.0 10.7L844.0 10.8L848.0 9.7L852.0 9.9L856.0 10.9L860.0 13.0L864.0 11.3L868.0 11.4L872.0 12.1L876.0 11.9L880.0 12.4L884.0 12.8L888.0 13.1L892.0 10.5L896.0 11.2L900.0 12.2L900 0Z'/%3E%3Cellipse cx='340.7' cy='20.8' rx='1.6' ry='1.1'/%3E%3Cellipse cx='780.1' cy='17.8' rx='1.3' ry='0.5'/%3E%3Cellipse cx='233.0' cy='15.3' rx='1.6' ry='0.8'/%3E%3Cellipse cx='116.5' cy='19.8' rx='2.1' ry='1.1'/%3E%3Cellipse cx='711.5' cy='17.9' rx='1.6' ry='1.1'/%3E%3Cellipse cx='324.5' cy='17.5' rx='1.5' ry='0.6'/%3E%3C/svg%3E");
}

@media (min-width: 68.75em) {   /* 1100 px */
  :root { --header-h: 5.25rem; }
}
/* telefon na šířku: nižší hlavička, ať zbyde místo na obsah */
@media (orientation: landscape) and (max-height: 33.75em) {   /* 540 px */
  :root { --header-h: 3.5rem; }
}

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

html {
  /* 16 px; na monitorech nad 1920 px plynule až 20 px (vše v rem se zvětší s ním) */
  font-size: clamp(100%, calc(100% + (100vw - 1920px) * .005), 125%);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
          text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--navy);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 800; }
address { font-style: normal; }
::selection { background: var(--yellow); color: var(--navy); }

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

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.nowrap { white-space: nowrap; }

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

.skip-link {
  position: absolute;
  left: 16px; top: -80px;
  z-index: 100;
  padding: 14px 18px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-radius: var(--r);
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- typography helpers */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-2);
}

.eyebrow-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 14px;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
/* číslo sekce se vypisuje z atributu data-n (není součástí textu nadpisu) */
.eyebrow-num[data-n]::before { content: attr(data-n); }
.eyebrow-num::after {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  opacity: .9;
}

/* nadpis = malý řádek (eyebrow) + velký titulek; obojí je uvnitř jednoho <h1>/<h2> */
.hero-heading,
.section-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.section-title {
  display: block;
  margin: 0;
  max-width: 15ch;
  font-size: clamp(min(2.5rem, 11.6vw), 4.6vw + .35rem, 5.1rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  padding: .92em 1.35em;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.005em;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  max-width: 100%;
  background: var(--btn-bg);
  border: 0;
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}
.btn:active { transform: translateY(1px); }
.btn-red { --btn-bg: var(--red); }
.btn-red:hover { --btn-bg: var(--red-deep); }
/* velká tlačítka se při zvětšeném písmu na úzkém displeji zalomí, místo aby přetekla */
.btn-lg { font-size: 1.12rem; padding: 1.05em 1.65em; white-space: normal; text-align: center; }
.btn-xl { font-size: clamp(1.1rem, .45vw + 1rem, 1.3rem); padding: 1.15em 2em; white-space: normal; text-align: center; }

.btn-arrow {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.btn:hover .btn-arrow { transform: translateX(5px); }

/* ==========================================================================
   NAVIGACE
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -24px rgba(12, 31, 63, .45);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 2.75rem;
  margin-right: auto;
  color: var(--navy);
  text-decoration: none;
}
.brand-mark { width: 2.75rem; height: 2.75rem; flex: none; }
.brand-text { min-width: 0; }
.brand-name,
.brand-tag { overflow: hidden; text-overflow: ellipsis; }   /* pojistka pro velmi úzké displeje */
.brand-name {
  display: block;
  font-size: 1.14rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.brand-tag {
  display: block;
  margin-top: 4px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.nav { display: none; }
.nav-list {
  display: flex;
  gap: clamp(18px, 2.1vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  position: relative;
  display: block;
  padding: 12px 0;
  font-size: .98rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

.header-cta { display: none; }

.menu-toggle {
  position: relative;
  display: grid;
  flex: none;
  place-content: center;
  gap: 7px;
  width: 48px;
  height: 48px;
  margin-right: -8px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--navy);
}
.menu-toggle-bar {
  display: block;
  width: 26px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .35s var(--ease);
}
/* otevřené menu: dvě čárky se složí do křížku */
.menu-toggle[aria-expanded="true"] .menu-toggle-bar { transform: translateY(4.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar + .menu-toggle-bar { transform: translateY(-4.75px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px var(--gutter) max(40px, calc(env(safe-area-inset-bottom, 0px) + 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #fff;
  background: var(--navy);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .3s ease, transform .35s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; transform: none; }

.mobile-list { margin: 0; padding: 0; list-style: none; }
.mobile-list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.mobile-list span {
  min-width: 2.2em;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--yellow);
}
.mobile-cta { align-self: flex-start; }
.mobile-phone {
  align-self: flex-start;
  margin-block: -10px;
  padding-block: 10px;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

/* nejmenší telefony: úspornější hlavička */
@media (max-width: 22.4375em) {   /* 359 px */
  .header-inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 2.4rem; height: 2.4rem; }
  .brand-name { font-size: 1rem; }
  .brand-tag { letter-spacing: .08em; }
}

@media (min-width: 37.5em) {   /* 600 px */
  .header-cta { display: inline-flex; }
}

@media (min-width: 68.75em) {   /* 1100 px */
  .nav { display: block; margin-right: clamp(8px, 1.6vw, 28px); }
  .menu-toggle, .mobile-menu { display: none !important; }
  .brand-mark { width: 3rem; height: 3rem; }
}

/* telefon na šířku: menu ve dvou sloupcích, aby se vešlo na výšku displeje */
@media (orientation: landscape) and (max-height: 33.75em) {   /* 540 px */
  .brand-mark { width: 2.4rem; height: 2.4rem; }
  .mobile-menu {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-content: start;
    gap: 18px clamp(24px, 6vw, 72px);
    padding-top: 12px;
  }
  .mobile-menu nav { grid-row: 1 / span 2; }
  .mobile-list a { padding: 9px 0; font-size: clamp(1.25rem, 3.4vw, 1.7rem); }
  .mobile-cta { grid-column: 2; align-self: end; margin-top: 10px; }
  .mobile-phone { grid-column: 2; align-self: start; }
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero-copy {
  padding: clamp(40px, 9vw, 72px) var(--gutter) clamp(36px, 8vw, 56px);
}

.hero .eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 3px;
  background: var(--red);
}
.hero .eyebrow > span { text-wrap: balance; }

.hero-title {
  display: block;
  margin: 0 0 .42em;
  /* na nejmenších displejích se zmenší tak, aby se „Nový prostor.“ vešlo na řádek */
  font-size: clamp(min(3rem, 13.8vw), 5.9vw + .4rem, min(7rem, 6.2vw));
  font-weight: 780;
  line-height: .96;
  letter-spacing: -.032em;
}
.hero-title .line { display: block; }
.hero-title .dot { color: var(--red); }

.hero-lead {
  max-width: 30ch;
  text-wrap: balance;
  margin: 0 0 2.1em;
  font-size: clamp(1.15rem, 1vw + .8rem, 1.5rem);
  line-height: 1.4;
  color: var(--ink-2);
}

.hero-media {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / .92;
  overflow: hidden;
  background: var(--paper-2);
  /* hrana jako tah válečkem – nahoře (mobil) */
  -webkit-mask-image: var(--edge-top), linear-gradient(#000, #000);
          mask-image: var(--edge-top), linear-gradient(#000, #000);
  -webkit-mask-size: 900px 26px, 100% calc(100% - 24px);
          mask-size: 900px 26px, 100% calc(100% - 24px);
  -webkit-mask-position: left top, left bottom;
          mask-position: left top, left bottom;
  -webkit-mask-repeat: repeat-x, no-repeat;
          mask-repeat: repeat-x, no-repeat;
}
@media (min-width: 37.5em) and (max-width: 56.1875em) {   /* 600 px · 899 px */
  .hero-media { aspect-ratio: 4 / 3; }
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 50%;
}

.scroll-cue { display: none; }

@media (max-width: 29.9375em) {   /* 479 px */
  .hero .eyebrow { letter-spacing: .12em; }
}
@media (max-width: 24.9375em) {   /* 399 px */
  .hero .eyebrow::before { display: none; }
}

/* dva sloupce: od 900 px, a také na telefonu otočeném na šířku */
@media (min-width: 56.25em), (orientation: landscape) and (max-height: 33.75em) and (min-width: 30em) {   /* 900 px · 540 px · 480 px */
  .hero {
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    /* na výšku okna, ale ne víc než 70rem a 80 % šířky (tablet na výšku by měl fotku jako úzký pruh) */
    min-height: max(600px, min(calc(100vh - var(--header-h)), 70rem, 80vw));
    min-height: max(600px, min(calc(100svh - var(--header-h)), 70rem, 80vw));
    padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
  }
  .hero-copy {
    align-self: center;
    padding: clamp(48px, 9vh, 110px) clamp(20px, 7vw - 43px, 72px) clamp(88px, 12vh, 130px) 0;
  }
  .hero-media {
    aspect-ratio: auto;
    min-height: 100%;
    /* hrana jako tah válečkem – vlevo */
    -webkit-mask-image: var(--edge-v), linear-gradient(#000, #000);
            mask-image: var(--edge-v), linear-gradient(#000, #000);
    -webkit-mask-size: 36px 720px, calc(100% - 34px) 100%;
            mask-size: 36px 720px, calc(100% - 34px) 100%;
    -webkit-mask-position: left top, right top;
            mask-position: left top, right top;
    -webkit-mask-repeat: repeat-y, no-repeat;
            mask-repeat: repeat-y, no-repeat;
  }
  .scroll-cue {
    position: absolute;
    left: max(var(--gutter), calc((100% - var(--container)) / 2));
    bottom: clamp(10px, 4vh - 14px, 26px);
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 14px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--ink-2);
    text-decoration: none;
  }
  .scroll-cue-line {
    position: relative;
    width: 64px;
    height: 2px;
    overflow: hidden;
    background: var(--line);
  }
  .scroll-cue-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--navy);
    transform: translateX(-100%);
    animation: cue 2.6s var(--ease) infinite 1.6s;
  }
  .scroll-cue:hover { color: var(--navy); }
}

/* telefon na šířku: hero na výšku displeje, menší titulek */
@media (orientation: landscape) and (max-height: 33.75em) and (min-width: 30em) {   /* 540 px · 480 px */
  .hero {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
  }
  .hero-copy { padding: 26px clamp(20px, 3vw, 40px) 30px 0; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero-title { font-size: clamp(1.75rem, 5.6vw, 3.5rem); }
  .hero-lead { margin-bottom: 1.2em; font-size: 1.1rem; }
  .hero-actions .btn-lg { padding: .95em 1.3em; font-size: 1rem; }
  .scroll-cue { display: none; }
}
@media (orientation: landscape) and (max-height: 33.75em) and (max-width: 39.9375em) {   /* 540 px · 639 px */
  .hero .eyebrow::before { display: none; }
}

@keyframes cue {
  0% { transform: translateX(-100%); }
  45%, 55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* úvodní „natření“ fotky shora dolů */
.js .hero-media img {
  clip-path: inset(0 0 100% 0);
  animation: paint-in 1.25s var(--ease) .2s forwards;
}
@keyframes paint-in { to { clip-path: inset(0 0 0 0); } }

/* ==========================================================================
   SEKCE – společné
   ========================================================================== */
.section { padding-block: clamp(4.75rem, 11vh, 8rem); }

.section-head { margin-bottom: clamp(36px, 6vh, 64px); }
.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 48px;
}
/* jedna věta vedle nadpisu sekce */
.section-lead {
  max-width: 33ch;
  margin: 0 0 .3em;
  font-size: clamp(1.06rem, .5vw + .95rem, 1.3rem);
  line-height: 1.45;
  color: var(--ink-2);
}

@media (orientation: landscape) and (max-height: 33.75em) {   /* 540 px */
  .section { padding-block: 3.5rem; }
  .section-head { margin-bottom: 28px; }
  .section-title { font-size: clamp(1.9rem, 5vw, 2.8rem); }
}

/* ==========================================================================
   2 · SLUŽBY
   ========================================================================== */
.services-grid {
  display: grid;
  gap: 56px;
}

.service-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-2);
}
.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.service:hover .service-media img { transform: scale(1.045); }

.service-body { padding-top: 24px; }

.swatch {
  display: block;
  width: 44px;
  height: 8px;
  margin-bottom: 18px;
  background: var(--accent, var(--blue));
  border-radius: 1px;
  transition: width .6s var(--ease-out);
}
.service:hover .swatch { width: 92px; }

.service-title {
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 1.1vw + 1.05rem, 2.15rem);
  font-weight: 760;
  line-height: 1.05;
  letter-spacing: -.025em;
}
.service-text {
  max-width: 30ch;
  margin: 0;
  font-size: 1.06rem;
  color: var(--ink-2);
}

@media (min-width: 40em), (orientation: landscape) and (max-height: 33.75em) and (min-width: 30em) {   /* 640 px · 540 px · 480 px */
  .services-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.4vw, 40px);
    align-items: start;
  }
  .service:nth-child(2) { margin-top: clamp(0px, 3.5vw, 56px); }
  .service-media {
    aspect-ratio: 4 / 5;
    max-height: max(340px, 50vh);
  }
}
/* tři užší sloupce na tabletu: menší písmo, aby se názvy vešly na řádek */
@media (max-width: 56.1875em) and (min-width: 40em), (orientation: landscape) and (max-height: 33.75em) and (min-width: 30em) and (max-width: 56.1875em) {   /* 899 px · 640 px · 540 px · 480 px */
  .service-body { padding-top: 18px; }
  .swatch { margin-bottom: 14px; }
  .service-title { font-size: clamp(1.15rem, 2.75vw, 1.55rem); }
  .service-text { font-size: .98rem; }
}

/* další práce – druhá řada stejných bloků jako nahoře */
.services-more {
  margin-top: clamp(56px, 8vh, 96px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.services-more-label { margin: 0 0 clamp(28px, 4vh, 44px); }

/* ==========================================================================
   TAHY VÁLEČKEM U OKRAJŮ STRÁNKY (dekorace – červený vlevo, modrý vpravo)
   Tah i kapky barvy zůstávají ve volném okraji vedle obsahu (ořez), takže
   na žádné šířce nezasahují do textu ani do fotek.
   ========================================================================== */
.has-trail { position: relative; }
.has-trail > .container { position: relative; }
.paint-trail-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.paint-trail {
  --trail-h: clamp(380px, 62vh, 760px);
  /* volné místo vedle obsahu (na mobilu = okraj stránky) */
  --trail-room: calc(var(--gutter) - 5px);
  /* viditelná šířka tahu; rezerva je na nerovnou hranu */
  --trail-visible: clamp(4px, calc(var(--trail-room) - var(--trail-h) * .012), 120px);
  position: absolute;
  top: 14%;
  display: block;
  width: max(0px, var(--trail-room));
  height: var(--trail-h);
  overflow: hidden;
}
.paint-trail img {
  display: block;
  width: calc(var(--trail-h) * .3);
  max-width: none;
  height: 100%;
  -webkit-user-select: none;
          user-select: none;
}
.paint-trail--left { left: 0; rotate: .25deg; }
.paint-trail--left img { margin-left: calc(var(--trail-visible) - var(--trail-h) * .246); }
.paint-trail--right { right: 0; rotate: -.3deg; }
.paint-trail--right img { margin-left: calc(var(--trail-room) - var(--trail-visible) - var(--trail-h) * .054); }
.work .paint-trail { top: 3%; }
@media (min-width: 47.5em) {   /* 760 px */
  /* 14 px = odstup od obsahu + rezerva na posuvník okna */
  .paint-trail { --trail-room: calc((100vw - min(100vw - 2 * var(--gutter), var(--container))) / 2 - 14px); }
  .paint-trail--left { rotate: .8deg; }
  .paint-trail--right { rotate: -1deg; }
  .work .paint-trail { top: 22%; }
}
/* „natření“ při sjetí k sekci: červený shora dolů, modrý zdola nahoru */
.js .paint-trail[data-reveal] { opacity: 1; transform: none; }
.js .paint-trail[data-reveal] img { transition: clip-path 1.5s var(--ease) .15s; }
.js .paint-trail--left[data-reveal] img { clip-path: inset(0 0 99% 0); }
.js .paint-trail--right[data-reveal] img { clip-path: inset(99% 0 0 0); }
.js .paint-trail[data-reveal].is-in img { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   3 · REALIZACE (před / po)
   ========================================================================== */
.work { background: var(--paper-2); }

.section-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-2);
}
.section-hint svg {
  flex: none;
  width: 32px;
  height: 16px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.work-head { margin-bottom: 28px; }
.work-side { margin-top: 8px; }

.compare {
  --pos: 50%;
  position: relative;
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
  aspect-ratio: 4 / 5;
  /* fotka se vždy vejde na výšku displeje (pod hlavičku) */
  max-height: calc(100vh - var(--header-h) - 16px);
  max-height: calc(100svh - var(--header-h) - 16px);
  overflow: hidden;
  background: #d9d4ca;
  cursor: ew-resize;
  touch-action: pan-y;
  -webkit-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.compare-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: opacity .35s ease;
}
.compare-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare.is-switching .compare-img { opacity: 0; }

.compare-tag {
  position: absolute;
  top: 16px;
  z-index: 2;
  padding: 8px 12px 7px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 2px;
  pointer-events: none;
  transition: opacity .25s ease;
}
.compare-tag--before { left: 16px; color: #fff; background: rgba(12, 31, 63, .82); }
.compare-tag--after { right: 16px; color: var(--navy); background: var(--yellow); }
.compare.hide-before-tag .compare-tag--before,
.compare.hide-after-tag .compare-tag--after { opacity: 0; }

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 0;
  outline: none;
}
.compare-handle::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -1.5px;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(12, 31, 63, .08), 0 0 18px rgba(12, 31, 63, .18);
}
.compare-knob {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--navy);
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(12, 31, 63, .28);
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease-out);
}
.compare-knob svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.compare:hover .compare-knob,
.compare.is-dragging .compare-knob { transform: translate(-50%, -50%) scale(1.08); }
.compare-handle:focus-visible .compare-knob {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 12px;
  margin-top: 8px;
}
.project {
  position: relative;
  padding: 20px 8px 6px 0;
  font: inherit;
  text-align: left;
  color: var(--navy);
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  opacity: .5;
  transition: opacity .3s ease;
}
.project::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.project:hover { opacity: .85; }
.project.is-active { opacity: 1; }
.project.is-active::before { transform: scaleX(1); }
.project:focus-visible { outline-offset: 6px; }

.project-num {
  display: block;
  margin-bottom: 6px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--red);
}
.project-title {
  display: block;
  font-size: clamp(1.02rem, 1vw + .75rem, 1.6rem);
  font-weight: 750;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.project-meta {
  display: none;
  margin-top: 6px;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--ink-2);
}

/* tablet + desktop: fotka vlevo (4:5), text a výběr zakázky vpravo */
@media (min-width: 47.5em) {   /* 760 px */
  .work-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(36px, 5vw, 96px);
  }
  .compare {
    grid-column: 1;
    grid-row: 1 / 5;
    /* šířka podle okna, výšky displeje a nejvýš 54 % šířky obsahu */
    width: min(54vw, calc(var(--container) * .54), max(380px, calc((100vh - var(--header-h) - 120px) * .8)));
    width: min(54vw, calc(var(--container) * .54), max(380px, calc((100svh - var(--header-h) - 120px) * .8)));
    max-height: none;
    margin-inline: 0;
    border-radius: var(--r);
  }
  .work-head { grid-column: 2; grid-row: 2; margin-bottom: clamp(28px, 4vh, 44px); }
  .work-side { grid-column: 2; grid-row: 3; margin-top: 0; }
  .compare-tag { top: 20px; }
  .compare-tag--before { left: 20px; }
  .compare-tag--after { right: 20px; }
  .compare-knob { width: 64px; height: 64px; }
  .projects {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
  }
  .project {
    padding: 20px 12px 20px 26px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  .project::before {
    top: 18px;
    bottom: 18px;
    width: 4px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }
  .project.is-active::before { transform: scaleY(1); }
  .project-meta { display: block; }
}

/* telefon na šířku: fotka vlevo v plné výšce displeje, výběr vpravo */
@media (orientation: landscape) and (max-height: 33.75em) and (min-width: 30em) {   /* 540 px · 480 px */
  .work-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(22px, 4vw, 48px);
  }
  .compare {
    grid-column: 1;
    grid-row: 1 / 4;
    width: auto;
    height: max(220px, calc(100vh - var(--header-h) - 28px));
    height: max(220px, calc(100svh - var(--header-h) - 28px));
    max-height: none;
    margin-inline: 0;
    border-radius: var(--r);
  }
  .work-head { grid-column: 2; grid-row: 1; margin-bottom: 14px; }
  .work-side { grid-column: 2; grid-row: 2; margin-top: 0; }
  .compare-tag { top: 12px; }
  .compare-tag--before { left: 12px; }
  .compare-tag--after { right: 12px; }
  .compare-knob { width: 52px; height: 52px; }
  .projects {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--line);
  }
  .project {
    padding: 11px 8px 11px 18px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
  }
  .project::before {
    top: 10px;
    bottom: 10px;
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }
  .project.is-active::before { transform: scaleY(1); }
  .project-num { display: inline; margin: 0 8px 0 0; }
  .project-title { display: inline; font-size: 1.05rem; }
  .project-meta { display: none; }
  .section-hint { margin-top: 12px; font-size: .9rem; }
}

/* ==========================================================================
   4 · OBLAST PŮSOBNOSTI (modrý „slide“ přes celou šířku)
   ========================================================================== */
.area {
  position: relative;
  padding-block: clamp(4.75rem, 10vh, 7.5rem);
  color: #fff;
  background: var(--blue);
}
/* horní a dolní hrana natřená válečkem */
.area::before,
.area::after,
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 26px;
  background: inherit;
  -webkit-mask-size: 900px 26px;
          mask-size: 900px 26px;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  pointer-events: none;
}
.area::before,
.site-footer::before {
  bottom: calc(100% - 1px);
  -webkit-mask-image: var(--edge-top);
          mask-image: var(--edge-top);
}
.area::after {
  top: calc(100% - 1px);
  -webkit-mask-image: var(--edge-bottom);
          mask-image: var(--edge-bottom);
}

.area-inner {
  display: grid;
  gap: 48px;
  align-items: center;
}
.eyebrow--light { color: rgba(255, 255, 255, .75); }
.eyebrow--light .eyebrow-num { color: var(--yellow); }
.area .section-title { color: #fff; max-width: 11ch; }

.area-text {
  max-width: 32ch;
  margin: 28px 0 30px;
  font-size: clamp(1.12rem, .6vw + .95rem, 1.38rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}

.towns {
  display: flex;
  flex-wrap: wrap;
  row-gap: 6px;
  max-width: 44ch;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .98rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .72);
}
.towns li:not(:last-child)::after {
  content: "·";
  margin: 0 10px;
  color: var(--yellow);
}

.area-map { margin: 0; }
.map-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.kraj {
  fill: rgba(255, 255, 255, .07);
  stroke: rgba(255, 255, 255, .3);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.kraj.is-home { fill: rgba(255, 255, 255, .15); stroke: rgba(255, 255, 255, .5); }
.map-area { fill: var(--yellow); }
.map-outline {
  fill: none;
  stroke: rgba(255, 255, 255, .78);
  stroke-width: 2;
  stroke-linejoin: round;
  pointer-events: none;
}
/* Popisky v mapě: velikost je v jednotkách mapy (1048 na šířku), proto se
   s rostoucí šířkou okna zmenšuje – na displeji tak vychází pořád kolem 12 / 16 px. */
.map-region-label {
  display: none;            /* na malých telefonech by byly nečitelné */
  font-family: var(--font);
  font-size: clamp(14px, calc(46px - 3.5vw), 26px);
  font-weight: 700;
  letter-spacing: .18em;
  fill: rgba(255, 255, 255, .65);
}
.map-pin-dot {
  r: clamp(8px, calc(20px - 1.5vw), 15px);
  fill: var(--red);
  stroke: #fff;
  stroke-width: 3.5px;
}
.map-pin-label {
  font-family: var(--font);
  font-size: clamp(20px, calc(74px - 6.5vw), 58px);
  font-weight: 800;
  letter-spacing: -.01em;
  fill: var(--navy);
  stroke: var(--yellow);
  stroke-width: .27em;
  stroke-linejoin: round;
  paint-order: stroke;
  transform: translateY(clamp(-8px, calc(1.5vw - 12px), 0px));
}

@media (min-width: 35em) {   /* 560 px */
  .map-region-label { display: inline; }
}

/* animace „vymalování“ oblasti (zapíná script.js) */
.map-anim .paint-stroke {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease);
}
.map-anim.is-painted .paint-stroke { stroke-dashoffset: 0; }
.map-anim .map-pin { opacity: 0; transition: opacity .5s ease 1.3s; }
.map-anim.is-painted .map-pin { opacity: 1; }

/* dva sloupce: od 980 px, a také na telefonu otočeném na šířku */
@media (min-width: 61.25em), (orientation: landscape) and (max-height: 33.75em) and (min-width: 40em) {   /* 980 px · 540 px · 640 px */
  .area-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 96px);
  }
  /* mapa je tu užší než okno → popisky v jednotkách mapy musí být větší */
  .map-region-label { font-size: clamp(17px, calc(40px - 1.6vw), 30px); }
  .map-pin-label { font-size: clamp(24px, calc(52px - 1.9vw), 40px); transform: none; }
  .map-pin-dot { r: 9px; }
}
@media (min-width: 61.25em) {   /* 980 px */
  .area-inner {
    min-height: min(600px, calc(100vh - var(--header-h) - 200px));
    min-height: min(600px, calc(100svh - var(--header-h) - 200px));
  }
}
@media (orientation: landscape) and (max-height: 33.75em) {   /* 540 px */
  .area { padding-block: 3.75rem; }
  .area-text { margin: 18px 0 20px; }
  /* malá mapa: jen špendlík s popiskem */
  .map-region-label { display: none; }
}
@media (orientation: landscape) and (max-height: 33.75em) and (min-width: 40em) {   /* 540 px · 640 px */
  .area-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .map-pin-label { font-size: clamp(34px, calc(84px - 5vw), 54px); }
}

/* ==========================================================================
   5 · KONTAKT + POPTÁVKA
   ========================================================================== */
.contact { padding-block: clamp(5.75rem, 13vh, 9.4rem) clamp(5rem, 11vh, 8rem); }

.contact-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  margin-bottom: clamp(40px, 7vh, 76px);
}
.contact-title {
  display: block;
  margin: 0;
  max-width: 17ch;
  font-size: clamp(min(2.6rem, 12.4vw), 5.4vw + .3rem, 6.2rem);
  font-weight: 780;
  line-height: .98;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.contact-lead {
  margin: 24px 0 0;
  font-size: clamp(1.12rem, .6vw + .95rem, 1.38rem);
  color: var(--ink-2);
}
.contact-mascot {
  width: clamp(88px, 15vw, 14.75rem);
  height: auto;
  margin-bottom: -6px;
}
/* na nejužších telefonech by postavička zasahovala do nadpisu */
@media (max-width: 22.4375em) {   /* 359 px */
  .contact-head { grid-template-columns: minmax(0, 1fr); }
  .contact-mascot { display: none; }
}
@media (orientation: landscape) and (max-height: 33.75em) {   /* 540 px */
  .contact { padding-block: 4rem 3.5rem; }
  .contact-head { margin-bottom: 32px; }
  .contact-title { font-size: clamp(2rem, 5.2vw, 3rem); }
  .contact-mascot { width: clamp(72px, 11vw, 120px); }
}

.form { position: relative; }
.form-grid {
  display: grid;
  gap: 30px 40px;
}
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.field label {
  margin-bottom: 6px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field input,
.field textarea {
  width: 100%;
  padding: 8px 0 12px;
  font: inherit;
  font-size: clamp(1.2rem, .7vw + 1rem, 1.55rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(12, 31, 63, .22);
  border-radius: 0;
  outline: none;
  resize: none;
  transition: border-color .25s ease;
  -webkit-appearance: none;
          appearance: none;
}
.field textarea {
  min-height: calc(2.6em + 22px);
  overflow: hidden;
  field-sizing: content;     /* novější prohlížeče: výška podle textu i bez skriptu */
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(12, 31, 63, .34); opacity: 1; }
.field input:hover,
.field textarea:hover { border-bottom-color: rgba(12, 31, 63, .45); }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--blue); }
.field.is-invalid input { border-bottom-color: var(--red); }

.field-error {
  min-height: 1.3em;
  margin-top: 6px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--red);
}
.field-error:empty { min-height: 0; margin-top: 0; }


.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 40px;
}
.form-note a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.form-note a:hover { color: var(--navy); }
.form-note {
  flex: 1 1 260px;
  max-width: 46ch;
  margin: 0;
  font-size: .95rem;
  color: var(--ink-2);
}
.form-status {
  margin: 20px 0 0;
  font-weight: 600;
}
.form-status:empty { display: none; }
.form-status.is-error { color: var(--red); }
.form-status.is-info {
  display: inline-block;
  padding: 12px 16px;
  color: var(--navy);
  background: var(--paper-2);
  border-left: 4px solid var(--yellow);
}
noscript .form-status { margin: 0 0 28px; }
[data-submit][disabled] { opacity: .7; cursor: progress; }

.form-success {
  padding: clamp(28px, 5vw, 56px) 0;
  border-top: 2px solid var(--navy);
}
.form-success-title {
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 3vw + .8rem, 3.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.form-success-text { max-width: 46ch; margin: 0; font-size: 1.2rem; color: var(--ink-2); }
.form-success-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 26px;
}
.form-success-alt {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: 1.02rem;
  color: var(--ink-2);
}
.form-success-alt a { font-weight: 700; color: var(--navy); text-underline-offset: 3px; }

@media (min-width: 35em) {   /* 560 px */
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
  .field--wide { grid-column: 1 / -1; }
}
@media (min-width: 47.5em) {   /* 760 px */
  .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 3vw, 48px); }
  .field--wide { grid-column: span 2; }
  .field textarea { min-height: calc(1.3em + 22px); }
}

/* ==========================================================================
   6 · KONTAKTNÍ ÚDAJE (patička)
   ========================================================================== */
.site-footer {
  --footer-fs: clamp(1.5rem, 1.9vw + .6rem, 2.4rem);   /* velikost telefonu a oblasti */
  position: relative;
  padding-block: clamp(56px, 9vh, 96px) max(16px, env(safe-area-inset-bottom, 0px));
  color: var(--navy);
  background: var(--yellow);
}

.footer-grid {
  display: grid;
  gap: 18px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-item { min-width: 0; }
.footer-label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}
.footer-value {
  display: block;
  padding-block: 11px;       /* dost velká dotyková plocha */
  font-size: var(--footer-fs);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--navy);
  text-decoration: none;
  overflow-wrap: break-word;
}
/* Dlouhá e-mailová adresa: písmo se přizpůsobí šířce sloupce.
   Na telefonu se zalomí před zavináčem, od 600 px se vejde na jeden řádek. */
.footer-item--mail { container-type: inline-size; }
.footer-value--mail {
  letter-spacing: -.02em;
  font-size: clamp(1rem, 5.9vw - 3px, 1.5rem);
  font-size: min(1.5rem, 6.15cqi);
}
.footer-link {
  display: inline-block;
  margin-top: -6px;
  padding-block: 10px;
  font-size: .98rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: rgba(12, 31, 63, .3);
  transition: text-decoration-color .2s ease;
}
.footer-link:hover { text-decoration-color: var(--navy); }
a.footer-value:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  margin-top: clamp(34px, 6vh, 64px);
  padding-top: 12px;
  font-size: .92rem;
  font-weight: 600;
  border-top: 2px solid rgba(12, 31, 63, .16);
}
.footer-legal { padding-block: 8px; line-height: 1.5; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }
.site-footer :focus-visible { outline-color: var(--navy); }

/* od 600 px: telefon a oblast vedle sebe, e-mail pod nimi přes celou šířku */
@media (min-width: 37.5em) {   /* 600 px */
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
  .footer-item--phone { padding-right: 24px; }
  .footer-item--area {
    padding-left: clamp(24px, 3vw, 44px);
    border-left: 2px solid rgba(12, 31, 63, .16);
  }
  .footer-item--mail { grid-column: 1 / -1; order: 3; }
  .footer-value--mail {
    font-size: var(--footer-fs);
    font-size: min(var(--footer-fs), 4.7cqi);
  }
}
/* od 1100 px: tři sloupce vedle sebe, e-mail uprostřed zabere zbylé místo */
@media (min-width: 68.75em) {   /* 1100 px */
  .footer-grid { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0; }
  .footer-item--phone { padding-right: clamp(24px, 3vw, 44px); }
  .footer-item--mail {
    grid-column: auto;
    order: 0;
    padding-inline: clamp(24px, 3vw, 44px);
    border-left: 2px solid rgba(12, 31, 63, .16);
  }
  .footer-value--mail {
    font-size: clamp(1.2rem, 2.9vw - .8rem, 1.95rem);
    font-size: min(var(--footer-fs), 4.7cqi);
    line-height: calc(var(--footer-fs) * 1.08);   /* stejná výška řádku jako telefon */
  }
}

/* ==========================================================================
   ÚVODNÍ ANIMACE – váleček natře obrazovku (spouští inline skript v <head>)
   ========================================================================== */
.intro-on { overflow: hidden; }

.intro-screen {
  --FW: clamp(120px, 15vw, 220px);   /* šířka rámu s rukojetí; zbytek se odvozuje */
  --R: calc(var(--FW) * .52);        /* průměr válečku */
  --nap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 .36' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.25 0 0 0 -.6'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 .36' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 .05 0 0 0 0 .16 0 1.35 0 0 -.62'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23a)'/%3E%3Crect width='180' height='180' filter='url(%23b)'/%3E%3C/svg%3E");
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.intro-on .intro-screen {
  display: block;
  animation:
    intro-fill 1.05s steps(1, end) forwards,
    intro-lift .62s var(--ease) 1.25s forwards;
}
/* zubatá hrana barvy, která se ukáže, když natřená plocha odjíždí nahoru */
.intro-screen::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 1px);
  height: 26px;
  background: var(--blue);
  -webkit-mask: var(--edge-bottom) left top / 900px 26px repeat-x;
          mask: var(--edge-bottom) left top / 900px 26px repeat-x;
}

.intro-roll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--R);
  transform: translateY(100vh);
  animation:
    intro-roll .95s cubic-bezier(.5, .05, .3, 1) .1s forwards,
    intro-hide 1.05s steps(1, end) forwards;
}
.intro-paint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--R) / 2);
  height: 260vh;
  background: var(--blue);
}
.intro-cyl {
  position: absolute;
  top: 0;
  left: -4%;
  right: calc(var(--FW) * .2);
  height: var(--R);
  border-radius: calc(var(--R) * .22);
  background-color: #1a56a0;
  background-image:
    var(--nap),
    linear-gradient(to bottom, #2c67ae 0%, #4a86cc 16%, #2a64ab 38%, #134a8c 66%, #0a3160 100%);
  background-size: 180px 180px, 100% 100%;
  box-shadow: 0 14px 24px -10px rgba(3, 16, 38, .65);
  animation: intro-nap .95s linear .1s both;
}
.intro-frame {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--FW);
  height: calc(var(--FW) * 2.6);
  overflow: visible;
}
.intro-wire { fill: none; stroke: #9aa1a9; stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; }
.intro-wire-hi { fill: none; stroke: #eef1f4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intro-cap { fill: #e9ecef; }
.intro-ferrule { fill: #8a9199; }
.intro-handle { fill: none; stroke: var(--yellow); stroke-width: 20; stroke-linecap: round; }
.intro-handle-shade { fill: none; stroke: #e0a91a; stroke-width: 7; stroke-linecap: round; }

.intro-brand {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  color: #fff;
  text-align: center;
  opacity: 0;
}
.intro-on .intro-brand { animation: intro-brand .5s var(--ease-out) .72s forwards; }
.intro-brand img { width: clamp(76px, 9vw, 116px); height: auto; margin-bottom: 6px; }
.intro-name {
  font-size: clamp(1.8rem, 2.4vw + .9rem, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.intro-tag {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--yellow);
}
@media (orientation: landscape) and (max-height: 33.75em) {   /* 540 px */
  .intro-brand { gap: 10px; }
  .intro-brand img { width: 64px; margin-bottom: 2px; }
}

@keyframes intro-roll { to { transform: translateY(calc(var(--FW) * -2.62)); } }
@keyframes intro-nap { to { background-position: 0 -540px, 0 0; } }
@keyframes intro-hide { to { visibility: hidden; } }
@keyframes intro-fill { to { background-color: var(--blue); } }
@keyframes intro-lift { to { transform: translateY(calc(-100% - 34px)); } }
@keyframes intro-brand {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: none; }
}

/* po úvodní animaci: fotka v hero už je „natřená“, texty naskočí až se plocha zvedne */
.js.intro-played .hero-media img { clip-path: none; animation: none; }
.js.intro-played .hero-copy [data-reveal] { transition-delay: 1.4s; }
.js.intro-played .hero-copy .hero-title[data-reveal] { transition-delay: 1.48s; }
.js.intro-played .hero-copy .hero-lead[data-reveal] { transition-delay: 1.56s; }
.js.intro-played .hero-copy .hero-actions[data-reveal] { transition-delay: 1.64s; }

/* ==========================================================================
   STRÁNKA OCHRANA OSOBNÍCH ÚDAJŮ
   ========================================================================== */
.header-back {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  font-size: .98rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.header-back svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}
.header-back:hover svg { transform: translateX(-4px); }
/* na úzkém telefonu jen „Zpět“ (celý text zůstává pro čtečky) */
@media (max-width: 26.1875em) {   /* 419 px */
  .header-back-more {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* vedle odkazu „Zpět na web“ se tlačítko vejde až od 720 px */
.page-legal .header-cta { display: none; margin-left: 4px; }
@media (min-width: 45em) {   /* 720 px */
  .page-legal .header-cta { display: inline-flex; }
}

.legal { padding-block: clamp(52px, 9vh, 104px) clamp(72px, 11vh, 128px); }
.legal-inner { max-width: 50rem; }
.legal-title {
  margin: 0 0 22px;
  font-size: clamp(min(2.5rem, 11.6vw), 4.6vw + .4rem, 4.8rem);
  font-weight: 780;
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.legal-lead {
  max-width: 44ch;
  margin: 0 0 clamp(40px, 6vh, 64px);
  font-size: clamp(1.12rem, .6vw + .95rem, 1.38rem);
  line-height: 1.45;
  color: var(--ink-2);
}
.legal-section {
  padding: 30px 0 22px;
  border-top: 1px solid var(--line);
}
.legal-section h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  font-size: clamp(1.3rem, .8vw + 1.05rem, 1.75rem);
  font-weight: 760;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.legal-section h2 span {
  flex: none;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--red);
}
.legal-section p,
.legal-section li {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.65;
}
.legal-section p { margin: 0 0 14px; }
.legal-section ul { margin: 0 0 14px; padding-left: 1.2em; }
.legal-section li { margin-bottom: 8px; padding-left: 4px; }
.legal-section li::marker { color: var(--red); }
.legal-section a { color: var(--blue); font-weight: 600; text-underline-offset: 3px; }
.legal-section strong { font-weight: 700; }
.legal-mail { overflow-wrap: anywhere; }
.legal-date {
  margin: 34px 0 0;
  padding-top: 22px;
  font-size: .95rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   Animace při scrollu
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .hero-copy .hero-title[data-reveal] { transition-delay: .08s; }
.js .hero-copy .hero-lead[data-reveal] { transition-delay: .16s; }
.js .hero-copy .hero-actions[data-reveal] { transition-delay: .24s; }
.js .services-grid .service:nth-child(2) { transition-delay: .1s; }
.js .services-grid .service:nth-child(3) { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero-media img { clip-path: none; animation: none; }
  .intro-screen { display: none !important; }
}

/* ==========================================================================
   Tisk
   ========================================================================== */
@media print {
  .site-header { position: static; }
  .intro-screen, .paint-trail-wrap, .menu-toggle, .mobile-menu, .header-cta, .scroll-cue { display: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .js .hero-media img { clip-path: none !important; animation: none !important; }
  .map-anim .map-pin { opacity: 1 !important; }
}