/* ─────────────────────────────────────────────
   CAREERS PAGE CSS
   Brand: White · RTW Orange · Charcoal · Lato
───────────────────────────────────────────── */

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.65; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
input,select,textarea,button { font-family:inherit; }

/* ── Utilities ── */

.benefits-intro { color:var(--text-muted); max-width:720px; margin-bottom:2.5rem; font-size:0.95rem; line-height:1.8; }

/* ── Buttons ── */

/* ═══════════════════════════════
   NAV
═══════════════════════════════ */

/* Dropdown */

/* Burger — hidden desktop, flex on mobile */

/* ── Overlay ── */

/* ── Mobile Nav Drawer ── */

/* Header row inside drawer */

/* Links wrapper */

/* Plain links */

/* CTA link */

/* Accordion wrapper */

/* Accordion trigger */

/* Chevron */

/* Panel — JS sets maxHeight on open */

/* ═══ HERO BG ═══ */
.hero__bg { position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--bg); }
.orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:0.5; }
.orb--1 { width:700px; height:700px; background:radial-gradient(circle,rgba(231,92,35,0.18),transparent); top:-200px; right:-150px; animation:float1 9s ease-in-out infinite; }
.orb--2 { width:450px; height:450px; background:radial-gradient(circle,rgba(231,92,35,0.1),transparent); bottom:5%; left:-120px; animation:float2 11s ease-in-out infinite; }
.orb--3 { width:280px; height:280px; background:radial-gradient(circle,rgba(255,180,140,0.2),transparent); top:45%; right:28%; animation:float1 13s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,-40px)} }
@keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,30px)} }
.grid-overlay {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(0,0,0,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,0.04) 1px,transparent 1px);
  background-size:60px 60px;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.4)} }

/* ═══ PAGE HERO ═══ */
.page-hero { padding:9rem 0 5rem; position:relative; overflow:hidden; }
.page-hero__inner {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; align-items:center; margin-bottom:4rem;
}
.breadcrumb {
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.8rem; color:var(--text-muted); margin-bottom:1.5rem;
}
.breadcrumb a { color:var(--orange); }
.hero__badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:var(--orange-pale); border:1px solid rgba(231,92,35,0.25);
  border-radius:50px; padding:0.4rem 1rem;
  font-size:0.8rem; font-weight:600; color:var(--orange);
  margin-bottom:1.5rem; animation:fadeUp 0.7s ease both;
}
.badge__dot { width:7px; height:7px; background:var(--orange); border-radius:50%; animation:pulse 2s infinite; }
.page-hero__title {
  font-family:var(--font-display);
  font-size:clamp(2.8rem,5.5vw,4.5rem);
  font-weight:900; line-height:1.05;
  letter-spacing:-0.02em; color:var(--charcoal);
  margin-bottom:1.25rem; animation:fadeUp 0.7s 0.1s ease both;
}
.page-hero__title em {
  font-style:normal;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.page-hero__sub { font-size:1.05rem; color:var(--text-muted); margin-bottom:2rem; max-width:480px; line-height:1.75; animation:fadeUp 0.7s 0.2s ease both; }
.page-hero__cta { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; animation:fadeUp 0.7s 0.3s ease both; }
.hero__social-proof { display:flex; align-items:center; gap:0.75rem; font-size:0.875rem; color:var(--text-muted); animation:fadeUp 0.7s 0.4s ease both; }
.hero__social-proof .stars { color:#F59E0B; font-size:1rem; }
.divider { opacity:0.4; }
@media (max-width: 768px) {
  .page-hero__title {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5.5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--charcoal);
    margin-bottom: 1.25rem;
    animation: fadeUp 0.7s 0.1s ease both;
    text-align: center;
  }
  .page-hero__sub { 
    font-size:1.05rem;
     color:var(--text-muted); 
     margin-bottom:2rem; 
     max-width:480px; line-height:1.75;
      animation:fadeUp 0.7s 0.2s ease both; 
      text-align: center;
  }
}
/* ── Culture card (hero right) ── */
.hero__culture-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem;
  box-shadow:var(--shadow-md);
  animation:fadeUp 0.7s 0.3s ease both;
  position:relative; overflow:hidden;
}
.hero__culture-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
}
.culture-card__badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:var(--orange-pale); border:1px solid rgba(231,92,35,0.2);
  border-radius:50px; padding:0.35rem 0.9rem;
  font-size:0.78rem; font-weight:700; color:var(--orange);
  margin-bottom:1.25rem; letter-spacing:0.04em;
}
.culture-card__quote {
  font-size:1.05rem; font-weight:700; color:var(--charcoal);
  line-height:1.5; margin-bottom:1rem;
  border-left:3px solid var(--orange); padding-left:1rem;
  font-style:normal;
}
.culture-card__body { font-size:0.88rem; color:var(--text-muted); line-height:1.7; margin-bottom:1.75rem; }
.culture-card__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.culture-stat { text-align:center; }
.culture-stat__num {
  display:block; font-family:var(--font-display);
  font-size:1.8rem; font-weight:900; color:var(--orange); line-height:1;
}
.culture-stat__num sup { font-size:1rem; }
.culture-stat__label { display:block; font-size:0.72rem; color:var(--text-muted); margin-top:0.3rem; }

/* ═══ WHY JOIN ═══ */
.why-join { padding:1rem 0; background:var(--bg2); }
.focus-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.focus-content p { color:var(--text-muted); font-size:0.95rem; line-height:1.8; }
.focus-checklist { display:flex; flex-direction:column; gap:1.25rem; }
.check-item {
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.25rem; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); transition:all var(--trans);
}
.check-item:hover { border-color:rgba(231,92,35,0.3); transform:translateX(4px); box-shadow:var(--shadow-orange); }
.check-icon {
  width:32px; height:32px; flex-shrink:0;
  background:var(--orange-pale); border:1.5px solid rgba(231,92,35,0.3);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--orange); font-weight:700; font-size:0.9rem;
}
.check-item strong { display:block; font-size:0.95rem; font-weight:700; color:var(--charcoal); margin-bottom:0.25rem; }
.check-item p { font-size:0.85rem; color:var(--text-muted); }

/* ═══ BENEFITS ═══ */
.benefits-section { padding:1rem 0; background:var(--bg); }
.benefits-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.benefit-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2rem 1.75rem;
  box-shadow:var(--shadow); transition:all var(--trans);
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(20px);
}
.benefit-card.visible {
  opacity:1; transform:translateY(0);
  transition:opacity 0.5s ease, transform 0.5s ease, border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
.benefit-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
  transform:scaleX(0); transform-origin:left; transition:transform var(--trans);
}
.benefit-card:hover::before { transform:scaleX(1); }
.benefit-card:hover { border-color:rgba(231,92,35,0.25); transform:translateY(-6px); box-shadow:var(--shadow-orange); }
.benefit-card__icon { font-size:2rem; margin-bottom:1rem; }
.benefit-card h3 { font-family:var(--font-display); font-size:1rem; font-weight:700; color:var(--charcoal); margin-bottom:0.6rem; }
.benefit-card p { font-size:0.875rem; color:var(--text-muted); line-height:1.65; }

/* ═══ OPEN POSITIONS ═══ */
.positions-section { padding:1rem 0; background:var(--bg2); }

.positions-filter {
  display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:2.5rem;
}
.filter-btn {
  padding:0.5rem 1.1rem; border-radius:50px;
  font-family:var(--font-display); font-size:0.85rem; font-weight:600;
  background:var(--white); border:1.5px solid var(--border);
  color:var(--text-muted); cursor:pointer; transition:all var(--trans);
}
.filter-btn:hover { border-color:var(--orange); color:var(--orange); }
.filter-btn--active { background:var(--orange); border-color:var(--orange); color:var(--white); }
.filter-btn--active:hover { background:var(--orange-dark); border-color:var(--orange-dark); color:var(--white); }

.positions-list { display:flex; flex-direction:column; gap:1rem; }

.position-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.75rem 2rem;
  display:flex; justify-content:space-between; align-items:center;
  gap:2rem; box-shadow:var(--shadow);
  transition:all var(--trans);
}
.position-card:hover { border-color:rgba(231,92,35,0.3); transform:translateX(4px); box-shadow:var(--shadow-orange); }
.position-card.hidden { display:none; }

.position-card__dept {
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--orange); margin-bottom:0.4rem;
  background:var(--orange-pale);
  border:1px solid rgba(231,92,35,0.2);
  border-radius:50px; padding:2px 10px;
  display:inline-block;
}
.position-card__title {
  font-family:var(--font-display); font-size:1.05rem; font-weight:700;
  color:var(--charcoal); margin-bottom:0.6rem;
}
.position-card__meta {
  display:flex; flex-wrap:wrap; gap:1rem;
  font-size:0.82rem; color:var(--text-muted);
}
.position-card__right { flex-shrink:0; }

.positions-empty {
  text-align:center; padding:3rem 2rem;
  background:var(--white); border:1px dashed var(--border);
  border-radius:var(--radius-lg); color:var(--text-muted); font-size:0.95rem;
}
.positions-empty a { color:var(--orange); font-weight:600; }

/* ═══ CONTACT ═══ */
.contact { padding:6rem 0; background:var(--bg); }
.contact__grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact__left { position:sticky; top:7rem; }
.contact__left > p { color:var(--text-muted); margin-bottom:1.5rem; font-size:0.95rem; }
.contact__phone {
  display:block; font-family:var(--font-display);
  font-size:1.05rem; font-weight:700;
  color:var(--orange); margin-bottom:2rem; transition:opacity var(--trans);
}
.contact__phone:hover { opacity:0.8; }
.contact__benefits { display:flex; gap:2rem; margin-bottom:2rem; }
.benefit-col { display:flex; flex-direction:column; gap:0.5rem; }
.benefit { font-size:0.875rem; color:var(--text-muted); display:flex; align-items:center; gap:0.4rem; }
.contact__steps h4 {
  font-family:var(--font-display); font-size:0.8rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:1rem;
}
.step { display:flex; align-items:flex-start; gap:0.75rem; font-size:0.875rem; color:var(--text-muted); margin-bottom:0.75rem; }
.step-num {
  width:28px; height:28px; flex-shrink:0;
  background:var(--orange-pale); border:1.5px solid rgba(231,92,35,0.35);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:0.8rem; font-weight:700; color:var(--orange);
}
.contact__form-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow-md);
}
.contact__form-card h3 { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:var(--charcoal); margin-bottom:1.75rem; }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group label { font-size:0.8rem; font-weight:600; color:var(--text-muted); }
.form-group input,.form-group select,.form-group textarea {
  background:var(--bg2); border:1.5px solid var(--border); border-radius:8px;
  padding:0.7rem 1rem; color:var(--charcoal); font-size:0.9rem;
  transition:border-color var(--trans),background var(--trans); outline:none;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--orange); background:var(--white); }
.form-group textarea { resize:vertical; }
.form-group.error input,.form-group.error select,.form-group.error textarea { border-color:#e53e3e; }
.error-msg { font-size:0.75rem; color:#e53e3e; display:none; }
.form-group.error .error-msg { display:block; }

/* ═══ FOOTER ═══ */

/* Toast */
.toast {
  position:fixed; bottom:2rem; right:2rem; z-index:9999;
  background:var(--charcoal); color:var(--white);
  padding:1rem 1.5rem; border-radius:var(--radius);
  border-left:4px solid var(--orange);
  font-size:0.9rem; box-shadow:var(--shadow-lg);
  transform:translateY(100px); opacity:0; transition:all 0.4s ease;
  min-width:260px;
}
.toast.show { transform:translateY(0); opacity:1; }

/* ═══ RESPONSIVE ═══ */
@media (max-width:1024px) {
  .page-hero__inner   { grid-template-columns:1fr; }
  .hero__culture-card { max-width:560px; }
  .focus-grid         { grid-template-columns:1fr; gap:3rem; }
  .benefits-grid      { grid-template-columns:repeat(2,1fr); }
  .footer__top        { grid-template-columns:1fr 1fr; gap:2rem; }
  .contact__grid      { grid-template-columns:1fr 1fr; }
  .page-hero__cta { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.75rem; animation:fadeUp 0.7s 0.3s ease both;flex-direction: column;
        align-content: center; }
}
@media (max-width:768px) {
  .nav__links,.nav__actions { display:none; }
  .nav__burger        { display:flex; margin-left:auto; }
  .page-hero          { padding:4rem 0 3rem; }
  .benefits-grid      { grid-template-columns:1fr 1fr; }
  .position-card      { flex-direction:column; align-items:flex-start; gap:1rem; }
  .contact__grid      { grid-template-columns:1fr; }
  .contact__left      { position:static; }
  .footer__top        { grid-template-columns:1fr; }
  .footer__bottom     { flex-direction:column; gap:1rem; text-align:center; }
}
@media (max-width:480px) {
  .benefits-grid      { grid-template-columns:1fr; }
  .culture-card__stats { grid-template-columns:repeat(3,1fr); }
  .contact__form-card { padding:1.5rem; }
  .form-row           { grid-template-columns:1fr; }
  .contact__benefits  { flex-direction:column; gap:0.5rem; }
  .positions-filter   { gap:0.4rem; }
  .filter-btn         { font-size:0.78rem; padding:0.4rem 0.9rem; }
}