:root {
  --career-navy:
    #07111f;

  --career-blue:
    #12345a;

  --career-teal:
    #0f766e;

  --career-teal-dark:
    #0b5f59;

  --career-gold:
    #d6a94a;

  --career-light:
    #f4f8fb;

  --career-white:
    #ffffff;

  --career-text:
    #1e293b;

  --career-muted:
    #64748b;

  --career-border:
    #dbe5ee;

  --career-success:
    #166534;

  --career-error:
    #b91c1c;
}

* {
  box-sizing:
    border-box;
}

html {
  scroll-behavior:
    smooth;
}

body {
  margin:
    0;

  color:
    var(--career-text);

  background:
    var(--career-light);

  font-family:
    Arial,
    sans-serif;
}

.career-container {
  width:
    min(1120px, calc(100% - 40px));

  margin:
    0 auto;
}

.career-topbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  min-height:
    82px;

  padding:
    14px 5%;

  background:
    var(--career-navy);

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

.career-logo img {
  display:
    block;

  max-width:
    190px;

  max-height:
    54px;
}

.career-nav {
  display:
    flex;

  align-items:
    center;

  gap:
    22px;
}

.career-nav a {
  color:
    #e2e8f0;

  text-decoration:
    none;

  font-size:
    15px;

  font-weight:
    600;
}

.career-nav a:hover,
.career-nav a:focus {
  color:
    #ffffff;
}

.career-nav-button {
  padding:
    11px 17px;

  color:
    #ffffff !important;

  background:
    var(--career-teal);

  border-radius:
    8px;
}

.career-menu-toggle {
  display:
    none;

  padding:
    8px 11px;

  color:
    #ffffff;

  background:
    transparent;

  border:
    1px solid rgba(255, 255, 255, 0.35);

  border-radius:
    7px;

  font-size:
    24px;

  cursor:
    pointer;
}

.career-hero {
  position:
    relative;

  overflow:
    hidden;

  padding:
    92px 0 84px;

  color:
    #ffffff;

  background:
    linear-gradient(
      130deg,
      #07111f 0%,
      #102d4c 58%,
      #0f766e 140%
    );
}

.career-hero::after {
  position:
    absolute;

  top:
    -120px;

  right:
    -100px;

  width:
    430px;

  height:
    430px;

  content:
    "";

  border:
    1px solid rgba(255, 255, 255, 0.13);

  border-radius:
    50%;
}

.career-eyebrow {
  margin-bottom:
    17px;

  color:
    #7dd3c7;

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    1.8px;

  text-transform:
    uppercase;
}

.career-hero h1 {
  max-width:
    800px;

  margin:
    0 0 22px;

  font-size:
    clamp(38px, 6vw, 66px);

  line-height:
    1.05;
}

.career-hero p {
  max-width:
    720px;

  margin:
    0 0 30px;

  color:
    #dbeafe;

  font-size:
    19px;

  line-height:
    1.7;
}

.career-primary-button {
  display:
    inline-block;

  padding:
    14px 22px;

  color:
    #ffffff;

  background:
    var(--career-teal);

  border:
    0;

  border-radius:
    9px;

  font-size:
    16px;

  font-weight:
    800;

  text-decoration:
    none;

  cursor:
    pointer;
}

.career-primary-button:hover,
.career-primary-button:focus {
  background:
    var(--career-teal-dark);
}

.career-summary {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

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

  margin-top:
    -36px;

  background:
    #ffffff;

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

  border-radius:
    14px;

  box-shadow:
    0 18px 46px rgba(15, 23, 42, 0.12);
}

.career-summary-item {
  padding:
    24px;

  border-right:
    1px solid var(--career-border);
}

.career-summary-item:last-child {
  border-right:
    0;
}

.career-summary-item span {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--career-muted);

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    1px;

  text-transform:
    uppercase;
}

.career-summary-item strong {
  color:
    var(--career-navy);

  font-size:
    16px;
}

.career-section {
  padding:
    82px 0;
}

.career-section-white {
  background:
    #ffffff;
}

.career-section-heading {
  max-width:
    760px;

  margin-bottom:
    38px;
}

.career-section-heading h2 {
  margin:
    0 0 14px;

  color:
    var(--career-navy);

  font-size:
    clamp(30px, 4vw, 43px);
}

.career-section-heading p {
  margin:
    0;

  color:
    var(--career-muted);

  font-size:
    17px;

  line-height:
    1.7;
}

.career-grid {
  display:
    grid;

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

  gap:
    22px;
}

.career-card {
  padding:
    27px;

  background:
    #ffffff;

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

  border-radius:
    13px;
}

.career-card h3 {
  margin:
    0 0 14px;

  color:
    var(--career-navy);

  font-size:
    21px;
}

.career-card p,
.career-card li {
  color:
    #475569;

  line-height:
    1.65;
}

.career-card ul {
  margin:
    0;

  padding-left:
    21px;
}

.career-card li + li {
  margin-top:
    9px;
}

.career-process {
  display:
    grid;

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

  gap:
    18px;
}

.career-process-item {
  padding:
    25px;

  background:
    var(--career-navy);

  border-radius:
    12px;
}

.career-process-number {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    42px;

  height:
    42px;

  margin-bottom:
    17px;

  color:
    var(--career-navy);

  background:
    #7dd3c7;

  border-radius:
    50%;

  font-weight:
    900;
}

.career-process-item h3 {
  margin:
    0 0 10px;

  color:
    #ffffff;

  font-size:
    18px;
}

.career-process-item p {
  margin:
    0;

  color:
    #cbd5e1;

  line-height:
    1.6;
}

.career-form-card {
  padding:
    38px;

  background:
    #ffffff;

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

  border-radius:
    15px;

  box-shadow:
    0 14px 40px rgba(15, 23, 42, 0.08);
}

.career-form-grid {
  display:
    grid;

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

  gap:
    21px;
}

.career-form-grid label {
  display:
    block;
}

.career-form-grid label > span,
.career-consent span {
  display:
    block;

  margin-bottom:
    8px;

  color:
    #334155;

  font-size:
    14px;

  font-weight:
    700;
}

.career-form-grid input,
.career-form-grid select,
.career-form-grid textarea {
  width:
    100%;

  padding:
    13px 14px;

  color:
    var(--career-text);

  background:
    #ffffff;

  border:
    1px solid #cbd5e1;

  border-radius:
    8px;

  font:
    inherit;
}

.career-form-grid input:focus,
.career-form-grid select:focus,
.career-form-grid textarea:focus {
  outline:
    3px solid rgba(15, 118, 110, 0.14);

  border-color:
    var(--career-teal);
}

.career-form-full {
  grid-column:
    1 / -1;
}

.career-honeypot {
  position:
    absolute !important;

  left:
    -10000px !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;
}

.career-consent {
  display:
    grid;

  grid-template-columns:
    auto 1fr;

  align-items:
    start;

  gap:
    10px;

  margin:
    24px 0;
}

.career-consent input {
  margin-top:
    3px;
}

.career-consent span {
  margin:
    0;

  color:
    #475569;

  font-weight:
    500;

  line-height:
    1.55;
}

.career-form-note {
  margin-top:
    17px;

  color:
    var(--career-muted);

  font-size:
    13px;

  line-height:
    1.55;
}

.career-form-status {
  display:
    none;

  margin-top:
    20px;

  padding:
    14px 16px;

  border-radius:
    9px;

  font-weight:
    700;

  line-height:
    1.5;
}

.career-form-status.success {
  display:
    block;

  color:
    var(--career-success);

  background:
    #f0fdf4;

  border:
    1px solid #86efac;
}

.career-form-status.error {
  display:
    block;

  color:
    var(--career-error);

  background:
    #fef2f2;

  border:
    1px solid #fecaca;
}

.career-footer {
  padding:
    48px 0 26px;

  color:
    #cbd5e1;

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

.career-footer-grid {
  display:
    grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap:
    35px;
}

.career-footer h3,
.career-footer h4 {
  color:
    #ffffff;
}

.career-footer a {
  display:
    block;

  margin:
    9px 0;

  color:
    #cbd5e1;

  text-decoration:
    none;
}

.career-footer-bottom {
  margin-top:
    34px;

  padding-top:
    20px;

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

  font-size:
    13px;
}

@media (max-width: 860px) {
  .career-menu-toggle {
    display:
      block;
  }

  .career-nav {
    position:
      absolute;

    z-index:
      20;

    top:
      82px;

    right:
      0;

    left:
      0;

    display:
      none;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0;

    padding:
      12px 5% 20px;

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

  .career-nav.active {
    display:
      flex;
  }

  .career-nav a {
    padding:
      13px 5px;
  }

  .career-summary,
  .career-process {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .career-summary-item:nth-child(2) {
    border-right:
      0;
  }

  .career-summary-item {
    border-bottom:
      1px solid var(--career-border);
  }

  .career-summary-item:nth-child(3),
  .career-summary-item:nth-child(4) {
    border-bottom:
      0;
  }
}

@media (max-width: 620px) {
  .career-container {
    width:
      min(100% - 28px, 1120px);
  }

  .career-hero {
    padding:
      66px 0 72px;
  }

  .career-summary,
  .career-grid,
  .career-process,
  .career-form-grid,
  .career-footer-grid {
    grid-template-columns:
      1fr;
  }

  .career-summary-item {
    border-right:
      0;
  }

  .career-summary-item:nth-child(3) {
    border-bottom:
      1px solid var(--career-border);
  }

  .career-form-full {
    grid-column:
      auto;
  }

  .career-form-card {
    padding:
      24px 18px;
  }
}


/*
 * ==========================================
 * BYA CAREERS AND OPPORTUNITIES HUB V1
 * ==========================================
 */

.opportunity-hub {
  padding:
    86px 0;

  background:
    #ffffff;
}

.opportunity-heading {
  max-width:
    820px;

  margin:
    0 auto 42px;

  text-align:
    center;
}

.opportunity-grid {
  display:
    grid;

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

  gap:
    22px;
}

.opportunity-card {
  display:
    flex;

  flex-direction:
    column;

  min-height:
    100%;

  padding:
    30px;

  background:
    #ffffff;

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

  border-radius:
    16px;

  box-shadow:
    0 15px 40px rgba(15, 23, 42, 0.07);
}

.opportunity-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.11);
}

.opportunity-icon {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    52px;

  height:
    52px;

  margin-bottom:
    18px;

  background:
    #eaf3f2;

  border-radius:
    14px;

  font-size:
    27px;
}

.opportunity-type {
  color:
    var(--career-teal);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    1.2px;
}

.opportunity-card h3 {
  margin:
    10px 0;

  color:
    var(--career-navy);

  font-size:
    25px;
}

.opportunity-card p,
.opportunity-card li {
  color:
    #526078;

  line-height:
    1.65;
}

.opportunity-card ul {
  margin:
    14px 0 25px;

  padding-left:
    20px;
}

.opportunity-card li + li {
  margin-top:
    7px;
}

.opportunity-button {
  display:
    block;

  margin-top:
    auto;

  padding:
    13px 17px;

  color:
    #ffffff;

  background:
    var(--career-teal);

  border-radius:
    9px;

  font-weight:
    800;

  text-align:
    center;

  text-decoration:
    none;
}

.opportunity-button:hover,
.opportunity-button:focus {
  background:
    var(--career-teal-dark);
}

.ambassador-path {
  border-top:
    4px solid var(--career-gold);
}

.reseller-path {
  border-top:
    4px solid #2563eb;
}

.career-path {
  border-top:
    4px solid var(--career-teal);
}

.consultant-introduction {
  padding:
    70px 0 65px;

  color:
    #ffffff;

  background:
    linear-gradient(
      130deg,
      #07111f,
      #12345a
    );
}

.consultant-introduction h2 {
  max-width:
    780px;

  margin:
    0 0 14px;

  font-size:
    clamp(32px, 4vw, 48px);
}

.consultant-introduction p {
  max-width:
    730px;

  margin:
    0;

  color:
    #dbeafe;

  font-size:
    18px;

  line-height:
    1.7;
}

@media(max-width:900px) {
  .opportunity-grid {
    grid-template-columns:
      1fr;
  }

  .opportunity-card {
    min-height:
      auto;
  }
}

/* BYA CONSULTANT MOTIVATION PRE-APPLICATION V1 */
.career-motivation-band {
  padding: 80px 0;
  color: #ffffff;
  background:
    radial-gradient(circle at 85% 20%, rgba(214, 179, 106, .23), transparent 30%),
    linear-gradient(135deg, #07111f, #123653);
}

.career-motivation-content {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 45px;
  align-items: center;
}

.career-motivation-content h2 {
  margin: 10px 0 18px;
  color: #ffffff;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1;
}

.career-motivation-content p {
  color: #d6e1eb;
  line-height: 1.75;
}

.career-motivation-message {
  padding: 27px;
  border: 1px solid rgba(214, 179, 106, .5);
  border-radius: 18px;
  background: rgba(255, 255, 255, .07);
}

.career-motivation-message strong {
  display: block;
  margin: 16px 0;
  color: #e7c77f;
  line-height: 1.55;
}

.career-motivation-message a {
  display: inline-block;
  color: #ffffff;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 760px) {
  .career-motivation-content {
    grid-template-columns: 1fr;
  }

  .career-motivation-band {
    padding: 65px 0;
  }
}