/* SAM Web Studio overrides - hand written, NOT generated.
   style.min.css is compiled from the .scss files in this directory and
   will be overwritten by any recompile. Keep custom CSS here instead.
   Loaded after style.min.css in resources/views/welcome.blade.php. */

.MyCarousel > .card{padding:28px 22px !important}.MyCarousel .card-header{margin-bottom:16px !important}.MyCarousel .card-body h3{font-size:17px !important;line-height:24px !important;margin-bottom:10px !important}.MyCarousel .card-body p{font-size:13.5px !important;line-height:20px !important;margin-bottom:8px !important}.MyCarousel .card-body ul{margin-bottom:8px !important;padding-left:18px !important}.MyCarousel .card-body li{font-size:13.5px !important;line-height:19px !important;margin-bottom:2px !important}.MyCarousel .card-footer{margin-top:16px !important}
.MyCarousel .card-header img{mix-blend-mode:screen}

/* QA#8 2026-07-30 - Course Categories card alignment (SAM) */
.ProBlock .card-body{display:flex !important;flex-direction:column !important;flex:1 1 auto !important}
.ProBlock .card-body .btn{margin-top:auto !important;align-self:center !important}

/* QA#24 2026-07-30 - drop cap collided with a following list (SAM) */
.CmsPage p:first-child:has(+ ol)::first-letter,
.CmsPage p:first-child:has(+ ul)::first-letter{initial-letter:normal;-webkit-initial-letter:normal;font-size:inherit;font-weight:inherit;margin-right:0;color:inherit}

/* QA#25 2026-07-30 - job card short description was clamped to 1 line (SAM) */
.CareerBox>* .JobTitle p{-webkit-line-clamp:3 !important}

/* Career cards - bottom-align the Apply Now button (SAM 2026-08-01) */
.CareerBox>*:first-child{flex:1 1 auto !important}
.CareerBox>*:last-child{margin-top:auto !important}

/* ---- Hero wrap control (SAM 2026-08-01) ---- */
/* col-xl-7 gives ~795px; at 3rem/800 the headline broke mid-phrase.
   balance distributes lines evenly; the max-width stops over-long measures. */
.BannerSec h1.large{text-wrap:balance;max-width:20ch;margin-left:auto;margin-right:auto}
.BannerSec p{text-wrap:balance}

/* ---- Hero composition: keep the video card half-visible above the fold ----
   The CTA block was a fixed pixel stack (~479px) while the card was a fixed
   550px, so on shorter laptops the card fell entirely below the fold.
   Type and rhythm now scale with the viewport so the card always peeks. */
.BannerSec{padding-top:2rem !important}
.BannerSec h1.large{
    font-size:clamp(1.9rem,3.4vw,3rem);
    line-height:1.12;
    text-wrap:balance;
    max-width:22ch;
    margin:0 auto .75rem !important;
}
.BannerSec p{font-size:clamp(15px,1.15vw,18px);line-height:1.5;text-wrap:balance}
.BannerSec .text-center>.mb-4{margin-bottom:1rem !important}
.BannerSec .VideoBox{margin-top:2.25rem !important;height:clamp(300px,46vh,550px)}

/* shorter laptops: tighten the rhythm further */
@media (max-height:820px){
    .BannerSec{padding-top:1.25rem !important}
    .BannerSec .VideoBox{margin-top:1.25rem !important}
}
@media (max-height:720px){
    .BannerSec h1.large{font-size:clamp(1.7rem,2.8vw,2.4rem)}
}

/* ---- Course Categories grid (SAM 2026-08-01) ----
   1. 7 cards in a 3-col grid left an orphan stranded at the left of the final
      row; centring makes an uneven last row read as intentional.
   2. .RegisterNow is pulled up 82px by design, but nothing above reserved room
      for it, so the last card was drawn over the navy band. The padding gives
      the band its overlap without a card intersecting it.
   Scoped by the col-md-4 child so the Why Choose Us grid (col-md-3) is untouched. */
.row:has(> .col-md-4 > .ProBlock){justify-content:center;padding-bottom:96px}
@media (max-width:991px){
    .row:has(> .col-md-4 > .ProBlock){padding-bottom:74px}
}

/* ---- Course Categories card polish (SAM 2026-08-01) ----
   Scoped via `.col-md-4 >` so the Why Choose Us grid (col-md-3) is untouched,
   and to out-specify the unscoped `.ProBlock img{height:85px;width:85px}`
   that was written for that grid's flat icons. */
.col-md-4>.ProBlock{box-shadow:0 1px 3px rgb(var(--blackrgb)/0.08);transition:transform .18s ease,box-shadow .18s ease}
.col-md-4>.ProBlock:hover{transform:translateY(-3px)}
.col-md-4>.ProBlock .card-header{padding:0;background:none;border:0}
.col-md-4>.ProBlock .card-header img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:6px}
.col-md-4>.ProBlock .card-body{display:flex;flex-direction:column;flex:1 1 auto;padding:0}
.col-md-4>.ProBlock .card-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:16px}
.col-md-4>.ProBlock .card-body .btn{margin-top:auto;width:100%;justify-content:center}
.col-md-4>.ProBlock:hover .card-header img{filter:none}

/* Course Categories: more air between the copy and the button bar */
.col-md-4>.ProBlock .card-body p{margin-bottom:26px}
.col-md-4>.ProBlock .card-body h3{margin-bottom:12px}

/* Course Categories: one consistent inset for all card copy.
   Image goes full-bleed to the card edge; title, description and button
   share a single 20px left edge so nothing sits on the border line. */
.col-md-4>.ProBlock{padding:0;gap:0;overflow:hidden}
.col-md-4>.ProBlock .card-header img{border-radius:0}
.col-md-4>.ProBlock .card-body{padding:18px 20px 20px;text-align:left}
.col-md-4>.ProBlock .card-body h3{margin-bottom:10px}
.col-md-4>.ProBlock .card-body p{margin-bottom:22px}

/* RegisterNow promo band: photo becomes a background layer so the copy,
   not the image, defines the height. Overlay eased so the photo shows. */
.RegisterNow{position:relative;overflow:hidden;display:flex;align-items:center}
.RegisterNow picture{position:absolute;inset:0;z-index:0}
.RegisterNow .bg-img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.RegisterNow:after{z-index:1;background:linear-gradient(90deg,rgb(var(--thmrgb)/0.94) 30%,rgb(var(--thmrgb)/0.62))}
.RegisterNow .container.mt-5{position:relative;z-index:2;margin-top:0;padding-top:44px;padding-bottom:44px}
.RegisterNow .container p:last-child{margin-bottom:0}
@media (max-width:767px){.RegisterNow .container.mt-5{padding-top:32px;padding-bottom:32px}}

/* RegisterNow is a ribbon, not a full section: drop the global 110px padding */
.RegisterNow{padding:0}
.RegisterNow .container.mt-5{padding-top:40px;padding-bottom:40px}
@media (max-width:767px){.RegisterNow .container.mt-5{padding-top:28px;padding-bottom:28px}}

/* RegisterNow ribbon: premium composition */
.RegisterNow{border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.RegisterNow .text-white div:first-child:before{content:"ONTARIO LICENSED \00B7 FULLY ONLINE";display:block;font-size:11px;letter-spacing:.16em;color:#C9A227;margin-bottom:10px}
.RegisterNow .text-white h3{font-size:21px;line-height:1.35;font-weight:400;margin:0}
.RegisterNow .h1.fw-bold{font-size:46px;line-height:1;margin-top:16px;margin-bottom:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.RegisterNow .h1.fw-bold del{font-size:19px;font-weight:400;color:rgba(255,255,255,.5)}
.RegisterNow .row.justify-content-between{justify-content:flex-start;gap:56px}
.RegisterNow .row.justify-content-between .col-md-3{flex:0 0 auto;width:auto;text-align:left}
.RegisterNow .btn{padding:13px 30px}

/* RegisterNow: fix eyebrow spacing and actually cluster the button with the price */
.RegisterNow .text-white div:first-child:before{content:"ONTARIO LICENSED \00B7\0020 FULLY ONLINE"}
.RegisterNow .row.justify-content-between .col-lg-7{flex:0 1 auto;width:auto;max-width:640px}
.RegisterNow .row.justify-content-between{align-items:flex-end}
.RegisterNow .row.justify-content-between .col-md-3{padding-bottom:6px}

/* RegisterNow: price + CTA now share one column (see RegisterCta in Index.jsx) */
.RegisterNow .row.justify-content-between{align-items:center;justify-content:space-between;gap:32px}
.RegisterNow .row.justify-content-between .col-lg-7{flex:1 1 auto;width:auto;max-width:none}
.RegisterNow .RegisterCta{display:flex;flex-direction:column;align-items:flex-end;text-align:right;flex:0 0 auto;width:auto}
.RegisterNow .RegisterCta .h1.fw-bold{justify-content:flex-end;align-items:center;margin-top:0}
.RegisterNow .SavePill{background:#C9A227;color:#2A1F02;font-size:11px;letter-spacing:.06em;padding:5px 12px;border-radius:99px;line-height:1}
.RegisterNow .RegisterCta .btn{margin-top:16px}

/* RegisterNow: deterministic ribbon layout, eyebrow on the left column only */
.RegisterNow .text-white div:first-child:before{content:none}
.RegisterNow .col-lg-7 div:first-child:before{content:"ONTARIO LICENSED \00B7\0020 FULLY ONLINE";display:block;font-size:11px;letter-spacing:.16em;color:#C9A227;margin-bottom:10px}
.RegisterNow .container .row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:48px;margin:0}
.RegisterNow .container .row .col-lg-7{flex:1 1 auto;width:auto;max-width:none;padding:0}
.RegisterNow .container .row .RegisterCta{flex:0 0 auto;width:auto;padding:0;align-items:flex-end}
.RegisterNow .RegisterCta .h1.fw-bold{margin:0}
.RegisterNow .RegisterCta .btn{margin-top:18px}
@media (max-width:767px){
.RegisterNow .container .row{flex-wrap:wrap;gap:24px}
.RegisterNow .container .row .RegisterCta{align-items:flex-start}
}

/* RegisterNow: button inline with the price cluster */
.RegisterNow .container .row .RegisterCta{flex-direction:row;align-items:center;gap:24px}
.RegisterNow .RegisterCta .btn{margin-top:0}

/* Licensing Process: vertical timeline */
.ProcessTimeline{max-width:820px;margin:0 auto;padding:6px 0}
.ProcessStep{display:flex;gap:20px}
.ProcessMarker{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}
.ProcessNum{width:36px;height:36px;border-radius:50%;background:var(--thm);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:0 0 auto}
.ProcessLine{flex:1 1 auto;width:1px;background:rgb(var(--blackrgb)/0.15);margin:8px 0}
.ProcessStep:last-child .ProcessLine{display:none}
.ProcessContent{flex:1 1 auto;padding-bottom:30px}
.ProcessStep:last-child .ProcessContent{padding-bottom:0}
.ProcessContent h3{font-size:17px;line-height:1.35;margin:7px 0 8px}
.ProcessBody{font-size:14px;line-height:1.65;color:rgb(var(--blackrgb)/0.72)}
.ProcessBody p:last-child{margin-bottom:0}
.ProcessBody ul{margin:8px 0 0;padding-left:18px}
.ProcessContent .btn{margin-top:14px}
@media (max-width:575px){
.ProcessStep{gap:14px}
.ProcessNum{width:30px;height:30px;font-size:12px}
}

/* Licensing Process: tinted band so it separates from the white section below */
.Sec3.Home.MyCarouselSec{background:#F5F8FA}
.Sec3.Home.MyCarouselSec .ProcessTimeline{background:var(--white);border-radius:12px;padding:34px 38px;box-shadow:0 1px 3px rgb(var(--blackrgb)/0.06)}
@media (max-width:575px){
.Sec3.Home.MyCarouselSec .ProcessTimeline{padding:24px 20px}
}

/* Licensing Process: motion on the step markers */
.ProcessNum{transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.ProcessLine{transition:background .35s ease}
.ProcessStep:hover .ProcessNum{transform:scale(1.12);background:#C9A227;color:#2A1F02;box-shadow:0 0 0 6px rgb(201 162 39 / 0.14)}
.ProcessStep:hover .ProcessLine{background:rgb(201 162 39 / 0.45)}
.ProcessStep:hover h3{color:var(--thm)}
.ProcessContent h3{transition:color .25s ease}
@media (prefers-reduced-motion:reduce){
.ProcessNum,.ProcessLine,.ProcessContent h3{transition:none}
.ProcessStep:hover .ProcessNum{transform:none}
}


/* Why Choose Us: normalise icons, checkmarks instead of arrows, add weight */
.ChooseUs .ProBlock{box-shadow:0 1px 3px rgb(var(--blackrgb)/0.06);transition:transform .2s ease,box-shadow .2s ease}
.ChooseUs .ProBlock:hover{transform:translateY(-3px)}
.ChooseUs .ProBlock img{height:58px;width:auto;max-width:76px;object-fit:contain;margin:0 auto}
.ChooseUs .ProBlock ul{margin-top:6px}
.ChooseUs .ProBlock ul li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.ChooseUs .ProBlock ul li:before{content:"";background:none;min-width:13px;width:13px;height:7px;border-left:2px solid var(--thm);border-bottom:2px solid var(--thm);transform:rotate(-45deg);margin-top:6px;flex:0 0 auto}

@media (max-width:991px){
}


/* Footer newsletter input: lift it off the navy */
footer.ts input[type=email],footer.ts input[type=text]{background:rgb(255 255 255 / 0.07);border:1px solid rgb(255 255 255 / 0.18);color:var(--white)}
footer.ts input::placeholder{color:rgb(255 255 255 / 0.55)}
footer.ts input:focus{background:rgb(255 255 255 / 0.11);border-color:rgb(255 255 255 / 0.35);outline:none}

/* Dropdown items: the existing hover rule is scoped inside .LastH so it never
   matched the Training megamenu. This one applies to every dropdown. */
.dropdown-toggle~.dropdown-menu .dropdown-item{transition:background .18s ease,padding-left .18s ease}
.dropdown-toggle~.dropdown-menu .dropdown-item:hover{background:rgb(var(--thmrgb)/0.07);padding-left:22px}

/* Training megamenu: contain the panel and give the items a hover state.
   .AllMenu uses column-count:2, so the panel was sizing to the widest course
   title doubled. Its `gap` did nothing — multi-column needs column-gap. */
.dropdown-menu.Megamenu{width:max-content;max-width:660px}
.Megamenu .AllMenu{column-count:2;column-gap:26px;padding:14px 16px}
.Megamenu .AllMenu li{break-inside:avoid;border-bottom:none}
.Megamenu .AllMenu .nav-link{display:block;padding:8px 12px;border-radius:6px;transition:background .18s ease,padding-left .18s ease}
.Megamenu .AllMenu .nav-link:hover{background:rgb(var(--thmrgb)/0.07);padding-left:18px}
@media (max-width:991px){
.dropdown-menu.Megamenu{width:auto;max-width:none}
.Megamenu .AllMenu{column-count:1;padding:0}
}

/* Skeletons stay invisible for 250ms. If data arrives first the loader unmounts
   before it was ever painted, so no flash. Slow requests still show it. */
@keyframes skelIn{from{opacity:0}to{opacity:1}}
.SkelFade{opacity:0;animation:skelIn .3s ease .25s forwards}

/* Real sections fade in as they replace their skeleton */
@keyframes sectionIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.BannerSec,.Sec1.Home,.Sec3.Home,.ChooseUs,.RegisterNow,.Course{animation:sectionIn .45s ease both}

@media (prefers-reduced-motion:reduce){
.SkelFade{animation:skelIn .01s linear .25s forwards}
.BannerSec,.Sec1.Home,.Sec3.Home,.ChooseUs,.RegisterNow,.Course{animation:none}
}

/* One consistent vertical scale. Replaces the global 110/70/50 and the ad-hoc
   per-section patches, so every gap between sections is the same. */
body section{padding:80px 0}
@media only screen and (max-width:767px){body section{padding:56px 0}}
@media only screen and (max-width:575px){body section{padding:44px 0}}
body section.RegisterNow{padding:0}

/* P1 - mobile viewport stability. On iOS Safari and Android Chrome the URL bar
   hides on scroll, so vh changes and the hero resizes mid-scroll. dvh tracks the
   real viewport. Wrapped in @supports so older browsers keep the vh version. */
@supports (height:1dvh){
.BannerSec .VideoBox{height:clamp(300px,46dvh,550px)}
.BannerSec{background:linear-gradient(180deg,var(--thm) 80dvh,var(--white) 80dvh)}
}

/* P4b - repair a malformed query: ")and" without a space is invalid CSS, so this
   block never applied. Both conditions collapse to max-width 450px anyway. */
@media (max-width:450px){.nav-tabs .nav-link img{height:18px;width:18px}}

/* Mobile: the RegisterCta row rule was appended after the earlier mobile
   override, so it won at every width and forced price + pill + button inline
   on a ~345px screen. Restore the stack. */
@media (max-width:767px){
.RegisterNow .container .row .RegisterCta{flex-direction:column;align-items:flex-start;gap:16px}
}

/* Mobile: course cards sit two-up at col-6, roughly 165px wide on a 375px
   phone. The desktop padding and type were never scaled for that. */
@media (max-width:575px){
.RegisterNow .container .row .RegisterCta{gap:14px}
.RegisterNow .RegisterCta .h1.fw-bold{font-size:34px}
.col-md-4 .ProBlock .card-body{padding:12px 12px 14px}
.col-md-4 .ProBlock .card-body h3{font-size:14px;line-height:1.32}
.col-md-4 .ProBlock .card-body p{font-size:12px;margin-bottom:12px}
.col-md-4 .ProBlock .card-body .btn{font-size:12px;padding:8px 10px}
}

/* Student sidebar: the offcanvas is a flex column with height:100% and
   space-between but no overflow, so when the menu is taller than the screen the
   bottom section (Help & FAQs, Log Out) becomes unreachable. */
.LeftP .offcanvas{overflow-y:auto;overscroll-behavior:contain}
.LeftP .offcanvas .navbar-nav{flex:0 0 auto}
.LeftP .bottom{flex:0 0 auto}

/* Hero: restore breathing room under the header. The 2rem override above was set
   when compressing the fold and left the headline sitting on the menu. */
.BannerSec{padding-top:clamp(2.75rem,6vh,5rem) !important}
@media (max-height:820px){.BannerSec{padding-top:clamp(2rem,4.5vh,3.25rem) !important}}
@media (max-width:767px){.BannerSec{padding-top:2rem !important}}

/* Hero: the card and the navy/white split now derive from ONE value, so the card
   always straddles the boundary exactly at its centre whatever the viewport.
   Previously the card was clamped independently of the fixed 80dvh split, so
   where it sat in the band varied with window height. */
.BannerSec{
    --heroCard:clamp(300px,46dvh,550px);
    --heroPadB:28px;
    padding-bottom:var(--heroPadB) !important;
    background:linear-gradient(180deg,
        var(--thm) calc(100% - var(--heroPadB) - (var(--heroCard) / 2)),
        var(--white) calc(100% - var(--heroPadB) - (var(--heroCard) / 2))) !important;
}
.BannerSec .VideoBox{height:var(--heroCard) !important}
@media (max-width:767px){
    .BannerSec{--heroPadB:32px}
}

/* Facility band: the section gradient split at 70% of the VIEWPORT while the
   columns split at 58.3% of the CONTAINER, so the navy panel's content began
   before its background did — and the two could only ever align at one window
   width. The navy now sits on the column itself and bleeds to the right edge. */
section.SecurityInfo{background:rgb(var(--thmrgb)/0.1)}
section.SecurityInfo .col-lg-5{background:var(--thm);position:relative}
@media (min-width:992px){
    section.SecurityInfo .col-lg-5:before{content:"";position:absolute;top:0;bottom:0;left:100%;width:50vw;background:var(--thm)}
}

/* Decorative arrow: absolutely positioned at the section's left edge while the
   cards sit in a centred container, so it overlaps them whenever the side margin
   is narrower than its 350px. Now sized to the margin that actually exists, and
   hidden below 1200px where there is none. */
section.Sec1{overflow:hidden}
section.Sec1>img{width:calc((100vw - min(1320px, 100vw - 3rem)) / 2);max-width:350px}
@media (max-width:1199px){section.Sec1>img{display:none}}

/* Mobile menu: `nav.menu .st .container>div .LastH ul>li>a` sets white with
   !important OUTSIDE any media query, so at mobile widths the items sat white on
   Bootstrap's white offcanvas panel. An earlier fix used a weaker selector and
   lost. This matches the theme's specificity and loads later, so it wins. */
@media (max-width:991px){
    /* Panel body white; the .MenuLogo strip stays navy because the theme
       sets background:var(--thm) on it. Every colour below reuses the
       theme's OWN selector so it matches or exceeds specificity and wins
       on load order. The rule that defeated earlier attempts was
       .LastH .dropdown-toggle at (0,5,2), which outranks .LastH ul>li>a
       at (0,4,5) -- class count is compared before element count. */
    nav.menu .st .container>div .LastH>.offcanvas{background:var(--white)}
    nav.menu .st .container>div .LastH>.offcanvas .dropdown-menu{background:var(--white)}
    nav.menu .st .container>div .LastH ul>li>a{color:var(--thm) !important}
    nav.menu .st .container>div .LastH .dropdown-toggle{color:var(--thm) !important}
    nav.menu .st .container>div .LastH .AllMenu .nav-link{color:var(--thm) !important}
    nav.menu .st .container>div .LastH .cart small{background:var(--thm) !important;color:var(--white) !important}
    nav.menu .st .container>div .LastH .MobileLogin .btn{background:var(--thm) !important;color:var(--white) !important;border-color:var(--thm) !important}
    nav.menu .st .container>div .LastH>.cart{display:none !important}
    nav.menu .st .container>div .LastH>.SearchBoxs{display:none !important}
    nav.menu .st .container>div .LastH>.btn{display:none !important}
    nav.menu .st .container>div .LastH .dropdown-toggle~.dropdown-menu.show{display:block !important;visibility:visible !important;opacity:1 !important;transform:none !important}
    /* Panel furniture. These classes are ours, so no theme rule targets
       them -- the results list uses div>a rather than ul>li>a on purpose,
       which sidesteps the .LastH ul>li>a colour and padding rules entirely. */
    nav.menu .st .container>div .LastH .MobileSearch{padding:14px 15px 4px}
    nav.menu .st .container>div .LastH .MobileSearch .form-control{height:44px;border:1px solid rgb(var(--thmrgb)/0.2);border-radius:10px;padding:0 14px 0 42px;font-size:15px;background:url(../img/search.svg) var(--white) no-repeat 14px center/18px}
    nav.menu .st .container>div .LastH .MobileSearch .form-control:focus{border-color:var(--thm);box-shadow:none;outline:none}
    nav.menu .st .container>div .LastH .MobileSearchResults{margin-top:8px;border:1px solid rgb(var(--thmrgb)/0.12);border-radius:10px;overflow:hidden;max-height:220px;overflow-y:auto}
    nav.menu .st .container>div .LastH .MobileSearchResults a{display:block;padding:11px 14px !important;font-size:14px !important;color:var(--thm) !important;border-top:1px solid rgb(var(--thmrgb)/0.08)}
    nav.menu .st .container>div .LastH .MobileSearchResults a:first-child{border-top:none}
    nav.menu .st .container>div .LastH .MobileSearchResults .empty{display:block;padding:11px 14px;font-size:14px;color:rgb(var(--blackrgb)/0.5)}
    nav.menu .st .container>div .LastH .MobileActions{margin-top:6px;padding:2px 15px 0;border-top:1px solid rgb(var(--thmrgb)/0.1)}
    nav.menu .st .container>div .LastH .MobileCart{display:flex;align-items:center;gap:12px;padding:12px 0;font-size:16px;font-weight:500;color:var(--thm) !important}
    nav.menu .st .container>div .LastH .MobileCart em{margin-left:auto;font-style:normal;background:var(--thm);color:var(--white);min-width:22px;height:22px;border-radius:11px;display:grid;place-content:center;font-size:12px;font-weight:700;padding:0 6px}
    nav.menu .st .container>div .LastH .MobileLogin{padding:4px 15px 18px}
    nav.menu .st .container>div .LastH .MobileLogin .btn{border-radius:10px}
}

/* About section: the slot is built for a landscape PHOTO. object-fit:cover with
   object-position:right crops overflow off the LEFT, which is why the client
   logo is cut. Stopgap until a real photograph is supplied. */
section.Course *>img{object-fit:contain;object-position:center}


/* Course cards: unify three mismatched image sources and add real information.
   Scoped .col-md-4> because .ProBlock img is unscoped in main.min.css, and the
   image is excluded from the theme hover invert. */
.col-md-4>.ProBlock .card-header{position:relative;overflow:hidden}
.col-md-4>.ProBlock .card-header img{filter:saturate(.7) contrast(1.03);transition:transform .5s ease,filter .5s ease}
.col-md-4>.ProBlock .card-header:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgb(var(--thmrgb)/.12) 0%,rgb(var(--thmrgb)/.55) 100%)}
.col-md-4>.ProBlock:hover .card-header img{transform:scale(1.05);filter:saturate(.9) contrast(1.03)}
.col-md-4>.ProBlock .ProTag{position:absolute;left:14px;bottom:12px;z-index:2;background:#C9A227;color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:100px}
.col-md-4>.ProBlock .ProMeta{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;padding-top:12px;border-top:1px solid rgb(var(--blackrgb)/.08)}
.col-md-4>.ProBlock .ProMeta span{font-size:13px;color:rgb(var(--blackrgb)/.45);text-decoration:line-through}
.col-md-4>.ProBlock .ProMeta strong{font-size:19px;color:var(--thm);white-space:nowrap}

/* The theme fixes .card-header at 250px while our image is aspect-ratio 16/10
   with height:auto, so the surplus header height rendered as a grey band and
   the chip anchored to it instead of the photo. Let the header hug the image. */
.col-md-4>.ProBlock .card-header{height:auto !important}
.col-md-4>.ProBlock:hover .ProTag{filter:none}

/* Course cards, premium pass 2: one elevation language (hairline, no resting
   shadow), frosted chip so gold is freed for a scarcer signal, price demoted
   out of competition with the title, CTA as a text link since the whole card
   is already a link. Arrow drawn in CSS - arr1.svg is white and has no dark variant. */
.col-md-4>.ProBlock{border:1px solid rgb(var(--blackrgb)/.10) !important;box-shadow:none !important;border-radius:6px !important;overflow:hidden}
.col-md-4>.ProBlock:hover{box-shadow:0 10px 28px rgb(var(--thmrgb)/.10) !important}
.col-md-4>.ProBlock .card-body{padding:26px 24px !important}
.col-md-4>.ProBlock .card-body h3{font-size:19px;line-height:1.3}
.col-md-4>.ProBlock .card-body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.col-md-4>.ProBlock .ProTag{background:rgb(var(--whitergb)/.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgb(var(--whitergb)/.28);color:#fff;font-weight:600;letter-spacing:.05em}
.col-md-4>.ProBlock .ProMeta{border-top:1px solid rgb(var(--blackrgb)/.08);padding-top:14px;margin:0 0 8px}
.col-md-4>.ProBlock .ProMeta strong{font-size:15px;font-weight:600;color:rgb(var(--blackrgb)/.72)}
.col-md-4>.ProBlock .card-body .btn{background:none !important;border:0 !important;padding:0 !important;width:auto !important;color:var(--thm) !important;font-weight:600;box-shadow:none !important;display:inline-flex;align-items:center}
.col-md-4>.ProBlock .card-body .btn img{display:none}
.col-md-4>.ProBlock .card-body .btn:after{content:"\2192";margin-left:7px;display:inline-block;transition:transform .3s ease}
.col-md-4>.ProBlock:hover .card-body .btn:after{transform:translateX(4px)}

/* Facility band: match the two light cards to the navy list — stack the icon
   above the title instead of beside it, same 55px icon, same 24px gap (mt-4).
   The theme sets .SecurityInfo .card{flex-direction:row} and zeroes the body
   left padding, both of which have to be undone for the column layout. */
.SecurityInfo .card{flex-direction:column !important;align-items:flex-start}
.SecurityInfo .card>*.card-header{padding:20px 20px 0 !important}
.SecurityInfo .card>*.card-body{padding:0 20px 20px !important}
.SecurityInfo .card .card-body h3{margin-top:24px}


/* Card body alignment: the theme sets display:grid + place-content:center, and
   an earlier pass here left align-self:center on the CTA from when it was a
   full-width button. Both centre things that should sit on the left edge, and
   both make .ProMeta shrink to its text so its border-top reads as a stub. */
.col-md-4>.ProBlock .card-body{align-items:stretch !important;place-content:start !important;text-align:left !important}
.col-md-4>.ProBlock .card-body .btn{align-self:flex-start !important;margin-top:auto !important}
.col-md-4>.ProBlock .ProMeta{display:block !important;width:100%;border-top:1px solid rgb(var(--blackrgb)/.08);padding-top:14px;margin:0 0 16px}
.col-md-4>.ProBlock .ProMeta:before{content:"Course fee";display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:rgb(var(--blackrgb)/.42);margin-bottom:3px}
.col-md-4>.ProBlock .ProMeta strong{font-size:17px;font-weight:700;color:var(--thm)}
.col-md-4>.ProBlock .card-body h3{margin-bottom:8px}
.col-md-4>.ProBlock .card-body p{margin-bottom:18px !important}


/* Card final polish. The earlier scrim tinted the WHOLE image (12% navy rising
   to 55%) which muddied photographs and did nothing for dark artwork; it now
   stays clear for the top 45% and only darkens where the chip needs contrast.
   Desaturation eased from .7 to .85 so photos read as photos. */
.col-md-4>.ProBlock .card-header:after{background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgb(var(--thmrgb)/.5) 100%)}
.col-md-4>.ProBlock .card-header img{filter:saturate(.85) contrast(1.03)}
.col-md-4>.ProBlock:hover .card-header img{filter:saturate(1) contrast(1.03)}
.col-md-4>.ProBlock .card-body h3{transition:color .3s ease}
.col-md-4>.ProBlock:hover .card-body h3{color:var(--thm)}
.col-md-4>.ProBlock:hover .card-body .btn{text-decoration:underline;text-underline-offset:4px}
.col-md-4>.ProBlock .card-body{padding-bottom:20px !important}


/* Facility band, left pair: match the navy pair on the right. Those are flat
   items with a hairline divider, not cards - so strip the white box, shadow,
   radius and hover lift, and use the same divider treatment in dark. */
.SecurityInfo .card{background:none !important;box-shadow:none !important;border:none !important;border-radius:0 !important}
.SecurityInfo .card:hover{box-shadow:none !important}
.SecurityInfo .row>div:first-child .card{border-right:1px solid rgb(var(--blackrgb)/.12) !important}
.SecurityInfo .card>*.card-header{padding:20px 20px 0 !important}
.SecurityInfo .card>*.card-body{padding:0 20px 20px !important}


/* Facility band: whole section navy so all four items match. The left pair
   were dark line-art icons on light, so they invert to white; the divider
   flips from a dark hairline to a light one. */
.SecurityInfo{background:var(--thm) !important}
.SecurityInfo .MyCarouselSec,.SecurityInfo .MyCarouselSec>div{background:none !important}
.SecurityInfo .card h3,.SecurityInfo .card h3 a{color:var(--white) !important}
.SecurityInfo .card img{filter:brightness(0) invert(1)}
.SecurityInfo .row>div:first-child .card{border-right:1px solid rgb(var(--whitergb)/.15) !important}


/* Header user chip: initials instead of a washed-out placeholder avatar.
   Never fails to load, needs nothing from the user, and reads as deliberate. */
.UserMono{width:34px;height:34px;flex:0 0 34px;background:rgb(var(--whitergb)/.12) !important;border:1px solid rgb(var(--whitergb)/.18);color:var(--white);font-size:12.5px;font-weight:700;letter-spacing:.04em;overflow:hidden}
.UserMono img{width:34px;height:34px;object-fit:cover;border-radius:50%}
.LastH .dropdown-toggle .UserMono{color:var(--white) !important}


/* Account chip name: was set at nav-link size, so it read as another nav item
   rather than a status indicator. Smaller and lighter lets the monogram balance it. */
.LastH .dropdown-toggle .UserMono+span{font-size:14px !important;font-weight:500 !important;letter-spacing:0}


/* Course description sits in .CmsPage, so it inherited the drop-cap meant for
   About and Terms - rendering a giant "t" then "esting123..." as body text.
   Cancelled here only; genuine CMS pages keep the flourish. */
.CourseDesc p:first-child::first-letter{initial-letter:normal;-webkit-initial-letter:normal;font-size:inherit;font-weight:inherit;margin-right:0;color:inherit}

/* Moneris Checkout mounts an iframe with inline height:100%, so it collapses
   to the gateway default (150px) unless the host container has a height.
   Set here, not inline, so it can be retuned without a Vite rebuild. */
.moneris-box{min-height:1500px}
.moneris-box iframe{width:100%;height:100%;min-height:1500px;border:0}
@media (max-width:575.98px){.moneris-box,.moneris-box iframe{min-height:1700px}}

/* Student course cards. account.min.css sets .CourseList .card to
   grid-template-rows:220px .5fr with object-fit:contain on the image, so any
   source whose ratio did not match the box letter-boxed into white and cards
   ran to 386px. Shorter track plus cover: uniform and edge to edge. Sources
   are 500px wide, so a 150px-tall crop is not an upscale. */
.CourseList .card{grid-template-rows:120px .5fr}
.CourseList .card-header img{object-fit:cover;object-position:center 40%}
/* Titles run to one or two lines, which made cards in the same row unequal.
   Reserve two lines and clamp so every card is the same height. */
.CourseList .card-body h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;margin-bottom:.35rem}
@media (max-width:767.98px){.CourseList .card{grid-template-rows:105px .5fr}}

/* Base section padding was 110px top AND bottom, so adjacent sections stacked
   to 220px of empty space. Tightened to a consistent rhythm. RegisterNow
   (a ribbon), SecurityInfo (split background) and BannerSec (hero, tuned
   above) keep their own spacing and are excluded. */
section:not(.RegisterNow):not(.SecurityInfo):not(.BannerSec){padding-top:70px;padding-bottom:70px}
section.Home:not(.BannerSec){padding-top:70px;padding-bottom:70px}
@media (max-width:991px){section:not(.RegisterNow):not(.SecurityInfo):not(.BannerSec),section.Home:not(.BannerSec){padding-top:50px;padding-bottom:50px}}
@media (max-width:767px){section:not(.RegisterNow):not(.SecurityInfo):not(.BannerSec),section.Home:not(.BannerSec){padding-top:40px;padding-bottom:40px}}

/* logo-mobile-swap: main.min.css caps .logom at max-width:120px and sets
   .navbar-brand img{width:100%}, so the container hugged its two children and
   widening it stretched the logo. Release the cap, fix the logo width, then
   order brand first and toggler last. */
@media (max-width:991px){
  .navbar.menu .st .container>div{width:100%}
  .navbar.menu .st .container>div .col.logom{max-width:none;width:auto;flex:1 1 100%;justify-content:space-between}
  .navbar.menu .st .container>div .col.LastH{flex:0 0 auto;max-width:none}
  .navbar.menu .st .container>div .col.logom .navbar-brand{order:-1;width:auto;max-width:none;flex:0 0 auto}
  .navbar.menu .st .container>div .col.logom .navbar-brand img{width:110px}
  .navbar.menu .st .container>div .col.logom .navbar-toggler{margin-right:0;margin-left:auto}
  .navbar.menu .st .container>div .col.logom .navbar-toggler.MenuIcon svg{height:30px;width:30px}
}


/* Cart must stay reachable in the mobile header bar, not only inside the
   slide-out panel. Search and the login button stay hidden there. */
@media (max-width:991px){
  nav.menu .st .container>div .LastH>.cart{display:inline-flex !important;align-items:center;position:relative;margin-right:14px;order:-1}
  nav.menu .st .container>div .LastH>.cart img{width:28px;height:28px}
  nav.menu .st .container>div .LastH>.cart small{position:absolute;top:-6px;right:-8px;min-width:17px;height:17px;line-height:17px;font-size:10px;text-align:center;border-radius:50%;padding:0 4px}
  nav.menu .st .container>div .LastH>.cart small:empty,
  nav.menu .st .container>div .LastH>.cart small.MobileCartHeader-zero{display:none}
  /* One line in the mobile header: the greeting stacks under the avatar and
     makes that column taller than the icons beside it. */
  nav.menu .st .container>div .LastH .dropdown-toggle .UserMono+span{display:none}
  nav.menu .st .container>div .LastH .UserMono{width:30px;height:30px;flex:0 0 30px}
  nav.menu .st .container>div .LastH .UserMono img{width:30px;height:30px}
}


/* Account header, mobile (account header pass).
   .RightP paints navy for its first 50px, which lands correctly at desktop
   widths. Below 992px the sidebar stacks above it, so the logo sits on its
   own white band and the navy starts underneath, reading as detached.
   The page title also repeats the breadcrumb word for word. */
@media (max-width:767px){
  .RightP{background:var(--white)}
  .RightP>.container:first-child{background:var(--thm);max-width:none}
  .RightP .breadcrumb{background:none;margin:0;padding:10px 0 8px}
  .RightP .breadcrumb .breadcrumb-item a{color:rgb(var(--whitergb)/.85)}
  .RightP .breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:rgb(var(--whitergb)/.5)}
  .RightP .breadcrumb img{filter:brightness(0) invert(1);opacity:.85}
  .RightP .position-sticky.Top h1{display:none}
  .LeftP{padding:0}
}


/* Sign-up and login form (signup form pass). The select chevron sat over the
   label text on the narrow date-of-birth selects, and the terms checkbox was
   not aligned to its label baseline. */
.ConMain .form-select{padding-right:1.9rem;background-position:right .55rem center}
/* The theme pins EVERY .input-group-text to left:0 at 45px wide, so a second
   one (the +1 prefix) lands on top of the icon. Move it clear and pad the
   input across. */
.Contact .ConMain form .input-group .input-group-text.CcodePrefix{left:45px;width:auto;padding:0 2px 0 0;justify-items:start}
.Contact .ConMain form .input-group .input-group-text.CcodePrefix~.form-control{padding-left:74px}
.ConMain .form-check{display:flex;align-items:center;gap:.55rem;padding-left:0}
.ConMain .form-check .form-check-input{margin:0;flex:0 0 auto}
.ConMain .form-check .form-check-label{margin:0}


/* Logo flash on lazy routes (logo flash): course.min.css and account.min.css
   are imported inside route chunks, so until the chunk resolves the img
   width attribute (300) applies and the logo fills the page. These load with
   the shell and constrain it from first paint. */
.col.Hlogo{max-width:65px}
.col.Hlogo .navbar-brand img{width:100%;height:auto}
.LeftP .logom .navbar-brand,.LeftP .MenuLogo .navbar-brand{max-width:80px}
.LeftP .logom .navbar-brand img,.LeftP .MenuLogo .navbar-brand img{width:100%;height:auto}

/* svg flash: the header icons are inline SVGs with no width/height attribute,
   so until the route chunk CSS loads they expand to fill the header. */
.CoursePage .col.Hlast svg,.CoursePage .col.Hlogo svg{width:18px;height:auto;flex:0 0 auto}