/* Original template layout is defined in style.css. */
.header-logo img,.mobile-logo img{max-width:210px;height:auto}
.service-block ul{padding-left:20px;text-align:left}
.service-block li{margin-bottom:10px}
details{padding:20px 0;border-bottom:1px solid #ddd}
summary{cursor:pointer;font-weight:700;color:var(--title-color);font-size:20px}
details p{margin-top:16px}
[id]{scroll-margin-top:100px}
.vscost-calc .vs-btn{margin-top:16px}
/* Keep the decorative about image behind the copy and photo collage. */
.about--layout1{isolation:isolate}
.about--layout1 > .about-overlay{z-index:0;opacity:.08;pointer-events:none}
.about--layout1 > .container{position:relative;z-index:1}

/* Shared content rhythm, without changing the template's columns or imagery. */
main{--section-space:96px;--section-space-mobile:64px;--section-title-space:64px}
main > section.space-extra-bottom{padding-bottom:48px}
main > section[class="space-top space-extra-bottom"] + section[class="space-top space-extra-bottom"]{padding-top:48px}
main > .project--layout1 + .vsfaqs--layout1{padding-top:64px}
main > .blog--layout1 > .container > .space-extra-bottom:empty{display:none}

/* Text-only inner pages: adjacent blocks share one section gap. */
main > section[class="space-top space-extra-bottom"] > .container > h2{margin-bottom:24px}
main > section[class="space-top space-extra-bottom"] > .container > p{margin-bottom:20px}
main > section[class="space-top space-extra-bottom"] > .container > ul{margin-block:20px 28px}
main > section[class="space-top space-extra-bottom"] > .container > ul > li{margin-bottom:10px}
main > section[class="space-top space-extra-bottom"] > .container > :last-child{margin-bottom:0}
main .service-block > h3{margin-bottom:16px}
main .service-block > p{margin-bottom:20px}
main .service-block > ul{margin-bottom:24px}
main .service-block > ul > li:last-child{margin-bottom:0}
main .about--layout1 .sec-title{margin-bottom:24px}
main .about--layout1 .vs-counter{margin-top:12px}

@media(max-width:991px){
  main > section.space-extra-bottom{padding-bottom:32px}
  main > section[class="space-top space-extra-bottom"] + section[class="space-top space-extra-bottom"]{padding-top:32px}
  main > .project--layout1 + .vsfaqs--layout1{padding-top:48px}
  main .about--layout1 .img-box1{margin-bottom:40px}
  main > section[class="space-top space-extra-bottom"] > .container > h2{margin-bottom:20px}
}
img{height:auto}

/* Keep all quote-panel copy readable against its black background. */
.vscost-calc p{color:var(--white-color)}

/* Keep the hero navigation and call action on a single desktop row. */
@media(min-width:992px){
  .header-layout1 .menu-top > .row{flex-wrap:nowrap;gap:24px}
  .header-layout1 .menu-top > .row > :first-child{width:auto;flex:0 0 auto}
  .header-layout1 .menu-top > .row > :last-child{width:auto;flex:1;min-width:0}
  .header-layout1 .menu-top > .row > :last-child > .row{flex-wrap:nowrap;--bs-gutter-x:24px}
  .header-layout1 .main-menu > ul{display:flex;align-items:center;gap:clamp(12px,1.5vw,24px)}
  .header-layout1 .main-menu.menu-style1 > ul > li > a{padding:14px 0;margin:0;white-space:nowrap}
  .header-layout1 .header-btns{display:flex;align-items:center;flex-wrap:nowrap;gap:20px}
  .header-layout1 .header-btns .vs-btn{white-space:nowrap}
}
@media(min-width:992px) and (max-width:1199px){
  .header-layout1 .header-logo img{max-width:160px}
  .header-layout1 .menu-top > .row{gap:16px}
  .header-layout1 .menu-top > .row > :last-child > .row{--bs-gutter-x:16px}
  .header-layout1 .main-menu > ul{gap:12px}
  .header-layout1 .main-menu.menu-style1 > ul > li > a{font-size:14px}
  .header-layout1 .header-btns{gap:12px}
  .header-layout1 .header-btns svg{width:28px}
  .header-layout1 .header-btns .vs-btn{padding:18px 24px}
}

/* Desktop hamburger uses the same navigation drawer as the mobile trigger. */
.desktop-menu-toggle{border:0;cursor:pointer}
.desktop-menu-toggle:not(.icon-btn){padding:0;background:transparent;color:var(--theme-color)}
.desktop-menu-toggle:focus-visible{outline:2px solid var(--theme-color);outline-offset:4px}

/* Persistent WhatsApp contact, clear of the right-hand scroll control. */
.whatsapp-float{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:999;width:60px;height:60px;border-radius:50%;display:block;box-shadow:0 3px 12px #0003}
.whatsapp-float img{display:block;width:100%;height:100%;object-fit:contain}
.whatsapp-float:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #167c24}
@media(max-width:575px){.whatsapp-float{left:16px;width:54px;height:54px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

.footer-credits{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:12px 0 0;font-size:14px;text-transform:none}
.footer-credits a{color:var(--white-color);font-weight:600}
.footer-credits a:hover,.footer-credits a:focus-visible{color:var(--theme-color);text-decoration:underline}
@media(min-width:992px){.footer-credits{justify-content:flex-start}}

/* Article-only reading rhythm; existing site layout stays unchanged. */
.paint-guide{max-width:900px;margin-inline:auto}
.paint-guide section,.paint-guide nav{margin-top:40px}
.paint-guide h2{margin-bottom:20px}
.paint-guide h3{font-size:22px;margin-top:24px}
.paint-guide li{margin-bottom:10px}
.paint-guide figure{margin:28px 0}
.paint-guide figure img{width:100%;height:auto}
.paint-guide figcaption,.paint-guide__meta{font-size:14px;color:#595959}
.paint-guide figcaption{margin-top:8px}
.paint-guide__contact{display:inline-block;margin:16px}
.paint-guide-card{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin-bottom:24px}
.paint-guide table{min-width:540px}

.paint-guide .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.paint-guide table{width:100%;border-collapse:collapse;margin-block:16px}
.paint-guide th,.paint-guide td{padding:12px;border:1px solid #ddd;text-align:left;vertical-align:top}
.paint-guide thead{background:#f5f5f5}
.paint-guide caption{text-align:left;color:#595959}

/* Preserve the original homepage card image proportions with the new artwork. */
.blog--layout1 .blog-img__img{width:100%;aspect-ratio:551/432;object-fit:cover}