/* =========================================================
   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-about-intro{padding-top:32px;}
.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;}
  /* Phones/tablets: three stats on the top row, two on the bottom, so no tile is left
     stranded on its own row. A 6-column grid lets the top three span 2 and the last two span 3. */
  .vb-stats .row{
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:26px 6px; width:100%;
    margin:0; --bs-gutter-x:0; --bs-gutter-y:0;
  }
  .vb-stats .vb-stat{grid-column:span 2; width:auto; max-width:none; min-width:0; padding:0; margin:0;}
  .vb-stats .vb-stat:nth-child(n+4){grid-column:span 3;}
  .vb-stats .vb-stat-number{font-size:clamp(20px, 5.8vw, 30px);}
  .vb-stats .vb-stat-label{font-size:12px; line-height:1.4; max-width:none;}
}
.vb-stat-number{
  font-family:'Inter', sans-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:800;
  line-height:1.1;
  letter-spacing:-0.015em;
  color:#000;
  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:13px;
  font-weight:500;
  color:#000;
  line-height:1.45;
}
/* Desktop: each label on one line (the "|" break is dropped, a space takes its place).
   Phones/tablets keep the two-line break so the narrower columns don't overflow. */
@media (min-width:992px){
  .vb-stat-label{max-width:none; white-space:nowrap; font-size:12.5px;}
  .vb-stat-br{display:none;}
}
.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;}
/* Reviews (80px bottom) sits right above Topics (80px top) — halve the top so the gap isn't doubled. */
#topics{padding-top:24px;}
/* About and Proof share the same panel background, so their 80px + 80px reads as one big gap. */
#proof{padding-top:24px;}

/* 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: a 2-up grid so every topic is visible at once (no hidden swipe strip). */
@media (max-width:767.98px){
  .vb-topics-scroller{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:26px 14px;
    margin:0;
    --bs-gutter-x:0; --bs-gutter-y:0;
  }
  .vb-topic-tile{width:auto; max-width:none; padding:0; margin:0;}
  .vb-topic-circle{width:100%; height:auto; aspect-ratio:1/1; border-radius:18px;}
  .vb-topic-ic{width:60%; height:60%;}
  .vb-topic-name{font-size:13.5px; line-height:1.3;}
}


/* ---------- 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:transparent;
  border:1.5px solid var(--vb-primary);
  color:var(--vb-primary-dark);
  border-radius:100px;
  transition:all .2s ease;
}
.vb-btn-inside:hover{
  background:var(--vb-primary);
  border-color:var(--vb-primary);
  color:#fff;
}

@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{
  border-top:1px solid var(--vb-line);
  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:18px;}
.vb-footer-logo img{height:64px; width:auto; display:block;}
@media (max-width:575.98px){.vb-footer-logo img{height:50px;}}
.vb-footer-about{font-size:13.5px; line-height:1.7; color:var(--vb-ink-soft); max-width:340px; margin:0 0 20px;}
.vb-footer-links{list-style:none; padding:0; margin:0;}
.vb-footer-links li{margin-bottom:11px; font-size:13.5px;}
@media (min-width:992px){
  .vb-footer-links li{white-space:nowrap;}
  .vb-footer-contact li{white-space:normal;}
}.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{margin-bottom:12px;}
.vb-footer-contact a{display:flex; align-items:center; gap:12px; word-break:break-word;}
.vb-footer-contact a:hover{transform:none;}
.vb-footer-contact a:hover i{background:var(--vb-primary); color:#fff; border-color:var(--vb-primary);}
.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:13px;
  transition:all .2s ease;
}

.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-legal{display:flex; flex-wrap:wrap; gap:4px 18px; margin-right:auto; margin-left:24px;}
.vb-footer-legal a{font-size:12px; color:var(--vb-ink-soft); text-decoration:none;}
.vb-footer-legal a:hover{color:var(--vb-primary-dark); text-decoration:underline;}
@media (max-width:575.98px){.vb-footer-legal{margin-left:0; order:3; width:100%;}}
.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;}
#levels.vb-section{padding-top:32px;}
.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:12px; margin-top:0; position:relative; z-index:3;}
.vb-contact-wrap{
  display:grid; grid-template-columns:minmax(300px,380px) 1fr;
  background:var(--vb-white); border:1px solid #F3C4A5; border-radius:24px;
  overflow:hidden; box-shadow:0 24px 60px rgba(42,23,18,.08);
}
.vb-contact-aside{
  position:relative; padding:40px 36px; color:var(--vb-ink);
  background:linear-gradient(120deg, #FFF6EF 0%, #FDE2CE 55%, #F9C6A3 100%);
  border-right:1px solid #F3C4A5;
}
.vb-contact-aside::after{
  content:""; position:absolute; right:-80px; bottom:-80px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,106,46,.14) 0%, rgba(242,106,46,0) 70%); pointer-events:none;
}
.vb-contact-aside h2{color:var(--vb-ink); font-size:24px; margin-bottom:8px;}
.vb-contact-aside > p{color:var(--vb-ink-soft); 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(42,23,18,.1);}
.vb-contact-ico{
  width:42px; height:42px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  background:#fff; border:1px solid rgba(42,23,18,.1); color:var(--vb-primary-dark); font-size:18px;
}
.vb-contact-list strong{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--vb-ink-soft); font-weight:600;}
.vb-contact-list a,.vb-contact-list div > span{color:var(--vb-ink); font-size:15px; font-weight:600; text-decoration:none;}
.vb-contact-list a:hover{color:var(--vb-primary-dark); 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; color:var(--vb-ink-soft); margin-right:auto;}
.vb-contact-social a{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--vb-primary-dark);
  background:#fff; border:1px solid rgba(42,23,18,.1); transition:background .2s, transform .2s, color .2s;
}
.vb-contact-social a:hover{background:var(--vb-primary); border-color:var(--vb-primary); color:#fff; transform:translateY(-2px);}

.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; border-right:0; border-bottom:1px solid #F3C4A5;}
  .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-body ul{margin:0 0 18px; padding-left:22px;}
.vb-article-body ul li{margin-bottom:8px;}
.vb-article-body a{color:var(--vb-primary-dark); text-decoration:underline; text-underline-offset:2px;}
.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:78%; height:78%;}}

.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;}

/* Individual courses — same quiet card language as Research & Publications */
.vb-course-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.vb-course-group{background:#fff; border:1px solid var(--vb-line); border-radius:18px; padding:22px 24px;}
.vb-course-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-course-group h3 i{color:var(--vb-accent); font-size:17px;}
.vb-course-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-course-group ul{list-style:none; margin:0; padding:0;}
.vb-course-group li + li{border-top:1px dashed var(--vb-line);}
.vb-course-group a{display:flex; align-items:center; gap:10px; padding:10px 0; color:var(--vb-ink-soft); text-decoration:none; font-size:12.5px; font-weight:500; line-height:1.65; transition:color .2s;}
.vb-course-group a > i:first-child{color:var(--vb-accent); font-size:13px; opacity:.85;}
.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;}
/* Live sets — a lighter shade of the brand gradient (papers and topics alike) */
.vb-mcq-live{
  background:linear-gradient(135deg,#FDEBDD,#FBD9C2);
  border-color:rgba(242,106,46,.35); color:var(--vb-ink);
}
.vb-mcq-live .vb-mcq-ico{background:rgba(255,255,255,.75); color:var(--vb-accent);}
.vb-mcq-live .vb-mcq-label{color:var(--vb-accent);}

/* Not-yet-live sets — grey, not clickable */
.vb-mcq-soon{
  cursor:default; pointer-events:none; user-select:none;
  background:#f2f0ee; border-color:var(--vb-line);
  color:#9b948f; opacity:.75;
}
.vb-mcq-soon .vb-mcq-ico{background:#e7e3e0; color:#a8a19b;}
.vb-mcq-soon .vb-mcq-label{color:#a8a19b;}
.vb-mcq-soon:hover{transform:none; box-shadow:none; border-color:var(--vb-line);}

@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,#F98A4E 0%,#F26A2E 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-benefits.is-two-col{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 18px;}
@media (max-width:575.98px){.vb-path-benefits.is-two-col{grid-template-columns:1fr;}}
.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:auto; flex:1 1 auto; min-width:0; margin-left:20px; padding:24px 22px;}
  .vb-path-right{justify-content:flex-start;}
}
@media (max-width:575.98px){
  .vb-path{gap:22px;}
  .vb-path-card{margin-left:14px; padding:20px 18px; border-radius:20px;}
  .vb-path-head{gap:12px;}
  .vb-path-node-sm{width:46px; height:46px; font-size:20px; border-radius:13px;}
  .vb-path-head h3{font-size:18px;}
  .vb-path-tagline{font-size:13.5px;}
  .vb-path-desc{font-size:13.5px; margin-bottom:14px;}
  .vb-path-btn{width:100%; justify-content:center; padding:12px 16px;}
  .vb-mem-jump a{font-size:12px; padding:8px 13px;}
}

/* ===== 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:12px 24px;
}
#awards .vb-award-list li{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; margin:0;
}
#awards .vb-award-list li + li{border-top:1px dashed var(--vb-line);}
#awards .vb-award-list li:hover{background:#fff;}
#awards .vb-award-list i{color:var(--vb-accent); font-size:15px; margin-top:2px;}
#awards .vb-award-title{font-size:12.5px; font-weight:500; line-height:1.65; color:var(--vb-ink-soft);}

/* Beyond the Classroom list — same elegant card as publications */
#beyond .vb-belief-list{
  gap:0; background:#fff; border:1px solid var(--vb-line); border-radius:18px;
  padding:12px 24px;
}
#beyond .vb-belief-list li{
  gap:10px; padding:10px 0; font-size:12.5px; font-weight:500;
  color:var(--vb-ink-soft); line-height:1.65;
}
#beyond .vb-belief-list li + li{border-top:1px dashed var(--vb-line);}
#beyond .vb-belief-list i{color:var(--vb-accent); font-size:15px; margin-top:2px;}

/* staggered overlapping award photos, like the reference slide */
.vb-award-collage{position:relative; min-height:380px; max-width:480px; margin:0 auto;}
.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:420px; max-width:480px; margin:0 auto;}
.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;}
}
/* Meet Your Teacher — belief pointers under the intro paragraphs */
.vb-about-points{list-style:none; padding:0; margin:18px 0 6px; display:grid; grid-template-columns:repeat(2,1fr); gap:10px 22px;}
.vb-about-points li{display:flex; align-items:flex-start; gap:10px; font-family:inherit; font-size:14px; line-height:1.65; color:var(--vb-ink);}
.vb-about-points i{color:var(--vb-primary); font-size:15px; line-height:1.65; flex:none;}
@media (max-width:767.98px){.vb-about-points{grid-template-columns:1fr;}}

/* FAQ answers with bullet points */
.vb-faq-list{margin:10px 0 0; padding-left:20px;}
.vb-faq-list li{margin-bottom:6px;}
.vb-faq-list li::marker{color:var(--vb-primary);}

/* Footer — phone layout: brand block, two link columns side by side, contact full width */
@media (max-width:767.98px){
  .vb-footer{padding:48px 0 20px;}
  .vb-footer .row{--bs-gutter-y:2rem;}
  .vb-footer-about{max-width:none;}
  .vb-footer-bottom{margin-top:32px;}
}

/* ===== MEMBERSHIP — compact level cards =====
   Desktop: two cards per row instead of one zig-zag card per row, so the section is
   roughly half the height. Phones keep the single-column stack defined above. */
.vb-path-node-sm{background:linear-gradient(135deg,var(--t1),var(--t2)); color:#fff; place-items:center;}
@media (min-width:992px){
  .vb-path{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; padding:0;}
  .vb-path-line{display:none;}
  .vb-path-item > .vb-path-node{display:none;}
  .vb-path-node-sm{display:grid; width:44px; height:44px; font-size:20px; border-radius:13px;}
  .vb-path-item{display:flex;}
  .vb-path-item:last-child{grid-column:1 / -1;}
  .vb-path-card{width:100%; margin:0; padding:22px 24px; display:flex; flex-direction:column;}
  .vb-path-item:hover .vb-path-card{transform:translateY(-4px);}
  .vb-path-head{margin-bottom:10px; gap:12px;}
  .vb-path-head h3{font-size:19px;}
  .vb-path-tagline{font-size:13.5px;}
  .vb-path-desc{font-size:13.5px; line-height:1.6; margin-bottom:12px;}
  .vb-path-benefits{margin-bottom:16px; gap:6px;}
  .vb-path-benefits li{font-size:13px; line-height:1.4;}
  .vb-path-benefits.is-two-col{gap:6px 16px;}
  .vb-path-btn{margin-top:auto; align-self:flex-start; padding:10px 18px; font-size:13.5px;}
  .vb-path-item:last-child .vb-path-benefits{flex-direction:row; flex-wrap:wrap; gap:6px 24px;}
}

/* ===== MEMBERSHIP — plans: Monthly / Yearly tabs + level cards ===== */
.vb-plan-tabs{display:inline-flex; gap:4px; padding:5px; margin:6px auto 26px; list-style:none; background:#fff; border:1px solid var(--vb-line); border-radius:999px; position:relative; left:50%; transform:translateX(-50%);}
.vb-plan-tab{border:0; background:transparent; color:var(--vb-ink-soft); font-size:14px; font-weight:600; padding:9px 26px; border-radius:999px; cursor:pointer; transition:background .2s, color .2s;}
.vb-plan-tab:hover{color:var(--vb-ink);}
.vb-plan-tab.active{background:var(--vb-primary); color:#fff; box-shadow:0 6px 16px rgba(242,106,46,.28);}
.vb-plan-tagline{font-size:12.5px; color:var(--vb-ink-soft); margin:-4px 0 10px;}
.vb-plan{padding:26px 22px;}
.vb-plan h3{font-size:17px; margin-bottom:6px;}
.vb-plan-price{font-size:30px;}
.vb-plan-list li{font-size:13px;}

/* ===== MEMBERSHIP — tiered level visuals (staircase + metal/gem themes) ===== */
.vb-stair{list-style:none; margin:0 auto 34px; padding:0; max-width:760px; display:flex; align-items:flex-end; justify-content:center; gap:10px;}
.vb-stair li{flex:1 1 0; min-width:0;}
.vb-stair a{display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none;}
.vb-stair-step{
  width:100%; height:var(--h); border-radius:14px 14px 6px 6px; display:grid; place-items:center; color:#fff; font-size:22px;
  background:linear-gradient(160deg,var(--t1),var(--t2)); box-shadow:0 10px 22px color-mix(in srgb, var(--t2) 30%, transparent);
  transition:transform .25s, box-shadow .25s;
}
.vb-stair a:hover .vb-stair-step{transform:translateY(-4px); box-shadow:0 16px 30px color-mix(in srgb, var(--t2) 40%, transparent);}
.vb-stair b{font-size:12.5px; font-weight:700; color:var(--vb-ink); text-align:center; line-height:1.2;}
.vb-path-item{scroll-margin-top:90px;}
.vb-path-card{border-top:5px solid var(--t2);}
.vb-path-ghost{
  position:absolute; right:14px; top:-14px; z-index:0; font-family:'Fraunces',serif; font-weight:700; font-size:120px; line-height:1;
  color:var(--t1); opacity:.16; pointer-events:none; user-select:none;
}
.vb-path-incl{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; margin-bottom:10px; padding:4px 11px;
  border-radius:999px; font-size:11.5px; font-weight:700; color:var(--taccent); background:color-mix(in srgb, var(--t1) 18%, #fff);
}
.vb-path-newlabel{
  position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin:2px 0 8px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--taccent);
}
.vb-path-newlabel span{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px; color:#fff; background:var(--t2); letter-spacing:0;}
.vb-path-chips{position:relative; z-index:1; list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px;}
.vb-path-chips li{
  display:flex; gap:9px; align-items:flex-start; padding:8px 12px; border-radius:11px; font-size:13px; font-weight:500; line-height:1.4; color:#334155;
  background:rgba(255,255,255,.85); border:1px solid color-mix(in srgb, var(--t1) 30%, #fff);
}
.vb-path-chips i{color:var(--t2); font-size:15px; margin-top:1px;}
.vb-path-more{position:relative; z-index:1; margin-bottom:14px;}
.vb-path-more summary{
  list-style:none; cursor:pointer; display:inline-block; margin-bottom:8px; padding:6px 14px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--taccent); border:1.5px dashed var(--t2); transition:background .2s;
}
.vb-path-more summary::-webkit-details-marker{display:none;}
.vb-path-more summary:hover{background:color-mix(in srgb, var(--t1) 16%, #fff);}
.vb-path-more .vb-more-close{display:none;}
.vb-path-more[open] .vb-more-close{display:inline;}
.vb-path-more[open] .vb-more-open{display:none;}
.vb-path-item:last-child .vb-path-card{border-image:none; box-shadow:0 22px 50px color-mix(in srgb, var(--t2) 26%, transparent);}
@media (min-width:992px){
  .vb-path-item:last-child .vb-path-chips{flex-direction:row; flex-wrap:wrap;}
  .vb-path{align-items:start;}
}
@media (max-width:575.98px){
  .vb-stair{gap:6px;} .vb-stair-step{font-size:17px; border-radius:10px 10px 4px 4px;} .vb-stair b{font-size:10.5px;}
  .vb-path-ghost{font-size:90px;}
}
@media (prefers-reduced-motion:reduce){.vb-path-item{animation:none;}}

/* ===== MEMBERSHIP — tiered plan cards (colour-matched to the level cards) ===== */
.vb-plan-tier{padding:0; overflow:visible; border:1.5px solid color-mix(in srgb, var(--t1) 45%, #fff); border-top:5px solid var(--t2); border-radius:22px; box-shadow:0 14px 34px color-mix(in srgb, var(--t2) 12%, transparent);}
.vb-plan-tier:hover{transform:translateY(-6px); box-shadow:0 24px 50px color-mix(in srgb, var(--t2) 24%, transparent);}
.vb-plan-top{box-shadow:0 22px 54px color-mix(in srgb, var(--t2) 28%, transparent); border-width:2px;}
.vb-plan-tier .vb-plan-badge{background:linear-gradient(135deg,var(--t1),var(--t2)); top:-15px; box-shadow:0 6px 16px color-mix(in srgb, var(--t2) 40%, transparent);}
.vb-plan-top-band{display:flex; gap:12px; align-items:center; padding:22px 22px 16px; background:linear-gradient(180deg,var(--tsoft),#fff); border-radius:17px 17px 0 0;}
.vb-plan-ico{flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:21px; color:#fff; background:linear-gradient(135deg,var(--t1),var(--t2)); box-shadow:0 8px 18px color-mix(in srgb, var(--t2) 32%, transparent);}
.vb-plan-tier h3{margin:0; font-size:18px;}
.vb-plan-tier .vb-plan-tagline{margin:2px 0 0; font-size:12.5px; color:var(--taccent); font-weight:600;}
.vb-plan-pricebox{margin:0 22px; padding:14px 0 12px; border-top:1px dashed color-mix(in srgb, var(--t1) 55%, #fff); border-bottom:1px dashed color-mix(in srgb, var(--t1) 55%, #fff);}
.vb-plan-tier .vb-plan-price{font-size:38px; color:var(--taccent);}
.vb-plan-price-soon{font-family:"Inter",sans-serif; font-size:20px; font-weight:700; padding:8px 0;}
.vb-plan-tier .vb-plan-note{margin:4px 0 0; color:var(--vb-ink-soft); display:flex; gap:6px; align-items:center;}
.vb-plan-tier .vb-plan-note i{color:var(--t2);}
.vb-plan-tier .vb-plan-list{padding:12px 22px 0; margin:0;}
.vb-plan-tier .vb-plan-list i{color:var(--t2); font-size:15px; margin-top:2px;}
.vb-plan-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:18px 22px 22px; padding:13px 16px; border-radius:12px;
  font-size:14.5px; font-weight:700; color:#fff; text-decoration:none; background:linear-gradient(90deg,var(--t1),var(--t2));
  transition:transform .2s, box-shadow .2s;
}
.vb-plan-btn:hover{color:#fff; transform:scale(1.03); box-shadow:0 12px 26px color-mix(in srgb, var(--t2) 40%, transparent);}
.vb-plan-btn-ghost{background:#fff; color:var(--taccent); border:1.5px solid var(--t2);}
.vb-plan-btn-ghost:hover{color:var(--taccent); background:var(--tsoft);}
@media (min-width:992px){.vb-plan-tier{margin-top:8px;}}
.vb-plan-tier .vb-plan-price-soon{font-size:16px; white-space:nowrap; padding:10px 0 6px;}

/* ===== Device hardening: iPhone (Safari) + tablets ===== */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden; max-width:100%;}
/* The decorative hero glows bleed past the screen edge; clip them inside the hero so they
   can't widen the page (which shifted the whole layout sideways on phones). */
.vb-hero{overflow-x:clip;}
body{overflow-x:hidden; max-width:100%; position:relative; -webkit-tap-highlight-color:transparent;}
img,video,iframe{max-width:100%;}
/* iOS zooms the page when a focused field is under 16px — keep inputs at 16px on phones/tablets */
@media (max-width:991.98px){
  input,select,textarea,.form-control,.form-select{font-size:16px !important;}
}
/* iPhone notch / home-bar safe areas */
.vb-whatsapp{
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
}
.vb-footer{padding-bottom:calc(22px + env(safe-area-inset-bottom));}
/* Tablets (portrait iPad etc.): comfortable side gutters and 2-up card grids */
@media (min-width:576px) and (max-width:991.98px){
  .container{padding-left:24px; padding-right:24px;}
  .vb-section{padding:64px 0;}
  .vb-stat-number{font-size:clamp(26px, 4vw, 34px);}
}
/* Small phones (iPhone SE / mini) */
@media (max-width:389px){
  .container{padding-left:16px; padding-right:16px;}
  .vb-section{padding:52px 0;}
  .vb-section-head h2{font-size:24px;}
}

/* ===== Phone overflow fixes ===== */
/* Bootstrap g-5 gutters (3rem) are wider than the container's side padding on phones. */
@media (max-width:767.98px){
  .row.g-5{--bs-gutter-x:1.5rem;}
  .vb-contact-wrap > *{min-width:0;}
  .vb-contact-aside, .vb-contact-form{padding-left:20px; padding-right:20px; overflow-wrap:anywhere;}
}

/* ===== About page: photo groups become swipe carousels on phones/tablets ===== */
@media (max-width:991.98px){
  .vb-award-collage, .vb-beyond-photos{
    display:flex; gap:12px; max-width:none; min-height:0; margin:0;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:4px;
  }
  .vb-award-collage::-webkit-scrollbar, .vb-beyond-photos::-webkit-scrollbar{display:none;}
  .vb-award-collage img, .vb-beyond-photos img{
    position:static; flex:0 0 88%; width:88%; margin:0; aspect-ratio:16/10; object-fit:cover; scroll-snap-align:center;
  }
}
.vb-dots{display:none; justify-content:center; gap:7px; margin-top:12px;}
@media (max-width:991.98px){.vb-dots{display:flex;}}
.vb-dots span{width:7px; height:7px; border-radius:50%; background:var(--vb-line); transition:all .2s;}
.vb-dots span.is-on{width:20px; border-radius:99px; background:var(--vb-primary);}