/*
 * Theme Name:   Virtus Theme - 2026
 * Theme URI:    https://bricksbuilder.io/
 * Description:  Child theme for Bricks. Virtus 9 Corporation styles.
 * Author:       Bricks
 * Author URI:   https://bricksbuilder.io/
 * Template:     bricks
 * Version:      1.1
 * Text Domain:  bricks
 */

/**
 * VIRTUS 9 CORPORATION - BRICKS BUILDER STYLESHEET
 * Military & Defense Contractor Brand Stylesheet
 * Version: 1.0
 * Last Updated: January 31, 2026
 * 
 * This stylesheet provides a complete design system for Virtus 9 Corporation
 * optimized for Bricks Builder WordPress theme with utility-first classes.
 */

/* ===================================
   ROOT VARIABLES - BRAND SYSTEM
   =================================== */

   :root {
    /* Brand Colors - Virtus 9 Palette */
    --v9-peppercorn: #282818;
    --v9-thyme: #383838;
    --v9-basil: #4E6458;
    --v9-fennell: #E0DED1;
    --v9-cumin: #A68D4A;
    
    /* Semantic Color Tokens */
    --color-primary: var(--v9-peppercorn);
    --color-primary-hover: #1a1610;
    --color-secondary: var(--v9-basil);
    --color-secondary-hover: #3d4e45;
    --color-accent: var(--v9-cumin);
    --color-accent-hover: #8d7a3e;
    --color-text-base: var(--v9-peppercorn);
    --color-text-muted: var(--v9-thyme);
    --color-text-light: var(--v9-fennell);
    --color-background: #ffffff;
    --color-background-alt: var(--v9-fennell);
    --color-background-dark: var(--v9-peppercorn);
    --color-border: rgba(40, 40, 24, 0.1);
    --color-border-accent: var(--v9-cumin);
    
    /* Typography Scale */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 3rem;        /* 48px */
    --font-size-5xl: 4rem;        /* 64px */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.2em;
    
    /* Spacing Scale */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    --space-32: 8rem;     /* 128px */

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* Container Sizes */
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 54rem;
    --container-5xl: 60rem;
    --container-6xl: 66rem;
  }
  
  
  /* ===================================
     RESET & BASE STYLES
     =================================== */
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-base);
    background-color: var(--color-background);
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button {
    font-family: inherit;
    cursor: pointer;
  }
  
  
  /* ===================================
     TYPOGRAPHY SYSTEM
     =================================== */
  
  /* Headings */
  h1, .h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-base);
  }
  @media (max-width: 767px) {
    h1, .h1 {
      font-size: 2.5rem;
    }
  }
  
  h2, .h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-base);
  }
  
  h3, .h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    color: var(--color-text-base);
  }
  
  h4, .h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    color: var(--color-text-base);
  }
  
  h5, .h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    color: var(--color-text-base);
  }
  
  h6, .h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-normal);
    color: var(--color-text-base);
  }
  
  /* Paragraphs */
  p {
    margin-bottom: var(--space-4);
    line-height: var(--line-height-relaxed);
  }
  
  p:last-child {
    margin-bottom: 0;
  }
  
  /* Text Size Utilities */
  .text-xs, .text-xs i { font-size: var(--font-size-xs); }
  .text-sm, .text-sm i { font-size: var(--font-size-sm); }
  .text-base { font-size: var(--font-size-base); }
  .text-lg, .text-lg i { font-size: var(--font-size-lg); }
  .text-xl, .text-xl i { font-size: var(--font-size-xl); }
  .text-2xl, .text-2xl i { font-size: var(--font-size-2xl); }
  .text-3xl { font-size: var(--font-size-3xl); }
  .text-4xl { font-size: var(--font-size-4xl); }
  .text-5xl { font-size: var(--font-size-5xl); }
  
  /* Text Weight Utilities */
  .font-normal { font-weight: var(--font-weight-normal); }
  .font-medium { font-weight: var(--font-weight-medium); }
  .font-semibold { font-weight: var(--font-weight-semibold); }
  .font-bold { font-weight: var(--font-weight-bold); }
  
  /* Text Color Utilities */
  .text-primary { color: var(--color-primary); }
  .text-secondary { color: var(--color-secondary); }
  .text-accent { color: var(--color-accent); }
  .text-muted { color: var(--color-text-muted); }
  .text-light { color: var(--color-text-light); }
  .text-white, h3.text-white { color: #ffffff; }
  
  /* Letter Spacing Utilities */
  .tracking-tight { letter-spacing: var(--letter-spacing-tight); }
  .tracking-normal { letter-spacing: var(--letter-spacing-normal); }
  .tracking-wide { letter-spacing: var(--letter-spacing-wide); }
  .tracking-wider { letter-spacing: var(--letter-spacing-wider); }
  .tracking-widest { letter-spacing: var(--letter-spacing-widest); }
  
  /* Text Transform Utilities */
  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }
  
  /* Text Alignment */
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  
  /* Line Height */
  .leading-tight { line-height: var(--line-height-tight); }
  .leading-normal { line-height: var(--line-height-normal); }
  .leading-relaxed { line-height: var(--line-height-relaxed); }
  
  
  /* ===================================
     LAYOUT UTILITIES
     =================================== */
  
.max-w-2xl {
    max-width: min(100%, var(--container-2xl));
}
.max-w-3xl {
    max-width: min(100%, var(--container-3xl));
}
.max-w-4xl {
    max-width: min(100%, var(--container-4xl));
}
.max-w-5xl {
    max-width: min(100%, var(--container-5xl));
}
.max-w-6xl {
    max-width: min(100%, var(--container-6xl));
}

  /* Container */
  .v9-container {
    /* width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto; */
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  @media (min-width: 1024px) {
    .v9-container {
      padding-left: var(--space-8);
      padding-right: var(--space-8);
    }
  }
  
  /* Section Spacing */
  .v9-section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
  
  .v9-section-sm {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
  
  .v9-section-lg {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
  }
  
  /* Display Utilities */
  .block { display: block; }
  .inline-block { display: inline-block; }
  .inline { display: inline; }
  .flex { display: flex; }
  .inline-flex { display: inline-flex; }
  .grid { display: grid; }
  .hidden { display: none; }
  
  /* Flex Utilities */
  .flex-row { flex-direction: row; }
  .flex-col { flex-direction: column; }
  .flex-wrap { flex-wrap: wrap; }
  .flex-nowrap { flex-wrap: nowrap; }
  
  .items-start { align-items: flex-start; }
  .items-center { align-items: center; }
  .items-end { align-items: flex-end; }
  .items-stretch { align-items: stretch; }
  
  .justify-start { justify-content: flex-start; }
  .justify-center { justify-content: center; }
  .justify-end { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }
  .justify-around { justify-content: space-around; }
  
  .gap-1 { gap: var(--space-1); }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }
  .gap-8 { gap: var(--space-8); }
  .gap-10 { gap: var(--space-10); }
  .gap-12 { gap: var(--space-12); }
  .gap-16 { gap: var(--space-16); }
  
  /* Grid Utilities */
  .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

  /* Stack grid-cols-* to single column on mobile */
  @media (max-width: 767px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
      grid-template-columns: 1fr;
    }
  }

  @media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  }
  
  @media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  }
  
  /* Spacing Utilities */
  .m-0 { margin: 0; }
  .m-auto { margin: auto; }
  .mt-4 { margin-top: var(--space-4); }
  .mt-6 { margin-top: var(--space-6); }
  .mt-8 { margin-top: var(--space-8); }
  .mt-10 { margin-top: var(--space-10); }
  .mt-12 { margin-top: var(--space-12); }
  .mt-16 { margin-top: var(--space-16); }
  .mb-3 { margin-bottom: var(--space-3); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-6 { margin-bottom: var(--space-6); }
  .mb-8 { margin-bottom: var(--space-8); }
  .mb-10 { margin-bottom: var(--space-10); }
  .mb-12 { margin-bottom: var(--space-12); }
  .mb-16 { margin-bottom: var(--space-16); }
  
  .p-4 { padding: var(--space-4); }
  .p-6 { padding: var(--space-6); }
  .p-8 { padding: var(--space-8); }
  .p-12 { padding: var(--space-12); }
  

  .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
  .px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
  .px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
  .px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
  .px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }

  .pl-4 { padding-left: var(--space-4); }
  .pl-6 { padding-left: var(--space-6); }
  .pl-8 { padding-left: var(--space-8); }
  .pl-12 { padding-left: var(--space-12); }
  .pl-16 { padding-left: var(--space-16); }
  .pl-20 { padding-left: var(--space-20); }
  .pl-24 { padding-left: var(--space-24); }
  .pr-4 { padding-right: var(--space-4); }
  .pr-6 { padding-right: var(--space-6); }
  .pr-8 { padding-right: var(--space-8); }
  .pr-12 { padding-right: var(--space-12); }
  .pr-16 { padding-right: var(--space-16); }
  .pr-20 { padding-right: var(--space-20); }
  .pr-24 { padding-right: var(--space-24); }
  
  .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
  .py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }

  .pb-4 { padding-bottom: var(--space-4); }
  .pb-6 { padding-bottom: var(--space-6); }
  .pb-8 { padding-bottom: var(--space-8); }
  .pb-12 { padding-bottom: var(--space-12); }
  .pb-16 { padding-bottom: var(--space-16); }
  .pb-24 { padding-bottom: var(--space-24); }

  .pt-2 { padding-top: var(--space-2); }
  .pt-4 { padding-top: var(--space-4); }
  .pt-6 { padding-top: var(--space-6); }
  .pt-8 { padding-top: var(--space-8); }
  .pt-12 { padding-top: var(--space-12); }
  .pt-16 { padding-top: var(--space-16); }
  .pt-20 { padding-top: var(--space-20); }
  .pt-24 { padding-top: var(--space-24); }
  
  /* Position Utilities */
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed { position: fixed; }
  .sticky { position: sticky; }
  
  /* Overflow */
  .overflow-hidden { overflow: hidden; }
  .overflow-auto { overflow: auto; }
  
  
  /* ===================================
     BACKGROUND UTILITIES
     =================================== */
  
  .bg-white { background-color: #ffffff; }
  .bg-peppercorn { background-color: var(--v9-peppercorn); }
  .bg-thyme { background-color: var(--v9-thyme); }
  .bg-basil { background-color: var(--v9-basil); }
  .bg-fennell { background-color: var(--v9-fennell); }
  .bg-cumin { background-color: var(--v9-cumin); }
  div .bg-transparent, .bg-transparent { background-color: transparent; }
  
  /* ===================================
     BORDER UTILITIES
     =================================== */
  
  .border { border: 1px solid var(--color-border); }
  .border-2 { border: 2px solid var(--color-border); }
  .border-t { border-top: 1px solid var(--color-border); }
  .border-b { border-bottom: 1px solid var(--color-border); }
  .border-l { border-left: 1px solid var(--color-border); }
  .border-r { border-right: 1px solid var(--color-border); }
  
  .border-l-4 {
    border-left-width: 4px;;
  }

  .border-accent { border-color: var(--color-border-accent); }
  .border-accent20 { border-color: rgba(166, 141, 74, 0.2); }
  .border-accent50 { border-color: rgba(166, 141, 74, 0.5); }
  .border-fennell { border-color: var(--v9-fennell); }
  .border-fennell20 { border-color: rgba(224, 222, 209, 0.2); }

  .rounded { border-radius: var(--radius-md); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-none { border-radius: 0; }
  
  
  /* ===================================
     BUTTON COMPONENTS
     =================================== */
  
  /* Base Button */
  .v9-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
  }
  
  .v9-btn i {
    font-size: 1.5em;
  }

  /* Primary Button */
  .v9-btn-primary {
    background-color: var(--color-accent);
    color: #ffffff;
  }
  
  .v9-btn-primary:hover {
    background-color: var(--color-accent-hover);
  }
  
  /* Secondary Button */
  .v9-btn-secondary {
    background-color: var(--color-secondary);
    color: #ffffff;
  }
  
  .v9-btn-secondary:hover {
    background-color: var(--color-secondary-hover);
  }
  
  /* Outline Button */
  .v9-btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
  }
  
  .v9-btn-outline:hover {
    background-color: var(--color-primary);
    color: #ffffff;
  }
  
  /* Light Outline Button (for dark backgrounds) */
  .v9-btn-outline-light {
    background-color: transparent;
    color: var(--v9-fennell);
    border: 2px solid var(--v9-fennell);
  }
  
  .v9-btn-outline-light:hover {
    background-color: var(--v9-fennell);
    color: var(--color-primary);
  }
  
  /* Button Sizes */
  .v9-btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
  }
  
  .v9-btn-lg {
    padding: var(--space-5) var(--space-10);
    font-size: var(--font-size-base);
  }
  
  /* Ghost Button */
  .v9-btn-ghost {
    background-color: transparent;
    color: var(--color-text-base);
    border: none;
    padding: var(--space-2) var(--space-4);
  }
  
  .v9-btn-ghost:hover {
    background-color: var(--color-background-alt);
  }
  
  .v9-btn--icon-shift .bricks-button__icon,
  .v9-btn--icon-shift i,
  .v9-btn--icon-shift .ion-ios-arrow-round-forward {
    transition: transform var(--transition-fast);
    will-change: transform;
    display: inline-block;
  }
  
  .v9-btn--icon-shift:hover .bricks-button__icon,
  .v9-btn--icon-shift:hover i,
  .v9-btn--icon-shift:hover .ion-ios-arrow-round-forward {
    transform: translateX(0.25rem);
  }
  
  /* ===================================
     CARD COMPONENTS
     =================================== */
  
  .v9-card {
    position: relative;
    background-color: #ffffff;
    border: 2px solid var(--v9-fennell);
    padding: var(--space-8);
    transition: all var(--transition-base);
  }
  
  .v9-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-lg);
  }
  
  /* Card with Dark Background */
  .v9-card-dark {
    background-color: var(--v9-peppercorn);
    color: #ffffff;
    border-color: var(--v9-basil);
  }
  
  /* Row of capability cards – use with grid (e.g. grid grid-cols-2 gap-8 v9-capability-row) */
  .v9-capability-row {
    align-items: stretch;
  }
  @media (max-width: 767px) {
    .v9-capability-row {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
    }
  }

  /* Grid item wrappers (Bricks may wrap each card) – pass row height down so cards can stretch */
  .v9-capability-row > * {
    display: flex;
    align-items: stretch;
    min-height: 0;
  }

  .v9-capability-row .v9-card-capability {
    flex: 1;
    min-height: 0;
  }

  /* Capability Card - With Diagonal Accent */
  .v9-card-capability {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff;
    border: 2px solid var(--v9-fennell);
    padding: var(--space-8);
    overflow: hidden;
    transition: all var(--transition-base);
  }
  
  .v9-card-capability::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 96px;
    background-color: var(--v9-cumin);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
  }
  
  .v9-card-capability:hover {
    border-color: var(--color-accent);
  }
  
  .v9-card-capability:hover::before {
    opacity: 0.25;
  }
  
  .v9-card-capability ul {
    padding-left: 3%;
    padding-right: 3%;
    flex-grow: 1;
  }
  .v9-card-capability ul li {
    font-size: 0.875em;
    padding-left: 3%;
    padding-right: 3%;
  }

  .v9-card-capability h3 {
    text-transform: uppercase;
    margin-bottom: var(--space-3);
  }

  .v9-icon-box svg {
    height: 32px;
    width: 32px;
    color: inherit;
    stroke: currentColor;
    fill: none;
  }
  /* Team Member Card */
  .v9-card-team {
    background-color: var(--v9-fennell);
    overflow: hidden;
    transition: all var(--transition-base);
  }
  
  .v9-card-team:hover {
    box-shadow: var(--shadow-xl);
  }
  
  .v9-card-team-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: var(--v9-thyme);
  }
  
  .v9-card-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
  }
  
  .v9-card-team:hover .v9-card-team-image img {
    transform: scale(1.05);
  }
  
  .v9-card-team-info {
    background-color: var(--v9-peppercorn);
    padding: var(--space-6);
    border-top: 2px solid var(--color-accent);
  }
  
  
  /* ===================================
     HEADER/NAVIGATION COMPONENTS
     =================================== */
  
  .v9-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-fixed);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-border);
  }
  
  .v9-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
  }
  
  .v9-nav {
    display: flex;
    align-items: center;
    gap: var(--space-10);
  }
  
  .v9-nav-link {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    transition: color var(--transition-base);
  }
  
  .v9-nav-link:hover {
    color: var(--color-accent);
  }
  
  .quick-actions ul li {
    padding-bottom: 12px;
  }
  /* ===================================
     HERO COMPONENTS
     =================================== */
  
  .v9-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--v9-peppercorn);
  }
  
  .v9-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, 
      rgba(40, 40, 24, 0.95) 0%, 
      rgba(40, 40, 24, 0.85) 50%, 
      rgba(40, 40, 24, 0.5) 100%
    );
  }
  
  /* Technical Grid Pattern */
  .v9-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: 
      linear-gradient(var(--color-accent) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
    background-size: 50px 50px;
  }
  
  /* Make hero establish a stacking context */
.v9-hero {
  position: relative;
}

/* Overlay wrapper stays behind content */
.overlay-grid-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Content must be above overlays */
.v9-hero .v9-container,
section:has(.overlay-grid-pattern) .v9-container {
  position: relative;
  z-index: 1;
}

/* Scroll indicator above overlays too */
.v9-scroll-indicator {
  position: absolute;
  z-index: 2;
}


  /* Large Grid Pattern (for Credibility Section) */
  .v9-grid-pattern-lg {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: 
      linear-gradient(var(--color-accent) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
    background-size: 100px 100px;
  }
  
  /* Diagonal Accent Element - Right Side */
  .v9-diagonal-accent {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 33.333%;
    clip-path: polygon(40% 0, 100% 0, 100% 100%, 0% 100%);
    background-color: rgba(166, 141, 74, 0.1);
  }
  
  /* Diagonal Accent - Left Side */
  .v9-diagonal-accent-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 25%;
    clip-path: polygon(0 0, 100% 0, 60% 100%, 0% 100%);
    background-color: rgba(78, 100, 88, 0.2);
  }
  
  /* Diagonal Corner Accent (for Capability Cards) */
  .v9-diagonal-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 96px;
    background-color: var(--v9-basil);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
  }
  
  .group:hover .v9-diagonal-corner {
    opacity: 1;
  }
  
  /* Diagonal corner – bottom-left (90° at bottom-left, point on the right) */
  .v9-diagonal-corner-bl {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 96px;
    height: 96px;
    background-color: var(--v9-basil);
    clip-path: polygon(0 100%, 0 0, 100% 100%);
    opacity: 0;
    transition: opacity var(--transition-base);
  }
  
  .group:hover .v9-diagonal-corner-bl {
    opacity: 1;
  }
  
  /* Diagonal Background Split (for CTA sections) */
  .v9-diagonal-bg-split {
    position: absolute;
    inset: 0;
    background-color: var(--v9-basil);
    clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 85%);
    opacity: .7;
    
  }
  
  /* Bottom-left diagonal triangle (light triangle, 90° at bottom-left, point on the right). Layer on top of dark (basil) section background. */
  .v9-diagonal-triangle-bl {
    position: absolute;
    inset: 0;
    background-color: var(--v9-fennell);
    clip-path: polygon(0 100%, 0 0, 70% 100%);
    pointer-events: none;
  }
  
  /* Solid triangle in bottom-left: 110px tall, 90° at bottom-left, tapers to a point on the right. Parent needs position: relative. */
  .v9-triangle-bl-110 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 110px;
    background-color: var(--v9-fennell);
    clip-path: polygon(0 100%, 0 0, 100% 100%);
    pointer-events: none;
  }
  
  /* Scroll Indicator */
  .v9-scroll-indicator {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  
  .v9-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, transparent, var(--color-accent));
  }
  
  .v9-scroll-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-accent);
  }
  
  
  /* ===================================
     DECORATIVE ELEMENTS
     =================================== */
  
  /* Overline with Accent Bar */
  .v9-overline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }
  
  .v9-overline-bar {
    width: 48px;
    height: 1px;
    background-color: var(--color-accent);
  }
  
  .v9-overline-text {
    color: var(--color-accent);
    /* font-size: var(--font-size-sm); */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
  }
  
  /* Accent Line (horizontal) */
  .v9-accent-line {
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
  }
  
  .v9-accent-line-vertical {
    width: 1px;
    height: 100%;
    background-color: var(--color-accent);
  }
  
  /* Corner Accent Detail */
  .v9-corner-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 64px;
    height: 64px;
    border-right: 2px solid rgba(166, 141, 74, 0.2);
    border-top: 2px solid rgba(166, 141, 74, 0.2);
  }
  
  /* Bullet Point Marker */
  .v9-bullet {
    width: 4px;
    height: 4px;
    background-color: var(--color-accent);
    border-radius: 50%;
  }
  
  
  /* ===================================
     FOOTER COMPONENTS
     =================================== */
  
  .v9-footer {
    background-color: var(--v9-peppercorn);
    color: #ffffff;
  }
  
  .v9-footer-logo,
  .v9-footer-logo img {
    max-height: 100px;
    width: auto;
    margin-bottom: var(--space-8);
  }
  .v9-footer-section {
    padding: var(--space-16) 0;
  }
  
  .v9-footer h4,
  .v9-footer-heading {
    color: #ffffff;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-4);
  }
  
  .v9-footer a,
  .v9-footer .brxe-text-link,
  .v9-footer-link {
    color: var(--v9-fennell);
    font-size: var(--font-size-sm);
    transition: color var(--transition-base);
    display: block;
    margin-bottom: var(--space-4);
    cursor: pointer;
  }
  
  .v9-footer a:hover,
  .v9-footer .brxe-text-link:hover,
  .v9-footer-link:hover {
    color: var(--color-accent);
  }
  
  .v9-footer-divider {
    border-top: 1px solid rgba(224, 222, 209, 0.2);
    padding: var(--space-6) 0;
  }
  
  .footer-certifications {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    width: 100%;
  }
  .footer-certifications-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0px;
    flex-wrap: wrap;
    width: 100%;
    row-gap: var(--space-10);
    padding: var(--space-6);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-top: 1px solid rgba(221, 222, 223, 0.2);
    border-bottom: 1px solid rgba(221, 222, 223, 0.2);
  }
  .footer-certifications-wrapper > div {
    display: inline-block;
  }
  /* Small circle dot centered between each item */
  .footer-certifications-wrapper > div:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--color-accent);
    margin-left: 40px;
    margin-right: 40px;
    vertical-align: middle;
  }
  @media (max-width: 767px) {
    .footer-certifications-wrapper {
      width: 90%;
      margin-left: auto;
      margin-right: auto;
    }
    .footer-certifications-wrapper > div:not(:last-child)::after {
      margin-left: 20px;
      margin-right: 20px;
    }
  }
  .footer-disclaimers {
    border-top: 1px solid rgba(221, 222, 223, 0.2);
    padding-top: var(--space-6);
    padding-bottom: var(--space-10);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--v9-fennell);
    text-align: center;
    
  }
  .footer-dislaimer-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
  @media (max-width: 767px) {
    .footer-dislaimer-links {
      gap: 0;
      justify-content: center;
    }
  }
  /* ===================================
     ICON CONTAINERS
     =================================== */
  
  .v9-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background-color: var(--v9-basil);
  }
  /* Default icon color only when no text-* utility is applied */
  .v9-icon-box:not([class*="text-"]) {
    color: #ffffff;
  }
  
  .v9-icon-box-sm {
    width: 40px;
    height: 40px;
  }
  .v9-icon-box-sm svg {
    height: 26px;
    width: 26px;
    color: inherit;
    stroke: currentColor;
    fill: none;
  }
  
  .v9-icon-box-50 svg {
    color: inherit;
    stroke: currentColor;
    fill: none;
  }
  
  .v9-icon-box-50 {
    width: 50px;
    height: 50px;
  }

  .v9-icon-box-lg {
    width: 80px;
    height: 80px;
  }
  
  /* Social Icon */
  .v9-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--v9-basil);
    color: #ffffff;
    transition: background-color var(--transition-base);
  }
  
  .v9-social-icon:hover {
    background-color: var(--color-accent);
  }
  
  
  /* ===================================
     STATS/METRICS DISPLAY
     =================================== */
  
  .v9-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    padding-top: var(--space-16);
    margin-top: var(--space-16);
    border-top: 1px solid rgba(224, 222, 209, 0.2);
  }
  
  .v9-stat-number {
    color: var(--color-accent);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-1);
  }
  
  .v9-stat-label {
    color: var(--v9-fennell);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
  }
  
  
  /* ===================================
     BADGE/TAG COMPONENTS
     =================================== */
  
  .v9-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    background-color: var(--color-accent);
    color: #ffffff;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
  }
  
  .v9-badge-outline {
    background-color: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
  }
  
  
  /* ===================================
     LINK COMPONENTS
     =================================== */
  
  /* Text Link with Animated Accent Line */
  .v9-link-accent {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    transition: color var(--transition-base);
  }
  
  .v9-link-accent:hover {
    color: var(--color-accent-hover);
  }
  
  .v9-link-accent-line {
    width: 32px;
    height: 1px;
    background-color: var(--color-accent);
    transition: width var(--transition-base);
  }
  
  .v9-link-accent:hover .v9-link-accent-line {
    width: 48px;
  }
  
  
  /* ===================================
     CONTACT INFO BOX
     =================================== */
  
  .v9-contact-box {
    background-color: #ffffff;
    padding: var(--space-8);
    border-left: 4px solid var(--color-accent);
  }
  
  .v9-contact-box-dark {
    background-color: rgba(40, 40, 24, 0.8);
    backdrop-filter: blur(8px);
    padding: var(--space-6);
  }
  
  .v9-contact-box-dark a {
    color: var(--color-text-light);
    transition: color var(--transition-base);
  }
  
  .v9-contact-box-dark a:hover {
    color: var(--color-accent);
  }
  
  .v9-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }
  
  .v9-contact-item:last-child {
    margin-bottom: 0;
  }
  
  .v9-contact-item-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-color: var(--v9-basil);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }
  
  .v9-contact-item-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-1);
  }
  
  .v9-contact-item-value {
    color: var(--color-text-base);
    transition: color var(--transition-base);
  }
  
  .v9-contact-item-value:hover {
    color: var(--color-accent);
  }
  
  
  /* ===================================
     FEATURED SECTION (Product Highlight)
     =================================== */
  
  /* Mobile first: stack image on top, content below. Image has fixed aspect-ratio rectangle. */
  .v9-featured {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--v9-fennell);
    overflow: hidden;
  }
  
  .v9-featured-image {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .v9-featured-content {
    padding: var(--space-8) var(--space-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Desktop: side-by-side 50/50, equal height. Image covers its half. */
  @media (min-width: 769px) {
    .v9-featured {
      flex-direction: row;
      flex-wrap: nowrap;
    }
  
    .v9-featured-image {
      flex: 0 0 50%;
      width: 50%;
      aspect-ratio: auto;
      min-height: 0;
    }
  
    .v9-featured-content {
      flex: 0 0 50%;
      width: 50%;
      padding: var(--space-12);
      min-width: 0;
    }
  }
  
  /* Gradient overlay on the right edge of the image (10% width, 100% height). Add one modifier to .v9-featured-image to blend into content. */
  .v9-featured-image-gradient--primary::after,
  .v9-featured-image-gradient--accent::after,
  .v9-featured-image-gradient--secondary::after,
  .v9-featured-image-gradient--fennell::after,
  .v9-featured-image-gradient--basil::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 15%;
    pointer-events: none;
  }

  /* Fade over left 50% of strip, solid color over right 50% */
  .v9-featured-image-gradient--primary::after { background: linear-gradient(to right, transparent 0%, var(--color-primary) 70%, var(--color-primary) 90%); }
  .v9-featured-image-gradient--accent::after { background: linear-gradient(to right, transparent 0%, var(--color-accent) 70%, var(--color-accent) 90%); }
  .v9-featured-image-gradient--secondary::after { background: linear-gradient(to right, transparent 0%, var(--color-secondary) 70%, var(--color-secondary) 90%); }
  .v9-featured-image-gradient--fennell::after { background: linear-gradient(to right, transparent 0%, var(--v9-fennell) 70%, var(--v9-fennell) 90%); }
  .v9-featured-image-gradient--basil::after { background: linear-gradient(to right, transparent 0%, var(--v9-basil) 70%, var(--v9-basil) 90%); }
  
  .v9-featured-gradient {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 128px;
    background: linear-gradient(to left, var(--v9-fennell), transparent);
  }
  
  .v9-featured-spec {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }
  
  .v9-featured-spec:last-child {
    margin-bottom: 0;
  }
  
  .v9-featured-spec-line {
    width: 48px;
    height: 1px;
    background-color: var(--color-accent);
    margin-top: 12px;
    flex-shrink: 0;
  }
  
  .v9-featured-spec-label {
    color: var(--color-text-base);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-1);
  }
  
  .v9-featured-spec-value {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }
  
  
  /* ===================================
     LIST COMPONENTS
     =================================== */
  
  .v9-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .v9-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }
  
  .v9-list-item::before {
    content: '';
    width: 4px;
    height: 4px;
    background-color: var(--color-accent);
    flex-shrink: 0;
  }

  /* Default ul lists: square bullets in accent color */
  ul:not(.v9-list) {
    list-style-type: square;
  }

  ul:not(.v9-list) li::marker {
    color: var(--color-accent);
  }

  /* No bullets in navigation */
  nav ul,
  #brx-header ul {
    list-style: none;
    padding-left: 0;
  }
  nav ul li::marker,
  #brx-header ul li::marker {
    display: none;
  }
  
  
  /* ===================================
     ANIMATION UTILITIES
     =================================== */
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-25%);
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  .animate-bounce {
    animation: bounce 2s infinite;
  }
  
  .animate-fadeIn {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .transition-all {
    transition: all var(--transition-base);
  }
  
  .transition-colors {
    transition: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
  }
  
  .transition-transform {
    transition: transform var(--transition-base);
  }
  
  .transition-opacity {
    transition: opacity var(--transition-base);
  }
  
  .transition-width {
    transition: width var(--transition-base);
  }
  
  .hover\:scale-105:hover {
    transform: scale(1.05);
  }
  
  /* Group Hover Utilities - For Icon Animations */
  .group:hover .group-hover\:translate-x-1 {
    transform: translateX(0.25rem);
  }
  
  .group:hover .group-hover\:translate-x-2 {
    transform: translateX(0.5rem);
  }
  
  .group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
  }
  
  .group:hover .group-hover\:opacity-100 {
    opacity: 1;
  }
  
  .group:hover .group-hover\:bg-accent {
    background-color: var(--color-accent);
  }
  
  /* Width Animation for Accent Lines */
  .hover\:w-12:hover {
    width: 3rem;
  }
  
  /* Backdrop Blur */
  .backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  
  .backdrop-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  
  /* ===================================
     ASPECT RATIO UTILITIES
     =================================== */
  
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  
  .aspect-video {
    aspect-ratio: 16 / 9;
  }
  
  .aspect-portrait {
    aspect-ratio: 3 / 4;
  }
  
  
  /* ===================================
     SHADOW UTILITIES
     =================================== */
  
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }
  .shadow-xl { box-shadow: var(--shadow-xl); }
  .shadow-none { box-shadow: none; }
  
  .hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
  .hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }
  
  /* Hover text color – add to a link, or to a ul/parent so descendant links get the hover color */
  .hover\:text-primary a,
  .hover\:text-secondary a,
  .hover\:text-accent a,
  .hover\:text-muted a,
  .hover\:text-light a,
  .hover\:text-white a {
    transition: color var(--transition-base);
  }

  .hover\:text-primary a:hover { color: var(--color-primary); }
  .hover\:text-secondary a:hover { color: var(--color-secondary); }
  .hover\:text-accent a:hover { color: var(--color-accent); }
  .hover\:text-muted a:hover { color: var(--color-text-muted); }
  .hover\:text-light a:hover { color: var(--color-text-light); }
  .hover\:text-white a:hover { color: #ffffff; }
  
  
  /* ===================================
     OPACITY UTILITIES
     =================================== */
  
  .opacity-0 { opacity: 0; }
  .opacity-10 { opacity: 0.1; }
  .opacity-50 { opacity: 0.5; }
  .opacity-75 { opacity: 0.75; }
  .opacity-100 { opacity: 1; }
  
  
  /* ===================================
     WIDTH/HEIGHT UTILITIES
     =================================== */
  
  .w-full { width: 100%; }
  /* 100% on mobile, 50% from 768px up */
  .v9-w-50-desktop {
    width: 100%;
  }
  @media (min-width: 768px) {
    .v9-w-50-desktop {
      width: 50%;
    }
  }
  .h-full { height: 100%; }
  .min-h-screen { min-height: 100vh; }
  
  
  /* ===================================
     OBJECT FIT UTILITIES
     =================================== */
  
  .object-cover { object-fit: cover; }
  .object-contain { object-fit: contain; }
  .object-center { object-position: center; }
  
  
  /* ===================================
     RESPONSIVE UTILITIES
     =================================== */
  
  @media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:flex-row { flex-direction: row; }
    .md\:flex-col { flex-direction: column; }
    .md\:hidden { display: none; }
    .md\:block { display: block; }
    .md\:text-4xl { font-size: var(--font-size-4xl); }
    .show-on-mobile { display: none; }
  }
  
  @media (min-width: 1024px) {
    .lg\:flex { display: flex; }
    .lg\:hidden { display: none; }
    .lg\:block { display: block; }
    .lg\:text-5xl { font-size: var(--font-size-5xl); }
    .lg\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
    .lg\:pl-12 { padding-left: var(--space-12); }
  }
  
  
  /* ===================================
     ACCESSIBILITY UTILITIES
     =================================== */
  
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  
  /* Focus States */
  *:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
  
  
  /* ===================================
     PRINT STYLES
     =================================== */
  
  @media print {
    .no-print {
      display: none !important;
    }
    
    .v9-header {
      position: static;
    }
    
    a {
      text-decoration: underline;
    }
  }
  
  
#brx-header .brxe-logo img {
  max-height: 75px;
}

#brx-header a {
  color: inherit;
  transition: color var(--transition-base);
}

#brx-header a:hover {
  color: var(--color-accent);
}

/* Hero CTAs: stack buttons on mobile */
@media (max-width: 767px) {
  header#brx-header .brxe-logo img {
    max-height: 50px;
  }
  
  #brx-content .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-10);
  }
  #brx-content .v9-hero .text-xl {
    font-size: var(--font-size-lg);
  }
  #brx-content .v9-overline-text {
    font-size: var(--font-size-sm);
  }
  #brx-content .v9-hero .stats-container.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  #brx-content .v9-hero .stats-container > div > div:first-of-type {
    font-size: var(--font-size-2xl);
  }
  #brx-content .v9-hero .stats-container > div > div:last-of-type {
    font-size: var(--font-size-xs);
  }
  .hide-on-mobile {
    display: none;
  }
  .brx-nav-nested-items {
    top: 96px;
    background-color: var(--v9-basil);
    color: #ffffff;
    padding: 20px;
    padding-left: 20px !important;
    justify-content: flex-start;
  }
  .brx-nav-nested-items .brxe-toggle.brx-toggle-div {
    display: none;
  }
  .brx-nav-nested-items li {
    margin-bottom: 10px;
  }
}

/* Hamburger menu: animate 3 lines → X when open (mobile toggle in header) */
#brx-header .brxe-toggle .brxa-wrap {
  --hamburger-width: 35px;
  --hamburger-height: 18px;
  display: block;
  width: var(--hamburger-width);
  height: var(--hamburger-height);
  position: relative;
  transition: transform var(--transition-base);
}

#brx-header .brxe-toggle .brxa-inner:before,
#brx-header .brxe-toggle .brxa-inner:after,
#brx-header .brxe-toggle .brxa-inner,
#brx-header .brxe-toggle .brxa-wrap::before,
#brx-header .brxe-toggle .brxa-wrap::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: var(--hamburger-width, 24px);
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
#brx-header .brxe-toggle .brxa-wrap::before {
  top: 0;
}
#brx-header .brxe-toggle .brxa-inner {
  top: 50%;
  transform: translateY(-50%);
}
#brx-header .brxe-toggle .brxa-wrap::after {
  bottom: 0;
}
/* Open state: middle line hide, top/bottom rotate into X */
#brx-header .brxe-toggle[aria-expanded="true"] .brxa-inner {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
}
#brx-header .brxe-toggle[aria-expanded="true"] .brxa-wrap::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
#brx-header .brxe-toggle[aria-expanded="true"] .brxa-wrap::after {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
} 

  /* ===================================
     END OF STYLESHEET
     =================================== */