/* VLC Circle - page sections.
   Vertical rhythm is deliberately tight: a section should sit in one laptop
   viewport wherever its content allows. */

.vlc-sec{padding:clamp(44px,5.5vw,72px) var(--vlc-md)}
.vlc-sec--cream{background:var(--vlc-bg)}
.vlc-sec-flush{--container-max-width:100%;max-width:100%;width:100%;padding:0}
.vlc-sec-flush>.e-con-inner{max-width:100%;width:100%;padding:0}
.vlc-sec__head{text-align:center;margin-bottom:clamp(24px,3vw,40px)}
.vlc-sec__head h2,.vlc-sec__head .elementor-heading-title{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:4px}
.vlc-sec__head p{color:var(--vlc-muted);font-size:.92rem;margin:0 auto;text-align:center}
.vlc-sec__cta{display:flex;justify-content:center;margin-top:clamp(24px,3vw,40px)}
.vlc-sec>.e-con-inner{padding:0;max-width:1180px;width:100%}

/* ---- Green statement panel ---- */
.vlc-panel{display:grid;grid-template-columns:1fr 1.25fr;align-items:stretch;
  background:var(--vlc-accent);color:#fff;overflow:hidden;margin-block:clamp(24px,4vw,56px)}
.vlc-panel__copy{padding:clamp(28px,3.5vw,48px);align-self:center}
.vlc-panel__copy h2,.vlc-panel__copy .elementor-heading-title{font-size:clamp(1.35rem,2.3vw,1.85rem);color:#fff;max-width:18ch}
.vlc-panel__copy p{font-size:.86rem;opacity:.94;max-width:46ch}
.vlc-panel__media,.vlc-panel__media .elementor-widget-image{height:100%}
.vlc-panel__media img{width:100%;height:100%;min-height:280px;object-fit:cover;
  border-radius:0 0 0 var(--vlc-r-lg)}

/* ---- Three-stage row ---- */
.vlc-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px)}
.vlc-stage{text-align:center}
.vlc-stage img{border-radius:var(--vlc-r-lg);aspect-ratio:3/4;object-fit:cover;width:100%}
.vlc-stages{align-items:start}
.vlc-stages>*:nth-child(3){margin-top:clamp(12px,2vw,26px)}
.vlc-stage__eyebrow{display:block;font-size:.72rem;color:var(--vlc-muted);
  letter-spacing:.12em;text-transform:uppercase;margin-top:12px}
.vlc-stage h3,.vlc-stage .elementor-heading-title{font-size:1.1rem;margin:4px 0}
.vlc-stage p{font-size:.8rem;color:var(--vlc-muted);max-width:30ch;margin:0 auto;text-align:center}

/* ---- Four value props ---- */
.vlc-values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.5vw,32px);text-align:center}
.vlc-value__mark{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;
  border:1.5px solid var(--vlc-accent);display:flex;align-items:center;justify-content:center}
.vlc-value__mark span{width:20px;height:20px;border:1.5px solid var(--vlc-accent);
  border-radius:50% 50% 50% 2px;transform:rotate(-45deg)}
.vlc-value h3,.vlc-value .elementor-heading-title{font-size:1rem;margin-bottom:2px}
.vlc-value p{font-size:.78rem;color:var(--vlc-muted);max-width:26ch;margin:0 auto;text-align:center}

/* ---- Student-life mosaic ---- */
.vlc-mosaic{display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:clamp(120px,13vw,158px);gap:12px}
.vlc-mosaic .elementor-widget-image,.vlc-mosaic>*{height:100%}
.vlc-mosaic img{width:100%;height:100%;object-fit:cover;border-radius:var(--vlc-r-md)}
.vlc-mosaic>*:nth-child(1){grid-row:span 2}
.vlc-mosaic>*:nth-child(2){grid-row:span 3}
.vlc-mosaic>*:nth-child(3){grid-row:span 2}
.vlc-mosaic>*:nth-child(4){grid-row:span 2}
.vlc-mosaic>*:nth-child(6){grid-row:span 2}

/* ---- Testimonial ---- */
.vlc-quote{border:1.5px solid var(--vlc-yellow);border-radius:var(--vlc-r-lg);
  grid-template-columns:1.05fr .95fr;gap:clamp(24px,3vw,40px);
  padding:clamp(24px,3vw,40px);align-items:center}
.vlc-quote__mark{color:var(--vlc-magenta);font-size:2.4rem;line-height:.6;
  font-weight:700;display:block;margin-bottom:12px}
.vlc-quote blockquote{margin:0;font-size:clamp(1.05rem,1.7vw,1.35rem);
  line-height:1.3;font-weight:500;max-width:24ch}
.vlc-quote cite{display:block;margin-top:12px;font-style:normal;
  font-size:.78rem;color:var(--vlc-muted)}
.vlc-quote img{border-radius:var(--vlc-r-md);width:100%;aspect-ratio:16/10;object-fit:cover}

/* ---- Closing CTA ------------------------------------------------
   Measured off the source comp, not invented:
   the photograph is inset on the page grid (it does NOT bleed),
   is close to square, carries a small radius, and rises above the
   cream band's top edge into the white section above it.
   ---------------------------------------------------------------- */
.vlc-close{max-width:1180px;margin-inline:auto;
  padding-inline:var(--vlc-md);
  padding-block:0 clamp(48px,7vw,104px);
  display:grid;grid-template-columns:37% 1fr;
  gap:clamp(28px,4.5vw,72px);align-items:center}
.vlc-close>.elementor-widget-image{margin-top:calc(-1 * clamp(32px,4vw,58px))}
.vlc-close>.elementor-widget-image img{width:100%;aspect-ratio:9/10;
  object-fit:cover;border-radius:var(--vlc-r-md);min-height:0}
.vlc-close__copy{align-items:flex-start;padding:0}
.vlc-close__copy h2,.vlc-close__copy .elementor-heading-title{
  font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:13ch;margin-bottom:24px}

@media (max-width:1024px){
  .vlc-panel,.vlc-quote{grid-template-columns:1fr}
  .vlc-panel__media img{border-radius:0}
  .vlc-close{grid-template-columns:1fr;gap:clamp(20px,4vw,32px);
    padding-block:clamp(32px,5vw,48px)}
  .vlc-close>.elementor-widget-image{margin-top:0}
  .vlc-close>.elementor-widget-image img{aspect-ratio:4/3}
  .vlc-values{grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,40px)}
  .vlc-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .vlc-mosaic>*{grid-row:span 1 !important}
  .vlc-mosaic>*:nth-child(2){grid-row:span 2 !important}
}
@media (max-width:640px){
  .vlc-stages{grid-template-columns:1fr;gap:clamp(24px,5vw,40px)}
  .vlc-values{grid-template-columns:1fr}
  .vlc-mosaic{grid-template-columns:1fr;grid-auto-rows:190px}
  .vlc-mosaic>*{grid-row:span 1 !important}
}

/* Source photos are 3:2 landscape; portrait frames crop them.
   Bias the crop upward so faces survive. */
.vlc-hero__strip .vlc-arc img,
.vlc-stage img,
.vlc-close img,
.vlc-mosaic img{object-position:center 32%}
.vlc-panel__media img{object-position:center 40%}