/* Shared editorial presentation. The article's original words, images and links stay intact. */
.kb-article.blog-page { padding-bottom: 0; }
.kb-article.blog-page > .blog-hero {
  position: relative; isolation: isolate; background-color: var(--ink); background-position: center;
  background-size: cover; color: #fff; text-align: left; padding: 0;
}
.kb-article.blog-page > .blog-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgb(17 24 39 / 96%), rgb(17 24 39 / 72%)); }
.blog-hero-image { position: absolute; inset: 0; z-index: -2; }
.blog-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.kb-article.blog-page .blog-hero-inner { max-width: var(--wrap); margin: auto; padding: clamp(28px,5vw,64px) 20px clamp(36px,5vw,64px); }
.kb-article.blog-page .blog-breadcrumb { display: flex; gap: 12px; align-items: center; font-size: .9rem; margin-bottom: 28px; color: #d1d5db; }
.kb-article.blog-page .blog-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.kb-article.blog-page .blog-breadcrumb a:hover { text-decoration: underline; }
.kb-article.blog-page .blog-hero .eyebrow { color: var(--yellow); margin-bottom: 12px; }
.kb-article.blog-page .blog-hero h1 { font-size: clamp(1.85rem,4.3vw,3.25rem); color: #fff; max-width: 980px; margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.kb-article.blog-page .blog-hero-intro { font-size: clamp(1rem,2vw,1.15rem); color: #e5e7eb; max-width: 760px; margin: 24px 0; line-height: 1.65; }
.kb-article.blog-page .blog-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .88rem; color: #d1d5db; }
.blog-hero-meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--yellow); margin-left: 12px; font-weight: 700; text-decoration: none; }
.kb-article.blog-page > article { max-width: 800px; padding: 0 20px; margin: 48px auto; font-size: 1.05rem; color: var(--ink-2); scroll-margin-top: 120px; overflow-wrap: anywhere; }
.kb-article.blog-page > article p { line-height: 1.85; }
.kb-article.blog-page > article h2 { font-size: clamp(1.45rem,3vw,1.85rem); margin-top: 2.5rem; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; }
.kb-article.blog-page > article h3 { font-size: 1.2rem; margin-top: 1.8rem; line-height: 1.4; font-weight: 750; }
.kb-article.blog-page > article a:not(.kb-dual-btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow-dark); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.kb-article.blog-page > article li { margin-block: .6rem; line-height: 1.75; }
.kb-article.blog-page > article ul:not(.list-none) { padding-left: 1.4rem; list-style: disc; }
.kb-article.blog-page > article ol { padding-left: 1.4rem; list-style: decimal; }
.kb-article.blog-page > article blockquote, .kb-article.blog-page .kb-author-note { border-left: 4px solid var(--yellow); border-radius: 0 14px 14px 0; padding: 24px; background: var(--soft); margin-block: 28px; }
.kb-article.blog-page > article blockquote p:last-child, .kb-article.blog-page .kb-author-note p { margin-bottom: 0; }
.kb-article.blog-page > article img { border-radius: 14px; }
.kb-article.blog-page > article table { display: block; max-width: 100%; width: 100%; overflow-x: auto; border-radius: 10px; font-size: .95rem; }
.kb-article.blog-page > article :is(th,td) { min-width: 7rem; overflow-wrap: normal; word-break: normal; padding: 12px; }
.kb-article.blog-page > article th { background: var(--soft); font-weight: 750; }
.kb-article.blog-page > article hr { margin-block: 32px; }

.blog-choice, .blog-navigation { width: calc(100% - 40px); max-width: 1040px; margin: 48px auto; }
.blog-choice .blog-choice-heading { margin-bottom: 22px; }
.blog-choice .eyebrow, .blog-navigation .eyebrow { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 9px; }
.blog-choice h2, .blog-navigation h2 { color: var(--ink); font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.blog-choice .blog-choice-heading > p:last-child { color: var(--muted); margin: 0; line-height: 1.6; }
.blog-choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.blog-choice-card { border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px,3vw,32px); display: flex; flex-direction: column; align-items: flex-start; background: #fff; box-shadow: var(--shadow); }
.blog-choice-label { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 18px; }
.blog-choice-label .kb-icon { color: var(--yellow); width: 28px; height: 28px; }
.blog-choice .blog-choice-card h3 { font-size: clamp(1.2rem,2vw,1.45rem); color: var(--ink); font-weight: 800; margin: 0 0 12px; line-height: 1.25; }
.blog-choice .blog-choice-card > p { color: var(--muted); line-height: 1.65; margin: 0 0 24px; }
.blog-choice .btn { min-height: 48px; margin-top: auto; text-align: center; max-width: 100%; font-size: .95rem; }
.blog-choice .btn .kb-icon { flex: 0 0 20px; width: 20px; height: 20px; }
.blog-choice .btn-wa { background: var(--wa-dark); color: #fff; }
.blog-choice .btn-wa:hover { background: #146a39; }
.blog-choice .btn-primary { color: var(--ink); background: var(--yellow); }
.blog-choice--end { padding: clamp(24px,4vw,40px); border-radius: 24px; background: var(--ink); }
.blog-choice--end .blog-choice-heading h2 { color: #fff; }
.blog-choice--end .blog-choice-heading .eyebrow { color: var(--yellow); }
.blog-choice--end .blog-choice-heading > p:last-child { color: #d1d5db; }
.blog-choice--end .blog-choice-grid { gap: 16px; }
.blog-choice--end .blog-choice-card { box-shadow: none; }
.blog-work.kb-related { max-width: 1040px; padding: 24px 20px; margin-block: 48px; }
.blog-work .kb-related-nav { border: 0; padding: 8px 0 20px; }
.blog-work h2 { margin-bottom: 12px; }
.blog-navigation { margin-block: 56px 72px; }
.blog-navigation-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.blog-navigation-heading > a { min-height: 44px; display: inline-flex; align-items: center; flex-shrink: 0; font-weight: 700; text-underline-offset: 4px; }
.blog-navigation-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.blog-neighbour { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; padding: 28px; background: var(--soft); transition: border-color .15s, background .15s; }
.blog-neighbour:hover { border-color: var(--yellow-dark); background: #fffbed; }
.blog-neighbour-label { color: var(--muted); font-size: .85rem; margin-bottom: 16px; }
.blog-neighbour h3 { font-size: 1.2rem; line-height: 1.4; margin: 0 0 24px; }
.blog-neighbour-read { display: flex; align-items: center; gap: 10px; font-weight: 750; margin-top: auto; }
.blog-neighbour-read .kb-icon { width: 20px; height: 20px; }
.blog-page a:focus-visible, .blog-choice a:focus-visible, .blog-navigation a:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 4px; border-radius: 6px; }
/* Legacy-only routes keep their existing choice text and gain the same visual treatment. */
.kb-article.blog-page article :is(.kb-blog-dual-cta-top,.kb-blog-dual-cta-footer) { margin: 36px 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--soft); }
.kb-article.blog-page .kb-dual-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.kb-article.blog-page .kb-dual-col { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.kb-article.blog-page .kb-dual-tagline { font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.kb-article.blog-page .kb-dual-col-title { font-size: 1.2rem; font-weight: 750; }
.kb-article.blog-page .kb-dual-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; min-height: 48px; font-weight: 700; border-radius: 10px; background: var(--yellow); color: var(--ink); }
.kb-article.blog-page .kb-dual-btn-wa { background: var(--wa-dark); color: #fff; }
@media (max-width: 640px) {
  .blog-choice, .blog-navigation { width: calc(100% - 32px); margin-block: 32px; }
  .blog-choice-grid, .blog-navigation-grid, .kb-article.blog-page .kb-dual-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .blog-choice-card { padding: 22px; border-radius: 16px; }
  .blog-choice .blog-choice-card > p { margin-bottom: 20px; }
  .blog-choice-label { margin-bottom: 12px; }
  .blog-choice .btn { width: 100%; padding-inline: 12px; }
  .blog-choice--end { padding: 22px 16px; }
  .blog-navigation-heading { align-items: start; flex-direction: column; gap: 2px; }
  .blog-neighbour { padding: 24px; }
  .kb-article.blog-page .blog-hero-inner { padding-inline: 20px; }
  .blog-hero-meta a { margin-left: 0; flex-basis: 100%; }
  .kb-article.blog-page > article { margin-block: 32px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .blog-neighbour { transition: none; } }
/* A compact early choice leaves the reading flow prominent, including on a phone. */
.blog-choice--intro { max-width: 800px; }
.blog-choice--intro .blog-choice-card { padding: 22px; }
.blog-choice--intro .blog-choice-heading { margin-bottom: 18px; }
.blog-choice--intro .blog-choice-card > p { font-size: .95rem; margin-bottom: 18px; }
.blog-choice--intro .blog-choice-label { margin-bottom: 10px; }
@media (max-width: 640px) {
  .blog-choice--intro .blog-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .blog-choice--intro .blog-choice-card { padding: 16px 14px; }
  .blog-choice--intro .blog-choice-card h3 { font-size: 1.05rem; }
  .blog-choice--intro .blog-choice-card > p { font-size: .88rem; line-height: 1.55; }
  .blog-choice--intro .blog-choice-label { font-size: .67rem; gap: 5px; letter-spacing: .03em; }
  .blog-choice--intro .blog-choice-label .kb-icon { width: 22px; height: 22px; }
  .blog-choice--intro .btn { font-size: .86rem; padding: 10px 4px; }
}
/* The index shares the same palette and card language, retaining its filters and content. */
.kb-article.blog-index > header { background-color: var(--ink); min-height: 0; }
.kb-article.blog-index > header > .relative { min-height: 0; padding-block: clamp(36px,6vw,72px); }
.kb-article.blog-index > header h1 { color: #fff; font-size: clamp(2rem,5vw,3.4rem); font-weight: 800; }
.kb-article.blog-index > section .container { max-width: var(--wrap); }
.kb-article.blog-index > section h2 { color: var(--ink); font-weight: 800; }
.kb-article.blog-index .blog-card { border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.kb-article.blog-index .blog-card > div { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.kb-article.blog-index .blog-card h3 { font-size: 1.2rem; color: var(--ink); font-weight: 750; }
.kb-article.blog-index .blog-card > div > a:last-child { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow-dark); text-underline-offset: 4px; margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; font-weight: 750; }
.kb-article.blog-index a:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 3px; }