/* =========================
   VARIABLES
   ========================= */
:root{
  --primary:#6D3B07;
  --terakot:#6D3B07; /* залишено для зворотної сумісності */
  --secondary:#FFF1E7;
  --background-light:#FFFAFA;
  --background-white:#fff;
  --text-dark:#000;
  --link:#000;
  --link-hover:#000;
  --shadow-light:rgba(0,0,0,.1);
  --shadow-medium:rgba(0,0,0,.2);
  --overlay:rgba(0,0,0,.5);
  --instagram:linear-gradient(-45deg,#405de6,#833ab4,#c13584,#fd1d1d,#f56040,#f77737,#fcaf45,#ffdc80);
  --facebook:#3b5998;
  --facebookmessenger:#0084ff;
  --whatsapp:#25D366;
  --telegram:#0088CC;
  --tiktok:#000;
}

/* =========================
   BASE
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Montserrat",sans-serif;
  font-optical-sizing:auto;
  font-style:normal;
  color:var(--text-dark);
  background:#fff;
}
a{color:var(--link)}
a:hover{color:var(--background-white)}

.center{text-align:center;color:#6D3B07}
.muted{color:#000}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;padding:.5rem .75rem;background:#fff;color:#000;border-radius:.5rem;z-index:1000}

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

/* =========================
   CONTACT BAR (fixed top)
   ========================= */
.contact-bar{
  width:100%;height:40px;background:var(--terakot);color:var(--background-white);
  display:flex;justify-content:center;align-items:center;gap:30px;
  font-size:1.1rem;font-weight:500;position:fixed;top:0;left:0;z-index:1000;
  padding:10px 20px
}
.contact-item{display:flex;align-items:center;gap:8px}
.contact-item a{color:#fff;text-decoration:none}
.contact-item a:hover{color:#fff;text-decoration:underline}
@media (max-width:768px){
  .contact-bar{gap:15px;font-size:.6rem;padding:10px 15px}
}
@media (max-width:480px){
  .contact-bar{flex-direction:row;text-align:center;padding:10px 15px}
}

/* =========================
   HEADER / NAV
   ========================= */
header{
  background:var(--secondary);
  box-shadow:0 2px 5px var(--shadow-light);
  position:fixed;width:100%;height:60px;top:40px;z-index:1000;
  display:flex;align-items:center;justify-content:space-between
}
.logo{font-size:24px;font-weight:700;color:var(--text-dark);padding-left:20px}
.logo a{text-decoration:none;color:var(--text-dark)}
nav{flex-grow:1;display:flex;justify-content:flex-end;padding-right:20px}
.menu{list-style:none;margin:0;padding:0;display:flex;gap:40px}
.menu li a{
  text-decoration:none;color:var(--text-dark);font-weight:700;font-size:20px;padding:10px;border-radius:5px
}
.menu li a:hover{color:var(--background-white);background:var(--primary)}
.hamburger{
  display:none;flex-direction:column;justify-content:space-between;width:30px;height:20px;cursor:pointer;background:none;border:0
}
.hamburger span{background:var(--text-dark);height:3px;width:100%;transition:all .3s}

@media (max-width:768px){
  header{height:50px;top:40px}
  .hamburger{display:flex;margin-right:15px}
  .menu{
    display:none;flex-direction:column;align-items:center;width:100%;background:var(--background-white);
    position:absolute;top:50px;left:0;padding:20px 0;box-shadow:0 2px 5px var(--shadow-light);z-index:999
  }
  .menu.active{display:flex}
  .menu li{margin:10px 0}
  .menu li a{font-size:16px}
}
@media (max-width:480px){
  .logo{font-size:20px;padding-left:15px}
  .menu li a{font-size:18px}
}

/* =========================
   HERO / SLIDER (video)
   ========================= */
.slider{
  width:100%;height:100vh;max-height:1024px;position:relative;overflow:hidden;margin-top:100px
}
.slide{width:100%;height:100%;position:relative;overflow:hidden}
.slide-video{
  width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:1
}
.slide-text{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;color:#fff;text-shadow:0 2px 4px var(--overlay);z-index:2
}
.slide-text h1{font-size:5rem;font-weight:700;margin:0}
@media (max-width:768px){
  .slider{height:60vh;max-height:512px;margin-top:90px}
  .slide-text h1{font-size:2.5rem}
}
@media (max-width:480px){
  .slider{height:50vh;max-height:400px}
  .slide-text h1{font-size:1.8rem}
}

/* =========================
   ABOUT
   ========================= */
.about{padding:80px 20px;background:var(--background-light);text-align:center}
.about-content{max-width:80%;margin:0 auto}
.about-content h1{margin-top: 50px;font-size: 32px;}
.about h2{
  font-size:40px;font-weight:700;color:var(--text-dark);margin-bottom:25px;
  text-shadow:1px 1px 2px var(--shadow-light);animation:fadeIn 1s ease-in
}
.about p{font-size:20px;color:var(--text-dark);line-height:1.7;margin:15px 0;animation:fadeIn 1.2s ease-in}
.about-image{
  display:block;max-width:100%;height:auto;border-radius:10px;margin:0 auto;
  box-shadow:0 4px 8px var(--shadow-light);animation:fadeIn 1.4s ease-in
}
.cta-button{
  display:inline-block;padding:12px 30px;background:var(--primary);color:#fff;text-decoration:none;
  font-size:25px;font-weight:600;border-radius:15px;margin-top:20px;transition:background .3s,transform .3s
}
.cta-button:hover{background:var(--primary);color:#fff;transform:scale(1.15)}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:768px){
  .about{padding:40px 15px}
  .about h2{font-size:28px}
  .about p{font-size:16px}
  .about-content h1{margin-top: 100px;}
}
@media (max-width:480px){
  .about h2{font-size:24px}
  .about p{font-size:14px}
}

/* =========================
   ADVANTAGES
   ========================= */
.advantages{padding:60px 20px;background:var(--background-white);text-align:center}
.advantages-content{max-width:1200px;margin:0 auto}
.advantages h2{font-size:36px;font-weight:700;color:var(--text-dark);margin-bottom:40px;text-shadow:1px 1px 2px var(--shadow-light)}
.advantages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.advantage-card{
  background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 5px var(--shadow-light);
  transition:transform .3s,box-shadow .3s
}
.advantage-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px var(--shadow-medium);cursor:pointer}
.advantage-icon{width:80px;height:80px;margin-bottom:15px}
.advantage-card h3{font-size:20px;font-weight:700;color:var(--text-dark);margin-bottom:10px}
.advantage-card p{font-size:16px;color:var(--text-dark);line-height:1.6}
@media (max-width:768px){
  .advantages{padding:40px 15px}
  .advantages h2{font-size:28px}
  .advantage-card{padding:15px}
  .advantage-icon{width:40px;height:40px}
  .advantage-card h3{font-size:18px}
  .advantage-card p{font-size:14px}
}
@media (max-width:480px){
  .advantages h2{font-size:24px}
  .advantage-icon{width:64px;height:64px}
  .advantage-card h3{font-size:16px}
  .advantage-card p{font-size:13px}
}

/* =========================
   SERVICES
   ========================= */
.services{padding:60px 20px;background:var(--background-white);text-align:center}
.services-content{max-width:90%;margin:0 auto}
.services h2{font-size:36px;font-weight:700;color:var(--text-dark);margin-bottom:40px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px}
.service-card{
  background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 5px var(--shadow-light);
  transition:transform .3s,box-shadow .3s
}
.service-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px var(--shadow-medium);cursor:pointer}
.service-card img{width:100%;height:200px;object-fit:cover;border-radius:8px;margin-bottom:15px}
.service-card h3{font-size:24px;font-weight:700;color:var(--text-dark);margin-bottom:15px}
.service-card p{font-size:16px;color:var(--text-dark);line-height:1.6}
/* --- Services: price badge --- */
.services .service-card {
  position: relative;
/*  padding-bottom: 84px;  місце під бейдж, щоб не перекривав текст */
}
.services .service-card .price-badge {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 200px;
  max-width: calc(100% - 32px);
  padding: 12px 16px;

  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1;
  letter-spacing: .2px;
  text-align: center;
  color: #fff;

  background: #6D3B07;        /* контрастний фон */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;                       /* «пілюля» */

  /* легка анімація появи */
  opacity: 0;
  transform-origin: center bottom;
  animation: priceBadgeIn .28s ease-out .05s forwards;
}

@supports (backdrop-filter: blur(8px)) {
  .services .service-card .price-badge {
    background: #6D3B07;
    backdrop-filter: saturate(160%) blur(8px);
  }
}

@keyframes priceBadgeIn {
  from { transform: translateX(-50%) translateY(6px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

/* Ховер ефект для картки — бейдж трохи підсвічується */
.services .service-card:hover .price-badge,
.services .service-card:focus-within .price-badge {
  box-shadow:
    0 14px 28px rgba(0,0,0,.32),
    0 4px 12px rgba(0,0,0,.28);
}

/* Якщо випадково лишиться старий <p class="muted"> після бейджу — ховаємо */
.services .service-card .muted:last-child {
  display: none;
}

/* Дрібний тюнінг на дуже вузьких екранах */
@media (max-width: 380px) {
  .services .service-card .price-badge {
    min-width: 170px;
    padding: 10px 14px;
    font-size: .95rem;
  }
}
@media (max-width:768px){
  .services{padding:40px 15px}
  .services h2{font-size:28px}
  .service-card img{height:150px}
  .service-card h3{font-size:20px}
  .service-card p{font-size:14px}
}
@media (max-width:480px){
  .services h2{font-size:24px}
  .service-card img{height:auto}
}
/*BUTTONS SERVICES*/
/* Кнопки під ціною в каталозі стель */
.ceiling-item {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

/* ціна — по центру знизу, контрастний фон */
.ceiling-item .price {
  margin-top: auto;
  align-self: center;
  margin-bottom: 0.5rem;
  padding: .5rem .9rem;
  background: #6D3B07;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* контейнер кнопок */
.ceiling-actions {
  display: flex;
  gap: .6rem;
  margin: 0 .75rem .85rem;
}

/* кнопки */
.ceiling-actions .btn {
  flex: 1 1 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .65rem .9rem;
  border-radius: .8rem;
  font-weight: 700;
  font-family:"Montserrat",sans-serif;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  border: 2px solid #6D3B07;
}

.ceiling-actions .btn2 {
  flex: 1 1 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: .65rem .9rem;
  border-radius: .8rem;
  font-weight: 900;
  font-family:"Montserrat",sans-serif;
  font-size: 18px;
  text-decoration: none;
  transition: transform .12s ease, opacity .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
  border: 3px solid #6D3B07;  
}

.ceiling-actions .btn:active { transform: translateY(1px); }

/* варіації */
.ceiling-actions .btn-primary {
  background: #fff;
  color: #000;
}
.ceiling-actions .btn-primary2 {
  background: #6D3B07;
  color: #fff;
}
.ceiling-actions .btn-primary:hover { opacity: .92; cursor: pointer;}
.ceiling-actions .btn-primary2:hover { opacity: .82; cursor: pointer;}

.ceiling-actions .btn-outline {
  background: #fff;
  color: #221F1F;
  border-color: #221F1F;
}
.ceiling-actions .btn-outline:hover {
  background: #F4F4F4;
}

/* мобільна адаптація — при дуже вузьких екранах у стовпчик */
@media (max-width: 420px) {
  .ceiling-actions { flex-direction: column; }
}
/* =========================
   SIMPLE PRICES (home section)
   ========================= */
.prices{padding:60px 20px;background:var(--background-light);text-align:center}
.prices-content{max-width:1200px;margin:0 auto}
.prices h2{font-size:36px;font-weight:700;color:var(--text-dark);margin-bottom:40px}
.prices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.price-card{
  background:var(--background-white);padding:15px;border-radius:8px;box-shadow:0 2px 5px var(--shadow-light);
  transition:transform .3s,box-shadow .3s
}
.price-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px var(--shadow-medium);cursor:pointer}
.price-card h3{font-size:20px;font-weight:700;color:var(--text-dark);margin-bottom:10px}
.price-card p{font-size:16px;color:var(--text-dark)}
.price-link{
  display:inline-block;margin-top:30px;padding:12px 24px;background:var(--primary);color:#fff;text-decoration:none;
  font-weight:700;font-size:18px;border-radius:50px;transition:transform .3s
}
.price-link:hover{transform:scale(1.1)}
@media (max-width:768px){
  .prices{padding:40px 15px}
  .prices h2{font-size:28px}
  .price-card h3{font-size:18px}
  .price-card p{font-size:14px}
  .price-link{font-size:16px;padding:10px 20px}
}
@media (max-width:480px){
  .prices h2{font-size:24px}
  .price-card h3{font-size:16px}
}

/* =========================
   CALCULATOR
   ========================= */
.calculator{
  display:flex;align-items:center;justify-content:center;gap:25px;padding:15px 25px;flex-wrap:wrap
}
.calculator label{font-size:20px;color:#333}
.calculator #areaValue{font-weight:700;font-size:20px;margin:0 5px}
input[type=range]{width:350px;accent-color:var(--primary);cursor:pointer}
.price-box{
  border:3px solid var(--primary);color:var(--text-dark);font-weight:700;font-size:22px;
  padding:8px 16px;border-radius:10px
}
@media (max-width:600px){
  .calculator{flex-direction:column;gap:15px;padding:15px 20px}
  input[type=range]{width:100%;max-width:250px}
  .price-box{font-size:18px;padding:6px 14px}
}

/*Міні прайс*/
/* === Quick Prices (Home) === */
.quick-prices { padding: 48px 16px; background: #f9fafb; }
.quick-prices h2 { text-align: center; margin-bottom: 16px; }

.quick-prices-table { border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; background: #fff; }
.quick-table { width: 100%; border-collapse: collapse; }
.quick-table thead th {
  background: #f3f4f6; text-align: left; padding: 14px 16px; font-weight: 600; font-size: 0.98rem;
  border-bottom: 1px solid #e5e7eb;
}
.quick-table tbody td {
  padding: 14px 16px; border-bottom: 1px solid #eef2f7; vertical-align: middle;
}
.quick-table tbody tr:last-child td { border-bottom: 0; }

.quick-table td.price {
  width: 220px; position: relative;
}
.quick-table td.price .calc-price {
  display: inline-block;
  padding: 10px 14px;
  min-width: 160px;
  text-align: center;
  font-weight: 700;
  background: linear-gradient(180deg, #6D3B07);
  color: #fff;
  border-radius: 9999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* чек-марк зліва */
.tick {
  display: inline-block; width: 18px; height: 18px; margin-right: 10px;
  border-radius: 4px; background: #6D3B07; position: relative; top: 3px;
}
.tick::after{
  content:""; position:absolute; left:4px; top:1px; width:8px; height:12px;
  border: 2px solid #fff; border-top:0; border-left:0; transform: rotate(45deg);
}

/* примітка під таблицею */
.quick-note { margin-top: 10px; font-size: 1.0rem; color: #6b7280; text-align: center}
.quick-note strong { color:#111827; }

@media (max-width: 640px){
  .quick-prices { padding: 32px 12px; }
  .quick-table thead { display: none; }
  .quick-table, .quick-table tbody, .quick-table tr, .quick-table td {width: 100%; }
  .quick-table tr { border-bottom: 1px solid #eef2f7; padding: 10px 0; }
  .quick-table td { border: 0; padding: 8px 0; }
  .quick-table td.price { margin-top: 6px;}
  .quick-table td.price .calc-price { width: 100%;}
}

/* =========================
   CATALOG (home)
   ========================= */
.ceiling-catalog-section{padding:40px 0;background:#fff}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.ceiling-catalog{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.ceiling-item{
  background:#fff;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,.1);overflow:hidden;text-align:center;padding:15px
}
.ceiling-item img{max-width:100%;height:auto;border-radius:5px}
.ceiling-item h3{color:#333;margin:10px 0;font-size:18px}
.ceiling-item p{color:#666;font-size:16px;margin:10px 0}
.price{color:#6D3B07;font-weight:700;font-size:16px;margin:10px 0}
@media (max-width:600px){
  .ceiling-catalog{grid-template-columns:1fr}
}
/* =========================
   PRICE FACTORS (home text)
   ========================= */
.price-factors{padding:50px 20px;text-align:left}
.price-factors .container{max-width:90%;margin:0 auto}
.price-factors h2{font-size:30px;color:#333;margin-bottom:25px;text-align:center}
.price-factors p{font-size:18px;color:#555;line-height:1.7;margin-bottom:15px}
@media (max-width:768px){
  .price-factors h2{font-size:26px}
  .price-factors p{font-size:16px}
}

/* =========================
   INVITE MEASURER (CTA strip)
   ========================= */
.invite-measurer{max-width:100%;background:var(--secondary);padding:40px 20px;text-align:center}
.invite-measurer .btn-invite{
  display:inline-block;background:var(--primary);color:#fff;text-decoration:none;font-size:20px;
  padding:14px 30px;border-radius:15px;font-weight:600;transition:transform .3s
}
.invite-measurer .btn-invite:hover{transform:scale(1.1)}
@media (max-width:600px){
  .invite-measurer .btn-invite{font-size:18px;padding:12px 25px}
}

/* =========================
   REALIZATIONS (home)
   ========================= */
.realizations{padding:60px 20px;background:var(--background-white);text-align:center}
.realizations-content{max-width:1200px;margin:0 auto}
.realizations h2{font-size:36px;font-weight:700;color:var(--text-dark);margin-bottom:40px}
.realizations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.realization-card{
  background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 5px var(--shadow-light);
  transition:transform .3s,box-shadow .3s
}
.realization-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px var(--shadow-medium);cursor:pointer}
.realization-card img{width:100%;height:200px;object-fit:cover;border-radius:8px;margin-bottom:15px}
.realization-card h3{font-size:20px;font-weight:700;color:var(--text-dark);margin-bottom:10px}
.realization-card p{font-size:14px;color:var(--text-dark);line-height:1.6}
.realization-link{
  display:inline-block;margin-top:30px;padding:12px 24px;background:var(--primary);color:#fff;text-decoration:none;
  font-weight:700;font-size:18px;border-radius:15px;transition:transform .3s
}
.realization-link:hover{transform:scale(1.1)}
@media (max-width:768px){
  .realizations{padding:40px 15px}
  .realizations h2{font-size:28px}
  .realization-card img{height:150px}
  .realization-card h3{font-size:18px}
  .realization-card p{font-size:13px}
  .realization-link{font-size:16px;padding:10px 20px}
}
@media (max-width:480px){
  .realizations h2{font-size:24px}
  .realization-card img{height:auto}
}


/* === Fullscreen Gallery Viewer === */
.gv-modal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.82);
  display:none; align-items:center; justify-content:center;
  padding:10px;
}
.gv-modal[aria-hidden="false"]{ display:flex; }

.gv-content{
  position:relative;
  width:min(750px, 100%);
  background:#111; color:#fff; border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.4);
  padding:10px; display:grid; gap:30px;
  grid-template-rows:auto auto auto;
}

.gv-close{
  position:absolute; top:8px; right:10px;
  border:0; background:transparent; color:#fff; cursor:pointer;
  font-size:28px; line-height:1; padding:6px 10px; border-radius:10px;
}
.gv-close:focus{ outline:2px solid #ccc; outline-offset:2px; }

.gv-image-wrap{
  aspect-ratio:16/9; background:#000; border-radius:12px;
  overflow:hidden; display:grid; place-items:center;
}
.gv-image-wrap img{ width:100%; height:100%; object-fit:cover; }

.gv-caption{ padding:0 4px; }
.gv-caption h3{ margin:0 0 6px; font-size:1.25rem; text-align: center;}
.gv-caption p{ margin:0; color:#d0d0d0; text-align: center;}

.gv-thumbs{ display:flex; gap:12px; justify-content:center; padding-top:8px; flex-wrap:wrap; }
.gv-thumb{
  border:2px solid transparent; border-radius:10px; overflow:hidden;
  padding:0; background:none; cursor:pointer;
}
.gv-thumb img{ width:120px; height:80px; object-fit:cover; display:block; }
.gv-thumb[aria-selected="true"]{ border-color:#fff; }



/* =========================
   FAQ
   ========================= */
.faq{padding:60px 20px;background:var(--background-light);text-align:center}
.faq-content{max-width:1200px;margin:0 auto}
.faq h2{font-size:36px;font-weight:700;color:var(--text-dark);margin-bottom:40px}
.faq-grid{display:flex;flex-direction:column;gap:15px}
.faq-item{background:var(--background-white);border-radius:8px;box-shadow:0 2px 5px var(--shadow-light);overflow:hidden}
.faq-question{
  width:100%;background:var(--background-white);border:none;padding:20px;
  font-family:"Montserrat",sans-serif;font-size:18px;font-weight:600;color:var(--text-dark);
  text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .3s
}
.faq-question:hover{background:var(--secondary)}
.faq-toggle{font-size:24px;color:var(--primary)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 20px}
.faq-answer.active{max-height:200px;padding:20px}
.faq-answer p{font-size:16px;color:var(--text-dark);line-height:1.6;margin:0}
@media (max-width:768px){
  .faq{padding:40px 15px}
  .faq h2{font-size:28px}
  .faq-question{font-size:16px;padding:15px}
  .faq-answer p{font-size:14px}
}
@media (max-width:480px){
  .faq h2{font-size:24px}
  .faq-question{font-size:14px}
  .faq-answer p{font-size:13px}
}

/* =========================
   CONTACT (short block on pages)
   ========================= */
.contact{padding:60px 20px;background:var(--background-light);text-align:center}
.contact-content{max-width:1200px;margin:0 auto}
.contact h2{font-size:36px;font-weight:700;color:var(--text-dark);margin-bottom:40px}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}
.contact-info h3,.contact-form h3{font-size:24px;font-weight:700;color:var(--text-dark);margin-bottom:20px}
.contact-info p{font-size:16px;color:var(--text-dark);line-height:1.6;margin:10px 0}
.contact-info a{color:var(--link);text-decoration:none;transition:color .3s}
.contact-info a:hover{color:var(--link-hover)}
.contact-form form{display:flex;flex-direction:column;gap:15px}
.contact-form input,.contact-form textarea{
  padding:12px;font-size:16px;font-family:'Montserrat',sans-serif;border: 2px solid #6D3B07;border-radius:8px;outline:none;transition:border-color .3s
}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--link)}
.contact-form textarea{height:150px;resize:vertical}
.contact-form button{
  padding:12px 24px;background:var(--primary);color:#fff;font-family:'Montserrat',sans-serif;
  font-size:16px;font-weight:700;border:none;border-radius:50px;cursor:pointer;transition:transform .3s
}
.contact-form button:hover{transform:scale(1.1)}
@media (max-width:768px){
  .contact{padding:40px 15px}
  .contact h2{font-size:28px}
  .contact-info h3,.contact-form h3{font-size:20px}
  .contact-info p{font-size:14px}
  .contact-form input,.contact-form textarea{font-size:14px;padding:10px}
  .contact-form textarea{height:120px}
  .contact-form button{font-size:16px;padding:10px 20px}
}
@media (max-width:480px){
  .contact h2{font-size:24px}
  .contact-info h3,.contact-form h3{font-size:18px}
}

/* =========================
   CTA SECTION
   ========================= */
.cta{padding:60px 20px;background:var(--secondary);text-align:center;color:var(--text-dark)}
.cta-content{max-width:800px;margin:0 auto}
.cta h2{font-size:36px;font-weight:700;margin-bottom:20px}
.cta p{font-size:18px;line-height:1.6;margin-bottom:30px}
.cta .cta-button{
  padding:12px 24px;background:var(--primary);color:#fff;text-decoration:none;font-weight:700;
  font-size:18px;border-radius:15px;transition:transform .3s
}
.cta .cta-button:hover{transform:scale(1.1)}
@media (max-width:768px){
  .cta{padding:40px 15px}
  .cta h2{font-size:28px}
  .cta p{font-size:16px}
  .cta .cta-button{font-size:16px;padding:10px 20px}
}
@media (max-width:480px){
  .cta h2{font-size:24px}
  .cta p{font-size:14px}
}

/* =========================
   HOW WE WORK
   ========================= */
.how-we-work{padding:60px 20px;background:var(--background-white);text-align:center}
.how-we-work-content{max-width:1200px;margin:0 auto}
.how-we-work h2{font-size:36px;font-weight:700;color:var(--text-dark);margin-bottom:40px}
.how-we-work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px}
.work-step{
  background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 5px var(--shadow-light);
  transition:transform .3s,box-shadow .3s
}
.work-step:hover{transform:translateY(-5px);box-shadow:0 4px 10px var(--shadow-medium);cursor:pointer}
.work-step img{width:40px;height:40px;margin-bottom:15px}
.work-step h3{font-size:20px;font-weight:700;color:var(--text-dark);margin-bottom:10px}
.work-step p{font-size:14px;color:var(--text-dark);line-height:1.6}
@media (max-width:768px){
  .how-we-work{padding:40px 15px}
  .how-we-work h2{font-size:28px}
  .work-step img{width:32px;height:32px}
  .work-step h3{font-size:18px}
  .work-step p{font-size:13px}
}
@media (max-width:480px){
  .how-we-work h2{font-size:24px}
  .work-step img{width:64px;height:64px}
}

/* =========================
   FOOTER
   ========================= */
footer{background:var(--terakot);color:#fff;padding:40px 20px;text-align:center}
.footer-content{max-width:1200px;margin:0 auto}
.footer-logo{font-size:24px;font-weight:700;margin-bottom:20px}
.footer-logo a{color:#fff;text-decoration:none}
.footer-menu{
  list-style:none;padding:0;margin:0 0 20px;display:flex;justify-content:center;gap:20px
}
.footer-menu li a{
  color:#fff;text-decoration:none;font-size:18px;font-weight:700;transition:color .3s,background .3s
}
.footer-menu li a:hover{color:#fff;text-decoration:underline}
.footer-copyright{font-size:16px;color:#fff}
@media (max-width:768px){
  footer{padding:30px 15px}
  .footer-logo{font-size:20px}
  .footer-menu{flex-direction:column;align-items:center;gap:15px}
  .footer-menu li a{
    font-size:18px;padding:8px 16px;color:#fff; /* fixed var(--text-light) */
    transition:color .3s,background .3s
  }
  .footer-menu li a:hover{color:#fff;background:var(--primary);border-radius:5px}
  .footer-copyright{font-size:14px}
}
@media (max-width:480px){
  .footer-logo{font-size:18px}
  .footer-menu li a{font-size:16px}
}

/* Developer credit */
.developer-credit{font-size:16px;color:#fff;text-align:center;margin:20px 0 10px}
.developer-credit a{color:#fff;text-decoration:none;font-weight:500}
.developer-credit a:hover{text-decoration:underline}
@media (max-width:600px){
  .developer-credit{font-size:13px;padding:0 10px}
}

/* =========================
   SOCIAL PANEL
   ========================= */
.social-panel{
  position:fixed;right:20px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;z-index:1000
}
.social-icon-instagram,
.social-icon-facebook,
.social-icon-facebookmessenger,
.social-icon-whatsapp,
.social-icon-telegram,
.social-icon-tiktok{
  display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;
  box-shadow:0 2px 5px var(--shadow-medium);transition:transform .3s
}
.social-icon-instagram{background:var(--instagram)}
.social-icon-facebook{background:var(--facebook)}
.social-icon-facebookmessenger{background:var(--facebookmessenger)}
.social-icon-whatsapp{background:var(--whatsapp)}
.social-icon-telegram{background:var(--telegram)}
.social-icon-tiktok{background:var(--tiktok)}
.social-icon-instagram:hover,
.social-icon-facebook:hover,
.social-icon-facebookmessenger:hover,
.social-icon-whatsapp:hover,
.social-icon-telegram:hover{transform:scale(1.1)}
.social-icon-tiktok:hover{transform:scale(1.1)}
.social-icon-instagram img,
.social-icon-facebook img,
.social-icon-facebookmessenger img,
.social-icon-telegram img,
.social-icon-tiktok img,
.social-icon-whatsapp img{width:32px;height:32px}
@media (max-width:768px){
  .social-panel{right:10px;gap:8px}
  .social-icon-instagram,
  .social-icon-facebook,
  .social-icon-facebookmessenger,
  .social-icon-telegram,
  .social-icon-tiktok,
  .social-icon-whatsapp{width:50px;height:50px}
  .social-icon-instagram img,
  .social-icon-facebook img,
  .social-icon-facebookmessenger img,
  .social-icon-telegram img,
  .social-icon-tiktok img,
  .social-icon-whatsapp img{width:24px;height:24px}
}
@media (max-width:480px){
  .social-panel{right:8px;gap:6px}
  .social-icon-instagram,
  .social-icon-facebook,
  .social-icon-facebookmessenger,
  .social-icon-telegram,
  .social-icon-tiktok,
  .social-icon-whatsapp{width:40px;height:40px}
  .social-icon-instagram img,
  .social-icon-facebook img,
  .social-icon-facebookmessenger img,
  .social-icon-telegram img,
  .social-icon-tiktok img,	
  .social-icon-whatsapp img{width:20px;height:20px}
}

/* =========================
   CALLBACK BUTTON + MODAL
   ========================= */
.callback-btn{
  position:fixed;bottom:20px;left:20px;background:var(--primary);color:#fff;padding:15px;
  border:2px solid #fff;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:1000;box-shadow:0 2px 5px var(--shadow-medium);transition:transform .3s,background .3s,box-shadow .3s
}
.callback-btn:hover{transform:scale(1.1)}
.callback-btn img{width:24px;height:24px}

.modal[hidden] { display: none !important; }

.modal{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:var(--overlay);z-index:2000;
  align-items:center;justify-content:center
}
.modal.active{display:flex}
.modal-content{
  background:#fff;padding:20px;border-radius:10px;width:100%;max-width:400px;position:relative;box-shadow:0 4px 10px var(--shadow-medium)
}
.modal-close{
  position:absolute;top:10px;right:15px;font-size:32px;color:var(--text-dark);cursor:pointer;transition:color .3s;background:none;border:0
}
.modal-close:hover{color:var(--link)}
.modal-content h3{
  font-size:20px;font-weight:700;color:var(--text-dark);margin-bottom:20px;margin-top: 30px; text-align:center
}
.modal-content form{display:flex;flex-direction:column;gap:15px}
.modal-content input{
  padding:12px;font-size:16px;font-family:'Montserrat',sans-serif;border:2px solid #6D3B07;border-radius:8px;outline:none;transition:border-color .3s
}
.modal-content input:focus{border-color:var(--link)}
.modal-content button{
  padding:12px 17px;background:var(--primary);color:#fff;font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;
  border:none;border-radius:50px;cursor:pointer;transition:transform .3s;
}
.modal-content button:hover{transform:scale(1.05)}
@media (max-width:768px){
  .callback-btn{width:50px;height:50px;padding:10px}
  .callback-btn img{width:24px;height:24px}
  .modal-content{max-width:90%;padding:15px}
  .modal-content h3{font-size:18px}
  .modal-content input{font-size:14px;padding:10px}
  .modal-content button{font-size:16px;padding:10px 20px}
}
@media (max-width:480px){
  .callback-btn{width:55px;height:55px;padding:8px}
  .callback-btn img{width:20px;height:20px}
  .modal-content h3{font-size:16px}
}

/*Модальне вікно Darmowa wycena*/
/* ===== Modal Overlay ===== */
.modal-sufit {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
  animation: fadeIn 0.3s;
}

/* ===== Modal Content ===== */
.modal-content-sufit {
  background: #fff;
  margin: 7% auto;
  padding: 20px 25px;
  border-radius: 10px;
  max-width: 380px;   /* стало вужче */
  width: 90%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  animation: slideDown 0.4s;
  font-family:"Montserrat",sans-serif;
  position: relative;
}

/* Заголовок */
.modal-content-sufit h2 {
  margin: 0 0 15px;
  text-align: center;
  font-size: 1.3rem;
  color: #292F33;
}

/* Кнопка закриття (X) */
.close-sufit {
  position: absolute;
  right: 15px;
  top: 12px;
  font-size: 2.3rem;
  color: #666;
  cursor: pointer;
  transition: 0.3s;
}
.close-sufit:hover {
  color: #000;
}

/* ===== Form Elements ===== */
#quoteFormSufit label {
  display: block;
  margin: 8px 0 4px;
  font-weight: 600;
  font-size: 0.85rem;
}

#quoteFormSufit input,
#quoteFormSufit select,
#quoteFormSufit textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: border-color 0.3s;
}
#quoteFormSufit input:focus,
#quoteFormSufit select:focus,
#quoteFormSufit textarea:focus {
  border-color: #E50914;
  outline: none;
}

/* Текстова область */
#quoteFormSufit textarea {
  min-height: 60px;
  resize: vertical;
}

/* Кнопка відправки */
.submit-btn-sufit {
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  background: #A0522D;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
	font-family:"Montserrat",sans-serif;
}
.submit-btn-sufit:hover {
  background: #8B4513;
}

/* ===== Animations ===== */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes slideDown {
  from {transform: translateY(-30px); opacity: 0;}
  to {transform: translateY(0); opacity: 1;}
}

/*Модальне вікно Запрос спеціаліста на виміри*/
/* ====== Запуск/кнопка ====== */
.btn-open-measure {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background: #A0522D;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform .08s ease, background .2s ease;
}
.btn-open-measure:hover { background: #8B4513; }
.btn-open-measure:active { transform: translateY(1px); }

/* ====== Базова модалка (компакт) ====== */
.modal-sufit { 
  display: none; 
  position: fixed; inset: 0; 
  background: rgba(0,0,0,.55);
  z-index: 2000; 
  overflow: auto;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-sufit.open { display: block; }

.modal-content-sufit {
  position: relative;
  box-sizing: border-box;
  background: #fff;
  margin: clamp(40px, 8vh, 72px) auto;
  width: min(92vw, 420px);      /* компактніше */
  padding: 18px 20px;           /* менші відступи */
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  animation: sufitDrop .25s ease-out;
}

.modal-content-sufit h2 {
  margin: 0 0 12px;
  text-align: center;
  font-size: 1.22rem;
  line-height: 1.25;
  color: #262b30;
}

/* Хрестик */
.close-sufit {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px; line-height: 32px;
  text-align: center;
  font-size: 20px; color: #666;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.close-sufit:hover { background: #f1f1f1; color: #111; }

/* ====== Поля форми ====== */
#measureInviteForm label,
#quoteFormSufit label {
  display: block;
  margin: 8px 0 4px;
  font-size: .86rem;
  font-weight: 600;
  color: #343b42;
}

#measureInviteForm input,
#measureInviteForm select,
#measureInviteForm textarea,
#quoteFormSufit input,
#quoteFormSufit select,
#quoteFormSufit textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid #d5d9de;
  border-radius: 8px;
  font-size: .95rem;
  line-height: 1.35;
  transition: border-color .2s ease, box-shadow .2s ease;
  background: #fff;
}

#measureInviteForm textarea,
#quoteFormSufit textarea { min-height: 72px; resize: vertical; }

#measureInviteForm input:focus,
#measureInviteForm select:focus,
#measureInviteForm textarea:focus,
#quoteFormSufit input:focus,
#quoteFormSufit select:focus,
#quoteFormSufit textarea:focus {
  outline: none;
  border-color: #A0522D;
  box-shadow: 0 0 0 3px rgba(160,82,45,.15);
}

/* Підказки під полями (якщо є) */
.input-hint { 
  display: block; 
  margin: 4px 0 0; 
  font-size: .8rem; 
  color: #6a7179; 
}

/* Кнопка відправки (уніфіковано) */
.submit-btn-sufit {
  display: inline-block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border: 0; border-radius: 8px;
  background: #A0522D;
  color: #fff; font-weight: 700; font-size: 1rem;
  cursor: pointer;
  transition: background .2s ease, transform .08s ease;
}
.submit-btn-sufit:hover { background: #8B4513; }
.submit-btn-sufit:active { transform: translateY(1px); }
.submit-btn-sufit:disabled { opacity: .6; cursor: not-allowed; }

/* Маленькі екрани */
@media (max-width: 380px) {
  .modal-content-sufit { width: 94vw; padding: 16px 16px; }
  .modal-content-sufit h2 { font-size: 1.1rem; }
}

/* Анімації / доступність */
@keyframes sufitDrop {
  from { transform: translateY(-18px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-content-sufit { animation: none; }
  .btn-open-measure, .submit-btn-sufit { transition: none; }
}


/* =========================
   SCROLL TO TOP
   ========================= */
.scroll-top{
  display:none; /* приховано за замовчуванням — JS керує показом */
  position:fixed;bottom:20px;right:20px;background:var(--primary);color:#fff;padding:15px;
  border:2px solid #fff;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:1000;box-shadow:0 2px 5px var(--shadow-medium);transition:transform .3s
}
.scroll-top.visible{display:flex}
.scroll-top:hover{transform:scale(1.1)}
.scroll-top img{width:24px;height:24px}
@media (max-width:768px){
  .scroll-top{width:50px;height:50px;padding:10px}
  .scroll-top img{width:24px;height:24px}
}
@media (max-width:480px){
  .scroll-top{width:55px;height:55px;padding:8px}
  .scroll-top img{width:20px;height:20px}
}

/* =========================
   PRICING PAGE
   ========================= */
.pricing{
  padding:50px 0;margin-top:70px;background:var(--background-light)
}
.pricing-content{max-width:90%;margin:0 auto;padding:0 20px}
.pricing-content{font-size: 28px;text-align: center}
.pricing-content h1{font-size: 32px;}
.pricing-content h2{
  font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:var(--primary);text-align:center;margin-bottom:30px;
  animation:fadeIn 1.2s ease-in
}
.pricing-seo-text{
  max-width:90%;margin:0 auto 30px;padding:20px;color:var(--text-dark);line-height:1.6;animation:fadeIn 1.2s ease-in
}
.pricing-seo-text p{font-size:20px;margin:0}
.pricing-seo-text strong{color:var(--primary);font-weight:700}

/* table (desktop) */
.pricing-table-container{margin-bottom:30px;width:100%}
.pricing-table{
  width:100%;border-collapse:collapse;background:#fff;box-shadow:0 2px 5px var(--shadow-light);border-radius:8px;
  font-family:'Montserrat',sans-serif;display:table;overflow:hidden
}
.pricing-table th,.pricing-table td{
  padding:15px;text-align:left;font-size:16px;color:var(--text-dark);border-bottom:1px solid #ddd
}
.pricing-table th{background:var(--primary);color:#fff;font-weight:700;font-size:18px}
.pricing-table tbody tr:hover{background:var(--secondary);cursor:pointer}
.pricing-table .price{color:#6D3B07;font-weight:700;font-size:16px}

/* cards (mobile) */
.pricing-cards{display:none;flex-direction:column;gap:20px;margin-bottom:30px}
.pricing-cards .price-card .price{color:#6D3B07;font-weight:700;font-size:16px;margin-bottom:10px}
.pricing-cards .price-card .notes{font-size:14px;color:var(--text-dark);font-style:italic}

@media (min-width:769px){
  .pricing-cards{display:none}
  .pricing-table-container{display:block}
}
@media (max-width:768px){
  .pricing-table-container{display:none}
  .pricing-cards{display:flex}
  .pricing-content h2{font-size:28px;margin-bottom:20px}
  .pricing-seo-text{padding:15px}
  .pricing-seo-text p{font-size:16px}
  .price-card h3{font-size:16px}
  .price-card p{font-size:13px}
  .pricing-cards .price-card .price{font-size:14px}
  .pricing-cards .price-card .notes{font-size:13px}
}
@media (max-width:480px){
  .pricing-content h2{font-size:32px;margin-bottom:15px}
  .pricing-seo-text{padding:10px}
  .pricing-seo-text p{font-size:16px}
  .price-card{padding:10px}
  .price-card h3{font-size:18px}
  .price-card p{font-size:14px}
  .pricing-cards .price-card .price{font-size:20px;color:#6D3B07}
  .pricing-cards .price-card .notes{font-size:15px}
}

/* Discount block (pricing) */
.discount-block{border:3px dashed #6D3B07;border-radius: 10px;background:#fff;padding:20px;text-align:center;max-width:50%;margin:20px auto}
.discount-header{background:#6D3B07;color:#fff;padding:10px;margin:-15px -15px 15px -15px;font-size:20px;font-weight:700}
.discount-text{color:#000;line-height:1.5;font-size:18px}
@media (max-width:768px){
  .discount-block{max-width:90%;padding:10px}
  .discount-header{font-size:16px;padding:8px;margin:-10px -10px 10px -10px}
  .discount-text{font-size:14px}
}

/* =========================
   REALIZATIONS PAGE (gallery)
   ========================= */
.realizations-gallery{
  padding:50px 0;margin-top:50px;background:var(--background-light)
}
.realizations-gallery .realizations-content{max-width:90%;margin:0 auto;padding:0 20px}
.realizations-content h1{font-size: 28px;text-align: center}
.realizations-gallery .realizations-content h2{
  font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:var(--primary);
  text-align:center;margin-bottom:30px;animation:fadeIn 1.2s ease-in
}
.realizations-seo-text{
  max-width:90%;margin:0 auto 30px;padding:20px;color:var(--text-dark);line-height:1.6;animation:fadeIn 1.2s ease-in
}
.realizations-seo-text p{font-size:20px;margin:0}
.realizations-seo-text strong{color:var(--primary);font-weight:700}

.filter-buttons{display:flex;justify-content:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.filter-button{
  padding:10px 20px;background:#fff;border:2px solid var(--primary);border-radius:5px;
  font-family:'Montserrat',sans-serif;font-size:18px;font-weight:600;color:var(--primary);cursor:pointer;
  transition:background .3s,color .3s
}
.filter-button:hover,.filter-button.active{background:var(--primary);color:#fff}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}
.gallery-card{
  background:#fff;border-radius:8px;box-shadow:0 2px 5px var(--shadow-light);overflow:hidden;transition:transform .3s,box-shadow .3s
}
.gallery-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px var(--shadow-medium)}
.gallery-card img{width:100%;height:200px;object-fit:cover}
.gallery-card h3{font-family:'Montserrat',sans-serif;font-size:18px;font-weight:700;color:var(--text-dark);margin:15px}
.gallery-card p{font-family:'Montserrat',sans-serif;font-size:14px;color:var(--text-dark);line-height:1.6;margin:0 15px 15px}
.gallery-card .gallery-tags{font-family:'Montserrat',sans-serif;font-size:12px;color:#6D3B07;margin:0 15px 15px;font-style:italic}
.gallery-link{display:block;width:fit-content;margin:0 auto;padding:12px 24px;background:var(--primary);color:#fff;text-decoration:none;
  border-radius:15px;font-family:'Montserrat',sans-serif;font-weight:600;transition:transform .3s,background .3s;font-size: 20px;}
.gallery-link:hover{background:var(--primary);transform:scale(1.15);color: #fffcontact-form}
@media (max-width:768px){
  .realizations-gallery .realizations-content h2{font-size:28px;margin-bottom:20px}
  .realizations-seo-text{padding:15px}
  .realizations-seo-text p{font-size:16px}
  .filter-buttons{gap:8px}
  .filter-button{padding:8px 16px;font-size:13px}
  .gallery-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .gallery-card h3{font-size:16px}
  .gallery-card p{font-size:13px}
  .gallery-card .gallery-tags{font-size:11px}
}
@media (max-width:480px){
  .realizations-gallery .realizations-content h2{font-size:24px;margin-bottom:15px}
  .realizations-seo-text{padding:10px}
  .realizations-seo-text p{font-size:14px}
  .filter-buttons{gap:6px}
  .filter-button{padding:6px 12px;font-size:16px}
  .gallery-grid{grid-template-columns:1fr}
  .gallery-card img{height:150px}
  .gallery-card h3{font-size:20px}
  .gallery-card p{font-size:16px}
  .gallery-card .gallery-tags{font-size:14px;text-align: right;}
}

/* =========================
   CONTACT PAGE (extended)
   ========================= */
.connect{
  padding:50px 0;margin-top:50px;background:linear-gradient(to bottom,var(--background-light),var(--background-white))
}
.connect-content{max-width:90%;margin:0 auto;padding:0 20px}
.connect-content h1{font-size: 32px;text-align: center}
.connect-content h2{
  font-family:'Montserrat',sans-serif;font-size:36px;font-weight:700;color:var(--primary);
  text-align:center;margin-bottom:30px;animation:fadeIn 1.2s ease-in
}
.connect-seo-text{
  max-width:90%;margin:0 auto 30px;padding:20px;color:var(--text-dark);line-height:1.6;animation:fadeIn 1.2s ease-in
}
.connect-seo-text p{font-size:20px;margin:0}
.connect-seo-text strong{color:var(--primary);font-weight:700}

.connect-grid{
  font-family:"Montserrat",sans-serif;display:flex;gap:48px;padding:40px 20px;max-width:100%;margin:0 auto;color:#000;flex-wrap:wrap
}
.connect-info,.connect-form{flex:1 1 440px;padding:32px 28px}
.connect-info h3,.connect-form h3{font-weight:700;font-size:28px;margin-bottom:24px;color:#6D3B07;letter-spacing:.02em}
.connect-info ul{list-style:none;padding:0;margin:0 0 32px 0}
.connect-info ul li{
  display:flex;align-items:flex-start;gap:16px;margin-bottom:18px;font-size:16px;line-height:1.5;color:#000
}
.connect-info ul li i{color:#6D3B07;font-size:22px;margin-top:4px;min-width:28px;text-align:center;flex-shrink:0}
.work-hours{display:flex;align-items:flex-start;gap:8px;font-size:16px;line-height:1.4}
.work-hours i{color:#6D3B07;font-size:18px;margin-top:3px}
.work-hours-details{display:flex;flex-direction:column;margin-left:4px;color:#666;font-weight:500}
.work-days{font-weight:600;color:#000;margin-bottom:4px}
.work-time,.work-contact{margin-left:4px;color:#000}

.connect-social{display:flex;flex-wrap:wrap;gap:20px}
.connect-social h4{width:100%;font-weight:600;font-size:20px;margin-bottom:14px;color:#000;letter-spacing:.01em}
.connect-social a{
  display:flex;align-items:center;gap:12px;color:#000;background-color: #FFF1E7; font-weight:600;text-decoration:none;padding:8px 14px;border-radius:8px;
  box-shadow:inset 0 0 0 0 #6D3B07;transition:all .3s ease;font-size:16px
}
.connect-social a i{font-size:22px;color:#6D3B07}
.connect-social a:hover{background:#6D3B07;color:#fff;box-shadow:inset 300px 0 0 0 #6D3B07}

.connect-form form{display:flex;flex-direction:column;gap:20px}
.connect-form label{font-weight:600;font-size:14px;color:#000;margin-bottom:6px;letter-spacing:.01em}
.connect-form input,.connect-form textarea{
  font-family:"Montserrat",sans-serif;padding:14px 16px;font-size:16px;font-weight:400;border:2px solid #6D3B07;border-radius:12px;
  background:#fafafa;color:#000;transition:border-color .3s ease,background-color .3s ease;resize:vertical;min-height:44px
}
.connect-form textarea{min-height:100px}
.connect-form input:focus,.connect-form textarea:focus{border-color:#6D3B07;background:#fff;outline:none;box-shadow:0 0 10px rgba(229,9,20,.3)}
.connect-button{
  font-family:"Montserrat",sans-serif;background:#6D3B07;color:#fff;font-weight:700;font-size:18px;border:none;padding:14px 0;border-radius:16px;
  cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;letter-spacing:.03em
}
.connect-button:hover{background:#6D3B07;box-shadow:0 8px 24px rgba(128,128,128,.6)}
.connect-map{margin-bottom:30px}
.connect-map iframe{width:100%;border-radius:12px;box-shadow:0 4px 10px var(--shadow-light)}
.connect-reviews{background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 10px var(--shadow-light)}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.review-card{padding:15px;border-left:3px solid var(--primary);font-size:14px;color:var(--text-dark);line-height:1.6}
.review-card p{margin:0 0 10px;font-style:italic}
.review-card span{font-weight:600;color:#6D3B07}

@media (max-width:768px){
  .connect-grid{flex-direction:column;gap:30px;padding:30px 15px}
  .connect-info,.connect-form{flex:1 1 100%;padding:28px 20px}
  .connect-info h3,.connect-form h3{font-size:24px}
  .connect-social a{font-size:15px;padding:8px 12px}
  .connect-content h2{font-size:28px;margin-bottom:20px}
  .connect-seo-text{padding:15px}
  .connect-seo-text p{font-size:16px}
  .connect-map iframe{height:300px}
}
@media (max-width:480px){
  .work-hours{font-size:14px;gap:6px}
  .work-hours i{font-size:16px}
  .connect-content h2{font-size:24px;margin-bottom:15px}
  .connect-seo-text{padding:10px}
  .connect-seo-text p{font-size:14px}
  .connect-map iframe{height:250px}
  .review-card{font-size:13px}
}

/* Success overlay */
.form-overlay {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
  z-index: 1000;
}
.form-overlay[aria-hidden="false"] { display: flex; }

.form-overlay__dialog {
  background: #fff; color: #221F1F;
  max-width: 420px; width: calc(100% - 32px);
  padding: 24px 20px; border-radius: 16px;
  text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.form-overlay__icon {
  width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 50%; display: grid; place-items: center;
  font-size: 28px; font-weight: 700;
  background: #28a745; color: #fff;
}
.form-overlay__btn {
  margin-top: 12px; padding: 10px 16px; border: 0; border-radius: 10px;
  background: #221F1F; color: #fff; cursor: pointer;
}
.form-overlay__btn:focus { outline: 2px solid #888; outline-offset: 2px; }