/* ── Utility Bar ── */
.util-bar {
  background: #f7f5f0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  width: 100%;
}

.util-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.util-bar-left,
.util-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.util-bar-left   { justify-self: start; }
.util-bar-center { justify-self: center; color: #D87629; }
.util-bar-right  { justify-self: end; }

.util-bar-item {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(0,0,0,.65);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .09em;
  background: none;
  border: 0;
  padding: 0;
  transition: color .2s;
}

a.util-bar-item { cursor: pointer; }
a.util-bar-item:hover { color: #D87629; }

.util-bar-accent {
  color: #D87629;
  font-weight: 600;
}

.util-bar-dot {
  font-size: 12px;
  line-height: 1;
  color: rgba(0,0,0,.25);
  user-select: none;
}

.util-bar-arrow {
  font-size: 9px;
  display: inline-block;
  transform: translateY(-1px);
  margin-left: 2px;
  color: rgba(0,0,0,.4);
}

@media (max-width: 900px) {
  .util-bar-tagline { display: none; }
}

@media (max-width: 768px) {
  .util-bar-left { display: none; }
}

/* ── Header-specific resets ───────────────────── */
.nav-bar a {
    text-decoration: none;
    color: #ffffff;
}

.site-header ul {
    list-style: none;
}

/* ── Sticky Nav Bar ──────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-bar {
    background: #07101a;
    color: #ffffff;
    height: 96px;
    position: relative;
    z-index: 1002;
    border-top: 1px solid #d87629;
    border-bottom: 2px solid #d87629;
}

.nav-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 15px;
    gap: 0;
}

/* ── Nav Groups ──────────────────────────────────── */
.nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 43px;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 28px;
}

/* ── Nav Links ───────────────────────────────────── */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 4px;
    transition: color 0.2s;
    cursor: pointer;
    white-space: nowrap;
}

.nav-link:hover {
    color: #F5A623;
}

.nav-link .caret {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.nav-link.is-active {
    color: #F5A623;
}

.nav-link.is-active .caret {
    transform: rotate(180deg);
}

/* ── Logo ────────────────────────────────────────── */
.nav-logo {
    position: absolute;
    left: calc(50% + 30px);
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    display: flex;
    align-items: center;
    pointer-events: auto;
    z-index: 1;
}

.nav-logo img {
    height: 40px;
    width: auto;
}

/* ── CTA Button ──────────────────────────────────── */
.nav-bar a.nav-cta {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    background: #F5A623;
    color: #000;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 10px 20px;
    border-radius: 4px;
    transition: background 0.2s;
    white-space: nowrap;
    z-index: 1;
}

.nav-cta:hover {
    background: #e09418;
}

/* ── Mega Menu Container ─────────────────────────── */
.mega-menu {
    position: absolute;
    top: 79px;
    left: 0;
    right: 0;
    z-index: 1001;
    pointer-events: none;
}

/* ── Mega Panel ──────────────────────────────────── */
.mega-panel {
    display: none;
    background: #fff;
    border-top: 3px solid #d87629;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
}

.mega-panel.is-open {
    display: block;
}

.mega-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding-top: 76px;
    padding-right: 24px;
    padding-bottom: 40px;
    padding-left: 24px;
}

/* ── Mega Columns ────────────────────────────────── */
.mega-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #042433;
    margin-bottom: 16px;
}

.mega-heading--spaced {
    margin-top: 28px;
}

.mega-list li {
    margin-bottom: 10px;
}

.mega-list a {
    font-size: 15px;
    color: #595959;
    transition: color 0.15s;
}

.mega-list a:hover {
    color: #d87629;
}

.mega-pledge {
    font-size: 15px;
    line-height: 1.65;
    color: #595959;
}

/* ── Featured Card ───────────────────────────────── */
.featured-card {
    background: #F0F2F2;
    border-radius: 8px;
    padding: 28px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.featured-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #042433;
    margin-bottom: 10px;
}

.featured-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #595959;
    margin-bottom: 18px;
    flex: 1;
}

.featured-cta {
    font-size: 14px;
    font-weight: 600;
    color: #d87629;
    transition: color 0.15s;
}

.featured-cta:hover {
    color: #c2691f;
}

/* === Implementation mega menu — light background ========== */
/* Rich-layout variant. Used by panels that opt in via the
   .mega-panel-rich modifier — currently only [data-panel="implementation"].
   Panel uses a light blue-grey background; text/borders are dark-on-light. */

.mega-panel-rich {
    background: #ffffff;
}

.mega-rich-inner {
    position: relative;  /* anchors .mega-panel-close */
    max-width: 1200px;
    margin: 0 auto;
    /* Top padding must clear the fixed nav plus a little breathing room. The
       panel's top edge slides UNDER the nav: measured at 1440w, the nav's
       bottom lands 62px below the inner's top, so anything above ~62px local
       is hidden. History: cut 80px -> 48px on 2026-07-03 (clipped the column
       heads), restored to 96px; raised to 120px on 2026-07-04 so the close X
       (40px at top: 70px) gets its own visible row above the column heads. */
    padding-top: 120px !important;
    padding-right: 24px;
    padding-bottom: 0;
    padding-left: 24px;
}

/* ── Panel close (X) button ── */
/* Sits top-left inside the inner's 120px top-padding corridor, aligned with
   the content's left edge; absolute, so panel content never shifts. top: 70px
   clears the fixed nav (nav bottom = inner top + 62px, see .mega-rich-inner)
   with the full 40px hit area visible above the column heads. Quiet steel
   glyph, orange on hover; the click reuses closePanel() (header.js). */
.mega-panel-close {
    position: absolute;
    top: 70px;
    left: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    border-radius: 6px;
    color: #6E8494;
    cursor: pointer;
    transition: color 0.15s;
    z-index: 2;
}
.mega-panel-close svg { width: 18px; height: 18px; display: block; }
.mega-panel-close:hover { color: #d87629; }
.mega-panel-close:focus-visible { outline: 2px solid #d87629; outline-offset: 2px; }

/* ── Two-column links ── */
.mega-rich-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 280px; /* was 1fr 1fr — added aside column */
    gap: 48px;
    margin-bottom: 24px;
}
.mega-rich-col-head {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 16px; /* was 13px */
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #D87629; /* was #595959 */
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #D87629; /* was 1px solid rgba(0,0,0,0.08) */
}
.mega-rich-col--aside .mega-rich-col-head {
    display: none;
}
.mega-rich-item {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    text-decoration: none;
    color: inherit;
}
.mega-rich-item:last-child {
    border-bottom: 0;
}
.mega-rich-item-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #042433;
    transition: color 0.15s;
}
/* Clear the floated badge so the description below lays out cleanly */
.mega-rich-item-title::after {
    content: '';
    display: block;
    clear: both;
}
.mega-rich-item:hover .mega-rich-item-title {
    color: #D87629;
}
.mega-rich-item-desc {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: rgba(0,0,0,0.5);
    margin-top: 2px;
}
.mega-rich-badge {
    background: #D87629;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    float: right;
}

/* ── Aside column cards (3rd column in Implementation panel) ── */
.mega-aside-card {
    background: #F0F2F2;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 16px;
}
.mega-aside-card:last-child {
    margin-bottom: 0;
}
.mega-aside-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #042433;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.mega-aside-body {
    font-size: 13px;
    font-weight: 300;
    color: #595959;
    line-height: 1.6;
    margin-bottom: 12px;
}
.mega-aside-cta {
    font-size: 12px;
    font-weight: 700;
    color: #D87629;
    text-decoration: none;
    letter-spacing: 0.04em;
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
}
.mega-aside-cta:hover {
    text-decoration: underline;
}

/* ── Bottom utility bar (full-width within the panel) ── */
.mega-rich-utility {
    background: rgba(0,0,0,0.04);
    padding: 12px 0;
}
.mega-rich-utility-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.4);
}
.mega-rich-utility-link {
    color: rgba(0,0,0,0.4);
    text-decoration: none;
    transition: color 0.15s;
}
.mega-rich-utility-link:hover {
    color: #D87629;
}

@media (max-width: 900px) {
    .mega-rich-inner { padding: 24px 24px 0; }
    .mega-panel-close { display: none; } /* panels never hover-open here; top: 70px would collide with the 24px padding */
    .mega-rich-cols { grid-template-columns: 1fr; gap: 24px; }
    .mega-rich-utility-inner { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ── Overlay ─────────────────────────────────────── */
.mega-overlay {
    display: none;
    position: fixed;
    top: 79px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 999;
}

.mega-overlay.is-visible {
    display: block;
}

/* ── TPR360 Tab ──────────────────────────────────── */
.tpr-tab {
    position: absolute;
    top: 100%;
    right: 0;
    background: #ffffff;
    border-radius: 0 0 0 10px;
    padding: 10px 14px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    z-index: 1003;
    box-shadow: -2px 2px 16px rgba(0, 0, 0, 0.25);
    transition: opacity 0.2s;
}

.tpr-tab.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.tpr-tab-arrow {
    font-size: 22px;
    color: #d87629;
    line-height: 1;
}

.tpr-tab-img {
    width: 115px;
    height: auto;
    display: block;
}

/* ── TPR360 Nav Drawer ───────────────────────────── */
.tpr-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    height: 100vh;
    background: #ffffff;
    border-left: 2px solid #d87629;
    display: flex;
    flex-direction: column;
    z-index: 1005;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
}

.tpr-nav-drawer.is-open {
    transform: translateX(0);
}

.tpr-nav-drawer.is-shifted {
    transform: translateX(-340px);
}

.tpr-drawer-header {
    background: #042433;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    position: relative;
}

.tpr-drawer-logo-img {
    width: 220px;
    height: auto;
    display: block;
}

.tpr-drawer-tagline {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 4px;
    text-align: center;
}

.tpr-drawer-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.15s;
}

.tpr-drawer-close:hover {
    color: #ffffff;
}

.tpr-drawer-body {
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    flex: 1;
}

.tpr-drawer-section-head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #042433;
    margin-bottom: 8px;
}

.tpr-drawer-link {
    font-size: 14px;
    color: #595959;
    padding: 8px 0;
    border-bottom: 0.5px solid #f0f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

.tpr-drawer-link:last-child {
    border-bottom: none;
}

.tpr-drawer-link:hover,
.tpr-drawer-link.is-active {
    color: #d87629;
}

.tpr-link-arrow {
    font-size: 16px;
    color: #d87629;
    opacity: .5;
}

.tpr-drawer-featured {
    background: #f0f2f2;
    border-radius: 6px;
    padding: 16px;
    border-left: 2px solid #d87629;
}

.tpr-feat-head {
    font-size: 14px;
    font-weight: 700;
    color: #042433;
    margin-bottom: 6px;
}

.tpr-feat-body {
    font-size: 12px;
    color: #595959;
    line-height: 1.6;
    margin-bottom: 12px;
}

.tpr-feat-cta {
    display: inline-block;
    background: #042433;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 4px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s;
}

.tpr-feat-cta:hover {
    background: #0f3f49;
}

/* ── TPR360 Detail Panel ─────────────────────────── */
.tpr-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    height: 100vh;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    z-index: 1006;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
}

.tpr-detail-panel.is-open {
    transform: translateX(0);
}

.tpr-detail-header {
    background: #042433;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.tpr-detail-back {
    background: none;
    border: none;
    color: #d87629;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    white-space: nowrap;
    transition: color 0.15s;
}

.tpr-detail-back:hover {
    color: #F5A623;
}

.tpr-detail-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}

.tpr-detail-body {
    padding: 20px 18px;
    overflow-y: auto;
    flex: 1;
}

.tpr-detail-body h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #042433;
    margin-bottom: 8px;
    margin-top: 16px;
}

.tpr-detail-body h3:first-child {
    margin-top: 0;
}

.tpr-detail-body p {
    font-size: 13px;
    color: #595959;
    line-height: 1.7;
    margin-bottom: 10px;
}

.tpr-detail-body ul {
    list-style: none;
    margin-bottom: 10px;
}

.tpr-detail-body ul li {
    font-size: 13px;
    color: #595959;
    padding: 4px 0 4px 14px;
    position: relative;
    line-height: 1.5;
}

.tpr-detail-body ul li::before {
    content: '\2014';
    position: absolute;
    left: 0;
    color: #d87629;
    font-size: 11px;
}

.tpr-detail-cta {
    display: inline-block;
    background: #042433;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 4px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 14px;
    transition: background 0.15s;
}

.tpr-detail-cta:hover {
    background: #0f3f49;
}

/* ── TPR360 Overlay ──────────────────────────────── */
.tpr-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1004;
}

.tpr-overlay.is-visible {
    display: block;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    .mega-inner {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .nav-inner {
        padding: 0 16px;
    }

    .nav-link {
        font-size: 13px;
        padding: 8px 10px;
    }

    .nav-cta {
        font-size: 12px;
        padding: 8px 14px;
    }

    .nav-logo img {
        height: 32px;
    }

    .tpr-nav-drawer,
    .tpr-detail-panel {
        width: 90vw;
    }

    .tpr-nav-drawer.is-shifted {
        transform: translateX(-90vw);
    }
}

/* ════════════════════════════════════════════════════════════
   MOBILE NAVIGATION
   Hamburger toggle, off-canvas drawer, and the mobile-only
   nav-bar layout. Hidden above 900px; takes over below it.
   ════════════════════════════════════════════════════════════ */

/* ── Hamburger toggle button ───────────────────────── */
.nav-toggle {
    display: none; /* shown only at <900px */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    padding: 10px;
    cursor: pointer;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile drawer overlay ─────────────────────────── */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1009;
}
.mobile-overlay.is-open {
    display: block;
}

/* ── Mobile drawer ─────────────────────────────────── */
.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 90vw;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    z-index: 1010;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
    visibility: hidden;
}
.mobile-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-drawer-header {
    flex-shrink: 0;
    background: #042433;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #d87629;
}
.mobile-drawer-logo {
    display: inline-flex;
    align-items: center;
}
.mobile-drawer-logo img {
    height: 32px;
    width: auto;
}
.mobile-drawer-close {
    background: none;
    border: 0;
    width: 36px;
    height: 36px;
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.15s;
}
.mobile-drawer-close:hover {
    color: #ffffff;
}

.mobile-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}

/* ── Accordion sections ────────────────────────────── */
.mobile-section {
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mobile-section:last-child {
    border-bottom: none;
}
.mobile-section-head {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #042433;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.mobile-section-head:hover {
    background: rgba(216,118,41,0.04);
}
.mobile-section-caret {
    color: #D87629;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.mobile-section.is-open .mobile-section-caret {
    transform: rotate(180deg);
}

.mobile-section-body {
    display: none;
    padding: 4px 20px 20px;
    background: #FAFAFA;
}
.mobile-section.is-open .mobile-section-body {
    display: block;
}

.mobile-section-overview {
    display: block;
    padding: 10px 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #D87629;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 8px;
    font-family: 'Barlow Condensed', sans-serif;
}
.mobile-section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #595959;
    margin: 12px 0 6px;
}
.mobile-section-link {
    display: block;
    padding: 10px 0;
    font-size: 15px;
    color: #042433;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: color 0.15s;
}
.mobile-section-link:last-child {
    border-bottom: none;
}
.mobile-section-link:hover,
.mobile-section-link:active {
    color: #D87629;
}

/* ── Drawer footer ─────────────────────────────────── */
.mobile-drawer-footer {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: #ffffff;
}
.mobile-drawer-cta {
    display: block;
    background: #D87629;
    color: #ffffff;
    text-align: center;
    padding: 12px 18px;
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s;
}
.mobile-drawer-cta:hover {
    background: #c2691f;
}
.mobile-drawer-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    font-size: 12px;
    color: #595959;
}
.mobile-drawer-meta a {
    color: #595959;
    text-decoration: none;
}
.mobile-drawer-meta a:hover {
    color: #D87629;
}

/* ── Body scroll lock helper ───────────────────────── */
body.mobile-nav-locked {
    overflow: hidden;
}

/* ── 900px breakpoint: switch to mobile nav layout ── */
@media (max-width: 900px) {

    /* Reduce sticky chrome height on mobile */
    .nav-bar {
        height: 60px;
    }

    /* Hide all the desktop nav elements */
    .nav-left,
    .nav-right,
    .nav-bar a.nav-cta {
        display: none;
    }

    /* Show the hamburger */
    .nav-toggle {
        display: flex;
    }

    /* Reposition logo to the LEFT of the nav bar (override desktop centering) */
    .nav-logo {
        position: absolute;
        left: 16px;
        right: auto;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }
    .nav-logo img {
        height: 30px;
    }

    /* Mega menu becomes irrelevant on mobile (no anchor element).
       Hide it defensively so it can't ever appear during a hover edge case. */
    .mega-menu,
    .mega-overlay {
        display: none !important;
    }

    /* Hide the floating TPR side tab on mobile — it overlaps the nav.
       The TPR drawer/detail panel themselves still work if triggered
       from elsewhere (currently they're only triggered from the tab,
       so effectively dormant on mobile — by design). */
    .tpr-tab {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════
   Training mega panel restructure — Education / Certifications / Diploma
   with Actions container under cols 2-3 and a light-blue Help bar.
   All rules scoped to [data-panel="training"] so Implementation/Insights/
   About panels keep their existing styling. New classes (.mega-actions-*,
   .mega-help-*) are panel-agnostic but only used by the Training panel
   markup today.
   ════════════════════════════════════════════════════════════ */

/* Override the cols grid for Training: 3 equal columns + a row 2 for the
   Actions container. align-items:start prevents Certifications/Diploma
   from stretching to fill the full grid height (which would be tall, since
   Education spans both rows). */
/* Training panel layout — restructured 2026-06-24 to 4 columns:
     col 1+2: EDUCATION group (Public Seminars | Self-Paced sub-cols)
     col 3:   PERFORMANCE group (Certs + Diploma stacked)
     col 4:   QUICK LINKS in a subtle grey-box column (its own thing,
              NOT part of Performance — Performance header therefore
              only spans col 3)
   align-items: start so the grey-box col is sized to its content rather
   than stretching to match Education's height. */
[data-panel="training"] .mega-rich-cols {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px;
    align-items: start;
}
[data-panel="training"] .mega-rich-col--education {
    grid-column: 1 / 3;   /* Education header + sub-cols span cols 1-2 */
    grid-row: 1;
}
[data-panel="training"] .mega-rich-col--performance {
    grid-column: 3;       /* Performance header only over col 3 */
    grid-row: 1;
}
/* Quick Links — far-right subtle grey-box column. Distinct from the
   plain content cols visually so it reads as a separate widget, not as
   part of Performance. Mirrors the original call-out box treatment
   (light grey background, thin border, rounded corners) that was on
   this panel earlier — now scoped to just this column instead of being
   a full-width footer row. */
[data-panel="training"] .mega-rich-col--quicklinks {
    grid-column: 4;
    grid-row: 1;
    background: #F0F2F2;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 14px 18px;
    align-self: start;
}
/* Education's internal 2-sub-column grid (Public Seminars | Self-Paced). */
[data-panel="training"] .mega-rich-subcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

/* Sub-headers inside the Education column (Public Seminars / Self-Paced).
   Smaller than .mega-rich-col-head but the same orange family/casing so
   they read as a continuation, not a separate section. No border-bottom —
   the user spec says no horizontal divider between sub-sections. */
[data-panel="training"] .mega-rich-col-subhead {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #D87629;
    font-weight: 600;
    margin: 18px 0 8px;
}
/* First subhead sits right under the Education column header — no top gap. */
[data-panel="training"] .mega-rich-col-subhead:first-of-type {
    margin-top: 0;
}

/* Actions container — 3 stacked rows with arrow titles + descriptions.
   Same visual vocabulary as .mega-rich-item (font sizes, weights, hover
   color) so they feel like the rest of the menu. */
.mega-actions-row {
    display: block;
    padding: 14px 0;
    text-decoration: none;
    color: inherit;
}
.mega-actions-row + .mega-actions-row {
    border-top: 1px solid rgba(0,0,0,0.08);
}
.mega-actions-row-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #042433;
    transition: color 0.15s;
}
.mega-actions-row-arrow {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.15s;
}
.mega-actions-row:hover .mega-actions-row-title {
    color: #D87629;
}
.mega-actions-row:hover .mega-actions-row-arrow {
    transform: translateX(2px);
}
.mega-actions-row-desc {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: rgba(0,0,0,0.5);
    margin-top: 4px;
    line-height: 1.5;
}

/* Bottom help bar — replaces .mega-rich-utility for the Training panel only.
   Sits outside .mega-rich-inner so it spans full panel width like the other
   utility bars. */
.mega-help-bar {
    background: #EEF4F9;
    border-top: 1px solid rgba(38,64,107,0.12);
    padding: 14px 0;
}
.mega-help-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.mega-help-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.mega-help-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #26406B;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.mega-help-text {
    display: flex;
    flex-direction: column;
}
.mega-help-headline {
    font-size: 14px;
    font-weight: 500;
    color: #042433;
    line-height: 1.3;
}
.mega-help-sub {
    font-size: 12px;
    color: rgba(0,0,0,0.5);
    margin-top: 2px;
}
.mega-help-button {
    display: inline-block;
    background: #26406B;
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 10px 18px;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.mega-help-button:hover {
    background: #1d3253;
}

/* Mobile collapse — at the existing mobile breakpoint (the rest of the
   mobile experience uses the drawer pattern), the Training panel's grid
   stacks. Education stays in col 1 row 1, then Certifications, then
   Diploma, then Actions, all single-column. */
@media (max-width: 900px) {
    [data-panel="training"] .mega-rich-cols {
        grid-template-columns: 1fr;
    }
    [data-panel="training"] .mega-rich-col--education,
    [data-panel="training"] .mega-rich-col--performance,
    [data-panel="training"] .mega-rich-col--quicklinks {
        grid-column: 1;
        grid-row: auto;
    }
    /* Education's nested sub-cols also collapse to single column on mobile. */
    [data-panel="training"] .mega-rich-subcols {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .mega-help-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}