/* ================= HOMEPAGE RESPONSIVE STYLES ================= */

/* ================= TABLET RESPONSIVE STYLES (768px - 1199px) ================= */
/* 
 * ============================================================================
 * TABLET CORNER SVG RESPONSIVE POSITIONING SYSTEM
 * ============================================================================
 * 
 * SOLUTION METHODOLOGY:
 * 1. FLUID POSITIONING: Use clamp() for responsive top/right positioning with viewport units
 * 2. BREAKPOINT REFINEMENTS: Specific overrides for different tablet size ranges
 * 3. SECTION-SPECIFIC TUNING: Account for different title lengths and layout needs
 * 4. CROSS-DEVICE COMPATIBILITY: Tested across iPad, Android tablets, and hybrid devices
 * 
 * BREAKPOINT STRATEGY:
 * - Base Tablet Rules (768px-1199px): Universal responsive positioning with clamp()
 * - Small-Medium Tablets (768px-1023px): Closer positioning for compact screens
 * - Large Tablets (1024px-1199px): More spacious positioning for larger screens  
 * - iPad Pro Range (1200px-1366px): Fine-tuned for high-resolution large tablets
 * 
 * MAINTENANCE:
 * - All corner SVG positioning centralized in this responsive system
 * - Easy to adjust by modifying clamp() values in respective breakpoints
 * - Consistent methodology ensures predictable behavior when adding new sections
 * 
 * TECHNICAL IMPLEMENTATION:
 * - Uses CSS clamp(min, preferred, max) for fluid scaling
 * - Employs !important declarations to override desktop/mobile styles
 * - Maintains pointer-events: none for accessibility
 * - Preserves z-index stacking for proper layering
 * ============================================================================
 */
/* 
 * DESKTOP SYSTEM (for reference):
 * - Default: calc(100% - 120px) = 60px padding each side
 * - Large screens: calc(100% - 160px) = 80px padding each side
 * 
 * TABLET SYSTEM (optimized implementation):
 * - Small to Medium tablets (768-1023px): calc(100% - 40px) = 20px padding each side
 * - Large tablets/iPad Pro (1024-1199px): calc(100% - 60px) = 30px padding each side
 * 
 */

@media (min-width: 768px) and (max-width: 1199px) {
  /* ================= GLOBAL TABLET TYPOGRAPHY SYSTEM ================= */
  /* 
   * Establishes consistent typography scale across all homepage sections.
   * Individual sections can override these variables when specific needs arise.
   */

  :root {
    /* ========== TABLET TYPOGRAPHY SCALE ========== */

    /* Section Titles & Headings */
    --tablet-title-primary: clamp(
      1.4rem,
      2.2vw,
      1.8rem
    ); /* Main section titles */
    --tablet-title-secondary: clamp(
      1.2rem,
      1.8vw,
      1.5rem
    ); /* Sub-section titles */
    --tablet-title-tertiary: clamp(
      1rem,
      1.4vw,
      1.2rem
    ); /* Card/component titles */

    /* Body Text & Content */
    --tablet-text-large: clamp(0.9rem, 1.2vw, 1rem); /* Large body text */
    --tablet-text-base: clamp(0.8rem, 1vw, 0.9rem); /* Standard body text */
    --tablet-text-small: clamp(
      0.7rem,
      0.8vw,
      0.8rem
    ); /* Small text, captions */

    /* Interactive Elements */
    --tablet-button-text: clamp(0.75rem, 0.9vw, 0.85rem); /* Button text */
    --tablet-form-text: clamp(0.8rem, 1vw, 0.9rem); /* Form inputs */

    /* Decorative & UI Elements */
    --tablet-svg-small: clamp(16px, 2vw, 20px); /* Small SVGs/icons */
    --tablet-svg-medium: clamp(20px, 2.5vw, 24px); /* Medium SVGs */

    /* Spacing Scale for Typography */
    --tablet-spacing-tight: clamp(0.4rem, 0.8vw, 0.6rem); /* Tight spacing */
    --tablet-spacing-normal: clamp(0.6rem, 1.2vw, 0.8rem); /* Normal spacing */
    --tablet-spacing-loose: clamp(0.8rem, 1.6vw, 1.2rem); /* Loose spacing */
  }

  /* ================= GLOBAL TABLET TEXT APPLICATION ================= */
  /* Apply consistent typography across all homepage sections */

  /* Section Titles */
  .section__title,
  .hero__title,
  .features__title,
  .products-demand__title,
  .estimator-cta__title,
  .insights .section__title,
  .quality__content .section__title {
    font-size: var(--tablet-title-primary) !important;
    margin-bottom: var(--tablet-spacing-loose) !important;
  }

  /* Body Text */
  p,
  .hero__subtitle,
  .hero__form-desc,
  .about__text p,
  .insight-card__desc,
  .footer__desc {
    font-size: var(--tablet-text-base) !important;
    line-height: 1.4 !important;
    margin-bottom: var(--tablet-spacing-normal) !important;
  }

  /* Button Text */
  .button,
  .hero__form-button,
  .features__card-button,
  .features__video-button,
  .product-card__button,
  .estimator-cta__button,
  .about__button,
  .insight-card__button {
    font-size: var(--tablet-button-text) !important;
    padding: var(--tablet-spacing-tight) var(--tablet-spacing-normal) !important;
  }

  /* Form Elements */
  .form__input,
  .form__textarea,
  .hero__form input,
  .hero__form textarea {
    font-size: var(--tablet-form-text) !important;
    padding: var(--tablet-spacing-tight) var(--tablet-spacing-normal) !important;
  }

  /* Card Titles */
  .product-card__title,
  .features__card-title,
  .features__video-title,
  .insight-card__title {
    font-size: var(--tablet-title-tertiary) !important;
    margin-bottom: var(--tablet-spacing-tight) !important;
  }

  /* SVG Icons */
  .section__corner-svg,
  .hero__corner-svg,
  .features__corner-svg,
  .about__corner-svg,
  .quality__corner-svg,
  .insights__corner-svg,
  .clients__corner-svg {
    width: var(--tablet-svg-small) !important;
    height: var(--tablet-svg-small) !important;
  }

  /* Base tablet corner SVG positioning - applies to all corner SVGs (estimator, products-demand use inline-block) */
  .features__corner-svg,
  .about__corner-svg,
  .quality__corner-svg,
  .insights__corner-svg,
  .clients__corner-svg {
    position: absolute !important;
    /* 
      * RESPONSIVE POSITIONING USING CLAMP FOR FLUID SCALING:
      * clamp(min_value, preferred_value, max_value)
      * 
      * TOP POSITIONING: clamp(-18px, -2.2vw, -12px)
      * - At small tablets: -18px (closer to title)
      * - Scales with viewport: -2.2vw (fluid)
      * - At large tablets: -12px (prevents too much distance)
      * 
      * RIGHT POSITIONING: clamp(-25px, -3vw, -15px)
      * - At small tablets: -25px (more offset)
      * - Scales with viewport: -3vw (fluid)
      * - At large tablets: -15px (closer positioning)
      * 
      * TO ADJUST: Modify the clamp() values based on visual testing
      */
    top: clamp(-18px, -2.2vw, -12px) !important; /* Adaptive top positioning */
    right: clamp(
      -25px,
      -3vw,
      -15px
    ) !important; /* Adaptive right positioning */
    /* Size handled by global --tablet-svg-small variable */
    z-index: 2 !important;
    pointer-events: none !important; /* Prevent interaction issues */
  }

  /* Features section specific positioning refinement */
  .features__corner-svg {
    /* Features title typically has more spacing, so adjust accordingly */
    top: clamp(-16px, -2vw, -10px) !important;
    right: clamp(-22px, -2.8vw, -12px) !important;
  }

  /* Estimator CTA positioning handled by inline-block approach in breakpoint-specific rules */

  /* Products demand section uses inline-block approach in breakpoint-specific rules */

  /* About section - typically shorter titles */
  .about__corner-svg {
    top: clamp(-16px, -2vw, -10px) !important;
    right: clamp(-22px, -2.8vw, -12px) !important;
  }

  /* Quality, Insights, and Clients sections - standard positioning */
  .quality__corner-svg,
  .insights__corner-svg,
  .clients__corner-svg {
    top: clamp(-17px, -2.1vw, -11px) !important;
    right: clamp(-24px, -2.9vw, -14px) !important;
  }

  /* Button Arrows */
  .hero__form-arrow,
  .features__button-arrow,
  .product-card__button-arrow,
  .estimator-cta__button-arrow,
  .about__button-arrow,
  .insight-card__button-arrow {
    width: var(--tablet-svg-small) !important;
    height: var(--tablet-svg-small) !important;
  }

  /* ================= TABLET CONTAINER & VIEWPORT PADDING SYSTEM ================= */

  :root {
    --container-width: calc(
      100% - 40px
    ); /* 20px padding on each side for smaller tablets */
    --container-max-width: 1000px; /* Optimal max-width for tablet viewports */
  }

  /* Container and Base Layout Optimization */
  .container {
    width: var(--container-width); /* Uses global tablet container width */
    max-width: var(
      --container-max-width
    ); /* Prevents oversized content on tablets */
    padding: 0; /* Remove redundant padding since container-width handles it */
    margin: 0 auto; /* Center container */
  }

  /* Ensure all sections follow the tablet container system */
  .features .container,
  .estimator-cta__container,
  .products-demand .container,
  .about .container,
  .quality .container,
  .insights .container,
  .clients .container,
  .footer__main {
    width: var(--container-width) !important;
    max-width: var(--container-max-width) !important;
    margin: 0 auto !important;
  }

  /* hero__container: Handle separately for fine-tuned tablet spacing control */
  /* NOTE: Small/medium tablets (768px-1023px) and large tablets (1024px-1199px) 
     override this with their own direct container control system */
  .hero__container {
    width: var(--container-width) !important;
    max-width: var(--container-max-width) !important;
    margin: 0 auto !important;
  }

  /* Section padding optimization for tablets */
  section {
    padding: clamp(2.5rem, 4vw, 3.5rem) 0; /* Responsive section padding */
  }

  .section__title {
    font-size: clamp(1.8rem, 2.5vw, 2.2rem); /* Better responsive sizing */
    margin-bottom: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* ================= TABLET HERO SECTION ================= */

  .hero {
    padding: 3rem 0 4rem;
    background: url("../../assets/images/hero/hero-bg.png") no-repeat center top !important;
    background-size: cover !important;
    background-attachment: scroll !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .hero__container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem; /* Base gap - overridden by specific tablet breakpoints */
    padding-left: 0 !important; /* Override any inherited horizontal padding */
    padding-right: 0 !important; /* Override any inherited horizontal padding */
    /* Container width and padding: Base handled by global system, overridden by specific breakpoints */
  }

  .hero__left {
    flex: 1 1 50% !important; /* Better balance for tablets */
    padding-top: 2.5rem; /* Push content down to align with form middle */
    width: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Start from the pushed down position */
  }

  .hero__right {
    flex: 1 1 48% !important; /* Slightly larger for better form sizing */
    margin-top: 0.5rem;
    width: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* ================= TABLET LEFT SIDE CONTENT OPTIMIZATION ================= */

  /* Hero Title - Enhanced iPad Pro Design Approach for All Tablets */
  .hero__title {
    font-size: clamp(
      2.8rem,
      5.2vw,
      3.8rem
    ) !important; /* Base responsive title size */
    line-height: 1.35 !important; /* Optimal readability */
    font-weight: 800 !important; /* Extra bold weight */
    margin-bottom: clamp(
      1.5rem,
      3vw,
      2.2rem
    ) !important; /* Proportional spacing */
    letter-spacing: 0.015em !important; /* Elegant letter spacing */
    word-spacing: 0.3em !important; /* Enhanced word spacing */
    color: var(--color-primary) !important; /* Primary brand color */
  }

  .hero__title br {
    display: none;
  }

  /* Hero Subtitle - Enhanced Typography Following iPad Pro Approach */
  .hero__subtitle {
    font-size: clamp(
      1.1rem,
      2.2vw,
      1.4rem
    ) !important; /* Responsive subtitle */
    line-height: 1.3 !important; /* Consistent line height */
    font-weight: 500 !important; /* Medium weight */
    margin-bottom: clamp(
      1.2rem,
      2.5vw,
      1.8rem
    ) !important; /* Proportional spacing */
    color: var(--color-text-secondary) !important; /* Secondary text color */
  }

  /* Hero Divider - Enhanced Red Arrow Following iPad Pro Approach */
  .hero__divider {
    justify-content: flex-start !important; /* Left alignment */
    margin-bottom: clamp(
      1.5rem,
      3vw,
      2rem
    ) !important; /* Enhanced spacing after divider */
    margin-top: clamp(
      0.8rem,
      1.5vw,
      1.2rem
    ) !important; /* Enhanced spacing before divider */
  }

  .hero__divider-svg {
    max-width: clamp(
      320px,
      45vw,
      420px
    ) !important; /* Enhanced red arrow length */
    width: 100% !important; /* Full width utilization */
    height: auto !important; /* Maintain aspect ratio */
  }

  /* Hero Form - Example of Section-Specific Override */
  .hero__form-title {
    font-size: var(
      --tablet-title-secondary
    ) !important; /* Override: uses secondary instead of primary */
    margin-bottom: var(--tablet-spacing-normal) !important;
    line-height: 1.2 !important;
    color: var(--color-primary) !important;
  }

  /* Partners section - Full width optimization following iPad Pro approach */
  .hero__partners {
    gap: 1rem; /* Balanced spacing for general tablets */
    margin-top: 0.5rem; /* Consistent top margin */
    justify-content: space-between !important; /* Full width distribution like iPad Pro */
    width: 100% !important; /* Full width utilization like iPad Pro */
    max-width: 100% !important; /* Full max-width like iPad Pro */
  }

  .hero__partners-2 {
    gap: 1rem; /* Balanced spacing for general tablets */
    margin-top: 0.5rem; /* Consistent top margin */
    justify-content: normal !important; /* Full width distribution like iPad Pro */
    width: 100% !important; /* Full width utilization like iPad Pro */
    max-width: 100% !important; /* Full max-width like iPad Pro */
  }

  /* Subtitle group - Full width optimization following iPad Pro approach */
  .hero__subtitle-group {
    width: 100% !important; /* Full width like iPad Pro */
    max-width: 100% !important; /* Full max-width like iPad Pro */
  }

  .hero__partner-logo {
    max-height: 65px; /* Balanced size for general tablets */
    max-width: 100px; /* Balanced size for general tablets */
  }

  /* ================= TABLET FORM ================= */
  .hero__form-card {
    position: relative !important;
    background: #fff !important;
    border: 18px solid #282828 !important; /* Increased from 14px to 18px for thicker border */
    border-radius: 0 !important; /* No border radius as in desktop */
    max-width: 100% !important; /* Use full available width */
    min-width: 420px !important; /* Ensure minimum usable width */
    width: 100% !important;
    padding: 2rem 1.5rem !important; /* Comfortable padding */
    margin: 0 !important;
    z-index: 1 !important;
  }

  /* PRESERVE DESKTOP PSEUDO-ELEMENTS FOR TABLETS */
  .hero__form-card::before {
    content: "" !important;
    position: absolute !important;
    bottom: -19px !important; /* Scaled from desktop -17px */
    right: -17px !important; /* Scaled from desktop -16px */
    width: 18px !important; /* Scaled from desktop 15px */
    height: 18px !important; /* Scaled from desktop 15px */
    background-color: #ffffff !important;
    z-index: 2 !important;
  }

  .hero__form-card::after {
    content: "" !important;
    position: absolute !important;
    bottom: -18px !important; /* Scaled from desktop -17px */
    right: -35px !important; /* Scaled from desktop -31px */
    width: 17px !important; /* Scaled from desktop 15px */
    height: 17px !important; /* Scaled from desktop 15px */
    background-color: #282828 !important;
    z-index: 1 !important;
  }

  .hero__form-container {
    min-height: 350px;
  }

  .hero__form {
    gap: 1rem; /* Comfortable spacing */
  }

  /* Form elements use global --tablet-form-text and --tablet-spacing-* */
  .hero__form textarea {
    min-height: 80px;
  }

  .hero__form-button {
    margin-top: 0.8rem;
    min-width: 180px;
    /* Other properties handled by global typography system */
  }

  /* TABLET CORNER DECORATIONS - SCALED FROM DESKTOP */
  .hero__form-corner {
    /* Desktop: width: 32px; height: 32px; border: 5px solid #222; */
    width: 30px !important; /* Scaled from desktop 32px */
    height: 30px !important; /* Scaled from desktop 32px */
    border-width: 4px !important; /* Scaled from desktop 5px */
    position: absolute !important;
    border-color: #222 !important;
    background: transparent !important;
    z-index: 2 !important;
  }

  .hero__form-corner--tl {
    top: -4px !important; /* Scaled from desktop -5px */
    left: -4px !important; /* Scaled from desktop -5px */
    border-bottom: none !important;
    border-right: none !important;
  }

  .hero__form-corner--tr {
    top: -4px !important; /* Scaled from desktop -5px */
    right: -4px !important; /* Scaled from desktop -5px */
    border-bottom: none !important;
    border-left: none !important;
  }

  .hero__form-corner--bl {
    bottom: -4px !important; /* Scaled from desktop -5px */
    left: -4px !important; /* Scaled from desktop -5px */
    border-top: none !important;
    border-right: none !important;
  }

  /* Note: .hero__form-corner--br intentionally omitted to avoid interference with ::after pseudo-element */

  .hero__form-inner-corner {
    /* Desktop: width: 60px; height: 46px; */
    width: 55px !important; /* Scaled from desktop 60px */
    height: 42px !important; /* Scaled from desktop 46px */
    position: absolute !important;
    top: 12px !important;
    right: 4px !important;
    z-index: 3 !important;
    pointer-events: none !important;
  }

  .hero__form-corner-arrow {
    /* Desktop: width: 46px; height: 46px; */
    width: 42px !important; /* Scaled from desktop 46px */
    height: 42px !important; /* Scaled from desktop 46px */
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }
}

/* ================= TABLET HEADER OPTIMIZATION ================= */

/* ================= TABLET BREAKPOINT-SPECIFIC CORNER SVG OPTIMIZATIONS ================= */

/* Small to Medium Tablets (768px - 1023px) - Compact Corner SVG Positioning */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Hide desktop title, show mobile title on tablets */
  body .features__title--desktop {
    display: none !important;
  }

  body .features__title--mobile {
    display: inline-block !important;
  }

  /* Use same inline-block approach as working sections (about, quality, insights) */
  .features__corner-svg {
    display: inline-block !important;
    width: clamp(20px, 2vw, 25px) !important;
    height: clamp(20px, 2vw, 25px) !important;
    margin-left: clamp(1px, 0.2vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .estimator-cta .estimator-cta__title .estimator-cta__corner-svg {
    /* Use same inline-block approach as working sections (about, quality, insights) */
    display: inline-block !important;
    width: clamp(20px, 2vw, 25px) !important;
    height: clamp(20px, 2vw, 25px) !important;
    margin-left: clamp(1px, 0.2vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .products-demand .products-demand__title .products-demand__corner-svg {
    /* Use same inline-block approach as working sections (about, quality, insights) */
    display: inline-block !important;
    width: clamp(20px, 2vw, 25px) !important;
    height: clamp(20px, 2vw, 25px) !important;
    margin-left: clamp(1px, 0.2vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .about__corner-svg {
    top: clamp(-13px, -1.7vw, -7px) !important;
    right: clamp(-18px, -2.4vw, -10px) !important;
  }

  .quality__corner-svg,
  .insights__corner-svg {
    top: clamp(-14px, -1.8vw, -8px) !important;
    right: clamp(-20px, -2.6vw, -12px) !important;
  }
}

/* Small to Medium Tablets (768px - 1023px) - Hamburger Menu */
@media (min-width: 768px) and (max-width: 1023px) {
  .header {
    width: 96%;
    height: clamp(60px, 8vw, 70px);
    margin: 10px auto;
    background: #1e1e1e;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    position: sticky;
    top: 10px;
  }

  .header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(16px, 3vw, 24px);
    height: 100%;
    position: relative;
  }

  .header__logo-link {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  .header__logo {
    height: clamp(32px, 6vw, 40px);
    width: auto;
    object-fit: contain;
  }

  /* Hide desktop navigation on smaller tablets */
  .header__nav {
    display: none !important;
  }

  /* Show hamburger menu toggle */
  .header__menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    width: clamp(28px, 6vw, 32px);
    height: clamp(28px, 6vw, 32px);
    padding: 0;
    position: relative;
    z-index: 3;
    margin-left: auto;
  }

  .header__menu-icon {
    position: relative;
    width: clamp(16px, 4vw, 20px);
    height: 2px;
    background-color: #fff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
  }

  .header__menu-icon::before,
  .header__menu-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(20px, 5vw, 24px);
    height: 2px;
    background-color: #fff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 1px;
  }

  .header__menu-icon::before {
    top: -6px;
  }

  .header__menu-icon::after {
    top: 6px;
  }

  .header__menu-toggle[aria-expanded="true"] .header__menu-icon {
    background-color: transparent;
  }

  .header__menu-toggle[aria-expanded="true"] .header__menu-icon::before {
    transform: translateX(-50%) rotate(45deg);
    top: 0;
  }

  .header__menu-toggle[aria-expanded="true"] .header__menu-icon::after {
    transform: translateX(-50%) rotate(-45deg);
    top: 0;
  }

  /* Tablet Mobile Menu - similar to mobile but optimized for tablet */
  .header__mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #1e1e1e;
    padding: clamp(80px, 15vw, 100px) clamp(24px, 5vw, 32px)
      clamp(60px, 12vw, 80px);
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99;
    overflow-y: auto;
    box-shadow: none !important;
    filter: none !important;
  }

  .header__mobile-menu-close {
    position: absolute;
    top: clamp(24px, 5vw, 32px);
    right: clamp(24px, 5vw, 32px);
    width: clamp(36px, 8vw, 44px);
    height: clamp(36px, 8vw, 44px);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(8px, 2vw, 10px);
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 101;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .header__mobile-menu-close-icon {
    width: clamp(24px, 6vw, 28px);
    height: clamp(24px, 6vw, 28px);
    filter: brightness(0) invert(1) !important;
    transition: all 0.3s ease;
  }

  .header__mobile-menu[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* Tablet Mobile Header Logo */
  .mobile_header__logo {
    position: absolute !important;
    top: clamp(24px, 5vw, 32px) !important;
    left: clamp(24px, 5vw, 32px) !important;
    height: clamp(36px, 8vw, 44px) !important;
    width: auto !important;
    z-index: 101 !important;
  }

  .header__mobile-nav {
    list-style: none;
    padding: 0;
    margin: clamp(50px, 12vw, 70px) 0 0 0 !important;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 5vw, 32px);
  }

  .header__mobile-item {
    margin: 0;
  }

  .header__mobile-link {
    color: #fff;
    text-decoration: none;
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    font-weight: 500;
    line-height: 1.2;
    display: block;
    padding: clamp(10px, 2.5vw, 14px) 0;
    transition: color 0.3s ease;
    border: none;
    background: none;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  .header__mobile-item--has-dropdown .header__mobile-dropdown-toggle {
    color: var(--color-primary);
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    font-weight: 500;
    background: none;
    border: none;
    padding: clamp(10px, 2.5vw, 14px) 0;
    text-align: left;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  .header__mobile-dropdown-icon::after {
    display: none !important;
  }

  .header__mobile-dropdown-toggle[aria-expanded="true"]
    .header__mobile-dropdown-icon::after {
    display: none !important;
  }

  .header__mobile-dropdown {
    list-style: none;
    padding: clamp(16px, 3.5vw, 20px) 0 0 clamp(20px, 4.5vw, 28px);
    margin: 0;
    display: none;
    flex-direction: column;
    gap: clamp(16px, 3.5vw, 20px);
    box-shadow: none !important;
    background: transparent !important;
  }

  .header__mobile-dropdown-toggle[aria-expanded="true"]
    + .header__mobile-dropdown {
    display: flex;
  }

  .header__mobile-dropdown-link {
    color: #e0e0e0;
    text-decoration: none;
    font-size: clamp(1.1rem, 3.5vw, 1.4rem);
    font-weight: 400;
    line-height: 1.3;
    display: block;
    padding: clamp(8px, 2vw, 10px) 0;
    transition: color 0.3s ease;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* Tablet Mobile Menu Footer */
  .header__mobile-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(20px, 4vw, 28px) clamp(24px, 5vw, 32px);
    background: #1e1e1e;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(12px, 3vw, 16px);
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .header__mobile-footer-copyright {
    color: #fff;
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    font-weight: 400;
    line-height: 1.3;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .header__mobile-footer-credit {
    color: #fff;
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    font-weight: 400;
    line-height: 1.3;
    text-align: right;
    flex-shrink: 1;
    min-width: 0;
  }

  .header__mobile-footer-credit--bold {
    font-weight: 700;
    color: #fff;
  }
}

/* Large Tablets (1024px - 1199px) - Spacious Corner SVG Positioning */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* Use same inline-block approach as working sections (about, quality, insights) */
  .features__corner-svg {
    display: inline-block !important;
    width: clamp(23px, 2.3vw, 25px) !important;
    height: clamp(23px, 2.3vw, 25px) !important;
    margin-left: clamp(1px, 0.4vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .estimator-cta .estimator-cta__title .estimator-cta__corner-svg {
    /* Use same inline-block approach as working sections (about, quality, insights) */
    display: inline-block !important;
    width: clamp(23px, 2.3vw, 25px) !important;
    height: clamp(23px, 2.3vw, 25px) !important;
    margin-left: clamp(1px, 0.4vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .products-demand .products-demand__title .products-demand__corner-svg {
    /* Use same inline-block approach as working sections (about, quality, insights) */
    display: inline-block !important;
    width: clamp(23px, 2.3vw, 25px) !important;
    height: clamp(23px, 2.3vw, 25px) !important;
    margin-left: clamp(1px, 0.4vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .about__corner-svg {
    top: clamp(-19px, -2.3vw, -13px) !important;
    right: clamp(-27px, -3.1vw, -17px) !important;
  }

  .quality__corner-svg,
  .insights__corner-svg {
    top: clamp(-20px, -2.4vw, -14px) !important;
    right: clamp(-28px, -3.2vw, -18px) !important;
  }
}

/* Large Tablets (1024px - 1199px) - Desktop Layout with Smaller Fonts */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header {
    width: 96%;
    height: clamp(65px, 7vw, 72px);
    margin: 10px auto;
    background: #1e1e1e;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    position: sticky;
    top: 10px;
  }

  .header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(20px, 3.5vw, 28px);
    height: 100%;
  }

  .header__logo {
    height: clamp(36px, 6vw, 42px);
    width: auto;
    object-fit: contain;
  }

  /* Show desktop navigation on larger tablets */
  .header__nav {
    display: flex;
  }

  .header__nav-list {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2.5vw, 20px);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .header__nav-link {
    color: #fff;
    text-decoration: none;
    font-size: clamp(13px, 2.8vw, 16px); /* Reduced from desktop 18px */
    font-weight: 500;
    padding: clamp(8px, 2vw, 12px) clamp(12px, 2.5vw, 16px); /* Reduced from desktop 0 20px */
    border-radius: 0;
    transition: all 0.3s ease;
    position: relative;
    white-space: nowrap;
  }

  .header__nav-link:hover {
    color: var(--color-primary);
    text-decoration: none;
  }

  /* Hide hamburger menu on larger tablets */
  .header__menu-toggle {
    display: none;
  }

  /* Dropdown optimization for large tablets */
  .header__dropdown-container {
    width: clamp(220px, 45vw, 260px); /* Reduced from desktop 280px */
    position: absolute;
    top: 100%;
    left: 0;
    background: #1e1e1e;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }

  .header__nav-item--has-dropdown:hover .header__dropdown-container,
  .header__dropdown-toggle[aria-expanded="true"] + .header__dropdown-container {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .header__dropdown {
    list-style: none;
    margin: 0;
    padding: clamp(8px, 2vw, 12px) 0;
  }

  .header__dropdown-link {
    display: block;
    color: #fff;
    text-decoration: none;
    font-size: clamp(12px, 2.5vw, 15px); /* Reduced from desktop 16px */
    font-weight: 400;
    padding: clamp(8px, 2vw, 12px) clamp(14px, 3vw, 20px); /* Reduced from desktop 12px 24px */
    transition: all 0.3s ease;
  }

  .header__dropdown-link:hover {
    background: rgba(229, 57, 53, 0.1);
    color: var(--color-primary);
    text-decoration: none;
  }

  .header__dropdown-icon::after {
    content: "▼";
    font-size: clamp(8px, 2vw, 10px); /* Reduced size */
    margin-left: clamp(4px, 1vw, 6px);
    transition: transform 0.3s ease;
  }

  .header__dropdown-toggle[aria-expanded="true"] .header__dropdown-icon::after {
    transform: rotate(180deg);
  }
}

/* iPad Pro and Large Tablets (1200px - 1366px) - Enhanced Corner SVG Positioning */
@media (min-width: 1200px) and (max-width: 1366px) {
  /* Use same inline-block approach as working sections (about, quality, insights) */
  .features__corner-svg {
    display: inline-block !important;
    width: clamp(24px, 2.4vw, 25px) !important;
    height: clamp(24px, 2.4vw, 25px) !important;
    margin-left: clamp(1px, 0.5vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .estimator-cta .estimator-cta__title .estimator-cta__corner-svg {
    /* Use same inline-block approach as working sections (about, quality, insights) */
    display: inline-block !important;
    width: clamp(24px, 2.4vw, 25px) !important;
    height: clamp(24px, 2.4vw, 25px) !important;
    margin-left: clamp(1px, 0.5vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .products-demand .products-demand__title .products-demand__corner-svg {
    /* Use same inline-block approach as working sections (about, quality, insights) */
    display: inline-block !important;
    width: clamp(24px, 2.4vw, 25px) !important;
    height: clamp(24px, 2.4vw, 25px) !important;
    margin-left: clamp(1px, 0.5vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .about__corner-svg {
    top: clamp(-21px, -2.5vw, -15px) !important;
    right: clamp(-29px, -3.3vw, -19px) !important;
  }

  .quality__corner-svg,
  .insights__corner-svg {
    top: clamp(-22px, -2.6vw, -16px) !important;
    right: clamp(-30px, -3.4vw, -20px) !important;
  }
}

/* iPad Pro Specific Optimizations (1024px - 1366px) - Compact Header */
@media (min-width: 1024px) and (max-width: 1366px) {
  .header__container {
    padding: 0 clamp(0px, 0.2vw, 2px); /* Nearly zero padding - maximum space for navigation */
    gap: clamp(16px, 3vw, 24px); /* Ensure space between logo and nav */
  }

  .header__nav-list {
    gap: clamp(8px, 1.8vw, 14px); /* Tighter spacing between nav items */
    margin-left: auto; /* Push navigation to the right, creating space from logo */
  }

  .header__nav-link {
    font-size: clamp(11px, 2.2vw, 14px); /* Even smaller font for iPad Pro */
    padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 12px); /* Reduced padding */
  }

  .header__dropdown-container {
    width: clamp(200px, 40vw, 240px); /* Slightly smaller dropdown */
  }

  .header__dropdown-link {
    font-size: clamp(10px, 2vw, 13px); /* Smaller dropdown text */
    padding: clamp(6px, 1.5vw, 10px) clamp(12px, 2.5vw, 16px); /* Reduced dropdown padding */
  }

  .header__dropdown-icon::after {
    font-size: clamp(7px, 1.5vw, 9px); /* Smaller dropdown arrow */
    margin-left: clamp(3px, 0.8vw, 5px);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Hide desktop title, show mobile title on tablets */
  body .features__title--desktop {
    display: none !important;
  }

  body .features__title--mobile {
    display: inline-block !important;
  }

  /* ================= OVERRIDE DESKTOP CORNER SVG POSITIONING FOR TABLETS ================= */
  /* Use same inline-block approach as working sections (about, quality, insights) */
  .features__corner-svg {
    display: inline-block !important;
    width: clamp(22px, 2.2vw, 25px) !important;
    height: clamp(22px, 2.2vw, 25px) !important;
    margin-left: clamp(1px, 0.3vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
    /* Ensure proper stacking and interaction */
    z-index: 2 !important;
    pointer-events: none !important;
  }

  /* ================= FIX ESTIMATOR & PRODUCTS DEMAND CORNER SVG POSITIONING ================= */
  /* These sections use inline-block positioning in desktop CSS, need complete override for tablets */

  .estimator-cta .estimator-cta__title .estimator-cta__corner-svg {
    /* Use same inline-block approach as working sections (about, quality, insights) */
    display: inline-block !important;
    width: clamp(22px, 2.2vw, 25px) !important;
    height: clamp(22px, 2.2vw, 25px) !important;
    margin-left: clamp(1px, 0.3vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  .products-demand .products-demand__title .products-demand__corner-svg {
    /* Use same inline-block approach as working sections (about, quality, insights) */
    display: inline-block !important;
    width: clamp(20px, 2vw, 25px) !important;
    height: clamp(20px, 2vw, 25px) !important;
    margin-left: clamp(1px, 0.2vw, 2px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  /* Features Section Optimization */
  .features {
    padding: 3.5rem 0;
  }

  .features .container {
    padding: 0; /* Remove custom padding, let global container system handle it */
  }

  .features__top {
    gap: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .features__header {
    flex: 0 0 40%;
  }

  .features__title {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    /* Ensure proper positioning context for corner SVG */
    position: relative !important;
    display: inline-block !important;
  }

  .features__video {
    flex: 0 0 58%;
    height: 320px; /* Fixed height for consistency */
  }

  .features__video-title {
    font-size: var(
      --tablet-title-secondary
    ) !important; /* Override: larger for video prominence */
    bottom: 25px;
    left: 25px;
  }

  .features__video-button {
    left: 25px;
    padding: 8px 18px;
    font-size: 15px;
  }

  .features__bottom {
    gap: 2rem;
  }

  .features__card {
    height: 240px;
  }

  .features__card-title {
    font-size: 20px;
    bottom: 18px;
    left: 18px;
  }

  .features__card-button {
    left: 18px;
    padding: 8px 14px;
    font-size: 14px;
  }

  /* ================= TABLET TOUCH OPTIMIZATION FOR FEATURES SECTION ================= */
  /* Since tablets are touch devices, we make interactive elements visible by default */
  /* and disable hover animations to provide proper touch-based user experience */

  /* Make video elements accessible by default on tablets */
  .features__video-title {
    transform: translateY(
      -60px
    ) !important; /* Always show title in "hover" position */
  }

  .features__video-button {
    bottom: 30px !important; /* Always show button in visible position */
    opacity: 1 !important; /* Ensure button is fully visible */
  }

  /* Make card elements accessible by default on tablets */
  .features__card-title {
    transform: translateY(
      -40px
    ) !important; /* Always show title in "hover" position */
  }

  .features__card-button {
    bottom: 20px !important; /* Always show button in visible position */
    opacity: 1 !important; /* Ensure button is fully visible */
  }

  /* Completely disable hover overlay animations for tablets */
  .features__video:hover .features__video-overlay {
    transform: scaleY(
      1
    ) !important; /* Keep original scale, no red shadow scaling */
  }

  .features__video:hover .features__video-title {
    transform: translateY(-60px) !important; /* No additional movement */
  }

  .features__video:hover .features__video-button {
    bottom: 30px !important; /* No additional movement */
  }

  .features__card:hover .features__card-overlay {
    transform: scaleY(
      1
    ) !important; /* Keep original scale, no red shadow scaling */
  }

  .features__card:hover .features__card-title {
    transform: translateY(-40px) !important; /* No additional movement */
  }

  .features__card:hover .features__card-button {
    bottom: 20px !important; /* No additional movement */
  }

  /* ================= FEATURES BUTTON ALIGNMENT & SIZE FIXES FOR TABLETS ================= */
  /* Fix button text and arrow alignment to be in one line */
  .features__card-button,
  .features__video-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important; /* Space between text and arrow */
  }

  /* Reduce arrow size specifically for features section buttons */
  .features__button-arrow {
    width: clamp(
      12px,
      1.5vw,
      14px
    ) !important; /* Smaller than global --tablet-svg-small */
    height: clamp(12px, 1.5vw, 14px) !important;
    flex-shrink: 0 !important; /* Prevent arrow from shrinking */
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Estimator CTA Section */
  .estimator-cta {
    padding: 4rem 0;
  }

  .estimator-cta__container {
    padding: 0; /* Remove custom padding, let global container system handle it */
    max-width: 1000px;
    margin: 0 auto;
  }

  .estimator-cta__content {
    width: 70%;
  }

  .estimator-cta__title {
    font-size: clamp(1.6rem, 3vw, 2rem);
    margin-bottom: 2rem;
    line-height: 1.3 !important;
    /* Ensure proper positioning context for corner SVG */
    position: relative !important;
  }

  .estimator-cta__button {
    padding: 12px 24px;
    font-size: 16px;
    min-width: 170px;
  }

  .estimator-cta .estimator-cta__title .estimator-cta__corner-svg {
    /* Use same inline-block approach as working sections - no absolute positioning needed */
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    margin-left: 2px !important;
    margin-top: -3px !important;
    vertical-align: top !important;
  }

  /* Disable hover effects for tablet */

  /* Fix estimator button arrow alignment on tablets - vertical centering */
  .estimator-cta__button-arrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Products in Demand Section */
  .products-demand {
    padding: 3.5rem 0;
  }

  .products-demand__title {
    font-size: clamp(1.6rem, 3vw, 2rem);
    margin-bottom: 2.5rem;
    /* Ensure proper positioning context for corner SVG */
    position: relative !important;
    display: inline-block !important;
    /* Override main.css width: 100% that causes wrapping */
    width: auto !important;
    /* Prevent SVG from wrapping to next line */
    white-space: nowrap !important;
  }

  .products-demand .products-demand__title .products-demand__corner-svg {
    display: inline-block !important;
    margin-left: clamp(2px, 0.3vw, 4px) !important;
    margin-top: -3px !important;
    vertical-align: top !important;
    width: 22px;
    height: 22px;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .carousel__track {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .carousel__slide {
    width: calc(32% - 1rem); /* Better use of tablet width */
    min-width: 240px;
    max-width: 300px;
  }

  .product-card {
    padding: 1.5rem 1.2rem;
  }

  .product-card__img {
    height: 220px; /* Increased from 180px to make cards taller */
    margin-bottom: 1rem;
  }

  .product-card__title {
    font-size: 18px;
    margin-bottom: 1rem;
  }

  .product-card__button {
    padding: 10px 20px;
    font-size: 15px;
    margin-top: 1rem;
  }

  .carousel__progress-container {
    width: 220px;
    height: 6px;
  }

  .carousel__progress-bar {
    height: 10px;
    width: 55px;
    top: -2px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* About Section */
  .about {
    height: 520px;
  }

  .about__text {
    max-width: 400px;
    padding: 2rem 0 0 0;
  }

  .about__text .section__title {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    margin-bottom: 1rem;
    /* Ensure proper positioning context for corner SVG */
    position: relative !important;
    display: inline-block !important;
  }

  .about__corner-svg {
    width: 22px;
    height: 22px;
  }

  .about__text p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
  }

  .about__button {
    padding: 10px 20px;
    font-size: 15px;
    margin-top: 0.5rem;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* ================= TABLET QUALITY TITLE VISIBILITY CONTROL ================= */
  /* Hide mobile-only version on tablet, show default version - MAXIMUM SPECIFICITY */
  body .quality .quality__content .quality__title--mobile-only {
    display: none !important; /* HIDE mobile-only version on tablet screens */
    visibility: hidden !important; /* Double protection */
    opacity: 0 !important; /* Triple protection */
  }

  /* Quality and Insights Sections */
  .quality,
  .insights {
    padding: 3.5rem 0;
  }

  .quality__content .section__title,
  .insights .section__title,
  .clients__content .section__title {
    font-size: clamp(1.8rem, 3vw, 2.2rem);
    margin-bottom: 2rem;
    /* Ensure proper positioning context for corner SVG */
    position: relative !important;
    display: inline-block !important;
  }

  .quality__corner-svg,
  .insights__corner-svg {
    width: 22px;
    height: 22px;
  }

  .insights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns side by side */
    gap: 1.5rem; /* Space between columns */
    width: 100%;
  }

  .insight-card {
    display: flex !important;
    flex-direction: row !important; /* Horizontal layout */
    overflow: hidden !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    height: auto !important;
    min-height: 160px !important; /* More compact height for rectangular appearance */
  }

  .insight-card__image {
    width: 38% !important; /* Slightly narrower for more rectangular look */
    min-width: 140px !important; /* Minimum width to prevent too narrow */
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .insight-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .insight-card__content {
    flex: 1 !important; /* Take remaining space */
    padding: 1rem !important; /* Reduced padding for compactness */
    background-color: #232323 !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .insight-card__title {
    color: #fff !important;
    font-size: var(
      --tablet-text-small
    ) !important; /* Override: uses smaller text for compact cards */
    margin-bottom: var(--tablet-spacing-tight) !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  .insight-card__desc {
    color: #e0e0e0 !important;
    font-size: clamp(
      0.65rem,
      0.8vw,
      0.75rem
    ) !important; /* Override: extra small for card descriptions */
    line-height: 1.4 !important;
    margin-bottom: var(--tablet-spacing-tight) !important;
    flex-grow: 1 !important;
  }

  .insight-card__button {
    display: inline-flex !important;
    align-items: center !important;
    background-color: var(--color-primary) !important;
    color: #fff !important;
    font-size: clamp(
      0.65rem,
      0.8vw,
      0.75rem
    ) !important; /* Override: smaller than global button text */
    font-weight: 500 !important;
    padding: var(--tablet-spacing-tight) !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    align-self: flex-start !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
  }

  .insight-card__button-arrow {
    margin-left: 6px !important; /* Tighter arrow spacing */
    width: clamp(
      8px,
      1.2vw,
      10px
    ) !important; /* Override: smaller than global SVG size */
    height: clamp(8px, 1.2vw, 10px) !important;
  }

  /* Ultra-compact section title */
  .insights .section__title {
    font-size: clamp(1.4rem, 2.2vw, 1.7rem) !important;
    margin-bottom: 1.4rem !important;
  }

  .insights__corner-svg {
    width: 16px !important; /* Ultra-small corner SVG */
    height: 16px !important;
    /* Reset tablet positioning for ultra-compact tablet layout */
    position: absolute !important;
    top: clamp(-12px, -1.5vw, -8px) !important;
    right: clamp(-18px, -2.2vw, -12px) !important;
  }

  /* ================= TABLET CLIENTS SECTION ================= */

  .clients {
    padding: clamp(2.5rem, 4vw, 3.5rem) 0 !important;
    background-color: #fafafa !important;
  }

  .clients__content {
    text-align: left !important;
    max-width: 900px !important;
    margin: 0 auto !important;
  }

  .clients__content .section__title {
    font-size: clamp(1.4rem, 2.2vw, 1.7rem) !important;
    margin-bottom: 1.4rem !important;
    text-align: left !important;
    color: var(--color-primary) !important;
    /* Override the general tablet style - ensure proper positioning context for corner SVG */
    position: relative !important;
    display: inline-block !important;
  }

  .clients__corner-svg {
    width: 16px !important; /* Ultra-small corner SVG like insights */
    height: 16px !important;
    position: absolute !important;
    top: clamp(-12px, -1.5vw, -8px) !important;
    right: clamp(-18px, -2.2vw, -12px) !important;
  }

  .clients__content p {
    font-size: clamp(0.9rem, 1.5vw, 1rem) !important;
    line-height: 1.6 !important;
    text-align: left !important;
    color: var(--color-secondary) !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Footer Optimization */
  .footer__main {
    padding: 3.5rem 0 2rem 0; /* Remove horizontal padding, let global container system handle it */
    gap: 2.5rem;
  }

  .footer__brand {
    min-width: 350px;
    max-width: 500px;
  }

  .footer__logo {
    width: 220px;
    margin-bottom: 1.5rem;
  }

  .footer__desc {
    font-size: 14px;
    margin-bottom: 2rem;
    line-height: 1.5;
  }

  .footer__contact {
    gap: 2rem;
    margin-bottom: 1.5rem;
  }

  .footer__links {
    gap: 2rem;
  }

  .footer__col {
    min-width: 140px;
  }

  .footer__col-title {
    font-size: var(
      --tablet-text-large
    ) !important; /* Override: uses large text for hierarchy */
    margin-bottom: var(--tablet-spacing-tight) !important;
    font-weight: 600 !important;
  }

  .footer__link {
    line-height: 1.6 !important;
  }

  .footer__bottom {
    padding: 1rem 0 0.5rem 0; /* Remove horizontal padding, let global container system handle it */
    font-size: 13px;
  }
}

/* ================= SPECIFIC TABLET OPTIMIZATIONS ================= */

/* Small to Medium Tablets (768px - 1023px) - With Hamburger Menu */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ================= SMALL/MEDIUM TABLETS: FOLLOW IPAD PRO DESIGN ================= */

  /* CONTAINER SYSTEM: Apply same approach as iPad Pro but with appropriate spacing */
  .hero__container {
    width: calc(
      100% - 40px
    ) !important; /* Direct application - 20px margin each side */
    max-width: none !important; /* Remove container max-width constraint */
    margin: 0 auto !important; /* Center with direct margin control */
    padding: 0 8px !important; /* 8px padding on left and right for smaller tablets */
    gap: 1.1rem; /* Proportional gap between left and right sections */
  }

  /* ================= LEFT SIDE CONTENT: SAME DESIGN APPROACH AS IPAD PRO ================= */

  /* Hero Title - Scale down from iPad Pro approach */
  .hero__title {
    font-size: clamp(
      2.6rem,
      5.2vw,
      3.5rem
    ) !important; /* Increased font size for small/medium tablets */
    line-height: 1.35 !important; /* Same line height as iPad Pro */
    font-weight: 800 !important; /* Same weight as iPad Pro */
    margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem) !important; /* Scaled spacing */
    letter-spacing: 0.015em !important; /* Same letter spacing as iPad Pro */
    word-spacing: 0.3em !important; /* Same word spacing as iPad Pro */
    color: var(--color-primary) !important; /* Same color as iPad Pro */
  }

  /* Hero Subtitle - Scale down from iPad Pro approach */
  .hero__subtitle {
    font-size: clamp(
      0.95rem,
      1.9vw,
      1.25rem
    ) !important; /* Scaled down from iPad Pro */
    line-height: 1.3 !important; /* Same line height as iPad Pro */
    font-weight: 500 !important; /* Same weight as iPad Pro */
    margin-bottom: clamp(
      1.4rem,
      2.8vw,
      2rem
    ) !important; /* Increased spacing between subtitle and partners */
    color: var(--color-text-secondary) !important; /* Same color as iPad Pro */
  }

  /* Hero Divider - Scale down from iPad Pro approach */
  .hero__divider {
    justify-content: flex-start !important; /* Same alignment as iPad Pro */
    margin-bottom: clamp(1.2rem, 2.5vw, 1.6rem) !important; /* Scaled spacing */
    margin-top: clamp(0.6rem, 1.2vw, 0.9rem) !important; /* Scaled spacing */
  }

  .hero__divider-svg {
    max-width: clamp(
      280px,
      40vw,
      360px
    ) !important; /* Scaled red arrow from iPad Pro */
    width: 100% !important; /* Same approach as iPad Pro */
    height: auto !important; /* Same approach as iPad Pro */
  }

  /* Partners section - Same full width approach as iPad Pro */
  .hero__partners {
    gap: clamp(
      0.3rem,
      1.2vw,
      0.6rem
    ) !important; /* Tighter gaps for smaller space */
    margin-top: 0.5rem; /* Same as iPad Pro */
    justify-content: space-between !important; /* Same distribution as iPad Pro */
    width: 100% !important; /* Same full width as iPad Pro */
    max-width: 100% !important; /* Same max-width as iPad Pro */
  }
  /* Partners section - Same full width approach as iPad Pro */
  .hero__partners-2 {
    gap: clamp(
      0.3rem,
      1.2vw,
      0.6rem
    ) !important; /* Tighter gaps for smaller space */
    margin-top: 0.5rem; /* Same as iPad Pro */
    justify-content: normal !important; /* Same distribution as iPad Pro */
    width: 100% !important; /* Same full width as iPad Pro */
    max-width: 100% !important; /* Same max-width as iPad Pro */
  }



  /* Subtitle group - Same full width approach as iPad Pro */
  .hero__subtitle-group {
    width: 100% !important; /* Same full width as iPad Pro */
    max-width: 100% !important; /* Same max-width as iPad Pro */
  }

  .hero__partner-logo {
    max-height: 50px !important; /* Scaled down from iPad Pro's 65px */
    max-width: 80px !important; /* Scaled down from iPad Pro's 100px */
  }

  /* ================= RIGHT SIDE FORM: SAME DESIGN APPROACH AS IPAD PRO ================= */

  .hero__form-card {
    position: relative !important; /* Same positioning as iPad Pro */
    background: #fff !important; /* Same background as iPad Pro */
    border: 16px solid #282828 !important; /* Scaled down from iPad Pro's 18px */
    border-radius: 0 !important; /* Same styling as iPad Pro */
    max-width: 100% !important; /* Same width approach as iPad Pro */
    min-width: 380px !important; /* Scaled down from iPad Pro's 450px */
    width: 100% !important; /* Same width approach as iPad Pro */
    padding: 1.3rem 1rem !important; /* Reduced padding for smaller tablets */
    margin: 0 !important; /* Same margin as iPad Pro */
    z-index: 1 !important; /* Same z-index as iPad Pro */
  }

  /* Form pseudo-elements - Same design approach as iPad Pro, scaled down */
  .hero__form-card::before {
    content: "" !important;
    position: absolute !important;
    bottom: -17px !important; /* Scaled from iPad Pro -19px */
    right: -15px !important; /* Scaled from iPad Pro -17px */
    width: 16px !important; /* Scaled from iPad Pro 18px */
    height: 16px !important; /* Scaled from iPad Pro 18px */
    background-color: #ffffff !important;
    z-index: 2 !important;
  }

  .hero__form-card::after {
    content: "" !important;
    position: absolute !important;
    bottom: -16px !important; /* Scaled from iPad Pro -18px */
    right: -31px !important; /* Scaled from iPad Pro -35px */
    width: 15px !important; /* Scaled from iPad Pro 17px */
    height: 15px !important; /* Scaled from iPad Pro 17px */
    background-color: #282828 !important;
    z-index: 1 !important;
  }

  .hero__form-container {
    min-height: 300px !important; /* Scaled down from iPad Pro's 350px */
  }

  .hero__form {
    gap: 0.8rem !important; /* Scaled down from iPad Pro's 1rem */
  }

  .hero__form input,
  .hero__form textarea {
    padding: clamp(9px, 2vw, 11px) clamp(11px, 2.5vw, 13px) !important; /* Appropriate for smaller tablets */
    font-size: clamp(
      0.8rem,
      1.9vw,
      0.9rem
    ) !important; /* Scaled down appropriately */
  }

  .hero__form textarea {
    min-height: 65px !important; /* Scaled down from iPad Pro's 80px */
  }

  .hero__form-button {
    margin-top: 0.6rem !important; /* Scaled down from iPad Pro's 0.8rem */
    min-width: 150px !important; /* Scaled down from iPad Pro's 180px */
    padding: clamp(10px, 2.2vw, 12px) clamp(16px, 3.2vw, 20px) !important;
    font-size: clamp(0.8rem, 1.9vw, 0.9rem) !important;
  }

  .hero__form-title {
    font-size: clamp(
      1.1rem,
      2.4vw,
      1.35rem
    ) !important; /* Reduced font size for smaller tablets */
    margin-bottom: clamp(0.5rem, 1.5vw, 0.8rem) !important; /* Reduced margin */
    line-height: 1.2 !important; /* Same as iPad Pro */
    color: var(--color-primary) !important; /* Same color as iPad Pro */
  }

  .hero__form-desc {
    font-size: clamp(
      0.65rem,
      1.5vw,
      0.75rem
    ) !important; /* Reduced font size for smaller tablets */
    margin-bottom: clamp(0.6rem, 1.8vw, 0.9rem) !important; /* Reduced margin */
  }

  /* Form corner decorations - Same design approach as iPad Pro, scaled down */
  .hero__form-corner {
    width: 27px !important; /* Scaled from iPad Pro 30px */
    height: 27px !important; /* Scaled from iPad Pro 30px */
    border-width: 3.5px !important; /* Scaled from iPad Pro 4px */
    position: absolute !important;
    border-color: #222 !important;
    background: transparent !important;
    z-index: 2 !important;
  }

  .hero__form-corner--tl,
  .hero__form-corner--tr {
    top: -3.5px !important; /* Scaled accordingly */
  }

  .hero__form-corner--tl,
  .hero__form-corner--bl {
    left: -3.5px !important; /* Scaled accordingly */
  }

  .hero__form-corner--tr {
    right: -3.5px !important; /* Scaled accordingly */
  }

  .hero__form-corner--bl {
    bottom: -3.5px !important; /* Scaled accordingly */
  }

  .hero__form-inner-corner {
    width: 50px !important; /* Scaled from iPad Pro 55px */
    height: 38px !important; /* Scaled from iPad Pro 42px */
    top: 11px !important; /* Adjusted positioning */
    right: 4px !important; /* Adjusted positioning */
  }

  .hero__form-corner-arrow {
    width: 38px !important; /* Scaled from iPad Pro 42px */
    height: 38px !important; /* Scaled from iPad Pro 42px */
  }

  /* Left/Right flex distribution - Balanced for smaller tablets */
  .hero__left {
    flex: 1 1 47% !important; /* Slightly adjusted for smaller tablets */
    padding-top: 2rem !important; /* Push content down to align with form middle - smaller tablets */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Start from the pushed down position */
  }

  .hero__right {
    flex: 1 1 51% !important; /* Slightly more space for form on smaller tablets */
  }

  .carousel__slide {
    width: calc(30% - 1rem); /* Show 3 products on smaller tablets */
  }
}

/* iPad Mini/iPad Portrait Specific (768px width) - Title Line Management */
@media (min-width: 768px) and (max-width: 800px) and (orientation: portrait) {
  /* Target iPad Mini/iPad portrait specifically */
  .hero__title {
    font-size: clamp(
      2.2rem,
      4.2vw,
      2.8rem
    ) !important; /* Slightly smaller font to fit 2 lines */
    line-height: 1.25 !important; /* Tighter line height to prevent 3-line wrap */
    letter-spacing: 0.01em !important; /* Reduced letter spacing for more horizontal space */
    word-spacing: 0.2em !important; /* Reduced word spacing for more horizontal space */
  }

  /* Adjust left side width to give more horizontal space for title */
  .hero__left {
    flex: 1 1 52% !important; /* Increase left side space from 47% to 52% */
  }

  .hero__right {
    flex: 1 1 46% !important; /* Decrease right side space from 51% to 46% */
  }

  /* Slightly reduce container gap to create more horizontal space */
  .hero__container {
    gap: 0.9rem !important; /* Reduced from 1.1rem to create more space */
  }
}

/* Large Tablets (1024px - 1199px) - With Desktop Layout */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* iPad Pro and larger tablets - increased padding */
  :root {
    --container-width: calc(
      100% - 60px
    ) !important; /* 30px padding on each side for iPad Pro */
  }

  /* ================= LARGE TABLET LEFT SIDE OPTIMIZATIONS ================= */
  .hero__form-card {
    min-width: 450px; /* Larger form for bigger tablets with desktop layout */
  }

  /* OVERRIDE: Remove hero__container from global container system for large tablets */
  .hero__container {
    width: calc(
      100% - 60px
    ) !important; /* Direct application - 30px margin each side */
    max-width: none !important; /* Remove container max-width constraint */
    margin: 0 auto !important; /* Center with direct margin control */
    padding: 0 10px !important; /* 10px padding on left and right */
    gap: 1.4rem; /* Increased gap between left and right sections for large tablets */
  }

  /* Enhanced Left Side Content for Large Tablets */
  .hero__title {
    font-size: clamp(
      3rem,
      5.5vw,
      4.2rem
    ) !important; /* Reduced but still impactful for large tablets */
    margin-bottom: clamp(1.8rem, 3.5vw, 2.5rem) !important;
    line-height: 1.32 !important; /* Further increased line height for optimal readability */
  }

  .hero__subtitle {
    font-size: clamp(
      1.05rem,
      2.1vw,
      1.4rem
    ) !important; /* Reduced subtitle font size for large tablets */
    margin-bottom: clamp(1.4rem, 3vw, 2rem) !important;
  }

  .hero__divider {
    margin-bottom: clamp(
      1.4rem,
      3vw,
      1.8rem
    ) !important; /* Reduced spacing between divider and subtitle */
    margin-top: clamp(1rem, 2vw, 1.5rem) !important;
  }

  .hero__divider-svg {
    max-width: clamp(
      360px,
      50vw,
      480px
    ) !important; /* Longest arrow for large tablets */
  }

  /* Partners and subtitle full width optimization for large tablets */
  .hero__partners {
    width: 100% !important; /* Full width for large tablets */
    max-width: 100% !important; /* Full max-width for optimal space usage */
  }
  /* Partners and subtitle full width optimization for large tablets */
  .hero__partners-2 {
    width: 100% !important; /* Full width for large tablets */
    max-width: 100% !important; /* Full max-width for optimal space usage */
  }

  .hero__subtitle-group {
    width: 100% !important; /* Full width for subtitle container */
    max-width: 100% !important; /* Full max-width for optimal space usage */
  }

  .carousel__slide {
    width: calc(25% - 1.2rem); /* Show 4 products on larger tablets */
  }
}

/* ================= CRITICAL TABLET LAYOUT ENFORCEMENT ================= */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero__container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
  }

  .hero__left,
  .hero__right {
    width: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .hero__left {
    flex: 1 1 50% !important;
    margin-bottom: 0 !important;
  }

  .hero__right {
    flex: 1 1 48% !important;
  }

  .hero__divider {
    justify-content: flex-start !important;
  }

  .hero__partners {
    justify-content: space-between !important; /* Full width horizontal distribution */
    flex-wrap: nowrap !important; /* Single row */
    gap: clamp(
      0.4rem,
      1.5vw,
      0.8rem
    ) !important; /* Reduced gaps to create more space */
    margin-top: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    padding: 0 !important; /* Remove horizontal padding for full width */
    display: flex !important;
    align-items: center !important;
    width: 100% !important; /* Full width to utilize all available space */
    max-width: 100% !important; /* Full max-width for optimal space usage */
  }

  .hero__form-card {
    margin: 0 !important;
  }
}

/* ================= TABLET CORNER SVG IMPLEMENTATION SUMMARY ================= */
/* 
 * IMPLEMENTATION COMPLETE - RESPONSIVE CORNER SVG POSITIONING SYSTEM
 * 
 * WHAT WAS IMPLEMENTED:
 * ✅ Fluid responsive positioning using clamp() for all tablet breakpoints
 * ✅ Breakpoint-specific optimizations for different tablet sizes
 * ✅ Section-specific tuning for different title layouts
 * ✅ Proper relative positioning contexts for all section titles
 * ✅ Mobile compatibility with static positioning override
 * ✅ iPad Pro and large tablet fine-tuning
 * ✅ Accessibility considerations (pointer-events, z-index)
 * ✅ Comprehensive documentation for future maintenance
 * 
 * BREAKPOINTS COVERED:
 * - 768px-1023px: Small-Medium tablets (compact positioning)
 * - 1024px-1199px: Large tablets (spacious positioning)
 * - 1200px-1366px: iPad Pro range (enhanced positioning)
 * - All use fluid clamp() scaling within their ranges
 * 
 * SECTIONS OPTIMIZED:
 * - Features section (.features__corner-svg)
 * - Estimator CTA (.estimator-cta__corner-svg)  
 * - Products Demand (.products-demand__corner-svg)
 * - About section (.about__corner-svg)
 * - Quality section (.quality__corner-svg)
 * - Insights section (.insights__corner-svg)
 * 
 * TESTING RECOMMENDED:
 * - iPad (768x1024, 1024x768)
 * - iPad Pro (1024x1366, 1366x1024)
 * - Android tablets (various resolutions)
 * - Browser zoom levels (75%, 100%, 125%, 150%)
 * - Orientation changes (portrait/landscape)
 */

/* ================= END TABLET RESPONSIVE STYLES ================= */

/* ================= MOBILE RESPONSIVE STYLES (320px - 767px) ================= */
/* 
 * MOBILE SYSTEM ARCHITECTURE:
 * MOBILE BREAKPOINT STRATEGY:
 * - Small mobile (320px - 480px): Ultra-compact layouts, minimal padding
 * - Medium mobile (481px - 600px): Balanced mobile experience  
 * - Large mobile (601px - 767px): Spacious mobile, preparing for tablet transition
 * 
 * MOBILE CONTAINER SYSTEM:
 * - Small mobile: calc(100% - 30px) = 15px padding each side
 * - Medium mobile: calc(100% - 40px) = 20px padding each side
 * - Large mobile: calc(100% - 50px) = 25px padding each side
 */

@media (max-width: 767px) {
  :root {
    /* ========== MOBILE TYPOGRAPHY SCALE ========== */

    /* Section Titles & Headings */
    --mobile-title-primary: clamp(
      1.6rem,
      4vw,
      2.2rem
    ); /* Main section titles */
    --mobile-title-secondary: clamp(
      1.3rem,
      3.2vw,
      1.8rem
    ); /* Sub-section titles */
    --mobile-title-tertiary: clamp(
      1.1rem,
      2.8vw,
      1.4rem
    ); /* Card/component titles */

    /* Body Text & Content */
    --mobile-text-large: clamp(0.95rem, 2.2vw, 1.1rem); /* Large body text */
    --mobile-text-base: clamp(0.85rem, 2vw, 1rem); /* Standard body text */
    --mobile-text-small: clamp(
      0.75rem,
      1.8vw,
      0.9rem
    ); /* Small text, captions */

    /* Interactive Elements */
    --mobile-button-text: clamp(0.8rem, 2vw, 0.95rem); /* Button text */
    --mobile-form-text: clamp(0.85rem, 2vw, 1rem); /* Form inputs */

    /* Decorative & UI Elements */
    --mobile-svg-small: clamp(14px, 3vw, 18px); /* Small SVGs/icons */
    --mobile-svg-medium: clamp(18px, 3.5vw, 22px); /* Medium SVGs */

    /* Spacing Scale for Mobile Typography */
    --mobile-spacing-tight: clamp(0.5rem, 1.5vw, 0.8rem); /* Tight spacing */
    --mobile-spacing-normal: clamp(0.8rem, 2vw, 1.2rem); /* Normal spacing */
    --mobile-spacing-loose: clamp(1rem, 2.5vw, 1.6rem); /* Loose spacing */

    /* ========== MOBILE CONTAINER SYSTEM ========== */
    --mobile-container-width: calc(
      100% - 24px
    ); /* 12px padding each side - INCREASED for better space utilization */
    --mobile-container-max-width: 100%; /* Full width on mobile */
    --mobile-section-padding: clamp(
      2rem,
      5vw,
      3rem
    ); /* Responsive section padding */

    /* ========== MOBILE ESTIMATOR OPTIMIZATION ========== */
    --mobile-estimator-container-width: calc(
      100% - 16px
    ); /* 8px padding each side - MAXIMUM space for estimator */
    --mobile-estimator-title-width: clamp(
      300px,
      85vw,
      380px
    ); /* SIGNIFICANTLY INCREASED title width to achieve 3 lines */

    /* ========== MOBILE HEADER SYSTEM ========== */
    --mobile-header-height: clamp(
      60px,
      15vw,
      70px
    ); /* Responsive header height */
    --mobile-header-padding: clamp(
      15px,
      4vw,
      20px
    ); /* Header horizontal padding */
    --mobile-logo-height: clamp(28px, 7vw, 35px); /* Logo height scaling */
    --mobile-menu-icon-size: clamp(24px, 6vw, 28px); /* Hamburger menu size */
  }

  /* ================= GLOBAL MOBILE TEXT APPLICATION ================= */
  /* Apply consistent typography across all homepage sections */

  /* Section Titles */
  .section__title,
  .hero__title,
  .features__title,
  .products-demand__title,
  .estimator-cta__title,
  .insights .section__title,
  .quality__content .section__title {
    font-size: var(--mobile-title-primary) !important;
    margin-bottom: var(--mobile-spacing-loose) !important;
    line-height: 1.2 !important;
  }

  /* Body Text */
  p,
  .hero__subtitle,
  .hero__form-desc,
  .about__text p,
  .insight-card__desc,
  .footer__desc {
    font-size: var(--mobile-text-base) !important;
    line-height: 1.5 !important;
    margin-bottom: var(--mobile-spacing-normal) !important;
  }

  /* Button Text */
  .button,
  .hero__form-button,
  .features__card-button,
  .features__video-button,
  .product-card__button,
  .estimator-cta__button,
  .about__button,
  .insight-card__button {
    font-size: var(--mobile-button-text) !important;
    padding: var(--mobile-spacing-tight) var(--mobile-spacing-normal) !important;
    border-radius: 0 !important; /* No border radius for mobile */
  }

  /* Form Elements */
  .form__input,
  .form__textarea,
  .hero__form input,
  .hero__form textarea {
    font-size: var(--mobile-form-text) !important;
    padding: var(--mobile-spacing-tight) var(--mobile-spacing-normal) !important;
    border-radius: 0 !important;
  }

  /* Card Titles */
  .product-card__title,
  .features__card-title,
  .features__video-title,
  .insight-card__title {
    font-size: var(--mobile-title-tertiary) !important;
    margin-bottom: var(--mobile-spacing-tight) !important;
    line-height: 1.3 !important;
  }

  /* SVG Icons */
  .section__corner-svg,
  .hero__corner-svg,
  .features__corner-svg,
  .products-demand__corner-svg,
  .estimator-cta__corner-svg,
  .about__corner-svg,
  .insights__corner-svg {
    width: var(--mobile-svg-small) !important;
    height: var(--mobile-svg-small) !important;
  }

  /* Quality corner SVG excluded - handled separately with mobile-only HTML structure */

  /* Button Arrows */
  .hero__form-arrow,
  .features__button-arrow,
  .product-card__button-arrow,
  .estimator-cta__button-arrow,
  .about__button-arrow,
  .insight-card__button-arrow {
    width: var(--mobile-svg-small) !important;
    height: var(--mobile-svg-small) !important;
  }

  /* ================= MOBILE CONTAINER & VIEWPORT SYSTEM ================= */

  /* Base container optimization for mobile */
  .container {
    width: var(--mobile-container-width) !important;
    max-width: var(--mobile-container-max-width) !important;
    padding: 0 !important; /* Container-width handles padding */
    margin: 0 auto !important;
  }

  /* Ensure all sections follow the mobile container system */
  .hero__container,
  .features .container,
  .estimator-cta__container,
  .products-demand .container,
  .about .container,
  .quality .container,
  .insights .container,
  .footer__main {
    width: var(--mobile-container-width) !important;
    max-width: var(--mobile-container-max-width) !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Mobile section padding optimization */
  section {
    padding: var(--mobile-section-padding) 0 !important;
  }

  /* ================= MOBILE HEADER OPTIMIZATION ================= */
  .header {
    width: calc(100% - calc(var(--mobile-header-padding) * 2)) !important;
    height: var(--mobile-header-height) !important;
    margin: clamp(8px, 2vw, 12px) auto !important;
    position: sticky !important;
    top: clamp(8px, 2vw, 12px) !important;
    background: #1e1e1e !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 100 !important;
  }

  .header__container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 var(--mobile-header-padding) !important;
    height: 100% !important;
    position: relative !important;
  }

  .header__logo-link {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .header__logo {
    height: var(--mobile-logo-height) !important;
    width: auto !important;
    object-fit: contain !important;
  }

  .header__nav {
    display: none !important;
  }

  .header__menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    width: var(--mobile-menu-icon-size) !important;
    height: var(--mobile-menu-icon-size) !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 3 !important;
    margin-left: auto !important;
  }

  .header__menu-icon {
    position: relative !important;
    width: clamp(14px, 3.5vw, 18px) !important;
    height: 2px !important;
    background-color: #fff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 1px !important;
  }

  .header__menu-icon::before,
  .header__menu-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: clamp(18px, 4.5vw, 22px) !important;
    height: 2px !important;
    background-color: #fff !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 1px !important;
  }

  .header__menu-icon::before {
    top: -6px !important;
  }

  .header__menu-icon::after {
    top: 6px !important;
  }

  .header__menu-toggle[aria-expanded="true"] .header__menu-icon {
    background-color: transparent !important;
  }

  .header__menu-toggle[aria-expanded="true"] .header__menu-icon::before {
    transform: translateX(-50%) rotate(45deg) !important;
    top: 0 !important;
  }

  .header__menu-toggle[aria-expanded="true"] .header__menu-icon::after {
    transform: translateX(-50%) rotate(-45deg) !important;
    top: 0 !important;
  }

  .header__mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: #1e1e1e !important;
    padding: clamp(80px, 20vw, 100px) var(--mobile-header-padding)
      clamp(80px, 20vw, 100px) !important;
    transform: translateX(100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 99 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .mobile_header__logo {
    position: absolute !important;
    top: clamp(20px, 5vw, 30px) !important;
    left: clamp(20px, 5vw, 30px) !important;
    height: clamp(32px, 8vw, 40px) !important;
    width: auto !important;
    z-index: 101 !important;
  }

  .header__mobile-menu-close {
    position: absolute !important;
    top: clamp(20px, 5vw, 30px) !important;
    right: clamp(20px, 5vw, 30px) !important;
    width: clamp(32px, 8vw, 40px) !important;
    height: clamp(32px, 8vw, 40px) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(6px, 1.5vw, 8px) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    z-index: 101 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .header__mobile-menu-close-icon {
    width: clamp(20px, 5vw, 24px) !important;
    height: clamp(20px, 5vw, 24px) !important;
    filter: brightness(0) invert(1) !important;
    transition: all 0.3s ease !important;
  }

  .header__mobile-menu-close-icon {
    filter: brightness(0) invert(1) !important;
  }

  .header__mobile-menu[aria-hidden="false"] {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .header__mobile-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: clamp(40px, 10vw, 60px) 0 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(20px, 5vw, 30px) !important;
  }

  .header__mobile-item {
    margin: 0 !important;
  }

  .header__mobile-link {
    color: #fff !important;
    text-decoration: none !important;
    font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    display: block !important;
    padding: clamp(8px, 2vw, 12px) 0 !important;
    transition: color 0.3s ease !important;
    border: none !important;
    background: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  .header__mobile-item--has-dropdown .header__mobile-dropdown-toggle {
    color: var(--color-primary) !important;
    font-size: clamp(1.2rem, 4vw, 1.6rem) !important;
    font-weight: 500 !important;
    background: none !important;
    border: none !important;
    padding: clamp(8px, 2vw, 12px) 0 !important;
    text-align: left !important;
    width: 100% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  .header__mobile-dropdown-icon::after {
    display: none !important;
  }

  .header__mobile-dropdown-toggle[aria-expanded="true"]
    .header__mobile-dropdown-icon::after {
    display: none !important;
  }

  .header__mobile-dropdown {
    list-style: none !important;
    padding: clamp(12px, 3vw, 16px) 0 0 clamp(16px, 4vw, 20px) !important;
    margin: 0 !important;
    display: none !important;
    flex-direction: column !important;
    gap: clamp(12px, 3vw, 16px) !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .header__mobile-dropdown-toggle[aria-expanded="true"]
    + .header__mobile-dropdown {
    display: flex !important;
  }

  .header__mobile-dropdown-link {
    color: #e0e0e0 !important;
    text-decoration: none !important;
    font-size: clamp(1rem, 3.5vw, 1.3rem) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    display: block !important;
    padding: clamp(6px, 1.5vw, 8px) 0 !important;
    transition: color 0.3s ease !important;
    text-shadow: none !important;
    box-shadow: none !important;
  }

  /* Mobile Menu Footer */
  .header__mobile-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: clamp(16px, 4vw, 24px) var(--mobile-header-padding) !important;
    background: #1e1e1e !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: clamp(8px, 2vw, 12px) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .header__mobile-footer-copyright {
    color: #fff !important;
    font-size: clamp(0.7rem, 2vw, 0.9rem) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  .header__mobile-footer-credit {
    color: #fff !important;
    font-size: clamp(0.7rem, 2vw, 0.9rem) !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    text-align: right !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .header__mobile-footer-credit--bold {
    font-weight: 700 !important;
    color: #fff !important;
  }
}

@media (max-width: 767px) {
  /* ================= MOBILE HERO SECTION ================= */

  .hero {
    padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3rem) !important;
    background-image: url("../../assets/images/hero/hero-bg.png") !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: scroll !important;
    background-position: center 75% !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .hero__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(1.5rem, 4vw, 2.5rem) !important;
    text-align: left !important;
    max-width: var(--mobile-container-max-width) !important;
    width: var(--mobile-container-width) !important;
    margin: 0 auto !important;
    padding: 0 !important; /* Container-width handles padding */
  }

  .hero__left,
  .hero__right {
    width: 100% !important;
    flex: 1 1 auto !important;
    align-items: flex-start !important; /* Left-aligned */
    text-align: left !important; /* Left-aligned */
  }

  .hero__left {
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
    order: 1 !important; /* Content first */
  }

  .hero__right {
    order: 2 !important; /* Form second */
    margin-top: 0 !important;
    display: flex !important;
    justify-content: center !important; /* Center the form card */
    align-items: flex-start !important;
  }

  /* ================= HERO TITLE - ENHANCED LEFT ALIGNMENT ================= */
  .hero__title {
    font-size: clamp(
      1.8rem,
      6vw,
      2.5rem
    ) !important; /* Larger, more prominent */
    line-height: 1.05 !important; /* Tighter line height */
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
    text-align: left !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
    letter-spacing: -0.02em !important;
  }

  /* ================= HERO DIVIDER - LEFT ALIGNMENT ================= */
  .hero__divider {
    justify-content: flex-start !important;
    margin-bottom: clamp(1.2rem, 3.5vw, 1.8rem) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .hero__divider-svg {
    max-width: clamp(
      250px,
      70vw,
      320px
    ) !important; /* More responsive sizing */
    width: auto !important; /* Auto width for left alignment */
    height: auto !important;
  }

  /* ================= HERO PARTNERS - LEFT ALIGNMENT ================= */
  .hero__subtitle-group {
    margin-top: clamp(1rem, 3vw, 1.5rem) !important;
    width: 100% !important;
    text-align: left !important; /* Left aligned */
  }

  .hero__subtitle {
    margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    text-align: left !important;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    font-weight: 600 !important;
    color: var(--color-secondary) !important;
  }

  .hero__partners {
    justify-content: space-between !important; /* Full width horizontal distribution */
    flex-wrap: nowrap !important; /* Single row */
    gap: clamp(0.5rem, 2vw, 1rem) !important; /* Smaller gaps for full width */
    margin-top: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    padding: 0 !important; /* Remove horizontal padding for full width */
    display: flex !important;
    align-items: center !important;
    width: 100% !important; /* Take full width */
  }

  .hero__partner-logo {
    max-height: clamp(40px, 10vw, 55px) !important; /* Larger sizing */
    max-width: clamp(75px, 20vw, 95px) !important; /* Larger sizing */
    object-fit: contain !important;
    filter: grayscale(0.2) opacity(0.9) !important; /* Subtle styling */
    transition: all 0.3s ease !important;
    flex: 1 !important; /* Equal width distribution */
  }

  /* ================= MOBILE HERO FORM ================= */

  .hero__form-card {
    position: relative !important;
    max-width: 100% !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 0 auto !important; /* Center the form */
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem) !important;
    background: #fff !important;
    border: clamp(12px, 3vw, 20px) solid #282828 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }

  .hero__form-card::before {
    content: "" !important;
    position: absolute !important;
    bottom: clamp(-10px, -2.5vw, -16px) !important;
    right: clamp(-10px, -2.5vw, -16px) !important;
    width: clamp(16px, 3.5vw, 20px) !important;
    height: clamp(16px, 3.5vw, 20px) !important;
    background-color: #ffffff !important;
    z-index: 2 !important;
  }

  .hero__form-card::after {
    content: "" !important;
    position: absolute !important;
    bottom: clamp(-10px, -2.5vw, -16px) !important;
    right: clamp(-20px, -5vw, -32px) !important;
    width: clamp(16px, 3.5vw, 20px) !important;
    height: clamp(16px, 3.5vw, 20px) !important;
    background-color: #282828 !important;
    z-index: 1 !important;
  }

  .hero__form-container {
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
  }

  /* ================= FORM TYPOGRAPHY ================= */
  .hero__form-title {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-transform: none !important;
  }

  .hero__form-desc {
    color: var(--color-secondary) !important;
    font-size: clamp(0.8rem, 2.2vw, 1rem) !important;
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    max-width: 85% !important;
    text-align: left !important;
  }

  /* ================= FORM INPUTS ================= */
  .hero__form {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    margin-top: clamp(1rem, 3vw, 1.5rem) !important;
    width: 100% !important;
  }

  .hero__form input,
  .hero__form textarea {
    background: #eaeaea !important;
    border: none !important;
    border-radius: 0 !important;
    padding: clamp(10px, 3vw, 14px) clamp(10px, 3vw, 14px) !important;
    font-size: clamp(0.85rem, 2.2vw, 1rem) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
    font-family: inherit !important;
    color: #333 !important;
  }

  .hero__form input:focus,
  .hero__form textarea:focus {
    outline: 2px solid var(--color-primary) !important;
    background: #fff !important;
  }

  .hero__form input::placeholder,
  .hero__form textarea::placeholder {
    color: #666 !important;
    font-weight: 400 !important;
  }

  .hero__form textarea {
    min-height: clamp(60px, 15vw, 80px) !important;
    resize: vertical !important;
  }

  /* ================= FORM BUTTON ================= */
  .hero__form-button {
    background: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: clamp(0.8rem, 2.2vw, 1rem) !important;
    border-radius: 0 !important;
    border: none !important;
    margin-top: clamp(0.5rem, 2vw, 1rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: clamp(10px, 3vw, 14px) clamp(16px, 4vw, 24px) !important;
    width: auto !important;
    align-self: flex-start !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }

  .hero__form-arrow {
    font-size: 1.2em !important;
    margin-left: 4px !important;
    transition: transform 0.2s ease-in-out !important;
    vertical-align: middle !important;
    display: inline-block !important;
  }

  /* ================= CORNER DECORATIONS ================= */
  /* Mobile form corner decorations */
  .hero__form-corner {
    position: absolute !important;
    width: clamp(20px, 5vw, 32px) !important;
    height: clamp(20px, 5vw, 32px) !important;
    border: clamp(3px, 1vw, 5px) solid #222 !important;
    background: transparent !important;
    z-index: 2 !important;
  }

  .hero__form-corner--tl {
    top: clamp(-3px, -1vw, -5px) !important;
    left: clamp(-3px, -1vw, -5px) !important;
    border-bottom: none !important;
    border-right: none !important;
  }

  .hero__form-corner--tr {
    top: clamp(-3px, -1vw, -5px) !important;
    right: clamp(-3px, -1vw, -5px) !important;
    border-bottom: none !important;
    border-left: none !important;
  }

  .hero__form-corner--bl {
    bottom: clamp(-3px, -1vw, -5px) !important;
    left: clamp(-3px, -1vw, -5px) !important;
    border-top: none !important;
    border-right: none !important;
  }

  /* Note: .hero__form-corner--br intentionally omitted to avoid interference with ::after pseudo-element */

  /* INNER CORNER SVG */
  .hero__form-inner-corner {
    /* Desktop: width: 60px; height: 46px; top: 0; right: 0 */
    /* Tablet: width: 55px; height: 42px; top: 12px; right: 4px */
    width: clamp(35px, 8vw, 60px) !important;
    height: clamp(25px, 6vw, 46px) !important;
    position: absolute !important;
    top: clamp(8px, 2.5vw, 12px) !important; /* Scaled from tablet 12px */
    right: clamp(2px, 1vw, 4px) !important; /* Scaled from tablet 4px */
    z-index: 3 !important;
    pointer-events: none !important;
  }

  /* OUTER CORNER ARROW */
  .hero__form-corner-arrow {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    transform: translate(50%, -50%) !important;
    width: clamp(25px, 6vw, 46px) !important;
    height: clamp(25px, 6vw, 46px) !important;
    z-index: 10 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 767px) {
  /* ================= MOBILE FEATURES SECTION ================= */

  .features {
    padding: var(--mobile-section-padding) 0 !important;
  }

  .features__top {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mobile-spacing-loose) !important;
    margin-bottom: var(--mobile-spacing-loose) !important;
  }

  .features__header {
    width: 100% !important;
    text-align: left !important;
  }

  .features__title {
    font-size: var(--mobile-title-primary) !important;
    margin-bottom: var(--mobile-spacing-normal) !important;
    text-align: left !important;
    width: 100% !important;
    max-width: none !important;
    line-height: 1.2 !important;
    /* Use same positioning approach as working tablet version */
    position: relative !important;
    display: inline-block !important;
  }

  /* ================= MOBILE FEATURES CORNER SVG ================= */
  /* OVERRIDE GLOBAL MOBILE SVG RULE - Use specific selector for higher CSS specificity */
  .features .features__title .features__corner-svg {
    /* Use EXACTLY the same inline-block approach as successful tablets */
    display: inline-block !important;
    width: clamp(18px, 4.5vw, 22px) !important;
    height: clamp(18px, 4.5vw, 22px) !important;
    margin-left: clamp(1px, 0.5vw, 3px) !important;
    margin-top: -2px !important;
    vertical-align: top !important;
    /* Ensure proper stacking and interaction on mobile */
    z-index: 2 !important;
    pointer-events: none !important;
    /* Reset any potential conflicts from global mobile rule */
    position: static !important; /* Override any absolute positioning */
  }

  .features__video {
    width: 100% !important;
    height: 250px !important; /* Optimized for mobile aspect ratio */
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .features__video-title {
    font-size: var(--mobile-title-tertiary) !important;
    bottom: 60px !important;
    left: 15px !important;
    right: 15px !important;
    z-index: 2 !important;
    position: absolute !important;
    color: #fff !important;
    margin: 0 !important;
  }

  .features__video-button {
    left: 15px !important;
    bottom: 15px !important;
    font-size: var(--mobile-button-text) !important;
    padding: 8px 16px !important;
    background: var(--color-secondary) !important;
    color: #fff !important;
    border-radius: 0 !important;
    z-index: 3 !important;
    position: absolute !important;
  }

  /* Mobile features grid */
  .features__bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: clamp(0.8rem, 3vw, 1.2rem) !important;
    width: 100% !important;
  }

  .features__card {
    height: clamp(160px, 40vw, 190px) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    color: white !important;
    text-decoration: none !important;
  }

  .features__card-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(
      to top,
      rgba(229, 57, 53, 0.95) 0%,
      rgba(229, 57, 53, 0) 60%
    ) !important;
    z-index: 1 !important;
  }

  .features__card-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
  }

  .features__card-title {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem) !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    position: relative !important;
    z-index: 2 !important;
    margin: 0 12px 8px 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: white !important;
  }

  .features__card-button {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
    padding: 6px 12px !important;
    background: var(--color-secondary) !important;
    color: #fff !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    z-index: 3 !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 12px 12px 12px !important;
    align-self: flex-start !important;
  }

  .features__button-arrow {
    width: 12px !important;
    height: 12px !important;
  }

  .features__card:hover .features__card-title {
    transform: none !important;
  }

  /* Remove hover effects on mobile video title */
  .features__video:hover .features__video-title {
    transform: none !important;
  }
}

@media (max-width: 767px) {
  /* ================= MOBILE ESTIMATOR CTA SECTION ================= */

  .estimator-cta {
    padding: clamp(3rem, 8vw, 4.5rem) 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background: #2d2d2d !important;
  }

  .estimator-cta__container {
    width: var(
      --mobile-estimator-container-width
    ) !important; /* INCREASED container width for maximum space */
    padding: 0 !important;
    text-align: left !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .estimator-cta__content {
    width: 100% !important;
    max-width: 100% !important;
    z-index: 2 !important;
    position: relative !important;
    padding-left: clamp(
      1rem,
      3vw,
      1.5rem
    ) !important; /* Added left side inner padding for mobile optimization */
    padding-right: clamp(
      1.5rem,
      4vw,
      2.5rem
    ) !important; /* REDUCED right padding to utilize extra space */
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .estimator-cta__title {
    font-size: clamp(
      1.2rem,
      4vw,
      1.6rem
    ) !important; /* INCREASED font size for better readability */
    margin-bottom: clamp(1.2rem, 4vw, 1.8rem) !important;
    line-height: 1.25 !important;
    text-align: left !important;
    color: #fff !important;
    position: relative !important;
    display: block !important;
    width: var(
      --mobile-estimator-title-width
    ) !important; /* USE new optimized title width variable */
    max-width: var(--mobile-estimator-title-width) !important;
  }

  /* ================= MOBILE ESTIMATOR CORNER SVG ================= */
  /* SOLUTION: Use EXACT SAME inline-block approach as working tablets */
  /* Copy tablet methodology exactly but with mobile-appropriate sizing */
  .estimator-cta .estimator-cta__title .estimator-cta__corner-svg {
    /* OVERRIDE GLOBAL MOBILE SVG RULE - Use specific selector for higher CSS specificity */
    display: inline-block !important;
    width: clamp(14px, 3.5vw, 18px) !important;
    height: clamp(14px, 3.5vw, 18px) !important;
    /* COPY EXACT TABLET POSITIONING - tiny margin, very close to text */
    margin-left: clamp(
      1px,
      0.3vw,
      2px
    ) !important; /* TINY margin like tablets */
    margin-top: -2px !important;
    vertical-align: top !important;
    /* Reset any absolute positioning */
    position: static !important;
    top: auto !important;
    right: auto !important;
    /* Ensure proper stacking and interaction on mobile */
    z-index: 3 !important;
    pointer-events: none !important;
    /* Override any inherited display settings */
    visibility: visible !important;
    opacity: 1 !important;
  }

  .estimator-cta__button {
    background: var(--color-primary) !important;
    color: #fff !important;
    width: auto !important;
    max-width: clamp(110px, 25vw, 130px) !important;
    margin: 0 !important;
    padding: clamp(6px, 2vw, 10px) clamp(6px, 1.5vw, 10px) !important;
    font-size: clamp(0.8rem, 2.2vw, 0.95rem) !important;
    min-height: clamp(32px, 8vw, 38px) !important;
    justify-content: center !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(2px, 0.5vw, 4px) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    align-self: flex-start !important;
    text-decoration: none !important;
    border: none !important;
  }

  .estimator-cta__button-arrow {
    width: clamp(14px, 3.5vw, 18px) !important; /* Increased arrow size */
    height: clamp(14px, 3.5vw, 18px) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .estimator-cta__image {
    position: absolute !important;
    top: 0 !important;
    right: -10% !important;
    width: 50% !important;
    height: 100% !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
  }

  .estimator-cta__svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: brightness(1.2) contrast(1.1) !important;
  }
}

/* ================= MOBILE ESTIMATOR BREAKPOINT OPTIMIZATION ================= */
/* Fine-tuned estimator spacing and sizing for different mobile screen sizes */

@media (max-width: 399px) {
  /* ================= VERY SMALL MOBILE SCREENS - COMPREHENSIVE CORNER SVG FIX ================= */
  /* Enhanced corner SVG for screens smaller than 400px (iPhone 12 Pro, 15 Pro, etc.) */

  .estimator-cta .estimator-cta__title .estimator-cta__corner-svg {
    /* Smaller size for very small screens */
    width: clamp(12px, 3vw, 16px) !important;
    height: clamp(12px, 3vw, 16px) !important;
    /* Fine-tuned positioning for smaller screens */
    top: clamp(-1px, -0.3vw, 0px) !important;
    right: clamp(-1px, -0.3vw, 1px) !important;
    /* Ensure maximum visibility on very small screens */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5 !important;
  }
}

@media (max-width: 375px) {
  /* Small phones - AGGRESSIVE width to force 3 lines */
  .estimator-cta__container {
    width: calc(
      100% - 8px
    ) !important; /* Maximum possible space on small screens */
  }

  .estimator-cta__title {
    width: clamp(
      280px,
      88vw,
      320px
    ) !important; /* MUCH MORE aggressive width */
    max-width: clamp(280px, 88vw, 320px) !important;
    font-size: clamp(
      1.05rem,
      4vw,
      1.25rem
    ) !important; /* Slightly smaller font for more text per line */
    line-height: 1.15 !important; /* Even tighter line height */
  }

  .estimator-cta__content {
    padding-left: clamp(
      0.8rem,
      2.5vw,
      1.2rem
    ) !important; /* Added left side inner padding for extra small screens */
    padding-right: clamp(
      0.5rem,
      2vw,
      1rem
    ) !important; /* Minimal right padding for maximum space */
  }

  /* Extra small screen corner SVG refinement */
  .estimator-cta .estimator-cta__title .estimator-cta__corner-svg {
    width: clamp(11px, 2.8vw, 15px) !important;
    height: clamp(11px, 2.8vw, 15px) !important;
    top: 0px !important;
    right: 0px !important;
  }
}

@media (min-width: 376px) and (max-width: 480px) {
  /* Medium phones - AGGRESSIVE 3-line optimization */
  .estimator-cta__container {
    width: calc(100% - 8px) !important; /* Maximum space */
  }

  .estimator-cta__title {
    width: clamp(320px, 86vw, 380px) !important; /* SIGNIFICANTLY increased */
    max-width: clamp(320px, 86vw, 380px) !important;
    font-size: clamp(1.15rem, 3.8vw, 1.4rem) !important;
    line-height: 1.2 !important; /* Tighter for 3 lines */
  }

  .estimator-cta__content {
    padding-left: clamp(
      0.8rem,
      2.5vw,
      1.2rem
    ) !important; /* Added left side inner padding for medium phones */
    padding-right: clamp(0.5rem, 2vw, 1.5rem) !important;
  }
}

@media (min-width: 481px) and (max-width: 600px) {
  /* Large phones/phablets - MAXIMUM width for 3 lines */
  .estimator-cta__title {
    width: clamp(380px, 84vw, 450px) !important; /* MUCH larger width */
    max-width: clamp(380px, 84vw, 450px) !important;
    font-size: clamp(1.25rem, 3.6vw, 1.55rem) !important;
    line-height: 1.2 !important;
  }

  .estimator-cta__content {
    padding-left: clamp(
      1rem,
      3vw,
      1.5rem
    ) !important; /* Added left side inner padding for large phones */
    padding-right: clamp(1rem, 3vw, 2rem) !important;
  }
}

@media (min-width: 601px) and (max-width: 767px) {
  /* Small tablets/large phablets - MAXIMUM horizontal space for 3 lines */
  .estimator-cta__title {
    width: clamp(420px, 82vw, 500px) !important; /* VERY large width */
    max-width: clamp(420px, 82vw, 500px) !important;
    font-size: clamp(1.35rem, 3.4vw, 1.65rem) !important;
    line-height: 1.2 !important;
  }

  .estimator-cta__content {
    padding-left: clamp(
      1.2rem,
      3.5vw,
      1.8rem
    ) !important; /* Added left side inner padding for larger mobile screens */
    padding-right: clamp(1.5rem, 4vw, 2.5rem) !important;
  }
}

@media (max-width: 767px) {
  /* ================= MOBILE ABOUT SECTION ================= */

  .about {
    padding: 0 !important;
    height: clamp(400px, 100vw, 600px) !important;
    background-color: #f1f1f1 !important;
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  /* Image positioned as background/base layer */
  .about__image {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }

  .about__image img {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: bottom center !important;
  }

  /* Container and content overlaid on top */
  .about .container {
    position: relative !important;
    z-index: 2 !important;
    width: var(--mobile-container-width) !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding-top: clamp(2rem, 8vw, 3rem) !important;
  }

  .about__content {
    width: 100% !important;
    max-width: clamp(280px, 75vw, 350px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .about__text {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  .about__text .section__title {
    font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: clamp(1rem, 4vw, 1.5rem) !important;
    text-align: left !important;
    position: relative !important;
    display: inline-block !important;
    padding-right: clamp(2rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
    text-transform: lowercase !important;
  }

  /* .about__corner-svg - REMOVED: Conflicted with mobile optimization system */

  .about__text p {
    font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
    line-height: 1.5 !important;
    margin-bottom: clamp(1.5rem, 5vw, 2rem) !important;
    text-align: left !important;
    color: #333 !important;
    font-weight: 400 !important;
  }

  .about__button {
    background-color: var(--color-primary) !important;
    color: #fff !important;
    padding: clamp(10px, 3vw, 14px) clamp(18px, 5vw, 24px) !important;
    font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: clamp(6px, 2vw, 10px) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
  }

  .about__button-arrow {
    width: clamp(14px, 3.5vw, 18px) !important;
    height: clamp(14px, 3.5vw, 18px) !important;
  }
}

@media (max-width: 767px) {
  /* ================= MOBILE QUALITY & INSIGHTS SECTIONS ================= */

  .quality,
  .insights {
    padding: var(--mobile-section-padding) 0 !important;
  }

  /* ================= MOBILE QUALITY SECTION ================= */
  /* HIDE DEFAULT TITLE ON MOBILE - Show mobile-only version */
  .quality__content .section__title:not(.quality__title--mobile-only) {
    display: none !important; /* HIDE default desktop/tablet title on mobile */
  }

  /* SHOW AND STYLE MOBILE-ONLY TITLE */
  .quality__content .quality__title--mobile-only {
    display: block !important; /* SHOW mobile-only title */
    font-size: clamp(1.4rem, 4.5vw, 1.8rem) !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    margin-bottom: clamp(1.5rem, 5vw, 2rem) !important;
    text-align: left !important;
    line-height: 1.2 !important;
    position: relative !important;
    width: clamp(300px, 80vw, 380px) !important;
    max-width: clamp(300px, 80vw, 380px) !important;
    padding-right: clamp(1rem, 3vw, 1.5rem) !important;
  }

  /* ================= MOBILE-ONLY QUALITY CORNER SVG ================= */
  /* SOLUTION: Use EXACT SAME inline-block approach as working estimator section */
  /* Copy estimator methodology exactly but with quality-specific sizing */
  body
    .quality
    .quality__content
    .quality__title--mobile-only
    .quality__corner-svg--mobile-only {
    /* OVERRIDE GLOBAL MOBILE SVG RULE - Use maximum specificity selector */
    display: inline-block !important;
    width: clamp(14px, 3.5vw, 18px) !important;
    height: clamp(14px, 3.5vw, 18px) !important;
    /* COPY EXACT ESTIMATOR POSITIONING - tiny margin, very close to text */
    margin-left: clamp(
      1px,
      0.3vw,
      2px
    ) !important; /* TINY margin like estimator */
    margin-top: -2px !important;
    vertical-align: top !important;
    /* Reset any absolute positioning */
    position: static !important;
    top: auto !important;
    right: auto !important;
    /* Ensure proper stacking and interaction on mobile */
    z-index: 3 !important;
    pointer-events: none !important;
    /* Override any inherited display settings */
    visibility: visible !important;
    opacity: 1 !important;
  }

  .quality__content p {
    font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
    line-height: 1.5 !important;
    margin-bottom: clamp(1rem, 4vw, 1.5rem) !important;
    text-align: left !important;
    color: #666 !important;
    font-weight: 400 !important;
  }

  /* Mobile Responsive for Quality Stats */
  @media (max-width: 767px) {
    .quality__stats-table {
      margin: 2rem auto 0;
      border-radius: 6px;
    }

    .quality__stats-row {
      flex-direction: column;
    }

    .quality__stats-cell {
      padding: 1.5rem 1rem;
    }

    .quality__stats-cell:not(:last-child)::after {
      display: none;
    }

    .quality__stats-cell:not(:last-child) {
      border-bottom: 1px solid #e0e0e0;
    }

    .quality__stats-label {
      font-size: 0.8rem;
    }

    .quality__stats-number {
      font-size: 2rem;
    }
  }

  @media (max-width: 480px) {
    .quality__stats-cell {
      padding: 1.25rem 0.75rem;
    }

    .quality__stats-label {
      font-size: 0.75rem;
    }

    .quality__stats-number {
      font-size: 1.75rem;
    }
  }

  /* Tablet Responsive for Quality Stats */
  @media (min-width: 768px) and (max-width: 900px) {
    .quality__stats-table {
      max-width: 650px;
      margin: 2.5rem auto 0;
    }

    .quality__stats-cell {
      padding: 1.5rem 1rem;
    }

    .quality__stats-label {
      font-size: 0.6rem;
    }

    .quality__stats-number {
      font-size: 1.8rem;
    }
  }

  @media (min-width: 901px) and (max-width: 1099px) {
    .quality__stats-table {
      max-width: 700px;
      margin: 2.5rem auto 0;
    }

    .quality__stats-cell {
      padding: 1.75rem 1.25rem;
    }

    .quality__stats-label {
      font-size: 0.85rem;
    }

    .quality__stats-number {
      font-size: 2.2rem;
    }
  }

  /* ================= MOBILE INSIGHTS SECTION ================= */
  /* Enhanced insights container for better width utilization */
  .insights .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: clamp(0.8rem, 2vw, 1.2rem) !important;
    padding-right: clamp(0.8rem, 2vw, 1.2rem) !important;
  }

  .insights .section__title {
    font-size: var(--mobile-title-primary) !important;
    margin-bottom: var(--mobile-spacing-loose) !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    /* Enhanced horizontal spacing for title container */
    padding-left: clamp(0.5rem, 1.5vw, 1rem) !important;
    padding-right: clamp(0.5rem, 1.5vw, 1rem) !important;
    line-height: 1.1 !important;
    word-spacing: -0.05em !important;
    letter-spacing: -0.01em !important;
  }

  /* Mobile insights grid - single column stack */
  .insights__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.8rem, 3vw, 1.2rem) !important;
    width: 100% !important;
  }

  .insight-card {
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    width: 100% !important;
    min-height: clamp(
      120px,
      32vw,
      150px
    ) !important; /* Compact height for horizontal layout */
  }

  .insight-card__image {
    width: clamp(
      35%,
      38vw,
      40%
    ) !important; /* Proportional width for horizontal layout */
    min-width: clamp(
      100px,
      25vw,
      140px
    ) !important; /* Minimum width to prevent too narrow */
    height: auto !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  .insight-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  .insight-card__content {
    flex: 1 !important; /* Take remaining space */
    padding: clamp(0.6rem, 2.5vw, 1rem) !important;
    background-color: #232323 !important;
    color: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .insight-card__title {
    color: #fff !important;
    font-size: clamp(0.8rem, 2.2vw, 1rem) !important;
    margin-bottom: clamp(
      0.3rem,
      1.5vw,
      0.5rem
    ) !important; /* Tighter spacing */
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  .insight-card__desc {
    color: #e0e0e0 !important;
    font-size: clamp(0.7rem, 1.8vw, 0.85rem) !important;
    line-height: 1.3 !important; /* Tighter line height */
    margin-bottom: clamp(0.4rem, 2vw, 0.6rem) !important;
    flex-grow: 1 !important;
  }

  .insight-card__button {
    display: inline-flex !important;
    align-items: center !important;
    background-color: var(--color-primary) !important;
    color: #fff !important;
    font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
    font-weight: 500 !important;
    padding: clamp(4px, 1.5vw, 6px) clamp(8px, 2.5vw, 12px) !important; /* Smaller padding */
    border-radius: 0 !important;
    text-decoration: none !important;
    align-self: flex-start !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
  }

  .insight-card__button-arrow {
    margin-left: clamp(4px, 1.5vw, 6px) !important; /* Tighter arrow spacing */
    width: clamp(
      10px,
      2.5vw,
      14px
    ) !important; /* Smaller than mobile-svg-small */
    height: clamp(10px, 2.5vw, 14px) !important;
  }

  /* ================= MOBILE CLIENTS SECTION ================= */

  .clients {
    padding: clamp(2rem, 5vw, 3rem) 0 !important;
    background-color: #fafafa !important;
  }

  .clients__content {
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 3vw, 1.5rem) !important;
    text-align: left !important;
    max-width: none !important;
  }

  .clients__content .section__title {
    font-size: var(--mobile-title-primary) !important;
    margin-bottom: var(--mobile-spacing-loose) !important;
    text-align: left !important;
    color: var(--color-primary) !important;
    line-height: 1.2 !important;
  }

  /* Clients corner SVG mobile optimization */
  .clients__content .clients__corner-svg {
    display: inline-block !important;
    width: clamp(14px, 3.5vw, 18px) !important;
    height: clamp(14px, 3.5vw, 18px) !important;
    margin-left: clamp(1px, 0.3vw, 2px) !important;
    margin-top: -2px !important;
    vertical-align: top !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .clients__content p {
    font-size: clamp(0.9rem, 3vw, 1.1rem) !important;
    line-height: 1.5 !important;
    margin-bottom: clamp(1rem, 4vw, 1.5rem) !important;
    text-align: left !important;
    color: #666 !important;
    font-weight: 400 !important;
  }
}

/* ================= MOBILE INSIGHTS RESPONSIVE TITLE OPTIMIZATION ================= */
/* Optimized font sizes for insights title across different mobile screen sizes */

/* Screens smaller than 430px - smaller text for very compact phones */
@media (max-width: 429px) {
  .insights .section__title {
    font-size: clamp(1.4rem, 5.2vw, 1.8rem) !important;
    line-height: 1.05 !important;
    margin-bottom: clamp(1rem, 4vw, 1.5rem) !important;
  }

  .insights .container {
    padding-left: clamp(0.6rem, 1.8vw, 1rem) !important;
    padding-right: clamp(0.6rem, 1.8vw, 1rem) !important;
  }
}

/* Extra small screens (320px - 375px) - iPhone SE, older models */
@media (max-width: 375px) {
  .insights .section__title {
    font-size: clamp(1.2rem, 4.8vw, 1.6rem) !important;
    line-height: 1.02 !important;
    padding-left: clamp(0.3rem, 1.2vw, 0.8rem) !important;
    padding-right: clamp(0.3rem, 1.2vw, 0.8rem) !important;
    word-spacing: -0.08em !important;
    letter-spacing: -0.02em !important;
  }

  .insights .container {
    padding-left: clamp(0.5rem, 1.5vw, 0.8rem) !important;
    padding-right: clamp(0.5rem, 1.5vw, 0.8rem) !important;
  }
}

/* Small screens (376px - 414px) - iPhone 12 Mini, etc. */
@media (min-width: 376px) and (max-width: 414px) {
  .insights .section__title {
    font-size: clamp(1.3rem, 4.9vw, 1.7rem) !important;
    line-height: 1.03 !important;
    padding-left: clamp(0.4rem, 1.3vw, 0.9rem) !important;
    padding-right: clamp(0.4rem, 1.3vw, 0.9rem) !important;
    word-spacing: -0.06em !important;
    letter-spacing: -0.015em !important;
  }
}

/* Medium compact screens (415px - 429px) - Just below 430px threshold */
@media (min-width: 415px) and (max-width: 429px) {
  .insights .section__title {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    line-height: 1.04 !important;
    padding-left: clamp(0.45rem, 1.4vw, 0.95rem) !important;
    padding-right: clamp(0.45rem, 1.4vw, 0.95rem) !important;
    word-spacing: -0.04em !important;
    letter-spacing: -0.01em !important;
  }
}

/* Corner SVG optimization for insights title */
@media (max-width: 429px) {
  .insights__corner-svg {
    width: clamp(12px, 3.2vw, 16px) !important;
    height: clamp(12px, 3.2vw, 16px) !important;
    margin-left: clamp(2px, 0.8vw, 4px) !important;
  }
}

@media (max-width: 375px) {
  .insights__corner-svg {
    width: clamp(10px, 2.8vw, 14px) !important;
    height: clamp(10px, 2.8vw, 14px) !important;
    margin-left: clamp(1px, 0.6vw, 3px) !important;
  }
}

/* ================= MOBILE QUALITY BREAKPOINT OPTIMIZATION ================= */
/* Fine-tuned quality corner SVG sizing for different mobile screen sizes */

@media (max-width: 399px) {
  /* ================= VERY SMALL MOBILE SCREENS - COMPREHENSIVE CORNER SVG FIX ================= */
  /* Enhanced corner SVG for screens smaller than 400px (iPhone 12 Pro, 15 Pro, etc.) */

  body
    .quality
    .quality__content
    .quality__title--mobile-only
    .quality__corner-svg--mobile-only {
    /* Smaller size for very small screens */
    width: clamp(12px, 3vw, 16px) !important;
    height: clamp(12px, 3vw, 16px) !important;
    /* Ensure maximum visibility on very small screens */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 5 !important;
  }
}

@media (max-width: 375px) {
  /* Extra small screen corner SVG refinement */
  body
    .quality
    .quality__content
    .quality__title--mobile-only
    .quality__corner-svg--mobile-only {
    width: clamp(11px, 2.8vw, 15px) !important;
    height: clamp(11px, 2.8vw, 15px) !important;
  }
}

@media (min-width: 376px) and (max-width: 480px) {
  /* Medium phones - Optimized corner SVG sizing */
  body
    .quality
    .quality__content
    .quality__title--mobile-only
    .quality__corner-svg--mobile-only {
    width: clamp(13px, 3.2vw, 17px) !important;
    height: clamp(13px, 3.2vw, 17px) !important;
  }
}

@media (min-width: 481px) and (max-width: 600px) {
  /* Large phones/phablets - Larger corner SVG */
  body
    .quality
    .quality__content
    .quality__title--mobile-only
    .quality__corner-svg--mobile-only {
    width: clamp(15px, 3.6vw, 19px) !important;
    height: clamp(15px, 3.6vw, 19px) !important;
  }
}

@media (min-width: 601px) and (max-width: 767px) {
  /* Small tablets/large phablets - Maximum mobile corner SVG size */
  body
    .quality
    .quality__content
    .quality__title--mobile-only
    .quality__corner-svg--mobile-only {
    width: clamp(17px, 3.8vw, 21px) !important;
    height: clamp(17px, 3.8vw, 21px) !important;
  }
}

@media (max-width: 767px) {
  /* ================= MOBILE FOOTER OPTIMIZATION ================= */

  .footer__main {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: clamp(1.2rem, 3vw, 2rem) clamp(1rem, 3vw, 1.5rem)
      clamp(1.2rem, 3vw, 2rem) !important;
    gap: clamp(1.2rem, 3vw, 1.8rem) !important;
  }

  /* Top section - Logo and description */
  .footer__brand {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 0 !important;
  }

  .footer__logo {
    width: clamp(100px, 30vw, 140px) !important;
    margin: 0 0 clamp(0.6rem, 2vw, 1rem) 0 !important;
    align-self: flex-start !important;
  }

  .footer__divider-svg {
    width: clamp(100px, 25vw, 130px) !important;
    height: auto !important;
    margin-bottom: clamp(0.6rem, 2vw, 1rem) !important;
  }

  .footer__desc {
    font-size: clamp(0.7rem, 1.8vw, 0.85rem) !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    color: #fff !important;
  }

  /* Middle section - Contact/Social + About Us in two columns */
  .footer__contact-social {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(1.2rem, 3.5vw, 1.8rem) !important;
  }

  /* Left side of middle - Contact and Social */
  .footer__contact-social-wrapper {
    flex: 1 1 60% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.6rem, 2vw, 0.8rem) !important;
  }

  .footer__contact {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.3rem, 1vw, 0.5rem) !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    width: 100% !important;
  }

  .footer__contact > div {
    text-align: left !important;
  }

  .footer__contact a {
    font-size: clamp(0.8rem, 2vw, 0.9rem) !important;
    color: #fff !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    display: inline !important;
  }

  .footer__contact div:last-child {
    font-size: clamp(0.7rem, 1.8vw, 0.8rem) !important;
    color: #fff !important;
    line-height: 1.4 !important;
    margin-top: clamp(0.3rem, 1vw, 0.5rem) !important;
  }

  .footer__social {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: clamp(0.6rem, 2vw, 0.8rem) !important;
    margin: 0 !important;
  }

  .footer__social-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(24px, 6vw, 28px) !important;
    height: clamp(24px, 6vw, 28px) !important;
    transition: transform 0.3s ease !important;
  }

  .footer__social-link svg {
    width: 100% !important;
    height: 100% !important;
  }

  /* Right side of middle - About Us */
  .footer__contact-social .footer__col {
    flex: 1 1 40% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.3rem, 1vw, 0.5rem) !important;
    margin-top: 0 !important;
  }

  /* Bottom section - Products & Services + Support in two columns */
  .footer__links {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: clamp(1.2rem, 3.5vw, 1.8rem) !important;
  }

  .footer__links .footer__col {
    flex: 1 1 50% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(0.3rem, 1vw, 0.5rem) !important;
  }

  .footer__col-title {
    font-size: clamp(0.85rem, 2.2vw, 1rem) !important;
    margin-bottom: 0 !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-align: left !important;
  }

  .footer__link {
    font-size: clamp(0.75rem, 2vw, 0.85rem) !important;
    line-height: 1.4 !important;
    display: block !important;
    padding: clamp(1px, 0.5vw, 3px) 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: left !important;
    transition: color 0.3s ease !important;
  }

  /* Bottom section - Copyright left, Credit right */
  .footer__bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(0.5rem, 2vw, 1rem) !important;
    padding: clamp(0.8rem, 2.5vw, 1.2rem) var(--mobile-spacing-normal)
      clamp(0.8rem, 2.5vw, 1.2rem) !important;
    text-align: left !important;
    font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-wrap: nowrap !important; /* Prevent wrapping to maintain left-right layout */
    min-height: clamp(2rem, 6vw, 3rem) !important; /* Ensure adequate height */
  }

  .footer__copyright {
    color: #fff !important;
    font-weight: 400 !important;
    text-align: left !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    margin-right: auto !important; /* Push to far left */
  }

  .footer__credit {
    color: #fff !important;
    font-weight: 400 !important;
    text-align: right !important;
    flex-shrink: 1 !important;
    white-space: nowrap !important; /* Prevent text wrapping */
    margin-left: auto !important; /* Push to far right */
    max-width: 60% !important; /* Prevent excessive width on small screens */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* Handle overflow gracefully */
  }

  .footer__credit--bold {
    font-weight: 700 !important;
    color: #fff !important;
  }
}

/* ================= MOBILE FOOTER BREAKPOINT OPTIMIZATIONS ================= */

/* Small Mobile Devices (320px - 480px) - Compact layout */
@media (max-width: 480px) {
  .footer__main {
    flex-direction: column !important;
    gap: clamp(1.5rem, 4vw, 2rem) !important;
    padding: clamp(1.2rem, 4vw, 2rem) var(--mobile-spacing-normal)
      var(--mobile-spacing-normal) !important;
  }

  .footer__brand {
    flex: 1 1 100% !important;
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
  }

  .footer__contact-social {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(1rem, 3vw, 1.5rem) !important;
  }

  .footer__contact-social-wrapper {
    grid-column: unset !important;
  }

  .footer__contact-social .footer__col {
    grid-column: unset !important;
  }

  .footer__logo {
    width: clamp(100px, 30vw, 140px) !important;
  }

  .footer__divider-svg {
    width: clamp(100px, 28vw, 130px) !important;
  }

  .footer__desc {
    font-size: clamp(0.65rem, 2vw, 0.8rem) !important;
  }

  .footer__contact {
    gap: clamp(0.6rem, 2vw, 1rem) !important;
    margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem) !important;
  }

  .footer__contact a {
    font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
  }

  .footer__contact div:last-child {
    font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
  }

  .footer__social {
    gap: clamp(0.6rem, 2vw, 1rem) !important;
  }

  .footer__social-link {
    width: clamp(24px, 6vw, 28px) !important;
    height: clamp(24px, 6vw, 28px) !important;
  }

  .footer__links {
    flex: 1 1 100% !important;
    gap: clamp(0.8rem, 2.5vw, 1.2rem) clamp(0.6rem, 2vw, 1rem) !important;
  }

  .footer__col-title {
    font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
    margin-bottom: clamp(0.4rem, 1.2vw, 0.6rem) !important;
  }

  .footer__link {
    font-size: clamp(0.65rem, 1.8vw, 0.8rem) !important;
    padding: clamp(1px, 0.5vw, 3px) 0 !important;
  }

  .footer__bottom {
    flex-direction: row !important; /* Maintain horizontal layout even on small screens */
    text-align: left !important;
    gap: clamp(0.3rem, 1vw, 0.5rem) !important;
    padding: clamp(0.6rem, 2vw, 1rem) var(--mobile-spacing-normal)
      clamp(0.6rem, 2vw, 1rem) !important;
    min-height: clamp(
      1.8rem,
      5vw,
      2.5rem
    ) !important; /* Slightly smaller for ultra-compact screens */
  }

  .footer__copyright {
    text-align: left !important; /* Keep left aligned */
    font-size: clamp(
      0.6rem,
      1.6vw,
      0.75rem
    ) !important; /* Slightly smaller text for ultra-compact */
    flex: 0 0 auto !important; /* Don't grow, don't shrink, size based on content */
  }

  .footer__credit {
    text-align: right !important; /* Keep right aligned */
    font-size: clamp(
      0.6rem,
      1.6vw,
      0.75rem
    ) !important; /* Slightly smaller text for ultra-compact */
    max-width: 55% !important; /* Slightly less space on ultra-small screens */
    flex: 1 1 auto !important; /* Allow to grow and shrink as needed */
  }
}

/* Medium Mobile Devices (481px - 600px) - Balanced layout */
@media (min-width: 481px) and (max-width: 600px) {
  .footer__main {
    gap: clamp(0.8rem, 2.5vw, 1.2rem) !important;
  }

  .footer__brand {
    flex: 1 1 30% !important;
  }

  .footer__contact-social {
    flex: 1 1 40% !important;
  }

  .footer__links {
    flex: 1 1 30% !important;
  }

  .footer__logo {
    width: clamp(130px, 32vw, 150px) !important;
  }

  .footer__divider-svg {
    width: clamp(110px, 28vw, 140px) !important;
  }
}

/* Large Mobile Devices (601px - 767px) - Spacious layout */
@media (min-width: 601px) and (max-width: 767px) {
  .footer__main {
    gap: clamp(1rem, 2.5vw, 1.5rem) !important;
  }

  .footer__brand {
    flex: 1 1 30% !important;
  }

  .footer__contact-social {
    flex: 1 1 40% !important;
  }

  .footer__links {
    flex: 1 1 30% !important;
  }

  .footer__logo {
    width: clamp(140px, 33vw, 160px) !important;
  }

  .footer__divider-svg {
    width: clamp(120px, 29vw, 150px) !important;
  }

  .footer__desc {
    font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
  }

  .footer__contact a {
    font-size: clamp(0.8rem, 2.2vw, 0.95rem) !important;
  }

  .footer__contact div:last-child {
    font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
  }

  .footer__col-title {
    font-size: clamp(0.85rem, 2.2vw, 1rem) !important;
  }

  .footer__link {
    font-size: clamp(0.75rem, 2vw, 0.9rem) !important;
  }
}

/* ================= MOBILE BREAKPOINT REFINEMENTS ================= */

/* Small Mobile Devices (320px - 480px) - Ultra-compact optimization */
@media (max-width: 480px) {
  :root {
    /* Ultra-compact mobile container system */
    --mobile-container-width: calc(
      100% - 30px
    ) !important; /* 15px padding each side */
    --mobile-section-padding: clamp(
      1.8rem,
      5vw,
      2.8rem
    ) !important; /* Better spacing */

    --mobile-title-primary: clamp(1.5rem, 6vw, 2rem) !important;
    --mobile-title-secondary: clamp(1.2rem, 4.5vw, 1.7rem) !important;
    --mobile-text-base: clamp(0.85rem, 2.5vw, 1rem) !important;
    --mobile-spacing-normal: clamp(0.8rem, 2.5vw, 1.2rem) !important;

    /* Ultra-compact header variables */
    --mobile-header-height: clamp(55px, 14vw, 65px) !important;
    --mobile-header-padding: clamp(12px, 3.5vw, 16px) !important;
    --mobile-logo-height: clamp(24px, 6vw, 30px) !important;
    --mobile-menu-icon-size: clamp(20px, 5.5vw, 26px) !important;
  }

  /* Ultra-compact mobile menu footer */
  .header__mobile-footer {
    padding: clamp(12px, 3vw, 16px) var(--mobile-header-padding) !important;
  }

  .hero__title {
    font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    line-height: 1.05 !important;
  }

  .hero__divider-svg {
    max-width: clamp(200px, 60vw, 260px) !important;
  }

  .hero__partners {
    flex-wrap: wrap !important;
    gap: clamp(0.6rem, 2vw, 1rem) !important;
    padding: 0 0.5rem !important;
  }
  .hero__partners-2 {
    flex-wrap: wrap !important;
    gap: clamp(0.6rem, 2vw, 1rem) !important;
    padding: 0 0.5rem !important;
  }

  .hero__partner-logo {
    max-height: clamp(30px, 7vw, 38px) !important;
    max-width: clamp(55px, 15vw, 70px) !important;
  }

  .hero__form-card {
    padding: clamp(1.2rem, 4vw, 1.8rem) clamp(0.8rem, 3vw, 1.2rem) !important;
    margin-top: clamp(1.2rem, 4vw, 2rem) !important;
  }

  .hero__form input,
  .hero__form textarea {
    padding: clamp(10px, 3vw, 14px) clamp(10px, 3vw, 14px) !important;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
  }

  .hero__form-button {
    min-height: clamp(44px, 12vw, 52px) !important;
    font-size: clamp(0.85rem, 2.5vw, 0.95rem) !important;
  }

  /* Ultra-compact features grid - single column */
  .features__bottom {
    grid-template-columns: 1fr !important;
    gap: clamp(0.8rem, 3vw, 1.2rem) !important;
  }

  .features__card {
    height: clamp(140px, 35vw, 170px) !important;
  }

  /* Ultra-compact footer */
  .footer__logo {
    width: clamp(120px, 30vw, 150px) !important;
  }

  .footer__main {
    padding: clamp(1.2rem, 4vw, 1.8rem) clamp(0.8rem, 3vw, 1.2rem)
      clamp(0.8rem, 3vw, 1.2rem) !important;
  }
}

/* Medium Mobile Devices (481px - 600px) - Balanced mobile experience */
@media (min-width: 481px) and (max-width: 600px) {
  :root {
    --mobile-container-width: calc(
      100% - 40px
    ) !important; /* 20px padding each side */
    --mobile-section-padding: clamp(2rem, 4.5vw, 2.8rem) !important;

    /* Medium mobile header variables */
    --mobile-header-height: clamp(60px, 14vw, 68px) !important;
    --mobile-header-padding: clamp(16px, 4vw, 18px) !important;
    --mobile-logo-height: clamp(28px, 6.5vw, 32px) !important;
    --mobile-menu-icon-size: clamp(22px, 5.5vw, 26px) !important;
  }

  .hero__form-card {
    padding: clamp(1.4rem, 4vw, 1.8rem) clamp(1rem, 3vw, 1.4rem) !important;
    max-width: 95% !important;
  }

  .hero__partner-logo {
    max-height: clamp(36px, 8vw, 42px) !important;
    max-width: clamp(65px, 16vw, 75px) !important;
  }

  /* 2-column features grid maintained */
  .features__card {
    height: clamp(160px, 38vw, 180px) !important;
  }
}

/* Large Mobile Devices (601px - 767px) - Spacious mobile, preparing for tablet */
@media (min-width: 601px) and (max-width: 767px) {
  :root {
    --mobile-container-width: calc(
      100% - 50px
    ) !important; /* 25px padding each side */
    --mobile-section-padding: clamp(2.2rem, 4vw, 3.2rem) !important;

    /* Large mobile header variables */
    --mobile-header-height: clamp(65px, 15vw, 70px) !important;
    --mobile-header-padding: clamp(18px, 4vw, 20px) !important;
    --mobile-logo-height: clamp(30px, 7vw, 35px) !important;
    --mobile-menu-icon-size: clamp(24px, 6vw, 28px) !important;
  }

  .hero__container {
    gap: clamp(1.8rem, 4vw, 2.5rem) !important;
  }

  .hero__form-card {
    padding: clamp(1.6rem, 4vw, 2.2rem) clamp(1.2rem, 3vw, 1.6rem) !important;
    max-width: 90% !important;
    margin-top: clamp(1.8rem, 4vw, 2.5rem) !important;
  }

  .hero__partner-logo {
    max-height: clamp(40px, 8vw, 46px) !important;
    max-width: clamp(70px, 17vw, 82px) !important;
  }

  /* Larger features cards */
  .features__card {
    height: clamp(180px, 42vw, 200px) !important;
  }

  /* Enhanced insights layout */
  .insight-card__image {
    height: clamp(160px, 38vw, 190px) !important;
  }
}

/* ================= MOBILE LAYOUT PROTECTION ================= */
/* CRITICAL: Ensure mobile layout is never broken by conflicting styles */
@media (max-width: 767px) {
  body .hero__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  body .hero__left,
  body .hero__right {
    width: 100% !important;
    align-items: flex-start !important; /* Left aligned */
  }

  body .hero__right {
    align-items: center !important; /* Keep form centered */
  }

  body .hero__title {
    text-align: left !important;
  }

  body .hero__divider {
    justify-content: flex-start !important;
  }

  body .hero__subtitle {
    text-align: left !important;
  }

  body .hero__partners {
    justify-content: space-between !important; /* Full width horizontal distribution */
    flex-wrap: nowrap !important; /* Single row */
    gap: clamp(0.5rem, 2vw, 1rem) !important; /* Smaller gaps for full width */
    margin-top: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    padding: 0 !important; /* Remove horizontal padding for full width */
    display: flex !important;
    align-items: center !important;
    width: 100% !important; /* Take full width */
  }

  body .hero__partners-2 {
    justify-content: normal !important; /* Full width horizontal distribution */
    flex-wrap: nowrap !important; /* Single row */
    gap: clamp(0.5rem, 2vw, 1rem) !important; /* Smaller gaps for full width */
    margin-top: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    padding: 0 !important; /* Remove horizontal padding for full width */
    display: flex !important;
    align-items: center !important;
    width: 100% !important; /* Take full width */
  }

  body .hero__form-card {
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* Force mobile features grid layout */
  body .features__bottom {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
  }

  /* Force mobile section titles to be left-aligned */
  body .features__title {
    text-align: left !important;
  }

  /* Hide desktop title, show mobile title on mobile/tablet */
  body .features__title--desktop {
    display: none !important;
  }

  body .features__title--mobile {
    display: inline-block !important;
  }

  /* Force products-demand title to be centered */
  body .products-demand__title {
    text-align: center !important;
  }

  /* Force estimator CTA to be left-aligned on mobile */
  body .estimator-cta__container {
    text-align: left !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  body .estimator-cta__content {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body .estimator-cta__title {
    text-align: left !important;
    display: block !important;
    width: 100% !important;
  }

  /* Prevent horizontal overflow */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ================= END MOBILE RESPONSIVE STYLES ================= */

/* ================= DESKTOP LARGE SCREEN OPTIMIZATIONS ================= */

/* Estimator CTA Section Responsive Styles */
@media (max-width: 1400px) {
  .estimator-cta__content {
    width: 65%;
  }
}

/* Products in Demand Section Responsive Styles */
@media (max-width: 1400px) {
  .carousel__slide {
    width: calc(33.333% - 20px);
    min-width: 240px;
  }
}

/* ================= END HOMEPAGE RESPONSIVE STYLES ================= */

/* ================= PRODUCTS IN DEMAND - OPTIMIZED MOBILE RESPONSIVE ================= */

@media (max-width: 767px) {
  .products-demand {
    padding: clamp(2.5rem, 6vw, 3.5rem) 0 !important;
    background: #fff !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .products-demand__title {
    font-size: clamp(1.8rem, 5.5vw, 2.4rem) !important;
    margin-bottom: clamp(2rem, 5vw, 3rem) !important;
    text-align: center !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--color-primary) !important;
    line-height: 1.2 !important;
    position: relative !important;
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: clamp(2rem, 5vw, 3rem) !important;
  }

  /* ================= MOBILE PRODUCTS DEMAND CORNER SVG ================= */
  /* Use EXACT SAME inline-block approach as working tablets and features */
  .products-demand .products-demand__title .products-demand__corner-svg {
    /* OVERRIDE GLOBAL MOBILE SVG RULE - Use specific selector for higher CSS specificity */
    display: inline-block !important;
    width: clamp(15px, 4vw, 20px) !important;
    height: clamp(15px, 4vw, 20px) !important;
    /* COPY EXACT TABLET POSITIONING - tiny margin, very close to text */
    margin-left: clamp(
      1px,
      0.4vw,
      2px
    ) !important; /* TINY margin like tablets */
    margin-top: -2px !important;
    vertical-align: top !important;
    /* Reset any absolute positioning */
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    /* Ensure proper stacking and interaction on mobile */
    z-index: 3 !important;
    pointer-events: none !important;
    /* Override any inherited display settings */
    visibility: visible !important;
    opacity: 1 !important;
  }

  .carousel__track {
    display: flex !important;
    gap: clamp(0.75rem, 2.5vw, 1.25rem) !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0 clamp(0.75rem, 2.5vw, 1.25rem) clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  .carousel__track::-webkit-scrollbar {
    display: none !important;
  }

  .carousel__slide {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    width: clamp(165px, 46vw, 190px) !important;
  }

  .product-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    background: #fff !important;
    border: none !important; /* Removed border as requested */
    border-radius: 0 !important;
    padding: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    height: clamp(
      320px,
      85vw,
      380px
    ) !important; /* Increased height to accommodate taller images */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
  }

  .product-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
    /* Removed border-color since we removed the border */
  }

  .product-card__img {
    width: 100% !important;
    height: clamp(
      240px,
      58vw,
      280px
    ) !important; /* Increased height to make cards taller */
    object-fit: cover !important;
    margin-bottom: clamp(0.4rem, 1.5vw, 0.6rem) !important;
    border-radius: 0 !important;
    background: #f8f8f8 !important;
  }

  .product-card__title {
    font-size: clamp(0.9rem, 2.8vw, 1.1rem) !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 1.3 !important;
    margin-bottom: clamp(0.4rem, 1.5vw, 0.6rem) !important;
    text-align: left !important;
    flex-grow: 1 !important;
    min-height: clamp(2.4rem, 6vw, 3rem) !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .product-card__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--color-primary) !important;
    color: #fff !important;
    font-size: clamp(0.6rem, 1.6vw, 0.75rem) !important;
    font-weight: 600 !important;
    padding: clamp(5px, 1.2vw, 7px) clamp(6px, 1.5vw, 10px) !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none !important;
    width: auto !important;
    min-width: clamp(70px, 18vw, 90px) !important;
    max-width: 45% !important;
    gap: clamp(2px, 0.8vw, 4px) !important;
    transition: all 0.3s ease !important;
    margin-top: auto !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
  }

  .product-card__button-arrow {
    width: clamp(10px, 2.5vw, 14px) !important;
    height: clamp(10px, 2.5vw, 14px) !important;
    transition: transform 0.2s ease !important;
  }

  .carousel__nav {
    display: flex !important;
    justify-content: center !important;
    margin-top: clamp(1.5rem, 4vw, 2.5rem) !important;
    padding: 0 clamp(0.75rem, 2.5vw, 1.25rem) !important;
  }

  .carousel__progress-container {
    position: relative !important;
    width: clamp(140px, 35vw, 180px) !important;
    height: 4px !important;
    background: #e8e8e8 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
  }

  .carousel__progress-bar {
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    height: 6px !important;
    width: clamp(35px, 9vw, 50px) !important;
    background: var(--color-primary) !important;
    border-radius: 3px !important;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
  }
}

/* ================= IPHONE SE & SMALL MOBILE (320px - 375px) ================= */
/* Ultra-compact footer bottom optimization for very small screens */
@media (max-width: 375px) {
  .footer__bottom {
    padding: clamp(0.5rem, 1.5vw, 0.8rem) var(--mobile-spacing-normal)
      clamp(0.5rem, 1.5vw, 0.8rem) !important;
    min-height: clamp(1.6rem, 4.5vw, 2rem) !important;
    gap: clamp(0.2rem, 0.8vw, 0.4rem) !important;
  }

  .footer__copyright {
    font-size: clamp(0.55rem, 1.4vw, 0.7rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important; /* Slightly tighter text for better fit */
  }

  .footer__credit {
    font-size: clamp(0.55rem, 1.4vw, 0.7rem) !important;
    line-height: 1.2 !important;
    max-width: 52% !important; /* Even more compact for ultra-small screens */
    letter-spacing: -0.01em !important; /* Slightly tighter text for better fit */
  }
}

/* ================= IPHONE SE & SMALL MOBILE (320px - 375px) ================= */
@media (max-width: 375px) {
  .products-demand {
    padding: 2rem 0 !important;
  }

  .products-demand__title {
    font-size: 1.6rem !important;
    margin-bottom: 1.5rem !important;
    padding-right: 2rem !important;
  }

  /* Corner SVG for very small screens - uses same inline-block approach */
  .products-demand .products-demand__title .products-demand__corner-svg {
    width: clamp(12px, 3.2vw, 16px) !important;
    height: clamp(12px, 3.2vw, 16px) !important;
    margin-left: clamp(1px, 0.3vw, 1px) !important;
  }

  .carousel__track {
    gap: 0.6rem !important;
    padding: 0 0.6rem 1.2rem !important;
  }

  .carousel__slide {
    width: 150px !important;
  }

  .product-card {
    height: 320px !important; /* Increased to accommodate taller images */
    padding: 0.6rem !important;
    border: none !important; /* Removed border */
  }

  .product-card__img {
    height: 220px !important; /* Increased from 180px to make cards taller */
    margin-bottom: 0.3rem !important;
  }

  .product-card__title {
    font-size: 0.85rem !important;
    margin-bottom: 0.3rem !important;
    min-height: 2rem !important;
  }

  .product-card__button {
    font-size: 0.6rem !important;
    padding: 4px 6px !important;
    gap: 2px !important;
    min-width: 65px !important;
    max-width: 42% !important;
    white-space: nowrap !important;
  }

  .product-card__button-arrow {
    width: 8px !important;
    height: 8px !important;
  }

  .carousel__progress-container {
    width: 120px !important;
  }

  .carousel__progress-bar {
    width: 30px !important;
  }
}

/* ================= IPHONE 12/13/14 STANDARD (375px - 414px) ================= */
@media (min-width: 376px) and (max-width: 414px) {
  .products-demand {
    padding: 2.5rem 0 !important;
  }

  .products-demand__title {
    font-size: 1.8rem !important;
    margin-bottom: 2rem !important;
    padding-right: 2.2rem !important;
  }

  /* Corner SVG for iPhone 12/13/14 standard - uses same inline-block approach */
  .products-demand .products-demand__title .products-demand__corner-svg {
    width: clamp(14px, 3.6vw, 18px) !important;
    height: clamp(14px, 3.6vw, 18px) !important;
    margin-left: clamp(1px, 0.3vw, 2px) !important;
  }

  .carousel__track {
    gap: 0.8rem !important;
    padding: 0 0.8rem 1.5rem !important;
  }

  .carousel__slide {
    width: 165px !important;
  }

  .product-card {
    height: 340px !important; /* Increased to accommodate taller images */
    padding: 0.8rem !important;
    border: none !important; /* Removed border */
  }

  .product-card__img {
    height: 230px !important; /* Increased from 190px to make cards taller */
    margin-bottom: 0.4rem !important;
  }

  .product-card__title {
    font-size: 0.9rem !important;
    margin-bottom: 0.4rem !important;
    min-height: 2.4rem !important;
  }

  .product-card__button {
    font-size: 0.65rem !important;
    padding: 5px 10px !important;
    gap: 2px !important;
    min-width: 70px !important;
    max-width: 52% !important;
    white-space: nowrap !important;
  }

  .product-card__button-arrow {
    width: 10px !important;
    height: 10px !important;
  }

  .carousel__progress-container {
    width: 140px !important;
  }

  .carousel__progress-bar {
    width: 35px !important;
  }
}

/* ================= IPHONE 12/13/14 PRO MAX & PLUS (415px - 480px) ================= */
@media (min-width: 415px) and (max-width: 480px) {
  .products-demand {
    padding: 3rem 0 !important;
  }

  .products-demand__title {
    font-size: 2rem !important;
    margin-bottom: 2.5rem !important;
    padding-right: 2.5rem !important;
  }

  /* Corner SVG for iPhone Pro Max & Plus - uses same inline-block approach */
  .products-demand .products-demand__title .products-demand__corner-svg {
    width: clamp(16px, 3.8vw, 20px) !important;
    height: clamp(16px, 3.8vw, 20px) !important;
    margin-left: clamp(1px, 0.4vw, 2px) !important;
  }

  .carousel__track {
    gap: 1rem !important;
    padding: 0 1rem 2rem !important;
  }

  .carousel__slide {
    width: 175px !important;
  }

  .product-card {
    height: 360px !important; /* Increased to accommodate taller images */
    padding: 1rem !important;
    border: none !important; /* Removed border */
  }

  .product-card__img {
    height: 240px !important; /* Increased from 200px to make cards taller */
    margin-bottom: 0.5rem !important;
  }

  .product-card__title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
    min-height: 2.6rem !important;
  }

  .product-card__button {
    font-size: 0.7rem !important;
    padding: 6px 10px !important;
    gap: 3px !important;
    min-width: 75px !important;
    max-width: 55% !important;
    white-space: nowrap !important;
  }

  .product-card__button-arrow {
    width: 12px !important;
    height: 12px !important;
  }

  .carousel__progress-container {
    width: 160px !important;
  }

  .carousel__progress-bar {
    width: 40px !important;
  }
}

/* ================= LARGE MOBILE TRANSITION (481px - 600px) ================= */
@media (min-width: 481px) and (max-width: 600px) {
  .products-demand {
    padding: 3.5rem 0 !important;
  }

  .products-demand__title {
    font-size: 2.2rem !important;
    margin-bottom: 3rem !important;
    padding-right: 2.8rem !important;
  }

  /* Corner SVG for large mobile transition - uses same inline-block approach */
  .products-demand .products-demand__title .products-demand__corner-svg {
    width: clamp(18px, 4vw, 22px) !important;
    height: clamp(18px, 4vw, 22px) !important;
    margin-left: clamp(1px, 0.4vw, 2px) !important;
  }

  .carousel__track {
    gap: 1.2rem !important;
    padding: 0 1.2rem 2.5rem !important;
  }

  .carousel__slide {
    width: 185px !important;
  }

  .product-card {
    height: 380px !important; /* Increased to accommodate taller images */
    padding: 1.2rem !important;
    border: none !important; /* Removed border */
  }

  .product-card__img {
    height: 250px !important; /* Increased from 210px to make cards taller */
    margin-bottom: 0.5rem !important;
  }

  .product-card__title {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
    min-height: 2.8rem !important;
  }

  .product-card__button {
    font-size: 0.75rem !important;
    padding: 7px 12px !important;
    gap: 3px !important;
    min-width: 80px !important;
    max-width: 48% !important;
    white-space: nowrap !important;
  }

  .product-card__button-arrow {
    width: 14px !important;
    height: 14px !important;
  }

  .carousel__progress-container {
    width: 180px !important;
  }

  .carousel__progress-bar {
    width: 45px !important;
  }
}

/* ================= LARGE MOBILE TO TABLET TRANSITION (601px - 767px) ================= */
@media (min-width: 601px) and (max-width: 767px) {
  .products-demand {
    padding: 4rem 0 !important;
  }

  .products-demand__title {
    font-size: 2.4rem !important;
    margin-bottom: 3rem !important;
    padding-right: 3rem !important;
  }

  /* Corner SVG for large mobile to tablet transition - uses same inline-block approach */
  .products-demand .products-demand__title .products-demand__corner-svg {
    width: clamp(20px, 4.2vw, 24px) !important;
    height: clamp(20px, 4.2vw, 24px) !important;
    margin-left: clamp(1px, 0.4vw, 2px) !important;
  }

  .carousel__track {
    gap: 1.25rem !important;
    padding: 0 1.25rem 2.5rem !important;
  }

  .carousel__slide {
    width: 190px !important;
  }

  .product-card {
    height: 390px !important; /* Increased to accommodate taller images */
    padding: 1.2rem !important;
    border: none !important; /* Removed border */
  }

  .product-card__img {
    height: 260px !important; /* Increased from 220px to make cards taller */
    margin-bottom: 0.5rem !important;
  }

  .product-card__title {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
    min-height: 3rem !important;
  }

  .product-card__button {
    font-size: 0.8rem !important;
    padding: 8px 14px !important;
    gap: 4px !important;
    min-width: 85px !important;
    max-width: 48% !important;
    white-space: nowrap !important;
  }

  .product-card__button-arrow {
    width: 14px !important;
    height: 14px !important;
  }

  .carousel__progress-container {
    width: 180px !important;
  }

  .carousel__progress-bar {
    width: 50px !important;
  }
}

/* Small Mobile Devices (320px - 480px) - Ultra-compact hero form optimization */
@media (max-width: 480px) {
  /* ================= ULTRA-COMPACT HERO FORM ADJUSTMENTS ================= */

  .hero {
    /* Ensure background image scales properly on very small screens */
    background-size: cover !important;
    background-position: center 75% !important;
  }

  .hero__form-card {
    max-width: 100% !important;
    margin: clamp(1.2rem, 4vw, 2rem) auto 0 auto !important;
    padding: clamp(1.2rem, 4vw, 1.8rem) clamp(0.8rem, 3vw, 1.2rem) !important;
    border-width: clamp(8px, 3vw, 16px) !important;
  }

  /* Ultra-compact pseudo-elements */
  .hero__form-card::before {
    bottom: clamp(-14px, -2vw, -14px) !important;
    right: clamp(-11px, -2vw, -14px) !important;
    width: clamp(13px, 3vw, 16px) !important;
    height: clamp(13px, 3vw, 16px) !important;
  }

  .hero__form-card::after {
    bottom: clamp(-17px, -2vw, -14px) !important;
    right: clamp(-24px, -4vw, -50px) !important;
    width: clamp(14px, 3vw, 16px) !important;
    height: clamp(14px, 3vw, 16px) !important;
  }

  /* Ultra-compact form elements */
  .hero__form-title {
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
    margin-bottom: clamp(0.6rem, 2vw, 1rem) !important;
  }

  .hero__form-desc {
    font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
    margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem) !important;
  }

  .hero__form {
    gap: clamp(0.6rem, 2vw, 1rem) !important;
    margin-top: clamp(0.8rem, 2.5vw, 1.2rem) !important;
  }

  .hero__form input,
  .hero__form textarea {
    padding: clamp(8px, 2.5vw, 12px) clamp(8px, 2.5vw, 12px) !important;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem) !important;
  }

  .hero__form textarea {
    min-height: clamp(50px, 12vw, 70px) !important;
  }

  .hero__form-button {
    padding: clamp(8px, 2.5vw, 12px) clamp(14px, 4vw, 20px) !important;
    font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
    margin-top: clamp(0.4rem, 1.5vw, 0.8rem) !important;
  }

  /* Ultra-compact corner decorations */
  .hero__form-corner {
    width: clamp(16px, 4vw, 24px) !important;
    height: clamp(16px, 4vw, 24px) !important;
    border-width: clamp(2px, 1vw, 3px) !important;
  }

  .hero__form-corner--tl,
  .hero__form-corner--tr {
    top: clamp(-2px, -1vw, -3px) !important;
  }

  .hero__form-corner--tl,
  .hero__form-corner--bl {
    left: clamp(-2px, -1vw, -3px) !important;
  }

  .hero__form-corner--tr {
    right: clamp(-2px, -1vw, -3px) !important;
  }

  .hero__form-corner--bl {
    bottom: clamp(-2px, -1vw, -3px) !important;
  }

  .hero__form-inner-corner {
    width: clamp(28px, 7vw, 45px) !important;
    height: clamp(20px, 5vw, 35px) !important;
    top: clamp(6px, 2vw, 10px) !important; /* Smaller mobile positioning */
    right: clamp(1px, 0.8vw, 3px) !important; /* Smaller mobile positioning */
  }

  .hero__form-corner-arrow {
    width: clamp(20px, 5vw, 35px) !important;
    height: clamp(20px, 5vw, 35px) !important;
  }
}

/* Medium Mobile Devices (481px - 600px) */
@media (min-width: 481px) and (max-width: 600px) {
  .hero__form-card {
    max-width: 95% !important;
    padding: clamp(1.4rem, 4vw, 1.8rem) clamp(1rem, 3vw, 1.4rem) !important;
    border-width: clamp(
      12px,
      3vw,
      18px
    ) !important; /* Increased from clamp(10px, 2vw, 14px) */
  }

  /* Balanced pseudo-elements */
  .hero__form-card::before {
    bottom: clamp(-9px, -2vw, -15px) !important;
    right: clamp(-9px, -2vw, -15px) !important;
    width: clamp(15px, 3vw, 18px) !important;
    height: clamp(15px, 3vw, 18px) !important;
  }

  .hero__form-card::after {
    bottom: clamp(-9px, -2vw, -15px) !important;
    right: clamp(-18px, -4vw, -45px) !important;
    width: clamp(15px, 3vw, 18px) !important;
    height: clamp(15px, 3vw, 18px) !important;
  }

  /* Enhanced form styling for medium mobile */
  .hero__form-title {
    font-size: clamp(1.15rem, 3.5vw, 1.5rem) !important;
  }

  .hero__form-desc {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem) !important;
  }

  .hero__form input,
  .hero__form textarea {
    padding: clamp(9px, 3vw, 13px) clamp(9px, 3vw, 13px) !important;
    font-size: clamp(0.8rem, 2.5vw, 0.95rem) !important;
  }

  .hero__form textarea {
    min-height: clamp(55px, 14vw, 75px) !important;
  }

  .hero__form-button {
    padding: clamp(9px, 3vw, 13px) clamp(15px, 4vw, 22px) !important;
    font-size: clamp(0.8rem, 2.5vw, 0.95rem) !important;
  }

  /* Balanced corner decorations */
  .hero__form-corner {
    width: clamp(18px, 4.5vw, 28px) !important;
    height: clamp(18px, 4.5vw, 28px) !important;
    border-width: clamp(2.5px, 1vw, 4px) !important;
  }

  .hero__form-inner-corner {
    width: clamp(32px, 7.5vw, 50px) !important;
    height: clamp(22px, 5.5vw, 40px) !important;
    top: clamp(7px, 2.2vw, 11px) !important; /* Medium mobile positioning */
    right: clamp(
      1.5px,
      0.9vw,
      3.5px
    ) !important; /* Medium mobile positioning */
  }

  .hero__form-corner-arrow {
    width: clamp(22px, 5.5vw, 40px) !important;
    height: clamp(22px, 5.5vw, 40px) !important;
  }
}

/* Large Mobile Devices (601px - 767px) */
@media (min-width: 601px) and (max-width: 767px) {
  .hero__form-card {
    max-width: 90% !important;
    max-width: 450px !important;
    padding: clamp(1.6rem, 4vw, 2.2rem) clamp(1.2rem, 3vw, 1.6rem) !important;
    border-width: clamp(
      15px,
      3vw,
      20px
    ) !important; /* Increased from clamp(12px, 2vw, 16px) */
  }

  /* Near-desktop pseudo-elements */
  .hero__form-card::before {
    bottom: clamp(-10px, -2vw, -16px) !important;
    right: clamp(-8px, -2vw, -24px) !important;
    width: clamp(8px, 2vw, 15px) !important;
    height: clamp(8px, 2vw, 15px) !important;
  }

  .hero__form-card::after {
    bottom: clamp(-10px, -2vw, -16px) !important;
    right: clamp(-16px, -4vw, -30px) !important;
    width: clamp(8px, 2vw, 15px) !important;
    height: clamp(8px, 2vw, 15px) !important;
  }

  /* Near-desktop form styling */
  .hero__form-title {
    font-size: clamp(1.2rem, 3.5vw, 1.6rem) !important;
  }

  .hero__form-desc {
    font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
  }

  .hero__form {
    gap: clamp(0.8rem, 2.5vw, 1.2rem) !important;
    margin-top: clamp(1rem, 3vw, 1.5rem) !important;
  }

  .hero__form input,
  .hero__form textarea {
    padding: clamp(10px, 3vw, 14px) clamp(10px, 3vw, 14px) !important;
    font-size: clamp(0.85rem, 2.5vw, 1rem) !important;
  }

  .hero__form textarea {
    min-height: clamp(60px, 15vw, 80px) !important;
  }

  .hero__form-button {
    padding: clamp(10px, 3vw, 14px) clamp(16px, 4vw, 24px) !important;
    font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
    margin-top: clamp(0.5rem, 2vw, 1rem) !important;
  }

  /* Near-desktop corner decorations */
  .hero__form-corner {
    width: clamp(20px, 5vw, 30px) !important;
    height: clamp(20px, 5vw, 30px) !important;
    border-width: clamp(3px, 1vw, 5px) !important;
  }

  .hero__form-corner--tl,
  .hero__form-corner--tr {
    top: clamp(-3px, -1vw, -5px) !important;
  }

  .hero__form-corner--tl,
  .hero__form-corner--bl {
    left: clamp(-3px, -1vw, -5px) !important;
  }

  .hero__form-corner--tr {
    right: clamp(-3px, -1vw, -5px) !important;
  }

  .hero__form-corner--bl {
    bottom: clamp(-3px, -1vw, -5px) !important;
  }

  .hero__form-inner-corner {
    width: clamp(35px, 8vw, 55px) !important;
    height: clamp(25px, 6vw, 42px) !important;
    top: clamp(8px, 2.4vw, 11.5px) !important; /* Large mobile positioning */
    right: clamp(2px, 0.95vw, 3.8px) !important; /* Large mobile positioning */
  }

  .hero__form-corner-arrow {
    width: clamp(25px, 6vw, 42px) !important;
    height: clamp(25px, 6vw, 42px) !important;
  }
}

@media (max-width: 1100px) {
/* Disable hover effects for temp-remove cards in responsive layouts */

.temp-remove .features__card-title {
  transform: translateY(0) !important; /* Keep original position, no movement */
}

.temp-remove .features__card-button {
  bottom: 0px !important; /* Keep original position, no movement */
}
 }