/* ============================================
   NWS Modifications — Professional Storytelling
   Premium Dark Theme with Warm Amber Accents
   ============================================ */

:root {
  --bg-dark: #0c0c0e;
  --bg-card: rgba(255,255,255,0.03);
  --bg-card-hover: rgba(255,255,255,0.06);
  --bg-section-alt: #101012;
  --accent: #4ade80;
  --accent-dark: #22c55e;
  --accent-glow: rgba(74,222,128,0.12);
  --accent-glow-strong: rgba(74,222,128,0.25);
  --orange: #f97316;
  --orange-glow: rgba(249,115,22,0.2);
  --gold: #fbbf24;
  --text-primary: #e8e6e1;
  --text-secondary: #9a9a9d;
  --text-muted: #5e5e62;
  --border: rgba(255,255,255,0.06);
  --border-light: rgba(255,255,255,0.1);
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; transition: var(--transition); }
.container { max-width:1200px; margin:0 auto; padding:0 32px; }
.hidden { display:none !important; }

/* ---- Scroll Progress ---- */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  z-index:10001; transition: width 0.15s linear;
}

/* ---- Spark Canvas (hidden in new design) ---- */
.spark-canvas { display:none; }

/* ---- Film Grain Overlay ---- */
.grain-overlay {
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:256px 256px;
  mix-blend-mode:overlay;
}

/* ---- View Transitions ---- */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: 0.3s ease-in both fade-out, 0.3s ease-in both slide-out;
}
::view-transition-new(root) {
  animation: 0.3s ease-out both fade-in, 0.3s ease-out both slide-in;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes slide-in { from { transform: translateY(12px); } }
@keyframes slide-out { to { transform: translateY(-12px); } }

/* ---- Animations ---- */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Loader ---- */
.loader {
  position:fixed; inset:0; background:var(--bg-dark);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.loader.hidden { opacity:0; visibility:hidden; }
.loader-inner { display:flex; flex-direction:column; align-items:center; gap:24px; position:relative; }
.loader-torch { animation: torchGlow 2s ease-in-out infinite; }
.loader-glow { animation: pulseGlow 1s ease-in-out infinite alternate; }
@keyframes torchGlow {
  0%,100% { filter: drop-shadow(0 0 6px var(--accent-glow)); }
  50% { filter: drop-shadow(0 0 16px var(--accent-glow-strong)); }
}
@keyframes pulseGlow { 0%{r:6;opacity:0.7} 100%{r:10;opacity:1} }
.loader-sparks { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100px; height:100px; }
.l-spark {
  position:absolute; width:2px; height:2px; border-radius:50%;
  top:50%; left:50%; animation: loaderSpark 1.4s ease-out infinite;
}
.l-spark:nth-child(1){background:var(--accent);animation-delay:0s;--angle:30deg;--dist:35px}
.l-spark:nth-child(2){background:var(--orange);animation-delay:.12s;--angle:80deg;--dist:30px}
.l-spark:nth-child(3){background:var(--gold);animation-delay:.24s;--angle:140deg;--dist:40px}
.l-spark:nth-child(4){background:var(--accent);animation-delay:.36s;--angle:200deg;--dist:33px}
.l-spark:nth-child(5){background:var(--orange);animation-delay:.48s;--angle:260deg;--dist:38px}
.l-spark:nth-child(6){background:var(--gold);animation-delay:.6s;--angle:310deg;--dist:32px}
.l-spark:nth-child(7){background:var(--accent);animation-delay:.18s;--angle:55deg;--dist:42px}
.l-spark:nth-child(8){background:var(--orange);animation-delay:.4s;--angle:170deg;--dist:28px}
@keyframes loaderSpark {
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(calc(cos(var(--angle))*var(--dist)),calc(sin(var(--angle))*var(--dist))) scale(0);opacity:0}
}
.loader-text {
  font-family:var(--font-heading); font-size:16px; letter-spacing:10px;
  color:var(--text-muted); font-weight:300;
}
.loader-counter {
  font-family:var(--font-heading); font-size:48px; font-weight:600;
  color:var(--accent); letter-spacing:2px; line-height:1;
  margin-bottom:8px;
}
.loader-bar {
  width:120px; height:2px; background:var(--border); border-radius:2px;
  overflow:hidden; margin-bottom:12px;
}
.loader-bar-fill {
  height:100%; width:0%; background:var(--accent);
  transition:width 0.1s linear;
}

/* ---- Navigation ---- */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:16px 0; transition:var(--transition); background:transparent;
}
.navbar.scrolled {
  background:rgba(12,12,14,0.92); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px); padding:10px 0;
  border-bottom:1px solid var(--border);
}
.nav-container {
  max-width:1200px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; }
.logo-img {
  height:80px; width:auto; transition:var(--transition);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.navbar.scrolled .logo-img { height:52px; }
.nav-links { display:flex; list-style:none; gap:32px; }
.nav-link {
  font-family:var(--font-body); font-size:13px; font-weight:400;
  color:var(--text-secondary); text-transform:uppercase; letter-spacing:1.5px;
  position:relative; padding:4px 0;
}
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background:var(--accent); transition:var(--transition);
}
.nav-link:hover, .nav-link.active { color:var(--text-primary); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-cta {
  display:flex; align-items:center; gap:8px;
  background:transparent; color:var(--accent);
  padding:10px 24px; border-radius:100px; font-weight:500; font-size:13px;
  text-transform:uppercase; letter-spacing:1px;
  border:1px solid rgba(74,222,128,0.3); transition:var(--transition);
}
.nav-cta:hover {
  background:var(--accent); color:var(--bg-dark);
  border-color:var(--accent);
}
.hamburger {
  display:none; flex-direction:column; gap:6px;
  background:none; border:none; cursor:pointer; padding:4px; z-index:1001;
}
.hamburger span { width:24px; height:1.5px; background:var(--text-primary); transition:var(--transition); transform-origin:center; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ---- Hero ---- */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-image: url('../images/hero-shipping-container-sunset.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.hero-overlay {
  position:absolute; inset:0;
  background: 
    linear-gradient(180deg, rgba(12,12,14,0.65) 0%, rgba(12,12,14,0.98) 100%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.015'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-weld-line {
  position:absolute; bottom:0; left:0; width:100%; height:200px; opacity:0.15;
}
.weld-path {
  stroke-dasharray:1200; stroke-dashoffset:1200;
  animation:weldDraw 6s ease-in-out infinite;
  filter:drop-shadow(0 0 4px var(--accent));
}
@keyframes weldDraw { 0%{stroke-dashoffset:1200} 50%{stroke-dashoffset:0} 100%{stroke-dashoffset:-1200} }
.hero-particles { position:absolute; inset:0; pointer-events:none; }
.particle {
  position:absolute; width:2px; height:2px; border-radius:50%; opacity:0;
  animation:float-particle 5s ease-in-out infinite;
}
.particle.green { background:var(--accent); box-shadow:0 0 4px var(--accent); }
.particle.orange { background:var(--orange); box-shadow:0 0 4px var(--orange); }
.particle.gold { background:var(--gold); box-shadow:0 0 4px var(--gold); }
@keyframes float-particle {
  0%{opacity:0;transform:translateY(0) scale(0)} 20%{opacity:0.5} 100%{opacity:0;transform:translateY(-200px) scale(1)}
}
.hero-content { position:relative; z-index:2; text-align:center; padding:0 24px; max-width:860px; }
.hero-badge {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 24px; background:rgba(74,222,128,0.08);
  border:1px solid rgba(74,222,128,0.15); border-radius:100px;
  font-size:12px; font-weight:400; color:var(--accent);
  letter-spacing:2px; text-transform:uppercase;
  margin-bottom:36px; margin-top:30px;
  opacity:0; transform:translateY(20px); animation:fadeInUp 1s 0.3s forwards;
}
.badge-pulse {
  width:6px; height:6px; background:var(--accent); border-radius:50%;
  animation:badgePulse 2.5s ease-in-out infinite;
}
@keyframes badgePulse { 0%,100%{box-shadow:0 0 0 0 var(--accent-glow-strong)} 50%{box-shadow:0 0 0 8px transparent} }
.hero-title {
  font-family:var(--font-heading); font-size:clamp(44px,7.5vw,88px);
  font-weight:600; line-height:1.08; text-transform:uppercase; margin-bottom:28px;
  letter-spacing:-0.5px;
}
.hero-title .line {
  display:block; opacity:0; transform:translateY(40px);
  animation:heroClipReveal 1s forwards;
  clip-path:inset(0 0 100% 0);
}
@keyframes heroClipReveal {
  to { opacity:1; transform:translateY(0); clip-path:inset(0 0 0% 0); }
}
.hero-title .line:nth-child(1){animation-delay:.5s}
.hero-title .line:nth-child(2){animation-delay:.75s}
.hero-title .line:nth-child(3){animation-delay:1s}
.hero-title .accent { color:var(--accent); }
.typed-wrapper { display:block; min-height:1.1em; position:relative; }
.typed-cursor {
  display:inline-block; width:2px; height:0.8em;
  background:var(--accent); margin-left:4px;
  animation:blink 1s infinite; vertical-align:baseline;
}
@keyframes blink { 0%,45%{opacity:1} 50%,100%{opacity:0} }
.hero-subtitle {
  font-size:clamp(16px,1.8vw,19px); color:var(--text-secondary);
  max-width:560px; margin:0 auto 44px; font-weight:300; line-height:1.8;
  opacity:0; transform:translateY(20px); animation:fadeInUp 1s 1.1s forwards;
}
.hero-actions {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  opacity:0; transform:translateY(20px); animation:fadeInUp 1s 1.3s forwards;
}
.hero-stats {
  display:flex; justify-content:center; align-items:center; gap:48px;
  margin-top:72px; opacity:0; transform:translateY(20px); animation:fadeInUp 1s 1.5s forwards;
}
.stat { text-align:center; }
.stat-number {
  font-family:var(--font-heading); font-size:40px; font-weight:600; color:var(--accent);
}
.stat-plus { font-family:var(--font-heading); font-size:26px; font-weight:600; color:var(--accent); }
.stat-label {
  display:block; font-size:12px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:1.5px; margin-top:6px; font-weight:400;
}
.stat-divider { width:1px; height:36px; background:var(--border-light); }
@keyframes fadeInUp { to{opacity:1;transform:translateY(0)} }
.scroll-indicator {
  position:absolute; bottom:48px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:fadeInUp 1s 2.2s forwards;
}
@media (max-height: 800px) {
  .scroll-indicator { display: none; }
}
.scroll-indicator span { font-size:10px; text-transform:uppercase; letter-spacing:3px; color:var(--text-muted); font-weight:300; }
.scroll-line { width:1px; height:48px; background:linear-gradient(to bottom,var(--accent),transparent); animation:scrollPulse 2.5s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.2;transform:scaleY(.5)} 50%{opacity:.8;transform:scaleY(1)} }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 32px; border-radius:100px;
  font-family:var(--font-body); font-size:14px; font-weight:500;
  text-transform:uppercase; letter-spacing:1px;
  cursor:pointer; transition:var(--transition); border:none;
  position:relative; overflow:hidden;
}
.btn-primary { background:var(--accent); color:var(--bg-dark); position:relative; }
.btn-primary::before {
  content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left 0.5s; border-radius:100px;
}
.btn-primary:hover::before { left:120%; }
.btn-primary:hover { background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 12px 40px var(--accent-glow); }
.btn-glow::after {
  content:''; position:absolute; inset:-2px; border-radius:100px;
  background:linear-gradient(45deg,var(--accent),var(--orange),var(--accent));
  z-index:-1; opacity:0; transition:opacity 0.4s; filter:blur(12px);
}
.btn-glow:hover::after { opacity:0.4; }
.btn-outline { background:transparent; color:var(--text-primary); border:1px solid var(--border-light); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.magnetic-wrap { display:inline-block; position:relative; }
.btn-magnetic { transition:transform 0.3s cubic-bezier(0.23,1,0.32,1); will-change:transform; }
.btn-magnetic .btn-text { display:inline-flex; align-items:center; gap:10px; transition:transform 0.25s cubic-bezier(0.23,1,0.32,1); will-change:transform; }
.btn-full { width:100%; justify-content:center; }

/* ---- Trust Bar ---- */
.trust-bar { background:var(--accent); padding:12px 0; overflow:hidden; white-space:nowrap; }
.trust-track { display:inline-flex; align-items:center; gap:48px; animation:marquee 30s linear infinite; }
.trust-track span { font-family:var(--font-heading); font-size:13px; font-weight:500; color:var(--bg-dark); letter-spacing:4px; flex-shrink:0; }
.trust-dot { width:4px; height:4px; background:var(--bg-dark); border-radius:50%; opacity:0.4; flex-shrink:0; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ---- Section Headers ---- */
.section-tag {
  display:inline-block; font-size:12px; font-weight:500;
  text-transform:uppercase; letter-spacing:4px; color:var(--accent); margin-bottom:16px;
}
.section-title {
  font-family:var(--font-heading); font-size:clamp(30px,4.5vw,50px);
  font-weight:600; text-transform:uppercase; line-height:1.1; margin-bottom:20px;
  letter-spacing:-0.3px;
}
.section-subtitle { font-size:16px; color:var(--text-secondary); max-width:580px; margin:0 auto; line-height:1.8; font-weight:300; }
.section-header { text-align:center; margin-bottom:72px; }

/* ---- Craftsmanship Banner ---- */
.parallax-banner {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../images/weld-bead-macro.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.parallax-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,12,14,0.6) 0%, rgba(12,12,14,0.95) 100%);
}
.craftsmanship-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 64px);
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.1;
  color: var(--text-primary);
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

/* ---- Services ---- */
.services { padding:140px 0; background:var(--bg-dark); }
.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.service-card {
  background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05);
  border-radius:var(--radius-lg); padding:44px;
  transition:var(--transition-slow); position:relative; overflow:hidden;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transform-style:preserve-3d; z-index: 1;
}
.service-card-glow {
  position:absolute; inset:0;
  background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(74,222,128,0.15) 0%, transparent 50%);
  pointer-events:none; opacity:0; transition:opacity 0.4s; z-index:-1;
}
.service-card:hover .service-card-glow { opacity:1; }
.service-card::before {
  content:''; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(74,222,128,0.6) 0%, transparent 40%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition:opacity 0.4s; pointer-events:none;
}
.service-card:hover { transform:translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.service-card:hover::before { opacity:1; }
.service-icon {
  width:64px; height:64px; border-radius:14px;
  background:var(--accent-glow); display:flex; align-items:center; justify-content:center;
  margin-bottom:28px; color:var(--accent); transition:var(--transition);
}
.service-card:hover .service-icon { background:var(--accent-glow-strong); }
.service-title { font-family:var(--font-heading); font-size:22px; font-weight:600; text-transform:uppercase; margin-bottom:14px; letter-spacing:0.5px; }
.service-desc { color:var(--text-secondary); font-size:15px; line-height:1.8; margin-bottom:24px; font-weight:300; }
.service-list { list-style:none; margin-bottom:24px; }
.service-list li { position:relative; padding-left:18px; color:var(--text-secondary); font-size:14px; margin-bottom:10px; line-height:1.6; font-weight:300; }
.service-list li::before { content:''; position:absolute; left:0; top:9px; width:4px; height:4px; background:var(--accent); border-radius:50%; }
.service-tag { display:inline-block; padding:6px 16px; background:var(--accent-glow); border-radius:100px; font-size:12px; color:var(--accent); font-weight:400; }

/* ---- Process ---- */
.process { padding:100px 0; background:var(--bg-section-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.process-steps { display:flex; align-items:flex-start; justify-content:center; }
.process-step { text-align:center; flex:1; max-width:280px; padding:0 24px; }
.step-number { font-family:var(--font-heading); font-size:56px; font-weight:600; color:var(--accent); opacity:0.2; line-height:1; margin-bottom:20px; transition:var(--transition); }
.process-step:hover .step-number { opacity:0.8; }
.process-step h3 { font-family:var(--font-heading); font-size:20px; font-weight:500; text-transform:uppercase; margin-bottom:12px; letter-spacing:0.5px; }
.process-step p { color:var(--text-secondary); font-size:15px; line-height:1.8; font-weight:300; }
.process-connector { width:80px; height:1px; background:linear-gradient(90deg,transparent,var(--border-light),transparent); margin-top:40px; flex-shrink:0; position:relative; overflow:hidden; }
.connector-spark { position:absolute; width:8px; height:1px; background:var(--accent); box-shadow:0 0 4px var(--accent); animation:sparkMove 3s ease-in-out infinite; border-radius:2px; }
@keyframes sparkMove { 0%{left:-8px} 100%{left:100%} }

/* ---- Comparison ---- */
.comparison { padding:140px 0; background:var(--bg-dark); }
.comparison-slider { max-width:900px; margin:0 auto; }
.comparison-wrapper { position:relative; overflow:hidden; border-radius:var(--radius-lg); aspect-ratio:16/9; cursor:ew-resize; border:1px solid var(--border); }
.comparison-before, .comparison-after { position:absolute; inset:0; }
.comparison-before img, .comparison-after img { width:100%; height:100%; object-fit:cover; }
.comparison-after { clip-path:inset(0 0 0 50%); }
.comparison-label { position:absolute; bottom:20px; padding:8px 20px; background:rgba(0,0,0,0.6); backdrop-filter:blur(12px); border-radius:100px; font-family:var(--font-heading); font-size:13px; text-transform:uppercase; letter-spacing:2px; font-weight:400; }
.comparison-before .comparison-label { left:20px; color:var(--text-secondary); }
.comparison-after .comparison-label { right:20px; color:var(--accent); border:1px solid rgba(74,222,128,0.3); }
.comparison-handle { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:4px; display:flex; flex-direction:column; align-items:center; z-index:10; cursor:ew-resize; }
.handle-line { flex:1; width:1px; background:var(--accent); }
.handle-circle { width:44px; height:44px; border-radius:50%; background:rgba(12,12,14,0.8); border:1px solid var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent); backdrop-filter:blur(8px); flex-shrink:0; }

/* ---- About ---- */
.about { padding:140px 0; background:var(--bg-section-alt); }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.about-images { position:relative; }
.about-img-main { border-radius:var(--radius-lg); overflow:hidden; }
.about-img-main img { width:100%; height:450px; object-fit:cover; transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.about-img-main:hover img { transform:scale(1.03); }
.about-img-secondary { position:absolute; bottom:-40px; right:-40px; width:220px; height:180px; border-radius:var(--radius); overflow:hidden; border:4px solid var(--bg-section-alt); }
.about-img-secondary img { width:100%; height:100%; object-fit:cover; }
.about-experience-badge {
  position:absolute; top:-20px; right:-20px; width:110px; height:110px;
  background:var(--accent); border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:badgeFloat 4s ease-in-out infinite;
}
@keyframes badgeFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.badge-number { font-family:var(--font-heading); font-size:32px; font-weight:600; color:var(--bg-dark); line-height:1; }
.badge-text { font-size:10px; font-weight:500; color:var(--bg-dark); text-align:center; line-height:1.3; }
.about-text { color:var(--text-secondary); font-size:16px; line-height:1.9; margin-bottom:16px; font-weight:300; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:36px 0; }
.about-feature { display:flex; align-items:center; gap:12px; color:var(--text-primary); font-size:14px; font-weight:400; }
.about-feature svg { color:var(--accent); flex-shrink:0; }
.about-areas { margin-top:36px; padding-top:28px; border-top:1px solid var(--border); }
.about-areas h4 { font-family:var(--font-heading); font-size:15px; text-transform:uppercase; letter-spacing:2px; margin-bottom:16px; color:var(--text-muted); font-weight:400; }
.area-tags { display:flex; flex-wrap:wrap; gap:8px; }
.area-tag { padding:6px 16px; border:1px solid var(--border-light); border-radius:100px; font-size:13px; color:var(--text-secondary); transition:var(--transition); font-weight:300; }
.area-tag:hover { border-color:var(--accent); color:var(--accent); }
.area-tag.highlight { background:var(--accent); color:var(--bg-dark); border-color:var(--accent); font-weight:500; }
.area-note { margin-top:16px; font-size:13px; color:var(--text-muted); line-height:1.7; font-style:italic; font-weight:300; }

/* ---- Gallery ---- */
.gallery { padding:140px 0; background:var(--bg-dark); }
.gallery-filters { display:flex; justify-content:center; gap:12px; margin-bottom:48px; flex-wrap:wrap; }
.filter-btn {
  padding:10px 24px; background:transparent; border:1px solid var(--border-light);
  border-radius:100px; color:var(--text-secondary); font-family:var(--font-body);
  font-size:13px; font-weight:400; cursor:pointer; transition:var(--transition);
  text-transform:uppercase; letter-spacing:1px;
}
.filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.filter-btn.active { background:var(--accent); border-color:var(--accent); color:var(--bg-dark); }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; grid-auto-flow:dense; }
.gallery-item {
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  aspect-ratio:4/3; transition:transform 0.5s,opacity 0.5s,box-shadow 0.5s;
}
.gallery-item:hover { box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.gallery-item.hidden-item { display:none; }
.gallery-item.large { grid-column:span 2; }
.gallery-item.tall { grid-row:span 2; aspect-ratio:auto; }
.gallery-item img { width:100%;height:100%;object-fit:cover;transition:transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.gallery-item:hover img { transform:scale(1.06); }
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,transparent 50%); display:flex; align-items:flex-end; padding:24px; opacity:0; transition:var(--transition); }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay span { font-family:var(--font-heading); font-size:15px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-primary); font-weight:400; }

/* ---- Lightbox ---- */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.95); z-index:10000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:var(--transition); backdrop-filter:blur(16px); }
.lightbox.active { opacity:1; visibility:visible; }
.lightbox-img { max-width:90%; max-height:85vh; object-fit:contain; border-radius:var(--radius); transition:transform 0.4s; }
.lightbox.active .lightbox-img { animation:lightboxZoomIn 0.5s ease-out; }
@keyframes lightboxZoomIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
.lightbox-close,.lightbox-prev,.lightbox-next { position:absolute; background:none; border:none; color:rgba(255,255,255,0.6); font-size:36px; cursor:pointer; padding:16px; transition:var(--transition); z-index:10; }
.lightbox-close { top:20px; right:30px; }
.lightbox-prev { left:20px; top:50%; transform:translateY(-50%); font-size:44px; }
.lightbox-next { right:20px; top:50%; transform:translateY(-50%); font-size:44px; }
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover { color:var(--accent); }
.lightbox-counter { position:absolute; top:30px; left:30px; font-family:var(--font-heading); font-size:13px; color:var(--text-muted); letter-spacing:2px; }
.lightbox-caption { position:absolute; bottom:30px; left:50%; transform:translateX(-50%); font-family:var(--font-heading); text-transform:uppercase; letter-spacing:2px; color:var(--text-secondary); font-size:13px; }

/* ---- Testimonials ---- */
.testimonials { padding:140px 0; background:var(--bg-section-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.testimonial-carousel { max-width:800px; margin:0 auto; overflow:hidden; }
.testimonial-track { display:flex; transition:transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.testimonial-card {
  min-width:100%; padding:48px 48px 48px 80px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius-lg); margin:0 12px;
  backdrop-filter:blur(8px); position:relative;
}
.testimonial-card::before {
  content:'\201C'; position:absolute; top:20px; left:24px;
  font-family:Georgia,'Times New Roman',serif; font-size:120px;
  color:var(--accent); opacity:0.12; line-height:1; pointer-events:none;
}
.testimonial-stars { display:flex; gap:4px; margin-bottom:24px; }
.testimonial-text { font-size:18px; line-height:1.9; color:var(--text-primary); margin-bottom:32px; font-style:italic; font-weight:300; }
.testimonial-author { display:flex; align-items:center; gap:16px; }
.author-avatar {
  width:48px; height:48px; border-radius:50%; background:var(--accent-glow);
  color:var(--accent); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:18px; font-weight:500; border:1px solid rgba(74,222,128,0.3);
}
.testimonial-author strong { display:block; font-size:15px; margin-bottom:2px; font-weight:500; }
.testimonial-author span { font-size:13px; color:var(--text-muted); font-weight:300; }
.carousel-controls { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px; }
.carousel-btn {
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border-light);
  background:transparent; color:var(--text-secondary); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:var(--transition);
}
.carousel-btn:hover { border-color:var(--accent); color:var(--accent); }
.carousel-dots { display:flex; gap:8px; }
.carousel-dot { width:8px; height:8px; border-radius:50%; background:var(--border-light); cursor:pointer; transition:var(--transition); }
.carousel-dot.active { background:var(--accent); }

/* ---- FAQ ---- */
.faq { padding:140px 0; background:var(--bg-dark); }
.faq-grid { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:var(--transition); }
.faq-item:hover { border-color:var(--border-light); }
.faq-item.active { border-color:rgba(74,222,128,0.2); }
.faq-question {
  width:100%; padding:22px 28px; background:var(--bg-card); border:none;
  color:var(--text-primary); font-family:var(--font-body); font-size:16px; font-weight:400;
  text-align:left; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:16px; transition:var(--transition);
}
.faq-question:hover { background:var(--bg-card-hover); }
.faq-icon { flex-shrink:0; color:var(--accent); transition:transform 0.4s; }
.faq-item.active .faq-icon { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.5s cubic-bezier(0.25,0.46,0.45,0.94),padding 0.5s; background:var(--bg-card); }
.faq-item.active .faq-answer { max-height:300px; }
.faq-answer p { padding:0 28px 24px; color:var(--text-secondary); font-size:15px; line-height:1.9; font-weight:300; }

/* ---- CTA Banner ---- */
.cta-banner {
  padding:100px 0;
  background-image: url('../images/steel-beam-welder.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background: rgba(12,12,14,0.88);
  pointer-events:none; z-index:0;
}
.cta-banner::after {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle at center,var(--accent-glow) 0%,transparent 60%);
  animation:ctaPulse 6s ease-in-out infinite; pointer-events:none; z-index:0;
}
@keyframes ctaPulse { 0%,100%{opacity:.05;transform:scale(.8)} 50%{opacity:.12;transform:scale(1.2)} }
.cta-content { text-align:center; position:relative; z-index:1; }
.cta-content h2 { font-family:var(--font-heading); font-size:clamp(26px,3.5vw,42px); font-weight:600; text-transform:uppercase; margin-bottom:14px; letter-spacing:-0.3px; }
.cta-content p { color:var(--text-secondary); font-size:17px; margin-bottom:36px; font-weight:300; }
.cta-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---- Contact ---- */
.contact { padding:140px 0; background:var(--bg-section-alt); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.contact-text { color:var(--text-secondary); font-size:16px; line-height:1.9; margin-bottom:40px; font-weight:300; }
.contact-details { display:flex; flex-direction:column; gap:28px; margin-bottom:36px; }
.contact-item { display:flex; align-items:flex-start; gap:16px; }
.contact-icon { width:48px; height:48px; border-radius:12px; background:var(--accent-glow); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0; }
.contact-item h4 { font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:4px; color:var(--text-muted); }
.contact-item a,.contact-item span { font-size:16px; color:var(--text-primary); font-weight:300; }
.contact-item a:hover { color:var(--accent); }
.social-links { display:flex; gap:12px; }
.social-links a { width:44px; height:44px; border:1px solid var(--border-light); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:var(--transition); }
.social-links a:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.contact-form-wrapper {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:44px; position:relative; overflow:hidden; backdrop-filter:blur(8px);
}
.contact-form-wrapper::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.contact-form h3 { font-family:var(--font-heading); font-size:26px; font-weight:500; text-transform:uppercase; margin-bottom:8px; letter-spacing:0.5px; }
.form-note { color:var(--text-muted); font-size:14px; margin-bottom:32px; font-weight:300; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:20px; }
.form-group label { display:block; font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted); margin-bottom:8px; }
.form-group input,.form-group select,.form-group textarea {
  width:100%; padding:13px 18px; background:rgba(255,255,255,0.03);
  border:1px solid var(--border-light); border-radius:var(--radius);
  color:var(--text-primary); font-family:var(--font-body); font-size:15px;
  transition:var(--transition); outline:none; font-weight:300;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-group input::placeholder,.form-group textarea::placeholder { color:var(--text-muted); }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235e5e62' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.form-group textarea { resize:vertical; min-height:100px; }
.form-disclaimer { font-size:12px; color:var(--text-muted); text-align:center; margin-top:16px; font-weight:300; }

/* ---- Floating CTA ---- */
.floating-cta { position:fixed; bottom:20px; right:20px; z-index:999; display:none; flex-direction:column; gap:10px; opacity:0; transform:translateY(20px); transition:var(--transition); }
.floating-cta.visible { opacity:1; transform:translateY(0); }
.floating-phone { width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--bg-dark); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 24px var(--accent-glow); animation:phoneRing 4s ease-in-out infinite; }
@keyframes phoneRing { 0%,90%,100%{transform:rotate(0)} 92%{transform:rotate(12deg)} 94%{transform:rotate(-12deg)} 96%{transform:rotate(8deg)} 98%{transform:rotate(-8deg)} }
.floating-quote { padding:10px 18px; background:rgba(12,12,14,0.9); border:1px solid rgba(74,222,128,0.3); border-radius:100px; color:var(--accent); font-size:11px; font-weight:500; text-transform:uppercase; text-align:center; letter-spacing:1px; backdrop-filter:blur(8px); }

/* ---- Back to Top ---- */
.back-to-top {
  position:fixed; bottom:30px; right:30px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.05); border:1px solid var(--border-light);
  color:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:var(--transition); z-index:998;
  backdrop-filter:blur(8px); overflow:visible;
}
.back-to-top.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--accent); color:var(--bg-dark); border-color:var(--accent); }
.btt-spark { position:absolute; width:3px; height:3px; background:var(--accent); border-radius:50%; top:-4px; left:50%; transform:translateX(-50%); opacity:0; transition:opacity 0.3s; }
.back-to-top:hover .btt-spark { opacity:1; animation:bttSpark 0.6s ease-out forwards; }
@keyframes bttSpark { 0%{top:-4px;opacity:1} 100%{top:-24px;opacity:0} }

/* ---- Footer ---- */
.footer { padding:80px 0 40px; background:#08080a; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px; margin-bottom:60px; }
.footer-logo { height:80px; width:auto; margin-bottom:20px; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.footer-brand p { color:var(--text-muted); font-size:14px; line-height:1.8; max-width:320px; font-weight:300; }
.footer-links h4,.footer-contact h4 { font-family:var(--font-heading); font-size:14px; text-transform:uppercase; letter-spacing:2px; margin-bottom:20px; color:var(--text-primary); font-weight:400; }
.footer-links a,.footer-contact a,.footer-contact span { display:block; color:var(--text-muted); font-size:14px; margin-bottom:10px; transition:var(--transition); font-weight:300; }
.footer-links a:hover,.footer-contact a:hover { color:var(--accent); padding-left:4px; }
.footer-bottom { padding-top:30px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-bottom p { color:var(--text-muted); font-size:12px; letter-spacing:0.5px; font-weight:300; margin:0; }
.legal-links { display:flex; gap:20px; }
.legal-links a { color:var(--text-muted); font-size:12px; transition:var(--transition); }
.legal-links a:hover { color:var(--accent); }
@media (max-width: 600px) {
  .footer-bottom { flex-direction:column; justify-content:center; text-align:center; }
}

/* ---- Animations ---- */
[data-animate] { opacity:0; transform:translateY(24px); transition:opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
[data-animate].visible { opacity:1; transform:translateY(0); }

/* Directional reveals */
[data-animate-left] { opacity:0; transform:translateX(-40px); transition:opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
[data-animate-left].visible { opacity:1; transform:translateX(0); }
[data-animate-right] { opacity:0; transform:translateX(40px); transition:opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
[data-animate-right].visible { opacity:1; transform:translateX(0); }
[data-animate-scale] { opacity:0; transform:scale(0.92); transition:opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94),transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
[data-animate-scale].visible { opacity:1; transform:scale(1); }

/* Section gradient dividers */
.section-divider {
  height:120px; position:relative; pointer-events:none;
}
.section-divider::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 70%);
  opacity:0.5;
}

/* ---- Service map (unused but kept for compat) ---- */
.service-map{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.map-svg{width:100%;height:auto}.map-region{transition:var(--transition)}
.county{fill:rgba(74,222,128,0.06);stroke:var(--accent);stroke-width:1;opacity:.5;transition:var(--transition);cursor:pointer}
.county:hover,.county.active{fill:rgba(74,222,128,0.15);opacity:1}
.pin-pulse{animation:pinPulse 2s ease-out infinite}
@keyframes pinPulse{0%{r:6;opacity:.8}100%{r:20;opacity:0}}
.map-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.legend-item{padding:4px 12px;border:1px solid var(--border-light);border-radius:50px;font-size:11px;color:var(--text-muted)}
.legend-item.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:1024px){
  .services-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:60px}
  .about-img-secondary{right:0;bottom:-20px}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:60px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:768px){
  .services,.comparison,.about,.gallery,.testimonials,.faq,.contact{padding:80px 0}
  .process{padding:60px 0}
  .section-header{margin-bottom:48px}
  .section-title{font-size:clamp(26px,7vw,36px)}
  .section-subtitle{font-size:15px}
  .container{padding:0 20px}
  .spark-canvas{display:none}
  .nav-links{position:fixed;top:0;right:-100%;width:80%;max-width:360px;height:100vh;height:100dvh;background:rgba(12,12,14,0.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);flex-direction:column;align-items:flex-start;padding:100px 40px 40px;gap:8px;transition:var(--transition-slow);border-left:1px solid var(--border);overflow-y:auto}
  .nav-links.active{right:0}
  .nav-link{font-size:18px;padding:12px 0;width:100%;border-bottom:1px solid var(--border)}
  .nav-link::after{display:none}
  .hamburger{display:flex}
  .nav-cta{display:none}
  .floating-cta{display:flex;bottom:16px;right:16px}
  .floating-phone{width:48px;height:48px}
  .floating-quote{font-size:11px;padding:8px 14px}
  .back-to-top{bottom:86px;right:18px;width:40px;height:40px}
  .hero{min-height:100vh;min-height:100dvh}
  .hero-content{padding:0 16px}
  .hero-badge{font-size:10px;padding:8px 16px;margin-bottom:24px;margin-top:20px}
  .hero-title{font-size:clamp(34px,10vw,56px);margin-bottom:18px}
  .hero-subtitle{font-size:15px;margin-bottom:28px}
  .hero-actions{gap:12px}
  .hero-actions .btn{padding:12px 24px;font-size:13px}
  .hero-stats{gap:24px;margin-top:44px}
  .stat-number{font-size:28px}
  .stat-label{font-size:11px}
  .stat-divider{height:28px}
  .scroll-indicator{bottom:28px}
  .trust-bar{padding:10px 0}
  .process-steps{flex-direction:column;align-items:center;gap:8px}
  .process-step{max-width:100%;padding:0}
  .step-number{font-size:44px;margin-bottom:10px}
  .process-step h3{font-size:18px}
  .process-step p{font-size:14px}
  .process-connector{width:2px;height:30px;background:linear-gradient(180deg,transparent,var(--border-light),transparent)}
  .connector-spark{animation:sparkMoveVertical 2.5s ease-in-out infinite}
  @keyframes sparkMoveVertical{0%{top:-4px;left:0}100%{top:100%;left:0}}
  .comparison-wrapper{aspect-ratio:4/3}
  .comparison-label{font-size:11px;padding:6px 12px;bottom:12px}
  .comparison-before .comparison-label{left:10px}
  .comparison-after .comparison-label{right:10px}
  .handle-circle{width:38px;height:38px}
  .about-img-main img{height:300px}
  .about-experience-badge{width:80px;height:80px;top:-12px;right:-8px}
  .badge-number{font-size:24px}
  .badge-text{font-size:9px}
  .about-text{font-size:15px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .gallery-item.large,.gallery-item.tall{grid-column:span 1;grid-row:span 1;aspect-ratio:4/3}
  .gallery-overlay{opacity:1;background:linear-gradient(to top,rgba(0,0,0,0.5) 0%,transparent 50%)}
  .gallery-overlay span{font-size:12px}
  .testimonial-card{padding:28px;margin:0 6px}
  .testimonial-text{font-size:15px;line-height:1.8;margin-bottom:24px}
  .testimonial-stars svg{width:16px;height:16px}
  .author-avatar{width:40px;height:40px;font-size:16px}
  .testimonial-author strong{font-size:14px}
  .carousel-controls{margin-top:24px}
  .faq-question{padding:18px 20px;font-size:15px}
  .faq-answer p{padding:0 20px 18px;font-size:14px}
  .cta-banner{padding:60px 0}
  .cta-content p{font-size:15px;margin-bottom:28px}
  .contact-grid{gap:40px}
  .contact-text{font-size:15px;margin-bottom:28px}
  .contact-form-wrapper{padding:28px}
  .contact-form h3{font-size:22px}
  .form-row{grid-template-columns:1fr}
  .form-group input,.form-group select,.form-group textarea{padding:11px 14px;font-size:14px}
  .footer{padding:50px 0 30px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-logo{height:64px}
  .lightbox-img{max-width:95%;max-height:80vh}
  .lightbox-prev{left:8px;font-size:32px;padding:10px}
  .lightbox-next{right:8px;font-size:32px;padding:10px}
  .lightbox-close{top:12px;right:16px;font-size:28px}
  .lightbox-counter{top:16px;left:16px;font-size:12px}
  .lightbox-caption{bottom:16px;font-size:12px}
}
@media(max-width:480px){
  .services,.comparison,.about,.gallery,.testimonials,.faq,.contact{padding:56px 0}
  .hero-title{font-size:clamp(30px,9vw,38px)}
  .hero-badge{font-size:9px;padding:6px 12px;letter-spacing:1px}
  .hero-actions{flex-direction:column;align-items:stretch;width:100%;padding:0 8px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-actions .magnetic-wrap{width:100%}
  .hero-stats{flex-direction:row;flex-wrap:wrap;gap:0;justify-content:space-around;margin-top:32px;padding:0 8px}
  .stat{flex:1;min-width:0}
  .stat-number{font-size:24px}
  .stat-label{font-size:10px}
  .stat-divider{width:1px;height:28px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .about-features{grid-template-columns:1fr}
  .about-img-main img{height:220px}
  .contact-form-wrapper{padding:20px}
  .contact-form h3{font-size:20px}
  .service-card{padding:28px}
  .service-icon{width:52px;height:52px;margin-bottom:20px}
  .service-title{font-size:19px}
  .service-desc{font-size:14px}
  .trust-track span{font-size:11px;letter-spacing:3px}
  .gallery-filters{gap:6px;padding:0 4px}
  .filter-btn{padding:8px 14px;font-size:11px}
  .cta-banner{padding:44px 0}
  .cta-content h2{font-size:clamp(22px,6vw,30px)}
  .cta-content p{font-size:14px;margin-bottom:20px}
  .cta-actions{flex-direction:column;align-items:stretch;padding:0 12px}
  .cta-actions .btn{width:100%;justify-content:center}
  .cta-actions .magnetic-wrap{width:100%}
  .testimonial-card{padding:20px}
  .testimonial-text{font-size:14px;margin-bottom:16px}
  .section-header{margin-bottom:36px}
  .section-tag{font-size:11px;letter-spacing:3px}
  .footer{padding:40px 0 24px}
  .scroll-indicator{display:none}
}

/* Fix iOS Safari background-attachment bug */
@media (max-width: 1024px) {
  .hero-bg, .parallax-banner, .cta-banner {
    background-attachment: scroll !important;
  }
}

/* Service-page "Recent Work" photo galleries (real job photos) */
.work-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.work-shot {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.work-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.work-shot:hover img {
  transform: scale(1.05);
}
.work-shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 0.95rem 0.7rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  pointer-events: none;
}