@font-face{font-family:"Syne";src:url("/wp-content/uploads/vaakrasa-fonts/Syne-var-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}@font-face{font-family:"Syne";src:url("/wp-content/uploads/vaakrasa-fonts/Syne-var-latin-ext.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}/* Vaakrasa new-design stylesheet.
   Extracted from the page's first HTML widget so Elementor no longer has to
   parse it on every edit. Enqueued by novamira-sandbox/vaakrasa-assets.php. */
/* ---------- Fonts (self-hosted from /wp-content/uploads/vaakrasa-fonts/) ---------- */




/* ---------- Design tokens ---------- */
:root{
--color-dark-blue:#001E52;
--color-dark-blue-2:#153F63;
--color-green:#4FCD61;
--color-white:#FFFFFF;
--color-black:#0D0D0D;
--color-dark-gray:#2A2A2A;
--color-green-dim:#3AA34A;
--color-white-60:rgba(255,255,255,.6);
--color-white-40:rgba(255,255,255,.4);
--color-white-12:rgba(255,255,255,.12);
--color-white-08:rgba(255,255,255,.08);

--bg-primary:var(--color-dark-blue);
--bg-secondary:var(--color-black);
--surface-card:var(--color-dark-blue-2);
--text-on-dark:var(--color-white);
--border-subtle:var(--color-white-12);
--border-faint:var(--color-white-08);
--accent:var(--color-green);
--accent-hover:#6bd77c;
--accent-press:var(--color-green-dim);
--accent-text-on:var(--color-black);

--gradient-hero:linear-gradient(135deg,var(--color-dark-blue) 0%,var(--color-dark-blue-2) 100%);
--gradient-hero-steep:linear-gradient(160deg,var(--color-dark-blue) 0%,var(--color-dark-blue-2) 70%,var(--color-black) 100%);
--gradient-card-radial:radial-gradient(120% 120% at 20% 0%,var(--color-dark-blue-2) 0%,var(--color-dark-blue) 60%,var(--color-black) 100%);
--gradient-placeholder-a:linear-gradient(135deg,var(--color-dark-blue) 0%,var(--color-green) 180%);
--gradient-placeholder-b:linear-gradient(145deg,var(--color-dark-blue-2) 0%,var(--color-black) 100%);
--gradient-placeholder-c:linear-gradient(160deg,var(--color-dark-gray) 0%,var(--color-dark-blue) 100%);

--font-body:"Syne",sans-serif;
--radius-pill:999px;
--tracking-wide:0.06em;
--ease-out-expo:cubic-bezier(0.16,1,0.3,1);
--duration-fast:0.2s;
}

/* ---------- Page base ---------- */
/* OceanWP sets html{font-size:62.5%} (10px root), which silently shrinks every
   rem in this file on theme-rendered pages such as the blog and case studies.
   Elementor Canvas pages never load that stylesheet, which is why they looked
   correct. Pin the root back to 16px wherever this file is loaded. */
html{font-size:16px!important;scroll-behavior:smooth;background:var(--color-black)}
body{margin:0;background:var(--color-black);color:var(--text-on-dark);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
body a{color:var(--accent);text-decoration:none}
body img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--color-black)}

/* Elementor puts every section in a padded, max-width container. These
   sections are full-bleed and own their padding, so flatten the wrappers. */
.elementor-section,
.elementor-column,
.elementor-widget-wrap,
.elementor-widget-html,
.elementor-widget-html .elementor-widget-container{padding:0!important;margin:0!important}
.elementor-section .elementor-container{max-width:100%!important;width:100%!important}
.elementor-widget-html *{box-sizing:border-box}

/* ---------- Button (ported from the design system's Button component) ---------- */
.vk-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:600;
letter-spacing:var(--tracking-wide);text-transform:uppercase;border-radius:var(--radius-pill);
cursor:pointer;text-decoration:none;
transition:background var(--duration-fast) var(--ease-out-expo),color var(--duration-fast) var(--ease-out-expo),border-color var(--duration-fast) var(--ease-out-expo)}
.vk-btn--sm{padding:10px 18px;font-size:13px}
.vk-btn--md{padding:14px 26px;font-size:14px}
.vk-btn--lg{padding:18px 34px;font-size:15px}
.vk-btn--primary{background:var(--accent);color:var(--accent-text-on);border:1px solid transparent}
.vk-btn--primary:hover{background:var(--accent-hover);color:var(--accent-text-on)}
.vk-btn--ghost{background:transparent;color:var(--text-on-dark);border:1px solid var(--border-subtle)}
.vk-btn--ghost:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- Image placeholders (swap each for a real <img>) ---------- */
/* A .vk-slot is absolutely positioned, so its wrapper must establish a
   containing block. Without this the placeholder escapes its box and stretches
   across the whole section, which is exactly what happened to the testimonial
   avatars. This guards every current and future slot. */
:where(*):has(> .vk-slot){position:relative}
.vk-slot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
padding:12px;text-align:center;background:var(--gradient-placeholder-b)}
.vk-slot span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.vk-slot--circle{border-radius:50%}

/* In the Elementor editor, un-pin the fixed nav and progress bar so they
   do not float over the canvas and block the widgets underneath. */
html[data-vk-editor] [data-nav],
html[data-vk-editor] [data-progress]{position:absolute!important}

/* ---------- Motion keyframes ---------- */
@keyframes vk-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes vk-spin{to{transform:rotate(360deg)}}
[data-rail]::-webkit-scrollbar{height:0}

/* ---------- Hover / focus states (were inline style-hover attributes) ---------- */
.vk-h1:hover{color: #fff !important}
.vk-h2:hover{color: #fff !important}
.vk-h3:hover{color: #fff !important}
.vk-h4:hover{color: #fff !important}
/* Service rows: background tint only. The old rule also forced padding-left to
   40px, which overrode the row's responsive padding, and because :hover sticks
   after a tap on touch devices it left the row permanently indented on mobile.
   Now guarded to real pointers so a tap cannot latch the state at all. */
@media (hover: hover) and (pointer: fine){
  .vk-h5:hover{background: rgba(255,255,255,.04) !important}
  .vk-h6:hover{background: rgba(255,255,255,.04) !important}
  .vk-h7:hover{background: rgba(255,255,255,.04) !important}
}
.vk-h8:hover{border-color: var(--accent) !important;color: var(--accent) !important}
.vk-h9:hover{border-color: var(--accent) !important;color: var(--accent) !important}
.vk-h10:hover{background: #11162a !important}
.vk-h11:hover{background: #11162a !important}
.vk-h12:hover{background: #11162a !important}
.vk-h13:hover{background: #11162a !important}
.vk-h14:hover{border-color: rgba(79,205,97,.4) !important}
.vk-h15:hover{border-color: rgba(79,205,97,.4) !important}
.vk-h16:hover{border-color: rgba(79,205,97,.4) !important}
.vk-h17:hover{background: var(--accent-hover) !important}
.vk-h18:hover{color: var(--accent) !important}
.vk-h19:hover{color: var(--accent) !important}
.vk-h20:hover{color: var(--accent) !important}
.vk-h21:hover{color: var(--accent) !important}
.vk-h22:hover{color: var(--accent) !important}
.vk-h23:hover{color: var(--accent) !important}
.vk-h24:hover{color: var(--accent) !important}
.vk-h25:hover{color: var(--accent) !important}
.vk-f1:focus{border-bottom-color: var(--accent) !important}
.vk-f2:focus{border-bottom-color: var(--accent) !important}
.vk-f3:focus{border-bottom-color: var(--accent) !important}

/* ---------- Long-form article content (blog posts, case studies) ---------- */
.vk-prose{max-width:760px;font-size:1.125rem;line-height:1.75;color:rgba(255,255,255,.86)}
.vk-prose > *:first-child{margin-top:0}
.vk-prose p{margin:0 0 1.4em}
.vk-prose h2{margin:2.2em 0 .6em;font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
.vk-prose h3{margin:1.8em 0 .5em;font-size:clamp(1.25rem,1.8vw,1.6rem);font-weight:700;letter-spacing:-.02em;color:#fff}
.vk-prose h4{margin:1.6em 0 .4em;font-size:1.125rem;font-weight:700;color:#fff}
.vk-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.vk-prose a:hover{color:var(--accent-hover)}
.vk-prose ul,.vk-prose ol{margin:0 0 1.4em;padding-left:1.3em}
.vk-prose li{margin:0 0 .6em}
.vk-prose li::marker{color:var(--accent)}
.vk-prose img{border-radius:8px;margin:2em 0;border:1px solid var(--border-subtle)}
.vk-prose blockquote{margin:2em 0;padding-left:clamp(20px,3vw,32px);border-left:2px solid var(--accent);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.45;color:#fff}
.vk-prose blockquote p{margin:0}
.vk-prose code{font-family:ui-monospace,monospace;font-size:.9em;background:rgba(255,255,255,.07);padding:.15em .4em;border-radius:4px;color:#fff}
.vk-prose pre{background:rgba(0,0,0,.5);border:1px solid var(--border-subtle);border-radius:8px;padding:20px;overflow-x:auto;margin:2em 0}
.vk-prose pre code{background:none;padding:0}
.vk-prose hr{border:none;border-top:1px solid var(--border-subtle);margin:2.5em 0}
.vk-prose table{width:100%;border-collapse:collapse;margin:2em 0;font-size:1rem}
.vk-prose th,.vk-prose td{border:1px solid var(--border-subtle);padding:10px 14px;text-align:left}
.vk-prose th{color:#fff;font-weight:700}

/* ---------- Post / case-study cards ---------- */
.vk-card{display:flex;flex-direction:column;flex:1 1 340px;border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;color:#fff;transition:border-color .5s var(--ease-out-expo)}
.vk-card:hover{border-color:rgba(79,205,97,.4)}
.vk-card-body{padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:10px;flex:1}
.vk-card h3{margin:0;font-size:1.375rem;font-weight:700;letter-spacing:-.015em;color:#fff}
.vk-card p{margin:0;font-size:1rem;line-height:1.6;color:rgba(255,255,255,.55)}