/* =========================================================================
   Vahan — Corporate Page
   Figma: SkZlY6SRTTisFlKok443kh  ·  node 5:41  ·  1920 × 6911

   Loads on top of styles.css: the nav, buttons, stats, footer and case-study
   card are shared with the homepage; everything below either re-positions
   those shared pieces at their corporate-page coordinates or adds the
   sections that only exist on this page.
   ========================================================================= */

.page{ height:6911px; }

/* ===================== HERO =====================
   The hero is left-aligned on this page: the copy sits on the 242 px
   content edge and the photo collage fills the right half. */
.hero-title{
  left:242px; top:227px;
  width:752px; height:188px;
  font-size:78px;
  line-height:94px;
  text-align:left;
}
.hero-sub{
  left:242px; top:438px;
  /* Figma's box is 723px, but the copy here reads "onboards / retains"
     where the design says "onboard / retain" — a little wider than the
     design box, so the first line is given the room it needs. */
  width:760px;
  text-align:left;
}

.hero-field{ left:242px; top:534px; }
.hero-cta { left:543px; top:534px; }

.hero-note{
  left:242px; top:616px;
  width:567px;
  text-align:left;
}

.logo-strip{ top:783px; }

/* ---------- hero composition ----------
   Figma paints, back to front: the orange slab, the worker chip that tucks
   behind her hair, the recruiter cut-out, the two chips in front of her, and
   finally the two translucent stat cards. DOM order below matches that. */
.hero-art{
  position:absolute;
  left:0; top:0;
  width:1920px; height:900px;
  pointer-events:none;
  font-family:var(--ui);
  color:var(--brown);
}

/* Rectangle 4458 — the orange block she stands against */
.hero-slab{
  position:absolute;
  left:1399px; top:361px;
  width:258px; height:386px;
  border-radius:20px 20px 0 0;
  background:#fa7e20;
}

.hero-person{
  position:absolute;
  left:1357px; top:191px;
  width:508px; height:556px;
}

/* the three grayscale worker chips */
.hero-avatar{
  position:absolute;
  width:75.3278px; height:75.3278px;
  border-radius:50%;
  object-fit:cover;
}
.hero-avatar-1{ left:1499px; top:245px; }
.hero-avatar-2{ left:1728px; top:421px; }
.hero-avatar-3{ left:1411px; top:601px; }

/* ---------- hero stat cards ---------- */
.hero-card{
  position:absolute;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:6.962px;
  padding:20.885px;
  border-radius:11.934px;
  background:rgba(255,255,255,.6);
}
.hero-card-roles{ left:1105px; top:214px; width:343.6102px; }
.hero-card-hire { left:1105px; top:388px; width:315px; }

.hero-card-label{
  width:100%;
  font-size:18.896px;
  line-height:normal;
}
.hero-card-label-sm{ font-size:13.923px; }

.hero-roles-stats{
  width:100%;
  display:flex; align-items:center; gap:80.059px;
}
.hero-roles-count{
  font-size:18.896px;
  line-height:normal;
  white-space:nowrap;
}
.hero-roles-count b{
  font-weight:600;
  font-size:34.808px;
  color:#f97619;
}

.hero-pill{
  flex:none;
  padding:4.973px 19.89px;
  border-radius:49.229px;
  background:#e8f7ee;
  font-weight:600;
  font-size:12.285px;
  line-height:normal;
  color:#06a610;
  white-space:nowrap;
}

.hero-progress{
  position:relative;
  width:300.3464px; height:8.4535px;
  border-radius:49.229px;
  background:#f5e7d7;
}
.hero-progress span{
  position:absolute;
  left:0; top:0;
  width:237.1937px; height:100%;
  border-radius:49.229px;
  background:linear-gradient(to right,#fa9e46,#f9771a);
}

.hero-hire{
  display:flex; align-items:center; gap:6.962px;
}
.hero-hire-avatar{
  width:52.2126px; height:52.2126px;
  flex:none;
}
.hero-hire-name{
  font-weight:600;
  font-size:23.3707px;
  line-height:normal;
  white-space:nowrap;
}
.hero-hire-meta{
  font-size:14.918px;
  line-height:normal;
  white-space:nowrap;
}

/* ===================== THREE THINGS ===================== */
.three-title{
  position:absolute;
  left:495px; top:1581px;
  width:931px; height:140px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  color:var(--brown);
}

.feat{
  position:absolute;
  top:1792px;
  width:463px; height:692px;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  filter:drop-shadow(0 0 4.5px rgba(255,156,56,.5));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.feat:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(249, 118, 25, 0.28), 0 4px 14px rgba(255, 156, 56, 0.2);
}
.feat-img{
  position:absolute;
  left:0; top:0;
  width:463px; height:502px;
  border-radius:12px 12px 0 0;
  object-fit:cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.feat:hover .feat-img{
  transform: scale(1.03);
}
.feat-body{
  position:absolute;
  left:0; top:494px;
  width:463px; height:198px;
  background:#fff;
  border-radius:0 0 12px 12px;
  padding:0 50px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  text-align:center;
}
.feat-title{
  font-family:var(--display);
  font-weight:500;
  font-size:28px;
  line-height:31.2px;
  letter-spacing:-.72px;
  color:var(--brown);
}
.feat-desc{
  font-size:20px;
  line-height:27px;
  color:rgba(43,24,10,.7);
}

/* ===================== AI AGENTS ===================== */
.agents-title{
  position:absolute;
  left:567px; top:2584px;
  width:786px; height:140px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:70px;
  text-align:center;
  color:var(--brown);
}

.agents-list{
  position:absolute;
  left:242px; top:2809px;
  width:765px; height:715px;
  overflow:hidden;
}
.agent-item{
  width:765px;
  border-radius:24px;
  padding:40px 20px 40px 40px;
  display:flex; flex-direction:column;
  cursor:pointer;
  transition: background-color 0.4s ease;
}
.agent-item.agent-active{ background:#fff; }

.agent-head{
  height:48px;
  display:flex; align-items:center; gap:18px;
}
.agent-icon{
  width:48px; height:48px;
  flex:none;
  border-radius:14px;
  background:#efe7dd;
  display:flex; align-items:center; justify-content:center;
}
.agent-active .agent-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%;
}
.agent-icon .icon-active { display: none; }
.agent-active .agent-icon .icon-inactive { display: none; }
.agent-active .agent-icon .icon-active { display: block; }
.agent-name{
  font-family:var(--display);
  font-weight:400;
  font-size:32px;
  line-height:1.5;
  letter-spacing:-.352px;
  text-transform:capitalize;
  color:#94877c;
  white-space:nowrap;
}
.agent-active .agent-name{ color:var(--brown); }

.agent-desc{
  width:593px;
  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 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}
.agent-active .agent-desc{
  max-height:150px;
  opacity:1;
  margin-top:15.4px;
}

.agents-visual{
  position:absolute;
  left:1071px; top:2808px;
  width:607px; height:718px;
  border-radius:24px;
  overflow:hidden;
}
.agents-visual img{
  position:absolute;
  left:0; top:0;
  width:607px; height:718px;
  border-radius:inherit;
  object-fit:cover;
  transition: opacity 0.3s ease;
}
.agents-visual img.fade-out {
  opacity: 0;
}

/* ===================== CASE STUDIES ===================== */
.case-band { top:3688px; }
.case-title{ top:3768px; }

.case-slider{
  top:3956px;
}
.case-dots{
  top:4441px;
}

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

.explore{
  position:absolute;
  top:4764px;
  width:699px; height:905px;
  background:var(--peach);
  border-radius:24px;
}
.explore-img{
  position:absolute;
  left:35.0934px; top:35.0934px;
  width:628.8132px; height:456.7912px;
  border-radius:23.396px;
}
.explore-body{
  position:absolute;
  left:92.6356px; top:533.8846px;
  width:513.7287px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.explore-eyebrow{
  width:513.7287px;
  font-family:var(--display);
  font-weight:500;
  font-size:34px;
  line-height:1.22;
  letter-spacing:-.646px;
  color:var(--brown);
  /* Figma: text-box-trim (cap / alphabetic) */
  text-box-trim:trim-both;
  text-box-edge:cap alphabetic;
}
@supports not (text-box-trim: trim-both){
  .explore-eyebrow{ margin-top:-9.66px; margin-bottom:-7.54px; }
}

.explore-copy{
  margin-top:23.396px;
  width:513.7287px; height:145.2478px;
  display:flex; flex-direction:column; justify-content:center; gap:11.698px;
}
.explore-head{
  font-weight:500;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.264px;
  color:var(--brown);
}
.explore-desc{
  width:484.4842px;
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.22px;
  color:rgba(43,24,10,.8);
}

.explore-foot{
  margin-top:15.597px;
  width:491.3079px;
  display:flex; flex-direction:column; align-items:flex-start; gap:23.396px;
}
.explore-stat{
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.264px;
  color:rgba(43,24,10,.8);
  white-space:nowrap;
}
.explore-stat b{ font-weight:500; }

.explore-btn{
  position:relative;
  height:55px;
  gap:7.799px;
  padding:11.698px 23.396px;
  font-size:19.5px;
  letter-spacing:-.3705px;
  filter:drop-shadow(0 0 .975px rgba(128,115,115,.23));
}
.explore-btn .arrow{ width:19.496px; height:19.496px; }
.explore-btn .arrow img{ width:12.185px; height:12.185px; }

/* the labels grew with the rename, so the pills size to their text */
.explore-btn-partners{ width:auto; }
.explore-btn-jobs    { width:auto; }

/* the illustration ships without its baked-in caption and CTA pill so both can
   carry the renamed labels in the page font */
.explore-img-cap{
  position:absolute;
  left:97.2985px; top:244.7444px;
  width:318.596px; height:21px;
  display:flex; align-items:center;
  font-size:15px;
  line-height:21px;
  color:var(--brown);
  white-space:nowrap;
  pointer-events:none;
}
.explore-img-cta{
  position:absolute;
  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 269 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(134.5 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; }
.explore-img-cta-partners{ left:97.2985px; top:371.3214px; height:40.768px; }
.explore-img-cta-jobs    { left:352.0934px; top:375.0934px; height:41px; }

/* the phone mock's chat header, re-set so it follows the rename */
.explore-img-app{
  position:absolute;
  left:156.0934px; top:114.0934px;
  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;
}

.grad-303{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 303.09 55' 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 -10.438 20.779 0 151.54 66.875)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }
.grad-241{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 241 55' 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 -10.438 16.522 0 120.5 66.875)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }

/* ===================== CTA ===================== */
.cta{ left:243px; top:5752px; }
/* The button instance is scaled 1.659x in Figma (73px tall), so its 10px
   corner radius scales with it — the shared 10px was too square here. */
.cta-btn{ left:527px; width:395.6363px; border-radius:16.59px; }

/* ===================== FOOTER ===================== */
.footer{ top:6311px; }
.footer-copy { top:541.5850px; }
.footer-legal{ top:540.4463px; }