/* Zdrojový stylopis v syntaxi LESS; používá standardní CSS podmnožinu bez kompilátorových rozšíření. */
:root { --navy:#12384d; --teal:#16869a; --ink:#435561; --pale:#eef6f7; --line:#dae6e9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); background:#fff; font:16px/1.75 "Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--teal); text-underline-offset:4px; }
a:hover { color:var(--navy); }
a:focus-visible,button:focus-visible { outline:3px solid var(--teal); outline-offset:5px; }
.container { width:min(1120px,calc(100% - 80px)); margin-inline:auto; }
header { height:88px; background:rgba(255,255,255,.97); position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); }
.navigation { height:100%; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { color:var(--navy); font-size:25px; font-weight:800; letter-spacing:1px; text-decoration:none; }
.brand span { color:var(--teal); }
nav { display:flex; gap:32px; }
nav a { text-decoration:none; text-transform:uppercase; font-size:12px; font-weight:700; letter-spacing:1px; color:var(--ink); }
nav a:hover { color:var(--teal); }
.menu-toggle { display:none; }
.hero { position:relative; isolation:isolate; min-height:580px; display:flex; align-items:center; background:#f5f4ef; overflow:hidden; }
.hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:-2; }
.hero:after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(249,249,246,.98) 0%,rgba(249,249,246,.94) 27%,rgba(249,249,246,.55) 47%,transparent 72%); }
.hero-content { padding-block:85px; }
h1 { font-size:clamp(64px,8vw,104px); line-height:1; letter-spacing:-4px; color:var(--navy); margin:0 0 30px; font-weight:750; }
.hero p { color:var(--navy); font-size:21px; line-height:1.8; margin:0 0 34px; }
.down { display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid #9ab7bf; border-radius:50%; text-decoration:none; font-size:23px; }
h2 { font-size:29px; line-height:1.22; font-weight:700; letter-spacing:-.4px; color:var(--navy); margin:0 0 30px; }
h2:before { content:""; display:block; width:40px; height:3px; background:var(--teal); margin-bottom:23px; }
.about { display:grid; grid-template-columns:1fr 1.65fr; gap:80px; padding-block:85px; }
.about-copy p:first-child { margin-top:0; }
.about-copy p:last-child { margin-bottom:0; }
.about strong { color:var(--teal); font-weight:650; }
p { margin:0 0 22px; }
.service { padding-block:66px; }
.tinted { background:var(--pale); }
.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.service-grid>img { width:100%; height:360px; object-fit:cover; display:block; border-radius:3px; }
.reverse>div { grid-column:2; grid-row:1; }
.reverse>img { grid-column:1; grid-row:1; }
ul { padding-left:19px; margin:0; font-size:14px; line-height:1.7; }
li { padding-left:5px; margin-bottom:5px; }
li::marker { color:var(--teal); }
.references { background:var(--navy); color:#e6eff2; text-align:center; padding:70px 0 53px; }
.references h2 { color:#fff; }
.references h2:before { margin-inline:auto; background:#5eb7c4; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:75px; padding-block:80px; align-items:center; }
.contact p { font-size:15px; }
.contact b { color:var(--navy); }
.contact-links { display:flex; flex-direction:column; align-items:flex-start; gap:7px; font-size:19px; font-weight:600; }
.contact-links a { text-decoration:none; }
.map { background:var(--pale); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.map iframe { display:block; width:100%; height:310px; border:0; }
.map>a { display:block; padding:12px 18px; font-size:13px; text-align:right; }
.links { padding:0 0 65px; text-align:center; }
.links h2 { border-top:1px solid var(--line); padding-top:45px; font-size:23px; }
.links h2:before { display:none; }
.links>div { display:flex; justify-content:center; flex-wrap:wrap; gap:35px; }
.links a { text-decoration:none; font-weight:600; font-size:15px; }
footer { background:var(--navy); color:#c6d8df; font-size:12px; text-align:center; padding:35px 0 15px; }
footer a { color:#c6d8df; }
footer a:hover { color:#fff; }
@media (min-width:1500px) { .hero { min-height:650px; } }
@media (max-width:800px) { .container { width:calc(100% - 40px); } header { height:72px; } nav { gap:18px; } nav a { font-size:10px; } .hero { min-height:520px; } .hero p { font-size:18px; } .about { gap:35px; grid-template-columns:1fr 1.8fr; padding-block:60px; } .service-grid,.contact { gap:35px; } .service-grid>img { height:320px; } h2 { font-size:25px; } }
@media (max-width:600px) { html { scroll-padding-top:85px; } .menu-toggle { display:flex; gap:16px; align-items:center; border:1px solid var(--line); background:#fff; padding:9px 14px; color:var(--navy); font:600 14px "Segoe UI",sans-serif; border-radius:3px; } nav { display:none; position:absolute; top:72px; left:0; right:0; padding:18px 20px; background:#fff; border-bottom:1px solid var(--line); flex-direction:column; gap:0; } nav.is-open { display:flex; } nav a { font-size:13px; padding:12px 0; } .hero { min-height:520px; align-items:flex-start; } .hero-content { padding-block:55px 175px; } .hero>img { object-position:65% center; } .hero:after { background:linear-gradient(180deg,rgba(249,249,246,.97) 0%,rgba(249,249,246,.93) 40%,rgba(249,249,246,.22) 85%); } h1 { font-size:65px; letter-spacing:-2px; margin-bottom:24px; } .hero p { font-size:16px; } .about,.service-grid,.contact { grid-template-columns:1fr; gap:25px; } .about { padding-block:48px; } .about h2 { margin-bottom:0; } .service { padding-block:45px; } .service-grid>img { height:auto; aspect-ratio:4/3; } .reverse>div,.reverse>img { grid-column:auto; grid-row:auto; } h2 { font-size:25px; } ul { font-size:15px; } .contact { padding-block:48px; gap:36px; } .references { padding:48px 0 28px; } .desktop { display:none; } .map iframe { height:280px; } .links { padding-bottom:45px; } .links>div { gap:22px; } footer .container { width:calc(100% - 35px); } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }