/* =========================================================
   AA BUILDERS & INTERIORS
   CAREERS PAGE
   ========================================================= */


/* =========================================================
   PAGE BANNER
   ========================================================= */

.careers-banner {

  min-height: 360px;

  background:
    linear-gradient(
      100deg,
      rgba(7, 27, 44, 0.94),
      rgba(11, 42, 68, 0.78)
    ),
    url("../images/careers-banner.jpg");

  background-size: cover;

  background-position: center;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 80px 24px;
}


.careers-banner__content {

  max-width: 760px;

}


.careers-eyebrow {

  color: #D6A945;

  font-size: .8rem;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 14px;

}


.careers-banner h1 {

  color: #FFFFFF;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(2.4rem, 5vw, 3.8rem);

  line-height: 1.15;

  margin: 0 0 18px;

}


.careers-banner h1 em {

  color: #D6A945;

  font-style: italic;

}


.careers-banner__content > p:not(.careers-eyebrow) {

  color: #CBD8E3;

  max-width: 620px;

  margin: 0 auto 24px;

  line-height: 1.7;

}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.breadcrumb {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 12px;

  color: #B9C9D6;

  font-size: .88rem;

}


.breadcrumb a {

  color: #FFFFFF;

  transition: .2s;

}


.breadcrumb a:hover {

  color: #D6A945;

}


/* =========================================================
   WHY WORK
   ========================================================= */

.why-work {

  padding: 95px 0;

  background: #FFFFFF;

}


.why-work-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 65px;

  align-items: center;

}


.why-work-image {

  position: relative;

}


.why-work-image img {

  width: 100%;

  display: block;

  border-radius: 16px;

  box-shadow:
    0 18px 45px rgba(11,42,68,.12);

}


.why-work-badge {

  position: absolute;

  left: -25px;

  bottom: -22px;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background: #0B2A44;

  color: #D6A945;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  font-size: .78rem;

  font-weight: 600;

  box-shadow:
    0 10px 30px rgba(11,42,68,.15);

}


.why-work-badge i {

  font-size: 1.35rem;

  margin-bottom: 6px;

}


.why-work-content .lead {

  color: #0B2A44;

  font-size: 1.08rem;

  font-weight: 500;

  line-height: 1.7;

  margin-bottom: 16px;

}


.why-work-content p:not(.eyebrow-left) {

  color: #667380;

  line-height: 1.75;

  margin-bottom: 17px;

}


.why-work-content h2 {

  color: #0B2A44;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(2rem, 4vw, 2.7rem);

  line-height: 1.2;

  margin-bottom: 18px;

}


/* =========================================================
   PERKS
   ========================================================= */

.perks {

  padding: 95px 0;

  background: #F7F9FB;

}


.perks-grid {

  display: grid;

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

  gap: 25px;

  margin-top: 50px;

}


.perk-card {

  background: #FFFFFF;

  border: 1px solid #E7ECF1;

  border-radius: 15px;

  padding: 36px 25px;

  text-align: center;

  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity .5s ease,
    transform .5s ease,
    box-shadow .3s ease;

}


.perk-card.in-view {

  opacity: 1;

  transform: translateY(0);

}


.perk-card:hover {

  transform: translateY(-7px);

  box-shadow:
    0 18px 35px rgba(11,42,68,.1);

}


.perk-card i {

  width: 62px;

  height: 62px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 18px;

  background: #F7F0DD;

  color: #B9872C;

  font-size: 1.45rem;

}


.perk-card h4 {

  color: #0B2A44;

  font-size: 1.05rem;

  margin-bottom: 10px;

}


.perk-card p {

  color: #667380;

  font-size: .9rem;

  line-height: 1.65;

  margin: 0;

}


/* =========================================================
   OPENINGS
   ========================================================= */

.openings {

  padding: 95px 0;

  background: #FFFFFF;

}


.jobs-list {

  display: flex;

  flex-direction: column;

  gap: 20px;

  margin-top: 50px;

}


.job-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  background: #FFFFFF;

  border: 1px solid #E7ECF1;

  border-left: 4px solid #D6A945;

  border-radius: 14px;

  padding: 30px;

  transition: .3s;

  opacity: 0;

  transform: translateY(20px);

}


.job-card.in-view {

  opacity: 1;

  transform: translateY(0);

}


.job-card:hover {

  box-shadow:
    0 15px 35px rgba(11,42,68,.09);

}


.job-main {

  flex: 1;

}


.job-main h3 {

  color: #0B2A44;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 1.3rem;

  margin-bottom: 12px;

}


.job-meta {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  margin-bottom: 12px;

}


.job-meta span {

  color: #667380;

  font-size: .82rem;

  font-weight: 500;

}


.job-meta i {

  color: #D6A945;

  margin-right: 6px;

}


.job-main p {

  color: #667380;

  max-width: 720px;

  font-size: .9rem;

  line-height: 1.65;

  margin: 0;

}


.job-apply-btn {

  flex-shrink: 0;

  white-space: nowrap;

}


/* =========================================================
   HIRING PROCESS
   ========================================================= */

.process {

  padding: 95px 0;

  background: #F7F9FB;

}


.process-grid {

  display: grid;

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

  gap: 25px;

  margin-top: 50px;

}


.process-step {

  text-align: center;

  padding: 20px;

  position: relative;

}


.process-num {

  display: block;

  color: #D6A945;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 2.4rem;

  font-weight: 700;

  margin-bottom: 10px;

}


.process-icon {

  width: 55px;

  height: 55px;

  border-radius: 50%;

  margin: 0 auto 17px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #0B2A44;

  color: #D6A945;

}


.process-step h4 {

  color: #0B2A44;

  font-size: 1.05rem;

  margin-bottom: 9px;

}


.process-step p {

  color: #667380;

  font-size: .88rem;

  line-height: 1.65;

  margin: 0;

}


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

.apply {

  padding: 95px 0;

  background: #FFFFFF;

}


.apply-inner {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 65px;

  align-items: start;

}


.apply-content h2 {

  color: #0B2A44;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(2rem, 4vw, 2.7rem);

  line-height: 1.2;

  margin-bottom: 18px;

}


.apply-content .lead {

  color: #0B2A44;

  font-size: 1.05rem;

  font-weight: 500;

  line-height: 1.7;

}


.apply-content > p:not(.eyebrow-left) {

  color: #667380;

  line-height: 1.7;

  margin-bottom: 18px;

}


.apply-points {

  list-style: none;

  padding: 0;

  margin: 25px 0 0;

}


.apply-points li {

  display: flex;

  align-items: center;

  gap: 12px;

  color: #0B2A44;

  font-size: .9rem;

  font-weight: 500;

  padding: 11px 0;

  border-bottom: 1px solid #E7ECF1;

}


.apply-points li:last-child {

  border-bottom: none;

}


.apply-points i {

  width: 23px;

  height: 23px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  background: #0B2A44;

  color: #D6A945;

  font-size: .65rem;

}


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

.apply-form {

  background: #FFFFFF;

  border-radius: 16px;

  padding: 38px;

  border: 1px solid #E7ECF1;

  border-top: 4px solid #D6A945;

  box-shadow:
    0 15px 40px rgba(11,42,68,.1);

}


.apply-form h3 {

  color: #0B2A44;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 1.35rem;

  margin-bottom: 22px;

}


.apply-form input,
.apply-form select,
.apply-form textarea {

  width: 100%;

  padding: 13px 15px;

  border: 1px solid #E7ECF1;

  border-radius: 7px;

  background: #F7F9FB;

  color: #23303B;

  font-family: "Poppins", sans-serif;

  font-size: .9rem;

  margin-bottom: 14px;

}


.apply-form textarea {

  resize: vertical;

}


.apply-form input:focus,
.apply-form select:focus,
.apply-form textarea:focus {

  outline: none;

  border-color: #D6A945;

  background: #FFFFFF;

}


.btn-block {

  width: 100%;

}


.form-note {

  color: #0EA5E9;

  text-align: center;

  font-size: .85rem;

  margin-top: 13px;

  min-height: 20px;

}


/* =========================================================
   CTA
   ========================================================= */

.careers-cta {

  padding: 70px 0;

  background: #0B2A44;

}


.careers-cta-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 35px;

  flex-wrap: wrap;

}


.careers-cta h2 {

  color: #FFFFFF;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(1.8rem, 3vw, 2.5rem);

  margin: 8px 0 10px;

}


.careers-cta p:last-child {

  color: #B9C9D6;

  margin: 0;

  line-height: 1.7;

}


.eyebrow-light {

  color: #D6A945 !important;

}


.careers-cta-actions {

  display: flex;

  align-items: center;

  gap: 25px;

  flex-wrap: wrap;

}


.careers-phone {

  color: #FFFFFF;

  font-size: .92rem;

  font-weight: 500;

}


.careers-phone i {

  color: #D6A945;

  margin-right: 7px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

  .why-work-grid {

    grid-template-columns: 1fr;

    gap: 55px;

  }

  .why-work-content {

    max-width: 800px;

  }

  .perks-grid {

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

  }

  .process-grid {

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

  }

  .apply-inner {

    grid-template-columns: 1fr;

    gap: 50px;

  }

  .job-card {

    flex-direction: column;

    align-items: flex-start;

  }

  .job-apply-btn {

    width: 100%;

  }

}


@media (max-width: 760px) {

  .careers-banner {

    min-height: 320px;

    padding: 65px 20px;

  }

  .why-work {

    padding: 70px 0;

  }

  .perks,
  .openings,
  .process,
  .apply {

    padding: 70px 0;

  }

  .perks-grid {

    grid-template-columns: 1fr;

  }

  .process-grid {

    grid-template-columns: 1fr;

    gap: 10px;

  }

  .apply-form {

    padding: 28px 22px;

  }

  .careers-cta {

    padding: 60px 0;

  }

  .careers-cta-inner {

    align-items: flex-start;

    flex-direction: column;

  }

}


@media (max-width: 480px) {

  .careers-banner h1 {

    font-size: 2.2rem;

  }

  .why-work-badge {

    width: 82px;

    height: 82px;

    left: -10px;

    bottom: -12px;

    font-size: .68rem;

  }

  .job-card {

    padding: 24px 20px;

  }

  .job-meta {

    gap: 10px;

    flex-direction: column;

  }

  .careers-cta-actions {

    align-items: flex-start;

    flex-direction: column;

  }

}

/* ================= CAREERS PAGE BANNER ================= */

.careers-banner {
  position: relative;

  /* Same compact height as Projects banner */
  min-height: 260px;

  background-image: url("../images/careers-banner.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}


/* ================= DARK OVERLAY ================= */

.careers-banner__overlay {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.55);

  z-index: 1;
}


/* ================= BANNER CONTENT ================= */

.careers-banner__content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1100px;

  padding: 40px 30px;

  text-align: center;

  color: #ffffff;
}


/* ================= SMALL HEADING ================= */

.careers-eyebrow {
  margin: 0 0 8px;

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 3px;
  text-transform: uppercase;

  color: #d4af37;
}


/* ================= MAIN HEADING ================= */

.careers-banner h1 {
  margin: 0 0 12px;

  font-size: clamp(38px, 5vw, 60px);

  line-height: 1.05;

  font-weight: 700;

  color: #ffffff;
}


/* ================= HIGHLIGHTED WORD ================= */

.careers-banner h1 em {
  font-style: normal;

  color: #d4af37;
}


/* ================= DESCRIPTION ================= */

.careers-banner__content > p:not(.careers-eyebrow) {
  max-width: 650px;

  margin: 0 auto 16px;

  font-size: 15px;

  line-height: 1.5;

  color: rgba(255, 255, 255, 0.9);
}


/* ================= BREADCRUMB ================= */

.careers-banner .breadcrumb {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  font-size: 13px;

  font-weight: 500;

  color: rgba(255, 255, 255, 0.8);
}


/* ================= BREADCRUMB LINK ================= */

.careers-banner .breadcrumb a {
  color: #ffffff;

  text-decoration: none;

  transition: color 0.3s ease;
}


/* ================= BREADCRUMB HOVER ================= */

.careers-banner .breadcrumb a:hover {
  color: #d4af37;
}


/* ================= BREADCRUMB ARROW ================= */

.careers-banner .breadcrumb span:nth-child(2) {
  color: #d4af37;

  font-size: 18px;
}


/* ================= CURRENT PAGE ================= */

.careers-banner .breadcrumb span:last-child {
  color: rgba(255, 255, 255, 0.75);
}


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

@media (max-width: 768px) {

  .careers-banner {
    min-height: 240px;

    background-position: center;
  }

  .careers-banner__content {
    padding: 35px 24px;
  }

  .careers-eyebrow {
    font-size: 11px;

    letter-spacing: 2px;

    margin-bottom: 8px;
  }

  .careers-banner h1 {
    font-size: 44px;

    margin-bottom: 10px;
  }

  .careers-banner__content > p:not(.careers-eyebrow) {
    font-size: 14px;

    line-height: 1.5;

    margin-bottom: 14px;
  }

  .careers-banner .breadcrumb {
    font-size: 12px;

    gap: 8px;
  }

}


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

@media (max-width: 480px) {

  .careers-banner {
    min-height: 220px;

    background-position: center;
  }

  .careers-banner__content {
    padding: 30px 20px;
  }

  .careers-eyebrow {
    font-size: 10px;

    letter-spacing: 1.8px;
  }

  .careers-banner h1 {
    font-size: 36px;

    line-height: 1.1;

    margin-bottom: 10px;
  }

  .careers-banner__content > p:not(.careers-eyebrow) {
    font-size: 13px;

    line-height: 1.45;

    margin-bottom: 12px;
  }

  .careers-banner .breadcrumb {
    font-size: 12px;

    gap: 7px;
  }

  .careers-banner .breadcrumb span:nth-child(2) {
    font-size: 16px;
  }

}