/* .card-no-logo::before {
  display: none;
}

.card-no-logo .card-body {
  padding-top: 1.5rem;
}

.card-no-logo .card-title {
  margin-top: 0;
} */

/* .card-no-logo .logo-placeholder {
  height: 70px;
  margin-bottom: 1.5rem;
} */
#book-a-space-button {
    font-size: 14px;
    border-color: #ffffff;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 8px 20px;
    text-align: center;
    z-index: 9;
    right: 0px;
    bottom: 45%;
    position: fixed;
    font-size: 18px;
    border-radius: 40px 0px 0px 40px;
    background-color: #75c597;
    color: #ffffff;
    cursor: pointer;
}

#book-a-space-button:hover {
    background-color: #010f44;
}

@media only screen and (max-width: 1440px) {
    #book-a-space-button {
        font-size: 12px;
        width: auto;
    }
}

.header-style3 .navbar-nav > li > a:hover {
    color: #357a4e;
}

.header-style3 .navbar-nav > li > a {
    font-size: 16px;
    font-weight: 700;
}

/* nav-menu.css caps .navbar-brand img at 43px; give the main logo more presence */
.header-style3 .navbar-brand img {
    max-height: 64px;
}

/* fixed-pixel arrow offset assumed the old smaller nav font size;
   center it on the link box regardless of font size instead */
.header-style3 .navbar > ul > li.has-sub > a:after {
    top: 50%;
    margin-top: -3px;
}

/* Let #nav grow to fill the space between the logo and attr-nav, then
   center the Home..Contact Us links within that grown box. Since #nav
   claims the free space via flex-grow before auto-margins are resolved,
   attr-nav ends up flush against the right edge without needing its own
   margin. */
.header-style3 #nav {
    flex: 1 1 auto;
    justify-content: center;
}

.butn-style3.navy {
    background: #010f44;
}

.butn-style3.navy:hover,
.butn-style3.navy:active,
.butn-style3.navy:focus {
    background: #75c597;
}

/* .attr-nav > ul > li > a sets navy text on every attr-nav link (incl. buttons);
   win the specificity fight so Book A Space stays white-on-navy */
.attr-nav .butn-style3 {
    color: #fff;
}

.header-style3 .attr-nav .butn-style3 {
    font-size: 13px;
    padding: 10px 20px;
}

.organiser-badge {
    display: flex;
    align-items: center;
    margin-right: 24px;
}

.organiser-badge .organiser-logo {
    height: 56px;
    width: auto;
}

.breadcrumb {
    display: inline-block;
    position: relative;
    padding: 15px 60px;
    border: 4px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    margin: 0 auto;
    z-index: 1;
}

.breadcrumb ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.breadcrumb ul li {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.breadcrumb ul li a {
    font-size: 18px;
    color: #ffffff;
    font-weight: 600;
}

.breadcrumb ul li:last-child a {
    color: #357a4e;
}

.breadcrumb ul li:after {
    content: '/';
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    font-family: Font Awesome\ 5 Free;
    padding: 0 10px 0 10px;
}

.breadcrumb ul li:last-child:after {
    content: none;
}

.butn-style3.secondary {
    color:#010f44;
}

.navbar-nav li.active > a {
    color: #357a4e !important;
}

.bg-blue {
    background: #010f44;
}

.bg-lightgreen {
    background: #e6ffd5;
}

.bg-lightblue {
    background: #57cbf5;
}

.card-style-special {
    background: #fff;
    padding: 1.8rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-style-special::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    transition: opacity 0.3s ease;
    opacity: 0.5;

    pointer-events: none; /* 🚀 this makes it non-blocking */
}

.card-style-special:hover::before {
    opacity: 1;
}

.card-style-special:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Logo banner: softer against green background */
.logo-banner {
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-banner img {
    height: 100%;
    object-fit: contain;
}

/* Text inside cards */
.card-title a {
    color: #1b3d1f; /* darker greenish tone for titles */
    text-decoration: none;
    transition: color 0.3s ease;
}

.card-title a:hover {
    color: #357a4e; /* still keep your brand blue accent */
}

.card-text {
    color: #444;
    line-height: 1.6;
}

.btn-special {
    background: #75c597; /* green button */
    color: #010f44; /* navy on mint = ~8.1:1, passes WCAG AAA */
    border-radius: 50px;
    padding: 0.55rem 1.3rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-special:hover {
    background: #58a97b; /* brand green-dark; keeps navy text legible */
    color: #010f44;
}

.btn-special:focus-visible {
    outline: 2px solid #010f44;
    outline-offset: 3px;
}

.btn-special i {
    transition: transform 0.3s ease;
}

.btn-special:hover i {
    transform: translateX(4px);
}

/* WHAT TO EXPECT */
.expect-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: #fff;
    padding: 3.5rem 1.5rem 2rem; /* more top padding to fit the circle */
    text-align: center;
    position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.expect-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 3px;
    border-radius: 25px;
    mask-composite: exclude; 
}

.expect-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12),
                0 0 18px rgba(58,199,121,0.35);
}

.expect-card .expect-icon {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%; /* keeps round shape */
    background: #fff;
    padding: 2px;

    position: absolute;
    top: -45px;   /* floats above */
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.expect-card h4 {
    margin-top: 1rem;
    font-weight: 700;
    color: #1b3d1f;
}

.expect-card p {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.5;
}
/* END */

/* KEY HIGHLIGHTS */
.bg-gradient-primary,
.bg-gradient-success {
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
}
.btn-success {
    background:#58a97b;
    border: none;
    color: #fff;
    transition: all 0.3s ease;
}
.btn-gradient-success:hover {
    opacity: 0.9;
    color: #fff;
    transform: translateY(-2px);
}

.highlight-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1rem;
}
.highlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.sub-card {
    padding: 1rem;
    border: 1px solid #eaeaea;
    border-radius: .75rem;
    background: #f9f9f9;
    transition: background 0.3s;
}
.sub-card:hover {
    background: #f1faff;
}

.programme-table-content {
    color: #ffffff;
}

.programme-fulltable {
    margin-bottom: 30px;
    color: #ffffff;
}

.printing .programme-fulltable {
    color:#000000;
}

.programme-timeslot {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
}

.programme-details-title {
    color: #57cbf5;
}

.programme-details-people {
    color: #000;
}

.programme-time {
    flex-basis: 90px;
    padding-right: 5px;
    border-right: 2px solid #D5DAE4;
    color: #010f44;
    font-weight:bold;
}

.timeline-divider {
    color: #000;
}

.programme-details {
    flex-basis: calc(100% - 90px);
    padding-left: 20px;
}

.timeline li {
    margin-bottom: .5rem;
}

.conf-tabs .nav-link, .conf-iwe-tabs .nav-link {
    border-radius: 50px;
    padding: 0.6rem 1.5rem;
    margin-right: 5px;
    font-weight: 600;
    background-color: #f1f5f9;
    transition: all 0.3s ease-in-out;
}

.conf-tabs .nav-link {
    color: #010f44;
}

.conf-iwe-tabs .nav-link {
    color: #357a4e;
}

.conf-tabs .nav-link:hover, .conf-iwe-tabs .nav-link:hover {
    color: #fff;
}

.conf-tabs .nav-link:hover, .conf-tabs .nav-link.active,
.conf-iwe-tabs .nav-link:hover, .conf-iwe-tabs .nav-link.active {
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
}

.conf-tabs .nav-link.active, .conf-iwe-tabs .nav-link.active {
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Smooth scroll effect when switching tabs */
.tab-content {
  scroll-behavior: smooth;
}
/* END */

/* EXPLORE */
.explore-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 2rem;
    border-radius: 16px;
    text-align: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-height: 180px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* SEACare & IWE buttons — brand gradient */
.explore-btn.seacare-btn,
.explore-btn.iwe-btn {
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
}

.explore-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0,0,0,0.20);
}

/* Logo centered inside the card */
.explore-btn-logo {
    max-width: 80%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Hide the pill label permanently */
.explore-btn .explore-more-label {
    display: none;
}

/* Desc: hidden at rest, fades in centered on hover */
.explore-btn .desc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 10px));
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.35s ease;
    width: 85%;
    text-align: center;
    line-height: 1.5;
    font-size: 0.88rem;
    color: #ffffff;
    z-index: 2;
    pointer-events: none;
}

.explore-btn:hover .desc {
    opacity: 1;
    transform: translate(-50%, -50%);
}

/* Content wrapper */
.explore-btn .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* Book A Space */
.border-contact{
    border-radius: 20px;
    border: 1px solid #57cbf5;
    padding:20px 20px;
}

#list-contact .row {
    display: flex;
    flex-wrap: wrap;
}

#list-contact .col-lg-4,
#list-contact .col-md-6,
#list-contact .col-sm-12 {
    display: flex;
    flex: 1 0 auto;
}

/* Ensure the .contactus-content elements take full height */
.contactus-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contactus-content {
    font-weight: 600;
    margin-bottom: 30px;
}

.contactus-content p {
    font-size: 14px;
    color: #2E2E2E;
    margin-bottom: 0;
}

.grecaptcha-badge {
    bottom: 75px !important;
    z-index: 999 !important;
}

.bg-very-light-bluegray {
    background-color: #e3e8f3;
}

.text-gold {
    color: #57cbf5;
}

/* Programme Table Design */
.programme-table-wrapper {
    margin-top: 20px;
}

.programme-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent!important;
}

.programme-table thead th {
    padding: 15px;
    text-align: left;
    border-bottom: 3px solid #000;
    font-weight: bold;
    font-size: 1.1em;
    color: #000;
}

.programme-table thead th:last-child {
    text-align: center;
}

.programme-table tbody td {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    vertical-align: top;
}

.programme-time-cell {
    font-weight: 600;
    color: #000;
}

.programme-agenda-cell {
    line-height: 1.6;
    font-weight: 600;
    color: #000;
    font-size: 1.5rem;
}

.programme-location-cell {
    color: #000;
    text-align: center;
    vertical-align: middle !important;
}

.programme-table tbody td {
    border-bottom: 1px solid #000;
}

.session-track {
    font-size: 0.95em;
    font-weight: bold;
    margin-bottom: 5px;
    font-style: normal;
}

.session-number {
    font-weight: bold;
    margin-bottom: 5px;
    color: #57cbf5;
}

.session-title {
    font-weight: 600;
    color: #357a4e;
    margin-bottom: 8px;
}

.programme-header-day {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px 20px;
}

.programme-header-venue {
    white-space: nowrap;
    font-size: 1.1rem;
}

.session-description {
    color: #000;
    margin-bottom: 8px;
    font-size: 1em;
    font-weight: normal;
}

.session-speakers,
.session-moderators {
    color: #000;
    margin-top: 5px;
}

/* Reference of Speaker */
.speaker-content {
    font-weight:500;
    color: rgba(0, 0, 0, 60%)
}

.speaker-name {
    color: rgba(0, 0, 0, 90%)
}

/* Speaker CSS */
#speakers {
    padding: 60px 0 80px;
}
.speaker-swiper-section {
    position: relative;
    padding-bottom: 60px;
}
.speaker-card {
    text-align: center;
    cursor: default;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Keeps your text and images centered */
    height: 100%;
}
.speaker-card.has-bio {
    cursor: pointer;
}
.speaker-card:hover .speaker-img-wrap {
    transform: translateY(-6px);
}
.speaker-img-wrap {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto 16px;
    border: 4px solid #75c597;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #e8f7fd;
}
.speaker-card:hover .speaker-img-wrap {
    box-shadow: 0 12px 32px rgba(117, 197, 152, 0.30);
}
.speaker-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    border-radius: 50%;
}
.moderator-badge, .moderator-badge-modal {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #75c597;
    color: #000;
    padding: 3px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #000;
    z-index: 10;
    white-space: nowrap;
}
.moderator-badge-modal {
    bottom: 0px!important;
}
.speaker-card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #010f44;
    margin-bottom: 4px;
}
.speaker-card h6 {
    font-size: 0.78rem;
    color: #555;
    font-weight: 500;
    line-height: 1.4;
}
.speaker-info {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;  
    overflow: hidden;
    height: 4.8rem;
}

.speaker-info p {
    margin: 0 0 0px !important;
}

.speaker-info h6 {
    margin-bottom: 0px !important;
}

.speaker-bio-badge {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.72rem;
    color: #357a4e;
    border: 1px solid #75c597;
    border-radius: 20px;
    padding: 2px 10px;
    letter-spacing: 0.03em;
}
/* Swiper nav buttons */
.speaker-swiper-section .swiper-button-next,
.speaker-swiper-section .swiper-button-prev {
    color: #010f44;
    background: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    /* Compensate for pagination height so arrows sit between the 2 rows */
    top: calc(50%);
    transform: translateY(-50%);
}
.speaker-swiper-section .swiper-button-next::after,
.speaker-swiper-section .swiper-button-prev::after {
    font-size: 1rem;
    font-weight: 900;
}
.speaker-swiper-section .swiper-pagination-bullet-active {
    background: #010f44;
}
/* Modal */
#speakerBioModal .modal-header {
    border-bottom: none;
    padding-bottom: 0;
}
#speakerBioModal .speaker-modal-img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
    border: 4px solid #75c597;
    box-shadow: 0 4px 16px rgba(117, 197, 152, 0.30);
    margin-bottom: 16px;
}
#speakerBioModal .speaker-modal-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #010f44;
    margin-bottom: 4px;
}
#speakerBioModal .speaker-modal-designation {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 16px;
}
#speakerBioModal .speaker-modal-bio {
    font-size: 0.92rem;
    color: #333;
    line-height: 1.7;
    border-top: 1px solid #e8e8e8;
    padding-top: 16px;
    margin-top: 4px;
}
#speakerBioModal .speaker-modal-bio p { margin-bottom: 0.6em; }


/* =====================
   LATEST NEWS CARDS
   ===================== */
.news-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* Full-bleed image */
.news-card-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.news-card:hover .news-card-img {
    transform: scale(1.04);
}

/* Card body */
.news-card-body {
    padding: 1.25rem 1.25rem 1.4rem;
}

.news-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    margin-bottom: 0.85rem;
}

/* Date + location rows */
.news-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.news-card-meta span {
    font-size: 0.82rem;
    color: #555;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.news-card-meta i {
    color: #010f44;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Learn More button — brand gradient pill */
.news-card-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    letter-spacing: 0.02em;
}

.news-card-btn:hover {
    opacity: 0.88;
    color: #ffffff;
    transform: translateY(-2px);
}

/* =====================
   NEWS PAGINATION
   ===================== */
.custom-pagination .pagination {
    gap: 6px;
}

.custom-pagination .page-item .page-link {
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #010f44;
    background: #f0f4ff;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    min-width: 40px;
    text-align: center;
    line-height: 1.6;
    box-shadow: none;
}

.custom-pagination .page-item .page-link:hover {
    background: #dce6ff;
    color: #010f44;
    transform: translateY(-2px);
}

.custom-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(14, 56, 114, 0.30);
}

.custom-pagination .page-item.disabled .page-link {
    background: #f0f4ff;
    color: #aab4cc;
    cursor: not-allowed;
    transform: none;
}


@media screen and (max-width:1360px) {
    .butn-style3.medium {
        padding: 12px 12px;
        font-size: 13px;
    }

    .navbar-nav > li > a {
        font-size: 13px;
    }

    .navbar > ul > li.has-sub > a:after {
        top: 27px;
        right: -3px; 
    }
}

@media screen and (max-width:1262px) {
    .butn-style3.medium {
        padding: 10px!important;
        font-size: 12px!important;
    }

    .navbar-nav > li > a {
        font-size: 12px!important;
    }

    .navbar > ul > li.has-sub > a:after {
        top: 26px;
        right: -1px;
    }
}

@media screen and (max-width:1050px) {
    .butn-style3.medium {
        padding: 8.5px!important;
        font-size: 11px;
    }

    .navbar-nav > li > a {
        font-size: 11px;
    }

    .navbar > ul > li.has-sub > a:after {
        top: 26px;
        right: -1px;
    }
}

@media screen and (max-width:1025px) {
    .navbar-nav > li > a {
        font-size: 11px !important;
    }

    .butn-style3.medium {
        font-size: 10px !important;
    }
}

@media screen and (min-width: 992px) {
    .explore-btn:hover .content {
        opacity: 0;
    }
    .explore-btn:hover .explore-more-label {
        opacity: 0;
    }
    .explore-btn:hover .desc {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@media screen and (max-width:991px) {
    .card-style-special {
        padding: 1rem;
    }
    .explore-btn {
        align-items: center;
        justify-content: flex-start;
        padding: 1.5rem;
    }
    .explore-btn .content {
        opacity: 1 !important;
        flex-direction: row;
        gap: .5rem;
        order: 1;
    }
    .explore-btn .explore-more-label {
        order: 3;
        margin-top: auto;
    }
    .explore-btn .desc {
        position: static;
        opacity: 1 !important;
        transform: none !important;
        margin-top: .5rem;
        padding-bottom: 1rem;
        max-width: 100%;
        pointer-events: auto;
        order: 2;
    }
}

@media screen and (max-width:769px) {
    .programme-agenda-cell {
        font-size: 1.3rem;
    }
    .programme-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 20px -15px;
    }
    .programme-table {
        min-width: 600px;
    }
}

/* =====================
   NAV DROPDOWN FIX
   Last nav items open dropdowns to the left to prevent right-edge overflow
   ===================== */

/* Shift the entire nav a bit to the left so right-side dropdowns don't overflow */
#nav {
    margin-right: 3rem !important;
}

@media screen and (max-width: 1400px) {
    .navbar-nav li > ul {
        min-width:150px;
    }
}

@media screen and (max-width: 1200px) {
    #nav {
        margin-right: 4rem !important;
    }
    .navbar-nav li > ul {
        min-width:120px;
    }
    .navbar-nav li a {
        font-size: 12px;
    }
}

/* =====================
   INTEREST FORM
   ===================== */

/* plugins/default.css only sets this min-height on .form-control, leaving
   <select class="form-select"> shorter than the text inputs beside it */
#interest-form .form-select,
#media-registration-form .form-select {
    min-height: 54px;
}

#interest-form .form-check-input {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}

#interest-form .form-check-label {
    cursor: pointer;
    padding-left: 2px;
}

/* =====================
   INDUSTRY SPOTLIGHT
   ===================== */
.spotlight-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.spotlight-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.16);
}
.spotlight-card .card-img-top {
    width: 100%;
    height: 520px;
    display: block;
    object-fit: cover;
    object-position: top center;
    cursor: pointer;
}
.spotlight-card .card-body {
    display: none;
}
.spotlight-card .card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #010f44;
    margin-bottom: 0.4rem;
}
.spotlight-card .card-subtitle {
    font-size: 0.85rem;
    color: #57cbf5;
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.spotlight-card .card-text {
    font-size: 0.88rem;
    color: #444;
    flex: 1;
}
.spotlight-card .card-footer {
    background: transparent;
    border-top: 1px solid #e8ecf3;
    padding: 1rem 1.25rem;
}

@media screen and (max-width: 992px) {
    .spotlight-card .card-img-top {
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
}

/* =====================
   ABOUT PAGE
   ===================== */
.micropage-hero {
    position: relative;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* no overlay — matching About Qube visual */
}
.micropage-hero::before {
    display: none;
}
.micropage-hero .container {
    position: relative;
    z-index: 1;
}
.micropage-hero h1 {
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
    text-wrap: balance;
}
.micropage-hero-mobile {
    min-height: 320px;
}

.why-malaysia-bg {
    position: relative;
    padding-top: 5.5rem;
    padding-bottom: 6rem;
    background-color: #010f44;
}

/* Responsive Why-Malaysia background. The section used to be duplicated in the
   markup (one node per image). A single node now swaps its photo at the
   breakpoint. No inline background-image is set, so no data-background
   attribute is used here - these rules are the only source. */
.why-malaysia-bg--responsive {
    background-image: url("/img/banner/WhyMalaysiaDesktop.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    min-height: 380px;
}

@media screen and (max-width: 575.98px) {
    .why-malaysia-bg--responsive {
        background-image: url("/img/banner/WhyMalaysiaMobile.png");
        min-height: 0;
    }
}
.why-malaysia-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(1, 15, 68, 0.9) 0%, rgba(1, 15, 68, 0.62) 55%, rgba(1, 15, 68, 0.35) 100%);
}
.why-malaysia-bg .container {
    position: relative;
    z-index: 1;
}
.why-malaysia-bg h2 {
    letter-spacing: -0.01em;
}
.why-malaysia-bg p {
    max-width: 68ch;
    text-wrap: pretty;
}

#why-join h2 {
    text-wrap: balance;
}

.why-hsa-numbered-item {
    display: flex;
    gap: 18px;
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(1, 15, 68, 0.04);
    transition: all 0.3s ease;
    height: 100%;
    width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .why-hsa-numbered-item {
        transition: all 0.3s ease;
    }
    .why-hsa-numbered-item:hover {
        transform: translateY(-3px);
    }
}
.why-hsa-numbered-item:hover {
    background: #f8fafc;
    border-color: #75c597;
    box-shadow: 0 10px 25px rgba(1, 15, 68, 0.08);
}
.why-hsa-numbered-item .why-hsa-number {
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #010f44;
}
.why-hsa-numbered-item h5 {
    color: #010f44 !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.why-hsa-numbered-item p {
    color: #475569 !important;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}
.why-hsa-numbered-item .why-hsa-new-badge {
    display: inline-block;
    background: #dc3545;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 20px;
    padding: 2px 10px;
    margin-left: 8px;
    vertical-align: 2px;
}

.industry-chip {
    background: #fff;
    border: 1px solid #dfe4f0;
    color: #010f44;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .industry-chip {
        transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .industry-chip:hover {
        transform: translateY(-2px);
    }
}
.industry-chip:hover {
    border-color: #75c597;
    background: #75c597;
    color: #fff;
}
.industry-chip:active {
    background: #58a97b;
    border-color: #58a97b;
    color: #fff;
}

#official-venue {
    padding-top: 5rem;
    padding-bottom: 5.5rem;
}
#official-venue .title-style2 h2 {
    letter-spacing: -0.01em;
}
#official-venue .ratio {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(1, 15, 68, 0.08);
    box-shadow: 0 18px 50px rgba(1, 15, 68, 0.16);
}
/* Focus visibility (About sections): navy ring on light bg, green ring on navy bg */
#official-venue .butn-style3:focus-visible {
    outline: 2px solid #010f44;
    outline-offset: 3px;
}
#official-venue + section .butn-style3:focus-visible {
    outline: 2px solid #75c597;
    outline-offset: 3px;
}



/* ---------------------------------------------------------------------------
   Global contrast guard for mint buttons.

   Many CTAs carry Bootstrap's `text-white` utility, which is `!important` and
   would force white text onto the #75c597 background (~2.2:1, fails WCAG AA).
   These rules re-assert navy on any mint-surfaced button and white on their
   navy hover state only. Kept in one place so new buttons never regress; the
   earlier per-section patches above are now redundant but harmless.
   --------------------------------------------------------------------------- */
.butn-style3,
.butn-style3.text-white,
.btn-special {
    color: #010f44 !important;
}

.butn-style3:hover,
.butn-style3:active,
.butn-style3:focus,
.butn-style3.text-white:hover,
.butn-style3.text-white:active,
.butn-style3.text-white:focus {
    color: #fff !important; /* navy hover background */
}

/* Navy-surfaced variants stay white in both states (white on #010f44 is fine). */
.butn-style3.secondary,
.butn-style3.secondary.text-white,
.butn-style3.navy,
.butn-style3.navy.text-white {
    color: #fff !important;
}

.butn-style3.secondary:hover,
.butn-style3.secondary:active,
.butn-style3.secondary:focus,
.butn-style3.navy:hover,
.butn-style3.navy:active,
.butn-style3.navy:focus {
    color: #010f44 !important; /* mint hover background */
}

/* ── Green CTA Buttons (Brand Green Normal, Light Blue Hover, Dark Blue Font) ── */
.btn-hsa-green {
    background: #75c597 !important;
    background-color: #75c597 !important;
    color: #010f44 !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-hsa-green span,
.btn-hsa-green i {
    color: #010f44 !important;
}

.btn-hsa-green:hover,
.btn-hsa-green:active,
.btn-hsa-green:focus {
    background: #57cbf5 !important;
    background-color: #57cbf5 !important;
    color: #010f44 !important;
    box-shadow: 0 4px 16px rgba(87, 203, 245, 0.4) !important;
}

.btn-hsa-green:hover span,
.btn-hsa-green:hover i,
.btn-hsa-green:active span,
.btn-hsa-green:active i,
.btn-hsa-green:focus span,
.btn-hsa-green:focus i {
    color: #010f44 !important;
}

/* =====================
   HOMEPAGE
   Shape system: soft containers 14-16px, inputs 10px.
   Motion: hover lifts gated behind prefers-reduced-motion.
   Shared classes (programme-table, admin-card) are always
   scoped under home page section ids to avoid leaks.
   ===================== */
.conference {
    color: #010f44;
}

#carouselMiddleBanner .carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (min-width: 768px) {
    #carouselMiddleBanner .carousel-item img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }
}

#why-hsa,
#journey-impact,
#shaping-future,
#interest-form {
    padding-top: 5rem;
    padding-bottom: 5.5rem;
}
#event-overview {
    padding-top: 5rem;
    padding-bottom: 5.5rem;
}
#why-hsa h2,
#journey-impact h2,
#shaping-future h2,
#event-overview h2,
#interest-form h2 {
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.why-hsa-point {
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    border-radius: 12px;
    padding: 20px 24px;
    color: #fff;
}
.why-hsa-point .why-hsa-point-title span {
    font-style: normal;
    color: #a9ecc4;
}
.why-hsa-icon-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0.65rem 1rem;
    border-radius: 14px;
    transition: background-color 0.25s ease;
}
.why-hsa-icon-item:hover {
    background: #eef1f8;
}
.why-hsa-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 100px;
    background: #75c597;
    padding: 2.5px;
    box-sizing: border-box;
    flex-shrink: 0;
    position: relative;
}
.why-hsa-icon-circle::before {
    content: '';
    position: absolute;
    inset: 2.5px;
    border-radius: 100px;
    background: #fff;
}
.why-hsa-icon-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    padding: 8px;
}

.journey-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    max-width: 900px;
    margin: 0 auto;
}
#journey-impact,
#journey-impact h2,
.journey-stat,
.journey-stat .journey-stat-value,
.journey-stat .journey-stat-label {
    font-family: var(--font-hsa) !important;
}

.journey-stat .journey-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    min-height: 2.4rem;
}
.journey-stat .journey-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.25rem;
}

.shaping-future-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e3e8f3;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .shaping-future-card {
        transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    }
    .shaping-future-card:hover {
        transform: translateY(-4px);
    }
    .why-hsa-icon-circle {
        transition: transform 0.25s ease;
    }
    .why-hsa-icon-item:hover .why-hsa-icon-circle {
        transform: scale(1.05);
    }
}
.shaping-future-card:hover {
    border-color: rgba(117, 197, 151, 0.5);
    box-shadow: 0 16px 40px rgba(1, 15, 68, 0.12);
}
.shaping-future-card img {
    height: 200px;
    width: 100%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.shaping-future-card .shaping-future-title {
    color: #010f44;
    letter-spacing: -0.01em;
}
.shaping-future-card .p-3 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.shaping-future-card .p-3 .butn-style3 {
    margin-top: auto;
    align-self: flex-start;
}
#shaping-future .butn-style3:not(.navy) {
    color: #010f44;
}
#shaping-future .butn-style3:not(.navy):hover,
#shaping-future .butn-style3:not(.navy):active,
#shaping-future .butn-style3:not(.navy):focus {
    color: #fff;
}

#event-overview .tab-style1 .resp-tabs-list li {
    background: #fff;
    color: #010f44;
    border: 2px solid #dfe4f0;
    font-weight: 600;
}
#event-overview .tab-style1 .resp-tabs-list li:hover {
    border-color: #75c597;
}
#event-overview .tab-style1 .resp-tabs-list li.resp-tab-active {
    background: #75c597;
    color: #010f44;
    border-color: #75c597;
}
#event-overview .tab-style1 .resp-tabs-list li:focus-visible {
    outline: 2px solid #010f44;
    outline-offset: 2px;
}

#event-overview .table-responsive {
    background: #fff;
    border: 1px solid #e3e8f3;
    border-radius: 16px;
}
#event-overview .programme-table thead th {
    background: #010f44;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: none;
    padding: 0.9rem 1rem;
}
#event-overview .programme-table tbody td {
    padding: 1rem;
    border-bottom: 1px solid #e3e8f3;
    vertical-align: top;
}
#event-overview .programme-table tbody tr:last-child td {
    border-bottom: none;
}
#event-overview .programme-table tbody tr:hover td {
    background: #f6f8fc;
}
#event-overview .programme-time-cell {
    color: #010f44;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
#event-overview .programme-agenda-cell {
    color: #010f44;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
}
#event-overview .programme-location-cell {
    color: #575a7b;
    font-size: 0.9rem;
}

#interest-form-form {
    background: #fff;
    border: 1px solid #e3e8f3;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 16px 40px rgba(1, 15, 68, 0.08);
}
@media (min-width: 768px) {
    #interest-form-form {
        padding: 2.5rem;
    }
}
#interest-form-form .form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #010f44;
    margin-bottom: 0.4rem;
}
#interest-form-form .form-control,
#interest-form-form .form-select {
    border-color: #dfe4f0;
    border-radius: 10px;
}
#interest-form-form .form-control:focus,
#interest-form-form .form-select:focus,
#interest-form-form .form-check-input:focus {
    border-color: #75c597;
    box-shadow: 0 0 0 0.2rem rgba(117, 197, 151, 0.25);
}
#interest-form-form .form-check-input {
    border-color: #dfe4f0;
}
#interest-form-form .form-check-input:checked {
    background-color: #75c597;
    border-color: #75c597;
}
/* !important required to beat Bootstrap .text-white on the submit button for WCAG AA contrast */
#interest-form-form .butn-style3 {
    color: #010f44 !important;
}
#interest-form-form .butn-style3:hover,
#interest-form-form .butn-style3:active,
#interest-form-form .butn-style3:focus {
    color: #fff !important;
}

/* =====================
   FOOTER
   ===================== */
.footer-logo {
    max-width: 160px;
}

/* =====================
   EXHIBITION PAGE
   ===================== */
.exhibition-highlights-eyebrow {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #75c597 !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 10px !important;
    display: block;
}


.video-frame {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.reason-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border-top: 4px solid #75c597;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.reason-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
}
.reason-card .reason-number {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #010f44;
}
.reason-card .reason-new-badge {
    display: inline-block;
    background: #dc3545;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    border-radius: 20px;
    padding: 2px 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Shell scheme package: booth render paired with the inch-by-inch inclusion
   list. The image sits on a soft card so the white render does not float on
   the section background. */
.booth-visual {
    background: #ffffff;
    border: 1px solid #e3e8f3;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(1, 15, 68, 0.1);
}

.booth-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Itemised booth inclusion list with a mint tick per row. */
.booth-spec-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.booth-spec-list li {
    position: relative;
    padding-left: 32px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #010f44;
}

.booth-spec-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 7 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #357a4e;
    background: rgba(117, 197, 151, 0.18);
    border-radius: 50%;
}

.buyer-pill {
    background: #fff;
    border: 1px solid #e3e8f3;
    color: #010f44;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    transition: all 0.25s ease;
}
.buyer-pill:hover {
    border-color: #75c597;
    background: #75c597;
    color: #fff;
    transform: translateY(-2px);
}

/* ============================================================
   HEALTH SUMMIT ASIA — MODERN BRAND GUIDE & ISW DESIGN SYSTEM
   ============================================================ */

/* ── Brand Guide Tokens ──────────────────────────────────── */
:root {
    --hsa-navy: #010f44;
    --hsa-navy-dark: #000a2e;
    --hsa-sky: #57cbf5;
    --hsa-green: #75c597;
    --hsa-green-dark: #58a97b;
    /* Text-on-white variants. The display sky/green above are only ~1.9:1 on
       white, so they fail WCAG AA for body text. Use these for any sky/green
       that appears as ink on a light surface; keep the display values for
       large fills, borders and backgrounds where text sits on navy instead. */
    --hsa-sky-text: #157fa3;   /* 4.57:1 on white */
    --hsa-green-text: #357a4e; /* 5.19:1 on white */
    --hsa-black: #000000;
    --hsa-gray: #939598;
    --hsa-gray-light: #f8fafd;
    --hsa-border: #e3e8f3;
    --font-hsa: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* .text-sky was referenced in markup but never defined, so it silently fell
   back to inherit. Defined here with the accessible sky so the clock, envelope
   and phone icons it marks are legible on the light backgrounds they sit on.
   (The display sky #57cbf5 is only 1.86:1 on white; this variant passes AA.) */
.text-sky {
    color: var(--hsa-sky-text) !important;
}

/* ── Typography Sitewide (Brand Guide: Montserrat) ────────── */
body, h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.alt-font, .main-font, .navbar, .navbar-nav,
.butn-style3, .btn, .breadcrumb,
input, button, select, textarea {
    font-family: var(--font-hsa) !important;
}

/* ── Floating Action Buttons (Following ISW Treatment) ──── */
.floating-btns {
    position: fixed;
    right: 20px;
    top: 50%;
    z-index: 990;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transform: translateY(-50%) translateX(24px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.floating-btns.is-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

.floating-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border-radius: 8px;
    text-decoration: none !important;
    font-family: var(--font-hsa);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(1, 15, 68, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating-btn:hover {
    transform: translateY(-2px) translateX(-4px);
    box-shadow: 0 10px 28px rgba(1, 15, 68, 0.32);
    color: #ffffff !important;
}

.floating-btn i {
    font-size: 15px;
    line-height: 1;
    color: #ffffff !important;
}

.floating-btn span {
    color: #ffffff !important;
}

/* Book a Space carries the burnt-orange accent so it reads as the primary
   action against the green Conference Ticket and navy Visitor buttons.
   White wording and a white left edge, matching the other two buttons. */
.floating-btn--book {
    background: #e07020;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 4px solid #ffffff;
    box-shadow: 0 6px 20px rgba(224, 112, 32, 0.4);
    font-weight: 700 !important;
}
/* Wording is white on the orange, matching the other floating buttons.
   Note: white on #e07020 is ~3.2:1, below the 4.5:1 WCAG AA threshold for
   small text. Navy would pass (5.6:1) if that ever needs to change. */
.floating-btn--book,
.floating-btn--book:hover,
.floating-btn--book i,
.floating-btn--book span,
.floating-btn--book:hover i,
.floating-btn--book:hover span {
    color: #ffffff !important;
}
.floating-btn--book:hover {
    background: #d06818;
    border-left-color: #ffffff;
    box-shadow: 0 10px 28px rgba(224, 112, 32, 0.55);
    transform: translateY(-2px) translateX(-4px);
}

/* Floating action buttons. Remapped from the Tailwind sky/emerald values onto
   the HSA brand set. The green surface carries navy text because white on
   #75c597 is only ~2.1:1 and fails WCAG AA. */
.floating-btn--ticket {
    background: linear-gradient(135deg, #58a97b 0%, #75c597 100%);
    color: #010f44 !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid #ffffff;
    box-shadow: 0 6px 20px rgba(1, 15, 68, 0.3);
    font-weight: 700 !important;
}
.floating-btn--ticket:hover {
    background: linear-gradient(135deg, #010f44 0%, #58a97b 100%);
    color: #ffffff !important;
    border-left-color: #ffffff;
    box-shadow: 0 10px 28px rgba(1, 15, 68, 0.42);
    transform: translateY(-2px) translateX(-4px);
}

.floating-btn--programme {
    background: linear-gradient(135deg, #010f44 0%, #57cbf5 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid #ffffff;
    box-shadow: 0 6px 20px rgba(1, 15, 68, 0.3);
    font-weight: 700 !important;
}
.floating-btn--programme:hover {
    background: linear-gradient(135deg, #010f44 0%, #010f44 100%);
    color: #ffffff !important;
    border-left-color: #57cbf5;
    box-shadow: 0 10px 28px rgba(1, 15, 68, 0.42);
    transform: translateY(-2px) translateX(-4px);
}

.floating-btn--visitor,
.floating-btn--contact {
    background: linear-gradient(135deg, #010f44 0%, #57cbf5 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 4px solid #ffffff;
    box-shadow: 0 6px 20px rgba(1, 15, 68, 0.3);
    font-weight: 700 !important;
}
.floating-btn--visitor:hover,
.floating-btn--contact:hover {
    background: linear-gradient(135deg, #010f44 0%, #010f44 100%);
    color: #ffffff !important;
    border-left-color: #57cbf5;
    box-shadow: 0 10px 28px rgba(1, 15, 68, 0.42);
    transform: translateY(-2px) translateX(-4px);
}

@media (max-width: 768px) {
    .floating-btns {
        right: 12px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%) translateX(24px);
        gap: 8px;
    }
    .floating-btns.is-visible {
        transform: translateY(-50%) translateX(0);
    }
    .floating-btn {
        padding: 9px 12px;
        font-size: 12px;
        border-radius: 6px;
        gap: 7px;
    }
    .floating-btn i {
        font-size: 13px;
    }
}

/* ── Modern Back to Top Button ───────────────────────────── */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #010f44;
    color: #ffffff;
    border: 2px solid #75c597;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 995;
    box-shadow: 0 6px 20px rgba(1, 15, 68, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.back-to-top:hover {
    background: #75c597;
    color: #010f44;
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 8px 24px rgba(117, 197, 151, 0.45);
}

.back-to-top i {
    font-size: 15px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.back-to-top:hover i {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .back-to-top {
        right: 16px;
        bottom: 16px;
        width: 38px;
        height: 38px;
    }
}

/* ── Brand Guide Inner Page Top Banners ──────────────────── */
.page-top-banner {
    position: relative;
    background-color: #010f44;
    background-image: url('/img/banner/micropage-banner.jpg');
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    padding: 85px 0 70px 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .page-top-banner {
        background-image: url('/img/banner/micropage-banner-mobile.jpg');
        background-position: center center;
        padding: 55px 0 45px 0;
    }
}

.page-top-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(1, 15, 68, 0.88) 0%, rgba(1, 15, 68, 0.65) 55%, rgba(1, 15, 68, 0.35) 100%);
    pointer-events: none;
}

.page-top-banner .container {
    position: relative;
    z-index: 2;
}

.page-top-banner h1,
.page-top-banner .page-title {
    color: #ffffff !important;
    font-weight: 700;
    font-family: var(--font-hsa);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(1, 15, 68, 0.6);
    margin-bottom: 1.25rem;
}

/* Frosted Glass Breadcrumbs */
.page-top-banner .breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    background: rgba(1, 15, 68, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(87, 203, 245, 0.35);
    border-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

.page-top-banner .breadcrumb ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0;
}

.page-top-banner .breadcrumb ul li {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

.page-top-banner .breadcrumb ul li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-top-banner .breadcrumb ul li a:hover {
    color: #57cbf5;
}

.page-top-banner .breadcrumb ul li:last-child a,
.page-top-banner .breadcrumb ul li:last-child span {
    color: #75c597;
    font-weight: 700;
}

.page-top-banner .breadcrumb ul li:after {
    content: '/';
    color: rgba(87, 203, 245, 0.6);
    font-size: 13px;
    font-weight: 400;
    padding: 0 10px;
}

.page-top-banner .breadcrumb ul li:last-child:after {
    content: none;
}

/* ── Exhibition High-Res Video Component ─────────────────── */
.hsa-video-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #010f44;
    box-shadow: 0 16px 48px rgba(1, 15, 68, 0.35);
    border: 1px solid rgba(87, 203, 245, 0.3);
}

.hsa-video-container video,
.hsa-video-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #010f44;
    border: 0;
}

.hsa-video-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(1, 15, 68, 0.8);
    backdrop-filter: blur(8px);
    color: #57cbf5;
    border: 1px solid rgba(87, 203, 245, 0.4);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 3;
}

.hsa-video-pulse-line {
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #010f44 0%, #75c597 100%);
    position: relative;
}

/* ── Conference Ticket CTA After Pricing ─────────────────── */
.conference-ticket-card {
    background: linear-gradient(135deg, #010f44 0%, #010f44 100%);
    border: 1px solid rgba(87, 203, 245, 0.3);
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 14px 40px rgba(1, 15, 68, 0.2);
    position: relative;
    overflow: hidden;
    margin-top: 32px;
}

.conference-ticket-card::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(117, 197, 151, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.conference-ticket-btn {
    background: #75c597;
    color: #010f44 !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.01em;
    padding: 14px 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.25s ease;
    border: none;
    box-shadow: 0 4px 16px rgba(1, 15, 68, 0.12);
    text-decoration: none !important;
}

.conference-ticket-btn i {
    font-size: 18px;
    color: #010f44;
}

.conference-ticket-btn:hover {
    background: #5ec084;
    color: #010f44 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(117, 197, 151, 0.4);
}

.badge-claimable {
    background: rgba(117, 197, 151, 0.15);
    color: #357a4e;
    border: 1px solid rgba(117, 197, 151, 0.35);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
}

/* ── Unified Programme & Event Overview Card Styling ─────── */
.programme-unified-section .tab-style1 .resp-tabs-list li,
#conference-programme .tab-style1 .resp-tabs-list li {
    background: #fff;
    color: #010f44;
    border: 2px solid #dfe4f0;
    font-weight: 600;
    border-radius: 30px;
    padding: 10px 24px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.programme-unified-section .tab-style1 .resp-tabs-list li:hover,
#conference-programme .tab-style1 .resp-tabs-list li:hover {
    border-color: #75c597;
    color: #010f44;
}

.programme-unified-section .tab-style1 .resp-tabs-list li.resp-tab-active,
#conference-programme .tab-style1 .resp-tabs-list li.resp-tab-active {
    background: #75c597;
    color: #010f44;
    border-color: #75c597;
    font-weight: 700;
}

.programme-unified-card {
    background: #fff;
    border: 1px solid #e3e8f3;
    border-radius: 16px;
    box-shadow: 0 6px 24px rgba(1, 15, 68, 0.05);
    overflow: hidden;
    margin-bottom: 24px;
}

.programme-theme-banner {
    background: linear-gradient(135deg, #010f44 0%, #0a1f63 100%);
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 2px solid #57cbf5;
}

.programme-theme-title {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.programme-theme-tag {
    background: rgba(87, 203, 245, 0.2);
    color: #57cbf5;
    border: 1px solid rgba(87, 203, 245, 0.4);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.programme-theme-venue {
    color: #357a4e;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.programme-table-clean {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.programme-table-clean thead th {
    background: #010f44;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    padding: 1rem 1.25rem;
}

.programme-table-clean tbody td {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #e3e8f3;
    vertical-align: middle;
}

.programme-table-clean tbody tr:last-child td {
    border-bottom: none;
}

.programme-table-clean tbody tr:hover td {
    background: #f6f8fc;
}

.session-format-chip {
    display: inline-block;
    background: #f0f4fa;
    color: #010f44;
    border: 1px solid #d3dced;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
}

.session-break-chip {
    display: inline-block;
    background: rgba(117, 197, 151, 0.15);
    color: #58a97b;
    border: 1px solid rgba(117, 197, 151, 0.35);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 16px;
}

/* ══════════════════════════════════════════════════════════
   ISW-STYLE CONFERENCE SCHEDULE (FOLLOWING BRAND GUIDE)
   ══════════════════════════════════════════════════════════ */
#conference-programme,
#clinic-schedule,
.schedule-tabs,
.schedule-tab,
.schedule-card,
.schedule-header,
.schedule-timeline,
.schedule-item,
.session-modal {
    font-family: 'Montserrat', sans-serif;
}

#conference-programme *:not(i):not([class*="fa-"]):not([class*="ti-"]),
#clinic-schedule *:not(i):not([class*="fa-"]):not([class*="ti-"]),
.schedule-card *:not(i):not([class*="fa-"]):not([class*="ti-"]),
.schedule-header *:not(i):not([class*="fa-"]):not([class*="ti-"]),
.schedule-timeline *:not(i):not([class*="fa-"]):not([class*="ti-"]),
.schedule-item *:not(i):not([class*="fa-"]):not([class*="ti-"]),
.session-modal *:not(i):not([class*="fa-"]):not([class*="ti-"]) {
    font-family: 'Montserrat', sans-serif;
}

/* Explicitly preserve FontAwesome icon font styles inside schedule containers */
.schedule-card i.fas,
.schedule-card i.far,
.schedule-card i.fab,
.schedule-card i.fa,
.schedule-card i[class*="fa-"],
.schedule-item i.fas,
.schedule-item i.far,
.schedule-item i.fab,
.schedule-item i.fa,
.schedule-item i[class*="fa-"],
.schedule-header i.fas,
.schedule-header i.far,
.schedule-header i[class*="fa-"],
.session-modal i.fas,
.session-modal i.far,
.session-modal i[class*="fa-"] {
    font-family: var(--_fa-family, "Font Awesome 7 Free") !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased;
}

/* Canonical section eyebrow.
   The site previously had four near-identical variants with three different
   letter-spacing values (.schedule-eyebrow 0.14em, .video-eyebrow 0.25em,
   .lux-section__eyebrow, and inline 0.5px). This is now the single source;
   the old class names remain as aliases so existing markup keeps working. */
.hsa-eyebrow,
.schedule-eyebrow,
.video-eyebrow,
.lux-section__eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #357a4e;
    margin-bottom: 8px;
    display: block;
}

.schedule-main-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(26px, 3.5vw, 38px);
    font-weight: 700 !important;
    font-style: normal !important;
    color: #010f44;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
}

.schedule-main-title span,
.text-gradient-brand {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: #75c597;
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.schedule-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #010f44;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Schedule Tabs */
.schedule-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.schedule-tab {
    padding: 14px 32px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 2px solid #dfe4f0;
    border-radius: 8px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
}

.schedule-tab:hover {
    border-color: #010f44;
    color: #010f44;
}

.schedule-tab--active {
    background: #010f44 !important;
    border-color: #010f44 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(1, 15, 68, 0.2);
}

.schedule-tab--active.schedule-tab--green {
    background: #75c597 !important;
    border-color: #75c597 !important;
    color: #010f44 !important;
}

/* Schedule Card Container */
.schedule-card {
    background: #ffffff;
    border: 1px solid rgba(1, 15, 68, 0.08);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(1, 15, 68, 0.06);
    padding: 40px 48px;
    margin-bottom: 40px;
    transition: box-shadow 0.3s ease;
}

/* Schedule Header */
.schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #eef2f6;
}

/* Day header. Previously the day number, date and theme were crammed into a
   single pipe-delimited line. Split into a badge + quiet date line, then the
   theme as its own heading, so it scans top to bottom. */
.schedule-header__info .schedule-header__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.schedule-header__info .schedule-header__daybadge {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #010f44;
    background: #75c597;
    padding: 5px 12px;
    border-radius: 4px;
    line-height: 1;
}

.schedule-header__info .schedule-header__date {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
}

.schedule-header__info .schedule-header__theme,
.schedule-header__info h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 700;
    color: #010f44;
    margin: 0;
    line-height: 1.3;
    text-wrap: balance;
    max-width: 42ch;
}

.schedule-header__venue {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #010f44;
    background: #f0f7fb;
    border: 1px solid rgba(87, 203, 245, 0.4);
    padding: 8px 18px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Schedule Timeline & Items */
.schedule-timeline {
    position: relative;
    padding-left: 0;
}

.schedule-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    padding: 22px 20px;
    border-bottom: 1px solid #eef2f6;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.schedule-item:last-child {
    border-bottom: none;
}

.schedule-item:hover {
    background: rgba(1, 15, 68, 0.02);
}

.schedule-item--interactive {
    cursor: pointer;
}

.schedule-item--interactive:hover {
    background: rgba(87, 203, 245, 0.07);
}


.schedule-item__time {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #010f44;
    padding-top: 2px;
    white-space: nowrap;
}

.schedule-item__content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #010f44;
    margin-bottom: 6px;
    line-height: 1.4;
}

.schedule-item__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.schedule-item__tag {
    display: inline-block;
    padding: 4px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 20px;
    background: rgba(87, 203, 245, 0.15);
    color: #010f44;
    border: 1px solid rgba(87, 203, 245, 0.35);
}

.schedule-item__tag--break {
    background: rgba(117, 197, 151, 0.18);
    color: #58a97b;
    border-color: rgba(117, 197, 151, 0.45);
}


.schedule-item__preview {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
    margin-top: 4px;
}

/* Session Modal (ISW Treatment) */
.session-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.session-modal.is-open {
    display: flex;
}

.session-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 15, 68, 0.65);
    backdrop-filter: blur(6px);
}

.session-modal__panel {
    position: relative;
    z-index: 1;
    width: min(780px, 100%);
    max-height: min(85vh, 720px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(1, 15, 68, 0.3);
    border: 1px solid rgba(87, 203, 245, 0.25);
}

.session-modal__close {
    position: sticky;
    top: 16px;
    float: right;
    width: 38px;
    height: 38px;
    margin: 16px 16px 0 0;
    border: 0;
    border-radius: 50%;
    background: #f0f7fb;
    color: #010f44;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.session-modal__close:hover {
    background: #010f44;
    color: #ffffff;
}

.session-modal__body {
    padding: 40px 44px 44px;
}

.session-modal__eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #357a4e;
    margin-bottom: 10px;
}

.session-modal__title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    color: #010f44;
    line-height: 1.25;
    margin-bottom: 16px;
}

.session-modal__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    color: #64748b;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef2f6;
}

.session-modal__section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #57cbf5;
    margin: 20px 0 10px;
}

.session-modal__text {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #334155;
    margin: 0;
}

/* Responsive Schedule */
@media (max-width: 768px) {
    .schedule-card {
        padding: 24px 18px;
        border-radius: 12px;
    }

    .schedule-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .schedule-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 12px;
    }

    .schedule-item__time {
        font-size: 13px;
        color: #010f44;
    }

    .session-modal__body {
        padding: 28px 20px 28px;
    }
}

@media (max-width: 480px) {
    .schedule-tabs {
        flex-direction: column;
    }

    .schedule-tab {
        width: 100%;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════
   ISW-STYLE GET IN TOUCH CONTACT SECTION (BRAND GUIDE)
   ══════════════════════════════════════════════════════════ */
.partner-contact {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 64px;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 991px) {
    .partner-contact {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

.partner-contact__info .lux-section__eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #357a4e;
    margin-bottom: 8px;
}

.partner-contact__info .lux-section__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700 !important;
    font-style: normal !important;
    color: #010f44;
    line-height: 1.2;
    margin-bottom: 20px;
}

.partner-contact__info .lux-section__title span {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.partner-contact__info .lux-section__body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #334155;
    line-height: 1.7;
    margin-bottom: 32px;
}

.partner-contact__details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.partner-contact__detail-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.partner-contact__detail-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(87, 203, 245, 0.12);
    border: 1px solid rgba(87, 203, 245, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.partner-contact__detail-item:hover .partner-contact__detail-icon {
    background: #57cbf5;
    transform: scale(1.05);
}

.partner-contact__detail-icon i {
    font-size: 18px;
    color: #010f44;
}

.partner-contact__detail-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 2px;
}

.partner-contact__detail-value {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #010f44;
}

.partner-contact__detail-value a {
    color: #010f44;
    text-decoration: none;
    transition: color 0.2s ease;
}

.partner-contact__detail-value a:hover {
    color: #57cbf5;
}

/* Form Container */
.partner-contact__form-wrap {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    border: 1px solid rgba(1, 15, 68, 0.08);
    box-shadow: 0 16px 45px -10px rgba(1, 15, 68, 0.08);
}

@media (max-width: 576px) {
    .partner-contact__form-wrap {
        padding: 24px 20px;
    }
}

.partner-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.partner-form__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.partner-form__group label {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #010f44;
    letter-spacing: 0.02em;
}

.partner-form__group input:not([type="checkbox"]):not([type="radio"]),
.partner-form__group textarea,
.partner-form__group select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #e3e8f3;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #010f44;
    background: #ffffff;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.partner-form__group input:not([type="checkbox"]):not([type="radio"]):focus,
.partner-form__group textarea:focus,
.partner-form__group select:focus {
    border-color: #57cbf5;
    box-shadow: 0 0 0 3px rgba(87, 203, 245, 0.2);
}

.partner-form__group textarea {
    resize: vertical;
    min-height: 120px;
}

.partner-form__group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23010f44' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

/* Consent Checkbox Styling (Single Tick, No Stretching) */
.partner-consent-wrapper {
    margin-top: 10px;
    margin-bottom: 6px;
}

.partner-consent-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    margin: 0 !important;
    user-select: none;
}

.partner-consent-checkbox,
.partner-form .form-check-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    border: 2px solid #94a3b8 !important;
    border-radius: 5px !important;
    background-color: #ffffff !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: 12px 12px !important;
    padding: 0 !important;
    margin: 2px 0 0 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.partner-consent-checkbox:hover,
.partner-form .form-check-input:hover {
    border-color: #75c597 !important;
}

.partner-consent-checkbox:focus,
.partner-form .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(117, 197, 151, 0.25) !important;
    border-color: #75c597 !important;
}

.partner-consent-checkbox:checked,
.partner-form .form-check-input:checked {
    background-color: #75c597 !important;
    border-color: #75c597 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3l6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 12px 12px !important;
}

.partner-consent-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    font-weight: 500 !important;
}

.partner-consent-text a {
    color: #010f44 !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    transition: color 0.2s ease;
}

.partner-consent-text a:hover {
    color: #57cbf5 !important;
}

.btn-lux-contact {
    background: #010f44;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 32px;
    border-radius: 10px;
    border: none;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(1, 15, 68, 0.25);
    cursor: pointer;
}

.btn-lux-contact span,
.btn-lux-contact i {
    color: #ffffff !important;
}

.btn-lux-contact:hover,
.btn-lux-contact:focus,
.btn-lux-contact:active {
    background: #081d59;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 15, 68, 0.35);
}

.btn-lux-contact:hover span,
.btn-lux-contact:hover i,
.btn-lux-contact:focus span,
.btn-lux-contact:focus i,
.btn-lux-contact:active span,
.btn-lux-contact:active i {
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   BOOK A SPACE REVAMP (MODERN LUXURY & BRAND GUIDE)
   ══════════════════════════════════════════════════════════ */
.book-space-layout {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 56px;
    max-width: 1240px;
    margin: 0 auto;
    align-items: start;
}

@media (max-width: 991px) {
    .book-space-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

.book-space-info .lux-section__eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #357a4e;
    margin-bottom: 8px;
}

.book-space-info .lux-section__title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700 !important;
    font-style: normal !important;
    color: #010f44;
    line-height: 1.25;
    margin-bottom: 20px;
}

.book-space-info .lux-section__title span {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.book-space-info .lux-section__body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #010f44;
    line-height: 1.7;
    margin-bottom: 28px;
}

/* Download resource cards */
.book-resource-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.book-resource-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid #e3e8f3;
    box-shadow: 0 4px 20px rgba(1, 15, 68, 0.05);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.book-resource-card:hover {
    transform: translateY(-4px);
    border-color: #57cbf5;
    box-shadow: 0 12px 28px rgba(87, 203, 245, 0.18);
}

.book-resource-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(87, 203, 245, 0.15) 0%, rgba(117, 197, 151, 0.15) 100%);
    border: 1px solid rgba(87, 203, 245, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #010f44;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.book-resource-card:hover .book-resource-icon {
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    color: #ffffff;
}

.book-resource-meta h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #010f44;
    margin-bottom: 4px;
}

.book-resource-meta p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #5b6480;
    margin-bottom: 8px;
    line-height: 1.4;
}

.book-resource-meta span {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #57cbf5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ── Minimalist Modern Download Action Buttons ─────────── */
.book-download-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.book-download-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
}

.book-download-stack .book-download-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 22px;
}

.book-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 13px 26px;
    background: #ffffff;
    color: #010f44;
    border: 1.5px solid #e3e8f3;
    /* Pin the label colour on every state. Without this, a clicked link can
       pick up the browser's :visited tint, which made one download button
       read differently from its siblings. */
    text-decoration: none;
}

.book-download-btn:link,
.book-download-btn:visited,
.book-download-btn:hover,
.book-download-btn:active,
.book-download-btn:focus {
    color: #010f44;
}

.book-download-btn__text {
    color: #010f44;
}

.book-download-btn {
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(1, 15, 68, 0.04);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover keeps the brand sky border and a soft cyan glow behind the button. */
.book-download-btn:hover {
    background: #ffffff;
    color: #010f44;
    border-color: #57cbf5;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(87, 203, 245, 0.2);
}

.book-download-btn__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(87, 203, 245, 0.15) 0%, rgba(117, 197, 151, 0.15) 100%);
    border: 1px solid rgba(87, 203, 245, 0.3);
    color: #010f44;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.book-download-btn:hover .book-download-btn__icon {
    background: linear-gradient(135deg, #010f44 0%, #75c597 100%);
    color: #ffffff;
}

.book-download-btn__arrow {
    font-size: 13px;
    color: #57cbf5;
    transition: transform 0.2s ease, color 0.2s ease;
    margin-left: 2px;
}

.book-download-btn:hover .book-download-btn__arrow {
    transform: translateY(2px);
    color: #010f44;
}

@media (max-width: 576px) {
    .book-download-bar {
        flex-direction: column;
        width: 100%;
    }
    .book-download-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Feature bullets */
.book-perks-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 28px;
}

.book-perk-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.book-perk-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(117, 197, 151, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #58a97b;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.book-perk-text h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #010f44;
    margin-bottom: 2px;
}

.book-perk-text p {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #5b6480;
    margin: 0;
    line-height: 1.5;
}

/* Package mini compare cards */
.book-packages-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

@media (max-width: 480px) {
    .book-packages-mini {
        grid-template-columns: 1fr;
    }
}

.book-package-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-top: 3px solid #75c597;
}

.book-package-card.bare {
    border-top-color: #57cbf5;
}

.book-package-card h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #010f44;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.book-package-card p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Form Container for Book a Space */
.book-space-form-wrap {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    border: 1px solid rgba(1, 15, 68, 0.08);
    box-shadow: 0 16px 45px -10px rgba(1, 15, 68, 0.08);
}

@media (max-width: 576px) {
    .book-space-form-wrap {
        padding: 24px 20px;
    }
}

.book-space-form-header {
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e8f0;
}

.book-space-form-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #010f44;
    margin-bottom: 6px;
}

.book-space-form-header p {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
}

.btn-lux-book {
    background: #010f44;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 36px;
    border-radius: 10px;
    border: none;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(1, 15, 68, 0.25);
    cursor: pointer;
}

.btn-lux-book span,
.btn-lux-book i {
    color: #ffffff !important;
}

.btn-lux-book:hover,
.btn-lux-book:focus,
.btn-lux-book:active {
    background: #081d59;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(1, 15, 68, 0.35);
}

.btn-lux-book:hover span,
.btn-lux-book:hover i,
.btn-lux-book:focus span,
.btn-lux-book:focus i,
.btn-lux-book:active span,
.btn-lux-book:active i {
    color: #ffffff !important;
}

/* Agent cards modern */
.agent-card-lux {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px;
    border: 1px solid #e2e8f0;
    border-top: 4px solid #75c597;
    box-shadow: 0 6px 20px rgba(1, 15, 68, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.agent-card-lux:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(1, 15, 68, 0.10);
    border-top-color: #57cbf5;
}

.agent-card-lux__name {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #010f44;
    margin-bottom: 4px;
}

.agent-card-lux__role {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #357a4e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 18px;
}

.agent-card-lux__contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.agent-card-lux__contact a {
    color: #010f44;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.agent-card-lux__contact a:hover {
    color: #57cbf5;
}

/* ════════════════════════════════════════════════════════════════
   ISW-STYLE OPTIMIZED RESPONSIVE NAVBAR (HSA)
   ════════════════════════════════════════════════════════════════ */

.lux-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(1, 15, 68, 0.08);
    box-shadow: 0 4px 20px rgba(1, 15, 68, 0.05);
    transition: all 0.3s ease;
}

.lux-header:has(.lux-nav--open),
body.nav-menu-open .lux-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #FFFFFF !important;
}

.lux-nav {
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 0 40px;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

/* ── Brand Lockup (HSA + Divider + Qube) ──────────────────── */
.lux-nav__brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0;
    text-decoration: none;
}

.lux-nav__brand .nav-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lux-nav__brand img.nav-logo-hsa {
    height: 68px !important;
    max-width: 240px !important;
    width: auto !important;
    object-fit: contain !important;
    transition: transform 0.25s ease;
}

.lux-nav__brand .nav-logo-divider {
    width: 1px !important;
    height: 32px !important;
    background: rgba(1, 15, 68, 0.22) !important;
    opacity: 0.8 !important;
    flex-shrink: 0;
}

.lux-nav__brand .nav-logo-lockup-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.lux-nav__brand img.nav-logo-lockup {
    height: 40px !important;
    max-width: 140px !important;
    width: auto !important;
    object-fit: contain !important;
    transition: opacity 0.2s ease;
}

.lux-nav__brand .nav-logo-lockup-link:hover img.nav-logo-lockup {
    opacity: 0.85;
}

/* ── Navigation Links (Center Group) ───────────────────────── */
.lux-nav__links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
    height: 100%;
}

.lux-nav__links > li {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.lux-nav__links > li > a {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #010f44;
    text-decoration: none;
    opacity: .88;
    position: relative;
    padding: 10px 2px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    transition: opacity .25s ease, color .25s ease;
}

/* Animated underline on hover / active (ISW style, HSA brand cyan) */
.lux-nav__links > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    border-radius: 2px;
    background: #57cbf5;
    transition: width .25s ease;
}

.lux-nav__links > li > a:hover::after,
.lux-nav__links > li.active > a::after,
.lux-nav__links > li > a.active::after,
.lux-nav__dropdown.is-open > a::after {
    width: 100%;
}

.lux-nav__links > li > a:hover,
.lux-nav__links > li.active > a,
.lux-nav__links > li > a.active,
.lux-nav__dropdown.is-open > a {
    opacity: 1;
    color: #010f44;
}

.lux-nav__links .nav-chevron {
    font-size: 10px;
    margin-left: 6px;
    transition: transform 0.25s ease;
    opacity: 0.75;
}

.lux-nav__dropdown:hover > a .nav-chevron,
.lux-nav__dropdown.is-open > a .nav-chevron {
    transform: rotate(180deg);
}

/* ── Dropdown Menus (Floating Luxury Card) ──────────────────── */
.lux-nav__dropdown {
    position: relative;
}

.lux-nav__dropdown-trigger {
    cursor: pointer;
}

.lux-nav__dropdown-menu {
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 235px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(1, 15, 68, 0.14), 0 4px 14px rgba(1, 15, 68, 0.06);
    border: 1px solid rgba(1, 15, 68, 0.08);
    padding: 8px 0;
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease 0.18s, transform 0.22s ease 0.18s, visibility 0.22s step-end 0.18s;
    z-index: 1001;
    pointer-events: none;
}

/* Dropdown top pointing arrow */
.lux-nav__dropdown-menu::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-top: 1px solid rgba(1, 15, 68, 0.08);
    border-left: 1px solid rgba(1, 15, 68, 0.08);
    z-index: 2;
}

/* Invisible hover bridge: covers gap between trigger link and dropdown menu so mouse movement never breaks hover */
.lux-nav__dropdown-menu::after {
    content: '';
    position: absolute;
    top: -24px;
    left: -20px;
    right: -20px;
    height: 24px;
    background: transparent;
    display: block;
    pointer-events: auto;
    z-index: 1;
}

.lux-nav__dropdown:hover .lux-nav__dropdown-menu,
.lux-nav__dropdown.is-open .lux-nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s, visibility 0s ease 0s;
}

.lux-nav__dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lux-nav__dropdown-menu a {
    display: block;
    padding: 11px 22px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: #010f44 !important;
    opacity: 0.9 !important;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    white-space: nowrap;
}

.lux-nav__dropdown-menu a:hover,
.lux-nav__dropdown-menu li.active a {
    background: rgba(87, 203, 245, 0.12);
    color: #010f44 !important;
    padding-left: 26px;
    opacity: 1 !important;
}

/* ── CTA Button Group (Right Side) ────────────────────────── */
.lux-nav__cta-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
}

.lux-nav__cta {
    display: inline-block;
    padding: 11px 22px;
    background: #010f44;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: all .25s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.lux-nav__cta:hover {
    background: #57cbf5;
    color: #010f44 !important;
    border-color: #57cbf5;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(87, 203, 245, 0.35);
}

/* ── Mobile Hamburger Toggle ───────────────────────────────── */
.lux-nav__toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.lux-nav__toggle:hover {
    background: rgba(1, 15, 68, 0.05);
}

.lux-nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #010f44;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.lux-nav--open .lux-nav__toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.lux-nav--open .lux-nav__toggle span:nth-child(2) {
    opacity: 0;
}

.lux-nav--open .lux-nav__toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.lux-nav__mobile-cta {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS (CALIBRATED ACROSS ALL DEVICES)
   ════════════════════════════════════════════════════════════════ */

/* ── Wide Desktop (1401px – 1600px) ── */
@media (max-width: 1600px) {
    .lux-nav {
        padding: 0 28px;
        gap: 22px;
    }
    .lux-nav__links {
        gap: 30px;
    }
    .lux-nav__links > li > a {
        font-size: 13px;
        letter-spacing: .06em;
    }
    .lux-nav__cta {
        padding: 10px 20px !important;
        font-size: 11.5px !important;
    }
}

/* ── Standard Laptop (1201px – 1400px) ── */
@media (max-width: 1400px) {
    .lux-nav {
        padding: 0 20px;
        gap: 16px;
    }
    .lux-nav__brand {
        gap: 14px !important;
    }
    .lux-nav__brand img.nav-logo-hsa {
        height: 60px !important;
        max-width: 200px !important;
    }
    .lux-nav__brand .nav-logo-divider {
        height: 28px !important;
    }
    .lux-nav__brand img.nav-logo-lockup {
        height: 34px !important;
    }
    .lux-nav__links {
        gap: 24px;
    }
    .lux-nav__links > li > a {
        font-size: 12.5px;
        letter-spacing: .05em;
    }
    .lux-nav__cta {
        padding: 9px 16px !important;
        font-size: 11px !important;
    }
}

/* ── Compact Laptop (1025px – 1200px) ── */
@media (max-width: 1200px) {
    .lux-nav {
        padding: 0 16px;
        gap: 14px;
    }
    .lux-nav__brand {
        gap: 12px !important;
    }
    .lux-nav__brand img.nav-logo-hsa {
        height: 54px !important;
        max-width: 180px !important;
    }
    .lux-nav__brand .nav-logo-divider {
        height: 26px !important;
    }
    .lux-nav__brand img.nav-logo-lockup {
        height: 30px !important;
    }
    .lux-nav__links {
        gap: 18px;
    }
    .lux-nav__links > li > a {
        font-size: 12px;
        letter-spacing: .04em;
    }
    .lux-nav__cta {
        padding: 8px 14px !important;
        font-size: 10.5px !important;
    }
}

/* ── Tablet Landscape (769px – 1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
    .lux-nav {
        height: 76px;
        padding: 0 12px;
        gap: 10px;
    }
    .lux-nav__brand {
        gap: 10px !important;
    }
    .lux-nav__brand img.nav-logo-hsa {
        height: 48px !important;
        max-width: 160px !important;
    }
    .lux-nav__brand .nav-logo-divider {
        height: 24px !important;
    }
    .lux-nav__brand img.nav-logo-lockup {
        height: 28px !important;
    }
    .lux-nav__links {
        display: flex !important;
        gap: 12px !important;
    }
    .lux-nav__links > li > a {
        font-size: 11px !important;
        letter-spacing: .03em !important;
    }
    .lux-nav__toggle {
        display: none !important;
    }
    .lux-nav__cta-group {
        display: flex !important;
    }
    .lux-nav__cta {
        padding: 8px 12px !important;
        font-size: 10px !important;
        letter-spacing: .05em !important;
    }
    .lux-nav__dropdown-menu {
        position: absolute !important;
    }
}

/* ── Phone & Tablet Portrait (≤ 768px) (ISW Mobile Nav Pattern) ── */
@media (max-width: 768px) {
    .lux-header {
        background: #FFFFFF !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .lux-nav {
        height: 70px;
        padding: 0 16px;
    }
    .lux-nav__brand {
        gap: 10px !important;
    }
    .lux-nav__brand img.nav-logo-hsa {
        height: 48px !important;
        max-width: 160px !important;
    }
    .lux-nav__brand .nav-logo-divider {
        height: 24px !important;
    }
    .lux-nav__brand img.nav-logo-lockup {
        height: 28px !important;
    }
    .lux-nav__links {
        display: none !important;
    }
    .lux-nav__cta-group {
        display: none !important;
    }
    .lux-nav__toggle {
        display: flex !important;
        margin-left: auto !important;
    }

    /* Mobile dropdown — compact panel below navbar (matching ISW design, NOT full-screen) */
    .lux-nav--open .lux-nav__links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        position: absolute !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(85vh - 70px) !important;
        background: #FFFFFF !important;
        padding: 24px 40px 32px !important;
        gap: 18px !important;
        border-bottom: 1px solid rgba(1, 15, 68, 0.1) !important;
        z-index: 1000 !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .lux-nav--open .lux-nav__links > li {
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: none !important;
        display: block !important;
        text-align: center !important;
    }

    .lux-nav--open .lux-nav__links > li > a {
        color: #010f44 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        letter-spacing: .12em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 0 !important;
        height: auto !important;
        border: none !important;
        opacity: .85 !important;
        transition: color 0.2s, opacity 0.2s !important;
    }

    .lux-nav--open .lux-nav__links > li > a:hover,
    .lux-nav--open .lux-nav__links > li.active > a,
    .lux-nav--open .lux-nav__dropdown.dropdown-open > a {
        color: #57cbf5 !important;
        opacity: 1 !important;
    }

    .lux-nav--open .lux-nav__links > li > a::after {
        display: none !important;
    }

    .lux-nav__dropdown-trigger i,
    .lux-nav__dropdown-trigger .nav-chevron {
        font-size: 9px !important;
        margin-left: 6px !important;
        transition: transform 0.3s ease !important;
    }

    .lux-nav__dropdown.dropdown-open .lux-nav__dropdown-trigger i,
    .lux-nav__dropdown.dropdown-open .nav-chevron {
        transform: rotate(180deg) !important;
        color: #57cbf5 !important;
    }

    /* Mobile dropdown accordion (matching ISW) */
    .lux-nav__dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-left: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s, padding 0.3s, margin 0.3s !important;
        list-style: none !important;
    }

    .lux-nav__dropdown.dropdown-open .lux-nav__dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: 350px !important;
        padding: 8px 0 !important;
        margin-top: 8px !important;
        border-top: 1px solid rgba(1, 15, 68, 0.1) !important;
    }

    .lux-nav__dropdown-menu::before,
    .lux-nav__dropdown-menu::after {
        display: none !important;
    }

    .lux-nav__dropdown:hover .lux-nav__dropdown-menu {
        transform: none !important;
    }

    .lux-nav__dropdown-menu a {
        padding: 10px 16px !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        color: #475569 !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        opacity: 0.9 !important;
        transition: color 0.2s ease, opacity 0.2s ease !important;
    }

    .lux-nav__dropdown-menu a:hover,
    .lux-nav__dropdown-menu li.active a {
        color: #010f44 !important;
        background: transparent !important;
        opacity: 1 !important;
    }

    .lux-nav__dropdown-menu li {
        display: flex !important;
        justify-content: center !important;
        padding: 2px 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Mobile CTA — full-width button, last in menu (matching ISW) */
    .lux-nav__mobile-cta {
        display: block !important;
        margin-top: 8px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(1, 15, 68, 0.1) !important;
        width: 100% !important;
    }

    .lux-nav__mobile-cta a,
    .lux-nav__mobile-cta-btn,
    .lux-nav--open .lux-nav__links > li.lux-nav__mobile-cta > a {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        padding: 14px 24px !important;
        background: #010f44 !important;
        color: #FFFFFF !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: .13em !important;
        text-transform: uppercase !important;
        text-align: center !important;
        border-radius: 2px !important;
        text-decoration: none !important;
        transition: background .2s !important;
        box-shadow: 0 4px 12px rgba(1, 15, 68, 0.15) !important;
        opacity: 1 !important;
    }

    .lux-nav__mobile-cta a:hover,
    .lux-nav__mobile-cta-btn:hover,
    .lux-nav--open .lux-nav__links > li.lux-nav__mobile-cta > a:hover {
        background: #010f44 !important;
        color: #FFFFFF !important;
        opacity: .92 !important;
        transform: none !important;
    }

    .lux-nav__mobile-cta a::after,
    .lux-nav__mobile-cta a:hover::after,
    .lux-nav--open .lux-nav__links > li.lux-nav__mobile-cta > a::after {
        display: none !important;
    }
}

/* Legal Pages (PDPA & TNC) Text Justification */
.legal-content p,
.legal-content li,
.legal-content div {
    text-align: justify;
}

/* =========================================================
   SKIP LINK
   First focusable element on the page. Hidden until focused,
   then docks to the top so keyboard users can jump past the nav.
   ========================================================= */
.skip-to-content {
    position: absolute;
    top: -48px;
    left: 16px;
    z-index: 100000;
    background: #010f44;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
    top: 12px;
    color: #ffffff;
    outline: 2px solid #75c597;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .skip-to-content {
        transition: none;
    }
}

/* =========================================================
   FOCUS VISIBILITY BASELINE
   The template shipped a global `outline: none` on focus, which
   removed the keyboard focus indicator everywhere. Suppress the
   mouse-click outline (where it is noise) but always show a ring
   for keyboard users via :focus-visible.
   ========================================================= */
a:focus,
button:focus,
.btn:focus,
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #010f44;
    outline-offset: 2px;
}

/* On navy surfaces a navy ring is invisible, so use the brand green there. */
.bg-blue a:focus-visible,
.bg-blue button:focus-visible,
.bg-blue .btn:focus-visible,
.hsa-hero-lede a:focus-visible,
.hsa-hero-lede button:focus-visible,
.page-top-banner a:focus-visible,
.page-top-banner button:focus-visible,
.lux-header a:focus-visible,
.lux-header button:focus-visible {
    outline-color: #75c597;
}

/* =========================================================
   HOMEPAGE HERO LEDE
   The banner artwork supplies the visual headline, so this strip
   carries the supporting line and the primary actions only.
   ========================================================= */
.hsa-hero-lede {
    background: #010f44;
    padding: 22px 0;
}

.hsa-hero-lede__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.hsa-hero-lede__text {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
    max-width: 60ch;
}

.hsa-hero-lede__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hsa-hero-lede__actions .butn-style3 {
    padding: 12px 22px !important;
    font-size: 14px;
}

@media screen and (max-width: 767px) {
    .hsa-hero-lede__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hsa-hero-lede__actions {
        width: 100%;
    }

    .hsa-hero-lede__actions .butn-style3 {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   REDUCED MOTION
   Motion is decorative across this site (parallax, carousels,
   hover lifts, the ECG preloader). Users who ask their OS for
   less motion get the static end-state instead.
   This block lives in custom.css because it is the last
   stylesheet in the cascade, so it wins over plugins.css and
   styles.css without needing !important on most rules.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    /* Kill CSS keyframe loops site-wide: pulse, spin, float, shimmer,
       the btn_shine sweep and the preloader ECG backstop. */
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Hover lifts and scaling read as motion too - pin them flat. */
    .shaping-future-card:hover,
    .why-hsa-numbered-item:hover,
    .industry-chip:hover,
    .why-hsa-icon-circle:hover,
    .conference-ticket-btn:hover,
    .btn-lux-contact:hover,
    .btn-lux-book:hover,
    .floating-btn:hover {
        transform: none !important;
    }

    /* The preloader is a fixed full-screen overlay. If JS is slow it must
       not sit there animating, so hide it immediately instead. */
    #preloader {
        animation-delay: 0s !important;
    }

    /* Parallax / stellar-repositioned backgrounds snap to place. */
    .bg-img,
    [data-background],
    .why-malaysia-bg {
        background-attachment: scroll !important;
    }
}