:root { --app-header-height:56px; }
#app-header-root { position:sticky; z-index:50; top:0; min-height:var(--app-header-height); }
.app-header { min-width:320px; height:var(--app-header-height); border-bottom:1px solid rgba(255,255,255,.58); background:rgba(255,255,255,.76); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
.app-header__inner { display:grid; width:min(100%,920px); height:100%; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; margin:0 auto; padding:0 20px; }
.app-header__brand,.app-header__recruiter,.app-header__actions,.app-header__contact-cta { display:flex; min-width:0; align-items:center; }
.app-header__brand { gap:8px; color:var(--text-primary); }
.app-header__logo { display:block; width:22px; height:22px; flex:0 0 22px; }
.app-header__brand-name { overflow:hidden; font-size:14px; font-weight:600; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.app-header__recruiter { gap:6px; padding:8px 0 8px 8px; color:#36363a; font-size:13px; font-weight:500; line-height:1.2; text-decoration:none; white-space:nowrap; }
.app-header__recruiter:active { opacity:.72; }
.app-header__recruiter:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:8px; }
.app-header__status-dot { position:relative; display:block; width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--vacancy-green); }
.app-header__status-dot::after { position:absolute; inset:-7px; border-radius:inherit; background:rgba(67,160,71,.32); content:""; pointer-events:none; animation:app-header-status-pulse 2.4s ease-out infinite; }
@keyframes app-header-status-pulse { 0% { opacity:.52; transform:scale(.65); } 72%,100% { opacity:0; transform:scale(2.35); } }
@media (max-width:350px) { .app-header__inner { gap:8px; padding-right:16px; padding-left:16px; } .app-header__recruiter { padding-left:4px; } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .app-header { background:rgba(255,255,255,.96); } }
@media (prefers-reduced-motion:reduce) { .app-header__status-dot::after { animation:none; opacity:.22; transform:scale(1); } }
body.is-form-screen #app-header-root { display:none; }
.app-header__actions{gap:8px}.app-header__contact-cta{min-height:36px;gap:7px;padding:0 10px;border:1px solid rgba(249,115,22,.34);border-radius:999px;background:rgba(255,250,245,.84);color:#252528;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}.app-header__menu-toggle,.app-header-menu__close{display:grid;width:40px;height:40px;place-items:center;padding:0;border:1px solid rgba(0,0,0,.09);border-radius:13px;background:#fff;color:#27272a}.app-header__menu-toggle svg,.app-header-menu__close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8}.app-header-menu[hidden]{display:none}.app-header-menu{position:fixed;z-index:90;inset:0}.app-header-menu__overlay{position:absolute;inset:0;width:100%;border:0;background:rgba(25,20,17,.28)}.app-header-menu__drawer{position:absolute;top:10px;right:10px;bottom:10px;display:flex;width:min(420px,88vw);flex-direction:column;overflow:auto;padding:24px;border:1px solid rgba(255,255,255,.72);border-radius:24px;background:#fff;box-shadow:-12px 16px 42px rgba(31,24,19,.19);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.app-header-menu__top{display:flex;align-items:center;justify-content:space-between}.app-header-menu__top h2{margin:0;font-size:24px}.app-header-menu__nav{display:grid;gap:10px;margin-top:26px}.app-header-menu__nav a{display:grid;min-height:72px;grid-template-columns:42px 1fr 30px;align-items:center;gap:13px;padding:13px;border:1px solid rgba(0,0,0,.09);border-radius:19px;background:#fff;color:var(--text-primary);text-decoration:none;font-size:17px;font-weight:600}.app-header-menu__nav-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:rgba(249,115,22,.1);color:var(--orange)}.app-header-menu__nav b{color:var(--orange);font-size:30px;font-weight:400;text-align:center}.app-header-menu__social{margin-top:auto;padding-top:32px}.app-header-menu__social h3{margin:0 0 15px;color:var(--text-secondary);font-size:14px}.app-header-menu__social-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.app-header-menu__social-grid a{display:grid;justify-items:center;gap:7px;color:var(--text-secondary);font-size:11px;text-decoration:none}.app-header-menu__social-grid a span{display:grid;width:46px;height:46px;place-items:center;border:1px solid rgba(0,0,0,.07);border-radius:15px;background:#fff;font-size:0}.app-header-menu__social-grid a span:before{content:none}.app-header-menu__social-grid img{display:block;width:24px;height:24px;object-fit:contain}body.is-header-menu-open{overflow:hidden;touch-action:none}@media(max-width:350px){.app-header__inner{gap:7px;padding:0 12px}.app-header__actions{gap:6px}.app-header__contact-cta{padding-inline:8px;font-size:12px}.app-header-menu__drawer{width:90vw;right:5vw}.app-header-menu__social-grid{grid-template-columns:repeat(2,1fr)}}

/* Header-burger-menu UI refinement: drawer stays above the fixed bottom navigation. */
.app-header__menu-toggle,.app-header-menu__close{border:0;border-radius:0;background:transparent;box-shadow:none}
.app-header__menu-toggle:focus-visible,.app-header-menu__close:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:8px}
.app-header-menu__drawer{bottom:calc(10px + var(--bottom-nav-total-height));padding-bottom:20px}
.app-header-menu__nav{gap:0;margin-top:20px;border-top:1px solid rgba(0,0,0,.09)}
.app-header-menu__nav a{min-height:58px;grid-template-columns:minmax(0,1fr) 22px;gap:10px;padding:12px 2px;border:0;border-bottom:1px solid rgba(0,0,0,.09);border-radius:0;background:transparent;font-size:16px}
.app-header-menu__nav b{width:22px;font-size:23px}
.app-header-menu__social{flex:0 0 auto;padding-top:28px;padding-bottom:8px}

/* Reuse the compact contact-icon visual pattern for burger-menu social links. */
.app-header-menu__social-grid a span{border:0;color:#f97316;background:rgba(249,115,22,.1)}
.app-header-menu__social-grid a svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-header-menu__social-grid a:nth-child(1) span{color:#1877F2;background:rgba(24,119,242,.1)}
.app-header-menu__social-grid a:nth-child(1) path{fill:currentColor;stroke:none}
.app-header-menu__social-grid a:nth-child(2) span{color:#D62976;background:rgba(214,41,118,.1)}
.app-header-menu__social-grid a:nth-child(3) span{color:#7360F2;background:rgba(115,96,242,.12)}
.app-header-menu__social-grid a:nth-child(4) span{color:#229ED9;background:rgba(34,158,217,.12)}

/* Align the visible burger lines with the logo's outer inset without moving its touch target. */
.app-header__menu-toggle svg{transform:translateX(5px)}

/* Mobile burger menu motion: only compositor-friendly opacity and transform. */
@media (max-width:699px){
  .app-header-menu.is-menu-opening-start .app-header-menu__overlay{opacity:0;transition:none}
  .app-header-menu.is-menu-opening-start .app-header-menu__drawer{opacity:0;transform:translateY(-10px);transition:none}
  .app-header-menu.is-menu-opening .app-header-menu__overlay{opacity:1;transition:opacity 180ms ease-out}
  .app-header-menu.is-menu-opening .app-header-menu__drawer{opacity:1;transform:translateY(0);transition:opacity 220ms cubic-bezier(.22,.75,.28,1),transform 220ms cubic-bezier(.22,.75,.28,1)}
  .app-header-menu.is-menu-closing{pointer-events:none}
  .app-header-menu.is-menu-closing .app-header-menu__overlay{opacity:0;transition:opacity 160ms ease-in}
  .app-header-menu.is-menu-closing .app-header-menu__drawer{opacity:0;transform:translateY(-6px);transition:opacity 160ms ease-in,transform 160ms ease-in}
  .app-header-menu.is-menu-animating .app-header-menu__overlay,.app-header-menu.is-menu-animating .app-header-menu__drawer{will-change:opacity,transform}
}