@charset "UTF-8";
/* ==========================================================================
   VISION ENTERPRISES — Layout primitives

   Replaces bootstrap-5.3.3.min.css.

   The site used the full Bootstrap stylesheet — 232 KB raw, 31 KB gzipped,
   render-blocking on every page — for exactly 37 of its classes. Everything
   else on the site is hand-written. This file reimplements those 37 faithfully
   (same breakpoints, same 1.5rem default gutter, same off-canvas transition
   and state classes) together with the handful of Reboot rules the site
   actually depended on.

   If a Bootstrap class is needed that is not here, add it here rather than
   loading Bootstrap again.

   Breakpoints, as Bootstrap: sm 576, md 768, lg 992, xl 1200.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS — self-hosted

   Previously loaded from fonts.googleapis.com, which cost a DNS lookup, a
   TLS handshake and a render-blocking round trip to a third-party origin
   before a single character could be painted. Both files are now served
   from this origin, preloaded in the document head, and cached for a year.

   Inter is the variable latin file Google itself serves for weights 400-700,
   declared once across the whole axis. Barlow Condensed is used at 700 only.
   Latin subset only: the site is written in English and the fallback stack
   covers anything outside it.

   Both are licensed under the SIL Open Font License, which permits hosting.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter-latin-var.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: 'Barlow Condensed';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/barlow-condensed-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;
}

/* --------------------------------------------------------------------------
   1. REBOOT — only the parts style.css does not already cover
   -------------------------------------------------------------------------- */
button,
input,
optgroup,
select,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

button,
select { text-transform: none; }

button,
[type="button"],
[type="reset"],
[type="submit"] { -webkit-appearance: button; }

button { border-radius: 0; }

/* Keeps the focus ring for keyboard users while removing it after a click,
   which is what the browser default does not do on its own. */
button:focus:not(:focus-visible) { outline: 0; }

textarea { resize: vertical; }

label { display: inline-block; }

table {
	caption-side: bottom;
	border-collapse: collapse;
}
th { text-align: inherit; }
thead, tbody, tfoot, tr, td, th {
	border-color: inherit;
	border-style: solid;
	border-width: 0;
}

/* <details>/<summary> power the FAQ accordions. */
summary { display: list-item; cursor: pointer; }

[hidden] { display: none !important; }

b, strong { font-weight: bolder; }
small { font-size: .875em; }

/* --------------------------------------------------------------------------
   2. GRID
   -------------------------------------------------------------------------- */
.row {
	--ve-gx: 1.5rem;
	--ve-gy: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--ve-gy));
	margin-right: calc(-.5 * var(--ve-gx));
	margin-left: calc(-.5 * var(--ve-gx));
}
.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--ve-gx) * .5);
	padding-left: calc(var(--ve-gx) * .5);
	margin-top: var(--ve-gy);
}

.col-6  { flex: 0 0 auto; width: 50%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Gutters. Bootstrap's spacer scale: 3 = 1rem, 4 = 1.5rem, 5 = 3rem. */
.g-3 { --ve-gx: 1rem;   --ve-gy: 1rem; }
.g-4 { --ve-gx: 1.5rem; --ve-gy: 1.5rem; }
.g-5 { --ve-gx: 3rem;   --ve-gy: 3rem; }

@media (min-width: 768px) {
	.col-md-6 { flex: 0 0 auto; width: 50%; }
}

@media (min-width: 992px) {
	.col-lg-2 { flex: 0 0 auto; width: 16.66666667%; }
	.col-lg-3 { flex: 0 0 auto; width: 25%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
	.col-lg-5 { flex: 0 0 auto; width: 41.66666667%; }
	.col-lg-6 { flex: 0 0 auto; width: 50%; }
	.col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
	.col-lg-8 { flex: 0 0 auto; width: 66.66666667%; }
}

@media (min-width: 1200px) {
	.g-xl-5 { --ve-gx: 3rem; --ve-gy: 3rem; }
}

/* --------------------------------------------------------------------------
   3. UTILITIES

   Order matters exactly as it does in Bootstrap: the base utilities come
   first so that `d-none d-lg-flex` hides below lg and shows at lg and up.
   -------------------------------------------------------------------------- */
.d-none  { display: none !important; }
.d-flex  { display: flex !important; }
.d-block { display: block !important; }

.align-items-center { align-items: center !important; }
.text-center        { text-align: center !important; }
.w-100              { width: 100% !important; }

.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

@media (min-width: 768px) {
	.d-md-none         { display: none !important; }
	.d-md-flex         { display: flex !important; }
	.d-md-inline-flex  { display: inline-flex !important; }
}

@media (min-width: 992px) {
	.d-lg-none  { display: none !important; }
	.d-lg-block { display: block !important; }
	.d-lg-flex  { display: flex !important; }

	.order-lg-1 { order: 1 !important; }
	.order-lg-2 { order: 2 !important; }
}

/* Visible to screen readers only. */
.visually-hidden:not(caption) { position: absolute !important; }
.visually-hidden {
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
   4. COLLAPSE

   main.js toggles .show; the CSS does the rest. Used by the mobile
   "Services" group in the drawer.
   -------------------------------------------------------------------------- */
.collapse:not(.show) { display: none; }

/* --------------------------------------------------------------------------
   5. OFF-CANVAS DRAWER

   State classes are driven by initDrawer() in main.js, which adds and removes
   .showing, .show and .hiding in that order and creates the backdrop element.
   Only the "end" (right-hand) variant is used.
   -------------------------------------------------------------------------- */
.offcanvas {
	/* Overridable so a project class can size the drawer without having to
	   out-specify .offcanvas.offcanvas-end, which is what .ve-offcanvas was
	   silently losing to before. */
	--ve-offcanvas-width: 400px;
	position: fixed;
	bottom: 0;
	z-index: 1045;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	visibility: hidden;
	background-color: #fff;
	background-clip: padding-box;
	outline: 0;
	transition: transform .3s ease-in-out;
}
.offcanvas.offcanvas-end {
	top: 0;
	right: 0;
	width: var(--ve-offcanvas-width);
	transform: translateX(100%);
}
.offcanvas.show:not(.hiding),
.offcanvas.showing { transform: none; }

.offcanvas.showing,
.offcanvas.show,
.offcanvas.hiding { visibility: visible; }

.offcanvas-header {
	display: flex;
	align-items: center;
	padding: 1rem;
}
.offcanvas-body {
	flex-grow: 1;
	padding: 1rem;
	overflow-y: auto;
}

.offcanvas-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
	background-color: #000;
}
.offcanvas-backdrop.fade { opacity: 0; }
.offcanvas-backdrop.show { opacity: .5; }

.fade { transition: opacity .15s linear; }

@media (prefers-reduced-motion: reduce) {
	.offcanvas,
	.fade { transition: none; }
}