

.xc-careers,
.xc-careers *{
  box-sizing:border-box;
}

.xc-careers{
  width:100%;

  background:#FFFFFF;

  font-family:Arial,Helvetica,sans-serif;

  color:#5E5E5E;
}

.xc-careers-wrap{
  width:100%;
  max-width:1450px;

  margin:0 auto;

  padding:0 32px;
}


/* ======================================================
   HERO
====================================================== */

.xc-careers-hero{
  padding:58px 0 50px;

  background:#FFFFFF;

  border-bottom:1px solid #DEDEDE;
}

.xc-careers-hero-grid{
  display:grid;

  grid-template-columns:1.05fr .95fr;

  gap:60px;

  align-items:center;
}


/* KICKER */

.xc-careers-kicker{
  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:12px;

  color:var(--mfd-accent,#E00018) !important;

  font-size:9px;

  font-weight:900;

  letter-spacing:1.8px;

  text-transform:uppercase;
}

.xc-careers-kicker::before{
  content:"";

  width:28px;
  height:2px;

  flex-shrink:0;

  background:var(--mfd-accent,#E00018);
}


/* HERO TITLE */

.xc-careers-hero h1{
  margin:0 0 18px !important;

  color:#050505 !important;

  font-size:clamp(44px,5vw,68px);

  line-height:.94;

  font-weight:900;

  letter-spacing:-1.8px;

  text-transform:uppercase;
}

.xc-careers-hero h1 span{
  display:block;

  color:var(--mfd-accent,#E00018) !important;
}

.xc-careers-hero p{
  max-width:660px;

  margin:0 0 24px !important;

  color:#5E5E5E !important;

  font-size:13px;

  line-height:1.75;
}


/* HERO BUTTON */

.xc-careers-btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:48px;

  padding:0 24px;

  background:var(--mfd-accent,#E00018);

  color:#FFFFFF !important;

  font-size:10px;

  font-weight:900;

  letter-spacing:1.2px;

  text-transform:uppercase;

  text-decoration:none !important;

  transition:
    background .18s ease,
    transform .18s ease;
}

.xc-careers-btn:hover{
  background:var(--mfd-accent-hover,#B80014);

  transform:translateY(-2px);
}


/* ======================================================
   HERO PANEL
====================================================== */

.xc-careers-panel{
  position:relative;

  padding:34px;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #111111 0%,
      #050505 100%
    );

  box-shadow:
    0 16px 38px rgba(5,5,5,.12);
}

.xc-careers-panel::before{
  content:"";

  position:absolute;

  width:260px;
  height:260px;

  right:-140px;
  top:-150px;

  border:1px solid rgba(224,0,24,.22);

  border-radius:50%;

  pointer-events:none;
}

.xc-careers-panel small{
  position:relative;
  z-index:2;

  display:block;

  margin-bottom:10px;

  color:var(--mfd-accent,#E00018) !important;

  font-size:8px;

  font-weight:900;

  letter-spacing:1.5px;

  text-transform:uppercase;
}

.xc-careers-panel h2{
  position:relative;
  z-index:2;

  margin:0 0 12px !important;

  color:#FFFFFF !important;

  font-size:28px;

  line-height:1.05;

  font-weight:900;

  text-transform:uppercase;
}

.xc-careers-panel p{
  position:relative;
  z-index:2;

  margin:0 !important;

  color:rgba(255,255,255,.68) !important;

  font-size:11px;

  line-height:1.7;
}


/* ======================================================
   WHY JOIN
====================================================== */

.xc-careers-why{
  padding:52px 0;

  background:#FFFFFF;
}

.xc-careers-section-head{
  max-width:680px;

  margin-bottom:25px;
}

.xc-careers-section-head small{
  display:block;

  margin-bottom:8px;

  color:var(--mfd-accent,#E00018) !important;

  font-size:8px;

  font-weight:900;

  letter-spacing:1.6px;

  text-transform:uppercase;
}

.xc-careers-section-head h2{
  margin:0 0 10px !important;

  color:#050505 !important;

  font-size:31px;

  line-height:1;

  font-weight:900;

  text-transform:uppercase;
}

.xc-careers-section-head p{
  margin:0 !important;

  color:#5E5E5E !important;

  font-size:12px;

  line-height:1.7;
}


/* VALUES */

.xc-careers-values{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}

.xc-careers-value{
  position:relative;

  padding:24px;

  background:#FFFFFF;

  border:1px solid #DEDEDE;

  border-top:3px solid var(--mfd-accent,#E00018);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.xc-careers-value:hover{
  transform:translateY(-3px);

  border-color:rgba(224,0,24,.38);

  box-shadow:
    0 12px 30px rgba(5,5,5,.07);
}

.xc-careers-value strong{
  display:block;

  margin-bottom:8px;

  color:#050505 !important;

  font-size:14px;

  font-weight:900;

  text-transform:uppercase;
}

.xc-careers-value p{
  margin:0 !important;

  color:#5E5E5E !important;

  font-size:10px;

  line-height:1.65;
}


/* ======================================================
   ROLES
====================================================== */

.xc-careers-roles{
  padding:0 0 52px;

  background:#FFFFFF;
}

.xc-careers-role-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
}

.xc-careers-role{
  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:18px;

  padding:22px 24px;

  background:#FFFFFF;

  border:1px solid #DEDEDE;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

.xc-careers-role:hover{
  border-color:rgba(224,0,24,.34);

  box-shadow:
    0 10px 26px rgba(5,5,5,.055);

  transform:translateY(-2px);
}

.xc-careers-role-main strong{
  display:block;

  margin-bottom:5px;

  color:#050505 !important;

  font-size:14px;

  font-weight:900;

  text-transform:uppercase;
}

.xc-careers-role-main span{
  display:block;

  color:#777777 !important;

  font-size:9px;

  font-weight:700;

  letter-spacing:.8px;

  text-transform:uppercase;
}

.xc-careers-role-badge{
  align-self:flex-start;

  padding:7px 10px;

  background:#F5F5F5;

  color:var(--mfd-accent,#E00018) !important;

  border:1px solid #DEDEDE;

  font-size:8px;

  font-weight:900;

  letter-spacing:.7px;

  text-transform:uppercase;
}


/* ======================================================
   APPLICATION
====================================================== */

.xc-careers-apply{
  padding:52px 0 74px;

  background:#FFFFFF;

  border-top:1px solid #DEDEDE;
}

.xc-careers-apply-grid{
  display:grid;

  grid-template-columns:320px 1fr;

  gap:24px;
}


/* APPLY INFO */

.xc-careers-apply-info{
  position:relative;

  align-self:start;

  padding:30px;

  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #111111 0%,
      #050505 100%
    );
}

.xc-careers-apply-info::after{
  content:"";

  position:absolute;

  width:220px;
  height:220px;

  left:-125px;
  bottom:-145px;

  border-radius:50%;

  border:1px solid rgba(224,0,24,.22);

  pointer-events:none;
}

.xc-careers-apply-info small{
  position:relative;
  z-index:2;

  display:block;

  margin-bottom:9px;

  color:var(--mfd-accent,#E00018) !important;

  font-size:8px;

  font-weight:900;

  letter-spacing:1.4px;

  text-transform:uppercase;
}

.xc-careers-apply-info h2{
  position:relative;
  z-index:2;

  margin:0 0 12px !important;

  color:#FFFFFF !important;

  font-size:25px;

  line-height:1.05;

  font-weight:900;

  text-transform:uppercase;
}

.xc-careers-apply-info p{
  position:relative;
  z-index:2;

  margin:0 !important;

  color:rgba(255,255,255,.68) !important;

  font-size:10px;

  line-height:1.65;
}


/* FORM */

.xc-careers-form{
  padding:32px;

  background:#FFFFFF;

  border:1px solid #DEDEDE;

  box-shadow:
    0 10px 30px rgba(5,5,5,.045);
}

.xc-careers-form-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;
}

.xc-careers-field{
  display:flex;

  flex-direction:column;

  gap:6px;
}

.xc-careers-field--full{
  grid-column:1 / -1;
}

.xc-careers-field label{
  color:#050505 !important;

  font-size:8px;

  font-weight:900;

  letter-spacing:.9px;

  text-transform:uppercase;
}


/* INPUTS */

.xc-careers-field input,
.xc-careers-field select,
.xc-careers-field textarea{
  width:100%;

  padding:12px 13px;

  background:#FFFFFF;

  border:1px solid #DEDEDE;

  border-radius:0;

  color:#252525 !important;

  font-family:Arial,Helvetica,sans-serif;

  font-size:12px;

  outline:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.xc-careers-field input{
  min-height:46px;
}

.xc-careers-field select{
  min-height:46px;
}

.xc-careers-field input:focus,
.xc-careers-field select:focus,
.xc-careers-field textarea:focus{
  border-color:var(--mfd-accent,#E00018);

  box-shadow:
    0 0 0 3px rgba(224,0,24,.07);
}

.xc-careers-field textarea{
  min-height:120px;

  resize:vertical;
}


/* SUBMIT */

.xc-careers-submit{
  margin-top:18px;

  min-height:48px;

  padding:0 24px;

  background:var(--mfd-accent,#E00018);

  border:0;

  color:#FFFFFF !important;

  font-size:10px;

  font-weight:900;

  letter-spacing:1.2px;

  text-transform:uppercase;

  cursor:pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}

.xc-careers-submit:hover{
  background:var(--mfd-accent-hover,#B80014);

  transform:translateY(-2px);
}

.xc-careers-note{
  margin-top:12px !important;

  color:#777777 !important;

  font-size:9px !important;

  line-height:1.55 !important;
}


/* ======================================================
   TABLET
====================================================== */

@media(max-width:900px){

  .xc-careers-hero-grid,
  .xc-careers-apply-grid{
    grid-template-columns:1fr;
  }

  .xc-careers-values{
    grid-template-columns:1fr;
  }

  .xc-careers-apply-info{
    max-width:none;
  }

}


/* ======================================================
   MOBILE
====================================================== */

@media(max-width:650px){

  .xc-careers-wrap{
    padding:0 16px;
  }

  .xc-careers-hero{
    padding:38px 0;
  }

  .xc-careers-hero-grid{
    gap:26px;
  }

  .xc-careers-hero h1{
    font-size:42px;
  }

  .xc-careers-btn{
    width:100%;
  }

  .xc-careers-panel{
    padding:25px 22px;
  }

  .xc-careers-panel h2{
    font-size:24px;
  }

  .xc-careers-why{
    padding:36px 0;
  }

  .xc-careers-section-head h2{
    font-size:26px;
  }

  .xc-careers-role-grid{
    grid-template-columns:1fr;
  }

  .xc-careers-role{
    padding:18px;
  }

  .xc-careers-apply{
    padding:38px 0 54px;
  }

  .xc-careers-apply-info{
    padding:25px 22px;
  }

  .xc-careers-form{
    padding:24px 18px;
  }

  .xc-careers-form-grid{
    grid-template-columns:1fr;
  }

  .xc-careers-field--full{
    grid-column:auto;
  }

  .xc-careers-submit{
    width:100%;
  }

}

