/* ==================================================================
   The header and the footer, on every public page.

   Loaded beside home.css, form.css or site.css, whichever the page uses.
   Every class and every colour here starts vh-, so nothing those three
   sheets say about .head, .wrap, a or button can reach the header, and
   nothing here can reach the page underneath it. That is what lets one
   header sit on three pages that were each drawn with their own.

   The palette is the approved preview's, written out again under names
   of its own for the same reason.
   ================================================================== */

.vh,.vh-foot,.v-veil,.v-flyer,.v-spark{
  --vh-paper:#FFFFFF; --vh-ground:#E9F1FA; --vh-ink:#0A2440; --vh-navy:#00447E;
  --vh-navy-2:#1A5FA0; --vh-navy-deep:#032F58; --vh-mid:#4B5F77; --vh-soft:#8296AC;
  --vh-line:#CBDCED; --vh-line-2:#E2EDF8; --vh-live-wash:#E6F0FA;
  --vh-gold:#D69A2C; --vh-gold-lt:#F0B03C; --vh-gold-deep:#B58121; --vh-gold-ink:#8A6614;
  --vh-hot:#B02A2A;
  --vh-display:"Newsreader",Georgia,"Times New Roman",serif;
  --vh-body:"IBM Plex Sans","Segoe UI",Arial,system-ui,sans-serif;
  --vh-data:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-family:var(--vh-body);line-height:1.5;-webkit-font-smoothing:antialiased;box-sizing:border-box
}
.vh *,.vh-foot *{box-sizing:border-box}
.vh a,.vh-foot a{color:inherit;text-decoration:none}
.vh button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;margin:0}
.vh form{margin:0}
.vh img,.vh-foot img{display:block;max-width:100%;height:auto}
.vh :focus-visible,.vh-foot :focus-visible{outline:2px solid var(--vh-gold);outline-offset:3px}
.vh .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.vh-wrap{max-width:1280px;margin:0 auto;padding:0 clamp(16px,1.9vw,40px)}

/* ------------------------------------------------------------------ bar */
.vh{position:sticky;top:0;z-index:60;background:var(--vh-paper);border-bottom:1px solid var(--vh-line);
  color:var(--vh-ink);box-shadow:0 6px 18px -16px rgba(8,30,54,.5)}
.vh-bar{display:flex;align-items:center;gap:clamp(10px,1.2vw,20px);min-height:72px}
.vh-logo{display:flex;align-items:center;gap:10px;flex:none}
.vh-logo img{height:48px;width:auto}
.vh-words{line-height:1.1}
.vh-words b{display:block;font-family:var(--vh-display);font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--vh-navy)}
.vh-words span{display:block;font-family:var(--vh-data);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--vh-gold-ink)}

.vh-nav{display:flex;align-items:center;gap:2px}
.vh-top{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:500;color:var(--vh-ink);
  padding:9px 11px;border-radius:7px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.vh-top:hover{background:var(--vh-line-2);color:var(--vh-navy)}}
.vh-top[aria-current="page"]{color:var(--vh-navy);background:var(--vh-live-wash)}
.vh-caret{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;flex:none}
.vh-phone-only{display:none}
/* a Home tab and an icon on every tab (owner, 11 October 2026); the header
   is 1440 wide so they fit, and the icons step aside below 1180 */
.vh .vh-wrap.vh-bar{max-width:1440px}
.vh-top .ic{width:16px;height:16px;flex:none;fill:none;stroke:var(--vh-gold-deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vh-top[aria-current="page"] .ic{stroke:var(--vh-navy)}

/* ------------------------------------------------------------ the menus
   Open on hover with a mouse, on focus with a keyboard, and on a tap once
   chrome.js has marked the drop as open. */
.vh-drop{position:relative}
.vh-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:270px;background:var(--vh-paper);
  border:1px solid var(--vh-line);border-radius:10px;box-shadow:0 18px 40px rgba(10,36,64,.16);
  padding:7px;display:none;z-index:70}
.vh-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.vh-menu.vh-right{left:auto;right:0}
.vh-menu-cols{display:none;grid-template-columns:1fr 1fr;min-width:420px}
.vh-drop:focus-within>.vh-menu,.vh-drop.vh-open>.vh-menu{display:block}
.vh-drop:focus-within>.vh-menu-cols,.vh-drop.vh-open>.vh-menu-cols{display:grid}
@media (hover:hover) and (pointer:fine){.vh-drop:hover>.vh-menu{display:block}}
@media (hover:hover) and (pointer:fine){.vh-drop:hover>.vh-menu-cols{display:grid}}
.vh-menu a,.vh-menu button{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:7px;font-size:14px;color:var(--vh-ink)}
.vh-menu b{font-weight:600;display:block}
.vh-menu small{display:block;color:var(--vh-soft);font-size:11.8px;line-height:1.35;margin-top:1px}
@media (hover:hover) and (pointer:fine){.vh-menu a:hover,.vh-menu button:hover{background:var(--vh-ground);color:var(--vh-navy)}}
.vh-menu .vh-all{border-top:1px solid var(--vh-line-2);margin-top:4px;padding-top:11px;grid-column:1/-1}

/* -------------------------------------------------------- the right side */
.vh-acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.vh-call{display:flex;align-items:center;gap:7px;font-family:var(--vh-data);font-size:13.5px;font-weight:600;
  color:var(--vh-navy);white-space:nowrap;padding:0 4px}
.vh-call svg{width:15px;height:15px;fill:none;stroke:var(--vh-gold-deep);stroke-width:1.8;flex:none}
@media (hover:hover) and (pointer:fine){.vh-call:hover{color:var(--vh-gold-ink)}}
.vh-icon{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--vh-line);
  border-radius:8px;background:var(--vh-paper);color:var(--vh-mid)}
.vh-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.vh-icon .vh-heart{stroke:var(--vh-hot)}
.vh-icon.vh-gold svg{stroke:var(--vh-gold-deep)}
@media (hover:hover) and (pointer:fine){.vh-icon:hover{border-color:var(--vh-navy-2)}}
.vh-cnt{position:absolute;top:-7px;right:-7px;font-family:var(--vh-data);font-size:10.5px;font-weight:600;
  background:var(--vh-navy);color:#fff;border-radius:99px;min-width:19px;height:19px;display:grid;
  place-items:center;padding:0 5px;border:2px solid var(--vh-paper)}
.vh-gold .vh-cnt{background:var(--vh-gold-deep)}
.vh-cnt.vh-hot{position:static;border:0;background:var(--vh-hot)}
.vh-btn{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 15px;border-radius:8px;
  font-size:13.8px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.vh-ghost{border-color:var(--vh-line);color:var(--vh-navy);background:var(--vh-paper)}
@media (hover:hover) and (pointer:fine){.vh-ghost:hover{background:var(--vh-live-wash);border-color:var(--vh-navy-2)}}
.vh-gold-btn{background:var(--vh-gold);border-color:var(--vh-gold-deep);color:#22190A}
@media (hover:hover) and (pointer:fine){.vh-gold-btn:hover{background:var(--vh-gold-lt)}}
.vh-avatar{width:24px;height:24px;border-radius:99px;background:var(--vh-navy);color:#fff;display:grid;
  place-items:center;font-size:12px;font-weight:600;flex:none}
.vh-account .vh-btn{padding:0 11px 0 8px}

.vh-menu-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex:none;
  border:1px solid var(--vh-line)!important;border-radius:8px;color:var(--vh-navy)!important;background:var(--vh-paper)!important}
.vh-bars{position:relative;display:block;width:20px;height:14px}
.vh-bars i{position:absolute;left:0;width:100%;height:2px;border-radius:1px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.vh-bars i:nth-child(1){top:0}
.vh-bars i:nth-child(2){top:6px}
.vh-bars i:nth-child(3){top:12px}
.vh.vh-menu-open .vh-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.vh.vh-menu-open .vh-bars i:nth-child(2){opacity:0}
.vh.vh-menu-open .vh-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Signed in, the phone's menu button is a pill: the initials, then the
   three lines (owner, 19 October 2026). The phone menu opens on the
   person's card. */
.vh-ini{width:30px;height:30px;border-radius:50%;background:var(--vh-navy);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.04em;display:grid;place-items:center;flex:none;line-height:1}
.vh-menu-btn.vh-me-btn{width:auto;height:40px;gap:8px;padding:0 11px 0 4px;border-radius:999px!important;position:relative}
.vh-me-btn .vh-bars{width:16px;height:12px}
.vh-me-btn .vh-bars i:nth-child(2){top:5px}
.vh-me-btn .vh-bars i:nth-child(3){top:10px}
.vh.vh-menu-open .vh-me-btn .vh-bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.vh.vh-menu-open .vh-me-btn .vh-bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.vh-me-btn .vh-cnt.vh-hot{position:absolute;top:-6px;right:-6px;border:2px solid var(--vh-paper)}
.vh-me-card{display:flex!important;gap:12px;align-items:center;margin:10px 16px 6px;padding:12px;border-radius:12px;
  background:var(--vh-live-wash);color:var(--vh-ink)}
.vh-me-card .vh-ini{width:42px;height:42px;font-size:15px}
.vh-me-card b{display:block;font-size:15px;font-weight:600}
.vh-me-card small{display:block;color:var(--vh-mid);font-size:12.5px}
.vh-n{margin-left:auto;font-family:var(--vh-data);font-size:11px;font-weight:600;background:#FAF1DC;color:var(--vh-gold-ink);
  border-radius:8px;padding:1px 8px}
.vh-phone-me .vh-top .ic{display:block}
.vh-phone-me button.vh-top{font-weight:500;color:var(--vh-ink)}
@media (max-width:374px){
  .vh-logo img{height:32px}
  .vh-bar{gap:6px}
  .vh-acts{gap:5px}
  .vh-icon{width:36px;height:36px}
  .vh-menu-btn.vh-me-btn{height:36px;gap:5px;padding:0 8px 0 3px}
  .vh-me-btn .vh-ini{width:28px;height:28px;font-size:11px}
}

/* ---------------------------------------------------------------- footer */
.vh-foot{background:var(--vh-navy-deep);color:#B6CFE6;padding:44px 0 0}
.vh-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr;gap:30px;padding-bottom:32px}
.vh-foot h2{font-family:var(--vh-display);font-weight:400;color:#fff;font-size:17px;margin:0 0 12px}
.vh-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:13.6px}
@media (hover:hover) and (pointer:fine){.vh-foot a:hover{color:var(--vh-gold-lt)}}
.vh-foot-mark{display:inline-block;background:#fff;border-radius:10px;padding:8px 12px}
.vh-foot-mark img{height:42px;width:auto}
.vh-about{font-size:13.4px;line-height:1.6;margin:14px 0 0;max-width:38ch}
.vh-end{border-top:1px solid #12385F;padding:16px 0;font-size:12.6px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;color:#8FADC9}

/* -------------------------------------------------------------- narrower
   The call number goes first, then the words beside the logo, then the
   whole nav folds behind the menu button with the account under it. */
@media (max-width:1499px){
  .vh-call span{display:none}
  .vh-call{width:40px;height:40px;justify-content:center;border:1px solid var(--vh-line);border-radius:8px}
}
/* room for six tabs as the screen narrows: the tab icons go first, then the
   phone number's words, then the name beside the account letter */
@media (max-width:1460px){.vh-top .ic{display:none}}
@media (max-width:1180px){.vh-me-name{display:none}}
@media (max-width:1120px){
  .vh-words{display:none}
  .vh-top{padding:9px 6px;font-size:14px}
}
@media (max-width:980px){
  .vh-cols{grid-template-columns:1fr 1fr}
  .vh-menu-btn{display:inline-flex}
  .vh-account,.vh-call{display:none}
  .vh-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:0;padding:4px 0 10px;background:var(--vh-paper);border-top:1px solid var(--vh-line);
    border-bottom:1px solid var(--vh-line);box-shadow:0 18px 30px -20px rgba(8,30,54,.45);
    max-height:calc(100vh - 72px);overflow-y:auto}
  .vh.vh-menu-open .vh-nav{display:flex}
  .vh-nav .vh-top{font-size:16px;padding:13px 16px;border-radius:0;border-bottom:1px solid var(--vh-line-2);width:100%;text-align:left}
  .vh-nav .vh-caret{margin-left:auto}
  .vh-nav .vh-top .ic{display:block;width:18px;height:18px}
  .vh-nav .vh-drop{position:static}
  .vh-nav .vh-menu,.vh-nav .vh-menu-cols{position:static;box-shadow:none;border:0;border-radius:0;min-width:0;
    padding:0 0 6px 16px;background:var(--vh-ground)}
  .vh-nav .vh-drop:focus-within>.vh-menu,.vh-nav .vh-drop:focus-within>.vh-menu-cols{display:none}
  .vh-nav .vh-drop.vh-open>.vh-menu{display:block}
  .vh-nav .vh-drop.vh-open>.vh-menu-cols{display:grid;grid-template-columns:1fr}
  .vh-nav .vh-menu::before{display:none}
  .vh-phone-only{display:block}
  .vh-grp{display:block;font-family:var(--vh-data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--vh-gold-ink);padding:16px 16px 6px;font-weight:600}
  .vh-call-row{color:var(--vh-navy)!important;font-family:var(--vh-data)}
  .vh-post-row{margin:12px 16px 4px;justify-content:center;width:auto!important;display:flex!important}
}
@media (hover:hover) and (pointer:fine) and (max-width:980px){.vh-nav .vh-drop:hover>.vh-menu,.vh-nav .vh-drop:hover>.vh-menu-cols{display:none}}
@media (max-width:980px){.vh-nav .vh-drop.vh-open>.vh-menu{display:block}.vh-nav .vh-drop.vh-open>.vh-menu-cols{display:grid;grid-template-columns:1fr}}
@media (max-width:560px){
  .vh-bar{min-height:62px;gap:8px}
  .vh-logo img{height:38px}
  .vh-acts>.vh-gold-btn{display:none}
  .vh-acts{gap:6px}
  .vh-cols{grid-template-columns:1fr}
  .vh-nav{max-height:calc(100vh - 62px)}
}
@media (prefers-reduced-motion:reduce){.vh *{transition:none!important}}

/* A map (Leaflet) draws its tiles and buttons on layers up to 1000, above the
   sticky header at 60, so a map scrolled under the header showed through it
   (owner, 10 October 2026). Each map now keeps its layers to itself. */
.leaflet-container{position:relative;z-index:0;isolation:isolate}

/* ---- a property saved (owner, 18 October 2026; marks.js) ----------------
   The header heart bounces and rings when a saved property lands in it, the
   count ticks up, and the first time a note says where favourites are. The
   v- classes are the flight and the sign in window, which sit on the page
   itself rather than in the header. */
.vh-icon::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--vh-hot);opacity:0;pointer-events:none}
.vh-icon.vh-gold::after{border-color:var(--vh-gold-deep)}
.vh-icon.vh-land{animation:vh-land .62s cubic-bezier(.3,1.6,.5,1)}
.vh-icon.vh-land::after{animation:vh-ring .7s ease-out}
.vh-icon:has(.vh-cnt) .vh-heart{fill:var(--vh-hot)}
@keyframes vh-land{0%{transform:scale(1)}30%{transform:scale(1.28)}60%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes vh-ring{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.vh-cnt.vh-tick{animation:vh-tick .45s ease-out}
@keyframes vh-tick{0%{transform:translateY(-6px) scale(1.3)}100%{transform:none}}
.vh-peek{position:absolute;z-index:70;width:max-content;max-width:min(260px,calc(100vw - 32px));transform:translate(-85%,-6px);
  background:var(--vh-ink);color:#fff;border-radius:10px;padding:9px 12px;font-size:13px;line-height:1.35;
  box-shadow:0 12px 30px rgba(10,36,64,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.vh-peek::before{content:"";position:absolute;top:-6px;left:85%;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:var(--vh-ink)}
.vh-peek b{display:block;font-weight:600}
.vh-peek a{color:var(--vh-gold-lt);font-weight:600;text-decoration:none}
.vh-peek.on{opacity:1;transform:translate(-85%,0);pointer-events:auto}

.v-flyer{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;
  pointer-events:none;z-index:1000;will-change:transform}
.v-flyer svg{width:18px;height:18px}
.v-flyer-h{background:var(--vh-hot);box-shadow:0 6px 16px rgba(176,42,42,.45)}
.v-flyer-h svg{fill:#fff;stroke:none}
.v-flyer-c{background:var(--vh-gold-deep);box-shadow:0 6px 16px rgba(181,129,33,.45)}
.v-flyer-c svg{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-spark{position:fixed;left:0;top:0;width:6px;height:6px;border-radius:50%;background:var(--vh-hot);pointer-events:none;z-index:999}
.v-pop{animation:v-pop .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes v-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}

.v-veil{position:fixed;inset:0;z-index:1200;background:rgba(10,36,64,.45);display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));animation:v-in .18s ease-out}
.v-sheet{position:relative;box-sizing:border-box;width:min(400px,100%);background:var(--vh-paper);color:var(--vh-ink);border-radius:16px;padding:22px;display:grid;gap:8px;
  box-shadow:0 24px 60px rgba(0,0,0,.3);font-family:var(--vh-body,inherit)}
.v-sheet h2{margin:0 30px 0 0;font-family:var(--vh-display,inherit);font-weight:500;font-size:23px;line-height:1.2}
.v-sheet>p{margin:0 0 6px;color:var(--vh-mid,#4B5F77);font-size:14px}
.v-sheet label{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--vh-mid,#4B5F77);margin-top:4px}
.v-sheet input{font:inherit;font-size:16px;border:1px solid var(--vh-line);border-radius:10px;padding:10px 12px;min-width:0;background:#fff;color:var(--vh-ink)}
.v-sheet input:focus{outline:0;border-color:var(--vh-navy);box-shadow:0 0 0 3px rgba(0,68,126,.15)}
.v-go{margin-top:8px;font:inherit;font-weight:600;font-size:15px;border:0;border-radius:10px;padding:11px 14px;background:var(--vh-navy);color:#fff;cursor:pointer}
.v-go:disabled{opacity:.6}
.v-err{margin:2px 0 0;color:var(--vh-hot);font-size:13.5px}
.v-err[hidden]{display:none}
.v-alt{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px;margin-top:4px}
.v-alt a{color:var(--vh-navy);font-weight:600}
.v-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--vh-line);background:#fff;font-size:20px;line-height:1;cursor:pointer;color:var(--vh-ink)}
@keyframes v-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.vh-icon.vh-land,.vh-icon.vh-land::after,.vh-cnt.vh-tick,.v-pop,.v-veil{animation:none}}