/* ============================================ RESPONSIVE - MOBILE BREAKPOINTS ============================================ Styles for mobile devices (640px and below) Progressive enhancement from desktop down ============================================ */ /* ============================================ BREAKPOINT: 640px (Mobile Landscape) ============================================ */ @media (max-width: 640px) { /* ============================================ PREMIUM SERVICES PAGE - MOBILE OVERRIDES CRITICAL: These must override all desktop styles ============================================ */ /* Force premium-media to be smaller on mobile - OVERRIDE ALL DESKTOP STYLES */ /* Desktop has: .premium-media { min-height: clamp(280px, 35vw, 400px) } */ /* Desktop has: [data-premium-services-page] .premium-media { min-height: 320px } */ /* Tablet has: [data-premium-services-page] .premium-media { min-height: 400px } at 960px */ /* This MUST override all of them with maximum specificity */ [data-premium-services-page] .premium-section.premium-section--left .premium-section-inner .premium-media, [data-premium-services-page] .premium-section.premium-section--right .premium-section-inner .premium-media, [data-premium-services-page] .premium-section .premium-section-inner .premium-media, [data-premium-services-page] .premium-section-inner .premium-media, [data-premium-services-page] .premium-section .premium-media, [data-premium-services-page] .premium-media, .premium-section-inner .premium-media, .premium-section .premium-media, .premium-media { min-height: clamp(180px, 35vw, 220px) !important; max-height: 220px !important; height: auto !important; } /* Force all premium-copy-mobile children to center */ [data-premium-services-page] .premium-copy-mobile, [data-premium-services-page] .premium-section-inner .premium-copy-mobile { text-align: center !important; align-items: center !important; } /* Force label, heading, lead to center */ [data-premium-services-page] .premium-label-mobile, [data-premium-services-page] .premium-heading-mobile, [data-premium-services-page] .premium-lead-mobile { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Force pills to center and be properly sized */ [data-premium-services-page] .premium-pills-list-mobile { justify-content: center !important; align-items: center !important; } [data-premium-services-page] .premium-pill-item { font-size: clamp(0.75rem, 1.6vw, 0.875rem) !important; text-align: center !important; margin: 0 auto !important; } /* Force grid titles to center */ [data-premium-services-page] .premium-grid-title { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Force CTA to center and be full width */ [data-premium-services-page] .premium-cta-mobile { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; align-self: center !important; } /* ============================================ PREMIUM SERVICES SLIDER - MOBILE SPECIFIC This targets the slider structure created by JS ============================================ */ /* Slider container */ /* CRITICAL: Container must be exactly 100% width with no padding/margin */ [data-premium-services-page] .premium-services-slider { width: 100% !important; max-width: 100% !important; min-width: 100% !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; position: relative !important; display: block !important; visibility: visible !important; min-height: 400px !important; /* Override desktop max-width: 1180px */ left: 0 !important; right: 0 !important; } /* Slider track */ /* Track is 200% wide to hold 2 slides at 100% each */ [data-premium-services-page] .premium-services-slider-track { display: flex !important; width: 200% !important; min-width: 200% !important; max-width: 200% !important; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important; will-change: transform !important; box-sizing: border-box !important; position: relative !important; min-height: 400px !important; flex-wrap: nowrap !important; } /* Individual slide - contains premium-section */ /* CRITICAL: Each slide MUST be exactly 50% of track (100% of container) */ /* This ensures only ONE slide is visible at a time */ [data-premium-services-page] .premium-services-slide { width: 50% !important; min-width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; flex-basis: 50% !important; flex-shrink: 0 !important; flex-grow: 0 !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: stretch !important; box-sizing: border-box !important; overflow: hidden !important; min-height: 400px !important; height: auto !important; /* Force exact sizing - prevent any percentage calculations from going wrong */ position: relative !important; } /* Ensure slides are visible and have content */ [data-premium-services-page] .premium-services-slide[data-slide-index="0"], [data-premium-services-page] .premium-services-slide[data-slide-index="1"] { visibility: visible !important; opacity: 1 !important; display: flex !important; } /* Section inside slide - MUST override inline display:none */ /* CRITICAL: Section must fit exactly within slide width (100% of slide) */ [data-premium-services-page] .premium-services-slide .premium-section { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* Force exact width - override any desktop max-width */ padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.75rem, 2vw, 1rem) !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: visible !important; visibility: visible !important; opacity: 1 !important; /* Override any desktop positioning or sizing */ position: relative !important; left: 0 !important; right: 0 !important; transform: none !important; } /* Ensure all sections inside slider are visible regardless of inline styles */ [data-premium-services-page] .premium-services-slider .premium-services-slide .premium-section[data-service="general"], [data-premium-services-page] .premium-services-slider .premium-services-slide .premium-section[data-service="remodeling"] { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Section inner - the main container with all content */ /* CRITICAL: Must fit within section padding, no overflow - OVERRIDE DESKTOP max-width: 1400px */ [data-premium-services-page] .premium-services-slide .premium-section-inner { display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; gap: clamp(1.25rem, 2.5vw, 1.75rem) !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* CRITICAL: Override desktop max-width: 1400px - calculate based on section width minus padding */ margin: 0 !important; align-items: center !important; justify-items: center !important; text-align: center !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; visibility: visible !important; opacity: 1 !important; min-height: auto !important; /* Force exact sizing - no desktop constraints */ position: relative !important; left: 0 !important; right: 0 !important; } /* Ensure section-inner is visible for both services */ [data-premium-services-page] .premium-services-slide .premium-section[data-service="general"] .premium-section-inner, [data-premium-services-page] .premium-services-slide .premium-section[data-service="remodeling"] .premium-section-inner { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Media inside slide - make it smaller */ [data-premium-services-page] .premium-services-slide .premium-media { order: -1 !important; min-height: clamp(180px, 35vw, 220px) !important; max-height: 220px !important; height: auto !important; aspect-ratio: 4 / 3 !important; width: 100% !important; max-width: 100% !important; margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem) auto !important; border-radius: 12px !important; display: block !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; overflow: hidden !important; flex-shrink: 0 !important; } /* Copy container inside slide */ [data-premium-services-page] .premium-services-slide .premium-copy, [data-premium-services-page] .premium-services-slide .premium-copy-mobile { width: 100% !important; max-width: 100% !important; padding: 0 !important; align-items: center !important; align-self: center !important; text-align: center !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: clamp(0.875rem, 2vw, 1.25rem) !important; box-sizing: border-box !important; margin: 0 auto !important; } /* Label, heading, lead inside slide - FORCE CENTERED */ [data-premium-services-page] .premium-services-slide .premium-label, [data-premium-services-page] .premium-services-slide .premium-label-mobile, [data-premium-services-page] .premium-services-slide .premium-heading, [data-premium-services-page] .premium-services-slide .premium-heading-mobile, [data-premium-services-page] .premium-services-slide .premium-lead, [data-premium-services-page] .premium-services-slide .premium-lead-mobile { text-align: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; display: block !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Heading span must also be centered */ [data-premium-services-page] .premium-services-slide .premium-heading span, [data-premium-services-page] .premium-services-slide .premium-heading-mobile span { text-align: center !important; display: inline !important; } /* Pills list inside slide - CENTERED WITH PROPER GAP FOR MOBILE */ [data-premium-services-page] .premium-services-slide .premium-pills-list, [data-premium-services-page] .premium-services-slide .premium-pills-list-mobile { gap: clamp(0.5rem, 1.2vw, 0.75rem) !important; justify-content: center !important; align-items: center !important; align-content: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(1.5rem, 2.5vw, 2rem) !important; display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; padding: 0 clamp(0.5rem, 1vw, 0.75rem) !important; box-sizing: border-box !important; } /* Pill items inside slide - SMALLER AND PROPERLY DISTRIBUTED FOR MOBILE */ [data-premium-services-page] .premium-services-slide .premium-pills-list li, [data-premium-services-page] .premium-services-slide .premium-pill-item { font-size: clamp(0.5625rem, 1.2vw, 0.6875rem) !important; padding: clamp(0.4375rem, 1vw, 0.5625rem) clamp(0.625rem, 1.5vw, 0.875rem) !important; text-align: center !important; max-width: calc(50% - 0.5rem) !important; flex: 0 1 calc(50% - 0.5rem) !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1.25 !important; box-sizing: border-box !important; word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; white-space: normal !important; } /* Grid inside slide */ [data-premium-services-page] .premium-services-slide .premium-grid, [data-premium-services-page] .premium-services-slide .premium-grid-mobile { grid-template-columns: 1fr !important; gap: clamp(1.5rem, 3vw, 2rem) !important; width: 100% !important; max-width: 100% !important; justify-items: center !important; margin: clamp(1.5rem, 3vw, 2rem) auto !important; padding: 0 !important; box-sizing: border-box !important; display: grid !important; } /* Grid items inside slide */ [data-premium-services-page] .premium-services-slide .premium-grid-item, [data-premium-services-page] .premium-services-slide .premium-grid-item-mobile { width: 100% !important; max-width: 100% !important; text-align: center !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; display: block !important; } /* Grid titles inside slide - FORCE CENTERED */ [data-premium-services-page] .premium-services-slide .premium-grid-item h3, [data-premium-services-page] .premium-services-slide .premium-grid-title { font-size: clamp(0.875rem, 2vw, 1rem) !important; text-align: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important; display: block !important; padding: 0 !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Check list inside slide - centered container, left-aligned items */ [data-premium-services-page] .premium-services-slide .premium-check-list { width: 100% !important; max-width: 100% !important; text-align: left !important; display: block !important; font-size: clamp(0.875rem, 1.8vw, 1rem) !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; list-style: none !important; } [data-premium-services-page] .premium-services-slide .premium-check-list li { padding-left: clamp(1.75rem, 4vw, 2rem) !important; margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } /* CTA row inside slide */ [data-premium-services-page] .premium-services-slide .premium-cta-row, [data-premium-services-page] .premium-services-slide .premium-cta-row-mobile { width: 100% !important; max-width: 100% !important; align-items: center !important; text-align: center !important; margin-top: clamp(1.5rem, 3vw, 2rem) !important; margin-left: auto !important; margin-right: auto !important; gap: clamp(0.75rem, 1.5vw, 1rem) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 0 !important; } /* CTA button inside slide - SMALLER AND CENTERED */ [data-premium-services-page] .premium-services-slide .premium-cta, [data-premium-services-page] .premium-services-slide .premium-cta-mobile { width: auto !important; max-width: 85% !important; min-width: auto !important; padding: clamp(0.875rem, 1.8vw, 1rem) clamp(1.25rem, 2.5vw, 1.75rem) !important; font-size: clamp(0.8125rem, 1.7vw, 0.9375rem) !important; text-align: center !important; justify-content: center !important; align-items: center !important; align-self: center !important; display: flex !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* ============================================ HOME PAGE - MOBILE ============================================ */ /* Hero Slider */ .hc-hero-slider { padding-inline: 4%; padding-block: 24px 32px; } .hc-hero-slide { padding: 18px 16px 20px; } .hc-hero-slide::before { background: linear-gradient(130deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.75) 30%, rgba(15, 23, 42, 0.35) 100%); } .hc-hero-tags { gap: 0.4rem; } .hc-hero-tag { font-size: 0.72rem; } .hc-hero-cta { width: 100%; justify-content: center; } .hc-hero-nav { display: none; /* mobile: rely on swipe + dots */ } .hc-hero-dots { transform: translateX(-50%); bottom: 12px; } /* Premium Section */ .premium-section { padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 3vw, 2rem); } /* Ensure animations work on mobile for premium-section */ .premium-section[data-animate] { transform: translateY(18px) translateZ(0) !important; will-change: opacity, transform !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } .premium-section[data-animate].is-visible { transform: translateY(0) translateZ(0) !important; will-change: auto !important; } /* Ensure background pattern animations work on mobile */ .premium-section .premium-bg-pattern { will-change: transform !important; transform: translateZ(0) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; } /* MOBILE-SPECIFIC: Particle animation - particles float from bottom to top like balloons */ /* Particles will have slight horizontal drift for natural spread */ /* CRITICAL: Animation ensures particles reach HIGH ABOVE the title area */ @keyframes premiumFloatMobile { 0% { opacity: 0; /* Start at the bottom of the section (not outside) */ transform: translateX(0) translateY(0) translateZ(0) scale(0); } 3% { opacity: 0.3; /* Start rising from bottom with slight horizontal drift */ transform: translateX(calc(var(--drift-x, 0) * 1px)) translateY(-3vh) translateZ(0) scale(0.5); } 10% { opacity: 0.6; /* Rising through lower section */ transform: translateX(calc(var(--drift-x, 0) * 2px)) translateY(-15vh) translateZ(0) scale(0.7); } 20% { opacity: 0.7; /* Rising through section */ transform: translateX(calc(var(--drift-x, 0) * 2.5px)) translateY(-30vh) translateZ(0) scale(0.8); } 35% { opacity: 0.8; /* Mid-section with continued drift - particles becoming more visible */ transform: translateX(calc(var(--drift-x, 0) * 3px)) translateY(-50vh) translateZ(0) scale(0.95); } 50% { opacity: 0.8; /* Approaching title area - CRITICAL visibility point */ transform: translateX(calc(var(--drift-x, 0) * 4px)) translateY(-70vh) translateZ(0) scale(1); } 65% { opacity: 0.8; /* Passing through title area - maximum visibility */ transform: translateX(calc(var(--drift-x, 0) * 4px)) translateY(-90vh) translateZ(0) scale(1); } 75% { opacity: 0.8; /* Above title area - continuing to rise higher */ transform: translateX(calc(var(--drift-x, 0) * 3.5px)) translateY(-110vh) translateZ(0) scale(1); } 85% { opacity: 0.7; /* High above title - still visible, reaching very high */ transform: translateX(calc(var(--drift-x, 0) * 3px)) translateY(-125vh) translateZ(0) scale(0.95); } 90% { opacity: 0.6; /* At maximum height - still visible */ transform: translateX(calc(var(--drift-x, 0) * 2px)) translateY(-135vh) translateZ(0) scale(0.9); } 95% { opacity: 0.4; /* Fading out at maximum height */ transform: translateX(calc(var(--drift-x, 0) * 1px)) translateY(-140vh) translateZ(0) scale(0.8); } 100% { opacity: 0; /* Exit at maximum height - particles reach well above the title */ transform: translateX(0) translateY(-150vh) translateZ(0) scale(0.6); } } /* Ensure particles animations work on mobile - use mobile-specific animation */ .premium-section .premium-particle { /* CRITICAL: Make particles smaller on mobile */ width: 8px !important; height: 8px !important; will-change: transform, opacity !important; /* CRITICAL: Position particles at the bottom of the section */ bottom: 0 !important; top: auto !important; /* CRITICAL: Allow JavaScript to set left position - DO NOT override with auto */ /* left position is set by JavaScript: left: ${Math.random() * 100}% */ right: auto !important; /* CRITICAL: Ensure particles are BEHIND the service card content */ z-index: 0 !important; /* CRITICAL: Use mobile-specific animation for bottom-to-top floating */ animation: premiumFloatMobile 6s infinite ease-in-out !important; -webkit-animation: premiumFloatMobile 6s infinite ease-in-out !important; /* CRITICAL: Override animation-delay to show more particles at once on mobile */ /* Reduce delay range so multiple particles appear simultaneously */ animation-delay: calc(var(--particle-index, 0) * 0.5s) !important; -webkit-animation-delay: calc(var(--particle-index, 0) * 0.5s) !important; backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; /* DO NOT set transform here - let animation control it */ /* Ensure particles are visible and can move */ pointer-events: none !important; /* Ensure proper positioning */ position: absolute !important; } /* Create staggered delays for multiple particles to appear harmonically */ /* Distribute delays evenly so particles appear continuously across the section */ /* Support up to 20 particles on mobile */ .premium-section .premium-particle:nth-child(1) { --particle-index: 0; } .premium-section .premium-particle:nth-child(2) { --particle-index: 0.15; } .premium-section .premium-particle:nth-child(3) { --particle-index: 0.3; } .premium-section .premium-particle:nth-child(4) { --particle-index: 0.45; } .premium-section .premium-particle:nth-child(5) { --particle-index: 0.6; } .premium-section .premium-particle:nth-child(6) { --particle-index: 0.75; } .premium-section .premium-particle:nth-child(7) { --particle-index: 0.9; } .premium-section .premium-particle:nth-child(8) { --particle-index: 1.05; } .premium-section .premium-particle:nth-child(9) { --particle-index: 1.2; } .premium-section .premium-particle:nth-child(10) { --particle-index: 1.35; } .premium-section .premium-particle:nth-child(11) { --particle-index: 1.5; } .premium-section .premium-particle:nth-child(12) { --particle-index: 1.65; } .premium-section .premium-particle:nth-child(13) { --particle-index: 1.8; } .premium-section .premium-particle:nth-child(14) { --particle-index: 1.95; } .premium-section .premium-particle:nth-child(15) { --particle-index: 2.1; } .premium-section .premium-particle:nth-child(16) { --particle-index: 2.25; } .premium-section .premium-particle:nth-child(17) { --particle-index: 2.4; } .premium-section .premium-particle:nth-child(18) { --particle-index: 2.55; } .premium-section .premium-particle:nth-child(19) { --particle-index: 2.7; } .premium-section .premium-particle:nth-child(20) { --particle-index: 2.85; } .premium-section .premium-particle:nth-child(n+21) { --particle-index: 3.0; } /* Ensure particles container is properly set up on mobile */ .premium-section .premium-floating-particles { position: absolute !important; inset: 0 !important; /* CRITICAL: Use hidden to contain particles within section, but allow slight overflow for smooth exit */ overflow: hidden !important; pointer-events: none !important; transform: translateZ(0) !important; /* CRITICAL: Container z-index must be BELOW service card content */ z-index: 0 !important; /* CRITICAL: Container should match section height, not viewport */ height: 100% !important; /* Do not use min-height: 100vh - keep it within section bounds */ } /* Premium Services Container - Mobile layout (from tablet.css 900px, needed at 640px for mobile) */ /* CRITICAL: Override desktop flex layout to show one card at a time */ .premium-services-container { flex-direction: column !important; gap: 20px !important; align-items: center !important; min-height: 750px !important; /* Increased to accommodate taller cards */ position: relative !important; display: flex !important; overflow: visible !important; /* Changed to visible to show full card content */ } /* Premium Service Card - Mobile layout (from tablet.css 900px, needed at 640px for mobile) */ /* CRITICAL: Ensure only one card is visible at a time on mobile */ .premium-service-card { width: 100% !important; max-width: 610px !important; min-height: 720px !important; /* Increased to match card content min-height */ transition: all 0.6s var(--premium-transition-bounce) !important; flex: 0 0 100% !important; /* Each card takes full width */ overflow: hidden !important; /* CRITICAL: Hide overflow to contain image inside card */ border-radius: 24px !important; /* Match desktop border-radius (24px) */ position: relative !important; } /* CRITICAL: Premium Card Image - Ensure rounded corners on image container and image */ /* CRITICAL: Image must be contained within card boundaries */ .premium-card-image { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; border-radius: 24px !important; /* Match desktop card border-radius (24px) */ overflow: hidden !important; /* Clip image to rounded corners */ z-index: 0 !important; margin: 0 !important; padding: 0 !important; } .premium-card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; border-radius: 24px !important; /* Explicit rounded corners on image (24px to match card) */ display: block !important; margin: 0 !important; padding: 0 !important; position: relative !important; } .premium-service-card:not(.premium-active) { transform: scale(0.88) translateY(30px) !important; opacity: 0.5 !important; position: absolute !important; z-index: 1 !important; pointer-events: none !important; /* Prevent interaction with inactive cards */ } .premium-service-card.premium-active { position: relative !important; z-index: 10 !important; transform: scale(1) !important; opacity: 1 !important; pointer-events: auto !important; } .premium-service-card:not(.premium-active):first-child { transform: scale(0.85) translateY(-40px) rotateX(8deg) !important; } .premium-service-card:not(.premium-active):last-child { transform: scale(0.85) translateY(40px) rotateX(-8deg) !important; } /* Premium Card Content - Mobile layout (from tablet.css 900px, needed at 640px for mobile) */ .premium-card-content { padding: 50px 25px 40px 25px !important; /* Optimized padding: 50px top, 40px bottom, 25px sides */ min-height: 720px !important; /* Increased min-height to ensure all content (badge, title, pills, description, CTA) is visible */ height: auto !important; /* Allow content to expand if needed */ max-height: none !important; /* Remove any max-height restrictions */ overflow: visible !important; /* Ensure all content is visible */ box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 0 !important; /* Let individual elements control their spacing */ } /* Ensure all direct children of premium-card-content are visible */ .premium-card-content > * { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Premium Mobile Navigation - Show on mobile (from tablet.css 900px) */ .premium-mobile-nav { display: flex !important; /* CRITICAL: Override desktop display: none */ gap: 15px !important; margin-top: 30px !important; margin-bottom: 20px !important; justify-content: center !important; align-items: center !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; z-index: 20 !important; position: relative !important; } /* Premium Navigation Dots - Ensure visibility and proper styling */ .premium-nav-dot { width: 35px !important; height: 35px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(254, 98, 21, 0.3) !important; cursor: pointer !important; transition: all 0.4s !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: 'Playfair Display', serif !important; font-size: 1.2rem !important; color: var(--dark-alt) !important; visibility: visible !important; opacity: 1 !important; position: relative !important; } .premium-nav-dot.premium-active { background: var(--brand-blue) !important; border-color: var(--brand-gold) !important; color: var(--bg) !important; transform: scale(1.1) !important; } .premium-nav-dot:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(254, 98, 21, 0.5) !important; transform: scale(1.05) !important; } .premium-service-number { font-size: 4rem; right: 20px; } /* Premium Service Badge - Ensure visibility and proper spacing */ .premium-service-badge { margin-top: 0 !important; /* Reset margin */ margin-bottom: 16px !important; /* Space below badge */ display: inline-flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 2 !important; width: 210px !important; } /* Premium Service Title - Ensure visibility and proper spacing */ .premium-service-title { font-size: 2.8rem !important; margin-top: 0 !important; margin-bottom: 20px !important; /* Space below title */ display: block !important; visibility: visible !important; opacity: 1 !important; line-height: 1.2 !important; width: 100% !important; max-width: 100% !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } /* Premium Service Description/Lead - Ensure visibility and proper spacing */ .premium-service-lead, .premium-card-content > p { margin-top: 0 !important; margin-bottom: 24px !important; /* Space below description */ display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } /* Premium Pills/Features - Ensure visibility and proper spacing with 2-column grid */ .premium-service-features, .premium-pills-list { margin-top: 0 !important; margin-bottom: 24px !important; /* Space below pills */ display: grid !important; /* Use grid instead of flex for better distribution */ grid-template-columns: repeat(2, 1fr) !important; /* Two equal columns for optimal space usage */ gap: 12px 16px !important; /* Optimized gap: 12px vertical, 16px horizontal */ visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; list-style: none !important; padding: 0 !important; align-items: start !important; } /* Premium Feature Tags - Ensure proper sizing and distribution */ .premium-feature-tag, .premium-pills-list li, .premium-pill-item { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-wrap: break-word !important; min-width: 0 !important; /* Allow items to shrink */ flex: 1 1 auto !important; /* Allow equal distribution */ text-align: center !important; } /* Premium CTA Button - Ensure visibility and proper spacing */ .premium-cta-btn { margin-top: auto !important; /* Push CTA to bottom if using flex */ margin-bottom: 0 !important; display: inline-flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 2 !important; width: auto !important; max-width: 100% !important; } .showroom-hero-title{ font-size: 38px !important; } /* Hero Slider - Fix badge overlap with navigation */ .hc-hero-media-pill { z-index: 2 !important; /* Below navigation arrows (z-index: 4) */ position: absolute; left: 1.5rem; bottom: 1.5rem; } .hc-hero-nav { z-index: 5 !important; /* Above badge */ } /* Hero Slider - Fix text wrapping on mobile */ .hc-hero-title { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; line-height: 1.2; } .hc-hero-grid { grid-template-columns: 1fr !important; /* Single column on mobile */ gap: 18px !important; } .hc-hero-media { order: -1; /* Image first on mobile */ min-height: 220px; } /* ============================================ SERVICES PAGE - MOBILE ============================================ */ .services-page .page { padding: 32px 16px 48px; } .services-page .page-header { padding: 0 4px; margin-bottom: 20px; } .services-page .services-nav { margin-top: 20px; padding: 0; } .services-page .services-pills { width: 100%; padding: 8px 4px 2px; scroll-padding: 0 4px; } .services-page .panel-wrapper { margin-top: 16px !important; padding: 0 !important; width: 100% !important; min-height: auto !important; height: auto !important; } .services-page .panel { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; padding: 0 !important; gap: 0 !important; min-height: auto !important; /* Override desktop min-height: 450px */ height: auto !important; max-height: none !important; border-radius: var(--radius-md) !important; display: grid !important; /* CRITICAL: Force panel to only be as tall as its content */ align-content: start !important; align-items: start !important; /* CRITICAL: Ensure no child elements can force height */ contain: layout style !important; } /* CRITICAL: Ensure article element doesn't add height */ .services-page .panel article { min-height: auto !important; height: auto !important; max-height: none !important; display: contents !important; /* Let grid handle layout */ } /* Panel media (image) - first on mobile - larger proportional height */ .services-page .panel > .panel-media { grid-column: 1 !important; grid-row: 1 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: var(--radius-md) var(--radius-md) 0 0 !important; width: 100% !important; height: 0 !important; padding-bottom: 60% !important; /* Larger ~1.67:1 aspect ratio for mobile - more prominent */ position: relative !important; overflow: hidden !important; min-height: 0 !important; /* Override desktop min-height: 260px */ max-height: none !important; aspect-ratio: auto !important; /* Override desktop aspect-ratio: 16/10 */ box-shadow: var(--shadow-strong) !important; background: var(--dark-card) !important; flex-shrink: 0 !important; } .services-page .panel > .panel-media .panel-media-inner { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; min-height: 0 !important; /* Override desktop min-height: 260px */ max-height: none !important; } /* Ensure panel-tag (badge) is visible on mobile */ .services-page .panel > .panel-media .panel-tag { position: absolute; top: 12px; right: 14px; z-index: 5; } /* Content div (text) - second on mobile - reasonable padding */ .services-page .panel > div:first-of-type { padding: 20px 16px !important; /* Restored to reasonable padding */ border-right: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; box-sizing: border-box !important; min-height: auto !important; height: auto !important; } /* Text sizing in content area - Restored to proper sizes */ .services-page .panel > div:first-of-type .panel-title { font-size: clamp(20px, 5vw, 24px) !important; /* Restored */ margin-bottom: 12px !important; /* Restored */ line-height: 1.3 !important; /* Restored */ } .services-page .panel > div:first-of-type .panel-lead { font-size: 14px !important; /* Restored to readable size */ margin-bottom: 16px !important; /* Restored spacing */ line-height: 1.6 !important; /* Restored */ } .services-page .panel > div:first-of-type .panel-bullets { margin-bottom: 16px !important; /* Restored */ gap: 10px !important; /* Restored */ } .services-page .panel > div:first-of-type .panel-bullets li { font-size: 14px !important; /* Restored to readable size */ line-height: 1.5 !important; /* Restored */ } .services-page .panel > div:first-of-type .cta-row { margin-top: 10px !important; gap: 8px !important; } /* Related row - third on mobile - ULTRA COMPACT - CRITICAL FIX */ .services-page .panel > .related-row { grid-column: 1 / -1 !important; grid-row: 3 !important; padding: 8px 10px 6px !important; /* MINIMAL - override desktop 32px 24px 28px */ gap: 6px !important; /* MINIMAL - override desktop 20px */ width: 100% !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 1fr !important; min-height: auto !important; height: auto !important; max-height: none !important; align-items: start !important; margin: 0 !important; /* CRITICAL: Override desktop padding: 32px 24px 28px */ } /* ULTRA COMPACT card sizing - override desktop padding: 28px 24px 24px */ .services-page .panel > .related-row .card { padding: 6px 8px 4px !important; /* MINIMAL padding */ min-height: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; flex-shrink: 0 !important; } .services-page .panel > .related-row .card-title { font-size: 11px !important; margin-bottom: 3px !important; line-height: 1.2 !important; padding-bottom: 3px !important; } .services-page .panel > .related-row .card-title::after { width: 25px !important; height: 2px !important; } /* Testimonial content - Match desktop styling (duplicate section removed - using main section above) */ /* Testimonial indicators - Match desktop styling */ .services-page .panel > .related-row .testimonial-indicators { margin-top: 10px !important; /* Match desktop */ padding-top: 10px !important; /* Match desktop */ gap: 6px !important; /* Match desktop */ } .services-page .panel > .related-row .testimonial-indicator { width: 8px !important; /* Match desktop */ height: 8px !important; /* Match desktop */ } /* Projects gallery - Match services-tabs.js mobile styling */ .services-page .panel > .related-row .project-gallery { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 15px !important; padding: 0 !important; } .services-page .panel > .related-row .project-item { aspect-ratio: 1 / 1 !important; border-radius: var(--radius-sm) !important; transition: transform 0.2s !important; } .services-page .panel > .related-row .project-item:hover { transform: scale(1.05) !important; } .services-page .panel > .related-row .project-item .hover-text { font-size: 10px !important; padding: 3px 5px !important; } .services-page .panel > .related-row .full-portfolio-btn { font-size: 14px !important; padding: 10px 14px !important; width: 100% !important; } .services-page .panel-title { font-size: clamp(20px, 5vw, 24px); margin-bottom: 10px; } .services-page .panel-lead { font-size: 13px; margin-bottom: 14px; } .services-page .panel-bullets { margin-bottom: 16px; gap: 8px; } .services-page .panel-bullets li { font-size: 13px; } /* Related row styles handled by grid-row above */ .services-page .projects-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .services-page .pill { width: 260px; min-width: 240px; } .services-page .cta-row { margin-top: 12px; flex-wrap: wrap; gap: 10px; } .services-page .cta-row .btn-primary { flex: 1 1 100%; width: 100%; padding: 10px 18px; min-height: 42px; } .services-page .service-read-more { flex: 1 1 100%; width: 100%; justify-content: center; padding: 10px 18px; min-height: 42px; } /* MOBILE: Detailed view should replace content inline, not overlay */ .services-page .service-detailed-view { position: relative !important; /* Change from absolute to relative on mobile */ top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; grid-column: 1 !important; grid-row: 2 !important; /* Replace the content div position */ z-index: 10 !important; background: var(--bg) !important; border-radius: var(--radius-md) !important; padding: 20px 16px !important; overflow-y: visible !important; overflow-x: hidden !important; opacity: 0 !important; visibility: hidden !important; transform: none !important; /* Remove 3D transforms on mobile */ transform-origin: center !important; transition: opacity 0.4s ease, visibility 0.4s ease !important; box-shadow: none !important; border: none !important; min-height: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; display: none !important; /* Hidden by default */ } .services-page .service-detailed-view.is-visible { display: block !important; opacity: 1 !important; visibility: visible !important; } /* Hide content div when detailed view is visible on mobile */ .services-page .panel.has-detailed-view > div:first-of-type { display: none !important; /* Hide content div completely */ } /* Hide image when detailed view is visible on mobile */ .services-page .panel.has-detailed-view > .panel-media { display: none !important; /* Hide image completely */ } /* Keep related row visible */ .services-page .panel.has-detailed-view > .related-row { opacity: 1 !important; transform: none !important; pointer-events: auto !important; grid-row: 3 !important; /* Keep it in third position */ } .services-page .service-detailed-close { top: 16px; right: 16px; width: 40px; height: 40px; } .services-page .service-detailed-close svg { width: 20px; height: 20px; display: block; opacity: 1; visibility: visible; flex-shrink: 0; } .services-page .service-detailed-close svg line { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 1; fill: none; } .services-page .service-detailed-view.is-visible { padding: 20px 16px !important; margin-top: 0 !important; } .services-page .service-detailed-features, .services-page .service-detailed-benefits { grid-template-columns: 1fr !important; gap: 12px !important; } .services-page .service-detailed-section { margin-bottom: 20px !important; } .services-page .service-detailed-section:last-child { margin-bottom: 0 !important; } .services-page .service-detailed-title { font-size: 18px !important; margin-bottom: 10px !important; line-height: 1.3 !important; } .services-page .service-detailed-description { font-size: 16px !important; line-height: 1.6 !important; margin-bottom: 12px !important; } .services-page .service-detailed-feature, .services-page .service-detailed-benefit { font-size: 13px !important; line-height: 1.5 !important; padding: 8px 0 !important; } .services-page .service-detailed-cta { margin-top: 16px !important; } .services-page .card { padding: 6px 8px 4px !important; /* MINIMAL - override desktop 28px 24px 24px */ min-height: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; } .services-page .card-title { font-size: 15px; margin-bottom: 10px; } .services-page .testimonial-text { font-size: 13px; margin-bottom: 12px; } .services-page .client-row { margin-top: 10px; } /* ============================================ PREMIUM SERVICES PAGE - MOBILE ============================================ */ [data-premium-services-page] .premium-hero { min-height: auto; margin-top: -80px; } [data-premium-services-page] .premium-hero-inner { text-align: left; } [data-premium-services-page] .premium-title { font-size: clamp(2.5rem, 8vw, 4rem); } [data-premium-services-page] .premium-subtitle { font-size: clamp(1rem, 3vw, 1.25rem); } [data-premium-services-page] .premium-hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; } [data-premium-services-page] .premium-hero-btn { width: 100%; margin-left: 0; margin-top: 0.5rem; } [data-premium-services-page] .premium-hero-metrics { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 2rem; } /* Override desktop .premium-section styles - FORCE MOBILE WIDTH */ [data-premium-services-page] .premium-section { padding: clamp(1rem, 2.5vw, 1.5rem) clamp(0.75rem, 2vw, 1rem) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; /* Override desktop positioning */ position: relative !important; left: 0 !important; right: 0 !important; transform: none !important; } /* Parent container - must not constrain slider */ [data-premium-services-page] .premium-services-container { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; display: block !important; position: relative !important; left: 0 !important; right: 0 !important; } [data-premium-services-page] .premium-services-showcase { width: 100% !important; max-width: 100% !important; padding: clamp(2rem, 4vw, 3rem) 0 !important; margin: 0 auto !important; box-sizing: border-box !important; } /* Override desktop .premium-section-inner max-width: 1400px - FORCE MOBILE WIDTH */ [data-premium-services-page] .premium-section-inner { grid-template-columns: 1fr !important; min-height: auto !important; gap: clamp(1.25rem, 2.5vw, 1.75rem) !important; padding: 0 !important; align-items: center !important; justify-items: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* CRITICAL: Override desktop max-width: 1400px */ margin: 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; box-sizing: border-box !important; overflow-x: hidden !important; /* Force exact sizing - no desktop constraints */ position: relative !important; left: 0 !important; right: 0 !important; } /* Ensure all children of .premium-section-inner are centered */ [data-premium-services-page] .premium-section-inner > * { text-align: center !important; margin-left: auto !important; margin-right: auto !important; } /* Override ALL desktop and tablet styles for premium-media - MAXIMUM SPECIFICITY */ /* This MUST override desktop .premium-media and [data-premium-services-page] .premium-media */ [data-premium-services-page] .premium-section.premium-section--left .premium-section-inner .premium-media, [data-premium-services-page] .premium-section.premium-section--right .premium-section-inner .premium-media, [data-premium-services-page] .premium-section .premium-section-inner .premium-media, [data-premium-services-page] .premium-section-inner .premium-media, [data-premium-services-page] .premium-section .premium-media, [data-premium-services-page] .premium-media, .premium-section-inner .premium-media, .premium-section .premium-media, .premium-media { order: -1 !important; min-height: clamp(180px, 35vw, 220px) !important; max-height: 220px !important; height: auto !important; aspect-ratio: 4 / 3 !important; border-right: none !important; border-bottom: 1px solid var(--premium-border) !important; width: 100% !important; max-width: 100% !important; margin: 0 auto clamp(1.25rem, 2.5vw, 1.75rem) auto !important; border-radius: 12px !important; display: block !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; overflow: hidden !important; flex-shrink: 0 !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important; } [data-premium-services-page] .premium-copy { padding: 0 !important; width: 100% !important; max-width: 100% !important; align-items: center !important; align-self: center !important; text-align: center !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: clamp(0.875rem, 2vw, 1.25rem) !important; box-sizing: border-box !important; margin: 0 auto !important; } /* Specific mobile classes for premium-copy elements - MAXIMUM SPECIFICITY */ [data-premium-services-page] .premium-copy-mobile { align-items: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } /* Force all direct children of premium-copy-mobile to be centered */ [data-premium-services-page] .premium-copy-mobile > * { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 100% !important; } /* Exception for pills list - it should center its items */ [data-premium-services-page] .premium-copy-mobile > .premium-pills-list-mobile { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Exception for grid - it should center its items */ [data-premium-services-page] .premium-copy-mobile > .premium-grid-mobile { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Exception for CTA row - it should center its items */ [data-premium-services-page] .premium-copy-mobile > .premium-cta-row-mobile { width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; align-items: center !important; } /* Maximum specificity for label - override desktop styles - FORCE CENTERED */ [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-label-mobile, [data-premium-services-page] .premium-copy-mobile .premium-label-mobile, [data-premium-services-page] .premium-label-mobile, [data-premium-services-page] .premium-section .premium-section-inner .premium-copy-mobile .premium-label-mobile, [data-premium-services-page] .premium-section-inner .premium-copy .premium-label-mobile { text-align: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; display: block !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Maximum specificity for heading - override desktop styles - FORCE CENTERED */ [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-heading-mobile, [data-premium-services-page] .premium-copy-mobile .premium-heading-mobile, [data-premium-services-page] .premium-heading-mobile, [data-premium-services-page] .premium-section .premium-section-inner .premium-copy-mobile .premium-heading-mobile, [data-premium-services-page] .premium-section-inner .premium-copy .premium-heading-mobile { text-align: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; display: block !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-heading-mobile span, [data-premium-services-page] .premium-copy-mobile .premium-heading-mobile span, [data-premium-services-page] .premium-heading-mobile span { text-align: center !important; display: inline !important; } /* Maximum specificity for lead - override desktop text-align: left - FORCE CENTERED */ [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-lead-mobile, [data-premium-services-page] .premium-copy-mobile .premium-lead-mobile, [data-premium-services-page] .premium-lead-mobile, [data-premium-services-page] .premium-section-inner .premium-copy .premium-lead-mobile, [data-premium-services-page] .premium-section .premium-section-inner .premium-copy-mobile .premium-lead-mobile, [data-premium-services-page] .premium-section .premium-section-inner .premium-copy .premium-lead-mobile { text-align: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; display: block !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* More specific selectors for elements within .premium-copy */ [data-premium-services-page] .premium-copy .premium-label, [data-premium-services-page] .premium-copy .premium-heading, [data-premium-services-page] .premium-copy .premium-lead { text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; display: block !important; } /* Override any desktop text-align: left styles with maximum specificity */ [data-premium-services-page] .premium-section-inner .premium-copy .premium-lead, [data-premium-services-page] .premium-section-inner .premium-copy .premium-label, [data-premium-services-page] .premium-section-inner .premium-copy .premium-heading { text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* Ensure premium-heading span is also centered */ [data-premium-services-page] .premium-section-inner .premium-copy .premium-heading span { text-align: center !important; display: inline !important; } [data-premium-services-page] .premium-copy .premium-pills-list { gap: clamp(0.375rem, 1vw, 0.5rem) !important; justify-content: center !important; align-items: center !important; align-content: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(1.5rem, 2.5vw, 2rem) !important; display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; padding: 0 clamp(0.5rem, 1vw, 0.75rem) !important; box-sizing: border-box !important; } /* Specific mobile class for pills list - MAXIMUM SPECIFICITY */ [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-pills-list-mobile, [data-premium-services-page] .premium-copy-mobile .premium-pills-list-mobile, [data-premium-services-page] .premium-pills-list-mobile { gap: clamp(0.375rem, 1vw, 0.5rem) !important; justify-content: center !important; align-items: center !important; align-content: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(1.5rem, 2.5vw, 2rem) !important; display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; padding: 0 clamp(0.5rem, 1vw, 0.75rem) !important; box-sizing: border-box !important; } [data-premium-services-page] .premium-copy .premium-pills-list li { font-size: clamp(0.6875rem, 1.5vw, 0.8125rem) !important; padding: clamp(0.5rem, 1.2vw, 0.625rem) clamp(0.75rem, 2vw, 1rem) !important; white-space: normal !important; text-align: center !important; width: auto !important; min-width: 0 !important; max-width: calc(50% - 0.25rem) !important; flex: 0 1 calc(50% - 0.25rem) !important; flex-shrink: 1 !important; flex-grow: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; line-height: 1.3 !important; } /* Specific mobile class for pill items - SMALLER AND PROPERLY DISTRIBUTED - MAXIMUM SPECIFICITY */ [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-pills-list-mobile .premium-pill-item, [data-premium-services-page] .premium-copy-mobile .premium-pills-list-mobile .premium-pill-item, [data-premium-services-page] .premium-pills-list-mobile .premium-pill-item, [data-premium-services-page] .premium-pill-item { font-size: clamp(0.5625rem, 1.2vw, 0.6875rem) !important; padding: clamp(0.4375rem, 1vw, 0.5625rem) clamp(0.625rem, 1.5vw, 0.875rem) !important; white-space: normal !important; text-align: center !important; width: auto !important; min-width: 0 !important; max-width: calc(50% - 0.5rem) !important; flex: 0 1 calc(50% - 0.5rem) !important; flex-shrink: 1 !important; flex-grow: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; line-height: 1.25 !important; } [data-premium-services-page] .premium-copy .premium-grid { grid-template-columns: 1fr !important; gap: clamp(1.5rem, 3vw, 2rem) !important; width: 100% !important; max-width: 100% !important; justify-items: center !important; align-items: start !important; margin: clamp(1.5rem, 3vw, 2rem) auto !important; padding: 0 !important; box-sizing: border-box !important; display: grid !important; } [data-premium-services-page] .premium-copy .premium-grid-item { width: 100% !important; max-width: 100% !important; text-align: center !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; display: block !important; } /* Specific mobile class for grid items - centered */ [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-grid-mobile .premium-grid-item-mobile, [data-premium-services-page] .premium-copy-mobile .premium-grid-mobile .premium-grid-item-mobile, [data-premium-services-page] .premium-grid-mobile .premium-grid-item-mobile, [data-premium-services-page] .premium-grid-item-mobile { width: 100% !important; max-width: 100% !important; text-align: center !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; display: block !important; } [data-premium-services-page] .premium-copy .premium-grid-item h3 { font-size: clamp(0.875rem, 2vw, 1rem) !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important; display: block !important; padding: 0 !important; } /* Specific mobile class for grid titles - FORCE CENTERED - MAXIMUM SPECIFICITY */ [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-grid-mobile .premium-grid-item-mobile .premium-grid-title, [data-premium-services-page] .premium-copy-mobile .premium-grid-mobile .premium-grid-item-mobile .premium-grid-title, [data-premium-services-page] .premium-grid-mobile .premium-grid-item-mobile .premium-grid-title, [data-premium-services-page] .premium-grid-item-mobile .premium-grid-title, [data-premium-services-page] .premium-grid-title { font-size: clamp(0.875rem, 2vw, 1rem) !important; text-align: center !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important; display: block !important; padding: 0 !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Even more specific override for h3 within grid items */ [data-premium-services-page] .premium-section-inner .premium-copy .premium-grid .premium-grid-item h3 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; display: block !important; } /* Additional override for h3 to ensure centering */ [data-premium-services-page] .premium-copy .premium-grid-item h3, [data-premium-services-page] .premium-grid-item h3 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Override pills list alignment */ [data-premium-services-page] .premium-section-inner .premium-copy .premium-pills-list { justify-content: center !important; align-items: center !important; align-content: center !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; gap: clamp(0.375rem, 1vw, 0.5rem) !important; padding: 0 clamp(0.5rem, 1vw, 0.75rem) !important; } /* Ensure pills list items are centered and smaller */ [data-premium-services-page] .premium-section-inner .premium-copy .premium-pills-list li { text-align: center !important; justify-content: center !important; align-items: center !important; margin-left: auto !important; margin-right: auto !important; font-size: clamp(0.6875rem, 1.5vw, 0.8125rem) !important; padding: clamp(0.5rem, 1.2vw, 0.625rem) clamp(0.75rem, 2vw, 1rem) !important; max-width: calc(50% - 0.25rem) !important; flex: 0 1 calc(50% - 0.25rem) !important; line-height: 1.3 !important; } /* General styles (kept for backward compatibility) */ [data-premium-services-page] .premium-label { font-size: clamp(0.625rem, 0.8vw, 0.6875rem) !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(0.75rem, 1vw, 1rem) !important; display: block !important; } [data-premium-services-page] .premium-heading { font-size: clamp(1.75rem, 5vw, 2.5rem) !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important; display: block !important; } [data-premium-services-page] .premium-lead { font-size: clamp(0.9375rem, 1.3vw, 1.125rem) !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem) !important; padding: 0 !important; display: block !important; } [data-premium-services-page] .premium-pills-list { gap: clamp(0.375rem, 1vw, 0.5rem) !important; justify-content: center !important; align-items: center !important; align-content: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(1.5rem, 2.5vw, 2rem) !important; display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; padding: 0 clamp(0.5rem, 1vw, 0.75rem) !important; box-sizing: border-box !important; } [data-premium-services-page] .premium-pills-list li { font-size: clamp(0.6875rem, 1.5vw, 0.8125rem) !important; padding: clamp(0.5rem, 1.2vw, 0.625rem) clamp(0.75rem, 2vw, 1rem) !important; white-space: normal !important; text-align: center !important; width: auto !important; min-width: 0 !important; max-width: calc(50% - 0.25rem) !important; flex: 0 1 calc(50% - 0.25rem) !important; flex-shrink: 1 !important; flex-grow: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; word-break: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; line-height: 1.3 !important; } [data-premium-services-page] .premium-grid { grid-template-columns: 1fr !important; gap: clamp(1.5rem, 3vw, 2rem) !important; width: 100% !important; max-width: 100% !important; justify-items: center !important; align-items: start !important; margin: clamp(1.5rem, 3vw, 2rem) auto !important; padding: 0 !important; box-sizing: border-box !important; } [data-premium-services-page] .premium-grid-item { width: 100% !important; max-width: 100% !important; text-align: center !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; } [data-premium-services-page] .premium-grid-item h3 { font-size: clamp(0.875rem, 2vw, 1rem) !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important; display: block !important; padding: 0 !important; } [data-premium-services-page] .premium-steps { grid-template-columns: 1fr !important; gap: clamp(1.25rem, 3vw, 1.75rem) !important; width: 100% !important; max-width: 100% !important; } [data-premium-services-page] .premium-cta-row { width: 100% !important; max-width: 100% !important; align-items: center !important; text-align: center !important; margin-top: clamp(1.5rem, 3vw, 2rem) !important; margin-left: auto !important; margin-right: auto !important; gap: clamp(0.75rem, 1.5vw, 1rem) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 0 !important; } /* Specific mobile class for CTA row */ [data-premium-services-page] .premium-cta-row-mobile { width: 100% !important; max-width: 100% !important; align-items: center !important; text-align: center !important; margin-top: clamp(1.5rem, 3vw, 2rem) !important; margin-left: auto !important; margin-right: auto !important; gap: clamp(0.75rem, 1.5vw, 1rem) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 0 !important; } [data-premium-services-page] .premium-cta { width: auto !important; max-width: 90% !important; min-width: auto !important; padding: clamp(0.875rem, 1.8vw, 1rem) clamp(1.25rem, 2.5vw, 1.75rem) !important; font-size: clamp(0.75rem, 1.6vw, 0.875rem) !important; text-align: center !important; justify-content: center !important; align-items: center !important; align-self: center !important; display: flex !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } /* Specific mobile class for CTA - SMALLER AND CENTERED - MAXIMUM SPECIFICITY */ [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-cta-row-mobile .premium-cta-mobile, [data-premium-services-page] .premium-copy-mobile .premium-cta-row-mobile .premium-cta-mobile, [data-premium-services-page] .premium-cta-row-mobile .premium-cta-mobile, [data-premium-services-page] .premium-cta-mobile { width: auto !important; max-width: 85% !important; min-width: auto !important; padding: clamp(0.875rem, 1.8vw, 1rem) clamp(1.25rem, 2.5vw, 1.75rem) !important; font-size: clamp(0.8125rem, 1.7vw, 0.9375rem) !important; text-align: center !important; justify-content: center !important; align-items: center !important; align-self: center !important; display: flex !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } [data-premium-services-page] .premium-cta.btn { width: auto !important; max-width: 90% !important; align-self: center !important; } [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-cta-row-mobile .premium-cta-mobile.btn, [data-premium-services-page] .premium-copy-mobile .premium-cta-row-mobile .premium-cta-mobile.btn, [data-premium-services-page] .premium-cta-mobile.btn { width: auto !important; max-width: 85% !important; align-self: center !important; } [data-premium-services-page] .premium-copy .premium-cta-row .premium-cta, [data-premium-services-page] .premium-section-inner .premium-copy .premium-cta-row .premium-cta { width: auto !important; max-width: 90% !important; align-self: center !important; margin-left: auto !important; margin-right: auto !important; } [data-premium-services-page] .premium-cta span { text-align: center !important; width: 100% !important; display: block !important; margin: 0 auto !important; } [data-premium-services-page] .premium-check-list { width: 100% !important; max-width: 100% !important; text-align: center !important; display: block !important; font-size: clamp(0.875rem, 1.8vw, 1rem) !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; list-style: none !important; } [data-premium-services-page] .premium-check-list li { padding-left: clamp(1.75rem, 4vw, 2rem) !important; margin-bottom: clamp(0.75rem, 1.5vw, 1rem) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; text-align: left !important; margin-left: auto !important; margin-right: auto !important; position: relative !important; } /* Center the check-list container within grid items */ [data-premium-services-page] .premium-grid-item-mobile .premium-check-list, [data-premium-services-page] .premium-copy-mobile .premium-grid-mobile .premium-grid-item-mobile .premium-check-list, [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-grid-mobile .premium-grid-item-mobile .premium-check-list { text-align: left !important; margin-left: auto !important; margin-right: auto !important; width: 100% !important; max-width: 100% !important; display: block !important; padding: 0 !important; } [data-premium-services-page] .premium-grid-item-mobile .premium-check-list li, [data-premium-services-page] .premium-copy-mobile .premium-grid-mobile .premium-grid-item-mobile .premium-check-list li, [data-premium-services-page] .premium-section-inner .premium-copy-mobile .premium-grid-mobile .premium-grid-item-mobile .premium-check-list li { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } [data-premium-services-page] .premium-note { width: 100% !important; max-width: 100% !important; text-align: center !important; font-size: clamp(0.75rem, 1.5vw, 0.875rem) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } .premium-hero-separator{ margin: auto; } } /* ============================================ ABOUT PAGE - MOBILE (968px and below) ============================================ */ @media (max-width: 968px) { .about-hero { padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2rem); } .values-grid { grid-template-columns: 1fr; gap: 1.5rem; } .team-grid { grid-template-columns: 1fr; gap: 1.5rem; } .cta-inner { padding: 1.5rem; flex-direction: column; align-items: flex-start; } .cta-actions { width: 100%; justify-content: flex-start; } /* ============================================ PROJECTS PAGE - MOBILE ============================================ */ /* Ensure filters section displays properly on mobile */ .projects-page .projects-filters.is-fullscreen, .projects-filters.is-fullscreen.is-visible, section.projects-filters.is-fullscreen { padding: clamp(2rem, 4vw, 2.5rem) 0 clamp(2rem, 4vw, 2.5rem) !important; min-height: auto !important; max-height: none !important; height: auto !important; display: block !important; overflow-y: visible !important; overflow-x: hidden !important; margin-bottom: 0 !important; } /* Sidebar offset under sticky header on mobile/tablet */ .projects-page .projects-filters.is-sidebar { top: calc(var(--projects-header-offset) + env(safe-area-inset-top)) !important; height: calc(100vh - var(--projects-header-offset) - env(safe-area-inset-top)) !important; min-height: calc(100vh - var(--projects-header-offset) - env(safe-area-inset-top)) !important; max-height: calc(100vh - var(--projects-header-offset) - env(safe-area-inset-top)) !important; } .projects-page .projects-hero .projects-hero-inner, .projects-page #projects-hero .projects-hero-inner, section.projects-hero .projects-hero-inner, #projects-hero .projects-hero-inner { padding: 0 !important; } .projects-page .projects-hero .projects-eyebrow, .projects-page #projects-hero .projects-eyebrow, section.projects-hero .projects-eyebrow, #projects-hero .projects-eyebrow { font-size: clamp(0.6875rem, 1.3vw, 0.8125rem) !important; padding: clamp(0.625rem, 1.2vw, 0.75rem) clamp(1.5rem, 3vw, 2rem) !important; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem) !important; } .projects-page .projects-hero .projects-title, .projects-page #projects-hero .projects-title, section.projects-hero .projects-title, #projects-hero .projects-title { font-size: clamp(2rem, 5.5vw, 3rem) !important; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem) !important; line-height: 1.15 !important; } .projects-page .projects-hero .projects-subtitle, .projects-page #projects-hero .projects-subtitle, section.projects-hero .projects-subtitle, #projects-hero .projects-subtitle { font-size: clamp(0.9375rem, 2vw, 1.125rem) !important; margin-bottom: clamp(2rem, 4vw, 2.5rem) !important; line-height: 1.6 !important; } .projects-page .projects-hero .projects-hero-cta, .projects-page #projects-hero .projects-hero-cta, section.projects-hero .projects-hero-cta, #projects-hero .projects-hero-cta { padding: clamp(1rem, 2vw, 1.25rem) clamp(2rem, 4vw, 2.75rem) !important; font-size: clamp(0.875rem, 1.8vw, 1rem) !important; } .projects-hero-stats { grid-template-columns: 1fr; gap: 1.25rem; padding-top: 2rem; } .projects-stat { padding: 1.25rem; } /* CRITICAL: 2-column grid with proper gaps to fit all 11 buttons - MAXIMUM SPECIFICITY */ .projects-page .projects-filters.is-fullscreen .projects-filters-grid, .projects-filters.is-fullscreen.is-visible .projects-filters-grid, section.projects-filters.is-fullscreen .projects-filters-grid, .projects-filters.is-fullscreen .projects-filters-grid { grid-template-columns: repeat(2, 1fr) !important; gap: clamp(0.75rem, 1.5vw, 1rem) !important; row-gap: clamp(0.75rem, 1.5vw, 1rem) !important; column-gap: clamp(0.75rem, 1.5vw, 1rem) !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; flex: none !important; display: grid !important; align-content: start !important; overflow-y: visible !important; overflow-x: hidden !important; margin-bottom: clamp(1rem, 2vw, 1.5rem) !important; min-height: auto !important; height: auto !important; max-height: none !important; grid-auto-rows: auto !important; visibility: visible !important; opacity: 1 !important; padding-bottom: 0 !important; } /* CRITICAL: Ensure ALL filter buttons are visible - MAXIMUM SPECIFICITY */ .projects-page .projects-filters.is-fullscreen .projects-filter-btn, .projects-filters.is-fullscreen.is-visible .projects-filter-btn, section.projects-filters.is-fullscreen .projects-filters-grid .projects-filter-btn, .projects-filters.is-fullscreen .projects-filters-grid .projects-filter-btn { display: flex !important; visibility: visible !important; opacity: 1 !important; position: relative !important; z-index: 1 !important; } /* CRITICAL: Proper button size for mobile - MAXIMUM SPECIFICITY */ .projects-page .projects-filters.is-fullscreen .projects-filter-btn, .projects-filters.is-fullscreen.is-visible .projects-filter-btn, section.projects-filters.is-fullscreen .projects-filters-grid .projects-filter-btn, .projects-filters.is-fullscreen .projects-filters-grid .projects-filter-btn { padding: clamp(0.875rem, 2vw, 1rem) clamp(0.75rem, 1.5vw, 0.875rem) !important; font-size: clamp(0.75rem, 1.8vw, 0.875rem) !important; min-height: 56px !important; max-height: none !important; height: auto !important; width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: clamp(0.75rem, 1.5vw, 1rem) !important; border-radius: 12px !important; line-height: 1.3 !important; } /* CRITICAL: Proper icon size for mobile - MAXIMUM SPECIFICITY */ .projects-page .projects-filters.is-fullscreen .projects-filter-icon, .projects-filters.is-fullscreen.is-visible .projects-filter-icon, section.projects-filters.is-fullscreen .projects-filter-btn .projects-filter-icon, .projects-filters.is-fullscreen .projects-filter-btn .projects-filter-icon { width: clamp(36px, 4.5vw, 40px) !important; height: clamp(36px, 4.5vw, 40px) !important; min-width: clamp(36px, 4.5vw, 40px) !important; min-height: clamp(36px, 4.5vw, 40px) !important; flex-shrink: 0 !important; } .projects-page .projects-filters.is-fullscreen .projects-filter-icon svg, .projects-filters.is-fullscreen.is-visible .projects-filter-icon svg, section.projects-filters.is-fullscreen .projects-filter-icon svg, .projects-filters.is-fullscreen .projects-filter-icon svg { width: clamp(18px, 2.25vw, 20px) !important; height: clamp(18px, 2.25vw, 20px) !important; } .projects-page .projects-filters.is-fullscreen .projects-filter-text, .projects-filters.is-fullscreen.is-visible .projects-filter-text, section.projects-filters.is-fullscreen .projects-filter-text, .projects-filters.is-fullscreen .projects-filter-text { font-size: clamp(0.8125rem, 2vw, 0.9375rem) !important; line-height: 1.3 !important; text-align: left !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } /* Regular filters (non-fullscreen) - for sidebar mode */ .projects-filters:not(.is-fullscreen) { padding: clamp(2rem, 4vw, 2.5rem) 0; } /* Sidebar offset for sticky header (mobile/tablet) */ .projects-page .projects-filters.is-sidebar { top: calc(var(--projects-header-offset) + env(safe-area-inset-top)) !important; height: calc(100vh - var(--projects-header-offset) - env(safe-area-inset-top)) !important; min-height: calc(100vh - var(--projects-header-offset) - env(safe-area-inset-top)) !important; max-height: calc(100vh - var(--projects-header-offset) - env(safe-area-inset-top)) !important; } .projects-filters-header { margin-bottom: 1.5rem; } .projects-filters-title { font-size: 30px !important; } .projects-filters-subtitle { font-size: 0.9375rem; } .projects-filters-inner { padding: 0 1rem; } .projects-filters-grid { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; } .projects-filter-btn { padding: 1.25rem 0.875rem; gap: 0.5rem; border-radius: 16px; } .projects-filter-icon { width: 36px; height: 36px; } .projects-filter-icon svg { width: 18px; height: 18px; } .projects-filter-text { font-size: 0.8125rem; line-height: 1.3; } /* Regular filters section - independent from hero */ .projects-filters:not(.is-fullscreen) .projects-hero-cta { padding: 1rem 2rem; font-size: 0.875rem; gap: 0.625rem; } .projects-filters:not(.is-fullscreen) .projects-hero-cta svg { width: 18px; height: 18px; } /* ============================================ PROJECTS GRID SECTION - MOBILE HEIGHT FIX ============================================ */ /* ============================================ PROJECTS GRID SECTION - UNIFIED SPACING SOLUTION CRITICAL: Maximum specificity to override desktop and ensure consistent spacing ============================================ */ .projects-page .projects-grid-section, .projects-page section.projects-grid-section, section.projects-grid-section, .projects-page #projects-grid-section, #projects-grid-section { /* Remove all height constraints from desktop */ min-height: auto !important; height: auto !important; max-height: none !important; /* CRITICAL: Override desktop position: absolute */ position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; /* Normal padding for mobile */ padding: clamp(2.5rem, 5vw, 3rem) clamp(1rem, 3vw, 1.5rem); /* CRITICAL: Proper bottom padding to prevent footer overlap - ONLY FOR PROJECTS GRID SECTION */ padding-bottom: clamp(6rem, 12vw, 8rem) !important; /* CRITICAL: Proper bottom margin for clear separation */ margin-bottom: 0 !important; /* Ensure proper containment */ max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; /* Remove any transform that might affect layout */ transform: none !important; /* Ensure footer stays on top */ z-index: 1 !important; } /* CRITICAL: Override all visible/active states with maximum specificity */ .projects-page .projects-grid-section.is-visible, .projects-page .projects-grid-section.is-active, .projects-page .projects-grid-section.is-visible.is-active, .projects-page section.projects-grid-section.is-visible, .projects-page section.projects-grid-section.is-active, section.projects-grid-section.is-visible, section.projects-grid-section.is-active, .projects-page #projects-grid-section.is-visible, .projects-page #projects-grid-section.is-active, #projects-grid-section.is-visible, #projects-grid-section.is-active { /* Remove all height constraints */ min-height: auto !important; height: auto !important; max-height: none !important; /* CRITICAL: Override desktop position: absolute */ position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; /* CRITICAL: Proper spacing for all active states - OVERRIDE ALL DESKTOP STYLES */ padding-top: clamp(2rem, 4vw, 2.5rem) !important; padding-left: clamp(1rem, 3vw, 1.5rem) !important; padding-right: clamp(1rem, 3vw, 1.5rem) !important; padding-bottom: clamp(6rem, 12vw, 8rem) !important; margin-bottom: 0 !important; /* Ensure content stays within section - prevent overlap */ overflow: visible !important; max-width: 100% !important; box-sizing: border-box !important; /* Critical: Lower z-index to ensure footer stays on top */ z-index: 1 !important; /* Remove transforms */ transform: none !important; } .projects-page .projects-grid-section::after, .projects-page section.projects-grid-section::after, #projects-grid-section::after { content: '' !important; display: block !important; height: clamp(6rem, 12vw, 8rem) !important; } /* Projects grid - UNIFIED spacing solution */ .projects-page .projects-grid, .projects-page #projects-grid, #projects-grid { grid-template-columns: 1fr; gap: 1.25rem; /* Ensure enough space before footer */ padding-bottom: clamp(6rem, 12vw, 8rem) !important; margin-bottom: 0 !important; /* Ensure grid content stays within container */ position: relative !important; overflow: visible !important; max-width: 100% !important; box-sizing: border-box !important; /* Lower z-index to ensure footer stays on top */ z-index: 1 !important; } /* Ensure project items don't overlap footer */ .projects-page .projects-item { position: relative !important; z-index: 1 !important; margin-bottom: 1.25rem !important; } /* Container spacing - UNIFIED solution */ .projects-page .projects-grid-container, .projects-page #projects-grid-container, #projects-grid-container { /* UNIFIED: Remove extra padding - let section handle spacing */ padding-bottom: 0 !important; margin-bottom: 0 !important; box-sizing: border-box !important; max-width: 100% !important; position: relative !important; overflow: visible !important; /* Lower z-index to ensure footer stays on top */ z-index: 1 !important; } .projects-item-media { padding-top: 70%; } .projects-item-overlay { padding: 1.5rem; } .projects-item-title { font-size: 1.25rem; } .projects-item-description { font-size: 0.875rem; } .projects-item-footer { padding: 1rem 1.25rem; } /* UNIFIED: Last project item - proper spacing to prevent footer overlap - MAXIMUM SPECIFICITY */ .projects-page .projects-item:last-child, .projects-page .projects-grid .projects-item:last-child, .projects-page .projects-grid-section .projects-item:last-child, .projects-page .projects-grid-section.is-visible .projects-item:last-child, .projects-page .projects-grid-section.is-active .projects-item:last-child, .projects-page .projects-grid-section.is-visible.is-active .projects-item:last-child, .projects-page section.projects-grid-section .projects-item:last-child, .projects-page section.projects-grid-section.is-visible .projects-item:last-child, .projects-page section.projects-grid-section.is-active .projects-item:last-child, .projects-page section.projects-grid-section.is-visible.is-active .projects-item:last-child, section.projects-grid-section .projects-item:last-child, section.projects-grid-section.is-visible .projects-item:last-child, section.projects-grid-section.is-active .projects-item:last-child, section.projects-grid-section.is-visible.is-active .projects-item:last-child, .projects-page #projects-grid-section .projects-item:last-child, .projects-page #projects-grid-section.is-visible .projects-item:last-child, .projects-page #projects-grid-section.is-active .projects-item:last-child, .projects-page #projects-grid-section.is-visible.is-active .projects-item:last-child, #projects-grid-section .projects-item:last-child, #projects-grid-section.is-visible .projects-item:last-child, #projects-grid-section.is-active .projects-item:last-child, #projects-grid-section.is-visible.is-active .projects-item:last-child { margin-bottom: clamp(2rem, 4vw, 3rem) !important; padding-bottom: 0 !important; } /* Ensure empty state and load more also have balanced spacing - specific selector */ .projects-page .projects-empty, .projects-page .projects-load-more { padding-top: clamp(1rem, 2vw, 1.5rem) !important; padding-bottom: clamp(1rem, 2vw, 1.5rem) !important; margin-bottom: clamp(1rem, 2vw, 1.5rem) !important; } /* Override reveal container height constraints - specific selector */ .projects-page .projects-reveal-container, .projects-page #projects-reveal-container, #projects-reveal-container { /* Remove desktop min-height: 100vh */ min-height: auto !important; height: auto !important; max-height: none !important; /* NO bottom spacing - only projects-grid-section should have spacing */ padding-bottom: 0 !important; margin-bottom: 0 !important; position: relative !important; box-sizing: border-box !important; } /* Override projects page wrapper height constraints - specific selector */ .projects-page { /* Remove desktop min-height: 100vh */ min-height: auto !important; height: auto !important; max-height: none !important; /* Ensure proper containment - NO SPACING HERE */ overflow-x: hidden !important; position: relative !important; box-sizing: border-box !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* CRITICAL: Remove all spacing from hero and filters - only grid section should have spacing */ .projects-page .projects-hero, .projects-page #projects-hero, section.projects-hero, #projects-hero, .projects-page .projects-filters, .projects-page #projects-filters, section.projects-filters, #projects-filters { margin-bottom: 0 !important; } .projects-page .projects-filters.is-fullscreen .projects-filters-inner, .projects-filters.is-fullscreen.is-visible .projects-filters-inner, section.projects-filters.is-fullscreen .projects-filters-inner { margin-bottom: 0 !important; padding-bottom: clamp(0.5rem, 1vw, 0.75rem) !important; } /* Ensure footer stays above projects grid - CRITICAL for preventing overlap */ .site-footer, footer, .footer, .projects-page ~ footer, .projects-page ~ .site-footer, .projects-page ~ .footer { position: relative !important; z-index: 10 !important; background-color: inherit !important; margin-top: 0 !important; /*padding-top: clamp(2rem, 4vw, 3rem) !important;*/ } } /* ============================================ BREAKPOINT: 796px (Mobile Large) ============================================ */ /* Mobile layout for services (tabs slider + stacked cards) */ @media (max-width: 796px) { /* Section padding slightly tighter on phones */ .section { padding: 16px; } /* Stack services: tabs + panel one under the other - CRITICAL: Override desktop grid */ .services { display: block !important; /* CRITICAL: Override desktop display: grid */ grid-template-columns: 1fr !important; min-height: auto !important; gap: 0 !important; position: relative; z-index: 1; } /* ---------- TABS: HORIZONTAL SLIDER RAIL ---------- */ /* CRITICAL: Override desktop sidebar styles */ .tabs { border: none !important; /* CRITICAL: Override desktop border */ box-shadow: none !important; /* CRITICAL: Override desktop box-shadow */ background: transparent !important; /* CRITICAL: Override desktop background */ padding: 0 0 10px !important; /* CRITICAL: Override desktop padding */ margin-bottom: 10px; position: relative; z-index: 2; isolation: auto; } .tabs h3 { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 4px 6px; } /* Horizontal scroll container - CRITICAL: Override desktop column layout */ .tablist { display: flex !important; /* CRITICAL: Override desktop display: flex with flex-direction: column */ flex-direction: row !important; /* CRITICAL: Override desktop flex-direction: column */ flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 0 4px 8px; margin: 0; list-style: none; scrollbar-width: thin; width: 100%; } .tablist::-webkit-scrollbar { height: 4px; } .tablist::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 999px; } /* Each li behaves like a slide */ .tablist > li { flex: 0 0 auto; height: 70px; margin-top: 5px; width: auto; } /* Tab button as a compact pill card - CRITICAL: Override desktop grid layout */ .tab-btn { display: flex !important; /* CRITICAL: Override desktop display: grid */ align-items: center; gap: 10px; flex: 0 0 auto; min-width: 190px; /* makes ~4–5 tabs visible across larger phones */ height: 65px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--brand-2); background: var(--bg); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06); scroll-snap-align: start; outline-offset: 3px; grid-template-columns: none !important; /* override desktop grid */ grid-template-rows: none !important; grid-auto-flow: unset !important; width: auto; text-align: left; } .tab-btn .tab-icon { width: 32px; height: 32px; border-radius: 999px; background: var(--card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .tab-btn .tab-name { font-size: 14px; font-weight: 600; line-height: 1.2; display: block; } .tab-btn .tab-desc { font-size: 12px; opacity: 0.75; margin-top: -15px; display: block; } /* Keep arrow pushed to the far right */ .tab-btn svg:last-child { flex-shrink: 0; } /* Selected state – strong but not cartoonish */ .tab-btn[aria-selected="true"] { background: var(--brand-blue) !important; /* CRITICAL: Override desktop transparent background */ border-color: var(--brand-blue) !important; color: var(--text-white) !important; box-shadow: 0 6px 16px rgba(0, 60, 255, 0.25) !important; } .tab-btn[aria-selected="true"] .tab-icon { background: rgba(255, 255, 255, 0.2) !important; color: var(--text-white) !important; } /* ---------- PANELS: CARD LAYOUT ---------- */ /* CRITICAL: Override desktop position: absolute to prevent panel appearing underneath slider */ .content { position: static !important; height: auto !important; margin-top: 4px !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; } .service-panel-content { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; border-radius: var(--radius) !important; border: 1px solid var(--stroke) !important; padding: 20px 16px !important; /* Proper padding for card containment */ margin-top: 8px !important; gap: 20px !important; /* Proper gap for spacing between hero and related content */ display: none !important; /* only active panel shows - will be overridden by [data-active="true"] */ top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: auto !important; max-height: none !important; grid-template-rows: none !important; /* Override desktop grid-template-rows: 1fr auto */ grid-template-columns: none !important; flex-direction: column !important; /* Use flexbox instead of grid */ box-sizing: border-box !important; overflow: visible !important; } .service-panel-content[data-active="true"] { display: flex !important; /* Use flexbox for active panel */ flex-direction: column !important; } /* CRITICAL: Override desktop grid layout for service panel content inner structure */ .service-panel-content > * { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; flex-shrink: 0 !important; overflow: visible !important; } /* Ensure hero section takes proper space */ .service-panel-content > .hero { order: 1 !important; } /* Ensure related content appears after hero */ .service-panel-content > .related-content-grid { order: 2 !important; } /* CTA Row - Mobile responsive */ .service-panel-content .cta-row { display: flex !important; flex-direction: column !important; gap: 0 !important; /* Disable gap, use explicit margins instead for better control */ width: 100% !important; max-width: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; box-sizing: border-box !important; } .service-panel-content .cta-row .btn { width: 100% !important; flex: 1 1 100% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 24px !important; border-radius: 99px !important; font-weight: 600 !important; font-size: 16px !important; text-align: center !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* CRITICAL: Add explicit margin-bottom to first button for proper spacing */ .service-panel-content .cta-row .btn:first-child { margin-bottom: 24px !important; /* Explicit spacing between buttons */ } /* CRITICAL: Ensure second button has no top margin */ .service-panel-content .cta-row .btn:not(:first-child) { margin-top: 0 !important; margin-bottom: 0 !important; } .service-panel-content .cta-row .btn.service-cta { flex: 1 1 100% !important; background: var(--gradient-orange) !important; color: var(--bg) !important; border: none !important; } .service-panel-content .cta-row .btn.service-page-link { flex: 1 1 100% !important; width: 100% !important; background: transparent !important; color: var(--brand-2) !important; border: 1px solid var(--brand-2) !important; } .service-panel-content .cta-row .btn.service-page-link:hover { background: var(--brand-blue) !important; color: var(--bg) !important; } /* HERO: image first, then copy (mobile card style) */ /* CRITICAL: Override desktop grid layout */ .hero { display: flex !important; /* Override desktop display: grid */ flex-direction: column !important; /* Override desktop grid-template-columns: 1fr 1.1fr */ gap: 14px !important; grid-template-columns: none !important; grid-template-rows: none !important; overflow: visible !important; /* Override desktop overflow: hidden */ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } .hero .media { order: -1 !important; /* image on top */ min-height: 220px !important; width: 100% !important; max-width: 100% !important; height: auto !important; position: relative !important; border-radius: var(--radius-sm) !important; overflow: hidden !important; box-sizing: border-box !important; margin: 0 !important; } /* CRITICAL: Ensure image inside .hero .media has rounded corners */ .hero .media img, .hero .media > img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: var(--radius-sm) !important; /* Match parent border-radius */ display: block !important; } .hero .badge { position: absolute !important; top: 15px !important; right: 15px !important; background: rgba(0, 0, 0, 0.5) !important; color: white !important; padding: 6px 10px !important; border-radius: 99px !important; font-size: 12px !important; font-weight: 600 !important; z-index: 2 !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .hero .copy { padding-right: 0 !important; padding-left: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100% !important; max-width: 100% !important; order: 1 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* Ensure all copy elements are visible and properly ordered */ .hero .copy > * { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } .hero .eyebrow { font-size: 12px !important; text-transform: uppercase !important; color: var(--brand-2) !important; /* Orange color for eyebrow */ margin-bottom: 8px !important; font-weight: 600 !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .hero .h2 { font-size: 22px !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 16px !important; display: block !important; visibility: visible !important; opacity: 1 !important; color: var(--text) !important; width: 100% !important; max-width: 100% !important; overflow-wrap: break-word !important; word-wrap: break-word !important; hyphens: auto !important; } .hero .lead { font-size: 14px !important; color: var(--muted) !important; margin-bottom: 20px !important; line-height: 1.6 !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .hero .bullets { display: grid !important; /* Keep grid for bullets */ grid-template-columns: repeat(2, 1fr) !important; /* Two equal columns for better space distribution */ gap: 12px 16px !important; /* Optimized gap: 12px vertical, 16px horizontal for better space usage */ list-style: none !important; padding: 0 !important; margin: 0 0 20px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: visible !important; align-items: start !important; /* Align items to start for consistent height */ } .hero .bullets li { display: flex !important; align-items: center !important; font-size: 15px !important; font-weight: 600 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-wrap: break-word !important; min-width: 0 !important; /* Allow flex items to shrink below content size */ flex: 1 1 auto !important; /* Allow items to grow/shrink equally for better distribution */ text-align: left !important; /* Left align text for better readability */ } .hero .bullets li svg { color: var(--brand-2) !important; /* Orange checkmark */ margin-right: 8px !important; min-width: 18px !important; flex-shrink: 0 !important; } /* ---------- RELATED CONTENT: STACKED CARDS & 2×2 GRID ---------- */ /* CRITICAL: Override desktop grid layout (1fr 1.5fr) to stack cards vertically */ .related-content-grid { display: flex !important; /* Override desktop display: grid */ flex-direction: column !important; /* Override desktop grid-template-columns: 1fr 1.5fr */ gap: 12px !important; margin-top: 10px !important; grid-template-columns: none !important; grid-template-rows: none !important; align-items: stretch !important; padding-top: 10px !important; margin-bottom: 0 !important; } .content-card { padding: 16px !important; background: var(--card) !important; border: 1px solid var(--stroke) !important; border-radius: var(--radius-sm) !important; display: flex !important; flex-direction: column !important; min-height: 200px !important; width: 100% !important; box-sizing: border-box !important; } .content-card .card-title { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 15px !important; color: var(--text) !important; } .testimonial-text { font-size: 14px !important; font-style: italic !important; margin: 10px 0 15px !important; flex-grow: 1 !important; } .project-gallery { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 15px !important; } .project-item { aspect-ratio: 1 / 1 !important; border-radius: var(--radius-sm) !important; overflow: hidden !important; } .full-portfolio-btn { font-size: 14px !important; padding: 10px 14px !important; width: 100% !important; background: transparent !important; color: var(--brand-2) !important; border: 1px solid var(--brand-2) !important; border-radius: var(--radius-sm) !important; font-weight: 600 !important; } .full-portfolio-btn:hover { background: var(--brand-blue) !important; color: var(--bg) !important; } /* Process Section */ .process-section { margin-top: 5px; padding-block: 2.25rem 2.75rem; } .process-wrapper { margin-top: 1.5rem; } .process-viewport { overflow: hidden; /* hides off-screen cards */ } .process-grid { display: flex; /* horizontal track */ gap: 0; width: 100%; transform: translateX(0); } .process-step { flex: 0 0 100%; /* one card = full width */ max-width: 100%; height: 250px; } .process-step.is-current { box-shadow: 0 22px 40px rgba(0, 0, 0, 0.3); } /* Show meta (progress + dots) only on mobile */ .process-meta { display: block; margin-top: 1rem; text-align: center; } .process-progress { width: 100%; height: 4px; border-radius: 999px; background: rgba(15, 23, 42, 0.08); overflow: hidden; } .process-progress-fill { --process-progress: 0%; width: var(--process-progress); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--about-accent), var(--about-accent-strong)); transition: width 0.25s ease-out; } .process-meta-bottom { margin-top: 0.55rem; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .process-counter { font-size: 0.85rem; font-weight: 500; color: var(--muted); /* Note: Using muted color for text */ } .process-counter .divider { opacity: 0.6; margin: 0 2px; } .process-dots { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; } .process-dot { width: 10px; height: 10px; border-radius: 999px; border: none; padding: 0; background: rgba(148, 163, 184, 0.55); cursor: pointer; transition: background 0.22s ease-out, transform 0.22s ease-out, width 0.22s ease-out; } .process-dot.is-active { width: 22px; background: var(--about-accent); transform: translateY(-1px); } /* About Page */ .about-hero { padding-top: 2.8rem; } .hero-stats { padding: 1rem; gap: 1rem; } .values-grid, .team-grid { grid-template-columns: minmax(0, 1fr); } .about-cta-section { padding: 3rem 0; } .cta-inner { padding: 2rem 1.65rem; margin-top: -60px; } .cta-actions { width: 100%; } .btn-primary, .btn-ghost { width: 100%; justify-content: center; } .premium-service-features { width: 350px; margin-left: -20px; } [data-premium-services-page] .premium-process-title { font-size: 2.7rem; } /*======================= SHOWROOM ==========================*/ .showroom-grid { grid-template-columns: 1fr; } .showroom-details-content { grid-template-columns: 1fr; gap: 3rem; } .showroom-hero-cta { flex-direction: column; width: 100%; } .showroom-cta-primary, .showroom-cta-secondary { width: 100%; justify-content: center; } .showroom-cta-content { padding: 2.5rem 1.5rem; } } /* ============================================ BREAKPOINT: 600px (Mobile Medium) ============================================ */ @media (max-width: 600px) { .hero-slide-image { min-height: 210px; } .premium-title { font-size: 27px !important; } .premium-section { padding: 56px 0; } .premium-heading { font-size: 2rem !important; } [data-premium-services-page] .premium-heading { font-size: 1.7rem; } [data-premium-services-page] .premium-process { padding-inline: 1.25rem; } } /* ============================================ BREAKPOINT: 480px (Mobile Portrait) ============================================ */ @media (max-width: 480px) { /* ============================================ SERVICES PAGE - SMALL MOBILE ============================================ */ .services-page .page { padding: 24px 12px 40px; } .services-page .page-header { padding: 0; margin-bottom: 16px; } .services-page .page-title { font-size: clamp(22px, 6vw, 28px); line-height: 1.2; } .services-page .page-subtitle { font-size: 13px; } .services-page .services-nav { margin-top: 16px; } .services-page .services-pills { padding: 6px 0 2px; gap: 8px; } .services-page .pill { width: 240px; min-width: 220px; height: 70px; padding: 8px 10px; } .services-page .pill-icon { width: 32px; height: 32px; font-size: 15px; } .services-page .pill-text-main { font-size: 13px; } .services-page .pill-text-sub { font-size: 11px; } .services-page .panel-wrapper { margin-top: 12px !important; padding: 0 !important; width: 100% !important; min-height: auto !important; height: auto !important; } .services-page .panel { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; padding: 0 !important; gap: 0 !important; min-height: auto !important; /* Override desktop min-height: 450px */ height: auto !important; max-height: none !important; display: grid !important; } /* Panel media (image) - first on mobile - larger for small screens */ .services-page .panel > .panel-media { grid-column: 1 !important; grid-row: 1 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; width: 100% !important; height: 0 !important; padding-bottom: 55% !important; /* Larger ~1.82:1 aspect ratio for small screens - more prominent */ position: relative !important; overflow: hidden !important; min-height: 0 !important; /* Override desktop min-height: 260px */ max-height: none !important; aspect-ratio: auto !important; /* Override desktop aspect-ratio */ box-shadow: var(--shadow-strong) !important; background: var(--dark-card) !important; flex-shrink: 0 !important; } .services-page .panel > .panel-media .panel-media-inner { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; min-height: 0 !important; /* Override desktop min-height: 260px */ max-height: none !important; } /* Ensure panel-tag (badge) is visible on mobile */ .services-page .panel > .panel-media .panel-tag { position: absolute; top: 12px; right: 14px; z-index: 5; } /* Content div (text) - second on mobile - reasonable padding */ .services-page .panel > div:first-of-type { padding: 18px 14px !important; /* Restored to reasonable padding */ border-right: none !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; box-sizing: border-box !important; min-height: auto !important; height: auto !important; } /* Text sizing for very small screens - Restored to readable */ .services-page .panel > div:first-of-type .panel-title { font-size: clamp(22px, 4.5vw, 22px) !important; /* Restored */ margin-bottom: 10px !important; /* Restored */ line-height: 1.3 !important; /* Restored */ } .services-page .panel > div:first-of-type .panel-lead { font-size: 16px !important; /* Restored to readable */ margin-bottom: 14px !important; /* Restored */ line-height: 1.6 !important; /* Restored */ } .services-page .panel > div:first-of-type .panel-bullets { margin-bottom: 14px !important; /* Restored */ gap: 8px !important; /* Restored */ } .services-page .panel > div:first-of-type .panel-bullets li { font-size: 15px !important; /* Restored to readable */ line-height: 1.5 !important; /* Restored */ font-weight: 600; } .services-page .panel > div:first-of-type .cta-row { margin-top: 12px !important; /* Restored */ gap: 8px !important; /* Restored */ } /* Related row - Compact but readable for very small screens */ .services-page .panel > .related-row { grid-column: 1 / -1 !important; grid-row: 3 !important; padding: 14px 12px 12px !important; /* Compact but reasonable */ gap: 10px !important; /* Reasonable gap */ width: 100% !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 1fr !important; min-height: auto !important; height: auto !important; max-height: none !important; align-items: start !important; margin: 0 !important; } /* Cards - Compact padding but proper content sizes */ .services-page .panel > .related-row .card { padding: 14px 12px 12px !important; /* Compact but readable */ min-height: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; flex-shrink: 0 !important; } .services-page .panel > .related-row .card-title { font-size: 18px !important; /* Restored to readable */ margin-bottom: 10px !important; /* Restored */ line-height: 1.3 !important; /* Restored */ padding-bottom: 6px !important; /* Restored */ } .services-page .panel > .related-row .card-title::after { width: 32px !important; /* Restored */ height: 2.5px !important; /* Restored */ } /* Testimonial - Proper sizes */ .services-page .panel > .related-row .testimonial-container, .services-page .panel > .related-row .testimonial-slider-wrapper { min-height: auto !important; height: auto !important; max-height: none !important; padding: 0 !important; margin: 0 !important; } .services-page .panel > .related-row .testimonial-text { font-size: 15px !important; /* Restored to readable */ line-height: 1.5 !important; /* Restored */ margin-bottom: 8px !important; /* Restored */ } .services-page .panel > .related-row .testimonial-stars { font-size: 12px !important; /* Restored */ margin-bottom: 6px !important; /* Restored */ } .services-page .panel > .related-row .testimonial-stars svg { width: 12px !important; /* Restored */ height: 12px !important; /* Restored */ } .services-page .panel > .related-row .client-row { margin-top: auto !important; /* Restored */ padding-top: 10px !important; /* Restored */ gap: 8px !important; /* Restored */ border-top: 1px solid rgba(0, 0, 0, 0.08) !important; /* Restored */ } .services-page .panel > .related-row .client-avatar { width: 32px !important; /* Restored to proper size */ height: 32px !important; /* Restored */ min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; } .services-page .panel > .related-row .client-avatar img { width: 32px !important; /* Restored */ height: 32px !important; /* Restored */ max-width: 32px !important; max-height: 32px !important; } .services-page .panel > .related-row .client-meta { font-size: 11px !important; /* Restored */ } .services-page .panel > .related-row .client-meta strong { font-size: 15px !important; /* Restored */ display: block !important; margin-bottom: 2px !important; } .services-page .panel > .related-row .client-meta span { font-size: 13px !important; /* Restored */ color: var(--muted) !important; } .services-page .panel > .related-row .testimonial-indicators { margin-top: 8px !important; /* Restored */ padding-top: 8px !important; /* Restored */ gap: 5px !important; /* Restored */ } .services-page .panel > .related-row .testimonial-indicator { width: 7px !important; /* Restored */ height: 7px !important; /* Restored */ } /* Projects grid - Enhanced styling for small screens */ /* Projects gallery - Match services-tabs.js small screen styling */ .services-page .panel > .related-row .project-gallery { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-bottom: 15px !important; } .services-page .panel > .related-row .project-item { aspect-ratio: 1 / 1 !important; border-radius: var(--radius-sm) !important; transition: transform 0.2s !important; } .services-page .panel > .related-row .project-item:hover { transform: scale(1.05) !important; } .services-page .panel > .related-row .project-item .hover-text { font-size: 10px !important; padding: 3px 5px !important; } .services-page .panel > .related-row .full-portfolio-btn { font-size: 14px !important; padding: 10px 14px !important; width: 100% !important; } /* ============================================ PREMIUM SERVICES PAGE - SMALL MOBILE ============================================ */ [data-premium-services-page] .premium-hero { padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1rem, 3vw, 1.5rem); } [data-premium-services-page] .premium-title { font-size: clamp(1.75rem, 6vw, 2.5rem); margin-bottom: 1rem; } [data-premium-services-page] .premium-subtitle { font-size: clamp(0.875rem, 1.2vw, 1rem); margin-bottom: 1.75rem; } [data-premium-services-page] .premium-hero-actions { margin-bottom: 2rem; gap: 0.875rem 1.25rem; flex-direction: column; align-items: stretch; } [data-premium-services-page] .premium-hero-link { text-align: center; } [data-premium-services-page] .premium-hero-metrics { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.5rem; } .premium-section { padding: clamp(1.75rem, 3vw, 2.5rem) 0; } [data-premium-services-page] .premium-section { padding: clamp(1.75rem, 3vw, 2.5rem) 0; } .premium-service-card { min-height: 610px; } zxtle { font-size: 2.5rem; } .premium-cta-btn { padding: 14px 28px; font-size: 12px; } .premium-feature-tag { font-size: 14px; padding: 5px 10px; width: 139px !important; height: 40px; } /* ============================================ GENERAL - SMALL MOBILE ============================================ */ .container { padding-inline: 1.1rem; } .hero-stats { flex-direction: column; align-items: flex-start; } /* ============================================ REFERRALS PAGE - MOBILE ============================================ */ .referrals-hero { min-height: 50vh; padding: clamp(3rem, 6vw, 4rem) 0; } .referrals-hero-title { font-size: clamp(2rem, 6vw, 3rem); } .referrals-hero-subtitle { font-size: clamp(0.95rem, 2vw, 1.1rem); } .referrals-benefits { padding: clamp(3rem, 6vw, 4rem) 0; } .referrals-benefits-grid { grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 1.75rem); } .referrals-form-section { padding: clamp(3rem, 6vw, 4rem) 0; } .referrals-form-card { padding: clamp(1.5rem, 4vw, 2rem); } .referrals-form-grid { grid-template-columns: 1fr; gap: clamp(1.25rem, 2vw, 1.5rem); } .referrals-form-section-group { gap: clamp(1rem, 2vw, 1.25rem); } .referrals-form-submit-btn { width: 100%; padding: clamp(1rem, 2vw, 1.125rem) clamp(1.5rem, 3vw, 2rem); } .referrals-thank-you { padding: clamp(3rem, 6vw, 4rem) 0; } .referrals-thank-you-icon { width: 100px; height: 100px; } .referrals-thank-you-title { font-size: clamp(1.75rem, 5vw, 2.5rem); } /* ============================================ SINGLE SERVICE PAGES - MOBILE ============================================ */ [data-single-service-page] .premium-benefits { padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2rem); } [data-single-service-page] .premium-section-title { font-size: clamp(1.75rem, 5vw, 2.5rem); } [data-single-service-page] .premium-section-subtitle { font-size: clamp(0.95rem, 2vw, 1.1rem); margin-bottom: clamp(2rem, 4vw, 3rem); } [data-single-service-page] .premium-benefits-grid { grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 1.75rem); } [data-single-service-page] .premium-benefit-card { padding: clamp(1.5rem, 3vw, 2rem); } [data-single-service-page] .premium-final-cta { padding: clamp(3rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2rem); } [data-single-service-page] .premium-final-cta-title { font-size: clamp(1.75rem, 5vw, 2.5rem); } [data-single-service-page] .premium-final-cta-subtitle { font-size: clamp(0.95rem, 2vw, 1.1rem); margin-bottom: clamp(1.5rem, 3vw, 2rem); } [data-single-service-page] .premium-final-cta-btn { width: 100%; padding: clamp(1rem, 2vw, 1.125rem) clamp(1.5rem, 3vw, 2rem); } }