/* Genesis Construction CMS — 2026 design refresh layer (loaded after construction.css).
   Conservative: respects the dark header/footer theme of construction.css,
   admin brand colors flow through --brand-primary / --brand-accent. */

/* Typography & rhythm */
.construction-front h1,.construction-front h2{letter-spacing:-.015em}
.construction-front .eyebrow{display:inline-flex;align-items:center;gap:10px}
.construction-front .eyebrow::before{content:'';width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--brand-accent,#D4A017),transparent)}

/* Header (keeps dark construction.css background) — subtle nav pills */
.construction-front .auto-header nav a{border-radius:999px;padding:8px 14px;transition:background .18s ease,color .18s ease}
.construction-front .auto-header nav a:hover{background:rgba(255,255,255,.08);color:#fff}

/* Buttons: soft lift + shadow (flat brand color, no gradient mixing of admin colors) */
.construction-front .btn{border-radius:12px;font-weight:800;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.construction-front .btn.primary{box-shadow:0 12px 26px -12px color-mix(in srgb,var(--brand-primary,#C8922A) 60%,transparent)}
.construction-front .btn.primary:hover{transform:translateY(-2px);filter:brightness(1.06)}
.construction-front .card-link,.construction-front .section-head a{display:inline-flex;align-items:center;gap:8px;transition:gap .18s ease}
.construction-front .card-link:hover,.construction-front .section-head a:hover{gap:12px}

/* Cards: unified radius, layered shadow, media zoom */
.construction-front .service-card,.construction-front .article-card,.construction-front .work-card,.construction-front .mini-card,.construction-front .how-grid article,.construction-front .service-detail-card{border-radius:20px;box-shadow:0 1px 2px rgba(16,24,32,.04),0 16px 40px -22px rgba(16,24,32,.18);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.construction-front .service-card:hover,.construction-front .article-card:hover,.construction-front .work-card:hover,.construction-front .mini-card:hover,.construction-front .how-grid article:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand-primary,#C8922A) 34%,transparent);box-shadow:0 1px 2px rgba(16,24,32,.04),0 24px 54px -24px rgba(16,24,32,.28)}
.construction-front .service-photo,.construction-front .service-image,.construction-front .work-media img,.construction-front .article-card>img,.construction-front .article-placeholder{border-radius:20px 20px 0 0}
.construction-front .service-card:hover .service-photo,.construction-front .article-card:hover>img,.construction-front .work-card:hover .work-media img{transform:scale(1.04)}
.construction-front .service-photo,.construction-front .article-card>img,.construction-front .work-media img{transition:transform .35s ease}
.construction-front .work-media,.construction-front .article-placeholder{overflow:hidden}

/* Hero: no extra overlay (construction.css overlay is enough) */
.construction-front .auto-open-card{border-radius:22px}

/* Problem grid */
.construction-front .problem-grid a{border-radius:18px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.construction-front .problem-grid a:hover{transform:translateY(-4px)}

/* Booking band: deep ink gradient with subtle brand tint */
.construction-front .booking-band{border-radius:26px;background:linear-gradient(135deg,#0c141d 0%,color-mix(in srgb,var(--brand-primary,#C8922A) 24%,#0c141d) 100%);box-shadow:0 30px 80px -30px rgba(7,18,29,.5)}
.construction-front .booking-band input,.construction-front .booking-band textarea,.construction-front .booking-band select{border-radius:12px;background:rgba(255,255,255,.97);transition:border-color .15s ease,box-shadow .15s ease}
.construction-front .booking-band input:focus,.construction-front .booking-band textarea:focus,.construction-front .booking-band select:focus{outline:none;border-color:var(--brand-accent,#D4A017);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent,#D4A017) 26%,transparent)}

/* Language pills: designed for the dark header (light border, light text) */
.construction-front .front-langs a{border-radius:8px;border:1px solid rgba(255,255,255,.18);transition:background .15s ease,color .15s ease,border-color .15s ease}
.construction-front .front-langs a:hover{border-color:var(--construction-gold,#D4A017);color:#fff;background:rgba(255,255,255,.08)}
.construction-front .front-langs a.active{background:var(--construction-gold,#D4A017);border-color:var(--construction-gold,#D4A017);color:#101820}
.construction-front .auto-header.nav-open .front-langs a{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.18)}
.construction-front .auto-header.nav-open .front-langs a.active{background:var(--construction-gold,#D4A017);border-color:var(--construction-gold,#D4A017);color:#101820}

/* How steps */
.construction-front .how-grid b{border-radius:14px}

/* Footer (light footer keeps dark text — construction.css forces white text for dark footers) */
.construction-front .auto-footer{border-top:0}
.construction-front .auto-footer:not(.auto-footer--dark){background:#f5f7f9;color:#17202a}
.construction-front .auto-footer:not(.auto-footer--dark) .footer-about b,
.construction-front .auto-footer:not(.auto-footer--dark) .footer-about h3,
.construction-front .auto-footer:not(.auto-footer--dark) .footer-contact b,
.construction-front .auto-footer:not(.auto-footer--dark) .footer-hours b,
.construction-front .auto-footer:not(.auto-footer--dark) .footer-company-name{color:#17202a}
.construction-front .auto-footer:not(.auto-footer--dark) .footer-about p,
.construction-front .auto-footer:not(.auto-footer--dark) .footer-contact p,
.construction-front .auto-footer:not(.auto-footer--dark) .footer-hours p,
.construction-front .auto-footer:not(.auto-footer--dark) .footer-idno{color:#5f6b73}
.construction-front .auto-footer:not(.auto-footer--dark) a{color:#9a7a10}
.construction-front .auto-footer:not(.auto-footer--dark) .product-credit{border-top-color:rgba(16,24,32,.12);color:#5f6b73}
.construction-front .auto-footer:not(.auto-footer--dark) .product-credit a{color:#17202a}
.construction-front .auto-footer:not(.auto-footer--dark) .footer-brand strong{color:#17202a}
.construction-front .auto-footer--dark a{transition:color .15s ease}
.construction-front .auto-footer--dark a:hover{color:#fff}

/* Inner pages */
.construction-front .inner-page-hero .back-link{transition:transform .18s ease}
.construction-front .inner-page-hero .back-link:hover{transform:translateX(-3px)}
.construction-front .service-detail-photo{border-radius:20px 20px 0 0}

/* Focus visibility */
.construction-front a:focus-visible,.construction-front button:focus-visible{outline:2px solid var(--brand-accent,#D4A017);outline-offset:2px;border-radius:6px}

/* Scrollbar (WebKit) */
.construction-front ::-webkit-scrollbar{width:10px;height:10px}
.construction-front ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--brand-primary,#C8922A) 45%,#c9d0d6);border-radius:999px;border:2px solid transparent;background-clip:content-box}

@media (prefers-reduced-motion:reduce){
  .construction-front *,.construction-front *::before,.construction-front *::after{transition:none!important;animation:none!important}
}

@media(max-width:900px){
  .construction-front .auto-header.nav-open nav{border-radius:0 0 20px 20px}
  .construction-front .mobile-action-bar{border-radius:18px 18px 0 0;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .construction-front .mobile-action-bar a{border-radius:12px}
}
/* Mobile: keep messenger FABs above the action bar */
@media(max-width:900px){
  .construction-front .floating-contacts{bottom:102px}
}

/* Mobile hero: long Cyrillic words must not clip at the right edge */
@media(max-width:900px){
  .construction-front .auto-hero{padding:38px 18px}
  .construction-front .auto-hero-copy{min-width:0;max-width:100%}
  .construction-front .auto-hero h1{font-size:clamp(30px,9vw,44px);letter-spacing:-1px;overflow-wrap:break-word}
  .construction-front .auto-hero p{font-size:16.5px}
}