/* ---------- HERO ---------- */
  .hero{
    position:relative;
    overflow:hidden;
  }
  .hero .banner {
    width:100%;height:100%;text-align:center;
    max-width: 1920px;margin:0 auto;
    position: relative;
  }

  .hero-inner{
    text-align:left;
    position:absolute;z-index:2;
    bottom:5%;
    max-width:var(--maxw);margin:0 auto;
    display:flex;flex-direction:column;justify-content:center;
    padding: 0 24px;
  }

  @media (min-width: 1170px) {
    .hero-inner {
      padding: 0 84px;
      justify-content:center;
    }
  }

  .eyebrow{
    color:#d4a962;
    font-size:15px;letter-spacing:1px;font-weight:500;
  }
  .hero h1{
    font-weight:500;
    color:#ffffff;
    font-size:112px;
    line-height:1.04;
    margin:0;
    max-width:14ch;
  }
  @media (min-width: 1170px ) {
    .eyebrow{margin-bottom:14px;}
  }

  @media (max-width: 1600px) and (min-width: 1170px ) {
    .hero h1{
      font-size:74px;
    }
  }

  @media (max-width: 1170px) and (min-width: 1080px ) {
    .hero h1{
      font-size:58px;
    }
  }

  @media (max-width: 1080px) {
    .hero h1{
      font-size:45px;
    }
  }

  @media (max-width: 540px) {
    .hero h1{
      font-size:23px;
    }
  }

  /* ---------- FILTER BAR ---------- */
  .filterbar{
    padding: 22px 24px 0;
    max-width:var(--maxw);margin:0 auto;
    position:relative;    
  }

  @media (min-width: 1170px) {
    .filterbar{
      display:flex;
      align-items: center;
      gap:50px;
      border-bottom:2px solid var(--line-color-black);
    }
  }

  .cuisine-select{
    position:relative;
    display:inline-block;
  }
  .cuisine-btn{
    border:1px solid #2c3c46;
    background:#f7f5ed;
    color:#2c3c46;
    padding:13px 20px;
    font-size:18px;
    letter-spacing:0.16em;
    font-weight:300;
    display:flex;align-items:center;gap:14px;
    min-width:210px;
    justify-content:space-between;
  }
  .cuisine-menu{
    position:absolute;top:calc(100% + 1px);left:0;
    background:#4a4740;
    font-weight:400;
    min-width:210px;
    font-size:18px;
    display:none;
    flex-direction:column;
    z-index:30;
    box-shadow:0 12px 24px rgba(0,0,0,0.25);
  }
  .cuisine-menu.open{display:flex;}
  .cuisine-menu button{
    background:none;border:none;text-align:left;
    color:#ffffff;
    padding:11px 20px;
    font-weight:400;
    font-size:18px;
    letter-spacing:0.14em;
  }
  .cuisine-menu button:hover{background:rgba(255,255,255,0.06);}
  .cuisine-menu button.active{background:var(--gold);color:#ffffff;}

  .alpha{
    margin-top:26px;
    padding-bottom:16px;
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    row-gap:12px;
    font-size:14px;
    color:var(--line-color-black-soft);
    border-width:1px 0;border-style:solid;border-color:var(--line-color-black);
    padding-top:16px;
    
  }

  .alpha a {
    padding-bottom:6px;font-weight:300;font-size:18px;
  }

  .alpha a.active{
    font-weight:700;text-decoration: underline;
  }

  .alpha a:hover{font-weight:700;text-decoration: underline;}

  @media (min-width: 1170px) {
    .alpha {
      border-width:0px 0;border-style:solid;border-color:var(--line-color-black);
      padding-top:0px;
    }
  }

  /* ---------- GRID ---------- */
  .result {}
  .grid{
    max-width:var(--maxw);margin:0 auto;
    padding: 26px 24px 80px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 30px;
  }
  
  @media (min-width: 1170px){
    .grid{grid-template-columns: repeat(4, 1fr); gap:56px 30px;}
  }

  .card{
    display:flex;flex-direction:column;
  }
  .card.hide{
    display:none;
  };
  .thumb{
    aspect-ratio: 4/3;
    width:100%;
    border-radius:var(--radius);
    margin-bottom:18px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
  }
  .thumb .tag{
    position:absolute;bottom:10px;left:10px;
    font-size:10px;letter-spacing:0.1em;color:#fff;
    background:rgba(0,0,0,0.35);
    padding:4px 8px;
  }

  .card h3{
    font-weight:600;
    color:var(--gold);
    font-size:30px;
    padding:10px 0;margin:0px;
  }

  @media (max-width: 540px){
    .card h3{font-size:20px;}
  }

  .card .offers {
    font-size:14px;
    line-height:1.55;
    margin:0 0 0px;
  }
  .card .offers p {margin:0px;padding:0;}
  .card .offers ul {margin:0px 0 0 20px;padding:0px}
  .card .offers ol {margin:0px 0 0 20px;padding:0px}
  .card .offers li {margin:0px;padding:0px}

  .card ul.offer{
    margin:0 0 16px;
    padding-left:16px;
    font-size:13.5px;
    line-height:1.55;
  }
  .card ul.offer li{margin-bottom:6px;}

  .venue{
    font-size:14px;
    color:#808080;
    padding-top:14px;
    font-weight:400;
    border-top:1px solid var(--line);
    
  }

  .card .intro {
    min-height:210px;
  }

  .tandc{
    border-top:1px solid var(--gold);
    border-bottom:1px solid var(--gold);
    margin-top:10px;
    color:var(--gold);
  }
  .tandc-toggle{
    width:100%;
    background:none;border:none;
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 0;
    font-size:13px;letter-spacing:0.12em;font-weight:700;
    color:var(--gold);
  }
  .tandc-toggle .icon{
    width:16px;height:16px;position:relative;flex-shrink:0;
  }
  .tandc-toggle .icon::before,.tandc-toggle .icon::after{
    content:'';position:absolute;background:var(--gold);
  }
  .tandc-toggle .icon::before{left:0;right:0;top:7px;height:2px;}
  .tandc-toggle .icon::after{top:0;bottom:0;left:7px;width:2px;transition:transform .2s ease;}
  .tandc.open .tandc-toggle .icon::after{transform:scaleY(0);}

  .tandc-body{
    max-height:0;overflow:hidden;
    transition:max-height .3s ease;
    color:var(--text-color-black);
  }
  .tandc.open .tandc-body{max-height:600px;font-size:13px}
  .tandc-body ol{
    margin:0 0 14px;
    padding-left:18px;
    font-size:11.5px;
    line-height:1.6;
    color:var(--line-color-black-soft);
  }
  .tandc-body ol li{margin-bottom:6px;}

  .book-btn{
    display:flex;align-items:center;justify-content:space-between;
    background:#cc9f5e;;
    color:#ffffff;
    border:none;
    padding:15px 20px;
    font-size:12px;letter-spacing:0.14em;font-weight:700;
    margin-top:14px;
    width:100%;
  }
  .book-btn:hover{background:var(--gold-deep);}
  .book-btn span.arrow{font-size:15px;}

  /* thumb art — echoes each venue's tone from the reference photography */
  .thumb{position:relative;}
  .thumb img {width:100%;}

  .top_message{background:#eee9df}
  .top_message div {text-align:left;padding: 20px 24px;font-size:18px}
  

  @media (min-width: 1170px){
    .filterbar{padding:10px 114px;}
    .top_message {text-align: center;}
    .top_message div {display:flex;justify-content: center; padding: 20px 0px;}
    .top_message div p {text-align:left;margin:0 auto;}
    .grid{padding:40px 84px 120px;}
  }