/**
 * components.css - Reusable component styles for D&H Engraving website
 * 
 * Purpose: Define styles for buttons, cards, forms, and other UI components
 * Dependencies: base.css (for CSS variables)
 * 
 * Contents:
 * 1. Buttons and CTAs
 * 2. Cards and Containers
 * 3. Hero Section
 * 4. Trusted By Section
 * 5. Service Lists
 * 6. Contact Components
 * 7. Order Components
 * 8. Timeline Components
 * 9. Map Container
 * 
 * Component-based architecture for reusability and consistency
 */

/* ============================================
   1. BUTTONS AND CTAs
   ============================================ */

/* Primary call-to-action button */
.cta-button {
  display: inline-block; /* Allow padding and dimensions */
  background: var(--color-primary); /* Brand blue background */
  color: white; /* White text */
  padding: 0.75rem 1.5rem; /* 12px × 24px padding */
  border-radius: var(--radius-sm); /* Rounded corners */
  text-decoration: none; /* Remove underline */
  font-weight: var(--font-weight-semibold); /* Semi-bold text */
  font-size: var(--font-size-base); /* Standard font size */
  border: 0.125rem solid var(--color-primary); /* 2px border matching background */
  cursor: pointer; /* Pointer cursor on hover */
  transition: all var(--transition-base); /* Smooth transition */
  position: relative; /* For positioning effects */
  overflow: hidden; /* Contain pseudo-elements */
  margin-top: var(--spacing-lg); /* Space above button */
}

.cta-button:link,
.cta-button:visited {
  color: white; /* Keep text white on blue background even after visiting */
  text-decoration: none; /* No underline on visited state */
}

/* CTA button hover state */
.cta-button:hover {
  background: white; /* White background on hover */
  color: var(--color-primary); /* Blue text on hover */
  transform: translateY(-0.125rem) scale(1.02); /* Slight lift and scale */
  box-shadow: 0 0.3125rem 0.9375rem rgba(12, 134, 209, 0.3); /* Blue shadow */
  text-decoration: none; /* Keep no underline */
}

/* CTA button active state */
.cta-button:active {
  transform: translateY(0.0625rem); /* Push down when clicked */
}

/* ============================================
   2. CARDS AND CONTAINERS
   ============================================ */

/* Contact card component */
.contact-card {
  background: white; /* White background */
  border-radius: var(--radius-md); /* Rounded corners */
  padding: var(--spacing-xl); /* 2rem padding */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); /* Subtle shadow */
  height: 100%; /* Full height of container */
}

/* Contact card heading */
.contact-card h2 {
  color: var(--color-text-heading); /* Dark text */
  margin-bottom: var(--spacing-lg); /* Space below heading */
  padding-bottom: var(--spacing-md); /* Padding for border */
  border-bottom: 0.125rem solid var(--color-border-light); /* Bottom border */
}

/* Platform card for review page */
.platform-card {
  background: white; /* White background */
  border-radius: var(--radius-lg); /* 10px rounded corners */
  padding: 1.875rem; /* 30px padding */
  box-shadow: 0 0.25rem 0.375rem var(--color-shadow); /* Standard shadow */
  transition: transform var(--transition-base), /* Smooth transform */
              box-shadow var(--transition-base); /* Smooth shadow */
  text-align: center; /* Center content */
  cursor: pointer; /* Show clickable */
}

/* Platform card hover state */
.platform-card:hover {
  transform: translateY(-0.3125rem); /* 5px lift */
  box-shadow: 0 0.625rem 1.25rem var(--color-shadow); /* Enhanced shadow */
}

/* ============================================
   3. HERO SECTION
   ============================================ */

/* Hero section container */
.hero-section {
  position: relative; /* For overlay positioning */
  width: 100%; /* Full width */
  height: 31.25rem; /* 500px height */
  overflow: hidden; /* Hide overflow */
  background: #000; /* Black fallback background */
}

/* Hero inner container */
.hero-container {
  position: relative; /* For child positioning */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
}

/* Hero image */
.hero-image {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  object-fit: cover; /* Cover container, crop if needed */
  display: block; /* Remove inline spacing */
}

/* Hero overlay content */
.hero-overlay {
  position: absolute; /* Position over image */
  top: 50%; /* Vertical center */
  left: 50%; /* Horizontal center */
  transform: translate(-50%, -50%); /* Perfect center */
  text-align: center; /* Center text */
  color: white; /* White text */
  z-index: 2; /* Above image */
  padding: var(--spacing-xl); /* 2rem padding */
  background: rgba(0, 0, 0, 0.6); /* Dark overlay for readability */
  border-radius: var(--radius-lg); /* Rounded corners */
  backdrop-filter: blur(0.3125rem); /* 5px blur effect */
  width: 90%; /* Responsive width */
  max-width: 50rem; /* 800px max width */
  max-height: 85%; /* Prevent overflow beyond hero section*/
  overflow-y: auto; /* Add scroll if content overflows*/
  overflow-x: hidden; /* Prevent horizontal scroll */
  display: flex; /* Use flexbox for better content management */
  flex-direction: column; /* Stack content vertically */
  justify-content: flex-start; /* Start from top when scrollable */
}

/* Custom scrollbar for hero overlay - like custom gauge markings */
.hero-overlay::-webkit-scrollbar {
  width: 0.5rem; /* Thin scrollbar - 8px */
}

.hero-overlay::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent track */
  border-radius: var(--radius-md); /* Rounded track */
}

.hero-overlay::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3); /* Semi-transparent thumb */
  border-radius: var(--radius-md); /* Rounded thumb */
}

.hero-overlay::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5); /* Lighter on hover - like LED indicator brightness */
}

/* Hero title */
.hero-title {
  font-size: 2.1875rem; /* 35px - 25% larger than base 1.75rem (28px) */
  font-weight: var(--font-weight-bold); /* Bold text */
  margin-bottom: var(--spacing-md); /* Space below */
  text-shadow: 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.7); /* Text shadow */
}

/* Hero subtitle */
.hero-subtitle {
  font-size: 1.25rem; /* 20px - 25% larger than base 1rem (16px) */
  margin-bottom: 0.75rem; /* Space between paragraphs */
  opacity: 0.95; /* Slightly transparent */
  line-height: var(--line-height-base); /* Match base paragraph line height */
  max-width: 43.75rem; /* 700px max width */
  margin-left: auto; /* Center horizontally */
  margin-right: auto; /* Center horizontally */
}

/* Last hero subtitle */
.hero-subtitle:last-of-type {
  margin-bottom: var(--spacing-lg); /* More space before button */
}

/* ============================================
   4. TRUSTED BY SECTION
   ============================================ */

/* Customer logo slider section */
.logo-carousel {
  background-color: #f8f9fa;
  padding: var(--spacing-xl) 0;
  overflow: hidden;
  position: relative; /* For navigation buttons positioning */
}

/* Trusted by section container */
.trusted-by-section {
  padding: var(--spacing-2xl) 0; /* Vertical padding */
  background: var(--color-bg-tertiary); /* Light gray background */
  overflow: hidden; /* Hide scrolling overflow */
}

/* Trusted by inner container */
.trusted-by-container {
  max-width: var(--container-lg); /* Max width */
  margin: 0 auto; /* Center container */
  padding: 0 var(--spacing-md); /* Horizontal padding */
}

/* Trusted by title */
.trusted-by-title {
  text-align: center; /* Center align */
  font-size: 1.75rem; /* Match h2 size */
  color: var(--color-primary); /* Brand blue */
  margin-bottom: var(--spacing-sm); /* Space below */
  font-weight: var(--font-weight-semibold); /* Semi-bold */
}

/* Logo slider container */
.logo-slider {
  position: relative; /* For track positioning */
  width: 100%; /* Full width */
  height: 14.375rem; /* 230px height for large logos */
  display: flex; /* Flex container */
  align-items: center; /* Center vertically */
  margin: 0 auto; /* Center in container */
  max-width: 100%; /* Prevent overflow */
  overflow: hidden; /* Hide overflow for clean edges */
  /* Temporary debug border to see container bounds */
  /* border: 2px solid red; */
}

/* Logo track for animation */
.logo-track {
  display: flex; /* Horizontal layout */
  width: max-content; /* Changed from fit-content - ensures full width of content */
  align-items: center; /* Vertical alignment */
  will-change: transform; /* Optimize animation performance - like pre-oiling the conveyor belt */
  gap: 0; /* No gap between flex items for precise calculation */
  padding: 0; /* Remove all padding that can cause misalignment */
  margin: 0; /* Remove any default margins */
  flex-shrink: 0; /* Prevent any shrinking of the track */
  /* Animation now handled by JavaScript for better control */
}

/* Individual logo item */
.logo-item {
  flex: 0 0 auto; /* Don't grow or shrink - fixed size like a chain link */
  padding: 0 var(--spacing-2xl); /* 3rem horizontal spacing between logos */
  display: inline-flex; /* Inline-flex for better width calculation */
  align-items: center; /* Vertical center */
  justify-content: center; /* Horizontal center */
  white-space: nowrap; /* Prevent any wrapping */
  vertical-align: middle; /* Align properly in the flow */
}

.logo-slider a:focus,
.logo-slider a:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Customer logo styling */
.customer-logo {
  height: 5rem; /* 80px height */
  width: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Fit within bounds */
  transition: all var(--transition-base); /* Smooth transitions */
}

/* Customer logo hover */
.customer-logo:hover {
  transform: scale(1.1); /* Enlarge on hover */
}

/* Special logo sizing overrides */
.apco-logo .customer-logo {
  height: 15rem; /* 240px for APCO logo (20% larger than previous 12.5rem) */
}

.qed-logo .customer-logo {
  height: 4.86rem; /* 77.76px for QED logo (reduced another 10%, now 19% smaller than original) */
}

.mrc-logo .customer-logo {
  height: 4.5rem; /* 72px for MRC Global logo (10% smaller than default 5rem) */
}

.cpi-logo .customer-logo {
  height: 6.25rem; /* 100px for CPI logo */
}

.greiner-logo .customer-logo {
  height: 4.25rem; /* 68px for Greiner logo */
}

/* CSS animation removed - JavaScript handles the animation for better control */
/* Hover pause is now handled in JavaScript */

/* ============================================
   5. SERVICE LISTS
   ============================================ */

/* Services container */
.services-container {
  display: flex; /* Flexbox for columns */
  gap: var(--spacing-xl); /* Space between columns */
  margin: var(--spacing-sm) 0 var(--spacing-md) 0; /* Vertical margins */
}

/* Services list */
.services-list {
  list-style: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
  flex: 1; /* Equal width columns */
}

/* Service list items */
.services-list li {
  margin: 0.0625rem 0; /* Minimal vertical spacing */
  padding: 0.09375rem 0; /* Minimal padding */
  display: flex; /* Flexbox for icon and text */
  align-items: center; /* Vertical alignment */
  line-height: 1.2; /* Tight line height */
  font-size: 1.1rem; /* Slightly larger text */
  color: var(--color-text-primary); /* Standard text color */
}

/* Service icon */
.service-icon {
  display: inline-flex; /* Inline flex */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  width: 1.5em; /* Fixed width for alignment */
  margin-right: 0.75rem; /* Space after icon */
  color: var(--color-primary); /* Brand blue */
  font-size: 1.2rem; /* Slightly larger */
  font-weight: var(--font-weight-bold); /* Bold */
}

/* Font Awesome icon alignment */
.service-icon i {
  text-align: center; /* Center icon */
}

/* ============================================
   6. CONTACT COMPONENTS
   ============================================ */

/* Contact header */
.contact-header {
  text-align: center; /* Center text */
  margin-bottom: var(--spacing-2xl); /* Space below */
}

/* Contact header title */
.contact-header h1 {
  color: var(--color-primary); /* Brand blue */
  font-size: var(--font-size-3xl); /* Large heading */
  margin-bottom: var(--spacing-md); /* Space below */
}

/* Contact header subtitle */
.contact-header .subtitle {
  color: var(--color-text-secondary); /* Gray text */
  font-size: 1.2rem; /* Larger than base */
  max-width: 43.75rem; /* 700px max width */
  margin: 0 auto; /* Center horizontally */
  padding: 0 var(--spacing-sm); /* Add padding for better mobile spacing */
}

/* Contact content grid */
.contact-content {
  display: grid; /* Grid layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: var(--spacing-xl); /* Space between */
  margin-bottom: var(--spacing-3xl); /* Space below */
}

/* Contact details container */
.contact-details {
  display: flex; /* Flexbox */
  flex-direction: column; /* Stack vertically */
  gap: var(--spacing-lg); /* Space between items */
}

/* Contact item */
.contact-item {
  display: flex; /* Flexbox for icon and text */
  align-items: flex-start; /* Align to top */
  gap: var(--spacing-md); /* Space between icon and text */
}

/* Contact icon */
.contact-item .contact-icon {
  width: 1.5rem; /* 24px width */
  height: 1.5rem; /* 24px height */
  object-fit: contain; /* Fit within bounds */
  margin-right: 0.75rem; /* Additional spacing */
  flex-shrink: 0; /* Don't shrink */
  align-self: flex-start; /* Align to top */
  margin-top: 0.2rem; /* Slight offset */
}

/* Contact item links */
.contact-item a {
  color: var(--color-primary); /* Brand blue */
  text-decoration: none; /* No underline */
  transition: color var(--transition-fast); /* Smooth color change */
}

/* Contact item link hover */
.contact-item a:hover {
  color: var(--color-primary-dark); /* Darker blue */
  text-decoration: underline; /* Add underline */
}

/* Business hours section */
.business-hours {
  margin-top: var(--spacing-xl); /* Space above */
  padding-top: var(--spacing-lg); /* Padding above */
  border-top: 0.0625rem solid var(--color-border-light); /* Top border */
}

/* Business hours heading */
.business-hours h3 {
  color: var(--color-text-primary); /* Standard text color */
  margin-bottom: 0.8rem; /* Space below */
  font-size: 1.1rem; /* Slightly larger */
}

/* Business hours text */
.business-hours p {
  color: var(--color-text-secondary); /* Gray text */
  line-height: var(--line-height-base); /* Standard line height */
}

/* ============================================
   7. ORDER COMPONENTS
   ============================================ */

/* Order buttons container */
.order-buttons {
  display: flex; /* Flexbox layout */
  flex-wrap: wrap; /* Allow wrapping */
  gap: var(--spacing-lg); /* Space between buttons */
  margin: var(--spacing-xl) 0; /* Vertical margins */
  justify-content: center; /* Center buttons */
}

/* Individual order button */
.order-button {
  display: inline-flex; /* Inline flex */
  flex-direction: column; /* Stack content vertically */
  align-items: center; /* Center content */
  justify-content: center; /* Center vertically */
  background-color: var(--color-primary); /* Brand blue */
  color: white; /* White text */
  padding: var(--spacing-lg) var(--spacing-xl); /* Padding */
  border-radius: var(--radius-md); /* Rounded corners */
  text-decoration: none; /* No underline */
  font-weight: var(--font-weight-semibold); /* Semi-bold */
  transition: all var(--transition-base); /* Smooth transitions */
  border: 0.125rem solid var(--color-primary); /* 2px border */
  text-align: center; /* Center text */
  min-width: 8rem; /* 128px minimum width - allows 2 buttons at 320px */
  box-shadow: 0 0.125rem 0.625rem var(--color-shadow); /* Shadow */
}

/* Order button icon */
.button-icon {
  font-size: 1.8rem; /* Large icon */
  margin-bottom: var(--spacing-sm); /* Space below */
  line-height: 1; /* Tight line height */
}

/* Order button text */
.button-text {
  font-size: 1.1rem; /* Slightly larger */
  margin-bottom: var(--spacing-sm); /* Space below */
  line-height: 1.3; /* Comfortable line height */
}

/* Order button format badge */
.button-format {
  background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
  padding: 0.2rem 0.8rem; /* Small padding */
  border-radius: 0.75rem; /* 12px rounded corners */
  font-size: 0.8rem; /* Small text */
  font-weight: var(--font-weight-semibold); /* Semi-bold */
  letter-spacing: 0.03125rem; /* Letter spacing */
}

/* Order button hover state */
.order-button:hover,
.order-button:focus {
  background-color: white; /* White background */
  color: var(--color-primary); /* Blue text */
  transform: translateY(-0.125rem); /* Slight lift */
  box-shadow: 0 0.25rem 0.9375rem rgba(12, 134, 209, 0.3); /* Blue shadow */
  text-decoration: none; /* No underline */
}

/* Order button active state */
.order-button:active {
  transform: translateY(0); /* Reset position */
}

/* ============================================
   8. TIMELINE COMPONENTS (About Page)
   ============================================ */

/* Timeline container */
.timeline-container {
  max-width: 87.5rem; /* 1400px max width */
  margin: var(--spacing-xl) auto; /* Center with margins */
  padding: 0 2.5rem; /* 40px horizontal padding */
}

/* Timeline header container - like a frame that holds title and subtitle together */
.timeline-header {
  text-align: center; /* Center all content */
  margin-bottom: var(--spacing-2xl); /* 3rem space below header */
  padding: 1.3rem 1.3rem; /* 30% increase from 1rem - like adding extra clearance around components */
  background: white; /* White background to match other containers */
  border-radius: var(--radius-md); /* Rounded corners - same 8px radius as other containers */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
}

/* Timeline title */
.timeline-title {
  text-align: center; /* Center text */
  color: var(--color-primary); /* Brand blue */
  margin-bottom: var(--spacing-lg); /* Space below */
  margin-top: 0; /* No space above */
}

/* Timeline subtitle */
.timeline-subtitle {
  text-align: center; /* Center text */
  color: #555; /* Gray text */
  margin-bottom: var(--spacing-xl); /* Space below */
  font-size: 1.1rem; /* Slightly larger */
  max-width: 50rem; /* 800px max width */
  margin-left: auto; /* Center horizontally */
  margin-right: auto; /* Center horizontally */
  line-height: 1.5; /* Comfortable line height */
}

/* Mobile adjustments for timeline header elements */
@media (max-width: 48rem) {
  .timeline-header {
    margin-bottom: var(--spacing-xl); /* Reduce space on mobile */
    padding: 0.65rem 0.65rem; /* 30% increase from 0.5rem - maintains proportion on mobile */
  }
  
  .timeline-title {
    margin-bottom: 0.25rem; /* 50% reduction - was 0.5rem (spacing-sm) */
    font-size: 1.75rem; /* Slightly smaller on mobile */
  }
  
  .timeline-subtitle {
    margin-bottom: 0.5rem; /* 50% reduction - was 1rem (spacing-md) */
    font-size: 1rem; /* Smaller font on mobile */
    padding: 0 0.5rem; /* 50% reduction - was 1rem horizontal padding */
  }
}

/* ============================================
   9. MAP CONTAINER
   ============================================ */

/* Map container */
.map-container {
  height: auto; /* Auto height */
  border-radius: var(--radius-md); /* Rounded corners */
  overflow: hidden; /* Hide overflow */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08); /* Shadow */
  border: none; /* Remove iframe default border */
}

/* Map iframe */
.map-container iframe {
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  border: none; /* No border */
  display: block; /* Block display */
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet breakpoint (768px = 48rem) */
@media (max-width: 48rem) {
  /* Hero section adjustments */
  .hero-section {
    height: 26rem; /* 416px - slightly increased for better content fit */
  }
  
  .hero-title {
    font-size: 1.875rem; /* 30px - 25% larger than base 1.5rem (24px) */
  }
  
  .hero-subtitle {
    font-size: 1.25rem; /* 20px - 25% larger than base 1rem (16px) */
    margin-bottom: var(--spacing-sm); /* Less space */
    line-height: 1.4; /* Tighter line spacing to save vertical space */
  }
  
  .hero-overlay {
    padding: var(--spacing-md); /* Further reduce padding - 1rem instead of 1.5rem */
    width: 95%; /* Use more width */
    max-height: 90%; /* Allow slightly more height on tablets */
  }
  
  /* Trusted by adjustments */
  .trusted-by-title {
    font-size: 1.875rem; /* Smaller title */
    margin-bottom: var(--spacing-lg); /* Less space */
  }
  
  .logo-slider {
    height: 7.5rem; /* 120px height */
  }
  
  .customer-logo {
    height: 3.125rem; /* 50px height */
  }
  
  .apco-logo .customer-logo {
    height: 7.05rem; /* 112.8px for APCO (20% larger on mobile) */
  }
  
  .cpi-logo .customer-logo {
    height: 3.875rem; /* 62px for CPI */
  }
  
  .greiner-logo .customer-logo {
    height: 2.625rem; /* 42px for Greiner */
  }
  
  .mrc-logo .customer-logo {
    height: 2.8125rem; /* 45px for MRC Global (10% smaller) */
  }
  
  .logo-item {
    padding: 0 var(--spacing-lg); /* Less spacing */
  }
  
  /* Contact content single column */
  .contact-content {
    grid-template-columns: 1fr; /* Single column */
  }
  
  .map-container {
    height: 21.875rem; /* 350px fixed height on mobile */
  }
  
  /* Contact header adjustments */
  .contact-header h1 {
    font-size: var(--font-size-2xl); /* Smaller heading */
  }
  
  .contact-header .subtitle {
    font-size: var(--font-size-base); /* Smaller subtitle */
    max-width: 100%; /* Full width on mobile */
    padding: 0; /* Remove extra padding on smaller screens */
  }
}

/* Small mobile breakpoint (600px = 37.5rem) */
@media (max-width: 37.5rem) {
  /* Order buttons full width */
  .order-buttons {
    flex-direction: column; /* Stack vertically */
    gap: var(--spacing-md); /* Smaller gap */
  }
  
  .order-button {
    width: 100%; /* Full width */
    max-width: 18.75rem; /* 300px max width */
    margin: 0 auto; /* Center */
  }
}

/* Extra small mobile breakpoint (480px = 30rem) - for smaller phones */
@media (max-width: 30rem) {
  /* Hero section further adjustments */
  .hero-section {
    height: 24rem; /* 384px - increased height to accommodate larger text */
  }
  
  .hero-title {
    font-size: 1.71875rem; /* 27.5px - 25% larger than base 1.375rem (22px) */
    margin-bottom: var(--spacing-sm); /* Less margin */
  }
  
  .hero-subtitle {
    font-size: 1.25rem; /* 20px - 25% larger than base 1rem (16px) */
    margin-bottom: 0.5rem; /* Minimal spacing between paragraphs */
    line-height: 1.3; /* Even tighter line height - like close tolerances in engine parts */
  }
  
  .hero-subtitle:last-of-type {
    margin-bottom: var(--spacing-md); /* Less space before button */
  }
  
  .hero-overlay {
    padding: var(--spacing-md) var(--spacing-sm); /* 1rem vertical, 0.5rem horizontal */
    width: 95%; /* Use almost full width */
    max-height: 90%; /* Allow generous height but maintain margins */
    top: 5%; /* Position from top instead of center */
    left: 50%; /* Maintain horizontal center */
    transform: translateX(-50%); /* Only center horizontally */
    justify-content: flex-start; /* Content starts at top */
  }
  
  .cta-button {
    font-size: 0.9rem; /* Slightly smaller button text */
    padding: 0.625rem 1.25rem; /* Smaller button padding */
  }
}

/* Minimum supported breakpoint (320px = 20rem) - smallest phones */
@media (max-width: 20rem) {
  /* Critical adjustments for 320px screens - like fitting equipment through a narrow doorway */
  
  /* Hero section ultra-compact */
  .hero-section {
    height: 23rem; /* 368px - increased to prevent content cutoff */
  }
  
  .hero-overlay {
    width: 94%; /* Use more width - less margin */
    padding: var(--spacing-sm); /* 0.5rem - minimal padding */
    max-height: 92%; /* Use most height but maintain safe margins */
    top: 4%; /* Small top margin */
    left: 50%; /* Maintain horizontal center */
    transform: translateX(-50%); /* Only center horizontally */
  }
  
  /* Minimal text sizes - like precision measurements on small parts */
  .hero-title {
    font-size: 1.5625rem; /* 25px - 25% larger than base 1.25rem (20px) */
    line-height: 1.2; /* Very tight - like close-tolerance fit */
    margin-bottom: var(--spacing-xs); /* 0.25rem spacing */
  }
  
  .hero-subtitle {
    font-size: 0.9375rem; /* 15px - 25% larger than base 0.75rem (12px) */
    line-height: 1.3; /* Tight spacing */
    margin-bottom: var(--spacing-xs); /* Minimal spacing */
  }
  
  .cta-button {
    padding: 0.375rem 0.75rem; /* Very small padding - 6px/12px */
    font-size: 0.75rem; /* 12px - minimum readable */
    min-height: 2rem; /* 32px - minimum touch target */
  }
  
  /* Order buttons - full width stacking */
  .order-buttons {
    flex-direction: column; /* Force vertical stacking */
    gap: var(--spacing-xs); /* 0.25rem gap */
  }
  
  .order-button {
    width: 100%; /* Full width - like a full-width tool drawer */
    min-width: auto; /* Remove min-width restriction */
    padding: var(--spacing-sm) var(--spacing-md); /* Smaller padding */
  }
  
  .button-icon {
    font-size: 1.5rem; /* 24px - smaller icon */
    margin-bottom: 0.25rem; /* Minimal space */
  }
  
  /* Service cards - ultra compact */
  .service-card {
    padding: var(--spacing-sm); /* 0.5rem - minimal padding */
  }
  
  .service-icon {
    font-size: 1.75rem; /* 28px - smaller icons */
    margin-bottom: var(--spacing-xs); /* Less space */
  }
  
  .service-card h3 {
    font-size: 1rem; /* 16px - smaller headings */
    margin-bottom: var(--spacing-xs); /* Less space */
  }
  
  .service-card p {
    font-size: 0.75rem; /* 12px - smaller text */
  }
  
  /* Logo slider container at 320px */
  .logo-slider {
    height: 6rem; /* 96px height - enough for logos at this size */
  }
  
  /* Logo slider - compact logos */
  .logo-item {
    padding: 0 var(--spacing-md); /* 1rem side padding - more consistent */
  }
  
  .logo-item img,
  .customer-logo {
    height: 2rem !important; /* 32px - smaller logos with override */
  }
  
  /* Override specific logo sizes at 320px */
  .apco-logo .customer-logo {
    height: 3.6rem !important; /* 57.6px - APCO logo 20% larger on mobile */
  }
  
  .qed-logo .customer-logo {
    height: 1.8rem !important; /* 28.8px - QED logo reduced another 10% */
  }
  
  .mrc-logo .customer-logo {
    height: 1.8rem !important; /* 28.8px - MRC Global logo 10% smaller */
  }
  
  .cpi-logo .customer-logo,
  .greiner-logo .customer-logo {
    height: 2rem !important; /* Standard size for other logos */
  }
  
  /* Global button adjustments */
  .primary-button, 
  .secondary-button,
  .tertiary-button {
    padding: 0.375rem 0.75rem; /* Smaller padding */
    font-size: 0.75rem; /* 12px text */
    min-height: 2rem; /* 32px minimum touch target */
  }
  
  /* Cards and containers */
  .card {
    padding: var(--spacing-sm); /* 0.5rem padding */
    margin-bottom: var(--spacing-sm); /* Less spacing between */
  }
  
  /* Contact info compact */
  .contact-info {
    font-size: 0.75rem; /* 12px text */
  }
  
  .contact-info i {
    font-size: 1rem; /* 16px icons */
  }
}