/* ═══════════════════════════════════════════════════════════

   Krpata Stavby – hlavní styly

   ═══════════════════════════════════════════════════════════ */



/* ─── Reset & Proměnné ──────────────────────────────────────── */

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



:root {

  --dark:         #181818;

  --accent:       #e8520a;

  --accent2:      #bf4208;

  --white:        #ffffff;

  --light:        #f5f3ee;          /* teplý krémový podklad */

  --light2:       #eceae4;

  --mid:          #777;

  --sp:           clamp(72px, 9vw, 116px);

  --r:            8px;

  --font-display: 'Bebas Neue', sans-serif;

}



html { scroll-behavior: smooth; }



body {

  font-family: 'Montserrat', system-ui, sans-serif;

  color: var(--dark);

  background: var(--white);

  overflow-x: hidden;

}



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

a   { color: inherit; }



/* ─── Fokus (accessibility) ─────────────────────────────────── */

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



/* ─── Helpers ───────────────────────────────────────────────── */

.container {

  max-width: 1240px;

  margin: 0 auto;

  padding: 0 clamp(18px, 4vw, 52px);

}



.tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: .7rem;

  font-weight: 700;

  letter-spacing: .24em;

  text-transform: uppercase;

  color: var(--accent);

  margin-bottom: 14px;

}

.tag::before {

  content: '';

  display: block;

  width: 24px;

  height: 2px;

  background: var(--accent);

}



.h2 {

  font-family: var(--font-display);

  font-size: clamp(2.8rem, 5vw, 5rem);

  font-weight: 400;

  line-height: 1.0;

  letter-spacing: .06em;

  text-transform: uppercase;

  margin-bottom: 14px;

}



.lead {

  font-size: 1rem;

  color: #5a5a5a;

  line-height: 1.9;

  max-width: 580px;

}



/* ─── Tlačítka ──────────────────────────────────────────────── */

.btn-orange {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  background: var(--accent);

  color: #fff;

  text-decoration: none;

  padding: 15px 32px;

  border-radius: 50px;         /* pill */

  font-size: .92rem;

  font-weight: 700;

  letter-spacing: .04em;

  border: none;

  cursor: pointer;

  font-family: inherit;

  transition: background .22s, transform .22s, box-shadow .22s;

  box-shadow: 0 6px 20px rgba(232,82,10,.3);

}

.btn-orange:hover {

  background: var(--accent2);

  transform: translateY(-2px);

  box-shadow: 0 10px 28px rgba(232,82,10,.4);

}



.btn-ghost {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  border: 2px solid rgba(255,255,255,.5);

  color: #fff;

  text-decoration: none;

  padding: 13px 30px;

  border-radius: 50px;

  font-size: .92rem;

  font-weight: 600;

  letter-spacing: .04em;

  transition: border-color .22s, background .22s, transform .22s;

}

.btn-ghost:hover {

  border-color: var(--accent);

  background: rgba(232,82,10,.1);

  transform: translateY(-2px);

}



/* ─── Scroll reveal ─────────────────────────────────────────── */

.reveal {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity .75s ease, transform .75s ease;

}

.reveal.vis { opacity: 1; transform: none; }





/* ═══════════════════════════════════════════════════════════

   NAVBAR

   ═══════════════════════════════════════════════════════════ */

#nav {

  position: fixed;

  inset-block-start: 0;

  inset-inline: 0;

  z-index: 900;

  padding: 22px 0;

  border-bottom: 1px solid rgba(255,255,255,.07);

  transition: background .35s, padding .35s, box-shadow .35s;

}

#nav.stuck {

  background: rgba(18,16,14,.97);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  padding: 11px 0;

  box-shadow: 0 4px 30px rgba(0,0,0,.35);

  border-top: 3px solid var(--accent);

  border-bottom: none;

}



.nav-wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}



.nav-brand { text-decoration: none; line-height: 1; display: flex; align-items: center; gap: 14px; }

.nav-brand::before {

  content: '';

  display: block;

  width: 4px;

  height: 38px;

  background: var(--accent);

  flex-shrink: 0;

  border-radius: 1px;

}

.nav-brand .b1 {

  font-family: var(--font-display);

  font-size: 1.72rem;

  font-weight: 400;

  color: #fff;

  letter-spacing: .1em;

}

.nav-brand .b2 {

  font-size: .6rem;

  font-weight: 500;

  color: var(--accent);

  letter-spacing: .2em;

  text-transform: uppercase;

  margin-top: 3px;

}



.nav-list {

  display: flex;

  align-items: center;

  gap: 30px;

  list-style: none;

}

.nav-list > li > a:not(.nav-phone) {

  text-decoration: none;

  color: rgba(255,255,255,.68);

  font-size: .78rem;

  font-weight: 600;

  letter-spacing: .12em;

  text-transform: uppercase;

  position: relative;

  padding-bottom: 5px;

  transition: color .2s;

}

.nav-list > li > a:not(.nav-phone)::after {

  content: '';

  position: absolute;

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

  height: 2px;

  background: var(--accent);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform .28s cubic-bezier(.4,0,.2,1);

}

.nav-list > li > a:not(.nav-phone):hover,

.nav-list > li > a.active { color: #fff; }

.nav-list > li > a:not(.nav-phone):hover::after,

.nav-list > li > a.active::after { transform: scaleX(1); }



.nav-phone {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--accent);

  color: #fff;

  text-decoration: none;

  padding: 9px 20px;

  border-radius: 2px;

  font-size: .78rem;

  font-weight: 700;

  letter-spacing: .06em;

  white-space: nowrap;

  transition: background .22s, transform .22s, box-shadow .22s;

  box-shadow: 0 4px 16px rgba(232,82,10,.35);

}

.nav-phone:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(232,82,10,.45); }



/* Hamburger → X */

.hamburger {

  display: none;

  flex-direction: column;

  justify-content: center;

  gap: 5px;

  width: 36px;

  height: 36px;

  background: none;

  border: none;

  cursor: pointer;

  padding: 4px;

}

.hamburger span {

  display: block;

  width: 22px;

  height: 2px;

  background: #fff;

  border-radius: 2px;

  transition: transform .3s, opacity .3s, width .3s;

  transform-origin: center;

}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }

.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }





/* ═══════════════════════════════════════════════════════════

   HERO

   ═══════════════════════════════════════════════════════════ */

#hero {

  position: relative;

  height: 100vh;

  min-height: 640px;

  display: flex;

  align-items: center;

  overflow: hidden;

}



.hero-bg {

  position: absolute;

  inset: 0;

  background: url('obrazky/69c2d02f-0c84-42b1-bb44-2db324cd781e.jpg') center/cover no-repeat;

  transform: scale(1.07);

  animation: zoomIn 10s ease-out forwards;

}

@keyframes zoomIn { to { transform: scale(1); } }



.hero-veil {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(105deg, rgba(6,6,6,.9) 0%, rgba(6,6,6,.55) 55%, rgba(6,6,6,.15) 100%);

}



/* Dekorativní mřížka přes hero */

.hero-grid {

  position: absolute;

  inset: 0;

  background-image:

    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

  background-size: 60px 60px;

  pointer-events: none;

}



.hero-body {

  position: relative;

  z-index: 1;

  max-width: 720px;

}



.hero-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: rgba(232,82,10,.15);

  border: 1px solid rgba(232,82,10,.4);

  color: var(--accent);

  font-size: .68rem;

  font-weight: 700;

  letter-spacing: .22em;

  text-transform: uppercase;

  padding: 7px 16px;

  border-radius: 50px;

  margin-bottom: 24px;

  animation: fadeUp .8s .1s both;

  backdrop-filter: blur(6px);

}

.hero-pill::before {

  content: '';

  width: 7px;

  height: 7px;

  background: var(--accent);

  border-radius: 50%;

  animation: blink 1.8s ease-in-out infinite;

}

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }



.hero-h1 {

  font-family: var(--font-display);

  font-size: clamp(4.2rem, 10vw, 9.5rem);

  font-weight: 400;

  color: #fff;

  line-height: 0.92;

  letter-spacing: .05em;

  text-transform: uppercase;

  margin-bottom: 28px;

  animation: fadeUp .8s .28s both;

}

.hero-h1 em { color: var(--accent); font-style: normal; }



.hero-p {

  font-size: clamp(.93rem, 1.4vw, 1.08rem);

  color: rgba(255,255,255,.72);

  line-height: 1.85;

  margin-bottom: 40px;

  animation: fadeUp .8s .44s both;

}



.hero-cta {

  display: flex;

  gap: 14px;

  flex-wrap: wrap;

  animation: fadeUp .8s .58s both;

}



.hero-scroll-hint {

  position: absolute;

  bottom: 32px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  color: rgba(255,255,255,.35);

  font-size: .65rem;

  letter-spacing: .2em;

  text-transform: uppercase;

  animation: scrollBounce 2.5s ease-in-out 2s infinite;

}

.hero-scroll-hint::before {

  content: '';

  width: 1px;

  height: 44px;

  background: linear-gradient(to bottom, var(--accent), transparent);

}

@keyframes scrollBounce {

  0%,100% { transform: translateX(-50%) translateY(0); }

  50%      { transform: translateX(-50%) translateY(9px); }

}



@keyframes fadeUp {

  from { opacity: 0; transform: translateY(32px); }

  to   { opacity: 1; transform: translateY(0); }

}



/* Obří ghost text v pozadí hero */

#hero::after {

  content: 'STAVBY';

  position: absolute;

  bottom: -8%;

  right: -1%;

  font-family: var(--font-display);

  font-size: clamp(10rem, 28vw, 32rem);

  font-weight: 400;

  color: transparent;

  -webkit-text-stroke: 1px rgba(255,255,255,.055);

  text-stroke: 1px rgba(255,255,255,.055);

  letter-spacing: .04em;

  text-transform: uppercase;

  pointer-events: none;

  user-select: none;

  z-index: 1;

  line-height: 0.85;

  white-space: nowrap;

}





/* ═══════════════════════════════════════════════════════════

   STATS BAR

   ═══════════════════════════════════════════════════════════ */

#stats {

  background: var(--dark);

  border-top: 3px solid var(--accent);

  padding: 30px 0;

}

.stats-row {

  display: grid;

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

}

.stat {

  text-align: center;

  padding: 14px 20px;

  border-right: 1px solid rgba(255,255,255,.08);

  position: relative;

}

.stat:last-child { border-right: none; }

.stat-n {

  font-family: var(--font-display);

  font-size: clamp(3rem, 4.5vw, 4.2rem);

  font-weight: 400;

  color: var(--accent);

  line-height: 1;

  letter-spacing: .04em;

}

.stat-l {

  font-size: .68rem;

  color: rgba(255,255,255,.45);

  letter-spacing: .1em;

  text-transform: uppercase;

  margin-top: 7px;

}





/* ═══════════════════════════════════════════════════════════

   O NÁS

   ═══════════════════════════════════════════════════════════ */

#about {

  padding: var(--sp) 0 calc(var(--sp) + 40px);

  background: var(--light);

  position: relative;

}

/* Šikmý přechod do bílé */

#about::after {

  content: '';

  position: absolute;

  bottom: -1px; left: 0; right: 0;

  height: 80px;

  background: var(--white);

  clip-path: polygon(0 100%, 100% 0, 100% 100%);

}



.about-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(36px, 6vw, 88px);

  align-items: center;

}



.about-img-wrap { position: relative; }

/* Dekorativní odsazený rámeček za fotografií */

.about-img-wrap::before {

  content: '';

  position: absolute;

  top: 20px; left: 20px;

  right: -20px; bottom: -20px;

  border: 2px solid rgba(232,82,10,.45);

  border-radius: var(--r);

  z-index: 0;

}

.about-img-wrap img {

  position: relative;

  z-index: 1;

  width: 100%;

  height: 510px;

  object-fit: cover;

  border-radius: var(--r);

  box-shadow: 0 20px 60px rgba(0,0,0,.12);

}

.about-badge {

  position: absolute;

  bottom: -24px;

  right: -24px;

  background: var(--accent);

  color: #fff;

  padding: 20px 26px;

  border-radius: var(--r);

  text-align: center;

  box-shadow: 0 10px 32px rgba(232,82,10,.5);

  z-index: 2;

}

.about-badge .n { font-family: var(--font-display); font-size: 3.2rem; font-weight: 400; line-height: 1; letter-spacing: .04em; }

.about-badge .t { font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; opacity: .9; margin-top: 4px; }



.about-text { padding-right: 8px; }



.check-list {

  list-style: none;

  margin-top: 24px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.check-list li {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  font-size: .93rem;

  color: #444;

  line-height: 1.5;

}

.check-list li::before {

  content: '';

  flex-shrink: 0;

  width: 20px;

  height: 20px;

  margin-top: 1px;

  border-radius: 50%;

  background:

    var(--accent)

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")

    center/14px no-repeat;

}





/* ═══════════════════════════════════════════════════════════

   SLUŽBY

   ═══════════════════════════════════════════════════════════ */

#services { padding: var(--sp) 0; background: #1c1a17; }

#services .section-head .h2   { color: #fff; }

#services .section-head .lead { color: rgba(255,255,255,.48); }



.section-head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }

.section-head .tag { justify-content: center; }

.section-head .tag::before { display: none; }  /* bez čárky u centrovaného */

.section-head .lead { margin: 0 auto; }



.srv-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));

  gap: 24px;

  counter-reset: srv;

}



.srv-card {

  background: #252320;

  padding: 36px 28px 32px;

  border-radius: 0;

  position: relative;

  overflow: hidden;

  counter-increment: srv;

  border-left: 3px solid rgba(232,82,10,.18);

  transition: border-left-color .3s, transform .3s, box-shadow .3s;

}

/* Velké ghostové číslo v rohu */

.srv-card::before {

  content: '0' counter(srv);

  position: absolute;

  top: -24px;

  right: 18px;

  font-family: var(--font-display);

  font-size: 10rem;

  font-weight: 400;

  color: rgba(255,255,255,.04);

  line-height: 1;

  pointer-events: none;

  user-select: none;

  letter-spacing: -.02em;

}

/* Spodní accent linka – schovaná, místo ní levý border */

.srv-card::after { display: none; }

.srv-card:hover {

  border-left-color: var(--accent);

  transform: translateX(5px);

  box-shadow: 0 24px 56px rgba(0,0,0,.35);

}



.srv-icon {

  width: 52px;

  height: 52px;

  background: var(--accent);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 20px;

  box-shadow: 0 6px 18px rgba(232,82,10,.35);

}

.srv-icon svg { width: 25px; height: 25px; fill: #fff; }



.srv-title { font-size: 1.08rem; font-weight: 700; margin-bottom: 15px; color: #fff; }



.srv-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.srv-list li {

  font-size: .86rem;

  color: rgba(255,255,255,.48);

  padding-left: 16px;

  position: relative;

}

.srv-list li::before {

  content: '—';

  position: absolute;

  left: 0;

  color: var(--accent);

  font-weight: 700;

}





/* ═══════════════════════════════════════════════════════════

   GALERIE

   ═══════════════════════════════════════════════════════════ */

#gallery { padding: var(--sp) 0; background: #141414; }

#gallery .h2   { color: #fff; }

#gallery .lead { color: rgba(255,255,255,.45); }



.gal-head {

  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  flex-wrap: wrap;

  gap: 20px;

  margin-bottom: 36px;

}



.gal-grid {

  display: grid;

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

  grid-auto-rows: 215px;

  gap: 6px;

}



.gal-item {

  overflow: hidden;

  cursor: zoom-in;

  position: relative;

  border-radius: 4px;

}

.gal-item.w2 { grid-column: span 2; }

.gal-item.r2 { grid-row:    span 2; }



.gal-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .55s ease;

}



/* Orange tint overlay */

.gal-item::after {

  content: '';

  position: absolute;

  inset: 0;

  background: rgba(232,82,10,0);

  transition: background .3s;

  border-radius: 4px;

}



/* Zoom ikona */

.gal-item::before {

  content: '';

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0);

  width: 50px;

  height: 50px;

  background:

    rgba(255,255,255,.95)

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8520a' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z'/%3E%3C/svg%3E")

    center/24px no-repeat;

  border-radius: 50%;

  z-index: 2;

  transition: transform .28s cubic-bezier(.34,1.56,.64,1);

}



.gal-item:hover img    { transform: scale(1.08); }

.gal-item:hover::after { background: rgba(232,82,10,.12); }

.gal-item:hover::before { transform: translate(-50%, -50%) scale(1); }



/* Lightbox */

#lb {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,.97);

  z-index: 9000;

  align-items: center;

  justify-content: center;

}

#lb.on { display: flex; }

#lb img {

  max-width: 92vw;

  max-height: 90vh;

  object-fit: contain;

  border-radius: 4px;

  box-shadow: 0 30px 80px rgba(0,0,0,.6);

}

#lb-close {

  position: absolute;

  top: 20px; right: 28px;

  font-size: 2.2rem;

  color: rgba(255,255,255,.65);

  background: none;

  border: none;

  cursor: pointer;

  line-height: 1;

  transition: color .2s;

}

#lb-close:hover { color: var(--accent); }





/* ═══════════════════════════════════════════════════════════

   KONTAKT

   ═══════════════════════════════════════════════════════════ */

#contact {

  padding: var(--sp) 0;

  background: var(--light);

  position: relative;

}

#contact::before {

  content: '';

  position: absolute;

  top: -1px; left: 0; right: 0;

  height: 80px;

  background: var(--light);

  clip-path: polygon(0 0, 100% 100%, 0 100%);

  pointer-events: none;

}



.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1.5fr;

  gap: clamp(36px, 6vw, 84px);

  align-items: start;

}



.ci { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }

.ci-icon {

  flex-shrink: 0;

  width: 46px;

  height: 46px;

  background: var(--accent);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 6px 18px rgba(232,82,10,.3);

}

.ci-icon svg { width: 20px; height: 20px; fill: #fff; }

.ci-lbl { font-size: .67rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }

.ci-val { font-size: 1rem; font-weight: 600; }

.ci-val a { text-decoration: none; transition: color .2s; }

.ci-val a:hover { color: var(--accent); }



.btn-call {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-top: 28px;

  background: var(--accent);

  color: #fff;

  text-decoration: none;

  padding: 18px 28px;

  border-radius: 50px;

  font-size: 1.05rem;

  font-weight: 700;

  box-shadow: 0 8px 24px rgba(232,82,10,.35);

  transition: background .22s, transform .22s, box-shadow .22s;

}

.btn-call:hover {

  background: var(--accent2);

  transform: translateY(-2px);

  box-shadow: 0 12px 32px rgba(232,82,10,.45);

}



/* Formulář */

.form-card {

  background: #fff;

  padding: 44px;

  border-radius: var(--r);

  box-shadow: 0 16px 56px rgba(0,0,0,.08);

}

.form-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 4px; }

.form-card .sub { font-size: .84rem; color: #aaa; margin-bottom: 28px; }



.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.f-group { margin-bottom: 14px; }

.f-group label {

  display: block;

  font-size: .75rem;

  font-weight: 700;

  color: #555;

  margin-bottom: 6px;

  letter-spacing: .06em;

  text-transform: uppercase;

}

.f-group input,

.f-group select,

.f-group textarea {

  width: 100%;

  padding: 13px 15px;

  border: 1.5px solid #e2e0da;

  border-radius: 6px;

  font-family: inherit;

  font-size: .9rem;

  color: var(--dark);

  background: #faf9f6;

  transition: border-color .22s, background .22s, box-shadow .22s;

}

.f-group input:focus,

.f-group select:focus,

.f-group textarea:focus {

  outline: none;

  border-color: var(--accent);

  background: #fff;

  box-shadow: 0 0 0 3px rgba(232,82,10,.1);

}

.f-group textarea { resize: vertical; min-height: 105px; }



.f-submit { width: 100%; margin-top: 6px; border-radius: 50px; }

.f-note {

  font-size: .71rem;

  color: #bbb;

  text-align: center;

  margin-top: 12px;

  line-height: 1.5;

}

.f-ok {

  display: none;

  margin-top: 14px;

  padding: 14px;

  background: #e9f7ea;

  color: #2e7d32;

  border-radius: 6px;

  text-align: center;

  font-weight: 600;

  font-size: .9rem;

  border-left: 4px solid #2e7d32;

}

.f-ok--error {

  background: #fdecea;

  color: #c62828;

  border-left-color: #c62828;

}

.f-submit:disabled {

  opacity: .6;

  cursor: not-allowed;

  transform: none !important;

}





/* ═══════════════════════════════════════════════════════════

   FOOTER

   ═══════════════════════════════════════════════════════════ */

footer {

  background: #0f0f0f;

  color: rgba(255,255,255,.4);

  padding: 52px 0 28px;

}



.ft-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  flex-wrap: wrap;

  gap: 32px;

  padding-bottom: 32px;

  margin-bottom: 24px;

  border-bottom: 1px solid rgba(255,255,255,.07);

}



.ft-brand .b1 { font-size: 1.3rem; font-weight: 800; color: #fff; letter-spacing: .04em; }

.ft-brand .b2 {

  font-size: .58rem;

  color: var(--accent);

  letter-spacing: .2em;

  text-transform: uppercase;

  margin-top: 3px;

}

.ft-brand p {

  font-size: .8rem;

  color: rgba(255,255,255,.33);

  margin-top: 10px;

  max-width: 270px;

  line-height: 1.65;

}



.ft-nav h4,

.ft-contact h4 {

  font-size: .67rem;

  font-weight: 700;

  color: rgba(255,255,255,.28);

  letter-spacing: .18em;

  text-transform: uppercase;

  margin-bottom: 16px;

}

.ft-nav ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.ft-nav a { text-decoration: none; font-size: .85rem; color: rgba(255,255,255,.45); transition: color .2s; }

.ft-nav a:hover { color: var(--accent); }



.ft-contact a.ft-phone {

  text-decoration: none;

  font-size: .95rem;

  color: var(--accent);

  font-weight: 700;

}

.ft-contact a.ft-email {

  text-decoration: none;

  font-size: .84rem;

  color: rgba(255,255,255,.4);

  display: block;

  margin-top: 8px;

  transition: color .2s;

}

.ft-contact a.ft-email:hover { color: var(--accent); }



.ft-bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

}

.ft-bottom p { font-size: .77rem; }





/* ═══════════════════════════════════════════════════════════

   RESPONZIVITA

   ═══════════════════════════════════════════════════════════ */

@media (max-width: 980px) {

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

  .about-img-wrap img { height: 360px; }

  .about-badge { bottom: -14px; right: 14px; }

  .about-text { padding-right: 0; }



  .gal-grid { grid-template-columns: repeat(2, 1fr); }

  .gal-item.w2 { grid-column: span 1; }

  .gal-item.r2 { grid-row:    span 1; }



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



  .stats-row { grid-template-columns: repeat(2, 1fr); }

  .stat:nth-child(2) { border-right: none; }

}



@media (max-width: 768px) {

  .nav-list { display: none; }

  .nav-list.open {

    display: flex;

    flex-direction: column;

    position: absolute;

    top: 100%; left: 0; right: 0;

    background: rgba(18,16,14,.98);

    padding: 20px 24px;

    gap: 4px;

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

    border-bottom: 3px solid var(--accent);

  }

  .nav-list.open > li > a:not(.nav-phone) {

    display: block;

    padding: 10px 12px;

    border-left: 2px solid transparent;

    transition: border-color .2s, color .2s, padding .2s;

  }

  .nav-list.open > li > a:not(.nav-phone)::after { display: none; }

  .nav-list.open > li > a:not(.nav-phone):hover,

  .nav-list.open > li > a.active {

    border-left-color: var(--accent);

    padding-left: 16px;

  }

  .hamburger { display: flex; }



  .f-row { grid-template-columns: 1fr; }

  .gal-grid { grid-auto-rows: 175px; }

}



@media (max-width: 520px) {

  .gal-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }

  .form-card { padding: 26px 20px; }

  .ft-top { flex-direction: column; }

  .stats-row { grid-template-columns: repeat(2, 1fr); }

  .stat:nth-child(3) { border-right: none; }

}