/* ===================== */
/* HEADER / NAVIGATION   */
/* ===================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--white);
    transition: background 0.3s ease;
}

/* Dark header for Business tab */
.header--dark {
    background: var(--primary-navy);
}

    .header--dark .header__nav-links a {
        color: var(--white);
    }

        .header--dark .header__nav-links a:hover {
            color: var(--primary-teal);
        }

    .header--dark .header__lang {
        color: var(--white);
    }

    .header--dark .header__search {
        background: rgba(255, 255, 255, 0.15);
    }

        .header--dark .header__search input {
            color: rgba(255, 255, 255, 0.7);
        }

    .header--dark .header__search-icon {
        color: var(--white);
    }

    .header--dark .header__hamburger span {
        background: var(--white);
    }

    .header--dark .header__logo .logo-dark {
        display: none;
    }

.logo {
    width: 146px;
}

.header--dark .header__logo .logo-light {
    display: block;
}

.header__logo .logo-light {
    display: none;
}

/* Dark tabs when Business is active */
.content-tabs--dark .header__tab {
    color: var(--white);
}

    .content-tabs--dark .header__tab.active {
        color: var(--primary-teal);
    }

.header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 16px 32px;
    gap: 16px;
}

.header__logo-group {
    display: flex;
    align-items: center;
}

.header__tab-label {
    display: none;
}

.header__logo img {
    height: 21px;
    width: auto;
}

.header__search {
    display: flex;
    align-items: center;
    background: var(--gray-100);
    border-radius: 23px;
    padding: 2px 16px;
    flex: 0 1 332px;
    height: 38px;
    gap: 10px;
}

    .header__search input {
        width: 100%;
        background: transparent;
        font-size: var(--text-sm);
        font-weight: var(--font-light);
        color: #A8A8A8;
    }

.header__search-icon {
    width: 16px;
    height: 16px;
    opacity: 0.5;
    flex-shrink: 0;
}

.header__nav-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

    .header__nav-links a {
        font-size: var(--text-sm);
        font-weight: var(--font-light);
        color: var(--primary-navy);
        white-space: nowrap;
    }

        .header__nav-links a:hover {
            color: var(--primary-teal);
        }

.header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-internet-banking {
    background: var(--primary-teal);
    color: var(--white);
    padding: 7px 20px;
    border-radius: 23px;
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    white-space: nowrap;
    transition: background var(--transition-fast);
    text-transform: uppercase;
    height: 38px;
    display: inline-flex;
    align-items: center;
}

    .btn-internet-banking:hover {
        background: #00b0a0;
    }

.header__lang {
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--primary-navy);
    cursor: pointer;
    text-transform: uppercase;
}

/* Mobile search icon (hidden on desktop, shown on mobile) */
.header__search-mobile {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--primary-navy);
}

.header--dark .header__search-mobile {
    color: var(--white);
}

/* Hamburger hidden on desktop, visible on responsive */
.header__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}

    .header__hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background: var(--primary-navy);
        transition: transform var(--transition-fast), opacity var(--transition-fast);
    }

/* Content Tabs: Personal / Business (overlaps hero on homepage) */
.content-tabs {
    position: relative;
    z-index: 100;
    margin-top: 70px;
    background: transparent;
}

.content-tabs__inner {
    display: flex;
    gap: 24px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
}

/* Page Tabs: Personal / Business (inside header on inner pages) */
.page-tabs {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 32px;
}

.page-tabs__inner {
    display: flex;
    gap: 24px;
}

.header__tab {
    padding: 5px 0 16px;
    font-size: var(--text-base);
    font-weight: var(--font-light);
    color: var(--primary-navy);
    cursor: pointer;
    border-top: 2px solid transparent;
    transition: all var(--transition-fast);
}

    .header__tab.active {
        color: var(--primary-teal);
        border-top-color: var(--primary-teal);
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
    }

    .header__tab:hover {
        color: var(--primary-teal);
    }

/* Mega Menu Dropdown */
.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--gray-300);
    z-index: 999;
}

    .mega-menu.active {
        display: block;
    }

.mega-menu__inner {
    display: flex;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px;
    gap: 0;
}

.mega-menu__item {
    flex: 1;
    text-align: center;
    padding: 24px 20px;
    border-right: 1px solid var(--gray-300);
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .mega-menu__item:last-child {
        border-right: none;
    }

    .mega-menu__item:hover {
        background: var(--gray-100);
    }

.mega-menu__icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
}

.mega-menu__label {
    font-size: var(--text-base);
    color: var(--primary-dark-blue);
    font-weight: var(--font-regular);
}

/* ===================== */
/* QUICK LINKS (Mobile)  */
/* ===================== */
.quick-links {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 30px 15px; /* 30px × 2 = 60px total between sections on mobile */
    margin-top: var(--header-height);
}

.quick-link-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    text-decoration: none;
}

.quick-link-card__icon {
    border: 1px solid #E8E8E8;
    border-radius: 50% !important;
    width: 50px;
    height: 50px;
    /* background: rgba(0, 196, 179, 0.08);*/

    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-link-card__text {
    flex: 1;
    min-width: 0;
}

.quick-link-card__title {
    font-size: 16px;
    font-weight: 400;
    color: var(--primary-teal);
    margin-bottom: 2px;
}

.quick-link-card__subtitle {
    font-size: var(--text-xs);
    color: #6A7282;
}

.quick-link-card__arrow {
    flex-shrink: 0;
}

/* ===================== */
/* TAB CONTENT SWITCHING */
/* ===================== */
.tab-content {
    display: none;
}

    .tab-content.active {
        display: block;
    }

/* ===================== */
/* HERO SECTION          */
/* ===================== */
.hero {
    margin-top: -48px;
    position: relative;
    background: var(--white);
    padding: 40px 32px;
    padding-top: 60px;
    min-height: 470px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero__content {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.hero__text {
    max-width: 631px;
}

.hero__subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-sm);
    color: var(--primary-teal);
    background: rgba(0, 196, 179, 0.08);
    padding: 10px 15px;
    border-radius: var(--radius-full);
    margin-bottom: 20px;
}

    .hero__subtitle::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--primary-teal);
        flex-shrink: 0;
    }

.hero__title {
    font-size: var(--text-5xl);
    color: #333333;
    line-height: 1.16;
    margin-bottom: 29px;
    font-weight: var(--font-regular);
    text-transform: capitalize;
}

    .hero__title strong {
        color: var(--primary-teal);
        font-weight: var(--font-regular);
    }

/* CTA card with border */
.hero__cta-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 18px 16px;
    background: var(--white);
    border: 1px solid #EAEAEA;
    border-radius: 16px;
}

.hero__cta-thumb {
    width: 195px;
    height: 106px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

    .hero__cta-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hero__cta-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero__cta {
    font-size: var(--text-2xl);
    font-weight: var(--font-regular);
    color: var(--primary-navy);
    line-height: 1.16;
    transition: color var(--transition-fast);
}

    .hero__cta:hover {
        color: var(--primary-teal);
    }

.hero__play-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 13px;
}

.hero__play-label {
    font-size: var(--text-sm);
    color: var(--primary-teal);
    font-weight: var(--font-regular);
}

.hero__play-icon {
    width: 24px;
    height: 24px;
    background: var(--primary-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .hero__play-icon svg {
        width: 8px;
        height: 8px;
    }

.hero__image {
    position: relative;
    flex-shrink: 0;
}

/* Circular hero image with teal background + decorations */
.hero__image-frame {
    width: 380px;
    height: 380px;
    position: relative;
}

    .hero__image-frame img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Business hero variant */
.hero--business {
    position: relative;
    background: var(--primary-dark-blue);
    align-items: flex-end;
    padding-bottom: 48px;
    min-height: 500px;
    margin-top: -116px;
    padding-top: 128px;
}

.hero__bg-image {
    position: absolute;
    inset: 0;
}

    .hero__bg-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 59, 112, 0.7) 35%, rgba(0, 29, 55, 0.35));
}

.hero--business .hero__content {
    position: relative;
    z-index: 2;
}

.hero__subtitle--light {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

    .hero__subtitle--light::before {
        background: var(--white);
    }

.hero__title--light {
    color: var(--white);
}

    .hero__title--light strong {
        color: var(--primary-teal);
    }

/* hero play button removed - now integrated into CTA card */

/* ===================== */
/* SECTION COMMON        */
/* ===================== */
/*.section {
  padding: 60px 32px;
}*/

.section--gray {
    background: var(--gray-100);
}

.section__inner {
    /*max-width: var(--max-width);*/
    margin: 0 auto;
}

.section__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--primary-teal);
    background: rgba(0, 196, 179, 0.08);
    border-radius: var(--radius-full);
    padding: 10px 16px;
    margin-bottom: 16px;
}


.section__title {
    font-size: var(--text-3xl);
    color: var(--primary-navy);
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.3;
}

.section__title--left {
    text-align: left;
}

/* ===================== */
/* PRODUCTS AT A GLANCE  */
/* ===================== */
.products-grid {
    display: flex;
    justify-content: center;
    gap: 0;
}

.product-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    flex: 1;
    min-width: 0;
    height: 140px;
    background: var(--white);
    border: 1px solid #E8E8E8;
    border-right: none;
}

    .product-card:last-child {
        border-right: 1px solid #E8E8E8;
    }

    .product-card:hover {
        background: var(--gray-100);
    }

    .product-card.active {
        background: var(--primary-teal);
        border-color: var(--primary-teal);
    }

        .product-card.active + .product-card {
            border-left-color: var(--primary-teal);
        }

        .product-card.active .product-card__label {
            color: var(--white);
        }

        .product-card.active .product-card__icon {
            width: 48px;
            height: 48px;
            filter: brightness(0) invert(1);
        }

/* Business product card overrides */
#businessContent .product-card.active {
    background: var(--primary-navy);
    border-color: var(--primary-navy);
}

    #businessContent .product-card.active + .product-card {
        border-left-color: var(--primary-navy);
    }

.product-card__icon {
    margin-bottom: auto;
    width: 44px;
    height: 44px;
    transition: filter var(--transition-fast), width var(--transition-fast), height var(--transition-fast);
}
.menu-btn .tab-img-default {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: scale(1);
    will-change: transform;
}

.menu-btn:hover .tab-img-default {
    transform: scale(1.15);
}

.menu-btn:active .tab-img-default {
    transform: scale(0.95);
}
.product-card__label {
    font-size: var(--text-base);
    color: var(--primary-navy);
    text-align: center;
    line-height: 1;
}

/* ===================== */
/* ACCOUNTS CARDS        */
/* ===================== */
.accounts-section {
    background: var(--white);
}

.accounts-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
}

.accounts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}

.account-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    height: 440px;
    cursor: pointer;
}

    .account-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--transition-slow);
    }

    .account-card:hover img {
        transform: scale(1.05);
    }

/* ===================== */
/* CHANNELS SECTION      */
/* ===================== */
.channels-section {
    background: var(--white);
    text-align: center;
}

.channels-grid {
    display: flex;
    gap: 23px;
    margin-top: 32px;
}

.channel-card {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.channel-card--large {
    flex: 1;
    min-height: 645px;
}

    .channel-card--large img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.channel-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    color: var(--white);
    text-align: left;
}

    .channel-card__overlay .channel-card__title {
        max-width: 346px;
    }

.channel-card__title {
    font-size: var(--text-3xl);
    line-height: 1.3;
}

/* Right column cards */
.channels-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.channel-card--small {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0;
    background: #F7F7F8;
    border-radius: 16px;
    overflow: hidden;
    min-height: 314px;
}

    .channel-card--small img {
        width: 274px;
        height: 100%;
        min-height: 282px;
        object-fit: cover;
        flex-shrink: 0;
        border-radius: 16px;
    }

    .channel-card--small .channel-card__text {
        text-align: left;
        padding: 20px 24px 20px 0;
    }

.channel-card--reversed .channel-card__text {
    padding: 20px 0 20px 24px;
}

.channel-card--small .channel-card__title {
    font-size: var(--text-3xl);
    color: var(--primary-navy);
    margin-bottom: 12px;
    line-height: 1.3;
}

.channel-card--small .channel-card__desc {
    font-size: var(--text-base);
    color: var(--gray-600);
    line-height: 1.5;
    max-width: 249px;
}

/* ===================== */
/* CURRENCY EXCHANGE     */
/* ===================== */
.currency-section {
    text-align: center;
    background: var(--white);
    padding: 40px 32px;
}

.currency-info {
    font-size: var(--text-base);
    color: var(--primary-teal);
    margin-bottom: 32px;
}

.currency-slider-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 32px;
}

.currency-arrow {
    width: 44px;
    height: 44px;
    background: #DDDDDD;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .currency-arrow:hover {
        background: #CCCCCC;
    }

#currencyNext {
    background: var(--primary-navy);
}

    #currencyNext:hover {
        background: #002E5F;
    }

.currency-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: var(--white);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.currency-slider {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex: 1;
}

    .currency-slider::-webkit-scrollbar {
        display: none;
    }

.currency-card {
    flex: 0 0 auto;
    min-width: 277px;
    background: var(--primary-teal);
    border-radius: var(--radius-md);
    padding: 24px;
    scroll-snap-align: start;
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Business currency card overrides */
body.business-active .currency-card {
    background: var(--primary-navy) !important;
}

.currency-card__flag-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.currency-card__flag {
    width: 66px;
    height: 44px;
    border-radius: var(--radius-md);
    object-fit: cover;
}

.currency-card__code {
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--white);
    text-align: center;
}

.currency-card__data {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.currency-card__row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #D9D9D9;
}

    .currency-card__row:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }

.currency-card__label {
    font-size: var(--text-sm);
    color: var(--white);
}

.currency-card__value {
    font-size: var(--text-base);
    color: var(--white);
    font-weight: var(--font-regular);
}

.currency-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    font-size: var(--text-xl);
    color: var(--primary-navy);
    cursor: pointer;
    text-decoration: underline;
}

    .currency-more:hover {
        color: var(--primary-teal);
    }

/* ===================== */
/* BREADCRUMB            */
/* ===================== */
.egb-breadcrumb {
    padding: 0px !important;
    position: relative;
    background: var(--white);
    border-bottom: 1px solid var(--gray-300);
    overflow: hidden;
}

    /*
  Line art on the trailing edge, faded in with a mask so it dissolves into the white
  rather than starting at a hard edge. inset-inline-end puts it on the correct side
  in both directions; rtl.css only has to flip the gradient and mirror the artwork.
*/
    .egb-breadcrumb::after {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0;
        width: 55%;
        background-image: url("/assets/NewFolder/EG_BANK_LINES.svg");
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: cover;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
        mask-image: linear-gradient(to right, transparent 0%, #000 45%);
        opacity: 0.5;
        pointer-events: none;
    }

.egb-breadcrumb__list {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 8px 30px;
    list-style: none;
}

.egb-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.egb-breadcrumb__home {
    display: inline-flex;
    align-items: center;
    color: var(--primary-dark-blue);
}

    .egb-breadcrumb__home svg {
        width: 26px;
        height: 26px;
    }

.egb-breadcrumb__sep {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--primary-teal);
}

/* Display only — no hover or pointer affordance, nothing here is clickable */
.egb-breadcrumb__crumb {
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--primary-dark-blue);
    white-space: nowrap;
}

/* ===================== */
/* EG BANK LINES BAND    */
/* ===================== */
/*
  Rendered by the _EgBankLines partial. The artwork is 1280x118, and the band is
  stretched to the full viewport width rather than tiled — the SVG is a single scene
  (buildings, trees, waves), so repeat-x would show a visible seam.
*/
.egb-lines-wrapper {
    opacity:0.7;
    padding: 0px;
    overflow: hidden;
    width: 100%;
}

.egb-lines {
    height: 118px;
    background-image: url(/assets/NewFolder/EG_BANK_LINES.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    pointer-events: none;
}



/* ===================== */
/* FOOTER                */
/* ===================== */

/*
  Theme tokens. master.cshtml stamps .site-footer--personal / .site-footer--business
  on the <footer class="site-footer"> wrapper from its existing isBusinessPage check,
  so every page in the business tree gets the blue footer without needing a page-level
  stylesheet. Personal is the default, which also covers the general link-only pages.
*/
.site-footer {
    /* rtl.css flips this one angle rather than restating both gradients */
    --footer-angle: 90deg;
    --footer-gradient: linear-gradient(var(--footer-angle),#00C4B3 0%,#039084 100%);
    --footer-subscribe-bg: #027F74;
    --footer-cta-bg: #8BDC64;
    --footer-cta-text: var(--white);
    --footer-label: var(--white);
    --footer-link-hover: var(--white);
    --footer-art: url("/assets/NewFolder/Footer_BG.svg");
}

/*
  body.business-active is toggled by main.js when the homepage Personal/Business
  tabs switch, alongside header--dark and mobile-menu--dark. Including it here keeps
  the footer in step with the header when the tab changes without a navigation.
*/
.site-footer--business,
body.business-active .site-footer {
    --footer-gradient: linear-gradient(var(--footer-angle), #003B70 0%, #024581 50%, #00539E 100%);
    --footer-subscribe-bg: #003257;
}

/* Subscribe Bar (above main footer) */
.footer-subscribe {
    background: #004871;
    padding: 20px 30px;
}

.footer-subscribe__inner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.footer-subscribe__logo img {
    height: 25px;
    width: auto;
}

.footer-subscribe__app {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-subscribe__qr {
    width: 80px;
    height: 80px;
    background: #FFFFFF26;
    border-radius: 10px;
    padding: 10px;
    flex-shrink: 0;
}

    .footer-subscribe__qr img {
        width: 100%;
        height: 100%;
    }

.footer-subscribe__text {
    color: var(--white);
}

.footer-subscribe__title {
    font-size: var(--text-base);
    font-weight: var(--font-regular);
}

.footer-subscribe__rating {
    display: none;
    font-size: var(--text-sm);
    font-weight: var(--font-light);
}

.footer-subscribe__download-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--primary-teal);
    color: var(--white);
    padding: 12px 12px;
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-subscribe__store-icons {
    display: flex;
    gap: 6px;
}

    .footer-subscribe__store-icons svg {
        justify-content: center;
        width: 28px;
        height: 28px;
        background: rgb(0 0 0);
        border-radius: 50%;
        padding: 6px;
        align-items: center;
    }

.footer__nav-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    color: var(--white);
    background: transparent;
    font-size: var(--text-base);
    font-weight: 400;
    cursor: pointer;
}

    .footer__nav-toggle svg {
        transition: transform var(--transition-fast);
    }

    .footer__nav-toggle.active svg {
        transform: rotate(180deg);
    }

/* Main Footer */
.footer {
    position: relative;
    background: var(--footer-gradient);
    color: var(--white);
    padding: 30px 30px 5px 30px;
    overflow: hidden;
}

/*
  Line art lives on its own layer so it can be sized to the footer box instead of
  to the viewport. `cover` scaled the 927x299 artwork up on wide screens; stretching
  it to exactly 100% x 100% keeps the whole illustration visible at the size it has
  in the design, whatever the footer ends up being.
*/
.footer__bg {
    /*  position: absolute;
    inset: 0;
    background-image: var(--footer-art);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 70% 100%;
    opacity: 1;
    pointer-events: none;*/
    left: -45px !important;
    position: absolute;
    inset: 0;
    width: 108%;
    height: 100%;
    background-image: var(--footer-art);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 1;
    pointer-events: none;
}

.footer__inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
}

.footer__top {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: start;
}

.footer__logo img {
    height: 40px;
    margin-bottom: 24px;
    filter: brightness(0) invert(1);
}

.footer__links-group {
    display: flex;
    gap: 175px;
}

.footer__links-col a {
    display: block;
    font-size: var(--text-sm);
    color: var(--white);
    margin-bottom: 2px;
    line-height: 30px;
    transition: color var(--transition-fast);
}

    /* Text is already white on the gradient, so hover reads as a fade, not a hue shift */
    .footer__links-col a:hover {
        color: var(--footer-link-hover);
        opacity: 0.7;
    }

.footer__social {
    padding-top: 4px;
}

.footer__social-title {
    font-size: var(--text-base);
    font-weight: 400;
    margin-bottom: 16px;
    letter-spacing: 0.9px;
}

.footer__social-icons {
    display: flex;
    gap: 32px;
    padding: 15px 4px;
}

    .footer__social-icons a {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity var(--transition-fast);
    }

        .footer__social-icons a:hover {
            opacity: 0.8;
        }

    .footer__social-icons img {
        width: 20px;
        height: 20px;
        filter: none;
    }

    .footer__social-icons svg {
        fill: var(--white);
    }

.footer__bottom {
    padding: 25px 0px 5px 0px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.footer__office,
.footer__contact {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
    flex-wrap: wrap;
}

.footer__office-label,
.footer__contact-label {
    color: var(--footer-label);
    font-size: var(--text-base);
    white-space: nowrap;
    font-weight: var(--font-regular);
}

.footer__divider {
    width: 2px;
    height: 16px;
    background: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.footer__office-icon,
.footer__contact-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.footer__info-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
    max-width: 100%;
    overflow: hidden;
}

    .footer__info-row svg {
        flex-shrink: 0;
    }

    .footer__info-row span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Clickable address / phone rows */
a.footer__info-row--link {
    text-decoration: none;
    color: white;
    cursor: pointer;
}

    a.footer__info-row--link:hover span {
        text-decoration: underline;
        color: var(--white);
    }

/* Quick Contact number rendered as a solid green pill */
a.footer__info-row--pill {
    gap: 8px;
    /* responsive.css stretches .footer__info-row to 100% on mobile; the pill hugs its text instead */
    width: fit-content;
    max-width: 100%;
    padding: 5px 18px;
    border-radius: var(--radius-full);
    background: var(--footer-cta-bg);
    color: var(--footer-cta-text);
    font-weight: var(--font-regular);
    overflow: visible;
    transition: filter var(--transition-fast);
}

    a.footer__info-row--pill:hover {
        filter: brightness(0.93);
    }

        /* The pill already reads as a button — no underline on hover */
        a.footer__info-row--pill:hover span {
            text-decoration: none;
            color: var(--footer-cta-text);
        }

    a.footer__info-row--pill img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

/* ===================== */
/* BUTTONS               */
/* ===================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 7px 24px;
    border-radius: 23px;
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    transition: all var(--transition-fast);
    cursor: pointer;
    height: 38px;
}

.btn--primary {
    background: var(--primary-teal);
    color: var(--white);
}

    .btn--primary:hover {
        background: #00b0a0;
    }

.btn--outline {
    background: transparent;
    color: var(--primary-teal);
    border: 1.5px solid var(--primary-teal);
}

    .btn--outline:hover {
        background: var(--primary-teal);
        color: var(--white);
    }

.btn--white {
    background: var(--white);
    color: var(--primary-dark-blue);
}

    .btn--white:hover {
        background: var(--gray-100);
    }

/* ===================== */
/* PAGE HERO BANNER      */
/* ===================== */
.page-hero {
    margin-top: calc(var(--header-height));
    position: relative;
    height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 40px;
}

/* Pages with tabs need extra top margin and taller hero */
.page-hero--with-tabs {
    margin-top: calc(var(--header-height) + 50px);
    height: 530px;
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*  transform: scale(1.15);*/
    object-position: center;
}

.page-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to right, rgba(0, 59, 112, 0.6), rgba(0, 29, 56, 0.6), rgba(0, 0, 0, 0.6) );
    opacity: 0.5;
}

.page-hero__title {
    position: relative;
    z-index: 2;
    font-size: var(--text-4xl);
    color: var(--white);
    margin: 0 auto;
    width: 100%;
}

/* ===================== */
/* FORMS                 */
/* ===================== */
.form-group {
    margin-bottom: 16px;
}

    .form-group label {
        display: block;
        font-size: var(--text-sm);
        color: var(--gray-700);
        margin-bottom: 6px;
    }

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--gray-400);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--primary-dark-blue);
    transition: border-color var(--transition-fast);
    background: var(--white);
}

    .form-input:focus {
        border-color: var(--primary-teal);
    }

    .form-input::placeholder {
        color: var(--gray-500);
    }

.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--gray-400);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--gray-700);
    background: var(--white);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23454746' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.form-radio-group {
    display: flex;
    gap: 24px;
    margin-top: 8px;
}

.form-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--text-sm);
}

    .form-radio input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--primary-teal);
    }

.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--gray-400);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--primary-dark-blue);
    resize: vertical;
    min-height: 100px;
    background: var(--white);
}

    .form-textarea:focus {
        border-color: var(--primary-teal);
    }

.btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--primary-teal);
    color: var(--white);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .btn-submit:hover {
        background: #00b0a0;
    }

.complaint-form .form-input,
.complaint-form .form-select,
.complaint-form .form-textarea {
    border-color: var(--primary-dark-blue);
}

    .complaint-form .form-input:focus,
    .complaint-form .form-select:focus,
    .complaint-form .form-textarea:focus {
        border-color: var(--primary-dark-blue);
        outline: none;
        box-shadow: none;
    }

/* ===================== */
/* CONTACT PAGE          */
/* ===================== */
.contact-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Right-column info cards, replacing the old contact photo inside
   .contact-image-wrap — same wrapper class, so the existing mobile reorder
   (.complaint-layout > .contact-image-wrap { order: -1 }) still applies. */
.cu-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.cu-info-card {
    background: var(--primary-dark-blue, #003B70);
    border-radius: 16px;
    padding: 20px 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cu-info-card__header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cu-info-card__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
}

    .cu-info-card__icon img {
        max-width: 55%;
        max-height: 55%;
        object-fit: contain;
    }

.cu-info-card__title {
    margin: 0;
    font-family: 'Co Headline', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
}

.cu-info-card__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: #8BDC64;
    color: #F7FAFA;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition-fast, 0.2s ease);
}

    .cu-info-card__btn:hover {
        opacity: 0.88;
        color: #F7FAFA;
    }

.cu-info-card__value {
    flex-shrink: 0;
    color: #8BDC64;
    font-weight: 700;
    font-size: 18px;
    white-space: nowrap;
}

/* Head Office card: header row + address list stacked below, instead of the
   icon/title-beside-value row every other card uses */
.cu-info-card--office {
    flex-direction: column;
    align-items: stretch;
}

.cu-info-card__addresses {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cu-info-card__address {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

    .cu-info-card__address i {
        margin-top: 3px;
        flex-shrink: 0;
        color: #fff;
        font-size: 13px;
    }

    .cu-info-card__address img {
        margin-top: 2px;
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        object-fit: contain;
    }

@media (max-width: 600px) {
    .cu-info-card {
        flex-wrap: wrap;
    }
}

.contact-image-circle {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-teal), #32CDEF);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-shadow: 0 0 0 8px var(--white), 0 0 0 10px var(--primary-teal);
}

.contact-image-circle__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.6;
}

.contact-image-circle__person {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
    position: relative;
    z-index: 2;
    mix-blend-mode: multiply;
}

/* ===================== */
/* DOWNLOAD CARDS        */
/* ===================== */
.download-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    transition: box-shadow var(--transition-fast);
    cursor: pointer;
    overflow: hidden;
}

    .download-card:hover {
        box-shadow: var(--shadow-md);
    }

.download-card__thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    background: var(--gray-100);
}

.download-card__body {
    padding: 16px 20px;
}

.download-card__title {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--primary-dark-blue);
    margin-bottom: 6px;
    line-height: 1.4;
}

.download-card__meta {
    font-size: var(--text-xs);
    color: var(--gray-700);
    line-height: 1.5;
}

/* ===================== */
/* TARIFF CARDS          */
/* ===================== */
.tariff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    /* margin-top: 32px;*/
}

.tariff-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid #E8E8E8;
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
    text-decoration: none;
}

    .tariff-card:hover {
        /*  box-shadow: var(--shadow-md);*/
    }

.tariff-card__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 32px 5px 32px;
    min-height: 100px;
}

    .tariff-card__icon svg {
        width: 80px;
        height: 80px;
    }

.tariff-card__body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px 24px 24px;
    text-align: left;
}

.tariff-card__info {
    flex: 1;
    min-width: 0;
}

.tariff-card__title {
    font-size: 15px;
    font-weight: 400;
    color: var(--primary-dark-blue);
    margin-bottom: 3px;
}

.tariff-card__meta {
    font-size: var(--text-sm);
    color: #6A7282;
    margin: 0;
    font-weight: 300;
}

.tariff-card__download {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    margin-left: 16px;
}

/* Legacy inline icon cards (sustainability, customer-rights) */
.download-card--inline {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 20px;
}

    .download-card--inline .download-card__icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .download-card--inline .download-card__body {
        padding: 0;
    }

/* ===================== */
/* ACCORDION             */
/* ===================== */
.accordion {
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: 0;
}

    .accordion:first-child {
        border-top: 1px solid var(--gray-300);
    }

.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .accordion__header:hover {
        background: var(--gray-100);
    }

.accordion__title {
    font-size: var(--text-base);
    color: var(--primary-teal);
    font-weight: var(--font-regular);
}


.accordion__arrow {
    width: 24px;
    height: 24px;
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}

.accordion.open .accordion__arrow {
    transform: rotate(45deg);
}

.accordion__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base);
}

.accordion.open .accordion__body {
    max-height: 500px;
}

.accordion__content {
    padding: 0 4px 16px;
    font-size: var(--text-sm);
    color: var(--gray-700);
    line-height: 1.6;
}

/* ===================== */
/* MAP / BRANCHES        */
/* ===================== */
/* Branches section - full bleed */
/* Branches section - full bleed, no gap after hero */
.branches-section {
    padding: 0;
    margin: 0;
    margin-top: -78px;
    position: relative;
    z-index: 10;
}

.branches-layout {
    position: relative;
    height: 720px;
    overflow: hidden;
}

.branches-map {
    position: absolute;
    inset: 0;
    background: var(--gray-200);
}

    .branches-map iframe {
        width: 100%;
        height: 100%;
        border: none;
    }

.branches-panel {
    position: absolute;
    left: 48px;
    top: 100px;
    width: 480px;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 28px 24px 32px;
    z-index: 2;
    max-height: calc(100% - 132px);
    display: flex;
    flex-direction: column;
}

.branches-list {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: #424242 #e0e0e0;
}

    .branches-list::-webkit-scrollbar {
        width: 4px;
    }

    .branches-list::-webkit-scrollbar-track {
        background: #e0e0e0;
        border-radius: 300px;
    }

    .branches-list::-webkit-scrollbar-thumb {
        background: #424242;
        border-radius: 300px;
    }

.branch-type-tabs {
    display: flex;
    justify-content: center;
    gap: 16px;
    background: var(--white);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
    width: fit-content;
    margin: 0 auto;
    position: relative;
    z-index: 11;
    margin-bottom: -78px;
}

.branch-type-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 12px;
    width: 108px;
    height: 108px;
    justify-content: center;
    background: rgba(0, 196, 179, 0.08);
    color: var(--primary-teal);
}

    .branch-type-tab.active {
        background: var(--primary-teal);
        color: var(--white);
    }

        .branch-type-tab.active .branch-type-tab__icon {
            color: var(--white);
            fill: var(--white);
        }

.branch-type-tab__icon {
    width: 32px;
    height: 32px;
}

/* Branch filter header row */
.branches-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .branches-filter-header h3 {
        font-size: var(--text-base);
        font-weight: var(--font-bold);
        color: var(--primary-dark-blue);
    }

    .branches-filter-header .btn--outline {
        font-size: var(--text-sm);
    }

.branch-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    border: 1px solid var(--gray-300);
}

.branch-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}

    .branch-item__icon svg {
        width: 28px;
        height: 28px;
    }

.branch-item__content {
    flex: 1;
    min-width: 0;
}

.branch-item__name {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--primary-dark-blue);
    margin-bottom: 4px;
}

.branch-item__address {
    font-size: var(--text-base);
    font-weight: var(--font-light);
    color: #2C2C2C;
    margin-bottom: 8px;
}

.branch-item__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.branch-item__tag {
    font-size: var(--text-sm);
    color: var(--primary-dark-blue);
    font-weight: var(--font-bold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .branch-item__tag svg {
        flex-shrink: 0;
    }

    .branch-item__tag + .branch-item__tag::before {
        content: "/";
        color: var(--gray-400);
        margin-right: 4px;
        font-weight: var(--font-regular);
    }

.branch-item__hours {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--primary-teal);
    margin-bottom: 4px;
}

.branch-item__distance {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    color: var(--primary-teal);
}

.branches-filter-selects {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}



/* ===================== */
/* MOBILE MENU           */
/* ===================== */
/* ===================== */
/* MENU OVERLAY          */
/* ===================== */
/*
  Sits under both menus (#WebMenu.active is 999, .mobile-menu is 998) and under the
  header (1000), so the menu stays lit and the hamburger stays reachable to close it.
  Clicks land here and bubble to the existing outside-click handler, which closes the menu.
  Lower --tw-bg-opacity to dim the page instead of blacking it out.
*/
.menu-overlay {
    opacity: 50% !important;
    --tw-bg-opacity: 1;
    position: fixed;
    inset: 0;
    z-index: 997;
    background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.mobile-menu {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--primary-teal);
    z-index: 998;
    padding: 0;
    overflow-y: auto;
}

    .mobile-menu.active {
        padding-top: 20px !important;
        display: block;
    }

/* Mobile tabs (Personal / Business pills) */
.mobile-menu__tabs {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    align-items: center;
    background: var(--white);
}

.mobile-menu__tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    color: var(--primary-navy);
    border-radius: 300px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .mobile-menu__tab.active {
        background: var(--primary-teal);
        color: var(--white);
    }

.mobile-menu__products {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: rgba(255, 255, 255, 0.16);
}

.mobile-menu__product {
    flex: 1 1 calc(50% - 1px);
    min-width: 0;
    /* Fixed regardless of row: without this, a row whose label wraps to two
     lines (e.g. "Debt Capital Markets & Syndications") grows taller than a
     row whose labels are one line, so items in the shorter rows end up with
     visibly less top/bottom breathing room than items in the taller ones —
     same padding and gap everywhere, but an uneven result. 168px covers the
     tallest case (padding 28+28, 44px image, 20px gap, two 24px text lines). */
    min-height: 168px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Pins the icon to the top and the label to the bottom instead of
       centering the pair as one block — so the icon sits at the same spot
       and the label's bottom edge sits at the same spot in every cell,
       whatever the label's line count. Only the empty space between them
       (never their positions) changes with content. */
    justify-content: space-between;
    gap: 20px;
    padding: 28px 7px;
    background: var(--primary-teal);
    color: var(--white);
    text-align: center;
    font-size: var(--text-base);
    cursor: pointer;
    transition: background var(--transition-fast);
}

    .mobile-menu__product:hover {
        background: #00b0a0;
    }

    .mobile-menu__product img {
        width: 44px;
        height: 44px;
        filter: brightness(0) invert(1);
    }

    .mobile-menu__product span {
        /* Caps a long label at two lines (with an ellipsis) instead of wrapping
     to three or more, which would push past the 168px cell and reintroduce
     the same unevenness min-height above fixes. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5;
        margin-bottom: auto;
    }

.mobile-menu__links {
    background: var(--primary-teal);
}

.mobile-menu__link {
    display: block;
    padding: 20px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: var(--text-base);
    color: var(--white);
    text-align: center;
}

    .mobile-menu__link:hover {
        background: #00b0a0;
    }

.mobile-menu__cta {
    padding: 16px;
    background: var(--primary-teal);
}

    .mobile-menu__cta a {
        display: block;
        text-align: center;
        padding: 14px;
        background: var(--primary-navy);
        color: var(--white);
        border-radius: 300px;
        font-size: var(--text-base);
        font-weight: var(--font-regular);
        text-transform: uppercase;
    }

/* Business mode mobile menu */
.mobile-menu--dark {
    background: var(--primary-navy);
}

    .mobile-menu--dark .mobile-menu__tabs {
        background: var(--primary-navy);
    }

    .mobile-menu--dark .mobile-menu__tab {
        color: var(--white);
    }

        .mobile-menu--dark .mobile-menu__tab.active {
            background: var(--primary-teal);
        }

    .mobile-menu--dark .mobile-menu__products {
        background: rgba(255, 255, 255, 0.16);
    }

    .mobile-menu--dark .mobile-menu__product {
        background: var(--primary-navy);
    }

        .mobile-menu--dark .mobile-menu__product:hover {
            background: #002E5F;
        }

    .mobile-menu--dark .mobile-menu__links {
        background: var(--primary-navy);
    }

    .mobile-menu--dark .mobile-menu__link {
        border-top-color: rgba(255, 255, 255, 0.16);
    }

        .mobile-menu--dark .mobile-menu__link:hover {
            background: #002E5F;
        }

    .mobile-menu--dark .mobile-menu__cta {
        background: var(--primary-navy);
    }

        .mobile-menu--dark .mobile-menu__cta a {
            background: var(--primary-teal);
        }

/* ===================== */
/* COMPLAINT FORM LAYOUT */
/* ===================== */
.complaint-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.complaint-form {
    background: var(--white);
    padding: 32px;
    border-radius: var(--radius-xl);
    border: 1px solid #E8E8E8;
    /* box-shadow: var(--shadow-lg);
}

.complaint-form .form-input--center {
  text-align: center;
}

.complaint-form .form-group--radio-centered {
  text-align: left;
}

.complaint-form .form-group--radio-centered > label,
.complaint-form .form-group--radio-centered .form-radio span {
  color: var(--primary-dark-blue);
}

.complaint-form .form-group--radio-centered .form-radio-group {
  justify-content: flex-start;
  width: fit-content;
  gap: 36px;
}

    .complaint-form .form-group--radio-centered .form-radio {
        align-items: center;
        align-items: center;
        display: block;
        font-size: var(--text-sm);
        margin-bottom: 6px;
        display: flex;
    }

.complaint-form .form-group--radio-centered .form-radio input[type="radio"] {
  margin: 0;
}

.complaint-form .form-group--radio-centered .form-radio span {
  display: inline-flex;
  align-items: center;
  line-height: 18px;
  transform: translateY(-1px);
}

.complaint-form .form-select {
  color: var(--primary-dark-blue);
}

.complaint-form .form-select:invalid {
  color: var(--gray-500);
}

.complaint-form .form-select option {
  color: var(--primary-dark-blue);
}

.complaint-form .form-textarea::placeholder {
  color: var(--gray-500);
}

    .complaint-form .btn-submit {
        max-width: none;
        display: block;
      
        border-radius: var(--radius-full);
        width: 60%;
    }

.complaint-form__title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--primary-dark-blue);
  margin-bottom: 8px;
}

.complaint-form__subtitle {
  font-size: var(--text-sm);
  color: var(--gray-700);
  margin-bottom: 24px;
}

.complaint-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.complaint-sidebar {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.complaint-sidebar__heading {
  font-size: var(--text-3xl);
  color: var(--primary-dark-blue);
  line-height: 1.2;
}

.complaint-sidebar__image {
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

/* ===================== */
    /* CUSTOMER RIGHTS CARDS */
    /* ===================== */
    .terms-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .terms-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px 16px;
        background: var(--white);
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: box-shadow var(--transition-fast);
    }

        .terms-card:hover {
            box-shadow: var(--shadow-md);
        }

    .terms-card__icon {
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
    }

    .terms-card__title {
        font-size: var(--text-sm);
        color: var(--primary-dark-blue);
        line-height: 1.4;
    }
    /* ===================== */
    /* SUSTAINABILITY ITEMS  */
    /* ===================== */
    .commitment-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 40px;
        text-align: left;
    }

    .commitment-item {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        background: var(--white);
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-xl);
        padding: 28px 24px;
    }

    .commitment-item__icon {
        width: 64px;
        height: 64px;
        min-width: 64px;
        flex-shrink: 0;
        background: rgba(0, 196, 179, 0.08);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .commitment-item__icon svg {
            width: 32px;
            height: 32px;
        }

    .commitment-item__title {
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        color: var(--primary-dark-blue);
        margin-bottom: 8px;
    }

    .commitment-item__desc {
        font-size: var(--text-sm);
        color: var(--gray-700);
        line-height: 1.6;
    }

    .commitment-center {
        display: flex;
        gap: 20px;
        align-items: flex-start;
        max-width: 520px;
        margin: 24px auto 0;
        text-align: left;
        background: var(--white);
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-xl);
        padding: 28px 24px;
    }
    /* If 3 or fewer items, stretch to fill full width */
    .mobile-menu__products:has(> :nth-child(1):last-child) .mobile-menu__product {
        flex: 1 1 100%;
    }
    /* .mobile-menu__products:has(> :nth-child(2):last-child) .mobile-menu__product {
        flex: 1 1 calc(50% - 1px);
    }

    .mobile-menu__products:has(> :nth-child(3):last-child) .mobile-menu__product {
        flex: 1 1 calc(50% - 1px);
    }*/
    /* ===================== */
    /* FORM SUBMISSION LOADER */
    /* ===================== */
    .form-loader {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 16px;
        backdrop-filter: blur(2px);
    }

        .form-loader.is-visible {
            display: flex;
        }

    .form-loader__spinner {
        width: 56px;
        height: 56px;
        border: 5px solid transparent;
        border-top-color: #00C4B3;
        border-bottom-color: #00C4B3;
        border-radius: 50%;
        animation: form-loader-spin 0.75s linear infinite;
    }

    @keyframes form-loader-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .form-loader__text {
        color: #fff;
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 0.02em;
    }
}