/* ==========================================================================
   7VAS hero / intro section
   Every selector scoped under .sevenvas-hero. Tokens declared on the wrapper,
   never :root. #F64A00 for borders, icons and accents; #D64000 wherever small
   white text sits on an orange surface (4.57:1, WCAG AA for normal text).
   ========================================================================== */
.sevenvas-hero{
  --svh-orange:#F64A00;
  --svh-orange-deep:#D64000;
  --svh-orange-soft:#FFF1EA;
  --svh-orange-line:#FFD9C7;
  --svh-ink:#1C2539;
  --svh-dark:#111111;
  --svh-muted:#5A6478;
  --svh-white:#FFFFFF;
  --svh-border:#E7E9EE;
  --svh-r-lg:24px;
  --svh-r-md:16px;
  --svh-shadow:0 2px 8px rgba(17,17,17,.05), 0 14px 36px rgba(17,17,17,.07);
  --svh-shadow-lift:0 6px 18px rgba(17,17,17,.08), 0 22px 50px rgba(17,17,17,.10);
  --svh-max:1400px;
  --svh-ft:"Red Hat Display","RHD Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --svh-fb:"DM Sans","RHD Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;

  display:block;box-sizing:border-box;width:100%;
  padding:clamp(40px,5vw,72px) 16px;
  background:var(--svh-white);
  font-family:var(--svh-fb);color:var(--svh-ink);
  -webkit-font-smoothing:antialiased;
}
.sevenvas-hero *,.sevenvas-hero *::before,.sevenvas-hero *::after{box-sizing:border-box;}
.sevenvas-hero .svh__inner{max-width:var(--svh-max);margin:0 auto;}

/* ---------- two-column grid ---------- */
.sevenvas-hero .svh__grid{
  display:grid;grid-template-columns:48fr 52fr;gap:clamp(28px,3.5vw,56px);align-items:start;
}

/* ---------- left: image panel ---------- */
.sevenvas-hero .svh__media{position:relative;min-width:0;}
.sevenvas-hero .svh__media-frame{
  position:relative;z-index:2;overflow:hidden;
  border-radius:180px 24px 24px 24px;   /* organic: large top-left, flat bottom-left */
  background:#F4F5F7;
}
.sevenvas-hero .svh__media-frame img{
  display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:4/5;
}
/* solid orange organic shape peeking out behind the image at the left edge */
.sevenvas-hero .svh__blob{
  position:absolute;z-index:1;left:-26px;top:34px;
  width:190px;height:330px;
  background:var(--svh-orange);
  border-radius:150px 40px 40px 120px;
  pointer-events:none;
}
/* subtle orange dot grid, top-right of the panel */
.sevenvas-hero .svh__dots{
  position:absolute;z-index:3;right:6px;top:-6px;
  width:112px;height:74px;pointer-events:none;
  background-image:radial-gradient(circle,var(--svh-orange) 1.6px,transparent 1.7px);
  background-size:13px 13px;opacity:.45;
}
/* floating cards */
.sevenvas-hero .svh__float{
  position:absolute;z-index:4;
  display:flex;align-items:center;gap:12px;
  padding:14px 20px 14px 14px;border-radius:var(--svh-r-md);
  box-shadow:var(--svh-shadow);
  transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.sevenvas-hero .svh__float:hover{transform:translateY(-2px);box-shadow:var(--svh-shadow-lift);}
.sevenvas-hero .svh__float--clients{left:-8px;top:56px;background:var(--svh-white);}
.sevenvas-hero .svh__float--support{left:-8px;bottom:56px;background:var(--svh-dark);}
.sevenvas-hero .svh__chip{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:50%;
  background:var(--svh-orange-soft);color:var(--svh-orange);
}
.sevenvas-hero .svh__float--support .svh__chip{background:rgba(246,74,0,.16);}
.sevenvas-hero .svh__chip svg{width:22px;height:22px;display:block;}
.sevenvas-hero .svh__float-num{
  display:block;font-family:var(--svh-ft);font-size:26px;font-weight:800;line-height:1.1;color:var(--svh-ink);
}
.sevenvas-hero .svh__float-lab{display:block;font-size:13.5px;font-weight:600;color:var(--svh-muted);line-height:1.35;}
.sevenvas-hero .svh__float-rule{display:block;width:38px;height:3px;border-radius:2px;background:var(--svh-orange);margin-top:8px;}
.sevenvas-hero .svh__float--support .svh__float-num{color:var(--svh-white);}
.sevenvas-hero .svh__float--support .svh__float-lab{color:#D5D8DE;}

/* ---------- right: content ---------- */
.sevenvas-hero .svh__content{min-width:0;}
.sevenvas-hero .svh__eyebrow{
  margin:0 0 10px;font-family:var(--svh-fb);
  font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--svh-orange-deep);
}
.sevenvas-hero .svh__eyebrow-rule{display:block;width:56px;height:3px;border-radius:2px;background:var(--svh-orange);margin:0 0 20px;}
.sevenvas-hero .svh__title{
  margin:0 0 26px;font-family:var(--svh-ft);font-weight:800;
  font-size:clamp(28px,3.4vw,46px);line-height:1.14;letter-spacing:-.015em;color:var(--svh-ink);
  text-wrap:balance;
}

/* threaded paragraphs */
.sevenvas-hero .svh__points{position:relative;display:flex;flex-direction:column;gap:22px;margin:0 0 28px;}
.sevenvas-hero .svh__point{position:relative;display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;}
.sevenvas-hero .svh__point-chip{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;
  background:var(--svh-orange-soft);color:var(--svh-orange);
  border:1px solid var(--svh-orange-line);
}
.sevenvas-hero .svh__point-chip svg{width:24px;height:24px;display:block;}
/* hairline threading the three chips together */
.sevenvas-hero .svh__point:not(:last-child)::before{
  content:"";position:absolute;z-index:1;left:26px;top:52px;
  width:1px;height:calc(100% + 22px - 52px);
  background:var(--svh-orange-line);
}
.sevenvas-hero .svh__point p{margin:0;font-size:15.5px;line-height:1.72;color:var(--svh-muted);}
.sevenvas-hero .svh__point strong{color:var(--svh-ink);font-weight:700;}

/* ---------- checklist + CTA ---------- */
.sevenvas-hero .svh__lower{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;
  border-top:1px solid var(--svh-border);padding-top:26px;
}
.sevenvas-hero .svh__checks{
  min-width:0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 26px;
  list-style:none;margin:0;padding:0 30px 0 0;
}
.sevenvas-hero .svh__check{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.45;color:var(--svh-ink);}
.sevenvas-hero .svh__check-mark{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:20px;height:20px;margin-top:1px;border-radius:50%;
  border:1.5px solid var(--svh-orange);color:var(--svh-orange);background:var(--svh-white);
}
.sevenvas-hero .svh__check-mark svg{width:11px;height:11px;display:block;}
.sevenvas-hero .svh__cta{min-width:0;padding:0 0 0 30px;border-left:1px solid var(--svh-border);}
.sevenvas-hero .svh__cta-head{display:flex;align-items:center;gap:12px;margin:0 0 10px;}
.sevenvas-hero .svh__cta-title{margin:0;font-family:var(--svh-ft);font-size:17px;font-weight:700;line-height:1.28;color:var(--svh-ink);}
.sevenvas-hero .svh__cta-text{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--svh-muted);}
.sevenvas-hero .svh__btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:999px;
  background:var(--svh-orange-deep);color:var(--svh-white);
  border:1px solid var(--svh-orange-deep);
  font-family:var(--svh-fb);font-size:15px;font-weight:700;line-height:1;text-decoration:none;
  box-shadow:0 6px 18px rgba(246,74,0,.26);
  transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.sevenvas-hero .svh__btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(246,74,0,.32);color:var(--svh-white);}
.sevenvas-hero .svh__btn:focus-visible{outline:3px solid var(--svh-ink);outline-offset:3px;}
.sevenvas-hero .svh__btn svg{width:16px;height:16px;display:block;}
.sevenvas-hero .svh__cta-note{margin:12px 0 0;font-size:12.5px;color:var(--svh-muted);}

/* ---------- trust bar ---------- */
.sevenvas-hero .svh__trust{
  margin:clamp(28px,3vw,44px) 0 0;padding:22px clamp(18px,2.2vw,30px);
  background:var(--svh-white);border:1px solid var(--svh-border);
  border-radius:var(--svh-r-lg);box-shadow:var(--svh-shadow);
  display:grid;grid-template-columns:auto repeat(4,1fr);gap:0;align-items:center;
}
.sevenvas-hero .svh__trust-lead{
  padding-right:26px;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--svh-muted);line-height:1.45;max-width:210px;
}
.sevenvas-hero .svh__trust-item{
  display:flex;align-items:flex-start;gap:11px;
  padding:0 20px;border-left:1px solid var(--svh-border);
}
.sevenvas-hero .svh__trust-icon{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:50%;
  background:var(--svh-orange-soft);color:var(--svh-orange);
}
.sevenvas-hero .svh__trust-icon svg{width:18px;height:18px;display:block;}
.sevenvas-hero .svh__trust-title{margin:0;font-family:var(--svh-ft);font-size:13.5px;font-weight:700;line-height:1.3;color:var(--svh-ink);}
.sevenvas-hero .svh__trust-desc{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--svh-muted);}

/* ---------- entrance ---------- */
.sevenvas-hero .svh__inner{opacity:1;transform:none;}
.sevenvas-hero.svh--observe .svh__inner{
  opacity:0;transform:translateY(8px);
  transition:opacity .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1);
}
.sevenvas-hero.svh--observe.svh--in .svh__inner{opacity:1;transform:none;}

/* ---------- responsive ---------- */
/* Below 1200 the right-hand column cannot hold a two-column checklist AND a
   300px CTA card side by side, so the CTA drops beneath the checklist. Above
   1023 the two hero columns are still side by side, hence the separate stop. */
@media (max-width:1199px){
  .sevenvas-hero .svh__lower{grid-template-columns:minmax(0,1fr);}
  .sevenvas-hero .svh__checks{padding:0 0 24px;}
  .sevenvas-hero .svh__cta{padding:24px 0 0;border-left:0;border-top:1px solid var(--svh-border);}
}
@media (max-width:1023px){
  .sevenvas-hero .svh__grid{grid-template-columns:1fr;gap:36px;}
  .sevenvas-hero .svh__media-frame img{aspect-ratio:16/10;}
  .sevenvas-hero .svh__media-frame{border-radius:120px 24px 24px 24px;}
  .sevenvas-hero .svh__blob{top:22px;height:230px;}
  .sevenvas-hero .svh__lower{grid-template-columns:1fr;}
  .sevenvas-hero .svh__checks{padding:0 0 24px;}
  .sevenvas-hero .svh__cta{padding:24px 0 0;border-left:0;border-top:1px solid var(--svh-border);}
  .sevenvas-hero .svh__trust{grid-template-columns:1fr 1fr;gap:18px 0;}
  .sevenvas-hero .svh__trust-lead{grid-column:1 / -1;padding:0 0 6px;max-width:none;}
  .sevenvas-hero .svh__trust-item:nth-child(2){border-left:0;}
}
@media (max-width:767px){
  .sevenvas-hero{padding:36px 14px;}
  .sevenvas-hero .svh__media-frame{border-radius:84px 20px 20px 20px;}
  .sevenvas-hero .svh__blob{left:-14px;width:120px;height:180px;}
  .sevenvas-hero .svh__dots{width:78px;height:52px;background-size:11px 11px;}
  /* floating cards shrink and stay inside the image bounds */
  .sevenvas-hero .svh__float{padding:10px 14px 10px 10px;gap:9px;border-radius:13px;}
  .sevenvas-hero .svh__float--clients{left:8px;top:14px;}
  .sevenvas-hero .svh__float--support{left:8px;bottom:14px;}
  .sevenvas-hero .svh__chip{width:36px;height:36px;}
  .sevenvas-hero .svh__chip svg{width:17px;height:17px;}
  .sevenvas-hero .svh__float-num{font-size:19px;}
  .sevenvas-hero .svh__float-lab{font-size:11.5px;}
  .sevenvas-hero .svh__float-rule{width:28px;height:2px;margin-top:5px;}
  .sevenvas-hero .svh__checks{grid-template-columns:1fr;}
  .sevenvas-hero .svh__point{grid-template-columns:44px 1fr;gap:13px;}
  .sevenvas-hero .svh__point-chip{width:44px;height:44px;}
  .sevenvas-hero .svh__point-chip svg{width:20px;height:20px;}
  .sevenvas-hero .svh__point:not(:last-child)::before{left:22px;top:44px;height:calc(100% + 22px - 44px);}
  .sevenvas-hero .svh__btn{width:100%;justify-content:center;}
}
@media (max-width:479px){
  .sevenvas-hero .svh__trust{grid-template-columns:1fr;}
  .sevenvas-hero .svh__trust-item{border-left:0;border-top:1px solid var(--svh-border);padding:14px 0 0;}
  .sevenvas-hero .svh__trust-lead{padding-bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  .sevenvas-hero .svh__float,.sevenvas-hero .svh__btn,.sevenvas-hero .svh__inner{transition:none !important;transform:none !important;}
  .sevenvas-hero.svh--observe .svh__inner{opacity:1;transform:none;}
}