/* BOOTIES Recruitment visual lock — approved master mockup */
.hero-image:not(.has-image){
  background-image:none!important;
  background-color:#06182c!important;
}
.job-image:not(.has-image){
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
}
.job:nth-child(1) .job-image:not(.has-image){background-image:url('./assets/bartender.webp?v=1')!important}
.job:nth-child(2) .job-image:not(.has-image){background-image:url('./assets/hostess.webp?v=1')!important}
.job:nth-child(3) .job-image:not(.has-image){background-image:url('./assets/cashier.webp?v=1')!important}
.job:nth-child(4) .job-image:not(.has-image){background-image:url('./assets/runner.webp?v=1')!important}
.job:nth-child(5) .job-image:not(.has-image){background-image:url('./assets/dishwasher.webp?v=1')!important}
.why-image:not(.has-image){
  background-image:url('./assets/why-booties.jpg?v=1')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
}
.cta-image:not(.has-image){
  background-image:url('./assets/cta-photo.jpg?v=1')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-position:center!important;
}
.brand-panel{
  position:relative;min-height:354px;overflow:hidden;display:grid;place-items:center;
  background:
    radial-gradient(circle at 80% 25%,rgba(11,140,255,.10),transparent 38%),
    linear-gradient(135deg,#f8fbfe 0%,#fff 58%,#eef7ff 100%)!important;
  border:1px solid #e7eef5;
}
.brand-panel:before{content:"";position:absolute;inset:-20% -10%;background:linear-gradient(115deg,transparent 0 55%,rgba(11,140,255,.045) 55% 66%,transparent 66%);pointer-events:none}
.brand-panel-copy{position:relative;z-index:2;text-align:center;padding:28px;display:grid;gap:18px}
.brand-panel-copy strong{display:block;max-width:360px;font-family:"Segoe Script","Brush Script MT",cursive;font-size:44px;line-height:1.08;font-weight:600;color:#153d91;transform:rotate(-6deg)}
.brand-panel-copy span{font-size:10px;font-weight:900;letter-spacing:.18em;color:#9aabba}
.brand-panel.has-image{background-color:#f8fbfe!important;background-position:center!important;background-size:cover!important}
.brand-panel.has-image .brand-panel-copy{background:rgba(255,255,255,.76);border-radius:12px;backdrop-filter:blur(5px)}
.empty{grid-column:1/-1;padding:42px;text-align:center;color:#7b8797;border:1px solid #e4ebf2;border-radius:12px;background:#f8fbfe}
.footer-social a[hidden]{display:none!important}
@media(max-width:760px){.brand-panel{min-height:260px}.brand-panel-copy strong{font-size:38px}}

/* v29 — mobile-first recruitment polish, based on real device screenshot */
@media(max-width:760px){
  html,body{overflow-x:hidden}
  body{background:#fff}
  .page-shell{
    width:100%;
    margin:0;
    box-shadow:none;
  }

  .topbar{
    height:72px;
    padding:0 16px;
  }
  .brand img{width:148px}
  .top-actions{gap:10px}
  .lang-switch{padding:2px}
  .lang-switch button{
    min-width:38px;
    min-height:34px;
    padding:6px 9px;
    font-size:11px;
  }
  .menu-btn{
    width:38px;
    height:38px;
  }

  .hero{padding-bottom:28px}
  .hero-grid{
    min-height:560px;
    border-radius:0;
  }
  .hero-image{
    background-position:62% center!important;
  }
  .hero-copy{
    min-height:560px;
    width:100%;
    padding:44px 18px 24px;
    justify-content:flex-end;
  }
  .hero-copy:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(
      0deg,
      rgba(3,17,32,.56) 0%,
      rgba(3,17,32,.28) 38%,
      rgba(3,17,32,.10) 68%,
      rgba(3,17,32,0) 100%
    );
    pointer-events:none;
  }
  .hero .eyebrow,.hero-eyebrow{
    font-size:11px;
    letter-spacing:.12em;
    margin-bottom:12px;
  }
  .hero h1{
    max-width:310px;
    font-size:40px;
    line-height:.94;
    letter-spacing:-.035em;
  }
  .hero p{
    max-width:310px;
    margin-top:14px;
    font-size:15px;
    line-height:1.5;
  }
  .hero-actions{
    width:min(100%,310px);
    margin-top:18px;
    gap:9px;
  }
  .hero-actions .btn{
    min-height:54px;
    font-size:14px;
    border-radius:10px;
  }
  #heroMessenger .messenger-icon{
    width:30px;
    height:30px;
  }

  .highlight-strip{
    margin:-20px 12px 0;
    padding:4px 14px;
    border-radius:15px;
  }
  .highlight-card{
    min-height:82px;
    padding:10px 4px;
    gap:14px;
  }
  .icon-circle{
    flex:0 0 48px;
    width:48px;
    height:48px;
  }
  .icon-circle svg{
    width:32px;
    height:32px;
  }
  .highlight-card b{font-size:16px}
  .highlight-card strong{font-size:14px}
  .highlight-card small{
    font-size:12px;
    line-height:1.35;
    margin-top:3px;
  }

  .jobs-section{
    padding:42px 12px 10px;
  }
  .section-heading{
    padding:0 4px 20px;
  }
  .section-heading h2{
    font-size:36px;
    line-height:.98;
    letter-spacing:-.035em;
  }
  .section-heading p{
    margin-top:12px;
    font-size:14px;
    line-height:1.5;
  }

  .jobs-grid{gap:14px}
  .job{
    border-radius:14px;
  }
  .job-image{
    height:auto;
    aspect-ratio:16/9;
  }
  .job-content{
    padding:17px 15px 16px;
  }
  .job h3{
    font-size:27px;
    line-height:1.02;
    margin-bottom:5px;
  }
  .job .summary{
    font-size:14px;
    line-height:1.45;
  }
  .facts{
    gap:7px;
    margin:13px 0 13px;
  }
  .fact{
    min-height:62px;
    padding:9px 10px;
  }
  .fact small{
    font-size:10px;
    margin-bottom:4px;
  }
  .fact b{
    font-size:14px;
    line-height:1.3;
  }
  .req{
    margin:1px 0 16px;
    gap:7px;
    font-size:14px;
  }
  .req li{
    padding-left:31px;
    line-height:1.45;
  }
  .req li:before{
    width:19px;
    height:19px;
    top:.08em;
  }
  .apply{
    min-height:56px;
    font-size:14px;
    border-radius:9px;
  }
  .apply .messenger-icon{
    width:30px;
    height:30px;
  }
  .apply .messenger-icon svg{
    width:17px;
    height:17px;
  }

  .brand-panel{
    min-height:220px;
    border-radius:14px;
  }
  .brand-panel-copy{padding:22px}
  .brand-panel-copy strong{
    font-size:34px;
    max-width:290px;
  }
  .brand-panel-copy span{font-size:9px}

  .why-section{
    margin:14px 12px 0;
    border-radius:14px;
  }
  .why-image{
    min-height:250px;
  }
  .why-copy{
    padding:24px 18px 22px;
  }
  .why-copy h2{
    font-size:36px;
    line-height:.98;
  }
  .why-copy p{
    margin:11px 0 18px;
    font-size:15px;
    line-height:1.55;
  }
  .benefits{gap:13px}
  .benefits article{gap:12px}
  .benefits article>span{
    width:40px;
    height:40px;
  }
  .benefits b{font-size:15px}
  .benefits small{
    font-size:13px;
    line-height:1.4;
  }

  .cta-section{
    margin:14px 12px 0;
    min-height:286px;
    border-radius:14px;
  }
  .cta-copy{
    padding:24px 18px 92px;
  }
  .cta-copy h2{
    font-size:34px;
    line-height:1;
  }
  .cta-copy p{
    max-width:290px;
    font-size:14px;
    line-height:1.45;
  }
  .cta-button{
    left:18px;
    right:18px;
    bottom:18px;
    width:calc(100% - 36px);
    min-height:56px;
    font-size:14px;
  }

  .footer{
    padding:24px 18px 20px;
    gap:16px;
  }
  .footer-brand img{width:142px}
  .footer-location,.footer-social{
    font-size:12px;
  }
  .footer-bottom{
    padding-top:12px;
    font-size:10px;
  }
}

@media(max-width:380px){
  .topbar{padding:0 14px}
  .brand img{width:138px}
  .hero-copy{padding-left:16px;padding-right:16px}
  .hero h1{font-size:38px;max-width:286px}
  .hero p,.hero-actions{max-width:286px}
  .jobs-section{padding-left:10px;padding-right:10px}
  .job-content{padding-left:14px;padding-right:14px}
  .fact b{font-size:13px}
}


/* v30 — mobile card facts, custom benefit icons, full-bleed media + centered footer */
.benefit-icon svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.fact-line,.pay-main,.pay-detail{display:block}
.pay-main{
  font-weight:800;
  color:var(--ink);
}
.pay-detail{
  margin-top:4px;
  font-weight:600;
  color:#56677a;
  line-height:1.35;
}
.fact-pay{grid-column:1/-1}

@media(max-width:760px){
  .hero-image,.why-image,.cta-image{
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }
  .hero-image,.cta-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }

  .facts{
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }
  .fact{
    min-height:64px;
  }
  .fact-line+.fact-line{
    margin-top:3px;
  }
  .fact-pay{
    grid-column:1/-1;
    min-height:auto;
    padding:11px 12px 12px;
  }
  .fact-pay .pay-main{
    font-size:15px;
    line-height:1.3;
  }
  .fact-pay .pay-detail{
    font-size:13px;
    margin-top:5px;
  }

  .benefits article>span.benefit-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:linear-gradient(145deg,#f4f9ff,#eaf4ff);
    border:1px solid #d9eafd;
    color:#0b8cff;
    box-shadow:0 5px 12px rgba(11,140,255,.08);
  }
  .benefit-icon svg{
    width:22px;
    height:22px;
  }

  .footer{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .footer-brand{
    display:flex;
    justify-content:center;
    width:100%;
  }
  .footer-brand img{
    margin:0 auto;
  }
  .footer-location{
    justify-content:center;
    text-align:center;
    width:100%;
  }
  .footer-location>div{
    align-items:center;
    text-align:center;
  }
  .footer-social{
    justify-content:center;
    width:100%;
  }
  .footer-bottom{
    width:100%;
    text-align:center;
  }
}

@media(max-width:380px){
  .fact-pay .pay-main{font-size:14px}
  .fact-pay .pay-detail{font-size:12px}
}


/* v31 — mobile hero overlay conflict removal */
@media(max-width:760px){
  .hero-copy:before{
    content:none!important;
    display:none!important;
    background:none!important;
  }
}