/* ==========================================================================
   Homepage 2. A longer homepage that reuses the approved homepage sections
   from variant-d.css and the shared page components from pages-d.css, and
   adds the sections that only exist on this version: reasons to choose,
   the joining pathway, testimonials, articles and a FAQ preview.

   Headings, buttons and links stay in the neutral ink scale here. Department
   colour appears only on cards, surfaces, icons and programme markers.
   ========================================================================== */

.home-2 main{padding-bottom:0}
.h2-section{max-width:1120px;margin:0 auto clamp(96px,11vw,150px)}
.h2-head{display:grid;grid-template-columns:1.1fr .72fr;gap:clamp(40px,7vw,110px);align-items:end;margin-bottom:44px}
.h2-eyebrow{margin:0 0 10px;font-size:12px;font-weight:600;color:#6B6178}
.h2-head h2{margin:0;font-size:clamp(34px,3.84vw,53px);line-height:1.2;text-wrap:pretty}
.h2-head>p{margin:0 0 6px;color:var(--soft);font-size:15px;line-height:1.6;max-width:430px}

/* ---------- Reasons to choose ---------- */
.h2-reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;border-radius:16px;overflow:hidden}
.h2-reason{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:32px 34px;background:#F8F6FA}
.h2-reason>i{font-size:26px;color:#6F6479}
.h2-reason b{display:block;margin-bottom:7px;font-size:18px;letter-spacing:.1px}
.h2-reason span{display:block;color:#544A5C;font-size:14px;line-height:1.6}

/* ---------- Joining pathway ---------- */
.h2-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border-radius:16px;overflow:hidden;counter-reset:h2step;margin:0;padding:0;list-style:none}
.h2-step{display:flex;flex-direction:column;min-height:210px;padding:30px 28px;background:#F4F1F7}
.h2-step:nth-child(2){background:#EFEBF4}
.h2-step:nth-child(3){background:#E9E4F0}
.h2-step:nth-child(4){background:#171219;color:#fff}
/* The number used to carry margin-bottom:auto, which pushed the title and body
   to the foot of each card. With four cards of different lengths the titles
   then started at four different heights. Content now stacks from the top and
   min-height keeps the boxes level. */
.h2-step::before{counter-increment:h2step;content:counter(h2step,decimal-leading-zero);color:#7A6F84;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.h2-step:nth-child(4)::before{color:#B7ADBE}
.h2-step b{display:block;margin-top:22px;font-size:18px;letter-spacing:.1px}
.h2-step span{display:block;margin-top:7px;color:#544A5C;font-size:13px;line-height:1.55}
.h2-step:nth-child(4) span{color:#C4BCC9}

/* ---------- Teacher preview ---------- */
/* four: the owner plus the senior person in each department */
.h2-teachers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.h2-teacher{background:#F8F6FA;border-radius:16px;overflow:hidden}
.h2-teacher figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:#F3F0F7}
.h2-teacher img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.h2-teacher div{padding:22px 24px 26px}
.h2-teacher h3{margin:0 0 4px;font-size:15px;letter-spacing:.1px}
.h2-teacher p{margin:0;color:#6B6178;font-size:12px;font-weight:600}

/* ---------- Testimonials ----------
   These reuse the shared .carousel component from pages-d.css. On mobile it
   behaves exactly like the studios carousel: one full width card at a time,
   with the same arrows and dots. Above 680px the track is just a grid and the
   controls are hidden, so the desktop layout is unchanged. */
.h2-quote{display:flex;flex-direction:column;margin:0;padding:32px 30px;background:#F8F6FA;border-radius:16px}
.h2-quote>i{font-size:26px;color:#8B819B;margin-bottom:18px}
.h2-quote blockquote{margin:0 0 22px;color:#3E3548;font-size:15px;line-height:1.62}
.h2-quote figcaption{margin-top:auto}
.h2-quote cite{display:block;font-style:normal;font-size:15px;font-weight:600;letter-spacing:.1px}
.h2-quote small{display:block;margin-top:3px;color:#6B6178;font-size:12px}
.h2-quote a{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:12px;font-weight:600;color:var(--ink);transition:color .2s ease}
.h2-quote a:hover{color:var(--soft)}
.h2-quote a i{transition:transform .2s ease}
.h2-quote a:hover i{transform:translate(3px,-3px)}

/* ---------- Articles ---------- */
.h2-articles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;border-radius:16px;overflow:hidden}
.h2-article{display:flex;flex-direction:column;padding:30px 28px;background:#F8F6FA;transition:background .2s ease}
.h2-article:hover{background:#F3F0F7}
.h2-article-tag{display:flex;align-items:center;gap:8px;margin-bottom:16px;color:#6B6178;font-size:11px;font-weight:600}
.h2-article-tag .dot{width:7px;height:7px}
.h2-article h3{margin:0 0 20px;font-size:14px;line-height:1.2;letter-spacing:.1px}
.h2-article span{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:12px;font-weight:600;color:var(--ink)}
.h2-article span i{transition:transform .2s ease}
.h2-article:hover span i{transform:translate(3px,-3px)}

/* ---------- FAQ preview ---------- */
.h2-faq-wrap{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(40px,7vw,100px);align-items:start}
.h2-faq-wrap h2{margin:0 0 16px;font-size:clamp(30px,3.36vw,43px);line-height:1.2;text-wrap:pretty}
.h2-faq-wrap>div>p{margin:0 0 24px;color:var(--soft);font-size:15px;line-height:1.6}

@media(max-width:1000px){
  .h2-head{grid-template-columns:1fr;gap:22px;align-items:start}
  .h2-reasons{grid-template-columns:1fr}
  .h2-steps{grid-template-columns:1fr 1fr}
  .h2-teachers,.h2-articles{grid-template-columns:1fr 1fr}
  .h2-articles .h2-article:last-child{grid-column:1/-1}
  .h2-faq-wrap{grid-template-columns:1fr;gap:32px}
}

@media(max-width:680px){
  .h2-section{margin-bottom:88px}
  .h2-head{margin-bottom:32px}
  .h2-head h2{font-size:34px}
  .h2-reason{padding:26px 22px;gap:16px}
  .h2-steps{grid-template-columns:1fr}
  .h2-step{min-height:0;padding:26px 22px}
  .h2-step b{margin-top:18px}
  .h2-teachers,.h2-articles{grid-template-columns:1fr}
  .h2-quote{padding:28px 24px}
  .h2-article{padding:26px 22px}

}

/* Testimonials: carousel on mobile, plain grid above it */
.quotes-carousel .carousel-viewport{background:none;border-radius:16px}
.quotes-carousel .carousel-slide{display:flex;flex-direction:column}
@media(min-width:681px){
  .quotes-carousel .carousel-viewport{overflow:visible;border-radius:0}
  .quotes-carousel .carousel-track{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;transform:none!important}
  .quotes-carousel .carousel-bar{display:none}
}
@media(min-width:681px) and (max-width:1000px){
  .quotes-carousel .carousel-track{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .quotes-carousel .carousel-bar{justify-content:center}
}

/* Conditional video block inside a testimonial card. Cards without a video
   simply do not have one. Client direction 2026-08-10. */
.h2-quote .video-facade{margin-bottom:16px;border-radius:14px}
.h2-quote .video-facade img{border-radius:14px}

/* Partner strip. Client direction 2026-07-23: Mangalika asked for the
   school's collaborations on the homepage. Logos sit on their own white
   plates so three different lockups, in three different colourways and
   aspect ratios, read as one row. */
.partner-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.partner-strip li{display:flex;align-items:center;justify-content:center;min-height:132px;padding:26px 30px;border:1px solid var(--line);border-radius:16px;background:#fff}
.partner-strip a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.partner-strip img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain}

@media (max-width:640px){
  .partner-strip{grid-template-columns:1fr 1fr;gap:10px}
  .partner-strip li{min-height:104px;padding:18px}
  .partner-strip img{max-height:48px}
}