/* ==========================================================================
   vistafencellc — theme stylesheet

   Reproduces the approved prototype (or_site/Fence Site.dc.html), which was
   built entirely from inline styles on one template. Everything here is a
   token or a component; nothing is page-specific.

   Contrast note. The prototype used one terracotta, #b45f3a, for both marks
   and words — at 4.2:1 on paper that fails WCAG AA the moment it carries text.
   The palette below separates the two: --vf-mark (#b45f3a) is only ever a
   fill, a rule or an icon stroke; --vf-link (#9a4f2b, 5.4:1) carries anything
   with words in it. Small print moved from #8a8168 (3.5:1) to #6f6853 (5.5:1).
   See README, "Where the theme departs from the prototype".
   ========================================================================== */

/* --------------------------------------------------------------- webfonts */
@font-face{font-family:'Karla';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/karla-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}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/zillaslab-600-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}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/zillaslab-700-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}

/* ----------------------------------------------------------------- tokens */
:root{
  --vf-paper:#f7f4ec;
  --vf-paper-warm:#fdfcf8;
  --vf-sand:#f2eddd;
  --vf-card:#faf8f1;

  --vf-ink:#262319;
  --vf-head:#26311f;
  --vf-body:#4a4232;
  --vf-muted:#5c5443;
  --vf-fine:#6f6853;          /* small print — 5.5:1 on white */

  --vf-green:#2e4a26;
  --vf-green-dark:#22371d;
  --vf-green-hero:#27401f;

  --vf-mark:#b45f3a;          /* fills, rules, icon strokes — never words */
  --vf-mark-hover:#c1753c;
  --vf-link:#9a4f2b;          /* anything with words in it — 5.4:1 on paper */
  --vf-tan:#ecc9a8;
  --vf-tan-mid:#cf9a72;

  --vf-line:#e4ddc9;
  --vf-line-soft:#ece5d2;
  --vf-field:#d9d2c0;

  --vf-serif:'Zilla Slab',Georgia,'Times New Roman',serif;
  --vf-sans:'Karla',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --vf-wrap:1200px;
  --vf-gutter:clamp(16px,2.5vw,32px);
  --vf-radius:8px;
}

/* ------------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--vf-paper);color:var(--vf-ink);
  font-family:var(--vf-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--vf-link)}
a:hover{color:var(--vf-mark)}
:focus-visible{outline:2px solid var(--vf-link);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--vf-serif);color:var(--vf-head);text-wrap:pretty}
main{display:block}

.wrap{max-width:var(--vf-wrap);margin:0 auto;padding-inline:var(--vf-gutter)}
.wrap-narrow{max-width:900px;margin:0 auto;padding-inline:var(--vf-gutter)}

.vf-skip{position:absolute;left:-9999px}
.vf-skip:focus{left:8px;top:8px;z-index:200;background:#fff;padding:10px 16px;border-radius:6px}

/* Scroll-driven reveal, where the browser supports it and motion is welcome. */
@keyframes vf-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .vf-reveal{animation:vf-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}

/* --------------------------------------------------------------- richtext */
.vf-rt p{margin:0 0 14px;line-height:1.68}
.vf-rt p:last-child{margin-bottom:0}
.vf-rt ul,.vf-rt ol{margin:0 0 14px;padding-left:22px;line-height:1.68}
.vf-rt li{margin-bottom:6px}
.vf-rt a{color:var(--vf-link);text-decoration:underline;text-decoration-color:rgba(154,79,43,.35);text-underline-offset:3px}
.vf-rt a:hover{color:var(--vf-mark);text-decoration-color:currentColor}
.vf-rt--sm{font-size:15px}
.vf-rt--hero p{font-size:17px;line-height:1.7;color:#e8e4d8}
.vf-rt--hero a{color:var(--vf-tan);text-decoration:underline;text-decoration-color:rgba(236,201,168,.45);text-underline-offset:3px}
.vf-rt--hero a:hover{color:#fff}

/* ---------------------------------------------------------------- buttons */
.vf-btn{
  display:inline-block;font-family:var(--vf-sans);font-weight:700;font-size:16px;
  padding:14px 28px;border:1.5px solid transparent;border-radius:var(--vf-radius);
  text-decoration:none;cursor:pointer;line-height:1.2;text-align:center;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.vf-btn--solid{background:var(--vf-mark);color:#fff}
.vf-btn--solid:hover{background:var(--vf-link);color:#fff}
.vf-btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.vf-btn--ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
/* Outline for light grounds: --ghost is white-on-transparent and exists for the
   hero wash; on the header's paper it would be invisible. The tint gives it a
   body, so beside a solid button it reads as the second option rather than as
   an afterthought. */
.vf-btn--outline{border-color:var(--vf-green);color:var(--vf-green);background:rgba(46,74,38,.07)}
.vf-btn--outline:hover{background:var(--vf-green);color:#fff;border-color:var(--vf-green)}
.vf-btn--green{background:var(--vf-green);color:#fff;border:none}
.vf-btn--green:hover{background:var(--vf-green-dark);color:#fff}
.vf-btn--block{width:100%;display:block;border:none;font-size:15.5px;padding:14px}

/* ----------------------------------------------------------------- topbar */
.vf-topbar{background:var(--vf-green-dark);color:#cfd4c9;font-size:13.5px}
.vf-topbar__inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:8px}
.vf-topbar__phone{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.vf-topbar__call{font-weight:400;color:#cfd4c9}
.vf-topbar__phone:hover{color:var(--vf-tan)}

/* ----------------------------------------------------------------- header */
.vf-header{position:sticky;top:0;z-index:50;background:var(--vf-paper-warm);border-bottom:1px solid var(--vf-line)}
.vf-header__inner{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(8px,2vw,28px);min-height:68px}
.vf-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.vf-brand__mark{width:34px;height:34px;border-radius:8px;background:var(--vf-green);display:grid;place-items:center;flex:none}
.vf-brand__logo{height:34px;width:auto}
.vf-brand__text{font-family:var(--vf-serif);font-weight:700;font-size:21px;color:var(--vf-head);white-space:nowrap}

/* The row wraps rather than overflowing. The burger takes over below 1024px,
   so wrapping is the safety net for the widths in between and for a menu an
   editor has made longer than the one that shipped — a nav that has outgrown
   its row must push itself onto a second line, never the page sideways. */
.vf-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.vf-nav__link{padding:24px 13px;font-size:15px;font-weight:700;color:#3d3524;text-decoration:none;white-space:nowrap}
.vf-nav__link:hover,.vf-nav__link.is-current{color:var(--vf-link)}
/* The two header buttons travel together: the estimator and the quote, side
   by side and on the same terms. */
.vf-nav__ctas{margin-left:auto;display:flex;align-items:center;gap:10px}
.vf-nav__cta{font-size:15px;padding:11px 22px;white-space:nowrap}
.vf-nav__calc{display:inline-flex;align-items:center;gap:8px;font-size:15px;padding:11px 18px;white-space:nowrap}
/* Between the burger breakpoint and 1240px the full menu, the quote button and
   the estimator do not fit on one row; the estimator keeps its icon and the word
   it needs rather than wrapping the whole header. */
/* Two header buttons beside a full menu need about 1190px, and the page's
   content column is 1136. Before the estimator button the row fitted from
   1100px up; with it, it wrapped onto a second line at almost every desktop
   width. So the header gets its own wider column — it spans the window, not the
   text, so nothing below loses alignment that mattered — the menu items give
   up two pixels a side, and below 1260px, where even that is not enough, the
   estimator button keeps its calculator icon and drops the words. */
@media (min-width:1024px){
  .vf-header .wrap{max-width:1320px}
  .vf-menu__label,.vf-nav__link{padding-inline:11px}
}
@media (min-width:1024px) and (max-width:1259px){
  .vf-nav__calc{padding:11px 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:1139px){
  .vf-header__inner{column-gap:14px}
  .vf-menu__label,.vf-nav__link{padding-inline:8px;font-size:14.5px}
  .vf-nav__cta{padding-inline:16px}
  .vf-nav__ctas{gap:6px}
}

.vf-menu{position:relative}
.vf-menu__label{
  display:flex;align-items:center;gap:5px;padding:24px 13px;font-size:15px;font-weight:700;
  color:#3d3524;cursor:pointer;white-space:nowrap;list-style:none;user-select:none;
}
.vf-menu__label::-webkit-details-marker{display:none}
.vf-menu__label:hover,.vf-menu[open] .vf-menu__label,.vf-menu.is-current .vf-menu__label{color:var(--vf-link)}
.vf-menu__caret{font-size:11px;opacity:.75}
.vf-menu__panel{
  position:absolute;top:100%;left:0;z-index:60;
  background:#fff;border:1px solid var(--vf-line);border-radius:10px;
  box-shadow:0 14px 34px rgba(38,49,31,.14);padding:10px;
  display:grid;grid-template-columns:repeat(var(--vf-panel-cols,1),1fr);
  width:var(--vf-panel-w,260px);max-width:calc(100vw - 2 * var(--vf-gutter));gap:0 10px;
}
/* A closed <details> hides its content with content-visibility in current
   Chrome, not display:none — the box is still laid out and still counts
   towards the document width. Without this the widest panel adds a horizontal
   scrollbar to every page at around 940px, with nothing visible causing it. */
.vf-menu:not([open]) .vf-menu__panel{display:none}
/* The wide two-column panel belongs to the last item in the row, so it hangs
   off the right edge rather than running past it. */
.vf-menu__panel[data-align="end"]{left:auto;right:0}
.vf-menu__panel a{display:block;padding:8px 12px;border-radius:7px;font-size:14.5px;font-weight:500;color:#3d3524;text-decoration:none}
.vf-menu__panel a:hover{background:var(--vf-sand);color:var(--vf-green-dark)}

.vf-burger{display:none;width:40px;height:40px;border:none;background:transparent;color:var(--vf-head);cursor:pointer;place-items:center;flex:none}
.vf-header__cta-sm{display:none;font-size:14px;padding:10px 16px}

@media (max-width:1023px){
  .vf-header__inner{row-gap:0}
  .vf-burger{display:grid;order:3;margin-left:auto}
  .vf-header__cta-sm{display:inline-block;order:2;margin-left:auto}
  .vf-header__cta-sm + .vf-burger{margin-left:0}
  .vf-nav{
    order:4;flex:1 0 100%;display:none;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--vf-line);background:#fff;
    max-height:calc(100vh - 68px);overflow-y:auto;margin-inline:calc(var(--vf-gutter) * -1);
  }
  .vf-header__inner.is-open .vf-nav{display:flex}
  .vf-menu{border-bottom:1px solid var(--vf-line-soft)}
  .vf-menu__label{padding:16px 20px;font-size:16px;justify-content:space-between;color:var(--vf-head)}
  .vf-menu__caret{color:var(--vf-mark);font-size:14px}
  .vf-menu__panel{position:static;width:auto;border:none;box-shadow:none;padding:0 20px 14px;grid-template-columns:1fr}
  .vf-menu__panel a{padding:9px 10px;font-size:15px;color:var(--vf-muted)}
  .vf-nav__link{padding:16px 20px;font-size:16px;color:var(--vf-head);border-bottom:1px solid var(--vf-line-soft)}
  .vf-nav__ctas{margin:16px 20px 18px;flex-direction:column;align-items:stretch;gap:10px}
  .vf-nav__cta,.vf-nav__calc{display:flex;justify-content:center}
}

/* ------------------------------------------------------------------- hero */
.vf-hero{position:relative;overflow:hidden;background:var(--vf-green-hero)}
.vf-hero__bg{position:absolute;inset:0}
.vf-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vf-hero__bg picture{display:block;position:absolute;inset:0}
.vf-hero__wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,49,25,.96) 0%,rgba(30,49,25,.86) 48%,rgba(30,49,25,.52) 100%)}
.vf-hero__slats{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 12px,transparent 12px 34px)}
.vf-hero__pickets{position:absolute;left:0;right:0;bottom:-2px;height:52px;opacity:.14;line-height:0}
.vf-hero__inner{position:relative;display:flex;gap:48px;align-items:flex-start;flex-wrap:wrap;padding-block:72px 96px}
.vf-hero__copy{flex:1 1 380px;min-width:280px}
.vf-hero__form{flex:0 1 380px;min-width:280px}

.vf-crumbs{font-size:13.5px;color:#c3ccbc;margin-bottom:18px}
.vf-crumbs a{color:#e2e7dd;text-decoration:none}
.vf-crumbs a:hover{color:#fff;text-decoration:underline}
.vf-crumbs__sep{margin-inline:6px;opacity:.7}

.vf-kicker{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vf-tan);margin-bottom:14px}
.vf-hero__h1{font-weight:700;font-size:clamp(34px,4.2vw,50px);line-height:1.12;color:#fff;margin:0 0 22px;max-width:820px}
.vf-hero__ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* ----------------------------------------------------------------- forms  */
.vf-formcard{background:#fff;border-radius:12px;box-shadow:0 20px 46px rgba(0,0,0,.28);padding:26px}
.vf-formcard__title{font-family:var(--vf-serif);font-size:21px;font-weight:700;color:var(--vf-head);margin-bottom:6px}
.vf-formcard__lede{margin:0 0 18px;font-size:14px;color:var(--vf-muted);line-height:1.45}

.vf-form{display:grid;gap:14px}
.vf-form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vf-field{display:block}
.vf-field>span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:var(--vf-head);margin-bottom:6px}
.vf-field input,.vf-field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--vf-field);border-radius:var(--vf-radius);
  font:inherit;font-size:14px;background:var(--vf-card);color:var(--vf-ink);
}
.vf-field textarea{resize:vertical}
.vf-field input:focus,.vf-field textarea:focus{border-color:var(--vf-link);outline:2px solid rgba(154,79,43,.25);outline-offset:0}
.vf-form__fine{margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--vf-fine);text-align:center}
.vf-form__notice{margin:0 0 14px;padding:11px 14px;border-radius:6px;font-size:14px}
.vf-form__notice--err{color:#8f1d1d;background:rgba(180,60,60,.1);border:1px solid rgba(180,60,60,.4)}

.vf-form--wide{grid-template-columns:1fr 1fr;gap:14px}
.vf-form--wide .vf-field--full{grid-column:1 / -1}
.vf-form--wide button{grid-column:1 / -1;justify-self:start}
.vf-form--wide .vf-field input,.vf-form--wide .vf-field textarea{background:#fff;font-size:15px;padding:12px 14px}
@media (max-width:640px){.vf-form--wide{grid-template-columns:1fr}.vf-form__row{grid-template-columns:1fr}}

/* ------------------------------------------------------------- trust bar  */
.vf-trust{border-bottom:1px solid var(--vf-line-soft)}
.vf-trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));padding-inline:0}
.vf-trust__item{display:flex;gap:14px;align-items:flex-start;padding:28px 30px;border-left:1px solid var(--vf-line-soft)}
.vf-trust__item:first-child{border-left:none}
.vf-trust__icon{flex:none;color:var(--vf-green);line-height:0}
.vf-trust__title{font-weight:700;font-size:13.5px;letter-spacing:.03em;color:var(--vf-head);margin-bottom:3px}
.vf-trust__lines{font-size:14px;color:var(--vf-muted);line-height:1.45}
@media (max-width:899px){.vf-trust__item{border-left:none;border-top:1px solid var(--vf-line-soft);padding:22px var(--vf-gutter)}}

/* --------------------------------------------------------------- sections */
.vf-section{padding-block:64px;border-bottom:1px solid var(--vf-line-soft)}
.vf-section__head{display:flex;align-items:baseline;gap:16px;margin-bottom:18px}
.vf-section__num{font-family:var(--vf-serif);font-weight:600;font-size:15px;color:var(--vf-link)}
.vf-section__title{font-weight:600;font-size:clamp(26px,3vw,33px);line-height:1.2;margin:0}
.vf-rule{width:56px;height:3px;background:var(--vf-mark);border-radius:2px;margin-bottom:24px}
.vf-section__lead{max-width:780px;margin-bottom:32px;color:var(--vf-body)}

.vf-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:stretch}
.vf-split__photo{min-height:340px}
@media (max-width:899px){.vf-split{grid-template-columns:1fr}.vf-split__photo{min-height:260px}}
.vf-split .vf-section__lead{margin-bottom:22px}

.vf-rows{display:grid;grid-template-columns:1fr;gap:0 56px}
.vf-rows--two{grid-template-columns:repeat(auto-fit,minmax(440px,1fr))}
@media (max-width:960px){.vf-rows--two{grid-template-columns:1fr}}
.vf-row{display:flex;gap:20px;padding:26px 0;border-top:1px solid var(--vf-line)}
.vf-rows--tight .vf-row{gap:16px;padding:16px 0}
.vf-row__icon{flex:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--vf-tan-mid);color:var(--vf-mark);display:grid;place-items:center}
.vf-rows--tight .vf-row__icon{width:38px;height:38px}
.vf-rows--tight .vf-row__icon .vf-icon{width:20px;height:20px}
.vf-row__title{font-weight:600;font-size:20px;margin:0 0 10px;line-height:1.25}
.vf-rows--tight .vf-row__title{font-size:18px;margin-bottom:6px}
.vf-row .vf-rt{color:var(--vf-muted)}

.vf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.vf-card{background:var(--vf-card);border:1px solid var(--vf-line);border-radius:12px;padding:26px 26px 24px}
.light .vf-card{background:var(--vf-card)}
.cream .vf-card,.grey .vf-card,.gold-tint .vf-card{background:#fff}
.vf-card__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:10px;background:rgba(180,95,58,.12);color:var(--vf-mark);margin-bottom:14px}
.vf-card__title{font-weight:600;font-size:20px;margin:0 0 12px;line-height:1.25}
.vf-card .vf-rt{color:var(--vf-muted)}

.vf-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.vf-step{border-top:3px solid var(--vf-mark);padding-top:18px}
.vf-step__head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.vf-step__num{font-family:var(--vf-serif);font-weight:700;font-size:34px;color:var(--vf-tan-mid);line-height:1}
.vf-step__title{font-weight:600;font-size:20px;margin:0;line-height:1.25}
.vf-step .vf-rt{color:var(--vf-muted)}

/* -------------------------------------------------------------------- FAQ */
.vf-faq__list{border-top:1px solid var(--vf-line)}
.vf-qa{border-bottom:1px solid var(--vf-line)}
.vf-qa__q{
  display:flex;justify-content:space-between;align-items:center;gap:18px;padding:21px 0;
  font-family:var(--vf-serif);font-weight:600;font-size:19px;color:var(--vf-head);
  cursor:pointer;list-style:none;text-wrap:pretty;
}
.vf-qa__q::-webkit-details-marker{display:none}
.vf-qa__mark{
  flex:none;width:28px;height:28px;border:1.5px solid #c9c0a8;border-radius:50%;
  display:grid;place-items:center;color:var(--vf-link);position:relative;
}
.vf-qa__mark::before,.vf-qa__mark::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.vf-qa__mark::before{width:12px;height:2px}
.vf-qa__mark::after{width:2px;height:12px;transition:transform .18s ease}
.vf-qa[open] .vf-qa__mark::after{transform:scaleY(0)}
.vf-qa__a{color:var(--vf-muted);padding:0 44px 22px 0}

/* -------------------------------------------------------------- related   */
.vf-related{padding-block:56px;border-bottom:1px solid var(--vf-line-soft)}
.vf-related__title{font-weight:600;font-size:25px;margin:0 0 20px}
.vf-chips{display:flex;flex-wrap:wrap;gap:10px}
.vf-chip{
  display:block;padding:10px 18px;border:1px solid var(--vf-field);border-radius:999px;
  background:#fff;color:#3d3524;font-size:14.5px;font-weight:600;text-decoration:none;
}
.vf-chip:hover{border-color:var(--vf-mark);color:var(--vf-link)}

/* ------------------------------------------------------------ photo plate */
.vf-plate{position:relative;margin:0;overflow:hidden;border-radius:12px;height:100%;background:#e8e2d0}
.vf-plate picture{display:block;height:100%}
.vf-plate__img{
  display:block;width:100%;height:100%;object-fit:cover;
  filter:sepia(.10) saturate(.96) contrast(1.06);
  transition:filter .25s ease,transform .6s cubic-bezier(.2,.7,.2,1);
}
.vf-plate__img.is-contain{object-fit:contain}
.vf-plate__empty{height:100%;min-height:140px;background:#e8e2d0}
.vf-plate:hover .vf-plate__img{filter:sepia(.04) saturate(1) contrast(1.08)}
/* A photograph that opens drifts in slightly under the pointer — the cue that
   it does something, before the cursor changes. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .vf-plate:has(.vf-zoom):hover .vf-plate__img{transform:scale(1.035)}
}

.vf-strip{padding-block:44px;border-bottom:1px solid var(--vf-line-soft)}
.vf-strip__grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.vf-strip__cell{height:280px}
@media (max-width:899px){
  .vf-strip__grid{grid-template-columns:1fr 1fr}
  .vf-strip__cell{height:200px}
  .vf-strip__cell:first-child{grid-column:1 / -1;height:260px}
}

.vf-gallery{padding-block:56px;border-bottom:1px solid var(--vf-line-soft)}
.vf-gallery__grid{display:grid;grid-template-columns:repeat(var(--vf-gal-cols,3),minmax(0,1fr));gap:18px}
@media (max-width:899px){.vf-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vf-gallery__grid{grid-template-columns:1fr}}
.vf-gallery__note{margin:16px 0 0;font-size:14px;color:var(--vf-fine)}

/* ------------------------------------------------------------------ quote */
.vf-quote{padding-block:56px;border-bottom:1px solid var(--vf-line-soft)}
.vf-quote__panel{background:var(--vf-paper);border:1px solid var(--vf-line);border-radius:14px;padding:36px;max-width:720px}
.light .vf-quote__panel{background:var(--vf-paper)}
.cream .vf-quote__panel,.grey .vf-quote__panel{background:#fff}
.vf-quote__title{font-weight:600;font-size:24px;margin:0 0 8px}
.vf-quote__lede{margin:0 0 20px;color:var(--vf-muted);line-height:1.6}
@media (max-width:560px){.vf-quote__panel{padding:24px}}

/* ------------------------------------------------------------- calculator */
.vf-calc{padding-block:48px;border-bottom:1px solid var(--vf-line-soft)}
.vf-calc__frame{border:1px solid var(--vf-line);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(38,49,31,.08);background:#fff}
.vf-calc__frame iframe{display:block;width:100%;border:none}

/* ------------------------------------------------------------------ stats */
.vf-stats{border-bottom:1px solid var(--vf-line-soft)}
.vf-stats__row{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;padding-block:24px}
.vf-stat{display:flex;align-items:center;gap:12px}
.vf-stat__icon{width:42px;height:42px;border-radius:50%;background:rgba(46,74,38,.1);color:var(--vf-green);display:grid;place-items:center;flex:none}
.vf-stat__n{font-family:var(--vf-serif);font-weight:700;font-size:30px;color:var(--vf-green)}
.vf-stat__l{font-size:14.5px;font-weight:600;color:#5f5847}

/* ----------------------------------------------------------------- footer */
.vf-footer{background:var(--vf-green-dark);color:#cfd4c9}
.vf-footer .wrap{padding-block:56px 20px}
.vf-footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px}
.vf-footer__name{font-family:var(--vf-serif);font-weight:700;font-size:20px;color:#fff;margin-bottom:10px}
.vf-footer__blurb{margin:0 0 12px;line-height:1.6;font-size:14px}
.vf-footer__phone{display:inline-block;font-weight:700;color:#fff;font-size:15px;text-decoration:none}
.vf-footer__phone:hover{color:var(--vf-tan)}
.vf-footer__lic{margin-top:8px;font-size:13px;color:#b7c0b1}

.vf-footcol{min-width:0}
.vf-footcol__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vf-tan);margin-bottom:12px;padding-top:14px;cursor:pointer;list-style:none;
}
.vf-footcol__head::-webkit-details-marker{display:none}
.vf-footcol__caret{display:none;font-size:16px;line-height:1}
.vf-footcol__caret::before{content:"+"}
.vf-footcol[open] .vf-footcol__caret::before{content:"−"}
.vf-footcol__links{display:grid;gap:7px;padding-bottom:14px}
.vf-footer a{color:#cfd4c9;text-decoration:none;font-size:14px;line-height:1.5}
.vf-footer a:hover{color:#fff;text-decoration:underline}

.vf-footer__legal{
  border-top:1px solid rgba(255,255,255,.15);margin-top:40px;padding-top:18px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;
}
.vf-footer__legal-links{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:699px){
  .vf-footer__cols{grid-template-columns:1fr;gap:0}
  .vf-footcol{border-top:1px solid rgba(255,255,255,.14)}
  .vf-footcol__caret{display:block;color:var(--vf-tan)}
  .vf-footcol__head{padding-block:14px;margin-bottom:0}
  .vf-footcol__links{padding-bottom:16px}
}

/* --------------------------------------------------------- back to top    */
.vf-top{
  position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;
  border:none;background:var(--vf-mark);color:#fff;box-shadow:0 8px 20px rgba(38,49,31,.28);
  cursor:pointer;display:grid;place-items:center;
}
.vf-top[hidden]{display:none}
.vf-top:hover{background:var(--vf-link)}

/* ------------------------------------------------------------------ misc  */
.vf-icon{display:block}
.bc-form-msg{font-family:var(--vf-sans)}

/* Print: the navigation, forms and decorative photography are noise on paper. */
@media print{
  .vf-topbar,.vf-header,.vf-footer,.vf-top,.vf-hero__form,.vf-strip,.vf-calc{display:none}
  .vf-hero{background:none;color:#000}
  .vf-hero__bg{display:none}
  .vf-hero__h1,.vf-kicker,.vf-rt--hero p{color:#000}
  .vf-qa{break-inside:avoid}
  .vf-qa__a{display:block !important}
}

/* A source note under a related band — the two permit guides cite their
   jurisdiction here, and a citation is not a pill link. */
.vf-related__note{margin:18px 0 0;max-width:78ch;font-size:13.5px;line-height:1.6;color:var(--vf-fine)}

/* Admin-only controls for block data the inline editor cannot reach by typing
   — the icon on a list item, a section's layout, the gallery's column count.
   Invisible to visitors: the markup is only emitted for a signed-in admin. */
.vf-choice{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;font-family:var(--vf-sans);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--vf-fine);background:rgba(255,255,255,.86);
  border:1px dashed var(--vf-field);border-radius:6px;padding:3px 7px}
.vf-choice select{font:inherit;font-size:12px;text-transform:none;letter-spacing:0;padding:2px 4px;
  border:1px solid var(--vf-field);border-radius:4px;background:#fff;color:var(--vf-ink)}
.dark .vf-choice,.charcoal .vf-choice{background:rgba(0,0,0,.45);color:#e8e4d8;border-color:rgba(255,255,255,.3)}

/* --- hero buttons on a phone --------------------------------------------- */
/* Two buttons at their natural widths stack left-aligned and ragged. Full width
   each reads as a pair, and the outline still says which one is secondary. */
@media (max-width:560px){
  .vf-hero__ctas{gap:10px}
  .vf-hero__ctas .vf-btn{flex:1 1 100%;text-align:center}
}

/* --- lightbox ------------------------------------------------------------- */
.vf-zoom{
  position:absolute;inset:0;z-index:3;border:none;background:transparent;cursor:zoom-in;
  padding:0;-webkit-appearance:none;appearance:none;
}
.vf-zoom span{
  position:absolute;right:12px;top:12px;width:34px;height:34px;border-radius:50%;
  background:rgba(34,55,29,.8);opacity:0;transform:scale(.85);
  transition:opacity .18s ease,transform .18s ease;
}
.vf-zoom span::before,.vf-zoom span::after{
  content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:1px;transform:translate(-50%,-50%);
}
.vf-zoom span::before{width:13px;height:2px}
.vf-zoom span::after{width:2px;height:13px}
.vf-plate:hover .vf-zoom span,.vf-zoom:focus-visible span{opacity:1;transform:none}
.vf-zoom:focus-visible{outline:2px solid #fff;outline-offset:-5px;border-radius:12px}
/* No hover on a touchscreen, so the cue has to be there already. */
@media (hover:none){.vf-zoom span{opacity:.92;transform:none;width:30px;height:30px}}

html.vf-lightbox-open{overflow:hidden}
.vf-lightbox{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(16px,4vw,48px);background:rgba(20,28,17,0);
  transition:background-color .3s ease;
}
.vf-lightbox.is-open{background:rgba(20,28,17,.94)}
.vf-lightbox[hidden]{display:none}
.vf-lightbox__stage{margin:0;display:grid;gap:14px;justify-items:center}
/* Width and height are set from the photograph's proportions by site.js, so
   the thumbnail's small file and the large one occupy the same box and the
   swap between them does not move anything. */
.vf-lightbox__img{
  display:block;max-width:100%;object-fit:contain;border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);transform-origin:center;
  transition:transform .34s cubic-bezier(.2,.7,.2,1),opacity .14s ease;
}
.vf-lightbox__stage.is-swapping .vf-lightbox__img{opacity:0}
.vf-lightbox__cap{
  display:flex;gap:14px;align-items:baseline;justify-content:center;flex-wrap:wrap;max-width:72ch;
  font-family:var(--vf-sans);font-size:14.5px;line-height:1.5;color:#e8e4d8;text-align:center;
}
.vf-lightbox__count{font-size:12.5px;letter-spacing:.08em;color:#a7b09f;white-space:nowrap}
.vf-lightbox__close,.vf-lightbox__nav{
  position:absolute;z-index:2;border:none;background:rgba(255,255,255,.1);color:#fff;
  cursor:pointer;display:grid;place-items:center;border-radius:50%;line-height:1;
  transition:background-color .16s ease,opacity .2s ease;
}
/* Chrome arrives after the photo has started to grow, and leaves first. */
.vf-lightbox__cap,.vf-lightbox__close,.vf-lightbox__nav{opacity:0}
.vf-lightbox.is-open .vf-lightbox__cap,
.vf-lightbox.is-open .vf-lightbox__close,
.vf-lightbox.is-open .vf-lightbox__nav{opacity:1;transition-delay:.12s}
.vf-lightbox__close:hover,.vf-lightbox__nav:hover{background:rgba(255,255,255,.22)}
.vf-lightbox__close:focus-visible,.vf-lightbox__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vf-lightbox__close{top:16px;right:16px;width:46px;height:46px;font-size:30px}
.vf-lightbox__nav{top:50%;margin-top:-26px;width:52px;height:52px;font-size:30px}
.vf-lightbox__nav--prev{left:12px}
.vf-lightbox__nav--next{right:12px}
.vf-lightbox__nav[hidden]{display:none}
@media (max-width:640px){
  .vf-lightbox__nav{top:auto;bottom:18px;margin-top:0;width:46px;height:46px}
  .vf-lightbox__nav--prev{left:22px}
  .vf-lightbox__nav--next{right:22px}
  .vf-lightbox__cap{margin-bottom:64px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .vf-lightbox,.vf-lightbox__img,.vf-lightbox__cap,.vf-lightbox__close,.vf-lightbox__nav{transition:none}
}

/* --- hero slideshow ------------------------------------------------------- */
/* The engine builds the track (MediaRenderer::slide) and cycles .is-active
   (assets/slide.js); the fade and the drift are the theme's. Motion is chosen
   per slideshow in the Builder and dropped for anyone who asks for less. */
.vf-hero__slides{position:absolute;inset:0}
.vf-hero__slides .bc-slide-item{
  position:absolute;inset:0;opacity:0;
  background-position:center;background-repeat:no-repeat;background-size:cover;
  transition:opacity 1.1s ease;
}
.vf-hero__slides .bc-slide-item.is-active{opacity:1}
/* The 800px WebP on a phone, the full one from 900px up (see vf_hero_slides).
   A custom property that is never used is never fetched. */
.vf-hero__slides .bc-slide-item{background-image:var(--vf-slide-sm)}
@media (min-width:900px){.vf-hero__slides .bc-slide-item{background-image:var(--vf-slide-lg)}}
/* Until the page has loaded, only the slide on screen has a picture. */
.vf-hero__slides:not(.is-ready) .bc-slide-item:not(.is-active){background-image:none}
.vf-hero__slides[data-transition="fade-through"] .bc-slide-item{transition:opacity .55s ease}
@media (prefers-reduced-motion:no-preference){
  .vf-hero__slides[data-motion="zoom-in"] .bc-slide-item,
  .vf-hero__slides[data-motion="mixed"] .bc-slide-item{transform:scale(1);transition:opacity 1.1s ease,transform 12s linear}
  .vf-hero__slides[data-motion="zoom-in"] .bc-slide-item.is-active,
  .vf-hero__slides[data-motion="mixed"] .bc-slide-item.is-active{transform:scale(1.08)}
  .vf-hero__slides[data-motion="zoom-out"] .bc-slide-item{transform:scale(1.08);transition:opacity 1.1s ease,transform 12s linear}
  .vf-hero__slides[data-motion="zoom-out"] .bc-slide-item.is-active{transform:scale(1)}
  .vf-hero__slides[data-motion="mixed"] .bc-slide-item:nth-child(even){transform:scale(1.08)}
  .vf-hero__slides[data-motion="mixed"] .bc-slide-item:nth-child(even).is-active{transform:scale(1)}
}

/* --- calculator teaser ---------------------------------------------------- */
/* Every "Price My Fence" link lands on #calculator; without this the sticky
   header would sit over the top of the estimator. */
.vf-calc{scroll-margin-top:84px}

.vf-teaser{position:relative;overflow:hidden;padding-block:56px}
/* The same slatted texture as the hero, so the band reads as part of the site
   rather than as an advert dropped into it. */
.vf-teaser::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 12px,transparent 12px 34px);
}
.vf-teaser__inner{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,64px);align-items:center;
}
.vf-teaser__kicker{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--vf-tan);
}
.vf-teaser__kicker .vf-icon{flex:none}
.vf-teaser__title{margin:0 0 14px;font-family:var(--vf-serif);font-weight:700;font-size:clamp(28px,3.4vw,40px);line-height:1.12;color:#fff}
.vf-teaser__text{margin:0 0 26px;max-width:48ch;font-size:16.5px;line-height:1.65;color:#dfe5d9}
.vf-teaser__cta{display:inline-flex;align-items:center;gap:12px}
.vf-teaser__arrow{transition:transform .18s ease}
.vf-teaser__cta:hover .vf-teaser__arrow{transform:translateX(4px)}

.vf-teaser__styles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vf-teaser__style{display:flex;flex-direction:column;gap:4px;min-width:0}
.vf-teaser__card{display:block;text-decoration:none}
.vf-teaser__plate{
  /* Sand rather than paper: the vinyl drawing is #E9E9E4, and on #f7f4ec it all
     but disappeared. */
  display:block;background:#e6dfcb;border-radius:10px;padding:10px 8px 4px;margin-bottom:8px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);transition:transform .2s ease,box-shadow .2s ease;
}
.vf-teaser__card:hover .vf-teaser__plate{transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.28)}
.vf-teaser__plate .vf-style__svg{display:block;width:100%;height:auto}
.vf-teaser__label{font-size:14.5px;font-weight:700;color:#fff;line-height:1.3}
.vf-teaser__price{font-family:var(--vf-serif);font-weight:700;font-size:17px;color:var(--vf-tan)}

@media (max-width:899px){
  .vf-teaser{padding-block:44px}
  .vf-teaser__inner{grid-template-columns:1fr}
}
/* Three drawings side by side survive down to about 480px; below that each
   style becomes a row — drawing left, name and price right — so nothing is
   drawn at a width where the pickets turn into a grey smear. */
@media (max-width:519px){
  .vf-teaser__styles{grid-template-columns:1fr;gap:10px}
  .vf-teaser__style{display:grid;grid-template-columns:132px 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center}
  .vf-teaser__card{grid-row:1 / 3}
  .vf-teaser__plate{margin-bottom:0}
  .vf-teaser__label{align-self:end}
  .vf-teaser__price{align-self:start}
  .vf-teaser__cta{display:flex;justify-content:center}
}

/* --- 404 ------------------------------------------------------------------ */
.vf-404{padding-block:clamp(56px,10vw,110px)}
.vf-404__inner{max-width:760px}
.vf-404__code{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vf-tan)}
.vf-404__title{margin:0 0 16px;font-family:var(--vf-serif);font-weight:700;font-size:clamp(34px,5vw,52px);line-height:1.08;color:#fff}
.vf-404__text{margin:0 0 28px;max-width:56ch;font-size:17px;line-height:1.65;color:#dfe5d9}
.vf-404__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.vf-404__links{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid rgba(255,255,255,.18);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 24px}
.vf-404__links a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:rgba(236,201,168,.5);text-underline-offset:4px}
.vf-404__links a:hover{color:var(--vf-tan)}

/* --- phone and NAP -------------------------------------------------------- */
.vf-footer__phone{display:inline-flex;align-items:center;gap:6px}
.vf-footer__nap{display:flex;flex-direction:column;gap:3px;margin-top:10px;font-style:normal;font-size:14px;line-height:1.5;color:#cfd4c9}
.vf-footer__nap a{color:#fff;text-decoration:none}
.vf-footer__nap a:hover{color:var(--vf-tan)}
.vf-footer__hours{color:#b7c0b1}

/* On a phone the top bar is only the number: the message beside it wrapped onto
   two lines above the header, and the number is the part anyone taps. */
@media (max-width:719px){
  .vf-topbar__inner > span:first-child{display:none}
  .vf-topbar__inner{justify-content:center}
  .vf-topbar__phone{font-size:15px;padding-block:2px}
}

/* Sticky call / quote bar on phones. */
.vf-callbar{display:none}
@media (max-width:719px){
  .vf-callbar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(253,252,248,.97);
    border-top:1px solid var(--vf-line);box-shadow:0 -6px 18px rgba(0,0,0,.08);
  }
  .vf-callbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--vf-radius);
    font-weight:700;font-size:15.5px;text-decoration:none}
  .vf-callbar__call{background:var(--vf-green);color:#fff}
  .vf-callbar__quote{background:var(--vf-mark);color:#fff}
  body{padding-bottom:72px}
  .vf-top{bottom:84px}
}
@media print{.vf-callbar{display:none}}

/* --- guide byline ----------------------------------------------------------- */
.vf-byline{display:flex;flex-wrap:wrap;gap:4px 10px;margin:-8px 0 20px;font-size:14px;color:#cfd4c9}
.vf-byline>*+*::before{content:"·";display:inline-block;margin-right:10px;color:#8e9b86;text-decoration:none}
.vf-byline a{color:var(--vf-tan);text-decoration:underline;text-underline-offset:3px}

/* --- prose section ------------------------------------------------------------ */
.vf-prose__col{max-width:780px}
.vf-prose__body{font-size:16.5px}
.vf-prose__body h3{font-weight:600;font-size:21px;line-height:1.3;margin:28px 0 10px}
.vf-prose__body h3:first-child{margin-top:0}
.vf-prose__body table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:15px;line-height:1.5}
.vf-prose__body th,.vf-prose__body td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--vf-line)}
.vf-prose__body th{font-weight:700;color:var(--vf-head);background:rgba(180,95,58,.07)}
.vf-prose__body .vf-table{overflow-x:auto;margin:6px 0 18px}
.vf-prose__body .vf-table table{margin:0;min-width:560px}
.vf-prose__body blockquote{margin:0 0 16px;padding:12px 18px;border-left:3px solid var(--vf-mark);background:rgba(180,95,58,.06);font-size:15.5px}
.vf-prose__body .vf-note{padding:14px 18px;border:1px solid var(--vf-line);border-radius:10px;background:var(--vf-card);font-size:15px}
.cream .vf-prose__body .vf-note{background:#fff}

/* --- link cards --------------------------------------------------------------- */
.vf-linkcards__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:6px}
.vf-linkcard{display:flex;flex-direction:column;gap:8px;padding:22px 22px 20px;border:1px solid var(--vf-line);border-radius:12px;
  background:var(--vf-card);color:var(--vf-body);text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s}
.cream .vf-linkcard,.grey .vf-linkcard,.gold-tint .vf-linkcard{background:#fff}
.vf-linkcard:hover{border-color:var(--vf-mark);transform:translateY(-2px);box-shadow:0 10px 24px rgba(38,49,31,.08)}
.vf-linkcard__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:rgba(180,95,58,.12);color:var(--vf-mark)}
.vf-linkcard__title{font-family:var(--vf-serif);font-weight:600;font-size:19px;line-height:1.25;color:var(--vf-head)}
.vf-linkcard__text{font-size:15px;line-height:1.55}
.vf-linkcard__cta{margin-top:auto;padding-top:4px;font-weight:700;font-size:14px;color:var(--vf-link)}

/* --- sources ------------------------------------------------------------------ */
.vf-sources{padding-block:48px;border-bottom:1px solid var(--vf-line-soft)}
.vf-sources__col{max-width:860px}
.vf-sources__title{font-weight:600;font-size:23px;margin:0 0 10px}
.vf-sources__lead{margin-bottom:14px}
.vf-sources__list{margin:0;padding-left:22px;font-size:15px;line-height:1.55}
.vf-sources__list li{margin-bottom:10px}
.vf-sources__list a{color:var(--vf-link);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.vf-sources__pub{display:inline;color:var(--vf-muted)}
.vf-sources__pub::before{content:" — "}
.vf-sources__note{display:block;font-size:14px;color:var(--vf-fine)}
.vf-sources__checked{margin:16px 0 0;font-size:13.5px;color:var(--vf-fine)}

/* --- contact ------------------------------------------------------------------ */
.vf-contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:start}
@media (max-width:899px){.vf-contact__grid{grid-template-columns:1fr;gap:32px}}
.vf-contact__lede{font-size:16.5px;line-height:1.65;margin:0 0 20px}
.vf-contact__list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.vf-contact__list li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.55}
.vf-contact__list address{font-style:normal}
.vf-contact__list a{color:var(--vf-link)}
.vf-contact__icon{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:rgba(180,95,58,.12);color:var(--vf-mark)}
.vf-contact__label{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--vf-muted);margin-bottom:2px}
.vf-contact__big{font-family:var(--vf-serif);font-size:24px;font-weight:600;text-decoration:none}
.vf-contact__small{display:block;font-size:13.5px;color:var(--vf-fine)}
.vf-contact__areas{margin-top:26px;padding-top:20px;border-top:1px solid var(--vf-line)}
.vf-contact .vf-quote__panel{max-width:none}

/* --- photo upload ------------------------------------------------------------- */
.vf-photos{position:relative;margin:2px 0 4px}
.vf-photos__pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;cursor:pointer}
.vf-photos__input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden}
.vf-photos__btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1.5px dashed var(--vf-field);border-radius:8px;
  font-weight:700;font-size:14px;color:var(--vf-head);background:#fff}
.vf-photos__pick:hover .vf-photos__btn,.vf-photos__input:focus-visible+.vf-photos__btn{border-color:var(--vf-link);color:var(--vf-link)}
.vf-photos__input:focus-visible+.vf-photos__btn{outline:2px solid rgba(154,79,43,.35);outline-offset:2px}
.vf-photos__hint{font-size:12.5px;line-height:1.4;color:var(--vf-fine)}
.vf-photos.is-full .vf-photos__pick{display:none}
.vf-photos.is-busy .vf-photos__btn{opacity:.6}
.vf-photos__list{display:flex;gap:10px;margin-top:10px}
.vf-photos__item{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;background:var(--vf-sand)}
.vf-photos__item img{width:100%;height:100%;object-fit:cover;display:block}
.vf-photos__rm{position:absolute;top:3px;right:3px;width:24px;height:24px;border:none;border-radius:50%;background:rgba(20,20,20,.72);color:#fff;
  font-size:16px;line-height:24px;padding:0;cursor:pointer}
.vf-photos__msg{margin:8px 0 0;font-size:13px;color:#8f1d1d}
.vf-form__response{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 0;font-size:13px;color:var(--vf-muted)}
.vf-form--wide .vf-form__response{justify-content:flex-start}
@media (max-width:560px){.vf-byline>*+*::before{display:none}.vf-byline{gap:2px 14px}}

/* --- blog ---------------------------------------------------------------------- */
.vf-blog-off{position:relative;z-index:5;margin:0;padding:12px var(--vf-gutter);background:#fff4d6;border-bottom:1px solid #e8cf8a;color:#5a4410;font-size:14.5px;text-align:center}
.vf-blog-off a{color:#7a4f10;font-weight:700}

.vf-arthead__inner{position:relative;padding-block:64px 72px;max-width:calc(760px + 2 * var(--vf-gutter))}
.vf-arthead__h1 em{font-style:italic;color:var(--vf-tan)}
.vf-arthead__sub{margin:0 0 22px;font-size:19px;line-height:1.6;color:#e8e4d8;max-width:760px}
.vf-arthead .vf-byline{margin:0}

.vf-artcover{padding-block:40px 0}
.vf-artcover__fig{max-width:920px;margin:0 auto}
.vf-artcover__cap{margin:10px 0 0;font-size:13.5px;color:var(--vf-fine);text-align:center}

.vf-artbody{padding-block:44px 64px}
.vf-artbody__col{margin:0 auto;max-width:760px;font-size:17.5px}
.vf-artbody--regular .vf-artbody__col{max-width:880px}
.vf-artbody--wide .vf-artbody__col{max-width:1040px}
.vf-artbody__col h2{font-weight:600;font-size:clamp(24px,2.6vw,30px);line-height:1.25;margin:36px 0 12px}
.vf-artbody__col h2:first-child{margin-top:0}
.vf-artbody__col img{border-radius:10px;height:auto}

.vf-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px;margin-top:8px}
.vf-post{display:flex;flex-direction:column;border:1px solid var(--vf-line);border-radius:12px;overflow:hidden;background:#fff;color:var(--vf-body);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.vf-post:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(38,49,31,.1);border-color:var(--vf-mark)}
.vf-post__img{position:relative;display:block;aspect-ratio:16/10;background:var(--vf-sand);overflow:hidden}
.vf-post__img img{width:100%;height:100%;object-fit:cover;display:block}
.vf-post__img--empty{display:grid;place-items:center}
.vf-post__img--empty svg{width:70%;height:auto;opacity:.85}
.vf-post__cat{position:absolute;left:12px;top:12px;padding:4px 10px;border-radius:999px;background:rgba(38,49,31,.88);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em}
.vf-post__body{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.vf-post__meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--vf-fine)}
.vf-post__meta span+span::before{content:"·";margin-right:12px}
.vf-post__title{font-family:var(--vf-serif);font-weight:600;font-size:20px;line-height:1.28;color:var(--vf-head)}
.vf-post__desc{font-size:15px;line-height:1.55}
.vf-post__read{margin-top:auto;padding-top:4px;font-weight:700;font-size:14px;color:var(--vf-link)}

.vf-bloggrid__cats{margin:4px 0 26px}
.vf-chip.is-on{background:var(--vf-green);border-color:var(--vf-green);color:#fff}
.vf-bloggrid__empty{margin:26px 0;padding:40px 20px;border:1px dashed var(--vf-line);border-radius:12px;text-align:center;color:var(--vf-muted)}
.vf-bloggrid__admin{margin:22px 0 0;font-size:13.5px;color:var(--vf-muted)}
.vf-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:34px}
.vf-pager>a:last-child{justify-self:end}
.vf-pager__info{font-size:14px;color:var(--vf-muted)}

.vf-latest__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}

.vf-postcta{padding-block:48px}
.vf-postcta__inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.vf-postcta__title{margin:0 0 6px;font-family:var(--vf-serif);font-weight:700;font-size:clamp(24px,3vw,32px);color:#fff}
.vf-postcta__text{margin:0;color:#d7dfd0;font-size:16px}
.vf-postcta__btns{display:flex;gap:12px;flex-wrap:wrap}