/* =========================================================================
   Vahan — Careers Page
   Figma: JmFGyR5BxquecSttAjGEsh  ·  node 2854:490  ·  1920 × 12932

   Loads on top of styles.css: nav, buttons, glows, header art, CTA card and
   footer are the shared site pieces; everything below re-positions them at
   their careers-page coordinates or adds the sections unique to this page.
   ========================================================================= */

.page{ height:12932px; }

/* ===================== HERO ===================== */
/* the hero is a two-column split: copy on the left, the India reach map on
   the right, so the shared centred hero type is re-flowed left */
.header-bg{ top:-135px; }

.hero-title{
  left:243px; top:263px;
  width:700px;
  text-align:left;
  text-transform:none;
}
.hero-sub{
  left:243px; top:490px;
  width:706px;
  text-align:left;
}
/* the collage spans from the wide bottom pill (x 789) to the last strip
   (x 1680); the strips sit on a 210px pitch inside it */
.hero-art{
  position:absolute;
  left:789px; top:88px;
  width:891px; height:798px;
  pointer-events:none;
}
.hero-strip{
  position:absolute;
  top:0;
  width:189px; height:798px;
  object-fit:cover;
}
.hero-strip:nth-of-type(1){ left:282px; }
.hero-strip:nth-of-type(2){ left:492px; }
.hero-strip:nth-of-type(3){ left:702px; }

.hero-pill{
  position:absolute;
  display:flex; align-items:center; justify-content:center; gap:17.399px;
  padding:3.316px 13.262px;
  border-radius:83.162px;
  font-size:23.726px;
  line-height:normal;
  color:var(--brown);
  white-space:nowrap;
  filter:drop-shadow(0 4.241px 2.651px #ffc9a2);
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 376 63' 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 -19.473 41.985 0 188 188.28)'><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%;
}
.hero-pill-dot{
  flex:none;
  width:9.543px; height:9.543px;
  border-radius:50%;
  background:#24af5c;
}
.hero-pill-top   { left:150px; top:26px;  width:376px; height:63px; }
.hero-pill-bottom{ left:0;     top:693px; width:553px; height:63px; }

/* Button — Figma gradient geometry for the 236.64 × 58 instance */
.roles-cta{
  left:243px; top:606px;
  width:236.6364px; height:58px;
  gap:8.909px;
  padding:13.3636px 26.7273px;
  border-radius:12px;
  font-size:22.27px;
  letter-spacing:-.4231px;
  filter:drop-shadow(0 0 1.114px rgba(128,115,115,.23));
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 236.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 16.223 0 118.32 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}
.roles-cta .arrow{ width:22.273px; height:22.273px; }
.roles-cta .arrow img{ width:13.92px; height:13.92px; }

/* ===================== shared section headings ===================== */
.careers-h2{
  position:absolute;
  left:436px;
  width:1048px; height:70px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  text-transform:capitalize;
  color:var(--brown);
}
.careers-h2-plain{ text-transform:none; }

.careers-sub{
  position:absolute;
  left:479px;
  width:963px; height:36px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  text-align:center;
  color:var(--brown);
}

/* ===================== OPEN ROLES ===================== */
.roles-title{ left:504px; top:4887.0742px; width:913px; }

/* --- filter dropdowns (Department / Role Type / Location) --- */
.role-filters{
  position:absolute;
  left:537px; top:5005.0742px;
  height:54.5547px;
  display:flex; align-items:center; gap:40px;
}
.role-select{
  position:relative;
  height:54.5547px;
  display:flex; align-items:center; justify-content:center;
  padding:6.777px 23.721px;
  border:1.084px solid #ffd1b2;
  border-radius:12px;
  background:#fff6ef;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.role-select-dept{ width:272px; }
.role-select-type{ width:240px; }
.role-select-loc { width:224px; }

.role-select:hover{ border-color:var(--orange); }
.role-select:focus-within{ border-color:var(--orange); }

.role-select select{
  width:100%;
  border:0;
  outline:none;
  background:transparent;
  padding-right:28.94px;      /* room for the caret: 16.943 gap + 12 icon */
  font-family:var(--body);
  font-weight:400;
  font-size:19.519px;
  line-height:40.664px;
  color:#000;
  text-align:center;
  text-align-last:center;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.role-select select.is-set{ font-weight:600; color:var(--orange); }
.role-select-caret{
  position:absolute;
  right:23.721px;
  width:12px; height:6.84px;
  pointer-events:none;
  transition:transform .2s ease;
}
.role-select:hover .role-select-caret{ transform:translateY(1px); }

.role-empty{
  position:absolute;
  left:242px; top:5107.6289px;
  width:1438px;
  font-size:20px;
  line-height:1.5;
  text-align:center;
  color:rgba(43,24,10,.6);
}
.role-empty[hidden]{ display:none; }

/* --- role groups --- */
.jobs{
  position:absolute;
  left:242px; top:5107.6289px;
  width:1438px;
  display:flex; flex-direction:column; gap:36px;
}
.job-group{
  width:1438px;
  background:#fff6ef;
  border-radius:12px;
  padding:56px 45px;
  display:flex; flex-direction:column; gap:57px;
}
.job-group.is-hidden{ display:none; }

.job-group-title{
  height:26px;
  font-family:var(--body);
  font-weight:600;
  font-size:36px;
  line-height:26px;
  letter-spacing:-.684px;
  color:var(--brown);
}
.job-rows{
  display:flex; flex-direction:column; gap:36px;
}
.job-row{
  height:54.5547px;
  display:flex; align-items:center;
}
.job-row.is-hidden{ display:none; }

.job-title{
  width:598px;
  margin-right:-9px;
  font-weight:600;
  font-size:24px;
  line-height:23px;
  letter-spacing:-.456px;
  color:var(--brown);
}
.job-loc{
  width:549px;
  margin-right:-9px;
  font-weight:500;
  font-size:22px;
  line-height:1.22;
  letter-spacing:-.418px;
  color:var(--brown);
}
.job-apply{
  flex:none;
  width:219px;
  padding:6.777px 23.721px;
  border-radius:12px;
  background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-weight:500;
  font-size:20px;
  line-height:40.664px;
  color:#fff;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.job-apply:hover{ background:#e2620d; transform:translateY(-2px); }

/* ===================== A PLACE TO LEARN, GROW ===================== */
.learn-title{ top:1006px; }

.learn-card{
  position:absolute;
  top:1124px;
  height:539.3802px;
  background:#fff;
  border-radius:12px;
  padding:16.66px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:37.486px;
  filter:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), filter .35s cubic-bezier(.16,1,.3,1);
}
.learn-card:hover{
  transform:translateY(-10px);
  filter:drop-shadow(0 10px 24px rgba(249,115,22,.55));
}
.learn-img{
  flex:1;
  width:100%;
  min-height:0;
  border-radius:12px;
  overflow:hidden;
}
.learn-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.learn-card:hover .learn-img img{ transform:scale(1.05); }

.learn-text{
  flex:none;
  width:100%;
  display:flex; flex-direction:column; align-items:center; gap:12.495px;
  text-align:center;
}
.learn-name{
  width:100%;
  font-family:var(--display);
  font-weight:400;
  font-size:28px;
  line-height:32.488px;
  letter-spacing:-.7497px;
  color:var(--brown);
}
.learn-desc{
  width:344.662px;
  font-size:20px;
  line-height:28.114px;
  color:rgba(43,24,10,.7);
}

/* ===================== WHY WE EXIST ===================== */
.why-title{ left:504px; top:1789.3801px; width:913px; }

.os-why-text{
  position:absolute;
  left:240px; top:1909.3801px;
  width:785px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  color:var(--brown);
}
/* the design separates the blocks with an empty line of body copy */
.os-why-text p + p{ margin-top:36px; }
.os-why-text b{ font-weight:600; }

/* ---- the founding-story slideshow ----
   Six frames cross-fade inside the 604 x 701 card; the dot rail sits 39 px off
   the bottom, the current slide widening into a pill. The aspect-ratio is what
   holds the card open on mobile, where responsive.css drops the fixed height. */
.os-why-img{
  position:absolute;
  left:1076px; top:1919.3801px;
  width:604px; height:701px;
  aspect-ratio:604 / 701;
  border-radius:19.989px;
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  /* the browser keeps vertical scrolling; horizontal is ours to read as a swipe */
  touch-action:pan-y;
}
.os-why-img:focus-visible{
  outline:3px solid #f97619;
  outline-offset:3px;
}
.os-why-img img{ width:100%; height:100%; object-fit:cover; display:block; }

.os-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .9s ease;
}
.os-slide.is-active{ opacity:1; }

.os-dots{
  position:absolute;
  left:0; right:0; bottom:39px;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
  gap:7.59px;
}
.os-dot{
  position:relative;
  flex:none;
  width:13.915px; height:13.915px;
  padding:0; border:0;
  border-radius:99px;
  background:#d9d9d9;
  cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:width .45s cubic-bezier(.16,1,.3,1), background-color .25s ease;
}
/* the dot draws at the size the design sets but takes a finger-sized target */
.os-dot::after{
  content:"";
  position:absolute;
  inset:-11px -5px;
}
.os-dot:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
}
.os-dot:hover{ background:#fff; }
.os-dot.is-active{ width:61.983px; }

@media (prefers-reduced-motion: reduce){
  .os-slide{ transition:none; }
  .os-dot{ transition:none; }
}

/* ===================== THE JOURNEY ===================== */
.journey-title{ left:418px; top:2755.3801px; }

/* One row = year · arrow · gradient band, laid out on the 240 → 1680 stage.
   Rows repeat every 162 px; the dotted connector hangs off each row except
   the last. */
.os-jr{
  position:absolute;
  left:258px;
  width:1404px; height:124px;
  display:flex; align-items:center;
}
.os-jr-year{
  flex:none;
  width:100px;
  font-family:var(--display);
  font-weight:500;
  font-size:42px;
  line-height:70px;
  text-align:center;
  color:var(--brown);
}
.os-jr-arrow{
  flex:none;
  margin-left:57px;
  width:24px; height:24px;
}
.os-jr-band{
  flex:none;
  margin-left:61px;
  width:1162px; height:124px;
  display:flex; align-items:center;
  padding:0 22px 0 57px;
  /* Figma "Vahan gradient" at 25 % — peach at the year end, fading right */
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1162 124' 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.25'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(141.35 0 0 478.52 -184 62)'><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%;
}
.os-jr-text{
  font-size:26px;
  line-height:1.5;
  letter-spacing:-.494px;
  color:var(--brown);
}
.os-jr-text b{ font-weight:600; color:#f97619; }

.os-jr-dot{
  position:absolute;
  left:49px; top:106px;
  width:2px; height:74px;
}

/* ===================== LIFE AT VAHAN ===================== */
.life-title{ top:3958.3801px; }
.life-sub  { top:4056.3801px; }

/* Three panels on a 1438 stage: the centre one is larger;
   the flankers are clipped by .life-carousel's overflow:hidden. */
.life-carousel{
  position:absolute;
  left:242px; top:4097.3801px;
  width:1438px; height:628px;
  overflow:hidden;
}
.life-track{
  position:absolute;
  left:-259px; top:42px;
  width:1956px; height:539px;
}
.life-slide{
  position:absolute;
  padding:16.66px;
  border-radius:12px;
  background:#fff;
  filter:drop-shadow(0 0 4.686px rgba(249,115,22,.5));
  cursor:pointer;
  transition:left .5s cubic-bezier(.16,1,.3,1), top .5s cubic-bezier(.16,1,.3,1),
             width .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1);
}
.life-slide-prev  { left:0px;    top:37px; width:592px; height:465px; }
.life-slide-active{ left:634px;  top:0;    width:688px; height:539px; }
.life-slide-next  { left:1364px; top:37px; width:592px; height:465px; }

.life-media{
  position:relative;
  width:100%; height:100%;
  border-radius:12px;
  overflow:hidden;
  background:var(--peach);
}
.life-media > img:first-child{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.life-slide:hover .life-media > img:first-child{ transform:scale(1.04); }

.life-play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:152px; height:152px;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.life-slide:hover .life-play{ transform:translate(-50%,-50%) scale(1.08); }
.life-play{ cursor:pointer; }
/* the play button only belongs to the centre panel — hidden and inert on the
   flankers so clicking those still rotates the carousel */
.life-slide:not(.life-slide-active) .life-play{ opacity:0; pointer-events:none; }

.life-dots{
  position:absolute;
  left:902px; top:4750.3799px;
  height:10.69px;
  display:flex; align-items:center; gap:12px;
}
.life-dot{
  width:10.69px; height:10.69px;
  border-radius:132px;
  background:var(--orange);
  opacity:.35;
  cursor:pointer;
  transition:width .35s ease, opacity .35s ease;
}
.life-dot:hover{ opacity:.6; }
.life-dot.active{ width:88.22px; opacity:1; }

/* ===================== OUR VALUES ===================== */
.values-title{ top:7168.7305px; }
.values-sub{ top:7266.7305px; }

/* no hover animation here, by design */
.value-card{
  position:absolute;
  width:348px; min-height:343px;
  border-radius:24px;
  padding:36px;
  display:flex; flex-direction:column; align-items:flex-start; gap:43px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 348 343' 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.32'/><defs><radialGradient id='g' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0 -94.077 95.448 0 174 863.7)'><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%;
}
.value-icon{
  flex:none;
  width:100px; height:100px;
  border-radius:99px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' 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 -20.023 7.2334 0 50 190)'><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%;
}
.value-icon img{ width:54px; height:54px; }

.value-text{
  width:276px;
  display:flex; flex-direction:column; gap:18px;
}
.value-name{
  font-family:var(--display);
  font-weight:500;
  font-size:24px;
  line-height:normal;
  color:var(--brown);
}
.value-desc{
  font-size:20px;
  line-height:normal;
  color:rgba(43,24,10,.7);
}

/* ===================== JOIN A TEAM MAKING HEADLINES =====================
   One wide press card on the 1440 stage: the headline and its button on the
   left, the team photo on the right — Figma node 2719:694. */
.news-title{ left:408px; top:8215.7305px; width:1104px; }

.news-card{
  position:absolute;
  left:240px; top:8369.7305px;
  width:1440px; height:449px;
  border-radius:24px;
  background:var(--peach);
}
.news-col{
  position:absolute;
  left:42px; top:72px;
  width:554px; height:305px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.news-card-title{
  width:540px;
  font-family:var(--display);
  font-weight:400;
  font-size:30px;
  line-height:normal;
  color:#000;
}
.news-card-btn{
  position:relative;
  align-self:flex-start;
  width:236.6364px; height:58px;
  gap:8.909px;
  padding:13.364px 26.727px;
  border-radius:12px;
  font-size:22.27px;
  letter-spacing:-.4231px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 236.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 16.223 0 118.32 70.523)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
  transition:transform .2s ease;
}
.news-card-btn:hover{ transform:translateY(-2px); }
.news-card-btn .arrow{ width:22.273px; height:22.273px; }
.news-card-btn .arrow img{ width:13.92px; height:13.92px; }

.news-photo{
  position:absolute;
  left:652px; top:32px;
  width:746px; height:385px;
  border-radius:19.989px;
  overflow:hidden;
  background:#fff;
}
.news-photo img{ width:100%; height:100%; object-fit:cover; }

/* ===================== INSIGHTS FROM INDIA'S BLUE-COLLAR ECOSYSTEM =====
   Two blog cards on the 1438 content stage — Figma nodes 2719:710 / 2719:726. */
.insights-title{ left:374px; top:10626.7305px; width:1172px; }

.insights-card{
  position:absolute;
  top:10780.7305px;
  width:699px; height:748px;
  padding:35.093px;
  border-radius:24px;
  background:var(--peach);
  display:flex; flex-direction:column; align-items:center; gap:42px;
  text-decoration:none;
  color:inherit;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.insights-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(249,118,25,.20), 0 4px 14px rgba(0,0,0,.05);
}

.insights-card-img{
  position:relative;
  width:628.813px; height:456.791px;
  flex:none;
  border-radius:24px;
  overflow:hidden;
  background:#fff;
}
/* the swiggy-vs-zomato export ships with the card frame baked into its
   margins; the design crops past it by pulling a 903 x 537 copy to
   -141.09 / -41.09 inside the 628.8 x 456.8 window */
.insights-card-img-zoom img{
  position:absolute;
  left:-22.437%; top:-8.996%;
  width:143.605% !important; height:117.559% !important;
}
.insights-card-img img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.insights-card:hover .insights-card-img img{ transform:scale(1.03); }

.insights-card-body{
  width:571px;
  display:flex; flex-direction:column; gap:48px;
}
.insights-card-title{
  font-family:var(--display);
  font-weight:400;
  font-size:30px;
  line-height:normal;
  color:#000;
}
.insights-card-btn{
  position:relative;
  align-self:flex-start;
  height:60.454px;
  gap:8.572px;
  padding:12.858px 25.715px;
  border-radius:10px;
  font-size:23.55px;
  letter-spacing:-.4474px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 253.43 60.45' 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.472 17.375 0 126.72 73.506)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>");
}
.insights-card-btn .arrow{ width:21.43px; height:21.43px; }
.insights-card-btn .arrow img{ width:13.4px; height:13.4px; }

/* ===================== BACKED BY THE BEST ===================== */
.backers-band{
  position:absolute;
  left:0; top:8944.7305px;
  width:1920px; height:560px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 1920 560' 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 -138.15 171.11 0 960 969.73)'><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%;
}
.backers-title{ top:9036.7305px; }
.backer{ position:absolute; }

/* ===================== PERKS & BENEFITS ===================== */
.perks-title{ top:9630.7305px; }
.perks-sub{ left:471px; top:9728.7305px; }

.perk-card{
  position:absolute;
  width:416px; height:320px;
  border-radius:24px;
  padding:36px;
  display:flex; flex-direction:column; align-items:flex-start; gap:43px;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 416 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 114.1 0 208 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%;
  text-decoration:none;
  color:inherit;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
/* the Wellness Leaves drop shadow, applied on hover */
.perk-card:hover{
  transform:translateY(-6px);
  box-shadow:0 4px 0 0 rgba(249,118,25,.72);
}
.perk-icon{
  flex:none;
  width:48px; height:48px;
  border-radius:10px;
  background:rgba(249,115,22,.2);
  display:flex; align-items:center; justify-content:center;
}
.perk-icon img{ width:24px; height:24px; }
.perk-name{
  font-family:var(--display);
  font-weight:500;
  font-size:24px;
  line-height:30px;
  color:#262729;
  white-space:nowrap;
}
.perk-desc{
  width:334px;
  font-size:20px;
  line-height:28px;
  color:rgba(43,24,10,.7);
  opacity:.7;
}

/* ===================== CTA ===================== */
.cta{ top:11655px; height:551.2695px; }
.cta-bg{ height:551.2695px; }
.cta-text{
  left:95px; top:95px;
  width:691px; height:182px;
  display:flex; flex-direction:column; justify-content:center;
  font-size:60.856px;
  line-height:73.897px;
  text-align:left;
  text-transform:capitalize;
}
.cta-sub{
  position:absolute;
  left:95px; top:260.2720px;
  width:745px; height:83.6748px;
  display:flex; flex-direction:column; justify-content:center;
  font-weight:500;
  font-size:32px;
  line-height:68px;
  text-align:left;
  color:#fff;
}
.cta-btn{ left:95px; top:365px; width:297.6364px; }
.cta-btn-alt{ left:423.1362px; width:292.6364px; }

/* the three HR portraits and their caption, hung off the card's right end */
.cta-faces{
  position:absolute;
  left:931px; top:109px;
  width:453px; height:324px;
  pointer-events:none;
}
.cta-face{
  position:absolute;
  width:159.9034px; height:159.9034px;
  border-radius:50%;
  border:2.327px solid #fff;
  object-fit:cover;
  background:#ffe4d0;
}
.cta-face-1{ left:44px; top:0; }
.cta-face-2{ left:0; top:169px; }
.cta-face-3{ left:208px; top:98px; }
.cta-faces-pill{
  position:absolute;
  left:193px; top:284px;
  width:260px; height:39.5437px;
  display:flex; align-items:center; justify-content:center; gap:10.875px;
  padding:2.072px 8.289px;
  border-radius:51.976px;
  font-size:14.829px;
  line-height:normal;
  color:var(--brown);
  white-space:nowrap;
  filter:drop-shadow(0 2.651px 1.657px #ffc9a2);
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 260 39.544' 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 -12.223 29.032 0 130 118.18)'><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%;
}
.cta-faces-pill .hero-pill-dot{ width:5.964px; height:5.964px; }

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