/* ==========================================================
   GLOBAL RESET
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    overflow-x:hidden;
}


/* ==========================================================
   GLOBAL CONTAINER
========================================================== */

.container{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
}

/*==========================================================
  HIRING SOLUTIONS - HERO V2
==========================================================*/


.hs-hero{
    background: linear-gradient(135deg,#102743 0%,#18375E 100%);
    padding:70px 0 90px;
    overflow:hidden;
}

.hs-back-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:45px;
    text-decoration:none;
    color:#3ea5cf;
    font-size:.95rem;
    font-weight:500;
    transition:.3s;
}

.hs-back-link:hover{
    color:#ffffff;
}

.hs-hero-wrapper{
    display:grid;
    grid-template-columns: 1fr 390px;
    column-gap: 100px;
    align-items:center;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 1px solid rgba(62,165,207,0.45);
  border-radius: 999px;
  background: rgba(62,165,207,0.08);
  color: #3ea5cf;
    font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
    box-shadow:
    0 0 12px rgba(62,165,207,0.12),
  0 0 24px rgba(62,165,207,0.05);

  animation: eyebrowPulse 3s ease-in-out infinite;
  }

@keyframes eyebrowPulse {

  0% {
    box-shadow:
      0 0 12px rgba(62,165,207,0.10),
      0 0 24px rgba(62,165,207,0.04);
  }

  50% {
    box-shadow:
      0 0 20px rgba(62,165,207,0.25),
      0 0 40px rgba(62,165,207,0.10);
  }

  100% {
    box-shadow:
      0 0 12px rgba(62,165,207,0.10),
      0 0 24px rgba(62,165,207,0.04);
  }
}

.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D4A73F;
  margin-right: 10px;

  box-shadow:
    0 0 8px #D4A73F,
    0 0 16px #D4A73F;

  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  50% {
    transform: scale(1.25);
  }
}

.hs-hero .eyebrow-text {
    display: inline-block;
    animation: eyebrowFloat 3s ease-in-out infinite;
}

@keyframes eyebrowFloat {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-2px);
    }

    100% {
        transform: translateY(0px);
    }

}

/*==========================================================
  LEFT CONTENT
==========================================================*/

.hs-content{
  max-width: none;
    padding-left: 0;
}

.hero-break{
    display:block;
}


.hs-tag{

       margin-bottom:30px;
}

.hs-title-block{

    display:flex;

    align-items:flex-start;

    gap:22px;

   margin-top: 22px;
    margin-bottom:28px;
}

.hs-title-line{

    width:4px;

    height:130px;

    background:#D8A74A;

    border-radius:30px;

    flex-shrink:0;
    margin-top:10px;
}

.hs-title{
    margin:0;
    color: rgba(255,255,255,0.82);
    font-size:4.3rem;
    line-height:1.08;
    font-weight:700;
    letter-spacing:-1px;
    white-space:nowrap;
}

.hs-description{

    max-width:700px;

    margin:0 0 42px;

    font-size:1.12rem;

    line-height:2;

    color:rgba(255,255,255,.88);
}

/*==========================================================
 BUTTON
==========================================================*/

.hs-actions{

    margin-bottom:55px;
}

.hs-btn{

    display:inline-flex;
}

/*==========================================================
 HIGHLIGHTS
==========================================================*/

.hs-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:15px;
}

.hs-pill{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 20px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(216,167,74,.28);

    border-radius:40px;

    color:#ffffff;

    font-size:.92rem;

    transition:.3s;
}

.hs-pill i{

    color:#D8A74A;
}

.hs-pill:hover{

    transform:translateY(-2px);

    border-color:#D8A74A;
}

/*==========================================================
 IMAGE
==========================================================*/

.hs-image-wrapper{
    display: flex;
    justify-content:flex-end;
    align-items:flex-start;
   }

.hs-image{

      margin-top: -20px;
}

.hs-image img{
    width:390px;
    height:285px;
    object-fit:cover;
    border-radius:12px;
    box-shadow:0 20px 45px rgba(0,0,0,.22);
}

.btn-primary {
  background: linear-gradient(
135deg,
#7a4d22 0%,
#a56a2a 25%,
#d39a4d 50%,
#e9c27a 70%,
#a56a2a 100%
);

  color: #0B1F3A;
  padding: 16px 34px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.35s ease;
  border: 1px solid rgba(255,255,255,0.12);

    box-shadow:
      0 12px 24px rgba(165,106,42,0.30),
      inset 0 1px 1px rgba(255,255,255,0.20);

   position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: 1px;

  border-radius: 7px;

  background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.15),
      transparent 35%
  );

  pointer-events: none;
}

.btn-primary:hover {
  box-shadow:
      0 14px 30px rgba(212,167,63,0.35),
      0 0 24px rgba(212,167,63,0.18);
  transform: translateY(-3px);
}

.btn-primary::before {
  content: "";

  position: absolute;

  top: 0;
  left: -100%;

  width: 100%;
  height: 100%;

  background: linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.25),
      transparent
  );

  transition: all 0.8s ease;
}

.btn-primary:hover::before {
  left: 100%;
}




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

@media(max-width:1200px){

.hs-title{

    font-size:3.5rem;
}

.hs-image{

    margin-left:0;
}

.hs-image img{

    max-width:380px;

    height:260px;
}

}

@media(max-width:992px){



   .hs-hero{

    padding:60px 0;
}

.hs-hero-wrapper{

    grid-template-columns:1fr;

    gap:50px;
}

.hs-image-wrapper{

    justify-content:center;
}

.hs-image{

    margin:0;
}

.hs-image img{

    max-width:100%;

    height:340px;
}

.hs-title{

    font-size:3rem;
}

.hs-highlights{

    gap:12px;
}

}

@media (max-width:768px){

/* HERO */

.container{
    padding:0 20px;
}

   .hs-hero{
    padding:40px 0 50px;
}

   .section-eyebrow{

    font-size:13px;

    padding:9px 16px;

    letter-spacing:.5px;

}

/* IMPORTANT */

.hs-hero-wrapper{

    display:block;

}

.hs-content{

    width:100%;
    max-width:100%;
}

.hs-tag{

    margin-bottom:18px;

}

/* TITLE */

.hs-title-block{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:18px 0 22px;

}

.hs-title-line{

    width:4px;

    height:85px;

    margin-top:6px;

}

.hs-title{

    font-size:30px;

    line-height:1.12;

    letter-spacing:-0.5px;

    white-space:normal;

}

/* DESCRIPTION */

.hs-description{

    max-width:100%;

    font-size:.98rem;

    line-height:1.7;

    margin-bottom:28px;

   overflow-wrap: break-word;
    word-break: break-word;

}

/* BUTTON */

.hs-actions{

    margin-bottom:32px;

}

.hs-btn{

     display:inline-flex;

    width:100%;
   justify-content:center;

    max-width:100%;

   text-align:center;

   font-size:.95rem;

    padding:15px 20px;

}

   .btn-primary{
    padding:14px 22px;
}

/* PILLS */

.hs-highlights{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.hs-pill{

    width:100%;

    box-sizing:border-box;


}

/* IMAGE */

.hs-image-wrapper{

    display:none;

}

   body{

    overflow-x:hidden;

}

   .hero-break{
    display:none;
}

}

/* ==========================================================
   WHAT'S AT STAKE
========================================================== */

.stake-section{
    background:#F8F6F2;
    padding:50px 0;
}

.stake-header{
    max-width:760px;
    margin:0 auto 70px;
    text-align:center;
}

.stake-header .section-eyebrow{
    justify-content:center;
    margin-bottom:21px;
}

.stake-title{
    font-size:42px;
    font-weight:700;
    line-height:1.2;
    color:#0B1F3A;
    margin-bottom:32px;

}

.stake-intro{
    font-size:18px;
    line-height:1.8;
    color:#555;
    max-width:760px;
    margin:0 auto;
}

/* ==========================
   GRID
========================== */

.stake-grid{

    display:grid;

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

    gap:18px;

    margin-top:25px;

}

/* ==========================
   CARD
========================== */

.stake-card{

    background:#FFFFFF;

    border:1.5px solid rgba(210,138,23,.55);

    border-radius:21px;

    padding:21px 21px;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.stake-card:hover{

    transform:translateY(-5px);

    border-color:#D4A137;

    box-shadow:0 12px 28px rgba(210,138,23,.12);

}

.stake-card:hover h3{

    color:#D4A137;
    margin-bottom:12px;

}

.stake-card:hover .stake-icon{

    transform:rotate(45deg);

}

/* Gold Accent */

.stake-icon{

    color:#A86709;

    font-size:1.15rem;

    margin-bottom:12px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

}

.stake-card h3{

    font-size:1.15rem;

    color:#16345A;

     margin:12px 0 10px;

    font-weight:700;

}

.stake-card p{

    font-size:.87rem;

    color:#6B7280;

    line-height:1.45;

}

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

@media(max-width:992px){

.stake-grid{

    grid-template-columns:1fr;

}

.stake-header{

    margin-bottom:50px;

}

}

@media(max-width:768px){

.stake-section{

    padding:70px 0;

}

.stake-title{

    font-size:30px;

}

   .stake-intro{

    font-size:15.68px;

}

.stake-card{

    padding:28px;

}

   .stake-grid{
    grid-template-columns:1fr;
    gap:18px;
}

   .stake-card{
    padding:18px 20px;
    border-radius:18px;
    min-height:auto;
}

.stake-card i{
    font-size:1.45rem;
    margin-bottom:18px;
}

.stake-card h3{
    font-size:1.2rem;
    line-height:1.2;
    margin-bottom:14px;
}

   .stake-card p{
    font-size:0.98rem;
    line-height:1.65;
    margin:0;
}

}

/* =====================================================
   SEARCH PROCESS
===================================================== */

.search-process{
    background:#ffffff;
    padding:65px 0 80px;
}

.search-process .section-heading{
    text-align:center;
    max-width:760px;
    margin:0 auto 55px;
}

.search-process .section-heading h2{
    margin-top:18px;
    margin-bottom:18px;
   font-size:42px;
   color:#0B1F3A;
}

.search-process .section-heading p{
    max-width:620px;
    margin:18px auto 0;
   font-size:18px;
   color:#555;
}

/* Timeline */

.process-timeline{

    position:relative;

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

    gap:50px;

}

.process-line{

    position:absolute;

    top:22px;
    left:22px;
    right:22px;

    height:2px;

    background: #D8DEE8;

    z-index:0;

}

.process-step{

    position:relative;

    z-index:2;
   transition:transform .3s ease;

}

.step-number{

    width:46px;
    height:46px;

    border-radius:50%;

    background:#13233C;

    color:#fff;

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

    font-size:18px;
    font-weight:700;

    margin-bottom:24px;

   transition:all .3s ease;

}

.process-step:hover{
    transform:translateY(-5px);
}

.process-step:hover .step-number{

    background:#D28A17;

    transform:scale(1.08);

}

.process-step h3{

    font-size:19.2px;

    font-weight:600;

    color:#13233C;

    margin-bottom:6px;

}

.process-step p{

    font-size:.92rem;
  
    color:#5f6672;

    line-height:1.55;

    max-width:230px;

}

@media (max-width:991px){

.process-timeline{

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

    gap:50px 40px;

}

.process-line{

    display:none;

}

}

@media (max-width:767px){

.search-process{

    padding:50px 0 60px;

}

.search-process .section-heading{

    margin-bottom:50px;
   font-size:40px;
line-height:1.2;
}

.process-timeline{

    grid-template-columns:1fr;

    gap:20px;

}

.process-step{

    position:relative;
    padding-left:64px;
    min-height:52px;
    margin-bottom:38px;

}

   .process-step:last-child{
    margin-bottom:0;
}

.step-number{

    position:absolute;

   width:46px;
    height:46px;

    font-size:18px;

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

   left:0;
    top:0;

}

.process-step::before{

    content:"";

    position:absolute;

    left:22px;
    top:46px;

    width:2px;
    height:calc(100% + 8px);

    background:#D8DEE8;

}

.process-step:last-child::before{

    display:none;

}

.process-step h3{

   font-size:19.2px;
    margin:0 0 8px;
   line-height:1.25;
    
}

.process-step p{

   margin:0;
    max-width:100%;
   font-size:15.68px;
    line-height:1.65;

}

   .process-heading{
    font-size:2.15rem;
    line-height:1.2;
    max-width:310px;
    margin:0 auto 14px;
}

   .process-description{
    font-size:18px;
    line-height:1.65;
    max-width:315px;
    margin:0 auto 28px;
}

   .search-process .section-heading h2{
       font-size:30px;
   
}

.search-process .section-heading p{
    
   font-size:15.68px;
   
}

}



/*=========================================
OPTIONAL ADD-ON
=========================================*/

.optional-addon{

    background:#13233C;

    padding:50px 0;

   }

.addon-box{

    max-width:1175px;

   width:90%;

    margin:0 auto;

    border:1px solid rgba(210,138,23,.45);

    border-left:5px solid #D28A17;;

    border-radius:12px;

    background:#FFFFFF;

    padding:28px 34px;

   box-shadow:0 12px 30px rgba(0,0,0,.18);

}

.addon-badge{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    color:#D28A17;

    font-weight:700;

    font-size:1.10rem;

}

.addon-badge i{

    font-size:18px;

}

.addon-box p{

    margin:0;

    color:#4B5563;

    line-height:1.8;

}


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

.solution-cta{

    background:#F8F6F1;

    text-align:center;

     padding:50px 0 90px;

}

.solution-cta h2{

    color:#0B1F3A;

    font-size:44px;

    margin-bottom:20px;

}

.solution-cta p{

    max-width:720px;

    margin:0 auto 40px;

    color:#555;

    line-height:1.8;

   font-size:18px;

}

@media (max-width:767px){

.solution-cta p{
   font-size:15.68px;
    margin-bottom:50px;
}

   .solution-cta h2{
      font-size:30px;
      line-height:1.2;
   }

  }


/*=========================================================
WHEN TO ENGAGE US - VERSION 2
=========================================================*/

.engage-v2{

    background:#F8F6F1;

    padding:80px 0;

}

.engage-v2-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.engage-v2-header h2{

    color:#0B1F3A;

    margin:20px 0;

   font-size: 42px;

}

.engage-v2-header p{

    color:#555;

    max-width:800px;

    margin:auto;

   font-size: 18px;

}

/*-----------------------------------
CONTENT
-----------------------------------*/

.engage-v2-content{

    display:grid;

    grid-template-columns:40% 60%;

    gap:55px;

    align-items:flex-start;

}

/*-----------------------------------
LEFT
-----------------------------------*/

.engage-v2-list{

    display:flex;

    flex-direction:column;

    gap:28px;

    padding-top:30px;

}

.engage-v2-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.engage-v2-item i{

    color:#D28A17;

    font-size:20px;

    margin-top:3px;

    flex-shrink:0;

}

.engage-v2-item span{

    color:#222;

    line-height:1.7;

}

/*-----------------------------------
RIGHT
-----------------------------------*/

.engage-v2-table{

    display:grid;

    grid-template-columns:1fr 1fr;

    border:2px solid #D28A17;

    border-radius:14px;

    overflow:hidden;

}

.compare-column{

    padding:38px;

    background:#EDF4FF;

}

.compare-column:first-child{

   border-right:2px solid rgba(210,138,23,.60);

}

.compare-column.with{

    background:#173F7A;

}

.compare-column h3{

    font-size:1.45rem;

    margin-bottom:22px;

    color:#13233C;

    font-weight:700;

}

.compare-column.with h3{

    color:#D28A17;

}

.compare-column ul{

    margin:0;

    padding-left:18px;

}

.compare-column li{

    margin-bottom:18px;

    line-height:1.7;

    color:#444;

}

.compare-column.with li{

    color:#fff;

}

.compare-column li::marker{

    color:#D28A17;

}

.search-comparison,
.engage-v2-table{

    box-shadow:0 12px 30px rgba(19,35,60,.08);

}

/*-----------------------------------
RESPONSIVE
-----------------------------------*/

@media(max-width:991px){

.engage-v2-content{

    grid-template-columns:1fr;

}

.engage-v2-table{

    margin-top:15px;

}

}

@media(max-width:767px){

.engage-v2{

    padding:60px 0;
}

.engage-v2-list{
    padding-top:10px;
    gap:18px;
}
   
   .engage-v2-header h2{
      font-size:30px;
    line-height:1.2;
    margin-bottom:14px;
   }

   .engage-v2-header p{
      font-size:15.68px;

    line-height:1.7;

    margin-bottom:28px;
   }

.engage-v2-table{

    grid-template-columns:1fr;

}

.compare-column:first-child{

    border-right:none;

    border-bottom:2px solid rgba(210,138,23,.45);

}

    .compare-column h3{
      font-size:21px;
   }

   .compare-column.with h3{
      font-size:21px;
   }

}