/* ============================================================
   HBIMS-NAF&SA — Universal Header
   Ledger & Horizon design system · locked palette only
   Contract preserved: .hb-header #hb-header .hb-brand .hb-nav
   .hb-cta .hb-burger #hb-mob .hb-mob .hb-mob-links .hb-mob-app
   .hb-mob-apply · data-apply-modal-open · data-app-download-open
   ============================================================ */

:root{
  /* ---- locked tokens ---- */
  --hb-cream:#FCF7EA;        /* primary background */
  --hb-white:#FFFFFF;        /* panels, cards */
  --hb-editorial:#F5EAD8;    /* editorial fill */
  --hb-ink:#1D161C;          /* headings / nav */
  --hb-body:#2D2926;         /* body text */
  --hb-muted:#543C2C;        /* secondary text */
  --hb-bronze:#6E5327;       /* utility strip ground */
  --hb-gold:#E2B15D;         /* CTA gold */
  --hb-gold-hi:#EBB93F;      /* CTA gold hover */
  --hb-gold-dot:#F3D58C;     /* live dot / focus on bronze */
  --hb-burg:#7B2D26;         /* primary CTA burgundy */
  --hb-green:#2C6A47;        /* Navya live green */
  --hb-border:#ECD093;       /* soft border */
  /* ---- derived ---- */
  --hb-burg-hi:color-mix(in srgb,var(--hb-burg) 86%,#FFFFFF);
  --hb-burg-lo:color-mix(in srgb,var(--hb-burg) 82%,#000000);
  --hb-gold-lo:color-mix(in srgb,var(--hb-gold) 84%,#000000);
  --hb-bronze-40:color-mix(in srgb,var(--hb-bronze) 40%,#FFFFFF);
  --hb-hover-wash:color-mix(in srgb,var(--hb-bronze) 6%,transparent);
  --hb-shadow-ink:29,22,28;
  /* ---- type ---- */
  --hb-display:'Sora','Sora Fallback',ui-sans-serif,system-ui,sans-serif;
  --hb-text:'Inter','Inter Fallback',ui-sans-serif,system-ui,sans-serif;
  /* ---- metrics ---- */
  --hb-strip-h:40px;
  --hb-bar-h:64px;
  --hb-max:1520px;
  --hb-pad:clamp(16px,2.5vw,32px);
}

/* ---------- scoped base ---------- */
.hb-header *,.hb-header *::before,.hb-header *::after,
.hb-mob *,.hb-mob *::before,.hb-mob *::after{box-sizing:border-box;margin:0;padding:0}
.hb-header summary,.hb-mob summary{list-style:none;cursor:pointer}
.hb-header summary::-webkit-details-marker,.hb-mob summary::-webkit-details-marker{display:none}
.hb-header svg,.hb-mob svg{display:block;flex:none}
body.hb-lock{overflow:hidden}

/* ---------- skip link ---------- */
.hb-skip{position:fixed;top:-52px;left:16px;z-index:1400;background:var(--hb-burg);color:#fff;
  padding:11px 18px;border-radius:10px;font:600 14px/1 var(--hb-text);text-decoration:none;
  transition:top .2s ease}
.hb-skip:focus{top:12px}

/* ---------- fixed shell + flow spacer ---------- */
.hb-header{position:fixed;top:0;left:0;right:0;z-index:1200;
  background:linear-gradient(180deg,#FFFDF6 0%,var(--hb-cream) 42%,#F6EEDB 100%)}
.hb-header::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:linear-gradient(90deg,rgba(226,177,93,0) 0%,var(--hb-gold) 14%,var(--hb-gold) 86%,rgba(226,177,93,0) 100%)}
.hb-header::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  box-shadow:0 14px 34px -20px rgba(var(--hb-shadow-ink),.35);transition:opacity .25s ease}
.hb-header.is-scrolled::before{opacity:1}
.hb-spacer{height:var(--hb-bar-h)}

/* ============================================================
   TIER 1 · UTILITY STRIP (desktop)
   ============================================================ */
.hb-strip{display:none;color:var(--hb-cream);
  background:linear-gradient(180deg,#7B5D2D 0%,var(--hb-bronze) 55%,#5B431C 100%);
  max-height:var(--hb-strip-h);overflow:visible;position:relative;z-index:2}
.hb-strip-in{display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;max-width:var(--hb-max);margin:0 auto;height:var(--hb-strip-h);
  padding:0 var(--hb-pad)}
.hb-strip-l,.hb-strip-r{display:flex;align-items:center;gap:18px;min-width:0}

.hb-line{display:inline-flex;align-items:center;gap:8px;color:var(--hb-body);
  text-decoration:none;font:600 12.5px/1 var(--hb-text);letter-spacing:.01em;white-space:nowrap;
  padding:8px 15px 8px 12px;border-radius:999px;
  background:linear-gradient(180deg,#EFC97E 0%,var(--hb-gold) 55%,var(--hb-gold-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(110,83,39,.32),
    0 8px 16px -8px rgba(0,0,0,.6);
  transition:transform .16s ease,box-shadow .16s ease}
.hb-line svg{width:14px;height:14px;color:var(--hb-burg)}
.hb-line span{color:var(--hb-muted);font-weight:600}
.hb-line strong{font-weight:700;color:var(--hb-ink)}
.hb-line:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,83,39,.3),
    0 12px 22px -9px rgba(0,0,0,.65)}

/* Ask Navya — the only green in the header */
.hb-navya{display:inline-flex;align-items:center;gap:8px;background:var(--hb-green);color:#fff;
  border-radius:999px;padding:6px 13px 6px 10px;text-decoration:none;white-space:nowrap;
  font:600 12.5px/1 var(--hb-text);letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s ease,box-shadow .18s ease}
.hb-navya:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 16px -9px rgba(44,106,71,.9)}
.hb-navya svg{width:15px;height:15px;fill:#fff}
.hb-ai{font:700 9.5px/1 var(--hb-text);letter-spacing:.09em;background:rgba(255,255,255,.16);
  padding:3px 7px;border-radius:6px}
.hb-dot{width:7px;height:7px;border-radius:50%;background:var(--hb-gold-dot);position:relative}
.hb-dot::after{content:"";position:absolute;inset:0;border-radius:50%;
  animation:hb-pulse 2s ease-out infinite}
@keyframes hb-pulse{0%{box-shadow:0 0 0 0 rgba(243,213,140,.55)}70%,100%{box-shadow:0 0 0 8px rgba(243,213,140,0)}}

.hb-chip{font:600 11.5px/1 var(--hb-text);letter-spacing:.05em;color:var(--hb-cream);
  border:1px solid rgba(252,247,234,.35);padding:5px 11px;border-radius:999px;white-space:nowrap;opacity:.92}

.hb-strip-tag{display:none;flex:1;min-width:0;text-align:center;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font:500 12px/1 var(--hb-text);
  color:var(--hb-cream);letter-spacing:.035em;opacity:.92;padding:0 14px}

/* ============================================================
   TIER 2 · MAIN BAR
   ============================================================ */
.hb-bar{position:relative;z-index:1;display:flex;align-items:center;gap:16px;
  height:var(--hb-bar-h);max-width:var(--hb-max);margin:0 auto;padding:0 var(--hb-pad)}

/* ---- brand lockup ---- */
.hb-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;flex:none}
.hb-seal{position:relative;width:46px;height:46px;flex:none;border-radius:50%;
  background:var(--hb-white);border:1px solid var(--hb-border);display:grid;place-items:center;
  box-shadow:0 3px 9px -4px rgba(110,83,39,.45),inset 0 1px 0 #fff;
  transition:transform .18s ease}
.hb-brand:hover .hb-seal{transform:translateY(-1px)}
.hb-seal img{width:40px;height:40px;border-radius:50%}
.hb-seal .tm{position:absolute;top:-3px;right:-6px;font:700 7.5px/1 var(--hb-text);
  color:var(--hb-bronze);background:var(--hb-cream);border:1px solid var(--hb-border);
  border-radius:999px;padding:2px 4px;letter-spacing:.03em}
.hb-brand-txt{display:flex;flex-direction:column;min-width:0}
.hb-brand-name{display:flex;align-items:flex-start;gap:2px;white-space:nowrap;
  font:700 17px/1.1 var(--hb-display);color:var(--hb-ink);letter-spacing:.01em}
.hb-brand-name .tm{font:700 9px/1 var(--hb-text);color:var(--hb-bronze);margin-top:1px}
.hb-brand-tag{display:block;font:500 11.5px/1.3 var(--hb-text);color:var(--hb-muted);
  letter-spacing:.015em;margin-top:3px;white-space:nowrap}

/* ---- primary navigation ---- */
.hb-nav{display:none;align-items:center;gap:2px;margin:0 auto}
.hb-nav>a,.hb-nav .nav-dd>summary{position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:11px 10px;border-radius:10px;text-decoration:none;white-space:nowrap;
  font:600 14px/1 var(--hb-text);color:var(--hb-ink);letter-spacing:.004em;
  transition:background .16s ease,color .16s ease}
.hb-nav>a::after,.hb-nav .nav-dd>summary::after{content:"";position:absolute;left:10px;right:10px;
  bottom:6px;height:2px;border-radius:2px;background:var(--hb-gold);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.hb-nav>a:hover,.hb-nav .nav-dd>summary:hover,.hb-nav .nav-dd[open]>summary{background:var(--hb-hover-wash)}
.hb-nav>a:hover::after,.hb-nav .nav-dd>summary:hover::after,
.hb-nav .nav-dd[open]>summary::after,.hb-nav .nav-dd:focus-within>summary::after{transform:scaleX(1)}
.hb-nav>a.active{color:var(--hb-burg)}
.hb-nav>a.active::after{transform:scaleX(1);background:var(--hb-burg)}
.hb-caret{width:11px;height:11px;color:var(--hb-bronze);transition:transform .2s ease;margin-top:1px}
.nav-dd[open]>summary .hb-caret{transform:rotate(180deg)}
@media (hover:hover){.nav-dd:hover>summary .hb-caret{transform:rotate(180deg)}}

/* ---- dropdown panels ---- */
.nav-dd{position:relative}
.nav-dd-menu{position:absolute;top:calc(100% + 12px);left:50%;min-width:288px;
  transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;
  background:var(--hb-white);border:1px solid var(--hb-border);border-radius:16px;
  box-shadow:0 26px 52px -24px rgba(var(--hb-shadow-ink),.32);
  padding:10px;z-index:30;
  transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav-dd-menu::before{content:"";position:absolute;top:-13px;left:0;right:0;height:13px}
.nav-dd[open]>.nav-dd-menu,.nav-dd:focus-within>.nav-dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
@media (hover:hover){.nav-dd:hover>.nav-dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}}

.nav-dd-menu a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  text-decoration:none;color:var(--hb-body);font:500 14px/1.35 var(--hb-text);
  transition:background .14s ease,color .14s ease}
.nav-dd-menu a:hover{background:var(--hb-cream);color:var(--hb-ink)}
.dd-ic{width:19px;height:19px;color:var(--hb-bronze)}
.dd-sub{display:block;font:500 11.5px/1.3 var(--hb-text);color:var(--hb-muted);margin-top:2px}
.dd-n{font:600 11px/1 var(--hb-text);color:var(--hb-bronze);letter-spacing:.05em;min-width:20px}
.dd-badge{margin-left:auto;font:700 9.5px/1 var(--hb-text);letter-spacing:.07em;color:var(--hb-burg);
  background:color-mix(in srgb,var(--hb-gold) 26%,#fff);border:1px solid var(--hb-border);
  padding:3px 8px;border-radius:999px}
.dd-lead{border-bottom:1px solid var(--hb-border);border-radius:10px 10px 0 0;
  margin:-2px -2px 6px;padding:11px 12px 12px;font-weight:600;color:var(--hb-ink)}
.dd-all{margin-top:6px;border-top:1px solid var(--hb-border);padding-top:11px;
  color:var(--hb-burg);font-weight:600;justify-content:flex-start}
.dd-all svg{width:14px;height:14px;margin-left:2px}
.nav-dd-wide{min-width:584px}
.dd-cols{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px}
.dd-cols a{padding:8px 10px}

/* ============================================================
   CTA CLUSTER — the three lead sources
   ============================================================ */
.hb-cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.hb-btn{display:none;align-items:center;justify-content:center;gap:8px;height:44px;
  padding:0 18px;border-radius:12px;border:0;text-decoration:none;white-space:nowrap;
  font:600 14px/1 var(--hb-text);letter-spacing:.01em;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease}
.hb-btn:active{transform:translateY(1px)}
.hb-btn svg{width:17px;height:17px}

/* 3D coin ornament — engraved socket carrying each lead icon */
.hb-btn .hb-coin{width:25px;height:25px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,.34) 100%);
  box-shadow:inset 0 1.5px 2px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.22),
    0 1px 0 rgba(255,255,255,.3)}
.hb-btn .hb-coin svg{width:14px;height:14px}

/* ornament shape modifiers — matched to each action's meaning */
.hb-orn--squircle{border-radius:8px!important}
.hb-orn--shield{border-radius:0!important;box-shadow:none!important;
  clip-path:polygon(50% 0,96% 15%,96% 58%,50% 100%,4% 58%,4% 15%);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,0) 40%),
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.36))!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.hb-orn--hex{border-radius:0!important;box-shadow:none!important;
  clip-path:polygon(25% 4%,75% 4%,97% 50%,75% 96%,25% 96%,3% 50%);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,0) 40%),
    linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,.36))!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.hb-orn--diamond{border-radius:5px!important;transform:rotate(45deg);
  width:21px!important;height:21px!important}
.hb-orn--diamond svg{transform:rotate(-45deg)}

.hb-btn-gold{color:var(--hb-body);
  background:linear-gradient(180deg,#EFC97E 0%,var(--hb-gold) 55%,var(--hb-gold-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 0 rgba(110,83,39,.28),
    0 9px 18px -10px rgba(178,132,52,.55)}
.hb-btn-gold:hover{transform:translateY(-1px);
  background:linear-gradient(180deg,#F2CE84 0%,var(--hb-gold-hi) 55%,var(--hb-gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(110,83,39,.28),
    0 13px 24px -11px rgba(178,132,52,.6)}

.hb-btn-primary{color:#fff;
  background:linear-gradient(180deg,var(--hb-burg-hi) 0%,var(--hb-burg) 58%,var(--hb-burg-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.26),
    0 11px 20px -10px rgba(123,45,38,.55);will-change:transform}
.hb-btn-primary:hover{transform:translateY(-1px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--hb-burg) 78%,#fff) 0%,var(--hb-burg-hi) 58%,var(--hb-burg) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.24),
    0 15px 26px -11px rgba(123,45,38,.6)}

.hb-btn-bronze{color:var(--hb-cream);
  background:linear-gradient(180deg,#7E5F31 0%,var(--hb-bronze) 58%,#57411E 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.3),
    0 10px 20px -10px rgba(110,83,39,.65)}
.hb-btn-bronze svg{color:var(--hb-gold-dot)}
.hb-btn-bronze:hover{transform:translateY(-1px);
  background:linear-gradient(180deg,#8A6A38 0%,#7A5C2C 58%,var(--hb-bronze) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.28),
    0 14px 26px -11px rgba(110,83,39,.72)}

/* mobile-bar icon actions */
.hb-icnbtn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:11px;border:0;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.2),
    0 8px 14px -8px rgba(29,22,28,.55)}
.hb-icnbtn:hover{transform:translateY(-1px)}
.hb-icnbtn svg{width:19px;height:19px}
.hb-icn-call{color:var(--hb-body);
  background:linear-gradient(180deg,#EFC97E 0%,var(--hb-gold) 55%,var(--hb-gold-lo) 100%)}
.hb-icn-wa{color:#fff;
  background:linear-gradient(180deg,#35815B 0%,var(--hb-green) 55%,#224F38 100%)}
.hb-icn-wa svg{fill:#fff}

.hb-burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:44px;height:44px;border-radius:11px;border:0;cursor:pointer;
  background:linear-gradient(180deg,var(--hb-burg-hi) 0%,var(--hb-burg) 58%,var(--hb-burg-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.26),
    0 8px 14px -8px rgba(123,45,38,.6);
  transition:transform .15s ease,box-shadow .15s ease}
.hb-burger:hover{transform:translateY(-1px)}
.hb-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--hb-cream)}

/* ============================================================
   TIER 3 · DRAWER
   ============================================================ */
.hb-mob{position:fixed;inset:0;z-index:1300;visibility:hidden;background:rgba(29,22,28,0);
  transition:background .26s ease,visibility .26s}
.hb-mob.open{visibility:visible;background:rgba(29,22,28,.38)}
.hb-mob-panel{margin-left:auto;height:100%;width:min(430px,100%);display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FFFDF6 0%,var(--hb-cream) 34%,#F6EEDB 100%);
  transform:translateX(102%);
  transition:transform .3s cubic-bezier(.22,.8,.3,1);
  border-left:1px solid var(--hb-border);
  box-shadow:-28px 0 64px -34px rgba(var(--hb-shadow-ink),.5)}
.hb-mob.open .hb-mob-panel{transform:none}

.hb-mob-top{display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--hb-border)}
.hb-mob-top .hb-seal{width:38px;height:38px}
.hb-mob-top .hb-seal img{width:33px;height:33px}
.hb-mob-top .hb-brand-name{font-size:15px}
.hb-mob-x{margin-left:auto;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--hb-border);background:var(--hb-white);color:var(--hb-ink);
  display:grid;place-items:center;cursor:pointer}
.hb-mob-x svg{width:17px;height:17px}

.hb-mob-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 12px 18px;
  overscroll-behavior:contain}
.hb-mob-links{display:flex;flex-direction:column;gap:2px}
.hb-mob-links>a,.hb-mob-dd>summary{display:flex;align-items:center;gap:11px;padding:13px 12px;
  border-radius:12px;text-decoration:none;color:var(--hb-ink);
  font:600 15.5px/1.2 var(--hb-text)}
.hb-mob-links>a:hover,.hb-mob-dd>summary:hover{background:var(--hb-white)}
.hb-mob-links>a.active{color:var(--hb-burg);background:var(--hb-white)}
.hb-mob-dd>summary .hb-caret{margin-left:auto;width:13px;height:13px}
.hb-mob-dd{border-radius:12px}
.hb-mob-dd[open]{background:var(--hb-white);box-shadow:inset 0 0 0 1px var(--hb-border)}
.hb-mob-dd[open]>summary .hb-caret{transform:rotate(180deg)}
.hb-mob-dd-menu{display:flex;flex-direction:column;padding:2px 6px 8px}
.hb-mob-dd-menu a{display:flex;align-items:center;gap:9px;padding:10px 10px 10px 18px;
  border-radius:9px;text-decoration:none;color:var(--hb-body);font:500 14.5px/1.35 var(--hb-text)}
.hb-mob-dd-menu a:hover{background:var(--hb-cream)}
.hb-mob-dd-menu a.active{color:var(--hb-burg)}
.hb-mob-dd-menu .dd-sub{font-size:11px}

.hb-mob-contact{display:grid;gap:8px;margin:12px 2px 2px}
.hb-row{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;
  border:1px solid var(--hb-border);background:var(--hb-white);text-decoration:none;
  color:var(--hb-ink);font:600 14px/1.25 var(--hb-text)}
.hb-row svg{width:19px;height:19px;color:var(--hb-bronze)}
.hb-row small{display:block;font:500 12px/1.3 var(--hb-text);color:var(--hb-muted);margin-top:2px}
.hb-row-navya{background:var(--hb-green);border-color:var(--hb-green);color:#fff}
.hb-row-navya svg{fill:#fff;color:#fff}
.hb-row-navya small{color:rgba(255,255,255,.85)}
.hb-row-navya .hb-dot{margin-left:auto}

.hb-mob-ctas{display:grid;gap:9px;padding:13px 16px calc(15px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hb-border);background:var(--hb-cream)}
.hb-mob-ctas .hb-btn{display:flex;width:100%;height:48px;font-size:15px}

/* ============================================================
   SCROLL CONDENSE — CSS scroll-driven, JS fallback class
   ============================================================ */
@media (min-width:1024px){
  .hb-header.is-scrolled .hb-strip{max-height:0;opacity:0;overflow:hidden}
  .hb-strip{transition:max-height .28s ease,opacity .22s ease}
}
@supports (animation-timeline: scroll()){
  @media (min-width:1024px) and (prefers-reduced-motion:no-preference){
    .hb-strip{animation:hb-strip-out linear both;animation-timeline:scroll(root);
      animation-range:0px 140px}
  }
  @media (prefers-reduced-motion:no-preference){
    .hb-header::before{animation:hb-elev linear both;animation-timeline:scroll(root);
      animation-range:0px 140px}
  }
}
@keyframes hb-strip-out{to{max-height:0;opacity:0;overflow:hidden}}
@keyframes hb-elev{to{opacity:1}}

/* ============================================================
   FOCUS · MOTION SAFETY
   ============================================================ */
.hb-header :focus-visible,.hb-mob :focus-visible{outline:2px solid var(--hb-burg);outline-offset:2px}
.hb-strip :focus-visible{outline-color:var(--hb-gold-dot)}
.hb-skip:focus-visible{outline:2px solid var(--hb-gold-dot);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .hb-header *,.hb-header *::before,.hb-header *::after,
  .hb-mob *,.hb-mob *::before,.hb-mob *::after{
    animation:none!important;transition-duration:.01ms!important}
  .hb-dot::after{display:none}
}

/* ============================================================
   RESPONSIVE LADDER — verified fit at every band
   <1024 mobile bar · 1024–1359 trio + burger · ≥1360 full nav
   ============================================================ */
@media (max-width:599px){.hb-brand-tag{display:none}}
@media (max-width:379px){.hb-icnbtn,.hb-burger{width:40px;height:40px}}
@media (max-width:359px){.hb-brand-name{font-size:15px}}
@media (max-width:349px){.hb-icn-call{display:none}}

@media (min-width:1024px){
  .hb-strip{display:block}
  .hb-spacer{height:calc(var(--hb-strip-h) + 72px)}
  .hb-header{--hb-bar-h:72px}
  .hb-btn{display:inline-flex}
  .hb-icnbtn{display:none}
}
@media (min-width:1400px){
  .hb-nav{display:flex}
  .hb-burger{display:none}
  .hb-brand-tag{display:none}      /* tagline moves to the strip centre */
  .hb-strip-tag{display:block}
  .hb-brand-name{font-size:16px}
  .hb-nav>a,.hb-nav .nav-dd>summary{padding:11px 8px;font-size:13.5px}
  .hb-nav>a::after,.hb-nav .nav-dd>summary::after{left:8px;right:8px}
  #hb-header .hb-btn{height:42px;padding:0 12px;font-size:13.5px;gap:7px}
  #hb-header .hb-btn svg{width:15px;height:15px}
  #hb-header .hb-btn .hb-coin{width:22px;height:22px}
  #hb-header .hb-btn .hb-coin svg{width:12.5px;height:12.5px}
  #hb-header .hb-btn .hb-orn--diamond{width:18px!important;height:18px!important}
  .hb-cta{gap:6px}
  .hb-bar{gap:14px}
}
/* narrow slice — App button condenses to its icon; text returns at 1440 */
@media (min-width:1360px) and (max-width:1439px){
  #hb-header .hb-btn-bronze span:not(.hb-coin){display:none}
  #hb-header .hb-btn-bronze{width:42px;padding:0}
}

/* ── FIX · header clipped between 1281px and 1580px ────────────────
   The horizontal nav appeared at 1360px but the full bar (brand + nav +
   3 CTAs + 2 icon buttons) did not fit until ~1580px, so the right-hand
   controls were cut off the viewport on most laptop widths.
   The App button now stays icon-only, and nav/CTA spacing tightens,
   right up to 1579px. Nothing is hidden — everything fits. */
@media (min-width:1360px) and (max-width:1599px){
  #hb-header .hb-btn-bronze span:not(.hb-coin), #hb-header .hb-btn--bronze span:not(.hb-coin),
  #hb-header .pg-app span:not(.hb-coin){display:none}
  #hb-header .hb-btn-bronze, #hb-header .hb-btn--bronze{width:42px;padding:0;justify-content:center}
  .hb-nav{gap:0}
  .hb-nav>a,.hb-nav .nav-dd>summary{padding:11px 6px;font-size:13px}
  .hb-nav>a::after,.hb-nav .nav-dd>summary::after{left:6px;right:6px}
  #hb-header .hb-btn{height:40px;padding:0 10px;font-size:13px;gap:6px}
  .hb-cta{gap:5px}
  .hb-bar{gap:10px}
}

/* ── FIX · two remaining pinch points ──
   1024–1100px: three full CTAs + burger overflow. App button condenses.
   ≤380px: brand name + three icon buttons overflow. Icons shrink. */
@media (min-width:1024px) and (max-width:1140px){
  #hb-header .hb-btn-bronze span:not(.hb-coin), #hb-header .hb-btn--bronze span:not(.hb-coin),
  #hb-header .pg-app span:not(.hb-coin){display:none}
  #hb-header .hb-btn-bronze, #hb-header .hb-btn--bronze{width:42px;padding:0;justify-content:center}
  #hb-header .hb-btn{padding:0 12px;font-size:13.2px}
  .hb-bar{gap:10px}
}
@media (max-width:399px){
  .hb-icnbtn,.hb-burger{width:38px;height:38px}
  .hb-bar{gap:6px}
  .hb-brand-name{font-size:14.5px}
}
@media (max-width:340px){
  .hb-icn-wa{display:none}          /* WhatsApp also reachable in the drawer */
  .hb-brand-name{font-size:13.5px}
  .hb-icnbtn,.hb-burger{width:36px;height:36px}
}
@media (max-width:330px){.hb-brand-tag,.hb-icn-call{display:none}.hb-brand-name{font-size:12.5px}}

@media (max-width: 992px) {
    .hb-btn {
        display: none !important; 
    }
    .hb-icnbtn {
        display: none !important;
    }
    .hb-burger {
        display: flex !important; 
    }
}