/* HomeInterior owner map: index only — homepage shell, shared UI wrappers, section-level geometry. */

/* hi-index-shell-ui.css — consolidated bundle for index.html */

/* ---- source: hi-landing-refinements.css ---- */
/* Auto-extracted shared CSS for HomeInterior */
/* === Unify footer nav button look with header === *//* Hover/focus = gold fill + black text + neon (same as header) *//* Active state in footer mirrors header's active */


@media (max-width: 900px){
  h2.section-title,
  #services h2,
  #design-steps h2,
  #portfolio h2,
  #prices h2,
  #team h2,
  #partners h2,
  #contacts h2 {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !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:50% !important;
    width:110% !important;
    transform:translateX(-50%) !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;
  }
}



/* chernovich: отключаем подсветку подвала и горизонтальную линию */
#footer-light,
.foot-underline {
  display: none !important;
}



/* Точное смещение якоря для раздела Портфолио на мобиле:
   выравниваем отступ по шапке как у остальных разделов */
@media (max-width: 900px){
  #portfolio{
    scroll-margin-top: var(--himob-h) !important;
  }
}



/* ЕДИНЫЙ СТИЛЬ ДЛЯ ОСНОВНОГО ТЕКСТА НА ВСЁМ САЙТЕ */
section p:not(.hi-prices-note),
section li {
  font-size: 18px !important;
  line-height: 1.5;
}

/* Фото в блоке "Обо мне и команде": убираем лишнее вертикальное смещение на ПК */
@media (min-width: 901px){
  #team .grid > div:last-child img{
    margin-top: 0;
  }
}



/* Дополнительно: приравниваем стиль текста под ценами к основному */
.muted.prices-contract-note{
  /* цвет как у обычного текста */
  color: inherit !important;
}



/* Дополнительное выравнивание стиля текста в блоке цен */
#prices .price-card p,
#prices .price-card li,
#prices .muted.prices-contract-note,
#prices .muted.footnote{
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}



/* ЖЁСТКО: текст в карточках раздела ЦЕНЫ один размер; intro-пояснение управляется отдельно в hi-index-services-prices.css */
#prices p:not(.hi-prices-note),
#prices li {
  font-size: 18px !important;
  line-height: 1.5 !important;
}



/* ЕДИНЫЙ ЦВЕТ ДЛЯ ВСЕГО ОСНОВНОГО ТЕКСТА: hi-text-dim */
/* Основные абзацы и списки во всех секциях */
section p,
section li,
.prices-contract-note,
.footnote {
  color: var(--hi-text-dim) !important;
}

/* Акценты и заголовки — светлее: hi-text */
h1, h2, h3,
#hero h1,
#hero h2,
#hero h3,
.price-card h3,
#prices .price,
#team h2,
#services h2,
#design-steps h2,
#portfolio h2,
#partners h2,
#contacts h2 {
  color: var(--hi-text) !important;
}



/* Финальная фиксация: оба абзаца под блоком цен — одним цветом hi-text-dim */
#prices .muted.prices-contract-note,
#prices .muted.footnote{
  color: var(--hi-text-dim) !important;
}



@media (max-width: 900px) {
  /* Prices note: align left on mobile */
  .prices-contract-note {
    text-align: left !important;
  }
  /* Hide paragraph about voice assistant "Алиса" only on mobile */
  #services .hi-about p:nth-of-type(3) {
    display: none;
  }
  /* Hide list item "Всегда на связи..." in calm block only on mobile */
  #services .hi-services-side ul li:last-child {
    display: none;
  }
}



  #design-steps .grid {
    counter-reset: hi-step;
  }
  #design-steps .grid > div {
    position: relative;
    padding-left: 52px;
  }
  #design-steps .grid > div::before {
    counter-increment: hi-step;
    content: counter(hi-step);
    position: absolute;
    top: -0.38em;
    left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--hi-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    color: #fff;
  }

  #design-steps .grid > div.hi-step-active::before {
    background: #BFA97A;
    color: #000;
    border-color: #BFA97A;
    box-shadow: 0 0 18px rgba(191,169,122,0.7), 0 0 36px rgba(191,169,122,0.45);
  }
  @media (max-width: 900px) {
    #design-steps .grid > div {
      padding-left: 44px;
    }
    #design-steps .grid > div::before {
      width: 30px;
      height: 30px;
      font-size: 14px;
    }
  }



  /* Более компактные отступы между этапами "Как мы работаем" на мобиле */
  @media (max-width: 900px){
    #design-steps .grid{
      gap: 18px;
    }
    #design-steps .grid h3{
      margin-bottom: 6px;
    }
    #design-steps .grid p{
      margin-bottom: 0;
    }
  }

/* ---- source: hi-index-inline-10.css ---- */
/* === hi-styles-pre === */
/* 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) ======= *//* Header desktop spacing: give logo more "air" without breaking narrow desktop widths */
@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; }/* === 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 === */
/* === 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^="#"]{
    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; }
}
/* Remove horizontal divider lines between sections */section{
  border-top:none !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;
  }
}
/* === 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 *//* Controls over hero: white + subtle shadow for readability on video, no band *//* 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 */
}
/* === 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; }
}


/* === svc-cta-style === */
#services .svc-cta,
#design-steps .svc-cta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%;
  margin:16px auto 0;
}
#services .svc-cta a,
#design-steps .svc-cta a{ white-space:nowrap; }
#services .svc-cta a.btn-outline,
#design-steps .svc-cta a.btn-outline{
  border-color:#fff;
  color:#fff;
}
@media(max-width:680px){
  #services .svc-cta,
  #design-steps .svc-cta{ flex-direction:column; }
  #services .svc-cta a,
  #design-steps .svc-cta a{ width:100%; text-align:center; }
}

/* ---- source: hi-landing-faq.css ---- */
/* FAQ */
.hi-faq details{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  box-shadow:0 8px 28px rgba(0,0,0,.04);
}
.hi-faq details + details{ margin-top:10px; }
.hi-faq summary{
  cursor:pointer;
  font-weight:700;
  list-style:none;
}
.hi-faq summary::-webkit-details-marker{ display:none; }
.hi-faq .faq-body{ margin-top:10px; color:#374151; line-height:1.65; }

/* ---- source: hi-index-inline-11.css ---- */
/* === project1-pc-header-glow-fixes-v25 === */@media (min-width: 901px){
/* Remove faint line from legacy pseudo-glow (can remain visible even when glow is off) *//* Smooth fade for under-header glow (show/hide) *//* Ensure hero dim returns smoothly */body.project-hero-fullscreen-page #hero::before{
    transition: opacity .35s ease !important;
  }
}
/* === v182-header-glow-ghost-off-fix === *//* After glow fades out, remove any residual 1px shine under header (Safari/iOS artifact). *//* Hard-disable legacy pseudo underglow when glow is OFF *//* === project-1-v39-page-bg_header_roomnav === *//* V39 (project-1): unified page tone, centered room titles, desktop header layout, bottom room nav *//* Page background tone (medium between old/new) + apply everywhere */body.project-hero-fullscreen-page{ background:var(--project-page-bg) !important; }.hi-main{ background:transparent !important; }/* Remove panel-like backgrounds so the whole page is one tone */
/* Center room titles *//* Scroll anchor offset for fixed header *//* Desktop header: left menu, centered logo, right contacts */
/* === project1-v133-small-mobile-tuning === */@media (max-width: 900px){
/* V133: keep Android/Chrome from auto-inflating text (more consistent with iOS) */html, body{ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
}
@media (max-width: 390px){
/* V133: small phones (360–390px) — make UI a bit tighter without touching larger iPhones (430+) *//* 1) Footer controls *//* 2) Bottom room navigation *//* 3) Main page title (H1) — prevent oversized look on small Android */h1.section-title{
    font-size:var(--hi-type-h1) !important;
    letter-spacing: 0 !important;
  }
}
/* === project1-v134-small-devices-tuning === */@media (max-width: 420px){
/* V134: small devices (≈360–420px) — unify visual scale (Android vs iOS) *//* Footer controls: slightly smaller (~5%) *//* Bottom room navigation: tighter pills to avoid cropping on narrow screens *//* Intro typography: prevent oversized look */h1.section-title{
    font-size: clamp(24px, 6.3vw, 30px) !important;
    letter-spacing: 0 !important;
  }
}
/* === project1-v135-mobile-text-inflation-guard === *//* V135: Stop Android/Chrome text inflation so typography matches iOS more closely */@media (max-width: 900px){
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
}


/* === hi-a1-index-fixes-v9 === */
/* HI v9 A1 (index): clean hero like project-1 + intro below */
#hero::after{display:none !important;}
/* hide any legacy hero text layers if they still exist somewhere */
#hero .content, #hero .hero-subtitle, #hero .hero-title, #hero .hero-subline, #hero .hero-counter, #hero .cta{display:none !important;}
/* remove hero nav arrows for a clean premium hero */
#hero .hero-nav{display:none !important;}
/* Intro block under hero (H1 + short text + CTA) */
.home-intro{padding:48px 0 10px; background:transparent;}
.home-intro .wrap{max-width:1280px; margin:0 auto; padding:0 20px; text-align:center;}
.home-h1{
margin:0 0 10px;
}
.home-lead{
margin:0 auto 18px; max-width:980px;
}
.home-intro .cta{display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:18px;}
/* page background like project-1 (almost black) */
html,body{background:#030303;}


/* === index-a1-hero-clean === */
/* A1: Hero on index must be clean (no dark overlay), text moved below hero */
#hero::before{ opacity:0 !important; background:none !important; }


/* === index-premium-a1-v1 === */
/* HI: index premium A1 tune v1 (visual only) */
.home-intro{
  padding:64px 0 34px;
  background: radial-gradient(1100px 420px at 50% 0%, rgba(255,255,255,.045), rgba(255,255,255,0) 60%);
}
.home-intro .wrap{
  margin:0 auto;
  padding:0 24px;
  max-width:1200px;
  align-items:center;
  text-align:center;
  gap:14px;
}
@media (min-width:1280px){
  .home-intro .wrap{ max-width:1380px; }
}
.home-intro .home-h1{
  width:100%;
  margin: 14px 0 0;
}

.home-intro .home-lead{
  max-width:860px;
}
/* === v17 premium tweaks (CTA + spacing) === */
.home-title{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.home-intro .home-h1{
 margin: 16px 0 0;
} /* spacing controlled by .home-lead */
.home-intro .home-lead{
  margin: 30px auto 18px; /* more air under H1 */
}
.home-intro .cta .btn{
  border: 1px solid rgba(191,169,122,.85); /* gold outline for main CTA */
}
.home-intro .cta .btn-outline{
  color:#fff;
  border-color: rgba(255,255,255,.38);
}
.home-intro .cta .btn-outline:hover{
  border-color: rgba(255,255,255,.55);
}
@media (max-width:900px){
  .home-intro .home-lead{
 margin-top: 18px;
}
}

.home-intro .cta{
  margin-top:18px;
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}
.home-intro .cta .btn,
.home-intro .cta .btn-outline{
  min-width:210px;
}

/* About/Services section: typography + spacing (no text changes) */
#services{
  padding-top:38px;
}

#services .hi-about-layout{
  gap:22px;
  align-items:center;
}
#services .hi-about{
  max-width:1100px;
  width:100%;
}

#services .hi-about-photo img{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
#services .svc-cta{
  margin-top:18px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
@media (max-width:900px){
  .home-intro{ padding:52px 0 28px; }
  .home-intro .wrap{ padding:0 18px; }
  #services{ padding-top:30px; }
  #services .hi-about-layout{ gap:22px; }
}


/* === hi-v34-hero-lead-mock-v1 === */
/* v34: Hero lead size + offsets per Photoshop mock.
   Clean-up: removed old experimental blocks (hi-v18/20/22/23) to avoid conflicts. */

/* Intro spacing */
#home-intro.home-intro{
  padding: 48px 0 44px !important;
}

/* H1 + lead rhythm */
#home-intro .home-h1{
  margin: 0 0 14px !important;
}
#home-intro .home-lead{
  margin: 0 auto 24px !important;
  max-width: 1280px !important;
}

/* CTA block */
#home-intro .cta{
  margin-top: 0 !important;
  gap: 16px !important;
}

/* Desktop downscale */
@media (max-width: 1100px){
  #home-intro.home-intro{ padding: 42px 0 36px !important; }
  #home-intro .home-lead{
  margin-bottom: 22px !important;
}
}

/* Mobile */
@media (max-width: 900px){
  #home-intro.home-intro{ padding: 34px 0 28px !important; }
  
}


/* CTA styling (was in hi-v18) */
#home-intro .cta a.btn{
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(191,169,122,.65) !important;
}
#home-intro .cta a.btn-outline{
  color: #fff !important;
}
#home-intro .cta a.btn:hover,
#home-intro .cta a.btn-outline:hover,
#home-intro .cta a.btn:focus-visible,
#home-intro .cta a.btn-outline:focus-visible{
  background: #BFA97A !important;
  color: #000 !important;
  border-color: #BFA97A !important;
  box-shadow: 0 0 18px rgba(191,169,122,0.7), 0 0 36px rgba(191,169,122,0.45) !important;
  transform: translateY(-1px);
}


/* === portfolio-captions-v46 === */
/* portfolio captions + layout (v50 fix2)
   Fixes:
   - add vertical air between rows (desktop +24px / mobile +14px) without moving caption text
   - keep central divider via column-gap
   - keep hover-zoom from spilling into caption
*/
#portfolio .gallery{
  padding-inline:0 !important;
  column-gap:0 !important;
  row-gap:0 !important; /* gap moved into caption */
  margin-top:18px !important;
}

@media (min-width: 901px){
  #portfolio .gallery{
    grid-template-columns:1fr 1fr !important;
    /* центральная разделяющая полоса */
    column-gap:6px !important;
    row-gap:0 !important; /* gap moved into caption */
  }
}

@media (max-width: 900px){
  #portfolio .gallery{
    grid-template-columns:1fr !important;
    column-gap:0 !important;
    row-gap:0 !important; /* gap moved into caption */
  }
}

#portfolio .gallery-item{
  border-right:none !important;
  box-sizing:border-box;
}

/* remove rounding only in portfolio */
#portfolio .gallery-item,
#portfolio .gallery-item-inner,
#portfolio .gallery-item img,
#portfolio .gallery img{
  border-radius:0 !important;
}

#portfolio .gallery-item{
  overflow:hidden !important;
  display:flex;
  flex-direction:column;
}

/* IMPORTANT: .gallery-item-inner has height:100% in base CSS.
   In flex column this makes media block stretch into the caption area -> hover zoom bleeds down.
   Force natural height. */
#portfolio .gallery-item-inner{
  /* unified card media ratio (same as project-1 cover: 16:9) */
  height:auto !important;
  flex:0 0 auto;
  overflow:hidden;
  display:block;
  aspect-ratio: 16 / 9;
}

#portfolio .gallery-item-inner img{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
}

/* caption block */
#portfolio .project-caption-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

#portfolio .project-caption{
  /* bottom padding includes former grid row-gap so CTA halo lights the whole strip */
  padding:26px 32px 48px;
}

#portfolio .project-caption-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

#portfolio .project-cta-circle.cta-in-caption{
  position:relative;
  right:auto;
  bottom:auto;
}

/* CTA circle border: removed (only arrow + glow) */
/* CTA in caption: absolute, does not change black strips height */
#portfolio .project-caption{position:relative;}
#portfolio .project-cta-circle.cta-in-caption.cta-abs{
  position:absolute;
  right:32px;
  top:26px;
  transform:translateY(-2px);
  pointer-events:none;
}
#portfolio .gallery-item:hover .project-cta-circle.cta-in-caption,
#portfolio .project-caption-link:hover .project-cta-circle.cta-in-caption,
#portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle.cta-in-caption{
  background: transparent;
  box-shadow: 0 0 30px rgba(212,184,115,.85), 0 0 66px rgba(212,184,115,.32), 0 0 110px rgba(212,184,115,.14);
}
#portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle.cta-in-caption.cta-abs{
  background: radial-gradient(circle at 50% 50%, rgba(212,184,115,0.95) 0%, rgba(212,184,115,0.55) 55%, rgba(212,184,115,0.0) 76%);
  box-shadow: 0 0 18px rgba(212,184,115,0.55), 0 0 38px rgba(212,184,115,0.22);
  transform:translateY(-2px) rotate(-45deg) scale(1.02);
}

#portfolio .project-cta-circle{border:0 !important;}
#portfolio .project-caption-title{
  font-size:28px;
  line-height:1.05;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

#portfolio .project-caption-sub{
  margin-top:10px;
  font-size:16px;
  line-height:1.35;
  opacity:.65;
}

@media (max-width: 900px){
  #portfolio .project-caption{
    /* bottom padding includes former grid row-gap so the strip belongs to the upper project */
    padding:22px 18px 30px;
  }
  #portfolio .project-caption-title{
    font-size:clamp(18px,4.8vw,20px);
    line-height:1.06;
  }
  #portfolio .project-caption-sub{
    font-size:15px;
  }
}

/* disabled (soon) cards: keep behaviour consistent */
#portfolio .project-caption-link.is-disabled{
  pointer-events:none;
  cursor:default;
}

/* v57: portfolio CTA — use v54 "halo only" style + arrow points to title; on hover rotates up 90° clockwise */
#portfolio .project-cta-circle{ --cta-arrow-shift: 0.8px;   --cta-arrow-active-y: 0.8px;
}

#portfolio .project-cta-circle span{
  transform: translateX(var(--cta-arrow-shift)) rotate(180deg); /* points to title (left) */
}
#portfolio .gallery-item:hover .project-cta-circle span,
#portfolio .project-caption-link:hover .project-cta-circle span{
  transform: translateX(var(--cta-arrow-shift)) translateY(var(--cta-arrow-active-y)) rotate(270deg); /* up; 180 -> 270 = +90° clockwise */
}
#portfolio .gallery-item-inner.is-touching .project-cta-circle span,
#portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle span{
  transform: translateX(var(--cta-arrow-shift)) translateY(var(--cta-arrow-active-y)) rotate(270deg);
}


/* === portfolio-cta-glow-unify-v64 === */
/* v64: выравнивание свечения CTA-кружков в портфолио (как у ЖК «Изумрудный») */
#portfolio{
  --cta-halo-1: 0 0 30px rgba(212,184,115,.85);
  --cta-halo-2: 0 0 66px rgba(212,184,115,.32);
  --cta-halo-3: 0 0 110px rgba(212,184,115,.14);
}
#portfolio .gallery-item:hover .project-cta-circle.cta-in-caption,
#portfolio .project-caption-link:hover .project-cta-circle.cta-in-caption{
  box-shadow: var(--cta-halo-1), var(--cta-halo-2), var(--cta-halo-3);
  background: transparent;
}


/* === portfolio-cta-center-v66 === */
/* v66: CTA arrow optical centering + move caption CTA down by 20px (no design change besides requested positioning) */

/* 1) Make the arrow visually centered in the circle (including active/hover state) */
.project-cta-circle span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  line-height:1;
  transform:translateY(2px);
  transform-origin:50% 50%;
}

/* Active states: keep the same centering shift while rotating */
.gallery-item:hover .project-cta-circle span,
#portfolio .project-caption-link:hover .project-cta-circle span,
.gallery-item-inner.is-touching .project-cta-circle span,
.gallery-item-inner.is-touching + .project-caption-link .project-cta-circle span{
  transform:translateY(2px) rotate(-45deg);
}

/* 2) Move CTA circles in captions down by 20px */
#portfolio .project-cta-circle.cta-in-caption.cta-abs{
  transform:translateY(20px) !important;
}
#portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle.cta-in-caption.cta-abs{
  transform:translateY(20px) !important;
}

/* Preserve the touch-specific rotate/scale effect without breaking the 20px shift */
#portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle.cta-in-caption.cta-abs{
  /* Keep existing visual treatment from v46, only swap Y-offset */
  transform:translateY(20px) rotate(-45deg) scale(1.02) !important;
}


/* === portfolio-cta-arrow-shift-v68 === */
/* v68: стрелка в CTA-кружке — сдвиг вправо на 1px относительно v67 (итоговый сдвиг: -1px) + стабильное вращение */
#portfolio .project-cta-circle{
  --cta-arrow-shift: -1px;          /* было -2px в v67 */
  --cta-arrow-active-y: 0.8px;      /* как было в v57 */
}

/* Базовое состояние: стрелка смотрит влево (как задумано в v57), с небольшим смещением по X */
#portfolio .project-cta-circle span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  line-height:1;
  transform-origin:50% 50%;
  transform: translateX(var(--cta-arrow-shift)) rotate(180deg);
}

/* Наведение/тап: везде одно и то же правило (чтобы не меняло направление при переходе мыши между фото и подписью) */
#portfolio .gallery-item:hover .project-cta-circle span,
#portfolio .project-caption-link:hover .project-cta-circle span,
#portfolio .gallery-item-inner.is-touching .project-cta-circle span,
#portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle span{
  transform: translateX(var(--cta-arrow-shift)) translateY(var(--cta-arrow-active-y)) rotate(270deg);
}


/* === portfolio-mobile-tune-v73 === */
/* v73: mobile portfolio — bigger arrow, better optical centering, titles smaller, CTA raised +10px */
@media (max-width: 900px){

  /* 1) Smaller project titles (final mobile override) */
  #portfolio .project-caption-title{
    font-size:clamp(16px,4.2vw,18px) !important;
    line-height:1.06 !important;
  }

  /* 2) Raise caption CTA by +10px relative v72 */
  #portfolio .project-cta-circle.cta-in-caption.cta-abs{
    transform:translateY(0px) !important;
  }
  #portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle.cta-in-caption.cta-abs{
    transform:translateY(0px) rotate(-45deg) scale(1.02) !important;
  }

  /* 3) Make the arrow larger and optically centered within the circle (mobile) */
  #portfolio .project-cta-circle{
    --cta-arrow-center-y: 1px;
    --cta-arrow-nudge-x: 1.5px;
  }
  #portfolio .project-cta-circle span{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;

    font-size:34px !important;
    width:1.25em !important;
    height:1.25em !important;

    transform:translateX(calc(var(--cta-arrow-shift) + var(--cta-arrow-nudge-x))) translateY(var(--cta-arrow-center-y)) rotate(180deg) !important;
  }
  #portfolio .gallery-item:hover .project-cta-circle span,
  #portfolio .project-caption-link:hover .project-cta-circle span,
  #portfolio .gallery-item-inner.is-touching .project-cta-circle span,
  #portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle span{
    transform:translateX(calc(var(--cta-arrow-shift) + var(--cta-arrow-nudge-x))) translateY(calc(var(--cta-arrow-center-y) + var(--cta-arrow-active-y))) rotate(270deg) !important;
  }
}


/* === portfolio-tweaks-v76 === */
/* v76: mobile arrow micro-nudge (+0.5px up/right), move 'more projects' button up by 40px, desktop CTA circle shift left by 20px */
@media (max-width: 900px){
  /* 1) Arrow inside circle: +0.5px up, +0.5px right (optical centering) */
  #portfolio .project-cta-circle{
    --cta-arrow-center-y: 0.5px;   /* was 1px */
    --cta-arrow-nudge-x: 2px;      /* was 1.5px */
  }

  /* 2) 'Смотреть больше проектов' — visually higher; layout space stays, so distance to next section grows */
  #portfolio .portfolio-more-wrap{
    transform: translateY(-40px);
  }
}

@media (min-width: 901px){
  /* 3) Desktop: move caption CTA circle 20px left */
  #portfolio .project-cta-circle.cta-in-caption.cta-abs{
    right: 52px; /* was 32px */
  }
}


/* === v77-mobile-tap-caption-underline === */
/* v77: fixes — remove iOS tap-fill flash on portfolio CTA, make caption strip fully clickable, justify calm text on desktop, full-width mobile underlines */
@media (max-width: 900px){
  /* Remove iOS/Android tap highlight that выглядит как "заливка" при первом касании */
  #portfolio .project-caption-link,
  #portfolio .gallery-item-inner{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  #portfolio .project-caption-link:active,
  #portfolio .gallery-item-inner:active{
    -webkit-tap-highlight-color: transparent;
  }
  /* Ensure CTA circle never gets a filled background on tap/focus */
  #portfolio .project-cta-circle,
  #portfolio .project-caption-link:active .project-cta-circle,
  #portfolio .project-caption-link:focus .project-cta-circle{
    background: transparent !important;
  }
}

/* Caption strip is a link — keep it the top hit-area everywhere */
#portfolio .project-caption-link{
  cursor: pointer;
  position: relative;
  z-index: 3;
}

/* ПК: блок "Почему с нами спокойно" по центру, текст в пунктах с ровным правым краем */
@media (min-width: 901px){
  #services .hi-calm{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  #services .hi-calm ul{
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    text-justify: inter-word;
  }
  #services .hi-calm li{
    text-align: justify;
    text-justify: inter-word;
  }
}

/* Мобилка: золотая линия под заголовками на всю ширину контента (как у "Цены на дизайн интерьера") */


/* === v78-fixes-portfolio-calm-underline === */
/* v78: Portfolio caption links should be clickable even for 'Скоро' items */
#portfolio .project-caption-link.is-disabled{
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* v78: ПК — блок "Почему с нами спокойно" по центру + ровный правый край (justify) */
@media (min-width: 901px){
  #services .hi-calm{
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  #services .hi-calm ul{
    display: inline-block !important;
    width: 920px !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    text-align-last: left !important;
    hyphens: auto;
  }
  #services .hi-calm li{
    text-align: justify !important;
    text-justify: inter-word !important;
    text-align-last: left !important;
    hyphens: auto;
  }
}

/* v78: Мобилка — подчеркивание под "Наши услуги" и "Почему с нами спокойно" во всю ширину (как у "Цены") */
@media (max-width: 900px){
  #services .hi-services-main h2,
  #services .hi-calm h2{
    width: 100% !important;
    display: block !important;
  }
}


/* === v79-calm-center-right === */
@media (min-width: 901px){
  #services .hi-calm{ text-align:center !important; }
  #services .hi-calm ul{
    display:inline-block !important;
    width:auto !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:22px !important;
    text-align:justify !important;
    text-justify:inter-word !important;
    text-align-last:left !important;
    -webkit-hyphens:none !important;
    -ms-hyphens:none !important;
    hyphens:none !important;
  }
  #services .hi-calm li{
    text-align:justify !important;
    text-justify:inter-word !important;
    text-align-last:left !important;
    -webkit-hyphens:none !important;
    -ms-hyphens:none !important;
    hyphens:none !important;
  }
  #services .hi-calm li.hi-calm-nojustify{
    text-align:left !important;
    text-justify:auto !important;
  }
}


/* === v80-services-unify-nojustify === */
/* v80: Services section — single content width + premium typography (no justify/word stretching) */
#services{--hi-content-w:1100px;}
#services .hi-about,
#services .hi-services-main,
#services .hi-about-photo,
#services .hi-calm{
  width:100% !important;
  max-width:var(--hi-content-w) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* About: no justify on desktop */

/* Services list: column centered as a block, text left */
#services .hi-services-main{ text-align:left !important; }
#services .hi-services-main ul{
  text-align:left !important;
  word-spacing:normal !important;
}

/* Calm: disable any justify hacks; keep headings centered */
#services .hi-calm{ text-align:left !important; }
#services .hi-calm h2,
#services .hi-calm .hi-calm-lead{ text-align:center !important; }

#services .hi-calm ul{
  display:block !important;
  width:100% !important;
  max-width:var(--hi-content-w) !important;
  margin:0 !important;
  text-align:left !important;
  text-justify:auto !important;
  text-align-last:auto !important;
  word-spacing:normal !important;
  hyphens:none !important;
}
#services .hi-calm li{
  text-align:left !important;
  text-justify:auto !important;
  text-align-last:auto !important;
  word-spacing:normal !important;
  hyphens:none !important;
}


/* === hi-v8-buttons-polish === */
/* v8: buttons polish — portfolio more button aligned with header / hero CTA family */

/* 1) Portfolio: 'Смотреть больше проектов' */
#portfolio .portfolio-more-btn{
  -webkit-appearance:none;
  appearance:none;
  background:#262626 !important;
  color:rgba(255,255,255,.94) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background-image:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(255,255,255,0.06) !important;
}
#portfolio .portfolio-more-btn:hover,
#portfolio .portfolio-more-btn:focus-visible{
  background:#BFA97A !important;
  color:#111 !important;
  border-color:#BFA97A !important;
  box-shadow:
    0 0 18px rgba(191,169,122,0.34),
    0 0 34px rgba(191,169,122,0.18) !important;
  transform: translateY(-1px);
}

/* 2) Services/Steps CTA: '... — подробнее' */
#services .svc-cta a.btn-outline,
#design-steps .svc-cta a.btn-outline{
  background: transparent !important;
  color:#fff !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  box-shadow: none !important;
}
#services .svc-cta a.btn-outline:hover,
#services .svc-cta a.btn-outline:focus-visible,
#design-steps .svc-cta a.btn-outline:hover,
#design-steps .svc-cta a.btn-outline:focus-visible{
  background: #BFA97A !important;
  color:#000 !important;
  border-color:#BFA97A !important;
  box-shadow: 0 0 18px rgba(191,169,122,0.7), 0 0 36px rgba(191,169,122,0.45) !important;
  transform: translateY(-1px);
}

/* 3) Prices: 'Заказать' — readable, no gradient */
#prices .price-row a.btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:14px 22px !important;
  border-radius:16px !important;
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(191,169,122,.70) !important;
  background-image: none !important;
  box-shadow: none !important;
}
#prices .price-row a.btn:hover,
#prices .price-row a.btn:focus-visible{
  background: #BFA97A !important;
  color:#000 !important;
  border-color:#BFA97A !important;
  box-shadow: 0 0 18px rgba(191,169,122,0.7), 0 0 36px rgba(191,169,122,0.45) !important;
  transform: translateY(-1px);
}


/* === hi-v9-capsule-buttons === */
/* v9: capsule shape for key CTA buttons (keep existing gold hover) */
#portfolio .portfolio-more-btn{
  border-radius: 999px !important;
  padding: 10px 16px !important;
  line-height: 1.1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#services .svc-cta a.btn-outline,
#design-steps .svc-cta a.btn-outline{
  border-radius: 999px !important;
  padding: 10px 16px !important;
  line-height: 1.1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* === hi-v10-portfolio-more-size === */
/* v10: "Смотреть больше проектов" — same family as header / hero CTA, still secondary */
#portfolio .portfolio-more-btn{
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  padding: 15px 24px !important;
  font-size: 17px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  white-space: nowrap;
}
@media (max-width: 768px){
  #portfolio .portfolio-more-btn{
    font-size: 15px !important;
    padding: 13px 20px !important;
  }
}


/* === hi-header-footer-reset === */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}

/* hi-header-footer reset (from project-1.html) */
[data-hi-call].hi-btn{ transition: background .35s ease, box-shadow .35s ease, color .3s ease, border-color .3s ease !important; }
.hi-btn:hover,
.hi-btn-ghost:hover {
  background: var(--hi-accent) !important;
  color: #222 !important;
  border-color: var(--hi-accent) !important;
  box-shadow: 0 10px 24px rgba(191,169,122,.35);
}:root {
  --hi-bg: transparent;
  --hi-text: #ffffff;
  --hi-accent: #BFA97A;
  --hi-shadow: rgba(0,0,0,.25);
  --hi-border-neutral: rgba(255,255,255,0.32);
  --hi-border-neutral-hover: rgba(255,255,255,0.46);

}
.hi-btn{ background: transparent; border:1px solid var(--hi-accent); color:#fff; font-weight:800; padding:12px 16px; border-radius:14px; cursor:pointer; transition: transform .15s, box-shadow .25s, background .2s, color .2s; box-shadow:none; white-space:nowrap; }.hi-btn:hover{ background: var(--hi-accent); color:#222; box-shadow: 0 10px 24px rgba(191,169,122,.35); }
.hi-modal-backdrop{ position: fixed; inset:0; background: rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:10000; opacity:0; transition: opacity .25s ease; }.hi-modal-backdrop.open{ display:flex; opacity:1; }.hi-modal{ width: min(520px, 92vw); background: #222; color:#fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 24px; transform: translateY(10px) scale(.98); transition: transform .25s ease; }.hi-modal-backdrop.open .hi-modal{ transform: translateY(0) scale(1); }.hi-modal h3{ margin:0 0 12px; font-size:22px; }.hi-modal p{ margin:0 0 16px; opacity:.8; }.hi-btn-ghost{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:10px 14px; cursor:pointer; }.hi-toast{ position: fixed; left:50%; bottom:24px; transform: translateX(-50%); background:#222; color:#fff; border:1px solid rgba(255,255,255,.12); padding:10px 14px; border-radius:12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition: opacity .25s ease; z-index:10001; }.hi-toast.show{ opacity:1; }button:hover:not(.pswp__button),
.hi-btn:hover,
.hi-btn-ghost:hover,

.hi-actions .hi-btn:hover,
.hi-actions .hi-btn-ghost:hover {
  background: var(--hi-accent) !important;
  color: #222 !important;
  border-color: var(--hi-accent) !important;
  box-shadow: 0 10px 24px rgba(191,169,122,.35);
  transition: all .25s ease !important;
}.hi-btn{
  display: inline-block;
  border: 1px solid #BFA97A;
  border-radius: 12px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  transition: all 0.35s ease;
  box-shadow: none;
  text-shadow: none;
}.hi-btn:hover{
  background: #BFA97A;
  color: #000;
  border-color: #BFA97A;
  text-shadow: 0 0 10px rgba(191,169,122,0.9), 0 0 22px rgba(191,169,122,0.75);
  box-shadow: 0 0 18px rgba(191,169,122,0.6), 0 0 36px rgba(191,169,122,0.4);
  transform: translateY(-1px);
}.hi-btn{
  border-radius: 12px;
}[data-hi-call],
[data-hi-call].hi-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;          
  padding-block: var(--hi-hdr-btn-py, 10px) !important;     
  border-radius: 12px !important;     
  box-sizing: border-box !important;
}[data-hi-call]:hover,
[data-hi-call].hi-btn:hover{
  background: #BFA97A !important;
  color: #000 !important;
  border-color: #BFA97A !important;
  box-shadow: 0 0 18px rgba(191,169,122,0.7), 0 0 36px rgba(191,169,122,0.45) !important;
  transform: translateY(-1px);
}
:root{
  --hi-bg:#0f0f10;
  --hi-surface:#171718;
  --hi-text:#E8E3D4;
  --hi-text-dim:#CFC8B5;
  --hi-gold:#BFA97A;
  --hi-gold-bright:#CFB88C;
}body.project-hero-fullscreen-page.header-visible #hero::before{
  opacity:1;
}@media (max-width: 900px){
body.project-hero-fullscreen-page.header-visible #hero::before{
    background: linear-gradient(to bottom, rgba(0,0,0,.66) 0%, rgba(0,0,0,.92) 100%) !important;
  }
}










@media (min-width: 901px){
body.project-hero-fullscreen-page.header-visible #hero::before{
    background: linear-gradient(to bottom, rgba(0,0,0,.66) 0%, rgba(0,0,0,.92) 100%) !important;
  }
}

:root{--project-page-bg:#0a0a0a;--bg:var(--project-page-bg);--hi-bg:var(--project-page-bg);}








@media (max-width: 900px){
:root{
    
    --hi-mob-ctl: clamp(36px, 10vw, 42px);
    --hi-mob-ctl-r: clamp(10px, 3vw, 12px);
    --hi-mob-gap: clamp(8px, 2.8vw, 12px);
    --hi-mob-pad-x: clamp(10px, 3.2vw, 12px);
    --hi-mob-pad-y: clamp(8px, 2.4vw, 10px);
    --hi-mob-logo-h: 34px;
  }
}


@media (max-width: 414px){
:root{ --hi-mob-logo-h: clamp(30px, 8vw, 32px) !important; }
}



/* ---- source: hi-shared-ui.css ---- */
/* Auto-extracted shared CSS for HomeInterior */

/* Mobile: floating burger must not create a top gap and must stay visible on scroll */




.hi-form-success{display:none;margin-top:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(191,169,122,.25);} 
.hi-form-success-title{font-weight:800;margin:0 0 6px;}
.hi-form-success-text{margin:0;}
#hi-form.is-success .hi-field{display:none;}
#hi-form.is-success .hi-contact-consent,
#hi-form.is-success .hi-privacy-consent,
#hi-form.is-success .hi-privacy-error,
#hi-form.is-success label:has(input[name="privacy_consent"]){display:none!important;}
#hi-form.is-success .hi-actions button[type="submit"]{display:none;}
#hi-form.is-success .hi-form-success{display:block;}
#hi-form.is-success .hi-actions{justify-content:center;}

.hi-modal.is-success > h3,
.hi-modal.is-success > p,
#hi-modal.is-success .hi-modal > h3,
#hi-modal.is-success .hi-modal > p{display:none;}



/* v14: unify modal form layout (inputs full width, actions right) across all pages */
.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; }





/* === v7-services-frame-wider-desktop === */
@media (min-width: 1024px){
  #services .hi-services-main{
    width:100% !important;
    max-width:min(1500px, calc(100vw - 64px)) !important;
  }
}


/* === prices-modal-personalization-v20260412 === */
.hi-modal-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}
.hi-modal-package-icon{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(191,169,122,.10);
  border:1px solid rgba(191,169,122,.34);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 22px rgba(191,169,122,.10);
}
.hi-modal-package-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:var(--hi-accent, #BFA97A);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hi-modal-copy{
  min-width:0;
  flex:1 1 auto;
}
.hi-modal-copy h3{
  margin:0 0 8px;
}
.hi-modal-copy p{
  margin:0;
  opacity:.82;
}
#hi-modal.is-success .hi-modal .hi-modal-head,
.hi-modal.is-success .hi-modal-head{
  display:none;
}
@media (max-width: 640px){
  .hi-modal-head{
    gap:12px;
    margin-bottom:16px;
  }
  .hi-modal-package-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    flex-basis:48px;
  }
}


/* === portfolio-showcase-slider-v20260625f === */
#portfolio .portfolio-showcase{
  width:100%;
  max-width:min(1460px, calc(100vw - 96px));
  margin:16px auto 0;
  position:relative;
  background:transparent;
}
#portfolio .portfolio-showcase__viewport{
  position:relative;
  overflow:visible;
  width:100%;
  height:min(75vh, 810px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:72px;
  box-sizing:border-box;
  background:transparent;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  -ms-touch-action:pan-y;
}
#portfolio .portfolio-showcase__track{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  transform:translate3d(0,0,0);
  transition:none;
  will-change:transform;
}
#portfolio .portfolio-showcase__image--prev,
#portfolio .portfolio-showcase__image--next{
  display:none;
}

#portfolio .portfolio-showcase__cta-wrap{
  display:flex;
  justify-content:center;
  margin-top:18px;
}
#portfolio .portfolio-showcase__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:248px;
  min-height:52px;
  padding:14px 28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,.94);
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  text-decoration:none;
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 10px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(255,255,255,0.12);
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease, opacity .25s ease, transform .25s ease;
}
#portfolio .portfolio-showcase__cta:hover,
#portfolio .portfolio-showcase__cta:focus-visible{
  background:#2e2e2e;
  border-color:rgba(191,169,122,.34);
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.07), 0 0 18px rgba(191,169,122,.10);
  transform:translateY(-1px);
  outline:none;
}
#portfolio .portfolio-showcase__cta.is-disabled{
  opacity:.52;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
}
#portfolio .portfolio-showcase__backdrop,
#portfolio .portfolio-showcase__viewport::after{
  display:none;
}
#portfolio .portfolio-showcase__image{
  position:relative;
  z-index:1;
  display:block;
  cursor:inherit;
  -webkit-user-drag:none;
  width:auto;
  height:auto;
  max-width:calc(100% - 144px);
  max-height:100%;
  object-fit:contain;
  object-position:center;
  transition:opacity .32s ease;
  background:transparent;
}
#portfolio .portfolio-showcase.is-switching .portfolio-showcase__image{
  opacity:.35;
}
#portfolio .portfolio-showcase__image--preview{
  display:none;
}
#portfolio .portfolio-showcase.is-swipe-locked .portfolio-showcase__viewport{
  cursor:grabbing;
  touch-action:pan-y;
  -ms-touch-action:pan-y;
  overscroll-behavior-y:auto;
}
#portfolio .portfolio-showcase__nav{
  position:absolute;
  top:50%;
  z-index:2;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(3,3,3,.66);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease, opacity .25s ease;
}
#portfolio .portfolio-showcase__nav span{
  display:block;
  font-size:34px;
  line-height:1;
  transform:translateY(-1px);
}
#portfolio .portfolio-showcase__nav:hover,
#portfolio .portfolio-showcase__nav:focus-visible,
#portfolio .portfolio-showcase__nav.is-key-active{
  background:rgba(191,169,122,.92);
  border-color:rgba(191,169,122,.96);
  color:#080808;
  box-shadow:0 0 18px rgba(191,169,122,.34);
  outline:none;
}
#portfolio .portfolio-showcase__nav--prev{ left:0; }
#portfolio .portfolio-showcase__nav--next{ right:0; }
#portfolio .portfolio-showcase__meta{
  position:absolute;
  right:0;
  bottom:18px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(3,3,3,.66);
  border:1px solid rgba(255,255,255,.12);
}
#portfolio .portfolio-showcase__counter{
  color:#fff;
  font-size:14px;
  line-height:1;
  letter-spacing:.03em;
}
#portfolio .portfolio-tabs{
  margin-top:72px;
  transform:translateY(-10px);
}
@media (max-width: 900px){
  #portfolio .portfolio-showcase{
    width:100vw;
    max-width:none;
    margin:22px calc(50% - 50vw) 0;
  }
  #portfolio .portfolio-showcase__viewport{
    display:grid;
    grid-template-columns:12px 46px 8px 46px minmax(2px,1fr) minmax(160px,184px) minmax(2px,1fr) auto 12px;
    grid-template-areas:
      "image image image image image image image image image"
      ". prev . next . cta . meta .";
    row-gap:14px;
    align-items:center;
    height:auto;
    aspect-ratio:auto;
    padding-inline:0;
    border-radius:0;
    box-sizing:border-box;
    overflow:hidden;
    touch-action:auto;
    -ms-touch-action:auto;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
  }
  #portfolio .portfolio-showcase__track{
    grid-area:image;
    position:relative;
    z-index:1;
    display:flex;
    align-items:stretch;
    justify-content:flex-start;
    width:100%;
    height:auto;
    min-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overflow-anchor:none;
    scroll-snap-type:x mandatory;
    scroll-behavior:auto;
    scroll-padding-inline:0;
    overscroll-behavior-x:contain;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    -ms-touch-action:pan-y;
    scrollbar-width:none;
    transform:none;
    transition:none;
    will-change:auto;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  #portfolio .portfolio-showcase__track::-webkit-scrollbar{
    display:none;
  }
  #portfolio .portfolio-showcase__image--prev,
  #portfolio .portfolio-showcase__image--current,
  #portfolio .portfolio-showcase__image--next{
    display:block;
  }

  #portfolio .portfolio-showcase__image{
    grid-area:auto;
    flex:0 0 100%;
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    scroll-snap-align:center;
    scroll-snap-stop:always;
    transform:translate3d(0,0,0);
    will-change:auto;
    backface-visibility:hidden;
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
  }
  #portfolio .portfolio-showcase__image--preview{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    max-height:none;
    opacity:1;
    pointer-events:none;
    transform:translate3d(100%,0,0);
  }
  #portfolio .portfolio-showcase:not(.is-swipe-dragging):not(.is-swipe-animating) .portfolio-showcase__image--preview:not(.is-active){
    display:none;
  }
  #portfolio .portfolio-showcase.is-swipe-dragging .portfolio-showcase__track,
  #portfolio .portfolio-showcase.is-swipe-animating .portfolio-showcase__track{
    transition:none !important;
  }
  #portfolio .portfolio-showcase.is-swipe-dragging .portfolio-showcase__track,
  #portfolio .portfolio-showcase.is-swipe-animating .portfolio-showcase__track,
  #portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__track{
    scroll-snap-type:none;
    scroll-behavior:auto !important;
    -webkit-overflow-scrolling:auto;
  }
  #portfolio .portfolio-showcase__nav{
    position:static;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    transform:none;
    width:46px;
    height:46px;
  }
  #portfolio .portfolio-showcase__nav--prev{ grid-area:prev; }
  #portfolio .portfolio-showcase__nav--next{ grid-area:next; }
  #portfolio .portfolio-showcase__nav span{
    font-size:30px;
  }
  #portfolio .portfolio-showcase__meta{
    position:static;
    grid-area:meta;
    justify-self:end;
    right:auto;
    bottom:auto;
    padding:10px 12px;
  }
  #portfolio .portfolio-tabs{
    width:min(520px, calc(100% - 44px));
    max-width:min(520px, calc(100% - 44px));
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
  }
  #portfolio .portfolio-showcase__cta-wrap{
    grid-area:cta;
    justify-self:center;
    align-self:center;
    width:auto;
    max-width:none;
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  #portfolio .portfolio-showcase__cta{
    display:inline-flex;
    width:100%;
    max-width:184px;
    min-width:160px;
    min-height:46px;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(3,3,3,.34);
    color:#fff;
    font-size:13px;
    font-weight:600;
    line-height:1;
    letter-spacing:0;
    white-space:nowrap;
    box-sizing:border-box;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
  }
  #portfolio .portfolio-showcase__cta:hover,
  #portfolio .portfolio-showcase__cta:focus{
    background:rgba(3,3,3,.66);
    border-color:rgba(255,255,255,.14);
    color:#fff;
    box-shadow:none;
    transform:none;
    outline:none;
  }
  #portfolio .portfolio-showcase__cta:active,
  #portfolio .portfolio-showcase__cta:focus-visible{
    background:rgba(191,169,122,.92);
    border-color:rgba(191,169,122,.96);
    color:#080808;
    box-shadow:0 0 18px rgba(191,169,122,.34);
    transform:none;
    outline:none;
  }
  #portfolio .portfolio-tabs{
    margin-top:70px;
    transform:translateY(-10px);
  }
  #portfolio .portfolio-tab{
    font-size:13px;
    padding-inline:11px;
  }
}
@media (max-width: 560px){
  #portfolio .portfolio-showcase__counter{
    font-size:14px;
  }
}


/* === hi-index-reviews-from-design-v01 ===
   Owner: index.html, блок #reviews.
   Источник: раздел отзывов со страницы design-interiera-samara.html. */
#reviews.hi-index-reviews{
  padding:56px 0 72px !important;
  scroll-margin-top:120px !important;
}
#reviews.hi-index-reviews .wrap{
  width:min(90%,1320px) !important;
  max-width:1320px !important;
}
#reviews .hi-proof-intro{
  max-width:900px !important;
  margin:0 auto 24px !important;
  text-align:center !important;
}
#reviews .hi-proof-intro .section-title{
  margin-bottom:16px !important;
}
#reviews .hi-proof-main,
#reviews .hi-proof-stat,
#reviews .hi-proof-review-card,
#reviews .hi-proof-reviews-note{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.24) !important;
}
#reviews .hi-proof-main,
#reviews .hi-proof-stat{
  border-radius:24px !important;
}
#reviews .hi-proof-main::before,
#reviews .hi-proof-stat::before{
  content:"" !important;
  position:absolute !important;
  inset:0 0 auto !important;
  height:3px !important;
  background:linear-gradient(90deg,rgba(191,169,122,0),rgba(191,169,122,.95),rgba(191,169,122,0)) !important;
  opacity:.9 !important;
}
#reviews.design-section-proof .hi-proof-main{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  max-width:100% !important;
  gap:0 !important;
  margin-bottom:14px !important;
  padding:20px 26px !important;
}
#reviews .hi-proof-main-title{
  margin:0 0 12px !important;
  font-size:var(--hi-type-h3) !important;
  line-height:var(--hi-type-h3-line) !important;
  color:var(--hi-text,#E8E3D4) !important;
  font-weight:700 !important;
}
#reviews .hi-proof-main p:not(.hi-proof-main-title){
  max-width:980px !important;
  margin:0 !important;
  
}
#reviews .hi-proof-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  margin:0 0 18px !important;
}
#reviews .hi-proof-stat{
  min-height:148px !important;
  padding:22px !important;
}
#reviews .hi-proof-stat small{
  display:block !important;
  margin-bottom:10px !important;
  font-size:12px !important;
  letter-spacing:.08em !important;
  line-height:1.35 !important;
  text-transform:uppercase !important;
  color:var(--hi-text-dim,#CFC8B5) !important;
}
#reviews .hi-proof-stat strong{
  display:block !important;
  margin-bottom:6px !important;
  font-size:clamp(34px,4vw,46px) !important;
  line-height:1 !important;
  color:var(--hi-text,#E8E3D4) !important;
}
#reviews .hi-proof-stat p{
  margin:0 !important;
  color:var(--hi-text-dim,#CFC8B5) !important;
}
#reviews .hi-proof-reviews-block{
  margin-top:14px !important;
}
#reviews .hi-proof-reviews-block .hi-proof-reviews{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  margin:0 !important;
}
#reviews .hi-proof-reviews-block .hi-proof-review-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:148px !important;
  padding:16px 18px !important;
  border-radius:16px !important;
  border:1px solid rgba(191,169,122,.22) !important;
  background:rgba(255,255,255,.03) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.16) !important;
}
#reviews .hi-proof-reviews-block .hi-proof-review-card::before{
  content:none !important;
  display:none !important;
}
#reviews .hi-proof-reviews-block .hi-proof-review-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  margin-bottom:8px !important;
}
#reviews .hi-proof-reviews-block .hi-proof-review-top strong{
  max-width:calc(100% - 92px) !important;
  color:var(--hi-text,#E8E3D4) !important;
  font-size:16px !important;
  line-height:1.16 !important;
  font-weight:780 !important;
}
#reviews .hi-proof-reviews-block .hi-proof-review-top span{
  flex:0 0 auto !important;
  color:#d6bd7a !important;
  font-size:12.5px !important;
  line-height:1.1 !important;
  letter-spacing:1.2px !important;
  white-space:nowrap !important;
  text-shadow:0 0 10px rgba(214,189,122,.18) !important;
}
#reviews .hi-proof-reviews-block .hi-proof-review-card p{
  margin:0 !important;
  color:var(--hi-text-dim,#CFC8B5) !important;
  font-size:14.6px !important;
  line-height:1.34 !important;
}
#reviews .hi-proof-reviews-block .hi-proof-review-card small{
  display:block !important;
  margin-top:auto !important;
  padding-top:8px !important;
  color:rgba(207,200,181,.68) !important;
  font-size:12.5px !important;
  line-height:1.2 !important;
  letter-spacing:.01em !important;
}
#reviews .hi-proof-reviews-note{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin:14px 0 0 !important;
  padding:14px 18px !important;
  border-radius:16px !important;
  border:1px solid rgba(191,169,122,.22) !important;
  background:rgba(255,255,255,.03) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.16) !important;
}
#reviews .hi-proof-reviews-note span{
  color:rgba(207,200,181,.88) !important;
  font-size:14.5px !important;
  line-height:1.38 !important;
}
#reviews .hi-proof-reviews-note .btn-outline{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  min-height:48px !important;
  height:48px !important;
  padding:0 22px !important;
  border-radius:12px !important;
  border:1px solid rgba(191,169,122,.55) !important;
  background:rgba(0,0,0,.08) !important;
  color:rgba(255,255,255,.94) !important;
  font-family:var(--hi-font-sans) !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:750 !important;
  text-align:center !important;
  text-decoration:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03) !important;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
#reviews .hi-proof-reviews-note .btn-outline:hover,
#reviews .hi-proof-reviews-note .btn-outline:focus-visible{
  background:linear-gradient(180deg,#d9c38a,#bfa66d) !important;
  color:#121212 !important;
  border-color:rgba(217,195,138,.95) !important;
  box-shadow:0 0 0 1px rgba(217,195,138,.22), 0 0 22px rgba(217,195,138,.32), 0 14px 32px rgba(0,0,0,.38) !important;
  transform:translateY(-1px) !important;
}
@media (max-width:1180px){
  #reviews .hi-proof-stats,
  #reviews .hi-proof-reviews-block .hi-proof-reviews{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media (max-width:900px){
  #reviews.hi-index-reviews{
    padding:46px 0 60px !important;
    scroll-margin-top:var(--himob-h, 84px) !important;
  }
  #reviews .hi-proof-intro{
    text-align:center !important;
  }
}
@media (max-width:768px){
  #reviews .hi-proof-stats,
  #reviews .hi-proof-reviews-block .hi-proof-reviews{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  #reviews.design-section-proof .hi-proof-main{
    padding:18px 20px !important;
  }
  #reviews .hi-proof-stat{
    min-height:0 !important;
    padding:20px !important;
  }
  #reviews .hi-proof-reviews-block .hi-proof-review-card{
    min-height:0 !important;
    padding:16px !important;
  }
  #reviews .hi-proof-reviews-block .hi-proof-review-card p{
    font-size:15px !important;
    line-height:1.42 !important;
  }
  #reviews .hi-proof-reviews-block .hi-proof-review-top strong{
    max-width:none !important;
  }
  #reviews .hi-proof-reviews-note{
    flex-direction:column !important;
    align-items:stretch !important;
    padding:16px !important;
  }
  #reviews .hi-proof-reviews-note .btn-outline{
    width:100% !important;
  }
}


/* === hi-index-reviews-align-design-v03 === */
/* Owner: index.html, блок #reviews.
   Цель: привести ширину и рамки отзывов на главной к виду страницы design-interiera-samara. */
#reviews.hi-index-reviews{
  padding:64px 0 62px !important;
}
@media (min-width:901px){
  #reviews.hi-index-reviews .wrap{
    width:min(90%,1600px) !important;
    max-width:1600px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
#reviews .hi-proof-intro{
  margin:0 auto 44px !important;
}
#reviews .hi-proof-main,
#reviews .hi-proof-stat,
#reviews .hi-proof-review-card,
#reviews .hi-proof-reviews-note{
  border:1px solid rgba(191,169,122,.22) !important;
  background:rgba(255,255,255,.03) !important;
  background-image:none !important;
  box-shadow:0 8px 24px rgba(0,0,0,.16) !important;
}
#reviews .hi-proof-main,
#reviews .hi-proof-stat{
  border-radius:16px !important;
}
#reviews .hi-proof-main::before,
#reviews .hi-proof-stat::before{
  content:none !important;
  display:none !important;
}
#reviews .hi-proof-main-title{
  font-size:clamp(20px,1.55vw,24px) !important;
  line-height:1.28 !important;
  font-weight:750 !important;
}
#reviews .hi-proof-main p:not(.hi-proof-main-title){
  max-width:980px !important;
}
@media (max-width:900px){
  #reviews.hi-index-reviews{
    padding:54px 0 54px !important;
  }
  #reviews .hi-proof-intro{
    margin-bottom:36px !important;
  }
}


/* === hi-index-reviews-title-v04 ===
   Owner: index.html, блок #reviews.
   Цель: развести заголовок отзывов на главной и добавить такое же подчёркивание, как на странице design-interiera-samara. */
#reviews .hi-proof-intro .section-title{
  position:relative !important;
  display:table !important;
  width:auto !important;
  margin:0 auto !important;
  text-align:center !important;
  text-wrap:balance;
}
#reviews .hi-proof-intro .section-title::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:-10px !important;
  width:calc(100% + clamp(34px, 4.2vw, 76px)) !important;
  max-width:calc(100vw - 40px) !important;
  height:1px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(90deg,
    rgba(191,169,122,0) 0%,
    rgba(191,169,122,.62) 17%,
    rgba(191,169,122,.98) 50%,
    rgba(191,169,122,.62) 83%,
    rgba(191,169,122,0) 100%) !important;
  box-shadow:0 0 12px rgba(191,169,122,.46), 0 0 22px rgba(191,169,122,.16) !important;
  border-radius:2px !important;
}
@media (max-width:768px){
  #reviews .hi-proof-intro .section-title::after{
    width:calc(100% + 30px) !important;
    max-width:calc(100vw - 28px) !important;
  }
}


/* === hi-index-home-questions-v08 ===
   Owner: index.html, блок #home-questions.
   Цель: привести FAQ главной к виду FAQ на странице design-interiera-samara: одна колонка, центр, hover-подсветка плюса. */
#home-questions .hi-home-questions-head{
  max-width:1120px !important;
  margin:0 auto 38px !important;
}
#home-questions .hi-home-questions-head p{
  display:none !important;
}
#home-questions .hi-home-questions-list{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
  max-width:1120px !important;
  margin:0 auto !important;
}
#home-questions .hi-home-question{
  position:relative !important;
  overflow:hidden !important;
  min-width:0 !important;
  border:1px solid rgba(191,169,122,.20) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.025) !important;
  box-shadow:none !important;
  padding:0 !important;
  transition:border-color .22s ease, background-color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}
#home-questions .hi-home-question + .hi-home-question{
  margin-top:12px !important;
}
#home-questions .hi-home-question summary{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  min-height:66px !important;
  padding:20px 58px 20px 24px !important;
  font-size:clamp(17px,1.05vw,20px) !important;
  line-height:1.35 !important;
  font-weight:750 !important;
}
#home-questions .hi-home-question summary::after{
  right:22px !important;
  width:28px !important;
  height:28px !important;
  border:1px solid rgba(191,169,122,.42) !important;
  color:rgba(232,227,212,.92) !important;
  background:transparent !important;
  box-shadow:none !important;
  font-weight:400 !important;
  transition:background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease !important;
}
#home-questions .hi-home-question:hover,
#home-questions .hi-home-question[open]{
  border-color:rgba(191,169,122,.46) !important;
  background:rgba(191,169,122,.045) !important;
  box-shadow:0 0 20px rgba(191,169,122,.08), 0 14px 34px rgba(0,0,0,.22) !important;
}
#home-questions .hi-home-question:hover summary::after,
#home-questions .hi-home-question[open] summary::after{
  background:linear-gradient(180deg,#d9c38a,#bfa66d) !important;
  border-color:rgba(217,195,138,.95) !important;
  color:#111 !important;
  box-shadow:0 0 18px rgba(217,195,138,.22) !important;
}
#home-questions .hi-home-question-body{
  padding:0 24px 22px !important;
  border-top:1px solid rgba(191,169,122,.14) !important;
}
#home-questions .hi-home-question-body p{
  max-width:880px !important;
  margin:16px 0 0 !important;
  font-size:16px !important;
  line-height:1.72 !important;
}
@media (max-width:900px){
  #home-questions.hi-home-questions .wrap{
    width:min(100% - 28px, 1280px) !important;
  }
  #home-questions .hi-home-question summary{
    min-height:60px !important;
    padding:17px 52px 17px 18px !important;
    font-size:16px !important;
  }
  #home-questions .hi-home-question summary::after{
    right:16px !important;
    width:26px !important;
    height:26px !important;
    font-size:19px !important;
  }
  #home-questions .hi-home-question-body{
    padding:0 18px 18px !important;
  }
  #home-questions .hi-home-question-body p{
    font-size:15.5px !important;
    line-height:1.65 !important;
  }
}

/* === hi-index-home-questions-v09-fix ===
   Owner: index.html, блок #home-questions.
   Цель: вернуть подчёркивание H2 и видимый плюс с золотой заливкой при hover/open как на странице design-interiera-samara. */
#home-questions .hi-home-questions-head .section-title{
  position:relative !important;
  display:table !important;
  width:auto !important;
  margin:0 auto !important;
  text-align:center !important;
  text-wrap:balance !important;
}
#home-questions .hi-home-questions-head .section-title::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:-10px !important;
  width:calc(100% + clamp(34px, 4.2vw, 76px)) !important;
  max-width:calc(100vw - 40px) !important;
  height:1px !important;
  transform:translateX(-50%) !important;
  background:linear-gradient(90deg,
    rgba(191,169,122,0) 0%,
    rgba(191,169,122,.62) 17%,
    rgba(191,169,122,.98) 50%,
    rgba(191,169,122,.62) 83%,
    rgba(191,169,122,0) 100%) !important;
  box-shadow:0 0 12px rgba(191,169,122,.46), 0 0 22px rgba(191,169,122,.16) !important;
  border-radius:2px !important;
}
#home-questions .hi-home-question summary{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  list-style:none !important;
  cursor:pointer !important;
}
#home-questions .hi-home-question summary::-webkit-details-marker{
  display:none !important;
}
#home-questions .hi-home-question summary::after{
  content:"+" !important;
  position:absolute !important;
  right:22px !important;
  top:50% !important;
  width:28px !important;
  height:28px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translateY(-50%) !important;
  border-radius:50% !important;
  border:1px solid rgba(191,169,122,.42) !important;
  color:rgba(232,227,212,.92) !important;
  background:transparent !important;
  font-size:20px !important;
  line-height:1 !important;
  font-weight:400 !important;
  box-shadow:none !important;
  transition:background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease !important;
}
#home-questions .hi-home-question:hover summary::after,
#home-questions .hi-home-question[open] summary::after{
  background:linear-gradient(180deg,#d9c38a,#bfa66d) !important;
  border-color:rgba(217,195,138,.95) !important;
  color:#111 !important;
  box-shadow:0 0 18px rgba(217,195,138,.22) !important;
}
#home-questions .hi-home-question[open] summary::after{
  content:"−" !important;
}
@media (max-width:768px){
  #home-questions .hi-home-questions-head .section-title::after{
    width:calc(100% + 30px) !important;
    max-width:calc(100vw - 28px) !important;
  }
  #home-questions .hi-home-question summary::after{
    right:16px !important;
    width:26px !important;
    height:26px !important;
    font-size:19px !important;
  }
}


/* === hi-hero-cta-equal-width-v34 ===
   Owner: index.html / #home-intro .cta.
   Задача: внутри пары hero-кнопок сделать обе капсулы одинаковой ширины независимо от текста.
   v34: ПК оставлен как был; мобильные и планшеты до 900px сделаны уже. */
#home-intro .cta a.hi-hero-cta{
  flex:0 0 224px !important;
  width:224px !important;
  min-width:224px !important;
  max-width:224px !important;
  min-height:60px !important;
  font-size:16px !important;
  box-sizing:border-box !important;
}
@media (max-width:900px){
  #home-intro .cta a.hi-hero-cta{
    flex:0 1 300px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:300px !important;
  }
}


/* === hi-hero-prices-link-v15 ===
   Owner: index.html / #home-intro .home-lead .hi-hero-prices-link.
   Задача: спокойная ссылка-якорь к ценам внутри текстовой зоны hero, цвет в тон kicker. */
#home-intro .home-lead .hi-hero-prices-link{
  display:inline-block !important;
  margin:10px auto 0 !important;
  color:var(--hi-accent,#BFA97A) !important;
  opacity:.88 !important;
  font-family:inherit !important;
  font-size:1.06em !important;
  line-height:inherit !important;
  font-weight:inherit !important;
  letter-spacing:inherit !important;
  text-align:center !important;
  text-decoration-line:underline !important;
  text-decoration-thickness:1px !important;
  text-underline-offset:5px !important;
  text-decoration-color:currentColor !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
#home-intro .home-lead .hi-hero-prices-link:hover,
#home-intro .home-lead .hi-hero-prices-link:focus-visible{
  color:var(--hi-accent,#BFA97A) !important;
  opacity:1 !important;
  text-decoration-color:currentColor !important;
  outline:none !important;
}
@media (max-width:900px){
  #home-intro .home-lead .hi-hero-prices-link{
    margin-top:10px !important;
  }
}

/* === hi-hero-typography-unify-v35 ===
   Owner: index.html / #home-intro.
   Задача: единая типографика hero H1 и hero-подзаголовка на главной, design и remont.
   Тексты, SEO, Schema, FAQ, H2 и блоки ниже hero не трогались. */
#home-intro .wrap{
  width:min(90%,1600px) !important;
  max-width:1500px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:24px !important;
  padding-right:24px !important;
  box-sizing:border-box !important;
  text-align:center !important;
}
#home-intro .home-h1{
  max-width:1360px !important;
  margin:0 auto 14px !important;
}
#home-intro .home-lead{
  width:min(100%,1240px) !important;
  max-width:1240px !important;
  margin:0 auto 22px !important;
  text-align:center !important;
}
#home-intro .home-lead .home-lead-line{
  display:block !important;
  white-space:normal !important;
}
#home-intro .home-lead .home-lead-line + .home-lead-line{
  margin-top:0 !important;
}

#home-intro .cta{
  margin-top:14px !important;
}
@media (max-width:900px){
  #home-intro .wrap{
    width:min(96%,1600px) !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #home-intro .home-h1{
    width:100% !important;
    max-width:none !important;
    margin:0 auto 14px !important;
}
  #home-intro .home-lead{
    width:100% !important;
    max-width:none !important;
    margin:0 auto 22px !important;
}
}


/* === index-v15-mobile-portfolio-controls-row ===
   Owner: index.html / #portfolio mobile showcase controls.
   Задача: сместить кнопку «Подробнее о проекте» ближе к стрелкам и визуальному центру строки.
   Только мобильная версия; desktop, слайдер и JS не трогались. */
@media (max-width:900px){
  #portfolio .portfolio-showcase__viewport{
    grid-template-columns:12px 46px 8px 46px 8px minmax(150px,172px) minmax(2px,1fr) auto 12px !important;
    grid-template-areas:
      "image image image image image image image image image"
      ". prev . next . cta . meta ." !important;
  }
  #portfolio .portfolio-showcase__cta{
    width:100% !important;
    max-width:172px !important;
    min-width:150px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
}
@media (max-width:380px){
  #portfolio .portfolio-showcase__viewport{
    grid-template-columns:10px 44px 6px 44px 6px minmax(142px,148px) minmax(2px,1fr) auto 10px !important;
  }
  #portfolio .portfolio-showcase__nav{
    width:44px !important;
    height:44px !important;
  }
  #portfolio .portfolio-showcase__cta{
    max-width:148px !important;
    min-width:142px !important;
    font-size:12px !important;
  }
  #portfolio .portfolio-showcase__meta{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}

/* === v18-desktop-project-card-arrow-motion === */
/* v21: ПК — ещё мягче и медленнее поворот стрелки в проектных карточках. */
@media (min-width: 901px){
  #portfolio .project-cta-circle span{
    transition: transform .56s cubic-bezier(.22,.61,.36,1) !important;
  }
}


/* === v19-mobile-project-card-arrow-center-motion === */
/* v21: Mobile portfolio project cards — keep the CTA circle stable, center the arrow inside it, and slow/smooth the arrow rotation. */
@media (max-width: 900px){
  #portfolio .project-cta-circle{
    --cta-arrow-shift: 0px;
    --cta-arrow-nudge-x: 0px;
    --cta-arrow-center-y: 0px;
    --cta-arrow-active-y: 0px;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #portfolio .project-cta-circle.cta-in-caption.cta-abs,
  #portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle.cta-in-caption.cta-abs{
    transform:translateY(0) !important;
    transform-origin:50% 50% !important;
  }

  #portfolio .project-cta-circle span{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    height:100% !important;
    line-height:1 !important;
    transform-origin:50% 50% !important;
    transition:transform .56s cubic-bezier(.22,.61,.36,1) !important;
    transform:rotate(180deg) !important;
  }

  #portfolio .gallery-item:hover .project-cta-circle span,
  #portfolio .project-caption-link:hover .project-cta-circle span,
  #portfolio .gallery-item-inner.is-touching .project-cta-circle span,
  #portfolio .gallery-item-inner.is-touching + .project-caption-link .project-cta-circle span{
    transform:rotate(270deg) !important;
  }
}

/* === v20-desktop-project-card-arrow-center === */
/* v20: ПК — оптически центрируем стрелку внутри CTA-круга в проектных карточках. Mobile не трогаем. */
@media (min-width: 901px){
  #portfolio .project-cta-circle{
    --cta-arrow-shift: 0px;
  }
}

/* === v23-desktop-project-title-hover === */
/* v23: ПК — синхронная подсветка названия проекта при наведении на проектную карточку. */
@media (min-width: 901px){
  #portfolio .project-caption-title{
    transition:color .36s ease !important;
  }

  #portfolio .gallery-item:hover .project-caption-title,
  #portfolio .gallery-item:focus-within .project-caption-title,
  #portfolio .project-caption-link:hover .project-caption-title,
  #portfolio .project-caption-link:focus-within .project-caption-title{
    color:#bfa97a !important;
  }
}


/* === v28-mobile-hero-cta-font-balanced === */
/* v28: mobile only — balanced hero CTA text size; smaller than v27, still stronger than initial. */
@media (max-width: 900px){
  #home-intro .cta a.hi-hero-cta.btn-outline.sm{
    font-size:19px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}


/* === index-header-glow-hard-suppress-v13 ===
   Hard-disable both under-header glow layers in image-heavy home sections.
   Prevents iOS/Safari from leaving a residual golden strip after JS suppresses glow. */


body.project-hero-fullscreen-page.header-glow-suppressed #hero::before{
  opacity: 0 !important;
}

/* === hi-index-hero-responsive-contract-v07 ===
   Owner: index.html / #home-intro first screen.
   Цель: нормальная адаптация без подгонки под отдельный iPhone: компактный hero на 360–390,
   обычный mobile на 391–560, отдельная tablet-логика на 561–900, ПК не трогаем. */
@media (max-width:390px){
  body.project-hero-fullscreen-page#top #home-intro.home-intro{
    padding:28px 0 22px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .wrap{
    width:min(98%,1600px) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-kicker{
    margin-bottom:10px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-h1{
    margin-bottom:12px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-lead{
    width:100% !important;
    max-width:100% !important;
    margin-bottom:18px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-lead .home-lead-line + .home-lead-line{
    margin-top:3px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-lead .hi-hero-prices-link{
    margin-top:8px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .cta{
    gap:12px !important;
    margin-top:10px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .cta a.hi-hero-cta{
    flex:0 1 280px !important;
    width:100% !important;
    max-width:280px !important;
    min-width:0 !important;
    min-height:54px !important;
    font-size:18px !important;
    line-height:1.12 !important;
    padding:12px 18px !important;
  }
}
@media (min-width:391px) and (max-width:560px){
  body.project-hero-fullscreen-page#top #home-intro.home-intro{
    padding:32px 0 24px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .wrap{
    width:min(96%,1600px) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-kicker{
    margin-bottom:12px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-h1{
    margin-bottom:12px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-lead{
    width:100% !important;
    max-width:100% !important;
    margin-bottom:20px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-lead .home-lead-line + .home-lead-line{
    margin-top:3px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-lead .hi-hero-prices-link{
    margin-top:9px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .cta{
    gap:12px !important;
    margin-top:10px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .cta a.hi-hero-cta{
    flex:0 1 290px !important;
    width:100% !important;
    max-width:290px !important;
    min-width:0 !important;
    min-height:56px !important;
    font-size:18px !important;
    line-height:1.12 !important;
    padding:13px 18px !important;
  }
}
@media (min-width:561px) and (max-width:900px){
  body.project-hero-fullscreen-page#top #home-intro.home-intro{
    padding:36px 0 28px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .wrap{
    width:min(92%,1600px) !important;
    max-width:760px !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-h1{
    max-width:720px !important;
    margin-bottom:14px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .home-lead{
    max-width:720px !important;
    margin-bottom:20px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .cta{
    gap:18px !important;
    margin-top:10px !important;
  }
  body.project-hero-fullscreen-page#top #home-intro .cta a.hi-hero-cta{
    flex:0 0 280px !important;
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    min-height:56px !important;
    font-size:18px !important;
    line-height:1.12 !important;
    padding:13px 18px !important;
  }
}


/* === hi-a51-header-footer-v31 ===
   Owner: css/index/hi-index-shell-ui.css.
   Samsung A51-class only: slightly larger mobile logo and safer footer copy fit.
   Does not affect SE <=390 or 430px+ / Pro Max. */
@media (min-width: 391px) and (max-width: 414px){
  :root{
    --hi-mob-logo-h: 34px !important;
  }
  
}


/* === v09-mobile-portfolio-film-scrubber ===
   Owner: mobile portfolio showcase.
   Compact in rest; expands on touch and drives a smooth film-style preview. */
#portfolio .portfolio-showcase__scrubber{
  display:none;
}
@media (max-width:900px){
  #portfolio .portfolio-showcase__scrubber{
    --hi-portfolio-progress:0;
    --hi-scrubber-control-width:min(80vw,350px);
    grid-area:image;
    position:relative;
    z-index:6;
    align-self:end;
    justify-self:center;
    display:block;
    width:calc(100vw - 12px);
    max-width:none;
    height:46px;
    margin:0 0 8px;
    border:0;
    background:transparent;
    box-shadow:none;
    box-sizing:border-box;
    pointer-events:none;
    -webkit-tap-highlight-color:transparent;
  }
  #portfolio .portfolio-showcase__scrubber[hidden]{
    display:none !important;
  }
  #portfolio .portfolio-showcase__scrubber-rail{
    position:absolute;
    left:50%;
    top:50%;
    width:var(--hi-scrubber-control-width);
    height:2px;
    border-radius:999px;
    background:rgba(255,255,255,.28);
    box-shadow:0 1px 5px rgba(0,0,0,.28);
    transform:translate(-50%,-50%);
    transform-origin:center;
    transition:width .20s cubic-bezier(.22,.72,.25,1), height .18s ease, background-color .18s ease, box-shadow .18s ease;
    pointer-events:none;
  }
  #portfolio .portfolio-showcase__scrubber-fill{
    position:absolute;
    inset:0 auto 0 0;
    width:calc(var(--hi-portfolio-progress) * 100%);
    border-radius:inherit;
    background:linear-gradient(90deg,rgba(191,169,122,.62),rgba(214,190,145,1));
    box-shadow:0 0 7px rgba(191,169,122,.28);
  }
  #portfolio .portfolio-showcase__scrubber-thumb{
    position:absolute;
    left:calc(var(--hi-portfolio-progress) * 100%);
    top:50%;
    width:10px;
    height:10px;
    border:2px solid rgba(12,12,12,.80);
    border-radius:50%;
    background:#d2bb8e;
    box-shadow:0 0 0 2px rgba(191,169,122,.16),0 2px 8px rgba(0,0,0,.32);
    transform:translate(-50%,-50%);
    box-sizing:border-box;
    transition:width .18s ease,height .18s ease,box-shadow .18s ease,transform .18s ease;
  }
  #portfolio .portfolio-showcase__scrubber-value{
    position:absolute;
    left:clamp(18px,calc(var(--hi-portfolio-progress) * 100%),calc(100% - 18px));
    bottom:10px;
    min-width:28px;
    height:22px;
    padding:0 6px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(12,12,12,.54);
    box-shadow:0 5px 14px rgba(0,0,0,.20);
    color:rgba(255,255,255,.94);
    font:500 11px/20px Arial,sans-serif;
    text-align:center;
    white-space:nowrap;
    opacity:0;
    transform:translate(-50%,5px) scale(.94);
    transition:opacity .15s ease,transform .18s ease;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
  }
  #portfolio .portfolio-showcase__scrubber-input{
    position:absolute;
    z-index:2;
    left:50%;
    top:0;
    width:var(--hi-scrubber-control-width);
    height:100%;
    margin:0;
    padding:0;
    border:0;
    opacity:0;
    cursor:ew-resize;
    pointer-events:auto;
    touch-action:none;
    transform:translateX(-50%);
    transition:width .20s cubic-bezier(.22,.72,.25,1);
    -webkit-appearance:none;
    appearance:none;
  }
  #portfolio .portfolio-showcase__scrubber-input::-webkit-slider-runnable-track{
    width:100%;
    height:100%;
    background:transparent;
    border:0;
  }
  #portfolio .portfolio-showcase__scrubber-input::-webkit-slider-thumb{
    width:34px;
    height:44px;
    margin:0;
    border:0;
    background:transparent;
    -webkit-appearance:none;
    appearance:none;
  }
  #portfolio .portfolio-showcase__scrubber-input::-moz-range-track{
    width:100%;
    height:100%;
    background:transparent;
    border:0;
  }
  #portfolio .portfolio-showcase__scrubber-input::-moz-range-thumb{
    width:34px;
    height:44px;
    border:0;
    background:transparent;
  }
  #portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber{
    --hi-scrubber-control-width:100%;
  }
  #portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber-rail{
    height:3px;
    background:rgba(255,255,255,.34);
    box-shadow:0 2px 9px rgba(0,0,0,.30),0 0 13px rgba(191,169,122,.10);
  }
  #portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber-thumb{
    width:14px;
    height:14px;
    box-shadow:0 0 0 3px rgba(191,169,122,.18),0 0 13px rgba(191,169,122,.30),0 3px 9px rgba(0,0,0,.34);
  }
  #portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber-value{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
  #portfolio .portfolio-showcase__scrubber:focus-within .portfolio-showcase__scrubber-rail{
    background:rgba(255,255,255,.34);
  }
}
@media (max-width:380px){
  #portfolio .portfolio-showcase__scrubber{
    --hi-scrubber-control-width:min(82vw,318px);
    width:calc(100vw - 10px);
    margin-bottom:7px;
  }
  #portfolio .portfolio-showcase.is-scrubbing .portfolio-showcase__scrubber{
    --hi-scrubber-control-width:100%;
  }
}