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

/* ---------- 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 ---------- */
.vp-price {
   position: relative;
   height: 100%;
   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; }
.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: 16px;
   max-width: 480px;
   margin-left: auto;
}
.vp-collage img {
   width: 100%; height: 190px; object-fit: cover;
   border-radius: 16px;
   border: 1px solid rgba(255,255,255,0.12);
   box-shadow: 0 22px 45px rgba(0,0,0,0.45);
}
.vp-collage img:nth-child(1) { transform: translateY(-16px) rotate(-2deg); }
.vp-collage img:nth-child(2) { transform: translateY(12px) rotate(2deg); }
.vp-collage img:nth-child(3) { transform: translateY(-10px) rotate(2deg); }
.vp-collage img:nth-child(4) { transform: translateY(16px) rotate(-2deg); }

/* ---------- 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: 420px; margin: 40px auto 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 img { height: 140px; }
}

/* ---------- 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; }
}

/* ---------- Team: leader portraits ---------- */
/* Portrait art is drawn to fill the 180px avatar circle, so it must not use the
   theme's default nudge/crop meant for the cut-out placeholder PNGs. The
   luminosity -> full-colour hover treatment is inherited from the theme. */
.tp-team-item .tp-team-img--photo {
   background-color: #F5A9A4;
}
.tp-team-item .tp-team-img--photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50%;
   transform: none;
   transition: transform .4s ease;
}
.tp-team-item:hover .tp-team-img--photo img {
   transform: scale(1.06);
}

/* =====================================================================
   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: 22px 18px 16px;
   background: linear-gradient(180deg, rgba(15, 10, 10,0) 0%, rgba(15, 10, 10,0.82) 38%, rgba(15, 10, 10,0.94) 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.6);
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   margin-bottom: 9px;
}
.vp-course__peek ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vp-course__peek li {
   padding: 5px 11px;
   border-radius: 20px;
   background: rgba(255,255,255,0.14);
   border: 1px solid rgba(255,255,255,0.2);
   color: #fff;
   font-size: 11.5px;
   font-weight: 500;
}
/* 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: 460px; }
.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-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. */
@media only screen and (min-width: 1200px) {
   #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 4px; }
   #header-sticky .header-bottom__main-menu nav > ul > li > a {
      padding-left: 7px; padding-right: 7px;
   }
}

/* =====================================================================
   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; }
}

/* ---------- Enrolment order summary ---------- */
.vp-order {
   margin: 0 0 26px;
   padding: 18px 20px;
   border: 1px solid var(--edu-line);
   border-radius: 16px;
   background: #fff;
}
.vp-order__row {
   display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
   padding: 7px 0;
}
.vp-order__row + .vp-order__row { border-top: 1px solid var(--edu-line); }
.vp-order__label { color: #7d716f; font-size: 13.5px; }
.vp-order__row b { color: var(--edu-ink); font-size: 15px; font-weight: 600; text-align: right; }
.vp-order__row--total b { font-size: 22px; font-weight: 700; }
.vp-order__note { margin: 8px 0 0; color: #988b8a; font-size: 12px; }
.vp-order__note:empty { display: none; }

/* ---------- Slim hero for the checkout pages ----------
   vp-hero--courses reserves 168px below the fold for the ticker rail
   that overlaps it. A form page has no rail, so that reservation is
   just a void that pushes the form off the screen. */
.vp-hero--slim { padding: 150px 0 60px; margin-bottom: 0; }
.vp-hero--slim .vp-hero__title { margin-bottom: 10px; }
.vp-hero--slim .vp-hero__text { margin-bottom: 0; max-width: 620px; }
@media (max-width: 991px) { .vp-hero--slim { padding: 128px 0 48px; } }

/* The checkout column: form beside the summary, summary in view while
   the form is filled in. */
.vp-sec--checkout { padding: 54px 0 90px; }
@media (min-width: 992px) {
   .vp-checkout__aside { position: sticky; top: 108px; }
}
.vp-order__reassure {
   display: flex; align-items: flex-start; gap: 9px;
   margin: 14px 2px 0; color: #7d716f; font-size: 12.5px; line-height: 1.55;
}
.vp-order__reassure i { margin-top: 2px; color: var(--acc); }

/* 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; }
}

/* =====================================================================
   Bank transfer instructions — bank-transfer.php
   ---------------------------------------------------------------------
   The reference is given its own block above the accounts because it is
   the part people forget, and a payment without one costs the office
   more time than the payment is worth.
   ===================================================================== */
.vp-transfer__ref {
   display: flex;
   align-items: center;
   gap: 24px;
   margin-bottom: 64px;
   padding: 26px 30px;
   border: 1px solid var(--tp-border-1, #faeeed);
   border-left: 4px solid var(--tp-theme-1, #f43325);
   border-radius: 16px;
   background: #fdf7f6;
}
.vp-transfer__reflabel {
   display: block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--tp-grey-5, #888b95);
}
.vp-transfer__refcode {
   display: block;
   margin: 6px 0 8px;
   font-size: 30px;
   line-height: 1.1;
   font-weight: 800;
   letter-spacing: 1px;
   color: var(--tp-heading-primary, #1c0e0d);
   font-variant-numeric: tabular-nums;
}
.vp-transfer__ref p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--tp-text-body, #5f6368); }

/* Copy buttons — an account number is 12 digits nobody should retype. */
.vp-btn-copy {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 11px 18px;
   border: 1px solid var(--tp-border-2, #efecec);
   border-radius: 10px;
   background: #fff;
   color: var(--tp-heading-primary, #1c0e0d);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.vp-btn-copy:hover { background: var(--tp-theme-1, #f43325); border-color: var(--tp-theme-1, #f43325); color: #fff; }
.vp-btn-copy.is-done { background: #eaf7ef; border-color: #b9e3c9; color: #1e9e57; }
.vp-btn-copy--sm { padding: 5px 9px; font-size: 12px; border-radius: 8px; }

/* The accounts themselves */
.vp-banks {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: 22px;
   margin-bottom: 64px;
}
.vp-bank {
   padding: 24px 26px;
   border: 1px solid var(--tp-border-2, #efecec);
   border-radius: 16px;
   background: #fff;
   transition: border-color .25s ease, box-shadow .25s ease;
}
.vp-bank:hover { border-color: #f2d9d6; box-shadow: 0 18px 40px rgba(42, 21, 20, .07); }
.vp-bank__name {
   margin: 0 0 16px;
   padding-bottom: 14px;
   border-bottom: 1px solid var(--tp-border-2, #efecec);
   font-size: 17px;
   font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-bank__rows { margin: 0; }
.vp-bank__rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.vp-bank__rows dt { font-size: 13.5px; color: var(--tp-grey-5, #888b95); }
.vp-bank__rows dd {
   margin: 0;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--tp-heading-primary, #1c0e0d);
   text-align: right;
}
.vp-bank__no { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.vp-bank__note { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--tp-grey-2, #9a9da7); }

/* What happens after the money is sent */
.vp-transfer__next {
   padding: 30px 34px;
   border: 1px solid var(--tp-border-2, #efecec);
   border-radius: 16px;
   background: #fbf6f6;
}
.vp-transfer__next h3 { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: var(--tp-heading-primary, #1c0e0d); }
.vp-transfer__next ol { margin: 0; padding-left: 20px; }
.vp-transfer__next li { margin-bottom: 10px; font-size: 15px; line-height: 1.7; color: var(--tp-text-body, #5f6368); }
.vp-transfer__help { margin: 16px 0 0; font-size: 14px; color: var(--tp-grey-5, #888b95); }
.vp-transfer__empty { text-align: center; font-size: 15px; color: var(--tp-text-body, #5f6368); margin-bottom: 60px; }

.vp-transfer__done {
   display: flex;
   gap: 20px;
   padding: 30px 34px;
   border: 1px solid #cfe9da;
   border-radius: 16px;
   background: #f2fbf6;
}
.vp-transfer__done i { font-size: 30px; color: #1e9e57; }
.vp-transfer__done h2 { margin: 0 0 8px; font-size: 21px; font-weight: 700; color: var(--tp-heading-primary, #1c0e0d); }
.vp-transfer__done p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tp-text-body, #5f6368); }

@media (max-width: 767px) {
   .vp-transfer__ref { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; }
   .vp-transfer__refcode { font-size: 25px; }
   .vp-banks { grid-template-columns: minmax(0, 1fr); }
   .vp-bank__rows > div { flex-direction: column; gap: 2px; }
   .vp-bank__rows dd { text-align: left; }
   .vp-transfer__next { padding: 24px 22px; }
}

/* The same blocks inside the enrolment column, which is narrower than a
   full container — two accounts abreast at most, and the reference block
   stacks sooner. */
.vp-transfer__heading {
   margin: 0 0 18px;
   font-size: 18px;
   font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-banks--inline { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-bottom: 40px; }
.vp-banks--inline .vp-bank { padding: 18px 20px; }
.vp-banks--inline .vp-bank__name { font-size: 15px; margin-bottom: 12px; padding-bottom: 10px; }
.vp-banks--inline .vp-bank__rows dt { font-size: 12.5px; }
.vp-banks--inline .vp-bank__rows dd { font-size: 13.5px; }
.vp-ctc__form .vp-transfer__ref { margin-bottom: 36px; }
.vp-ctc__form .vp-transfer__refcode { font-size: 26px; }
@media (max-width: 991px) {
   .vp-banks--inline { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   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; }
}

/* =====================================================================
   Checkout — checkout.php
   ---------------------------------------------------------------------
   This used to be a blank page that submitted itself to PayHere after
   700ms, so nobody ever read it. It is now a review step: what you are
   buying on the left, what it costs and how to pay on the right, with
   the bank-transfer route kept in view rather than hidden behind a
   back button.
   ===================================================================== */
.vp-checkout__panel,
.vp-checkout__pay {
   height: 100%;
   padding: 32px 34px;
   border: 1px solid var(--tp-border-2, #efecec);
   border-radius: 20px;
   background: #fff;
}
.vp-checkout__pay {
   background: linear-gradient(160deg, #fdf7f6 0%, #ffffff 60%);
   box-shadow: 0 20px 50px rgba(42, 21, 20, .06);
}

.vp-checkout__title {
   margin: 0 0 22px;
   font-size: 20px;
   font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-checkout__eyebrow {
   display: block;
   margin-bottom: 6px;
   font-size: 11.5px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--tp-grey-5, #888b95);
}
.vp-checkout__course {
   margin-bottom: 22px;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--tp-border-2, #efecec);
}
.vp-checkout__course strong {
   font-size: 19px;
   line-height: 1.35;
   font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}

.vp-checkout__rows { margin: 0 0 20px; }
.vp-checkout__rows > div {
   display: flex;
   justify-content: space-between;
   gap: 18px;
   padding: 9px 0;
}
.vp-checkout__rows dt { font-size: 14px; color: var(--tp-grey-5, #888b95); }
.vp-checkout__rows dd {
   margin: 0;
   font-size: 14.5px;
   font-weight: 600;
   color: var(--tp-heading-primary, #1c0e0d);
   text-align: right;
   word-break: break-word;
}
.vp-checkout__ref { font-variant-numeric: tabular-nums; letter-spacing: .5px; }

.vp-checkout__amend {
   margin: 0;
   padding-top: 18px;
   border-top: 1px solid var(--tp-border-2, #efecec);
   font-size: 13.5px;
   line-height: 1.7;
   color: var(--tp-grey-5, #888b95);
}

/* The amount is the one number on the page that matters, so it is the
   only thing set at display size. */
.vp-checkout__total {
   margin: 0 0 4px;
   font-size: 18px;
   color: var(--tp-text-body, #5f6368);
}
.vp-checkout__total strong {
   font-size: 38px;
   line-height: 1.1;
   font-weight: 800;
   letter-spacing: -1px;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-checkout__once {
   margin: 0 0 22px;
   font-size: 13px;
   color: var(--tp-grey-2, #9a9da7);
}
.vp-checkout__pay .vp-form__btn { width: 100%; justify-content: center; }

.vp-checkout__secure,
.vp-checkout__sandbox {
   display: flex;
   align-items: flex-start;
   gap: 9px;
   margin: 16px 0 0;
   font-size: 12.5px;
   line-height: 1.6;
   color: var(--tp-grey-5, #888b95);
}
.vp-checkout__secure i { color: var(--tp-common-green-2, #21b641); margin-top: 2px; }
.vp-checkout__sandbox {
   padding: 9px 12px;
   border-radius: 9px;
   background: #fff8e6;
   color: #8a6410;
}
.vp-checkout__sandbox i { margin-top: 2px; }

/* The transfer route stays visible. Someone whose card is refused should
   not have to go looking for the alternative. */
.vp-checkout__alt {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 15px 18px;
   border: 1px solid var(--tp-border-2, #efecec);
   border-radius: 14px;
   background: #fff;
   color: var(--tp-heading-primary, #1c0e0d);
   transition: border-color .2s ease, box-shadow .2s ease;
}
.vp-checkout__alt:hover { border-color: #f2d9d6; box-shadow: 0 12px 26px rgba(42, 21, 20, .07); }
.vp-checkout__alt > i:first-child { font-size: 19px; color: var(--tp-theme-1, #f43325); }
.vp-checkout__alt span { flex: 1; font-size: 13px; line-height: 1.5; color: var(--tp-grey-5, #888b95); }
.vp-checkout__alt strong { display: block; font-size: 14.5px; color: var(--tp-heading-primary, #1c0e0d); }
.vp-checkout__alt-go { font-size: 13px; color: var(--tp-grey-2, #9a9da7); }
.vp-checkout__pay .vp-pay-or { margin: 22px 0; }
.vp-checkout__pay .vp-pay-or span { background: #fdf9f8; }

@media (max-width: 991px) {
   .vp-checkout__panel, .vp-checkout__pay { padding: 26px 22px; }
   .vp-checkout__total strong { font-size: 32px; }
}
@media (max-width: 575px) {
   .vp-checkout__rows > div { flex-direction: column; gap: 2px; }
   .vp-checkout__rows dd { text-align: left; }
}

/* ---------- Service cards without a "Learn More" link ----------
   The theme parks the card content 47px low so the link sits out of
   sight until hover. With the link gone that just drops the text past
   the padding and makes it jump on hover, so sit the content still. */
.tp-service-sm-content,
.tp-service-sm-item:hover .tp-service-sm-content { margin-bottom: 0; }

/* =====================================================================
   Enrolment confirmation — the page a student sits on to pay.

   It used to be one long column: a reference, then seven near-identical
   bank cards, then a list of next steps. The account name was the same
   on all seven, so the page repeated it seven times and buried the one
   thing that actually differs — the account number. This lays the same
   information out as a progress rail, a payment ticket, and one compact
   row per bank.
   ===================================================================== */

/* ---------- Progress rail ---------- */
.vp-steps {
   display: flex; align-items: center; gap: 0;
   list-style: none; margin: 0 0 30px; padding: 0;
}
.vp-steps__item {
   display: flex; align-items: center; gap: 10px;
   flex: 1 1 0; min-width: 0;
   font-size: 13.5px; font-weight: 600; color: var(--tp-grey-2, #9a9da7);
}
.vp-steps__item + .vp-steps__item::before {
   content: ""; flex: 1 1 auto; height: 2px; min-width: 12px;
   margin-right: 10px; border-radius: 2px; background: #efe8e7;
}
.vp-steps__item.is-done + .vp-steps__item::before,
.vp-steps__item.is-current + .vp-steps__item::before { background: #f6d8d4; }
.vp-steps__dot {
   flex: 0 0 auto;
   display: inline-flex; align-items: center; justify-content: center;
   width: 26px; height: 26px; border-radius: 50%;
   background: #fff; border: 1.5px solid #efe8e7;
   font-size: 12px; font-weight: 700; color: var(--tp-grey-2, #9a9da7);
}
.vp-steps__item.is-done .vp-steps__dot {
   background: #eaf7ef; border-color: #b9e3c9; color: #1e9e57;
}
.vp-steps__item.is-current .vp-steps__dot {
   background: var(--tp-theme-1, #f43325); border-color: var(--tp-theme-1, #f43325); color: #fff;
   box-shadow: 0 0 0 4px rgba(244, 51, 37, .13);
}
.vp-steps__item.is-done,
.vp-steps__item.is-current { color: var(--tp-heading-primary, #1c0e0d); }
.vp-steps__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Confirmation heading ---------- */
.vp-paynow__head { margin-bottom: 26px; }
.vp-paynow__badge {
   display: inline-flex; align-items: center; gap: 7px;
   padding: 5px 12px; margin-bottom: 14px;
   border-radius: 100px; background: #eaf7ef; color: #1e9e57;
   font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.vp-paynow__head h2 {
   margin: 0 0 10px; font-size: 32px; line-height: 1.2;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-paynow__head p {
   margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--tp-text-body, #5f6368);
}
.vp-paynow__head strong { color: var(--tp-heading-primary, #1c0e0d); font-weight: 600; }

/* ---------- Amount + reference ---------- */
.vp-ticket {
   display: grid; grid-template-columns: auto 1fr; gap: 4px 34px;
   padding: 24px 26px; margin-bottom: 30px;
   border-radius: 18px; border: 1px solid #f2d9d6;
   background: linear-gradient(135deg, #fff6f5 0%, #fffbfa 100%);
}
.vp-ticket__label {
   display: block; margin-bottom: 5px;
   font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
   color: var(--tp-grey-5, #888b95);
}
.vp-ticket__amount strong {
   display: block; font-size: 30px; line-height: 1.1; font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d); font-variant-numeric: tabular-nums;
}
.vp-ticket__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.vp-ticket__ref .vp-ticket__label { flex: 1 0 100%; margin-bottom: 0; }
.vp-ticket__ref strong {
   font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: .5px;
   color: var(--tp-theme-1, #f43325); font-variant-numeric: tabular-nums;
}
.vp-ticket__warn {
   grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px;
   margin: 16px 0 0; padding-top: 15px; border-top: 1px dashed #f2d9d6;
   font-size: 13.5px; line-height: 1.6; color: var(--tp-text-body, #5f6368);
}
.vp-ticket__warn i { margin-top: 2px; color: var(--tp-theme-1, #f43325); }

/* ---------- Bank accounts ---------- */
.vp-accts__head { margin-bottom: 16px; }
.vp-accts__head h3 {
   margin: 0 0 8px; font-size: 19px; font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-accts__holder {
   display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
   margin: 0; font-size: 14px; color: var(--tp-text-body, #5f6368);
}
.vp-accts__holder strong {
   color: var(--tp-heading-primary, #1c0e0d); font-weight: 600; letter-spacing: .3px;
}
.vp-acct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vp-acct {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
   align-items: center; gap: 14px 18px;
   padding: 14px 18px;
   border: 1px solid var(--tp-border-2, #efecec); border-radius: 14px;
   background: #fff; transition: border-color .2s ease, box-shadow .2s ease;
}
.vp-acct:hover { border-color: #f2d9d6; box-shadow: 0 12px 28px rgba(42, 21, 20, .06); }
.vp-acct__bank { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vp-acct__initial {
   flex: 0 0 auto;
   display: inline-flex; align-items: center; justify-content: center;
   width: 36px; height: 36px; border-radius: 10px;
   background: #fdf1ef; color: var(--tp-theme-1, #f43325);
   font-size: 15px; font-weight: 700;
}
.vp-acct__bank b {
   display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-acct__bank small { display: block; font-size: 12.5px; color: var(--tp-grey-2, #9a9da7); }
.vp-acct__nolabel {
   display: block; font-size: 11px; font-weight: 700;
   letter-spacing: .05em; text-transform: uppercase; color: var(--tp-grey-5, #888b95);
}
.vp-acct__no span:not(.vp-acct__nolabel) {
   font-size: 16px; font-weight: 600; letter-spacing: .4px;
   font-variant-numeric: tabular-nums; color: var(--tp-heading-primary, #1c0e0d);
}
.vp-acct__actions { display: flex; gap: 8px; justify-content: flex-end; }
.vp-acct__name { grid-column: 1 / -1; font-size: 13.5px; color: var(--tp-text-body, #5f6368); }

/* ---------- Aside: recap + next steps ---------- */
.vp-recap {
   padding: 24px 26px; margin-bottom: 20px;
   border-radius: 18px; border: 1px solid var(--tp-border-2, #efecec); background: #fff;
   box-shadow: 0 20px 50px rgba(42, 21, 20, .05);
}
.vp-recap__eyebrow {
   display: block; margin-bottom: 6px;
   font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
   color: var(--tp-grey-5, #888b95);
}
.vp-recap h3 {
   margin: 0 0 18px; font-size: 19px; line-height: 1.35; font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-recap__rows { margin: 0; }
.vp-recap__rows > div {
   display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
   padding: 9px 0; border-top: 1px solid #f6f2f1;
}
.vp-recap__rows dt { font-size: 13.5px; color: var(--tp-grey-5, #888b95); }
.vp-recap__rows dd {
   margin: 0; font-size: 14.5px; font-weight: 600; text-align: right;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-recap__mono { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.vp-recap__total dd { font-size: 20px; color: var(--tp-theme-1, #f43325); }
.vp-recap__status {
   display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
   padding: 6px 13px; border-radius: 100px;
   background: #fff8ec; color: #a9741d; font-size: 12.5px; font-weight: 600;
}
.vp-next {
   padding: 24px 26px;
   border-radius: 18px; border: 1px solid var(--tp-border-2, #efecec); background: #fdf9f8;
}
.vp-next h3 {
   margin: 0 0 16px; font-size: 17px; font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-next__list { list-style: none; margin: 0; padding: 0; counter-reset: vpnext; }
.vp-next__list li {
   position: relative; counter-increment: vpnext;
   padding: 0 0 18px 34px;
}
.vp-next__list li::before {
   content: counter(vpnext);
   position: absolute; left: 0; top: 0;
   display: inline-flex; align-items: center; justify-content: center;
   width: 22px; height: 22px; border-radius: 50%;
   background: #fff; border: 1.5px solid #f2d9d6;
   font-size: 11.5px; font-weight: 700; color: var(--tp-theme-1, #f43325);
}
/* The rail joining the numbers, stopping at the last one. */
.vp-next__list li:not(:last-child)::after {
   content: ""; position: absolute; left: 10.5px; top: 26px; bottom: 6px;
   width: 1.5px; background: #f4e5e3;
}
.vp-next__list li:last-child { padding-bottom: 0; }
.vp-next__list b {
   display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-next__list span { display: block; font-size: 13.5px; line-height: 1.65; color: var(--tp-text-body, #5f6368); }
.vp-next__help {
   margin: 16px 0 0; padding-top: 15px; border-top: 1px solid #f0e8e7;
   font-size: 13px; line-height: 1.6; color: var(--tp-grey-5, #888b95);
}

@media (max-width: 991px) {
   .vp-paynow__head h2 { font-size: 27px; }
}
@media (max-width: 575px) {
   /* The rail loses its connectors and its labels before it loses the
      steps — knowing which of three you are on is the point of it. */
   .vp-steps { gap: 8px; }
   .vp-steps__item + .vp-steps__item::before { min-width: 8px; margin-right: 8px; }
   .vp-steps__label { font-size: 12px; }
   .vp-ticket { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
   .vp-ticket__amount strong { font-size: 26px; }
   .vp-ticket__ref strong { font-size: 22px; }
   .vp-acct { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; }
   .vp-acct__actions { justify-content: flex-start; }
   .vp-recap, .vp-next { padding: 20px; }
}

/* Stacked, the form wants the order summary first — you check what you
   are buying before you fill anything in. The confirmation is the other
   way round: the bank details are the reason you are on the page, and
   the recap and next steps belong after them. */
/* Bootstrap's order utilities carry !important, so beating them takes
   the same. */
@media (max-width: 991px) {
   .vp-checkout-row--done > .col-lg-7 { order: 1 !important; }
   .vp-checkout-row--done > .col-lg-5 { order: 2 !important; }
}

/* ---------- Bank picker ---------- */
.vp-picker__tabs {
   display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
}
.vp-picker__tab {
   display: inline-flex; align-items: center; gap: 9px;
   padding: 8px 14px 8px 8px;
   border: 1px solid var(--tp-border-2, #efecec); border-radius: 100px;
   background: #fff; cursor: pointer;
   font-size: 13.5px; font-weight: 600; color: var(--tp-text-body, #5f6368);
   transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.vp-picker__tab:hover { border-color: #f2d9d6; color: var(--tp-heading-primary, #1c0e0d); }
.vp-picker__tab.is-active {
   border-color: var(--tp-theme-1, #f43325);
   background: #fff6f5; color: var(--tp-heading-primary, #1c0e0d);
   box-shadow: 0 0 0 3px rgba(244, 51, 37, .1);
}
.vp-picker__initial {
   display: inline-flex; align-items: center; justify-content: center;
   width: 26px; height: 26px; border-radius: 50%;
   background: #fdf1ef; color: var(--tp-theme-1, #f43325);
   font-size: 12.5px; font-weight: 700;
}
.vp-picker__tab.is-active .vp-picker__initial {
   background: var(--tp-theme-1, #f43325); color: #fff;
}
/* Panels are all open until the script closes them, so the details are
   still readable with no JavaScript at all. */
.vp-picker.is-enhanced .vp-picker__panel { display: none; }
.vp-picker.is-enhanced .vp-picker__panel.is-active { display: block; }
.vp-picker__panel {
   padding: 22px 24px; margin-bottom: 12px;
   border: 1px solid var(--tp-border-2, #efecec); border-radius: 16px;
   background: #fff; box-shadow: 0 14px 34px rgba(42, 21, 20, .05);
}
.vp-acctd { margin: 0; }
.vp-acctd > div {
   display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
   padding: 10px 0; border-top: 1px solid #f6f2f1;
}
.vp-acctd > div:first-child { border-top: 0; padding-top: 0; }
.vp-acctd dt { font-size: 13px; color: var(--tp-grey-5, #888b95); }
.vp-acctd dd {
   display: inline-flex; align-items: center; gap: 10px;
   margin: 0; text-align: right;
   font-size: 14.5px; font-weight: 600; color: var(--tp-heading-primary, #1c0e0d);
}
.vp-acctd__key dd {
   font-size: 17px; letter-spacing: .4px; font-variant-numeric: tabular-nums;
}
.vp-acctd__note { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--tp-grey-2, #9a9da7); }
.vp-acctd__copyall {
   width: 100%; justify-content: center; margin-top: 16px; padding: 11px 16px;
}

/* ---------- Slip upload ---------- */
.vp-slip {
   margin-top: 30px; padding: 26px;
   border: 1px solid var(--tp-border-2, #efecec); border-radius: 18px;
   background: #fdf9f8;
}
.vp-slip__head h3 {
   margin: 0 0 7px; font-size: 19px; font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-slip__head p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.7; color: var(--tp-text-body, #5f6368); }
.vp-slip__ok, .vp-slip__err {
   display: flex; align-items: flex-start; gap: 9px;
   margin: 0 0 16px; padding: 12px 15px; border-radius: 12px;
   font-size: 14px; line-height: 1.6;
}
.vp-slip__ok  { background: #eaf7ef; border: 1px solid #b9e3c9; color: #17794a; }
.vp-slip__err { background: #fdeeec; border: 1px solid #f6cdc8; color: #b3261e; }
.vp-slip__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.vp-slip__list li {
   display: flex; align-items: center; gap: 12px;
   padding: 11px 14px; border-radius: 12px;
   border: 1px solid var(--tp-border-2, #efecec); background: #fff;
}
.vp-slip__icon {
   display: inline-flex; align-items: center; justify-content: center;
   width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px;
   background: #eaf7ef; color: #1e9e57; font-size: 15px;
}
.vp-slip__meta { flex: 1 1 auto; min-width: 0; }
.vp-slip__meta b {
   display: block; font-size: 14px; font-weight: 600; color: var(--tp-heading-primary, #1c0e0d);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-slip__meta small { display: block; font-size: 12.5px; color: var(--tp-grey-2, #9a9da7); }
.vp-slip__view {
   flex: 0 0 auto; font-size: 13px; font-weight: 600;
   color: var(--tp-theme-1, #f43325); text-decoration: underline;
}
.vp-drop {
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   gap: 5px; padding: 28px 20px; margin-bottom: 14px;
   border: 1.5px dashed #e6d7d5; border-radius: 14px;
   background: #fff; cursor: pointer; text-align: center;
   transition: border-color .2s ease, background .2s ease;
}
.vp-drop:hover, .vp-drop.is-over { border-color: var(--tp-theme-1, #f43325); background: #fff6f5; }
.vp-drop.has-file { border-style: solid; border-color: #b9e3c9; background: #f6fcf8; }
.vp-drop i { font-size: 24px; color: var(--tp-theme-1, #f43325); }
.vp-drop b {
   font-size: 14.5px; font-weight: 600; color: var(--tp-heading-primary, #1c0e0d);
   max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vp-drop small { font-size: 12.5px; color: var(--tp-grey-2, #9a9da7); }
/* Hidden from sight but not from the keyboard: the label is the target,
   and clicking it still opens the picker. */
.vp-drop input[type="file"] {
   position: absolute; width: 1px; height: 1px;
   opacity: 0; overflow: hidden; clip: rect(0 0 0 0);
}
.vp-drop:focus-within { border-color: var(--tp-theme-1, #f43325); box-shadow: 0 0 0 3px rgba(244, 51, 37, .12); }
.vp-slip__form .vp-form__btn { width: 100%; justify-content: center; }

/* ---------- The link they keep ---------- */
.vp-keep {
   display: flex; align-items: flex-start; gap: 16px;
   margin-top: 20px; padding: 20px 22px;
   border: 1px dashed #e6d7d5; border-radius: 16px; background: #fff;
}
.vp-keep b {
   display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
   font-size: 14.5px; font-weight: 600; color: var(--tp-heading-primary, #1c0e0d);
}
.vp-keep b i { color: var(--tp-theme-1, #f43325); }
.vp-keep p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.65; color: var(--tp-text-body, #5f6368); }
.vp-keep code {
   display: block; padding: 9px 12px; border-radius: 9px;
   background: #fbf6f6; color: var(--tp-grey-5, #888b95);
   font-size: 12.5px; word-break: break-all;
}
.vp-keep > div { flex: 1 1 auto; min-width: 0; }
.vp-keep > .vp-btn-copy { flex: 0 0 auto; }

@media (max-width: 575px) {
   .vp-picker__panel { padding: 18px; }
   .vp-acctd > div { flex-direction: column; gap: 3px; align-items: flex-start; }
   .vp-acctd dd { text-align: left; }
   .vp-slip { padding: 20px; }
   .vp-keep { flex-direction: column; gap: 12px; }
   .vp-keep > .vp-btn-copy { align-self: flex-start; }
}

/* ---------- Slip received: the page becomes a receipt ---------- */
.vp-sent {
   padding: 30px 28px; margin-bottom: 20px; text-align: center;
   border: 1px solid #b9e3c9; border-radius: 18px;
   background: linear-gradient(135deg, #f4fbf7 0%, #fdfffe 100%);
}
.vp-sent__icon {
   display: inline-flex; align-items: center; justify-content: center;
   width: 54px; height: 54px; margin-bottom: 14px;
   border-radius: 50%; background: #eaf7ef; color: #1e9e57; font-size: 25px;
}
.vp-sent h3 {
   margin: 0 0 8px; font-size: 22px; font-weight: 700;
   color: var(--tp-heading-primary, #1c0e0d);
}
.vp-sent > p {
   margin: 0 auto 20px; max-width: 46ch;
   font-size: 15px; line-height: 1.7; color: var(--tp-text-body, #5f6368);
}
.vp-sent__rows {
   display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px;
   margin: 0 0 20px; padding: 16px 0; border-top: 1px solid #dcefe4; border-bottom: 1px solid #dcefe4;
}
.vp-sent__rows dt {
   font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
   color: var(--tp-grey-5, #888b95);
}
.vp-sent__rows dd {
   margin: 3px 0 0; font-size: 17px; font-weight: 700;
   font-variant-numeric: tabular-nums; color: var(--tp-heading-primary, #1c0e0d);
}
.vp-sent__files { text-align: left; margin-bottom: 20px; }
.vp-sent__actions .vp-form__btn { display: inline-flex; }
.vp-recap__status.is-sent { background: #eaf7ef; color: #17794a; }

/* Attaching a replacement is possible but not the headline — it should
   not look like the page is still asking for something. */
.vp-again {
   border: 1px solid var(--tp-border-2, #efecec); border-radius: 14px;
   background: #fff; overflow: hidden;
}
.vp-again > summary {
   padding: 15px 20px; cursor: pointer; list-style: none;
   font-size: 14px; font-weight: 600; color: var(--tp-text-body, #5f6368);
}
.vp-again > summary::-webkit-details-marker { display: none; }
.vp-again > summary::before {
   content: "\f067"; font-family: "Font Awesome 5 Pro"; font-weight: 300;
   margin-right: 9px; color: var(--tp-theme-1, #f43325);
}
.vp-again[open] > summary::before { content: "\f068"; }
.vp-again > summary:hover { color: var(--tp-heading-primary, #1c0e0d); }
.vp-again__body { padding: 0 20px 20px; }
/* A step already behind them reads as settled, not as a to-do. */
.vp-next__list li.is-done::before {
   content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 300;
   background: #eaf7ef; border-color: #b9e3c9; color: #1e9e57; font-size: 10px;
}

/* The bank question sits above the file, because knowing which account
   the money went into is what makes the slip checkable. */
.vp-slip__bank { margin-bottom: 14px; }
.vp-slip__bank label {
   display: block; margin-bottom: 7px;
   font-size: 14px; font-weight: 600; color: var(--tp-heading-primary, #1c0e0d);
}
.vp-slip__bank select {
   width: 100%; padding: 12px 38px 12px 14px;
   border: 1px solid var(--tp-border-2, #efecec); border-radius: 12px;
   background: #fff; color: var(--tp-heading-primary, #1c0e0d);
   font-size: 14.5px; line-height: 1.4; appearance: none;
   background-image: 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' stroke='%23888b95' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: right 15px center;
   transition: border-color .2s ease, box-shadow .2s ease;
}
.vp-slip__bank select:focus {
   outline: none; border-color: var(--tp-theme-1, #f43325);
   box-shadow: 0 0 0 3px rgba(244, 51, 37, .12);
}
.vp-slip__bank small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--tp-grey-2, #9a9da7); }

/* A confirmed seat is the one moment in this flow worth celebrating, so
   it gets the warmer treatment rather than the same green as "received". */
.vp-sent--confirmed {
   border-color: #f2d9d6;
   background: linear-gradient(135deg, #fff6f5 0%, #fffdfc 60%, #f7fbf8 100%);
}
.vp-sent--confirmed .vp-sent__icon {
   background: linear-gradient(135deg, var(--tp-theme-1, #f43325) 0%, #eb1a3d 100%);
   color: #fff; box-shadow: 0 10px 26px rgba(244, 51, 37, .28);
}
.vp-sent--confirmed h3 { color: var(--tp-heading-primary, #1c0e0d); }
.vp-sent--confirmed .vp-sent__rows { border-color: #f4e5e3; }
.vp-recap__status.is-confirmed {
   background: linear-gradient(135deg, var(--tp-theme-1, #f43325) 0%, #eb1a3d 100%);
   color: #fff;
}

/* =====================================================================
   Client 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; }
.vp-acc__staff {
   display: flex; align-items: center; gap: 10px; margin-top: 14px;
   padding: 12px 14px; border-radius: 12px;
   background: #fff8ec; border: 1px solid #f6e3c2;
   font-size: 13px; line-height: 1.5; color: #a9741d;
}
.vp-acc__staff i { font-size: 16px; }

/* ---------- 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;
}

/* The other portal, named on each sign-in page. Two subdomains means
   people arrive at the wrong one, and a password that will never work is
   a worse answer than a signpost. */
.vp-lg__other {
   display: flex; align-items: center; justify-content: center; gap: 8px;
   margin: 18px 0 0; padding: 11px 14px;
   border: 1px solid #ece3dd; border-radius: 12px;
   background: rgba(255, 255, 255, .6);
   font-size: 13px; line-height: 1.5; color: #635655;
}
.vp-lg__other i { color: #e33023; }
.vp-lg__other a { color: #c0231a; font-weight: 600; 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;
   }
}