/* Reduce extra spacing on homepage */
.hero-section {
   min-height: auto !important;
   padding-top: 100px !important;
   padding-bottom: 40px !important;
}

.hero-stage {
   gap: 24px !important;
   position: relative;
   z-index: 2;
}

.hero-copy {
   position: relative;
   z-index: 3;
}

#home-stats {
   padding-top: 32px !important;
   padding-bottom: 32px !important;
}

.front-page-cta-banner {
   padding-top: 48px !important;
   padding-bottom: 48px !important;
}

#home-stats > .container-x {
   gap: 16px !important;
}

.mt-14 {
   margin-top: 24px !important;
}

.mt-12 {
   margin-top: 16px !important;
}

.mt-10 {
   margin-top: 12px !important;
}

.gap-6 {
   gap: 16px !important;
}

/* Fix star icon to be filled with gold color */
.hero-copy .text-gold {
   fill: #d4a017 !important;
   color: #d4a017 !important;
}

.hero-copy svg.text-gold {
   fill: #d4a017 !important;
   color: #d4a017 !important;
}

.hero-copy svg.text-gold path {
   fill: #d4a017 !important;
}

.hero-stage-image {
   transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
   transform-origin: center center;
   will-change: opacity, transform;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   /* Ken Burns only on the active slide */
   animation: none !important;
}

/* Only the visible slide gets the Ken Burns animation */
.hero-stage-image[aria-hidden="false"],
.hero-stage-image.hero-active,
.hero-stage-image.active,
.hero-stage-image[style*="opacity: 1"] {
   animation: heroKenBurns 12s ease-in-out infinite alternate !important;
}

/* Alternate the pan direction on every other active slide */
.hero-stage-image:nth-child(even)[aria-hidden="false"],
.hero-stage-image:nth-child(even).hero-active,
.hero-stage-image:nth-child(even).active {
   animation-name: heroKenBurnsAlt !important;
   animation-duration: 14s !important;
}

/* Faint background image behind the copy */
.hero-bg-image {
   transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
   transform-origin: center center;
   will-change: opacity, transform;
   animation: heroBgDrift 20s ease-in-out infinite alternate;
}

/* Single-image hero: visible by default (old multi-slide stacking removed).
   The bundle renders ONE .hero-stage-image with no active markers, so it must
   not be hidden by default.
   pointer-events: none lets swipe/drag events reach the parent
   .hero-headline-visual where hero-swipe.js?v=20260909-mobile-stable1 listens. */
.hero-headline-visual .hero-stage-image {
   position: absolute;
   inset: 0;
   opacity: 1;
   pointer-events: none !important;
}

/* Dot navigation — sits below the hero-headline-visual card */
.hero-carousel-dots {
   display: inline-flex !important;
   flex-wrap: wrap !important;
   gap: 6px !important;
   padding: 8px 14px !important;
   border-radius: 999px !important;
   background: rgba(0, 0, 0, 0.45) !important;
   backdrop-filter: blur(10px) !important;
   -webkit-backdrop-filter: blur(10px) !important;
   border: 1px solid rgba(255, 255, 255, 0.12) !important;
   margin-top: 20px !important;
   margin-bottom: 8px !important;
   position: relative !important;
   z-index: 20 !important;
}

.hero-headline-visual {
   position: relative;
   min-height: 300px;
}

/* Subtle Ken Burns — gentle zoom that keeps images in frame */
@keyframes heroKenBurns {
   0% {
     transform: scale(1.0) translate3d(0, 0, 0);
   }
   100% {
     transform: scale(1.08) translate3d(-0.8%, -1%, 0);
   }
}

@keyframes heroKenBurnsAlt {
   0% {
     transform: scale(1.05) translate3d(1%, -0.5%, 0);
   }
   100% {
     transform: scale(1.0) translate3d(0, 1%, 0);
   }
}

@keyframes heroBgDrift {
   0% {
     transform: scale(1.03) translate3d(0, 0, 0);
   }
   100% {
     transform: scale(1.08) translate3d(1.5%, 1%, 0);
   }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
   .hero-stage-image,
   .hero-bg-image {
     animation: none !important;
}
}

/* Reduce hero image overlay on mobile devices */
@media (max-width: 639px) {
  .hero-image-overlay {
    background: linear-gradient(to bottom, var(--background) 0%, color-mix(in oklab, var(--background) 88%, transparent) 45%, transparent 100%) !important;
    opacity: 0.75 !important;
  }
  .hero-headline-visual {
    height: auto !important;
    min-height: 0 !important;
    max-width: 240px !important;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 6 / 5 !important;
  }
  .hero-stage-image {}
  .hero-section {
    padding-bottom: 16px !important;
  }
}

/* Mobile carousel container - small and contained like desktop */
@media (max-width: 767px) {
  .hero-visual,
  .hero-headline-visual {
    width: 100% !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-visual .hero-stage {
    width: 100% !important;
    max-width: 260px !important;
  }

  .hero-headline-visual {
    height: auto !important;
    min-height: 0 !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 6 / 5 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
  }

  .hero-stage-image {}

  .hero-bg-image {
    object-fit: cover !important;
  }

  .hero-panel {
    padding: 0.75rem !important;
  }

  .hero-panel .text-lg {
    font-size: 0.875rem !important;
  }

  .hero-panel .text-sm {
    font-size: 0.75rem !important;
  }

  .hero-panel dl.grid {
    gap: 0.25rem !important;
  }

  .hero-panel dd {
    font-size: 0.7rem !important;
  }

  .hero-panel dt {
    font-size: 0.65rem !important;
  }

  .hv-zone-prev,
  .hv-zone-next {
    width: 20% !important;
  }

  .hv-zone-prev .hv-icon-wrapper,
  .hv-zone-next .hv-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }

  .hero-carousel-dots {
    gap: 5px !important;
    padding: 6px 12px !important;
    margin-top: 12px !important;
  }

  .hero-carousel-dots button {
    width: 6px !important;
    height: 6px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 18px !important;
  }
}

.dark .hero-carousel-dots button {
   background: rgba(255, 255, 255, 0.25) !important;
}
.dark .hero-carousel-dots button[aria-current="true"] {
   background: #ffffff !important;
}

/* Ensure auth forms stay centered and prevent horizontal shift on mobile */
.min-h-screen {
   overflow-x: hidden !important;
}
.dark .front-page-project-card .front-page-project-image {
   filter: brightness(1.12) contrast(1.05);
}

.dark .front-page-project-card .bg-gradient-to-t {
   background: linear-gradient(to top, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.48) 45%, rgba(15, 23, 42, 0.2) 100%) !important;
}

.dark .front-page-project-card .rounded-full.bg-primary\/20 {
   background: rgba(37, 99, 235, 0.3) !important;
   color: #bfdbfe !important;
}

.dark .front-page-project-card .rounded-full.bg-primary\/20.text-primary {
   color: #bfdbfe !important;
}

.dark .front-page-project-card .bg-primary\/10.text-primary,
.dark .front-page-project-card .rounded-full.bg-primary\/10.text-primary {
   background: rgba(37, 99, 235, 0.25) !important;
   color: #bfdbfe !important;
}

.dark .front-page-project-card .rounded-full.bg-primary\/10 {
   background: rgba(37, 99, 235, 0.25) !important;
   color: #bfdbfe !important;
}

.dark .blog-card .rounded-full.bg-primary\/10.text-primary,
.dark .blog-card .bg-primary\/10.text-primary {
   background: rgba(37, 99, 235, 0.25) !important;
   color: #bfdbfe !important;
}

.dark .front-page-project-card .text-muted-foreground {
   color: #cbd5e1 !important;
}

.dark .front-page-project-card .text-muted-foreground\/90 {
   color: #94a3b8 !important;
}

.dark .front-page-project-card .text-primary {
   color: #bfdbfe !important;
}
.dark .front-page-project-card .text-primary-foreground {
   color: #ffffff !important;
}

.dark .bg-primary,
.dark [class*="bg-primary"] {
   background-color: #2563eb !important;
}

.dark .text-primary-foreground,
.dark [class*="text-primary-foreground"] {
   color: #ffffff !important;
}

.dark .bg-primary\/20,
.dark .bg-primary\/10 {
   background-color: #2563eb !important;
}

.dark .text-primary-foreground,
.dark [class*="text-primary-foreground"] {
   color: #ffffff !important;
}

.dark .border-primary,
.dark [class*="border-primary"] {
   border-color: #2563eb !important;
}

.dark .hero-image-overlay {
   background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.8) 50%, transparent 100%) !important;
}

.dark .product-card,
.dark .blog-card,
.dark .calendar-event-item,
.dark .quote-card {
   background-color: #1e293b !important;
   border-color: #334155 !important;
}

.dark .product-card:hover,
.dark .blog-card:hover {
   border-color: #2563eb !important;
}

.dark .calendar-day {
   background-color: #1e293b !important;
}

.dark .calendar-day.today {
   background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
   border-color: #2563eb !important;
}

.dark .calendar-events-panel {
   background-color: #1e293b !important;
}

.dark .event-date-badge {
   background: linear-gradient(135deg, #1e3a5f, #0f172a) !important;
   border-color: #2563eb !important;
}

.dark .header {
   background-color: rgba(15, 23, 42, 0.95) !important;
   border-color: #334155 !important;
}

.dark .footer {
   background-color: #0f172a !important;
   border-color: #334155 !important;
}

.dark .shadow-lg,
.dark .shadow-md,
.dark .shadow-sm {
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.dark .text-gold {
   color: #fbbf24 !important;
}

.dark .bg-muted {
   background-color: #334155 !important;
}

.dark .text-white {
   color: #ffffff !important;
}

.dark .from-background {
   --tw-gradient-from: #0f172a !important;
}

.dark .via-background\/95 {
   --tw-gradient-stops: var(--tw-gradient-from), rgba(15, 23, 42, 0.95), var(--tw-gradient-to) !important;
}

.dark .to-background\/60 {
   --tw-gradient-to: rgba(15, 23, 42, 0.6) !important;
}

/* Keep every section inside the device viewport on phones. */
@media (max-width: 767px) {
   html,
   body,
   #root {
     width: 100%;
     max-width: 100%;
     overflow-x: hidden;
   }

   .container-x {
     width: 100% !important;
     max-width: 100% !important;
     padding-inline: 1rem !important;
   }

    .hero-headline-visual,
    .hero-visual,
    .hero-stage,
    .hero-stage-image,
    .hero-bg-image {
      width: 100% !important;
      max-width: 260px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    .hero-headline-visual {
      transform: none !important;
      min-height: 0 !important;
      height: auto !important;
      aspect-ratio: 6 / 5 !important;
      border-radius: 0.75rem !important;
    }

    .hero-stage-image {}

   .hero-visual {
     min-height: 0 !important;
   }

   .front-page-project-card,
   .product-card,
   .blog-card {
     min-width: 0;
     max-width: 100% !important;
   }

    h1,
    h2,
    h3,
    p,
    a,
    button {
      overflow-wrap: anywhere;
    }
}

/* Modern Footer Navigation - hidden until React loads */
.site-footer {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem 0;
  position: relative;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.5s, opacity 0.3s ease 0.5s;
}

.site-footer.loaded {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
}

.site-footer-explore {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-footer-explore:hover {
  color: #60a5fa;
}

.site-footer-nav {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.site-footer-nav a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.site-footer-nav a:hover {
  color: #ffffff;
  transform: translateY(-2px);
}

.site-footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  transition: width 0.3s ease;
}

.site-footer-nav a:hover::after {
  width: 100%;
}

@media (max-width: 768px) {
  .site-footer-inner {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .site-footer-nav {
    gap: 1.5rem;
    justify-content: center;
  }

  .site-footer-nav a {
    font-size: 0.85rem;
  }
}
/* Instant logo theme swap - both logos rendered, CSS picks the visible one */
.brand-logo-wrap {
  position: relative;
}
.brand-logo-dark {
  display: none;
}
.dark .brand-logo-light {
  display: none;
}
.dark .brand-logo-dark {
  display: inline-block;
}

/* Instant logo theme swap - both logos rendered, CSS picks the visible one */
.brand-logo-wrap {
  position: relative;
}
.brand-logo-dark {
  display: none;
}
.dark .brand-logo-light {
  display: none;
}
.dark .brand-logo-dark {
  display: inline-block;
}

/* ===========================================
   DEVICE-SPECIFIC MOBILE SCALING
   Scales website for different mobile device sizes
   =========================================== */

/* Small phones (320px - 374px) - iPhone SE, small Android */
@media (max-width: 374px) {
  html {
    font-size: 12px !important;
  }

  .container-x {
    padding-inline: 0.75rem !important;
  }

  .hero-section {
    padding-top: 70px !important;
    padding-bottom: 24px !important;
  }

  /* Carousel container - small and proportional */
  .hero-visual,
  .hero-headline-visual {
    width: 100% !important;
    max-width: 180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-visual .hero-stage {
    width: 100% !important;
    max-width: 180px !important;
  }

  .hero-headline-visual {
    height: auto !important;
    min-height: 0 !important;
    max-width: 180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 6 / 5 !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
  }

  .hero-stage-image {}

  .hero-bg-image {
    object-fit: cover !important;
  }

  .hero-panel {
    padding: 0.4rem !important;
  }

  .hero-panel .text-lg {
    font-size: 0.7rem !important;
  }

  .hero-panel .text-sm {
    font-size: 0.6rem !important;
  }

  .hero-panel dl.grid {
    gap: 0.1rem !important;
  }

  .hero-panel dd {
    font-size: 0.55rem !important;
  }

  .hero-panel dt {
    font-size: 0.5rem !important;
  }

  .hv-zone-prev,
  .hv-zone-next {
    width: 18% !important;
  }

  .hv-zone-prev .hv-icon-wrapper,
  .hv-zone-next .hv-icon-wrapper {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.9rem !important;
  }

  .hero-carousel-dots {
    gap: 3px !important;
    padding: 3px 8px !important;
    margin-top: 6px !important;
  }

  .hero-carousel-dots button {
    width: 4px !important;
    height: 4px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 12px !important;
  }

  .front-page-cta-banner {
    padding: 1.5rem !important;
  }

  .front-page-cta-banner h2 {
    font-size: 1rem !important;
  }

  #home-stats {
    padding: 1.5rem 0 !important;
  }

  .site-footer {
    padding: 1.5rem 0 !important;
  }
}

/* Standard phones (375px - 413px) - iPhone standard, common Android */
@media (min-width: 375px) and (max-width: 413px) {
  html {
    font-size: 13px !important;
  }

  .container-x {
    padding-inline: 0.875rem !important;
  }

  .hero-section {
    padding-top: 80px !important;
    padding-bottom: 28px !important;
  }

  /* Carousel container - small and proportional */
  .hero-visual,
  .hero-headline-visual {
    width: 100% !important;
    max-width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-visual .hero-stage {
    width: 100% !important;
    max-width: 200px !important;
  }

  .hero-headline-visual {
    height: auto !important;
    min-height: 0 !important;
    max-width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 6 / 5 !important;
    border-radius: 0.6rem !important;
    overflow: hidden !important;
  }

  .hero-stage-image {}

  .hero-panel {
    padding: 0.5rem !important;
  }

  .hero-panel .text-lg {
    font-size: 0.75rem !important;
  }

  .hero-panel .text-sm {
    font-size: 0.65rem !important;
  }

  .hero-panel dl.grid {
    gap: 0.15rem !important;
  }

  .hero-panel dd {
    font-size: 0.6rem !important;
  }

  .hero-panel dt {
    font-size: 0.55rem !important;
  }

  .hv-zone-prev,
  .hv-zone-next {
    width: 18% !important;
  }

  .hv-zone-prev .hv-icon-wrapper,
  .hv-zone-next .hv-icon-wrapper {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.95rem !important;
  }

  .hero-carousel-dots {
    gap: 4px !important;
    padding: 4px 10px !important;
    margin-top: 8px !important;
  }

  .hero-carousel-dots button {
    width: 5px !important;
    height: 5px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 14px !important;
  }
}

/* Large phones (414px - 479px) - iPhone Pro Max, large Android, small tablets */
@media (min-width: 414px) and (max-width: 479px) {
  html {
    font-size: 14px !important;
  }

  .container-x {
    padding-inline: 1rem !important;
  }

  .hero-section {
    padding-top: 85px !important;
    padding-bottom: 30px !important;
  }

  /* Carousel container - small and proportional */
  .hero-visual,
  .hero-headline-visual {
    width: 100% !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-visual .hero-stage {
    width: 100% !important;
    max-width: 220px !important;
  }

  .hero-headline-visual {
    height: auto !important;
    min-height: 0 !important;
    max-width: 220px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 6 / 5 !important;
    border-radius: 0.65rem !important;
    overflow: hidden !important;
  }

  .hero-stage-image {}

  .hero-panel {
    padding: 0.6rem !important;
  }

  .hero-panel .text-lg {
    font-size: 0.8rem !important;
  }

  .hero-panel .text-sm {
    font-size: 0.7rem !important;
  }

  .hero-panel dl.grid {
    gap: 0.2rem !important;
  }

  .hero-panel dd {
    font-size: 0.65rem !important;
  }

  .hero-panel dt {
    font-size: 0.6rem !important;
  }

  .hv-zone-prev,
  .hv-zone-next {
    width: 18% !important;
  }

  .hv-zone-prev .hv-icon-wrapper,
  .hv-zone-next .hv-icon-wrapper {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
  }

  .hero-carousel-dots {
    gap: 4px !important;
    padding: 5px 10px !important;
    margin-top: 8px !important;
  }

  .hero-carousel-dots button {
    width: 5px !important;
    height: 5px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 16px !important;
  }
}

/* Small tablets / large phones landscape (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
  html {
    font-size: 15px !important;
  }

  .container-x {
    padding-inline: 1rem !important;
  }

  .hero-section {
    padding-top: 90px !important;
    padding-bottom: 32px !important;
  }

  /* Carousel container - small and proportional */
  .hero-visual,
  .hero-headline-visual {
    width: 100% !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-visual .hero-stage {
    width: 100% !important;
    max-width: 260px !important;
  }

  .hero-headline-visual {
    height: auto !important;
    min-height: 0 !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    aspect-ratio: 6 / 5 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
  }

  .hero-stage-image {}

  .hero-panel {
    padding: 0.7rem !important;
  }

  .hero-panel .text-lg {
    font-size: 0.85rem !important;
  }

  .hero-panel .text-sm {
    font-size: 0.75rem !important;
  }

  .hv-zone-prev,
  .hv-zone-next {
    width: 18% !important;
  }

  .hv-zone-prev .hv-icon-wrapper,
  .hv-zone-next .hv-icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }

  .hero-carousel-dots {
    gap: 5px !important;
    padding: 6px 12px !important;
    margin-top: 10px !important;
  }

  .hero-carousel-dots button {
    width: 6px !important;
    height: 6px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 18px !important;
  }
}

/* General mobile scaling - applies to all mobile (< 768px) */
@media (max-width: 767px) {
  /* Ensure container fits viewport */
  .container-x {
    padding-inline: 1rem !important;
  }

  /* Prevent horizontal overflow */
  html, body, #root {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Base typography scaling */
  h1 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(1.25rem, 6vw, 1.75rem) !important; line-height: 1.25 !important; }
  h3 { font-size: clamp(1.1rem, 5vw, 1.35rem) !important; line-height: 1.3 !important; }
  h4 { font-size: clamp(1rem, 4.5vw, 1.15rem) !important; }

  p, a, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  button {
    font-size: clamp(0.8rem, 3.5vw, 0.9rem) !important;
  }

  /* Footer mobile */
  .site-footer-inner {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
    padding: 0 1rem;
  }

  .site-footer-nav {
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .site-footer-nav a {
    font-size: 0.8rem;
    white-space: normal;
  }

  /* Images responsive */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Force lazy-loaded images to show */
  img[loading="lazy"] {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Recent installations images */
  .front-page-project-image,
  [class*="recent-installation"] img,
  article[style*="animationDelay"] img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Touch targets - 44px minimum for accessibility */
  a, button, .btn, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Cards and containers */
  .front-page-project-card,
  .product-card,
  .blog-card,
  .service-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Scroll indicator */
  a[href="#home-stats"],
  a[aria-label="Scroll to highlights"] {
    bottom: 1rem !important;
    padding: 0.5rem !important;
  }

  a[href="#home-stats"] svg,
  a[aria-label="Scroll to highlights"] svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
}

/* Responsive scroll indicator arrow */
@media (max-width: 767px) {
  a[href="#home-stats"] {
    bottom: 1.5rem !important;
    padding: 0.5rem !important;
  }

  a[href="#home-stats"] svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }

  a[aria-label="Scroll to highlights"] {
    bottom: 1.5rem !important;
    padding: 0.5rem !important;
  }

  a[aria-label="Scroll to highlights"] svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
}

/* Bounce animation for scroll indicator */
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite !important;
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Final fluid responsive layer: keep every page attribute inside the viewport. */
:root {
  --page-gutter: clamp(1rem, 4vw, 3.5rem);
  --hero-card-width: clamp(280px, 50vw, 800px);
}

html,
body,
#root {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

html {
  font-size: clamp(14px, 1.15vw, 16px) !important;
}

body {
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.container-x {
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: var(--page-gutter) !important;
}

@media (max-width: 1023px) {
  .hero-section {
    min-height: auto !important;
    padding-top: clamp(6rem, 13vw, 8rem) !important;
    padding-bottom: clamp(2rem, 7vw, 4rem) !important;
  }

  .hero-stage {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 5vw, 3rem) !important;
  }

  .hero-copy,
  .hero-visual {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hero-visual {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-self: center !important;
    margin-inline: auto !important;
  }

  .hero-headline-visual {
    width: min(100%, var(--hero-card-width)) !important;
    max-width: var(--hero-card-width) !important;
    height: auto !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    aspect-ratio: 8 / 7 !important;
  }

  .hero-stage-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  .hero-panel {
    left: 50% !important;
    right: auto !important;
    width: min(calc(100% - 1rem), var(--hero-card-width)) !important;
    max-width: calc(100% - 1rem) !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
  }

  .hero-carousel-dots {
    align-self: center !important;
    margin-inline: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 767px) {
  .container-x {
    padding-inline: clamp(0.875rem, 4vw, 1.25rem) !important;
  }

  .hero-visual,
  .hero-stage,
  .hero-headline-visual {
    max-width: min(100%, 280px) !important;
  }

  .hero-headline-visual {
    width: min(100%, var(--hero-card-width)) !important;
    max-width: min(100%, var(--hero-card-width)) !important;
    aspect-ratio: 8 / 7 !important;
    border-radius: clamp(0.75rem, 3vw, 1.25rem) !important;
  }

  .hero-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0.75rem !important;
    transform: none !important;
  }

  .hero-carousel-dots {
    gap: 4px !important;
    padding: 4px 8px !important;
    margin-top: 10px !important;
    border-radius: 999px !important;
  }

  .hero-carousel-dots button {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 6px !important;
    height: 6px !important;
    padding: 0 !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 14px !important;
  }

  .hv-zone-prev .hv-icon-wrapper,
  .hv-zone-next .hv-icon-wrapper {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 0.9rem !important;
  }

  .front-page-project-card,
  .product-card,
  .blog-card,
  .service-card,
  .glass-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .front-page-project-card img,
  .product-card img,
  .blog-card img,
  .service-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --hero-card-width: min(70vw, 600px);
  }
}

/* Keep the panel and carousel controls in a clean vertical stack on tablets. */
@media (max-width: 1023px) {
  .hero-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0.75rem !important;
    transform: none !important;
  }

  .hero-carousel-dots {
    margin-top: clamp(0.5rem, 2vw, 0.75rem) !important;
  }
}

/* Compact carousel spacing tuned by phone size. */
@media (max-width: 374px) {
  .hero-carousel-dots {
    gap: 3px !important;
    padding: 3px 7px !important;
    margin-top: 8px !important;
  }

  .hero-carousel-dots button {
    width: 5px !important;
    height: 5px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 12px !important;
  }
}

@media (min-width: 375px) and (max-width: 479px) {
  .hero-carousel-dots {
    gap: 4px !important;
    padding: 4px 8px !important;
    margin-top: 8px !important;
  }

  .hero-carousel-dots button {
    width: 5px !important;
    height: 5px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 14px !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .hero-carousel-dots {
    gap: 5px !important;
    padding: 5px 10px !important;
    margin-top: 10px !important;
  }

  .hero-carousel-dots button {
    width: 6px !important;
    height: 6px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 16px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-carousel-dots {
    gap: 6px !important;
    padding: 6px 12px !important;
    margin-top: 12px !important;
  }

  .hero-carousel-dots button {
    width: 6px !important;
    height: 6px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 18px !important;
  }
}

/* Ensure the scroll indicator is clickable */
a[href="#featured-products"],
a[aria-label="Scroll to highlights"] {
  cursor: pointer;
  z-index: 100;
}


/* === Isolated final staging hero refinements (2026-09-04) === */
/* Phones: give copy the full usable viewport width and keep a large centered image. */
@media (max-width: 767px) {
  .hero-stage {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    padding-inline: 0 !important;
  }

  .hero-copy > * {
    max-width: min(100%, 42rem) !important;
  }

  .hero-copy h1,
  .hero-copy h2,
  .hero-copy p {
    overflow-wrap: anywhere;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding-bottom: clamp(2.25rem, 9vw, 3.25rem) !important;
    align-items: center !important;
  }

  .hero-headline-visual {
    width: min(92vw, 520px) !important;
    max-width: calc(100vw - 1.75rem) !important;
    min-height: 0 !important;
    aspect-ratio: 8 / 7 !important;
    transform: none !important;
    margin-inline: auto !important;
  }

  .hero-stage-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* A smaller desktop-like floating detail card, over the image rather than below it. */
  .hero-panel {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: clamp(0.55rem, 2.2vw, 0.85rem) !important;
    top: auto !important;
    width: min(calc(100% - 1.25rem), 330px) !important;
    max-width: calc(100% - 1.25rem) !important;
    margin: 0 !important;
    padding: clamp(0.65rem, 2.6vw, 0.9rem) !important;
    transform: translateX(-50%) !important;
    z-index: 14 !important;
    background: color-mix(in srgb, var(--background) 78%, transparent) !important;
    backdrop-filter: blur(10px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(115%) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.16) !important;
  }

  .hero-panel .h-11.w-11 { width: 2rem !important; height: 2rem !important; }
  .hero-panel .h-5.w-5 { width: 0.95rem !important; height: 0.95rem !important; }
  .hero-panel .font-medium { font-size: 0.78rem !important; line-height: 1.15rem !important; }
  .hero-panel .text-sm { font-size: 0.68rem !important; line-height: 1rem !important; }
  .hero-panel dl { margin-top: 0.45rem !important; gap: 0.15rem !important; }
  .hero-panel dl > div { min-height: 0 !important; }
  .hero-panel .mt-5.border-t { margin-top: 0.45rem !important; padding-top: 0.4rem !important; }

  /* Softer page-level hero veil so the enlarged image remains visible. */
  .hero-image-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.11)) !important;
    opacity: .58 !important;
  }
}

/* Laptop/desktop only: use more space for the hero image */
@media (min-width: 1024px) {
  .hero-visual {
    width: 90% !important;
    max-width: 90% !important;
    min-height: 0 !important;
    padding-bottom: 2.5rem !important;
    justify-self: end !important;
  }

  .hero-headline-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    transform: none !important;
    margin-left: auto !important;
  }
}

#featured-products { scroll-margin-top: 5rem; }

/* ==========================================================
   FINAL UNIVERSAL HERO FIT
   Keep the hero copy fluid on phones/tablets/desktops so it
   uses the available viewport like the iPad Air/Pro layout.
   This is intentionally appended so it wins over the older
   device-specific scaling rules above without changing the
   carousel implementation.
   ========================================================== */
.hero-copy {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 80rem !important;
  margin-inline: 0 !important;
}

.hero-copy h1 {
  width: 100% !important;
  max-width: 100% !important;
  font-size: clamp(2.15rem, 5.2vw, 4.5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: clamp(-0.045em, -0.04em, -0.025em) !important;
  text-wrap: balance;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.hero-copy > p,
.hero-copy .text-muted-foreground {
  width: 100% !important;
  max-width: 42rem !important;
  font-size: clamp(0.95rem, 1.45vw, 1.15rem) !important;
  line-height: 1.65 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.hero-copy .flex.flex-wrap {
  width: 100% !important;
  min-width: 0 !important;
}

.hero-copy a,
.hero-copy button {
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .hero-copy {
    max-width: none !important;
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 7vw, 3.65rem) !important;
  }

  .hero-copy > p,
  .hero-copy .text-muted-foreground {
    max-width: 100% !important;
    font-size: clamp(0.94rem, 2vw, 1.1rem) !important;
  }
}

@media (max-width: 767px) {
  .hero-section {
    width: 100% !important;
    overflow-x: clip !important;
  }

  .hero-stage {
    width: 100% !important;
    max-width: none !important;
    gap: clamp(1.25rem, 5vw, 2rem) !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  .hero-copy h1 {
    width: 100% !important;
    font-size: clamp(2rem, 10vw, 3rem) !important;
    line-height: 1.02 !important;
  }

  .hero-copy > p,
  .hero-copy .text-muted-foreground {
    width: 100% !important;
    font-size: clamp(0.92rem, 4vw, 1.05rem) !important;
    line-height: 1.6 !important;
  }

  .hero-copy .flex.flex-wrap {
    justify-content: flex-start !important;
    gap: 0.6rem !important;
  }

  .hero-copy a,
  .hero-copy button {
    min-height: 2.75rem;
  }

  /* Use the available phone width instead of the old 180/200/260px caps. */
  .hero-visual,
  .hero-headline-visual,
  .hero-visual .hero-stage {
    width: min(100%, 34rem) !important;
    max-width: min(100%, 34rem) !important;
    margin-inline: auto !important;
  }

  .hero-headline-visual {
    aspect-ratio: 6 / 5 !important;
  }
}

@media (max-width: 374px) {
  html {
    font-size: 16px !important;
  }

  .container-x {
    padding-inline: max(1rem, 4vw) !important;
  }

  .hero-copy h1 {
    font-size: clamp(1.8rem, 9.5vw, 2.35rem) !important;
  }

  .hero-copy > p,
  .hero-copy .text-muted-foreground {
    font-size: 0.92rem !important;
  }

  .hero-copy .flex.flex-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-copy a,
  .hero-copy button {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .hero-copy {
    max-width: 60rem !important;
  }

  .hero-copy h1 {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
  }

  .hero-copy > p,
  .hero-copy .text-muted-foreground {
    max-width: 50rem !important;
  }
}

/* ============================================================
   Final responsive hero presentation
   Mobile: large image, side-floating detail card, dots below
   image/card (never over either). Backend slide images remain
   the live React-rendered source and keep carousel animation.
   ============================================================ */
@media (max-width: 767px) {
  .hero-stage {
    width: 100% !important;
    max-width: none !important;
    padding-left: clamp(12px, 4vw, 24px) !important;
    padding-right: clamp(12px, 4vw, 24px) !important;
    gap: clamp(20px, 5vw, 32px) !important;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-self: center !important;
    position: relative !important;
    padding-bottom: 0 !important;
  }

  .hero-headline-visual {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 6 / 5 !important;
    margin: 0 !important;
    border-radius: clamp(16px, 4vw, 28px) !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
  }

  .hero-stage-image,
  .hero-headline-visual .hero-stage-image {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;

    z-index: 1 !important;
  }

  /* Keep the live backend image animation visible without changing
     the React carousel timing/source. */
  .hero-stage-image[aria-hidden="false"],
  .hero-stage-image.hero-active,
  .hero-stage-image.active,
  .hero-stage-image[style*="opacity: 1"] {
    animation: heroKenBurns 12s ease-in-out infinite alternate !important;
  }

  /* The detail card is deliberately a smaller floating panel at the
     side of the rendered image, matching the desktop composition. */
  .hero-panel {
    position: absolute !important;
    z-index: 5 !important;
    top: 50% !important;
    right: clamp(8px, 2.5vw, 18px) !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: min(44%, 250px) !important;
    max-width: 250px !important;
    max-height: calc(100% - 20px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: clamp(10px, 2.6vw, 16px) !important;
    border-radius: clamp(12px, 3vw, 20px) !important;
  }

  .hero-panel .flex.items-center {
    gap: 8px !important;
  }

  .hero-panel .flex.items-center > span {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  .hero-panel .text-lg {
    font-size: clamp(0.72rem, 2.7vw, 0.9rem) !important;
    line-height: 1.2 !important;
  }

  .hero-panel .text-sm,
  .hero-panel dd {
    font-size: clamp(0.62rem, 2.25vw, 0.76rem) !important;
    line-height: 1.25 !important;
  }

  .hero-panel dt {
    font-size: clamp(0.56rem, 2vw, 0.68rem) !important;
  }

  .hero-panel dl.grid,
  .hero-panel dl {
    margin-top: 10px !important;
    gap: 5px !important;
  }

  .hero-panel .mt-5 {
    margin-top: 9px !important;
  }

  .hero-panel .mt-6 {
    margin-top: 10px !important;
  }

  /* Dots are outside the image card, so they can never sit over the
     rendered image or the floating detail panel. */
  .hero-carousel-dots,
  .hero-visual > .hero-carousel-dots {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 12px auto 0 !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
  }

  .hv-zone-prev,
  .hv-zone-next {
    z-index: 4 !important;
  }
}

/* Very narrow phones: keep the side panel readable without allowing it
   to become larger than the image itself. */
@media (max-width: 380px) {
  .hero-stage {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .hero-headline-visual {
    aspect-ratio: 6 / 5 !important;
  }

  .hero-panel {
    width: 43% !important;
    right: 7px !important;
    padding: 8px !important;
  }

  .hero-panel dl,
  .hero-panel .border-t {
    margin-top: 7px !important;
  }
}

/* Final isolated staging adjustment: mobile carousel dots are comfortably
   tappable and remain below the rendered hero card. Desktop/laptop sizing is
   intentionally untouched. */
@media (max-width: 767px) {
  .hero-carousel-dots,
  .hero-visual > .hero-carousel-dots {
    gap: 7px !important;
    padding: 7px 13px !important;
    margin: 14px auto 8px !important;
    min-height: 28px !important;
    align-items: center !important;
  }

  .hero-carousel-dots button {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    flex: 0 0 11px !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    flex-basis: 14px !important;
  }
}


/* ============================================================
   AUTH PAGES MOBILE FIX (forgot-password, sign-in, sign-up, etc.)
   Prevent horizontal shift/tilt on mobile devices
   ============================================================ */

/* The otp-enhanced.js script hides the original OTP input using
   position:absolute, opacity:0, height:0. This can cause the
   form layout to shift. Ensure the parent label/wrapper is
   properly contained. */
@media (max-width: 767px) {
  /* Force the auth page wrapper to stay within viewport */
  .min-h-screen {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* Center the main content and prevent any horizontal offset */
  .min-h-screen > main {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Ensure all sections stay within viewport */
  .min-h-screen > main > section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* The form container must be centered and not overflow */
  .min-h-screen form.container-x.max-w-md,
  form.container-x.max-w-md {
    width: 100% !important;
    max-width: calc(100vw - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* The heading and description text should be centered */
  .min-h-screen h1 {
    text-align: center !important;
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .min-h-screen > main > section > div > p {
    text-align: center !important;
    max-width: 100% !important;
  }

  /* Labels and inputs should not overflow */
  .min-h-screen label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .min-h-screen input[type="email"],
  .min-h-screen input[type="text"],
  .min-h-screen input[type="password"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* The OTP enhanced wrapper (digit boxes) - ensure it's centered and fits viewport */
  .otp-enhanced {
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .otp-digit {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 48px !important;
    width: 100% !important;
    height: 52px !important;
    font-size: 20px !important;
    box-sizing: border-box !important;
  }

  /* The hidden original OTP input - must not affect layout */
  input[autocomplete="one-time-code"] {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
  }

  /* Submit button and links should be full width and centered */
  .min-h-screen button[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Remember password link area */
  .min-h-screen > main p.text-center {
    text-align: center !important;
    padding: 0 1rem !important;
  }

  /* The password field components from PasswordField */
  .min-h-screen [class*="space-y"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure no element causes horizontal overflow */
  .min-h-screen * {
    max-width: 100% !important;
  }
}

/* Extra small phones (320px - 374px) */
@media (max-width: 374px) {
  .min-h-screen form.container-x.max-w-md,
  form.container-x.max-w-md {
    padding: 1rem 0.5rem !important;
    max-width: calc(100vw - 1rem) !important;
  }

  .otp-enhanced {
    gap: 3px !important;
    padding: 0 !important;
  }

  .otp-digit {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 42px !important;
    width: 100% !important;
    height: 46px !important;
    font-size: 16px !important;
    padding: 0 !important;
  }
}

/* Prevent any element from causing the page to shift left on mobile */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
  }

  #root {
    overflow-x: hidden !important;
    width: 100% !important;
  }
}

/* ============================================================
   OTP DIGIT BOX PLACEHOLDER - Mobile visibility fix
   Ensures the "0" placeholder is clearly visible in each box
   ============================================================ */
.otp-digit::placeholder,
.otp-digit::-webkit-input-placeholder,
.otp-digit::-moz-placeholder,
.otp-digit:-ms-input-placeholder {
  color: #6b7280 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  line-height: 1 !important;
}

.otp-digit:focus::placeholder,
.otp-digit:focus::-webkit-input-placeholder,
.otp-digit:focus::-moz-placeholder,
.otp-digit:focus:-ms-input-placeholder {
  opacity: 0.4 !important;
}

@media (max-width: 767px) {
  .otp-digit {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
  }
  .otp-digit::placeholder,
  .otp-digit::-webkit-input-placeholder,
  .otp-digit::-moz-placeholder,
  .otp-digit:-ms-input-placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
  }
}

@media (max-width: 374px) {
  .otp-digit::placeholder,
  .otp-digit::-webkit-input-placeholder,
  .otp-digit::-moz-placeholder {
    color: #6b7280 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
  }
}

/* ============================================================
   FEATURED PRODUCTS BUTTONS - Prevent text wrapping on mobile
   The "overflow-wrap: anywhere" rule above causes single words
   like "Purchase" to break with spaces. Force buttons to nowrap.
   ============================================================ */
.rounded-full {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

@media (max-width: 767px) {
  .rounded-full {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }
}


/* Modern 7thbreed footer */
.site-footer {
  position: relative;
  z-index: 20;
  margin-top: 0;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 28rem),
    var(--background);
  color: var(--foreground);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .35s ease, transform .35s ease, background-color .3s ease, color .3s ease;
}
.site-footer.loaded { opacity: 1; transform: translateY(0); }
.modern-footer-inner { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 64px 0 28px; }
.modern-footer-grid { display: grid; grid-template-columns: 1.35fr .85fr 1fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.modern-footer-grid section { position: relative; min-width: 0; }
.modern-footer-grid h2 { margin: 8px 0 14px; font-size: clamp(1.85rem, 3vw, 2.65rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 650; }
.modern-footer-grid h3 { margin: 0 0 18px; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.modern-footer-kicker { margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); font-weight: 650; }
.modern-footer-copy { max-width: 34rem; margin: 0 0 24px; color: var(--muted-foreground); font-size: .94rem; line-height: 1.7; }
.modern-footer-contact-cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border);
  border-radius: 999px; color: var(--foreground); text-decoration: none; font-size: .9rem; font-weight: 600;
  background: color-mix(in srgb, var(--background) 82%, transparent); backdrop-filter: blur(10px);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.modern-footer-contact-cta:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--background)); transform: translateY(-2px); }
.modern-footer-contact-cta svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.modern-footer-glow { pointer-events: none; position: absolute; width: 120px; height: 120px; right: 8%; top: 0; border-radius: 999px; background: color-mix(in srgb, var(--primary) 13%, transparent); filter: blur(44px); }
.modern-footer-links { display: grid; gap: 11px; }
.modern-footer-links a, .modern-footer-address a, .modern-footer-bottom a { color: var(--muted-foreground); text-decoration: none; transition: color .2s ease, transform .2s ease; }
.modern-footer-links a { width: fit-content; font-size: .9rem; }
.modern-footer-links a:hover, .modern-footer-address a:hover, .modern-footer-bottom a:hover { color: var(--primary); }
.modern-footer-links a:hover { transform: translateX(3px); }
.modern-footer-address { display: grid; gap: 10px; margin: 0; font-style: normal; color: var(--muted-foreground); font-size: .9rem; line-height: 1.55; }
.modern-footer-address p { margin: 0; }
.modern-footer-social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.modern-social-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground); background: color-mix(in srgb, var(--background) 86%, transparent); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.modern-social-button:hover { transform: translateY(-2px) scale(1.03); border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); background: color-mix(in srgb, var(--primary) 8%, var(--background)); }
.modern-social-button svg, .modern-footer-theme > svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.modern-footer-theme { display: inline-flex; align-items: center; gap: 9px; color: var(--muted-foreground); }
.modern-theme-switch { position: relative; width: 44px; height: 24px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--muted-foreground) 10%, var(--background)); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.modern-theme-switch span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--foreground); transform: translateX(0); transition: transform .22s ease, background .22s ease; }
html.dark .modern-theme-switch { background: color-mix(in srgb, var(--primary) 18%, var(--background)); border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
html.dark .modern-theme-switch span { transform: translateX(18px); }
.modern-footer-bottom { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--muted-foreground); font-size: .82rem; }
.modern-footer-bottom p { margin: 0; }
.modern-footer-bottom nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; }
@media (max-width: 900px) {
  .modern-footer-grid { grid-template-columns: 1.2fr 1fr; }
  .modern-footer-inner { padding-top: 52px; }
}
@media (max-width: 620px) {
  .modern-footer-inner { width: min(100% - 30px, 1180px); padding: 44px 0 24px; }
  .modern-footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .modern-footer-grid h2 { max-width: 16ch; }
  .modern-footer-bottom { margin-top: 38px; align-items: flex-start; flex-direction: column; gap: 14px; }
  .modern-footer-bottom nav { justify-content: flex-start; gap: 14px 18px; }
}


/* === Hero interaction refresh: energetic transitions + unobstructed mobile media === */
.hero-headline-visual {
  overflow: hidden !important;
  touch-action: pan-y !important;
  overscroll-behavior-x: contain;
}

.hero-headline-visual .hero-stage-image {
  transition: transform 360ms cubic-bezier(.2,.85,.25,1), opacity 220ms ease !important;
  animation: heroActiveDrift 5.6s cubic-bezier(.2,.65,.35,1) infinite alternate !important;
  transform: translate3d(0,0,0) scale(1.018);
}

.hero-headline-visual .hero-stage-image.hv-slide-out-left {
  transform: translate3d(-7%,0,0) scale(1.035) ;
  opacity: .22 !important;
  transition-duration: 145ms !important;
}
.hero-headline-visual .hero-stage-image.hv-slide-out-right {
  transform: translate3d(7%,0,0) scale(1.035) ;
  opacity: .22 !important;
  transition-duration: 145ms !important;
}
.hero-headline-visual .hero-stage-image.hv-slide-in-right {
  transform: translate3d(6%,0,0) scale(1.028) ;
  opacity: .35 !important;
  transition: none !important;
}
.hero-headline-visual .hero-stage-image.hv-slide-in-left {
  transform: translate3d(-6%,0,0) scale(1.028) ;
  opacity: .35 !important;
  transition: none !important;
}
.hero-headline-visual .hero-stage-image.hv-slide-settled {
  transform: translate3d(0,0,0) scale(1.018) ;
  opacity: 1 !important;
}

.hero-bg-image {
  animation: heroBgDriftFast 8s ease-in-out infinite alternate !important;
  transition: opacity 320ms ease, transform 520ms cubic-bezier(.2,.8,.2,1) !important;
}

@keyframes heroActiveDrift {
  0% { transform: translate3d(-.7%,0,0) scale(1.018); }
  100% { transform: translate3d(.7%,-.4%,0) scale(1.045); }
}
@keyframes heroBgDriftFast {
  0% { transform: scale(1.02) translate3d(-.35%,0,0); }
  100% { transform: scale(1.055) translate3d(.35%,-.25%,0); }
}

/* On phones the information card belongs BELOW the image, never over it. */
@media (max-width: 767px) {
  .hero-visual {
    padding-bottom: 0 !important;
  }

  .hero-headline-visual {
    order: 1;
    margin-bottom: 0 !important;
  }

  .hero-panel {
    order: 2;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: min(100%, 520px) !important;
    max-width: calc(100vw - 1.75rem) !important;
    margin: .75rem auto 0 !important;
    transform: none !important;
    z-index: 12 !important;
    background: color-mix(in srgb, var(--surface, var(--background)) 94%, transparent) !important;
    backdrop-filter: blur(8px) saturate(108%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(108%) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
  }

  .hero-carousel-dots {
    order: 3;
    margin-top: .65rem !important;
  }

  .hero-image-overlay {
    opacity: .32 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.015), rgba(0,0,0,.08)) !important;
    pointer-events: none !important;
  }

  /* Swipe targets stay available but the arrows no longer dominate mobile. */
  .hv-zone-prev,
  .hv-zone-next {
    width: 13% !important;
  }
  .hv-zone-prev .hv-icon-wrapper,
  .hv-zone-next .hv-icon-wrapper {
    opacity: .72 !important;
    width: 26px !important;
    height: 26px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline-visual .hero-stage-image,
  .hero-bg-image {
    animation: none !important;
    transition-duration: 120ms !important;
  }
}


/* Contact Us icon rows */
.modern-footer-contact-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
}
.modern-footer-contact-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 10px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, var(--background));
}
.modern-footer-contact-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.modern-footer-contact-item > p,
.modern-footer-contact-item > a {
  align-self: center;
  min-width: 0;
  overflow-wrap: anywhere;
}


/* Managed backend media: reveal only after the new file has actually rendered. */
img.managed-media-ready:not(.hero-stage-image):not(.hero-bg-image) {
  animation: managedMediaReveal 520ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes managedMediaReveal {
  from { opacity: .18; transform: scale(.985); filter: saturate(.88); }
  to   { opacity: 1; transform: scale(1); filter: saturate(1); }
}
/* Hero keeps its own carousel motion; this makes a freshly decoded upload settle in cleanly. */
.hero-stage-image.managed-media-ready,
.hero-bg-image.managed-media-ready {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  img.managed-media-ready:not(.hero-stage-image):not(.hero-bg-image) { animation: none !important; }
}


/* Mobile hero carousel dots: image -> dots -> hero detail panel. */
@media (max-width: 1023px) {
  .hero-visual { display: flex !important; flex-direction: column !important; align-items: stretch !important; }
  .hero-headline-visual { order: 1 !important; }
  .hero-carousel-dots {
    order: 2 !important;
    align-self: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 4px auto 1px !important;
    padding: 2px 5px !important;
    gap: 2px !important;
  }
  .hero-panel { order: 3 !important; margin-top: 0.5rem !important; }
  .hero-carousel-dots button { width: 2px !important; height: 2px !important; }
  .hero-carousel-dots button[aria-current="true"] { width: 6px !important; height: 2px !important; }
}
@media (max-width: 479px) {
  .hero-carousel-dots { margin-top: 3px !important; padding: 2px 4px !important; gap: 2px !important; }
  .hero-carousel-dots button { width: 2px !important; height: 2px !important; }
  .hero-carousel-dots button[aria-current="true"] { width: 5px !important; height: 2px !important; }
}


/* Footer contact email: keep the complete address on one line. */
#site-footer a[href^="mailto:"],
.site-footer a[href^="mailto:"],
footer a[href^="mailto:"] {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}


/* === 2026-09-09 final mobile hero stability + compact controls === */
@media (max-width: 767px) {
  html, body {
    overflow-x: clip !important;
  }

  .hero-section,
  .hero-stage,
  .hero-visual,
  .hero-headline-visual {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* One animation owner on mobile: React swaps the decoded image; CSS does
     not transform the same element that the swipe controller manipulates. */
  .hero-stage-image,
  .hero-stage-image[aria-hidden="false"],
  .hero-stage-image.hero-active,
  .hero-stage-image.active,
  .hero-stage-image[style*="opacity: 1"] {
    animation: none !important;

    transition: opacity 160ms ease-out !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    contain: paint !important;
  }

  .hero-headline-visual {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* Deliberately tiny visual indicator; navigation remains available by
     swipe/arrows so the dots do not need a large touch target. */
  .hero-carousel-dots,
  .hero-visual > .hero-carousel-dots {
    gap: 2px !important;
    padding: 2px 4px !important;
    margin: 4px auto 3px !important;
    min-height: 0 !important;
    line-height: 0 !important;
    border-width: 1px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .hero-carousel-dots button {
    width: 2px !important;
    height: 2px !important;
    min-width: 2px !important;
    min-height: 2px !important;
    flex: 0 0 2px !important;
    padding: 0 !important;
  }

  .hero-carousel-dots button[aria-current="true"] {
    width: 5px !important;
    height: 2px !important;
    min-width: 5px !important;
    min-height: 2px !important;
    flex-basis: 5px !important;
  }
}


/* === 7thbreed final mobile stability override 2026-09-09 === */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .hero-headline-visual { overflow: hidden !important; touch-action: pan-y !important; }
  .hero-stage-image,
  .hero-stage-image[aria-hidden="false"],
  .hero-stage-image.hero-active,
  .hero-stage-image.active,
  .hero-stage-image[style*="opacity: 1"],
  .hero-stage-image.hv-slide-out-left,
  .hero-stage-image.hv-slide-out-right,
  .hero-stage-image.hv-slide-in-left,
  .hero-stage-image.hv-slide-in-right,
  .hero-stage-image.hv-slide-settled {
    animation: none !important;

    transition: opacity 180ms ease !important;
    will-change: opacity, transform !important;
  }
  .hero-carousel-dots,
  .hero-visual > .hero-carousel-dots {
    gap: 2px !important;
    padding: 2px 4px !important;
    margin: 3px auto 2px !important;
    min-height: 0 !important;
    line-height: 0 !important;
  }
  .hero-carousel-dots button {
    width: 2px !important; height: 2px !important;
    min-width: 2px !important; min-height: 2px !important;
    flex: 0 0 2px !important; padding: 0 !important;
  }
  .hero-carousel-dots button[aria-current="true"] {
    width: 5px !important; height: 2px !important;
    min-width: 5px !important; min-height: 2px !important;
    flex: 0 0 5px !important;
  }
  [data-customer-dashboard], .customer-dashboard, main { min-width: 0 !important; }
}

/* === 7thbreed hero status indicator visibility fix 2026-09-09 === */
.hero-panel .bg-success.animate-pulse {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  min-height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 9999px !important;
  background-color: #22c55e !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.16) !important;
}
@media (max-width: 639px) {
  .hero-panel .bg-success.animate-pulse {
    width: 4px !important;
    height: 4px !important;
    min-width: 4px !important;
    min-height: 4px !important;
    flex-basis: 4px !important;
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.16) !important;
  }
}


/* Hero status DOT only — do not resize the status text/container */
@media (max-width: 639px) {
  span.animate-pulse.rounded-full.bg-success {
    width: 3px !important;
    height: 3px !important;
    min-width: 3px !important;
    min-height: 3px !important;
    flex: 0 0 3px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
}


/* Mobile hero status DOT only */
@media (max-width: 639px) {
  span.h-\[3px\].w-\[3px\].animate-pulse.rounded-full.bg-success {
    width: 3px !important;
    height: 3px !important;
    min-width: 3px !important;
    min-height: 3px !important;
    max-width: 3px !important;
    max-height: 3px !important;
    flex: 0 0 3px !important;
    padding: 0 !important;
  }
}


/* === 7thbreed smooth hero + paint performance 2026-09-09 === */
.hero-headline-visual { position: relative; contain: paint; }
.hero-headline-visual .hero-stage-image {
  z-index: 1;

  animation: none !important;
  transition: opacity 560ms cubic-bezier(.22,.61,.36,1) !important;
  will-change: opacity, transform !important;
}
.hero-headline-visual .hero-stage-image.hv-slide-out-left,
.hero-headline-visual .hero-stage-image.hv-slide-out-right,
.hero-headline-visual .hero-stage-image.hv-slide-in-left,
.hero-headline-visual .hero-stage-image.hv-slide-in-right,
.hero-headline-visual .hero-stage-image.hv-slide-settled {
  animation: none !important;
  transition: opacity 560ms cubic-bezier(.22,.61,.36,1) !important;
}
.hero-headline-visual .hero-stage-image.hero-crossfade-next { opacity: 0 !important; }
.hero-headline-visual .hero-stage-image.hero-crossfade-next.hero-crossfade-ready { opacity: 1 !important; }
.hero-crossfade-previous {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:1; transition:opacity 560ms cubic-bezier(.22,.61,.36,1);
  transform:translateZ(0); will-change:opacity;
}
.hero-crossfade-previous.hero-crossfade-fade { opacity:0; }
.hero-bg-image { animation:none !important; will-change:auto !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-headline-visual .hero-stage-image, .hero-crossfade-previous { transition-duration: 1ms !important; }
}

/* === 7thbreed hero cinematic motion v2 === */
@keyframes heroCinematicMotionV2 {
  0%   { transform: translate3d(0,0,0) scale(1.005); }
  45%  { transform: translate3d(-0.45%, -0.2%, 0) scale(1.028); }
  100% { transform: translate3d(0.35%, -0.35%, 0) scale(1.045); }
}
@keyframes heroPreviousMotionV2 {
  from { transform: translate3d(0,0,0) scale(1.025); }
  to   { transform: translate3d(0.25%, -0.2%, 0) scale(1.045); }
}
.hero-headline-visual { overflow: hidden; }
.hero-headline-visual .hero-stage-image.hero-motion-active,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-out-left,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-out-right,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-in-left,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-in-right,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-settled {
  animation: heroCinematicMotionV2 3.6s cubic-bezier(.2,.55,.3,1) forwards !important;
  transform-origin: center center !important;
  will-change: opacity, transform !important;
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1) !important;
}
.hero-crossfade-previous.hero-motion-previous {
  animation: heroPreviousMotionV2 720ms ease-out forwards;
  transform-origin: center center;
  transition: opacity 620ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .hero-headline-visual .hero-stage-image.hero-motion-active,
  .hero-crossfade-previous.hero-motion-previous { animation: none !important; }
}

/* === 7thbreed hero visible cinematic motion v3 — 2026-09-10 ===
   Keep the existing crossfade, but ensure the live hero image visibly moves
   during each slide interval on desktop, tablet and mobile. */
@keyframes heroCinematicMotionV3 {
  0%   { transform: translate3d(-0.8%, 0.2%, 0) scale(1.02); }
  50%  { transform: translate3d(0.45%, -0.45%, 0) scale(1.055); }
  100% { transform: translate3d(0.9%, -0.2%, 0) scale(1.075); }
}

.hero-headline-visual .hero-stage-image.hero-motion-active,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-out-left,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-out-right,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-in-left,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-in-right,
.hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-settled {
  animation: heroCinematicMotionV3 3.6s cubic-bezier(.22,.61,.36,1) forwards !important;
  transform-origin: center center !important;
  will-change: opacity, transform !important;
}

@media (max-width: 767px) {
  .hero-headline-visual .hero-stage-image.hero-motion-active,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-out-left,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-out-right,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-in-left,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-in-right,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-settled {
    animation: heroCinematicMotionV3 3.6s cubic-bezier(.22,.61,.36,1) forwards !important;
    transform-origin: center center !important;
    will-change: opacity, transform !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline-visual .hero-stage-image.hero-motion-active,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-out-left,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-out-right,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-in-left,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-in-right,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hv-slide-settled {
    animation: none !important;
}
}

/* === 7thbreed directional hero motion v4 — 2026-09-10 ===
   Deliberate lateral/vertical camera movement, not a zoom-only Ken Burns effect. */
@keyframes heroPanLeftV4 {
  0%   { transform: translate3d(2.8%, 0.8%, 0) scale(1.075); }
  48%  { transform: translate3d(0.2%, -0.5%, 0) scale(1.095); }
  100% { transform: translate3d(-2.8%, -1.2%, 0) scale(1.11); }
}
@keyframes heroPanRightV4 {
  0%   { transform: translate3d(-2.8%, -0.6%, 0) scale(1.08); }
  50%  { transform: translate3d(0.1%, 0.4%, 0) scale(1.095); }
  100% { transform: translate3d(2.8%, -0.7%, 0) scale(1.11); }
}
@keyframes heroPanUpV4 {
  0%   { transform: translate3d(-0.9%, 2.4%, 0) scale(1.075); }
  50%  { transform: translate3d(0.7%, 0.1%, 0) scale(1.095); }
  100% { transform: translate3d(-0.4%, -2.4%, 0) scale(1.11); }
}
.hero-headline-visual .hero-stage-image.hero-motion-active.hero-motion-pan-left { animation-name: heroPanLeftV4 !important; }
.hero-headline-visual .hero-stage-image.hero-motion-active.hero-motion-pan-right { animation-name: heroPanRightV4 !important; }
.hero-headline-visual .hero-stage-image.hero-motion-active.hero-motion-pan-up { animation-name: heroPanUpV4 !important; }
.hero-headline-visual .hero-stage-image.hero-motion-active { animation-duration: 3.6s !important; animation-timing-function: cubic-bezier(.22,.61,.36,1) !important; animation-fill-mode: forwards !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-headline-visual .hero-stage-image.hero-motion-active.hero-motion-pan-left,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hero-motion-pan-right,
  .hero-headline-visual .hero-stage-image.hero-motion-active.hero-motion-pan-up { animation: none !important; }
}