/* =====================================================================
   Multi-page additions: video hero, course pages, gallery, about, etc.
   (loaded after style.css; inlined together for the Claude artifact)
   ===================================================================== */
.nowrap { white-space: nowrap; }
.h3 { font-size: 22px; }
.nav__links a[aria-current="page"] { background: var(--green-soft); color: var(--green-dark); }

/* ---------- video hero (full-bleed, headline in an organic blob) ---------- */
.vhero { position: relative; background: var(--navy); overflow: hidden; }
.vhero__media { position: relative; height: clamp(460px, 44vw, 640px); }
.vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vhero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,22,63,.35), transparent 55%), linear-gradient(0deg, rgba(11,22,63,.25), transparent 40%);
}
.vhero__blob {
  position: absolute; z-index: 2; left: clamp(16px, 5vw, 72px); bottom: clamp(28px, 5vw, 64px);
  width: min(560px, calc(100% - 32px)); padding: 44px 48px 40px;
  background: var(--green); color: #fff;
  border-radius: 46% 54% 52% 48% / 58% 50% 50% 42%;
  box-shadow: 0 20px 50px rgba(11,22,63,.25);
}
.vhero__blob::before {
  content: ""; position: absolute; right: 26px; top: -18px; width: 44px; height: 56px;
  background: var(--lime); border-radius: 50% 50% 50% 8px; transform: rotate(-24deg);
}
.vhero__kicker { font-weight: 800; font-size: 15px; color: var(--lime); margin-bottom: 8px; }
.vhero__blob h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25; margin-bottom: 12px; }
.vhero__lead { margin: 0; color: #e8f6ec; font-size: 16px; max-width: 30em; }
/* laurel-wreath badges, side by side at the bottom right of the video */
.vhero__badges { position: absolute; z-index: 2; right: clamp(16px, 4vw, 56px); bottom: 56px; display: flex; gap: 0; }
.laurel-badge {
  position: relative; width: 176px; height: 170px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  color: var(--navy); line-height: 1.2;
}
.laurel-badge::before { /* soft light halo so the text reads on any video frame */
  content: ""; position: absolute; left: 34px; right: 34px; top: 30px; bottom: 30px; border-radius: 50%;
  background: rgba(255,255,255,.9); box-shadow: 0 0 18px 6px rgba(255,255,255,.55);
}
.laurel-badge__wreath { position: absolute; top: 2px; left: 4px; width: 168px; height: 166px; }
.laurel-badge__wreath--r { transform: scaleX(-1); }
.laurel-badge__label { position: relative; font-weight: 800; font-size: 12px; letter-spacing: .02em; max-width: 96px; }
.laurel-badge__big { position: relative; display: flex; align-items: baseline; gap: 3px; margin-top: 2px; }
.laurel-badge__big b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--navy); }
.laurel-badge__big small { font-size: 12px; font-weight: 800; }
.vhero__ailabel {
  position: absolute; z-index: 3; right: 72px; bottom: 26px;
  background: rgba(11,22,63,.55); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; letter-spacing: .02em;
}
.vhero__toggle {
  position: absolute; z-index: 3; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.9); cursor: pointer; display: grid; place-items: center;
}
.vhero__toggle .ico { width: 12px; height: 14px; border-left: 4px solid var(--navy); border-right: 4px solid var(--navy); }
.vhero__toggle[aria-pressed="true"] .ico { width: 0; height: 0; border: 0; border-left: 13px solid var(--navy); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }

/* quick pick card overlapping the hero */
.quickpick { position: relative; z-index: 3; margin-top: -28px; }
.quickpick__card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  padding: 28px 32px; display: grid; grid-template-columns: auto 1fr; gap: 18px 28px; align-items: center;
}
.quickpick__title { font-size: 18px; margin: 0; }
.quickpick__pills { display: flex; flex-wrap: wrap; gap: 10px; }
.quickpick__pills a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  border: 2px solid var(--line); color: var(--ink); font-weight: 700; text-decoration: none; font-size: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,.05); transition: border-color .2s, background .2s;
}
.quickpick__pills a:hover { border-color: var(--green); background: var(--green-soft); }
.quickpick__pills i { font-style: normal; font-family: var(--font-en); font-size: 12px; background: var(--lime); color: var(--navy); border-radius: 999px; padding: 1px 8px; }
.quickpick__cta { grid-column: 1 / -1; }
.quickpick__school { grid-column: 1 / -1; margin: 0; font-weight: 700; }
.quickpick__school a { text-decoration: none; border-bottom: 2px solid var(--lime); color: var(--navy); }

/* ---------- course detail pages ---------- */
.course-hero { background: var(--cream); padding: 48px 0 64px; }
.course-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.course-hero h1 { font-size: clamp(30px, 4vw, 46px); margin: 4px 0 14px; }
.course-hero .lead { font-size: 17px; color: var(--ink-soft); }
.course-hero__img img { border-radius: var(--r-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; box-shadow: var(--shadow-lift); }
.course-body { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.course-body__main { display: grid; gap: 24px; }
.course-body__side { position: sticky; top: 100px; }
.course-body .panel h2 { color: var(--accent); }
.info-box { background: #fff; border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow); border-top: 6px solid var(--accent); }
.info-box dl { margin: 0 0 20px; display: grid; gap: 12px; }
.info-box dl > div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; font-size: 15px; border-bottom: 1px dashed var(--line); padding-bottom: 10px; }
.info-box dt { color: var(--ink-soft); font-weight: 700; }
.info-box dd { margin: 0; font-weight: 600; }
.check-list--flat li { box-shadow: none; background: var(--mist); }
.learn-list li { border-left-color: var(--accent); }

/* ---------- courses compare table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); box-shadow: var(--shadow); background: #fff; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.compare-table th { background: var(--navy); color: #fff; font-size: 14px; letter-spacing: .04em; }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table td a { font-weight: 800; text-decoration: none; }
.compare-table .muted { color: var(--ink-soft); }

/* ---------- works ---------- */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; background: var(--cream); border-radius: var(--r-lg); padding: 20px; }
.pair figure { margin: 0; }
.pair img { border-radius: var(--r-md); aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.pair figcaption { font-weight: 700; font-size: 14px; margin-top: 8px; text-align: center; }
.pair__arrow { font-size: 28px; color: var(--green); font-weight: 800; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gallery figure { margin: 0; }
.gallery button { all: unset; cursor: zoom-in; display: block; border-radius: var(--r-md); overflow: hidden; }
.gallery button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.gallery img { aspect-ratio: 3/4; object-fit: cover; width: 100%; transition: transform .4s; }
.gallery button:hover img { transform: scale(1.05); }
.soon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.soon { position: relative; border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: #fff; display: block; }
.soon img { aspect-ratio: 1; object-fit: cover; width: 100%; filter: saturate(.85); }
.soon > span { position: absolute; left: 10px; bottom: 10px; background: var(--accent); border-radius: 999px; padding: 4px 14px; font-weight: 800; font-size: 14px; }

/* ---------- about ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value { background: var(--mist); border-radius: var(--r-lg); padding: 32px; }
.value h3 { font-size: 20px; color: var(--green-dark); }
.value p { margin: 0; color: var(--ink-soft); }
.tool-chips { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; overflow-x: auto; padding: 12px 4px 24px; -webkit-overflow-scrolling: touch; }
.tool-chips span:first-child { margin-left: auto; }
.tool-chips span:last-child { margin-right: auto; }
.tool-chips span { flex: 0 0 auto; white-space: nowrap; background: #fff; border-radius: 999px; padding: 10px 14px; font-family: var(--font-en); font-size: 14px; font-weight: 700; box-shadow: var(--shadow); }
.panel--navy { background: var(--navy); color: #fff; box-shadow: none; }
.panel--navy p { color: #cfd5ea; }
.panel--navy .eyebrow { color: var(--lime); }

.footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.1fr; }
.mobile-menu > .btn { width: 100%; justify-content: space-between; }

@media (max-width: 1080px) {
  .course-body { grid-template-columns: 1fr; }
  .course-body__side { position: static; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .soon-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .vhero__media { height: auto; aspect-ratio: 4 / 3; }
  .vhero__ailabel { right: auto; left: 12px; bottom: 76px; }
  .vhero__blob { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 12px 0; padding: 32px 26px 28px; border-radius: 36px 44px 40px 32px / 40px 36px 44px 38px; }
  .vhero__toggle { bottom: 76px; }
  .vhero__badges { position: static; justify-content: center; gap: 0; margin: 10px 0 0; }
  .laurel-badge { width: 160px; height: 156px; }
  .laurel-badge__wreath { width: 154px; height: 152px; left: 3px; }
  .vhero { padding-bottom: 8px; }
  .quickpick { margin-top: 24px; }
  .quickpick__card { grid-template-columns: 1fr; padding: 24px 20px; }
  .course-hero__grid, .pairs, .values { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .soon-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .info-box dl > div { grid-template-columns: 76px 1fr; }
}

/* video captions sit below the video, like the photo captions */
.video-item { margin: 0; }
.vcap { max-width: 315px; margin: 14px auto 0; font-weight: 700; font-size: 16px; text-align: center; }

/* 合作形式: two formats, centred */
.formats { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
@media (max-width: 760px) {
  .formats { grid-template-columns: 1fr 1fr; }
}

/* ---------- header: language toggle beside the menu, Instagram + WhatsApp on the right ---------- */
.nav__links { margin: 0 0 0 12px; }
.nav__lang { margin-right: auto; }
.ig-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  color: #fff; background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
  transition: transform .2s, box-shadow .2s;
}
.ig-btn svg { width: 22px; height: 22px; }
.ig-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.mobile-menu > .btn + .btn { margin-top: 12px; }
@media (max-width: 1080px) {
  .nav__lang, .nav__tools .ig-btn { display: none; }
}

/* ---------- course cards: picture label, age line, short title, one-line summary ---------- */
.course-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }
.ccard {
  position: relative; flex: 0 1 calc((100% - 56px) / 3); display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.ccard__img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); }
.ccard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.ccard:hover .ccard__img img { transform: scale(1.04); }
.ccard__badge {
  position: absolute; left: 16px; bottom: 14px; background: #fff; color: var(--ink);
  border-radius: 10px; padding: 4px 12px; font-size: 14px; font-weight: 700; box-shadow: 0 2px 8px rgba(11,22,63,.08);
}
.ccard__body { padding: 26px 28px 24px; display: flex; flex-direction: column; flex: 1; }
.ccard__age { font-family: var(--font-en); font-weight: 700; font-size: 15px; color: var(--green-dark); margin-bottom: 8px; }
.ccard__age span { font-family: var(--font-zh); }
.ccard h3 { font-size: 26px; margin: 0 0 8px; }
.ccard p { color: var(--ink-soft); margin: 0 0 28px; }
.ccard__link {
  margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; font-size: 18px; color: var(--green-dark); text-decoration: none;
}
.ccard__link::before { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.ccard__link .arr { font-size: 20px; transition: transform .2s; }
.ccard:hover .ccard__link .arr { transform: translate(3px, -3px); }
@media (max-width: 1080px) { .ccard { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 760px) { .ccard { flex-basis: 100%; } }

/* detailed course cards (全部課程 page) inside the centred flex grid: 3 per row */
.course-grid > .course-card { flex: 0 1 calc((100% - 56px) / 3); }
@media (max-width: 1080px) { .course-grid > .course-card { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 760px) { .course-grid > .course-card { flex-basis: 100%; } }

/* quick pick: title + schools button on the left, course pills + "explore all" on the right */
.quickpick__card { grid-template-columns: auto 1fr; align-items: start; }
.quickpick__left { display: grid; gap: 14px; justify-items: start; }
.quickpick__pills { align-items: center; }
.quickpick__pills a.quickpick__all { min-height: 44px; padding: 8px 12px 8px 20px; border: 0; color: #fff; font-size: 15px; }
.quickpick__pills a.quickpick__all:hover { background: var(--green-dark); }
.quickpick__schoolbtn { min-height: 44px; padding: 8px 12px 8px 20px; font-size: 14px; }
.quickpick__schoolbtn .arr { background: rgba(255,255,255,.18); width: 26px; height: 26px; }
@media (max-width: 760px) { .quickpick__card { grid-template-columns: 1fr; } }

/* other courses on a course page: 4 across */
.course-grid--four .ccard { flex-basis: calc((100% - 84px) / 4); }
.course-grid--four .ccard h3 { font-size: 21px; }
.course-grid--four .ccard__body { padding: 22px 22px 20px; }
@media (max-width: 1080px) { .course-grid--four .ccard { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 760px) { .course-grid--four .ccard { flex-basis: 100%; } }

/* Google Form button icon */
.gf-ico { width: 22px; height: 22px; flex: none; }
.btn .gf-ico + span, .btn .gf-ico + span + span { margin-right: auto; }

/* Keep course choices beside the heading and the school link on its own row. */
@media (min-width: 761px) {
  .quickpick__card { grid-template-columns: max-content minmax(0, 1fr); gap: 18px 24px; align-items: center; }
  .quickpick__left { display: contents; }
  .quickpick__title { grid-column: 1; grid-row: 1; }
  .quickpick__pills { grid-column: 2; grid-row: 1; min-width: 0; }
  .quickpick__schoolbtn { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* Keep social and application actions beside the language switch. */
.nav__lang { margin-right: 0; flex-shrink: 0; }
.nav__tools { flex-shrink: 0; gap: 10px; }
.form-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 2px solid #e6def2; border-radius: 50%; background: #f4effb; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.form-icon .gf-ico { width: 25px; height: 25px; }
.form-icon:hover { box-shadow: var(--shadow-lift); }
.form-icon:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.form-icon[aria-disabled="true"] { cursor: not-allowed; }
@media (min-width: 1081px) {
  .nav { gap: 16px; }
  .nav__links { margin-left: 4px; }
  .nav__links a { white-space: nowrap; padding-inline: 10px; }
  .nav__tools .btn { white-space: nowrap; }
}
@media (max-width: 1080px) {
  .nav__tools { margin-left: auto; }
  .menu-btn { margin-left: 0; }
}

/* Label the course application action in both site languages. */
.form-icon { width: auto; min-height: 44px; height: auto; padding: 8px 14px; gap: 8px; border-radius: 999px; color: #6438a5; font-size: 14px; font-weight: 700; white-space: nowrap; }
.form-icon .gf-ico { flex: none; }
@media (min-width: 1081px) and (max-width: 1280px) {
  .nav { gap: 10px; }
  .nav__links { gap: 0; margin-left: 0; }
  .nav__links a { padding-inline: 7px; }
  .nav .btn { padding-inline: 12px; }
  .form-icon { padding-inline: 10px; font-size: 13px; }
}
@media (max-width: 480px) {
  .nav { gap: 8px; }
  .form-icon { padding: 8px 10px; gap: 5px; font-size: 12px; }
  .form-icon .gf-ico { width: 20px; height: 20px; }
}

/* Preserve the logo proportions when header actions take more space. */
.nav__logo { flex-shrink: 0; }
.nav__logo img { display: block; max-width: none; width: auto; object-fit: contain; }

/* ---------- comment V2 ---------- */
/* 6th course card: AI collaboration programme, navy like its section */
.ccard--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.ccard--navy .ccard__img { background: var(--navy); }
.ccard--navy .ccard__age, .ccard--navy .ccard__link { color: var(--lime); }
.ccard--navy p { color: #cfd5ea; }
/* text-only call-to-action band */
.cta-band--text { grid-template-columns: 1fr; text-align: center; }
.cta-band--text p { max-width: 46em; margin-inline: auto; }
/* feedback */
.fb-title { font-size: 22px; color: var(--green-dark); margin: 8px 0 18px; }
.quotes { display: grid; gap: 22px; margin-bottom: 44px; }
.quotes--3 { grid-template-columns: repeat(3, 1fr); }
.quotes--2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.quote { margin: 0; background: #fff; border-radius: var(--r-md); padding: 30px 28px 26px; box-shadow: var(--shadow); position: relative; }
.quote::before { content: "\201C"; position: absolute; top: 4px; left: 20px; font: 800 64px/1 Georgia, serif; color: var(--lime); }
.quote blockquote { margin: 18px 0 0; color: var(--ink); font-size: 15.5px; line-height: 1.8; }
.quote--kid { background: #fbfcf5; border: 2px solid var(--lime); box-shadow: none; }
@media (max-width: 1080px) { .quotes--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .quotes--3, .quotes--2 { grid-template-columns: 1fr; } }

/* ---------- hero: 3 videos in sequence with dots ---------- */
.vhero__video { opacity: 0; transition: opacity .6s ease; }
.vhero__video.is-active { opacity: 1; }
.vhero__ailabel { display: none; }
.vhero__dots {
  position: absolute; z-index: 3; left: 50%; bottom: 46px; transform: translateX(-50%);
  display: flex; gap: 10px; padding: 8px 12px; border-radius: 999px; background: rgba(11,22,63,.35);
}
.vhero__dots button {
  width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.6); transition: width .25s, background .25s;
}
.vhero__dots button:hover { background: #fff; }
.vhero__dots button[aria-pressed="true"] { width: 28px; border-radius: 999px; background: var(--lime); }
/* smaller green headline shape */
.vhero__blob { width: min(430px, calc(100% - 32px)); padding: 32px 38px 30px; }
.vhero__blob h1 { font-size: clamp(24px, 2.7vw, 36px); margin-bottom: 0; }
@media (max-width: 760px) {
  .vhero__dots { bottom: 76px; }
  .vhero__blob { width: auto; padding: 26px 24px 24px; }
}

/* hero sound button, next to the pause button */
.vhero__sound {
  position: absolute; z-index: 3; right: 68px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.9); color: var(--navy); cursor: pointer; display: grid; place-items: center;
}
.vhero__sound svg { width: 22px; height: 22px; }
.vhero__sound .cross { display: none; }
.vhero__sound[aria-pressed="false"] .wave { display: none; }
.vhero__sound[aria-pressed="false"] .cross { display: inline; }
@media (max-width: 760px) { .vhero__sound { bottom: 76px; } }

/* video 2: keep the top of the frame (child's head) visible */
.vhero__video--top { object-position: center 15%; }

/* home 'inside a session': photos in place of the 3 small videos */
.video-card--photo { aspect-ratio: 3 / 4; }
.video-card--photo img { width: 100%; height: 100%; object-fit: cover; }

/* mid-size screens: show "Apply for a course" as an icon so the header fits */
@media (min-width: 1081px) and (max-width: 1440px) {
  .nav__tools .form-icon > span[data-l] { display: none !important; }
  .nav__tools .form-icon { padding: 8px 10px; }
}

/* second photo row in "inside a session": same layout as the first row */
.story--second { margin-top: 40px; }

/* ---------- About: our story ---------- */
.ostory__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
/* image on the left, story on the right (desktop) */
.ostory__img { order: -1; }
@media (min-width: 901px) { .ostory__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.ostory__text { max-width: 40em; }
.ostory__text h2 { font-size: clamp(28px, 3.4vw, 40px); }
.ostory__text p { color: var(--ink-soft); line-height: 1.9; }
.ostory__lead { font-size: 20px; font-weight: 700; color: var(--green-dark) !important; }
.ostory__qs { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.ostory__qs li { background: #fff; border-left: 4px solid var(--lime); border-radius: 0 14px 14px 0; padding: 12px 18px; font-weight: 700; color: var(--navy); box-shadow: var(--shadow); }
.ostory__quote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 5px solid var(--green); font-size: 22px; font-weight: 800; line-height: 1.5; color: var(--navy); }
.ostory__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 18px; padding: 10px 20px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; }
.ostory__more summary::-webkit-details-marker { display: none; }
.ostory__more summary::after { content: "↓"; }
.ostory__more[open] summary::after { content: "↑"; }
.ostory__close, .ostory__more[open] .ostory__open { display: none; }
.ostory__more[open] .ostory__close { display: inline; }
.ostory__sign { font-weight: 800; color: var(--navy) !important; margin-top: 18px; }
.ostory__img { margin: 0; position: sticky; top: 100px; }
.ostory__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 46% 54% 44% 56% / 50% 46% 54% 50%; box-shadow: var(--shadow-lift); }
@media (max-width: 900px) {
  .ostory__grid { grid-template-columns: 1fr; gap: 32px; }
  .ostory__img { position: static; order: -1; }
  .ostory__img img { border-radius: var(--r-lg); }
}

/* Our story opens the About page */
.ostory__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.3; text-wrap: balance; }

/* "Apply for a course" under WhatsApp in the class details box */
.info-box .info-apply { display: flex; width: 100%; justify-content: center; margin-top: 10px; min-height: 52px; font-size: 16px; }

/* student work gallery: paged slider, dots on the left */
.gcarousel { display: grid; grid-template-columns: 28px 1fr; gap: 20px; align-items: center; }
.gdots { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.gdots button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px; background: #c9d1dc; cursor: pointer; transition: height .25s, background .25s; }
.gdots button:hover { background: var(--green); }
.gdots button[aria-pressed="true"] { height: 30px; background: var(--green); }
.gtrack { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gtrack::-webkit-scrollbar { display: none; }
.gslide { scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gslide figure { margin: 0; min-width: 0; aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden; align-self: start; }
.gslide button { all: unset; cursor: zoom-in; display: block; width: 100%; height: 100%; border-radius: var(--r-md); overflow: hidden; }
.gslide button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.gslide img { display: block; aspect-ratio: 3/4; object-fit: cover; width: 100%; height: 100%; transition: transform .4s; }
.gslide button:hover img { transform: scale(1.05); }
@media (max-width: 760px) {
  .gcarousel { grid-template-columns: 18px 1fr; gap: 10px; }
  .gslide { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* student work: 4 videos (same tile size as the photos) above the gallery */
.wvideos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 16px 48px; }
.wvideo { border-radius: var(--r-md); overflow: hidden; background: var(--navy); }
.wvideo video { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
/* gallery pages stack vertically; dots scroll up and down */
.gtrack { grid-auto-flow: row; grid-auto-columns: auto; grid-auto-rows: 100%; overflow-x: hidden; overflow-y: auto;
  scroll-snap-type: y mandatory; height: var(--gpage-h, 760px); }
.gslide { height: 100%; align-content: start; grid-auto-rows: max-content; }
@media (max-width: 760px) {
  .wvideos { grid-template-columns: 1fr 1fr; gap: 10px; margin-left: 28px; }
}

/* V09: course artwork from the updated eight-course booklet */
.course-hero__img {margin:0;}.course-hero__img img {aspect-ratio:16/9;}
.art-note {font-size:13px;color:var(--ink-soft);margin-top:12px;}
.course-examples {display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1000px;margin:auto;}
.course-examples figure {margin:0;}.course-examples button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;}
.course-examples img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:24px;}
.all-course-link {text-align:center;margin-top:32px;}#game-courses{scroll-margin-top:100px;}
@media(max-width:760px){.course-examples{grid-template-columns:1fr;}.course-body__side{position:static;}}
.course-card__img {aspect-ratio:16/9;}

/* Course booklet download, beneath the introduction */
.course-downloads {margin-top:24px;}
.course-download {gap:12px;padding:12px 24px;}
.download-icon {width:23px;height:23px;flex:none;}
.download-meta {display:block;margin-top:9px;font-size:13px;color:var(--ink-soft);}
@media(max-width:400px){.course-download{font-size:15px;padding:12px 20px;}}

/* Align all eight course choices evenly after removing the all-courses button. */
.quickpick__pills {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:stretch;}
.quickpick__pills a {justify-content:center;text-align:center;min-height:48px;padding:9px 12px;line-height:1.45;}
@media(max-width:1100px){.quickpick__pills{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){.quickpick__pills a{font-size:13px;padding:9px 8px;}}

/* V15: programme choice follows the picture-book column. */
.quickpick__pills .quickpick__schoolbtn {grid-column:1;grid-row:3;justify-self:stretch;font-size:14px;padding:9px 12px;}
.quickpick__pills .quickpick__schoolbtn:hover {background:var(--navy);color:#fff;}
.course-examples--single {grid-template-columns:1fr;max-width:640px;}
@media(max-width:1100px){.quickpick__pills .quickpick__schoolbtn{grid-column:1 / -1;grid-row:5;}}
.quickpick__pills .quickpick__schoolbtn {background:var(--navy);color:#fff;border-color:var(--navy);}

/* Align the class-detail contact and application buttons. */
.info-box > .btn--wa { display: flex; width: 100%; justify-content: center; padding-inline: 18px; }
.info-box > .info-apply { min-height: 56px; }

/* Canva-inspired course dock: all nine destinations remain visible. */
.course-dock { position:relative; z-index:3; margin-top:-28px; }
.course-dock__card { display:grid; grid-template-columns:145px minmax(0,1fr); align-items:stretch; gap:18px; padding:26px 22px; background:rgba(239,246,248,.98); border:1px solid #fff; border-radius:36px; box-shadow:var(--shadow-lift); }
.course-dock__intro { border-right:1px solid #cbd8df; padding:12px 15px 8px 0; align-self:stretch; }
.course-dock__accent { display:block; width:34px; height:4px; background:#65bb8e; border-radius:4px; margin-bottom:13px; }
.course-dock__intro h2 { color:var(--navy); font-size:20px; line-height:1.15; margin:0 0 14px; }
.course-dock__intro p { color:var(--navy); font-size:13px; line-height:1.35; margin:0; }
.course-dock__links { display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); align-items:start; gap:8px; min-width:0; }
.course-dock__link { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--navy); text-decoration:none; text-align:center; min-width:0; padding:0 1px 6px; border-radius:12px; }
.course-dock__icon { display:grid; place-items:center; width:76px; height:76px; border:6px solid #fff; border-radius:50%; background:#dce7ed; color:var(--navy); box-shadow:0 2px 4px rgba(11,22,63,.05); transition:transform .2s,box-shadow .2s; flex-shrink:0; }
.course-dock__icon--green { background:#a7db9b; }
.course-dock__icon--navy { background:var(--navy); color:#fff; }
.course-dock__icon svg { display:block; width:34px; height:34px; }
.course-dock__label { font-size:13px; font-weight:700; line-height:1.35; overflow-wrap:break-word; }
.course-dock__link:hover .course-dock__icon { transform:translateY(-4px); box-shadow:0 6px 12px rgba(11,22,63,.16); }
.course-dock__link:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
html[lang="zh-HK"] .course-dock__label { font-size:14px; }
.wvideos { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(min-width:1440px){ .course-dock > .wrap { width:min(100% - 40px,1440px); } .course-dock__card { padding:30px 26px;grid-template-columns:155px minmax(0,1fr);gap:22px;} .course-dock__label{font-size:14px;} .course-dock__icon{width:84px;height:84px;} }
@media(max-width:1150px){ .course-dock__card { grid-template-columns:1fr;gap:22px;} .course-dock__intro { border-right:0;border-bottom:1px solid #cbd8df;padding:0 0 18px; } .course-dock__intro h2 { margin-bottom:8px; } .course-dock__intro br{display:none;} .course-dock__links { grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 12px; } }
@media(max-width:760px){ .course-dock {margin-top:20px;} .course-dock__card{padding:24px 18px;border-radius:26px;} .course-dock__links{grid-template-columns:repeat(3,minmax(0,1fr));} .wvideos {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:380px){ .course-dock__links{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(prefers-reduced-motion:reduce){ .course-dock__icon {transition:none;} .course-dock__link:hover .course-dock__icon {transform:none;} }

/* V20: video on the left, organic copy panel on the right. */
.vhero--split { background:#f7f9f3; min-height:580px; padding:0; }
.vhero--split .vhero__media { width:60%; height:clamp(580px,43vw,680px); aspect-ratio:auto; }
.vhero--split .vhero__media::after { background:linear-gradient(0deg,rgba(11,22,63,.28),transparent 30%); }
.vhero--split .vhero__blob { left:auto;right:-3%;top:50%;bottom:auto;transform:translateY(-50%);width:47%;padding:66px clamp(52px,5.5vw,98px);margin:0;border-radius:48% 52% 48% 52% / 46% 52% 48% 54%;box-shadow:none; }
.vhero--split .vhero__blob::before { display:none; }
.vhero--split .vhero__kicker {font-size:15px;line-height:1.5;}
.vhero--split .vhero__blob h1 {font-size:clamp(32px,3.2vw,52px);line-height:1.24;margin:12px 0 20px;}
.vhero--split .vhero__lead {font-size:17px;line-height:1.7;margin:0;}
.vhero__actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.vhero__actions .btn {padding:12px 20px;gap:10px;}
.vhero__school {border:2px solid #fff;color:#fff;background:transparent;}
.vhero__school:hover {background:rgba(255,255,255,.12);}
.vhero--split .vhero__dots {bottom:20px;left:44%;}
.vhero--split .vhero__sound {bottom:20px;right:calc(7% + 68px);}
.vhero--split .vhero__toggle {bottom:20px;right:calc(7% + 16px);}
.hero-facts {background:#fff;}
.hero-facts__row {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding-block:24px;align-items:center;}
.hero-facts__row p {text-align:center;color:var(--navy);font-size:16px;line-height:1.5;margin:0;padding:0 20px;}
.hero-facts__row p+p {border-left:1px solid #d9e0e6;}
@media(min-width:901px) and (max-width:1200px){.vhero--split .vhero__blob{width:49%;padding:56px 48px;} .vhero--split .vhero__media{height:640px;} .vhero__actions{flex-direction:column;align-items:flex-start;} .vhero__actions .btn{font-size:15px;}}
@media(max-width:900px){
 .vhero--split {min-height:0;padding-bottom:16px;}
 .vhero--split .vhero__media {width:100%;height:auto;aspect-ratio:4/3;}
 .vhero--split .vhero__blob {position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:calc(100% - 28px);margin:-22px 14px 0;padding:38px clamp(28px,6vw,54px);border-radius:40px 54px 42px 48px / 46px 40px 50px 42px;}
 .vhero--split .vhero__blob h1 {font-size:clamp(30px,5vw,42px);}
 .vhero--split .vhero__dots {bottom:44px;left:45%;}
 .vhero--split .vhero__sound {bottom:44px;right:68px;}
 .vhero--split .vhero__toggle {bottom:44px;right:16px;}
 .hero-facts__row {padding-block:20px;gap:16px;grid-template-columns:1fr;}
 .hero-facts__row p+p {border-left:0;}
}
@media(max-width:480px){.vhero__actions{flex-direction:column;} .vhero__actions .btn{width:100%;} .vhero--split .vhero__lead{font-size:16px;} .vhero--split .vhero__dots{left:32%;} }

/* V21: full-height green hero panel with a curved video-facing edge. */
@media(min-width:901px){
 .vhero--split {min-height:0;background:var(--green);}
 .vhero--split .vhero__media {width:61%;height:clamp(520px,36vw,620px);}
 .vhero--split .vhero__blob {top:0;right:0;bottom:0;left:auto;transform:none;width:45%;height:100%;margin:0;padding:44px clamp(44px,4.5vw,82px) 44px clamp(62px,5.5vw,100px);border-radius:14% 0 0 14% / 50% 0 0 50%;display:flex;flex-direction:column;justify-content:center;background:var(--green);}
 .vhero--split .vhero__kicker {margin:0 0 12px;}
 .vhero--split .vhero__blob h1 {font-size:clamp(32px,3.1vw,50px);margin:0 0 22px;line-height:1.23;}
 .vhero--split .vhero__lead {font-size:16px;line-height:1.65;}
 .vhero--split .vhero__actions {margin-top:26px;}
 .vhero--split .vhero__dots {left:43%;}
 .vhero--split .vhero__sound {right:calc(11% + 68px);}
 .vhero--split .vhero__toggle {right:calc(11% + 16px);}
}
@media(min-width:901px) and (max-width:1200px){
 .vhero--split .vhero__media {height:600px;}
 .vhero--split .vhero__blob {width:47%;padding:36px 32px 36px 56px;}
 .vhero--split .vhero__blob h1 {font-size:34px;}
}
@media(max-width:900px){
 .vhero--split {background:var(--green);padding-bottom:0;}
 .vhero--split .vhero__blob {width:100%;margin:-18px 0 0;padding:36px 28px 40px;border-radius:32px 32px 0 0;}
}

/* V22: match the supplied reference, green at left with a curved right edge. */
@media(min-width:901px){
 .vhero--split {background:var(--green);min-height:0;}
 .vhero--split .vhero__media {width:61%;margin-left:39%;height:clamp(500px,35vw,600px);}
 .vhero--split .vhero__blob {left:0;right:auto;top:0;bottom:0;width:46%;height:100%;transform:none;border-radius:0;clip-path:url(#hero-green-curve);padding:40px clamp(82px,7.3vw,145px) 40px clamp(32px,4.7vw,76px);display:flex;flex-direction:column;justify-content:center;}
 .vhero--split .vhero__blob h1 {font-size:clamp(32px,3.05vw,49px);line-height:1.24;margin:0 0 18px;}
 .vhero--split .vhero__kicker {font-size:14px;margin-bottom:14px;}
 .vhero--split .vhero__lead {font-size:16px;line-height:1.65;}
 .vhero--split .vhero__actions {gap:10px;margin-top:24px;}
 .vhero--split .vhero__actions .btn {font-size:15px;padding:11px 17px;}
 .vhero--split .vhero__dots {left:50%;bottom:20px;}
 .vhero--split .vhero__sound {right:68px;bottom:20px;}
 .vhero--split .vhero__toggle {right:16px;bottom:20px;}
}
@media(min-width:901px) and (max-width:1200px){
 .vhero--split .vhero__media {height:600px;}
 .vhero--split .vhero__blob {width:49%;padding:34px 86px 34px 30px;}
 .vhero--split .vhero__blob h1 {font-size:34px;}
 .vhero--split .vhero__actions {flex-direction:column;align-items:flex-start;}
}
@media(max-width:900px){
 .vhero--split .vhero__media {margin-left:0;}
 .vhero--split .vhero__blob {clip-path:none;}
}

/* V23: matching video/photo columns, with the fifth clip in the mixed gallery. */
.wvideos {grid-template-columns:repeat(4,minmax(0,1fr));}
.gslide .gallery-video {border-radius:var(--r-md);overflow:hidden;background:var(--navy);align-self:start;}
.gslide .gallery-video video {display:block;width:100%;aspect-ratio:3/4;object-fit:cover;}
@media(max-width:760px){.wvideos{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Crop the gameplay clip toward the right to exclude the adult at the left edge. */
.gslide .gallery-video--focus-right video { transform: scale(1.3); transform-origin: right center; }

/* Match video stills to the same filled portrait cards as the existing photos.
   The zoom view continues to show the complete original photo. */
.gslide .gallery-photo--full img { object-fit: cover; object-position: center top; }

/* Stop at every gallery page, including shorter final pages. */
.gslide { scroll-snap-stop: always; }

/* Keep booklet downloads above the course card link overlay. */
.ccard__downloads{margin-top:16px;}
.ccard__download{position:relative;z-index:1;gap:8px;padding:10px 16px;font-size:14px;}
.ccard__download .download-icon{width:20px;height:20px;flex-shrink:0;}