/* "Hire a Dedicated Virtual Assistant" - second section of the home page.
   Every selector scoped under .sevenvas-dedicated. */

.sevenvas-dedicated{
  --svd2-accent:#F64A00;        /* accent word, check circles, rules */
  --svd2-accent-deep:#D64000;   /* 4.57:1 with white - anything carrying white text */
  --svd2-ink:#1A1A1A;
  --svd2-body:#3F4550;
  --svd2-light:#F2F0EE;
  --svd2-deep:#E4E1DE;
  --svd2-ease:cubic-bezier(.4,0,.2,1);
  position:relative;
  display:block;
  box-sizing:border-box;
  color:var(--svd2-ink);
  /* Gradient runs light -> deeper toward the bottom-right. The first 55% is held
     at or above #EFEDEB so the orange accent word never sits on the darker end,
     where #F64A00 would drop to 2.73:1. */
  background:linear-gradient(135deg,#F5F3F1 0%,var(--svd2-light) 30%,#EFEDEB 55%,var(--svd2-deep) 100%);
}
.sevenvas-dedicated *,
.sevenvas-dedicated *::before,
.sevenvas-dedicated *::after{box-sizing:border-box;}

/* ---------------- stage ---------------- */
.sevenvas-dedicated .svd2__stage{
  position:relative;
  display:grid;
  grid-template-columns:45% 55%;
  align-items:center;
  /* Fills the viewport when you scroll to it. max() keeps a floor on very short screens;
     min-height (not height) means the block still grows if the copy needs more room. */
  min-height:max(640px, 100vh);
  overflow:hidden;
}

/* The photo spans the whole section and keeps its own office background. A gradient
   scrim above it holds the left side solid so the copy stays readable, then fades out
   so the team reads normally on the right. No frame, no radius, no shadow, no cut-out. */
.sevenvas-dedicated .svd2__media{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.sevenvas-dedicated .svd2__media img{
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center right;
}
.sevenvas-dedicated .svd2__stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to right,
    #F2F0EE 0%,
    #F2F0EE 33%,
    rgba(242,240,238,.90) 40%,
    rgba(242,240,238,.50) 47%,
    rgba(242,240,238,.14) 54%,
    rgba(242,240,238,0) 60%);
}
.sevenvas-dedicated .svd2__content{
  grid-column:1;
  position:relative;
  z-index:2;
  padding:78px 32px 78px clamp(24px,5vw,88px);
  max-width:760px;
}

.sevenvas-dedicated .svd2__title{
  margin:0 0 22px;
  padding:0;
  border:0;
  font-size:clamp(30px,3.3vw,46px);
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--svd2-ink);
  max-width:16ch;
}
.sevenvas-dedicated .svd2__title-accent{color:var(--svd2-accent);}

.sevenvas-dedicated .svd2__lede{
  margin:0 0 30px;
  padding:0;
  font-size:16px;
  line-height:1.72;
  color:var(--svd2-body);
  max-width:46ch;
}

/* ---------------- checklist ---------------- */
.sevenvas-dedicated .svd2__checks{
  list-style:none;
  margin:0 0 34px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 30px;
  max-width:660px;
}
.sevenvas-dedicated .svd2__check{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:0;
  font-size:15px;
  line-height:1.4;
  color:var(--svd2-ink);
}
.sevenvas-dedicated .svd2__check-mark{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin-top:1px;
  border-radius:50%;
  background:var(--svd2-accent);
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sevenvas-dedicated .svd2__check-mark svg{width:12px;height:12px;display:block;}
.sevenvas-dedicated .svd2__check-txt{display:block;}

/* ---------------- stat + button ---------------- */
.sevenvas-dedicated .svd2__actions{
  display:flex;
  align-items:stretch;
  gap:16px;
  flex-wrap:wrap;
}
.sevenvas-dedicated .svd2__stat{
  background:var(--svd2-ink);
  border-radius:8px;
  padding:16px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sevenvas-dedicated .svd2__stat-num{
  display:block;
  font-size:31px;
  line-height:1.05;
  font-weight:800;
  color:#FFFFFF;
}
.sevenvas-dedicated .svd2__stat-lab{
  display:block;
  font-size:13px;
  line-height:1.3;
  color:#FFFFFF;
  margin-top:3px;
}
.sevenvas-dedicated .svd2__btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  background:var(--svd2-accent-deep);
  color:#FFFFFF;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  padding:0 30px;
  border-radius:8px;
  transition:background-color .2s var(--svd2-ease);
}
.sevenvas-dedicated .svd2__btn:hover,
.sevenvas-dedicated .svd2__btn:focus-visible{background:#BF3900;}
.sevenvas-dedicated .svd2__btn:focus-visible{outline:3px solid var(--svd2-ink);outline-offset:2px;}
.sevenvas-dedicated .svd2__btn svg{width:19px;height:19px;flex:0 0 auto;}

/* ---------------- reveal ---------------- */
.sevenvas-dedicated.svd2--anim .svd2__reveal{opacity:0;transform:translateY(8px);}
.sevenvas-dedicated.svd2--anim .svd2__reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .4s var(--svd2-ease),transform .4s var(--svd2-ease);
}

/* ---------------- tablet ---------------- */
@media (max-width:1199px){
  .sevenvas-dedicated .svd2__stage{grid-template-columns:100%;min-height:0;}
  .sevenvas-dedicated .svd2__content{padding:60px clamp(20px,4vw,48px) 56px;max-width:none;}
  .sevenvas-dedicated .svd2__media{opacity:.45;}
  .sevenvas-dedicated .svd2__title{font-size:clamp(28px,4vw,38px);max-width:20ch;}
  .sevenvas-dedicated .svd2__lede{max-width:56ch;}
}
@media (min-width:900px) and (max-width:1199px){
  .sevenvas-dedicated .svd2__media{opacity:1;}
  .sevenvas-dedicated .svd2__content{max-width:62%;}
}

/* ---------------- mobile ---------------- */
@media (max-width:767px){
  /* The cut-out is dropped entirely below 768px: at phone width it becomes a
     decorative band that pushes the checklist and the button below the fold.
     display:none also means phones never download it. */
  .sevenvas-dedicated .svd2__media{display:none;}
  .sevenvas-dedicated .svd2__content{padding:44px 18px 40px;max-width:none;}
  .sevenvas-dedicated .svd2__title{font-size:27px;max-width:none;}
  .sevenvas-dedicated .svd2__lede{font-size:15.5px;max-width:none;}
  .sevenvas-dedicated .svd2__checks{grid-template-columns:minmax(0,1fr);gap:11px;}
}
@media (max-width:399px){
  .sevenvas-dedicated .svd2__actions{flex-direction:column;align-items:stretch;}
  .sevenvas-dedicated .svd2__btn{justify-content:center;padding:14px 24px;}
}
@media (min-width:400px){
  .sevenvas-dedicated .svd2__btn{min-height:64px;}
}

@media (prefers-reduced-motion: reduce){
  .sevenvas-dedicated .svd2__btn{transition:none;}
  .sevenvas-dedicated.svd2--anim .svd2__reveal{opacity:1;transform:none;transition:none;}
}