/* Balkan Home Pros - static site styles */
:root{
  --navy:#0b1f3a; --navy2:#122c4f; --navy3:#1b3a63;
  --red:#d7263d; --red2:#b01e31;
  --paper:#f6f3ec; --ink:#16233a; --muted:#5b6b85;
  --line:rgba(11,31,58,.12);
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.05}
h2{font-size:clamp(1.9rem,4vw,3rem)}
p{margin:0;line-height:1.65}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sec{padding:84px 0}
.sec.paper{background:var(--paper)}
.sec.navy{background:var(--navy);color:#fff}
.sec:not(.paper):not(.navy){background:#fff}
.sec-head{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-end;margin-top:14px}
.sec-head p{max-width:430px;color:var(--muted)}
.sec.navy .sec-head p{color:rgba(255,255,255,.72)}
.kicker{font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;margin:0 0 10px;color:var(--muted)}
.kicker.red{color:var(--red)}
.kicker.light{color:rgba(255,255,255,.5)}
.white{color:#fff}

/* buttons */
.btn-red,.btn-white,.btn-ghost,.btn-navy,.btn-back{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;font:inherit;font-weight:800;border-radius:999px;
  padding:12px 26px;transition:transform .18s ease,background .2s ease,box-shadow .2s ease;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(215,38,61,.32)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{transform:translateY(-2px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover:not(:disabled){background:var(--navy3)}
.btn-navy:disabled{opacity:.4;cursor:not-allowed}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.34);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-back{background:transparent;border:2px solid var(--line);color:var(--ink)}
.btn-back:hover{border-color:var(--navy)}
.big{padding:15px 32px;font-size:1rem}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .3s ease,box-shadow .3s ease}
.nav.solid{background:rgba(11,31,58,.96);box-shadow:0 6px 26px rgba(0,0,0,.22);backdrop-filter:blur(8px)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:22px}
.brand img{height:42px;width:auto}
.nav-links{display:flex;gap:22px;margin-left:8px}
.nav-links a{color:rgba(255,255,255,.82);font-weight:600;font-size:.92rem;transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-call{display:flex;align-items:center;gap:7px;color:#fff;font-weight:800;font-size:.92rem}
.nav-cta{padding:10px 20px;font-size:.9rem}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:999px;padding:8px 13px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.lang-btn:hover{background:rgba(255,255,255,.2)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:14px;
  box-shadow:0 18px 44px rgba(11,31,58,.24);padding:6px;min-width:168px;display:none;overflow:hidden}
.lang-menu.open{display:block;animation:pop .18s ease}
.lang-opt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:10px 12px;border-radius:9px;font:inherit;font-weight:600;cursor:pointer;text-align:left}
.lang-opt:hover{background:var(--paper)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:23px;height:2.5px;background:#fff;border-radius:2px;transition:.25s}
.mobile-menu{display:none;flex-direction:column;background:var(--navy);padding:10px 20px 22px;gap:2px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:rgba(255,255,255,.85);font-weight:700;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mm-cta{color:var(--red)!important;border-bottom:0!important}

/* hero */
.hero{position:relative;min-height:96vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.hero-img{position:absolute;inset:0;width:100%;height:118%;object-fit:cover;will-change:transform}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(8deg,rgba(11,31,58,.96) 6%,rgba(11,31,58,.62) 42%,rgba(11,31,58,.12) 82%)}
.hero-copy{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 20px 92px;width:100%;color:#fff}
.hero h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--red)}
.hero-sub{margin-top:20px;max-width:520px;font-size:1.06rem;color:rgba(255,255,255,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.build{opacity:0;transform:translateY(22px);animation:rise .85s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.27s}.d4{animation-delay:.38s}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* trust */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust-in{max-width:var(--wrap);margin:0 auto;padding:26px 20px;display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.trust-in div{display:flex;flex-direction:column;gap:3px}
.trust-in strong{font-size:.95rem;font-weight:800}
.trust-in span{font-size:.83rem;color:var(--muted)}

/* marquee */
.marquee-wrap{background:var(--navy);padding:30px 0 34px;border-bottom:1px solid rgba(255,255,255,.08)}
.marquee-title{text-align:center;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:22px}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;flex-shrink:0;align-items:center;gap:52px;padding-right:52px;min-width:100%;animation:scroll 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.brand{white-space:nowrap;font-weight:800;font-size:1.14rem;color:rgba(255,255,255,.5);transition:color .2s}
.brand:hover{color:#fff}

/* services */
.svc-grid{display:grid;gap:18px;grid-template-columns:repeat(4,1fr);margin-top:38px}
.svc-card{grid-column:span 1;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);
  transition:transform .28s ease,box-shadow .28s ease;display:flex;flex-direction:column}
.svc-card.wide{grid-column:span 2}
.svc-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(11,31,58,.16)}
.svc-card img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .5s ease}
.svc-card:hover img{transform:scale(1.07)}
.svc-body{padding:20px}
.svc-body h3{font-size:1.18rem}
.svc-body p{margin-top:7px;font-size:.9rem;color:var(--muted)}
.svc-go{display:inline-block;margin-top:13px;font-weight:800;font-size:.85rem;color:var(--red)}
.svc-card:hover .svc-go{text-decoration:underline}

/* process */
.steps{display:grid;gap:26px;grid-template-columns:repeat(4,1fr);margin-top:42px}
.step-n{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--red);color:#fff;font-weight:900;margin-bottom:14px}
.step h3{font-size:1.1rem;color:#fff}
.step p{margin-top:8px;font-size:.92rem;color:rgba(255,255,255,.68)}

/* why */
.why{display:grid;gap:52px;grid-template-columns:1fr 1fr;align-items:center}
.why-img{position:relative;border-radius:20px;overflow:hidden}
.why-img img{aspect-ratio:4/3;object-fit:cover;width:100%}
.why-badge{position:absolute;left:20px;bottom:20px;background:var(--red);color:#fff;border-radius:16px;padding:14px 18px;max-width:190px}
.why-badge strong{display:block;font-size:1.7rem;font-weight:900}
.why-badge span{font-size:.76rem;font-weight:700;opacity:.9}
.why-copy p{margin-top:14px;color:var(--muted)}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:30px;font-weight:600}
.ticks li::before{content:"";position:absolute;left:0;top:5px;width:17px;height:17px;border-radius:50%;
  background:var(--red)}
.ticks li::after{content:"";position:absolute;left:5px;top:9.5px;width:6px;height:3px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* areas */
.areas{display:grid;gap:34px;grid-template-columns:1fr 1fr;margin-top:38px}
.areas h3{font-size:1.05rem;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:.86rem;font-weight:600}

/* reviews */
.revs{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);margin-top:38px}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.stars{color:var(--red);letter-spacing:2px;margin-bottom:12px}
.rev blockquote{margin:0;font-size:1rem;line-height:1.6}
.rev figcaption{margin-top:16px;display:flex;flex-direction:column}
.rev figcaption strong{font-weight:800}
.rev figcaption span{font-size:.83rem;color:var(--muted)}

/* work */
.work-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);margin-top:38px}
.work-tile{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--navy);
  opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.work-tile.in{opacity:1;transform:none}
.work-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.work-tile:hover img{transform:scale(1.1)}
.work-tile span{position:absolute;left:14px;bottom:12px;color:#fff;font-weight:800;font-size:.9rem;
  text-shadow:0 2px 10px rgba(0,0,0,.5)}
.work-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,31,58,.72),transparent 55%)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;background:#fff;margin-top:34px}
.stats div{padding:24px 12px;text-align:center;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats strong{display:block;font-size:2.1rem;font-weight:900;color:var(--navy)}
.stats span{font-size:.82rem;font-weight:600;color:var(--muted)}

/* cta band */
.cta-band{background:var(--red);color:#fff;padding:56px 0}
.cta-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:center}
.cta-in h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
.cta-in p{margin-top:9px;color:rgba(255,255,255,.88)}
.cta-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.cta-phone{font-weight:900;font-size:1.2rem;border-bottom:2px solid rgba(255,255,255,.5)}

/* service page */
.svc-hero{position:relative;min-height:66vh;display:flex;align-items:flex-end;background:var(--navy);overflow:hidden}
.svc-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(10deg,rgba(11,31,58,.95) 8%,rgba(11,31,58,.5) 48%,rgba(11,31,58,.1) 80%)}
.svc-hero-copy{position:relative;z-index:2;padding-bottom:56px;padding-top:150px;color:#fff}
.svc-hero h1{font-size:clamp(2.1rem,5vw,3.6rem);margin-top:12px}
.svc-hero-copy>p{margin-top:14px;max-width:560px;color:rgba(255,255,255,.8)}
.back{font-size:.88rem;font-weight:700;color:rgba(255,255,255,.7)}
.back:hover{color:#fff}
.svc-body-grid{display:grid;gap:44px;grid-template-columns:1.7fr 1fr;align-items:start}
.lede{font-size:1.08rem;color:var(--muted)}
.svc-body-grid h2{font-size:1.5rem;margin-top:34px}
.faqs{margin-top:16px;display:grid;gap:10px}
details{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 18px}
summary{font-weight:800;cursor:pointer}
details p{margin-top:9px;color:var(--muted);font-size:.94rem}
.svc-aside{display:grid;gap:16px;position:sticky;top:96px}
.aside-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.aside-card h3{font-size:1rem}
.timeline{margin-top:8px;font-size:1.3rem;font-weight:900;color:var(--red)}
.navy-card{background:var(--navy);color:#fff;border-color:transparent}
.navy-card p{margin:9px 0 16px;font-size:.9rem;color:rgba(255,255,255,.72)}
.navy-card .btn-red{width:100%}
.aside-phone{display:block;text-align:center;margin-top:11px;font-weight:800}
.aside-links{display:grid;gap:8px;margin-top:11px}
.aside-links a{font-size:.9rem;font-weight:600;color:var(--muted)}
.aside-links a:hover{color:var(--red)}

/* estimate wizard */
.est-main{background:var(--navy);min-height:100vh;padding:0 20px 90px}
.est-head{max-width:720px;margin:0 auto;padding:132px 0 34px;text-align:center;color:#fff}
.est-head h1{font-size:clamp(2rem,4.6vw,3rem)}
.est-head p{margin-top:13px;color:rgba(255,255,255,.75)}
.wiz{max-width:760px;margin:0 auto;background:#fff;border-radius:22px;padding:30px}
.rails{display:flex;gap:9px}
.rails .rail{flex:1;display:flex;flex-direction:column;gap:7px}
.rails i{height:6px;border-radius:99px;background:var(--line);transition:background .3s}
.rails .rail.on i{background:var(--red)}
.rails span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rails .rail.on span{color:var(--navy)}
.step-pane{margin-top:30px;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step-pane h2{font-size:1.5rem}
.hint{margin-top:6px;font-size:.88rem;color:var(--muted)}
.opts{display:grid;gap:11px;margin-top:22px}
.opts.grid2{grid-template-columns:1fr 1fr}
.opt{position:relative;display:flex;align-items:center;gap:11px;background:#fff;border:2px solid var(--line);
  border-radius:14px;padding:13px 15px;font:inherit;font-weight:700;text-align:left;cursor:pointer;transition:.2s}
.opt:hover{border-color:var(--navy);transform:translateY(-1px)}
.opt.on{border-color:var(--red);background:#fff5f6}
.opt img{width:56px;height:42px;border-radius:9px;object-fit:cover}
.check{position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;background:var(--red);
  opacity:0;transform:scale(.5);transition:.2s cubic-bezier(.34,1.56,.64,1)}
.check::after{content:"";position:absolute;left:6px;top:5px;width:6px;height:3px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg)}
.opt.on .check{opacity:1;transform:scale(1)}
.fields{display:grid;gap:15px;margin-top:22px}
.fields.two,.fields .two{display:grid;gap:15px;grid-template-columns:1fr 1fr}
label{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:.88rem}
input,textarea{font:inherit;font-weight:500;border:2px solid var(--line);border-radius:12px;padding:12px 14px;
  outline:none;transition:border-color .2s;background:#fff;color:var(--ink)}
input:focus,textarea:focus{border-color:var(--navy)}
.err{margin-top:18px;background:#fff0f1;color:var(--red);border-radius:12px;padding:12px 15px;font-weight:700;font-size:.9rem}
.wiz-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:30px}
.wiz-foot .btn-navy,.wiz-foot .submit{margin-left:auto}
.submit{min-width:190px}
.wiz.done{text-align:center;padding:52px 30px}
.tick{width:64px;height:64px;border-radius:50%;background:var(--navy);color:#fff;font-size:1.9rem;
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.wiz.done p{margin:12px auto 22px;max-width:420px;color:var(--muted)}

/* footer */
.foot{background:var(--navy);color:#fff;padding:60px 0 0}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:0 20px 44px;display:grid;gap:34px;grid-template-columns:1.6fr 1fr 1fr 1fr}
.foot-brand img{height:44px;width:auto}
.foot-brand p{margin-top:15px;font-size:.9rem;color:rgba(255,255,255,.62);max-width:290px}
.foot-col h4{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.foot-col a{display:block;font-size:.9rem;color:rgba(255,255,255,.8);padding:5px 0}
.foot-col a:hover{color:var(--red)}
.foot-phone{font-size:1.12rem!important;font-weight:900}
.foot-small{font-size:.85rem;color:rgba(255,255,255,.55);margin-top:7px}
.foot-bar{border-top:1px solid rgba(255,255,255,.1);padding:20px;display:flex;justify-content:space-between;
  gap:12px;flex-wrap:wrap;max-width:var(--wrap);margin:0 auto;font-size:.82rem;color:rgba(255,255,255,.5)}

/* mobile sticky bar */
.mobile-bar{display:none;position:fixed;inset:auto 0 0;z-index:70;background:rgba(11,31,58,.97);
  padding:10px 12px;gap:10px;backdrop-filter:blur(8px)}
.mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;
  padding:13px;font-weight:800;font-size:.9rem}
.mb-call{background:rgba(255,255,255,.14);color:#fff}
.mb-cta{background:var(--red);color:#fff}

/* responsive */
@media(max-width:1000px){
  .svc-grid,.work-grid{grid-template-columns:1fr 1fr}
  .svc-card.wide{grid-column:span 2}
  .steps{grid-template-columns:1fr 1fr}
  .revs{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .svc-body-grid{grid-template-columns:1fr}
  .svc-aside{position:static}
  .foot-in{grid-template-columns:1fr 1fr}
  .trust-in{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .sec{padding:60px 0}
  .nav-links,.nav-call,.nav-cta{display:none}
  .burger{display:flex}
  .mobile-bar{display:flex}
  body{padding-bottom:70px}
  .areas{grid-template-columns:1fr}
  .opts.grid2,.fields.two,.fields .two{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;}
  .stats div{border-right:0;border-bottom:1px solid var(--line)}
  .foot-in{grid-template-columns:1fr}
  .wiz{padding:22px 18px}
  .hero{min-height:88vh}
  .hero-copy{padding-bottom:64px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .work-tile{opacity:1;transform:none}
}