body.hb-book{
  --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;
  --wa:#25D366;
  --display:'Amiri','Times New Roman',serif; --body:'Inter',system-ui,sans-serif;
  --util:'Cairo','Inter',sans-serif;
}
body.hb-book, body.hb-book *{box-sizing:border-box}
html{scroll-behavior:smooth}
body.hb-book{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-book h1, body.hb-book h2, body.hb-book h3{font-family:var(--display); font-weight:400; margin:0; line-height:1.1}
body.hb-book p{margin:0}
body.hb-book a{color:inherit; text-decoration:none}
body.hb-book button, body.hb-book input, body.hb-book select, body.hb-book textarea{font:inherit; color:inherit}
body.hb-book .shell{width:min(1180px,92vw); margin:0 auto}
body.hb-book .cur-dot, body.hb-book .cur-ring{position:fixed; top:0; left:0; z-index:300; pointer-events:none; will-change:transform; opacity:0; transition:opacity .3s}
body.hb-book .cur-dot{width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:var(--gold)}
body.hb-book .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-book .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-book .cur-ring svg path{fill:var(--ember)}
body.hb-book.cur-on .cur-dot, body.hb-book.cur-on .cur-ring{opacity:1}
body.hb-book.cur-hot .cur-dot{opacity:0}
body.hb-book.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-book.cur-hot .cur-ring svg{opacity:1; transform:scale(1)}
@media(hover:hover) and (pointer:fine){
body.hb-book.cur-on, body.hb-book.cur-on a, body.hb-book.cur-on button{cursor:none}
body.hb-book.cur-on input, body.hb-book.cur-on textarea{cursor:text}
}
body.hb-book .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-book .lang{display:flex; align-items:center; gap:.15rem; border:1px solid var(--line); border-radius:999px; padding:.2rem; position:relative}
body.hb-book .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-book .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-book .lang button.on{color:var(--green-900)}
body.hb-book .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-book .nav-phone:hover{background:var(--gold); color:var(--green-900)}
@media(max-width:720px){
body.hb-book .nav-phone{display:none}
body.hb-book .nav{padding:.8rem 5vw}
}
body.hb-book .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-book .calligraphy{position:absolute; inset:0; overflow:hidden; pointer-events:none; font-family:var(--display); color:var(--gold); opacity:.055; user-select:none}
body.hb-book .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-book .calligraphy span:nth-child(1){top:-14%; left:-10%}
body.hb-book .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-book .page-head .shell{position:relative; z-index:3}
body.hb-book .eyebrow{font-family:var(--util); font-weight:600; font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold)}
body.hb-book .page-head h1{font-size:clamp(2.6rem,7vw,4.8rem); color:var(--sand); margin:.7rem 0 .8rem}
body.hb-book .page-head p{color:rgba(255,255,255, 0.86); max-width:52ch; margin:0 auto; font-size:1rem}
body.hb-book .wrap{display:grid; grid-template-columns:1.45fr .9fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start;
  padding:clamp(2rem,4vw,3.5rem) 0 clamp(4rem,8vw,6rem)}
@media(max-width:940px){
body.hb-book .wrap{grid-template-columns:1fr}
}
body.hb-book .block{margin-bottom:2.2rem}
body.hb-book .block-h{font-family:var(--util); font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1rem; display:flex; align-items:center; gap:.7rem}
body.hb-book .block-h::after{content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(201,162,75,.28),transparent)}
body.hb-book .chips{display:flex; flex-wrap:wrap; gap:.5rem}
body.hb-book .chip{font-family:var(--util); font-size:.68rem; font-weight:600; letter-spacing:.1em;
  color:rgba(255,255,255, 0.8); border:1px solid rgba(201,162,75,.25); border-radius:999px; padding:.65em 1.2em;
  background:none; cursor:pointer; transition:all .3s cubic-bezier(.2,.8,.3,1)}
body.hb-book .chip:hover{color:#fff; border-color:rgba(201,162,75,.55); transform:translateY(-2px)}
body.hb-book .chip.sel{color:var(--green-900); background:linear-gradient(135deg,var(--gold-soft),var(--gold)); border-color:var(--gold)}
body.hb-book .chip small{display:block; font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; opacity:.65; margin-top:.15rem; font-weight:400}
body.hb-book .slot-group{margin-bottom:1.1rem}
body.hb-book .slot-label{font-family:var(--display); font-style:italic; font-size:.92rem; color:rgba(232,201,160, 0.78); margin-bottom:.6rem}
body.hb-book .field{display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.3rem}
body.hb-book .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-book .field input, body.hb-book .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-book .field textarea{resize:vertical; min-height:80px}
body.hb-book .field input:focus, body.hb-book .field textarea:focus{outline:none; border-bottom-color:var(--gold)}
body.hb-book .pair{display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem}
@media(max-width:560px){
body.hb-book .pair{grid-template-columns:1fr}
}
body.hb-book .nudge{display:none; gap:1rem; padding:1.15rem 1.3rem; border-radius:6px; margin-top:1.2rem;
  border:1px solid rgba(201,162,75,.32); background:rgba(201,162,75,.07); animation:pop .45s cubic-bezier(.2,.8,.3,1) both}
body.hb-book .nudge.on{display:flex}
@keyframes pop{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
body.hb-book .nudge svg{flex:0 0 auto; width:22px; height:22px; fill:none; stroke:var(--gold); stroke-width:1.4; margin-top:.15rem}
body.hb-book .nudge b{display:block; font-family:var(--display); font-weight:400; font-size:1.12rem; color:var(--sand)}
body.hb-book .nudge span{display:block; font-size:.85rem; color:rgba(255,255,255, 0.78); margin-top:.2rem}
body.hb-book .nudge a{color:var(--gold); border-bottom:1px solid rgba(201,162,75,.45)}
body.hb-book .card{position:sticky; top:calc(var(--navH) + 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,.6)); padding:1.7rem 1.6rem}
@media(max-width:940px){
body.hb-book .card{position:static}
}
body.hb-book .card h3{font-size:1.35rem; color:var(--sand); margin-bottom:.4rem}
body.hb-book .sentence{font-family:var(--display); font-size:1.18rem; line-height:1.5; color:#fff; padding:1.1rem 0 1.2rem;
  border-bottom:1px solid rgba(201,162,75,.18); margin-bottom:1.3rem; min-height:5.2em}
body.hb-book .sentence em{font-style:normal; color:var(--gold)}
body.hb-book .sentence .todo{color:rgba(255,255,255, 0.46)}
body.hb-book .act{display:flex; flex-direction:column; gap:.7rem}
body.hb-book .btn{display:inline-flex; align-items:center; justify-content:center; gap:.7em; padding:1.05em 1.6em; border-radius:999px;
  cursor:pointer; border:0; font-family:var(--util); font-weight:600; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),background .35s,color .35s,box-shadow .35s,border-color .35s,opacity .3s}
body.hb-book .btn svg{width:16px; height:16px; flex:0 0 auto}
body.hb-book .btn-wa{background:var(--wa); color:#04321a}
body.hb-book .btn-wa svg{fill:#04321a}
body.hb-book .btn-wa:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(37,211,102,.22)}
body.hb-book .btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:var(--green-900)}
body.hb-book .btn-gold:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(201,162,75,.22)}
body.hb-book .btn-ghost{border:1px solid var(--line); color:var(--sand); background:none}
body.hb-book .btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}
body.hb-book .btn[disabled]{opacity:.3; pointer-events:none}
body.hb-book .or{text-align:center; font-family:var(--display); font-style:italic; font-size:.88rem; color:rgba(255,255,255, 0.53); margin:.1rem 0}
body.hb-book .card-foot{margin-top:1.3rem; padding-top:1rem; border-top:1px solid rgba(201,162,75,.18); font-size:.8rem; color:rgba(255,255,255, 0.68)}
body.hb-book .info{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,162,75,.16);
  border:1px solid rgba(201,162,75,.16); border-radius:6px; overflow:hidden; margin-top:2.5rem}
@media(max-width:700px){
body.hb-book .info{grid-template-columns:1fr}
}
body.hb-book .info div{background:var(--green-900); padding:1.3rem 1.4rem}
body.hb-book .info dt{font-family:var(--util); font-size:.58rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:.45rem}
body.hb-book .info dd{margin:0; font-size:.92rem; color:rgba(255,255,255, 0.93)}
body.hb-book .done{display:none; text-align:center; padding:1rem 0}
body.hb-book .done.on{display:block; animation:pop .5s cubic-bezier(.2,.8,.3,1) both}
body.hb-book .done .tick{width:58px; height:58px; margin:0 auto 1.3rem; border-radius:50%; border:1px solid var(--gold);
  display:grid; place-items:center; background:rgba(201,162,75,.1)}
body.hb-book .done .tick svg{width:24px; height:24px; fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
body.hb-book .done h3{font-size:1.6rem; color:var(--sand); margin-bottom:.6rem}
body.hb-book .done p{color:rgba(255,255,255, 0.8); font-size:.9rem}
body.hb-book .footer{background:var(--ink); padding:4rem 0 2.2rem; position:relative; overflow:hidden}
body.hb-book .footer .shell{position:relative; z-index:3}
body.hb-book .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
@media(max-width:800px){
body.hb-book .foot-grid{grid-template-columns:1fr}
}
body.hb-book .foot-mark{font-family:var(--display); font-size:2.8rem; color:var(--sand)}
body.hb-book .foot-mark em{font-style:normal; color:var(--gold)}
body.hb-book .foot-tag{font-family:var(--display); font-style:italic; color:var(--gold-soft); margin-top:.3rem}
body.hb-book .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-book .foot-col p, body.hb-book .foot-col a{display:block; font-size:.9rem; color:rgba(255,255,255, 0.88); margin-bottom:.45rem; transition:color .3s}
body.hb-book .foot-col a:hover{color:var(--gold)}
body.hb-book .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-book :focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media(prefers-reduced-motion:reduce){
body.hb-book, body.hb-book *{animation-duration:.001s !important; transition-duration:.001s !important}
}
body.admin-bar.hb-book .nav{top:32px}
@media(max-width:782px){body.admin-bar.hb-book .nav{top:46px}}

/* ---- header logo ---- */
body.hb-book .nav-mark{display:inline-flex; align-items:center; line-height:0}
body.hb-book .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-book .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-book .nav{padding:.65rem 4.5vw}
  body.hb-book .nav-phone{display:none}
  body.hb-book .nav-mark img{height:30px}
  body.hb-book .lang{padding:.18rem}
  body.hb-book .lang button{font-size:.53rem; letter-spacing:.14em; padding:.52em .85em}

  body.hb-book .footer{padding:2.5rem 0 1.4rem}
  body.hb-book .foot-grid{grid-template-columns:1fr 1fr; gap:1.4rem 1.1rem}
  body.hb-book .foot-grid > div:first-child{grid-column:1 / -1; text-align:center}
  body.hb-book .foot-mark{font-size:2.1rem}
  body.hb-book .foot-tag{font-size:.86rem; margin-top:.15rem}
  body.hb-book .foot-col h4{font-size:.54rem; letter-spacing:.2em; margin-bottom:.55rem}
  body.hb-book .foot-col p, body.hb-book .foot-col a{font-size:.79rem; margin-bottom:.32rem; line-height:1.45}
  body.hb-book .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-book .nav .nav-phone,
  body.hb-book 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-book .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-book .nav-mark:hover{background:rgba(201,162,75,.07)}
body.hb-book .nav-mark:active img{transform:scale(.96)}
body.hb-book .nav-mark:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
@media(max-width:820px){
  body.hb-book .nav-mark{min-height:44px; min-width:44px; justify-content:flex-start}
}