body.hb-event{
  --ink:#08190F; --green-900:#0B2417; --green-800:#123A26; --green-700:#1B5E3F;
  --sand:#E8C9A0; --cream:#F7EAD7; --gold:#C9A24B; --gold-soft:#E3C583;
  --champagne:#DCC79B; --ember:#C7362B; --line:rgba(201,162,75,.28); --navH:57px;
  --display:'Amiri','Times New Roman',serif; --body:'Inter',system-ui,sans-serif;
  --util:'Cairo','Inter',sans-serif;
}
body.hb-event, body.hb-event *{box-sizing:border-box}
html{scroll-behavior:smooth}
body.hb-event{margin:0; background:var(--ink); color:#fff; font-family:var(--body); font-weight:300;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.hb-event h1, body.hb-event h2, body.hb-event h3{font-family:var(--display); font-weight:400; margin:0; line-height:1.1}
body.hb-event p{margin:0}
body.hb-event a{color:inherit; text-decoration:none}
body.hb-event button, body.hb-event input, body.hb-event select, body.hb-event textarea{font:inherit; color:inherit}
body.hb-event .shell{width:min(1180px,92vw); margin:0 auto}
body.hb-event .cur-dot, body.hb-event .cur-ring{position:fixed; top:0; left:0; z-index:300; pointer-events:none; will-change:transform; opacity:0; transition:opacity .3s}
body.hb-event .cur-dot{width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--gold)}
body.hb-event .cur-ring{width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; border:1px solid rgba(201,162,75,.5);
  display:grid; place-items:center; transition:opacity .3s,width .35s cubic-bezier(.2,.8,.3,1),height .35s cubic-bezier(.2,.8,.3,1),border-color .35s,background .35s,margin .35s cubic-bezier(.2,.8,.3,1)}
body.hb-event .cur-ring svg{width:15px; height:15px; opacity:0; transform:scale(.5); transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.3,1)}
body.hb-event .cur-ring svg path{fill:var(--ember)}
body.hb-event.cur-on .cur-dot, body.hb-event.cur-on .cur-ring{opacity:1}
body.hb-event.cur-hot .cur-dot{opacity:0}
body.hb-event.cur-hot .cur-ring{width:54px; height:54px; margin:-27px 0 0 -27px; border-color:rgba(201,162,75,.9); background:rgba(201,162,75,.12)}
body.hb-event.cur-hot .cur-ring svg{opacity:1; transform:scale(1)}
@media(hover:hover) and (pointer:fine){
body.hb-event.cur-on, body.hb-event.cur-on a, body.hb-event.cur-on button, body.hb-event.cur-on .opt{cursor:none}
body.hb-event.cur-on input, body.hb-event.cur-on textarea{cursor:text}
}
body.hb-event .nav{position:fixed; top:0; inset-inline:0; z-index:80; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem 4vw; background:rgba(8,25,15,.94); backdrop-filter:blur(14px); border-bottom:1px solid rgba(201,162,75,.14)}
body.hb-event .lang{display:flex; align-items:center; gap:.15rem; border:1px solid var(--line); border-radius:999px; padding:.2rem; position:relative}
body.hb-event .lang-pill{position:absolute; top:.2rem; bottom:.2rem; border-radius:999px;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold)); transition:transform .45s cubic-bezier(.2,.8,.3,1),width .45s cubic-bezier(.2,.8,.3,1)}
body.hb-event .lang button{position:relative; z-index:2; border:0; background:none; padding:.42em .95em; border-radius:999px;
  font-family:var(--util); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255, 0.78); cursor:pointer; transition:color .35s}
body.hb-event .lang button.on{color:var(--green-900)}
body.hb-event .nav-phone{font-family:var(--util); font-size:.68rem; font-weight:600; letter-spacing:.12em; color:var(--gold);
  border:1px solid var(--line); border-radius:999px; padding:.55em 1.15em; transition:background .3s,color .3s}
body.hb-event .nav-phone:hover{background:var(--gold); color:var(--green-900)}
@media(max-width:720px){
body.hb-event .nav-phone{display:none}
body.hb-event .nav{padding:.8rem 5vw}
}
body.hb-event .page-head{position:relative; padding:8.5rem 0 2.5rem; text-align:center; overflow:hidden;
  background:radial-gradient(100% 90% at 50% 0%, rgba(27,94,63,.45), transparent 70%), var(--ink)}
body.hb-event .calligraphy{position:absolute; inset:0; overflow:hidden; pointer-events:none; font-family:var(--display); color:var(--gold); opacity:.055; user-select:none}
body.hb-event .calligraphy span{position:absolute; font-size:clamp(9rem,24vw,20rem); line-height:1; white-space:nowrap; animation:drift 50s ease-in-out infinite alternate}
body.hb-event .calligraphy span:nth-child(1){top:-14%; left:-10%}
body.hb-event .calligraphy span:nth-child(2){bottom:-24%; right:-14%; animation-delay:-20s; animation-duration:64s; font-style:italic; opacity:.7; font-size:clamp(4rem,10vw,8rem)}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(-2deg)}to{transform:translate3d(4%,3%,0) rotate(2deg)}}
body.hb-event .page-head .shell{position:relative; z-index:3}
body.hb-event .eyebrow{font-family:var(--util); font-weight:600; font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold)}
body.hb-event .page-head h1{font-size:clamp(2.6rem,7vw,4.8rem); color:var(--sand); margin:.7rem 0 .8rem}
body.hb-event .page-head p{color:rgba(255,255,255, 0.86); max-width:58ch; margin:0 auto; font-size:1rem}
body.hb-event .steps-bar{position:sticky; top:var(--navH); z-index:70; background:rgba(8,25,15,.96); backdrop-filter:blur(14px);
  border-top:1px solid rgba(201,162,75,.14); border-bottom:1px solid rgba(201,162,75,.14)}
body.hb-event .steps-in{display:flex; align-items:center; gap:.4rem; padding:.75rem 0; overflow-x:auto; scrollbar-width:none}
body.hb-event .steps-in::-webkit-scrollbar{display:none}
body.hb-event .crumb{display:inline-flex; align-items:center; gap:.55em; white-space:nowrap; font-family:var(--util);
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255, 0.58); background:none; border:0; padding:.5em .3em; transition:color .35s}
body.hb-event .crumb i{width:20px; height:20px; border-radius:50%; border:1px solid rgba(201,162,75,.3); display:grid; place-items:center;
  font-style:normal; font-size:.6rem; transition:background .35s,border-color .35s,color .35s}
body.hb-event .crumb.done{color:rgba(255,255,255, 0.9); cursor:pointer}
body.hb-event .crumb.done i{border-color:var(--gold); color:var(--gold)}
body.hb-event .crumb.on{color:var(--gold)}
body.hb-event .crumb.on i{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); border-color:var(--gold); color:var(--green-900)}
body.hb-event .crumb-sep{flex:0 0 18px; height:1px; background:rgba(201,162,75,.2)}
body.hb-event .wrap{display:grid; grid-template-columns:1.5fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
  padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,8vw,6rem)}
@media(max-width:940px){
body.hb-event .wrap{grid-template-columns:1fr}
}
body.hb-event .step{display:none; animation:stepIn .55s cubic-bezier(.2,.8,.3,1) both}
body.hb-event .step.on{display:block}
@keyframes stepIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
body.hb-event .step-h{margin-bottom:1.8rem}
body.hb-event .step-h h2{font-size:clamp(1.8rem,4vw,2.7rem); color:var(--sand); margin:.5rem 0 .5rem}
body.hb-event .step-h p{color:rgba(255,255,255, 0.78); font-size:.95rem; max-width:52ch}
body.hb-event .opts{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem}
@media(max-width:720px){
body.hb-event .opts{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:420px){
body.hb-event .opts{grid-template-columns:1fr}
}
body.hb-event .opt{position:relative; text-align:left; padding:1.5rem 1.2rem; border:1px solid rgba(201,162,75,.22); border-radius:6px;
  background:linear-gradient(180deg,rgba(27,94,63,.22),rgba(11,36,23,.5)); cursor:pointer;
  transition:transform .4s cubic-bezier(.2,.8,.3,1),border-color .35s,background .35s}
body.hb-event .opt:hover{transform:translateY(-4px); border-color:rgba(201,162,75,.55)}
body.hb-event .opt svg{width:26px; height:26px; fill:none; stroke:var(--gold); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.9rem}
body.hb-event .opt b{display:block; font-family:var(--display); font-weight:400; font-size:1.3rem; color:#fff}
body.hb-event .opt span{display:block; margin-top:.3rem; font-size:.82rem; color:rgba(255,255,255, 0.7)}
body.hb-event .opt.sel{border-color:var(--gold); background:linear-gradient(180deg,rgba(201,162,75,.16),rgba(11,36,23,.6))}
body.hb-event .opt.sel::after{content:''; position:absolute; top:.9rem; inset-inline-end:.9rem; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold))}
body.hb-event .chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem}
body.hb-event .chip{font-family:var(--util); font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255, 0.78); border:1px solid rgba(201,162,75,.25); border-radius:999px; padding:.6em 1.15em;
  background:none; cursor:pointer; transition:all .3s}
body.hb-event .chip:hover{color:#fff; border-color:rgba(201,162,75,.5)}
body.hb-event .chip.sel{color:var(--green-900); background:linear-gradient(135deg,var(--gold-soft),var(--gold)); border-color:var(--gold)}
body.hb-event .field{display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.3rem}
body.hb-event .field label{font-family:var(--util); font-size:.62rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(201,162,75,.8)}
body.hb-event .field input, body.hb-event .field select, body.hb-event .field textarea{background:transparent; border:0; border-bottom:1px solid rgba(201,162,75,.3);
  padding:.7rem .2rem; font-size:1rem; font-weight:300; border-radius:0; transition:border-color .3s}
body.hb-event .field textarea{resize:vertical; min-height:90px}
body.hb-event .field input:focus, body.hb-event .field select:focus, body.hb-event .field textarea:focus{outline:none; border-bottom-color:var(--gold)}
body.hb-event .field select option{background:var(--green-900); color:#fff}
body.hb-event .pair{display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem}
@media(max-width:560px){
body.hb-event .pair{grid-template-columns:1fr}
}
body.hb-event .hint{font-size:.82rem; color:rgba(255,255,255, 0.63); margin-top:-.5rem; margin-bottom:1.3rem}
body.hb-event .hall{display:flex; align-items:flex-start; gap:1rem; padding:1.1rem 1.2rem; border-radius:6px; margin-bottom:1.6rem;
  border:1px solid rgba(201,162,75,.25); background:rgba(201,162,75,.06); animation:stepIn .45s ease both}
body.hb-event .hall svg{flex:0 0 auto; width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.4; margin-top:.15rem}
body.hb-event .hall b{display:block; font-family:var(--display); font-weight:400; font-size:1.15rem; color:var(--sand)}
body.hb-event .hall span{display:block; font-size:.85rem; color:rgba(255,255,255, 0.78); margin-top:.2rem}
body.hb-event .hall.over{border-color:rgba(199,54,43,.5); background:rgba(199,54,43,.08)}
body.hb-event .hall.over svg{stroke:var(--ember)}
body.hb-event .check{display:flex; align-items:center; gap:.7rem; font-size:.9rem; color:rgba(255,255,255, 0.88); cursor:pointer; margin-bottom:1.4rem}
body.hb-event .check input{appearance:none; width:18px; height:18px; border:1px solid rgba(201,162,75,.4); border-radius:3px; background:none;
  cursor:pointer; transition:background .3s,border-color .3s; position:relative}
body.hb-event .check input:checked{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); border-color:var(--gold)}
body.hb-event .check input:checked::after{content:''; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid var(--green-900); border-width:0 2px 2px 0; transform:rotate(45deg)}
body.hb-event .menu-note{display:flex; gap:1rem; padding:1.3rem 1.4rem; border-radius:6px; border:1px dashed rgba(201,162,75,.32);
  background:rgba(27,94,63,.15); margin-bottom:1.8rem}
body.hb-event .menu-note svg{flex:0 0 auto; width:24px; height:24px; fill:none; stroke:var(--gold); stroke-width:1.3}
body.hb-event .menu-note b{display:block; font-family:var(--display); font-weight:400; font-size:1.2rem; color:var(--sand); margin-bottom:.3rem}
body.hb-event .menu-note p{font-size:.88rem; color:rgba(255,255,255, 0.8)}
body.hb-event .menu-note a{color:var(--gold); border-bottom:1px solid rgba(201,162,75,.4)}
body.hb-event .actions{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:2rem}
body.hb-event .btn{display:inline-flex; align-items:center; gap:.7em; padding:1em 2em; border-radius:999px; cursor:pointer;
  font-family:var(--util); font-weight:600; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; border:0;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),background .35s,color .35s,box-shadow .35s,border-color .35s,opacity .3s}
body.hb-event .btn-solid{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:var(--green-900)}
body.hb-event .btn-solid:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(201,162,75,.22)}
body.hb-event .btn-solid[disabled]{opacity:.35; pointer-events:none}
body.hb-event .btn-ghost{border:1px solid var(--line); color:var(--sand); background:none}
body.hb-event .btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}
body.hb-event .sum{position:sticky; top:calc(var(--navH) + 4.5rem); border:1px solid rgba(201,162,75,.22); border-radius:6px;
  background:linear-gradient(180deg,rgba(27,94,63,.2),rgba(11,36,23,.55)); padding:1.6rem 1.5rem}
@media(max-width:940px){
body.hb-event .sum{position:static}
}
body.hb-event .sum h3{font-size:1.35rem; color:var(--sand); margin-bottom:1.2rem; padding-bottom:.9rem; border-bottom:1px solid rgba(201,162,75,.2)}
body.hb-event .sum-row{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(201,162,75,.1); font-size:.9rem}
body.hb-event .sum-row:last-of-type{border-bottom:0}
body.hb-event .sum-row dt{font-family:var(--util); font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(201,162,75,.75)}
body.hb-event .sum-row dd{margin:0; text-align:right; color:#fff}
body.hb-event .sum-row dd.empty{color:rgba(255,255,255, 0.48)}
body.hb-event .sum-foot{margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(201,162,75,.2); font-size:.8rem; color:rgba(255,255,255, 0.68)}
body.hb-event .done{display:none; text-align:center; padding:clamp(3rem,7vw,5rem) 0}
body.hb-event .done.on{display:block; animation:stepIn .6s cubic-bezier(.2,.8,.3,1) both}
body.hb-event .done .tick{width:64px; height:64px; margin:0 auto 1.6rem; border-radius:50%; border:1px solid var(--gold);
  display:grid; place-items:center; background:rgba(201,162,75,.1)}
body.hb-event .done .tick svg{width:26px; height:26px; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
body.hb-event .done h2{font-size:clamp(2rem,5vw,3rem); color:var(--sand); margin-bottom:.8rem}
body.hb-event .done p{color:rgba(255,255,255, 0.83); max-width:46ch; margin:0 auto 1.6rem}
body.hb-event .done .recap{max-width:420px; margin:0 auto 2rem; text-align:left}
body.hb-event .footer{background:var(--ink); padding:4rem 0 2.2rem; position:relative; overflow:hidden}
body.hb-event .footer .shell{position:relative; z-index:3}
body.hb-event .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media(max-width:800px){
body.hb-event .foot-grid{grid-template-columns:1fr}
}
body.hb-event .foot-mark{font-family:var(--display); font-size:2.8rem; color:var(--sand)}
body.hb-event .foot-mark em{font-style:normal; color:var(--gold)}
body.hb-event .foot-tag{font-family:var(--display); font-style:italic; color:var(--gold-soft); margin-top:.3rem}
body.hb-event .foot-col h4{font-family:var(--util); font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 1rem}
body.hb-event .foot-col p, body.hb-event .foot-col a{display:block; font-size:.9rem; color:rgba(255,255,255, 0.88); margin-bottom:.45rem; transition:color .3s}
body.hb-event .foot-col a:hover{color:var(--gold)}
body.hb-event .foot-bottom{margin-top:2.8rem; padding-top:1.5rem; border-top:1px solid rgba(201,162,75,.14); display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-family:var(--util); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255, 0.58)}
body.hb-event :focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
body.hb-event, body.hb-event *{animation-duration:.001s !important; transition-duration:.001s !important}
}
body.admin-bar.hb-event .nav{top:32px}
@media(max-width:782px){body.admin-bar.hb-event .nav{top:46px}}

/* ---- header logo ---- */
body.hb-event .nav-mark{display:inline-flex; align-items:center; line-height:0}
body.hb-event .nav-mark img{
  height:clamp(32px,3.6vw,44px); width:auto; display:block;
  filter:drop-shadow(0 2px 9px rgba(0,0,0,.35));
  transition:transform .45s cubic-bezier(.2,.8,.3,1), filter .45s;
}
body.hb-event .nav-mark:hover img{transform:translateY(-1px) scale(1.02); filter:drop-shadow(0 4px 15px rgba(201,162,75,.32))}

/* ============================================================
   Phone layout. Header keeps the mark and the language switch;
   the number sits in the footer. Footer packs to two columns.
   ============================================================ */
@media(max-width:640px){
  body.hb-event{--navH:48px}
  body.hb-event .nav{padding:.65rem 4.5vw}
  body.hb-event .nav-phone{display:none}
  body.hb-event .nav-mark img{height:30px}
  body.hb-event .lang{padding:.18rem}
  body.hb-event .lang button{font-size:.53rem; letter-spacing:.14em; padding:.52em .85em}

  body.hb-event .footer{padding:2.5rem 0 1.4rem}
  body.hb-event .foot-grid{grid-template-columns:1fr 1fr; gap:1.4rem 1.1rem}
  body.hb-event .foot-grid > div:first-child{grid-column:1 / -1; text-align:center}
  body.hb-event .foot-mark{font-size:2.1rem}
  body.hb-event .foot-tag{font-size:.86rem; margin-top:.15rem}
  body.hb-event .foot-col h4{font-size:.54rem; letter-spacing:.2em; margin-bottom:.55rem}
  body.hb-event .foot-col p, body.hb-event .foot-col a{font-size:.79rem; margin-bottom:.32rem; line-height:1.45}
  body.hb-event .foot-bottom{margin-top:1.6rem; padding-top:.95rem; justify-content:center;
    text-align:center; font-size:.52rem; gap:.35rem}
}

/* the phone number is hidden on handhelds - it lives in the footer,
   where there is room to read and tap it */
@media(max-width:820px){
  body.hb-event .nav .nav-phone,
  body.hb-event a.nav-phone{display:none !important}
}

/* the logo is a link - give it a real tap target and visible feedback.
   The negative margin cancels the padding so nothing shifts visually. */
body.hb-event .nav-mark{
  padding:.4rem .55rem; margin:-.4rem -.55rem; border-radius:8px;
  cursor:pointer; -webkit-tap-highlight-color:rgba(201,162,75,.2);
  transition:background .3s;
}
body.hb-event .nav-mark:hover{background:rgba(201,162,75,.07)}
body.hb-event .nav-mark:active img{transform:scale(.96)}
body.hb-event .nav-mark:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media(max-width:820px){
  body.hb-event .nav-mark{min-height:44px; min-width:44px; justify-content:flex-start}
}