/* ==========================================================================
   Tesařík stavby — hero
   Barvy i proporce jsou odečtené přímo z referenčního screenshotu.
   Vše je odvozeno od jednotky --u = 1 % šířky viewportu (nad 1920px zamrzne),
   takže rozvržení drží stejné poměry jako předloha na každé šířce.
   ========================================================================== */

:root{
  /* --- barvy odečtené z reference --- */
  --black:      #050505;   /* pozadí hero (horní část) */
  --ink:        #0A0A0A;   /* text na světlém podkladu */
  --white:      #FFFFFF;
  --yellow:     #FFD43D;   /* akcent – tlačítko i pill s telefonem */
  --yellow-hi:  #FFE071;   /* hover */
  --rule:       rgba(255,255,255,.22);   /* linka nad navigací */
  --rule-soft:  rgba(255,255,255,.10);   /* linka pod navigací */

  /* --- proporční jednotka ---
     1 % šířky, ale nad 1440 px zamrzne → od té šířky se rozvržení
     přestane zvětšovat a obsah se jen vycentruje. */
  --u: min(1vw, 14.4px);

  /* šířka obsahového kontejneru: do 1440 px celá šířka, výš pevných 1440 px */
  --container: calc(100 * var(--u));

  --pad: calc(8.83 * var(--u));
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ display:block; max-width:100%; }

a{ color:inherit; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--black);
  /* Sekce má pevnou výšku podle obrazovky – nikdy z ní není několik
     obrazovek. Všechno uvnitř se odvozuje od téhle výšky. */
  height:96vh;
  height:96svh;
  min-height:560px;
}

.hero__inner{
  position:relative;
  z-index:2;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* --- fotka + přechody ---------------------------------------------------- */

.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

/* Fotka vyplňuje celou sekci jako plnohodnotné pozadí – ostrá, bez masek.
   Spodní hranu neřeší gradient, ale čistý oblouk (.hero__curve). */
.hero__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  /* Kotvení níž: na širokém nízkém okně se ořízne koruna stromů místo kol. */
  object-position:50% 70%;
  filter:brightness(1.05) contrast(1.1) saturate(1.05);
}

/* Ztmavení jen tam, kde leží text – vlevo a nahoře. Pravá část s
   fotkou zůstává světlá, jinak by se projasnění zase ztratilo. */
.hero__scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(5,5,5,.86) 0%,
      rgba(5,5,5,.62) 26%,
      rgba(5,5,5,.24) 48%,
      rgba(5,5,5,0)   68%),
    linear-gradient(180deg,
      rgba(5,5,5,.72) 0%,
      rgba(5,5,5,.34) 14%,
      rgba(5,5,5,.06) 32%,
      rgba(5,5,5,0)   46%);
}

/* Oblouk u spodní hrany: čistý řez fotky do bílé, ne rozmazaný gradient.
   Žlutá linka po hraně navazuje na akcent tlačítka. */
.hero__curve{
  position:absolute;
  left:0; right:0; bottom:-1px;
  width:100%;
  height:9svh;
  min-height:56px;
  display:block;
}

/* ==========================================================================
   NAVIGACE
   ========================================================================== */

.nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:calc(4.4 * var(--u));
  margin-top:calc(2.86 * var(--u));
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule-soft);
}

.nav__logo{
  justify-self:start;
  display:flex;
  flex-direction:column;
  gap:calc(.35 * var(--u));
  text-decoration:none;
  color:var(--white);
  line-height:.92;
}

.nav__logo-name{
  font-size:max(20px, calc(2.05 * var(--u)));
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

.nav__logo-sub{
  font-size:max(10px, calc(.78 * var(--u)));
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.nav__links{
  justify-self:center;
  align-self:stretch;
  display:flex;
  align-items:stretch;      /* odkazy mají klikací plochu přes celou výšku pásu */
  gap:calc(2.7 * var(--u));
  margin:0;
  padding:0;
  list-style:none;
}

.nav__links li{ display:flex; }

.nav__links a{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:max(14px, calc(1.1 * var(--u)));
  font-weight:500;
  letter-spacing:-.005em;
  color:rgba(255,255,255,.9);
  text-decoration:none;
  transition:color .22s ease;
}

/* Tenké line-art ikonky – technický výkres, ne piktogram. Drží se
   vzadu za textem, dokud na ně nenajedeš. */
.nav__ico{
  flex:none;
  width:1.15em;
  height:1.15em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.45;
  transition:opacity .22s ease, transform .34s cubic-bezier(.22,.61,.36,1);
}

/* Podtržení vyjíždí zleva, ne jen problikne barva. */
.nav__links a span{ position:relative; }

.nav__links a span::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-.45em;
  height:1.5px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}

.nav__links a:hover,
.nav__links a:focus-visible{ color:var(--yellow); }

.nav__links a:hover span::after,
.nav__links a:focus-visible span::after{ transform:scaleX(1); }

.nav__links a:hover .nav__ico,
.nav__links a:focus-visible .nav__ico{
  opacity:1;
  transform:translateY(-1.5px);
}

.nav__phone{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  height:calc(2.5 * var(--u));
  padding-inline:calc(1.7 * var(--u));
  border-radius:calc(.62 * var(--u));
  background:var(--yellow);
  color:var(--black);
  font-size:max(13px, calc(1.1 * var(--u)));
  font-weight:600;
  letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease;
}

.nav__phone:hover,
.nav__phone:focus-visible{ background:var(--yellow-hi); }

/* ==========================================================================
   OBSAH HERO
   ========================================================================== */

/* Nadpis staví na kontrastu řezů: první řádek lehký a mírně potlačený,
   druhý – ten, co nese význam – v nejtěžším řezu. Užší prostrkání drží
   obě části pohromadě jako jeden blok. */
.hero__title{
  margin:calc(4.4 * var(--u)) 0 0;
  font-size:calc(3.25 * var(--u));
  line-height:1.08;
  letter-spacing:-.042em;
  color:var(--white);
  text-wrap:balance;
}

.hero__title-lead,
.hero__title-key{ display:block; }

.hero__title-lead{
  font-weight:500;
  color:rgba(255,255,255,.96);
}

.hero__title-key{
  font-weight:800;
  letter-spacing:-.05em;
}

/* Akcent nese dvojici sloves, na které stojí celé sdělení: kdo staví
   a pro koho. Žlutá je stejná jako u tlačítka. */
.hl{ color:var(--yellow); }

/* Popisný řádek pod nadpisem – lehký řez, ustupuje nadpisu. */
.hero__lede{
  margin:calc(1.7 * var(--u)) 0 0;
  max-width:44ch;
  font-size:max(15px, calc(1.18 * var(--u)));
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.004em;
  color:rgba(255,255,255,.74);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:calc(1.2 * var(--u));
  height:calc(5.6 * var(--u));
  margin-top:calc(2.5 * var(--u));
  padding-inline:calc(2.8 * var(--u));
  border-radius:999px;
  background:var(--yellow);
  color:var(--black);
  font-size:max(15px, calc(1.25 * var(--u)));
  font-weight:600;
  letter-spacing:-.012em;
  text-decoration:none;
  white-space:nowrap;
  transition:background .22s ease, transform .22s ease;
}

.btn:hover,
.btn:focus-visible{
  background:var(--yellow-hi);
  transform:translateY(-2px);
}

.btn__arrow{
  flex:none;
  width:calc(1.8 * var(--u));
  height:calc(1.8 * var(--u));
}

:where(a):focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:4px;
  border-radius:2px;
}

/* Na dotykových zařízeních drž minimum 44×44 px, aniž by se změnil desktop. */
@media (pointer:coarse){
  .nav__phone{ min-height:44px; }
  .nav__links a{ min-height:44px; }
  .btn{ min-height:48px; }
}

/* ==========================================================================
   MOBIL / TABLET
   ========================================================================== */

@media (max-width:900px){

  :root{ --pad:24px; }

  .hero{
    height:96svh;
    min-height:540px;
  }

  .nav{
    height:64px;
    margin-top:20px;
    grid-template-columns:auto 1fr;
  }

  .nav__logo{ gap:2px; }
  .nav__logo-name{ font-size:24px; }
  .nav__logo-sub{ font-size:9px; }

  .nav__links{ display:none; }

  .nav__phone{
    justify-self:end;
    height:38px;
    padding-inline:16px;
    border-radius:8px;
    font-size:14px;
  }

  .hero__title{
    margin-top:44px;
    font-size:clamp(1.45rem, 6.2vw, 2.2rem);
    letter-spacing:-.03em;
  }
  .btn{
    height:60px;
    margin-top:32px;
    padding-inline:28px;
    gap:14px;
    font-size:16px;
  }

  .btn__arrow{ width:20px; height:20px; }

  /* Na úzké obrazovce se výřez roztáhne skoro na celou šířku, ale ne víc –
     stroj (8–88 % šířky výřezu) tak zůstane celý v okně. */
  .hero__photo{
    width:min(116vw, 96svh);
    bottom:3svh;
    left:50%;
    transform:translateX(-50%);
  }

  .hero__curve{ height:7svh; min-height:44px; }

  /* Na úzké obrazovce leží text přes celou šířku, ztmavení tedy shora dolů. */
  .hero__scrim{
    background:linear-gradient(180deg,
      rgba(5,5,5,.88) 0%,
      rgba(5,5,5,.74) 22%,
      rgba(5,5,5,.44) 40%,
      rgba(5,5,5,.12) 58%,
      rgba(5,5,5,0)   72%);
  }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ==========================================================================
   SPOLEČNÉ PRO SEKCE
   ========================================================================== */

.eyebrow{
  display:flex;
  align-items:center;
  gap:.9em;
  margin:0 0 calc(1.5 * var(--u));
  font-size:max(12px, calc(.95 * var(--u)));
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#6B6B6B;
}

.eyebrow::before{
  content:"";
  flex:none;
  width:calc(2.6 * var(--u));
  min-width:26px;
  height:2px;
  background:var(--yellow);
}

.eyebrow--dark{ color:rgba(255,255,255,.55); }

.sec-title{
  margin:0 0 calc(2 * var(--u));
  font-size:calc(2.9 * var(--u));
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--ink);
}

.sec-title--dark{ color:var(--white); }

/* ==========================================================================
   O NÁS
   ========================================================================== */

.about{
  background:var(--white);
  color:var(--ink);
  padding-block:calc(9 * var(--u));
}

.about__grid{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
  display:grid;
  grid-template-columns:47fr 53fr;
  gap:calc(6 * var(--u));
  align-items:center;
}

.about__body{
  margin:0 0 calc(2.6 * var(--u));
  max-width:46ch;
  font-size:max(15px, calc(1.15 * var(--u)));
  line-height:1.7;
  color:#4A4A4A;
}

.about__facts{
  margin:0 0 calc(3.2 * var(--u));
  padding:0;
  list-style:none;
  display:grid;
  gap:calc(1.6 * var(--u));
  max-width:46ch;
}

.about__facts li{
  display:grid;
  gap:.2em;
  padding-left:calc(1.8 * var(--u));
  border-left:2px solid var(--yellow);
}

.about__facts-k{
  font-size:max(14px, calc(1.08 * var(--u)));
  font-weight:700;
  color:var(--ink);
}

.about__facts-v{
  font-size:max(14px, calc(1.02 * var(--u)));
  line-height:1.55;
  color:#6A6A6A;
}

/* Fotka kopíruje výšku textového sloupce, ať sekce nekončí prázdným místem. */
.about__photo{
  margin:0;
  align-self:stretch;
}

.about__photo img{
  width:100%;
  height:100%;
  min-height:calc(28 * var(--u));
  object-fit:cover;
  border-radius:calc(.8 * var(--u));
}

/* ==========================================================================
   PROCES
   ========================================================================== */

.process{
  background:var(--black);
  color:var(--white);
  padding-block:calc(9 * var(--u));
}

.process__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.process__head{
  max-width:54ch;
  margin-bottom:calc(4.6 * var(--u));
}

.process__lede{
  margin:0;
  font-size:max(15px, calc(1.15 * var(--u)));
  line-height:1.7;
  color:rgba(255,255,255,.66);
}

/* Číslování je tu na místě: kroky mají skutečné pořadí, ve kterém jdou po sobě. */
.steps{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:calc(2.2 * var(--u));
}

.step{
  display:grid;
  grid-template-columns:1fr minmax(0, calc(30 * var(--u)));
  gap:calc(4 * var(--u));
  align-items:center;
  padding:calc(2.6 * var(--u));
  border:1px solid rgba(255,255,255,.1);
  border-radius:calc(.9 * var(--u));
  background:rgba(255,255,255,.035);
}

.step__meta{
  display:flex;
  align-items:center;
  gap:calc(1.1 * var(--u));
  margin-bottom:calc(1.3 * var(--u));
}

.step__ico{
  flex:none;
  width:calc(2.4 * var(--u));
  height:calc(2.4 * var(--u));
  min-width:26px;
  min-height:26px;
  fill:none;
  stroke:var(--yellow);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.step__num{
  font-size:max(12px, calc(.95 * var(--u)));
  font-weight:700;
  letter-spacing:.1em;
  color:var(--yellow);
}

.step__tag{
  font-size:max(11px, calc(.9 * var(--u)));
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

.step__title{
  margin:0 0 calc(1 * var(--u));
  font-size:max(19px, calc(1.75 * var(--u)));
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--white);
}

.step__text{
  margin:0;
  max-width:52ch;
  font-size:max(14px, calc(1.08 * var(--u)));
  line-height:1.68;
  color:rgba(255,255,255,.62);
}

.step__photo{ margin:0; }

.step__photo img{
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  border-radius:calc(.6 * var(--u));
}

/* ==========================================================================
   MOBIL / TABLET – sekce
   ========================================================================== */

@media (max-width:900px){

  .about,
  .process{ padding-block:56px; }

  .about__grid{
    grid-template-columns:1fr;
    gap:32px;
  }

  .about__photo img{
    height:auto;
    min-height:0;
    aspect-ratio:8/5;
  }

  .sec-title{
    font-size:clamp(1.5rem, 6.6vw, 2.2rem);
    margin-bottom:18px;
  }

  .about__body{ margin-bottom:24px; }
  .about__facts{ gap:16px; margin-bottom:28px; }
  .about__facts li{ padding-left:16px; }

  .process__head{ margin-bottom:32px; }

  .steps{ gap:16px; }

  .step{
    grid-template-columns:1fr;
    gap:20px;
    padding:20px;
  }

  .step__meta{ gap:12px; margin-bottom:12px; }
  .step__title{ margin-bottom:8px; }
}

/* ==========================================================================
   PLYNULÝ SCROLL + ODHALOVÁNÍ PŘI SCROLLU
   ========================================================================== */

html{ scroll-behavior:smooth; }

/* Kotvy mají odstup od horní hrany, ať sekce nezačíná přilepená k okraji. */
[id]{ scroll-margin-top:calc(2 * var(--u)); }

/* Výchozí skrytý stav se zapne jen když běží JS – bez něj je vše vidět. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .56s cubic-bezier(.22,.61,.36,1),
             transform .56s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}

.js [data-reveal].is-in{
  opacity:1;
  transform:none;
  will-change:auto;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ==========================================================================
   PROCES – fotografické pozadí a skleněné prvky
   ========================================================================== */

.process{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.process__bg{
  position:absolute;
  inset:0;
  z-index:0;
}

.process__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 45%;
  filter:brightness(.62) saturate(.7) contrast(1.08);
}

/* Ztmavení navrch – fotka má být atmosféra, ne soupeř textu. */
.process__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(5,5,5,.86) 0%,
    rgba(5,5,5,.6) 26%,
    rgba(5,5,5,.56) 62%,
    rgba(5,5,5,.88) 100%);
}

.process__inner{
  position:relative;
  z-index:1;
}

/* Karty i číselné bubliny jsou průsvitné sklo – pozadí přes ně prosvítá. */
.step{
  background:rgba(255,255,255,.055);
  border-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
          backdrop-filter:blur(16px) saturate(1.15);
}

.step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:calc(3.4 * var(--u));
  height:calc(3.4 * var(--u));
  min-width:42px;
  min-height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
          backdrop-filter:blur(10px) saturate(1.3);
  letter-spacing:.02em;
}

/* ==========================================================================
   REALIZACE
   ========================================================================== */

.work{
  background:var(--white);
  color:var(--ink);
  padding-block:calc(9 * var(--u));
}

.work__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.work__head{
  max-width:54ch;
  margin-bottom:calc(4.6 * var(--u));
}

.work__lede{
  margin:0;
  font-size:max(15px, calc(1.15 * var(--u)));
  line-height:1.7;
  color:#4A4A4A;
}

/* Žlutý akcent v nadpisu na světlém podkladu potřebuje tmavší odstín,
   jinak by na bílé zmizel. */
.hl-ink{ color:#C79A00; }

.work__grid{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:calc(2.6 * var(--u));
}

.proj{
  display:flex;
  flex-direction:column;
  border:1px solid #E8E8E8;
  border-radius:calc(.9 * var(--u));
  overflow:hidden;
  background:var(--white);
  transition:border-color .25s ease, transform .25s ease;
}

.proj:hover{
  border-color:var(--yellow);
  transform:translateY(-3px);
}

.proj__media{
  margin:0;
  aspect-ratio:4/3;
  overflow:hidden;
}

.proj__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Dlaždice pro projekty, ke kterým zatím nemáme fotku. */
.proj__media--tile{
  display:grid;
  place-items:center;
  background:
    radial-gradient(120% 110% at 18% 8%, rgba(255,212,61,.18), rgba(255,212,61,0) 58%),
    linear-gradient(158deg, #15150F 0%, #0A0A0A 62%, #121212 100%);
}

.proj__ghost{
  font-size:max(13px, calc(1.15 * var(--u)));
  font-weight:800;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.16);
}

.proj__body{
  padding:calc(2 * var(--u));
  display:flex;
  flex-direction:column;
  gap:calc(.7 * var(--u));
}

.proj__meta{
  margin:0;
  display:flex;
  align-items:center;
  gap:.7em;
  font-size:max(12px, calc(.92 * var(--u)));
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6B6B6B;
}

.proj__type{
  color:var(--ink);
  border-bottom:2px solid var(--yellow);
  padding-bottom:2px;
}

.proj__title{
  margin:0;
  font-size:max(17px, calc(1.5 * var(--u)));
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}

.proj__text{
  margin:0;
  font-size:max(14px, calc(1.02 * var(--u)));
  line-height:1.6;
  color:#5E5E5E;
}

/* ==========================================================================
   MOBIL / TABLET – realizace
   ========================================================================== */

@media (max-width:1100px){
  .work__grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:900px){
  .work{ padding-block:56px; }
  .work__head{ margin-bottom:32px; }
  .work__grid{ grid-template-columns:1fr; gap:20px; }
  .proj__body{ padding:20px; gap:8px; }
  .step__num{ min-width:38px; min-height:38px; }
}

/* ==========================================================================
   ČASTÉ DOTAZY
   ========================================================================== */

.faq{
  background:var(--black);
  color:var(--white);
  padding-block:calc(9 * var(--u));
}

.faq__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.faq__head{
  max-width:54ch;
  margin-bottom:calc(4 * var(--u));
}

.faq__grid{
  display:grid;
  grid-template-columns:42fr 58fr;
  gap:calc(5 * var(--u));
  align-items:start;
}

.faq__photo{
  margin:0;
  position:sticky;
  top:calc(3 * var(--u));
}

.faq__photo img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:calc(.9 * var(--u));
}

.faq__list{
  display:grid;
  gap:0;
}

/* Rozbalovací otázky stojí na nativním <details> – funguje i bez JS
   a ovládá se klávesnicí. Atribut name drží otevřenou vždy jen jednu. */
.qa{
  border-bottom:1px solid rgba(255,255,255,.13);
}

.qa:first-child{ border-top:1px solid rgba(255,255,255,.13); }

.qa summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(2 * var(--u));
  padding-block:calc(1.9 * var(--u));
  cursor:pointer;
  list-style:none;
  transition:color .22s ease;
}

.qa summary::-webkit-details-marker{ display:none; }

.qa summary:hover .qa__q,
.qa summary:focus-visible .qa__q{ color:var(--yellow); }

.qa__q{
  font-size:max(16px, calc(1.45 * var(--u)));
  font-weight:600;
  letter-spacing:-.015em;
  color:var(--white);
  transition:color .22s ease;
}

.qa__mark{
  flex:none;
  display:grid;
  place-items:center;
  width:calc(2.6 * var(--u));
  height:calc(2.6 * var(--u));
  min-width:34px;
  min-height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(8px);
          backdrop-filter:blur(8px);
  transition:background .25s ease, border-color .25s ease, transform .3s ease;
}

.qa__mark svg{
  width:60%;
  height:60%;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.qa[open] .qa__mark{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--black);
  transform:rotate(180deg);
}

.qa__a{
  padding-bottom:calc(2 * var(--u));
  padding-right:calc(4.6 * var(--u));
  animation:qaIn .34s cubic-bezier(.22,.61,.36,1);
}

.qa__a p{
  margin:0;
  font-size:max(14px, calc(1.08 * var(--u)));
  line-height:1.7;
  color:rgba(255,255,255,.66);
}

@keyframes qaIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* ==========================================================================
   KONTAKT
   ========================================================================== */

.contact{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--black);
  color:var(--white);
  padding-block:calc(9 * var(--u));
}

.contact__bg{ position:absolute; inset:0; z-index:0; }

.contact__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  filter:brightness(.66) saturate(.72);
}

.contact__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(5,5,5,.74) 0%,
    rgba(5,5,5,.56) 40%,
    rgba(5,5,5,.8) 100%);
}

.contact__inner{
  position:relative;
  z-index:1;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Skleněná karta – stejný princip jako karty v Procesu. */
.contact__card{
  display:grid;
  grid-template-columns:44fr 56fr;
  gap:calc(5 * var(--u));
  padding:calc(3.4 * var(--u));
  border:1px solid rgba(255,255,255,.15);
  border-radius:calc(1.2 * var(--u));
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
          backdrop-filter:blur(20px) saturate(1.15);
}

.contact__lede{
  margin:0 0 calc(2.6 * var(--u));
  font-size:max(15px, calc(1.15 * var(--u)));
  line-height:1.7;
  color:rgba(255,255,255,.7);
}

.contact__direct{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:calc(1.3 * var(--u));
}

.contact__direct li{
  display:flex;
  align-items:center;
  gap:calc(1.1 * var(--u));
}

.contact__ico{
  flex:none;
  width:calc(1.9 * var(--u));
  height:calc(1.9 * var(--u));
  min-width:22px;
  min-height:22px;
  fill:none;
  stroke:var(--yellow);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.contact__direct a{
  font-size:max(15px, calc(1.3 * var(--u)));
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--white);
  text-decoration:none;
  transition:color .2s ease;
}

.contact__direct a:hover{ color:var(--yellow); }

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

.form{ display:grid; gap:calc(1.5 * var(--u)); }

.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(1.5 * var(--u));
}

.field{ display:grid; gap:calc(.6 * var(--u)); }

.field label{
  font-size:max(12px, calc(.95 * var(--u)));
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

.field__opt{
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  color:rgba(255,255,255,.4);
}

.field input,
.field textarea{
  width:100%;
  padding:calc(1.1 * var(--u)) calc(1.3 * var(--u));
  border:1px solid rgba(255,255,255,.18);
  border-radius:calc(.6 * var(--u));
  background:rgba(0,0,0,.28);
  color:var(--white);
  font:inherit;
  font-size:max(15px, calc(1.1 * var(--u)));
  transition:border-color .2s ease, background .2s ease;
}

.field textarea{ resize:vertical; min-height:calc(9 * var(--u)); }

.field input::placeholder,
.field textarea::placeholder{ color:rgba(255,255,255,.34); }

.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--yellow);
  background:rgba(0,0,0,.4);
}

.check{
  display:flex;
  align-items:flex-start;
  gap:calc(.9 * var(--u));
  font-size:max(13px, calc(1 * var(--u)));
  line-height:1.5;
  color:rgba(255,255,255,.66);
  cursor:pointer;
}

.check input{
  flex:none;
  width:20px;
  height:20px;
  margin-top:1px;
  accent-color:var(--yellow);
}

.btn--full{
  width:100%;
  justify-content:center;
  margin-top:calc(.6 * var(--u));
  border:0;
  cursor:pointer;
  font-family:inherit;
}

.form__status{
  margin:0;
  min-height:1.2em;
  font-size:max(13px, calc(1 * var(--u)));
  line-height:1.6;
  color:var(--yellow);
}

/* ==========================================================================
   MOBIL / TABLET – dotazy a kontakt
   ========================================================================== */

@media (max-width:1100px){
  .faq__grid{ grid-template-columns:1fr; gap:calc(3 * var(--u)); }
  .faq__photo{ position:static; }
  .contact__card{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .faq,
  .contact{ padding-block:56px; }

  .faq__head{ margin-bottom:28px; }
  .faq__grid{ gap:28px; }
  .qa summary{ padding-block:18px; gap:16px; }
  .qa__a{ padding-bottom:18px; padding-right:0; }

  .contact__card{ padding:22px; gap:28px; border-radius:14px; }
  .contact__lede{ margin-bottom:22px; }
  .form__row{ grid-template-columns:1fr; }
  .field input,
  .field textarea{ padding:12px 14px; border-radius:10px; }
  .field textarea{ min-height:130px; }
}

/* ==========================================================================
   PATIČKA
   ========================================================================== */

/* Čistá plochá čerň proti fotografickému pozadí kontaktu – patička se
   tím jasně oddělí, aniž by přišla nová barva. */
.foot{
  background:#000;
  color:var(--white);
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:calc(6.4 * var(--u)) calc(3 * var(--u));
}

.foot__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.foot__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.2fr 1fr;
  gap:calc(4 * var(--u));
  padding-bottom:calc(5 * var(--u));
}

.foot__motto{
  margin:calc(2 * var(--u)) 0 calc(1 * var(--u));
  max-width:32ch;
  font-size:max(14px, calc(1.08 * var(--u)));
  line-height:1.6;
  color:rgba(255,255,255,.72);
}

.foot__addr{
  margin:0 0 calc(2.4 * var(--u));
  font-size:max(13px, calc(1 * var(--u)));
  line-height:1.6;
  color:rgba(255,255,255,.5);
}

.foot__social{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:calc(1 * var(--u));
}

.foot__social a{
  display:grid;
  place-items:center;
  width:calc(2.9 * var(--u));
  height:calc(2.9 * var(--u));
  min-width:40px;
  min-height:40px;
  color:rgba(255,255,255,.62);
  transition:color .22s ease, transform .28s ease;
}

.foot__social svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.foot__social a:hover,
.foot__social a:focus-visible{
  color:var(--yellow);
  transform:translateY(-2px);
}

.foot__h{
  margin:0 0 calc(1.8 * var(--u));
  font-size:max(15px, calc(1.3 * var(--u)));
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--white);
}

.foot__col ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:calc(1.1 * var(--u));
}

.foot__col li{
  font-size:max(13px, calc(1.02 * var(--u)));
  line-height:1.5;
  color:rgba(255,255,255,.56);
}

.foot__col a{
  color:rgba(255,255,255,.56);
  text-decoration:none;
  transition:color .2s ease;
}

.foot__col a:hover,
.foot__col a:focus-visible{ color:var(--yellow); }

.foot__contact a{ color:rgba(255,255,255,.78); }

.foot__ids{
  padding-top:calc(.6 * var(--u));
  font-size:max(12px, calc(.95 * var(--u)));
  color:rgba(255,255,255,.42);
}

.foot__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(2 * var(--u));
  padding-top:calc(2.2 * var(--u));
  border-top:1px solid rgba(255,255,255,.12);
  font-size:max(12px, calc(.98 * var(--u)));
  color:rgba(255,255,255,.5);
}

.foot__bar p{ margin:0; }

.foot__bar a{
  color:rgba(255,255,255,.5);
  text-decoration:none;
  transition:color .2s ease;
}

.foot__bar a:hover,
.foot__bar a:focus-visible{ color:var(--yellow); }

@media (max-width:1100px){
  .foot__grid{
    grid-template-columns:1fr 1fr;
    gap:calc(3.4 * var(--u));
  }
}

@media (max-width:900px){
  .foot{ padding-block:44px 24px; }
  .foot__grid{
    grid-template-columns:1fr;
    gap:32px;
    padding-bottom:32px;
  }
  .foot__motto{ margin:18px 0 8px; }
  .foot__addr{ margin-bottom:18px; }
  .foot__h{ margin-bottom:14px; }
  .foot__col ul{ gap:10px; }
  .foot__bar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding-top:18px;
  }
}

/* ==========================================================================
   PŘIŠPENDLENÁ NAVIGACE
   ========================================================================== */

/* Lišta je fixní, aby zůstala nahoře a zároveň ležela nad hero fotkou
   (sticky by si v toku vyhradilo místo a odsunulo hero dolů). */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  transition:background .28s ease, backdrop-filter .28s ease, box-shadow .28s ease;
}

.topbar__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Po odscrollování hero dostane lišta sklo, ať je text čitelný i nad
   světlými sekcemi. */
.topbar.is-stuck{
  background:rgba(5,5,5,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
          backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

.topbar.is-stuck .nav{
  margin-top:0;
  border-top-color:transparent;
  border-bottom-color:transparent;
}

.topbar.is-stuck .nav__logo-sub{ opacity:0; }

.nav{ transition:margin-top .28s ease, border-color .28s ease; }
.nav__logo-sub{ transition:opacity .2s ease; }

/* Hero si musí uvolnit místo pod lištou, aby nadpis zůstal, kde byl. */
.hero__inner{ padding-top:calc(7.26 * var(--u)); }

/* Kotvy počítají s výškou lišty – hodnotu dopočítá skript. */
[id]{ scroll-margin-top:calc(var(--navh, 90px) + 14px); }

/* --- aktivní sekce ------------------------------------------------------- */

.nav__links a.is-active{ color:var(--yellow); }
.nav__links a.is-active .nav__ico{ opacity:1; }
.nav__links a.is-active span::after{ transform:scaleX(1); }

/* Na mobilu je lišta kompaktní – odkazy jsou skryté, zůstává logo a telefon. */
@media (max-width:900px){
  .hero__inner{ padding-top:84px; }
  .topbar.is-stuck .nav{ height:56px; }
}