/* ══════════════════════════════════════════════════════════════════════════
   BOZP Solution — editorial one-pager
   Palette: near-black · warm off-white · single magenta accent
   Type: Anton (condensed display caps) · Archivo (body + UI)
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────  písma (vlastní hosting)  ─────────────────────────
   Podmnožina latinky včetně české diakritiky. Vlastní hosting ušetří dvě
   spojení navíc na cizí doménu a stránka se vykreslí dřív.
   Anton a Archivo — SIL Open Font License 1.1.
   ──────────────────────────────────────────────────────────────────────────── */
@font-face{
  font-family:"Anton";
  src:url("../fonts/anton-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var.woff2") format("woff2-variations"),
      url("../fonts/archivo-var.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ─────────────────────────────  tokens  ───────────────────────────── */
:root{
  --ink:        #0B0B0B;
  --cream:      #F3F1EC;
  --cream-2:    #E9E6DF;

  --accent:     #FF00E6;   /* on dark, large type            */
  --accent-deep:#C4008F;   /* on cream, small type (AA 5:1)  */

  --on-dark:    #F3F1EC;
  --on-dark-mut:rgba(243,241,236,.55);
  --on-light:   #0B0B0B;
  --on-light-mut:rgba(11,11,11,.58);

  --hair-light: rgba(11,11,11,.14);

  /* notch / home-indicator insets — the page is viewport-fit=cover, so every
     corner element has to be pushed clear of them by hand */
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --pad:  calc(clamp(1.25rem, 4.5vw, 5rem) + var(--safe-x));
  --gap:  clamp(1.5rem, 3vw, 3.5rem);
  --sect: clamp(6.5rem, 14vh, 12rem);

  --chrome-y: clamp(1.1rem, 2.4vw, 2.15rem);

  --fs-micro: .6875rem;
  --fs-body:  clamp(1rem, .93rem + .22vw, 1.0625rem);
  --fs-small: clamp(.875rem, .84rem + .16vw, .9375rem);

  --ease:  cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.62,.05,.2,1);

  --logo-w: clamp(88px, 9vw, 130px);

  /* rail s čísly sekcí je fixní u pravého okraje — obsah mu musí uhnout,
     jinak přes něj přejíždí. Pod 1025 px se rail skrývá a drážka zmizí. */
  --rail-w: 0px;
}

/* ─────────────────────────────  reset  ───────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--cream);
  overscroll-behavior-y:none;
}

body{
  background:var(--cream);
  color:var(--on-light);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

img,svg,video{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--accent); color:#fff; }

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

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:200;
  padding:.6rem 1rem; background:var(--ink); color:var(--on-dark);
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  transform:translateY(-160%);
  transition:transform .3s var(--ease);
}
.skip:focus{ transform:none; }

/* ─────────────────────────────  primitives  ───────────────────────────── */
.wrap{
  width:100%; max-width:1760px;
  margin-inline:auto;
  padding-left:var(--pad);
  padding-right:calc(var(--pad) + var(--rail-w));
}

@media (min-width:1025px){
  :root{ --rail-w:4.5rem; }
}

/* the voice of the page — heavy condensed caps, set very tight */
.display{
  font-family:"Anton","Archivo Narrow","Arial Narrow",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(2.75rem, 7.4vw, 7.5rem);
  line-height:1.13;
  letter-spacing:.004em;
  text-transform:uppercase;
}

.accent{ color:var(--accent-deep); }

.kicker{
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1;
  color:var(--accent-deep);
}

/* numbered mark + rule that runs off toward the right */
.mark{
  display:flex; align-items:center; gap:clamp(1.25rem,3vw,2.5rem);
  margin-bottom:clamp(2rem,5vh,3.5rem);
}
.mark__num{
  font-family:"Anton","Arial Narrow",Impact,sans-serif;
  font-size:clamp(2.1rem,4vw,3.4rem);
  line-height:.85;
  letter-spacing:.01em;
}
.mark__rule{
  flex:1 1 auto;
  max-width:clamp(6rem,18vw,17rem);
  height:1px;
  background:var(--accent-deep);
}

/* the link style of this design: an underlined word, a line, an arrow */
.lnk{
  display:inline-flex; align-items:center; gap:.9rem;
  padding-block:.45rem;
  color:var(--accent-deep);
  font-size:var(--fs-small);
}
.lnk span{ padding-bottom:.22em; border-bottom:1px solid currentColor; }
.lnk i{
  position:relative;
  display:block; height:1px; width:clamp(2.75rem,7vw,6rem);
  background:currentColor;
  transition:width .55s var(--ease);
}
.lnk i::after{
  content:"";
  position:absolute; right:0; top:50%;
  width:6px; height:6px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

/* plain inline link, where the text itself has to stay selectable */
.ln{
  color:var(--accent-deep);
  padding-bottom:.08em;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--ease), color .35s var(--ease);
}
.ln:focus-visible{ background-size:0% 1px; background-position:100% 100%; color:var(--on-light); }

/* ─────────────────────────────  reveal  ───────────────────────────── */
.reveal{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
/* the service panels and the contact block bring the heading in from the left
   and its copy from the right, so the two columns read as a pair arriving */
.reveal--l{ transform:translate3d(calc(-1 * clamp(2.5rem,4vw,5rem)),0,0); }
.reveal--r{ transform:translate3d(clamp(2.5rem,4vw,5rem),0,0); }
.reveal.is-in{ opacity:1; transform:none; will-change:auto; }

/* ─────────────────────────────  grain  ───────────────────────────── */
.grain{
  position:fixed; inset:-8%;
  z-index:90; pointer-events:none;
  opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='.4'/></svg>");
  mix-blend-mode:overlay;
  animation:grain 6s steps(1) infinite;
}
@media (pointer:coarse){ .grain{ animation:none; opacity:.36; } }
@keyframes grain{
  0%{transform:translate3d(0,0,0)}      10%{transform:translate3d(-3%,-2%,0)}
  20%{transform:translate3d(2%,3%,0)}   30%{transform:translate3d(-1%,2%,0)}
  40%{transform:translate3d(3%,-2%,0)}  50%{transform:translate3d(-2%,1%,0)}
  60%{transform:translate3d(1%,-3%,0)}  70%{transform:translate3d(-3%,2%,0)}
  80%{transform:translate3d(2%,-1%,0)}  90%{transform:translate3d(-1%,-2%,0)}
}

/* ══════════════════════════════  fixed chrome  ══════════════════════════════ */
.chrome{
  position:fixed; inset:0 0 auto 0;
  z-index:120;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:calc(var(--chrome-y) + var(--safe-t)) var(--pad) var(--chrome-y);
  pointer-events:none;
}
.chrome > *{ pointer-events:auto; position:relative; z-index:1; }

.chrome::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:calc(clamp(5rem,9vw,7.5rem) + var(--safe-t));
  pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease);
}
body.is-scrolled .chrome::before{ opacity:1; }
body[data-chrome="dark"] .chrome::before{
  background:linear-gradient(to bottom,
    rgba(243,241,236,.97) 0%, rgba(243,241,236,.80) 38%, rgba(243,241,236,0) 100%);
}
body[data-chrome="light"] .chrome::before{
  background:linear-gradient(to bottom,
    rgba(9,9,10,.94) 0%, rgba(9,9,10,.70) 38%, rgba(9,9,10,0) 100%);
}

.chrome__left{ position:relative; }

.chrome__logo{
  position:relative; display:block; width:var(--logo-w);
  padding-block:.7rem; margin-block:-.7rem;   /* hit area only */
  transition:opacity .45s var(--ease);
}
.chrome__logo-img{ width:100%; height:auto; transition:opacity .55s var(--ease); }
.chrome__logo-img--dark{ position:absolute; inset:.7rem 0 auto 0; }

body[data-chrome="light"] .chrome__logo-img--light{ opacity:1; }
body[data-chrome="light"] .chrome__logo-img--dark { opacity:0; }
body[data-chrome="dark"]  .chrome__logo-img--light{ opacity:0; }
body[data-chrome="dark"]  .chrome__logo-img--dark { opacity:1; }

/* past the hero the mark steps aside and names the section instead */
.chrome__where{
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  font-size:var(--fs-small);
  color:var(--chrome-fg,var(--on-dark));
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease), color .5s var(--ease);
}
body.past-hero .chrome__logo{ opacity:0; pointer-events:none; }
body.past-hero .chrome__where{ opacity:1; }

.chrome__right{
  display:flex; align-items:center; gap:clamp(1.25rem,2.6vw,2.5rem);
  padding-top:.15rem;
}

/* language */
.lang{ display:flex; align-items:center; gap:.45em; line-height:1; margin:-.85rem -.5rem; }
.lang__btn{
  padding:.85rem .5rem;                        /* hit area only */
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--chrome-mut,var(--on-dark-mut));
  transition:color .35s var(--ease);
}
.lang__btn.is-active{ color:var(--accent); }
.lang__sep{ font-size:var(--fs-micro); color:var(--chrome-mut,var(--on-dark-mut)); padding-block:.85rem; }

body[data-chrome="light"]{ --chrome-fg:var(--on-dark);  --chrome-mut:var(--on-dark-mut); }
body[data-chrome="dark"] { --chrome-fg:var(--on-light); --chrome-mut:var(--on-light-mut); }
body[data-chrome="dark"] .lang__btn.is-active{ color:var(--accent-deep); }

/* hamburger — three lines of different length */
.burger{
  position:relative; display:block;
  padding:.85rem .35rem .85rem 1rem;           /* hit area only */
  margin:-.85rem -.35rem -.85rem -1rem;
}
.burger__box{ position:relative; display:block; width:30px; height:14px; }
.burger__line{
  position:absolute; right:0; height:1.5px;
  background:var(--chrome-fg,var(--on-dark));
  transition:transform .55s var(--ease), width .55s var(--ease),
             opacity .3s var(--ease), background-color .5s var(--ease);
}
.burger__line:nth-child(1){ top:0;    width:30px; }
.burger__line:nth-child(2){ top:6px;  width:20px; }
.burger__line:nth-child(3){ top:12px; width:26px; }

body.menu-open .burger__line{ background:var(--on-dark); }
body.menu-open .burger__line:nth-child(1){ width:30px; transform:translateY(6px) rotate(45deg); }
body.menu-open .burger__line:nth-child(2){ opacity:0; transform:translateX(12px); }
body.menu-open .burger__line:nth-child(3){ width:30px; transform:translateY(-6px) rotate(-45deg); }

/* ══════════════════════════════  section rail  ══════════════════════════════ */
.rail{
  position:fixed; right:var(--pad); top:50%;
  transform:translateY(-50%);
  z-index:110;
  transition:opacity .45s var(--ease);
}
.rail__list{ display:flex; flex-direction:column; gap:.35rem; }
.rail a{
  --mut:var(--on-dark-mut); --acc:var(--accent);
  display:flex; align-items:center; justify-content:flex-end; gap:.85rem;
  padding:.62rem 0 .62rem 1.5rem;              /* hit area only */
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.16em;
  line-height:1;
}
/* each row reads the section actually behind it, so the list stays legible
   even while a section boundary runs through the middle of it */
.rail a[data-on="dark"]{ --mut:var(--on-light-mut); --acc:var(--accent-deep); }

.rail__num{ color:var(--mut); transition:color .35s var(--ease); }
.rail__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--mut);
  transition:background-color .35s var(--ease), transform .5s var(--ease);
}
.rail a.is-active .rail__num{ color:var(--acc); }
.rail a.is-active .rail__dot{ background:var(--acc); transform:scale(1.5); }

body.menu-open .rail{ opacity:0; pointer-events:none; }

/* ══════════════════════════════  overlay menu  ══════════════════════════════ */
.menu{
  position:fixed; inset:0; z-index:115;
  display:flex; align-items:flex-end;
  overscroll-behavior:contain;
}
.menu[hidden]{ display:none; }

.menu__sheet{
  position:absolute; inset:0;
  background:var(--ink);
  transform:scaleY(0); transform-origin:top;
  transition:transform .8s var(--ease-io);
}
body.menu-open .menu__sheet{ transform:scaleY(1); }

.menu__inner{
  position:relative;
  width:100%; max-width:1760px;
  margin-inline:auto;
  padding:0 var(--pad) calc(clamp(2.5rem,6vh,5rem) + var(--safe-b));
  display:grid; grid-template-columns:1fr auto;
  align-items:end; gap:var(--gap);
  color:var(--on-dark);
}

.menu__nav{ display:flex; flex-direction:column; }
.menu__link{
  position:relative;
  display:flex; align-items:baseline; gap:clamp(.9rem,2vw,2rem);
  font-family:"Anton","Arial Narrow",Impact,sans-serif;
  font-size:clamp(2.4rem,8vw,6.5rem);
  line-height:1.14;
  letter-spacing:.008em;
  text-transform:uppercase;
  padding:.3em 0 .04em;
  margin-top:-.26em;
  overflow:hidden;
}
.menu__link i{
  font-family:"Archivo",sans-serif;
  font-style:normal;
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.2em;
  color:var(--on-dark-mut);
  transform:translateY(-.5em);
  transition:color .4s var(--ease);
}
.menu__link span{
  display:inline-block;
  transform:translate3d(0,150%,0);
  transition:transform .85s var(--ease), color .4s var(--ease);
  transition-delay:var(--d,0ms);
}
body.menu-open .menu__link span{ transform:none; }
.menu__link:focus-visible span{ color:var(--accent); }

.menu__aside{
  display:flex; flex-direction:column; gap:clamp(1.25rem,2.6vw,2.25rem);
  align-items:flex-start; max-width:34ch;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease) .35s, transform .7s var(--ease) .35s;
}
body.menu-open .menu__aside{ opacity:1; transform:none; }
.menu__aside .kicker{ color:var(--on-dark-mut); margin-bottom:.7rem; }
.menu__block{ display:flex; flex-direction:column; gap:.15rem; }
.menu__contact{
  display:inline-block; padding-block:.42rem;
  font-size:var(--fs-body);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .45s var(--ease), color .35s var(--ease);
}
.menu__addr{ font-size:var(--fs-body); color:var(--on-dark-mut); }
.menu__motto{
  font-size:var(--fs-micro);
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-dark-mut);
}
.menu__motto em{ font-style:normal; color:var(--accent); }

/* ══════════════════════════════  01 · hero  ══════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) calc(clamp(2.4rem,7vh,4.5rem) + var(--safe-b));
  background:var(--ink);
  color:var(--on-dark);
  overflow:hidden;
  isolation:isolate;
}

.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(196deg,#191A1D 0%,#0D0D0F 46%,#060607 100%);
}
.hero__img,.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:72% 40%;      /* keeps the subject clear of the headline */
}
.hero__img{
  transform:scale(1.05);
  animation:heroDrift 24s var(--ease) forwards;
}
.hero__video{ opacity:0; }
.hero__video.is-playing{ opacity:1; transition:opacity 1s var(--ease); }
@keyframes heroDrift{ to{ transform:scale(1); } }

/* the type sits on the left, so the scrim is heaviest there */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(5,5,6,.93) 0%, rgba(5,5,6,.78) 34%, rgba(5,5,6,.30) 66%, rgba(5,5,6,.46) 100%),
    linear-gradient(to top,   rgba(5,5,6,.80) 0%, rgba(5,5,6,0) 42%),
    linear-gradient(to bottom,rgba(5,5,6,.74) 0%, rgba(5,5,6,0) 24%);
}

.hero__inner{ position:relative; max-width:min(100%,58rem); }

.hero__title{
  font-family:"Anton","Archivo Narrow","Arial Narrow",Impact,sans-serif;
  font-weight:400;
  font-size:clamp(2.45rem, 6.9vw, 7.6rem);
  line-height:1.13;
  letter-spacing:.004em;
  text-transform:uppercase;
}
/* padding-top keeps the reveal mask clear of Czech diacritics (Č, Í, Á) */
.hero__title .line{
  display:block; overflow:hidden;
  padding-top:.3em; margin-top:-.3em;
}
.hero__title .line > span{
  display:block;
  transform:translate3d(0,150%,0);
  transition:transform 1.2s var(--ease);
  transition-delay:var(--d,0ms);
}
body:not(.is-loading) .hero__title .line > span{ transform:none; }
.hero__title .accent{ color:var(--accent); }

.hero__lead{
  margin:clamp(1.5rem,4vh,2.4rem) 0 clamp(.9rem,2.2vh,1.35rem);
  max-width:34ch;
  font-size:1.125rem;
  font-weight:500;
  line-height:1.7;
  color:rgba(243,241,236,.86);
  text-wrap:pretty;
}

/* …BO ZÁKONÍK PRÁCE — the four accented letters spell out the abbreviation */
.hero__why{
  margin-bottom:clamp(1.4rem,3.5vh,2.2rem);
  font-size:.875rem;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  line-height:1.5;
  color:rgba(243,241,236,.72);
}
.hero__why em{ font-style:normal; color:var(--accent); }
/* the acrostic is a Czech pun on BOZP — it has nothing to say in English */
html[data-lang="en"] .hero__why,
html[data-lang="en"] .why{ display:none; }

.hero .lnk{ color:var(--accent); }

.scrollcue{
  position:absolute;
  right:var(--pad); bottom:calc(clamp(2.4rem,7vh,4.5rem) + var(--safe-b));
  display:inline-flex; align-items:center; gap:.7rem;
  padding-block:.6rem;
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--on-dark-mut);
  transition:color .4s var(--ease);
}
.scrollcue i{ font-style:normal; animation:nudge 2.4s var(--ease-io) infinite; }
@keyframes nudge{
  0%,100%{ transform:translateY(0); opacity:.6 }
  50%    { transform:translateY(5px); opacity:1 }
}

/* ══════════════════════════════  02 · o nás  ══════════════════════════════
   Dvě nestejné poloviny: vlevo nadpis přes celou výšku sekce, vpravo úzký
   sloupec, ve kterém jde všechen ostatní text pod sebou. Vejde se na jednu
   obrazovku, proto se velikosti řídí i výškou okna (svh), ne jenom šířkou.
   ══════════════════════════════════════════════════════════════════════════ */
.about{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(4.5rem,8svh,6.5rem) 0 clamp(2rem,5.5svh,4.5rem);
  background:var(--cream);
  overflow-x:clip;
}
.about__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:clamp(1.15rem,3.8svh,2.75rem);
  align-items:start;
}

.about__head{ grid-column:1 / span 5; grid-row:1; }
.about .display{ font-size:clamp(2rem, min(5.5vw, 9svh), 5.6rem); }
/* Každá věta je vlastní blok a láme se sama za sebe — balance přes celý
   nadpis by je počítal dohromady a nechával poslední řádek na jedno slovo. */
.about .display span{ display:block; text-wrap:balance; }

/* pravý sloupec — bloky pod sebou, v pořadí z podkladu od klienta */
.about__col{
  grid-column:7 / span 4; grid-row:1;
  display:flex; flex-direction:column;
  gap:clamp(1.3rem,3.4svh,2.4rem);
}
/* Výčet s magenta pomlčkou a vlasovou linkou pod každou položkou. Stejný
   tvar mají i panely služeb — obě sekce tak čtou jako jeden seznam. */
.about__list,
.panel__list{
  list-style:none;
  border-top:1px solid var(--hair-light);
}
.about__list li,
.panel__list li{
  position:relative;
  padding:.6em 0 .6em 1.5em;
  font-size:calc(var(--fs-small) * 1.06);
  line-height:1.5;
  color:var(--on-light-mut);
  border-bottom:1px solid var(--hair-light);
  transition:color .35s var(--ease);
}
.about__list li::before,
.panel__list li::before{
  content:"";
  position:absolute; left:.1em; top:1.25em;
  width:.6em; height:1px;
  background:var(--accent-deep);
  transition:width .45s var(--ease);
}

/* "a proč bezpečnost práce?" — počáteční písmena čtou svisle B O Z P */
.why .kicker{ margin-bottom:clamp(.7rem,1.8svh,1.2rem); }
.why__acrostic{
  font-family:"Anton","Archivo Narrow","Arial Narrow",Impact,sans-serif;
  font-size:clamp(1.25rem, min(2.4vw, 4svh), 2.1rem);
  line-height:1.06;
  letter-spacing:.004em;
  text-transform:uppercase;
  color:var(--on-light-mut);
}
.why__acrostic span{ display:block; }
.why__acrostic em{ font-style:normal; color:var(--accent-deep); }

.sign{
  font-size:var(--fs-small);
  line-height:1.65;
  color:var(--on-light-mut);
}
.sign em{ font-style:normal; font-weight:600; color:var(--on-light); }

/* pečeť drží horní pravý roh — vyvažuje číslo sekce vlevo nahoře */
.about__badge{ grid-column:11 / span 2; grid-row:1; justify-self:end; align-self:start; }

/* rotující pečeť */
.seal{ position:relative; width:clamp(84px,7vw,120px); aspect-ratio:1; display:grid; place-items:center; }
.seal__ring{
  position:absolute; inset:0; width:100%; height:100%;
  fill:var(--accent-deep);
  animation:spin 26s linear infinite;
}
.seal__ring text{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:15px; font-weight:600; text-transform:uppercase;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.seal__mark{ width:34%; height:auto; fill:var(--accent-deep); }
.seal__mark .seal__cut{ fill:var(--cream); }

/* ══════════════════════════════  03 · služby  ══════════════════════════════
   Každá služba je dvousloupcová: vlevo nadpis a pod ním fotka, vpravo výčet
   toho, co služba obsahuje. Rozvržení je u všech služeb stejné — přesně tak
   si ho klient nakreslil u BOZP i u požární ochrany.
   ══════════════════════════════════════════════════════════════════════════ */
.services{
  position:relative;
  background:var(--cream);
  overflow-x:clip;
}

/* Každý panel je jedna obrazovka — stejně jako hero, „O nás", přístup
   i kontakt. Obsah drží svislý střed. */
.panel{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(3.5rem,9vh,7rem);
}
.panel > .wrap{ width:100%; }
.panel + .panel{ border-top:1px solid var(--hair-light); }

.panel__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:clamp(1.5rem,4vh,2.75rem);
  align-items:start;
}

.panel__head{ grid-column:1 / span 5; grid-row:1; }
/* fotka drží levý dolní roh a je záměrně menší než nadpis nad ní */
.panel__media{ grid-column:1 / span 4; grid-row:2; }
/* výčet stojí na svislém středu panelu — levý sloupec je s fotkou vždycky
   vyšší, takže od kraje nahoře by text visel v prázdnu */
.panel__body{
  grid-column:7 / span 4; grid-row:1 / span 2;
  align-self:center;
  font-size:var(--fs-small);
}
/* pečeť v horním pravém rohu — stejná pozice jako v sekci „O nás" */
.panel__badge{ grid-column:11 / span 2; grid-row:1; justify-self:end; align-self:start; }

.panel__media picture{ display:block; }
.panel__media img{
  display:block; width:100%; height:auto;
  aspect-ratio:1113 / 1050;
  object-fit:cover; object-position:60% 50%;
}

.panel__lead{ max-width:56ch; color:var(--on-light-mut); text-wrap:pretty; }

.panel__list{ margin:0 0 clamp(1.25rem,3vh,2rem); }
.panel__lead + .panel__list{ margin-top:clamp(1.5rem,3.5vh,2.25rem); }

/* ══════════════════════════════  04 · přístup  ══════════════════════════════ */
.quote{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(5rem,13vh,9rem) 0;
  background:var(--ink);
  color:var(--on-dark);
  overflow:hidden;
  isolation:isolate;
}
.quote__media{ position:absolute; inset:0; z-index:-2; }
.quote__media::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(160deg,#131316 0%,#0A0A0B 60%,#050506 100%);
}
.quote__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:70% 36%;
}
.quote__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(5,5,6,.93) 0%, rgba(5,5,6,.76) 40%, rgba(5,5,6,.30) 100%),
    linear-gradient(to bottom,rgba(5,5,6,.66) 0%, rgba(5,5,6,0) 28%);
}

.quote__body{ position:relative; }
.quote__text{
  max-width:16ch;
  margin-bottom:clamp(1.75rem,4vh,2.75rem);
}
.quote__text .accent{ color:var(--accent); }
.quote .lnk{ color:var(--accent); }

.quote__vertical{
  position:absolute;
  right:calc(var(--pad) + clamp(3.5rem,6vw,7rem));
  top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  font-size:var(--fs-micro);
  font-weight:500;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:rgba(243,241,236,.3);
}

/* ══════════════════════════════  05 · kontakt  ══════════════════════════════ */
.contact{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  background:var(--cream);
  padding:var(--sect) 0 0;
  overflow-x:clip;
}
/* patička sedí na spodní hraně obrazovky, ne hned pod kontakty */
.contact .foot{ margin-top:auto; }
.contact__grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gap);
  row-gap:clamp(2.5rem,6vh,4rem);
  align-items:start;
}
/* stejné rozvržení jako „O nás": nadpis vlevo, sloupec vpravo, pečeť v rohu —
   jinak by pečeť odsunula sloupec o řádek níž a sekce by přerostla obrazovku */
.contact__head{ grid-column:1 / span 5; }
.contact__body{ grid-column:7 / span 4; padding-top:.5rem; }

.contact__note{
  max-width:40ch;
  font-size:var(--fs-small);
  color:var(--on-light-mut);
  text-wrap:pretty;
}
.contact__person strong{ font-weight:700; }
.contact__person{
  margin:clamp(2rem,5vh,3rem) 0 clamp(1.5rem,3.5vh,2.25rem);
  padding-top:clamp(1.5rem,3.5vh,2.25rem);
  border-top:1px solid var(--hair-light);
  font-size:clamp(1.25rem,2.2vw,1.7rem);
  line-height:1.15;
  letter-spacing:-.02em;
}
.contact__person strong{ font-weight:700; }

.contact__list{ display:grid; gap:clamp(1.25rem,3vh,1.9rem); }
.contact__list dt{
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--on-light-mut);
  margin-bottom:.5rem;
}
.contact__list dd{ font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.45; }
.contact__list dd .ln{ display:inline-block; padding-block:.4rem; }

/* footer */
.foot{
  margin-top:clamp(4.5rem,11vh,8rem);
  padding-block:clamp(1.75rem,3vh,2.5rem);
  border-top:1px solid var(--hair-light);
}
.foot__grid{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:1rem clamp(1.5rem,3vw,3rem);
}
/* adresa se láme jen v oddělovačích, ne uvnitř — jinak zůstane „1" z „Praha 1"
   viset sama na dalším řádku */
.foot__legal .nb{ white-space:nowrap; }
.foot__legal{
  font-size:.8125rem;
  line-height:1.85; letter-spacing:.01em;
  color:var(--on-light-mut);
  max-width:120ch;
}
/* copyright s kreditem na prvním řádku, zákonné údaje pod ním */
.foot__line{ display:block; }
.foot__sep{ margin-inline:.6em; }
/* kredit dodavatele — stejně tichý jako zbytek řádku */
.foot__credit .ln{ color:inherit; }
.foot__top{ font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase; }
.foot__top .ln{ display:inline-block; padding-block:.5rem; }

/* ══════════════════════════════  404  ══════════════════════════════
   Jedna obrazovka ve stylu úvodu: logo nahoře, nadpis a odkaz dole vlevo. */
.e404{ background:var(--ink); color:var(--on-dark); }
.e404__main{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  gap:var(--gap);
  padding:calc(var(--chrome-y) + var(--safe-t)) var(--pad) calc(clamp(2.4rem,7vh,4.5rem) + var(--safe-b));
}
.e404__logo{ display:block; width:var(--logo-w); }
.e404__logo img{ width:100%; height:auto; }
.e404__title{ max-width:14ch; }
.e404__text{
  margin:clamp(1.25rem,3vh,2rem) 0 clamp(.9rem,2.2vh,1.35rem);
  max-width:40ch;
  font-size:1.125rem; line-height:1.7;
  color:rgba(243,241,236,.86);
  text-wrap:pretty;
}
.e404 .lnk{ color:var(--accent); }

/* ══════════════════════════════  hover (pointer devices only)  ══════════════════════════════
   Gated so a tap on a touchscreen does not leave an element stuck in its
   hover state.
   ══════════════════════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  .lnk:hover i{ width:clamp(4rem,11vw,9rem); }
  .ln:hover{ background-size:0% 1px; background-position:100% 100%; color:var(--on-light); }
  .quote .ln:hover{ color:var(--on-dark); }

  .lang__btn:hover{ color:var(--chrome-fg,var(--on-dark)); }

  .burger:hover .burger__line:nth-child(2){ width:30px; }
  .burger:hover .burger__line:nth-child(3){ width:30px; }

  .rail a:hover .rail__num{ color:var(--acc); }
  .rail a:hover .rail__dot{ background:var(--acc); }

  .menu__link:hover span,
  .menu__link:hover i{ color:var(--accent); }
  .menu__contact:hover{ background-size:100% 1px; color:var(--accent); }

  .scrollcue:hover{ color:var(--on-dark); }

  .about__list li:hover,
  .panel__list li:hover{ color:var(--on-light); }
  .about__list li:hover::before,
  .panel__list li:hover::before{ width:1.05em; }
}

@media (hover:none){
  .lnk:active,.ln:active{ opacity:.55; }
  .menu__link:active span{ color:var(--accent); }
  .burger:active .burger__line{ opacity:.6; }
  .lang__btn:active{ opacity:.5; }
}

/* ══════════════════════════════  responsive  ══════════════════════════════ */
@media (max-width:1180px){
  .contact__head{ grid-column:1 / span 7; }
  .contact__body{ grid-column:1 / span 7; }
}

/* the rail rows get too fiddly to hit below this, and the menu covers it */
@media (max-width:1024px){
  .rail{ display:none; }
}

@media (max-width:900px){
  :root{ --logo-w:clamp(80px,17vw,112px); }

  .contact__head,.contact__body{ grid-column:1 / span 12; }

  /* pod dvousloupcovým zlomem se oba sloupce srovnají pod sebe a sekce se
     vrátí k běžnému toku — na jednu obrazovku by se stejně nevešla */
  .about{ min-height:0; display:block; padding:var(--sect) 0; }
  .panel{ min-height:0; display:block; }
  .contact{ min-height:0; }
  .about__head,.about__col{ grid-column:1 / span 12; grid-row:auto; }
  .about__badge{ grid-column:1 / span 12; grid-row:auto; justify-self:start; }

  .reveal--l,.reveal--r{ transform:translate3d(0,24px,0); }

  /* pod dvousloupcovým zlomem jde nadpis, fotka a výčet pod sebe */
  .panel__head  { grid-column:1 / span 12; grid-row:1; }
  .panel__media { grid-column:1 / span 12; grid-row:2; }
  .panel__body  { grid-column:1 / span 12; grid-row:3; }
  .panel__badge { grid-column:1 / span 12; grid-row:auto; justify-self:start; }
  .panel__media img{ aspect-ratio:16 / 10; }

  .quote__vertical{ display:none; }
  .quote__text{ max-width:none; }

  .menu{ align-items:flex-start; overflow-y:auto; }
  .menu__inner{
    grid-template-columns:1fr; align-items:start;
    gap:clamp(2.25rem,6vh,4rem);
    padding-top:calc(7rem + var(--safe-t));
  }
  .menu__aside{ max-width:none; }
}

@media (max-width:640px){
  .hero__title{ font-size:clamp(2.4rem,10.8vw,5.6rem); }
  .hero__lead{ max-width:32ch; }
  .display{ font-size:clamp(2.4rem,11.5vw,4.5rem); }
  .mark{ margin-bottom:1.5rem; }
  .mark__num{ font-size:2rem; }

  .contact__list{ gap:1.5rem; }
  .foot__grid{ flex-direction:column; align-items:flex-start; gap:1.25rem; }
}

@media (max-width:360px){
  :root{ --pad:calc(1.1rem + var(--safe-x)); }
  .contact__list dd{ font-size:1rem; }
}

/* phone held sideways: height, not width, is the scarce axis */
@media (orientation:landscape) and (max-height:560px){
  :root{ --chrome-y:.8rem; --logo-w:clamp(72px,8vw,92px); }

  .hero{
    padding-top:calc(3.2rem + var(--safe-t));
    padding-bottom:calc(1rem + var(--safe-b));
  }
  .hero__title{ font-size:min(5.45vw,12svh); }
  .hero__lead{ margin:.85rem 0 .8rem; max-width:52ch; }
  .scrollcue{ bottom:calc(1rem + var(--safe-b)); }

  .quote{ min-height:0; padding-block:clamp(3.5rem,11vh,6rem); }
  .about,.contact{ padding-top:clamp(4.5rem,13vh,7rem); }

  .menu__inner{ padding-top:calc(4.25rem + var(--safe-t)); gap:1.75rem; }
  .menu__link{ font-size:min(6.5vw,12svh); }
}

/* ══════════════════════════════  motion preferences  ══════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,.reveal--l,.reveal--r{ opacity:1; transform:none; }
  .hero__title .line > span{ transform:none; }
  .hero__img{ transform:none; }
  .grain{ display:none; }
  .menu__link span{ transform:none; }
  .menu__aside{ opacity:1; transform:none; }
}