:root {
  --site-reveal-duration: 0.55s;
  --site-reveal-distance: 18px;
  --site-hover-lift: 4px;
}

@layer base {
  html,
  body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  main > :first-child {
    margin-top: 0 !important;
  }

  main > :last-child {
    margin-bottom: 0 !important;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(var(--site-reveal-distance));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  main > section,
  main > article,
  main .property-card {
    opacity: 0;
    transform: translateY(var(--site-reveal-distance));
    animation: fadeInUp var(--site-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  main > section:nth-of-type(2n),
  main > article:nth-of-type(2n),
  main .property-card:nth-of-type(2n) {
    animation-delay: 0.08s;
  }

  main .property-card,
  main article,
  button,
  .filter-emirate-btn,
  .area-pill,
  nav a,
  .view-details-trigger,
  .enquire-trigger {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease;
  }

  main .property-card:hover,
  main article:hover,
  button:hover,
  .filter-emirate-btn:hover,
  .area-pill:hover,
  nav a:hover,
  .view-details-trigger:hover,
  .enquire-trigger:hover {
    transform: translateY(calc(var(--site-hover-lift) * -1));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  }
}

@media (min-width: 1024px) {
  nav[data-active-classes] a[data-path],
  header nav[data-active-classes] a[data-path] {
    font-family: "Plus Jakarta Sans", "Manrope", sans-serif;
    font-weight: 800;
    letter-spacing: 0.015em;
    text-shadow: 0 1px 0 rgba(1, 28, 57, 0.08);
    transition: transform 0.18s ease, color 0.18s ease, text-shadow 0.18s ease;
  }

  nav[data-active-classes] a[data-path]:hover,
  nav[data-active-classes] a[data-path]:focus-visible,
  header nav[data-active-classes] a[data-path]:hover,
  header nav[data-active-classes] a[data-path]:focus-visible {
    transform: translateY(-1px);
    text-shadow: 0 2px 10px rgba(1, 28, 57, 0.12);
  }

  nav[data-active-classes] a[data-path][aria-current="page"],
  header nav[data-active-classes] a[data-path][aria-current="page"] {
    letter-spacing: 0.02em;
  }
}

[class*="text-[10px]"],
[class*="text-[11px]"],
[class*="text-[12px]"],
[class*="text-[13px]"],
[class*="text-[14px]"],
[class*="text-[15px]"],
.text-body-sm,
.text-body-md,
.text-body-lg,
.text-label-sm,
.text-label-md,
.text-label-lg,
.text-body-xs,
.text-label-xs {
  font-size: 16px !important;
}

::-webkit-scrollbar {
  display: none;
}

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

  body {
    overflow-x: hidden !important;
  }

  [class*="text-[clamp(1.5rem,2vw,2.5rem)]"] {
    font-size: clamp(1.35rem, 5vw, 2.5rem) !important;
  }

  header img[alt="Blue Dolphine Real Estate"] {
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    min-height: 110px !important;
  }

  header img[alt="Blue Dolphine Logo"] {
    width: 110px !important;
    min-width: 110px !important;
  }

  #mobile-menu-btn {
    padding: 0.45rem !important;
  }

  #mobile-menu-btn .material-symbols-outlined {
    font-size: 2rem !important;
  }

  main section:first-of-type {
    padding-top: 4.75rem !important;
  }

  .mobile-hero-badges {
    width: 100% !important;
  }

  .mobile-hero-title {
    font-size: clamp(2.15rem, 11vw, 3.1rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.04em !important;
  }

  .mobile-hero-copy {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .mobile-hero-cta-group {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .mobile-hero-cta-group a {
    width: 100% !important;
    justify-content: center !important;
  }

  .mobile-hero-stats {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .mobile-hero-stats > div {
    padding-bottom: 0.5rem !important;
  }
}

@media (max-width: 768px) {
  #property-grid {
    grid-template-columns: 1fr !important;
  }

  .property-card > .p-space-lg,
  .property-card .p-space-lg {
    padding: 1rem !important;
  }

  .filter-emirate-btn {
    font-size: 0.85rem !important;
  }
}

@media (max-width: 640px) {
  * {
    box-sizing: border-box;
  }

  main section:first-of-type {
    padding-top: 5.25rem !important;
  }

  main section:first-of-type .max-w-3xl {
    max-width: 100% !important;
    padding-top: 0.5rem !important;
  }

  main section:first-of-type h1 {
    font-size: clamp(2.25rem, 10vw, 3.25rem) !important;
    line-height: 0.96 !important;
  }

  main section:first-of-type p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  main section:first-of-type .flex-wrap.items-center.gap-space-md {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  main section:first-of-type .flex-wrap.items-center.gap-space-md a {
    width: 100% !important;
    justify-content: center !important;
  }

  main section:first-of-type .mt-space-xl.pt-space-lg.grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  main section:first-of-type .mt-space-xl.pt-space-lg.grid.grid-cols-3 > div {
    padding-bottom: 0.5rem !important;
  }
}