/* ========================================
   Mobile Responsiveness Fixes
   Applied after Tailwind CSS to override
   ======================================== */

/* === 1. SMALL PHONES (<= 360px) === */
@media (max-width: 360px) {
  /* Hero - reduce text sizes for tiny screens */
  #hero h1,
  #hero .hero-content h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  #hero .hero-content p {
    font-size: 0.8rem !important;
  }
  #hero .hero-content a,
  #hero .hero-content .inline-flex,
  #hero .hero-content .px-4.py-2 {
    font-size: 0.75rem !important;
    padding: 0.5rem 0.9rem !important;
  }
  #hero .hero-content a svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Portfolio cards - show overlay content always on mobile */
  .portfolio-item .group-hover\:opacity-100 {
    opacity: 1 !important;
  }
  .portfolio-item .translate-y-4 {
    transform: translateY(0) !important;
  }

  /* Pricing cards - remove scale on mobile */
  .scale-\[1\.02\] {
    transform: none !important;
  }

  /* Modal - full width on tiny screens */
  #quote-modal .max-w-md {
    max-width: calc(100vw - 1rem) !important;
    margin: 0 auto;
  }

  /* Floating buttons - adjust spacing */
  .floating-buttons {
    bottom: 5rem !important;
    right: 0.75rem !important;
  }
  .floating-buttons a {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.75rem !important;
  }
  .floating-buttons a svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Scroll to top - smaller */
  #scroll-top {
    width: 2.5rem !important;
    height: 2.5rem !important;
    bottom: 1rem !important;
    left: 0.75rem !important;
  }
  #scroll-top svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Testimonial thumbs - smaller */
  .testimonial-thumb {
    width: 2.5rem !important;
    height: 2.5rem !important;
  }

  /* About section - prevent overflow */
  #about .-right-4 {
    right: -0.5rem !important;
  }

  /* Footer newsletter */
  #footer input[name="email"] {
    width: 10rem !important;
  }

  /* Section padding reduction */
  section.py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Stats grid on mobile */
  .grid.grid-cols-2.md\:grid-cols-4.gap-4 .stat-card {
    padding: 0.75rem !important;
  }
  .stat-card .text-3xl {
    font-size: 1.5rem !important;
  }

  /* Breadcrumb text */
  .breadcrumb .text-sm {
    font-size: 0.7rem !important;
  }

  /* Blog post cards */
  .blog-card .h-48 {
    height: 10rem !important;
  }

  /* Team member cards */
  .team-card .h-64 {
    height: 12rem !important;
  }
}

/* === 2. STANDARD PHONES (361px - 640px) === */
@media (max-width: 640px) {
  /* Hero - adjust height for mobile */
  #hero {
    min-height: 100dvh !important;
  }

  /* Portfolio cards - show overlay content always on mobile (no hover on touch) */
  .portfolio-item .absolute.inset-0.bg-gradient-to-t {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(37, 110, 122, 0.95) 0%, rgba(37, 110, 122, 0.75) 50%, rgba(37, 110, 122, 0.4) 100%) !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 {
    transform: translateY(0) !important;
    padding: 0.75rem !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 h3 {
    font-size: 0.9rem !important;
    margin-bottom: 0.25rem !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 p {
    font-size: 0.7rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 .flex.flex-wrap.gap-1 {
    display: none !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 .flex.flex-wrap.items-center.gap-2 {
    display: none !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 .inline-flex.items-center {
    font-size: 0.7rem !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 .inline-block.px-2\.5 {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 .inline-block.px-2 {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.5rem !important;
    margin-bottom: 0.25rem !important;
  }
  /* Hide the featured badge on mobile to reduce clutter */
  .portfolio-item .absolute.top-3.left-3 {
    top: 0.5rem !important;
    left: 0.5rem !important;
    padding: 0.15rem 0.4rem !important;
    font-size: 0.55rem !important;
  }
  .portfolio-item .absolute.top-3.left-3 i {
    font-size: 0.45rem !important;
  }
  .portfolio-item .absolute.top-4.left-4 {
    top: 0.5rem !important;
    left: 0.5rem !important;
    padding: 0.15rem 0.4rem !important;
    font-size: 0.55rem !important;
  }
  .portfolio-item .absolute.top-4.left-4 i {
    font-size: 0.45rem !important;
  }
  /* Ensure the portfolio item has a minimum height for the overlay */
  .portfolio-item {
    min-height: 200px !important;
  }
  .portfolio-item .aspect-w-16 {
    min-height: 180px !important;
  }
  .portfolio-item .aspect-w-16 img {
    min-height: 180px !important;
  }
  /* Make the whole card clickable with proper touch target */
  .portfolio-item a {
    min-height: 44px !important;
  }

  /* Modal - responsive width */
  #quote-modal .max-w-md {
    max-width: calc(100vw - 2rem) !important;
  }

  /* Fix modal body scrolling */
  #quote-modal .bg-white.rounded-2xl {
    max-height: calc(100dvh - 2rem) !important;
    overflow-y: auto !important;
  }

  /* Floating buttons - adjust for mobile */
  .floating-buttons {
    bottom: 5.5rem !important;
    right: 0.75rem !important;
  }
  .floating-buttons a {
    padding: 0.65rem 0.85rem !important;
  }
  .floating-buttons a span {
    font-size: 0.75rem !important;
  }

  /* Scroll to top - better positioning */
  #scroll-top {
    bottom: 1.25rem !important;
    left: 0.75rem !important;
  }

  /* Pricing - remove scale on mobile */
  .scale-\[1\.02\] {
    transform: none !important;
  }

  /* About section - prevent horizontal overflow */
  #about .-right-4 {
    right: -1rem !important;
  }
  #about .-bottom-6 {
    bottom: -1.5rem !important;
  }

  /* Testimonial thumbs - better spacing */
  .testimonial-thumb {
    width: 2.75rem !important;
    height: 2.75rem !important;
  }

  /* Footer - stack newsletter */
  #footer .flex.flex-col.md\:flex-row.items-center.justify-between .flex.items-center.gap-4 {
    flex-direction: column !important;
    width: 100% !important;
  }
  #footer input[name="email"] {
    width: 100% !important;
  }
  #footer .flex.gap-2 {
    width: 100% !important;
  }
  #footer .flex.gap-2 input {
    flex: 1 !important;
  }

  /* Footer widgets - reduce gap */
  #footer .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-4 {
    gap: 2rem !important;
  }

  /* Section header text sizes */
  section header h2 {
    font-size: 1.5rem !important;
  }
  section header .text-2xl {
    font-size: 1.5rem !important;
  }

  /* Key features grid */
  #key-features .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    gap: 1rem !important;
  }

  /* Stats section */
  .stats-grid .grid.grid-cols-2.md\:grid-cols-4 {
    gap: 0.75rem !important;
  }

  /* Video section - fix bg-fixed on mobile */
  .video-section {
    background-attachment: scroll !important;
  }

  /* Portfolio filter buttons */
  #portfolio-filter {
    gap: 0.5rem !important;
  }
  #portfolio-filter button {
    font-size: 0.7rem !important;
    padding: 0.35rem 0.75rem !important;
  }

  /* CTA section tabs */
  .cta-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cta-tabs::-webkit-scrollbar {
    display: none;
  }
  .cta-tab {
    white-space: nowrap !important;
    font-size: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
  }

  /* Floating buttons overlap with scroll-top */
  .floating-buttons + #scroll-top {
    z-index: 49 !important;
  }

  /* Team page - grid */
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Blog listing - single column on small phones */
  .blog-listing-grid {
    grid-template-columns: 1fr !important;
  }

  /* Portfolio detail page - gallery */
  .portfolio-detail-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Service detail page - hero */
  .service-hero .grid.grid-cols-1.lg\:grid-cols-2 {
    gap: 1.5rem !important;
  }

  /* Career detail page */
  .career-hero h1 {
    font-size: 1.5rem !important;
  }
  .career-hero .flex-wrap.gap-3 {
    gap: 0.5rem !important;
  }
  .career-hero .flex-wrap.gap-3 > span {
    font-size: 0.7rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Career listing page */
  .career-listing .grid.grid-cols-1.md\:grid-cols-2 {
    gap: 1rem !important;
  }

  /* FAQ page */
  .faq-section .grid.grid-cols-1.lg\:grid-cols-2 {
    gap: 1.5rem !important;
  }
  .faq-section .hidden.lg\:block {
    display: none !important;
  }

  /* Contact page */
  .contact-page .grid.grid-cols-1.lg\:grid-cols-2 {
    gap: 2rem !important;
  }

  /* Thank you page */
  .thank-you-page .w-24.h-24 {
    width: 5rem !important;
    height: 5rem !important;
  }
  .thank-you-page .w-16.h-16 {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  /* Breadcrumb padding */
  .breadcrumb-section {
    padding-top: 4rem !important;
  }

  /* Mobile menu - prevent horizontal scroll */
  #mobile-menu {
    max-width: 85vw !important;
  }

  /* Stats in hero */
  .hero-stats .grid.grid-cols-2.md\:grid-cols-4 {
    gap: 0.5rem !important;
  }
  .hero-stats .stat-card {
    padding: 0.5rem !important;
  }
  .hero-stats .stat-card .text-2xl {
    font-size: 1.25rem !important;
  }

  /* Footer CTA bar */
  #footer .border-b .flex.flex-col.md\:flex-row {
    gap: 1rem !important;
  }
}

/* === 3. TABLETS (641px - 768px) === */
@media (max-width: 768px) {
  /* Hero heading */
  #hero h1 {
    font-size: 2.5rem !important;
  }

  /* Portfolio grid */
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Key features - 2 columns on tablet */
  #key-features .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* About section - stack */
  #about .lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Footer - 2 columns */
  #footer .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Blog sidebar */
  .blog-layout .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .blog-layout .lg\:col-span-2 {
    grid-column: span 1 !important;
  }

  /* Portfolio detail sidebar */
  .portfolio-detail .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .portfolio-detail .lg\:col-span-2 {
    grid-column: span 1 !important;
  }

  /* Service detail */
  .service-detail .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .service-detail .lg\:col-span-2 {
    grid-column: span 1 !important;
  }

  /* Career detail */
  .career-detail .lg\:grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  .career-detail .lg\:col-span-2 {
    grid-column: span 1 !important;
  }

  /* Portfolio filter - scrollable */
  #portfolio-filter {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }
  #portfolio-filter::-webkit-scrollbar {
    display: none;
  }

  /* Testimonial thumbs - 3 per row on tablet */
  .testimonial-thumbs {
    gap: 0.5rem !important;
  }
  .testimonial-thumb {
    width: 3rem !important;
    height: 3rem !important;
  }
}

/* === 4. TOUCH DEVICES - Overlay Fixes === */
@media (hover: none) and (pointer: coarse) {
  /* Portfolio cards - show overlay on touch devices */
  .portfolio-item .absolute.inset-0.bg-gradient-to-t {
    opacity: 1 !important;
  }
  .portfolio-item .absolute.bottom-0.left-0.right-0.p-4 {
    transform: translateY(0) !important;
  }

  /* Remove hover-only interactions */
  .group:hover .group-hover\:opacity-100 {
    opacity: 1 !important;
  }
  .group:hover .group-hover\:translate-y-0 {
    transform: translateY(0) !important;
  }

  /* Ensure touch targets are >= 44px */
  .touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Floating buttons - expand on touch */
  .floating-buttons a {
    min-height: 44px !important;
  }

  /* Scroll to top - expand on touch */
  #scroll-top {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Pricing CTA buttons */
  .pricing-cta {
    min-height: 44px !important;
  }

  /* Hero CTA buttons */
  .hero-cta {
    min-height: 44px !important;
  }

  /* Filter buttons */
  .filter-btn {
    min-height: 44px !important;
  }
}

/* === 5. SAFE AREA INSETS (Notched Devices) === */
@supports (padding: max(0px)) {
  .floating-buttons {
    right: max(0.75rem, env(safe-area-inset-right)) !important;
    bottom: max(5.5rem, env(safe-area-inset-bottom)) !important;
  }

  #scroll-top {
    left: max(0.75rem, env(safe-area-inset-left)) !important;
    bottom: max(1.25rem, env(safe-area-inset-bottom)) !important;
  }

  #quote-modal .p-4 {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  body.modal-open {
    padding-right: env(safe-area-inset-right) !important;
  }
}

/* === 6. PORTFOLIO PAGE RESPONSIVE FIXES === */
/* Filter bar on portfolio page */
.portfolio-filters {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap !important;
}
.portfolio-filters::-webkit-scrollbar {
  display: none;
}

/* Portfolio stats hero */
.portfolio-stats .grid-cols-2.md\:grid-cols-4 {
  gap: 0.5rem;
}
.portfolio-stats .stat-card {
  padding: 0.75rem !important;
}

/* Portfolio project cards */
.portfolio-project-card .h-56 {
  height: 12rem !important;
}

/* === 7. BLOG PAGE RESPONSIVE FIXES === */
.blog-hero h1 {
  font-size: 1.75rem !important;
}
@media (min-width: 640px) {
  .blog-hero h1 {
    font-size: 2.5rem !important;
  }
}
@media (min-width: 1024px) {
  .blog-hero h1 {
    font-size: 3.5rem !important;
  }
}

/* Blog post featured image */
.blog-post-image {
  height: 12rem !important;
}
@media (min-width: 640px) {
  .blog-post-image {
    height: 16rem !important;
  }
}
@media (min-width: 768px) {
  .blog-post-image {
    height: 24rem !important;
  }
}

/* Blog post content */
.blog-post-content {
  padding: 1.25rem !important;
}
@media (min-width: 640px) {
  .blog-post-content {
    padding: 2rem !important;
  }
}
@media (min-width: 1024px) {
  .blog-post-content {
    padding: 2.5rem !important;
  }
}

/* Blog post title */
.blog-post-title {
  font-size: 1.5rem !important;
}
@media (min-width: 640px) {
  .blog-post-title {
    font-size: 2rem !important;
  }
}
@media (min-width: 1024px) {
  .blog-post-title {
    font-size: 2.5rem !important;
  }
}

/* === 8. SERVICE PAGE RESPONSIVE FIXES === */
.service-hero h1 {
  font-size: 1.75rem !important;
}
@media (min-width: 640px) {
  .service-hero h1 {
    font-size: 2.5rem !important;
  }
}

/* Service features sidebar */
.service-features.lg\:sticky {
  position: static !important;
}
@media (min-width: 1024px) {
  .service-features.lg\:sticky {
    position: sticky !important;
  }
}

/* === 9. TEAM PAGE RESPONSIVE FIXES === */
.team-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Team member photo */
.team-member-photo {
  height: 12rem !important;
}
@media (min-width: 640px) {
  .team-member-photo {
    height: 16rem !important;
  }
}

/* === 10. CAREER PAGE RESPONSIVE FIXES === */
.career-hero h1 {
  font-size: 1.5rem !important;
}
@media (min-width: 640px) {
  .career-hero h1 {
    font-size: 2.5rem !important;
  }
}
@media (min-width: 768px) {
  .career-hero h1 {
    font-size: 3.5rem !important;
  }
}

/* Career filters */
.career-filters {
  flex-direction: column !important;
}
@media (min-width: 640px) {
  .career-filters {
    flex-direction: row !important;
  }
}

/* Career cards */
.career-card .h-40 {
  height: 10rem !important;
}
@media (min-width: 640px) {
  .career-card .h-40 {
    height: 12rem !important;
  }
}

/* === 11. TESTIMONIALS PAGE RESPONSIVE FIXES === */
.testimonials-hero h1 {
  font-size: 1.75rem !important;
}
@media (min-width: 640px) {
  .testimonials-hero h1 {
    font-size: 2.5rem !important;
  }
}
@media (min-width: 1024px) {
  .testimonials-hero h1 {
    font-size: 3.5rem !important;
  }
}

/* Testimonials grid */
.testimonials-grid {
  grid-template-columns: 1fr !important;
}
@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* === 12. FAQ PAGE RESPONSIVE FIXES === */
.faq-hero h1 {
  font-size: 1.5rem !important;
}
@media (min-width: 768px) {
  .faq-hero h1 {
    font-size: 2.25rem !important;
  }
}

/* === 13. CONTACT PAGE RESPONSIVE FIXES === */
.contact-form {
  padding: 1.25rem !important;
}
@media (min-width: 640px) {
  .contact-form {
    padding: 1.5rem !important;
  }
}

/* Contact info icons */
.contact-info .w-12.h-12 {
  width: 2.5rem !important;
  height: 2.5rem !important;
}

/* === 14. PRIVACY & TERMS PAGE RESPONSIVE FIXES === */
.legal-content h1 {
  font-size: 1.5rem !important;
}
@media (min-width: 768px) {
  .legal-content h1 {
    font-size: 2.25rem !important;
  }
}

.legal-content .prose {
  font-size: 0.875rem !important;
}
@media (min-width: 640px) {
  .legal-content .prose {
    font-size: 1rem !important;
  }
}

/* === 15. THANK YOU PAGE RESPONSIVE FIXES === */
.thank-you-icon {
  width: 4rem !important;
  height: 4rem !important;
}
@media (min-width: 640px) {
  .thank-you-icon {
    width: 6rem !important;
    height: 6rem !important;
  }
}

.thank-you-title {
  font-size: 1.5rem !important;
}
@media (min-width: 640px) {
  .thank-you-title {
    font-size: 2rem !important;
  }
}
@media (min-width: 768px) {
  .thank-you-title {
    font-size: 2.25rem !important;
  }
}

/* === 16. VIDEO SECTION FIX === */
.video-section,
section.bg-fixed {
  background-attachment: scroll !important;
}
@media (min-width: 768px) {
  .video-section,
  section.bg-fixed {
    background-attachment: fixed !important;
  }
}

/* === 17. HEADER RESPONSIVE FIXES === */
/* Navbar active state fixes */
.nav-link.active {
  color: var(--brand-primary, #22B8D1) !important;
}

/* Mobile nav link touch targets */
.mobile-nav-link {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

/* === 18. MISC RESPONSIVE FIXES === */
/* Ensure images don't overflow */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Fix horizontal scroll */
html,
body {
  overflow-x: hidden !important;
  width: 100% !important;
  min-width: 100vw !important;
}

@media (max-width: 640px) {
  #header,
  #hero,
  #mobile-menu,
  #mobile-menu-overlay,
  section,
  .max-w-7xl,
  .max-w-4xl,
  .max-w-2xl,
  .max-w-xs,
  .w-screen {
    max-width: 100vw !important;
  }
}

/* Fix for sticky headers on mobile */
.sticky {
  position: -webkit-sticky !important;
}

/* Smooth scrolling on mobile */
html {
  -webkit-overflow-scrolling: touch !important;
}

/* Improve tap highlight */
a, button, input, select, textarea {
  -webkit-tap-highlight-color: rgba(34, 184, 209, 0.2) !important;
}

/* Prevent text resize on orientation change */
html {
  -webkit-text-size-adjust: 100% !important;
}

/* Form elements - don't zoom on focus */
input, select, textarea {
  font-size: 16px !important;
}

/* Fix for 100vh on mobile browsers */
.min-h-screen, .h-screen {
  min-height: 100dvh !important;
}

/* Fix for position fixed on mobile */
.fixed {
  -webkit-transform: translateZ(0) !important;
}

/* Prevent callout on long press */
* {
  -webkit-touch-callout: none !important;
}

/* Allow text selection */
p, h1, h2, h3, h4, h5, h6, span, div {
  -webkit-touch-callout: default !important;
}

/* === 19. LOGO RESPONSIVE FIXES === */
/* Overrides the global img rule (max-width:100% !important; height:auto !important)
   that otherwise nullifies Tailwind height utilities and breaks logo alignment.
   Higher-specificity selectors with !important restore fixed-height, auto-width,
   object-contain behavior for consistent, well-aligned logos on all screens. */

/* Logo link container - guarantee flex centering */
.site-logo {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Shared logo image sizing behavior (applies to header, drawer, and footer logos) */
.site-logo-img {
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* --- Main Header Logo --- */
#header .site-logo-img {
  height: 2.25rem !important; /* h-9 = 36px */
  max-width: 140px !important;
}
@media (min-width: 640px) {
  #header .site-logo-img {
    height: 2.5rem !important; /* h-10 = 40px */
    max-width: 160px !important;
  }
}
@media (min-width: 1024px) {
  #header .site-logo-img {
    height: 3rem !important; /* h-12 = 48px */
    max-width: 180px !important;
  }
}

/* Tiny phones - keep logo compact so it never crowds the hamburger */
@media (max-width: 360px) {
  #header .site-logo-img {
    height: 2rem !important; /* h-8 = 32px */
    max-width: 120px !important;
  }
}

/* --- Mobile Drawer Logo --- */
#mobile-menu .site-logo-img {
  height: 2rem !important; /* h-8 = 32px */
  max-width: 130px !important;
}
@media (min-width: 640px) {
  #mobile-menu .site-logo-img {
    height: 2.25rem !important; /* h-9 = 36px */
    max-width: 140px !important;
  }
}

/* --- Footer Logo --- */
#footer .site-logo-img {
  height: 2.5rem !important; /* h-10 = 40px */
  max-width: 160px !important;
}
@media (min-width: 768px) {
  #footer .site-logo-img {
    height: 3rem !important; /* h-12 = 48px */
    max-width: 180px !important;
  }
}

/* --- Modal Logo --- */
#quote-modal .modal-logo {
  height: 2.75rem !important; /* h-11 = 44px */
  max-width: 170px !important;
}
@media (min-width: 640px) {
  #quote-modal .modal-logo {
    height: 3.5rem !important; /* h-14 = 56px */
    max-width: 220px !important;
  }
}