/* ============================================================
   SHREE SHANKAR SPRING — PREMIUM INDUSTRIAL WEBSITE
   ============================================================ */

:root{
  --navy: #0B1F35;
  --navy-2: #122c4a;
  --navy-3: #17385c;
  --accent: #F58220;
  --accent-2: #ffa14d;
  --white: #FFFFFF;
  --gray-light: #F5F7FA;
  --text: #222222;
  --text-soft: #5b6472;
  --border: rgba(0,0,0,.08);
  --border-light: rgba(255,255,255,.14);

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --container: 1280px;
}

*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }
input, textarea, select{ font-family:inherit; }
h1,h2,h3,h4,h5{ font-family: var(--font-display); font-weight:600; line-height:1.15; color: var(--navy); }
.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 40px; }

@media (max-width: 900px){
  .container{ padding: 0 22px; }
  body{ cursor:auto; }
}

::selection{ background: var(--accent); color:#fff; }

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; pointer-events:none; z-index: 9999;
  border-radius:50%; transform: translate(-50%,-50%);
  mix-blend-mode: difference;
}
.cursor-dot{ width:6px; height:6px; background:#fff; }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(255,255,255,.7); transition: width .25s var(--ease), height .25s var(--ease), border-color .25s; }
.cursor-ring.hover{ width:60px; height:60px; border-color: var(--accent); }
@media (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- preloader ---------- */
.preloader{
  position: fixed; inset:0; z-index: 10000; background: var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
.preloader.done{ opacity:0; visibility:hidden; }
.preloader-inner{ text-align:center; }
.preloader-spring{ margin:0 auto 18px; display:block; }
#preloaderPath{ stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawSpring 1.6s var(--ease) forwards infinite alternate; }
@keyframes drawSpring{ to{ stroke-dashoffset: 0; } }
.preloader-word{
  font-family: var(--font-display); letter-spacing: .4em; font-size: 12px; color: #fff; opacity:.85;
  margin-bottom: 18px;
}
.preloader-bar{ width: 180px; height:2px; background: rgba(255,255,255,.15); margin: 0 auto; overflow:hidden; }
.preloader-bar span{ display:block; height:100%; width:0%; background: var(--accent); animation: loadBar 1.8s var(--ease) forwards; }
@keyframes loadBar{ to{ width:100%; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 30px; border-radius: 100px; font-weight:600; font-size:14px;
  letter-spacing:.02em; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn-lg{ padding: 17px 36px; font-size:15px; }
.btn-accent{ background: var(--accent); color:#fff; box-shadow: 0 10px 30px -10px rgba(245,130,32,.6); }
.btn-accent:hover{ transform: translateY(-3px); box-shadow: 0 16px 36px -8px rgba(245,130,32,.7); }
.btn-ghost{ border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter: blur(6px); }
.btn-ghost:hover{ background: rgba(255,255,255,.12); transform: translateY(-3px); }
.btn-ghost-light{ border:1px solid rgba(255,255,255,.3); color:#fff; }
.btn-ghost-light:hover{ background:rgba(255,255,255,.1); }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(37,211,102,.6); }
.btn-ghost-dark{ border:1px solid var(--border); color: var(--navy); }
.btn-ghost-dark:hover{ background: var(--gray-light); transform: translateY(-3px); }

/* ---------- section basics ---------- */
section{ position: relative; }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-size:12px; font-weight:600; letter-spacing:.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom:16px;
}
.section-eyebrow::before{ content:''; width:24px; height:2px; background: var(--accent); }
.section-title{ font-size: clamp(28px, 4vw, 44px); color: var(--navy); margin-bottom: 18px; letter-spacing:-.01em; }
.section-desc{ color: var(--text-soft); font-size:17px; line-height:1.7; max-width:620px; }
.section-head.center{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.section-head.center .section-desc{ margin:0 auto; }
.section-head.light .section-title, .section-head.light{ color:#fff; }
.section-head.light .section-desc{ color: rgba(255,255,255,.65); }

.glass-card{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
}

/* ---------- scroll reveal base ---------- */
.reveal-up{ opacity:0; transform: translateY(46px); }
.reveal-up.in{ opacity:1; transform: translateY(0); transition: opacity 1s var(--ease), transform 1s var(--ease); }

/* ============ NAVBAR ============ */
.navbar{
  position: fixed; top:0; left:0; width:100%; z-index: 1000;
  padding: 22px 0; transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.navbar.scrolled{
  padding: 14px 0; background: rgba(11,31,53,.72); backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.5);
}
.nav-inner{
  max-width: var(--container); margin:0 auto; padding: 0 40px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand-logo-chip{
  display:inline-flex; align-items:center; background:#fff; border-radius:12px; padding:7px 14px;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brand:hover .brand-logo-chip{ transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(0,0,0,.4); }
.brand-logo{ height:34px; width:auto; display:block; }
.nav-links{ display:flex; gap:36px; }
.nav-links a{
  position:relative; font-size:14.5px; font-weight:500; color: rgba(255,255,255,.85);
  transition: color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:1.5px; background: var(--accent);
  transition: width .35s var(--ease);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ padding: 11px 24px; font-size:13.5px; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; width:28px; }
.nav-toggle span{ height:2px; background:#fff; border-radius:2px; transition: all .3s; }

@media (max-width: 1000px){
  .nav-links{
    position: fixed; top:0; right:0; height:100vh; width: 280px;
    background: var(--navy); flex-direction:column; padding: 110px 36px; gap:26px;
    transform: translateX(100%); transition: transform .5s var(--ease);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-cta{ display:none; }
  .nav-toggle{ display:flex; z-index:1001; }
}

/* ============ HERO ============ */
.hero{
  position: relative; min-height: 100svh; display:flex; align-items:center;
  overflow:hidden; background: var(--navy);
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg-img{ width:100%; height:100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,16,29,.88) 0%, rgba(11,31,53,.82) 45%, rgba(11,31,53,.97) 100%);
}
.hero-noise{
  position:absolute; inset:0; opacity:.05; pointer-events:none; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spring-canvas{
  position:absolute; top:0; right:0; height:100%; width:56%; z-index:1; pointer-events:none;
}
.hero-content{ position:relative; z-index:2; max-width: var(--container); width:100%; margin:0 auto; padding: 160px 40px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; color: rgba(255,255,255,.8);
  font-size:13px; font-weight:500; letter-spacing:.06em; margin-bottom:26px;
  border:1px solid rgba(255,255,255,.18); padding:8px 18px; border-radius:100px;
  backdrop-filter: blur(6px);
}
.eyebrow-dot{ width:7px; height:7px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(245,130,32,.25); }
.hero-title{
  font-family: var(--font-display); font-weight:700; color:#fff;
  font-size: clamp(38px, 6.6vw, 84px); line-height:1.04; letter-spacing:-.02em;
  max-width: 900px; margin-bottom: 28px;
}
.hero-title .line{ display:block; }
.accent-text{ color: var(--accent); }
.hero-sub{
  color: rgba(255,255,255,.72); font-size: 18px; line-height:1.7; max-width: 560px; margin-bottom: 40px;
}
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }

.scroll-indicator{
  position:absolute; left:40px; bottom:44px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-indicator span{
  width:1px; height:52px; background: linear-gradient(180deg, var(--accent), transparent);
  position:relative; overflow:hidden;
}
.scroll-indicator span::after{
  content:''; position:absolute; top:-52px; left:0; width:100%; height:100%; background: #fff;
  animation: scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown{ 0%{ top:-52px; } 100%{ top:52px; } }
.scroll-indicator p{ font-size:11px; letter-spacing:.2em; color: rgba(255,255,255,.55); text-transform:uppercase; writing-mode: vertical-rl; }

@media (max-width: 900px){
  .hero-content{ padding: 130px 22px 0; }
  .spring-canvas{ width:100%; opacity:.5; }
  .scroll-indicator{ display:none; }
}

/* ============ MARQUEE ============ */
.marquee-strip{
  background: var(--navy-2); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06);
  overflow:hidden; padding: 16px 0;
}
.marquee-track{
  display:flex; gap:16px; white-space:nowrap; width:max-content;
  animation: marquee 32s linear infinite;
  font-family: var(--font-display); font-size:14px; letter-spacing:.04em; color: rgba(255,255,255,.55);
}
.marquee-track .dot{ color: var(--accent); }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ============ STATS ============ */
.stats-section{ background: var(--navy); padding: 70px 0; }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:30px; }
.stat-card{ text-align:center; border-right: 1px solid rgba(255,255,255,.08); }
.stat-card:last-child{ border-right:none; }
.stat-num{
  display:inline-block; font-family: var(--font-display); font-weight:700; font-size: clamp(36px,4vw,56px);
  color:#fff;
}
.stat-plus{ font-family: var(--font-display); font-weight:700; font-size: 28px; color: var(--accent); }
.stat-card p{ color: rgba(255,255,255,.6); font-size:14px; margin-top:8px; }
@media (max-width: 800px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); row-gap: 40px; }
  .stat-card:nth-child(2){ border-right:none; }
}

/* ============ ABOUT ============ */
.about-section{ padding: 130px 0 90px; background: var(--white); }
.about-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items:center; margin-bottom: 110px; }
.about-visual{ position:relative; }
.about-img-wrap{ position:relative; border-radius: 22px; overflow:hidden; }
.about-img-main{ width:100%; height: 520px; object-fit:cover; transition: transform 1.2s var(--ease); }
.about-img-wrap:hover .about-img-main{ transform: scale(1.06); }
.about-img-frame{
  position:absolute; inset:16px; border:1px solid rgba(255,255,255,.35); border-radius: 14px; pointer-events:none;
}
.about-card{
  position:absolute; bottom:-30px; right:-30px; background: var(--navy); border-radius:18px; padding: 26px 28px;
  box-shadow: 0 30px 60px -20px rgba(11,31,53,.5); min-width:190px;
}
.about-card-num{ font-family: var(--font-display); font-weight:700; font-size:34px; color: var(--accent); }
.about-card-label{ color: rgba(255,255,255,.75); font-size:13px; margin-top:6px; line-height:1.5; }

.about-copy p{ color: var(--text-soft); font-size:16.5px; line-height:1.8; margin-bottom:18px; }
.vm-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:22px; margin-top: 30px; }
.vm-card{ background: var(--gray-light); border:1px solid var(--border); border-radius:16px; padding:26px 24px; }
.vm-tag{ display:inline-block; font-family: var(--font-display); font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--accent); margin-bottom:12px; }
.vm-card p{ color: var(--text-soft); font-size:14.5px; line-height:1.7; }
.vm-card ul{ display:flex; flex-direction:column; gap:10px; }
.vm-card li{ font-size:14px; color: var(--text-soft); padding-left:18px; position:relative; line-height:1.5; }
.vm-card li::before{ content:''; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background: var(--accent); }

@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; gap:60px; }
  .vm-grid{ grid-template-columns:1fr; }
  .about-card{ right:10px; }
}


/* ============ WHY CHOOSE US ============ */
.why-section{ background: var(--gray-light); padding: 110px 0; }
.why-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 60px; }
.why-card{
  background:#fff; border:1px solid var(--border); border-radius:20px; padding: 38px 32px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
}
.why-card:hover{ transform: translateY(-10px); box-shadow: 0 30px 50px -25px rgba(11,31,53,.25); border-color: transparent; }
.why-icon{
  width:56px; height:56px; border-radius:14px; background: rgba(245,130,32,.1); color: var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition: background .4s, color .4s, transform .5s var(--ease);
}
.why-icon svg{ width:26px; height:26px; }
.why-card:hover .why-icon{ background: var(--accent); color:#fff; transform: rotate(-8deg) scale(1.08); }
.why-card h4{ font-size:19px; margin-bottom:10px; }
.why-card p{ color: var(--text-soft); font-size:14.5px; line-height:1.7; }
@media (max-width: 900px){ .why-grid{ grid-template-columns:1fr; } }

/* ============ PRODUCTS ============ */
.products-section{ padding: 120px 0; background: var(--white); }
.section-head{ margin-bottom: 60px; }
.product-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.product-card{
  border-radius: 22px; overflow:hidden; background:#fff; border:1px solid var(--border);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-8px); box-shadow: 0 40px 60px -30px rgba(11,31,53,.3); }
.product-card.featured{ grid-column: span 2; flex-direction: row; }
.product-card.featured .product-media{ width:46%; }
.product-card.featured .product-body{ width:54%; }
.product-media{ position:relative; height: 260px; overflow:hidden; background: var(--navy); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.product-card:hover .product-media img{ transform: scale(1.1); }
.placeholder-media.spring-icon-media{ display:flex; align-items:center; justify-content:center; background: linear-gradient(140deg, var(--navy), var(--navy-3)); }
.placeholder-media svg{ width:44%; height:44%; opacity:.9; transition: transform .8s var(--ease); }
.product-card:hover .placeholder-media svg{ transform: rotate(8deg) scale(1.08); }
.product-body{ padding: 30px 28px; display:flex; flex-direction:column; flex:1; }
.product-index{ font-family: var(--font-display); font-weight:700; font-size:13px; color: var(--accent); letter-spacing:.1em; margin-bottom:10px; }
.product-body h3{ font-size:21px; margin-bottom:12px; }
.product-body p{ color: var(--text-soft); font-size:14.5px; line-height:1.7; flex:1; }
.product-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 6px; }
.product-tags li{ font-size:11.5px; background: var(--gray-light); color: var(--navy); padding:6px 12px; border-radius:100px; font-weight:600; }
.product-link{ display:inline-flex; align-items:center; gap:6px; color: var(--navy); font-weight:600; font-size:14px; margin-top:18px; transition: color .3s, gap .3s; }
.product-link:hover{ color: var(--accent); gap:10px; }

@media (max-width: 1000px){
  .product-grid{ grid-template-columns: 1fr; }
  .product-card.featured{ grid-column: span 1; flex-direction:column; }
  .product-card.featured .product-media, .product-card.featured .product-body{ width:100%; }
}

/* ============ WIRE SPECS ============ */
.specs-section{ padding: 90px 0 120px; background: var(--gray-light); }
.specs-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; margin-top:50px; }
.spec-card{
  background:#fff; border-radius:18px; padding: 32px 26px; border-top: 3px solid var(--accent);
  box-shadow: 0 20px 40px -30px rgba(11,31,53,.2);
  transition: transform .4s var(--ease);
}
.spec-card:hover{ transform: translateY(-6px); }
.spec-label{ display:block; font-family: var(--font-display); font-weight:600; font-size: 13px; letter-spacing:.06em; text-transform:uppercase; color: var(--navy); margin-bottom:12px; }
.spec-card p{ color: var(--text-soft); font-size:14.5px; line-height:1.6; }
@media (max-width: 900px){ .specs-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .specs-grid{ grid-template-columns: 1fr; } }

/* ============ INDUSTRIES ============ */
.industries-section{ padding: 120px 0; background: var(--white); }
.industries-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 55px; }
.ind-card{
  background: var(--gray-light); border-radius:18px; padding: 34px 16px; text-align:center;
  transition: transform .5s var(--ease), background .4s;
}
.ind-card:hover{ transform: translateY(-8px); background: var(--navy); }
.ind-card:hover p{ color:#fff; }
.ind-icon{ font-size: 30px; margin-bottom: 14px; transition: transform .5s var(--ease); }
.ind-card:hover .ind-icon{ transform: scale(1.2) rotate(-6deg); }
.ind-card p{ font-size:13px; font-weight:600; color: var(--navy); transition: color .4s; line-height:1.4; }
@media (max-width: 900px){ .industries-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .industries-grid{ grid-template-columns: repeat(2,1fr); } }

/* ============ HOW WE WORK / TIMELINE ============ */
.work-section{ padding: 120px 0; background: var(--gray-light); }
.timeline{ position:relative; max-width: 760px; margin: 70px auto 0; padding-left: 50px; }
.timeline-line{ position:absolute; left:9px; top:6px; bottom:6px; width:2px; background: rgba(11,31,53,.12); overflow:hidden; }
.timeline-glow{ position:absolute; top:0; left:0; width:100%; height:0%; background: linear-gradient(180deg, var(--accent), var(--navy)); }
.timeline-step{ position:relative; padding-bottom: 56px; }
.timeline-step:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:-50px; top:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; border: 3px solid var(--accent); box-shadow: 0 0 0 6px var(--gray-light);
}
.timeline-step h4{ font-size:19px; margin-bottom:8px; }
.timeline-step p{ color: var(--text-soft); font-size:14.5px; line-height:1.7; max-width:520px; }

/* ============ QUALITY (DARK) ============ */
.quality-section{ position:relative; padding: 130px 0; background: var(--navy); overflow:hidden; }
.quality-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,130,32,.14), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.06), transparent 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 26px);
}
.quality-grid{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 60px; }
.quality-card{
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding: 32px 26px;
  transition: transform .5s var(--ease), background .4s;
}
.quality-card:hover{ transform: translateY(-8px); background: rgba(255,255,255,.09); }
.quality-num{ display:block; font-family: var(--font-display); font-weight:700; font-size:15px; color: var(--accent); margin-bottom:16px; }
.quality-card h4{ color:#fff; font-size:18px; margin-bottom:10px; }
.quality-card p{ color: rgba(255,255,255,.6); font-size:14px; line-height:1.7; }
.quality-badges{ position:relative; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top: 56px; }
.qb{
  border:1px solid rgba(255,255,255,.2); border-radius:100px; padding: 12px 26px;
  color: rgba(255,255,255,.85); font-size:13.5px; font-weight:500; backdrop-filter: blur(6px);
  transition: border-color .3s, background .3s;
}
.qb:hover{ border-color: var(--accent); background: rgba(245,130,32,.1); }
@media (max-width: 900px){ .quality-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .quality-grid{ grid-template-columns: 1fr; } }

/* ============ GALLERY ============ */
.gallery-section{ padding: 120px 0; background: var(--white); }
.masonry{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 20px; margin-top: 55px; }
.masonry-item{ position:relative; border-radius: 18px; overflow:hidden; grid-row: span 1; }
.masonry-item.tall{ grid-row: span 2; }
.masonry-item img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.masonry-item:hover img{ transform: scale(1.12); }
.masonry-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:22px;
  background: linear-gradient(180deg, transparent 50%, rgba(11,31,53,.9));
  opacity:0; transition: opacity .4s;
}
.masonry-item:hover .masonry-overlay{ opacity:1; }
.masonry-overlay span{ color:#fff; font-weight:600; font-size:14.5px; }
@media (max-width: 900px){ .masonry{ grid-template-columns: repeat(2,1fr); } }

/* ============ CONTACT + QUOTE ============ */
.contact-section{ position:relative; padding: 130px 0 110px; background: var(--navy); overflow:hidden; }
.contact-bg{
  position:absolute; inset:0;
  background: radial-gradient(circle at 80% 10%, rgba(245,130,32,.12), transparent 50%);
}
.contact-grid{ position:relative; display:grid; grid-template-columns: .8fr 1.2fr; gap: 60px; margin-top: 60px; }
.contact-info{ color:#fff; }
.contact-item{ margin-bottom: 30px; }
.ci-label{ display:block; font-family: var(--font-display); font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--accent); margin-bottom:8px; }
.contact-item a{ font-size: 19px; font-weight:500; transition: color .3s; }
.contact-item a:hover{ color: var(--accent); }
.contact-item p{ color: rgba(255,255,255,.75); font-size:15.5px; line-height:1.7; }
.contact-cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 10px; }

.quote-form{ padding: 44px; }
.quote-form h3{ color:#fff; font-size:24px; margin-bottom: 26px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
.form-field{ position:relative; margin-bottom: 22px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding: 18px 16px 8px; color:#fff; font-size:15px; outline:none; transition: border-color .35s, box-shadow .35s, background .35s;
  appearance:none;
}
.form-field select{ padding: 18px 16px 8px; }
.form-field select option{ color:#000; }
.form-field textarea{ resize:vertical; min-height: 90px; }
.form-field label, .select-label{
  position:absolute; left:16px; top:18px; color: rgba(255,255,255,.5); font-size:15px; pointer-events:none;
  transition: all .25s var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  border-color: var(--accent); box-shadow: 0 0 0 4px rgba(245,130,32,.18); background: rgba(255,255,255,.09);
}
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label{
  top: 7px; font-size: 11px; color: var(--accent);
}
.form-field select:focus ~ .select-label, .form-field select:valid ~ .select-label{
  top: 7px; font-size: 11px; color: var(--accent);
}
.file-field{ display:flex; position:relative; }
.file-field input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-label{
  position:static; width:100%; border:1.5px dashed rgba(255,255,255,.25); border-radius:12px; padding: 18px;
  text-align:center; color: rgba(255,255,255,.55); font-size:14px; cursor:pointer; transition: border-color .3s, color .3s;
}
.file-field:hover .file-label{ border-color: var(--accent); color:#fff; }
.btn-submit{ width:100%; margin-top:6px; position:relative; overflow:hidden; }
.form-success{
  display:none; align-items:center; gap:14px; margin-top: 20px; padding: 16px 18px;
  background: rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.35); border-radius:12px;
}
.form-success.show{ display:flex; }
.form-success svg{ width:30px; height:30px; flex-shrink:0; }
.form-success circle{ stroke: #25D366; stroke-width:2; stroke-dasharray: 160; stroke-dashoffset:160; animation: circleDraw .6s var(--ease) forwards; }
.form-success path{ stroke:#25D366; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray: 40; stroke-dashoffset:40; animation: checkDraw .4s var(--ease) .5s forwards; }
@keyframes circleDraw{ to{ stroke-dashoffset:0; } }
@keyframes checkDraw{ to{ stroke-dashoffset:0; } }
.form-success p{ color: rgba(255,255,255,.85); font-size:14px; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .quote-form{ padding: 28px; }
}

/* ============ FOOTER ============ */
.footer{ background: #081627; padding: 80px 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-logo-chip{ display:inline-flex; background:#fff; border-radius:12px; padding:10px 18px; margin-bottom:18px; }
.footer-logo{ height:36px; width:auto; display:block; }
.footer-brand p{ color: rgba(255,255,255,.5); font-size:14px; line-height:1.7; max-width:280px; }
.footer-col h5{ color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:20px; }
.footer-col a, .footer-col p{ display:block; color: rgba(255,255,255,.55); font-size:14px; margin-bottom:12px; line-height:1.6; transition: color .3s; }
.footer-col a:hover{ color: var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; padding: 24px 40px; max-width:var(--container); margin:0 auto; flex-wrap:wrap; gap:10px; }
.footer-bottom p{ color: rgba(255,255,255,.4); font-size:13px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } .footer-bottom{ flex-direction:column; text-align:center; } }

/* ============================================================
   MULTI-PAGE ADDITIONS
   ============================================================ */

/* ---------- Nav dropdown ---------- */
.nav-links li{ position:relative; list-style:none; }
.nav-links{ list-style:none; }
.has-dropdown{ display:flex; align-items:center; gap:5px; cursor:pointer; }
.has-dropdown .caret{ width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s; }
.nav-item.open .caret{ transform: rotate(-135deg) translateY(2px); }
.dropdown-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform: translateX(-50%) translateY(8px);
  background:#fff; border-radius:14px; box-shadow: 0 30px 60px -20px rgba(11,31,53,.35);
  padding:10px; min-width: 280px; opacity:0; visibility:hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 500;
}
.nav-item:hover .dropdown-menu, .nav-item.open .dropdown-menu{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.dropdown-menu a{
  display:flex; align-items:center; gap:10px; padding: 12px 14px; border-radius:10px; color: var(--navy) !important;
  font-size:13.5px; font-weight:500; transition: background .25s;
}
.dropdown-menu a:hover{ background: var(--gray-light); }
.dropdown-menu a::after{ display:none; }
.dropdown-menu .dd-num{ width:26px; height:26px; border-radius:8px; background: var(--gray-light); color:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:11px; flex-shrink:0; }
.dropdown-menu a:hover .dd-num{ background: var(--accent); color:#fff; }
.dropdown-menu .dd-all{ border-top:1px solid var(--border); margin-top:6px; padding-top:14px; color: var(--accent) !important; font-weight:600; justify-content:center; }

@media (max-width: 1000px){
  .dropdown-menu{
    position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; background: rgba(255,255,255,.04);
    display:none; min-width:0; margin-top:10px;
  }
  .nav-item.open .dropdown-menu{ display:block; }
  .dropdown-menu a{ color: rgba(255,255,255,.85) !important; }
  .dropdown-menu a:hover{ background: rgba(255,255,255,.08); }
}

.nav-links a.current{ color:#fff; }
.nav-links a.current::after{ width:100%; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  position:relative; padding: 190px 0 90px; background: var(--navy); overflow:hidden;
}
.page-hero-bg{ position:absolute; inset:0; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; }
.page-hero-bg::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,31,53,.75), rgba(11,31,53,.97)); }
.page-hero-content{ position:relative; z-index:1; text-align:center; }
.breadcrumb{ display:flex; gap:8px; justify-content:center; align-items:center; color: rgba(255,255,255,.5); font-size:13px; margin-bottom:18px; }
.breadcrumb a{ color: rgba(255,255,255,.7); transition:color .3s; }
.breadcrumb a:hover{ color: var(--accent); }
.page-hero h1{ color:#fff; font-size: clamp(32px,5vw,54px); margin-bottom:14px; }
.page-hero p{ color: rgba(255,255,255,.65); max-width:640px; margin:0 auto; font-size:16.5px; line-height:1.7; }

/* ---------- Leadership (no photo, large & prominent) ---------- */
.leadership-section{ padding: 130px 0; background: var(--navy); position:relative; overflow:hidden; }
.leadership-section::before{
  content:''; position:absolute; top:-100px; right:-100px; width:500px; height:500px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,130,32,.14), transparent 65%);
}
.leadership-wrap{ position:relative; max-width: 920px; margin:0 auto; text-align:center; }
.leadership-quote-mark{ font-family: var(--font-display); font-size: 120px; line-height:.5; color: var(--accent); opacity:.5; margin-bottom:10px; }
.leadership-wrap .section-eyebrow{ justify-content:center; }
.leadership-name{ color:#fff; font-size: clamp(34px, 5vw, 58px); margin-bottom:8px; }
.leadership-role{ display:block; color: var(--accent); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:13.5px; margin-bottom:40px; }
.leadership-body p{ color: rgba(255,255,255,.72); font-size: 18.5px; line-height:1.85; margin-bottom:22px; max-width:800px; margin-left:auto; margin-right:auto; }
.leadership-signoff{ margin-top: 40px; display:inline-flex; flex-direction:column; align-items:center; gap:6px; }
.leadership-signoff .sig-name{ font-family: var(--font-display); font-weight:700; color:#fff; font-size:20px; }
.leadership-signoff .sig-role{ color: rgba(255,255,255,.5); font-size:13px; }
.leadership-divider{ width:70px; height:3px; background: var(--accent); margin: 34px auto; border-radius:4px; }

/* ---------- Services grid page ---------- */
.services-overview-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; margin-top:60px; }
.service-tile{
  border-radius:22px; overflow:hidden; background:#fff; border:1px solid var(--border); text-align:left;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); display:flex; flex-direction:column;
}
.service-tile:hover{ transform: translateY(-8px); box-shadow: 0 40px 60px -30px rgba(11,31,53,.3); }
.service-tile-media{ height:230px; overflow:hidden; }
.service-tile-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.service-tile:hover .service-tile-media img{ transform: scale(1.1); }
.service-tile-body{ padding:28px 26px; flex:1; display:flex; flex-direction:column; }
.service-tile-body span.stnum{ font-family:var(--font-display); font-weight:700; font-size:12px; color:var(--accent); letter-spacing:.1em; margin-bottom:8px; }
.service-tile-body h3{ font-size:20px; margin-bottom:10px; }
.service-tile-body p{ color: var(--text-soft); font-size:14.5px; line-height:1.7; flex:1; }
.service-tile-body .product-link{ margin-top:16px; }
@media (max-width: 1000px){ .services-overview-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 650px){ .services-overview-grid{ grid-template-columns: 1fr; } }

/* ---------- Service detail page ---------- */
.service-detail-section{ padding: 100px 0 60px; }
.service-detail-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:60px; align-items:flex-start; margin-bottom:80px; }
.service-main-img{ border-radius:22px; overflow:hidden; margin-bottom:20px; }
.service-main-img img{ width:100%; height:420px; object-fit:cover; }
.service-thumb-row{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.service-thumb-row img{ width:100%; height:110px; object-fit:cover; border-radius:12px; cursor:pointer; transition: opacity .3s, transform .3s; }
.service-thumb-row img:hover{ transform: translateY(-4px); opacity:.85; }
.service-copy .section-eyebrow{ margin-bottom:14px; }
.service-copy h1{ font-size: clamp(28px,4vw,42px); color:var(--navy); margin-bottom:20px; }
.service-copy p{ color: var(--text-soft); font-size:16.5px; line-height:1.85; margin-bottom:18px; }
.service-feature-list{ margin: 26px 0; display:flex; flex-direction:column; gap:14px; }
.service-feature-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text); }
.service-feature-list li::before{ content:'✓'; flex-shrink:0; width:24px; height:24px; border-radius:50%; background: rgba(245,130,32,.12); color:var(--accent); font-size:12px; display:flex; align-items:center; justify-content:center; font-weight:700; margin-top:2px; }
.service-spec-box{ background: var(--gray-light); border-radius:16px; padding: 26px; margin-top:10px; }
.service-spec-box h4{ font-size:15px; margin-bottom:14px; }
.service-spec-box dl{ display:grid; grid-template-columns: auto 1fr; gap:8px 16px; font-size:14px; }
.service-spec-box dt{ color:var(--text-soft); font-weight:600; }
.service-spec-box dd{ color:var(--text); }
@media (max-width: 900px){ .service-detail-grid{ grid-template-columns:1fr; gap:40px; } .service-main-img img{ height:300px; } }

.related-services{ padding: 80px 0 120px; background: var(--gray-light); }

/* ---------- Gallery page grid ---------- */
.gallery-page-grid{ column-count:4; column-gap:20px; margin-top:55px; }
.gallery-page-item{ break-inside:avoid; margin-bottom:20px; border-radius:16px; overflow:hidden; position:relative; }
.gallery-page-item img{ width:100%; height:auto; display:block; transition: transform .8s var(--ease); }
.gallery-page-item:hover img{ transform: scale(1.06); }
.gallery-page-item .masonry-overlay{ opacity:0; }
.gallery-page-item:hover .masonry-overlay{ opacity:1; }
@media (max-width: 1000px){ .gallery-page-grid{ column-count:2; } }
@media (max-width: 560px){ .gallery-page-grid{ column-count:1; } }

/* ---------- Footer map ---------- */
.footer-map{ width:100%; height: 320px; border:0; filter: grayscale(.3) contrast(1.05); display:block; }
.footer-map-wrap{ border-top:1px solid rgba(255,255,255,.08); }

/* ---------- Inquiry form section (service pages / contact) reuse contact form styles on light bg ---------- */
.inquiry-section{ background: var(--navy); padding: 90px 0; position:relative; overflow:hidden; }
.inquiry-section .contact-bg{ background: radial-gradient(circle at 20% 20%, rgba(245,130,32,.12), transparent 50%); }
.inquiry-grid{ position:relative; max-width: 720px; margin: 0 auto; }

/* generic page section spacing helper */
.py-section{ padding: 110px 0; }

/* ---------- Home page scrolling image gallery strip ---------- */
.image-marquee-section{ padding: 80px 0; background: var(--white); overflow:hidden; }
.image-marquee-track{
  display:flex; gap:20px; width:max-content;
  animation: imgMarquee 42s linear infinite;
}
.image-marquee-section:hover .image-marquee-track{ animation-play-state: paused; }
.image-marquee-item{
  position:relative; width: 260px; height: 190px; flex-shrink:0; border-radius:16px; overflow:hidden;
  box-shadow: 0 20px 40px -25px rgba(11,31,53,.3);
}
.image-marquee-item img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.image-marquee-item:hover img{ transform: scale(1.08); }
.image-marquee-item .masonry-overlay{ opacity:0; padding:14px; }
.image-marquee-item:hover .masonry-overlay{ opacity:1; }
.image-marquee-item .masonry-overlay span{ font-size:12.5px; }
@keyframes imgMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (max-width: 700px){
  .image-marquee-item{ width:200px; height:150px; }
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float{
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.6);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: waPulse 2.6s ease-in-out infinite;
}
.whatsapp-float svg{ width:30px; height:30px; }
.whatsapp-float:hover{ transform: scale(1.08); box-shadow: 0 16px 36px -6px rgba(37,211,102,.7); }
@keyframes waPulse{
  0%, 100% { box-shadow: 0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 0 rgba(37,211,102,.5); }
  50% { box-shadow: 0 12px 30px -8px rgba(37,211,102,.6), 0 0 0 12px rgba(37,211,102,0); }
}
@media (max-width: 700px){
  .whatsapp-float{ right:16px; bottom:16px; width:52px; height:52px; }
  .whatsapp-float svg{ width:26px; height:26px; }
}