/* =========================================================================
   Vahan — Contact Us Page
   Figma: SkZlY6SRTTisFlKok443kh  ·  node 7:1701  ·  1920 × 2503

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

.page{ height:2503px; }

/* ===================== background art ===================== */
.contact-glow{
  position:absolute;
  left:-242.03px; top:1001.97px;
  width:2406px; height:2406px;
  pointer-events:none;
}
.header-bg{ top:0; }
.wave-band{
  position:absolute;
  left:0; top:576px;
  width:1920px; height:1159px;
  pointer-events:none;
}

/* ===================== HERO ===================== */
.contact-title{
  position:absolute;
  left:240px; top:271px;
  width:709px; height:138px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  line-height:normal;
  color:var(--brown);
}
.contact-sub{
  position:absolute;
  left:240px; top:438px;
  width:691px; height:72px;
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.456px;
  color:#000;
}
.contact-stat-num{
  position:absolute;
  top:544.9573px;
  font-family:var(--display);
  font-weight:600;
  font-size:30.093px;
  line-height:1.5;
  letter-spacing:-.5718px;
  color:#000;
  white-space:nowrap;
}
.contact-stat-label{
  position:absolute;
  top:588.9573px;
  font-size:19.345px;
  line-height:1.5;
  letter-spacing:-.3676px;
  color:#000;
  white-space:nowrap;
}

/* ===================== FORM CARD ===================== */
.form-card{
  position:absolute;
  left:1002px; top:214px;
  width:678px; height:453px;
  background:#fff;
  border-radius:16px;
}
.form-grid{
  position:absolute;
  left:32px; top:30px;
  width:614px; height:294px;
  display:grid;
  grid-template-columns:repeat(2, 293px);
  grid-template-rows:repeat(3, 79.3333px);
  gap:28px;
}
.form-field{
  background:#f6f6f6;
  border-radius:8px;
  padding:10px 18px;
  display:flex; align-items:center;
}
.form-field input,
.form-field select{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-family:var(--body);
  font-weight:400;
  font-size:18px;
  line-height:27.128px;
  color:#000;
}
.form-field input::placeholder{ color:rgba(0,0,0,.3); }

.form-field-select{ position:relative; }
.custom-dropdown {
  cursor: pointer;
  padding: 0 !important; /* override .form-field padding */
}
.dropdown-header {
  width: 100%;
  padding: 10px 18px; /* match original .form-field padding */
  padding-right: 44px;
  font-family: var(--body);
  font-weight: 400;
  font-size: 18px;
  line-height: 27.128px;
  color: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
}
.dropdown-header.has-value {
  color: #000;
}
.dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #a6a6a6;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 100;
}
.custom-dropdown.open .dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-item {
  padding: 10px 18px;
  font-family: var(--body);
  font-size: 18px;
  color: #25373f;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.dropdown-item:hover, .dropdown-item.selected {
  background: #5b6f7c;
  color: #fff;
}
.form-chevron{
  position:absolute;
  right:18px; top:50%;
  transform:translateY(-50%) rotate(90deg);
  width:31px; height:31px;
  pointer-events:none;
  transition: transform 0.2s ease;
}
.custom-dropdown.open .form-chevron {
  transform: translateY(-50%) rotate(-90deg);
}

/* ---- Size of Workforce: number field with its own +/- stepper ---- */
.form-field-number{ position:relative; }
.form-field-number input{ padding-right:40px; }
/* the browser's own spinner is replaced by .num-stepper */
.form-field-number input::-webkit-outer-spin-button,
.form-field-number input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.form-field-number input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

.num-stepper{
  position:absolute;
  right:12px; top:50%;
  transform:translateY(-50%);
  width:28px; height:46px;
  display:flex; flex-direction:column;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.07);
}
.num-step{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:background .15s ease;
}
.num-step + .num-step{ border-top:1px solid rgba(0,0,0,.07); }
.num-step:hover{ background:rgba(249,118,25,.12); }
.num-step:active{ background:rgba(249,118,25,.24); }
.num-step img{ width:18px; height:18px; }
/* the shared chevron asset points right — turn it into an up / down caret */
.num-step-up img  { transform:rotate(-90deg); }
.num-step-down img{ transform:rotate(90deg); }

.form-foot{
  position:absolute;
  left:32px; top:348px;
  width:614px; height:75px;
  display:flex; align-items:center; justify-content:space-between;
}
.form-note{
  width:292px;
  font-size:18.085px;
  line-height:27.128px;
  color:rgba(37,55,63,.7);
}
.form-btn{
  position:relative;
  width:188.6966px; height:46.7191px;
  gap:8.494px;
  padding:12.742px 25.483px;
  font-weight:600;
  font-size:22.55px;
  letter-spacing:-.4284px;
  filter:drop-shadow(0 0 1.062px rgba(128,115,115,.23));
}
.form-btn .arrow{ width:21.236px; height:21.236px; }
.form-btn .arrow img{ width:13.272px; height:13.272px; }

.grad-189{ background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 188.7 46.719' 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 -8.866 12.937 0 94.348 56.806)'><stop stop-color='rgb(255,156,56)' offset='0'/><stop stop-color='rgb(249,118,25)' offset='1'/></radialGradient></defs></svg>"); }

/* ===================== EMPLOYER LOGOS ===================== */
.employers-title{
  position:absolute;
  left:454px; top:893px;
  width:1012px; height:83px;
  font-family:var(--display);
  font-weight:500;
  font-size:56px;
  /* Figma leads this at 70px but centres the line in an 83px box; matching
     the box height puts the glyphs at the same y without a flex wrapper. */
  line-height:83px;
  text-align:center;
  color:var(--brown);
}
.logo-card{
  position:absolute;
  width:246px; height:106px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
}
.logo-card img{ position:absolute; }

/* ===================== REVIEW CARDS ===================== */
.review-card{
  position:absolute;
  top:1344px;
  width:456px; height:477px;
  background:#fffaf6;
  border-radius:24px;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.review-card:hover{
  transform:translateY(-8px);
  box-shadow: 0 16px 36px rgba(249, 118, 25, 0.28), 0 4px 14px rgba(255, 156, 56, 0.2);
}
.review-stars{
  position:absolute;
  left:42px; top:65px;
  width:201px; height:32.7209px;
}
.review-quote{
  position:absolute;
  left:42px; top:131.7209px;
  width:372px; height:224px;
  font-size:24px;
  line-height:normal;
  color:#000;
}
.review-person{
  position:absolute;
  left:42px; top:355.7209px;
  width:372px; height:55px;
  display:flex; align-items:center;
}
.review-logo{ width:55px; height:55px; border-radius:50%; flex:none; }
.review-name{
  font-weight:600;
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.176px;
  color:rgba(0,0,0,.8);
  white-space:nowrap;
}
.review-role{
  font-size:16px;
  line-height:1.5;
  letter-spacing:-.176px;
  color:rgba(0,0,0,.8);
  white-space:nowrap;
}

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