* {
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: #f0f9e8;
      color: #333;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 30px 40px;
      line-height: 1.7;
    }

    /* NAVIGATION */
    nav {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: #08589e;
      padding: 14px 18px;
      margin-bottom: 40px;
      border-radius: 0 0 10px 10px;
    }

    nav a {
      color: white;
      text-decoration: none;
      margin-right: 22px;
      font-weight: 600;
      padding-bottom: 4px;
      transition: all 0.2s ease;
    }

    nav a:hover {
      border-bottom: 2px solid white;
    }

    nav a.active {
      border-bottom: 2px solid #4eb3d3;
    }

    /* LAYOUT */
    .layout {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 60px;
      align-items: start;
    }

    .sidebar {
      position: sticky;
      top: 20px;
      background: #f0f9e8;
      border-top: 3px solid #08589e;
      border-radius: 16px;
      padding: 28px 24px;
      box-shadow: 0 1px 3px rgba(8, 89, 158, 0.08);
    }

    .content {
      min-width: 0;
    }

    /* PROFILE */
    .profile-photo {
      width: 160px;
      height: 160px;
      object-fit: contain;
      border-radius: 12px;
      border: 4px solid #a8ddb5;
      margin-bottom: 20px;
      padding: 18px;
      background: linear-gradient(135deg, #f0f9e8, #7bccc4 45%, #2b8cbe 80%, #08589e);
   }
     .subtitle {
      font-weight: 600;
      font-size: 1.05rem;
      color: #08589e;
      margin-top: 5px;
      margin-bottom: 12px;
      letter-spacing: 0.3px;
    }

    .value-chain{
     display:flex;
     flex-direction:column;
     margin:16px 0 20px;
   }

    .value-step-item{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .value-step-marker{
      flex-shrink:0;
      width:22px;
      height:22px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-family:'IBM Plex Mono', monospace;
      font-size:9.5px;
      font-weight:700;
      color:#ffffff;
    }
    .value-step-marker.marker-1{ background:#a8ddb5; }
    .value-step-marker.marker-2{ background:#4eb3d3; }
    .value-step-marker.marker-3{ background:#08589e; }

    .value-step{
     font-family:'IBM Plex Mono', monospace;
     font-size:0.72rem;
     font-weight:600;
     letter-spacing:0.05em;
     text-transform:uppercase;
     color:#6b7280;
   }

    .value-step-item:last-child .value-step{
      color:#08589e;
      font-weight:700;
    }

   .value-connector{
     width:1px;
     height:14px;
     background:linear-gradient(#a8ddb5, #08589e);
     margin:2px 0 2px 11px;
  }
    
     h1 {
      color: #08589e;
      font-size: 1.8rem;
      margin-bottom: 10px;
      word-spacing: normal;
      display: block;
    }

    h2 {
      color: #08589e;
      border-bottom: 2px solid #a8ddb5;
      padding-bottom: 10px;
      margin-bottom: 25px;
    }

    section {
      margin-bottom: 60px;
    }

    section > h3{
      display:block;
      color:#2b8cbe;
      font-size:0.8rem;
      font-weight:700;
      font-style:normal;
      letter-spacing:0.1em;
      text-transform:uppercase;
      margin:0 0 20px;
      padding-bottom:0;
      border-bottom:none;
    }

    section > h3 strong{
      font-weight:700;
    }

    /* BUTTON */
    .button {
      display: inline-block;
      background: #2b8cbe;
      color: white;
      padding: 12px 20px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
    }

    .button:hover {
      background: #08589e;
    }

    .sidebar-punchline{
      background: #e0f3da;
      border-left: 3px solid #08589e;
      border-radius: 0 8px 8px 0;
      padding: 14px 16px;
      margin: 4px 0 18px;
    }

    .sidebar-punchline .punchline-kicker{
      display: block;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #08589e;
      margin-bottom: 6px;
    }

    .sidebar-punchline .punchline-text{
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 600;
      font-size: 0.95rem;
      line-height: 1.5;
      color: #1f2937;
      margin: 0;
    }

    .sidebar-actions{
     display:flex;
     flex-wrap:wrap;
     gap:10px;
   }

   

   

    /* CONTACT SECTION — dark contrasting block, using the site's own palette */
    #contact{
      background:#08589e;
      color:#f0f9e8;
      padding:56px 44px;
      border-radius:16px;
    }

    #contact .section-eyebrow{
      color:#ccebc5;
      font-weight:700;
      letter-spacing:0.14em;
      text-transform:uppercase;
      font-size:0.8rem;
      margin:0 0 14px;
    }

    #contact h2{
      color:#ffffff;
      border-bottom:none;
      padding-bottom:0;
      font-size:2.1rem;
      margin:0 0 18px;
    }

    #contact .contact-copy{
      color:#e3f2e0;
      font-size:1.05rem;
      max-width:640px;
      margin:0 0 28px;
      line-height:1.7;
    }

    #contact .button-pill{
      background:#ffffff;
      color:#08589e;
      border-radius:999px;
      padding:14px 28px;
      font-weight:700;
    }

    #contact .button-pill:hover{
      background:#f0f9e8;
    }

    /* safety net: any plain link inside Contact stays legible on the dark background */
    #contact a:not(.button-pill){
      color:#ccebc5;
    }
    #contact a:not(.button-pill):hover{
      color:#ffffff;
    }

    

    

    

    

    

    


    

    /* keeps spacing after subheadings consistent, rather than relying on
       default browser paragraph margins which don't match the heading's own gap */
    section > h3 + p{
      margin:0 0 20px;
    }

    

    

    

    

    #learning {
      margin-bottom: 55px;
   }


   


.concept-intro {
  margin-left: 12px;
  margin-bottom: 8px;   /* reduced spacing */
  font-weight: 600;
  color: #08589e;
  font-size: 1.1rem;
  border-left: 4px solid #2b8cbe;
  padding-left: 10px;
}

.map-container {
  width: 100%;
  margin-left: 0;
  padding: 0 20px;
}

.panel-map {
  display: block;
  width: 100%;
  height: 600px;
  border: none;
  background: white;
  border-radius: 12px;
}

/* Compact concept maps — same object/SVG pattern as .panel-map above, but
   sized for the much smaller Building Blocks / Applications maps used
   inside Financial Sector Stability, Macroprudential Policy, and
   Data-Driven Decision-Making. Centered with a fixed max-width rather than
   stretched full-width, since these maps are only 2–3 nodes wide and look
   sparse/oversized if stretched to match the wider panel content. */
.mini-map-container{
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 0 28px;
}

.mini-concept-map{
  display: block;
  width: 100%;
  max-width: 520px;
  height: 230px;
  border: none;
  background: transparent;
}

  

.node-modal.active {
  display: flex;
}


 


/* EMERGING DEVELOPMENTS — appended below iframe in Learning Hub topic modals */


.ed-eyebrow{
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2b8cbe;
  margin: 0 0 10px;
}


.ed-insight-date{
  font-size: 0.78rem;
  font-weight: 700;
  color: #2b8cbe;
}


  


  .zoom-infographic{
    width:40%;
    max-width:600px;
    display:block;
    margin:0 auto 8px;
}
/* ---------- CLICKABLE INFOGRAPHIC ---------- */

.clickable-infographic{
    cursor:pointer;
    transition:transform 0.25s ease;
}

.clickable-infographic:hover{
    transform:scale(1.02);
}

/* ---------- IMAGE MODAL ---------- */

.image-modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    z-index:3000;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.image-modal.active{
    display:flex;
}

.expanded-image{
    width:auto;
    height:auto;
    max-width:95vw;
    max-height:95vh;
    object-fit:contain;
    border-radius:10px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
}

.close-image{
    position:absolute;
    top:20px;
    right:35px;
    font-size:3rem;
    color:white;
    cursor:pointer;
    user-select:none;
}

 #modal-body.is-loading {
  min-height: 200px;
  position: relative;
}
 #modal-body.is-loading::after {
  content: "Loading…";
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #6b7280;
}
 #modal-body.is-loading iframe,
 #modal-body.is-loading img {
  visibility: hidden;
}

    

    

    

    

    

    

    

    

    

    

    /* RESEARCH OUTPUTS — same slim single-column list as the Insights
       archive above, for a consistent light design across both sections. */
    .outputs-accordion{
      display: flex;
      flex-direction: column;
      border: 1px solid #a8ddb5;
      border-radius: 10px;
      overflow: hidden;
      background: #ffffff;
    }

    .output-item{
      border-bottom: 1px solid #e5e7eb;
      padding: 14px 20px;
      transition: background 0.15s ease;
    }
    .output-item:last-child{ border-bottom: none; }
    .output-item:hover{ background: #f7fbf5; }
    .output-item[open]{ background: #f7fbf5; }

    /* Placeholder rows keep a permanent soft tint (even collapsed) so they
       read as "not yet published" at a glance. */
    .output-item.output-item-placeholder{ background: #f7fbf5; }
    .output-item.output-item-placeholder:hover,
    .output-item.output-item-placeholder[open]{ background: #eef6e7; }

    .output-item summary{
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .output-item summary::-webkit-details-marker{ display: none; }
    .output-item summary::before{
      content: "+";
      font-family: 'Fraunces', serif;
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1;
      color: #2b8cbe;
      flex-shrink: 0;
      width: 16px;
      text-align: center;
    }
    .output-item[open] summary::before{ content: "–"; }

    .output-tag{
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #2b8cbe;
      flex-shrink: 0;
      min-width: 108px;
    }

    .output-title{
      flex: 1 1 auto;
      min-width: 0;
      font-weight: 700;
      color: #08589e;
      font-size: 0.96rem;
      line-height: 1.4;
    }
    .output-item:not([open]) .output-title{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @media (max-width: 480px){
      .output-item summary{ flex-wrap: wrap; row-gap: 6px; }
      .output-title{ flex-basis: 100%; }
    }

    .output-body{
      margin-top: 14px;
      padding-top: 14px;
      padding-left: 30px;
      border-top: 1px solid #e5e7eb;
    }
    .output-body p{
      color: #555;
      font-size: 0.92rem;
      margin: 0 0 8px;
    }
    .output-body p:last-child{ margin-bottom: 0; }

    /* Divider between a page's top intro block (eyebrow + headline + supporting
       line) and the first content section below it — gives the intro room to
       breathe rather than running straight into the next eyebrow/headline pair. */
    .page-intro-divider{
      margin: 20px 0 18px;
      border-top: 1px solid #a8ddb5;
    }

    /* Insights archive meta-bar — sits where the old framing-note blockquote
       used to. Retired the blockquote treatment because this content isn't
       a quote: it's two different things (a plain descriptive caption, and
       two real navigation shortcuts) that a blockquote's "notable quote"
       framing papered over. Now they're visually distinct: a small italic
       caption on the left (same register as .section-label-note elsewhere
       on this page), and the two shortcuts as small pill buttons on the
       right, reusing the same mono/pill language as the .xpill filters
       just below — so they read immediately as clickable quick actions,
       not sentence fragments. */
    .insights-meta-bar{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin: 4px 0 22px;
      padding-bottom: 16px;
      border-bottom: 1px solid #a8ddb5;
    }
    .insights-meta-text{
      font-size: 0.88rem;
      font-style: italic;
      color: #6b7280;
      margin: 0;
    }
    .insights-meta-links{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .insights-meta-link{
      font-family: 'IBM Plex Mono', monospace;
      font-size: 0.76rem;
      font-weight: 600;
      letter-spacing: 0.03em;
      color: #08589e;
      background: #ffffff;
      border: 1px solid #a8ddb5;
      border-radius: 999px;
      padding: 7px 14px;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .insights-meta-link:hover{
      background: #2b8cbe;
      border-color: #2b8cbe;
      color: #ffffff;
    }

    /* Summary clamp — [data-clamped="true"] limits the summary to a few
       lines; toggled off via JS (initReadMoreToggles) once the reader asks
       to see more. Short summaries never overflow the clamp, so they never
       get a button — the toggle only appears when there's actually more
       text hidden. */
    .insight-summary[data-clamped="true"]{
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .insight-read-more-btn{
      display: block;
      margin-top: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      color: #2b8cbe;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
    }

    .insight-read-more-btn:hover{
      color: #08589e;
      text-decoration: underline;
    }

    /* INSIGHTS ARCHIVE — a slim, single-column list rather than boxed cards.
       Collapsed rows are a single thin line (icon + date + pill + title),
       divided by hairlines rather than separate bordered/shadowed boxes, so
       the list reads as one light, cohesive block even as more Insights are
       added — not a stack of visually heavy cards. */
    #insights-archive{
      display: flex;
      flex-direction: column;
      border: 1px solid #a8ddb5;
      border-radius: 10px;
      overflow: hidden;
      background: #ffffff;
    }

    .insight-accordion-item{
      border-bottom: 1px solid #e5e7eb;
      padding: 14px 20px;
      transition: background 0.15s ease;
    }
    .insight-accordion-item:last-child{ border-bottom: none; }
    .insight-accordion-item:hover{ background: #f7fbf5; }
    .insight-accordion-item[open]{ background: #f7fbf5; }

    .insight-accordion-item summary{
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .insight-accordion-item summary::-webkit-details-marker{ display: none; }
    .insight-accordion-item summary::before{
      content: "+";
      font-family: 'Fraunces', serif;
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1;
      color: #2b8cbe;
      flex-shrink: 0;
      width: 16px;
      text-align: center;
    }
    .insight-accordion-item[open] summary::before{ content: "–"; }

    .insight-accordion-date{
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #7bccc4;
      flex-shrink: 0;
      min-width: 68px;
    }

    /* Overrides the generic .insight-category-badge's block-level margins
       (built for stacking above a card's <h4>) so the badge sits cleanly
       inline within this row instead. */
    .insight-accordion-item .insight-category-badge{
      margin: 0;
      flex-shrink: 0;
    }

    /* Collapsed: a single truncated line, so every row is the same slim
       height regardless of title length. Opened: unwraps to show the full
       title, however long it is. */
    .insight-accordion-title{
      flex: 1 1 auto;
      min-width: 0;
      font-weight: 700;
      color: #08589e;
      font-size: 0.96rem;
      line-height: 1.4;
    }
    .insight-accordion-item:not([open]) .insight-accordion-title{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* On narrow screens, let the title drop to its own full-width line
       below the date/pill/icon rather than truncating aggressively. */
    @media (max-width: 480px){
      .insight-accordion-item summary{ flex-wrap: wrap; row-gap: 6px; }
      .insight-accordion-title{ flex-basis: 100%; }
    }

    .insight-accordion-body{
      margin-top: 14px;
      padding-top: 14px;
      padding-left: 30px; /* aligns under the title, past the icon column */
      border-top: 1px solid #a8ddb5;
    }
    .insight-accordion-body .insight-summary{
      color: #555;
      font-size: 0.92rem;
      margin: 0 0 4px;
    }
    .insight-accordion-body .insight-summary p{ margin: 0 0 12px; }
    .insight-accordion-body .insight-summary p:last-child{ margin-bottom: 0; }

    .insights-show-more-row{
      text-align: center;
      margin-top: 22px;
    }

    .insights-show-more-btn{
      font-family: 'Inter', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      color: #08589e;
      background: #e8f8db;
      border: 1px solid #a8ddb5;
      border-radius: 999px;
      padding: 10px 26px;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease;
    }

    .insights-show-more-btn:hover{
      background: #ccebc5;
      border-color: #7bccc4;
    }

    /* INSIGHTS */
    .insights-list{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .insight-item{
      background: white;
      border-radius: 10px;
      padding: 18px 22px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    }

    /* Homepage-only treatment — the practice-zone box around this section is
       white, so a plain white card sitting inside it disappears into the
       background. Scoped to #insights-latest specifically so the Insights
       archive page (#insights-archive) keeps its own white-card grid. */
    #insights-latest .insight-item{
      background: #f7fbf5;
      border-radius: 10px;
      box-shadow: none;
    }

    .insight-date{
      display: block;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #7bccc4;
      margin-bottom: 8px;
    }

    .insight-item h4{
      margin: 0 0 8px;
      color: #08589e;
      font-size: 1.02rem;
    }

    .insight-item p,
    .insight-item .insight-summary{
      color: #555;
      font-size: 0.92rem;
      margin: 0;
    }

    /* If a summary contains its own <p> tags (for multi-paragraph text),
       give each one breathing room, with no trailing gap after the last. */
    .insight-item .insight-summary p{
      margin: 0 0 12px;
    }
    .insight-item .insight-summary p:last-child{
      margin-bottom: 0;
    }

    

    

    

    /* PROJECTS PAGE — FILTERS & CARD STATES */
    .project-filters{
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 24px 0 16px;
    }

    .project-pill{
      font-family: 'Inter', sans-serif;
      font-size: 0.88rem;
      font-weight: 600;
      padding: 9px 18px;
      border-radius: 999px;
      border: 1px solid #a8ddb5;
      background: #ffffff;
      color: #4b5563;
      cursor: pointer;
      transition: all 0.18s ease;
    }

    .project-pill:hover{
      border-color: #2b8cbe;
      color: #08589e;
    }

    .project-pill.active{
      background: #2b8cbe;
      border-color: #2b8cbe;
      color: #ffffff;
    }

    .section-label-note{
      font-size: 0.85rem;
      color: #6b7280;
      font-style: italic;
      margin: 0 0 20px;
    }

    

    .work-status{
      margin-top: 10px !important;
      font-size: 0.82rem !important;
      color: #7bccc4 !important;
      font-weight: 700;
      font-style: italic;
    }

    /* THE METHOD IN PRACTICE — grouping zone */
    .practice-zone{
      background: #ffffff;
      border: 1px solid #a8ddb5;
      border-radius: 16px;
      padding: 40px 36px;
      margin-bottom: 60px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.04);
    }

    

    

    .zone-section{
      margin-bottom: 40px;
    }

    .insight-hub-teaser-text{
      margin: 16px 0 0;
      padding: 10px 14px;
      border-left: 3px solid #7bccc4;
      background: #f7fbf5;
      font-family: 'Fraunces', serif;
      font-style: italic;
      color: #08589e;
      font-size: 0.92rem;
      line-height: 1.6;
    }

    .insight-links-row{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin-top: 10px;
    }

    .insight-related{
      display: inline-block;
      font-size: 0.85rem;
      font-weight: 700;
      color: #2b8cbe;
      text-decoration: none;
    }

    .insight-related:hover{
      color: #08589e;
      text-decoration: underline;
    }

    .insights-view-all{
      margin: 18px 0 0;
      text-align: right;
    }
    .insights-view-all a{
      font-weight: 700;
      font-size: 0.9rem;
      color: #2b8cbe;
      text-decoration: none;
    }
    .insights-view-all a:hover{ color: #08589e; text-decoration: underline; }

    .insights-heading{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .insights-heading svg{
      width:22px;
      height:22px;
      color:#2b8cbe;
    }
    .insights-heading h2{ margin:0; }

    /* WHO WE WORK WITH */
    #who-we-work-with{
      background:#cbf1c2;
      border-radius:16px;
      padding:40px 36px;
    }
    .sector-grid{
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      gap:40px;
      align-items:start;
    }
    .sector-divider{
      width:1px;
      background:rgba(8,88,158,0.25);
      align-self:stretch;
    }
    .sector-number{
      font-family:'Fraunces', serif;
      font-size:2.8rem;
      font-weight:700;
      color:rgba(255,255,255,0.75);
      line-height:1;
      display:block;
      margin-bottom:4px;
    }
    .sector-col h3{
      color:#08589e;
      font-size:1.35rem;
      margin:0 0 10px;
    }
    .sector-industries{
      color:#6b7280;
      font-size:0.92rem;
      font-style:italic;
      margin:0 0 22px;
    }
    .sector-questions-label{
      font-size:0.75rem;
      font-weight:700;
      letter-spacing:0.1em;
      text-transform:uppercase;
      color:#2b8cbe;
      margin:0 0 10px;
    }
    .sector-questions{
      list-style:none;
      margin:0;
      padding:0;
    }
    .sector-questions li{
      position:relative;
      padding-left:22px;
      margin-bottom:10px;
      color:#374151;
      font-size:0.94rem;
    }
    .sector-questions li::before{
      content:"→";
      position:absolute;
      left:0;
      color:#08589e;
      font-weight:700;
    }
    @media (max-width: 768px){
      .sector-grid{ grid-template-columns: 1fr; }
      .sector-divider{ display:none; }
    }

    

    

    

    

    

    

    .page-framing-note{
      font-size: 0.85rem;
      font-style: italic;
      color: #6b7280;
      margin: 4px 0 20px;
    }

    .page-framing-note.accent-left{
      border-left: 3px solid #2b8cbe;
      padding-left: 16px;
    }

    .page-framing-note strong{
      color: #2b8cbe;
      font-style: normal;
      font-weight: 700;
    }

    .page-framing-note a{
      color: #2b8cbe;
      font-style: normal;
      font-weight: 700;
      text-decoration: none;
    }

    .page-framing-note a:hover{
      text-decoration: underline;
    }

    /* ============================================================
       NEW — Hero, Services (track cards), Knowledge Platform zone,
       Contact options, footer (homepage v3)
       ============================================================ */

    .eyebrow-heading{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:0.8rem;
      font-weight:700;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:#2b8cbe;
      margin-bottom:16px;
    }
    .eyebrow-heading::before{
      content:"";
      width:24px;
      height:1px;
      background:#2b8cbe;
    }

    /* HERO */
    .hero-headline{
      font-family:'Fraunces', serif;
      font-size: 2.4rem;
      font-weight: 600;
      color:#08589e;
      line-height:1.2;
      margin:0 0 18px;
      border:none;
      padding:0;
    }
    .hero-sub{
      font-size:1.05rem;
      color:#374151;
      margin:0 0 24px;
    }
    .hero-subtext{
     font-size:1.05rem;
    color:#374151;
    margin:0 0 24px;
  }
    .hero-about-blurb{
      border-left: 3px solid #7bccc4;
      padding-left: 18px;
      margin: 0 0 8px;
      font-size: 0.95rem;
      color: #4b5563;
    }
    .hero-about-blurb a{
      color:#2b8cbe;
      font-weight:700;
      text-decoration:none;
    }
    .hero-about-blurb a:hover{ text-decoration:underline; }
    .hero-about-blurb .kicker{
      display:block;
      font-weight:700;
      font-size:0.75rem;
      letter-spacing:0.1em;
      text-transform:uppercase;
      color:#08589e;
      margin-bottom:4px;
    }

    .hero-about-blurb .mission-text{
      display: block;
      font-size: 1.15rem;
      font-weight: 600;
      color: #08589e;
     line-height: 1.5;
      margin-bottom: 10px;
   }

    

    /* Supporting tagline under a page's hero headline — same accent-border,
       serif pattern as .value-statement, just italic and sized down since
       it's a subtitle rather than a full callout. */
    .page-tagline{
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 500;
      font-size: 1.15rem;
      line-height: 1.5;
      color: #08589e;
      border-left: 3px solid #2b8cbe;
      padding-left: 18px;
      margin: 14px 0 0;
      max-width: 620px;
    }

    .value-statement{
    font-family: 'Fraunces', serif;
    font-size: 1.28rem;
    font-weight: 500;
    line-height: 1.55;
    color: #374151;
    border-left: 3px solid #2b8cbe;
    padding-left: 22px;
    margin: 0 0 32px;
    max-width: 780px;
   }
   .value-statement strong{
    color: #08589e;
    font-weight: 700;
   }
    .track-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:24px;
      align-items: stretch;
    }
    .track-col{ display:flex; flex-direction:column; }
    .track-banner{
      padding:12px 20px;
      border-radius:10px 10px 0 0;
      font-size:0.78rem;
      font-weight:700;
      letter-spacing:0.06em;
      text-transform:uppercase;
      color:#ffffff;
    }

    
    .track-banner.business{ background:#3ac0b2; }
    .track-banner.financial{ background:#1a97d5; }
    .track-card{ border-radius: 0 0 14px 14px; padding: 26px 26px 28px; flex:1; }
    .track-card.light{ background:#e8f8db; border:1px solid #a8ddb5; border-top:none; }
    .track-card.dark{ background:#08589e; color:#f0f9e8; }
    .track-card h3{ margin:0 0 12px; font-size:1.3rem; }
    .track-card.light h3{ color:#08589e; }
    .track-card.dark h3{ color:#ffffff; }
    .track-card p.track-desc{ font-size:0.93rem; margin:0 0 16px; }
    .track-card.light p.track-desc{ color:#374151; }
    .track-card.dark p.track-desc{ color:#e3f2e0; }
    .track-card ul{ margin:0 0 20px; padding-left:20px; font-size:0.9rem; }
    .track-card.light ul{ color:#374151; }
    .track-card.dark ul{ color:#e3f2e0; }
    .track-card li{ margin-bottom:6px; }
    .track-card a.track-link{ font-weight:700; font-size:0.9rem; text-decoration:none; }
    .track-card.light a.track-link{ color:#2b8cbe; }
    .track-card.dark a.track-link{ color:#ccebc5; }
    .track-card.light a.track-link:hover{ color:#08589e; text-decoration:underline; }
    .track-card.dark a.track-link:hover{ color:#ffffff; text-decoration:underline; }

    /* THE KNOWLEDGE PLATFORM zone */
    .zone-headline{
      font-family:'Fraunces', serif;
      color:#08589e;
      font-size:1.9rem;
      font-weight:600;
      margin:0 0 14px;
      line-height:1.2;
      border:none;
    }

    /* Where Method Meets Application */
    .application-label{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      font-size:0.8rem;
      font-weight:700;
      letter-spacing:0.1em;
      text-transform:uppercase;
      color:#2b8cbe;
      margin: 0 0 18px;
      text-align:center;
   }

    .application-label::before,
    .application-label::after{
      content:"";
      width:24px;
      height:1px;
      background:#2b8cbe;
   }
    .app-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
    .app-card{
      background:#e8f8db;
      border:1px solid #a8ddb5;
      border-radius:12px;
      padding:26px 24px;
    }

    .app-card .app-tag{
      font-size:1.05rem;
      font-weight:800;
      letter-spacing:0.04em;
      text-transform:uppercase;
      color:#08589e;
      margin:0 0 12px;
   }
    .app-card h3{ color:#08589e; font-size:1.2rem; margin:0 0 10px; }
    .app-card p{ color:#374151; font-size:0.93rem; margin:0 0 18px; }
    .app-card a{
      display:inline-block;
      background:#2b8cbe;
      color:#ffffff;
      padding:10px 20px;
      border-radius:999px;
      text-decoration:none;
      font-weight:700;
      font-size:0.87rem;
    }
    .app-card a:hover{ background:#08589e; }

    .hub-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 24px 0;
  }
  @media (max-width: 600px){
    .hub-grid{ grid-template-columns: 1fr; }
  }

.hub-card{
  background: white;
  border-radius: 10px;
  padding: 22px;
  border-left: 5px solid #08589e;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.hub-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.hub-card h3{
  margin: 0 0 10px;
  color: #08589e;
  font-size: 1.1rem;
}

.hub-card p{
  color: #555;
  font-size: 0.92rem;
  margin: 0 0 16px;
  flex-grow: 1;
}

.hub-card-link{
  background: none;
  border: none;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: #2b8cbe;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  align-self: flex-start;
}

.hub-card-link:hover{
  color: #08589e;
  text-decoration: underline;
}

.hub-panel{
  background: white;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  margin-bottom: 24px;
}

.hub-panel-close-row{
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid #a8ddb5;
  text-align: center;
}

.hub-panel-close{
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #08589e;
  background: #e8f8db;
  border: 1px solid #a8ddb5;
  border-radius: 999px;
  padding: 10px 24px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.hub-panel-close:hover{
  background: #ccebc5;
  border-color: #7bccc4;
}


    /* CONTACT — multiple formats */
    .contact-options{ display:flex; flex-wrap:wrap; gap:14px; }
    .contact-options a{
      background:#ffffff;
      color:#08589e;
      border-radius:999px;
      padding:14px 24px;
      font-weight:700;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .contact-options a:hover{ background:#f0f9e8; }
    .contact-options a.outline{
      background:transparent;
      color:#ffffff;
      border:2px solid #ffffff;
    }
    .contact-options a.outline:hover{ background:rgba(255,255,255,0.12); }

    /* SITE FOOTER */
    footer.site-footer{
      margin-top: 50px;
      padding-top: 24px;
      border-top: 1px solid #a8ddb5;
      text-align: center;
      font-size: 0.82rem;
      color: #6b7280;
    }
    footer.site-footer a{ color: #2b8cbe; text-decoration: none; }
    footer.site-footer a:hover{ text-decoration: underline; }

    /* ============================================================
       NEW — About & Services 
       ============================================================ */
    .section-headline{
      font-family: 'Fraunces', serif;
      font-size: 2.2rem;
      font-weight: 600;
      color: #08589e;
      margin:0 0 16px;
      line-height:1.2;
      border: none;
      padding: 0;
    }
    

    
    
    .mission-callout .kicker{
      display:block;
      font-family:'Inter',sans-serif;
      font-style:normal;
      font-weight:700;
      font-size:0.75rem;
      letter-spacing:0.1em;
      text-transform:uppercase;
      color:#08589e;
      margin-bottom:8px;
    }

    /* Services page */
    .glance-group{ margin-bottom: 44px; }
    .glance-banner{ border-radius:12px; padding:22px 26px; margin-bottom:22px; }
    .glance-banner.business{ background:#3ac0b2; }
    .glance-banner.financial{ background:#08589e; }
    .banner-top{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
    

    .pillar-block{ margin-bottom: 32px; }
    .pillar-block:last-child{ margin-bottom: 0; }

    .pillar-header{
      margin-bottom: 18px;
      padding-left: 16px;
      border-left: 3px solid #3ac0b2;
    }
    .pillar-header.financial{ border-left-color: #08589e; }

    .pillar-tag{
      display: block;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #2b8cbe;
      margin-bottom: 6px;
    }

    .pillar-header h4{
      font-family: 'Fraunces', serif;
      margin: 0 0 8px;
      color: #08589e;
      font-size: 1.4rem;
      font-weight: 600;
    }

    .pillar-header p{
      margin: 0;
      color: #6b7280;
      font-size: 0.9rem;
      line-height: 1.6;
      max-width: 640px;
    }
    
    .glance-banner h3{ margin:0; font-size:1.25rem; font-weight:700; color:#ffffff; }
    .glance-banner p{ margin:0; color:#ffffff; opacity:0.92; font-size:0.93rem;}
    .glance-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
    .glance-card{
      position: relative;
      background:#ffffff;
      border:1px solid #a8ddb5;
      border-radius: 10px;
      padding: 20px 22px;
      cursor:pointer;
      transition: box-shadow 0.2s ease;
    }
    .glance-card:hover, .glance-card.open{ box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
    .glance-card h4{ margin: 0 0 8px; color:#08589e; font-size:1.05rem; }
    .glance-card > p{ margin:0; color:#6b7280; font-size:0.88rem; }
    .glance-expand-hint{
      display:block; margin-top:8px; font-size:0.74rem; color:#a8ddb5; font-weight:700;
    }
    .glance-card.open .glance-expand-hint, .glance-card:hover .glance-expand-hint{ display:none; }

    /* Detail panel floats over the page instead of growing the card in place
       — position:absolute removes it from document flow entirely, so opening
       it never changes the grid's row height, never pushes rows below down,
       and never causes the sticky sidebar to shift. Hovering the panel itself
       still counts as hovering .glance-card (it's a DOM descendant), so it
       stays open while the cursor is over the revealed text.
       DESKTOP ONLY: on mobile the grid is single-column, so a floating panel
       would sit on top of the next card below rather than empty space. Below
       769px this reverts to the simpler in-flow push-down expansion instead
       — see the mobile override further down. */
    @media (min-width: 769px){
      .glance-card-body{
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 30;
        background: #ffffff;
        border: 1px solid #a8ddb5;
        border-radius: 10px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.16);
        padding: 16px 18px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
        pointer-events: none;
      }

      .glance-card:hover .glance-card-body,
      .glance-card.open .glance-card-body,
      .glance-card:focus .glance-card-body{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }
    }

    .glance-card-body p{
      margin:0; padding-top:10px; border-top:1px solid #e5e7eb;
      color:#6b7280; font-size:0.85rem; line-height:1.6;
    }
    .glance-card-body p.deliverables-line{
      border-top: none;
      padding-top: 0;
      margin-top: 10px;
      font-size: 0.82rem;
      color: #08589e;
    }
    .glance-card-body p.deliverables-line strong{
      color: #08589e;
    }

    .catalogue-note{ font-size:0.85rem; color:#6b7280; font-style:italic; margin-top: 8px; }

    /* RESPONSIVE (extended) */
    @media (max-width: 768px) {
      .track-grid, .app-grid{ grid-template-columns: 1fr; }
      

      /* Mobile fallback for .glance-card-body: single-column grid means the
         desktop floating overlay would sit on top of the next card below
         rather than empty space, so mobile keeps the original in-flow
         expansion instead — a standard, expected accordion pattern with no
         overlap risk. Collapsed via max-height:0/overflow:hidden rather than
         display:none so the height transition can still animate. Driven by
         .open (tap-toggled in services.html's script) rather than :hover,
         since hover isn't a reliable signal on touch devices. */
      .glance-card-body{
        position: static;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 0 18px;
        margin-top: 0;
        border: none;
        box-shadow: none;
        pointer-events: none;
        transition: max-height 0.25s ease, padding 0.25s ease, margin-top 0.25s ease;
      }

      .glance-card.open .glance-card-body,
      .glance-card:focus .glance-card-body{
        max-height: 400px;
        padding: 16px 18px;
        margin-top: 10px;
        border: 1px solid #a8ddb5;
        border-radius: 10px;
        pointer-events: auto;
      }
    }

    /* ============================================================
       ABOUT — off-canvas drawer
       ============================================================ */
    .about-drawer-overlay{
      position:fixed; inset:0; background:rgba(8,88,158,0.35);
      opacity:0; visibility:hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index:3000;
    }
    .about-drawer-overlay.open{ opacity:1; visibility:visible; }

    .about-drawer{
      position:fixed; top:0; right:0; height:100vh;
      width:min(480px, 92vw);
      background:#ffffff;
      overflow-y:auto;
      transform:translateX(100%);
      transition: transform 0.35s ease;
      z-index:3001;
      box-shadow:-12px 0 30px rgba(0,0,0,0.18);
      padding:36px 32px 60px;
    }
    .about-drawer.open{ transform:translateX(0); }

    .about-drawer-close{
      position:sticky; top:0; float:right;
      width:38px; height:38px; border:none; border-radius:50%;
      background:#ccebc5; color:#08589e; font-size:1.4rem; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      margin-bottom:12px;
    }
    .about-drawer-close:hover{ background:#a8ddb5; }

    .about-drawer h2{
      font-family:'Fraunces', serif;
      font-size:1.6rem; font-weight:600; color:#08589e;
      border:none; padding:0; margin:0 0 14px; clear:both;
      line-height:1.25;
    }
    .about-drawer > p.drawer-intro{
      color:#374151; font-size:0.98rem; margin:0 0 8px;
    }

    .drawer-label{
      font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
      color:#2b8cbe; margin:34px 0 6px;
    }
    .drawer-subhead{
      font-family:'Fraunces', serif;
      color:#08589e; font-size:1.15rem; font-weight:600; margin:0 0 12px;
    }
    .about-drawer p{ color:#374151; font-size:0.94rem; margin:0 0 12px; }

    .drawer-quote{
      background:#ccebc5; border-left:4px solid #08589e; border-radius:8px;
      padding:16px 20px; font-style:italic; color:#1f2937; margin:10px 0 16px; font-size:1rem;
    }

    .advantage-list{ display:flex; flex-direction:column; gap:12px; margin:10px 0 24px; }
    .advantage-item{
      background:#f7fbf5; border:1px solid #a8ddb5; border-radius:8px; padding:14px 16px;
    }
    .advantage-item h4{ margin:0 0 4px; color:#08589e; font-size:0.98rem; }
    .advantage-item p{ margin:0; color:#6b7280; font-size:0.88rem; }

    .drawer-cta{
      margin-top:36px; padding-top:24px; border-top:1px solid #a8ddb5;
    }
    .drawer-cta p.prompt{ font-weight:700; color:#08589e; margin:0 0 6px; font-size:1.05rem; }
    .drawer-cta p.sub{ color:#374151; margin:0 0 18px; font-size:0.93rem; }
    .drawer-cta a.button{ border-radius:999px; }

    @media (max-width: 640px){
      .about-drawer{
        top:auto; bottom:0; left:0; right:0;
        width:100%; height:88vh;
        border-radius:20px 20px 0 0;
        transform:translateY(100%);
      }
      .about-drawer.open{ transform:translateY(0); }
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      body { padding: 0 20px 30px; }

      .layout {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .sidebar {
        position: static;
      }
    }
/* ============================================================
   LEARNING HUB REDESIGN — card icons/tags, tiered topic content,
   fact carousel, cross-cutting filters, panel-data node content
   ============================================================ */

.hub-icon{
  width:38px; height:38px; border-radius:8px; background:#e6f0ff;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}


.topic-lede{ font-size:1.05rem; color:#374151; margin:0 0 20px; }
.topic-lede strong{ color:#08589e; }

.connector-quote{
  font-style:italic; border-left:3px solid #2b8cbe; background:#f7fbf5;
  padding:16px 20px; margin:24px 0; border-radius:0 8px 8px 0; color:#4b5563;
}
.connector-quote .kicker{
  display:block; font-family:'IBM Plex Mono', monospace; font-style:normal; font-weight:600;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#2b8cbe; margin-bottom:8px;
}

/* Extra breathing room specifically where a Read more/Read less toggle
   sits directly above a fact carousel (the three Overview sections) or the
   "Broader Perspectives" label (every Key Topic's Why-it-matters text) —
   the button's own small margin-top wasn't enough separation from either
   of those. Scoped to these two adjacencies so it doesn't change spacing
   anywhere else .insight-read-more-btn is used (homepage/archive Insight
   cards). */
.read-more-toggle-btn + .fact-carousel,
.read-more-toggle-btn + .ed-readings-label{
  margin-top: 22px;
}

.fact-carousel{ background:#ccebc5; border:1px solid #7bccc4; border-radius:8px; padding:14px 18px; margin:0 0 28px; position:relative; }
.fact-slides{ display:grid; }
.fact-slide{
  grid-area: 1 / 1;
  display:flex;
  align-items:flex-start;
  gap:12px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.25s ease;
  pointer-events:none;
}
.fact-slide.active{ opacity:1; visibility:visible; pointer-events:auto; }
.fact-slide p{ margin:0; font-size:0.9rem; color:#4b5563; }
.fact-slide p strong{ color:#1f2937; }
.fact-slide p .fact-emphasis{ font-style:italic; font-weight:600; color:#08589e; }
.fact-icon{ font-size:1.1rem; line-height:1.3; flex-shrink:0; }
.fact-nav{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.fact-arrow{ background:none; border:1px solid #a8ddb5; border-radius:50%; width:26px; height:26px; font-size:1rem; color:#6b7280; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fact-arrow:hover{ color:#08589e; border-color:#2b8cbe; }
.fact-counter{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:#6b7280; min-width:44px; text-align:center; }

.tier{ border:1px solid #a8ddb5; border-radius:10px; margin-bottom:18px; overflow:hidden; background:#ffffff; }
.tier-head{ display:flex; align-items:center; gap:14px; padding:16px 22px; color:#ffffff; flex-wrap:wrap; }
.tier1 .tier-head{ background:#7bccc4; }
.tier2 .tier-head{ background:#4eb3d3; }
.tier3 .tier-head{ background:#08589e; }
.tier1{ margin-left:0; margin-right:0; }
.tier2{ margin-left:0; margin-right:0; }
.tier3{ margin-left:0; margin-right:0; }
.tier-num{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; background:rgba(255,255,255,0.22); padding:4px 10px; border-radius:999px; }
.tier-title{ font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem; }

/* Close button for a tier that was revealed by clicking a concept-map node
   (Building Blocks / Applications / Foundations) — sits at the far right
   of the tier's own coloured header via margin-left:auto, so a reader can
   retract a section without needing to click a different map node first.
   Solid white pill with a label (not just a faint circular icon) so it
   reads clearly against any of the three tier-head colours and isn't
   missed the way a low-contrast transparent icon would be. */
.tier-close-btn{
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #08589e;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: background 0.18s ease, transform 0.15s ease;
}
.tier-close-btn:hover{
  background: #f0f9e8;
  transform: translateY(-1px);
}
.tier-body{ padding:20px 22px 22px; }

.concept-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; }
.concept{ background:#f7fbf5; border:1px solid #a8ddb5; border-radius:8px; padding:14px 16px; }
.concept h4{ margin:0 0 6px; font-family:'Fraunces', serif; font-weight:600; font-size:1.12rem; color:#08589e; }
.concept .concept-tagline{ font-family:'Fraunces', serif; font-style:italic; font-weight:600; font-size:0.92rem; color:#2b8cbe; margin:0 0 8px; line-height:1.4; }
.concept p{ margin:0; font-size:0.9rem; color:#4b5563; }
.concept ul{ margin:6px 0 0; padding-left:18px; font-size:0.88rem; color:#4b5563; }
.concept li{ margin-bottom:4px; }
.concept details{ margin-top:10px; border-top:1px solid #a8ddb5; padding-top:8px; }
.concept summary{ list-style:none; cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:#2b8cbe; display:flex; align-items:center; gap:6px; }
.concept summary::-webkit-details-marker{ display:none; }
.concept summary::before{ content:"+"; font-family:'Fraunces', serif; font-size:13px; color:#2b8cbe; }
.concept details[open] summary::before{ content:"–"; }
.resource-list{ list-style:none; margin:8px 0 0; padding:0; }
.resource-list li{ margin-bottom:8px; font-size:0.85rem; }
.resource-list a{ color:#2b8cbe; font-weight:600; text-decoration:none; }
.resource-list a:hover{ text-decoration:underline; }
.res-tag{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.04em; text-transform:uppercase; color:#6b7280; background:#f0f9e8; border:1px solid #a8ddb5; padding:1px 6px; border-radius:999px; margin-left:6px; }
.res-tag.res-tag-own{ color:#ffffff; background:#08589e; border-color:#08589e; }
.res-note{ margin:4px 0 0; font-size:0.83rem; color:#6b7280; line-height:1.5; }
.concept.pointer-card{ border-style:dashed; border-color:#4eb3d3; background:#e8f8db; }
.concept.pointer-card a{ color:#2b8cbe; text-decoration:none; font-weight:600; font-size:0.88rem; display:inline-block; margin-top:4px; }
.concept.pointer-card a:hover{ text-decoration:underline; }


.xfilters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.xpill{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:500; padding:7px 14px; border-radius:999px; border:1px solid #a8ddb5; background:#ffffff; color:#6b7280; cursor:pointer; transition:all .18s ease; }
.xpill:hover{ border-color:#4eb3d3; color:#08589e; }
.xpill.active{ background:#4eb3d3; border-color:#4eb3d3; color:#ffffff; font-weight:600; }


.xempty-note{ font-size:0.9rem; color:#6b7280; font-style:italic; padding:18px 22px; }

.topic-footer{ margin-top:32px; padding-top:18px; border-top:1px solid #a8ddb5; font-family:'IBM Plex Mono', monospace; font-size:11px; color:#6b7280; }

/* Emerging Developments — cluster grouping + empty-state, layered onto the
   existing .emerging-developments / .ed-subtopic system already in this file */


.ed-insight-empty{
  font-size:0.88rem; font-style:italic; color:#a8ddb5; margin:0;
}

.concept p.concept-examples-label{ margin:10px 0 8px; font-size:0.7rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#2b8cbe; }

/* WHY PANEL DATA MATTERS */
.reason-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; margin:20px 0 28px; }
.reason-card{ background:#f7fbf5; border:1px solid #a8ddb5; border-radius:10px; padding:20px; }
.reason-num{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; color:#4eb3d3; text-transform:uppercase; margin-bottom:6px; }
.reason-card h5{ font-family:'Fraunces', serif; font-weight:600; font-size:1.08rem; margin:0 0 10px; color:#08589e; }
.reason-card p{ color:#4b5563; font-size:0.92rem; margin:0 0 10px; }
.reason-card ul{ margin:0; padding-left:18px; color:#4b5563; font-size:0.9rem; }
.reason-card li{ margin-bottom:6px; }

/* TYPES OF PANEL DATA STRUCTURES */
.ixt-caption{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#6b7280; letter-spacing:0.04em; display:block; margin-bottom:8px; }
.ixt-table{ border-collapse:collapse; font-family:'IBM Plex Mono', monospace; margin-bottom:24px; }
.ixt-table th, .ixt-table td{ padding:8px 14px; text-align:center; }
.ixt-table thead th{ font-size:12px; font-weight:600; color:#6b7280; }
.ixt-table tbody th{ font-size:12px; font-weight:600; color:#6b7280; text-align:left; padding-right:18px; }
.ixt-cell{ display:inline-block; width:20px; height:20px; border-radius:4px; }
.ixt-cell.filled{ background:#2b8cbe; }
.ixt-cell.empty{ background:transparent; border:2px solid #a8ddb5; }

.icon-legend{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; background:#f7fbf5; border:1px solid #a8ddb5; border-radius:10px; padding:14px 18px; margin:0 0 24px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#4b5563; }
.icon-legend .lg-item{ display:flex; align-items:center; gap:8px; }
.lg-swatch{ width:13px; height:13px; border-radius:2px; flex-shrink:0; }
.lg-swatch.lg-filled{ background:#2b8cbe; }
.lg-swatch.lg-empty{ background:#a8ddb5; }
.lg-swatch.lg-alt{ background:#4eb3d3; }

.pd-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.pd-card{ background:#ffffff; border:1px solid #a8ddb5; border-radius:10px; padding:20px 20px 6px; }
.pd-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; }
.pd-card h5{ font-family:'Fraunces', serif; font-weight:600; font-size:1.1rem; margin:0 0 6px; color:#08589e; }
.pd-cat-tag{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:#4eb3d3; }
.pd-oneline{ color:#4b5563; font-size:0.9rem; margin:0 0 12px; }
.pd-card details{ border-top:1px solid #a8ddb5; margin-top:2px; }
.pd-card summary{ list-style:none; cursor:pointer; padding:10px 0; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#6b7280; display:flex; align-items:center; gap:6px; }
.pd-card summary::-webkit-details-marker{ display:none; }
.pd-card summary::before{ content:"+"; color:#2b8cbe; font-family:'Fraunces', serif; font-size:14px; width:12px; }
.pd-card details[open] summary::before{ content:"–"; }
.pd-details-body{ padding:0 0 16px; color:#4b5563; font-size:0.88rem; line-height:1.6; }

.pd-icon-col{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.pd-mg-caption{ font-family:'IBM Plex Mono', monospace; font-size:10px; color:#6b7280; text-align:center; width:56px; margin-top:6px; line-height:1.3; }

.micro-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:3px; width:52px; height:52px; flex-shrink:0; }
.micro-grid span{ border-radius:2px; background:#2b8cbe; }
.micro-grid.mg-unbalanced span:nth-child(3), .micro-grid.mg-unbalanced span:nth-child(6), .micro-grid.mg-unbalanced span:nth-child(9), .micro-grid.mg-unbalanced span:nth-child(14){ background:#a8ddb5; }
.micro-grid.mg-short{ grid-template-rows:repeat(2,1fr); }
.micro-grid.mg-short span:nth-child(n+9){ display:none; }
.micro-grid.mg-long{ grid-template-columns:repeat(8,1fr); }
.micro-grid.mg-long span{ width:auto; }
.micro-grid.mg-micro span{ background:#4eb3d3; }
.micro-grid.mg-micro span:nth-child(odd){ opacity:0.55; }
.micro-grid.mg-macro span:nth-child(-n+16){ background:#a8ddb5; }
.micro-grid.mg-macro span:nth-child(1), .micro-grid.mg-macro span:nth-child(2), .micro-grid.mg-macro span:nth-child(5), .micro-grid.mg-macro span:nth-child(6){ background:#4eb3d3; }
.micro-grid.mg-true span:nth-child(4n+1){ background:#2b8cbe; }
.micro-grid.mg-true span:nth-child(4n+2){ background:#4eb3d3; }
.micro-grid.mg-true span:nth-child(4n+3){ background:#2b8cbe88; }
.micro-grid.mg-true span:nth-child(4n+4){ background:#a8ddb5; }
.micro-grid.mg-pseudo span:nth-child(4n+1){ background:#2b8cbe; }
.micro-grid.mg-pseudo span:nth-child(4n+2){ background:#4eb3d3; }
.micro-grid.mg-pseudo span:nth-child(4n+3){ background:#4b5563; }
.micro-grid.mg-pseudo span:nth-child(4n){ background:#a8ddb5; }
.micro-grid.mg-rotating span{ background:#a8ddb5; }
.micro-grid.mg-rotating span:nth-child(1), .micro-grid.mg-rotating span:nth-child(2), .micro-grid.mg-rotating span:nth-child(6), .micro-grid.mg-rotating span:nth-child(7), .micro-grid.mg-rotating span:nth-child(11), .micro-grid.mg-rotating span:nth-child(12), .micro-grid.mg-rotating span:nth-child(16){ background:#2b8cbe; }
.micro-grid.mg-2d span:nth-child(-n+4){ background:#4eb3d3; }
.micro-grid.mg-2d span:nth-child(4n+1){ background:#2b8cbe; }
.micro-grid.mg-3d span{ background:#a8ddb5; }
.micro-grid.mg-3d span:nth-child(-n+8){ background:#2b8cbe; opacity:0.9; }
.micro-grid.mg-3d span:nth-child(n+9){ background:#4eb3d3; opacity:0.6; }

/* PANEL DATA — inline node content (replaces the old node-modal for panel/what/why/type) */
.node-inline{ margin-top: 24px; }
.node-inline.is-loading{ min-height: 160px; position: relative; }
.node-inline.is-loading::after{
  content: "Loading…"; position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  font-family:'Inter',sans-serif; font-size:0.95rem; color:#6b7280;
}
.node-inline.is-loading iframe{ visibility: hidden; }
.node-inline-title{
  font-family:'Fraunces', serif; color:#08589e; font-size:1.3rem; font-weight:600; margin:0 0 16px;
}

/* Header row wrapping the node title + its Close button, used only for
   node content injected by openNodeContent() (Panel Data Methods map).
   The plain .node-inline-title rule above still applies elsewhere (e.g.
   the "Overview" headings), where margin:0 0 16px is exactly what's
   wanted — here the row itself carries that spacing instead, so the
   title's own margin is zeroed out. */
.node-inline-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}
.node-inline-header .node-inline-title{
  margin: 0;
}
.node-inline-close{
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #08589e;
  background: #e8f8db;
  border: 1px solid #a8ddb5;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.node-inline-close:hover{
  background: #ccebc5;
  border-color: #7bccc4;
}

@media (max-width:640px){
  .tier-head{ flex-wrap:wrap; }
}

/* EMERGING DEVELOPMENTS — section headline (left accent, true heading — not
   a boxed callout) + smaller instruction line beneath it. Sized generously
   so the whole eyebrow → headline → hint → Theme block reads as one unit. */
.ed-intro-lead{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.55rem;
  color: #08589e;
  border-left: 3px solid #2b8cbe;
  padding-left: 18px;
  margin: 6px 0 8px;
  line-height: 1.3;
}
.ed-intro-hint{
  font-size: 0.98rem;
  font-style: italic;
  color: #6b7280;
  padding-left: 21px;
  margin: 0 0 30px;
}

/* Theme heading — a mono "Theme:" kicker inline with a serif title, sized
   deliberately BELOW .ed-intro-lead (1.55rem) so the section headline stays
   the visual anchor and the Theme reads as one level down, not competing
   with it. Set off with an underline accent rather than a filled banner or
   a small pill (both tried and rejected as too heavy / too light). Headline
   font-size set higher than the kicker's own 1.28rem because IBM Plex Mono
   reads visually larger than Fraunces at the same rem value — this brings
   the two into visual (not just numeric) parity. Only the plain text node
   picks this up; the kicker keeps its own explicit font-size below. */
.ed-theme-heading{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.48rem;
  color: #08589e;
  line-height: 1.35;
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 2px solid #a8ddb5;
}
.ed-theme-kicker{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2b8cbe;
  margin-right: 12px;
}

/* Theme framing — now lives inside .ed-focus-body, shown above the Key
   Topics once a Focus Area is expanded. Bottom margin on the wrapper (not
   just its last paragraph) gives clear breathing room before the divider
   that the following .ed-topic's own border-top provides — no separate
   divider element needed since it's no longer :first-child here. */
.ed-theme-intro{
  margin: 0 0 18px;
}
.ed-theme-intro p{
  color: #374151;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 14px;
}
.ed-theme-intro p:last-child{ margin-bottom: 0; }

/* Focus Area grouping — sits between a Theme and its Key Topics */

/* KEY TOPICS — divider + label marking where a Focus Area's framing text
   ends and its list of Key Topics begins. Mono/uppercase like the other
   small structural labels on this page (.ed-why-matters, .ed-readings-label),
   but sized a step up (0.8rem vs 0.7rem) since it sits one level higher in
   the hierarchy — labelling a whole group of topics, not a single field
   within one. The divider bar above it is the same teal previously used as
   a border-top hack on the first .ed-topic; pulling it into this label
   keeps the "framing text has ended" cue explicit rather than implied. */
.ed-key-topics-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #08589e;
  margin: 0 0 16px;
  padding-top: 18px;
  border-top: 3px solid #7bccc4;
}

/* "Why it matters" label above each Key Topic's explanatory paragraph */
.ed-why-matters{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #08589e;
  margin: 0 0 6px;
}

/* Bracketed placeholder copy — same convention as [Add resource title/link] */


/* Focus Area — clickable card, expands to reveal its Key Topics */
.ed-focusblock{
  margin-top: 28px;
  border: 1px solid #a8ddb5;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}
.ed-focus-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #ffffff;
  border: none;
  border-left: 4px solid #2b8cbe;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s ease, border-left-color 0.15s ease;
}
.ed-focus-toggle:hover{ background: #f7fbf5; }
.ed-focus-toggle[aria-expanded="true"]{
  background: #f7fbf5;
  border-left-color: #08589e;
  border-bottom: 1px solid #e5e7eb;
}
.ed-focus-title{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #08589e;
}
.ed-focus-arrow{
  font-size: 1.15rem;
  font-weight: 700;
  color: #08589e;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.ed-focus-toggle[aria-expanded="true"] .ed-focus-arrow{ transform: rotate(90deg); }
.ed-focus-body{
  padding: 18px 20px 4px;
}

/* Key Topic — nested clickable card inside a Focus Area, expands to reveal
   its "Why it matters" text and any related Insight.
   Styled as a distinct tinted, bordered block (not a plain text row divided
   by hairlines) specifically so that when a reader has one topic expanded
   and scrolls down through its body copy, the next topic's header reads
   immediately as a new section, not a continuation of the paragraph above
   it. The left accent bar darkens and the fill tints in on the open topic,
   driven by the "ed-topic-open" class (see script.js) rather than :has(),
   for broader browser support. */
.ed-topic{
  background: #f7fbf5;
  border: 1px solid #a8ddb5;
  border-left: 4px solid #7bccc4;
  border-radius: 0 8px 8px 0;
  margin-bottom: 12px;
  transition: border-left-color 0.15s ease, background 0.15s ease;
}
.ed-topic:last-child{ margin-bottom: 0; }
.ed-topic.ed-topic-open{
  border-left-color: #08589e;
  background: #eef6e7;
}
.ed-topic-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: opacity 0.15s ease;
}
.ed-topic-toggle:hover{ opacity: 0.78; }
/* Sized and weighted a clear step up from the body copy inside it (0.92rem
   Inter) and from .ed-why-matters (0.7rem mono) so it can't be mistaken for
   either while scrolling — this is the header a reader should recognise at
   a glance as "a new topic starts here." */
.ed-topic-title{
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.16rem;
  color: #08589e;
}
.ed-topic-arrow{
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: #2b8cbe;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.ed-topic-arrow::before{ content: "+"; }
.ed-topic-toggle[aria-expanded="true"] .ed-topic-arrow::before{ content: "–"; }
.ed-topic-body{
  padding: 0 18px 20px 22px;
}
.ed-topic-body p{
  font-size: 0.92rem;
  line-height: 1.65;
}

/* Small alignment patch: learning.html uses .emerging-dev (not .emerging-developments)
   and .ed-insight-stack wrapping plain h5/p inside .ed-subtopic — adding the rules
   those actual class names need, alongside (not replacing) the earlier additions. */
.emerging-dev{
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #a8ddb5;
}


.ed-insight-stack{
  display: block;
  border: 1px solid #a8ddb5;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

/* EMERGING DEVELOPMENTS — click-to-expand cluster accordion */
.ed-cluster-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:#f7fbf5; border:1px solid #a8ddb5; border-radius:8px;
  padding:14px 18px; cursor:pointer; text-align:left; font-family:inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ed-cluster-toggle:hover{ background:#ccebc5; border-color:#7bccc4; }
.ed-cluster-toggle .ed-cluster-title{
  font-family:'Fraunces', serif; font-size:1.05rem; font-weight:600; color:#08589e; margin:0;
}

.ed-cluster-toggle[aria-expanded="true"] .ed-cluster-arrow{ transform: rotate(90deg); }


/* Insights data-render additions — the box for a subtopic's related Insight
   is now an expandable <details> element: collapsed shows just date + title,
   expanded reveals the deeper hubKeyMessage (falling back to summary) and a
   link to the full paper, if one was given. Plus category badges for
   insight-item cards on the homepage/archive. */
.ed-readings-label{
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #08589e;
  margin: 4px 0 10px;
}

/* Small directive line under an entry's Preview text, only shown when a
   Kit email gate actually follows it — tells the reader up front that the
   full piece requires entering an email, before they scroll down to the
   locked box itself. Bold + brand blue (rather than the original small
   muted italic) so it reads as a clear call-to-action, not a quiet aside
   easy to skim past. */
.ed-unlock-note{
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #08589e;
  font-style: italic;
}

.ed-insight-box{
  display: block;
  background: #ffffff;
  border-left: 3px solid #7bccc4;
  border-bottom: 2px solid #a8ddb5;
  padding: 14px 18px;
  margin-bottom: 0;
  transition: background 0.15s ease, border-left-color 0.15s ease;
}
.ed-insight-box:last-child{ border-bottom: none; }
.ed-insight-box:hover{ background: #f7fbf5; }
.ed-insight-box[open]{
  background: #f7fbf5;
  border-left-color: #08589e;
}

.ed-insight-box summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.ed-insight-box summary::-webkit-details-marker{ display: none; }
.ed-insight-box summary:hover{ opacity: 0.75; }
.ed-insight-box summary::after{
  content: "+ Show more";
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2b8cbe;
  flex-shrink: 0;
}
.ed-insight-box[open] summary::after{ content: "– Show less"; }

.ed-insight-title{
  font-size:0.94rem;
  font-weight:700;
  color:#08589e;
}

.ed-insight-expanded{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #a8ddb5;
}

.ed-insight-summary{
  display:block;
  font-size:0.86rem;
  color:#374151;
  line-height:1.6;
  margin: 0 0 10px;
}

/* Same reasoning as .insight-summary above — support hubPreview text that
   contains its own <p> tags for multiple paragraphs. */
.ed-insight-summary p{
  margin: 0 0 10px;
}
.ed-insight-summary p:last-child{
  margin-bottom: 0;
}

.ed-insight-key-label{
  color: #08589e;
  font-weight: 700;
}

/* EMAIL-GATED DELIVERY — sits below the free Preview text inside a Learning
   Hub box. .ed-gate-locked is our own framing (icon + prompt copy);
   .ed-gate-kit-embed is an empty container that Kit's own script (loaded
   per-entry from insights-render.js) fills with its real inline form. Kit
   owns the form, submission, and confirmation from there — none of that is
   built or styled by us. */
.ed-gate{
  margin-top: 14px;
}

.ed-gate-locked{
  background: #f7fbf5;
  border: 1px dashed #a8ddb5;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  max-width: 260px;
  margin: 0 auto;
}

.ed-gate-icon{
  display: block;
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.ed-gate-copy{
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: #4b5563;
}

.ed-gate-locked.ed-gate-kit-active .ed-gate-icon,
.ed-gate-locked.ed-gate-kit-active .ed-gate-copy{
  display: none;
}

.ed-gate-kit-embed{
  max-width: 240px;
  margin: 0 auto;
}

/* GATED EXCERPT TEASER — a sentence or two of the actual gated piece,
   sitting directly beneath the email signup box but blurred into an
   unreadable texture. Purely a "there's real content back here" visual
   cue: heavily blurred, faded, and fading out toward the bottom edge so
   it reads as trailing off rather than being abruptly cut. Deliberately
   NOT selectable/copyable, and hidden from screen readers (aria-hidden on
   the wrapper) since it isn't meant to convey anything — the Preview text
   above the gate is the only text in this box that's actually meant to be
   read.
   Built as two layers rather than one element with both "filter" and
   "mask-image" set — some Safari versions silently drop the filter
   entirely when both are present on the same element. The wrapper clips
   height and holds a plain background-colour gradient (matching
   .ed-gate-locked's own #f7fbf5 fill) for the fade-out; the blur lives
   only on the text itself. */
.ed-gate-teaser-wrap{
  position: relative;
  margin: 14px 0 0;
  max-height: 64px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.ed-gate-teaser-excerpt{
  margin: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #374151;
  text-align: left;
  opacity: 0.55;
  filter: blur(3px);
  -webkit-filter: blur(3px);
}
.ed-gate-teaser-wrap::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(247,251,245,0), #f7fbf5 85%);
}

/* UNGATED FULL ARTICLE — replaces the email gate on a per-entry basis
   (see fullArticle in insights-data.js). Same "expand for more" shape as
   the read-more toggles used elsewhere on this page, just applied to a
   full piece rather than a paragraph. */
.ed-full-article{
  margin-top: 14px;
}
.ed-full-article-pdf-link{
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2b8cbe;
  text-decoration: none;
}
.ed-full-article-pdf-link:hover{
  color: #08589e;
  text-decoration: underline;
}

.ed-full-article-toggle{
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2b8cbe;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ed-full-article-toggle:hover{
  color: #08589e;
  text-decoration: underline;
}
.ed-full-article-body{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #a8ddb5;
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.75;
}
.ed-full-article-body p{
  margin: 0 0 16px;
}
.ed-full-article-body p:last-child{
  margin-bottom: 0;
}

.ed-insight-more{
  margin:10px 0 0;
  text-align:right;
}
.ed-insight-more a{
  font-size:0.8rem;
  font-weight:700;
  color:#2b8cbe;
  text-decoration:none;
}
.ed-insight-more a:hover{ text-decoration:underline; }

.insight-category-badge{
  display:inline-block;
  align-self:flex-start;
  font-family:'IBM Plex Mono', monospace;
  font-size:9.5px;
  line-height:1.4;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:#2b8cbe;
  border:1px solid #2b8cbe;
  padding:2px 6px;
  border-radius:999px;
  margin-left:8px;
  margin-bottom:10px;
}
.insight-source{
  display:inline-block;
  font-size:0.85rem;
  font-weight:700;
  color:#4eb3d3;
  text-decoration:none;
}
.insight-source:hover{ color:#08589e; text-decoration:underline; }