/* =========================================================================
   Norwest Blog  -  Modernized Single-Blog Template
   Design-exact replication of "Norwest Blog.dc.html", scoped to .nw-blog-modern
   so the real site header/footer are never touched.
   Palette: bg #E6E6DB (ecru, matches the /resources hub + type pages) · teal #07485B · deepteal #055C5F · coral #FE4F44
            green #009579 · dark #0D1214 · muted #5C6B66 · body #24333A
            card #F5F5EE · quote #E7E7D9/#CFCFBE · hairline #C9C9BB · cream #E6E6DB
   ========================================================================= */

.nw-blog-modern {
  --nw-bg:#E6E6DB; --nw-teal:#07485B; --nw-deepteal:#055C5F; --nw-coral:#FE4F44;
  --nw-green:#009579; --nw-dark:#0D1214; --nw-muted:#5C6B66; --nw-body:#24333A;
  --nw-card:#F5F5EE; --nw-quote:#E7E7D9; --nw-quoteb:#CFCFBE; --nw-hair:#C9C9BB;
  --nw-cream:#E6E6DB; --nw-blue:#2E87DE; --nw-slate:#313E5C; --nw-maroon:#622828;
  --nw-serif:'DM Serif Display',Georgia,serif;
  --nw-sans:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--nw-bg);
  font-family:var(--nw-sans);
  color:#1C2B33;
  -webkit-font-smoothing:antialiased;
}
.nw-blog-modern *,
.nw-blog-modern *::before,
.nw-blog-modern *::after { box-sizing:border-box; }

.nw-blog-modern a { color:var(--nw-deepteal); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.nw-blog-modern a:hover { color:var(--nw-coral); }
.nw-blog-modern ::selection { background:#07485B; color:var(--nw-cream); }

@keyframes nwbmRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes nwbmFadeIn { from { opacity:0; } to { opacity:1; } }

.nwbm-main { padding-bottom:120px; }

/* ---------------- HERO ---------------- */
.nwbm-hero { max-width:1200px; margin:0 auto; padding:72px 32px 0; }
.nwbm-eyebrow { display:flex; align-items:center; gap:12px; color:var(--nw-muted); font-size:11px; font-weight:600; letter-spacing:.18em; flex-wrap:wrap; }
.nwbm-eyebrow__date { font-weight:500; }
.nwbm-dot { width:3px; height:3px; border-radius:50%; background:#9AA39B; flex:none; }
.nwbm-title { font-family:var(--nw-serif); font-weight:400; font-size:clamp(40px,5.6vw,78px); line-height:1.04; color:var(--nw-teal); margin:28px 0 0; max-width:1050px; text-wrap:balance; }
.nwbm-dek { font-size:19px; line-height:1.6; color:#3C4B49; max-width:720px; margin:26px 0 0; }
.nwbm-byline { display:flex; align-items:center; gap:20px; margin:36px 0 0; flex-wrap:wrap; }
.nwbm-avatars { display:flex; }
/* Multi-author byline: each author is a self-contained avatar+name+role unit so a
   role label always sits beneath the name it belongs to (v14). */
.nwbm-byline__people { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.nwbm-byline__person { display:flex; align-items:center; gap:12px; }
.nwbm-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; border:3px solid var(--nw-bg); }
.nwbm-byline__names { font-size:14px; font-weight:600; color:var(--nw-teal); }
.nwbm-byline__names a { color:var(--nw-teal); text-decoration:none; }
.nwbm-byline__names a:hover { color:var(--nw-coral); }
.nwbm-byline__roles { font-size:12px; color:var(--nw-muted); letter-spacing:.04em; }
.nwbm-readtime { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--nw-muted); font-size:11px; font-weight:600; letter-spacing:.16em; }
.nwbm-readtime__sq { width:8px; height:8px; background:var(--nw-coral); display:inline-block; }
/* Hero: 100% width, AUTO height. A fixed height + object-fit:cover cropped
   every hero whose aspect differed from the box (measured: 237px of source
   hidden on a 3:2 image at 1440px, 119px on a 16:9; only 2 of 354 heroes
   escaped uncropped). Auto height always shows the whole image. The
   width/height attributes emitted by the template give the browser the
   aspect ratio up front, so removing the fixed height costs no layout
   shift. No max-height: a cap would re-introduce the cropping this fixes.
   Consequence to know about: the 23 portrait heroes now render tall
   (up to ~1815px at 1440px wide). (v16) */
.nwbm-hero__img { width:100%; height:auto; margin-top:44px; display:block; }

/* ---------------- ARTICLE ---------------- */
/* Breakout layout: the article column is wide enough to give the visual/data
   blocks (stat bands, cards, quotes, figures, CTAs) real room, while the
   RUNNING PROSE is capped to a comfortable ~700px reading measure and centred
   on the same axis. Everything shares one centre line, so the wider blocks read
   as a deliberate breakout  -  not misalignment. --nw-measure = prose width. */
.nwbm-article { --nw-measure:700px; max-width:900px; margin:0 auto; padding:64px 32px 0; }
.nwbm-article > p { font-size:17px; line-height:1.8; color:var(--nw-body); margin:0 0 24px; }
.nwbm-article > p:last-child { margin-bottom:0; }
.nwbm-article a { color:var(--nw-deepteal); }
.nwbm-article strong { color:var(--nw-teal); }
.nwbm-article h2 { font-family:var(--nw-serif); font-weight:400; font-size:34px; line-height:1.15; color:var(--nw-teal); margin:64px 0 0; }
.nwbm-article h3 { font-family:var(--nw-serif); font-weight:400; font-size:24px; line-height:1.2; color:var(--nw-teal); margin:40px 0 0; }
.nwbm-article ul, .nwbm-article ol { font-size:17px; line-height:1.8; color:var(--nw-body); margin:0 0 24px; padding-left:22px; }
.nwbm-article img { max-width:100%; height:auto; }
.nwbm-article figure { margin:36px 0; }
/* Video/oEmbed sizing (v14). Embedded players (YouTube, Vimeo, wp-block-embed)
   ship hardcoded width/height attributes, so without this they overflow the
   prose column or render at a fixed odd size. Constrain to the container and
   hold a 16:9 box. */
.nwbm-article iframe,
.nwbm-article .wp-block-embed iframe,
.nwbm-article .wp-block-embed__wrapper iframe { max-width:100%; width:100%; border:0; display:block; }
.nwbm-article iframe[src*="youtube"],
.nwbm-article iframe[src*="youtu.be"],
.nwbm-article iframe[src*="vimeo"],
.nwbm-article iframe[src*="wistia"] { aspect-ratio:16/9; height:auto; }
.nwbm-article .wp-block-embed { margin:36px auto; max-width:var(--nw-measure); }
.nwbm-article .wp-block-embed figcaption { font-size:13px; color:var(--nw-muted); margin-top:10px; }
.nwbm-article video { max-width:100%; height:auto; display:block; }

/* --- Prose measure: cap running text to --nw-measure, centred. Only left/right
   margins are set to auto so the vertical rhythm above (set as `margin:X 0 Y`)
   is preserved  -  these rules follow the base rules so L/R wins the cascade. --- */
.nwbm-article > p,
.nwbm-article > h2,
.nwbm-article > h3,
.nwbm-article > ul,
.nwbm-article > ol,
.nwbm-article > .nw-b-dropcap,
.nwbm-article > .nw-b-section,
.nwbm-article > .nw-b-checklist,
.nwbm-article > .nw-b-steps,
.nwbm-article > figure:not(.nw-b-figure) {
  /* min(measure, 100%) not a bare 700px: on a 390px phone a fixed 700px cap
     is 310px WIDER than the container, which is what pushed captioned
     images off-screen. (v16) */
  max-width:min(var(--nw-measure), 100%); margin-left:auto; margin-right:auto;
}

/* ---- Dropcap paragraph ---- */
.nw-b-dropcap { font-size:17px; line-height:1.8; color:var(--nw-body); margin:0 0 24px; }
.nw-b-dropcap::first-letter,
.nw-b-dropcap .nw-b-dropcap__l { }
.nw-b-dropcap { --nw-dc:#FE4F44; }
.nw-b-dropcap::first-letter {
  font-family:var(--nw-serif); font-size:77px; line-height:.8; float:left;
  color:var(--nw-dc); padding:8px 12px 0 0; margin-top:-7px;
}

/* ---- Section heading (coral rule + serif H2) ---- */
.nw-b-section { margin:64px 0 0; scroll-margin-top:90px; }
.nw-b-section__rule { display:block; width:56px; height:4px; background:var(--nw-coral); margin-bottom:22px; }
.nw-b-section__h { font-family:var(--nw-serif); font-weight:400; font-size:34px; line-height:1.15; color:var(--nw-teal); margin:0; }
.nw-b-section + p { margin-top:28px; }

/* ---- FAQ block (accordion + FAQPage schema) ---- */
.nw-b-faq { margin:64px 0 0; }
.nw-b-faq__rule { display:block; width:56px; height:4px; background:var(--nw-coral); margin-bottom:22px; }
.nw-b-faq__h { font-family:var(--nw-serif); font-weight:400; font-size:34px; line-height:1.15; color:var(--nw-teal); margin:0 0 24px; }
.nw-blog-modern .nw-b-faq .nw-b-faq__h { margin-bottom:40px; }
.nw-b-faq__list { display:grid; gap:1px; background:var(--nw-hair); border:1px solid var(--nw-hair); }
.nw-b-faq__item { background:var(--nw-card, #F5F5EE); }
.nw-b-faq__q { list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 24px; font-family:var(--nw-sans); font-size:18px; line-height:1.45; font-weight:600; color:var(--nw-teal); }
.nw-b-faq__q::-webkit-details-marker { display:none; }
.nw-b-faq__qtext { flex:1 1 auto; min-width:0; }
.nw-b-faq__icon { flex:none; position:relative; width:16px; height:16px; margin-top:4px; }
.nw-b-faq__icon::before, .nw-b-faq__icon::after { content:""; position:absolute; background:var(--nw-coral); transition:transform .25s ease, opacity .25s ease; }
.nw-b-faq__icon::before { top:7px; left:0; width:16px; height:2px; }
.nw-b-faq__icon::after { left:7px; top:0; width:2px; height:16px; }
.nw-b-faq__item[open] .nw-b-faq__icon::after { transform:scaleY(0); opacity:0; }
.nw-b-faq__a { padding:0 24px 24px; font-size:17px; line-height:1.75; color:var(--nw-body); }
.nw-b-faq__a p { margin:0 0 14px; }
.nw-b-faq__a p:last-child { margin-bottom:0; }
.nw-b-faq__a a { color:var(--nw-coral); }

/* ---- Checklist ---- */
.nw-b-checklist { display:grid; gap:12px; margin:20px 0 28px; }
.nw-b-check { display:flex; gap:14px; align-items:baseline; }
.nw-b-check__dot { width:9px; height:9px; flex:none; transform:translateY(-1px); }
.nw-b-check__t { font-size:17px; line-height:1.7; color:var(--nw-body); }
.nw-b-check__t strong { color:var(--nw-teal); }

/* ---- Feature cards ---- */
.nw-b-cards { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--nw-hair); border:1px solid var(--nw-hair); margin:20px 0 28px; }
.nw-b-card { background:var(--nw-card); padding:22px; }
.nw-b-card__t { font-family:var(--nw-serif); font-size:19px; color:var(--nw-teal); }
.nw-b-card__d { font-size:13px; line-height:1.6; color:var(--nw-muted); margin-top:6px; }

/* ---- Lettered steps ---- */
.nw-b-steps { display:grid; gap:0; border-top:1px solid var(--nw-hair); margin:20px 0 28px; }
.nw-b-step { display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--nw-hair); }
.nw-b-step__l { font-family:var(--nw-serif); font-size:18px; color:var(--nw-coral); flex:none; }
.nw-b-step__b { font-size:16px; line-height:1.7; color:var(--nw-body); }
.nw-b-step__lead { color:var(--nw-teal); }

/* ---- Stat band ---- */
.nw-b-stats { display:grid; grid-template-columns:repeat(3,1fr); background:var(--nw-teal); margin:44px 0; }
/* Cells vertically centre their content so a 1-line value and a 2-line value
   (e.g. "Bottom-up") stay balanced within the band  -  no top-weighted gap, and
   no cross-column baseline break when one value wraps. */
.nw-b-stat { padding:32px 24px; display:flex; flex-direction:column; justify-content:center; }
.nw-b-stat + .nw-b-stat { border-left:1px solid rgba(230,230,219,.16); }
.nw-b-stat__v { font-family:var(--nw-serif); font-size:46px; color:var(--nw-cream); line-height:1.02; }
.nw-b-stat__l { font-size:12px; line-height:1.55; color:rgba(230,230,219,.7); margin-top:10px; }

/* ---- Pull quote ---- */
.nw-b-quote { margin:56px 0; padding:44px 44px 36px; background:var(--nw-quote); border:1px solid var(--nw-quoteb); position:relative; }
.nw-b-quote__mark { position:absolute; top:-26px; left:36px; font-family:var(--nw-serif); font-size:88px; line-height:1; }
.nw-b-quote__q { margin:0; padding:0; font-family:var(--nw-serif); font-size:26px; line-height:1.38; color:var(--nw-teal); }
.nw-b-quote__q a { color:var(--nw-teal); }
.nw-b-quote__c { margin-top:22px; padding-top:18px; border-top:1px solid var(--nw-quoteb); font-size:11px; font-weight:700; letter-spacing:.18em; color:var(--nw-muted); }

/* ---- Figure / table image ---- */
.nw-b-figure { margin:36px 0; }
.nw-b-figure img { width:100%; display:block; border:1px solid var(--nw-hair); }
.nw-b-figure__c { font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--nw-muted); margin-top:12px; }

/* ================= CTA BLOCKS ================= */
.nw-b-cta { display:flex; align-items:center; gap:32px; flex-wrap:wrap; margin:36px 0; }
.nw-b-cta__main { flex:1; min-width:260px; }
.nw-b-cta__eyebrow { font-size:10px; font-weight:700; letter-spacing:.22em; }
.nw-b-cta__title { font-family:var(--nw-serif); font-size:26px; line-height:1.22; margin-top:12px; }
.nw-b-cta__body { font-size:13px; line-height:1.6; margin-top:10px; }
.nw-b-cta__btn { display:inline-block; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.14em; padding:16px 28px; white-space:nowrap; background:var(--nw-coral); color:var(--nw-dark); }
.nw-b-cta__btn:hover { background:var(--nw-cream); color:var(--nw-dark); }
.nw-b-cta__btn--cream { background:var(--nw-cream); color:var(--nw-deepteal); }
.nw-b-cta__btn--cream:hover { background:var(--nw-coral); color:var(--nw-dark); }
.nw-b-cta__btn--ghostcream { background:none; border:2px solid var(--nw-cream); color:var(--nw-cream); padding:12px 22px; }
.nw-b-cta__btn--ghostcream:hover { background:var(--nw-cream); color:var(--nw-maroon); }
.nw-b-cta__textlink { align-self:flex-start; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.14em; border-bottom:2px solid currentColor; padding-bottom:4px; }
.nw-b-cta__textlink--plain { border-bottom:none; }
.nw-b-cta__row { display:flex; align-items:center; gap:14px; margin-top:auto; }
.nw-b-cta__meta { font-size:11px; font-weight:600; letter-spacing:.14em; }
.nw-b-cta__play { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; text-decoration:none; }
.nw-b-cta__sq { width:8px; height:8px; background:var(--nw-green); flex:none; }
.nw-b-cta__avs { display:flex; }
.nw-b-cta__av { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.nw-b-cta__date { flex:none; text-align:center; border:1px solid var(--nw-hair); background:var(--nw-bg); padding:12px 16px; }
.nw-b-cta__date-m { font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--nw-coral); }
.nw-b-cta__date-d { font-family:var(--nw-serif); font-size:34px; line-height:1; color:var(--nw-teal); }
.nw-b-cta__evbody { display:flex; flex-direction:column; gap:10px; }
.nw-b-cta__bigquote { flex:1; min-width:280px; font-family:var(--nw-serif); font-size:22px; line-height:1.35; color:var(--nw-cream); }
.nw-b-cta__shares { display:flex; gap:10px; }
.nw-b-cta__share { border:1px solid rgba(230,230,219,.4); color:var(--nw-cream); text-decoration:none; font-size:11px; font-weight:700; letter-spacing:.12em; padding:12px 20px; }
.nw-b-cta__share:hover { background:var(--nw-cream); color:var(--nw-teal); }

/* CTA variants: colors + layout */
.nw-b-cta--webinar { background:var(--nw-dark); padding:40px; }
.nw-b-cta--webinar .nw-b-cta__eyebrow { color:var(--nw-coral); }
.nw-b-cta--webinar .nw-b-cta__title { color:var(--nw-cream); font-size:28px; line-height:1.2; }
.nw-b-cta--webinar .nw-b-cta__body { color:rgba(230,230,219,.6); }

.nw-b-cta--framework { border:2px solid var(--nw-green); padding:36px 40px; background:var(--nw-card); }
.nw-b-cta--framework .nw-b-cta__eyebrow { color:var(--nw-green); }
.nw-b-cta--framework .nw-b-cta__title { color:var(--nw-teal); font-size:26px; line-height:1.25; }
.nw-b-cta--framework .nw-b-cta__btn { background:none; border:2px solid var(--nw-teal); color:var(--nw-teal); padding:14px 26px; }
.nw-b-cta--framework .nw-b-cta__btn:hover { background:var(--nw-teal); color:var(--nw-cream); }

.nw-b-cta--podcast { background:var(--nw-slate); padding:36px; flex-direction:column; align-items:stretch; gap:18px; }
.nw-b-cta--podcast .nw-b-cta__eyebrow { color:var(--nw-blue); }
.nw-b-cta--podcast .nw-b-cta__title { color:var(--nw-cream); font-size:24px; line-height:1.25; }
.nw-b-cta--podcast .nw-b-cta__play { background:var(--nw-cream); color:var(--nw-slate); }
.nw-b-cta--podcast .nw-b-cta__play:hover { background:var(--nw-blue); color:var(--nw-dark); }
.nw-b-cta--podcast .nw-b-cta__meta { color:rgba(230,230,219,.6); }

.nw-b-cta--casestudy { background:var(--nw-card); border:1px solid var(--nw-hair); padding:36px; flex-direction:column; align-items:stretch; gap:18px; }
.nw-b-cta--casestudy .nw-b-cta__eyebrow { color:#006E96; }
.nw-b-cta--casestudy .nw-b-cta__title { color:var(--nw-teal); font-size:24px; line-height:1.25; }
.nw-b-cta--casestudy .nw-b-cta__textlink { color:#006E96; }
.nw-b-cta--casestudy .nw-b-cta__textlink:hover { color:var(--nw-coral); }

.nw-b-cta--event { border:2px solid var(--nw-blue); background:var(--nw-card); padding:36px; gap:24px; align-items:flex-start; }
.nw-b-cta--event .nw-b-cta__eyebrow { color:var(--nw-blue); }
.nw-b-cta--event .nw-b-cta__title { color:var(--nw-teal); font-size:22px; line-height:1.25; }
.nw-b-cta--event .nw-b-cta__textlink { color:var(--nw-teal); }
.nw-b-cta--event .nw-b-cta__textlink:hover { color:var(--nw-blue); }

.nw-b-cta--team { background:var(--nw-deepteal); padding:36px; flex-direction:column; align-items:stretch; gap:18px; }
.nw-b-cta--team .nw-b-cta__title { color:var(--nw-cream); font-size:24px; line-height:1.25; }
.nw-b-cta--team .nw-b-cta__av { border:2px solid var(--nw-deepteal); }

.nw-b-cta--benchmark { background:var(--nw-maroon); padding:36px; flex-direction:column; align-items:stretch; gap:18px; }
.nw-b-cta--benchmark .nw-b-cta__eyebrow { color:var(--nw-coral); }
.nw-b-cta--benchmark .nw-b-cta__title { color:var(--nw-cream); font-size:24px; line-height:1.25; }

.nw-b-cta--series { background:var(--nw-card); border:1px solid var(--nw-hair); padding:36px; flex-direction:column; align-items:stretch; gap:14px; }
.nw-b-cta--series .nw-b-cta__eyebrow { color:var(--nw-muted); }
.nw-b-cta--series .nw-b-cta__title { color:var(--nw-teal); font-size:24px; line-height:1.25; }
.nw-b-cta--series .nw-b-cta__textlink--plain { color:var(--nw-teal); }
.nw-b-cta--series .nw-b-cta__textlink--plain:hover { color:var(--nw-green); }

.nw-b-cta--quoteshare { background:var(--nw-teal); padding:36px 40px; gap:28px; }
.nw-b-cta--pitch { background:var(--nw-dark); padding:64px 48px; flex-direction:column; text-align:center; }
.nw-b-cta--pitch .nw-b-cta__eyebrow { color:rgba(230,230,219,.5); letter-spacing:.28em; }
.nw-b-cta--pitch .nw-b-cta__title--big { color:var(--nw-cream); font-size:clamp(30px,3.6vw,46px); line-height:1.12; margin:18px auto 0; max-width:640px; }
.nw-b-cta--pitch .nw-b-cta__btn { margin-top:28px; letter-spacing:.16em; padding:18px 36px; }

/* ---------------- NEWSLETTER ---------------- */
.nwbm-newsletter { max-width:1200px; margin:88px auto 0; padding:0 32px; }
.nwbm-newsletter__inner { background:var(--nw-deepteal); padding:72px 64px; display:flex; align-items:center; gap:48px; flex-wrap:wrap; }
.nwbm-newsletter__copy { flex:1.4; min-width:300px; }
.nwbm-newsletter__eyebrow { font-size:10px; font-weight:700; letter-spacing:.24em; color:var(--nw-cream); opacity:.7; }
.nwbm-newsletter__h { font-family:var(--nw-serif); font-size:clamp(30px,3.4vw,44px); line-height:1.12; color:var(--nw-cream); margin-top:16px; text-wrap:balance; }
.nwbm-newsletter__form { flex:1; min-width:280px; display:flex; gap:0; }
.nwbm-newsletter__input { flex:1; min-width:0; border:none; outline:none; background:var(--nw-cream); color:var(--nw-teal); font-family:var(--nw-sans); font-size:14px; padding:18px 20px; }
.nwbm-newsletter__btn { border:none; cursor:pointer; background:var(--nw-coral); color:var(--nw-dark); font-family:var(--nw-sans); font-size:12px; font-weight:700; letter-spacing:.14em; padding:18px 26px; }
.nwbm-newsletter__btn:hover { background:var(--nw-dark); color:var(--nw-cream); }

/* ---------------- RELATED ---------------- */
.nwbm-related { max-width:1200px; margin:88px auto 0; padding:0 32px; }
.nwbm-related__head { display:flex; align-items:baseline; justify-content:space-between; border-bottom:2px solid var(--nw-dark); padding-bottom:16px; }
.nwbm-related__h { font-family:var(--nw-serif); font-weight:400; font-size:32px; color:var(--nw-teal); margin:0; }
.nwbm-related__all { font-size:11px; font-weight:700; letter-spacing:.16em; color:var(--nw-teal); text-decoration:none; }
.nwbm-related__all:hover { color:var(--nw-coral); }
/* Kill every underline in the Related Stories section — the base `.nw-blog-modern a`
   (spec 0,1,1) out-specifies the bare `.nwbm-related__all`/`.nwbm-rcard` no-underline
   rules (0,1,0), so scope it under the section wrapper to reach 0,2,1. */
.nw-blog-modern .nwbm-related a { text-decoration:none; }
.nwbm-related__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:32px; margin-top:36px; }
.nwbm-rcard { text-decoration:none; display:block; }
.nwbm-rcard__img { width:100%; height:200px; object-fit:cover; display:block; }
.nwbm-rcard__label { font-size:10px; font-weight:700; letter-spacing:.18em; color:var(--nw-green); margin-top:16px; }
.nwbm-rcard__title { font-family:var(--nw-serif); font-size:21px; line-height:1.28; color:var(--nw-teal); margin-top:8px; }
.nwbm-rcard:hover .nwbm-rcard__title { color:var(--nw-coral); }

/* ---------------- STICKY STORY NAV ---------------- */
.nwbm-sticky {
  position:fixed; z-index:80; left:24px; bottom:88px; width:296px; color:var(--nw-cream);
  /* bottom lifted 24->88 to clear the UserWay accessibility button (44px, anchored
     13px from the bottom-left corner) so the TOC's lower-left corner no longer overlaps it. */
  background:rgba(13,18,20,.78); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(230,230,219,.16); overflow:hidden; box-sizing:border-box;
  box-shadow:0 20px 50px rgba(13,18,20,.35), inset 0 1px 0 rgba(230,230,219,.08);
  transition:opacity .35s ease, transform .35s ease, height .3s cubic-bezier(.22,1,.36,1);
}
.nwbm-sticky[data-hidden="1"] { opacity:0; transform:translateY(16px); pointer-events:none; }
.nwbm-sticky__track { height:3px; background:rgba(230,230,219,.15); }
.nwbm-sticky__bar { height:3px; background:var(--nw-coral); width:0; transition:width .1s linear; }
.nwbm-sticky__open { animation:nwbmRise .32s cubic-bezier(.22,1,.36,1); }
.nwbm-sticky__top { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 6px; }
.nwbm-sticky__eyebrow { font-size:9px; font-weight:700; letter-spacing:.24em; color:rgba(230,230,219,.55); }
.nwbm-sticky__collapse { border:none; background:none; color:rgba(230,230,219,.55); cursor:pointer; font-size:14px; padding:2px 4px; line-height:1; }
.nwbm-sticky__collapse:hover { color:var(--nw-cream); }
.nwbm-sticky__list { display:grid; padding:4px 8px 10px; }
.nwbm-navitem { display:flex; align-items:baseline; gap:12px; text-align:left; border:none; background:none; cursor:pointer; padding:8px 10px; font-family:var(--nw-sans); width:100%; }
.nwbm-navitem:hover { background:rgba(230,230,219,.07); }
.nwbm-navitem__num { font-family:var(--nw-serif); font-size:13px; width:18px; flex:none; color:rgba(230,230,219,.45); }
.nwbm-navitem__label { font-size:12.5px; line-height:1.4; font-weight:400; color:rgba(230,230,219,.6); }
.nwbm-navitem[data-active="1"] .nwbm-navitem__num { color:var(--nw-coral); }
.nwbm-navitem[data-active="1"] .nwbm-navitem__label { color:var(--nw-cream); font-weight:600; }
.nwbm-sticky__foot { border-top:1px solid rgba(230,230,219,.14); padding:14px 18px; display:flex; align-items:center; gap:10px; }
.nwbm-sticky__av { width:26px; height:26px; border-radius:50%; object-fit:cover; border:2px solid var(--nw-dark); }
.nwbm-sticky__min { font-size:9px; font-weight:700; letter-spacing:.16em; color:rgba(230,230,219,.55); }
.nwbm-sticky__share { margin-left:auto; display:flex; gap:6px; }
.nwbm-sticky__btn { width:28px; height:28px; border:1px solid rgba(230,230,219,.25); background:none; color:var(--nw-cream); cursor:pointer; font-size:10px; font-weight:700; font-family:var(--nw-sans); }
.nwbm-sticky__btn:hover { background:var(--nw-cream); color:var(--nw-dark); }
.nwbm-sticky__btn[data-nwbm-saved="1"] { background:var(--nw-coral); color:var(--nw-dark); }
.nwbm-sticky__closed { display:flex; align-items:center; gap:12px; width:100%; border:none; background:none; color:var(--nw-cream); cursor:pointer; padding:14px 20px; font-family:var(--nw-sans); animation:nwbmFadeIn .28s ease; }
.nwbm-sticky__closed:hover { background:rgba(230,230,219,.07); }
.nwbm-sticky__closed-num { font-family:var(--nw-serif); font-size:15px; color:var(--nw-coral); flex:none; }
/* Collapsed label wraps onto multiple lines instead of clipping. In a flex row a
   text item keeps min-width:auto (its max-content size) and overflows the fixed-width
   box (which is overflow:hidden), so it was being cut off. flex:1 1 auto + min-width:0
   lets it shrink and wrap; the box grows taller and the height transition animates it. */
.nwbm-sticky__closed-label { font-size:11px; font-weight:600; letter-spacing:.1em; color:rgba(230,230,219,.8); flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:break-word; line-height:1.4; text-align:left; }
.nwbm-sticky__closed-caret { flex:none; font-size:12px; color:rgba(230,230,219,.55); }

/* ---------------- RESPONSIVE ---------------- */

/* Tablet & down: stack the 2/3-up grids, ease the newsletter gutters. */
@media (max-width:900px) {
  .nw-b-cards { grid-template-columns:1fr; }
  .nw-b-stats { grid-template-columns:1fr; }
  .nw-b-stat + .nw-b-stat { border-left:none; border-top:1px solid rgba(230,230,219,.16); }
  .nwbm-newsletter__inner { padding:44px 32px; gap:32px; }
  /* CTA blocks: let the button drop below the copy on narrower screens. */
  .nw-b-cta { gap:24px; }
  .nw-b-cta__btn,
  .nw-b-cta__textlink { white-space:normal; }
}

/* Phones / small tablets: single-column newsletter, stacked CTAs, comfy padding. */
@media (max-width:700px) {
  .nwbm-hero { padding:48px 20px 0; }
  .nwbm-article { padding:44px 20px 0; }
  /* Sit BESIDE the UserWay accessibility button on the same bottom baseline
     (bottom:16 ~ UserWay's 13px anchor). left:78 clears its ~57px button + gap so the
     pill starts to its right and is slightly narrower than full width. */
  .nwbm-sticky { left:78px; right:12px; bottom:16px; width:auto; }
  .nwbm-readtime { margin-left:0; }

  /* Newsletter: stack copy over a full-width, stacked form. */
  .nwbm-newsletter { padding:0 20px; }
  .nwbm-newsletter__inner { flex-direction:column; align-items:stretch; gap:24px; padding:40px 26px; }
  .nwbm-newsletter__copy { flex:none; min-width:0; }
  .nwbm-newsletter__form { flex:none; min-width:0; width:100%; flex-direction:column; gap:10px; }
  .nwbm-newsletter__input { width:100%; }
  .nwbm-newsletter__btn { width:100%; padding:16px 26px; }

  /* CTA blocks: stack content over the button; trim the heavy padding. */
  .nw-b-cta { flex-direction:column; align-items:stretch; padding:28px 22px; gap:18px; }
  .nw-b-cta--pitch { padding:44px 24px; }
  .nw-b-cta__main { min-width:0; }
  .nw-b-cta__btn,
  .nw-b-cta__btn--ghostcream { width:100%; text-align:center; }
  .nw-b-cta--event { flex-direction:row; }        /* keep the date chip beside the copy */
  .nw-b-cta--event .nw-b-cta__btn { width:auto; }
  .nw-b-cta__bigquote { min-width:0; }
  .nw-b-cta__shares { flex-wrap:wrap; }

  /* Quote / figure: ease horizontal padding so text isn't a narrow ribbon. */
  .nw-b-quote { padding:40px 26px 30px; margin:44px 0; }
  .nw-b-quote__mark { left:22px; font-size:72px; }
  .nw-b-quote__q { font-size:22px; }

  /* Stat band: a touch more compact when stacked. */
  .nw-b-stat { padding:26px 22px; }
  .nw-b-stat__v { font-size:40px; }

  /* Related: comfortable single column already via auto-fit; give the "all" link a tap zone. */
  .nwbm-related, .nwbm-related__head { }
  .nwbm-related__all { padding:8px 0; display:inline-block; }

  /* Legibility floor: nudge the smallest labels up on phones.
     (.nw-blog-modern prefix raises specificity to beat the base
     `.nw-b-cta--<type> .nw-b-cta__eyebrow` rules.) */
  .nw-blog-modern .nwbm-newsletter__eyebrow,
  .nw-blog-modern .nwbm-rcard__label,
  .nw-blog-modern .nw-b-cta__eyebrow { font-size:11px; }
  .nw-blog-modern .nw-b-figure__c,
  .nw-blog-modern .nw-b-quote__c { font-size:11px; }

  /* Section headings a touch smaller so long titles don't wrap awkwardly. */
  .nw-b-section__h,
  .nwbm-article h2 { font-size:28px; }
}

/* Very small phones (iPhone SE / 320px): tighten gutters, keep everything in-bounds. */
@media (max-width:380px) {
  .nwbm-hero { padding:40px 16px 0; }
  .nwbm-article { padding:40px 16px 0; }
  .nwbm-newsletter { padding:0 16px; }
  .nwbm-newsletter__inner { padding:34px 20px; }
  .nwbm-related { padding:0 16px; }
  .nw-b-cta { padding:24px 18px; }
  .nw-b-quote { padding:34px 20px 26px; }
  .nw-b-quote__q { font-size:20px; }
  .nwbm-title { font-size:34px; line-height:1.06; }
  .nwbm-dek { font-size:17px; }
  .nw-b-section__h,
  .nwbm-article h2 { font-size:25px; }
  .nw-b-stat__v { font-size:36px; }
  /* Sticky nav: full-width gutter, still lifted above the UserWay button. */
  .nwbm-sticky { left:10px; right:10px; bottom:76px; }
}

/* =========================================================================
   DEFENSIVE RESET  -  neutralize the GLOBAL Customizer "Additional CSS" that
   leaks onto our modern DOM. (Customizer additional-css prints inline in
   <head> and styles BARE tags  -  `blockquote`, `blockquote:after`,
   `blockquote *`, `blockquote p`, `* { font-family:Poppins }`  -  which land on
   our `nw_quote` shortcode because it emits a real <blockquote>. That global
   sheet is the OLD single-blog pull-quote design: -50px side margins, 100px
   padding, `position:relative;z-index:5`, and a `:after` painting a 100vw
   band with a 25px teal bar behind the quote. It also italicizes + DM-Serifs
   everything inside. We render our OWN framed pull-quote, so kill all of it  - 
   SCOPED to .nw-blog-modern so no other page/template is touched. Reversible:
   delete this block. Added 2026-07-17.
   ========================================================================= */

/* 1) KILL the leaked full-width band + teal bar behind our pull-quote. */
.nw-blog-modern .nw-b-quote__q::after,
.nw-blog-modern .nw-b-quote__q::before { content:none !important; display:none !important; background:none !important; }

/* 2) Undo the old blockquote box model imposed by the global sheet; our
      framed box lives on .nw-b-quote (the wrapper), the <blockquote> itself
      must be flush. Override even the global !important margins. */
.nw-blog-modern .nw-b-quote__q {
  margin:0 !important; padding:0 !important; position:static !important;
  z-index:auto !important; width:auto !important; max-width:none !important;
  background:none !important; border:none !important;
}

/* 3) Restore OUR typography inside the quote (global `* {Poppins}` +
      `blockquote * {italic/DM Serif 26/44}` both leak here). We DO want the
      serif, but at our sizes and non-italic, and links stay teal. */
.nw-blog-modern .nw-b-quote__q,
.nw-blog-modern .nw-b-quote__q * {
  font-style:normal !important;
  font-family:var(--nw-serif) !important;
  font-size:26px; line-height:1.38; color:var(--nw-teal);
}
.nw-blog-modern .nw-b-quote__q a { color:var(--nw-teal) !important; }

/* 4) The story-nav / TOC uses <button> elements (collapse, share, closed,
      navitem). The active theme (hello-elementor style.min.css) has a global
      Bootstrap-style base rule:
        [type=button],[type=submit],button {
          border:1px solid #c36; padding:.5rem 1rem; border-radius:3px; ... }
      which paints a pink 1px BORDER + PADDING + rounded corners on EVERY one
      of our nav buttons (the boxed "−" collapse control and the IN / X / copy
      share chips). Our design wants these borderless/paddingless. Neutralize
      the theme base on ALL our sticky-nav buttons (scoped + !important so it
      beats the bare-tag global), and drop the faint border we ourselves had on
      the share chips  -  Adam: "just some padding and weird borders here where
      there should be none". */
.nw-blog-modern .nwbm-navitem,
.nw-blog-modern .nwbm-sticky__btn,
.nw-blog-modern .nwbm-sticky__collapse,
.nw-blog-modern .nwbm-sticky__closed {
  border:none !important; border-radius:0 !important;
  box-shadow:none !important; outline:none !important;
  background-color:transparent !important;
  -webkit-appearance:none !important; appearance:none !important;
}
/* Collapse "−" control: plain glyph, no box, tight padding. */
.nw-blog-modern .nwbm-sticky__collapse { padding:2px 4px !important; }
/* TOC items: tighten to a compact list  -  the base 8px 10px felt too airy.
   Vertical padding minimal, row rhythm comes from the flex gap. */
.nw-blog-modern .nwbm-sticky__list { padding:2px 8px 6px !important; gap:2px !important; }
.nw-blog-modern .nwbm-navitem { padding:3px 10px !important; }
/* TOC labels: the active theme (hello-elementor/Bootstrap base) forces
   white-space:nowrap onto our label spans, so long section headings ran off the
   296px box and got sliced by the panel's overflow:hidden (Adam: clipping on
   "Influencing the AI Answer Engine" / "The Trust Architecture 3x3"). Let labels
   WRAP instead, and top-align the row so a 2-line label still lines up with its
   "01" number (the base align-items:baseline would strand the number on line 1). */
.nw-blog-modern .nwbm-navitem { align-items:flex-start !important; }
.nw-blog-modern .nwbm-navitem__num { line-height:1.4 !important; }
.nw-blog-modern .nwbm-navitem__label {
  white-space:normal !important; overflow-wrap:anywhere; word-break:normal;
}
/* Share chips (IN / X / copy / save): fixed square, centered glyph, NO border. */
.nw-blog-modern .nwbm-sticky__btn {
  width:28px !important; height:28px !important; padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* Preserve the intended active/hover fills (these set their own bg, allowed). */
.nw-blog-modern .nwbm-sticky__btn:hover { background-color:var(--nw-cream) !important; color:var(--nw-dark) !important; }
.nw-blog-modern .nwbm-sticky__btn[data-nwbm-saved="1"] { background-color:var(--nw-coral) !important; color:var(--nw-dark) !important; }
.nw-blog-modern .nwbm-navitem:hover,
.nw-blog-modern .nwbm-sticky__closed:hover { background-color:rgba(230,230,219,.07) !important; }

/* 5) Responsive: our mobile rules set the real quote padding on .nw-b-quote
      (the wrapper); ensure the inner blockquote stays flush there too. */
@media (max-width:820px) { .nw-blog-modern .nw-b-quote__q { margin:0 !important; padding:0 !important; } }


/* ---------------- HERO SHARE ROW ----------------
   Surfaces LinkedIn / X / Copy-link share at the TOP of every post (in the hero
   byline), so sharing is visible immediately without expanding the sticky story
   nav. Light-theme variant of the sticky share chips; sits alongside read-time.
   (Sticky-nav share buttons remain as a persistent secondary control.)

   NOTE: like .nwbm-sticky__btn, these <button>s are hit by hello-elementor's
   Bootstrap-style base rule ([type=button],button { border/padding/color }), so
   every geometry + color prop is scoped under .nw-blog-modern and forced with
   !important to beat that bare-tag global. */
.nw-blog-modern .nwbm-hero__share { display:flex; align-items:center; gap:8px; }
.nw-blog-modern .nwbm-hero__share-label { color:var(--nw-muted); font-size:11px; font-weight:600; letter-spacing:.16em; }
.nw-blog-modern .nwbm-hero__btn {
  width:30px !important; height:30px !important; padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:1px solid var(--nw-hair) !important; border-radius:0 !important;
  background-color:transparent !important; color:var(--nw-teal) !important;
  font-family:var(--nw-sans) !important; font-size:12px !important; font-weight:700 !important;
  line-height:1 !important; box-shadow:none !important;
  -webkit-appearance:none !important; appearance:none !important; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nw-blog-modern .nwbm-hero__btn:hover { background-color:var(--nw-teal) !important; color:var(--nw-cream) !important; border-color:var(--nw-teal) !important; }
.nw-blog-modern .nwbm-hero__btn:focus-visible { outline:2px solid var(--nw-coral) !important; outline-offset:2px; }

@media (max-width:700px) {
  /* On phones the byline wraps; keep the share row aligned left with the rest of
     the stacked meta and give it a little breathing room. */
  .nw-blog-modern .nwbm-hero__share { margin-left:0; margin-top:4px; }
}


/* =========================================================================
   BODY MEDIA CONTAINMENT (v15, 2026-07-31)
   -------------------------------------------------------------------------
   Nothing inside the article body may exceed its container on any viewport.

   The defect this fixes: WP's [caption] shortcode emits a wrapper carrying an
   INLINE `style="width:<N>px"` taken from the shortcode's width attribute
   (measured live: `<figure class="wp-caption aligncenter" style="width: 800px">`).
   46 published posts use [caption]; 50 of the 63 shortcodes declare a width
   over 360px, up to 5000px. An inline `width` beats a stylesheet `width`, so
   `max-width` is the only lever that reliably contains it - which is why every
   rule here is a max-width rather than a width.

   `.nw-b-figure` (our own shortcode figure, which is deliberately full-bleed
   inside the article column) is excluded from the measure cap but still
   contained by the 100% cap below, so it cannot overflow either.

   Reversible: delete this block and revert the two edits above.
   ========================================================================= */

/* 1) Hard ceiling on every media wrapper and media element in the body. */
.nwbm-article img,
.nwbm-article picture,
.nwbm-article svg,
.nwbm-article canvas,
.nwbm-article video,
.nwbm-article figure,
.nwbm-article .wp-caption,
.nwbm-article .wp-block-image,
.nwbm-article .wp-block-gallery,
.nwbm-article .wp-block-table,
.nwbm-article .gallery-item {
  max-width:100%;
}

/* 2) Images keep their aspect ratio when the cap kicks in. Scoped to img so it
      cannot disturb the fixed-ratio embed rules above. */
.nwbm-article img { height:auto; }

/* 3) Caption text must wrap inside the (now narrower) wrapper rather than
      setting its own width. */
.nwbm-article figcaption,
.nwbm-article .wp-caption-text {
  max-width:100%; box-sizing:border-box;
}

/* 4) Tables and wide preformatted content scroll inside their own box instead
      of widening the page. 5 published posts contain a table. */
.nwbm-article table { max-width:100%; display:block; overflow-x:auto; }
.nwbm-article pre { max-width:100%; overflow-x:auto; }

/* 5) Last-resort rail: a stray inline width on any body descendant cannot
      make the PAGE scroll sideways. Deliberately not `overflow:hidden`, which
      would clip the sticky story-nav. */
.nw-blog-modern { overflow-x:clip; }

@media (max-width:700px) {
  /* Floated media at phone width is a ribbon of text beside a thumbnail.
     Un-float and let it use the full column. 10 published posts use
     alignleft/alignright. */
  .nwbm-article .alignleft,
  .nwbm-article .alignright,
  .nwbm-article .aligncenter {
    float:none; display:block; width:auto; max-width:100%;
    margin-left:auto; margin-right:auto;
  }
  .nwbm-article .alignleft img,
  .nwbm-article .alignright img,
  .nwbm-article .aligncenter img { width:100%; height:auto; }
}


/* =========================================================================
   RAW <blockquote> CONTAINMENT (v16, 2026-07-31)
   -------------------------------------------------------------------------
   The v14 defensive reset for the global Customizer sheet ("Additional CSS",
   inline as #wp-custom-css) was scoped to `.nw-b-quote__q` - our own pull-quote
   shortcode. But 100 published posts contain a RAW <blockquote> typed straight
   into the editor, which that scope never reached. The global sheet styles the
   BARE tag with `margin-left:-50px; margin-right:-50px; padding:100px 25px
   100px 50px` plus a `:after` painting a 100vw band, so on a 390px phone a raw
   quote measured 450px wide starting at x=-30 - 30px off each edge.

   PRE-EXISTING: measured identically on v14 before any of this work. Fixed here
   because it is the same mobile-overflow symptom, on the same pages.

   Deliberately conservative: this CONTAINS the quote, it does not restyle it.
   Reversible: delete this block.
   ========================================================================= */
.nw-blog-modern .nwbm-article blockquote:not(.nw-b-quote__q) {
  margin-left:auto !important; margin-right:auto !important;
  max-width:min(var(--nw-measure), 100%) !important;
  width:auto !important;
  padding-left:28px !important; padding-right:28px !important;
  padding-top:32px !important; padding-bottom:32px !important;
  position:relative !important; overflow:hidden;
  box-sizing:border-box;
}
/* Kill the leaked 100vw band behind raw quotes (same treatment v14 already
   applies to the shortcode quote). */
.nw-blog-modern .nwbm-article blockquote:not(.nw-b-quote__q)::after,
.nw-blog-modern .nwbm-article blockquote:not(.nw-b-quote__q)::before {
  content:none !important; display:none !important; background:none !important;
}
/* Paragraphs inside a raw quote must not set their own width. */
.nw-blog-modern .nwbm-article blockquote:not(.nw-b-quote__q) > * {
  max-width:100% !important; margin-left:0 !important; margin-right:0 !important;
}

@media (max-width:700px) {
  .nw-blog-modern .nwbm-article blockquote:not(.nw-b-quote__q) {
    padding-left:20px !important; padding-right:20px !important;
    padding-top:24px !important; padding-bottom:24px !important;
  }
}

/* FontAwesome share icons (hero + sticky nav) — inherit button color, fixed size. */
.nw-blog-modern .nwbm-hero__btn i,
.nw-blog-modern .nwbm-sticky__btn i { font-size:13px; line-height:1; }