/* ===========================================================
   Homz N Space — Careers V2 (redesign)
   Direction: the pipeline as page language. This is a sales
   role, so the recurring visual device is the deal/career
   pipeline — staged nodes and connective lines — carried from
   hero through role levels rather than generic icon cards.
   Committed brand orange, near-black ink, warm paper ground.
   Designed to sit cleanly inside the existing WordPress site.
   =========================================================== */

.careers-page {
  --orange: #d9691f;
  --orange-dark: #a84e14;
  --orange-deep: #7a3a10;
  --orange-tint: #ffe4cc;
  --orange-glow: #ffb27a;

  --ink: #15140f;
  --ink-soft: #46443c;
  --muted: #767162;
  --paper: #fbf8f3;
  --warm: #f3ede2;
  --warm-2: #e9e0d0;
  --line: #ddd3bf;
  --line-strong: #c7b99d;
  --dark: #15140f;
  --dark-2: #201e16;
  --white: #fff;

  --font-display: "Didact Gothic", "Segoe UI", sans-serif;
  --font-body: Inter, "Segoe UI", Arial, sans-serif;

  --container: 1200px;

  --shadow: 0 18px 44px rgba(21, 20, 15, .14);
  --shadow-lg: 0 30px 70px rgba(21, 20, 15, .22);
  --ease: cubic-bezier(.16, .84, .24, 1);
}

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

.careers-page {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.careers-page h1,
.careers-page h2,
.careers-page h3,
.careers-page p {
  margin: 0;
}

.careers-page h1,
.careers-page h2,
.careers-page h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.careers-page a {
  color: inherit;
  text-decoration: none;
}

.careers-page img {
  display: block;
  max-width: 100%;
}

.careers-page button,
.careers-page input,
.careers-page textarea {
  font: inherit;
}

.careers-page ::selection {
  color: var(--white);
  background: var(--orange-dark);
}

.careers-page :focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.careers-page .container {
  width: min(var(--container), calc(100% - 56px));
  margin-inline: auto;
}

.careers-page .section {
  padding: 120px 0;
}

.careers-page .section-intro {
  max-width: 640px;
  margin-bottom: 56px;
}

.careers-page .section-intro h2 {
  font-size: clamp(32px, 3.6vw, 46px);
}

.careers-page .section-intro > p:last-child {
  margin-top: 18px;
  color: var(--muted);
  max-width: 58ch;
  font-size: 16px;
}

/* Buttons */
.careers-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .25s var(--ease);
}

.careers-page .btn__icon {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease);
}

.careers-page .btn:hover .btn__icon {
  transform: translateX(3px);
}

.careers-page .btn:hover {
  transform: translateY(-2px);
}

.careers-page .btn:active {
  transform: translateY(2px);
}

.careers-page .btn--primary {
  color: var(--ink);
  background: var(--orange);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 4px 0 var(--orange-deep),
    0 14px 28px -8px rgba(122, 58, 16, .58);
}

.careers-page .btn--primary:hover {
  color: var(--white);
  background: var(--orange-dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 6px 0 var(--orange-deep),
    0 18px 34px -8px rgba(122, 58, 16, .68);
}

.careers-page .btn--primary:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 1px 0 var(--orange-deep),
    0 7px 16px -8px rgba(122, 58, 16, .62);
}

.careers-page .btn--text-light {
  color: var(--ink);
  background: var(--paper);
  border-color: rgba(255, 255, 255, .72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 4px 0 var(--line-strong),
    0 14px 28px -10px rgba(0, 0, 0, .64);
}

.careers-page .btn--text-light:hover {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 6px 0 var(--line-strong),
    0 18px 32px -10px rgba(0, 0, 0, .7);
}

.careers-page .btn--text-light:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 0 var(--line-strong),
    0 7px 16px -9px rgba(0, 0, 0, .62);
}

.careers-page .btn--dark {
  color: #fff;
  background: var(--dark);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .15),
    0 4px 0 #000,
    0 14px 28px -9px rgba(0, 0, 0, .55);
}

.careers-page .btn--dark:hover {
  background: #000;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 6px 0 #000,
    0 18px 32px -9px rgba(0, 0, 0, .64);
}

.careers-page .btn--dark:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 #000;
}

.careers-page .btn--white {
  color: var(--ink);
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 4px 0 var(--warm-2),
    0 14px 28px -10px rgba(67, 35, 12, .5);
}

.careers-page .btn--white:hover {
  background: var(--warm);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 6px 0 var(--warm-2),
    0 18px 32px -10px rgba(67, 35, 12, .58);
}

.careers-page .btn--white:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 0 var(--warm-2);
}

/* ===========================================================
   HERO
   =========================================================== */
.career-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--dark);
}

.career-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.career-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, var(--dark) 0%, rgba(21, 20, 15, .97) 34%, rgba(21, 20, 15, .82) 58%, rgba(21, 20, 15, .34) 100%),
    linear-gradient(0deg, var(--dark) 0%, rgba(21, 20, 15, .06) 36%, transparent 62%);
}

.career-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
}

.career-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 118px 0;
}

.career-hero__copy {
  max-width: 700px;
}

.career-hero h1 {
  color: var(--white) !important;
  font-size: clamp(46px, 6vw, 76px);
  letter-spacing: -.03em;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .5);
}

.career-hero__subtitle {
  max-width: 540px;
  margin-top: 26px !important;
  color: #f1eee7 !important;
  font-size: 18px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}

.career-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 64px;
}

/* Career path — pipeline motif at hero scale */
.career-path {
  margin-top: 92px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  max-width: 780px;
}

.career-path__label {
  margin-bottom: 26px;
  color: #a9a496;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.career-path__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.career-path__track::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: calc(50% / 3 + 6px);
  height: 1px;
  background: linear-gradient(90deg, var(--orange), var(--orange-glow));
}

.career-path__stage {
  position: relative;
  padding-top: 26px;
}

.career-path__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--dark);
  border: 2px solid var(--orange-glow);
}

.career-path__stage--1 .career-path__node { background: var(--orange); }

.career-path__name {
  display: block;
  color: #efece4;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.career-path__stage--1 .career-path__name { color: #fff; }

.career-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 40px;
  padding-bottom: 44px;
  color: #b8b3a5;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.career-hero__meta span {
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, .18);
}

.career-hero__meta span:first-child {
  padding-left: 0;
  border-left: 0;
}

/* ===========================================================
   WHY JOIN — deal stages
   =========================================================== */
.why-join {
  background: var(--paper);
}

.deal-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.deal-stages::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-strong);
}

.deal-stage {
  position: relative;
  padding: 34px 32px 0 0;
}

.deal-stage:last-child {
  padding-right: 0;
}

.deal-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line-strong);
}

.deal-stage::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.deal-stage__tag {
  display: block;
  margin-bottom: 16px;
  color: var(--orange-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.deal-stage h3 {
  margin-bottom: 12px;
  font-size: 24px;
}

.deal-stage p {
  max-width: 30ch;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ===========================================================
   OPENING
   =========================================================== */
.opening {
  background: var(--warm);
}

.opening-card {
  padding: 52px;
  color: #fff;
  background: var(--dark);
  box-shadow: var(--shadow);
}

.opening-card__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.opening-card__kicker {
  margin-bottom: 14px;
  color: var(--orange-glow);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.opening-card h2 {
  max-width: 850px;
  color: #fff;
  font-size: clamp(34px, 4.2vw, 54px);
}

.opening-card h2 span {
  display: block;
  margin-top: 6px;
  color: #a9a496;
  font-size: .5em;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
}

.opening-card__meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.opening-card__meta span {
  padding: 18px 28px;
  border-right: 1px solid rgba(255, 255, 255, .15);
  color: #bbb9b2;
  font-size: 13px;
  letter-spacing: .01em;
}

.opening-card__meta span:first-child { padding-left: 0; }
.opening-card__meta span:last-child { border-right: 0; }

.opening-card__meta b {
  display: block;
  margin-bottom: 4px;
  color: var(--orange-glow);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.opening-card__intro {
  max-width: 850px;
  margin-top: 32px !important;
  color: #d7d3c8;
  font-size: 16.5px;
}

/* Levels — the org path, second pass of the pipeline motif */
.levels {
  padding-top: 128px;
}

.level-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.level-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 30px 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--line-strong);
}

.level-stop--1 { transform: translateY(28px); }
.level-stop--3 { transform: translateY(-8px); }

.level-stop--current {
  border-bottom-color: var(--orange);
  box-shadow: 0 20px 44px -16px rgba(169, 78, 20, .35);
}

.level-stop__rank {
  display: inline-block;
  margin-bottom: 28px;
  padding: 6px 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
}

.level-stop--current .level-stop__rank {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}

.level-stop h3 {
  margin-bottom: 14px;
  font-size: 25px;
}

.level-stop p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Responsibilities */
.responsibilities {
  padding-top: 128px;
}

.responsibility-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.responsibility {
  padding: 38px 40px;
  background: #fff;
  transition: background .2s var(--ease);
}

.responsibility:hover {
  background: var(--paper);
}

.responsibility h3 {
  margin-bottom: 12px;
  font-size: 22px;
}

.responsibility p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
  max-width: 46ch;
}

/* ===========================================================
   FIT
   =========================================================== */
.fit {
  background: var(--dark);
  color: #fff;
}

.fit__inner {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 90px;
  align-items: start;
}

.fit h2 {
  color: #fff;
}

.fit__lead {
  max-width: 460px;
  margin-top: 24px !important;
  color: #bdbbb2;
  font-size: 16px;
}

/* Self-check score — the pipeline node language, reused as a live tally */
.fit__score {
  margin-top: 48px;
  max-width: 460px;
}

.fit__score-track {
  display: flex;
  gap: 8px;
}

.fit__score-node {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, .16);
  transition: background .35s var(--ease);
}

.fit__score-node--on {
  background: var(--orange);
}

.fit__score-label {
  margin-top: 16px;
  color: #bdbbb2;
  font-size: 14px;
}

.fit__score-label strong {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.fit__score-cta {
  margin-top: 22px;
  width: 100%;
}

.fit__score-cta[hidden] {
  display: none;
}

/* Checklist — real checkboxes, styled as the assessment it is */
.fit__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.fit-point {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background .2s var(--ease);
}

.fit-point:hover {
  background: rgba(255, 255, 255, .035);
}

.fit-point__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.fit-point__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  color: transparent;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

.fit-point__box svg {
  width: 14px;
  height: 14px;
}

.fit-point__input:checked ~ .fit-point__box {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
  transform: scale(1.06);
}

.fit-point__input:focus-visible ~ .fit-point__box {
  outline: 2px solid var(--orange-glow);
  outline-offset: 3px;
}

.fit-point:hover .fit-point__box {
  border-color: var(--orange-glow);
}

.fit-point__text {
  padding-top: 3px;
  color: #dedbd3;
  font-size: 14.5px;
  transition: color .2s var(--ease);
}

.fit-point__input:checked ~ .fit-point__text {
  color: #fff;
}

.careers-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================
   APPLICATION
   =========================================================== */
.apply {
  background: var(--warm);
}

.apply-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 70px;
  align-items: start;
}

.apply-copy {
  position: sticky;
  top: 35px;
}

.apply-copy > p:not(.apply-copy h2) {
  max-width: 440px;
  margin-top: 22px !important;
  color: var(--muted);
  font-size: 16px;
}

.apply-facts {
  margin-top: 44px;
  border-top: 1px solid var(--line-strong);
}

.apply-facts div {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-strong);
}

.apply-facts span {
  color: var(--orange-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.apply-facts strong {
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 600;
}

.apply-form {
  padding: 42px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.form-field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.form-field label > span,
.form-field label > small {
  color: var(--orange-dark);
}

.form-field label small {
  margin-left: 5px;
  font-weight: 500;
  letter-spacing: 0;
}

.form-field .optional {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfc6b6;
  border-radius: 2px;
  outline: 0;
  transition: border-color .18s, box-shadow .18s;
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field input:hover,
.form-field textarea:hover {
  border-color: #a89c85;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(217, 105, 31, .14);
}

.file-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.file-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.file-upload__control {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 16px;
  color: var(--orange-dark);
  background: var(--orange-tint);
  border: 1px dashed var(--orange);
  cursor: pointer;
  transition: background .18s;
}

.file-upload__control:hover {
  background: #ffd9b3;
}

.file-upload__control svg {
  width: 16px;
  height: 16px;
}

.file-upload__name {
  color: var(--muted);
  font-size: 13px;
}

.field-error {
  color: #b02c2c;
  font-size: 12px;
}

.apply-form__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.apply-form__disclaimer {
  max-width: 42ch;
  color: var(--muted);
  font-size: 11px;
}

.apply-form__disclaimer a {
  color: var(--orange-dark);
  text-decoration: underline;
}

/* Sidebar placement (WordPress build: disclaimer sits under apply-facts,
   next to the real Fluent Forms embed, instead of inside a form footer) */
.apply-copy .apply-form__disclaimer {
  max-width: none;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}

/* ===========================================================
   Fluent Forms restyle (WordPress build only)
   The "Careers Form Homz N Space" (Fluent Forms id=29) is the real,
   already-working submission pipeline — mail notifications, stored
   entries, resume attachment all already configured server-side.
   Everything below is a visual skin over its own markup/classes; no
   Fluent Forms behavior, validation or submission logic is touched.
   =========================================================== */
.apply-form--fluentform .fluentform {
  font-family: var(--font-body);
}

/* Form 29 has a per-form "Custom Style" preset configured in Fluent
   Forms' own admin (orange fill, red ridge border, white label text) that
   ships as an inline <style> tag in the shortcode output — same
   specificity as an external stylesheet, but later in the DOM, so it wins
   ties. Only !important reliably overrides it without touching the form's
   actual plugin settings (a live, shared production form). */
.apply-form--fluentform .fluentform_wrapper_29.ffs_custom_wrap {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.apply-form--fluentform .ff-el-input--label label {
  color: var(--ink) !important;
}

.apply-form--fluentform .ff-message-success {
  color: var(--ink) !important;
}

.apply-form--fluentform .ff-el-group {
  margin-bottom: 22px;
}

.apply-form--fluentform .ff-el-input--label label {
  margin-bottom: 8px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink);
}

.apply-form--fluentform .ff-el-is-required label::after {
  content: " *";
  color: var(--orange-dark);
}

/* Form 29's own per-form style preset also sets an asterisk color
   (cyan) with !important — this must match it in specificity + !important
   to win regardless of stylesheet load order. */
.apply-form--fluentform .asterisk-right label::after {
  color: var(--orange-dark) !important;
}

.apply-form--fluentform .ff-el-form-control {
  width: 100% !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  color: var(--ink) !important;
  background: #fff !important;
  border: 1px solid #cfc6b6 !important;
  border-radius: 2px !important;
  outline: 0;
  transition: border-color .18s, box-shadow .18s;
}

.apply-form--fluentform textarea.ff-el-form-control {
  min-height: 120px;
  resize: vertical;
}

.apply-form--fluentform .ff-el-form-control:hover {
  border-color: #a89c85;
}

.apply-form--fluentform .ff-el-form-control:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(217, 105, 31, .14);
}

.apply-form--fluentform .ff_file_upload_holder {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px 16px;
  cursor: pointer;
}

.apply-form--fluentform .ff_upload_btn {
  display: inline-flex !important;
  align-items: center;
  color: var(--orange-dark) !important;
  background: var(--orange-tint) !important;
  border: 1px dashed var(--orange) !important;
  border-radius: 2px !important;
  padding: 11px 16px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: background .18s;
}

.apply-form--fluentform .ff_upload_btn:hover {
  background: #ffd9b3 !important;
}

.apply-form--fluentform .ff_submit_btn_wrapper {
  margin-top: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* !important: Fluent Forms injects a per-form inline <style> with matching
   selector specificity, loaded after this stylesheet — only !important
   reliably wins that cascade for the submit button's brand color. */
.apply-form--fluentform .ff-btn-submit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px !important;
  padding: 14px 26px !important;
  color: var(--ink) !important;
  background: var(--orange) !important;
  border: 1px solid transparent !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 4px 0 var(--orange-deep),
    0 14px 28px -8px rgba(122, 58, 16, .58);
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease);
}

.apply-form--fluentform .ff-btn-submit:hover {
  color: var(--white) !important;
  background: var(--orange-dark) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    0 6px 0 var(--orange-deep),
    0 18px 34px -8px rgba(122, 58, 16, .68);
}

.apply-form--fluentform .ff-btn-submit:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 1px 0 var(--orange-deep),
    0 7px 16px -8px rgba(122, 58, 16, .62);
}

.apply-form--fluentform .ff-errors-in-stack,
.apply-form--fluentform .error {
  color: #b02c2c;
  font-size: 12px;
}

.careers-page .btn--submit {
  flex: 0 0 auto;
}

.careers-page .btn__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.careers-page .btn__spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hns-spin .7s linear infinite;
}

.careers-page .btn--submit[data-loading="true"] .btn__label { opacity: 0; }
.careers-page .btn--submit[data-loading="true"] .btn__spinner { display: block; }

@keyframes hns-spin { to { transform: rotate(360deg); } }

.form-status {
  padding: 14px 16px;
  margin-top: 18px;
  border: 1px solid;
  font-size: 13px;
}

.form-status[data-state="success"] {
  color: #1c7048;
  background: #edf7f1;
  border-color: #a8d8bd;
}

.form-status[data-state="error"] {
  color: #9a2929;
  background: #fff0f0;
  border-color: #e4aaaa;
}

/* ===========================================================
   WORKPLACE
   =========================================================== */
.workplace {
  background: #fff;
}

.workplace__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.workplace__visual {
  min-height: 420px;
}

.workplace__address {
  margin-top: 26px !important;
  color: var(--muted);
  line-height: 1.8;
  font-size: 16px;
}

.workplace__copy .btn {
  margin-top: 30px;
}

/* ===========================================================
   FINAL CTA
   =========================================================== */
.final-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--orange);
}

.final-cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  transform: translateY(-50%);
}

.final-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -4%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  transform: translateY(-50%);
}

.final-cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  padding-block: 64px;
}

.final-cta h2 {
  color: #fff;
  font-size: clamp(32px, 3.8vw, 50px);
  max-width: 14ch;
}

/* ===========================================================
   Images
   =========================================================== */
.office-photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  box-shadow: var(--shadow);
}

/* Careers is a focused application journey. Suppress site-wide conversion
   overlays on this template only so they do not compete with the form CTA. */
body.page-template-template-careers .floatWhatsappHNS,
body.page-template-template-careers .flyout-trigger-id-28065,
body.page-template-template-careers #hns-cb-root {
  display: none !important;
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1080px) {
  .career-hero__inner {
    min-height: 680px;
    padding-block: 96px 0;
  }

  .deal-stages {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 44px;
  }

  .deal-stages::before {
    display: none;
  }

  .deal-stage {
    padding-right: 24px;
  }

  .level-path {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .level-stop--1,
  .level-stop--3 {
    transform: none;
  }

  .responsibility-list {
    grid-template-columns: 1fr;
  }

  .fit__inner,
  .apply-layout,
  .workplace__inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .apply-copy {
    position: static;
  }

  .apply-facts {
    max-width: 500px;
  }
}

@media (max-width: 760px) {
  .careers-page .container {
    width: min(var(--container), calc(100% - 32px));
  }

  .careers-page .section {
    padding: 84px 0;
  }

  .career-hero__inner {
    min-height: 720px;
    padding-block: 76px 0;
  }

  .career-hero__photo::after {
    background:
      linear-gradient(100deg, rgba(21, 20, 15, .98) 0%, rgba(21, 20, 15, .9) 66%, rgba(21, 20, 15, .7) 100%),
      linear-gradient(0deg, var(--dark) 0%, rgba(21, 20, 15, .12) 42%, transparent 72%);
  }

  .career-hero h1 {
    font-size: clamp(40px, 12vw, 58px);
  }

  .career-hero__subtitle {
    font-size: 15.5px;
  }

  .career-path {
    margin-top: 60px;
  }

  .career-path__track {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .career-path__track::before {
    display: none;
  }

  .career-hero__meta {
    margin-top: 36px;
    padding-bottom: 36px;
    gap: 10px 0;
  }

  .career-hero__meta span {
    padding-inline: 12px;
  }

  .career-hero__meta span:first-child {
    padding-left: 0;
  }

  .deal-stages {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .opening-card {
    padding: 30px 24px;
  }

  .opening-card__top {
    align-items: flex-start;
    flex-direction: column;
  }

  .opening-card__top .btn {
    width: 100%;
  }

  .opening-card__meta {
    display: block;
  }

  .opening-card__meta span {
    display: block;
    padding: 14px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }

  .opening-card__meta span:last-child {
    border-bottom: 0;
  }

  .levels,
  .responsibilities {
    padding-top: 84px;
  }

  .fit__list {
    grid-template-columns: 1fr;
  }

  .fit-point {
    padding-right: 0;
  }

  .apply-form {
    padding: 26px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .apply-form__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .apply-form__footer .btn {
    width: 100%;
  }

  .workplace__visual {
    min-height: 280px;
  }

  .office-photo {
    height: 280px;
  }

  .final-cta::after,
  .final-cta::before {
    display: none;
  }

  .final-cta__inner {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 52px;
  }

  .final-cta h2 {
    max-width: none;
  }

  .final-cta__inner .btn {
    width: 100%;
  }
}

/* ===========================================================
   Reveal-on-scroll — one authored moment, orchestrated per
   pipeline stage rather than a blanket fade on every section.
   =========================================================== */
.careers-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.careers-page .reveal--in {
  opacity: 1;
  transform: translateY(0);
}

.deal-stage.reveal:nth-child(1) { transition-delay: 0ms; }
.deal-stage.reveal:nth-child(2) { transition-delay: 90ms; }
.deal-stage.reveal:nth-child(3) { transition-delay: 180ms; }
.deal-stage.reveal:nth-child(4) { transition-delay: 270ms; }

.level-stop.reveal:nth-child(1) { transition-delay: 0ms; }
.level-stop.reveal:nth-child(2) { transition-delay: 120ms; }
.level-stop.reveal:nth-child(3) { transition-delay: 240ms; }

.responsibility.reveal:nth-child(odd) { transition-delay: 0ms; }
.responsibility.reveal:nth-child(even) { transition-delay: 90ms; }

.fit-point.reveal { transform: translateY(10px); }

@media (prefers-reduced-motion: reduce) {
  .careers-page *,
  .careers-page *::before,
  .careers-page *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}