/* =====================================================================
   Velpoint custom styles — modern inner-page hero, 3D globe & sections
   ===================================================================== */

/* The mobile menu trigger became a <button>: it is a control, not a link,
   it had no accessible name as an icon-only <a>, and one of the two
   navbars pointed it at "#" which jumped the page to the top. A button
   carries the browser's own chrome, so that is reset back to how the
   anchor looked. */
button.header-bottom__bar {
   appearance: none;
   -webkit-appearance: none;
   border: 0;
   background: none;
   padding: 0;
   font: inherit;
   color: inherit;
   cursor: pointer;
}

/* ---------- The page scrollbar ----------

   Hidden on request. Scrolling itself is untouched: wheel, trackpad,
   touch, keyboard, Page Up/Down, Home/End, the back-to-top button and
   anchor links all behave exactly as before. Only the painted bar goes.

   html is the scrolling element here - ScrollSmoother transforms
   #smooth-content inside it rather than taking scroll over - so this is
   the one place the bar can be addressed.

   Worth knowing what it costs, because the bar is not only decoration:
   it is the reader's only cue for how long a page is and where they are
   in it, and these pages run long. Dragging it as a way to move goes
   too. On a machine that always shows scrollbars - Windows, or macOS set
   to "Always show" - the gutter is reclaimed, so content gains that
   width back and the layout shifts slightly wider. */
html {
   scrollbar-width: none;         /* Firefox */
   -ms-overflow-style: none;      /* old Edge, IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {         /* Chrome, Safari, Edge */
   width: 0;
   height: 0;
   display: none;
}

/* ---------- Shared hero ---------- */
.vp-hero {
   position: relative;
   overflow: hidden;
   isolation: isolate;
   background:
      linear-gradient(180deg, rgba(14, 10, 10,0) 78%, rgba(14, 10, 10,0.9) 100%),
      radial-gradient(130% 125% at 82% -18%, #562926 0%, #251716 44%, #0c0808 100%);
   padding: 150px 0 88px;
   margin-bottom: 0;
}
.vp-hero--center { text-align: center; padding: 150px 0 78px; }
.vp-hero--full { min-height: 100vh; display: flex; align-items: center; padding-top: 110px; padding-bottom: 70px; }
.vp-hero--full .vp-hero__inner { width: 100%; }
/* A hero the meta bar rides up over has to reserve the room for it. */
.vp-hero.vp-hero--metabar { padding-bottom: 150px; }
/* The impact rail lives inside this hero and owns the space below it. */
.vp-hero.vp-hero--impact { padding-bottom: 0; }

/* depth vignette */
.vp-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: radial-gradient(125% 100% at 50% 0%, transparent 52%, rgba(9, 6, 6,0.72) 100%);
   pointer-events: none;
}
/* soft top spotlight */
.vp-hero::after {
   content: "";
   position: absolute;
   top: -42%;
   left: 50%;
   width: 960px;
   height: 720px;
   transform: translateX(-50%);
   z-index: 0;
   background: radial-gradient(closest-side, rgba(245, 79, 67,0.20), transparent 72%);
   pointer-events: none;
}

/* animated aurora mesh — replaces the old square grid */
.vp-hero__grid {
   position: absolute;
   inset: -25%;
   z-index: 0;
   background:
      radial-gradient(closest-side at 22% 28%, rgba(227, 48, 35,0.42), transparent 68%),
      radial-gradient(closest-side at 78% 22%, rgba(233, 124, 51,0.24), transparent 66%),
      radial-gradient(closest-side at 62% 82%, rgba(245, 79, 67,0.30), transparent 70%);
   filter: blur(55px);
   opacity: .85;
   animation: vp-aurora 22s ease-in-out infinite alternate;
   pointer-events: none;
}
@keyframes vp-aurora {
   0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
   50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08) rotate(2deg); }
   100% { transform: translate3d(-2.5%, 2.5%, 0) scale(1.04) rotate(-2deg); }
}

.vp-hero__glow {
   position: absolute;
   border-radius: 50%;
   filter: blur(100px);
   opacity: .5;
   z-index: 0;
   pointer-events: none;
}
.vp-hero__glow--1 { width: 460px; height: 460px; top: -140px; right: -90px; background: #E33023; animation: vp-float1 13s ease-in-out infinite alternate; }
.vp-hero__glow--2 { width: 380px; height: 380px; bottom: -160px; left: -110px; background: #d26013; opacity: .32; animation: vp-float2 15s ease-in-out infinite alternate; }
@keyframes vp-float1 { from { transform: translate(0, 0); } to { transform: translate(-34px, 30px); } }
@keyframes vp-float2 { from { transform: translate(0, 0); } to { transform: translate(30px, -28px); } }

/* ---------- Per-page hero themes ----------
   Each inner page gets its own accent + backdrop so no two first
   sections look alike. Default (no modifier) = About: purple aurora. */

/* shared theme animations */
@keyframes vp-hue {
   from { filter: blur(55px) hue-rotate(-12deg); }
   to   { filter: blur(55px) hue-rotate(16deg); }
}
@keyframes vp-breathe {
   from { opacity: .5; transform: scale(1); }
   to   { opacity: 1;  transform: scale(1.07); }
}
@keyframes vp-rings-pulse {
   from { opacity: .55; transform: scale(1) rotate(0deg); }
   to   { opacity: 1;   transform: scale(1.05) rotate(4deg); }
}
@keyframes vp-dots-drift {
   from { background-position: 0 0; }
   to   { background-position: 68px 34px; }
}
.vp-hero--services .vp-hero__grid,
.vp-hero--pricing .vp-hero__grid,
.vp-hero--projects .vp-hero__grid,
.vp-hero--contact .vp-hero__grid {
   animation:
      vp-aurora 22s ease-in-out infinite alternate,
      vp-hue 15s ease-in-out infinite alternate;
}

/* Services — cyan / radar rings */
.vp-hero--services {
   background:
      linear-gradient(180deg, rgba(12, 8, 8,0) 78%, rgba(12, 8, 8,0.9) 100%),
      radial-gradient(130% 125% at 82% -18%, #372221 0%, #241514 44%, #0c0807 100%);
}
.vp-hero--services .vp-hero__grid {
   background:
      radial-gradient(closest-side at 24% 30%, rgba(227, 48, 35, 0.40), transparent 68%),
      radial-gradient(closest-side at 76% 20%, rgba(233, 124, 51,0.26), transparent 66%),
      radial-gradient(closest-side at 60% 84%, rgba(224, 34, 20,0.24), transparent 70%);
}
.vp-hero--services::after {
   top: auto;
   left: auto;
   right: -260px;
   bottom: -260px;
   transform: none;
   width: 940px;
   height: 940px;
   border-radius: 50%;
   background: repeating-radial-gradient(circle at center, rgba(233, 124, 51,0.14) 0 1.5px, transparent 1.5px 72px);
   -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 95%);
   mask-image: radial-gradient(closest-side, #000 25%, transparent 95%);
   animation: vp-rings-pulse 8s ease-in-out infinite alternate;
}
.vp-hero--services .vp-hero__glow--1 { background: #e33023; }
.vp-hero--services .vp-hero__glow--2 { background: #d26013; }
.vp-hero--services .vp-hero__eyebrow {
   border-color: rgba(233, 124, 51,0.4);
   background: rgba(233, 124, 51,0.1);
   color: #f0c2a4;
}
.vp-hero--services .vp-hero__eyebrow .dot { background: #e97c33; box-shadow: 0 0 0 4px rgba(233, 124, 51,0.25); }
.vp-hero--services .vp-hero__title .grad {
   background: linear-gradient(90deg, #f08a3a 0%, #e33023 55%, #b3140c 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* Pricing — emerald / light beams */
.vp-hero--pricing {
   background:
      linear-gradient(180deg, rgba(10, 7, 6,0) 78%, rgba(10, 7, 6,0.9) 100%),
      radial-gradient(130% 125% at 50% -18%, #3d1a17 0%, #25100f 44%, #080606 100%);
}
.vp-hero--pricing .vp-hero__grid {
   background:
      radial-gradient(closest-side at 30% 25%, rgba(227, 48, 35, 0.34), transparent 68%),
      radial-gradient(closest-side at 72% 30%, rgba(233, 124, 51,0.26), transparent 66%),
      radial-gradient(closest-side at 55% 85%, rgba(212, 95, 18,0.16), transparent 70%);
}
.vp-hero--pricing::after {
   top: -30%;
   width: 1100px;
   height: 820px;
   background: radial-gradient(closest-side, rgba(215, 115, 48,0.22), transparent 72%);
   animation: vp-breathe 9s ease-in-out infinite alternate;
}
.vp-hero--pricing .vp-hero__glow--1 { background: #e33023; }
.vp-hero--pricing .vp-hero__glow--2 { background: #e97c33; }
.vp-hero--pricing .vp-hero__eyebrow {
   border-color: rgba(215, 115, 48,0.4);
   background: rgba(215, 115, 48,0.1);
   color: #eec6ac;
}
.vp-hero--pricing .vp-hero__eyebrow .dot { background: #d77330; box-shadow: 0 0 0 4px rgba(215, 115, 48,0.25); }
.vp-hero--pricing .vp-hero__title .grad {
   background: linear-gradient(90deg, #f2a06a 0%, #e8563f 50%, #d3271a 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* Careers — crimson, lit from the left.

   This page had no treatment of its own: it borrowed .vp-hero--pricing
   wholesale, so Careers and Pricing were the same hero down to the glow
   positions. It now carries the crimson of the logo mark and is lit from
   the opposite side, so the two read as different places in the site. */
.vp-hero--careers {
   background:
      linear-gradient(180deg, rgba(9, 5, 7,0) 78%, rgba(9, 5, 7,0.92) 100%),
      radial-gradient(130% 125% at 22% -18%, #46151f 0%, #2a0d13 44%, #080405 100%);
}
.vp-hero--careers .vp-hero__grid {
   background:
      radial-gradient(closest-side at 22% 26%, rgba(238, 44, 76, 0.34), transparent 68%),
      radial-gradient(closest-side at 74% 34%, rgba(226, 20, 58, 0.24), transparent 66%),
      radial-gradient(closest-side at 52% 86%, rgba(255, 122, 65, 0.15), transparent 70%);
}
.vp-hero--careers::after {
   top: -34%;
   left: 30%;
   width: 1040px;
   height: 820px;
   background: radial-gradient(closest-side, rgba(238, 44, 76,0.22), transparent 72%);
   animation: vp-breathe 9.5s ease-in-out infinite alternate;
}
.vp-hero--careers .vp-hero__glow--1 { background: #ee2c4c; }
.vp-hero--careers .vp-hero__glow--2 { background: #ff7a41; }
.vp-hero--careers .vp-hero__eyebrow {
   border-color: rgba(238, 44, 76,0.42);
   background: rgba(238, 44, 76,0.12);
   color: #f3c3cb;
}
.vp-hero--careers .vp-hero__eyebrow .dot { background: #ee2c4c; box-shadow: 0 0 0 4px rgba(238, 44, 76,0.25); }
.vp-hero--careers .vp-hero__title .grad {
   background: linear-gradient(90deg, #ffb3a0 0%, #f2545b 48%, #d41635 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
/* Projects — amber / diagonal stripes */
.vp-hero--projects {
   background:
      linear-gradient(180deg, rgba(14,9,4,0) 78%, rgba(14,9,4,0.9) 100%),
      radial-gradient(130% 125% at 82% -18%, #4d2413 0%, #2b1409 44%, #0f0704 100%);
}
.vp-hero--projects .vp-hero__grid {
   background:
      radial-gradient(closest-side at 24% 30%, rgba(227, 48, 35, 0.32), transparent 68%),
      radial-gradient(closest-side at 76% 20%, rgba(249,115,22,0.24), transparent 66%),
      radial-gradient(closest-side at 60% 84%, rgba(221, 32, 79,0.18), transparent 70%);
}
.vp-hero--projects::after {
   top: -34%;
   width: 1000px;
   height: 800px;
   background: radial-gradient(closest-side, rgba(245,158,11,0.20), transparent 72%);
   animation: vp-breathe 10s ease-in-out infinite alternate;
}
.vp-hero--projects .vp-hero__glow--1 { background: #e33023; }
.vp-hero--projects .vp-hero__glow--2 { background: #f97316; opacity: .26; }
.vp-hero--projects .vp-hero__eyebrow {
   border-color: rgba(245,158,11,0.4);
   background: rgba(245,158,11,0.1);
   color: #fcd9a4;
}
.vp-hero--projects .vp-hero__eyebrow .dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,0.25); }
.vp-hero--projects .vp-hero__title .grad {
   background: linear-gradient(90deg, #fbbf24 0%, #f97316 55%, #e62517 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
.vp-hero--projects .vp-hero__stat h3 span { color: #fbbf24; }

/* Contact — blue / dot grid */
.vp-hero--contact {
   background:
      linear-gradient(180deg, rgba(14, 9, 8,0) 78%, rgba(14, 9, 8,0.9) 100%),
      radial-gradient(130% 125% at 50% -18%, #5e241f 0%, #2d1b1a 44%, #0c0807 100%);
}
.vp-hero--contact .vp-hero__grid {
   background:
      radial-gradient(closest-side at 28% 28%, rgba(232, 34, 20,0.36), transparent 68%),
      radial-gradient(closest-side at 74% 24%, rgba(243, 115, 29,0.24), transparent 66%),
      radial-gradient(closest-side at 55% 85%, rgba(226, 49, 37,0.22), transparent 70%);
}
.vp-hero--contact::after {
   inset: 0;
   top: 0;
   left: 0;
   width: auto;
   height: auto;
   transform: none;
   background-image: radial-gradient(circle, rgba(238, 41, 27,0.22) 1.5px, transparent 1.5px);
   background-size: 34px 34px;
   -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);
   mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%);
   animation: vp-dots-drift 24s linear infinite;
}
.vp-hero--contact .vp-hero__glow--1 { background: #e82214; }
.vp-hero--contact .vp-hero__glow--2 { background: #f3731d; }
.vp-hero--contact .vp-hero__eyebrow {
   border-color: rgba(238, 41, 27,0.4);
   background: rgba(238, 41, 27,0.1);
   color: #f7bab6;
}
.vp-hero--contact .vp-hero__eyebrow .dot { background: #ee291b; box-shadow: 0 0 0 4px rgba(238, 41, 27,0.25); }
.vp-hero--contact .vp-hero__title .grad {
   background: linear-gradient(90deg, #f6756c 0%, #e82214 50%, #f3731d 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.vp-hero__inner { position: relative; z-index: 2; }
.vp-hero__breadcrumb {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   color: #ac9190;
   margin-bottom: 26px;
}
.vp-hero--center .vp-hero__breadcrumb { justify-content: center; }
.vp-hero__breadcrumb a { color: #ac9190; transition: color .3s ease; }
.vp-hero__breadcrumb a:hover { color: #fff; }
.vp-hero__breadcrumb span.sep { opacity: .5; }
.vp-hero__breadcrumb span.current { color: #fff; }
.vp-hero__eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 18px;
   border-radius: 40px;
   border: 1px solid rgba(227, 48, 35, 0.4);
   background: rgba(227, 48, 35, 0.12);
   color: #f8c4c0;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 26px;
}
.vp-hero__eyebrow .dot {
   width: 8px; height: 8px; border-radius: 50%;
   background: #E33023;
   box-shadow: 0 0 0 4px rgba(227, 48, 35, 0.25);
}
.vp-hero__title {
   color: #fff;
   font-size: 60px;
   line-height: 1.08;
   font-weight: 700;
   margin: 0 0 22px;
}
.vp-hero--center .vp-hero__title { margin-left: auto; margin-right: auto; }
.vp-hero__title .grad {
   background: linear-gradient(90deg, #f6675c 0%, #E33023 50%, #e97c33 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
.vp-hero__text {
   color: #bba4a2;
   font-size: 18px;
   line-height: 1.7;
   max-width: 540px;
   margin: 0 0 38px;
}
.vp-hero--center .vp-hero__text { max-width: 620px; margin-left: auto; margin-right: auto; }
.vp-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.vp-hero--center .vp-hero__actions { justify-content: center; }
.vp-hero__btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 16px 30px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 15px;
   transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
}
.vp-hero__btn--primary {
   background: linear-gradient(90deg, #E33023, #f54f43);
   color: #fff;
   box-shadow: 0 14px 30px rgba(227, 48, 35, 0.4);
}
.vp-hero__btn--primary:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 20px 40px rgba(227, 48, 35, 0.5); }
.vp-hero__btn--ghost { border: 1px solid rgba(255,255,255,0.22); color: #fff; }
.vp-hero__btn--ghost:hover { background: rgba(255,255,255,0.08); color: #fff; transform: translateY(-3px); }
.vp-hero__stats {
   display: flex;
   flex-wrap: wrap;
   gap: 40px;
   margin-top: 54px;
   padding-top: 34px;
   border-top: 1px solid rgba(255,255,255,0.1);
}
.vp-hero--center .vp-hero__stats { justify-content: center; }
.vp-hero__stat h3 { color: #fff; font-size: 38px; font-weight: 700; margin: 0 0 4px; }
.vp-hero__stat h3 span { color: #e97c33; }
.vp-hero__stat p { color: #ac9190; font-size: 14px; margin: 0; }
.vp-hero__visual { position: relative; }
.vp-hero__card {
   position: absolute;
   left: -28px;
   bottom: 40px;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 18px 22px;
   border-radius: 16px;
   background: rgba(53, 36, 35, 0.85);
   border: 1px solid rgba(255,255,255,0.12);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.vp-hero__card-icon {
   flex: 0 0 auto;
   width: 48px; height: 48px;
   border-radius: 12px;
   display: inline-flex; align-items: center; justify-content: center;
   background: linear-gradient(135deg, #E33023, #e97c33);
   color: #fff;
   font-size: 20px;
}
.vp-hero__card h5 { color: #fff; font-size: 16px; margin: 0 0 2px; }
.vp-hero__card p { color: #ac9190; font-size: 13px; margin: 0; }
/* ---------- About hero: security dashboard cluster ---------- */
.vp-dash {
   position: relative;
   width: 100%;
   max-width: 440px;
   margin: 0 auto;
   animation: vp-dash-float 6s ease-in-out infinite;
}
.vp-dash__glow {
   position: absolute;
   inset: -14% -8%;
   z-index: 0;
   background: radial-gradient(circle at 62% 42%, rgba(227, 48, 35,0.45), rgba(233, 124, 51,0.12) 48%, transparent 66%);
   filter: blur(34px);
   pointer-events: none;
}
.vp-dash__card {
   position: relative;
   z-index: 1;
   padding: 26px;
   border-radius: 22px;
   background: linear-gradient(160deg, rgba(52, 37, 36,0.92), rgba(30, 20, 19,0.94));
   border: 1px solid rgba(255,255,255,0.12);
   box-shadow: 0 40px 80px rgba(0,0,0,0.5);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
}
.vp-dash__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.vp-dash__title { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; }
.vp-dash__dot { width: 9px; height: 9px; border-radius: 50%; background: #e97c33; box-shadow: 0 0 0 4px rgba(233, 124, 51,0.2); animation: vp-dash-pulse 1.8s ease-in-out infinite; }
.vp-dash__tag { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #e97c33; border: 1px solid rgba(233, 124, 51,0.4); border-radius: 30px; padding: 4px 12px; }
.vp-dash__score { display: flex; align-items: center; gap: 22px; margin-bottom: 22px; }
.vp-dash__ring {
   position: relative;
   flex: 0 0 auto;
   width: 112px; height: 112px;
   border-radius: 50%;
   background: conic-gradient(#e97c33 0 82%, rgba(255,255,255,0.08) 82% 100%);
   display: grid;
   place-items: center;
}
.vp-dash__ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #251716; }
.vp-dash__ring b { position: relative; z-index: 1; color: #fff; font-size: 30px; font-weight: 800; line-height: 1; }
.vp-dash__ring small { position: relative; z-index: 1; display: block; color: #ac9190; font-size: 11px; text-align: center; margin-top: 3px; }
.vp-dash__bars { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 8px; height: 112px; }
.vp-dash__bars span {
   flex: 1;
   height: var(--h);
   border-radius: 6px 6px 0 0;
   background: linear-gradient(180deg, #f6675c, #E33023);
   opacity: .9;
   transform: scaleY(0);
   transform-origin: bottom;
   animation: vp-dash-bar 1s ease-out forwards;
}
.vp-dash__bars span:nth-child(1) { animation-delay: .1s; }
.vp-dash__bars span:nth-child(2) { animation-delay: .2s; }
.vp-dash__bars span:nth-child(3) { animation-delay: .3s; }
.vp-dash__bars span:nth-child(4) { animation-delay: .4s; }
.vp-dash__bars span:nth-child(5) { animation-delay: .5s; }
.vp-dash__bars span:nth-child(6) { animation-delay: .6s; }
.vp-dash__list { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,0.08); }
.vp-dash__list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: #d2c6c5; font-size: 14px; }
.vp-dash__list li i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(227, 48, 35,0.16); color: #f6675c; font-size: 13px; }
.vp-dash__list li b { margin-left: auto; color: #fff; font-weight: 600; }
.vp-dash__list li b.ok { color: #e97c33; }
.vp-dash__chip {
   position: absolute;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 18px;
   border-radius: 14px;
   font-size: 13px;
   font-weight: 600;
   color: #fff;
   background: rgba(53, 36, 35,0.9);
   border: 1px solid rgba(255,255,255,0.14);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   box-shadow: 0 16px 34px rgba(0,0,0,0.4);
}
.vp-dash__chip i { color: #e97c33; }
.vp-dash__chip--1 { top: -22px; right: -14px; animation: vp-dash-float 5s ease-in-out infinite reverse; }
.vp-dash__chip--2 { bottom: -26px; left: -18px; animation: vp-dash-float 7s ease-in-out infinite; }
@keyframes vp-dash-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes vp-dash-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(233, 124, 51,0.25); } 50% { box-shadow: 0 0 0 8px rgba(233, 124, 51,0); } }
@keyframes vp-dash-bar { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
   .vp-dash, .vp-dash__chip--1, .vp-dash__chip--2, .vp-dash__dot, .vp-dash__bars span,
   .vp-hero__grid, .vp-hero__glow--1, .vp-hero__glow--2, .vp-hero::after { animation: none; }
   .vp-dash__bars span { transform: scaleY(1); }
}

/* ---------- Generic section heading ---------- */
.vp-sec { padding: 110px 0; }
.vp-sec--grey { background: #fbf6f6; }
.vp-heading { margin-bottom: 55px; }
.vp-heading--center { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.vp-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #E33023;
   margin-bottom: 16px;
}
.vp-eyebrow i { display: inline-block; width: 26px; height: 2px; background: #E33023; }
.vp-heading h2 { font-size: 42px; line-height: 1.15; color: #2A1514; margin: 0 0 14px; }
.vp-heading p { color: #6f6261; font-size: 17px; margin: 0; }
@media (max-width: 767px) { .vp-heading h2 { font-size: 32px; } }

/* ---------- Service cards ---------- */
.vp-service {
   position: relative;
   height: 100%;
   background: #fff;
   border: 1px solid #f1eded;
   border-radius: 18px;
   padding: 40px 34px;
   margin-bottom: 30px;
   transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.vp-service:hover { transform: translateY(-8px); border-color: transparent; box-shadow: 0 24px 50px rgba(42, 21, 20,0.1); }
.vp-service__icon {
   width: 64px; height: 64px;
   border-radius: 16px;
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 26px; color: #fff;
   background: linear-gradient(135deg, #E33023, #e97c33);
   margin-bottom: 26px;
   box-shadow: 0 12px 24px rgba(227, 48, 35,0.3);
}
.vp-service h4 { font-size: 22px; color: #2A1514; margin: 0 0 12px; }
.vp-service p { color: #6f6261; margin: 0 0 22px; }
.vp-service__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #E33023; }
.vp-service__link:hover { color: #2A1514; gap: 12px; transition: gap .3s ease, color .3s ease; }
.vp-service__num { position: absolute; top: 28px; right: 34px; font-size: 40px; font-weight: 800; color: #f6f2f1; line-height: 1; }

/* ---------- Process steps ---------- */
.vp-step { text-align: center; padding: 0 15px; margin-bottom: 40px; }
.vp-step__circle {
   width: 84px; height: 84px; border-radius: 50%;
   margin: 0 auto 24px;
   display: flex; align-items: center; justify-content: center;
   font-size: 28px; font-weight: 800; color: #E33023;
   background: #fff; border: 2px dashed #f6ccc9;
}
.vp-step h5 { font-size: 20px; color: #2A1514; margin: 0 0 10px; }
.vp-step p { color: #6f6261; margin: 0; }

/* ---------- Pricing ---------- */
/* The cards already matched each other in height, but Enterprise quotes
   "Custom" and so carries no "or X a year - saves Y%" line: 46px of copy
   the other two have and it does not, which left its button that far
   above theirs. Laying the card out as a column and letting the feature
   list take up the slack puts all three buttons on the same line, and
   keeps them there whatever the plans say. (The "Most Popular" tag is
   absolutely positioned, so it is unaffected by the change.) */
.vp-price {
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid #f1eded;
   border-radius: 20px;
   padding: 44px 38px;
   margin-bottom: 30px;
   transition: transform .4s ease, box-shadow .4s ease;
}
.vp-price:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(42, 21, 20,0.1); }
.vp-price--featured {
   background: radial-gradient(120% 120% at 80% 0%, #482522 0%, #1e1413 60%, #100b0a 100%);
   border-color: transparent;
   box-shadow: 0 30px 60px rgba(30, 20, 19,0.35);
}
.vp-price__tag {
   position: absolute; top: 24px; right: 30px;
   font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
   color: #100b0a; background: #e97c33; padding: 5px 14px; border-radius: 30px;
}
.vp-price__name { font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #E33023; margin: 0 0 18px; }
.vp-price--featured .vp-price__name { color: #f6675c; }
.vp-price__amount { font-size: 52px; font-weight: 800; color: #2A1514; line-height: 1; margin: 0 0 6px; }
.vp-price--featured .vp-price__amount { color: #fff; }
.vp-price__amount span { font-size: 17px; font-weight: 500; color: #988b8a; }
.vp-price__desc { color: #6f6261; margin: 14px 0 26px; }
.vp-price--featured .vp-price__desc { color: #bba4a2; }
.vp-price__list { list-style: none; padding: 0; margin: 0 0 32px; flex: 1 0 auto; }
.vp-price__list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: #504746; }
.vp-price--featured .vp-price__list li { color: #dbcccb; }
.vp-price__list li i { color: #E33023; font-size: 14px; }
.vp-price--featured .vp-price__list li i { color: #e97c33; }
.vp-price__list li.off { color: #c0b4b3; }
.vp-price__list li.off i { color: #dad3d2; }
.vp-price__btn {
   display: block; text-align: center;
   padding: 15px 20px; border-radius: 50px; font-weight: 600;
   background: #fbf4f3; color: #2A1514;
   transition: all .3s ease;
}
.vp-price__btn:hover { background: #E33023; color: #fff; }
.vp-price--featured .vp-price__btn { background: linear-gradient(90deg, #E33023, #f54f43); color: #fff; }
.vp-price--featured .vp-price__btn:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(227, 48, 35,0.5); }

/* ---------- Contact ---------- */
/* The card is height:100% so a row of them lines up, which means its own
   margin-bottom is swallowed by the stretched column and rows of cards end
   up touching. The row owns the vertical gap instead, matching the 30px
   horizontal gutter. */
.vp-card-grid { --bs-gutter-y: 30px; }
.vp-contact-info { height: 100%; background: #fff; border: 1px solid #f1eded; border-radius: 18px; padding: 36px 30px; text-align: center; transition: transform .4s ease, box-shadow .4s ease; }
.vp-contact-info:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(42, 21, 20,0.1); }
.vp-contact-info__icon {
   width: 66px; height: 66px; border-radius: 50%;
   margin: 0 auto 22px;
   display: flex; align-items: center; justify-content: center;
   font-size: 24px; color: #fff;
   background: linear-gradient(135deg, #E33023, #e97c33);
}
.vp-contact-info h5 { font-size: 20px; color: #2A1514; margin: 0 0 10px; }
/* The lead line is a summary, not a second paragraph, so it needs air
   under it — 2px ran it straight into the description below. */
.vp-contact-info__lead { display: block; color: #2A1514; font-weight: 600; margin: 0 0 14px; }
.vp-contact-info p { color: #6f6261; margin: 0; display: block; }
.vp-contact-info a { color: #6f6261; margin: 2px 0; display: block; }
.vp-contact-info a:hover { color: #E33023; }
.vp-form { background: #fff; border: 1px solid #f1eded; border-radius: 20px; padding: 46px; box-shadow: 0 20px 50px rgba(42, 21, 20,0.05); }
.vp-form .form-group { margin-bottom: 22px; }
.vp-form label { display: block; font-weight: 600; color: #2A1514; margin-bottom: 8px; font-size: 14px; }
.vp-form input, .vp-form textarea {
   width: 100%;
   border: 1px solid #ebe5e5;
   border-radius: 12px;
   padding: 15px 18px;
   font-size: 15px;
   color: #2A1514;
   background: #fefafa;
   transition: border-color .3s ease, box-shadow .3s ease;
}
.vp-form input:focus, .vp-form textarea:focus { outline: none; border-color: #E33023; box-shadow: 0 0 0 4px rgba(227, 48, 35,0.12); background: #fff; }
.vp-form textarea { min-height: 150px; resize: vertical; }
.vp-form__btn {
   display: inline-flex; align-items: center; gap: 10px;
   border: none; cursor: pointer;
   padding: 16px 34px; border-radius: 50px; font-weight: 600; font-size: 15px;
   color: #fff; background: linear-gradient(90deg, #E33023, #f54f43);
   box-shadow: 0 14px 30px rgba(227, 48, 35,0.4);
   transition: transform .3s ease, box-shadow .3s ease;
}
.vp-form__btn:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(227, 48, 35,0.5); }
.vp-map { border-radius: 20px; overflow: hidden; line-height: 0; box-shadow: 0 20px 50px rgba(42, 21, 20,0.06); }
.vp-map iframe { width: 100%; height: 420px; border: 0; }

/* ---------- Portfolio / Projects ---------- */
.vp-filter { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 50px; }
.vp-filter button {
   border: 1px solid #ebe5e5; background: #fff; color: #504746;
   padding: 10px 24px; border-radius: 50px; font-weight: 600; font-size: 14px; cursor: pointer;
   transition: all .3s ease;
}
.vp-filter button:hover { border-color: #E33023; color: #E33023; }
.vp-filter button.active { background: #E33023; border-color: #E33023; color: #fff; }
/* ---------- Portfolio gallery ----------
   A justified photo wall rather than a grid of cards. Tiles take ragged
   widths so each row reads as its own composition, the photo pushes in on
   hover, and the case-study panel rides in from the side the cursor came
   from — panels are never display:none or visibility:hidden, only pushed
   outside the tile's own overflow, so the text stays in the accessibility
   tree and reachable by keyboard.

   The whole effect is gated behind (hover: hover): on a phone there is no
   cursor to slide anything, so the panel simply sits at the foot of the
   tile and the caption above it stands down. */
.vp-gal { display: flex; flex-wrap: wrap; gap: 14px; }
.vp-gal__item {
   position: relative;
   flex: 1 1 300px;
   min-height: 300px;
   overflow: hidden;
   border-radius: 16px;
   background: #100b0a;
   isolation: isolate;
   display: block;
   color: #fff;
   text-decoration: none;
}
.vp-gal__item:hover, .vp-gal__item:focus { color: #fff; }
.vp-gal__item.is-hidden { display: none; }
/* Ragged widths on the four-tile cycle. Every tile still grows to fill its
   row, so a filtered-down gallery closes up instead of leaving holes. */
.vp-gal__item:nth-child(4n+1) { flex-basis: 400px; }
.vp-gal__item:nth-child(4n+2) { flex-basis: 300px; }
.vp-gal__item:nth-child(4n+3) { flex-basis: 340px; }
.vp-gal__item:nth-child(4n+4) { flex-basis: 470px; }

.vp-gal__photo {
   position: absolute; inset: 0;
   background: #1a0f0e 50% 50% / cover no-repeat;
   transform-origin: 50% 60%;
   transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.vp-gal__photo::after {
   content: "";
   position: absolute; inset: 0;
   background: linear-gradient(180deg, rgba(12, 8, 8,0.10) 0%, rgba(12, 8, 8,0.45) 52%, rgba(12, 8, 8,0.92) 100%);
}
.vp-gal__item:hover .vp-gal__photo,
.vp-gal__item:focus-visible .vp-gal__photo { transform: scale(1.14); }

/* Resting caption — category and title over the photo. */
.vp-gal__cap {
   position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
   padding: 24px 26px;
   transition: opacity .3s ease, transform .35s ease;
}
.vp-gal__cap h4 {
   margin: 0;
   color: #fff;
   font-size: 21px;
   line-height: 1.28;
}
.vp-gal__cat {
   display: inline-block;
   margin-bottom: 8px;
   font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
   color: #ffb59a;
}

/* The panel that carries the story. */
.vp-gal__panel {
   position: absolute; inset: 0; z-index: 3;
   display: flex; flex-direction: column; justify-content: flex-end;
   padding: 26px;
   background: linear-gradient(180deg, rgba(12, 8, 8,0) 6%, rgba(21, 9, 8,0.74) 44%, rgba(12, 8, 8,0.96) 100%);
   text-shadow: 0 1px 14px rgba(0,0,0,0.55);
}
.vp-gal__panel .vp-gal__cat { color: #ff8f6b; }
.vp-gal__panel h4 {
   margin: 0 0 10px;
   color: #fff;
   font-size: 21px;
   line-height: 1.28;
}
.vp-gal__panel p {
   margin: 0;
   color: rgba(255,255,255,0.78);
   font-size: 14.5px;
   line-height: 1.6;
}
.vp-gal__more {
   display: inline-flex; align-items: center; gap: 9px;
   margin-top: 16px;
   font-size: 13.5px; font-weight: 600; letter-spacing: .3px;
   color: #fff;
}
.vp-gal__more i {
   width: 30px; height: 30px; border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 12px;
   background: linear-gradient(90deg, #E33023, #f54f43);
   box-shadow: 0 8px 20px rgba(227, 48, 35,0.45);
   transition: transform .3s ease;
}
.vp-gal__item:hover .vp-gal__more i { transform: translateX(3px); }

/* Phones and tablets: no cursor, so the panel just sits there and the
   caption underneath it would only be a second copy of the same title. */
.vp-gal__cap { display: none; }
.vp-gal__panel p {
   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
   overflow: hidden;
}

@media (hover: hover) and (min-width: 992px) {
   .vp-gal__item { min-height: 330px; }
   .vp-gal__cap { display: block; }
   .vp-gal__panel {
      background: linear-gradient(180deg, rgba(36, 13, 11,0.90) 0%, rgba(14, 8, 8,0.95) 100%);
      text-shadow: none;
      transform: translateY(100%);
      transition: transform .38s cubic-bezier(.4,0,.2,1);
      will-change: transform;
   }
   .vp-gal__panel p { -webkit-line-clamp: 4; }

   /* Anything left of the cursor leaves to the right, anything right of it
      leaves to the left, and the tile under the cursor comes home. */
   .vp-gal:hover .vp-gal__panel { transform: translateX(100%); }
   .vp-gal:hover .vp-gal__item:hover ~ .vp-gal__item .vp-gal__panel { transform: translateX(-100%); }
   .vp-gal__item:hover .vp-gal__panel,
   .vp-gal__item:focus-visible .vp-gal__panel { transform: none; }

   .vp-gal__item:hover .vp-gal__cap,
   .vp-gal__item:focus-visible .vp-gal__cap { opacity: 0; transform: translateY(14px); }
}

@media (prefers-reduced-motion: reduce) {
   .vp-gal__photo, .vp-gal__panel, .vp-gal__cap { transition-duration: .01ms; }
   .vp-gal__item:hover .vp-gal__photo { transform: none; }
}

.vp-gal__item:focus-visible { outline: 2px solid #f54f43; outline-offset: 3px; }
.vp-item.is-hidden { display: none; }

/* ---------- Project hero: image collage ---------- */
.vp-collage {
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
   max-width: 500px;
   margin-left: auto;
   /* the badge overhangs the bottom-left corner */
   padding-bottom: 46px;
}
.vp-collage__tile {
   position: relative;
   margin: 0;
   overflow: hidden;
   border-radius: 18px;
   border: 1px solid rgba(255,255,255,0.14);
   box-shadow: 0 24px 50px rgba(0,0,0,0.5);
   transition: transform .55s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.vp-collage__tile img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* The photographs are cool-lit and the hero behind them is warm, so a
      light grade pulls them onto the brand instead of leaving four
      unrelated stock frames floating on a maroon page. */
   filter: saturate(1.06) contrast(1.06) brightness(.92);
   transition: transform .7s cubic-bezier(.2,.8,.3,1), filter .45s ease;
}
/* Staggered heights read as a composition rather than a plain 2x2 table. */
.vp-collage__tile:nth-child(1) { height: 210px; transform: translateY(-18px); }
.vp-collage__tile:nth-child(2) { height: 168px; transform: translateY(16px); }
.vp-collage__tile:nth-child(3) { height: 168px; transform: translateY(-18px); }
.vp-collage__tile:nth-child(4) { height: 210px; transform: translateY(16px); }

/* Warm veil + a readable floor for the label. */
.vp-collage__tile::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
      linear-gradient(180deg, rgba(20,10,10,0) 38%, rgba(16,8,8,0.88) 100%),
      linear-gradient(140deg, rgba(227,48,35,0.26) 0%, rgba(227,48,35,0) 55%);
   pointer-events: none;
   transition: opacity .45s ease;
}
.vp-collage__tile figcaption {
   position: absolute;
   z-index: 2;
   left: 14px;
   bottom: 12px;
   right: 14px;
   color: #fff;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.1px;
   text-transform: uppercase;
   text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.vp-collage__tile figcaption::before {
   content: "";
   display: inline-block;
   width: 14px;
   height: 2px;
   margin-right: 8px;
   vertical-align: middle;
   background: linear-gradient(90deg, #f4546e, #f3731d);
}
.vp-collage__tile:hover {
   transform: translateY(-4px) scale(1.015);
   border-color: rgba(244,84,110,0.55);
   box-shadow: 0 30px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(244,84,110,0.25);
}
.vp-collage__tile:hover img { transform: scale(1.07); filter: saturate(1.15) contrast(1.05) brightness(1); }
.vp-collage__tile:hover::after { opacity: .78; }

/* Proof badge, matching the courses hero's deck badge. */
.vp-collage__badge {
   position: absolute;
   z-index: 3;
   left: -30px;
   bottom: -14px;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 18px;
   border-radius: 16px;
   background: rgba(26, 15, 14, 0.92);
   border: 1px solid rgba(255,255,255,0.14);
   box-shadow: 0 20px 40px rgba(0,0,0,0.5);
   backdrop-filter: blur(6px);
}
.vp-collage__badge-icon {
   display: grid;
   place-items: center;
   width: 38px; height: 38px;
   border-radius: 12px;
   background: linear-gradient(135deg, #f4546e, #f3731d);
   color: #fff;
   font-size: 16px;
}
.vp-collage__badge b { display: block; color: #fff; font-size: 14px; line-height: 1.3; }
.vp-collage__badge span { display: block; color: #bba4a2; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
   .vp-collage__tile, .vp-collage__tile img { transition: none; }
}

/* ---------- Pricing hero: benefit pills ---------- */
.vp-hero__pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 34px; }
.vp-hero__pill {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 11px 20px; border-radius: 40px;
   border: 1px solid rgba(255,255,255,0.14);
   background: rgba(255,255,255,0.05);
   color: #dbcccb; font-size: 14px; font-weight: 500;
}
.vp-hero__pill i { color: #e97c33; }
.vp-hero__peek { margin-top: 30px; color: #bba4a2; font-size: 15px; }
.vp-hero__peek strong { color: #fff; font-size: 24px; font-weight: 700; }

/* ---------- Global Presence (3D dotted earth) ---------- */
.vp-globe-sec {
   position: relative;
   overflow: hidden;
   background: radial-gradient(120% 120% at 80% 20%, #2e1f1e 0%, #1e1413 45%, #0c0808 100%);
   padding: clamp(56px, 8vw, 100px) 0;
}
.vp-globe-sec .vp-heading { margin-bottom: clamp(28px, 4vw, 44px); }
.tp-about__section-box .tp-section-subtitle { margin-bottom: 22px; }
.vp-globe-sec .vp-eyebrow { color: #f6675c; }
.vp-globe-sec .vp-eyebrow i { background: #f6675c; }
.vp-globe-sec .vp-heading h2 { color: #fff; }
.vp-globe-sec .vp-heading p { color: #bba4a2; }
.vp-loc-list { position: relative; z-index: 2; }
.vp-loc {
   display: flex;
   align-items: center;
   gap: 20px;
   width: 100%;
   text-align: left;
   cursor: pointer;
   padding: 22px 26px;
   margin-bottom: 18px;
   border-radius: 18px;
   border: 1px solid rgba(255,255,255,0.08);
   background: rgba(255,255,255,0.02);
   transition: border-color .35s ease, background .35s ease, transform .35s ease;
}
.vp-loc:hover { transform: translateY(-3px); border-color: rgba(245, 79, 67,0.35); }
.vp-loc.active {
   border-color: rgba(245, 79, 67,0.5);
   background: linear-gradient(120deg, rgba(227, 48, 35,0.22), rgba(233, 124, 51,0.06));
   box-shadow: 0 20px 45px rgba(30, 20, 19,0.5);
}
.vp-loc__pin {
   flex: 0 0 auto;
   width: 52px; height: 52px;
   border-radius: 14px;
   display: flex; align-items: center; justify-content: center;
   font-size: 20px; color: #fad1ce;
   background: rgba(227, 48, 35,0.14);
   border: 1px solid rgba(245, 79, 67,0.3);
   transition: all .35s ease;
}
.vp-loc.active .vp-loc__pin {
   color: #fff;
   background: linear-gradient(135deg, #E33023, #e97c33);
   box-shadow: 0 10px 24px rgba(227, 48, 35,0.5);
}
.vp-loc__main { flex: 1 1 auto; }
.vp-loc__name { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 3px; }
.vp-loc__region { color: #f6675c; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.vp-loc__desc { color: #bba4a2; font-size: 14px; margin: 12px 0 0; max-height: 0; overflow: hidden; opacity: 0; transition: all .4s ease; }
.vp-loc.active .vp-loc__desc { max-height: 90px; opacity: 1; margin-top: 12px; }
.vp-loc__count { flex: 0 0 auto; text-align: right; }
.vp-loc__count b { display: block; color: #fff; font-size: 22px; font-weight: 700; line-height: 1; }
.vp-loc__count span { color: #ac9190; font-size: 13px; }

.vp-earth-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; }
.vp-earth-wrap::before {
   content: "";
   position: absolute;
   width: 78%; aspect-ratio: 1/1;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(227, 48, 35,0.35), transparent 62%);
   filter: blur(30px);
   pointer-events: none;
}
.vp-earth {
   width: 100%;
   max-width: 620px;
   aspect-ratio: 1 / 1;
   position: relative;
   z-index: 1;
   contain: layout paint size;
}
/* big centered attack-map variant */
.vp-globe-inner { max-width: 1340px; margin: 0 auto; }
.vp-earth-wrap--lg { max-width: 1040px; margin: 40px auto 0; min-height: auto; }
.vp-earth-wrap--lg .vp-earth { max-width: 1000px; }
.vp-earth-wrap--lg::before { width: 66%; background: radial-gradient(circle, rgba(227, 48, 35,0.45), rgba(233, 124, 51,0.12) 48%, transparent 66%); }
.vp-earth:active { cursor: grabbing; }
.vp-earth__status {
   position: absolute;
   left: 6%;
   bottom: 8%;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 16px 20px;
   border-radius: 14px;
   background: rgba(34, 23, 22,0.82);
   border: 1px solid rgba(255,255,255,0.12);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}
.vp-earth__status-icon {
   width: 40px; height: 40px; border-radius: 10px;
   display: flex; align-items: center; justify-content: center;
   background: linear-gradient(135deg, #E33023, #e97c33); color: #fff; font-size: 16px;
}
.vp-earth__status h6 { color: #fff; font-size: 14px; margin: 0 0 4px; }
.vp-earth__status p { margin: 0; font-size: 12px; color: #ac9190; }
.vp-earth__status .ok { color: #e97c33; font-weight: 700; }
/* legend */
.vp-earth-legend {
   position: absolute; top: 4%; left: 4%; z-index: 3;
   display: flex; flex-direction: column; gap: 9px;
   font-size: 13px; color: #bba4a2;
}
.vp-earth-legend span { display: flex; align-items: center; gap: 9px; }
.vp-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.vp-dot--hq { background: #fff; box-shadow: 0 0 8px 1px #e97c33; }
.vp-dot--office { background: #e97c33; box-shadow: 0 0 8px 1px rgba(233, 124, 51,0.7); }
/* attack-map legend */
.vp-attack-legend {
   position: absolute; top: 4%; left: 4%; z-index: 3;
   display: flex; flex-direction: column; gap: 8px;
   font-size: 12.5px; color: #bba4a2;
}
.vp-attack-legend span { display: flex; align-items: center; gap: 8px; }
/* attack-map HUD (counter + feed) */
.vp-attack-hud {
   position: absolute; left: 3%; bottom: 5%; z-index: 3;
   width: 250px; max-width: 62%;
   padding: 16px 18px; border-radius: 14px;
   background: rgba(28, 18, 17, 0.82);
   border: 1px solid rgba(255,255,255,0.12);
   -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
   box-shadow: 0 20px 40px rgba(0,0,0,0.45);
}
.vp-attack-live {
   display: inline-flex; align-items: center; gap: 6px;
   font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #ff5b6b;
}
.vp-attack-live i { width: 7px; height: 7px; border-radius: 50%; background: #ff5b6b; box-shadow: 0 0 0 0 rgba(255,91,107,0.6); animation: vp-live 1.4s ease-out infinite; }
@keyframes vp-live { 0% { box-shadow: 0 0 0 0 rgba(255,91,107,0.55); } 100% { box-shadow: 0 0 0 8px rgba(255,91,107,0); } }
.vp-attack-count b { display: block; color: #fff; font-size: 30px; font-weight: 800; line-height: 1.05; margin: 4px 0 1px; font-variant-numeric: tabular-nums; }
.vp-attack-count__label { color: #ac9190; font-size: 12px; }
.vp-attack-feed { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.1); min-height: 20px; }
.vp-feed-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: #d2c6c5; padding: 2px 0; white-space: nowrap; }
.vp-feed-row i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.vp-feed-from { color: #bba4a2; }
.vp-feed-arw { color: #867372; }
.vp-feed-to { color: #fff; font-weight: 600; }
.vp-feed-type { margin-left: auto; font-weight: 700; font-size: 11px; }
@media (max-width: 575px) { .vp-attack-hud { width: 190px; padding: 12px 14px; } .vp-attack-count b { font-size: 24px; } .vp-feed-type { display: none; } }
/* flat world threat map */
.vp-tmap {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
   border-radius: clamp(12px, 1.6vw, 18px);
   overflow: hidden;
   background: radial-gradient(120% 140% at 50% 0%, #251918 0%, #150e0e 60%, #0c0808 100%);
   border: 1px solid rgba(255,255,255,0.08);
   box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.vp-tmap__canvas {
   display: block;
   width: 100%;
   aspect-ratio: 360 / 136;
   /* the canvas is decorative — never let it swallow a touch scroll */
   touch-action: pan-y;
}
.vp-tmap__title, .vp-attack-legend--tr, .vp-tmap__feed {
   position: absolute;
   z-index: 3;
   padding: clamp(10px, 1.1vw, 14px) clamp(12px, 1.3vw, 16px);
   border-radius: 12px;
   background: rgba(20, 13, 13,0.5);
   border: 1px solid rgba(255,255,255,0.07);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
}
.vp-tmap__title { top: clamp(12px, 2.2vw, 26px); left: clamp(12px, 2.2vw, 26px); }
.vp-tmap__title b {
   display: block;
   color: #fff;
   font-size: clamp(19px, 2.5vw, 30px);
   font-weight: 800;
   line-height: 1.1;
   font-variant-numeric: tabular-nums;
   margin: 6px 0 2px;
   text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.vp-tmap__label { color: #ac9190; font-size: clamp(10.5px, 1vw, 12px); }
.vp-attack-legend--tr {
   top: clamp(12px, 2.2vw, 26px);
   right: clamp(12px, 2.2vw, 26px);
   left: auto;
   gap: clamp(5px, .75vw, 9px);
   font-size: clamp(10.5px, 1.05vw, 12.5px);
}
.vp-attack-legend--tr .vp-dot { width: clamp(7px, .8vw, 10px); height: clamp(7px, .8vw, 10px); }
.vp-tmap__feed {
   left: clamp(12px, 2.2vw, 26px);
   bottom: clamp(12px, 2.2vw, 26px);
   width: min(300px, 44%);
}
.vp-tmap__feed .vp-feed-row { text-shadow: 0 1px 6px rgba(0,0,0,0.6); padding: 4px 0; }

/* Tablet: the HUD still overlays, but the feed would crowd the map — drop it. */
@media (max-width: 991px) {
   .vp-tmap__feed { display: none; }
}

/* Phones: the map is only ~130px tall here, so nothing may sit on top of it.
   The card turns into a stack — counter, map, legend, feed — and every
   overlay chrome (blur, border, panel background) is stripped off. */
@media (max-width: 767px) {
   .vp-tmap { display: flex; flex-direction: column; }
   .vp-tmap__title,
   .vp-attack-legend--tr,
   .vp-tmap__feed {
      position: static;
      width: auto;
      max-width: none;
      border: 0;
      border-radius: 0;
      background: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
   }
   .vp-tmap__title {
      order: 1;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 2px 10px;
      padding: 18px 18px 14px;
   }
   .vp-tmap__title .vp-attack-live { flex: 1 0 100%; }
   .vp-tmap__title b { font-size: clamp(26px, 8vw, 34px); margin: 4px 0 0; }
   .vp-tmap__label { font-size: 12px; }
   .vp-tmap__canvas { order: 2; }
   .vp-attack-legend--tr {
      order: 3;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px 16px;
      font-size: 11.5px;
      padding: 14px 18px 0;
   }
   .vp-tmap__feed {
      order: 4;
      display: block;
      margin: 14px 18px 16px;
      padding: 12px 0 0;
      border-top: 1px solid rgba(255,255,255,0.09);
   }
   .vp-tmap__feed .vp-feed-row { font-size: 11.5px; text-shadow: none; }
}

@media (max-width: 400px) {
   .vp-globe-sec .vp-heading h2 { font-size: 27px; }
   .vp-tmap__title { padding: 15px 14px 12px; }
   .vp-attack-legend--tr { gap: 6px 12px; font-size: 11px; padding: 12px 14px 0; }
   .vp-tmap__feed { margin: 12px 14px 14px; }
   .vp-tmap__feed .vp-feed-row { gap: 6px; }
}
/* stats strip */
.vp-globe-stats {
   display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
   margin-top: 64px; padding-top: 42px;
   border-top: 1px solid rgba(255,255,255,0.1);
   text-align: center;
}
.vp-globe-stat b { display: block; color: #fff; font-size: 36px; font-weight: 800; line-height: 1; margin-bottom: 6px; }
.vp-globe-stat b span { color: #e97c33; }
.vp-globe-stat > span { color: #ac9190; font-size: 14px; }
@media (max-width: 991px) {
   .vp-earth-wrap { margin-top: 40px; min-height: auto; }
   .vp-earth { max-width: 440px; }
   .vp-earth-wrap--lg .vp-earth { max-width: 560px; }
}
@media (max-width: 575px) {
   .vp-earth-wrap--lg .vp-earth { max-width: 350px; }
   .vp-attack-legend { font-size: 11px; }
   .vp-globe-stats { grid-template-columns: repeat(2, 1fr); gap: 26px; }
   .vp-globe-stat b { font-size: 30px; }
}

/* ---------- Responsive hero ---------- */
@media (max-width: 1199px) { .vp-hero__title { font-size: 48px; } }
@media (max-width: 991px) {
   .vp-hero { padding: 150px 0 76px; margin-bottom: 0; }
   .vp-hero--center { padding: 150px 0 80px; }
   .vp-hero.vp-hero--metabar { padding-bottom: 118px; }
   .vp-hero__visual { margin-top: 50px; }
   .vp-hero__title { font-size: 44px; }
   .vp-sec { padding: 80px 0; }
   .vp-collage { max-width: 440px; margin: 40px auto 0; }
   .vp-collage__badge { left: 0; }
}
@media (max-width: 575px) {
   .vp-hero__title { font-size: 34px; }
   .vp-hero__text { font-size: 16px; }
   .vp-hero__stats { gap: 26px; }
   .vp-hero__stat h3 { font-size: 30px; }
   .vp-hero__card { left: 12px; right: 12px; bottom: 12px; }
   .vp-dash { max-width: 340px; }
   .vp-dash__card { padding: 22px; }
   .vp-dash__ring { width: 96px; height: 96px; }
   .vp-dash__ring b { font-size: 26px; }
   .vp-dash__bars { height: 96px; }
   .vp-collage { gap: 12px; }
   .vp-collage__tile:nth-child(1),
   .vp-collage__tile:nth-child(4) { height: 150px; }
   .vp-collage__tile:nth-child(2),
   .vp-collage__tile:nth-child(3) { height: 124px; }
   .vp-collage__badge { position: static; margin-top: 18px; grid-column: 1 / -1; }
}

/* ---------- Detail pages (project / service / team / career) ---------- */
.vp-crumb-x { color: #ac9190; }
.vp-meta {
   background: #fff;
   border: 1px solid #f4f0f0;
   border-radius: 16px;
   padding: 26px 28px;
   margin-bottom: 30px;
   box-shadow: 0 12px 30px rgba(39, 26, 25, 0.05);
}
.vp-meta span { display: block; color: #E33023; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.vp-meta b { color: #271a19; font-size: 17px; font-weight: 600; }
.vp-detail-img { border-radius: 18px; overflow: hidden; box-shadow: 0 26px 60px rgba(39, 26, 25, 0.18); }
.vp-detail-img img { width: 100%; display: block; }
.vp-detail-list { margin: 0 0 10px; padding: 0; list-style: none; }
.vp-detail-list li { display: flex; align-items: flex-start; gap: 12px; color: #665b5a; font-size: 16px; line-height: 1.6; margin-bottom: 14px; }
.vp-detail-list li i { color: #e97c33; margin-top: 5px; }
.vp-results { display: flex; flex-wrap: wrap; gap: 30px 60px; margin-top: 40px; }
.vp-result h3 { color: #271a19; font-size: 40px; font-weight: 700; margin: 0 0 4px; }
.vp-result h3 span { color: #E33023; }
.vp-result p { color: #665b5a; font-size: 14px; margin: 0; }
/* The results on a case study now stand under a centred heading with no
   quote beside them, so the row centres itself and each figure sits over
   its own label. */
.vp-results--center { justify-content: center; text-align: center; gap: 34px 70px; }
.vp-results--center .vp-result { min-width: 150px; }
/* text-align is reset here because the earlier, now-unused centred .vp-step
   block above still leaks `text-align: center` into this flex version. */
.vp-step { display: flex; align-items: flex-start; text-align: left; gap: 22px; margin-bottom: 34px; }
.vp-step__num {
   flex: 0 0 auto;
   width: 54px; height: 54px; border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   background: rgba(227, 48, 35, 0.1);
   color: #E33023; font-size: 18px; font-weight: 700;
}
.vp-step h5 { color: #271a19; font-size: 19px; margin: 6px 0 8px; }
.vp-step p { color: #665b5a; font-size: 15px; line-height: 1.7; margin: 0; }
.vp-quote {
   background: linear-gradient(135deg, #2e1f1e 0%, #251716 100%);
   border-radius: 18px;
   padding: 40px 44px;
   margin: 44px 0 0;
}
.vp-quote p { color: #edd8d6; font-size: 19px; line-height: 1.7; font-style: italic; margin: 0 0 18px; }
.vp-quote cite { color: #f6675c; font-size: 14px; font-style: normal; font-weight: 600; letter-spacing: .5px; }
@media (max-width: 767px) {
   .vp-results { gap: 24px 36px; }
   .vp-quote { padding: 30px 26px; }
}

/* course resources grid */
.vp-res { --res-acc: #E33023; --res-acc2: #e97c33; }
.vp-res > [class*="col-"] { margin-bottom: 26px; display: flex; }
.vp-res__card {
   position: relative;
   width: 100%;
   background: #fff;
   border: 1px solid #f1eae9;
   border-radius: 18px;
   padding: 28px 26px 26px;
   box-shadow: 0 10px 30px rgba(42, 21, 20, 0.05);
   transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.vp-res__card:hover {
   transform: translateY(-6px);
   border-color: #f4d3ce;
   box-shadow: 0 26px 52px rgba(42, 21, 20, 0.12);
}
.vp-res__icon {
   display: grid; place-items: center;
   width: 52px; height: 52px;
   border-radius: 14px;
   margin-bottom: 20px;
   background: linear-gradient(135deg, var(--res-acc), var(--res-acc2));
   color: #fff; font-size: 20px;
   box-shadow: 0 10px 22px rgba(227, 48, 35, 0.28);
}
.vp-res__tag {
   display: inline-block;
   font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
   color: var(--res-acc);
   background: rgba(227, 48, 35, 0.09);
   border-radius: 999px;
   padding: 5px 12px;
   margin-bottom: 12px;
}
.vp-res__title { color: var(--edu-ink); font-size: 18px; font-weight: 600; margin: 0 0 9px; line-height: 1.35; }
.vp-res__desc { color: var(--edu-muted); font-size: 14.5px; line-height: 1.7; margin: 0; }

/* download cards are clickable links to official tool pages */
.vp-res__card--link { display: flex; flex-direction: column; text-decoration: none; }
.vp-res__card--link .vp-res__desc { margin-bottom: 18px; }
.vp-res__get {
   margin-top: auto;
   display: inline-flex; align-items: center; gap: 8px;
   color: var(--res-acc);
   font-size: 14px; font-weight: 700; letter-spacing: .3px;
}
.vp-res__get i { transition: transform .3s ease; }
.vp-res__card--link:hover .vp-res__get i { transform: translateX(5px); }
.vp-dl__note {
   margin: 10px auto 0;
   max-width: 720px;
   text-align: center;
   color: #988b8a;
   font-size: 13px;
   line-height: 1.6;
}
@media (max-width: 767px) {
   .vp-res__card { padding: 24px 22px; }
}

/* =====================================================================
   Equal-height cards — "Why Businesses Choose Us" + "Our Services"
   The ragged heights come from titles that wrap to two lines on some
   cards and one line on others, plus body copy of differing length.
   ===================================================================== */

@media (min-width: 768px) {
   /* Reserve two title lines so a wrapped title never makes a card taller. */
   .tp-feature__title-sm { min-height: calc(2.6em + 20px); }  /* line-height 1.3 + 20px pad */
   .tp-service__title-sm { min-height: calc(2.2em + 5px); }   /* line-height 1.1 + 5px pad  */

   /* Stretch the feature cards to fill their grid cell so cards in a row
      stay the same height regardless of copy length. */
   .tp-feature__area .row > [class*="col-"] { display: flex; }
   .tp-feature__item {
      width: 100%;
      display: flex;
      flex-direction: column;
   }
}

/* The service icon PNGs are 44–48px tall, which left a few px of drift
   between cards. Give the icon a fixed box so it can't affect height. */
.tp-service__icon {
   height: 48px;
   display: flex;
   align-items: center;
}

/* Between 992px and 1199px the template hides the <br> inside the service
   copy, so the paragraphs rewrap to 2 or 3 lines depending on the text.
   Reserve three lines through that band so the cards stay level. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .tp-service__content p { min-height: calc(4.5em + 7px); }
}

/* =====================================================================
   Hero particle network — the animated node mesh painted into the
   gradient hero. The canvas is injected by assets/js/vp-particles.js and
   sits above the gradient but below the headline and the input.
   ===================================================================== */
.vp-particles {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   border-radius: 30px;
   pointer-events: none;   /* never steal clicks from the email field */
   opacity: 0;
   transition: opacity 1.4s ease;
}
.vp-particles.is-ready { opacity: var(--vp-particles-opacity, 1); }

@media (prefers-reduced-motion: reduce) {
   .vp-particles { transition: none; }
}

@media (max-width: 767px) {
   /* The mobile gradient is offset and oversized; keep the mesh softer
      so it reads as texture rather than competing with the headline. */
   .vp-particles { --vp-particles-opacity: 0.6; }
}

/* =====================================================================
   Home hero — dark ops palette
   Colour values only. The ramp was lavender -> indigo
   (#FAE3E2 -> #ED8C9C -> #E33023); it is now near-black -> deep teal.

   Nothing here changes layout, animation or compositing: no blend modes,
   no opacity overrides, no added borders, shadows or filters, and the
   two-layer background keeps the theme's original structure so the
   white wash still sits over the ramp exactly as before — only the
   colour values in it differ.

   Inverting the ground means the text on it has to be re-coloured too,
   or it is unreadable. The header flips only while transparent; once
   .header-sticky drops the white bar in it must go back to dark, so
   those rules are scoped with :not(.header-sticky).
   ===================================================================== */
.tp-hero-bg {
   opacity: 1;
   background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(100deg, #0e0809 0%, #3d1113 45%, #521517 100%);
}

/* ---------- headline + email capture ---------- */
.tp-hero__hero-title { color: #fbf3f2; }
.tp-hero__title-shape svg path.line1 { stroke: #e33023; }
.tp-hero__content-box > p { color: rgba(245, 227, 226, 0.62); }

.tp-hero__input input { background-color: #24100f; color: #f7e9e8; }
.tp-hero__input input::placeholder { color: rgba(245, 227, 226, 0.45); }
/* the envelope glyph is stroked #5F6168 inline, for a white field */
.tp-hero__input svg path { stroke: #e8a09a; }
/* .tp-btn is brand indigo — the last purple on the hero. Flat colour, as
   the theme has it, so the tp-btn-hover circle-fill still reads the same. */
.tp-hero__input button.tp-btn { background-color: #e33023; }

/* ---------- header, only while transparent on the dark hero ---------- */
/* .black-logo is display:none globally in the theme and is only re-shown
   by a `.header-sticky-bg-2` rule this header does not carry — so the
   sticky bar needs its own rule or it loses the logo entirely. */
.header-on-dark:not(.header-sticky) .black-logo { display: none; }
.header-on-dark.header-sticky .black-logo { display: inline-block; }
.header-on-dark.header-sticky .white-logo { display: none; }
.header-on-dark:not(.header-sticky) .header-bottom__main-menu > nav > ul > li > a { color: #f7e9e8; }
.header-on-dark:not(.header-sticky) .header-bottom__main-menu > nav > ul > li > a:hover { color: #e07c39; }
.header-on-dark:not(.header-sticky) .header-bottom__action a { color: #f7e9e8; }
.header-on-dark:not(.header-sticky) .header-bottom__action a:hover { color: #e07c39; }
.header-on-dark:not(.header-sticky) .header-bottom__action a::before { background-color: rgba(255, 255, 255, 0.22); }
.header-on-dark:not(.header-sticky) .header-bottom__action a svg path { stroke: currentColor; }

/* Top strip (offer / support): the strip itself is left exactly as it was --
   transparent over the hero, same spacing, same arrow puck. Only the words
   change colour, to black. */
.header-top__area .header-top__link span,
.header-top__area .header-top__link span i,
.header-top__area .header-top__support span,
.header-top__area .header-top__support span a { color: #000000; }
.header-top__area .header-top__support span a:hover { color: #E33023; }
/* The offer copy links through to the courses it applies to. `.header-top__link a`
   is the round arrow puck, so the text link has to opt out of that shape. */
.header-top__area .header-top__link .header-top__offer {
   width: auto; height: auto; line-height: inherit;
   border-radius: 0; background-color: transparent;
   display: inline; text-align: left;
}
.header-top__area .header-top__link .header-top__offer:hover { background-color: transparent; }
.header-top__area .header-top__link .header-top__offer:hover span,
.header-top__area .header-top__link .header-top__offer:hover span i { color: #E33023; }

/* ---------- Velpoint logo sizing ----------------------------------------
   The stock Softec files were 133x37 and were left to render at their
   natural size. The Velpoint lockup ships at 480x152 for retina, so every
   place that shows it needs an explicit height or it renders 3.5x too big.
   Height (not width) is what's pinned, so the two-line wordmark keeps a
   consistent cap height next to the nav. */
.header-bottom__logo img { height: 44px; width: auto; }
.tp-footer__logo img,
.tp-footer__widget-logo img { height: 54px; width: auto; }
.search__logo img { height: 44px; width: auto; }
/* the theme sets width:157px + height:100% here; height:100% resolves off an
   auto-height parent, so pin the height and let the width follow */
.tpoffcanvas__logo img { width: auto; height: 48px; }

/* Below 768 the homepage hero's artwork starts under the header, so the bar
   sits on the white body rather than on the dark hero. The white lockup would
   vanish there -- only the red mark survives -- so serve the full-colour one.
   Inner pages (.header-sticky-bg-2) keep their dark hero behind the bar. */
@media (max-width: 767px) {
   .header-on-dark:not(.header-sticky) .white-logo { display: none; }
   .header-on-dark:not(.header-sticky) .black-logo { display: inline-block; }

   .header-bottom__logo img { height: 36px; }
   .tp-footer__logo img,
   .tp-footer__widget-logo img { height: 46px; }
   .search__logo img { height: 36px; }
}

/* =====================================================================
   Hero SOC console
   Replaces the template's screenshot collage inside .tp-hero__thumb-wrapper
   with a security operations console built from markup + SVG, so it stays
   sharp at any size and follows the brand palette instead of the stock
   images' colours. Hidden below 768px by the wrapper's own d-md-block.
   ===================================================================== */
.vp-soc {
   --vp-soc-ink: #271a19;
   --vp-soc-muted: #8f7e7d;
   --vp-soc-indigo: #E33023;
   --vp-soc-amber: #FFB020;
   --vp-soc-red: #B3123A;
   --vp-soc-teal: #d26013;
   --vp-soc-gap: 18px;

   display: grid;
   grid-template-columns: 2.08fr 1fr;
   gap: var(--vp-soc-gap);
   align-items: stretch;
}
.vp-soc__main {
   display: grid;
   grid-template-rows: auto auto;
   gap: var(--vp-soc-gap);
   min-width: 0;
}
.vp-soc__row {
   display: grid;
   grid-template-columns: 1fr 2.15fr;
   gap: var(--vp-soc-gap);
   min-width: 0;
}
.vp-soc__panel {
   background: #fff;
   border-radius: 14px;
   box-shadow: 0 1px 3px rgba(27, 24, 23, 0.16);
   padding: 16px 18px;
   min-width: 0;
}
.vp-soc__label {
   display: block;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .07em;
   text-transform: uppercase;
   color: var(--vp-soc-muted);
}

/* ---------- threat activity ---------- */
.vp-soc__chart { display: flex; flex-direction: column; }
.vp-soc__head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 12px;
}
.vp-soc__figure {
   display: block;
   margin-top: 2px;
   font-size: 26px;
   font-weight: 700;
   line-height: 1.15;
   color: var(--vp-soc-ink);
}
.vp-soc__figure em {
   margin-left: 7px;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   color: var(--vp-soc-muted);
}
.vp-soc__live {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   flex: 0 0 auto;
   padding: 4px 10px 4px 8px;
   border-radius: 20px;
   background: rgba(210, 96, 19, 0.12);
   color: #d65f0f;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
}
.vp-soc__live i {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--vp-soc-teal);
   animation: vp-soc-blink 1.6s ease-in-out infinite;
}
@keyframes vp-soc-blink {
   0%, 100% { opacity: 1;   transform: scale(1); }
   50%      { opacity: .35; transform: scale(.75); }
}
.vp-soc__graph {
   display: block;
   width: 100%;
   height: 116px;
   margin-top: 10px;
}
.vp-soc__grid line {
   stroke: rgba(39, 26, 25, 0.08);
   stroke-width: 1;
   stroke-dasharray: 3 5;
   vector-effect: non-scaling-stroke;
}
.vp-soc__line {
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   /* the graph is stretched to fit, so keep strokes an even weight */
   vector-effect: non-scaling-stroke;
}
.vp-soc__line--blocked { stroke: var(--vp-soc-indigo); }
.vp-soc__line--watch   { stroke: var(--vp-soc-amber); }
.vp-soc__legend {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-top: 10px;
   font-size: 11px;
   color: var(--vp-soc-muted);
}
.vp-soc__key { display: inline-flex; align-items: center; gap: 6px; }
.vp-soc__key::before {
   content: "";
   width: 8px;
   height: 8px;
   border-radius: 50%;
}
.vp-soc__key--blocked::before { background: var(--vp-soc-indigo); }
.vp-soc__key--watch::before   { background: var(--vp-soc-amber); }
.vp-soc__axis { margin-left: auto; }

/* ---------- posture dial ---------- */
.vp-soc__score {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}
.vp-soc__score .vp-soc__label { align-self: flex-start; }
.vp-soc__dial {
   width: 100%;
   max-width: 104px;
   height: auto;
   margin: 4px 0 2px;
}
.vp-soc__dial-track {
   fill: none;
   stroke: rgba(39, 26, 25, 0.09);
   stroke-width: 9;
}
.vp-soc__dial-value {
   fill: none;
   stroke: var(--vp-soc-teal);
   stroke-width: 9;
   stroke-linecap: round;
   /* r=50 -> circumference 314.16; 94% of it is 295.3 */
   stroke-dasharray: 295.3 314.16;
   transform: rotate(-90deg);
   transform-origin: 60px 60px;
}
.vp-soc__dial-num {
   fill: var(--vp-soc-ink);
   font-size: 34px;
   font-weight: 700;
   text-anchor: middle;
}
.vp-soc__dial-sub {
   fill: var(--vp-soc-muted);
   font-size: 12px;
   font-weight: 500;
   text-anchor: middle;
}
.vp-soc__note {
   font-size: 12px;
   font-weight: 600;
   color: #d65f0f;
}

/* ---------- live feed ---------- */
.vp-soc__feed ul {
   margin: 10px 0 0;
   padding: 0;
   list-style: none;
}
.vp-soc__feed li {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 7px 0;
   border-bottom: 1px solid rgba(39, 26, 25, 0.06);
}
.vp-soc__feed li:last-child { border-bottom: 0; }
.vp-soc__dot {
   flex: 0 0 auto;
   width: 7px;
   height: 7px;
   border-radius: 50%;
}
.is-critical .vp-soc__dot { background: var(--vp-soc-red); }
.is-high     .vp-soc__dot { background: var(--vp-soc-amber); }
.is-ok       .vp-soc__dot { background: var(--vp-soc-teal); }
.vp-soc__feed p {
   flex: 1 1 auto;
   min-width: 0;
   margin: 0;
   font-size: 12.5px;
   line-height: 1.35;
   color: #645351;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
.vp-soc__feed p b { font-weight: 600; color: var(--vp-soc-ink); }
.vp-soc__feed time {
   flex: 0 0 auto;
   font-size: 11px;
   color: var(--vp-soc-muted);
   font-variant-numeric: tabular-nums;
}

/* ---------- global map ---------- */
.vp-soc__side { display: flex; flex-direction: column; }
.vp-soc__globe {
   display: block;
   width: 100%;
   height: auto;
   margin: 6px 0 2px;
}
.vp-soc__globe-wire * {
   fill: none;
   stroke: rgba(227, 48, 35, 0.28);
   stroke-width: 1;
   vector-effect: non-scaling-stroke;
}
.vp-soc__ping-dot { fill: var(--vp-soc-indigo); }
.vp-soc__ping-ring {
   fill: none;
   stroke: var(--vp-soc-indigo);
   stroke-width: 1.5;
   transform-box: fill-box;
   transform-origin: center;
   animation: vp-soc-ping 2.8s ease-out infinite;
   animation-delay: var(--delay, 0s);
}
@keyframes vp-soc-ping {
   0%        { transform: scale(1);   opacity: .8; }
   70%, 100% { transform: scale(4.2); opacity: 0; }
}
.vp-soc__bars {
   margin: 10px 0 0;
   padding: 0;
   list-style: none;
}
.vp-soc__bars li {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   gap: 5px 8px;
   margin-bottom: 12px;
   font-size: 11.5px;
   color: #645351;
}
.vp-soc__bars span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-soc__bars b {
   font-size: 11px;
   font-weight: 600;
   color: var(--vp-soc-ink);
   font-variant-numeric: tabular-nums;
}
.vp-soc__bars i {
   grid-column: 1 / -1;
   height: 4px;
   border-radius: 3px;
   background: rgba(39, 26, 25, 0.08);
   position: relative;
}
.vp-soc__bars i::after {
   content: "";
   position: absolute;
   inset: 0 auto 0 0;
   width: var(--v, 0%);
   border-radius: 3px;
   background: var(--vp-soc-indigo);
}
.vp-soc__chips {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: auto;
   padding-top: 12px;
}
.vp-soc__chips span {
   padding: 4px 9px;
   border-radius: 20px;
   background: rgba(227, 48, 35, 0.09);
   color: #c33d33;
   font-size: 10.5px;
   font-weight: 600;
   letter-spacing: .02em;
}

/* The wrapper's grey was warm (#F3F0F1); cool it to sit on the new hero. */
.tp-hero__thumb-wrapper { background: #F7EEED; }

/* ---------- tighter breakpoints ---------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
   .vp-soc { --vp-soc-gap: 14px; }
   .vp-soc__panel { padding: 13px 14px; }
   .vp-soc__figure { font-size: 22px; }
   .vp-soc__graph { height: 96px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
   .vp-soc { --vp-soc-gap: 12px; }
   .vp-soc__panel { padding: 11px 12px; border-radius: 11px; }
   .vp-soc__label { font-size: 9.5px; letter-spacing: .05em; }
   .vp-soc__figure { font-size: 18px; }
   .vp-soc__figure em { display: none; }
   .vp-soc__graph { height: 74px; }
   .vp-soc__legend { gap: 10px; font-size: 10px; }
   .vp-soc__feed p { font-size: 11px; }
   .vp-soc__bars li { font-size: 10px; margin-bottom: 7px; }
   .vp-soc__chips span { font-size: 9px; padding: 3px 7px; }
}

@media (prefers-reduced-motion: reduce) {
   .vp-soc__live i,
   .vp-soc__ping-ring { animation: none; }
   .vp-soc__ping-ring { opacity: .35; }
}

/* =====================================================================
   Education / Courses  —  courses.php & course-details.php
   ---------------------------------------------------------------------
   Everything here is scoped under .vp-edu so the page can set its own
   vertical rhythm without touching the rest of the site.

   Spacing: the shared .vp-hero carries margin-bottom:100px and .vp-sec
   carries padding:110px, which stacked into ~210px of empty white under
   the hero. Here the hero margin is dropped and the ticker rail is
   pulled up over the hero edge instead, so the join is deliberate.
   ===================================================================== */

.vp-edu {
   --edu-gap: 96px;      /* standard section padding          */
   --edu-gap-sm: 64px;   /* when two sections share a surface */
   --edu-violet: #eb1a3d;
   --edu-cyan: #f3731d;
   --edu-ink: #2A1514;
   --edu-muted: #6f6261;
   --edu-line: #f1eded;
}
.vp-edu .vp-sec { padding: var(--edu-gap) 0; }
.vp-edu .vp-sec--top-tight { padding-top: var(--edu-gap-sm); }
.vp-edu .vp-sec--bot-tight { padding-bottom: var(--edu-gap-sm); }
.vp-edu .vp-heading { margin-bottom: 48px; }
.vp-edu .vp-heading p + p { margin-top: 14px; }
.vp-edu .vp-heading p a { color: #E33023; font-weight: 600; border-bottom: 1px solid rgba(227, 48, 35,0.35); }
.vp-edu .vp-heading p a:hover { color: #eb1a3d; border-bottom-color: rgba(235, 26, 61,0.5); }
/* the CTA block ships with pt-120/pb-120 utilities; bring it into rhythm */
.vp-edu .tp-cta-area { padding-top: var(--edu-gap) !important; padding-bottom: var(--edu-gap) !important; }

/* ---------- Hero theme: violet aurora, ringed spotlight ---------- */
.vp-hero--courses {
   margin-bottom: 0;
   padding-bottom: 168px;   /* room for the ticker rail to overlap */
   background:
      linear-gradient(180deg, rgba(15, 10, 10,0) 74%, rgba(15, 10, 10,0.92) 100%),
      radial-gradient(130% 125% at 82% -18%, #5f2932 0%, #2e1e1d 44%, #0c0808 100%);
}
.vp-hero--courses .vp-hero__grid {
   background:
      radial-gradient(closest-side at 24% 30%, rgba(235, 26, 61,0.36), transparent 68%),
      radial-gradient(closest-side at 78% 22%, rgba(243, 115, 29,0.26), transparent 66%),
      radial-gradient(closest-side at 58% 84%, rgba(246, 103, 92,0.28), transparent 70%);
   animation:
      vp-aurora 22s ease-in-out infinite alternate,
      vp-hue 15s ease-in-out infinite alternate;
}
/* concentric "orbit" rings instead of the stock spotlight blob */
.vp-hero--courses::after {
   top: 50%;
   left: 74%;
   width: 940px;
   height: 940px;
   transform: translate(-50%, -50%);
   background:
      radial-gradient(closest-side, rgba(244, 84, 110,0.16), transparent 74%);
   -webkit-mask-image: repeating-radial-gradient(circle, #000 0 2px, transparent 2px 92px);
   mask-image: repeating-radial-gradient(circle, #000 0 2px, transparent 2px 92px);
   animation: vp-edu-orbit 40s linear infinite;
}
@keyframes vp-edu-orbit {
   from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
   50%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.06); }
   to   { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
.vp-hero--courses .vp-hero__glow--1 { background: #eb1a3d; }
.vp-hero--courses .vp-hero__glow--2 { background: #f3731d; opacity: .3; }
.vp-hero--courses .vp-hero__eyebrow {
   border-color: rgba(244, 84, 110,0.4);
   background: rgba(244, 84, 110,0.1);
   color: #f9dadf;
}
.vp-hero--courses .vp-hero__eyebrow .dot { background: #f4546e; box-shadow: 0 0 0 4px rgba(244, 84, 110,0.25); }
.vp-hero--courses .vp-hero__title .grad {
   background: linear-gradient(90deg, #f9dadf 0%, #f4546e 48%, #f3731d 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
.vp-hero--courses .vp-hero__stat h3 span { color: #f4546e; }

/* ---------- Hero visual: stacked course deck + live cohort chip ---------- */
.vp-deck { position: relative; margin: 46px 0 74px; }
.vp-deck__card {
   position: relative;
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(255,255,255,0.14);
   box-shadow: 0 30px 70px rgba(10, 6, 6,0.6);
   line-height: 0;
   transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.vp-deck__card img { width: 100%; display: block; }
.vp-deck__card--back {
   position: absolute;
   inset: 0 0 auto 0;
   transform: translate(64px, -46px) rotate(5deg) scale(.9);
   opacity: .55;
   filter: saturate(.7);
}
.vp-deck__card--mid {
   position: absolute;
   inset: 0 0 auto 0;
   transform: translate(-66px, 40px) rotate(-6deg) scale(.88);
   opacity: .7;
}
.vp-deck:hover .vp-deck__card--back { transform: translate(80px, -58px) rotate(7deg) scale(.92); }
.vp-deck:hover .vp-deck__card--mid { transform: translate(-82px, 52px) rotate(-8deg) scale(.9); }
.vp-deck__front { position: relative; z-index: 2; }
.vp-deck__badge {
   position: absolute;
   z-index: 4;
   right: -18px;
   bottom: 26px;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 14px 20px;
   border-radius: 16px;
   background: rgba(23, 15, 15,0.86);
   border: 1px solid rgba(255,255,255,0.14);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   box-shadow: 0 22px 46px rgba(0,0,0,0.5);
   animation: vp-edu-bob 6s ease-in-out infinite alternate;
}
@keyframes vp-edu-bob { from { transform: translateY(0); } to { transform: translateY(-12px); } }
.vp-deck__badge-icon {
   width: 42px; height: 42px; border-radius: 12px;
   display: grid; place-items: center;
   background: linear-gradient(135deg, #eb1a3d, #f3731d);
   color: #fff; font-size: 16px;
}
.vp-deck__badge b { display: block; color: #fff; font-size: 14px; line-height: 1.2; }
.vp-deck__badge span { color: #c9949d; font-size: 12px; }

/* ---------- Ticker rail (overlaps the hero, closing the dead gap) ---------- */
.vp-rail {
   position: relative;
   z-index: 4;
   margin-top: -86px;
   border-radius: 20px;
   background: linear-gradient(120deg, #271918 0%, #362321 52%, #1d1313 100%);
   border: 1px solid rgba(255,255,255,0.1);
   box-shadow: 0 34px 70px rgba(18, 11, 10,0.4);
   overflow: hidden;
}
.vp-rail__head {
   display: flex;
   align-items: center;
   gap: 10px;
   flex: 0 0 auto;
   padding: 22px 26px;
   border-right: 1px solid rgba(255,255,255,0.1);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.6px;
   text-transform: uppercase;
   white-space: nowrap;
}
.vp-rail__head i {
   width: 8px; height: 8px; border-radius: 50%;
   background: #f3731d;
   box-shadow: 0 0 0 0 rgba(243, 115, 29,0.6);
   animation: vp-edu-pulse 1.8s ease-out infinite;
}
@keyframes vp-edu-pulse { 0% { box-shadow: 0 0 0 0 rgba(243, 115, 29,0.55); } 100% { box-shadow: 0 0 0 10px rgba(243, 115, 29,0); } }
.vp-rail__inner { display: flex; align-items: stretch; }
.vp-rail__track {
   position: relative;
   flex: 1 1 auto;
   overflow: hidden;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 82%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 4%, #000 82%, transparent);
}
.vp-rail__marquee {
   display: flex;
   align-items: center;
   gap: 44px;
   width: max-content;
   padding: 22px 30px;
   animation: vp-edu-scroll 34s linear infinite;
}
.vp-rail:hover .vp-rail__marquee { animation-play-state: paused; }
@keyframes vp-edu-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.vp-rail__item {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: #e0bdc3;
   font-size: 15px;
   font-weight: 600;
   white-space: nowrap;
}
.vp-rail__item i { color: #f4546e; font-size: 13px; }
.vp-rail__item + .vp-rail__item::before {
   content: "";
   width: 5px; height: 5px; border-radius: 50%;
   background: rgba(255,255,255,0.22);
   margin-right: 34px;
   margin-left: -34px;
}

/* ---------- Section heading with a numeral watermark ---------- */
.vp-edu .vp-heading { position: relative; }
/* A ghost numeral behind the title just read as a smudge, so the section
   index is a crisp marker instead: a ring that carries the number. */
.vp-heading__mark {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 46px;
   height: 46px;
   margin-bottom: 18px;
   border-radius: 50%;
   background: #fff;
   border: 1px solid #f5e2e1;
   color: #c6334b;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: .5px;
   font-variant-numeric: tabular-nums;
}
.vp-heading__mark::after {
   content: "";
   position: absolute;
   inset: -6px;
   border-radius: 50%;
   border: 1px solid #fbeae9;
}
.vp-heading--center .vp-heading__mark { margin-left: auto; margin-right: auto; }
.vp-sec--grey .vp-heading__mark { background: #fffdfd; }

/* ---------- Equal-height card grids ---------- */
.vp-grid > [class*="col-"]:not(.is-hidden) { display: flex; }
.vp-grid > [class*="col-"] > * { width: 100%; }

/* ---------- Filter pills ---------- */
.vp-edu .vp-filter { gap: 10px; margin-bottom: 46px; }
.vp-edu .vp-filter button {
   position: relative;
   overflow: hidden;
   border-radius: 30px;
   transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.vp-edu .vp-filter button::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(120deg, #E33023, #eb1a3d);
   opacity: 0;
   transition: opacity .35s ease;
}
.vp-edu .vp-filter button span { position: relative; z-index: 1; }
.vp-edu .vp-filter button:hover { transform: translateY(-2px); }
.vp-edu .vp-filter button.active { border-color: transparent; color: #fff; background: none; }
.vp-edu .vp-filter button.active::before { opacity: 1; }

/* ---------- Course card ---------- */
.vp-course {
   position: relative;
   display: flex;
   flex-direction: column;
   height: calc(100% - 30px);
   background: #fff;
   border: 1px solid var(--edu-line);
   border-radius: 20px;
   overflow: hidden;
   margin-bottom: 30px;
   transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease, border-color .45s ease;
}
/* category accent, set per card with --acc / --acc2 */
.vp-course { --acc: #E33023; --acc2: #eb1a3d; }
.vp-course--cyan { --acc: #ed650a; --acc2: #f3731d; }
.vp-course--green { --acc: #d85e0d; --acc2: #ea9e6b; }
.vp-course--pink { --acc: #e11d4e; --acc2: #f792a2; }
.vp-course::before {
   content: "";
   position: absolute;
   top: 0; left: 0; right: 0;
   height: 4px;
   z-index: 3;
   background: linear-gradient(90deg, var(--acc), var(--acc2));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .5s cubic-bezier(.2,.8,.3,1);
}
.vp-course:hover { transform: translateY(-10px); border-color: transparent; box-shadow: 0 30px 60px rgba(42, 21, 20,0.14); }
.vp-course:hover::before { transform: scaleX(1); }

.vp-course__media { position: relative; line-height: 0; overflow: hidden; }
.vp-course__media img { width: 100%; height: 208px; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.8,.3,1); }
.vp-course:hover .vp-course__media img { transform: scale(1.07); }
.vp-course__media::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 42%, rgba(15, 10, 10,0.72) 100%);
}
.vp-course__level {
   position: absolute;
   z-index: 2;
   top: 16px; left: 16px;
   display: inline-flex;
   align-items: center;
   gap: 7px;
   padding: 6px 13px;
   border-radius: 30px;
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   line-height: 1;
   color: #fff;
   background: rgba(21, 15, 14,0.66);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   border: 1px solid rgba(255,255,255,0.2);
}
.vp-course__level::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f4546e; }
.vp-course__level--beginner::before { background: #d77330; }
.vp-course__level--intermediate::before { background: #fbbf24; }
.vp-course__level--advanced::before { background: #ff5d6c; }

/* three-segment difficulty meter, bottom-right of the artwork */
.vp-course__meter { position: absolute; z-index: 2; right: 16px; bottom: 14px; display: flex; align-items: flex-end; gap: 4px; }
.vp-course__meter i { width: 5px; border-radius: 3px; background: rgba(255,255,255,0.28); }
.vp-course__meter i:nth-child(1) { height: 9px; }
.vp-course__meter i:nth-child(2) { height: 14px; }
.vp-course__meter i:nth-child(3) { height: 19px; }
.vp-course__meter[data-level="1"] i:nth-child(-n+1),
.vp-course__meter[data-level="2"] i:nth-child(-n+2),
.vp-course__meter[data-level="3"] i:nth-child(-n+3) { background: linear-gradient(180deg, #fff, #f4546e); }

.vp-course__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px 28px 24px; }
.vp-course__cat {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--acc);
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   margin-bottom: 12px;
}
.vp-course__cat::before { content: ""; width: 16px; height: 2px; background: linear-gradient(90deg, var(--acc), var(--acc2)); }
.vp-course__body h4 { font-size: 21px; line-height: 1.32; color: var(--edu-ink); margin: 0 0 12px; }
.vp-course__body h4 a { color: inherit; background-image: linear-gradient(90deg, var(--acc), var(--acc2)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s ease, color .3s ease; }
.vp-course:hover .vp-course__body h4 a { background-size: 100% 2px; }
.vp-course__body p { color: var(--edu-muted); font-size: 14.5px; line-height: 1.72; margin: 0 0 20px; }
.vp-course__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 20px; padding: 0; list-style: none; }
.vp-course__facts li { display: inline-flex; align-items: center; gap: 7px; color: #7e706f; font-size: 13px; }
.vp-course__facts li i { color: var(--acc2); font-size: 12px; }

/* A peek at the syllabus, revealed on hover. It overlays the artwork rather
   than sitting in the card body: inside the body it grew the card, and because
   the grid is equal-height that pushed every other card in the row down. As an
   absolutely-positioned overlay it is out of flow, so cards never move. */
.vp-course__peek {
   position: absolute;
   z-index: 3;
   right: 0;
   bottom: 0;
   left: 0;
   padding: 34px 22px 22px;
   background: linear-gradient(180deg, rgba(15, 10, 10,0) 0%, rgba(15, 10, 10,0.7) 30%, rgba(15, 10, 10,0.93) 64%, rgba(15, 10, 10,0.97) 100%);
   transform: translateY(100%);
   opacity: 0;
   transition: transform .45s cubic-bezier(.2,.8,.3,1), opacity .3s ease;
}
.vp-course:hover .vp-course__peek { transform: translateY(0); opacity: 1; }
.vp-course__peek span {
   display: block;
   color: rgba(255,255,255,0.62);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.3px;
   text-transform: uppercase;
   margin-bottom: 14px;
}
/* The tool chips are the point of the panel, so they get room to breathe.
   Four names rarely fit one row at every card width; the panel is an
   absolute overlay, so letting them wrap costs the card nothing. */
.vp-course__peek ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.vp-course__peek li {
   padding: 7px 14px;
   border-radius: 20px;
   background: rgba(255,255,255,0.14);
   border: 1px solid rgba(255,255,255,0.22);
   color: #fff;
   font-size: 12px;
   line-height: 1.35;
   font-weight: 500;
   white-space: nowrap;
}
/* the meter lives in the same corner the panel slides over */
.vp-course__meter { transition: opacity .3s ease; }
.vp-course:hover .vp-course__meter { opacity: 0; }

.vp-course__foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-top: auto;
   padding-top: 18px;
   border-top: 1px solid #f5f1f1;
}
.vp-course__price { color: var(--edu-ink); font-size: 23px; font-weight: 700; line-height: 1; }
.vp-course__price small { display: block; color: #988b8a; font-size: 11.5px; font-weight: 500; margin-top: 5px; }
.vp-course__price .free { color: #d85e0d; }
.vp-course__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* The card sells a seat, so the card carries the buying action. The
   arrow beside it still goes to the full description. */
.vp-course__enrol {
   display: inline-flex; align-items: center; justify-content: center;
   height: 44px; padding: 0 18px;
   border-radius: 999px; border: 0;
   background: linear-gradient(120deg, var(--acc), var(--acc2));
   color: #fff; font-size: 14px; font-weight: 600; line-height: 1;
   white-space: nowrap; text-decoration: none;
   transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}
.vp-course__enrol:hover,
.vp-course__enrol:focus-visible {
   color: #fff; filter: brightness(1.06);
   box-shadow: 0 12px 26px rgba(227, 48, 35, .35);
}
.vp-course__enrol:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.vp-course__link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   flex: 0 0 auto;
   width: 44px; height: 44px;
   border-radius: 50%;
   border: 1px solid var(--edu-line);
   color: var(--acc);
   font-size: 14px;
   transition: all .4s cubic-bezier(.2,.8,.3,1);
}
.vp-course:hover .vp-course__link {
   border-color: transparent;
   color: #fff;
   background: linear-gradient(120deg, var(--acc), var(--acc2));
   box-shadow: 0 12px 26px rgba(227, 48, 35,0.35);
}

/* ---------- Learning paths: a roadmap, not three loose cards ---------- */
.vp-roadmap { position: relative; }
.vp-roadmap::before {
   content: "";
   position: absolute;
   top: 46px;
   left: 8%;
   right: 8%;
   height: 2px;
   background: linear-gradient(90deg, transparent, #efc1be 12%, #efc1be 88%, transparent);
}
.vp-path { position: relative; padding-top: 108px; margin-bottom: 30px; height: calc(100% - 30px); }
.vp-path__node {
   position: absolute;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
   width: 54px; height: 54px;
   border-radius: 50%;
   display: grid; place-items: center;
   font-size: 19px;
   color: #fff;
   background: linear-gradient(135deg, #E33023, #eb1a3d);
   box-shadow: 0 0 0 8px #fbf6f6, 0 12px 26px rgba(227, 48, 35,0.35);
   transition: transform .4s ease;
}
.vp-path--2 .vp-path__node { background: linear-gradient(135deg, #ed650a, #f3731d); box-shadow: 0 0 0 8px #fbf6f6, 0 12px 26px rgba(237, 101, 10,0.32); }
.vp-path--3 .vp-path__node { background: linear-gradient(135deg, #d85e0d, #ea9e6b); box-shadow: 0 0 0 8px #fbf6f6, 0 12px 26px rgba(216, 94, 13,0.3); }
.vp-path:hover .vp-path__node { transform: translateX(-50%) scale(1.1); }
.vp-path__card {
   height: 100%;
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 1px solid var(--edu-line);
   border-radius: 20px;
   padding: 44px 30px 30px;
   text-align: center;
   transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease;
}
.vp-path:hover .vp-path__card { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(42, 21, 20,0.11); }
.vp-path__card h4 { font-size: 21px; color: var(--edu-ink); margin: 0 0 10px; }
.vp-path__card > p { color: var(--edu-muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 22px; }
.vp-path__steps { list-style: none; margin: 0 0 22px; padding: 0; text-align: left; }
.vp-path__steps li {
   position: relative;
   padding: 9px 0 9px 34px;
   color: #504746;
   font-size: 14.5px;
}
.vp-path__steps li::before {
   counter-increment: none;
   content: attr(data-n);
   position: absolute;
   left: 0; top: 8px;
   width: 22px; height: 22px;
   border-radius: 50%;
   display: grid; place-items: center;
   background: rgba(235, 26, 61,0.12);
   color: #c82d47;
   font-size: 11px;
   font-weight: 700;
}
.vp-path--2 .vp-path__steps li::before { background: rgba(237, 101, 10,0.12); color: #bf160a; }
.vp-path--3 .vp-path__steps li::before { background: rgba(216, 94, 13,0.13); color: #dc5e09; }
/* connector between the numbered step bullets */
.vp-path__steps li:not(:last-child)::after {
   content: "";
   position: absolute;
   left: 10.5px; top: 30px; bottom: -2px;
   width: 1px;
   background: #eee8e8;
}
.vp-path__meta { display: flex; justify-content: center; gap: 26px; margin-top: auto; padding-top: 18px; border-top: 1px solid #f5f1f1; }
.vp-path__meta div b { display: block; color: var(--edu-ink); font-size: 18px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.vp-path__meta div span { color: #988b8a; font-size: 12.5px; }

/* ---------- "How it works": a spine with alternating stops ---------- */
.vp-flow { position: relative; padding-left: 0; }
.vp-flow::before {
   content: "";
   position: absolute;
   left: 27px;
   top: 12px;
   bottom: 12px;
   width: 2px;
   background: linear-gradient(180deg, #eb1a3d, #E33023 40%, #f3731d);
   opacity: .35;
}
.vp-flow__item { position: relative; display: flex; gap: 26px; padding-bottom: 34px; }
.vp-flow__item:last-child { padding-bottom: 0; }
.vp-flow__num {
   position: relative;
   z-index: 1;
   flex: 0 0 auto;
   width: 56px; height: 56px;
   border-radius: 18px;
   display: grid; place-items: center;
   background: #fff;
   border: 2px solid #fbeae9;
   color: #E33023;
   font-size: 16px;
   font-weight: 700;
   transition: all .4s cubic-bezier(.2,.8,.3,1);
}
.vp-flow__item:hover .vp-flow__num {
   border-color: transparent;
   color: #fff;
   background: linear-gradient(135deg, #E33023, #eb1a3d);
   transform: rotate(-6deg) scale(1.06);
   box-shadow: 0 14px 30px rgba(227, 48, 35,0.35);
}
.vp-flow__body { padding-top: 5px; }
.vp-flow__body h5 { font-size: 19px; color: var(--edu-ink); margin: 0 0 8px; }
.vp-flow__body p { color: var(--edu-muted); font-size: 15px; line-height: 1.72; margin: 0; }

/* ---------- Lab preview terminal ---------- */
.vp-lab {
   position: relative;
   border-radius: 22px;
   overflow: hidden;
   background: linear-gradient(150deg, #271918 0%, #1b1111 55%, #0c0808 100%);
   border: 1px solid rgba(255,255,255,0.1);
   box-shadow: 0 34px 70px rgba(13, 8, 8,0.35);
}
.vp-lab__bar {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 15px 20px;
   border-bottom: 1px solid rgba(255,255,255,0.08);
   background: rgba(255,255,255,0.03);
}
.vp-lab__bar i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.vp-lab__bar i:nth-child(1) { background: #ff5d6c; }
.vp-lab__bar i:nth-child(2) { background: #fbbf24; }
.vp-lab__bar i:nth-child(3) { background: #d77330; }
.vp-lab__bar span { margin-left: 10px; color: #9c8483; font-size: 12.5px; font-family: monospace; }
.vp-lab__body {
   padding: 24px 26px 28px;
   font-family: monospace;
   font-size: 13.5px;
   line-height: 2;
   color: #c4a9ad;
   overflow-x: auto;
}
.vp-lab__body p { margin: 0; white-space: nowrap; }
.vp-lab__body .cmd { color: #f3731d; }
.vp-lab__body .ok { color: #d77330; }
.vp-lab__body .warn { color: #fbbf24; }
.vp-lab__body .bad { color: #ff5d6c; }
.vp-lab__body .dim { color: #86706f; }
.vp-lab__caret { display: inline-block; width: 9px; height: 16px; background: #d77330; vertical-align: -3px; animation: vp-edu-caret 1.1s steps(2) infinite; }
@keyframes vp-edu-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.vp-lab-list { list-style: none; margin: 0; padding: 0; }
.vp-lab-list li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid #f5f1f1; }
.vp-lab-list li:last-child { border-bottom: 0; }
.vp-lab-list li i {
   flex: 0 0 auto;
   width: 38px; height: 38px;
   border-radius: 12px;
   display: grid; place-items: center;
   background: rgba(235, 26, 61,0.11);
   color: #c82d47;
   font-size: 14px;
}
.vp-lab-list li b { display: block; color: var(--edu-ink); font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.vp-lab-list li span { color: var(--edu-muted); font-size: 14px; line-height: 1.6; }

/* ---------- Instructors ---------- */
.vp-tutor {
   position: relative;
   height: calc(100% - 30px);
   background: #fff;
   border: 1px solid var(--edu-line);
   border-radius: 20px;
   padding: 30px 28px 26px;
   margin-bottom: 30px;
   overflow: hidden;
   transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.vp-tutor { --acc: #E33023; --acc2: #eb1a3d; }
.vp-tutor--2 { --acc: #ed650a; --acc2: #f3731d; }
.vp-tutor--3 { --acc: #d85e0d; --acc2: #ea9e6b; }
.vp-tutor::after {
   content: "";
   position: absolute;
   top: -70px; right: -70px;
   width: 170px; height: 170px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--acc), var(--acc2));
   opacity: .07;
   transition: transform .6s cubic-bezier(.2,.8,.3,1), opacity .5s ease;
}
.vp-tutor:hover { transform: translateY(-8px); border-color: transparent; box-shadow: 0 28px 56px rgba(42, 21, 20,0.11); }
.vp-tutor:hover::after { transform: scale(1.5); opacity: .12; }
.vp-tutor__top { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.vp-tutor__avatar {
   flex: 0 0 auto;
   width: 66px; height: 66px;
   border-radius: 20px;
   display: grid; place-items: center;
   font-size: 21px; font-weight: 700; color: #fff;
   background: linear-gradient(135deg, var(--acc), var(--acc2));
   transition: border-radius .5s ease;
}
.vp-tutor:hover .vp-tutor__avatar { border-radius: 50%; }
.vp-tutor h5 { font-size: 19px; color: var(--edu-ink); margin: 0 0 3px; }
.vp-tutor__role { display: block; color: var(--acc); font-size: 13px; font-weight: 600; }
.vp-tutor > p { position: relative; z-index: 1; color: var(--edu-muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 20px; }
.vp-tutor__stats { position: relative; z-index: 1; display: flex; gap: 24px; padding-top: 17px; border-top: 1px solid #f5f1f1; }
.vp-tutor__stats div b { display: block; color: var(--edu-ink); font-size: 17px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.vp-tutor__stats div span { color: #988b8a; font-size: 12.5px; }

/* ---------- Certification marquee ---------- */
.vp-certs {
   position: relative;
   /* The track scrolls to -50%, so one set must be at least as wide as the
      visible area or a gap opens behind it. Capping the width guarantees it. */
   max-width: 1296px;
   margin: 0 auto;
   /* the rows are width:max-content — without this they widen the whole page */
   overflow: hidden;
   -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
   mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.vp-certs__row { display: flex; gap: 14px; width: max-content; padding: 7px 0; animation: vp-edu-scroll 32s linear infinite; }
.vp-certs__row--rev { animation-duration: 40s; animation-direction: reverse; }
.vp-certs:hover .vp-certs__row { animation-play-state: paused; }
.vp-cert {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   flex: 0 0 auto;
   padding: 13px 24px;
   border-radius: 30px;
   border: 1px solid #eee8e8;
   background: #fff;
   color: #504746;
   font-weight: 600;
   font-size: 15px;
   white-space: nowrap;
   transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vp-cert:hover { transform: translateY(-3px); border-color: #f2c2ca; box-shadow: 0 14px 30px rgba(42, 21, 20,0.08); }
.vp-cert i { color: var(--edu-violet); }

/* ---------- FAQ ---------- */
.vp-faq { border: 1px solid var(--edu-line); border-radius: 18px; overflow: hidden; background: #fff; }
.vp-faq__item + .vp-faq__item { border-top: 1px solid #f5f1f1; }
.vp-faq__head {
   display: flex;
   align-items: center;
   gap: 16px;
   width: 100%;
   text-align: left;
   padding: 22px 26px;
   background: none;
   border: 0;
   cursor: pointer;
   color: var(--edu-ink);
   font-size: 17px;
   font-weight: 600;
   transition: background .3s ease;
}
.vp-faq__head:hover { background: #fefbfb; }
.vp-faq__head span { flex: 1 1 auto; }
.vp-faq__head i { flex: 0 0 auto; color: #988b8a; font-size: 14px; transition: transform .35s ease, color .35s ease; }
.vp-faq__item.active .vp-faq__head { color: #E33023; }
.vp-faq__item.active .vp-faq__head i { transform: rotate(180deg); color: #E33023; }
.vp-faq__body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.vp-faq__item.active .vp-faq__body { max-height: 260px; }
.vp-faq__body p { margin: 0; padding: 0 26px 24px; color: var(--edu-muted); font-size: 15px; line-height: 1.75; }

/* =====================================================================
   Course detail page
   ===================================================================== */

/* ---------- Meta bar: rides up over the hero edge, like the listing rail ---------- */
.vp-metabar {
   position: relative;
   z-index: 4;
   margin-top: -70px;
   padding: 0;
}
.vp-metabar .vp-meta {
   background: rgba(255,255,255,0.96);
   -webkit-backdrop-filter: blur(10px);
   backdrop-filter: blur(10px);
   border-color: rgba(255,255,255,0.6);
   box-shadow: 0 22px 46px rgba(15, 9, 8,0.22);
   transition: transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.vp-metabar .vp-meta:hover { transform: translateY(-4px); box-shadow: 0 28px 56px rgba(15, 9, 8,0.26); }

/* ---------- Curriculum accordion ---------- */
.vp-curric { border: 1px solid var(--edu-line); border-radius: 18px; overflow: hidden; background: #fff; }
.vp-curric__item + .vp-curric__item { border-top: 1px solid #f5f1f1; }
.vp-curric__head {
   display: flex;
   align-items: center;
   gap: 16px;
   width: 100%;
   text-align: left;
   padding: 20px 26px;
   background: none;
   border: 0;
   cursor: pointer;
   transition: background .3s ease;
}
.vp-curric__head:hover { background: #fefbfb; }
.vp-curric__num {
   flex: 0 0 auto;
   width: 42px; height: 42px;
   border-radius: 13px;
   display: grid; place-items: center;
   background: rgba(227, 48, 35,0.09);
   color: #E33023;
   font-size: 14px; font-weight: 700;
   transition: all .4s cubic-bezier(.2,.8,.3,1);
}
.vp-curric__item.active .vp-curric__num { background: linear-gradient(135deg, #E33023, #eb1a3d); color: #fff; box-shadow: 0 10px 22px rgba(227, 48, 35,0.32); }
.vp-curric__title { flex: 1 1 auto; min-width: 0; }
.vp-curric__title b { display: block; color: var(--edu-ink); font-size: 17px; font-weight: 600; }
.vp-curric__title span { color: #988b8a; font-size: 13px; }
.vp-curric__head > i { flex: 0 0 auto; color: #988b8a; font-size: 14px; transition: transform .35s ease, color .35s ease; }
.vp-curric__item.active .vp-curric__head > i { transform: rotate(180deg); color: #E33023; }
.vp-curric__body { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.vp-curric__item.active .vp-curric__body { max-height: 700px; }
/* What the module is for, before the lesson list says what is in it. */
.vp-curric__blurb {
   margin: 0;
   padding: 2px 26px 14px 84px;
   color: #6f6362;
   font-size: 14.5px;
   line-height: 1.75;
}
.vp-curric__body ul { list-style: none; margin: 0; padding: 0 26px 22px 84px; }
.vp-curric__body li { display: flex; align-items: center; gap: 12px; color: #665b5a; font-size: 14.5px; padding: 8px 0; }
.vp-curric__body li i { color: var(--edu-violet); font-size: 13px; }
.vp-curric__body li span { margin-left: auto; color: #a59897; font-size: 13px; }

/* ---------- Enrol card ---------- */
.vp-enrol {
   position: sticky;
   top: 110px;
   background: #fff;
   border: 1px solid var(--edu-line);
   border-radius: 22px;
   padding: 30px 28px;
   box-shadow: 0 24px 56px rgba(42, 21, 20,0.08);
}
.vp-enrol__price { color: var(--edu-ink); font-size: 40px; font-weight: 800; line-height: 1; margin: 0 0 6px; }
.vp-enrol__price span { font-size: 16px; font-weight: 500; color: #988b8a; }
.vp-enrol__note { color: var(--edu-muted); font-size: 14px; margin: 0 0 22px; }
.vp-enrol__list { list-style: none; margin: 0 0 24px; padding: 0; }
.vp-enrol__list li { display: flex; align-items: center; gap: 12px; color: #504746; font-size: 14.5px; padding: 9px 0; border-bottom: 1px solid #f8f5f5; }
.vp-enrol__list li:last-child { border-bottom: 0; }
.vp-enrol__list li i { color: #E33023; font-size: 14px; width: 18px; }
.vp-enrol__list li b { margin-left: auto; color: var(--edu-ink); font-weight: 600; }
.vp-enrol__btn {
   display: block;
   width: 100%;
   text-align: center;
   padding: 15px 20px;
   border-radius: 30px;
   font-weight: 600;
   color: #fff;
   background: linear-gradient(90deg, #E33023, #eb1a3d);
   transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
}
.vp-enrol__btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 36px rgba(227, 48, 35,0.45); }
.vp-enrol__btn--ghost { margin-top: 12px; background: #fbf4f4; color: var(--edu-ink); }
.vp-enrol__btn--ghost:hover { color: #E33023; box-shadow: 0 14px 30px rgba(42, 21, 20,0.1); }
.vp-enrol__seats { display: flex; align-items: center; gap: 9px; margin-top: 18px; color: #988b8a; font-size: 13px; }
.vp-enrol__seats i { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 0 rgba(251,191,36,0.6); animation: vp-edu-pulse 2s ease-out infinite; }

/* detail-page tutor card sits alone, so let it hug its content */
.vp-tutor--inline { height: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
   .vp-metabar { margin-top: -50px; }
}
@media (max-width: 1199px) {
   .vp-deck__badge { right: 0; }
}
@media (max-width: 991px) {
   .vp-edu { --edu-gap: 72px; --edu-gap-sm: 48px; }
   .vp-hero--courses { padding-bottom: 150px; }
   .vp-rail__inner { flex-direction: column; }
   .vp-rail__head { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 16px; }
   .vp-roadmap::before { display: none; }
   .vp-deck { max-width: 460px; margin: 40px auto 0; }
   .vp-enrol { position: static; margin-bottom: 40px; }
}
@media (max-width: 767px) {
   .vp-edu { --edu-gap: 60px; --edu-gap-sm: 40px; }
   .vp-hero--courses { padding-bottom: 130px; }
   .vp-rail { margin-top: -64px; }
   .vp-course__body { padding: 24px 22px; }
   .vp-course__peek { display: none; }
   .vp-curric__head { padding: 18px; gap: 12px; }
   .vp-curric__body ul { padding: 0 18px 20px 18px; }
   .vp-curric__blurb { padding: 2px 18px 12px 18px; font-size: 14px; }
   .vp-curric__item.active .vp-curric__body { max-height: 900px; }
   .vp-faq__head { padding: 18px; font-size: 16px; }
   .vp-faq__body p { padding: 0 18px 20px; }
   .vp-flow__item { gap: 18px; }
   .vp-flow::before { left: 23px; }
   .vp-flow__num { width: 48px; height: 48px; border-radius: 15px; }
   .vp-lab__body { font-size: 12px; }
   .vp-heading__mark { width: 40px; height: 40px; font-size: 13px; margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
   .vp-rail__marquee,
   .vp-certs__row,
   .vp-deck__badge,
   .vp-lab__caret,
   .vp-hero--courses::after { animation: none; }
}


/* =====================================================================
   Mobile polish — small-screen behaviour for the template's shared parts
   ===================================================================== */

/* ---------- Text never inflates or breaks out of its box ---------- */
html { -webkit-text-size-adjust: 100%; }
@media (max-width: 767px) {
   p, li, td, dd, blockquote,
   h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
   /* emails and URLs are the usual culprits */
   a[href^="mailto:"], a[href^="tel:"] { word-break: break-word; }
}

/* ---------- Spacing utilities become responsive ----------
   The template's pt-/pb-/mt-/mb- helpers are fixed pixel values, so a
   section written as `pb-200` keeps 200px of dead space on a 375px
   screen — that is where the long empty gaps between sections come from.
   Cap them by tier instead of editing every section. */
@media (max-width: 991px) {
   .pt-100, .pt-105, .pt-110, .pt-115, .pt-120, .pt-125, .pt-130, .pt-135, .pt-140, .pt-145 { padding-top: 75px; }
   .pb-100, .pb-105, .pb-110, .pb-115, .pb-120, .pb-125, .pb-130, .pb-135, .pb-140, .pb-145 { padding-bottom: 75px; }
   .mt-100, .mt-105, .mt-110, .mt-115, .mt-120, .mt-125, .mt-130, .mt-135, .mt-140, .mt-145 { margin-top: 75px; }
   .mb-100, .mb-105, .mb-110, .mb-115, .mb-120, .mb-125, .mb-130, .mb-135, .mb-140, .mb-145 { margin-bottom: 75px; }
   .pt-150, .pt-155, .pt-160, .pt-165, .pt-170, .pt-175, .pt-180, .pt-185, .pt-190, .pt-195, .pt-200 { padding-top: 90px; }
   .pb-150, .pb-155, .pb-160, .pb-165, .pb-170, .pb-175, .pb-180, .pb-185, .pb-190, .pb-195, .pb-200 { padding-bottom: 90px; }
   .mt-150, .mt-155, .mt-160, .mt-165, .mt-170, .mt-175, .mt-180, .mt-185, .mt-190, .mt-195, .mt-200 { margin-top: 90px; }
   .mb-150, .mb-155, .mb-160, .mb-165, .mb-170, .mb-175, .mb-180, .mb-185, .mb-190, .mb-195, .mb-200 { margin-bottom: 90px; }
}
@media (max-width: 767px) {
   .pt-100, .pt-105, .pt-110, .pt-115, .pt-120, .pt-125, .pt-130, .pt-135, .pt-140, .pt-145 { padding-top: 58px; }
   .pb-100, .pb-105, .pb-110, .pb-115, .pb-120, .pb-125, .pb-130, .pb-135, .pb-140, .pb-145 { padding-bottom: 58px; }
   .mt-100, .mt-105, .mt-110, .mt-115, .mt-120, .mt-125, .mt-130, .mt-135, .mt-140, .mt-145 { margin-top: 58px; }
   .mb-100, .mb-105, .mb-110, .mb-115, .mb-120, .mb-125, .mb-130, .mb-135, .mb-140, .mb-145 { margin-bottom: 58px; }
   .pt-150, .pt-155, .pt-160, .pt-165, .pt-170, .pt-175, .pt-180, .pt-185, .pt-190, .pt-195, .pt-200 { padding-top: 70px; }
   .pb-150, .pb-155, .pb-160, .pb-165, .pb-170, .pb-175, .pb-180, .pb-185, .pb-190, .pb-195, .pb-200 { padding-bottom: 70px; }
   .mt-150, .mt-155, .mt-160, .mt-165, .mt-170, .mt-175, .mt-180, .mt-185, .mt-190, .mt-195, .mt-200 { margin-top: 70px; }
   .mb-150, .mb-155, .mb-160, .mb-165, .mb-170, .mb-175, .mb-180, .mb-185, .mb-190, .mb-195, .mb-200 { margin-bottom: 70px; }
}

/* Same problem, but baked into component classes rather than utilities. */
@media (max-width: 991px) {
   .tp-feature__pt-pb { padding-top: 70px; padding-bottom: 90px; }
   .tp-about__pt-pb { padding-top: 40px; padding-bottom: 80px; }
   .tp-project__area { padding-bottom: 90px; }
   .tp-price__pl-pr { padding-top: 80px; padding-bottom: 70px; }
}
@media (max-width: 767px) {
   .tp-feature__pt-pb { padding-top: 56px; padding-bottom: 70px; }
   .tp-about__pt-pb { padding-top: 32px; padding-bottom: 60px; }
   .tp-project__area { padding-bottom: 70px; }
   .tp-price__pl-pr { padding-top: 60px; padding-bottom: 56px; }
}

/* ---------- Headings scale with the screen instead of stepping ---------- */
@media (max-width: 767px) {
   .tp-hero__hero-title { font-size: clamp(30px, 9vw, 42px); line-height: 1.14; }
   .tp-section-title { font-size: clamp(26px, 7.6vw, 34px); line-height: 1.2; }
   .tp-section-title-sm { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.25; }
   .tp-cta-content .tp-section-title { font-size: clamp(25px, 7.2vw, 32px); }
}

/* ---------- Back-to-top sits in the corner, not over the content ---------- */
@media (max-width: 767px) {
   .scroll-top {
      width: 44px; height: 44px; line-height: 44px;
      right: 16px;
      font-size: 14px;
      border-radius: 14px;
   }
   .scroll-top.open { bottom: 18px; }
}

/* ---------- Ranking cards: an even 2-up grid, not staggered inline-blocks ----------
   inline-block plus a fixed 140px width leaves a ragged column of dead space
   on the right and baseline-staggers the cards against each other. */
@media (max-width: 767px) {
   .tp-rank__rank-card {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
   }
   .tp-rank__item {
      width: auto;
      max-width: none;
      margin: 0;
      padding: 44px 12px 26px;
      transform: none;
   }
   .tp-rank__item:nth-child(2),
   .tp-rank__item:nth-child(3) { transform: none; }
   .tp-rank__bg-shape { display: none; }
}
@media (max-width: 400px) {
   .tp-rank__item { padding: 38px 10px 22px; }
}

/* ---------- Comfortable tap targets ---------- */
@media (max-width: 767px) {
   .tp-btn, .tp-btn-inner, .tp-btn-white, .tp-btn-border,
   .vp-filter button, .vp-faq__head, .vp-curric__head { min-height: 44px; }
   .vp-filter button { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- Section rhythm on phones ---------- */
@media (max-width: 767px) {
   .vp-hero { padding: 122px 0 60px; margin-bottom: 0; }
   .vp-hero--center { padding: 122px 0 64px; }
   .vp-hero.vp-hero--metabar { padding-bottom: 104px; }
   .vp-hero--courses { padding-bottom: 118px; }   /* the ticker rail still rides up over it */
   .vp-hero--full { min-height: auto; padding-top: 122px; padding-bottom: 64px; }
   .tp-sales-space { padding-top: 70px; padding-bottom: 80px; }
   .vp-path { padding-top: 92px; }                /* node is 54px tall at top:20 */
   .vp-sec { padding: 64px 0; }
}

/* ---------- Off-canvas menu sizes with the screen ---------- */
@media (max-width: 575px) {
   .tpoffcanvas { width: min(86vw, 340px); padding: 36px 26px; }
   .tpoffcanvas { overscroll-behavior: contain; }
}

/* ---------- Footer and menu links get a real tap target ---------- */
@media (max-width: 767px) {
   .tp-footer__widget ul li a,
   .tp-footer__contact-info ul li a { display: inline-block; padding: 7px 0; }
   .tpoffcanvas .mean-nav > ul > li > a { padding-top: 12px; padding-bottom: 12px; }
}

/* ---------- Main nav fits its column at every desktop width ----------

   The template shipped with fewer top-level links. At six items the row
   needs about 700px, while the menu sits in a 7/12 column of a container
   that caps at 1200px — so it can never be wider than ~683px, at 1440 as
   much as at 1280. "Project" drops to a second line and the header
   doubles in height.

   It looked intermittent because it depends on the webfont: with the
   fallback face the items are narrow enough to fit, so the row collapses
   only once the real font finishes loading.

   An earlier attempt trimmed the gaps between 1200 and 1399 only, and
   not by enough. These two rules cover every width at which the menu is
   shown and leave roughly 60px of slack, so a seventh item would still
   fit before anything wraps. */
/* The theme pads these links through several selectors of increasing
   weight, the heaviest being a two-class one
   (.header-bottom__main-menu-4.header-bottom__main-menu-inner). Both
   headers wrap their bar in #header-sticky, so anchoring on that id wins
   outright and the rules below stay readable — no !important, and no
   guessing which of the theme's five selectors applies on which page. */
/* The seven items fit the column by only a dozen pixels at 1024, so any
   subpixel or font-load drift dropped "Insights" to a second line. nowrap
   keeps the bar on one line regardless. */
#header-sticky .header-bottom__main-menu nav > ul { white-space: nowrap; }

/* xl holds a 1140px container against the same seven items xxl fits into
   1320px, so it gets a little less air than the band above it. */
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
   #header-sticky .header-bottom__main-menu nav > ul > li { margin: 0 6px; }
   #header-sticky .header-bottom__main-menu nav > ul > li > a {
      padding-left: 10px; padding-right: 10px;
   }
}

@media only screen and (min-width: 1400px) {
   #header-sticky .header-bottom__main-menu nav > ul > li { margin: 0 8px; }
   #header-sticky .header-bottom__main-menu nav > ul > li > a {
      padding-left: 13px; padding-right: 13px;
   }
}

/* Below 1200 the column is narrower still — 543px at a 1024px viewport —
   so the spacing tightens again rather than wrapping. */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
   #header-sticky .header-bottom__main-menu nav > ul > li { margin: 0 3px; }
   #header-sticky .header-bottom__main-menu nav > ul > li > a {
      padding-left: 4px; padding-right: 4px;
   }
}

/* =====================================================================
   Projects page — impact strip, featured spotlight, process, industries
   ===================================================================== */

/* ---------- Impact strip: it sits inside the hero markup, so it rides the
   hero's own gradient rather than opening a white band under it. Transparent
   rather than a matched dark, because any flat colour shows a seam against
   the gradient. z-index 2 keeps it level with the hero content, above the
   vignette that would otherwise dim the outer two figures. ---------- */
.vp-impact { position: relative; z-index: 2; background: transparent; padding: 78px 0 56px; }
.vp-impact__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; text-align: center; }
.vp-impact__item { position: relative; }
.vp-impact__item + .vp-impact__item::before {
   content: "";
   position: absolute;
   left: -13px; top: 6px; bottom: 6px;
   width: 1px;
   background: rgba(255,255,255,0.10);
}
.vp-impact__item b { display: block; color: #fff; font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 1; margin-bottom: 8px; }
.vp-impact__item b span { color: #fbbf24; }
.vp-impact__item > span { color: #ac9190; font-size: 14px; }

/* ---------- Featured case-study spotlight ---------- */
.vp-spot {
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   border-radius: 24px;
   overflow: hidden;
   background: linear-gradient(150deg, #2b1c1b 0%, #1b1211 55%, #0d0808 100%);
   border: 1px solid rgba(255,255,255,0.08);
   box-shadow: 0 34px 70px rgba(18, 11, 10,0.28);
}
.vp-spot__media { position: relative; overflow: hidden; }
.vp-spot__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; transition: transform .7s ease; }
.vp-spot:hover .vp-spot__media img { transform: scale(1.05); }
.vp-spot__badge {
   position: absolute;
   left: 24px; top: 24px;
   display: inline-flex; align-items: center; gap: 8px;
   padding: 9px 16px;
   border-radius: 30px;
   background: rgba(20, 13, 13,0.6);
   -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
   border: 1px solid rgba(255,255,255,0.12);
   color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.vp-spot__badge i { width: 7px; height: 7px; border-radius: 50%; background: #f6675c; }
.vp-spot__body { padding: 46px 46px 48px; }
.vp-spot__tag { color: #e97c33; font-size: 12.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.vp-spot__body h3 { color: #fff; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 12px 0 14px; }
.vp-spot__body > p { color: #bba4a2; font-size: 16px; line-height: 1.75; margin: 0 0 26px; }
.vp-spot__stats {
   display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
   padding: 22px 0;
   border-top: 1px solid rgba(255,255,255,0.1);
   border-bottom: 1px solid rgba(255,255,255,0.1);
   margin-bottom: 26px;
}
.vp-spot__stat b { display: block; color: #fff; font-size: 26px; font-weight: 800; line-height: 1; margin-bottom: 5px; }
.vp-spot__stat b span { color: #e97c33; }
.vp-spot__stat > span { color: #ac9190; font-size: 13px; }
.vp-spot blockquote { margin: 0 0 26px; padding: 0 0 0 18px; border-left: 3px solid #E33023; }
.vp-spot blockquote p { color: #edd8d6; font-size: 16px; line-height: 1.7; font-style: italic; margin: 0 0 8px; }
.vp-spot blockquote cite { color: #f6675c; font-size: 13px; font-style: normal; font-weight: 600; letter-spacing: .4px; }
.vp-spot__link { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; }
.vp-spot__link i { transition: transform .3s ease; }
.vp-spot__link:hover { color: #e97c33; }
.vp-spot__link:hover i { transform: translateX(4px); }

/* ---------- Engagement process ---------- */
.vp-proc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.vp-proc {
   position: relative;
   background: #fff;
   border: 1px solid #f2e8e7;
   border-radius: 20px;
   padding: 30px 26px 28px;
   transition: transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.vp-proc:hover { transform: translateY(-6px); border-color: #f6d3cf; box-shadow: 0 24px 50px rgba(42, 21, 20,0.1); }
.vp-proc__num {
   display: grid; place-items: center;
   width: 52px; height: 52px;
   border-radius: 17px;
   margin-bottom: 20px;
   background: rgba(227, 48, 35,0.09);
   color: #E33023;
   font-size: 15px; font-weight: 700;
   transition: all .4s cubic-bezier(.2,.8,.3,1);
}
.vp-proc:hover .vp-proc__num { background: linear-gradient(135deg, #E33023, #eb1a3d); color: #fff; box-shadow: 0 12px 26px rgba(227, 48, 35,0.32); }
.vp-proc h5 { color: #2A1514; font-size: 19px; margin: 0 0 9px; }
.vp-proc p { color: #6f6261; font-size: 14.5px; line-height: 1.7; margin: 0; }

/* ---------- Industries we secure ---------- */
.vp-inds { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.vp-ind {
   display: inline-flex; align-items: center; gap: 10px;
   padding: 13px 22px;
   border-radius: 30px;
   border: 1px solid #eee8e8;
   background: #fff;
   color: #504746;
   font-weight: 600;
   font-size: 15px;
   transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vp-ind:hover { transform: translateY(-3px); border-color: #f2c2ca; box-shadow: 0 14px 30px rgba(42, 21, 20,0.08); }
.vp-ind i { color: #E33023; font-size: 15px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
   .vp-spot { grid-template-columns: minmax(0, 1fr); }
   .vp-spot__media img { min-height: 300px; }
   .vp-spot__body { padding: 34px 30px 36px; }
   .vp-proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
   .vp-impact { padding: 56px 0 40px; }
   .vp-impact__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
   .vp-impact__item + .vp-impact__item::before { display: none; }
   .vp-spot__media img { min-height: 220px; }
   .vp-spot__body { padding: 28px 22px 30px; }
   .vp-spot__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
   .vp-spot__stat b { font-size: 21px; }
   .vp-spot__stat > span { font-size: 11.5px; }
   .vp-spot__badge { left: 14px; top: 14px; font-size: 11px; padding: 8px 13px; }
   .vp-proc-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
   .vp-proc { padding: 24px 22px; }
   .vp-inds { gap: 9px; }
   .vp-ind { padding: 11px 17px; font-size: 13.5px; }
}
/* On a phone the three result stats read better as compact rows than as three
   narrow columns where every label wraps to four lines. */
@media (max-width: 575px) {
   .vp-spot__stats { grid-template-columns: minmax(0, 1fr); gap: 13px; }
   .vp-spot__stat { display: flex; align-items: baseline; gap: 14px; }
   .vp-spot__stat b { margin-bottom: 0; font-size: 24px; flex: 0 0 auto; min-width: 74px; }
   .vp-spot__stat > span { font-size: 13px; }
}

/* ---------- Portfolio cards on touch ----------
   The card title only exists inside a hover overlay, so on a phone the cards
   were just artwork with no label. Below the hover breakpoint the overlay
   stays open. */
@media (max-width: 991px) {
   .vp-portfolio__overlay { opacity: 1; transform: none; }
   .vp-portfolio img { height: 280px; }
}
@media (max-width: 767px) {
   .vp-portfolio img { height: 240px; }
   .vp-portfolio__overlay { padding: 22px; }
   .vp-portfolio__overlay h4 { font-size: 20px; }
}

/* ---------- Filter pills scroll instead of stacking four rows deep ---------- */
@media (max-width: 767px) {
   .vp-filter {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      margin-bottom: 34px;
      padding-bottom: 4px;
      /* fade the right edge so it reads as scrollable */
      -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
      mask-image: linear-gradient(90deg, #000 88%, transparent);
   }
   .vp-filter::-webkit-scrollbar { display: none; }
   .vp-filter button { flex: 0 0 auto; scroll-snap-align: start; padding: 10px 20px; }
   .vp-filter button:last-child { margin-right: 26px; }
}

/* =====================================================================
   Contact page
   ===================================================================== */

/* ---------- The split contact card ---------- */
.vp-ctc {
   display: grid;
   grid-template-columns: 0.86fr 1.14fr;
   border-radius: 26px;
   overflow: hidden;
   background: #fff;
   border: 1px solid #f1eded;
   box-shadow: 0 34px 70px rgba(42, 21, 20,0.09);
}

/* left: the details, on the brand's dark ground */
.vp-ctc__aside {
   position: relative;
   overflow: hidden;
   padding: 46px 42px 44px;
   background: linear-gradient(155deg, #2e1f1e 0%, #1d1312 55%, #0d0808 100%);
}
.vp-ctc__aside::before {
   content: "";
   position: absolute;
   right: -90px; top: -70px;
   width: 300px; height: 300px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(227, 48, 35,0.35), transparent 66%);
   filter: blur(26px);
   pointer-events: none;
}
.vp-ctc__aside > * { position: relative; z-index: 1; }
.vp-ctc__aside h3 { color: #fff; font-size: 26px; line-height: 1.25; margin: 12px 0 12px; }
.vp-ctc__aside > p { color: #bba4a2; font-size: 15px; line-height: 1.72; margin: 0 0 34px; }

.vp-ctc__item { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.vp-ctc__item:first-of-type { border-top: 0; padding-top: 0; }
.vp-ctc__item i {
   flex: 0 0 auto;
   width: 44px; height: 44px;
   border-radius: 14px;
   display: grid; place-items: center;
   background: rgba(227, 48, 35,0.14);
   border: 1px solid rgba(245, 79, 67,0.3);
   color: #fad1ce;
   font-size: 16px;
   transition: all .35s ease;
}
.vp-ctc__item:hover i { color: #fff; background: linear-gradient(135deg, #E33023, #e97c33); box-shadow: 0 10px 24px rgba(227, 48, 35,0.4); }
.vp-ctc__item span { display: block; color: #988b8a; font-size: 12px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 5px; }
.vp-ctc__item a, .vp-ctc__item p { display: block; color: #fff; font-size: 16px; font-weight: 600; margin: 0; }
.vp-ctc__item a:hover { color: #e97c33; }
.vp-ctc__item small { display: block; color: #ac9190; font-size: 13px; font-weight: 400; margin-top: 3px; }

.vp-ctc__social { display: flex; gap: 10px; margin-top: 32px; }
.vp-ctc__social a {
   width: 42px; height: 42px;
   border-radius: 13px;
   display: grid; place-items: center;
   border: 1px solid rgba(255,255,255,0.12);
   background: rgba(255,255,255,0.04);
   color: #dbcccb;
   transition: all .35s ease;
}
.vp-ctc__social a:hover { color: #fff; background: #E33023; border-color: transparent; transform: translateY(-3px); }

/* right: the form */
.vp-ctc__form { padding: 46px 44px 48px; }
.vp-ctc__form .vp-heading { margin-bottom: 28px; }
.vp-ctc__form .vp-heading h2 { font-size: 30px; }
/* the form panel already has a card of its own — flatten it inside the split */
.vp-ctc__form .vp-form { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }

/* reason-for-contact pills */
.vp-choice { position: relative; display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
/* the radios stay in the tab order and keep :checked/:focus-visible working --
   they are just taken out of the flow so the labels are the visible control */
.vp-choice input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vp-choice label {
   display: inline-block;
   margin: 0;
   padding: 9px 17px;
   border-radius: 30px;
   border: 1px solid #ebe5e5;
   background: #fff;
   color: #504746;
   font-size: 13.5px; font-weight: 600;
   cursor: pointer;
   transition: all .3s ease;
}
.vp-choice label:hover { border-color: #E33023; color: #E33023; }
.vp-choice input:checked + label { background: #E33023; border-color: #E33023; color: #fff; }
.vp-choice input:focus-visible + label { outline: 2px solid #E33023; outline-offset: 2px; }
.vp-choice__label { width: 100%; font-weight: 600; color: #2A1514; font-size: 14px; margin-bottom: 2px; }

.vp-form__note { color: #988b8a; font-size: 13px; margin: 14px 0 0; }
.vp-form__note i { color: #E33023; margin-right: 6px; }

/* ---------- Incident hotline band ---------- */
.vp-hotline {
   display: flex;
   align-items: center;
   gap: 26px;
   flex-wrap: wrap;
   padding: 32px 38px;
   border-radius: 22px;
   background: linear-gradient(120deg, #2a0f0d 0%, #4d1611 52%, #E33023 100%);
   box-shadow: 0 28px 60px rgba(227, 48, 35,0.24);
}
.vp-hotline__pulse {
   flex: 0 0 auto;
   width: 58px; height: 58px;
   border-radius: 50%;
   display: grid; place-items: center;
   background: rgba(255,255,255,0.12);
   border: 1px solid rgba(255,255,255,0.28);
   color: #fff;
   font-size: 22px;
   animation: vp-live 1.8s ease-out infinite;
}
.vp-hotline__body { flex: 1 1 260px; }
.vp-hotline__body b { display: block; color: #fff; font-size: 22px; font-weight: 700; margin-bottom: 5px; }
.vp-hotline__body p { color: rgba(255,255,255,0.78); font-size: 15px; margin: 0; }
.vp-hotline__cta {
   flex: 0 0 auto;
   display: inline-flex; align-items: center; gap: 10px;
   padding: 15px 30px;
   border-radius: 30px;
   background: #fff;
   color: #2A1514;
   font-weight: 700;
   font-size: 16px;
   transition: transform .3s ease, box-shadow .3s ease, color .3s ease;
}
.vp-hotline__cta:hover { color: #E33023; transform: translateY(-3px); box-shadow: 0 18px 36px rgba(0,0,0,0.28); }

/* ---------- Map with a floating office card ---------- */
.vp-mapwrap { position: relative; }
.vp-mapwrap .vp-map iframe { height: 520px; filter: grayscale(0.25) contrast(1.05); }
.vp-office {
   position: absolute;
   left: 40px; bottom: 40px;
   z-index: 2;
   width: 320px;
   padding: 28px 26px;
   border-radius: 20px;
   background: rgba(20, 13, 13,0.9);
   -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
   border: 1px solid rgba(255,255,255,0.12);
   box-shadow: 0 26px 54px rgba(0,0,0,0.4);
}
.vp-office span { color: #e97c33; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.vp-office h5 { color: #fff; font-size: 20px; margin: 10px 0 8px; }
.vp-office p { color: #bba4a2; font-size: 14.5px; line-height: 1.7; margin: 0 0 16px; }
.vp-office a { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 600; font-size: 14.5px; }
.vp-office a:hover { color: #e97c33; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
   .vp-ctc__aside { padding: 38px 32px; }
   .vp-ctc__form { padding: 38px 32px 40px; }
}
@media (max-width: 991px) {
   .vp-ctc { grid-template-columns: minmax(0, 1fr); }
   .vp-ctc__form .vp-heading h2 { font-size: 27px; }
   .vp-office { left: 24px; right: 24px; bottom: 24px; width: auto; }
   .vp-mapwrap .vp-map iframe { height: 440px; }
}
@media (max-width: 767px) {
   .vp-ctc { border-radius: 20px; }
   .vp-ctc__aside { padding: 30px 22px; }
   .vp-ctc__aside h3 { font-size: 22px; }
   .vp-ctc__form { padding: 30px 22px 34px; }
   .vp-ctc__form .vp-heading h2 { font-size: 24px; }
   .vp-hotline { padding: 24px 22px; gap: 18px; border-radius: 18px; }
   .vp-hotline__pulse { width: 48px; height: 48px; font-size: 18px; }
   .vp-hotline__body b { font-size: 19px; }
   .vp-hotline__cta { width: 100%; justify-content: center; }
   .vp-mapwrap .vp-map iframe { height: 320px; }
   .vp-office { position: static; width: auto; margin-top: 16px; border-radius: 18px; padding: 22px 20px; }
   .vp-form input, .vp-form textarea { font-size: 16px; }   /* stops iOS zooming on focus */
   .vp-form textarea { min-height: 130px; }
   .vp-hero__pill { font-size: 13px; padding: 9px 14px; }
}

/* ---------- Prices in LKR ----------
   The template sized these for a three-character figure ($299). An LKR amount
   is two to three times longer, so the number is scaled down and the billing
   period moved onto its own line rather than wrapping mid-price. */
.vp-price__amount { font-size: clamp(30px, 5.2vw, 42px); }
.vp-price__amount span { display: block; font-size: 15px; margin-top: 6px; }
.vp-enrol__price { font-size: clamp(26px, 4.4vw, 34px); }
.vp-enrol__price span { display: block; font-size: 15px; margin-top: 6px; }
.vp-course__price { font-size: clamp(17px, 1.6vw, 20px); }
@media (max-width: 767px) {
   .vp-price__amount { font-size: clamp(28px, 8vw, 36px); }
   .vp-enrol__price { font-size: clamp(25px, 7.2vw, 32px); }
   .vp-course__price { font-size: 18px; }
}

/* offcanvas mobile menu: Contact Us button (replaces the Instagram grid) */
.tpoffcanvas__contact {
   margin-bottom: 50px;
}
.tpoffcanvas__contact .tp-btn-inner {
   display: block;
   width: 100%;
}

/* The feature cards no longer end in an arrow link, so the paragraph's
   trailing margin would sit on top of the card's 50px bottom padding. */
.tp-feature__item p:last-child {
   margin-bottom: 0;
}

/* =====================================================================
   Home — "Popular Cyber Security Courses" carousel
   ---------------------------------------------------------------------
   Three cards per view on desktop, two on tablet, one on phones. The
   track clips horizontally, so it gets vertical padding to make room for
   the card's hover lift (-10px) and its 60px drop shadow.
   ===================================================================== */
.vp-courses-slider { position: relative; }

.vp-courses-swiper {
   padding: 14px 0 20px;
   margin: -14px 0 -20px;
}

/* Slides stretch to the tallest card in the view; the card's own
   grid-era height/margin rules are neutralised inside the track. */
.vp-courses-swiper .swiper-slide { height: auto; display: flex; }
.vp-courses-swiper .swiper-slide .vp-course {
   width: 100%;
   height: 100%;
   margin-bottom: 0;
}

/* ---------- Arrows + dots ---------- */
.vp-courses-nav {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 22px;
   margin-top: 34px;
}
.vp-slider-arrow {
   width: 48px;
   height: 48px;
   flex: 0 0 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 1px solid var(--edu-line);
   border-radius: 50%;
   background: #fff;
   color: var(--edu-ink);
   font-size: 15px;
   transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.vp-slider-arrow:hover {
   color: #fff;
   border-color: transparent;
   background: linear-gradient(120deg, #E33023, #eb1a3d);
   transform: translateY(-2px);
   box-shadow: 0 12px 24px rgba(227, 48, 35, 0.24);
}
.vp-slider-arrow:focus-visible {
   outline: 2px solid #E33023;
   outline-offset: 3px;
}
/* Swiper adds this when the track is at an end and loop is off. */
.vp-slider-arrow.swiper-button-disabled {
   opacity: .4;
   pointer-events: none;
}

/* The catalogue keeps growing, so the dot row wraps rather than
   pushing the arrows off a narrow screen. */
.vp-courses-dots {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: auto;
   max-width: 100%;
   min-width: 0;
}
.vp-courses-dots .swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   margin: 0;
   opacity: 1;
   background: #e0d3d2;
   transition: width .35s ease, background .35s ease;
}
.vp-courses-dots .swiper-pagination-bullet-active {
   width: 26px;
   border-radius: 4px;
   background: linear-gradient(90deg, #E33023, #eb1a3d);
}

@media (max-width: 575px) {
   .vp-courses-nav { gap: 14px; margin-top: 28px; }
   .vp-slider-arrow { width: 42px; height: 42px; flex: 0 0 42px; }
   .vp-courses-dots { gap: 6px; }
}

/* nice-select.js sizes its replacement dropdown to the widest option,
   which a long course name pushes past a phone screen. Hold it to the
   field it replaced and let the labels wrap inside the list. */
.vp-form .nice-select { width: 100%; max-width: 100%; }
.vp-form .nice-select .current {
   display: block; max-width: 100%;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-form .nice-select .list { width: 100%; min-width: 0; }
.vp-form .nice-select .option {
   white-space: normal; line-height: 1.45; padding-top: 8px; padding-bottom: 8px;
}

/* ---------------------------------------------------------------------
   Reply line under the small email boxes (hero and footer sign-ups).
   Rendered by assets/js/vp-forms.js; empty and invisible until then.
   --------------------------------------------------------------------- */
.vp-form-note {
   margin: 10px 0 0;
   font-size: 14px;
   line-height: 1.5;
   min-height: 0;
}
.vp-form-note:empty { display: none; }
.vp-form-note.is-busy  { color: var(--tp-grey-2, #9A9DA7); }
.vp-form-note.is-ok    { color: var(--tp-common-green-2, #21B641); }
.vp-form-note.is-error { color: var(--tp-theme-1, #F43325); }

/* =====================================================================
   Contact — the form on the page, not inside a card
   ---------------------------------------------------------------------
   Section two used to be a two-column card: contact details on a dark
   panel to the left, the form on white to the right. That squeezed the
   fields into just over half the container and made the form read as a
   widget dropped onto the page rather than as the page's own content.

   It is now one continuous section on the page background — the details
   as a row across the top, the form beneath at full width. Everything
   below overrides the card rules further up rather than deleting them,
   so the card is one block comment away if it is ever wanted back.
   ===================================================================== */
.vp-ctc {
   display: block;
   background: none;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   overflow: visible;
}

/* The details come off the dark ground and sit on the page. */
.vp-ctc__aside {
   padding: 0 0 44px;
   margin-bottom: 48px;
   background: none;
   border-bottom: 1px solid var(--tp-border-2, #efecec);
}
.vp-ctc__aside::before { display: none; }
.vp-ctc__aside h3 { color: var(--tp-heading-primary, #1c0e0d); max-width: 18ch; }
.vp-ctc__aside > p { color: var(--tp-text-body, #5f6368); max-width: 62ch; margin-bottom: 38px; }

/* Four details across, rather than stacked down a column. */
.vp-ctc__items {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 28px 30px;
}
.vp-ctc__item {
   display: block;
   padding: 0;
   border-top: 0;
}
.vp-ctc__item i {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px; height: 42px;
   margin-bottom: 14px;
   border-radius: 12px;
   font-size: 16px;
   color: var(--tp-theme-1, #f43325);
   background: #fdf1f0;
}
.vp-ctc__item span  { color: var(--tp-grey-5, #888b95); }
.vp-ctc__item a,
.vp-ctc__item > div > p { color: var(--tp-heading-primary, #1c0e0d); }
.vp-ctc__item a:hover { color: var(--tp-theme-1, #f43325); }
.vp-ctc__item small { color: var(--tp-grey-2, #9a9da7); }

/* Social icons read as links on light, not chips on dark. */
.vp-ctc__social { margin-top: 34px; }
.vp-ctc__social a {
   color: var(--tp-grey-1, #5f6368);
   background: #f7f2f2;
   border: 1px solid var(--tp-border-2, #efecec);
}
.vp-ctc__social a:hover { color: #fff; background: var(--tp-theme-1, #f43325); border-color: var(--tp-theme-1, #f43325); }

/* The form gets the whole container width. */
.vp-ctc__form { padding: 0; }
.vp-ctc__form .vp-heading { margin-bottom: 32px; }

@media (max-width: 1199px) {
   .vp-ctc__aside { padding: 0 0 40px; }
   .vp-ctc__form { padding: 0; }
}
@media (max-width: 991px) {
   .vp-ctc__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
   .vp-ctc__items { grid-template-columns: minmax(0, 1fr); gap: 22px; }
   .vp-ctc__aside { margin-bottom: 36px; }
}

/* =====================================================================
   Enrolment form — enrol.php
   ---------------------------------------------------------------------
   The contact page strips .vp-form back to bare markup because its form
   sits inside its own section. The enrolment form has no such container,
   so without this it floats on plain white with nothing holding it
   together. It gets the panel back, scoped to this page only.
   ===================================================================== */
.vp-sec--checkout .vp-ctc__form .vp-form {
   padding: 38px 40px 34px;
   background: #fff;
   border: 1px solid var(--tp-border-2, #efecec);
   border-radius: 20px;
   box-shadow: 0 20px 50px rgba(42, 21, 20, .05);
}

/* Required and optional, said once and quietly. Marking every field
   "required" is noise; marking the one that is not is information. */
.vp-req { color: var(--tp-theme-1, #f43325); font-weight: 700; margin-left: 1px; }
.vp-form__optional {
   margin-left: 6px;
   font-size: 12px;
   font-weight: 500;
   color: var(--tp-grey-2, #9a9da7);
   text-transform: none;
   letter-spacing: 0;
}

/* Help under a field, not a placeholder — a placeholder vanishes exactly
   when the person starts typing and needs it most. */
.vp-form__hint {
   display: block;
   margin-top: 7px;
   font-size: 12.5px;
   line-height: 1.5;
   color: var(--tp-grey-2, #9a9da7);
}

/* Errors say what is wrong next to the thing that is wrong, and the
   field itself turns red rather than relying on the message alone. */
.vp-form__error {
   display: flex;
   align-items: flex-start;
   gap: 6px;
   margin-top: 7px;
   font-size: 12.5px;
   line-height: 1.5;
   color: #c0271c;
}
.vp-form input.is-invalid,
.vp-form select.is-invalid,
.vp-form .is-invalid .nice-select {
   border-color: #e8a49d;
   background: #fdf6f5;
}
.vp-form input.is-invalid:focus {
   border-color: #c0271c;
   box-shadow: 0 0 0 4px rgba(192, 39, 28, .12);
}

.vp-form__alert {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin: 0 0 24px;
   padding: 14px 18px;
   border: 1px solid #f0cbc7;
   border-left: 3px solid #c0271c;
   border-radius: 12px;
   background: #fdf6f5;
   font-size: 14px;
   line-height: 1.6;
   color: #8f1d15;
}

/* The button and its reassurance sit on one line on a wide screen, so
   the panel does not end on a lone button with dead space beside it. */
.vp-form__actions {
   display: flex;
   align-items: center;
   gap: 22px;
   flex-wrap: wrap;
   margin-top: 6px;
   padding-top: 26px;
   border-top: 1px solid var(--tp-border-2, #efecec);
}
.vp-form__actions .vp-form__btn { flex: 0 0 auto; }
.vp-form__assure {
   flex: 1 1 240px;
   display: flex;
   align-items: flex-start;
   gap: 9px;
   margin: 0;
   font-size: 13px;
   line-height: 1.6;
   color: var(--tp-grey-5, #888b95);
}
.vp-form__assure i { color: var(--tp-common-green-2, #21b641); margin-top: 2px; }

@media (max-width: 767px) {
   .vp-sec--checkout .vp-ctc__form .vp-form { padding: 26px 22px 24px; }
   .vp-form__actions { gap: 16px; padding-top: 22px; }
   .vp-form__actions .vp-form__btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Pay by card, offered beside the transfer details
   ---------------------------------------------------------------------
   Only rendered when PayHere is actually configured, so on a bank-only
   setup none of this appears and the page is unchanged.
   --------------------------------------------------------------------- */
.vp-pay-card {
   display: flex;
   align-items: center;
   gap: 24px;
   flex-wrap: wrap;
   margin-bottom: 26px;
   padding: 24px 28px;
   border: 1px solid #d9e7dd;
   border-radius: 16px;
   background: linear-gradient(135deg, #f4fbf7 0%, #ffffff 70%);
}
.vp-pay-card__body { flex: 1 1 240px; }
.vp-pay-card__body h3 {
   margin: 0 0 6px;
   font-size: 18px;
   font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-pay-card__body p {
   margin: 0;
   font-size: 14px;
   line-height: 1.65;
   color: var(--tp-text-body, #5f6368);
}
.vp-form__btn--card { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; }

/* A labelled rule, so the two routes read as alternatives rather than
   as steps to be done in order. */
.vp-pay-or {
   position: relative;
   margin: 0 0 26px;
   text-align: center;
}
.vp-pay-or::before {
   content: "";
   position: absolute;
   left: 0; right: 0; top: 50%;
   height: 1px;
   background: var(--tp-border-2, #efecec);
}
.vp-pay-or span {
   position: relative;
   padding: 0 14px;
   background: #fff;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: .4px;
   text-transform: uppercase;
   color: var(--tp-grey-2, #9a9da7);
}

@media (max-width: 767px) {
   .vp-pay-card { padding: 20px 20px; gap: 16px; }
   .vp-form__btn--card { width: 100%; justify-content: center; }
}

/* =====================================================================
   Student panel — the account side of the site.

   Deliberately quieter than the marketing pages: someone signs in to
   find out where they stand, not to be sold to. One accent, plenty of
   white, and status carried by a single pill per record.
   ===================================================================== */
.vp-acc { background: #faf8f8; }
.vp-acc__top {
   padding: 150px 0 34px;
   background: linear-gradient(180deg, #fff 0%, #faf8f8 100%);
   border-bottom: 1px solid #f0eaea;
}
.vp-acc__topinner {
   display: flex; align-items: flex-end; justify-content: space-between;
   gap: 24px; flex-wrap: wrap;
}
.vp-acc__eyebrow {
   display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px;
   font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
   color: var(--tp-theme-1, #f43325);
}
.vp-acc__eyebrow .dot {
   width: 7px; height: 7px; border-radius: 50%; background: var(--tp-theme-1, #f43325);
   box-shadow: 0 0 0 4px rgba(244, 51, 37, .16);
}
.vp-acc__top h1 { margin: 0 0 6px; font-size: 34px; line-height: 1.15; color: var(--tp-heading-primary, #1c0e0d); }
.vp-acc__top p { margin: 0; font-size: 15px; color: var(--tp-text-body, #5f6368); }
.vp-acc__who { display: flex; align-items: center; gap: 12px; }
.vp-acc__avatar {
   width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
   display: inline-flex; align-items: center; justify-content: center;
   color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .5px;
}
.vp-acc__who b { display: block; font-size: 14.5px; color: var(--tp-heading-primary, #1c0e0d); }
.vp-acc__who small { display: block; font-size: 13px; color: var(--tp-grey-2, #9a9da7); }

.vp-acc__body { padding: 34px 0 100px; }

/* ---------- Navigation ---------- */
.vp-acc__nav {
   display: flex; flex-direction: column; gap: 3px;
   padding: 12px; border-radius: 16px; background: #fff;
   border: 1px solid var(--tp-border-2, #efecec);
   box-shadow: 0 16px 40px rgba(42, 21, 20, .05);
}
.vp-acc__navlink {
   display: flex; align-items: center; gap: 11px;
   padding: 11px 14px; border-radius: 10px;
   font-size: 14.5px; font-weight: 600; color: var(--tp-text-body, #5f6368);
   transition: background .2s ease, color .2s ease;
}
.vp-acc__navlink i { width: 18px; text-align: center; font-size: 15px; }
.vp-acc__navlink:hover { background: #fbf6f6; color: var(--tp-heading-primary, #1c0e0d); }
.vp-acc__navlink.is-active {
   background: linear-gradient(135deg, var(--tp-theme-1, #f43325) 0%, #eb1a3d 100%);
   color: #fff; box-shadow: 0 8px 20px rgba(244, 51, 37, .25);
}
.vp-acc__navlink--out { margin-top: 6px; border-top: 1px solid #f4efee; padding-top: 14px; border-radius: 0 0 10px 10px; }
.vp-acc__navlink--out:hover { color: #c0231a; }

/* ---------- Cards ---------- */
.vp-acc__card {
   padding: 26px 28px; margin-bottom: 20px;
   background: #fff; border: 1px solid var(--tp-border-2, #efecec); border-radius: 18px;
   box-shadow: 0 16px 40px rgba(42, 21, 20, .04);
}
.vp-acc__cardhead {
   display: flex; align-items: center; justify-content: space-between;
   gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.vp-acc__cardhead h2, .vp-acc__course h2 {
   margin: 0; font-size: 20px; font-weight: 700; color: var(--tp-heading-primary, #1c0e0d);
}
.vp-acc__cardhead a { font-size: 13.5px; font-weight: 600; color: var(--tp-theme-1, #f43325); }
.vp-acc__subhead {
   margin: 20px 0 12px; font-size: 13px; font-weight: 700;
   letter-spacing: .05em; text-transform: uppercase; color: var(--tp-grey-5, #888b95);
}

/* ---------- Headline numbers ---------- */
.vp-acc__stats {
   display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px;
}
.vp-acc__stat {
   padding: 20px 22px; background: #fff; border-radius: 16px;
   border: 1px solid var(--tp-border-2, #efecec);
}
.vp-acc__statlabel {
   display: block; margin-bottom: 8px;
   font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
   color: var(--tp-grey-5, #888b95);
}
.vp-acc__stat strong {
   display: block; font-size: 30px; line-height: 1.1; font-weight: 700;
   font-variant-numeric: tabular-nums; color: var(--tp-heading-primary, #1c0e0d);
}
.vp-acc__stat strong.is-good { color: #1e9e57; }
.vp-acc__stat strong.is-due  { color: var(--tp-theme-1, #f43325); font-size: 25px; }
.vp-acc__stat small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--tp-grey-2, #9a9da7); }

/* ---------- The next thing to do ---------- */
.vp-acc__next { border-color: #f2d9d6; background: linear-gradient(135deg, #fff6f5 0%, #fff 60%); }
.vp-acc__nexthead h2 { margin: 10px 0 6px; }
.vp-acc__nexthead p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--tp-text-body, #5f6368); }
.vp-acc__nextrows { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 20px; }
.vp-acc__nextrows dt {
   font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
   color: var(--tp-grey-5, #888b95);
}
.vp-acc__nextrows dd {
   margin: 4px 0 0; font-size: 19px; font-weight: 700;
   font-variant-numeric: tabular-nums; color: var(--tp-heading-primary, #1c0e0d);
}

/* ---------- Status pills ---------- */
.vp-acc__pill {
   display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 100px;
   font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
   white-space: nowrap;
}
.vp-acc__pill--good { background: #eaf7ef; color: #17794a; }
.vp-acc__pill--warn { background: #fff8ec; color: #a9741d; }
.vp-acc__pill--due  { background: #fdeeec; color: #b3261e; }
.vp-acc__pill--grey { background: #f1efee; color: #6f6261; }

/* ---------- Rows and lists ---------- */
.vp-acc__rows { margin: 0; }
.vp-acc__rows > div {
   display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
   padding: 10px 0; border-top: 1px solid #f6f2f1;
}
.vp-acc__rows > div:first-child { border-top: 0; padding-top: 0; }
.vp-acc__rows dt { font-size: 13.5px; color: var(--tp-grey-5, #888b95); }
.vp-acc__rows dd {
   margin: 0; text-align: right; font-size: 14.5px; font-weight: 600;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-acc__rows dd.is-due { color: var(--tp-theme-1, #f43325); }
.vp-acc__mono { font-variant-numeric: tabular-nums; letter-spacing: .4px; }

.vp-acc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vp-acc__list li {
   display: flex; align-items: center; gap: 14px;
   padding: 14px 16px; border: 1px solid var(--tp-border-2, #efecec); border-radius: 12px;
   transition: border-color .2s ease, box-shadow .2s ease;
}
.vp-acc__list li:hover { border-color: #f2d9d6; box-shadow: 0 10px 24px rgba(42, 21, 20, .05); }
.vp-acc__listmain { flex: 1 1 auto; min-width: 0; }
.vp-acc__listmain b {
   display: block; font-size: 14.5px; font-weight: 600; color: var(--tp-heading-primary, #1c0e0d);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-acc__listmain small { display: block; font-size: 12.5px; color: var(--tp-grey-2, #9a9da7); }
.vp-acc__listgo {
   flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   background: #fbf6f6; color: var(--tp-theme-1, #f43325); font-size: 13px;
}
.vp-acc__listgo:hover { background: var(--tp-theme-1, #f43325); color: #fff; }

.vp-acc__slips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vp-acc__slips li {
   display: flex; align-items: center; gap: 12px;
   padding: 11px 14px; border: 1px solid var(--tp-border-2, #efecec); border-radius: 12px;
}
.vp-acc__slips > li > div { flex: 1 1 auto; min-width: 0; }
.vp-acc__slipicon {
   width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
   display: inline-flex; align-items: center; justify-content: center;
   background: #eaf7ef; color: #1e9e57; font-size: 15px;
}
.vp-acc__slips b {
   display: block; font-size: 14px; font-weight: 600; color: var(--tp-heading-primary, #1c0e0d);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-acc__slips small { display: block; font-size: 12.5px; color: var(--tp-grey-2, #9a9da7); }
.vp-acc__sliplink { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--tp-theme-1, #f43325); text-decoration: underline; }

/* ---------- Buttons, notices, empties ---------- */
.vp-acc__btn {
   display: inline-flex; align-items: center; gap: 9px;
   padding: 12px 22px; border-radius: 100px; border: 0;
   background: linear-gradient(120deg, var(--tp-theme-1, #f43325) 0%, #eb1a3d 100%);
   color: #fff; font-size: 14.5px; font-weight: 600; cursor: pointer;
   transition: transform .2s ease, box-shadow .2s ease;
}
.vp-acc__btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(244, 51, 37, .3); }
.vp-acc__btn--ghost {
   background: #fff; color: var(--tp-heading-primary, #1c0e0d);
   border: 1px solid var(--tp-border-2, #efecec);
}
.vp-acc__btn--ghost:hover { color: var(--tp-heading-primary, #1c0e0d); border-color: #f2d9d6; box-shadow: 0 10px 22px rgba(42, 21, 20, .07); }
.vp-acc__courseactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.vp-acc__ok, .vp-acc__err, .vp-acc__note {
   display: flex; align-items: flex-start; gap: 9px;
   margin: 0 0 18px; padding: 12px 15px; border-radius: 12px;
   font-size: 14px; line-height: 1.6;
}
.vp-acc__ok   { background: #eaf7ef; border: 1px solid #b9e3c9; color: #17794a; }
.vp-acc__err  { background: #fdeeec; border: 1px solid #f6cdc8; color: #b3261e; }
.vp-acc__note { background: #fbf6f6; border: 1px solid #f0eaea; color: var(--tp-text-body, #5f6368); margin-bottom: 0; }
.vp-acc__empty { text-align: center; padding: 26px 10px; }
.vp-acc__empty i {
   display: inline-flex; align-items: center; justify-content: center;
   width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%;
   background: #fbf6f6; color: var(--tp-theme-1, #f43325); font-size: 22px;
}
.vp-acc__empty b { display: block; margin-bottom: 6px; font-size: 17px; color: var(--tp-heading-primary, #1c0e0d); }
.vp-acc__empty p { margin: 0 auto 18px; max-width: 44ch; font-size: 14.5px; line-height: 1.7; color: var(--tp-text-body, #5f6368); }

/* ---------- Form ---------- */
.vp-acc__field { margin-bottom: 18px; }
.vp-acc__field label {
   display: block; margin-bottom: 7px;
   font-size: 14px; font-weight: 600; color: var(--tp-heading-primary, #1c0e0d);
}
.vp-acc__field input {
   width: 100%; padding: 12px 15px;
   border: 1px solid var(--tp-border-2, #efecec); border-radius: 12px;
   background: #fff; font-size: 14.5px; color: var(--tp-heading-primary, #1c0e0d);
   transition: border-color .2s ease, box-shadow .2s ease;
}
.vp-acc__field input:focus {
   outline: none; border-color: var(--tp-theme-1, #f43325);
   box-shadow: 0 0 0 3px rgba(244, 51, 37, .12);
}
.vp-acc__field input:disabled { background: #fbf6f6; color: var(--tp-grey-2, #9a9da7); }
.vp-acc__field input.is-invalid { border-color: #e5534b; }
.vp-acc__hint, .vp-acc__fielderr { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.55; }
.vp-acc__hint { color: var(--tp-grey-2, #9a9da7); }
.vp-acc__fielderr { color: #b3261e; font-weight: 600; }

@media (max-width: 991px) {
   .vp-acc__top { padding-top: 130px; }
   .vp-acc__nav { flex-direction: row; flex-wrap: wrap; }
   .vp-acc__navlink { flex: 1 1 auto; justify-content: center; }
   .vp-acc__navlink--out { border-top: 0; padding-top: 11px; border-radius: 10px; }
}
@media (max-width: 575px) {
   .vp-acc__top h1 { font-size: 26px; }
   .vp-acc__stats { grid-template-columns: minmax(0, 1fr); }
   .vp-acc__card { padding: 20px; }
   .vp-acc__rows > div { flex-direction: column; gap: 3px; align-items: flex-start; }
   .vp-acc__rows dd { text-align: left; }
   .vp-acc__navlink span { font-size: 13px; }
}

/* Sign out posts a form rather than following a link, so the control has
   to shed the browser's button styling and wear the nav link's instead. */
.vp-acc__navform { margin: 0; }
.vp-acc__navform .vp-acc__navlink {
   width: 100%; border: 0; background: none; cursor: pointer;
   font-family: inherit; text-align: left;
}
.vp-pwd__out { display: inline; }
.vp-pwd__out button {
   border: 0; background: none; padding: 0; cursor: pointer;
   font: inherit; color: var(--tp-theme-1, #f43325); text-decoration: underline;
}

/* Copyright line. The theme sets line-height:12px against a 15px font, which
   is invisible while the credit is short and collapses into overlapping rows
   the moment it wraps — and our company name is long enough to wrap. Give it
   a real line-height, and keep the name itself from splitting across lines. */
.tp-copyright__text span {
   line-height: 1.6;
   text-wrap: balance;
}
.tp-copyright__text span a {
   white-space: nowrap;
   text-decoration: none;
   transition: color .2s ease;
}
.tp-copyright__text span a:hover {
   color: var(--tp-theme-1, #f43325);
}

/* On the inner footer the credit is the only thing in its row, so let it use
   the full container and sit on one line until the screen genuinely runs out. */
.tp-copyright__text-3 span {
   display: inline-block;
   max-width: 100%;
   letter-spacing: .01em;
}

@media (max-width: 767px) {
   /* The theme's mobile rule adds a 20px bottom margin meant for the two-column
      home footer, where a language switcher follows. Nothing follows this one. */
   .tp-copyright__text-3 span {
      margin-bottom: 0;
      line-height: 1.7;
   }
}

/* ---------- Footer: social row and bottom bar ---------- */
/* Velpoint has one public profile, so the row is a labelled single icon
   rather than a lone circle that reads as three that failed to load. */
.tp-footer__social-label {
   display: block;
   margin-bottom: 12px;
   color: rgba(255,255,255,0.45);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.3px;
   text-transform: uppercase;
}
.tp-copyright__hours span { display: inline-flex; align-items: center; gap: 8px; }
.tp-copyright__hours i { color: var(--acc2, #f3731d); font-size: 13px; }
/* One column until lg, so the copyright and the hours centre together
   instead of the hours being squeezed into a third of a tablet. */
@media (max-width: 991px) {
   .tp-copyright__hours { margin-top: 8px; }
   .tp-copyright__text, .tp-copyright__hours { text-align: center; }
   .tp-copyright__hours span { justify-content: center; }
}

/* ---------- Currency switcher and converted amounts ---------- */
/* Prices are authored in LKR and converted for display, so the switcher
   is a preference control, not a checkout step — it stays quiet. */
.vp-cur {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 7px 8px 7px 16px;
   border-radius: 40px;
   border: 1px solid rgba(42, 21, 20, 0.12);
   background: rgba(255,255,255,0.75);
}
.vp-cur__label {
   margin: 0;
   color: #7e706f;
   font-size: 12.5px;
   font-weight: 600;
   letter-spacing: .2px;
   white-space: nowrap;
}
.vp-cur__select {
   appearance: none;
   -webkit-appearance: none;
   padding: 6px 30px 6px 12px;
   border-radius: 30px;
   border: 1px solid rgba(42, 21, 20, 0.14);
   background-color: #fff;
   /* caret drawn inline so no extra request and no icon-font dependency */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237e706f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 12px center;
   color: var(--edu-ink, #2a1514);
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   max-width: 230px;
}
.vp-cur__select:focus-visible { outline: 2px solid var(--acc, #f4546e); outline-offset: 2px; }
.vp-cur__note {
   margin: 10px 0 0;
   color: #8b7c7b;
   font-size: 12.5px;
   line-height: 1.6;
   text-align: center;
   max-width: 420px;
}

/* The home page's pricing band sits on a dark ground. */
.tp-price__area .vp-cur {
   border-color: rgba(255,255,255,0.16);
   background: rgba(255,255,255,0.06);
}
.tp-price__area .vp-cur__label { color: rgba(255,255,255,0.62); }
.tp-price__area .vp-cur__select {
   border-color: rgba(255,255,255,0.18);
   background-color: rgba(255,255,255,0.08);
   color: #fff;
}
/* The native dropdown list is painted by the OS, so its options need a
   readable pair of their own rather than inheriting the dark trigger. */
.tp-price__area .vp-cur__select option { color: #2a1514; background: #fff; }
.tp-price__area .vp-cur__note { color: rgba(255,255,255,0.55); margin-bottom: 26px; }

/* Amount + period on the plan cards. */
.tp-price__btn span small,
.vp-price__amount > span:not(.vp-money) {
   font-size: 14px;
   font-weight: 500;
   opacity: .72;
}

/* vp_money() wraps the figure in a span so the client-side converter can
   re-price it in place. These containers already styled their descendant
   spans as the small print that sits beside the figure ("/ mo", "/ course"),
   which turned the price itself into small grey small print. The money span
   is the figure, so it opts out of all of it — including the responsive
   rules further down that make that small print a block. */
.vp-price__amount .vp-money,
.vp-enrol__price .vp-money,
.tp-price__btn span .vp-money,
.vp-course__price .vp-money {
   display: inline;
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   color: inherit;
   opacity: 1;
   margin: 0;
}
/* ---------- Plan cards: one height, one baseline ----------

   The three plans carry different amounts of copy - a description that
   wraps onto a second line on one card, six feature rows against four
   on another, and on the yearly tab a savings line that only appears for
   the two plans that have a number to save on. Each card was sized by
   its own content, so they finished at three different heights and the
   price pills sat at three different levels.

   Bootstrap's .row already stretches the columns to match each other.
   What was missing was the card filling the column it sits in: the
   column was the right height all along and the card stopped short.

   So the column becomes a flex container, the card fills it, and the
   feature list is the part that takes up the slack. Everything below it
   - the savings line and the price pill - then sits on the same line
   across all three cards, however the copy above happens to fall. */
.price-tab-content .tab-pane > .row > [class*="col-"] { display: flex; }
.price-tab-content .tp-price__item {
   width: 100%;
   display: flex;
   flex-direction: column;
}
.price-tab-content .tp-price__feature { flex: 1 0 auto; }

.tp-price__saving {
   margin: 0 0 14px;
   color: #2f9e5f;
   font-size: 13px;
   font-weight: 600;
}
/* The featured card is solid red, where the green reads as a smudge. */
.tp-price__item.active .tp-price__saving { color: rgba(255,255,255,0.95); }
.vp-price__yearly {
   margin: -6px 0 16px;
   color: #7e706f;
   font-size: 13.5px;
}
.vp-price__yearly .vp-money { font-weight: 600; color: var(--edu-ink, #2a1514); }
/* The featured card is dark, where the ink colour above disappears. */
.vp-price--featured .vp-price__yearly { color: #bba4a2; }
.vp-price--featured .vp-price__yearly .vp-money { color: #fff; }

@media (max-width: 575px) {
   /* Stacked at phone width. The container becomes a block-level flex box
      with a real width first: inline-flex sizes to its content, so a child
      asking for width:100% inside it resolves against nothing and collapses
      to zero — which is exactly what the select used to do here. */
   .vp-cur {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      width: 100%;
      max-width: 340px;
      margin: 0 auto;
      border-radius: 18px;
      padding: 12px 14px;
   }
   .vp-cur__label { text-align: center; white-space: normal; }
   .vp-cur__select { width: 100%; max-width: none; }
   .vp-cur__note { margin-left: auto; margin-right: auto; }
}

/* ---------- Floating WhatsApp button ---------- */
/* Bottom-left: .scroll-top is fixed to the bottom-right, so the two do
   not share a corner. z-index sits above the page and the back-to-top
   button (9) but below the offcanvas menu and its overlay (999), so the
   mobile menu covers it rather than the other way round. */
.vp-wa {
   position: fixed;
   z-index: 99;
   left: 24px;
   bottom: 24px;
   display: inline-flex;
   align-items: center;
   gap: 0;
   height: 56px;
   padding: 0;
   border-radius: 40px;
   background: #25D366;              /* WhatsApp brand green */
   color: #fff;
   box-shadow: 0 10px 26px rgba(18, 140, 70, .34), 0 2px 6px rgba(0,0,0,.18);
   overflow: hidden;
   transition: box-shadow .3s ease, transform .3s ease, background-color .3s ease;
   /* keeps clear of the iOS home indicator */
   margin-bottom: env(safe-area-inset-bottom, 0px);
}
.vp-wa:hover,
.vp-wa:focus-visible {
   color: #fff;
   background: #1ebe5a;
   transform: translateY(-2px);
   box-shadow: 0 16px 34px rgba(18, 140, 70, .42), 0 3px 8px rgba(0,0,0,.2);
}
.vp-wa:focus-visible { outline: 3px solid rgba(255,255,255,.85); outline-offset: 3px; }

.vp-wa__icon {
   display: grid;
   place-items: center;
   width: 56px;
   height: 56px;
   flex: 0 0 56px;
}
.vp-wa__icon svg { display: block; }

/* The label is a pill that grows out of the circle on hover. Animating
   max-width rather than width keeps it to the text's natural size. */
.vp-wa__label {
   max-width: 0;
   padding-right: 0;
   white-space: nowrap;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: .2px;
   opacity: 0;
   transition: max-width .35s cubic-bezier(.2,.8,.3,1), opacity .25s ease, padding-right .35s ease;
}
.vp-wa:hover .vp-wa__label,
.vp-wa:focus-visible .vp-wa__label {
   max-width: 220px;
   padding-right: 22px;
   opacity: 1;
}

/* A slow halo, so the button reads as live without nagging. */
.vp-wa::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
   animation: vp-wa-pulse 2.6s ease-out 1.4s infinite;
   pointer-events: none;
}
@keyframes vp-wa-pulse {
   0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
   70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
   100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.vp-wa:hover::before { animation: none; }

/* The button arrives rather than appearing. `backwards` fill, not
   `forwards`: the keyframes animate transform, and holding the end frame
   would pin it and kill the hover lift below. */
@keyframes vp-wa-in {
   from { opacity: 0; transform: scale(.4) translateY(14px); }
}
.vp-wa {
   animation: vp-wa-in .5s cubic-bezier(.2, 1.3, .4, 1) .4s backwards;
}

/* A heartbeat: two beats close together, then a long rest — the rhythm
   of an actual pulse rather than an even throb, which is what stops it
   reading as a loading spinner. The whole button scales, so the halo
   below breathes with it instead of against it.

   Kept shallow on purpose. 1.06 is enough to catch the eye at the edge
   of vision; anything more becomes a button that will not sit still. */
@keyframes vp-wa-beat {
   0%   { transform: scale(1); }
   14%  { transform: scale(1.06); }
   28%  { transform: scale(1); }
   42%  { transform: scale(1.045); }
   56%  { transform: scale(1); }
   100% { transform: scale(1); }
}
/* The mark itself zooms, inside a circle that stays put — so the button
   never nudges the page and the halo keeps its own edge to expand from. */
.vp-wa__icon svg {
   transform-origin: 50% 50%;
   animation: vp-wa-beat 2.6s ease-in-out 1.4s infinite;
   will-change: transform;
}
/* Hovering is its own feedback, and the lift already moves the button. */
.vp-wa:hover .vp-wa__icon svg,
.vp-wa:focus-visible .vp-wa__icon svg { animation: none; }

@media (max-width: 767px) {
   /* Icon only, and tucked in so it does not cover page content. The
      back-to-top button sits at the opposite corner at this size too. */
   .vp-wa { left: 16px; bottom: 16px; height: 52px; }
   .vp-wa__icon { width: 52px; height: 52px; flex-basis: 52px; }
   .vp-wa__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
   .vp-wa, .vp-wa__label { transition: none; }
   .vp-wa, .vp-wa::before, .vp-wa__icon svg { animation: none; }
   .vp-wa:hover, .vp-wa:focus-visible { transform: none; }
}

/* Printed pages have no use for a chat button. */
@media print { .vp-wa { display: none; } }

/* ---------- Toasts ---------- */
/* Fixed, so a reply never pushes the page around the way the old inline
   note did. Top centre on every screen size: the one place that is
   always in view, whichever corner of the page the button was in, and
   clear of the WhatsApp button and the drawer's close control. */
.vp-toasts {
   position: fixed;
   z-index: 100000;               /* over the enrol drawer (99990) and the
                                     offcanvas — a reply is worth seeing
                                     whatever is open */
   top: 18px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 10px;
   width: min(460px, calc(100vw - 32px));
   pointer-events: none;          /* the gaps between toasts stay clickable */
}
.vp-toasted { display: none !important; }
.vp-toast {
   pointer-events: auto;
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: start;
   gap: 12px;
   padding: 15px 14px 15px 16px;
   border-radius: 16px;
   overflow: hidden;
   padding-left: 20px;            /* room for the coloured stripe */
   background: rgba(255, 255, 255, .97);
   border: 1px solid #f1e6e5;
   box-shadow: 0 18px 44px rgba(42, 21, 20, .16), 0 3px 10px rgba(42, 21, 20, .06);
   color: #2A1514;
   /* The blur is a progressive nicety; the background above already
      stands on its own where backdrop-filter is unsupported. */
   backdrop-filter: blur(14px) saturate(1.3);
   -webkit-backdrop-filter: blur(14px) saturate(1.3);
   opacity: 0;
   transform: translateY(-16px) scale(.96);
   transition: opacity .32s ease, transform .45s cubic-bezier(.2, .9, .3, 1.15);
}
.vp-toast.is-in  { opacity: 1; transform: none; }
.vp-toast.is-out { opacity: 0; transform: translateY(-12px) scale(.96); transition-duration: .25s, .3s; }

.vp-toast__icon {
   display: grid;
   place-items: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   flex: 0 0 30px;
}
.vp-toast__icon svg { width: 17px; height: 17px; }

.vp-toast__body { min-width: 0; padding-top: 2px; }
.vp-toast__title {
   display: block;
   font-size: 14.5px;
   font-weight: 700;
   line-height: 1.35;
   letter-spacing: .1px;
}
.vp-toast__text {
   display: block;
   margin-top: 3px;
   color: #665b5a;
   font-size: 13.5px;
   line-height: 1.55;
   /* Server replies are a sentence, but nothing stops one being a long
      one, and a toast must not grow without limit. */
   overflow-wrap: anywhere;
}

.vp-toast__close {
   flex: 0 0 auto;
   display: grid;
   place-items: center;
   width: 28px;
   height: 28px;
   padding: 0;
   border: 0;
   border-radius: 9px;
   background: transparent;
   color: #a59897;
   cursor: pointer;
   transition: background-color .2s ease, color .2s ease;
}
.vp-toast__close svg { width: 15px; height: 15px; }
.vp-toast__close:hover { background: #f7efee; color: #2A1514; }
.vp-toast__close:focus-visible { outline: 2px solid #E33023; outline-offset: 1px; }

/* The countdown doubles as the reason the toast is about to vanish. */
.vp-toast__bar {
   position: absolute;
   left: 0;
   bottom: 0;
   height: 2px;
   width: 100%;
   transform-origin: left center;
   transform: scaleX(0);
   opacity: .85;
}
.vp-toast__bar.is-running { animation: vp-toast-bar linear forwards; }
.vp-toast__bar.is-paused  { animation-play-state: paused; }
@keyframes vp-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* One accent per type, carried by the left stripe, the icon chip and
   the countdown. */
.vp-toast::before {
   content: "";
   position: absolute;
   left: 0; top: 0; bottom: 0;
   width: 5px;
   background: var(--vp-toast-accent, #E33023);
}
.vp-toast--success { --vp-toast-accent: #16a05d; }
.vp-toast--error   { --vp-toast-accent: #E33023; }
.vp-toast--info    { --vp-toast-accent: #f3731d; }
.vp-toast--loading { --vp-toast-accent: #a59897; }
.vp-toast--success .vp-toast__icon { background: #e3f6ec; color: #16a05d; }
.vp-toast--error   .vp-toast__icon { background: #fdeceb; color: #E33023; }
.vp-toast--info    .vp-toast__icon { background: #fff1e6; color: #f3731d; }
.vp-toast--loading .vp-toast__icon { background: #f7efee; color: #665b5a; }
.vp-toast__bar { background: var(--vp-toast-accent, #E33023); }

.vp-toast__spinner {
   width: 15px;
   height: 15px;
   border-radius: 50%;
   border: 2px solid #eadfde;
   border-top-color: #E33023;
   animation: vp-toast-spin .7s linear infinite;
}
@keyframes vp-toast-spin { to { transform: rotate(360deg); } }

@media (max-width: 575px) {
   .vp-toasts {
      top: 12px;
      width: calc(100vw - 24px);
   }
   .vp-toast { border-radius: 14px; padding: 13px 12px 13px 18px; }
   .vp-toast__title { font-size: 14px; }
   .vp-toast__text  { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
   .vp-toast { transition: opacity .2s ease; transform: none; }
   .vp-toast.is-in, .vp-toast.is-out { transform: none; }
   .vp-toast__bar.is-running { animation: none; transform: scaleX(1); }
   .vp-toast__spinner { animation-duration: 1.6s; }
}

/* ---------- Honeypot ---------- */
/* Moved out of sight rather than display:none. Some bots deliberately
   skip fields that are display:none, and some password managers try to
   autofill them — which would make a real visitor look like a bot. The
   field stays in the layout, just nowhere anybody can see or reach it. */
.vp-guard {
   position: absolute !important;
   left: -9999px !important;
   top: auto !important;
   width: 1px !important;
   height: 1px !important;
   overflow: hidden !important;
   opacity: 0 !important;
   pointer-events: none !important;
}

/* =====================================================================
   Contact — centred layout (contact.php)
   ---------------------------------------------------------------------
   A centred heading, the four ways to reach us as cards, then the form
   in its own elevated panel in the middle of the page. Scoped to .vp-ctx
   so the enrolment page, which reuses .vp-ctc__form, is untouched.
   ===================================================================== */
.vp-ctx { position: relative; overflow: hidden; }
.vp-ctx::before {
   content: "";
   position: absolute;
   left: 50%; top: 42%;
   width: 900px; height: 900px;
   transform: translateX(-50%);
   border-radius: 50%;
   background: radial-gradient(circle, rgba(227, 48, 35, .07), transparent 62%);
   pointer-events: none;
}
.vp-ctx > .container { position: relative; }
.vp-ctx .vp-eyebrow { justify-content: center; }
.vp-ctx .vp-heading--center { max-width: 660px; }
.vp-ctx__head { margin-bottom: 50px; }

/* the four details */
.vp-ctx__cards {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 24px;
}
.vp-ctx__card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   padding: 34px 22px 30px;
   border-radius: 22px;
   background: #fff;
   border: 1px solid #f1eded;
   box-shadow: 0 10px 30px rgba(42, 21, 20, .04);
   overflow: hidden;
   transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.vp-ctx__card::after {
   content: "";
   position: absolute;
   left: 0; right: 0; top: 0;
   height: 3px;
   background: linear-gradient(90deg, #E33023, #e97c33);
   transform: scaleX(0);
   transition: transform .45s ease;
}
.vp-ctx__card:hover {
   transform: translateY(-8px);
   border-color: #f6d6d3;
   box-shadow: 0 26px 50px rgba(227, 48, 35, .12);
}
.vp-ctx__card:hover::after { transform: scaleX(1); }
.vp-ctx__icon {
   display: grid;
   place-items: center;
   width: 64px; height: 64px;
   margin-bottom: 20px;
   border-radius: 20px;
   background: #fdf1f0;
   color: #E33023;
   font-size: 22px;
   transition: all .4s ease;
}
.vp-ctx__card:hover .vp-ctx__icon {
   color: #fff;
   background: linear-gradient(135deg, #E33023, #e97c33);
   box-shadow: 0 14px 28px rgba(227, 48, 35, .35);
   transform: rotate(-6deg);
}
.vp-ctx__label {
   display: block;
   margin-bottom: 8px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.4px;
   text-transform: uppercase;
   color: #988b8a;
}
.vp-ctx__card strong {
   display: block;
   max-width: 100%;
   font-size: 16.5px;
   font-weight: 700;
   color: #1c0e0d;
   overflow-wrap: anywhere;
   transition: color .3s ease;
}
.vp-ctx__card:hover strong { color: #E33023; }
.vp-ctx__card small {
   display: block;
   margin-top: 6px;
   font-size: 13px;
   line-height: 1.55;
   color: #9a9da7;
}

/* social row */
.vp-ctx__social {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   margin: 40px 0 80px;
}
.vp-ctx__social span {
   margin-right: 6px;
   font-size: 13px;
   font-weight: 600;
   color: #888b95;
}
.vp-ctx__social a {
   display: grid;
   place-items: center;
   width: 42px; height: 42px;
   border-radius: 50%;
   background: #fff;
   border: 1px solid #efecec;
   color: #5f6368;
   transition: all .35s ease;
}
.vp-ctx__social a:hover { color: #fff; background: #E33023; border-color: #E33023; transform: translateY(-3px); }

/* The form, open on the page rather than inside a card.

   It used to sit in a white panel on a white background: a border, a
   30px radius and a 90px shadow drawing a box around the only thing on
   that part of the page. Taking it away lets the section read as one
   surface, and the radial glow behind finally shows through the form
   instead of stopping dead at a card edge.

   The one job the card was really doing was separating the heading from
   the fields. A hairline that fades out at both ends does that on its
   own — it ends the heading without enclosing anything, which is the
   whole difference between a divider and a box. The measure is held at
   820px so the two-column rows keep the width they were designed at. */
.vp-ctx__panel {
   position: relative;
   max-width: 820px;
   margin: 0 auto;
   padding: 0;
   background: none;
   border: 0;
   border-radius: 0;
   box-shadow: none;
}
.vp-ctx__panel .vp-heading { margin-bottom: 40px; }
.vp-ctx__panel .vp-heading::after {
   content: "";
   display: block;
   width: min(100%, 560px);
   height: 1px;
   margin: 36px auto 0;
   background: linear-gradient(90deg, transparent, #ece6e6 18%, #ece6e6 82%, transparent);
}
.vp-ctx__panel .vp-form {
   padding: 0;
   background: none;
   border: 0;
   border-radius: 0;
   box-shadow: none;
}

.vp-ctx .vp-choice { justify-content: center; margin-bottom: 34px; }
.vp-ctx .vp-choice__label { text-align: center; margin-bottom: 6px; }
.vp-ctx .vp-choice label { padding: 10px 18px; background: #faf7f7; border-color: #f1eded; }
.vp-ctx .vp-choice input:checked + label {
   background: linear-gradient(90deg, #E33023, #f54f43);
   border-color: transparent;
   box-shadow: 0 8px 20px rgba(227, 48, 35, .28);
}

/* inputs with a leading icon */
.vp-field { position: relative; display: block; }
.vp-field i {
   position: absolute;
   left: 18px; top: 50%;
   transform: translateY(-50%);
   color: #b4a9a8;
   font-size: 15px;
   pointer-events: none;
   transition: color .3s ease;
}
.vp-ctx .vp-form input,
.vp-ctx .vp-form textarea {
   border-radius: 14px;
   background: #faf7f7;
   border-color: #f1eded;
}
.vp-ctx .vp-field input { padding-left: 48px; }
.vp-field:focus-within i { color: #E33023; }
.vp-ctx .vp-form input:focus,
.vp-ctx .vp-form textarea:focus { background: #fff; }

.vp-ctx__submit { text-align: center; padding-top: 6px; }
.vp-ctx__submit .vp-form__btn { padding: 17px 44px; font-size: 16px; }
.vp-ctx__submit .vp-form__btn svg { transition: transform .3s ease; }
.vp-ctx__submit .vp-form__btn:hover svg { transform: translateX(4px); }
.vp-ctx__submit .vp-form__note { margin-top: 18px; }

/* ---------- Responsive ----------
   Sizes scale with the viewport through clamp() so there is no jump
   between breakpoints; the breakpoints only change the arrangement. */
.vp-ctx { padding: clamp(64px, 9vw, 110px) 0; }
.vp-ctx .vp-heading h2 {
   font-size: clamp(27px, 3.6vw, 42px);
   text-wrap: balance;
}
.vp-ctx .vp-heading p { font-size: clamp(15px, 1.4vw, 17px); text-wrap: pretty; }
.vp-ctx__head { margin-bottom: clamp(32px, 5vw, 50px); }
.vp-ctx__cards { gap: clamp(14px, 2vw, 24px); }
.vp-ctx__card { padding: clamp(26px, 2.8vw, 34px) clamp(16px, 1.8vw, 22px) clamp(24px, 2.4vw, 30px); }
.vp-ctx__card strong { font-size: clamp(15px, 1.3vw, 16.5px); overflow-wrap: normal; word-break: normal; }
.vp-ctx__social { margin: clamp(28px, 4vw, 40px) 0 clamp(44px, 7vw, 80px); }
.vp-ctx__panel { width: 100%; }
.vp-ctx__panel .vp-heading { margin-bottom: clamp(28px, 3.8vw, 40px); }
.vp-ctx__panel .vp-heading::after { margin-top: clamp(26px, 3.4vw, 36px); }

/* tablet: two cards abreast */
@media (max-width: 991px) {
   .vp-ctx__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phone: cards turn into compact rows — icon left, text beside it —
   so four of them don't cost four screens of scrolling */
@media (max-width: 575px) {
   .vp-ctx__cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
   .vp-ctx__card {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      column-gap: 16px;
      align-items: center;
      text-align: left;
      padding: 18px 18px;
      border-radius: 18px;
   }
   .vp-ctx__card:hover { transform: none; }
   .vp-ctx__icon {
      grid-row: 1 / span 3;
      width: 52px; height: 52px;
      margin: 0;
      border-radius: 16px;
      font-size: 19px;
   }
   .vp-ctx__label { margin-bottom: 3px; font-size: 11px; }
   .vp-ctx__card small { margin-top: 3px; font-size: 12.5px; }

   /* topic pills: a tidy two-column grid instead of a ragged wrap */
   .vp-ctx .vp-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 26px; }
   .vp-ctx .vp-choice__label { grid-column: 1 / -1; }
   .vp-ctx .vp-choice label { padding: 10px 8px; font-size: 13px; text-align: center; }

   .vp-ctx .vp-form .form-group { margin-bottom: 18px; }
   .vp-ctx__submit .vp-form__btn { width: 100%; justify-content: center; }
   .vp-ctx__submit .vp-form__note { font-size: 12.5px; }
}

/* very small phones */
@media (max-width: 359px) {
   .vp-ctx .vp-choice { grid-template-columns: minmax(0, 1fr); }
   .vp-ctx__card { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 16px 14px; }
   .vp-ctx__icon { width: 44px; height: 44px; font-size: 16px; }
}

/* =====================================================================
   Enrol drawer — course-details.php. Slides in from the left.
   ===================================================================== */
.vp-enrol__btn i { margin-right: 8px; }

.vp-drawer { position: fixed; inset: 0; z-index: 99990; }
.vp-drawer[hidden] { display: none; }
.vp-drawer__backdrop {
   position: absolute; inset: 0;
   background: rgba(26, 12, 11, 0.55);
   backdrop-filter: blur(3px);
   opacity: 0;
   transition: opacity .35s ease;
   cursor: pointer;
}
.vp-drawer__panel {
   position: absolute; top: 0; bottom: 0; left: 0;
   width: min(500px, 100%);
   display: flex; flex-direction: column;
   background: #fff;
   box-shadow: 30px 0 80px rgba(26, 12, 11, 0.28);
   transform: translateX(-100%);
   transition: transform .4s cubic-bezier(.22, .8, .24, 1);
   overflow-y: auto;
   overscroll-behavior: contain;
   /* scrolls, but without a visible bar */
   scrollbar-width: none;
   -ms-overflow-style: none;
}
.vp-drawer__panel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.vp-drawer.is-open .vp-drawer__backdrop { opacity: 1; }
.vp-drawer.is-open .vp-drawer__panel { transform: none; }
html.vp-drawer-lock, html.vp-drawer-lock body { overflow: hidden; }

/* ---------- head ---------- */
.vp-drawer__head {
   position: relative;
   flex: none;
   padding: 24px 30px 22px;
   color: #fff;
   background:
      radial-gradient(circle at 100% 0, rgba(245, 79, 67, 0.55), transparent 55%),
      linear-gradient(140deg, #2A1514, #4a1d1a);
}
.vp-drawer__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vp-drawer__head .vp-eyebrow { color: #f6675c; }
.vp-drawer__head .vp-eyebrow i { background: #f6675c; }
.vp-drawer__head h3 { color: #fff; font-size: 26px; font-weight: 800; margin: 0 0 16px; }
.vp-drawer__close {
   width: 40px; height: 40px;
   border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
   background: rgba(255,255,255,0.06); color: #fff; font-size: 18px;
   display: inline-flex; align-items: center; justify-content: center;
   transition: background .25s ease, transform .25s ease;
}
.vp-drawer__close:hover { background: #E33023; transform: rotate(90deg); }
.vp-drawer__course {
   display: flex; align-items: center; justify-content: space-between; gap: 16px;
   padding: 13px 16px;
   border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
   background: rgba(255,255,255,0.06);
}
.vp-drawer__course b { display: block; font-size: 15px; line-height: 1.35; }
.vp-drawer__course span { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255,255,255,0.65); }
/* after step one the order summary carries the course, so the head slims down */
.vp-drawer__panel:not([data-step="1"]) .vp-drawer__course { display: none; }
.vp-drawer__course strong { flex: none; font-size: 17px; font-weight: 800; color: #fff; white-space: nowrap; }

.vp-drawer__steps { list-style: none; display: flex; gap: 6px; margin: 18px 0 0; padding: 0; }
.vp-drawer__steps li {
   flex: 1; display: flex; align-items: center; gap: 7px;
   font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5);
   padding-top: 10px; border-top: 3px solid rgba(255,255,255,0.14);
   transition: color .3s ease, border-color .3s ease;
}
.vp-drawer__steps li i {
   font-style: normal; width: 20px; height: 20px; border-radius: 50%; flex: none;
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 11px; background: rgba(255,255,255,0.12);
   transition: background .3s ease;
}
.vp-drawer__steps li.is-on { color: #fff; border-top-color: #E33023; }
.vp-drawer__steps li.is-on i { background: #E33023; }
.vp-drawer__steps li.is-on:not(.is-current) i { font-size: 0; }
.vp-drawer__steps li.is-on:not(.is-current) i::before { content: "\2713"; font-size: 11px; }

/* ---------- form ---------- */
.vp-drawer__form.vp-form { border: 0; border-radius: 0; box-shadow: none; padding: 6px 30px 0; flex: 1; display: flex; flex-direction: column; }
.vp-drawer__form[hidden] { display: none; }
.vp-drawer__pane { flex: 1; display: flex; flex-direction: column; animation: vp-pane-in .35s ease; }
.vp-drawer__pane[hidden] { display: none; }
@keyframes vp-pane-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

.vp-drawer__form fieldset { border: 0; margin: 0; padding: 18px 0 4px; }
.vp-drawer__form fieldset + fieldset { border-top: 1px dashed #efe7e7; }
.vp-drawer__form legend {
   float: none; width: auto; margin: 0 0 14px; padding: 0;
   font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #a59897;
}
.vp-drawer__form .form-group { margin-bottom: 16px; }
.vp-drawer__form label em { color: #E33023; font-style: normal; }
.vp-drawer__form label > span { color: #a59897; font-weight: 500; }
.vp-drawer__form .vp-field input { padding-left: 46px; }
.vp-drawer__form input, .vp-drawer__form textarea { padding-top: 13px; padding-bottom: 13px; border-radius: 12px; }
.vp-drawer__form textarea { min-height: 88px; }
.vp-drawer__form .is-invalid input,
.vp-drawer__form .is-invalid textarea { border-color: #E33023; background: #fff6f5; }
.vp-drawer__form .is-invalid .vp-field i { color: #E33023; }
.vp-drawer__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.vp-drawer__form .vp-choice { margin-bottom: 18px; }

.vp-drawer__agree {
   display: flex !important; align-items: flex-start; gap: 10px;
   font-weight: 500 !important; font-size: 13px !important; color: #665b5a !important; line-height: 1.55;
   padding: 12px 14px; border-radius: 12px; background: #fbf4f4; cursor: pointer;
   border: 1px solid transparent;
}
.vp-drawer__agree.is-invalid { border-color: #E33023; }
.vp-drawer__form .vp-drawer__agree input { width: 17px; height: 17px; flex: none; margin-top: 2px; padding: 0; accent-color: #E33023; }

/* payment method cards */
.vp-paymethod { position: relative; display: grid; gap: 10px; }
.vp-paymethod input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vp-paymethod label {
   display: flex !important; align-items: center; gap: 14px;
   margin: 0 !important; padding: 14px 16px;
   border: 1.5px solid #ebe5e5; border-radius: 16px; background: #fff;
   cursor: pointer;
   transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.vp-paymethod label:hover { border-color: #f0b7b2; }
.vp-paymethod input:checked + label {
   border-color: #E33023; background: #fffafa;
   box-shadow: 0 10px 26px rgba(227, 48, 35, 0.12);
}
.vp-paymethod input:focus-visible + label { outline: 2px solid #E33023; outline-offset: 2px; }
.vp-paymethod__icon {
   flex: none; width: 44px; height: 44px; border-radius: 12px;
   display: inline-flex; align-items: center; justify-content: center;
   font-size: 19px; color: #E33023; background: #fbeeed;
   transition: background .25s ease, color .25s ease;
}
.vp-paymethod input:checked + label .vp-paymethod__icon { background: #E33023; color: #fff; }
.vp-paymethod__text { flex: 1; min-width: 0; }
.vp-paymethod__text b { display: flex; align-items: center; gap: 8px; color: #2A1514; font-size: 15px; }
.vp-paymethod__text b em {
   font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
   color: #0f7a4a; background: #e3f6ec; padding: 2px 8px; border-radius: 20px;
}
.vp-paymethod__text small { display: block; margin-top: 2px; color: #8c7f7e; font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.vp-paymethod__brands { display: flex; gap: 5px; margin-top: 7px; }
.vp-paymethod__brands i {
   font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .3px;
   padding: 2px 6px; border-radius: 4px; border: 1px solid #ebe5e5; color: #504746; background: #fff;
}
.vp-paymethod__brands i:nth-child(1) { color: #1a1f71; }
.vp-paymethod__brands i:nth-child(2) { color: #eb001b; }
.vp-paymethod__brands i:nth-child(3) { color: #2e77bb; }
.vp-paymethod__radio {
   flex: none; width: 20px; height: 20px; border-radius: 50%;
   border: 2px solid #d9cfce; transition: border .2s ease;
}
.vp-paymethod input:checked + label .vp-paymethod__radio { border: 6px solid #E33023; }
.vp-paymethod__hint {
   margin: 12px 0 6px; padding: 10px 12px; border-radius: 10px;
   font-size: 12.5px; line-height: 1.55; color: #665b5a; background: #faf7f7;
}
.vp-paymethod__hint:empty { display: none; }

/* the details each method needs, opened under the chosen card */
.vp-paydetail {
   margin: 12px 0 4px; padding: 16px 16px 4px;
   border: 1px solid #f1e6e5; border-radius: 16px; background: #fffcfc;
   animation: vp-paydetail-in .35s cubic-bezier(.2, .9, .3, 1);
}
@keyframes vp-paydetail-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vp-paydetail[hidden], .vp-paydetail [hidden] { display: none !important; }
.vp-paydetail__help { display: block; margin-top: 6px; font-size: 12px; color: #9a8d8c; line-height: 1.5; }
.vp-paydetail__safe {
   display: flex; gap: 9px; align-items: flex-start;
   margin: 2px 0 12px; padding: 10px 12px; border-radius: 10px;
   font-size: 12px; line-height: 1.55; color: #0f5f3b; background: #eaf7f0;
}
.vp-paydetail__safe i { margin-top: 2px; font-size: 14px; }
.vp-drawer__form .vp-choice { margin-bottom: 16px; }
.vp-drawer__form .vp-choice__label em { color: #E33023; font-style: normal; }
.vp-drawer__form .vp-choice label { padding: 8px 14px; font-size: 13px; }
.vp-choice--split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vp-choice--split .vp-choice__label { grid-column: 1 / -1; }
.vp-drawer__form .vp-choice--split label { text-align: center; padding: 11px 10px; border-radius: 12px; }
.vp-choice--split label i { margin-right: 6px; }

/* native selects in the drawer, dressed like the inputs */
.vp-drawer__form select {
   width: 100%;
   appearance: none; -webkit-appearance: none;
   border: 1px solid #ebe5e5; border-radius: 12px;
   padding: 13px 40px 13px 46px;
   font-size: 15px; color: #2A1514;
   background: #fefafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a59897' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
   cursor: pointer;
   transition: border-color .3s ease, box-shadow .3s ease;
}
.vp-drawer__form select:focus { outline: none; border-color: #E33023; box-shadow: 0 0 0 4px rgba(227, 48, 35, .12); background-color: #fff; }
.vp-drawer__form select:invalid { color: #a59897; }
.vp-drawer__form select option { color: #2A1514; }
.vp-drawer__form .is-invalid select { border-color: #E33023; background-color: #fff6f5; }

/* card preview: shows the choice back, never a number */
.vp-cardpreview {
   position: relative; display: block;
   aspect-ratio: 1.586; max-width: 320px; margin: 2px auto 18px;
   padding: 18px 20px; border-radius: 16px; color: #fff; overflow: hidden;
   background: linear-gradient(135deg, #1a1f71 0%, #2b3595 55%, #4450c4 100%);
   box-shadow: 0 16px 34px rgba(26, 31, 113, .28);
   transition: background .45s ease, box-shadow .45s ease;
}
.vp-cardpreview::after {
   content: ""; position: absolute; right: -40px; top: -60px;
   width: 200px; height: 200px; border-radius: 50%;
   background: rgba(255, 255, 255, .08);
}
.vp-cardpreview[data-brand="mastercard"] { background: linear-gradient(135deg, #2a2a2e 0%, #3d3d44 55%, #eb5a1b 130%); box-shadow: 0 16px 34px rgba(40, 40, 46, .3); }
.vp-cardpreview[data-brand="amex"] { background: linear-gradient(135deg, #1b6aa8 0%, #2e77bb 55%, #6fb1e6 100%); box-shadow: 0 16px 34px rgba(46, 119, 187, .3); }
.vp-cardpreview__chip {
   position: absolute; left: 20px; top: 22%;
   width: 38px; height: 28px; border-radius: 6px;
   background: linear-gradient(135deg, #f3d488, #c9a24a);
}
.vp-cardpreview__brand { position: absolute; right: 20px; top: 16px; font-weight: 800; font-style: italic; font-size: 18px; letter-spacing: .5px; }
.vp-cardpreview__num { position: absolute; left: 20px; right: 20px; top: 52%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: 1.5px; opacity: .85; }
.vp-cardpreview__foot { position: absolute; left: 20px; right: 20px; bottom: 16px; display: flex; justify-content: space-between; gap: 12px; }
.vp-cardpreview__foot span { min-width: 0; }
.vp-cardpreview__foot span:last-child { text-align: right; flex: none; }
.vp-cardpreview__foot small { display: block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; opacity: .65; }
.vp-cardpreview__foot b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* already has a reference: the 24 hour hold */
.vp-lock {
   display: flex; gap: 12px; align-items: flex-start;
   margin: 16px 0 2px; padding: 14px 16px; border-radius: 16px;
   background: #fff7ed; border: 1px solid #fbd9b8; color: #6b3d12;
}
.vp-lock[hidden] { display: none; }
.vp-lock__icon {
   flex: none; width: 36px; height: 36px; border-radius: 10px;
   display: grid; place-items: center; background: #f3731d; color: #fff; font-size: 16px;
}
.vp-lock b { color: #4a2708; font-size: 14px; }
.vp-lock p { margin: 3px 0 10px; font-size: 12.5px; line-height: 1.55; color: #7a4a1c; }
.vp-lock strong { font-family: ui-monospace, Menlo, Consolas, monospace; color: #4a2708; }
.vp-lock__btn {
   display: inline-flex; align-items: center; gap: 7px;
   border: 0; border-radius: 30px; padding: 7px 14px;
   font-size: 12.5px; font-weight: 600; color: #fff; background: #f3731d; cursor: pointer;
   transition: background .2s ease;
}
.vp-lock__btn:hover { background: #d95f0f; }
.vp-form__btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

@media (max-width: 420px) {
   .vp-cardpreview { padding: 14px 16px; }
   .vp-cardpreview__num { font-size: 13px; letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
   .vp-paydetail { animation: none; }
}

/* order summary */
.vp-summary { border: 1px solid #f1eded; border-radius: 16px; padding: 6px 16px 12px; margin-bottom: 14px; }
.vp-summary div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: 13.5px; color: #665b5a; border-bottom: 1px solid #f6f1f1; }
.vp-summary div b { color: #2A1514; font-weight: 600; text-align: right; white-space: nowrap; }
.vp-summary .vp-summary__total { border-bottom: 0; padding-top: 12px; font-size: 15px; color: #2A1514; font-weight: 700; }
.vp-summary .vp-summary__total b { font-size: 20px; font-weight: 800; color: #E33023; }
.vp-summary p { margin: 2px 0 0; font-size: 12px; color: #a59897; }

/* footer */
.vp-drawer__foot {
   position: sticky; bottom: 0; z-index: 2;
   margin: auto -30px 0; padding: 16px 30px 22px;
   background: #fff;
   border-top: 1px solid #f3eded;
   box-shadow: 0 -12px 24px rgba(255, 255, 255, 0.9);
}
.vp-drawer__foot .vp-form__btn { width: 100%; justify-content: center; }
.vp-drawer__foot .vp-form__btn.is-busy { opacity: .7; pointer-events: none; }
.vp-drawer__foot .vp-form__btn.is-busy svg { animation: vp-nudge .8s ease-in-out infinite; }
@keyframes vp-nudge { 50% { transform: translateX(5px); } }
.vp-drawer__foot .vp-form__note { text-align: center; margin-top: 10px; }
.vp-drawer__foot--split { display: flex; align-items: center; gap: 12px; }
.vp-drawer__foot--split .vp-form__btn { flex: 1; }
.vp-drawer__back {
   flex: none; border: 1px solid #ebe5e5; background: #fff; color: #504746;
   padding: 15px 20px; border-radius: 50px; font-weight: 600; font-size: 14px;
   transition: border-color .25s ease, color .25s ease;
}
.vp-drawer__back:hover { border-color: #E33023; color: #E33023; }

/* ---------- step 3 ---------- */
.vp-drawer__done { flex: 1; padding: 24px 30px 28px; animation: vp-pane-in .35s ease; }
.vp-drawer__done[hidden], .vp-drawer__done [hidden] { display: none !important; }
.vp-done__hero { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.vp-done__hero h4 { margin: 0 0 3px; font-size: 19px; font-weight: 800; color: #2A1514; }
.vp-done__hero p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #665b5a; }
.vp-drawer__tick {
   flex: none; width: 54px; height: 54px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   font-size: 22px; color: #fff; background: linear-gradient(135deg, #1faa6b, #12875a);
   box-shadow: 0 0 0 7px rgba(31, 170, 107, 0.12);
   animation: vp-pop .5s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes vp-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.vp-ref {
   position: relative;
   padding: 16px 18px; margin-bottom: 14px;
   border: 1.5px dashed #E33023; border-radius: 16px;
   background: repeating-linear-gradient(135deg, #fffafa 0 10px, #fff5f4 10px 20px);
}
.vp-ref > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #a59897; }
.vp-ref strong {
   display: block; margin: 4px 0 6px; padding-right: 90px;
   font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
   font-size: 24px; font-weight: 800; letter-spacing: 1px; color: #2A1514; word-break: break-all;
}
.vp-ref small { font-size: 13px; color: #665b5a; }
.vp-ref small b { color: #E33023; font-size: 15px; }
.vp-ref > .vp-copy { position: absolute; top: 16px; right: 16px; }

.vp-copy {
   display: inline-flex; align-items: center; gap: 6px;
   border: 1px solid #ebe5e5; background: #fff; color: #504746;
   padding: 6px 12px; border-radius: 30px; font-size: 12.5px; font-weight: 600;
   transition: all .2s ease;
}
.vp-copy:hover { border-color: #E33023; color: #E33023; }
.vp-copy.is-done { border-color: #1faa6b; background: #1faa6b; color: #fff; }
.vp-copy--icon { padding: 5px 8px; border-color: transparent; background: #f7f2f2; }
.vp-copy--icon span:empty { display: none; }

.vp-warn {
   display: flex; gap: 10px; align-items: flex-start;
   padding: 11px 14px; margin-bottom: 14px; border-radius: 12px;
   background: #fff7e6; color: #7a5410; font-size: 13px; line-height: 1.5;
}
.vp-warn i { color: #d68a00; font-size: 17px; margin-top: 1px; }
.vp-warn p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.vp-warn b { color: #5a3d06; }

.vp-bankcard {
   border-radius: 18px; overflow: hidden; margin-bottom: 16px;
   border: 1px solid #f1eded; box-shadow: 0 16px 36px rgba(42, 21, 20, 0.07);
}
.vp-bankcard__top {
   display: flex; align-items: center; gap: 12px; padding: 14px 16px;
   color: #fff; background: linear-gradient(120deg, #2A1514, #6b1f1a 70%, #E33023);
}
.vp-bankcard__top b { display: block; font-size: 15.5px; }
.vp-bankcard__top small { display: block; font-size: 11.5px; color: rgba(255,255,255,0.65); }
.vp-bankcard__logo {
   width: 38px; height: 38px; border-radius: 10px; flex: none;
   display: inline-flex; align-items: center; justify-content: center;
   background: rgba(255,255,255,0.14); font-size: 17px;
}
.vp-bankcard dl { margin: 0; padding: 4px 16px; }
.vp-bankcard dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f6f1f1; }
.vp-bankcard dl > div:last-child { border-bottom: 0; }
.vp-bankcard dt { font-size: 12.5px; font-weight: 500; color: #8c7f7e; }
.vp-bankcard dd { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #2A1514; text-align: right; }
.vp-bankcard dd .is-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 17px; letter-spacing: 1px; }
.vp-copy--all { display: flex; width: calc(100% - 32px); justify-content: center; margin: 4px 16px 16px; padding: 10px; }

.vp-drawer__next { list-style: none; counter-reset: vpnext; margin: 0 0 16px; padding: 0; }
.vp-drawer__next li {
   counter-increment: vpnext; position: relative;
   padding: 0 0 12px 36px; font-size: 13.5px; line-height: 1.5; color: #665b5a;
}
.vp-drawer__next li::before {
   content: counter(vpnext); position: absolute; left: 0; top: -1px;
   width: 24px; height: 24px; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   font-size: 11.5px; font-weight: 800; color: #E33023; background: #fbeeed;
}
.vp-drawer__next li:not(:last-child)::after {
   content: ""; position: absolute; left: 11.5px; top: 25px; bottom: 1px; width: 1px; background: #f1e3e2;
}
.vp-drawer__next b { color: #2A1514; }

.vp-drawer__wa {
   display: flex; align-items: center; justify-content: center; gap: 10px;
   width: 100%; padding: 14px 20px; margin-bottom: 14px; border-radius: 30px;
   font-weight: 700; color: #fff; background: #25d366;
   box-shadow: 0 12px 26px rgba(37, 211, 102, 0.3);
   transition: transform .25s ease, box-shadow .25s ease;
}
.vp-drawer__wa:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px rgba(37, 211, 102, 0.4); }

.vp-mailnote {
   display: flex; gap: 8px; align-items: flex-start;
   margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
   font-size: 12.5px; line-height: 1.5; color: #0f5e3a; background: #e9f7f0;
}
.vp-mailnote:empty { display: none; }
.vp-mailnote i { margin-top: 2px; }

@media (max-width: 575px) {
   .vp-drawer__head { padding: 18px 18px 18px; }
   .vp-drawer__head h3 { font-size: 22px; margin-bottom: 12px; }
   .vp-drawer__form.vp-form { padding: 4px 18px 0; }
   .vp-drawer__foot { margin: auto -18px 0; padding: 14px 18px 18px; }
   .vp-drawer__row { grid-template-columns: 1fr; }
   .vp-drawer__steps li { font-size: 11px; }
   .vp-drawer__done { padding: 20px 18px 24px; }
   .vp-ref strong { font-size: 20px; padding-right: 0; }
   .vp-ref > .vp-copy { position: static; margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
   .vp-drawer__panel, .vp-drawer__backdrop, .vp-drawer__pane, .vp-drawer__done, .vp-drawer__tick { transition: none; animation: none; }
}

/* ---------- Navbar: sign in / my account ----------
   Sits before "Contact Us". White on the transparent hero header, dark
   once the header turns sticky and white. */
.vp-navacct {
   display: inline-flex; align-items: center; gap: 8px;
   margin-right: 14px; padding: 9px 16px; border-radius: 30px;
   font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
   color: #fff; border: 1px solid rgba(255, 255, 255, .35);
   transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.vp-navacct i { font-size: 17px; }
.vp-navacct:hover { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
.vp-navacct.is-in i { color: #E33023; }
.header-sticky .vp-navacct { color: #140B0B; border-color: #e6e1e0; }
.header-sticky .vp-navacct:hover { color: #E33023; background: #fdf3f2; border-color: #f2c4c0; }
@media (max-width: 575px) {
   .vp-navacct { padding: 8px 10px; margin-right: 10px; }
}

/* ---------- Course page: enrolling needs an account ---------- */
.vp-enrol__acct {
   display: flex; gap: 10px; align-items: flex-start;
   margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
   font-size: 13.5px; line-height: 1.55; color: #5F6368;
   background: #faf8f8; border: 1px solid #efecec;
}
.vp-enrol__acct i { color: #E33023; margin-top: 3px; }
.vp-enrol__acct a { color: #E33023; font-weight: 600; text-decoration: underline; }
.vp-enrol__held {
   display: flex; gap: 10px; align-items: center;
   margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
   font-size: 14px; color: #0f5e3a; background: #e9f7f0; border: 1px solid #bfe6d0;
}
.vp-enrol__held b { display: block; }

/* Who is enrolling, in the drawer: taken from the account, not typed. */
.vp-drawer__who {
   display: flex; align-items: center; gap: 12px;
   padding: 12px 14px; margin-bottom: 16px; border-radius: 12px;
   background: #faf8f8; border: 1px solid #efecec;
}
.vp-drawer__who-av {
   flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
   display: inline-flex; align-items: center; justify-content: center;
   color: #fff; font-weight: 700; font-size: 14px;
}
.vp-drawer__who div { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.vp-drawer__who b { display: block; font-size: 15px; color: #140B0B; }
.vp-drawer__who small { display: block; font-size: 13px; color: #5F6368; overflow: hidden; text-overflow: ellipsis; }
.vp-drawer__who a { flex: 0 0 auto; font-size: 12.5px; color: #E33023; font-weight: 600; }
.vp-drawer__acctlink { margin-top: 10px; }

/* =====================================================================
   Insights — listing cards (blog-list.php) and article body
   (blog-details.php). Reuses vp-hero / vp-sec / tp-cta from the other
   inner pages; only the card grid and prose need their own rules.
   ===================================================================== */
.vp-blog {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 30px;
}
.vp-blog__card {
   display: flex;
   flex-direction: column;
   border-radius: 16px;
   overflow: hidden;
   background: #fff;
   border: 1px solid #f0e6e5;
   box-shadow: 0 2px 10px rgba(42, 21, 20, 0.04);
   text-decoration: none;
   color: inherit;
   transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.vp-blog__card:hover, .vp-blog__card:focus-visible {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px rgba(42, 21, 20, 0.12);
   color: inherit;
}
/* Header band — a category-keyed gradient stands in for a hero image, so a
   post needs no photo asset to look finished. */
.vp-blog__band {
   height: 120px;
   display: flex;
   align-items: flex-end;
   padding: 18px 22px;
   background: linear-gradient(135deg, #E33023 0%, #b3123a 100%);
}
.vp-blog__card--pentest .vp-blog__band    { background: linear-gradient(135deg, #E33023 0%, #7a0f1f 100%); }
.vp-blog__card--incident .vp-blog__band   { background: linear-gradient(135deg, #b3123a 0%, #4a0410 100%); }
.vp-blog__card--compliance .vp-blog__band { background: linear-gradient(135deg, #d26013 0%, #7a2f08 100%); }
.vp-blog__card--awareness .vp-blog__band  { background: linear-gradient(135deg, #f3731d 0%, #b3123a 100%); }
.vp-blog__card--cloud .vp-blog__band      { background: linear-gradient(135deg, #d26013 0%, #E33023 100%); }
.vp-blog__card--soc .vp-blog__band        { background: linear-gradient(135deg, #7a0f1f 0%, #E33023 100%); }
.vp-blog__cat {
   font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
   color: #fff;
   background: rgba(0,0,0,0.22);
   padding: 5px 12px;
   border-radius: 999px;
}
.vp-blog__body {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   padding: 24px 24px 26px;
}
.vp-blog__meta {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px;
   color: #8f7e7d;
   margin-bottom: 12px;
}
.vp-blog__meta--hero { justify-content: center; color: #cbb8b6; margin-top: 8px; }
.vp-blog__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .55; }
.vp-blog__title {
   font-size: 22px;
   line-height: 1.3;
   color: #2A1514;
   margin: 0 0 12px;
}
.vp-blog__excerpt {
   font-size: 15.5px;
   line-height: 1.65;
   color: #6f6261;
   margin: 0 0 20px;
}
.vp-blog__more {
   margin-top: auto;
   font-size: 14px; font-weight: 600;
   color: #E33023;
   display: inline-flex; align-items: center; gap: 8px;
}
.vp-blog__card:hover .vp-blog__more i { transform: translateX(4px); }
.vp-blog__more i { transition: transform .3s ease; }

/* Article prose. Kept narrow (the col-xl-8 wrapper) for a comfortable
   measure, with generous spacing so a long read stays scannable. */
.vp-article { font-size: 17.5px; line-height: 1.8; color: #453433; }
.vp-article > p { margin: 0 0 22px; }
.vp-article h2 {
   font-size: 27px; line-height: 1.3; color: #2A1514;
   margin: 44px 0 16px;
}
.vp-article h3 {
   font-size: 21px; line-height: 1.35; color: #2A1514;
   margin: 36px 0 14px;
}
.vp-article ul, .vp-article ol { margin: 0 0 22px; padding-left: 22px; }
.vp-article li { margin-bottom: 10px; }
.vp-article strong { color: #2A1514; }
.vp-article code {
   font-size: 0.9em;
   background: #f6eeee;
   color: #b3123a;
   padding: 2px 7px;
   border-radius: 6px;
}
.vp-article__back { margin-top: 40px; }
.vp-article__back a {
   font-size: 15px; font-weight: 600;
   color: #E33023;
   display: inline-flex; align-items: center; gap: 8px;
}
@media (max-width: 767px) {
   .vp-blog { grid-template-columns: 1fr; }
   .vp-article { font-size: 16.5px; }
   .vp-article h2 { font-size: 23px; }
}