->  module CSS pane
     2. Everything inside <div class="nw-page"> ->  module HTML+HubL pane
     3. The <script> at the bottom             ->  bottom of the HTML+HubL pane
     4. The Google Fonts <link> below           ->  template <head> (or leave in module)
     5. Replace every  assets/…  path with your File Manager URL
     ============================================================ -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Inter:wght@400;500;600&family=Cabin:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<style id="nw-css">
/* ---- reset / page ---------------------------------------------------- */
.nw-page *{box-sizing:border-box}
/* No background here on purpose: the module inherits the HubSpot page colour,
   so there is no seam where the module box ends. Set the page background to
   #ebf0f3 in HubSpot, not here. */
.nw-page{position:relative;font-family:'Inter',system-ui,sans-serif;color:#262424;overflow-x:hidden}
.nw-page a{color:#2E6DB6;text-decoration:none}
.nw-page a:hover{color:#002060}
.nw-page button{font:inherit;cursor:pointer}
.nw-page h1,.nw-page h2,.nw-page h3,.nw-page p{margin:0}

/* ---- pulse (live status dot) ---------------------------------------- */
@keyframes nwPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
.nw-dot{flex:none;width:7px;height:7px;border-radius:50%;background:#2CA6BF;animation:nwPulse 2.4s ease-in-out infinite}

/* ---- HOVER / FOCUS STATES (these cannot be inline) ------------------ */
.nw-btn{transition:all 200ms cubic-bezier(.2,.8,.2,1)}
.nw-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}

.nw-btn-outline{transition:all 200ms cubic-bezier(.16,1,.3,1)}
.nw-btn-outline:hover{background:#002060;color:#FFFFFF}

.nw-card{transition:all 260ms cubic-bezier(.16,1,.3,1)}
.nw-card:hover{transform:translateY(-3px);border-color:#2E6DB6}

.nw-card-featured{transition:all 260ms cubic-bezier(.16,1,.3,1)}
.nw-card-featured:hover{transform:translateY(-3px)}

.nw-lift{transition:transform 260ms cubic-bezier(.16,1,.3,1)}
.nw-lift:hover{transform:translateY(-3px)}

.nw-row-link{transition:color 180ms cubic-bezier(.16,1,.3,1)}
.nw-row-link:hover{color:#002060}

/* ---- tabs ------------------------------------------------------------ */
.nw-tabs{position:sticky;top:0;z-index:30;margin-top:24px;
  background:#ebf0f3;
  border-bottom:1px solid #D7DEE8;display:flex;gap:36px;overflow-x:auto}
/* Hard reset — HubSpot themes style every <button> (pill radius, fill, white
   text). These !important declarations are deliberate: they fence the tabs off
   from the site's global button rules. */
.nw-page .nw-tab{
  -webkit-appearance:none !important;appearance:none !important;
  background:none !important;background-color:transparent !important;
  background-image:none !important;
  border:0 !important;border-bottom:2px solid transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#4A5568 !important;
  font-family:'Manrope',sans-serif !important;
  font-weight:600 !important;font-size:14px !important;
  letter-spacing:-.005em !important;
  line-height:1.2 !important;
  text-transform:none !important;text-decoration:none !important;
  padding:16px 2px !important;margin:0 !important;
  min-width:0 !important;width:auto !important;height:auto !important;
  white-space:nowrap;
  transition:color 180ms cubic-bezier(.16,1,.3,1),border-color 180ms cubic-bezier(.16,1,.3,1);
}
/* Every unselected tab renders identically, whatever its focus/hover/visited
   history. Only [aria-selected] may darken a tab — focus gets an outline, not
   a colour change, so two tabs can never look emphasized at once. */
.nw-page .nw-tab[aria-selected="false"]{
  color:#4A5568 !important;font-weight:600 !important;border-bottom-color:transparent !important;
  background:none !important;background-color:transparent !important;
  box-shadow:none !important;transform:none !important;opacity:1 !important;
}
.nw-page .nw-tab[aria-selected="false"]:hover{color:#002060 !important}
.nw-page .nw-tab[aria-selected="true"]{
  color:#002060 !important;font-weight:600 !important;border-bottom-color:#2E6DB6 !important;
}
.nw-page .nw-tab:focus,.nw-page .nw-tab:active{
  background:none !important;background-color:transparent !important;
  box-shadow:none !important;transform:none !important;
}
.nw-page .nw-tab:focus-visible{outline:2px solid #2E6DB6 !important;outline-offset:3px}
.nw-page .nw-tab::before,.nw-page .nw-tab::after{content:none !important;display:none !important}

.nw-panel{display:none}
.nw-panel.is-active{display:block}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1080px){
  .nw-hero,.nw-split,.nw-band,.nw-soc{grid-template-columns:1fr !important}
  .nw-hero-art{height:320px !important}
  .nw-certs{grid-template-columns:repeat(2,1fr) !important}
  .nw-3up{grid-template-columns:1fr !important}
  .nw-soc img{min-height:220px !important}
}
@media (max-width:720px){
  .nw-page h1{font-size:40px !important}
  .nw-page h2{font-size:30px !important}
  .nw-certs{grid-template-columns:1fr !important}
  .nw-dpf-grid,.nw-sub-grid{grid-template-columns:1fr !important}
  .nw-dpf-grid > div,.nw-sub-grid > div,.nw-sub-grid > a{padding-left:20px !important;padding-right:20px !important}
}