/* Self-hosted Google Fonts (OFL): latin + latin-ext, from fonts.googleapis.com css2 (display=swap) */
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-1.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;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-3.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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-ext-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/plus-jakarta-sans-latin-5.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;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/unbounded-latin-ext-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/unbounded-latin-7.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;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/unbounded-latin-ext-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/unbounded-latin-7.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;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/unbounded-latin-ext-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/unbounded-latin-7.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;
}

/* generated by scripts/patch.py from the design capture */
[data-font="ub"] *{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important}
[data-font="ub"] [style*="Plex Mono"]{font-family:'IBM Plex Mono',monospace!important}
[data-font="ub"] [style*="font-stretch"]{font-stretch:normal!important;letter-spacing:-0.02em!important}
[data-font="ub"] :is(h1,h2,h3),[data-font="ub"] :is(h1,h2,h3) *{font-family:'Unbounded',sans-serif!important;font-weight:800!important;font-stretch:normal!important}
[data-font="ub"] h1{font-size:clamp(34px,4.9vw,84px)!important;line-height:1.08!important;letter-spacing:-0.035em!important}
[data-font="ub"] h2{font-size:clamp(26px,3.2vw,46px)!important;line-height:1.12!important;letter-spacing:-0.03em!important}
[data-font="ub"] h3{font-size:clamp(18px,1.9vw,28px)!important;line-height:1.12!important;letter-spacing:-0.02em!important}
[data-font="ub"] footer h3{font-size:clamp(26px,3vw,44px)!important}

@keyframes vsfpulse{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.8);opacity:0}} [data-menu-display],[data-font] [data-menu-display]{font-family:'Unbounded','Archivo',sans-serif!important;font-weight:800!important;letter-spacing:-0.03em!important}

.h-1qfcrd8:hover{border-color: rgb(17, 18, 20) !important; background: rgba(17, 18, 20, 0.05) !important;}
.h-1qgv5dy:hover{color: oklch(0.6 0.22 25) !important;}
.h-1qmfs2e:hover{font-weight: 800 !important; color: rgb(17, 18, 20) !important;}
.h-hnmowc:hover{text-decoration: underline !important; text-underline-offset: 4px !important;}
.h-j8udzt:hover{background: rgb(235, 232, 226) !important;}
.h-wtv57w:hover{background: rgb(42, 43, 47) !important;}

/* Site additions on top of the design's own CSS (src/design.css). The design styles almost
   everything inline; the states it switched in JS (menu open, header scrolled, picked
   buttons) are classes here, so they override inline styles with !important. */
[hidden] { display: none !important; }
:root { --vsf-header-h: 69px; }
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid oklch(0.6 0.22 25); outline-offset: 2px; }
@keyframes vsfpulse { 0% { transform: scale(1); opacity: .7 } 80%, 100% { transform: scale(2.8); opacity: 0 } }
@keyframes vsfmarq { from { transform: translateX(0) } to { transform: translateX(-50%) } }
[data-menu-display] { font-family: 'Unbounded', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.03em !important; }

/* header: desktop above 1000px, phone header + menu below */
.vsf-hd-phone { display: none; }
@media (max-width: 999px) {
  :root { --vsf-header-h: 73px; }
  .vsf-hd-desk { display: none; }
  .vsf-hd-phone { display: block; }
}
[data-head].is-scrolled {
  background: rgba(244, 242, 238, 0.62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) !important;
  backdrop-filter: blur(18px) saturate(1.6) !important;
  border-bottom-color: rgba(17, 18, 20, 0.1) !important;
  box-shadow: 0 6px 24px rgba(17, 18, 20, 0.06) !important;
}
nav[aria-label="Main"] a[aria-current="page"] { color: #111214 !important; font-weight: 800 !important; }
[data-menu].is-open {
  clip-path: inset(0 0 0 0) !important; visibility: visible !important;
  transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s !important;
}
[data-menu].is-open [data-menu-row], [data-menu].is-open [data-menu-foot] { opacity: 1 !important; transform: none !important; }
[data-menu].is-open [data-menu-foot] { transition-delay: .42s !important; }
[data-menu] [data-menu-row][aria-current="page"] { color: var(--acc-light, oklch(0.6 0.22 25)) !important; }

/* lists that become a swipe row on phones (the design switches them in JS) */
.vsf-phone-only { display: none !important; }
@media (max-width: 759px) {
  .vsf-phone-only { display: flex !important; }
  .vsf-pcar { grid-auto-flow: column !important; grid-auto-columns: 100% !important; overflow-x: auto !important; scroll-snap-type: x mandatory !important; margin-bottom: -1px !important; scrollbar-width: none; }
  .vsf-pcar::-webkit-scrollbar { display: none; }
}

/* service pages: the two smaller hero photos stay stacked beside the big one (the design's
   auto-fit put them side by side once that column passed ~490px) */
@media (min-width: 930px) { .vsf-hero-side { grid-template-columns: 1fr !important; } }

/* Projects: photos closer together (4 a row on wide screens); tag + title under each photo,
   the description laid over the photo on hover (on touch screens it shows in the photo viewer) */
.vsf-pgrid { gap: 28px 12px !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important; }
.vsf-pgrid > [data-open] { gap: 6px !important; }
.vsf-ov { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 18px; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 9, 10, 0.85), rgba(8, 9, 10, 0.35) 55%, rgba(8, 9, 10, 0));
  color: #f4f2ee; font-size: 14px; line-height: 1.45; text-wrap: pretty; opacity: 0; transition: opacity .3s ease; }
.vsf-ov > span { transform: translateY(8px); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
/* card photos (project cards, rail slides, the home service rows) zoom a little on hover */
.vsf-card img, [data-slide] img { transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
@media (hover: hover) {
  .vsf-card:hover .vsf-ov, .vsf-card:focus-visible .vsf-ov { opacity: 1; }
  .vsf-card:hover .vsf-ov > span, .vsf-card:focus-visible .vsf-ov > span { transform: none; }
  .vsf-card:hover img, [data-slide]:hover img { transform: scale(1.04); }
}
.vsf-more-row { display: flex; justify-content: center; margin-top: 40px; }
.vsf-more-btn { height: 54px; padding: 0 28px; border: 1px solid rgba(17, 18, 20, 0.3); border-radius: 2px; background: transparent;
  color: #111214; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; }
.vsf-more-btn:hover { border-color: #111214; background: rgba(17, 18, 20, 0.05); }
.vsf-more-n { color: #6a6b70; font-weight: 500; }

/* sideways rows (reviews, project rails, gallery) scroll sideways only: a vertical wheel or swipe
   always moves the page (a row a few px taller than its slides could otherwise scroll up/down) */
[data-rail], [style*="cursor: grab"] { overflow-y: hidden !important; }

/* opening hours: a pill under the shop address (Contact + footer) */
.vsf-hours { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 12px;
  border: 1px solid rgba(17, 18, 20, 0.2); border-radius: 999px; font-size: 14px; font-weight: 600; color: #111214; white-space: nowrap; }
.vsf-hours-dark { border-color: rgba(255, 255, 255, 0.22); color: #f4f2ee; margin-top: 12px; white-space: normal; border-radius: 14px; max-width: 100%; font-size: 13px; padding: 6px 10px; gap: 7px; }
.vsf-hours-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.72 0.17 145); flex: none; }

/* Home: Google reviews in the design's testimonial slider */
.vsf-quote { font-size: clamp(24px, 3.1vw, 44px) !important; line-height: 1.15 !important; max-width: 44ch !important; }
.vsf-rv-stars { display: flex; gap: 3px; color: #FBBC04; }   /* Google's review yellow */
.vsf-rv-g { flex: none; }
.vsf-rv-badge { display: inline-flex; align-items: center; gap: 10px; }
.vsf-rv-score { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.vsf-rv-score strong { margin-right: 2px; }
.vsf-rv-seal { flex: none; margin-left: -1px; }
figure > .vsf-rv-stars { margin-bottom: -24px; }   /* the stars right above a Wrap quote */
.vsf-rv-stars svg, .vsf-rv-g { display: block; }
.vsf-rv-by { display: flex !important; align-items: center; gap: 14px !important; }
.vsf-rv-face { width: 48px; height: 48px; flex: none; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  background: #111214; color: #f4f2ee; font-family: 'IBM Plex Mono', monospace; font-size: 15px; font-weight: 500; letter-spacing: 0.04em; }
img.vsf-rv-face { border-radius: 0; background: none; object-fit: contain; }   /* the picture is already round (Google's, Local Guide badge included) */
.vsf-rv-total { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 24px; border-top: 1px solid rgba(17, 18, 20, 0.15); font-size: 15px; color: #3a3b40; }
.vsf-rv-total strong { color: #111214; }
.vsf-rv-total > span:last-child { margin-left: auto; font-weight: 600; color: #111214;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.2, .8, .2, 1); }
.vsf-rv-total:hover { opacity: 1 !important; }
@media (max-width: 640px) {
  .vsf-rv-total { flex-direction: column; align-items: flex-start; }
  .vsf-rv-total > span:last-child { margin-left: 0; }
}
/* a slider arrow that cannot go further: ghosted, no hover, not clickable */
[data-rail-controls] button[aria-disabled="true"] { pointer-events: none; cursor: default; box-shadow: none !important; translate: none !important; }
.vsf-rv-total:hover > span:last-child { background-size: 100% 1px; }

/* client marquee: the design shrinks the names on phones */
@media (max-width: 759px) {
  .vsf-marq > div { gap: 28px !important; }
  .vsf-marq > div > span { font-size: 24px !important; gap: 28px !important; }
  .vsf-marq > div > span > span { width: 7px !important; height: 7px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .vsf-marq > div { animation-duration: 240s !important; }
}

/* forms (the design's pickers, as classes so a pick can switch them) */
.vf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vf-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; }
.vf-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #6a6b70; }
.vf-flabel { font-size: 13px; font-weight: 600; color: #3a3b40; }
.vf-input { padding: 15px 16px; border: 1px solid rgba(17, 18, 20, 0.2); background: #f4f2ee; color: #111214; font: inherit; font-size: 16px; border-radius: 2px; width: 100%; }
.vf-input:focus { border-color: #111214; outline: none; }
.vf-input.is-bad { border-color: oklch(0.6 0.22 25); }
.vf-bar { height: 4px; background: rgba(17, 18, 20, 0.12); transition: background .3s; }
.vf-bar.is-on { background: oklch(0.6 0.22 25); }
.vf-more { display: grid; gap: 18px; padding-top: 24px; }
.vf-card-t { font-size: 16px; font-weight: 800; font-stretch: 85%; text-transform: uppercase; line-height: 1.1; }
.vf-card-s { font-size: 13px; line-height: 1.35; opacity: 0.8; }
.vf-request .vf-card { min-height: 0; padding: 14px 16px; }
@media (max-width: 560px) { .vf-cards { grid-template-columns: repeat(2, 1fr) !important; } }
.vf-q { display: grid; gap: 8px; }
.vf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vf-opt { color: #8a8b90; font-weight: 400; }
.vf-card, .vf-chip, .vf-row, .vf-topic, .vf-pill { font: inherit; cursor: pointer; color: #111214; transition: background .15s, color .15s, border-color .15s; }
.vf-card { display: grid; gap: 6px; align-content: start; padding: 20px; min-height: 120px; text-align: left; border-radius: 2px; border: 1px solid rgba(17, 18, 20, 0.18); background: #f4f2ee; }
.vf-card[aria-pressed="true"] { border-color: oklch(0.6 0.22 25); background: oklch(0.6 0.22 25); color: #fff; }
.vf-chip { padding: 11px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; white-space: nowrap; border: 1px solid rgba(17, 18, 20, 0.22); background: transparent; }
.vf-row { padding: 16px 18px; text-align: left; font-size: 16px; font-weight: 600; border-radius: 2px; border: 1px solid rgba(17, 18, 20, 0.18); background: #f4f2ee; }
.vf-chip[aria-pressed="true"], .vf-row[aria-pressed="true"], .vf-pill[aria-pressed="true"] { border-color: #111214; background: #111214; color: #f4f2ee; }
.vf-item, .vf-qty { font: inherit; cursor: pointer; color: #111214; transition: background .15s, color .15s, border-color .15s; }
.vf-item { height: 42px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid rgba(17, 18, 20, 0.2); background: transparent; }
.vf-item[aria-pressed="true"] { border-color: var(--acc); background: var(--acc); }
.vf-qty { display: grid; gap: 6px; align-content: center; min-height: 80px; padding: 14px; text-align: left; border-radius: 2px; border: 1px solid rgba(17, 18, 20, 0.18); background: #f4f2ee; }
.vf-qty[aria-pressed="true"] { border-color: #111214; background: #111214; color: #f4f2ee; }
.vf-topic { display: grid; gap: 10px; align-content: space-between; min-height: 96px; padding: 16px; text-align: left; border-radius: 2px; border: 1px solid rgba(17, 18, 20, 0.18); background: #f4f2ee; }
.vf-topic[aria-pressed="true"] { border-color: oklch(0.6 0.22 25); background: oklch(0.6 0.22 25); color: #fff; }
.vf-pill { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; border: 1px solid rgba(17, 18, 20, 0.2); background: transparent; }
.vf-file { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px dashed rgba(17, 18, 20, 0.3); border-radius: 2px; cursor: pointer; }
.vf-send { padding: 16px 26px; border: 0; border-radius: 2px; font: inherit; font-weight: 700; font-size: 16px; white-space: nowrap; cursor: pointer; background: #111214; color: #f4f2ee; }
.vf-send[aria-disabled="true"] { cursor: not-allowed; background: rgba(17, 18, 20, 0.12); color: #8a8b90; }
.vf-send.is-busy { opacity: .6; cursor: progress; }
.vf-back { padding: 14px 0; background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; color: #111214; }
.vf-again { justify-self: start; margin-top: 8px; padding: 12px 0; background: none; border: 0; color: oklch(0.6 0.22 25); font: inherit; font-weight: 700; cursor: pointer; }
.vf-again:hover { text-decoration: underline; text-underline-offset: 4px; }
.vf-error { margin: 0; padding: 14px 16px; background: oklch(0.96 0.03 25); color: oklch(0.42 0.18 25); font-size: 15px; line-height: 1.5; }
.vf-error a { text-decoration: underline; }

/* ---- motion (site.js): blocks fade + rise in as they come on screen, photos fade in when
   loaded, buttons lift, arrows slide, links draw their underline. Only under .vsf-motion, which
   the page head sets when scripts run and the device does not ask for reduced motion. ---- */
.vsf-pre main section, .vsf-pre footer { opacity: 0; }
.vsf-motion .rv { opacity: 0; transform: translateY(24px); }
.vsf-motion .rv:not(.in) { transition: none !important; }   /* hide at once (buttons / links have their own transitions) */
.vsf-motion [data-rail] > .rv, .vsf-motion [style*="cursor: grab"] > .rv { transform: none; }   /* in a sideways row: fade only */
.vsf-motion .rv.in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rv-d, 0s); }
.vsf-motion img.vsf-fade { opacity: 0; }
.vsf-motion img.vsf-fade.is-loaded { opacity: 1; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.vsf-motion a, .vsf-motion button { transition: color .25s, background-color .25s, border-color .25s, box-shadow .25s, opacity .25s, translate .25s; }
.vsf-motion [data-filter], .vsf-motion [data-filter] > span { transition: color .3s, background-color .3s, border-color .3s, translate .25s; }
.vsf-motion .vsf-btn:hover { translate: 0 -2px; box-shadow: 0 10px 24px rgba(17, 18, 20, 0.16); opacity: 1 !important; }
.vsf-motion .vsf-btn:active { translate: 0 0; box-shadow: none; }
.vsf-arr { display: inline-block; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.vsf-motion a:hover .vsf-arr, .vsf-motion button:hover .vsf-arr { transform: translateX(4px); }
.vsf-motion a:hover .vsf-arr-l, .vsf-motion button:hover .vsf-arr-l { transform: translateX(-4px); }
.vsf-motion .vsf-ul, .vsf-motion .vsf-ul-on { justify-self: start; width: fit-content; }   /* the underline spans the text, not the column */
.vsf-motion .vsf-ul { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.2, .8, .2, 1), color .25s, opacity .25s; }
.vsf-motion .vsf-ul:hover { background-size: 100% 1px; opacity: 1 !important; }
.vsf-motion .vsf-ul-on { text-decoration: none !important; background: linear-gradient(var(--ulc, currentColor), var(--ulc, currentColor)) 0 100% / 100% 2px no-repeat; padding-bottom: 3px; }
.vsf-motion .vsf-ul-on:hover { animation: vsf-redraw .7s cubic-bezier(.2, .8, .2, 1); opacity: 1 !important; }
/* project cards everywhere (Home + service rows, Projects grid): a slow, gentle fade, left to right,
   well spaced (owner: not too fast, not rushed after each other) */
.vsf-motion .vsf-pgrid > .rv:not(.in) { transform: translateY(14px); }
.vsf-motion .vsf-card.rv.in { transition-duration: 1.2s, 1.2s; transition-delay: calc(var(--rv-d, 0s) * 2); }

/* home page entrances on top of the fade + rise */
.vsf-motion .rv.rv-h, .vsf-motion .rv.rv-img, .vsf-motion .rv.rv-line, .vsf-motion .rv.rv-bar { opacity: 1; transform: none; }
.vsf-motion .rv-h:not(.in) { clip-path: inset(0 0 100% 0); translate: 0 0.5em; }
.vsf-motion .rv-h.in { clip-path: inset(-10% -5% -25% -5%); translate: 0 0; transition: clip-path 1s cubic-bezier(.7, 0, .2, 1) var(--rv-d, 0s), translate 1s cubic-bezier(.2, .8, .2, 1) var(--rv-d, 0s); }
.vsf-motion .rv-img:not(.in) { clip-path: inset(100% 0 0 0); }
.vsf-motion .rv-img.in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) var(--rv-d, 0s); }
.vsf-motion .rv-img:not(.in) img { transform: scale(1.14); }
.vsf-motion .rv-img.in img { transition: transform 1.6s cubic-bezier(.2, .8, .2, 1) var(--rv-d, 0s), opacity .6s ease; }
.vsf-motion .vsf-card:hover .rv-img img, .vsf-motion [data-slide]:hover .rv-img img { transition-duration: .6s; transition-delay: 0s; }
.vsf-motion .rv-line { transform-origin: left center; }
.vsf-motion .rv-line:not(.in) { transform: scaleX(0); }
.vsf-motion .rv-line.in { transition: transform 1.2s cubic-bezier(.7, 0, .2, 1) calc(var(--rv-d, 0s) + .2s); }
.vsf-motion .rv-bar { position: relative; border-top-color: transparent !important; }
.vsf-motion .rv-bar::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-1 * var(--bw, 3px)); height: var(--bw, 3px); background: var(--bar); transform-origin: left center; transform: scaleX(0); }
.vsf-motion .rv-bar.in::before { transform: none; transition: transform 1s cubic-bezier(.7, 0, .2, 1) calc(var(--rv-d, 0s) + .15s); }
@keyframes vsf-redraw {
  0% { background-size: 100% 2px; background-position: 100% 100%; }
  45% { background-size: 0 2px; background-position: 100% 100%; }
  55% { background-size: 0 2px; background-position: 0 100%; }
  100% { background-size: 100% 2px; background-position: 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vsf-card img, [data-slide] img, .vsf-ov, .vsf-ov > span, .vsf-arr { transition: none; }
  .vsf-card:hover img, [data-slide]:hover img { transform: none; }
}

/* privacy page + the note under the forms */
.vsf-legal { max-width: 720px; display: grid; gap: 14px; margin-top: 12px; font-size: 17px; line-height: 1.65; color: #3a3b40; }
.vsf-legal p { margin: 0; }
.vsf-legal a, .vf-privacy a { color: #111214; text-decoration: underline; text-underline-offset: 3px; }
.vsf-legal-h { margin: 14px 0 -8px !important; font-size: 17px; color: #111214; }
.vf-privacy { margin: -12px 0 0; font-size: 13px; color: #6a6b70; }

/* open / closed dots (site.js sets .vsf-open / .vsf-closed on <html> from Ottawa time) */
:root { --vsf-closed-phone: oklch(0.6 0.22 25); --vsf-closed-hours: oklch(0.6 0.22 25); }
[data-div="apparel"] { --vsf-closed-phone: var(--acc); }   /* Apparel: the phone dot pulses beige when closed */
[data-dot] > span { transition: background-color .4s; }
.vsf-closed [data-dot="phone"] > span { background: var(--vsf-closed-phone) !important; }
.vsf-closed [data-dot="hours"] > span { background: var(--vsf-closed-hours) !important; }
.vsf-closed [data-dot="hours"] > span:first-child { animation: none !important; opacity: 0 !important; }
.vsf-hours-dot { position: relative; }
.vsf-open .vsf-hours-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: vsfpulse 1.8s ease-out infinite; }
.vsf-closed .vsf-hours-dot { background: var(--vsf-closed-hours); }

/* the Home project row and the reviews run to the screen edges when swiped (like "From quote to
   road"): the row reaches past the page margin and pads it back, so it still starts in line */
[data-proj-rail], [data-rail]:has(> figure) {
  margin-left: calc(-1 * clamp(20px, 4vw, 56px)) !important; margin-right: calc(-1 * clamp(20px, 4vw, 56px)) !important;
  padding-left: clamp(20px, 4vw, 56px) !important; padding-right: clamp(20px, 4vw, 56px) !important;
  scroll-padding-left: clamp(20px, 4vw, 56px); scroll-padding-right: clamp(20px, 4vw, 56px);
}   /* vsf-bleed */