@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/BricolageGrotesque-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PublicSans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PublicSans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PublicSans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/PublicSans-600-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;
}

/* Neutrální základ. ŽÁDNÝ design: barvy, fonty a layout vymysli pro konkrétního klienta. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }

:root {
  /* barvy: přepiš podle brandu klienta (brief.json -> barvy.doporucene) */
  --bg: #f6f3ec;
  --text: #14293a;
  --muted: #4d5f6e;
  --accent: #1f5a80;
  --accent-text: #ffffff;
  --line: #d5d0c3;

  /* písmo: self-host do static/fonts + @font-face s font-display: swap; vždy otestuj háčky ěščřžýáíéůú */
  --font-body: "Public Sans", system-ui, "Segoe UI", sans-serif;
  --font-head: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --navy: #0e3c59; --blue: #2e678a; --pale: #e3ebf0; --lit: #f2b53c;

  /* typografická škála (320 až 1440 px) */
  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.9rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.2vw, 2.6rem);
  --step-4: clamp(2.07rem, 1.7rem + 1.9vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.9rem + 3vw, 5rem);

  --space-1: 0.5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2.5rem;  --space-5: 4rem;  --space-6: clamp(4rem, 3rem + 5vw, 8rem);
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; font-weight: 600; }
h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-1); }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sekce { padding-block: var(--space-6); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--space-2); top: -4rem; background: var(--bg); padding: var(--space-1) var(--space-2); z-index: 100; }
.skip:focus { top: var(--space-2); }

/* dotykové cíle: min. 44 px (QA hlásí < 40 px) */
.tap, button, .tlacitko, input:not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; }
.tlacitko, button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; padding: 0.6em 1.4em; background: var(--accent); color: var(--accent-text); border: 0; text-decoration: none; }
.hlavicka nav a, .paticka a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.25rem; }

/* formulář */
.formular { display: grid; gap: var(--space-2); max-width: 36rem; }
.formular label { display: grid; gap: 0.25rem; font-size: var(--step--1); }
.formular input, .formular textarea, .formular select { padding: 0.6em 0.8em; border: 1px solid var(--line); background: transparent; width: 100%; }
.formular .past { position: absolute; left: -9999px; }
.formular-stav { font-size: var(--step--1); min-height: 1.5em; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }


/* hlavička */
.hlavicka { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.hlavicka .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 0.6rem; }
.logo img { height: 52px; width: auto; }
.hlavicka nav { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.hlavicka nav a { text-decoration: none; font-weight: 600; font-size: var(--step--1); }
.hlavicka nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 40rem) { .logo img { height: 38px; } .hlavicka nav a:first-child { display: none; } }

/* hero */
.hero { padding-block: var(--space-5) var(--space-6); }
.hero .wrap { display: grid; gap: var(--space-5); grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.hero .stitek { display: inline-block; background: var(--pale); color: var(--navy); font-weight: 600; font-size: var(--step--1); padding: 0.35em 0.9em; border-radius: 99px; margin-bottom: var(--space-3); }
.hero h1 { color: var(--navy); letter-spacing: -0.015em; max-width: 16ch; }
.hero .uvod { font-size: var(--step-1); color: var(--muted); margin-top: var(--space-3); max-width: 34rem; }
.hero .akce { margin-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.hero .akce .tlacitko { border-radius: 6px; font-weight: 600; }
.hero .akce a.odkaz { font-weight: 600; color: var(--navy); }
.fasada { width: 100%; max-width: 26rem; justify-self: end; }
@media (max-width: 52rem) { .hero .wrap { grid-template-columns: 1fr; } .fasada { max-width: 16rem; justify-self: start; } }

/* služby = okna domu */
.sekce.okna { background: var(--navy); color: #fff; }
.sekce.okna h2 { color: #fff; max-width: 22ch; }
.sekce.okna .predmluva { color: #c4d4df; margin-top: var(--space-2); max-width: 38rem; }
.okna-mrizka { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.okno { background: #174a69; border: 2px solid #5d8fae; border-radius: 4px 4px 0 0; padding: var(--space-3); position: relative; }
.okno h3 { color: #fff; font-size: var(--step-1); position: relative; }
.okno p { color: #c4d4df; margin-top: 0.5rem; position: relative; font-size: var(--step--1); }
.okno.sviti { background: var(--lit); border-color: #fff; }
.okno.sviti h3 { color: var(--navy); } .okno.sviti p { color: #3b2b05; }
@media (max-width: 40rem) { .okna-mrizka { grid-template-columns: 1fr; } }

/* péče o dům */
.pece .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-5); }
.pece h2 { color: var(--navy); }
.pece .uvod { color: var(--muted); margin-top: var(--space-2); }
.pece dl { margin: 0; display: grid; gap: 0; }
.pece .radek { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 var(--space-2); padding-block: var(--space-3); border-top: 1px solid var(--line); }
.pece .radek:last-child { border-bottom: 1px solid var(--line); }
.pece .radek svg { width: 1.6rem; height: 1.6rem; color: var(--blue); margin-top: 0.2rem; }
.pece dt { font-family: var(--font-head); font-weight: 600; font-size: var(--step-1); color: var(--navy); }
.pece dd { margin: 0.25rem 0 0; color: var(--muted); }
@media (max-width: 52rem) { .pece .wrap { grid-template-columns: 1fr; gap: var(--space-4); } }

/* oblast */
.oblast { background: var(--pale); padding-block: var(--space-5); }
.oblast .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: center; }
.oblast h2 { color: var(--navy); font-size: var(--step-2); }
.oblast p { color: var(--text); }
.oblast .firma { font-weight: 600; color: var(--navy); }
@media (max-width: 52rem) { .oblast .wrap { grid-template-columns: 1fr; gap: var(--space-2); } }

/* kontakt */
.kontakt .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-5); }
.kontakt h2 { color: var(--navy); }
.kontakt .uvod { color: var(--muted); margin-top: var(--space-2); }
.formular { max-width: none; }
.formular input, .formular textarea { background: #fff; border-radius: 4px; border-color: #b9b3a3; }
.formular button[type="submit"] { background: var(--navy); border-radius: 6px; font-weight: 600; justify-self: start; }
.formular button[type="submit"]:hover { background: var(--blue); }
@media (max-width: 52rem) { .kontakt .wrap { grid-template-columns: 1fr; gap: var(--space-4); } }

.paticka { background: var(--navy); color: #c4d4df; padding-block: var(--space-4); font-size: var(--step--1); }
.paticka .wrap { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }
.paticka a { color: #fff; }
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.hero .akce a.odkaz { display: inline-flex; align-items: center; min-height: 44px; }

/* kolo 2 */
.hero { background: linear-gradient(180deg, var(--bg) 0 70%, var(--pale) 70%); padding-bottom: 0; }
.hero .wrap { align-items: end; }
.hero .wrap > div:first-child { padding-bottom: var(--space-6); align-self: center; }
.fasada { max-width: 34rem; margin-bottom: -2px; }
.hero h1 { font-size: var(--step-5); max-width: 12ch; }
.sekce.okna { padding-block: var(--space-6); }
.fasada-sluzeb { margin-top: var(--space-4); max-width: 60rem; margin-inline: auto; }
.strecha { height: clamp(3rem, 8vw, 6rem); background: #174a69; clip-path: polygon(0 100%, 50% 0, 100% 100%); margin-inline: -0.9rem; border-bottom: 0; }
.zed { background: #174a69; padding: 0.9rem; margin-top: -1px; }
.okna-mrizka { margin-top: 0; }
.fasada-sluzeb .okno { background: #0e3c59; min-height: 11rem; padding: var(--space-3) var(--space-3); }
.fasada-sluzeb .okno.sviti { background: var(--lit); }
.okno h3 { font-size: var(--step-2); }
.okno p { font-size: var(--step-0); color: #dbe6ee; }
.okno.sviti p { color: #2c2003; }
.pece .wrap { grid-template-columns: 1fr; gap: var(--space-4); }
.pece .uvod { max-width: 42rem; }
.pece dl { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-5); }
.pece .radek { grid-template-columns: 2.6rem 1fr; }
.pece .radek:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.pece .radek svg { width: 2rem; height: 2rem; }
.pece dd { font-size: var(--step-0); }
@media (max-width: 52rem) { .pece dl { grid-template-columns: 1fr; } .pece .radek:nth-last-child(2) { border-bottom: 0; } .hero { background: var(--bg); } .hero .wrap > div:first-child { padding-bottom: 0; } .hero .wrap { align-items: start; } .fasada { margin-bottom: var(--space-4); } }
.oblast-box { margin-top: var(--space-4); background: var(--pale); border-left: 4px solid var(--blue); padding: var(--space-3); }
.oblast-box .firma { font-family: var(--font-head); font-weight: 600; font-size: var(--step-1); color: var(--navy); margin-bottom: 0.4rem; }
.paticka { margin-top: 0; }
.hero { background: var(--pale); }
.sekce.okna { background: #092c42; }
.strecha, .zed { background: #2e678a; }
.hero .stitek { background: #fff; }
@media (max-width: 52rem) { .hero { background: var(--pale); } }
.kontakt-mail { margin-top: var(--space-3); font-weight: 600; }
.kontakt-mail a { color: var(--navy); }
@media (max-width: 40rem) { .hlavicka nav a:first-child { display: inline-flex; } .hlavicka nav { gap: 0.4rem; } .hlavicka nav a { font-size: 0.8rem; } .fasada { max-width: 11rem; } .hero h1 { font-size: var(--step-4); } }
.formular-pozn { font-size: var(--step--1); color: var(--muted); }
.sekce.pece { padding-bottom: var(--space-5); }
.sekce.kontakt { padding-top: var(--space-5); }
@media (max-width: 40rem) { .hlavicka .wrap { gap: 0.5rem; } .hlavicka nav { flex-wrap: nowrap; gap: 0.1rem; } .hlavicka nav a { padding-inline: 0.35rem; } .logo img { height: 34px; } }

/* kolo 3: ulice místo jednoho domu */
.hero { padding-block: var(--space-5) 0; background: linear-gradient(180deg, #f6f3ec 0%, #e3ebf0 100%); }
.hero .wrap { display: block; }
.hero .wrap > div:first-child { padding-bottom: var(--space-5); }
.hero h1 { max-width: 18ch; font-size: var(--step-5); }
.hero .uvod { max-width: 40rem; }
.ulice { width: 100%; height: clamp(11rem, 24vw, 21rem); display: block; margin-top: var(--space-2); }
@media (max-width: 40rem) { .hero h1 { font-size: var(--step-4); } .ulice { height: 9rem; } }

.cenik { background: var(--pale); }
.cenik-radky { margin-top: var(--space-3); display: grid; gap: var(--space-2); max-width: 40rem; }
.cenik-radky .radek { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; background: #fff; border-left: 4px solid var(--blue); padding: var(--space-3); }
.cenik-radky dt { font-family: var(--font-head); font-weight: 600; color: var(--navy); }
.cenik-radky dd { margin: 0; text-align: right; }
@media (max-width: 52rem) { .cenik-radky .radek { flex-direction: column; gap: 0.3rem; } .cenik-radky dd { text-align: left; } }