/* ============================================================
   XPERT STEEL — THEME LOCK
   ------------------------------------------------------------
   Har page apni alag HTML widget me bana hai aur har ek ka apna
   class prefix hai:

       xs-   home        xsa-  about + safety & quality
       xss-  services    xsp-  projects
       xsw-  why         xsc-  contact

   Markup sab ka bilkul ek jaisa hai, magar typography kuch pages
   par alag reh gayi thi (projects aur why par nav/buttons bare aur
   mixed-case the, baqi par chhote uppercase). Ye file sab ko EK
   standard par le aati hai — about page wale values canonical hain.

   Page ki CSS inline <style> me body ke andar hai, is liye document
   order me wo baad me aati hai. Isi wajah se yahan har rule par
   `body` prefix (specificity barhane ke liye) aur `!important` hai.
   Breakpoints pages jaise hi: 1180 / 700 / 430.

   KUCH BHI BADALNA HO to sirf yahan — saari site par lag jayega.
   ============================================================ */

:root {
	--xsl-accent:        #D49A45;   /* brand bronze */
	--xsl-accent-light:  #F0C77A;
	--xsl-accent-dark:   #A96718;
	--xsl-accent-mark:   #E8B866;
	--xsl-btn-from:      #C98A2F;
	--xsl-btn-to:        #A96616;
	--xsl-bg:            #07090B;
	--xsl-container:     1240px;
}

/* ------------------------------------------------------------
   1. ACCENT — ek hi bronze har jagah.
   Home aur contact par purana orange (#C76E00 / #B36200) reh gaya
   tha; ye us ko bhi bronze par le aata hai.
   ------------------------------------------------------------ */
body .xs,
body .xs-header,
body .xs-footer {
	--xs-accent:       var(--xsl-accent) !important;
	--xs-accent-btn:   #B97820 !important;
	--xs-gold-light:   var(--xsl-accent-light) !important;
}
body .xsa-hero, body .xsa-header, body .xsa-footer, body [class^="xsa-"], body [class*=" xsa-"] {
	--xsa-accent:       var(--xsl-accent) !important;
	--xsa-accent-light: var(--xsl-accent-light) !important;
	--xsa-accent-dark:  var(--xsl-accent-dark) !important;
}
body [class^="xss-"], body [class*=" xss-"] {
	--gold:  var(--xsl-accent) !important;
	--gold2: var(--xsl-accent-light) !important;
	--gold3: var(--xsl-accent-dark) !important;
}
body [class^="xsp-"], body [class*=" xsp-"],
body [class^="xsw-"], body [class*=" xsw-"] {
	--accent:  var(--xsl-accent) !important;
	--accent2: var(--xsl-accent-light) !important;
	--accent3: var(--xsl-accent-dark) !important;
}
body [class^="xsc-"], body [class*=" xsc-"] {
	--xsc-accent:       var(--xsl-accent) !important;
	--xsc-accent-light: var(--xsl-accent-light) !important;
}

/* ------------------------------------------------------------
   2. CONTAINER — har page par ek hi chaurai
   ------------------------------------------------------------ */
body .xs-container,
body .xsa-container,
body .xss-container,
body .xsp-container,
body .xsw-container,
body .xsc-container {
	width: min(calc(100% - 64px), var(--xsl-container)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ------------------------------------------------------------
   3. LOGO — ek hi size, har header aur footer me
   ------------------------------------------------------------ */
body .xs-logo-mark,
body .xsa-logo-mark,
body .xss-logo-mark,
body .xsp-logo-mark,
body .xsw-logo-mark,
body .xsc-logo-mark {
	width: 36px !important;
	height: 36px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .06em !important;
	color: var(--xsl-accent-mark) !important;
	border: 1px solid rgba(212, 154, 69, .82) !important;
	box-shadow: inset 0 0 18px rgba(212, 154, 69, .08) !important;
	transform: skew(-8deg) !important;
}
body .xs-logo-word,
body .xsa-logo-word,
body .xss-logo-word,
body .xsp-logo-word,
body .xsw-logo-word,
body .xsc-logo-word {
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
}

/* ------------------------------------------------------------
   4. NAV — projects/why par 14px mixed-case tha, baqi par
      10px uppercase. Sab ab 10px uppercase.
   ------------------------------------------------------------ */
body .xs-nav a,
body .xsa-nav a,
body .xss-nav a,
body .xsp-nav a,
body .xsw-nav a,
body .xsc-nav a {
	min-height: 42px !important;
	padding: 0 11px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	color: rgba(255, 255, 255, .70) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .065em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
body .xs-nav a:hover,
body .xsa-nav a:hover,
body .xss-nav a:hover,
body .xsp-nav a:hover,
body .xsw-nav a:hover,
body .xsc-nav a:hover {
	color: #fff !important;
	background: rgba(255, 255, 255, .07) !important;
}
/* abhi khula hua page */
body .xs-nav a.xs-active,
body .xsa-nav a.xsa-active,
body .xss-nav a.xss-active,
body .xsp-nav a.xsp-active,
body .xsw-nav a.xsw-active,
body .xsc-nav a.xsc-active,
body .xs-nav a[aria-current="page"] {
	color: var(--xsl-accent-light) !important;
	background: rgba(212, 154, 69, .10) !important;
}

/* ------------------------------------------------------------
   5. HEADER CTA — ek hi button har page par
   ------------------------------------------------------------ */
body .xs-header-cta,
body .xsa-header-cta,
body .xss-header-cta,
body .xsp-header-cta,
body .xsw-header-cta,
body .xsc-header-cta {
	min-height: 46px !important;
	padding: 0 18px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 9px !important;
	border: 1px solid rgba(240, 199, 122, .34) !important;
	background: linear-gradient(135deg, var(--xsl-btn-from), var(--xsl-btn-to)) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	box-shadow: 0 10px 28px rgba(185, 120, 32, .22),
	            inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

/* ------------------------------------------------------------
   6. BUTTONS — projects/why par 14px/56px the, baqi 11px/52px
   ------------------------------------------------------------ */
body .xs-btn,
body .xsa-btn,
body .xss-btn,
body .xsp-btn,
body .xsw-btn,
body .xsc-btn,
body .xs-footer-bid,
body .xsa-footer-bid,
body .xss-footer-bid,
body .xsp-footer-bid,
body .xsw-footer-bid,
body .xsc-footer-bid {
	min-height: 52px !important;
	padding: 0 23px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

/* ------------------------------------------------------------
   7. HERO META STRIP — sab uppercase, ek hi size
   ------------------------------------------------------------ */
body .xs-hero-meta,
body .xsa-hero-meta,
body .xss-hero-meta,
body .xsp-hero-meta,
body .xsw-hero-meta,
body .xsc-hero-meta {
	color: rgba(255, 255, 255, .52) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: .17em !important;
	text-transform: uppercase !important;
}

/* ------------------------------------------------------------
   8. FOOTER — titles, links aur bottom bar ek jaise
   ------------------------------------------------------------ */
/* naye pages column title ke liye <h3> use karte hain, home .xs-footer-title */
body .xs-footer-column h3,
body .xsa-footer-column h3,
body .xss-footer-column h3,
body .xsp-footer-column h3,
body .xsw-footer-column h3,
body .xsc-footer-column h3,
body .xs-footer-title,
body .xsa-footer-title,
body .xss-footer-title,
body .xsp-footer-title,
body .xsw-footer-title,
body .xsc-footer-title {
	color: var(--xsl-accent) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: .22em !important;
	text-transform: uppercase !important;
}
body .xs-footer-column a,
body .xsa-footer-column a,
body .xss-footer-column a,
body .xsp-footer-column a,
body .xsw-footer-column a,
body .xsc-footer-column a,
body .xs-footer-links a {
	color: rgba(255, 255, 255, .68) !important;
	font-size: 13px !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	text-decoration: none !important;
}
body .xs-footer-column a:hover,
body .xsa-footer-column a:hover,
body .xss-footer-column a:hover,
body .xsp-footer-column a:hover,
body .xsw-footer-column a:hover,
body .xsc-footer-column a:hover,
body .xs-footer-links a:hover {
	color: var(--xsl-accent-light) !important;
}
body .xs-footer-bottom,
body .xsa-footer-bottom,
body .xss-footer-bottom,
body .xsp-footer-bottom,
body .xsw-footer-bottom,
body .xsc-footer-bottom {
	color: rgba(255, 255, 255, .40) !important;
	font-size: 11px !important;
	letter-spacing: .02em !important;
}

/* ============================================================
   RESPONSIVE — pages jaise hi breakpoints
   ============================================================ */

@media (max-width: 1180px) {
	body .xs-logo-word,
	body .xsa-logo-word,
	body .xss-logo-word,
	body .xsp-logo-word,
	body .xsw-logo-word,
	body .xsc-logo-word { font-size: 12px !important; letter-spacing: .15em !important; }
}

@media (max-width: 700px) {
	body .xs-container,
	body .xsa-container,
	body .xss-container,
	body .xsp-container,
	body .xsw-container,
	body .xsc-container { width: calc(100% - 40px) !important; }

	body .xs-logo-mark,
	body .xsa-logo-mark,
	body .xss-logo-mark,
	body .xsp-logo-mark,
	body .xsw-logo-mark,
	body .xsc-logo-mark { width: 31px !important; height: 31px !important; font-size: 10px !important; }

	body .xs-logo-word,
	body .xsa-logo-word,
	body .xss-logo-word,
	body .xsp-logo-word,
	body .xsw-logo-word,
	body .xsc-logo-word { font-size: 11px !important; letter-spacing: .13em !important; }

	body .xs-btn,
	body .xsa-btn,
	body .xss-btn,
	body .xsp-btn,
	body .xsw-btn,
	body .xsc-btn { width: 100% !important; min-height: 52px !important; }

	body .xs-hero-meta,
	body .xsa-hero-meta,
	body .xss-hero-meta,
	body .xsp-hero-meta,
	body .xsw-hero-meta,
	body .xsc-hero-meta { font-size: 8px !important; letter-spacing: .15em !important; }
}


/* ------------------------------------------------------------
   9. HERO HEADING — har page par 58..108px ka ek hi scale
      (pehle 54-60px min aur 106-112px max ke beech bikhra hua tha)
   ------------------------------------------------------------ */
body .xs-hero h1,
body .xsa-hero h1,
body .xss-hero h1,
body .xsp-hero h1,
body .xsw-hero h1,
body .xsc-hero h1 {
	font-size: clamp(58px, 7.8vw, 108px) !important;
	line-height: .92 !important;
	letter-spacing: -.035em !important;
}

@media (max-width: 700px) {
body .xs-hero h1,
body .xsa-hero h1,
body .xss-hero h1,
body .xsp-hero h1,
body .xsw-hero h1,
body .xsc-hero h1 { font-size: clamp(50px, 14.5vw, 76px) !important; }
}

@media (max-width: 430px) {
body .xs-hero h1,
body .xsa-hero h1,
body .xss-hero h1,
body .xsp-hero h1,
body .xsw-hero h1,
body .xsc-hero h1 { font-size: 50px !important; }
}


/* ------------------------------------------------------------
   10. CONTACT page ka ek chhota farq
   Us ke nav me 7-wan item "Contact / Request a Bid" bhi tha, jabke
   wahi cheez header ke CTA button me pehle se hai — do buttons saath
   lag rahe the. Nav wala hata diya; baqi pages par ye link hai hi nahi
   (unke nav links absolute URL hain), is liye koi asar nahi.
   ------------------------------------------------------------ */
body .xs-nav a[href="/contact/"] { display: none !important; }

/* active state ke teeno naming conventions */
body .xs-nav a.is-active,
body .xsa-nav a.is-active,
body .xss-nav a.is-active,
body .xsp-nav a.is-active,
body .xsw-nav a.is-active,
body .xsc-nav a.is-active {
	color: var(--xsl-accent-light) !important;
	background: rgba(212, 154, 69, .10) !important;
}

/* ------------------------------------------------------------
   11. HORIZONTAL OVERFLOW
   Safety & Quality ka page wrapper `width: 100vw` use kar raha tha.
   100vw me scrollbar ki chaurai bhi shaamil hoti hai, is liye page
   ~8px bahar nikal jata tha — header aur footer baqi pages se thore
   chaure lagte the. 100% wahi karta hai jo yahan chahiye.
   ------------------------------------------------------------ */
body .xs-page,
body .xsa-page,
body .xss-page,
body .xsp-page,
body .xsw-page,
body .xsc-page {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: clip !important;
}