/* re-motion.css — motion and liveliness layer for the real estate results
   (/classifieds/real-estate-9). Loaded AFTER re-search.css, never edits it:
   removing the two <link>/<script> lines in re_search.php brings the page
   back exactly as it was. Flat palette colours only: no gradient on buttons. */

body.ssg-re{--rm-ease:cubic-bezier(.22,1,.36,1);--rm-orange:#ea7318;--rm-ink:#1a1a1a;--rm-cream:#f7f5f1;--rm-peach:#fdebd9}

/* ---------- grid: no more hole next to the buyer request ---------- */
body.ssg-re .res-grid{grid-auto-flow:row dense;gap:18px}

/* ---------- cards: white, rounder, alive on hover ---------- */
body.ssg-re .res-card{border-radius:16px;border-color:#eceae5;
  transition:transform .45s var(--rm-ease),box-shadow .45s var(--rm-ease),border-color .3s}
body.ssg-re .res-card:not(.p_bg):not(.p_special){background:#fff}
body.ssg-re .res-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(26,26,26,.13)}
body.ssg-re .res-thumb img{transition:transform 1.1s var(--rm-ease)}
body.ssg-re .res-card:hover .res-thumb img{transform:scale(1.08)}
/* thin orange line that grows under the photo on hover */
body.ssg-re .res-thumb:after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--rm-orange);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--rm-ease);z-index:3}
body.ssg-re .res-card:hover .res-thumb:after,body.ssg-re .res-card.hi .res-thumb:after{transform:scaleX(1)}
body.ssg-re .res-tt{color:var(--rm-ink);font-size:14.5px;transition:color .25s}
body.ssg-re .res-card:hover .res-tt{color:var(--rm-orange)}
body.ssg-re .res-price-t{font-size:20px}
body.ssg-re .res-acts .res-act,body.ssg-re .res-acts .res-eye{transition:transform .25s var(--rm-ease),background .2s}
body.ssg-re .res-acts .res-act:hover,body.ssg-re .res-acts .res-eye:hover{transform:scale(1.14)}
body.ssg-re .res-feat{transition:background .2s,transform .2s}
body.ssg-re .res-card:hover .res-feat{transform:translateY(-1px)}

/* favourite: the heart pops */
body.ssg-re .rm-pop svg{animation:rm-pop .5s var(--rm-ease)}
@keyframes rm-pop{0%{transform:scale(1)}35%{transform:scale(1.55)}65%{transform:scale(.88)}100%{transform:scale(1)}}

/* ---------- entrance: cards rise in, one after the other ---------- */
body.ssg-re .rm-in{opacity:0;transform:translateY(26px) scale(.985)}
body.ssg-re .rm-in.rm-show{opacity:1;transform:none;
  transition:opacity .7s var(--rm-ease) var(--rm-d,0ms),transform .8s var(--rm-ease) var(--rm-d,0ms)}
/* once shown, re-motion.js removes rm-in so the hover lift works again */

/* ---------- title + live counter ---------- */
body.ssg-re .res-head h1{animation:rm-rise .8s var(--rm-ease) both}
body.ssg-re .res-n{display:inline-flex;align-items:center;gap:6px;background:var(--rm-peach);color:#9f4e10;
  font-weight:600;font-size:12.5px;padding:4px 11px;border-radius:20px;font-variant-numeric:tabular-nums;
  animation:rm-rise .8s var(--rm-ease) .12s both}
body.ssg-re .res-n:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rm-orange);
  animation:rm-live 1.8s ease-out infinite}
@keyframes rm-live{0%{box-shadow:0 0 0 0 rgba(234,115,24,.55)}70%{box-shadow:0 0 0 7px rgba(234,115,24,0)}100%{box-shadow:0 0 0 0 rgba(234,115,24,0)}}
@keyframes rm-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- All / Buy / Rent / New projects: a pill that slides ---------- */
body.ssg-re .re-seg{position:relative;isolation:isolate}
body.ssg-re .re-seg .rm-pill{position:absolute;top:3px;bottom:3px;left:0;border-radius:18px;background:var(--rm-ink);
  z-index:-1;transition:transform .45s var(--rm-ease),width .45s var(--rm-ease);pointer-events:none}
body.ssg-re .re-seg.rm-ready button.on{background:transparent}
body.ssg-re .re-seg button{transition:color .3s}

/* ---------- category pills ---------- */
body.ssg-re .res-ct{transition:transform .3s var(--rm-ease),background .25s,border-color .25s,color .25s,box-shadow .3s}
body.ssg-re .res-ct:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(26,26,26,.08)}

/* ---------- loading: skeleton cards instead of a line of text ---------- */
body.ssg-re .rm-skel{border-radius:16px;border:1px solid #eceae5;background:#fff;overflow:hidden}
body.ssg-re .rm-skel i{display:block;background:#f0ece6;border-radius:6px;margin:10px 14px;height:12px;
  animation:rm-blink 1.2s ease-in-out infinite}
body.ssg-re .rm-skel i.ph{aspect-ratio:4/3;height:auto;margin:0;border-radius:0}
body.ssg-re .rm-skel i.s{width:55%}
body.ssg-re .rm-skel i.p{width:38%;height:18px;margin-bottom:16px}
@keyframes rm-blink{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- buyer request: dark block, flying paper plane ---------- */
body.ssg-re .res-req{background:var(--rm-ink);color:#fff;border:0;border-radius:16px;position:relative;overflow:hidden}
body.ssg-re .res-grid .res-req h3{color:#fff!important}
body.ssg-re .res-req p{color:rgba(255,255,255,.75)}
body.ssg-re .res-req .eyebrow{color:var(--rm-orange)}
body.ssg-re .res-req .trust{color:rgba(255,255,255,.6)}
body.ssg-re .res-req .cta{transition:transform .3s var(--rm-ease),background .2s}
body.ssg-re .res-req .cta:hover{transform:translateY(-2px)}
body.ssg-re .res-req .cta svg{animation:rm-fly 2.6s var(--rm-ease) infinite}
body.ssg-re .res-req:after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;
  border:28px solid rgba(234,115,24,.14);animation:rm-float 7s ease-in-out infinite}
@keyframes rm-fly{0%,60%,100%{transform:none}75%{transform:translate(4px,-4px)}85%{transform:translate(-1px,1px)}}
@keyframes rm-float{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,16px)}}

/* ---------- spotlight card: a soft halo that breathes ---------- */
body.ssg-re .res-card.res-spot{animation:rm-halo 3.2s ease-in-out infinite}
body.ssg-re .res-card.res-spot:hover{animation:none}
@keyframes rm-halo{0%,100%{box-shadow:0 0 0 0 rgba(234,115,24,0)}50%{box-shadow:0 0 0 6px rgba(234,115,24,.18)}}

/* ---------- map: markers drop in, the hovered one jumps ---------- */
body.ssg-re .res-mkr{animation:rm-drop .55s var(--rm-ease) both}
body.ssg-re .res-mkr.hi{animation:rm-jump .9s var(--rm-ease) infinite}
body.ssg-re .res-cl{animation:rm-drop .55s var(--rm-ease) both}
@keyframes rm-drop{from{opacity:0;transform:translateY(-14px) scale(.7)}to{opacity:1}}
@keyframes rm-jump{0%,100%{translate:0 0}40%{translate:0 -7px}}

/* ---------- Show more ---------- */
body.ssg-re .res-more{border-radius:24px;transition:transform .3s var(--rm-ease),background .2s,color .2s,border-color .2s}
body.ssg-re .res-more:hover{background:var(--rm-ink);border-color:var(--rm-ink);color:#fff;transform:translateY(-2px)}

/* ---------- agencies strip ---------- */


/* ================= photo accordion (capstoneproperty.com style) =================
   Tall narrow panels with a vertical two-line title; the hovered / selected one
   opens wide: title top-left, text bottom-left, the button sits in a notch cut
   out of the bottom-right corner. Buttons in flat colours only. */
body.ssg-re{--rm-page:var(--ssg-bg,#f7f5f1)}
body.ssg-re .rm-acc-wrap{padding:34px 0 14px;background:var(--rm-page)}
/* two-tone heading, text on the right (as on capstoneproperty.com) */
body.ssg-re .rm-acc-top{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:24px}
body.ssg-re .rm-acc-top h2{margin:0;font:400 clamp(26px,3.2vw,44px)/1.12 'DM Serif Display',Georgia,serif!important;letter-spacing:-.01em;color:#1a1a1a}
body.ssg-re .rm-acc-top h2 em{font-style:normal;color:#ea7318;background:linear-gradient(180deg,transparent 62%,rgba(234,115,24,.22) 62%)}
body.ssg-re .rm-acc-top p{margin:0;font:500 15px/1.5 'DM Sans',system-ui,sans-serif;color:#7a7468}
body.ssg-re .rm-acc-top p b{color:#1a1a1a;font-weight:700}
body.ssg-re .rm-acc{display:flex;gap:18px;height:410px}
body.ssg-re .rm-panel{position:relative;flex:0 0 128px;height:100%;border-radius:38px;overflow:hidden;cursor:pointer;
  background:#2a2622;outline:none;transition:flex-basis .8s var(--rm-ease),flex-grow .8s var(--rm-ease);
  animation:rm-rise .8s var(--rm-ease) both;animation-delay:calc(var(--rm-i) * 90ms)}
body.ssg-re .rm-panel.open{flex:1 1 auto}
body.ssg-re .rm-panel:focus-visible{box-shadow:0 0 0 3px var(--rm-orange)}
body.ssg-re .rm-shots,body.ssg-re .rm-shots img,body.ssg-re .rm-veil{position:absolute;inset:0;width:100%;height:100%}
body.ssg-re .rm-shots img{object-fit:cover;opacity:0;transform:scale(1.14);filter:saturate(1.18) contrast(1.05);transition:opacity 1.4s ease,transform 8s linear}
body.ssg-re .rm-shots img.on{opacity:1;transform:scale(1)}
/* warm orange veil (palette #9f4e10 / #ea7318) instead of black: text stays readable, photos stay bright */
body.ssg-re .rm-veil{background:linear-gradient(0deg,rgba(159,78,16,.8) 0%,rgba(200,100,30,.4) 34%,rgba(234,115,24,0) 68%);transition:opacity .7s}
body.ssg-re .rm-panel.open .rm-veil{background:linear-gradient(90deg,rgba(159,78,16,.6) 0%,rgba(200,100,30,.26) 30%,rgba(234,115,24,0) 52%)}
/* vertical title, two lines, reading bottom to top */
body.ssg-re .rm-vtitle{position:absolute;left:22px;bottom:30px;max-height:330px;writing-mode:vertical-rl;transform:rotate(180deg);
  color:#fff;font:600 30px/1.08 "DM Sans",Poppins,sans-serif;letter-spacing:-.01em;transition:opacity .3s;text-shadow:0 2px 14px rgba(0,0,0,.45)}
body.ssg-re .rm-panel.open .rm-vtitle{opacity:0;transition-duration:.15s}
body.ssg-re .rm-top,body.ssg-re .rm-txt{position:absolute;color:#fff;opacity:0;transform:translateY(18px);
  transition:opacity .3s,transform .6s var(--rm-ease)}
body.ssg-re .rm-top{left:40px;top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
body.ssg-re .rm-title{text-shadow:0 2px 14px rgba(0,0,0,.35);font:600 34px/1.1 "DM Sans",Poppins,sans-serif;letter-spacing:-.01em;max-width:320px}
body.ssg-re .rm-count{font:600 12.5px/1 "DM Sans",Poppins,sans-serif;background:#fff;color:#1a1a1a;padding:6px 12px;border-radius:20px}
body.ssg-re .rm-txt{text-shadow:0 1px 10px rgba(0,0,0,.45);left:40px;bottom:40px;max-width:min(560px,calc(100% - 290px));font-size:17px;line-height:1.6;color:rgba(255,255,255,.92)}
body.ssg-re .rm-panel.open .rm-top,body.ssg-re .rm-panel.open .rm-txt{opacity:1;transform:none;transition-delay:.35s}
body.ssg-re .rm-panel.open .rm-txt{transition-delay:.45s}
/* the notch: a page-coloured block in the corner, rounded inwards on both sides */
body.ssg-re .rm-notch{position:absolute;right:0;bottom:0;padding:16px 0 0 16px;background:var(--rm-page);
  border-top-left-radius:34px;opacity:0;transform:translate(20px,20px);transition:opacity .3s,transform .6s var(--rm-ease)}
body.ssg-re .rm-panel.open .rm-notch{opacity:1;transform:none;transition-delay:.4s}
body.ssg-re .rm-notch:before,body.ssg-re .rm-notch:after{content:"";position:absolute;width:34px;height:34px;background:transparent;pointer-events:none}
/* inverted corners: page colour outside a quarter circle (decor, not a button) */
body.ssg-re .rm-notch:before,body.ssg-re .rm-notch:after{background:radial-gradient(circle at 0 0,transparent 33.5px,var(--rm-page) 34px)}
body.ssg-re .rm-notch:before{right:0;top:-34px}
body.ssg-re .rm-notch:after{left:-34px;bottom:0}
body.ssg-re .rm-go{display:inline-flex;align-items:center;gap:9px;background:var(--rm-ink);color:#fff;
  font:600 16px/1 "DM Sans",Poppins,sans-serif;padding:19px 28px;border-radius:30px;transition:background .25s}
body.ssg-re .rm-panel.open:hover .rm-go{background:var(--rm-orange)}
body.ssg-re .rm-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--rm-ease)}
body.ssg-re .rm-panel:hover .rm-go svg{transform:translate(3px,-3px)}
body.ssg-re .rm-go-on{display:none}
body.ssg-re .rm-panel.on .rm-go{background:var(--rm-orange)}
body.ssg-re .rm-panel.on .rm-go-l{display:none}
body.ssg-re .rm-panel.on .rm-go-on{display:inline}
/* selected one, while another is previewed */
body.ssg-re .rm-panel.on:not(.open):after{content:"";position:absolute;left:50%;top:22px;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--rm-orange);box-shadow:0 0 0 3px rgba(255,255,255,.9)}
@media (max-width:1100px){body.ssg-re .rm-panel{flex-basis:96px}body.ssg-re .rm-vtitle{font-size:24px}body.ssg-re .rm-txt{display:none}}
@media (max-width:900px){body.ssg-re .rm-acc-wrap{display:none}}

/* ================= Popular areas (capstoneproperty.com locations effect) =================
   Photo card; on hover the photo darkens, the name rises and Rent / Sale appear. */
body.ssg-re .res-grid>.rm-areas{grid-column:1/-1;margin:10px 0 6px}
body.ssg-re .rm-areas-head{margin-bottom:14px}
body.ssg-re .rm-areas-eyebrow{font:600 11px/1 "DM Sans",Poppins,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rm-orange);margin-bottom:6px}
body.ssg-re .rm-areas-head h3{font-family:var(--res-serif,Georgia,serif);font-size:24px;font-weight:600;margin:0;color:var(--rm-ink)}
body.ssg-re .rm-area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
body.ssg-re .rm-area{position:relative;height:300px;border-radius:18px;overflow:hidden;background:#2a2622}
body.ssg-re .rm-area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--rm-ease)}
body.ssg-re .rm-area:hover img{transform:scale(1.07)}
body.ssg-re .rm-area-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,14,12,0) 40%,rgba(16,14,12,.6) 100%);transition:background-color .5s}
body.ssg-re .rm-area:hover .rm-area-veil{background-color:rgba(20,24,30,.55)}
body.ssg-re .rm-area-in{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;align-items:flex-start;color:#fff}
body.ssg-re .rm-area-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px;
  background:rgba(20,18,16,.55);border:1.5px solid rgba(255,255,255,.55)}
body.ssg-re .rm-area-ic svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.ssg-re .rm-area-name{font:600 26px/1.1 "DM Sans",Poppins,sans-serif;letter-spacing:-.01em}
body.ssg-re .rm-area-n{font-size:15px;margin-top:6px;color:rgba(255,255,255,.92)}
body.ssg-re .rm-area-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-height:0;opacity:0;margin-top:0;overflow:hidden;
  transition:max-height .5s var(--rm-ease),opacity .35s,margin-top .5s var(--rm-ease)}
body.ssg-re .rm-area:hover .rm-area-btns,body.ssg-re .rm-area:focus-within .rm-area-btns{max-height:60px;opacity:1;margin-top:16px}
body.ssg-re .rm-area-btns a{display:block;text-align:center;background:#fff;color:#1a1a1a;font:600 15px/1 "DM Sans",Poppins,sans-serif;
  padding:14px 10px;border-radius:26px;text-decoration:none;transition:background .2s,color .2s}
body.ssg-re .rm-area-btns a,body.ssg-re .rm-area-btns a:visited{color:#1a1a1a!important}
body.ssg-re .rm-area-btns a:hover{background:var(--rm-orange);color:#fff!important}
body.ssg-re .rm-area-btns a.off{background:rgba(255,255,255,.35);color:rgba(26,26,26,.55)!important;pointer-events:none}
@media (hover:none){body.ssg-re .rm-area-btns{max-height:60px;opacity:1;margin-top:16px}}

/* ================= Search band: soft orange, flat colours =================
   Full orange crushed the page, sage was off-brand: a peach tone with dark orange
   text. SEARCH is its only strong orange and the request CTA stays white. */
body.ssg-re{--rm-band:#f8d4b4;--rm-band2:#fdebd9;--rm-bandtx:#7a3b0c}
body.ssg-re .re-hero{background:var(--rm-band);border-bottom:0;box-shadow:0 10px 26px rgba(159,78,16,.12)}
body.ssg-re .re-crumb,body.ssg-re .re-crumb a{color:var(--rm-bandtx)!important;font-weight:600}
body.ssg-re .re-crumb a:not(#re-crumb-c):hover{color:#1a1a1a!important}
body.ssg-re .re-crumb #re-crumb-c{background:var(--rm-band2);border-color:var(--rm-band2);transition:background .2s,color .2s,transform .25s var(--rm-ease)}
body.ssg-re .re-crumb #re-crumb-c:hover{background:#fff;border-color:#fff;transform:translateY(-1px)}
body.ssg-re .re-seg{background:var(--rm-band2);border-color:var(--rm-band2)}
body.ssg-re .re-seg .rm-pill{background:#fff}
body.ssg-re .re-seg button{color:var(--rm-bandtx)}
body.ssg-re .re-seg button:hover{color:#1a1a1a}
body.ssg-re .re-seg button.on,body.ssg-re .re-seg button.on:hover{color:#1a1a1a}
body.ssg-re .re-sb{border-color:#fff;transition:box-shadow .3s,transform .3s var(--rm-ease)}
body.ssg-re .re-sb:focus-within{box-shadow:0 0 0 4px rgba(255,255,255,.4)}
/* the closed filter panel kept 2px of border showing under the box */
body.ssg-re .re-sb .res-panel:not(.open){visibility:hidden}
body.ssg-re .re-sb .sel select{max-width:150px}
body.ssg-re .re-hfilters,body.ssg-re .re-hgo{transition:background .2s,transform .25s var(--rm-ease)}
body.ssg-re .re-hfilters:hover,body.ssg-re .re-hgo:hover{transform:translateY(-1px)}
body.ssg-re .re-hgo:hover{background:#9f4e10}
body.ssg-re .re-hgo svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
body.ssg-re .re-hgo:hover svg{transform:scale(1.2) rotate(-10deg)}
body.ssg-re .re-reqbtn{position:relative;background:#fff;color:#9f4e10;border-color:#fff;animation:rm-cta 2.6s ease-out infinite;
  transition:background .2s,color .2s,border-color .2s,transform .25s var(--rm-ease)}
body.ssg-re .re-reqbtn:hover{background:#1a1a1a;color:#fff;border-color:#1a1a1a;transform:translateY(-2px);animation:none}
body.ssg-re .re-reqbtn svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
body.ssg-re .re-reqbtn:hover svg{transform:rotate(90deg)}
@keyframes rm-cta{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}

/* ================= Featured agencies: same language as the accordion =================
   One tall rounded photo, a black shadow on its lower half only. The listing rolls full size, its
   title and price rise on hover. The shop banner sits underneath as the fallback. */
body.ssg-re .res-vipbar,body.ssg-re .res-grid>.res-vipbar{background:transparent;border:0;border-radius:0;padding:14px 0 10px;margin:4px 0}
body.ssg-re .res-grid>.res-vipbar>.res-wrap{padding:0}
body.ssg-re .res-viphead{gap:12px;margin-bottom:16px}
body.ssg-re .res-viphead h2{font:400 30px/1.15 'DM Serif Display',Georgia,serif!important;letter-spacing:-.01em;color:#1a1a1a}
body.ssg-re .res-viphead a{font-size:14px}
body.ssg-re .rm-vnav{display:flex;gap:8px}
body.ssg-re .rm-vnav[hidden]{display:none}
body.ssg-re .rm-vnav button{flex:0 0 40px;width:40px!important;height:40px!important;min-width:0;padding:0!important;border:1.5px solid #e6e1d8;border-radius:50%!important;
  background:#fff;color:#1a1a1a;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .25s var(--rm-ease)}
body.ssg-re .rm-vnav button:hover{background:var(--rm-orange);border-color:var(--rm-orange);color:#fff;transform:scale(1.06)}
body.ssg-re .rm-vnav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.ssg-re .res-vips{gap:16px;padding:6px 0 12px;scrollbar-width:none;scroll-behavior:smooth}
body.ssg-re .res-vips::-webkit-scrollbar{display:none}
body.ssg-re .res-vip{position:relative;isolation:isolate;flex:1 0 216px;width:auto;max-width:290px;height:340px;overflow:hidden;
  border:0;border-radius:18px;background:#e9a56f;scroll-snap-align:start;transition:transform .4s var(--rm-ease),box-shadow .4s}
body.ssg-re .res-vip:hover{transform:translateY(-6px);border:0;box-shadow:0 18px 34px rgba(26,26,26,.22)}
body.ssg-re .res-vip-top{position:absolute;inset:0;height:auto;z-index:auto;background-color:transparent}
body.ssg-re .res-vip-shade,body.ssg-re .res-vip-shot:after{position:absolute;inset:0;content:"";
  background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.38) 30%,rgba(0,0,0,0) 60%)}
body.ssg-re .res-vip-tag{display:none}
body.ssg-re .res-vip-logo{left:18px;top:18px;bottom:auto;z-index:3;width:54px;height:54px;border-radius:50%;border:0;background:#fff;padding:8px;box-shadow:0 6px 16px rgba(26,26,26,.16)}
body.ssg-re .res-vip-logo.txt{font:400 24px/1 'DM Serif Display',Georgia,serif;color:#9f4e10;padding:0}
body.ssg-re .res-vip:after{content:"";position:absolute;top:26px;right:18px;z-index:3;width:38px;height:38px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/17px no-repeat;
  transition:background-color .2s,transform .35s cubic-bezier(.34,1.56,.64,1)}
body.ssg-re .res-vip:hover:after{transform:scale(1.12) rotate(8deg)}
body.ssg-re .res-vip-roll{position:absolute;inset:0;z-index:1;height:auto;margin:0;background:transparent}
body.ssg-re .res-vip-shot img{transition:transform 1.4s var(--rm-ease)}
body.ssg-re .res-vip:hover .res-vip-shot img{transform:scale(1.08)}
body.ssg-re .res-vip-shot figcaption{z-index:1;padding:0 20px 20px;background:none;color:#fff;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .45s var(--rm-ease)}
body.ssg-re .res-vip:hover .res-vip-shot figcaption{opacity:1;transform:none}
body.ssg-re .res-vip-shot .t{font-size:13px;color:#fff}
body.ssg-re .res-vip-shot .p{font:400 20px/1.2 'DM Serif Display',Georgia,serif;color:#fff}
body.ssg-re .res-vip-body{position:absolute;left:20px;right:20px;bottom:20px;z-index:3;padding:0;gap:5px;color:#fff;transition:transform .45s var(--rm-ease)}
body.ssg-re .res-vip:hover .res-vip-body{transform:translateY(-54px)}
body.ssg-re .res-vip .nm{font:600 18px/1.2 "DM Sans",Poppins,sans-serif;letter-spacing:-.01em;color:#fff;-webkit-line-clamp:3;text-shadow:0 2px 12px rgba(0,0,0,.45)}
body.ssg-re .res-vip .n{font-size:13px;color:rgba(255,255,255,.94)}

/* the accordion's call to action is orange, never black */
body.ssg-re .rm-go{background:var(--rm-orange);color:#fff}
body.ssg-re .rm-panel:hover .rm-go,body.ssg-re .rm-panel.on .rm-go{background:#9f4e10;color:#fff}

/* ================= Map on demand (desktop) =================
   Closed: the list takes the full width, twice the listings on screen. It keeps its
   size while hidden so Leaflet can draw; "Show map" or a card's pin docks it right. */
@media (min-width:1101px){
  body.ssg-re .res-main{position:relative;grid-template-columns:minmax(0,1fr);column-gap:22px}
  body.ssg-re.rm-map-open .res-main{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  body.ssg-re .res-head #res-sort{width:auto;flex:none}
  body.ssg-re .res-mapcol{position:absolute;top:0;right:0;bottom:0;width:calc((100% - 22px) / 2.1);border-left:0;background:none;
    visibility:hidden;opacity:0;transform:translateX(60px);pointer-events:none}
  body.ssg-re.rm-map-open .res-mapcol{position:relative;width:auto;visibility:visible;opacity:1;transform:none;pointer-events:auto;
    transition:opacity .45s,transform .7s var(--rm-ease)}
  body.ssg-re .res-mapin{top:calc(var(--re-bar,62px) + 14px);height:calc(100vh - var(--re-bar,62px) - 28px);margin-top:18px;border-radius:30px;overflow:hidden;box-shadow:0 18px 44px rgba(26,26,26,.16)}
}
@media (max-width:1100px){body.ssg-re .rm-mapfab,body.ssg-re .rm-mapbar,body.ssg-re .rm-mapbtn{display:none}}
body.ssg-re .rm-mapfab{position:fixed;left:50%;bottom:72px;z-index:850;display:inline-flex;align-items:center;gap:14px;padding:10px 34px 10px 10px;border:3px solid #fff;border-radius:999px!important;
  background:var(--rm-orange);color:#fff;font:700 20px/1 "DM Sans",Poppins,sans-serif;cursor:pointer;
  transform:translate(-50%,160px);opacity:0;pointer-events:none;transition:transform .5s var(--rm-ease),opacity .3s,background .2s}
body.ssg-re .rm-mapfab.in{transform:translate(-50%,0);opacity:1;pointer-events:auto;animation:rm-fab 2.6s ease-out infinite}
body.ssg-re .rm-mapfab{font-size:20px!important;font-weight:700!important}
body.ssg-re .rm-mapfab:hover{background:#9f4e10}
/* a little planet: the world tile rolls behind a round window */
body.ssg-re .rm-globe{flex:none;width:58px;height:58px;border-radius:50%;border:2px solid #fff;background:#aad3df url("https://tile.openstreetmap.org/0/0/0.png") 0 50%/auto 100% repeat-x;animation:rm-spin 16s linear infinite}
@keyframes rm-spin{to{background-position-x:-58px}}
body.ssg-re.rm-map-open .rm-mapfab{transform:translate(-50%,160px);opacity:0;pointer-events:none;animation:none}
@keyframes rm-fab{0%{box-shadow:0 12px 30px rgba(26,26,26,.34),0 0 0 0 rgba(234,115,24,.6)}70%,100%{box-shadow:0 12px 30px rgba(26,26,26,.34),0 0 0 18px rgba(234,115,24,0)}}
body.ssg-re .rm-mapbtn{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:11px 20px;border:0;border-radius:999px!important;background:var(--rm-orange);color:#fff;
  font:700 14.5px/1 "DM Sans",Poppins,sans-serif;cursor:pointer;transition:background .2s,transform .25s var(--rm-ease)}
body.ssg-re .rm-mapbtn:hover{background:#9f4e10;transform:translateY(-2px)}
body.ssg-re .rm-mapbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
body.ssg-re .rm-mapbtn+#res-save{margin-left:0}
body.ssg-re .rm-mapfab svg,body.ssg-re .rm-mapx svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* style test bar: goes once a template is chosen */
body.ssg-re .rm-mapbar{position:absolute;top:14px;right:14px;z-index:800;display:flex;align-items:center;gap:8px}
body.ssg-re .rm-mapstyles{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--mp-chrome);box-shadow:0 8px 22px rgba(26,26,26,.16)}
body.ssg-re .rm-mapstyles button{border:0;background:none;padding:7px 12px;border-radius:999px!important;color:var(--mp-chrometx);font:600 12.5px/1 "DM Sans",Poppins,sans-serif;cursor:pointer;transition:background .2s,color .2s}
body.ssg-re .rm-mapstyles button.on{background:var(--rm-orange);color:#fff}
body.ssg-re .rm-mapx{width:38px;height:38px;padding:0;border:0;border-radius:50%!important;display:grid;place-items:center;background:var(--mp-chrome);color:var(--mp-chrometx);cursor:pointer;box-shadow:0 8px 22px rgba(26,26,26,.16);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
body.ssg-re .rm-mapx:hover{transform:rotate(90deg)}
/* shared chrome */
body.ssg-re .res-mapin .leaflet-top{top:6px}
body.ssg-re .res-mapin .leaflet-bar{border:0!important;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(26,26,26,.16)}
body.ssg-re .res-mapin .leaflet-bar a{background:var(--mp-chrome);color:var(--mp-chrometx);border-bottom-color:var(--mp-line)}
body.ssg-re .res-mapin .leaflet-control-attribution{margin:0 84px 8px 0!important;padding:2px 8px;background:var(--mp-chrome);color:var(--mp-chrometx);border-radius:10px;font-size:10px}
body.ssg-re .res-mapnote{left:14px;bottom:14px;max-width:250px;padding:7px 12px;border:0;border-radius:14px;background:var(--mp-chrome);color:var(--mp-chrometx);font-size:11.5px;box-shadow:0 8px 22px rgba(26,26,26,.14)}
body.ssg-re .res-mapin .leaflet-popup-content-wrapper{border-radius:22px!important;box-shadow:0 18px 40px rgba(26,26,26,.28)}
body.ssg-re .res-mkr{background:var(--mk-bg);color:var(--mk-tx);box-shadow:var(--mk-sh)}
body.ssg-re .res-mkr:after{border-top-color:var(--mk-bg)}
body.ssg-re .res-mkr.vip{background:var(--mk-vip);color:var(--mk-viptx)}
body.ssg-re .res-mkr.vip:after{border-top-color:var(--mk-vip)}
body.ssg-re .res-mkr:hover,body.ssg-re .res-mkr.hi{background:var(--rm-orange);color:#fff}
body.ssg-re .res-mkr:hover:after,body.ssg-re .res-mkr.hi:after{border-top-color:var(--rm-orange)}
body.ssg-re .res-cl{background:var(--cl-bg);color:var(--cl-tx);border:var(--cl-bd);box-shadow:var(--cl-sh)}
body.ssg-re .leaflet-tile-pane{filter:var(--mp-tiles)}
body.ssg-re #res-map{background:var(--mp-bg)}
/* 1 Paper: pale cream atlas, white price tags */
body.ssg-re,body.ssg-re.rm-mapst-paper{--mp-tiles:grayscale(.85) sepia(.2) brightness(1.08) contrast(.9);--mp-bg:#f2ede4;--mp-chrome:#fff;--mp-chrometx:#1a1a1a;--mp-line:#eceae5;
  --mk-bg:#fff;--mk-tx:#1a1a1a;--mk-sh:0 6px 16px rgba(26,26,26,.2);--mk-vip:#1a1a1a;--mk-viptx:#fff;--cl-bg:#fff;--cl-tx:#9f4e10;--cl-bd:3px solid #ea7318;--cl-sh:0 8px 18px rgba(234,115,24,.3)}
/* 2 Night: dark city map, glowing orange */
body.ssg-re.rm-mapst-night{--mp-tiles:invert(1) hue-rotate(190deg) saturate(.4) brightness(.92) contrast(.92);--mp-bg:#16181c;--mp-chrome:#23262b;--mp-chrometx:#f7f5f1;--mp-line:#353940;
  --mk-bg:#ea7318;--mk-tx:#fff;--mk-sh:0 0 0 4px rgba(234,115,24,.22),0 8px 20px rgba(0,0,0,.5);--mk-vip:#fdebd9;--mk-viptx:#7a3b0c;--cl-bg:#ea7318;--cl-tx:#fff;--cl-bd:0;--cl-sh:0 0 0 7px rgba(234,115,24,.25),0 0 26px rgba(234,115,24,.7)}
/* 3 Terracotta: warm duotone, the colour of the brand */
body.ssg-re.rm-mapst-terra{--mp-tiles:grayscale(1) sepia(.75) hue-rotate(-14deg) saturate(1.7) brightness(1.03);--mp-bg:#efd9c3;--mp-chrome:#fffaf4;--mp-chrometx:#7a3b0c;--mp-line:#f3dfc9;
  --mk-bg:#1a1a1a;--mk-tx:#fff;--mk-sh:0 6px 16px rgba(90,40,5,.35);--mk-vip:#9f4e10;--mk-viptx:#fff;--cl-bg:#1a1a1a;--cl-tx:#fff;--cl-bd:3px solid #fff;--cl-sh:0 8px 18px rgba(90,40,5,.35)}
/* 4 Editorial: black and white print, orange the only colour */
body.ssg-re.rm-mapst-mono{--mp-tiles:grayscale(1) contrast(1.12) brightness(1.06);--mp-bg:#ececec;--mp-chrome:#1a1a1a;--mp-chrometx:#fff;--mp-line:#3a3a3a;
  --mk-bg:#1a1a1a;--mk-tx:#fff;--mk-sh:0 6px 14px rgba(0,0,0,.28);--mk-vip:#ea7318;--mk-viptx:#fff;--cl-bg:#ea7318;--cl-tx:#fff;--cl-bd:3px solid #1a1a1a;--cl-sh:0 8px 18px rgba(0,0,0,.25)}

/* Popular areas is not a listing: its own peach panel breaks the grid */
body.ssg-re .res-grid>.rm-areas{margin:22px 0;padding:32px 34px 34px;background:var(--rm-peach);border-radius:34px}
body.ssg-re .rm-areas-head{margin-bottom:20px}
body.ssg-re .rm-areas-eyebrow{color:#9f4e10}
/* same heading as the page's: serif, one word in orange */
body.ssg-re .rm-areas-head h3{font:400 clamp(26px,3.2vw,44px)/1.12 'DM Serif Display',Georgia,serif!important;letter-spacing:-.01em;color:#1a1a1a}
body.ssg-re .rm-areas-head h3 em{font-style:normal;color:#ea7318;background:linear-gradient(180deg,transparent 62%,rgba(234,115,24,.22) 62%)}
/* map closed: the band runs edge to edge, its content stays on the page grid */
@media (min-width:1101px){
  body.ssg-re{overflow-x:clip}
  body.ssg-re:not(.rm-map-open) .res-grid>.rm-areas{margin:26px calc(50% - 50vw);padding:46px calc(50vw - 50%) 50px;border-radius:0}
}
@media (max-width:640px){body.ssg-re .res-grid>.rm-areas{padding:22px 18px;border-radius:26px}}

/* floating map button: translucent black glass, soft corners, no halo */
body.ssg-re .rm-mapfab{gap:12px;padding:8px 24px 8px 8px;border:1px solid rgba(255,255,255,.28);border-radius:18px!important;background:rgba(20,20,20,.58);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);box-shadow:0 14px 34px rgba(0,0,0,.28);font-size:17px!important;font-weight:600!important}
body.ssg-re .rm-mapfab.in{animation:none}
body.ssg-re .rm-mapfab:hover{background:rgba(20,20,20,.8)}
body.ssg-re .rm-globe{width:46px;height:46px;border:0;border-radius:12px}
@keyframes rm-spin{to{background-position-x:-46px}}

/* Buyer request: a two-column card, so it can speak up */
body.ssg-re .res-req{justify-content:center;gap:16px;padding:40px}
body.ssg-re .res-req .eyebrow{font-size:13px}
body.ssg-re .res-grid .res-req h3{font:400 clamp(30px,2.9vw,42px)/1.12 'DM Serif Display',Georgia,serif!important;letter-spacing:-.01em;max-width:520px}
body.ssg-re .res-req p{font-size:18px;line-height:1.55;max-width:560px}
body.ssg-re .res-req .cta{padding:15px 26px;font-size:17px!important;border-radius:14px;margin-top:6px}
body.ssg-re .res-req .cta:hover{background:#9f4e10}
body.ssg-re .res-req .cta svg{width:19px;height:19px}
body.ssg-re .res-req .trust{gap:18px;font-size:14px}
body.ssg-re .res-req .trust svg{width:15px;height:15px}
@media (max-width:620px){body.ssg-re .res-req{padding:26px 22px}body.ssg-re .res-req p{font-size:16px}}

/* ================= Categories =================
   Desktop: hidden, the accordion, Buy / Rent and Filters already offer every choice.
   The buttons stay in the page: the accordion and the results title read them.
   Phone (no accordion): one line of text tabs, an orange line under the active one. */
@media (min-width:901px){body.ssg-re .res-cattabs{display:none}}
@media (max-width:900px){
  body.ssg-re .res-cattabs{background:transparent;border-bottom:0;padding:4px 0 0}
  body.ssg-re .res-ctin{position:relative;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:22px;padding:0;border-bottom:1px solid #e6e1d8}
  body.ssg-re .res-ctin::-webkit-scrollbar{display:none}
  body.ssg-re .res-ct,body.ssg-re .res-ct:hover,body.ssg-re .res-ct.on,body.ssg-re .res-ct.on:hover{background:none;border:0;border-radius:0!important;box-shadow:none;transform:none;
    padding:14px 0;white-space:nowrap;font:600 14.5px/1.2 "DM Sans",Poppins,sans-serif}
  body.ssg-re .res-ct{color:#6b6560}
  body.ssg-re .res-ct.on{color:#1a1a1a}
  body.ssg-re .res-ct .n{display:none}
  body.ssg-re .rm-tabline{position:absolute;left:0;bottom:0;height:3px;width:0;border-radius:3px;background:var(--rm-orange);
    transition:transform .45s var(--rm-ease),width .45s var(--rm-ease);pointer-events:none}
}

@media (prefers-reduced-motion:reduce){
  body.ssg-re *,body.ssg-re *:before,body.ssg-re *:after{animation:none!important;transition:none!important}
  body.ssg-re .rm-in{opacity:1;transform:none}
}