/* =========================================================================
   Vahan — Recruitment Leaders
   Figma: JmFGyR5BxquecSttAjGEsh  ·  node 1788:2587  ·  1920 × 7335

   Loads on top of styles.css: nav, buttons, hero form, logo strip, stats band,
   CTA card and footer are the shared site pieces; everything below re-positions
   them at their recruitment-agencies coordinates or adds the sections unique to
   this page.
   ========================================================================= */

.page{ height:7335px; }

/* ===================== HERO ===================== */
/* the hero is a two-column split: copy and the sign-up field on the left, a
   collage of partner cards and riders on the right */
.header-bg{ top:-177px; }

/* Figma sets this headline at 68px on 87px leading — the shared hero is 86px */
.hero-title{
  left:240px; top:195px;
  width:700px; height:261px;
  font-size:68px;
  line-height:87px;
  text-align:left;
  text-transform:capitalize;
}
.hero-sub{
  left:240px; top:482px;
  width:790px; height:72px;
  text-align:left;
}
.hero-field{ left:240px; top:578px; }
.hero-cta{
  left:541px; top:578px;
  width:162.6364px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 162.64 58' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -11.007 11.15 0 81.32 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}
.hero-note{
  left:240px; top:660px;
  width:397px;
  text-align:left;
}

/* ---- hero collage ---- */
/* the collage ships from Figma as one flattened artwork (photo + the AI hot
   leads card + the speech bubble), so it is a single positioned image here */
.rl-hero-art{
  position:absolute;
  left:1054px; top:172px;
  width:686px; height:600px;
  object-fit:contain;
}

.logo-strip{ top:783px; }

/* ===================== STATS ===================== */
.stats-band{ left:0; top:1005px; }
.stat-card{ top:1100px; }
.stat-body{ top:1175px; }

/* ===================== ONE PLATFORM ===================== */
.plat-title{
  position:absolute;
  left:504px; top:1568px;
  width:913px; height:140px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  text-transform:capitalize;
  color:var(--brown);
}
.plat-sub{
  position:absolute;
  left:479px; top:1732px;
  width:963px; height:36px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  text-align:center;
  color:var(--brown);
}

.plat-list{
  position:absolute;
  left:242px; top:1817px;
  width:765px; height:818px;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.plat-item{
  width:765px;
  border:0;
  border-radius:24px;
  padding:40px 20px 40px 40px;
  background:transparent;
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
  cursor:pointer;
  transition:background-color .4s ease;
}
.plat-item.plat-active{ background:#fff; }

.plat-head{
  height:48px;
  display:flex; align-items:center; gap:18px;
}
.plat-icon{
  width:48px; height:48px;
  flex:none;
  border-radius:14px;
  background:#efe7dd;
  display:flex; align-items:center; justify-content:center;
  transition:background .4s ease;
}
.plat-icon img{ width:32px; height:32px; }
.plat-active .plat-icon{
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -9.1091 3.2908 0 24 58.364)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}
/* the icons ship in a single dark weight — invert them on the orange chip */
.plat-active .plat-icon img{ filter:brightness(0) invert(1); }

.plat-name{
  font-family:var(--display);
  font-weight:400;
  font-size:32px;
  line-height:1.5;
  letter-spacing:-.352px;
  text-transform:capitalize;
  color:rgba(43,24,10,.7);
  white-space:nowrap;
  transition:color .3s ease;
}
.plat-active .plat-name{ color:var(--brown); }
.plat-item:not(.plat-active):hover .plat-name{ color:var(--brown); }

.plat-desc{
  width:462px;
  font-family:var(--body);
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.22px;
  color:rgba(0,0,0,.8);

  max-height:0;
  opacity:0;
  overflow:hidden;
  margin-top:0;
  transition:max-height .4s ease, opacity .4s ease, margin-top .4s ease;
}
.plat-active .plat-desc{
  max-height:150px;
  opacity:1;
  margin-top:15.4px;
}

.plat-visual{
  position:absolute;
  left:1071px; top:1816px;
  width:607px; height:818px;
  border-radius:24px;
  overflow:hidden;
}
.plat-visual img{
  position:absolute;
  left:0; top:0;
  width:607px; height:818px;
  border-radius:24px;
  object-fit:cover;
  transition:opacity .3s ease;
}
.plat-visual img.fade-out{ opacity:0; }

.plat-cta{
  left:839px; top:2697px;
  width:221px; height:58px;
  gap:8px;
  padding:12px 24px;
  border-radius:10px;
  font-size:23px;
  letter-spacing:-.437px;
}

/* ===================== EVERYTHING YOU NEED ===================== */
.need-title{
  position:absolute;
  left:436px; top:2862px;
  width:1048px; height:140px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  text-transform:capitalize;
  color:var(--brown);
}

.need-card{
  position:absolute;
  width:700px; height:320px;
  border-radius:24px;
  padding:36px;
  display:flex; flex-direction:column; align-items:flex-start; gap:43px;
  box-shadow:0 0 2.5px 0 rgba(43,24,10,.18);
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 700 320' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)' opacity='0.18'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -87.769 191.99 0 350 805.78)'><stop stop-color='rgba(249,118,25,0.72)' offset='0'/><stop stop-color='rgba(250,135,54,0.755)' offset='0.125'/><stop stop-color='rgba(251,152,83,0.79)' offset='0.25'/><stop stop-color='rgba(252,187,140,0.86)' offset='0.5'/><stop stop-color='rgba(254,221,198,0.93)' offset='0.75'/><stop stop-color='rgba(255,255,255,1)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.need-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 26px rgba(249,118,25,.22);
}
.need-icon{
  flex:none;
  width:74px; height:74px;
  border-radius:12px;
  background:rgba(249,118,25,.2);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.need-name{
  font-family:var(--display);
  font-weight:500;
  font-size:28px;
  line-height:30px;
  color:#262729;
  white-space:nowrap;
}
.need-desc{
  font-size:22px;
  line-height:28px;
  color:rgba(43,24,10,.7);
  opacity:.7;
}

/* the orange payout promise slab that leads the pair of banners */
.need-banner-paid{
  position:absolute;
  left:240px; top:3768px;
  width:1440px; height:189px;
  border-radius:16px;
  overflow:hidden;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 189' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -35.867 98.723 0 720 229.81)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}
.need-banner-paid-inner{
  position:absolute;
  left:39px; top:25px;
  width:1362px; height:139px;
  display:flex; align-items:center; justify-content:space-between;
}
.need-banner-paid-copy{
  width:1138px;
  display:flex; flex-direction:column; gap:21px;
  color:#fff;
}
.need-banner-paid-title{
  width:678px; height:55px;
  font-weight:600;
  font-size:46px;
  line-height:1.5;
  letter-spacing:-.874px;
}
.need-banner-paid-sub{
  width:678px; height:34px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
}
.need-banner-paid-badge{
  flex:none;
  width:163px; height:139px;
  border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  filter:drop-shadow(0 0 1px rgba(128,115,115,.23));
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 163 139' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -42.964 18.201 0 81.5 415.42)'><stop stop-color='rgb(255,164,97)' offset='0'/><stop stop-color='rgb(255,187,136)' offset='0.25'/><stop stop-color='rgb(255,210,176)' offset='0.5'/><stop stop-color='rgb(255,232,215)' offset='0.75'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}
.need-banner-paid-badge b{
  font-weight:600;
  font-size:58px;
  line-height:normal;
  letter-spacing:-.437px;
  color:var(--orange);
}
.need-banner-paid-badge span{
  font-weight:600;
  font-size:23px;
  line-height:normal;
  letter-spacing:-.437px;
  color:var(--brown);
}

.need-banner{
  position:absolute;
  left:240px; top:4005px;
  width:1440px; height:122px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 40px 0 38px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 122' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -37.709 160.79 0 720 364.61)'><stop stop-color='rgb(255,164,97)' offset='0'/><stop stop-color='rgb(255,187,136)' offset='0.25'/><stop stop-color='rgb(255,210,176)' offset='0.5'/><stop stop-color='rgb(255,232,215)' offset='0.75'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}
.need-banner-text{
  width:900px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  color:var(--brown);
}
.need-banner-btn{
  position:relative;
  width:221px; height:58px;
  gap:8px;
  padding:12px 24px;
  border-radius:10px;
  font-size:23px;
  letter-spacing:-.437px;
}

/* ===================== PARTNER STORIES ===================== */
.stories-band{
  position:absolute;
  left:0; top:4200px;
  width:1920px; height:840px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 840' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)' opacity='0.52'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -207.23 171.11 0 960 1454.4)'><stop stop-color='rgb(255,164,97)' offset='0'/><stop stop-color='rgb(255,187,136)' offset='0.25'/><stop stop-color='rgb(255,210,176)' offset='0.5'/><stop stop-color='rgb(255,232,215)' offset='0.75'/><stop stop-color='rgb(255,255,255)' offset='1'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}
.stories-title{
  position:absolute;
  left:494px; top:4302px;
  width:932px; height:140px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  text-transform:capitalize;
  color:var(--brown);
}

.story-card{
  position:absolute;
  top:4490px;
  width:463px; height:343px;
  background:var(--peach);
  border-radius:7.336px;
  padding:25.5px 27px;
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.story-card:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 36px rgba(249,118,25,.28), 0 4px 14px rgba(255,156,56,.2);
}
.story-thumb{
  position:relative;
  width:409px; height:223px;
  flex:none;
  border-radius:8.006px;
  overflow:hidden;
  background:#000;
}
.story-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.story-card:hover .story-thumb img{ transform:scale(1.04); }

.story-play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.85);
  width:58px; height:58px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.story-play::after{
  content:"";
  margin-left:4px;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--orange);
}
.story-card:hover .story-play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.story-foot{
  width:409px; height:51px;
  display:flex; align-items:flex-start; justify-content:space-between;
  flex:none;
}
.story-name{
  width:292px; height:51px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--display);
  font-weight:400;
  font-size:19.126px;
  line-height:normal;
  color:#000;
  transition:color .2s ease;
}
.story-card:hover .story-name{ color:var(--orange); }
.story-time{
  flex:none;
  width:48px; height:24px;
  border-radius:5.275px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
  line-height:normal;
  color:#000;
}

.stories-btn{
  left:815px; top:4881px;
  width:291px; height:58px;
  gap:8px;
  padding:12px 24px;
  border-radius:10px;
  font-size:23px;
  letter-spacing:-.437px;
}

/* ===================== LOOKING FOR SOMETHING ELSE ===================== */
.else-title{
  position:absolute;
  left:482px; top:5124px;
  width:952px; height:70px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  text-transform:capitalize;
  color:var(--brown);
}

.explore{
  position:absolute;
  top:5242px;
  width:699px; height:877px;
  background:var(--peach);
  border-radius:24px;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.explore:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(249,118,25,.2), 0 4px 14px rgba(0,0,0,.05);
}
.explore-img{
  position:absolute;
  left:35.0934px; top:24.1044px;
  width:628.8132px; height:456.7912px;
  border-radius:23.396px;
  object-fit:cover;
}
.explore-body{
  position:absolute;
  left:51.5px; top:512.859px;
  width:596px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.explore-eyebrow{
  width:596px;
  font-family:var(--display);
  font-weight:500;
  font-size:34px;
  line-height:27px;
  letter-spacing:-.646px;
  color:var(--brown);
  white-space:nowrap;
}
.explore-desc{
  margin-top:44px;
  width:596px; height:108px;
  font-size:22px;
  line-height:36px;
  color:rgba(43,24,10,.8);
}
.explore-foot{
  margin-top:44px;
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
}
.explore-stat{
  font-weight:500;
  font-size:24px;
  line-height:36px;
  letter-spacing:-.264px;
  color:rgba(43,24,10,.8);
  white-space:nowrap;
}
.explore-btn{
  position:relative;
  width:221px; height:58px;
  gap:8px;
  padding:12px 24px;
  border-radius:10px;
  font-size:23px;
  letter-spacing:-.437px;
}
.explore-btn-wide{ width:auto; }
.explore-btn{ width:auto; }

/* the illustration ships without its baked-in CTA pill so it can carry the
   renamed label in the page font */
.explore-img-cta{
  position:absolute;
  left:352.0934px; top:364.1044px;
  height:41px;
  display:inline-flex; align-items:center; gap:9.06px;
  padding:0 19.92px;
  border-radius:999px;
  font-size:16px;
  line-height:1;
  color:#fff;
  white-space:nowrap;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 242 41' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%25' width='100%25' fill='url(%23g)'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='1' gradientTransform='translate(121 49.6) rotate(-90) scale(77.37 184.26)'><stop stop-color='rgb(255,156,56)'/><stop offset='1' stop-color='rgb(249,118,25)'/></radialGradient></defs></svg>");
  background-size:100% 100%;
}
.explore-img-cta img{ width:18.874px; height:18.874px; }

/* the phone mock's chat header, re-set so it follows the rename */
.explore-img-app{
  position:absolute;
  left:156.0934px; top:103.1044px;
  height:16px;
  display:flex; align-items:center;
  font-weight:600;
  font-size:10.5px;
  letter-spacing:-.1px;
  color:#fff;
  white-space:nowrap;
  pointer-events:none;
}

/* the stories heading carries four more words after the rename */
.stories-title{ left:240px; width:1440px; }

/* ===================== CTA ===================== */
.cta{ left:240px; top:6203px; width:1440px; height:448px; }
.cta-bg{ width:1440px; height:448px; }
.cta-text{
  left:300px; top:104px;
  width:841px; height:136px;
  font-size:56px;
  line-height:68px;
  text-transform:capitalize;
}
.cta-btn{
  left:518.5px; top:301px;
  width:405.6364px; height:73px;
}

/* ===================== FOOTER ===================== */
.footer{ top:6735px; }