/* ==========================================================================
   UNITED SAW SERVICES — SERVICE DETAIL PAGES (SHARED STYLESHEET)
   Applicable to: High-Rise Demolition, Commercial, Industrial, etc.
   Theme: Industrial White, Deep Slate (#25292c), Brand Orange (#fb6c03)
   ========================================================================== */

/* ==========================================================================
   SECTION GAP CONFIGURATION: UNIFORM 1 INCH (96px) GAP BETWEEN ALL SECTIONS
   1 inch = 96px in standard CSS (W3C standard).
   Each section receives 48px (0.5in) top and 48px (0.5in) bottom padding,
   ensuring the total gap between the content of any two adjacent sections
   is exactly 1 inch (96px).
   ========================================================================== */
:root {
  --service-section-gap: 1in;                                          /* <--- [MODIFY 1-INCH SECTION GAP HERE: 1in = 96px] */
  --service-section-padding-y: calc(var(--service-section-gap) / 2);   /* Exactly 48px (0.5in) top and bottom */
}

/* --------------------------------------------------------------------------
   1. BREADCRUMBS BAR
   -------------------------------------------------------------------------- */
.service-breadcrumbs-bar {
  background: #f8fafc;
  border-bottom: 1px solid rgba(114, 118, 121, 0.12);
  padding: 10px 0;
  font-size: 0.8rem;
}

.service-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.service-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #727679;
}

.service-breadcrumbs li a {
  color: #25292c;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.service-breadcrumbs li a:hover {
  color: #fb6c03;
}

.service-breadcrumbs li.current {
  color: #fb6c03;
  font-weight: 700;
}

.service-breadcrumbs .breadcrumb-sep {
  color: #cbd5e1;
  font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
   2. SECTION 1 — SERVICE HERO SECTION
   -------------------------------------------------------------------------- */
.service-hero {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #fdfdfe 50%, #f4f6f8 100%);
  padding: 50px 0 var(--service-section-padding-y, 48px) 0;
  border-bottom: 2px solid rgba(114, 118, 121, 0.12);
  overflow: hidden;
  perspective: 1400px;
}

.service-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
  perspective: 1200px;
}

/* ==========================================================================
   1. TOP ROLLING EFFECT:
   - Badge: "High-Rise Building Demolition Services"
   - Heading: "Controlled Demolition for High-Rise & Complex Structures"
   Coming from top side with 3D rolling mat cylinder effect & settling in position
   ========================================================================== */
.hero-roll-top {
  opacity: 0;
  transform-origin: center top;
  transform: perspective(800px) translateY(-50px) rotateX(65deg);
  transition: transform 0.88s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.75s ease;
  will-change: transform, opacity;
}

.service-hero.hero-active .hero-roll-top,
.hero-roll-top.hero-settled {
  opacity: 1;
  transform: perspective(800px) translateY(0) rotateX(0deg);
}

.service-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(251, 108, 3, 0.08);
  border: 1.5px solid rgba(251, 108, 3, 0.28);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #fb6c03;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.service-badge.hero-roll-top {
  transition-delay: 0.12s;
}

.service-badge .badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fb6c03;
  box-shadow: 0 0 0 3px rgba(251, 108, 3, 0.25);
  animation: svcPulse 2s infinite ease-in-out;
}

@keyframes svcPulse {
  0% { box-shadow: 0 0 0 0 rgba(251, 108, 3, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(251, 108, 3, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 108, 3, 0); }
}

.service-hero-h1 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.85rem;
  font-weight: 900;
  color: #25292c;
  line-height: 1.18;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.service-hero-h1.hero-roll-top {
  transition-delay: 0.26s;
}

/* ==========================================================================
   2. ROLL WRAP EFFECT:
   Lead Paragraph coming from left side with kinetic wrap cylinder unfold
   ========================================================================== */
.service-hero-lead {
  font-size: 1.12rem;
  line-height: 1.68;
  color: #51565a;
  margin-bottom: 28px;
  max-width: 620px;
}

.hero-roll-wrap {
  opacity: 0;
  transform-origin: left center;
  transform: perspective(900px) translateX(-70px) rotateY(-38deg);
  transition: transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.80s ease;
  will-change: transform, opacity;
}

.service-hero.hero-active .hero-roll-wrap,
.hero-roll-wrap.hero-settled {
  opacity: 1;
  transform: perspective(900px) translateX(0) rotateY(0deg);
  transition-delay: 0.42s;
}

/* ==========================================================================
   3. CTA BUTTONS: STAGED TWO-PHASE ARRIVAL
   - Stage 1: Button boxes rise up from bottom and settle
   - Stage 2: Inner text & icons slide/roll into correct position inside the boxes
   ========================================================================== */
.service-hero-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Match Homepage CTA Button Dimensions */
.service-hero-ctas .btn,
.service-hero-ctas .btn-lg {
  padding: 10px 22px !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.3px !important;
  gap: 8px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: auto !important;
  line-height: 1.4 !important;
  border: 2px solid transparent !important;
}

/* Stage 1: CTA Boxes coming up from bottom */
.hero-cta-box {
  opacity: 0;
  transform-origin: center bottom;
  transform: translateY(38px) scale(0.92);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.65s ease,
              background 0.3s ease,
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  overflow: hidden;
  position: relative;
  will-change: transform, opacity;
}

.service-hero.hero-active .hero-cta-box[data-cta-box="1"],
.hero-cta-box.hero-settled[data-cta-box="1"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.58s;
}

.service-hero.hero-active .hero-cta-box[data-cta-box="2"],
.hero-cta-box.hero-settled[data-cta-box="2"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.70s;
}

/* Stage 2: CTA Inner Text & Icon go to set in the boxes */
.cta-text-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cta-text-roll,
.cta-icon-roll {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s ease;
  will-change: transform, opacity;
}

.service-hero.hero-active .hero-cta-box[data-cta-box="1"] .cta-text-roll,
.service-hero.hero-active .hero-cta-box[data-cta-box="1"] .cta-icon-roll,
.hero-cta-box.hero-settled[data-cta-box="1"] .cta-text-roll,
.hero-cta-box.hero-settled[data-cta-box="1"] .cta-icon-roll {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.82s;
}

.service-hero.hero-active .hero-cta-box[data-cta-box="2"] .cta-text-roll,
.service-hero.hero-active .hero-cta-box[data-cta-box="2"] .cta-icon-roll,
.hero-cta-box.hero-settled[data-cta-box="2"] .cta-text-roll,
.hero-cta-box.hero-settled[data-cta-box="2"] .cta-icon-roll {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.94s;
}

/* CTA Color Skins & Settled Hover */
.service-hero-ctas .btn-primary {
  background: #fb6c03 !important;
  color: #ffffff !important;
  border-color: #fb6c03 !important;
  box-shadow: 0 4px 14px rgba(251, 108, 3, 0.32) !important;
}

.service-hero.hero-active .hero-cta-box.btn-primary:hover {
  background: #e05e00 !important;
  border-color: #e05e00 !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(251, 108, 3, 0.42) !important;
  transition-delay: 0s !important;
}

.service-hero-ctas .btn-secondary {
  background: #ffffff !important;
  color: #25292c !important;
  border-color: #25292c !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.service-hero.hero-active .hero-cta-box.btn-secondary:hover {
  background: #25292c !important;
  color: #ffffff !important;
  border-color: #25292c !important;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 16px rgba(37, 41, 44, 0.18) !important;
  transition-delay: 0s !important;
}

/* ==========================================================================
   4. HERO RIGHT SIDE IMAGE: CLOTH UNROLL CURTAIN REVEAL
   Starts from top side in position and rolls down like cloth, slowly revealing
   ========================================================================== */
.service-hero-media-wrap {
  position: relative;
  perspective: 1200px;
}

.service-hero-media.hero-cloth-unroll {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 55px rgba(37, 41, 44, 0.16);
  border: 4px solid #ffffff;
  transform-origin: center top;
  /* Initial rolled cloth state: clipped up at top with cloth curl */
  clip-path: inset(0 0 100% 0 round 14px);
  transform: perspective(1000px) rotateX(-22deg) scale(0.96);
  opacity: 0.3;
  transition: clip-path 1.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.25s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.85s ease;
  will-change: clip-path, transform, opacity;
}

/* Active Unrolled Cloth State */
.service-hero.hero-active .service-hero-media.hero-cloth-unroll,
.service-hero-media.hero-cloth-unroll.hero-settled {
  clip-path: inset(0 0 0% 0 round 14px);
  transform: perspective(1000px) rotateX(0deg) scale(1);
  opacity: 1;
  transition-delay: 0.28s;
}

/* Realistic unrolling cloth hem ripple following the curtain roll */
.cloth-roll-hem {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(251, 108, 3, 0.8) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(37, 41, 44, 0.3) 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.service-hero.hero-active .cloth-roll-hem {
  animation: clothHemRollDown 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.28s;
}

@keyframes clothHemRollDown {
  0% {
    top: 0;
    opacity: 1;
    transform: scaleX(0.96);
  }
  92% {
    top: calc(100% - 8px);
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.service-hero-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.service-hero-media:hover .service-hero-img {
  transform: scale(1.03);
}

.hero-image-corner-tag {
  position: absolute;
  bottom: 18px;
  right: 18px;
  background: rgba(37, 41, 44, 0.92);
  backdrop-filter: blur(8px);
  border-left: 3.5px solid #fb6c03;
  border-radius: 6px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 1.2s;
}

.service-hero.hero-active .hero-image-corner-tag,
.service-hero-media.hero-cloth-unroll.hero-settled .hero-image-corner-tag {
  opacity: 1;
  transform: translateY(0);
}

.hero-image-corner-tag i {
  color: #fb6c03;
}

/* ==========================================================================
   HERO BACKWARD / REVERSE SCROLL RETRACTION STATE
   When user scrolls down away from hero, all hero elements retract backward:
   - Heading & badge roll back up to top
   - Paragraph rolls back into left wrap cylinder
   - CTA boxes and text retract down
   - Image cloth rolls back up to top
   When user scrolls back to top, they re-roll smoothly into position
   ========================================================================== */
.service-hero:not(.hero-active) .hero-roll-top {
  opacity: 0 !important;
  transform: perspective(800px) translateY(-50px) rotateX(45deg) !important;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
  transition-delay: 0s !important;
}

.service-hero:not(.hero-active) .hero-roll-wrap {
  opacity: 0 !important;
  transform: perspective(900px) translateX(-70px) rotateY(-38deg) !important;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
  transition-delay: 0s !important;
}

.service-hero:not(.hero-active) .hero-cta-box {
  opacity: 0 !important;
  transform: translateY(38px) scale(0.92) !important;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease !important;
  transition-delay: 0.05s !important;
}

.service-hero:not(.hero-active) .cta-text-roll,
.service-hero:not(.hero-active) .cta-icon-roll {
  opacity: 0 !important;
  transform: translateY(18px) !important;
  transition: transform 0.3s ease, opacity 0.25s ease !important;
  transition-delay: 0s !important;
}

.service-hero:not(.hero-active) .service-hero-media.hero-cloth-unroll {
  clip-path: inset(0 0 100% 0 round 14px) !important;
  transform: perspective(1000px) rotateX(-22deg) scale(0.96) !important;
  opacity: 0.3 !important;
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s ease, opacity 0.4s ease !important;
  transition-delay: 0s !important;
}

.service-hero:not(.hero-active) .cloth-roll-hem {
  opacity: 0 !important;
  animation: none !important;
}

.service-hero:not(.hero-active) .hero-image-corner-tag {
  opacity: 0 !important;
  transform: translateY(12px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
  transition-delay: 0s !important;
}

/* --------------------------------------------------------------------------
   UNIVERSAL DIRECTIONAL BRICK & BLOCK MOTION ENGINE
   Powers slow, majestic arrivals from left and right side one by one:
   - Odd elements glide slowly from LEFT (.anim-from-left)
   - Even elements glide slowly from RIGHT (.anim-from-right)
   - Central/heading elements drop down (.anim-from-up, .brick-reveal)
   - Bi-directional support: resets off-screen so scrolling up/down re-animates
   -------------------------------------------------------------------------- */
.brick-reveal,
.brick-step,
.anim-from-up {
  opacity: 0;
  transform: translateY(-26px) scale(0.98);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s ease;
  will-change: transform, opacity;
}

.anim-from-left {
  opacity: 0;
  transform: translateX(-60px) scale(0.98);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s ease;
  will-change: transform, opacity;
}

.anim-from-right {
  opacity: 0;
  transform: translateX(60px) scale(0.98);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s ease;
  will-change: transform, opacity;
}

/* Landed / Revealed State (Active on forward AND reverse scroll) */
.brick-reveal.brick-landed,
.brick-step.brick-landed,
.anim-from-up.brick-landed,
.anim-from-left.brick-landed,
.anim-from-right.brick-landed,
.brick-reveal.is-revealed,
.brick-step.is-revealed,
.anim-from-up.is-revealed,
.anim-from-left.is-revealed,
.anim-from-right.is-revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Fallback: Ensure everything is 100% visible if JS observer is not running */
.no-js .brick-reveal,
.no-js .brick-step,
.no-js .anim-from-left,
.no-js .anim-from-right,
.no-js .anim-from-up {
  opacity: 1 !important;
  transform: none !important;
}

/* Crisp Staggered Delay Utilities (Swift & Responsive) */
.brick-delay-1.brick-landed, .delay-1.brick-landed, .brick-delay-1.is-revealed, .delay-1.is-revealed { transition-delay: 0.06s; }
.brick-delay-2.brick-landed, .delay-2.brick-landed, .brick-delay-2.is-revealed, .delay-2.is-revealed { transition-delay: 0.12s; }
.brick-delay-3.brick-landed, .delay-3.brick-landed, .brick-delay-3.is-revealed, .delay-3.is-revealed { transition-delay: 0.18s; }
.brick-delay-4.brick-landed, .delay-4.brick-landed, .brick-delay-4.is-revealed, .delay-4.is-revealed { transition-delay: 0.24s; }
.brick-delay-5.brick-landed, .delay-5.brick-landed, .brick-delay-5.is-revealed, .delay-5.is-revealed { transition-delay: 0.30s; }
.brick-delay-6.brick-landed, .delay-6.brick-landed, .brick-delay-6.is-revealed, .delay-6.is-revealed { transition-delay: 0.36s; }
.brick-delay-7.brick-landed, .delay-7.brick-landed, .brick-delay-7.is-revealed, .delay-7.is-revealed { transition-delay: 0.42s; }
.brick-delay-8.brick-landed, .delay-8.brick-landed, .brick-delay-8.is-revealed, .delay-8.is-revealed { transition-delay: 0.48s; }

/* Section Header Centers (Badge, Title, Paragraph) */
.section-head-center .section-tag-sub.brick-landed,
.section-head-center .section-tag-sub.is-revealed { transition-delay: 0.05s; }
.section-head-center .service-section-h2.brick-landed,
.section-head-center .service-section-h2.is-revealed { transition-delay: 0.16s; }
.section-head-center p.brick-landed,
.section-head-center p.is-revealed { transition-delay: 0.28s; }

/* Shared Section Head Typography */
.section-head-center {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 50px auto;
}

.section-head-center p {
  font-size: 1.05rem;
  color: #51565a;
  line-height: 1.68;
  margin-top: 14px;
}

.section-tag-sub {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fb6c03;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(251, 108, 3, 0.08);
  border: 1px solid rgba(251, 108, 3, 0.25);
  padding: 6px 14px;
  border-radius: 6px;
  margin-bottom: 4px;
}

.service-section-h2 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.25rem;
  font-weight: 800;
  color: #25292c;
  line-height: 1.24;
  margin: 10px 0 0 0;
  letter-spacing: -0.4px;
}

/* --------------------------------------------------------------------------
   3. SECTION 2 — SERVICE INTRODUCTION (DUAL MASONRY BRICK ARCHITECTURE)
   With 3D wrap-and-roll heading from right, bubble-jump image in 2 jumps,
   and alternating box/paragraph cross-glides.
   Fully bi-directional: runs backward on scroll down/away!
   -------------------------------------------------------------------------- */
.service-intro-section {
  padding: var(--service-section-padding-y, 48px) 0;
  background: #fbfcfd;
  background-image: 
    radial-gradient(rgba(114, 118, 121, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, #ffffff 0%, #fbfcfd 50%, #f4f6f8 100%);
  background-size: 24px 24px, 100% 100%;
  border-bottom: 1px solid rgba(114, 118, 121, 0.14);
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

.service-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: flex-start;
}

.service-intro-left-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

/* Badge Gliding from Right */
.intro-badge-right {
  opacity: 0;
  transform: translateX(60px);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.65s ease;
  will-change: transform, opacity;
}

.service-intro-section.in-view .intro-badge-right {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s;
}

.service-intro-section:not(.in-view) .intro-badge-right {
  opacity: 0;
  transform: translateX(60px);
  transition: transform 0.45s ease, opacity 0.35s ease;
  transition-delay: 0s !important;
}

/* Heading: Precision Matters When Demolishing at Height
   Coming from RIGHT side with 3D Wrap and Roll effect */
.intro-display-h2 {
  font-size: 2.5rem;
  line-height: 1.2;
}

.intro-roll-wrap-right {
  opacity: 0;
  transform-origin: right center;
  transform: perspective(900px) translateX(95px) rotateY(38deg);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.85s ease;
  will-change: transform, opacity;
}

.service-intro-section.in-view .intro-roll-wrap-right {
  opacity: 1;
  transform: perspective(900px) translateX(0) rotateY(0deg);
  transition-delay: 0.22s;
}

.service-intro-section:not(.in-view) .intro-roll-wrap-right {
  opacity: 0;
  transform: perspective(900px) translateX(95px) rotateY(38deg);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
  transition-delay: 0s !important;
}

/* Orange Engineering Gauge Accent Bar */
.intro-accent-bar {
  width: 70px;
  height: 4px;
  background: #fb6c03;
  border-radius: 2px;
  margin-top: 6px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}

.service-intro-section.in-view .intro-accent-bar {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0.35s;
}

.service-intro-section:not(.in-view) .intro-accent-bar {
  opacity: 0;
  transform: scaleX(0);
  transition: transform 0.35s ease, opacity 0.25s ease;
  transition-delay: 0s !important;
}

/* ==========================================================================
   IMAGE BUBBLE JUMP EFFECT (IN TWO JUMPS FROM CENTER TINY POINT)
   - Origin: center center
   - Starts: scale(0.06) tiny point at center
   - Jump 1: Zooms out / explodes outwards beyond actual size (scale 1.18)
   - Jump 2: Bounces in (scale 0.92)
   - Settles: locks into actual present image size (scale 1.0)
   - Reverse: shrinks straight back to tiny center point on scroll away
   ========================================================================== */
.intro-visual-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid #ffffff;
  box-shadow: 0 14px 34px rgba(37, 41, 44, 0.12);
  margin-top: 18px;
  height: 230px;
  background: #e2e8f0;
}

.intro-visual-frame.intro-bubble-frame {
  transform-origin: center center !important;
  opacity: 0;
  transform: scale(0.06);
  will-change: transform, opacity;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
}

@keyframes introBubbleTwoJumps {
  0% {
    opacity: 0;
    transform: scale(0.06);
  }
  15% {
    opacity: 1;
  }
  48% {
    transform: scale(1.18); /* Jump 1: zoom out / overshoot beyond actual size */
  }
  74% {
    transform: scale(0.92); /* Jump 2: bounce in slightly below actual size */
  }
  88% {
    transform: scale(1.03); /* micro rebound */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* settled at actual present size */
  }
}

.service-intro-section.in-view .intro-visual-frame.intro-bubble-frame {
  animation: introBubbleTwoJumps 1.15s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.32s;
}

.service-intro-section:not(.in-view) .intro-visual-frame.intro-bubble-frame {
  animation: none !important;
  opacity: 0 !important;
  transform: scale(0.06) !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease !important;
  transition-delay: 0s !important;
}

.intro-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.intro-visual-frame:hover .intro-visual-img {
  transform: scale(1.04);
}

.intro-visual-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(37, 41, 44, 0.9);
  backdrop-filter: blur(8px);
  border-left: 3.5px solid #fb6c03;
  border-radius: 6px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ffffff;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: transform, opacity;
}

.service-intro-section.in-view .intro-visual-tag {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.1s;
}

.service-intro-section:not(.in-view) .intro-visual-tag {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: 0s !important;
}

.intro-visual-tag i {
  color: #fb6c03;
}

/* ==========================================================================
   DUAL MASONRY BRICKS WITH CROSS-GLIDE DYNAMICS
   - Box 1: Outer background card from LEFT, inner paragraph lazily from RIGHT
   - Box 2: Outer background card from RIGHT, inner content lazily from LEFT
   ========================================================================== */
.service-intro-right-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.intro-masonry-brick {
  background: #ffffff;
  border: 1.5px solid rgba(114, 118, 121, 0.16);
  border-left: 5px solid #fb6c03;
  border-radius: 10px;
  padding: 24px 28px;
  box-shadow: 0 4px 18px rgba(37, 41, 44, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.intro-masonry-brick:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37, 41, 44, 0.08);
  border-color: rgba(251, 108, 3, 0.35);
  border-left-color: #fb6c03;
}

.masonry-brick-notch {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(251, 108, 3, 0.5);
  border-right: 2px solid rgba(251, 108, 3, 0.5);
}

.intro-masonry-brick p {
  font-size: 1.05rem;
  line-height: 1.72;
  color: #25292c;
  margin: 0;
  font-weight: 500;
}

/* --- Box 1: Card from LEFT, inner paragraph lazy from RIGHT (3x-4x Slower Majestic Glide) --- */
.intro-brick-from-left {
  opacity: 0;
  transform: translateX(-85px);
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.85s ease,
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  will-change: transform, opacity;
}

.service-intro-section.in-view .intro-brick-from-left {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

.service-intro-section:not(.in-view) .intro-brick-from-left {
  opacity: 0;
  transform: translateX(-85px);
  transition: transform 0.5s ease, opacity 0.4s ease;
  transition-delay: 0s !important;
}

/* --- Inner Paragraph / Content Emerging from Starting of the Box Line --- */
.intro-para-from-startline,
.intro-para-from-right,
.intro-para-from-left {
  display: block;
  opacity: 0;
  transform: translateX(-55px);
  transition: transform 2.4s cubic-bezier(0.12, 0.84, 0.24, 1),
              opacity 1.8s cubic-bezier(0.12, 0.84, 0.24, 1);
  will-change: transform, opacity;
}

/* Box 1: Paragraph emerges from the starting of the box line */
.service-intro-section.in-view .intro-brick-from-left .intro-para-from-startline,
.service-intro-section.in-view .intro-brick-from-left .intro-para-from-right,
.service-intro-section.in-view .intro-brick-from-left .intro-para-from-left {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.5s; /* Begins after box lands, then emerges from starting line over 2.4s */
}

/* Box 2: Content emerges from the starting of the box line */
.service-intro-section.in-view .intro-brick-from-right .intro-para-from-startline,
.service-intro-section.in-view .intro-brick-from-right .intro-para-from-right,
.service-intro-section.in-view .intro-brick-from-right .intro-para-from-left {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.7s; /* Begins after box 2 lands, then emerges from starting line over 2.4s */
}

/* Backward scroll retraction: resets cleanly back into the starting line */
.service-intro-section:not(.in-view) .intro-para-from-startline,
.service-intro-section:not(.in-view) .intro-para-from-right,
.service-intro-section:not(.in-view) .intro-para-from-left {
  opacity: 0;
  transform: translateX(-55px);
  transition: transform 0.5s ease, opacity 0.4s ease;
  transition-delay: 0s !important;
}

/* --------------------------------------------------------------------------
   4. SECTION 3 — OUR SOLUTIONS (2-COLUMN HORIZONTAL DOSSIER SPLIT CARDS)
   - Moved 20-30% towards the top
   - Heading split:
     * "Demolition Solutions Built Around Your": 3D rolling from LEFT
     * "Structure": 3D rolling lazy from RIGHT
   - Empty box borders extract towards center of section (Left from left, Right from right)
   - Inside media & content bloom out slowly from center point
   - Fully bi-directional: backward retraction on downward scroll
   -------------------------------------------------------------------------- */
.solutions-grid-section {
  padding: var(--service-section-padding-y, 48px) 0;
  margin-top: 0;
  background: #fcfdfe;
  border-bottom: 1px solid rgba(114, 118, 121, 0.12);
  overflow: hidden;
  position: relative;
  z-index: 2;
  perspective: 1200px;
}

.solutions-head-center {
  margin-bottom: 42px;
}

.solutions-badge-top {
  opacity: 0;
  transform: translateY(-20px);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease;
  will-change: transform, opacity;
}

.solutions-grid-section.in-view .solutions-badge-top {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.solutions-grid-section:not(.in-view) .solutions-badge-top {
  opacity: 0;
  transform: translateY(-20px);
  transition: transform 0.4s ease, opacity 0.3s ease;
  transition-delay: 0s !important;
}

/* Heading Split 3D Rolling */
.solutions-split-h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  perspective: 1000px;
  margin-top: 10px;
}

.sol-h2-line-left {
  display: inline-block;
  opacity: 0;
  transform-origin: left center;
  transform: perspective(900px) translateX(-110px) rotateY(-38deg);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease;
  will-change: transform, opacity;
}

.solutions-grid-section.in-view .sol-h2-line-left {
  opacity: 1;
  transform: perspective(900px) translateX(0) rotateY(0deg);
  transition-delay: 0.18s;
}

.solutions-grid-section:not(.in-view) .sol-h2-line-left {
  opacity: 0;
  transform: perspective(900px) translateX(-110px) rotateY(-38deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  transition-delay: 0s !important;
}

.sol-h2-word-right {
  display: inline-block;
  color: #fb6c03;
  opacity: 0;
  transform-origin: right center;
  transform: perspective(900px) translateX(110px) rotateY(38deg);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s ease;
  will-change: transform, opacity;
}

.solutions-grid-section.in-view .sol-h2-word-right {
  opacity: 1;
  transform: perspective(900px) translateX(0) rotateY(0deg);
  transition-delay: 0.38s; /* Lazy arrival rolling in from right */
}

.solutions-grid-section:not(.in-view) .sol-h2-word-right {
  opacity: 0;
  transform: perspective(900px) translateX(110px) rotateY(38deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  transition-delay: 0s !important;
}

/* Grid & Cards Base */
.solutions-split-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

/* Stage 1: Empty Box Borders Gliding towards Center of Section */
.solution-split-card {
  display: flex;
  background: #ffffff;
  border: 1.5px solid rgba(114, 118, 121, 0.18);
  border-left: 4.5px solid #fb6c03;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(37, 41, 44, 0.05);
  min-height: 220px;
  position: relative;
  will-change: transform, opacity;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease,
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.solution-split-card:hover {
  transform: translateY(-5px);
  border-color: rgba(251, 108, 3, 0.45);
  box-shadow: 0 16px 36px rgba(37, 41, 44, 0.12);
}

/* Left side box extracts / glides towards center from LEFT */
.solution-split-card.sol-card-left {
  opacity: 0;
  transform: translateX(-85px);
}

/* Right side box extracts / glides towards center from RIGHT */
.solution-split-card.sol-card-right {
  opacity: 0;
  transform: translateX(85px);
}

/* In-View: Row-by-Row Box Landings */
.solutions-grid-section.in-view .solution-split-card[data-sol-row="1"] {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.32s;
}

.solutions-grid-section.in-view .solution-split-card[data-sol-row="2"] {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.52s;
}

.solutions-grid-section.in-view .solution-split-card[data-sol-row="3"] {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.72s;
}

/* Backward Scroll: Boxes retract toward outside */
.solutions-grid-section:not(.in-view) .solution-split-card.sol-card-left {
  opacity: 0;
  transform: translateX(-85px);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  transition-delay: 0.08s !important;
}

.solutions-grid-section:not(.in-view) .solution-split-card.sol-card-right {
  opacity: 0;
  transform: translateX(85px);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  transition-delay: 0.08s !important;
}

/* Stage 2: Inside the Box — Image & Content Bloom Out from the Center Point */
.solution-split-media {
  flex: 0 0 44%;
  position: relative;
  overflow: hidden;
  background: #e2e8f0;
}

.solution-split-media.sol-media-bloom {
  transform-origin: center center !important;
  opacity: 0;
  transform: scale(0.12);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s ease;
  will-change: transform, opacity;
}

.solution-split-body {
  flex: 1;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}

.solution-split-body.sol-body-bloom {
  transform-origin: center center !important;
  opacity: 0;
  transform: scale(0.15);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s ease;
  will-change: transform, opacity;
}

/* Forward Bloom (Staggered right after box borders arrive) */
.solutions-grid-section.in-view .solution-split-card[data-sol-row="1"] .sol-media-bloom {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.62s;
}
.solutions-grid-section.in-view .solution-split-card[data-sol-row="1"] .sol-body-bloom {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.72s;
}

.solutions-grid-section.in-view .solution-split-card[data-sol-row="2"] .sol-media-bloom {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.82s;
}
.solutions-grid-section.in-view .solution-split-card[data-sol-row="2"] .sol-body-bloom {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.92s;
}

.solutions-grid-section.in-view .solution-split-card[data-sol-row="3"] .sol-media-bloom {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.02s;
}
.solutions-grid-section.in-view .solution-split-card[data-sol-row="3"] .sol-body-bloom {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.12s;
}

/* Backward Retraction: Inside Media & Body collapse back into center point FIRST */
.solutions-grid-section:not(.in-view) .sol-media-bloom,
.solutions-grid-section:not(.in-view) .sol-body-bloom {
  opacity: 0 !important;
  transform: scale(0.12) !important;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.32s ease !important;
  transition-delay: 0s !important;
}

.solution-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.solution-split-card:hover .solution-split-img {
  transform: scale(1.09);
}

.solution-split-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(37, 41, 44, 0.92);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 4px;
  border-left: 3px solid #fb6c03;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.solution-split-badge i {
  color: #fb6c03;
}

.solution-split-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.22rem;
  font-weight: 800;
  color: #25292c;
  line-height: 1.32;
  margin: 0 0 8px 0;
}

.solution-split-line {
  width: 36px;
  height: 3px;
  background: #fb6c03;
  border-radius: 2px;
  margin-bottom: 12px;
  transition: width 0.3s ease;
}

.solution-split-card:hover .solution-split-line {
  width: 58px;
}

.solution-split-text {
  font-size: 0.92rem;
  line-height: 1.62;
  color: #51565a;
  margin: 0;
}

/* --------------------------------------------------------------------------
   5. SECTION 4 — HIGH-RISE STRUCTURES WE WORK ON (BLUEPRINT ARCHITECTURAL MATRIX)
   Unique layout: Deep Blueprint Slate with HUD targeting panels & full-bleed visuals
   Alternating entrance: Odd cards glide from LEFT, Even cards glide from RIGHT
   -------------------------------------------------------------------------- */
.structures-blueprint-section {
  padding: var(--service-section-padding-y, 48px) 0;
  background: #1a1e22;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  border-bottom: 2px solid rgba(251, 108, 3, 0.25);
  position: relative;
  overflow: hidden;
}

.tag-blueprint {
  background: rgba(251, 108, 3, 0.16) !important;
  color: #fb6c03 !important;
  border-color: rgba(251, 108, 3, 0.45) !important;
}

.structures-blueprint-section .service-section-h2 {
  color: #ffffff;
}

.structures-blueprint-section .section-head-center p {
  color: #94a3b8;
}

.blueprint-hud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 50px;
  perspective: 1200px;
}

/* ==========================================================================
   HIGH-RISE STRUCTURES WE WORK ON:
   Tiny to Actual Size Coming From Bottom Center Point (Bi-Directional)
   ========================================================================== */
.structure-grow-box,
.blueprint-hud-card {
  position: relative;
  height: 310px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  background: #1e2429;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  
  /* CRITICAL: Anchor at the bottom center point of the box */
  transform-origin: center bottom;
  
  /* INITIAL & BACKWARD STATE: Tiny box at the bottom center point */
  transform: scale(0.18) translateY(0);
  opacity: 0.35;
  transition: transform 0.90s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.75s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  will-change: transform, opacity;
}

/* FORWARD / IN-VIEW STANCE: Blooms up from bottom center point to actual size */
.structure-grow-box.in-view,
.structures-blueprint-section.in-view .structure-grow-box,
.blueprint-hud-grid.in-view .structure-grow-box,
.blueprint-hud-card.in-view {
  transform: scale(1) translateY(0);
  opacity: 1;
  transition: transform 0.92s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.75s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Staggered delays for the 6 boxes when moving forward */
.structure-grow-box.in-view[data-grow-box="1"] { transition-delay: 0.08s !important; }
.structure-grow-box.in-view[data-grow-box="2"] { transition-delay: 0.20s !important; }
.structure-grow-box.in-view[data-grow-box="3"] { transition-delay: 0.32s !important; }
.structure-grow-box.in-view[data-grow-box="4"] { transition-delay: 0.44s !important; }
.structure-grow-box.in-view[data-grow-box="5"] { transition-delay: 0.56s !important; }
.structure-grow-box.in-view[data-grow-box="6"] { transition-delay: 0.68s !important; }

/* When retracting backward: instantaneous 0s delay for smooth, responsive backward effect */
.structure-grow-box:not(.in-view) {
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.45s ease;
  transition-delay: 0s !important;
}

/* Hover lift interaction once fixed in actual size */
.structure-grow-box.in-view:hover,
.blueprint-hud-card.in-view:hover {
  transform: scale(1.02) translateY(-8px);
  border-color: #fb6c03;
  box-shadow: 0 20px 45px rgba(251, 108, 3, 0.32), 0 4px 12px rgba(0, 0, 0, 0.2);
  transition-delay: 0s !important;
  transition-duration: 0.28s !important;
}

/* 100% CLEAR, BRIGHT, NATURAL IMAGE — NO BLACK SHADE OVER THE IMAGE */
.blueprint-hud-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  filter: none !important;
  opacity: 1 !important;
}

.structure-grow-box:hover .blueprint-hud-bg,
.blueprint-hud-card:hover .blueprint-hud-bg {
  transform: scale(1.06);
  filter: none !important;
}

/* REMOVE BLACK OVERLAY COMPLETELY */
.blueprint-hud-scrim {
  display: none !important;
}

/* TOP HUD PILLS */
.blueprint-hud-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blueprint-code-pill {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(251, 108, 3, 0.6);
  padding: 5px 12px;
  border-radius: 6px;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.blueprint-icon-ring {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid #fb6c03;
  color: #fb6c03;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.structure-grow-box:hover .blueprint-icon-ring,
.blueprint-hud-card:hover .blueprint-icon-ring {
  background: #fb6c03;
  color: #ffffff;
  transform: rotate(10deg);
}

/* BOTTOM ARCHITECTURAL TITLE PLATE (Clean Frosted Glass Badge, Leaving 100% of the Image Clear) */
.blueprint-hud-bottom {
  position: relative;
  z-index: 3;
  margin-top: auto;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.90) 0%, rgba(26, 32, 44, 0.92) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 4px solid #fb6c03;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.structure-grow-box:hover .blueprint-hud-bottom,
.blueprint-hud-card:hover .blueprint-hud-bottom {
  border-left-color: #ffffff;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(251, 108, 3, 0.88) 100%);
}

.blueprint-reticle {
  width: 24px;
  height: 3px;
  background: #fb6c03;
  border-radius: 2px;
  margin-bottom: 8px;
  transition: width 0.3s ease;
}

.structure-grow-box:hover .blueprint-reticle,
.blueprint-hud-card:hover .blueprint-reticle {
  width: 44px;
  background: #ffffff;
}

.blueprint-structure-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.20rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.2px;
}

/* --------------------------------------------------------------------------
   6. SECTION 5 (PART A) — HOW WE WORK (SERIAL PROCESS PIPELINE ENGINE)
   - Heading Line 1 ("A Planned Approach to Every Demolition"): 3D rolling from LEFT
   - Heading Word ("Project"): 3D rolling from RIGHT
   - Lead paragraph: gliding from TOP
   - Connected progress loading line: serial fill across the track
   - When line touches 01/02/03/04: Circle glows & content box rises from BELOW
   - Fully bi-directional: backward retraction on downward scroll
   -------------------------------------------------------------------------- */
.how-we-work-section {
  padding: var(--service-section-padding-y, 48px) 0;
  background: #fbfcfd;
  background-image: 
    radial-gradient(rgba(114, 118, 121, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid rgba(114, 118, 121, 0.14);
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

.work-head-center {
  margin-bottom: 40px;
}

.work-tag-top {
  opacity: 0;
  transform: translateY(-20px);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease;
  will-change: transform, opacity;
}

.how-we-work-section.in-view .work-tag-top {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.how-we-work-section:not(.in-view) .work-tag-top {
  opacity: 0;
  transform: translateY(-20px);
  transition: transform 0.4s ease, opacity 0.3s ease;
  transition-delay: 0s !important;
}

/* Split 3D Rolling Heading */
.work-split-h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  perspective: 1000px;
  margin: 12px 0 16px 0;
}

.work-h2-line-left {
  display: inline-block;
  opacity: 0;
  transform-origin: left center;
  transform: perspective(900px) translateX(-100px) rotateY(-36deg);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease;
  will-change: transform, opacity;
}

.how-we-work-section.in-view .work-h2-line-left {
  opacity: 1;
  transform: perspective(900px) translateX(0) rotateY(0deg);
  transition-delay: 0.18s;
}

.how-we-work-section:not(.in-view) .work-h2-line-left {
  opacity: 0;
  transform: perspective(900px) translateX(-100px) rotateY(-36deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  transition-delay: 0s !important;
}

.work-h2-word-right {
  display: inline-block;
  color: #fb6c03;
  opacity: 0;
  transform-origin: right center;
  transform: perspective(900px) translateX(90px) rotateY(36deg);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.85s ease;
  will-change: transform, opacity;
}

.how-we-work-section.in-view .work-h2-word-right {
  opacity: 1;
  transform: perspective(900px) translateX(0) rotateY(0deg);
  transition-delay: 0.35s;
}

.how-we-work-section:not(.in-view) .work-h2-word-right {
  opacity: 0;
  transform: perspective(900px) translateX(90px) rotateY(36deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  transition-delay: 0s !important;
}

/* Paragraph coming from TOP side */
.work-lead-top {
  opacity: 0;
  transform: translateY(-30px);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.75s ease;
  will-change: transform, opacity;
  max-width: 720px;
  margin: 0 auto;
}

.how-we-work-section.in-view .work-lead-top {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.42s;
}

.how-we-work-section:not(.in-view) .work-lead-top {
  opacity: 0;
  transform: translateY(-30px);
  transition: transform 0.4s ease, opacity 0.3s ease;
  transition-delay: 0s !important;
}

/* Pipeline Track & Progress Loading Line */
.pipeline-track-wrapper {
  position: relative;
  margin-top: 50px;
}

.pipeline-connector-line {
  position: absolute;
  top: 26px;
  left: calc(12.5% - 2px);
  right: calc(12.5% - 2px);
  height: 4px;
  background: rgba(114, 118, 121, 0.16);
  border-radius: 2px;
  z-index: 1;
  overflow: visible;
}

.pipeline-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #fb6c03 0%, #ff8522 75%, #ffffff 100%);
  border-radius: 2px;
  box-shadow: none !important;
  transition: width 0.18s cubic-bezier(0.2, 0.8, 0.25, 1);
  will-change: width;
}

.pipeline-progress-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #fb6c03;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.pipeline-progress-fill.active-tip::after {
  opacity: 1;
}

/* Pipeline Grid (supports 4 or 5 steps) */
.work-steps-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

.work-steps-pipeline-grid.grid-5-col,
.work-steps-pipeline-grid[data-steps="5"] {
  grid-template-columns: repeat(5, 1fr);
}

.pipeline-step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Circles (01, 02, 03, 04) with Glowing Illumination when Line Touches */
.pipeline-node-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid rgba(114, 118, 121, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 3;
  will-change: transform, box-shadow, background, border-color;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.45s ease,
              border-color 0.45s ease,
              box-shadow 0.55s ease;
}

.pipeline-node-badge {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.95rem;
  font-weight: 900;
  color: #727679;
  transition: color 0.4s ease;
}

/* State-Driven Node Glowing: Triggered lazily in sync as scroll line touches each node */
.pipeline-node-wrapper.node-active {
  background: #fb6c03;
  border-color: #fb6c03;
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.pipeline-node-wrapper.node-active .pipeline-node-badge {
  color: #ffffff;
}

/* Content Boxes (Coming from Below as Circle Glows) */
.pipeline-step-inner {
  background: #ffffff;
  border: 1.5px solid rgba(114, 118, 121, 0.16);
  border-top: 4px solid #fb6c03;
  border-radius: 12px;
  padding: 28px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.65s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
}

/* State-Driven Box Emergence: Triggered lazily in sync as line touches node */
.pipeline-step-inner.box-active {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.pipeline-step-card:hover .pipeline-step-inner {
  border-color: #fb6c03;
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(251, 108, 3, 0.15);
}

.work-step-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #25292c;
  margin-bottom: 12px;
}

.work-step-desc {
  font-size: 0.9rem;
  line-height: 1.64;
  color: #51565a;
  margin: 0;
  flex: 1;
}

/* --------------------------------------------------------------------------
   7. SECTION 5 (PART B) — OUR DEMOLITION APPROACH (VERTICAL PROCESS SPINE)
   - Vertical illuminated progress line filling down from top to bottom
   - Reaches each node circle: circle glows radiant orange
   - Left cards arrive from left page margin; Right cards arrive from right page margin
   - Titles without serial numbers (Phase 01 badge retained)
   - Fully bi-directional backward scroll reaction
   -------------------------------------------------------------------------- */
.approach-spine-section {
  padding: var(--service-section-padding-y, 48px) 0;
  background: #f8fafc;
  border-bottom: 1px solid rgba(114, 118, 121, 0.14);
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

.approach-tagline-pill {
  display: inline-block;
  background: #ffffff;
  border: 1.5px solid rgba(251, 108, 3, 0.35);
  border-radius: 20px;
  padding: 6px 18px;
  margin-top: 14px;
}

.approach-tagline-pill span {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fb6c03;
  text-transform: uppercase;
}

.approach-spine-wrapper {
  position: relative;
  max-width: 960px;
  margin: 55px auto 0 auto;
}

/* Central Vertical Track Line */
.approach-spine-track {
  position: absolute;
  left: 50%;
  top: 25px;
  bottom: 25px;
  width: 4px;
  background: rgba(114, 118, 121, 0.16);
  border-radius: 2px;
  transform: translateX(-50%);
  z-index: 1;
  overflow: visible;
}

/* Dynamic Vertical Glowing Progress Fill */
.spine-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #fb6c03 0%, #ff8522 80%, #ffffff 100%);
  border-radius: 2px;
  box-shadow: none !important;
  transition: height 0.18s cubic-bezier(0.2, 0.8, 0.25, 1);
  will-change: height;
}

.spine-progress-fill::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #fb6c03;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.spine-progress-fill.active-tip::after {
  opacity: 1;
}

.approach-spine-row {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: center;
  position: relative;
  margin-bottom: 38px;
}

.approach-spine-row:last-child {
  margin-bottom: 0;
}

/* Central Node */
.approach-spine-node {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
}

.spine-node-disc {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid rgba(114, 118, 121, 0.25);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.92rem;
  font-weight: 900;
  color: #727679;
  will-change: transform, box-shadow, background, border-color, color;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.45s ease,
              border-color 0.45s ease,
              box-shadow 0.55s ease,
              color 0.4s ease;
}

/* State-Driven Glowing Nodes: Triggered lazily as scroll line touches each node */
.spine-node-disc.disc-active {
  background: #fb6c03;
  border-color: #fb6c03;
  color: #ffffff;
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

/* Wing Cards Base & Positioning */
.spine-card-wing-left {
  grid-column: 1;
  display: flex;
  justify-content: flex-end;
}

.spine-card-wing-right {
  grid-column: 3;
  display: flex;
  justify-content: flex-start;
}

.approach-milestone-card {
  background: #ffffff;
  border: 1.5px solid rgba(114, 118, 121, 0.16);
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: 0 6px 20px rgba(37, 41, 44, 0.04);
  position: relative;
  width: 100%;
  max-width: 420px;
  will-change: transform, opacity;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.65s ease,
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.approach-milestone-card:hover {
  transform: translateY(-4px);
  border-color: #fb6c03;
  box-shadow: 0 16px 36px rgba(251, 108, 3, 0.12);
}

/* Left Cards: Come from the LEFT PAGE MARGIN */
.approach-milestone-card.spine-card-left {
  opacity: 0;
  transform: translateX(-140px);
  border-right: 4.5px solid #fb6c03;
}

/* Right Cards: Come from the RIGHT PAGE MARGIN */
.approach-milestone-card.spine-card-right {
  opacity: 0;
  transform: translateX(140px);
  border-left: 4.5px solid #fb6c03;
}

/* State-Driven Active Milestone Cards: Attached to node circle in sync with scroll */
.approach-milestone-card.card-active {
  opacity: 1;
  transform: translateX(0);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}

.milestone-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.approach-phase-badge {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.74rem;
  font-weight: 800;
  color: #fb6c03;
  background: rgba(251, 108, 3, 0.12);
  border: 1px solid rgba(251, 108, 3, 0.25);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.approach-phase-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: #25292c;
  line-height: 1.32;
  margin: 0 0 10px 0;
}

.approach-phase-desc {
  font-size: 0.9rem;
  line-height: 1.62;
  color: #51565a;
  margin: 0;
}

/* --------------------------------------------------------------------------
   8. SECTION 6 — WHY UNITED SAW SERVICES (COMMAND HUB & POWER STACK)
   - Left side: 5 Stacked Engineered Power Strips (Continuous Scroll-Driven Motion)
   - Right side: Executive Command Briefing Card with Dark Theme
   - Continuous scroll-stretched bi-directional motion (downward & upward)
   -------------------------------------------------------------------------- */
.why-uss-command-section {
  padding: var(--service-section-padding-y, 48px) 0;
  background: #fbfcfd;
  background-image: 
    radial-gradient(rgba(114, 118, 121, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  border-bottom: 1px solid rgba(114, 118, 121, 0.14);
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

.why-uss-split-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: stretch;
}

/* Right Column: Command Briefing Card */
.why-uss-briefing-card {
  background: #25292c;
  color: #ffffff;
  border-radius: 16px;
  padding: 45px 40px;
  border-right: 6px solid #fb6c03;
  box-shadow: 0 18px 44px rgba(37, 41, 44, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  overflow: hidden;
  position: relative;
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease,
              box-shadow 0.35s ease;
}

.briefing-sentence-group {
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease;
}

.briefing-tag {
  background: rgba(251, 108, 3, 0.2) !important;
  color: #fb6c03 !important;
  border-color: rgba(251, 108, 3, 0.45) !important;
}

.briefing-h2 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.3rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.22;
  margin: 18px 0 24px 0;
}

.briefing-badges-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}

.briefing-badge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: #cbd5e1;
}

.briefing-sentence-item {
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease;
}

.briefing-badge-item i {
  color: #fb6c03;
  font-size: 1.05rem;
}

/* Button with Empty Box Border First, Text Rising from Downside */
.briefing-cta {
  margin-top: 10px;
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease;
}

.briefing-btn-frame {
  position: relative;
  overflow: hidden !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 270px;
  border: 2px solid #fb6c03 !important;
  background: transparent !important;
  border-radius: 8px;
  padding: 12px 28px !important;
  will-change: transform, opacity, background-color, box-shadow;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease,
              background-color 0.35s ease,
              box-shadow 0.35s ease;
}

.briefing-btn-frame.btn-box-active {
  background: #fb6c03 !important;
  box-shadow: 0 8px 24px rgba(251, 108, 3, 0.35);
}

.briefing-btn-frame.btn-box-active:hover {
  background: #ff8522 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(251, 108, 3, 0.5);
}

.briefing-btn-text {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-weight: 700;
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease;
}

/* Left Column: 5 Stacked Power Strips */
.why-uss-power-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.why-uss-power-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  border: 1.5px solid rgba(114, 118, 121, 0.16);
  border-left: 4px solid rgba(114, 118, 121, 0.2);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  position: relative;
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease,
              border-color 0.3s ease,
              border-left 0.3s ease,
              box-shadow 0.3s ease;
}

.why-uss-power-strip:hover {
  transform: translateX(8px) !important;
  border-color: rgba(251, 108, 3, 0.35);
  border-left: 5px solid #fb6c03;
  box-shadow: 0 10px 26px rgba(251, 108, 3, 0.12);
}

.power-strip-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: rgba(251, 108, 3, 0.1);
  color: #fb6c03;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.why-uss-power-strip:hover .power-strip-icon-box {
  background: #fb6c03;
  color: #ffffff;
  transform: scale(1.05);
}

.power-strip-body {
  flex: 1;
}

.power-strip-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: #25292c;
  line-height: 1.3;
  margin: 0 0 6px 0;
}

.power-strip-desc {
  font-size: 0.88rem;
  line-height: 1.58;
  color: #51565a;
  margin: 0;
}

.power-strip-chevron {
  color: #cbd5e1;
  font-size: 0.85rem;
  transition: all 0.25s ease;
}

.why-uss-power-strip:hover .power-strip-chevron {
  color: #fb6c03;
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   9. SECTION 7 — PROJECT ASSESSMENT & DEMOLITION CONSULTATION
   - Slowly showing Left and Right boxes
   - Sentence by sentence individual letters rising from downside to position
   - Backward direction reaction on upside scroll
   -------------------------------------------------------------------------- */
.service-enquiry-section {
  padding: var(--service-section-padding-y, 48px) 0;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
  perspective: 1200px;
}

.enquiry-master-card {
  background: #ffffff;
  border: 1px solid rgba(114, 118, 121, 0.16);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(37, 41, 44, 0.08);
  overflow: hidden;
  will-change: transform, opacity, box-shadow;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.3s ease,
              box-shadow 0.35s ease;
}

.enquiry-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
}

.enquiry-info-panel {
  background: #25292c;
  color: #ffffff;
  padding: 50px 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease;
}

.tag-enquiry-badge {
  background: rgba(251, 108, 3, 0.2) !important;
  color: #fb6c03 !important;
  border-color: rgba(251, 108, 3, 0.45) !important;
}

.enquiry-main-h2 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.1rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 16px 0 18px 0;
}

.enquiry-info-top p {
  font-size: 1rem;
  line-height: 1.68;
  color: #cbd5e1;
  margin-bottom: 20px;
}

.enquiry-hero-action {
  margin-top: 30px;
}

.enquiry-hero-action .btn-primary {
  padding: 12px 28px !important;
  font-size: 0.94rem !important;
  background: #fb6c03;
  border-color: #fb6c03;
}

.enquiry-hero-action .btn-primary:hover {
  background: #e05e00;
  border-color: #e05e00;
}

.enquiry-form-panel {
  padding: 45px 40px;
  background: #ffffff;
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease;
}

.enquiry-form-header {
  margin-bottom: 24px;
}

.enquiry-form-header h3 {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: #25292c;
  margin: 0;
}

/* Letter Animation Units */
.letter-word-wrap {
  display: inline-block;
  white-space: nowrap;
}

.letter-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
}

.letter-char {
  display: inline-block;
  will-change: transform, opacity;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.22s ease;
}

/* Form Steps & Buttons Rising from Downside */
[data-form-step], [data-enquiry-element] {
  will-change: transform, opacity;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
              opacity 0.25s ease;
}

.service-quote-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.service-quote-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.service-quote-form label {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.85rem;
  font-weight: 700;
  color: #25292c;
}

.service-quote-form .form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(114, 118, 121, 0.2);
  border-radius: 7px;
  font-size: 0.92rem;
  color: #25292c;
  background: #fdfefe;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.service-quote-form .form-control:focus {
  border-color: #fb6c03;
  box-shadow: 0 0 0 3px rgba(251, 108, 3, 0.15);
  background: #ffffff;
}

.btn-service-submit {
  width: 100%;
  padding: 13px 24px;
  background: #fb6c03;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s ease;
  box-shadow: 0 6px 18px rgba(251, 108, 3, 0.3);
  margin-top: 6px;
}

.btn-service-submit:hover {
  background: #e05e00;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(251, 108, 3, 0.4);
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .blueprint-hud-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .service-hero-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .service-intro-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .solutions-split-grid {
    grid-template-columns: 1fr;
  }
  .why-uss-split-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .service-hero-h1 {
    font-size: 2.2rem;
  }
  .intro-display-h2 {
    font-size: 2rem;
  }
  .pipeline-connector-line {
    display: none;
  }
  .work-steps-pipeline-grid,
  .work-steps-pipeline-grid.grid-5-col {
    grid-template-columns: repeat(2, 1fr);
  }
  .enquiry-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --service-section-gap: 0.75in;
    --service-section-padding-y: calc(var(--service-section-gap) / 2);
  }
  .solution-split-card {
    flex-direction: column;
  }
  .solution-split-media {
    flex: none;
    height: 180px;
  }
  .blueprint-hud-grid {
    grid-template-columns: 1fr;
  }
  .work-steps-pipeline-grid,
  .work-steps-pipeline-grid.grid-5-col {
    grid-template-columns: 1fr;
  }
  /* Vertical Spine Responsive Layout */
  .approach-spine-track {
    left: 24px;
    transform: none;
  }
  .approach-spine-row {
    grid-template-columns: 48px 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }
  .approach-spine-node {
    grid-column: 1;
  }
  .spine-card-wing-left,
  .spine-card-wing-right {
    grid-column: 2;
    justify-content: flex-start;
  }
  .approach-milestone-card {
    max-width: 100%;
  }
  .why-uss-briefing-card {
    padding: 30px 24px;
  }
  .why-uss-power-strip {
    padding: 14px 16px;
    gap: 14px;
  }
  .service-quote-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .enquiry-info-panel, .enquiry-form-panel {
    padding: 30px 20px;
  }
  .service-hero-h1 {
    font-size: 1.85rem;
  }
}


/* --------------------------------------------------------------------------
   NO ORANGE GLOW OVERRIDE FOR HOW WE WORK & OUR DEMOLITION APPROACH
   Removes glowing aura from procession line and numbered node circles
   -------------------------------------------------------------------------- */
.how-we-work-section .pipeline-progress-fill,
.approach-spine-section .spine-progress-fill {
  box-shadow: none !important;
  filter: none !important;
}

.how-we-work-section .pipeline-progress-fill::after,
.approach-spine-section .spine-progress-fill::after {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  filter: none !important;
}

.how-we-work-section .pipeline-node-wrapper.node-active,
.approach-spine-section .spine-node-disc.disc-active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  filter: none !important;
}


/* --------------------------------------------------------------------------
   ADDITIONAL STYLES FOR COMMERCIAL COMPLEX DEMOLITION & 7-CARD BLUEPRINT
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  /* Center the 7th card in Row 3 of the Blueprint HUD grid */
  .blueprint-hud-grid .blueprint-hud-card:nth-child(7):last-child {
    grid-column: 2;
  }
}

/* Staggered delay support for 6th power strip and 7th blueprint card */
.why-uss-power-strip[data-why-strip="6"] {
  transition-delay: 0.52s;
}
.blueprint-hud-card[data-grow-box="7"] {
  transition-delay: 0.45s;
}

/* --------------------------------------------------------------------------
   SECTION 8 — FINAL CTA BANNER
   -------------------------------------------------------------------------- */
.service-final-cta-section {
  padding: var(--service-section-padding-y, 48px) 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
}

.final-cta-box {
  max-width: 920px;
  margin: 0 auto;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 20px;
  padding: 60px 45px;
  color: #ffffff;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.final-cta-box::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 108, 3, 0.28) 0%, rgba(251, 108, 3, 0) 70%);
  pointer-events: none;
}

.final-cta-box .section-tag-sub {
  background: rgba(251, 108, 3, 0.18);
  color: #ff9142;
  border: 1px solid rgba(251, 108, 3, 0.4);
  margin-bottom: 20px;
  display: inline-flex;
}

.final-cta-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.35rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 18px;
  line-height: 1.25;
}

.final-cta-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #94a3b8;
  max-width: 740px;
  margin: 0 auto 35px auto;
}

.final-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .final-cta-box {
    padding: 40px 24px;
  }
  .final-cta-title {
    font-size: 1.75rem;
  }
  .final-cta-desc {
    font-size: 0.95rem;
  }
}