/* ==========================================================================
   Empire Realty — production stylesheet
   Extracted verbatim from the original design + a11y / resilience additions.
   Design tokens, colors, spacing and breakpoints are unchanged.
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Montserrat',system-ui,sans-serif;color:#2C2C2C;background:#F5F1ED;-webkit-font-smoothing:antialiased}
::selection{background:#D4A574;color:#1B4D3E}

@keyframes er-fade{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes er-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}

.er-link{position:relative}
.er-link::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:#D4A574;transition:width .35s ease}
.er-link:hover::after{width:100%}
.er-btn{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background .3s ease,color .3s ease}
.er-btn:hover{transform:translateY(-3px)}
.er-contact-btn{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,background .3s ease}
.er-contact-btn:hover{background:#256150;transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(27,77,62,.55)}
.er-social{transition:transform .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}
.er-social:hover{transform:scale(1.08);color:#EBC48E;border-color:rgba(212,165,116,.9);box-shadow:0 0 16px rgba(212,165,116,.45)}
.er-contact-link{color:rgba(245,241,237,.9);text-decoration:none;transition:color .3s ease}
.er-contact-link:hover{color:#D4A574}
.er-card{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.er-card:hover{transform:translateY(-10px)}
.er-card:hover .er-card-img{transform:scale(1.06)}
.er-card-img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.er-why:hover .er-why-ic{background:#1B4D3E;color:#D4A574;transform:translateY(-4px)}
.er-input:focus{outline:none;border-color:#1B4D3E;background:#fff}
.er-agent-card{transition:transform .35s ease,box-shadow .35s ease;cursor:pointer}
.er-agent-card:hover{transform:translateY(-8px);box-shadow:0 26px 54px -22px rgba(31,77,58,.4)}
.er-agent-img{transition:transform .35s ease}
.er-agent-card:hover .er-agent-img{transform:scale(1.05)}
.er-agents-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
@media(max-width:1024px){.er-agents-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.er-agents-grid{grid-template-columns:1fr}.er-agents-head{flex-direction:column;align-items:flex-start !important;gap:22px}}
.er-rev-card{transition:transform .3s ease,box-shadow .3s ease}
.er-rev-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(0,0,0,.55)}
@media(max-width:1024px){.er-rev-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:600px){.er-rev-grid{grid-template-columns:1fr !important}}
.er-mobnav{display:none}
.er-deslinks{display:flex}
.er-hamb{display:none}
@media(max-width:960px){
  .er-hero-grid{grid-template-columns:1fr !important}
  .er-hero-media{min-height:46vh !important;order:2}
  .er-hero-copy{order:1}
  .er-deslinks{display:none}
  .er-hamb{display:flex !important}
  .er-mobnav.open{display:block}
  .er-contact-grid{grid-template-columns:1fr !important}
}
@media(max-width:640px){
  .er-hero-copy{padding:54px 28px !important}
  .er-sec-pad{padding-left:24px !important;padding-right:24px !important}
}

/* --- Hero rise animation (was an inline `animation:` in the source) --------- */
.er-hero-intro{animation:er-rise .9s ease both}

/* --- Property / agent image wrappers (replace runtime-injected markup) ------ */
.er-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.er-agent-parallax{position:absolute;top:-10px;left:0;width:100%;height:calc(100% + 20px);transform:translateY(0);will-change:transform}

/* --- Scroll reveal (progressive-enhancement: only hides when JS is present) - */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js .reveal.is-visible{opacity:1;transform:none}
.js .reveal--rev{transition-duration:.7s}
.js .er-agents-grid>.reveal:nth-child(2){transition-delay:.15s}
.js .er-agents-grid>.reveal:nth-child(3){transition-delay:.3s}
.js .er-agents-grid>.reveal:nth-child(4){transition-delay:.45s}
.js .er-rev-grid>.reveal:nth-child(2){transition-delay:.12s}
.js .er-rev-grid>.reveal:nth-child(3){transition-delay:.24s}

/* --- Featured Listings carousel -------------------------------------------- */
.er-carousel{position:relative}
.er-car-track{display:flex;flex-wrap:nowrap;gap:32px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding:16px 0 32px;margin:-16px 0 -32px;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.er-car-track::-webkit-scrollbar{display:none;width:0;height:0}
.er-car-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.er-car-track.is-dragging .er-card{pointer-events:none}
.er-car-track>.er-card{flex:0 0 calc((100% - 64px)/3);min-width:0;scroll-snap-align:start}
@media(max-width:1024px){.er-car-track>.er-card{flex-basis:calc((100% - 32px)/2)}}
@media(max-width:640px){.er-car-track{gap:24px}.er-car-track>.er-card{flex-basis:100%}.er-carousel::before,.er-carousel::after{display:none}}

/* Edge fades — hint that more listings exist in that direction */
.er-carousel::before,.er-carousel::after{content:'';position:absolute;top:0;bottom:0;width:56px;z-index:2;pointer-events:none;opacity:0;transition:opacity .35s ease}
.er-carousel::before{left:0;background:linear-gradient(90deg,#F5F1ED 8%,rgba(245,241,237,0))}
.er-carousel::after{right:0;background:linear-gradient(270deg,#F5F1ED 8%,rgba(245,241,237,0))}
.er-carousel.has-prev::before{opacity:1}
.er-carousel.has-next::after{opacity:1}

/* Arrow buttons */
.er-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;border:1px solid rgba(27,77,62,.14);background:rgba(255,255,255,.97);color:#1B4D3E;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 16px 40px -20px rgba(27,77,62,.5);transition:opacity .3s ease,visibility .3s ease,transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,color .3s ease,border-color .3s ease}
.er-car-btn--prev{left:-18px}
.er-car-btn--next{right:-18px}
.er-car-btn:hover{background:#1B4D3E;border-color:#1B4D3E;color:#F5F1ED;transform:translateY(-50%) scale(1.06)}
.er-car-btn[disabled]{opacity:0 !important;visibility:hidden;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .er-carousel .er-car-btn{opacity:0;visibility:hidden}
  .er-carousel:hover .er-car-btn:not([disabled]),.er-carousel:focus-within .er-car-btn:not([disabled]){opacity:1;visibility:visible}
}
@media(max-width:640px){
  .er-car-btn{width:44px;height:44px}
  .er-car-btn--prev{left:-8px}
  .er-car-btn--next{right:-8px}
}
@media (prefers-reduced-motion: reduce){.er-car-track{scroll-behavior:auto}}

/* Position dots (pagination) */
.er-car-dots{display:none;justify-content:center;gap:10px;margin-top:26px}
.er-car-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(27,77,62,.22);cursor:pointer;transition:background .3s ease,transform .3s ease,width .3s ease}
.er-car-dots button:hover{background:rgba(27,77,62,.4)}
.er-car-dots button.is-active{background:#1B4D3E;width:22px;border-radius:4px}
@media(max-width:640px){.er-car-dots{display:flex}}

.er-agents-dots{display:none}

/* ============================================================================
   MOBILE-ONLY ENHANCEMENTS (<=768px). Desktop (>=1024px) is untouched.
   ========================================================================== */
@media (max-width:768px){

  /* 1. Services strip -> horizontal auto-scrolling marquee */
  .er-serv-grid{
    display:flex !important;
    flex-wrap:nowrap;
    grid-template-columns:none !important;
    gap:0;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .er-serv-grid::-webkit-scrollbar{display:none}
  .er-serv-item{
    flex:0 0 auto;
    width:150px;
  }
  /* Shrink services section vertically so the divider line runs edge-to-edge */
  #services.er-sec-pad{padding-top:0 !important;padding-bottom:0 !important}

  /* 2. Meet Our Experts -> swipe carousel with peek of next card */
  .er-agents-grid{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:16px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:6px;
  }
  .er-agents-grid::-webkit-scrollbar{display:none}
  .er-agents-grid>*{
    flex:0 0 100%;
    min-width:0;
    scroll-snap-align:start;
  }

  /* 3. Client Reviews -> swipeable stacked deck (mobile) */
  .er-rev-grid[data-rev-deck]{
    display:block !important;
    grid-template-columns:none !important;
    position:relative;
    max-width:440px;
    margin-left:auto;
    margin-right:auto;
    height:440px;
    margin-bottom:40px;
    perspective:1200px;
  }
  .er-rev-grid[data-rev-deck] > .reveal--rev{
    position:absolute;
    top:0; left:0; right:0;
    height:440px;
    transform-origin:center top;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
    will-change:transform, opacity;
  }
  /* the JS sets --i (stack depth) and data-lead (top card). */
  .er-rev-grid[data-rev-deck] > .reveal--rev{
    transform:translateY(calc(var(--i,0) * -10px)) scale(calc(1 - var(--i,0) * 0.04));
    opacity:calc(1 - var(--i,0) * 0.16);
    z-index:calc(100 - var(--i,0));
    pointer-events:none;
  }
  .er-rev-grid[data-rev-deck] > .reveal--rev[data-lead]{
    pointer-events:auto;
    cursor:grab;
  }
  .er-rev-grid[data-rev-deck] > .reveal--rev[data-lead].is-grabbing{
    cursor:grabbing;
    transition:none;
  }
  .er-rev-grid[data-rev-deck] > .reveal--rev.is-gone{
    transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease;
  }
    .er-rev-grid[data-rev-deck] > .reveal--rev .er-rev-card{height:100%;overflow-y:auto}
  .er-rev-card{user-select:none;-webkit-user-select:none}
  /* hint + progress dots under the deck */
  .er-rev-deck-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
  .er-rev-deck-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(245,241,237,.28);cursor:pointer;transition:background .3s,width .3s}
  .er-rev-deck-dots button.is-active{background:#D4A574;width:22px;border-radius:4px}
  .er-rev-deck-hint{text-align:center;margin-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,237,.45)}

  /* 4. Why Choose Us -> compact 2x2 grid, fits one viewport */
  .er-why-grid{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
  }
  .er-why-grid .er-why{padding:14px 10px !important}
  .er-why-grid .er-why-ic{
    width:52px !important;height:52px !important;margin-bottom:14px !important;
  }
  .er-why-grid .er-why-ic svg{width:22px;height:22px}
  .er-why-grid .er-why h3{font-size:12px !important;margin-bottom:8px !important}
  .er-why-grid .er-why p{font-size:12px !important;line-height:1.55 !important}

  /* Meet Our Experts — dots (same style as listings) */
  .er-agents-carousel{position:relative}
  .er-agents-dots{display:flex;justify-content:center;gap:10px;margin-top:24px}
  .er-agents-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(18,60,49,.22);cursor:pointer;transition:background .3s ease,width .3s ease}
  .er-agents-dots button:hover{background:rgba(18,60,49,.4)}
  .er-agents-dots button.is-active{background:#123C31;width:22px;border-radius:4px}

  /* Disable tap grow/zoom on expert cards (mobile) */
  .er-agent-card,
  .er-agent-card:hover,
  .er-agent-card:active,
  .er-agent-card:focus{transform:none !important}
  .er-agent-card:hover .er-agent-img,
  .er-agent-card:active .er-agent-img{transform:none !important}

  /* Disable tap grow/zoom on review cards (mobile) */
  .er-rev-card,
  .er-rev-card:hover,
  .er-rev-card:active,
  .er-rev-card:focus{transform:none !important}
}

/* --- Accessibility: skip link + visible focus ------------------------------ */
.skip-link{position:absolute;left:12px;top:-56px;z-index:200;background:#1B4D3E;color:#F5F1ED;padding:12px 18px;border-radius:2px;font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #1B4D3E;outline-offset:3px}
.er-contact-link:focus-visible,.er-social:focus-visible{outline-color:#D4A574}

/* --- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .reveal{opacity:1 !important;transform:none !important}
  .er-hero-intro{animation:none !important}
}