/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#f9fafb;color:#111827;line-height:1.5;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ================= HEADER ================= */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;

  /* ✅ Make it stay fixed on scroll */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  /* Optional: subtle shadow so it doesn't look flat */
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.site-nav{display:flex;align-items:center;gap:18px;position:relative}
.nav-link{padding:6px 8px;border-radius:6px;font-weight:500;color:#111827}
.nav-link:hover{background:#f3f4f6}

/* Brand */
.brand{display:flex;align-items:center;gap:12px}
.sfw-logo{
  --sfw-size:48px;--sfw-radius:14px;--sfw-grad-start:#1e3a8a;--sfw-grad-end:#3b82f6;
  background:linear-gradient(135deg,var(--sfw-grad-start),var(--sfw-grad-end));
  width:var(--sfw-size);height:var(--sfw-size);border-radius:var(--sfw-radius);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;
  box-shadow:0 4px 10px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.18)
}
.sfw-logo__text{letter-spacing:.5px}
.brand-meta{display:flex;flex-direction:column;line-height:1.25}
.sitename{font-weight:800;font-size:22px;color:#0b1220}
.tagline{font-size:14px;color:#6b7280}

/* ================= MENUS ================= */
.menu{position:relative}
.menu-button{background:none;border:0;font:inherit;cursor:pointer;padding:6px 3px;border-radius:6px;font-weight:500}

/* Top-level dropdown panel */
.menu-panel{
  display:none;position:absolute;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;min-width:240px;z-index:50;
  left:0;margin-top:0;
}
.menu[aria-expanded="true"] > .menu-panel{display:block}
.menu-panel a{display:block;padding:6px 10px;border-radius:6px;font-size:14px;color:#111827;margin:2px 0}

/* Hover/focus highlight (light greyish blue) */
.menu-panel a:hover,
.menu-panel a:focus,
.menu .menu-button:hover,
.menu .menu-button:focus{ background:#dcebff; outline:none }

/* Nested submenu */
.menu .submenu{position:relative}
.menu .submenu .menu-button{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center}
.menu .submenu .submenu-panel{
  position:absolute;display:none;top:0;left:100%;margin-left:0;
  min-width:220px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:8px;z-index:60
}
.submenu[aria-expanded="true"] > .submenu-panel{display:block}

/* Position panels just below/next to trigger when header wraps */
.menu > .menu-panel{top:100%} /* no vertical gap to prevent hover flicker */

/* Desktop hover keeps panel open (and also supports click) */
@media (min-width:901px){
  .menu:hover > .menu-panel,
  .menu:focus-within > .menu-panel,
  .menu-panel:hover{ display:block !important; visibility:visible; opacity:1; }

  .submenu:hover > .submenu-panel,
  .submenu:focus-within > .submenu-panel,
  .submenu-panel:hover{ display:block !important; }

  .menu-button{ cursor:pointer }
}

/* ================= MAIN LAYOUT ================= */
body {
  padding-top: 72px; /* adjust to match header height */
}
.page-wrap{padding:18px 22px;background:#f3f4f6}

/* Full-width slabs (hero + intro) */
.home-slab{margin-bottom:16px}

/* ===== HERO GRADIENT SECTION (stronger blue) ===== */
.hero-block{
  position: relative;
  padding:28px;
  border-radius:14px;
  background: linear-gradient(135deg, #cfe3ff 45%, #e0f2fe 45%, #ffffff 100%);
  border:1px solid #93c5fd;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
  margin-bottom:16px;
  overflow:hidden;
}
.hero-block::before{
  content:"";
  position:absolute; top:-80px; right:-120px;
  width:420px; height:420px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(96,165,250,.35), rgba(96,165,250,0));
  pointer-events:none;
}
.hero-block h1{
  font-size:30px;font-weight:700;line-height:1.25;margin-bottom:10px;color:#0f172a;
}
.hero-block p{
  font-size:17px;color:#334155;margin-bottom:18px;max-width:820px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.hero-block .cta-link{background:#1d4ed8;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.hero-block .cta-link:hover{opacity:.92}
.hero-block .cta-secondary{background:#0f766e;color:#fff}
.hero-block .cta-India{background:#DD3224;color:#fff}
.hero-block .cta-global{background:#FF850F;color:#fff}

/* ===== INTRO gradient (lighter but visible) ===== */
.intro-block{
  position:relative;
  padding:22px;
  border-radius:14px;
  background: linear-gradient(135deg, #cfe3ff 0%, #e0f2fe 45%, #ffffff 100%);
  border:1px solid #c7d2fe;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
  margin-bottom:16px;
  overflow:hidden;
}
.intro-block::before{
  content:"";
  position:absolute; top:-60px; left:-80px;
  width:280px; height:280px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(147,197,253,.35), rgba(147,197,253,0));
  pointer-events:none;
}
.intro-block p{ color:#374151; font-size:16px; }

/* 2-column section for main + sidebar (after hero/intro) */
.home-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;  /* main + sidebar */
  gap:20px;
  align-items:start;
}

/* Cards grid inside MAIN column */
.home-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
@media (max-width:1200px){
  .home-cards{grid-template-columns:1fr}
}

/* Generic card */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.widget-title{font-size:16px;margin-bottom:10px}
.widget .risk-note{font-size:13px;color:#6b7280;margin-top:10px}
.link-list{list-style:none;padding:0;margin:0}
.link-list li{margin:8px 0}
.link-list a{text-decoration:underline}
.link-list a.book-red{color:#7f1d1d}
.content-header h1{font-size:28px;line-height:1.2;margin-bottom:14px}
.content-body{display:grid;gap:14px}
.bulleted{padding-left:20px}
.table-wrap{overflow:auto}
.table-wrap table{border-collapse:collapse;width:100%;min-width:380px}
.table-wrap th,.table-wrap td{border:1px solid #d1d5db;padding:8px;text-align:left}

/* Ads */
.ad{display:flex;align-items:center;justify-content:center}
.ad-placeholder{width:100%;min-height:90px;border:2px dashed #d1d5db;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#6b7280}
.ad--leader .ad-placeholder{min-height:90px}
.ad--rect .ad-placeholder{min-height:250px}
.ad--skyscraper .ad-placeholder{min-height:600px}
.ad--inarticle .ad-placeholder{min-height:120px}

/* MF logos */
.brand-logos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.brand-logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:6px}
.brand-logo img{display:block;max-height:46px;max-width:100%}

/* CTA link */
.cta-link{display:inline-block;margin-top:6px;padding:10px 12px;border-radius:10px;background:#111827;color:#fff;text-decoration:none}
.cta-link:hover{opacity:.9}

/* ===== Gradient pillar cards (home only) ===== */
.card--grad{
  color:#fff;border:0;position:relative;overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card--grad h2{font-size:20px;margin-bottom:8px;color:#fff}
.card--grad p{color:rgba(255,255,255,.92);margin-bottom:12px}
.card--grad .link-list a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.card--grad .link-list a:hover{opacity:.9}
.card--grad .card-actions{margin-top:12px}
.card--grad .cta-link{
  background: rgba(255,255,255,.16);
  color:#fff;border:1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.card--grad .cta-link:hover{background: rgba(255,255,255,.22)}
.card--grad::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}
.card--grad:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.22)}

/* Individual gradient themes */
.card--wealth{  background: linear-gradient(135deg,#22c55e,#16a34a); }
.card--invest{  background: linear-gradient(135deg,#3b82f6,#1e40af); }
.card--pf{      background: linear-gradient(135deg,#f59e0b,#d97706); }
.card--re{      background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.card--ret{     background: linear-gradient(135deg,#14b8a6,#0d9488); }
.card--contact{ background: linear-gradient(135deg,#0ea5e9,#0369a1); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card--grad{ transition:none }
  .card--grad:hover{ transform:none }
}

/* Make hero + intro backgrounds win over .card */
.card.hero-block{
  background:#FFFFFF;        /* solid sky blue */
  border-color:#93c5fd;
}
.card.intro-block{
  background:#FFFFFF;        /* lighter sky blue */
  border-color:#c7d2fe;
}
/* remove old radial glows if any */
.hero-block::before,
.intro-block::before{ display:none }

/* ================= FOOTER ================= */
.sfw-footer{background:#1f2937;color:#fff;padding:18px 22px;font-size:14px;margin-top:24px}
.sfw-footer-inner{display:grid;grid-template-columns:1.2fr 1.5fr 1fr;align-items:center;gap:18px}
.sfw-footer-links a{color:#3b82f6;font-weight:500}
.sfw-footer-copy{margin-top:6px;color:#d1d5db}
.sfw-footer-risk{font-size:13px;margin-top:4px;color:#d1d5db}
.sfw-footer-contact a{color:#3b82f6;font-weight:500}
.sfw-wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#22c55e;color:#fff;padding:10px 18px;border-radius:10px;font-weight:600;margin-top:8px;text-decoration:none}
.sfw-wa-btn img{width:20px;height:20px}

/* ================= RESPONSIVE ================= */
/* Collapse to single column on tablets/phones */
@media (max-width:1024px){
  .home-grid{grid-template-columns:1fr}
}

/* Mobile compact for hero/intro */
@media (max-width:640px){
  .hero-block{ padding:18px }
  .hero-block h1{ font-size:24px }
  .hero-block p{ font-size:15px }

  .intro-block{ padding:16px }
  .intro-block p{ font-size:15px }
}

/* Mobile hamburger (≤900px) */
.nav-toggle{display:none;border:1px solid #e5e7eb;background:#fff;color:#111827;padding:8px;border-radius:10px;line-height:0}
@media (max-width:900px){
  .site-header{flex-wrap:wrap;align-items:flex-start}
  .brand{margin-right:auto;margin-bottom:6px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}

  .site-nav{display:none;flex-direction:column;gap:8px;width:100%;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px;margin-top:10px}
  .site-nav.open{display:flex}

  .site-nav .nav-link, .site-nav .menu .menu-button{width:100%;text-align:left;padding:10px;border-radius:8px}

  .menu > .menu-panel{position:static;margin-top:6px;border:1px solid #e5e7eb;border-radius:10px;padding:8px}
  .menu .submenu .submenu-panel{position:static;margin:6px 0 0 0;border:1px solid #e5e7eb;border-radius:10px;padding:8px}
}

/* Tiny brand shrink on small phones */
@media (max-width:640px){
  .sfw-logo{--sfw-size:40px}
  .sitename{font-size:20px}
  .tagline{font-size:13px}
}

/* Footer responsive */
@media(max-width:900px){
  .sfw-footer-inner{grid-template-columns:1fr;text-align:center}
  .sfw-wa-btn{margin:12px auto 0 auto}
}

@media (max-width: 600px) {
  body {
    padding-top: 88px;
  }
}


/* === Begin Desktop dropdown sizing: avoid  menu shrink-to-fit === */
@media (min-width: 901px){
  /* Keep .menu as the positioning anchor */
  .menu { position: relative; }

  /* Top-level dropdown panel under its trigger */
  .menu > .menu-panel{
    /* Key lines: let the panel size to its content, not the parent */
    width: max-content;
    min-width: 340px;
    max-width: 90vw;
    white-space: nowrap;

    top: 100%;
    left: 0;       /* anchored under the trigger */
    right: auto;
    overflow: visible;
  }

  /* Right-hand flyout submenus */
  .menu .submenu .submenu-panel{
    width: max-content;
    min-width: 280px;
    max-width: 75vw;
    white-space: nowrap;

    top: 0;
    left: 100%;
    right: auto;
    overflow: visible;
  }

  /* Ensure nothing clips the panels */
  .site-header, .site-nav, .menu { overflow: visible; }

  /* Prevent nav items from shrinking in the header row */
  .site-nav > *, .menu li { flex-shrink: 0; }
}

/* === End Desktop dropdown sizing: avoid  menu shrink-to-fit === */


/* === Begin Mobile hamburger: make the menu scroll instead of getting cut === */
@media (max-width:900px){
  /* header should never clip the menu */
  .site-header{ overflow: visible; z-index: 9999; }

  /* reserve a sensible header height; adjust if your header is taller */
  :root{ --header-h: 88px; }

  /* the menu container itself */
  .site-nav{
    /* full width is already set in your CSS; now give it a viewport-based height */
    max-height: calc(100dvh - var(--header-h) - 24px); /* viewport minus header & spacing */
    overflow-y: auto;                  /* <-- key: allow scrolling */
    overscroll-behavior: contain;      /* avoid page scroll bleeding */
    -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
  }

  /* (optional) slightly tighter vertical spacing so more items fit */
  .site-nav .nav-link,
  .site-nav .menu .menu-button{
    padding: 9px 10px;
  }
}
/* === End Mobile hamburger: make the menu scroll instead of getting cut === */