/* ============================================================
   HBM FRONT — PREMIUM GOLD + DARK GREEN (FULL)
   File: assets/css/hbm-front.css
============================================================ */

/* ============================================================
   1) GLOBAL SCOPE + TOKENS
============================================================ */
.hbm-scope{
  --hbm-gold:#d6ad61;
  --hbm-gold-2:#e9dbbd;
  --hbm-bronze:#a08c5b;

  --hbm-emerald:#0b2a24;
  --hbm-emerald-2:#071c18;
  --hbm-card:#0e221e;

  --hbm-line:rgba(214,173,97,.22);
  --hbm-text:rgba(255,255,255,.94);
  --hbm-muted:rgba(255,255,255,.78);
  --hbm-radius:20px;

  color:var(--hbm-text);
}

/* prevent theme from forcing black titles */
.hbm-scope h1,
.hbm-scope h2,
.hbm-scope h3,
.hbm-scope a{ color: inherit; }

.hbm-empty{
  color: var(--hbm-muted);
  font-weight: 900;
}

/* ============================================================
   2) BUTTONS
============================================================ */
.hbm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:999px;
  border:1px solid rgba(214,173,97,.22);
  background:rgba(255,255,255,.06);
  color:#fff;text-decoration:none;font-weight:1000;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hbm-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(214,173,97,.38);
  box-shadow:0 12px 36px rgba(0,0,0,.25);
}

.hbm-btn--gold{
  background:
    radial-gradient(circle at 30% 20%, rgba(233,219,189,.25), transparent 55%),
    linear-gradient(180deg, rgba(214,173,97,.26), rgba(214,173,97,.12));
  border-color:rgba(214,173,97,.40);
}
.hbm-btn--soft{
  background:rgba(7,20,18,.40);
  border-color:rgba(255,255,255,.12);
}

/* ============================================================
   3) INPUTS / SELECTS
============================================================ */
.hbm-field{display:flex;flex-direction:column;gap:6px}
.hbm-label{
  font-weight:1000;
  color:rgba(233,219,189,.88);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hbm-input,.hbm-select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(214,173,97,.18);
  background:rgba(7,20,18,.55);
  color:#fff;
  outline:none;
}
.hbm-input::placeholder{color:rgba(255,255,255,.55)}
/* dropdown option colors (best effort cross-browser) */
.hbm-select option{
  background: #081a16;
  color: #fff;
}

.hbm-heroSearch__submit{
  padding:12px 16px;border-radius:14px;
  border:1px solid rgba(214,173,97,.38);
  background:
    radial-gradient(circle at 30% 20%, rgba(233,219,189,.22), transparent 60%),
    linear-gradient(180deg, rgba(214,173,97,.26), rgba(214,173,97,.12));
  color:#fff;font-weight:1000;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.hbm-heroSearch__submit:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 40px rgba(0,0,0,.25);
}

/* ============================================================
   4) HERO PRO
============================================================ */
.hbm-scope.hbm-heroPro{
  position:relative;
  overflow:hidden;
  padding: clamp(34px, 4.6vw, 72px) 0;
  background: linear-gradient(180deg, rgba(5,12,11,.96), rgba(4,10,9,.98));
}
.hbm-heroPro__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(214,173,97,.18), transparent 48%),
    radial-gradient(circle at 85% 24%, rgba(0,180,140,.14), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.72)),
    var(--hbm-hero-bg);
  background-size:cover;
  background-position:center;
  filter:saturate(1.08) contrast(1.05);
  transform: scale(1.02);
}
.hbm-heroPro__inner{
  position:relative; z-index:1;
  width:min(1240px, calc(100% - 56px));
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width:980px){
  .hbm-heroPro__inner{ grid-template-columns: 1fr; }
}
@media (max-width:520px){
  .hbm-heroPro__inner{ width:min(1240px, calc(100% - 28px)); }
}

.hbm-heroPro__copy{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 26px 90px rgba(0,0,0,.40);
}
.hbm-heroPro__topRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.hbm-heroPro__kicker{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,173,97,.30);
  background: rgba(214,173,97,.14);
  color: rgba(255,255,255,.92);
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;
}
.hbm-heroPro__title{
  margin: 14px 0 10px;
  font-weight: 1100;
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.06;
  text-shadow: 0 14px 34px rgba(0,0,0,.42);
}
.hbm-heroPro__sub{
  margin: 0 0 14px;
  color: rgba(255,255,255,.82);
  font-weight: 750;
  line-height: 1.7;
  max-width: 78ch;
}
.hbm-heroPro__cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* hero card (search) */
.hbm-heroPro__card{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(14,34,30,.88), rgba(7,20,18,.94));
  box-shadow: 0 26px 90px rgba(0,0,0,.40);
  overflow:hidden;
}
.hbm-heroPro__cardHead{
  padding: 16px 16px 0;
}
.hbm-heroPro__cardTitle{
  font-weight: 1100;
  font-size: 18px;
}
.hbm-heroPro__cardSub{
  margin-top: 4px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hbm-heroPro__cardBody{
  padding: 14px 16px 18px;
}

/* ============================================================
   5) SEARCH PRO GRID
============================================================ */
.hbm-searchPro{width:100%}
.hbm-searchPro__grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr auto;
  gap:10px;
  align-items:end;
}
@media(max-width:960px){
  .hbm-searchPro__grid{grid-template-columns:1fr;}
}







/* ============================================================
   6 directory 
============================================================ */


/* ============================================================
   HBM — Restaurants Listing (PRO GRID + CARD FIX) v2
   Paste into: assets/css/front.css
   Scoped: .hbm-scope
============================================================ */

.hbm-scope{
  --hb-bg:#070b0f;
  --hb-bg-2:#0b1218;
  --hb-surface:rgba(8,14,18,.84);
  --hb-surface2:rgba(14,28,34,.68);
  --hb-surface3:rgba(255,255,255,.04);
  --hb-border:rgba(255,255,255,.10);
  --hb-border-strong:rgba(214,173,97,.26);
  --hb-text:rgba(255,255,255,.94);
  --hb-muted:rgba(255,255,255,.70);
  --hb-soft:rgba(255,255,255,.56);
  --hb-gold:#d6ad61;
  --hb-gold-2:#b98a35;
  --hb-emerald:#0a6a5b;
  --hb-danger:#b64545;
  --hb-r:22px;
  --hb-r-sm:14px;
  --hb-shadow:0 18px 70px rgba(0,0,0,.55);
  --hb-shadow-card:0 12px 38px rgba(0,0,0,.42);
  --hb-max:1180px;
  color:var(--hb-text);
}

/* ============================================================
   OUTER WRAPS
============================================================ */

.hbm-scope .hbm-page,
.hbm-scope .hbm-cc__wrap,
.hbm-scope .hbm-dir__wrap,
.hbm-scope .hbm-prime__wrap,
.hbm-scope .hbm-wrap{
  width:min(var(--hb-max), calc(100% - 44px));
  margin-inline:auto;
}

@media (max-width:520px){
  .hbm-scope .hbm-page,
  .hbm-scope .hbm-cc__wrap,
  .hbm-scope .hbm-dir__wrap,
  .hbm-scope .hbm-prime__wrap,
  .hbm-scope .hbm-wrap{
    width:min(var(--hb-max), calc(100% - 24px));
  }
}

/* ============================================================
   MAIN PANEL / TOP SECTION
============================================================ */

.hbm-scope .hbm-cc,
.hbm-scope .hbm-dir,
.hbm-scope .hbm-prime,
.hbm-scope .hbm-page{
  position:relative;
  background:
    radial-gradient(circle at 18% 0%, rgba(214,173,97,.14), transparent 42%),
    radial-gradient(circle at 85% 10%, rgba(10,106,91,.14), transparent 48%),
    linear-gradient(180deg, rgba(10,18,24,.92), rgba(6,10,14,.96));
  border:1px solid var(--hb-border);
  border-radius:var(--hb-r);
  box-shadow:var(--hb-shadow);
  overflow:hidden;
}

.hbm-scope .hbm-cc::before,
.hbm-scope .hbm-dir::before,
.hbm-scope .hbm-prime::before,
.hbm-scope .hbm-page::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%),
    radial-gradient(circle at top right, rgba(214,173,97,.08), transparent 25%);
}

.hbm-scope .hbm-head,
.hbm-scope .hbm-hero,
.hbm-scope .hbm-dir__head,
.hbm-scope .hbm-cc__head,
.hbm-scope .hbm-prime__head{
  position:relative;
  z-index:1;
  padding:22px 22px 10px;
}

@media (max-width:640px){
  .hbm-scope .hbm-head,
  .hbm-scope .hbm-hero,
  .hbm-scope .hbm-dir__head,
  .hbm-scope .hbm-cc__head,
  .hbm-scope .hbm-prime__head{
    padding:18px 16px 8px;
  }
}

.hbm-scope h1,
.hbm-scope .hbm-title{
  margin:0 0 6px;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:.2px;
  color:rgba(255,255,255,.96);
}

.hbm-scope .hbm-subtitle,
.hbm-scope .hbm-lead,
.hbm-scope .hbm-desc{
  margin:0;
  max-width:860px;
  color:var(--hb-muted);
  font-size:14px;
  line-height:1.7;
}


/* ============================================================
   [hbm_dir] FILTERS + BUTTONS + SAME IMAGE SIZE
============================================================ */

/* ============================================================
   1) FILTER WRAPS
============================================================ */
.hbm-scope .hbm-filters,
.hbm-scope .hbm-cc__filters,
.hbm-scope .hbm-dir__filters,
.hbm-scope .hbm-prime__filters{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:0 22px 18px;
  margin-top:10px;
}

@media (max-width:640px){
  .hbm-scope .hbm-filters,
  .hbm-scope .hbm-cc__filters,
  .hbm-scope .hbm-dir__filters,
  .hbm-scope .hbm-prime__filters{
    padding:0 16px 16px;
  }
}

.hbm-scope .hbm-filters > *,
.hbm-scope .hbm-cc__filters > *,
.hbm-scope .hbm-dir__filters > *,
.hbm-scope .hbm-prime__filters > *{
  flex:0 1 auto;
}

/* ============================================================
   2) FILTER INPUTS
============================================================ */
.hbm-scope .hbm-filters input[type="search"],
.hbm-scope .hbm-filters input[type="text"],
.hbm-scope .hbm-filters select,
.hbm-scope .hbm-cc__filters input[type="search"],
.hbm-scope .hbm-cc__filters input[type="text"],
.hbm-scope .hbm-cc__filters select,
.hbm-scope .hbm-dir__filters input[type="search"],
.hbm-scope .hbm-dir__filters input[type="text"],
.hbm-scope .hbm-dir__filters select,
.hbm-scope .hbm-prime__filters input[type="search"],
.hbm-scope .hbm-prime__filters input[type="text"],
.hbm-scope .hbm-prime__filters select{
  min-width:180px;
  height:44px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--hb-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(0,0,0,.18);
  color:var(--hb-text);
  outline:none;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.hbm-scope .hbm-filters input::placeholder,
.hbm-scope .hbm-cc__filters input::placeholder,
.hbm-scope .hbm-dir__filters input::placeholder,
.hbm-scope .hbm-prime__filters input::placeholder{
  color:rgba(255,255,255,.50);
}

.hbm-scope .hbm-filters input:focus,
.hbm-scope .hbm-filters select:focus,
.hbm-scope .hbm-cc__filters input:focus,
.hbm-scope .hbm-cc__filters select:focus,
.hbm-scope .hbm-dir__filters input:focus,
.hbm-scope .hbm-dir__filters select:focus,
.hbm-scope .hbm-prime__filters input:focus,
.hbm-scope .hbm-prime__filters select:focus{
  border-color:rgba(214,173,97,.56);
  box-shadow:0 0 0 4px rgba(214,173,97,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    rgba(0,0,0,.24);
}

.hbm-scope .hbm-filters select option,
.hbm-scope .hbm-cc__filters select option,
.hbm-scope .hbm-dir__filters select option,
.hbm-scope .hbm-prime__filters select option{
  background:#0b1218;
  color:#fff;
}

/* ============================================================
   3) BUTTONS ONLY FOR FILTER AREAS
============================================================ */
.hbm-scope .hbm-filters .hbm-btn,
.hbm-scope .hbm-filters button,
.hbm-scope .hbm-filters input[type="submit"],
.hbm-scope .hbm-cc__filters .hbm-btn,
.hbm-scope .hbm-cc__filters button,
.hbm-scope .hbm-cc__filters input[type="submit"],
.hbm-scope .hbm-dir__filters .hbm-btn,
.hbm-scope .hbm-dir__filters button,
.hbm-scope .hbm-dir__filters input[type="submit"],
.hbm-scope .hbm-prime__filters .hbm-btn,
.hbm-scope .hbm-prime__filters button,
.hbm-scope .hbm-prime__filters input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid rgba(214,173,97,.35);
  background:linear-gradient(180deg, rgba(214,173,97,.26), rgba(214,173,97,.10));
  color:#fff;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.hbm-scope .hbm-filters .hbm-btn:hover,
.hbm-scope .hbm-filters button:hover,
.hbm-scope .hbm-filters input[type="submit"]:hover,
.hbm-scope .hbm-cc__filters .hbm-btn:hover,
.hbm-scope .hbm-cc__filters button:hover,
.hbm-scope .hbm-cc__filters input[type="submit"]:hover,
.hbm-scope .hbm-dir__filters .hbm-btn:hover,
.hbm-scope .hbm-dir__filters button:hover,
.hbm-scope .hbm-dir__filters input[type="submit"]:hover,
.hbm-scope .hbm-prime__filters .hbm-btn:hover,
.hbm-scope .hbm-prime__filters button:hover,
.hbm-scope .hbm-prime__filters input[type="submit"]:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  border-color:rgba(214,173,97,.58);
  box-shadow:0 10px 22px rgba(0,0,0,.22);
}

/* ============================================================
   4) SAME SIZE FEATURED IMAGE FIX
   Keeps all card images equal height
============================================================ */

/* common media wrappers */
.hbm-scope .hbm-card .hbm-thumb,
.hbm-scope .hbm-item .hbm-thumb,
.hbm-scope .hbm-card .hbm-cover,
.hbm-scope .hbm-item .hbm-cover,
.hbm-scope .hbm-lrCard .hbm-lrMedia,
.hbm-scope .hbm-card__media,
.hbm-scope .hbm-item__media{
  position:relative;
  overflow:hidden;
  background:#0d1318;
  aspect-ratio:16 / 10;
}

/* all featured images same size */
.hbm-scope .hbm-card .hbm-thumb img,
.hbm-scope .hbm-item .hbm-thumb img,
.hbm-scope .hbm-card .hbm-cover img,
.hbm-scope .hbm-item .hbm-cover img,
.hbm-scope .hbm-lrCard .hbm-lrMedia img,
.hbm-scope .hbm-card__media img,
.hbm-scope .hbm-item__media img,
.hbm-scope .hbm-card > img,
.hbm-scope .hbm-item > img{
  width:100%;
  height:100%;
  min-height:100%;
  max-height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* fallback when wrapper is missing */
.hbm-scope .hbm-card > img,
.hbm-scope .hbm-item > img{
  aspect-ratio:16 / 10;
  height:auto;
}

/* ============================================================
   5) SAME CARD HEIGHT HELP
============================================================ */
.hbm-scope .hbm-grid,
.hbm-scope .hbm-cc__grid,
.hbm-scope .hbm-dir__grid,
.hbm-scope .hbm-items,
.hbm-scope .hbm-list{
  align-items:stretch;
}

.hbm-scope .hbm-grid > *,
.hbm-scope .hbm-cc__grid > *,
.hbm-scope .hbm-dir__grid > *,
.hbm-scope .hbm-items > *,
.hbm-scope .hbm-list > *{
  height:100%;
}

.hbm-scope .hbm-card,
.hbm-scope .hbm-item,
.hbm-scope article.hbm-card,
.hbm-scope .hbm-lrCard{
  display:flex;
  flex-direction:column;
  height:100%;
}

.hbm-scope .hbm-card__body,
.hbm-scope .hbm-item__body,
.hbm-scope .hbm-body,
.hbm-scope .hbm-lrBody{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
}

/* ============================================================
   6) MOBILE
============================================================ */
@media (max-width:520px){
  .hbm-scope .hbm-filters,
  .hbm-scope .hbm-cc__filters,
  .hbm-scope .hbm-dir__filters,
  .hbm-scope .hbm-prime__filters{
    gap:8px;
  }

  .hbm-scope .hbm-filters .hbm-btn,
  .hbm-scope .hbm-filters button,
  .hbm-scope .hbm-filters input[type="submit"],
  .hbm-scope .hbm-cc__filters .hbm-btn,
  .hbm-scope .hbm-cc__filters button,
  .hbm-scope .hbm-cc__filters input[type="submit"],
  .hbm-scope .hbm-dir__filters .hbm-btn,
  .hbm-scope .hbm-dir__filters button,
  .hbm-scope .hbm-dir__filters input[type="submit"],
  .hbm-scope .hbm-prime__filters .hbm-btn,
  .hbm-scope .hbm-prime__filters button,
  .hbm-scope .hbm-prime__filters input[type="submit"]{
    width:100%;
  }
}
/* ============================================================
   GRID
============================================================ */

.hbm-scope .hbm-grid,
.hbm-scope .hbm-cc__grid,
.hbm-scope .hbm-dir__grid,
.hbm-scope .hbm-items,
.hbm-scope .hbm-list{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  padding:14px 22px 22px;
  align-items:start;
}

@media (max-width:980px){
  .hbm-scope .hbm-grid,
  .hbm-scope .hbm-cc__grid,
  .hbm-scope .hbm-dir__grid,
  .hbm-scope .hbm-items,
  .hbm-scope .hbm-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:620px){
  .hbm-scope .hbm-grid,
  .hbm-scope .hbm-cc__grid,
  .hbm-scope .hbm-dir__grid,
  .hbm-scope .hbm-items,
  .hbm-scope .hbm-list{
    grid-template-columns:1fr;
    gap:14px;
    padding:12px 16px 18px;
  }
}

/* ============================================================
   CARD
============================================================ */

.hbm-scope .hbm-card,
.hbm-scope .hbm-item,
.hbm-scope article.hbm-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius:18px;
  border:1px solid var(--hb-border);
  background:
    radial-gradient(circle at 20% 0%, rgba(214,173,97,.10), transparent 40%),
    linear-gradient(180deg, rgba(10,24,30,.88), rgba(7,12,16,.96));
  overflow:hidden;
  box-shadow:var(--hb-shadow-card);
  transition:transform .18s ease, border-color .18s ease, filter .18s ease, box-shadow .18s ease;
  min-height:unset !important;
}

.hbm-scope .hbm-card:hover,
.hbm-scope .hbm-item:hover{
  transform:translateY(-4px);
  border-color:rgba(214,173,97,.38);
  filter:brightness(1.03);
  box-shadow:0 16px 40px rgba(0,0,0,.50);
}

/* remove random large spacing from unknown wrappers */
.hbm-scope .hbm-card > *,
.hbm-scope .hbm-item > *{
  min-width:0;
}

/* image wrapper */
.hbm-scope .hbm-thumb,
.hbm-scope .hbm-cover,
.hbm-scope .hbm-card__media,
.hbm-scope .hbm-item__media{
  position:relative;
  overflow:hidden;
  background:#0d1318;
}

/* image */
.hbm-scope .hbm-card img,
.hbm-scope .hbm-item img,
.hbm-scope .hbm-thumb img,
.hbm-scope .hbm-cover img{
  width:100%;
  display:block;
  aspect-ratio:16 / 10;
  object-fit:cover;
  transition:transform .35s ease, filter .35s ease;
}

.hbm-scope .hbm-card:hover img,
.hbm-scope .hbm-item:hover img{
  transform:scale(1.03);
  filter:saturate(1.04);
}

/* content body */
.hbm-scope .hbm-card__body,
.hbm-scope .hbm-item__body,
.hbm-scope .hbm-body{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:10px;
  padding:14px 14px 15px;
}

/* title */
.hbm-scope .hbm-card__title,
.hbm-scope .hbm-item__title,
.hbm-scope .hbm-name{
  margin:0;
  font-size:16px;
  line-height:1.3;
  font-weight:800;
  color:rgba(255,255,255,.96);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* optional short description */
.hbm-scope .hbm-card__excerpt,
.hbm-scope .hbm-item__excerpt,
.hbm-scope .hbm-excerpt,
.hbm-scope .hbm-summary{
  color:var(--hb-soft);
  font-size:13px;
  line-height:1.65;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0;
}

/* meta rows */
.hbm-scope .hbm-meta,
.hbm-scope .hbm-card__meta,
.hbm-scope .hbm-item__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--hb-muted);
  font-size:12px;
  line-height:1.45;
}

.hbm-scope .hbm-meta > span,
.hbm-scope .hbm-card__meta > span,
.hbm-scope .hbm-item__meta > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

/* chips */
.hbm-scope .hbm-chip,
.hbm-scope .hbm-badge,
.hbm-scope .hbm-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.88);
  font-size:12px;
  line-height:1;
}

.hbm-scope .hbm-rating,
.hbm-scope .hbm-stars{
  color:rgba(214,173,97,.98);
  font-weight:800;
}

/* ============================================================
   ACTION ROW
============================================================ */

.hbm-scope .hbm-actions,
.hbm-scope .hbm-card__actions,
.hbm-scope .hbm-item__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:auto;
  padding-top:4px;
}

.hbm-scope .hbm-actions a,
.hbm-scope .hbm-card a.hbm-btn,
.hbm-scope .hbm-item a.hbm-btn,
.hbm-scope a.hbm-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.92);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}

.hbm-scope .hbm-actions a:hover,
.hbm-scope a.hbm-action:hover{
  transform:translateY(-1px);
  border-color:rgba(214,173,97,.42);
  background:rgba(214,173,97,.10);
}

.hbm-scope a.hbm-action--primary,
.hbm-scope a.hbm-view,
.hbm-scope a.hbm-details{
  border-color:rgba(214,173,97,.34);
  background:linear-gradient(180deg, rgba(214,173,97,.24), rgba(214,173,97,.10));
}

/* full width primary button if needed */
.hbm-scope .hbm-actions--stack,
.hbm-scope .hbm-card__actions--stack{
  flex-direction:column;
  align-items:stretch;
}

.hbm-scope .hbm-actions--stack a,
.hbm-scope .hbm-card__actions--stack a{
  width:100%;
}

/* ============================================================
   PAGINATION
============================================================ */

.hbm-scope .hbm-pagination,
.hbm-scope .hbm-pager{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  padding:4px 16px 22px;
}

.hbm-scope .hbm-pagination a,
.hbm-scope .hbm-pager a,
.hbm-scope .hbm-pagination span,
.hbm-scope .hbm-pager span{
  min-width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  padding:0 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.88);
  text-decoration:none;
  font-weight:800;
}

.hbm-scope .hbm-pagination a:hover,
.hbm-scope .hbm-pager a:hover{
  border-color:rgba(214,173,97,.40);
  background:rgba(214,173,97,.10);
}

.hbm-scope .hbm-pagination .current,
.hbm-scope .hbm-pager .current{
  border-color:rgba(214,173,97,.45);
  background:rgba(214,173,97,.14);
  color:#fff;
}

/* ============================================================
   EMPTY / ALERT / SMALL HELPERS
============================================================ */

.hbm-scope .hbm-empty,
.hbm-scope .hbm-no-results,
.hbm-scope .hbm-alert{
  margin:14px 22px 22px;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--hb-muted);
}

@media (max-width:640px){
  .hbm-scope .hbm-empty,
  .hbm-scope .hbm-no-results,
  .hbm-scope .hbm-alert{
    margin:12px 16px 18px;
  }
}

/* ============================================================
   FORCE FIXES FOR COMMON CARD ISSUES
============================================================ */

/* prevent giant height from inherited layout rules */
.hbm-scope .hbm-grid > *,
.hbm-scope .hbm-cc__grid > *,
.hbm-scope .hbm-dir__grid > *,
.hbm-scope .hbm-items > *,
.hbm-scope .hbm-list > *{
  min-height:0 !important;
  align-self:start;
}

/* prevent images stretching weirdly */
.hbm-scope img{
  max-width:100%;
  height:auto;
}

/* but keep card thumbnails controlled */
.hbm-scope .hbm-thumb img,
.hbm-scope .hbm-cover img,
.hbm-scope .hbm-card img,
.hbm-scope .hbm-item img{
  height:auto;
}

/* remove default link underline in cards */
.hbm-scope .hbm-card a,
.hbm-scope .hbm-item a{
  text-decoration:none;
}

/* ============================================================
   MOBILE TUNING
============================================================ */

@media (max-width:480px){
  .hbm-scope h1,
  .hbm-scope .hbm-title{
    font-size:26px;
  }

  .hbm-scope .hbm-card__body,
  .hbm-scope .hbm-item__body,
  .hbm-scope .hbm-body{
    padding:12px 12px 14px;
  }

  .hbm-scope .hbm-actions,
  .hbm-scope .hbm-card__actions,
  .hbm-scope .hbm-item__actions{
    gap:7px;
  }

  .hbm-scope .hbm-actions a,
  .hbm-scope .hbm-card a.hbm-btn,
  .hbm-scope .hbm-item a.hbm-btn,
  .hbm-scope a.hbm-action{
    flex:1 1 auto;
  }
}





/* ============================================================
   HBM PRIME — FRONT.CSS (FULL — UPDATED FOR NEW PHP MARKUP)
   Markup includes:
   - .hbm-primeSections .hbm-sec cards (details)
   - .hbm-primeFAQ .hbm-sec cards (faq)
   ✅ Premium hero + cards + strip
   ✅ Pro section cards with clean typography + custom bullets
============================================================ */

/* =========================
   0) SCOPE + TOKENS
========================= */
.hbm-scope.hbm-prime{
  --bg0:#107989;
  --bg1:#2c5971;
  --bg2:#0b1c23;

  --gold:#cbb682;
  --gold2:#e9dbbd;
  --blue:#8ccdf7;
  --teal:#155562;

  --txt:rgba(255,255,255,.94);
  --mut:rgba(255,255,255,.74);
  --mut2:rgba(255,255,255,.60);

  --line:rgba(255,255,255,.14);
  --line2:rgba(255,255,255,.10);

  --r:28px;
  --r2:18px;

  --sh:0 28px 90px rgba(0,0,0,.62);
  --sh2:0 16px 46px rgba(0,0,0,.50);
  --sh3:0 10px 26px rgba(0,0,0,.40);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);

  width:100%;
  max-width:none;
  margin:0;
  position:relative;
  padding: clamp(22px, 3vw, 56px) 0 clamp(36px, 4vw, 78px);

  background:
    radial-gradient(1200px 640px at 18% 0%, rgba(203,182,130,.18), transparent 62%),
    radial-gradient(980px 620px at 86% 10%, rgba(140, 204, 247, 0.95), transparent 64%),
    radial-gradient(1000px 700px at 50% 105%, rgba(11, 85, 100, 0.22), transparent 66%),
    linear-gradient(180deg, rgba(7, 22, 25, 0.98), rgba(3, 82, 113, 0.92));
}

/* subtle premium texture */
.hbm-scope.hbm-prime::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.12;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.06) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.06) 32px);
  background-size: 32px 32px;
  mask-image: radial-gradient(920px 520px at 50% 18%, #000 55%, transparent 100%);
}

/* Wrap */
.hbm-scope.hbm-prime .hbm-wrap{
  width:min(1600px, calc(100% - 56px));
  margin:0 auto;
  position:relative;
  z-index:2;
}
@media (max-width:520px){
  .hbm-scope.hbm-prime .hbm-wrap{ width:min(1600px, calc(100% - 28px)); }
}

/* Reset common theme conflicts inside PRIME */
.hbm-scope.hbm-prime p{ margin:0; }
.hbm-scope.hbm-prime ul{ margin:0; }
.hbm-scope.hbm-prime a{ color:inherit; }

/* ============================================================
   1) HERO
============================================================ */
.hbm-scope.hbm-prime .hbm-prime__hero{
  border-radius: clamp(22px, 2.6vw, 36px);
  overflow:hidden;
  box-shadow: var(--sh);
  position:relative;
  border:1px solid rgba(255,255,255,.14);
  padding: clamp(24px, 3vw, 44px);
  background:
    radial-gradient(900px 520px at 16% 18%, rgba(233,219,189,.22), transparent 64%),
    radial-gradient(820px 520px at 86% 26%, rgba(140,205,247,.16), transparent 66%),
    linear-gradient(180deg, rgba(11,28,35,.92), rgba(5,11,15,.96));
}
.hbm-scope.hbm-prime .hbm-prime__hero::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(203,182,130,.75), rgba(140,205,247,.45), transparent);
  opacity:.9;
}

/* top row */
.hbm-scope.hbm-prime .hbm-prime__toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}
@media (max-width:720px){
  .hbm-scope.hbm-prime .hbm-prime__toprow{ flex-direction:column; align-items:flex-start; }
}

.hbm-scope.hbm-prime .hbm-prime__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 9px 14px;
  border-radius:999px;
  border:1px solid rgba(203,182,130,.62);
  background: rgba(203,182,130,.12);
  color: var(--gold2);
  font-weight: 950;
  letter-spacing: .18em;
  font-size: 12px;
  text-transform: uppercase;
}

/* nav pills */
.hbm-scope.hbm-prime .hbm-prime__nav{ display:flex; flex-wrap:wrap; gap:10px; }
.hbm-scope.hbm-prime .hbm-prime__pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.hbm-scope.hbm-prime .hbm-prime__pill:hover{
  transform: translateY(-1px);
  border-color: rgba(203,182,130,.55);
  background: rgba(203,182,130,.10);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

/* title + lead */
.hbm-scope.hbm-prime .hbm-prime__title{
  margin: 10px 0 10px;
  font-family: "Playfair Display","Georgia",serif;
  font-weight: 850;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--gold2);
  text-shadow: 0 10px 34px rgba(0,0,0,.55);
}
.hbm-scope.hbm-prime .hbm-prime__lead{
  margin:0;
  max-width: 92ch;
  color: var(--mut);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.78;
}
.hbm-scope.hbm-prime .hbm-prime__cta{
  display:flex; flex-wrap:wrap;
  gap:12px; margin-top:18px;
}

/* ============================================================
   2) BUTTONS
============================================================ */
.hbm-scope.hbm-prime .hbm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  text-decoration:none;
  font-weight: 950;
  letter-spacing: .01em;
  box-shadow: var(--sh3);
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.hbm-scope.hbm-prime .hbm-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(140,205,247,.55);
  background: rgba(140,205,247,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.46);
}
.hbm-scope.hbm-prime .hbm-btn--gold{
  border-color: rgba(203,182,130,.70);
  background: linear-gradient(180deg, rgba(203,182,130,.30), rgba(203,182,130,.10));
  color: var(--gold2);
}
.hbm-scope.hbm-prime .hbm-btn--gold:hover{
  border-color: rgba(203,182,130,.95);
  background: linear-gradient(180deg, rgba(203,182,130,.44), rgba(203,182,130,.14));
}
.hbm-scope.hbm-prime .hbm-btn--soft{
  border-color: rgba(140,205,247,.42);
  background: linear-gradient(180deg, rgba(21,85,98,.55), rgba(0,0,0,.10));
}
@media (max-width:520px){
  .hbm-scope.hbm-prime .hbm-btn{ width:100%; }
}

/* ============================================================
   3) GRID + CARDS
============================================================ */
.hbm-scope.hbm-prime .hbm-prime__section{ margin-top: clamp(18px, 2.6vw, 30px); }
.hbm-scope.hbm-prime .hbm-prime__grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.hbm-scope.hbm-prime .hbm-primeCard{
  grid-column: span 4;
  border-radius: var(--r);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 240px at 18% 0%, rgba(203,182,130,.12), transparent 64%),
    radial-gradient(540px 260px at 86% 18%, rgba(140,205,247,.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16));
  box-shadow: var(--sh2);
  padding: 18px;
  position:relative;
  overflow:hidden;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.hbm-scope.hbm-prime .hbm-primeCard::before{
  content:"";
  position:absolute;
  left:18px; top:16px;
  width:64px; height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(203,182,130,.95), rgba(140,205,247,.55));
}
.hbm-scope.hbm-prime .hbm-primeCard h3{
  margin: 10px 0 8px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.01em;
  color: var(--gold2);
}
.hbm-scope.hbm-prime .hbm-primeCard p{
  margin:0 0 12px;
  color: rgba(255,255,255,.78);
  line-height: 1.72;
  font-size: 13.5px;
}
.hbm-scope.hbm-prime .hbm-primeCard ul{
  margin:0;
  padding-left: 18px;
  color: rgba(255,255,255,.90);
}
.hbm-scope.hbm-prime .hbm-primeCard li{
  margin: 9px 0;
  line-height: 1.6;
  font-size: 13.5px;
}
.hbm-scope.hbm-prime .hbm-primeCard li::marker{ color: rgba(140,205,247,.95); }
.hbm-scope.hbm-prime .hbm-primeCard:hover{
  transform: translateY(-3px);
  border-color: rgba(203,182,130,.26);
  box-shadow: 0 30px 90px rgba(0,0,0,.58);
}
@media (max-width:980px){ .hbm-scope.hbm-prime .hbm-primeCard{ grid-column: span 6; } }
@media (max-width:640px){ .hbm-scope.hbm-prime .hbm-primeCard{ grid-column: span 12; } }

/* ============================================================
   4) COMMISSION STRIP
============================================================ */
.hbm-scope.hbm-prime .hbm-primeStrip{
  grid-column: span 12;
  border-radius: var(--r);
  border:1px solid rgba(140,205,247,.22);
  background:
    linear-gradient(90deg, rgba(140,205,247,.14), rgba(203,182,130,.10)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.16));
  box-shadow: var(--sh2);
  padding: 16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.hbm-scope.hbm-prime .hbm-primeStrip strong{ color: var(--gold2); }
.hbm-scope.hbm-prime .hbm-primeStrip .mut{
  color: rgba(255,255,255,.78);
  font-size: 13.5px;
  line-height: 1.7;
}
.hbm-scope.hbm-prime .hbm-primeStrip .actions{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:880px){
  .hbm-scope.hbm-prime .hbm-primeStrip{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   5) PRO SECTION CARDS (NEW MARKUP)
============================================================ */

/* Grid placement */
.hbm-scope.hbm-prime .hbm-primeSections,
.hbm-scope.hbm-prime .hbm-primeFAQ{
  grid-column: span 12;
  display:grid;
  gap: 14px;
}

/* Section card */
.hbm-scope.hbm-prime .hbm-sec{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(860px 320px at 18% 0%, rgba(203,182,130,.14), transparent 62%),
    radial-gradient(860px 360px at 88% 10%, rgba(140,205,247,.12), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  box-shadow: 0 18px 54px rgba(0,0,0,.52);
  overflow:hidden;
}

/* Header layout */
.hbm-scope.hbm-prime .hbm-sec__head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding: 22px 22px 14px;
}

/* Icon badge */
.hbm-scope.hbm-prime .hbm-sec__kicker{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(203,182,130,.40);
  background: rgba(203,182,130,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  color: var(--gold2);
  flex: 0 0 auto;
  font-size: 18px;
}

/* Title area */
.hbm-scope.hbm-prime .hbm-sec__titles{
  min-width:0;
  flex:1 1 auto;
}
.hbm-scope.hbm-prime .hbm-sec__title{
  margin: 0;
  font-weight: 980;
  font-size: clamp(22px, 1.55vw, 28px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--gold2);
}
.hbm-scope.hbm-prime .hbm-sec__sub{
  margin: 10px 0 0;
  color: rgba(255,255,255,.78);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.70;
  max-width: 82ch;
}

/* Accent line */
.hbm-scope.hbm-prime .hbm-sec__sub::before{
  content:"";
  display:block;
  width:72px;
  height:4px;
  border-radius:999px;
  margin: 10px 0 10px;
  background: linear-gradient(90deg, rgba(203,182,130,.95), rgba(140,205,247,.55));
  opacity:.95;
}

/* Body */
.hbm-scope.hbm-prime .hbm-sec__body{
  padding: 18px 22px 26px;
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Custom list */
.hbm-scope.hbm-prime .hbm-sec__list{
  list-style:none;
  margin: 0;
  padding: 0;
}
.hbm-scope.hbm-prime .hbm-sec__list li{
  position:relative;
  padding-left: 34px;
  margin: 14px 0;
  line-height: 1.85;
  font-size: 15px;
  color: rgba(255,255,255,.92);
}
.hbm-scope.hbm-prime .hbm-sec__list li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(140,205,247,.92);
  box-shadow:
    0 0 0 4px rgba(140,205,247,.12),
    0 10px 22px rgba(0,0,0,.35);
}
.hbm-scope.hbm-prime .hbm-sec__list li::after{
  content:"";
  position:absolute;
  left: 16px;
  top: calc(.55em + 5px);
  width: 12px;
  height: 2px;
  border-radius: 999px;
  background: rgba(203,182,130,.70);
  opacity:.9;
}

/* Paragraphs */
.hbm-scope.hbm-prime .hbm-sec__p{
  margin: 18px 0 0;
  color: rgba(255,255,255,.82);
  line-height: 1.85;
  font-size: 15px;
  max-width: 86ch;
}

/* Links */
.hbm-scope.hbm-prime .hbm-sec__link{
  color: var(--gold2);
  font-weight: 900;
  text-decoration: none;
}
.hbm-scope.hbm-prime .hbm-sec__link:hover{
  text-decoration: underline;
}

/* FAQ slightly tighter */
.hbm-scope.hbm-prime .hbm-sec--faq .hbm-sec__head{ padding-bottom: 12px; }

/* ============================================================
   6) NOTE + FINE
============================================================ */
.hbm-scope.hbm-prime .hbm-prime__note{
  margin-top: 18px;
  border-radius: 20px;
  border: 1px solid rgba(203,182,130,.42);
  padding: 16px 18px;
  color: var(--txt);
  background:
    radial-gradient(620px 220px at 18% 0%, rgb(4, 135, 139), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.12));
  font-size: 14.5px;
  line-height: 1.75;
}
.hbm-scope.hbm-prime .hbm-prime__note strong{
  color: var(--gold2);
  font-weight: 950;
}
.hbm-scope.hbm-prime .hbm-prime__fine{
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.62);
  font-size: 12.75px;
  line-height: 1.7;
}

/* =========================
   MOBILE
========================= */
@media (max-width:520px){
  .hbm-scope.hbm-prime .hbm-sec__head{
    padding: 18px 16px 12px;
    gap:12px;
  }
  .hbm-scope.hbm-prime .hbm-sec__body{
    padding: 14px 16px 18px;
  }
  .hbm-scope.hbm-prime .hbm-sec__title{ font-size: 20px; }
  .hbm-scope.hbm-prime .hbm-sec__sub{ font-size: 14.5px; }
  .hbm-scope.hbm-prime .hbm-sec__list li{ font-size: 14.5px; padding-left: 30px; }
  .hbm-scope.hbm-prime .hbm-sec__p{ font-size: 14.5px; }
}

/* ============================================================
   HBM PRIME — FULL PAGE UPGRADE (PASTE AT VERY END)
   Goal: make PRIME look like a TRUE full-page landing section
   - full width background
   - remove “boxed” feeling
   - wider content
   - hero + sections stretch nicer
   - optional sticky side padding on ultra-wide screens
============================================================ */

/* 1) Force full-bleed section (no theme container limits) */
.hbm-scope.hbm-prime{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden;
}

/* 2) Make inner wrap wider + breathe */
.hbm-scope.hbm-prime .hbm-wrap{
  width: min(1760px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
}

/* 3) Give more vertical presence (landing page feel) */
.hbm-scope.hbm-prime{
  padding-top: clamp(26px, 3.2vw, 72px) !important;
  padding-bottom: clamp(46px, 4.5vw, 96px) !important;
}

/* 4) Hero slightly larger on big screens */
@media (min-width: 1200px){
  .hbm-scope.hbm-prime .hbm-prime__hero{
    padding: 56px !important;
  }
}

/* 5) Increase spacing between big blocks */
.hbm-scope.hbm-prime .hbm-prime__section{
  margin-top: clamp(22px, 3vw, 44px) !important;
}
.hbm-scope.hbm-prime .hbm-primeStrip{
  padding: 20px 22px !important;
}

/* 6) Section cards should not look “narrow” on full page */
.hbm-scope.hbm-prime .hbm-sec__head,
.hbm-scope.hbm-prime .hbm-sec__body{
  max-width: 1100px !important;  /* wider readable block */
}

/* 7) On ultra-wide monitors add gentle side fade so it feels premium */
@media (min-width: 1700px){
  .hbm-scope.hbm-prime::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(90deg, rgba(5,11,15,.72), transparent 18%, transparent 82%, rgba(5,11,15,.72));
    opacity: .55;
  }
}

/* 8) Mobile: keep padding comfortable */
@media (max-width: 520px){
  .hbm-scope.hbm-prime .hbm-wrap{
    width: calc(100% - 28px) !important;
  }
}












/* ============================================================
   [hbm_latest] LATEST RESTAURANTS — PRO UPGRADE (WORKING)
   ✅ Fully scoped
   ✅ Better card height / image fit
   ✅ Better responsive grid
   ✅ Reliable hover / meta / CTA
============================================================ */

/* wrapper */
.hbm-scope.hbm-latest{
  --hbm-latest-bg1:rgba(7,21,18,.98);
  --hbm-latest-bg2:rgba(3,10,9,.98);
  --hbm-latest-text:rgba(255,255,255,.94);
  --hbm-latest-muted:rgba(255,255,255,.76);
  --hbm-latest-soft:rgba(255,255,255,.62);
  --hbm-latest-gold:#d6ad61;
  --hbm-latest-line:rgba(255,255,255,.10);
  --hbm-latest-radius:22px;

  padding:clamp(28px, 3.8vw, 52px);
  border-radius:clamp(18px, 2.4vw, 28px);
  background:
    radial-gradient(circle at 18% 18%, rgba(214,173,97,.12), transparent 48%),
    radial-gradient(circle at 85% 30%, rgba(0,180,140,.15), transparent 46%),
    radial-gradient(circle at 55% 92%, rgba(140,205,247,.10), transparent 55%),
    linear-gradient(180deg, var(--hbm-latest-bg1), var(--hbm-latest-bg2));
  box-shadow:0 30px 96px rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.08);
  color:var(--hbm-latest-text);
}

.hbm-scope.hbm-latest .hbm-latest__inner{
  position:relative;
  width:min(1320px, 100%);
  margin-inline:auto;
}

/* header */
.hbm-scope.hbm-latest .hbm-latestHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:clamp(14px, 2vw, 22px);
}

.hbm-scope.hbm-latest .hbm-latestTitle{
  margin:0;
  color:var(--hbm-latest-text) !important;
  font-weight:900;
  font-size:clamp(22px, 2.6vw, 38px);
  line-height:1.12;
  letter-spacing:.2px;
  text-shadow:0 10px 24px rgba(0,0,0,.45);
}

.hbm-scope.hbm-latest .hbm-latestSub{
  margin:10px 0 0;
  color:var(--hbm-latest-muted) !important;
  max-width:78ch;
  line-height:1.7;
  font-weight:700;
}

@media (max-width:820px){
  .hbm-scope.hbm-latest .hbm-latestHead{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* grid */
.hbm-scope.hbm-latest .hbm-latestGrid{
  display:grid;
  gap:clamp(14px, 1.8vw, 20px);
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
}

.hbm-scope.hbm-latest .hbm-latestGrid.cols-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.hbm-scope.hbm-latest .hbm-latestGrid.cols-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.hbm-scope.hbm-latest .hbm-latestGrid.cols-4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

@media (max-width:1180px){
  .hbm-scope.hbm-latest .hbm-latestGrid.cols-4{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:1020px){
  .hbm-scope.hbm-latest .hbm-latestGrid.cols-4,
  .hbm-scope.hbm-latest .hbm-latestGrid.cols-3,
  .hbm-scope.hbm-latest .hbm-latestGrid.cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:700px){
  .hbm-scope.hbm-latest .hbm-latestGrid,
  .hbm-scope.hbm-latest .hbm-latestGrid.cols-4,
  .hbm-scope.hbm-latest .hbm-latestGrid.cols-3,
  .hbm-scope.hbm-latest .hbm-latestGrid.cols-2{
    grid-template-columns:1fr !important;
    gap:14px;
  }
}

/* card */
.hbm-scope.hbm-latest .hbm-lrCard{
  position:relative;
  overflow:hidden;
  border-radius:calc(var(--hbm-latest-radius) + 2px);
  text-decoration:none !important;
  color:inherit !important;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  background:
    radial-gradient(circle at 20% 0%, rgba(214,173,97,.10), transparent 48%),
    linear-gradient(180deg, rgba(15,42,36,.92), rgba(8,24,20,.96));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 22px 60px rgba(0,0,0,.48);
  transform:translateY(0);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
  isolation:isolate;
}

.hbm-scope.hbm-latest .hbm-lrCard:hover{
  transform:translateY(-7px);
  border-color:rgba(214,173,97,.38);
  box-shadow:0 34px 110px rgba(0,0,0,.62);
  filter:brightness(1.02);
}

/* media */
.hbm-scope.hbm-latest .hbm-lrMedia{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:rgba(255,255,255,.05);
  flex:0 0 auto;
}

.hbm-scope.hbm-latest .hbm-lrMedia::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.56)),
    radial-gradient(circle at 20% 10%, rgba(214,173,97,.12), transparent 52%),
    radial-gradient(circle at 90% 18%, rgba(0,180,140,.10), transparent 56%);
  pointer-events:none;
  opacity:.95;
}

.hbm-scope.hbm-latest .hbm-lrMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform .55s ease, filter .55s ease;
  filter:saturate(1.1) contrast(1.05) brightness(1.04);
}

.hbm-scope.hbm-latest .hbm-lrCard:hover .hbm-lrMedia img{
  transform:scale(1.08);
  filter:saturate(1.2) contrast(1.08) brightness(1.07);
}

.hbm-scope.hbm-latest .hbm-lrPh{
  display:block;
  width:100%;
  height:100%;
}

/* badge */
.hbm-scope.hbm-latest .hbm-lrBadge{
  position:absolute;
  top:14px;
  left:14px;
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(7,21,18,.72);
  border:1px solid rgba(214,173,97,.28);
  color:var(--hbm-latest-gold);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:2;
}

/* rating */
.hbm-scope.hbm-latest .hbm-lrRating{
  position:absolute;
  top:14px;
  right:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
  padding:10px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.30));
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92) !important;
  font-weight:900;
  font-size:13px;
  line-height:1;
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:2;
}

.hbm-scope.hbm-latest .hbm-lrStars{
  color:rgba(214,173,97,.98);
  letter-spacing:1px;
  text-shadow:0 10px 20px rgba(0,0,0,.35);
}
.hbm-scope.hbm-latest .hbm-lrDot{ opacity:.7; }
.hbm-scope.hbm-latest .hbm-lrCnt{ opacity:.85; }

/* body */
.hbm-scope.hbm-latest .hbm-lrBody{
  padding:18px 18px 16px;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
}

/* top row */
.hbm-scope.hbm-latest .hbm-lrTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.hbm-scope.hbm-latest .hbm-lrName{
  margin:0;
  color:var(--hbm-latest-text) !important;
  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
  line-height:1.25;
}

/* meta */
.hbm-scope.hbm-latest .hbm-lrMeta{
  display:grid;
  gap:10px;
  color:var(--hbm-latest-muted) !important;
  line-height:1.55;
  font-weight:700;
}

.hbm-scope.hbm-latest .hbm-lrLine{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:10px;
  align-items:start;
  min-width:0;
}

.hbm-scope.hbm-latest .hbm-lrIco{
  width:18px;
  height:18px;
  flex:0 0 auto;
  opacity:.95;
  margin-top:2px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

.hbm-scope.hbm-latest .hbm-lrAddr,
.hbm-scope.hbm-latest .hbm-lrCity,
.hbm-scope.hbm-latest .hbm-lrCountry{
  color:rgba(233,238,246,.80) !important;
  font-weight:700;
}

.hbm-scope.hbm-latest .hbm-lrSmall{
  color:rgba(233,238,246,.62) !important;
  font-weight:700;
  font-size:12.5px;
}

/* chips */
.hbm-scope.hbm-latest .hbm-lrChips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.hbm-scope.hbm-latest .hbm-lrChip{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.86) !important;
  font-weight:800;
  font-size:12px;
  line-height:1;
}

/* open link */
.hbm-scope.hbm-latest .hbm-lrOpen{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-weight:900;
  font-size:14px;
  color:rgba(214,173,97,.98) !important;
}

.hbm-scope.hbm-latest .hbm-lrOpen::after{
  content:"→";
  transform:translateX(0);
  transition:transform .2s ease;
  opacity:.95;
}

.hbm-scope.hbm-latest .hbm-lrCard:hover .hbm-lrOpen::after{
  transform:translateX(6px);
}

/* CTA button */
.hbm-scope.hbm-latest .hbm-latestCta{
  margin-top:18px;
}

.hbm-scope.hbm-latest .hbm-latestBtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none !important;
  font-weight:900;
  color:rgba(10,10,10,.96) !important;
  background:linear-gradient(135deg, rgba(214,173,97,1), rgba(140,205,247,.52));
  border:1px solid rgba(214,173,97,.38);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.hbm-scope.hbm-latest .hbm-latestBtn:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 24px 70px rgba(0,0,0,.52);
}

@media (max-width:520px){
  .hbm-scope.hbm-latest{
    padding:20px 14px;
  }

  .hbm-scope.hbm-latest .hbm-lrBody{
    padding:14px 14px 14px;
  }

  .hbm-scope.hbm-latest .hbm-lrName{
    font-size:17px;
  }

  .hbm-scope.hbm-latest .hbm-lrRating{
    top:10px;
    right:10px;
    padding:8px 10px;
    font-size:12px;
  }

  .hbm-scope.hbm-latest .hbm-lrBadge{
    top:10px;
    left:10px;
    width:40px;
    height:40px;
  }
}



















/* ============================================================
   HBM ADD WEBSITE — FRONT (MODERN + FULL PAGE) — REPLACE FILE
   File: assets/css/hbm-add-website.css

   ✅ Full-bleed background (WPBakery/theme-proof)
   ✅ Form wide + sidebar fixed + sticky
   ✅ Modern “glass” cards (no ugly black blocks)
   ✅ Better inputs, spacing, typography
============================================================ */

/* =========================
   0) FULL PAGE + TOKENS
========================= */
.hbm-scope.hbm-add-site{
  --gold:#cbb682;
  --gold2:#f3e7cf;
  --teal1:#0b9fb0;
  --teal2:#0a7f8d;
  --teal3:#075e6a;
  --blue:#8ccdf7;

  --txt:rgba(255,255,255,.97);
  --mut:rgba(255,255,255,.84);
  --mut2:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.22);

  --r:26px;
  --r2:18px;

  --sh: 0 22px 70px rgba(7,38,44,.28);
  --sh2: 0 14px 44px rgba(7,38,44,.22);
  --sh3: 0 10px 26px rgba(7,38,44,.18);

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--txt);

  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(26px, 3.2vw, 72px) 0 clamp(46px, 4.5vw, 96px) !important;

  /* prevent theme clipping surprises */
  overflow: visible !important;
  z-index: 0 !important;
}

/* FULL PAGE BACKGROUND (fixed layer) */
.hbm-scope.hbm-add-site::before{
  content:"" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(1200px 760px at 18% 0%, rgba(203,182,130,.32), transparent 62%),
    radial-gradient(980px 760px at 86% 12%, rgba(140,205,247,.22), transparent 64%),
    radial-gradient(900px 720px at 50% 115%, rgba(255,255,255,.14), transparent 66%),
    linear-gradient(180deg, rgba(11,159,176,.98), rgba(10,127,141,.96), rgba(7,94,106,.96)) !important;
}

.hbm-scope.hbm-add-site::after{
  content:"" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events:none !important;
  opacity:.10 !important;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.22) 32px),
    linear-gradient(90deg, transparent 31px, rgba(203,182,130,.22) 32px) !important;
  background-size: 32px 32px !important;
  mask-image: radial-gradient(920px 520px at 50% 14%, #000 62%, transparent 100%) !important;
}

.hbm-scope.hbm-add-site *{ box-sizing:border-box !important; }
.hbm-scope.hbm-add-site p{ margin:0 !important; }
.hbm-scope.hbm-add-site ul{ margin:0 !important; }
.hbm-scope.hbm-add-site a{ color:inherit !important; text-decoration:none; }
.hbm-scope.hbm-add-site a:hover{ text-decoration:underline; }

/* inner container */
.hbm-scope.hbm-add-site .hbm-page{
  width: min(1760px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}
@media (max-width:520px){
  .hbm-scope.hbm-add-site .hbm-page{ width: calc(100% - 28px) !important; }
}

/* =========================
   1) HERO
========================= */
.hbm-scope.hbm-add-site .hbm-addHero{
  border-radius: clamp(22px, 2.6vw, 36px) !important;
  overflow:hidden !important;
  box-shadow: var(--sh) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  padding: clamp(26px, 3vw, 54px) !important;
  background:
    radial-gradient(900px 520px at 16% 18%, rgba(203,182,130,.22), transparent 64%),
    radial-gradient(820px 520px at 86% 26%, rgba(140,205,247,.16), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06)) !important;
  position:relative !important;
}

.hbm-scope.hbm-add-site .hbm-addHero::before{
  content:"" !important;
  position:absolute !important;
  left:0; right:0; top:0;
  height:2px !important;
  background: linear-gradient(90deg, transparent, rgba(203,182,130,.82), rgba(140,205,247,.45), transparent) !important;
  opacity:.95 !important;
}

.hbm-scope.hbm-add-site .hbm-addHero__badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding: 9px 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(203,182,130,.70) !important;
  background: rgba(203,182,130,.16) !important;
  color: rgba(255,255,255,.96) !important;
  font-weight: 950 !important;
  letter-spacing: .18em !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}

.hbm-scope.hbm-add-site .hbm-addHero__title{
  margin: 12px 0 10px !important;
  font-family: "Playfair Display","Georgia",serif !important;
  font-weight: 850 !important;
  font-size: clamp(36px, 4.3vw, 64px) !important;
  line-height: 1.03 !important;
  letter-spacing: -.02em !important;
  color: var(--gold2) !important;
  text-shadow: 0 10px 28px rgba(7, 38, 44, .22) !important;
}

.hbm-scope.hbm-add-site .hbm-addHero__sub{
  margin:0 !important;
  max-width: 92ch !important;
  color: var(--mut) !important;
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.78 !important;
}

/* steps */
.hbm-scope.hbm-add-site .hbm-addSteps{
  margin-top: 18px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
.hbm-scope.hbm-add-site .hbm-step{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  padding: 10px 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  color: var(--txt) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  backdrop-filter: blur(10px);
}
.hbm-scope.hbm-add-site .hbm-step span{
  width: 26px !important; height: 26px !important;
  border-radius: 999px !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(203,182,130,.70) !important;
  background: rgba(203,182,130,.20) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: 0 10px 18px rgba(7, 38, 44, .16) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

/* =========================
   2) MESSAGE
========================= */
.hbm-scope.hbm-add-site .hbm-site-msg{
  margin: 14px 0 0 !important;
  border-radius: 18px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow: var(--sh3) !important;
  backdrop-filter: blur(10px);
}
.hbm-scope.hbm-add-site .hbm-site-msg--ok{
  border-color: rgba(140,205,247,.35) !important;
}
.hbm-scope.hbm-add-site .hbm-site-msg--err{
  border-color: rgba(203,182,130,.40) !important;
}

/* =========================
   3) LAYOUT (FLEX) — WIDE FORM
========================= */
.hbm-scope.hbm-add-site .hbm-shell{
  display:flex !important;
  gap: 28px !important;
  align-items:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  margin-top: clamp(18px, 2.6vw, 34px) !important;
}

.hbm-scope.hbm-add-site .hbm-shell > .hbm-card{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.hbm-scope.hbm-add-site .hbm-shell > .hbm-side{
  flex: 0 0 380px !important;
  width: 380px !important;
  max-width: 380px !important;
}

.hbm-scope.hbm-add-site .hbm-shell > *{
  float:none !important;
  margin:0 !important;
  padding:0 !important;
  align-self:flex-start !important;
  max-width:none !important;
}

@media (min-width:1100px){
  .hbm-scope.hbm-add-site .hbm-side{
    position: sticky !important;
    top: 110px !important;
  }
}

@media (max-width:1100px){
  .hbm-scope.hbm-add-site .hbm-shell{ display:block !important; }
  .hbm-scope.hbm-add-site .hbm-shell > .hbm-side{
    margin-top: 14px !important;
    width:100% !important;
    max-width:100% !important;
  }
}

/* =========================
   4) CARDS (GLASS)
========================= */
.hbm-scope.hbm-add-site .hbm-card,
.hbm-scope.hbm-add-site .hbm-side{
  border-radius: var(--r) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
  box-shadow: var(--sh2) !important;
  overflow:hidden !important;
  backdrop-filter: blur(12px);
}

.hbm-scope.hbm-add-site .hbm-card__body{
  padding: 26px !important;
}
@media (max-width:520px){
  .hbm-scope.hbm-add-site .hbm-card__body{ padding: 16px !important; }
}

/* =========================
   5) FORM
========================= */
.hbm-scope.hbm-add-site .hbm-form{ width:100% !important; max-width:100% !important; }
.hbm-scope.hbm-add-site .hbm-hp{
  position:absolute !important; left:-9999px !important; top:-9999px !important;
  height:1px !important; width:1px !important; opacity:0 !important;
}

/* Fieldset sections */
.hbm-scope.hbm-add-site .hbm-fieldset{
  border:1px solid rgba(255,255,255,.20) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  margin: 0 0 16px !important;
  background: rgba(255,255,255,.08) !important;
}

.hbm-scope.hbm-add-site .hbm-fieldset legend{
  padding: 0 10px !important;
  font-weight: 950 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.96) !important;
  font-size: 12.5px !important;
}

/* Grid */
.hbm-scope.hbm-add-site .hbm-grid{
  display:grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 14px !important;
  margin-top: 14px !important;
}
.hbm-scope.hbm-add-site .hbm-field{ grid-column: span 6 !important; min-width:0 !important; }
.hbm-scope.hbm-add-site .hbm-field:only-child{ grid-column: span 12 !important; }
@media (max-width:860px){
  .hbm-scope.hbm-add-site .hbm-field{ grid-column: span 12 !important; }
}

/* Labels */
.hbm-scope.hbm-add-site label{
  display:block !important;
  margin: 0 0 8px !important;
  font-weight: 950 !important;
  font-size: 13.5px !important;
  color: rgba(255,255,255,.95) !important;
}

/* Inputs */
.hbm-scope.hbm-add-site input[type="text"],
.hbm-scope.hbm-add-site input[type="url"],
.hbm-scope.hbm-add-site input[type="email"],
.hbm-scope.hbm-add-site input[type="file"],
.hbm-scope.hbm-add-site select,
.hbm-scope.hbm-add-site textarea{
  width:100% !important;
  max-width:100% !important;
  border-radius: 16px !important;
  border:1px solid rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.97) !important;
  padding: 13px 13px !important;
  outline:none !important;
  box-shadow: var(--sh3) !important;
}

.hbm-scope.hbm-add-site textarea{
  min-height: 110px !important;
  resize: vertical !important;
  line-height:1.7 !important;
}

.hbm-scope.hbm-add-site input:focus,
.hbm-scope.hbm-add-site select:focus,
.hbm-scope.hbm-add-site textarea:focus{
  border-color: rgba(203,182,130,.78) !important;
  background: rgba(203,182,130,.14) !important;
}

/* select arrow */
.hbm-scope.hbm-add-site select{
  appearance:none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.95) 50%),
    linear-gradient(135deg, rgba(255,255,255,.95) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat:no-repeat !important;
  padding-right: 34px !important;
}

/* help */
.hbm-scope.hbm-add-site .hbm-help{
  margin: 10px 0 0 !important;
  color: rgba(255,255,255,.80) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}

/* checkbox & note */
.hbm-scope.hbm-add-site .hbm-check,
.hbm-scope.hbm-add-site .hbm-note{
  border:1px solid rgba(255,255,255,.20) !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 18px !important;
}

.hbm-scope.hbm-add-site .hbm-check{
  display:flex !important;
  gap:10px !important;
  align-items:flex-start !important;
  margin-top: 12px !important;
  padding: 12px 12px !important;
}
.hbm-scope.hbm-add-site .hbm-check input{
  margin-top: 3px !important;
  width: 18px !important; height: 18px !important;
  accent-color: #cbb682 !important;
}
.hbm-scope.hbm-add-site .hbm-check span{
  color: rgba(255,255,255,.92) !important;
  line-height: 1.65 !important;
  font-size: 13.5px !important;
}

.hbm-scope.hbm-add-site .hbm-note{
  margin-top: 14px !important;
  padding: 12px 12px !important;
  color: rgba(255,255,255,.90) !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

/* actions + buttons */
.hbm-scope.hbm-add-site .hbm-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  margin-top: 16px !important;
}
.hbm-scope.hbm-add-site .hbm-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 13px 18px !important;
  border-radius: 16px !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.96) !important;
  font-weight: 950 !important;
  box-shadow: var(--sh3) !important;
  text-decoration:none !important;
  transition: transform .12s ease, background .12s ease, border-color .12s ease !important;
}
.hbm-scope.hbm-add-site .hbm-btn:hover{
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(140,205,247,.45) !important;
}
.hbm-scope.hbm-add-site .hbm-btn--gold{
  border-color: rgba(203,182,130,.92) !important;
  background: linear-gradient(180deg, rgba(203,182,130,.42), rgba(203,182,130,.22)) !important;
}
.hbm-scope.hbm-add-site .hbm-btn--gold:hover{
  border-color: rgba(203,182,130,1) !important;
  background: linear-gradient(180deg, rgba(203,182,130,.52), rgba(203,182,130,.26)) !important;
}
.hbm-scope.hbm-add-site .hbm-btn--ghost{
  background: rgba(255,255,255,.08) !important;
}
@media (max-width:520px){
  .hbm-scope.hbm-add-site .hbm-btn{ width:100% !important; }
}

/* =========================
   6) SIDEBAR
========================= */
.hbm-scope.hbm-add-site .hbm-side__btn{ width:100% !important; }

.hbm-scope.hbm-add-site .hbm-hr{
  border:0 !important;
  height:1px !important;
  background: rgba(255,255,255,.20) !important;
  margin:16px 0 !important;
}

.hbm-scope.hbm-add-site .hbm-side h3{
  font-size: 16px !important;
  margin: 0 0 10px !important;
  color: rgba(255,255,255,.96) !important;
  font-weight: 950 !important;
}

.hbm-scope.hbm-add-site .hbm-side p{
  font-size: 13.5px !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,.88) !important;
  margin-bottom: 12px !important;
}

.hbm-scope.hbm-add-site .hbm-list{
  list-style:none !important;
  padding:0 !important;
  margin:10px 0 0 !important;
}
.hbm-scope.hbm-add-site .hbm-list li{
  position:relative !important;
  padding-left: 34px !important;
  margin: 12px 0 !important;
  line-height: 1.75 !important;
  color: rgba(255,255,255,.92) !important;
  font-size: 14px !important;
}
.hbm-scope.hbm-add-site .hbm-list li::before{
  content:"" !important;
  position:absolute !important;
  left: 0 !important;
  top: .55em !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(140,205,247,.95) !important;
  box-shadow: 0 0 0 4px rgba(140,205,247,.14) !important;
}
.hbm-scope.hbm-add-site .hbm-list li::after{
  content:"" !important;
  position:absolute !important;
  left: 16px !important;
  top: calc(.55em + 5px) !important;
  width: 12px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: rgba(203,182,130,.85) !important;
}

/* Optional: make WPBakery rows not limit width */
.hbm-scope.hbm-add-site,
.hbm-scope.hbm-add-site .hbm-page,
.hbm-scope.hbm-add-site .hbm-shell{
  max-width: none !important;
}
/* ============================================================
   HBM ADD WEBSITE — FULL PAGE FORCE PATCH (PASTE AT END)
   Fixes: “not full page” when WPBakery/theme keeps containers boxed
============================================================ */

/* 1) Force the shortcode block itself to break out of any wrapper width */
body .hbm-scope.hbm-add-site{
  display:block !important;
  width:100vw !important;
  max-width:100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  left: auto !important;
  right: auto !important;
}

/* 2) If some wrapper uses overflow hidden, this prevents clipping */
body .hbm-scope.hbm-add-site,
body .hbm-scope.hbm-add-site .hbm-page,
body .hbm-scope.hbm-add-site .hbm-shell{
  overflow: visible !important;
}

/* Common WPBakery wrappers that often clip/box content */
body .hbm-scope.hbm-add-site .vc_row,
body .hbm-scope.hbm-add-site .wpb_row,
body .hbm-scope.hbm-add-site .vc_column_container,
body .hbm-scope.hbm-add-site .vc_column-inner,
body .hbm-scope.hbm-add-site .wpb_wrapper{
  max-width: none !important;
  width: auto !important;
  overflow: visible !important;
}

/* 3) TRUE full-page background (independent of section size)
      Put background on BODY while this page is open (no page-id needed) */
body:has(.hbm-scope.hbm-add-site){
  background: transparent !important;
}
body:has(.hbm-scope.hbm-add-site)::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -9999;
  pointer-events:none;

  /* YOUR gradient (edit colors here) */
  background:
    radial-gradient(1200px 760px at 18% 0%, rgba(203,182,130,.32), transparent 62%),
    radial-gradient(980px 760px at 86% 12%, rgba(140,205,247,.22), transparent 64%),
    radial-gradient(900px 720px at 50% 115%, rgba(255,255,255,.14), transparent 66%),
    linear-gradient(180deg, rgba(11,159,176,.98), rgba(10,127,141,.96), rgba(7,94,106,.96));
}

/* 4) If your browser/host doesn’t support :has(), fallback:
      keep the section’s fixed background layer too */
body .hbm-scope.hbm-add-site::before{
  content:"";
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events:none !important;

  background:
    radial-gradient(1200px 760px at 18% 0%, rgba(203,182,130,.32), transparent 62%),
    radial-gradient(980px 760px at 86% 12%, rgba(140,205,247,.22), transparent 64%),
    radial-gradient(900px 720px at 50% 115%, rgba(255,255,255,.14), transparent 66%),
    linear-gradient(180deg, rgba(11,159,176,.98), rgba(10,127,141,.96), rgba(7,94,106,.96)) !important;
}














/* ============================================================
   [hbm_cities] HBM Cities Shortcode
============================================================ */

.hbm-scope.hbm-cities{
  --bg1:#070b0f;
  --bg2:#0a1218;
  --text:#edf3ff;
  --muted:rgba(237,243,255,.74);
  --gold:#d6ad61;
  --line:rgba(255,255,255,.12);

  padding:clamp(22px, 3.6vw, 64px) 0;
  background:
    radial-gradient(1000px 600px at 18% 0%, rgba(214,173,97,.12), transparent 58%),
    radial-gradient(900px 600px at 85% 10%, rgba(10,106,91,.10), transparent 62%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

.hbm-scope.hbm-cities .hbm-cities__wrap{
  width:min(1280px, calc(100% - 44px));
  margin-inline:auto;
}

.hbm-scope.hbm-cities .hbm-cities__head{
  border:1px solid var(--line);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  padding:18px 18px;
  margin-bottom:16px;
}

.hbm-scope.hbm-cities .hbm-cities__title{
  margin:0 0 6px;
  color:var(--gold);
  font-weight:900;
  font-size:clamp(22px, 2.3vw, 34px);
}

.hbm-scope.hbm-cities .hbm-cities__sub{
  margin:0;
  color:var(--muted);
  font-weight:650;
}

.hbm-scope.hbm-cities .hbm-cities__search{
  margin-top:12px;
}

.hbm-scope.hbm-cities .hbm-cities__q{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}

.hbm-scope.hbm-cities .hbm-cities__q::placeholder{
  color:rgba(237,243,255,.55);
}

.hbm-scope.hbm-cities .hbm-cities__q:focus{
  border-color:rgba(214,173,97,.62);
  box-shadow:0 0 0 4px rgba(214,173,97,.12);
}

.hbm-scope.hbm-cities .hbm-cities__grid{
  display:grid;
  grid-template-columns:repeat(var(--hbm-cols, 4), minmax(0, 1fr));
  gap:14px;
}

.hbm-scope.hbm-cities .hbm-city{
  display:block;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  padding:14px 14px;
  transition:transform .12s ease, border-color .18s ease, filter .18s ease;
}

.hbm-scope.hbm-cities .hbm-city:hover{
  transform:translateY(-1px);
  border-color:rgba(214,173,97,.35);
  filter:brightness(1.03);
}

.hbm-scope.hbm-cities .hbm-city__name{
  font-weight:900;
  color:var(--text);
  font-size:16px;
}

.hbm-scope.hbm-cities .hbm-city__count{
  margin-top:6px;
  color:rgba(237,243,255,.70);
  font-weight:700;
  font-size:13px;
}

@media (max-width:980px){
  .hbm-scope.hbm-cities .hbm-cities__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:520px){
  .hbm-scope.hbm-cities .hbm-cities__wrap{
    width:calc(100% - 28px);
  }

  .hbm-scope.hbm-cities .hbm-cities__grid{
    grid-template-columns:1fr;
  }
}
 
 
 /* ============================================================
   [hbm_contact] CONTACT PRO — FULL CSS
   Matches shortcode: [hbm_contact]
   Scope: .hbm-scope.hbm-contactPro
============================================================ */

.hbm-scope.hbm-contactPro{
  --hbm-contact-bg1:#07110f;
  --hbm-contact-bg2:#030807;
  --hbm-contact-card:rgba(9,22,19,.72);
  --hbm-contact-card-2:rgba(12,28,24,.82);
  --hbm-contact-line:rgba(255,255,255,.10);
  --hbm-contact-line-2:rgba(214,173,97,.22);
  --hbm-contact-text:rgba(255,255,255,.95);
  --hbm-contact-muted:rgba(255,255,255,.76);
  --hbm-contact-soft:rgba(255,255,255,.58);
  --hbm-contact-gold:#d6ad61;
  --hbm-contact-gold-2:#e9dbbd;
  --hbm-contact-emerald:#0c5d50;
  --hbm-contact-shadow:0 26px 80px rgba(0,0,0,.46);
  --hbm-contact-shadow-2:0 16px 46px rgba(0,0,0,.34);
  --hbm-contact-radius:26px;

  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(26px, 4vw, 64px) 0;
  color:var(--hbm-contact-text);
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(214,173,97,.12), transparent 36%),
    radial-gradient(circle at 85% 18%, rgba(12,93,80,.18), transparent 36%),
    linear-gradient(180deg, var(--hbm-contact-bg1), var(--hbm-contact-bg2));
}

.hbm-scope.hbm-contactPro.is-fullwidth{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__bg{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.80)),
    radial-gradient(circle at 20% 0%, rgba(214,173,97,.14), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(12,93,80,.16), transparent 42%),
    var(--hbm-contact-bg);
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  filter:saturate(1.06) contrast(1.03);
  opacity:.92;
  pointer-events:none;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__wrap{
  position:relative;
  z-index:1;
  width:min(1320px, calc(100% - 48px));
  margin:0 auto;
}

@media (max-width:520px){
  .hbm-scope.hbm-contactPro .hbm-contactPro__wrap{
    width:calc(100% - 24px);
  }
}

/* ============================================================
   HERO
============================================================ */

.hbm-scope.hbm-contactPro .hbm-contactPro__hero{
  margin-bottom:18px;
  padding:clamp(18px, 2.4vw, 28px);
  border-radius:var(--hbm-contact-radius);
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    rgba(0,0,0,.22);
  box-shadow:var(--hbm-contact-shadow-2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(214,173,97,.34);
  background:rgba(214,173,97,.12);
  color:var(--hbm-contact-gold-2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__title{
  margin:12px 0 8px;
  color:#fff !important;
  font-size:clamp(34px, 4.6vw, 62px);
  line-height:1.02;
  font-weight:1000;
  letter-spacing:-.02em;
  text-shadow:0 12px 36px rgba(0,0,0,.42);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__sub{
  margin:0;
  max-width:78ch;
  color:var(--hbm-contact-muted);
  line-height:1.8;
  font-size:15px;
  font-weight:600;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__heroMeta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__metaPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  font-size:13px;
  font-weight:800;
}

/* ============================================================
   GRID
============================================================ */

.hbm-scope.hbm-contactPro .hbm-contactPro__grid{
  display:grid;
  grid-template-columns:minmax(280px, .92fr) minmax(0, 1.08fr);
  gap:18px;
  align-items:start;
}

@media (max-width:960px){
  .hbm-scope.hbm-contactPro .hbm-contactPro__grid{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   LEFT PANEL
============================================================ */

.hbm-scope.hbm-contactPro .hbm-contactPro__panel{
  border-radius:var(--hbm-contact-radius);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 0%, rgba(214,173,97,.10), transparent 44%),
    linear-gradient(180deg, rgba(10,24,21,.86), rgba(6,14,12,.92));
  box-shadow:var(--hbm-contact-shadow);
  padding:22px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__panelTitle{
  margin:0 0 10px;
  color:#fff !important;
  font-size:clamp(24px, 2.6vw, 34px);
  line-height:1.15;
  font-weight:900;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__panelText{
  margin:0 0 16px;
  color:var(--hbm-contact-muted);
  line-height:1.75;
  font-size:15px;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__rows{
  display:grid;
  gap:12px;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:inherit !important;
  text-decoration:none !important;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__row:hover{
  transform:translateY(-2px);
  border-color:rgba(214,173,97,.34);
  background:rgba(214,173,97,.08);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__row--static:hover{
  transform:none;
  background:rgba(255,255,255,.04);
  box-shadow:none;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__ico{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(214,173,97,.26);
  background:rgba(214,173,97,.10);
  color:var(--hbm-contact-gold-2);
  font-size:18px;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__rowBody{
  min-width:0;
  flex:1 1 auto;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__rowLabel{
  color:var(--hbm-contact-gold-2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__rowVal{
  margin-top:4px;
  color:#fff;
  line-height:1.6;
  font-size:15px;
  font-weight:700;
  word-break:break-word;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__rowCta{
  color:var(--hbm-contact-gold);
  font-size:18px;
  font-weight:900;
  align-self:center;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__miniBtn{
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(214,173,97,.34);
  background:linear-gradient(180deg, rgba(214,173,97,.24), rgba(214,173,97,.08));
  color:#fff !important;
  text-decoration:none !important;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__privacy{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:16px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--hbm-contact-muted);
  line-height:1.65;
  font-size:13px;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__dot{
  width:10px;
  height:10px;
  margin-top:.45em;
  flex:0 0 10px;
  border-radius:999px;
  background:var(--hbm-contact-gold);
  box-shadow:0 0 0 4px rgba(214,173,97,.14);
}

/* ============================================================
   FORM CARD
============================================================ */

.hbm-scope.hbm-contactPro .hbm-contactPro__card{
  border-radius:var(--hbm-contact-radius);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 20% 0%, rgba(214,173,97,.10), transparent 46%),
    linear-gradient(180deg, rgba(10,24,21,.90), rgba(5,12,10,.96));
  box-shadow:var(--hbm-contact-shadow);
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__cardHead{
  padding:22px 22px 10px;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__cardTitle{
  margin:0;
  color:#fff !important;
  font-size:clamp(24px, 2.4vw, 34px);
  line-height:1.15;
  font-weight:900;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__cardSub{
  margin:8px 0 0;
  color:var(--hbm-contact-muted);
  line-height:1.7;
  font-size:14px;
  font-weight:600;
}

.hbm-scope.hbm-contactPro .hbm-contact-form{
  display:block;
  padding:8px 22px 22px;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__formGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__full{
  grid-column:1 / -1;
}

@media (max-width:760px){
  .hbm-scope.hbm-contactPro .hbm-contactPro__formGrid{
    grid-template-columns:1fr;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__full{
    grid-column:auto;
  }
}

/* ============================================================
   FORM ELEMENTS
============================================================ */

.hbm-scope.hbm-contactPro .hbm-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.hbm-scope.hbm-contactPro .hbm-label{
  color:var(--hbm-contact-gold-2);
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.hbm-scope.hbm-contactPro .hbm-input{
  width:100%;
  min-width:0;
  min-height:50px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(0,0,0,.22);
  color:#fff;
  outline:none;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.hbm-scope.hbm-contactPro .hbm-input::placeholder{
  color:rgba(255,255,255,.46);
}

.hbm-scope.hbm-contactPro .hbm-input:focus{
  border-color:rgba(214,173,97,.52);
  box-shadow:0 0 0 4px rgba(214,173,97,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    rgba(0,0,0,.26);
}

.hbm-scope.hbm-contactPro textarea.hbm-input{
  min-height:220px;
  resize:vertical;
  line-height:1.7;
}

/* ============================================================
   BUTTON
============================================================ */

.hbm-scope.hbm-contactPro .hbm-contactPro__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 18px;
  border-radius:16px;
  border:1px solid rgba(214,173,97,.44);
  background:
    radial-gradient(circle at 30% 20%, rgba(233,219,189,.22), transparent 55%),
    linear-gradient(180deg, rgba(214,173,97,.30), rgba(214,173,97,.12));
  color:#fff !important;
  font-weight:900;
  font-size:15px;
  text-decoration:none !important;
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow:0 18px 34px rgba(0,0,0,.24);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  border-color:rgba(214,173,97,.60);
  box-shadow:0 20px 42px rgba(0,0,0,.30);
}

.hbm-scope.hbm-contactPro .hbm-contactPro__btn:disabled,
.hbm-scope.hbm-contactPro .hbm-contactPro__btn.is-loading{
  opacity:.78;
  cursor:wait;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__spin{
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.30);
  border-top-color:#fff;
  border-radius:999px;
  display:none;
  animation:hbmContactSpin .8s linear infinite;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__btn.is-loading .hbm-contactPro__spin{
  display:inline-block;
}

@keyframes hbmContactSpin{
  to{ transform:rotate(360deg); }
}

/* ============================================================
   MESSAGE
============================================================ */

.hbm-scope.hbm-contactPro .hbm-contact-msg{
  margin-top:12px;
  min-height:22px;
  color:var(--hbm-contact-muted);
  font-size:14px;
  line-height:1.6;
  font-weight:600;
}

.hbm-scope.hbm-contactPro .hbm-contact-msg.is-success{
  color:#c7f6d9;
}

.hbm-scope.hbm-contactPro .hbm-contact-msg.is-error{
  color:#ffc9c9;
}

/* ============================================================
   HONEYPOT
============================================================ */

.hbm-scope.hbm-contactPro .hbm-hp{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* ============================================================
   GENERAL CONFLICT FIXES
============================================================ */

.hbm-scope.hbm-contactPro a{
  text-decoration:none;
}

.hbm-scope.hbm-contactPro h1,
.hbm-scope.hbm-contactPro h2,
.hbm-scope.hbm-contactPro h3{
  color:#fff;
}

.hbm-scope.hbm-contactPro .hbm-contactPro__panel,
.hbm-scope.hbm-contactPro .hbm-contactPro__card,
.hbm-scope.hbm-contactPro .hbm-contactPro__hero{
  min-width:0;
}

/* ============================================================
   MOBILE
============================================================ */

@media (max-width:520px){
  .hbm-scope.hbm-contactPro{
    padding:18px 0 24px;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__hero{
    padding:16px;
    margin-bottom:14px;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__panel{
    padding:16px;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__cardHead{
    padding:16px 16px 8px;
  }

  .hbm-scope.hbm-contactPro .hbm-contact-form{
    padding:8px 16px 16px;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__heroMeta{
    gap:8px;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__metaPill{
    min-height:34px;
    padding:0 10px;
    font-size:12px;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__row{
    padding:12px;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__ico{
    width:38px;
    height:38px;
    flex-basis:38px;
    font-size:16px;
  }

  .hbm-scope.hbm-contactPro textarea.hbm-input{
    min-height:180px;
  }

  .hbm-scope.hbm-contactPro .hbm-contactPro__btn{
    width:100%;
  }
}
 
 \