img[data-fallback-applied="1"] {
  object-fit: cover;
  background: #111827;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

.stepwell-bg,
.aurora-container,
.ambient-light,
.breath,
.scanlines {
  max-width: 100vw;
  overflow: hidden;
}

.snap-x {
  max-width: 100vw;
  contain: paint;
}

.reveal-container {
  max-width: 100%;
  overflow: hidden;
}

.site-demo-fallback {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 2rem;
  background:
    radial-gradient(circle at 25% 20%, rgba(109, 213, 250, .28), transparent 22rem),
    radial-gradient(circle at 75% 70%, rgba(255, 154, 139, .25), transparent 24rem),
    #fafafa;
  color: #111827;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

.site-demo-fallback p {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #64748b;
}

.site-demo-fallback h1 {
  margin: 0;
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: .95;
  letter-spacing: -.06em;
}

.site-demo-fallback a {
  justify-self: center;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
  }

  body {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  main,
  section,
  header,
  footer,
  nav {
    max-width: 100vw;
  }

  section {
    overflow: hidden;
  }

  h1,
  h2,
  h3,
  p,
  a,
  button,
  span {
    word-break: normal;
    overflow-wrap: normal;
  }

  h1 {
    font-size: clamp(2.35rem, 12vw, 4rem) !important;
    line-height: .92 !important;
    text-wrap: balance;
  }

  h2 {
    font-size: clamp(1.85rem, 10vw, 3.1rem) !important;
    line-height: .98 !important;
    text-wrap: balance;
  }

  p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  [class*="opacity-0"][class*="animate-"],
  .fade-up,
  .reveal,
  .reveal-wrapper,
  .reveal-mask {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .custom-cursor,
  .cursor,
  #cursor,
  .hover-img,
  .hover-image,
  .cursor-orb {
    display: none !important;
  }

  [class*="w-[600px]"],
  [class*="w-[500px]"],
  [class*="w-[440px]"],
  [class*="w-[420px]"],
  [class*="w-[400px]"],
  [class*="w-96"],
  [class*="w-[120%]"] {
    width: min(100%, calc(100vw - 2rem)) !important;
  }

  [class*="h-[600px]"],
  [class*="h-[500px]"],
  [class*="h-[400px]"],
  [class*="h-96"] {
    max-height: 70vh;
  }

  [class*="-translate-x-1/2"],
  [class*="translate-x-1/2"],
  [class*="-translate-x-full"],
  [class*="translate-x-full"] {
    max-width: 100vw;
  }

  nav.fixed,
  header.fixed {
    width: calc(100vw - 1rem) !important;
    left: .5rem !important;
    right: .5rem !important;
    max-width: none !important;
    padding-inline: 1rem !important;
  }

  nav.fixed button,
  header.fixed button {
    max-width: 46vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .glass-panel,
  .neu-panel,
  .bento-card,
  .feature-card,
  .service-card,
  .project-card,
  .card {
    max-width: 100%;
  }

  .snap-x {
    scroll-padding-inline: 1rem;
  }

  .snap-x > * {
    max-width: calc(100vw - 2rem);
  }
}

@media (max-width: 480px) {
  .container,
  [class*="max-w-7xl"],
  [class*="max-w-6xl"],
  [class*="max-w-5xl"],
  [class*="max-w-4xl"],
  [class*="max-w-3xl"] {
    width: min(100%, 330px) !important;
    max-width: 330px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  nav.fixed,
  header.fixed {
    width: min(calc(100vw - 1rem), 330px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  nav.fixed button,
  header.fixed button {
    max-width: 8rem;
    padding-inline: .75rem !important;
    font-size: .68rem !important;
  }

  nav.fixed h1,
  header.fixed h1 {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    letter-spacing: .18em !important;
    white-space: nowrap;
  }

  nav.fixed a[href="#reservations"] {
    display: none !important;
  }

  h1 {
    font-size: clamp(2.05rem, 11vw, 3.25rem) !important;
  }

  section {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  .grid {
    min-width: 0;
  }

  [class*="tracking-[0.4em]"],
  [class*="tracking-[0.3em]"],
  [class*="tracking-widest"] {
    letter-spacing: .14em !important;
  }
}