/* ============================================================================
   JNVKAA website shell: ONE header, drawer, page band and footer for visitors and signed-in
   members (Pages/Shared/_Layout + _SiteHeader). Members see more links, never another app.
   Loaded after site.css, portal.css and console.css. Mobile-first; breakpoints in site.css.

   Header      header.mnav > .mnav-in (brand, nav.mnav-links, .mnav-end)
               body.has-overlay-nav: transparent over the home hero until scrolled (.scrolled)
               desktop bar from 1200px; tier-2 links join the bar at 1536px (else in "More")
   Drawer      #memberDrawer (off-canvas below 1200px; /js/member-nav.js)
   Page band   header.pagehead (public pages) and .pg-head.is-banner (member pages) look the same:
               a full-bleed dark band with eyebrow, title, subtitle and actions
   Page body   .page-body: the fluid content area under a band (member pages get it from the layout)
   Motion      [data-reveal] / .reveal entrance, .lift hover; all off with prefers-reduced-motion
   ========================================================================== */
:root { --mnav-h: 60px; --nav-h: 60px; --band-from: #001d23; --band-mid: #06313a; --band-to: #0b6569; }
@media (min-width: 1024px) { :root { --mnav-h: 64px; --nav-h: 64px; } }

body.site { display: flex; flex-direction: column; min-height: 100svh; background: var(--paper); }
body.site > main { flex: 1 0 auto; width: 100%; min-width: 0; }
html, body { max-width: 100%; overflow-x: clip; }
html.mdrawer-lock, html.mdrawer-lock body { overflow: hidden; }
.site .skip-link { position: fixed; top: 8px; left: 8px; z-index: 300; padding: .5rem .9rem; border-radius: var(--ctl-radius); background: var(--ink); color: #fff; font-weight: 600; font-size: var(--fs-sm); transform: translateY(-160%); transition: transform .2s; }
.site .skip-link:focus { transform: none; color: #fff; }
.site main:focus { outline: none; }

/* ---- header ---------------------------------------------------------------------------- */
.mnav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 8px rgba(0,29,35,.04); transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; }
.mnav-in { height: var(--mnav-h); display: flex; align-items: center; gap: var(--sp-3); padding-inline: var(--gutter); }
.mnav-brand { display: inline-flex; align-items: center; gap: .5rem; flex: none; line-height: 1; color: var(--teal-700); min-height: var(--touch); }
.mnav-brand img { width: 34px; height: 34px; object-fit: contain; transition: filter .3s ease; }
.mnav-brand .wm { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; letter-spacing: .03em; color: var(--teal-700); transition: color .3s ease; }
.mnav-brand .tag { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-700); background: var(--cream); border-radius: 100px; padding: .2rem .5rem; }
.mnav-brand:hover .wm { color: var(--teal); }

.mnav-links { display: none; }
.mnav-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.mnav-end .btn { min-height: 34px; padding: .35rem .85rem; font-size: var(--fs-sm); white-space: nowrap; }
.mnav-cta-wide { display: none !important; }
@media (min-width: 600px) { .mnav-cta-wide { display: inline-flex !important; } }
.mnav-burger { width: var(--touch); height: var(--touch); margin-right: -8px; display: grid; place-items: center; border: 0; border-radius: var(--ctl-radius); background: none; color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.mnav-burger:hover { background: var(--paper); }
.mnav-burger:focus-visible, .mnav-link:focus-visible, .mnav-brand:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--ctl-radius); }
/* on phones the name and caret of the profile button are hidden; the drawer carries the menu */
.mnav .pmenu-name { display: none; }
.top-bell { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); }
.top-bell:hover { background: var(--paper); color: var(--teal-700); }
.top-bell .dot { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #e5484d; color: #fff; font: 700 10px/16px var(--font-body); text-align: center; font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .top-bell { width: var(--touch); height: var(--touch); } .mnav-end .btn { min-height: 40px; } }

@media (min-width: 1200px) {
  .mnav-burger { display: none; }
  .mnav-links { display: flex; align-items: center; gap: 2px; min-width: 0; margin-left: var(--sp-4); }
  .mnav-link { position: relative; display: inline-flex; align-items: center; gap: .35rem; height: 34px; padding: 0 .65rem; border: 0; border-radius: var(--ctl-radius); background: none; color: var(--ink-2); font: 500 var(--fs-sm)/1 var(--font-body); white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
  .mnav-link:hover { background: var(--paper); color: var(--teal-700); }
  .mnav-link.active, .mnav-more-btn.active-t2 { color: var(--teal-700); background: var(--cream); font-weight: 600; }
  .mnav-link .nav-badge { margin-left: 1px; }
  .mnav-more-btn i { font-size: .6rem; color: var(--muted); transition: transform .15s; }
  .mnav-more.open .mnav-more-btn i { transform: rotate(180deg); }
  .mnav-more-btn.has-badge::after, .mnav-more-btn.has-mid-badge::after { content: ""; position: absolute; top: 6px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #ffb547; }
  .mnav-more-panel { left: 0; right: auto; width: 230px; }
  .mnav-link.t2 { display: none; }
  .mnav .pmenu-name { display: inline; max-width: 140px; }
}
@media (min-width: 1536px) {
  .mnav-link.t2 { display: inline-flex; }
  .more-t2 { display: none; }
  .mnav-more-btn.has-mid-badge:not(.has-badge)::after { content: none; }
  .mnav-more-btn.active-t2:not(.active) { color: var(--ink-2); background: none; font-weight: 500; }
  .mnav-more:not(:has(.pmenu-list > li:not(.more-t2))) { display: none; }
}

/* Overlay variant: transparent over the dark home hero, solid once scrolled (app.js toggles .scrolled). */
.has-overlay-nav .mnav { position: fixed; inset: 0 0 auto 0; }
.has-overlay-nav .mnav:not(.scrolled) { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.has-overlay-nav .mnav:not(.scrolled) .mnav-brand img { filter: brightness(0) invert(1); }
.has-overlay-nav .mnav:not(.scrolled) .mnav-brand .wm { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.has-overlay-nav .mnav:not(.scrolled) .mnav-brand .tag { background: rgba(255,255,255,.14); color: #fff; }
.has-overlay-nav .mnav:not(.scrolled) .mnav-link { color: rgba(255,255,255,.9); }
.has-overlay-nav .mnav:not(.scrolled) .mnav-link:hover, .has-overlay-nav .mnav:not(.scrolled) .mnav-link.active { color: #fff; background: rgba(255,255,255,.14); }
.has-overlay-nav .mnav:not(.scrolled) .mnav-more-btn i { color: rgba(255,255,255,.7); }
.has-overlay-nav .mnav:not(.scrolled) .mnav-burger, .has-overlay-nav .mnav:not(.scrolled) .top-bell { color: #fff; }
.has-overlay-nav .mnav:not(.scrolled) .mnav-burger:hover, .has-overlay-nav .mnav:not(.scrolled) .top-bell:hover { background: rgba(255,255,255,.14); }
.has-overlay-nav .mnav:not(.scrolled) .btn-ghost { --fg: #fff; background: transparent; border-color: rgba(255,255,255,.45); }
.has-overlay-nav .mnav:not(.scrolled) .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }
.has-overlay-nav .mnav:not(.scrolled) .pmenu-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
.has-overlay-nav .mnav:not(.scrolled) .pmenu-caret { color: rgba(255,255,255,.7); }

/* ---- off-canvas menu (phones / tablets) ------------------------------------------------- */
.mdrawer { position: fixed; inset: 0; z-index: 200; background: rgba(0,20,25,0); transition: background .22s; }
.mdrawer[hidden] { display: none; }
.mdrawer.open { background: rgba(0,20,25,.5); }
.mdrawer-panel { position: absolute; inset: 0 0 0 auto; width: min(340px, 88vw); background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 50px -20px rgba(0,0,0,.35); outline: none; }
.mdrawer.open .mdrawer-panel { transform: none; }
.mdrawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); height: var(--mnav-h); padding: 0 var(--sp-2) 0 var(--sp-4); border-bottom: 1px solid var(--line); flex: none; }
.mdrawer-title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); }
.mdrawer-close { width: var(--touch); height: var(--touch); display: grid; place-items: center; border: 0; background: none; border-radius: var(--ctl-radius); color: var(--ink); font-size: 1.15rem; cursor: pointer; }
.mdrawer-close:hover { background: var(--paper); }
.mdrawer nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2); }
.mdrawer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mdrawer-list a { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); padding: 0 var(--sp-3); border-radius: var(--ctl-radius); color: var(--ink); font-size: var(--fs-base); font-weight: 500; }
.mdrawer-list a i { width: 18px; text-align: center; color: var(--muted); }
.mdrawer-list a span:first-of-type { flex: 1; }
.mdrawer-list a:hover, .mdrawer-list a:focus-visible { background: var(--paper); color: var(--teal-700); outline: none; }
.mdrawer-list a.active { background: var(--cream); color: var(--teal-700); font-weight: 600; }
.mdrawer-list a.active i { color: var(--teal-700); }
.mdrawer-cat { margin: var(--sp-4) var(--sp-3) var(--sp-1); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mdrawer-foot { flex: none; display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.mdrawer-foot .btn { min-height: var(--touch); width: 100%; }
.mdrawer-foot .mdrawer-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

/* ---- page band: public .pagehead and member .pg-head.is-banner are the same component ---- */
.pagehead, .member-layout .pg-head.is-banner {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: radial-gradient(70% 140% at 100% 0%, rgba(77,192,197,.30), transparent 60%),
              linear-gradient(118deg, var(--band-from) 0%, var(--band-mid) 55%, var(--band-to) 100%);
}
.pagehead::before, .member-layout .pg-head.is-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(127,233,238,.55) 1px, transparent 1px); background-size: 22px 22px; opacity: .2;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 100%); mask-image: linear-gradient(100deg, transparent 30%, #000 100%); }
.pagehead { padding-block: 1.75rem; }
/* Band content sits above the decorative particle canvas (.fx-canvas) and the dot pattern. */
.pagehead > .container, .pagehead > .container-fluid { position: relative; z-index: 2; }
.pagehead h1 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.12; margin: 0 0 .4rem; }
.pagehead .lead, .pagehead p { color: rgba(255,255,255,.8); font-size: var(--fs-base); line-height: 1.55; max-width: 70ch; }
.pagehead p:last-child { margin-bottom: 0; }
.pagehead .crumb { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .02em; color: rgba(255,255,255,.65); margin: 0 0 .5rem; }
.pagehead .crumb a { color: #9af4f8; }
.pagehead .crumb a:hover { color: #fff; }
.pagehead .eyebrow { background: rgba(255,255,255,.1); color: #9af4f8; }
@media (min-width: 768px) { .pagehead { padding-block: 2.25rem; } .pagehead .lead, .pagehead p { font-size: var(--fs-md); } }
@media (min-width: 1280px) { .pagehead { padding-block: 2.75rem; } }

/* Member pages: the banner sits inside the fluid content area; it bleeds to the screen edges so it
   reads exactly like the public band (same height rhythm, same gutters). */
.member-layout .pg-head.is-banner { margin: calc(-1 * var(--page-pt)) calc(-1 * var(--gutter)) var(--sp-5); padding: 1.6rem var(--gutter); border-radius: 0; box-shadow: none; align-items: center; }
.member-layout .pg-head.is-banner::after { content: none; }
.member-layout .pg-head.is-banner .pg-title { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.12; }
.member-layout .pg-head.is-banner .pg-sub { color: rgba(255,255,255,.8); font-size: var(--fs-base); margin-top: var(--sp-2); max-width: 70ch; }
.member-layout .pg-head.is-banner .pg-eyebrow { color: #9af4f8; }
.member-layout .pg-head.is-banner .pg-back, .member-layout .pg-head.is-banner .pg-crumb a { color: #9af4f8; }
.member-layout .pg-head.is-banner .btn-ghost { --fg: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.member-layout .pg-head.is-banner .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }
@media (min-width: 768px) { .member-layout .pg-head.is-banner { padding-block: 2rem; } .member-layout .pg-head.is-banner .pg-sub { font-size: var(--fs-md); } }
@media (min-width: 1280px) { .member-layout .pg-head.is-banner { padding-block: 2.4rem; } }

/* ---- page body (member layout wraps every page in it) ----------------------------------- */
:root { --page-pt: var(--sp-5); }
@media (min-width: 1024px) { :root { --page-pt: var(--sp-6); } }
.page-body { width: 100%; min-width: 0; padding: var(--page-pt) var(--gutter) var(--sp-8); }
.page-body > :last-child { margin-bottom: 0; }
.chat-mode .page-body { padding: 0; }

/* ---- footer ----------------------------------------------------------------------------- */
.site .footer { padding: var(--sp-8) 0 var(--sp-4); font-size: var(--fs-sm); }
.site .footer .container { padding-inline: var(--gutter); }
.site .footer-brand { font-size: 1.15rem; }
.site .footer p { font-size: var(--fs-sm); }
.site .footer-grid { row-gap: var(--sp-6); }
@media (pointer: fine) { .site .footer-grid a { min-height: 30px; } }
.chat-mode .footer, .chat-mode .whatsapp-float, .chat-mode .back-top { display: none !important; }

/* ---- motion ------------------------------------------------------------------------------
   .reveal (site.css) fades/slides in when scrolled into view; [data-stagger] staggers children.
   .lift: hover lift for link cards on mouse devices. Counters use tabular numerals (no jump). */
@media (hover: hover) and (pointer: fine) {
  .lift { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
  .lift:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(0,29,35,.35); border-color: var(--teal-300); }
}
[data-count], .pg-stat-value, .kpi-v, .stat .n { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav-brand img, .mdrawer, .mdrawer-panel, .mnav-more-btn i, .mnav-link, .lift { transition: none !important; }
  .lift:hover { transform: none; }
}
@media print { .mnav, .mdrawer, .footer, .whatsapp-float, .back-top, .consent { display: none !important; } .page-body { padding: 0; } }