/* ==========================================================================
   HYDROBAU s.r.o. — vizuální styl webu (směr I3)
   Barvy vycházejí z logotypu: #5CC5ED modrá · #52B9AB tyrkys
                               #F29400 oranžová · #E5322D červená
   Písma: Oswald (nadpisy, verzálky) · Barlow (text)
   ========================================================================== */

/* Oswald a Barlow (SIL Open Font License) — uložené u webu, bez volání Google Fonts */
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-latin-ext-400.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;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlow-latin-400.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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-latin-ext-500.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;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlow-latin-500.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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-latin-ext-600.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;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlow-latin-600.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;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-latin-ext-700.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;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlow-latin-700.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;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oswald-latin-ext-var.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;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/oswald-latin-var.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;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-latin-ext-var.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;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/oswald-latin-var.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;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/oswald-latin-ext-var.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;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/oswald-latin-var.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;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-latin-ext-var.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;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/oswald-latin-var.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 {
  /* tmavé pásy */
  --petrol:      #10303F;
  --dusk-top:    #2A6F8E;   /* soumrak: horní okraj úvodu a hlaviček, hlavička webu */
  --dusk-mid:    #1B4F68;
  --dusk-low:    #123C4E;
  --petrol-deep: #0B222D;
  --petrol-ink:  #E8F1F5;
  --petrol-mut:  #93B3C1;
  --petrol-line: rgba(232, 241, 245, .18);

  /* světlé plochy */
  --paper:   #F4F7F9;
  --paper-2: #E7EFF3;
  --surface: #FFFFFF;
  --ink:     #10262F;
  --ink-2:   #35525E;
  --muted:   #4A6673;
  --muted-2: #5B7683;
  --line:    #D3E0E6;
  --line-2:  #C6D8E0;

  /* akcenty */
  --sky:      #0E86B8;
  --sky-lite: #5CC5ED;
  --sky-pale: #7FD3F0;
  --orange:   #F29400;
  --orange-d: #C06A00;
  --amber:    #F5A82B;
  --teal:     #52B9AB;
  --red:      #E5322D;
  --coral:    #F2766E;
  --teal-d:   #1F6F66;
  --coral-d:  #B23B33;
  --sky-d:    #0A6A93;
  --orange-dd: #9A5500;
  --green:    #5DAA6A;
  --green-d:  #2E7A46;

  /* čtyři části domu = čtyři barvy loga; --accent na tmavé, --accent-ink na světlé plochy */
  --z-roof: var(--sky-lite);
  --z-flat: var(--amber);
  --z-lift: var(--teal);
  --z-base: var(--coral);
  --z-garden: var(--green);
  --accent:     var(--sky-lite);
  --accent-ink: var(--sky-d);

  --f-display: Oswald, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-text:    Barlow, "Helvetica Neue", Arial, sans-serif;

  /* typografická stupnice — Barlow 4 velikosti, Oswald 8 kroků; nic jiného v CSS nepoužívat */
  --fs-sm:      .9375rem;                            /* 15 px — drobný text, poznámky, popisky fotek */
  --fs-base:    1rem;                                /* 16 px — text karet, seznamy, formulář, patička */
  --fs-body:    1.0625rem;                           /* 17 px — běžný text */
  --fs-lead:    clamp(1.125rem, 1.3vw, 1.1875rem);   /* 18–19 px — perex */
  --fs-eyebrow: .8125rem;                            /* 13 px — všechny verzálkové štítky a nadtitulky */
  --fs-ui:      1rem;                                /* tlačítka a šipkové odkazy */
  --fs-h4:      1.0625rem;                           /* nadpis malé karty, FAQ, popisek u modelu */
  --fs-h3:      clamp(1.15rem, 1.5vw, 1.3125rem);    /* nadpis karty */
  --fs-h3-lg:   clamp(1.5rem, 2.6vw, 2.25rem);       /* velká čísla (kroky, karty), počet fotek */
  --fs-case:    clamp(1.375rem, 2.1vw, 1.875rem);    /* nadpis realizace — pod nadpisem sekce */
  --fs-h2:      clamp(1.75rem, 3.2vw, 2.625rem);
  --fs-h1:      clamp(2.1rem, 4.6vw, 3.4rem);
  --fs-hero:    clamp(2.7rem, 4.7vw, 4.2rem);

  --ls-eyebrow: .2em;   /* nadtitulky */
  --ls-caps:    .1em;   /* drobné verzálky: štítky polí, drobečky, počty */
  --ls-btn:     .06em;  /* tlačítka */
  --lh-head:  1.22;     /* verzálky s háčky a kroužky potřebují vzduch */
  --lh-title: 1.3;
  --lh-label: 1.4;
  --lh-text:  1.6;
  --lh-sm:    1.5;

  --bar: 4px;                                        /* barevná linka nahoře na kartách */
  --seq-1: var(--sky-d); --seq-2: var(--teal-d); --seq-3: var(--orange-d); --seq-4: var(--coral-d); --seq-5: var(--petrol);
  --card-pad: clamp(1.4rem, 2.4vw, 1.9rem);
  --gap-head: clamp(1.75rem, 3.2vw, 2.75rem);        /* mezera nadpis sekce → obsah */
  --focus: var(--sky-d);
  --line-ctl: #7A95A2;                               /* okraj polí formuláře (kontrast 3:1) */
  --r-media: 4px;

  --wrap:   1328px;
  --gutter: clamp(1.15rem, 4vw, 3.5rem);

  --shadow: 0 2px 6px rgba(11, 34, 45, .06), 0 20px 44px -24px rgba(11, 34, 45, .30);
}

.theme-roof { --accent: var(--z-roof); --accent-ink: var(--sky-d); }
.theme-flat { --accent: var(--z-flat); --accent-ink: var(--orange-dd); }
.theme-lift { --accent: var(--z-lift); --accent-ink: var(--teal-d); }
.theme-base { --accent: var(--z-base); --accent-ink: var(--coral-d); }
.theme-garden { --accent: var(--z-garden); --accent-ink: var(--green-d); }

/* --- základ -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem; }   /* kotvy nezajedou pod hlavičku */
@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: var(--fs-body);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;   /* hidden by z body udělalo posuvný kontejner a rozbilo lepivou hlavičku */
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--sky-d); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-head);
  letter-spacing: -.004em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}
h3, h4 { font-weight: 600; line-height: var(--lh-title); }
p { margin: 0; }
/* formulářové prvky jinak berou systémové písmo prohlížeče (Arial 13,3 px) */
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
b, strong { font-weight: 600; }

::selection { background: var(--amber); color: var(--petrol); }

:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.night, .topbar, .footer, .lb, .cta { --focus: var(--sky-lite); }
/* programově zaostřené prvky (nadpis po přepnutí stránky) obrys nepotřebují */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* --- layout -------------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.band { padding-block: clamp(3rem, 6.4vw, 5.4rem); }
.band--tight { padding-block: clamp(2.2rem, 4.2vw, 3.4rem); }
.band--paper2 { background: var(--paper-2); border-block: 1px solid var(--line); }
.band--paper2 + .band--paper2 { border-top: 0; padding-top: 0; }
.band:not(.band--paper2):not(.night) + .band:not(.band--paper2):not(.night) { padding-top: 0; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.8rem); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.stack-lg { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 901px) { .two-col > .stack-lg:has(> .figure:only-child) { position: sticky; top: 6.5rem; } }

/* --- typografické prvky -------------------------------------------------- */

.eyebrow {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 1rem;
}
/* linka jen u nadtitulku sekce (label()); podnadpis ve sloupci je .eyebrow--sub bez linky */
.eyebrow--rule { display: flex; align-items: flex-start; gap: .7rem; }
.eyebrow--rule::before { content: ""; width: 26px; height: 2px; margin-top: .62em; background: var(--red); flex: none; }
.eyebrow--sub { margin-bottom: .85rem; }
* + .eyebrow--sub, * + .note { margin-top: 2rem; }
.two-col > div > .eyebrow--sub:first-child { margin-top: 0; }
.eyebrow--onDark { color: var(--sky-pale); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* hlavička sekce: nadtitulek + h2 (+ perex / tlačítko vpravo) → obsah */
.section-head { margin-bottom: var(--gap-head); }
h2.section-head, .section-head h2 { max-width: 24ch; }
.two-col.section-head { align-items: end; }
.block-title { margin-bottom: 1.2rem; max-width: 22ch; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-text); color: var(--ink-2); max-width: 40em; }

.prose { max-width: 36em; color: var(--ink-2); }
.prose p + p { margin-top: 1rem; }
.prose strong, .prose b { color: var(--ink); }
.prose + .tags { margin-top: 1.4rem; }

.small { font-size: var(--fs-sm); color: var(--muted); }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.7rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-ui);
  line-height: 1.5rem;          /* <a> i <button> stejně vysoké */
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
  min-height: 56px;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.125em; height: 1.125em; flex: none; }
/* telefon jako tlačítko: číslo, ne verzálky — všude stejně (lišta, úvod, výzvy) */
.btn--tel { font-size: 1.15rem; letter-spacing: .02em; text-transform: none; padding-inline: 1.5rem; }
.btn--tel svg { width: 19px; height: 19px; }

.btn--orange {
  background: linear-gradient(180deg, #FFA92A 0%, var(--orange) 100%);
  color: var(--petrol);
  border-color: transparent;
  box-shadow: 0 14px 30px -14px rgba(242, 148, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.btn--orange:hover { background: linear-gradient(180deg, #FFB84D 0%, var(--amber) 100%); }
.btn--dark { background: var(--petrol); color: #FFF; border-color: var(--petrol); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--onDark { background: transparent; color: #FFF; border-color: rgba(127, 211, 240, .5); }
.btn--onDark:hover { border-color: var(--sky-pale); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.btn-row--end { justify-content: flex-end; }
.btn-row--after { margin-top: var(--gap-head); }
@media (max-width: 900px) { .btn-row--end { justify-content: flex-start; } }
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn, .case__btn { width: 100%; justify-content: center; white-space: normal; text-align: center; padding-inline: 1.2rem; }
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-ui);
  letter-spacing: var(--ls-btn);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sky-d);
  white-space: nowrap;
  transition: gap .18s ease;
}
.arrow-link:hover { gap: .95rem; }
.arrow-link svg { width: 1.125em; height: 1.125em; flex: none; }

/* --- hlavička ------------------------------------------------------------ */

/* hlavička jede se stránkou (klient 13. 10. 2026); po odscrollování se zúží a dostane stín */
.topbar { background: var(--dusk-top); position: sticky; top: 0; z-index: 40; transition: box-shadow .25s ease; }
.topbar.is-stuck { box-shadow: 0 14px 34px -16px rgba(5, 20, 27, .65); }
.topbar__stripe { display: flex; height: 6px; }
.topbar__stripe span { flex: 1; }
.topbar__stripe span:nth-child(1) { background: var(--sky-lite); }
.topbar__stripe span:nth-child(2) { background: var(--teal); }
.topbar__stripe span:nth-child(3) { background: var(--orange); }
.topbar__stripe span:nth-child(4) { background: var(--red); }

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-height: 82px;
  padding-block: .6rem;
  transition: min-height .25s ease, padding .25s ease;
}
.topbar.is-stuck .topbar__inner { min-height: 66px; padding-block: .35rem; }

.brand { flex: none; display: flex; align-items: center; text-decoration: none; }
.brand img { height: 56px; width: auto; transition: height .25s ease; }
.topbar.is-stuck .brand img { height: 44px; }
@media (max-width: 560px) { .brand img { height: 44px; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.nav > a {
  display: block;
  padding: .6rem .8rem;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: #E8F1F5;
  position: relative;
  transition: color .16s ease;
}
.nav > a:hover { color: #FFF; }
/* page = právě tato stránka, true = sekce (např. Hydroizolace na Plochých střechách) */
.nav > a[aria-current] { color: #FFF; }
.nav > a[aria-current]::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .28rem;
  height: 2px;
  background: var(--orange);
}

.nav > a.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-left: .7rem;
  padding: .72rem 1.25rem;
  background: var(--orange);
  color: var(--petrol);
  border-radius: 999px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: background .18s ease;
}
.nav > a.nav__phone:hover { background: var(--amber); color: var(--petrol); }
.nav > a.nav__phone::after { display: none; }
.nav > a.nav__phone svg { flex: none; width: 17px; height: 17px; color: var(--petrol); }

.burger {
  display: none;
  margin-left: auto;
  width: 48px; height: 48px;
  border: 1px solid rgba(127, 211, 240, .5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.burger span { display: block; width: 20px; height: 2px; background: var(--petrol-ink); position: relative; transition: background .15s ease; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--petrol-ink);
  transition: transform .22s ease, top .18s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* sedm položek menu + telefon: mezi 1181 a 1400 px kompaktnější menu, pod 1180 px hamburger */
@media (min-width: 1181px) and (max-width: 1400px) {
  .topbar__inner { gap: 1.1rem; }
  .brand img { height: 48px; }
  .nav > a.nav__phone { margin-left: .45rem; }
}
.nav > a { white-space: nowrap; }

/* --- Služby: rozbalovací panel v menu ------------------------------------- */
.navdrop__btn {
  display: inline-flex; align-items: center; gap: .35rem; position: relative;
  padding: .6rem .8rem; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 500 .95rem/1.6 var(--f-display); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: #E8F1F5; transition: color .16s ease;
}
.navdrop__btn svg { width: 15px; height: 15px; flex: none; transition: transform .2s ease; }
.navdrop__btn:hover, .navdrop.is-open .navdrop__btn, .navdrop.is-current .navdrop__btn { color: #FFF; }
.navdrop.is-open .navdrop__btn svg { transform: rotate(180deg); }
.navdrop.is-current .navdrop__btn::after {
  content: ""; position: absolute; left: .8rem; right: calc(.8rem + 20px); bottom: .28rem; height: 2px; background: var(--orange);
}
@media (min-width: 1181px) {
  /* panel visí z dolní hrany hlavičky a končí zarovnaný s telefonem vpravo */
  .topbar__inner { position: relative; }
  .navdrop__btn::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.6rem; }   /* most pro myš k panelu */
  .navdrop__panel {
    position: absolute; top: 100%; right: var(--gutter); z-index: 60; width: min(760px, calc(100% - 2 * var(--gutter)));
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--surface); color: var(--ink);
    border-top: var(--bar) solid var(--orange); box-shadow: 0 34px 64px -24px rgba(5, 20, 27, .55);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .navdrop.is-open .navdrop__panel { opacity: 1; visibility: visible; transform: none; }
  .navdrop__col { display: flex; flex-direction: column; gap: .2rem; padding: 1rem .9rem 1.1rem; }
  .navdrop__col + .navdrop__col { border-left: 1px solid var(--line); }
  .navdrop__item {
    --zone: var(--sky-d);
    display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: .1rem .95rem;
    padding: .6rem .7rem; border-radius: 6px; text-decoration: none; color: inherit; transition: background .15s ease;
  }
  .navdrop__thumb {
    grid-row: 1 / span 2; width: 56px; height: 56px; object-fit: cover; border-radius: 4px;
    border-bottom: 3px solid var(--zone); background: var(--paper-2);
  }
  .navdrop__item strong { align-self: end; font: 600 var(--fs-h4)/var(--lh-title) var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); transition: color .15s ease; }
  .navdrop__desc { align-self: start; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
  .navdrop__item:hover, .navdrop__item[aria-current] { background: var(--paper); }
  .navdrop__item:hover strong, .navdrop__item[aria-current] strong { color: var(--zone); }
  .navdrop__subs { margin: .15rem .7rem 0 calc(.7rem + 56px + .95rem); }
  .navdrop__sub {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .62rem .1rem;
    border-top: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); text-decoration: none;
    transition: color .15s ease;
  }
  .navdrop__sub svg { width: 15px; height: 15px; flex: none; opacity: .35; transition: opacity .15s ease, transform .15s ease; }
  .navdrop__sub:hover, .navdrop__sub[aria-current] { color: var(--sky-d); }
  .navdrop__sub:hover svg, .navdrop__sub[aria-current] svg { opacity: 1; transform: translateX(3px); }
  .navdrop__sub[aria-current] { font-weight: 600; }
  .navdrop__foot {
    grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1.6rem;
    background: var(--paper); border-top: 1px solid var(--line);
  }
  .navdrop__foot a {
    display: inline-flex; align-items: center; gap: .5rem; font: 600 var(--fs-eyebrow)/1.4 var(--f-display);
    letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--sky-d); text-decoration: none;
  }
  .navdrop__foot a svg { width: 15px; height: 15px; flex: none; transition: transform .15s ease; }
  .navdrop__foot a:hover { color: var(--ink); }
  .navdrop__foot a:hover svg { transform: translateX(3px); }
  .navdrop__item--roof { --zone: var(--sky-d); }
  .navdrop__item--flat { --zone: var(--orange-d); }
  .navdrop__item--lift { --zone: var(--teal-d); }
  .navdrop__item--garden { --zone: var(--green-d); }
}
@media (prefers-reduced-motion: reduce) { .navdrop__panel, .navdrop__btn svg, .topbar, .topbar__inner, .brand img { transition: none; } }

.topbar__tel { display: none; }
@media (max-width: 1180px) {
  .burger { display: inline-flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--dusk-top);
    border-top: 1px solid var(--petrol-line);
    padding: .4rem var(--gutter) 1.4rem;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav > a { padding: .95rem .2rem; border-bottom: 1px solid var(--petrol-line); font-size: 1.06rem; }
  .nav > a[aria-current]::after { left: .2rem; right: auto; width: 26px; bottom: .55rem; }
  .nav > a.nav__phone { margin: 1.1rem 0 0; justify-content: center; padding: 1rem; border-bottom: 0; }
  .navdrop__btn { display: none; }
  .navdrop__panel { display: block; padding: .2rem 0 0; }
  .navdrop__col { display: flex; flex-direction: column; }
  .navdrop__thumb, .navdrop__sub svg, .navdrop__foot { display: none; }
  .navdrop__item { --zone: var(--sky-d); display: flex; flex-direction: column; gap: .15rem; padding: .85rem .2rem .85rem .9rem;
    border-left: 3px solid var(--zone); border-bottom: 1px solid var(--petrol-line); text-decoration: none; }
  .navdrop__item:hover, .navdrop__item[aria-current] { background: rgba(255, 255, 255, .06); }
  .navdrop__item strong { font: 500 1.06rem/var(--lh-title) var(--f-display); letter-spacing: var(--ls-caps); text-transform: uppercase; color: #FFF; }
  .navdrop__desc { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--petrol-mut); }
  .navdrop__item--roof { --zone: var(--z-roof); } .navdrop__item--flat { --zone: var(--z-flat); }
  .navdrop__item--lift { --zone: var(--z-lift); } .navdrop__item--garden { --zone: var(--z-garden); }
  .navdrop__sub { display: block; margin-left: .9rem; padding: .7rem .2rem .7rem 1rem; border-left: 1px solid var(--petrol-line);
    border-bottom: 1px solid var(--petrol-line); color: rgba(232, 241, 245, .86); text-decoration: none; }
  .navdrop__sub:hover, .navdrop__sub[aria-current] { color: #FFF; border-left-color: var(--z-roof); }
  /* telefon zůstává vidět i se zavřeným menu */
  .topbar__tel { display: inline-flex; align-items: center; gap: .55rem; margin-left: auto; min-height: 48px; padding: 0 1.15rem;
    border-radius: 999px; background: var(--orange); color: var(--petrol); text-decoration: none;
    font: 600 1.15rem/1 var(--f-display); letter-spacing: .02em; }
  .topbar__tel:hover { background: var(--amber); }
  .topbar__tel svg { flex: none; width: 17px; height: 17px; }
  .topbar__tel + .burger { margin-left: .6rem; }
  .brand img { height: 48px; }
}
@media (max-width: 560px) {
  .topbar__tel { width: 48px; padding: 0; justify-content: center; }
  .topbar__tel span { display: none; }
  .brand img { height: 44px; }
}

/* --- úvod: „Známe váš dům" ---------------------------------------------- */

.hero2__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 646px;
  gap: 1.5rem;
  align-items: center;
  padding-block: 1.6rem 1.1rem;
}

.hero2__copy { display: flex; flex-direction: column; gap: 1.45rem; max-width: 600px; }


.hero2 h1 {
  font-size: var(--fs-hero);
  line-height: 1.2;
  letter-spacing: -.004em;
  color: #FFF;
  text-shadow: 0 2px 24px rgba(5, 20, 27, .5);
}
.hero2 h1 em { font-style: normal; color: var(--amber); display: inline-block; text-wrap: balance; }

.hero2__lead { max-width: 30em; font-size: var(--fs-lead); line-height: var(--lh-text); color: rgba(240, 247, 250, .92); }

.hero2 .btn--onDark { background: rgba(232, 241, 245, .04); }
.hero2 .btn--onDark svg { color: var(--amber); }

.hero2__trust { display: flex; flex-direction: column; gap: .3rem; font-size: var(--fs-sm); font-weight: 500; color: rgba(232, 241, 245, .72); }
.hero2__trust span { display: inline-flex; align-items: center; gap: .65rem; }
.hero2__trust span::before { content: ""; flex: none; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* dům a tři karty */
.hero2__scene {
  display: grid;
  grid-template-columns: 340px 262px;
  gap: 44px;
  align-items: start;
  justify-content: end;
}
.house-col { width: 340px; }
.house { width: 340px; height: 720px; }
.house svg { display: block; width: 100%; height: 100%; overflow: visible; }
.house__hint { margin: .6rem 0 0; font-size: var(--fs-sm); text-align: center; color: rgba(232, 241, 245, .55); }

/* klikací zóny v ilustraci */
.hz { cursor: pointer; outline: none; }
.hz__hl { opacity: 0; transition: opacity .18s ease; }
.hz__hl--on { opacity: 1; }
.hz:hover .hz__hl, .hz:focus-visible .hz__hl, .hz.is-hot .hz__hl { opacity: 1; }

.zones { position: relative; width: 262px; height: 720px; }
.zone {
  --zone: var(--sky-lite);
  position: absolute; left: 0; width: 262px;
  display: flex; align-items: center; gap: .85rem;
  padding: .95rem 1.1rem;
  background: rgba(14, 44, 58, .74);
  border: 1px solid rgba(232, 241, 245, .16);
  border-left: 4px solid var(--zone);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 22px 40px -26px rgba(0, 0, 0, .7);
  color: inherit; text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.zone::before {
  content: ""; position: absolute; top: 50%; right: calc(100% + 4px); width: 40px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--zone)); opacity: .45; transition: opacity .18s ease;
}
.zone:hover, .zone.is-hot { transform: translateX(5px); background: rgba(11, 34, 45, .86); border-color: rgba(232, 241, 245, .26); border-left-color: var(--zone); }
.zone:hover::before, .zone.is-hot::before { opacity: 1; }
.zone--roof { top: 2px; }
.zone--flat { --zone: var(--amber); top: 286px; }
.zone--lift { --zone: var(--teal);  top: 452px; }
.zone--base { --zone: var(--coral); top: auto; bottom: 0; }
.zone--garden { --zone: var(--green); top: 548px; }
.zone__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.zone small {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--zone);
}
.zone strong { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-title); text-transform: uppercase; color: #FFF; }
.zone__txt > span { font-size: var(--fs-sm); line-height: var(--lh-sm); color: rgba(232, 241, 245, .72); }
.zone > svg { width: 24px; height: 24px; flex: none; margin-left: auto; color: var(--zone); }

@media (max-width: 1180px) {
  .hero2__inner { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero2__copy { max-width: 640px; }
  .hero2__scene { justify-content: center; }
}
@media (max-width: 720px) {
  .hero2__inner { gap: 2rem; padding-block: 1.8rem 2rem; }
  .hero2__scene { grid-template-columns: 1fr; gap: 1.2rem; justify-items: center; }
  .house-col { width: min(300px, 78vw); }
  .house { width: 100%; height: auto; aspect-ratio: 340 / 720; }
  .zones { position: static; width: 100%; height: auto; display: flex; flex-direction: column; gap: .7rem; }
  .zone { position: static; width: 100%; }
  .zone::before { display: none; }
  .zone:hover, .zone.is-hot { transform: none; }
}

/* --- 3D varianta úvodu (index-3d.html) ----------------------------------- */

.hero3d__inner { position: relative; min-height: 760px; }
.hero3d__stage {
  position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw;
  z-index: 0; cursor: grab; touch-action: pan-y pinch-zoom;
  -webkit-user-select: none; user-select: none;
}
.hero3d__stage.is-dragging { cursor: grabbing; }
.hero3d__stage canvas { display: block; width: 100%; height: 100%; }
.hero3d:not(.is-2d) .hero3d__inner { grid-template-columns: minmax(0, 1fr) 262px; }
.hero3d__left, .hero3d__scene { position: relative; z-index: 1; }
/* prázdné části sloupců nesmí clonit klikání na dům; klikací zůstává jen text, HUD a karty */
.hero3d:not(.is-2d) .hero3d__left, .hero3d:not(.is-2d) .hero3d__scene { pointer-events: none; }
.hero3d:not(.is-2d) .hero3d__copy, .hero3d:not(.is-2d) .hero3d__hud, .hero3d:not(.is-2d) .zones { pointer-events: auto; }
.hero3d__left { align-self: center; justify-self: start; width: 100%; max-width: 560px; }
.hero3d__copy { max-width: 560px; min-width: 0; transition: opacity .35s ease, transform .35s ease, visibility .35s; }
.hero3d.is-zoomed .hero3d__copy { opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none; }

.hero3d__hud {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem;
  max-width: 520px; opacity: 0; transform: translateY(12px); transition: opacity .35s ease .1s, transform .35s ease .1s;
}
.hero3d__hud:not([hidden]) { opacity: 1; transform: none; }
.hero3d__hud h2 { color: #FFF; font-size: var(--fs-h2); line-height: var(--lh-head); text-shadow: 0 2px 24px rgba(5, 20, 27, .5); }
.hero3d__hud .eyebrow { color: var(--hud, var(--sky-pale)); margin-bottom: 0; }

/* karty: ve 3D režimu rovnoměrně pod sebou, bez spojnic k domu */
.hero3d:not(.is-2d) .hero3d__fallback { display: none; }
.hero3d:not(.is-2d) .hero3d__scene { grid-template-columns: 262px; justify-content: end; align-items: center; min-height: 760px; }
.hero3d:not(.is-2d) .zones { position: static; height: auto; display: flex; flex-direction: column; gap: .9rem; }
.hero3d:not(.is-2d) .zone { position: static; width: 262px; }
.hero3d:not(.is-2d) .zone::before { display: none; }
.hero3d:not(.hero3d--den).is-zoomed .zone:not(.is-active) { opacity: .55; }
.zone.is-active { transform: translateX(5px); background: rgba(11, 34, 45, .9); border-color: rgba(232, 241, 245, .3); border-left-color: var(--zone); opacity: 1; }
.hero3d.is-2d .hero3d__stage, .hero3d.is-2d .hero3d__hint, .hero3d.is-2d .hero3d__tip { display: none; }
.hero3d.is-2d .hero3d__copy { max-width: 600px; }
.hero3d.is-2d .hero3d__inner { min-height: 0; }

.hero3d__tip {
  position: absolute; z-index: 3; pointer-events: none; white-space: nowrap;
  padding: .45rem .75rem; background: rgba(11, 34, 45, .92); border: 1px solid rgba(232, 241, 245, .22);
  border-left: 3px solid var(--tip, var(--sky-lite));
  font-family: var(--f-display); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: #FFF;
}
.hero3d__hint {
  position: absolute; z-index: 2; left: 50%; bottom: .9rem; transform: translateX(-50%); margin: 0;
  font-size: var(--fs-sm); color: rgba(232, 241, 245, .55); white-space: nowrap;
}
.hero3d__switch {
  position: absolute; z-index: 2; right: var(--gutter); bottom: .8rem;
  font-family: var(--f-display); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: rgba(232, 241, 245, .6); text-decoration: none; padding: .35rem .7rem; border: 1px solid rgba(232, 241, 245, .22);
}
.hero3d__switch:hover { color: #FFF; border-color: rgba(232, 241, 245, .5); }
/* tip, nápověda a přepínač jsou přímé děti sekce .night — obecné `.night > *` by je vrátilo do toku */
.hero3d > .hero3d__tip { position: absolute; z-index: 3; }
.hero3d__inner > .hero3d__hint, .hero3d > .hero3d__switch { position: absolute; z-index: 2; }

@media (max-width: 1180px) {
  .hero3d__inner, .hero3d:not(.is-2d) .hero3d__inner { min-height: 0; grid-template-columns: 1fr; gap: 1.6rem; }
  .hero3d__stage { position: relative; left: auto; width: auto; height: min(70vh, 560px); height: min(70svh, 560px); min-height: 400px; margin-inline: calc(var(--gutter) * -1); order: 2; }
  /* stack: text → dům → panel zóny → karty; text při přiblížení zůstává, panel se objeví hned pod domem */
  .hero3d__left { display: contents; }
  .hero3d__copy { order: 1; }
  .hero3d__hud { position: static; max-width: none; }
  .hero3d.is-zoomed .hero3d__copy { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .hero3d:not(.is-2d) .hero3d__scene { grid-template-columns: 1fr; min-height: 0; justify-content: stretch; }
  .hero3d:not(.is-2d) .zone { width: 100%; }
  .hero3d:not(.is-2d) .zones { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
  .hero3d:not(.is-2d) .zone:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hero3d__inner > .hero3d__hint { position: static; transform: none; left: auto; text-align: center; white-space: normal; margin: -.6rem 0 0; order: 3; }
  .hero3d__hud { order: 4; }
  .hero3d__scene { order: 5; }
  .hero3d > .hero3d__switch { position: static; justify-self: start; margin-top: .5rem; display: inline-block; }
}

/* --- návrh: denní řez domem (index-den.html) ---------------------------- */

.hero3d--den { color: var(--ink); background: linear-gradient(180deg, #F6F8F9 0%, #EAF0F2 100%); }
.hero3d--den::before, .hero3d--den::after { display: none; }
.hero3d--den .hero2__eyebrow { color: var(--sky-d); }
.hero3d--den h1 { color: var(--petrol); text-shadow: none; }
.hero3d--den h1 em { color: var(--orange-d); }
.hero3d--den .hero2__lead { color: var(--ink-2); }
.hero3d--den .btn--onDark { color: var(--petrol); border-color: var(--line-2); background: #FFF; }
.hero3d--den .btn--onDark svg { color: var(--orange-d); }
.hero3d--den .hero2__trust { color: var(--muted); }
.hero3d--den .hero2__trust span::before { border-color: var(--teal-d); }
.hero3d--den .hero3d__hint { color: var(--muted); }
.hero3d--den .hero3d__hud h2 { color: var(--petrol); text-shadow: none; }
.hero3d--den .hero3d__hud .eyebrow { color: var(--hud, var(--sky-d)); }
.hero3d--den .hero3d__hud .hero2__lead { color: var(--ink-2); }
/* HUD ve zoomu dostane světlý podklad, aby text držel i nad zeminou / fasádou */
.hero3d--den .hero3d__hud {
  inset: auto 0; top: 50%; max-width: 540px; padding: 1.5rem 1.7rem 1.6rem; border-radius: 6px;
  background: rgba(246, 248, 249, .86); border-left: 3px solid var(--hud, var(--sky-d));
  box-shadow: 0 18px 44px -28px rgba(11, 34, 45, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(calc(-50% + 12px));
}
.hero3d--den .hero3d__hud:not([hidden]) { transform: translateY(-50%); }
.hero3d--den .hero3d__tip { background: #FFF; color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow); }
/* karty na desktopu nahrazují popisky kolem modelu (kreslí je modul); na mobilu karty zůstávají */
.hero3d--den .zone { background: #FFF; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); }
.hero3d--den .zone strong { color: var(--petrol); }
.hero3d--den .zone__txt > span { color: var(--muted); }
.hero3d--den .zone:hover, .hero3d--den .zone.is-hot, .hero3d--den .zone.is-active { background: #FFF; border-color: var(--line-2); }
@media (min-width: 1181px) {
  .hero3d--den:not(.is-2d) .hero3d__inner { grid-template-columns: minmax(0, 1fr) 0px; }
  .hero3d--den:not(.is-2d) .hero3d__scene { position: absolute; width: 1px; height: 1px; overflow: hidden; visibility: hidden; }   /* karty na desktopu nahrazují popisky — pryč i z pořadí Tab */
  .hero3d--den .hero3d__left { max-width: 520px; }
  .hero3d--den .hero3d__copy .btn-row { display: grid; grid-template-columns: max-content; }
  .hero3d--den .hero3d__copy .btn-row .btn { justify-content: center; }
  .hero3d--den:not(.is-2d) .hero3d__inner { padding-bottom: 2.6rem; }
  .hero3d--den .hero3d__inner > .hero3d__hint { left: var(--gutter); transform: none; }   /* nápověda pod textem, roh vlevo dole patří kartě Spodní stavby */
}
@media (max-width: 720px) {
  .hero3d--den .hero3d__hud { padding: 1.1rem 1.2rem 1.2rem; }
  .hero3d:not(.is-2d) .zones { grid-template-columns: 1fr; }
}
/* karty zón na světlém úvodu: nadtitulek v tmavším odstínu barvy zóny (světlý na bílé nejde přečíst) */
.hero3d--den .zone--roof small { color: var(--sky-d); }
.hero3d--den .zone--flat small { color: var(--orange-d); }
.hero3d--den .zone--lift small { color: var(--teal-d); }
.hero3d--den .zone--base small { color: var(--coral-d); }
.hero3d--den .zone--garden small { color: var(--green-d); }
/* řádek se skladbou konstrukce v panelu (plní modul; prázdný se nezobrazí) */
.hero3d__layers { margin: -.4rem 0 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.hero3d__layers:empty { display: none; }
.hero3d__layers::before { content: "Skladba: "; font-weight: 600; color: var(--ink-2); }
.hero3d__sub { margin-top: -.2rem; color: var(--teal-d); }
.hero3d__sub[hidden] { display: none; }
/* kreslený dům (bez WebGL) na světlé stránce dostane vlastní tmavou kartu */
.hero3d--den .house__hint { color: var(--muted); }
.hero3d--den.is-2d .hero3d__fallback { padding: 1.2rem 1.2rem .9rem; border-radius: 8px; background: linear-gradient(180deg, #14384A, #0E2C3A); box-shadow: var(--shadow); }
.hero3d--den.is-2d .hero3d__fallback .house__hint { color: rgba(232, 241, 245, .7); }
/* mobil/tablet: panel světlé varianty v toku stránky, bez posunu přes model (ruší translateY z desktopového pravidla výše) */
@media (max-width: 1180px) {
  .hero3d--den .hero3d__hud, .hero3d--den .hero3d__hud:not([hidden]) { top: auto; inset: auto; transform: none; max-width: none; }
}
/* popisky kolem modelu (tvoří je modul: .callout s data-zone, SVG spojnice .callout-lines) */
.callout-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.callout {
  position: absolute; z-index: 3; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; gap: .1rem; min-width: 150px; max-width: 220px;
  padding: .55rem .8rem .6rem; background: rgba(255, 255, 255, .92); border: 1px solid var(--line);
  border-left: 3px solid var(--zone, var(--sky-d)); box-shadow: var(--shadow); text-decoration: none; color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.callout:hover, .callout.is-hot, .callout.is-active { transform: translate(-50%, -50%) scale(1.03); box-shadow: 0 8px 30px -10px rgba(11, 34, 45, .35); }
.callout strong { font-family: var(--f-display); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-title); text-transform: uppercase; color: var(--petrol); }
.callout span { font-size: var(--fs-eyebrow); line-height: 1.35; color: var(--muted); }
.callout--roof { --zone: var(--sky-d); } .callout--flat { --zone: var(--orange-d); } .callout--lift { --zone: var(--teal-d); } .callout--base { --zone: var(--coral-d); } .callout--garden { --zone: var(--green-d); }
.callout-dot { fill: #FFF; stroke: var(--zone, var(--sky-d)); stroke-width: 2; }
.callout-line { stroke: rgba(16, 48, 63, .35); stroke-width: 1.2; fill: none; }
@media (max-width: 1180px) { .callout, .callout-lines { display: none; } }

/* --- čtyři sliby --------------------------------------------------------- */

.promises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.25rem);
}
@media (max-width: 980px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .promises { grid-template-columns: 1fr; } }

.promise { display: flex; flex-direction: column; gap: .6rem; }
.promise svg { width: 28px; height: 28px; color: var(--seq-1); flex: none; }
.promise:nth-child(2) svg { color: var(--seq-2); }
.promise:nth-child(3) svg { color: var(--seq-3); }
.promise:nth-child(4) svg { color: var(--seq-4); }
.promise p, .cell p, .steps p { color: var(--ink-2); font-size: var(--fs-base); line-height: var(--lh-text); }

/* --- karty --------------------------------------------------------------- */

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--side { grid-template-columns: 1fr; }
@media (max-width: 760px) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .grid--2 { grid-template-columns: 1fr; } }
@media (min-width: 621px) and (max-width: 900px) { .grid--side { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cell {
  --cell-pad: var(--card-pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: var(--bar) solid var(--accent-ink);
  padding: var(--cell-pad);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
a.cell:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.cell--roof { --accent-ink: var(--sky-d); }
.cell--lift { --accent-ink: var(--teal-d); }
.cell--base { --accent-ink: var(--coral-d); }
.cell__photo { margin: calc(var(--cell-pad) * -1) calc(var(--cell-pad) * -1) .5rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.cell__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
a.cell:hover .cell__photo img, a.cell:focus-visible .cell__photo img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .cell__photo img { transition: none; } }
.cell svg.ico, .icon-mark { width: 28px; height: 28px; flex: none; color: var(--accent-ink); }
.icon-mark--jadro { color: var(--orange-d); }
/* číslo v textové kartě (Kdy je čas volat, Typické zadání, Jak pracujeme) — jako čísla kroků na úvodu */
.cell__n { font: 700 var(--fs-h3-lg)/1 var(--f-display); color: var(--accent-ink); opacity: .55; font-variant-numeric: tabular-nums; margin-bottom: .1rem; }
.cell .arrow-link { margin-top: auto; padding-top: .4rem; }

/* --- kroky --------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.2rem, 2.4vw, 1.9rem); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps--4 { grid-template-columns: 1fr; } }

.steps--4 > li { --step: var(--seq-1); border-top: var(--bar) solid var(--step); padding-top: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.steps--4 > li:nth-child(2) { --step: var(--seq-2); }
.steps--4 > li:nth-child(3) { --step: var(--seq-3); }
.steps--4 > li:nth-child(4) { --step: var(--seq-4); }
.steps__n { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3-lg); line-height: 1; color: var(--step, #B5CBD6); opacity: .55; font-variant-numeric: tabular-nums; }
.steps__meta { display: block; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent-ink); }
.steps--4 .steps__meta { margin-top: auto; padding-top: .3rem; }

.steps--list { display: block; }
.steps--list > li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: clamp(.9rem, 2.4vw, 2rem);
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.steps--list > li:last-child { border-bottom: 1px solid var(--line); }
.steps--list > li > div { display: flex; flex-direction: column; gap: .45rem; }
.steps--list p { max-width: 70ch; }
.steps--list .steps__n { color: var(--accent-ink); }
@media (max-width: 620px) { .steps--list > li { grid-template-columns: 1fr; gap: .55rem; padding: 1.3rem 0; } }

/* --- realizace: dlaždice, soubory, karty, skládanka, zeď, prohlížeč ----------- */

/* barva druhu prací (tečka, štítky, aktivní filtr) */
[data-cat="strechy"]  { --cat: var(--sky-d);     --cat-l: var(--z-roof); }
[data-cat="spodni"]   { --cat: var(--coral-d);   --cat-l: var(--z-base); }
[data-cat="sachty"]   { --cat: var(--teal-d);    --cat-l: var(--z-lift); }
[data-cat="jadra"]    { --cat: var(--orange-dd); --cat-l: var(--z-flat); }
[data-cat="interier"] { --cat: var(--teal-d);    --cat-l: var(--z-lift); }
[data-cat="zahrady"]  { --cat: var(--green-d);   --cat-l: var(--z-garden); }

/* dlaždice fotografie */
.ph {
  position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  overflow: hidden; isolation: isolate; cursor: zoom-in; border-radius: 4px;
  background: var(--paper-2); color: #FFF; text-align: left; font: inherit;
}
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 22, 29, 0) 42%, rgba(8, 22, 29, .74) 100%);
  opacity: 0; transition: opacity .35s ease;
}
.ph:hover img, .ph:focus-visible img { transform: scale(1.045); }
.ph:hover::after, .ph:focus-visible::after { opacity: 1; }
.ph:focus-visible { outline: 3px solid var(--cat, var(--focus)); outline-offset: 3px; }
.ph__cap {
  position: absolute; left: .95rem; right: .95rem; bottom: .85rem; z-index: 1;
  font-size: var(--fs-sm); line-height: 1.4; text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.ph:hover .ph__cap, .ph:focus-visible .ph__cap { opacity: 1; transform: none; }
.ph__phase {
  position: absolute; top: .8rem; left: .8rem; z-index: 1;
  padding: .32rem .7rem; border-radius: 99px;
  font-family: var(--f-display); font-weight: 600; font-size: var(--fs-eyebrow); line-height: 1.2; letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: #FFF; background: rgba(8, 22, 29, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ph__phase--behem { background: rgba(154, 85, 0, .88); }
.ph__phase--po { background: rgba(31, 111, 102, .9); }
.ph__more {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(8, 22, 29, .52); font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-h3-lg); letter-spacing: .02em; transition: background .3s ease;
}
.ph:hover .ph__more { background: rgba(8, 22, 29, .66); }

/* soubor realizací: média + text, střídavě vlevo a vpravo */
.cases { display: flex; flex-direction: column; gap: clamp(3.2rem, 6vw, 5.6rem); }
.case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.6rem, 4vw, 4.2rem); align-items: center; }
.case--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.case--flip .case__media { order: 2; }
.case[hidden] { display: none; }
.case__mosaic { display: grid; gap: .9rem; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 16 / 10.5; }
.case__mosaic .ph--cover { grid-row: 1 / 3; }
.case__mosaic--4 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); }
.case__mosaic--4 .ph--cover { grid-row: 1 / 4; }
.case__mosaic--3 { grid-template-columns: 2fr 1fr; }
.case__mosaic--2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.case__mosaic--2 .ph--cover { grid-row: auto; }
.case__phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.case__phases .ph { aspect-ratio: 3 / 4; height: auto; }
.case__eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin: 0 0 .95rem;
  font-family: var(--f-display); font-weight: 500; font-size: var(--fs-eyebrow); line-height: var(--lh-label); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--cat, var(--sky-d));
}
.case__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cat, var(--sky)); }
.case__count { color: var(--muted); letter-spacing: var(--ls-caps); white-space: nowrap; }
.case__count::before { content: "·"; margin-right: .55rem; color: var(--line-2); }
.case__title { font-size: var(--fs-case); line-height: var(--lh-head); margin: 0 0 1rem; }
.case__lead { color: var(--ink-2); font-size: var(--fs-body); line-height: var(--lh-text); margin: 0 0 1.35rem; max-width: 52ch; }
.case__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.7rem; padding: 0; }
.case__note { margin: -.7rem 0 1.5rem; font-size: var(--fs-sm); color: var(--muted); }
.case__btn { cursor: pointer; }
@media (max-width: 900px) {
  .case { grid-template-columns: 1fr; }
  .case--flip .case__media { order: 0; }
}
@media (max-width: 560px) {
  .case__mosaic, .case__mosaic--3, .case__mosaic--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; gap: .45rem; }
  .case__mosaic .ph--cover { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .case__mosaic .ph:not(.ph--cover) { aspect-ratio: 1; }
  .case__mosaic--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case__mosaic--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__mosaic--3 .ph:not(.ph--cover) { aspect-ratio: 4 / 3; }
  .case__mosaic--2 .ph:not(.ph--cover) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .case__phases { gap: .45rem; }
  .ph__phase { top: .45rem; left: .45rem; padding: .25rem .55rem; }
  .case__eyebrow { row-gap: .15rem; }
  .case__count { flex-basis: 100%; padding-left: calc(9px + .55rem); }
  .case__count::before { content: none; }
}

/* kompaktní karty souborů (rozcestník) */
.scards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.scard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-top: var(--bar) solid var(--cat, var(--accent-ink)); }
.scard__img { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; aspect-ratio: 16 / 9; cursor: zoom-in; background: var(--paper-2); }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.scard__img:hover img, .scard__img:focus-visible img { transform: scale(1.045); }
.scard__img:focus-visible { outline: 3px solid var(--cat, var(--focus)); outline-offset: -3px; }
.scard__count {
  position: absolute; right: .7rem; bottom: .7rem; display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .65rem; border-radius: 99px; background: rgba(8, 22, 29, .66); color: #FFF;
  font-family: var(--f-display); font-weight: 500; font-size: var(--fs-eyebrow); line-height: 1; letter-spacing: var(--ls-caps); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.scard__count svg { width: 15px; height: 15px; }
.scard__body { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: var(--card-pad); }
.scard__body .case__eyebrow { margin: 0; }
.scard h3 { margin: 0; }
.scard__body .arrow-link { margin-top: auto; padding-top: .4rem; }
@media (max-width: 940px) { .scards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .scards { grid-template-columns: 1fr; gap: .9rem; }
  .scard { display: grid; grid-template-columns: 38% minmax(0, 1fr); }
  .scard__img { aspect-ratio: auto; height: auto; min-height: 128px; }
  .scard__img img { position: absolute; inset: 0; }
  .scard__body { padding: 1rem 1.1rem; gap: .4rem; }
}

/* úvod: skládanka čtyř realizací */
.bento { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: .9rem; height: clamp(440px, 46vw, 640px); }
.bento__item {
  position: relative; display: block; padding: 0; border: 0; overflow: hidden; isolation: isolate;
  border-radius: var(--r-media); cursor: zoom-in; text-align: left; background: var(--paper-2); color: #FFF;
}
.bento__item--big { grid-row: 1 / 3; }
.bento__item:nth-child(4) { grid-column: 2 / 4; }
.bento__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.bento__item::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(8, 22, 29, 0) 38%, rgba(8, 22, 29, .78) 100%); transition: opacity .35s ease; }
.bento__item:hover img, .bento__item:focus-visible img { transform: scale(1.04); }
.bento__item:focus-visible { outline: 3px solid var(--cat, var(--sky)); outline-offset: 3px; }
.bento__txt { position: absolute; left: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem); bottom: clamp(.9rem, 2vw, 1.35rem); z-index: 1; display: flex; flex-direction: column; gap: .4rem; }
.case__eyebrow--light { color: #FFF; margin: 0; }
.case__eyebrow--light .case__dot { background: var(--cat-l, #FFF); }
.bento__title { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; line-height: var(--lh-title); font-size: var(--fs-h3); text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .3); }
.bento__item--big .bento__title { font-size: var(--fs-case); line-height: var(--lh-head); }
.bento__meta { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-sm); opacity: .9; }
.bento__meta svg { width: 16px; height: 16px; }
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  .bento__item { aspect-ratio: 4 / 3; }
  .bento__item--big { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 11; }
  .bento__item:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) { .bento { grid-template-columns: 1fr; } .bento__item, .bento__item--big, .bento__item:nth-child(4) { grid-column: auto; aspect-ratio: 4 / 3; } .bento__item--big .bento__title { font-size: var(--fs-h3); } }

/* zeď fotografií v přirozeném poměru stran */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.wall .ph { aspect-ratio: 4 / 3; height: auto; }
.wall .ph img { height: 100%; }
@media (max-width: 980px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wall { gap: .6rem; } .wall .ph:nth-child(n+9) { display: none; } }

/* stránka Realizace: souhrn a filtr */
.ref-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
  margin-bottom: clamp(2.4rem, 5vw, 4rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.ref-stats { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--muted); }
.ref-stat { white-space: nowrap; }
.ref-stats b { margin-right: .3rem; font-size: var(--fs-h3-lg); line-height: 1; font-weight: 600; letter-spacing: 0; color: var(--petrol); }
@media (max-width: 560px) { .ref-stats i { display: none; } }
.ref-stats i { font-style: normal; color: var(--line-2); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 1px solid var(--line-2); border-radius: 99px;
  min-height: 40px; background: var(--surface); color: var(--ink-2); font: 500 var(--fs-sm)/1.2 var(--f-text); cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.chip span { font-size: 1em; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .chip { min-height: 44px; padding-inline: 1.05rem; } .chips { gap: .5rem; } }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--cat, var(--petrol)); border-color: var(--cat, var(--petrol)); color: #FFF; }
.chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .78); }

/* prohlížeč fotografií */
.lb { position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column; background: #060F14; color: #FFF; }
.lb.is-open { display: flex; animation: lbIn .25s ease; }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem clamp(1rem, 3vw, 2rem); }
.lb__meta { display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
.lb__set { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--f-display); font-weight: 600; font-size: var(--fs-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.lb__count { margin: 0; flex: none; font-size: var(--fs-sm); color: rgba(232, 241, 245, .6); font-variant-numeric: tabular-nums; }
.lb__close, .lb__nav {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(232, 241, 245, .26); background: rgba(255, 255, 255, .05); color: #FFF; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.lb__close:hover, .lb__nav:hover { background: rgba(255, 255, 255, .13); border-color: rgba(232, 241, 245, .55); }
.lb__close svg, .lb__nav svg { width: 22px; height: 22px; }
.lb__stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; gap: clamp(.4rem, 2vw, 1.4rem); padding: 0 clamp(.6rem, 2.4vw, 1.8rem); touch-action: pan-y; }
.lb__fig { flex: 1; min-width: 0; height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; }
.lb__fig img { display: block; max-width: 100%; max-height: calc(100% - 3.4rem); object-fit: contain; border-radius: 3px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); transition: opacity .25s ease; user-select: none; -webkit-user-drag: none; }
.lb__fig img.is-loading { opacity: .3; }
.lb__fig figcaption { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .7rem; max-width: 72ch; font-size: var(--fs-base); line-height: var(--lh-sm); text-align: center; color: rgba(232, 241, 245, .88); }
.lb__phase { position: static; }
.lb__thumbs { display: flex; gap: .45rem; overflow-x: auto; padding: .8rem clamp(1rem, 3vw, 2rem) 1.1rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.lb__thumb { flex: none; width: 78px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 3px; overflow: hidden; opacity: .48; cursor: pointer; background: #10181C; transition: opacity .2s ease, border-color .2s ease; }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb__thumb:hover { opacity: .85; }
.lb__thumb.is-active { opacity: 1; border-color: #FFF; }
@media (max-width: 640px) {
  .lb__nav { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(6, 16, 21, .55); }
  .lb__nav--prev { left: .4rem; } .lb__nav--next { right: .4rem; }
  .lb__fig img { max-height: calc(100% - 4.4rem); }
  .lb__thumb { width: 60px; height: 45px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph img, .scard__img img, .bento__item img, .lb.is-open { transition: none; animation: none; }
}

/* --- seznamy ------------------------------------------------------------- */

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .85rem; align-items: baseline; font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink-2); }
.checklist li::before {
  content: "";
  width: 11px; height: 6px; flex: none;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg) translate(1px, -3px);
}

.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
/* štítek (needitovatelný) — jeden vzhled všude; zaoblená „pilulka“ patří jen klikacím filtrům (.chip) */
.tag, .case__tags li {
  display: inline-flex; align-items: center;
  padding: .32rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  background: var(--surface);
  font: 500 var(--fs-sm)/1.3 var(--f-text);
  color: var(--ink-2);
}

.figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-top: var(--bar) solid var(--accent-ink); }
.figure img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.figure figcaption { padding: .8rem 1.1rem; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }

.note { border-left: var(--bar) solid var(--accent-ink); padding: .2rem 0 .2rem 1.2rem; }
.note .eyebrow { margin-bottom: .45rem; }
.note__text { font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink-2); max-width: 60ch; }
.note__text strong { color: var(--ink); }

/* --- FAQ ----------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); max-width: 74ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 1.2rem 2.6rem 1.2rem 0;
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  text-transform: uppercase;
  line-height: var(--lh-title);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute; right: .5rem; top: 1.6rem;
  width: 11px; height: 11px;
  border-right: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  transform: rotate(45deg);
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.8rem; }
.faq p { padding: 0 0 1.4rem; font-size: var(--fs-base); color: var(--ink-2); max-width: 64ch; }

/* --- formulář ------------------------------------------------------------ */

.form { display: grid; gap: 1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-family: var(--f-display);
  font-size: var(--fs-eyebrow); font-weight: 500; line-height: var(--lh-label);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--muted);
}
.field label .req { color: var(--coral-d); }
.field input, .field select, .field textarea {
  -webkit-appearance: none; appearance: none;
  font-family: var(--f-text);
  font-size: var(--fs-base);
  line-height: 1.25;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-ctl);
  border-radius: 0;
  padding: .85rem 1rem;
  width: 100%;
  min-height: 52px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 9.5rem; line-height: var(--lh-sm); resize: vertical; }
/* rozbalovací seznam: vlastní šipka a stejné odsazení textu jako ostatní pole */
.field select {
  padding-right: 2.8rem; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335525E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center / 18px 18px;
}
.field select:has(option[value=""]:checked) { color: #6F8B98; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--sky-d);
}
.field input::placeholder, .field textarea::placeholder { color: #6F8B98; opacity: 1; }
.field.is-error input, .field.is-error select, .field.is-error textarea { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.field.is-error label { color: var(--coral-d); }
.field__err { font-size: var(--fs-sm); color: var(--coral-d); display: none; }
.field.is-error .field__err { display: block; }

/* souhlas: zaškrtávátko vlevo, text vedle něj, chyba pod textem */
.consent { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: .75rem; row-gap: .35rem; align-items: start; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); cursor: pointer; }
.consent input { width: 22px; height: 22px; min-height: 0; margin: 0; accent-color: var(--sky-d); }
.consent.is-error { color: var(--coral-d); }
.consent .field__err { grid-column: 2; display: none; }
.consent.is-error .field__err { display: block; }

.form__note { font-size: var(--fs-sm); color: var(--muted); }
.form__ok { border-left: var(--bar) solid var(--teal-d); background: rgba(82, 185, 171, .12); padding: 1.1rem 1.3rem; }
.form__err { border-left: var(--bar) solid var(--red); background: rgba(229, 50, 45, .08); padding: 1.1rem 1.3rem; margin-top: 1rem; }
.form__ok p + p, .form__err p + p { margin-top: .4rem; }
.form__err a { color: var(--ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: .7; cursor: progress; transform: none; justify-content: center; }


/* --- důvěra: pro správce domů a investory ---------------------------------- */

/* čtyři ověřitelné body (klient 13. 10. 2026: bez jména, záruky v číslech a výrobců) — vedle sebe, na tabletu 2 × 2 */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 860px) { .trust { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .trust { grid-template-columns: 1fr; } }
.trust__item { background: var(--surface); border: 1px solid var(--line); border-top: var(--bar) solid var(--seq-1); padding: 1.3rem 1.35rem; display: flex; flex-direction: column; gap: .55rem; }
.trust__item:nth-child(2) { border-top-color: var(--seq-2); }
.trust__item:nth-child(3) { border-top-color: var(--seq-3); }
.trust__item:nth-child(4) { border-top-color: var(--seq-4); }
.trust__item:nth-child(5) { border-top-color: var(--seq-5); }
.trust__ico { width: 28px; height: 28px; color: var(--seq-1); }
.trust__item:nth-child(2) .trust__ico { color: var(--seq-2); }
.trust__item:nth-child(3) .trust__ico { color: var(--seq-3); }
.trust__item:nth-child(4) .trust__ico { color: var(--seq-4); }
.trust__item:nth-child(5) .trust__ico { color: var(--seq-5); }
.trust__item h3 { font-size: var(--fs-h4); }
.trust__item p { color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-sm); }
@media (max-width: 480px) { .trust__item h3 { font-size: var(--fs-h3); } .trust__item p { font-size: var(--fs-base); line-height: var(--lh-text); } }

/* --- kontaktní karty ----------------------------------------------------- */

.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 800px) { .contact-cards { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-top: var(--bar) solid var(--seq-1); padding: var(--card-pad); display: flex; flex-direction: column; gap: .35rem; }
.contact-cards > :nth-child(1) { border-top-color: var(--seq-3); }
.contact-cards > :nth-child(2) { border-top-color: var(--seq-1); }
.contact-cards > :nth-child(3) { border-top-color: var(--seq-2); }
.contact-card .eyebrow { margin-bottom: .3rem; color: var(--muted); }
.contact-card__txt { color: var(--ink-2); }
.contact-cards--stack { grid-template-columns: 1fr; }
.contact-card a, .contact-card__value { font: 600 var(--fs-h3)/1.35 var(--f-display); font-style: normal; text-decoration: none; color: var(--ink); }
.contact-card a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-card a:hover { color: var(--sky-d); }
.contact-card address { font-style: normal; }
.contact-card address:not(.contact-card__value) { color: var(--ink-2); }
.contact-card__value { display: flex; align-items: center; min-height: 44px; }

/* --- CTA pás ------------------------------------------------------------- */

.cta { color: var(--petrol-ink); }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.cta h2 { max-width: none; color: #FFF; }
.cta p { color: rgba(232, 241, 245, .8); max-width: 54ch; margin-top: .9rem; }
.cta__inner > div:not(.btn-row) { flex: 1 1 520px; max-width: 720px; }
@media (max-width: 560px) { .cta__inner > .btn-row { flex: 1 1 100%; } }

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

.footer { position: relative; overflow: hidden; background: #123141; color: var(--petrol-mut); font-size: var(--fs-base); line-height: var(--lh-sm); padding-block: clamp(2.6rem, 4.4vw, 3.6rem) 1.6rem; }
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; z-index: 2;
  background: linear-gradient(90deg, var(--sky-lite) 0 25%, var(--teal) 0 50%, var(--orange) 0 75%, var(--red) 0);
}
.footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(232, 241, 245, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 241, 245, .035) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9));
          mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9));
}
.footer > * { position: relative; z-index: 1; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }
.footer img { height: 48px; width: auto; margin-bottom: 1rem; }
.footer .footer__h { margin: 0 0 .9rem; font: 600 var(--fs-eyebrow)/var(--lh-label) var(--f-display); text-transform: uppercase; color: #FFF; letter-spacing: var(--ls-eyebrow); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .95rem; }
.footer li { line-height: 1.35; }
.footer a { color: var(--petrol-mut); text-decoration: none; }
.footer a:hover { color: #FFF; }
.footer p { max-width: 34ch; }
@media (max-width: 760px) {
  .footer ul { gap: 0; }
  .footer li a { display: inline-block; padding-block: .625rem; }
  .footer li:not(:has(a)) { padding-block: .625rem; }
  .footer p { max-width: none; }
}
.footer__bottom {
  margin-top: 2.4rem; padding-top: 1.3rem;
  border-top: 1px solid var(--petrol-line);
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: space-between;
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.nowrap { white-space: nowrap; }

/* --- hlavička podstránky ------------------------------------------------- */

.pagehead { padding-block: clamp(3rem, 6vw, 4.8rem) clamp(2.8rem, 5.5vw, 4.4rem); }
.pagehead__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.pagehead .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-family: var(--f-display); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-caps); text-transform: uppercase; color: rgba(232, 241, 245, .7); margin-bottom: 1.1rem; }
.pagehead .crumbs a { color: rgba(232, 241, 245, .88); text-decoration: none; }
.pagehead .crumbs a:hover { color: #FFF; }
.pagehead .crumbs > span:last-child { color: #FFF; box-shadow: inset 0 -2px 0 var(--accent); }
.pagehead h1 { max-width: 28ch; color: #FFF; text-shadow: 0 2px 24px rgba(5, 20, 27, .5); }
.pagehead .lead { margin-top: 1.2rem; max-width: 38em; color: rgba(240, 247, 250, .92); }
.pagehead__cta { margin-top: 1.8rem; }
/* fotka ze zakázky vpravo v hlavičce (místo dřívějšího kresleného domu) */
.pagehead--photo { padding-block: clamp(2.6rem, 5vw, 4rem); }
.pagehead--photo .pagehead__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: stretch; }
.pagehead--photo .pagehead__copy { align-self: center; }
.pagehead__photo {
  position: relative; margin: 0; min-height: 320px; overflow: hidden;
  border-top: var(--bar) solid var(--accent); background: var(--dusk-low);
  box-shadow: 0 34px 70px -34px rgba(5, 20, 27, .75);
}
.pagehead__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagehead__photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.6rem 1.1rem .85rem;
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: rgba(255, 255, 255, .92);
  background: linear-gradient(180deg, rgba(5, 20, 27, 0), rgba(5, 20, 27, .72));
}
@media (min-width: 701px) and (max-width: 900px) {
  .pagehead--photo .pagehead__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.6rem; }
  .pagehead__photo { min-height: 240px; }
}
@media (max-width: 700px) {
  .pagehead__inner, .pagehead--photo .pagehead__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .pagehead--photo { padding-bottom: 0; }
  .pagehead__photo { min-height: 0; aspect-ratio: 16 / 9; max-height: 320px; margin-inline: calc(var(--gutter) * -1); border-top: 0; box-shadow: none; }
  .pagehead__photo figcaption { padding-inline: var(--gutter); }
}
.prose--after { margin-top: 1.8rem; }
.contact-cards--before { margin-bottom: var(--gap-head); }
.contact-cards--after { margin-top: var(--gap-head); }

/* --- noční plocha: společný podklad tmavých pásů (úvod, hlavičky, galerie, CTA) --- */

.night {
  position: relative;
  overflow: hidden;
  color: var(--petrol-ink);
  background:
    radial-gradient(ellipse 46% 56% at 76% 24%, rgba(127, 211, 240, .28), transparent 70%),
    radial-gradient(ellipse 36% 42% at 14% 110%, rgba(255, 179, 71, .16), transparent 70%),
    linear-gradient(180deg, var(--dusk-top) 0%, var(--dusk-mid) 48%, var(--dusk-low) 100%);
}
.night::before, .night::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.night::before {
  background-image: linear-gradient(rgba(232, 241, 245, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 241, 245, .03) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
          mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
}
.night::after {
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(8, 30, 40, .35) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/></filter><rect width='260' height='260' filter='url(%23g)'/></svg>");
}
.night > * { position: relative; z-index: 1; }
.night h1, .night h2, .night h3 { color: #FFF; }

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

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--orange); color: var(--petrol);
  padding: .8rem 1.2rem; z-index: 300;
  font-family: var(--f-display); letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: .5rem; top: .5rem; }

.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h2.eyebrow { margin: 0 0 1rem; }

/* ==========================================================================
   Odkaz na navazující službu (prohlubeň ↔ celá šachta) — 6. 10. 2026
   ========================================================================== */
.xlink-row { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.xlink {
  --xl: var(--accent-ink);
  display: grid; grid-template-columns: minmax(170px, 300px) minmax(0, 1fr) auto; align-items: center;
  align-items: stretch; gap: clamp(1rem, 2.4vw, 2rem); padding: 0 clamp(1rem, 2vw, 1.6rem) 0 0;
  background: var(--surface); border: 1px solid var(--line); border-top: var(--bar) solid var(--xl);
  text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease;
}
.xlink--lift { --xl: var(--teal-d); }
.xlink:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.xlink:focus-visible { outline: 3px solid var(--xl); outline-offset: 3px; }
.xlink__img { position: relative; display: block; min-height: 180px; overflow: hidden; background: var(--paper-2); }
.xlink__txt, .xlink__go { align-self: center; }
.xlink__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.xlink:hover .xlink__img img { transform: scale(1.04); }
.xlink__txt { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding-block: 1.3rem; }
.xlink__eyebrow { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-eyebrow); line-height: var(--lh-label); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--xl); }
.xlink__title { font-family: var(--f-display); font-weight: 600; text-transform: uppercase; font-size: var(--fs-h3); line-height: var(--lh-title); color: var(--ink); }
.xlink__text { color: var(--ink-2); font-size: var(--fs-base); line-height: var(--lh-text); max-width: 62ch; }
.xlink__more { display: none; }
.xlink__go { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--ink); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.xlink__go svg { width: 20px; height: 20px; }
.xlink:hover .xlink__go { background: var(--xl); border-color: transparent; color: #FFF; }
@media (max-width: 700px) {
  .xlink { grid-template-columns: 1fr; padding: 0; gap: 0; }
  .xlink__img { aspect-ratio: 16 / 9; min-height: 0; }
  .xlink__txt { padding: var(--card-pad); }
  .xlink__go { display: none; }
  .xlink__more { display: inline-flex; margin-top: .3rem; }
}
@media (prefers-reduced-motion: reduce) { .xlink, .xlink__img img { transition: none; } .xlink:hover { transform: none; } }

/* --- Ochrana osobních údajů a stránka 404 -------------------------------- */
.legal { max-width: 46rem; }
.legal__block + .legal__block { margin-top: 2.2rem; }
.legal h2 { margin-bottom: .6rem; font: 600 var(--fs-h3)/var(--lh-title) var(--f-display); text-transform: uppercase; color: var(--ink); }
.legal p + p { margin-top: .8rem; }
.legal a { color: var(--sky-d); text-underline-offset: 3px; }
.legal__date { margin-top: 2.4rem; font-size: var(--fs-sm); color: var(--muted); }
.e404 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 2.2rem; }
.e404 li { border-top: 1px solid var(--line); }
.e404 .arrow-link { display: flex; justify-content: space-between; gap: 1rem; padding-block: .95rem; white-space: normal; }
.footer__bottom a { color: inherit; text-underline-offset: 3px; }
.footer__bottom a:hover { color: #FFF; }
.consent a { color: var(--sky-d); text-underline-offset: 3px; }

/* --- Realizace: skupiny podle služeb (pořadí jako v menu) ----------------- */
.cases--groups { gap: clamp(4rem, 8vw, 6.5rem); }
.cases-group[hidden] { display: none; }
.cases-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem); padding-top: 1rem; border-top: var(--bar) solid var(--cat, var(--sky-d));
}
.cases-group__head h2 { font-size: var(--fs-h2); line-height: var(--lh-head); }
.cases-group__head h2 span {
  margin-left: .6rem; font: 500 var(--fs-eyebrow)/1 var(--f-display); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--muted); vertical-align: middle; white-space: nowrap;
}
/* galerie po službách: všechny fotky v mřížce, 4 / 3 / 2 vedle sebe */
.wall--ref { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 980px) { .wall--ref { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .wall--ref { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }

/* --- Souhlas s cookies: úzký proužek dole uprostřed (klient: „malá, jemná“; v rohu zakrývala hlavní tlačítko) --- */
.cookies {
  position: fixed; left: 50%; bottom: .9rem; z-index: 150; transform: translateX(-50%);
  width: max-content; max-width: min(34rem, calc(100% - 1.8rem));
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem 1.1rem;
  padding: .55rem .6rem .55rem 1.1rem; background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px -12px rgba(5, 20, 27, .4);
  font-size: .8125rem; line-height: 1.4;
}
.cookies[hidden] { display: none; }
.cookies__txt { margin: 0; }
.cookies__txt a { color: var(--sky-d); text-underline-offset: 2px; }
.cookies__btns { display: flex; align-items: center; gap: .3rem .85rem; }
.cookies__volby { flex-basis: 100%; order: 2; display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; padding: .25rem 0 .1rem; }
.cookies__volby[hidden] { display: none; }
.cookies__volby label { display: flex; align-items: center; gap: .4rem; cursor: pointer; }
.cookies__volby input { width: .95rem; height: .95rem; accent-color: var(--sky-d); }
.cookies:has(.cookies__volby:not([hidden])) { border-radius: 14px; padding: .7rem .9rem .75rem 1.1rem; }
.cookies:has(.cookies__volby:not([hidden])) .cookies__btns { order: 3; }
.cookies__btn {
  min-height: 32px; padding: .35rem .95rem; border: 1px solid var(--line-ctl); border-radius: 999px; background: var(--surface);
  font: 600 .75rem/1 var(--f-display); letter-spacing: var(--ls-btn); text-transform: uppercase; color: var(--ink); cursor: pointer;
}
.cookies__btn--ok { background: var(--orange); border-color: var(--orange); color: var(--petrol); }
.cookies__btn--ok:hover { background: var(--amber); border-color: var(--amber); }
.cookies__btn[hidden], .cookies__link[hidden] { display: none; }
.cookies__link { padding: .25rem 0; border: 0; background: none; font-size: .75rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cookies__link:hover { color: var(--ink); }
.cookies :focus-visible { outline: 2px solid var(--focus, var(--sky-d)); outline-offset: 2px; }
@media (max-width: 640px) {
  .cookies { left: .5rem; right: .5rem; bottom: .5rem; transform: none; width: auto; max-width: none; border-radius: 14px;
    padding: .6rem .75rem .65rem .95rem; justify-content: space-between; }
}
.footer__cookies { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer__cookies:hover { color: #FFF; }

/* --- doplňky po kontrole před spuštěním (13. 10. 2026) ------------------- */
.form__privacy { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.form__privacy a { color: var(--sky-d); text-underline-offset: 3px; }
.cases-group__note { margin: -1rem 0 1.4rem; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 360px) {
  .hero2__eyebrow .nowrap, .btn-row .btn { white-space: normal; }
}
/* bez JavaScriptu: menu Služby na najetí / tabulátor, na mobilu menu rovnou vidět */
@media (min-width: 1181px) {
  html:not(.js) .navdrop:hover .navdrop__panel, html:not(.js) .navdrop:focus-within .navdrop__panel { opacity: 1; visibility: visible; transform: none; }
}
@media (max-width: 1180px) {
  html:not(.js) .burger { display: none; }
  html:not(.js) .nav { position: static; opacity: 1; visibility: visible; transform: none; max-height: none; }
  html:not(.js) .topbar__inner { flex-wrap: wrap; }
}