/* ==========================================================================
   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 the menu below 740px,
   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}
}
/* Measured again in October 2026 with the Blog link in the row: the full row
   needs about 1320px, so the estimator is icon-only up to 1339px, and below
   1180px the name beside the mark goes as well (still read out: the link keeps
   it as visually hidden text). With these the row holds from 1024px up; site.js
   switches to the burger if an edited menu outgrows it anyway. */
@media (min-width:1024px) and (max-width:1339px){
  .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:1179px){
  .vf-brand__text{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}
}
/* A tablet, 740–1023px: the menu keeps its row and the two buttons go under
   the burger, which opens a small panel on the right with just those two, the
   estimate first. The row needs about 750px at 15px with the mark alone; the
   name beside the mark comes back from 920px, where it fits. site.js switches
   to the phone layout if the row wraps anyway. */
@media (min-width:740px) and (max-width:1023px){
  .vf-header:not(.vf-header--compact) .vf-header__inner{column-gap:14px}
  .vf-header:not(.vf-header--compact) .vf-burger{display:grid;order:3}
  .vf-header:not(.vf-header--compact) .vf-menu__label,
  .vf-header:not(.vf-header--compact) .vf-nav__link{padding-inline:8px;font-size:15px}
  .vf-header:not(.vf-header--compact) .vf-nav__ctas{
    position:absolute;top:100%;right:var(--vf-gutter);z-index:60;
    display:none;flex-direction:column;align-items:stretch;gap:10px;width:280px;margin:0;padding:18px;
    background:#fff;border:1px solid var(--vf-line);box-shadow:0 16px 36px rgba(17,24,39,.16);
  }
  .vf-header:not(.vf-header--compact) .vf-header__inner.is-open .vf-nav__ctas{display:flex}
  .vf-header:not(.vf-header--compact) .vf-nav__cta{order:-1}
  .vf-header:not(.vf-header--compact) .vf-nav__cta,
  .vf-header:not(.vf-header--compact) .vf-nav__calc{display:flex;justify-content:center}
}
@media (min-width:740px) and (max-width:919px){
  .vf-header:not(.vf-header--compact) .vf-brand__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:740px) and (max-width:767px){
  .vf-header:not(.vf-header--compact) .vf-header__inner{column-gap:10px}
  .vf-header:not(.vf-header--compact) .vf-menu__label,
  .vf-header:not(.vf-header--compact) .vf-nav__link{padding-inline:7px;font-size:14.5px}
}

.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}
/* site.js nudges an open panel back inside the window (--vf-panel-shift) when
   its natural place would cross either edge; a short window gives the panel
   its own scroll rather than cutting off the last links. */
@media (min-width:740px){
  .vf-menu__panel{transform:translateX(var(--vf-panel-shift,0px));max-height:calc(100vh - 130px);overflow-y:auto}
  .vf-header--compact .vf-menu__panel{transform:none;max-height:none;overflow:visible}
}
.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)}
/* A link with links under it (menu rows with a parent): the children follow
   it one step in, behind a guide line. */
.vf-menu__sub{margin:0 0 4px 12px;padding-left:4px;border-left:1px solid var(--vf-line)}
.vf-menu__sub a{font-size:14px;padding-block:6px;color:var(--vf-muted)}
.vf-menu__caret{display:inline-block;transition:transform .18s ease}
.vf-menu[open] > .vf-menu__label .vf-menu__caret{transform:rotate(180deg)}

/* The page under an open burger menu stays where it is (site.js sets the class
   only for the phone layout's full menu, not the tablet's two buttons). */
html.vf-nav-open{overflow:hidden}
.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;white-space:nowrap}

/* A phone: brand, the estimate button in the middle of the space left, the
   burger with the whole menu at the right edge. */
@media (max-width:739px){
  .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-inline:auto}
  .vf-header__cta-sm + .vf-burger{margin-left:0}
  /* The open menu is a layer over the page, not a block that pushes the page
     down: pinned under the header, its own scroll, the page dimmed behind it
     (a tap there closes it, see site.js). --vf-nav-top is the header's bottom
     edge, measured by site.js when the menu opens. */
  .vf-nav{
    position:absolute;left:0;right:0;top:100%;z-index:2;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid var(--vf-line);background:#fff;box-shadow:0 18px 36px rgba(17,24,39,.2);
    max-height:calc(100vh - var(--vf-nav-top,110px));max-height:calc(100dvh - var(--vf-nav-top,110px));
    overflow-y:auto;overscroll-behavior:contain;
  }
  .vf-header__inner.is-open .vf-nav{display:flex}
  .vf-header__inner.is-open::after{content:"";position:fixed;left:0;right:0;bottom:0;top:var(--vf-nav-top,110px);z-index:1;background:rgba(17,24,39,.45)}
  /* One column, never two: a column flexbox that may wrap breaks into a second
     column as soon as an open dropdown makes it taller than the screen. */
  .vf-nav{flex-wrap:nowrap}
  /* The tree: top-level rows full width; their links one step in behind a
     guide line; a third level one step further and lighter. */
  .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[open] > .vf-menu__label{background:var(--vf-sand);color:var(--vf-link)}
  .vf-menu__caret{color:var(--vf-mark);font-size:14px}
  .vf-nav .vf-menu__panel{position:static;width:auto;max-width:none;transform:none;
    max-height:none;overflow:visible;margin:4px 0 12px 22px;padding:0;border:none;border-left:2px solid var(--vf-tan-mid);border-radius:0;box-shadow:none}
  .vf-nav .vf-menu[open] > .vf-menu__panel{display:flex;flex-direction:column}
  .vf-nav .vf-menu__panel a{display:block;padding:10px 16px;border-radius:0;font-size:15px;font-weight:500;color:var(--vf-body)}
  .vf-nav .vf-menu__panel a:hover{background:var(--vf-sand);color:var(--vf-link)}
  .vf-nav .vf-menu__sub{margin:0 0 6px 16px;border-left:1px solid var(--vf-line)}
  .vf-nav .vf-menu__sub a{padding:8px 14px;font-size:14.5px;color:var(--vf-muted)}
  .vf-nav .vf-menu__sub .vf-menu__sub a{font-size:14px}
  .vf-nav__link{padding:16px 20px;font-size:16px;color:var(--vf-head);border-bottom:1px solid var(--vf-line-soft)}
  /* The estimate button stays in view in the header above the open menu, so
     the menu ends with the estimator alone. */
  .vf-nav__ctas{margin:16px 20px 18px;flex-direction:column;align-items:stretch;gap:10px}
  .vf-nav__calc{display:flex;justify-content:center}
  .vf-nav__cta{display:none}
}
/* The same burger layout on a wide screen, switched on by site.js when the row
   does not fit after all: an editor's longer menu, a wider font. The header
   takes the burger rather than a second line; a two-row header is 130px of
   page on every scroll. */
.vf-header--compact .vf-header__inner{row-gap:0}
.vf-header--compact .vf-burger{display:grid;order:3;margin-left:auto}
.vf-header--compact .vf-header__cta-sm{display:inline-block;order:2;margin-inline:auto}
.vf-header--compact .vf-header__cta-sm + .vf-burger{margin-left:0}
.vf-header--compact .vf-nav{
  position:absolute;left:0;right:0;top:100%;z-index:2;
  display:none;flex-direction:column;align-items:stretch;gap:0;
  border-top:1px solid var(--vf-line);background:#fff;box-shadow:0 18px 36px rgba(17,24,39,.2);
  max-height:calc(100vh - var(--vf-nav-top,110px));max-height:calc(100dvh - var(--vf-nav-top,110px));
  overflow-y:auto;overscroll-behavior:contain;
}
.vf-header--compact .vf-header__inner.is-open .vf-nav{display:flex}
.vf-header--compact .vf-header__inner.is-open::after{content:"";position:fixed;left:0;right:0;bottom:0;top:var(--vf-nav-top,110px);z-index:1;background:rgba(17,24,39,.45)}
.vf-header--compact .vf-nav{flex-wrap:nowrap}
.vf-header--compact .vf-menu{border-bottom:1px solid var(--vf-line-soft)}
.vf-header--compact .vf-menu__label{padding:16px 20px;font-size:16px;justify-content:space-between;color:var(--vf-head)}
.vf-header--compact .vf-menu[open] > .vf-menu__label{background:var(--vf-sand);color:var(--vf-link)}
.vf-header--compact .vf-menu__caret{color:var(--vf-mark);font-size:14px}
.vf-header--compact .vf-nav .vf-menu__panel{position:static;width:auto;max-width:none;transform:none;
  max-height:none;overflow:visible;margin:4px 0 12px 22px;padding:0;border:none;border-left:2px solid var(--vf-tan-mid);border-radius:0;box-shadow:none}
.vf-header--compact .vf-nav .vf-menu[open] > .vf-menu__panel{display:flex;flex-direction:column}
.vf-header--compact .vf-nav .vf-menu__panel a{display:block;padding:10px 16px;border-radius:0;font-size:15px;font-weight:500;color:var(--vf-body)}
.vf-header--compact .vf-nav .vf-menu__panel a:hover{background:var(--vf-sand);color:var(--vf-link)}
.vf-header--compact .vf-nav .vf-menu__sub{margin:0 0 6px 16px;border-left:1px solid var(--vf-line)}
.vf-header--compact .vf-nav .vf-menu__sub a{padding:8px 14px;font-size:14.5px;color:var(--vf-muted)}
.vf-header--compact .vf-nav .vf-menu__sub .vf-menu__sub a{font-size:14px}
.vf-header--compact .vf-nav__link{padding:16px 20px;font-size:16px;color:var(--vf-head);border-bottom:1px solid var(--vf-line-soft)}
.vf-header--compact .vf-nav__ctas{margin:16px 20px 18px;flex-direction:column;align-items:stretch;gap:10px}
.vf-header--compact .vf-nav__calc{display:flex;justify-content:center}
.vf-header--compact .vf-nav__cta{display:none}
.vf-header--compact .vf-nav__calc span,.vf-header--compact .vf-brand__text{position:static;width:auto;height:auto;overflow:visible;clip:auto}
/* A menu row with no page of its own ("Fences For…") in an ordinary dropdown. */
.vf-menu__heading{display:block;padding:8px 12px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vf-muted)}

/* ---- Services by category (vf_mega_panel) ----
   Mobile first: in the burger the panel is a tree in the menu's own order, each
   category a heading row with an arrow that opens its links (site.js marks the
   panel .is-ready; without it everything stays open). From 740px, with the bar
   in one row, the same markup becomes a full-width panel of columns under the
   header, with a foot of plain links and the estimate button; on a tablet the
   five columns fold into rows of three. */
.vf-mega:not([open]) .vf-mega__panel{display:none}
.vf-mega__panel{margin:4px 0 12px 22px;border-left:2px solid var(--vf-tan-mid)}
.vf-mega__headrow{display:flex;align-items:center;justify-content:space-between;min-height:46px;border-bottom:1px solid var(--vf-line-soft)}
/* Only the words are the link to the category's page; the rest of the row, out
   to the right edge, is the arrow button that opens its links, so a thumb
   aiming for the arrow does not land on the page instead. A category with no
   links (Chain Link) keeps the whole row as its link. */
.vf-mega__head{display:block;flex:0 1 auto;padding:12px 8px 12px 16px;font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vf-link);text-decoration:none}
.vf-mega__group.is-solo .vf-mega__head{flex:1}
a.vf-mega__head:hover{color:var(--vf-green-dark)}
.vf-mega__exp{display:none;flex:1 1 auto;align-self:stretch;align-items:center;justify-content:flex-end;min-width:46px;min-height:46px;padding:0 16px 0 12px;
  border:none;background:none;color:var(--vf-mark);font-size:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vf-mega__exp:active{background:var(--vf-sand)}
.vf-mega.is-ready .vf-mega__exp{display:flex}
/* "Fences For…" has no page: its words open the links too (site.js). */
.vf-mega.is-ready span.vf-mega__head{cursor:pointer}
.vf-mega__exp span{display:inline-block;transition:transform .18s ease}
.vf-mega__group.is-open .vf-mega__exp span{transform:rotate(180deg)}
.vf-mega__links{padding:2px 0 8px 14px}
.vf-mega.is-ready .vf-mega__group:not(.is-open) .vf-mega__links{display:none}
.vf-mega__links a{display:block;padding:9px 16px;font-size:15px;font-weight:500;color:var(--vf-body);text-decoration:none}
.vf-mega__links a:hover,.vf-mega__links a.is-current{background:var(--vf-sand);color:var(--vf-link)}
.vf-mega__foot{display:flex;flex-direction:column;padding:8px 16px 12px}
.vf-mega__foot > a:not(.vf-btn){padding:8px 0;font-size:15px;font-weight:600;color:var(--vf-link);text-decoration:none}
.vf-mega__cta{display:none}
@media (min-width:740px){
  .vf-header:not(.vf-header--compact) .vf-mega{position:static}
  .vf-header:not(.vf-header--compact) .vf-mega__panel{position:absolute;left:0;right:0;top:100%;z-index:60;margin:0;
    border-left:none;border-top:1px solid var(--vf-line);background:#fff;box-shadow:0 26px 50px rgba(17,24,39,.18);
    max-height:calc(100vh - 130px);overflow-y:auto;overscroll-behavior:contain}
  .vf-header:not(.vf-header--compact) .vf-mega__inner{max-width:1320px;margin:0 auto;padding:26px var(--vf-gutter) 0}
  .vf-header:not(.vf-header--compact) .vf-mega__cols{display:grid;grid-template-columns:repeat(var(--vf-mega-cols,5),minmax(0,1fr));gap:0 30px}
  .vf-header:not(.vf-header--compact) .vf-mega__group + .vf-mega__group{margin-top:22px}
  .vf-header:not(.vf-header--compact) .vf-mega__headrow{display:block;min-height:0;padding-bottom:10px;margin-bottom:8px;border-bottom:2px solid var(--vf-tan-mid)}
  .vf-header:not(.vf-header--compact) .vf-mega__group.is-solo .vf-mega__headrow{margin-bottom:0}
  .vf-header:not(.vf-header--compact) .vf-mega__head{padding:0;font-size:13px}
  .vf-header:not(.vf-header--compact) .vf-mega.is-ready span.vf-mega__head{cursor:default}
  .vf-header:not(.vf-header--compact) .vf-mega__exp{display:none}
  .vf-header:not(.vf-header--compact) .vf-mega .vf-mega__group .vf-mega__links{display:block;padding:0}
  .vf-header:not(.vf-header--compact) .vf-mega.is-ready .vf-mega__group:not(.is-open) .vf-mega__links{display:block}
  .vf-header:not(.vf-header--compact) .vf-mega__links a{padding:6px 0;color:var(--vf-ink);background:none}
  .vf-header:not(.vf-header--compact) .vf-mega__links a:hover,
  .vf-header:not(.vf-header--compact) .vf-mega__links a.is-current{color:var(--vf-link);background:none}
  .vf-header:not(.vf-header--compact) .vf-mega__links a.is-current{font-weight:600}
  .vf-header:not(.vf-header--compact) .vf-mega__foot{flex-direction:row;align-items:center;gap:24px;margin-top:20px;padding:14px 0 18px;border-top:1px solid var(--vf-line)}
  .vf-header:not(.vf-header--compact) .vf-mega__foot > a:not(.vf-btn){padding:0;font-size:14.5px}
  .vf-header:not(.vf-header--compact) .vf-mega__cta{display:inline-flex;margin-left:auto;padding:11px 22px;font-size:15px}
}
@media (min-width:740px) and (max-width:1023px){
  .vf-header:not(.vf-header--compact) .vf-mega__cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 26px}
}

/* ------------------------------------------------------------------- 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 24px;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}
.vf-trust__item--link{color:inherit;text-decoration:none}
.vf-trust__item--link .vf-trust__title::after{content:"\00a0→"}
.vf-trust__item--link:hover .vf-trust__title{text-decoration:underline;text-underline-offset:3px}
/* The lifetime warranty leads the strip, set apart in the dark brand colour.
   From 1240px all five share one row, the strip as wide as the header and the
   warranty's column a little wider so its name stays on one line; below that
   it takes the whole first row and the others sit under it, side by side on
   a laptop, two by two on a tablet, one under another on a phone.
   --vf-trust-n is the number of the other cards (trust-bar.php). */
.vf-trust__item--accent{background:var(--vf-green-dark)}
.vf-trust__item--accent .vf-trust__icon{color:var(--vf-tan)}
.vf-trust__item--accent .vf-trust__title{color:#fff}
.vf-trust__item--accent .vf-trust__lines{color:#dfe5d9}
.vf-trust__item--accent + .vf-trust__item{border-left:none}
.vf-trust__grid--lead{grid-template-columns:repeat(var(--vf-trust-n,4),minmax(0,1fr))}
.vf-trust__grid--lead .vf-trust__item--accent{grid-column:1/-1}
@media (min-width:1240px){
  .vf-trust__grid--lead{max-width:1320px;grid-template-columns:1.3fr repeat(var(--vf-trust-n,4),minmax(0,1fr))}
  .vf-trust__grid--lead .vf-trust__item--accent{grid-column:auto}
  .vf-trust__grid--lead .vf-trust__item{padding-inline:22px}
}
@media (max-width:899px){
  .vf-trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-trust__item{border-left:none;border-top:1px solid var(--vf-line-soft);padding:22px var(--vf-gutter)}
  .vf-trust__item--accent{border-top-color:transparent}
}
@media (max-width:559px){.vf-trust__grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------- 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}
/* Brand plus five link columns (Services, Materials, Resources, Service Areas,
   Company) in one row on a wide screen; below that they wrap as before. */
@media (min-width:1100px){.vf-footer__cols{grid-template-columns:minmax(0,1.25fr) repeat(5,minmax(0,1fr));gap:28px}}
.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 intro on a phone ------------------------------------------------ */
/* Two paragraphs of introduction are most of a phone screen before anything
   else. site.js folds them to the first lines and adds "Read more"; the text
   stays in the page (and in the index), it is only folded. */
.vf-rt--hero.is-folded{max-height:7.6em;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.vf-more{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:6px 0;border:none;background:none;
  font:inherit;font-size:15px;font-weight:700;color:var(--vf-link);cursor:pointer}
.vf-more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.vf-hero .vf-more{color:var(--vf-tan)}

/* --- 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}

/* --- the calculator's estimate on a quote form (site.js) ---------------------- */
/* Scrolled to from the calculator: the top of the form stays clear of the sticky header. */
form.vf-form{scroll-margin-top:120px}
.vf-est{position:relative;margin:0 0 4px;padding:12px 14px 12px 16px;border-left:4px solid var(--vf-mark);background:var(--vf-sand);font-size:14px;line-height:1.45;grid-column:1 / -1}
.vf-est__head{font-weight:700;color:var(--vf-head);margin-bottom:2px;padding-right:60px}
.vf-est__line{margin:2px 0 0;color:var(--vf-body)}
.vf-est__rm{position:absolute;top:10px;right:12px;border:none;background:none;padding:0;font:inherit;font-size:13px;font-weight:700;color:var(--vf-link);text-decoration:underline;cursor:pointer}

/* --- "Measure on the map" (fence-map.js) --------------------------------------- */
html.vf-fmap-open,html.vf-fmap-open body{overflow:hidden}
.vf-fmap{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:#111827;font-family:var(--vf-sans)}
.vf-fmap[hidden]{display:none}
.vf-fmap__top{display:flex;gap:8px;align-items:center;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));background:#fff;border-bottom:3px solid var(--vf-tan-mid)}
.vf-fmap__search{flex:1;display:flex;min-width:0}
.vf-fmap__search input{flex:1;min-width:0;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--vf-field);border-right:none;border-radius:0;outline:none;background:#fff;color:var(--vf-ink)}
.vf-fmap__search input:focus{border-color:var(--vf-link)}
.vf-fmap__search button{border:none;background:var(--vf-mark);color:#fff;font:inherit;font-weight:700;font-size:15px;padding:0 16px;cursor:pointer}
.vf-fmap__icon{flex:none;width:44px;height:44px;border:1px solid var(--vf-field);background:#fff;color:var(--vf-ink);display:grid;place-items:center;cursor:pointer}
.vf-fmap__icon:hover{border-color:var(--vf-link);color:var(--vf-link)}
.vf-fmap__stage{flex:1;position:relative;min-height:0}
.vf-fmap__map{position:absolute;inset:0;background:#1b2433}
.vf-fmap__hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:500;max-width:calc(100% - 24px);
  background:rgba(17,24,39,.86);color:#fff;font-size:14px;line-height:1.35;padding:9px 14px;text-align:center;pointer-events:none}
.vf-fmap__msg{position:absolute;left:12px;right:12px;top:58px;z-index:500;background:#fff;color:var(--vf-ink);font-size:14px;padding:10px 12px;border-left:4px solid #b45309}
.vf-fmap__msg[hidden]{display:none}
.vf-fmap__sheet{background:#fff;padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--vf-line)}
.vf-fmap__sum{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vf-fmap__total{font-family:var(--vf-serif);font-size:30px;font-weight:700;line-height:1;color:var(--vf-head)}
.vf-fmap__total small{font-family:var(--vf-sans);font-size:13px;font-weight:600;color:var(--vf-muted);letter-spacing:.06em;margin-left:4px}
.vf-fmap__runs{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.vf-fmap__run{font-size:12.5px;padding:4px 8px;border:1px solid var(--vf-line);color:var(--vf-body);background:var(--vf-sand)}
.vf-fmap__run.is-current{border-color:var(--vf-link);color:var(--vf-link);background:#fff;font-weight:700}
.vf-fmap__tools{display:flex;gap:8px;margin-top:10px}
.vf-fmap__tools button{flex:1;padding:11px 8px;border:1px solid var(--vf-field);background:#fff;color:var(--vf-ink);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.vf-fmap__tools button:hover:not(:disabled){border-color:var(--vf-link);color:var(--vf-link)}
.vf-fmap__tools button:disabled{opacity:.4;cursor:default}
.vf-fmap__use{display:block;width:100%;margin-top:10px;padding:15px;border:none;background:var(--vf-mark);color:#fff;font:inherit;font-size:17px;font-weight:700;cursor:pointer}
.vf-fmap__use:hover:not(:disabled){background:var(--vf-link)}
.vf-fmap__use:disabled{opacity:.45;cursor:default}
.vf-fmap__foot{margin:8px 0 0;font-size:11.5px;color:var(--vf-muted);line-height:1.4}
.vf-fmap__pt{display:block;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--vf-link);box-shadow:0 1px 6px rgba(0,0,0,.45)}
.vf-fmap__pt.is-first{border-color:var(--vf-tan-mid);background:var(--vf-link)}
.vf-fmap__pt.is-done{border-color:#fff;background:var(--vf-link);width:18px;height:18px;margin:2px}
.vf-fmap__segwrap{background:none;border:none}
.vf-fmap__seg{display:inline-block;transform:translate(-50%,-50%);background:rgba(17,24,39,.88);color:#fff;font:600 12.5px/1 var(--vf-sans);padding:4px 6px;white-space:nowrap}
@media (min-width:900px){
  .vf-fmap__sheet{display:flex;align-items:center;gap:16px}
  .vf-fmap__sum{flex:1}
  .vf-fmap__tools{margin-top:0;flex:0 0 auto}
  .vf-fmap__tools button{flex:none;padding:11px 14px}
  .vf-fmap__use{width:auto;margin-top:0;padding:14px 26px}
  .vf-fmap__foot{display: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}