<!-- ===========================
     COOKIE BANNER
=========================== -->
<style>
  /* Inline styles to ensure they load */
  
  [data-cookie-banner].cookie-hidden {
    display: none !important;
  }
  .cookie-banner-outer {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1.75rem 1.25rem 0;
  }
  .cookie-banner-shell {
    width: 100%;
    max-width: 1040px;
    border-radius: 50px;
    padding: 1.2rem 2rem;
    background: linear-gradient(135deg, rgba(56,189,248,0.15), rgba(15,23,42,0.95));
    border: 1px solid rgba(56,189,248,0.6);
    box-shadow: 0 0 0 1px rgba(15,23,42,0.9), 0 26px 80px rgba(15,23,42,0.95), 0 0 40px rgba(56,189,248,0.5);
    backdrop-filter: blur(12px);
  }
  .cookie-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .cookie-content-wrapper {
      flex-direction: row;
      align-items: center;
      gap: 2rem;
    }
  }
  .cookie-copy {
    flex: 1;
  }
  .cookie-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #e5e7eb;
    margin: 0 0 0.25rem 0;
  }
  .cookie-text {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
  }
  .cookie-text a {
    color: #22d3ee;
    text-decoration: underline;
  }
  .cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }
  .cookie-btn-primary, .cookie-btn-secondary {
    border-radius: 50px;
    padding: 0.7rem 1.8rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    border: none;
    transition: all 0.2s;
  }
  .cookie-btn-primary {
    color: #0f172a;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    box-shadow: 0 4px 14px rgba(37,99,235,0.5);
  }
  .cookie-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,99,235,0.7);
  }
  .cookie-btn-secondary {
    color: #e5e7eb;
    background: rgba(51,65,85,0.8);
    border: 1px solid rgba(148,163,184,0.4);
  }
  .cookie-btn-secondary:hover {
    background: rgba(71,85,105,0.9);
  }
</style>

<section
  data-cookie-banner
  style="
    position: fixed;
    top: 4.5rem;           /* just under your sticky header */
    left: 0;
    right: 0;
    z-index: 35;           /* below header z-40, above content */
    display: none;         /* JS will turn this on */
  "
>
  <div class="cookie-banner-outer">
    <div class="cookie-banner-shell">
      <div class="cookie-content-wrapper">
        <div class="cookie-copy">
          <div class="cookie-title">We use cookies</div>
          <p class="cookie-text">
            We use cookies to improve your browsing experience, run basic analytics and understand
            how our site is used. You can change or withdraw your consent at any time. See our
            <a href="cookie-policy.html">Cookie Policy</a>.
          </p>
        </div>
        <div class="cookie-actions">
          <button type="button" data-cookie-essentials class="cookie-btn-secondary">
            Essentials only
          </button>
          <button type="button" data-cookie-accept class="cookie-btn-primary">
            Accept all cookies
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

/* Cookie banner sticks under the header while scrolling */
[data-cookie-banner] {
  position: sticky !important;
  top: 4.5rem;   /* adjust this to be just below your header */
  z-index: 35;   /* below header (z-40), above content */
}
