/* Viganta homepage: nav + hero.
   Sizes read off the reference with getComputedStyle, not eyeballed.
   Everything is prefixed lh- so it cannot collide with the Webflow sheets the
   page still loads. */

@font-face{
  font-family:"Figtree LH";
  src:url("/assets/lh/fonts/figtree-latin.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
}
/* Fraunces stands in for New Spirit, which is a licensed face we do not own.
   It is variable, so the quirk axes are pinned: WONK 0 and a low SOFT give a
   refined high-contrast serif rather than Fraunces' default wobble. */
@font-face{
  font-family:"Fraunces LH";
  src:url("/assets/lh/fonts/fraunces-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

.lh-nav, .lh-hero{
  --lh-ink:#0b1622;
  --lh-ink-70:rgba(11,22,34,.75);
  --lh-ink-55:rgba(11,22,34,.58);
  --lh-line:rgba(11,22,34,.10);
  --lh-brand:#E23F1C;          /* ours, not theirs */
  --lh-brand-hover:#c7351492;
  font-family:"Figtree LH", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  box-sizing:border-box;
}
.lh-nav *, .lh-hero *{box-sizing:border-box}

/* ── the bar ──────────────────────────────────────────────────────────── */
.lh-nav{
  position:sticky; top:0; z-index:900;
  height:83px; background:#fff; border-bottom:1px solid var(--lh-line);
  color:var(--lh-ink);
}
.lh-nav-inner{
  position:relative; height:83px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; gap:16px;
}
@media (min-width:1024px){ .lh-nav-inner{padding:0 52px} }

/* The centred mark is positioned rather than flexed: with three flex children
   the logo centres on the space left over, which moves every time a label on
   either side changes length. */
.lh-nav-brand{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; line-height:0;
}
.lh-nav-brand img, .lh-nav-brand svg{height:30px; width:auto; display:block}

.lh-nav-side{display:flex; align-items:center; gap:14px; min-width:0}
.lh-nav-side.is-right{margin-left:auto}

.lh-burger{
  display:inline-flex; align-items:center; gap:12px;
  height:42px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:16px; font-weight:400; color:var(--lh-ink);
}
.lh-burger-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:none;
  border:1px solid var(--lh-line); border-radius:50%; background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.lh-burger:hover .lh-burger-dot{border-color:rgba(11,22,34,.28); background:#fafafa}
.lh-burger-dot span{
  position:relative; display:block; width:16px; height:1.5px; border-radius:2px;
  background:var(--lh-ink); transition:transform .18s ease, opacity .18s ease;
}
.lh-burger-dot span:before, .lh-burger-dot span:after{
  content:""; position:absolute; left:0; width:16px; height:1.5px;
  border-radius:2px; background:var(--lh-ink);
  transition:transform .18s ease;
}
.lh-burger-dot span:before{top:-5px}
.lh-burger-dot span:after{top:5px}
.lh-nav[data-open="1"] .lh-burger-dot span{background:transparent}
.lh-nav[data-open="1"] .lh-burger-dot span:before{transform:translateY(5px) rotate(45deg)}
.lh-nav[data-open="1"] .lh-burger-dot span:after{transform:translateY(-5px) rotate(-45deg)}
.lh-burger-label{white-space:nowrap}

.lh-nav-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:16px; font-weight:400; color:var(--lh-ink); text-decoration:none;
  white-space:nowrap; padding:6px 2px;
  transition:opacity .15s ease;
}
.lh-nav-link:hover{opacity:.62}
.lh-nav-link svg{width:22px; height:22px; flex:none; stroke-width:1.6}

/* The one solid element in the bar. Theirs is near-black; ours is too, with
   the brand kept for the button that actually takes a lead. */
.lh-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 20px 11px; border-radius:999px; border:0;
  background:var(--lh-ink); color:#fff; text-decoration:none;
  font-size:14px; font-weight:600; line-height:1; white-space:nowrap;
  cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.lh-cta:hover{background:#1b2a3c; transform:translateY(-1px)}

@media (max-width:900px){
  .lh-nav-hide-sm{display:none}
  .lh-burger-label{display:none}
}

/* ── the drop panel ───────────────────────────────────────────────────── */
.lh-panel{
  position:absolute; left:0; right:0; top:83px;
  background:#fff; border-bottom:1px solid var(--lh-line);
  box-shadow:0 24px 48px -28px rgba(11,22,34,.28);
  /* Collapsed by height rather than display:none so it can animate, and
     hidden from the tab order with visibility so a closed panel cannot be
     focused into. */
  max-height:0; overflow:hidden; visibility:hidden;
  transition:max-height .28s cubic-bezier(.4,0,.2,1), visibility 0s linear .28s;
}
.lh-nav[data-open="1"] .lh-panel{
  max-height:min(78vh,720px); visibility:visible; overflow-y:auto;
  transition:max-height .32s cubic-bezier(.4,0,.2,1), visibility 0s;
}
.lh-panel-grid{
  display:grid; gap:26px 40px; padding:30px 20px 36px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  max-width:1360px; margin:0 auto;
}
@media (min-width:1024px){ .lh-panel-grid{padding:34px 52px 40px} }
.lh-panel h3{
  margin:0 0 12px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lh-ink-55);
}
.lh-panel ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.lh-panel a{
  display:block; padding:7px 0; text-decoration:none;
  font-size:15px; color:var(--lh-ink); transition:color .14s ease, padding-left .14s ease;
}
.lh-panel a:hover{color:var(--lh-brand); padding-left:5px}

/* ── the hero ─────────────────────────────────────────────────────────── */
.lh-hero{background:#fff; color:var(--lh-ink); padding-top:60px}
@media (min-width:671px){ .lh-hero{padding-top:96px} }
@media (min-width:1281px){ .lh-hero{padding-top:120px} }

.lh-hero-head{
  max-width:890px; margin:0 auto; padding:0 20px; text-align:center;
}
/* 36 -> 56 -> 62 -> 72 at 671, 1281 and 1601. Their steps, not rounded ones. */
.lh-h1{
  font-family:"Fraunces LH", Georgia, "Times New Roman", serif;
  /* Picked off a live side-by-side, not from a description. SOFT 0 /
     opsz 144 is the sharp high-contrast end of Fraunces, which read as
     Playfair. Fraunces was drawn after Souvenir and Windsor - this is
     that end of it. optical-sizing off, or the browser derives opsz
     from the font size and ignores the axis set here. */
  font-optical-sizing:none;
  font-variation-settings:"SOFT" 100, "WONK" 0, "opsz" 30;
  margin:0; font-size:36px; line-height:1.15; font-weight:600;
  letter-spacing:-.005em; color:var(--lh-ink);
}
@media (min-width:671px){  .lh-h1{font-size:56px} }
@media (min-width:1281px){ .lh-h1{font-size:62px} }
@media (min-width:1601px){ .lh-h1{font-size:72px} }

.lh-lead{
  margin:20px auto 0; max-width:52ch;
  font-size:20px; line-height:1.556; font-weight:400; color:var(--lh-ink-70);
}
@media (min-width:501px){ .lh-lead{font-size:22px} }

/* Our proof line. It is not in the reference - the reference has no proof to
   show in its hero - but it is ours and it earns its place above the form. */
.lh-proof{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:26px 0 0; flex-wrap:wrap;
}
.lh-proof-faces{display:flex; align-items:center}
.lh-proof-faces img{
  width:32px; height:32px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; margin-left:-9px; background:#eee;
}
.lh-proof-faces img:first-child{margin-left:0}
.lh-proof-stars{display:inline-flex; gap:2px}
.lh-proof-stars img{width:14px; height:14px}
.lh-proof-text{font-size:14px; color:var(--lh-ink-55)}

/* ── the card over the photo ──────────────────────────────────────────── */
.lh-stage{
  max-width:1498px; margin:0 auto; padding:0 20px;
  margin-top:44px;
}
@media (min-width:1024px){ .lh-stage{margin-top:65px} }

/* The whole point of the composition: a white card pulled down into the top of
   the photo so the two read as one object. -51px is theirs. */
.lh-card{
  position:relative; z-index:10;
  background:#fff; border-radius:10px; padding:20px;
  margin-bottom:-51px;
  box-shadow:0 30px 60px -34px rgba(11,22,34,.42), 0 0 0 1px rgba(11,22,34,.05);
}
@media (max-width:1023px){ .lh-card{margin-bottom:-28px} }

.lh-form{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch}
.lh-field{
  flex:1 1 220px; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:10px 18px; border-radius:8px;
  border:1px solid transparent;
  transition:border-color .15s ease, background .15s ease;
}
.lh-field:focus-within{border-color:rgba(11,22,34,.18); background:#fbfbfb}
/* Hairlines between the fields, the way their search bar divides Where / Check
   in / Check out / Who. Drawn on the field rather than as separate elements so
   they disappear for free when the fields stack. */
@media (min-width:1024px){
  .lh-field + .lh-field{border-left:1px solid var(--lh-line); border-radius:0}
  .lh-field + .lh-field:focus-within{border-radius:8px}
}
.lh-field label{
  font-size:14px; font-weight:600; color:var(--lh-ink); margin-bottom:2px;
  cursor:pointer;
}
.lh-field input{
  border:0; padding:0; background:none; outline:none; width:100%;
  font:inherit; font-size:16px; color:var(--lh-ink);
}
.lh-field input::placeholder{color:rgba(11,22,34,.42)}

.lh-submit{
  flex:0 0 auto; min-width:132px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 30px; height:62px; border:0; border-radius:999px;
  background:var(--lh-brand); color:#fff; cursor:pointer;
  font:inherit; font-size:16px; font-weight:700; line-height:1;
  transition:filter .15s ease, transform .15s ease;
}
.lh-submit:hover{filter:brightness(1.06); transform:translateY(-1px)}
.lh-submit:disabled{opacity:.6; cursor:default; transform:none}
@media (max-width:1023px){
  .lh-form{flex-direction:column}
  .lh-submit{width:100%; height:54px}
}

/* The message the lead script writes into the form's parent. It creates the
   element itself, so this only has to style whatever it appends. */
.lh-card .vg-lead-msg{
  margin:12px 4px 0; font-size:14px; line-height:1.5; color:var(--lh-ink-70);
  min-height:0;
}
.lh-card .vg-lead-msg[data-tone="err"]{color:#b42318}
.lh-card .vg-lead-msg[data-tone="ok"]{color:#15803d}
.lh-card .vg-lead-msg:empty{display:none}

.lh-media{
  position:relative; border-radius:14px; overflow:hidden;
  aspect-ratio:1458/560; background:#eceae8;
}
@media (max-width:767px){ .lh-media{aspect-ratio:4/3} }
.lh-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.lh-hero-foot{height:64px}

/* The page's own first section sits immediately under this. Without the rule
   below the Webflow section above it keeps its dark background and shows as a
   band between the photo and the next block. */
.vg-newhero + *{background:#fff}


/* ── overrides ────────────────────────────────────────────────────────────
   The page still loads the previous hero's stylesheets, and three of their
   rules reach into this markup. Each was found by walking document.styleSheets
   for the rules actually matching the element, so these are the real ones.

   Two classes each, which is one more than the rule being beaten. No
   !important anywhere: it would win today and be unanswerable tomorrow. */

/* hero.scoped.css sets `.vg-newhero h1` white, because the hero it was written
   for sat on a dark photograph. On a white hero that is a 72px headline
   painted white on white - present, correct, and invisible. */
.lh-hero .lh-h1{color:var(--lh-ink)}
.lh-hero .lh-lead{color:var(--lh-ink-70)}
.lh-hero .lh-proof-text{color:var(--lh-ink-55)}
.lh-hero .lh-field label{color:var(--lh-ink)}
.lh-hero .lh-field input{color:var(--lh-ink)}

/* nav.scoped.css puts a transparent background on every anchor in the nav,
   which is right for a text link and wrong for the one button in the bar. */
.lh-nav .lh-cta{background:var(--lh-ink); color:#fff}
.lh-nav .lh-cta:hover{background:#1b2a3c}
.lh-nav .lh-nav-link{color:var(--lh-ink); background:none}
.lh-nav .lh-panel a{color:var(--lh-ink); background:none}
.lh-nav .lh-panel a:hover{color:var(--lh-brand)}
.lh-nav .lh-burger{color:var(--lh-ink); background:none}

/* The injected wrapper is capped at 52vh with overflow hidden - a height that
   fitted the old hero exactly and cuts this one off through the middle of the
   form, with the next section overlapping the photo. The hero sizes itself. */
.vg-newhero.vg-newhero{max-height:none; overflow:visible}
.vg-newhero.vg-newhero:before, .vg-newhero.vg-newhero:after{content:none}

/* The Webflow sheet zeroes every paragraph margin inside the hero, which
   closed the 20px the reference leaves between the headline and the lead and
   left the two touching. Same two-class treatment as the rest. */
.lh-hero .lh-lead{margin-top:20px}
.lh-hero .lh-proof{margin-top:26px}

/* The lead script writes its own status element, and index.html still carries
   the previous hero's styling for it: absolutely positioned at
   top:calc(100% + 34px), with pale text on a dark tint. Both were right for a
   hero that sat on a photograph and are wrong here - it floated out of the
   card and over the picture, in near-white text on pink.
   Three classes, because the rule being beaten is a class plus an attribute. */
.lh-hero .lh-card .vg-lead-msg{
  position:static; top:auto; left:auto; right:auto; width:auto; max-width:none;
  margin:12px 4px 0; padding:10px 14px; border-radius:8px;
  font-size:14px; line-height:1.45; text-align:left;
}
.lh-hero .lh-card .vg-lead-msg[data-tone="err"]{background:rgba(190,40,30,.08); color:#b42318}
.lh-hero .lh-card .vg-lead-msg[data-tone="ok"]{background:rgba(16,163,74,.10); color:#15803d}
.lh-hero .lh-card .vg-lead-msg:empty{display:none; margin:0; padding:0}


/* ── the panel, rebuilt ───────────────────────────────────────────────────
   The reference puts nothing in its bar and everything behind the hamburger,
   which only works if the hamburger is worth opening. Three lists of bare
   links was correct and dull.

   Cities carry their state, because a city name alone is a link and a city
   with its state is an answer to "do you buy near me". Everything else carries
   one line saying what it does - "Capital Gains Estimator" tells somebody who
   has never sold a house nothing about whether they need it.

   The card is the only coloured thing here. Twenty links with no hierarchy
   makes every link equally likely, so the one the site exists for gets a
   twentieth of the attention. */
.lh-panel-grid{
  display:grid; gap:34px 44px;
  grid-template-columns:1.25fr 1fr 1fr 0.95fr;
  align-items:start;
  padding:38px 20px 44px; max-width:1440px; margin:0 auto;
}
@media (min-width:1024px){ .lh-panel-grid{padding:42px 52px 48px} }
@media (max-width:1200px){
  .lh-panel-grid{grid-template-columns:1fr 1fr; gap:30px 36px}
}
@media (max-width:640px){
  .lh-panel-grid{grid-template-columns:1fr; gap:26px}
}

.lh-col{min-width:0}
.lh-nav .lh-panel h3{
  margin:0 0 14px; padding-bottom:11px;
  border-bottom:1px solid var(--lh-line);
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lh-ink-55);
}

.lh-nav .lh-panel ul{list-style:none; margin:0; padding:0}
.lh-cities{display:grid; grid-template-columns:1fr 1fr; gap:2px 18px}
@media (max-width:640px){ .lh-cities{grid-template-columns:1fr} }
.lh-links{display:flex; flex-direction:column; gap:2px}

/* One rule for both lists. A city's second line is its state, a tool's is what
   it does; the shape is identical so the type should be too. */
.lh-nav .lh-panel a{
  display:block; padding:9px 10px; margin-left:-10px;
  border-radius:9px; text-decoration:none; color:var(--lh-ink);
  transition:background .14s ease, color .14s ease;
}
.lh-nav .lh-panel a:hover{background:rgba(11,22,34,.045)}
.lh-nav .lh-panel a b{
  display:block; font-size:15px; font-weight:600; line-height:1.35;
  letter-spacing:-.004em; color:var(--lh-ink);
  transition:color .14s ease;
}
.lh-nav .lh-panel a em{
  display:block; margin-top:1px; font-style:normal;
  font-size:12.5px; line-height:1.45; color:var(--lh-ink-55);
}
.lh-nav .lh-panel a:hover b{color:var(--lh-brand)}

/* ── the card ── */
.lh-feature{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px 24px 24px; border-radius:16px;
  background:linear-gradient(168deg, rgba(226,63,28,.09), rgba(226,63,28,.035) 62%, rgba(226,63,28,.02));
  border:1px solid rgba(226,63,28,.16);
}
.lh-feature-eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lh-brand);
}
.lh-nav .lh-feature h4{
  margin:10px 0 0; font-size:19px; font-weight:600; line-height:1.25;
  letter-spacing:-.012em; color:var(--lh-ink);
  font-family:"Fraunces LH", Georgia, serif;
  font-optical-sizing:none; font-variation-settings:"SOFT" 100, "WONK" 0, "opsz" 30;
}
.lh-nav .lh-feature p{
  margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--lh-ink-70);
}
.lh-nav .lh-feature .lh-feature-cta{
  display:inline-flex; align-items:center; justify-content:center;
  margin:18px 0 0; padding:12px 22px; border-radius:999px;
  background:var(--lh-brand); color:#fff; text-decoration:none;
  font-size:14px; font-weight:700; line-height:1;
  transition:filter .15s ease, transform .15s ease;
}
.lh-nav .lh-feature .lh-feature-cta:hover{
  filter:brightness(1.06); transform:translateY(-1px); background:var(--lh-brand); color:#fff;
}
.lh-feature-note{
  margin-top:12px; font-size:11.5px; color:var(--lh-ink-55);
}

/* The two icon links in the bar keep their icon a shade back from the word,
   the same relationship the rail in the CRM uses. */
.lh-nav .lh-nav-link svg{opacity:.55; transition:opacity .15s ease}
.lh-nav .lh-nav-link:hover svg{opacity:.9}

/* ── panel structure, at a specificity that holds ─────────────────────────
   nav.scoped.css styles bare elements inside the injected nav - .vg-newnav ul,
   .vg-newnav aside, .vg-newnav section - all at one class plus one element.
   My single-class rules lost to every one of them, which is why the cities
   rendered in a single column (ul forced to flex), the card stacked wrong
   (aside forced back to block) and the whole panel opened 120px down the page
   (section carrying a padding-top meant for a page section).

   Same treatment as everywhere else in this file: one more class, no
   !important. */
.lh-nav .lh-panel-grid{
  display:grid; grid-template-columns:1.25fr 1fr 1fr 0.95fr;
  gap:34px 44px; align-items:start;
}
@media (max-width:1200px){ .lh-nav .lh-panel-grid{grid-template-columns:1fr 1fr; gap:30px 36px} }
@media (max-width:640px){  .lh-nav .lh-panel-grid{grid-template-columns:1fr; gap:26px} }

.lh-nav .lh-col{padding:0; margin:0; min-width:0}
.lh-nav .lh-cities{display:grid; grid-template-columns:1fr 1fr; gap:2px 18px}
@media (max-width:640px){ .lh-nav .lh-cities{grid-template-columns:1fr} }
.lh-nav .lh-links{display:flex; flex-direction:column; gap:2px}

.lh-nav .lh-feature{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px 24px 24px; margin:0; border-radius:16px;
}
.lh-nav .lh-feature > *{max-width:100%}
.lh-nav .lh-feature .lh-feature-note{
  display:block; margin-top:12px; font-size:11.5px; color:var(--lh-ink-55);
}
.lh-nav .lh-feature .lh-feature-eyebrow{display:block}

/* ── the hero photo ───────────────────────────────────────────────────────
   The reference band is 1458x560, about 2.6:1, which suited a wide shot of a
   manor house. This photograph is 3:2, and a 2.6 crop would throw away 42% of
   its height - the raised hands off the top and the feet off the bottom, which
   is most of what makes it read as a family rather than three people sitting
   down.

   2.2:1 keeps 68% of the frame and still reads as a band rather than a
   picture. object-position sits slightly above centre because the faces and
   the high-five are in the upper third; dead centre put the crop through the
   hands. */
.ms-root .lh-media, .lh-media{aspect-ratio:2.2/1}
.lh-media img{object-position:center 38%}
@media (max-width:767px){
  .lh-media{aspect-ratio:4/3}
  .lh-media img{object-position:center 42%}
}

/* The supplied lockup is 691x120 once trimmed - a 5.8:1 wordmark with no
   descenders, so it wants less height than the old SVG did or it reads as the
   loudest thing in a bar whose whole point is restraint. */
.lh-nav .lh-nav-brand img{height:24px; width:auto; display:block}
@media (min-width:1024px){ .lh-nav .lh-nav-brand img{height:26px} }

/* ── the bar is clickable again ───────────────────────────────────────────
   .vg-newnav, the wrapper this is injected into, sets pointer-events:none in
   the inline pins block. That was right for the bar it was written for - it
   floated over the hero and let clicks through, switching pointer-events back
   on for its own controls. This nav never switched it back on, and the
   property inherits, so the whole bar was transparent to the mouse and every
   click landed on the hero behind it. */
.lh-nav{pointer-events:auto}

/* The phone pill. Same shape as the button it replaces, because it is still
   the one solid thing on the right and the composition leans on it. */
.lh-nav .lh-cta{gap:8px; font-variant-numeric:tabular-nums}
.lh-nav .lh-cta svg{width:15px; height:15px; flex:none; opacity:.85}
@media (max-width:560px){
  .lh-nav .lh-cta span{display:none}
  .lh-nav .lh-cta{padding:12px; border-radius:50%; }
  .lh-nav .lh-cta svg{opacity:1}
}

/* Cities read as links but are not, because the pages behind them were retired
   and nothing replaced them. Same type as the real links beside them so the
   column still scans as one thing, minus the hover and the pointer - a menu
   item that lights up and then does nothing is worse than one that never
   invited the click. */
.lh-nav .lh-cities span{
  display:block; padding:9px 10px; margin-left:-10px; border-radius:9px;
  color:var(--lh-ink);
}
.lh-nav .lh-cities span b{
  display:block; font-size:15px; font-weight:600; line-height:1.35;
  letter-spacing:-.004em; color:var(--lh-ink);
}
.lh-nav .lh-cities span em{
  display:block; margin-top:1px; font-style:normal;
  font-size:12.5px; line-height:1.45; color:var(--lh-ink-55);
}

/* The one live thing in that column, and the next step for somebody who just
   found their city in the list. */
.lh-nav .lh-panel a.lh-col-more{
  display:inline-block; margin:12px 0 0; padding:9px 0;
  font-size:13px; font-weight:600; color:var(--lh-brand);
  background:none; border-radius:0;
}
.lh-nav .lh-panel a.lh-col-more:hover{background:none; opacity:.75}

/* ── the bar stays put ────────────────────────────────────────────────────
   position:sticky did nothing here, and not because of anything in this file.
   The nav is injected inside .wrapper.ovh, which sets overflow:hidden, and an
   ancestor with overflow:hidden silently disables sticky - it confines the
   element to that ancestor's scrollport, and .wrapper is not itself
   scrollable. So the bar scrolled off the top and never came back, which is
   what "the buttons do not work" actually was: by the time anybody tried to
   use them they were several hundred pixels above the viewport.

   Fixed is immune to that ancestor. It also leaves the flow, so .vg-newnav
   carries the bar height to keep the hero from sliding underneath it. */
.lh-nav{position:fixed; top:0; left:0; right:0; z-index:900}
.vg-newnav{height:83px}

/* The footer lockup. The element it replaces was 138x44 and this file is
   691x120, so the old width would have stretched it - height is set, width
   comes from the file. Two classes because the theme styles .footer-logo img
   directly. */
.footer-style1 .footer-logo img{width:auto; height:30px; max-width:100%}
@media (max-width:575px){ .footer-style1 .footer-logo img{height:26px} }