*, *::before, *::after { box-sizing: border-box; }

  /* page loader container */
  .loader {
    min-height: 100vh;               /* full-screen center */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2.2vw, 18px);    /* responsive gap between logo & bar */
    padding: 20px;                   /* give breathing room on small screens */
    background: #f1f2ee;
    margin: 0;
  }

  /* responsive logo:
     - minimum 160px on very small screens
     - grows to 60vw (so it fills mobile nicely)
     - max 400px on large screens */
  .logo-container img {
    display: block;
    width: clamp(160px, 90vw, 400px);
    height: auto;
    margin: 0;
    line-height: 0; /* remove descender gap */
    max-width: 100%;
  }

  /* responsive progress bar width + thickness */
  .progress-bar {
    width: clamp(160px, 60vw, 250px);   /* responsive width */
    height: clamp(4px, 1.2vw, 6px);     /* responsive thickness */
    background: #e6e7e3;                /* slightly darker than page bg so bar track is visible */
    border-radius: 999px;
    overflow: hidden;
    padding: 0;
  }

  /* animated fill — keep stripes scaled */
  .progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(
      90deg,
      #324A6E 25%,
      #324A6E 50%,
      #324A6E 75%
    );
    /* background-size should scale with bar thickness — use calc() with height */
    background-size: calc( (var(--bar-h, 8px)) * 1 ) calc( (var(--bar-h, 8px)) * 1 );
    animation: loadProgress 2s ease-in-out forwards, stripeSlide 1s linear infinite;
    border-radius: 999px;
  }

  /* small CSS variable trick to help older browsers — compute bar height for background-size */
  /* we set the variable via inline style fallback using JS is ideal, but clamp above keeps things fine without it.
     For wide compatibility the background-size below uses fixed values that work across sizes. */
  @keyframes loadProgress {
    from { width: 0%; }
    to   { width: 100%; }
  }

  @keyframes stripeSlide {
    from { background-position: 0 0; }
    to   { background-position: 40px 0; }
  }

  /* Optional: reduce motion for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .progress-fill { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  }

  /* Fine tuning for very small screens (phones) */
  @media (max-width: 420px) {
    .loader { padding: 12px; }
    .progress-bar { width: 65vw; } /* make bar wider on tiny phones */
  }