/* Vontekk 2026 layer, r2 (2026-10-18).
   Loaded LAST on every page. Rules from Yogesh's review of r1:
   keep the original typography (DM Sans, original sizes and hero), no dark blocks, no added divider lines,
   no cards: content sits directly on the page background, separated by space only. */

:root{--vk-ink:#1A2B3C;--vk-accent:#E15B3F;--vk-muted:rgba(26,43,60,.66)}

/* ---------- 1. Large / high-resolution screens ----------
   Every template is sized in px, so a 2560px monitor showed a 1,000px column of 15px text.
   zoom scales the whole page like browser zoom does; vh-based heights are divided back out. */
html,body{overflow-x:clip}
@media (min-width:1600px){html{zoom:1.1;--vk-z:1.1}}
@media (min-width:1800px){html{zoom:1.2;--vk-z:1.2}}
@media (min-width:2100px){html{zoom:1.36;--vk-z:1.36}}
@media (min-width:2500px){html{zoom:1.56;--vk-z:1.56}}
@media (min-width:3200px){html{zoom:1.95;--vk-z:1.95}}
@media (min-width:1600px){
  .hero-card{min-height:calc((100vh - 32px*var(--vk-z)) / var(--vk-z))!important}
  .hero-inner{min-height:calc((100vh - 104px*var(--vk-z)) / var(--vk-z))!important}
  .bg-star-field,.page-not-found{height:calc(100vh / var(--vk-z))!important}
  body>.shell{min-height:calc(100vh / var(--vk-z))!important}
  .client-experience-video.application-open{height:calc(76vh / var(--vk-z))!important}
}

/* ---------- 2. No cards ----------
   Fill, outline, shadow and rounded corners removed; spacing does the separating. */
.card,.note,.persona,.proof,.callout,.notice,.prompt-group,.box,.offer-item,.who-box,.step-card,.path-card,.stat-box,
.hero-case,.ba-box,.checkbox,.fit-panel,.blog-card-item,.case-full,.case-stats,.case-full-quote,.rcard,.caveat,
.decision,.quote-block,a.service,a.case-card,a.blog-card,.related a,.hubgrid a,.vk-article-related a,.crit li,div.chain{
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.card,.persona,.offer-item,.who-box,.step-card,.path-card,.stat-box,.hero-case,.ba-box,.checkbox,.fit-panel,.proof,.callout,
.notice,.prompt-group,.box,.rcard,.caveat,a.service,a.case-card,a.blog-card,.blog-card-item{padding-left:0!important;padding-right:0!important}
.card:hover,.blog-card-item:hover,a.service:hover,a.case-card:hover,a.blog-card:hover{transform:none!important;box-shadow:none!important}
.decision,.note,.quote-block{padding:0!important;margin:28px 0!important}
.case-full{padding:24px 0!important}
.case-stats{padding:12px 0!important}
.case-stats>*{border:0!important}
.rcard{box-sizing:border-box!important;max-width:100%!important}
article{background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
article:not([class]){padding-left:0!important;padding-right:0!important}
/* link lists read as links, not tiles */
.related a,.hubgrid a,.vk-article-related a{padding:10px 0!important;color:var(--vk-ink)!important;transition:color .2s}
.related a:hover,.hubgrid a:hover,.vk-article-related a:hover,a.service:hover h3,a.case-card:hover h3,a.blog-card:hover h3{color:var(--vk-accent)!important}
.crit li{padding:12px 0 12px 44px!important}
.crit li::before{left:0!important}
/* services "operating model": was a dark box, now a plain statement */
div.chain{color:var(--vk-ink)!important;padding:0!important}
div.chain *{color:inherit!important}
div.chain p:first-child,div.chain>div:first-child{color:var(--vk-accent)!important}

/* ---------- 3. Closing call to action ----------
   r0 (live): white bordered box. r1: dark full-width band. Both read as templates.
   Now it sits on the page: centred heading, one sentence, one button, lots of air. */
section.cta,.cta-band{background:transparent!important;color:var(--vk-ink)!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  display:block!important;text-align:center!important;margin:120px auto 40px!important;padding:0 24px!important;max-width:680px!important}
section.cta>*,.cta-band>*{margin-left:auto!important;margin-right:auto!important}
section.cta h2,section.cta h3,.cta-band h2,.cta-band h3{color:var(--vk-ink)!important;margin-bottom:14px!important}
section.cta p,.cta-band p{color:var(--vk-muted)!important;margin-bottom:28px!important;max-width:560px}
section.cta .btn,.cta-band .btn,section.cta a.btn,.cta-band a.btn{display:inline-block!important;background:var(--vk-accent)!important;color:#fff!important;
  border:0!important;border-radius:999px!important;padding:16px 30px!important;font-weight:700!important;box-shadow:0 12px 30px -14px rgba(225,91,63,.8)!important;
  transition:transform .2s}
section.cta .btn:hover,.cta-band .btn:hover{transform:translateY(-2px)}
.vk-close{margin:40px auto 120px!important}

/* ---------- 4. One footer everywhere (markup unified at build time) ---------- */
.vkf{max-width:1120px!important;align-items:start}
.vkf-bottom{max-width:1120px!important;display:grid!important;grid-template-columns:auto auto auto 1fr!important;gap:12px 28px!important}
.vkf-bottom .vkf-cta{justify-self:end;margin:0!important}
@media(max-width:520px){.vkf-bottom{grid-template-columns:auto auto auto!important}.vkf-bottom .vkf-cta{grid-column:1/-1;justify-self:start}}

/* ---------- 5. Nav "Book a Call" links that share the .cta class ----------
   An earlier live patch styled every .cta as a white bordered box, which also caught these nav links (18 pages). */
a.cta{display:inline-flex!important;align-items:center!important;width:auto!important;min-height:0!important;margin:0!important;
  padding:10px 18px!important;background:var(--vk-ink)!important;color:#fff!important;border:0!important;border-radius:999px!important;
  box-shadow:none!important;font-weight:700!important;font-size:14px!important;line-height:1.2!important;text-decoration:none!important}
a.cta:hover{background:var(--vk-accent)!important}

/* ---------- 6. Homepage hero proof line ---------- */
.vk-proof{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin:40px auto 0;font-size:14px;color:var(--vk-muted)}
.vk-proof b{color:var(--vk-ink);font-weight:700}
@media(max-width:640px){.vk-proof{flex-direction:column;align-items:center;gap:6px;margin-top:28px}}

/* ---------- 8. Blog index: the featured post had a large dark panel with a fake play button and no video ---------- */
.blog-featured .card-visual{display:none!important}
.blog-featured .blog-card{grid-template-columns:1fr!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.blog-featured .blog-card>*{padding-left:0!important;padding-right:0!important}
.blog-featured .read-btn{background:transparent!important;border:0!important;padding:0!important;color:var(--vk-accent)!important}
.blog-card-item>*,.blog-card-item .card-content,.blog-card-item .card-top,.blog-card-item .card-footer{padding-left:0!important;padding-right:0!important}

/* ---------- 9. Breathing room on both sides ----------
   Up to 1240px the page containers sat 20-24px from the screen edge. Gutters now scale with the screen. */
@media (max-width:1240px){
  .wrap,.nav,.blog-container,.blog-nav,.section-inner,.shell,.vk-article-breadcrumb,.container,footer.footer{
    padding-left:clamp(24px,5.5vw,60px)!important;padding-right:clamp(24px,5.5vw,60px)!important;box-sizing:border-box}
  .section-inner .wrap,.wrap .wrap,.section-inner .container,.wrap .container,.blog-container .wrap{padding-left:0!important;padding-right:0!important}
}
@media (max-width:1240px){
  .hero,.blog-hero,.blog-cta,.blog-index,.vk-article-exit,.case-grid,.client-proof-strip,body>section[style*="padding"]{
    padding-left:clamp(24px,5.5vw,60px)!important;padding-right:clamp(24px,5.5vw,60px)!important;box-sizing:border-box}
  .hero .wrap,.hero .container,.blog-hero .wrap,.blog-index .wrap,.blog-index .blog-container,.vk-article-exit .wrap,.client-proof-strip .section-inner{padding-left:0!important;padding-right:0!important}
}
@media (max-width:1240px){.inner{padding-left:clamp(10px,4vw,42px)!important;padding-right:clamp(10px,4vw,42px)!important;box-sizing:border-box}}
@media (max-width:1240px){main>p,body>p{padding-left:clamp(24px,5.5vw,60px)!important;padding-right:clamp(24px,5.5vw,60px)!important;box-sizing:border-box}}