/* MDHANI Header & Footer CSS */

/* ===== HEADER ===== */

#navbar{
  position: fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--section-h);
  background: var(--navy);
  border-bottom: 1px solid rgba(193,138,53,0.22);
  box-shadow: 0 4px 25px rgba(0,0,0,0.25);
  transition: padding .35s var(--ease), box-shadow .35s var(--ease);
}
#navbar.scrolled{
  padding: 12px var(--section-h);
  background: #071524;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-logo img{ height: 58px; width:auto; transition:height .3s var(--ease); }
#navbar.scrolled .nav-logo img{ height: 48px; }
.nav-links{ display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0; }
.nav-links > li{ display:flex; align-items:center; position:relative; }
.nav-links a{
  display:inline-flex; align-items:center;
  font-size:15px; letter-spacing:2px; text-transform:uppercase;
  color: rgba(247,242,231,0.72); font-weight:500; position:relative; padding-bottom:8px;
  transition:color .25s var(--ease);
  line-height:1.2;
}
.nav-links a::after{
  content:''; position:absolute; left:50%; bottom:0; width:0; height:1.5px;
  background: var(--gold-light); transform: translateX(-50%);
  transition: width .3s var(--ease);
}
.nav-links a:hover,
.nav-links a.active{
  color:#ffffff;
}
.nav-links a:hover::after,
.nav-links a.active::after{
  width:100%;
}
.nav-cta{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 24px;
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 600;
  background: linear-gradient(135deg, #C18A35 0%, #A8752B 100%);
  color: #fff;
  border: 1px solid rgba(235, 203, 142, 0.4);
  border-radius: 4px;
  transition: all .25s var(--ease);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(193, 138, 53, 0.25);
  text-decoration: none;
}
.nav-cta svg,
.nav-cta-arrow{
  transition: transform .25s var(--ease);
}
.nav-cta:hover{
  background: linear-gradient(135deg, #D4AF37 0%, #C18A35 100%);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(193, 138, 53, 0.4);
}
.nav-cta:hover svg,
.nav-cta:hover .nav-cta-arrow{
  transform: translateX(3px);
}
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:space-around;
  width:32px;
  height:28px;
  cursor:pointer;
  padding:2px;
  background:transparent;
  border:none;
}
.nav-burger span{
  display:block;
  width:100%;
  height:3px;
  background-color:#ffffff;
  border-radius:3px;
  transition:all 0.3s ease;
}

@media (max-width: 992px) {
  #navbar{
    padding: 12px 20px !important;
    height: 70px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .nav-logo img{
    height: 46px !important;
    display: block !important;
  }
  .nav-cta{
    display: none !important;
  }
  .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 Links 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;
  }
}


/* ============ NAV DROPDOWN (Services) ============ */
.nav-item-dropdown{position:relative; display:flex; align-items:center;}
.nav-drop-trigger{display:inline-flex; align-items:center; gap:6px; cursor:pointer;}
.nav-drop-trigger svg,
.nav-chevron{display:inline-block; transition:.25s; opacity:.75; margin-top:2px; vertical-align:middle;}
.nav-chevron{
  width:8px;
  height:8px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
}
.nav-item-dropdown:hover .nav-drop-trigger svg{transform:rotate(180deg);}
.nav-item-dropdown:hover .nav-chevron{transform:rotate(225deg) translate(-2px, -1px);}

.nav-dropdown{
 position:absolute;
 top:100%;
 left:50%;
 transform:translateX(-50%) translateY(-8px);
 width:1180px;
 display:grid;
 grid-template-columns:280px repeat(5,1fr);
 background:#F7F2E7;
 border:1px solid rgba(11,32,56,.08);
 border-radius:18px;
 overflow:hidden;
 box-shadow:0 24px 60px rgba(0,0,0,.18);
 opacity:0;visibility:hidden;pointer-events:none;
 transition:.28s ease;
 z-index:999;
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown{
 opacity:1;visibility:visible;pointer-events:auto;
 transform:translateX(-50%) translateY(0);
}
.nav-dropdown a::after{content:none!important;}

.mega-intro{padding:30px;}
.mega-intro h3{margin:0;font-family:"Cormorant Garamond",serif;font-size:35px;line-height:1;color:#0B2038;}
.gold-divider{display:block;width:70px;height:2px;background:var(--gold);margin:24px 0;}
.mega-intro p{font-size:15px;line-height:1.8;color:#5B6472;margin:0;}

.mega-menu-card{
 display:flex;
 flex-direction:column;
 justify-content:center;
 min-height:100px;
 padding-top:26px;
 padding-right:28px;
 padding-bottom:18px;
 padding-left:28px;
 text-decoration:none;
 background:#F7F2E7;
 border-left:1px solid rgba(11,32,56,.08);
 transition:.25s;
}
.mega-menu-card:hover{background:#FBF8F1;}
.mega-service-title{display:block;font-family:"Cormorant Garamond",serif;font-size:26px;color:#0B2038;letter-spacing:0;text-transform:none;font-weight:500;}
.mega-service-desc{display:block;margin-top:12px;font-size:17px;line-height:1.7;color:#5E6672;text-transform:none;letter-spacing:0;}


.mega-service-arrow{
    margin-top:auto;
    margin-bottom:38px;
    color:var(--gold);
    font-size:20px;
    line-height:1;
    transition:transform .25s ease;
}

.mega-menu-card:hover .mega-service-arrow{
    transform:translateX(8px);
}

/* ==========================================================
   FOOTER
   Rebuilt as a clean, self-contained module. The bottom
   disclaimer ribbon lives in normal document flow (not
   position:fixed) so it can never clip, overlap, or hide
   content above it, and never needs a manual buffer height
   to be reserved elsewhere on the page.
========================================================== */

footer {
    background: var(--navy);
    border-top: 1px solid rgba(193,138,53,0.18);
    padding-bottom: 70px;
}

.footer-main {
    padding: 64px var(--section-h) 48px;
    display: grid;
    grid-template-columns: 1.9fr 0.95fr 0.95fr 1fr 1.3fr;
    gap: 40px;
}

/* ---------- Section headings (shared) ---------- */
.footer-col h4,
.footer-brand-links h4,
.footer-address-title {
    font-size: 13px;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: var(--gold-light);
    font-weight: 700;
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid rgba(217,168,86,0.4);
    display: inline-block;
}

.footer-col a {
    display: block;
    font-size: 14.5px;
    color: rgba(210,220,232,0.62);
    margin-bottom: 12px;
    transition: color .2s;
    text-decoration: none;
}
.footer-col a:hover { color: #fff; }

/* ---------- Brand column ---------- */
.footer-brand img { height: 50px; width: auto; margin-bottom: 18px; }
.footer-brand p,
.footer-brand .brand-desc {
    font-size: 13.5px;
    color: rgba(210,220,232,0.65);
    line-height: 1.7;
    max-width: 320px;
    margin: 0 0 6px 0;
}
.brand-motto {
    font-size: 12.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold-light);
    font-weight: 700;
    margin-bottom: 22px;
    white-space: nowrap;
}
.brand-motto span {
    color: var(--gold);
    margin: 0 4px;
}

.footer-legal-info {
    position: relative;
    padding-left: 18px;
    border-left: 2px solid var(--gold);
    max-width: 320px;
}
.footer-legal-info h5 { color: #fff; margin: 0 0 4px 0; font-size: 15.5px; font-weight: 700; }
.footer-legal-info .llpin {
    color: rgba(210,220,232,0.55);
    font-size: 13px;
    margin: 0 0 14px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(247,242,231,0.12);
}
.footer-legal-info .amfi-details {
    color: rgba(210,220,232,0.62);
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
}
.footer-legal-info .amfi-details strong {
    color: var(--gold-light);
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- Important Links (inside Company column) ---------- */
.footer-brand-links { margin-top: 28px; }
.footer-brand-links .inline-links a {
    display: block;
    font-size: 14.5px;
    color: var(--gold-light);
    margin-bottom: 8px;
    text-decoration: none;
    transition: color .2s;
}
.footer-brand-links .inline-links a:hover { color: #fff; }
.link-arrow { display: inline-block; transition: transform .2s; }
.footer-brand-links .inline-links a:hover .link-arrow,
.footer-map-link:hover .link-arrow { transform: translateX(3px); }

/* ---------- Contact column ---------- */
.footer-icon-row {
    display: flex !important;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    color: rgba(210,220,232,0.75) !important;
    margin-bottom: 16px;
}
.footer-icon-row:hover { color: #fff !important; }
.footer-icon-box {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(217,168,86,0.4);
    border-radius: 6px;
    color: var(--gold-light);
}

.footer-address {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(247,242,231,0.12);
}
.footer-address-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gold-light);
    white-space: nowrap;
}
.footer-address-title svg { flex-shrink: 0; }
.footer-address-text {
    display: block;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(210,220,232,0.62);
    text-decoration: none;
    margin-bottom: 10px;
}
.footer-address-text:hover { color: #fff; }
.footer-map-link {
    display: inline-block;
    font-size: 14px;
    color: var(--gold-light);
    text-decoration: none;
    font-weight: 600;
}
.footer-map-link:hover { color: #fff; }

/* ---------- Bottom disclaimer ribbon (Floating fixed at bottom like Sapient) ---------- */
.footer-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 10px var(--section-h);
    background: #071524;
    border-top: 1px solid rgba(235,203,142,.18);
    z-index: 9999;
}

.footer-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.footer-copy { font-size: 12px; color: rgba(247,242,231,0.4); }
.text-white { color: #ffffff !important; font-weight: 600; }
.rights-reserved { white-space: nowrap; flex-shrink: 0; }

.footer-disclaimer-text {
    font-size: 12px;
    line-height: 1.55;
    color: rgba(247, 242, 231, 0.35);
}


/* ---------- Navigation fit, 993-1073px ----------
   Between the burger breakpoint (992px) and 1073px the logo, five links and the CTA need ~945px but only
   ~874-950px is available, so the links shrank, "Financial Hacks" wrapped and the logo was squeezed.
   Tighten the top-level link spacing in this range only. The mega-menu cards are not top-level links
   (> li > a) and are unaffected. */
@media (min-width: 993px) and (max-width: 1073px) {
  .nav-links { gap: 24px; }
  .nav-links > li > a { letter-spacing: 1.4px; white-space: nowrap; }
}


/* ---------- Services mega-menu kept inside the window, 993px and up ----------
   The panel is 1180px wide and was centred under the "Services" link, so on windows narrower than about
   1400px its left side ran off-screen (cut off by up to ~190px). In this range it is centred on the window
   instead (the header bar is its positioning parent), capped to the window width less 16px each side, and the
   intro column narrows slightly before the five cards do. The same centred position is used at every desktop width, so
   it no longer jumps at 1440px. The top offsets keep
   the panel touching the bottom of the "Services" link in both header states, so hover still carries across. */
@media (min-width: 993px) {
  .nav-links > li.nav-item-dropdown { position: static; }
  .nav-dropdown {
    width: min(1180px, calc(100vw - 32px));
    grid-template-columns: clamp(200px, 23vw, 280px) repeat(5, minmax(0, 1fr));
    top: calc(100% - 33px);
  }
  #navbar.scrolled .nav-dropdown { top: calc(100% - 24px); }
}


/* ---------- Skip link (keyboard users) ----------
   Hidden above the screen until it receives keyboard focus; fixed, so it never moves any content. */
.skip-link {
  position: fixed; top: -120px; left: 12px; z-index: 10001;
  padding: 12px 18px;
  background: #0C1B2B; color: #F7F2E7;
  border: 2px solid #C18A35; border-radius: 4px;
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; outline: 2px solid #F7F2E7; outline-offset: 2px; }
/* The page content area is focused programmatically by the skip link; no ring needed on that large container */
main[tabindex="-1"]:focus { outline: none; }

/* ---------- Reduced motion ----------
   For visitors who ask their device to reduce motion: no smooth scrolling, no slide/fade animations
   (content simply appears in its final state), no endless ticker. Nothing is hidden. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none !important; }
  .ticker-container { overflow-x: auto; }
}


/* ---------- Larger touch areas on phones and tablets ----------
   Several controls are visually small (burger 32x28, footer links ~17px tall, "Explore" links 16px tall, ...).
   An invisible extension of each control's tap area brings it to 44px (footer links ~29px, the most that fits
   between neighbouring rows without overlap) without changing how anything looks or lays out. */
@media (max-width: 992px) {
  .nav-burger::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: -6px; right: -6px; }
  .footer-col a { position: relative; }
  .footer-col a::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  .service-link, .btn-ghost-light { position: relative; }
  .service-link::before, .btn-ghost-light::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
}

/* ---------- Services mega-menu: photo cards (desktop only; the mobile accordion hides the photos) ---------- */
@media (min-width: 993px) {
  .nav-dropdown { background:#FAF6EE; gap:16px; padding:22px; align-items:stretch; border-radius:12px; }
  .mega-intro { padding:8px 4px; }
  .mega-intro h3 { font-size:30px; line-height:1.1; }
  .mega-intro .gold-divider { margin:16px 0; }
  .mega-intro p { font-size:14px; line-height:1.6; }
  .mega-menu-card { padding:0; min-height:0; background:#fff; border:1px solid #E6DCC8; border-radius:8px; overflow:hidden; justify-content:flex-start; }
  .mega-menu-card:hover { background:#fff; border-color:#B8893A; box-shadow:0 8px 22px rgba(11,32,56,.12); }
  .mega-thumb { display:block; width:100%; height:96px; object-fit:cover; }
  .mega-card-body { padding:12px 14px 4px; }
  .mega-service-title { font-size:19px; line-height:1.15; }
  .mega-service-desc { min-height:2.8em; }
  .mega-service-desc { margin-top:6px; font-size:14px; line-height:1.4; }
  .mega-service-arrow { margin:0; padding:0 14px 12px; font-size:18px; }
  .mega-menu-card.is-current { border-color:#B8893A; box-shadow:0 0 0 1px #B8893A; }
  .mega-menu-card.is-current .mega-card-body::after { content:"● YOU ARE HERE"; display:block; margin-top:8px; font:700 9px/1 "Inter",Arial,sans-serif; letter-spacing:.12em; color:#B8893A; }
}
@media (max-width: 992px) {
  .mega-thumb { display:none; }
  .mega-menu-card.is-current .mega-service-title { color:#D9B36A; }
}
@media (min-width: 993px) {
  .nav-dropdown { width:min(1340px, calc(100vw - 32px)); grid-template-columns:clamp(170px, 17vw, 240px) repeat(5, minmax(0, 1fr)); }
  .mega-service-title { font-size:clamp(16px, 1.3vw, 19px); white-space:nowrap; }
  .mega-card-body { padding:12px 12px 4px; }
  .mega-service-desc { min-height:0; font-size:clamp(13px, 1vw, 14px); }
  .mega-service-arrow { padding-bottom:10px; }
  .mega-card-body { flex:1; }
}

/* Services panel sits fully below the header bar (it used to overlap the Open Account button).
   An invisible bridge above it, centred under the Services link, keeps the hover alive while the pointer travels down. */
@media (min-width: 993px) {
  .nav-links > li.nav-item-dropdown .nav-dropdown,
  #navbar.scrolled .nav-dropdown { top: calc(100% + 6px); }
  .nav-links > li.nav-item-dropdown:hover::after,
  .nav-links > li.nav-item-dropdown:focus-within::after { content:""; position:absolute; left:30%; right:30%; top:calc(100% - 32px); height:44px; z-index:998; }
}

/* ==========================================================
   FLOATING GLASS HEADER (desktop, 993px and up)
   A rounded, frosted bar that floats above the page with a thin gold border. The logo is a transparent PNG
   so it sits directly on the glass. Phones and tablets keep the full-width bar and the accordion menu.
========================================================== */
@media (min-width: 993px) {
  #navbar {
    top: 14px; left: 24px; right: 24px; width: auto; height: 78px;
    padding: 0 26px;
    border-radius: 999px;
    background: rgba(9, 22, 38, 0.92);
    -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
    border: 1px solid rgba(217, 168, 86, 0.38);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
    transition: top .35s var(--ease), height .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  }
  #navbar.scrolled { top: 10px; height: 68px; padding: 0 26px; background: rgba(7, 21, 36, 0.72); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); }
  .nav-logo img { height: 46px; }
  #navbar.scrolled .nav-logo img { height: 40px; }
  .nav-links { gap: 34px; }
  .nav-links a { font-size: 14px; letter-spacing: .15em; }
  .nav-cta { border-radius: 999px; padding: 11px 22px; box-shadow: none; background: #B8872F; border: 1px solid rgba(235, 203, 142, 0.35); }
  .nav-cta:hover { background: #C9953C; box-shadow: 0 4px 14px rgba(193, 138, 53, 0.35); }
  /* the Services panel hangs below the floating bar */
  .nav-links > li.nav-item-dropdown .nav-dropdown,
  #navbar.scrolled .nav-dropdown { top: calc(100% + 10px); }
  .nav-links > li.nav-item-dropdown:hover::after,
  .nav-links > li.nav-item-dropdown:focus-within::after { top: calc(100% - 26px); height: 42px; }
}

/* Phones and tablets: the bar turns translucent glass once the page is scrolled (solid again while the menu is open) */
@media (max-width: 992px) {
  #navbar.scrolled { background: rgba(7, 21, 36, 0.74); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
  #navbar:has(.nav-burger.active) { background: #071524; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.nav-links > li.nav-cta-mobile{ display:none; }

.nav-dropdown picture{ display:contents; }

/* ==========================================================
   MOTION LOGO
   The logo is built from layers: the logo without its chevron, the chevron (static + two that climb away from it),
   the three tagline words as gold overlays that light up in turn, and a slow gold shimmer. Everything loops quietly.
   The gold overlays only run where CSS masks are supported, and nothing moves for visitors who prefer reduced motion.
========================================================== */
.logo-motion{ position:relative; display:block; height:56px; aspect-ratio:377 / 175; transition:height .3s var(--ease); }
#navbar.scrolled .logo-motion{ height:48px; }
@media (max-width: 992px){ .logo-motion, #navbar.scrolled .logo-motion{ height:52px; } #navbar{ padding-top:9px !important; padding-bottom:9px !important; } }
.logo-motion .lm-base{ position:absolute; inset:0; width:100% !important; height:100% !important; }
.logo-motion .lm-chev{ position:absolute; left:calc(678 / 754 * 100%); top:calc(114 / 350 * 100%); width:calc(30 / 754 * 100%); height:calc(33 / 350 * 100%);
  background:url("../assets/logos/mdhani-logo-chev.webp") center / 100% 100% no-repeat; pointer-events:none; }
.logo-motion .lm-up, .logo-motion .lm-word, .logo-motion .lm-shine{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .logo-motion .lm-glow{ animation:lmGlow 2.2s ease-in-out infinite; }
  .logo-motion .lm-up{ display:block; opacity:0; animation:lmClimb 2.2s ease-out infinite; }
  .logo-motion .lm-up.lm-b{ animation-delay:.9s; }
  @supports ((-webkit-mask-image:url("x.webp")) or (mask-image:url("x.webp"))){
    .logo-motion .lm-word, .logo-motion .lm-shine{ display:block; position:absolute; inset:0; pointer-events:none;
      -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
    .logo-motion .lm-word{ background:#F3C56A; opacity:0; animation:lmLit 6s linear infinite; }
    .logo-motion .lm-w1{ -webkit-mask-image:url("../assets/logos/mdhani-logo-w1.webp"); mask-image:url("../assets/logos/mdhani-logo-w1.webp"); }
    .logo-motion .lm-w2{ -webkit-mask-image:url("../assets/logos/mdhani-logo-w2.webp"); mask-image:url("../assets/logos/mdhani-logo-w2.webp"); animation-delay:2s; }
    .logo-motion .lm-w3{ -webkit-mask-image:url("../assets/logos/mdhani-logo-w3.webp"); mask-image:url("../assets/logos/mdhani-logo-w3.webp"); animation-delay:4s; }
    .logo-motion .lm-shine{ -webkit-mask-image:url("../assets/logos/mdhani-logo-full.webp"); mask-image:url("../assets/logos/mdhani-logo-full.webp");
      background:linear-gradient(105deg, transparent 38%, rgba(255,244,214,.95) 50%, transparent 62%); background-size:260% 100%; animation:lmSweep 7s ease-in-out infinite; }
  }
}
@keyframes lmClimb{ 0%{ transform:translateY(110%); opacity:0; } 25%{ opacity:.95; } 100%{ transform:translateY(-190%); opacity:0; } }
@keyframes lmGlow{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(255,214,120,0)); } 50%{ filter:drop-shadow(0 0 3px rgba(255,214,120,.95)); } }
@keyframes lmLit{ 0%{ opacity:0; } 6%{ opacity:1; } 30%{ opacity:1; } 36%,100%{ opacity:0; } }
@keyframes lmSweep{ 0%{ background-position:160% 0; } 40%,100%{ background-position:-60% 0; } }

/* Header sizing by screen width (desktop): the logo and the menu words grow together so neither looks small next to the other.
   993-1099px: logo 56px, menu 14px | 1100-1199px: logo 60px, menu 15px | 1200px and up: logo 64px, menu 16px */
@media (min-width: 1100px) {
  #navbar { height: 84px; }
  #navbar.scrolled { height: 72px; }
  .logo-motion { height: 60px; }
  #navbar.scrolled .logo-motion { height: 52px; }
  .nav-links { gap: 36px; }
  .nav-links a { font-size: 15px; }
  .nav-cta { font-size: 12.5px; }
}
@media (min-width: 1200px) {
  #navbar { height: 90px; }
  #navbar.scrolled { height: 76px; }
  .logo-motion { height: 66px; }
  #navbar.scrolled .logo-motion { height: 56px; }
  .nav-links { gap: 38px; }
  .nav-links a { font-size: 16px; }
  .nav-cta { font-size: 13px; padding: 12px 26px; }
}
@media (max-width: 992px) {
  .logo-motion, #navbar.scrolled .logo-motion { height: 54px; }
  #navbar { padding-top: 8px !important; padding-bottom: 8px !important; }
}

/* ==========================================================
   IVORY GLASS HEADER OVER THE HERO
   On the eight pages that open on a dark hero (body.hero-dark) the bar is ivory frosted glass while the page is at the top,
   then turns into the navy glass bar once the visitor scrolls. It is also navy while the mobile menu is open.
   The logo swaps to its navy version, so every part of the animation keeps its contrast on cream.
========================================================== */
.logo-motion .lm-base { transition: opacity .35s ease; }
.logo-motion .lm-base-navy { opacity: 0; }

body.hero-dark #navbar:not(.scrolled):not(:has(.nav-burger.active)) {
  background: rgba(250, 246, 236, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-color: rgba(193, 138, 53, 0.55);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
}
body.hero-dark #navbar:not(.scrolled):not(:has(.nav-burger.active)) .lm-base:not(.lm-base-navy) { opacity: 0; }
body.hero-dark #navbar:not(.scrolled):not(:has(.nav-burger.active)) .lm-base-navy { opacity: 1; }
body.hero-dark #navbar:not(.scrolled):not(:has(.nav-burger.active)) .lm-chev { background-image: url("../assets/logos/mdhani-logo-chev-navy.webp"); }
body.hero-dark #navbar:not(.scrolled):not(:has(.nav-burger.active)) .lm-word { background: #B8872F; }
body.hero-dark #navbar:not(.scrolled):not(:has(.nav-burger.active)) .lm-shine {
  background: linear-gradient(105deg, transparent 38%, rgba(184, 135, 47, 0.7) 50%, transparent 62%); background-size: 260% 100%;
}
body.hero-dark #navbar:not(.scrolled):not(:has(.nav-burger.active)) .nav-burger span { background-color: #0c1b2b !important; }

@media (min-width: 993px) {
  body.hero-dark #navbar:not(.scrolled) .nav-links a { color: #2a3a4d; }
  body.hero-dark #navbar:not(.scrolled) .nav-links a:hover,
  body.hero-dark #navbar:not(.scrolled) .nav-links a.active { color: #0c1b2b; }
  body.hero-dark #navbar:not(.scrolled) .nav-cta { background: #0c1b2b; border-color: #0c1b2b; color: #F3D79A; box-shadow: none; }
  body.hero-dark #navbar:not(.scrolled) .nav-cta:hover { background: #12304e; color: #fff; box-shadow: 0 6px 18px rgba(12, 27, 43, .3); }
}
@media (max-width: 992px) {
  body.hero-dark #navbar:not(.scrolled):not(:has(.nav-burger.active)) { border-bottom: 1px solid rgba(193, 138, 53, 0.55); }
}