/* ============================================================
   PÍSMA — hostovaná lokálně (žádné volání na Google)
   Variabilní řezy, podsada latin + latin-ext (kompletní čeština).
   Licence OFL, plné znění ve fonts/OFL-*.txt
   ============================================================ */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  font-weight:200 800;
  font-stretch:75% 100%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Manrope";
  src:url("fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   TOKENY
   ============================================================ */
:root{
  --ink:      #0B1F22;   /* temná petrolejová – hero, patička */
  --ink-soft: #143034;
  --petrol:   #11463F;   /* hlavní firemní tón */
  --pulse:    #5FD0B0;   /* akcent, používat velmi střídmě */
  --sand:     #E8DDCB;
  --paper:    #F6F2EA;
  --muted:    #3F5457;
  --line:     rgba(11,31,34,.14);
  --line-dk:  rgba(232,221,203,.18);

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:    "Manrope", system-ui, -apple-system, sans-serif;

  --pad: clamp(20px, 5vw, 72px);
  --maxw: 1240px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:clamp(15px,.55vw + 13.5px,17px);
  line-height:1.62;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

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

.eyebrow{
  font-family:var(--display);
  font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.eyebrow--light{ color:rgba(232,221,203,.82); }

/* ============================================================
   HLAVIČKA
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px var(--pad);
  background:rgba(11,31,34,.0);
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(246,242,234,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
}
.hdr.is-dark{ color:var(--sand); }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 1 auto; min-width:0; }
.brand__mark{ width:26px; height:34px; flex:none; }
.brand__txt{
  font-family:var(--display); font-weight:700;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.15; white-space:nowrap;
}
.brand__txt small{ display:block; font-weight:400; letter-spacing:.2em; opacity:.55; font-size:.62rem; white-space:nowrap; }

.nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav__lnk{
  text-decoration:none;
  position:relative; background:none; border:0; padding:6px 0; cursor:pointer;
  font-family:var(--display); font-size:.74rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; opacity:.62;
  transition:opacity .3s var(--ease);
}
.nav__lnk::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__lnk:hover{ opacity:1; }
.nav__lnk:hover::after,
.nav__lnk[aria-current="page"]::after{ transform:scaleX(1); }
.nav__lnk[aria-current="page"]{ opacity:1; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--sand);
  min-height:100svh;
  display:flex; align-items:center;
  padding-top:clamp(112px,15vh,148px); padding-bottom:clamp(40px,6vh,72px);
}
.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(120vw,1100px); aspect-ratio:1;
  right:-22%; top:-32%;
  background:radial-gradient(circle,rgba(95,208,176,.16) 0%,rgba(95,208,176,0) 62%);
}
.hero__grid{
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,64px);
  align-items:center;
}

.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-bottom:clamp(20px,4vh,40px); }
.hero__meta span{ display:inline-flex; align-items:center; gap:9px; }
.hero__meta i{ width:5px; height:5px; border-radius:50%; background:var(--pulse); flex:none; }

/* velký nápis */
.wordmark{ margin:0; line-height:.86; }
.wordmark__line{ display:block; overflow:hidden; padding-bottom:.04em; }
.wordmark__ch{
  display:inline-block; will-change:transform;
  font-family:var(--display);
  font-weight:520;
  font-size:clamp(2.55rem,10.4vw,8.6rem);
  font-variation-settings:"wdth" 82,"opsz" 96;
  letter-spacing:-.022em;
  text-transform:uppercase;
}
.wordmark__ch--sp{ width:.26em; }
.wordmark__line--2 .wordmark__ch{ color:var(--pulse); font-variation-settings:"wdth" 78,"opsz" 96; font-weight:400; }

.hero__lead{
  max-width:44ch; margin:clamp(20px,3.4vh,32px) 0 0;
  color:rgba(232,221,203,.88); font-weight:400;
  font-size:clamp(1rem,.4vw + .92rem,1.12rem);
}

/* tlačítko */
.cta{
  position:relative; display:inline-flex; align-items:center; gap:16px;
  margin-top:clamp(26px,4vh,40px);
  padding:19px 30px; border:0; border-radius:999px; cursor:pointer;
  background:var(--pulse); color:var(--ink); text-decoration:none;
  font-family:var(--display); font-weight:700;
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
  overflow:hidden; isolation:isolate;
}
.cta__t{ position:relative; z-index:2; }
.cta__fill{
  position:absolute; inset:0; z-index:1; background:var(--sand);
  transform:scaleX(0); transform-origin:left; border-radius:inherit;
}
.cta__ar{ position:relative; z-index:2; width:19px; height:19px; }
.cta__halo{
  position:absolute; inset:-1px; z-index:0; border-radius:inherit;
  border:1.5px solid var(--pulse); opacity:0;
}
.cta--ghost{ background:transparent; color:var(--sand); border:1.5px solid var(--line-dk); }
.cta--ghost .cta__fill{ background:var(--sand); }
.cta--ghost:hover{ color:var(--ink); }
.cta--ink{ background:var(--petrol); color:var(--sand); }
.cta--ink .cta__fill{ background:var(--ink); }

/* páteř */
.spine{
  position:relative;
  height:clamp(280px,52vh,520px);
  width:auto; margin-inline:auto;
}
.spine__svg{
  height:100%; width:auto; overflow:visible;
  will-change:transform; backface-visibility:hidden;
}
/* Popisky mají vlastní kompozitní vrstvu, aby je nepřekresloval
   překreslující se SVG obratel vedle nich → text se nechvěje.      */
.spine__legend{
  position:absolute; inset:0; pointer-events:none;
  font-family:var(--display); font-size:.6rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(232,221,203,.72);
  will-change:transform; backface-visibility:hidden;
  transform:translateZ(0);
}
.spine__legend b{
  position:absolute; right:100%; display:flex; align-items:center; gap:7px;
  font-weight:600; white-space:nowrap;
  /* samostatná vlastnost `translate` — GSAP píše do `transform`,
     takže si centrování a animace navzájem nepřepisují hodnotu     */
  translate:0 -50%;
  will-change:transform, opacity;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.spine__legend b::after{
  content:""; width:13px; height:1px; background:currentColor;
  transform-origin:left center;
}
@media (max-width:1140px){ .spine__legend{ display:none; } }
.spine__cap{
  margin:16px 0 0; margin-left:auto; max-width:172px; text-align:right;
  font-family:var(--display); font-size:.6rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(232,221,203,.68);
}

/* ============================================================
   SEKCE
   ============================================================ */
.sec{ padding-block:clamp(64px,11vh,130px); }
.sec--paper{ background:var(--paper); }
.sec--sand{ background:var(--sand); }
.sec__head{ margin-bottom:clamp(34px,6vh,64px); }
.sec__ttl{
  font-family:var(--display); font-weight:520;
  font-size:clamp(1.9rem,5.4vw,4rem);
  font-variation-settings:"wdth" 86,"opsz" 60;
  letter-spacing:-.02em; line-height:.98; text-transform:uppercase;
  margin:12px 0 0;
}
.sec__ttl em{ font-style:normal; color:var(--petrol); }

/* karty služeb */
.cards{ display:grid; gap:clamp(14px,1.6vw,22px); grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.card{
  position:relative; display:flex; flex-direction:column;
  padding:clamp(24px,2.6vw,34px);
  background:#fff; border:1px solid rgba(11,31,34,.22); border-radius:22px;
  box-shadow:0 1px 2px rgba(11,31,34,.04), 0 12px 30px -18px rgba(11,31,34,.18);
  overflow:hidden;
}
.card__bar{
  position:absolute; left:0; top:0; width:100%; height:3px;
  background:var(--pulse); transform:scaleX(0); transform-origin:left;
}
.card__ico{ width:56px; height:56px; margin-bottom:26px; color:var(--petrol); }
.card__ico *{ stroke-width:2.2; }
.card__tag{
  font-family:var(--display); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--petrol);
  margin:0 0 12px;
}
.card__ttl{
  color:var(--ink);
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.06rem,1vw + .84rem,1.34rem);
  font-variation-settings:"wdth" 90;
  letter-spacing:-.01em; line-height:1.14; text-transform:uppercase;
  margin:0 0 12px;
}
.card__txt{ margin:0; color:#2E4245; font-weight:400; }
.card__foot{
  margin-top:auto; padding-top:24px;
  font-family:var(--display); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* pás s parametry */
.strip{ background:var(--petrol); color:var(--sand); }
.strip__grid{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--line-dk);
}
.strip__cell{ background:var(--petrol); padding:clamp(26px,3.4vw,44px) clamp(18px,2vw,30px); }
.strip__k{
  font-family:var(--display); font-size:.64rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(232,221,203,.72);
  margin:0 0 12px;
}
.strip__v{
  font-family:var(--display); font-weight:520;
  font-size:clamp(1.3rem,2.4vw,1.95rem);
  font-variation-settings:"wdth" 88; letter-spacing:-.015em; line-height:1.06;
  margin:0;
}
.strip__v small{ display:block; font-size:.72rem; font-weight:400; letter-spacing:.04em; opacity:.78; margin-top:8px; text-transform:none; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__btn{
  width:100%; display:flex; align-items:flex-start; gap:clamp(14px,2.4vw,32px);
  padding:clamp(22px,3vw,32px) 0; background:none; border:0; cursor:pointer;
  text-align:left;
}
.faq__idx{
  flex:none; margin-top:.42em;
  font-family:var(--display); font-size:.66rem; font-weight:700;
  letter-spacing:.14em; color:var(--petrol);
}
.faq__q{
  flex:1; margin:0;
  font-family:var(--display); font-weight:520;
  font-size:clamp(1.02rem,1.3vw + .78rem,1.52rem);
  font-variation-settings:"wdth" 92; letter-spacing:-.012em; line-height:1.22;
  transition:color .35s var(--ease);
}
.faq__btn:hover .faq__q{ color:var(--petrol); }
.faq__sign{ flex:none; width:22px; height:22px; margin-top:.35em; position:relative; }
.faq__sign::before,.faq__sign::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--ink);
}
.faq__sign::before{ width:22px; height:1.5px; transform:translate(-50%,-50%); }
.faq__sign::after{ width:1.5px; height:22px; transform:translate(-50%,-50%); transition:transform .45s var(--ease); }
.faq__btn[aria-expanded="true"] .faq__sign::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq__panel{ height:0; overflow:hidden; }
.faq__a{
  max-width:70ch; margin:0;
  padding:0 0 clamp(24px,3vw,34px) clamp(28px,4.6vw,56px);
  color:var(--muted); font-weight:400;
}
.faq__a > p{ margin:0; }
.faq__a > p + *{ margin-top:18px; }

/* „Kudy k nám" – popisek a dvousloupcový rozpis dopravy */
.route__lbl{
  font-family:var(--display); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink); opacity:.8;
}
.route{
  margin:10px 0 0; padding:0;
  display:grid; grid-template-columns:max-content 1fr; gap:12px 16px;
}
.route dt{
  font-family:var(--display); font-size:.7rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--petrol); padding-top:.3em; white-space:nowrap;
}
.route dd{ margin:0; }
.route__foto{ white-space:nowrap; }
.cbox .route{ margin-top:2px; }
@media (min-width:860px){
  /* v sirokem boxu se obe dvojice vejdou vedle sebe */
  .cbox--wide .route{
    grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr);
    gap:14px 18px;
  }
}
@media (max-width:560px){
  .route{ grid-template-columns:1fr; gap:3px; }
  .route dt{ padding-top:0; }
  .route dt + dd{ margin-bottom:9px; }
}

/* ============================================================
   KONTAKT
   ============================================================ */
.contact{ display:grid; gap:clamp(20px,3vw,32px); grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }
.cbox{
  padding:clamp(24px,2.8vw,38px);
  background:#fff; border:1px solid var(--line); border-radius:22px;
}
.cbox--wide{ grid-column:1 / -1; }
.cbox__k{
  font-family:var(--display); font-size:.64rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin:0 0 16px;
}
.cbox__v{
  margin:0; font-family:var(--display); font-weight:520;
  font-size:clamp(1.1rem,1.5vw,1.5rem);
  font-variation-settings:"wdth" 90; letter-spacing:-.015em; line-height:1.24;
  word-break:break-word;
}
.cbox__v a{ text-decoration:none; border-bottom:1.5px solid var(--pulse); }
.cbox__sub{ margin:9px 0 0; color:var(--muted); font-weight:400; font-size:.9rem; }
.cbox__note{ margin:14px 0 0; color:var(--muted); font-weight:400; font-size:.94rem; }
.hours{ list-style:none; margin:0; padding:0; }
.hours li{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:.86rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.hours li:last-child{ border-bottom:0; }
.hours li[data-off]{ color:var(--muted); opacity:.72; }
.maplink{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  text-decoration:none; font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--petrol);
}
.maplink svg{ width:15px; height:15px; }
.maplink + .maplink{ margin-top:10px; }
.cbox .maplink{ display:flex; width:fit-content; }

/* ============================================================
   PATIČKA
   ============================================================ */
.ftr{ background:var(--ink); color:rgba(232,221,203,.82); padding-block:clamp(48px,7vh,80px); }
.ftr__top{
  display:flex; flex-wrap:wrap; gap:26px; justify-content:space-between; align-items:flex-end;
  padding-bottom:34px; border-bottom:1px solid var(--line-dk);
}
.ftr__ttl{
  margin:0; color:var(--sand);
  font-family:var(--display); font-weight:520;
  font-size:clamp(1.5rem,4vw,2.6rem);
  font-variation-settings:"wdth" 84; letter-spacing:-.02em; line-height:1; text-transform:uppercase;
}
.ftr__bot{
  display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between;
  padding-top:26px;
  font-family:var(--display); font-size:.66rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}

/* ============================================================
   PODSTRÁNKY
   ============================================================ */
.subhead{
  background:var(--ink); color:var(--sand);
  padding-top:clamp(120px,17vh,190px); padding-bottom:clamp(44px,7vh,84px);
}
.subhead__ttl{
  margin:14px 0 0;
  font-family:var(--display); font-weight:520;
  font-size:clamp(2.1rem,7.4vw,5.4rem);
  font-variation-settings:"wdth" 82,"opsz" 72;
  letter-spacing:-.024em; line-height:.94; text-transform:uppercase;
}
.subhead__lead{ max-width:52ch; margin:20px 0 0; color:rgba(232,221,203,.86); font-weight:400; }

/* skip link */
.skip{
  position:absolute; left:-9999px; z-index:99;
  background:var(--pulse); color:var(--ink); padding:12px 18px; border-radius:8px;
  font-family:var(--display); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--pulse); outline-offset:3px; border-radius:4px; }

/* ============================================================
   RESPONZIVITA
   ============================================================ */
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; align-items:start; }
  .spine{ display:none; }
  .hero{ min-height:auto; padding-top:132px; padding-bottom:64px; }
}
@media (max-width:620px){
  /* logo zůstává celé – jen se zmenší, nikdy se neschovává */
  .hdr{ gap:10px; padding-inline:clamp(14px,4vw,20px); }
  .brand{ gap:8px; min-width:0; }
  .brand__mark{ width:21px; height:27px; }
  .brand__txt{ font-size:.66rem; letter-spacing:.09em; line-height:1.2; }
  .brand__txt small{ display:block; font-size:.575rem; letter-spacing:.1em; }
  .nav{ gap:14px; }
  .nav__lnk{ font-size:.66rem; letter-spacing:.08em; }
  .hero__meta{ flex-direction:column; gap:8px; }
  .cta{ width:100%; justify-content:space-between; }
}
@media (max-width:400px){
  .brand__mark{ width:19px; height:25px; }
  .brand__txt{ font-size:.6rem; letter-spacing:.06em; }
  .brand__txt small{ font-size:.52rem; letter-spacing:.07em; }
  .nav{ gap:11px; }
  .nav__lnk{ font-size:.6rem; letter-spacing:.05em; }
  /* pojistka, aby se i velký nápis v hero vešel na jeden řádek */
  .wordmark__ch{ font-size:clamp(2.05rem,10.4vw,8.6rem); }
}

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