:root {
      /* Spacing Variables */
      --spacing-xs: 0.25rem;
      --spacing-sm: 0.5rem;
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xl: 2rem;
      --spacing-2xl: 3rem;
      --spacing-3xl: 4rem;
      --spacing-4xl: 5rem;

      /* Layout Variables */
      --container-max-width: 1200px;
      --container-padding: 1rem;

      /* Breakpoints (for reference in media queries) */
      --mobile: 480px;
      --tablet: 768px;
      --desktop: 1024px;

      /* Typography Scale */
      --font-size-xs: 0.75rem;
      --font-size-sm: 0.875rem;
      --font-size-med: 1rem;
      --font-size-base: 1.25rem;
      --font-size-lg: 1.125rem;
      --font-size-xl: 1.25rem;
      --font-size-2xl: 1.5rem;
      --font-size-3xl: 2rem;
      --font-size-4xl: 2.5rem;
      --font-size-8xl: 4.5rem;
      --font-size-12xl: 6rem;

      /* Brand Colors */
      --notice-yellow: #fbc516;
      --notice-black: #1a1919;
      --notice-grey: #808285;
      --notice-white: #ffffff;

      /* Functional Colors */
      --notice-bg-primary: var(--notice-black);
      --notice-bg-secondary: #242424;  /* slightly lighter than black for layering */
      --notice-text-primary: var(--notice-white);
      --notice-text-secondary: var(--notice-grey);
      --notice-accent: var(--notice-yellow);
      
      /* Background tints for subtle variations */
      --notice-bg-grey-light: rgba(128, 130, 133, 0.1);
      --notice-bg-grey-medium: rgba(128, 130, 133, 0.2);
      
      /* Font Families */
      --font-primary: 'Roboto', sans-serif;
      /*--font-accent: 'Impact', sans-serif;*/
      --font-accent: 'Roboto', sans-serif;
      
      /* Font Weights */
      --font-regular: 400;
      --font-bold: 700;
  }

  /* Reset and Base Styles - Update to remove any default margins */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  html, body {
      overflow-x: hidden;  /* Prevent horizontal scrolling */
      position: relative;  /* Create new stacking context */
      width: 100%;
      margin: 0;
      padding: 0;
      overscroll-behavior-x: none;  /* Prevent horizontal overscroll */
      touch-action: pan-y pinch-zoom;  /* Only allow vertical touch actions */
  }

  html {
      scroll-behavior: smooth;
      scroll-padding-top: var(--nav-height); /* Add this variable to your root */
  }

  /* Utility Classes for Typography */
  .text-accent {
      font-family: var(--font-accent);
  }

  .text-yellow {
      color: var(--notice-accent);
  }


  /* Main Container Styles - Ensure no top margin/padding */
  .notice-coalition-main {
      width: 100%;
      font-family: var(--font-primary);
      color: var(--notice-text-primary);
      background-color: var(--notice-bg-primary);
  }

  /* Navigation Styles - Position at very top */
  .notice-nav {
      width: 100%;
      padding: var(--spacing-md) 0;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      background-color: black;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }


  .nav-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
  }

  /* Logo Styles */
  .nav-logo {
      margin-right: var(--spacing-xl);
  }

  .nav-logo img {
      height: 55px;
      width: auto;
  }

  /* Navigation Links */
  .nav-links {
      display: flex;
      gap: var(--spacing-xl);
      align-items: center;
      margin: 0 auto;
  }

  .nav-links a {
      color: var(--notice-text-primary);
      text-decoration: none;
      font-size: var(--font-size-base);
      font-weight: var(--font-bold);
      font-family: var(--font-accent);
      transition: color 0.2s ease;
  }

  .nav-links a:hover {
      color: var(--notice-accent);
  }

  /* Add selected nav link style */
  .nav-links a.selected {
      color: var(--notice-accent);
      position: relative;
  }

  .nav-links a.selected::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--notice-accent);
  }

  /* CTA Button */
  .nav-cta {
      margin-left: var(--spacing-xl);
  }

   /* Button Styles */
   .notice-btn {
      background-color: var(--notice-accent);
      color: var(--notice-black);
      font-family: var(--font-accent);
      font-weight: var(--font-bold);
      padding: var(--spacing-sm) var(--spacing-lg);
      border: none;
      cursor: pointer;
      transition: transform 0.2s ease;
      border-radius: 4px;
  }

  .notice-btn:hover {
      transform: translateY(-2px);
  }

  /* Section Base Styles - Add content container */
  .notice-coalition-main > section {
      width: 100%;
      padding: var(--spacing-2xl) 0; /* Remove horizontal padding */
      overflow-x: hidden;  /* Prevent horizontal scrolling within sections */
  }

  /* Alternating Background Colors for Visual Separation */
  .notice-intro {
      position: relative;
      width: 100%;
      min-height: 100vh; /* Ensures full viewport height */
      overflow: hidden; /* Prevents video from spilling out */
      background-color: var(--notice-bg-primary);
      margin: 0; /* Ensure no margins */
      padding-top: var(--nav-height);
      top: 0; /* Align to top */
  }


  /* Updated Intro Content Styles */
  .intro-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      margin-top: var(--spacing-2xl); /* Added more space below navigation */
  }

  .intro-text-container {
      max-width: 90%; /* Increased from previous max-width */
      margin: 0 auto;
      padding: 0 var(--container-padding);
  }

  .intro-catchphrase {
      font-family: var(--font-accent);
      font-size: var(--font-size-8xl);
      color: var(--notice-white);
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      letter-spacing: 0.02em;
      line-height: 0.9;
      text-transform: uppercase;
      text-align: left;
      border-bottom: 4px solid var(--notice-white);
      padding-bottom: var(--spacing-lg);
      margin-bottom: var(--spacing-xl);
  }

  .intro-cta-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacing-xl);
  }

  .intro-cta-text {
      color: var(--notice-white);
      font-size: var(--font-size-xl);
      font-weight: var(--font-bold);
      max-width: 60%;
      text-align: left;
  }

  .intro-cta-btn {
      flex-shrink: 0;
      font-size: var(--font-size-lg);
      padding: var(--spacing-md) var(--spacing-xl);
      background-color: transparent; /* Remove background */
      border: 2px solid var(--notice-accent); /* Add border */
      color: var(--notice-accent); /* Match text to border color */
      transition: all 0.3s ease; /* Smooth transition for all changes */
      border-radius: 4px;
  }

  .intro-cta-btn:hover {
      background-color: var(--notice-accent); /* Fill background on hover */
      color: var(--notice-black); /* Change text color for contrast */
  }



  /* Section Header Styles */
  .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-2xl);
      margin-top: 1rem;
  }

  .section-title {
      font-family: var(--font-accent);
      font-size: var(--font-size-3xl);
      color: var(--notice-white);
  }

  /* Add content container for each section */
  .section-content {
      max-width: var(--container-max-width);
      margin: 0 auto;
      padding: 0 var(--container-padding);
  }

  .section-link {
      font-family: var(--font-accent);
      font-size: var(--font-size-lg);
      color: var(--notice-accent);
      text-decoration: none;
      position: relative;
      padding-bottom: var(--spacing-xs);
  }

  .section-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--notice-accent);
      transform: scaleX(0);
      transition: transform 0.3s ease;
  }

  .section-link:hover::after {
      transform: scaleX(1);
  }

  /* Newsletter Section Styles */
  .notice-newsletter {
      padding: var(--spacing-3xl) 0;
      /*min-height: 600px;*/
      display: flex;
      align-items: center;
  }


  .newsletter-widget-container {
      margin-top: var(--spacing-xl);
  }

  /* Social Media Section / Footer Styles */
  .notice-social {
      padding: var(--spacing-3xl) 0;
      text-align: center;
  }

  .notice-social-links {
      display: flex;
      justify-content: center;
      gap: var(--spacing-xl);
      margin-bottom: var(--spacing-2xl);
  }

  .social-icon {
      width: 64px;
      height: 64px;
      background-color: var(--notice-bg-secondary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;
  }

  .social-icon:hover {
      transform: translateY(-2px);
  }

  .social-icon img {
      width: 32px;
      height: 32px;
      filter: brightness(0) invert(1);
  }

  .social-icon i {
      font-size: 32px;
      color: var(--notice-white);
  }

  .notice-footer-logo {
      display: block;
      margin: 0 auto;
      transition: opacity 0.3s ease;
  }

  .notice-footer-logo img {
      height: 60px;
      width: auto;
  }

  .notice-footer-logo:hover {
      opacity: 0.8;
  }

  /* Add new alternating background colors */
  .notice-coalition-main > section:not(.notice-intro):nth-child(odd) {
      background-color: var(--notice-bg-primary);
  }

  .notice-coalition-main > section:not(.notice-intro):nth-child(even) {
      background-color: var(--notice-bg-secondary);
  }

  

  /* Responsive Design */
  @media screen and (max-width: 1024px) {
      :root {
          /* Adjust spacing for tablet */
          --container-padding: 2rem;
      }
  }

  @media screen and (max-width: 768px) {
      :root {
          /* Adjust spacing for mobile */
          --container-padding: 1rem;
          --font-size-4xl: 2rem;
          --font-size-3xl: 1.75rem;
          --font-size-2xl: 1.25rem;
      }

      .notice-coalition-main > section {
          padding: var(--spacing-xl) var(--spacing-md);
      }

      /* Navigation Styles */
      .nav-container {
          flex-direction: column;
          gap: var(--spacing-md);
      }

      .nav-logo {
          margin-right: 0;
      }

      .nav-links {
          /*
          flex-wrap: wrap;
          justify-content: center;
          gap: var(--spacing-md);
          */
          display:none;
      }

      .nav-cta {
          margin-left: 0;
      }

      /* Intro Section Styles */
      .intro-catchphrase {
          font-size: calc(var(--font-size-4xl) * 0.8);
          letter-spacing: 0.1em;
          line-height: 1.6;
          margin-bottom: var(--spacing-lg);
      }

      .intro-cta-container {
          flex-direction: column;
          gap: var(--spacing-lg);
      }

      .intro-cta-text {
          max-width: 100%;
          font-size: var(--font-size-lg);
          text-align: center;
      }

      .intro-cta-btn {
          width: 100%;
          text-align: center;
      }

      .notice-newsletter {
          min-height: 300px;
          padding: var(--spacing-2xl) 0;
      }

      /* Social Media Section / Footer Styles */
      .notice-social {
          padding: var(--spacing-2xl) 0;
      }

      .notice-social-links {
          gap: var(--spacing-lg);
          margin-bottom: var(--spacing-2xl);
      }

      .social-icon {
          width: 48px;
          height: 48px;
      }

      .social-icon img {
          width: 24px;
          height: 24px;
      }

      .notice-footer-logo img {
          height: 48px;
      }
  }

  /* Gallery Grid */
  .masonry-grid {
      columns: 4;
      column-gap: 1.25rem;
      padding: 1.25rem 0;
  }

  .gallery-item {
      break-inside: avoid;
      margin-bottom: 1.25rem;
  }

  .gallery-thumbnail-container {
      position: relative;
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      background-color: #f0f0f0;
      height: 0;
      cursor: pointer;
  }

  .gallery-thumbnail {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
      will-change: opacity, filter;
      transform: translateZ(0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
  }

  .gallery-content {
      padding: var(--spacing-sm);
  }

  .gallery-title {
      font-family: var(--font-headline);
      font-size: var(--font-size-lg);
      margin-bottom: var(--spacing-xs);
  }

  .gallery-metadata {
      font-size: 0.9rem;
      color: var(--tcia-gray-light);
  }

  /* Responsive Design */
  @media (max-width: 1200px) {
      .masonry-grid {
          columns: 3;
      }
  }

  @media (max-width: 768px) {
      .masonry-grid {
          columns: 2;
      }
  }

  @media (max-width: 480px) {
      .masonry-grid {
          columns: 1;
      }
  }

  /* Modal Styles */
  .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.8);
      z-index: 1000;
      overflow: hidden;
      opacity: 0;
      transition: opacity 0.3s ease;
  }

  .modal-overlay.active {
      display: flex;
      opacity: 1;
      justify-content: center;
      align-items: center;
  }

  .modal-content {
      position: relative;
      max-width: 90vw;
      max-height: 90vh;
  }

  .modal-image {
      max-width: 100%;
      max-height: 90vh;
      object-fit: contain;
  }

  .modal-close {
      position: absolute;
      top: -40px;
      right: -40px;
      background: none;
      border: none;
      color: white;
      font-size: 2rem;
      cursor: pointer;
      padding: 10px;
  }

  /* Hide modal functionality on mobile */
  @media (max-width: 768px) {
      .gallery-thumbnail {
          pointer-events: none;
      }
  }

  /* Add hover effect */
  @media (min-width: 769px) {
      .gallery-thumbnail-container:hover .gallery-thumbnail {
          filter: brightness(0.8);
      }

      .gallery-thumbnail-container::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0);
          transition: background 0.3s ease-in-out;
          pointer-events: none;
      }

      .gallery-thumbnail-container:hover::after {
          background: rgba(0, 0, 0, 0.1);
      }
  }

  /* Filter Styles */
  .gallery-filters {
      margin-bottom: var(--spacing-2xl);
      background-color: var(--notice-bg-secondary);
      border-radius: 8px;
      overflow: hidden;
  }

  .filter-toggle {
      padding: var(--spacing-md);
  }

  .filter-toggle-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      color: var(--notice-white);
      font-family: var(--font-accent);
      font-size: var(--font-size-lg);
      cursor: pointer;
      padding: var(--spacing-md) var(--spacing-lg);
      text-align: left;
  }

  .filter-toggle-btn i {
      transition: transform 0.3s ease;
  }

  .filter-toggle-btn.active i {
      transform: rotate(180deg);
  }

  .filter-options {
      display: none;
      padding: 0 var(--spacing-lg) var(--spacing-lg);
  }

  .filter-options.active {
      display: block;
  }

  .filter-section {
      margin-bottom: var(--spacing-lg);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: var(--spacing-md);
  }

  .filter-section:last-child {
      border-bottom: none;
  }

  .filter-section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--spacing-md);
  }

  .filter-section-header h3 {
      font-family: var(--font-accent);
      font-size: var(--font-size-base);
      color: var(--notice-white);
      margin: 0;
  }

  .section-toggle-btn {
      background: none;
      border: none;
      color: var(--notice-white);
      cursor: pointer;
  }

  .section-toggle-btn i {
      transition: transform 0.3s ease;
  }

  .section-toggle-btn.active i {
      transform: rotate(180deg);
  }

  .filter-section-content {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
  }

  .filter-section-content.hidden {
      display: none;
  }

  .filter-button {
      background-color: transparent;
      border: 1px solid var(--notice-accent);
      color: var(--notice-accent);
      font-family: var(--font-accent);
      font-size: var(--font-size-sm);
      padding: var(--spacing-xs) var(--spacing-md);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .filter-button:hover {
      background-color: rgba(251, 197, 22, 0.1);
  }

  .filter-button.active {
      background-color: var(--notice-accent);
      color: var(--notice-black);
  }

  .filter-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: var(--spacing-lg);
  }

  .clear-filters-btn {
      background: none;
      border: none;
      color: var(--notice-accent);
      font-family: var(--font-accent);
      font-size: var(--font-size-sm);
      cursor: pointer;
      text-decoration: underline;
  }

  .clear-filters-btn:hover {
      color: var(--notice-white);
  }

  @media screen and (max-width: 768px) {
      .filter-section-content {
          flex-direction: column;
          gap: var(--spacing-xs);
      }
      
      .filter-button {
          width: 100%;
          text-align: left;
      }
  }

  /* Add this to your existing style section */
  .notice-media-gallery {
      padding-top: calc(var(--spacing-3xl) + 60px); /* Additional padding to account for fixed nav */
      margin-top: 0;
  }

  .notice-coalition-main > section:first-of-type {
      padding-top: calc(var(--spacing-3xl) + 60px); /* Ensure first section after nav has proper spacing */
  }