/* easyacres-filter — search card overlapping hero bottom */
.easyacres-filter {
  background: var(--white);
  box-shadow: 0 24px 50px rgba(10, 26, 47, 0.2);
  border-radius: 16px;
  overflow: hidden;
}

.easyacres-filter__tabs {
  display: flex;
  background: var(--ivory);
}

.easyacres-filter__tab {
  padding: 14px 26px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  opacity: 0.6;
  cursor: pointer;
}

.easyacres-filter__tab.is-active {
  opacity: 1;
  background: var(--white);
  border-bottom: 2px solid var(--navy);
  color: var(--navy);
}

.easyacres-filter__form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 0;
  align-items: end;
  padding: 22px;
}

.easyacres-filter__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px;
  border-right: 1px solid var(--surface);
}

.easyacres-filter__field:first-child {
  padding-left: 0;
}

.easyacres-filter__field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--graphite);
  opacity: 0.7;
}

.easyacres-filter__field select {
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--navy);
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right center / 14px;
  padding: 4px 20px 4px 0;
}

.easyacres-filter__field select:focus {
  outline: none;
}

.easyacres-filter__submit {
  margin-left: 16px;
  height: 46px;
}
/* Filter pills + community grid */
.easyacres-filter__pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.easyacres-filter__pills span {
  padding: 10px 20px;
  border: 1px solid var(--surface);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--graphite);
  cursor: pointer;
  background: var(--white);
}

.easyacres-filter__pills span.is-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
/* off plan section */
.easyacres-padtop {
  padding-top: 170px;
}

/* Blog — simple equal grid */
.easyacres-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.easyacres-blog__media {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.easyacres-blog__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.easyacres-blog__body {
  padding: 22px;
}

.easyacres-blog__body span {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.easyacres-blog__body h3 {
  font-size: 18px;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer */
.easyacres-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.75);
  padding: 70px 0 0;
}

.easyacres-footer__top {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px 50px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.easyacres-footer__logo {
  height: 32px;
  margin-bottom: 18px;
}

.easyacres-footer__brand p {
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 280px;
}

.easyacres-footer__social {
  display: flex;
  gap: 12px;
}

.easyacres-footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.easyacres-footer__social a:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.easyacres-footer__social .icon {
  width: 20px;
  height: 20px;
  margin: 0;
  vertical-align: 0;
}

.easyacres-footer__col h4 {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.easyacres-footer__col a {
  display: block;
  font-size: 14px;
  margin-bottom: 12px;
  opacity: 0.85;
}

.easyacres-footer__col a:hover {
  opacity: 1;
}

.easyacres-footer__contact-row {
  display: flex !important;
  align-items: center;
}

.easyacres-footer__contact-row .icon {
  color: var(--surface);
  flex-shrink: 0;
}

.easyacres-footer__address {
  align-items: flex-start;
}

.easyacres-footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.easyacres-footer__legal {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* WhatsApp FAB */
.whatsapp-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
  animation: fab-pulse 2.6s ease-in-out infinite;
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  animation-play-state: paused;
}

@keyframes fab-pulse {
  0%,
  100% {
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.25),
      0 0 0 0 rgba(37, 211, 102, 0.4);
  }

  50% {
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.25),
      0 0 0 10px rgba(37, 211, 102, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab {
    animation: none;
  }
}

/* Reveal — GSAP (js/script.js) owns the actual fade/slide motion via
   inline styles once it loads, so no transform/transition here (mixing
   a CSS transition with GSAP tweening the same property causes visible
   jank, since both try to animate it independently). This just hides
   .reveal elements from first paint so there's no flash of visible
   content before GSAP hides and re-animates them. .is-visible is only
   ever used as a fallback (GSAP failed to load, or a card was rendered
   with it baked in from the start) — it gets its own short transition
   since nothing else is fighting it in that path. */
.reveal {
  opacity: 0;
}

.reveal.is-visible {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Reveal — heading variant. js/script.js splits these into individual
   words and staggers them in with a slight rotation, rather than the
   plain fade+slide .reveal does. Same hidden-from-first-paint + JS-
   fallback pattern as .reveal above. */
.reveal-heading {
  opacity: 0;
}

.reveal-heading.is-visible {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Reveal — card/grid-item variant. js/script.js scales + drops these in
   with an overshoot ("back") ease and staggers siblings together,
   rather than the plain fade+slide .reveal does. Same hidden-from-
   first-paint + JS-fallback pattern as .reveal above. */
.reveal-pop {
  opacity: 0;
}

.reveal-pop.is-visible {
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* Responsive */
@media (max-width: 1024px) {
  .easyacres-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .split-trust {
    grid-template-columns: 1fr;
  }

  .update-card,
  .report-card {
    grid-template-columns: 1fr;
  }

  .update-card__media,
  .report-card__media {
    order: -1;
  }

  .offplan-banner {
    min-height: 380px;
  }

  .three-col {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: 1fr;
  }

  .cta-photo__inner {
    grid-template-columns: 1fr;
  }

  .cta-photo__media {
    min-height: 260px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .newsletter-simple__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .easyacres-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .easyacres-filter__form {
    grid-template-columns: 1fr 1fr;
    row-gap: 16px;
  }

  .easyacres-filter__submit {
    grid-column: span 2;
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 991px) {
  .nav {
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--navy);
    flex-direction: column;
    padding: 20px 32px;
    gap: 18px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s ease;
  }

  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .easyacres-header-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
  }

  .nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--white);
  }

  .easyacres-cards {
    grid-template-columns: 1fr;
  }

  .stats-diamond__row {
    gap: 20px;
  }

  .diamond {
    display: none;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .easyacres-footer__top {
    grid-template-columns: 1fr;
  }
  .easyacres-filter__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .easyacres-filter__field {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--surface);
    padding: 0 16px !important;
  }
  .easyacres-footer__brand p {
    max-width: 100%;
  }
  .easyacres-filter__pills span {
    padding: 8px 15px;
    font-size: 11px;
  }
}

/* ---------- PROCESS ---------- */
.process-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 25px;
}

.process-item {
  background: var(--white);
  padding: 38px 32px;
  position: relative;
  border-radius: 18px;
}

.process-item .pnum {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--steel);
  margin-bottom: 18px;
  display: block;
}

.process-item h4 {
  font-size: 21px;
  margin-bottom: 10px;
}

.process-item p {
  font-size: 14px;
  color: var(--graphite);
}

/* ---------- OFF-PLAN SPLIT ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.split-media {
  position: relative;
  min-height: 520px;
}

.split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-copy {
  background: var(--navy);
  color: var(--white);
  padding: 80px 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-copy h2 {
  color: var(--white);
  font-size: clamp(30px, 3.4vw, 42px);
  margin-bottom: 24px;
}

.split-copy p {
  color: var(--surface);
  font-size: 16px;
  margin-bottom: 18px;
  max-width: 480px;
}

.split-copy .btn {
  margin-top: 14px;
  align-self: flex-start;
}

/* developer marquee */
.partner-strip {
  border-top: 1px solid var(--surface);
  border-bottom: 1px solid var(--surface);
  padding: 60px 0;
  overflow: hidden;
  background: var(--ocean);
}

.partner-track {
  display: flex;
  gap: 120px;
  white-space: nowrap;
  animation: scroll 20s linear infinite;
  width: 161.125rem;
}

.partner-track span {
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--graphite);
  letter-spacing: 0.05em;
  flex: 0 0 auto;
}
.partner-track img {
  display: inline-block;
  object-fit: contain;
  width: 100%;
  max-width: 200px;
  max-height: 50px;
  opacity: 0.9;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 991px) {
  .easyacres-padtop,
  .easyacres-spotlight {
    padding-top: 40px;
  }
  .split-media {
    min-height: 220px;
  }
  .split-copy h2 {
    font-size: 20px;
  }
  .split-copy p {
    font-size: 14px;
  }

  .process-item {
    padding: 24px;
  }
  .process-item .pnum {
    margin-bottom: 5px;
  }
  .process-item h4 {
    font-size: 18px;
  }
  .process-item p {
    font-size: 12px;
  }
  .easyacres-blog__body {
    padding: 16px;
  }
  .easyacres-blog__media {
    aspect-ratio: 14 / 8;
  }
  .easyacres-blog__body h3 {
    font-size: 16px;
  }
  /* clients */
  .partner-strip {
    padding: 30px 0;
  }
  .partner-track {
    gap: 50px;
  }
  .partner-track img {
    max-width: 150px;
    max-height: 30px;
  }
  /* footer */
  .easyacres-footer {
    padding: 40px 0 0;
  }
  .easyacres-footer__bottom {
    flex-direction: column;
  }
  .easyacres-footer__legal {
    padding-top: 10px;
  }
  .easyacres-footer__top {
    gap: 24px;
    padding: 0 24px 30px;
  }
}