@charset "UTF-8";

/* ============================================================
   Saigon Light — Recruitment page
   Cinematic dark wine + gold on cream surface
   ============================================================ */

.recruit-benefits .section-title em,
.recruit-positions .section-title em,
.recruit-process .section-title em,
.recruit-faq .section-title em,
.recruit-cta .cta-banner-title em{
  background:linear-gradient(135deg, #7A5A12 0%, #A87E2A 35%, #C99838 50%, #A87E2A 65%, #7A5A12 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.recruit-benefits .section-eyebrow,
.recruit-positions .section-eyebrow,
.recruit-process .section-eyebrow,
.recruit-faq .section-eyebrow{
  margin-bottom:18px;
}

/* Shared dark panel */
.recruit-panel{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(232,196,101,.22);
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(232,196,101,.12) 0%, transparent 68%),
    linear-gradient(180deg, #2A0A0C 0%, #160808 58%, #120606 100%);
  isolation:isolate;
}

/* ============ 01 — BENEFITS ============ */
.recruit-benefits .benefits-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(16px, 1.6vw, 22px);
}
.recruit-benefits .benefit-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:220px;
  padding:clamp(24px, 2.4vw, 32px) clamp(20px, 2vw, 26px);
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(232,196,101,.22);
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(232,196,101,.12) 0%, transparent 68%),
    linear-gradient(180deg, #2A0A0C 0%, #160808 58%, #120606 100%);
  transition:border-color .35s var(--ease);
}
.recruit-benefits .benefit-card::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:38%;
  background:linear-gradient(180deg, transparent 0%, rgba(14,6,6,.28) 100%);
  pointer-events:none;
}
.recruit-benefits .benefit-card:hover{
  border-color:rgba(232,196,101,.42);
}
.recruit-benefits .benefit-num{
  position:relative;
  z-index:1;
  font:500 clamp(28px, 2.4vw, 36px)/1 var(--font-display);
  letter-spacing:.06em;
  background:linear-gradient(135deg, #C99838 0%, #E8C465 50%, #A87E2A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.recruit-benefits .benefit-title{
  position:relative;
  z-index:1;
  margin:0;
  font:600 clamp(16px, 1.2vw, 19px)/1.3 var(--font-display);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#F7F1E8;
}
.recruit-benefits .benefit-desc{
  position:relative;
  z-index:1;
  margin:0;
  font:300 14px/1.65 var(--font-body);
  color:rgba(247,241,232,.72);
}

/* ============ 02 — POSITIONS BOARD ============ */
.recruit-positions{
  padding-top:clamp(8px, 1.2vw, 16px);
}
.recruit-positions .recruit-board{
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
}
.recruit-positions .recruit-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 12px;
  margin:0 0 clamp(18px, 2vw, 24px);
  padding:0 0 16px;
  border-bottom:1px solid rgba(42,10,12,.08);
}
.recruit-positions .recruit-search{
  position:relative;
  flex:1 1 200px;
  min-width:min(100%, 200px);
}
.recruit-positions .recruit-search::before{
  content:'⌕';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:15px;
  color:rgba(42,10,12,.45);
  pointer-events:none;
}
.recruit-positions .recruit-search input[type="search"]{
  width:100%;
  padding:9px 14px 9px 34px;
  font:400 13px/1.4 var(--font-body);
  color:#2A0A0C;
  background:var(--surface-glass-input);
  border:1px solid var(--surface-glass-border);
  border-radius:999px;
  outline:none;
  transition:border-color .25s ease, background .25s ease;
}
.recruit-positions .recruit-search input[type="search"]::placeholder{
  color:rgba(42,10,12,.42);
}
.recruit-positions .recruit-search input[type="search"]:focus{
  border-color:var(--surface-glass-border-hover);
  background:var(--surface-glass-input-focus);
}
.recruit-positions .recruit-filter-select{
  appearance:none;
  -webkit-appearance:none;
  flex:0 1 148px;
  min-width:132px;
  padding:9px 32px 9px 12px;
  font:500 12px/1.3 var(--font-body);
  color:#2A0A0C;
  background:
    var(--surface-glass-input)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238B6914' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  border:1px solid var(--surface-glass-border);
  border-radius:999px;
  outline:none;
  cursor:pointer;
  transition:border-color .25s ease, background-color .25s ease;
}
.recruit-positions .recruit-filter-select:hover,
.recruit-positions .recruit-filter-select:focus{
  border-color:var(--surface-glass-border-hover);
  background-color:var(--surface-glass-input-focus);
}
.recruit-positions .screen-reader-text{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ============ 03 — JOB CARDS ============ */
.recruit-positions .recruit-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 1.4vw, 18px);
}
.recruit-positions .recruit-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:100%;
  padding:clamp(20px, 1.8vw, 24px);
  border-radius:16px;
  border:1px solid var(--surface-glass-border);
  background:var(--surface-glass);
  transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease);
}
.recruit-positions .recruit-card:hover{
  border-color:var(--surface-glass-border-hover);
  background:var(--surface-glass-hover);
}
.recruit-positions .recruit-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.recruit-positions .recruit-dept{
  font:600 9px/1.15 var(--font-mono);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#8B6914;
}
.recruit-positions .recruit-card-arrow{
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(232,196,101,.35);
  color:var(--gold);
  display:grid;
  place-items:center;
  text-decoration:none;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.recruit-positions .recruit-card-arrow::before{
  content:'';
  width:7px;
  height:7px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(45deg) translate(-1px, 1px);
}
.recruit-positions .recruit-card:hover .recruit-card-arrow{
  background:var(--gold);
  border-color:var(--gold);
  color:#2A0A0C;
}
.recruit-positions .recruit-title{
  margin:0;
  font:500 clamp(19px, 1.5vw, 22px)/1.25 var(--font-display);
  letter-spacing:.01em;
  color:#2A0A0C;
}
.recruit-positions .recruit-title a{
  color:inherit;
  text-decoration:none;
  transition:color .25s ease;
}
.recruit-positions .recruit-card:hover .recruit-title a{
  color:#5A0E10;
}
.recruit-positions .recruit-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.recruit-positions .recruit-tag{
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--surface-glass-border);
  background:var(--surface-glass-input);
  font:400 12px/1.3 var(--font-body);
  color:rgba(42,10,12,.78);
}
.recruit-positions .recruit-deadline{
  margin:0;
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(42,10,12,.06);
  font:400 12px/1.4 var(--font-body);
  color:rgba(42,10,12,.52);
}
.recruit-positions .recruit-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:clamp(36px, 4vw, 52px) 16px;
  font:300 15px/1.6 var(--font-body);
  color:rgba(42,10,12,.58);
}
.recruit-positions .recruit-card.is-hidden,
.recruit-card[hidden]{
  display:none !important;
}

/* ============ 04 — PROCESS ============ */
.recruit-process .recruit-timeline-wrap{
  padding:clamp(28px, 3vw, 40px);
  border-radius:20px;
  border:1px solid rgba(232,196,101,.22);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,196,101,.1) 0%, transparent 62%),
    linear-gradient(180deg, #2A0A0C 0%, #160808 58%, #120606 100%);
}
.recruit-process .recruit-timeline{
  position:relative;
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
}
.recruit-process .recruit-timeline::before{
  content:'';
  position:absolute;
  top:32px;
  left:6%;
  right:6%;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, rgba(232,196,101,.55) 15%, rgba(232,196,101,.55) 85%, transparent 100%);
  z-index:0;
}
.recruit-process .timeline-step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:0 4px;
}
.recruit-process .step-num{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin-bottom:10px;
  border-radius:50%;
  border:1px solid rgba(232,196,101,.45);
  background:rgba(14,6,6,.55);
  font:500 22px/1 var(--font-display);
  letter-spacing:.02em;
  color:var(--gold);
}
.recruit-process .step-title{
  margin:0;
  font:600 clamp(16px, 1.2vw, 18px)/1.3 var(--font-display);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#F7F1E8;
}
.recruit-process .step-desc{
  margin:0;
  max-width:30ch;
  font:300 14px/1.65 var(--font-body);
  color:rgba(247,241,232,.72);
}

/* ============ 05 — FAQ ============ */
.recruit-faq .faq-accordion{
  margin:0 auto;
  padding:0;
  max-width:860px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.recruit-faq .faq-item{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(232,196,101,.22);
  background:
    linear-gradient(180deg, rgba(22,8,8,.96) 0%, rgba(14,6,6,.98) 100%);
  transition:border-color .35s var(--ease);
}
.recruit-faq .faq-item:hover{
  border-color:rgba(232,196,101,.38);
}
.recruit-faq .faq-item[open]{
  border-color:rgba(232,196,101,.48);
}
.recruit-faq .faq-q{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:20px 64px 20px 26px;
  font:500 17px/1.45 var(--font-display);
  color:#F7F1E8;
  letter-spacing:.005em;
  outline:none;
  transition:color .25s ease;
}
.recruit-faq .faq-q::-webkit-details-marker{ display:none; }
.recruit-faq .faq-q::marker{ content:''; }
.recruit-faq .faq-q::after{
  content:'+';
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(232,196,101,.12);
  border:1px solid rgba(232,196,101,.35);
  color:var(--gold);
  font:500 20px/1 var(--font-display);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.recruit-faq .faq-item[open] .faq-q::after{
  content:'\2212';
  background:linear-gradient(135deg, #C99838, #7A5A12);
  color:#F7F1E8;
  border-color:transparent;
}
.recruit-faq .faq-q:hover{ color:var(--gold); }
.recruit-faq .faq-a{
  padding:0 26px 22px;
  font:300 15px/1.7 var(--font-body);
  color:rgba(247,241,232,.78);
  animation:recruitFaqReveal .45s var(--ease) both;
}
.recruit-faq .faq-a p{ margin:0 0 12px; }
.recruit-faq .faq-a p:last-child{ margin-bottom:0; }
@keyframes recruitFaqReveal{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:none; }
}

/* ============ 06 — CTA BANNER ============ */
.recruit-cta{
  padding:0 5vw clamp(56px, 7vw, 96px);
}
.recruit-cta .section-inner{
  position:relative;
  padding:clamp(44px, 5.5vw, 80px) clamp(28px, 5vw, 72px);
  background:#160808;
  border-radius:20px;
  overflow:hidden;
  isolation:isolate;
}
.recruit-cta-panel--has-bg{ background:transparent; }
.recruit-cta-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.recruit-cta-shade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(18,6,6,.52) 0%, rgba(14,6,6,.74) 48%, rgba(10,4,4,.88) 100%),
    radial-gradient(70% 90% at 100% 0%, rgba(139,26,31,.35), transparent 62%),
    radial-gradient(70% 90% at 0% 100%, rgba(232,196,101,.12), transparent 58%);
  pointer-events:none;
}
.recruit-cta .section-inner::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(232,196,101,.14), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(139,26,31,.28), transparent 60%);
  pointer-events:none;
}
.recruit-cta .recruit-cta-inner{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
  color:#F7F1E8;
}
.recruit-cta .cta-banner-title{
  margin:0;
  max-width:22ch;
  font:500 clamp(30px, 4.2vw, 56px)/1.18 var(--font-display);
  letter-spacing:-.005em;
  color:#F7F1E8;
}
.recruit-cta .cta-banner-title em{
  font-weight:400;
  background:var(--gold-shine);
  background-size:200% 200%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:goldShimmer 6s linear infinite;
}
.recruit-cta .cta-banner-sub{
  margin:0;
  max-width:54ch;
  font:300 16px/1.7 var(--font-body);
  color:rgba(247,241,232,.78);
}
.recruit-cta .btn-gold{ margin-top:10px; }

/* ============ SINGLE JOB DETAIL ============ */
.recruit-detail .section-inner{
  display:grid;
  grid-template-columns:minmax(260px, 320px) 1fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:start;
}
.recruit-detail .recruit-meta-card{
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:clamp(24px, 2.4vw, 30px);
  border-radius:20px;
  border:1px solid rgba(232,196,101,.22);
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(232,196,101,.12) 0%, transparent 68%),
    linear-gradient(180deg, #2A0A0C 0%, #160808 58%, #120606 100%);
}
.recruit-detail .recruit-meta-card .row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid rgba(232,196,101,.16);
}
.recruit-detail .recruit-meta-card .row:last-of-type{
  border-bottom:none;
  margin-bottom:18px;
}
.recruit-detail .recruit-meta-card .k{
  font:600 10px/1.2 var(--font-mono);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(247,241,232,.5);
}
.recruit-detail .recruit-meta-card .v{
  font:500 14px/1.35 var(--font-body);
  color:rgba(247,241,232,.9);
  text-align:right;
}
.recruit-detail .recruit-apply{
  width:100%;
  justify-content:center;
}
.recruit-detail .article-body{
  padding:clamp(24px, 3vw, 36px);
  border-radius:20px;
  border:1px solid var(--surface-glass-border);
  background:var(--surface-glass);
  font:300 16px/1.75 var(--font-body);
  color:rgba(42,10,12,.86);
}
.recruit-detail .article-body h2,
.recruit-detail .article-body h3{
  font-family:var(--font-display);
  color:#2A0A0C;
  margin:1.6em 0 .6em;
}
.recruit-detail .article-body h2:first-child,
.recruit-detail .article-body h3:first-child{
  margin-top:0;
}
.recruit-detail .article-body ul,
.recruit-detail .article-body ol{
  padding-left:1.2em;
  margin:0 0 1em;
}
.recruit-detail .article-body li{ margin-bottom:.45em; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .recruit-benefits .benefits-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .recruit-positions .recruit-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .recruit-positions .recruit-filter-select{
    width:100%;
    flex:1 1 auto;
  }
  .recruit-process .recruit-timeline{
    grid-template-columns:1fr;
    gap:28px;
  }
  .recruit-process .recruit-timeline::before{
    top:0;
    bottom:0;
    left:32px;
    right:auto;
    width:1px;
    height:auto;
    background:linear-gradient(180deg, transparent 0%, rgba(232,196,101,.55) 8%, rgba(232,196,101,.55) 92%, transparent 100%);
  }
  .recruit-process .timeline-step{
    flex-direction:row;
    align-items:flex-start;
    gap:20px;
  }
  .recruit-process .step-num{
    flex-shrink:0;
    width:56px;
    height:56px;
    font-size:20px;
  }
  .recruit-process .step-desc{ max-width:none; }
  .recruit-detail .section-inner{ grid-template-columns:1fr; }
  .recruit-detail .recruit-meta-card{ position:static; }
}
@media (max-width: 600px){
  .recruit-benefits .benefits-grid{ grid-template-columns:1fr; }
  .recruit-positions .recruit-grid{ grid-template-columns:1fr; }
  .recruit-faq .faq-q{ font-size:15px; padding:18px 56px 18px 20px; }
  .recruit-faq .faq-q::after{ right:16px; width:26px; height:26px; font-size:16px; }
  .recruit-faq .faq-a{ padding:0 20px 20px; font-size:14px; }
  .recruit-cta .section-inner{ padding:50px 24px; border-radius:16px; }
  .recruit-cta .cta-banner-title{ font-size:28px; }
}