/* ==========================================================================
   VMV Living — Forest & Stone
   Mobile first. The primary visitor arrives on a phone, from a link texted
   to them within a minute of a phone call.
   ========================================================================== */

:root{
  --ink:#1E3A2E;
  --ink-2:#3A6350;
  --ink-3:#5F6E62;
  --accent:#8A6D22;
  --ground:#FBFAF7;
  --panel:#F2F1EA;
  --card:#FFFFFF;
  --line:#E2E1D9;
  --line-2:#C9C8BD;
  --ok:#1F6B4A;
  --ok-bg:#E4EEE7;

  --f-disp:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Public Sans","Helvetica Neue",Arial,sans-serif;

  --wrap:1080px;
  --r:6px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
.site-head{background:var(--card);border-bottom:1px solid var(--line)}
/* Logo, phone and nav are three independent flex items so they can reflow
   sensibly on a phone: logo and phone share the top row, nav takes the second.
   Previously the logo sat alone on a row with a large dead area beside it. */
/* Logo on the left; nav and phone stacked on the right. On a phone the two
   right-hand items stack vertically so nothing sits on a row of its own. */
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px 18px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{height:46px;width:auto}
.brand-text{font-family:var(--f-disp);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;color:var(--ink)}
.head-right{display:flex;align-items:center;gap:18px}
.nav{display:flex;gap:16px}
.nav a{font-size:.9rem;text-decoration:none;color:var(--ink-2);font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline}
.head-phone{font-size:.92rem;font-weight:600;text-decoration:none;white-space:nowrap}
.head-meta{display:flex;align-items:center;gap:14px}
/* Quiet by default — a visitor who needs it will look for it, and one who
   does not should not have it competing with the phone number. */
.lang-toggle{font-size:.82rem;font-weight:600;text-decoration:none;color:var(--ink-2);
             white-space:nowrap;padding:3px 9px;border:1px solid var(--line-2);border-radius:20px}
.lang-toggle:hover{color:var(--ink);border-color:var(--ink);background:var(--panel)}

/* ---------- masthead ----------
   No photograph. Six listing cards sit directly below, each already showing a
   home, so a seventh photo at the top said nothing and only pushed the
   inventory further down the page. A prospect arrives here from a phone call
   wanting to see what is available; the fastest route to that is the design.
   The band states who we are, and then gets out of the way. */
.masthead{background:var(--ink);color:#fff;padding:clamp(30px,5vw,52px) 0}
.masthead h1{
  font-family:var(--f-disp);font-weight:600;color:#fff;margin:0;
  font-size:clamp(1.65rem,3.6vw,2.5rem);line-height:1.1;letter-spacing:-.015em;
  text-wrap:balance;max-width:20ch;
}
.masthead-sub{color:rgba(255,255,255,.82);margin:12px 0 0;max-width:46ch;
  font-size:clamp(.94rem,1.5vw,1.05rem);line-height:1.5}

/* ---------- sections ---------- */
main{padding-bottom:64px}
.section{padding:38px 0 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
h2{font-family:var(--f-disp);font-weight:600;font-size:clamp(1.35rem,3.4vw,1.9rem);
   letter-spacing:-.015em;margin:0 0 14px;line-height:1.15}
.section-head h2{margin-bottom:0}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
         color:var(--accent);margin:0 0 8px}
.lede{font-size:1.03rem;color:var(--ink-2);max-width:62ch;margin:0 0 24px}
p{margin:0 0 14px;max-width:68ch}

/* ---------- listing cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
      overflow:hidden;display:flex;flex-direction:column}
.card.is-hidden{display:none}

/* --- photo carousel ---
   scroll-snap gives real swipe on touch with no JS; the arrows and counter
   are progressive enhancement for pointer users. */
.card-media{position:relative;background:var(--panel)}
.frames{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
        scrollbar-width:none;-ms-overflow-style:none;aspect-ratio:4/3}
.frames::-webkit-scrollbar{display:none}
.frames:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.frame{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;
       scroll-snap-stop:always}
.frame.placeholder{display:flex;align-items:center;justify-content:center;background:var(--panel)}
.frame.placeholder svg{opacity:.28}

.cbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
      width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;
      border:none;border-radius:50%;cursor:pointer;
      background:rgba(255,255,255,.86);color:#3C4A40;
      box-shadow:0 1px 4px rgba(0,0,0,.22);
      opacity:0;transition:opacity .15s ease}
.cbtn svg{width:19px;height:19px}
.cbtn.prev{left:8px}
.cbtn.next{right:8px}
.cbtn:hover{background:#fff;color:var(--ink)}
.card-media:hover .cbtn,.cbtn:focus-visible{opacity:1}
.cbtn[disabled]{opacity:0!important;pointer-events:none}
@media (hover:none){ .cbtn{opacity:.92} }   /* touch: keep them visible */

.ccount{position:absolute;right:9px;bottom:9px;z-index:2;
        font-size:.68rem;font-weight:600;letter-spacing:.04em;
        color:#fff;background:rgba(22,32,26,.62);
        padding:3px 8px;border-radius:20px;font-variant-numeric:tabular-nums}

.card-body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-addr{font-family:var(--f-disp);font-size:1.08rem;font-weight:600;letter-spacing:-.01em;margin:0}
.card-spec{font-size:.85rem;color:var(--ink-3);margin:0}
.card-rent{font-size:1rem;font-weight:700;margin:2px 0 0}
.card-actions{margin-top:auto;padding-top:12px}

.badge{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.09em;
       text-transform:uppercase;padding:3px 8px;border-radius:3px;
       background:var(--ok-bg);color:var(--ok)}
.badge.soon{background:#F3EEDD;color:#7A5F16}

.btn{display:inline-block;width:100%;text-align:center;background:var(--ink);color:#fff;
     text-decoration:none;font-weight:600;font-size:.88rem;padding:11px 14px;
     border-radius:4px;border:1px solid var(--ink);cursor:pointer}
.btn:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-quiet:hover{background:var(--panel);color:var(--ink)}
.btn-auto{width:auto;padding:11px 22px}

/* ---------- sort & filter ---------- */
.controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
          background:var(--card);border:1px solid var(--line);border-radius:var(--r);
          padding:14px 16px;margin-bottom:20px}
.controls .ctl{display:flex;flex-direction:column;gap:5px}
.controls label{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.controls select{padding:8px 11px;font:inherit;font-size:.88rem;color:var(--ink);
                 background:var(--ground);border:1px solid var(--line-2);border-radius:4px;min-width:150px}
.controls .count{margin-left:auto;font-size:.85rem;color:var(--ink-3);padding-bottom:9px}
.controls .reset{background:none;border:none;padding:0 0 9px;font:inherit;font-size:.82rem;
                 color:var(--ink-2);text-decoration:underline;cursor:pointer}
.no-results{display:none;background:var(--card);border:1px dashed var(--line-2);
            border-radius:var(--r);padding:26px 20px;text-align:center;color:var(--ink-2)}
.no-results.show{display:block}

/* ---------- map ---------- */
.map-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel)}
#map{height:clamp(300px,45vw,440px);width:100%}
.map-wrap{margin-top:4px}
.map-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin:14px 0 0;padding:0;list-style:none;
         font-size:.84rem;color:var(--ink-3)}
.map-key li{display:flex;align-items:center;gap:8px}
.map-key .dot{width:13px;height:13px;border-radius:50%;flex:none;border:2px solid #fff;
              box-shadow:0 0 0 1px var(--line-2)}
.map-key .dot.now{background:var(--ink)}
.map-key .dot.soon{background:var(--accent);opacity:.55}
.leaflet-container{font-family:var(--f-body)}
/* Wider than a plain number pin so "4BR" fits without crowding the border. */
.pin{display:flex;align-items:center;justify-content:center;
     width:38px;height:38px;border-radius:50% 50% 50% 5px;transform:rotate(-45deg);
     background:var(--ink);border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.32)}
.pin span{transform:rotate(45deg);color:#fff;font-size:.68rem;font-weight:700;
          letter-spacing:-.02em;white-space:nowrap}
.pin.soon{background:var(--accent)}
.pop{font-family:var(--f-body);min-width:150px}
.pop b{font-family:var(--f-disp);font-size:.98rem;display:block;margin-bottom:3px}
.pop .s{font-size:.78rem;color:var(--ink-3);display:block;margin-bottom:5px}
.pop .r{font-weight:700;font-size:.88rem}
.pop a{display:inline-block;margin-top:7px;font-size:.8rem;font-weight:600;color:var(--ink)}

/* ---------- panels & trust ---------- */
.panel{background:var(--panel);border-radius:var(--r);padding:26px 24px;margin-top:34px}
.panel .trust{margin-top:18px}
/* centred panel: keep the copy and the buttons on the same axis */
.panel.center p{margin-left:auto;margin-right:auto}
.panel.center .btn{margin:6px 4px 0}
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;margin:0;padding:0;list-style:none}
.trust li{font-size:.93rem;color:var(--ink-2);padding-left:26px;position:relative}
.trust li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

/* ---------- steps ---------- */
.steps{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--ink);
          border-radius:var(--r);padding:14px 16px;counter-increment:s}
.steps{gap:14px}
.steps h3{margin:0 0 5px;font-size:1rem;font-family:var(--f-disp);font-weight:600}
.steps li{padding:16px 18px}
.steps h3::before{content:attr(data-step) " " counter(s) " — ";color:var(--accent);font-family:var(--f-body);
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:3px}
.steps p{margin:0;font-size:.9rem;color:var(--ink-2);max-width:none}

/* ---------- empty state ---------- */
.empty{background:var(--card);border:1px dashed var(--line-2);border-radius:var(--r);
       padding:28px 22px;text-align:center}
.empty h3{font-family:var(--f-disp);font-weight:600;margin:0 0 6px;font-size:1.15rem}
.empty p{margin:0 auto;color:var(--ink-2);max-width:46ch}

/* ---------- forms ---------- */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.82rem;font-weight:600;margin-bottom:5px}
.field .hint{font-weight:400;color:var(--ink-3)}
.field input,.field select,.field textarea{
  width:100%;padding:10px 12px;font:inherit;font-size:.95rem;color:var(--ink);
  background:var(--ground);border:1px solid var(--line-2);border-radius:4px}
.field textarea{min-height:96px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.82rem;color:var(--ink-3);margin:14px 0 0}
.errors{background:#F6E4E1;border:1px solid #C08B82;color:#7E2A26;border-radius:4px;
        padding:12px 14px;margin-bottom:16px;font-size:.9rem}
.errors ul{margin:6px 0 0;padding-left:1.1em}

/* Centred button pair on the closing panels. */
.panel.center .center-p{margin-left:auto;margin-right:auto}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}

/* ---------- utilities table ---------- */
.util{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.util-row{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
          padding:15px 18px;border-bottom:1px solid var(--line)}
.util-row:last-child{border-bottom:none}
.util-what{flex:1 1 260px;display:flex;flex-direction:column;gap:2px}
.util-what strong{font-weight:600}
.util-what span{font-size:.83rem;color:var(--ink-3)}
.util-who{flex:0 1 auto;font-size:.92rem;font-weight:600}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#D8E2DA;margin-top:56px;padding:34px 0 30px}
.site-foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.foot-grid h4{font-family:var(--f-disp);font-size:.98rem;font-weight:600;color:#fff;margin:0 0 8px}
.foot-grid p,.foot-grid li{font-size:.88rem;margin:0 0 5px;color:#C3D2C8}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;
            font-size:.78rem;color:#9DB2A4;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.eho{display:flex;align-items:center;gap:8px}
.eho svg{flex:none}

/* ---------- utility ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
.center{text-align:center}
.mt{margin-top:26px}

@media (max-width:600px){
  .wrap{padding:0 15px}
  /* Nav and phone stack on the right, aligned to the right edge, so the logo
     keeps the left and nothing occupies a row by itself. */
  .site-head .wrap{min-height:0;padding-top:12px;padding-bottom:12px}
  .head-right{flex-direction:column;align-items:flex-end;gap:6px}
  .head-meta{gap:10px}
  .lang-toggle{font-size:.76rem;padding:2px 8px}
  .nav{gap:16px}
  .nav a{font-size:.88rem}
  .head-phone{font-size:.9rem}
  .brand img{height:44px}
  .row2{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}