/* ===== index.php-only overrides (index.css untouched) ===== */

.page-wrapper #our-learners .ibop-ln-card p {
      text-align: center !important;
}

/* 1) Buttons: darker green by default, light green on hover */
html body .page-wrapper .ibop-btn-primary,
html body .page-wrapper .ibop-submit,
html body .ibop-btn-primary,
html body #home .idz-addbtn,
html body .ibop-final-btn--fill{background:#7BBA27!important;border-color:#7BBA27!important;color:#0B1D2E!important}
html body .page-wrapper .ibop-btn-primary:hover,
html body .page-wrapper .ibop-submit:hover,
html body .ibop-btn-primary:hover,
html body #home .idz-addbtn:hover,
html body .ibop-final-btn--fill:hover{background:#BDDD93!important;border-color:#BDDD93!important;color:#0B1D2E!important}

/* "How you join" left buttons: Apply Now, Download Brochure, phone number */
html body #how-to-join .ibop-jn-apply .ibop-btn{background:#7BBA27!important;border-color:#7BBA27!important;color:#0B1D2E!important}
html body #how-to-join .ibop-jn-apply .ibop-btn:hover{background:#BDDD93!important;border-color:#BDDD93!important;color:#0B1D2E!important}
html body #how-to-join .ibop-jn-apply .ibop-jn-call svg,
html body #how-to-join .ibop-jn-apply .ibop-jn-call:hover svg{color:#0B1D2E!important}

/* 2) Five questions: background image + plain white cards (no gradient / glow) */
/* Same look as "The job, in one trade": dark navy gradient over db1.jpeg (path is relative to index.php) */
html body .page-wrapper #five-questions.ibop-sec{
  background:linear-gradient(180deg,rgba(12,20,28,.94),rgba(11,29,46,.86) 50%,rgba(12,20,28,.96)),url('images/banners/db1.jpeg') center/cover no-repeat!important;
  background-size:cover!important;
  box-shadow:inset 0 70px 90px -50px rgba(0,0,0,.75),inset 0 -70px 90px -50px rgba(0,0,0,.75)!important;
  animation:none!important}
html body .page-wrapper #five-questions.ibop-sec::after{display:none!important}   /* remove the green glow circle */
html body .page-wrapper #five-questions .ibop-sec-head h2{color:#fff!important}
html body .page-wrapper #five-questions .ibop-sec-head .ibop-kicker{color:#7BBA27!important}
html body .page-wrapper #five-questions .ibop-sec-head>p:not(.ibop-kicker){color:#D1D3D4!important}
html body .page-wrapper #five-questions .ibop-fq-item:nth-child(n){
  background:#fff!important;background-image:none!important;
  border:1px solid #E5E2E1!important;border-bottom:4px solid #7BBA27!important;
  box-shadow:0 8px 22px rgba(11,29,46,.10)!important;color:#333!important}
html body .page-wrapper #five-questions .ibop-fq-item:nth-child(n):hover{box-shadow:0 14px 30px rgba(11,29,46,.16)!important}
html body .page-wrapper #five-questions .ibop-fq-item:nth-child(n)::before,
html body .page-wrapper #five-questions .ibop-fq-item:nth-child(n)::after{content:none!important;display:none!important}
html body .page-wrapper #five-questions .ibop-fq-item h3{color:#0B1D2E!important}
html body .page-wrapper #five-questions .ibop-fq-item p{color:#333!important}
html body .page-wrapper #five-questions .ibop-fq-item .ibop-fq-no{background:#7BBA27!important;color:#0B1D2E!important;box-shadow:none!important}
html body .page-wrapper #five-questions .ibop-fq-item:nth-child(n){min-height:0!important;gap:10px!important;padding:20px 14px 18px!important}
html body .page-wrapper #five-questions .ibop-fq-item h3{font-size:16px!important;line-height:1.3!important;text-align:left!important}
html body .page-wrapper #five-questions .ibop-fq-item p{font-size:12px!important;line-height:1.5!important;text-align:justify!important;text-align-last:auto!important;text-justify:inter-word;hyphens:auto}
/* desktop: all five cards in ONE row */
@media(min-width:992px){
  html body .page-wrapper #five-questions .ibop-fq-list{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
  html body .page-wrapper #five-questions .ibop-fq-list>li:nth-child(n){grid-column:auto!important}
}

/* 3) Desks: icon in the left corner of each tile + icon beside the open detail text */
html body .page-wrapper #careers .ibop-cp-card{min-height:118px;padding-top:36px}
.ibop-cp-ico{position:absolute;left:8px;top:8px;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#DCEFC0;color:#2F6B0A;transition:background .25s,color .25s}
.ibop-cp-ico svg,.ibop-cp-bico svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ibop-cp-ico svg{width:16px;height:16px}
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-ico{background:#7BBA27;color:#0B1D2E}
html body .page-wrapper #careers .ibop-cp-mini .n{position:absolute;top:11px;right:10px;font-size:15px;line-height:1}
html body .page-wrapper #careers .ibop-cp-mini .t{text-align:center}
html body .page-wrapper #careers .ibop-cp-body{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-items:start}
.ibop-cp-bico{grid-column:1;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:#DCEFC0;color:#2F6B0A}
.ibop-cp-bico svg{width:28px;height:28px}
.ibop-cp-bico:empty{display:none}
html body .page-wrapper #careers .ibop-cp-body h3{grid-column:2;grid-row:1}
html body .page-wrapper #careers .ibop-cp-body p{grid-column:2;grid-row:2}
@media(max-width:767px){
  html body .page-wrapper #careers .ibop-cp-card{min-height:96px;padding-top:30px}
  .ibop-cp-ico{left:4px;top:4px;width:22px;height:22px;border-radius:6px}
  .ibop-cp-ico svg{width:13px;height:13px}
  html body .page-wrapper #careers .ibop-cp-mini .n{top:7px;right:5px;font-size:12px}
  html body .page-wrapper #careers .ibop-cp-body{grid-template-columns:42px minmax(0,1fr);column-gap:12px}
  .ibop-cp-bico{width:42px;height:42px;border-radius:12px}
  .ibop-cp-bico svg{width:22px;height:22px}
}

/* 4) Curriculum topic numbers: light-green box, dark-green number */
html body .page-wrapper #curriculum .ibop-topics li::before{content:counter(t)!important;display:flex!important;align-items:center;justify-content:center;background:#D6EDB3!important;color:#2E6B05!important;font-weight:700}

/* 5) Faculty text justified */
html body .page-wrapper #service .ibop-tc-body p{text-align:justify!important;text-align-last:auto!important;text-justify:inter-word}

/* 6) Placeflix steps: bordered card, number on the left, content on the right */
html body .page-wrapper #placeflix .ibop-pfx-steps>li{
  display:grid!important;grid-template-columns:50px minmax(0,1fr)!important;column-gap:16px!important;align-items:start!important;
  position:relative;background:#fff;border:1px solid #E5E2E1;border-bottom:4px solid #7BBA27;border-radius:14px;
  padding:22px 20px 24px;box-shadow:0 8px 22px rgba(11,29,46,.08);
  transition:transform .25s ease,box-shadow .25s ease}
html body .page-wrapper #placeflix .ibop-pfx-steps>li:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(11,29,46,.14)}
html body .page-wrapper #placeflix .ibop-pfx-n{margin:0}
@media(max-width:767px){html body .page-wrapper #placeflix .ibop-pfx-steps>li{grid-template-columns:44px minmax(0,1fr)!important;column-gap:14px!important;padding:18px 16px 20px}}

/* 7) Sticky Apply tab, left edge */
.ibop-stick-apply{position:fixed;left:0;top:50%;z-index:9000;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;padding:16px 11px;border-radius:10px 0 0 10px;background:#7BBA27;color:#0B1D2E!important;font:700 14px/1 "Roboto",Arial,sans-serif;letter-spacing:.04em;text-decoration:none;box-shadow:4px 0 16px rgba(11,29,46,.25);transition:background .2s ease}
.ibop-stick-apply:hover{background:#BDDD93;color:#0B1D2E!important;text-decoration:none}
.ibop-stick-apply .s2{font-weight:500;font-size:12px;opacity:.85}
html.ibop-modal-open .ibop-stick-apply,html.byl-lock .ibop-stick-apply{display:none!important}
@media(max-width:767px){.ibop-stick-apply{padding:12px 8px;font-size:12px}.ibop-stick-apply .s2{display:none}}

/* ===== 8) Desktop / large-screen fixes ===== */

/* 8a) Hero: "Our learners are already there" text must never be cut off */
html body #home .idz-learners{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:12px 16px!important;max-width:100%}
html body #home .idz-avs{flex:0 0 auto}
html body #home .idz-learn-txt{flex:1 1 240px!important;min-width:0!important;max-width:100%!important;display:flex!important;flex-direction:column!important;gap:2px;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.4!important;text-align:left!important}
html body #home .idz-learn-txt strong,
html body #home .idz-learn-txt span{display:block;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word}
/* keep the hero centred and balanced on very wide monitors */
@media(min-width:1600px){
  html body #home .ibop-hero-inner{max-width:1560px!important;margin-left:auto!important;margin-right:auto!important}
  html body #home .idz-text{max-width:100%}
}

/* 8b) "Before you choose a course": equal cards, aligned rows, left-aligned, no cut text */
html body .page-wrapper #five-questions .ibop-fq-list{align-items:stretch!important}
html body .page-wrapper #five-questions .ibop-fq-list>li.ibop-fq-item{
  height:100%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;overflow:visible!important}
html body .page-wrapper #five-questions .ibop-fq-item .ibop-fq-no{align-self:flex-start!important;margin:0!important}
html body .page-wrapper #five-questions .ibop-fq-item h3{
  text-align:left!important;margin:0!important;display:block!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:break-word;
  height:auto!important;max-height:none!important}
html body .page-wrapper #five-questions .ibop-fq-item p{
  margin:0!important;flex:1 1 auto;text-align:justify!important;text-align-last:left!important;text-justify:inter-word;hyphens:auto}
@media(min-width:992px){
  /* room for two full lines so every answer starts on the same row and nothing is cut */
  html body .page-wrapper #five-questions .ibop-fq-item h3{min-height:2.7em!important}
}
@media(min-width:1400px){
  html body .page-wrapper #five-questions .ibop-wrap{max-width:1640px!important}
  html body .page-wrapper #five-questions .ibop-fq-list{gap:20px!important}
  html body .page-wrapper #five-questions .ibop-fq-item:nth-child(n){padding:24px 18px 22px!important}
  html body .page-wrapper #five-questions .ibop-fq-item h3{font-size:clamp(14px,.95vw,17px)!important;line-height:1.35!important}
  html body .page-wrapper #five-questions .ibop-fq-item p{font-size:clamp(13px,.88vw,15px)!important;line-height:1.6!important}
}

/* 8c) Outcomes: left-aligned section heading, centred step text, original font sizes */
html body .page-wrapper section#outcomes .ibop-sec-head,
html body .page-wrapper section#outcomes .ibop-sec-head .ibop-kicker,
html body .page-wrapper section#outcomes .ibop-sec-head h2,
html body .page-wrapper section#outcomes .ibop-sec-head > p,
html body .page-wrapper section#outcomes .ibop-sec-head > p.ibop-reveal{
  text-align:left!important;text-align-last:left!important}
html body .page-wrapper section#outcomes .ibop-sec-head > p:not(.ibop-kicker){
  display:block!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
html body .page-wrapper #outcomes .ibop-step{display:flex;flex-direction:column;align-items:center}
html body .page-wrapper #outcomes .ibop-step .ibop-dot{align-self:center}
html body .page-wrapper #outcomes .ibop-step h4,
html body .page-wrapper #outcomes .ibop-step p{
  align-self:stretch;text-align:center!important;text-align-last:center!important;hyphens:none;margin-left:0;margin-right:0}

/* 9) Our Learners cards: charcoal text instead of blue */
html body .page-wrapper #our-learners .ibop-ln-card,
html body .page-wrapper #our-learners .ibop-ln-card p,
html body .page-wrapper #our-learners .ibop-ln-card .ibop-ln-name,
html body .page-wrapper #our-learners .ibop-ln-card .ibop-ln-role,
html body .page-wrapper #our-learners .ibop-ln-card .ibop-ln-role b,
html body .page-wrapper #our-learners .ibop-ln-card .ibop-ln-role span{color:#333!important}

/* 10) Popup forms: charcoal text, regular weight (no bold) */
html body .ibop-modal .ibop-pane,
html body .ibop-modal .ibop-pane h2,
html body .ibop-modal .ibop-pane label,
html body .ibop-modal .ibop-pane p,
html body .ibop-modal .ibop-pane span,
html body .ibop-modal .ibop-pane input,
html body .ibop-modal .ibop-pane button.ibop-select-btn,
html body .ibop-modal .ibop-pane .ibop-cc-btn,
html body .ibop-modal .ibop-pane .ibop-select-list li,
html body .ibop-modal .ibop-pane .ibop-cc-list li,
html body .ibop-modal .ibop-pane .ibop-err,
html body #before-you-leave-popup .byl-body,
html body #before-you-leave-popup .byl-body h2,
html body #before-you-leave-popup .byl-body p,
html body #before-you-leave-popup .byl-body label,
html body #before-you-leave-popup .byl-body span,
html body #before-you-leave-popup .byl-body input,
html body #before-you-leave-popup .byl-brandline{color:#333!important}
html body .ibop-modal .ibop-pane label,
html body .ibop-modal .ibop-pane p,
html body .ibop-modal .ibop-pane span,
html body .ibop-modal .ibop-pane input,
html body .ibop-modal .ibop-pane strong,
html body .ibop-modal .ibop-pane b,
html body .ibop-modal .ibop-pane .ibop-select-btn,
html body .ibop-modal .ibop-pane .ibop-cc-btn,
html body .ibop-modal .ibop-pane li,
html body #before-you-leave-popup .byl-body label,
html body #before-you-leave-popup .byl-body p,
html body #before-you-leave-popup .byl-body span,
html body #before-you-leave-popup .byl-body input,
html body #before-you-leave-popup .byl-label{font-weight:400!important}
html body .ibop-modal .ibop-pane .ibop-err{color:#c0392b!important}
html body .ibop-modal .ibop-pane input::placeholder,
html body #before-you-leave-popup .byl-body input::placeholder{color:#8a8f94!important;font-weight:400}

/* 11) How the programme works + Sound familiar: charcoal text in every state (normal, scrolled-in, hover, focus) */
html body .page-wrapper #how-programme-works .ibop-hw-heading>p:not(.ibop-kicker),
html body .page-wrapper #how-programme-works .ibop-hw-step,
html body .page-wrapper #how-programme-works .ibop-hw-step:hover,
html body .page-wrapper #how-programme-works .ibop-hw-step.is-in,
html body .page-wrapper #how-programme-works .ibop-hw-step h3,
html body .page-wrapper #how-programme-works .ibop-hw-step p,
html body .page-wrapper #how-programme-works .ibop-hw-step:hover h3,
html body .page-wrapper #how-programme-works .ibop-hw-step:hover p,
html body .page-wrapper #how-programme-works .ibop-hw-step:focus-within h3,
html body .page-wrapper #how-programme-works .ibop-hw-step:focus-within p,
html body .page-wrapper #how-programme-works .ibop-hw-step.is-in h3,
html body .page-wrapper #how-programme-works .ibop-hw-step.is-in p,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article:hover,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article.is-in,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article h3,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article p,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article:hover h3,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article:hover p,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article.is-in h3,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article.is-in p{
  color:#333!important;-webkit-text-fill-color:#333!important;transition:none!important;animation:none}

html body .page-wrapper #sound-familiar .ibop-sf-front,
html body .page-wrapper #sound-familiar .ibop-sf-front .ibop-sf-quote,
html body .page-wrapper #sound-familiar .ibop-sf-card:hover .ibop-sf-front .ibop-sf-quote,
html body .page-wrapper #sound-familiar .ibop-sf-card:focus .ibop-sf-front .ibop-sf-quote,
html body .page-wrapper #sound-familiar .ibop-sf-card.is-in .ibop-sf-front .ibop-sf-quote,
html body .page-wrapper #sound-familiar .ibop-sf-front .ibop-sf-hint{
  color:#333!important;-webkit-text-fill-color:#333!important;transition:none!important}

/* 12) "Take the next step" label in the Before You Leave popup: site green */
html body #before-you-leave-popup .byl-brandline{color:#7BBA27!important}

/* 13) "Every session recorded" etc.: green tick icon */
html body .page-wrapper #how-programme-works .ibop-hw-check,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article:hover .ibop-hw-check{
  color:#7BBA27!important;-webkit-text-fill-color:#7BBA27!important;background:#EAF5D8!important;border-color:#7BBA27!important;transition:none!important}

/* 14) Desks you can work on: charcoal card text in every state */
html body .page-wrapper #careers .ibop-cp-card .ibop-cp-mini,
html body .page-wrapper #careers .ibop-cp-card .ibop-cp-mini .t,
html body .page-wrapper #careers .ibop-cp-card .ibop-cp-mini .n,
html body .page-wrapper #careers .ibop-cp-card:hover .ibop-cp-mini .t,
html body .page-wrapper #careers .ibop-cp-card:hover .ibop-cp-mini .n,
html body .page-wrapper #careers .ibop-cp-card:focus .ibop-cp-mini .t,
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-mini .t,
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-mini .n{
  color:#333!important;-webkit-text-fill-color:#333!important;transition:none!important}

/* 15) Curriculum: charcoal topic cards and unselected pillar tabs */
html body .page-wrapper #curriculum .ibop-topics li,
html body .page-wrapper #curriculum .ibop-topics li:hover{color:#333!important;transition:none!important}
html body .page-wrapper #curriculum .ibop-tab:not(.is-active):not([aria-selected="true"]),
html body .page-wrapper #curriculum .ibop-tab:not(.is-active):not([aria-selected="true"]) small,
html body .page-wrapper #curriculum .ibop-tab:not(.is-active):not([aria-selected="true"]) b,
html body .page-wrapper #curriculum .ibop-tab:not(.is-active):not([aria-selected="true"]) span,
html body .page-wrapper #curriculum .ibop-tab:not(.is-active):not([aria-selected="true"]):hover b,
html body .page-wrapper #curriculum .ibop-tab:not(.is-active):not([aria-selected="true"]):hover span,
html body .page-wrapper #curriculum .ibop-tab:not(.is-active):not([aria-selected="true"]):hover small{
transition:none!important}

/* 16) Curriculum topic cards: white text */
html body .page-wrapper #curriculum .ibop-topics li,
html body .page-wrapper #curriculum .ibop-topics li:hover{color:#fff!important;}

/* 17) Desks: opened (toggled) card = white text + green icon */
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-mini,
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-mini .t,
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-mini .n,
html body .page-wrapper #careers .ibop-cp-card.is-open:hover .ibop-cp-mini .t,
html body .page-wrapper #careers .ibop-cp-card.is-open:hover .ibop-cp-mini .n{
  color:#fff!important;-webkit-text-fill-color:#fff!important}
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-ico{
  background:rgba(123,186,39,.18)!important;color:#7BBA27!important}
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-ico svg{stroke:#7BBA27!important}

/* 18) Our Learners: role / company line in green */
html body .page-wrapper #our-learners .ibop-ln-card .ibop-ln-role,
html body .page-wrapper #our-learners .ibop-ln-card .ibop-ln-role b,
html body .page-wrapper #our-learners .ibop-ln-card .ibop-ln-role span{
  color:#4F8F12!important;-webkit-text-fill-color:#4F8F12!important}

/* 19) Five questions: charcoal question + answer text */
html body .page-wrapper #five-questions .ibop-fq-item h3,
html body .page-wrapper #five-questions .ibop-fq-item p,
html body .page-wrapper #five-questions .ibop-fq-item:hover h3,
html body .page-wrapper #five-questions .ibop-fq-item:hover p{
  color:#333!important;-webkit-text-fill-color:#333!important}

/* 20) Tick inside the circle: dark charcoal */
html body .page-wrapper #how-programme-works .ibop-hw-check,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article:hover .ibop-hw-check{
  color:#333!important;-webkit-text-fill-color:#333!important}

/* 21) FAQ questions: charcoal */
html body .page-wrapper #faq .ibop-faq-list summary,
html body .page-wrapper #faq .ibop-faq-list summary h3,
html body .page-wrapper #faq .ibop-faq-list details[open] summary h3,
html body .page-wrapper #faq .ibop-faq-list summary:hover h3{
  color:#333!important;-webkit-text-fill-color:#333!important}

/* 22) Desks: top-right card number in light green */
html body .page-wrapper #careers .ibop-cp-card .ibop-cp-mini .n,
html body .page-wrapper #careers .ibop-cp-card:hover .ibop-cp-mini .n,
html body .page-wrapper #careers .ibop-cp-card.is-open .ibop-cp-mini .n,
html body .page-wrapper #careers .ibop-cp-card.is-open:hover .ibop-cp-mini .n{
  color:#7BBA27!important;-webkit-text-fill-color:#7BBA27!important}

/* 23) Curriculum topic numbers: light-green box, dark-green number */
html body .page-wrapper #curriculum .ibop-topics li::before,
html body .page-wrapper #curriculum .ibop-topics li:hover::before{
  background:#D6EDB3!important;color:#2E6B05!important;-webkit-text-fill-color:#2E6B05!important}

/* 24) Curriculum "Pillar 1, 2 ..." labels: always green */
html body .page-wrapper #curriculum .ibop-tab small,
html body .page-wrapper #curriculum .ibop-tab:hover small,
html body .page-wrapper #curriculum .ibop-tab.is-active small,
html body .page-wrapper #curriculum .ibop-tab[aria-selected="true"] small,
html body .page-wrapper #curriculum .ibop-tab:focus small{
  color:#7BBA27!important;-webkit-text-fill-color:#7BBA27!important;transition:none!important}

/* 25) Every session recorded: charcoal circle, green tick */
html body .page-wrapper #how-programme-works .ibop-hw-check,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article:hover .ibop-hw-check,
html body .page-wrapper #how-programme-works .ibop-hw-highlights article.is-in .ibop-hw-check{
  background:#333!important;border-color:#333!important;
  color:#7BBA27!important;-webkit-text-fill-color:#7BBA27!important;transition:none!important}

/* 26) Learner quotes: always charcoal (normal, scroll-in, hover, focus) */
html body .page-wrapper #our-learners .ibop-ln-item .ibop-ln-card p,
html body .page-wrapper #our-learners .ibop-ln-item:hover .ibop-ln-card p,
html body .page-wrapper #our-learners .ibop-ln-item.is-in .ibop-ln-card p,
html body .page-wrapper #our-learners .ibop-ln-item:focus-within .ibop-ln-card p,
html body .page-wrapper #our-learners .ibop-ln-card:hover p,
html body .page-wrapper #our-learners .ibop-ln-card:hover .ibop-ln-name,
html body .page-wrapper #our-learners .ibop-ln-item:hover .ibop-ln-name{
  color:#333!important;-webkit-text-fill-color:#333!important;opacity:1!important;transition:none!important}

/* 27) FAQ questions: green on hover / keyboard focus */
html body .page-wrapper #faq .ibop-faq-list details:hover summary h3,
html body .page-wrapper #faq .ibop-faq-list details[open]:hover summary h3,
html body .page-wrapper #faq .ibop-faq-list summary:hover h3,
html body .page-wrapper #faq .ibop-faq-list summary:focus-visible h3{
  color:#7BBA27!important;-webkit-text-fill-color:#7BBA27!important;transition:color .2s ease}

/* Before You Leave popup - desktop fit: whole form + full image visible, no inner scrollbar (index.css untouched) */
@media (min-width:701px){
  #before-you-leave-popup .byl-card{
    height:min(700px,90vh);
    max-height:90vh;
  }
  /* image column takes the picture's own shape (portrait 2:3) so there are no side gaps and nothing is cut */
  /* equal halves: card width = 4/3 of its height, so each half is a 2:3 portrait (matches the picture) */
  #before-you-leave-popup .byl-card{grid-template-columns:1fr 1fr;grid-template-rows:100%;width:min(933px,120vh,96vw)}
  #before-you-leave-popup .byl-visual{height:100%;width:100%;background:#063765}
  #before-you-leave-popup .byl-banner{
    width:100%;height:100%;
    object-fit:cover !important;
    object-position:center;
  }
  #before-you-leave-popup .byl-body{
    display:flex;flex-direction:column;justify-content:center;
    overflow:hidden;                  /* no scrollbar - content is sized to fit */
    padding:clamp(16px,4vh,42px) clamp(20px,3vw,38px) clamp(14px,3vh,28px);
  }
  #before-you-leave-popup .byl-brandline{margin:0 0 clamp(4px,1vh,12px);font-size:clamp(11px,1.5vh,13px)}
  #before-you-leave-popup .byl-body h2{font-size:clamp(20px,3.6vh,32px);margin:0 0 clamp(6px,1.4vh,14px)}
  #before-you-leave-popup .byl-body .byl-intro{font-size:clamp(13px,1.9vh,16px);line-height:1.45;margin:0 0 clamp(6px,2vh,22px)}
  #before-you-leave-popup .byl-body label.byl-label{margin:clamp(6px,1.6vh,15px) 0 clamp(3px,.8vh,7px);font-size:clamp(12px,1.7vh,14px)}
  #before-you-leave-popup .byl-body input[type=email],
  #before-you-leave-popup .byl-body input[type=tel]{min-height:clamp(38px,6.4vh,52px);padding:clamp(7px,1.5vh,13px) 14px;font-size:clamp(14px,2vh,16px)}
  #before-you-leave-popup .byl-consent{margin:clamp(8px,1.8vh,17px) 0 clamp(8px,2vh,20px);font-size:clamp(11px,1.6vh,13px);line-height:1.4}
  #before-you-leave-popup .byl-submit{padding:clamp(10px,2vh,16px) 18px;font-size:clamp(14px,2.1vh,17px)}
  #before-you-leave-popup .byl-note{margin:clamp(8px,1.6vh,16px) 0 0 !important}
  #before-you-leave-popup .byl-message{margin:clamp(6px,1vh,12px) 0;padding:clamp(8px,1.2vh,12px)}
}
/* Mobile / small tablets (700px and below): form only, no image, scrolls if the screen is short */
@media (max-width:700.98px){
  #before-you-leave-popup .byl-visual{display:none !important}
  #before-you-leave-popup .byl-card{
    display:block !important;grid-template-columns:1fr !important;
    width:min(94vw,460px) !important;height:auto !important;
    max-height:92vh !important;max-height:92dvh !important;
    overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #before-you-leave-popup .byl-body{
    display:block !important;overflow:visible !important;
    padding:42px 18px 20px !important}
  #before-you-leave-popup .byl-body h2{font-size:22px !important;line-height:1.25}
  #before-you-leave-popup .byl-body input[type=email],
  #before-you-leave-popup .byl-body input[type=tel]{font-size:16px !important;min-height:46px;width:100%;box-sizing:border-box}  /* 16px stops iPhone auto-zoom */
  #before-you-leave-popup .byl-close{position:absolute !important;top:8px !important;right:10px !important;z-index:5}
}
/* very short windows only: let the form scroll rather than clip it */
@media (min-width:701px) and (max-height:520px){
  #before-you-leave-popup .byl-body{overflow:auto;justify-content:flex-start}
}