/* =========================================================
   VB ANATOMY — Homepage Styles
   ---------------------------------------------------------
   COLOR NOTE: Palette is derived from the VB Anatomy logo.
   Logo source colors:
     • Orange arc  #F85209
     • Maroon arc  #810D0D
     • Text        #000000
   The tokens below use LIGHTER, softened shades of those two
   brand hues so the site feels warm and approachable rather
   than harsh. To retune the whole site, edit ONLY this block.
   ========================================================= */

:root{
  /* --- Raw logo reference colors --- */
  --vb-orange:       #F85209;   /* logo orange arc */
  --vb-maroon:       #810D0D;   /* logo maroon arc */

  /* --- Brand colors used across the site (lighter shades of the logo) --- */
  --vb-primary:      #F26A2E;   /* lightened brand orange — main CTA / accents */
  --vb-primary-dark: #C7411A;   /* deeper orange for hover / contrast */
  --vb-accent:       #B23A2A;   /* softened maroon accent */
  --vb-ink:          #2A1712;   /* warm near-black text */
  --vb-ink-soft:     #6E574F;   /* warm muted brown-grey */
  --vb-paper:        #FFFBF7;   /* warm off-white background */
  --vb-panel:        #FDF1E8;   /* light peach panel */
  --vb-line:         #F2E2D6;   /* warm hairline border */
  --vb-white:        #FFFFFF;

  /* Brand gradient echoing the logo arc (orange → maroon) — LIGHTER, softened
     shades of the raw logo colors so the band feels warm, not harsh. */
  --vb-grad: linear-gradient(120deg, #F98A4E 0%, #D95E3A 55%, #B23A2A 100%);

  --vb-radius: 14px;
}

*{box-sizing:border-box;}

/* Hide the page scrollbar (scrolling still works: wheel, keys, touch) */
html{
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* legacy Edge / IE */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{       /* Chrome, Safari, Edge */
  width:0;
  height:0;
  display:none;
}

body{
  font-family:'Inter', sans-serif;
  font-size:14px;              /* was Bootstrap's 16px default */
  color:var(--vb-ink);
  background:var(--vb-paper);
  line-height:1.65;
}

h1,h2,h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--vb-ink);
}

a{color:inherit;}

.vb-eyebrow{
  display:inline-block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--vb-primary-dark);
  margin-bottom:12px;
}

.vb-section{padding:80px 0;}
.vb-section-alt{background:var(--vb-panel);}
.vb-section-head{max-width:640px; margin:0 auto;}
.vb-section-head h2{font-size:28px; margin-bottom:12px;}
.vb-section-sub{color:var(--vb-ink-soft); font-size:13.5px;}

.vb-placeholder-note{
  font-size:10.5px;
  color:#B15A2E;
  background:#FDF1E9;
  display:inline-block;
  padding:6px 14px;
  border-radius:100px;
}

/* ---------- BUTTONS ----------
   One consistent size/shape for every button on the site. */
.vb-btn-primary,
.vb-btn-outline,
.vb-btn-outline-light,
.vb-btn-ghost,
.vb-btn-whatsapp{
  padding:11px 24px;
  font-size:13px;
  line-height:1.25;
  white-space:nowrap;
}
.vb-btn-primary{
  background:var(--vb-primary);
  border:1px solid var(--vb-primary);
  color:#fff;
  border-radius:100px;
  font-weight:600;
  transition:all .2s ease;
}
.vb-btn-primary:hover{
  background:var(--vb-primary-dark);
  border-color:var(--vb-primary-dark);
  color:#fff;
}
.vb-btn-outline{
  background:transparent;
  border:1.5px solid var(--vb-primary);
  color:var(--vb-primary-dark);
  border-radius:100px;
  font-weight:600;
  transition:all .2s ease;
}
.vb-btn-outline:hover{
  background:var(--vb-primary);
  color:#fff;
}
.vb-btn-outline-light{
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.6);
  color:#fff;
  border-radius:100px;
  font-weight:600;
}
.vb-btn-outline-light:hover{
  background:#fff;
  color:var(--vb-primary-dark);
}

/* ---------- TOP STRIP (contact, above the navbar) ---------- */
.vb-topbar{
  background:var(--vb-accent);
  padding:7px 0;
  font-size:11.5px;
}
.vb-topbar .container{
  display:flex; align-items:center; justify-content:center;
  gap:26px; flex-wrap:wrap;
}
.vb-topbar-sep{width:1px; height:14px; background:rgba(255,255,255,.35);}
.vb-topbar-social{display:inline-flex; align-items:center; gap:16px;}
.vb-topbar-social a i{font-size:13px; transition:color .2s ease;}
.vb-topbar-social a:hover i{color:#fff;}
.vb-topbar a{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .2s ease;
}
.vb-topbar a:hover{color:#fff;}
.vb-topbar i{font-size:11px; color:#F9B79A;}
@media (max-width:576px){
  .vb-topbar .container{justify-content:center; gap:16px;}
}

/* ---------- NAVBAR ---------- */
.vb-navbar{
  background:rgba(255,251,247,0.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--vb-line);
  padding:6px 0;
  transition:box-shadow .25s ease, padding .25s ease, background .25s ease;
}
.vb-navbar.vb-scrolled{
  padding:4px 0;
  background:rgba(255,251,247,0.95);
  box-shadow:0 8px 28px rgba(42,23,18,.08);
}
.vb-navbar .navbar-brand{transition:transform .2s ease;}
.vb-navbar .navbar-brand:hover{transform:scale(1.03);}

/* Header logo — larger, shrinks slightly once the navbar condenses on scroll */
.vb-brand-logo{
  height:64px;
  width:auto;
  display:block;
  transition:height .25s ease;
}
.vb-navbar.vb-scrolled .vb-brand-logo{height:52px;}
@media (max-width:575.98px){
  .vb-brand-logo{height:50px;}
  .vb-navbar.vb-scrolled .vb-brand-logo{height:44px;}
}

.vb-navbar .nav-link{
  position:relative;
  color:var(--vb-ink-soft);
  font-weight:500;
  font-size:12.5px;
  padding:6px 2px;
}
.vb-navbar .nav-link::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:2px;
  background:var(--vb-primary);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.vb-navbar .nav-link:hover{color:var(--vb-primary-dark);}
.vb-navbar .nav-link:hover::after{transform:scaleX(1);}

/* Subscribe button lift */
.vb-navbar .vb-btn-primary{box-shadow:0 4px 14px rgba(242,106,46,.25); transition:all .2s ease;}
.vb-navbar .vb-btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(242,106,46,.35);}

/* Toggler */
.vb-navbar .navbar-toggler{border:1px solid var(--vb-line); padding:5px 9px;}
.vb-navbar .navbar-toggler:focus{box-shadow:none;}

/* Mobile menu panel */
@media (max-width:991px){
  .vb-navbar .navbar-collapse{
    background:#fff;
    border:1px solid var(--vb-line);
    border-radius:16px;
    padding:14px 18px;
    margin-top:12px;
    box-shadow:0 16px 36px rgba(42,23,18,.10);
  }
  .vb-navbar .nav-item{padding:2px 0;}
  .vb-navbar .nav-link::after{display:none;}
  .vb-navbar .vb-btn-primary{margin-top:10px; width:100%; text-align:center;}
}

/* ---------- HERO ---------- */
.vb-hero{
  padding:70px 0 60px;
  background:linear-gradient(180deg, #FEEFE4 0%, var(--vb-paper) 100%);
}
.vb-hero-title{
  font-size:42px;
  line-height:1.14;
  margin-bottom:20px;
}
.vb-hero-lead{
  font-size:15px;
  color:var(--vb-ink-soft);
  max-width:480px;
}

/* Centered hero (no side media) */
.vb-hero-center{
  position:relative;
  overflow:hidden;
  /* Tight bottom padding on purpose: the hero and the whole orange stats band
     have to land inside the first screen on a laptop (~700px of viewport). */
  padding:34px 0 26px;
  text-align:center;
  background:
    radial-gradient(rgba(178,58,42,0.05) 1px, transparent 1px),
    radial-gradient(90% 120% at 50% 0%, #FDEADC 0%, rgba(255,251,247,0) 60%),
    linear-gradient(180deg, #FEEFE4 0%, var(--vb-paper) 100%);
  background-size:22px 22px, auto, auto;
}
/* No fade strip at the bottom: the orange stats band butts straight onto the hero,
   so a gradient to paper here would read as a white gap between the two. */
.vb-hero-center .vb-hero-title{font-size:52px; line-height:1.08; margin-bottom:16px;}
/* margin-bottom:0 — the gap to the buttons is owned by .vb-hero-actions alone */
.vb-hero-center .vb-hero-lead{max-width:600px; margin:0 auto; font-size:16px;}

/* Keep hero content above the decorative layers */
.vb-hero-center .container{position:relative; z-index:2;}

/* Soft decorative brand glows behind the hero content */
.vb-hero-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  opacity:.5;
  pointer-events:none;
  z-index:0;
}
.vb-hero-glow-1{width:340px; height:340px; top:-90px; left:-60px;
  background:radial-gradient(circle, rgba(248,82,9,.45) 0%, rgba(248,82,9,0) 70%);
  animation:vbFloat 7s ease-in-out infinite;}
.vb-hero-glow-2{width:380px; height:380px; bottom:-120px; right:-80px;
  background:radial-gradient(circle, rgba(129,13,13,.30) 0%, rgba(129,13,13,0) 70%);
  animation:vbFloat 9s ease-in-out infinite reverse;}

/* Entrance + float animations */
@keyframes vbFadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}}
@keyframes vbFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-18px);}}
.vb-hero-pill{animation:vbFadeUp .6s ease both;}
.vb-hero-center .vb-hero-lead{animation:vbFadeUp .6s ease .2s both;}
.vb-hero-actions{animation:vbFadeUp .6s ease .3s both;}
.vb-hero-trust{animation:vbFadeUp .6s ease .4s both;}

/* Word-by-word reveal for the hero headline (driven by jQuery) */
.vb-word{
  display:inline-block;
  opacity:0;
  transform:translateY(28px) rotate(2deg);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
.vb-word.is-in{opacity:1; transform:none;}

@media (prefers-reduced-motion:reduce){
  .vb-hero-pill,.vb-hero-center .vb-hero-lead,
  .vb-hero-actions,.vb-hero-trust,.vb-hero-glow{animation:none;}
  .vb-word{opacity:1; transform:none; transition:none;}
}

/* Pill badge */
.vb-hero-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--vb-line);
  color:var(--vb-primary-dark);
  font-size:14px;
  font-weight:800;
  letter-spacing:0.09em;
  text-transform:uppercase;
  padding:10px 22px;
  border-radius:100px;
  margin-bottom:22px;
  box-shadow:0 4px 14px rgba(178,58,42,.08);
}
.vb-hero-pill-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--vb-primary);
  box-shadow:0 0 0 5px rgba(242,106,46,.18);
}

/* Gradient accent on part of the headline */
.vb-hero-accent{
  background:linear-gradient(120deg, var(--vb-orange) 0%, var(--vb-accent) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.vb-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  margin-top:24px;
}

/* Soft "ghost" button for the secondary hero action */
.vb-btn-ghost{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--vb-line);
  color:var(--vb-primary-dark);
  border-radius:100px;
  font-weight:600;
  box-shadow:0 4px 14px rgba(178,58,42,.06);
  transition:all .2s ease;
}
.vb-btn-ghost:hover{
  border-color:var(--vb-primary);
  color:var(--vb-primary-dark);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(178,58,42,.12);
}

/* WhatsApp action — same pill, WhatsApp green accent */
.vb-btn-whatsapp{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid rgba(37,211,102,.55);
  color:#0F7C43;
  border-radius:100px;
  font-weight:600;
  box-shadow:0 4px 14px rgba(15,124,67,.08);
  transition:all .2s ease;
}
.vb-btn-whatsapp i{color:#25D366; transition:color .2s ease;}
.vb-btn-whatsapp:hover{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(15,124,67,.22);
}
.vb-btn-whatsapp:hover i{color:#fff;}

/* Trust line under the buttons */
.vb-hero-trust{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:18px 0 0;   /* last thing in the hero — no trailing margin */
  font-size:12.5px;
  color:var(--vb-ink-soft);
}
.vb-hero-trust strong{color:var(--vb-ink);}
/* Two stacked lines instead of one running line */
.vb-hero-trust-stack{flex-direction:column; gap:6px; text-align:center;}
.vb-hero-trust-hook{
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--vb-primary-dark);
}
.vb-hero-trust-hook i{color:var(--vb-orange); margin-right:2px;}
.vb-hero-stars{color:#F6A623; font-size:12px; letter-spacing:1px;}

@media (max-width:768px){
  .vb-hero-center{padding:32px 0 28px;}
  .vb-hero-center .vb-hero-title{font-size:32px;}
  .vb-hero-center .vb-hero-lead{font-size:14px;}
}
.vb-hero-media{position:relative;}
.vb-hero-media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#fff;
}
.vb-hero-badge{
  position:absolute;
  bottom:18px; left:18px;
  background:rgba(255,255,255,0.95);
  border-radius:100px;
  padding:8px 16px;
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600;
  color:var(--vb-primary-dark);
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
}
.vb-hero-badge i{font-size:16px;}

#reviews{position:relative; background:var(--vb-white);}

/* ---------- STATS ---------- */
.vb-stats{
  position:relative;
  /* Vertical gradient, not diagonal: the band meets the near-white hero above it and
     the white reviews section below, so it opens light at the top (close to the hero's
     last tone) and settles into the brand peach — the seam reads as a transition
     rather than a hard colour switch. The two hairlines keep both edges deliberate. */
  background:linear-gradient(180deg, #FDD9C0 0%, #F9B993 55%, #F5A87C 100%);
  border-top:1px solid rgba(255,255,255,0.55);
  border-bottom:1px solid rgba(129,13,13,0.10);
  /* Symmetric breathing room — the 36px numbers were sitting too close to both edges. */
  padding:40px 0;
}
/* Each tile is a centred flex column, and the row is left to stretch, so every tile is
   the same height and the numbers all land on one line across the band. */
.vb-stat{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
/* Hairline between tiles — reads as one measured band instead of five loose blocks.
   Only from lg up, where the stats sit in a single row. Sits at left:0, i.e. exactly on
   the boundary between two equal columns, and fades out at both ends so it reads as a
   divider rather than a drawn bar. */
@media (min-width:992px){
  .vb-stat + .vb-stat::before{
    content:"";
    position:absolute; left:0; top:6px; bottom:6px;
    width:1px;
    background:linear-gradient(180deg,
      rgba(129,13,13,0)    0%,
      rgba(129,13,13,0.18) 24%,
      rgba(129,13,13,0.18) 76%,
      rgba(129,13,13,0)    100%);
  }
}
@media (max-width:991.98px){
  .vb-stats{padding:32px 0;}
}
.vb-stat-number{
  font-family:'Fraunces', serif;
  /* clamp so five/six columns still hold "5 Lakh+" and "2,000+" on one line */
  font-size:clamp(26px, 2.3vw, 36px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-0.015em;
  color:var(--vb-ink);
  white-space:nowrap;
}
.vb-stat-label{
  margin:7px auto 0;
  /* The labels carry their own break (the "|" in $stats), so this measure only has
     to hold the longest single line — "ANATOMY & SURGICAL" — without re-wrapping it. */
  max-width:23ch;
  font-size:11px;
  font-weight:600;
  color:rgba(42,23,18,0.66);
  text-transform:uppercase;
  letter-spacing:0.09em;
  line-height:1.45;
}
.vb-stats .vb-placeholder-note{
  background:rgba(255,255,255,0.4);
  color:var(--vb-primary-dark);
}

/* ---------- VIDEO CARDS ---------- */
.vb-video-card{display:block; color:var(--vb-ink);}
/* The thumb is a <button>: clicking it swaps the image for the YouTube iframe
   in place (main.js), so the lesson plays inside the card. */
.vb-video-thumb{
  display:block;
  width:100%;
  padding:0;
  cursor:pointer;
  position:relative;
  border-radius:4px;          /* corners cut down — nearly square */
  overflow:hidden;
  aspect-ratio:16/9;
  background:#fff;
  border:1px solid var(--vb-line);
}
.vb-video-thumb:focus-visible{outline:2px solid var(--vb-primary); outline-offset:2px;}
.vb-video-thumb img{width:100%; height:100%; object-fit:contain; transition:transform .3s ease;}
.vb-video-card:hover .vb-video-thumb img{transform:scale(1.06);}
.vb-video-thumb iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
/* Playing: kill the hover zoom/overlay so nothing sits over the player. */
.vb-video-thumb.is-playing{cursor:default; background:#000;}
.vb-play-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(31,45,43,0.25);
  color:#fff; font-size:36px;
  opacity:0; transition:opacity .2s ease;
}
.vb-video-card:hover .vb-play-icon{opacity:1;}
/* Touch devices never hover — keep the play affordance visible there. */
@media (hover:none){
  .vb-play-icon{opacity:1; background:rgba(31,45,43,0.18);}
}
.vb-video-tag{
  display:inline-block;
  margin-top:14px;
  font-size:9.5px;
  font-weight:600;
  color:var(--vb-primary-dark);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.vb-video-title{
  font-size:13.5px;
  font-family:'Inter',sans-serif;
  font-weight:600;
  margin-top:4px;
  color:var(--vb-ink);
}

/* ---------- TESTIMONIALS ---------- */
.vb-testimonial-card{
  background:#fff;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-radius);
  padding:28px 26px;
  height:100%;
}
/* Empty placeholder card — keeps the grid slot until a real testimonial lands */
.vb-testimonial-card-blank{min-height:180px;}
.vb-quote-icon{font-size:26px; color:var(--vb-accent);}
.vb-testimonial-quote{
  font-size:13px;
  color:var(--vb-ink-soft);
  margin:14px 0 18px;
}
.vb-testimonial-name{font-weight:600; font-size:12.5px;}
.vb-testimonial-detail{font-size:10.5px; color:var(--vb-ink-soft);}

/* Testimonial carousel controls (prev / dots / next, below the cards) */
.vb-carousel-nav{
  display:flex; align-items:center; justify-content:center;
  gap:20px; margin-top:34px;
}
.vb-carousel-btn{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--vb-line);
  background:#fff; color:var(--vb-ink);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.vb-carousel-btn:hover{background:var(--vb-primary); border-color:var(--vb-primary); color:#fff;}
.vb-carousel-dots{
  position:static; margin:0; display:flex; gap:8px;
}
.vb-carousel-dots [data-bs-target]{
  width:8px; height:8px; border-radius:50%; border:0;
  margin:0; text-indent:-999px; overflow:hidden;
  background:var(--vb-primary); opacity:.25;
  transition:opacity .2s ease;
}
.vb-carousel-dots .active{opacity:1;}

/* ---------- CHECK LIST ---------- */
.vb-check-list{list-style:none; padding:0; margin-top:18px;}
.vb-check-list li{
  font-size:13px;
  padding:9px 0;
  color:var(--vb-ink-soft);
}
.vb-check-list i{color:var(--vb-primary); margin-right:10px;}

.vb-included-card{
  background:#fff;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-radius);
  padding:8px 26px;
}
.vb-included-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--vb-line);
  font-size:12.5px;
  font-weight:500;
}
.vb-included-row:last-child{border-bottom:none;}
.vb-included-row i{color:var(--vb-primary); font-size:16px;}

/* ---------- EXPLORE TOPICS (region tiles) ---------- */
/* No padding-top override here: the sample-lessons section above is .vb-section-alt,
   so its panel background ends at the section boundary and this heading needs the
   same 80px (56px on phones) of breathing room every other section gets. */

/* Uses .vb-section-head for the shared centred heading; this only adds the gap
   down to the tile grid (the row itself carries no margin utility). */
.vb-topics-head{margin-bottom:36px;}

/* Bootstrap builds row gaps from --bs-gutter-y, so set that rather than row-gap. */
.vb-topics-scroller{--bs-gutter-y:44px; justify-content:center;}

.vb-topic-tile{padding-bottom:4px;}

/* Stretched link — covers the tile without wrapping the heading markup. */
.vb-cover-link{
  position:absolute;
  inset:0;
  border:0;
  z-index:1;
}

/* No ring — just a soft lift off the warm page, so the drawing is the only edge. */
.vb-topic-circle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:220px; height:220px;
  border-radius:24px;
  background:var(--vb-white);
  border:0;
  box-shadow:0 4px 20px rgba(42,23,18,0.055);
  transition:transform .22s ease, box-shadow .22s ease;
}

/* Line-art icons: stroke only — the two highlight classes below are the exceptions. */
.vb-topic-ic{
  width:104px; height:104px;
  fill:none;
  stroke:var(--vb-ink);
  stroke-width:2.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.vb-topic-ic .vb-ic-accent{stroke:var(--vb-primary); stroke-width:4;}
.vb-topic-ic .vb-ic-fill{fill:var(--vb-primary); stroke:var(--vb-primary); opacity:.85;}

.vb-topic-name{font-size:14px; font-weight:700; color:var(--vb-ink);}
.vb-topic-count{font-size:10.5px; color:var(--vb-primary-dark);}
.vb-topic-count small{font-size:inherit;}

/* Hover / keyboard focus both lift the circle and underline the name. */
.vb-topic-tile:hover .vb-topic-circle,
.vb-topic-tile:focus-within .vb-topic-circle{
  transform:translateY(-4px);
  box-shadow:0 16px 30px rgba(178,58,42,0.14);
  border-color:transparent;
}
.vb-topic-tile:hover .vb-topic-underline,
.vb-topic-tile:focus-within .vb-topic-underline{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Phones: one swipeable strip instead of a cramped 2-up grid. */
@media (max-width:767.98px){
  .vb-topics-scroller{
    /* Drop Bootstrap's negative row margins — inside a scroller they push the
       content past the viewport and the whole page picks up a sideways scroll. */
    margin-left:0;
    margin-right:0;
    flex-wrap:nowrap;
    overflow-x:auto;
    justify-content:flex-start;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:6px;
  }
  .vb-topics-scroller::-webkit-scrollbar{display:none;}
  .vb-topic-tile{scroll-snap-align:center;}
  .vb-topic-circle{width:160px; height:160px; border-radius:18px;}
  .vb-topic-ic{width:86px; height:86px;}
}


/* ---------- WHAT'S INSIDE THE MEMBERSHIP (light orange band) ----------
   Sits straight after the topic tiles: the light brand orange (#F98A4E, the
   opening stop of --vb-grad) sets the offer apart from the plain-white
   browsing above without going dark.
   Layout follows teachmeanatomy.info's PRO panel — left-aligned eyebrow and
   headline, then a 2-up grid of white cards, then a single button. */
.vb-inside{
  position:relative;
  overflow:hidden;
  padding:84px 0 88px;
  background:#FDEFE5;             /* light peach ground */
  color:var(--vb-ink);
}
/* Soft warm sweep in from the top-right, the way the reference band carries
   a tint behind its cards — keeps the flat ground from looking printed. */
.vb-inside::before{
  content:"";
  position:absolute;
  top:-55%; right:-15%;
  width:75%; height:190%;
  background:radial-gradient(closest-side, rgba(249,138,78,.18), rgba(249,138,78,0));
  pointer-events:none;
}
.vb-inside .container{position:relative; z-index:1;}

.vb-inside-eyebrow{
  display:block;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.22em;          /* wide tracking, as on the reference band */
  text-transform:uppercase;
  color:var(--vb-primary-dark);   /* brand orange reads cleanly on the peach ground */
  margin-bottom:10px;
}
.vb-inside-title{
  color:var(--vb-ink);
  font-size:30px;
  margin-bottom:32px;
  max-width:24ch;
}

/* White panels on the peach ground — the contrast is gentler now, so the
   hairline border carries the edge and the shadow stays soft. */
.vb-inside-card{
  height:100%;
  padding:28px 30px 30px;
  border-radius:var(--vb-radius);
  background:var(--vb-white);
  border:1px solid var(--vb-line);
  box-shadow:0 2px 6px rgba(122,45,20,.06);
  transition:box-shadow .2s ease, transform .2s ease;
}
.vb-inside-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(122,45,20,.12);
}
.vb-inside-card i{
  display:block;
  font-size:24px;
  line-height:1;
  color:var(--vb-primary);
  margin-bottom:18px;
}
.vb-inside-card h3{
  color:var(--vb-ink);
  font-size:16px;
  margin-bottom:8px;
}
.vb-inside-card p,
.vb-inside-card .vb-inside-list{
  margin:0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--vb-ink-soft);
}
.vb-inside-card .vb-inside-list{padding-left:18px;}
.vb-inside-card .vb-inside-list li{margin-bottom:4px;}

/* Ink button — solid on the peach ground, inverting to white on hover. */
.vb-btn-inside{
  margin-top:34px;
  padding:11px 26px;
  font-size:13px;
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;
  background:var(--vb-ink);
  border:1px solid var(--vb-ink);
  color:#fff;
  border-radius:100px;
  transition:all .2s ease;
}
.vb-btn-inside:hover{
  background:#fff;
  border-color:var(--vb-ink);
  color:var(--vb-ink);
}

@media (max-width:767.98px){
  .vb-inside{padding:60px 0 64px;}
  .vb-inside-title{font-size:24px; max-width:none;}
  .vb-inside-card{padding:24px 22px 26px;}
}

/* ---------- ABOUT ---------- */
.vb-about-photo img{aspect-ratio:1/1; object-fit:cover; width:100%;}
.vb-cred{font-size:12px; font-weight:600; color:var(--vb-primary-dark); margin-bottom:16px; text-transform:none;}
.vb-placeholder-inline{font-weight:500; color:#B15A2E;}

/* ---------- WHO CARDS ---------- */
.vb-who-card{
  background:#fff;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-radius);
  padding:34px 24px;
  height:100%;
}
.vb-who-card i{font-size:28px; color:var(--vb-primary); margin-bottom:14px;}
.vb-who-card h3{font-size:15px; margin-bottom:8px;}
.vb-who-card p{font-size:12px; color:var(--vb-ink-soft); margin:0;}

/* ---------- CTA BAND ---------- */
.vb-cta-band{
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg, #FCE1D2 0%, #FAD0B9 100%);
  color:var(--vb-ink);
  display:flex;
  align-items:center;
  padding:76px 0;
  border-top:1px solid var(--vb-line);
  border-bottom:1px solid var(--vb-line);
}
/* Warm light falling from the top-left, so the flat band gains some depth. */
.vb-cta-band::before{
  content:"";
  position:absolute;
  top:-40%; left:-10%;
  width:70%; height:180%;
  background:radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0));
  pointer-events:none;
}
.vb-cta-band .container{position:relative; z-index:1; width:100%;}
.vb-cta-band .vb-eyebrow{margin-bottom:10px;}
.vb-cta-title{color:var(--vb-ink); font-size:30px; margin-bottom:10px; max-width:15ch;}
/* Same gradient accent as the hero headline — but scaled well past it, because
   "webinar" is the one word this whole band is asking the visitor to act on.
   inline-block + line-height:1 keeps the oversized word from opening up a gap
   above it when it drops onto its own line. */
.vb-cta-accent{
  background:linear-gradient(120deg, var(--vb-orange) 0%, var(--vb-accent) 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
  font-size:1.85em;
  font-weight:800;
  letter-spacing:-0.015em;
  line-height:1;
  margin-top:2px;
}
.vb-cta-sub{color:var(--vb-ink-soft); font-size:13.5px; margin:0; max-width:52ch;}

/* The three outcome lines — what actually happens in the session. */
.vb-cta-points{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  max-width:54ch;
}
.vb-cta-points li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  line-height:1.55;
  color:var(--vb-ink);
  padding:7px 0;
  border-top:1px solid rgba(178,58,42,.12);
}
.vb-cta-points li:first-child{border-top:0; padding-top:0;}
.vb-cta-points i{
  flex:0 0 20px;
  height:20px;
  margin-top:1px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--vb-primary);
  color:#fff;
  font-size:11px;
  font-weight:700;
}

/* Action panel — both buttons plus the reassurance chips above them. */
.vb-cta-card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--vb-radius);
  padding:24px;
  box-shadow:0 18px 40px rgba(129,13,13,.10);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.vb-cta-facts{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.vb-cta-facts li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:var(--vb-ink-soft);
}
.vb-cta-facts i{color:var(--vb-primary); font-size:13px;}
/* Full-width inside the panel so the two actions stack as one clear column. */
.vb-cta-btn{
  display:block;
  width:100%;
  text-align:center;
  white-space:normal;
}
.vb-cta-btn + .vb-cta-btn{margin-top:10px;}
.vb-cta-help{
  margin:16px 0 0;
  font-size:11.5px;
  color:var(--vb-ink-soft);
  text-align:center;
}
.vb-cta-help a{
  color:var(--vb-primary-dark);
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
}
.vb-cta-help a:hover{text-decoration:underline;}

.vb-cta-price{color:var(--vb-ink); font-size:13px; margin:0;}
.vb-cta-price strong{font-size:16px; color:var(--vb-primary-dark);}
.vb-cta-price-note{color:var(--vb-ink-soft); font-size:10.5px;}

@media (max-width:991.98px){
  .vb-cta-band{padding:60px 0;}
  .vb-cta-title{font-size:26px; max-width:none;}
  .vb-cta-accent{font-size:1.75em;}
  .vb-cta-sub{max-width:none;}
}
@media (max-width:575.98px){
  .vb-cta-band{padding:48px 0;}
  .vb-cta-title{font-size:23px;}
  .vb-cta-accent{font-size:1.65em;}
  .vb-cta-card{padding:20px;}
}

/* ---------- FAQ ---------- */
.vb-faq .accordion-item{
  border:1px solid var(--vb-line);
  border-radius:var(--vb-radius) !important;
  margin-bottom:12px;
  overflow:hidden;
  background:#fff;
}
.vb-faq .accordion-button{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:13px;
  color:var(--vb-ink);
  background:#fff;
}
.vb-faq .accordion-button:not(.collapsed){
  color:var(--vb-primary-dark);
  background:var(--vb-panel);
  box-shadow:none;
}
.vb-faq .accordion-button:focus{box-shadow:none; border-color:var(--vb-line);}
.vb-faq .accordion-body{font-size:12.5px; color:var(--vb-ink-soft);}

/* ---------- SEARCH-FRIENDLY ARTICLE CARDS ---------- */
.vb-article-card{
  display:block;
  background:#fff;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-radius);
  padding:26px 24px;
  height:100%;
  color:var(--vb-ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.vb-article-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(130,20,15,0.08);}
.vb-article-tag{
  display:inline-block;
  font-size:9.5px; font-weight:600;
  color:var(--vb-primary-dark);
  text-transform:uppercase; letter-spacing:0.05em;
  margin-bottom:10px;
}
.vb-article-title{font-size:15px; margin-bottom:10px; line-height:1.35;}
.vb-article-excerpt{font-size:12px; color:var(--vb-ink-soft); margin-bottom:16px;}
.vb-article-link{font-size:11.5px; font-weight:600; color:var(--vb-primary-dark);}
.vb-article-link i{transition:transform .2s ease;}
.vb-article-card:hover .vb-article-link i{transform:translateX(4px);}

/* ---------- FLOATING WHATSAPP BUTTON ---------- */
.vb-whatsapp{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1040;
  width:54px; height:54px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(37,211,102,.42);
  transition:transform .2s ease, box-shadow .2s ease;
}
.vb-whatsapp:hover{
  color:#fff;
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 30px rgba(37,211,102,.55);
}
/* gentle attention ring */
.vb-whatsapp::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:vbPing 2.4s ease-out infinite;
}
@keyframes vbPing{
  0%{transform:scale(1); opacity:.8;}
  70%{transform:scale(1.5); opacity:0;}
  100%{transform:scale(1.5); opacity:0;}
}
@media (prefers-reduced-motion:reduce){.vb-whatsapp::before{animation:none;}}
@media (max-width:768px){
  .vb-whatsapp{width:48px; height:48px; font-size:23px; right:16px; bottom:16px;}
}

/* ---------- FOOTER (light, warm — matches the site palette) ---------- */
.vb-footer{
  position:relative;
  background:#fff;
  color:var(--vb-ink-soft);
  padding:66px 0 22px;
  font-size:14px;
}
.vb-footer h5{
  color:var(--vb-ink);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:18px;
  padding-bottom:10px;
  position:relative;
}
.vb-footer h5::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:26px; height:2px;
  background:var(--vb-primary);
  border-radius:2px;
}
.vb-footer-logo{display:inline-block; margin-bottom:16px;}
.vb-footer-about{font-size:13.5px; color:var(--vb-ink-soft); max-width:330px;}
.vb-footer-links{list-style:none; padding:0; margin:0;}
.vb-footer-links li{margin-bottom:11px; font-size:13.5px;}
.vb-footer-links a{
  color:var(--vb-ink-soft);
  text-decoration:none;
  display:inline-flex; align-items:center;
  transition:color .2s ease, transform .2s ease;
}
.vb-footer-links a:hover{color:var(--vb-primary-dark); transform:translateX(3px);}

/* Contact items with icon chips */
.vb-footer-contact li{display:flex; align-items:center; gap:10px;}
.vb-footer-contact i{
  color:var(--vb-primary-dark);
  background:var(--vb-panel);
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--vb-line);
  flex:none;
  font-size:12px;
}

.vb-social a{
  color:var(--vb-primary-dark);
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--vb-line);
  background:var(--vb-panel);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:all .2s ease;
}
.vb-social a:hover{
  background:var(--vb-primary);
  color:#fff;
  border-color:var(--vb-primary);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(242,106,46,.28);
}

/* Bottom bar */
.vb-footer-bottom{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
  border-top:1px solid var(--vb-line);
  margin-top:40px; padding-top:20px;
}
.vb-footer-copy{font-size:12px; color:var(--vb-ink-soft); margin:0;}
.vb-footer-top-link{
  color:var(--vb-primary-dark);
  text-decoration:none;
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid var(--vb-line);
  background:var(--vb-panel);
  display:inline-flex; align-items:center; justify-content:center;
  transition:all .2s ease;
}
.vb-footer-top-link:hover{
  background:var(--vb-primary);
  color:#fff;
  border-color:var(--vb-primary);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(242,106,46,.28);
}
.vb-footer-top-link i{font-size:20px;}

@media (max-width:768px){
  .vb-hero-title{font-size:30px;}
  .vb-section{padding:56px 0;}
}

/* ===== VB ANATOMY EXPERIENCE — playlist layout ===== */
.vb-player{background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.08);}
.vb-player-thumb{display:block; width:100%; position:relative; aspect-ratio:16/9; border:0; padding:0; background:#000; cursor:pointer;}
.vb-player-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.vb-player-thumb iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vb-player-caption{padding:12px 18px 14px;}
.vb-player-caption .vb-video-title{margin:4px 0 0; font-size:15px; font-weight:600;}
.vb-playlist-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.vb-playlist-item{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:10px 14px 10px 12px; cursor:pointer; transition:border-color .2s, box-shadow .2s, transform .2s;}
.vb-playlist-item:hover{border-color:var(--vb-accent); transform:translateX(3px);}
.vb-playlist-item.is-active{border-color:var(--vb-accent); box-shadow:0 0 0 3px rgba(178,58,42,.12);}
.vb-playlist-num{width:22px; font-weight:700; color:var(--vb-ink-soft); font-size:13px; flex:0 0 auto;}
.vb-playlist-item.is-active .vb-playlist-num{color:var(--vb-accent);}
.vb-playlist-item img{width:84px; aspect-ratio:16/9; object-fit:cover; border-radius:8px; flex:0 0 auto;}
.vb-playlist-meta{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.vb-playlist-tag{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--vb-accent); font-weight:600;}
.vb-playlist-title{font-size:13.5px; font-weight:600; color:var(--vb-ink); line-height:1.35;}
.vb-playlist-item > i{font-size:20px; color:var(--vb-ink-soft); flex:0 0 auto;}
.vb-playlist-item.is-active > i{color:var(--vb-accent);}
@media (max-width:991px){.vb-playlist-item img{width:96px;}}

/* ===== CONTACT PAGE ===== */
.vb-contact-hero{padding:56px 0 48px;}
.vb-contact-hero .vb-hero-title{font-size:44px; line-height:1.1; margin:12px 0 14px;}
.vb-contact-hero .vb-hero-lead{max-width:620px; margin:0 auto; font-size:16px; color:var(--vb-ink-soft);}
.vb-contact-section{padding-top:0; margin-top:-8px;}
.vb-contact-wrap{
  display:grid; grid-template-columns:minmax(300px,380px) 1fr;
  background:var(--vb-white); border:1px solid var(--vb-line); border-radius:24px;
  overflow:hidden; box-shadow:0 24px 60px rgba(42,23,18,.08);
}
.vb-contact-aside{position:relative; padding:40px 36px; color:#fff; background:var(--vb-grad);}
.vb-contact-aside::after{
  content:""; position:absolute; right:-80px; bottom:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%); pointer-events:none;
}
.vb-contact-aside h2{color:#fff; font-size:24px; margin-bottom:8px;}
.vb-contact-aside > p{color:rgba(255,255,255,.82); font-size:13.5px; margin-bottom:26px;}
.vb-contact-list{list-style:none; padding:0; margin:0 0 26px; position:relative; z-index:1;}
.vb-contact-list li{display:flex; gap:14px; align-items:center; padding:12px 0;}
.vb-contact-list li + li{border-top:1px solid rgba(255,255,255,.18);}
.vb-contact-ico{
  width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); font-size:18px;
}
.vb-contact-list strong{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; opacity:.8; font-weight:600;}
.vb-contact-list a,.vb-contact-list div > span{color:#fff; font-size:15px; font-weight:600; text-decoration:none;}
.vb-contact-list a:hover{text-decoration:underline;}
.vb-contact-wa{width:100%; justify-content:center; position:relative; z-index:1;}
.vb-contact-social{display:flex; align-items:center; gap:10px; margin-top:26px; position:relative; z-index:1;}
.vb-contact-social span{font-size:12px; opacity:.8; margin-right:auto;}
.vb-contact-social a{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); transition:background .2s, transform .2s;
}
.vb-contact-social a:hover{background:rgba(255,255,255,.3); transform:translateY(-2px); color:#fff;}

.vb-contact-form{padding:40px 44px;}
.vb-contact-form h2{font-size:24px; margin-bottom:6px;}
.vb-contact-form-sub{color:var(--vb-ink-soft); font-size:13.5px; margin-bottom:24px;}
.vb-contact-form .form-label{font-size:12.5px; font-weight:600; color:var(--vb-ink); margin-bottom:6px;}
.vb-field{position:relative;}
.vb-field > i{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--vb-ink-soft); font-size:15px; pointer-events:none;}
.vb-field .form-control,.vb-field .form-select{padding-left:40px;}
.vb-contact-form .form-control,.vb-contact-form .form-select{
  border:1px solid var(--vb-line); background:var(--vb-paper); border-radius:12px;
  padding-top:11px; padding-bottom:11px; font-size:14px; color:var(--vb-ink); transition:border-color .2s, box-shadow .2s, background .2s;
}
.vb-contact-form .form-control::placeholder{color:#B3A097;}
.vb-contact-form .form-control:focus,.vb-contact-form .form-select:focus{
  border-color:var(--vb-primary); background:#fff; box-shadow:0 0 0 4px rgba(242,106,46,.14);
}
.vb-textarea{resize:vertical; min-height:140px;}
.vb-contact-submit{padding:12px 26px;}
.vb-contact-note{font-size:12.5px; color:var(--vb-ink-soft);}
.vb-contact-note i{color:#2E9E5B; margin-right:4px;}
.vb-contact-alert{
  display:flex; gap:10px; align-items:flex-start; background:#EAF7EE; border:1px solid #BFE5CB; color:#1F6B3A;
  border-radius:12px; padding:12px 14px; font-size:13.5px; margin-bottom:18px;
}
.vb-contact-alert i{font-size:18px; color:#2E9E5B;}
.vb-contact-alert a{color:inherit; font-weight:600;}

@media (max-width:991px){
  .vb-contact-wrap{grid-template-columns:1fr;}
  .vb-contact-aside{padding:32px 26px;}
  .vb-contact-form{padding:32px 26px;}
  .vb-contact-hero .vb-hero-title{font-size:34px;}
}

/* ===== ABOUT PAGE ===== */
.vb-about-photo-frame{position:relative;}
.vb-about-badge{
  position:absolute; left:18px; bottom:18px; background:#fff; color:var(--vb-ink);
  border-radius:999px; padding:8px 14px; font-size:12.5px; font-weight:600;
  box-shadow:0 8px 24px rgba(42,23,18,.14);
}
.vb-about-badge i{color:var(--vb-primary); margin-right:4px;}
.vb-cred-card{
  background:#fff; border:1px solid var(--vb-line); border-radius:18px; padding:26px 22px; height:100%;
  transition:transform .2s, box-shadow .2s;
}
.vb-cred-card:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(42,23,18,.08);}
.vb-cred-ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--vb-panel); color:var(--vb-accent); font-size:20px;
}
.vb-cred-card h3{font-size:16px; margin-bottom:6px; color:var(--vb-ink);}
.vb-cred-card p{font-size:13px; line-height:1.7; color:var(--vb-ink-soft); margin:0;}

.vb-method{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; position:relative;}
.vb-method-step{position:relative; background:#fff; border:1px solid var(--vb-line); border-radius:18px; padding:28px 22px 24px;}
.vb-method-num{
  display:inline-block; font-family:"Fraunces",serif; font-size:34px; font-weight:700; line-height:1;
  background:var(--vb-grad); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:14px;
}
.vb-method-step h3{font-size:16px; margin-bottom:8px; color:var(--vb-ink);}
.vb-method-step p{font-size:13px; line-height:1.7; color:var(--vb-ink-soft); margin:0;}

.vb-mission{
  max-width:820px; margin:0 auto; text-align:center; background:var(--vb-panel);
  border-radius:24px; padding:48px 40px; position:relative;
}
.vb-mission .vb-quote-icon{font-size:40px; color:var(--vb-primary); opacity:.6;}
.vb-mission-quote{font-family:"Fraunces",serif; font-size:22px; line-height:1.5; color:var(--vb-ink); margin:8px 0 18px;}
.vb-mission-name{font-weight:700; color:var(--vb-ink);}
.vb-mission-detail{font-size:12.5px; color:var(--vb-ink-soft);}

@media (max-width:991px){.vb-method{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575px){.vb-method{grid-template-columns:1fr;} .vb-mission{padding:32px 22px;} .vb-mission-quote{font-size:18px;}}

/* ===== ABOUT — BEYOND THE CLASSROOM ===== */
.vb-outreach-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:28px 0 44px;}
.vb-outreach-tile{
  background:#fff; border:1px solid var(--vb-line); border-radius:18px; padding:22px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.vb-outreach-tile i{font-size:24px; color:var(--vb-accent); margin-bottom:4px;}
.vb-outreach-tile strong{font-family:"Fraunces",serif; font-size:24px; line-height:1.15; color:var(--vb-ink); font-weight:700;}
.vb-outreach-tile span{font-size:12.5px; color:var(--vb-ink-soft); line-height:1.5;}

.vb-timeline{position:relative; max-width:900px; margin:0 auto; padding-left:0;}
.vb-timeline::before{
  content:""; position:absolute; left:52px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg, var(--vb-primary), var(--vb-accent)); opacity:.35;
}
.vb-timeline-year{display:grid; grid-template-columns:104px 1fr; gap:0 24px; margin-bottom:22px; position:relative;}
.vb-timeline-marker{position:relative; display:flex; justify-content:center; align-items:flex-start;}
.vb-timeline-marker span{
  position:relative; z-index:1; display:inline-block; background:var(--vb-grad); color:#fff;
  font-weight:700; font-size:14px; padding:7px 14px; border-radius:999px; box-shadow:0 6px 16px rgba(178,58,42,.25);
}
.vb-timeline-body{background:#fff; border:1px solid var(--vb-line); border-radius:16px; padding:18px 22px;}
.vb-timeline-body ul{margin:0; padding-left:18px;}
.vb-timeline-body li{font-size:13.5px; line-height:1.65; color:var(--vb-ink); margin-bottom:6px;}
.vb-timeline-body li::marker{color:var(--vb-primary);}
.vb-timeline-body li:last-child{margin-bottom:0;}

@media (max-width:991px){.vb-outreach-tiles{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575px){
  .vb-outreach-tiles{grid-template-columns:1fr;}
  .vb-timeline::before{left:14px;}
  .vb-timeline-year{grid-template-columns:1fr; gap:10px;}
  .vb-timeline-marker{justify-content:flex-start; padding-left:0;}
}
/* ===== ABOUT — ARTICLES ===== */
.vb-post-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:1000px; margin:8px auto 0;}
.vb-post-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--vb-line); border-radius:20px;
  padding:26px 28px; transition:transform .2s, box-shadow .2s, border-color .2s; position:relative; overflow:hidden;
}
.vb-post-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--vb-grad); opacity:0; transition:opacity .2s;}
.vb-post-card:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(42,23,18,.09); border-color:rgba(242,106,46,.4);}
.vb-post-card:hover::before{opacity:1;}
.vb-post-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.vb-post-ico{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--vb-panel); color:var(--vb-accent); font-size:17px;}
.vb-post-tag{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--vb-accent);}
.vb-post-title{font-size:19px; line-height:1.35; margin:0 0 10px;}
.vb-post-title a{color:var(--vb-ink); text-decoration:none;}
.vb-post-title a:hover{color:var(--vb-primary-dark);}
.vb-post-excerpt{font-size:13.5px; line-height:1.7; color:var(--vb-ink-soft); margin:0 0 18px; flex:1;}
.vb-post-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--vb-line); padding-top:14px;}
.vb-post-author{font-size:12.5px; color:var(--vb-ink-soft);}
.vb-post-author i{color:var(--vb-primary); margin-right:4px;}
.vb-post-link{font-size:13px; font-weight:700; color:var(--vb-primary-dark); text-decoration:none;}
.vb-post-link i{transition:transform .2s;}
.vb-post-link:hover{color:var(--vb-accent);}
.vb-post-link:hover i{transform:translateX(3px);}
@media (max-width:767px){.vb-post-grid{grid-template-columns:1fr;} .vb-post-card{padding:22px;}}

/* ===== WEBINAR PAGE ===== */
.vb-webinar-facts{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.vb-webinar-fact{display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--vb-line); border-radius:14px; padding:14px 16px;}
.vb-webinar-fact > i{font-size:20px; color:var(--vb-primary);}
.vb-webinar-fact small{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--vb-ink-soft);}
.vb-webinar-fact strong{font-size:13.5px; color:var(--vb-ink);}
.vb-register-card{background:#fff; border:1px solid var(--vb-line); border-radius:20px; box-shadow:0 18px 50px rgba(42,23,18,.08);}
@media (max-width:575.98px){.vb-webinar-facts{grid-template-columns:1fr;} .vb-register-card.vb-contact-form{padding:28px 22px;}}

/* ===== MEMBERSHIP PAGE ===== */
.vb-levels{display:grid; gap:14px; max-width:860px; margin:0 auto;}
.vb-level{display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--vb-line); border-radius:16px; padding:20px 22px;}
.vb-level-code{flex:0 0 auto; width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--vb-primary),var(--vb-accent));}
.vb-level h3{font-size:16px; margin-bottom:4px; color:var(--vb-ink);}
.vb-level p{font-size:13px; line-height:1.7; color:var(--vb-ink-soft); margin:0;}
.vb-plan{position:relative; background:#fff; border:1px solid var(--vb-line); border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s;}
.vb-plan:hover{transform:translateY(-4px); box-shadow:0 16px 40px rgba(42,23,18,.08);}
.vb-plan-featured{border-color:var(--vb-primary); box-shadow:0 18px 50px rgba(242,106,46,.15);}
.vb-plan-badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--vb-primary); color:#fff; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:999px; white-space:nowrap;}
.vb-plan h3{font-size:18px; margin-bottom:10px; color:var(--vb-ink);}
.vb-plan-price{font-family:"Fraunces",serif; font-size:36px; font-weight:600; color:var(--vb-ink); line-height:1.1;}
.vb-plan-price small{font-family:"Inter",sans-serif; font-size:13px; font-weight:500; color:var(--vb-ink-soft);}
.vb-plan-note{font-size:12.5px; color:var(--vb-primary-dark); font-weight:600; margin:8px 0 18px;}
.vb-plan-list{list-style:none; padding:0; margin:0 0 24px; flex:1 1 auto;}
.vb-plan-list li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--vb-ink); padding:7px 0; border-bottom:1px solid var(--vb-line);}
.vb-plan-list li:last-child{border-bottom:none;}
.vb-plan-list i{color:var(--vb-primary); font-size:16px; flex:0 0 auto;}
@media (max-width:991.98px){.vb-method{grid-template-columns:repeat(2,1fr);}}
@media (max-width:575.98px){.vb-method{grid-template-columns:1fr;}}

/* ===== VB ANATOMY EXPERIENCE — lesson list (no thumbnails, in-page player) ===== */
.vb-ytlist{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:1000px; margin-left:auto; margin-right:auto;}
.vb-ytlist-card{
  display:flex; align-items:center; gap:16px; width:100%; text-align:left; background:#fff; border:1px solid var(--vb-line);
  border-radius:16px; padding:16px 18px; color:inherit; cursor:pointer;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.vb-ytlist-card:hover{transform:translateY(-3px); border-color:var(--vb-primary); box-shadow:0 14px 34px rgba(42,23,18,.08);}
.vb-ytlist-num{
  width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:var(--vb-panel); color:var(--vb-accent); font-family:"Fraunces",serif; font-weight:700; font-size:17px;
  transition:background .2s, color .2s;
}
.vb-ytlist-card:hover .vb-ytlist-num{background:var(--vb-grad); color:#fff;}
.vb-ytlist-meta{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1;}
.vb-ytlist-title{font-weight:700; font-size:14.5px; color:var(--vb-ink); line-height:1.35;}
.vb-ytlist-tag{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--vb-accent);}
.vb-ytlist-arrow{font-size:24px; color:var(--vb-ink-soft); opacity:.45; transition:opacity .2s, color .2s, transform .2s;}
.vb-ytlist-card:hover .vb-ytlist-arrow{opacity:1; color:var(--vb-primary); transform:translateX(3px);}
@media (max-width:767px){.vb-ytlist{grid-template-columns:1fr;}}

.vb-lesson-modal .modal-content{border:0; border-radius:18px; overflow:hidden; background:#fff;}
.vb-lesson-modal .modal-header{border-bottom:1px solid var(--vb-line); padding:14px 20px;}
.vb-lesson-modal .modal-title{font-size:16px; font-weight:700; color:var(--vb-ink);}
.vb-lesson-modal .modal-body{padding:0; background:#000;}
.vb-lesson-frame{position:relative; aspect-ratio:16/9; width:100%;}
.vb-lesson-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* ===== ARTICLE PAGE ===== */
.vb-article-hero{padding:44px 0 40px;}
.vb-article-hero .vb-hero-title{font-size:38px; line-height:1.18; max-width:860px; margin:10px auto 16px;}
.vb-article-back{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--vb-ink-soft); text-decoration:none; margin-bottom:14px;}
.vb-article-back:hover{color:var(--vb-primary-dark);}
.vb-article-meta{display:flex; justify-content:center; flex-wrap:wrap; gap:18px; font-size:13px; color:var(--vb-ink-soft);}
.vb-article-meta i{color:var(--vb-primary); margin-right:4px;}
.vb-article-section{padding-top:0; margin-top:-6px;}
.vb-article{max-width:780px; margin:0 auto; background:#fff; border:1px solid var(--vb-line); border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(42,23,18,.07);}
.vb-article-figure{margin:0;}
.vb-article-figure img{display:block; width:100%; max-height:440px; object-fit:cover;}
.vb-article-body{padding:40px 48px 28px; font-size:16px; line-height:1.85; color:var(--vb-ink);}
.vb-article-body p{margin-bottom:18px;}
.vb-article-body h3{font-size:22px; margin:32px 0 12px; color:var(--vb-ink);}
.vb-article-body strong{color:var(--vb-accent);}
.vb-article-kicker{font-family:"Fraunces",serif; font-size:22px; font-weight:600; color:var(--vb-accent);}
.vb-article-body > p:first-of-type:not(.vb-article-kicker)::first-letter{font-family:"Fraunces",serif; font-size:54px; line-height:.9; float:left; margin:6px 10px 0 0; color:var(--vb-primary-dark);}
.vb-article-sign{margin-top:30px; padding-top:18px; border-top:1px solid var(--vb-line); font-size:14.5px; color:var(--vb-ink-soft);}
.vb-article-sign strong{color:var(--vb-ink);}
.vb-article-share{display:flex; align-items:center; gap:10px; padding:18px 48px 28px; flex-wrap:wrap;}
.vb-article-share > span{font-size:12.5px; font-weight:600; color:var(--vb-ink-soft); margin-right:auto;}
.vb-article-share a,.vb-article-share button{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--vb-line);
  background:var(--vb-paper); color:var(--vb-ink-soft); font-size:17px; transition:all .2s; text-decoration:none; cursor:pointer;
}
.vb-article-share a:hover,.vb-article-share button:hover{background:var(--vb-grad); color:#fff; border-color:transparent;}
.vb-copy-link.is-copied{background:#2E9E5B; color:#fff; border-color:transparent;}
.vb-article-more{max-width:1000px; margin:56px auto 0;}
.vb-article-more h2{text-align:center; font-size:26px; margin-bottom:10px;}
@media (max-width:767px){
  .vb-article-hero .vb-hero-title{font-size:28px;}
  .vb-article-body{padding:28px 22px 20px; font-size:15px;}
  .vb-article-share{padding:12px 22px 22px;}
}

/* ===== EXPLORE TOPICS — hand-drawn PNG icons ===== */
.vb-topic-img{width:180px; height:180px; object-fit:contain; display:block; transition:transform .25s ease;}
.vb-topic-tile:hover .vb-topic-img{transform:scale(1.06);}
@media (max-width:767px){.vb-topic-img{width:124px; height:124px;}}

.vb-topics-scroller{row-gap:14px;}

/* 5 tiles per row on desktop */
@media (min-width:992px){.vb-col-fifth{flex:0 0 20%; max-width:20%;} .vb-topic-circle{width:200px; height:200px;} .vb-topic-img{width:164px; height:164px;}}

/* ===== MEMBERSHIP PAGE ===== */
.vb-mem-jump{display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:22px;}
.vb-mem-jump a{display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--vb-line); color:var(--vb-ink); font-size:13px; font-weight:600; text-decoration:none; transition:all .2s;}
.vb-mem-jump a i{color:var(--vb-primary);}
.vb-mem-jump a:hover{border-color:var(--vb-primary); transform:translateY(-2px); box-shadow:0 8px 20px rgba(42,23,18,.08);}

.vb-levels{display:grid; gap:16px; max-width:960px; margin:0 auto;}
.vb-level{background:#fff; border:1px solid var(--vb-line); border-radius:20px; padding:22px 26px; position:relative; overflow:hidden;}
.vb-level::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--vb-grad); opacity:.35;}
.vb-level-top{border-color:rgba(242,106,46,.5); box-shadow:0 18px 44px rgba(242,106,46,.12);}
.vb-level-top::before{opacity:1;}
.vb-level-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px;}
.vb-level-code{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:var(--vb-grad); color:#fff; font-family:"Fraunces",serif; font-weight:700; font-size:20px; flex:0 0 auto;}
.vb-level-head h3{font-size:19px; margin:0 0 2px;}
.vb-level-head p{margin:0; font-size:13px; color:var(--vb-ink-soft);}
.vb-level-incl{margin-left:auto; font-size:12px; font-weight:600; color:var(--vb-accent); background:var(--vb-panel); padding:6px 12px; border-radius:999px;}
.vb-level-incl i{margin-right:4px;}
.vb-level-list{margin:0; padding-left:0; list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px; counter-reset:none;}
.vb-level-list li{font-size:13.5px; color:var(--vb-ink); padding-left:0; display:flex; gap:10px; align-items:baseline;}
.vb-level-list li::before{content:counter(list-item) "."; color:var(--vb-primary); font-weight:700; font-size:12px; min-width:22px;}
.vb-levels-note{max-width:960px; margin:18px auto 0; font-size:13px; color:var(--vb-ink-soft); text-align:center;}
.vb-levels-note i{color:var(--vb-primary); margin-right:4px;}

.vb-course-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.vb-course-group{background:#fff; border:1px solid var(--vb-line); border-radius:18px; padding:20px 22px;}
.vb-course-group h3{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--vb-accent); font-weight:700; margin:0 0 10px;}
.vb-course-group ul{list-style:none; margin:0; padding:0;}
.vb-course-group li + li{border-top:1px solid var(--vb-line);}
.vb-course-group a{display:flex; align-items:center; gap:10px; padding:10px 2px; color:var(--vb-ink); text-decoration:none; font-size:14px; font-weight:600; transition:color .2s;}
.vb-course-group a > i:first-child{color:var(--vb-primary); font-size:16px;}
.vb-course-group a span{flex:1;}
.vb-course-arrow{opacity:0; transform:translateX(-4px); transition:all .2s; color:var(--vb-primary);}
.vb-course-group a:hover{color:var(--vb-primary-dark);}
.vb-course-group a:hover .vb-course-arrow{opacity:1; transform:none;}

.vb-mcq-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.vb-mcq{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; background:#fff; border:1px solid var(--vb-line); border-radius:16px; padding:20px 12px; text-decoration:none; color:var(--vb-ink); transition:all .2s;}
.vb-mcq:hover{transform:translateY(-3px); border-color:var(--vb-primary); box-shadow:0 14px 30px rgba(42,23,18,.08); color:var(--vb-ink);}
.vb-mcq-ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--vb-panel); color:var(--vb-accent); font-size:18px; margin-bottom:4px;}
.vb-mcq-label{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--vb-ink-soft); font-weight:700;}
.vb-mcq-name{font-size:14px; font-weight:700;}
.vb-mcq-paper{background:var(--vb-grad); color:#fff; border-color:transparent;}
.vb-mcq-paper .vb-mcq-ico{background:rgba(255,255,255,.18); color:#fff;}
.vb-mcq-paper .vb-mcq-label{color:rgba(255,255,255,.8);}
.vb-mcq-paper:hover{color:#fff;}

@media (max-width:991px){
  .vb-course-grid{grid-template-columns:repeat(2,1fr);}
  .vb-mcq-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:575px){
  .vb-level-list{grid-template-columns:1fr;}
  .vb-course-grid{grid-template-columns:1fr;}
  .vb-mcq-grid{grid-template-columns:repeat(2,1fr);}
  .vb-level-incl{margin-left:0;}
}


/* ===== MEMBERSHIP — alternating level path (ILH "Pick the step" style) ===== */
.vb-path{position:relative; max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:56px; padding:10px 0;}
.vb-path-line{
  position:absolute; left:50%; top:0; bottom:0; width:4px; transform:translateX(-50%); border-radius:999px;
  background:linear-gradient(180deg,#94A3B8 0%,#FBBF24 26%,#F87171 50%,#22D3EE 74%,#8B5CF6 100%); opacity:.55;
}
.vb-path-item{position:relative; display:flex;}
/* floating icon square on the line */
.vb-path-item > .vb-path-node{
  position:absolute; left:50%; top:38px; transform:translateX(-50%); z-index:2;
  width:72px; height:72px; border-radius:20px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--t1),var(--t2)); color:#fff; font-size:30px;
  box-shadow:0 14px 30px color-mix(in srgb, var(--t2) 35%, transparent), 0 0 0 5px #fff;
  transition:transform .25s;
}
.vb-path-item:hover > .vb-path-node{transform:translateX(-50%) scale(1.08) rotate(5deg);}
.vb-path-card{
  position:relative; overflow:hidden; width:calc(50% - 64px); border-radius:26px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--tsoft) 80%, #fff) 0%, #fff 50%, color-mix(in srgb, var(--tsoft) 80%, #fff) 100%);
  border:2px solid color-mix(in srgb, var(--t1) 40%, #fff);
  box-shadow:0 20px 44px color-mix(in srgb, var(--t2) 14%, transparent);
  padding:30px 32px; transition:transform .25s, box-shadow .25s;
}
.vb-path-item:hover .vb-path-card{transform:translateY(-8px) scale(1.015); box-shadow:0 28px 60px color-mix(in srgb, var(--t2) 22%, transparent);}
.vb-path-right{justify-content:flex-end;}
.vb-path-glow{position:absolute; border-radius:50%; background:var(--t1); filter:blur(34px); pointer-events:none;}
.vb-path-glow-a{width:150px; height:150px; top:-50px; right:-50px; opacity:.2;}
.vb-path-glow-b{width:110px; height:110px; bottom:-45px; left:-45px; opacity:.15;}
.vb-path-head{position:relative; z-index:1; display:flex; gap:16px; align-items:flex-start; margin-bottom:14px;}
.vb-path-node-sm{display:none; position:static; transform:none; width:56px; height:56px; font-size:24px; border-radius:16px; flex:0 0 auto;}
.vb-path-badge{
  display:inline-flex; padding:3px 11px; border-radius:999px; font-size:10px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,var(--t1),var(--t2)); margin-bottom:7px;
}
.vb-path-head h3{font-size:22px; margin:0 0 2px; color:#1E293B;}
.vb-path-tagline{margin:0; font-size:15px; font-weight:600; color:var(--taccent);}
.vb-path-desc{position:relative; z-index:1; font-size:14.5px; line-height:1.7; color:#475569; margin:0 0 18px;}
.vb-path-benefits{position:relative; z-index:1; list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column; gap:10px;}
.vb-path-benefits li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; font-weight:500; color:#334155; line-height:1.5;}
.vb-path-benefits i{color:var(--taccent); font-size:16px; margin-top:1px;}
.vb-path-btn{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer;
  padding:12px 22px; border-radius:12px; font-size:14px; font-weight:700; color:#fff; text-decoration:none;
  background:linear-gradient(90deg,var(--t1),var(--t2)); transition:transform .25s, box-shadow .25s;
}
.vb-path-btn:hover{color:#fff; transform:scale(1.05); box-shadow:0 14px 30px color-mix(in srgb, var(--t2) 40%, transparent);}
.vb-path-btn-arrow{transition:transform .25s;}
.vb-path-btn:hover .vb-path-btn-arrow{transform:translateX(4px);}
/* reveal animation */
@keyframes vbPathIn{from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:none;}}
.vb-path-item{animation:vbPathIn .7s ease both;}
.vb-path-item:nth-child(2){animation-delay:.05s;} .vb-path-item:nth-child(3){animation-delay:.1s;}
.vb-path-item:nth-child(4){animation-delay:.15s;} .vb-path-item:nth-child(5){animation-delay:.2s;} .vb-path-item:nth-child(6){animation-delay:.25s;}
@media (max-width:991px){
  .vb-path{gap:28px;}
  .vb-path-line{left:0; transform:none;}
  .vb-path-item > .vb-path-node{display:none;}
  .vb-path-node-sm{display:grid;}
  .vb-path-card{width:100%; margin-left:20px; padding:24px 22px;}
  .vb-path-right{justify-content:flex-start;}
}

/* ===== ABOUT — profile, experience, publications ===== */
.vb-profile-card{background:#fff; border:1px solid var(--vb-line); border-radius:22px; padding:34px 36px;}
.vb-profile-name{font-size:26px; margin:6px 0 2px;}
.vb-belief-list{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:13px;}
.vb-belief-list li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; font-weight:600; color:var(--vb-ink); line-height:1.5;}
.vb-belief-list i{color:var(--vb-primary); font-size:17px; margin-top:1px;}
.vb-exp-lead{font-size:14.5px; line-height:1.75; color:var(--vb-ink); margin:14px 0 18px;}
.vb-exp-item{display:flex; gap:14px; align-items:center; background:var(--vb-panel); border-radius:14px; padding:14px 18px; margin-bottom:18px;}
.vb-exp-item i{font-size:22px; color:var(--vb-accent);}
.vb-exp-item strong{display:block; font-size:15px; color:var(--vb-ink);}
.vb-exp-item span{font-size:12.5px; color:var(--vb-ink-soft); font-weight:600;}
.vb-exp-text{font-size:13.5px; line-height:1.7; color:var(--vb-ink-soft); margin-bottom:14px;}
.vb-exp-sub{font-size:12.5px; font-weight:700; color:var(--vb-ink); margin-bottom:8px;}
.vb-exp-inst{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.vb-exp-inst li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--vb-ink); line-height:1.5;}
.vb-exp-inst i{color:var(--vb-primary); font-size:14px; margin-top:2px;}

.vb-pub-grid{columns:2; column-gap:20px; max-width:1080px; margin:0 auto;}
.vb-pub-group{break-inside:avoid; background:#fff; border:1px solid var(--vb-line); border-radius:18px; padding:22px 24px; margin-bottom:20px;}
.vb-pub-group h3{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--vb-ink); margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--vb-line);}
.vb-pub-group h3 i{color:var(--vb-accent); font-size:17px;}
.vb-pub-count{margin-left:auto; font-size:11px; font-weight:700; color:var(--vb-accent); background:var(--vb-panel); border-radius:999px; padding:3px 9px;}
.vb-pub-group ul{list-style:none; margin:0; padding:0;}
.vb-pub-group li{font-size:12.5px; line-height:1.65; color:var(--vb-ink-soft); padding:9px 0;}
.vb-pub-group li + li{border-top:1px dashed var(--vb-line);}
.vb-pub-link{display:inline-block; margin-left:6px; font-weight:700; font-size:12px; color:var(--vb-primary-dark); text-decoration:none; white-space:nowrap;}
.vb-pub-link:hover{text-decoration:underline; color:var(--vb-accent);}
.vb-pub-link::after{content:" →";}
@media (max-width:991px){.vb-pub-grid{columns:1;} .vb-profile-card{padding:26px 24px;}}

/* ===== FULL PUBLICATION LIST MODAL ===== */
.vb-pub-modal .modal-content{border:0; border-radius:20px;}
.vb-pub-modal .modal-header{align-items:flex-start; border-bottom:1px solid var(--vb-line); padding:20px 26px 16px;}
.vb-pub-modal .modal-title{font-size:20px; color:var(--vb-ink);}
.vb-pub-modal-sub{margin:6px 0 0; font-size:12.5px; color:var(--vb-ink-soft);}
.vb-pub-modal .modal-body{padding:20px 26px 26px;}
.vb-pub-modal-section{
  font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#fff;
  background:var(--vb-grad); display:inline-block; padding:6px 14px; border-radius:999px; margin:14px 0 12px;
}
.vb-pub-modal-section:first-child{margin-top:0;}
.vb-pub-modal-journal{font-size:14px; font-weight:700; color:var(--vb-accent); margin:14px 0 6px;}
.vb-pub-modal-list{list-style:none; margin:0; padding:0;}
.vb-pub-modal-list li + li{border-top:1px dashed var(--vb-line);}
.vb-pub-modal-list a{
  display:block; padding:9px 10px; font-size:13px; line-height:1.6; color:var(--vb-ink);
  text-decoration:none; border-radius:10px; transition:background .15s, color .15s;
}
.vb-pub-modal-list a:hover{background:var(--vb-panel); color:var(--vb-primary-dark);}
.vb-pub-modal-list a i{font-size:11px; color:var(--vb-primary); margin-left:4px;}

/* ===== ABOUT — AWARDS & RECOGNITION ===== */
.vb-award-photos{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:960px; margin:8px auto 26px;}
.vb-award-photos img{width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center 20%; border-radius:18px; box-shadow:0 16px 40px rgba(42,23,18,.12);}
.vb-award-list{
  list-style:none; max-width:960px; margin:0 auto; padding:6px 0;
  background:#fff; border:1px solid var(--vb-line); border-radius:18px;
  columns:2; column-gap:0;
}
.vb-award-list li{display:flex; align-items:center; gap:12px; padding:13px 26px; break-inside:avoid;}
.vb-award-list li:hover{background:var(--vb-paper);}
.vb-award-list i{color:#E4A11B; font-size:17px; flex:0 0 auto;}
.vb-award-title{flex:1; font-size:14px; font-weight:600; color:var(--vb-ink); line-height:1.45;}
.vb-award-year{font-size:13px; font-weight:700; color:var(--vb-ink-soft);}
@media (max-width:767px){
  .vb-award-photos{grid-template-columns:1fr;}
  .vb-award-list{columns:1;}
}
#awards .vb-award-list{
  columns:1; margin:0; max-width:none;
  background:#fff; border:1px solid var(--vb-line); border-radius:18px; padding:8px 0;
}
#awards .vb-award-list li{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 24px; margin:0;
}
#awards .vb-award-list li + li{border-top:1px dashed var(--vb-line);}
#awards .vb-award-list li:hover{background:var(--vb-paper);}
#awards .vb-award-list i{color:var(--vb-accent); font-size:17px; margin-top:1px;}
#awards .vb-award-title{font-size:13.5px; line-height:1.6;}

/* staggered overlapping award photos, like the reference slide */
.vb-award-collage{position:relative; min-height:480px;}
.vb-award-collage img{
  position:absolute; object-fit:cover; border-radius:14px;
  box-shadow:0 16px 40px rgba(42,23,18,.18); background:#fff;
}
.vb-award-collage img:nth-child(1){top:0; left:0; width:70%; aspect-ratio:16/11; z-index:1;}
.vb-award-collage img:nth-child(2){bottom:0; right:0; width:66%; aspect-ratio:4/3; z-index:2;}
@media (max-width:991px){
  .vb-award-collage{min-height:0;}
  .vb-award-collage img{position:static; width:100%; aspect-ratio:16/10; margin-bottom:16px;}
}

/* ---------- BEYOND THE CLASSROOM ---------- */
/* staggered, slightly overlapping collage like the reference slide */
.vb-beyond-photos{position:relative; min-height:540px;}
.vb-beyond-photos img{
  position:absolute; object-fit:cover; border-radius:14px;
  box-shadow:0 16px 40px rgba(42,23,18,.18); background:#fff;
}
.vb-beyond-photos img:nth-child(1){ /* panel lecture — top left */
  top:0; left:0; width:62%; aspect-ratio:16/10; z-index:1;
}
.vb-beyond-photos img:nth-child(2){ /* on stage with mic — right, overlapping */
  top:22%; right:0; width:54%; aspect-ratio:4/3; z-index:2;
}
.vb-beyond-photos img:nth-child(3){ /* training programme — bottom left, overlapping */
  bottom:0; left:5%; width:56%; aspect-ratio:16/11; z-index:3;
}
@media (max-width:991px){
  .vb-beyond-photos{min-height:0;}
  .vb-beyond-photos img{position:static; width:100%; aspect-ratio:16/10; margin-bottom:16px;}
}