/* ---------- tokens ---------- */
:root{
  --wpc-navy:#205386; --wpc-navy-deep:#1A4570; --wpc-navy-dark:#14304F;
  --wpc-teal:#13819C; --wpc-teal-br:#1F93A2;
  --wpc-off:#F4F7F9; --wpc-tint:#EAF2F7; --wpc-border:#DDE5EB;
  --wpc-muted:#383838; --wpc-text:#383838;
  --wpc-grad:linear-gradient(103deg,#1A4570 0%,#1A6B93 46%,#13819C 100%);
  --wpc-ease:cubic-bezier(.2,.7,.3,1);
  --wpc-sh-sm:0 1px 2px rgba(14,43,69,.06), 0 2px 6px -2px rgba(14,43,69,.08);
  --wpc-sh-md:0 4px 10px -4px rgba(14,43,69,.10), 0 10px 24px -14px rgba(14,43,69,.16);
  --wpc-sh-lg:0 12px 28px -12px rgba(14,43,69,.22);
}

/* ================= MOTION =================
   One-shot reveals only. 16–24px of travel, 400–600ms, ease-out.
   Long slides, rotation and bounce all read as free-template motion. */
.wpc-reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .55s var(--wpc-ease),transform .55s var(--wpc-ease);
}
.wpc-reveal.is-in{opacity:1;transform:none}

.wpc-stagger > .wpc-rv-item{
  opacity:0;transform:translateY(16px);
  transition:opacity .5s var(--wpc-ease),transform .5s var(--wpc-ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
.wpc-stagger.is-in > .wpc-rv-item{opacity:1;transform:none}

/* kill the template's animate.css entrances (rotateInUpLeft especially) */
.wpc-course-page .elementor-invisible{visibility:visible !important}
.wpc-course-page [data-settings*="animation"]{animation:none !important}

/* scroll progress — the one place a scrubbed timeline belongs */
.wpc-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:var(--wpc-grad);z-index:99999;pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .wpc-progress{
    animation:wpcGrow linear both;animation-timeline:scroll(root block);
  }
  @keyframes wpcGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* sticky section jump nav */
.wpc-jump{
  position:sticky;top:0;z-index:60;display:flex;gap:8px;
  overflow-x:auto;overscroll-behavior-x:contain;
  padding:11px 20px;scrollbar-width:none;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid #DDE5EB;
}
.wpc-jump::-webkit-scrollbar{display:none}
.wpc-jump a{
  flex:0 0 auto;display:inline-flex;align-items:center;
  min-height:40px;padding:8px 16px;border-radius:999px;
  background:#F4F7F9;color:#205386;border:1px solid #DDE5EB;
  font-family:'Open Sans',sans-serif;font-size:13.5px;font-weight:600;
  text-decoration:none;white-space:nowrap;
  transition:background-color .18s var(--wpc-ease),color .18s var(--wpc-ease),
             border-color .18s var(--wpc-ease);
}
@media (hover:hover){ .wpc-jump a:hover{background:#EAF2F7} }
.wpc-jump a.is-active{background:#205386;color:#fff;border-color:#205386}

html{scroll-padding-top:74px}

/* WCAG 2.5.5 — phone/email links were 24-29px tall */
a[href^="tel:"],a[href^="mailto:"],
.wpc-foot-links a,.wpc-formcard-help a,.wpc-spec dd a{
  display:inline-flex;align-items:center;min-height:44px;
}
.wpc-hero-meta a,.wpc-hero-meta strong{min-height:44px;display:inline-flex;align-items:center}

/* the section links now live in the page header (.wpc-head-nav), so the
   standalone jump bar is a duplicate at every width */
.wpc-jump{display:none !important}

/* press + lift feedback — hover only where hover actually exists */
.wpc-btn:active,.wpc-jump a:active{transform:scale(.975)}
@media (hover:hover){
  .wpc-learncard:hover > .elementor-widget-wrap,
  .wpc-highlights > div:hover{transform:translateY(-3px)}
}
.wpc-learncard:active > .elementor-widget-wrap{transform:scale(.995)}

/* defer off-screen rendering — cheap win on mid-range Android */
.wpc-course-page #journey,.wpc-course-page #info,
.wpc-course-page #faq,.wpc-course-page #page-footer{
  content-visibility:auto;contain-intrinsic-size:auto 900px;
}

@media (prefers-reduced-motion:reduce){
  .wpc-reveal,.wpc-stagger > .wpc-rv-item{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .wpc-progress{display:none}
  html{scroll-behavior:auto}
  .wpc-learncard:hover > .elementor-widget-wrap,
  .wpc-highlights > div:hover{transform:none}
}

/* ---------- global craft details ---------- */
/* never let the page scroll sideways on a phone */
html,body{max-width:100%;overflow-x:hidden}
.elementor-section .elementor-container{max-width:100%}
img{max-width:100%;height:auto}
::selection{background:#13819C;color:#fff}
::-moz-selection{background:#13819C;color:#fff}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,.wpc-btn:focus-visible{
  outline:2px solid #1F93A2;outline-offset:3px;border-radius:6px
}
.wpc-narrow h2,.elementor h2,.elementor h1{text-wrap:balance}
.elementor p{text-wrap:pretty}

/* ---------- buttons: gradient component TYPE 1 of 2 ---------- */
.wpc-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Noto Sans HK',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.055em;text-transform:uppercase;
  padding:16px 34px;border-radius:999px;text-decoration:none;
  transition:transform .18s var(--wpc-ease),box-shadow .18s var(--wpc-ease),
             filter .18s var(--wpc-ease),background-color .18s var(--wpc-ease),
             color .18s var(--wpc-ease);
  will-change:transform;
}
a.wpc-btn-grad,.wpc-btn-grad{
  background-image:var(--wpc-grad);background-color:#1A4570;
  color:#fff !important;
  box-shadow:0 8px 20px -10px rgba(19,129,156,.55);
}
a.wpc-btn-grad:hover,.wpc-btn-grad:hover,
a.wpc-btn-grad:focus,.wpc-btn-grad:focus{
  color:#fff !important;filter:saturate(1.06) brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 12px 26px -10px rgba(19,129,156,.6);
}
/* Elementor button widget variant of the same pill */
.elementor-widget-button .elementor-button.wpc-cta{
  background-image:var(--wpc-grad);background-color:#1A4570;
  color:#fff;border:0;
  box-shadow:0 8px 20px -10px rgba(19,129,156,.55);
  transition:transform .18s var(--wpc-ease),box-shadow .18s var(--wpc-ease),
             filter .18s var(--wpc-ease);
}
.elementor-widget-button .elementor-button.wpc-cta:hover{
  color:#fff;filter:saturate(1.06) brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 12px 26px -10px rgba(19,129,156,.6);
}
.wpc-btn-ghost-light{
  background:transparent;color:#DCE8F0;
  box-shadow:inset 0 0 0 1.5px rgba(220,232,240,.38);
}
.wpc-btn-ghost-light:hover{
  color:#14304F;background:#DCE8F0;box-shadow:inset 0 0 0 1.5px #DCE8F0;
  transform:translateY(-1px);
}
.wpc-btn-light{
  background:#fff;color:#14304F;box-shadow:0 10px 26px -12px rgba(0,0,0,.42);
}
.wpc-btn-light:hover{
  color:#14304F;transform:translateY(-1px);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
}

/* ---------- 01 hero ---------- */
.wpc-hero{position:relative;overflow:hidden}
/* noise overlay — kills sRGB banding, a detail templates never add */
.wpc-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* faint girih-derived geometric motif — culturally specific, used once, 4% */
.wpc-hero::before{
  content:"";position:absolute;top:-70px;right:-120px;width:460px;height:460px;
  pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M50 2 61 28 89 28 67 46 76 74 50 58 24 74 33 46 11 28 39 28Z'/%3E%3Cpath d='M50 14 57 32 77 32 61 44 67 63 50 52 33 63 39 44 23 32 43 32Z'/%3E%3Ccircle cx='50' cy='46' r='44'/%3E%3Ccircle cx='50' cy='46' r='31'/%3E%3C/g%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;
}
.wpc-hero > .elementor-container{position:relative;z-index:2}
.wpc-hero-img img{
  box-shadow:0 26px 60px -26px rgba(0,0,0,.6);
  width:100%;
}
.wpc-hero .elementor-column{align-self:center}
/* hero bullet points — custom tick markers, not the default icon-list */
.wpc-hero-points{
  list-style:none;margin:0 0 4px;padding:0;
}
.wpc-hero-points li{
  position:relative;padding:0 0 13px 34px;
  font-family:'Open Sans',sans-serif;font-size:15.5px;line-height:1.55;
  color:#DCE8F0;
}
.wpc-hero-points li:last-child{padding-bottom:0}
.wpc-hero-points b{color:#fff;font-weight:600}
.wpc-tick{
  position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  background:rgba(31,147,162,.16);
  box-shadow:inset 0 0 0 1.5px rgba(31,147,162,.55);
}
.wpc-tick::after{
  content:"";position:absolute;left:6.5px;top:6px;width:7px;height:4px;
  border-left:1.8px solid #4FC3D4;border-bottom:1.8px solid #4FC3D4;
  transform:rotate(-45deg);
}
.wpc-hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.wpc-hero-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:22px;color:#9FC4D8;font-size:14.5px;
  font-variant-numeric:tabular-nums;
}
.wpc-hero-meta strong{color:#fff;font-weight:600;letter-spacing:.01em}
.wpc-dot{width:4px;height:4px;border-radius:50%;background:#4E7C99;display:inline-block}

/* ---------- 02 / narrow editorial sections ---------- */
/* Narrow measure: constrain the CONTAINER, not each widget, so the
   section reads as a deliberate editorial column rather than a half-empty grid. */
.wpc-narrow > .elementor-container{max-width:720px;margin-inline:auto}
.wpc-narrow .elementor-widget-text-editor{max-width:68ch}
/* medium-measure sections (curriculum, faq, fee, form) */
.wpc-mid > .elementor-container{max-width:880px;margin-inline:auto}
.wpc-wide > .elementor-container{max-width:1020px;margin-inline:auto}
.wpc-tagline{
  font-family:'Noto Sans HK',sans-serif;font-weight:700;font-size:18px;
  color:#13819C;letter-spacing:-.01em;margin:0;
}

/* ---------- 03 learn cards ---------- */
.wpc-learncard > .elementor-widget-wrap{
  background:#fff;border-radius:12px;padding:30px 30px 32px !important;
  box-shadow:var(--wpc-sh-sm);border:1px solid #E6EDF2;
  transition:transform .2s var(--wpc-ease),box-shadow .2s var(--wpc-ease);
  align-content:flex-start;
}
.wpc-learncard:hover > .elementor-widget-wrap{
  transform:translateY(-2px);box-shadow:var(--wpc-sh-md);
}
.wpc-learncard{display:flex}
.wpc-learncard > .elementor-widget-wrap{width:100%;display:flex;flex-direction:column}
.wpc-learncard .elementor-widget-image{
  min-height:118px;display:flex;align-items:flex-end;margin-bottom:14px !important;
}
.wpc-card-ill img{max-width:104px;height:auto}
.wpc-learncard .elementor-widget-text-editor{margin-top:auto !important}

/* ---------- 04 curriculum accordion ---------- */
.wpc-outcome{
  margin:0;padding:13px 16px;background:#F4F7F9;border-left:3px solid #13819C;
  border-radius:0 8px 8px 0;font-size:14.5px;color:#383838;line-height:1.6;
}
.wpc-outcome span{
  display:block;font-family:'Noto Sans HK',sans-serif;font-weight:700;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:#13819C;margin-bottom:4px;
}

/* ---------- 05 dark band + steps ---------- */
.wpc-dark{position:relative;overflow:hidden}
.wpc-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n2)' opacity='.6'/%3E%3C/svg%3E");
}
.wpc-dark > .elementor-container{position:relative;z-index:2}
.wpc-steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid rgba(159,196,216,.22);
}
.wpc-step{
  padding:24px 22px 4px;border-right:1px solid rgba(159,196,216,.16);
}
.wpc-step:last-child{border-right:0}
.wpc-step i{
  display:block;font-style:normal;font-family:'Noto Sans HK',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.14em;color:#1F93A2;
  font-variant-numeric:tabular-nums;margin-bottom:9px;
}
.wpc-step b{
  display:block;font-family:'Noto Sans HK',sans-serif;font-weight:700;
  font-size:19px;color:#fff;letter-spacing:-.02em;margin-bottom:6px;
}
.wpc-step span{display:block;font-size:14px;color:#9FC4D8;line-height:1.6}

/* ---------- 06 note ---------- */
.wpc-note{
  margin:0;font-size:15px;color:#383838;line-height:1.65;
  padding:14px 18px;background:#fff;border-radius:10px;
  box-shadow:var(--wpc-sh-sm);
}
.wpc-note strong{color:#205386}

/* ---------- 07 who ---------- */
.wpc-who{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 34px}
.wpc-who > div{padding-top:16px;border-top:2px solid #DDE5EB}
.wpc-who b{
  display:block;font-family:'Noto Sans HK',sans-serif;font-weight:700;
  font-size:17px;color:#205386;letter-spacing:-.015em;margin-bottom:7px;
}
.wpc-who span{display:block;font-size:14.5px;color:#383838;line-height:1.65}

/* ---------- 08 two-column list ---------- */
.wpc-list-cols-2 .elementor-icon-list-items{
  column-count:2;column-gap:36px;
}
.wpc-list-cols-2 .elementor-icon-list-item{
  break-inside:avoid;-webkit-column-break-inside:avoid;
}

/* ---------- 09 career ---------- */
/* Two tidy columns instead of ragged wrapping pills. Each role gets a
   leading teal dot so the list reads as a deliberate set, not loose chips. */
.wpc-roles{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;margin:0;
}
.wpc-roles span{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:600;color:#205386;
  background:#EAF2F7;border:1px solid #DCE8F0;
  padding:11px 15px;border-radius:10px;letter-spacing:.005em;
  line-height:1.3;
}
.wpc-roles span i{
  flex:none;width:7px;height:7px;border-radius:50%;
  background:#1F93A2;display:block;
}
.wpc-honest{
  margin:0;font-size:14.5px;line-height:1.7;color:#383838;
  padding-left:16px;border-left:2px solid #DDE5EB;
}

/* ---------- 10 highlights ---------- */
.wpc-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 32px}
.wpc-highlights > div{
  background:#fff;padding:24px 24px 26px;border-radius:12px;
  box-shadow:var(--wpc-sh-sm);
  transition:transform .2s var(--wpc-ease),box-shadow .2s var(--wpc-ease);
}
.wpc-highlights > div:hover{transform:translateY(-2px);box-shadow:var(--wpc-sh-md)}
.wpc-highlights b{
  display:block;font-family:'Noto Sans HK',sans-serif;font-weight:700;
  font-size:16.5px;color:#205386;letter-spacing:-.015em;margin-bottom:8px;
}
.wpc-highlights span{display:block;font-size:14.5px;color:#383838;line-height:1.65}

/* ---------- 12 fee ---------- */
.wpc-fee{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.wpc-fee-card{
  background:#fff;border-radius:14px;padding:30px 28px 28px;
  box-shadow:var(--wpc-sh-sm);border:1px solid #E6EDF2;
}
.wpc-fee-card--main{
  border:1px solid #BFD8E4;box-shadow:var(--wpc-sh-md);
  position:relative;
}
.wpc-fee-label{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#13819C;margin-bottom:12px;
}
.wpc-fee-amt{
  font-family:'Noto Sans HK',sans-serif;font-weight:900;font-size:46px;
  line-height:1;color:#205386;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.wpc-fee-amt em{
  font-style:normal;font-size:17px;font-weight:700;color:#383838;
  letter-spacing:.02em;margin-right:8px;vertical-align:.32em;
}
.wpc-fee-amt small{
  font-size:16px;font-weight:600;color:#383838;letter-spacing:0;
  margin-left:3px;
}
.wpc-fee-sub{display:block;margin-top:10px;font-size:14px;color:#383838}
.wpc-fee-incl{
  margin-top:26px;background:#fff;border-radius:14px;padding:26px 28px;
  border:1px solid #E6EDF2;
}
.wpc-fee-incl b{
  display:block;font-family:'Noto Sans HK',sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#13819C;margin-bottom:14px;
}
.wpc-fee-incl ul{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 34px;align-items:start;
}
.wpc-fee-incl li{
  position:relative;padding-left:24px;font-size:14.5px;color:#383838;
  line-height:1.55;
}
.wpc-fee-incl li::before{
  content:"";position:absolute;left:0;top:7px;width:13px;height:8px;
  border-left:2px solid #13819C;border-bottom:2px solid #13819C;
  transform:rotate(-45deg);
}
.wpc-fee-cta{text-align:center;margin-top:32px}
.wpc-fee-cta p{
  margin:14px 0 0;font-size:14.5px;color:#383838;
}

/* ---------- 13 journey ---------- */
.wpc-journey{margin:0;padding:0;list-style:none;counter-reset:j}
.wpc-journey li{
  counter-increment:j;position:relative;padding:0 0 30px 72px;
}
.wpc-journey li::before{
  content:counter(j,decimal-leading-zero);
  position:absolute;left:0;top:-4px;
  font-family:'Noto Sans HK',sans-serif;font-weight:800;font-size:17px;
  color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--wpc-grad);
  box-shadow:0 6px 16px -8px rgba(32,83,134,.5);
}
.wpc-journey li::after{
  content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;
  border-radius:2px;background:#DDE5EB;
}
.wpc-journey li:last-child{padding-bottom:0}
.wpc-journey li:last-child::after{display:none}
.wpc-journey b{
  display:block;font-family:'Noto Sans HK',sans-serif;font-weight:700;
  font-size:19px;color:#205386;letter-spacing:-.018em;margin-bottom:6px;
  padding-top:6px;
}
.wpc-journey span{display:block;font-size:15px;color:#383838;line-height:1.65}

/* ---------- 14 spec list ---------- */
.wpc-spec{margin:0;display:grid;gap:0}
.wpc-spec > div{
  display:grid;grid-template-columns:230px 1fr;gap:16px;
  padding:13px 0;border-bottom:1px solid #DDE5EB;
}
.wpc-spec > div:last-child{border-bottom:0}
.wpc-spec dt{
  margin:0;font-size:13px;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;color:#383838;padding-top:2px;
}
.wpc-spec dd{
  margin:0;font-size:16px;color:#383838;font-weight:500;
  font-variant-numeric:tabular-nums;
}
.wpc-spec dd a{color:#13819C;text-decoration:none;font-weight:600}
.wpc-spec dd a:hover{text-decoration:underline}

/* ---------- 16 form: one card built from three stacked widgets ----------
   The section holds: html[card head] · metform · html[card tail].
   MetForm's widget has NO .elementor-widget-container, so the middle slice is
   styled on the widget element itself. All three carry the same border/bg so
   they read as a single card.                                              */
.wpc-formwrap > .elementor-container > .elementor-column{max-width:100%}
/* only the three card slices are flush — fields keep their own spacing */
.wpc-formwrap > .elementor-container > .elementor-column
  > .elementor-widget-wrap > .elementor-widget{margin:0 !important}

.wpc-formwrap .elementor-widget-html > .elementor-widget-container,
.wpc-formwrap .elementor-widget-metform{
  background:#fff;
  border-left:1px solid #E3EBF1;
  border-right:1px solid #E3EBF1;
}
/* head slice */
.wpc-formwrap .elementor-widget-html:first-child > .elementor-widget-container{
  border-top:1px solid #E3EBF1;border-radius:18px 18px 0 0;
}
/* tail slice */
.wpc-formwrap .elementor-widget-html:last-child > .elementor-widget-container{
  border-bottom:1px solid #E3EBF1;border-radius:0 0 18px 18px;
}
/* one shadow for the whole stack, cast from the column */
.wpc-formwrap .elementor-widget-wrap{
  border-radius:18px;box-shadow:var(--wpc-sh-md);
}

.wpc-formcard{padding:36px 40px 2px}
.wpc-formwrap .elementor-widget-metform{padding:20px 40px 6px}
.wpc-formcard--tail{padding:2px 40px 26px}
.wpc-formcard-head{text-align:center;margin-bottom:22px}
.wpc-formcard-eyebrow{
  display:inline-block;font-family:'Open Sans',sans-serif;font-size:12px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#1F93A2;margin-bottom:12px;
}
.wpc-formcard-head h2{
  font-family:'Noto Sans HK',sans-serif;font-weight:800;font-size:30px;
  line-height:1.2;letter-spacing:-.022em;color:#205386;margin:0 0 12px;
  text-wrap:balance;
}
.wpc-formcard-head p{
  margin:0 auto;max-width:56ch;font-size:15.5px;line-height:1.7;color:#383838;
}
.wpc-formcard-note{
  display:flex;gap:14px;align-items:flex-start;
  background:#F1F7FA;border:1px solid #DCE8F0;border-radius:12px;
  padding:16px 18px;margin-bottom:30px;
  font-size:14.5px;line-height:1.65;color:#383838;
}
.wpc-note-ic{
  flex:none;width:34px;height:34px;border-radius:9px;
  background:#205386;color:#fff;display:flex;align-items:center;
  justify-content:center;
}
.wpc-note-ic svg{width:19px;height:19px}

/* step indicator, injected by wpc-steps.js.
   It is inserted as a sibling of the panels inside Elementor's widget-wrap,
   which is a flex column — force it to span the full row either way. */
.wpc-stepbar{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:0;margin:4px 0 30px;counter-reset:st;
  width:100%;flex:0 0 100%;grid-column:1 / -1;
}
.wpc-steps-wrap{width:100%;flex:0 0 100%}
.wpc-stepbar .wpc-st{
  position:relative;text-align:center;padding-top:44px;
  font-family:'Open Sans',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.045em;color:#8FA3B1;line-height:1.35;
}
.wpc-stepbar .wpc-st::before{           /* the numbered circle */
  counter-increment:st;content:counter(st);
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Noto Sans HK',sans-serif;font-weight:800;font-size:13px;
  color:#8FA3B1;background:#EEF3F7;box-shadow:inset 0 0 0 1.5px #DDE5EB;
  font-variant-numeric:tabular-nums;z-index:2;
  transition:all .22s var(--wpc-ease);
}
.wpc-stepbar .wpc-st::after{            /* connector line to the next step */
  content:"";position:absolute;top:15.5px;left:50%;width:100%;height:2px;
  background:#E3EBF1;z-index:1;
}
.wpc-stepbar .wpc-st:last-child::after{display:none}
.wpc-stepbar .wpc-st.is-active{color:#205386}
.wpc-stepbar .wpc-st.is-active::before{
  color:#fff;background:#205386;box-shadow:0 0 0 4px rgba(32,83,134,.13);
}
.wpc-stepbar .wpc-st.is-done{color:#1F93A2}
.wpc-stepbar .wpc-st.is-done::before{
  content:"";color:transparent;background:#1F93A2;box-shadow:none;
}
.wpc-stepbar .wpc-st.is-done > em{      /* the tick inside a completed circle */
  position:absolute;top:11px;left:50%;margin-left:-5px;
  width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg);z-index:3;
}
.wpc-stepbar .wpc-st.is-done::after{background:#1F93A2}

/* step panels */
.wpc-steps-wrap .wpc-panel{display:none}
.wpc-steps-wrap .wpc-panel.is-on{display:block;animation:wpcIn .26s var(--wpc-ease)}
@keyframes wpcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* step navigation */
.wpc-nav{
  display:flex;gap:12px;align-items:center;justify-content:flex-end;
  margin-top:28px;padding-top:22px;border-top:1px solid #E9EFF4;
}
.wpc-nav .wpc-sp{flex:1}
.wpc-nav .wpc-back{margin-right:auto}
.wpc-nav button{
  font-family:'Noto Sans HK',sans-serif;font-weight:700;font-size:14.5px;
  letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  border-radius:999px;padding:15px 30px;border:0;
  transition:transform .18s var(--wpc-ease),box-shadow .18s var(--wpc-ease),
             filter .18s var(--wpc-ease),background-color .18s var(--wpc-ease);
}
.wpc-nav .wpc-back{
  background:#fff;color:#205386;box-shadow:inset 0 0 0 1.5px #CFDDE7;
}
.wpc-nav .wpc-back:hover{background:#F1F7FA;transform:translateY(-1px)}
.wpc-nav .wpc-next{
  background-image:var(--wpc-grad);background-color:#1A4570;color:#fff;
  box-shadow:0 8px 20px -10px rgba(19,129,156,.55);
}
.wpc-nav .wpc-next:hover{
  filter:saturate(1.06) brightness(1.05);transform:translateY(-1px);
  box-shadow:0 12px 26px -10px rgba(19,129,156,.6);
}
.wpc-steperr{
  margin:14px 0 0;font-size:14px;color:#B4322E;display:none;
}
.wpc-steperr.is-on{display:block}

/* help strip under the form */
.wpc-formcard-help{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:26px;padding-top:22px;
  border-top:1px solid #E9EFF4;font-size:14px;color:#383838;line-height:1.6;
}
.wpc-formcard-help b{color:#205386}
.wpc-help-r{display:flex;gap:16px;flex-wrap:wrap;
            font-variant-numeric:tabular-nums}
.wpc-formcard-help a{color:#13819C;text-decoration:none;font-weight:600}
.wpc-formcard-help a:hover{text-decoration:underline}

/* header logo — the school seal is circular, cap its height */
.wpc-course-page .ekit-template-content-header img,
.wpc-course-page header img.attachment-full,
.wpc-course-page .elementskit-navbar-nav-default .elementskit-nav-logo img{
  max-height:56px;width:auto;
}

/* ---------- 17 page footer ---------- */
.wpc-footband{position:relative;overflow:hidden}
.wpc-footband::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='nf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23nf)' opacity='.6'/%3E%3C/svg%3E");
}
.wpc-footband > .elementor-container{position:relative;z-index:2}
.wpc-foot{text-align:center}
.wpc-foot-logo{
  width:72px;height:72px;object-fit:contain;margin:0 auto 14px;display:block;
}
.wpc-foot-name{
  font-family:'Noto Sans HK',sans-serif;font-weight:700;font-size:17px;
  color:#fff;letter-spacing:-.012em;margin-bottom:8px;
}
.wpc-foot-addr{
  font-size:14px;line-height:1.75;color:#B9D2E0;margin-bottom:14px;
}
.wpc-foot-links{
  display:flex;gap:12px;align-items:center;justify-content:center;
  flex-wrap:wrap;font-size:14px;font-variant-numeric:tabular-nums;
}
.wpc-foot-links a{color:#fff;text-decoration:none;font-weight:600}
.wpc-foot-links a:hover{text-decoration:underline}
.wpc-foot-links .wpc-dot{background:rgba(255,255,255,.4)}
.wpc-foot-rule{
  width:56px;height:3px;border-radius:2px;margin:24px auto 16px;
  background:var(--wpc-grad);
}
.wpc-foot-credit{
  font-size:13px;letter-spacing:.06em;color:#FFFFFF;font-weight:600;
}

/* hide the site-wide footer ON THIS PAGE ONLY (page 236) */
.wpc-course-page > footer,
.wpc-course-page .site-footer,
.wpc-course-page footer.site-footer,
.wpc-course-page .ekit-template-content-footer,
.wpc-course-page .elementskit-footer,
.wpc-course-page .ekit-template-content-markup--footer,
.wpc-course-page [data-elementor-type="footer"]{display:none !important}

/* --- inside a step panel: rhythm between the group heading and its fields */
.wpc-panel > .elementor-widget-heading{
  margin-bottom:2px !important;
}
.wpc-panel > .elementor-widget-heading .elementor-heading-title{
  padding-bottom:10px;border-bottom:1px solid #EDF2F6;
}
/* the section dividers inside the form are redundant once steps exist */
.wpc-panel > .elementor-widget-divider{display:none}
/* give every field room to breathe */
.wpc-formwrap .mf-input-wrapper{margin-bottom:0}
.wpc-formwrap .mf-input-label{
  display:block;margin-bottom:8px !important;line-height:1.35;
}
/* radio rows sit lower so they baseline with text inputs beside them */
.wpc-formwrap .elementor-widget-mf-radio .mf-input-wrapper{padding-top:2px}
.wpc-formwrap .mf-input-radio-wrapper,
.wpc-formwrap .mf-input-checkbox-wrapper{padding-top:6px}
/* the declaration checkbox and submit button span the row */
.wpc-panel > .elementor-widget-mf-checkbox,
.wpc-panel > .elementor-widget-mf-button{grid-column:1 / -1}
.wpc-panel > .elementor-widget-mf-button{margin-top:6px !important}

/* a field that failed the step check */
.wpc-formwrap .mf-input-wrapper.wpc-invalid .mf-input,
.wpc-formwrap .mf-input-wrapper.wpc-invalid input,
.wpc-formwrap .mf-input-wrapper.wpc-invalid select{
  border-color:#D98A88 !important;
  box-shadow:0 0 0 3px rgba(217,138,136,.16) !important;
}
.wpc-formwrap .mf-input-wrapper.wpc-invalid .mf-input-label{color:#B4322E !important}

/* while the wizard is active, panels the user is not on must not take space */
.wpc-stepped .wpc-panel:not(.is-on){display:none !important}

/* ---------- 16 form fields ---------- */
.wpc-formwrap .mf-input,
.wpc-formwrap input[type=text],.wpc-formwrap input[type=email],
.wpc-formwrap input[type=tel],.wpc-formwrap input[type=date],
.wpc-formwrap select,.wpc-formwrap textarea{
  border:1px solid #DDE5EB !important;border-radius:9px !important;
  padding:13px 15px !important;font-size:15px !important;color:#383838 !important;
  background:#fff !important;
  transition:border-color .16s var(--wpc-ease),box-shadow .16s var(--wpc-ease);
}
.wpc-formwrap .mf-input:focus,
.wpc-formwrap input:focus,.wpc-formwrap select:focus,.wpc-formwrap textarea:focus{
  border-color:#1F93A2 !important;
  box-shadow:0 0 0 3px rgba(31,147,162,.14) !important;outline:none !important;
}
.wpc-formwrap label,.wpc-formwrap .mf-input-label{
  font-family:'Open Sans',sans-serif !important;font-size:14px !important;
  font-weight:600 !important;color:#383838 !important;margin-bottom:7px !important;
}
/* submit button — brand pill, overrides MetForm default blue */
.wpc-formwrap .mf-btn,
.wpc-formwrap button[type=submit],
.wpc-formwrap .metform-btn,
.wpc-formwrap .mf-btn--submit{
  background:var(--wpc-grad) !important;background-color:#1A4570 !important;
  color:#fff !important;border:0 !important;
  border-radius:999px !important;padding:17px 34px !important;
  font-family:'Noto Sans HK',sans-serif !important;font-weight:700 !important;
  font-size:15px !important;letter-spacing:.06em !important;
  text-transform:uppercase !important;
  box-shadow:0 8px 20px -10px rgba(19,129,156,.55) !important;
  transition:transform .18s var(--wpc-ease),box-shadow .18s var(--wpc-ease),
             filter .18s var(--wpc-ease) !important;
}
.wpc-formwrap .mf-btn:hover,
.wpc-formwrap button[type=submit]:hover,
.wpc-formwrap .metform-btn:hover{
  filter:saturate(1.06) brightness(1.05) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 26px -10px rgba(19,129,156,.6) !important;
}
/* required asterisk in brand teal, not red */
.wpc-formwrap .mf-input-required-indicator,
.wpc-formwrap .mf-input-label span{color:#13819C !important}
/* radio + checkbox spacing */
.wpc-formwrap .mf-input-wrapper .mf-radio-option,
.wpc-formwrap .mf-input-wrapper .mf-checkbox-option{margin-right:22px}
.wpc-form-intro{margin:0}
.wpc-form-after{margin:0}

/* ---------- 17 final CTA (gradient component TYPE 2 of 2) ---------- */
.wpc-cta-band{position:relative;overflow:hidden}
.wpc-cta-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n3)' opacity='.6'/%3E%3C/svg%3E");
}
.wpc-cta-band > .elementor-container{position:relative;z-index:2}
.wpc-final{text-align:center}
.wpc-final-facts{
  display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin-bottom:30px;
}
.wpc-final-facts > div{padding:0 30px;border-right:1px solid rgba(255,255,255,.22)}
.wpc-final-facts > div:last-child{border-right:0}
.wpc-final-facts b{
  display:block;font-family:'Noto Sans HK',sans-serif;font-weight:800;
  font-size:23px;color:#fff;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.wpc-final-facts span{
  display:block;font-size:12.5px;color:#C5DEE8;margin-top:4px;
  letter-spacing:.055em;text-transform:uppercase;font-weight:600;
}
.wpc-final-meta{
  margin-top:22px;display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;font-size:15px;color:#D6E7EF;
  font-variant-numeric:tabular-nums;
}
.wpc-final-meta a{color:#fff;font-weight:600;text-decoration:none}
.wpc-final-meta a:hover{text-decoration:underline}
.wpc-final-meta .wpc-dot{background:rgba(255,255,255,.45)}
.wpc-final-tag{
  margin:20px 0 0;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#9FC9D8;font-weight:600;
}

/* ---------- sticky mobile bar: WhatsApp + Apply ----------
   The host section must not create a stacking/scroll context of its own, or
   the fixed bar ends up parked mid-page instead of pinned to the viewport. */
.wpc-sticky-host{
  position:static !important;padding:0 !important;margin:0 !important;
  min-height:0 !important;
}
.wpc-sticky-host > .elementor-container{min-height:0 !important}
.wpc-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;display:none;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);
  box-shadow:0 -2px 16px -6px rgba(14,43,69,.28);
  backdrop-filter:saturate(1.2) blur(8px);
}
.wpc-sticky-in{display:flex;gap:9px;max-width:560px;margin:0 auto}
.wpc-sticky a{
  display:flex;align-items:center;justify-content:center;gap:7px;
  height:50px;border-radius:999px;text-decoration:none;
  font-family:'Noto Sans HK',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;
  transition:transform .16s var(--wpc-ease),filter .16s var(--wpc-ease);
}
.wpc-sticky a:active{transform:scale(.98)}
/* the theme colours every <a>, so both of these need to win explicitly */
a.wpc-sticky-wa,.wpc-sticky-wa,
a.wpc-sticky-wa:hover,a.wpc-sticky-wa:visited{
  flex:0 0 38%;background:#EAF2F7;color:#205386 !important;
  box-shadow:inset 0 0 0 1.5px #CFE0EA;
}
a.wpc-sticky-apply,.wpc-sticky-apply,
a.wpc-sticky-apply:hover,a.wpc-sticky-apply:visited{
  flex:1;background-image:var(--wpc-grad);background-color:#1A4570;
  color:#FFFFFF !important;
}
.wpc-sticky svg{width:18px;height:18px;flex:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .wpc-who,.wpc-highlights{grid-template-columns:repeat(2,1fr)}
  .wpc-steps{grid-template-columns:repeat(2,1fr)}
  .wpc-step{border-bottom:1px solid rgba(159,196,216,.16)}
  .wpc-step:nth-child(2){border-right:0}
  .wpc-spec > div{grid-template-columns:200px 1fr}
}
@media (max-width:767px){
  .wpc-who,.wpc-highlights,.wpc-fee{grid-template-columns:1fr}
  .wpc-steps{grid-template-columns:1fr}
  .wpc-step{border-right:0}
  .wpc-list-cols-2 .elementor-icon-list-items{column-count:1}
  .wpc-fee-incl ul{grid-template-columns:1fr}
  .wpc-spec > div{grid-template-columns:1fr;gap:3px;padding:12px 0}
  .wpc-fee-amt{font-size:40px}
  .wpc-final-facts > div{
    padding:10px 0;border-right:0;flex:0 0 100%;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .wpc-final-facts > div:last-child{border-bottom:0}
  .wpc-hero-actions{flex-direction:column;align-items:stretch}
  .wpc-hero-actions .wpc-btn{width:100%}
  .wpc-hero::before{width:280px;height:280px;top:-40px;right:-90px}
  .wpc-hero-img img{border-radius:6px 6px 6px 40px}
  .wpc-sticky{display:block}
  body.wpc-course-page{padding-bottom:78px !important}
  .wpc-journey li{padding-left:54px}
  .wpc-roles{grid-template-columns:1fr;gap:9px}
  .wpc-roles span{font-size:13.5px;padding:10px 14px}
  .wpc-formwrap .mf-input-wrapper .mf-radio-option,
  .wpc-formwrap .mf-input-wrapper .mf-checkbox-option{
    display:block;margin:0 0 9px;
  }
  /* form card + steps on phones */
  .wpc-formcard{padding:24px 18px 4px;border-radius:14px 14px 0 0}
  .wpc-formwrap .elementor-widget-metform > .elementor-widget-container{
    padding:16px 18px 4px;
  }
  .wpc-formcard--tail{padding:4px 18px 22px;border-radius:0 0 14px 14px}
  .wpc-formcard-head h2{font-size:23px}
  .wpc-formcard-head p{font-size:14.5px}
  .wpc-formcard-note{padding:13px 14px;font-size:13.5px;gap:11px}
  .wpc-note-ic{width:30px;height:30px}
  .wpc-stepbar .wpc-st{font-size:0;padding-top:38px}   /* labels off, dots stay */
  .wpc-stepbar .wpc-st::before{width:28px;height:28px;font-size:12px}
  .wpc-stepbar .wpc-st::after{top:13.5px}
  .wpc-stepbar .wpc-st.is-done > em{top:9px}
  .wpc-nav{flex-wrap:wrap;gap:10px}
  .wpc-nav button{flex:1 1 100%;padding:14px 22px}
  .wpc-nav .wpc-sp{display:none}
  .wpc-nav .wpc-next{order:1}
  .wpc-nav .wpc-back{order:2}
  .wpc-formcard-help{flex-direction:column;align-items:flex-start;gap:10px}
  .wpc-help-r{flex-direction:column;gap:6px}
  .wpc-foot-addr{font-size:13.5px}
}
/* very small phones */
@media (max-width:400px){
  .wpc-fee-amt{font-size:36px}
  .wpc-final-facts b{font-size:20px}
  .wpc-formcard-head h2{font-size:21px}
}

/* ---------- form: two-column field rows on wider screens ---------- */
/* MetForm renders each field as a sibling; pair them up so the card reads
   like the client mockup rather than one long single column. */
@media (min-width:768px){
  .wpc-steps-wrap .wpc-panel{
    display:none;
  }
  .wpc-steps-wrap .wpc-panel.is-on{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 26px;align-items:start;
  }
  /* full-width items inside a two-column panel */
  .wpc-steps-wrap .wpc-panel.is-on > .wpc-full,
  .wpc-steps-wrap .wpc-panel.is-on > .elementor-widget-heading,
  .wpc-steps-wrap .wpc-panel.is-on > .elementor-widget-divider,
  .wpc-steps-wrap .wpc-panel.is-on > .elementor-widget-mf-checkbox,
  .wpc-steps-wrap .wpc-panel.is-on > .elementor-widget-mf-button,
  .wpc-steps-wrap .wpc-panel.is-on > .elementor-widget-text-editor{
    grid-column:1 / -1;
  }
  /* radio groups with many options also span the full width */
  .wpc-steps-wrap .wpc-panel.is-on > .wpc-wide-field{grid-column:1 / -1}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .wpc-btn,.wpc-highlights > div,.wpc-sticky a{transition:none}
}

/* ---------- 19 form polish (alignment, nav spacing, date picker) ---------- */

/* 19.1 radio options in an even grid.
   They were laid out inline with a right margin, so each row broke at a
   different x and the columns never lined up. A fixed two-column grid gives
   every option the same start. */
.wpc-formwrap .mf-input-wrapper .mf-input-radio-wrapper,
.wpc-formwrap .mf-input-wrapper .mf-input-checkbox-wrapper{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 18px;
  align-items:start;
}
.wpc-formwrap .mf-input-wrapper .mf-radio-option,
.wpc-formwrap .mf-input-wrapper .mf-checkbox-option{
  margin-right:0;            /* the grid gap replaces it */
  display:flex;align-items:center;gap:8px;
  min-width:0;               /* let long labels wrap instead of overflowing */
}
/* the declaration checkbox is a single full-width statement, not a column */
.wpc-panel > .elementor-widget-mf-checkbox .mf-input-checkbox-wrapper{
  grid-template-columns:1fr;
}

/* 19.2 breathing room under the wizard buttons.
   .wpc-formcard sets a 2px bottom padding so the card can butt against its
   tail section; that left BACK / NEXT flush with the card edge. */
.wpc-formcard{padding-bottom:30px}
.wpc-nav{margin-bottom:4px}

/* 19.3 date of birth picker.
   The month <select> inherited the form's input styling (padding, 15px font,
   border-radius), which is far too large for flatpickr's header and clipped
   the month name and pushed the year out of line. Reset it inside the
   calendar only. */
.flatpickr-calendar .flatpickr-months{
  display:flex;align-items:center;padding:6px 8px 2px;
}
.flatpickr-calendar .flatpickr-month{
  display:flex;align-items:center;justify-content:center;
  flex:1;height:auto;overflow:visible;
}
.flatpickr-calendar .flatpickr-current-month{
  display:flex;align-items:center;justify-content:center;gap:6px;
  position:static;width:auto;height:auto;padding:0;font-size:15px;line-height:1.4;
}
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months{
  /* undo the global input rules — they are what broke the header */
  padding:2px 18px 2px 4px !important;
  font-size:14.5px !important;
  border:0 !important;border-radius:6px !important;
  background:transparent !important;
  height:auto !important;line-height:1.4 !important;
  width:auto !important;max-width:none !important;
  appearance:auto;
}
.flatpickr-calendar .flatpickr-current-month input.cur-year,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper{
  padding:0 !important;border:0 !important;background:transparent !important;
  font-size:14.5px !important;height:auto !important;line-height:1.4 !important;
  width:auto !important;min-width:4.5ch;
}
.flatpickr-calendar .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-next-month{
  position:static;flex:0 0 auto;padding:4px 8px;height:auto;
}

/* ---------- 20 course cards: even rows ---------- */
/* The four cards each hold image + heading + text, but the illustrations are
   different heights, so every heading and paragraph started at a different y
   and the cards ended at different depths. Give the column a column-flex so
   the image block reserves one fixed height and the text below always lines
   up across the row. */
.wpc-course-page .elementor-element-94826516 > .elementor-container > .elementor-column,
.wpc-course-page .elementor-element-b0e86411 > .elementor-container > .elementor-column{
  display:flex;
}
.wpc-course-page .elementor-element-94826516 .elementor-widget-wrap,
.wpc-course-page .elementor-element-b0e86411 .elementor-widget-wrap{
  display:flex;flex-direction:column;width:100%;
}
/* the illustration: one shared height, centred, never stretched */
.wpc-course-page .elementor-element-94826516 .elementor-widget-image,
.wpc-course-page .elementor-element-b0e86411 .elementor-widget-image{
  flex:0 0 auto;
  height:170px;
  display:flex;align-items:center;justify-content:flex-start;
  margin-bottom:18px !important;
}
.wpc-course-page .elementor-element-94826516 .elementor-widget-image img,
.wpc-course-page .elementor-element-b0e86411 .elementor-widget-image img{
  max-height:100%;width:auto;object-fit:contain;
}
/* headings start at the same line in every card */
.wpc-course-page .elementor-element-94826516 .elementor-widget-heading,
.wpc-course-page .elementor-element-b0e86411 .elementor-widget-heading{
  flex:0 0 auto;
  min-height:58px;
  display:flex;align-items:flex-start;
  margin-bottom:10px !important;
}
/* the paragraph takes the leftover space so all four cards end level */
.wpc-course-page .elementor-element-94826516 .elementor-widget-text-editor,
.wpc-course-page .elementor-element-b0e86411 .elementor-widget-text-editor{
  flex:1 1 auto;
  margin-bottom:0 !important;
}

@media (max-width:1024px){
  .wpc-course-page .elementor-element-94826516 .elementor-widget-image,
  .wpc-course-page .elementor-element-b0e86411 .elementor-widget-image{height:150px}
  .wpc-course-page .elementor-element-94826516 .elementor-widget-heading,
  .wpc-course-page .elementor-element-b0e86411 .elementor-widget-heading{min-height:0}
}
@media (max-width:767px){
  /* stacked on phones, so no cross-card alignment to hold */
  .wpc-course-page .elementor-element-94826516 .elementor-widget-image,
  .wpc-course-page .elementor-element-b0e86411 .elementor-widget-image{
    height:auto;margin-bottom:14px !important;
  }
}

/* ---------- 21 date of birth: year dropdown ---------- */
/* The numeric year spinner is hidden by the script and replaced with this
   select, so a birth year is one click instead of hundreds of month steps. */
.flatpickr-calendar .wpc-year-select{
  appearance:auto;
  border:0 !important;background:transparent !important;
  font-size:14.5px !important;line-height:1.4 !important;
  height:auto !important;width:auto !important;max-width:none !important;
  padding:2px 18px 2px 4px !important;
  color:inherit;cursor:pointer;
  font-family:inherit;
}
.flatpickr-calendar .wpc-year-select:focus{
  outline:2px solid #1F93A2;outline-offset:1px;border-radius:4px;
}
/* a little air between the arrows and the month / year block */
.flatpickr-calendar .flatpickr-months{gap:4px}

/* the invalid highlight now persists, so make it unmistakable */
.wpc-formwrap .mf-input-wrapper.wpc-invalid .mf-input-label::after{
  content:" — required";
  font-size:12.5px;font-weight:600;color:#B4322E;letter-spacing:.01em;
}

/* The header carries two dropdowns, which was widening it past the day grid and
   clipping the Saturday column. Pin the grid to its natural 7-column size and
   let the calendar match, rather than letting either stretch. */
.flatpickr-calendar{width:auto !important;min-width:0}
.flatpickr-calendar .flatpickr-days{width:auto !important}
.flatpickr-calendar .dayContainer{
  width:307px !important;min-width:307px !important;max-width:307px !important;
}
.flatpickr-calendar .flatpickr-rContainer,
.flatpickr-calendar .flatpickr-weekdays{width:307px !important}
.flatpickr-calendar .flatpickr-months{max-width:307px}

/* ---------- 23 the landing page carries its own header ---------- */
/* Same pattern as the page footer: a section of its own inside the page, so
   the LP does not depend on the site template. The site-wide ElementsKit
   header is therefore suppressed here — other pages keep it untouched. */
.wpc-course-page .ekit-template-content-header{display:none !important}

#page-header{position:sticky;top:0;z-index:70}
.wpc-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid #DDE5EB;
}
.wpc-head-brand{
  display:inline-flex;align-items:center;gap:11px;
  text-decoration:none;min-width:0;
}
.wpc-head-logo{
  width:44px;height:44px;flex:none;object-fit:contain;border-radius:50%;
}
.wpc-head-cta{
  flex:none;display:inline-flex;align-items:center;
  min-height:44px;padding:11px 24px;border-radius:999px;
  background-image:var(--wpc-grad);background-color:#1A4570;color:#fff;
  font-family:"Noto Sans HK",sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  box-shadow:0 8px 20px -10px rgba(19,129,156,.55);
  transition:filter .18s var(--wpc-ease),transform .18s var(--wpc-ease);
}
.wpc-head-cta:hover{filter:saturate(1.06) brightness(1.05);transform:translateY(-1px)}
.wpc-head-cta:active{transform:scale(.98)}


@media (max-width:767px){
  .wpc-head{padding:10px 16px;gap:10px}
  .wpc-head-logo{width:38px;height:38px}
  /* the full school name will not fit beside a button on a phone */
  .wpc-head-cta{padding:10px 18px;font-size:13px}
}

/* header section links — the page nav. Desktop only: phones already get the
   sticky WhatsApp / Apply bar at the bottom, and a cramped link row up here
   would only compete with it. */
.wpc-head-nav{display:none;align-items:center;gap:4px;margin:0 auto}
.wpc-head-nav{display:flex}
.wpc-head-nav a{
  display:inline-flex;align-items:center;min-height:40px;
  padding:8px 14px;border-radius:999px;
  font-family:Open Sans,sans-serif;font-size:13.5px;font-weight:600;
  color:#205386;text-decoration:none;white-space:nowrap;
  transition:background-color .18s var(--wpc-ease),color .18s var(--wpc-ease);
}
@media (hover:hover){ .wpc-head-nav a:hover{background:#EAF2F7} }
.wpc-head-nav a.is-active{background:#205386;color:#fff}

/* header layout: one row, never wrapping. The nav takes the middle and
   scrolls sideways if a narrow desktop cannot fit every link. */
.wpc-head{flex-wrap:nowrap}
.wpc-head-brand{flex:none}
.wpc-head-nav{
  flex:1 1 auto;min-width:0;justify-content:center;
  overflow-x:auto;scrollbar-width:none;
}
.wpc-head-nav::-webkit-scrollbar{display:none}
.wpc-head-nav a{flex:0 0 auto}

/* On a phone the sticky bar at the bottom already offers Apply, so the header
   drops its button and gives the whole row to the section links. */
@media (max-width:767px){
  .wpc-head-cta{display:none}
  .wpc-head-nav{justify-content:flex-start;margin-left:12px}
  .wpc-head-nav a{padding:8px 12px;font-size:13px}
}

/* Keep the header bar full-bleed (it is sticky, so its background should reach
   both edges) but hold its contents to the same 1140px the page body uses, so
   the logo lines up with the hero text rather than hugging the window edge. */
.wpc-head{
  max-width:1140px;margin:0 auto;
  padding-left:20px;padding-right:20px;
}
#page-header{background:rgba(255,255,255,.92);border-bottom:1px solid #DDE5EB;backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.wpc-head{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}

/* The page-wide link colour was winning over the button, leaving teal text on
   a teal gradient. Pin it white. Logo up, button down — it was overpowering a
   bar that is only 68px tall. */
.wpc-head-cta,
.wpc-head-cta:link,
.wpc-head-cta:visited,
.wpc-head-cta:hover,
.wpc-head-cta:focus{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.wpc-head-cta{
  min-height:38px;padding:9px 20px;font-size:13px;letter-spacing:.045em;
}
.wpc-head-logo{width:58px;height:58px}
@media (max-width:767px){ .wpc-head-logo{width:46px;height:46px} }

/* ---------- 24 mobile menu ---------- */
/* Desktop shows the inline link row; phones get a burger that drops the same
   links in a panel, with Apply at the end of it. */
.wpc-burger{
  display:none;flex:none;width:44px;height:44px;padding:11px 10px;
  background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:space-between;
}
.wpc-burger span{
  display:block;height:2px;width:100%;border-radius:2px;background:#205386;
  transition:transform .2s var(--wpc-ease),opacity .2s var(--wpc-ease);
}
.wpc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.wpc-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.wpc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.wpc-menu{
  display:none;flex-direction:column;gap:2px;
  padding:10px 20px 18px;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid #DDE5EB;
}
.wpc-menu[hidden]{display:none}
.wpc-menu.is-open{display:flex}
.wpc-menu a{
  display:flex;align-items:center;min-height:48px;padding:10px 4px;
  font-family:Open Sans,sans-serif;font-size:15px;font-weight:600;
  color:#205386;text-decoration:none;
  border-bottom:1px solid #EDF2F6;
}
.wpc-menu a:last-of-type{border-bottom:0}
.wpc-menu .wpc-menu-cta{
  justify-content:center;margin-top:12px;border-bottom:0;
  min-height:48px;border-radius:999px;
  background-image:var(--wpc-grad);background-color:#1A4570;
  color:#fff !important;-webkit-text-fill-color:#fff !important;
  font-family:Noto Sans HK,sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;
}

@media (max-width:1024px){
  .wpc-head-nav{display:none !important}
  .wpc-burger{display:flex}
  .wpc-head{justify-content:space-between}
}
@media (min-width:1025px){
  .wpc-menu{display:none !important}
}

/* The theme styles every <button>, which gave the burger a teal pill, and the
   bars collapsed to zero width because a column flex container does not
   stretch its children by default. Reset both. */
.wpc-head .wpc-burger,
.wpc-head .wpc-burger:hover,
.wpc-head .wpc-burger:focus,
.wpc-head .wpc-burger:active{
  background:none !important;background-image:none !important;
  border:0 !important;box-shadow:none !important;
  border-radius:0 !important;
  align-items:stretch;
  width:44px !important;min-width:0 !important;
}
.wpc-head .wpc-burger span{
  width:24px !important;min-width:24px;height:2px !important;
  margin:0 auto;background:#205386 !important;
}