/* ==========================================================================
   UNITED SAW SERVICES — HYDERABAD
   THEME: Pure White Background, High-Impact Industrial Orange & Architectural Slate Grays
   COMMERCIAL DEMOLITION & CONCRETE SERVICES HOMEPAGE STYLESHEET
   ========================================================================== */

:root {
  /* PURE WHITE BACKGROUND SYSTEM */
  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --bg-slate: #f2f5f7;
  --bg-card: #ffffff;
  --bg-subtle: #fafbfc;

  /* BRAND ORANGE PALETTE (#fb6c03) */
  --color-orange-primary: #fb6c03; /* Official USS Primary Orange: rgba(251, 108, 3) / hsl(25, 98, 50) */
  --color-orange-hover: #e55e00;   /* Rich deep hover state */
  --color-orange-dark: #cc5400;    /* Dark accent orange */
  --color-orange-deep: #a84200;    /* Heavy industrial orange */
  --color-orange-light: #ff852e;   /* Vibrant energetic tint */
  --color-orange-soft: rgba(251, 108, 3, 0.08); /* Clean ambient glow */
  --color-orange-subtle: rgba(251, 108, 3, 0.14);
  --color-orange-glow: rgba(251, 108, 3, 0.35);
  --color-orange-border: rgba(251, 108, 3, 0.38);

  /* BRAND GRAY & CHARCOAL PALETTE */
  --color-brand-gray: #727679;     /* Brand Slate Gray: rgba(114, 118, 121) / hsl(206, 3, 46) */
  --color-brand-charcoal: #25292c; /* Brand Heavy Charcoal: rgba(37, 41, 44) / hsl(206, 9, 16) */

  /* COMPATIBILITY & SOLID ACCENT GRADIENTS */
  --color-thick-orange: #fb6c03;
  --color-thick-orange-dark: #e55e00;
  --color-thick-orange-border: rgba(251, 108, 3, 0.45);
  --gradient-glitter-orange: linear-gradient(135deg, #fb6c03 0%, #e55e00 100%);
  --gradient-thick-orange: linear-gradient(135deg, #fb6c03 0%, #e55e00 100%);
  --gradient-button-glitter: linear-gradient(135deg, #fb6c03 0%, #ff7d1c 100%);

  /* TYPOGRAPHY COLORS BASED ON #25292c AND #727679 */
  --text-dark: #25292c;
  --text-heading: #25292c;
  --text-body: #3c4246;
  --text-muted: #727679;
  --text-light: #8e9396;

  /* BORDER COLORS */
  --border-light: #e4e7e9;
  --border-medium: #727679;
  --border-dark: #25292c;

  /* TYPOGRAPHY FONTS */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* SHADOWS USING #25292c AND #fb6c03 */
  --shadow-sm: 0 2px 6px rgba(37, 41, 44, 0.05);
  --shadow-md: 0 8px 22px rgba(37, 41, 44, 0.08);
  --shadow-lg: 0 16px 36px rgba(37, 41, 44, 0.12);
  --shadow-xl: 0 24px 50px rgba(37, 41, 44, 0.16);
  --shadow-orange: 0 10px 28px rgba(251, 108, 3, 0.35);

  /* SMOOTH TRANSITION TIMING CURVES */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-white);
  color: var(--text-body);
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-white);
  color: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

ul, ol {
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ==========================================================================
   LAYOUT CONTAINERS & TYPOGRAPHY UTILITIES
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section {
  padding-top: 90px;
  padding-bottom: 90px;
  position: relative;
  background-color: var(--bg-white);
}

.section.bg-light {
  background-color: var(--bg-light);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.text-center {
  text-align: center;
}

.text-muted {
  color: var(--text-muted);
}

.highlight-orange {
  color: var(--color-orange-primary);
  font-weight: 800;
}

.highlight-glitter {
  color: var(--color-orange-primary);
  font-weight: 800;
  display: inline-block;
}

/* Section Header Structure */
.section-header {
  margin-bottom: 50px;
}

.section-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: var(--color-orange-soft);
  padding: 5px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
  margin-bottom: 14px;
}

.section-h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}

.header-divider {
  width: 60px;
  height: 4px;
  background: var(--color-orange-primary);
  border-radius: 2px;
  margin: 16px auto 20px auto;
}

.section-intro {
  font-size: 1.15rem;
  color: var(--text-heading);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  font-weight: 500;
}

.lead-para {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  line-height: 1.5;
}

.section-note {
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 35px;
  padding-top: 15px;
  border-top: 1px dashed var(--border-medium);
}

/* ==========================================================================
   BUTTONS & INTERACTIVE ELEMENTS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  padding: 12px 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-orange-primary);
  color: #ffffff;
  border: 2px solid var(--color-orange-primary);
  box-shadow: 0 4px 14px rgba(251, 108, 3, 0.32);
  text-shadow: none;
}

.btn-primary:hover {
  background: var(--color-orange-hover);
  border-color: var(--color-orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(251, 108, 3, 0.42);
  color: #ffffff;
}

.btn-secondary {
  background: var(--bg-white);
  color: var(--text-dark);
  border-color: var(--border-medium);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--color-orange-primary);
  color: var(--color-orange-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-lg {
  padding: 15px 32px;
  font-size: 1.05rem;
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* ==========================================================================
   TOP UTILITY BAR (SINGLE CRISP HORIZONTAL LINE)
   ========================================================================== */

body {
  padding-top: 102px; /* 34px Top-Bar + 68px Navbar */
}

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: #25292c;
  color: #ffffff;
  border-bottom: 2px solid #fb6c03;
  z-index: 1002;
  display: flex;
  align-items: center;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.top-bar.top-bar-hidden {
  transform: translateY(-100%);
}

.top-bar-inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.top-bar-inner::-webkit-scrollbar {
  display: none;
}

.top-bar-left, .top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.top-bar-left span, .top-bar-right a {
  color: #e2e8f0;
  font-size: 0.74rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: color 0.2s ease;
  line-height: 1;
}

.top-bar-left i, .top-bar-right i {
  color: #fb6c03;
  font-size: 0.72rem;
}

.top-bar-right a:hover {
  color: #fb6c03;
}

.top-sep {
  color: rgba(255, 255, 255, 0.32);
  font-size: 0.7rem;
  user-select: none;
}

.ida-top-tag {
  background: rgba(251, 108, 3, 0.18);
  border: 1px solid rgba(251, 108, 3, 0.4);
  padding: 2px 7px;
  border-radius: 4px;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.71rem !important;
  white-space: nowrap;
}

.ida-top-icon {
  width: 17px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   HEADER & NAVIGATION (Moved to dedicated modular stylesheet: css/header.css)
   ========================================================================== */

.footer-logo-img {
  height: 56px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  background: #ffffff;
  padding: 6px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(37, 41, 44, 0.12);
  display: inline-block;
  margin-bottom: 18px;
  transition: transform var(--transition-normal);
}

.footer-logo:hover .footer-logo-img {
  transform: scale(1.03);
}

.logo-mark {
  width: 44px;
  height: 44px;
  background: var(--color-orange-primary);
  border-radius: 8px;
  border: 1.5px solid var(--color-orange-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.5rem;
  box-shadow: 0 4px 14px rgba(251, 108, 3, 0.3);
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--text-dark);
  line-height: 1.1;
}

.brand-sub {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-orange-primary);
  text-transform: uppercase;
}

/* ==========================================================================
   NAVIGATION & SERVICES DROPDOWN (Moved to dedicated modular stylesheet: css/header.css)
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — HERO SECTION & KINETIC WRAP-TYPE ANIMATION
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — HERO SLIDER (3 SLIDES: VIDEO, IMAGE, IMAGE — 1920x1080 FULL HD)
   ========================================================================== */

/* ==========================================================================
   SECTION 1 — HERO SLIDER (CITY DEMOLITION ARCHITECTURAL MASTER STYLE)
   Direct recreation of https://www.citydemolition.co.uk/
   - Fonts: 'Work Sans' for display titles & descriptions, 'Montserrat' for buttons
   - Slides: 1920x1080 Full HD media (images & video preserved)
   - Sliding overlay & masked horizontal slide-in reveal animations
   - Authentic City Demolition typography scales, letter spacing, and timing
   - Minimalist dark semi-transparent rectangular controls & dots
   ========================================================================== */

.city-hero-slider-section {
  position: relative;
  width: 100%;
  min-height: 720px;
  height: 86vh;
  max-height: 880px;
  overflow: hidden;
  background: #0b0f14;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 2px solid #1a222c;
}

.city-hero-slider-section .hero-slider {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 720px;
}

/* Base Slide Structure with Sliding Transition */
.city-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  transform: translateX(100%);
  transition: transform 1.25s cubic-bezier(0.77, 0, 0.175, 1),
              opacity 0.8s ease,
              visibility 0.8s ease;
  will-change: transform, opacity;
}

.city-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transform: translateX(0%);
}

.city-slide.slide-out-left {
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

.city-slide.slide-out-right {
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  z-index: 1;
}

/* Media Container (1920x1080) */
.city-hero-slider-section .slide-media-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #080c10;
  z-index: 1;
}

.city-hero-slider-section .slide-media-element {
  width: 100%;
  height: 100%;
  max-width: 1920px;
  max-height: 1080px;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}

/* Subtle cinematic zoom for image slides */
@keyframes cityMediaZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.city-slide[data-type="image"].active .slide-media-element {
  animation: cityMediaZoom 12s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* Dark Cinematic Vignette Overlays matching City Demolition */
.city-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(11, 15, 20, 0.35) 0%, rgba(11, 15, 20, 0.72) 100%);
}

.city-slide-right .city-slide-overlay {
  background: linear-gradient(270deg, 
    rgba(8, 12, 16, 0.88) 0%, 
    rgba(8, 12, 16, 0.78) 38%, 
    rgba(8, 12, 16, 0.45) 70%, 
    rgba(8, 12, 16, 0.20) 100%);
}

.city-slide-left .city-slide-overlay {
  background: linear-gradient(90deg, 
    rgba(8, 12, 16, 0.88) 0%, 
    rgba(8, 12, 16, 0.78) 38%, 
    rgba(8, 12, 16, 0.45) 70%, 
    rgba(8, 12, 16, 0.20) 100%);
}

/* Slide Content Layout Wrappers */
.city-slide-content-wrap {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 60px;
}

.city-slide-right .city-slide-content-wrap {
  justify-content: flex-end;
}

.city-slide-left .city-slide-content-wrap {
  justify-content: flex-start;
}

.city-hero-content {
  max-width: 820px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.city-slide-right .city-hero-content {
  align-items: flex-end;
  text-align: right;
  max-width: 760px;
}

.city-slide-left .city-hero-content {
  align-items: flex-start;
  text-align: left;
  max-width: 840px;
}

/* Layer 1: Uppercase Wide-Tracked Pre-Title Tagline ('Work Sans' 15px / 9px tracking) */
.city-tagline-layer {
  margin-bottom: 14px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.city-tagline-text {
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffff;
  display: inline-block;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Layer 2: Main Heading Mask Wrap & Text ('Work Sans' 100px condensed display, -4px tracking) */
.city-heading-mask {
  overflow: hidden;
  width: 100%;
  padding-bottom: 6px;
  margin-bottom: 18px;
}

.city-heading-text {
  font-family: 'Work Sans', sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -2px;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.65);
  will-change: transform, opacity;
  opacity: 0;
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* Layer 3: Narrative Copy Mask Wrap & Text ('Work Sans' 18px / 22px line-height) */
.city-desc-mask {
  overflow: hidden;
  width: 100%;
  max-width: 660px;
  margin-bottom: 28px;
}

.city-desc-text {
  font-family: 'Work Sans', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
  will-change: transform, opacity;
  opacity: 0;
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}

/* Layer 4: CTA Button Layer ('Montserrat' 11px uppercase, 3px tracking) */
.city-cta-layer {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  transform: translateY(22px);
  transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.0s ease;
  will-change: transform, opacity;
}

.city-slide-right .city-cta-layer {
  justify-content: flex-end;
}

.city-slide-left .city-cta-layer {
  justify-content: flex-start;
}

.city-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  line-height: 17px;
  letter-spacing: 3px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 13px 35px;
  border-radius: 0px;
  color: #ffffff;
  background-color: rgba(154, 154, 154, 0.75);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.25s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

.city-btn:hover {
  background-color: #9a9a9a;
  color: #ffffff;
  border-color: #ffffff;
  transform: translateY(-2px);
}

.city-btn-primary {
  background-color: #fb6c03;
  border-color: #fb6c03;
  color: #ffffff;
}

.city-btn-primary:hover {
  background-color: #e05e00;
  border-color: #e05e00;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ==========================================================================
   FONT SLIDE VISIBLE REVEAL ANIMATIONS (CITY DEMOLITION MASKED SLIDE-IN)
   When slide becomes .active:
   1. Tagline zooms from 0.9 to 1.0 (delay: 0.35s)
   2. Heading slides horizontally through overflow mask (delay: 0.75s)
   3. Description slides horizontally through overflow mask (delay: 1.15s)
   4. CTA buttons slide up into place (delay: 1.55s)
   ========================================================================== */

/* Slide 1 (Right-Aligned): Heading & Text Slide in from the Right */
.city-slide-right .city-heading-text,
.city-slide-right .city-desc-text {
  transform: translateX(120%);
}

.city-slide-right.active .city-tagline-layer {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.35s;
}

.city-slide-right.active .city-heading-text {
  transform: translateX(0%);
  opacity: 1;
  transition-delay: 0.75s;
}

.city-slide-right.active .city-desc-text {
  transform: translateX(0%);
  opacity: 1;
  transition-delay: 1.15s;
}

.city-slide-right.active .city-cta-layer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.55s;
}

/* Slides 2 & 3 (Left-Aligned): Heading & Text Slide in from the Right (matching Revolution Slider data-frame_0="x:175%") */
.city-slide-left .city-heading-text,
.city-slide-left .city-desc-text {
  transform: translateX(120%);
}

.city-slide-left.active .city-tagline-layer {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.35s;
}

.city-slide-left.active .city-heading-text {
  transform: translateX(0%);
  opacity: 1;
  transition-delay: 0.75s;
}

.city-slide-left.active .city-desc-text {
  transform: translateX(0%);
  opacity: 1;
  transition-delay: 1.15s;
}

.city-slide-left.active .city-cta-layer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.55s;
}

/* Slider Navigation Controls (City Demolition Rectangular Style) */
.city-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.city-arrow-prev {
  left: 0;
}

.city-arrow-next {
  right: 0;
}

.city-slider-arrow:hover {
  background: #000000;
  color: #fb6c03;
}

/* Slider Bullets (City Demolition Minimalist Pagination) */
.city-slider-bullets-wrap {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.city-slider-bullets {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  padding: 4px;
}

.city-slider-bullet {
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0;
  background: rgba(125, 125, 125, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.city-slider-bullet:hover,
.city-slider-bullet.active {
  background: #ffffff;
  transform: scale(1.15);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .city-hero-slider-section {
    min-height: 640px;
    height: 78vh;
  }
  .city-tagline-text {
    letter-spacing: 7px;
    font-size: 14px;
  }
  .city-heading-text {
    font-size: clamp(2.0rem, 4.2vw, 2.85rem);
    letter-spacing: -1.5px;
    line-height: 1.12;
  }
  .city-desc-text {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .city-hero-slider-section {
    min-height: 580px;
    height: auto;
    padding: 80px 0 50px 0;
  }
  .city-slide-content-wrap {
    padding-top: 20px;
    padding-bottom: 40px;
    justify-content: flex-start !important;
  }
  .city-hero-content {
    text-align: left !important;
    align-items: flex-start !important;
    max-width: 100%;
  }
  .city-cta-layer {
    justify-content: flex-start !important;
    width: 100%;
  }
  .city-tagline-text {
    font-size: 13px;
    letter-spacing: 5px;
  }
  .city-heading-text {
    font-size: clamp(1.65rem, 5.8vw, 2.35rem);
    letter-spacing: -1px;
    line-height: 1.15;
  }
  .city-desc-text {
    font-size: 15px;
  }
  .city-btn {
    padding: 11px 24px;
    font-size: 10px;
    letter-spacing: 2px;
  }
  .city-slider-arrow {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

/* ==========================================================================
   SCROLL PROGRESS BAR & MODERN SCROLL TRANSITIONS ENGINE
   ========================================================================== */

/* Top Reading Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%);
  z-index: 99999;
  transition: width 0.08s linear;
  box-shadow: 0 0 12px rgba(251, 108, 3, 0.7);
}

/* ==========================================================================
   BI-DIRECTIONAL MOTION & EMOTION SCROLL ANIMATIONS (CONTENT LEFT & IMAGES RIGHT)
   Re-triggers on both Forward (downward) and Backward (upward) scrolling
   Punchy, dynamic, highly perceptible entrance while scrolling without any lazy delay
   ========================================================================== */

/* Prevent horizontal scrollbars caused by offscreen motion transforms */
html, body {
  overflow-x: hidden;
}

.section {
  overflow-x: clip;
}

/* Content Elements: Dynamic high-impact motion coming in from the LEFT */
.motion-from-left,
.reveal-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: transform 0.52s cubic-bezier(0.18, 0.9, 0.28, 1),
              opacity 0.42s ease;
  will-change: transform, opacity;
}

.motion-from-left.motion-active,
.motion-from-left.is-revealed,
.reveal-left.motion-active,
.reveal-left.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* Image Frames & Visual Media: Dynamic high-impact motion coming in from the RIGHT */
.motion-from-right,
.reveal-right {
  opacity: 0;
  transform: translateX(80px) scale(0.97);
  transition: transform 0.52s cubic-bezier(0.18, 0.9, 0.28, 1),
              opacity 0.42s ease;
  will-change: transform, opacity;
}

.motion-from-right.motion-active,
.motion-from-right.is-revealed,
.reveal-right.motion-active,
.reveal-right.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
}

/* General Vertical Reveal on Scroll (Bi-directional) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.5s cubic-bezier(0.18, 0.9, 0.28, 1), 
              transform 0.5s cubic-bezier(0.18, 0.9, 0.28, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.motion-active,
.reveal-on-scroll.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s cubic-bezier(0.18, 0.9, 0.28, 1), 
              transform 0.5s cubic-bezier(0.18, 0.9, 0.28, 1);
  will-change: opacity, transform;
}

.reveal-scale.motion-active,
.reveal-scale.is-revealed {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Emotion Image Frame (Dynamic lift and glowing accent border sheen on view) */
.motion-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(37, 41, 44, 0.08);
  transition: box-shadow 0.45s ease, transform 0.52s cubic-bezier(0.18, 0.9, 0.28, 1);
}

.motion-image-frame.motion-active,
.motion-image-frame.is-revealed {
  box-shadow: 0 16px 36px rgba(37, 41, 44, 0.14), 0 0 0 1.5px rgba(251, 108, 3, 0.20);
}

/* Rapid, rhythmic staggers so user clearly experiences the cascading wave */
.motion-stagger-1, .stagger-1 { transition-delay: 0.04s; }
.motion-stagger-2, .stagger-2 { transition-delay: 0.08s; }
.motion-stagger-3, .stagger-3 { transition-delay: 0.12s; }
.motion-stagger-4, .stagger-4 { transition-delay: 0.16s; }
.motion-stagger-5, .stagger-5 { transition-delay: 0.20s; }
.motion-stagger-6, .stagger-6 { transition-delay: 0.24s; }
.motion-stagger-7, .stagger-7 { transition-delay: 0.28s; }

/* Responsive motion distances on mobile */
@media (max-width: 768px) {
  .motion-from-left {
    transform: translateX(-40px);
  }
  .motion-from-right {
    transform: translateX(40px) scale(0.98);
  }
}

/* Smooth Back-to-Top Floating Button */
.back-to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-orange-primary);
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 8px 24px rgba(251, 108, 3, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.back-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top-btn:hover {
  background: var(--color-orange-hover);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 12px 28px rgba(251, 108, 3, 0.55);
}


/* 1. Header Typography: 100% Fully Visible, Prominent & High-Contrast */
.portfolio-section-header {
  margin-bottom: 16px !important;
  position: relative;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.portfolio-section-header .section-tag,
#portfolioTag {
  display: inline-block;
  color: #fb6c03 !important;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 1 !important;
  visibility: visible !important;
}

.portfolio-section-header .section-h2,
#portfolioH2 {
  color: #0f172a !important;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 10px;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s ease;
  will-change: transform, opacity;
}

.portfolio-section-header .section-intro,
#portfolioIntro {
  color: #475569 !important;
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 820px;
  margin: 0 auto;
  opacity: 1 !important;
  visibility: visible !important;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s ease;
  will-change: transform, opacity;
}

#portfolioH2.portfolio-glided {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

#portfolioH2.portfolio-out-left {
  transform: translateX(-40px);
  opacity: 0.88 !important;
}

#portfolioIntro.portfolio-glided {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

#portfolioIntro.portfolio-out-right {
  transform: translateX(40px);
  opacity: 0.88 !important;
}

/* 2. Sub-Heading Category Navigation (Left & Right Buttons, NO Scrollbar) */
.portfolio-tabs-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 16px auto;
  max-width: 1040px;
  position: relative;
}

.portfolio-tab-arrow {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid rgba(114, 118, 121, 0.28);
  color: #1e293b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.portfolio-tab-arrow:hover {
  background: #fb6c03;
  color: #ffffff;
  border-color: #fb6c03;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(251, 108, 3, 0.3);
}

.service-selector-nav {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 4px 2px;
  scroll-behavior: smooth;
  flex-grow: 1;
  border-bottom: none;
  margin-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.service-selector-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.selector-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(114, 118, 121, 0.22);
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s ease;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.selector-tab i {
  color: #fb6c03;
  transition: color 0.25s ease;
}

.selector-tab:hover {
  border-color: #fb6c03;
  color: #fb6c03;
  transform: translateY(-1px);
}

.selector-tab.active {
  background: linear-gradient(135deg, #fb6c03 0%, #e05e00 100%);
  border-color: #fb6c03;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(251, 108, 3, 0.35);
}

.selector-tab.active i {
  color: #ffffff;
}

/* 3. Compact Two-Page Open Book Stage */
/* ==========================================================================
   3. SECTION 3 - CORE CAPABILITIES: CITY DEMOLITION STYLE 3D FLIPBOOK
   ========================================================================== */

/* 1. Sub-Heading Navigation Bar with Left & Right Buttons */
.portfolio-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto 20px auto;
  gap: 8px;
  z-index: 25;
}

.portfolio-tab-arrow {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(114, 118, 121, 0.25);
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  pointer-events: auto !important;
  flex-shrink: 0;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 28;
  user-select: none;
}

.portfolio-tab-arrow:hover {
  background: #fb6c03;
  color: #ffffff;
  border-color: #fb6c03;
  box-shadow: 0 4px 12px rgba(251, 108, 3, 0.35);
  transform: translateY(-1px);
}

.portfolio-tab-arrow:active {
  transform: scale(0.94);
}

.service-selector-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 6px 3px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  z-index: 26;
}

.service-selector-nav::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.selector-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(114, 118, 121, 0.24);
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
  cursor: pointer !important;
  pointer-events: auto !important;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  z-index: 27;
  user-select: none;
}

.selector-tab i {
  color: #fb6c03;
  transition: color 0.25s ease;
}

.selector-tab:hover {
  border-color: #fb6c03;
  color: #fb6c03;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.selector-tab:active {
  transform: scale(0.96);
}

.selector-tab.active {
  background: linear-gradient(135deg, #fb6c03 0%, #e05e00 100%) !important;
  border-color: #fb6c03 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(251, 108, 3, 0.4) !important;
  transform: translateY(-1px);
}

.selector-tab.active i {
  color: #ffffff !important;
}

/* 2. City Demolition Style Realistic Brochure Stage */
.df-brochure-stage {
  max-width: 1060px;
  margin: 0 auto 24px auto;
  position: relative;
  background: radial-gradient(circle at 50% 38%, #1f2937 0%, #0b1120 100%);
  border-radius: 16px;
  padding: 24px 20px 22px 20px;
  box-sizing: border-box;
  box-shadow: 
    0 25px 60px -15px rgba(0, 0, 0, 0.55),
    0 12px 24px -10px rgba(0, 0, 0, 0.4),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
  overflow: visible;
}

/* Ambient Ground Shadow Under the Open Brochure */
.df-book-ground-shadow {
  position: absolute;
  bottom: 74px;
  left: 6%;
  width: 88%;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
  pointer-events: none;
  z-index: 1;
}

/* Left & Right Margin Navigation Flip Arrows (Circular Pill Buttons, No Text) */
.df-stage-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 0;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 100 !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
}

.df-stage-nav i {
  color: #fb6c03;
  font-size: 1.05rem;
  transition: transform 0.25s ease, color 0.25s ease;
}

.df-stage-prev {
  left: -24px;
}

.df-stage-prev:hover i {
  transform: translateX(-3px);
  color: #ffffff;
}

.df-stage-next {
  right: -24px;
}

.df-stage-next:hover i {
  transform: translateX(3px);
  color: #ffffff;
}

.df-stage-nav:hover {
  background: #fb6c03;
  color: #ffffff;
  border-color: #fb6c03;
  box-shadow: 0 10px 28px rgba(251, 108, 3, 0.55);
  transform: translateY(-50%) scale(1.1);
}

.df-stage-nav:active {
  transform: translateY(-50%) scale(0.94);
}

.df-nav-label {
  display: none !important;
}

/* 3. Physical 3D Book of Bundle Pages Architecture */
.df-book-shell {
  position: relative;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  min-height: 580px;
  z-index: 2;
  perspective: 2200px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.df-book-block {
  position: relative;
  width: 100%;
  min-height: 580px;
  border-radius: 6px;
  transform-style: preserve-3d;
  box-shadow: 
    0 30px 60px -12px rgba(0, 0, 0, 0.65),
    0 12px 24px -6px rgba(0, 0, 0, 0.45);
}

/* Physical Bundle Stacks - Layered 3D Paper Leaves on Margins */
.df-bundle-stack {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  pointer-events: none;
  z-index: 1;
}

.df-bundle-left {
  left: 0;
}

.df-bundle-right {
  right: 0;
}

.bundle-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  transition: transform 0.4s ease, opacity 0.4s ease;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Left Stack Page Leaves (stepping leftwards) */
.df-bundle-left .leaf-1 {
  left: -3px;
  top: 2px;
  bottom: 2px;
  width: 8px;
  background: #fbfbfb;
  border-left: 1px solid #cbd5e1;
}

.df-bundle-left .leaf-2 {
  left: -6px;
  top: 4px;
  bottom: 4px;
  width: 8px;
  background: #f4f6f8;
  border-left: 1px solid #cbd5e1;
}

.df-bundle-left .leaf-3 {
  left: -9px;
  top: 6px;
  bottom: 6px;
  width: 8px;
  background: #eef2f6;
  border-left: 1px solid #94a3b8;
}

.df-bundle-left .leaf-4 {
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 8px;
  background: #e2e8f0;
  border-left: 2px solid #64748b;
}

/* Right Stack Page Leaves (stepping rightwards) */
.df-bundle-right .leaf-1 {
  right: -3px;
  top: 2px;
  bottom: 2px;
  width: 8px;
  background: #fbfbfb;
  border-right: 1px solid #cbd5e1;
}

.df-bundle-right .leaf-2 {
  right: -6px;
  top: 4px;
  bottom: 4px;
  width: 8px;
  background: #f4f6f8;
  border-right: 1px solid #cbd5e1;
}

.df-bundle-right .leaf-3 {
  right: -9px;
  top: 6px;
  bottom: 6px;
  width: 8px;
  background: #eef2f6;
  border-right: 1px solid #94a3b8;
}

.df-bundle-right .leaf-4 {
  right: -12px;
  top: 8px;
  bottom: 8px;
  width: 8px;
  background: #e2e8f0;
  border-right: 2px solid #64748b;
}

.bundle-edge-shadow {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 14px;
  pointer-events: none;
}

.df-bundle-left .bundle-edge-shadow {
  left: -14px;
  background: linear-gradient(to right, rgba(0,0,0,0.35) 0%, transparent 100%);
}

.df-bundle-right .bundle-edge-shadow {
  right: -14px;
  background: linear-gradient(to left, rgba(0,0,0,0.35) 0%, transparent 100%);
}

/* Dynamic Bundle Stack Thickness depending on current spread */
.df-book-block[data-spread="1"] .df-bundle-left .leaf-3,
.df-book-block[data-spread="1"] .df-bundle-left .leaf-4 {
  opacity: 0.15;
  transform: translateX(4px);
}
.df-book-block[data-spread="1"] .df-bundle-right .leaf-3,
.df-book-block[data-spread="1"] .df-bundle-right .leaf-4 {
  opacity: 1;
  transform: translateX(0);
}

.df-book-block[data-spread="2"] .df-bundle-left .leaf-3 {
  opacity: 0.7;
  transform: translateX(0);
}
.df-book-block[data-spread="2"] .df-bundle-left .leaf-4 {
  opacity: 0.3;
  transform: translateX(2px);
}
.df-book-block[data-spread="2"] .df-bundle-right .leaf-4 {
  opacity: 0.8;
  transform: translateX(0);
}

.df-book-block[data-spread="3"] .df-bundle-left .leaf-4 {
  opacity: 0.8;
  transform: translateX(0);
}
.df-book-block[data-spread="3"] .df-bundle-right .leaf-4 {
  opacity: 0.3;
  transform: translateX(-2px);
}

.df-book-block[data-spread="4"] .df-bundle-left .leaf-3,
.df-book-block[data-spread="4"] .df-bundle-left .leaf-4 {
  opacity: 1;
  transform: translateX(0);
}
.df-book-block[data-spread="4"] .df-bundle-right .leaf-3,
.df-book-block[data-spread="4"] .df-bundle-right .leaf-4 {
  opacity: 0.15;
  transform: translateX(-4px);
}

/* Center Spine Binding Crease */
.df-center-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 36px;
  transform: translateX(-50%);
  z-index: 15;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.22) 0%,
    rgba(0, 0, 0, 0.05) 35%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(0, 0, 0, 0.05) 65%,
    rgba(0, 0, 0, 0.22) 100%
  );
  box-shadow: 
    inset 1px 0 2px rgba(0,0,0,0.15),
    inset -1px 0 2px rgba(0,0,0,0.15);
}

.spine-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Spreads Container & Spreads */
.df-spreads-container {
  position: relative;
  width: 100%;
  min-height: 580px;
  z-index: 10;
}

.df-spread {
  display: flex !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 580px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  z-index: 5;
}

.df-spread.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  z-index: 15;
}

/* Seamless 3D Dual-Page Flip Underlays (Shows Next/Previous Page Underneath Before Turning) */
.df-spread.df-turning-from-left {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 50% !important;
  min-height: 580px !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 20 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.df-spread.df-turning-from-left .df-page-left {
  width: 100% !important;
}

.df-spread.df-turning-from-left .df-page-right {
  display: none !important;
}

.df-spread.df-turning-from-right {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 50% !important;
  min-height: 580px !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 20 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.df-spread.df-turning-from-right .df-page-right {
  width: 100% !important;
}

.df-spread.df-turning-from-right .df-page-left {
  display: none !important;
}

/* Individual Pages inside Dual-Page Spread */
.df-spread-page {
  width: 50%;
  min-height: 580px;
  background: #ffffff;
  color: #1e293b;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: auto;
  -webkit-user-select: auto;
  pointer-events: auto !important;
  z-index: 16;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Card Focused highlight state */
.df-spread-page.card-focused {
  outline: 2px solid #fb6c03;
  outline-offset: -2px;
  box-shadow: 
    0 0 24px rgba(251, 108, 3, 0.28),
    inset 0 0 0 1px #fb6c03 !important;
  z-index: 20 !important;
}

.df-page-left {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-right: 1px solid #e2e8f0;
  box-shadow: inset -22px 0 28px -12px rgba(0, 0, 0, 0.16);
}

.df-page-right {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border-left: 1px solid #e2e8f0;
  box-shadow: inset 22px 0 28px -12px rgba(0, 0, 0, 0.16);
}

/* 3D Dynamic Turning Page Leaf - hidden & unblockable when idle */
.df-turning-page {
  display: none !important;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: 40;
  pointer-events: none !important;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45);
}

.df-turning-page.flipping {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

.df-turning-page * {
  pointer-events: none !important;
}

.df-turning-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none !important;
}

.df-turning-front {
  transform: rotateY(0deg);
  z-index: 2;
}

.df-turning-back {
  transform: rotateY(180deg);
  z-index: 1;
}

.df-turning-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

/* 4. Page Inner Content & Header Styling */
.df-page-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  background: #ffffff;
  background-image: radial-gradient(#e2e8f0 0.8px, transparent 0.8px);
  background-size: 20px 20px;
  position: relative;
  z-index: 5;
}

/* Left Page: spine crease is on the right -> outer left 20px, spine right 28px */
.df-page-left .df-page-inner {
  padding: 18px 28px 18px 20px;
}

/* Right Page (Page 2, 4, 6, 8): spine crease is on the left -> starting margin moved cleanly to the right away from spine shadow */
.df-page-right .df-page-inner {
  padding: 18px 20px 18px 36px;
}

@media (max-width: 767px) {
  .df-page-left .df-page-inner {
    padding: 16px 20px 16px 16px;
  }
  .df-page-right .df-page-inner {
    padding: 16px 16px 16px 26px;
  }
}

/* Page Header Strip */
.spread-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 7px;
  margin-bottom: 8px;
}

.spread-page-folio {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #64748b;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.spread-page-folio i {
  color: #fb6c03;
}

.df-page-num-pill {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #0f172a;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

/* Page Visual Frame */
.page-visual-block {
  margin-bottom: 8px;
}

.layout-content-top .page-visual-block {
  margin-top: 8px;
  margin-bottom: 0;
}

.page-img-frame {
  height: 155px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.page-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
  image-rendering: auto;
  transition: transform 0.5s ease;
}

.page-img-frame:hover .page-photo {
  transform: scale(1.03);
}

.page-badge {
  position: absolute;
  bottom: 8px;
  left: 10px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(5px);
  color: #ffffff;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  border-left: 2px solid #fb6c03;
}

/* Page Content Block */
.page-content-block {
  display: flex;
  flex-direction: column;
}

.page-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.page-category-tag {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fb6c03;
}

.page-highlight-tag {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

.page-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.25;
}

.page-summary {
  font-size: 0.85rem;
  line-height: 1.48;
  color: #475569;
  margin-bottom: 8px;
}

.page-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  margin-bottom: 10px;
}

.page-bullets li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
}

.page-bullets li i {
  color: #fb6c03;
  font-size: 0.76rem;
}

/* Page Action Button with Chamfered Corners */
.page-footer-action {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 4px;
}

.page-chamfer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #fb6c03 0%, #e05e00 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 800;
  border: none;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 25 !important;
  box-shadow: 0 4px 14px rgba(251, 108, 3, 0.35);
  transition: all 0.25s ease;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  text-decoration: none;
}

.page-chamfer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(251, 108, 3, 0.5);
  color: #ffffff !important;
}

.page-chamfer-btn:active {
  transform: translateY(0) scale(0.97);
}

/* 5. City Demolition Style Reader Controls Toolbar */
.df-reader-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 8px 18px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  z-index: 100 !important;
  position: relative;
  pointer-events: auto !important;
}

.df-toolbar-btn {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  pointer-events: auto !important;
  font-size: 0.84rem;
  transition: all 0.2s ease;
  user-select: none;
  z-index: 105 !important;
}

.df-toolbar-btn:hover {
  background: #fb6c03;
  color: #ffffff;
  border-color: #fb6c03;
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(251, 108, 3, 0.45);
}

.df-toolbar-btn:active {
  transform: scale(0.93);
}

.df-toolbar-btn.active {
  background: #fb6c03;
  color: #ffffff;
  border-color: #fb6c03;
}

.df-page-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
}

.df-page-label {
  color: #94a3b8;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.df-current-page {
  color: #ffffff;
  font-weight: 800;
}

.df-sep {
  color: #64748b;
}

.df-total-pages {
  color: #94a3b8;
}

.df-toolbar-separator {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 4px;
}

.df-toolbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #fb6c03 0%, #e05e00 100%);
  color: #ffffff !important;
  border-radius: 18px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(251, 108, 3, 0.35);
  margin-left: 4px;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 105 !important;
}

.df-toolbar-cta:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(251, 108, 3, 0.5);
  color: #ffffff !important;
}

.df-toolbar-cta:active {
  transform: scale(0.96);
}

/* 6. Fullscreen & Zoomed Presentation Modes */
.df-brochure-stage:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  border-radius: 0 !important;
  padding: 30px 40px 20px 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background: radial-gradient(circle at 50% 40%, #17202e 0%, #060911 100%) !important;
  overflow: auto;
}

.df-brochure-stage:fullscreen .df-book-shell {
  max-width: 1100px;
}

.df-is-zoomed .df-book-shell {
  transform: scale(1.12);
}

/* 7. Responsive Styles for Tablet & Mobile Devices */
@media (max-width: 991px) {
  .df-book-shell,
  .df-book-block,
  .df-spreads-container,
  .df-spread-page {
    min-height: 540px;
  }
  .df-page-inner {
    padding: 14px 16px;
  }
  .page-img-frame {
    height: 135px;
  }
  .page-bullets {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .df-stage-nav {
    height: 42px;
    padding: 0 10px;
    font-size: 0.68rem;
  }
  .df-stage-prev { left: -10px; }
  .df-stage-next { right: -10px; }
}

@media (max-width: 767px) {
  .df-brochure-stage {
    padding: 14px 8px 16px 8px;
    border-radius: 12px;
  }
  .df-book-shell,
  .df-book-block,
  .df-spreads-container {
    min-height: auto;
  }
  .df-bundle-stack,
  .df-center-spine,
  .df-stage-nav,
  .df-turning-page {
    display: none !important;
  }
  .df-spread {
    position: relative;
    flex-direction: column;
    gap: 16px;
    height: auto;
    min-height: auto;
  }
  .df-spread:not(.active) {
    display: none !important;
  }
  .df-spread-page {
    width: 100%;
    min-height: auto;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  }
  .df-page-inner {
    padding: 16px 14px;
  }
  .spread-page-header {
    padding-bottom: 4px;
    margin-bottom: 6px;
  }
  .spread-page-folio {
    font-size: 0.64rem;
  }
  .df-page-num-pill {
    font-size: 0.64rem;
    padding: 1px 6px;
  }
  .page-img-frame {
    height: 140px;
  }
  .page-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
  .page-title {
    font-size: 1.15rem;
    margin-bottom: 4px;
  }
  .page-summary {
    font-size: 0.82rem;
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .page-bullets {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 8px;
  }
  .page-bullets li {
    font-size: 0.76rem;
  }
  .page-chamfer-btn {
    padding: 6px 14px;
    font-size: 0.78rem;
  }
  .df-reader-toolbar {
    padding: 6px 10px;
    gap: 6px;
    border-radius: 20px;
    width: 100%;
    justify-content: space-around;
  }
  .df-toolbar-cta span {
    display: none;
  }
  .df-toolbar-cta {
    padding: 6px 10px;
  }
}

/* ==========================================================================
   SECTION 3 — CORE CAPABILITIES (Unified with Demolition Services Architecture)
   - Tight Compact Spacing: 80% Gap Reduction between Tag, Heading & Paragraphs
   ========================================================================== */

.capabilities-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
}

#capabilities.capabilities-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* =============================================================================
   CORE CAPABILITIES: CUSTOMIZABLE GAP CONTROLS (EDIT PIXEL VALUES DIRECTLY HERE)
   ============================================================================= */

/* [GAP 1] Distance Above Heading (Between Tag Badge & "One Structural Partner.") */
#capabilities .ds-tag-wrap {
  margin-bottom: 2px !important; /* Edit this value to adjust gap above heading */
}

#capabilities .ds-tag {
  margin-bottom: 0 !important;
  padding: 4px 12px !important;
}

/* [GAP 2] Distance Between Line 1 ("One Structural Partner.") and Line 2 ("Multiple Specialized Capabilities.") */
#capabilities .ds-heading {
  line-height: 0.88 !important;  /* Tight line-height for 0 vertical gap */
  margin: 0 0 2px 0 !important;  /* Distance below the heading (above divider) */
}

#capabilities .ds-line-left {
  margin: 0 !important;          /* 0 gap below Line 1 */
  padding: 0 !important;
}

#capabilities .ds-line-right {
  margin-top: -6px !important;   /* Eliminates font metric leading for 0 gap between lines */
  padding: 0 !important;
}

/* [GAP 3] Distance Around Divider Line (Between Heading and Paragraphs) */
#capabilities .ds-divider {
  margin: 2px auto 4px auto !important; /* [2px above divider, 4px below divider] */
  height: 2px !important;              /* Thickness of divider bar */
  width: 40px !important;              /* Width of divider bar */
}

/* [GAP 4] Distance Between Paragraph 1 ("From complete...") and Paragraph 2 ("United Saw Services...") */
#capabilities .ds-paragraphs {
  gap: 2px !important; /* Distance between the two paragraph sentences */
}

#capabilities .ds-para {
  line-height: 1.35 !important; /* Line height of paragraph sentences */
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#capabilities .ds-para-left,
#capabilities .ds-para-right {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* [GAP 5] Distance Below Paragraphs (To lower flipbook tabs) */
#capabilities .ds-section-header {
  max-width: 920px;
  margin: 0 auto 10px auto !important; /* Distance from paragraphs to brochure tabs */
}

/* ==========================================================================
   SECTION 4 — DEMOLITION SERVICES & 7 APPLICATION CARDS
   Heading Line 1 from LEFT, Line 2 from RIGHT
   Paragraph 1 from LEFT, Paragraph 2 from RIGHT
   3D Realistic Hoarding Standing Up Scene (Bi-Directional Scroll Physics)
   ========================================================================== */

.demolition-services-section {
  perspective: 1600px;
  position: relative;
  overflow: hidden !important;
}

.ds-section-header {
  max-width: 920px;
  margin: 0 auto 40px auto;
  position: relative;
  overflow: visible;
}

.ds-tag-wrap {
  margin-bottom: 12px;
}

.ds-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 6px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
}

.ds-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  overflow: visible;
}

.ds-line {
  display: block;
  will-change: transform, opacity;
}

.ds-line-left {
  color: #0f172a;
}

.ds-line-right {
  color: var(--color-orange-primary);
}

.ds-divider {
  margin: 0 auto 20px auto;
  width: 50px;
  height: 3px;
  background: var(--color-orange-primary);
  border-radius: 2px;
}

.ds-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
  overflow: visible;
}

.ds-para {
  font-size: 1.02rem;
  line-height: 1.72;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
}

.ds-para-left {
  padding-left: 14px;
  border-left: 3px solid rgba(255, 107, 0, 0.35);
  text-align: left;
}

.ds-para-right {
  padding-right: 14px;
  border-right: 3px solid rgba(15, 23, 42, 0.22);
  text-align: right;
}

/* 1. Default / Out-of-View / Reversed State */
.demolition-services-section .ds-tag,
.capabilities-section .ds-tag {
  opacity: 0;
  transform: translateY(-20px);
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.demolition-services-section .ds-line-left,
.capabilities-section .ds-line-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.demolition-services-section .ds-line-right,
.capabilities-section .ds-line-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.demolition-services-section .ds-divider,
.capabilities-section .ds-divider {
  width: 0 !important;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.4s ease;
}

.demolition-services-section .ds-para-left,
.capabilities-section .ds-para-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.demolition-services-section .ds-para-right,
.capabilities-section .ds-para-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

/* 2. Active In-View State (Forward Slow-Motion Entrance) */
.demolition-services-section.ds-in-view .ds-tag,
.capabilities-section.ds-in-view .ds-tag {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.9s ease 0.05s;
}

.demolition-services-section.ds-in-view .ds-line-left,
.capabilities-section.ds-in-view .ds-line-left {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 1.1s ease 0.15s;
}

.demolition-services-section.ds-in-view .ds-line-right,
.capabilities-section.ds-in-view .ds-line-right {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.28s, opacity 1.1s ease 0.28s;
}

.demolition-services-section.ds-in-view .ds-divider,
.capabilities-section.ds-divider {
  width: 50px !important;
  opacity: 1;
  transition: width 0.7s ease 0.4s, opacity 0.5s ease 0.4s;
}

.demolition-services-section.ds-in-view .ds-para-left,
.capabilities-section.ds-in-view .ds-para-left {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.48s, opacity 1.1s ease 0.48s;
}

.demolition-services-section.ds-in-view .ds-para-right,
.capabilities-section.ds-in-view .ds-para-right {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.64s, opacity 1.1s ease 0.64s;
}

/* 3. Backward Scroll: Reversed Retracted State */
.demolition-services-section.ds-reversed .ds-tag,
.capabilities-section.ds-reversed .ds-tag,
.demolition-services-section.ds-reversed .ds-line-left,
.capabilities-section.ds-reversed .ds-line-left,
.demolition-services-section.ds-reversed .ds-line-right,
.capabilities-section.ds-reversed .ds-line-right,
.demolition-services-section.ds-reversed .ds-para-left,
.capabilities-section.ds-reversed .ds-para-left,
.demolition-services-section.ds-reversed .ds-para-right,
.capabilities-section.ds-reversed .ds-para-right {
  transition-duration: 0.75s;
  transition-delay: 0s !important;
}

@media (max-width: 767px) {
  .ds-para-right {
    text-align: left;
    border-right: none;
    border-left: 3px solid rgba(15, 23, 42, 0.22);
    padding-right: 0;
    padding-left: 14px;
  }
}

.services-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-bottom: 50px;
  perspective: 1400px;
  perspective-origin: center bottom;
}

/* 
 * 3D Hoarding Physical Stance:
 * Initial / Fallen State: Heavy hoarding billboard fallen backward onto the ground.
 * Anchored at the base foundation (transform-origin: center bottom).
 * Tilted back in 3D perspective (rotateX: 48deg, translateY: 26px, scale: 0.94).
 * Opacity 0.48: Clearly visible as a grounded hoarding on the screen.
 */
.service-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transform-origin: center bottom;
  transform: perspective(1000px) rotateX(48deg) translateY(26px) scale(0.94);
  opacity: 0.48;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.55s ease,
              box-shadow 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.28s ease;
  will-change: transform, opacity, box-shadow;
  transition-delay: 0s;
}

/*
 * Standing Upright Stance:
 * The hoarding lifts up from the ground and locks vertically into place (rotateX: 0deg, translateY: 0).
 * 100% full opacity, rock-solid, and clearly on screen while user views it.
 */
.service-card.hoarding-standing {
  transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
  opacity: 1;
  filter: none;
  box-shadow: var(--shadow-sm);
  transition-delay: calc(var(--card-col, 0) * 0.08s);
}

/*
 * Hover Interaction:
 * Once stood up and locked, hovering gently lifts the card with an orange glow accent.
 */
.service-card.hoarding-standing:hover {
  border-color: var(--color-orange-primary);
  transform: perspective(1000px) rotateX(0deg) translateY(-8px) scale(1.02);
  box-shadow: 0 20px 38px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(251, 108, 3, 0.25);
  transition-delay: 0s !important;
}

/* Mobile & Tablet Stagger Normalization */
@media (max-width: 767px) {
  .service-card {
    transform: perspective(800px) rotateX(32deg) translateY(16px) scale(0.96);
    opacity: 0.60;
  }
  .service-card.hoarding-standing {
    transition-delay: 0s !important;
  }
}

/* Accessibility: User prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-card {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

.service-card-media {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--bg-slate);
}

.service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.service-card:hover .service-img {
  transform: scale(1.06);
}

.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  color: var(--color-orange-light);
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
}

.service-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 12px;
  line-height: 1.3;
}

.service-card-text {
  font-size: 0.94rem;
  color: var(--text-body);
  line-height: 1.6;
}

/* Conversion CTA Box */
.conversion-cta-box {
  background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-white) 100%);
  border: 2px dashed var(--color-orange-primary);
  border-radius: 16px;
  padding: 45px 30px;
  box-shadow: var(--shadow-md);
}

.cta-title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.cta-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ==========================================================================
   SECTION 6 — HEAVY HIGH-REACH FLEET: SPLIT-SCREEN & BI-DIRECTIONAL MOTION
   - Spacing: Positioned ~1 inch below Section 4
   - Layout: Side-by-Side Left (Text & CTAs) and Right (Clean Volvo EC-380 Image)
   - Animations:
     * Line 1 ("High-Reach Demolition for"): Enters from LEFT page margin point
     * Line 2 ("Complex Structures"): Enters from RIGHT page margin point
     * Paragraphs: Alternate Left -> Right -> Left one by one in slow motion
     * Buttons: Enter from BOTTOM into place
     * Image: Smooth slow-motion reveal without overlays
     * Backward Play: All effects reverse smoothly when scrolling away
   ========================================================================== */

/* Section Spacing: 1 inch gap between Hero, Section 3 (CORE CAPABILITIES), and Section 4 (DEMOLITION SERVICES) */
#capabilities.capabilities-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

#capabilities .df-brochure-stage {
  margin-bottom: 0 !important;
}

#demolition-services.demolition-services-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.high-reach-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.high-reach-split-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
}

/* --------------------------------------------------------------------------
   Left Column: Heading, Paragraphs & Action CTAs
   -------------------------------------------------------------------------- */
.high-reach-text-col {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.high-reach-text-col .hr-tag-wrap {
  margin-bottom: 12px;
}

.high-reach-text-col .section-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 6px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
}

.high-reach-text-col .hr-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0 0 16px 0;
  overflow: visible;
}

.hr-line {
  display: block;
  will-change: transform, opacity;
}

.hr-line-left {
  color: #0f172a;
}

.hr-line-right {
  color: var(--color-orange-primary);
}

.high-reach-text-col .hr-divider {
  margin: 0 0 20px 0;
  width: 50px;
  height: 3px;
  background: var(--color-orange-primary);
  border-radius: 2px;
}

/* Paragraphs Cascade (Alternating Left & Right) */
.hr-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
  overflow: visible;
}

.hr-para {
  font-size: 1.02rem;
  line-height: 1.72;
  color: #334155;
  margin: 0;
  will-change: transform, opacity;
}

.hr-para-left {
  padding-left: 14px;
  border-left: 3px solid rgba(255, 107, 0, 0.35);
}

.hr-para-right {
  padding-right: 14px;
  border-right: 3px solid rgba(15, 23, 42, 0.22);
}

/* Action CTAs (Entering from Bottom) */
.hr-cta-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  will-change: transform, opacity;
}

.hr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.hr-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hr-btn-outline:hover {
  border-color: var(--color-orange-primary);
  color: var(--color-orange-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.12);
}

/* --------------------------------------------------------------------------
   Right Column: Clean High-Resolution Machine Stage (No Image Overlays)
   -------------------------------------------------------------------------- */
.high-reach-media-col {
  position: relative;
  will-change: transform, opacity;
}

.high-reach-image-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 50px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(226, 232, 240, 0.85);
  background: #0f172a;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.high-reach-image-stage:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 30px 60px -15px rgba(255, 107, 0, 0.25), 0 0 0 1px rgba(255, 107, 0, 0.35);
}

.machine-full-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.high-reach-image-stage:hover .machine-full-img {
  transform: scale(1.03);
}

/* ==========================================================================
   BI-DIRECTIONAL SLOW-MOTION SCROLLING PHYSICS ENGINE
   - Forward Scroll (entering view):
     * Line 1 glides in slow motion from LEFT page margin
     * Line 2 glides in slow motion from RIGHT page margin
     * Paragraphs glide one by one (Left -> Right -> Left)
     * Buttons glide up from BOTTOM
     * Image glides in with smooth perspective scale
   - Backward Scroll (scrolling past/away):
     * All elements smoothly retract backward to their origin sides!
   ========================================================================== */

/* 1. Default / Out-of-View / Reversed State */
.high-reach-section .hr-tag {
  opacity: 0;
  transform: translateY(-20px);
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.high-reach-section .hr-line-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.high-reach-section .hr-line-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.high-reach-section .hr-divider {
  width: 0 !important;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.4s ease;
}

.high-reach-section .hr-para-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.high-reach-section .hr-para-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.high-reach-section .hr-from-bottom {
  opacity: 0;
  transform: translateY(75px);
  will-change: transform, opacity;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.high-reach-section .high-reach-media-col {
  opacity: 0;
  transform: scale(0.92) translateX(60px);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

/* 2. FORWARD SCROLL: ACTIVE IN-VIEW STATE (Slow-Motion Entrance) */
.high-reach-section.hr-in-view .hr-tag {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.9s ease 0.05s;
}

.high-reach-section.hr-in-view .hr-line-left {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 1.1s ease 0.12s;
}

.high-reach-section.hr-in-view .hr-line-right {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.28s, opacity 1.1s ease 0.28s;
}

.high-reach-section.hr-in-view .hr-divider {
  width: 50px !important;
  opacity: 1;
  transition: width 0.7s ease 0.4s, opacity 0.5s ease 0.4s;
}

.high-reach-section.hr-in-view .hr-para-left:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.45s, opacity 1.1s ease 0.45s;
}

.high-reach-section.hr-in-view .hr-para-right:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.62s, opacity 1.1s ease 0.62s;
}

.high-reach-section.hr-in-view .hr-para-left:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.78s, opacity 1.1s ease 0.78s;
}

.high-reach-section.hr-in-view .hr-from-bottom {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.95s, opacity 1.0s ease 0.95s;
}

.high-reach-section.hr-in-view .high-reach-media-col {
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.3s, opacity 1.1s ease 0.3s;
}

/* 3. BACKWARD SCROLL: REVERSED RETRACTED STATE (Leaving Viewport) */
.high-reach-section.hr-reversed .hr-tag,
.high-reach-section.hr-reversed .hr-line-left,
.high-reach-section.hr-reversed .hr-line-right,
.high-reach-section.hr-reversed .hr-para-left,
.high-reach-section.hr-reversed .hr-para-right,
.high-reach-section.hr-reversed .hr-from-bottom,
.high-reach-section.hr-reversed .high-reach-media-col {
  transition-duration: 0.75s;
  transition-delay: 0s !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .high-reach-split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .high-reach-text-col {
    order: 1;
  }
  .high-reach-media-col {
    order: 2;
  }
  .machine-full-img {
    aspect-ratio: 16 / 9;
  }
}

/* ==========================================================================
   SECTION 7 — ROBOTIC DEMOLITION (HUSQVARNA DXR-300)
   Inverted Split Grid: Left Image, Right Text & 2x2 Box Matrix
   Reversible Bi-Directional Slow-Motion Animations
   ========================================================================== */

.robotic-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.robotic-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.16fr;
  gap: 48px;
  align-items: start;
  position: relative;
  margin-bottom: 35px;
}

/* --------------------------------------------------------------------------
   Left Column: Clean High-Resolution Machine Stage (No Image Overlays)
   -------------------------------------------------------------------------- */
.robotic-media-col {
  position: relative;
  will-change: transform, opacity;
}

.robotic-image-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 50px -12px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(226, 232, 240, 0.85);
  background: #0f172a;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.robotic-image-stage:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 30px 60px -15px rgba(255, 107, 0, 0.25), 0 0 0 1px rgba(255, 107, 0, 0.35);
}

.robot-full-img {
  width: 100%;
  aspect-ratio: 982 / 1228;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.robotic-image-stage:hover .robot-full-img {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   Right Column: Standard Section Typography, Heading, Paragraphs, Matrix & CTAs
   -------------------------------------------------------------------------- */
.robotic-text-col {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.robotic-text-col .robot-tag-wrap {
  margin-bottom: 12px;
}

.robotic-text-col .section-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 6px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
}

.robotic-text-col .robot-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  overflow: visible;
}

.robot-heading .robot-line {
  display: block;
  will-change: transform, opacity;
}

.robot-line-left {
  color: #0f172a;
}

.robot-line-right {
  color: var(--color-orange-primary);
}

.robotic-text-col .robot-divider {
  margin: 0 0 20px 0;
  width: 50px;
  height: 3px;
  background: var(--color-orange-primary);
  border-radius: 2px;
}

/* Paragraphs Cascade (Alternating Left & Right) */
.robot-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  overflow: visible;
}

.robot-para {
  font-size: 1.02rem;
  line-height: 1.72;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
}

.robot-para-left {
  padding-left: 14px;
  border-left: 3px solid rgba(255, 107, 0, 0.35);
}

.robot-para-right {
  padding-right: 14px;
  border-right: 3px solid rgba(15, 23, 42, 0.22);
}

/* 2x2 Capability Matrix */
.robot-boxes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.robot-box-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.robot-box-card:hover {
  border-color: var(--color-orange-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.1);
}

.robot-box-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 107, 0, 0.1);
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.robot-box-title {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 3px 0;
}

.robot-box-text {
  font-size: 0.88rem;
  line-height: 1.48;
  color: #64748b;
  margin: 0;
}

/* Action CTAs */
.robot-cta-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.robot-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

.robot-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   BI-DIRECTIONAL SLOW-MOTION ANIMATION ENGINE RULES
   -------------------------------------------------------------------------- */

/* 1. Default / Out-of-View / Reversed State */
.robotic-section .robotic-media-col {
  opacity: 0;
  transform: scale(0.92) translateX(-60px);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.robotic-section .robot-tag {
  opacity: 0;
  transform: translateY(-20px);
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.robotic-section .robot-line-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.robotic-section .robot-line-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.robotic-section .robot-divider {
  width: 0 !important;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.4s ease;
}

.robotic-section .robot-para-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.robotic-section .robot-para-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.robotic-section .robot-box-card-1,
.robotic-section .robot-box-card-3 {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.robotic-section .robot-box-card-2,
.robotic-section .robot-box-card-4 {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.robotic-section .robot-from-bottom {
  opacity: 0;
  transform: translateY(75px);
  will-change: transform, opacity;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

/* 2. FORWARD SCROLL: ACTIVE IN-VIEW STATE (Slow-Motion Entrance) */
.robotic-section.robot-in-view .robotic-media-col {
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 1.1s ease 0.15s;
}

.robotic-section.robot-in-view .robot-tag {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.9s ease 0.05s;
}

.robotic-section.robot-in-view .robot-line-left {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 1.1s ease 0.18s;
}

.robotic-section.robot-in-view .robot-line-right {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.32s, opacity 1.1s ease 0.32s;
}

.robotic-section.robot-in-view .robot-divider {
  width: 50px !important;
  opacity: 1;
  transition: width 0.7s ease 0.42s, opacity 0.5s ease 0.42s;
}

.robotic-section.robot-in-view .robot-para-left:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.48s, opacity 1.1s ease 0.48s;
}

.robotic-section.robot-in-view .robot-para-right:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.62s, opacity 1.1s ease 0.62s;
}

.robotic-section.robot-in-view .robot-para-left:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.75s, opacity 1.1s ease 0.75s;
}

.robotic-section.robot-in-view .robot-box-card-1 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.85s, opacity 1.0s ease 0.85s;
}

.robotic-section.robot-in-view .robot-box-card-2 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.95s, opacity 1.0s ease 0.95s;
}

.robotic-section.robot-in-view .robot-box-card-3 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 1.05s, opacity 1.0s ease 1.05s;
}

.robotic-section.robot-in-view .robot-box-card-4 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 1.15s, opacity 1.0s ease 1.15s;
}

.robotic-section.robot-in-view .robot-from-bottom {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 1.25s, opacity 1.0s ease 1.25s;
}

/* 3. BACKWARD SCROLL: REVERSED RETRACTED STATE (Leaving Viewport) */
.robotic-section.robot-reversed .robotic-media-col,
.robotic-section.robot-reversed .robot-tag,
.robotic-section.robot-reversed .robot-line-left,
.robotic-section.robot-reversed .robot-line-right,
.robotic-section.robot-reversed .robot-para-left,
.robotic-section.robot-reversed .robot-para-right,
.robotic-section.robot-reversed .robot-box-card-1,
.robotic-section.robot-reversed .robot-box-card-2,
.robotic-section.robot-reversed .robot-box-card-3,
.robotic-section.robot-reversed .robot-box-card-4,
.robotic-section.robot-reversed .robot-from-bottom {
  transition-duration: 0.75s;
  transition-delay: 0s !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .robotic-split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
  }
  .robotic-media-col {
    order: 1;
    height: auto;
  }
  .robotic-image-stage {
    height: auto;
  }
  .robot-full-img {
    aspect-ratio: 16 / 10;
  }
  .robotic-text-col {
    order: 2;
  }
  .robot-boxes-grid {
    grid-template-columns: 1fr;
  }
}

.large-quote-banner {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 30px;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

.large-quote-banner.robot-quote-banner {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 24px 30px !important;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

.large-quote-banner.robot-quote-banner .quote-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-orange-primary);
  font-style: italic;
  margin: 0;
  line-height: 1.5;
}

.quote-text {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-orange-primary);
  font-style: italic;
}

/* ==========================================================================
   SECTION 8 — CONCRETE CUTTING & SURGICAL PRECISION
   Split Grid: Left Text Column, Right Extreme Diamond Saw Stage & Capability Boxes Below
   Below: Compact High-Impact Conversion Statement Panel
   Reversible Bi-Directional Slow-Motion Animations
   ========================================================================== */

.concrete-cutting-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: #ffffff;
}

.concrete-cutting-split-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 42px;
  align-items: start;
  position: relative;
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Left Column: Tag, Heading & Cascading Paragraphs
   -------------------------------------------------------------------------- */
.cc-text-col {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.cc-text-col .cc-tag-wrap {
  margin-bottom: 12px;
}

.cc-text-col .cc-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 6px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
}

.cc-text-col .cc-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 16px 0;
  text-transform: uppercase;
  overflow: visible;
}

.cc-heading .cc-line {
  display: block;
  will-change: transform, opacity;
}

.cc-line-left {
  color: #0f172a;
}

.cc-line-right {
  color: var(--color-orange-primary);
}

.cc-text-col .cc-divider {
  margin: 0 0 18px 0;
  width: 50px;
  height: 3px;
  background: var(--color-orange-primary);
  border-radius: 2px;
}

/* Paragraphs Cascade (Alternating Left & Right) */
.cc-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 0;
  overflow: visible;
}

.cc-para {
  font-size: 0.98rem;
  line-height: 1.68;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
}

.cc-para-left {
  padding-left: 14px;
  border-left: 3px solid rgba(255, 107, 0, 0.35);
}

.cc-para-right {
  padding-right: 14px;
  border-right: 3px solid rgba(15, 23, 42, 0.22);
}

/* --------------------------------------------------------------------------
   Right Column: Extreme Diamond Saw Image Stage & Capability Boxes Below Image
   -------------------------------------------------------------------------- */
.cc-media-col {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 2;
  overflow: visible;
}

.cc-image-stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(226, 232, 240, 0.85);
  background: #0f172a;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  will-change: transform, opacity;
}

.cc-image-stage:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 24px 48px -12px rgba(255, 107, 0, 0.22), 0 0 0 1px rgba(255, 107, 0, 0.35);
}

.extreme-saw-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.cc-image-stage:hover .extreme-saw-img {
  transform: scale(1.03);
}

/* 2x2 Capability Matrix Set Directly Below the Image (Compact Reduced Size) */
.cc-boxes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.cc-box-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.cc-box-card:hover {
  border-color: var(--color-orange-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.12);
}

.cc-box-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 107, 0, 0.1);
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.cc-box-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  line-height: 1.25;
}

.cc-box-text {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #64748b;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Below Content: Reduced Compact High-Impact Conversion Statement Panel
   -------------------------------------------------------------------------- */
.cc-conversion-panel {
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 1px solid rgba(255, 107, 0, 0.3);
  border-radius: 10px;
  padding: 16px 24px;
  max-width: 620px;
  margin: 22px auto 0 auto;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  will-change: transform, opacity;
}

.cc-conversion-panel .conv-heading {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}

.cc-conversion-panel .conv-sub {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #475569;
  margin: 0 auto 12px auto;
  max-width: 520px;
}

.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

/* --------------------------------------------------------------------------
   BI-DIRECTIONAL SLOW-MOTION ANIMATION ENGINE RULES (SECTION 8)
   -------------------------------------------------------------------------- */

/* 1. Default / Out-of-View / Reversed State */
.concrete-cutting-section .cc-tag {
  opacity: 0;
  transform: translateY(-20px);
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.concrete-cutting-section .cc-line-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.concrete-cutting-section .cc-line-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.concrete-cutting-section .cc-divider {
  width: 0 !important;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.4s ease;
}

.concrete-cutting-section .cc-para-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.concrete-cutting-section .cc-para-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.concrete-cutting-section .cc-image-stage {
  opacity: 0;
  transform: scale(0.94) translateX(50px);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.concrete-cutting-section .cc-box-card-1,
.concrete-cutting-section .cc-box-card-3 {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.concrete-cutting-section .cc-box-card-2,
.concrete-cutting-section .cc-box-card-4 {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.concrete-cutting-section .cc-from-bottom {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

/* 2. FORWARD SCROLL: ACTIVE IN-VIEW STATE (Slow-Motion Entrance) */
.concrete-cutting-section.cc-in-view .cc-tag {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.9s ease 0.05s;
}

.concrete-cutting-section.cc-in-view .cc-line-left {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 1.1s ease 0.18s;
}

.concrete-cutting-section.cc-in-view .cc-line-right {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.32s, opacity 1.1s ease 0.32s;
}

.concrete-cutting-section.cc-in-view .cc-divider {
  width: 50px !important;
  opacity: 1;
  transition: width 0.7s ease 0.42s, opacity 0.5s ease 0.42s;
}

.concrete-cutting-section.cc-in-view .cc-para-left:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.48s, opacity 1.1s ease 0.48s;
}

.concrete-cutting-section.cc-in-view .cc-para-right:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.60s, opacity 1.1s ease 0.60s;
}

.concrete-cutting-section.cc-in-view .cc-para-left:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.72s, opacity 1.1s ease 0.72s;
}

.concrete-cutting-section.cc-in-view .cc-image-stage {
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.20s, opacity 1.1s ease 0.20s;
}

.concrete-cutting-section.cc-in-view .cc-box-card-1 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.78s, opacity 1.0s ease 0.78s;
}

.concrete-cutting-section.cc-in-view .cc-box-card-2 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.88s, opacity 1.0s ease 0.88s;
}

.concrete-cutting-section.cc-in-view .cc-box-card-3 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.98s, opacity 1.0s ease 0.98s;
}

.concrete-cutting-section.cc-in-view .cc-box-card-4 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 1.08s, opacity 1.0s ease 1.08s;
}

.concrete-cutting-section.cc-in-view .cc-from-bottom {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 1.18s, opacity 1.0s ease 1.18s;
}

/* 3. BACKWARD SCROLL: REVERSED RETRACTED STATE (Leaving Viewport) */
.concrete-cutting-section.cc-reversed .cc-tag,
.concrete-cutting-section.cc-reversed .cc-line-left,
.concrete-cutting-section.cc-reversed .cc-line-right,
.concrete-cutting-section.cc-reversed .cc-para-left,
.concrete-cutting-section.cc-reversed .cc-para-right,
.concrete-cutting-section.cc-reversed .cc-image-stage,
.concrete-cutting-section.cc-reversed .cc-box-card-1,
.concrete-cutting-section.cc-reversed .cc-box-card-2,
.concrete-cutting-section.cc-reversed .cc-box-card-3,
.concrete-cutting-section.cc-reversed .cc-box-card-4,
.concrete-cutting-section.cc-reversed .cc-from-bottom {
  transition-duration: 0.75s;
  transition-delay: 0s !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .concrete-cutting-split-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .cc-media-col {
    order: 2;
  }
  .cc-boxes-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SECTION 9 — CORE CUTTING & DIAMOND DRILLING
   Inverted Split Grid: Left Core Drill Image Stage & Capability Boxes, Right Text Column
   Below: Expanded High-Visibility Professional Conversion Statement Panel
   Reversible Bi-Directional Slow-Motion Animations
   ========================================================================== */

.core-cutting-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.core-cutting-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 42px;
  align-items: start;
  position: relative;
  margin-bottom: 26px;
}

/* --------------------------------------------------------------------------
   Left Column: Core Drill Image Stage & Capability Boxes Below Image
   -------------------------------------------------------------------------- */
.core-media-col {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 2;
  overflow: visible;
}

.core-image-stage {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(226, 232, 240, 0.85);
  background: #0f172a;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  will-change: transform, opacity;
}

.core-image-stage:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 24px 48px -12px rgba(255, 107, 0, 0.22), 0 0 0 1px rgba(255, 107, 0, 0.35);
}

.core-drill-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

.core-image-stage:hover .core-drill-img {
  transform: scale(1.03);
}

/* 2x2 Capability Matrix Set Directly Below the Image (Compact Reduced Size) */
.core-boxes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.core-box-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.core-box-card:hover {
  border-color: var(--color-orange-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 0, 0.12);
}

.core-box-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(255, 107, 0, 0.1);
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.core-box-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  line-height: 1.25;
}

.core-box-text {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #64748b;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Right Column: Tag, Heading & Cascading Paragraphs
   -------------------------------------------------------------------------- */
.core-text-col {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  overflow: visible;
}

.core-text-col .core-tag-wrap {
  margin-bottom: 10px;
}

.core-text-col .core-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 5px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
}

.core-text-col .core-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  overflow: visible;
}

.core-heading .core-line {
  display: block;
  will-change: transform, opacity;
}

.core-line-left {
  color: #0f172a;
}

.core-line-right {
  color: var(--color-orange-primary);
}

.core-text-col .core-divider {
  margin: 0 0 16px 0;
  width: 50px;
  height: 3px;
  background: var(--color-orange-primary);
  border-radius: 2px;
}

/* Paragraphs Cascade (Alternating Left & Right - Reduced Gap) */
.core-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0;
  overflow: visible;
}

.core-para {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
}

.core-para-left {
  padding-left: 14px;
  border-left: 3px solid rgba(255, 107, 0, 0.35);
}

.core-para-right {
  padding-right: 14px;
  border-right: 3px solid rgba(15, 23, 42, 0.22);
}

/* --------------------------------------------------------------------------
   Below Content: Compact High-Impact Conversion Statement Panel (Same Size as Section Above)
   -------------------------------------------------------------------------- */
.core-conversion-panel {
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 1px solid rgba(255, 107, 0, 0.3);
  border-radius: 10px;
  padding: 16px 24px;
  max-width: 620px;
  margin: 22px auto 0 auto;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  will-change: transform, opacity;
}

.core-conversion-panel .conv-heading {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.3px;
}

.core-conversion-panel .conv-sub {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #475569;
  margin: 0 auto 12px auto;
  max-width: 520px;
}

.core-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
}

/* --------------------------------------------------------------------------
   BI-DIRECTIONAL SLOW-MOTION ANIMATION ENGINE RULES (SECTION 9)
   -------------------------------------------------------------------------- */

/* 1. Default / Out-of-View / Reversed State */
.core-cutting-section .core-image-stage {
  opacity: 0;
  transform: scale(0.94) translateX(-50px);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.core-cutting-section .core-box-card-1,
.core-cutting-section .core-box-card-3 {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.core-cutting-section .core-box-card-2,
.core-cutting-section .core-box-card-4 {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.core-cutting-section .core-tag {
  opacity: 0;
  transform: translateY(-20px);
  will-change: transform, opacity;
  transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

.core-cutting-section .core-line-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.core-cutting-section .core-line-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.core-cutting-section .core-divider {
  width: 0 !important;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.4s ease;
}

.core-cutting-section .core-para-left {
  opacity: 0;
  transform: translateX(-100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.core-cutting-section .core-para-right {
  opacity: 0;
  transform: translateX(100vw);
  will-change: transform, opacity;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
}

.core-cutting-section .core-from-bottom {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
}

/* 2. FORWARD SCROLL: ACTIVE IN-VIEW STATE (Slow-Motion Entrance) */
.core-cutting-section.core-in-view .core-image-stage {
  opacity: 1;
  transform: scale(1) translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 1.1s ease 0.18s;
}

.core-cutting-section.core-in-view .core-box-card-1 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.72s, opacity 1.0s ease 0.72s;
}

.core-cutting-section.core-in-view .core-box-card-2 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.82s, opacity 1.0s ease 0.82s;
}

.core-cutting-section.core-in-view .core-box-card-3 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 0.92s, opacity 1.0s ease 0.92s;
}

.core-cutting-section.core-in-view .core-box-card-4 {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 1.02s, opacity 1.0s ease 1.02s;
}

.core-cutting-section.core-in-view .core-tag {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.9s ease 0.05s;
}

.core-cutting-section.core-in-view .core-line-left {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 1.1s ease 0.18s;
}

.core-cutting-section.core-in-view .core-line-right {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.32s, opacity 1.1s ease 0.32s;
}

.core-cutting-section.core-in-view .core-divider {
  width: 50px !important;
  opacity: 1;
  transition: width 0.7s ease 0.42s, opacity 0.5s ease 0.42s;
}

.core-cutting-section.core-in-view .core-para-left:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.48s, opacity 1.1s ease 0.48s;
}

.core-cutting-section.core-in-view .core-para-right:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.60s, opacity 1.1s ease 0.60s;
}

.core-cutting-section.core-in-view .core-para-left:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.72s, opacity 1.1s ease 0.72s;
}

.core-cutting-section.core-in-view .core-from-bottom {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 1.15s, opacity 1.0s ease 1.15s;
}

/* 3. BACKWARD SCROLL: REVERSED RETRACTED STATE (Leaving Viewport) */
.core-cutting-section.core-reversed .core-tag,
.core-cutting-section.core-reversed .core-line-left,
.core-cutting-section.core-reversed .core-line-right,
.core-cutting-section.core-reversed .core-para-left,
.core-cutting-section.core-reversed .core-para-right,
.core-cutting-section.core-reversed .core-image-stage,
.core-cutting-section.core-reversed .core-box-card-1,
.core-cutting-section.core-reversed .core-box-card-2,
.core-cutting-section.core-reversed .core-box-card-3,
.core-cutting-section.core-reversed .core-box-card-4,
.core-cutting-section.core-reversed .core-from-bottom {
  transition-duration: 0.75s;
  transition-delay: 0s !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .core-cutting-split-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }
  .core-media-col {
    order: 1;
  }
  .core-text-col {
    order: 2;
  }
  .core-boxes-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SECTION 10 — CONCRETE BREAKING & CHIPPING (2-COLUMN SPLIT SHOWCASE)
   Centered Top Header: Dual-Line Heading & Dual-Paragraph Left & Right Sliding Motion
   Split Box: Left Checklist & Philosophy Banner | Right Action Photograph Showcase
   Exact 1-Inch (~48px total) Spacing with Bi-Directional Reversible Scroll Physics
   ========================================================================== */

.breaking-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Section Header: Tag, 2-Line Heading & Dual Paragraphs
   -------------------------------------------------------------------------- */
.cb-header {
  max-width: 960px;
  margin: 0 auto 28px auto;
  position: relative;
  z-index: 2;
  overflow: visible;
  text-align: center;
}

.cb-header .cb-tag-wrap {
  margin-bottom: 10px;
}

.cb-header .cb-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 5px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.06);
}

.cb-header .cb-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  overflow: visible;
  text-align: center;
}

.cb-heading .cb-line {
  display: block;
  will-change: transform, opacity;
}

.cb-line-left {
  color: #0f172a;
}

.cb-line-right {
  color: var(--color-orange-primary);
}

.cb-divider {
  width: 60px;
  height: 3px;
  background: var(--color-orange-primary);
  margin: 0 auto 16px auto;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
}

.cb-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  align-items: center;
  overflow: visible;
}

.cb-para {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
  text-align: center;
}

.cb-para-left {
  text-align: center;
}

.cb-para-right {
  text-align: center;
}

/* --------------------------------------------------------------------------
   2-Column Split Showcase
   Left: 8 Checklist Pills & Philosophy Banner | Right: Action Image Frame
   -------------------------------------------------------------------------- */
.cb-split-showcase {
  display: grid;
  grid-template-columns: 1.14fr 0.86fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
}

/* Left Content Column */
.cb-content-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  will-change: transform, opacity;
}

/* Breaking Checklist Grid (8 Pills in 2-Column Grid) */
.cb-checklist-wrap {
  margin-bottom: 16px;
}

.cb-checklist-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--color-orange-primary);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.breaking-items-grid.cb-pills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0;
  max-width: 100%;
}

.breaking-items-grid .break-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.86rem;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.breaking-items-grid .break-pill i {
  color: var(--color-orange-primary);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.breaking-items-grid .break-pill:hover {
  border-color: var(--color-orange-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 107, 0, 0.12);
}

/* Philosophy Statement Banner */
.cb-statement-banner {
  background: linear-gradient(135deg, rgba(255, 247, 237, 0.96) 0%, rgba(255, 255, 255, 0.98) 100%);
  border: 1px solid rgba(255, 107, 0, 0.3);
  border-left: 4px solid var(--color-orange-primary);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: auto;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  will-change: transform, opacity;
}

.cb-statement-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  margin-bottom: 4px;
}

.cb-statement-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: -0.2px;
  line-height: 1.3;
}

.cb-statement-sub {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #475569;
  margin: 0;
}

/* Right Media Column */
.cb-media-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  will-change: transform, opacity;
}

.cb-image-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden !important;
  height: 100%;
  min-height: 420px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.9);
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.cb-media-badge i {
  color: var(--color-orange-primary);
}

.cb-action-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1 !important;
  filter: none !important;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.cb-image-stage:hover .cb-action-img {
  transform: scale(1.055);
  filter: contrast(1.03) brightness(1.02);
}

.cb-image-footer {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
}

.cb-tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.cb-tech-tag i {
  color: var(--color-orange-primary);
  font-size: 0.76rem;
}

.cb-media-caption {
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 10px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.cb-media-caption i {
  color: var(--color-orange-primary);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   BI-DIRECTIONAL REVERSIBLE SCROLL PHYSICS (SECTION 10)
   Forward Scroll -> Glide in from Left & Right
   Reverse Scroll -> Smooth retraction back to offsets
   -------------------------------------------------------------------------- */

/* Pre-trigger Offsets */
.breaking-section .cb-line-left {
  transform: translateX(-120px);
  opacity: 0;
  will-change: transform, opacity;
}

.breaking-section .cb-line-right {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

.breaking-section .cb-divider {
  transform: scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}

.breaking-section .cb-para-left {
  transform: translateX(-90px);
  opacity: 0;
  will-change: transform, opacity;
}

.breaking-section .cb-para-right {
  transform: translateX(90px);
  opacity: 0;
  will-change: transform, opacity;
}

.breaking-section .cb-content-col {
  transform: translateX(-120px);
  opacity: 0;
  will-change: transform, opacity;
}

.breaking-section .cb-media-col {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

/* Forward Scroll: In-View Entrance */
.breaking-section.cb-in-view .cb-line-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.95s ease 0.05s;
}

.breaking-section.cb-in-view .cb-line-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.95s ease 0.12s;
}

.breaking-section.cb-in-view .cb-divider {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 0.85s ease 0.18s;
}

.breaking-section.cb-in-view .cb-para-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.24s, opacity 0.95s ease 0.24s;
}

.breaking-section.cb-in-view .cb-para-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.30s, opacity 0.95s ease 0.30s;
}

.breaking-section.cb-in-view .cb-content-col {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, opacity 1.1s ease 0.25s;
}

.breaking-section.cb-in-view .cb-media-col {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, opacity 1.1s ease 0.35s;
}

/* Backward Scroll: Reversed Retraction State */
.breaking-section.cb-reversed .cb-line-left {
  transform: translateX(-120px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.breaking-section.cb-reversed .cb-line-right {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.breaking-section.cb-reversed .cb-divider {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transition-delay: 0s !important;
}

.breaking-section.cb-reversed .cb-para-left {
  transform: translateX(-90px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.breaking-section.cb-reversed .cb-para-right {
  transform: translateX(90px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.breaking-section.cb-reversed .cb-content-col {
  transform: translateX(-120px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s ease;
  transition-delay: 0s !important;
}

.breaking-section.cb-reversed .cb-media-col {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s ease;
  transition-delay: 0s !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .cb-split-showcase {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cb-image-stage {
    min-height: 320px;
    max-height: 420px;
  }
}

@media (max-width: 576px) {
  .breaking-items-grid.cb-pills-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .cb-split-showcase {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cb-image-stage {
    min-height: 320px;
    max-height: 420px;
  }
}

@media (max-width: 576px) {
  .breaking-items-grid.cb-pills-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SECTION 11 — CONCRETE DRILLING & ANCHORING
   Preserved Structure with Reversible Bi-Directional Physics
   Split Technical Box (Left: Diagram Image, Right: 4 Process Flow Step Boxes)
   1-Inch Gap Spacing (~48px)
   ========================================================================== */

.drilling-anchoring-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: #f8fafc;
}

/* --------------------------------------------------------------------------
   Section Header: Tag, 2-Line Heading & Alternating Paragraphs
   -------------------------------------------------------------------------- */
.cd-header {
  max-width: 960px;
  margin: 0 auto 26px auto;
  position: relative;
  z-index: 2;
  overflow: visible;
  text-align: center;
}

.cd-header .cd-tag-wrap {
  margin-bottom: 10px;
}

.cd-header .cd-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 5px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.06);
}

.cd-header .cd-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  overflow: visible;
}

.cd-heading .cd-line {
  display: block;
  will-change: transform, opacity;
}

.cd-line-left {
  color: #0f172a;
}

.cd-line-right {
  color: var(--color-orange-primary);
}

.cd-divider {
  width: 60px;
  height: 3px;
  background: var(--color-orange-primary);
  margin: 0 auto 16px auto;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
}

.cd-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto;
  align-items: center;
  overflow: visible;
}

.cd-para {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
}

.cd-para-left {
  text-align: center;
}

.cd-spec-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 107, 0, 0.08);
  color: var(--color-orange-primary);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 7px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255, 107, 0, 0.22);
  box-shadow: 0 2px 8px rgba(255, 107, 0, 0.06);
}

.cd-spec-badge i {
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   4 Anchoring Categories (Alternating from Left & Right)
   -------------------------------------------------------------------------- */
.anchoring-categories-grid.cd-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 0 auto 30px auto;
  max-width: 1140px;
}

.anchor-card.cd-cat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 22px 18px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.anchor-card.cd-cat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  transition: background 0.3s ease;
}

.anchor-card.cd-cat-card:hover {
  border-color: var(--color-orange-primary);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(255, 107, 0, 0.12);
}

.anchor-card.cd-cat-card:hover::before {
  background: var(--color-orange-primary);
}

.cd-cat-card .anchor-num {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-orange-primary);
  margin-bottom: 8px;
  line-height: 1;
}

.cd-cat-card .anchor-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  line-height: 1.3;
}

.cd-cat-card .anchor-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Technical Exploded View Split Box (2 Columns)
   Left: Diagram Image Stage | Right: Header & 4 Process Flow Steps
   -------------------------------------------------------------------------- */
.technical-exploded-view.cd-split-box {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 32px;
  align-items: stretch;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08);
  margin: 0 auto;
  max-width: 1140px;
}

/* Left Media Column */
.cd-box-media-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  will-change: transform, opacity;
}

.cd-diagram-stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  min-height: 320px;
  background: #0f172a;
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(226, 232, 240, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cd-diagram-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
}

.cd-diagram-stage:hover .cd-diagram-img {
  transform: scale(1.04);
  filter: contrast(1.03) brightness(1.02);
}

.cd-diagram-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.cd-diagram-badge i {
  color: var(--color-orange-primary);
  font-size: 0.82rem;
}

/* Right Content Column */
.cd-box-content-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  will-change: transform, opacity;
}

.cd-diagram-header {
  margin-bottom: 18px;
}

.cd-box-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-orange-primary);
  margin-bottom: 6px;
}

.cd-box-tag i {
  margin-right: 4px;
}

.cd-box-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
}

/* 4 Step Cards (2x2 Grid) */
.cd-steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.cd-step-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 14px 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  will-change: transform, opacity;
}

.cd-step-card:hover {
  background: #ffffff;
  border-color: var(--color-orange-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.cd-step-card.highlight-step {
  background: rgba(255, 107, 0, 0.04);
  border-color: rgba(255, 107, 0, 0.35);
}

.cd-step-card.highlight-step:hover {
  border-color: var(--color-orange-primary);
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(255, 107, 0, 0.12);
}

.cd-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cd-step-badge {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #64748b;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 2px 7px;
  border-radius: 4px;
}

.cd-step-badge.highlight-badge {
  color: var(--color-orange-primary);
  border-color: rgba(255, 107, 0, 0.3);
  background: #fff5eb;
}

.cd-step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cd-step-icon.highlight-icon {
  background: var(--color-orange-primary);
  color: #ffffff;
  border-color: var(--color-orange-primary);
}

.cd-step-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
  letter-spacing: 0.3px;
  line-height: 1.25;
}

.cd-step-detail {
  font-size: 0.78rem;
  line-height: 1.45;
  color: #64748b;
  margin: 0;
}

/* --------------------------------------------------------------------------
   BI-DIRECTIONAL REVERSIBLE SCROLL PHYSICS
   Forward Scroll -> Glide in from Left & Right
   Reverse Scroll -> Smooth retraction back to offsets
   -------------------------------------------------------------------------- */

/* Initial Resting / Pre-trigger Offsets */
.drilling-anchoring-section .cd-line-left {
  transform: translateX(-90px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-line-right {
  transform: translateX(90px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-divider {
  transform: scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-para-left {
  transform: translateX(-70px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-para-right {
  transform: translateX(70px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-card-1 {
  transform: translateX(-80px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-card-2 {
  transform: translateX(80px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-card-3 {
  transform: translateX(-80px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-card-4 {
  transform: translateX(80px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-box-media-col {
  transform: translateX(-80px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-box-content-col {
  transform: translateX(80px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-step-1 {
  transform: translateX(-40px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-step-2 {
  transform: translateX(40px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-step-3 {
  transform: translateX(-40px);
  opacity: 0;
  will-change: transform, opacity;
}

.drilling-anchoring-section .cd-step-4 {
  transform: translateX(40px);
  opacity: 0;
  will-change: transform, opacity;
}

/* 1. FORWARD SCROLL: In-View Entrance Physics */
.drilling-anchoring-section.cd-in-view .cd-line-left,
.drilling-anchoring-section.cd-in-view .cd-line-right,
.drilling-anchoring-section.cd-in-view .cd-para-left,
.drilling-anchoring-section.cd-in-view .cd-para-right,
.drilling-anchoring-section.cd-in-view .cd-card-1,
.drilling-anchoring-section.cd-in-view .cd-card-2,
.drilling-anchoring-section.cd-in-view .cd-card-3,
.drilling-anchoring-section.cd-in-view .cd-card-4,
.drilling-anchoring-section.cd-in-view .cd-box-media-col,
.drilling-anchoring-section.cd-in-view .cd-box-content-col,
.drilling-anchoring-section.cd-in-view .cd-step-1,
.drilling-anchoring-section.cd-in-view .cd-step-2,
.drilling-anchoring-section.cd-in-view .cd-step-3,
.drilling-anchoring-section.cd-in-view .cd-step-4 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.drilling-anchoring-section.cd-in-view .cd-divider {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.16s, opacity 0.9s ease 0.16s;
}

/* Staggered Entrance Timings */
.drilling-anchoring-section.cd-in-view .cd-line-left {
  transition-delay: 0.05s;
}

.drilling-anchoring-section.cd-in-view .cd-line-right {
  transition-delay: 0.12s;
}

.drilling-anchoring-section.cd-in-view .cd-para-left {
  transition-delay: 0.20s;
}

.drilling-anchoring-section.cd-in-view .cd-para-right {
  transition-delay: 0.26s;
}

.drilling-anchoring-section.cd-in-view .cd-card-1 {
  transition-delay: 0.30s;
}

.drilling-anchoring-section.cd-in-view .cd-card-2 {
  transition-delay: 0.36s;
}

.drilling-anchoring-section.cd-in-view .cd-card-3 {
  transition-delay: 0.42s;
}

.drilling-anchoring-section.cd-in-view .cd-card-4 {
  transition-delay: 0.48s;
}

.drilling-anchoring-section.cd-in-view .cd-box-media-col {
  transition-delay: 0.52s;
}

.drilling-anchoring-section.cd-in-view .cd-box-content-col {
  transition-delay: 0.56s;
}

.drilling-anchoring-section.cd-in-view .cd-step-1 {
  transition-delay: 0.62s;
}

.drilling-anchoring-section.cd-in-view .cd-step-2 {
  transition-delay: 0.68s;
}

.drilling-anchoring-section.cd-in-view .cd-step-3 {
  transition-delay: 0.74s;
}

.drilling-anchoring-section.cd-in-view .cd-step-4 {
  transition-delay: 0.80s;
}

/* 2. REVERSE SCROLL: Retraction Physics */
.drilling-anchoring-section.cd-reversed .cd-line-left {
  transform: translateX(-90px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-line-right {
  transform: translateX(90px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-divider {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-para-left {
  transform: translateX(-70px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-para-right {
  transform: translateX(70px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-card-1 {
  transform: translateX(-80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-card-2 {
  transform: translateX(80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-card-3 {
  transform: translateX(-80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-card-4 {
  transform: translateX(80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-box-media-col {
  transform: translateX(-80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-box-content-col {
  transform: translateX(80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-step-1 {
  transform: translateX(-40px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-step-2 {
  transform: translateX(40px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-step-3 {
  transform: translateX(-40px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.drilling-anchoring-section.cd-reversed .cd-step-4 {
  transform: translateX(40px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .anchoring-categories-grid.cd-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .technical-exploded-view.cd-split-box {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 22px;
  }

  .cd-diagram-stage {
    min-height: 260px;
    max-height: 380px;
  }
}

@media (max-width: 576px) {
  .anchoring-categories-grid.cd-categories-grid {
    grid-template-columns: 1fr;
  }

  .cd-steps-grid {
    grid-template-columns: 1fr;
  }

  .technical-exploded-view.cd-split-box {
    padding: 18px 14px;
  }
}

/* ==========================================================================
   SECTION 12 — PT SLAB MODIFICATION & 3D SECTION
   Preserved Structure with Reversible Bi-Directional Physics
   Professional 2-Column Split Layout (Left: Content Boxes | Right: Image)
   1-Inch Gap Spacing (~48px)
   ========================================================================== */

.pt-slab-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   Section Header: Tag, 2-Line Heading & Intro
   -------------------------------------------------------------------------- */
.pt-header {
  max-width: 960px;
  margin: 0 auto 26px auto;
  position: relative;
  z-index: 2;
  overflow: visible;
  text-align: center;
}

.pt-header .pt-tag-wrap {
  margin-bottom: 10px;
}

.pt-header .pt-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 5px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.06);
}

.pt-header .pt-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  overflow: visible;
}

.pt-heading .pt-line {
  display: block;
  will-change: transform, opacity;
}

.pt-line-left {
  color: #0f172a;
}

.pt-line-right {
  color: var(--color-orange-primary);
}

.pt-divider {
  width: 60px;
  height: 3px;
  background: var(--color-orange-primary);
  margin: 0 auto 16px auto;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
}

.pt-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 840px;
  margin: 0 auto;
  align-items: center;
  overflow: visible;
}

.pt-para {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
}

.pt-para-intro {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Professional 2-Column Split Showcase
   Left: Content Boxes & Scope | Right: 3D Technical Image Frame
   -------------------------------------------------------------------------- */
.pt-split-showcase {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

/* Left Column: Content Boxes & Scope */
.pt-split-content-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  will-change: transform, opacity;
}

.pt-lead-box {
  margin-bottom: 16px;
}

.pt-lead-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-orange-primary);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.pt-lead-badge i {
  margin-right: 4px;
}

.pt-lead-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pt-lead-title i {
  color: var(--color-orange-primary);
  font-size: 1.1rem;
}

/* 4 Content Boxes in 2x2 Grid */
.pt-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.pt-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  will-change: transform, opacity;
}

.pt-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  transition: background 0.3s ease;
}

.pt-card:hover {
  background: #ffffff;
  border-color: var(--color-orange-primary);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(255, 107, 0, 0.12);
}

.pt-card:hover::before {
  background: var(--color-orange-primary);
}

.pt-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.pt-card-num {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-orange-primary);
  line-height: 1;
}

.pt-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 107, 0, 0.1);
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.pt-card:hover .pt-icon {
  background: var(--color-orange-primary);
  color: #ffffff;
  transform: scale(1.08);
}

.pt-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.pt-text {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #64748b;
  margin: 0;
}

/* Scope Evaluation Advisory Note */
.pt-scope-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.05) 0%, rgba(248, 250, 252, 0.95) 100%);
  border: 1px solid rgba(255, 107, 0, 0.22);
  border-left: 4px solid var(--color-orange-primary);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  will-change: transform, opacity;
}

.pt-scope-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  border: 1px solid rgba(255, 107, 0, 0.2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.pt-scope-content {
  flex: 1;
}

.pt-scope-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--color-orange-primary);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pt-scope-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #1e293b;
  font-weight: 500;
  margin: 0;
}

/* Right Column: 3D Technical Section Visual */
.pt-split-media-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  will-change: transform, opacity;
}

.pt-technical-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  min-height: 360px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(226, 232, 240, 0.9);
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pt-frame-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.pt-frame-badge i {
  color: var(--color-orange-primary);
}

.pt-diagram-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
}

.pt-technical-frame:hover .pt-diagram-img {
  transform: scale(1.035);
  filter: contrast(1.03) brightness(1.02);
}

.pt-overlay-annotations {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.anno-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.4px;
}

.anno-item i {
  color: var(--color-orange-primary);
  font-size: 0.55rem;
}

.design-note {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 10px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.design-note i {
  color: var(--color-orange-primary);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   BI-DIRECTIONAL REVERSIBLE SCROLL PHYSICS
   Forward Scroll -> Glide in from Left & Right
   Reverse Scroll -> Smooth retraction back to offsets
   -------------------------------------------------------------------------- */

/* Initial Resting / Pre-trigger Offsets */
.pt-slab-section .pt-line-left {
  transform: translateX(-100px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-line-right {
  transform: translateX(100px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-divider {
  transform: scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-para-intro {
  transform: translateY(25px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-lead-box {
  transform: translateX(-100px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-card-1 {
  transform: translateX(-120px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-card-2 {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-card-3 {
  transform: translateX(-120px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-card-4 {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-scope-note {
  transform: translateX(-100px);
  opacity: 0;
  will-change: transform, opacity;
}

.pt-slab-section .pt-split-media-col {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

/* 1. FORWARD SCROLL: In-View Entrance Physics */
.pt-slab-section.pt-in-view .pt-line-left,
.pt-slab-section.pt-in-view .pt-line-right,
.pt-slab-section.pt-in-view .pt-para-intro,
.pt-slab-section.pt-in-view .pt-lead-box,
.pt-slab-section.pt-in-view .pt-card-1,
.pt-slab-section.pt-in-view .pt-card-2,
.pt-slab-section.pt-in-view .pt-card-3,
.pt-slab-section.pt-in-view .pt-card-4,
.pt-slab-section.pt-in-view .pt-scope-note,
.pt-slab-section.pt-in-view .pt-split-media-col {
  transform: translateX(0) translateY(0);
  opacity: 1;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.pt-slab-section.pt-in-view .pt-divider {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.16s, opacity 0.9s ease 0.16s;
}

/* Staggered Entrance Timings */
.pt-slab-section.pt-in-view .pt-line-left {
  transition-delay: 0.05s;
}

.pt-slab-section.pt-in-view .pt-line-right {
  transition-delay: 0.12s;
}

.pt-slab-section.pt-in-view .pt-para-intro {
  transition-delay: 0.20s;
}

.pt-slab-section.pt-in-view .pt-lead-box {
  transition-delay: 0.12s;
}

.pt-slab-section.pt-in-view .pt-card-1 {
  transition-delay: 0.18s;
}

.pt-slab-section.pt-in-view .pt-card-2 {
  transition-delay: 0.26s;
}

.pt-slab-section.pt-in-view .pt-card-3 {
  transition-delay: 0.34s;
}

.pt-slab-section.pt-in-view .pt-card-4 {
  transition-delay: 0.42s;
}

.pt-slab-section.pt-in-view .pt-scope-note {
  transition-delay: 0.50s;
}

.pt-slab-section.pt-in-view .pt-split-media-col {
  transition-delay: 0.22s;
}

/* 2. REVERSE SCROLL: Retraction Physics (Plays in Backward Direction) */
.pt-slab-section.pt-reversed .pt-line-left {
  transform: translateX(-100px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-line-right {
  transform: translateX(100px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-divider {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-para-intro {
  transform: translateY(25px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-lead-box {
  transform: translateX(-100px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-card-1 {
  transform: translateX(-120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-card-2 {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-card-3 {
  transform: translateX(-120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-card-4 {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-scope-note {
  transform: translateX(-100px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.pt-slab-section.pt-reversed .pt-split-media-col {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .pt-split-showcase {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pt-technical-frame {
    min-height: 320px;
    max-height: 420px;
  }
}

@media (max-width: 576px) {
  .pt-services-grid {
    grid-template-columns: 1fr;
  }

  .pt-scope-note {
    flex-direction: column;
    padding: 14px;
  }

  .pt-overlay-annotations {
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
  }
}

/* ==========================================================================
   SECTION 13 — STRUCTURAL REPAIR & RETROFIT
   Preserved Structure with Reversible Bi-Directional Physics
   Professional 2-Column Split Layout (Left: Image Frame | Right: Content & Solutions)
   1-Inch Gap Spacing (~48px)
   ========================================================================== */

.structural-repair-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: #f8fafc;
}

/* --------------------------------------------------------------------------
   Section Header: Tag, 2-Line Heading & Alternating Paragraphs
   -------------------------------------------------------------------------- */
.sr-header {
  max-width: 960px;
  margin: 0 auto 26px auto;
  position: relative;
  z-index: 2;
  overflow: visible;
  text-align: center;
}

.sr-header .sr-tag-wrap {
  margin-bottom: 10px;
}

.sr-header .sr-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 5px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.06);
}

.sr-header .sr-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  overflow: visible;
}

.sr-heading .sr-line {
  display: block;
  will-change: transform, opacity;
}

.sr-line-left {
  color: #0f172a;
}

.sr-line-right {
  color: var(--color-orange-primary);
}

.sr-divider {
  width: 60px;
  height: 3px;
  background: var(--color-orange-primary);
  margin: 0 auto 16px auto;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
}

.sr-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 840px;
  margin: 0 auto;
  align-items: center;
  overflow: visible;
}

.sr-para {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
}

.sr-para-left {
  text-align: center;
}

.sr-para-right {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Professional 2-Column Split Box
   Left: Image Frame | Right: Strategic Statement & 7 Solutions
   -------------------------------------------------------------------------- */
.sr-split-box {
  display: grid;
  grid-template-columns: 1fr 1.14fr;
  gap: 32px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

/* Left Media Column */
.sr-media-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  will-change: transform, opacity;
}

.sr-image-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  min-height: 400px;
  box-shadow: 0 16px 36px -8px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(226, 232, 240, 0.9);
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sr-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sr-media-badge i {
  color: var(--color-orange-primary);
}

.sr-diagram-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
}

.sr-image-stage:hover .sr-diagram-img {
  transform: scale(1.035);
  filter: contrast(1.03) brightness(1.02);
}

.sr-image-footer {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
}

.sr-tech-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.sr-tech-tag i {
  color: var(--color-orange-primary);
  font-size: 0.76rem;
}

.sr-media-caption {
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 10px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.sr-media-caption i {
  color: var(--color-orange-primary);
  flex-shrink: 0;
}

/* Right Content Column */
.sr-content-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  will-change: transform, opacity;
}

/* Strategic Statement Card */
.sr-statement-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--color-orange-primary);
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.sr-statement-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--color-orange-primary);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sr-statement-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
}

.sr-statement-heading .sr-heading-accent {
  color: var(--color-orange-primary);
}

.sr-statement-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: #475569;
  margin: 0;
}

/* Solutions Subheading */
.sr-solutions-lead {
  margin-bottom: 12px;
}

.sr-lead-badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--color-orange-primary);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.sr-lead-badge i {
  margin-right: 4px;
}

.sr-solutions-title {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

/* 7 Repair Solutions Grid */
.sr-solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.sr-solution-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.86rem;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  will-change: transform, opacity;
}

.sr-solution-card:hover {
  border-color: var(--color-orange-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 107, 0, 0.12);
}

.sr-solution-card.highlight-card {
  grid-column: span 2;
  background: rgba(255, 107, 0, 0.03);
  border-color: rgba(255, 107, 0, 0.28);
}

.sr-card-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 107, 0, 0.1);
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.sr-solution-card:hover .sr-card-icon {
  background: var(--color-orange-primary);
  color: #ffffff;
}

.sr-card-icon.highlight-icon {
  background: var(--color-orange-primary);
  color: #ffffff;
}

.sr-card-text {
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   BI-DIRECTIONAL REVERSIBLE SCROLL PHYSICS
   Forward Scroll -> Glide in from Left & Right
   Reverse Scroll -> Smooth retraction back to offsets
   -------------------------------------------------------------------------- */

/* Initial Resting / Pre-trigger Offsets */
.structural-repair-section .sr-line-left {
  transform: translateX(-100px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-line-right {
  transform: translateX(100px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-divider {
  transform: scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-para-left {
  transform: translateX(-80px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-para-right {
  transform: translateX(80px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-media-col {
  transform: translateX(-120px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-content-col {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-card-1 {
  transform: translateX(-35px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-card-2 {
  transform: translateX(35px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-card-3 {
  transform: translateX(-35px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-card-4 {
  transform: translateX(35px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-card-5 {
  transform: translateX(-35px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-card-6 {
  transform: translateX(35px);
  opacity: 0;
  will-change: transform, opacity;
}

.structural-repair-section .sr-card-7 {
  transform: translateY(25px);
  opacity: 0;
  will-change: transform, opacity;
}

/* 1. FORWARD SCROLL: In-View Entrance Physics */
.structural-repair-section.sr-in-view .sr-line-left,
.structural-repair-section.sr-in-view .sr-line-right,
.structural-repair-section.sr-in-view .sr-para-left,
.structural-repair-section.sr-in-view .sr-para-right,
.structural-repair-section.sr-in-view .sr-media-col,
.structural-repair-section.sr-in-view .sr-content-col,
.structural-repair-section.sr-in-view .sr-card-1,
.structural-repair-section.sr-in-view .sr-card-2,
.structural-repair-section.sr-in-view .sr-card-3,
.structural-repair-section.sr-in-view .sr-card-4,
.structural-repair-section.sr-in-view .sr-card-5,
.structural-repair-section.sr-in-view .sr-card-6,
.structural-repair-section.sr-in-view .sr-card-7 {
  transform: translateX(0) translateY(0);
  opacity: 1;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.structural-repair-section.sr-in-view .sr-divider {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.16s, opacity 0.9s ease 0.16s;
}

/* Staggered Entrance Timings */
.structural-repair-section.sr-in-view .sr-line-left {
  transition-delay: 0.05s;
}

.structural-repair-section.sr-in-view .sr-line-right {
  transition-delay: 0.12s;
}

.structural-repair-section.sr-in-view .sr-para-left {
  transition-delay: 0.20s;
}

.structural-repair-section.sr-in-view .sr-para-right {
  transition-delay: 0.26s;
}

.structural-repair-section.sr-in-view .sr-media-col {
  transition-delay: 0.24s;
}

.structural-repair-section.sr-in-view .sr-content-col {
  transition-delay: 0.28s;
}

.structural-repair-section.sr-in-view .sr-card-1 {
  transition-delay: 0.32s;
}

.structural-repair-section.sr-in-view .sr-card-2 {
  transition-delay: 0.38s;
}

.structural-repair-section.sr-in-view .sr-card-3 {
  transition-delay: 0.44s;
}

.structural-repair-section.sr-in-view .sr-card-4 {
  transition-delay: 0.50s;
}

.structural-repair-section.sr-in-view .sr-card-5 {
  transition-delay: 0.56s;
}

.structural-repair-section.sr-in-view .sr-card-6 {
  transition-delay: 0.62s;
}

.structural-repair-section.sr-in-view .sr-card-7 {
  transition-delay: 0.68s;
}

/* 2. REVERSE SCROLL: Retraction Physics */
.structural-repair-section.sr-reversed .sr-line-left {
  transform: translateX(-100px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-line-right {
  transform: translateX(100px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-divider {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-para-left {
  transform: translateX(-80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-para-right {
  transform: translateX(80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-media-col {
  transform: translateX(-120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-content-col {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-card-1 {
  transform: translateX(-35px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-card-2 {
  transform: translateX(35px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-card-3 {
  transform: translateX(-35px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-card-4 {
  transform: translateX(35px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-card-5 {
  transform: translateX(-35px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-card-6 {
  transform: translateX(35px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.structural-repair-section.sr-reversed .sr-card-7 {
  transform: translateY(25px);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .sr-split-box {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sr-image-stage {
    min-height: 320px;
    max-height: 420px;
  }
}

@media (max-width: 576px) {
  .sr-solutions-grid {
    grid-template-columns: 1fr;
  }

  .sr-solution-card.highlight-card {
    grid-column: span 1;
  }

  .sr-statement-card {
    padding: 16px;
  }
}

/* ==========================================================================
   SECTION 15 — EQUIPMENT & TECHNOLOGY (3-MACHINE FLEET SHOWCASE)
   Specialized Equipment for Specialized Demolition:
   - Volvo EC-380 (High-Reach Combi Cutter)
   - Tata Hitachi EX-210 (Heavy Hydraulic Crusher)
   - Husqvarna DXR-300 (Robotic Demolition System)
   Exact 1-inch gap (~48px total) spacing with bi-directional sliding scroll physics
   ========================================================================== */

.equipment-showroom-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: #ffffff;
}

/* Section Header */
.eq-header {
  max-width: 960px;
  margin: 0 auto 28px auto;
  position: relative;
  z-index: 2;
  overflow: visible;
  text-align: center;
}

.eq-header .eq-tag-wrap {
  margin-bottom: 10px;
}

.eq-header .eq-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 5px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.06);
}

.eq-header .eq-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  overflow: visible;
}

.eq-heading .eq-line {
  display: block;
  will-change: transform, opacity;
}

.eq-line-left {
  color: #0f172a;
}

.eq-line-right {
  color: var(--color-orange-primary);
}

.eq-divider {
  width: 60px;
  height: 3px;
  background: var(--color-orange-primary);
  margin: 0 auto 16px auto;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
}

.eq-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
  align-items: center;
  overflow: visible;
}

.eq-para {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #334155;
  margin: 0;
  position: relative;
  will-change: transform, opacity;
  text-align: center;
}

/* 3-Machine Fleet Showcase Grid */
.eq-machines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch;
}

/* Machine Card */
.eq-machine-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(226, 232, 240, 0.8);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  will-change: transform, opacity;
}

.eq-machine-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(255, 107, 0, 0.35);
  border-color: rgba(255, 107, 0, 0.4);
}

/* Photo Stage */
.eq-photo-stage {
  position: relative;
  overflow: hidden;
  height: 230px;
  background: #0f172a;
}

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

.eq-machine-card:hover .eq-machine-img {
  transform: scale(1.05);
}

.eq-machine-stamp {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-orange-light, #ffa466);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  z-index: 2;
}

.eq-photo-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.eq-photo-badge i {
  color: var(--color-orange-primary);
}

/* Card Body */
.eq-card-body {
  padding: 22px 22px 24px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.eq-category-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.eq-category-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--color-orange-primary);
  text-transform: uppercase;
}

.eq-model-id {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 900;
  color: #cbd5e1;
  line-height: 1;
}

.eq-machine-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.eq-machine-type {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 12px 0;
}

.eq-machine-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
  margin: 0 0 16px 0;
  min-height: 60px;
}

/* Specs Row */
.eq-specs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.eq-spec-box {
  background: #fff7ed;
  border: 1px solid rgba(255, 107, 0, 0.2);
  border-radius: 8px;
  padding: 10px 10px;
  text-align: center;
}

.eq-spec-val {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--color-orange-primary);
  line-height: 1.2;
}

.eq-spec-lbl {
  display: block;
  font-size: 0.69rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 3px;
}

/* Features List */
.eq-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: auto;
}

.eq-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.84rem;
  color: #334155;
  margin-bottom: 8px;
  font-weight: 500;
  line-height: 1.35;
}

.eq-features-list li:last-child {
  margin-bottom: 0;
}

.eq-features-list li i {
  color: var(--color-orange-primary);
  font-size: 0.84rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   BI-DIRECTIONAL REVERSIBLE SCROLL PHYSICS
   Forward Scroll -> Slide in from Left, Bottom & Right
   Reverse Scroll -> Smooth retraction back to offsets
   -------------------------------------------------------------------------- */

/* Initial Resting / Pre-trigger Offsets */
.equipment-showroom-section .eq-line-left {
  transform: translateX(-100px);
  opacity: 0;
  will-change: transform, opacity;
}

.equipment-showroom-section .eq-line-right {
  transform: translateX(100px);
  opacity: 0;
  will-change: transform, opacity;
}

.equipment-showroom-section .eq-divider {
  transform: scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}

.equipment-showroom-section .eq-para-left {
  transform: translateX(-80px);
  opacity: 0;
  will-change: transform, opacity;
}

.equipment-showroom-section .eq-para-right {
  transform: translateX(80px);
  opacity: 0;
  will-change: transform, opacity;
}

.equipment-showroom-section .eq-card-1 {
  transform: translateX(-120px);
  opacity: 0;
  will-change: transform, opacity;
}

.equipment-showroom-section .eq-card-2 {
  transform: translateY(80px) scale(0.96);
  opacity: 0;
  will-change: transform, opacity;
}

.equipment-showroom-section .eq-card-3 {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

/* Active In-View State */
.equipment-showroom-section.eq-in-view .eq-line-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
  transition-delay: 0.05s;
}

.equipment-showroom-section.eq-in-view .eq-line-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
  transition-delay: 0.12s;
}

.equipment-showroom-section.eq-in-view .eq-divider {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
  transition-delay: 0.18s;
}

.equipment-showroom-section.eq-in-view .eq-para-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.95s ease;
  transition-delay: 0.24s;
}

.equipment-showroom-section.eq-in-view .eq-para-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.95s ease;
  transition-delay: 0.30s;
}

.equipment-showroom-section.eq-in-view .eq-card-1 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  transition-delay: 0.15s;
}

.equipment-showroom-section.eq-in-view .eq-card-2 {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  transition-delay: 0.28s;
}

.equipment-showroom-section.eq-in-view .eq-card-3 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;
  transition-delay: 0.40s;
}

/* Backward / Reversed Retraction State */
.equipment-showroom-section.eq-reversed .eq-line-left {
  transform: translateX(-100px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.equipment-showroom-section.eq-reversed .eq-line-right {
  transform: translateX(100px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.equipment-showroom-section.eq-reversed .eq-divider {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transition-delay: 0s !important;
}

.equipment-showroom-section.eq-reversed .eq-para-left {
  transform: translateX(-80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.equipment-showroom-section.eq-reversed .eq-para-right {
  transform: translateX(80px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.equipment-showroom-section.eq-reversed .eq-card-1 {
  transform: translateX(-120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.equipment-showroom-section.eq-reversed .eq-card-2 {
  transform: translateY(80px) scale(0.96);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

.equipment-showroom-section.eq-reversed .eq-card-3 {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0s !important;
}

/* Responsive Layout */
@media (max-width: 991px) {
  .eq-machines-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .eq-machine-card.eq-card-3 {
    grid-column: span 2;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .eq-machines-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .eq-machine-card.eq-card-3 {
    grid-column: span 1;
    max-width: 100%;
  }

  .eq-photo-stage {
    height: 200px;
  }
}


/* ==========================================================================
   SECTION 16 — WHY UNITED SAW SERVICES
   6 Capability Boxes with Maelstrom Vortex Animation
   Exact 1-Inch (~48px total) Spacing with Bi-Directional Reversible Physics
   ========================================================================== */

.why-us-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: #f8fafc;
}

/* Section Header */
.why-header {
  max-width: 960px;
  margin: 0 auto 32px auto;
  position: relative;
  z-index: 2;
  overflow: visible;
  text-align: center;
}

.why-header .why-tag-wrap {
  margin-bottom: 10px;
}

.why-header .why-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-orange-primary);
  background: rgba(255, 107, 0, 0.08);
  padding: 5px 14px;
  border-radius: 4px;
  border-left: 3px solid var(--color-orange-primary);
  box-shadow: 0 2px 6px rgba(255, 107, 0, 0.06);
}

.why-header .why-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.05rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--text-dark, #0f172a);
  margin: 0 0 14px 0;
  text-transform: uppercase;
  overflow: visible;
  text-align: center;
}

.why-heading .why-line {
  display: block;
  will-change: transform, opacity;
}

.why-line-left {
  color: #0f172a;
}

.why-line-right {
  color: var(--color-orange-primary);
}

.why-divider {
  width: 60px;
  height: 3px;
  background: var(--color-orange-primary);
  margin: 0 auto;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
}

/* 6 Boxes Grid */
.why-us-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
  perspective: 1200px;
}

.why-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(226, 232, 240, 0.8);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
  will-change: transform, opacity, filter;
  transform-origin: center center;
}

.why-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(255, 107, 0, 0.45);
  box-shadow: 0 20px 40px -10px rgba(255, 107, 0, 0.2), 0 0 0 1px rgba(255, 107, 0, 0.35);
}

.why-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.why-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(255, 107, 0, 0.1);
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.why-card:hover .why-icon {
  background: var(--color-orange-primary);
  color: #ffffff;
  transform: scale(1.1) rotate(6deg);
}

.why-number {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 900;
  color: #cbd5e1;
  line-height: 1;
  transition: color 0.35s ease;
}

.why-card:hover .why-number {
  color: var(--color-orange-primary);
}

.why-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.25;
}

.why-desc {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

/* --------------------------------------------------------------------------
   MAELSTROM VORTEX ANIMATION & BI-DIRECTIONAL REVERSIBLE SCROLL PHYSICS
   The 6 boxes spiral/swirl inward in clockwise vortex trajectory into place
   Backward Scroll -> Spiral back outward into the vortex
   -------------------------------------------------------------------------- */

/* Pre-trigger Offsets (Header & Maelstrom Vortex Spiral Angles) */
.why-us-section .why-line-left {
  transform: translateX(-120px);
  opacity: 0;
  will-change: transform, opacity;
}

.why-us-section .why-line-right {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

.why-us-section .why-divider {
  transform: scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}

/* Maelstrom Outer Spiral Positions */
.why-us-section .why-card-1 {
  transform: translate(-140px, -90px) rotate(-28deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  will-change: transform, opacity, filter;
}

.why-us-section .why-card-2 {
  transform: translate(0px, -130px) rotate(18deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  will-change: transform, opacity, filter;
}

.why-us-section .why-card-3 {
  transform: translate(140px, -90px) rotate(28deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  will-change: transform, opacity, filter;
}

.why-us-section .why-card-6 {
  transform: translate(140px, 90px) rotate(32deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  will-change: transform, opacity, filter;
}

.why-us-section .why-card-5 {
  transform: translate(0px, 130px) rotate(-18deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  will-change: transform, opacity, filter;
}

.why-us-section .why-card-4 {
  transform: translate(-140px, 90px) rotate(-32deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  will-change: transform, opacity, filter;
}

/* Forward Scroll: In-View Swirling Entrance (Clockwise Vortex Sequence) */
.why-us-section.why-in-view .why-line-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.95s ease 0.05s;
}

.why-us-section.why-in-view .why-line-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.95s ease 0.12s;
}

.why-us-section.why-in-view .why-divider {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 0.85s ease 0.18s;
}

/* Clockwise Maelstrom Settle: 1 -> 2 -> 3 -> 6 -> 5 -> 4 */
.why-us-section.why-in-view .why-card-1 {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  filter: blur(0px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 1.0s ease 0.15s, filter 0.9s ease 0.15s;
}

.why-us-section.why-in-view .why-card-2 {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  filter: blur(0px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.24s, opacity 1.0s ease 0.24s, filter 0.9s ease 0.24s;
}

.why-us-section.why-in-view .why-card-3 {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  filter: blur(0px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.33s, opacity 1.0s ease 0.33s, filter 0.9s ease 0.33s;
}

.why-us-section.why-in-view .why-card-6 {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  filter: blur(0px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.42s, opacity 1.0s ease 0.42s, filter 0.9s ease 0.42s;
}

.why-us-section.why-in-view .why-card-5 {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  filter: blur(0px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.51s, opacity 1.0s ease 0.51s, filter 0.9s ease 0.51s;
}

.why-us-section.why-in-view .why-card-4 {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
  filter: blur(0px);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.60s, opacity 1.0s ease 0.60s, filter 0.9s ease 0.60s;
}

/* Backward Scroll: Reversed Retraction State (Spirals back into the vortex immediately) */
.why-us-section.why-reversed .why-line-left {
  transform: translateX(-120px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.why-us-section.why-reversed .why-line-right {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.why-us-section.why-reversed .why-divider {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transition-delay: 0s !important;
}

.why-us-section.why-reversed .why-card-1 {
  transform: translate(-140px, -90px) rotate(-28deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s ease, filter 0.6s ease;
  transition-delay: 0s !important;
}

.why-us-section.why-reversed .why-card-2 {
  transform: translate(0px, -130px) rotate(18deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s ease, filter 0.6s ease;
  transition-delay: 0s !important;
}

.why-us-section.why-reversed .why-card-3 {
  transform: translate(140px, -90px) rotate(28deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s ease, filter 0.6s ease;
  transition-delay: 0s !important;
}

.why-us-section.why-reversed .why-card-6 {
  transform: translate(140px, 90px) rotate(32deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s ease, filter 0.6s ease;
  transition-delay: 0s !important;
}

.why-us-section.why-reversed .why-card-5 {
  transform: translate(0px, 130px) rotate(-18deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s ease, filter 0.6s ease;
  transition-delay: 0s !important;
}

.why-us-section.why-reversed .why-card-4 {
  transform: translate(-140px, 90px) rotate(-32deg) scale(0.65);
  opacity: 0;
  filter: blur(5px);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.75s ease, filter 0.6s ease;
  transition-delay: 0s !important;
}

/* Responsive Layout */
@media (max-width: 991px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .why-us-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ==========================================================================
   SECTION 20 — FAQ ACCORDION (PROFESSIONAL ENGINEERING REDESIGN)
   Bi-Directional Robotic Demolition Sliding Motion Physics
   ========================================================================== */

.faq-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f8fafc 100%);
}

.faq-header-wrap {
  margin-bottom: 32px;
}

.faq-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249, 115, 22, 0.12);
  color: var(--color-orange-primary);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.faq-heading {
  margin-bottom: 14px;
}

.faq-line {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1.18;
}

.faq-line-left {
  color: #0f172a;
}

.faq-line-right {
  color: var(--color-orange-primary);
}

.faq-divider {
  width: 60px;
  height: 3px;
  background: var(--color-orange-primary);
  margin: 0 auto 16px auto;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
}

.faq-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
  align-items: center;
}

.faq-para {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  color: #475569;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

/* Accordion Container & Cards */
.faq-accordion-grid {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-accordion-item {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-left: 4px solid transparent;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: border-color 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-accordion-item:hover {
  border-color: rgba(203, 213, 225, 0.9);
  border-left-color: var(--color-orange-primary);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.faq-accordion-item.active {
  border-color: rgba(249, 115, 22, 0.35);
  border-left: 4px solid var(--color-orange-primary);
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.1);
}

.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.faq-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.faq-accordion-item:hover .faq-badge {
  background: #e2e8f0;
  color: #0f172a;
}

.faq-accordion-item.active .faq-badge {
  background: var(--color-orange-primary);
  color: #ffffff;
}

.faq-question {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.38;
  margin: 0;
  flex-grow: 1;
  transition: color 0.25s ease;
}

.faq-accordion-item.active .faq-question {
  color: var(--color-orange-deep);
}

.faq-chevron {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.faq-accordion-item.active .faq-chevron {
  transform: rotate(45deg);
  background: var(--color-orange-primary);
  color: #ffffff;
  border-color: var(--color-orange-primary);
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  background: #fafcff;
}

.faq-accordion-item.active .faq-content {
  border-top: 1px dashed rgba(226, 232, 240, 0.9);
}

.faq-content p {
  padding: 16px 22px 20px 22px;
  margin: 0;
  font-size: 0.96rem;
  color: #334155;
  line-height: 1.68;
}

/* --------------------------------------------------------------------------
   FAQ SECTION: ROBOTIC DEMOLITION SCROLL PHYSICS & MOTION STATES
   Every question coming from left page margin, alternate from right page margin (Slow Motion)
   -------------------------------------------------------------------------- */

.faq-section .faq-line-left {
  transform: translateX(-100vw);
  opacity: 0;
  will-change: transform, opacity;
}

.faq-section .faq-line-right {
  transform: translateX(100vw);
  opacity: 0;
  will-change: transform, opacity;
}

.faq-section .faq-divider {
  transform: scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}

.faq-section .faq-para-left {
  transform: translateX(-100vw);
  opacity: 0;
  will-change: transform, opacity;
}

.faq-section .faq-para-right {
  transform: translateX(100vw);
  opacity: 0;
  will-change: transform, opacity;
}

/* Initial States: Odd items from Left Page Margin, Even items from Right Page Margin */
.faq-section .faq-card-left {
  transform: translateX(-100vw);
  opacity: 0;
  will-change: transform, opacity;
}

.faq-section .faq-card-right {
  transform: translateX(100vw);
  opacity: 0;
  will-change: transform, opacity;
}

/* 1. Forward Entrance (.faq-in-view) — Majestic Slow-Motion Glide */
.faq-section.faq-in-view .faq-line-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 1.1s ease 0.05s;
}

.faq-section.faq-in-view .faq-line-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 1.1s ease 0.12s;
}

.faq-section.faq-in-view .faq-divider {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 1.0s ease 0.18s;
}

.faq-section.faq-in-view .faq-para-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.24s, opacity 1.1s ease 0.24s;
}

.faq-section.faq-in-view .faq-para-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.30s, opacity 1.1s ease 0.30s;
}

/* Staggered Slow-Motion Entrance for Alternate Questions from Left & Right Margins */
.faq-section.faq-in-view .faq-item-1 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 1.2s ease 0.15s;
}

.faq-section.faq-in-view .faq-item-2 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.28s, opacity 1.2s ease 0.28s;
}

.faq-section.faq-in-view .faq-item-3 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.41s, opacity 1.2s ease 0.41s;
}

.faq-section.faq-in-view .faq-item-4 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.54s, opacity 1.2s ease 0.54s;
}

.faq-section.faq-in-view .faq-item-5 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.67s, opacity 1.2s ease 0.67s;
}

.faq-section.faq-in-view .faq-item-6 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.80s, opacity 1.2s ease 0.80s;
}

.faq-section.faq-in-view .faq-item-7 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.93s, opacity 1.2s ease 0.93s;
}

.faq-section.faq-in-view .faq-item-8 {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.45s cubic-bezier(0.16, 1, 0.3, 1) 1.06s, opacity 1.2s ease 1.06s;
}

/* 2. Backward Retract (.faq-reversed) — Smooth Retraction Back to Page Margins */
.faq-section.faq-reversed .faq-line-left,
.faq-section.faq-reversed .faq-card-left {
  transform: translateX(-100vw);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
  transition-delay: 0s !important;
}

.faq-section.faq-reversed .faq-line-right,
.faq-section.faq-reversed .faq-card-right {
  transform: translateX(100vw);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
  transition-delay: 0s !important;
}

.faq-section.faq-reversed .faq-divider {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
  transition-delay: 0s !important;
}

.faq-section.faq-reversed .faq-para-left {
  transform: translateX(-100vw);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
  transition-delay: 0s !important;
}

.faq-section.faq-reversed .faq-para-right {
  transform: translateX(100vw);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease;
  transition-delay: 0s !important;
}


/* ==========================================================================
   SECTION 21 — FINAL CONVERSION SECTION (FLAGSHIP MASTERPIECE)
   Bi-Directional Robotic Demolition Sliding Motion Physics
   ========================================================================== */

.final-conversion-section {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  position: relative;
  overflow: hidden !important;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

.conversion-master-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  padding: 48px 42px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
  position: relative;
  overflow: hidden;
}

.conv-header-wrap {
  margin-bottom: 38px;
}

.conv-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249, 115, 22, 0.12);
  color: var(--color-orange-primary);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.conv-heading {
  margin-bottom: 14px;
}

.conv-line {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1.18;
}

.conv-line-left {
  color: #0f172a;
}

.conv-line-right {
  color: var(--color-orange-primary);
}

.conv-divider {
  width: 60px;
  height: 3px;
  background: var(--color-orange-primary);
  margin: 0 auto 16px auto;
  border-radius: 2px;
  transform-origin: center;
  will-change: transform, opacity;
}

.conv-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
  align-items: center;
}

.conversion-lead {
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  font-weight: 600;
  color: #1e293b;
  margin: 0 auto;
  line-height: 1.62;
  text-align: center;
}

.tell-us-box {
  background: rgba(249, 115, 22, 0.06);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 12px;
  padding: 14px 24px;
  text-align: center;
}

.tell-us-heading {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-orange-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tell-us-text {
  font-size: 0.94rem;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}

/* Master 2-Column Conversion Grid */
.conversion-body-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 36px;
  align-items: start;
}

/* Form Column */
.conversion-form-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 34px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.form-box-header {
  margin-bottom: 22px;
}

.form-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(249, 115, 22, 0.1);
  color: var(--color-orange-primary);
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 6px;
  margin-bottom: 8px;
}

.form-box-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.form-box-subtitle {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}

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

.form-group label {
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-group label i {
  color: var(--color-orange-primary);
  font-size: 0.8rem;
}

.form-control {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.95rem;
  color: #0f172a;
  transition: all 0.25s ease;
  width: 100%;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-orange-primary);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

.form-actions-split {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.submit-quote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--color-orange-primary);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 14px 26px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.28);
}

.submit-quote-btn:hover {
  background: var(--color-orange-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.38);
}

.talk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25d366;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 14px 24px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.28);
}

.talk-btn:hover {
  background: #1eb956;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.38);
}

/* Sidebar Contact Column */
.conversion-contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-contact-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 22px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.sidebar-contact-card:hover {
  border-color: var(--color-orange-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

.sidebar-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sidebar-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(249, 115, 22, 0.1);
  color: var(--color-orange-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

/* Live Standby Pulsing Indicator */
.hotline-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  color: #ffffff;
}

.hotline-card:hover {
  border-color: var(--color-orange-primary);
}

.hotline-card .sidebar-icon {
  background: rgba(249, 115, 22, 0.2);
  color: var(--color-orange-primary);
}

.hotline-card .sidebar-card-title {
  color: #ffffff;
}

.hotline-card .sidebar-card-text {
  color: #94a3b8;
}

.live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
}

.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  animation: livePulseAnim 1.8s infinite;
}

@keyframes livePulseAnim {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(37, 211, 102, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.live-text {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #25d366;
}

.card-mini-tag {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 4px;
}

.sidebar-card-title {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.sidebar-card-text {
  font-size: 0.86rem;
  color: #64748b;
  margin-bottom: 10px;
  line-height: 1.5;
}

.phone-links-wrap {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.direct-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-orange-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.direct-phone-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.direct-email-link, .web-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--color-orange-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.direct-email-link:hover, .web-link:hover {
  color: var(--color-orange-deep);
  text-decoration: underline;
}

/* Technical Trust Badges */
.trust-pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}

.trust-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.3;
}

.trust-pill i {
  color: var(--color-orange-primary);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FINAL CONVERSION SECTION: ROBOTIC DEMOLITION SCROLL PHYSICS & MOTION STATES
   -------------------------------------------------------------------------- */

.final-conversion-section .conv-line-left {
  transform: translateX(-120px);
  opacity: 0;
  will-change: transform, opacity;
}

.final-conversion-section .conv-line-right {
  transform: translateX(120px);
  opacity: 0;
  will-change: transform, opacity;
}

.final-conversion-section .conv-divider {
  transform: scaleX(0);
  opacity: 0;
  will-change: transform, opacity;
}

.final-conversion-section .conv-para-left {
  transform: translateX(-90px);
  opacity: 0;
  will-change: transform, opacity;
}

.final-conversion-section .conv-para-right {
  transform: translateX(90px);
  opacity: 0;
  will-change: transform, opacity;
}

.final-conversion-section .conv-col-left {
  transform: translateX(-100px);
  opacity: 0;
  will-change: transform, opacity;
}

.final-conversion-section .conv-col-right {
  transform: translateX(100px);
  opacity: 0;
  will-change: transform, opacity;
}

/* 1. Forward Entrance (.conv-in-view) */
.final-conversion-section.conv-in-view .conv-line-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.95s ease 0.05s;
}

.final-conversion-section.conv-in-view .conv-line-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, opacity 0.95s ease 0.12s;
}

.final-conversion-section.conv-in-view .conv-divider {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s, opacity 0.85s ease 0.18s;
}

.final-conversion-section.conv-in-view .conv-para-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.24s, opacity 0.95s ease 0.24s;
}

.final-conversion-section.conv-in-view .conv-para-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.30s, opacity 0.95s ease 0.30s;
}

.final-conversion-section.conv-in-view .conv-col-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.38s, opacity 1.0s ease 0.38s;
}

.final-conversion-section.conv-in-view .conv-col-right {
  transform: translateX(0);
  opacity: 1;
  transition: transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.46s, opacity 1.0s ease 0.46s;
}

/* 2. Backward Retract (.conv-reversed) */
.final-conversion-section.conv-reversed .conv-line-left,
.final-conversion-section.conv-reversed .conv-col-left {
  transform: translateX(-120px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.final-conversion-section.conv-reversed .conv-line-right,
.final-conversion-section.conv-reversed .conv-col-right {
  transform: translateX(120px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.final-conversion-section.conv-reversed .conv-divider {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease;
  transition-delay: 0s !important;
}

.final-conversion-section.conv-reversed .conv-para-left {
  transform: translateX(-90px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

.final-conversion-section.conv-reversed .conv-para-right {
  transform: translateX(90px);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease;
  transition-delay: 0s !important;
}

/* Responsive Adjustments for FAQ & Conversion */
@media (max-width: 991px) {
  .conversion-body-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .conversion-master-card {
    padding: 36px 24px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .trust-pill-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: #0f172a;
  color: #e2e8f0;
  padding-top: 80px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1fr;
  gap: 45px;
  padding-bottom: 60px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.footer-logo .brand-title {
  color: #ffffff;
}

.footer-brand-desc {
  font-size: 0.92rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
}

.footer-contact-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: #cbd5e1;
}

.footer-contact-pills i {
  color: var(--color-orange-primary);
  margin-right: 6px;
}

.footer-heading {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 8px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--color-orange-primary);
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #94a3b8;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-links a:hover {
  color: var(--color-orange-primary);
  transform: translateX(4px);
}

.brochure-blurb {
  font-size: 0.88rem;
  color: #94a3b8;
  margin-bottom: 18px;
  line-height: 1.5;
}

.office-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #cbd5e1;
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 14px;
  border-radius: 6px;
}

.office-badge i {
  color: var(--color-orange-primary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 22px 0;
  font-size: 0.84rem;
  color: #94a3b8;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-bottom-links a {
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-bottom-links a:hover {
  color: var(--color-orange-primary);
}

/* ==========================================================================
   MODAL & FLOATING DOCKS
   ========================================================================== */

.site-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.site-modal.active {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
}

.modal-dialog {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  max-width: 580px;
  width: 100%;
  padding: 35px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  z-index: 10;
  animation: zoomModal 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomModal {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title i {
  color: var(--color-orange-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
}

.modal-close:hover {
  color: var(--color-orange-primary);
}

.modal-lead {
  font-size: 0.95rem;
  color: var(--text-body);
  margin-bottom: 20px;
  line-height: 1.55;
}

.brochure-preview-card {
  display: flex;
  gap: 16px;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 24px;
}

.preview-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--color-orange-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.preview-text strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 4px;
}

.preview-text span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Floating WhatsApp & Scroll Top Dock */
.floating-quick-dock {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.float-whatsapp {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  transition: all var(--transition-normal);
}

.float-whatsapp:hover {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.6);
  color: #ffffff;
}

.float-scroll-top {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border-medium);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.float-scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

.float-scroll-top:hover {
  background: var(--color-orange-primary);
  border-color: var(--color-orange-primary);
  color: #ffffff;
  transform: translateY(-3px);
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

@media (max-width: 1024px) {
  .hero-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }


  .panel-grid, .slide-grid, .cutting-split-layout, .robot-feature-grid, .large-core-spec-banner, .differentiation-statement-banner, .conversion-body-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {

  .slide-overlay-sheen {
    background: linear-gradient(180deg, 
      rgba(255, 255, 255, 0.95) 0%, 
      rgba(255, 255, 255, 0.82) 65%, 
      rgba(255, 255, 255, 0.25) 100%);
  }

  .slider-arrow {
    width: 40px;
    height: 40px;
    font-size: 0.95rem;
  }

  .slider-arrow.arrow-prev {
    left: 12px;
  }

  .slider-arrow.arrow-next {
    right: 12px;
  }

  .top-bar-left, .top-bar-right {
    justify-content: center;
  }

  .top-bar {
    text-align: center;
  }

}

/* ==========================================================================
   MOBILE NAVBAR (<= 991px) (Moved to dedicated modular stylesheet: css/header.css)
   ========================================================================== */

@media (max-width: 768px) {

  .split-screen-wrapper {
    flex-direction: column;
  }

  .split-center-badge {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 15px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .exploded-steps-flow {
    flex-direction: column;
  }

  .flow-arrow {
    transform: rotate(90deg);
    margin: 5px 0;
  }
}

/* ==========================================================================
   STICKY SIDE BADGE — INDIAN DEMOLITION ASSOCIATION (IDA) MEMBER
   Anchored on the left side of the viewport while scrolling for high trust
   ========================================================================== */
.sticky-ida-badge {
  display: none !important;
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 998;
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-radius: 12px;
  border-left: 4px solid #fb6c03;
  border-top: 1px solid rgba(114, 118, 121, 0.2);
  border-right: 1px solid rgba(114, 118, 121, 0.2);
  border-bottom: 1px solid rgba(114, 118, 121, 0.2);
  box-shadow: 0 10px 30px rgba(37, 41, 44, 0.14), 0 2px 8px rgba(251, 108, 3, 0.12);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
  overflow: visible;
  max-width: 195px;
  user-select: none;
}

.sticky-ida-badge:hover {
  box-shadow: 0 14px 38px rgba(37, 41, 44, 0.20), 0 4px 14px rgba(251, 108, 3, 0.22);
}

.ida-badge-content {
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  width: 100%;
}

.ida-badge-crest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 108, 3, 0.08);
  border: 1px solid rgba(251, 108, 3, 0.25);
  border-radius: 20px;
  padding: 3px 10px;
}

.ida-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fb6c03;
  box-shadow: 0 0 6px rgba(251, 108, 3, 0.7);
  animation: pulseDot 2s infinite;
}

.ida-badge-tag {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fb6c03;
  text-transform: uppercase;
}

.ida-badge-logo-wrap {
  width: 100%;
  padding: 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 6px;
}

.ida-badge-img {
  width: 100%;
  max-width: 145px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

.ida-badge-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ida-org-name {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.78rem;
  font-weight: 800;
  color: #25292c;
  line-height: 1.25;
}

.ida-org-tagline {
  font-size: 0.68rem;
  font-weight: 600;
  color: #727679;
  line-height: 1.3;
}

/* Minimize / Toggle Button on Right Edge of Badge */
.ida-badge-toggle {
  position: absolute;
  top: 8px;
  right: -13px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #fb6c03;
  color: #fb6c03;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: 0.68rem;
  transition: transform 0.3s ease, background-color 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.ida-badge-toggle:hover {
  background: #fb6c03;
  color: #ffffff;
}

/* Collapsed Compact State */
.sticky-ida-badge.is-collapsed {
  transform: translateY(-50%) translateX(-155px);
}

.sticky-ida-badge.is-collapsed .ida-badge-toggle {
  transform: rotate(180deg);
}

/* Header Top Bar IDA Tag */
.ida-top-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #25292c;
  background: rgba(251, 108, 3, 0.08);
  border: 1px solid rgba(251, 108, 3, 0.25);
  padding: 2px 10px;
  border-radius: 12px;
}

.ida-top-icon {
  width: 18px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* Footer Brand Column IDA Badge */
.footer-ida-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(114, 118, 121, 0.18);
  border-left: 3.5px solid #fb6c03;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(37, 41, 44, 0.05);
}

.footer-ida-img {
  width: 70px;
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-ida-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-ida-text strong {
  font-size: 0.82rem;
  color: #25292c;
  line-height: 1.25;
}

.footer-ida-text span {
  font-size: 0.72rem;
  color: #727679;
  line-height: 1.3;
}

/* Responsive Handling */
@media (max-width: 991px) {
  .sticky-ida-badge {
    left: 10px;
    max-width: 175px;
  }
}

@media (max-width: 768px) {
  .sticky-ida-badge {
    top: auto;
    bottom: 80px;
    left: 10px;
    transform: none;
    max-width: 150px;
  }
  .sticky-ida-badge.is-collapsed {
    transform: translateX(-118px);
  }
  .ida-top-tag {
    display: none;
  }
}

/* ==========================================================================
   ENHANCED REALISTIC WEBP IMAGE TRANSITIONS & INTERACTIVE DEPTH
   ========================================================================== */
.split-side,
.panel-visual,
.service-card-media,
.robot-visual-card,
.cutting-visual-box,
.cc-image-stage,
.core-image-stage,
.cb-image-stage,
.core-spec-visual,
.pt-technical-frame,
.statement-media,
.triad-media,
.slide-media,
.machine-stage,
.action-photo-banner,
/* ==========================================================================
   GLOBAL PREMIUM IMAGE HOVER ZOOM ARCHITECTURE
   Smooth, cinematic zoom-in effect when cursor is placed on ANY image or frame
   ========================================================================== */

/* 1. Ensure all image container stages prevent overflow on zoom */
.cb-image-stage,
.cd-diagram-stage,
.cd-box-media-col,
.pt-technical-frame,
.pt-split-media-col,
.sr-image-stage,
.sr-media-col,
.cc-image-stage,
.core-image-stage,
.high-reach-image-stage,
.robotic-image-stage,
.eq-photo-stage,
.eq-machine-card,
.service-card,
.service-visual,
.page-img-frame,
.page-card,
.slide-media,
.panel-visual,
.cutting-visual-box,
.core-spec-visual,
.technical-exploded-view,
.machine-stage,
.action-photo-banner,
.diagram-media-footer,
.masonry-item,
.portfolio-card,
.split-side {
  overflow: hidden !important;
  position: relative;
}

/* 2. Base smooth transition for all images across the website */
img,
.split-img,
.panel-img,
.service-img,
.machine-full-img,
.robot-full-img,
.extreme-saw-img,
.core-drill-img,
.cb-action-img,
.action-bg-img,
.diagram-img,
.cd-diagram-img,
.pt-diagram-img,
.sr-diagram-img,
.repair-img,
.eq-machine-img,
.machine-photo,
.page-photo,
.masonry-img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease, opacity 0.4s ease !important;
  will-change: transform, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* 3. Universal Zoom-In on Cursor Hover (Container Hover or Direct Image Hover) */
.cb-image-stage:hover .cb-action-img,
.cb-action-img:hover,
.cd-diagram-stage:hover .cd-diagram-img,
.cd-diagram-img:hover,
.cd-box-media-col:hover .cd-diagram-img,
.pt-technical-frame:hover .pt-diagram-img,
.pt-diagram-img:hover,
.pt-split-media-col:hover .pt-diagram-img,
.sr-image-stage:hover .sr-diagram-img,
.sr-diagram-img:hover,
.sr-media-col:hover .sr-diagram-img,
.eq-photo-stage:hover .eq-machine-img,
.eq-machine-card:hover .eq-machine-img,
.eq-machine-img:hover,
.high-reach-image-stage:hover .machine-full-img,
.machine-stage:hover .machine-full-img,
.machine-full-img:hover,
.robotic-image-stage:hover .robot-full-img,
.robot-visual-card:hover .robot-img,
.robot-full-img:hover,
.cc-image-stage:hover .extreme-saw-img,
.cutting-visual-box:hover .extreme-saw-img,
.extreme-saw-img:hover,
.core-image-stage:hover .core-drill-img,
.core-spec-visual:hover .core-drill-img,
.core-drill-img:hover,
.service-card:hover .service-img,
.service-img:hover,
.page-img-frame:hover .page-photo,
.page-card:hover .page-photo,
.page-photo:hover,
.split-side:hover .split-img,
.panel-visual:hover .panel-img,
.technical-exploded-view:hover .diagram-img,
.slide-media:hover .machine-photo,
.slide-media:hover .slide-media-element,
.machine-photo:hover,
.action-photo-banner:hover .action-bg-img,
.action-bg-img:hover,
.masonry-item:hover .masonry-img,
.masonry-img:hover,
.portfolio-card:hover img {
  transform: scale(1.055) !important;
  filter: contrast(1.04) brightness(1.02);
}

/* ==========================================================================
   GLOBAL CHAMFER BUTTON ARCHITECTURE
   - Standard Button: Top-Right & Down-Left (Bottom-Left) Corner Chamfered
   - Side-by-Side Button: Opposite Chamfer (Top-Left & Down-Right Chamfered)
   ========================================================================== */

/* 1. Standard Button Chamfer (Top-Right & Bottom-Left Cut) */
.btn,
.city-btn,
.service-detail-btn,
.btn-quote-submit,
.btn-service-submit,
.triad-cta .btn,
.conversion-cta-box .btn,
.panel-info .btn,
.hero-cta-group .btn,
.header-quote-btn,
.brochure-nav-btn,
button.btn,
input[type="submit"].btn {
  --btn-chamfer: 12px;
  border-radius: 0 !important;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--btn-chamfer)) 0,
    100% var(--btn-chamfer),
    100% 100%,
    var(--btn-chamfer) 100%,
    0 calc(100% - var(--btn-chamfer))
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--btn-chamfer)) 0,
    100% var(--btn-chamfer),
    100% 100%,
    var(--btn-chamfer) 100%,
    0 calc(100% - var(--btn-chamfer))
  );
  position: relative;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.25s ease,
              color 0.25s ease,
              filter 0.3s ease,
              box-shadow 0.25s ease;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}

/* Sizing variations */
.btn-lg,
.city-btn {
  --btn-chamfer: 14px;
}

.btn-sm,
.btn-card-rotate-trigger,
.service-detail-btn,
.header-quote-btn,
.brochure-nav-btn {
  --btn-chamfer: 8px;
}

/* 2. Opposite Chamfer for Side-by-Side Buttons (Top-Left & Bottom-Right Cut) */
.city-hero-buttons .city-btn:nth-child(2),
.city-hero-buttons .city-btn + .city-btn,
.btn + .btn,
.btn + a.btn,
a.btn + a.btn,
.hero-cta-group > .btn:nth-child(2),
.hero-cta-group > .btn + .btn,
.btn-group > .btn:nth-child(even),
.sector-card-footer button:last-child,
.sector-card-footer a + button,
.sector-card-footer .btn-card-rotate-trigger,
.back-card-footer .btn-back-flip-return,
.back-card-footer a + button,
.btn-secondary,
.btn-opposite-chamfer {
  -webkit-clip-path: polygon(
    var(--btn-chamfer) 0,
    100% 0,
    100% calc(100% - var(--btn-chamfer)),
    calc(100% - var(--btn-chamfer)) 100%,
    0 100%,
    0 var(--btn-chamfer)
  ) !important;
  clip-path: polygon(
    var(--btn-chamfer) 0,
    100% 0,
    100% calc(100% - var(--btn-chamfer)),
    calc(100% - var(--btn-chamfer)) 100%,
    0 100%,
    0 var(--btn-chamfer)
  ) !important;
}

/* Button Hover Elevation */
.btn:hover,
.city-btn:hover,
.btn-quote-submit:hover,
.btn-service-submit:hover {
  filter: drop-shadow(0 6px 16px rgba(251, 108, 3, 0.42));
  transform: translateY(-2px);
}

.split-center-badge {
  display: none !important;
}

/* Service Detail Explore Button */
.service-detail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto !important;
  padding: 10px 20px;
  background: var(--color-orange-soft);
  color: var(--color-orange-primary);
  border: 1.5px solid var(--color-orange-primary);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  border-radius: 8px;
  transition: all var(--transition-normal);
  align-self: flex-start;
}

.service-detail-btn:hover {
  background: var(--color-orange-primary);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(251, 108, 3, 0.35);
}

.service-detail-btn i {
  transition: transform var(--transition-normal);
}

.service-detail-btn:hover i {
  transform: translateX(4px);
}

/* Section 4: Centering the last two cards in Row 3 on Desktop */
@media (min-width: 992px) {
  .services-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 28px !important;
  }

  .services-cards-grid .service-card {
    grid-column: span 2 !important;
  }

  /* Center the last two cards in Row 3 (Slots 2-3 and Slots 4-5) */
  .services-cards-grid .service-card:nth-child(7) {
    grid-column: 2 / span 2 !important;
  }

  .services-cards-grid .service-card:nth-child(8) {
    grid-column: 4 / span 2 !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .services-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .services-cards-grid .service-card {
    grid-column: span 1 !important;
  }
}

@media (max-width: 767px) {
  .services-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .services-cards-grid .service-card {
    grid-column: span 1 !important;
  }
}

/* ==========================================================================
   FORM SUBMISSION SUCCESS MESSAGE NOTIFICATION
   Universal Class & ID: form-submitted-successfully
   ========================================================================== */
.form-submitted-successfully {
  margin-bottom: 24px;
  animation: successFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes successFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.submission-success-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #22c55e;
  border-left: 5px solid #16a34a;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.14);
}

.success-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #16a34a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.2);
}

.success-body {
  flex: 1;
}

.success-heading {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: #14532d;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.success-message {
  font-size: 0.96rem;
  color: #166534;
  line-height: 1.6;
  margin: 0 0 10px 0;
  font-weight: 500;
}

.success-sla {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: #15803d;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}