/*=========================================================
    JHS Brand Layer - "Finland Education Hub" palette
    Loaded after style.css so it re-skins the whole site.
=========================================================*/

:root {
    /* Logo gradient stops */
    --fin-green: #00E39A;
    --fin-mint: #12D8B0;
    --fin-teal: #00C2C7;
    --fin-blue: #1E9BE0;

    /* Usable solids */
    --fin-primary: #00A88C;
    --fin-primary-deep: #00806E;
    --fin-blue-deep: #0F79BC;
    --fin-ink: #0B2A2E;
    --fin-body: #5A6B6E;

    /* Pastels & hairlines */
    --fin-pastel-mint: #EAFBF5;
    --fin-pastel-sky: #E9F5FD;
    --fin-pastel-soft: #F4FCF9;
    --fin-line: #DCEDE9;

    --fin-gradient: linear-gradient(105deg, #00E39A 0%, #00C2C7 52%, #1E9BE0 100%);
    --fin-gradient-deep: linear-gradient(105deg, #00A88C 0%, #009DAE 52%, #0F79BC 100%);

    /* Heading accent - the highlighted phrase inside a section title.
       4.4:1 on white, so it clears AA at heading sizes. */
    --accent-color: #0F8A4C;
    --accent-on-dark: #FFB539;
}

/* NOTE: the site-wide token takeover was intentionally REMOVED.
   The original brand blue (--theme-color / --title-color) owns the body of
   the site: buttons, box hovers, accents. The Finnish palette above is used
   ONLY in the header (see header.css) until specific spots are requested.
   Do not re-add a global :root override here. */

/* ---------------------------------------------------------
   1. Banner / hero - dim the LAYER, not the text
--------------------------------------------------------- */
.th-hero-wrapper .hero-title,
.th-hero-wrapper .hero-text,
.th-hero-wrapper .sub-title,
.breadcumb-title,
.breadcumb-menu li,
.breadcumb-menu a,
.breadcumb-menu span {
    text-shadow: none !important;
}

/* Slider hero: one calm brand-tinted scrim over the photograph */
.hero-1 .th-hero-bg::before {
    background: linear-gradient(100deg, rgba(6, 32, 38, .68) 0%, rgba(6, 32, 38, .52) 45%, rgba(8, 48, 72, .30) 100%) !important;
}

.hero-1 .th-hero-bg img,
.th-hero-wrapper .th-hero-bg img {
    opacity: .88;
}

/* Inner-page breadcrumb banners */
.breadcumb-wrapper {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Nordi CTAs carry no href, so the anchor styling has to be restored manually. */
a[data-nordi-journey]:not([href]) {
    cursor: pointer;
}

.breadcumb-wrapper::before {
    background: linear-gradient(100deg, rgba(6, 32, 38, .70) 0%, rgba(8, 48, 72, .48) 100%) !important;
}

/* Curriculum pages use a restrained academic context bar rather than image heroes. */
.jhs-curriculum-crumb {
    min-height: 0;
    padding: 44px 0 38px;
    background: #f7f9fc;
    border-bottom: 1px solid #dfe7f3;
}
.jhs-curriculum-crumb::before { display: none; }
.jhs-curriculum-crumb .breadcumb-content { text-align: left; }
.jhs-curriculum-crumb-kicker {
    display: block;
    margin-bottom: 8px;
    color: #8a6a00;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.jhs-curriculum-crumb .breadcumb-title {
    margin: 0 0 10px;
    color: #001c54;
    font-size: clamp(2rem, 1.6rem + 1vw, 2.8rem);
    line-height: 1.15;
}
.jhs-curriculum-crumb .breadcumb-menu { justify-content: flex-start; }
.jhs-curriculum-crumb .breadcumb-menu li,
.jhs-curriculum-crumb .breadcumb-menu a { color: #62708a; }
.jhs-curriculum-crumb .breadcumb-menu a:hover { color: #001c54; }
@media (max-width: 575px) {
    .jhs-curriculum-crumb { padding: 34px 0 30px; }
    .jhs-curriculum-crumb .breadcumb-menu { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 767px) {
    .hero-1 .th-hero-bg::before {
        background: linear-gradient(100deg, rgba(6, 32, 38, .78) 0%, rgba(6, 32, 38, .62) 45%, rgba(8, 48, 72, .44) 100%) !important;
    }

    .breadcumb-wrapper::before {
        background: rgba(6, 32, 38, .72) !important;
    }

    /* The banner ate ~40% of a phone screen before the content started. */
    .breadcumb-wrapper {
        padding-top: 54px !important;
        padding-bottom: 46px !important;
    }

    .breadcumb-wrapper .breadcumb-title {
        font-size: 30px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }

    .breadcumb-wrapper .breadcumb-menu li,
    .breadcumb-wrapper .breadcumb-menu a,
    .breadcumb-wrapper .breadcumb-menu span {
        font-size: 13.5px !important;
    }
}

@media (max-width: 400px) {
    .breadcumb-wrapper {
        padding-top: 44px !important;
        padding-bottom: 38px !important;
    }

    .breadcumb-wrapper .breadcumb-title {
        font-size: 26px !important;
    }
}

/* ---------------------------------------------------------
   3. Section headings - accent phrase
   Markup:  <h2 class="sec-title">One Jain Heritage School,
                <span class="title-accent">Three Campuses</span></h2>

   COLOUR ONLY. Section titles carry .text-anime-style-2/-3, which run
   through GSAP SplitText and re-wrap every character in a transformed
   span - background-clip:text, borders and underlines would be shredded.
--------------------------------------------------------- */
.title-accent {
    color: var(--accent-color);
    font-weight: inherit;
    white-space: inherit;
}

/* On dark panels the green loses contrast; the brand yellow carries it. */
.text-white .title-accent,
.title-accent.on-dark,
[class*="bg-title"] .title-accent,
[class*="bg-theme"] .title-accent,
[class*="bg-dark"] .title-accent {
    color: var(--accent-on-dark);
}

/* ---------------------------------------------------------
   4. Buttons - tighter footprint, livelier hover
   The template ships .th-btn at 16px/19px-40px (~58px tall), which reads
   oversized next to the new header. Everything below only re-times and
   re-scales the existing .th-btn machinery - no colours are changed.
--------------------------------------------------------- */
.th-btn {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    padding: 14px 30px;
    border-radius: 8px;
    gap: 9px;
    transition: color .3s ease,
                background-color .3s ease,
                border-color .3s ease,
                transform .35s cubic-bezier(.2, .8, .25, 1),
                box-shadow .35s ease;
}

/* the sweeping fill that already exists - just faster and better eased */
.th-btn:before {
    border-radius: inherit;
    transition: width .45s cubic-bezier(.65, 0, .35, 1);
}

.th-btn:hover,
.th-btn.active {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(26, 38, 83, .22);
}

.th-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(26, 38, 83, .18);
    transition-duration: .1s;
}

/* keyboard users get a visible ring - the hover lift alone is not enough */
.th-btn:focus-visible {
    outline: 3px solid var(--yellow-color);
    outline-offset: 3px;
}

/* trailing icons drift forward; .th-icon has its own rotate, leave it alone */
.th-btn i,
.th-btn svg {
    transition: transform .35s cubic-bezier(.2, .8, .25, 1);
}

.th-btn:not(.th-icon):hover i,
.th-btn:not(.th-icon):hover svg {
    transform: translateX(4px);
}

/* size variants, re-proportioned to the new base */
.th-btn.style4 {
    padding: 13px 26px;
}

.th-btn.btn-fw {
    padding: 15px 30px;
}

.th-btn.btn-2 {
    padding: 12px 24px;
}

.th-btn.th-radius,
.th-btn.style3 {
    border-radius: 50px;
}

.title-area .th-btn {
    margin-top: 16px;
}

@media (max-width: 575px) {
    .th-btn {
        font-size: 14px;
        padding: 12px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .th-btn,
    .th-btn:before,
    .th-btn i,
    .th-btn svg {
        transition-duration: .01ms;
    }

    .th-btn:hover,
    .th-btn.active,
    .th-btn:active,
    .th-btn:not(.th-icon):hover i,
    .th-btn:not(.th-icon):hover svg {
        transform: none;
    }
}

/* ---------------------------------------------------------
   5. Overlap fixes
--------------------------------------------------------- */

/* The white feature card deliberately rides up over the section above it.
   At <=1199px the template pulls it up 130px, which swallowed the preceding
   "Learn More" button whole. */
@media (max-width: 1199px) {
    .featured-wrapp-3 {
        margin-top: 0;
        padding: 32px 24px;
        border-radius: 32px;
    }

    .featured-area {
        padding-top: 20px;
    }
}

/* Homepage learning features: concise text-first statements. */
#feature-area .featured-wrapp-3 {
    max-width: 1280px;
    margin: -44px auto 0;
    padding: 20px;
    border: 1px solid #dfe7f3;
    border-bottom: 3px solid #fec001;
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(0, 28, 84, .08);
}
#feature-area .featured-wrapp-3 .row { --bs-gutter-y: 0; }
#feature-area .featured-wrapp-3 .feature-item {
    display: block !important;
    min-height: 132px;
    padding: 22px 24px;
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: left !important;
}
#feature-area .featured-wrapp-3 .col-xl-4 + .col-xl-4 .feature-item {
    border-left-color: #dfe7f3;
}
#feature-area .featured-wrapp-3 .feature-item:hover {
    border-color: #dfe7f3;
    background: #f8faff;
}
#feature-area .featured-wrapp-3 .media-body { min-width: 0; }
#feature-area .featured-wrapp-3 .feature-item .box-title {
    margin: 0 0 9px;
    color: #001c54;
    font-size: 19px;
    line-height: 1.25;
}
#feature-area .featured-wrapp-3 .feature-item_text {
    margin: 0;
    color: #5e6b82;
    font-size: 15px;
    line-height: 1.55;
}
@media (max-width: 1199px) {
    #feature-area .featured-wrapp-3 { margin-top: 0; padding: 14px; border-radius: 12px; }
    #feature-area .featured-wrapp-3 .col-xl-4 + .col-xl-4 .feature-item { border-left-color: transparent; }
}
@media (max-width: 575px) {
    #feature-area .featured-wrapp-3 .feature-item { min-height: 0; padding: 16px 8px; }
    #feature-area .featured-wrapp-3 .feature-item .box-title { font-size: 17px; }
    #feature-area .featured-wrapp-3 .feature-item_text { font-size: 14px; }
}

/* The decorative ring is painted over the counter it decorates, so it ate
   every hover and click on the number underneath. */
.counter-card .counter-shape,
.counter-item .counter-shape,
.counter-card .counter-shape span {
    pointer-events: none;
}

/* ---------------------------------------------------------
   6. Stat badge - "1000 + Students Empowered"
   The stock 30px solid star next to 40px type read as clip-art.
--------------------------------------------------------- */
.about-image9 .cilent-box .review {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--title-color);
}

.about-image9 .cilent-box .review i {
    position: relative;
    top: -.62em;
    margin: 0;
    font-size: 16px;
    color: var(--yellow-color);
}

.about-image9 .cilent-box .cilent-box_counter {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.6;
}

/* ---------------------------------------------------------
   7. Footer
   The stock col-xl-auto columns collapsed to their content width, so the
   blocks sat at ragged widths with uneven gutters. A grid gives fixed
   proportions instead. Contact now lives under About, so it is 4 columns.
--------------------------------------------------------- */
.footer-wrapper.footer-layout1 {
    padding-top: 72px;
    /* the theme's --yellow-color is really an amber (#FFB539) and reads orange
       against the navy; rescoped here so the rest of the site keeps the token */
    --yellow-color: #FFD84D;
}

.footer-layout1 .widget-area > .container > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Three link columns of equal width, with the brand lifted out above them.
   On the legacy pages the brand is still the first grid child, so it is made
   to span the whole row; on the home page it has moved out of the grid. */
@media (min-width: 1200px) {
    .footer-layout1 .widget-area > .container > .row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 56px;
    }

    .footer-layout1 .widget-area > .container > .row.justify-content-between > [class*="col-"]:first-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .footer-layout1 .widget-area > .container > .row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 40px;
        row-gap: 8px;
    }

    .footer-layout1 .widget-area > .container > .row.justify-content-between > [class*="col-"]:first-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .footer-layout1 .widget-area > .container > .row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: none;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Contact reads as a full-width strip above the columns rather than a tail
   hanging off the About blurb. */
.footer-layout1 .footer-contact-bar {
    margin-bottom: 48px;
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.footer-layout1 .widget_title.footer-contact-title {
    margin-top: 0;
    text-align: center;
}

.footer-layout1 .widget_title.footer-contact-title:after {
    left: 50%;
    transform: translateX(-50%);
}

/* The theme sizes .th-widget-contact for a 260px sidebar. Left in place across
   the full-width strip it squeezed the three columns to about 60px each, and
   since nothing here may wrap mid-word the emails and addresses ran straight
   over their neighbours. */
.footer-layout1 .footer-contact-bar .th-widget-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 26px 48px;
    align-items: start;
    max-width: none;
    margin-bottom: 0;
}

@media (min-width: 1200px) {
    /* equal thirds keep the three centred stacks symmetrical about the title */
    .footer-layout1 .footer-contact-bar .th-widget-contact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* flex items refuse to shrink past their content by default, so the column
   would overflow however the text is allowed to wrap */
.footer-layout1 .footer-contact-bar .info-box_text,
.footer-layout1 .footer-contact-bar .info-box_text .details {
    min-width: 0;
}

/* the grid gap owns the rhythm now, so the theme's per-item margin only made
   the last row of a wrapped strip sit differently from the rest */
.footer-layout1 .footer-contact-bar .info-box_text {
    margin-bottom: 0;
    line-height: 1.7;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

/* the theme pulls .details up to sit level with a beside-it icon */
.footer-layout1 .footer-contact-bar .info-box_text .details {
    margin-top: 0;
}

.footer-layout1 .footer-contact-bar .info-box_title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--yellow-color);
}

/* the theme greys these to #B1B8C3 against a light footer; on the navy they
   read as switched off */
.footer-layout1 .th-widget-contact .details p,
.footer-layout1 .th-widget-contact .details strong,
.footer-layout1 .th-widget-contact .info-box_link {
    color: var(--white-color);
}

.footer-layout1 .th-widget-contact .info-box_link:hover {
    color: var(--yellow-color);
}

.footer-layout1 .footer-widget {
    margin-bottom: 44px;
}

/* the theme only paints widget titles white inside .footer-widget, which the
   contact strip is not, so its heading was rendering dark on dark */
.footer-layout1 .widget_title {
    position: relative;
    margin-bottom: 24px;
    padding-bottom: 12px;
    font-size: 17px;
    letter-spacing: .01em;
    color: var(--white-color);
}

.footer-layout1 .widget_title:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--yellow-color);
}

/* the markup hard-codes 200x150 on the logo, which squashes the artwork;
   max-* alone cannot scale the SVG up, so the height is explicit */
.footer-layout1 .th-widget-about .about-logo img {
    width: auto !important;
    height: 72px !important;
    max-width: none;
    max-height: none;
}

.footer-layout1 .th-widget-about .about-text {
    max-width: 36ch;
    margin-bottom: 26px;
    line-height: 1.75;
}

.footer-layout1 .th-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-layout1 .th-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border-radius: 12px;
    transition: transform .25s ease, background-color .25s ease;
}

.footer-layout1 .th-social a:hover {
    transform: translateY(-3px);
}

.footer-layout1 .footer-widget.widget_nav_menu a {
    padding: 8px 0 8px 18px;
    font-size: 15px;
    line-height: 1.5;
}

/* The theme pins the caret to top:2px, so the padding above the label left it
   floating. Giving it the label's own line metrics puts it back on the line. */
.footer-layout1 .footer-widget.widget_nav_menu a:before {
    top: 8px;
    line-height: 1.5;
    font-size: 14px;
    transform: none;
}

.footer-layout1 .th-widget-contact .details p {
    margin-bottom: 4px;
}

.footer-layout1 .th-widget-contact address.details {
    font-style: normal;
    margin: 0;
}

/* address lines are long; let them breathe instead of clipping */
.footer-layout1 .th-widget-contact .details p,
.footer-layout1 .th-widget-contact .info-box_link {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* .newsletter-top already draws a divider with 60px/70px spacing, so adding
   the same to .newsletter-area produced two rules and ~240px of dead space. */
.footer-layout1 .newsletter-area {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.footer-layout1 .newsletter-top {
    margin-bottom: 52px;
    padding-bottom: 40px;
    border-bottom-color: rgba(255, 255, 255, .16);
}

.footer-layout1 .copyright-wrap {
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-layout1 .copyright-wrap .footer-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 991px) {
    .footer-wrapper.footer-layout1 {
        padding-top: 56px;
    }

    .footer-layout1 .newsletter-top {
        margin-bottom: 40px;
        padding-bottom: 30px;
    }

    .footer-layout1 .copyright-wrap .footer-links ul {
        justify-content: center;
    }
}

/* ---------------------------------------------------------
   8. Floating action buttons
   Two fixed widgets, one grid: the contact bubble on the left and the
   scroll-to-top button on the right, sharing a size, a side gutter and a
   baseline. The baseline clears the bottom-right corner, which the CRM
   enquiry fab (.jhsw-fab, 52px at right/bottom 18px) parks in; the fab
   itself is nudged so its axis matches the scroll-top above it.
   Sizing lives here rather than in each page's inline <style> block, so
   these selectors are deliberately weighted with `body` to win on order.
--------------------------------------------------------- */
:root {
    --fab-size: 50px;
    --fab-gutter: 30px;
    --fab-base: 84px;   /* clears the CRM fab: 18px + 52px + 14px gap */
}

@media (max-width: 767px) {
    :root {
        --fab-base: 76px;   /* mobile fab: 14px + 48px + 14px gap */
    }
}

@media (max-width: 575px) {
    :root {
        --fab-size: 44px;
        --fab-gutter: 18px;
    }
}

body .float-sm {
    left: var(--fab-gutter);
    right: auto;
    bottom: var(--fab-base);
    z-index: 10000;
}

body .float-sm .main-btn {
    width: var(--fab-size);
    height: var(--fab-size);
    line-height: var(--fab-size);
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-color);
    box-shadow: 0 8px 20px rgba(6, 22, 46, .32);
    transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

body .float-sm .icon-container {
    bottom: calc(var(--fab-size) + 12px);
    left: 4px;
    gap: 10px;
}

body .float-sm a {
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 17px;
}

/* over the navy footer the navy bubble disappeared - flip it to the accent */
body .float-sm.over-footer .main-btn {
    background: var(--yellow-color);
    color: var(--title-color);
}

body .scroll-top {
    right: var(--fab-gutter);
    bottom: var(--fab-base) !important;
    width: var(--fab-size);
    height: var(--fab-size);
}

body .scroll-top:after {
    width: var(--fab-size);
    height: var(--fab-size);
    line-height: var(--fab-size);
}

/* ---------------------------------------------------------
   8b. Hosted admission enquiry
   The enquiry experience is a school-hosted app. Placements are empty in the
   markup and filled by assets/js/jhs-enquiry.js, which renders either the
   embedded app or - while the school still sends X-Frame-Options: SAMEORIGIN -
   a panel that opens it in a new tab.
--------------------------------------------------------- */
[data-enquiry-embed],
.jhs-hosted-enquiry {
    display: block;
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(16, 28, 70, .14);
}

[data-enquiry-embed] iframe,
.jhs-hosted-enquiry iframe {
    display: block;
    width: 100%;
    min-height: 780px;
    border: 0;
}

[data-enquiry-embed] .jhs-enq-help,
.jhs-hosted-enquiry-help {
    margin: 0;
    padding: 14px 26px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #6b7592;
    border-top: 1px solid #e6ecf6;
}

[data-enquiry-embed] .jhs-enq-help a,
.jhs-hosted-enquiry-help a {
    color: #001c54;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* the panel shown until embedding is allow-listed */
.jhs-enq-cta {
    padding: 46px 40px 42px;
    text-align: center;
}

.jhs-enq-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: rgba(254, 192, 1, .18);
    color: #001c54;
    font-size: 24px;
}

.jhs-enq-cta h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
    color: #001c54;
}

.jhs-enq-cta p {
    max-width: 46ch;
    margin: 0 auto 24px;
    font-size: 15.5px;
    line-height: 1.7;
    font-weight: 500;
    color: #55607d;
}

.jhs-enq-cta .jhs-enq-btn {
    display: inline-flex;
    text-decoration: none;
}

.jhs-enq-cta-alt {
    margin: 20px auto 0 !important;
    font-size: 13.5px !important;
    color: #8590a8 !important;
}

.jhs-enq-cta-alt a {
    color: #001c54;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 575px) {
    [data-enquiry-embed] iframe,
    .jhs-hosted-enquiry iframe { min-height: 840px; }
    .jhs-enq-cta { padding: 34px 22px 30px; }
}

/* ---------------------------------------------------------
   8c. General enquiry form
   Non-admission contact. Posts to the Apps Script mail relay via
   assets/js/jhs-forms.js; admissions never comes through here.
--------------------------------------------------------- */
.jhs-gf {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    padding: 34px 34px 30px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(16, 28, 70, .12);
}

/* Off-screen, never focusable - bots fill it, people never see it. */
.jhs-gf-hp {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.jhs-gf-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.jhs-gf-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.jhs-gf-field.is-wide { grid-column: 1 / -1; }

.jhs-gf-field > span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #8590a8;
}

.jhs-gf-field > span b { color: var(--accent-color, #fec001); }

.jhs-gf-field input,
.jhs-gf-field select,
.jhs-gf-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid #e3e8f2;
    border-radius: 11px;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #001c54;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.jhs-gf-field textarea { resize: vertical; line-height: 1.6; }

.jhs-gf-field input:focus,
.jhs-gf-field select:focus,
.jhs-gf-field textarea:focus {
    outline: none;
    border-color: var(--accent-color, #fec001);
    box-shadow: 0 0 0 4px rgba(254, 192, 1, .18);
}

.jhs-gf-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 22px;
}

.jhs-gf-foot button[disabled] { opacity: .6; cursor: default; }

.jhs-gf-alt { font-size: 14px; font-weight: 600; color: #6b7592; }

.jhs-gf-alt a {
    color: #001c54;
    font-weight: 800;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.jhs-form-msg { margin: 18px 0 0; font-size: 14px; font-weight: 700; }
.jhs-form-msg:empty { display: none; }
.jhs-form-msg.is-busy { color: #6b7592; }
.jhs-form-msg.is-ok { color: #1c7a4a; }
.jhs-form-msg.is-error { color: #c0392b; }

@media (max-width: 700px) {
    .jhs-gf { padding: 26px 20px 24px; }
    .jhs-gf-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   9. Ticker items
--------------------------------------------------------- */
/* every item is plain text now that the badge is gone, so the phrases need an
   even rhythm and a divider to stop them reading as one long sentence */
.animate__content__item {
    display: flex;
    align-items: center;
    padding: 0;
    letter-spacing: .2px;
}

.animate__content__item:after {
    content: '';
    flex: none;
    width: 4px;
    height: 4px;
    margin: 0 18px;
    border-radius: 50%;
    background: rgba(0, 28, 84, .32);
}

@media (max-width: 768px) {
    .animate__content__item:after {
        width: 3px;
        height: 3px;
        margin: 0 11px;
    }
}

/* ---------------------------------------------------------
   10. Blog layout
--------------------------------------------------------- */

/* the theme pins every post with position:sticky, so eight cards pile up on
   top of each other on the way down the home page */
.blog-grid4_wrapp {
    position: static;
    top: auto;
}

/* the listing grid leaves ragged rows because each card is only as tall as its
   own excerpt; stretch them and drop the action onto a shared baseline */
.blog-area > .row > [class*="col-"] {
    display: flex;
}

.blog-area .blog-box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-area .blog-box .blog-box_content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.blog-area .blog-box .blog-box_content > .th-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ---------------------------------------------------------
   11. Fluid typography
   The theme sizes headings with a step ladder (h1 80 -> 54 -> 40 -> 34 -> 32,
   h2 48 -> 36 -> 34 -> 28). Every step is a hard jump, and the 1199px one drops
   h1 by a third in a single pixel, which is what reads as the layout "lagging"
   as the window resizes. These clamps span the same smallest and largest sizes
   with no steps in between. brand.css loads after style.css, so an equal
   specificity rule here supersedes the theme's media queries.
--------------------------------------------------------- */
.h1,
h1 {
    font-size: clamp(2rem, 1.1rem + 4.3vw, 5rem);
    line-height: 1.2;
}

.h2,
h2 {
    font-size: clamp(1.75rem, 1.05rem + 2.35vw, 3rem);
    line-height: 1.3;
}

.h3,
h3 {
    font-size: clamp(1.5rem, 1.28rem + .73vw, 2rem);
}

.h4,
h4 {
    font-size: clamp(1.25rem, 1.03rem + .92vw, 1.875rem);
}

.h5,
h5 {
    font-size: clamp(1.0625rem, .92rem + .58vw, 1.5rem);
}

.h6,
h6 {
    font-size: clamp(.9375rem, .83rem + .42vw, 1.25rem);
}

.sec-title {
    line-height: 1.22;
}

/* ---------------------------------------------------------
   12. Hero
   The hero was left aligned on desktop but centred below 768px, so the copy
   jumped across the slide at that one width. It now keeps a single alignment
   at every size, which also matches the background scrim: the gradient is
   weighted to the left, so centred text drifts off its darkened area.
--------------------------------------------------------- */
.hero-style1 {
    text-align: left;
    /* the header sits in normal flow rather than over the slide, so the top pad
       is pure gap; it only needs breathing room, not header clearance */
    padding: clamp(2.75rem, 1.5rem + 3.2vw, 4.5rem) 0 clamp(4rem, 2.5rem + 5.5vw, 8rem);
}

/* the slide is centred inside a 760px box, so any padding the copy gives back is
   handed straight to the centring slack; sizing the box nearer the copy's own
   height lets the padding above actually take effect */
.hero-1 .hero-inner {
    min-height: 640px;
}

/* the theme indents the eyebrow by 62px for a dash-and-dot marker, then hides
   the marker below 768px without removing the indent's counterpart on the
   heading, so the eyebrow and the heading sat on two different left edges */
.hero-style1 .sub-title {
    padding-left: 0;
}

.hero-style1 .sub-title::before,
.hero-style1 .sub-title::after {
    display: none;
}

.hero-style1 .hero-title,
.hero-title {
    font-size: clamp(2.125rem, 1.1rem + 4.6vw, 5.25rem);
    line-height: 1.12;
}

.hero-style1 .sub-title,
.hero-style1 .sub-title.style1 {
    font-size: clamp(1.125rem, .9rem + 1.1vw, 1.875rem);
    line-height: 1.35;
}

.hero-style1 .hero-text {
    font-size: clamp(.95rem, .85rem + .45vw, 1.25rem);
    line-height: 1.55;
    max-width: 582px;
    margin-left: 0;
    margin-right: 0;
}

/* the theme centres the buttons below 480px only, which reintroduces the jump */
.hero-style1 .btn-group {
    justify-content: flex-start;
    gap: clamp(10px, 1.4vw, 16px);
}

.hero-style1 .btn-group .th-btn {
    padding: clamp(11px, 1.1vw, 15px) clamp(16px, 2.4vw, 29.5px);
}

@media (max-width: 991px) {

    /* the theme caps the hero at 600px here; full width reads better once the
       slide is no longer split with the imagery */
    .hero-style1 {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------
   13. Vision & Mission page relayout
--------------------------------------------------------- */
.page-vision-mission #about-sec .row {
    align-items: flex-start;
    row-gap: clamp(28px, 3.5vw, 48px);
}

.page-vision-mission .breadcumb-wrapper {
    min-height: 0;
    padding: clamp(92px, 9vw, 128px) 0 clamp(52px, 6vw, 82px);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #0f234c;
}

.page-vision-mission .breadcumb-wrapper::before {
    background: rgba(11, 20, 34, 0.34);
}

.page-vision-mission .breadcumb-content {
    max-width: 760px;
    padding: 0;
}

.page-vision-mission .breadcumb-title {
    font-size: clamp(2rem, 4.4vw, 3.45rem);
    line-height: 1.1;
}

.page-vision-mission #about-sec {
    padding-top: clamp(56px, 6.5vw, 88px);
    padding-bottom: clamp(56px, 6.5vw, 88px);
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.page-vision-mission #about-sec .img-box2 {
    left: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    align-items: end;
    gap: 18px;
}

.page-vision-mission #about-sec .img-box2 .img2 {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 0;
}

.page-vision-mission #about-sec .img-box2 .img1,
.page-vision-mission #about-sec .img-box2 .img2 {
    overflow: hidden;
    border-radius: 22px;
}

.page-vision-mission #about-sec .img-box2 .img1 img,
.page-vision-mission #about-sec .img-box2 .img2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-vision-mission #about-sec .img-box2 .img1 {
    min-height: clamp(360px, 40vw, 520px);
}

.page-vision-mission #about-sec .img-box2 .img2 {
    min-height: clamp(250px, 30vw, 360px);
}

.page-vision-mission #about-sec .about-copy-card {
    background: #ffffff;
    border: 1px solid #e3eaf3;
    border-radius: 24px;
    padding: clamp(22px, 2.2vw, 30px);
    box-shadow: 0 18px 40px rgba(10, 42, 92, .08);
    height: 100%;
}

.page-vision-mission #about-sec .sec-text {
    font-size: clamp(.98rem, .82rem + .36vw, 1.08rem);
    line-height: 1.75;
    margin-bottom: 24px;
}

.page-vision-mission #about-sec .title-area {
    margin-bottom: clamp(12px, 1.8vw, 20px);
}

.page-vision-mission #about-sec .about-item-wrap {
    display: grid;
    gap: 12px;
}

.page-vision-mission #about-sec .about-item {
    margin: 0;
    padding: 12px 0;
}

.page-vision-mission #about-sec .about-item + .about-item {
    border-top: 1px solid #e8eef5;
}

.page-vision-mission #about-sec .about-item_text {
    line-height: 1.6;
}

@media (min-width: 1200px) {
    .page-vision-mission #about-sec .img-box2 {
        margin-top: 6px;
    }

    .page-vision-mission #about-sec .about-copy-card {
        margin-top: 6px;
    }
}

.page-vision-mission .history-sec1 {
    padding-top: clamp(72px, 8vw, 108px);
    padding-bottom: clamp(72px, 8vw, 108px);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.page-vision-mission .history-sec1 .history-area {
    padding: clamp(24px, 3vw, 48px);
    border-radius: 26px;
}

.page-vision-mission .history-sec1 .history-content {
    padding: clamp(52px, 5.5vw, 88px) clamp(20px, 4vw, 44px);
}

.page-vision-mission .history-sec1 .history-content .sec-title {
    font-size: clamp(2rem, 4.2vw, 3.15rem);
    line-height: 1.12;
}

.page-vision-mission .history-sec1 .history-content .sec-text {
    max-width: 760px;
    line-height: 1.75;
}

.page-vision-mission .history-sec1 .container.mt-60 {
    margin-top: clamp(34px, 4.6vw, 60px) !important;
}

.page-vision-mission .history-sec1 .row {
    align-items: stretch;
}

.page-vision-mission .history-sec1 .story-box {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #dfE7f1;
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(13, 39, 83, .08);
    padding: clamp(26px, 3vw, 38px);
}

.page-vision-mission .history-sec1 .story-box .box-title {
    font-size: clamp(1.7rem, 2.8vw, 2.35rem);
    line-height: 1.22;
}

.page-vision-mission .history-sec1 .story-box_text {
    margin-bottom: 16px;
    line-height: 1.72;
}

.page-vision-mission .history-sec1 .story-points {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.page-vision-mission .history-sec1 .story-points li {
    position: relative;
    padding-left: 18px;
    line-height: 1.6;
    color: var(--body-color);
}

.page-vision-mission .history-sec1 .story-points li::before {
    content: "";
    position: absolute;
    top: .62em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--yellow-color);
}

/* Match icon baseline across unequal card copy lengths. */
.page-vision-mission .history-sec1 .story-box_icon {
    display: block;
    margin-top: auto;
}

.page-vision-mission .history-sec1 .story-box .icon {
    width: 126px;
    height: 126px;
    line-height: 96px;
    border-width: 12px;
    right: -22px;
    bottom: -22px;
    font-size: 42px;
}

.page-vision-mission .team-area7 {
    padding-top: clamp(84px, 8vw, 120px);
    padding-bottom: clamp(76px, 8vw, 116px);
}

.page-vision-mission .team-area7 .title-area {
    margin-bottom: clamp(26px, 3.2vw, 46px);
}

@media (max-width: 991px) {
    .page-vision-mission .history-sec1 {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .page-vision-mission .history-sec1 .history-area {
        padding: 20px;
    }

    .page-vision-mission .team-area7 {
        padding-top: 80px;
    }
}

@media (max-width: 767px) {
    .page-vision-mission .breadcumb-wrapper {
        padding: 78px 0 40px;
    }

    .page-vision-mission .breadcumb-content {
        padding: 0;
    }

    .page-vision-mission .breadcumb-title {
        font-size: 2.15rem;
    }

    .page-vision-mission #about-sec {
        padding-top: 30px;
        padding-bottom: 44px;
    }

    .page-vision-mission #about-sec .row {
        row-gap: 24px;
    }

    .page-vision-mission #about-sec .col-xl-7 {
        order: 1;
    }

    .page-vision-mission #about-sec .col-xl-5 {
        order: 2;
    }

    .page-vision-mission #about-sec .img-box2 {
        display: block;
        margin-bottom: 0;
    }

    .page-vision-mission #about-sec .img-box2 .img2 {
        min-height: 0;
        margin-top: 14px;
    }

    .page-vision-mission #about-sec .about-copy-card {
        border-radius: 18px;
        padding: 18px 16px;
    }

    .page-vision-mission #about-sec .title-area .sec-title {
        font-size: 2rem;
        line-height: 1.16;
    }

    .page-vision-mission #about-sec .sec-text {
        font-size: .96rem;
        line-height: 1.68;
        margin-bottom: 18px;
    }

    .page-vision-mission #about-sec .about-item {
        padding: 10px 0;
    }

    .page-vision-mission #about-sec .about-item_img {
        margin-right: 12px;
    }

    .page-vision-mission #about-sec .about-item_img img {
        max-width: 20px;
    }

    .page-vision-mission #about-sec .about-item_centent .box-title {
        font-size: 1.72rem;
        line-height: 1.18;
        margin-bottom: 6px;
    }

    .page-vision-mission #about-sec .about-item_text {
        font-size: .92rem;
        line-height: 1.55;
    }

    .page-vision-mission .history-sec1 .story-box {
        border-radius: 18px;
        padding: 24px 20px;
    }

    .page-vision-mission .history-sec1 .story-points {
        margin-bottom: 22px;
        gap: 8px;
    }

    .page-vision-mission .history-sec1 .story-box .icon {
        width: 102px;
        height: 102px;
        line-height: 76px;
        font-size: 34px;
        border-width: 10px;
        right: -10px;
        bottom: -10px;
    }
}

/* Keep learning content unobstructed by floating controls on this page. */
.page-vision-mission .float-sm {
    display: none !important;
}

.page-chairmans-message .float-sm {
    display: none !important;
}

/* Chairman banner needs a fully filled hero area, not a thin image strip. */
.page-chairmans-message .breadcumb-wrapper {
    min-height: 0;
    padding: clamp(96px, 10vw, 138px) 0 clamp(54px, 6vw, 82px);
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #10264f;
}

.page-chairmans-message .breadcumb-wrapper::before {
    background: linear-gradient(180deg, rgba(6, 32, 38, .46) 0%, rgba(6, 32, 38, .28) 62%, rgba(6, 32, 38, .20) 100%) !important;
}

@media (max-width: 767px) {
    .page-chairmans-message .breadcumb-wrapper {
        padding: 78px 0 40px;
    }
}

.page-chairmans-message .video-wrapp {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-chairmans-message .teamSlider8 {
    margin: 0 !important;
}

@media (max-width: 767px) {
    .page-chairmans-message #about-sec {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .page-chairmans-message #about-sec .row {
        row-gap: 18px;
    }

    .page-chairmans-message #about-sec .col-xl-5 {
        order: 1;
    }

    .page-chairmans-message #about-sec .col-xl-7 {
        order: 2;
    }

    .page-chairmans-message #about-sec .img-box3 {
        margin-bottom: 0;
    }

    .page-chairmans-message #about-sec .img-box3 .img2 {
        position: relative;
        top: auto;
        right: 0;
        margin-top: 14px;
    }
}

@media (max-width: 991px) {
    .page-chairmans-message .video-1-area {
        padding-bottom: 72px;
    }

    .page-chairmans-message .video1-titlebox {
        margin-bottom: 30px !important;
    }

    .page-chairmans-message .video-wrapp {
        padding: 120px 0;
        border-radius: 24px;
    }

    .page-chairmans-message .team-area8 {
        padding-top: 72px;
        padding-bottom: 72px;
    }
}

@media (max-width: 767px) {
    .page-chairmans-message .video-wrapp {
        padding: 92px 0;
        border-radius: 18px;
    }

    .page-chairmans-message .video-box1 .play-btn {
        --icon-size: 68px;
    }

    .page-chairmans-message .team-area8 .title-area {
        margin-bottom: 18px !important;
    }

    .page-chairmans-message .team-area8 .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/*=========================================================
    JHS PREMIUM MOTION LAYER
    Scroll reveals, card physics, image treatment.
    Only transform / opacity / filter are animated (GPU-safe).
    The .jhs-reveal class is added BY JS only when
    IntersectionObserver exists and the user has not asked
    for reduced motion - so content is never hidden without it.
=========================================================*/

/* ---- 1. Scroll-triggered reveals (animate once) ---- */
.jhs-reveal {
    opacity: 0;
    will-change: transform, opacity;
}

.jhs-reveal.jhs-inview {
    animation: jhsRevealUp .65s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: var(--jhs-d, 0ms);
}

.jhs-reveal[data-jhs="fade"].jhs-inview {
    animation-name: jhsRevealFade;
    animation-duration: .55s;
}

.jhs-reveal[data-jhs="scale"].jhs-inview {
    animation-name: jhsRevealScale;
    animation-duration: .6s;
}

.jhs-reveal[data-jhs="blur"].jhs-inview {
    animation-name: jhsRevealBlur;
    animation-duration: .7s;
}

/* headings: blur -> focus with a slow expo-out rise */
.jhs-reveal[data-jhs="focus"].jhs-inview {
    animation-name: jhsRevealFocus;
    animation-duration: .75s;
    animation-timing-function: cubic-bezier(.19, 1, .22, 1);
}

/* once the entrance has played, hand control back to hover styles */
.jhs-reveal.jhs-done {
    animation: none;
    opacity: 1;
    will-change: auto;
}

@keyframes jhsRevealUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes jhsRevealFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes jhsRevealScale {
    from { opacity: 0; transform: scale(.975) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes jhsRevealBlur {
    from { opacity: 0; transform: translateY(18px); filter: blur(2px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes jhsRevealFocus {
    from { opacity: 0; transform: translateY(22px); filter: blur(1.5px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---- 1b. Inner-page banner entrance (above the fold, plays on load) ---- */
@media (prefers-reduced-motion: no-preference) {
    .breadcumb-wrapper .breadcumb-title {
        animation: jhsRevealFocus .7s cubic-bezier(.19, 1, .22, 1) .1s both;
    }

    .breadcumb-wrapper .breadcumb-menu {
        animation: jhsRevealUp .55s cubic-bezier(.22, .61, .36, 1) .28s both;
    }
}

/* ---- 1c. Page-leave transition (class added by main.js on internal nav) ---- */
body {
    transition: opacity .22s ease;
}

body.jhs-leaving {
    opacity: 0;
    pointer-events: none;
}

/* ---- 2. Card physics - one consistent premium hover ---- */
.blog-box,
.case-box,
.service-box,
.category-card,
.choose-card,
.counter-card,
.lab-card,
.jcard,
.testi-card,
.gallery-card,
.gallery-card2,
.story-box,
.info-box {
    transition: transform .32s cubic-bezier(.2, .8, .25, 1),
                box-shadow .32s ease;
}

@media (hover: hover) and (pointer: fine) {
    .blog-box:hover,
    .case-box:hover,
    .service-box:hover,
    .category-card:hover,
    .choose-card:hover,
    .lab-card:hover,
    .jcard:hover,
    .testi-card:hover,
    .story-box:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgba(11, 42, 46, .12);
    }

    .counter-card:hover,
    .gallery-card:hover,
    .gallery-card2:hover {
        transform: translateY(-4px);
    }
}

/* icons inside cards ease forward with the card */
.blog-box i,
.case-box i,
.service-box i,
.category-card i,
.choose-card i,
.jcard i,
.jcard-ic {
    transition: transform .3s cubic-bezier(.2, .8, .25, 1);
}

@media (hover: hover) and (pointer: fine) {
    .blog-box:hover > i,
    .case-box:hover .box-img i,
    .category-card:hover i,
    .choose-card:hover i,
    .jcard:hover .jcard-ic {
        transform: translateY(-3px) scale(1.06);
    }
}

/* ---- 3. Imagery - calm zoom inside existing masks ---- */
.blog-img,
.box-img,
.gallery-card .box-img,
.gallery-card2 .box-img {
    overflow: hidden;
}

.blog-img img,
.box-img img {
    transition: transform .6s cubic-bezier(.2, .8, .25, 1);
}

@media (hover: hover) and (pointer: fine) {
    .blog-box:hover .blog-img img,
    .case-box:hover .box-img img,
    .gallery-card:hover .box-img img,
    .gallery-card2:hover .box-img img {
        transform: scale(1.045);
    }
}

/* ---- 4. Links & list rows - micro interactions ---- */
.info-box_link {
    transition: color .25s ease, transform .25s cubic-bezier(.2, .8, .25, 1);
}

@media (hover: hover) and (pointer: fine) {
    .info-box_link:hover {
        transform: translateX(4px);
    }
}

/* ---- 5. Accessibility: reduced motion wins, always ---- */
@media (prefers-reduced-motion: reduce) {
    .jhs-reveal,
    .jhs-reveal.jhs-inview {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .blog-box, .case-box, .service-box, .category-card, .choose-card,
    .counter-card, .lab-card, .jcard, .testi-card, .gallery-card,
    .gallery-card2, .story-box, .info-box, .blog-img img, .box-img img,
    .info-box_link, .th-btn {
        transition: none !important;
    }
}

/*=========================================================
    JHS WIDE-SCREEN LAYER
    The theme caps every .container at 1320px, which reads as
    a narrow strip with dead margins on 1600px+ desktops.
    These overrides let the layout breathe with the screen
    while keeping comfortable reading gutters.
    brand.css loads after style.css, so :root here wins.
=========================================================*/

/* 1500-1749px (typical 19" - 24" desktops) */
@media (min-width: 1500px) {
    :root {
        --main-container: min(1440px, 90vw);
    }
}

/* 1750px and up (full-HD and wider) */
@media (min-width: 1750px) {
    :root {
        --main-container: min(1580px, 86vw);
    }
}

/* Custom homepage sections carry their own inner max-widths;
   let them grow in step with the wider container. */
@media (min-width: 1500px) {
    .jhs-campuses-head {
        max-width: 860px;
    }

    .jhs-campus-grid {
        gap: 34px;
    }

    .jhs-mid-cta-inner {
        max-width: 1120px;
    }

    .campus-visit-cta .visit-wrapper {
        max-width: 980px;
    }

    .visit-sub {
        max-width: 68ch;
    }

    /* hero copy: keep the measure generous but not stretched */
    .hero-style1 {
        max-width: 860px;
    }
}

@media (min-width: 1750px) {
    .jhs-mid-cta-inner {
        max-width: 1200px;
    }

    /* slightly larger display type so the wider stage doesn't dwarf it */
    .hero-1 .hero-title {
        font-size: clamp(48px, 3.6vw, 72px);
    }

    .sec-title {
        font-size: clamp(36px, 2.4vw, 48px);
    }
}

/*=========================================================
    JHS CORPORATE FOOTER REFINEMENT
    Loads after section 7, so everything here wins on order.
    Direction: quiet, structured, editorial - no icon chips,
    no yellow accent bars, spaced-caps labels, hairline rules,
    one restrained hover colour.
=========================================================*/

/* ---- 1. Remove decorative icons & carets ---- */
.footer-layout1 .footer-contact-bar .info-box_text .icon {
    display: none;
}

.footer-layout1 .footer-widget.widget_nav_menu a:before {
    display: none;
}

.footer-layout1 .footer-widget.widget_nav_menu a {
    padding-left: 0;
}

/* ---- 2. Headings: spaced caps, no underline bar ---- */
.footer-layout1 .widget_title {
    margin-bottom: 22px;
    padding-bottom: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

.footer-layout1 .widget_title:after {
    display: none;
}

/* ---- 3. Contact strip: aligned columns, label + value ---- */
.footer-layout1 .widget_title.footer-contact-title {
    text-align: left;
}

.footer-layout1 .footer-contact-bar {
    margin-bottom: 44px;
    padding-bottom: 40px;
}

.footer-layout1 .footer-contact-bar .info-box_text {
    align-items: flex-start;
    gap: 0;
    text-align: left;
}

.footer-layout1 .footer-contact-bar .info-box_title {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .5);
}

.footer-layout1 .th-widget-contact .details p {
    margin-bottom: 6px;
    font-size: 15px;
    line-height: 1.7;
}

.footer-layout1 .th-widget-contact .details p,
.footer-layout1 .th-widget-contact .details strong {
    color: rgba(255, 255, 255, .88);
}

.footer-layout1 .th-widget-contact .info-box_link {
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-layout1 .th-widget-contact .info-box_link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- 4. About column ---- */
.footer-layout1 .th-widget-about .about-text {
    color: rgba(255, 255, 255, .65);
    font-size: 15px;
    line-height: 1.8;
}

/* ---- 5. Social: minimal monochrome, hairline squares ---- */
.footer-layout1 .th-social a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(0, 28, 84, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .45) !important;
    color: #001c54 !important;
    font-size: 15px;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease, transform .2s ease;
}

.footer-layout1 .th-social a:hover {
    border-color: transparent;
    background: #0f8a4c !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* ---- 6. Nav links: quiet rows with a calm hover ---- */
.footer-layout1 .footer-widget.widget_nav_menu a {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 15px;
    color: rgba(255, 255, 255, .68);
    transition: color .2s ease, transform .2s ease;
}

.footer-layout1 .footer-widget.widget_nav_menu a:hover {
    color: #fff;
    transform: translateX(3px);
}

/* ---- 7. Newsletter band: editorial scale, clean form ---- */
.footer-layout1 .newsletter-title {
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.footer-layout1 .newsletter-form {
    gap: 12px;
}

.footer-layout1 .newsletter-form .form-control {
    height: 52px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 15px;
    transition: border-color .2s ease, background-color .2s ease;
}

.footer-layout1 .newsletter-form .form-control::placeholder {
    color: rgba(255, 255, 255, .45);
}

.footer-layout1 .newsletter-form .form-control:focus {
    border-color: rgba(255, 255, 255, .6);
    background: rgba(255, 255, 255, .08);
    box-shadow: none;
}

.footer-layout1 .newsletter-form .th-btn {
    background: #fff;
    color: #0B2A2E;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}

.footer-layout1 .newsletter-form .th-btn:before {
    display: none;
}

.footer-layout1 .newsletter-form .th-btn:hover {
    background: rgba(255, 255, 255, .88);
    color: #0B2A2E;
    transform: translateY(-2px);
}

/* the paper-plane icon inside the subscribe button reads as clutter here */
.footer-layout1 .newsletter-form .th-btn img {
    display: none;
}

/* ---- 8. Copyright bar: small, muted, aligned ---- */
.footer-layout1 .copyright-wrap {
    padding: 24px 0;
}

.footer-layout1 .copyright-text {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .55);
}

.footer-layout1 .copyright-text a {
    color: rgba(255, 255, 255, .8);
    transition: color .2s ease;
}

.footer-layout1 .copyright-text a:hover {
    color: #fff;
}

.footer-layout1 .copyright-wrap .footer-links a {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .55);
    transition: color .2s ease;
}

.footer-layout1 .copyright-wrap .footer-links a:hover {
    color: #fff;
}

@media (max-width: 767px) {
    .footer-layout1 .footer-contact-bar .th-widget-contact {
        gap: 22px;
    }
}

/* ---- 9. Mobile footer: one clean stacked column ----
   The theme's col-6 pairs the nav widgets into two cramped 176px
   strips with the third wrapping below - ragged and unreadable.
   Under 768px every footer block goes full-width, separated by
   hairlines, like a proper corporate mobile footer. */
@media (max-width: 767px) {
    .footer-layout1 .widget-area > .container > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .footer-layout1 .footer-widget {
        margin-bottom: 0;
        padding: 24px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .footer-layout1 .widget-area > .container > .row > [class*="col-"]:last-child .footer-widget {
        border-bottom: none;
    }

    .footer-layout1 .widget_title {
        margin-bottom: 14px;
    }

    .footer-layout1 .footer-widget.widget_nav_menu a {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .footer-layout1 .th-widget-about .about-text {
        max-width: none;
    }

    /* contact strip: stacked blocks, aligned left, generous rhythm */
    .footer-layout1 .footer-contact-bar {
        margin-bottom: 0;
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .footer-layout1 .footer-contact-bar .th-widget-contact {
        gap: 24px;
    }

    /* copyright: centre both lines instead of split alignment */
    .footer-layout1 .copyright-wrap .row > div {
        text-align: center !important;
    }

    .footer-layout1 .copyright-wrap .footer-links ul {
        justify-content: center;
        margin-top: 10px;
    }
}

/* ---- 10. Contact strip order: address left, email centre, phone right ---- */
.footer-layout1 .footer-contact-bar .th-widget-contact .info-box_text:nth-child(1) {
    order: 3; /* Call Us */
}

.footer-layout1 .footer-contact-bar .th-widget-contact .info-box_text:nth-child(2) {
    order: 2; /* Email Us */
}

.footer-layout1 .footer-contact-bar .th-widget-contact .info-box_text:nth-child(3) {
    order: 1; /* Visit Us */
}

/* ---- 11. Mobile hero: balanced height, subject in frame ----
   brand.css pins .hero-inner to 640px for desktop; on phones that
   leaves a tall empty band of backdrop under the copy, and the
   centred crop shows mostly flat colour instead of the subject.
   min-height:0 shrank it so far the banner photo read as a stripe,
   so the slide is given a real frame back - tall enough for the
   subject, still short enough that the copy stays above the fold. */
@media (max-width: 767px) {
    .hero-1 .hero-inner {
        min-height: 540px;
    }

    .hero-style1 {
        padding: 40px 0 48px;
    }

    /* photographs place the subject right of centre */
    .hero-1 .th-hero-bg {
        background-position: 72% center;
    }

    .hero-style1 .hero-text {
        margin-bottom: 22px;
    }
}

/* The video artwork has a decorative wave along its top and bottom edges,
   so it only reads correctly as a full-bleed band on a white page - inside
   a bordered card those arcs show up as grey crescents. */
.hero-11 {
    padding-bottom: 0;
    background: #ffffff;
}

/* ---------------------------------------------------------
   Journey of Excellence
   Rebuilt standalone. The theme ships .img-box14 twice with
   conflicting flex and radius values and drives the badge from
   per-character .charN classes injected by JS, so the old block
   rendered at mismatched heights and overflowed its column.
   Nothing here depends on those rules.
--------------------------------------------------------- */
.jhs-journey {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    background:
        radial-gradient(680px 420px at 88% 12%, rgba(207, 232, 220, .55), transparent 70%),
        radial-gradient(520px 380px at 4% 88%, rgba(255, 216, 77, .16), transparent 70%),
        #f6f8f9;
}

.jhs-journey-head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.jhs-journey-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: #0f8a4c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.jhs-journey-title {
    margin: 0 0 14px;
    color: #001c54;
    font-size: clamp(28px, 1.4rem + 1.7vw, 46px);
    line-height: 1.16;
}

.jhs-journey-title span {
    color: #0f8a4c;
}

.jhs-journey-sub {
    margin: 0;
    color: #566a70;
    font-size: 16px;
    line-height: 1.7;
}

.jhs-journey-grid {
    display: block;
}

/* ---- cards ---- */
.jhs-journey-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.jhs-jcard {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 32px 28px 30px 32px;
    background: #ffffff;
    border: 1px solid #e6ecec;
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(0, 28, 84, .07);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

/* accent rail grows on hover instead of the card changing colour */
.jhs-jcard::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: 30px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #0f8a4c, #ffd84d);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .32s ease;
}

.jhs-jcard:hover {
    transform: translateY(-4px);
    border-color: #d7e6de;
    box-shadow: 0 22px 46px rgba(0, 28, 84, .12);
}

.jhs-jcard:hover::before {
    transform: scaleY(1);
}

.jhs-jcard-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #ffd84d;
}

.jhs-jcard-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.jhs-jcard-body {
    min-width: 0;
}

.jhs-jcard-title {
    margin: 0 0 8px;
    color: #001c54;
    font-size: 19px;
    line-height: 1.3;
}

.jhs-jcard-text {
    margin: 0 0 14px;
    color: #566a70;
    font-size: 15px;
    line-height: 1.7;
}

.jhs-jcard-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #001c54;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: color .22s ease, gap .22s ease;
}

.jhs-jcard-link:hover {
    gap: 14px;
    color: #0f8a4c;
}

/* the link is pinned to the bottom so the three cards align on it
   regardless of how many lines each description runs to */
.jhs-jcard-link {
    margin-top: auto;
}

@media (max-width: 991px) {
    .jhs-journey {
        padding: 68px 0;
    }

    .jhs-journey-head {
        margin-bottom: 40px;
    }

    .jhs-journey-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    /* an odd card left alone on the last row reads better full width */
    .jhs-jcard:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .jhs-journey-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .jhs-jcard:last-child {
        grid-column: auto;
    }
}

@media (max-width: 575px) {
    .jhs-journey {
        padding: 52px 0;
    }

    .jhs-jcard {
        gap: 14px;
        padding: 24px 20px 24px 24px;
        border-radius: 16px;
    }

    .jhs-jcard::before {
        top: 24px;
        bottom: 24px;
    }

    .jhs-jcard-icon {
        width: 46px;
        height: 46px;
    }

    .jhs-jcard-icon img {
        width: 22px;
        height: 22px;
    }

    .jhs-jcard-title {
        font-size: 17px;
    }
}

/* ---------------------------------------------------------
   Technology section
   The theme ships this block as a 74px white headline on solid
   navy, which read as a second hero competing with the banner.
   Recast light: the wave cut into the top of the video artwork
   still divides cleanly because the tint sits behind its arc.
--------------------------------------------------------- */
.hero-11 .hero-11-wrapp {
    background:
        radial-gradient(620px 380px at 84% 8%, rgba(255, 216, 77, .16), transparent 70%),
        linear-gradient(140deg, #eef5f1 0%, #cfe8dc 100%);
}

.hero-11 .hero-style11 {
    max-width: 900px;
    padding: 96px 0 232px;
}

.jhs-future-kicker {
    display: block;
    margin-bottom: 14px;
    color: #0f8a4c;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.hero-11 .hero-style11 .hero-title {
    margin-bottom: 18px;
    color: #001c54;
    font-size: clamp(30px, 1.4rem + 2vw, 52px);
    font-weight: 800;
    line-height: 1.14;
    text-transform: none;
}

.jhs-future-accent {
    color: #0f8a4c;
}

.hero-11 .hero-style11 .hero-desc {
    max-width: 640px;
    margin: 0 auto;
    color: #48606a;
    font-size: 16px;
    line-height: 1.75;
}

.jhs-future-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 30px 0 34px;
    padding: 0;
    list-style: none;
}

.jhs-future-points li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid rgba(0, 28, 84, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #001c54;
    font-size: 14px;
    font-weight: 600;
}

.jhs-future-points i {
    color: #0f8a4c;
    font-size: 15px;
}

.jhs-future-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 30px;
    border-radius: 999px;
    background: #001c54;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .22s ease, background-color .22s ease, color .22s ease;
}

.jhs-future-btn:hover {
    transform: translateY(-2px);
    background: #ffd84d;
    color: #001c54;
}

@media (max-width: 991px) {
    .hero-11 .hero-style11 {
        padding: 68px 0 150px;
    }
}

@media (max-width: 575px) {
    .hero-11 .hero-style11 {
        padding: 52px 0 96px;
    }

    .jhs-future-points {
        gap: 8px;
        margin: 24px 0 28px;
    }

    .jhs-future-points li {
        padding: 9px 14px;
        font-size: 13px;
    }

    .jhs-future-btn {
        padding: 13px 24px;
    }
}

.hero-11 .hero-video-img {
    max-width: none;
    margin: -185px auto 0;
    padding: 0;
    z-index: 4;
}

.hero-11 .hero-video-img > img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-11 .hero-video-img .play-btn {
    z-index: 3;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(0, 28, 84, .28);
}

.hero-11 .hero-video-img .play-btn > i {
    --icon-size: auto;
    width: auto;
    height: auto;
    color: var(--title-color);
    background: transparent;
    border: 0;
    backdrop-filter: none;
    font-size: 24px;
}

.hero-11 .hero-video-img .play-btn:before,
.hero-11 .hero-video-img .play-btn:after {
    display: none;
}

@media (max-width: 767px) {
    .hero-11 .hero-video-img {
        margin-top: -50px;
    }

    .hero-11 .hero-video-img .play-btn {
        width: 62px;
        height: 62px;
    }

    .hero-11 .hero-video-img .play-btn > i {
        font-size: 16px;
    }
}

@media (max-width: 575px) {
    .hero-1 .hero-inner {
        min-height: 500px;
    }

    .hero-style1 {
        padding: 24px 0 28px;
    }

    .hero-style1 .btn-group .th-btn {
        padding: 11px 18px;
        font-size: 13.5px;
    }
}

/* ---- 12. Blog card stack (homepage) ----
   Re-enables the theme's sticky deck, but as a deliberate effect:
   solid rounded cards with a lifted shadow slide over one another
   while the section title stays pinned on the left. The flat list
   is kept below 992px where sticky decks read as overlap bugs. */
@media (min-width: 992px) {
    .blog-grid4-static-wrap .blog-grid4_wrapp {
        position: -webkit-sticky;
        position: sticky;
        top: 130px;
    }

    .blog-grid4-static-wrap .blog-grid4 {
        align-items: center;
        padding: 28px;
        border: 1px solid #E7EBEF;
        border-radius: 20px;
        /* the shadow throws upward so the card beneath reads as depth */
        box-shadow: 0 -16px 40px rgba(11, 42, 46, .10);
    }

    /* the divider treatment belongs to the flat list, not the deck */
    .blog-grid4-static-wrap .blog-grid4_wrapp:not(:last-child) .blog-grid4 {
        border-bottom: 1px solid #E7EBEF;
        margin-bottom: 0;
        padding-bottom: 28px;
    }

    /* breathing room between cards gives the deck its scroll runway.
       flex-wrap confines sticky items to their own line, which kills the
       pinning entirely - block flow gives each card the full container
       as its sticky range. */
    .blog-grid4-static-wrap {
        display: block;
    }

    .blog-grid4-static-wrap .blog-grid4_wrapp + .blog-grid4_wrapp {
        margin-top: 34px;
    }
}

/* The theme sets body{overflow-x:hidden}, which silently turns <body> into
   a scroll container and disables EVERY position:sticky on the page (the
   blog deck, the pinned section title). `clip` gives the same horizontal
   clipping without creating a scroll container. Browsers without `clip`
   support keep the old value and simply degrade to the flat list. */
body {
    overflow-x: clip;
    overflow-y: visible;
}

/* Deck cards vary 16px in height with title wrapping, so taller cards
   peeked out beneath shorter ones and eight stacked shadows built up
   into a grey halo. Equal heights make each card cover the last
   exactly; the shadow is softened since aligned edges double it up. */
@media (min-width: 992px) {
    .blog-grid4-static-wrap .blog-grid4 {
        min-height: 300px;
        box-shadow: 0 -10px 26px rgba(11, 42, 46, .07);
    }
}

/* ---------------------------------------------------------
   Counter block on phones
   The theme drops the four stats to one full-width column and
   keeps the 264px disc, so each number costs a whole screen and
   the 312px ring overhangs the column. Two per row at a size the
   ring fits inside brings all four into a single glance.
--------------------------------------------------------- */
@media (max-width: 767px) {
    .counter-card-wrap {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .counter-card,
    .counter-card-wrap:nth-child(even) .counter-card {
        width: 150px;
        height: 150px;
        padding: 42px 12px;
        margin: 26px auto;
    }

    /* the ring is a fixed box, so it has to be re-cut for the smaller disc */
    .counter-card .counter-shape {
        inset: -13px;
        width: 176px;
        height: 176px;
    }

    .counter-card .counter-shape span,
    .counter-card-wrap:nth-child(even) .counter-card .counter-shape span {
        width: 14px;
        height: 14px;
    }

    .counter-card .counter-shape span {
        bottom: 28px;
        right: 8px;
        top: unset;
    }

    .counter-card-wrap:nth-child(even) .counter-card .counter-shape span {
        top: 13px;
        right: 24px;
        bottom: unset;
    }

    .counter-card .box-number {
        font-size: 28px;
        line-height: 30px;
        margin-bottom: 2px;
    }

    .counter-card .counter-title {
        font-size: 13px;
        line-height: 17px;
    }
}

@media (max-width: 575px) {
    .counter-card .counter-title {
        font-size: 12px;
    }
}

/* ---------------------------------------------------------
   Floating buttons vs the footer legal links
   The floating rail is fixed with z-index 10000, so on phones it lands
   straight on top of the legal row - elementFromPoint returns the button,
   not the link. Clearing the strip it occupies hands the links back.
--------------------------------------------------------- */
@media (max-width: 991px) {
    .footer-layout1 .copyright-wrap,
    .copyright-wrap {
        padding-bottom: calc(var(--fab-base) + var(--fab-size) + 16px);
    }
}

/* ---------------------------------------------------------
   Footer masthead
   The brand used to be the first of four unequal columns, so
   the logo sat mid-page level with the link lists and the row
   read as three ragged stacks. Lifting it to a centred band
   above the contact strip gives the footer a masthead and
   leaves the links an even three-column grid underneath.
--------------------------------------------------------- */
.footer-layout1 .footer-brand-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 44px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.footer-layout1 .footer-brand-bar .about-logo {
    margin: 0;
}

/* the markup hard-codes 200x150 on the logo, which squashes the artwork */
.footer-layout1 .footer-brand-bar .about-logo img {
    width: auto !important;
    height: 76px !important;
    max-width: none;
    max-height: none;
}

.footer-layout1 .footer-brand-bar .about-text {
    max-width: 64ch;
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: 15px;
    line-height: 1.8;
}

.footer-layout1 .footer-brand-bar .th-social {
    justify-content: center;
}

/* an odd column count left the last list orphaned against the grid edge */
.footer-layout1 .footer-nav-row {
    --bs-gutter-y: 32px;
}

@media (max-width: 991px) {
    .footer-layout1 .footer-brand-bar {
        gap: 16px;
        margin-bottom: 32px;
        padding-bottom: 30px;
    }

    .footer-layout1 .footer-brand-bar .about-logo img {
        height: 62px !important;
    }

    .footer-layout1 .footer-brand-bar .about-text {
        font-size: 14px;
    }
}

/* Legacy footer, used by every page except the home page: the brand is still
   the first of four unequal grid columns. Promoting that one column to a
   full-width centred band reproduces the masthead above without editing the
   markup in 51 files. index.html is excluded because its footer row was
   renamed .footer-nav-row. */
.footer-layout1 .widget-area .row.justify-content-between > .col-md-12.col-lg-6.col-xl-4 {
    margin-bottom: 44px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.footer-layout1 .widget-area .row.justify-content-between > .col-md-12.col-lg-6.col-xl-4 .th-widget-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.footer-layout1 .widget-area .row.justify-content-between .th-widget-about .about-logo {
    margin: 0;
}

.footer-layout1 .widget-area .row.justify-content-between .th-widget-about .about-logo img {
    height: 76px !important;
}

/* the column rule caps this at 36ch, which is a ragged two words per line
   once the blurb is centred across the full width */
.footer-layout1 .widget-area .row.justify-content-between .th-widget-about .about-text {
    max-width: 64ch;
    margin: 0;
}

.footer-layout1 .widget-area .row.justify-content-between .th-widget-about .th-social {
    justify-content: center;
}

/* below the grid breakpoint the row is still a Bootstrap flex row, and the
   theme's col-6 would sit two lists side by side in a 160px column */
@media (max-width: 767px) {
    .footer-layout1 .widget-area .row.justify-content-between > .col-md-12.col-lg-6.col-xl-4 {
        margin-bottom: 32px;
        padding-bottom: 30px;
    }

    .footer-layout1 .widget-area .row.justify-content-between .th-widget-about {
        gap: 16px;
    }

    .footer-layout1 .widget-area .row.justify-content-between .th-widget-about .about-logo img {
        height: 62px !important;
    }
}

.footer-layout1 {
    --footer-ink: #001c54;
    --footer-green: #0f8a4c;
    --footer-muted: #3f5c63;
    --footer-line: rgba(0, 28, 84, .16);
    background: linear-gradient(135deg, #cfe8dc 0%, #e7f2ea 52%, #b6d8c8 100%);
    color: var(--footer-ink);
}

.footer-layout1 .widget-area {
    background: transparent;
}

.footer-layout1 .footer-brand-bar,
.footer-layout1 .footer-contact-bar {
    border-color: var(--footer-line);
}

.footer-layout1 .footer-brand-bar .about-text,
.footer-layout1 .th-widget-about .about-text {
    color: var(--footer-muted);
}

.footer-layout1 .widget_title,
.footer-layout1 .newsletter-title,
.footer-layout1 .footer-contact-title,
.footer-layout1 .footer-contact-bar .info-box_title {
    color: var(--footer-ink) !important;
}

.footer-layout1 .widget_title:after {
    background-color: var(--footer-green);
}

.footer-layout1 .footer-contact-bar .info-box_text:nth-child(2) .info-box_title,
.footer-layout1 .footer-nav-col:nth-child(2) .widget_title {
    color: var(--footer-green);
}

.footer-layout1 .footer-contact-bar .info-box_text:nth-child(3) .info-box_title,
.footer-layout1 .footer-nav-col:nth-child(3) .widget_title {
    color: var(--footer-muted);
}

.footer-layout1 .th-widget-contact .details p,
.footer-layout1 .th-widget-contact .details strong,
.footer-layout1 .th-widget-contact .info-box_link,
.footer-layout1 .footer-widget.widget_nav_menu a {
    color: var(--footer-ink);
}

.footer-layout1 .th-widget-contact .info-box_link:hover,
.footer-layout1 .footer-widget.widget_nav_menu a:hover {
    color: var(--footer-green);
}

.footer-layout1 .footer-widget.widget_nav_menu a:before {
    color: var(--footer-green);
}

.footer-layout1 .th-social a {
    color: var(--footer-ink) !important;
    border-color: rgba(0, 28, 84, .22);
    background: rgba(255, 255, 255, .45) !important;
}

.footer-layout1 .th-social a:hover {
    color: #ffffff !important;
    border-color: transparent;
    background: var(--footer-green) !important;
}

.footer-layout1 .newsletter-area {
    border-color: var(--footer-line);
}

.footer-layout1 .newsletter-form .form-control {
    color: var(--footer-ink);
    background: rgba(255, 255, 255, .38);
    border-color: rgba(0, 28, 84, .18);
}

.footer-layout1 .newsletter-form .form-control::placeholder {
    color: var(--footer-muted);
}

.footer-layout1 .newsletter-form .th-btn {
    color: #ffffff;
    background: var(--footer-ink);
}

.footer-layout1 .newsletter-form .th-btn:hover {
    background: var(--footer-green);
}

.footer-layout1 .copyright-wrap {
    color: #ffffff;
    background: var(--footer-ink);
}

.footer-layout1 .copyright-text,
.footer-layout1 .copyright-text a,
.footer-layout1 .footer-links a {
    color: rgba(255, 255, 255, .82);
}

.footer-layout1 .copyright-text a:hover,
.footer-layout1 .footer-links a:hover {
    color: #cfe8dc;
}

/* The theme gives each footer link a 21px bottom margin on top of its own
   padding, which pushed the lists to 58px rows and left the short campus
   column looking abandoned next to the seven-item one. */
.footer-layout1 .footer-widget.widget_nav_menu a {
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.footer-layout1 .footer-widget.widget_nav_menu .menu li + li {
    margin-top: 2px;
}

.footer-wrapper.footer-layout1 {
    padding-top: 56px;
}

.footer-layout1 .footer-widget {
    margin-bottom: 26px;
}

.footer-layout1 .footer-brand-bar {
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.footer-layout1 .footer-contact-bar {
    margin-bottom: 34px;
    padding-bottom: 28px;
}

.footer-layout1 .footer-nav-row,
.footer-layout1 .widget-area .row.justify-content-between {
    --bs-gutter-y: 18px;
}

/* Keep the restored contact footer; only the lower navigation is compact. */
.footer-layout1 .jhs-footer-essential {
    padding-bottom: 30px;
}
.footer-layout1 .jhs-footer-essential .footer-nav-row {
    padding-top: 8px;
    --bs-gutter-y: 20px;
    align-items: start;
}
.footer-layout1 .jhs-footer-essential .footer-widget {
    margin-bottom: 0;
}
.footer-layout1 .jhs-footer-essential .widget_title {
    margin-bottom: 12px;
}
.footer-layout1 .jhs-footer-essential .footer-widget.widget_nav_menu a {
    padding-top: 4px;
    padding-bottom: 4px;
}
@media (max-width: 767px) {
    .footer-layout1 .jhs-footer-essential { padding-bottom: 24px; }
}

/* ---------------------------------------------------------
   11. Shared icon language
   The template mixes filled glyphs, heavy circular badges and image icons.
   These rules keep functional icons crisp, restrained and consistently sized
   without changing the icon meanings in page markup.
--------------------------------------------------------- */
:where(.fa-light, .fa-regular, .fa-solid, .fa-brands, .fal, .far, .fas, .fab) {
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

/* Icons adjacent to text should read as precise interface affordances. */
:where(.th-btn, .jhs-p-btn, .jhs-cb-btn, .jhs-campus-btn, .jhs-primary-btn, .jhs-secondary-btn) > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    margin-inline: .25em 0;
    font-size: .9em;
    vertical-align: -.05em;
}

/* Shared contact and information icons: clean outlined tiles, no bulky dots. */
.info-box_text .icon,
.info-card_icon,
.header-layout1-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #dce5f2;
    border-radius: 8px;
    background: #f8faff;
    color: #001c54;
    box-shadow: none;
    line-height: 1;
}
.info-box_text .icon img,
.info-card_icon img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: none;
}
.info-box_text .icon:hover,
.info-card_icon:hover,
.header-layout1-icon:hover {
    border-color: #001c54;
    background: #001c54;
    color: #fff;
}

/* Icon-led content cards use one quiet circular motif across all sections. */
:where(.jhs-cb-icon, .jhs-ct-quick-icon, .jhs-enquiries-icon, .jhs-enq-cta-icon,
       .why-item_icon, .feature-item_icon, .choose-about_icon, .about-feature-icon,
       .service-icon, .process-icon, .story-box_icon, .info-card_icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dce5f2;
    background: #f3f7fc;
    color: #001c54;
    box-shadow: none;
}
:where(.jhs-cb-icon, .jhs-ct-quick-icon, .jhs-enquiries-icon, .jhs-enq-cta-icon,
       .why-item_icon, .feature-item_icon, .choose-about_icon, .about-feature-icon,
       .service-icon, .process-icon, .story-box_icon, .info-card_icon) i {
    color: currentColor;
}

/* Brand icons stay recognizable, while their controls match the rest of the UI. */
.th-social a,
.jhs-ct-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: none;
}
.th-social a:focus-visible,
.jhs-ct-social a:focus-visible {
    outline: 3px solid rgba(0, 28, 84, .2);
    outline-offset: 3px;
}

@media (max-width: 575px) {
    .info-box_text .icon,
    .info-card_icon,
    .header-layout1-icon { width: 38px; height: 38px; }
}

/* The CRM fab keeps the vendor's corner parking but is nudged onto the same
   vertical axis as the scroll-top above it (scroll-top centre = gutter 30px
   + 25px = 55px; fab 52px wide -> right 29px). The tooltip rides along. */
.jhsw-fab { right: 29px !important; }
.jhsw-tip { right: 93px !important; }
@media (max-width: 575px) {
    /* gutter 18px, fab-size 44px -> centre 40px; vendor mobile fab is 48px */
    .jhsw-fab { right: 16px !important; }
    .jhsw-tip { right: 72px !important; }
}