/* HomeInterior owner map: local shared rules for 90m / 108m project pages. */

/* Override headings alignment for desktop and mobile *//* Mobile: все заголовки по центру */*{box-sizing:border-box;}body{margin:0;font-family:Manrope,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;line-height:1.65;}h1,h2,h3{margin:0 0 12px;line-height:1.2}p{margin:0 0 12px}a{text-decoration:none}.wrap{width:min(90%,1600px);margin-inline:auto;}section{padding:80px 0;}@media (max-width: 768px){
section { padding: 40px 0; }.wrap { width: 92%; }
}
/* == Active menu highlight (scrollspy) == *//* == Unified button hover (gold bg, dark text — matches social icons) == *//* ======= HomeInterior Header Styles (transparent on load) ======= */.hi-meta{ display:flex; align-items:center; gap:12px; }/* Header desktop spacing: give logo more "air" without breaking narrow desktop widths */@media (min-width: 901px){
/* Up to 60px on wide screens; stays near 0 on narrow desktops to avoid overflow */
}
@media (max-width: 900px){
.hi-hide-mobile{ display:none; }
}
/* Compensate page for fixed header */body{ scroll-padding-top: 84px; }@media (max-width: 900px){
body{ scroll-padding-top: 72px; }
}
/* ===== Modal ===== */.hi-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }.hi-input{ background:#fff; color:#222; border:1px solid rgba(0,0,0,.12); border-radius:12px; padding:12px 14px; font-size:16px; outline:none; transition:border-color .2s, box-shadow .2s; }.hi-input:focus{ border-color: var(--hi-accent); box-shadow: 0 0 0 4px rgba(191,169,122,.22); }.hi-actions{ display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:8px; }/* ===== FIXED BUTTON HOVER PRIORITY ===== *//* === v30: Clean unified styles for entire site === *//* Header stability *//* General button design *//* Hover states - uniform gold glow for all buttons *//* Specific fix: phone button equal neon distribution *//* Ensure consistent rounding *//* === header-match-v23-v51 === *//* === v51: Header width & nav layout exactly like v23 === *//* === phone-transparent-v53 === *//* v53: Phone button without default fill/border; keep gold fill + neon glow on hover *//* === social-icons-clean-v75 === *//* === header-nav-like-phone-v88 === *//* v88: Header nav buttons hover like 'Телефон' (gold fill, black text, neon glow) *//* Hover state to match phone button *//* === logo-neon-hover-v89 === *//* v89: Neon glow on hover for the 'Home Interior' logo (no background fill change) *//* Soft golden neon glow similar to buttons, but kept as text glow to avoid layout shift *//* === header-nav-fill-v91 === *//* v91: Match vertical fill to VK/IG without changing spacing or centering *//* Keep the gold hover from v88 *//* === call-btn-flush-v92 === *//* v92: Make 'Заказать звонок' button flush top/bottom like соц. иконок *//* Keep the same hover behavior as other header buttons *//* === phone-flush-v93 === *//* v93: Make 'Телефон' button flush top/bottom like other header buttons *//* Keep hover behavior intact (gold fill + neon) *//* === phone-compact-v94 === *//* v94: Make 'Телефон' button less wide horizontally (keep same height) *//* === nocross-active-core-v3 === *//* Remove the cross near HOME INTERIOR logo *//* Make .active match :hover (gold fill + neon + lift) *//* === header-glow-dynamic-v18 === *//* === GLOWFIX10_final: starts exactly at header bottom, short smooth downward gradient === *//* === footer-separator-gold === *//* Золотая линия‑разделитель между блоком контактов и подвалом */footer{
  position: relative;
}footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;
  background: linear-gradient(90deg,
    rgba(191,169,122,0.0) 0%,
    rgba(191,169,122,0.85) 12%,
    rgba(191,169,122,0.95) 50%,
    rgba(191,169,122,0.85) 88%,
    rgba(191,169,122,0.0) 100%);
  box-shadow: 0 0 10px rgba(191,169,122,.45), 0 0 22px rgba(191,169,122,.25);
  border-radius:2px;
}/* === hero-underline-tapered === *//* Thin, subtle animated gold underline (auto-width) */#hero .hero-subtitle{
  position:relative; display:inline-block; padding-bottom:14px;
}#hero .hero-subtitle .u-core,
#hero .hero-subtitle .u-glow{ top:100%;
  position:absolute; left:50%; transform: translate(-50%,-50%); bottom:0; width:0; pointer-events:none;
}/* Core line: 2px with tapered gradient */#hero .hero-subtitle .u-core{
  height:2px;
  background: linear-gradient(90deg,
    rgba(191,169,122,0.00) 0%,
    rgba(191,169,122,0.70) 15%,
    rgba(191,169,122,0.90) 50%,
    rgba(191,169,122,0.70) 85%,
    rgba(191,169,122,0.00) 100%);
  box-shadow: 0 0 4px rgba(191,169,122,.25), 0 0 10px rgba(191,169,122,.18);
  -webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(110% 100% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%);
  border-radius: 2px;
}/* Mid highlight strip inside core for metallic feel (1px) */#hero .hero-subtitle .u-core::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px; transform:translateY(-50%);
  background: linear-gradient(90deg,
    rgba(255, 240, 200, 0.00) 0%,
    rgba(255, 240, 200, 0.70) 48%,
    rgba(255, 240, 200, 0.70) 52%,
    rgba(255, 240, 200, 0.00) 100%);
  -webkit-mask-image: radial-gradient(110% 100% at 50% 50%, #000 60%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(110% 100% at 50% 50%, #000 60%, rgba(0,0,0,0) 100%);
  border-radius: 1px;
}/* Soft halo: 6px height, light blur & low opacity */#hero .hero-subtitle .u-glow{
  top:100%; height:8px;
  background: linear-gradient(90deg,
    rgba(191,169,122,0.00) 0%,
    rgba(191,169,122,0.22) 20%,
    rgba(191,169,122,0.28) 50%,
    rgba(191,169,122,0.22) 80%,
    rgba(191,169,122,0.00) 100%);
  filter: blur(1px); opacity:.75;
  -webkit-mask-image: radial-gradient(140% 100% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(140% 100% at 50% 50%, #000 55%, rgba(0,0,0,0) 100%);
  border-radius: 6px;
}@media (max-width: 768px){
#hero .hero-subtitle{ padding-bottom: 12px; }#hero .hero-subtitle .u-glow{ top:100%; height:8px; }
}
/* === hero-subtitle-size-clamp === */#hero .hero-subtitle{ font-size: clamp(22px, 1.76vw, 29px) !important; line-height: 1.25; }/* === night-theme-v1 === */body{ background:var(--hi-bg, #0f0f10); color:var(--hi-text); }section{ background:var(--hi-bg); color:var(--hi-text); }section p{ color:var(--hi-text-dim); }/* Hero overlay: gentle darkening for slides */#hero{ position:relative; }#hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(to bottom, rgba(0,0,0,.22) 0%, rgba(0,0,0,.42) 100%);
}body.project-hero-fullscreen-page #hero::before{
  opacity:0;
  transition: opacity .45s ease;
}#hero .content, #hero .hero-title, #hero .hero-subtitle, #hero .cta{ position:relative; z-index:2; }/* Keep hero underline above overlay */#hero .hero-subtitle{ position:relative; z-index:3; }/* Header underglow: bright core line + soft glow strictly below the header *//* === hero-dimming-restore-v20 === */@media (max-width: 900px){
/* Hero darkening ONLY while header glow is ON; fade-out must be as smooth as fade-in *//* Glow element: fade out smoothly (no visibility cut) */
}
/* === mobile-cls-guard === */@media (max-width: 768px){
html, body { width:100%; max-width:100vw; overflow-x:hidden; }section, [class*="section"], [class*="block"], .container {
    box-sizing:border-box; width:100%; max-width:100%; margin-left:auto; margin-right:auto;
  }header nav a[href^="#"], footer nav a[href^="#"] {
    padding: 8px 14px; border:1px solid transparent; border-radius:12px;
  }* {
    transition-property: color, background-color, box-shadow, opacity, transform !important;
  }img, video { display:block; max-width:100%; height:auto; }
}
body{ scroll-padding-top: 72px; }
}
  #services,
  #design-steps,
  #portfolio,
  #prices,
  #team,
  #partners,
  #contacts {
    scroll-margin-top: 64px !important;
  }
}
/* Remove horizontal divider lines between sections */section{
  border-top:none !important;
}/* Desktop: underline slightly wider than heading text */@media (min-width: 1025px){
section:not(#hero) h2.section-title::after,
  section:not(#hero) > .wrap > h2::after,
  #services h2::after,
  #design-steps h2::after,
  #portfolio h2::after,
  #prices h2::after,
  #pricing h2::after,
  #partners h2::after,
  #contacts h2::after {
    left:-5% !important;
    width:110% !important;
  }
}
/* Смещаем скролл по якорям на мобиле, чтобы шапка не перекрывала заголовки */@media (max-width: 900px){
section[id],
  [id^="section"],
  #hero,
  #services,
  #design-steps,
  #portfolio,
  #prices,
  #team,
  #partners,
  #contacts {
    scroll-margin-top: var(--himob-h) !important;
  }
}
footer {
  border-top: none !important;
}
.project-hero-fullscreen{
  position:relative;
  width:100%;
  height:100vh;
  min-height:520px;
  overflow:hidden;
  padding:0 !important;
  margin:0 !important;
}.project-hero-fullscreen-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}.project-intro{
  padding:40px 0 80px;
}@media (max-width:900px){
.project-intro{padding:28px 0 64px;}
}
.project-intro .project-breadcrumb{
  margin:0 0 16px;
  font-size:14px;
  opacity:.75;
}.project-intro-text{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.7;
  opacity:.9;
}.project-meta-list{
  margin:24px 0 0;
  padding:0;
  list-style:none;
  font-size:15px;
  opacity:.9;
}.project-meta-list li{
  margin:4px 0;
}.project-meta-list span{
  opacity:.7;
}@media (max-width:900px){
.project-hero-fullscreen{
    min-height:480px;
  }.project-intro{
    padding:40px 0 64px;
  }
}
}
@media (max-width: 900px){
    position: fixed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    top: calc(env(safe-area-inset-top, 0px) + 9px);
    left: 12px;
    z-index: 9000;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
        transition: opacity .22s ease, transform .22s ease;
backdrop-filter: none;
  }/* No ghost clicks on hidden header *//* Mobile hero: stable full-screen height */.project-hero-fullscreen{
    height: 100svh;
    min-height: 100svh;
  }
}
/* === project-hero-desktop-topstate-v1 === *//* Desktop (project page): keep header controls visible over hero without band; band+glow only after scroll */@media (min-width: 901px){
/* Project hero: remove base dark overlay on load; keep scroll-dimming via existing ::before logic */body.project-hero-fullscreen-page #hero::after{
    content: none !important;
    display: none !important;
    background: transparent !important;
  }/* Top state (no scroll yet): no band, no glow line *//* Top state typography + icons: dark, neutral grey outline, no fills *//* CTA: premium outline on load (no forced fill); becomes filled only in scroll-state *//* Nav links: no frames on load (avoid layout shift); keep hover only */
}
/* === project1-mobile-v4 === *//* v4: project-1 mobile header match index (cleanup + stable hero) */@media (max-width: 900px){
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 12px;
    z-index: 9000; /* below drawer (10000) */
    opacity: 1;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
  }/* Smooth handoff when header becomes visible *//* Ensure hero truly starts at top (no space from elements in flow) */.project-hero-fullscreen{ height: 100svh; min-height: 0; }
}
}
    z-index: 9600 !important; /* header 9500, drawer 10000 */
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
    border:1px solid rgba(200,200,200,0.70) !important;
    background: transparent !important;
    padding:0 !important;
    display:block !important;
    width:18px !important;
    height:2px !important;
    background:#fff !important;
    border-radius:999px !important;
    margin:2px 0 !important;
}
/* === project1-plan-album-v2 === *//* === Project-1: full-screen plan + simple album grid + fullscreen slider === */.project-album-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0;
  box-sizing:border-box;
}@media (min-width: 901px){
/* desktop: side insets like on index portfolio (no 100vw/scrollbar shift) */.project-album-bleed{
    width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:14px;
    padding-right:14px;
  }
}
@media (max-width: 900px){
.project-album{padding:28px 0 150px;}.project-album-bleed{ padding:0; }
}
.project-album-grid{
  display:flex;
  gap:14px;
  align-items:flex-start;
}@media (min-width: 901px){
/* ПК: мозаика только для кухни-гостиной (wide кадры 1,6,11...) */.project-album-grid.is-mosaic{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:14px;
    align-items:start;
  }.project-album-grid.is-mosaic .project-album-item.is-wide{
    grid-column: 1 / -1;
  }
}
.project-album-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}@media (max-width: 900px){
.project-album-grid{ gap:12px; }.project-album-col{ gap:12px; }
}
.project-album-item{
  display:block;
  width:100%;
  border-radius:0;
  overflow:hidden;
  background:transparent !important;
  cursor:pointer;
  border:none !important;
  padding:0;
  appearance:none;
  box-shadow:none !important;  outline:none;
  -webkit-tap-highlight-color: transparent;
}@media (min-width: 901px){
.project-album-feature{ margin-top:14px; display:flex; justify-content:center; }.project-album-feature .project-album-item{ width:75%; }
}
.project-album-item::before,
.project-album-item::after{
  content:none !important;
  display:none !important;
}.project-album-item img{
  display:block;
  width:100%;
  height:auto;
  transform:none !important;
  /* Убираем "прыжки" от hover-зума и уменьшаем перерисовки на мобиле */
  transition:opacity .35s ease !important;
  opacity:0;
  backface-visibility:hidden;
}.project-album-item.is-loaded img{ opacity:1; }.project-album-item.is-loading img{ opacity:0; }.project-album-item:hover img{ transform:none !important; }/* Ensure no hover/focus "glow" behind thumbs (only zoom) */.project-album-item:hover,
.project-album-item:active{
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
  border:none !important;
}.project-album-item:focus{
  outline:none !important;
  border:none !important;
}/* === Project-1: room blocks for album === */.project-album-sections{ width:100%; }.project-album-section{ padding: 0 0 34px; }.project-album-section:last-child{ padding-bottom:0; }.project-album-roomtitle{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
}
.project-visualization-title .section-title{
  text-align:center;
}
.project-album-copy{
  width:75%;
  max-width:none;
  margin: 0 auto 18px;
  color: rgba(255,255,255,.82);
}
.project-album-copy p{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
}
.project-album-copy p:last-child{
  margin-bottom: 0;
}
@media (max-width: 900px){
  .project-album-copy{
    width:100%;
    margin: 0 auto 16px;
    padding: 0 12px;
  }
  .project-album-copy p{
    font-size: 15px;
    line-height: 1.68;
  }
}
@media (max-width: 900px){
.project-album-roomtitle{
    margin: 0 0 12px;
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.25;
    text-align:center;
    padding: 0 12px;
  }.project-album-section{ padding: 0 0 28px; }
}
/* === Project-1: Floorplan block (V34) === *//* V36: единый тон (как в блоке планировки) */#project-about,
#project-floorplan{
  background: var(--hi-surface);
}.project-floorplan{
  background:transparent;
  color:#fff;
  padding:56px 0;
  border-top:none;
}.section-title--light{color:#fff;}.project-floorplan-text{
  max-width:860px;
  margin:12px 0 22px;
  color:rgba(255,255,255,.78);
  line-height:1.6;
}.project-floorplan-media{
  display:block;
  width:100%;
  max-width:1008px;
  margin:0 auto;
  border-radius:0;
  overflow:visible;
  background:transparent;
  border:none;
  box-shadow:none;
}.project-floorplan-media img{display:block;width:100%;height:auto;}.project-floorplan-hint{
  margin-top:10px;
  font-size:14px;
  color:rgba(255,255,255,.55);
}@media (max-width:900px){
.project-floorplan{padding:40px 0;}.project-floorplan-media{border-radius:0;}
}
/* === project-1-hotfix-v22 === *//* v22: mobile hero should be bright on first load; dim only after scroll via #hero::before */@media (max-width:  900px){
body.project-hero-fullscreen-page #hero::after{ display:none !important; }.project-hero-fullscreen{ height: 100svh !important; min-height: 0 !important; }.project-hero-fullscreen picture, .project-hero-fullscreen picture img{ width:100%; height:100%; display:block; }
}
/* === header-logo-air-force-match-index === */@media (min-width: 901px){
/* Force the same “air” around the centered logo as on index (desktop only) *//* Prevent grid stretching from visually “eating” the gap *//* Shift left/right blocks away from the logo */
}