/* ===========================================================================
   SPANCO STORAGE SYSTEMS — base stylesheet
   ---------------------------------------------------------------------------
   Replaces the purchased theme's style_1.css (214 KB), icons.css (179 KB) and
   animate.css (81 KB) — about 474 KB removed.

   It targets the SAME class names the existing PHP templates already output, so
   no markup had to change and every JavaScript hook in active.js still binds:
   .main-menu-wrapper, .navigation/.cs-submenu/.cs-dropdown, .hero-slider-active
   and the other slick carousels, .popup-link/.popup-gallery, #hamburger,
   .mobile-nav, #mobile-menu, .grid (isotope), plus the inline handlers
   $('.catID') / #productEnquiry, ImageChange(), #contact_form and #newslatter.

   Still loaded alongside this file: bootstrap (grid + modal), slick,
   magnific-popup, metismenu, nice-select2, intl-tel-input.

   Palette sampled from designer/images/logo.png.
   =========================================================================== */

:root{
  /* theme tokens the original stylesheet exposed — kept so any inline or
     third-party rule still resolves */
  --pri:#c8484e;
  --sec:#3cb8f8;
  --dark:#1a3550;
  --text-color:#121417;
  --para-color:#5b6672;
  --text-light:#6b7682;

  --sp-ink:#121417;
  --sp-ink-2:#1a1e23;
  --sp-navy:#1f425d;
  --sp-crimson:#c8484e;
  --sp-crimson-dk:#a53b40;
  --sp-sky:#3cb8f8;
  --sp-mist:#f4f6f8;
  --sp-body:#5b6672;
  --sp-line:#e6eaee;
  --sp-line-dk:rgba(255,255,255,.11);
  --sp-r:12px;
  --sp-shadow:0 10px 30px rgba(18,20,23,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:"Poppins",system-ui,sans-serif;font-size:16px;line-height:1.75;
  color:var(--sp-body);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{color:var(--sp-crimson)}
ul,ol{margin:0;padding:0}
figure{margin:0}

h1,h2,h3,h4,h5,h6,.tt,.main-tt{
  margin:0 0 .5em;color:var(--sp-ink);font-weight:700;line-height:1.18;letter-spacing:-.02em}
h1{font-size:clamp(28px,3.8vw,44px)}
h2{font-size:clamp(25px,3.1vw,38px)}
h3{font-size:clamp(18px,1.6vw,22px)}
h4{font-size:17px}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* ---------- layout ---------- */
.section-padding{padding:84px 0}
.section-bg{background:var(--sp-mist)}
.theme-bg{background:var(--sp-ink);color:#fff}
.theme-bg h1,.theme-bg h2,.theme-bg h3,.theme-bg .tt{color:#fff}
.theme-bg p{color:#9aa7b4}
.mobile_hide{display:block}

/* ---------- section headings ---------- */
.section-title,.section-title-2,.head-sec,.heading-sec,.block-contents{position:relative;margin-bottom:34px}
.section-title .tt,.section-title-2 .tt,.head-sec .tt,.heading-sec .tt,.block-contents .tt,.main-tt{
  font-size:clamp(25px,3.1vw,38px);font-weight:700;color:var(--sp-ink);margin:0}
.section-title .tt span,.heading-sec .tt span,.main-tt span{color:var(--sp-crimson);font-style:normal}
.submain-tt,.sub-tt,.section-title > span,.section-title-2 > span{
  display:inline-block;font-size:13px;font-weight:600;color:var(--sp-crimson);margin-bottom:10px}
.section-title::before,.heading-sec::before,.head-sec::before{
  content:"";display:block;width:46px;height:3px;border-radius:2px;background:var(--sp-crimson);margin-bottom:18px}
.theme-bg .section-title .tt,.theme-bg .heading-sec .tt{color:#fff}
.textleft{text-align:left}

/* ---------- buttons ---------- */
.theme-btn,.cta-btn,.read-btn,.submit-btn,input[type=submit],button.theme-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--sp-crimson);color:#fff;border:1px solid transparent;cursor:pointer;
  padding:13px 26px;border-radius:9px;font:600 15px/1.2 "Poppins",sans-serif;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.theme-btn:hover,.cta-btn:hover,.read-btn:hover,.submit-btn:hover,input[type=submit]:hover{
  background:var(--sp-crimson-dk);color:#fff;transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(200,72,78,.25)}
.theme-btn:focus-visible,.cta-btn:focus-visible,.submit-btn:focus-visible{
  outline:2px solid var(--sp-sky);outline-offset:3px}
.read-btn{background:var(--sp-sky)}
.read-btn:hover{background:#1ea3ea}
.theme-btn.black,.theme-btn.theme-btn2{background:var(--sp-navy)}
.theme-btn.no-fil,.theme-btn.minimal-btn,.theme-btn.border-style{
  background:transparent;color:var(--sp-crimson);border-color:var(--sp-crimson)}
.theme-btn.no-fil:hover{background:var(--sp-crimson);color:#fff}
.theme-bg .theme-btn{background:#fff;color:var(--sp-crimson)}
.theme-bg .theme-btn:hover{background:#eef1f4;color:var(--sp-crimson-dk)}

/* ---------- header ---------- */
.header-wrapper{position:relative;z-index:50;background:#fff}
.header-wrapper .middle-bar{padding:14px 0}
.logo img{max-height:56px;width:auto;display:block}
.single-info-element{display:flex;align-items:center;gap:11px}
.single-info-element .icon{
  width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:11px;
  background:rgba(200,72,78,.09);color:var(--sp-crimson);font-size:17px}
.single-info-element .text .tt{font-size:12.5px;color:var(--sp-body);font-weight:500;margin:0 0 2px}
.single-info-element .text a{font-size:15.5px;font-weight:600;color:var(--sp-ink)}
.single-info-element .text a:hover{color:var(--sp-crimson)}
.header-btn .theme-btn{white-space:nowrap}

.main-menu-wrapper{background:var(--sp-navy)}
.main-menu-wrapper.stricky-fixed{
  position:fixed;top:0;left:0;right:0;z-index:999;
  box-shadow:0 6px 24px rgba(18,20,23,.18);animation:spanco-drop .28s ease}
@keyframes spanco-drop{from{transform:translateY(-100%)}to{transform:translateY(0)}}

.navigation{position:relative}
.navigation .navbar{padding:0}
.navigation .navbar button{
  background:transparent;border:0;color:#fff;font-size:22px;padding:12px 0;display:none}
.menu.main_header,.navigation .menu{
  display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.menu.main_header > li,.navigation .menu > li{position:relative}
.menu.main_header > li > a,.navigation .menu > li > a{
  display:inline-block;padding:16px 18px;color:#e9eff5;background:transparent;
  font-size:14.5px;font-weight:500;transition:background .16s ease,color .16s ease}
.menu.main_header > li > a:hover,.navigation .menu > li > a:hover,
.menu.main_header > li.active > a{background:rgba(255,255,255,.08);color:#fff}

/* The dropdown PANEL is ul.cs-dropdown; .cs-submenu is the <li> around it.
   Display is left to the theme/JS so open-close behaviour is untouched. */
.cs-dropdown{
  position:absolute;left:0;top:100%;min-width:250px;z-index:60;
  background:#fff;border:1px solid var(--sp-line);border-radius:10px;padding:8px;
  box-shadow:0 16px 44px rgba(18,20,23,.17);list-style:none}
.cs-dropdown li a{
  display:block;padding:9px 13px;border-radius:7px;font-size:14px;color:#33404d;
  transition:background .14s ease,color .14s ease}
.cs-dropdown li a:hover{background:var(--sp-mist);color:var(--sp-crimson)}
.menu-scroll .cs-dropdown{max-height:70vh;overflow-y:auto}

/* ---------- hero ---------- */
.hero-wrapper{position:relative;background:var(--sp-ink)}
.hero-wrapper .single-slide img{width:100%;display:block}
.transland-dots .slick-dots{position:absolute;bottom:24px;left:0;right:0;display:flex;
  justify-content:center;gap:8px;list-style:none;margin:0;padding:0}
.transland-dots .slick-dots li{width:26px;height:3px}
.transland-dots .slick-dots li button{
  width:26px;height:3px;padding:0;border:0;font-size:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .2s ease,width .2s ease}
.transland-dots .slick-dots li button:before{display:none}
.transland-dots .slick-dots li.slick-active button{background:var(--sp-crimson)}

/* ---------- cards: features / services / steps ---------- */
.single-features-box,.single-service-card,.single-work-steps,.g_col,.tx-bx{
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-r);
  padding:26px;height:100%;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.single-features-box:hover,.single-service-card:hover,.g_col:hover{
  border-color:var(--sp-crimson);transform:translateY(-3px);box-shadow:var(--sp-shadow)}
.fect-icon-bx,.single-features-box > .icon,.ic-bx,.single-work-steps .icon{
  width:54px;height:54px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(200,72,78,.09);color:var(--sp-crimson);border-radius:11px;font-size:23px}
.single-features-box .tt,.single-service-card .tt,.g_col .tt,.single-work-steps .tt{
  font-size:18px;font-weight:600;color:var(--sp-ink);margin-bottom:9px}
.single-features-box .tx,.single-features-box p,.g_col p,.single-work-steps p{
  font-size:14.5px;color:var(--sp-body);margin:0}
.single-features-box .img,.single-service-card .img,.img_bx{
  border-radius:10px;overflow:hidden;margin-bottom:18px;background:var(--sp-mist)}
.single-features-box .img img,.single-service-card .img img,.img_bx img{
  width:100%;height:190px;object-fit:cover;display:block;transition:transform .35s ease}
.single-features-box:hover .img img{transform:scale(1.04)}
.bt_bx{margin-top:16px}

/* ---------- inner page banner ---------- */
.page-banner-wrap{
  position:relative;background:var(--sp-navy);background-size:cover;background-position:center;
  padding:66px 0 58px}
.page-banner-wrap::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(18,20,23,.9),rgba(31,66,93,.78) 62%,rgba(31,66,93,.52))}
.page-banner-wrap .container{position:relative;z-index:2}
.page-heading h1,.page-heading .tt{
  color:#fff;margin:0;font-size:clamp(27px,3.6vw,42px);font-weight:700}

/* ---------- breadcrumbs ---------- */
.breadcrumb-wrapper{background:var(--sp-mist);border-bottom:1px solid var(--sp-line);padding:13px 0}
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;background:none;
  list-style:none;font-size:13.5px}
.breadcrumb-item{color:var(--sp-body)}
.breadcrumb-item a{color:var(--sp-body)}
.breadcrumb-item a:hover{color:var(--sp-crimson)}
.breadcrumb-item.active{color:var(--sp-ink);font-weight:600}
.breadcrumb-item + .breadcrumb-item::before{content:"/";color:#b6c0ca;padding-right:6px}

/* ---------- category / product ---------- */
.category_page{padding:72px 0}
.main-img,.detail_image,.product_right_image{
  border:1px solid var(--sp-line);border-radius:var(--sp-r);overflow:hidden;background:#fff}
.main-img img,.detail_image img,.product_right_image img{
  width:100%;height:auto;display:block;object-fit:contain}
.pr-li{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:14px 0 0;padding:0}
.pr-li li{
  border:1px solid var(--sp-line);border-radius:8px;overflow:hidden;cursor:pointer;
  width:74px;height:74px;background:#fff}
.pr-li li img{width:100%;height:100%;object-fit:cover;display:block}
.pr-li li:hover{border-color:var(--sp-crimson)}
.you_may{margin-top:54px;padding-top:40px;border-top:1px solid var(--sp-line)}
.zpx_right{padding-left:24px}

/* ---------- about / why choose ---------- */
.about-us-wrapper{padding:84px 0}
.about-img-gallery img,.about-img-center img,.multi-imgs img,.why-imgs img{
  border-radius:var(--sp-r);display:block;width:100%;height:auto}
.why-chose-us{background:var(--sp-ink);color:#fff}
.why-chose-us .tt,.why-chose-us h2,.why-chose-us h3{color:#fff}
.why-chose-us p,.why-tx{color:#9aa7b4}
.steel-year{
  background:var(--sp-crimson);color:#fff;border-radius:var(--sp-r);
  padding:26px;font-size:34px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.steel-year span,.steel-year small{display:block;font-size:15px;font-weight:500;
  color:rgba(255,255,255,.9);margin-top:6px;letter-spacing:0}

/* ---------- clients ---------- */
.client{display:grid;place-items:center;background:#fff;border:1px solid var(--sp-line);
  border-radius:10px;padding:16px;min-height:92px}
.client img{max-height:56px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .2s ease,opacity .2s ease}
.client:hover img{filter:none;opacity:1}

/* ---------- blog ---------- */
.blog-wrapper{padding:84px 0}
.single-news-box{background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-r);
  overflow:hidden;height:100%;transition:border-color .2s ease,box-shadow .2s ease}
.single-news-box:hover{border-color:var(--sp-crimson);box-shadow:var(--sp-shadow)}
.featured-thumb img{width:100%;height:210px;object-fit:cover;display:block}
.single-news-box .content,.single-news-box .contents{padding:22px}
.single-news-box .tt{font-size:17px;font-weight:600;color:var(--sp-ink);margin-bottom:10px}
.single-news-box .tt a{color:inherit}
.single-news-box .tt a:hover{color:var(--sp-crimson)}
.single-news-box p{color:var(--sp-body);font-size:14.5px}
.meta,.date,.author{font-size:13px;color:#8d99a6}
.meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}

/* ---------- contact / market ---------- */
.contact-bx,.con-bx,.market-bx{
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-r);padding:24px;height:100%}
.contact-bx .icon,.con-bx .icon{
  width:48px;height:48px;display:grid;place-items:center;border-radius:11px;margin-bottom:14px;
  background:rgba(60,184,248,.1);color:var(--sp-sky);font-size:19px}
.market-bx a{color:var(--sp-ink);font-size:14.5px}
.market-bx a:hover{color:var(--sp-crimson)}

/* ---------- forms ---------- */
.input-group2{margin-bottom:16px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
input[type=password],select,textarea{
  width:100%;background:#fff;border:1px solid var(--sp-line);border-radius:9px;
  padding:12px 14px;font:400 14.5px/1.5 "Poppins",sans-serif;color:var(--sp-ink);
  transition:border-color .16s ease,box-shadow .16s ease}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:var(--sp-crimson);box-shadow:0 0 0 3px rgba(200,72,78,.13)}
textarea{min-height:120px;resize:vertical}
label{display:block;font-size:13.5px;font-weight:600;color:var(--sp-ink);margin-bottom:6px}
label.error{color:var(--sp-crimson);font-size:12.5px;font-weight:500;margin-top:5px}
.recaptcha-small{transform:scale(.85);transform-origin:0 0}

/* ---------- footer ---------- */
footer,.footer-wrapper{background:var(--sp-ink);color:#8d9aa7;padding-top:62px}
footer .wid-title .tt,.single-footer-wid .wid-title,.wid-title .tt{
  color:#fff;font-size:15px;font-weight:600;margin-bottom:16px;letter-spacing:0}
.single-footer-wid ul{list-style:none;line-height:2.1}
.single-footer-wid a{color:#8d9aa7;font-size:14px}
.single-footer-wid a:hover{color:var(--sp-sky)}
.single-contact-info{display:flex;gap:11px;margin-bottom:14px}
.single-contact-info .icon{color:var(--sp-crimson);flex:0 0 auto;margin-top:3px}
.contact-info a,.contact-info .text{color:#c3ccd4;font-size:14px}
.social-links a{
  width:38px;height:38px;display:inline-grid;place-items:center;margin-right:8px;
  background:rgba(255,255,255,.07);border:1px solid var(--sp-line-dk);border-radius:9px;color:#c3ccd4;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.social-links a:hover{background:var(--sp-crimson);color:#fff;border-color:var(--sp-crimson)}
.newsletter_box input[type=text],.newsletter_box input[type=email]{
  background:rgba(255,255,255,.06);border-color:var(--sp-line-dk);color:#fff}
.newsletter_box input::placeholder{color:#7d8995}

/* ===========================================================================
   Icons — replaces icons.css (179 KB) with ~6 KB of CSS masks.

   Only the 20 glyphs the templates actually reference are defined. The markup
   is unchanged (<i class="fal fa-phone"></i> still works) because the mask is
   attached to the existing .fa-* class names.

   The shapes are drawn here rather than copied from a licensed icon set, so
   there is no font file, no webfont request and no licence to honour. Colour
   follows currentColor, so icons inherit whatever the surrounding rule sets.
   =========================================================================== */
i[class*="fa-"],span[class*="fa-"],i[class*="flaticon-"]{
  display:inline-block;width:1em;height:1em;vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
i[class*="fa-"]::before,span[class*="fa-"]::before{content:none}

.fa-phone,.fa-phone-volume{-webkit-mask-image:var(--i-phone);mask-image:var(--i-phone)}
.fa-envelope,.fa-envelope-open{-webkit-mask-image:var(--i-mail);mask-image:var(--i-mail)}
.fa-map-marker-alt{-webkit-mask-image:var(--i-pin);mask-image:var(--i-pin)}
.fa-user,.fa-user-headset{-webkit-mask-image:var(--i-user);mask-image:var(--i-user)}
.fa-star{-webkit-mask-image:var(--i-star);mask-image:var(--i-star)}
.fa-calendar-alt{-webkit-mask-image:var(--i-cal);mask-image:var(--i-cal)}
.fa-long-arrow-right{-webkit-mask-image:var(--i-arr);mask-image:var(--i-arr)}
.fa-long-arrow-left{-webkit-mask-image:var(--i-arr);mask-image:var(--i-arr);transform:rotate(180deg)}
.fa-shield-check{-webkit-mask-image:var(--i-shield);mask-image:var(--i-shield)}
.fa-shipping-timed,.fa-plane-departure{-webkit-mask-image:var(--i-truck);mask-image:var(--i-truck)}
.fa-sack-dollar{-webkit-mask-image:var(--i-tag);mask-image:var(--i-tag)}
.fa-facebook-f{-webkit-mask-image:var(--i-fb);mask-image:var(--i-fb)}
.fa-twitter{-webkit-mask-image:var(--i-tw);mask-image:var(--i-tw)}
.fa-instagram{-webkit-mask-image:var(--i-ig);mask-image:var(--i-ig)}
.fa-linkedin,.fa-linkedin-in{-webkit-mask-image:var(--i-li);mask-image:var(--i-li)}
.fa-youtube{-webkit-mask-image:var(--i-yt);mask-image:var(--i-yt)}

:root{
  --i-phone:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --i-mail:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E");
  --i-pin:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-user:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --i-star:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2 3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.8 21l1.2-6.9-5-4.9 6.9-1z'/%3E%3C/svg%3E");
  --i-cal:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --i-arr:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E");
  --i-shield:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --i-truck:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h12v10H1zM13 10h4l4 3v3h-8z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
  --i-tag:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 12 22l-9-9V3h10z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E");
  --i-fb:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M14 8h3V4h-3a5 5 0 0 0-5 5v2H6v4h3v9h4v-9h3l1-4h-4V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
  --i-tw:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M3 3h4.5l4.8 6.6L17.8 3H21l-7.1 8.1L21.4 21h-4.5l-5.1-7-6 7H2.6l7.6-8.7z'/%3E%3C/svg%3E");
  --i-ig:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17' cy='7' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
  --i-li:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4.5 3A2 2 0 1 0 4.5 7 2 2 0 0 0 4.5 3zM3 9h3v12H3zM9 9h3v1.7A3.6 3.6 0 0 1 15 9c3 0 4 2 4 4.7V21h-3v-6.6c0-1.6-.6-2.6-2-2.6s-2 1-2 2.6V21H9z'/%3E%3C/svg%3E");
  --i-yt:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M22.5 7.2a2.7 2.7 0 0 0-1.9-1.9C18.9 4.8 12 4.8 12 4.8s-6.9 0-8.6.5A2.7 2.7 0 0 0 1.5 7.2 28 28 0 0 0 1 12a28 28 0 0 0 .5 4.8 2.7 2.7 0 0 0 1.9 1.9c1.7.5 8.6.5 8.6.5s6.9 0 8.6-.5a2.7 2.7 0 0 0 1.9-1.9A28 28 0 0 0 23 12a28 28 0 0 0-.5-4.8zM9.8 15.3V8.7l5.7 3.3z'/%3E%3C/svg%3E");
}

/* ---------- WhatsApp / mail floating buttons ---------- */
.whatsapp-float,.mail-float{box-shadow:0 6px 18px rgba(18,20,23,.2)}

/* ---------- utilities the templates rely on ---------- */
.bg-cover{background-size:cover;background-position:center;background-repeat:no-repeat}
.img-responsive{max-width:100%;height:auto}
.theme-bg .tx,.theme-bg .text{color:#9aa7b4}

/* ---------- accessibility ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--sp-sky);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:1199px){
  .zpx_right{padding-left:0}
}
@media (max-width:991px){
  .section-padding,.about-us-wrapper,.blog-wrapper,.category_page{padding:56px 0}
  .page-banner-wrap{padding:46px 0 40px}
  .mobile_hide{display:none}
  .navigation .navbar button{display:inline-block}
  .navigation .menu{display:none;flex-direction:column;width:100%;
    background:var(--sp-navy);border-top:1px solid rgba(255,255,255,.1)}
  .navigation .menu > li{width:100%;border-bottom:1px solid rgba(255,255,255,.07)}
  .menu.main_header > li > a,.navigation .menu > li > a{display:block;padding:13px 4px}
  .cs-dropdown{position:static;box-shadow:none;border:0;border-radius:0;
    background:rgba(255,255,255,.04);padding:4px 0 8px 14px}
  .cs-dropdown li a{color:#cdd8e2}
  .cs-dropdown li a:hover{background:rgba(255,255,255,.08);color:#fff}
  .single-features-box,.single-service-card,.g_col,.tx-bx{padding:20px}
  .single-features-box .img img{height:168px}
}
@media (max-width:575px){
  .section-padding,.about-us-wrapper,.blog-wrapper,.category_page{padding:44px 0}
  .theme-btn,.cta-btn,.read-btn{width:100%;padding:13px 18px}
  .header-btn .theme-btn{width:auto}
  .featured-thumb img{height:188px}
  .steel-year{font-size:28px;padding:20px}
  .pr-li li{width:62px;height:62px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* ===========================================================================
   Components: specifications, FAQ, trust, homepage sections, reviews,
   quality / infrastructure pages, client wall.
   =========================================================================== */

.spanco-specs,
.spanco-faq,
.spanco-trust {
  /* tokens come from :root in spanco-base.css */
  --sp-accent: var(--sp-crimson);
  --sp-accent-cta: var(--sp-sky);
  --sp-muted: #7d8995;
  --sp-bg-soft: var(--sp-mist);
  font-family: "Poppins", sans-serif;
  padding: 56px 0;
}

.spanco-faq { background: var(--sp-bg-soft); }

.spanco-specs h2,
.spanco-faq h2,
.spanco-trust h2 {
  color: var(--sp-navy);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
}

.spanco-specs h3 {
  color: var(--sp-navy);
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 12px;
}

.spanco-specs__lead {
  color: var(--sp-muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 68ch;
  margin: 0 0 26px;
}

/* ---------- specification table ---------- */
.spanco-specs__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  overflow: hidden;
  font-size: 15px;
}

.spanco-specs__table th,
.spanco-specs__table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sp-line);
  line-height: 1.6;
}

.spanco-specs__table tbody tr:last-child th,
.spanco-specs__table tbody tr:last-child td { border-bottom: 0; }

.spanco-specs__table tbody th {
  width: 38%;
  color: var(--sp-navy);
  font-weight: 600;
  background: var(--sp-bg-soft);
}

.spanco-specs__table td { color: var(--sp-ink); }

.spanco-specs__table thead th {
  background: var(--sp-navy);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  border-bottom: 0;
}

.spanco-specs--compare .spanco-specs__table tbody th {
  width: auto;
  background: #fff;
}

.spanco-specs--compare .spanco-specs__table tbody th a {
  color: var(--sp-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(202, 71, 75, .3);
}

.spanco-specs--compare .spanco-specs__table tbody th a:hover {
  color: var(--sp-accent);
  border-bottom-color: var(--sp-accent);
}

.spanco-specs__options {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 22px;
}

.spanco-specs__options li {
  position: relative;
  padding-left: 26px;
  color: var(--sp-ink);
  font-size: 15px;
  line-height: 1.6;
}

.spanco-specs__options li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-accent);
}

/* ---------- FAQ accordion ----------
   The default <details> disclosure triangle sat above the heading because the
   <h3> inside <summary> is a block element. The summary is now a flex row with
   its native marker suppressed and a drawn chevron instead.                 */
.spanco-faq__list {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin-top: 26px;
}

.spanco-faq__item {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.spanco-faq__item[open] {
  border-color: rgba(202, 71, 75, .45);
  box-shadow: 0 2px 14px rgba(31, 66, 93, .07);
}

.spanco-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* suppress the native marker in every engine */
.spanco-faq__item > summary::-webkit-details-marker { display: none; }
.spanco-faq__item > summary::marker { content: ""; }

.spanco-faq__item > summary > h3 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--sp-navy);
}

.spanco-faq__item > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--sp-accent);
  border-bottom: 2px solid var(--sp-accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.spanco-faq__item[open] > summary::after { transform: rotate(-135deg); }

.spanco-faq__item > summary:hover > h3 { color: var(--sp-accent); }

.spanco-faq__item > summary:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: -2px;
}

.spanco-faq__answer {
  padding: 0 20px 20px;
  border-top: 1px solid var(--sp-line);
}

.spanco-faq__answer p {
  margin: 16px 0 0;
  color: var(--sp-ink);
  font-size: 15px;
  line-height: 1.75;
}

.spanco-faq__cta {
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--sp-muted);
}

.spanco-faq__cta a {
  color: var(--sp-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(202, 71, 75, .35);
}

.spanco-faq__cta a:hover { color: var(--sp-accent); border-bottom-color: var(--sp-accent); }

/* ---------- trust band ---------- */
.spanco-trust { background: var(--sp-navy); color: #fff; }
.spanco-trust h2 { color: #fff; margin-bottom: 28px; }

.spanco-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}

.spanco-trust__item {
  /* The brand crimson scores only 2.26 against this navy, so the rule would
     read as a dark smudge. The CTA blue is already in the brand palette and
     clears 4.9 on the same background. */
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-left: 3px solid var(--sp-accent-cta);
  border-radius: 8px;
  padding: 20px;
}

.spanco-trust__item strong {
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 6px;
}

.spanco-trust__item span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.spanco-trust__legal {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .7);
}

/* ---------- accessibility helper ---------- */
.spanco-specs .sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 767px) {
  .spanco-specs, .spanco-faq, .spanco-trust { padding: 40px 0; }

  /* stack the two-column spec rows so long values are not squeezed */
  .spanco-specs__table tbody,
  .spanco-specs__table tbody tr,
  .spanco-specs__table tbody th,
  .spanco-specs__table tbody td { display: block; width: 100%; }

  .spanco-specs__table tbody th {
    border-bottom: 0;
    padding-bottom: 4px;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--sp-muted);
    background: #fff;
  }

  .spanco-specs__table tbody td { padding-top: 0; }

  /* the hub comparison keeps its columns but scrolls horizontally */
  .spanco-specs--compare .table-responsive { overflow-x: auto; }
  .spanco-specs--compare .spanco-specs__table { min-width: 620px; }
  .spanco-specs--compare .spanco-specs__table tbody,
  .spanco-specs--compare .spanco-specs__table tbody tr,
  .spanco-specs--compare .spanco-specs__table tbody th,
  .spanco-specs--compare .spanco-specs__table tbody td { display: revert; width: auto; }

  .spanco-faq__item > summary { padding: 15px 16px; }
  .spanco-faq__item > summary > h3 { font-size: 15px; }
  .spanco-faq__answer { padding: 0 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .spanco-faq__item,
  .spanco-faq__item > summary::after { transition: none; }
}

/* ===========================================================================
   Structural homepage sections (app_sections.php)
   Uses the tokens declared at :root above. No new tokens, no second system.
   All classes are spanco- prefixed so none collide with the hooks active.js
   binds to (.grid/isotope, slick, magnific-popup, metisMenu, .mobile-nav).
   =========================================================================== */

/* ---------- credential plinth + stats ---------- */
.spanco-plinth{
  background:var(--sp-ink);padding:0 0 52px;position:relative;font-family:"Poppins",sans-serif}
/* the one bold move: the hero's lower edge cuts away as an angled steel plane,
   echoing the diagonal shapes already present in Spanco's banner artwork */
.spanco-plinth::before{
  content:"";position:absolute;top:-46px;left:0;right:0;height:46px;background:var(--sp-ink);
  clip-path:polygon(0 100%,100% 0,100% 100%)}

.spanco-cred{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:10px;
  list-style:none;margin:0;padding:0}
.spanco-cred li{
  display:inline-flex;align-items:center;background:rgba(255,255,255,.055);
  border:1px solid var(--sp-line-dk);border-radius:999px;padding:9px 16px;
  color:#e8edf2;font-size:12.5px;font-weight:500;line-height:1.3}
.spanco-cred li b{color:var(--sp-sky);font-weight:600;margin-left:6px}

.spanco-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sp-line-dk);
  border:1px solid var(--sp-line-dk);border-radius:14px;overflow:hidden;margin-top:30px}
.spanco-stat{background:var(--sp-ink-2);padding:26px 22px}
.spanco-stat b{
  display:block;font-size:30px;font-weight:700;color:#fff;letter-spacing:-.03em;line-height:1}
.spanco-stat b em{font-style:normal;color:var(--sp-crimson);font-size:.62em;margin-left:3px}
.spanco-stat span{display:block;margin-top:8px;font-size:13px;color:#93a1ae;line-height:1.55}

/* ---------- process ---------- */
.spanco-process{padding:84px 0;font-family:"Poppins",sans-serif}
.spanco-process h2{
  font-size:clamp(26px,3.2vw,38px);font-weight:700;color:var(--sp-ink);
  letter-spacing:-.02em;margin:0}
.spanco-process h2::before{
  content:"";display:block;width:46px;height:3px;border-radius:2px;
  background:var(--sp-crimson);margin-bottom:20px}
.spanco-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:44px 0 0;padding:0;
  list-style:none;counter-reset:spanco-step}
.spanco-step{
  counter-increment:spanco-step;padding-top:26px;border-top:2px solid var(--sp-line);position:relative}
.spanco-step::before{
  content:counter(spanco-step,decimal-leading-zero);position:absolute;top:-13px;left:0;
  background:#fff;padding-right:12px;font-size:13px;font-weight:700;color:var(--sp-crimson)}
.spanco-step h3{font-size:16px;font-weight:600;color:var(--sp-ink);margin:0 0 8px}
.spanco-step p{font-size:14px;line-height:1.7;color:var(--sp-body);margin:0}

/* ---------- industries ---------- */
.spanco-industries{background:var(--sp-ink);padding:84px 0;font-family:"Poppins",sans-serif}
.spanco-industries h2{
  font-size:clamp(26px,3.2vw,38px);font-weight:700;color:#fff;letter-spacing:-.02em;margin:0}
.spanco-industries h2::before{
  content:"";display:block;width:46px;height:3px;border-radius:2px;
  background:var(--sp-crimson);margin-bottom:20px}
.spanco-industries__lede{
  color:#9aa7b4;max-width:60ch;margin:16px 0 0;font-size:15px;line-height:1.75}
.spanco-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.spanco-ind{
  border:1px solid var(--sp-line-dk);border-radius:12px;padding:22px;
  background:rgba(255,255,255,.035)}
.spanco-ind b{display:block;font-size:15px;color:#fff;font-weight:600;margin-bottom:6px}
.spanco-ind span{font-size:13.5px;color:#93a1ae;line-height:1.65}

/* ---------- closing CTA ---------- */
.spanco-cta{
  background:var(--sp-crimson);color:#fff;padding:52px 0;font-family:"Poppins",sans-serif}
.spanco-cta .container{
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.spanco-cta h2{
  color:#fff;font-size:clamp(22px,2.6vw,31px);font-weight:700;letter-spacing:-.02em;margin:0}
.spanco-cta p{color:rgba(255,255,255,.88);margin:9px 0 0;font-size:15px}
.spanco-cta__btns{display:flex;gap:12px;flex-wrap:wrap}
.spanco-btn-solid,.spanco-btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:9px;font-weight:600;font-size:15px;
  transition:filter .18s ease,transform .18s ease}
.spanco-btn-solid{background:#fff;color:var(--sp-crimson)}
.spanco-btn-ghost{border:1px solid rgba(255,255,255,.5);color:#fff}
.spanco-btn-solid:hover,.spanco-btn-ghost:hover{transform:translateY(-1px);color:var(--sp-crimson)}
.spanco-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.spanco-btn-solid:focus-visible,.spanco-btn-ghost:focus-visible{
  outline:2px solid #fff;outline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:991px){
  .spanco-stats,.spanco-steps,.spanco-ind-grid{grid-template-columns:repeat(2,1fr)}
  .spanco-process,.spanco-industries{padding:56px 0}
  .spanco-plinth{padding-bottom:40px}
}
@media (max-width:575px){
  .spanco-stats,.spanco-steps,.spanco-ind-grid{grid-template-columns:1fr}
  .spanco-plinth::before{top:-24px;height:24px}
  .spanco-cta .container{flex-direction:column;align-items:flex-start}
  .spanco-cta__btns{width:100%}
  .spanco-btn-solid,.spanco-btn-ghost{flex:1 1 auto}
}

/* ===========================================================================
   Reviews, quality and infrastructure pages
   =========================================================================== */

/* ---------- Google reviews ---------- */
.spanco-reviews{padding:84px 0;background:var(--sp-mist);font-family:"Poppins",sans-serif}
.spanco-reviews__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.spanco-reviews h2{
  font-size:clamp(26px,3.2vw,38px);font-weight:700;color:var(--sp-ink);letter-spacing:-.02em;margin:0}
.spanco-reviews h2::before{
  content:"";display:block;width:46px;height:3px;border-radius:2px;background:var(--sp-crimson);margin-bottom:20px}
.spanco-reviews__head p{margin:10px 0 0;font-size:15px;color:var(--sp-body)}

.spanco-google-btn{
  display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--sp-ink);
  border:1px solid var(--sp-line);border-radius:999px;padding:11px 20px;
  font-size:14.5px;font-weight:600;line-height:1;white-space:nowrap;
  box-shadow:0 1px 3px rgba(18,20,23,.07);transition:box-shadow .18s ease,transform .18s ease}
.spanco-google-btn:hover{box-shadow:0 6px 18px rgba(18,20,23,.12);transform:translateY(-1px);color:var(--sp-ink)}
.spanco-google-btn:focus-visible{outline:2px solid var(--sp-sky);outline-offset:3px}
.spanco-g{flex:0 0 auto;display:block}

.spanco-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.spanco-review{
  background:#fff;border:1px solid var(--sp-line);border-radius:12px;padding:22px;
  display:flex;flex-direction:column}
.spanco-review__top{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.spanco-avatar{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:50%;
  background:var(--sp-navy);color:#fff;font-weight:600;font-size:17px}
.spanco-review__top b{display:block;font-size:14.5px;color:var(--sp-ink);font-weight:600;line-height:1.3}
.spanco-stars{display:block;color:#f5a623;font-size:14px;letter-spacing:1px;margin-top:3px}
.spanco-g--corner{margin-left:auto;align-self:flex-start}
.spanco-review p{font-size:14.5px;line-height:1.7;color:var(--sp-body);margin:0}
.spanco-review__date{margin-top:12px;font-size:12.5px;color:#9aa5b1}
.spanco-reviews__empty{font-size:15px;color:var(--sp-body)}
.spanco-reviews__empty a{color:var(--sp-crimson);font-weight:600}

/* ---------- quality + infrastructure ---------- */
.spanco-check{list-style:none;padding:0;margin:18px 0 32px}
.spanco-check li{
  position:relative;padding-left:28px;margin-bottom:11px;font-size:15px;line-height:1.7;color:var(--sp-body)}
.spanco-check li b{color:var(--sp-ink);font-weight:600}
.spanco-check li::before{
  content:"";position:absolute;left:3px;top:.6em;width:9px;height:9px;border-radius:2px;
  background:var(--sp-crimson)}

.spanco-factcard{
  background:var(--sp-mist);border:1px solid var(--sp-line);border-radius:14px;padding:26px;
  position:sticky;top:24px}
.spanco-factcard h3{font-size:18px;font-weight:600;color:var(--sp-ink);margin:0 0 16px}
.spanco-factcard dl{margin:0 0 20px}
.spanco-factcard dt{font-size:12.5px;color:#7d8995;font-weight:500;margin-top:13px}
.spanco-factcard dd{margin:3px 0 0;font-size:14.5px;color:var(--sp-ink);font-weight:600;line-height:1.5}

.spanco-infra-hero{width:100%;height:auto;border-radius:14px;display:block}

.spanco-stats--light{background:var(--sp-line);border-color:var(--sp-line);margin:46px 0 0}
.spanco-stats--light .spanco-stat{background:#fff}
.spanco-stats--light .spanco-stat b{color:var(--sp-ink)}
.spanco-stats--light .spanco-stat span{color:var(--sp-body)}

.spanco-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.spanco-gallery figure{margin:0}
.spanco-gallery img{
  width:100%;height:230px;object-fit:cover;border-radius:12px;display:block;border:1px solid var(--sp-line)}
.spanco-gallery figcaption{margin-top:10px;font-size:13.5px;color:var(--sp-body);line-height:1.6}

.spanco-factsheet{
  border:1px solid var(--sp-line);border-radius:14px;overflow:hidden;margin-top:24px;background:#fff}
.spanco-factsheet dl{margin:0;display:grid;grid-template-columns:260px 1fr}
.spanco-factsheet dt{
  padding:14px 20px;background:var(--sp-mist);font-size:13.5px;font-weight:600;color:var(--sp-navy);
  border-bottom:1px solid var(--sp-line)}
.spanco-factsheet dd{
  margin:0;padding:14px 20px;font-size:14.5px;color:var(--sp-ink);border-bottom:1px solid var(--sp-line)}
.spanco-muted{color:#9aa5b1;font-weight:400;font-size:13px}

.spanco-cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
.spanco-cert{margin:0;background:#fff;border:1px solid var(--sp-line);border-radius:12px;padding:14px}
.spanco-cert img{width:100%;height:auto;display:block;border-radius:8px}
.spanco-cert figcaption{margin-top:11px;font-size:13.5px;line-height:1.55}
.spanco-cert figcaption b{display:block;color:var(--sp-ink);font-weight:600}
.spanco-cert figcaption span{color:var(--sp-body)}

@media (max-width:991px){
  .spanco-review-grid,.spanco-gallery,.spanco-cert-grid{grid-template-columns:repeat(2,1fr)}
  .spanco-reviews{padding:56px 0}
  .spanco-factsheet dl{grid-template-columns:1fr}
  .spanco-factsheet dt{border-bottom:0;padding-bottom:4px}
  .spanco-factcard{position:static}
}
@media (max-width:575px){
  .spanco-review-grid,.spanco-gallery,.spanco-cert-grid{grid-template-columns:1fr}
  .spanco-reviews__head{flex-direction:column;align-items:flex-start}
  .spanco-gallery img{height:200px}
}

/* ---------- client wall (clientele page) ---------- */
.spanco-client-wall{
  display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:30px}
.spanco-client{
  display:grid;place-items:center;background:#fff;border:1px solid var(--sp-line);
  border-radius:10px;padding:16px;min-height:92px}
.spanco-client img{
  max-width:100%;height:auto;max-height:56px;object-fit:contain;display:block;
  filter:grayscale(1);opacity:.62;transition:filter .2s ease,opacity .2s ease}
.spanco-client:hover img{filter:none;opacity:1}
@media (max-width:991px){.spanco-client-wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:575px){.spanco-client-wall{grid-template-columns:repeat(2,1fr)}}