/* =============================================================
   VARENT — shared base for the [hero] and [portfolio] blocks.
   Both blocks wrap their markup in .vp and load this first, so the
   scope, reset, fonts and color tokens live in one place.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

.vp{
  --mint:#00C4B3; --blue:#008AAB; --green:#7E9900; --orange:#FF7700;
  --magenta:#D93BB3; --grey:#9498A0;
  --ink:#1B2730; --ink-soft:#5C6770; --ink-faint:#8A949C;
  --line:#E9ECEF; --bg:#FCFCFD; --ease:cubic-bezier(.2,.7,.2,1);
  display:block; color:var(--ink); background:transparent;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.vp *{box-sizing:border-box;}

/* defensive reset — stops theme styles leaking into the blocks */
.vp img{max-width:100%; border:0; outline:0; background:none; box-shadow:none; vertical-align:middle;}
.vp h1,.vp h2,.vp h3,.vp p,.vp figure,.vp figcaption{border:0; background:none;}
.vp h1,.vp h2,.vp h3{text-transform:none;}
.vp button{font-family:inherit;}

.vp-wrap{max-width:1440px; margin:0 auto; padding:0 32px;}

@media (max-width:640px){ .vp-wrap{padding:0 20px;} }
@media (prefers-reduced-motion:reduce){ .vp *{transition:none !important;} }