/* ═══════════════════════════════════════════════
   CAREERS PAGE — CSS
   Figma node 1973:118531
═══════════════════════════════════════════════ */

:root {
  --blue:   #335d88;
  --cream:  #fffdf8;
  --dark:   #1a1712;
  --grey:   #676767;
  --orange: #d75f3d;
  --sand:   #ece8dd;
  --sand-lt:#f5f3ee;
}

.font-display { font-family: 'Teodor TRIAL', serif; font-weight: 350; }
.font-script  { font-family: 'La Belle Aurore', cursive; font-weight: 400; }
.font-body    { font-family: 'Barlow', sans-serif; }

/* ─── Shared buttons ──────────────────────────── */
.bw-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         10px 24px;
  border-radius:   100px;
  font-family:     'Barlow', sans-serif;
  font-size:       16px;
  font-weight:     600;
  letter-spacing:  0.32px;
  text-transform:  uppercase;
  cursor:          pointer;
  text-decoration: none;
  border:          none;
  transition:      opacity .2s;
}
.bw-btn:hover { opacity: .85; }
.bw-btn--outline-cream { border: 1px solid #fffdf8; color: #fffdf8; background: transparent; }
.bw-btn--outline-blue  { border: 1px solid #335d88; color: #335d88; background: transparent; }
.bw-btn--filled-blue   { background: #335d88; color: #fffdf8; }

/* ─── Top nav ─────────────────────────────────── */
.bw-topnav {
  position:        absolute;
  top:             0; left: 0; right: 0;
  height:          80px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 60px;
  background:      rgba(255,255,255,.08);
  backdrop-filter: blur(4px);
  z-index:         100;
}
.bw-topnav__left, .bw-topnav__right {
  display:         flex;
  align-items:     center;
  gap:             24px;
}
.bw-topnav__left a, .bw-topnav__right a {
  font-family:     'Barlow', sans-serif;
  font-size:       14px;
  color:           #ece8dd;
  text-decoration: none;
}
.bw-topnav__logo img { display: block; }

/* ═══════════════════════════════════════════════
   S1 · HERO  [1920×700]
═══════════════════════════════════════════════ */
.careers-hero {
  position:   relative;
  width:      100%;
  height:     700px;
  overflow:   hidden;
  background: #000;
}
.careers-hero__bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}
.careers-hero__overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.5);
}
.careers-hero__content {
  position:        relative;
  z-index:         10;
  padding:         0 120px;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
  padding-bottom:  140px;
  max-width:       620px;
}
.careers-hero__heading {
  display:     flex;
  align-items: baseline;
  flex-wrap:   wrap;
  gap:         12px;
  margin-bottom: 24px;
}
.careers-hero__heading .font-display {
  font-size:   60px;
  line-height: 72px;
  color:       #fffdf8;
}
.careers-hero__heading .font-script {
  font-size:   60px;
  line-height: 72px;
  color:       #fffdf8;
}
.careers-hero__tagline {
  font-family:   'Barlow', sans-serif;
  font-size:     20px;
  line-height:   24px;
  color:         #fffdf8;
  margin-bottom: 32px;
}

/* ═══════════════════════════════════════════════
   S2 · INTRO + S3 ROLE CARDS  [1920×1034]
═══════════════════════════════════════════════ */
.careers-intro {
  background: #fffdf8;
  padding:    100px 120px;
}
.careers-intro__inner {
  max-width: 1688px;
  margin:    0 auto;
}
.careers-intro__title-block {
  max-width:     780px;
  margin:        0 auto 64px;
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           15px;
}
.careers-intro__tag {
  display:        inline-flex;
  align-items:    center;
  border:         1px solid #676767;
  border-radius:  100px;
  padding:        10px 20px;
  font-family:    'Barlow', sans-serif;
  font-size:      18px;
  font-weight:    600;
  color:          #676767;
  text-transform: uppercase;
  letter-spacing: 0.54px;
}
.careers-intro__heading {
  font-family:  'Teodor TRIAL', serif;
  font-size:    60px;
  font-weight:  350;
  line-height:  72px;
  color:        #335d88;
  margin:       0;
}
.careers-intro__body {
  font-family: 'Barlow', sans-serif;
  font-size:   20px;
  line-height: 24px;
  color:       #676767;
  margin:      0;
}

/* ─── Role cards grid ─────────────────────── */
.careers-roles {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  margin-bottom:         24px;
}
.careers-role-card {
  position:            relative;
  height:              514px;
  border-radius:       10px;
  overflow:            hidden;
  background-size:     cover;
  background-position: center;
  display:             flex;
  flex-direction:      column;
  justify-content:     flex-end;
  padding:             24px;
}
.careers-role-card::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.7) 100%);
}
.careers-role-card__glass {
  position:        relative;
  z-index:         10;
  background:      rgba(0,0,0,.4);
  backdrop-filter: blur(34px);
  -webkit-backdrop-filter: blur(34px);
  border-radius:   10px;
  padding:         24px;
  display:         flex;
  flex-direction:  column;
  gap:             16px;
}
.careers-role-card__content { display: flex; flex-direction: column; gap: 8px; }
.careers-role-card__title {
  font-size:   32px;
  line-height: 38px;
  color:       #fffdf8;
  margin:      0;
}
.careers-role-card__desc {
  font-family: 'Barlow', sans-serif;
  font-size:   16px;
  line-height: 22px;
  color:       rgba(255,253,248,.8);
  margin:      0;
}
.careers-role-card__actions { display: flex; gap: 24px; align-items: center; }
.careers-role-card__cta { font-size: 14px; padding: 8px 20px; }

/* Slider nav dots */
.careers-roles__nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 4px;
}
.careers-roles__dots { display: flex; gap: 8px; }
.careers-roles__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #676767;
  opacity:       .2;
  cursor:        pointer;
  transition:    opacity .2s;
}
.careers-roles__dot--active { opacity: 1; }
.careers-roles__arrow {
  background:  transparent;
  border:      none;
  cursor:      pointer;
  padding:     4px;
  display:     flex;
  align-items: center;
}

/* ═══════════════════════════════════════════════
   S4 · VALUES GRID  [1920×703]
═══════════════════════════════════════════════ */
.careers-values {
  background: #fffdf8;
  padding:    80px 120px;
}
.careers-values__inner {
  max-width: 1680px;
  margin:    0 auto;
  display:   grid;
  grid-template-columns: 440px 1fr;
  gap:       80px;
  align-items: start;
}
.careers-values__heading {
  display:       flex;
  flex-direction: column;
  gap:           0;
  margin:        0 0 24px;
}
.careers-values__heading .font-display {
  font-size:   60px;
  line-height: 72px;
  color:       #335d88;
}
.careers-values__heading .font-script {
  font-size:   60px;
  line-height: 72px;
  color:       #335d88;
}
.careers-values__sub {
  font-family: 'Barlow', sans-serif;
  font-size:   20px;
  line-height: 24px;
  color:       #676767;
  margin:      0;
}
.careers-values__grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   24px;
}
.careers-values__card {
  display:        flex;
  flex-direction: column;
  gap:            24px;
  padding:        0;
}
.careers-values__card-icon { color: #335d88; }
.careers-values__card-text { display: flex; flex-direction: column; gap: 8px; }
.careers-values__card-title {
  font-size:   20px;
  font-weight: 600;
  line-height: 24px;
  color:       #1a1712;
  margin:      0;
}
.careers-values__card-desc {
  font-family: 'Barlow', sans-serif;
  font-size:   16px;
  line-height: 22px;
  color:       #676767;
  margin:      0;
}

/* ═══════════════════════════════════════════════
   S5 · STAFF TESTIMONIALS  [1920×724]
═══════════════════════════════════════════════ */
.careers-testimonials {
  background: #fffdf8;
  padding:    100px 120px;
  border-top: 1px solid #ece8dd;
}
.careers-testimonials__inner {
  max-width: 1680px;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  gap:       64px;
}
.careers-testimonials__header {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
}
.careers-testimonials__header-left {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.careers-testimonials__stars {
  color:     #d75f3d;
  font-size: 14px;
  letter-spacing: 2px;
}
.careers-testimonials__view-link {
  font-family:     'Barlow', sans-serif;
  font-size:       16px;
  color:           #335d88;
  text-decoration: none;
}
.careers-testimonials__heading {
  font-size:   40px;
  font-weight: 350;
  line-height: 48px;
  color:       #335d88;
  margin:      0;
}
.careers-testimonials__track-wrap { overflow: hidden; }
.careers-testimonials__track {
  display: flex;
  gap:     24px;
}
.careers-testimonials__card {
  flex:           0 0 calc((100% - 48px) / 3);
  display:        flex;
  flex-direction: column;
  gap:            20px;
  background:     #fffdf8;
  border:         1px solid #b3b3b3;
  border-radius:  10px;
  padding:        24px;
  box-sizing:     border-box;
}
.careers-testimonials__quote {
  font-family:  'Barlow', sans-serif;
  font-size:    20px;
  font-weight:  400;
  line-height:  30px;
  color:        #202023;
  margin:       0;
  flex:         1;
}
.careers-testimonials__profile {
  display:     flex;
  align-items: center;
  gap:         12px;
}
.careers-testimonials__name {
  font-family:  'Barlow', sans-serif;
  font-size:    16px;
  font-weight:  500;
  line-height:  24px;
  color:        #202023;
}
.careers-testimonials__nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
}

/* ═══════════════════════════════════════════════
   S6 · CTA BANNER  [1920×690]
═══════════════════════════════════════════════ */
.careers-cta-banner {
  position:   relative;
  width:      100%;
  min-height: 690px;
  overflow:   hidden;
  display:    flex;
  align-items: center;
  justify-content: center;
}
.careers-cta-banner__bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}
.careers-cta-banner__overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0,0,0,.55);
}
.careers-cta-banner__content {
  position:        relative;
  z-index:         10;
  text-align:      center;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             32px;
  padding:         60px 120px;
}
.careers-cta-banner__heading-wrap {
  display:     flex;
  align-items: baseline;
  gap:         16px;
  flex-wrap:   wrap;
  justify-content: center;
}
.careers-cta-banner__line1 {
  font-size:   60px;
  font-weight: 350;
  line-height: 72px;
  color:       #fffdf8;
}
.careers-cta-banner__line2 {
  font-size:   60px;
  line-height: 72px;
  color:       #fffdf8;
}
.careers-cta-banner__sub {
  font-family: 'Barlow', sans-serif;
  font-size:   20px;
  line-height: 24px;
  color:       #fffdf8;
  max-width:   540px;
  margin:      0;
}

/* ═══════════════════════════════════════════════
   S7 · JOB LISTINGS  [1920×879]
═══════════════════════════════════════════════ */
.careers-jobs {
  background: #fffdf8;
  padding:    80px 120px;
}
.careers-jobs__inner {
  max-width: 1312px;
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  gap:       32px;
}
.careers-jobs__heading {
  font-size:   40px;
  font-weight: 350;
  line-height: 48px;
  color:       #335d88;
  margin:      0;
  text-align:  center;
}
.careers-jobs__filter-bar {
  display:         flex;
  align-items:     flex-end;
  gap:             16px;
  border:          1px solid #b3b3b3;
  border-radius:   10px;
  padding:         20px 24px;
}
.careers-jobs__filter-fields {
  display: flex;
  gap:     16px;
  flex:    1;
  flex-wrap: wrap;
}
.careers-jobs__field {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  flex:           1;
  min-width:      200px;
}
.careers-jobs__field label {
  font-family:    'Barlow', sans-serif;
  font-size:      13px;
  font-weight:    600;
  color:          #8194a2;
  text-transform: uppercase;
}
.careers-jobs__input-wrap {
  display:       flex;
  align-items:   center;
  gap:           8px;
  border:        1px solid #8194a2;
  border-radius: 8px;
  padding:       12px 14px;
  background:    #fffdf8;
}
.careers-jobs__input-wrap input {
  border:      none;
  outline:     none;
  background:  transparent;
  font-family: 'Barlow', sans-serif;
  font-size:   14px;
  color:       #1a1712;
  width:       100%;
}
.careers-jobs__search-btn {
  background:    #335d88;
  color:         #fffcf6;
  border-radius: 50px;
  padding:       10px 24px;
  font-family:   'Barlow', sans-serif;
  font-size:     16px;
  font-weight:   600;
  border:        none;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    opacity .2s;
}
.careers-jobs__search-btn:hover { opacity: .85; }

.careers-jobs__tabs {
  display:     flex;
  align-items: center;
  gap:         5px;
  flex-wrap:   wrap;
}
.careers-jobs__tab {
  border-radius:   500px;
  padding:         8px 20px;
  font-family:     'Barlow', sans-serif;
  font-size:       15px;
  font-weight:     600;
  color:           #676767;
  background:      transparent;
  border:          1px solid #ece8dd;
  cursor:          pointer;
  transition:      background .15s, color .15s;
}
.careers-jobs__tab--active {
  background: #ece8dd;
  color:      #1a1712;
}
.careers-jobs__tab:hover:not(.careers-jobs__tab--active) { background: rgba(236,232,221,.4); }

.careers-jobs__toggle-wrap {
  display:    flex;
  justify-content: flex-start;
}
.careers-jobs__toggle {
  display:       flex;
  background:    #ece8dd;
  border-radius: 100px;
  padding:       4px;
  gap:           0;
}
.careers-jobs__toggle-btn {
  border-radius:   100px;
  padding:         10px 20px;
  font-family:     'Barlow', sans-serif;
  font-size:       14px;
  font-weight:     600;
  color:           #676767;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  transition:      background .15s, color .15s;
}
.careers-jobs__toggle-btn--active {
  background: #d75f3d;
  color:      #fffdf8;
}

.careers-jobs__list { display: flex; flex-direction: column; }
.careers-jobs__row {
  display:       flex;
  align-items:   center;
  gap:           32px;
  border:        1px solid #000;
  border-radius: 0;
  padding:       32px;
}
.careers-jobs__row + .careers-jobs__row { border-top: none; }
.careers-jobs__row:first-child { border-radius: 10px 10px 0 0; }
.careers-jobs__row:last-child  { border-radius: 0 0 10px 10px; }
.careers-jobs__row-state {
  font-family:  'Barlow', sans-serif;
  font-size:    20px;
  font-weight:  400;
  line-height:  30px;
  color:        #335d88;
  min-width:    60px;
}
.careers-jobs__row-details {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.careers-jobs__row-title {
  font-family:  'Barlow', sans-serif;
  font-size:    18px;
  font-weight:  600;
  color:        #1a1712;
}
.careers-jobs__row-meta {
  font-family: 'Barlow', sans-serif;
  font-size:   14px;
  color:       #676767;
}
.careers-jobs__apply-btn {
  flex-shrink: 0;
  border:      1px solid #335d88;
  color:       #335d88;
  border-radius: 50px;
  font-size:   14px;
  padding:     10px 24px;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 1200px
═══════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .careers-hero { height: 600px; }
  .careers-hero__content { padding: 0 80px 100px; }

  .careers-intro { padding: 80px; }
  .careers-roles { grid-template-columns: repeat(3, 1fr); }

  .careers-values { padding: 60px 80px; }
  .careers-values__inner { grid-template-columns: 320px 1fr; gap: 48px; }
  .careers-values__heading .font-display,
  .careers-values__heading .font-script { font-size: 48px; line-height: 58px; }

  .careers-testimonials { padding: 80px; }
  .careers-jobs { padding: 60px 80px; }
}

/* ═══════════════════════════════════════════════
   MISSING MODIFIERS — added by CSS/PHP audit fix
═══════════════════════════════════════════════ */

/* Values left column — wrapper inside .careers-values__inner grid */
.careers-values__left {
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

/* Arrow direction modifiers — both share .careers-roles__arrow base styles */
.careers-roles__arrow--prev,
.careers-roles__arrow--next {
  flex-shrink: 0;
}

/* Testimonials prev/next buttons — inherit .bw-btn .bw-btn--outline-blue,
   added here for explicit selector coverage */
.careers-testimonials__prev,
.careers-testimonials__next {
  min-width: 120px;
  justify-content: center;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 1024px
═══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .bw-topnav { padding: 0 32px; }

  .careers-hero__content { padding: 0 48px 80px; }
  .careers-hero__heading .font-display,
  .careers-hero__heading .font-script { font-size: 48px; line-height: 58px; }

  .careers-intro { padding: 60px 48px; }
  .careers-roles { grid-template-columns: 1fr; }
  /* Mobile slider: hide all cards; only .careers-role-card--active is shown.
     JS calls goTo(0) on init; without JS all 3 cards stack (acceptable). */
  .careers-role-card          { display: none; height: 360px; }
  .careers-role-card--active  { display: flex; }

  .careers-values { padding: 60px 48px; }
  .careers-values__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .careers-values__grid { grid-template-columns: repeat(2, 1fr); }

  .careers-testimonials { padding: 60px 48px; }
  .careers-testimonials__card { flex: 0 0 calc((100% - 24px) / 2); }

  .careers-cta-banner__content { padding: 60px 48px; }
  .careers-cta-banner__line1, .careers-cta-banner__line2 { font-size: 48px; line-height: 58px; }

  .careers-jobs { padding: 60px 48px; }
  .careers-jobs__filter-bar { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — 768px
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .bw-topnav__left { display: none; }
  .bw-topnav__right > a:not(.bw-btn) { display: none; }

  .careers-hero { height: 520px; }
  .careers-hero__content { padding: 0 24px 80px; }
  .careers-hero__heading .font-display,
  .careers-hero__heading .font-script { font-size: 36px; line-height: 44px; }

  .careers-intro { padding: 48px 24px; }
  .careers-intro__heading { font-size: 40px; line-height: 48px; }

  .careers-values { padding: 48px 24px; }
  .careers-values__grid { grid-template-columns: 1fr; }
  .careers-values__heading .font-display,
  .careers-values__heading .font-script { font-size: 36px; line-height: 44px; }

  .careers-testimonials { padding: 48px 24px; gap: 40px; }
  .careers-testimonials__card {
    flex: 0 0 100%;
    display: flex;
  }
  .careers-testimonials__header { flex-direction: column; align-items: flex-start; gap: 16px; }

  .careers-cta-banner { min-height: 440px; }
  .careers-cta-banner__content { padding: 40px 24px; gap: 24px; }
  .careers-cta-banner__line1, .careers-cta-banner__line2 { font-size: 36px; line-height: 44px; }

  .careers-jobs { padding: 48px 24px; }
  .careers-jobs__row { padding: 20px; flex-wrap: wrap; }
  .careers-jobs__row-state { min-width: auto; }
  .careers-jobs__filter-fields { flex-direction: column; }
  .careers-jobs__tabs { gap: 8px; }
}