/* Header */
:root{
  --bg:#fafafa;
  --text:#1f1f1f;
  --muted:#6b6b6b;
  --primary:#e5dfd4;       /* бежевий */
  --primary-600:#d9d1c4;   /* hover */
  --ring:rgba(217,209,196,.5);
  --glass:rgba(255,255,255,.72);
}


body {
  margin: 0;
  background: var(--bg);
  font-family: 'Inter', sans-serif;
  color: var(--text);
}

.container {
  width: min(1200px, 100% - 2rem);
  margin-inline: auto;
}

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.site-header.scrolled {
  background: rgba(30, 30, 30, 0.6); /* темніший напівпрозорий */
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: rgba(255,255,255,0.08); /* світліший бордер */
  box-shadow: 0 8px 30px -20px rgba(0,0,0,0.45);
}


.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}

.logo img { width: 36px; height: 36px; border-radius: 8px; }

.nav-links {
  display: flex;
  align-items: center; /* Вирівнюємо всі пункти */
  gap: 22px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  line-height: 1.4;
  padding: .4rem .1rem; /* трохи більше падінгів */
  text-decoration: none;
  font-weight: 600;
  color: #fff;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  padding: .45rem 1rem;
  background: var(--primary);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 4px 16px -8px var(--ring);
  transition: background 0.2s ease;
}
.btn-cta:hover {
  background: var(--primary-600);
}


/* Burger */
.burger {
  display: none;
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  position: relative;
  cursor: pointer;
}

.burger-line {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s, opacity .2s, top .3s;
}

.burger-line:nth-child(1) { top: 12px; }
.burger-line:nth-child(2) { top: 18px; }
.burger-line:nth-child(3) { top: 24px; }

.burger.active .burger-line:nth-child(1) { top: 18px; transform: rotate(45deg); }
.burger.active .burger-line:nth-child(2) { opacity: 0; }
.burger.active .burger-line:nth-child(3) { top: 18px; transform: rotate(-45deg); }

@media (max-width: 992px) {
  .nav-links { display: none; }
  .burger { display: block; }
}

/* Drawer */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}

.backdrop.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(360px, 80%);
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform .3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.drawer.open { transform: translateX(0); }

.drawer-nav {
    background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 24px 16px;
}

.drawer-link {
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 1.1rem;
  padding: 14px 0;
  border-radius: 8px;
  transition: background .25s ease, transform .2s ease;
}

.drawer-cta {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 0;
  text-align: center;
  background: var(--primary) !important;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  box-shadow: 0 6px 20px -10px var(--ring);
  transition: background .2s ease, transform .2s ease;
}
.drawer-cta:hover {
  background: var(--primary-600);
  transform: translateY(-1px);
}

/* Drawer-meta — трохи світліше і менший відступ */
.drawer-meta {
  padding: 0 24px 24px;
  color: #888;
  font-size: .85rem;
  text-align: center;
}

html.nav-open, body.nav-open { overflow: hidden; }

/* drawer header + close button */
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid rgba(0,0,0,.06);
}
.drawer-head .brand{font-weight:700}
.drawer-close{
  border:0; background:transparent; cursor:pointer; line-height:0;
  color:#333; padding:8px; border-radius:8px;
  transition:background .2s ease, transform .2s ease;
}
.drawer-close:hover{background:#f2f2f2; transform:rotate(0.5deg)}

/* нейтральна кнопка в шторці (бежевий) */
.drawer-cta{
  background: var(--primary) !important;
  color: var(--text);
}
.drawer-cta:hover{ background: var(--primary-600) }

/* ---- Underline hover for top menu ---- */
.nav-link{
  background-image: linear-gradient(var(--primary-600), var(--primary-600));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;             /* початок: 0% ширини */
  transition: background-size .35s cubic-bezier(.22,1,.36,1), color .2s ease;
}
.nav-link:hover{
  background-size: 100% 2px;           /* при hover: повна ширина */
}

/* те саме в мобільному меню */
.drawer-link{
  background-image: linear-gradient(#e6e6e6, #e6e6e6);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition: background-size .3s ease, color .2s ease;
}
.drawer-link:hover{ background-size:100% 2px; }


/* ===== Hero Section ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* повний екран */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* легке затемнення */
}

.hero-content {
  position: relative;
  text-align: center;
  color: white;
  padding: 0 1rem;
  max-width: 700px;
}

.hero-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: clamp(1rem, 2vw, 1.3rem);
  margin-bottom: 1.8rem;
  color: #f1f1f1;
}

.hero-btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background: var(--primary);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 6px 20px -8px var(--ring);
  transition: background 0.3s ease, transform 0.2s ease;
}
.hero-btn:hover {
  background: var(--primary-600);
  transform: translateY(-2px);
}


/* Abot section */
/* ===== About Split Section ===== */
.about-split{
  display:grid;
  grid-template-columns: 1.1fr 1fr;     /* фото трохи ширше */
  min-height: 30vh;
  gap: 0;
  background:#fff;
}

.about-media{position:relative; overflow:hidden}
.about-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.about-content{
  padding: clamp(24px, 5vw, 64px);
  display:flex; flex-direction:column; justify-content:center;
  max-width: 740px;
}

.about-title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height:1.2; margin:0 0 .8rem 0; color:#111;
}

.about-lead{
  color:#3a3a3a; margin:0 0 1.2rem 0; font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.about-points p{
  margin:.75rem 0;
  color:#1f1f1f;
}
.about-points p strong{font-weight:700}

/* адаптив */
@media (max-width: 992px){
  .about-split{ grid-template-columns: 1fr; }
  .about-media{ order:-1; height: 48vh; }
  .about-media img{ height:100% }
  .about-content{ padding: 28px 20px 36px }
}


/* дзеркальна версія блоку: текст ліворуч, фото праворуч */
.about-split.reverse{
  grid-template-columns: 1fr 1.1fr; /* фото трохи ширше справа */
}
.about-split.reverse .about-content{ order:1 }
.about-split.reverse .about-media{ order:2 }

/* трохи більше “повітря” зліва */
.about-split.reverse .about-content{
  padding: clamp(24px, 5vw, 72px);
}

/* адаптив: у мобайл картинка зверху/знизу за бажанням */
@media (max-width: 992px){
  .about-split.reverse{ grid-template-columns: 1fr }
  .about-split.reverse .about-media{ order:-1; height:48vh }
  .about-split.reverse .about-media img{ height:100%; object-fit:cover }
}

/* ===== Catalog ===== */
.section{ padding: 64px 0; }
.catalog-head{ text-align:center; margin-bottom: 28px; }
.catalog-title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 .5rem 0;
  color:#111;
}
.catalog-sub{
  max-width: 760px; margin: 0 auto; color:#3a3a3a;
}

.catalog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 992px){
  .catalog-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .catalog-grid{ grid-template-columns: 1fr; }
}

.card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.25);
  transform: translateY(12px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s;
}
.card.in-view{
  transform: translateY(0); opacity: 1;
}

.card-media{
  display:block; position:relative; overflow:hidden;
  aspect-ratio: 4/3; /* стабільна висота */
  background:#f3f3f3;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.card:hover .card-media img{ transform: scale(1.06); }

.card-body{ padding: 16px 16px 18px; }
.card-title{
  margin: 0 0 .35rem 0;
  font-size: 1.05rem; font-weight: 700; color:#111;
}
.card-desc{ margin: 0; color:#444; }

/* м’який hover підйом */
.card:hover{ box-shadow: 0 16px 40px -22px rgba(0,0,0,.28); }

/* stagger-початок для плавної появи (не обов'язково) */
.catalog-grid .card:nth-child(3n+1){ transition-delay: .05s; }
.catalog-grid .card:nth-child(3n+2){ transition-delay: .1s; }
.catalog-grid .card:nth-child(3n+3){ transition-delay: .15s; }

/* ===== Team Section ===== */
.team-head {
  text-align: center;
  margin-bottom: 40px;
}

.team-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 0.5rem;
  color: #111;
}

.team-sub {
  max-width: 700px;
  margin: 0 auto;
  color: #444;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.member {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 10px 30px -20px rgba(0,0,0,0.2);
  transition: transform .3s ease, box-shadow .3s ease;
}
.member:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -24px rgba(0,0,0,0.25);
}

.member-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 20px -10px rgba(0,0,0,0.3);
}
.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-name {
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0;
}

.member-role {
  font-weight: 600;
  color: var(--muted);
  margin: 2px 0 10px;
}

.member-desc {
  font-size: 0.95rem;
  color: #333;
}

/* Адаптив */
@media (max-width: 992px) {
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== FAQ ===== */
.faq-head {
  text-align: center;
  margin-bottom: 32px;
}
.faq-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.3rem);
  margin: 0 0 0.4rem;
}
.faq-sub {
  max-width: 640px;
  margin: 0 auto;
  color: #444;
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px -12px rgba(0,0,0,0.15);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.faq-item.open { box-shadow: 0 12px 30px -10px rgba(0,0,0,0.2); }

.faq-question {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  font-weight: 600;
  font-size: 1rem;
  padding: 16px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}
.faq-icon {
  font-size: 1.3rem;
  transition: transform .25s ease;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height .3s ease, padding .3s ease;
}
.faq-item.open .faq-answer {
  max-height: 300px;
  padding: 0 20px 16px;
}

.faq-answer p {
  margin: 0;
  color: #444;
  line-height: 1.5;
}


/* ===== Contact ===== */
.contact-wrap{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 32px;
}
@media (max-width: 992px){
  .contact-wrap{ grid-template-columns: 1fr; }
}

.contact-head{ margin-bottom: 14px; }
.contact-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  margin: 0 0 .4rem; color:#111;
}
.contact-sub{ color:#444; margin:0 0 10px }

.contact-list{
  list-style:none; margin: 0 0 16px; padding:0; display:grid; gap:12px;
}
.contact-label{ display:block; font-weight:700; color:#111; }
.contact-value{ margin:.15rem 0 0; color:#333 }
.contact-value a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.12) }
.contact-value a:hover{ border-color: rgba(0,0,0,.35) }

.contact-map{
  margin-top: 12px; border-radius:16px; overflow:hidden;
  box-shadow: 0 10px 30px -22px rgba(0,0,0,.25);
  aspect-ratio: 16/9; background:#f2f2f2;
}
.contact-map iframe{
  width:100%; height:100%; border:0; display:block;
}

/* Форма */
.contact-form-card{
  background:#fff; border-radius:16px; padding:24px;
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.18);
}
.contact-note{ margin: 10px 0 0; color:#666; text-align:center }

.contact-form{ display:flex; flex-direction:column; gap:14px }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:14px }
@media (max-width: 600px){ .form-row{ grid-template-columns:1fr } }

.form-field{ display:flex; flex-direction:column; gap:6px }
.form-field label{ font-weight:600; color:#1f1f1f }
.form-field input,
.form-field textarea{
  border:1px solid #e6e6e6; border-radius:12px; padding:12px 14px;
  background:#fbfbfb; color:#222; font:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-field textarea{ resize:vertical; min-height:120px }
.form-field input:focus,
.form-field textarea:focus{
  outline:0; border-color: var(--primary-600);
  box-shadow: 0 0 0 4px var(--ring);
  background:#fff;
}

/* Чекбокс */
.form-consent .checkbox{ display:flex; align-items:flex-start; gap:10px; font-size:.95rem; color:#333 }
.form-consent input[type="checkbox"]{ margin-top: .3rem }
.form-consent a{ color:inherit; border-bottom:1px solid rgba(0,0,0,.2); text-decoration:none }
.form-consent a:hover{ border-color: rgba(0,0,0,.45) }

/* Кнопка відправки (у твоїй палітрі) */
.form-submit{
  width:100%; margin-top: 6px;
}

/* Статус */
.form-status{ margin:.6rem 0 0; min-height:1.1em; font-size:.95rem }
.form-status.ok{ color:#0a7f49 }
.form-status.err{ color:#b00020 }


/* ===== Footer ===== */
.site-footer{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  margin-top: 56px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 28px;
  padding: 36px 0;
}
@media (max-width: 992px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .footer-grid{ grid-template-columns: 1fr; }
}

.footer-logo{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:#111; font-weight:800;
}
.footer-logo img{ border-radius:8px }
.footer-text{ color:#444; margin:.6rem 0 0; max-width: 46ch; }

.footer-title{
  margin:0 0 .6rem; color:#111; font-weight:700;
}

.footer-links ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem }
.footer-links a{
  color:#2a2a2a; text-decoration:none;
  background-image: linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition: background-size .25s ease, color .2s ease;
}
.footer-links a:hover{ background-size:100% 1px; color:#000 }

.footer-contacts .contact-list{
  list-style:none; margin:0; padding:0; display:grid; gap:.5rem; color:#333;
}
.footer-contacts .contact-list a{
  color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.12);
}
.footer-contacts .contact-list a:hover{ border-color: rgba(0,0,0,.35) }
.footer-contacts .contact-list span{ font-weight:700; color:#111 }

.footer-bottom{
  border-top:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg,#fff, #fafafa);
}
.footer-bottom-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding: 12px 0; color:#666; font-size:.95rem;
}
.footer-bottom-links{ display:flex; gap:16px; flex-wrap:wrap }
.footer-bottom-links a{
  color:inherit; text-decoration:none; border-bottom:1px solid transparent;
}
.footer-bottom-links a:hover{ border-color: rgba(0,0,0,.25) }
@media (max-width:600px){
  .footer-bottom-row{ flex-direction:column; align-items:flex-start }
}

/* ===== Cookie Banner ===== */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0 0 16px; /* невеликий відступ від низу */
  pointer-events: none; /* щоб клік проходив лише по внутрішньому блоку */
}
.cookie-inner{
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px) saturate(130%);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 50px -24px rgba(0,0,0,.35);
  border-radius: 16px;
  padding: 14px 16px;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s;
}
.cookie-banner.show .cookie-inner{
  transform: translateY(0);
  opacity: 1;
}

.cookie-text{
  margin: 0; color: #1f1f1f;
}
.cookie-text a{
  color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.25);
}
.cookie-text a:hover{ border-color: rgba(0,0,0,.5) }

.cookie-actions{ display: flex; gap: 10px; flex-shrink: 0 }

/* Кнопки */
.btn-outline{
  background: transparent; color: #1f1f1f; font-weight: 600;
  border: 1px solid rgba(0,0,0,.18); border-radius: 10px; padding: 10px 14px;
  cursor: pointer; transition: background .2s ease, border-color .2s ease;
}
.btn-outline:hover{ background: #f3f3f3; border-color: rgba(0,0,0,.3) }

/* Використовуємо твою .btn-cta як “Đồng ý” — вже в бежевій темі */

/* Адаптив */
@media (max-width: 768px){
  .cookie-inner{
    flex-direction: column; align-items: stretch; text-align: left;
    padding: 14px;
  }
  .cookie-actions{ width: 100% }
  .cookie-actions .btn-outline, .cookie-actions .btn-cta{ width: 100% }
}


/* ===== About: Image Hero ===== */
.about-hero{
  position: relative;
  width: 100%;
  min-height: clamp(60vh, 72vh, 80vh);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f5f5f5;
}

.about-hero-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02);
  filter: saturate(105%);
}

/* мʼякий градієнт + легке затемнення для білого тексту/беж акцентів */
.about-hero-overlay{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(229,223,212,0.35) 0%, rgba(229,223,212,0.18) 40%, rgba(0,0,0,0.28) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.0));
}

.about-hero-inner{
  position: relative;
  text-align: center;
  color: #fff;
  max-width: 900px;
  padding: 80px 1rem 64px;
}

/* маленький бейдж зверху */
.about-hero-badge{
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: .85rem;
  color: #1f1f1f;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.35);
}

.about-hero-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  margin: 6px 0 10px;
}

.about-hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: #f3f3f3;
  margin: 0 auto;
  max-width: 72ch;
}

/* нижні метрики */
.about-hero-meta{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.meta-item{
  background: rgba(255,255,255,.85);
  color: #1f1f1f;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px 10px;
  backdrop-filter: blur(6px);
}
.meta-item strong{ display:block; font-size:1.1rem }
.meta-item span{ color:#555; font-size:.9rem }

/* адаптив */
@media (max-width: 768px){
  .about-hero-inner{ padding: 72px 1rem 48px }
  .about-hero-meta{
    grid-template-columns: 1fr;
  }
}


/* ===== Best of the week (v2) ===== */
.bw-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.bw-title{font-family:"Playfair Display",serif; font-size:clamp(1.6rem,4vw,2.2rem); margin:0}
.bw-seeall{text-decoration:none; color:#2a2a2a; font-weight:600; border-bottom:1px solid transparent}
.bw-seeall:hover{border-color:rgba(0,0,0,.35)}

.bw-grid{
  display:grid; gap:20px;
  grid-template-columns: 1.6fr 1fr;
  grid-template-areas:
    "feature ad"
    "feature mini"
    "wide    wide";
}
@media (max-width: 992px){
  .bw-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "feature"
      "ad"
      "mini"
      "wide";
  }
}

.bw-feature{ grid-area: feature; background:#fff; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 14px 40px -24px rgba(0,0,0,.25) }
.bw-card{ background:#fff; border-radius:18px; overflow:hidden; position:relative; box-shadow:0 14px 40px -24px rgba(0,0,0,.25) }

.bw-media{ aspect-ratio:16/9; overflow:hidden }
.bw-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .6s cubic-bezier(.22,1,.36,1) }
.bw-feature:hover .bw-media img, .bw-card--img:hover .bw-media img{ transform:scale(1.06) }

.bw-chips{ position:absolute; left:16px; top:14px; display:flex; gap:8px; z-index:2 }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:.85rem; font-weight:700; border:1px solid rgba(0,0,0,.08) }
.chip-light{ background:rgba(255,255,255,.9) }
.chip-ghost{ background:rgba(255,255,255,.6) }
.chip-dark{ background:rgba(0,0,0,.75); color:#fff; border-color:rgba(255,255,255,.15) }
.chip-icon{ background:rgba(255,255,255,.85); cursor:pointer; border:none; box-shadow:0 4px 14px -10px rgba(0,0,0,.25) }

.bw-content{
  position:absolute; left:16px; right:16px; bottom:16px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(6px) saturate(120%);
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:14px 16px 56px 16px;
}
.bw-h3{ margin:0 0 6px; font-size:clamp(1.05rem,2.4vw,1.3rem); color:#111 }
.bw-p{ margin:0; color:#333 }

/* pill-button замість круглої */
.bw-btn{
  position:absolute; right:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:.6rem 1rem; border-radius:999px;
  background: var(--primary); color: var(--text); text-decoration:none; font-weight:700;
  box-shadow:0 10px 30px -18px var(--ring);
  transition: background .2s ease, transform .2s ease;
}
.bw-btn:hover{ background: var(--primary-600); transform: translateY(-1px) }
.bw-btn--ghost{
  position:static; margin-top:10px;
  background: rgba(0,0,0,.06); color:#111;
}
.bw-btn--ghost:hover{ background: rgba(0,0,0,.12) }

/* RIGHT TOP (text card) */
.bw-card--ad{ grid-area: ad }
.bw-card--ad .bw-card-inner{ padding:18px; display:grid; gap:10px; min-height: 220px }
.bw-card-badges{ display:flex; justify-content:space-between; align-items:center }
.bw-card-title{ margin:0; color:#111; font-size:1.05rem }
.bw-card-sub{ margin:0; color:#444 }
.bw-link{ display:inline-block; font-weight:700; color:#1f1f1f; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.2) }
.bw-link:hover{ border-color:rgba(0,0,0,.45) }

/* RIGHT BOTTOM (image card) */
.bw-card--img{ grid-area: mini }
.bw-card--img .bw-media.small{ aspect-ratio:16/9; border-bottom:1px solid rgba(0,0,0,.06) }
.bw-card--img .bw-card-inner{ padding:14px 16px }
.bw-card--img .num{ position:absolute; right:10px; top:10px }

/* BOTTOM WIDE */
.bw-wide{ grid-area: wide; display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 14px 40px -24px rgba(0,0,0,.25) }
.bw-wide-media{ aspect-ratio:auto; min-height:220px; }
.bw-wide-media img{ width:100%; height:100%; object-fit:cover }
.bw-wide-content{ display:flex; flex-direction:column; justify-content:center; padding:18px }
.bw-wide-content h3{ margin:.2rem 0 .4rem; color:#111; font-size:1.15rem }
.bw-wide-content p{ margin:0; color:#444 }

@media (max-width: 768px){
  .bw-wide{ grid-template-columns: 1fr }
}

/* ===== History / Timeline ===== */
.history-head{ text-align:center; margin-bottom: 28px; }
.history-title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin:0 0 .5rem; color:#111;
}
.history-sub{ max-width: 760px; margin:0 auto; color:#444 }

.timeline{
  list-style:none; margin: 0; padding: 0;
  display:grid; gap: 28px;
}

/* item */
.t-item{
  display:grid;
  grid-template-columns: 1.1fr 1fr; /* текст трохи ширший */
  gap: 22px;
  position:relative;
  align-items:center;
}
.t-item::before{
  content:""; position:absolute; left: calc(50% - 1px); top: -14px; bottom: -14px;
  width:2px; background: rgba(0,0,0,.08);
  border-radius:2px;
}
.t-item .t-meta{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:16px; box-shadow:0 10px 30px -22px rgba(0,0,0,.2) }
.t-year{
  display:inline-block; font-weight:800; color:#111; background:var(--primary);
  padding:4px 10px; border-radius:999px; margin-bottom:8px;
}
.t-h3{ margin:.1rem 0 .35rem; color:#111; font-size:1.1rem }
.t-p{ margin:0; color:#333 }

.t-media{ margin:0; border-radius:16px; overflow:hidden; box-shadow:0 16px 42px -28px rgba(0,0,0,.25) }
.t-media img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio: 16/10 }

/* чергування сторін */
.timeline .t-item:nth-child(odd){ grid-template-columns: 1fr 1.1fr; }
.timeline .t-item:nth-child(odd) .t-meta{ order:2 }
.timeline .t-item:nth-child(odd) .t-media{ order:1 }

/* плавна поява (використовує твій IO, який додає .in-view до .reveal) */
.timeline .reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1) }
.timeline .reveal.in-view{ opacity:1; transform:translateY(0) }

/* адаптив */
@media (max-width: 992px){
  .t-item{ grid-template-columns: 1fr; }
  .t-item::before{ left: 16px; }
  .timeline .t-item:nth-child(odd){ grid-template-columns: 1fr; }
}

/* ===== Works Hero ===== */
.works-hero{
  position: relative;
  width: 100%;
  min-height: clamp(56vh, 68vh, 76vh);
  overflow: hidden;
  background:#f5f5f5;
}
.works-hero-bg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.02);
  filter: saturate(105%);
}
.works-hero-shade{
  position: absolute; inset: 0;
  /* бічна тінь + нижнє затемнення для білого тексту */
  background:
    linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.10) 60%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 100%);
}
.works-hero-inner{
  position: relative;
  display: grid;
  gap: 12px;
  max-width: 920px;
  padding: 88px 0 56px;
  color: #fff;
}
.works-crumbs{
  font-size: .95rem; opacity: .95;
}
.works-crumbs a{ color:#fff; text-decoration:none; border-bottom:1px solid transparent }
.works-crumbs a:hover{ border-color: rgba(255,255,255,.6) }

.works-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.15;
  margin: 0;
}
.works-sub{
  max-width: 70ch;
  color: #f3f3f3;
  margin: 0 0 6px;
}

/* Чіпи-фільтри */
.works-chips{
  display: flex; flex-wrap: wrap; gap: 10px;
}
.chip{ /* якщо в тебе вже є .chip — цей блок нічого не зламає */
  display:inline-flex; align-items:center; gap:6px;
  padding: 8px 12px; border-radius: 999px;
  font-weight: 700; font-size: .95rem;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.15);
  color: #fff; text-decoration: none;
  backdrop-filter: blur(4px) saturate(120%);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.chip:hover{ background: rgba(255,255,255,.28); transform: translateY(-1px) }
.chip.active{ background: var(--primary); color: var(--text); border-color: rgba(0,0,0,.08) }

/* адаптив */
@media (max-width: 768px){
  .works-hero-inner{ padding: 72px 0 40px }
  .works-crumbs{ font-size: .9rem }
}

/* ===== Client Flow ===== */
.cf-head{ text-align:center; margin-bottom: 24px; }
.cf-title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin:0 0 .4rem; color:#111;
}
.cf-sub{ max-width:740px; margin:0 auto; color:#444 }

.flow-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 992px){ .flow-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .flow-grid{ grid-template-columns: 1fr; } }

.flow-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:16px;
  box-shadow:0 12px 32px -24px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.flow-card:hover{
  transform: translateY(-3px);
  box-shadow:0 18px 46px -26px rgba(0,0,0,.28);
  border-color: rgba(0,0,0,.12);
}

.flow-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.flow-step{
  font-weight:800; color:#111; background:var(--primary);
  border-radius:999px; padding:4px 10px; font-size:.9rem;
}
.flow-icon{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; color:#1f1f1f; background:#f6f4f1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.flow-title{ margin:.2rem 0 .25rem; font-weight:700; color:#111 }
.flow-text{ margin:0; color:#333 }

.cf-cta{
  margin-top:18px; display:flex; align-items:center; gap:12px; justify-content:center;
}
.cf-note{ color:#6b6b6b; font-size:.95rem }

/* плавна поява, якщо використовуєш клас .reveal */
.flow-card.reveal{ opacity:0; transform:translateY(10px); }
.flow-card.reveal.in-view{ opacity:1; transform:translateY(0); transition:opacity .5s ease, transform .5s ease; }

/* ===== Projects Switcher ===== */
.projects-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 26px;
}
@media (max-width: 992px){
  .projects-grid{ grid-template-columns: 1fr; }
}

.proj-list{ padding-right: 8px; }
.proj-badge{
  display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.06em;
  background: rgba(0,0,0,.06); color:#333; padding:4px 8px; border-radius:999px;
}
.proj-title{
  font-family:"Playfair Display", serif;
  margin:.4rem 0 1rem; color:#111; font-size:clamp(1.4rem,3vw,1.8rem);
}

/* items */
.proj-items{ list-style:none; margin:0; padding:0; border-top:1px solid rgba(0,0,0,.08) }
.proj-item{
  display:flex; align-items:center; gap:10px; position:relative;
  padding:14px 8px; border-bottom:1px solid rgba(0,0,0,.08);
  cursor:pointer; user-select:none;
  color:#7a7a7a; font-weight:700;
  transition: color .2s ease, background .2s ease;
}
.proj-item .num{ width:3ch; color:#9a9a9a; font-variant-numeric: tabular-nums; }
.proj-item .name{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proj-item .arr{ opacity:.4; transform: translateX(0); transition: opacity .2s ease, transform .2s ease; }
.proj-item:hover{ color:#2a2a2a; background:#f8f8f8; }
.proj-item:hover .arr{ opacity:.9; transform: translateX(2px); }

.proj-item.active{
  color:#111; background:#fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06), 0 8px 20px -18px rgba(0,0,0,.25);
}
.proj-item.active .arr{ opacity:1; transform: translateX(3px); }

/* view */
.proj-view{
  position:relative; min-height: 420px;
}
.proj-panel{
  position:absolute; inset:0; opacity:0; transform: translateX(12px);
  pointer-events:none; transition: opacity .35s ease, transform .35s ease;
  display:grid; gap:16px;
  grid-template-rows: 1fr 1fr;
  background:#3b3732; /* теплий темний фон як у референті */
  padding: 16px; border-radius:18px;
  box-shadow:0 18px 50px -28px rgba(0,0,0,.35);
}
.proj-panel.active{
  position:relative; opacity:1; transform:none; pointer-events:auto;
}
@media (max-width: 600px){
  .proj-panel{ grid-template-rows: auto; grid-auto-rows: minmax(180px, 1fr); }
}

/* shots */
.shot{
  margin:0; position:relative; overflow:hidden; border-radius:14px;
  background:#eee; border:1px solid rgba(255,255,255,.06);
}
.shot img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.02); transition: transform .6s cubic-bezier(.22,1,.36,1) }
.shot:hover img{ transform: scale(1.06) }
.badge{
  position:absolute; right:10px; top:10px;
  display:inline-block; padding:4px 8px; border-radius:999px;
  background: rgba(0,0,0,.7); color:#fff; font-weight:800; font-size:.85rem;
}

/* focus accessibility */
.proj-item:focus{ outline: 2px solid var(--primary-600); outline-offset: 2px; }

/* Info-only variant (no buttons/cards) */
.disc-wrap--solo{ grid-template-columns: 1fr; }
.site-disclaimer{ background:#fafafa; border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
.disc-badge{ display:inline-block; padding:5px 10px; border-radius:999px; background:var(--primary); color:#111; font-weight:800; font-size:.8rem; }
.disc-title{ font-family:"Playfair Display",serif; font-size:clamp(1.6rem,3.8vw,2.2rem); margin:.5rem 0 .6rem; color:#111; }
.disc-lead{ color:#333; margin:0 0 .6rem; max-width:72ch; }
.disc-list{ margin:0; padding-left:1.1rem; color:#333; display:grid; gap:.35rem; max-width:72ch; }
.disc-list li{ list-style:disc; }
.disc-note{ margin:.8rem 0 0; color:#6b6b6b; max-width:72ch; }

/* ===== Tips page ===== */
.tips-head{ text-align:center; margin-bottom: 18px; }
.tips-title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0 0 .4rem; color:#111;
}
.tips-sub{ max-width: 760px; margin: 0 auto 8px; color:#444 }
.tips-chips{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.chip-filter{
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1px solid rgba(0,0,0,.12); background:#fff; color:#1f1f1f; text-decoration:none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.chip-filter:hover{ background:#f6f6f6; transform: translateY(-1px) }
.chip-filter.active{ background:var(--primary); border-color:rgba(0,0,0,.08) }

.tips-grid{
  margin-top: 12px;
  display:grid; gap: 20px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 992px){ .tips-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .tips-grid{ grid-template-columns: 1fr; } }

.tip-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; overflow:hidden;
  box-shadow:0 12px 32px -24px rgba(0,0,0,.22);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.tip-card:hover{ transform: translateY(-3px); box-shadow:0 18px 46px -26px rgba(0,0,0,.28); border-color: rgba(0,0,0,.12); }

.tip-media{ display:block; aspect-ratio: 16/10; background:#f2f2f2; overflow:hidden }
.tip-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition: transform .6s cubic-bezier(.22,1,.36,1) }
.tip-card:hover .tip-media img{ transform:scale(1.06) }

.tip-body{ padding:14px 14px 16px }
.tip-meta{ display:flex; align-items:center; gap:8px; color:#666; font-size:.94rem; margin-bottom:6px }
.tip-meta .chip-light{ background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.06); }
.tip-meta .dot{ opacity:.6 }
.tip-title{ margin:0 0 4px; font-size:1.05rem; }
.tip-title a{ color:#111; text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .25s ease }
.tip-title a:hover{ background-size:100% 1px }
.tip-desc{ margin:0; color:#333 }

/* поява, використовує твій IO (.reveal -> .in-view) */
.tip-card.reveal{ opacity:0; transform: translateY(10px) }
.tip-card.reveal.in-view{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s ease }

/* ===== Info (image + text, no CTA) ===== */
.info-grid{
  display:grid; gap:22px;
  grid-template-columns: 1.15fr 1fr; /* фото трохи ширше */
  align-items:center;
}
@media (max-width: 992px){
  .info-grid{ grid-template-columns: 1fr; }
}

.info-media{
  margin:0; border-radius:16px; overflow:hidden;
  box-shadow: 0 16px 42px -28px rgba(0,0,0,.25);
  background:#f3f3f3;
}
.info-media img{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio: 16/10;
}

.info-content{ max-width: 720px; }
.info-badge{
  display:inline-block; padding:5px 10px; border-radius:999px;
  background: var(--primary); color:#111; font-weight:800; font-size:.8rem;
}
.info-title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.6rem, 3.8vw, 2.2rem);
  margin: .5rem 0 .5rem; color:#111;
}
.info-lead{ color:#333; margin:0 0 .6rem; }
.info-list{
  margin:0 0 .6rem; padding-left:1.1rem; color:#333; display:grid; gap:.35rem;
}
.info-list li{ list-style: disc; }
.info-note{ color:#6b6b6b; margin:0; }

/* ===== Terms / Legal ===== */
.legal-head{ text-align:center; margin-bottom: 18px; }
.legal-title{
  font-family:"Playfair Display", serif;
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  margin: 0 0 .3rem; color:#111;
}
.legal-meta{ color:#6b6b6b; margin:.1rem 0 .4rem; }
.legal-sub{ max-width: 760px; margin: 0 auto; color:#444; }

.legal-list{
  counter-reset: term;
  list-style: none;
  padding: 0; margin: 16px 0 0;
  display: grid; gap: 14px;
}
.legal-list > li{
  position: relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding: 16px 16px 16px 64px;
  box-shadow: 0 12px 32px -24px rgba(0,0,0,.22);
}
.legal-list > li::before{
  counter-increment: term;
  content: counter(term, decimal-leading-zero) ".";
  position: absolute; left: 16px; top: 16px;
  min-width: 36px; height: 36px; display:grid; place-items:center;
  border-radius: 10px;
  background: var(--primary);
  color:#111; font-weight:800; font-size:.95rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.legal-list h2{
  margin: 0 0 .25rem; font-size: 1.05rem; color:#111;
}
.legal-list p{
  margin: 0; color:#333; line-height: 1.55;
}

/* minh họa (không bắt buộc) */
.legal-illustration{
  margin: 16px 0 0; text-align:center;
  color:#6b6b6b;
}
.legal-illustration img{
  width:100%; max-width: 960px; height:auto;
  display:block; margin: 0 auto;
  border-radius: 16px; overflow:hidden;
  box-shadow: 0 16px 42px -28px rgba(0,0,0,.25);
}

/* адаптив */
@media (max-width: 560px){
  .legal-list > li{ padding: 14px 14px 14px 54px; }
  .legal-list > li::before{ min-width:32px; height:32px; font-size:.9rem }
}

/* Missing CSS for Tips / Solutions Tabs */

.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; margin-top: 20px;
}
.filter-btn {
  padding: 8px 18px; border: 1px solid rgba(0,0,0,.1); background: #fff; border-radius: 999px; cursor: pointer;
  transition: .2s ease; font-weight: 600; color: #333;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--primary); border-color: transparent; color: #111;
}

.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; padding-bottom: 40px;
}
.g-item { 
  border-radius: 14px; overflow: hidden; background: #fff; 
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.08); 
  border: 1px solid rgba(0,0,0,.04);
  transition: transform .3s ease, box-shadow .3s; 
}
.g-item:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -15px rgba(0,0,0,.15); }
.g-link { text-decoration: none; color: inherit; display: block; }
.g-media { aspect-ratio: 4/3; overflow: hidden; background: #eee; }
.g-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(0.2, 0, 0, 1); }
.g-item:hover .g-media img { transform: scale(1.05); }
.g-info { padding: 18px; }
.g-title { font-size: 1.15rem; margin: 0 0 6px; font-weight: 700; color: #111; }
.g-cat { font-size: .95rem; color: #666; margin: 0; }

.tips-grid {
  margin-top: 24px; margin-bottom: 40px;
}



/* Always dark header for internal pages */
.site-header.always-dark {
  background: rgba(30, 30, 30, 0.95) !important;
  backdrop-filter: saturate(140%) blur(10px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 30px -20px rgba(0,0,0,0.45) !important;
}