/* ============================================================
   Services mega-menu — rail + flyout panel.
   Left rail: all 6 services, always fully visible.
   Right panel: sub-services of whichever service is active
   (hover on desktop). Fixes tall-column clipping and keeps
   the whole thing on-brand (ivory/navy/gold).
   ============================================================ */

.has-drop{position:relative}

.megadrop{
  position:absolute; top:calc(100% + 14px); left:0;
  width:min(760px,94vw);
  background:var(--ivory,#FBF7EE);
  border:1px solid var(--gold-soft,#F3E6C4); border-top:3px solid var(--gold,#C9A24B);
  border-radius:var(--r,16px);
  box-shadow:var(--shadow,0 24px 60px -22px rgba(11,27,61,.5));
  padding:14px;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:200;
}
.megadrop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:18px;background:transparent}
.has-drop:hover > .megadrop{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}

.mega-flyout{display:flex; align-items:stretch; min-height:360px}

/* ---- left rail: all 6 services, always visible ---- */
.mega-rail{
  width:238px; flex-shrink:0; display:flex; flex-direction:column; gap:3px;
  border-right:1px solid var(--line,rgba(19,78,74,.14)); padding-right:12px; margin-right:14px;
}
.mega-rail-item{
  position:relative; z-index:1; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:6px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.87rem;
  color:var(--navy,#152B5C); text-decoration:none;
  padding:11px 12px; border-radius:10px;
  transition:color .2s;
}
.mega-rail-item .mega-rail-arrow{font-size:1.05rem; opacity:.35; transition:opacity .2s, transform .2s}
.mega-rail-item::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:10px;
  background:var(--grad,linear-gradient(105deg,#152B5C,#1F3A78 55%,#C9A24B 130%));
  opacity:0; transform:scale(.94); transition:opacity .2s, transform .2s;
}
.mega-rail-item:hover,.mega-rail-item.active{color:#fff}
.mega-rail-item:hover::before,.mega-rail-item.active::before{opacity:1; transform:scale(1)}
.mega-rail-item:hover .mega-rail-arrow,.mega-rail-item.active .mega-rail-arrow{opacity:1; transform:translateX(2px)}

.mega-viewall-all{
  margin-top:8px; padding-top:12px; border-top:1px solid var(--line,rgba(19,78,74,.14));
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.8rem; color:var(--gold,#C9A24B); text-decoration:none;
}
.mega-viewall-all:hover{text-decoration:underline}

/* ---- right side: sub-service panels (one active at a time) ---- */
.mega-panels{flex:1; position:relative; min-width:0}
.mega-panel{display:none; max-height:400px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px}
.mega-panel.active{display:block}
.mega-panel::-webkit-scrollbar{width:8px}
.mega-panel::-webkit-scrollbar-thumb{background:var(--gold-soft,#F3E6C4);border-radius:8px}
.mega-panel{scrollbar-width:thin;scrollbar-color:var(--gold-soft,#F3E6C4) transparent}

.mega-panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:2px 6px 10px; margin-bottom:8px; border-bottom:1px solid var(--line,rgba(19,78,74,.14));
}
.mega-panel-head span{font-family:'Fraunces',serif; font-weight:600; font-size:1.05rem; color:var(--navy,#152B5C)}
.mega-viewall{font-family:'Manrope',sans-serif; font-weight:700; font-size:.78rem; color:var(--gold,#C9A24B); text-decoration:none; white-space:nowrap}
.mega-viewall:hover{text-decoration:underline}

.mega-panel-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 10px}

.mega-panel-grid a.subitem{
  position:relative; z-index:1; overflow:hidden;
  display:block; font-family:'Manrope',sans-serif; font-size:.85rem; font-weight:500;
  color:var(--text,#1E2B29); text-decoration:none; line-height:1.35;
  padding:8px 12px; border-radius:9px; margin:1px 0;
  transition:color .2s, transform .18s;
}
.mega-panel-grid a.subitem::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:9px;
  background:var(--grad,linear-gradient(105deg,#152B5C,#1F3A78 55%,#C9A24B 130%));
  opacity:0; transform:scale(.93); transition:opacity .2s, transform .2s;
}
.mega-panel-grid a.subitem:hover{color:#fff; transform:translateX(2px)}
.mega-panel-grid a.subitem:hover::before{opacity:1; transform:scale(1)}

/* --- mobile: no hover, no rail — every service + its sub-services stacked --- */
@media(max-width:920px){
  .megadrop{
    position:static; transform:none; width:auto; box-shadow:none; border:none; border-top:none;
    background:transparent; padding:4px 0 8px; opacity:1; visibility:visible;
    max-height:0; overflow:hidden; transition:max-height .3s;
  }
  .megadrop::before{display:none}
  .has-drop.open > .megadrop{max-height:3600px}
  .mega-flyout{display:block; min-height:0}
  .mega-rail{display:none}
  .mega-panels{width:100%}
  .mega-panel{display:block !important; max-height:none; overflow:visible; padding-right:0; margin-bottom:10px}
  .mega-panel-grid{grid-template-columns:1fr}
  .mega-panel-head{padding:10px 4px 8px}
  .mega-panel-grid a.subitem{padding:9px 12px}
}

/* --- sub-service card grid on each parent service page --- */
.subgrid-wrap{max-width:960px;margin:40px auto 0;padding:0 4px}
.subgrid-wrap > h2{font-family:'Fraunces',serif;font-weight:600;color:var(--navy,#152B5C);font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 6px;text-align:center}
.subgrid-wrap > p{font-family:'Manrope',sans-serif;color:var(--muted,#5E6E6B);text-align:center;margin:0 auto 22px;max-width:620px}
.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.subgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.subgrid{grid-template-columns:1fr}}
.subcard{position:relative;display:block;background:var(--ivory-2,#fff);border:1px solid var(--line,rgba(19,78,74,.14));border-top:2px solid var(--gold,#C9A24B);border-radius:14px;padding:18px 18px 16px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.subcard:hover{transform:translateY(-3px);box-shadow:var(--shadow,0 18px 36px -22px rgba(11,27,61,.45));border-color:var(--gold,#C9A24B)}
.subcard b{display:block;font-family:'Manrope',sans-serif;font-weight:800;color:var(--navy,#152B5C);font-size:1rem;margin-bottom:5px}
.subcard span{font-family:'Manrope',sans-serif;color:var(--muted,#5E6E6B);font-size:.9rem;line-height:1.5}
.subcard .go{display:inline-block;margin-top:10px;color:var(--gold,#C9A24B);font-weight:700;font-size:.85rem;font-family:'Manrope',sans-serif}

/* floating call button */
.callfab{position:fixed;bottom:24px;right:24px;z-index:80;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px;border-radius:16px 16px 16px 4px;background:var(--navy,#152B5C);color:#fff;border:1.5px solid var(--gold,#C9A24B);text-decoration:none;font-family:'Manrope',sans-serif;font-weight:700;box-shadow:0 14px 30px -14px rgba(11,27,61,.6)}
.callfab:hover{transform:translateY(-2px)}
@media(max-width:560px){.callfab span{display:none}.callfab{padding:0 16px}}

/* floating WhatsApp button (bottom-left) */
.wafab{position:fixed;bottom:24px;left:24px;z-index:80;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 16px;border-radius:16px 16px 4px 16px;background:#25D366;color:#fff;border:none;text-decoration:none;font-family:'Manrope',sans-serif;font-weight:700;box-shadow:0 14px 30px -14px rgba(37,211,102,.75)}
.wafab svg{width:23px;height:23px;fill:#fff}
.wafab:hover{transform:translateY(-2px)}
@media(max-width:560px){.wafab span{display:none}.wafab{padding:0 14px}}