/* ===== contact.html inline style 1 ===== */
:root{
      --black:#111827; --muted:#6b7280; --line:#e5e7eb; --gold:#C89B3C;
      --z-nav:1000; --z-overlay:20098; --z-drawer:20099; --z-dropdown:20120; --z-modal:20110;
    }
    body{ background:#fff; color:var(--black); -webkit-font-smoothing:antialiased; }
    .container-xl{ max-width:1200px; margin:0 auto; padding:1rem; }
    .muted{ color:var(--muted); }
    .btn{ border:1px solid var(--line); padding:.6rem .9rem; border-radius:.8rem; background:#fff; color:var(--black); transition:all .15s; }
    .btn:hover{ background:#f9fafb }
    .btn-primary{ background:#111827; color:#fff; border-color:#111827 }
    .field{ display:flex; flex-direction:column; gap:.35rem }
    .field input,.field textarea{ border:1px solid var(--line); border-radius:.7rem; padding:.7rem .8rem }
    .field input:focus,.field textarea:focus{ outline:none; border-color:#d1d5db; box-shadow:0 0 0 3px rgba(17,24,39,.08) }
    .err{ color:#b91c1c; font-size:.85rem; display:none }
    .show{ display:block !important }
    /* Loader */
    #loader{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60; background:rgba(255,255,255,.55); backdrop-filter:blur(3px) }
    #loader.active{ display:flex }
    .spinner{ width:56px; height:56px; border-radius:9999px; border:6px solid rgba(0,0,0,.06); border-top-color:var(--gold); animation:spin 900ms linear infinite }
    @keyframes spin{ to{ transform:rotate(360deg) } }
    /* Section dividers on large screens */
    .section{ padding:1rem 0; }
    .section + .section{ border-top:1px solid var(--line); }
    /* success banner (inline hint) */
    .banner{ display:none; padding:.75rem 1rem; border-radius:.65rem; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
    .banner.show{ display:block; }

    /* ===== Modal ===== */
    .modal-overlay{
      position:fixed; inset:0; display:none; z-index:var(--z-modal);
      background:rgba(2,6,23,.46); backdrop-filter:saturate(120%) blur(4px);
      padding:1rem; /* keeps it off the exact edges on mobile */
    }
    .modal-overlay.show{
      display:grid; /* bullet-proof centering */
      place-items:center;
    }
    .modal{
      width:min(92vw,520px); background:#fff; border:1px solid #eef2f7; border-radius:1rem; padding:1rem;
      box-shadow:0 24px 64px rgba(2,6,23,.18);
      transform:translateY(10px) scale(.98); opacity:0; transition:transform .22s ease, opacity .2s ease;
      margin-inline:auto; /* ensure center in any layout context */
    }
    .modal-overlay.show .modal{ transform:translateY(0) scale(1); opacity:1; }
    .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
    .modal-title{ font-weight:800; font-size:1.05rem; }
    .modal-body{ color:#374151; margin-top:.35rem; }
    .modal-actions{ margin-top:.9rem; display:flex; justify-content:flex-end; gap:.5rem; }
    .icon-ok{ width:22px; height:22px; color:#10b981; }

    /* Sticky nav + safe stacking so dropdowns aren’t clipped */
    #site-nav{
      position:sticky; top:0; z-index:var(--z-nav);
      background:rgba(255,255,255,.82); border-bottom:1px solid #eee;
      overflow:visible !important;
    }
    /* Ensure drawer & overlay sit above sticky nav */
    #drawer{ z-index:var(--z-drawer) !important; }
    #drawerOverlay{ z-index:var(--z-overlay) !important; }
    /* Account dropdowns/popovers above nav */
    .dropdown, .menu, .menu-panel, .popover, .account-menu,
    [role="menu"], [data-dropdown], [data-popover], [data-menu]{
      position:relative; z-index:var(--z-dropdown) !important;
    }