/* ==========================================
   MOBILE NAVIGATION & LAYOUT (≤768px)
   Single source of truth for all nav-related
   and structural responsive rules.
========================================== */

@media (max-width:992px){

    /* ---------- Navbar bar ---------- */

    #navbar{
        padding:14px 20px !important;
        height:70px !important;
        display:flex !important;
        justify-content:space-between !important;
        align-items:center !important;
    }

    .nav-logo img{
        height:46px !important;
    }

    .nav-cta{
        display:none !important;
    }

    /* ---------- Hamburger icon ---------- */

    .nav-burger{
        display:flex !important;
        flex-direction:column !important;
        justify-content:space-around !important;
        width:32px !important;
        height:28px !important;
        cursor:pointer !important;
        z-index:9999 !important;
        position:relative !important;
        background:transparent !important;
        border:none !important;
        margin-left:auto !important;
        flex-shrink:0 !important;
    }

    .nav-burger span{
        display:block !important;
        width:100% !important;
        height:3px !important;
        background-color:#ffffff !important;
        border-radius:3px !important;
        transition:all 0.3s ease !important;
    }

    .nav-burger.active span:nth-child(1){
        transform:translateY(9px) rotate(45deg) !important;
    }

    .nav-burger.active span:nth-child(2){
        opacity:0 !important;
        transform:translateX(-10px) !important;
    }

    .nav-burger.active span:nth-child(3){
        transform:translateY(-9px) rotate(-45deg) !important;
    }

    /* ---------- Mobile menu panel ---------- */

    .nav-links{
        display:none !important;
    }

    .nav-links.active{
        display:flex !important;
        flex-direction:column !important;
        position:fixed !important;
        top:70px !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        height:auto !important;
        max-height:calc(100vh - 70px) !important;
        background:#0C1B2B !important;
        padding:16px 24px 36px !important;
        overflow-y:auto !important;
        z-index:9998 !important;
        box-shadow:0 20px 40px rgba(0,0,0,0.7) !important;
        border-top:1px solid rgba(193,138,53,0.2) !important;
    }

    .nav-links > li{
        width:100% !important;
        border-bottom:1px solid rgba(255,255,255,0.08) !important;
        display:block !important;
    }

    .nav-links > li:last-child{
        border-bottom:none !important;
    }

    .nav-links a{
        display:block !important;
        width:100% !important;
        padding:15px 0 !important;
        font-size:15px !important;
        letter-spacing:1.5px !important;
        color:rgba(247,242,231,0.85) !important;
    }

    .nav-links a::after{
        display:none !important;
    }

    /* ---------- Services accordion trigger ---------- */

    .nav-item-dropdown{
        width:100%;
    }

    .nav-drop-trigger{
        width:100%;
        justify-content:space-between;
        padding:16px 0;
    }

    .nav-drop-trigger svg,
    .nav-chevron{
        transition:transform .25s var(--ease);
    }

    .nav-item-dropdown.open .nav-drop-trigger svg{
        transform:rotate(180deg);
    }

    .nav-item-dropdown.open .nav-chevron{
        transform:rotate(225deg) translate(-2px, -1px);
    }

    /* ---------- Accordion panel ---------- */

    .mega-intro{
        display:none;
    }

    .nav-dropdown{
        position:static;
        transform:none;
        width:100%;
        grid-template-columns:none;

        display:flex;
        flex-direction:column;

        background:transparent;
        border:none;
        border-radius:0;
        box-shadow:none;

        opacity:1;
        visibility:visible;
        pointer-events:auto;

        max-height:0;
        overflow:hidden;

        transition:max-height .35s var(--ease);
    }

    .nav-item-dropdown:hover .nav-dropdown,
    .nav-item-dropdown:focus-within .nav-dropdown{
        max-height:0;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:none !important;
    }

    .nav-item-dropdown.open .nav-dropdown{
        max-height:500px;
    }

    .mega-menu-card{
        display:block;
        width:100%;

        min-height:auto;
        padding:14px 0 14px 16px;

        border:none;
        border-bottom:1px solid rgba(255,255,255,.08);
        background:none;
    }

    .mega-menu-card:last-child{
        border-bottom:none;
    }

    .mega-menu-card:hover{
        background:none;
    }

    .mega-menu-card:hover .mega-service-arrow{
        transform:none;
    }

    .mega-service-title{
        font-size:15px;
        letter-spacing:1px;
        text-transform:uppercase;
        font-weight:500;
        color:rgba(247,242,231,.78);
    }

    .mega-service-desc{
        display:none;
    }

    .mega-service-arrow{
        display:none;
    }

    /* ---------- Footer Mobile Fixes ---------- */

    .footer-main {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding: 48px 24px 32px !important;
    }

    .footer-legal-info,
    .footer-brand p {
        max-width: 100% !important;
    }

    footer {
        padding-bottom: 60px !important;
    }

    .footer-bottom {
        position: fixed !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        padding: 8px 16px !important;
        gap: 3px !important;
        z-index: 9999 !important;
    }

    .footer-bottom-left {
        max-width: 100% !important;
    }

    .footer-disclaimer-text {
        display: none !important;
    }

    .rights-reserved {
        margin-left: 0 !important;
        white-space: normal !important;
    }

}

/* ---------- Footer Tablet Fixes (769px–1024px) ---------- */
@media (min-width: 769px) and (max-width: 1024px) {

    .footer-main {
        grid-template-columns: 1fr 1fr !important;
        gap: 36px 32px !important;
        padding: 56px 32px 40px !important;
    }

    .footer-brand { grid-column: 1 / -1; }

    .footer-legal-info,
    .footer-brand p {
        max-width: 420px !important;
    }

}

/* ==========================================
   SERVICE PAGES RESPONSIVE OVERRIDES (≤768px)
========================================== */
@media (max-width: 768px) {

    /* --- 1. Global Page Structural Safety Realignments --- */
    body, html {
        overflow-x: hidden !important;
        width: 100%;
    }

    section {
        padding: 60px 20px !important;
    }

    .section-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 24px !important;
    }

    /* --- 2. Hero Component Re-layout (Full-Framed Hero Backgrounds) --- */
    .hero {
        padding: 94px 20px 32px !important;
        min-height: auto !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    .hero.hero-tint::before {
        background: linear-gradient(to bottom, rgba(12, 27, 43, 0.45) 0%, rgba(12, 27, 43, 0.25) 50%, rgba(12, 27, 43, 0.55) 100%) !important;
    }

    .hero::before {
        background: linear-gradient(
            to bottom,
            rgba(12, 27, 43, 0.35) 0%,
            rgba(12, 27, 43, 0.15) 50%,
            rgba(12, 27, 43, 0.55) 100%
        ) !important;
    }

    .about-hero {
        padding: 30px 20px 48px !important;
        min-height: 520px !important;
    }

    .about-hero h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .story-section {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .story-graphic {
        height: auto !important;
        width: 100% !important;
    }

    .story-graphic img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .hero-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: 100% !important;
    }

    .hero-copy h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .hero-actions {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: stretch !important;
    }

    .hero-actions button,
    .hero-actions .btn-ghost-dark {
        width: 100% !important;
        text-align: center;
        justify-content: center;
    }

    .hero-visual {
        max-width: 100% !important;
        height: auto !important;
        margin: 16px 0 0 0 !important;
    }

    /* --- 3. Split Block Layout — Full Image Display --- */
    .intro-split {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .intro-split-img {
        height: auto !important;
        aspect-ratio: unset !important;
    }

    .intro-split-img img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .profile-metrics {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* --- 4. Client Segment Cards Layout --- */
    .serve-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .serve-card {
        padding: 24px !important;
        width: 100% !important;
        min-height: auto !important;
    }

    /* --- 5. Execution Architecture Flow Timeline ---
       A tidy vertical timeline: the gold ring on the left, a dashed gold line running down behind the rings,
       the step title and text on the right, every step the same width and rhythm. */
    .voyage-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        max-width: 440px !important;
        margin: 0 auto !important;
    }

    .voyage-line {
        display: block !important;
        left: 35px !important;
        right: auto !important;
        top: 40px !important;
        bottom: 40px !important;
        width: 2px !important;
        height: auto !important;
        background-image: linear-gradient(to bottom, #C18A35 0, #C18A35 7px, transparent 7px, transparent 14px) !important;
        background-size: 2px 14px !important;
        background-repeat: repeat-y !important;
        opacity: .55;
    }

    .v-stop {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        column-gap: 18px !important;
        align-items: start !important;
        text-align: left !important;
        width: 100% !important;
        padding: 0 0 34px !important;
    }
    .v-stop:last-child { padding-bottom: 0 !important; }

    .v-icon {
        grid-row: 1 / span 2;
        width: 72px !important;
        height: 72px !important;
        margin: 0 !important;
        box-shadow: 0 8px 20px rgba(193,138,53,.2), 0 0 0 5px rgba(193,138,53,.07) !important;
    }
    .v-icon img { width: 42px !important; height: 42px !important; }
    /* the home page "Financial Voyage" uses full-colour illustrations that need to fill the ring (about 83% of its width, as on desktop) */
    #voyage .v-icon img { width: 60px !important; height: 60px !important; }
    #voyage .v-stop:nth-child(6) .v-icon img { width: 69px !important; height: 69px !important; }

    .v-title { font-size: 22px !important; line-height: 1.2 !important; margin: 6px 0 6px !important; align-self: end; text-align: left !important; }
    .v-desc { font-size: 15.5px !important; line-height: 1.6 !important; max-width: none !important; margin: 0 !important; text-align: left !important; }

    /* --- 6. Fund Analytics Screening Rows — Full Image Display --- */
    .selection-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    .selection-row.reverse {
        display: flex !important;
        flex-direction: column !important;
    }

    .selection-img-wrap {
        order: -1 !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: unset !important;
        border-radius: 4px;
    }

    .selection-img-wrap img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .selection-content {
        width: 100% !important;
    }

    .selection-blocks {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* --- 7. Portfolio Monitoring Grid Layout --- */
    .monitoring-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .monitor-item {
        min-height: auto !important;
        padding: 24px !important;
    }

    /* --- 8. Compliance & Governance Block --- */
    .compliance-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* --- 9. Brand Trust Grid Layout --- */
    .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* --- 10. Call-to-Action Closing Strip --- */
    .cta-band {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 32px !important;
    }

    .cta-photo {
        width: 100% !important;
        height: auto !important;
        order: -1 !important;
    }

    .cta-photo video,
    .cta-photo img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 4px !important;
    }
}

/* ==========================================
   HOMEPAGE PREMIUM MOBILE REALIGNMENTS (≤768px)
========================================== */
@media (max-width: 768px) {

    /* --- 1. Hero Container & Image Zoom Fix --- */
    .home-hero,
    .index-hero {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 94px 20px 32px !important;
        min-height: auto !important;
        overflow: hidden !important;

        background-image: linear-gradient(to bottom, rgba(7, 21, 36, 0.50) 0%, rgba(7, 21, 36, 0.10) 36%, rgba(7, 21, 36, 0.10) 64%, rgba(7, 21, 36, 0.66) 100%),
                          url('../assets/Images/Home%20Page/hero-mobile-tall-fb.jpg') !important;
        background-image: linear-gradient(to bottom, rgba(7, 21, 36, 0.50) 0%, rgba(7, 21, 36, 0.10) 36%, rgba(7, 21, 36, 0.10) 64%, rgba(7, 21, 36, 0.66) 100%),
                          image-set(url('../assets/Images/Home%20Page/hero-mobile-tall-774.webp') type('image/webp'), url('../assets/Images/Home%20Page/hero-mobile-tall-fb.jpg') type('image/jpeg')) !important;

        background-position: center 45% !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }

    /* Keep desktop block hidden */
    .hero-image,
    .hero-graphic,
    div[class*="hero-img"],
    div[class*="compass"] {
        display: none !important;
    }

    /* --- 2. Overlay Typography Adjustments --- */
    .hero-content,
    .hero-copy {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .hero-copy h1 {
        font-size: 34px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 16px !important;
        color: #FFFFFF !important;
    }

    .hero-copy p {
        font-size: 15px !important;
        line-height: 1.65 !important;
        color: rgba(247, 242, 231, 0.85) !important;
    }

    /* Full-Width Premium Call to Action Links */
    .hero-actions,
    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 28px !important;
    }

    .hero-actions a,
    .hero-actions button,
    .hero-actions .btn {
        width: 100% !important;
        padding: 15px 20px !important;
        font-size: 14px !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        box-sizing: border-box !important;
    }

    /* --- 3. Centered Trust Badges & Spacing Fix --- */
    .trust-strip,
    .badge-bar,
    div[class*="registered"],
    div[class*="badge"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        padding: 24px 24px !important;
        width: 100% !important;
        background: rgba(7, 21, 36, 0.3) !important;
        border-top: 1px solid rgba(193, 138, 53, 0.1) !important;
        border-bottom: 1px solid rgba(193, 138, 53, 0.1) !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }

    .trust-strip .divider,
    .badge-bar span::after,
    .badge-bar ::before {
        display: none !important;
    }

    .badge-item,
    .trust-item {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        color: var(--gold-light) !important;
    }

    /* Breaks ARN onto its own line */
    .badge-item strong,
    .badge-item span,
    .trust-item span {
        display: block !important;
        font-weight: 500;
        margin-top: 4px;
        font-size: 11px !important;
        opacity: 0.85;
    }
}


/* ---------- Stage 2: footer motto clipped on narrow phones ---------- */
/* .brand-motto is white-space:nowrap (~354px wide), which forced the single footer column wider than
   phones below ~402px and clipped the footer. Let it wrap on small screens only. */
@media (max-width: 420px) {
    .brand-motto { white-space: normal; }
}

/* ---------- Phone hero framing (client photos) ----------
   Loans: the child and sandcastle sit at the right of the photo, so anchor the crop to the right.
   Financial Hacks: the raised hands touch the top of the photo and were hidden under the fixed header,
   so the photo is sized to the area below the header (navy fills the strip behind the header). */
@media (max-width: 768px) {
  .hero.hero-loans { background-position: 86% center !important; }
}
@media (max-width: 520px) {
  .hero.hero-loans { background-color:#0c1b2b; background-size:auto calc(100% - 72px) !important; background-position:88% bottom !important; }
  .hero.hero-hacks { background-color:#0c1b2b; background-size:150% auto !important; background-position:58% 72px !important; }
  .hero.hero-hacks::after { content:""; position:absolute; left:0; right:0; bottom:0; height:130px; background:linear-gradient(to top, #0c1b2b 12%, rgba(12,27,43,0)); z-index:0; pointer-events:none; }
}

/* ---------- Home hero on phones: whole compass visible, eyebrow on one line, text kept legible by a soft shadow ---------- */
@media (max-width: 768px) {
  .home-hero .hero-eyebrow .eyebrow-text { font-size: clamp(10px, 3.1vw, 16px) !important; letter-spacing: .14em !important; white-space: nowrap; }
  .home-hero .hero-copy h1, .home-hero .hero-copy p { text-shadow: 0 2px 14px rgba(7,21,36,.85); }
}

/* Tablet widths: same idea with a smaller offset, so the photo still reaches both edges */
@media (min-width: 521px) and (max-width: 768px) {
  .hero.hero-hacks { background-color:#0c1b2b; background-size:auto calc(100% - 34px) !important; background-position:center bottom !important; }
  .hero.hero-loans { background-color:#0c1b2b; background-size:100% auto !important; background-position:center bottom !important; min-height:calc(56vw + 76px) !important; }
}

/* ==========================================================
   HOME PAGE ON PHONES: one-screen hero
   Eyebrow + headline on top, the compass left clear in the middle, then the tagline and the two buttons
   at the bottom of the first screen (the hero is sized to the visible screen, so this holds on any phone).
   The trust items sit in one row of three under it; the ARN stays in the AMFI item and in the bottom ribbon.
========================================================== */
@media (max-width: 768px) {
  .home-hero { align-items: stretch !important; padding: 90px 20px 16px !important;
               min-height: calc(100vh - 70px - 66px) !important; min-height: calc(100svh - 70px - 66px) !important; }
  .home-hero .hero-grid { display: flex !important; flex-direction: column !important; padding: 0 !important; gap: 0 !important; flex: 1 !important; }
  .home-hero .hero-copy { display: flex !important; flex-direction: column !important; flex: 1 !important; text-align: center !important; }
  .home-hero .hero-eyebrow { justify-content: center !important; margin-bottom: 10px !important; }
  .home-hero h1, .home-hero h1 .hl, .home-hero h1 .hl-inner { text-align: center !important; }
  .home-hero h1 { margin-bottom: 0 !important; }
  .home-hero h1 .hl:nth-child(1), .home-hero h1 .hl:nth-child(2) { font-size: clamp(26px, 7.6vw, 40px) !important; line-height: 1.15 !important; }
  .home-hero h1 .hl:nth-child(3) { font-size: clamp(42px, 12.4vw, 66px) !important; line-height: 1.3 !important; margin-top: -6px !important; padding-bottom: 0.08em; }
  .home-hero .cyc-wrap { min-width: 0 !important; }
  .home-hero .hero-sub { margin: auto 4px 12px !important; padding-top: 16px; font-size: 13.5px !important; line-height: 1.5 !important; max-width: none !important; text-align: center !important; color: #fff !important; font-weight: 400 !important; text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 14px rgba(7,21,36,.95); }
  .home-hero .hero-actions { margin-top: 0 !important; gap: 6px !important; }
  .home-hero .hero-actions .btn-primary { padding: 14px 20px !important; }
  .home-hero .hero-actions .btn-ghost-dark { padding: 10px 0 !important; }
  .trust { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; padding: 0 !important; flex-wrap: nowrap !important; }
  .trust .trust-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
                       gap: 7px !important; padding: 14px 6px !important; width: auto !important; font-size: 10px !important; line-height: 1.45 !important;
                       letter-spacing: .1em !important; text-align: center !important; font-weight: 600 !important; }
  .trust .trust-item + .trust-item { border-left: 1px solid rgba(235,203,142,.18); }
  .trust .trust-item .t-d { display: none !important; }
  .trust .trust-item .t-m { display: block !important; margin: 0 !important; font-size: 10px !important; opacity: 1 !important; }
  .trust .trust-item svg { width: 18px; height: 18px; }
}
/* Short screens (small phones, landscape): drop the tagline so the compass and the buttons stay clear */
@media (max-width: 768px) and (max-height: 700px) {
  .home-hero .hero-sub { display: none !important; }
  .home-hero .hero-actions { margin-top: auto !important; }
}

/* ==========================================================
   MOBILE MENU: floating glass card (992px and below)
   A rounded frosted card under the bar, soft pill links, Services opens into a two-column photo grid,
   the current page is gold, and Open Account sits at the bottom of the card.
========================================================== */
@media (max-width: 992px) {
  #navbar .nav-links.active {
    top: 78px !important; left: 12px !important; right: 12px !important; width: auto !important;
    max-height: calc(100vh - 184px) !important; max-height: calc(100svh - 184px) !important; overscroll-behavior: contain;
    padding: 14px !important; gap: 8px !important;
    background: rgba(9, 22, 38, 0.9) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    border: 1px solid rgba(217, 168, 86, 0.38) !important; border-radius: 22px !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55) !important;
  }
  #navbar .nav-links > li { border: 0 !important; width: 100% !important; }
  #navbar .nav-links > li > a {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 14px 16px !important; border-radius: 14px !important; border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.05) !important;
    font-size: 13px !important; font-weight: 600 !important; letter-spacing: .14em !important; color: #e9edf3 !important;
  }
  #navbar .nav-links > li > a.active { background: rgba(217, 168, 86, 0.14) !important; border-color: rgba(217, 168, 86, 0.5); color: #fff !important; }
  #navbar .nav-item-dropdown { display: block !important; }
  #navbar .nav-drop-trigger { padding: 14px 16px !important; }

  /* Services: photo grid */
  #navbar .nav-item-dropdown .nav-dropdown { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; max-height: 0; overflow: hidden; padding: 0 !important; }
  #navbar .nav-item-dropdown.open .nav-dropdown { max-height: 620px; padding: 8px 0 2px !important; }
  #navbar .mega-menu-card {
    position: relative; display: block !important; height: 74px; min-height: 0 !important; padding: 0 !important; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 10px !important; background: #0b1b2e !important;
  }
  #navbar .mega-menu-card:last-child { grid-column: span 2; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; }
  #navbar .mega-thumb { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  #navbar .mega-menu-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 15%, rgba(5, 12, 24, .93)); }
  #navbar .mega-card-body { position: static; padding: 0 !important; }
  #navbar .mega-service-title { position: absolute; left: 10px; bottom: 7px; z-index: 2; margin: 0; font: 600 12px/1.2 "Inter", Arial, sans-serif !important; letter-spacing: .04em !important; text-transform: none !important; color: #fff !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
  #navbar .mega-menu-card.is-current { border-color: #B8893A !important; box-shadow: 0 0 0 1px #B8893A; }
  #navbar .mega-menu-card.is-current .mega-card-body::after { content: none; }
  #navbar .mega-menu-card.is-current .mega-service-title { color: #fff !important; }

  /* Open Account */
  #navbar .nav-links > li.nav-cta-mobile { display: block !important; margin-top: 4px; }
  #navbar .nav-links > li.nav-cta-mobile > a {
    justify-content: center !important; padding: 16px !important; background: #B8872F !important; color: #fff !important;
    font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase; border-radius: 12px !important;
  }
}

/* Mobile menu photo tiles: frame each photo so the subject is whole (phones: fixed ratios; wider tablets: three across) */
@media (max-width: 992px) {
  #navbar .mega-thumb { object-position: 50% 40%; }
  #navbar .mega-menu-card[href="mutual-funds.html"] .mega-thumb { object-position: 50% 30%; }
  #navbar .mega-menu-card[href="global-investing.html"] .mega-thumb { object-position: 50% 48%; }
  #navbar .mega-menu-card[href="fixed-income.html"] .mega-thumb { object-position: 50% 62%; }
  #navbar .mega-menu-card[href="insurance.html"] .mega-thumb { object-position: 50% 80%; }
  #navbar .mega-menu-card[href="loans.html"] .mega-thumb { object-position: 88% 50%; }
}
@media (max-width: 520px) {
  #navbar .mega-menu-card { height: auto !important; aspect-ratio: 2 / 1; }
  #navbar .mega-menu-card:last-child { aspect-ratio: 2.9 / 1; }
}
@media (min-width: 521px) and (max-width: 992px) {
  #navbar .nav-item-dropdown .nav-dropdown { grid-template-columns: repeat(3, 1fr) !important; }
  #navbar .mega-menu-card { height: 118px !important; }
  #navbar .mega-menu-card:last-child { grid-column: span 2; }
}

/* Contact and the legal pages: on phones and tablets the page starts right under the fixed 70px header, so the small
   label above the heading (CONTACT US, TERMS OF USE...) sat only a few pixels below it and could look cut off. */
@media (max-width: 992px) {
  body.legal-page main#main-content { padding-top: 36px; }
}

/* About hero on phones and tablets: the picture is drawn about 870px wide, which is more than 2048px of image on a
   3x phone screen, so it looked soft. Phones get the full-resolution version of the same photo. */
@media (max-width: 768px) {
  .about-hero {
    background-image: url('../assets/Images/About/customer-engagement-fb.jpg') !important;
    background-image: image-set(url('../assets/Images/About/customer-engagement-2686.webp') type('image/webp'), url('../assets/Images/About/customer-engagement-fb.jpg') type('image/jpeg')) !important;
  }
}

/* Service and Financial Hacks heroes on phones and tablets: the photo is drawn wider than the screen (it fills the hero's
   height), so a 3x phone needs more pixels than the desktop file has. These two get a larger version of the same photo. */
@media (max-width: 768px) {
  .hero[style*="mutual-funds-2048"] {
    background-image: image-set(url('../assets/Images/MF/mutual-funds-2560.webp') type('image/webp'), url('../assets/Images/MF/mutual-funds-fb.jpg') type('image/jpeg')) !important;
  }
  .hero[style*="lifelong-voyage-2048"] {
    background-image: image-set(url('../assets/Images/Financial%20Hacks/lifelong-voyage-2744.webp') type('image/webp'), url('../assets/Images/Financial%20Hacks/lifelong-voyage-fb.jpg') type('image/jpeg')) !important;
  }
}