/* ==========================================================================
   vistafencellc — "Blue" design (Admin → Settings → Design → Site design)

   Loaded after styles.css only while the blue design is on; switching back to
   Classic drops this file and the theme is exactly what it was. Colours come
   from the logo (royal blue + charcoal); the shapes follow the brief from the
   futurefence.com.au teardown: one geometric sans for everything, square
   corners on buttons, cards and fields, a light split hero, a blue proof band
   under it, and bands that step white → pale blue → blue → deep navy.

   Contrast. --vf-blue (#1d4fc4) against white is 7.1:1, as a button fill
   under white words and as a link on white. The light sky (#7fb0ff) is a fill or a rule only — on white
   it is 2.3:1, so it never carries words; on the deep bands its lighter cousin
   #9cc2ff does (7.0:1 on #13306b).
   ========================================================================== */

/* League Spartan (SIL Open Font License), the variable latin file from Google
   Fonts, served from here like the classic theme's fonts: one 24 KB file for
   every weight from 400 to 700. */
@font-face{font-family:'League Spartan';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/leaguespartan-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --vf-blue:#1d4fc4;
  --vf-blue-dark:#163d99;
  --vf-navy:#13306b;
  --vf-night:#111827;
  --vf-sky:#7fb0ff;
  --vf-sky-text:#9cc2ff;
  --vf-pale:#f0f5fe;
  --vf-pale-2:#e3ecfc;

  --vf-paper:#ffffff;
  --vf-paper-warm:#ffffff;
  --vf-sand:#f0f5fe;
  --vf-card:#f7faff;

  --vf-ink:#14213d;
  --vf-head:#14213d;
  --vf-body:#2f3b54;
  --vf-muted:#46546e;
  --vf-fine:#56637b;

  --vf-green:var(--vf-blue);
  --vf-green-dark:var(--vf-night);
  --vf-green-hero:var(--vf-navy);

  --vf-mark:var(--vf-blue);
  --vf-mark-hover:var(--vf-blue-dark);
  --vf-link:var(--vf-blue);
  --vf-tan:var(--vf-sky-text);
  --vf-tan-mid:var(--vf-sky);

  --vf-line:#d7e2f4;
  --vf-line-soft:#e6edf8;
  --vf-field:#c3d1e8;

  --vf-serif:'League Spartan',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --vf-sans:'League Spartan',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --vf-radius:0;
}

/* ------------------------------------------------------------------- type */
body{font-size:16.5px;line-height:1.6;color:var(--vf-ink)}
h1,h2,h3,h4{letter-spacing:-.01em}
.vf-section__title,.vf-related__title,.vf-sources__title,.vf-quote__title{font-weight:700}
.vf-row__title,.vf-card__title,.vf-step__title,.vf-linkcard__title,.vf-post__title{font-weight:700}
.vf-rt a{text-decoration-color:rgba(29,79,196,.35)}
:focus-visible{outline-color:var(--vf-blue)}

/* ---------------------------------------------------------------- buttons */
.vf-btn{border-radius:0;border-width:2px;font-weight:700;font-size:16.5px;padding:15px 30px;letter-spacing:.01em}
.vf-btn--solid{background:var(--vf-blue);color:#fff}
.vf-btn--solid:hover{background:var(--vf-navy);color:#fff}
.vf-btn--outline{border-color:var(--vf-blue);color:var(--vf-blue);background:transparent}
.vf-btn--outline:hover{background:var(--vf-blue);border-color:var(--vf-blue);color:#fff}
.vf-btn--green{background:var(--vf-navy)}
.vf-btn--green:hover{background:var(--vf-night)}
.vf-btn--ghost{border-color:rgba(255,255,255,.75)}

/* ----------------------------------------------------------- top + header */
.vf-topbar{background:var(--vf-navy);color:#d3def5;font-size:14px}
.vf-topbar__call{color:#d3def5}
.vf-topbar__phone:hover{color:var(--vf-sky-text)}

.vf-header{background:#fff;border-bottom:1px solid rgba(19,48,107,.1);box-shadow:0 1px 0 rgba(19,48,107,.03)}
/* On a phone the sticky header sits straight on white content (the hero's
   sheet, white sections); a 1px hairline vanished there, so it gets a 3px
   rule in the brand's sky blue, the same as the form's and the diagonal's edge. */
@media (max-width:739px){.vf-header{border-bottom:3px solid var(--vf-sky)}}
.vf-header--compact{border-bottom:3px solid var(--vf-sky)}
.vf-brand__mark{border-radius:0;background:var(--vf-blue)}
.vf-brand{gap:12px}
.vf-brand__logo{height:44px;width:auto}
.vf-brand__text{font-weight:700;font-size:22px;letter-spacing:.03em;text-transform:uppercase;color:#161b26;padding-top:3px}
.vf-brand__em{color:var(--vf-blue)}
/* The phone header's own button, "Free Estimate" in the middle between the
   brand and the burger: the skin's big .vf-btn padding (above) would push the
   burger onto a second row. On a phone the wordmark steps down with the width
   so mark, name, button and burger share one row with air between them; below
   360px the mark stands alone (the name is still read out). */
.vf-btn.vf-header__cta-sm{font-size:14.5px;padding:10px 13px}
@media (max-width:479px){
  .vf-brand{gap:8px}
  .vf-brand__logo{height:38px}
  .vf-brand__text{font-size:18px}
}
@media (max-width:389px){.vf-brand__text{font-size:16px}.vf-btn.vf-header__cta-sm{font-size:14px;padding-inline:11px}}
@media (max-width:374px){.vf-brand{gap:6px}.vf-brand__logo{height:34px}.vf-brand__text{font-size:14.5px}.vf-btn.vf-header__cta-sm{font-size:13.5px;padding-inline:9px}}
@media (max-width:359px){.vf-brand__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.vf-nav__link,.vf-menu__label{font-size:16px;font-weight:600;color:var(--vf-ink)}
.vf-nav__link:hover,.vf-nav__link.is-current,
.vf-menu__label:hover,.vf-menu[open] .vf-menu__label,.vf-menu.is-current .vf-menu__label{color:var(--vf-blue)}
.vf-nav__cta,.vf-nav__calc{font-size:15.5px;padding:12px 20px}
.vf-menu__panel{border-radius:0;border-color:var(--vf-line);box-shadow:0 16px 36px rgba(19,48,107,.14);border-top:3px solid var(--vf-blue)}
.vf-menu__panel a{border-radius:0;font-weight:500;color:var(--vf-ink)}
.vf-menu__panel a:hover{background:var(--vf-pale);color:var(--vf-blue)}
/* The Services panel, and the tablet burger's panel of two buttons: the same
   blue rule on top as the dropdowns, square. */
@media (min-width:740px){
  .vf-header:not(.vf-header--compact) .vf-mega__panel{border-top:3px solid var(--vf-blue);box-shadow:0 26px 50px rgba(19,48,107,.16)}
  .vf-header:not(.vf-header--compact) .vf-mega__headrow{border-bottom-color:var(--vf-sky)}
}
@media (min-width:740px) and (max-width:1023px){
  .vf-header:not(.vf-header--compact) .vf-nav__ctas{border-top:3px solid var(--vf-blue);box-shadow:0 16px 36px rgba(19,48,107,.14)}
}
/* The row needs about 1283px in this font. Up to 1339px the estimator keeps
   its calculator icon and drops the words; below 1180px the name beside the
   mark goes too (the mark carries the brand) and the items close up. */
@media (min-width:1024px) and (max-width:1339px){
  .vf-nav__calc{padding:12px 13px}
  .vf-nav__calc span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1179px){
  .vf-brand__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vf-menu__label,.vf-nav__link{padding-inline:8px;font-size:15px}
  .vf-nav__cta{padding-inline:16px}
}

/* ------------------------------------------------------------------- hero */
/* Three ways to set the copy over the photo (Settings -> Design -> Hero style).
   Doubled class to outrank the scheme rule (.dark{background;color}) that the
   engine prints after this file. */
.vf-hero.vf-hero{background:var(--vf-navy);color:var(--vf-ink)}
.vf-hero__slats,.vf-hero__pickets{display:none}
.vf-hero__inner{padding-block:64px 76px}
.vf-hero__h1{font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.015em}
.vf-kicker{letter-spacing:.08em;font-size:14px;display:flex;align-items:center;gap:12px}
.vf-kicker::before{content:"";width:34px;height:4px;background:var(--vf-sky);flex:none}
.vf-rt--hero p{font-size:17px}

/* Dark copy on a light ground: split and panel. */
.vf-hero--split .vf-hero__h1,.vf-hero--panel .vf-hero__h1{color:var(--vf-ink)}
.vf-hero--split .vf-kicker,.vf-hero--panel .vf-kicker{color:var(--vf-blue)}
.vf-hero--split .vf-rt--hero p,.vf-hero--panel .vf-rt--hero p{color:var(--vf-body)}
.vf-hero--split .vf-rt--hero a,.vf-hero--panel .vf-rt--hero a{color:var(--vf-blue);text-decoration-color:rgba(29,79,196,.4)}
.vf-hero--split .vf-rt--hero a:hover,.vf-hero--panel .vf-rt--hero a:hover{color:var(--vf-navy)}
.vf-hero--split .vf-crumbs,.vf-hero--panel .vf-crumbs{color:var(--vf-muted)}
.vf-hero--split .vf-crumbs a,.vf-hero--panel .vf-crumbs a{color:var(--vf-blue)}
.vf-hero--split .vf-btn--ghost,.vf-hero--panel .vf-btn--ghost{border-color:var(--vf-blue);color:var(--vf-blue);background:#fff}
.vf-hero--split .vf-btn--ghost:hover,.vf-hero--panel .vf-btn--ghost:hover{background:var(--vf-blue);color:#fff}
.vf-hero--split .vf-byline,.vf-hero--panel .vf-byline{color:var(--vf-muted)}
.vf-hero--split .vf-byline a,.vf-hero--panel .vf-byline a{color:var(--vf-blue)}

/* Split: the pale ground is part of the page, not a card on it. It is
   attached to the left edge, runs the full height and is cut on a slant, with
   a sky-blue edge; right of the cut the photograph is untouched. The copy is
   kept narrow enough to stay left of the cut at its lowest point. */
.vf-hero--split{--cut-top:63%;--cut-bot:55%}
.vf-hero--split:not(:has(.vf-hero__form)){--cut-top:70%;--cut-bot:62%}
.vf-hero--split .vf-hero__wash{background:var(--vf-pale);clip-path:polygon(0 0,var(--cut-top) 0,var(--cut-bot) 100%,0 100%)}
.vf-hero--split .vf-hero__wash::after{content:"";position:absolute;inset:0;background:var(--vf-sky);
  clip-path:polygon(calc(var(--cut-top) - 7px) 0,var(--cut-top) 0,var(--cut-bot) 100%,calc(var(--cut-bot) - 7px) 100%)}
.vf-hero--split .vf-hero__copy{max-width:600px}
.vf-hero--split .vf-hero__form,.vf-hero--scrim .vf-hero__form{margin-left:auto}
.vf-hero--split:not(:has(.vf-hero__form)) .vf-hero__copy{max-width:760px}

/* Shade: no box at all. White copy straight on the photograph over a navy
   shade that is deepest under the words and gone by the right edge. Where the
   words end the shade is still 62%: white text over a white photo there is
   5.1:1, and a soft text shadow covers the rest. */
.vf-hero--scrim .vf-hero__wash{background:linear-gradient(90deg,rgba(9,20,44,.84) 0%,rgba(9,20,44,.76) 42%,rgba(9,20,44,.6) 58%,rgba(9,20,44,.22) 78%,rgba(9,20,44,.06) 100%)}
.vf-hero--scrim .vf-hero__copy{max-width:660px;text-shadow:0 1px 14px rgba(5,12,28,.45)}
.vf-hero--scrim .vf-hero__h1{color:#fff}
.vf-hero--scrim .vf-kicker{color:var(--vf-sky-text)}
.vf-hero--scrim .vf-rt--hero p{color:#e6edf9}
.vf-hero--scrim .vf-rt--hero a{color:#bcd4ff;text-decoration-color:rgba(188,212,255,.5)}
.vf-hero--scrim .vf-rt--hero a:hover{color:#fff}
.vf-hero--scrim .vf-crumbs{color:#c9d6ee}
.vf-hero--scrim .vf-crumbs a{color:#fff}
.vf-hero--scrim .vf-btn{text-shadow:none}
.vf-hero--scrim .vf-btn--ghost{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}
.vf-hero--scrim .vf-btn--ghost:hover{background:#fff;color:var(--vf-navy)}
.vf-hero--scrim .vf-byline{color:#c9d6ee}
.vf-hero--scrim .vf-byline a{color:#bcd4ff}

/* Panel: the copy on a frosted card, 82% white over a 6px blur (6.6:1 body
   text and 4.6:1 links even over black). */
.vf-hero--panel .vf-hero__wash{background:linear-gradient(180deg,rgba(17,24,39,.12) 0%,rgba(17,24,39,0) 26%,rgba(17,24,39,0) 74%,rgba(17,24,39,.22) 100%)}
.vf-hero--panel .vf-hero__copy{
  max-width:760px;padding:34px 40px 38px;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-left:5px solid var(--vf-blue);box-shadow:0 18px 44px rgba(17,24,39,.22);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vf-hero--panel .vf-hero__copy{background:rgba(255,255,255,.9)}
}

/* Phones: the picture first. The photo or slideshow becomes a band across the
   top of the screen and the copy a white sheet that rises over its lower edge;
   the form follows. All three hero styles share this on a phone (the doubled
   class outranks the per-style rules above). */
@media (max-width:899px){
  .vf-hero.vf-hero{background:var(--vf-pale)}
  .vf-hero__bg[data-has-bg]{position:relative;height:clamp(230px,64vw,420px)}
  .vf-hero.vf-hero .vf-hero__wash{clip-path:none;background:linear-gradient(180deg,rgba(17,24,39,.16) 0%,rgba(17,24,39,0) 28%,rgba(17,24,39,0) 62%,rgba(17,24,39,.28) 100%)}
  .vf-hero--split .vf-hero__wash::after{display:none}
  .vf-hero__inner{padding-block:28px 36px;gap:22px}
  .vf-hero__bg[data-has-bg] + .vf-hero__inner{margin-top:-60px;padding-top:0}
  .vf-hero.vf-hero .vf-hero__copy{
    max-width:none;position:relative;padding:22px 20px 22px;
    background:#fff;border:none;border-top:4px solid var(--vf-blue);
    box-shadow:0 -8px 26px rgba(17,24,39,.16);text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .vf-hero.vf-hero .vf-hero__h1{color:var(--vf-ink);font-size:clamp(28px,7.6vw,38px);margin-bottom:14px}
  .vf-hero.vf-hero .vf-kicker{color:var(--vf-blue);font-size:12.5px;margin-bottom:10px}
  .vf-hero.vf-hero .vf-rt--hero p{color:var(--vf-body);font-size:16px}
  .vf-hero.vf-hero .vf-rt--hero a{color:var(--vf-blue);text-decoration-color:rgba(29,79,196,.4)}
  .vf-hero.vf-hero .vf-crumbs{color:var(--vf-muted);margin-bottom:12px}
  .vf-hero.vf-hero .vf-crumbs a{color:var(--vf-blue)}
  .vf-hero.vf-hero .vf-btn--ghost{border-color:var(--vf-blue);color:var(--vf-blue);background:#fff}
  .vf-hero.vf-hero .vf-byline{color:var(--vf-muted)}
  .vf-hero.vf-hero .vf-byline a{color:var(--vf-blue)}
  .vf-hero.vf-hero .vf-more{color:var(--vf-blue)}
  .vf-hero__ctas{margin-top:20px}
  .vf-hero__form,.vf-hero--split .vf-hero__form,.vf-hero--scrim .vf-hero__form{margin-left:0;flex:1 1 100%}
}

/* ------------------------------------------------------------------ forms */
.vf-formcard{border-radius:0;border-top:5px solid var(--vf-blue);box-shadow:0 18px 44px rgba(19,48,107,.2)}
.vf-formcard__title{font-weight:700;font-size:23px}
/* The mascot leans over the form card's top corner. */
.vf-formcard--mascot{position:relative}
.vf-formcard--mascot .vf-formcard__title,.vf-formcard--mascot .vf-formcard__lede{padding-right:76px}
.vf-formcard__mascot{position:absolute;top:-46px;right:-18px;width:112px;height:auto;filter:drop-shadow(0 10px 16px rgba(19,48,107,.28));pointer-events:none}
@media (max-width:480px){.vf-formcard__mascot{width:88px;top:-34px;right:-8px}.vf-formcard--mascot .vf-formcard__title,.vf-formcard--mascot .vf-formcard__lede{padding-right:60px}}
.vf-field>span{color:var(--vf-ink);letter-spacing:.06em}
.vf-field input,.vf-field textarea{border-radius:0;background:#fff;border-color:var(--vf-field);font-size:15px}
.vf-field input:focus,.vf-field textarea:focus{border-color:var(--vf-blue);outline:2px solid rgba(29,79,196,.22)}
.vf-photos__btn{border-radius:0}
.vf-photos__pick:hover .vf-photos__btn,.vf-photos__input:focus-visible+.vf-photos__btn{border-color:var(--vf-blue);color:var(--vf-blue)}
.vf-photos__item{border-radius:0}

/* ----------------------------------------------- proof band under the hero */
/* Doubled for the same reason as the hero: the band carries a scheme class. */
.vf-trust.vf-trust{background:var(--vf-sky);border-bottom:none}
.vf-trust__item{border-left-color:rgba(17,24,39,.14)}
.vf-trust__icon{color:var(--vf-night)}
.vf-trust__title{color:var(--vf-night);font-size:15px;letter-spacing:.01em}
.vf-trust__lines{color:#13213f}
@media (max-width:899px){.vf-trust__item{border-top-color:rgba(17,24,39,.14)}}
/* The lifetime warranty card: navy on the sky band, like the topbar. */
.vf-trust__item--accent{background:var(--vf-navy)}
.vf-trust__item--accent .vf-trust__icon{color:var(--vf-sky)}
.vf-trust__item--accent .vf-trust__title{color:#fff}
.vf-trust__item--accent .vf-trust__lines{color:#d3def5}
@media (max-width:899px){.vf-trust__item--accent{border-top-color:transparent}}

/* --------------------------------------------------------------- sections */
.vf-section{border-bottom:none;padding-block:72px}
.vf-section__num{color:var(--vf-blue);font-weight:700}
.vf-section__title{font-size:clamp(28px,3.2vw,38px);line-height:1.15}
.vf-rule{width:58px;height:4px;border-radius:0;background:var(--vf-sky)}
.dark .vf-rule,.charcoal .vf-rule{background:var(--vf-sky-text)}

.vf-row{border-top-color:var(--vf-line)}
.vf-row__icon{border:none;background:var(--vf-pale-2);color:var(--vf-blue);border-radius:0}
.cream .vf-row__icon,.grey .vf-row__icon{background:#fff}

.vf-card{border-radius:0;background:#fff;border-color:var(--vf-line);border-top:4px solid var(--vf-sky)}
.vf-card__icon{border-radius:0;background:var(--vf-pale-2);color:var(--vf-blue)}

.vf-step{border-top:4px solid var(--vf-sky)}
.vf-step__num{color:#3d78e0;font-weight:700}

.vf-qa__q{font-weight:600;font-size:19.5px}
.vf-qa__mark{border-color:var(--vf-sky);color:var(--vf-blue);border-radius:0}

.vf-related,.vf-strip,.vf-gallery,.vf-quote,.vf-calc,.vf-sources,.vf-stats{border-bottom-color:var(--vf-line-soft)}
.vf-chip{border-radius:0;border-color:var(--vf-field);color:var(--vf-ink);font-weight:600}
.vf-chip:hover{border-color:var(--vf-blue);color:var(--vf-blue)}
.vf-chip.is-on{background:var(--vf-blue);border-color:var(--vf-blue)}

/* Photographs as they are: the warm sepia lift suited the paper palette and
   turns grey against blue. */
.vf-plate{border-radius:0;background:var(--vf-pale-2)}
.vf-plate__img,.vf-plate:hover .vf-plate__img{filter:none}
.vf-plate__empty{background:var(--vf-pale-2)}
.vf-zoom:focus-visible{border-radius:0}

.vf-quote__panel{border-radius:0;background:var(--vf-pale);border-color:var(--vf-line);border-top:5px solid var(--vf-blue)}
.cream .vf-quote__panel,.grey .vf-quote__panel{background:#fff}
.vf-calc__frame{border-radius:0;box-shadow:0 12px 32px rgba(19,48,107,.1)}

.vf-stat__icon{background:var(--vf-pale-2);color:var(--vf-blue);border-radius:0}
.vf-stat__n{color:var(--vf-blue)}
.vf-stat__l{color:var(--vf-muted)}

/* --------------------------------------------------------- calculator band */
.vf-teaser::before{display:none}
.vf-teaser__title{font-weight:700}
.vf-teaser__text{color:#d3def5}
.vf-teaser__plate{background:#e8eef8;border-radius:0;box-shadow:0 12px 28px rgba(0,0,0,.28)}

/* ------------------------------------------------------------------ prose */
.vf-prose__body th{background:var(--vf-pale)}
.vf-prose__body blockquote{border-left:4px solid var(--vf-sky);background:var(--vf-pale)}
.vf-prose__body .vf-note{border-radius:0;border-left:4px solid var(--vf-blue)}

.vf-linkcard{border-radius:0;background:#fff}
.vf-linkcard:hover{border-color:var(--vf-blue);box-shadow:0 12px 26px rgba(19,48,107,.1)}
.vf-linkcard__icon{border-radius:0;background:var(--vf-pale-2);color:var(--vf-blue)}
.vf-linkcard__title{font-weight:700}

.vf-contact__icon{border-radius:0;background:var(--vf-pale-2);color:var(--vf-blue)}
.vf-contact__big{font-weight:700}

/* ------------------------------------------------------------------- blog */
.vf-post{border-radius:0}
.vf-post:hover{border-color:var(--vf-blue);box-shadow:0 12px 26px rgba(19,48,107,.12)}
.vf-post__cat{border-radius:0;background:var(--vf-blue)}
.vf-bloggrid__empty{border-radius:0}
.vf-artbody__col img{border-radius:0}

/* ----------------------------------------------------------------- footer */
.vf-footer{background:var(--vf-night);color:#c9d2e3}
.vf-footer__name{font-weight:700}
.vf-footer__mascot{display:block;width:120px;height:auto;margin:0 0 14px -6px}
.vf-footer a,.vf-footer__nap{color:#c9d2e3}
.vf-footer__lic,.vf-footer__hours{color:#a9b4c8}
.vf-footer__phone:hover,.vf-footer__nap a:hover{color:var(--vf-sky-text)}
.vf-footcol__head,.vf-footcol__caret{color:var(--vf-sky-text);letter-spacing:.1em}
.vf-footer__legal{border-top-color:rgba(255,255,255,.12)}

/* ----------------------------------------------------------------- extras */
.vf-top{border-radius:0;background:var(--vf-blue);box-shadow:0 8px 20px rgba(19,48,107,.3)}
.vf-top:hover{background:var(--vf-navy)}
.vf-lightbox.is-open{background:rgba(10,17,33,.94)}
.vf-lightbox__img{border-radius:0}
.vf-404__links a{text-decoration-color:rgba(156,194,255,.5)}

@media (max-width:719px){
  .vf-callbar{background:rgba(255,255,255,.97)}
  .vf-callbar a{border-radius:0}
  .vf-callbar__call{background:#fff;color:var(--vf-blue);box-shadow:inset 0 0 0 2px var(--vf-blue)}
  .vf-callbar__quote{background:var(--vf-blue)}
}