:root {

  --dark: #1a1a1a;

  --dark-2: #202124;

  --orange: #f5a623;

  --orange-hover: #e0951a;

  --text-light: #f5f5f5;

  --text-gray: #9ca3af;

  --body-gray: #4b5563;

  --border: #e5e7eb;

}



* { box-sizing: border-box; margin: 0; padding: 0; }



body {

  font-family: 'Inter', 'Segoe UI', sans-serif;

  color: #1a1a1a;

  line-height: 1.6;

}



h1, h2, h3, .logo-text {

  font-family: 'Montserrat', 'Inter', sans-serif;

  font-weight: 800;

  letter-spacing: 0.02em;

}



a { text-decoration: none; color: inherit; }

ul { list-style: none; }

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



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;

}



/* Header */

header.site-header {

  background: var(--dark);

  color: var(--text-light);

  position: sticky;

  top: 0;

  z-index: 100;

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 22px 24px;

  max-width: 1200px;

  margin: 0 auto;

}



.logo {

  display: flex;

  align-items: center;

  gap: 14px;

}



.logo-img {

  height: 58px;

  width: auto;

  display: block;

}



.logo-text-wrap { line-height: 1.2; }



.logo-text {

  font-size: 1.25rem;

  color: #fff;

  text-transform: uppercase;

}



.logo-tagline {

  font-size: 0.88rem;

  color: var(--orange);

  font-style: italic;

}



nav.main-nav ul {

  display: flex;

  gap: 36px;

}



nav.main-nav a {

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  color: #fff;

  transition: color 0.2s;

}



nav.main-nav a:hover,

nav.main-nav a.active {

  color: var(--orange);

}



.nav-toggle {

  display: none;

  background: none;

  border: none;

  color: #fff;

  font-size: 1.8rem;

  cursor: pointer;

}



@media (max-width: 860px) {

  nav.main-nav {

    position: absolute;

    top: 100%;

    left: 0;

    right: 0;

    background: var(--dark);

    flex-direction: column;

    display: none;

    padding: 8px 24px 24px;

  }

  nav.main-nav.open { display: flex; }

  nav.main-nav ul {

    flex-direction: column;

    gap: 18px;

    padding-top: 16px;

  }

  .nav-toggle { display: block; }

}



/* Buttons */

.btn {

  display: inline-block;

  background: var(--orange);

  color: #1a1a1a;

  font-weight: 800;

  font-size: 0.85rem;

  letter-spacing: 0.03em;

  padding: 16px 32px;

  border-radius: 4px;

  border: none;

  cursor: pointer;

  transition: background 0.2s;

}



.btn:hover { background: var(--orange-hover); }



/* Hero */

.hero {

  position: relative;

  min-height: 580px;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

}



.hero img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.hero-scrim {

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.52) 40%, rgba(10,10,10,0.05) 75%);

}



.hero-content {

  position: relative;

  z-index: 2;

  padding: 56px 24px 60px;

}



.hero-content h1 {

  font-size: 2.6rem;

  line-height: 1.15;

  color: #fff;

}



.hero-content h1 span { color: var(--orange); }



.hero-content p {

  margin: 24px 0 32px;

  color: #e2ded4;

  max-width: 480px;

}



@media (max-width: 860px) {

  .hero { min-height: 460px; }

  .hero-content { padding: 32px 20px 40px; }

  .hero-content h1 { font-size: 1.9rem; }

}



/* Trust bar */

.trust-bar {

  background: var(--dark);

  color: #fff;

}



.trust-bar .container {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 24px;

  padding: 28px 24px;

}



.trust-item {

  display: flex;

  align-items: center;

  gap: 14px;

}



.trust-item .icon {

  font-size: 1.5rem;

  color: var(--orange);

  flex-shrink: 0;

}



.trust-item strong { display: block; font-size: 0.95rem; }

.trust-item span.desc { font-size: 0.8rem; color: var(--text-gray); }



@media (max-width: 860px) {

  .trust-bar .container { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 500px) {

  .trust-bar .container { grid-template-columns: 1fr; }

}



/* Section titles */

.section-eyebrow {

  color: var(--orange);

  font-weight: 700;

  font-size: 0.85rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.section-title {

  font-size: 2rem;

  margin-top: 8px;

  position: relative;

  padding-bottom: 16px;

}



.section-title::after {

  content: "";

  position: absolute;

  bottom: 0; left: 0;

  width: 60px; height: 3px;

  background: var(--orange);

}



.section-title.center { text-align: center; }

.section-title.center::after { left: 50%; transform: translateX(-50%); }



/* Services grid */

.services-section { padding: 80px 0; }



.services-grid {

  margin-top: 46px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 28px 32px;

}



.service-card.full {

  grid-column: 1 / -1;

  max-width: 480px;

  margin: 0 auto;

}



@media (max-width: 600px) {

  .services-grid { grid-template-columns: 1fr; }

  .service-card.full { max-width: 100%; }

}



.service-card {

  position: relative;

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 8px;

  padding: 36px 26px 26px;

  margin-top: 22px;

  text-align: center;

}



.service-card .service-badge {

  position: absolute;

  top: -24px;

  left: 50%;

  transform: translateX(-50%);

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: var(--dark);

  color: var(--orange);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  border: 3px solid #fff;

  box-shadow: 0 3px 10px rgba(0,0,0,0.15);

}



.service-card h3 {

  font-size: 1.05rem;

  margin-bottom: 10px;

  text-transform: uppercase;

}



.service-card p {

  color: var(--body-gray);

  font-size: 0.92rem;

}



.service-card p b { color: #1a1a1a; }



/* About section */

.about-section {

  position: relative;

  min-height: 300px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  overflow: hidden;

  color: #fff;

}



.about-section img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.about-scrim {

  position: absolute;

  inset: 0;

  background: linear-gradient(100deg, rgba(15,15,15,0.15) 0%, rgba(15,15,15,0.6) 45%, rgba(15,15,15,0.9) 70%, rgba(15,15,15,0.92) 100%);

}



.about-content {

  position: relative;

  z-index: 2;

  max-width: 480px;

  padding: 40px 6% 40px 40px;

}



.about-content p.lead {

  color: #e2ded4;

  margin: 20px 0 0;

}



@media (max-width: 860px) {

  .about-section { min-height: 340px; align-items: flex-end; padding-bottom: 24px; }

  .about-content { max-width: 100%; padding: 24px 24px 0; }

}



/* CTA bar */

.cta-bar {

  background: var(--dark-2);

  color: #fff;

  padding: 32px 0;

  border-top: 1px solid rgba(255,255,255,0.08);

}



.cta-bar .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  flex-wrap: wrap;

}



.cta-bar h3 { font-size: 1.15rem; }

.cta-bar p { color: var(--text-gray); font-size: 0.9rem; margin-top: 4px; }



.cta-contacts {

  display: flex;

  gap: 28px;

  flex-wrap: wrap;

}



.cta-contacts a {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.9rem;

}



.cta-contacts .icon { color: var(--orange); }



/* Footer */

footer.site-footer {

  background: var(--dark);

  color: var(--text-gray);

  text-align: center;

  padding: 20px 24px;

  font-size: 0.8rem;

}



/* Steps section (process) */

.steps-section { background: var(--dark); color: #fff; padding: 80px 0; }



.steps-grid {

  margin-top: 40px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 36px;

}



.step-num {

  display: block;

  font-family: Georgia, "Times New Roman", serif;

  font-weight: 700;

  font-size: 2.2rem;

  color: var(--orange);

  margin-bottom: 12px;

}



.step-item h3 {

  font-size: 1rem;

  text-transform: uppercase;

  margin-bottom: 10px;

  color: #fff;

}



.step-item p {

  color: var(--text-gray);

  font-size: 0.9rem;

  line-height: 1.6;

}



@media (max-width: 860px) {

  .steps-grid { grid-template-columns: 1fr; gap: 30px; }

}



/* Story section (text block) */

.story-section { padding: 70px 0; }

.story-section .container { max-width: 760px; }

.story-section h2 { font-size: 1.8rem; margin-bottom: 20px; }

.story-section p { color: var(--body-gray); margin-bottom: 16px; }

.story-section p:last-child { margin-bottom: 0; }



.story-quote {

  text-align: center;

  font-family: 'Playfair Display', Georgia, serif;

  font-style: italic;

  font-size: 1.4rem;

  color: #1a1a1a;

  margin: 4px 0 26px;

  line-height: 1.4;

}



/* Review submission form */

.review-form-section { padding: 80px 0; text-align: center; }

.review-form-section .section-eyebrow { display: block; }

.review-form-section .section-title.center { margin-left: auto; margin-right: auto; }



.review-form {

  max-width: 520px;

  margin: 36px auto 0;

  text-align: left;

}



.review-form label {

  display: block;

  font-size: 0.85rem;

  font-weight: 700;

  margin-bottom: 6px;

  margin-top: 16px;

}



.review-form input[type="text"],

.review-form textarea {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--border);

  border-radius: 4px;

  font-family: inherit;

  font-size: 0.95rem;

}



.review-form textarea { resize: vertical; min-height: 120px; }

.review-form input[type="file"] {

  width: 100%;

  padding: 10px 0;

  font-size: 0.88rem;

}

.review-form .field-hint {

  display: block;

  font-size: 0.78rem;

  color: var(--body-gray);

  margin-top: 4px;

}

.review-form button { margin-top: 24px; }



.review-form-message { max-width: 520px; margin: 30px auto 0; text-align: left; }



/* Submitted review list */

.review-list {

  margin: 50px -24px 0;

  padding: 4px 24px 16px;

  display: flex;

  flex-direction: row;

  gap: 20px;

  text-align: left;

  overflow-x: auto;

  scroll-snap-type: x proximity;

  -webkit-overflow-scrolling: touch;

}



.review-card {

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 10px;

  padding: 22px 24px;

  flex: 0 0 300px;

  width: 300px;

  scroll-snap-align: start;

}



.review-card-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 8px;

  gap: 12px;

}



.review-card-head strong { font-size: 1rem; }

.review-card-stars { color: var(--orange); letter-spacing: 2px; flex-shrink: 0; }



.review-card p {

  color: var(--body-gray);

  font-size: 0.92rem;

  line-height: 1.55;

  margin-bottom: 10px;

}



.review-card-photo {

  max-width: 220px;

  border-radius: 8px;

  margin-bottom: 10px;

}



.review-card-date {

  display: block;

  font-size: 0.78rem;

  color: #9aa1a8;

}



.star-rating {

  display: flex;

  flex-direction: row-reverse;

  justify-content: flex-end;

  gap: 4px;

  font-size: 2rem;

}



.star-rating input { display: none; }



.star-rating label {

  color: var(--border);

  cursor: pointer;

  margin: 0;

  transition: color 0.15s;

}



.star-rating input:checked ~ label,

.star-rating label:hover,

.star-rating label:hover ~ label {

  color: var(--orange);

}



/* Generic page hero (inner pages) */

.page-hero {

  background: var(--dark);

  color: #fff;

  padding: 70px 24px 60px;

  text-align: center;

}



.page-hero .section-eyebrow { display: block; }

.page-hero h1 { font-size: 2.2rem; margin-top: 10px; }

.page-hero p { color: var(--text-gray); margin-top: 14px; max-width: 600px; margin-left: auto; margin-right: auto; }



/* Service detail blocks (sluzby.php) */

.service-detail {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 50px;

  align-items: center;

  padding: 60px 0;

  border-bottom: 1px solid var(--border);

}



.service-detail:nth-child(even) .service-detail-image { order: 2; }



.service-detail-image img {

  border-radius: 8px;

  width: 100%;

  height: 320px;

  object-fit: cover;

}



.service-detail-text h2 { font-size: 1.6rem; margin-bottom: 16px; }

.service-detail-text p { color: var(--body-gray); }



@media (max-width: 860px) {

  .service-detail { grid-template-columns: 1fr; gap: 24px; }

  .service-detail:nth-child(even) .service-detail-image { order: 0; }

}



/* Reference gallery */

.gallery-section { padding: 70px 0; }



.gallery-grid {

  margin-top: 40px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}



@media (max-width: 900px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 600px) { .gallery-grid { grid-template-columns: 1fr; } }



.gallery-item {

  position: relative;

  border-radius: 8px;

  overflow: hidden;

  height: 260px;

}



.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }

.gallery-item:hover img { transform: scale(1.06); }



.gallery-caption {

  position: absolute;

  bottom: 0; left: 0; right: 0;

  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);

  color: #fff;

  padding: 30px 16px 12px;

  font-size: 0.9rem;

  font-weight: 700;

}



.gallery-note {

  margin-top: 30px;

  padding: 16px 20px;

  background: #fdf3e0;

  border-left: 4px solid var(--orange);

  color: var(--body-gray);

  font-size: 0.88rem;

  border-radius: 4px;

}



/* Contact page */

.contact-section {

  padding: 70px 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

}



@media (max-width: 860px) {

  .contact-section { grid-template-columns: 1fr; }

}



.contact-info h2 { font-size: 1.5rem; margin-bottom: 20px; }



.contact-info-item {

  display: flex;

  gap: 16px;

  margin-bottom: 24px;

}



.contact-info-item .icon {

  color: var(--orange);

  font-size: 1.3rem;

  flex-shrink: 0;

}



.contact-info-item strong { display: block; }

.contact-info-item span { color: var(--body-gray); font-size: 0.9rem; }



.whatsapp-tag {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  margin-top: 4px;

  font-size: 0.8rem;

  font-weight: 600;

  color: #25D366;

}

.whatsapp-tag:hover { text-decoration: underline; }

.wa-icon { width: 15px; height: 15px; flex-shrink: 0; }



.contact-info-item .whatsapp-tag { display: flex; margin-top: 6px; }

.cta-contacts .whatsapp-tag {

  color: #25D366;

  font-size: 0.85rem;

}



.contact-form label {

  display: block;

  font-size: 0.85rem;

  font-weight: 700;

  margin-bottom: 6px;

  margin-top: 16px;

}



.contact-form input,

.contact-form textarea {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--border);

  border-radius: 4px;

  font-family: inherit;

  font-size: 0.95rem;

}



.contact-form textarea { resize: vertical; min-height: 120px; }



.contact-form button { margin-top: 24px; }



.form-message {

  margin-top: 16px;

  padding: 12px 16px;

  border-radius: 4px;

  font-size: 0.9rem;

}



.form-message.success { background: #e7f6ea; color: #1e6b34; }

.form-message.error { background: #fbe7e7; color: #a12222; }



/* Photo immersive page style (O nás) — same sections, restyled */

body.page-photo .story-section { padding: 56px 0; }

body.page-photo .story-section .container { max-width: 640px; }

body.page-photo .story-section p:first-of-type { font-size: 1.05rem; color: #333; }



body.page-photo .steps-section {

  background:

    linear-gradient(0deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.7) 55%, rgba(10,10,10,0.55) 100%),

    url('https://images.pexels.com/photos/33752159/pexels-photo-33752159.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1600&h=700') center/cover no-repeat;

  padding: 70px 0;

}