/* site.css: the stylesheet of the content pages (home, areas, agencies, saved, compare, about, 404 ...).
   The tokens are index.html's :root; the cards are homes.css's .hcard rules, so a card looks the same on the map
   and on a page. Phone first; 900 px is the desktop breakpoint, 1200 px widens the home grids. */
:root{
  --ink:#1A1A20;--red:#CF142B;--red-deep:#A30E22;
  --bg:#FAF8F4;--card:#FFFFFF;--soft:#F4F1EA;--soft-2:#ECE9E1;--muted:#6E6E78;--text-2:#44444C;
  --turq:#137A88;--sea:#A9CFE3;
  --glass:rgba(255,255,255,.9);--hair:rgba(26,26,32,.09);--focus:#E8A317;
  --ff-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-ui:"Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gutter:16px;--maxw:1160px;--fmax:1408px;--pm:10px;--mat:6px;--tb:56px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
  --shadow:0 0 0 1px rgba(26,26,32,.06),0 2px 6px -2px rgba(20,30,50,.16),0 10px 24px -14px rgba(20,30,50,.26);
  --card-shadow:0 0 0 1px rgba(26,26,32,.05),0 1px 2px rgba(20,30,50,.06),0 24px 48px -28px rgba(20,30,60,.35),0 8px 20px -14px rgba(20,30,60,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:calc(var(--tb) + 12px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--ff-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
html.lock,html.lock body{overflow:hidden}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
h1,h2,h3{margin:0;font-family:var(--ff-display);font-weight:600;letter-spacing:-.02em;font-variation-settings:"opsz" 144,"SOFT" 0;line-height:1.15}
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:19px}
p{margin:0}
main.main{flex:1;width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin:0 auto;padding:0 calc(var(--gutter) + var(--sar)) 40px calc(var(--gutter) + var(--sal))}
main.main.wide{max-width:var(--fmax);padding-left:calc(var(--pm) + var(--sal));padding-right:calc(var(--pm) + var(--sar))}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:6px;font-family:var(--ff-display);font-weight:600;font-size:23px;letter-spacing:-.025em;font-variation-settings:"opsz" 144,"SOFT" 0;flex-shrink:0;white-space:nowrap}
.brand .dot{color:var(--red);margin:0 .12em}
.brand .com{color:var(--muted)}
.brand-wm{display:inline;letter-spacing:normal}
.brand-mark{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transform:translateY(-2px)}
.brand-mark svg{width:26px;height:26px;display:block}
.brand-link{display:flex;align-items:center;height:44px;color:var(--ink)}

/* ---------- top bar: white glass, sticky, the current page marked ---------- */
.topbar{position:sticky;top:0;z-index:40;background:var(--glass);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 1px 0 var(--hair)}
.topbar-in{max-width:var(--fmax);margin:0 auto;height:calc(var(--tb) + var(--sat));padding:var(--sat) calc(var(--pm) + 4px + var(--sar)) 0 calc(var(--pm) + 4px + var(--sal));display:flex;align-items:center;gap:10px}
.topnav{display:none;align-items:center;gap:2px;margin-left:14px}
.topnav a,.menu-links a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 11px;border-radius:999px;font:500 15px/1 var(--ff-ui);color:var(--text-2);white-space:nowrap}
.topnav a[aria-current="page"]{color:var(--ink);font-weight:600}
.topnav a[aria-current="page"]::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;border-radius:2px;background:var(--red)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.tb-saved{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:999px;color:var(--ink);font:500 15px/1 var(--ff-ui);background:#fff;box-shadow:var(--shadow)}
.tb-saved .ic{width:19px;height:19px}
.tb-saved .t{display:none}
.tb-saved .n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font:600 12px/1 var(--ff-ui)}
.tb-saved[aria-current="page"]{color:var(--red)}
.tb-saved[aria-current="page"] .ic{fill:var(--red)}
.ig-pill{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px 0 11px;border-radius:999px;background:#fff;color:var(--ink);font:600 15px/1 var(--ff-ui);box-shadow:var(--shadow);white-space:nowrap}
.ig-pill .ic{width:18px;height:18px}
.tb-ig{display:none;width:40px;height:40px;border-radius:999px;place-items:center;background:#fff;box-shadow:var(--shadow);color:var(--ink)}
.tb-ig .ic{width:19px;height:19px}
.tb-menu{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow);color:var(--ink)}
.menu-bg{position:fixed;inset:0;z-index:45;background:rgba(26,26,32,.35)}
.menu-sheet{position:fixed;left:0;right:0;bottom:0;z-index:46;background:#fff;border-radius:22px 22px 0 0;padding:6px 16px calc(18px + var(--sab));box-shadow:0 -12px 40px -16px rgba(20,30,60,.45)}
.menu-head{display:flex;align-items:center;justify-content:space-between;height:52px;font:600 15px/1 var(--ff-ui);color:var(--muted)}
.menu-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--soft)}
.menu-links{display:grid;gap:2px}
.menu-links a{height:50px;font-size:18px;color:var(--ink);padding:0 14px;border-radius:14px}
.menu-links a[aria-current="page"]{background:var(--soft);font-weight:600}
.menu-links a[aria-current="page"]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);margin-left:auto}
.menu-foot{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hair);font:500 15px/1 var(--ff-ui);color:var(--text-2)}
.menu-foot a:not(.ig-pill){padding:10px 4px}
@media (min-width:900px){
  :root{--pm:24px;--mat:8px;--gutter:24px}
  .topnav{display:flex}
  .tb-saved .t{display:inline}
  .tb-ig{display:grid}
  .tb-menu,.menu-sheet,.menu-bg{display:none!important}
  h1{font-size:40px}
  h2{font-size:30px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;background:#fff;color:var(--ink);font:600 15px/1 var(--ff-ui);box-shadow:0 0 0 1px rgba(26,26,32,.14),0 2px 6px -3px rgba(20,30,50,.2);white-space:nowrap}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 14px -8px rgba(163,14,34,.7)}
.btn .ic{width:18px;height:18px}
@media (hover:hover){
  .btn,.ig-pill,.tb-ig,.tb-saved,.tb-menu,.hcard,.tile,.pcard,.ag-card,.more,.ig-more,.ig-follow{transition:background-color .15s,box-shadow .15s,transform .15s,filter .15s,color .15s}
  .btn:not(.btn-red):hover,.ig-pill:hover,.tb-ig:hover,.tb-saved:hover,.tb-menu:hover,.ig-more:hover{box-shadow:0 0 0 1px rgba(26,26,32,.14),0 3px 8px -2px rgba(20,30,50,.22),0 12px 26px -12px rgba(20,30,50,.32);transform:translateY(-1px)}
  .btn-red:hover,.ig-follow:hover{filter:brightness(1.08)}
  .topnav a:not([aria-current="page"]):hover{background:var(--soft);color:var(--ink)}
}

/* ---------- blocks ---------- */
.blk{margin-top:34px}
.blk-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.blk-lede{margin:-6px 0 16px;color:var(--text-2);font-size:15px;max-width:640px}
.more{flex:none;display:inline-flex;align-items:center;gap:3px;font:600 14.5px/1 var(--ff-ui);color:var(--red);white-space:nowrap;padding:6px 0}
.more .ic{width:16px;height:16px}
.crumbs{margin:14px 0 0;font:500 13.5px/1.3 var(--ff-ui);color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:5px;height:5px;margin:0 9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.6}
.crumbs a{padding:6px 0}
.crumbs [aria-current="page"]{color:var(--ink)}
.page-head{margin-top:12px}
.page-head h1{margin-top:6px}
.page-head .sub{margin-top:8px;color:var(--text-2);font-size:16px;max-width:700px}
@media (min-width:900px){.blk{margin-top:46px}.page-head{margin-top:16px}.page-head .sub{font-size:17px}}

/* ---------- cards (the map's .hcard, the card a link) ---------- */
.cards{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.row{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:4px var(--gutter) 10px;scrollbar-width:none}
.cards.row::-webkit-scrollbar{display:none}
.cards.row>li{flex:0 0 min(252px,72vw);scroll-snap-align:start}
.main.wide .cards.row{margin:0 calc(-1 * var(--pm));padding-left:var(--pm);padding-right:var(--pm)}
.hcard{position:relative;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--hair),0 8px 20px -14px rgba(20,30,50,.35);color:var(--ink);height:100%}
.hcard .hc{display:block;width:100%;height:100%;color:inherit}
.hcard .ph{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--soft-2) center/40px 40px no-repeat;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8B4AA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 11.2 12 4l8.5 7.2M5.5 9.6V20h13V9.6M10 20v-5.5h4V20'/></svg>")}
.hcard .ph img{display:block;width:100%;height:100%;object-fit:cover}
.hcard .ph.noimg img{display:none}
.bds{position:absolute;left:10px;top:10px;z-index:2;display:flex;gap:5px;pointer-events:none}
.bd{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:7px;font:600 11.5px/1 var(--ff-ui);letter-spacing:.04em;text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.bd.st{color:var(--red)}
.bd.nw{background:var(--red);color:#fff}
.hcard .tx{display:flex;flex-direction:column;gap:3px;padding:11px 13px 12px}
.hcard .pr{font:600 19px/1.2 var(--ff-ui);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hcard .fx{font:500 14.5px/1.3 var(--ff-ui);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* type, town and the agency badge: the badge drops under the type and town when the two will not share the line,
   so "Penthouse in St Julian's" is never cut short (every card on every page, the map's sheet too) */
.hcard .lo{display:flex;align-items:center;flex-wrap:wrap;gap:3px 8px;margin-top:2px;font:400 14px/1.3 var(--ff-ui);color:var(--muted);min-width:0}
.hcard .lo span{flex:1 1 auto;min-width:0}
.hcard .ag{flex:none;margin-left:auto;font:500 11.5px/1 var(--ff-ui);font-style:normal;letter-spacing:.02em;color:var(--text-2);padding:4px 7px;border-radius:6px;background:var(--soft)}
.hc-heart{position:absolute;right:10px;top:10px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .15s,color .15s}
.hc-heart .ic{width:18px;height:18px;transition:fill .15s}
.hc-heart[aria-pressed="true"]{color:var(--red)}
.hc-heart[aria-pressed="true"] .ic{fill:var(--red)}
.hc-heart:active{transform:scale(.88)}
.hcard .hc:focus-visible{outline-offset:-4px;border-radius:16px}
.cards.sm .hcard .pr{font-size:17px}
.cards.sm .hcard .fx{font-size:13.5px}
.cards.sm .hcard .lo{font-size:13px}
.cards.sm .hcard .tx{padding:10px 12px 11px}
@media (hover:hover){.hcard:hover{box-shadow:0 0 0 1px var(--hair),0 14px 28px -14px rgba(20,30,50,.45)}.hc-heart:hover{transform:scale(1.06)}}
@media (min-width:900px){
  .cards{gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards.row{display:grid;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .main.wide .cards.row{margin:0;padding:0}
  .cards.row>li{flex:none}
  .cards.g4,.cards.g4.row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards.g6,.cards.g6.row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards.g6>li:nth-child(n+9){display:none}
}
@media (min-width:1200px){
  .cards.g6,.cards.g6.row{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
  .cards.g6>li:nth-child(n+9){display:block}
}

/* ---------- empty and plain states ---------- */
.empty{padding:34px 22px;text-align:center;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--hair),0 12px 28px -18px rgba(20,30,50,.3)}
.empty h2,.empty h3{font-family:var(--ff-ui);font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.empty p{color:var(--text-2);font-size:15px;margin-bottom:16px}
.empty .btn{margin:0 4px 6px}
.note{color:var(--muted);font-size:14px}

/* ---------- home: the search hero in the frame card ---------- */
.frame-card{position:relative;padding:var(--mat);border-radius:calc(12px + var(--mat));background:var(--card);box-shadow:var(--card-shadow)}
/* the hero (Bean, 22 Oct 2026): the headline and one short line sit on the photo above the search box, and the box is
   low-opacity glass (white at half strength, the photo blurred behind it). The headline follows the old site's "The
   Atlas" logotype (Bean: "first word black second red"): ink, the name in red italic Fraunces. Ink type on the photo
   sits on a soft light scrim (Bean, 19 Oct: type on the bare photo was hard to read). Phones: the photo is taller
   (4:5) and the headline, line and box stack over its lower half; desktop: the column floats at the left. */
.hero{margin-top:12px}
.hero-card{position:relative}
.hero-ph{position:relative;border-radius:12px;overflow:hidden;background:var(--sea);aspect-ratio:4/5;min-height:440px;isolation:isolate}
.hero-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:12% 22%}
.hero-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.56) 46%,rgba(255,255,255,.72) 100%)}
/* the hero's homes (Bean, 23 Oct 2026: "swap pictures of our listings, with the info name, price, location, and a
   button to view listing in the bottom right"): the slides fade over each other; the caption is a glass card like
   the search box, bottom right on desktop and top right on a phone, where the search box holds the bottom */
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;transition:opacity 1s ease}
.hero-slide.on{opacity:1}
.hero-cap{position:absolute;z-index:2;right:calc(var(--mat) + 10px);top:calc(var(--mat) + 10px);display:flex;flex-direction:column;gap:8px;width:min(300px,calc(100% - var(--mat) * 2 - 20px));padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 14px 32px -16px rgba(20,30,50,.45);color:var(--ink);text-decoration:none;transition:background-color .2s}
.cap-tx{display:flex;flex-direction:column;gap:3px;min-width:0;overflow:hidden;transition:opacity .25s}
.hero-cap.swap .cap-tx{opacity:0}
.cap-t{display:block;font:600 15px/1.2 var(--ff-ui);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-m{display:flex;align-items:baseline;gap:8px;white-space:nowrap;overflow:hidden}
.cap-p{font:600 15px/1.2 var(--ff-ui);color:var(--ink)}
.cap-l{font:500 13.5px/1.2 var(--ff-ui);color:var(--text-2);overflow:hidden;text-overflow:ellipsis}
.cap-b{display:none;min-height:38px;padding:0 14px;font-size:14px;align-self:flex-start}
/* a phone: the photo tall enough to hold the caption above the headline (aspect-ratio with min-height would widen the box) */
.hero-ph.show{aspect-ratio:auto;height:560px;min-height:0}
.cap-b .ic{width:15px;height:15px;margin-right:-4px}
@media (hover:hover){.hero-cap:hover{background:rgba(255,255,255,.8)}}
@media (prefers-reduced-motion:reduce){.hero-slide,.cap-tx{transition:none}}
.hero-left{position:absolute;left:var(--mat);right:var(--mat);bottom:var(--mat);z-index:2}
.hero-lead{margin:0 4px 12px;color:var(--ink)}
.hero-lead h1{font-size:34px;line-height:1.02;letter-spacing:-.02em;color:var(--ink);font-weight:500}
.hero-lead h1 em,em.rw{font-style:italic;font-weight:500;color:var(--red)}
.hero-lead h1,.hero-sub{text-shadow:0 1px 2px rgba(20,30,50,.18),0 6px 22px rgba(20,30,50,.16)}
.hero-sub{margin-top:6px;font:500 clamp(11.5px,3.45vw,13.5px)/1.35 var(--ff-ui);letter-spacing:-.01em;color:var(--text-2);white-space:nowrap}
.hero-panel{position:relative;padding:14px 12px 10px;border-radius:18px;background:rgba(255,255,255,.52);-webkit-backdrop-filter:blur(26px) saturate(1.6);backdrop-filter:blur(26px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 18px 40px -22px rgba(10,20,40,.5)}
.hero-panel .seg{background:rgba(255,255,255,.5)}
.search{display:grid;gap:10px}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;height:44px;padding:4px;border-radius:999px;background:var(--soft);gap:2px;justify-self:start}
/* the knob: one white pill that slides from the first half to the second (the two halves are equal) */
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 5px);border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(20,30,50,.18);transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.seg:has(label:nth-child(2) input:checked)::before{transform:translateX(calc(100% + 2px))}
@media (prefers-reduced-motion:reduce){.seg::before{transition:none}}
.seg label{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 18px;border-radius:999px;font:600 15px/1 var(--ff-ui);color:var(--text-2);cursor:pointer;transition:color .2s}
.seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.seg input:checked+span{color:var(--red)}
.seg label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.field{position:relative;display:flex;align-items:center;height:50px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.14) inset}
.field .ic{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.field input,.field select{width:100%;height:100%;padding:0 14px 0 44px;border:0;background:transparent;border-radius:14px;font:500 16px/1 var(--ff-ui);color:var(--ink);-webkit-appearance:none;appearance:none}
.field input::placeholder{color:var(--muted);font-weight:400}
.field.sel .ic{left:auto;right:12px;width:16px;height:16px}
.field.sel select{padding:0 38px 0 14px}
.field.sel::before{content:attr(data-l);position:absolute;left:14px;top:7px;font:500 11px/1 var(--ff-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.field.sel select{padding-top:14px}
/* the site's own list under a price field (home.mjs dd(), pointer devices): the select's options, the chosen one marked */
.field .dd{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;max-height:300px;overflow:auto;padding:6px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(26,26,32,.1),0 18px 40px -16px rgba(20,30,50,.4)}
.field .dd button{display:flex;width:100%;align-items:center;padding:9px 10px;border:0;border-radius:9px;background:none;font:500 15px/1.2 var(--ff-ui);color:var(--ink);text-align:left;cursor:pointer}
.field .dd button:hover,.field .dd button:focus-visible{background:var(--soft)}
.field .dd button.on{font-weight:600;color:var(--red)}
.field .dd button small{margin-left:auto;padding-left:10px;font:400 13px/1.2 var(--ff-ui);color:var(--muted)}
.field.sel.open .ic{transform:rotate(180deg)}
.field.sel .ic{transition:transform .15s}
.prices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.search .btn-red{height:50px;font-size:16px}
.hero-stats{margin:10px 2px 2px;display:flex;flex-wrap:wrap;gap:4px 18px;font:500 14px/1.4 var(--ff-ui);color:var(--ink)}
.hero-stats b{color:var(--ink);font-weight:600}
@media (min-width:900px){
  .hero{margin-top:18px}
  .hero-ph{aspect-ratio:auto;height:600px;min-height:0}
  .hero-ph img{object-position:50% 18%}
  .hero-ph::after{background:linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.5) 34%,rgba(255,255,255,0) 60%)}
  .hero-left{left:calc(var(--mat) + 32px);right:auto;bottom:auto;top:50%;transform:translateY(-50%);width:470px}
  .hero-lead{margin:0 4px 16px}
  .hero-lead h1{font-size:50px}
  .hero-sub{font-size:17px;margin-top:8px;letter-spacing:0}
  .hero-panel{padding:22px 22px 18px;border-radius:22px}
  .hero-stats{margin:14px 2px 0}
  .hero-ph.show{height:600px}
  .hero-cap{right:calc(var(--mat) + 28px);bottom:calc(var(--mat) + 28px);top:auto;width:380px;gap:12px;padding:14px 16px 14px;border-radius:20px}
  .cap-b{display:inline-flex}
  .cap-t{font-size:17px}
  .cap-p{font-size:17px}
  .cap-l{font-size:14.5px}
  .cap-b{min-height:42px;padding:0 16px;font-size:15px}
}
@media (min-width:900px) and (max-height:760px){.hero-ph{height:520px}}

/* ---------- area tiles ---------- */
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
/* an area tile (Bean, 22 Oct 2026: "a horizontally split pill where the town name and how many places there are ...
   sit within housing that has a low opacity backing and blur behind it, and the photo is connected to it above, same
   shape as we have now"): the photo fills the tile, a glass band (white at .6, the photo blurred behind it) sits
   joined to its foot with the name and the counts in ink; no dark gradient, no text on the bare photo */
.tile{position:relative;display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--soft-2);color:var(--ink);box-shadow:0 0 0 1px var(--hair),0 8px 20px -14px rgba(20,30,50,.35);isolation:isolate}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.tile.noph{background:linear-gradient(160deg,#E7ECE4,#CFDDE2)}
.tile .tx{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 10px 9px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 -1px 0 rgba(255,255,255,.45)}
.tile b{display:block;font:600 17px/1.15 var(--ff-display);letter-spacing:-.015em;font-variation-settings:"opsz" 144;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile small{display:flex;flex-wrap:wrap;gap:0 6px;margin-top:2px;font:500 11px/1.3 var(--ff-ui);letter-spacing:-.01em;color:var(--text-2)}
.tile small span{white-space:nowrap}
.tile .rg{position:absolute;left:10px;top:10px;z-index:2;height:22px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.92);color:var(--ink);font:600 11px/22px var(--ff-ui);letter-spacing:.04em;text-transform:uppercase}
@media (hover:hover){.tile:hover{box-shadow:0 0 0 1px var(--hair),0 14px 28px -14px rgba(20,30,50,.45)}.tile:hover img{transform:scale(1.03)}.tile img{transition:transform .4s ease}}
@media (min-width:900px){.tiles{gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}.tile b{font-size:19px}.tile .tx{padding:9px 14px 10px}.tile small{font-size:12.5px;gap:0 10px;letter-spacing:0}}
@media (min-width:1200px){.tiles.t6{grid-template-columns:repeat(6,minmax(0,1fr))}.tiles.t6 .tile .tx{padding:9px 12px 10px}.tiles.t6 .tile small{font-size:11.5px;gap:0 8px;letter-spacing:-.01em}}
.area-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.area-list a{display:flex;flex-direction:column;justify-content:center;min-height:62px;padding:10px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--hair)}
.area-list b{font:600 15.5px/1.2 var(--ff-ui);letter-spacing:-.01em}
.area-list small{margin-top:3px;font:400 13px/1.3 var(--ff-ui);color:var(--muted)}
.area-list a.quiet b{color:var(--text-2)}
@media (min-width:900px){.area-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.region-h{display:flex;align-items:baseline;gap:12px;margin:26px 0 12px}
.region-h h2{font-size:22px}
.region-h span{color:var(--muted);font-size:14px}
@media (min-width:900px){.region-h h2{font-size:26px}}

/* ---------- the map teaser and the places row ---------- */
/* og.jpg is the map already in its white frame on the page's cream, so it sits on the page as it is: no second mat */
/* the live map (the app itself in an iframe at /buy?embed=1: no chrome, slow turn) under one white box with the
   words and the button; padding-bottom keeps the card's shadow clear of the next section (Bean, 19 Oct) */
.teaser{position:relative;margin-top:36px;padding-bottom:32px}
.teaser-ph{position:relative;border-radius:20px;overflow:hidden;background:#BFE3EC;aspect-ratio:1200/630;box-shadow:var(--card-shadow);isolation:isolate}
.teaser-map{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:#BFE3EC}
.teaser-box{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:grid;gap:8px;justify-items:start;padding:18px 16px;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 18px 40px -22px rgba(20,30,50,.5),0 0 0 1px rgba(255,255,255,.6)}
.teaser-box h2{font-size:24px}
.teaser-box p{font-size:15px;color:var(--text-2);max-width:520px}
/* phones: the 4:3 crop keeps og.jpg's own wordmark pill (bottom left of the picture) under the text's fade, so the
   page's heading is the only name in the card */
@media (max-width:899px){.teaser-ph{aspect-ratio:auto}.teaser-map{position:relative;inset:auto;height:auto;aspect-ratio:4/3}.teaser-box{position:relative;left:auto;right:auto;bottom:auto;margin:-22px 10px 10px}}
@media (min-width:900px){.teaser-box{left:36px;right:auto;bottom:auto;top:50%;transform:translateY(-50%);width:420px;padding:28px 26px 24px;gap:12px}.teaser-box h2{font-size:34px}.teaser-box p{font-size:17px}}
.pcards{list-style:none;margin:0;padding:0;display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pm));padding:4px var(--pm) 10px;scrollbar-width:none}
.pcards::-webkit-scrollbar{display:none}
.pcards>li{flex:0 0 min(200px,56vw);scroll-snap-align:start}
.pcard{display:block;position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--soft-2);color:#fff;box-shadow:0 0 0 1px var(--hair),0 8px 20px -14px rgba(20,30,50,.35)}
.pcard img{display:block;width:100%;height:100%;object-fit:cover}
.pcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,26,32,0) 45%,rgba(26,26,32,.7) 100%)}
.pcard .tx{position:absolute;left:12px;right:12px;bottom:12px;z-index:2}
.pcard b{display:block;font:600 18px/1.15 var(--ff-display);letter-spacing:-.015em;font-variation-settings:"opsz" 144;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.pcard small{display:block;margin-top:3px;font:500 12.5px/1.3 var(--ff-ui);opacity:.9}
@media (min-width:900px){.pcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;overflow:visible;margin:0;padding:0}.pcards>li{flex:none}}

/* ---------- the @malta feed (index.html's section) ---------- */
.ig{position:relative;z-index:1;background:var(--bg);padding-bottom:10px;margin-top:40px}
.ig::before{content:"";position:absolute;left:0;right:0;top:0;height:0;border-top:1px solid var(--hair)}
.ig-bar{max-width:var(--maxw);margin:0 auto;height:68px;display:flex;align-items:center;gap:12px;padding:5px 0 0}
.ig-who{display:flex;align-items:center;gap:11px;min-width:0;flex:1;height:52px}
.ig-av{width:42px;height:42px;flex:none;border-radius:50%;padding:2px;background:conic-gradient(from 210deg,#F9CE34,#EE2A7B,#6228D7,#F9CE34)}
.ig-av svg{display:block;width:100%;height:100%;border-radius:50%;background:#fff;padding:2px}
.ig-who>span:last-child{min-width:0;flex:1}
.ig-who strong{display:block;font:600 18px/1.1 var(--ff-ui);letter-spacing:-.01em}
.ig-who span.s{display:block;font:400 14px/1.3 var(--ff-ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-follow{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:999px;background:var(--red);color:#fff;font:600 15px/1 var(--ff-ui);flex:none;box-shadow:0 6px 14px -8px rgba(163,14,34,.7)}
.ig-head{max-width:var(--maxw);margin:0 auto;padding:8px 0 16px;display:flex;align-items:center;gap:12px}
.ig-bio{margin:0;flex:1;font:400 15px/1.45 var(--ff-ui);color:var(--text-2)}
.ig-grid{max-width:var(--maxw);margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:12px;overflow:hidden}
.ig-grid li{position:relative;aspect-ratio:1/1;background:var(--soft-2);overflow:hidden}
.ig-grid li.sk{background:linear-gradient(100deg,#ECE9E1 30%,#F4F1EA 50%,#ECE9E1 70%) 0 0/300% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-150% 0}}
.ig-grid a{position:absolute;inset:0;display:block}
.ig-grid img{width:100%;height:100%;object-fit:cover;display:block}
.ig-grid .rl{position:absolute;top:7px;right:7px;width:20px;height:20px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.ig-grid .lk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(26,26,32,.45);color:#fff;font:600 16px/1 var(--ff-ui);opacity:0;transition:opacity .2s}
.ig-grid .lk .ic{fill:#fff;stroke:none;width:18px;height:18px}
@media (hover:hover){.ig-grid a:hover .lk,.ig-grid a:focus-visible .lk{opacity:1}}
.ig-wrap{position:relative;max-width:var(--maxw);margin:0 auto}
.ig-grid.dim li{animation:none;opacity:.4}
.ig-wrap .ig-empty{position:absolute;left:16px;right:16px;top:24px;margin:0 auto}
.ig-more-row{max-width:var(--maxw);margin:0 auto;padding:18px 0 0;text-align:center}
.ig-more-row.ghost{visibility:hidden}
.ig-more{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 20px;border-radius:999px;font:600 15px/1 var(--ff-ui);color:var(--ink);box-shadow:0 0 0 1px rgba(26,26,32,.14),0 2px 6px -3px rgba(20,30,50,.2);background:#fff}
.ig-more .ic{width:17px;height:17px}
.ig-empty{max-width:520px;margin:10px auto 0;padding:26px 22px;text-align:center;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--hair),0 12px 28px -18px rgba(20,30,50,.3)}
.ig-empty svg{width:56px;height:56px}
.ig-empty h3{margin:10px 0 4px;font:600 21px/1.2 var(--ff-ui);letter-spacing:-.01em}
.ig-empty p{margin:0 0 16px;color:var(--text-2);font-size:15px}
.ig-empty .ig-follow{height:46px;padding:0 24px;border-radius:999px}
@media (min-width:900px){.ig-bar{padding-top:10px}.ig-grid{grid-template-columns:repeat(6,1fr);gap:4px}.ig-head{padding-bottom:22px}}

/* ---------- footer (index.html's footer-lite plus the site links) ---------- */
.footer-lite{background:var(--ink);color:#fff;padding:36px var(--gutter) calc(36px + var(--sab))}
.footer-lite-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap}
.footer-lite .brand{color:#fff;font-size:20px}
.footer-lite .brand .com{color:rgba(255,255,255,.55)}
.footer-nav{display:flex;flex-wrap:wrap;gap:2px 4px;width:100%;order:3}
.footer-nav a{display:inline-flex;align-items:center;height:40px;padding:0 10px;margin-left:-10px;border-radius:999px;font:500 14.5px/1 var(--ff-ui);color:rgba(255,255,255,.8)}
.footer-nav a+a{margin-left:4px}
.footer-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.footer-lite-meta{display:flex;align-items:center;gap:22px;font-size:14px;color:rgba(255,255,255,.65)}
.footer-lite-meta a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;position:relative}
.footer-lite-meta a::before{content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-12px}
.footer-lite-meta a:hover{border-color:#fff}
.footer-credits{max-width:var(--maxw);margin:22px auto 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;line-height:1.55;color:rgba(255,255,255,.5)}
.footer-credits a{color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.2);position:relative}
.footer-credits a::before{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.footer-credits a:hover{color:#fff}
@media (min-width:900px){.footer-nav{width:auto;order:0;flex:1;justify-content:center}}

/* ---------- agencies ---------- */
.ag-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.ag-card{display:flex;flex-direction:row;align-items:flex-start;gap:16px;padding:16px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px var(--hair),0 8px 20px -14px rgba(20,30,50,.35);color:var(--ink);height:100%}
.ag-card h2,.ag-card h3{font-size:24px}
.ag-card .cnt{font:500 14px/1.4 var(--ff-ui);color:var(--muted)}
.ag-card p{color:var(--text-2);font-size:15px;line-height:1.5}
.ag-card .ag-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;gap:14px;font:600 14.5px/1 var(--ff-ui);color:var(--red)}
.ag-card .ag-foot .ic{width:16px;height:16px}
/* the logo tile: the agency's own mark on white, the words beside it (Bean, 23 Oct 2026: "the logo photo on the left connecting to the info on the right") */
.ag-logo{flex:none;display:grid;place-items:center;width:84px;height:84px;padding:10px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
.ag-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* RE/MAX and Excel publish their marks in cream and white only, so their tiles are ink */
.ag-logo.dark{background:var(--ink);box-shadow:none}
.ag-mark{font:600 13px/1.25 var(--ff-ui);color:var(--ink);text-align:center}
.ag-info{display:flex;flex-direction:column;gap:6px;min-width:0;align-self:stretch}
.ag-head .ag-logo{width:96px;height:96px;margin-bottom:2px}
@media (hover:hover){.ag-card:hover{box-shadow:0 0 0 1px var(--hair),0 14px 28px -14px rgba(20,30,50,.45);transform:translateY(-2px)}}
@media (min-width:900px){.ag-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.ag-card{gap:20px;padding:20px}.ag-logo{width:140px;height:112px;padding:10px 12px;border-radius:22px}.ag-head .ag-logo{width:140px;height:112px}}
.ag-head{display:flex;flex-direction:column;gap:10px}
.ag-head .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.wordmark{display:inline-block;font:600 26px/1.1 var(--ff-display);letter-spacing:-.02em;font-variation-settings:"opsz" 144}

/* ---------- compare ---------- */
.cmp-wrap{overflow-x:auto;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) 10px;-webkit-overflow-scrolling:touch}
.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:560px;background:#fff;border-radius:18px;box-shadow:0 0 0 1px var(--hair),0 8px 20px -14px rgba(20,30,50,.35);overflow:hidden}
.cmp th,.cmp td{padding:12px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--hair);font-size:15px}
.cmp tr:first-child th,.cmp tr:first-child td{border-top:0}
.cmp th[scope="row"]{width:120px;font:500 13px/1.4 var(--ff-ui);color:var(--muted);letter-spacing:.02em;text-transform:uppercase;background:var(--soft);white-space:nowrap}
.cmp td{width:calc((100% - 120px) / var(--cols,3))}
.cmp .ph{display:block;position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--soft-2)}
.cmp .ph img{display:block;width:100%;height:100%;object-fit:cover}
.cmp .pr{font:600 20px/1.2 var(--ff-ui);letter-spacing:-.015em}
.cmp .ttl{font:600 15px/1.3 var(--ff-ui);margin-top:4px}
.cmp .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;background:var(--soft);font:500 13px/1 var(--ff-ui);color:var(--text-2)}
.cmp .acts{display:flex;flex-direction:column;gap:8px}
.cmp .acts .btn{min-height:42px;padding:0 14px;font-size:14px}
.cmp .rm{font:500 13.5px/1 var(--ff-ui);color:var(--muted);padding:8px 0}
.cmp .rm:hover{color:var(--red)}
.cmp-bar{position:fixed;left:50%;bottom:calc(14px + var(--sab));transform:translateX(-50%);z-index:35;display:flex;align-items:center;gap:12px;height:56px;padding:0 10px 0 18px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 14px 34px -14px rgba(20,30,60,.6);font:500 15px/1 var(--ff-ui);white-space:nowrap;max-width:calc(100vw - 32px)}
.cmp-bar .btn{min-height:40px;padding:0 16px}
.cmp-bar .btn.one{pointer-events:none;opacity:.45}
.cmp-bar .cmp-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12)}
body.has-cmp{padding-bottom:84px}
body.p-compare .cmp-bar{display:none}
body.p-compare.has-cmp{padding-bottom:0}

/* ---------- static pages ---------- */
.prose{max-width:720px}
.prose h1{margin-bottom:8px}
.prose h2{font-size:22px;margin-top:30px}
.prose p,.prose li{font-size:16.5px;line-height:1.6;color:var(--text-2);margin-top:12px}
.prose ul{padding-left:20px;margin:0}
.prose a{color:var(--ink);border-bottom:1px solid rgba(26,26,32,.3)}
.prose a:hover{border-color:var(--red);color:var(--red)}
.prose .lede{font-size:19px;color:var(--ink);margin-top:10px}
.prose .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.prose .btns a{border:0}
.prose .last{margin-top:26px;font-size:14px;color:var(--muted)}
@media (min-width:900px){.prose h2{font-size:26px;margin-top:38px}.prose p,.prose li{font-size:17px}}

/* ---------- 404 ---------- */
.nf{text-align:center;padding:40px 0 20px}
.nf-code{font:600 64px/1 var(--ff-display);color:var(--red);letter-spacing:-.04em;font-variation-settings:"opsz" 144}
.nf h1{margin-top:10px}
.nf p{color:var(--text-2);margin-top:10px}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}

/* ---------- saved ---------- */
.saved-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 14px;font-size:14.5px;color:var(--muted)}
.saved-tools button{font:500 14.5px/1 var(--ff-ui);color:var(--red);padding:8px 0}
.skel{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.skel li{border-radius:16px;background:#fff;box-shadow:0 0 0 1px var(--hair);overflow:hidden}
.skel .ph{display:block;aspect-ratio:16/10;background:linear-gradient(100deg,#ECE9E1 30%,#F4F1EA 50%,#ECE9E1 70%) 0 0/300% 100%;animation:sk 1.4s linear infinite}
.skel .l{display:block;height:12px;margin:12px 13px 0;border-radius:6px;background:var(--soft-2)}
.skel .l:last-child{margin-bottom:14px;width:50%}
@media (min-width:900px){.skel{gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}}

@media print{
  .topbar,.footer-lite,.cmp-bar,.hc-heart,.ig,.teaser,.menu-sheet,.menu-bg{display:none!important}
  body{background:#fff;color:#000}
  main.main{max-width:none;padding:0}
  .hcard,.tile,.frame-card,.empty{box-shadow:none;border:1px solid #ccc}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}