:root{
    --ground:#F7F4ED; --surface:#FFFFFF; --sunk:#EFEBE1;
    --ink:#14201B; --soft:#4A5852; --faint:#75837C;
    --rule:#DDD7C9; --firm:#C3BCAC;
    --ember:#B4551F; --ember-bg:#F6E7DB; --sage:#6E8A6B;
    --good:#3F7A4F;
    --display:"Source Serif 4",Georgia,"Times New Roman",serif;
    --body:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --shadow:0 1px 2px rgba(20,32,27,.06),0 4px 14px rgba(20,32,27,.05);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#0F1613; --surface:#17211D; --sunk:#121A17;
      --ink:#EDEAE1; --soft:#AFBAB3; --faint:#7E8C85;
      --rule:#2A3831; --firm:#3C4C44;
      --ember:#E08348; --ember-bg:#2E211A; --sage:#93AE8B;
      --good:#6FAE79;
      --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0F1613; --surface:#17211D; --sunk:#121A17;
    --ink:#EDEAE1; --soft:#AFBAB3; --faint:#7E8C85;
    --rule:#2A3831; --firm:#3C4C44;
    --ember:#E08348; --ember-bg:#2E211A; --sage:#93AE8B;
    --good:#6FAE79;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
  *{box-sizing:border-box}
  body{background:var(--ground);color:var(--ink);font-family:var(--body);
       font-size:15.5px;line-height:1.55;margin:0;padding:0;-webkit-font-smoothing:antialiased}

  /* ---------- header ---------- */
  header.top{background:var(--surface);border-bottom:1px solid var(--rule);
    position:sticky;top:0;z-index:600}
  .top-in{max-width:1180px;margin:0 auto;padding:12px 20px;
    display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
  .brand img{display:block;height:42px;width:auto}
  /* the logo art is dark green on transparent — lift it on dark grounds */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1) sepia(.2)}
  }
  :root[data-theme="dark"] .brand img{filter:brightness(0) invert(1) sepia(.2)}
  @media (max-width:560px){ .brand img{height:32px} }
  .top-spacer{flex:1}
  .ghost{font-size:13px;color:var(--soft);text-decoration:none;
    border:1px solid var(--firm);padding:7px 14px;border-radius:2px;white-space:nowrap}
  .ghost:hover{border-color:var(--ember);color:var(--ember)}

  /* ---------- layout ---------- */
  .shell{max-width:1180px;margin:0 auto;padding:0 20px;
    display:grid;grid-template-columns:1fr 420px;gap:26px;align-items:start}
  .results{padding-block:20px 60px;min-width:0}
  .mapwrap{position:sticky;top:132px;padding-block:20px}
  #map{height:calc(100vh - 200px);min-height:420px;border:1px solid var(--rule);
    border-radius:3px;background:var(--sunk)}

  .resbar{display:flex;justify-content:space-between;align-items:baseline;
    gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .count{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.01em}
  .count em{font-style:normal;color:var(--ember)}
  .sortsel{font-family:var(--body);font-size:13px;padding:6px 10px;
    border:1px solid var(--firm);background:var(--surface);color:var(--soft);border-radius:2px}

  .widened{background:var(--ember-bg);border:1px solid var(--rule);
    padding:11px 14px;font-size:13.5px;color:var(--soft);margin-bottom:16px;border-radius:2px}
  .widened b{color:var(--ink)}

  /* ---------- cards ---------- */
  .cards{display:flex;flex-direction:column;gap:12px}
  .card{display:grid;grid-template-columns:186px 1fr;gap:0;
    background:var(--surface);border:1px solid var(--rule);border-radius:3px;
    overflow:hidden;box-shadow:var(--shadow);cursor:pointer;
    transition:border-color .14s,transform .14s}
  .card:hover{border-color:var(--firm);transform:translateY(-1px)}
  .card.promo{border-color:var(--ember);border-width:1.5px}

  /* photo placeholder - license gated */
  .ph{position:relative;background:var(--sunk);border-right:1px solid var(--rule);
    min-height:142px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:7px;padding:12px;text-align:center}
  .ph svg{opacity:.34}
  .ph-txt{font-size:10.5px;line-height:1.35;color:var(--faint);letter-spacing:.02em}
  .ph-cnt{position:absolute;top:7px;left:7px;background:var(--surface);
    border:1px solid var(--rule);font-size:10px;font-weight:600;color:var(--soft);
    padding:2px 6px;border-radius:2px;z-index:2}
  .ph.has-img{padding:0;gap:0}
  .ph.has-img img{width:100%;height:100%;min-height:142px;
    object-fit:cover;display:block}

  .body{padding:13px 15px;display:flex;flex-direction:column;min-width:0}
  .ctop{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
  .cname{font-family:var(--display);font-size:17.5px;font-weight:600;
    letter-spacing:-.012em;line-height:1.2;margin:0}
  .badge{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ember);border:1px solid var(--ember);padding:1.5px 5px;border-radius:2px;
    white-space:nowrap;margin-left:7px;vertical-align:2px}
  .cmeta{font-size:12.5px;color:var(--faint);margin-top:3px}
  .cmeta b{color:var(--soft);font-weight:500}
  .cam{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
  .am{font-size:11px;color:var(--soft);background:var(--sunk);
    border:1px solid var(--rule);padding:2px 7px;border-radius:2px}
  .cbot{margin-top:auto;padding-top:10px;display:flex;
    justify-content:space-between;align-items:flex-end;gap:12px}
  .price{text-align:right;white-space:nowrap}
  .price .val{font-family:var(--display);font-size:17px;font-weight:600;
    color:var(--ink);display:block;line-height:1.15}
  .price .unit{font-size:11px;color:var(--faint);display:block;margin-top:1px}
  .price .none{font-size:11.5px;color:var(--faint);font-style:italic;line-height:1.3;
    display:block;max-width:104px}
  .cta{background:var(--sage);color:#fff;border:none;font-family:var(--body);
    font-size:13px;font-weight:600;padding:7px 15px;border-radius:2px;
    text-decoration:none;display:inline-block}
  .cta:hover{filter:brightness(1.08)}

  .divider{display:flex;align-items:center;gap:12px;margin:18px 0 12px}
  .divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}
  .divider span{font-size:10.5px;font-weight:600;letter-spacing:.11em;
    text-transform:uppercase;color:var(--faint)}

  .empty{padding:40px 20px;text-align:center;color:var(--faint);
    border:1px dashed var(--firm);border-radius:3px}

  /* ---------- notice ---------- */
  .notice{max-width:1180px;margin:0 auto;padding:12px 20px 0}
  .notice-in{background:var(--ember-bg);border:1px solid var(--rule);
    border-left:3px solid var(--ember);padding:11px 15px;font-size:12.5px;
    color:var(--soft);border-radius:2px}
  .notice-in b{color:var(--ink)}

  /* ---- map popup card ---- */
  .mapcard-popup .leaflet-popup-content-wrapper{
    background:var(--surface);color:var(--ink);
    border:1px solid var(--rule);border-radius:4px;
    box-shadow:0 4px 18px rgba(20,32,27,.18);padding:0;overflow:hidden}
  .mapcard-popup .leaflet-popup-content{margin:0;width:232px!important;
    font-family:var(--body);line-height:1.4}
  .mapcard-popup .leaflet-popup-tip{background:var(--surface);
    border:1px solid var(--rule)}
  .mapcard-popup a.leaflet-popup-close-button{
    top:8px;right:8px;width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    font:400 18px/1 var(--body);color:#14201B;
    background:rgba(255,255,255,.92);border-radius:50%;
    box-shadow:0 1px 4px rgba(20,32,27,.25);padding:0}
  .mapcard-popup a.leaflet-popup-close-button:hover{
    background:#fff;color:#000}

  .mapcard{display:block;text-decoration:none;color:inherit}
  .mapcard:hover .mc-name{color:var(--ember)}
  .mc-img{position:relative;height:112px;background:var(--sunk);
    border-bottom:1px solid var(--rule)}
  .mc-img img{width:100%;height:100%;object-fit:cover;display:block}
  .mc-noimg{width:100%;height:100%;display:flex;align-items:center;
    justify-content:center;color:var(--faint)}
  .mc-badge{position:absolute;top:6px;left:6px;background:var(--ember);
    color:#fff;font-size:9px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;padding:2px 6px;border-radius:2px}
  .mc-body{padding:10px 12px 12px}
  .mc-name{font-family:var(--display);font-size:15.5px;font-weight:600;
    letter-spacing:-.01em;line-height:1.2;margin-bottom:3px}
  .mc-meta{font-size:11.5px;color:var(--faint)}
  .mc-price{margin-top:7px;padding-top:7px;border-top:1px solid var(--rule)}
  .mc-price b{font-family:var(--display);font-size:16px;font-weight:600;
    color:var(--ink)}
  .mc-unit{font-size:11px;color:var(--faint);margin-left:4px}
  .mc-noprice{font-size:11.5px;color:var(--faint);font-style:italic}

  /* result row highlighted while its popup is open */
  .card.is-active{border-color:var(--ember);
    box-shadow:0 0 0 2px var(--ember-bg),var(--shadow)}

  @media (max-width:980px){
    .shell{grid-template-columns:1fr}
    .mapwrap{position:static;order:-1;padding-block:16px 0}
    #map{height:280px;min-height:0}
  }
  @media (max-width:560px){
    .card{grid-template-columns:1fr}
    .ph{min-height:128px;border-right:none;border-bottom:1px solid var(--rule)}
    #f-place{width:100%}
    .field{flex:1 1 100%}
    .sb-in{gap:8px}
  }

  /* google rating */
  .grat{color:var(--ember);font-weight:600}
  .gcnt{color:var(--faint)}

  /* ---------- category pages ---------- */
  .catnav{background:var(--surface);border-bottom:1px solid var(--rule)}
  .catnav-in{max-width:1180px;margin:0 auto;padding:0 20px;
    display:flex;gap:2px;flex-wrap:wrap}
  .catnav a{font-size:13.5px;color:var(--soft);text-decoration:none;
    padding:11px 14px;border-bottom:2px solid transparent}
  .catnav a:hover{color:var(--ember);border-bottom-color:var(--ember)}
  .cat{max-width:1180px;margin:0 auto;padding:24px 20px 70px}
  .crumb{font-size:12.5px;color:var(--faint);margin:0 0 14px}
  .crumb a{color:var(--faint)}
  .cat-h1{font-family:var(--display);font-size:clamp(28px,5vw,42px);
    font-weight:600;letter-spacing:-.022em;line-height:1.06;margin:0 0 12px;
    text-wrap:balance}
  .cat-intro{font-size:17px;color:var(--soft);margin:0 0 6px;max-width:62ch}
  .cat-intro strong{color:var(--ink)}
  .cat-sub{font-size:14.5px;color:var(--faint);margin:0 0 24px;max-width:62ch}
  .card:has(.cardlink){display:block}
  .cardlink{display:grid;grid-template-columns:186px 1fr;
    text-decoration:none;color:inherit;min-width:0}
  .cardlink .body{min-width:0}
  .cadd{font-size:11.5px;color:var(--faint);margin-top:3px}
  .faq{margin-top:46px;max-width:70ch}
  .faq h2,.links h2{font-family:var(--display);font-size:22px;font-weight:600;
    letter-spacing:-.012em;margin:0 0 14px}
  .faq details{border-bottom:1px solid var(--rule);padding:12px 0}
  .faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"+ ";color:var(--ember);font-weight:700}
  .faq details[open] summary::before{content:"− "}
  .faq p{margin:9px 0 0;color:var(--soft);font-size:14.5px}
  .links{margin-top:46px}
  .linkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
    gap:1px;background:var(--rule);border:1px solid var(--rule)}
  .linkgrid a{background:var(--surface);padding:12px 15px;font-size:14px;
    color:var(--soft);text-decoration:none}
  .linkgrid a:hover{color:var(--ember)}
  .linkgrid a span{color:var(--faint);font-size:12.5px}
  .cat-footer{border-top:1px solid var(--rule);padding:22px 20px 60px;
    text-align:center;font-size:14px}
  @media(max-width:560px){.cardlink{grid-template-columns:1fr}}
  .widened.err{background:var(--sunk);border-color:var(--firm)}
  .widened .sug{color:var(--ember);font-weight:600;text-decoration:underline;
    text-underline-offset:2px;cursor:pointer}

  /* ---------- place autocomplete ---------- */
  .ac-wrap{position:relative}
  .ac-list{position:absolute;top:calc(100% + 3px);left:0;right:0;z-index:700;
    margin:0;padding:4px 0;list-style:none;background:var(--surface);
    border:1px solid var(--firm);border-radius:3px;
    box-shadow:0 6px 20px rgba(20,32,27,.16);max-height:280px;overflow-y:auto}
  .ac-list li{padding:8px 12px;font-size:14px;cursor:pointer;
    display:flex;justify-content:space-between;align-items:baseline;gap:10px}
  .ac-list li:hover,.ac-list li[aria-selected="true"]{background:var(--sunk)}
  .ac-list li .ac-kind{font-size:11px;color:var(--faint);white-space:nowrap}
  .ac-list li mark{background:none;color:var(--ember);font-weight:600}
  .ac-empty{padding:9px 12px;font-size:13px;color:var(--faint);font-style:italic}

  /* ================================================== hero + search */
  .hero{position:relative;isolation:isolate;overflow:hidden}
  .hero-img{position:absolute;inset:0;z-index:-2}
  .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(105deg,rgba(18,26,22,.72) 0%,rgba(18,26,22,.42) 42%,rgba(18,26,22,.14) 72%,rgba(18,26,22,.3) 100%)}
  .hero-in{max-width:1180px;margin:0 auto;padding:44px 20px 30px;
    display:flex;flex-direction:column;gap:22px}
  .hero-copy h1{font-family:var(--display);font-weight:600;color:#fff;
    font-size:clamp(28px,4.4vw,44px);line-height:1.04;letter-spacing:-.022em;
    margin:0 0 7px;text-shadow:0 2px 18px rgba(0,0,0,.35);text-wrap:balance}
  .hero-copy p{margin:0;color:rgba(255,255,255,.9);font-size:clamp(14px,1.7vw,17px);
    text-shadow:0 1px 10px rgba(0,0,0,.35)}

  .sbar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;
    background:var(--surface);border-radius:14px;padding:9px;
    box-shadow:0 8px 30px rgba(20,32,27,.22),0 2px 6px rgba(20,32,27,.12)}
  .sfield{flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:10px;
    padding:9px 13px;border-radius:10px;background:var(--surface);
    border:1px solid var(--rule);position:relative;transition:border-color .14s}
  .sfield:focus-within{border-color:var(--ember)}
  .sfield-sm{flex:0 1 128px}
  .sicon{width:19px;height:19px;flex-shrink:0;color:var(--ember)}
  .sfield-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
  .sfield-body label{font-size:10.5px;font-weight:600;letter-spacing:.09em;
    text-transform:uppercase;color:var(--faint);display:flex;
    justify-content:space-between;gap:8px;align-items:baseline}
  .sfield-body input[type=text],.sfield-body input:not([type=range]){
    font-family:var(--body);font-size:15px;font-weight:500;color:var(--ink);
    border:none;background:none;padding:0;width:100%;min-width:0;outline:none}
  .sfield-body input::placeholder{color:var(--faint);font-weight:400}
  .sclear{border:none;background:none;color:var(--faint);cursor:pointer;
    padding:4px;display:none;flex-shrink:0;border-radius:50%}
  .sclear:hover{color:var(--ink);background:var(--sunk)}
  .ac-wrap:focus-within .sclear,.sclear.show{display:block}
  #f-radius-out{font-family:var(--display);font-size:12.5px;font-weight:600;
    color:var(--ember);letter-spacing:0;text-transform:none}

  .sgo{flex:0 0 auto;display:flex;align-items:center;gap:8px;
    background:var(--ember);color:#fff;border:none;border-radius:10px;
    font-family:var(--body);font-weight:600;font-size:15.5px;padding:0 26px;
    cursor:pointer;transition:filter .14s}
  .sgo:hover{filter:brightness(1.08)}

  /* ---------- amenity chips ---------- */
  .chips-wrap{background:var(--surface);border-bottom:1px solid var(--rule)}
  .chips{max-width:1180px;margin:0 auto;padding:13px 20px;
    display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .chip{display:inline-flex;align-items:center;gap:7px;
    font-family:var(--body);font-size:13.5px;font-weight:500;
    padding:8px 15px;border:1px solid var(--rule);background:var(--surface);
    color:var(--soft);border-radius:999px;cursor:pointer;
    transition:border-color .14s,background .14s,color .14s;white-space:nowrap}
  .chip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;
    flex-shrink:0;opacity:.75}
  .chip:hover{border-color:var(--firm);color:var(--ink)}
  .chip[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
  .chip[aria-pressed="true"] svg{opacity:1}

  /* ---------- sort control ---------- */
  .sortwrap{display:flex;align-items:center;gap:7px;color:var(--faint);
    border:1px solid var(--rule);border-radius:999px;padding:5px 14px 5px 13px;
    background:var(--surface)}
  .sortwrap svg{flex-shrink:0}
  .sortsel{border:none;background:none;padding:0;color:var(--soft);
    font-family:var(--body);font-size:13.5px;cursor:pointer;outline:none}

  /* ---------- map price pins ---------- */
  .pin-price{background:var(--surface);border:1.5px solid var(--firm);
    color:var(--ink);font-family:var(--body);font-weight:700;font-size:12.5px;
    padding:4px 9px;border-radius:999px;white-space:nowrap;
    box-shadow:0 2px 8px rgba(20,32,27,.2);cursor:pointer;
    transition:transform .12s,background .12s,border-color .12s;
    font-variant-numeric:tabular-nums}
  .pin-price:hover,.pin-price.is-hot{background:var(--ember);border-color:var(--ember);
    color:#fff;transform:scale(1.08);z-index:600}
  .pin-price.promo{border-color:var(--ember);color:var(--ember)}
  .pin-price.promo:hover{color:#fff}
  .leaflet-marker-icon.pin-wrap{background:none;border:none}

  /* ---------- trust row ---------- */
  .trust{border-top:1px solid var(--rule);background:var(--surface)}
  .trust-in{max-width:1180px;margin:0 auto;padding:22px 20px 26px;
    display:flex;gap:30px;align-items:center;flex-wrap:wrap}
  .trust-item{display:flex;align-items:center;gap:11px;flex:1 1 230px}
  .trust-item svg{width:24px;height:24px;flex-shrink:0;color:var(--sage)}
  .trust-item b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.3}
  .trust-item span{display:block;font-size:12.5px;color:var(--faint);line-height:1.35}
  .trust-tag{font-family:var(--display);font-style:italic;font-size:15px;
    color:var(--ember);white-space:nowrap}

  /* ---------- favourite ---------- */
  .fav{position:absolute;left:10px;bottom:10px;z-index:3;
    width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.92);color:#4A5852;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 1px 5px rgba(20,32,27,.24);transition:transform .12s,color .12s}
  .fav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
  .fav:hover{transform:scale(1.1)}
  .fav[aria-pressed="true"]{color:var(--ember)}
  .fav[aria-pressed="true"] svg{fill:var(--ember)}

  @media (max-width:820px){
    .sbar{flex-direction:column}
    .sfield,.sfield-sm{flex:1 1 auto}
    .sgo{padding:13px;justify-content:center}
    .hero-in{padding:30px 20px 24px}
    .trust-tag{display:none}
  }
  .card{position:relative}
  .cbot .cta{background:var(--ember);border-radius:8px;padding:9px 18px;
    font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px}
  .cbot .cta:hover{filter:brightness(1.08)}
  .price .val{font-size:26px}