/* ============================================================
   ARTLUX — ZEMNÍ PRÁCE / VÝKOPY — design system
   ============================================================ */

@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-semibold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-extrabold.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Montserrat'; src:url('fonts/montserrat-black.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face { font-family:'AXMono'; src:url('fonts/mono.woff2') format('woff2'); font-weight:400 700; font-display:swap; }

:root{
  --gunmetal:#1C1E22;
  --orange:#FF4F1F;
  --lotion:#FDFDFC;
  --platinum:#E6E7E9;
  --loam:#6B4A32;
  --subsoil:#3D2B22;
  --ink-3:#6B6E76;
  --line:#DCDDE0;
  --radius:2px;
  --wrap:1240px;
  --sans:'Montserrat',system-ui,sans-serif;
  --mono:'AXMono',ui-monospace,monospace;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.001ms !important; transition-duration:.001ms !important} }

body{
  font-family:var(--sans); font-weight:300; color:var(--gunmetal); background:var(--lotion);
  -webkit-font-smoothing:antialiased; line-height:1.6; font-size:16px; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:0; background:none}
ul{list-style:none}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px}
@media(max-width:720px){ .wrap{padding:0 20px} }

h1,h2,h3{font-family:var(--sans); font-weight:800; letter-spacing:-.01em; line-height:1.06; text-transform:uppercase}
h1{font-weight:900}
.eyebrow{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange); display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--orange)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px; font-family:var(--sans);
  font-weight:600; font-size:14.5px; letter-spacing:.02em; text-transform:uppercase; border-radius:var(--radius);
  transition:transform .18s ease, background .18s ease, color .18s ease; white-space:nowrap;
}
.btn.pri{background:var(--orange); color:var(--lotion)}
.btn.pri:hover{transform:translateY(-2px); background:#E5450F}
.btn.ghost{border:1.5px solid var(--gunmetal); color:var(--gunmetal)}
.btn.ghost:hover{background:var(--gunmetal); color:var(--lotion)}
.btn.on-dark{border:1.5px solid rgba(253,253,252,.5); color:var(--lotion)}
.btn.on-dark:hover{background:var(--lotion); color:var(--gunmetal); border-color:var(--lotion)}

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(253,253,252,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:84px}
.nav-logo{display:flex; align-items:center; gap:11px}
.nav-logo svg{height:26px; width:auto}
.nav-logo .word{font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.1em}
.nav-logo .sub{display:block; font-size:9.5px; color:var(--ink-3); letter-spacing:.16em; margin-top:1px}
.nav-links{display:flex; align-items:center; gap:36px}
.nav-links a{font-size:13.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; position:relative; padding:4px 0}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--orange); transition:width .2s}
.nav-links a:hover::after, .nav-links a.on::after{width:100%}
.nav-cta{display:flex; align-items:center; gap:22px}
.nav-tel{font-family:var(--mono); font-size:13.5px; font-weight:600}
.nav-burger{display:none; width:26px; height:20px; position:relative}
.nav-burger span{position:absolute; left:0; right:0; height:2px; background:var(--gunmetal); transition:.25s}
.nav-burger span:nth-child(1){top:0} .nav-burger span:nth-child(2){top:9px} .nav-burger span:nth-child(3){top:18px}
.nav-mob{display:none}

@media(max-width:900px){
  .nav-links, .nav-tel{display:none}
  .nav-burger{display:block}
  .nav-in{height:70px}
  body.nav-open .nav-mob{
    display:flex; flex-direction:column; position:fixed; inset:70px 0 0 0; background:var(--lotion); z-index:99;
    padding:36px 24px; gap:4px; overflow-y:auto;
  }
  body.nav-open .nav-mob a{font-size:26px; font-weight:800; text-transform:uppercase; padding:16px 0; border-bottom:1px solid var(--line)}
  body.nav-open .nav-burger span:nth-child(1){transform:rotate(45deg); top:9px}
  body.nav-open .nav-burger span:nth-child(2){opacity:0}
  body.nav-open .nav-burger span:nth-child(3){transform:rotate(-45deg); top:9px}
}

/* ---------- strata divider (signature) ---------- */
.strata{position:relative; width:100%; height:64px; overflow:hidden; display:block}
.strata svg{position:absolute; width:100%; height:100%; display:block}
@media(max-width:720px){ .strata{height:40px} }

/* ---------- hero ---------- */
.hero{position:relative; padding:168px 0 0; background:var(--gunmetal); color:var(--lotion); overflow:hidden}
.hero-in{position:relative; z-index:2; padding-bottom:120px}
.hero h1{font-size:clamp(42px,7vw,92px); max-width:16ch}
.hero h1 em{font-style:normal; color:var(--orange)}
.hero .lead{font-size:19px; font-weight:300; color:rgba(253,253,252,.72); max-width:46ch; margin:26px 0 40px}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:64px}
.hero-strip{display:flex; gap:0; border-top:1px solid rgba(253,253,252,.16); padding-top:0}
.hero-stat{flex:1; padding:22px 26px 0; border-right:1px solid rgba(253,253,252,.16)}
.hero-stat:last-child{border-right:0}
.hero-stat b{display:block; font-family:var(--mono); font-size:28px; font-weight:700; color:var(--orange)}
.hero-stat span{font-size:12px; color:rgba(253,253,252,.55); text-transform:uppercase; letter-spacing:.08em}
@media(max-width:720px){ .hero{padding-top:130px} .hero-strip{flex-wrap:wrap} .hero-stat{flex:1 1 50%; border-right:0; padding-bottom:18px} }

.hero-bg{position:absolute; inset:0; z-index:1; opacity:.5}
.hero-bg svg{width:100%; height:100%}

/* ---------- sections ---------- */
section{padding:96px 0}
.section-head{max-width:640px; margin-bottom:56px}
.section-head h2{font-size:clamp(30px,4vw,46px)}
.section-head p{margin-top:18px; font-size:16.5px; color:var(--ink-3); max-width:52ch}
.on-dark{background:var(--gunmetal); color:var(--lotion)}
.on-dark .section-head p{color:rgba(253,253,252,.62)}
.on-platinum{background:var(--platinum)}
@media(max-width:720px){ section{padding:64px 0} }

/* ---------- service / feature cards ---------- */
.grid{display:grid; gap:1px; background:var(--line)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){ .grid.c4{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:1fr} }
@media(max-width:600px){ .grid.c4, .grid.c2{grid-template-columns:1fr} }

.card{background:var(--lotion); padding:38px 32px; transition:background .2s}
.card:hover{background:#F7F6F3}
.card .ic{width:42px; height:42px; margin-bottom:22px; color:var(--orange)}
.card h3{font-size:18px; margin-bottom:12px; text-transform:none; letter-spacing:0}
.card p{font-size:14.5px; color:var(--ink-3); line-height:1.65}
.card .tag{font-family:var(--mono); font-size:11px; color:var(--orange); letter-spacing:.1em; text-transform:uppercase; margin-top:16px; display:block}

/* ---------- equipment cards ---------- */
.mach{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.mach:nth-child(even){direction:rtl} .mach:nth-child(even) > *{direction:ltr}
.mach + .mach{margin-top:88px}
.mach-visual{position:relative; aspect-ratio:4/3; background:var(--gunmetal); border-radius:var(--radius); overflow:hidden; display:flex; align-items:center; justify-content:center}
.mach-visual svg{width:58%; height:58%; color:var(--orange)}
.mach-class{position:absolute; top:20px; left:20px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(253,253,252,.55); text-transform:uppercase}
.mach-ruler{position:absolute; right:16px; top:16px; bottom:16px; width:34px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end}
.mach-ruler i{display:block; width:10px; height:1px; background:rgba(255,79,31,.5)}
.mach-ruler i.lg{width:18px; background:var(--orange)}
.mach-specs{display:grid; grid-template-columns:1fr 1fr; gap:20px 28px; margin:28px 0 30px; padding-top:24px; border-top:1px solid var(--line)}
.mach-specs div b{display:block; font-family:var(--mono); font-size:20px; color:var(--gunmetal)}
.mach-specs div span{font-size:11.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em}
.mach h3{font-size:30px; margin-bottom:6px}
.mach .use{font-size:13.5px; color:var(--orange); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-family:var(--mono)}
.mach p.desc{margin:18px 0 0; color:var(--ink-3); font-size:15.5px; max-width:48ch}
@media(max-width:840px){ .mach, .mach:nth-child(even){grid-template-columns:1fr; direction:ltr} .mach + .mach{margin-top:56px} }

/* ---------- process list ---------- */
.steps{border-top:1px solid var(--line)}
.step{display:grid; grid-template-columns:120px 1fr; gap:32px; padding:32px 0; border-bottom:1px solid var(--line); align-items:baseline}
.step b{font-family:var(--mono); font-size:13px; color:var(--orange); letter-spacing:.06em}
.step h4{font-size:19px; font-weight:600; text-transform:none; margin-bottom:8px}
.step p{color:var(--ink-3); font-size:14.5px; max-width:60ch}
@media(max-width:640px){ .step{grid-template-columns:1fr; gap:8px} }

/* ---------- gallery ---------- */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gal-item{position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:linear-gradient(155deg,var(--platinum),var(--lotion)); display:flex; align-items:center; justify-content:center; border:1px solid var(--line)}
.gal-item svg{width:34%; opacity:.28; color:var(--gunmetal)}
.gal-item span{position:absolute; bottom:14px; left:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.gal-item.wide{grid-column:span 2}
@media(max-width:820px){ .gal{grid-template-columns:repeat(2,1fr)} .gal-item.wide{grid-column:span 2} }
@media(max-width:560px){ .gal{grid-template-columns:1fr} .gal-item.wide{grid-column:span 1} }

/* ---------- CTA band ---------- */
.cta-band{background:var(--orange); color:var(--lotion); padding:88px 0}
.cta-band h2{font-size:clamp(28px,4.5vw,44px); max-width:16ch}
.cta-band .row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}
.cta-band .btn.pri{background:var(--gunmetal)}
.cta-band .btn.pri:hover{background:#000}

/* ---------- form ---------- */
.form-wrap{display:grid; grid-template-columns:1fr 1fr; gap:64px}
.field{margin-bottom:20px}
.field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius); font-family:var(--sans);
  font-size:15px; background:var(--lotion); color:var(--gunmetal); transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--orange)}
.field textarea{min-height:120px; resize:vertical}
.form-note{font-size:12px; color:var(--ink-3); margin-top:6px}
#form-msg{margin-top:16px; font-size:14px; font-weight:600; display:none}
#form-msg.ok{color:#1B7A3D; display:block}
#form-msg.err{color:#C4291A; display:block}
.info-list{display:flex; flex-direction:column; gap:26px}
.info-item{display:flex; gap:18px; align-items:flex-start}
.info-item .ic{width:22px; height:22px; color:var(--orange); flex-shrink:0; margin-top:2px}
.info-item b{display:block; font-size:15.5px; margin-bottom:2px}
.info-item span, .info-item a{font-size:14px; color:var(--ink-3)}
@media(max-width:820px){ .form-wrap{grid-template-columns:1fr; gap:40px} }

/* ---------- footer ---------- */
footer{background:var(--gunmetal); color:rgba(253,253,252,.6); padding:56px 0 28px}
.foot-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:40px; border-bottom:1px solid rgba(253,253,252,.14)}
.foot-brand svg{height:24px; margin-bottom:14px}
.foot-brand p{font-size:13.5px; max-width:32ch; line-height:1.7}
.foot-cols{display:flex; gap:64px}
.foot-col b{display:block; color:var(--lotion); font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; font-family:var(--mono)}
.foot-col a, .foot-col span{display:block; font-size:13.5px; margin-bottom:11px}
.foot-col a:hover{color:var(--orange)}
.foot-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12px; flex-wrap:wrap; gap:10px}
.foot-bottom a:hover{color:var(--orange)}
@media(max-width:640px){ .foot-cols{gap:32px; flex-wrap:wrap} }

/* ---------- reveal on scroll ---------- */
.rv{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}

/* ---------- page hero (inner pages) ---------- */
.phero{background:var(--gunmetal); color:var(--lotion); padding:168px 0 72px}
.phero h1{font-size:clamp(36px,5.5vw,60px); max-width:20ch}
.phero p{margin-top:20px; font-size:16.5px; color:rgba(253,253,252,.65); max-width:56ch}
@media(max-width:720px){ .phero{padding-top:126px} }


/* ---------- mediální místa (foto/video) ---------- */
.media-slot{display:none}
.media-slot.has-media{display:block; margin:0 0 96px}
.media-slot .wrap{max-width:var(--wrap)}
.media-slot img, .media-slot video{width:100%; border-radius:2px; display:block}
.media-slot .cap{font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.04em; margin-top:12px}
.media-slot.on-dark-slot .cap{color:rgba(253,253,252,.55)}