:root{
    --bg-0:#070b12;
    --bg-1:#0c1420;
    --bg-2:#101b2b;
    --card-line:#2b3648;
    --gold:#c9993f;
    --gold-light:#e9c477;
    --gold-dim:#8a6b2e;
    --text:#f2efe7;
    --text-muted:#9aa4b5;
    --radius:2px;
  }

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

  html{
    scroll-behavior:smooth;
    background:var(--bg-0);
  }

  body{
    background:var(--bg-0);
    color:var(--text);
    font-family:'Manrope',sans-serif;
    font-weight:400;
    line-height:1.6;
    overflow-x:hidden;
    overscroll-behavior-y:none;
  }

  h1,h2,h3,h4{
    font-family:'Montserrat',sans-serif;
    text-transform:uppercase;
    letter-spacing:.01em;
    font-weight:800;
  }

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

  .container{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- diamond signature element ---------- */
  .diamond{
    width:14px;height:14px;
    border:1.5px solid var(--gold);
    transform:rotate(45deg);
    display:inline-block;
  }
  .diamond.filled{background:var(--gold);}

  .divider{
    display:flex;
    align-items:center;
    gap:14px;
    margin:18px 0;
  }
  .divider::before,.divider::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--card-line),transparent);
  }

  /* ---------- header ---------- */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(7,11,18,0.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(201,153,63,0.18);
    transition:background .3s ease;
  }
  .nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:78px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .brand-diamond{
    width:26px;height:26px;
    border:2px solid var(--gold);
    transform:rotate(45deg);
    position:relative;
  }
  .brand-diamond::after{
    content:"";
    position:absolute;
    top:4px;left:4px;right:4px;bottom:4px;
    border:1px solid var(--gold-dim);
  }
  .brand-name{
    font-family:'Montserrat',sans-serif;
    font-weight:800;
    font-size:20px;
    letter-spacing:.04em;
    line-height:1;
  }
  .brand-name span{
    display:block;
    font-family:'Manrope',sans-serif;
    text-transform:none;
    letter-spacing:.15em;
    font-size:9px;
    color:var(--gold);
    margin-top:3px;
    font-weight:700;
  }
  nav ul{
    display:flex;
    list-style:none;
    gap:38px;
  }
  @media (max-width:900px){
    nav ul.nav-open{
      display:flex;
      position:absolute;
      top:78px;
      left:0;right:0;
      flex-direction:column;
      background:rgba(7,11,18,0.97);
      padding:20px 32px;
      gap:20px;
      border-bottom:1px solid rgba(201,153,63,.2);
    }
  }
  nav a{
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--text-muted);
    transition:color .25s ease;
    position:relative;
  }
  nav a:hover{color:var(--gold-light);}
  .nav-cta{
    border:1px solid var(--gold);
    padding:10px 22px;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--gold-light) !important;
    transition:all .25s ease;
  }
  .nav-cta:hover{background:var(--gold);color:var(--bg-0) !important;}
  .menu-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
  .menu-toggle span{width:24px;height:2px;background:var(--gold);display:block;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100vh; /* фолбэк, если JS отключён */
    min-height:100dvh; /* фолбэк для современных браузеров без JS */
    min-height:calc(var(--vh, 1vh) * 100); /* точная высота, посчитанная в JS — приоритетный вариант */
    display:flex;
    align-items:center;
    background:#000;
  }
  .hero-bg{
    position:absolute;inset:0;
    background:url('images/clean-hero.jpg') center 30%/cover no-repeat;
  }
  .hero-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(7,11,18,.55) 0%, rgba(7,11,18,.55) 45%, var(--bg-0) 96%),
      linear-gradient(90deg, rgba(7,11,18,.92) 0%, rgba(7,11,18,.35) 62%, rgba(7,11,18,.15) 100%);
  }
  .hero-content{
    position:relative;
    z-index:2;
    padding-top:78px;
    max-width:640px;
  }
  .eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--gold-light);
    font-size:12px;
    letter-spacing:.3em;
    text-transform:uppercase;
    margin-bottom:26px;
    opacity:0;
    animation:fadeUp .8s ease forwards .2s;
  }
  
.hero h1 {
    font-size: clamp(48px,7vw,84px);
    line-height:.98;
    color:var(--text);
  }
  .hero h1 em{
    font-style:normal;
    color:var(--gold);
  }

  /* Исходное состояние элементов (скрыты и смещены вниз) */
  .diamant-name {
    text-align: center;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  .hero-sub {
    margin-top:26px;
    font-family:'Playfair Display',serif;
    font-style:italic;
    font-weight:600;
    font-size:23px;
    color:var(--text-muted);
    max-width:460px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    text-align: center;
  }

  .slogan {
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s ease, transform 0.9s ease;
  }

  /* Финальное состояние при активации класса .visible через JS */
  .diamant-name.visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
  }

  .hero-sub.visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;  
  }

  .slogan.visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
  }

 


  .hero-actions{
    display:flex;
    gap:18px;
    margin-top:44px;
    opacity:0;
    animation:fadeUp .9s ease forwards .75s;
  }
  .btn-primary{
    text-align: center;
    background:var(--gold);
    color:var(--bg-0);
    padding:16px 34px;
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:700;
    transition:all .3s ease;
    display:inline-block;

    /* flex: 1; 
    text-align: center;  */
  }
  .btn-primary:hover{background:var(--gold-light);transform:translateY(-2px);}
  .btn-ghost{
    text-align: center;
    border:1px solid rgba(242,239,231,.3);
    color:var(--text);
    padding:16px 34px;
    font-size:13px;
    letter-spacing:.14em;
    text-transform:uppercase;
    transition:all .3s ease;

    /* flex: 1; 
    text-align: center; Центрируем текст внутри */
  }
  .btn-ghost:hover{border-color:var(--gold-light);color:var(--gold-light);}

  @keyframes fadeUp{
    from{opacity:0;transform:translateY(18px);}
    to{opacity:1;transform:translateY(0);}
  }

  .scroll-cue{
    position:absolute;
    bottom:38px;left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--text-muted);
    font-size:10px;
    letter-spacing:.25em;
    text-transform:uppercase;
  }
  .scroll-cue::after{
    content:"";
    width:1px;height:38px;
    background:linear-gradient(var(--gold),transparent);
    animation:scrollLine 1.8s ease-in-out infinite;
  }
  @keyframes scrollLine{
    0%{transform:scaleY(0);transform-origin:top;}
    50%{transform:scaleY(1);transform-origin:top;}
    51%{transform-origin:bottom;}
    100%{transform:scaleY(0);transform-origin:bottom;}
  }

  /* ---------- section heading ---------- */
  .section{padding:130px 0;}
  .section-tight{padding:100px 0;}
  .section-label{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--gold);
    font-size:12px;
    letter-spacing:.3em;
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .section-title{
    font-size:clamp(32px,4.2vw,52px);
    /* max-width:640px; */
    margin-bottom:20px;
  }
  .section-desc{
    color:var(--text-muted);
    max-width:520px;
    font-size:16px;
  }
  .section-head{margin-bottom:80px;}

  /* ---------- services ---------- */
  .services{background:var(--bg-1);}
  .service-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
    padding:56px 0;
    border-bottom:1px solid var(--card-line);
  }
  .service-row:last-child{border-bottom:none;padding-bottom:0;}
  .service-row:first-child{padding-top:0;}
  .service-row.reverse .service-media{order:2;}
  .service-row.reverse .service-copy{order:1;}

  .service-media{
    position:relative;
    aspect-ratio:4/2;
    overflow:hidden;
    border-radius:var(--radius);
  }
  .service-media img{
    width:100%;height:100%;
    object-fit:cover;
    filter:saturate(1.05) contrast(1.05);
    transition:transform .7s ease;
  }
  .service-row:hover .service-media img{transform:scale(1.05);}
  .service-media::after{
    content:"";
    position:absolute;inset:0;
    border:1px solid rgba(201,153,63,.35);
    outline:8px solid var(--bg-1);
    outline-offset:-8px;
    pointer-events:none;
  }

  .service-index{
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    font-size:13px;
    color:var(--gold);
    letter-spacing:.2em;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .service-copy h3{
    font-size:clamp(22px,2.6vw,30px);
    margin-bottom:14px;
    line-height:1.15;
  }
  .service-copy p{
    color:var(--text-muted);
    font-size:16px;
    max-width:400px;
  }

  /* ---------- portfolio ---------- */
  .portfolio{background:var(--bg-0);}

  .lightbox{
    position:fixed;inset:0;
    z-index:200;
    background:rgba(6,9,15,.92);
    backdrop-filter:blur(6px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:40px;
  }
  .lightbox.open{display:flex;}
  .lightbox img{
    max-width:min(90vw,900px);
    max-height:82vh;
    object-fit:contain;
    border:1px solid var(--gold-dim);
  }
  .lightbox-close{
    position:absolute;
    top:28px;right:36px;
    width:42px;height:42px;
    border:1px solid var(--gold);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    color:var(--gold-light);
    font-size:20px;
    background:transparent;
    line-height:1;
  }

  /* ---------- pricing ---------- */
  .pricing{background:var(--bg-0);}
  .pricing-group-label{
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    text-align:center;
    color:var(--gold);
    letter-spacing:.35em;
    font-size:13px;
    margin:70px 0 34px;
  }
  .pricing-group-label:first-of-type{margin-top:0;}
  .price-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .price-card{
    border:1px solid var(--card-line);
    background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
    padding:36px 34px;
    position:relative;
  }
  .price-card::before{
    content:"";
    position:absolute;
    top:-1px;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
  }
  .price-card h4{
    font-size:16px;
    color:var(--gold-light);
    letter-spacing:.12em;
    margin-bottom:22px;
    padding-bottom:16px;
    border-bottom:1px solid var(--card-line);
  }
  .price-card ul{list-style:none;}
  .price-row{
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:11px 0;
    font-size:14.5px;
    border-bottom:1px dashed rgba(154,164,181,.18);
  }
  .price-row:last-child{border-bottom:none;}
  .price-row .label{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
  }
  /* .price-row .label::before{
    content:"";
    width:7px;height:7px;
    flex:0 0 auto;
    border:1.2px solid var(--gold);
    transform:rotate(45deg);
  } */
  .price-row .amount{
    color:var(--gold-light);
    font-weight:700;
    white-space:nowrap;
    font-family:'Montserrat',sans-serif;
    letter-spacing:.02em;
  }
  .price-card.note p{
    font-size:14.5px;
    color:var(--text-muted);
    line-height:1.7;
  }

  /* ---------- contact ---------- */
  .contact{background:var(--bg-1);}
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:60px;
    align-items:start;
  }
  .contact-info{padding-top:8px;}
  .contact-item{
    display:flex;
    gap:16px;
    margin-bottom:30px;
  }
  .contact-item .ico{
    width:40px;height:40px;
    border:1px solid var(--gold);
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;
    transform:rotate(45deg);
  }
  .contact-item .ico svg{transform:rotate(-45deg);width:18px;height:18px;stroke:var(--gold);}
  .contact-item h4{font-size:14px;letter-spacing:.1em; color:var(--text);}
  .contact-item p, .contact-item a{color:var(--text-muted);font-size:15px;}
  .map-frame{
    width:100%;
    height:100%;
    min-height:360px;
    border:1px solid var(--card-line);
    filter:grayscale(.3) invert(.92) contrast(.9);
  }

  /* ---------- footer ---------- */
  footer{
    background:var(--bg-0);
    border-top:1px solid rgba(201,153,63,.18);
    padding:44px 0;
  }
  .footer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
  }
  .footer-brand{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:13px;}
  .footer-links{display:flex;gap:28px;}
  .footer-links a{font-size:13px;color:var(--text-muted);}
  .footer-links a:hover{color:var(--gold-light);}

  /* ---------- reveal on scroll ---------- */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    nav ul{display:none;}
    .menu-toggle{display:flex;}
    .service-row{grid-template-columns:1fr;gap:26px;}
    .service-row.reverse .service-media{order:0;}
    .service-row.reverse .service-copy{order:0;}
    .price-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .hero-content{max-width:100%;}
    /* новое: */
    .section{padding:100px 0;}
    .section-head{margin-bottom:56px;}
  }
  @media (max-width:520px){
    .container{padding:0 20px;}
    .section{padding:90px 0;}
    .hero-actions{flex-direction:column;}

    /* новое */
     .section-head{margin-bottom:40px;}
    .section-title{margin-bottom:14px;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none !important;transition:none !important;}

    /* без анимации эти элементы должны сразу показываться в финальном
       состоянии, а не оставаться с opacity:0 навсегда */
    .eyebrow,
    .hero-actions,
    .diamant-name,
    .hero-sub,
    .slogan,
    .reveal{
      opacity:1 !important;
      transform:none !important;
    }
  }

/* ---------- portfolio preview (index page) ---------- */
.portfolio-preview-grid{
  display:grid;
  grid-template-columns:1.2fr 1.2fr 1.2fr;
  gap:20px;
}
.preview-card{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--card-line);
  display:block;
}
.preview-card img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.preview-card:hover img{transform:scale(1.06);}
.preview-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(7,11,18,.8) 100%);
}
.preview-card .cap{
  position:absolute;
  bottom:14px;left:16px;
  z-index:2;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-light);
}
.preview-card.is-video .play-btn{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:64px;height:64px;
  border:1.5px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,11,18,.55);
  transition:all .3s ease;
}
.preview-card.is-video:hover .play-btn{background:var(--gold);}
.preview-card.is-video .play-btn svg{width:20px;height:20px;fill:var(--gold-light);transition:fill .3s ease;}
.preview-card.is-video:hover .play-btn svg{fill:var(--bg-0);}
.portfolio-more{
  text-align:center;
  margin-top:44px;
}

/* ---------- portfolio page header banner ---------- */
.page-banner{
  padding:160px 0 60px;
  background:var(--bg-1);
  border-bottom:1px solid var(--card-line);
}
.breadcrumb{
  display:flex;align-items:center;gap:10px;
  font-size:13px;
  color:var(--text-muted);
  letter-spacing:.05em;
  margin-bottom:22px;
}
.breadcrumb a{color:var(--gold-light);}
.breadcrumb span{color:var(--card-line);}

/* ---------- full gallery (portfolio page) ---------- */
.gallery-video{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--card-line);
  background:#000;
  aspect-ratio:21/9;
  margin-bottom:70px;
}
.gallery-video video{width:100%;height:100%;object-fit:cover;display:block;}
.gallery-video::before{
  content:"";
  position:absolute;inset:0;
  border:1px solid rgba(201,153,63,.35);
  outline:8px solid var(--bg-0);
  outline-offset:-8px;
  pointer-events:none;
  z-index:2;
}

.filter-bar{
  display:flex;
  gap:12px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.filter-btn{
  border:1px solid var(--card-line);
  background:transparent;
  color:var(--text-muted);
  padding:10px 22px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .25s ease;
  font-family:'Manrope',sans-serif;
}
.filter-btn:hover{border-color:var(--gold);color:var(--gold-light);}
.filter-btn.active{border-color:var(--gold);background:var(--gold);color:var(--bg-0);font-weight:700;}

.full-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.gallery-item{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid var(--card-line);
  cursor:zoom-in;
  transition:opacity .3s ease, transform .3s ease;
}
.gallery-item.hidden{display:none;}
.gallery-item img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.gallery-item:hover img{transform:scale(1.07);}
.gallery-item::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(7,11,18,.78) 100%);
  pointer-events:none;
}
.gallery-item .cap{
  position:absolute;
  bottom:12px;left:14px;
  z-index:2;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-light);
}
.gallery-item .tag{
  position:absolute;
  top:12px;right:12px;
  z-index:2;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  background:rgba(7,11,18,.6);
  border:1px solid var(--card-line);
  padding:4px 9px;
}

@media (max-width:900px){
  .portfolio-preview-grid{grid-template-columns:1fr 1fr;}
  .preview-card:first-child{grid-column:1/3;}
  .full-gallery{grid-template-columns:repeat(2,1fr);}
  /* Фикс высоты карты для iOS WebKit */
  .map-container {
    padding-bottom: 0 !important; /* Отменяем резиновые пропорции */
    height: 300px !important;     /* Жестко задаем высоту блока на мобильном */
    position: relative;
  }
  
  .map-container iframe {
    position: static !important;  /* Убираем абсолютное позиционирование */
    height: 100% !important;
    width: 100% !important;
  }
}
@media (max-width:520px){
  .full-gallery{grid-template-columns:1fr;}
  .page-banner{padding:140px 0 50px;}
  
  /* Фикс высоты карты для iOS WebKit */
  .map-container {
    padding-bottom: 0 !important; /* Отменяем резиновые пропорции */
    height: 300px !important;     /* Жестко задаем высоту блока на мобильном */
    position: relative;
  }
  
  .map-container iframe {
    position: static !important;  /* Убираем абсолютное позиционирование */
    height: 100% !important;
    width: 100% !important;
  }
}

.icon {
  background-color: aliceblue;
  fill: #c9993f;  
}


.slogan .text{
  color:var(--gold);
  text-align: justify;
  text-align-last: justify;
  font-size: 32px;
  font-weight: 600;
  width: 13em;
}

.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* соотношение сторон 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px; /* под твою тёмно-синюю/золотую эстетику можно добавить рамку */
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.communication-name{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-wrap {
  overflow-x: hidden;
}

#prix {
  position: relative;
  scroll-margin-top: 100px;
}

#prix {
  position: relative;
  
}


.banner-frame {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: visible;
}

.banner-wrap {
  position: absolute;
  width: 31rem;
  top: 10rem;
  right: -7rem;
  z-index: 1;
}

.banner-light {
  display: block;
  width: 100%;   /* заполняет .banner-wrap, а не задаёт свой размер */
  height: auto;
}

@media (max-width: 900px) {
  .banner-wrap {
    width: 26rem;
    top: 13rem;
    right: -5rem;
  }
}

@media (max-width: 565px) {
  .banner-wrap {
    width: 21rem;
    top: 17rem;
    right: -5rem;
  }
}