.hero-service-detail {
  padding: 96px 0 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(99,102,241,0.18), rgba(99,102,241,0));
}

.hero-service-detail h1 {
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 10px;
}

.hero-service-detail .hero-sub {
  color: var(--text-subtle);
  max-width: 760px;
  margin: 0 auto;
}

.service-details {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  align-items: start;
}

.service-details .checks {
  margin-top: 12px;
}

.service-aside {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 16px;
}

.service-aside .aside-title {
  font-weight: 600;
  margin: 0 0 8px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.gallery-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}

.form-card {
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.form-group {
  display: grid;
  gap: 6px;
}

.form-group label {
  font-size: 14px;
  color: var(--text-subtle);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--surface-1);
  color: var(--text-1);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 10px 12px;
}

.form-actions {
  margin-top: 12px;
}

/* Embedded form styling */
.form-embed { max-width: 720px; margin: 0; }
.form-embed iframe { border-radius: 10px; background: var(--surface-1); border: 1px solid var(--border-1); height: 560px; }
.form-note { margin: 8px 0 0; color: var(--text-subtle); font-size: 14px; }
.form-note .link { color: var(--accent, #2fd4ff); }

@media (max-width: 720px) {
  .form-embed iframe { height: 640px; }
}

/* Enquiry: two-column layout */
.enquiry-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.enquiry-grid > .section-head { grid-column: 1 / -1; }
.enquiry-left { display: block; }
.enquiry-right { position: relative; }

/* Electrical animated visual */
.elec-visual { position: sticky; top: 80px; border-radius: 14px; border: 1px solid var(--border-1); background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(16,185,129,0.10)); height: 360px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,0.18); }
.elec-visual .bolt { position: absolute; left: 50%; top: 22%; width: 80px; height: 120px; transform: translateX(-50%) rotate(-8deg); background: linear-gradient(180deg, #facc15, #f59e0b); clip-path: polygon(40% 0, 60% 0, 50% 36%, 66% 36%, 32% 100%, 42% 64%, 30% 64%); filter: drop-shadow(0 8px 20px rgba(250,204,21,0.35)); animation: boltPulse 2.8s ease-in-out infinite; }
.elec-visual .wire { position: absolute; left: 16px; right: 16px; top: 58%; height: 4px; background: linear-gradient(90deg, #22d3ee, #0ea5e9, #22c55e); border-radius: 4px; box-shadow: 0 0 16px rgba(34,211,238,0.4); animation: wireGlow 4.2s ease-in-out infinite; }
.elec-visual .spark { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee, 0 0 24px rgba(34,211,238,0.6); opacity: 0; }
.elec-visual .spark.s1 { left: 18%; top: 56%; animation: spark 2.2s linear infinite 0.2s; }
.elec-visual .spark.s2 { left: 48%; top: 60%; animation: spark 2.2s linear infinite 0.9s; }
.elec-visual .spark.s3 { left: 78%; top: 55%; animation: spark 2.2s linear infinite 1.5s; }

@keyframes boltPulse { 0%,100% { transform: translateX(-50%) rotate(-8deg) scale(1); filter: drop-shadow(0 8px 20px rgba(250,204,21,0.35)); } 50% { transform: translateX(-50%) rotate(-8deg) scale(1.06); filter: drop-shadow(0 12px 30px rgba(250,204,21,0.55)); } }
@keyframes wireGlow { 0%,100% { box-shadow: 0 0 10px rgba(34,211,238,0.35); } 50% { box-shadow: 0 0 24px rgba(34,211,238,0.65); } }
@keyframes spark { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateY(-22px) scale(1); opacity: 1; } 100% { transform: translateY(-42px) scale(0.6); opacity: 0; } }

@media (max-width: 980px) {
  .enquiry-grid { grid-template-columns: 1fr; }
  .elec-visual { position: relative; top: 0; height: 260px; margin-top: 10px; }
}

/* Shared visual box base */
.visual-box { border-radius: 14px; border: 1px solid var(--border-1); background: var(--surface-2); height: 360px; box-shadow: 0 10px 28px rgba(0,0,0,0.18); position: sticky; top: 80px; overflow: hidden; }
@media (max-width: 980px) { .visual-box { position: relative; top: 0; height: 260px; margin-top: 10px; } }

/* Mechanical: rotating gears */
.mech-visual { background: radial-gradient(500px 240px at 30% 20%, rgba(59,130,246,0.12), transparent 60%), radial-gradient(500px 240px at 80% 80%, rgba(16,185,129,0.12), transparent 60%); }
.gear { position: absolute; border-radius: 50%; border: 6px solid rgba(255,255,255,0.2); box-shadow: 0 0 0 2px rgba(0,0,0,0.1) inset; }
.gear.g1 { width: 110px; height: 110px; left: 18%; top: 24%; animation: spin 8s linear infinite; }
.gear.g2 { width: 80px; height: 80px; left: 48%; top: 46%; animation: spin 6s linear infinite reverse; }
.gear.g3 { width: 60px; height: 60px; left: 70%; top: 26%; animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Civil: bricks and trowel sweep */
.civil-visual { background: linear-gradient(180deg, rgba(244,114,182,0.10), rgba(99,102,241,0.10)); position: relative; }
.brick-row { position: absolute; left: 10%; right: 10%; height: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.20), rgba(255,255,255,0.20) 40px, transparent 40px, transparent 80px); border: 1px solid rgba(255,255,255,0.18); }
.brick-row.b1 { top: 48%; }
.brick-row.b2 { top: 60%; }
.trowel { position: absolute; left: 14%; top: 42%; width: 120px; height: 24px; background: linear-gradient(90deg, #e5e7eb, #cbd5e1); border-radius: 4px; transform: rotate(-8deg); animation: sweep 3s ease-in-out infinite; box-shadow: 0 6px 14px rgba(0,0,0,0.18); }
@keyframes sweep { 0%,100% { transform: translateX(0) rotate(-8deg); } 50% { transform: translateX(220px) rotate(-4deg); } }

/* Facility: checklist cards with tick */
.fm-visual { background: linear-gradient(180deg, rgba(34,197,94,0.10), rgba(34,211,238,0.10)); position: relative; }
.clip { position: absolute; left: 18%; right: 18%; height: 40px; border-radius: 10px; border: 1px solid var(--border-1); background: rgba(255,255,255,0.06); }
.clip.c1 { top: 36%; }
.clip.c2 { top: 52%; }
.tick { position: absolute; right: 24%; top: 44%; width: 26px; height: 26px; border-left: 4px solid #22c55e; border-bottom: 4px solid #22c55e; transform: rotate(-45deg) scale(0.9); animation: tickPulse 2.4s ease-in-out infinite; }
@keyframes tickPulse { 0%,100% { transform: rotate(-45deg) scale(0.9); } 50% { transform: rotate(-45deg) scale(1.05); } }

/* Architecture: drafting tools */
.arch-visual { background: linear-gradient(180deg, rgba(234,179,8,0.10), rgba(59,130,246,0.10)); position: relative; }
.arch-visual .grid { position: absolute; inset: 12% 12% 12% 12%; background: linear-gradient(0deg, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 24px 24px; border-radius: 8px; }
.ruler { position: absolute; left: 16%; top: 38%; width: 220px; height: 14px; background: linear-gradient(90deg, #fbbf24, #f59e0b); box-shadow: 0 6px 14px rgba(0,0,0,0.18); transform: rotate(-6deg); }
.pencil { position: absolute; left: 42%; top: 24%; width: 10px; height: 120px; background: #f97316; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,0.18); animation: pencilFloat 4s ease-in-out infinite; }
@keyframes pencilFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Security: camera sweep */
.sec-visual { background: radial-gradient(500px 240px at 30% 20%, rgba(99,102,241,0.12), transparent 60%), radial-gradient(500px 240px at 80% 80%, rgba(59,130,246,0.12), transparent 60%); position: relative; }
.cam { position: absolute; left: 22%; top: 28%; width: 120px; height: 60px; background: #0ea5e9; border-radius: 10px; transform-origin: left center; animation: camSweep 4s ease-in-out infinite; box-shadow: 0 8px 18px rgba(14,165,233,0.35); }
.beam { position: absolute; left: 22%; top: 44%; width: 220px; height: 80px; background: radial-gradient(circle at left, rgba(14,165,233,0.28), rgba(14,165,233,0.02) 70%); transform-origin: left center; animation: camSweep 4s ease-in-out infinite; filter: blur(1px); }
.blink { position: absolute; left: 24%; top: 32%; width: 8px; height: 8px; background: #22c55e; border-radius: 50%; animation: blink 1.6s ease-in-out infinite; }
@keyframes camSweep { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes blink { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@media (max-width: 900px) {
  .service-details { grid-template-columns: 1fr; }
}