/* UmkaPro graphite + gold theme — 2026-07-26 */
:root{
  --bg:#202326!important;
  --bg-soft:#25292d!important;
  --panel:#2b3034!important;
  --panel-2:#31373c!important;
  --text:#f4f4f2!important;
  --muted:#aeb5ba!important;
  --line:#434b51!important;
  --accent:#d7a544!important;
  --accent2:#e4ba6a!important;
  --gold:#d7a544!important;
  --shadow:0 24px 70px rgba(0,0,0,.30)!important;
}
html,body{background:#202326!important;color:var(--text)!important}
body{
  background:
    radial-gradient(1100px 720px at 16% 2%,rgba(215,165,68,.13),transparent 58%),
    radial-gradient(900px 640px at 88% 12%,rgba(228,186,106,.07),transparent 58%),
    linear-gradient(180deg,#25292d 0%,#202326 48%,#1c1f22 100%)!important;
}
main{background:transparent!important}
.top,.topbar{
  background:rgba(31,35,38,.93)!important;
  border-bottom-color:#3f474c!important;
  box-shadow:0 12px 34px rgba(0,0,0,.18)!important;
}
.drawer__panel,.nav__submenu{
  background:rgba(39,44,48,.985)!important;
  border-color:#4a5359!important;
}
.drawer__nav>a,.drawer__details>summary,.nav__submenu a:hover{
  background:#2c3236!important;
  border-color:#465057!important;
}
.language-switch,.header-quicklink,.iconbtn,.hamb,.btn--ghost,.btn--quiet,.ghost-btn{
  background:#2a2f33!important;
  border-color:#4b555b!important;
  color:#f4f4f2!important;
}
.btn--accent,.btn-primary,.primary-btn,.fab--accent,.floating-cta a.primary,.umka-messenger__button{
  background:linear-gradient(135deg,#e5bb67 0%,#d7a544 58%,#b9832d 100%)!important;
  border-color:rgba(215,165,68,.55)!important;
  color:#17130d!important;
  box-shadow:0 15px 38px rgba(215,165,68,.18),0 7px 20px rgba(0,0,0,.24)!important;
}
.btn--accent:hover,.btn-primary:hover,.primary-btn:hover,.umka-messenger__button:hover{
  filter:brightness(1.06)!important;
  box-shadow:0 20px 48px rgba(215,165,68,.24),0 9px 24px rgba(0,0,0,.28)!important;
}
.umka-messenger__icon{background:rgba(28,31,34,.18)!important;color:#17130d!important}
.umka-messenger__title,.umka-messenger__subtitle{color:#17130d!important}
.umka-messenger__menu{background:#2b3034!important;border-color:#4b555b!important}
.umka-messenger__menu a:hover{background:rgba(215,165,68,.18)!important}

.hero,.home-premium-v5 .hero,body.service-detail-v7 .hero,.case-hero{
  background:#23272a!important;
  border-color:#41494f!important;
}
.hero::after,body.service-detail-v7 .hero::after{
  background:linear-gradient(180deg,rgba(31,34,37,.15),rgba(31,34,37,.88) 76%)!important;
}
.hero-video-bg::after,.hero-bg-overlay{
  background:linear-gradient(90deg,rgba(29,32,35,.88),rgba(29,32,35,.46) 48%,rgba(29,32,35,.30))!important;
}
.visual,.visual__top,.hero__proof,.hero__proof-item,.service-hero-fact,.services-hero__fact,.en-hero-proof{
  background:linear-gradient(145deg,rgba(49,55,60,.96),rgba(39,44,48,.96))!important;
  border-color:#4a545b!important;
}
.kpi,.hero__proof-item,.badge,.pill,.tag,.stepnum,.mini-kpi{
  background:#2c3236!important;
  border-color:#4b555b!important;
}
.pill b,.stepnum,.eyebrow,.tag--accent,.mini-kpi,.service-tile__num,.umka-arch-card__num,
.install-card__kicker,.case-modal__eyebrow,.price-band__price,.format-label{
  color:#d7a544!important;
}

section,.section,.related,.faq,.service-flow-v7,.service-detail-v7,.section--alt{
  border-color:#41494f!important;
}
.section--alt,.service-flow-v7,.related,.faq,.case-section,.page-service main>section:nth-of-type(even),.en-page main>section:nth-of-type(even){
  background:#25292d!important;
}
.home-page main>section:nth-of-type(odd),.page-service main>section:nth-of-type(odd),.en-page main>section:nth-of-type(odd){
  background:#202326!important;
}
.home-page main>section:nth-of-type(even){background:#25292d!important}

.card,.cta,.faq,.faq__item,.visual,.kpi,.service-card,.service-card-premium,.service-tile,
.install-card,.turnkey-item,.turnkey-band,.design-feature,.design-result,.design-step,.design-doc,
.price-factor,.price-step,.price-band,.price-insight__panel,.price-saving,.mini-card-v6,.info-card-v6,
.proof-card,.umka-arch-card,.service-next-v7__card,.service-flow-v7__panel,.case-gallery-card,
.case-summary,.case-hero__box,.savant-gallery__item,.knx-gallery__item,.shchity-gallery__item,
.shot,.wide-card,.wifi-mini-card,.design-package-card,.quiz-q,.quiz-opt,.service-tile--compact,
.process-step,.price-table__row,.en-photo-proof,.umka-premium-band,.umka-proof-strip,.umka-proof-main{
  background:linear-gradient(145deg,#2e3438,#272c30)!important;
  border-color:#454e54!important;
  box-shadow:0 16px 42px rgba(0,0,0,.18)!important;
}
.card:hover,.service-card:hover,.service-tile:hover,.install-card:hover,.case-gallery-card:hover{
  border-color:#8b672d!important;
  box-shadow:0 18px 46px rgba(0,0,0,.22),0 0 0 1px rgba(215,165,68,.10)!important;
}
.card__inner,.install-card__body,.case-gallery-card__caption{background:transparent!important}
.install-card__media,.shot--photo,.case-modal__media,.case-modal__media img,.savant-gallery__item--contain img{
  background:#23272a!important;
}
.install-card__kicker,.tag--accent{
  background:rgba(215,165,68,.11)!important;
  border-color:rgba(215,165,68,.30)!important;
}

input,select,textarea,.field input,.field select,.field textarea{
  background:#24292d!important;
  border-color:#4a545b!important;
  color:#f4f4f2!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#9b7837!important;
  box-shadow:0 0 0 3px rgba(215,165,68,.12)!important;
}
input::placeholder,textarea::placeholder{color:#8f989e!important}

.qa,.faq__item{border-color:#454e54!important}
.chev{background:#2d3337!important;border-color:#4a545b!important}
.qa.open .chev{border-color:rgba(215,165,68,.46)!important}
.q,.faq__q{color:#f4f4f2!important}
.a p,.faq__a p,.lead,.small,.muted,.sectionhead p,.card p,.card li{color:#aeb5ba!important}

.case-modal{background:rgba(24,27,30,.82)!important}
.case-modal__dialog{background:linear-gradient(180deg,#30363a,#272c30)!important;border-color:#4b555b!important}
.case-modal__close,.case-modal__nav button{background:#2b3034!important;border-color:#4a545b!important}

footer,.footer{
  background:#191c1f!important;
  border-top-color:#3f474c!important;
}
.fab,.floating-cta a{
  background:rgba(42,47,51,.94)!important;
  border-color:#4b555b!important;
}
.fab:hover{border-color:rgba(215,165,68,.55)!important}

/* replace all former neon-orange interaction glow with restrained gold */
.u-cursor__dot{background:rgba(215,165,68,.96)!important;box-shadow:0 0 10px rgba(215,165,68,.72),0 0 22px rgba(215,165,68,.30)!important}
.u-cursor__ring{border-color:rgba(215,165,68,.42)!important;box-shadow:0 0 16px rgba(215,165,68,.18)!important}
.u-cursor.is-hover .u-cursor__ring,.u-cursor.is-magnet .u-cursor__ring{border-color:rgba(215,165,68,.82)!important;box-shadow:0 0 28px rgba(215,165,68,.28),0 0 58px rgba(215,165,68,.12)!important}
.u-cursor__trail{background:rgba(215,165,68,.55)!important;box-shadow:0 0 10px rgba(215,165,68,.24)!important}

@media(max-width:900px){
  .home-page .topbar,.page-service .topbar,.en-page .topbar,.home-page .top,.page-service .top{
    background:rgba(31,35,38,.97)!important;
  }
  .drawer__panel{background:#272c30!important}
  .drawer__nav>a,.drawer__details>summary{background:#2d3337!important}
}


/* UmkaPro graphite + gold v2 — explicit header and contact form correction */
:root{
  --umka-graphite-header:#34393d;
  --umka-graphite-panel:#30353a;
  --umka-graphite-panel-2:#292e32;
  --umka-graphite-field:#24292d;
  --umka-graphite-line:#535d63;
  --umka-gold:#d7a544;
  --umka-gold-light:#e4ba6a;
}

/* The header had its own hard-coded almost-black background. */
html body .topbar,
html body .top,
html body.home-page .topbar,
html body.page-service .topbar,
html body.en-page .topbar,
html body .topbar#top{
  background:rgba(52,57,61,.97)!important;
  background-color:#34393d!important;
  border-bottom:1px solid #555f65!important;
  box-shadow:0 12px 34px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}
html body .topbar .topbar__row,
html body .top .toprow{
  background:transparent!important;
}
html body .topbar .nav a:hover,
html body .topbar .nav__summary:hover{
  background:#41474c!important;
}
html body .topbar .iconbtn,
html body .topbar .header-quicklink,
html body .topbar .hamb{
  background:#2d3236!important;
  border-color:#59636a!important;
}
html body .nav__submenu{
  background:#343a3f!important;
  border-color:#59636a!important;
  box-shadow:0 20px 54px rgba(0,0,0,.34)!important;
}
html body .nav__submenu a:hover{
  background:#41484d!important;
}

/* Contact area: remove the legacy orange glow and make it graphite. */
html body #contact{
  background:#262b2f!important;
  border-color:#444d53!important;
}
html body #contact .contact,
html body #contact .contact.reveal,
html body .contact.reveal{
  background:linear-gradient(145deg,#353b40 0%,#2d3236 56%,#292e32 100%)!important;
  border:1px solid #535d63!important;
  box-shadow:0 22px 58px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html body #contact .contact::before,
html body #contact .contact::after{
  background:none!important;
  box-shadow:none!important;
}
html body #contact form,
html body #contact #leadForm{
  background:#2b3034!important;
  border:1px solid #505a60!important;
  border-radius:20px!important;
  padding:20px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html body #contact .field{
  background:transparent!important;
}
html body #contact label,
html body #contact .small,
html body #contact .hint{
  color:#b9c0c4!important;
}
html body #contact input:not([type="checkbox"]),
html body #contact textarea,
html body #contact select{
  background:#24292d!important;
  background-color:#24292d!important;
  border:1px solid #566067!important;
  color:#f4f4f2!important;
  box-shadow:none!important;
}
html body #contact input:not([type="checkbox"]):focus,
html body #contact textarea:focus,
html body #contact select:focus{
  border-color:#a9833d!important;
  box-shadow:0 0 0 4px rgba(215,165,68,.12)!important;
}
html body #contact input[type="checkbox"]{
  accent-color:#d7a544!important;
}
html body #contact .formrow .btn:not(.btn--accent){
  background:#343a3f!important;
  border-color:#59636a!important;
  color:#f4f4f2!important;
}
html body #contact .formrow .btn--accent,
html body #contact button[type="submit"]{
  background:linear-gradient(135deg,#e4ba6a 0%,#d7a544 58%,#b8832d 100%)!important;
  border-color:rgba(215,165,68,.65)!important;
  color:#17130d!important;
}

/* The short calculator form uses the same visual language. */
html body .quiz-section{
  background:#24292d!important;
}
html body .quiz-form{
  background:#2b3034!important;
  border:1px solid #505a60!important;
  border-radius:20px!important;
  padding:20px!important;
}
html body .quiz-q,
html body .quiz-opt{
  background:#30363a!important;
  border-color:#535d63!important;
}
html body .quiz-opt:has(input:checked){
  border-color:#a9833d!important;
  background:rgba(215,165,68,.12)!important;
}
html body .quiz-form input[type="radio"]{
  accent-color:#d7a544!important;
}

/* Remaining hard-coded orange accents. */
html body .design-note,
html body .design-warning{
  background:rgba(215,165,68,.10)!important;
  border-color:rgba(215,165,68,.34)!important;
}
html body .design-step::before{
  background:#d7a544!important;
  color:#17130d!important;
}
html body .service-next-v7__card small{
  color:#d7a544!important;
}

@media(max-width:900px){
  html body .topbar,
  html body .top,
  html body.home-page .topbar,
  html body.page-service .topbar,
  html body.en-page .topbar{
    background:#34393d!important;
  }
  html body .drawer__panel{
    background:#30363a!important;
    border-color:#535d63!important;
  }
  html body #contact form,
  html body #contact #leadForm{
    padding:16px!important;
    border-radius:17px!important;
  }
}