/* =========================================================================
   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-blog-modern .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-blog-modern .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-blog-modern .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-blog-modern .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); }
/* No CTA link ever carries an underline: the global .nw-blog-modern a rule
   (color:deepteal; text-decoration:underline) was leaking onto every CTA
   button/link — dark-on-dark text + stray underlines on the LIVE prod page.
   This reset wins on specificity (0-0-2-1) and kills the underline; button/link
   COLORS are restored by the .nw-blog-modern-prefixed rules above + per-variant
   rules below. Text links keep their border-bottom (a border, not a decoration). */
.nw-blog-modern .nw-b-cta a { text-decoration:none; }

/* 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; }

/* =========================================================================
   RAW <blockquote> ATTRIBUTION LINE (v23, 2026-08-28)
   -------------------------------------------------------------------------
   Adam: "some of the pull quotes or block quotes don't have the attribution
   separated in their lower part like some others do. Some just have text
   inline same size as the rest of the quote."

   Root cause: only quotes authored with [nw_quote author="…"] got the real
   <figcaption class="nw-b-quote__c"> lower zone. Everything else had the
   attribution typed INTO the quote body, so it inherited the 26px serif quote
   type and read as part of the quote.

   The nw_quote shortcode now recovers that trailing line into its normal
   .nw-b-quote__c figcaption (no new CSS needed — it reuses the existing,
   correct treatment). RAW <blockquote>s can't take a <figcaption>, so
   blog-single.php emits a sibling <p class="nw-b-rawquote__c"> instead; this
   rule gives it the SAME divider + small uppercase treatment so both quote
   flavours look identical.

   Values mirror .nw-b-quote__c exactly. Reversible: delete this block.
   ========================================================================= */
.nw-blog-modern .nwbm-article .nw-b-rawquote__c {
  margin:-14px auto 34px !important;
  max-width:min(var(--nw-measure), 100%) !important;
  padding:18px 28px 0 !important;
  border-top:1px solid var(--nw-quoteb) !important;
  font-family:var(--nw-sans) !important;
  font-size:11px !important;
  font-weight:700 !important;
  font-style:normal !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--nw-muted) !important;
  line-height:1.5 !important;
}
@media (max-width:700px) {
  .nw-blog-modern .nwbm-article .nw-b-rawquote__c {
    padding-left:20px !important; padding-right:20px !important;
  }
}

/* The recovered figcaption must never inherit the quote's serif/italic from the
   global Customizer sheet (`blockquote *`) — pin the intended small-caps look.
   Same values as the base .nw-b-quote__c rule, forced past the global leak. */
.nw-blog-modern .nw-b-quote__c {
  font-family:var(--nw-sans) !important;
  font-style:normal !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--nw-muted) !important;
  line-height:1.5 !important;
}

/* =========================================================================
   Profile / headshot card [nw_profile] on BLOG singles (ported from dev v19).
   Previously ZERO blog CSS existed for this block on prod, so [nw_profile]
   rendered an unstyled full-width image (a 1024px monster) on the live page.
   Article-scoped, using the blog --nw-* tokens. Floated 260px card.
   ========================================================================= */
.nw-blog-modern .nwbm-article .nw-b-profile { float:left; width:260px; max-width:42%; margin:8px 34px 24px 0; background:var(--nw-card); border:1px solid var(--nw-hair); box-shadow:0 1px 0 rgba(7,72,91,.04); }
.nw-blog-modern .nwbm-article .nw-b-profile__img { display:block; width:100%; height:auto; border:0; }
.nw-blog-modern .nwbm-article .nw-b-profile__body { padding:16px 18px 18px; }
.nw-blog-modern .nwbm-article .nw-b-profile__name { display:block; font-family:var(--nw-serif); font-weight:400; font-size:19px; line-height:1.2; color:var(--nw-teal); margin:0; }
.nw-blog-modern .nwbm-article .nw-b-profile__role { display:block; margin-top:6px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--nw-muted); }
.nw-blog-modern .nwbm-article .nw-b-profile__role::before { content:""; display:block; width:26px; height:3px; background:var(--nw-coral); margin:0 0 10px; }
.nw-blog-modern .nwbm-article .nw-b-profile--right { float:right; margin:8px 0 24px 34px; }
@media (max-width:700px) {
  .nw-blog-modern .nwbm-article .nw-b-profile,
  .nw-blog-modern .nwbm-article .nw-b-profile--right { float:none; width:100%; max-width:none; margin:24px auto; }
}