/*prevent FOUC on mobile when using sidebar */
.dwc-mobile :is(.bricks-is-frontend.brx-header-left, .bricks-is-frontend.brx-header-right) #brx-header {
  position: relative;
  inline-size: 100%;
  flex-direction: column;
}

.dwc-mobile .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is(#brx-content, #brx-footer) {
  margin-inline-start: 0;
}

/*prevent FOUC on desktop when using sidebar */
.bricks-is-frontend:is(.brx-header-left, .brx-header-right):not(.show-nav) .dwc-nav-wrapper {
  display: none;
}

/*=== sidebar css ===*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]).no-scroll {
  overflow: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nav-wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu .brxe-toggle {
  display: none !important;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header :is(.brxe-code, .dwc-nest-menu-overlay) {
  display: none;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu-top {
  min-block-size: var(--top-offset);
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-hide-close-bar = 'true']) .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) + 1px) !important;

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-submenu-reveal = 'slide']) .brx-dropdown-content:not([data-submenu-reveal = 'slide'] *) {  
  inset-inline-start: 0;
  inset-block-start: unset !important;
  overflow: hidden;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
  visibility: hidden;  
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;
  min-inline-size: var(--mobile-menu-width);

}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button:not([data-submenu-reveal = 'expand'] button)  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal = 'slide'] > .brx-submenu-toggle button  {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

/* sidebar css ends*/



/*sidebar in builder*/
/*=== sidebar css ===*/
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header {
  flex-direction: column;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
  --top-offset: 40px;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  max-block-size: 100dvb;
  padding-block-end: 12rem;
  overscroll-behavior: contain;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nav-wrapper {
  position: relative;
  overflow: hidden;
  block-size: 100%;
  transform: translateX(0%);
  visibility: visible;
}

body:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brxe-toggle {
  display: none !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu {
  display: flex;
  flex-direction: column;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header > div {
  display: flex;
  grid-template-columns: 1fr;
  block-size: 100%;
  flex-direction: column;
  justify-content: flex-start;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-menu-wrap {
  inline-size: 100%;
  display: grid;
  grid-template-columns: 1fr;
  block-size: 100%;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header {
  inline-size: 100%;
  padding-inline: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu-top {
  min-block-size: var(--top-offset);
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content {
  inset-block-start: calc(var(--top-offset) - 1px) !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
  overscroll-behavior: contain;  
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button {
  min-block-size: calc(var(--top-offset) - 1px);
  inset-block-start: 0;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
  min-block-size: 0;    
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu {
  margin: 0 !important;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] .brx-nav-nested-items {  
  flex-direction: column !important;  
}
   
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-toggle--open.brxe-toggle {
  display: flex !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brx-nav-nested-items {
  position: relative !Important;
  background: var(--mobile-menu-bg) !important;
  align-items: stretch;
  flex: 1;
}

:where(.brx-header-left, .brx-header-right)[data-builder-mode]:not(:has(.dwc-sidebar)) .dwc-nest-menu-top::before {
    content: 'this space is the back text bar';
    padding: 1rem;
    background-color: gray;
    color: white;
    width: 100%;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
}
 
/* MENU CTA (LAST BUTTON) */
:is(.brx-header-left, .brx-header-right)[data-builder-window] [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
  padding-inline: var(--menu-item-inline-padding) !important;
  padding-block: var(--menu-item-block-padding) !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu-top {
  min-block-size: 80px !important;
}
 
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-nav-items {
  overflow-y: scroll;
}

:is(.brx-header-left, .brx-header-right)[data-builder-mode] .brx-dropdown-content {
  min-inline-size: var(--mobile-menu-width);
  position: static;
}

:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  flex-wrap: nowrap;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content {   
  visibility: visible !important;
  opacity: 1;
}

/*OVERLAY SIDEBAR*/


html:not(.dwc-mobile):has([data-overlay-sidebar=true])  {
 --mobile-menu-bg: rgb(255 255 255 / 0%);
  --menu-item-border: solid 1px rgb(255 255 255 / 50%);
 
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer){
  margin: 0 !important
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer) :where(section):not(section>section) {
  padding-inline-start: calc(var(--mobile-menu-width) + clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem));
  max-inline-size: 100%
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) #brx-header {
  border-radius: var(--overlay-sidebar-radius);
  overflow: hidden;
  background: var(--overlay-sidebar-bg);
  box-shadow: var(--overlay-sidebar-shadow) !important;
  inset: var(--overlay-sidebar-inset);
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) .dwc-nest-header{
  backdrop-filter: blur(13px);
  background: transparent !important;
}

html:not(.dwc-mobile):has([data-overlay-sidebar=true]):not([data-builder-modee])  .brx-dropdown-content {
   background-color: rgb(255 255 255 / 100%);
}

/*NO BRX-OPEN STYLES*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column !important;
}


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu.brxe-nav-nested .brxe-dropdown .brx-dropdown-content {
      visibility: visible;
      min-inline-size: var(--mobile-menu-width) !important;
  }


  html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-dropdown-content {
   position: static;
}


class SidebarNavigation {
  constructor(options = {}) {
    // Basic configuration properties
    this.config = {
      minWidth: options.minWidth || MegaMenuCONFIG.minWidth, // Using external minWidth variable
      menuSelector: options.menuSelector || '.dwc-nest-menu',
      openClass: options.openClass || 'brx-open',
      activeClasses: options.activeClasses || ['open', 'active'],
      leftHeaderClass: options.leftHeaderClass || 'brx-header-left',
      rightHeaderClass: options.rightHeaderClass || 'brx-header-right',
      debounceDelay: options.debounceDelay || 100,
      menuItemClickDelay: options.menuItemClickDelay || 300
    };
    
    // Set dependent selectors
    const menuSelector = this.config.menuSelector;
    this.config.submenuToggleSelector = options.submenuToggleSelector || `${menuSelector} .brx-submenu-toggle`;
    this.config.dropdownSelector = options.dropdownSelector || `${menuSelector} .brxe-dropdown`;
    this.config.dropdownContentSelector = options.dropdownContentSelector || `${menuSelector} .brx-dropdown-content`;
    
    // State
    this.previousHeaderClass = null;
    this.dropdownClickHandlers = new Map();
    this.menuHoverHandlers = null;
    this.menuItemClickTimeout = null;
    this.keyboardNavHandler = null;
    this.cachedFocusableElements = null;
    this.cachedElements = {
      menuElement: null,
      navElement: null,
      dropdowns: null,
      dropdownToggles: null,
      menuItems: null
    };
    
    // Bind methods to this instance
    this.handleResize = this.debounce(this.handleMenu.bind(this), this.config.debounceDelay);
    this.handleOutsideClick = this.handleOutsideClick.bind(this);
  }
  
  // Initialize everything - called once
  init() {
    // Wait for DOM to be fully loaded before attaching events
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => {
        this.initAfterDOMLoaded();
      }, { once: true });
    } else {
      this.initAfterDOMLoaded();
    }
    
    return this;
  }
  
  // Separate initialization method to run after DOM is loaded
  initAfterDOMLoaded() {
    // Cache DOM elements once
    this.cacheElements();
    
    // Setup resize event with passive flag
    window.addEventListener('resize', this.handleResize, { passive: true });
    
    // Setup mutation observer for critical class changes only
    this.setupMutationObserver();
    
    // Initial setup based on current screen size
    this.handleMenu();
    
    // Cache focusable elements once if header class is present
    if (this.hasHeaderClass()) {
      this.cacheFocusableElements();
      this.setupMenuFocusNavigation();
    }
  }
  
  // Cache all required DOM elements upfront
  cacheElements() {
    this.cachedElements.menuElement = document.querySelector(this.config.menuSelector);
    
    if (this.cachedElements.menuElement) {
      this.cachedElements.navElement = this.cachedElements.menuElement.querySelector('.dwc-nest-nav-items');
      this.cachedElements.dropdowns = Array.from(document.querySelectorAll(this.config.dropdownSelector));
      this.cachedElements.dropdownToggles = Array.from(document.querySelectorAll(this.config.submenuToggleSelector));
      this.cachedElements.menuItems = Array.from(document.querySelectorAll(`${this.config.menuSelector} .menu-item`));
    }
  }
  
  // Set up a focused mutation observer only for dropdown state changes
  setupMutationObserver() {
    if (!this.cachedElements.dropdowns || this.cachedElements.dropdowns.length === 0) return;
    
    const callback = (mutations) => {
      for (let mutation of mutations) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          const target = mutation.target;
          const prevClassList = mutation.oldValue ? mutation.oldValue.split(' ') : [];
          const hadBothBefore = prevClassList.includes('open') && prevClassList.includes('active');
          const hasBothNow = target.classList.contains('open') && target.classList.contains('active');
    
          if (hadBothBefore !== hasBothNow) {
            this.updateDropdownAccessibility();
            break; // Only need to update once per batch
          }
        }
      }
    };
    
    // Create observer with optimized options
    this.classObserver = new MutationObserver(callback);
    
    // Observe only the dropdown elements
    this.cachedElements.dropdowns.forEach(dropdown => {
      this.classObserver.observe(dropdown, { 
        attributes: true, 
        attributeFilter: ['class'], 
        attributeOldValue: true 
      });
    });
  }
  
  // Cache focusable elements for keyboard navigation
  cacheFocusableElements() {
    if (!this.cachedElements.navElement) return;
    
    // Get direct children of nav
    const directChildren = Array.from(this.cachedElements.navElement.children);
    
    // Find the first focusable element within each direct child
    this.cachedFocusableElements = directChildren.map(child => {
      // Check if the child itself is focusable
      if (child.matches('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')) {
        return child;
      }
      // Otherwise, find the first focusable element within this child
      return child.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
    }).filter(Boolean); // Remove null/undefined values
  }
  
  // Clean up all event listeners and observers
  destroy() {
    // Clean up the mutation observer
    if (this.classObserver) {
      this.classObserver.disconnect();
      this.classObserver = null;
    }
    
    // Clean up resize listener
    window.removeEventListener('resize', this.handleResize);
    
    // Clean up click handlers
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
    
    // Clean up hover handlers
    this.cleanupMenuHover();
    
    // Clean up menu item click handlers
    this.cleanupMenuItemClicks();
    
    // Clean up outside click handler
    document.removeEventListener('click', this.handleOutsideClick);
    
    // Clean up keyboard navigation
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler);
      this.keyboardNavHandler = null;
    }
    
    // Clear any pending timeouts
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  // Utility methods
  hasHeaderClass() {
    return document.body.classList.contains(this.config.leftHeaderClass) || 
           document.body.classList.contains(this.config.rightHeaderClass);
  }
  
  debounce(func, delay) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => func(...args), delay);
    };
  }

  // Check if an element has all the required active classes
  hasAllActiveClasses(element) {
    return this.config.activeClasses.every(className => element.classList.contains(className));
  }
  
  // Toggle all active classes on an element
  toggleActiveClasses(element) {
    this.config.activeClasses.forEach(className => {
      element.classList.toggle(className);
    });
  }
  
  // Core functionality methods
  handleMenu() {
    if (!this.cachedElements.menuElement) return;
    if (!this.hasHeaderClass() && !this.previousHeaderClass) return;

    const screenWidth = window.innerWidth;
    const isLargeScreen = screenWidth >= this.config.minWidth;
    const menuElement = this.cachedElements.menuElement;

    if (!isLargeScreen) {
      // Save which class was present before removal
      if (this.hasHeaderClass()) {
        this.previousHeaderClass = document.body.classList.contains(this.config.leftHeaderClass) 
          ? this.config.leftHeaderClass 
          : this.config.rightHeaderClass;
        
        // Remove header classes
        document.body.classList.remove(this.config.leftHeaderClass, this.config.rightHeaderClass);
        menuElement.classList.remove(this.config.openClass);
        
        // Reset accessibility attributes
        this.resetAccessibilityAttributes();
      }
      
      // Clean up event handlers for mobile view
      this.cleanupMenuHover();
      this.cleanupMenuItemClicks();
      this.cleanupDropdownHandlers();
      document.removeEventListener('click', this.handleOutsideClick);
      
      return;
    }

    // Large screen behavior
    if (!this.hasHeaderClass() && this.previousHeaderClass) {
      document.body.classList.add(this.previousHeaderClass);
    }

    if (this.hasHeaderClass()) {
      if (!menuElement.classList.contains(this.config.openClass)) {
        menuElement.classList.add(this.config.openClass);
      }
      
      // Setup elements for large screen view
      this.setupMenuHover();
      this.setupMenuItemClicks();
      this.setupDropdownHandlers();
      this.setupMenuFocusNavigation();
      this.updateDropdownAccessibility();
      
      // Ensure outside click handler is set up
      document.removeEventListener('click', this.handleOutsideClick);
      document.addEventListener('click', this.handleOutsideClick, { passive: false });
    }
  }
  
  // Reset accessibility attributes when switching to mobile
  resetAccessibilityAttributes() {
    if (!this.cachedElements.dropdowns) return;
    
    // Remove all inert attributes from dropdown contents
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      if (content) {
        content.removeAttribute('inert');
      }
      
      const button = dropdown.querySelector('button');
      if (button) {
        button.setAttribute('aria-expanded', 'false');
      }
    });
  }
  
  setupMenuFocusNavigation() {
    // Only run if hasHeaderClass() is true and we have focusable elements
    if (!this.hasHeaderClass() || !this.cachedFocusableElements || this.cachedFocusableElements.length === 0) {
      return;
    }
    
    // Clean up previous handler if it exists
    if (this.keyboardNavHandler) {
      document.removeEventListener('keydown', this.keyboardNavHandler, true);
      this.keyboardNavHandler = null;
    }
    
    const navMenu = this.cachedElements.menuElement;
    const focusableElements = this.cachedFocusableElements;
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement = focusableElements[focusableElements.length - 1];
    
    // Find adjacent focusable elements outside the menu (only once during setup)
    const headerElement = navMenu.closest('header') || document.querySelector('header');
    
    // Prepare variables to hold adjacent elements
    let prevFocusableElement = null;
    let nextFocusableElement = null;
    let firstElementAfterHeader = null;
    
    if (headerElement) {
      // Get all focusable elements within the header - do this once and cache the result
      const headerFocusables = Array.from(
        headerElement.querySelectorAll('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')
      ).filter(el => window.getComputedStyle(el).display !== 'none');
      
      // Find the index of our first and last menu elements in one pass
      const menuStartIndex = headerFocusables.indexOf(firstFocusableElement);
      const menuEndIndex = headerFocusables.indexOf(lastFocusableElement);
      
      // Cache the adjacent elements
      if (menuStartIndex > 0) {
        prevFocusableElement = headerFocusables[menuStartIndex - 1];
      }
      
      if (menuEndIndex !== -1 && menuEndIndex < headerFocusables.length - 1) {
        nextFocusableElement = headerFocusables[menuEndIndex + 1];
      }
      
      // Pre-calculate the first element after header - but only if needed
      if (!nextFocusableElement) {
        // Use a more efficient selector that targets immediate children of body that aren't the header
        const selector = 'body > *:not(header)';
        const nonHeaderElements = document.querySelectorAll(selector);
        
        // Only process if we have elements
        if (nonHeaderElements.length > 0) {
          // Create a function to find the first focusable element (used later if needed)
          this.findFirstFocusableAfterHeader = () => {
            for (const element of nonHeaderElements) {
              const focusable = element.querySelector('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])');
              if (focusable && window.getComputedStyle(focusable).display !== 'none') {
                return focusable;
              }
            }
            return null;
          };
        }
      }
    }
    
    // Create keyboard navigation handler with closure over the cached elements
    this.keyboardNavHandler = (e) => {
      // Quick check for Tab key first
      if (e.key !== 'Tab') return;
      
      // Then check if focus is inside the menu
      if (!navMenu.contains(document.activeElement)) return;
      
      let targetElement = null;
      
      // Handle tab navigation at boundaries only
      if (!e.shiftKey && document.activeElement === lastFocusableElement) {
        // Forward tab from last element
        e.preventDefault();
        e.stopPropagation();
        
        if (nextFocusableElement) {
          targetElement = nextFocusableElement;
        } else if (this.findFirstFocusableAfterHeader) {
          // Only search for elements after header if needed and not already found
          firstElementAfterHeader = this.findFirstFocusableAfterHeader();
          targetElement = firstElementAfterHeader;
        }
        
        // Focus on the target or body as fallback
        setTimeout(() => {
          if (targetElement) {
            targetElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      } 
      else if (e.shiftKey && document.activeElement === firstFocusableElement) {
        // Backward tab from first element
        e.preventDefault();
        e.stopPropagation();
        
        setTimeout(() => {
          if (prevFocusableElement) {
            prevFocusableElement.focus();
          } else {
            document.body.setAttribute('tabindex', '-1');
            document.body.focus();
            document.body.removeAttribute('tabindex');
          }
        }, 10);
      }
    };
    
    // Use capture phase for the event
    document.addEventListener('keydown', this.keyboardNavHandler, true);
  }
  
  setupMenuHover() {
    const menuElement = this.cachedElements.menuElement;
    if (!menuElement) return;
    
    // Clean up existing hover handlers first
    this.cleanupMenuHover();
    
    // Create event handlers
    const mouseenterHandler = () => {
      menuElement.classList.add(this.config.openClass);
    };
    
    const mouseleaveHandler = () => {
      menuElement.classList.remove(this.config.openClass);
    };
    
    // Add event listeners with passive flag for better performance
    menuElement.addEventListener('mouseenter', mouseenterHandler, { passive: true });
    menuElement.addEventListener('mouseleave', mouseleaveHandler, { passive: true });
    
    // Store the handlers for cleanup
    this.menuHoverHandlers = {
      element: menuElement,
      mouseenter: mouseenterHandler,
      mouseleave: mouseleaveHandler
    };
  }
  
  cleanupMenuHover() {
    if (this.menuHoverHandlers) {
      const { element, mouseenter, mouseleave } = this.menuHoverHandlers;
      element.removeEventListener('mouseenter', mouseenter);
      element.removeEventListener('mouseleave', mouseleave);
      this.menuHoverHandlers = null;
    }
  }
  
  setupMenuItemClicks() {
    if (!this.cachedElements.menuItems || this.cachedElements.menuItems.length === 0) return;
    
    // Clean up existing handlers first
    this.cleanupMenuItemClicks();
    
    const menuElement = this.cachedElements.menuElement;
    const menuItemHandlers = new Map();
    
    this.cachedElements.menuItems.forEach(item => {
      const clickHandler = () => {
        if (this.hasHeaderClass()) {
          // Clear any existing timeout
          if (this.menuItemClickTimeout) {
            clearTimeout(this.menuItemClickTimeout);
          }
          
          // Set timeout before adding the class
          this.menuItemClickTimeout = setTimeout(() => {
            if (!menuElement.classList.contains(this.config.openClass)) {
              menuElement.classList.add(this.config.openClass);
            }
          }, this.config.menuItemClickDelay);
        }
      };
      
      menuItemHandlers.set(item, clickHandler);
      item.addEventListener('click', clickHandler);
    });
    
    this.menuItemClickHandlers = menuItemHandlers;
  }
  
  cleanupMenuItemClicks() {
    if (this.menuItemClickHandlers && this.menuItemClickHandlers instanceof Map) {
      this.menuItemClickHandlers.forEach((handler, item) => {
        item.removeEventListener('click', handler);
      });
      this.menuItemClickHandlers.clear();
    }
    
    if (this.menuItemClickTimeout) {
      clearTimeout(this.menuItemClickTimeout);
      this.menuItemClickTimeout = null;
    }
  }
  
  setupDropdownHandlers() {
    if (!this.hasHeaderClass() || !this.cachedElements.dropdownToggles) return;
    
    // Clean up existing handlers first
    this.cleanupDropdownHandlers();
    
    this.cachedElements.dropdownToggles.forEach(toggle => {
      const clickHandler = (event) => {
        event.stopPropagation();
        event.preventDefault();
        
        const dropdown = toggle.closest(this.config.dropdownSelector);
        if (dropdown) {
          this.toggleActiveClasses(dropdown);
          this.updateDropdownAccessibility();
        }
      };
      
      this.dropdownClickHandlers.set(toggle, clickHandler);
      toggle.addEventListener('click', clickHandler);
    });
  }
  
  cleanupDropdownHandlers() {
    if (this.dropdownClickHandlers.size > 0) {
      this.dropdownClickHandlers.forEach((handler, toggle) => {
        toggle.removeEventListener('click', handler);
      });
      this.dropdownClickHandlers.clear();
    }
  }
  
  handleOutsideClick(event) {
    if (event.target.tagName === 'A') return;
    if (!event.target.closest(this.config.dropdownSelector)) return;
    if (!event.target.closest(this.config.submenuToggleSelector)) {
      event.preventDefault();
      event.stopPropagation();
    }
  }
  
  updateDropdownAccessibility() {
    // Only run if hasHeaderClass() is true
    if (!this.hasHeaderClass() || !this.cachedElements.dropdowns) return;
    
    this.cachedElements.dropdowns.forEach(dropdown => {
      const content = dropdown.querySelector(this.config.dropdownContentSelector);
      const button = dropdown.querySelector('button');
      
      // Check if dropdown has all active classes
      const isOpen = this.hasAllActiveClasses(dropdown);
      
      if (content) {
        if (isOpen) {
          content.removeAttribute('inert');
        } else {
          content.setAttribute('inert', '');
        }
      }
      
      if (button) {
        button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
      }
    });
  }
}


const sidebarNav = new SidebarNavigation().init();

A HOME PLANNED AROUND YOU

Building Custom Homes with Purpose Across Metro Vancouver

Expertly crafted luxury homes designed with premium materials, innovative features, and seamless indoor-outdoor integration. “We bring your vision to life, designing and building a home that truly reflects who you are.” Plan a custom home around the property, your daily routines and the building details that matter most. VALROC coordinates the scope from early site work to the selected interior and exterior finishes.

Design, allowances and construction stages are defined in the written agreement.

Luxury custom home build with lots of amazing features, showing a construction sign of Valroc Development Ltd. showing it's thier construction site
YOUR PLAN

Design for the way you live

Connect room layout, access and future needs to an approved home design.

SITE TO STRUCTURE

Coordinate the ground and building

Plan access, excavation, drainage and foundations before the home rises.

FINISH DECISIONS

Make selections with context

Record materials, systems and finish allowances before each stage proceeds.

FROM PLAN TO COMPLETION

How a custom home is built

The linked construction records span planning, site work, foundations, interior coordination and exterior completion. Demolition applies only where an existing structure is part of the approved scope, and landscaping is not universal.

  1. Excavation site preparation with John Deere excavator and laser rotary measurement tool in use

    Step 1

    Custom Home Planning

    The initial planning phase for custom home construction, tailored to support everything from early design inspiration to engineered plans and permitting, fully managed by one contractor from start to finish.

    • Home planning
    • Design coordination
    • Scope decisions
  2. Hauling material from excavation site

    Step 2

    Custom Home Site Prep

    Complete site prep for custom homes, including demolition, clearing, underground service removal, utility trenching, and precision excavation, handled by VALROC’s in-house team and equipment.

    • Site mobilization
    • Home site preparation
    • Access planning
  3. Excavator demolishing a house in Metro Vancouver for renovation or clearance services.

    Step 3

    Site Remediation

    Full demolition and site remediation services for custom home builds, including teardown of existing structures, septic removal, buried utility decommissioning, and lot cleanup to prepare for new construction.

    • Selective demolition
    • Site remediation
    • Existing structures
  4. Valroc builds complete custom homes, including all of the excavation services for footings and foundations

    Step 4

    Custom Home Foundations

    Foundation construction for custom homes, including formwork, under-slab utilities, structural fill, vapour barriers, rebar, and concrete pouring for slabs, crawlspaces, or full basements.

    • Home foundation
    • Concrete footings
    • Structural base
  5. Laying subfloor on second level

    Step 5

    Interior Design & Planning

    Integrated design and interior planning tailored to executive lifestyles, family needs, and personalized functionality.

    • Interior planning
    • Custom layout
    • Living spaces
  6. Interior trim being painted

    Step 6

    Interior Finishing

    From mechanical rough-ins to high-end finishes, we bring technical precision and elevated design into every corner of your custom home.

    • Mechanical rough-ins
    • Interior finishes
    • Trade coordination
  7. Front yard landscaping and hardscape finishing for a luxury custom home by VALROC

    Step 7

    Outdoor Living Finishing

    From elegant landscaping to functional outdoor features, we complete your custom home with purposeful exterior design and premium finishes.

    • Outdoor living
    • Landscape integration
    • Exterior scope

VALROC Development built this custom home in Burnaby, completing the project through site remediation, demolition, excavation, foundations, concrete construction, and structural framing. The video follows the chronological transformation of the property, from removal of the original house to the rough framed structure of the new executive home.

can you 

BUILT AROUND THE USE

Plan the custom home around its purpose

VALROC Development Ltd. specializes in designing and building truly custom luxury homes that reflect your lifestyle, values, and long-term vision. Our Metro Vancouver custom home builds integrates timeless quality with modern functionality, using premium materials, thoughtful layouts, and technology-driven solutions that elevate daily living.

Expert Home Building Craftsmanship Meets Deep Construction Knowledge

What sets VALROC apart is more than just experience, it’s how we work. Our founder, Domenic Sorace, is hands-on throughout the process, having built every phase of residential and commercial structures himself. This depth of knowledge translates to fewer delays, smarter planning, and a smoother build for you.

PLANS

Start with the design

Review drawings and the intended living spaces before pricing.

GROUND

Prepare for the home

Coordinate access, drainage and foundation requirements.

BUILDING

Manage connected stages

Align structure, envelope and building systems with the schedule.

FINISHES

Track your selections

Record interior and exterior choices and their cost implications.

SELECT THE DETAILS

Choices that shape the custom home

Every luxury home we build is a personal reflection of our client’s goals. Whether it’s a kitchen designed for efficiency, a tranquil master suite, or smart automation throughout, we combine structure and soul in every square foot.

Room layouts, envelope assemblies, mechanical systems, interior finishes and outdoor living features are selected against the drawings and budget. Changes and allowances must be documented, not assumed to be included.

Defined in the signed build scope

Included in our service:

  • • Written custom home scope based on approved drawings and the property's conditions

  • • Defined responsibilities for design coordination, permits and inspections

  • • Specified site preparation, foundation and structural work where contracted

  • • Documented envelope, mechanical, electrical and interior work where contracted

  • • Selected materials, allowances and change decisions recorded in the agreement

  • • Construction sequencing, communication and completion expectations defined for the project

Room layouts, envelope assemblies, mechanical systems, interior finishes and outdoor living features are selected against the drawings and budget. Changes and allowances must be documented, not assumed to be included.

Keep selections connected to the plan

PLAN THE CONNECTIONS

Connect the custom home to the wider property

Outdoor living spaces, patios, and finished landscapes Custom home construction may require site preparation, drainage, foundation work, exterior concrete and outdoor living areas. These are connected stages, but each is included only where the approved home scope specifies it.

Demolition, landscaping, patios, separate accessory buildings and design professionals are not automatic parts of every custom home agreement.

  • Site preparation for custom home construction

    • Custom home site preparation
    • Building pad
    • Construction access

    A custom home begins with safe access, a prepared building area and grades that support the full property plan. Early site preparation helps organize excavation, utilities, drainage and material delivery.

    Explore site preparation services
  • Excavation for custom home sites

    • Custom home excavation
    • Building excavation
    • Site grading

    Home construction may require building excavation, soil removal, service routes and detailed grading around the structure. Coordinating equipment and trucking with the build schedule keeps the site moving efficiently.

    Explore excavation and machine services
  • Wood footings a top of hard packed subbase and just starting to build foundational walls

    Foundations and footings for custom homes

    • Custom home foundation
    • Concrete footings
    • Structural layout

    The foundation translates the custom home design into the ground. Footing dimensions, wall locations, openings and elevations need to align with structural plans and the finished use of the home.

    Explore foundations and footings
  • VALROC Development Ltd. building a backyard detached garage or shop.

    Detached garages within custom home projects

    • Custom home garage
    • Property storage
    • Vehicle access

    A detached garage can add secure parking, storage and flexible workspace to a custom property. Planning it with the home helps coordinate architecture, vehicle access, utilities and outdoor circulation.

    Explore detached garage construction
  • Concrete patios for custom outdoor living

    • Custom home patio
    • Outdoor living
    • Backyard entertaining

    A concrete patio can extend the living areas of a custom home into the backyard. Coordinating doors, finished elevations and entertaining zones creates a stronger connection between indoor and outdoor spaces.

    Explore concrete patio installation
  • Covered patio deck under construction with brick home exterior and VALROC excavator on site

    Outdoor kitchens designed with custom homes

    • Custom outdoor kitchen
    • Entertaining space
    • Utility planning

    Planning an outdoor kitchen during a custom build makes it easier to coordinate utilities, covered areas, lighting and access from the interior kitchen. The result can feel like a true extension of the home.

    Explore outdoor kitchens and BBQ areas

DOCUMENTED EXPERIENCE

Custom home building experience across Metro Vancouver

VALROC manages custom home construction from site preparation and foundations through the connected exterior work. Our Metro Vancouver experience helps homeowners coordinate the house, access, drainage, concrete and outdoor spaces as one complete property plan. Our custom home experience extends through Langley neighbourhoods such as Brookswood, Willoughby and Walnut Grove, as well as South Surrey, White Rock, Burnaby and Vancouver, with established coordination across municipal, engineering and architectural teams.

DEFINE THE BUILD SCOPE

Discuss a custom home proposal

Share plans, intended use and property details with VALROC. An onsite review helps establish the scope and selections before a custom home proposal is prepared.

  • Share the project

    Explain your intended use, available plans and goals.

  • Review the property

    Review the property, zoning, available plans, access, grades, utilities, intended spaces and budget before defining a custom home proposal.

  • Confirm the proposal

    Compare the selected stages, materials, allowances and boundaries in writing.

  • What affects a custom home estimate?

    Design maturity, site access, soil, building size, structural requirements, systems, allowances and finish selections affect the proposal. A property review is needed before providing a specific price.

    What affects a custom home estimate?

    Design maturity, site access, soil, building size, structural requirements, systems, allowances and finish selections affect the proposal. A property review is needed before providing a specific price.

    Request Your Free On-site Estimate

    CHECK THE PROPERTY AND PLANS

    Assess the site before a custom home build

    Review the property, zoning, available plans, access, grades, utilities, intended spaces and budget before defining a custom home proposal.

  • 01

    Confirm the use

    Define what the completed building needs to support.

  • 02

    Review the site

    Review the property, zoning, available plans, access, grades, utilities, intended spaces and budget before defining a custom home proposal.

  • 03

    Resolve approvals

    Review zoning, drawings and permit responsibilities for this property.

  • 04

    Write the scope

    Record the structure, systems, selections and separately scoped work.

  • What needs confirmation

    Existing structures, ground conditions and permit requirements can alter the sequence. Any design change needs its cost and schedule impact reviewed.

    What needs confirmation

    Existing structures, ground conditions and permit requirements can alter the sequence. Any design change needs its cost and schedule impact reviewed.

    ANSWERS REQUIRE PROJECT CONTEXT

    Questions about custom home construction

    The linked questions cover plans, design teams, scope, changes, timelines and quality. Two plan questions overlap and should be differentiated rather than repeated as identical answers.

    Can Valroc work with existing engineered plans for my project?

    Yes, VALROC can build directly from existing engineered or pre-approved plans.

    • Reviewing plans with engineers and consultants.
    • Confirming alignment with local codes and site conditions.
    • Coordinating with architects or designers already involved.
    • Adjusting sequencing or construction methods where needed.

    This approach often helps reduce redesign time and keeps projects moving efficiently.

    Can Valroc work with existing engineered plans for my project?

    Yes, VALROC can build directly from existing engineered or pre-approved plans.

    • Reviewing plans with engineers and consultants.
    • Confirming alignment with local codes and site conditions.
    • Coordinating with architects or designers already involved.
    • Adjusting sequencing or construction methods where needed.

    This approach often helps reduce redesign time and keeps projects moving efficiently.

    How does Valroc ensure quality in Custom Home Packages

    Quality in a custom home starts long before construction begins and is maintained through every phase of the build.

    • Clear pre-construction planning that defines scope, materials, sequencing, and expectations.
    • Strong site preparation and foundation work to create a reliable base for the structure.
    • Hands-on coordination of trades so each phase is completed properly before the next begins.
    • Ongoing inspections during construction to address issues early, not at the end.

    VALROC manages these steps in-house to maintain consistent standards from excavation through final completion.

    How does Valroc ensure quality in Custom Home Packages

    Quality in a custom home starts long before construction begins and is maintained through every phase of the build.

    • Clear pre-construction planning that defines scope, materials, sequencing, and expectations.
    • Strong site preparation and foundation work to create a reliable base for the structure.
    • Hands-on coordination of trades so each phase is completed properly before the next begins.
    • Ongoing inspections during construction to address issues early, not at the end.

    VALROC manages these steps in-house to maintain consistent standards from excavation through final completion.

    Why choose VALROC Development Ltd. for a custom home?

    Building a custom home requires experience across many disciplines, not just one part of the process.

    • Direct involvement from ownership throughout planning and construction.
    • In-house crews and equipment for excavation, foundations, and structural work.
    • Ability to coordinate trades, timelines, and inspections under one team.
    • Experience building across Metro Vancouver in varied site conditions.

    This approach helps reduce delays, miscommunication, and unnecessary handoffs during the build.

    Why choose VALROC Development Ltd. for a custom home?

    Building a custom home requires experience across many disciplines, not just one part of the process.

    • Direct involvement from ownership throughout planning and construction.
    • In-house crews and equipment for excavation, foundations, and structural work.
    • Ability to coordinate trades, timelines, and inspections under one team.
    • Experience building across Metro Vancouver in varied site conditions.

    This approach helps reduce delays, miscommunication, and unnecessary handoffs during the build.

    Can VALROC work with my existing home plans or designs?

    Yes. VALROC can build directly from existing engineered or approved plans.

    • Reviewing drawings with engineers and consultants.
    • Confirming alignment with local codes and site conditions.
    • Coordinating with architects or designers already involved.
    • Adjusting construction sequencing where needed.

    This often helps reduce redesign time and keep projects moving efficiently.

    Can VALROC work with my existing home plans or designs?

    Yes. VALROC can build directly from existing engineered or approved plans.

    • Reviewing drawings with engineers and consultants.
    • Confirming alignment with local codes and site conditions.
    • Coordinating with architects or designers already involved.
    • Adjusting construction sequencing where needed.

    This often helps reduce redesign time and keep projects moving efficiently.

    What services does VALROC provide for luxury custom home builds?

    VALROC provides end-to-end construction services for custom homes.

    • Site clearing, excavation, and grading.
    • Concrete foundations, slabs, and structural work.
    • Framing and building envelope construction.
    • Interior and exterior finishing coordination.
    • Final site work and completion support.

    This allows the project to move forward without relying on multiple disconnected contractors.

    What services does VALROC provide for luxury custom home builds?

    VALROC provides end-to-end construction services for custom homes.

    • Site clearing, excavation, and grading.
    • Concrete foundations, slabs, and structural work.
    • Framing and building envelope construction.
    • Interior and exterior finishing coordination.
    • Final site work and completion support.

    This allows the project to move forward without relying on multiple disconnected contractors.

    Can I make changes to my luxury home plans during construction?

    Changes can be made during construction, but they are handled carefully to avoid disruption.

    • Requested changes are reviewed for cost and schedule impact.
    • Updated pricing and timelines are provided before approval.
    • All changes are documented through formal change orders.

    This process keeps expectations clear and protects both the client and the build schedule.

    Can I make changes to my luxury home plans during construction?

    Changes can be made during construction, but they are handled carefully to avoid disruption.

    • Requested changes are reviewed for cost and schedule impact.
    • Updated pricing and timelines are provided before approval.
    • All changes are documented through formal change orders.

    This process keeps expectations clear and protects both the client and the build schedule.

    How long does it take to build a custom home with VALROC?

    Timelines vary based on size, complexity, site conditions, and level of customization.

    1. Site preparation and foundations typically take several months.
    2. Framing and structural work follow once conditions are ready.
    3. Interior and exterior finishes are completed in staged phases.
    4. Total build time is influenced by approvals, weather, and design decisions.

    VALROC provides realistic schedules and updates clients as conditions evolve.

    How long does it take to build a custom home with VALROC?

    Timelines vary based on size, complexity, site conditions, and level of customization.

    1. Site preparation and foundations typically take several months.
    2. Framing and structural work follow once conditions are ready.
    3. Interior and exterior finishes are completed in staged phases.
    4. Total build time is influenced by approvals, weather, and design decisions.

    VALROC provides realistic schedules and updates clients as conditions evolve.

    What modern design trends does VALROC specialize in for luxury custom homes?

    At VALROC Development Ltd., we stay ahead of the latest trends in modern luxury home design, offering:

    • Expansive open-concept layouts – Seamless indoor-outdoor living with wide-open spaces.

    • Floor-to-ceiling glass & panoramic views – Maximizing natural light and connecting with nature.

    • High-performance, energy-efficient homes – Smart HVAC, passive solar design, and net-zero options.

    • Luxury custom kitchens – High-end appliances, custom cabinetry, quartz & natural stone countertops.

    • Spa-inspired bathrooms – Custom steam showers, soaking tubs, and heated floors.

    • Smart home automation – Fully integrated lighting, security, entertainment, and climate control.

    • Unique architectural features – Vaulted ceilings, floating staircases, and custom millwork.

    Whether you’re looking for modern minimalism, West Coast contemporary, or classic elegance, VALROC’s experience ensures your home is designed with cutting-edge luxury features.

    What modern design trends does VALROC specialize in for luxury custom homes?

    At VALROC Development Ltd., we stay ahead of the latest trends in modern luxury home design, offering:

    • Expansive open-concept layouts – Seamless indoor-outdoor living with wide-open spaces.

    • Floor-to-ceiling glass & panoramic views – Maximizing natural light and connecting with nature.

    • High-performance, energy-efficient homes – Smart HVAC, passive solar design, and net-zero options.

    • Luxury custom kitchens – High-end appliances, custom cabinetry, quartz & natural stone countertops.

    • Spa-inspired bathrooms – Custom steam showers, soaking tubs, and heated floors.

    • Smart home automation – Fully integrated lighting, security, entertainment, and climate control.

    • Unique architectural features – Vaulted ceilings, floating staircases, and custom millwork.

    Whether you’re looking for modern minimalism, West Coast contemporary, or classic elegance, VALROC’s experience ensures your home is designed with cutting-edge luxury features.

    What experience does VALROC have in building multi-million dollar luxury homes?

    VALROC has built custom homes on a wide range of sites across Metro Vancouver and the Fraser Valley.

    • Homes on challenging terrain requiring careful excavation and drainage planning.
    • Large-scale custom residences with complex structural requirements.
    • Projects requiring coordination with engineers, designers, and municipalities.
    • Homes built with long-term durability and maintenance in mind.

    This experience helps anticipate challenges before they affect the schedule or budget.

    What experience does VALROC have in building multi-million dollar luxury homes?

    VALROC has built custom homes on a wide range of sites across Metro Vancouver and the Fraser Valley.

    • Homes on challenging terrain requiring careful excavation and drainage planning.
    • Large-scale custom residences with complex structural requirements.
    • Projects requiring coordination with engineers, designers, and municipalities.
    • Homes built with long-term durability and maintenance in mind.

    This experience helps anticipate challenges before they affect the schedule or budget.

    Can I bring my own interior designer or architect, or does VALROC provide these services?

    Yes. VALROC regularly works with client-selected architects and designers.

    • Collaborating with existing design teams during planning.
    • Reviewing plans for constructability and site compatibility.
    • Coordinating engineering, permits, and sequencing.

    This flexibility allows clients to retain their preferred design professionals.

    Can I bring my own interior designer or architect, or does VALROC provide these services?

    Yes. VALROC regularly works with client-selected architects and designers.

    • Collaborating with existing design teams during planning.
    • Reviewing plans for constructability and site compatibility.
    • Coordinating engineering, permits, and sequencing.

    This flexibility allows clients to retain their preferred design professionals.

    How does VALROC ensure the highest quality craftsmanship in home construction?

    Maintaining construction standards requires consistent oversight and disciplined sequencing.

    • Use of proven construction methods and durable materials.
    • Experienced trades working within clearly defined scopes.
    • Regular site reviews to confirm work meets plan and code requirements.
    • Controlled build pacing to avoid rushed or overlapping phases.

    This structure helps ensure each part of the home is built correctly before moving forward.

    How does VALROC ensure the highest quality craftsmanship in home construction?

    Maintaining construction standards requires consistent oversight and disciplined sequencing.

    • Use of proven construction methods and durable materials.
    • Experienced trades working within clearly defined scopes.
    • Regular site reviews to confirm work meets plan and code requirements.
    • Controlled build pacing to avoid rushed or overlapping phases.

    This structure helps ensure each part of the home is built correctly before moving forward.

    METRO VANCOUVER BUILDING

    Custom Home projects across Metro Vancouver

    Based from our Langley construction yard, VALROC coordinates custom home construction across Willoughby, Brookswood, Walnut Grove and surrounding Metro Vancouver communities. Our crews, machinery and established supplier relationships support connected stages including site preparation, excavation, foundations, structural work, material deliveries and municipal inspections.

    Our custom home experience also extends through Surrey, White Rock, Burnaby and Delta. From constrained infill properties to sloped sites and larger residential lots, VALROC works with homeowners, engineers, architects and municipal officials to coordinate the approved home design with access, drainage, building elevations and the wider property plan.