/* Vinta Virtual - Web Design page. Scoped to .vwd; nothing here can reach
   the global header, footer or any other page.
   Order: shims -> design -> widget mappings -> overrides. Do not reorder. */
/* ---------- 1. SHIMS: beat Elementor's own stylesheet ---------- */
:where(.elementor) h1,:where(.elementor) h2,:where(.elementor) h3,
:where(.elementor) h4,:where(.elementor) p,:where(.elementor) figure{margin:0}
/* the kit paints colour on the text-editor WRAPPER, severing inheritance so
   every paragraph on a navy band renders near-black-on-navy */
:where(.elementor) .elementor-widget-text-editor{color:inherit}
/* .vwd is itself an .e-con, so `.vwd .e-con` never matched it and it kept
   Elementor's default 10px inline padding: a white sliver down both edges
   of every full-bleed band. */
.vwd,.vwd .e-con{gap:0;--padding-block-start:0;--padding-block-end:0;--padding-inline-start:0;--padding-inline-end:0}
.vwd .e-con-inner{padding:0}
/* (0,3,1) logical-property reset that kills every design margin */
.vwd .e-con .elementor-widget.elementor-widget{margin-block-end:0}
/* (0,4,0) cap that would break .wrap and make every band full-bleed */
.vwd .e-con.e-con>.elementor-widget{max-width:none}
.vwd .elementor-widget-container{margin:0}

/* ---------- 2. DESIGN ---------- */
.vwd{
  --ground:#FAFAF9;
  --sand:#F3EFE8;
  --sand-2:#EFEAE1;
  --surface:#FFFFFF;
  --ink:#16242E;
  --ink-soft:#4A5A64;
  --navy:#0C4A6E;
  --navy-deep:#08344D;
  --on-navy:#F3F7FA;
  --on-navy-soft:#A9C4D6;
  --accent:#FB923C;
  --accent-hi:#FFA659;
  --accent-border:#F68B2C;
  --hairline:#E2DED7;
  --hairline-navy:rgba(169,196,214,.22);

  --r-control:10px;
  --r-media:12px;
  --r-panel:16px;

  --col:1180px;
  --gut:24px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
}
.vwd *,.vwd *::before,.vwd *::after{box-sizing:border-box}
.vwd{-webkit-text-size-adjust:100%;scrollbar-color:var(--accent) var(--hairline)}
.vwd{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Poppins,system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;
}
.vwd h1,.vwd h2,.vwd h3,.vwd h4{font-family:"Playfair Display",Georgia,serif;font-weight:600;margin:0;color:var(--navy)}
.vwd h1{font-size:clamp(2.1rem,4.1vw,3.2rem);line-height:1.1;letter-spacing:-.02em}
.vwd h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.14;letter-spacing:-.018em}
.vwd h3{font-size:clamp(1.08rem,1.4vw,1.25rem);line-height:1.3}
.vwd p{margin:0}
.vwd a{color:inherit}
.vwd img{display:block;max-width:100%;height:auto}
.vwd ::selection{background:var(--accent);color:var(--navy)}
.vwd :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.vwd .wrap{width:100%;max-width:var(--col);margin-inline:auto;padding-inline:var(--gut)}
.vwd .lede{font-size:1.04rem;line-height:1.72;color:var(--ink-soft);max-width:54ch}
.vwd .on-dark .lede{color:var(--on-navy-soft)}
.vwd .sec{padding:clamp(3.5rem,6.5vw,6rem) 0}
.vwd .sec__head{max-width:46ch;margin-bottom:clamp(2rem,4vw,3rem)}
.vwd .sec__head p{margin-top:.9rem}
.vwd .btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:Poppins,sans-serif;font-size:1.1875rem;font-weight:700;line-height:1;
  padding:1.05rem 1.6rem;border-radius:var(--r-control);
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease;
}
.vwd .btn svg{width:18px;height:18px;flex:none;transition:transform 220ms var(--ease-out)}
.vwd .btn:active{transform:scale(.98)}
.vwd .btn--primary{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.vwd .btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.vwd .on-dark .btn--ghost{color:var(--on-navy);border-color:var(--on-navy-soft)}
@media (hover:hover) and (pointer:fine){.vwd .btn--primary:hover{background:var(--accent-hi)}
.vwd .btn--ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.vwd .btn:hover svg{transform:translateX(4px)}}
.vwd .hero{background:linear-gradient(180deg,var(--sand) 0%,var(--ground) 78%);padding:clamp(2.6rem,5vw,4.2rem) 0 clamp(3.5rem,6vw,5.5rem);overflow:hidden;overflow:clip}
.vwd .hero__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,3.6rem);align-items:center}
.vwd .hero h1{max-width:15ch}
.vwd .hero__lede{margin-top:1.3rem;max-width:42ch}
.vwd .hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.vwd .proof{display:flex;align-items:center;gap:.95rem;margin-top:2rem;flex-wrap:wrap}
.vwd .proof__faces{display:flex;flex:none}
.vwd .proof__faces img{
  width:52px;height:52px;border-radius:50%;object-fit:contain;background:var(--surface);
  border:2px solid var(--ground);box-shadow:0 2px 6px -2px rgba(12,74,110,.35);
}
.vwd .proof__faces img+img{margin-left:-15px}
.vwd .proof__text{font-size:.9rem;line-height:1.45;color:var(--ink-soft);max-width:32ch}
.vwd .proof__stars{display:flex;align-items:center;gap:1px;margin-bottom:.2rem}
.vwd .proof__stars svg{width:19px;height:19px;fill:var(--accent);display:block}
.vwd .proof__stars b{color:var(--navy);font-weight:600;font-size:.93rem;margin-left:.55rem}
@media (max-width:440px){.vwd .proof{gap:.75rem}
.vwd .proof__faces img{width:44px;height:44px}}
.vwd .rig{position:relative;padding-bottom:4.6rem}
.vwd .mac{position:relative;width:100%;filter:drop-shadow(0 26px 38px rgba(12,74,110,.24))}
.vwd .mac__lid{background:#26282C;border-radius:14px;padding:11px 11px 12px;position:relative}
.vwd .mac__lid::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:16%;height:6px;background:#1B1D20;border-radius:0 0 6px 6px;
}
.vwd .mac__screen{aspect-ratio:16/10.3;background:#0B0C0E;border-radius:4px;overflow:hidden;position:relative}
.vwd .mac__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.vwd .mac__base{
  position:relative;width:118%;margin-left:-9%;height:13px;
  background:linear-gradient(180deg,#D5D9DE 0%,#B4BAC1 42%,#8D949C 100%);
  border-radius:0 0 10px 10px;
}
.vwd .mac__base::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:15%;height:6px;background:#9AA1A9;border-radius:0 0 7px 7px;
}
.vwd .iph{
  position:absolute;right:-5%;left:auto;bottom:0;width:19.5%;min-width:118px;z-index:3;
  background:#26282C;border-radius:30px;padding:7px;
  box-shadow:0 16px 26px -14px rgba(12,74,110,.45);
}
.vwd .iph__screen{aspect-ratio:9/19.3;background:#0B0C0E;border-radius:24px;overflow:hidden;position:relative}
.vwd .iph__screen img{width:100%;height:100%;object-fit:cover;object-position:top center}
.vwd .iph::after{
  content:"";position:absolute;left:50%;top:15px;transform:translateX(-50%);
  width:32%;height:13px;background:#0B0C0E;border-radius:999px;z-index:2;
}
@media (prefers-reduced-motion:no-preference){.vwd .rig .mac,.vwd .rig .iph{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease-soft)}
.vwd .rig.in .mac{opacity:1;transform:none}
.vwd .rig.in .iph{opacity:1;transform:none;transition-delay:.22s}}
@media (max-width:920px){.vwd .hero__in{grid-template-columns:1fr;gap:2.8rem}
.vwd .hero h1{max-width:none}
.vwd .rig{padding-bottom:2.5rem}
.vwd .iph{width:24%;min-width:104px;right:-2%;left:auto}
.vwd .mac__base{width:108%;margin-left:-4%}}
.vwd .aud{background:var(--navy);color:var(--on-navy);padding:clamp(3.4rem,6vw,5.4rem) 0}
.vwd .aud h2{color:#fff;max-width:20ch}
.vwd .aud__head{max-width:52ch}
.vwd .aud__head p{margin-top:.9rem}
.vwd .aud__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.4rem);margin-top:clamp(2rem,3.6vw,2.8rem)}
.vwd .aud__card{
  position:relative;border-radius:var(--r-panel);padding:1.9rem 1.6rem 1.5rem;
  border:1px solid var(--hairline-navy);display:flex;flex-direction:column;overflow:hidden;
  transition:transform 380ms var(--ease-out),border-color 380ms var(--ease-out),background-color 380ms var(--ease-out);
}
.vwd .aud__card:nth-child(1){background:#0A4266}
.vwd .aud__card:nth-child(2){background:#0D5480}
.vwd .aud__card:nth-child(3){background:#083C5C}
.vwd .aud__card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease-out);
}
.vwd .aud__card.is-on::after{transform:scaleX(1)}
.vwd .aud__ico{width:54px;height:54px;display:block;margin-bottom:1.1rem}
.vwd .aud__ico svg{display:block;width:100%;height:100%}
.vwd .aud__card h3{color:#fff;font-size:1.14rem;margin-bottom:.5rem}
.vwd .aud__card p{color:var(--on-navy-soft);font-size:.96rem;line-height:1.62}
.vwd .aud__need{
  margin-top:1.3rem;padding-top:.95rem;border-top:1px solid var(--hairline-navy);
  font-size:.85rem;line-height:1.5;color:#fff;
}
.vwd .aud__need b{color:var(--accent);font-weight:600;display:block;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.25rem}
@media (hover:hover) and (pointer:fine){.vwd .aud__card.is-on{transform:translateY(-6px);border-color:rgba(251,146,60,.45)}}
@media (max-width:820px){.vwd .aud__grid{grid-template-columns:1fr}}
.vwd .gets__list{border-top:1px solid var(--hairline)}
.vwd .get{
  display:grid;grid-template-columns:64px minmax(0,15rem) minmax(0,1fr);
  gap:clamp(.9rem,2vw,2rem);align-items:center;
  padding:1.15rem 1rem 1.15rem 1.1rem;border-bottom:1px solid var(--hairline);
  transition:background-color 320ms var(--ease-out),border-color 320ms var(--ease-out);
  position:relative;
}
.vwd .get.is-on{background:var(--sand);border-bottom-color:var(--accent)}
.vwd .get__ico{width:56px;height:56px;flex:none;display:block}
.vwd .get__ico svg{display:block;width:100%;height:100%}
.vwd .get h3{color:var(--navy)}
.vwd .get p{font-size:.97rem;line-height:1.66;color:var(--ink-soft)}
@media (max-width:820px){.vwd .get{grid-template-columns:48px minmax(0,1fr);row-gap:.25rem;align-items:start;padding-left:.8rem}
.vwd .get__ico{width:44px;height:44px;margin-top:.15rem}
.vwd .get p{grid-column:2}}
.vwd .more{background:var(--sand);padding:clamp(3.5rem,6.5vw,6rem) 0}
.vwd .more__head{max-width:50ch;margin-bottom:clamp(2rem,4vw,2.8rem)}
.vwd .more__head p{margin-top:.9rem}
.vwd .more__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--hairline);gap:1px;border:1px solid var(--hairline);border-radius:var(--r-panel);overflow:hidden;
}
.vwd .more__cell{
  background:var(--ground);padding:1.7rem 1.5rem 1.6rem;display:flex;flex-direction:column;
  transition:background-color 320ms var(--ease-out);
}
.vwd .more__cell.is-on{background:var(--surface)}
.vwd .more__ico{width:46px;height:46px;display:block;margin-bottom:1rem}
.vwd .more__ico svg{display:block;width:100%;height:100%}
.vwd .more__cell h3{color:var(--navy);font-size:1.08rem;margin-bottom:.4rem}
.vwd .more__cell p{font-size:.94rem;line-height:1.62;color:var(--ink-soft)}
.vwd .more__foot{
  margin-top:clamp(1.6rem,3vw,2.2rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;
  padding-top:1.4rem;border-top:1px solid var(--hairline);
}
.vwd .more__foot p{font-size:.96rem;color:var(--ink-soft);max-width:48ch}
.vwd .more__foot .btn{font-size:1rem;padding:.85rem 1.35rem}
@media (max-width:900px){.vwd .more__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:580px){.vwd .more__grid{grid-template-columns:1fr}}
.vwd .reel{background:var(--sand);position:relative}
.vwd .reel__pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.vwd .reel__head{padding:calc(74px + clamp(1.1rem,2.4vw,2rem)) 0 1rem;flex:none}
.vwd .reel__head .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.6rem}
.vwd .reel__count{margin-left:auto;font-size:.88rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.vwd .reel__count b{color:var(--navy);font-weight:600}
.vwd .reel__bar{height:3px;background:var(--hairline);position:relative;flex:none;margin-bottom:clamp(1rem,2vw,1.6rem)}
.vwd .reel__bar i{position:absolute;inset:0 auto 0 0;width:33.33%;background:var(--accent)}
.vwd .reel__view{flex:1;min-height:0;display:flex;align-items:center;overflow:hidden}
.vwd .reel__track{display:flex;gap:clamp(1.2rem,3vw,2.4rem);will-change:transform;padding-inline-start:max(var(--gut),calc((100vw - var(--col))/2 + var(--gut)),calc(100vw - 1560px));padding-inline-end:max(var(--gut),calc((100vw - var(--col))/2 + var(--gut)))}
.vwd .proj{
  flex:none;width:min(76vw,600px);display:flex;flex-direction:column;justify-content:center;
}
.vwd .proj .mac{filter:drop-shadow(0 18px 30px rgba(12,74,110,.2));width:100%}
.vwd .proj .mac__screen img{transition:object-position 3.4s cubic-bezier(.4,0,.2,1)}
.vwd .proj__body{padding:1.9rem .2rem 0;max-width:52ch}
.vwd .proj__where{
  font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);
  padding-top:.65rem;border-top:2px solid var(--accent);display:inline-block;margin-bottom:.55rem;align-self:flex-start;
}
.vwd .proj h3{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:.55rem}
.vwd .proj p{font-size:.96rem;line-height:1.66;color:var(--ink-soft)}
.vwd .proj .btn{margin-top:1.3rem;font-size:1rem;padding:.85rem 1.35rem}
@media (hover:hover) and (pointer:fine){.vwd .proj:hover .mac__screen img{object-position:bottom center}}
.vwd .reel.no-pin{height:auto!important}
.vwd .reel.no-pin .reel__pin{position:static;height:auto;overflow:visible}
.vwd .reel.no-pin .reel__view{display:block;overflow:visible}
.vwd .reel.no-pin .reel__track{display:grid;gap:1.4rem;transform:none!important;padding-inline:var(--gut);padding-bottom:clamp(3rem,6vw,4.5rem)}
.vwd .reel.no-pin .proj{width:auto}
.vwd .reel.no-pin .proj__body{max-width:none}
.vwd .reel.no-pin .mac__base{width:100%;margin-left:0}
.vwd .reel.no-pin .reel__bar,.vwd .reel.no-pin .reel__count{display:none}
.vwd .reel.no-pin .reel__head{padding-top:clamp(2.6rem,5vw,4rem)}
.vwd .flow{background:var(--navy);color:var(--on-navy);padding:clamp(3.5rem,6vw,5.5rem) 0}
.vwd .flow h2{color:#fff;max-width:16ch}
.vwd .flow__head{max-width:48ch;margin-bottom:clamp(2rem,4vw,3rem)}
.vwd .flow__head p{margin-top:.9rem}
.vwd .flow__rail{position:relative;margin-top:1rem}
.vwd .flow__line{position:absolute;left:35px;width:0;top:34px;height:2px;background:var(--hairline-navy)}
.vwd .flow__line i{position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.vwd .flow__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2rem);position:relative}
.vwd .step{background:transparent;border:0;padding:0;text-align:left;cursor:pointer;color:inherit;font:inherit;
  display:grid;grid-template-rows:70px auto 1fr;row-gap:0;align-content:start}
.vwd .step__dot{
  width:70px;height:70px;line-height:0;border-radius:50%;background:var(--navy);
  border:2px solid var(--hairline-navy);display:grid;place-items:center;
  transition:border-color 340ms var(--ease-out),background-color 340ms var(--ease-out),transform 340ms var(--ease-out);
  position:relative;z-index:1;
}
.vwd .step__dot svg{width:42px;height:42px;display:block}
.vwd .step.is-on .step__dot{border-color:var(--accent);background:#14536F;transform:scale(1.06)}
.vwd .step h3{color:#fff;font-size:1.08rem;margin:1.1rem 0 .4rem}
.vwd .step p{font-size:.94rem;line-height:1.6;color:var(--on-navy-soft);opacity:.6;transition:opacity 340ms var(--ease-out)}
.vwd .step.is-on p{opacity:1}
.vwd .step:active .step__dot{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.vwd .step:hover .step__dot{border-color:var(--accent)}}
@media (max-width:860px){.vwd .flow__steps{grid-template-columns:1fr;gap:1.6rem}
.vwd .flow__line{left:34px;right:auto;top:20px;bottom:20px;width:2px;height:auto}
.vwd .flow__line i{transform:scaleY(0);transform-origin:top}
.vwd .step{display:grid;grid-template-columns:70px minmax(0,1fr);column-gap:1.2rem;align-items:start}
.vwd .step__dot{grid-row:span 2}
.vwd .step h3{margin:.3rem 0 .3rem}}
.vwd .faq__in{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(1.6rem,5vw,4rem);align-items:start}
.vwd .faq details{border-bottom:1px solid var(--hairline)}
.vwd .faq details:first-of-type{border-top:1px solid var(--navy)}
.vwd .faq summary{
  list-style:none;cursor:pointer;padding:1.3rem 2.4rem 1.3rem 0;position:relative;
  font-family:"Playfair Display",Georgia,serif;font-size:1.13rem;font-weight:600;color:var(--navy);
}
.vwd .faq summary::-webkit-details-marker{display:none}
.vwd .faq summary::after,.vwd .faq summary::before{
  content:"";position:absolute;right:.35rem;top:50%;width:13px;height:2px;background:var(--accent);transform:translateY(-50%);
}
.vwd .faq summary::before{transform:translateY(-50%) rotate(90deg);transition:transform 280ms var(--ease-out)}
.vwd .faq details[open] summary::before{transform:translateY(-50%) rotate(0)}
.vwd .faq__body{padding:0 2.4rem 1.4rem 0;color:var(--ink-soft);font-size:1rem;line-height:1.68}
@media (max-width:900px){.vwd .faq__in{grid-template-columns:1fr}}
.vwd .ask{background:var(--sand);padding:clamp(3.5rem,6.5vw,6rem) 0}
.vwd .ask__panel{background:var(--surface);border-radius:var(--r-panel);overflow:hidden;box-shadow:0 12px 26px -18px rgba(12,74,110,.28)}
.vwd .ask__head{padding:clamp(1.6rem,3.2vw,2.6rem) clamp(1.4rem,3vw,2.6rem) clamp(1.2rem,2vw,1.6rem);border-bottom:1px solid var(--hairline)}
.vwd .ask__head p{margin-top:.8rem}
.vwd .ask__form iframe{width:100%;min-height:780px;border:none;display:block}
.vwd .ft{background:var(--navy-deep);color:var(--on-navy-soft);padding:2.4rem 0}
.vwd .ft__in{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;font-size:.92rem}
.vwd .ft a{color:var(--on-navy);text-decoration:none;box-shadow:inset 0 -1px 0 var(--accent)}
.vwd .ft__sep{margin-left:auto}
.vwd .rv{opacity:1}
@media (prefers-reduced-motion:no-preference){.vwd .rv{opacity:0;transform:translateY(20px);transition:opacity .78s var(--ease-soft),transform .78s var(--ease-soft)}
.vwd .rv.in{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vwd *{animation:none!important;transition-duration:.01ms!important}
.vwd .rig .mac,.vwd .rig .iph{opacity:1!important;transform:none!important}}
/* ---------- 3. WIDGET MAPPINGS ---------- */
/* Elementor gives every widget width:100%, which breaks each design row */
.vwd .hero__cta>.elementor-element,
.vwd .proof>.elementor-element,
.vwd .proof__faces>.elementor-element,
.vwd .more__foot>.elementor-element,
.vwd .reel__head .wrap>.elementor-element{width:auto;max-width:none;flex:0 0 auto}
.vwd .proof__faces>.elementor-element+.elementor-element{margin-left:-15px}
/* the design relies on the browser default `row` here. As an Elementor
   container this defaults to COLUMN, which turns `align-items:center` into a
   horizontal centre: the over-wide track was pulled 372px left, so the reel
   opened with card 1 already clipped and all three projects on screen. */
.vwd .reel__view{flex-direction:row}
.vwd .reel__head .wrap>.elementor-element:last-child{margin-left:auto}

/* custom classes on a native Button land on the WRAPPER, never the anchor */
.vwd .elementor-widget-button .elementor-button-wrapper{display:inline-flex}
.vwd .elementor-widget-button .elementor-button{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:Poppins,sans-serif;font-size:1.1875rem;font-weight:700;line-height:1;
  text-transform:none;letter-spacing:normal;
  padding:1.05rem 1.6rem;border-radius:var(--r-control);
  text-decoration:none;border:1.5px solid transparent;background:none;
  transition:transform 160ms var(--ease-out),background-color 200ms ease,
             color 200ms ease,border-color 200ms ease;
}
.vwd .elementor-widget-button .elementor-button-content-wrapper{display:inline-flex;align-items:center;gap:.6rem}
.vwd .elementor-widget-button .elementor-button-text{font:inherit;color:inherit;text-transform:none}
.vwd .elementor-widget-button .elementor-button:active{transform:scale(.98)}
.vwd .elementor-widget-button.is-primary .elementor-button{background:var(--accent);color:var(--navy);border-color:var(--accent)}
.vwd .elementor-widget-button.is-ghost .elementor-button{background:transparent;color:var(--navy);border-color:var(--navy)}
.vwd .on-dark .elementor-widget-button.is-ghost .elementor-button{color:var(--on-navy);border-color:var(--on-navy-soft)}
@media (hover:hover) and (pointer:fine){
  .vwd .elementor-widget-button.is-primary .elementor-button:hover{background:var(--accent-hi)}
  .vwd .elementor-widget-button.is-ghost .elementor-button:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
  .vwd .on-dark .elementor-widget-button.is-ghost .elementor-button:hover{background:var(--on-navy);color:var(--navy);border-color:var(--on-navy)}
}

/* FAQ: Elementor's accordion wearing the design's hairline treatment */
.vwd .elementor-accordion{border:0}
.vwd .elementor-accordion .elementor-accordion-item{border:0;border-bottom:1px solid var(--hairline)}
.vwd .elementor-accordion .elementor-accordion-item:first-child{border-top:1px solid var(--navy)}
.vwd .elementor-accordion .elementor-tab-title{
  padding:1.3rem 2.4rem 1.3rem 0;background:none;border:0;cursor:pointer;
  font-family:"Playfair Display",Georgia,serif;font-size:1.13rem;font-weight:600;
  line-height:1.35;color:var(--navy);
}
.vwd .elementor-accordion .elementor-tab-title a,
.vwd .elementor-accordion .elementor-tab-title .elementor-accordion-title{color:inherit;text-decoration:none}
/* the design's marker is a pseudo-element pinned to the right edge; the native
   widget renders a real icon inline on the left, flush against the question */
.vwd .elementor-accordion .elementor-tab-title{position:relative}
.vwd .elementor-accordion .elementor-accordion-icon{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  margin:0;padding:0;width:13px;line-height:1;text-align:center;color:var(--accent)}
.vwd .elementor-accordion .elementor-accordion-icon i{font-size:13px;line-height:1}
.vwd .elementor-accordion .elementor-accordion-icon svg{width:13px;height:13px;fill:var(--accent)}
.vwd .elementor-accordion .elementor-tab-content{
  padding:0 2.4rem 1.4rem 0;border:0;background:none;
  color:var(--ink-soft);font-size:1rem;line-height:1.68;
}

/* `.mac__screen img{height:100%}` cannot resolve a percentage height through
   Elementor's widget > widget-container chain, so the image fell back to its
   natural aspect. A screenshot wider than the 16/10.3 screen (J.A.P. is
   1400x738) then letterboxed against the black bezel. */
.vwd .mac__screen>.elementor-widget-image,
.vwd .iph__screen>.elementor-widget-image{width:100%;height:100%;flex:1 1 auto}
.vwd .mac__screen .elementor-widget-image>.elementor-widget-container,
.vwd .iph__screen .elementor-widget-image>.elementor-widget-container{width:100%;height:100%}
.vwd .mac__screen .elementor-widget-image img,
.vwd .iph__screen .elementor-widget-image img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* Lottie widgets sit inside design-owned icon wells */
.vwd .elementor-widget-lottie{line-height:0}
.vwd .elementor-widget-lottie .e-lottie__container{margin:0;width:100%;height:100%}
.vwd .elementor-widget-lottie .e-lottie__caption{display:none}
.vwd .elementor-widget-lottie svg{display:block}
.vwd .get>.elementor-widget-lottie{width:56px;height:56px;flex:none}
/* the design places the row's paragraph with `.get p{grid-column:2}`, but the
   grid ITEM here is the text-editor wrapper, not the <p> inside it. Without
   this the description auto-placed into the 48px icon column and wrapped one
   word per line on phones. Same reason the icon size is restated. */
@media (max-width:820px){
  .vwd .get>.elementor-widget-text-editor{grid-column:2}
  .vwd .get>.elementor-widget-lottie{width:44px;height:44px;margin-top:.15rem}
}
.vwd .aud__card>.elementor-widget-lottie{width:54px;height:54px;margin-bottom:1.1rem!important}
.vwd .more__cell>.elementor-widget-lottie{width:46px;height:46px;margin-bottom:1rem!important}
.vwd .step__dot>.elementor-widget-lottie{width:42px;height:42px}

/* the editor canvas never fires IntersectionObserver, so reveals read as
   empty containers to the client */
body.elementor-editor-active .vwd .rv,
body.elementor-editor-preview .vwd .rv,
body.elementor-editor-active .vwd .rig .mac,
body.elementor-editor-active .vwd .rig .iph,
body.elementor-editor-preview .vwd .rig .mac,
body.elementor-editor-preview .vwd .rig .iph{opacity:1!important;transform:none!important}
/* the pinned reel cannot pin inside the editor iframe; stack it there */
body.elementor-editor-active .vwd .reel,
body.elementor-editor-preview .vwd .reel{height:auto!important}
body.elementor-editor-active .vwd .reel__pin,
body.elementor-editor-preview .vwd .reel__pin{position:static;height:auto;overflow:visible}
body.elementor-editor-active .vwd .reel__view,
body.elementor-editor-preview .vwd .reel__view{display:block;overflow:visible}
body.elementor-editor-active .vwd .reel__track,
body.elementor-editor-preview .vwd .reel__track{display:grid;gap:1.4rem;transform:none!important}
body.elementor-editor-active .vwd .proj,
body.elementor-editor-preview .vwd .proj{width:auto}

/* ---------- 4. SPECIFICITY OVERRIDES ----------
   Elementor emits per-element CSS at (0,4,0), which beats these single design
   classes. Each is re-asserted with a doubled class. All measured, not guessed. */
.vwd .proof__text.proof__text{display:block;max-width:32ch;flex:0 1 auto}
/* must NOT apply in .no-pin (mobile), where the track is a grid; forcing
   max-content there blew each project out to 1506px in a 370px column */
.vwd .reel:not(.no-pin) .reel__track.reel__track{width:max-content;flex:0 0 auto}
/* a span inside an HTML widget stays inline, so its vertical margin and padding
   collapse and the audience card loses ~37px of height */
.vwd .aud__need{display:block}
.vwd .reel__count{display:inline-block}