/* ==========================================================================
   Visionary Education — Homepage & reusable section styles.
   Section order mirrors the approved design: hero → stats → about → audience
   cards → pathways carousel → destinations (dark) → partners → why → stories +
   events → CTA band.
   ========================================================================== */

/* ---- 1. Hero -------------------------------------------------------------- */
/* Matches the approved design: copy on the left, photograph bleeding to the
   right edge of the viewport and blending softly into the white canvas; the
   statistics band sits under it at container width, overlapping the hero foot. */
.ve-hero { position: relative; overflow: hidden; background: radial-gradient(70rem 36rem at -10% -20%, var(--ve-purple-050) 0%, rgb(245 243 255 / 0) 60%), radial-gradient(40rem 24rem at 30% 120%, var(--ve-gold-100) 0%, rgb(253 243 211 / 0) 60%), #fff; }
.ve-hero__ring { position: absolute; z-index: 0; border-radius: 50%; border: 1px solid rgb(76 29 149 / .10); pointer-events: none; }
.ve-hero__ring--a { width: 44rem; height: 44rem; right: -14rem; top: -22rem; }
.ve-hero__ring--b { width: 30rem; height: 30rem; right: -8rem; top: -12rem; border-color: rgb(229 177 46 / .25); }
.ve-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); align-items: center; min-height: min(38rem, 76vh); padding-block: clamp(2.5rem, 5vw, 4rem) clamp(5rem, 8vw, 6.5rem); }
.ve-hero__content { position: relative; z-index: 2; display: grid; gap: 1.25rem; max-width: 34rem; }
.ve-hero__eyebrow { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem .4rem .45rem; border-radius: var(--ve-radius-pill); background: rgb(255 255 255 / .8); border: 1px solid var(--ve-purple-100); box-shadow: 0 6px 18px rgb(76 29 149 / .08); color: var(--ve-primary); font-size: var(--ve-text-xs); font-weight: 700; width: max-content; max-width: 100%; backdrop-filter: blur(6px); }
.ve-hero__eyebrow span { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--ve-primary); color: #fff; }
.ve-hero__eyebrow svg { width: .75rem; height: .75rem; }
.ve-hero__title { font-size: var(--ve-text-hero); color: var(--ve-primary-dark); letter-spacing: -.025em; line-height: 1.08; }
.ve-hero__title em { font-style: normal; position: relative; background: linear-gradient(95deg, var(--ve-purple-600), var(--ve-indigo-600) 60%, var(--ve-purple-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ve-hero__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .14em; background: linear-gradient(90deg, var(--ve-gold-500), var(--ve-gold-400)); border-radius: 4px; transform: scaleX(0); transform-origin: left; animation: ve-underline 900ms var(--ve-ease-out-expo) 700ms forwards; }
.ve-hero__lede { font-size: var(--ve-text-lg); color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); max-width: 30rem; }
.ve-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.ve-hero__trust { display: inline-flex; align-items: center; gap: .8rem; margin-top: .75rem; padding: .5rem .9rem .5rem .5rem; border-radius: var(--ve-radius-pill); background: rgb(255 255 255 / .75); border: 1px solid var(--ve-border-subtle); box-shadow: var(--ve-shadow-xs); font-size: var(--ve-text-xs); color: var(--ve-text-muted); backdrop-filter: blur(6px); width: max-content; max-width: 100%; }
.ve-hero__avatars { display: flex; }
.ve-hero__avatars span { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #fff; background: linear-gradient(135deg, var(--ve-purple-100), var(--ve-indigo-100)); display: grid; place-items: center; font-size: .62rem; font-weight: 800; color: var(--ve-primary); margin-left: -.55rem; box-shadow: 0 2px 6px rgb(20 18 42 / .12); }
.ve-hero__avatars span:nth-child(2) { background: linear-gradient(135deg, var(--ve-gold-100), var(--ve-pastel-cream)); color: var(--ve-gold-600); }
.ve-hero__avatars span:nth-child(3) { background: linear-gradient(135deg, var(--ve-pastel-mint), #d5f0e4); color: var(--ve-teal-500); }
.ve-hero__avatars span:nth-child(4) { background: linear-gradient(135deg, var(--ve-pastel-sky), #d5e6fb); color: var(--ve-blue-500); }
.ve-hero__avatars span:first-child { margin-left: 0; }

/* Photograph: absolutely positioned so it can run to the viewport edge. */
.ve-hero__visual { position: absolute; top: 0; bottom: 0; left: 50%; right: calc(50% - 50vw); z-index: 1; pointer-events: none; }
.ve-hero__photo { position: absolute; inset: 0; overflow: hidden; }
.ve-hero__photo img, .ve-hero__photo video { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.ve-hero__video { position: absolute; inset: 0; }
.ve-hero__photo::before { display: none; }
.ve-hero__photo { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to top, transparent 0%, #000 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to top, transparent 0%, #000 22%); mask-composite: intersect; }
.ve-hero__photo::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(to right, #fff 0%, rgb(255 255 255 / .55) 12%, transparent 34%),
  linear-gradient(to top, rgb(255 255 255 / .9) 0%, transparent 28%),
  linear-gradient(200deg, rgb(76 29 149 / .16), transparent 45%); pointer-events: none; }
.ve-hero__photo::before { content: ""; display: block; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgb(255 255 255 / .35), transparent 18%); pointer-events: none; }
.ve-hero__blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); opacity: .6; pointer-events: none; }
.ve-hero__blob--a { width: 30rem; height: 30rem; right: 30%; top: -14rem; background: var(--ve-purple-100); }
.ve-hero__blob--b { width: 20rem; height: 20rem; left: -6rem; bottom: -4rem; background: var(--ve-gold-100); }
.ve-hero__pattern { position: absolute; inset: 0 auto 0 0; width: 55%; background-image: radial-gradient(var(--ve-ink-200) 1px, transparent 1.2px); background-size: 20px 20px; opacity: .35; mask-image: radial-gradient(60% 70% at 30% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(60% 70% at 30% 40%, #000, transparent 75%); z-index: 0; pointer-events: none; }
.ve-hero__card { position: absolute; z-index: 3; pointer-events: auto; background: #fff; border-radius: var(--ve-radius-lg); box-shadow: var(--ve-shadow-lg); padding: .8rem 1rem; display: flex; align-items: center; gap: .75rem; border: 1px solid var(--ve-border-subtle); }
.ve-hero__card--a { left: 8%; top: 16%; animation: ve-float 6s ease-in-out infinite; }
.ve-hero__card--b { right: 6%; bottom: 20%; animation: ve-float 7s ease-in-out 1s infinite reverse; }
.ve-hero__card strong { display: block; font-size: var(--ve-text-md); color: var(--ve-text-strong); line-height: 1.1; }
.ve-hero__card small { color: var(--ve-text-muted); font-size: var(--ve-text-2xs); }
@media (max-width: 64rem) {
  .ve-hero__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 2rem; padding-bottom: 5.5rem; }
  .ve-hero__content { max-width: 40rem; }
  .ve-hero__visual { position: relative; left: auto; right: auto; inset: auto; margin-top: 1.5rem; aspect-ratio: 16 / 10; width: 100%; pointer-events: auto; }
  .ve-hero__photo { border-radius: var(--ve-radius-xl); -webkit-mask-image: none; mask-image: none; }
  .ve-hero__photo::after { background: linear-gradient(to top, rgb(14 10 46 / .3), transparent 45%); }
  .ve-hero__ring { display: none; }
  .ve-hero__card--a { left: .75rem; top: auto; bottom: 1rem; }
  .ve-hero__card--b { right: .75rem; bottom: 1rem; top: auto; }
}
@media (max-width: 40rem) { .ve-hero__card { display: none; } .ve-hero__actions { flex-direction: column; align-items: stretch; } .ve-hero__actions .ve-btn { width: 100%; } .ve-hero__inner { padding-bottom: 4.5rem; } .ve-hero__trust { align-items: flex-start; } }

/* ---- 2. Statistics strip ------------------------------------------------- */
/* Overlaps the foot of the hero at container width — one deliberate,
   full-width band exactly as in the approved design. */
.ve-stats { position: relative; z-index: 3; margin-top: clamp(-4.5rem, -6vw, -3.25rem); padding-bottom: 0; }
.ve-stats::before { display: none; }
.ve-stats__band { background: var(--ve-indigo-800); border-radius: var(--ve-radius-xl); color: #fff; padding: clamp(1.5rem, 2.6vw, 2.15rem) clamp(1rem, 2.2vw, 1.75rem); display: grid; grid-template-columns: repeat(var(--stat-cols, 6), minmax(0, 1fr)); gap: 1.25rem .5rem; box-shadow: 0 24px 50px rgb(30 22 86 / .28), 0 4px 12px rgb(30 22 86 / .16); position: relative; overflow: hidden; }
.ve-stats__band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(38rem 12rem at 8% 0%, rgb(109 40 217 / .45), transparent 60%), radial-gradient(28rem 12rem at 100% 100%, rgb(255 255 255 / .08), transparent 60%); pointer-events: none; }
.ve-stats__band::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgb(255 255 255 / .08); pointer-events: none; }
.ve-stat { display: flex; align-items: center; gap: .8rem; position: relative; padding: .3rem 1rem; min-width: 0; }
.ve-stat__body { min-width: 0; }
.ve-stat + .ve-stat::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: linear-gradient(to bottom, transparent, rgb(255 255 255 / .22), transparent); }
.ve-stat__icon { width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center; color: #fff; }
.ve-stat__icon svg { width: 2.05rem; height: 2.05rem; stroke-width: 1.3; opacity: .95; }
.ve-stat__value { font-family: var(--ve-font-display); font-size: clamp(1.35rem, .9rem + .95vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: #fff; }
.ve-stat__label { font-size: var(--ve-text-xs); color: rgb(255 255 255 / .8); margin-top: .3rem; font-weight: 500; line-height: 1.3; }
@media (min-width: 84rem) { .ve-stat__label { font-size: var(--ve-text-sm); white-space: nowrap; } }
@media (max-width: 80rem) { .ve-stats__band { grid-template-columns: repeat(min(var(--stat-cols, 6), 3), minmax(0, 1fr)); row-gap: 1.5rem; } .ve-stat::before { display: none; } }
@media (max-width: 40rem) { .ve-stats__band { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.5rem 1rem; row-gap: 1.75rem; } .ve-stat { flex-direction: column; text-align: center; gap: .45rem; padding: .25rem; } .ve-stat::before { display: none !important; } .ve-stat__icon svg { width: 1.9rem; height: 1.9rem; } }
/* ---- 3. About ------------------------------------------------------------- */
.ve-about { padding-top: clamp(4rem, 8vw, 6.5rem); }
.ve-about__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.ve-about__collage { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: .9rem; aspect-ratio: 1 / 0.86; position: relative; }
.ve-about__collage figure { border-radius: var(--ve-radius-lg); overflow: hidden; background: var(--ve-ink-100); position: relative; }
.ve-about__collage figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ve-dur-slow) var(--ve-ease); }
.ve-about__collage figure:hover img { transform: scale(1.04); }
.ve-about__collage figure:nth-child(1) { grid-row: 1 / 3; }
.ve-about__collage::before { content: ""; position: absolute; inset: auto auto -1.25rem -1.25rem; width: 8rem; height: 8rem; background-image: radial-gradient(var(--ve-purple-100) 2px, transparent 2.5px); background-size: 14px 14px; z-index: -1; }
.ve-about__badge { position: absolute; right: -.75rem; top: 50%; transform: translateY(-50%); background: var(--ve-gold-500); color: var(--ve-ink-900); border-radius: var(--ve-radius-lg); padding: .8rem 1rem; box-shadow: var(--ve-shadow-md); text-align: center; z-index: 2; }
.ve-about__badge strong { display: block; font-size: 1.5rem; line-height: 1; font-weight: 800; }
.ve-about__badge small { font-size: var(--ve-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ve-about__content { display: grid; gap: 1.1rem; }
.ve-about__text { color: var(--ve-text-muted); line-height: var(--ve-leading-relaxed); }
.ve-about__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.5rem; margin-top: .25rem; }
.ve-about__points li { display: flex; align-items: center; gap: .6rem; font-size: var(--ve-text-sm); font-weight: 600; color: var(--ve-ink-700); }
.ve-about__points svg { width: 1.15rem; height: 1.15rem; color: var(--ve-primary); flex: none; }
.ve-about__actions { margin-top: .5rem; }
@media (max-width: 64rem) { .ve-about__inner { grid-template-columns: 1fr; } .ve-about__collage { max-width: 36rem; } }
@media (max-width: 40rem) { .ve-about__points { grid-template-columns: 1fr; } .ve-about__badge { right: .5rem; } }

/* ---- 4. Audience "How we help" cards ------------------------------------- */
.ve-audience { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.ve-audience__card { --tint: var(--ve-pastel-lavender); --tint-fg: var(--ve-primary); background: var(--tint); border-radius: var(--ve-radius-xl); padding: 1.75rem 1.4rem 1.5rem; text-align: center; display: grid; gap: .8rem; justify-items: center; position: relative; overflow: hidden; border: 1px solid transparent; transition: transform var(--ve-dur-base) var(--ve-ease), box-shadow var(--ve-dur-base) var(--ve-ease); }
.ve-audience__card::after { content: ""; position: absolute; inset: auto -30% -40% auto; width: 12rem; height: 12rem; border-radius: 50%; background: rgb(255 255 255 / .55); pointer-events: none; transition: transform var(--ve-dur-slow) var(--ve-ease); }
.ve-audience__card:hover { transform: translateY(-6px); box-shadow: var(--ve-shadow-md); }
.ve-audience__card:hover::after { transform: scale(1.35); }
.ve-audience__card > * { position: relative; z-index: 1; }
.ve-audience__card .ve-icon { background: var(--tint-fg); color: #fff; width: 3.75rem; height: 3.75rem; }
.ve-audience__card .ve-icon svg { width: 1.6rem; height: 1.6rem; }
.ve-audience__title { font-size: var(--ve-text-lg); font-weight: 700; color: var(--tint-fg); }
.ve-audience__text { color: var(--ve-ink-600); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }
.ve-audience__card .ve-link { color: var(--tint-fg); margin-top: .1rem; }
.ve-audience__card--cream { --tint: var(--ve-pastel-cream); --tint-fg: var(--ve-blue-500); }
.ve-audience__card--sky { --tint: var(--ve-pastel-sky); --tint-fg: var(--ve-primary-dark); }
.ve-audience__card--mint { --tint: var(--ve-pastel-mint); --tint-fg: var(--ve-teal-500); }
@media (max-width: 64rem) { .ve-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .ve-audience { grid-template-columns: 1fr; } }

/* ---- 5. Carousel (pathways / partners / stories) ------------------------- */
.ve-carousel { position: relative; }
.ve-carousel__track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .5rem .25rem 1rem; scrollbar-width: none; -ms-overflow-style: none; }
.ve-carousel__track::-webkit-scrollbar { display: none; }
.ve-carousel__slide { flex: 0 0 auto; scroll-snap-align: start; width: calc((100% - 4 * 1.25rem) / 5); }
.ve-carousel--4 .ve-carousel__slide { width: calc((100% - 3 * 1.25rem) / 4); }
.ve-carousel--3 .ve-carousel__slide { width: calc((100% - 2 * 1.25rem) / 3); }
.ve-carousel--6 .ve-carousel__slide { width: calc((100% - 5 * 1.25rem) / 6); }
@media (max-width: 80rem) { .ve-carousel__slide, .ve-carousel--6 .ve-carousel__slide { width: calc((100% - 3 * 1.25rem) / 4); } }
@media (max-width: 64rem) { .ve-carousel__slide, .ve-carousel--4 .ve-carousel__slide, .ve-carousel--6 .ve-carousel__slide { width: calc((100% - 2 * 1.25rem) / 3); } .ve-carousel--3 .ve-carousel__slide { width: calc((100% - 1.25rem) / 2); } }
@media (max-width: 48rem) { .ve-carousel__slide, .ve-carousel--3 .ve-carousel__slide, .ve-carousel--4 .ve-carousel__slide, .ve-carousel--6 .ve-carousel__slide { width: calc((100% - 1.25rem) / 2); } }
@media (max-width: 30rem) { .ve-carousel__slide, .ve-carousel--3 .ve-carousel__slide, .ve-carousel--4 .ve-carousel__slide, .ve-carousel--6 .ve-carousel__slide { width: 84%; } }
.ve-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #fff; border: 1px solid var(--ve-border); box-shadow: var(--ve-shadow-md); display: grid; place-items: center; color: var(--ve-primary-dark); z-index: 2; transition: background var(--ve-dur-fast), color var(--ve-dur-fast), opacity var(--ve-dur-fast), transform var(--ve-dur-fast); }
.ve-carousel__nav svg { width: 1rem; height: 1rem; }
.ve-carousel__nav:hover:not(:disabled) { background: var(--ve-primary); color: #fff; border-color: var(--ve-primary); }
.ve-carousel__nav:disabled { opacity: .35; cursor: default; }
.ve-carousel__nav--prev { left: -1.3rem; }
.ve-carousel__nav--next { right: -1.3rem; }
.ve-carousel__dots { display: flex; justify-content: center; gap: .4rem; margin-top: .25rem; }
.ve-carousel__dots button { width: .5rem; height: .5rem; border-radius: 999px; background: var(--ve-ink-200); transition: width var(--ve-dur-base) var(--ve-ease), background var(--ve-dur-base); }
.ve-carousel__dots button.is-active { width: 1.5rem; background: var(--ve-primary); }
@media (max-width: 64rem) { .ve-carousel__nav--prev { left: -.5rem; } .ve-carousel__nav--next { right: -.5rem; } }
.ve-section--dark .ve-carousel__nav { background: rgb(255 255 255 / .1); border-color: var(--ve-border-inverse); color: #fff; }

/* Programme card (pathways) */
.ve-programme { height: 100%; display: flex; flex-direction: column; }
.ve-programme .ve-card__media { aspect-ratio: 16 / 9; position: relative; }
.ve-programme__level { position: absolute; left: .7rem; top: .7rem; }
.ve-programme .ve-card__body { flex: 1; padding: 1rem 1.05rem 1.1rem; gap: .45rem; }
.ve-programme__title { font-size: var(--ve-text-md); font-weight: 700; line-height: 1.3; }
.ve-programme__meta { font-size: var(--ve-text-xs); color: var(--ve-text-muted); display: grid; gap: .25rem; }
.ve-programme__meta li { display: flex; align-items: center; gap: .45rem; }
.ve-programme__meta svg { width: .85rem; height: .85rem; color: var(--ve-primary); flex: none; }
.ve-programme__uni { font-size: var(--ve-text-xs); font-weight: 600; color: var(--ve-ink-700); }
.ve-programme .ve-link { margin-top: auto; padding-top: .5rem; }

/* ---- 6. Study destinations (dark band) ----------------------------------- */
.ve-destinations { position: relative; overflow: hidden; background: linear-gradient(110deg, var(--ve-indigo-900), var(--ve-indigo-800) 55%, var(--ve-indigo-700)); color: #fff; }
.ve-destinations__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); }
.ve-destinations__map { position: relative; }
.ve-destinations__map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ve-destinations__map::before { content: ""; position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(closest-side, rgb(109 40 217 / .35), transparent); filter: blur(30px); pointer-events: none; }
.ve-pins { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ve-pin { position: absolute; transform: translate(-50%, -100%); }
.ve-pin__btn { position: relative; display: grid; place-items: center; width: 2rem; height: 2.4rem; color: var(--ve-gold-400); filter: drop-shadow(0 6px 10px rgb(0 0 0 / .45)); transition: transform var(--ve-dur-base) var(--ve-ease-spring), color var(--ve-dur-fast); animation: ve-pin-bob 3.4s ease-in-out infinite; animation-delay: var(--pin-delay, 0s); }
.ve-pin__btn svg { width: 100%; height: 100%; }
.ve-pin__btn::before { content: ""; position: absolute; left: 50%; bottom: -.15rem; width: 1.5rem; height: .55rem; border-radius: 50%; background: rgb(229 177 46 / .5); transform: translateX(-50%); animation: ve-pulse-flat 2.6s ease-out infinite; animation-delay: var(--pin-delay, 0s); }
.ve-pin:hover .ve-pin__btn, .ve-pin:focus-within .ve-pin__btn { transform: scale(1.18); color: #fff; animation-play-state: paused; }
.ve-pin__tip { position: absolute; left: 50%; bottom: calc(100% + .5rem); transform: translate(-50%, 6px); white-space: nowrap; background: #fff; color: var(--ve-ink-900); font-size: var(--ve-text-xs); font-weight: 700; padding: .4rem .7rem; border-radius: var(--ve-radius-md); box-shadow: var(--ve-shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--ve-dur-base) var(--ve-ease), transform var(--ve-dur-base) var(--ve-ease-out-expo), visibility 0s linear var(--ve-dur-base); z-index: 5; }
.ve-pin__tip::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }
.ve-pin__tip small { display: block; font-weight: 500; color: var(--ve-text-muted); font-size: var(--ve-text-2xs); }
.ve-pin:hover .ve-pin__tip, .ve-pin:focus-within .ve-pin__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
@keyframes ve-pulse-flat { 0% { transform: translateX(-50%) scale(.6); opacity: .9; } 100% { transform: translateX(-50%) scale(2.2); opacity: 0; } }
@media (max-width: 40rem) { .ve-pin__btn { width: 1.5rem; height: 1.8rem; } }
.ve-destinations__map svg { width: 100%; height: 100%; }
.ve-destinations__map .pin { transform-origin: center bottom; transform-box: fill-box; animation: ve-pin-bob 3.2s ease-in-out infinite; }
.ve-destinations__map .pin:nth-child(2n) { animation-delay: .6s; }
.ve-destinations__map .pin:nth-child(3n) { animation-delay: 1.2s; }
.ve-destinations__map .pulse { transform-origin: center; transform-box: fill-box; animation: ve-pulse 2.6s ease-out infinite; }
.ve-destinations__content { display: grid; gap: 1.5rem; }
.ve-flags { display: grid; grid-template-columns: repeat(var(--flag-cols, 4), minmax(0, 1fr)); gap: 1.5rem 1.25rem; justify-items: center; }
.ve-flag { display: grid; justify-items: center; gap: .5rem; text-align: center; font-size: var(--ve-text-xs); font-weight: 600; color: var(--ve-text-inverse-muted); transition: color var(--ve-dur-fast), transform var(--ve-dur-base) var(--ve-ease-spring); }
.ve-flag__disc { width: 3.1rem; height: 3.1rem; border-radius: 50%; overflow: hidden; border: 3px solid rgb(255 255 255 / .18); box-shadow: 0 6px 18px rgb(0 0 0 / .3); background: #fff; display: grid; place-items: center; transition: border-color var(--ve-dur-fast), transform var(--ve-dur-base) var(--ve-ease-spring); }
.ve-flag__disc img, .ve-flag__disc svg { width: 100%; height: 100%; object-fit: cover; }
.ve-flag__disc span { font-weight: 800; color: var(--ve-primary-dark); font-size: .8rem; }
.ve-flag:hover { color: #fff; }
.ve-flag:hover .ve-flag__disc { border-color: var(--ve-gold-400); transform: translateY(-4px) scale(1.06); }
@media (max-width: 64rem) { .ve-destinations__inner { grid-template-columns: 1fr; } .ve-destinations__map { max-width: 34rem; width: 100%; margin-inline: auto; } .ve-flags { grid-template-columns: repeat(min(var(--flag-cols, 4), 4), minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ve-flags { grid-template-columns: repeat(min(var(--flag-cols, 4), 4), minmax(0, 1fr)); gap: 1.25rem .5rem; } .ve-destinations__content > div:last-child { display: flex; } .ve-destinations__content .ve-btn { width: 100%; } }

/* ---- 7. Partners logo grid ---------------------------------------------- */
.ve-partners { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.ve-partner { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-lg); background: #fff; min-height: 4.75rem; transition: border-color var(--ve-dur-base), box-shadow var(--ve-dur-base), transform var(--ve-dur-base) var(--ve-ease); }
.ve-partner:hover { border-color: var(--ve-purple-100); box-shadow: var(--ve-shadow-md); transform: translateY(-3px); }
.ve-partner__logo { width: 2.75rem; height: 2.75rem; flex: none; display: grid; place-items: center; border-radius: var(--ve-radius-md); background: var(--ve-ink-050); overflow: hidden; }
.ve-partner__logo img { width: 100%; height: 100%; object-fit: contain; padding: .25rem; }
.ve-partner__logo span { font-weight: 800; color: var(--ve-primary); font-size: .95rem; }
.ve-partner__name { font-size: var(--ve-text-xs); font-weight: 700; color: var(--ve-text-strong); line-height: 1.25; }
.ve-partner__country { display: block; font-size: var(--ve-text-2xs); color: var(--ve-text-muted); font-weight: 500; margin-top: .15rem; }
@media (max-width: 64rem) { .ve-partners { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .ve-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Marquee variant */
.ve-marquee { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.ve-marquee__track { display: flex; gap: 1rem; width: max-content; animation: ve-marquee 40s linear infinite; }
.ve-marquee:hover .ve-marquee__track { animation-play-state: paused; }
.ve-marquee .ve-partner { width: 14rem; }

/* ---- 8. Why choose us ---------------------------------------------------- */
.ve-why { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 1.75rem 1rem; box-shadow: var(--ve-shadow-xs); }
.ve-why__item { display: grid; justify-items: center; text-align: center; gap: .55rem; padding: .5rem .6rem; position: relative; }
.ve-why__item + .ve-why__item::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--ve-border-subtle); }
.ve-why__icon { width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--ve-border); display: grid; place-items: center; color: var(--ve-primary); background: #fff; transition: background var(--ve-dur-base), color var(--ve-dur-base), border-color var(--ve-dur-base), transform var(--ve-dur-base) var(--ve-ease-spring); }
.ve-why__icon svg { width: 1.3rem; height: 1.3rem; }
.ve-why__item:hover .ve-why__icon { background: var(--ve-primary); color: #fff; border-color: var(--ve-primary); transform: rotate(-6deg) scale(1.06); }
.ve-why__title { font-size: var(--ve-text-sm); font-weight: 700; color: var(--ve-text-strong); }
.ve-why__text { font-size: var(--ve-text-2xs); color: var(--ve-text-muted); line-height: 1.5; }
@media (max-width: 80rem) { .ve-why { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.25rem; } .ve-why__item:nth-child(5)::before { display: none; } }
@media (max-width: 48rem) { .ve-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ve-why__item:nth-child(odd)::before { display: none; } }

/* ---- 9. Stories + Events split ------------------------------------------ */
.ve-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
.ve-panel { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-xl); background: #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; box-shadow: var(--ve-shadow-xs); }
.ve-panel__head { display: grid; gap: .3rem; }
.ve-panel__title { font-size: var(--ve-text-xl); }
.ve-panel__foot { margin-top: auto; display: flex; justify-content: center; padding-top: .5rem; }
@media (max-width: 64rem) { .ve-split { grid-template-columns: 1fr; } }

/* Story cards */
.ve-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ve-panel .ve-carousel__track { padding: .25rem .1rem .75rem; gap: 1rem; }
.ve-panel .ve-carousel--3 .ve-carousel__slide { width: calc((100% - 2rem) / 3); }
.ve-panel .ve-carousel__nav--prev { left: -.9rem; } .ve-panel .ve-carousel__nav--next { right: -.9rem; }
@media (max-width: 64rem) { .ve-panel .ve-carousel--3 .ve-carousel__slide { width: calc((100% - 2rem) / 3); } }
@media (max-width: 48rem) { .ve-panel .ve-carousel--3 .ve-carousel__slide { width: calc((100% - 1rem) / 2); } }
@media (max-width: 40rem) { .ve-panel .ve-carousel--3 .ve-carousel__slide { width: 100%; } .ve-panel .ve-carousel__nav--prev, .ve-panel .ve-carousel__nav--next { position: static; } }
.ve-story { display: grid; gap: .6rem; }
.ve-story__media { position: relative; aspect-ratio: 1 / 0.9; border-radius: var(--ve-radius-lg); overflow: hidden; background: var(--ve-ink-100); }
.ve-story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ve-dur-slow) var(--ve-ease); }
.ve-story:hover .ve-story__media img { transform: scale(1.05); }
.ve-story__play { position: absolute; inset: 0; margin: auto; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--ve-primary); display: grid; place-items: center; box-shadow: var(--ve-shadow-md); transition: transform var(--ve-dur-base) var(--ve-ease-spring); }
.ve-story__play svg { width: 1rem; height: 1rem; margin-left: 2px; }
.ve-story:hover .ve-story__play { transform: scale(1.1); }
.ve-story__play::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .6); animation: ve-pulse 2.4s ease-out infinite; }
.ve-story__name { font-weight: 700; font-size: var(--ve-text-sm); color: var(--ve-text-strong); }

/* No photograph: the initial on a brand tint, filling the same frame. */
.ve-story__initial {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(150deg, var(--ve-purple-050), var(--ve-indigo-100));
  font-family: var(--ve-font-display); font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800; color: var(--ve-primary); letter-spacing: -.02em;
}

/* The whole card is the link. The anchor sits on the name so it is announced
   with a sensible label, and its ::after covers the card so the picture and
   the quote are clickable too — without putting an anchor around an anchor,
   which would swallow the "watch the story" link inside it. */
.ve-story--linked { position: relative; }
.ve-story__link { color: inherit; text-decoration: none; }
.ve-story__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--ve-radius-lg); }
.ve-story--linked:hover .ve-story__link { color: var(--ve-primary); }
.ve-story--linked:focus-within { outline: 2px solid var(--ve-primary); outline-offset: 4px; border-radius: var(--ve-radius-lg); }
.ve-story__link:focus-visible { outline: none; }
/* Above the overlay, so a video link still works. */
.ve-story__play { z-index: 1; }
.ve-story__meta { font-size: var(--ve-text-2xs); color: var(--ve-text-muted); line-height: 1.4; }
.ve-story__quote { font-size: var(--ve-text-xs); color: var(--ve-ink-600); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* Event rows */
.ve-events { display: grid; gap: .75rem; }
.ve-event { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr) auto auto auto; align-items: center; gap: .9rem; padding: .75rem; border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-lg); transition: border-color var(--ve-dur-base), box-shadow var(--ve-dur-base), transform var(--ve-dur-base) var(--ve-ease); }
.ve-event:hover { border-color: var(--ve-purple-100); box-shadow: var(--ve-shadow-sm); transform: translateX(3px); }
.ve-event__thumb { width: 3.75rem; height: 3.25rem; border-radius: var(--ve-radius-md); overflow: hidden; background: var(--ve-ink-100); }
.ve-event__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ve-event__title { font-size: var(--ve-text-sm); font-weight: 700; color: var(--ve-text-strong); line-height: 1.3; }
.ve-event__where { font-size: var(--ve-text-2xs); color: var(--ve-text-muted); }
.ve-event__date { text-align: center; line-height: 1; padding: .35rem .6rem; border-radius: var(--ve-radius-md); background: var(--ve-purple-050); color: var(--ve-primary); }
.ve-event__date strong { display: block; font-size: 1.15rem; font-weight: 800; }
.ve-event__date small { font-size: var(--ve-text-2xs); font-weight: 700; text-transform: uppercase; }
.ve-event__time { font-size: var(--ve-text-xs); color: var(--ve-ink-600); font-weight: 600; white-space: nowrap; }
@media (max-width: 80rem) { .ve-event { grid-template-columns: 3.75rem minmax(0, 1fr) auto auto; } .ve-event__time { display: none; } }
@media (max-width: 40rem) { .ve-event { grid-template-columns: 3.25rem minmax(0, 1fr) auto; } .ve-event .ve-btn { display: none; } }

/* ---- 10. Blog cards ------------------------------------------------------ */
.ve-post .ve-card__media { aspect-ratio: 16 / 9; }
.ve-post__cat { position: absolute; left: .75rem; top: .75rem; }
.ve-post .ve-card__title { font-size: var(--ve-text-md); line-height: 1.35; }

/* ---- 11. CTA band -------------------------------------------------------- */
.ve-cta { position: relative; overflow: hidden; border-radius: var(--ve-radius-xl); background: linear-gradient(105deg, var(--ve-indigo-900) 0%, var(--ve-indigo-700) 45%, var(--ve-purple-600) 100%); color: #fff; padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem); align-items: center; gap: 2rem; box-shadow: var(--ve-shadow-brand); }
.ve-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(28rem 14rem at 15% 120%, rgb(229 177 46 / .22), transparent 65%), radial-gradient(30rem 16rem at 90% -20%, rgb(255 255 255 / .12), transparent 60%); pointer-events: none; }
.ve-cta__shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .08) 50%, transparent 60%); transform: translateX(-100%); animation: ve-shine 6s var(--ve-ease) 1.5s infinite; pointer-events: none; }
.ve-cta__art { position: relative; width: 6.5rem; height: 6.5rem; display: grid; place-items: center; }
.ve-cta__art svg { width: 100%; height: 100%; color: var(--ve-gold-400); filter: drop-shadow(0 10px 20px rgb(0 0 0 / .35)); animation: ve-float 5s ease-in-out infinite; }
.ve-cta__content { position: relative; display: grid; gap: .5rem; }
.ve-cta__title { font-size: var(--ve-text-2xl); color: #fff; }
.ve-cta__text { color: var(--ve-text-inverse-muted); font-size: var(--ve-text-sm); max-width: 34rem; }
.ve-cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
.ve-cta__image { position: relative; border-radius: var(--ve-radius-lg); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--ve-shadow-lg); border: 3px solid rgb(255 255 255 / .12); }
.ve-cta__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 64rem) { .ve-cta { grid-template-columns: auto minmax(0, 1fr); } .ve-cta__image { display: none; } }
@media (max-width: 40rem) { .ve-cta { grid-template-columns: 1fr; text-align: center; } .ve-cta__art { margin-inline: auto; } .ve-cta__content { justify-items: center; } .ve-cta__actions { justify-content: center; } }

/* ---- 12. FAQ accordion --------------------------------------------------- */
.ve-faq { display: grid; gap: .75rem; }
.ve-faq__item { border: 1px solid var(--ve-border-subtle); border-radius: var(--ve-radius-lg); background: #fff; overflow: hidden; transition: border-color var(--ve-dur-base), box-shadow var(--ve-dur-base); }
.ve-faq__item[open] { border-color: var(--ve-purple-100); box-shadow: var(--ve-shadow-sm); }
.ve-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; font-weight: 700; font-size: var(--ve-text-md); cursor: pointer; list-style: none; color: var(--ve-text-strong); }
.ve-faq__q::-webkit-details-marker { display: none; }
.ve-faq__q svg { width: 1.1rem; height: 1.1rem; color: var(--ve-primary); flex: none; transition: transform var(--ve-dur-base) var(--ve-ease); }
.ve-faq__item[open] .ve-faq__q svg { transform: rotate(45deg); }
.ve-faq__a { padding: 0 1.15rem 1.1rem; color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-relaxed); }

/* ---- Keyframes ----------------------------------------------------------- */
@keyframes ve-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes ve-underline { to { transform: scaleX(1); } }
@keyframes ve-pulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes ve-pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ve-marquee { to { transform: translateX(-50%); } }
@keyframes ve-shine { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .ve-hero__card, .ve-cta__art svg, .ve-destinations__map .pin, .ve-destinations__map .pulse, .ve-story__play::before, .ve-cta__shine, .ve-marquee__track { animation: none !important; }
  .ve-hero__title em::after { transform: scaleX(1); animation: none; }
}

/* About badge: on small screens it becomes a chip under the collage instead of overlapping a photo. */
@media (max-width: 40rem) {
  .ve-about__collage { aspect-ratio: auto; grid-template-rows: 11rem 11rem; }
  .ve-about__badge { position: static; transform: none; grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: baseline; gap: .4rem; padding: .5rem .9rem; margin-top: .25rem; }
  .ve-about__badge strong { font-size: 1.15rem; }
}
@media (min-width: 40.0625rem) and (max-width: 64rem) { .ve-about__badge { right: .75rem; } }

/* Carousel on phones: one card, arrows sit under the track beside the dots. */
@media (max-width: 40rem) {
  .ve-carousel { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "track track track" "prev dots next"; align-items: center; column-gap: .75rem; }
  .ve-carousel__track { grid-area: track; padding-inline: 0; scroll-padding-inline: 0; gap: 1rem; }
  .ve-carousel__slide, .ve-carousel--3 .ve-carousel__slide, .ve-carousel--4 .ve-carousel__slide, .ve-carousel--6 .ve-carousel__slide { width: 100%; }
  .ve-carousel__nav { position: static; transform: none; width: 2.5rem; height: 2.5rem; }
  .ve-carousel__nav--prev { grid-area: prev; }
  .ve-carousel__nav--next { grid-area: next; }
  .ve-carousel__dots { grid-area: dots; margin-top: 0; }
}

/* Mobile hero hard-guarantee: the column can never grow past the viewport. */
@media (max-width: 64rem) {
  .ve-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .ve-hero__content { min-width: 0; max-width: 100%; }
  .ve-hero__eyebrow, .ve-hero__trust { width: auto; max-width: 100%; white-space: normal; }
  .ve-hero__trust { display: flex; align-items: flex-start; }
  .ve-hero__avatars { flex: none; }
  .ve-hero__visual { max-width: 100%; }
}

/* ---- No empty grid cells ---------------------------------------------------
   Why-us becomes a centred wrapping flex row (any count looks complete), and
   on phones an odd last item in a 2-column grid spans the full width. */
.ve-why { display: flex; flex-wrap: wrap; justify-content: center; }
.ve-why__item { flex: 1 1 9.5rem; max-width: 100%; }
@media (min-width: 80.0625rem) { .ve-why__item { flex-basis: 0; } }
@media (max-width: 80rem) and (min-width: 40.0625rem) { .ve-why__item { flex-basis: calc(25% - 1rem); max-width: calc(33.333% - 1rem); } .ve-why__item + .ve-why__item::before { display: none; } }
@media (max-width: 40rem) {
  .ve-why__item { flex-basis: calc(50% - .5rem); }
  .ve-why__item:last-child:nth-child(odd) { flex-basis: 100%; }
  .ve-why__item + .ve-why__item::before { display: none; }
  .ve-partners > :last-child:nth-child(odd), .ve-audience > :last-child:nth-child(odd), .ve-stats__band > .ve-stat:last-child:nth-child(odd), .ve-grid--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* World map image sits inside the map box; pins are positioned as % of the box. */
.ve-worldmap { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 22px rgb(124 92 224 / .45)); }
.ve-destinations__map { aspect-ratio: auto; }
.ve-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ve-arcs path { fill: none; stroke: rgb(242 201 76 / .55); stroke-width: .35; stroke-dasharray: 1.2 1.2; vector-effect: non-scaling-stroke; stroke-width: 1.4px; animation: ve-dash 14s linear infinite; }
@keyframes ve-dash { to { stroke-dashoffset: -60; } }
.ve-pin--hub .ve-pin__btn { width: 2.6rem; height: 3.1rem; color: var(--ve-gold-400); animation: none; }
.ve-pin--hub .ve-pin__btn::after { content: ""; position: absolute; left: 50%; bottom: -.2rem; width: 2.2rem; height: .8rem; border-radius: 50%; border: 2px solid rgb(242 201 76 / .7); transform: translateX(-50%); animation: ve-pulse-flat 2.2s ease-out infinite; }
.ve-pin__btn { width: 1.55rem; height: 1.85rem; }
@media (max-width: 40rem) { .ve-pin__btn { width: 1.15rem; height: 1.4rem; } .ve-pin--hub .ve-pin__btn { width: 1.7rem; height: 2.05rem; } }

/* ==========================================================================
   Auto layout (client rule): a list of cards fills its row exactly — 1 centred,
   2 halves, 3 thirds, 4 quarters — and becomes a carousel above 4, so a
   half-empty row can never appear whatever the admin adds.
   ========================================================================== */
.ve-auto { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.ve-auto--1 { grid-template-columns: minmax(0, min(30rem, 100%)); justify-content: center; }
.ve-auto--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ve-auto--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ve-auto--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ve-auto > li { display: flex; min-width: 0; }
.ve-auto > li > * { width: 100%; }
@media (max-width: 64rem) { .ve-auto--3, .ve-auto--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ve-auto--2, .ve-auto--3, .ve-auto--4 { grid-template-columns: minmax(0, 1fr); } }
/* The audience cards keep their own padding/tints inside the auto grid. */
.ve-auto.ve-audience { display: grid; }
.ve-carousel__slide > .ve-audience__card { height: 100%; }

/* The band on a normal page: it is not overlapping a hero, so it keeps the
   section's own rhythm and sits on the page background. */
.ve-stats--standalone { margin-top: 0; padding-top: var(--ve-section-y); padding-bottom: var(--ve-section-y); }
.ve-stats--standalone .ve-stats__band { margin-top: 2rem; }
.ve-stats--standalone .ve-heading__title { color: var(--ve-text-strong); }

/* The card's short description (requirement §2). Two lines, always — a longer
   one would make its card taller than the ones beside it and break the row. */
.ve-programme__excerpt {
  margin: 0 0 .1rem;
  color: var(--ve-text-muted);
  font-size: var(--ve-text-sm);
  line-height: var(--ve-leading-snug, 1.45);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Ways to study (requirement §1B) -------------------------------------
   Tiles for Online / Blended / On campus / Distance learning. The whole tile
   is the link to that mode's filtered course list. */
.ve-mode {
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit; height: 100%;
  transition: box-shadow var(--ve-dur-fast), transform var(--ve-dur-fast);
}
.ve-mode:hover { transform: translateY(-3px); box-shadow: var(--ve-shadow-lg, 0 18px 40px rgb(20 18 42 / .12)); }
.ve-mode__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ve-surface-2, #f4f2fa); }
.ve-mode__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve-mode__body { display: flex; flex-direction: column; gap: .45rem; padding: 1.15rem 1.25rem 1.35rem; flex: 1 1 auto; }
.ve-mode__name { font-family: var(--ve-font-display); font-size: var(--ve-text-lg); font-weight: 700; color: var(--ve-text-strong); }
.ve-mode__text { color: var(--ve-text-muted); font-size: var(--ve-text-sm); line-height: var(--ve-leading-snug, 1.45);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ve-mode__count { margin-top: auto; font-size: var(--ve-text-xs); font-weight: 700; letter-spacing: var(--ve-tracking-caps); text-transform: uppercase; color: var(--ve-primary); }
.ve-mode__go { display: inline-flex; color: var(--ve-primary); }
.ve-mode__go svg { width: 1.05rem; height: 1.05rem; }