/* =========================================================
   ABPE WORKS — COMPANY PROFILE V3
   CAREER

   Direction:
   Human
   Ambitious
   Modern Team
   Editorial Recruitment
   ========================================================= */


/* =========================================================
   01. PAGE
   ========================================================= */

.page-career {
  background:
    var(--bg-main);
}


/* =========================================================
   02. HERO
   ========================================================= */

.career-hero {
  position:
    relative;

  min-height:
    calc(100svh - var(--navbar-height));

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    clamp(90px, 8vw, 140px)
    var(--page-inline)
    clamp(80px, 9vw, 140px);

  overflow:
    hidden;
}


/* =========================================================
   03. HERO DECORATION
   ========================================================= */

.career-hero::before {
  content:
    "";

  position:
    absolute;

  width:
    min(70vw, 1100px);

  aspect-ratio:
    1;

  right:
    -22%;

  top:
    -36%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.15),
      rgba(7, 92, 255, 0.07) 42%,
      transparent 72%
    );

  pointer-events:
    none;
}


/* =========================================================
   04. HERO TOP
   ========================================================= */

.career-hero__top {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;
}


.career-hero__eyebrow {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  color:
    var(--text-muted);

  font-size:
    0.65rem;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.career-hero__eyebrow::before {
  content:
    "";

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--abpe-blue);
}


.career-hero__availability {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    9px 14px;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.72);

  color:
    var(--text-muted);

  font-size:
    0.57rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}


.career-hero__availability::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);

  box-shadow:
    0 0 14px
    rgba(0, 200, 255, 0.65);
}


/* =========================================================
   05. HERO MAIN
   ========================================================= */

.career-hero__main {
  position:
    relative;

  z-index:
    3;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(290px, 0.34fr);

  align-items:
    end;

  gap:
    clamp(70px, 11vw, 190px);

  margin:
    clamp(120px, 14vw, 220px)
    0
    clamp(100px, 11vw, 170px);
}


/* =========================================================
   06. HERO TITLE
   ========================================================= */

.career-hero__title {
  max-width:
    1450px;

  color:
    var(--text-heading);

  font-size:
    clamp(4.3rem, 9.3vw, 10.6rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}


.career-hero__title span {
  display:
    block;
}


.career-hero__title .indent {
  padding-left:
    clamp(90px, 15vw, 280px);
}


.career-hero__title .accent {
  color:
    var(--abpe-blue);
}


/* =========================================================
   07. HERO COPY
   ========================================================= */

.career-hero__side {
  padding-top:
    22px;

  border-top:
    1px solid var(--line);
}


.career-hero__side-label {
  display:
    block;

  margin-bottom:
    32px;

  color:
    var(--abpe-blue);

  font-size:
    0.6rem;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.career-hero__side-copy {
  color:
    var(--text-muted);

  font-size:
    0.88rem;

  line-height:
    1.75;
}


/* =========================================================
   08. HERO FOOT
   ========================================================= */

.career-hero__foot {
  position:
    relative;

  z-index:
    3;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  padding-top:
    22px;

  border-top:
    1px solid var(--line);

  color:
    var(--text-muted);

  font-size:
    0.62rem;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


/* =========================================================
   09. INTRO
   ========================================================= */

.career-intro {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}


.career-intro__grid {
  display:
    grid;

  grid-template-columns:
    minmax(180px, 0.28fr)
    minmax(0, 1fr);

  gap:
    clamp(70px, 11vw, 190px);
}


.career-intro__content {
  max-width:
    1200px;
}


.career-intro__title {
  color:
    var(--text-heading);

  font-size:
    clamp(3.2rem, 6vw, 7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


.career-intro__title strong {
  color:
    var(--abpe-blue);

  font-weight:
    inherit;
}


.career-intro__copy {
  display:
    grid;

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

  gap:
    clamp(30px, 6vw, 90px);

  margin-top:
    clamp(60px, 8vw, 110px);
}


.career-intro__copy p {
  color:
    var(--text-muted);

  font-size:
    0.9rem;

  line-height:
    1.76;
}


/* =========================================================
   10. TEAM / OFFICE VISUAL
   ========================================================= */

.career-visual {
  padding:
    0
    var(--page-inline)
    var(--section-space);

  background:
    var(--bg-white);
}


.career-visual__media {
  position:
    relative;

  width:
    100%;

  min-height:
    680px;

  height:
    min(82vh, 950px);

  overflow:
    hidden;

  background:
    var(--abpe-navy);
}


.career-visual__media img {
  width:
    100%;

  height:
    110%;

  object-fit:
    cover;

  transform:
    translateY(-5%);

  will-change:
    transform;
}


.career-visual__caption {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  padding-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    0.65rem;
}


.career-visual__caption strong {
  color:
    var(--text-heading);

  font-weight:
    500;
}


/* =========================================================
   11. OPEN POSITIONS
   ========================================================= */

.career-roles {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-main);
}


.career-roles__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(270px, 0.38fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}


.career-roles__title {
  max-width:
    1000px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


.career-roles__copy {
  max-width:
    420px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.72;
}


/* =========================================================
   12. ROLE LIST
   ========================================================= */

.career-role-list {
  border-top:
    1px solid var(--line);
}


.career-role {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    80px
    minmax(0, 1fr)
    minmax(140px, 0.22fr)
    74px;

  align-items:
    center;

  gap:
    28px;

  min-height:
    clamp(145px, 13vw, 210px);

  border-bottom:
    1px solid var(--line);

  overflow:
    hidden;

  transition:
    background var(--transition);
}


.career-role::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(7, 92, 255, 0.055),
      transparent 75%
    );

  opacity:
    0;

  transform:
    translateX(-15px);

  transition:
    opacity var(--transition),
    transform var(--transition);

  pointer-events:
    none;
}


.career-role:hover {
  background:
    var(--bg-white);
}


.career-role:hover::before {
  opacity:
    1;

  transform:
    translateX(0);
}


/* =========================================================
   13. ROLE DETAILS
   ========================================================= */

.career-role__index {
  position:
    relative;

  z-index:
    2;

  color:
    var(--text-soft);

  font-size:
    0.63rem;
}


.career-role__name {
  position:
    relative;

  z-index:
    2;

  color:
    var(--text-heading);

  font-size:
    clamp(2.2rem, 4.5vw, 5.4rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;

  transition:
    color var(--transition),
    transform var(--transition);
}


.career-role:hover
.career-role__name {
  color:
    var(--abpe-blue);

  transform:
    translateX(10px);
}


.career-role__division {
  position:
    relative;

  z-index:
    2;

  color:
    var(--text-muted);

  font-size:
    0.64rem;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.career-role__arrow {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    58px;

  height:
    58px;

  margin-left:
    auto;

  border:
    1px solid var(--line);

  border-radius:
    50%;

  color:
    var(--text-heading);

  transition:
    color var(--transition),
    background var(--transition),
    border-color var(--transition),
    transform var(--transition);
}


.career-role:hover
.career-role__arrow {
  color:
    #ffffff;

  background:
    var(--abpe-blue);

  border-color:
    var(--abpe-blue);

  transform:
    rotate(45deg);
}


/* =========================================================
   14. ROLE SLOT STATUS
   ========================================================= */

.career-role__status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  margin-top:
    14px;

  color:
    var(--text-muted);

  font-size:
    0.57rem;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}


.career-role__status::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--abpe-cyan);

  box-shadow:
    0 0 10px
    rgba(0, 200, 255, 0.4);
}


/* =========================================================
   15. CULTURE
   ========================================================= */

.career-culture {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--abpe-navy);

  overflow:
    hidden;
}


.career-culture__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(270px, 0.38fr);

  align-items:
    end;

  gap:
    clamp(60px, 10vw, 160px);

  margin-bottom:
    clamp(80px, 10vw, 150px);
}


.career-culture__title {
  max-width:
    1000px;

  margin-top:
    28px;

  color:
    #ffffff;

  font-size:
    clamp(3rem, 5.8vw, 6.8rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


.career-culture__copy {
  max-width:
    420px;

  color:
    rgba(255, 255, 255, 0.54);

  font-size:
    0.85rem;

  line-height:
    1.72;
}


/* =========================================================
   16. CULTURE GRID
   ========================================================= */

.career-culture__grid {
  display:
    grid;

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

  border-top:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-left:
    1px solid
    rgba(255, 255, 255, 0.15);
}


.career-culture-card {
  min-height:
    350px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    28px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.15);

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.15);

  transition:
    background var(--transition);
}


.career-culture-card:hover {
  background:
    rgba(7, 92, 255, 0.12);
}


.career-culture-card__index {
  color:
    var(--abpe-cyan);

  font-size:
    0.62rem;
}


.career-culture-card__title {
  color:
    #ffffff;

  font-size:
    clamp(2rem, 3.5vw, 4.1rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.055em;
}


.career-culture-card__copy {
  max-width:
    400px;

  margin-top:
    20px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size:
    0.78rem;

  line-height:
    1.7;
}


/* =========================================================
   17. APPLICATION PROCESS
   ========================================================= */

.career-process {
  padding:
    var(--section-space)
    var(--page-inline);

  background:
    var(--bg-white);
}


.career-process__header {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 0.38fr);

  gap:
    clamp(60px, 10vw, 160px);

  align-items:
    end;

  margin-bottom:
    clamp(80px, 10vw, 150px);
}


.career-process__title {
  max-width:
    970px;

  margin-top:
    28px;

  color:
    var(--text-heading);

  font-size:
    clamp(3rem, 5.7vw, 6.7rem);

  font-weight:
    400;

  line-height:
    0.9;

  letter-spacing:
    -0.06em;
}


.career-process__copy {
  max-width:
    410px;

  color:
    var(--text-muted);

  font-size:
    0.85rem;

  line-height:
    1.72;
}


/* =========================================================
   18. PROCESS TRACK
   ========================================================= */

.career-process__track {
  display:
    grid;

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

  border-top:
    1px solid var(--line);

  border-left:
    1px solid var(--line);
}


.career-process-step {
  min-height:
    280px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  padding:
    26px;

  border-right:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}


.career-process-step__number {
  color:
    var(--abpe-blue);

  font-size:
    0.62rem;
}


.career-process-step__title {
  color:
    var(--text-heading);

  font-size:
    clamp(1.7rem, 2.8vw, 3.3rem);

  font-weight:
    400;

  line-height:
    0.94;

  letter-spacing:
    -0.05em;
}


.career-process-step__copy {
  margin-top:
    18px;

  color:
    var(--text-muted);

  font-size:
    0.76rem;

  line-height:
    1.68;
}


/* =========================================================
   19. CAREER NOTE
   ========================================================= */

.career-note {
  padding:
    clamp(75px, 9vw, 130px)
    var(--page-inline);

  background:
    var(--bg-soft);
}


.career-note__grid {
  display:
    grid;

  grid-template-columns:
    minmax(180px, 0.25fr)
    minmax(0, 1fr);

  gap:
    clamp(60px, 10vw, 160px);
}


.career-note__title {
  max-width:
    980px;

  color:
    var(--text-heading);

  font-size:
    clamp(2.5rem, 4.8vw, 5.6rem);

  font-weight:
    400;

  line-height:
    0.92;

  letter-spacing:
    -0.055em;
}


.career-note__copy {
  max-width:
    680px;

  margin-top:
    32px;

  color:
    var(--text-muted);

  font-size:
    0.86rem;

  line-height:
    1.75;
}


/* =========================================================
   20. CTA
   ========================================================= */

.career-cta {
  position:
    relative;

  padding:
    clamp(110px, 13vw, 210px)
    var(--page-inline);

  background:
    var(--abpe-blue);

  overflow:
    hidden;
}


.career-cta::before {
  content:
    "";

  position:
    absolute;

  width:
    80vw;

  height:
    80vw;

  right:
    -28%;

  top:
    -48%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(0, 200, 255, 0.4),
      rgba(255, 255, 255, 0.08) 38%,
      transparent 70%
    );

  pointer-events:
    none;
}


.career-cta__top {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    50px;

  margin-bottom:
    clamp(90px, 11vw, 170px);
}


.career-cta__copy {
  max-width:
    440px;

  color:
    rgba(255, 255, 255, 0.7);

  font-size:
    0.84rem;

  line-height:
    1.75;
}


/* =========================================================
   21. CTA MAIN
   ========================================================= */

.career-cta__main {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    60px;
}


.career-cta__title {
  max-width:
    1400px;

  color:
    #ffffff;

  font-size:
    clamp(4rem, 8.8vw, 10rem);

  font-weight:
    400;

  line-height:
    0.81;

  letter-spacing:
    -0.078em;

  text-transform:
    uppercase;
}


.career-cta__action {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    clamp(95px, 10vw, 155px);

  height:
    clamp(95px, 10vw, 155px);

  flex:
    0 0 auto;

  border-radius:
    50%;

  color:
    var(--abpe-navy);

  background:
    var(--abpe-cyan);

  transition:
    color var(--transition),
    background var(--transition),
    transform var(--transition);
}


.career-cta__action:hover {
  color:
    #ffffff;

  background:
    var(--abpe-navy);

  transform:
    rotate(45deg)
    scale(1.04);
}


.career-cta__action svg {
  width:
    34%;

  height:
    34%;
}


/* =========================================================
   22. ACCESSIBILITY
   ========================================================= */

.career-role:focus-visible,
.career-cta__action:focus-visible {
  outline:
    2px solid var(--abpe-cyan);

  outline-offset:
    5px;
}