.elementor-3670 .elementor-element.elementor-element-c096306{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS *//* =====================================================================
   Voigt Brothers — v5  (per-page custom CSS, Elementor Pro)
   Quiet luxury · editorial restraint · Playfair / Roboto / paper-navy-brass

   This file is the source of truth. The build script reads it and bakes
   it verbatim into `_elementor_page_settings.custom_css` on page 3670.

   Design constraints:
   - Mobile-first. Every section degrades to a single column at < 640px.
   - Burger menu uses native <details> — no JS dependency.
   - Motion: 220–360ms, cubic-bezier(.4,0,.2,1) defaults. Hover lifts ≤ 3px.
   - Scroll reveals use CSS view-timeline where supported, animation-delay
     stagger as the universal fallback (no IntersectionObserver, no JS).
   - prefers-reduced-motion: collapses all transitions and animations.
   ===================================================================== */

/* ====================================================================
   0. Foundation — restore scroll, normalize, type
   ==================================================================== */
html, body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; }
html { scroll-behavior: smooth; }
body.elementor-template-canvas { background: #F8F6F2; color: #1A1916; }
body.elementor-template-canvas .e-con { position: relative; }
body.elementor-template-canvas h1,
body.elementor-template-canvas h2,
body.elementor-template-canvas h3 { text-wrap: balance; }

/* Local design tokens */
body.elementor-template-canvas {
  --paper: #F8F6F2;
  --ink:   #1A1916;
  --navy:  #1C2B3A;
  --brass: #B8975A;
  --muted: #7A7670;
  --line:  rgba(28, 43, 58, 0.14);
  --ease:  cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ====================================================================
   1. Shared editorial primitives
   ==================================================================== */
body.elementor-template-canvas .vbcn-kicker .elementor-heading-title {
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
}
body.elementor-template-canvas .vbcn-section-title .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(30px, 4.2vw, 60px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.018em !important;
  color: var(--ink) !important;
}

/* Generic focus ring (a11y) */
body.elementor-template-canvas a:focus-visible,
body.elementor-template-canvas button:focus-visible,
body.elementor-template-canvas summary:focus-visible,
body.elementor-template-canvas .elementor-button:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

/* ====================================================================
   2. HEADER  —  absolute, sits ON TOP of the hero (no paper strip)
   ==================================================================== */
body.elementor-template-canvas .vbcn-header {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  z-index: 40 !important;
  padding: clamp(18px, 1.8vw, 26px) clamp(18px, 4vw, 56px) !important;
  background: linear-gradient(180deg,
              rgba(28, 43, 58, 0.55) 0%,
              rgba(28, 43, 58, 0.22) 55%,
              rgba(28, 43, 58, 0)   100%) !important;
  align-items: center !important;
  pointer-events: none;
}
body.elementor-template-canvas .vbcn-header > * { pointer-events: auto; }

/* Hero must give the header its overlay context */
body.elementor-template-canvas .vbcn-hero {
  position: relative !important;
  margin-top: 0 !important;
}
body.elementor-template-canvas .vbcn-logo img {
  width: clamp(92px, 9vw, 124px) !important;
  max-width: clamp(92px, 9vw, 124px) !important;
  height: auto !important;
  display: block;
}
body.elementor-template-canvas .vbcn-logo .elementor-widget-container,
body.elementor-template-canvas .vbcn-logo a { line-height: 0; display: block; }

body.elementor-template-canvas .vbcn-nav {
  gap: clamp(14px, 2vw, 30px) !important;
  --gap: clamp(14px, 2vw, 30px) !important;
  align-items: center !important;
}

/* Nav link — quiet caps, brass hairline grows on hover */
body.elementor-template-canvas .vbcn-nav-link .elementor-button {
  background: transparent !important;
  padding: 6px 2px !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  position: relative;
  transition: color 0.28s var(--ease);
}
body.elementor-template-canvas .vbcn-nav-link .elementor-button::after {
  content: "";
  position: absolute; left: 2px; right: 2px; bottom: 0;
  height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.36s var(--ease);
}
body.elementor-template-canvas .vbcn-nav-link .elementor-button:hover { color: #fff !important; }
body.elementor-template-canvas .vbcn-nav-link .elementor-button:hover::after { transform: scaleX(1); }

/* Phone pill */
body.elementor-template-canvas .vbcn-phone .elementor-button {
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 999px !important;
  padding: 10px 18px !important;
  background: transparent !important;
  color: #fff !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  box-shadow: none !important;
  transition: background 0.28s var(--ease), color 0.28s var(--ease),
              border-color 0.28s var(--ease), transform 0.22s var(--ease);
}
body.elementor-template-canvas .vbcn-phone .elementor-button:hover {
  background: var(--brass) !important;
  color: var(--navy) !important;
  border-color: var(--brass) !important;
  transform: translateY(-1px);
}

/* ====================================================================
   3. MOBILE BURGER  —  pure CSS via <details>
   Hard-hide on desktop by targeting the Elementor widget wrapper directly
   (Elementor applies inline `display:flex` so we need higher specificity).
   ==================================================================== */
@media (min-width: 1025px) {
  body.elementor-template-canvas .elementor-widget.vbcn-menu-wrap,
  body.elementor-template-canvas .vbcn-menu-wrap,
  body.elementor-template-canvas .vbcn-mobile-toggle {
    display: none !important;
    visibility: hidden !important;
  }
}
@media (max-width: 1024px) {
  body.elementor-template-canvas .vbcn-nav-link,
  body.elementor-template-canvas .vbcn-phone { display: none !important; }
  body.elementor-template-canvas .vbcn-nav {
    flex: 0 0 auto !important; width: auto !important; gap: 0 !important;
  }
  body.elementor-template-canvas .elementor-widget.vbcn-menu-wrap,
  body.elementor-template-canvas .vbcn-menu-wrap {
    display: flex !important; justify-content: flex-end; position: relative;
    width: auto !important; flex: 0 0 auto !important;
  }
}

body.elementor-template-canvas .vbcn-menu-wrap .elementor-widget-container { display: contents; }

body.elementor-template-canvas .vbcn-mobile-toggle { position: relative; list-style: none; }
body.elementor-template-canvas .vbcn-mobile-toggle summary {
  list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.20);
  position: relative;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
body.elementor-template-canvas .vbcn-mobile-toggle summary:hover {
  background: rgba(0, 0, 0, 0.40);
  border-color: rgba(255, 255, 255, 0.95);
}
body.elementor-template-canvas .vbcn-mobile-toggle summary::-webkit-details-marker { display: none; }
body.elementor-template-canvas .vbcn-mobile-toggle summary::marker { display: none; content: ""; }
body.elementor-template-canvas .vbcn-mobile-toggle summary > span {
  display: block; width: 20px; height: 1.5px; background: #fff;
  position: absolute; left: 50%; transform: translateX(-50%);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease),
              top 0.35s var(--ease), bottom 0.35s var(--ease);
}
body.elementor-template-canvas .vbcn-mobile-toggle summary > span:nth-child(1) { top: 12px; }
body.elementor-template-canvas .vbcn-mobile-toggle summary > span:nth-child(2) { top: 50%; transform: translate(-50%, -50%); }
body.elementor-template-canvas .vbcn-mobile-toggle summary > span:nth-child(3) { bottom: 12px; }
body.elementor-template-canvas .vbcn-mobile-toggle[open] summary > span:nth-child(1) {
  top: 50%; transform: translate(-50%, -50%) rotate(45deg);
}
body.elementor-template-canvas .vbcn-mobile-toggle[open] summary > span:nth-child(2) {
  opacity: 0; transform: translate(-50%, -50%) scaleX(0);
}
body.elementor-template-canvas .vbcn-mobile-toggle[open] summary > span:nth-child(3) {
  bottom: 50%; transform: translate(-50%, 50%) rotate(-45deg);
}

body.elementor-template-canvas .vbcn-mobile-toggle nav.vbcn-mobile-nav {
  display: none; position: absolute; top: calc(100% + 12px); right: 0;
  min-width: 280px; max-width: calc(100vw - 32px);
  padding: 12px 24px 24px;
  background: rgba(28, 43, 58, 0.97);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.36);
  border: 1px solid rgba(184, 151, 90, 0.18);
  z-index: 60;
}
body.elementor-template-canvas .vbcn-mobile-toggle[open] nav.vbcn-mobile-nav {
  display: grid; gap: 0;
  animation: vbcn-menuIn 0.34s var(--ease-out) both;
}
@keyframes vbcn-menuIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.elementor-template-canvas .vbcn-mobile-toggle nav.vbcn-mobile-nav a {
  color: #fff; font-family: 'Roboto', sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.22s var(--ease), padding-left 0.24s var(--ease);
}
body.elementor-template-canvas .vbcn-mobile-toggle nav.vbcn-mobile-nav a:hover {
  color: var(--brass); padding-left: 6px;
}
body.elementor-template-canvas .vbcn-mobile-toggle nav.vbcn-mobile-nav a.vbcn-mobile-call {
  margin-top: 16px; padding: 13px 22px;
  background: transparent;
  border: 1px solid rgba(184, 151, 90, 0.55);
  border-radius: 999px;
  font-weight: 600; letter-spacing: 0.04em;
  text-transform: none; text-align: center;
}
body.elementor-template-canvas .vbcn-mobile-toggle nav.vbcn-mobile-nav a.vbcn-mobile-call:hover {
  background: var(--brass); border-color: var(--brass); color: var(--navy); padding-left: 22px;
}

/* ====================================================================
   4. HERO  —  cinematic overlay + staggered page-load reveal
   ==================================================================== */
/* Suppress every Vimeo control — bg video shouldn't catch clicks */
body.elementor-template-canvas .elementor-background-video-container,
body.elementor-template-canvas .elementor-background-video-embed,
body.elementor-template-canvas .elementor-background-video-hosted {
  width: 100% !important; height: 100% !important;
  pointer-events: none !important; user-select: none !important;
}
body.elementor-template-canvas .elementor-background-video-container iframe,
body.elementor-template-canvas .elementor-background-video-embed iframe {
  width: 100vw !important; height: 56.25vw !important;
  min-width: 177.78vh !important; min-height: 100% !important;
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important; border: 0 !important;
}

body.elementor-template-canvas .vbcn-hero { isolation: isolate; }
body.elementor-template-canvas .vbcn-hero::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 35%, rgba(0,0,0,0.55) 100%);
}
body.elementor-template-canvas .vbcn-hero > .e-con,
body.elementor-template-canvas .vbcn-hero-content { position: relative; z-index: 2; }

/* Hero entrance animation removed per request — content shows immediately */
@keyframes vbcn-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero kicker */
body.elementor-template-canvas .vbcn-hero .vbcn-kicker .elementor-heading-title {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
}
/* Hero h1 */
body.elementor-template-canvas .vbcn-hero .vbcn-hero-title .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(36px, 6.2vw, 82px) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.008em !important;
  color: #fff !important;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35);
}
/* Hero subhead */
body.elementor-template-canvas .vbcn-hero .vbcn-hero-copy p {
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.30);
}
/* Hero CTAs */
body.elementor-template-canvas .vbcn-hero .elementor-widget-button .elementor-button {
  min-height: 52px;
  padding: 16px 28px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
body.elementor-template-canvas .vbcn-hero .vbcn-button-primary .elementor-button {
  background: var(--navy) !important; color: #fff !important;
  border: 1px solid var(--navy) !important;
}
body.elementor-template-canvas .vbcn-hero .vbcn-text-link .elementor-button {
  background: transparent !important; color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: none !important;
}

/* SCROLL cue removed per request */

/* ====================================================================
   5. AWARDS  —  navy band, flush against hero, no borders
   ==================================================================== */
/* Wrap: full-width navy band, zero margin/padding above so it kisses the hero */
body.elementor-template-canvas .vbcn-awards-wrap {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--navy) !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Kill any margin Elementor put under the hero */
body.elementor-template-canvas .vbcn-hero {
  margin-bottom: 0 !important;
}

body.elementor-template-canvas .vbcn-awards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  /* Strip every border/outline Elementor may have set on the grid container */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
body.elementor-template-canvas .vbcn-awards-grid > .e-con,
body.elementor-template-canvas .vbcn-awards-grid > .vbcn-award {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}
body.elementor-template-canvas .vbcn-award {
  width: 100% !important;
  padding: 36px 30px !important;
  position: relative;
  /* No card-level border, no internal dividers — clean navy field */
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Explicitly nuke any previous hairline pseudo-divider */
body.elementor-template-canvas .vbcn-award::before,
body.elementor-template-canvas .vbcn-award::after {
  content: none !important;
  display: none !important;
}
body.elementor-template-canvas .vbcn-award .vbcn-award-number .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: #fff !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
body.elementor-template-canvas .vbcn-award .vbcn-award-label .elementor-heading-title {
  margin-top: 10px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ====================================================================
   6. PORTFOLIO  —  refined card hover
   ==================================================================== */
body.elementor-template-canvas .vbcn-work-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin-top: 34px;
  width: 100% !important;
}
/* Force every child container of the grid to fill its cell.
   Elementor sets flex-grow:0/flex-basis:auto on child containers, which
   collapses them to content width. We override that and pin them to 100%. */
body.elementor-template-canvas .vbcn-work-grid > .e-con,
body.elementor-template-canvas .vbcn-work-grid > .vbcn-project {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}
body.elementor-template-canvas .vbcn-project {
  position: relative;
  width: 100% !important;
  min-height: 360px;
  height: 360px;
  overflow: hidden;
  background-color: #111 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* Tinted overlay (fades in on hover) */
body.elementor-template-canvas .vbcn-project::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.72));
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  z-index: 1;
  pointer-events: none;
}
body.elementor-template-canvas .vbcn-project:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(28, 43, 58, 0.22);
}
body.elementor-template-canvas .vbcn-project:hover::after { opacity: 1; }

body.elementor-template-canvas .vbcn-project-label {
  position: absolute; left: 22px; right: 22px; bottom: 20px;
  z-index: 2;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
body.elementor-template-canvas .vbcn-project:hover .vbcn-project-label {
  opacity: 1; transform: translateY(0);
}
body.elementor-template-canvas .vbcn-project-label .elementor-heading-title {
  color: #fff !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ====================================================================
   7. VOICES  —  hairline-separated quotes
   ==================================================================== */
body.elementor-template-canvas .vbcn-voices-inner { max-width: 800px; margin: 0 auto; }
body.elementor-template-canvas .vbcn-quote {
  padding: 32px 0 !important;
  border-top: 1px solid var(--line);
}
body.elementor-template-canvas .vbcn-quote:last-of-type { border-bottom: 1px solid var(--line); }
body.elementor-template-canvas .vbcn-quote .vbcn-quote-copy p {
  color: var(--ink) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(18px, 1.7vw, 22px) !important;
  line-height: 1.55 !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
body.elementor-template-canvas .vbcn-quote .vbcn-quote-name .elementor-heading-title {
  margin-top: 16px !important;
  color: var(--muted) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ====================================================================
   8. SCOPE (What we do)  —  two-column editorial
   ==================================================================== */
body.elementor-template-canvas .vbcn-scope-copy { max-width: 600px; }
body.elementor-template-canvas .vbcn-scope-copy .elementor-widget-text-editor p {
  color: var(--ink) !important;
  font-size: 16px !important; line-height: 1.7 !important;
}
body.elementor-template-canvas .vbcn-scope-copy .elementor-widget-text-editor + .elementor-widget-text-editor {
  margin-top: 14px !important;
}
body.elementor-template-canvas .vbcn-scope-image {
  min-height: 540px;
  background-size: cover !important;
  background-position: center !important;
  overflow: hidden;
}

/* ====================================================================
   9. PROCESS  —  numbered list with brass step number
   ==================================================================== */
body.elementor-template-canvas .vbcn-process-list { margin-top: 36px; border-top: 1px solid var(--line); }
body.elementor-template-canvas .vbcn-process-step {
  display: grid !important;
  grid-template-columns: 96px 1fr !important;
  gap: 28px;
  padding: 28px 0 !important;
  border-bottom: 1px solid var(--line);
}
body.elementor-template-canvas .vbcn-process-step .vbcn-step-number .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  color: var(--brass) !important;
  font-size: 22px !important;
  letter-spacing: 0.04em !important;
  font-weight: 600 !important;
}
body.elementor-template-canvas .vbcn-process-step .vbcn-step-title .elementor-heading-title {
  color: var(--navy) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: clamp(18px, 1.7vw, 22px) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}
body.elementor-template-canvas .vbcn-process-step .vbcn-step-copy p {
  margin-top: 8px !important;
  color: var(--ink) !important;
  font-size: 15px !important; line-height: 1.65 !important;
}

/* ====================================================================
   10. TEAM  —  6-up portrait grid
   ==================================================================== */
body.elementor-template-canvas .vbcn-team-inner { max-width: 1040px; margin: 0 auto; }
body.elementor-template-canvas .vbcn-team-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 40px;
  width: 100% !important;
}
body.elementor-template-canvas .vbcn-team-grid > .e-con,
body.elementor-template-canvas .vbcn-team-grid > .vbcn-team-photo {
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}
body.elementor-template-canvas .vbcn-team-photo {
  width: 100% !important;
  aspect-ratio: 3 / 4;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  filter: saturate(0.94);
  transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}
body.elementor-template-canvas .vbcn-team-photo:hover {
  filter: saturate(1.06);
  transform: translateY(-2px);
}

/* ====================================================================
   11. FINAL CTA  —  navy ground, brass button
   ==================================================================== */
body.elementor-template-canvas .vbcn-final { background: var(--navy) !important; color: #fff; }
body.elementor-template-canvas .vbcn-final .vbcn-section-title .elementor-heading-title {
  color: #fff !important;
}
body.elementor-template-canvas .vbcn-final .vbcn-final-copy p {
  color: rgba(255, 255, 255, 0.86) !important;
  max-width: 600px; margin: 0 auto !important;
  font-size: 16px !important; line-height: 1.7 !important;
}
body.elementor-template-canvas .vbcn-final .vbcn-button-final .elementor-button {
  background: var(--brass) !important;
  color: var(--navy) !important;
  border: 1px solid var(--brass) !important;
  border-radius: 0 !important;
  min-height: 52px;
  padding: 16px 30px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: transform 0.22s var(--ease), background 0.22s var(--ease),
              box-shadow 0.22s var(--ease);
}
body.elementor-template-canvas .vbcn-final .vbcn-button-final .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
body.elementor-template-canvas .vbcn-final .vbcn-final-phone .elementor-heading-title {
  margin-top: 26px !important;
  color: #fff !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* ====================================================================
   12. Scroll-triggered reveals  —  text only, no media (avoids width clashes)
   ==================================================================== */
@supports (animation-timeline: view()) {
  body.elementor-template-canvas .vbcn-section-title,
  body.elementor-template-canvas .vbcn-kicker,
  body.elementor-template-canvas .vbcn-quote,
  body.elementor-template-canvas .vbcn-process-step {
    animation: vbcn-rise both linear;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
}

/* ====================================================================
   13. Responsive  —  bulletproof breakpoints
   ==================================================================== */
@media (max-width: 1024px) {
  body.elementor-template-canvas .vbcn-header { padding: 16px 20px !important; }
  body.elementor-template-canvas .vbcn-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.elementor-template-canvas .vbcn-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.elementor-template-canvas .vbcn-awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.elementor-template-canvas .vbcn-award:nth-child(2)::before,
  body.elementor-template-canvas .vbcn-award:nth-child(4)::before { display: none; }
}
@media (max-width: 767px) {
  body.elementor-template-canvas .vbcn-header { padding: 12px 16px !important; }
  body.elementor-template-canvas .vbcn-logo img { width: 100px !important; max-width: 100px !important; }

  body.elementor-template-canvas .vbcn-hero { min-height: 80vh !important; padding: 110px 18px 70px !important; }
  body.elementor-template-canvas .vbcn-hero .vbcn-hero-title .elementor-heading-title {
    font-size: clamp(34px, 9vw, 46px) !important;
    line-height: 1.02 !important;
  }
  body.elementor-template-canvas .vbcn-hero .elementor-background-video-container { opacity: 0.55; }
  body.elementor-template-canvas .vbcn-hero .vbcn-actions {
    flex-direction: column !important; align-items: stretch !important; gap: 14px !important;
  }
  body.elementor-template-canvas .vbcn-hero .vbcn-actions .elementor-widget-button,
  body.elementor-template-canvas .vbcn-hero .vbcn-actions .elementor-button { width: 100% !important; }

  body.elementor-template-canvas .vbcn-awards-grid { grid-template-columns: 1fr !important; }
  body.elementor-template-canvas .vbcn-award + .vbcn-award::before {
    left: 12%; right: 12%; top: 0; bottom: auto;
    width: auto; height: 1px;
  }

  body.elementor-template-canvas .vbcn-work-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  body.elementor-template-canvas .vbcn-project { min-height: 280px; }
  body.elementor-template-canvas .vbcn-project::after { opacity: 1; }
  body.elementor-template-canvas .vbcn-project-label { opacity: 1; transform: none; }

  body.elementor-template-canvas .vbcn-quote .vbcn-quote-copy p { font-size: 18px !important; }

  body.elementor-template-canvas .vbcn-scope-image { min-height: 320px; }
  body.elementor-template-canvas .vbcn-process-step { grid-template-columns: 1fr !important; gap: 8px !important; }
  body.elementor-template-canvas .vbcn-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ====================================================================
   14. Admin bar offset (logged-in only)
   ==================================================================== */
body.elementor-template-canvas body.admin-bar.elementor-template-canvas .vbcn-header { top: 32px !important; }
@media (max-width: 782px) {
  body.elementor-template-canvas body.admin-bar.elementor-template-canvas .vbcn-header { top: 46px !important; }
}

/* ====================================================================
   15. Reduced motion + print
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.elementor-template-canvas *,
  body.elementor-template-canvas *::before,
  body.elementor-template-canvas *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  body.elementor-template-canvas .vbcn-hero .vbcn-kicker,
  body.elementor-template-canvas .vbcn-hero .vbcn-hero-title,
  body.elementor-template-canvas .vbcn-hero .vbcn-hero-copy,
  body.elementor-template-canvas .vbcn-hero .vbcn-actions { opacity: 1; }
}
@media print {
  body.elementor-template-canvas .elementor-background-video-container,
  body.elementor-template-canvas .vbcn-menu-wrap,
  body.elementor-template-canvas .vbcn-phone { display: none !important; }
}/* End custom CSS */