/* ============================================
   DESIGN TOKENS — needed by navbar elements
   ============================================ */
   :root{
    --ink:        #FFFFFF;
    --charcoal:   #ede0d4;
    --card:       #e6ccb2;
    --shark-grey: #ddb892;
    --fin-grey:   #000000;
    --bone:       #000000;
    --acid:       #ddb892;
    --blood:      #000000;
  
    --primary:       #b08968;
    --primary-hover: #96714f;
  
    --font-display: 'Anton', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
  }
  
  *{ margin:0; padding:0; box-sizing:border-box; }
  body{
    background:var(--ink);
    color:var(--bone);
    font-family:var(--font-body);
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:var(--primary); color:#000; }
  button{ font-family:inherit; }
  
  /* ============================================
     HEADER
     ============================================ */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--shark-grey);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px;
    max-width:1240px; margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:14px; }
  .logo{
    position:relative;
    font-family:var(--font-display);
    font-size:21px;
    text-transform:uppercase;
    display:inline-flex; align-items:center; gap:10px;
  }
  .logo-img{
    width:32px; height:32px;
    border-radius:8px;
    flex:0 0 auto;
    font-size:0;
  }
  .logo-img::after{ font-size:7px; padding:2px 4px; }
  img.logo-img{ object-fit:cover; background:none; }
  .logo .bite{ -webkit-text-stroke:1px var(--bone); color:transparent; }
  
  .social-icons{ display:flex; align-items:center; gap:8px; }
  .social-icons a{
    width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--shark-grey);
    border-radius:50%;
    color:var(--fin-grey);
    transition:border-color 0.25s ease, color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  }
  .social-icons svg{ width:13px; height:13px; }
  .social-icons a:hover{
    border-color:var(--primary-hover); color:#000;
    background:var(--primary-hover);
    transform:translateY(-2px);
  }
  
  nav.links{ display:flex; align-items:center; gap:30px; }
  .nav-link{
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--fin-grey);
    position:relative;
    padding:8px 0;
    display:inline-flex; align-items:center; gap:5px;
    transition:color 0.25s ease;
  }
  .nav-link::after{
    content:""; position:absolute; left:0; bottom:2px;
    width:0%; height:1.5px; background:var(--bone);
    transition:width 0.3s ease;
  }
  .nav-link:hover{ color:var(--bone); }
  .nav-link:hover::after{ width:100%; }
  .nav-link .chevron{ width:9px; height:6px; color:var(--fin-grey); transition:transform 0.25s ease, color 0.25s ease; }
  .nav-link:hover .chevron{ color:var(--bone); }
  .nav-item:hover .nav-link .chevron{ transform:rotate(180deg); }
  
  .nav-item{ position:relative; }
  .dropdown{
    position:absolute; top:100%; left:0;
    padding-top:16px;
    background:#FFFFFF;
    border:1px solid var(--shark-grey);
    border-radius:16px;
    box-shadow:0 28px 56px -18px rgba(176,137,104,0.2);
    padding-left:20px; padding-right:20px; padding-bottom:20px;
    display:flex;
    gap:24px;
    opacity:0;
    visibility:hidden;
    transition:opacity 0.2s ease, visibility 0.2s ease;
    pointer-events:none;
    z-index:60;
  }
  .nav-item:hover .dropdown,
  .nav-item.open .dropdown{
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .dropdown-simple{ right:auto; }
  
  .dropdown-list{
    display:flex; flex-direction:column; gap:2px;
    min-width:190px;
  }
  .dropdown-list-2col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px 20px;
    min-width:380px;
  }
  .dropdown-list a{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--fin-grey);
    padding:9px 10px;
    border-radius:8px;
    white-space:nowrap;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .dropdown-list a:hover{ background:var(--charcoal); color:var(--bone); }
  
  .dropdown-preview{ flex:0 0 auto; width:180px; }
  .dropdown-preview-img{ width:180px; height:180px; border-radius:12px; }
  .dropdown-preview-img::after{ font-size:9.5px; text-align:center; }
  
  .nav-cta{
    font-family:var(--font-mono);
    font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
    background:var(--primary); color:#000;
    padding:11px 20px;
    border:1px solid var(--primary);
    border-radius:100px;
    font-weight:600;
    display:inline-block;
    transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .nav-cta:hover{ background:var(--primary-hover); border-color:var(--primary-hover); }
  
  .menu-toggle{
    display:none; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer;
  }
  .menu-toggle span{ width:22px; height:2px; background:var(--bone); }
  
  /* ============================================
     RESPONSIVE — navbar-related rules only
     ============================================ */
  @media (max-width:720px){
    nav.links{ display:none; }
    .social-icons{ display:none; }
    .nav-cta{ display:none; } /* removed on mobile so the full brand name always has room */
    .menu-toggle{ display:flex; flex-shrink:0; }
    .brand{ min-width:0; }
    header .logo span{ white-space:nowrap; }
  
    /* dropdowns become tap-to-expand inline panels on mobile */
    nav.links .nav-item{ width:100%; }
    nav.links .nav-link{ width:100%; justify-content:space-between; }
    .dropdown{
      position:static;
      opacity:1; visibility:visible; pointer-events:auto; transform:none;
      border:none; box-shadow:none; border-radius:0;
      padding:4px 0 10px 14px;
      display:none;
      background:none;
    }
    .nav-item.open .dropdown{ display:flex; }
    .dropdown-list-2col{ grid-template-columns:1fr; min-width:0; }
    .dropdown-preview{ display:none; }
    .nav-item .chevron{ transition:transform 0.25s ease; }
    .nav-item.open .chevron{ transform:rotate(180deg); }
  }
  @media (max-width:400px){
    .nav{ padding:14px 18px; gap:8px; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  }