/* VLC Circle - shared inner-page patterns. Measured from the source comps. */

/* ---- Inner page hero -------------------------------------------
   Cream band full width. Copy left, photograph right carrying a large
   arc on its top-left corner and bleeding below the band into white.
   ---------------------------------------------------------------- */
.vlc-ihero{background:var(--vlc-bg);position:relative}
.vlc-ihero__grid{max-width:1180px;margin-inline:auto;padding-inline:var(--vlc-md);
  display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(24px,4vw,64px);align-items:start}
.vlc-ihero__copy{padding-block:clamp(28px,4vw,56px) clamp(40px,6vw,96px);align-items:flex-start}
.vlc-ihero__crumb{font-size:.8rem;color:var(--vlc-ink);margin-bottom:clamp(20px,3vw,40px)}
.vlc-ihero__crumb a{text-decoration:none}
.vlc-ihero__crumb a:hover{text-decoration:underline;text-underline-offset:4px}
.vlc-ihero__copy h1,.vlc-ihero__copy .elementor-heading-title{
  font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.04;margin-bottom:18px}
.vlc-ihero__copy p{font-size:.92rem;max-width:42ch;color:var(--vlc-ink)}
.vlc-ihero__media{margin-top:clamp(20px,3vw,42px)}
.vlc-ihero__media img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 32%;
  border-radius:46% 0 0 0;margin-bottom:calc(-1 * clamp(40px,6vw,110px))}

.vlc-sec__head--left{text-align:left}
.vlc-sec__head--left p{margin-inline:0;text-align:left}

/* ---- Contact Form 7 ---- */
.vlc-form{max-width:1000px;margin-inline:auto;width:100%}
.vlc-form .wpcf7-form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.vlc-form .vlc-field--wide{grid-column:1 / -1}
.vlc-form label{display:block;font-size:.86rem;font-weight:500;color:var(--vlc-ink);margin-bottom:8px}
.vlc-form input[type=text],
.vlc-form input[type=email],
.vlc-form input[type=tel],
.vlc-form input[type=date],
.vlc-form select,
.vlc-form textarea{width:100%;font-family:Poppins,sans-serif;font-size:.9rem;
  color:var(--vlc-ink);background:var(--vlc-surface);border:1px solid var(--vlc-line);
  border-radius:var(--vlc-r-md);padding:14px 16px;transition:border-color .18s ease}
.vlc-form textarea{min-height:132px;resize:vertical}
.vlc-form input:focus,.vlc-form select:focus,.vlc-form textarea:focus{outline:none;border-color:var(--vlc-accent)}
.vlc-form ::placeholder{color:#A9ABA8}
.vlc-form .vlc-submit{grid-column:1 / -1;display:flex;justify-content:center;margin-top:clamp(8px,1.5vw,18px)}
.vlc-form input[type=submit]{border:0;border-radius:0;cursor:pointer;background:var(--vlc-accent);
  color:#fff;font-family:Poppins,sans-serif;font-weight:500;font-size:.92rem;padding:14px 52px;
  transition:background-color .18s ease}
.vlc-form input[type=submit]:hover{background:#47A342}
.vlc-form .wpcf7-spinner{display:block;margin:8px auto 0}
.wpcf7 form .wpcf7-response-output{grid-column:1 / -1;margin:8px 0 0;border-radius:var(--vlc-r-md);
  border-width:1px;font-size:.86rem;text-align:center}
.wpcf7-not-valid-tip{color:#C0392B;font-size:.76rem;margin-top:6px}

/* ---- Campus directory: quarter-circle on the top-right ---- */
.vlc-campuses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px);
  max-width:1180px;margin-inline:auto}
.vlc-campus{position:relative;aspect-ratio:4/3;padding:clamp(20px,2.4vw,32px);
  display:flex;flex-direction:column;justify-content:flex-end;border-radius:0 100% 0 0;overflow:hidden}
.vlc-campus--yellow{background:var(--vlc-yellow)}
.vlc-campus--cream{background:var(--vlc-bg)}
.vlc-campus--green{background:var(--vlc-accent)}
.vlc-campus__eyebrow{font-size:.72rem;color:var(--vlc-muted);margin-bottom:2px}
.vlc-campus--green .vlc-campus__eyebrow{color:#2C5E2A}
.vlc-campus h3{font-size:clamp(1.05rem,1.7vw,1.35rem);margin:0 0 10px;color:var(--vlc-ink)}
.vlc-campus a{display:block;font-size:.86rem;color:var(--vlc-ink);text-decoration:none;margin-bottom:2px}
.vlc-campus a:hover{text-decoration:underline;text-underline-offset:4px}

@media (max-width:1024px){
  .vlc-ihero__grid{grid-template-columns:1fr;gap:0}
  .vlc-ihero__copy{padding-bottom:clamp(24px,4vw,36px)}
  .vlc-ihero__media{margin-top:0}
  .vlc-ihero__media img{aspect-ratio:16/10;border-radius:32% 0 0 0;
    margin-bottom:calc(-1 * clamp(24px,4vw,48px))}
  .vlc-form .wpcf7-form{grid-template-columns:1fr}
  .vlc-campuses{grid-template-columns:1fr;max-width:420px}
  .vlc-campus{aspect-ratio:3/2}
}

/* ---- About: paired leaf panels -----------------------------------
   Measured off the comp: yellow carries a large arc on its TOP-LEFT,
   green the mirror on its BOTTOM-RIGHT. Both wear the logo's magenta a
   in the top-right corner.
   ------------------------------------------------------------------ */
.vlc-leaves{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);
  max-width:1180px;margin-inline:auto}
.vlc-leaf{position:relative;padding:clamp(28px,3.4vw,48px);overflow:hidden;
  min-height:clamp(240px,26vw,330px);display:flex;flex-direction:column;justify-content:center}
.vlc-leaf--belief{background:var(--vlc-yellow);border-radius:44% 0 0 0}
.vlc-leaf--history{background:var(--vlc-accent);border-radius:0 0 44% 0;color:#fff}
.vlc-leaf h2,.vlc-leaf .elementor-heading-title{font-size:clamp(1.2rem,2.1vw,1.6rem);
  margin:0 0 14px;color:var(--vlc-ink)}
.vlc-leaf--history h2,.vlc-leaf--history .elementor-heading-title{color:#fff}
.vlc-leaf p{font-size:.82rem;line-height:1.62;max-width:40ch;color:var(--vlc-ink)}
.vlc-leaf--history p{color:#fff}
.vlc-leaf__mark{position:absolute;top:clamp(16px,2vw,26px);right:clamp(18px,2.2vw,30px);
  width:clamp(28px,3.4vw,46px);height:auto;pointer-events:none}

/* ---- About: four value cards with photographs ---- */
.vlc-props{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,28px);
  max-width:1180px;margin-inline:auto}
.vlc-prop{text-align:center}
.vlc-prop img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 32%;
  border-radius:var(--vlc-r-md)}
.vlc-prop h3,.vlc-prop .elementor-heading-title{font-size:1rem;margin:14px 0 4px}
.vlc-prop p{font-size:.76rem;color:var(--vlc-muted);max-width:28ch;margin:0 auto;text-align:center}

/* ---- Bordered closing box ---- */
.vlc-cta-box{border:1.5px solid var(--vlc-yellow);border-radius:var(--vlc-r-lg);
  max-width:1180px;margin-inline:auto;padding:clamp(24px,3vw,44px);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,3.4vw,56px);align-items:center}
.vlc-cta-box__copy{align-items:flex-start}
.vlc-cta-box__copy h2,.vlc-cta-box__copy .elementor-heading-title{
  font-size:clamp(1.7rem,3.2vw,2.6rem);max-width:11ch;line-height:1.06;margin-bottom:14px}
.vlc-cta-box__copy p{font-size:.88rem;max-width:38ch;margin-bottom:22px}
.vlc-cta-box__btns{display:flex;gap:clamp(10px,1.4vw,20px);flex-wrap:wrap}
.vlc-cta-box img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:40% 0 0 0}

@media (max-width:1024px){
  .vlc-leaves{grid-template-columns:1fr}
  .vlc-props{grid-template-columns:repeat(2,1fr)}
  .vlc-cta-box{grid-template-columns:1fr}
  .vlc-cta-box img{border-radius:28% 0 0 0;aspect-ratio:16/10}
}
@media (max-width:600px){.vlc-props{grid-template-columns:1fr}}

/* ---- Learning Journey: three stage cards with an action ---- */
.vlc-jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);
  max-width:1180px;margin-inline:auto}
.vlc-jcard{text-align:center;align-items:center}
.vlc-jcard img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 30%;
  border-radius:var(--vlc-r-lg)}
.vlc-jcard__eyebrow{display:block;font-size:.78rem;color:var(--vlc-muted);margin-top:16px}
.vlc-jcard h3,.vlc-jcard .elementor-heading-title{font-size:clamp(1.1rem,1.9vw,1.45rem);margin:4px 0 10px}
.vlc-jcard p{font-size:.78rem;color:var(--vlc-muted);max-width:30ch;margin:0 auto 16px;text-align:center}

/* ---- Stage page: eyebrow and age line ---- */
.vlc-stagelabel{display:block;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vlc-ink);margin-bottom:14px}
.vlc-agerange,.vlc-agerange .elementor-heading-title{color:var(--vlc-accent);
  font-size:clamp(1.25rem,2.4vw,1.75rem);margin:6px 0 16px}

/* ---- Stage page: cream explainer panel ---- */
.vlc-explain{background:var(--vlc-bg);border-radius:var(--vlc-r-lg);
  max-width:1180px;margin-inline:auto;padding:clamp(26px,3.2vw,52px);
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,3.4vw,56px);align-items:center}
.vlc-explain--mediafirst{grid-template-columns:1.05fr 1fr}
.vlc-explain img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:40% 0 0 0}
.vlc-explain h2,.vlc-explain .elementor-heading-title{font-size:clamp(1.5rem,2.8vw,2.1rem);
  max-width:12ch;line-height:1.06;margin-bottom:16px}
.vlc-explain p{font-size:.88rem;max-width:44ch}

/* ---- Stage page: closing band with paired buttons ---- */
.vlc-endband{background:var(--vlc-bg);border-radius:var(--vlc-r-lg);
  max-width:1180px;margin-inline:auto;padding:clamp(30px,4vw,64px) var(--vlc-md);
  text-align:center;align-items:center}
.vlc-endband h2,.vlc-endband .elementor-heading-title{font-size:clamp(1.5rem,3vw,2.3rem);
  max-width:18ch;margin-inline:auto;text-wrap:balance}
.vlc-endband p{color:var(--vlc-muted);font-size:.88rem;margin:0 auto 22px;text-align:center}
.vlc-endband__btns{display:flex;justify-content:center;gap:0}

@media (max-width:1024px){
  .vlc-jcards{grid-template-columns:1fr;max-width:420px}
  .vlc-explain,.vlc-explain--mediafirst{grid-template-columns:1fr}
  .vlc-explain img{border-radius:28% 0 0 0;aspect-ratio:16/10}
}

/* ---- Admissions: four-step process ---- */
.vlc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,36px);
  max-width:1180px;margin-inline:auto;text-align:center}
.vlc-step{text-align:center}
.vlc-step__mark{width:clamp(56px,6vw,74px);height:clamp(56px,6vw,74px);margin:0 auto 14px;
  border-radius:50%;border:1.5px solid var(--vlc-accent);display:flex;
  align-items:center;justify-content:center;font-weight:600;color:var(--vlc-accent);
  font-size:1.05rem}
.vlc-step h3,.vlc-step .elementor-heading-title{font-size:1rem;margin:0 0 4px}
.vlc-step p{font-size:.74rem;color:var(--vlc-muted);max-width:24ch;margin:0 auto;text-align:center}

/* ---- Fees table ---- */
.vlc-fees{max-width:1000px;margin-inline:auto;width:100%}
.vlc-fees table{width:100%;border-collapse:separate;border-spacing:0;
  border-radius:var(--vlc-r-md);overflow:hidden;font-size:.86rem}
.vlc-fees thead th{background:var(--vlc-yellow);color:var(--vlc-ink);font-weight:600;
  padding:14px 18px;text-align:center}
.vlc-fees tbody td{padding:14px 18px;text-align:center;color:var(--vlc-ink);
  border-bottom:1px solid var(--vlc-line);background:#FFFDF8}
.vlc-fees tbody tr:nth-child(even) td{background:var(--vlc-bg)}
.vlc-fees tbody tr:last-child td{border-bottom:0}

/* ---- FAQ accordion ---- */
.vlc-faq{max-width:1000px;margin-inline:auto;width:100%;display:grid;gap:12px}
.vlc-faq__item{background:#F4F4F2;border-radius:var(--vlc-r-lg);overflow:hidden}
.vlc-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:16px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:Poppins,sans-serif;font-size:clamp(.92rem,1.4vw,1.05rem);font-weight:500;
  color:var(--vlc-ink);padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px)}
.vlc-faq__sign{flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--vlc-accent);color:#fff;display:flex;align-items:center;
  justify-content:center;font-size:15px;line-height:1}
.vlc-faq__a{padding:0 clamp(18px,2.4vw,28px) clamp(16px,2vw,22px);
  color:var(--vlc-muted);font-size:.88rem;line-height:1.6;display:none}
.vlc-faq__item.is-open .vlc-faq__a{display:block}

@media (max-width:1024px){
  .vlc-steps{grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,36px)}
  .vlc-fees table{font-size:.78rem}
  .vlc-fees th,.vlc-fees td{padding:11px 10px}
}
@media (max-width:600px){.vlc-steps{grid-template-columns:1fr}}

/* ---- Campuses: three cards with an action ---- */
.vlc-campcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  max-width:1180px;margin-inline:auto}
.vlc-campcard{text-align:center;align-items:center}
.vlc-campcard img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 40%;
  border-radius:var(--vlc-r-lg)}
.vlc-campcard__eyebrow{display:block;font-size:.76rem;color:var(--vlc-muted);margin-top:16px}
.vlc-campcard h3,.vlc-campcard .elementor-heading-title{font-size:clamp(1.1rem,1.9vw,1.4rem);margin:4px 0 10px}
.vlc-campcard p{font-size:.78rem;color:var(--vlc-muted);max-width:30ch;margin:0 auto 16px;text-align:center}

/* ---- Split: copy left, arc photo right ---- */
.vlc-split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,4vw,72px);
  align-items:center;max-width:1180px;margin-inline:auto}
.vlc-split--flip{grid-template-columns:1.05fr 1fr}
.vlc-split__copy{align-items:flex-start}
.vlc-split__copy h2,.vlc-split__copy .elementor-heading-title{
  font-size:clamp(1.7rem,3.2vw,2.6rem);max-width:13ch;line-height:1.06;margin-bottom:16px}
.vlc-split__copy p{font-size:.9rem;max-width:40ch;margin-bottom:22px}
.vlc-split__btns{display:flex;gap:clamp(12px,1.8vw,26px);align-items:center;flex-wrap:wrap}
.vlc-split img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:42% 0 0 0}
.vlc-split--flip img{border-radius:0 42% 0 0}

/* ---- Campus detail: wide banner and info list ---- */
.vlc-banner{max-width:1180px;margin-inline:auto;width:100%}
.vlc-banner img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--vlc-r-lg)}
.vlc-info{display:grid;gap:clamp(14px,2vw,22px)}
.vlc-info__row{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.vlc-info__mark{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--vlc-accent);
  display:flex;align-items:center;justify-content:center;color:var(--vlc-accent);font-size:.9rem}
.vlc-info h3{font-size:1rem;margin:0 0 2px}
.vlc-info p{font-size:.78rem;color:var(--vlc-muted);margin:0;max-width:32ch}
.vlc-gallery3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
  max-width:1180px;margin-inline:auto}
.vlc-gallery3 img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--vlc-r-md)}

/* ---- Insight: filter chips and post cards ---- */
.vlc-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
  max-width:1180px;margin:0 auto clamp(28px,4vw,52px)}
.vlc-chip{border:1.5px solid var(--vlc-accent);background:transparent;color:var(--vlc-ink);
  border-radius:999px;padding:9px 22px;font-family:Poppins,sans-serif;font-size:.86rem;
  cursor:pointer;transition:background-color .18s ease,color .18s ease}
.vlc-chip:hover{background:var(--vlc-bg)}
.vlc-chip.is-active{background:var(--vlc-accent);color:#fff;border-color:var(--vlc-accent)}
.vlc-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);
  max-width:1180px;margin-inline:auto}
.vlc-post{text-align:center;align-items:center}
.vlc-post img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--vlc-r-lg)}
.vlc-post__cat{display:block;font-size:.76rem;color:var(--vlc-muted);margin-top:16px}
.vlc-post h3,.vlc-post .elementor-heading-title{font-size:clamp(1.05rem,1.8vw,1.3rem);margin:4px 0 8px;max-width:20ch}
.vlc-post p{font-size:.76rem;color:var(--vlc-muted);max-width:30ch;margin:0 auto 14px;text-align:center}

@media (max-width:1024px){
  .vlc-campcards,.vlc-posts,.vlc-gallery3{grid-template-columns:1fr;max-width:420px}
  .vlc-split,.vlc-split--flip{grid-template-columns:1fr}
  .vlc-split img,.vlc-split--flip img{border-radius:28% 0 0 0;aspect-ratio:16/10}
  .vlc-banner img{aspect-ratio:16/9}
}

.vlc-sec__head--left{text-align:left}
.vlc-sec__head--left p{margin-inline:0;text-align:left;max-width:52ch}
.vlc-sec__head--left h1,.vlc-sec__head--left .elementor-heading-title{font-size:clamp(2rem,4vw,3rem)}


/* ================================================================
   Measured corrections \u2014 taken off the comps with a pixel scan,
   not estimated. Source widths: learning_journey 868, stage comps 728,
   about 644. Percentages below are of the comp page width; the px caps
   are those percentages resolved at the 1920 design width.
   ================================================================ */

/* ---- Inner hero: the photo bleeds below the cream band, so the next
   section has to clear the bleed before its own gap starts.
   Comp gap from photo bottom to next content: LJ 14.5%, About 15.2%,
   Campuses 13.9%, Insight 12.6% of page width \u2014 ~270px at 1920.
   Plus the 6vw bleed = 20vw total. Previously 72px, so sections were
   sitting under the photo. ---- */
.vlc-ihero + .vlc-sec{padding-top:clamp(88px,20vw,380px)}

/* ---- Bands before the footer are not on the 1180 grid.
   Left inset measured: stage endband 3.7%/4.0%, explain box 3.4%,
   PECHS gallery 4.3% \u2014 ~71px at 1920. About's bordered box 6.8% \u2014 131px.
   The 1180 cap was pinching them to a 370px inset. ---- */
.vlc-sec--wide{--container-max-width:100%;max-width:100%;width:100%;padding-inline:0}
.vlc-sec--wide>.e-con-inner{max-width:100%;width:100%;padding-inline:0}
.vlc-sec--wide{--vlc-band-inset:clamp(16px,3.7vw,71px)}
.vlc-sec--wide>.e-con-inner{padding-inline:var(--vlc-band-inset)}
.vlc-sec--wide--lg{--vlc-band-inset:clamp(16px,6.8vw,131px)}
.vlc-explain,.vlc-explain--mediafirst,.vlc-endband,.vlc-cta-box{max-width:none;width:100%;margin-inline:0}

/* ---- Card actions are centred in every comp. Measured on the LJ
   comp: button centres 170.5 / 423.5 / 668.0 against card centres
   180.5 / 423.0 / 668.0. Elementor's container align-items resolves
   from a custom property that is unset here, so the widget was
   falling back to stretch; force the centring on the widget itself. ---- */
.vlc-jcard .elementor-widget-button,
.vlc-campcard .elementor-widget-button,
.vlc-post .elementor-widget-button{width:100%;display:flex;justify-content:center}

@media (max-width:1024px){
  .vlc-ihero + .vlc-sec{padding-top:clamp(64px,14vw,150px)}
  .vlc-sec--wide,.vlc-sec--wide--lg{--vlc-band-inset:var(--vlc-sm)}
}


/* ================================================================
   Senior Years \u2014 patterns measured off learning_journey_stage_3.jpg
   (comp 280px wide, scanned at 4x = 1120px; px caps resolved at 1920).
   ================================================================ */

/* Academic Philosophy: three circular marks, not photographs. */
.vlc-values--3{grid-template-columns:repeat(3,1fr)}

/* Subject Choices: three flush panels, yellow / green / yellow.
   Measured: boxes 324/318/321 wide at 1120 \u2014 equal thirds, gap 0.
   Band height 125 at 1120 = 11.2% of width. */
.vlc-subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  max-width:1180px;margin-inline:auto;width:100%}
.vlc-subject{padding:clamp(16px,2vw,28px) clamp(14px,1.7vw,24px);text-align:center;
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(104px,11.2vw,214px)}
.vlc-subject--yellow{background:var(--vlc-yellow)}
.vlc-subject--green{background:var(--vlc-accent)}
.vlc-subject h3,.vlc-subject .elementor-heading-title{font-size:clamp(.95rem,1.5vw,1.15rem);
  margin:0 0 6px;color:var(--vlc-ink)}
.vlc-subject p{font-size:.74rem;line-height:1.5;max-width:32ch;margin:0 auto;
  text-align:center;color:var(--vlc-ink)}
.vlc-subject--green h3,.vlc-subject--green .elementor-heading-title,
.vlc-subject--green p{color:#fff}

/* University Preparation: three cream cards, near square.
   Measured: 217 wide x 247 tall at 1120, gap 45. */
.vlc-unicards{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,4vw,77px);max-width:1180px;margin-inline:auto;width:100%}
.vlc-unicard{background:var(--vlc-bg);padding:clamp(22px,2.8vw,40px) clamp(16px,2vw,28px);
  text-align:center;display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(170px,22vw,423px)}
.vlc-unicard h3,.vlc-unicard .elementor-heading-title{font-size:clamp(1rem,1.7vw,1.2rem);
  margin:0 0 8px;max-width:14ch;margin-inline:auto}
.vlc-unicard p{font-size:.74rem;color:var(--vlc-muted);max-width:26ch;
  margin:0 auto;text-align:center}

@media (max-width:1024px){
  .vlc-values--3{grid-template-columns:1fr}
  .vlc-subjects{grid-template-columns:1fr}
  .vlc-unicards{grid-template-columns:1fr;max-width:420px}
}


/* ================================================================
   Homepage additions \u2014 Hummingbird, Our Purpose, Why Parents Choose,
   Latest Stories. Reuse .vlc-explain / .vlc-cta-box geometry already
   proven on About/Senior-Years so no new grid math is introduced.
   ================================================================ */

.vlc-kicker{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vlc-accent);font-weight:600;margin-bottom:12px}

/* The Hummingbird: centred band, brand mark instead of a photo. */
.vlc-humming{background:var(--vlc-bg);border-radius:var(--vlc-r-lg);max-width:1180px;
  margin-inline:auto;padding:clamp(32px,5vw,72px);text-align:center}
.vlc-humming .vlc-kicker{text-align:center}
.vlc-humming__mark{width:clamp(48px,6vw,84px);margin:0 auto 22px}
.vlc-humming__mark img{width:100%;display:block}
.vlc-humming h2,.vlc-humming .elementor-heading-title{font-size:clamp(1.4rem,2.4vw,1.9rem);
  max-width:26ch;margin-inline:auto}
.vlc-humming p{max-width:60ch;margin-inline:auto;text-align:center;font-size:.9rem}

/* Our Purpose: same band, left-aligned, on the accent-tinted surface. */
.vlc-purpose{max-width:820px;margin-inline:auto;text-align:center;padding:0 var(--vlc-md)}
.vlc-purpose .vlc-kicker{text-align:center}
.vlc-purpose p{max-width:62ch;margin-inline:auto;font-size:.92rem}

/* Why Parents Choose VLC: editorial reasons list, two columns on desktop. */
.vlc-reasons{max-width:980px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;
  gap:16px clamp(24px,3vw,48px)}
.vlc-reasons__item{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;line-height:1.55}
.vlc-reasons__item::before{content:'';flex:0 0 8px;width:8px;height:8px;margin-top:7px;
  background:var(--vlc-accent);border-radius:1px}

/* Latest Stories: single-CTA teaser, same shell as the About closing box. */
.vlc-stories{background:var(--vlc-ink);border-radius:var(--vlc-r-lg);color:#fff;
  max-width:1180px;margin-inline:auto;padding:clamp(32px,5vw,64px);
  text-align:center}
.vlc-stories h2,.vlc-stories .elementor-heading-title{color:#fff;max-width:20ch;margin-inline:auto}
.vlc-stories p{color:rgba(255,255,255,.82);max-width:56ch;margin-inline:auto;text-align:center}

@media (max-width:768px){
  .vlc-reasons{grid-template-columns:1fr}
}


/* ---- Centred closing note under a grid (Timeline, Campus Network).
   The class lands on the Elementor widget wrapper, so the inner <p> needs
   the centring too \u2014 the global p{max-width:65ch} otherwise pins it left. ---- */
.vlc-sec__note{width:100%;text-align:center}
.vlc-sec__note p{max-width:62ch;margin-inline:auto;text-align:center}

/* ---- Latest Stories: single centred CTA. ---- */
.vlc-stories>.elementor-widget-button{width:100%;display:flex;justify-content:center;margin-top:8px}
.vlc-stories>.elementor-widget-button .elementor-button{display:inline-flex}

/* ---- Closing band buttons sit on one line with real spacing. ---- */
.vlc-close__copy .vlc-cta-box__btns{display:flex;flex-direction:row;flex-wrap:wrap;
  gap:clamp(12px,1.4vw,20px);align-items:center;width:100%;margin-top:6px}
.vlc-close__copy .vlc-cta-box__btns>.elementor-widget-button{width:auto;flex:0 0 auto}


/* ================================================================
   About VLC \u2014 Values (5 up), Leadership Team, Careers.
   ================================================================ */

/* Values move from 4 to 5 columns to match the five named values. */
.vlc-props--5{grid-template-columns:repeat(5,1fr)}
.vlc-props--5 .vlc-prop img{aspect-ratio:1\/1}

/* Leadership: portrait, name, role, bio. Arc crop keeps the brand signature. */
.vlc-leaders{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.4vw,56px);max-width:1180px;margin-inline:auto;width:100%}
.vlc-leader{display:flex;flex-direction:column}
.vlc-leader img{width:100%;aspect-ratio:3\/4;object-fit:cover;
  border-radius:40% 0 0 0;margin-bottom:18px}
.vlc-leader h3,.vlc-leader .elementor-heading-title{font-size:clamp(1.05rem,1.7vw,1.3rem);
  margin:0 0 2px}
.vlc-leader__role{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vlc-accent);font-weight:600;margin-bottom:12px;display:block}
.vlc-leader p{font-size:.8rem;line-height:1.62;color:var(--vlc-muted);max-width:none}

/* Careers: cream band, centred, single CTA. */
.vlc-careers{background:var(--vlc-bg);border-radius:var(--vlc-r-lg);
  max-width:1180px;margin-inline:auto;width:100%;
  padding:clamp(32px,5vw,72px);text-align:center}
.vlc-careers h2,.vlc-careers .elementor-heading-title{max-width:20ch;margin-inline:auto}
.vlc-careers p{max-width:58ch;margin-inline:auto;text-align:center;font-size:.88rem}
.vlc-careers>.elementor-widget-button{width:100%;display:flex;justify-content:center;margin-top:8px}

@media (max-width:1024px){
  .vlc-props--5{grid-template-columns:repeat(2,1fr)}
  .vlc-leaders{grid-template-columns:1fr;max-width:460px}
}


/* ---- Arc panels: the 44% corner curve eats into the padding box, so the
   corner that carries the arc needs clearance or long copy gets clipped.
   Belief carries it top-left, history bottom-right. ---- */
/* Glyph removed at client request, so only the arc itself needs clearance
   now \u2014 trimmed back from the larger inset the mark used to require. */
.vlc-leaf--belief{padding-top:clamp(40px,5.5vw,84px);padding-left:clamp(38px,4.6vw,72px)}
.vlc-leaf--history{padding-bottom:clamp(40px,5.5vw,84px);padding-right:clamp(38px,4.6vw,72px)}
.vlc-leaf p{max-width:46ch}


/* ---- Wrapping card row: four across, remainder centred on the last row.
   Flex rather than grid so an incomplete final row centres itself. ---- */
.vlc-props--wrap{--vlc-cardgap:clamp(16px,2.2vw,28px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--vlc-cardgap);
  max-width:1180px;margin-inline:auto;width:100%}
.vlc-props--wrap>.vlc-prop{flex:0 0 calc((100% - (var(--vlc-cardgap) * 3)) / 4)}
@media (max-width:1024px){
  .vlc-props--wrap>.vlc-prop{flex:0 0 calc((100% - var(--vlc-cardgap)) / 2)}
}
@media (max-width:560px){
  .vlc-props--wrap>.vlc-prop{flex:0 0 100%}
}


/* ---- Admissions process: five steps read better as 3 + 2 with the
   short final row centred. Flex rather than grid so the remainder
   centres itself instead of hanging left. ---- */
.vlc-steps{--vlc-stepgap:clamp(18px,2.6vw,36px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--vlc-stepgap) var(--vlc-stepgap);
  grid-template-columns:none}
.vlc-steps>.vlc-step{flex:0 0 calc((100% - (var(--vlc-stepgap) * 2)) / 3)}
@media (max-width:900px){
  .vlc-steps>.vlc-step{flex:0 0 calc((100% - var(--vlc-stepgap)) / 2)}
}
@media (max-width:560px){
  .vlc-steps>.vlc-step{flex:0 0 100%}
}

/* ---- Fees copy sits centred under its heading, not ranged left. ---- */
.vlc-fees>.elementor-widget-text-editor{width:100%;text-align:center}
.vlc-fees>.elementor-widget-text-editor p{max-width:62ch;margin-inline:auto;text-align:center}


/* ================================================================
   Insight article modal. Uses the existing surface tokens so the
   dialog reads as part of the page rather than a bolt-on.
   ================================================================ */
.vlc-post__full{display:none}
body.vlc-modal-open{overflow:hidden}

.vlc-modal{position:fixed;inset:0;z-index:9999;display:flex;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.vlc-modal[hidden]{display:none}
.vlc-modal__backdrop{position:absolute;inset:0;background:rgba(54,54,54,.55);
  backdrop-filter:blur(2px)}
.vlc-modal__panel{position:relative;background:#fff;border-radius:var(--vlc-r-lg);
  width:min(720px,100%);max-height:min(84vh,900px);overflow-y:auto;
  padding:clamp(28px,4vw,56px);box-shadow:0 24px 70px rgba(0,0,0,.22)}
.vlc-modal__close{position:absolute;top:14px;right:16px;width:38px;height:38px;
  border:0;border-radius:50%;background:var(--vlc-bg);color:var(--vlc-ink);
  font-size:1.4rem;line-height:1;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.vlc-modal__close:hover{background:var(--vlc-yellow)}
.vlc-modal__eyebrow{display:block;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--vlc-accent);font-weight:600;margin-bottom:10px}
.vlc-modal__title{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.12;margin:0 0 18px}
.vlc-modal__body p{font-size:.9rem;line-height:1.68;margin:0 0 14px;max-width:none}
.vlc-modal__body p:last-child{margin-bottom:0}

/* Cards keep their actions on a common baseline regardless of copy length. */
.vlc-post{display:flex;flex-direction:column}
.vlc-post>.elementor-widget-button{margin-top:auto;padding-top:14px}


/* ---- Values row wraps and centres its remainder (Lahore runs five). ---- */
.vlc-values{--vlc-valgap:clamp(16px,2.4vw,32px)}
.vlc-values:has(> :nth-child(5)){display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--vlc-valgap);grid-template-columns:none}
.vlc-values:has(> :nth-child(5))>.vlc-value{flex:0 0 calc((100% - (var(--vlc-valgap) * 4)) / 5)}
@media (max-width:1024px){
  .vlc-values:has(> :nth-child(5))>.vlc-value{flex:0 0 calc((100% - var(--vlc-valgap)) / 2)}
}


/* ---- Two short prose blocks side by side, to keep long pages from
   running on. Each column keeps the centred treatment of .vlc-purpose. ---- */
.vlc-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,80px);
  max-width:1180px;margin-inline:auto;width:100%;align-items:start}
.vlc-duo__col{text-align:center}
.vlc-duo__col h2,.vlc-duo__col .elementor-heading-title{font-size:clamp(1.3rem,2.3vw,1.75rem);
  margin:0 0 14px}
.vlc-duo__col p{max-width:46ch;margin-inline:auto;text-align:center;font-size:.88rem}

/* Purpose bands: give the heading room before the copy starts. */
.vlc-purpose h2,.vlc-purpose .elementor-heading-title{margin-bottom:16px}
.vlc-purpose p+p{margin-top:12px}

@media (max-width:900px){
  .vlc-duo{grid-template-columns:1fr;gap:clamp(28px,6vw,48px)}
}


/* 3-up values row (Karachi Campus Network after the Senior card was pulled). */
/* 3-up values */
.vlc-values:has(> :nth-child(3)):not(:has(> :nth-child(4))){
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--vlc-valgap);
  grid-template-columns:none}
.vlc-values:has(> :nth-child(3)):not(:has(> :nth-child(4)))>.vlc-value{
  flex:0 0 calc((100% - (var(--vlc-valgap) * 2)) / 3)}
@media (max-width:900px){
  .vlc-values:has(> :nth-child(3)):not(:has(> :nth-child(4)))>.vlc-value{flex:0 0 100%}
}


/* Campus cards: copy lengths differ, so pin the actions to a shared
   baseline instead of letting each button float under its own text. */
/* campus card baseline */
.vlc-campus{display:flex;flex-direction:column}
.vlc-campus>.elementor-widget-button{margin-top:auto;padding-top:16px}


/* ---- Footer campus list: each campus expands to its own address and
   contact details, so all four Karachi campuses fit without a wall of text. ---- */
.vlc-footer__campuses{display:flex;flex-direction:column;gap:2px}
.vlc-fcampus__toggle{display:flex;align-items:center;justify-content:space-between;
  gap:12px;width:100%;background:none;border:0;padding:6px 0;cursor:pointer;
  color:inherit;font:inherit;font-size:.82rem;text-align:left;
  opacity:.92;transition:opacity .2s ease}
.vlc-fcampus__toggle:hover{opacity:1}
.vlc-fcampus__sign{font-size:1rem;line-height:1;flex:0 0 auto;
  transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.vlc-fcampus.is-open .vlc-fcampus__sign{transform:rotate(45deg)}
.vlc-fcampus__body{padding:2px 0 10px}
.vlc-fcampus__body p{font-size:.78rem;line-height:1.5;margin:0 0 4px;opacity:.85}
.vlc-fcampus__body a{color:inherit;text-decoration:none}
.vlc-fcampus__body a:hover{text-decoration:underline}


/* Campus grid wraps once a fourth campus is added; the remainder centres. */
/* campus grid wrap */
.vlc-campuses{--vlc-campgap:clamp(18px,2.6vw,36px)}
.vlc-campuses:has(> :nth-child(4)){display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--vlc-campgap);grid-template-columns:none}
.vlc-campuses:has(> :nth-child(4))>.vlc-campus{
  flex:0 0 calc((100% - (var(--vlc-campgap) * 2)) / 3)}
@media (max-width:900px){
  .vlc-campuses:has(> :nth-child(4))>.vlc-campus{flex:0 0 100%}
}

/* Lahore contact directory holds a single card \u2014 centre it. */
.vlc-campuses:not(:has(> :nth-child(2))){display:flex;justify-content:center}
.vlc-campuses:not(:has(> :nth-child(2)))>.vlc-campus{flex:0 0 min(420px,100%)}


/* ---- Gallery items: caption under each photo, click opens a lightbox.
   Reuses the .vlc-modal shell already built for Insight articles. ---- */
.vlc-gitem{margin:0;display:flex;flex-direction:column}
.vlc-gitem__btn{padding:0;border:0;background:none;cursor:zoom-in;display:block;
  border-radius:var(--vlc-r-md);overflow:hidden;line-height:0}
.vlc-gitem__btn img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.vlc-gitem__cap{font-size:.76rem;line-height:1.45;color:var(--vlc-muted);
  margin-top:10px;text-align:center}

.vlc-lightbox{position:fixed;inset:0;z-index:10000;display:flex;
  align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.vlc-lightbox[hidden]{display:none}
.vlc-lightbox__backdrop{position:absolute;inset:0;background:rgba(54,54,54,.82)}
.vlc-lightbox__inner{position:relative;max-width:min(1000px,100%);
  max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.vlc-lightbox__inner img{max-width:100%;max-height:76vh;object-fit:contain;
  border-radius:var(--vlc-r-md);display:block}
.vlc-lightbox__cap{color:#fff;font-size:.84rem;text-align:center;max-width:56ch}
.vlc-lightbox__close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;
  border:0;border-radius:50%;background:#fff;color:var(--vlc-ink);font-size:1.4rem;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vlc-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.9);
  color:var(--vlc-ink);font-size:1.3rem;cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.vlc-lightbox__nav--prev{left:-22px}
.vlc-lightbox__nav--next{right:-22px}
@media (max-width:640px){
  .vlc-lightbox__nav--prev{left:4px}
  .vlc-lightbox__nav--next{right:4px}
  .vlc-lightbox__close{top:4px;right:4px}
}


/* Reasons list inside a split: single column, ranged left beside the photo. */
.vlc-reasons--stack{grid-template-columns:1fr;max-width:none;margin-inline:0;gap:12px}
.vlc-split__copy .vlc-reasons--stack .vlc-reasons__item{text-align:left}
.vlc-split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:0 0 40% 0}