/* Google Tag Manager <noscript> iframe (keeps the snippet free of inline style) */
.hb-gtm { display: none; visibility: hidden; }
/* Homepage only. Plain CSS, scoped under .hb-home so nothing leaks to other pages. */
.hb-home {
  --hb-bg: #F3F2EE;
  --hb-ink: #121212;
  --hb-muted: #5A5A55;
  --hb-line: #C9C6BB;
  --hb-accent: #2B3FE0;
  /* Fluid type scale for reading text: grows linearly from a 390px to a 1280px wide viewport */
  --hb-text-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem);    /* 14-15px */
  --hb-text-base: clamp(1.125rem, 1.1rem + 0.11vw, 1.1875rem);   /* 18-19px */
  --hb-text-xl: clamp(1.375rem, 1.21rem + 0.675vw, 1.75rem);     /* 22-28px */
  --hb-text-2xl: clamp(1.625rem, 1.3rem + 1.35vw, 2.375rem);     /* 26-38px */
  margin: 0;
  background: var(--hb-bg);
  color: var(--hb-ink);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hb-home *, .hb-home *::before, .hb-home *::after { box-sizing: border-box; }
.hb-home a { color: inherit; text-decoration: none; }
.hb-home a:hover { opacity: .6; }
.hb-home a:focus-visible { outline: 2px solid var(--hb-accent); outline-offset: 4px; }
:where(.hb-home) :where(h1, h2, h3, p) { margin: 0; padding: 0; }

.hb-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.hb-label { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hb-rule { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--hb-ink); padding-top: 20px; margin-bottom: 48px; font-size: 14px; font-weight: 500; }

/* Nav */
.hb-nav { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; }
.hb-brand { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.hb-brand span, .hb-accent { color: var(--hb-accent); }
.hb-links { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 15px; font-weight: 500; }

/* Hero */
.hb-hero { padding-top: 96px; padding-bottom: 120px; }
.hb-eyebrow { margin-bottom: 32px; font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--hb-muted); }
.hb-hero h1 { max-width: 1000px; font-size: clamp(44px, 8.5vw, 116px); line-height: .98; letter-spacing: -.045em; font-weight: 600; }
.hb-hero-foot { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; margin-top: 72px; }
.hb-lede { max-width: 440px; font-size: 20px; line-height: 1.5; color: #3A3A36; }
.hb-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 28px; border-radius: 999px; background: var(--hb-ink); color: var(--hb-bg) !important; font-size: 16px; font-weight: 500; }

/* Work */
.hb-section { padding-bottom: 120px; }
.hb-work { display: flex; flex-direction: column; gap: 64px; }
.hb-work-row { display: flex; flex-wrap: wrap; gap: 32px; }
.hb-work-row.is-end { align-items: flex-end; }
.hb-work-row.is-start { align-items: flex-start; }
.hb-card { display: block; min-width: 0; }
.hb-card.w7 { flex: 7 1 480px; }
.hb-card.w5 { flex: 5 1 320px; }
.hb-thumb { display: flex; align-items: center; justify-content: center; padding: 10%; border-radius: 4px; overflow: hidden; }
.hb-thumb img { max-width: 60%; max-height: 60%; width: auto; height: auto; mix-blend-mode: multiply; }
.hb-thumb.r43 { aspect-ratio: 4 / 3; }
.hb-thumb.r45 { aspect-ratio: 4 / 5; }
.hb-thumb.r2 { aspect-ratio: 900 / 462; }
.hb-thumb.r11 { aspect-ratio: 1 / 1; }
.hb-thumb.r1610 { aspect-ratio: 16 / 10; }
.hb-thumb.t1 { background: #DAD8D0; }
.hb-thumb.t2 { background: #CFD3F6; }
.hb-thumb.t3 { background: #C9C6BB; }
.hb-thumb.t4 { background: #E6E3DA; }
.hb-card-meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 16px; }
.hb-card-name { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.hb-card-tag { font-size: 15px; color: var(--hb-muted); text-align: right; }
.hb-card-intro { margin-top: 8px !important; font-size: 16px; line-height: 1.5; color: #3A3A36; }

/* Case studies index: even grid, as some screenshots are too small for the wide homepage cards */
.hb-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 64px 32px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hb-ink); }

/* Photo thumbs (real screenshots) */
.hb-thumb.photo { padding: 0; background: #DAD8D0; }
.hb-thumb.photo img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mix-blend-mode: normal; }

/* Podcast */
.hb-podcast { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.hb-podcast > div { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hb-podcast h3 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; max-width: 720px; }
.hb-podcast p:not(.hb-post-meta) { font-size: 18px; line-height: 1.5; color: #3A3A36; max-width: 560px; }
.hb-podcast img { width: 180px; height: 180px; object-fit: cover; border-radius: 4px; }

/* Two-column sections (label left, content right) */
.hb-split { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.hb-split > .hb-label { flex: 1 1 240px; align-self: flex-start; padding-top: 20px; border-top: 1px solid var(--hb-ink); }
.hb-split > .hb-body { flex: 3 1 480px; min-width: 0; }

.hb-service { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; justify-content: space-between; padding: 28px 0; border-top: 1px solid var(--hb-line); }
.hb-service:last-child { border-bottom: 1px solid var(--hb-line); }
.hb-service-name { font-size: clamp(28px, 4vw, 48px); font-weight: 600; letter-spacing: -.035em; }
.hb-service-note { font-size: 16px; line-height: 1.5; color: var(--hb-muted); max-width: 340px; }

.hb-statement { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.25; letter-spacing: -.025em; font-weight: 500; }
.hb-statement span { color: #8A887E; }

/* Journal */
.hb-journal { display: flex; flex-wrap: wrap; gap: 48px 32px; }
.hb-post { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hb-post-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--hb-muted); }
.hb-post-meta.is-start { justify-content: flex-start; }
.hb-post h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.03em; font-weight: 600; }
.hb-post p { font-size: 16px; line-height: 1.5; color: #3A3A36; }
.hb-post-go { font-size: 15px; font-weight: 500; color: var(--hb-accent); }
/* Blog index: full list as a grid, so a short last row does not stretch */
.hb-journal-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 64px 32px; }
.hb-journal-all .hb-post { padding-top: 20px; border-top: 1px solid var(--hb-line); }
.hb-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--hb-ink); font-size: 15px; font-weight: 500; }
.hb-pagination-pages { display: flex; flex-wrap: wrap; gap: 4px; }
.hb-pagination-pages > * { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; border-radius: 999px; }
.hb-pagination [aria-current="page"] { background: var(--hb-ink); color: var(--hb-bg); }
.hb-pagination .is-disabled { color: var(--hb-line); }
/* Tags index */
.hb-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hb-tag-cloud a { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border: 1px solid var(--hb-line); border-radius: 999px; font-size: 15px; }
.hb-tag-cloud span, .hb-tag-group li span { font-size: 13px; color: var(--hb-muted); }
.hb-tag-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 48px 32px; margin-top: 72px; }
.hb-tag-group { padding-top: 20px; border-top: 1px solid var(--hb-ink); scroll-margin-top: 24px; }
.hb-tag-group ul { margin: 16px 0 0; padding: 0; list-style: none; }
.hb-tag-group li { padding: 8px 0; border-bottom: 1px solid var(--hb-line); font-size: 16px; line-height: 1.4; }
.hb-tag-group li a:hover { color: var(--hb-accent); opacity: 1; }
/* Contact form */
.hb-form { max-width: 640px; margin-top: 48px; }
.hb-form form > .hb-label { display: block; margin-bottom: 24px; padding-top: 20px; border-top: 1px solid var(--hb-ink); }
.hb-form-error:empty { display: none; }
.hb-form-error { margin-bottom: 24px; padding: 16px 20px; border-left: 4px solid #C0392B; border-radius: 4px; background: #F6E3E0; color: #7A1F14; font-size: 16px; }
.hb-form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hb-form-row { margin-bottom: 20px; }
.hb-form-row label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.hb-form-row.is-required label::after { content: " *"; color: #C0392B; }
.hb-form-row input, .hb-form-row textarea { display: block; width: 100%; padding: 12px 16px; border: 1px solid var(--hb-line); border-radius: 4px; background: #FBFAF7; color: inherit; font: inherit; font-size: 17px; }
.hb-form-row input:focus, .hb-form-row textarea:focus { outline: 2px solid var(--hb-accent); outline-offset: 1px; border-color: transparent; }
.hb-form-row textarea { min-height: 160px; resize: vertical; }
.hb-form button { border: 0; cursor: pointer; font-family: inherit; }
.hb-form .g-recaptcha { max-width: 100%; overflow: hidden; }
/* GDPR audit page: day count, Mautic form (Mautic's own markup and ids), quotes */
.hb-days h2 { font: inherit; }
.hb-days-count { margin-top: 12px; font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -.04em; font-weight: 600; text-transform: none; color: var(--hb-accent); }
.hb-mautic .mauticform-row { margin-bottom: 20px; }
.hb-mautic .mauticform-label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 600; }
.hb-mautic .mauticform-required .mauticform-label::after { content: " *"; color: #C0392B; }
.hb-mautic .mauticform-input { display: block; width: 100%; padding: 12px 16px; border: 1px solid var(--hb-line); border-radius: 4px; background: #FBFAF7; color: inherit; font: inherit; font-size: 17px; }
.hb-mautic .mauticform-input:focus { outline: 2px solid var(--hb-accent); outline-offset: 1px; border-color: transparent; }
.hb-mautic h3.mauticform-label { margin-top: 28px; }
.hb-mautic .mauticform-freetext { font-size: 15px; line-height: 1.5; color: #3A3A36; }
.hb-mautic .mauticform-checkboxgrp-label { display: inline-flex; align-items: center; gap: 8px; margin-right: 24px; font-size: 16px; }
.hb-mautic .mauticform-checkboxgrp-row { display: inline-block; }
.hb-mautic .mauticform-errormsg, .hb-mautic .mauticform-error { margin-top: 4px; font-size: 14px; color: #C0392B; }
.hb-mautic .mauticform-message { font-size: 16px; color: #2F7D4F; }
.hb-mautic .mauticform-button { border: 0; cursor: pointer; font-family: inherit; }
.hb-disclaimer { margin-top: 48px; font-size: 15px; line-height: 1.5; color: var(--hb-muted); max-width: 640px; }
.hb-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; }
.hb-quotes blockquote { margin: 0; padding-top: 20px; border-top: 1px solid var(--hb-line); }
.hb-quotes p { font-size: 19px; line-height: 1.45; letter-spacing: -.01em; }
.hb-quotes footer { margin-top: 16px; font-size: 14px; color: var(--hb-muted); }
.hb-quotes footer strong { color: var(--hb-ink); font-weight: 600; }
div.hb-service:hover { opacity: 1; }
/* Style guide (/styleguide/) */
.hb-sg + .hb-sg { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hb-line); }
.hb-sg .hb-body:not(.hb-sg-swatches):not(.hb-journal) > * + * { margin-top: 20px; }
.hb-sg code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8em; }
.hb-sg-note { font-size: 15px; color: var(--hb-muted); }
.hb-sg-row { display: flex; flex-wrap: wrap; gap: 24px; }
.hb-sg-swatches { display: flex; flex-wrap: wrap; gap: 24px; }
.hb-sg-swatch { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.hb-sg-chip { width: 96px; height: 64px; border: 1px solid var(--hb-line); border-radius: 4px; }
.hb-sg-chip.is-bg { background: var(--hb-bg); }
.hb-sg-chip.is-ink { background: var(--hb-ink); }
.hb-sg-chip.is-muted { background: var(--hb-muted); }
.hb-sg-chip.is-line { background: var(--hb-line); }
.hb-sg-chip.is-accent { background: var(--hb-accent); }
.hb-sg-type { line-height: 1.3; }
.hb-sg-type.is-2xl { font-size: var(--hb-text-2xl); font-weight: 600; letter-spacing: -.035em; }
.hb-sg-type.is-xl { font-size: var(--hb-text-xl); font-weight: 600; letter-spacing: -.03em; }
.hb-sg-type.is-base { font-size: var(--hb-text-base); }
.hb-sg-type.is-sm { font-size: var(--hb-text-sm); color: var(--hb-muted); }
.hb-sg .hb-pricing { margin-top: 0; }
/* Search */
.hb-search-form div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.hb-search-form input { flex: 1 1 240px; min-width: 0; min-height: 48px; padding: 0 20px; border: 1px solid var(--hb-ink); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 18px; }
.hb-search-form button { border: 0; cursor: pointer; font-family: inherit; }
.hb-search-status { margin-top: 32px; font-size: 15px; color: var(--hb-muted); }
.hb-search-results { max-width: 720px; margin: 24px 0 0; padding: 0; list-style: none; }
.hb-search-result { padding: 20px 0; border-top: 1px solid var(--hb-line); }
.hb-search-result h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.hb-search-result a { color: var(--hb-accent); }
.hb-search-meta { margin-top: 4px; font-size: 13px; color: var(--hb-muted); overflow-wrap: anywhere; }
.hb-search-stars { color: var(--hb-ink); letter-spacing: .1em; }
.hb-search-result p:last-child { margin-top: 8px; font-size: 16px; line-height: 1.5; color: #3A3A36; }

/* Contact */
.hb-contact { background: var(--hb-ink); color: var(--hb-bg); }
.hb-contact .hb-wrap { padding-top: 120px; padding-bottom: 40px; }
.hb-contact .hb-eyebrow { color: #A8A69C; margin-bottom: 24px; }
.hb-contact-link { display: inline-block; font-size: clamp(36px, 8vw, 112px); line-height: 1; letter-spacing: -.04em; font-weight: 600; word-break: break-word; }
.hb-foot { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; margin-top: 120px; padding-top: 24px; border-top: 1px solid #3A3A36; font-size: 14px; color: #A8A69C; }
.hb-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Article page */
.hb-page { padding-top: 72px; padding-bottom: 120px; }
.hb-page-title { max-width: 1000px; font-size: clamp(36px, 6.5vw, 88px); line-height: 1; letter-spacing: -.04em; font-weight: 600; }
.hb-page-sub { margin-top: 32px; max-width: 640px; }
.hb-page-body { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hb-ink); }
.hb-page-body > .hb-label { border-top: 0; padding-top: 0; }
.hb-prose > :first-child { margin-top: 0; }
.hb-prose { max-width: 720px; font-size: var(--hb-text-base); line-height: 1.6; color: #2A2A27; }
.hb-prose > * + * { margin-top: 1.25em; }
.hb-prose h2 { margin-top: 3rem; font-size: var(--hb-text-2xl); line-height: 1.15; letter-spacing: -.035em; font-weight: 600; color: var(--hb-ink); }
.hb-prose h3 { margin-top: 2.25rem; font-size: var(--hb-text-xl); line-height: 1.25; letter-spacing: -.03em; font-weight: 600; color: var(--hb-ink); }
.hb-prose h4 { margin-top: 1.75rem; font-size: var(--hb-text-base); line-height: 1.4; font-weight: 600; color: var(--hb-ink); }
.hb-prose h2 + *, .hb-prose h3 + *, .hb-prose h4 + * { margin-top: .75rem; }
.hb-prose a { color: var(--hb-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hb-prose strong { font-weight: 600; color: var(--hb-ink); }
.hb-prose ul, .hb-prose ol { padding-left: 1.3em; }
.hb-prose li + li { margin-top: .5em; }
.hb-prose blockquote { margin-left: 0; margin-right: 0; padding: 0; font-size: var(--hb-text-xl); line-height: 1.35; letter-spacing: -.02em; font-weight: 500; color: var(--hb-ink); }
.hb-prose img { max-width: 100%; height: auto; border-radius: 4px; }
.hb-prose .caption { display: block; margin-top: .5em; font-size: var(--hb-text-sm); color: var(--hb-muted); }
.hb-prose hr { border: 0; border-top: 1px solid var(--hb-line); margin: 2.5em 0; }
.hb-prose code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .88em; background: #E6E3DA; padding: .1em .35em; border-radius: 3px; }
.hb-prose pre { overflow-x: auto; padding: 16px 20px; background: var(--hb-ink); color: var(--hb-bg); border-radius: 4px; font-size: 15px; line-height: 1.5; }
.hb-prose pre code { background: none; padding: 0; color: inherit; }
.hb-prose table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.hb-prose th, .hb-prose td { text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hb-line); }
.hb-prose { overflow-wrap: break-word; }
/* Bootstrap 3 markup left in older Markdown bodies (Bootstrap itself is not loaded here) */
.hb-prose .row, .hb-prose [class*="col-"] { display: block; float: none; width: auto; margin-left: 0; margin-right: 0; padding: 0; }
.hb-prose .img-responsive { display: block; max-width: 100%; height: auto; }
.hb-prose .pull-right { float: right; margin: 0 0 16px 24px; }
.hb-prose .banner-blue, .hb-prose .banner-green { padding: 28px 32px; border-left: 4px solid var(--hb-accent); border-radius: 4px; background: #E8E6DF; }
.hb-prose .banner-green { border-left-color: #2F7D4F; }
.hb-prose [class*="banner-"] > * > :first-child, .hb-prose [class*="banner-"] .post-preview > :first-child { margin-top: 0; }
.hb-prose [class*="banner-"] h3 { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hb-muted); }
.hb-prose [class*="banner-"] .post-preview > a { display: block; color: inherit; text-decoration: none; }
.hb-prose [class*="banner-"] .post-title { margin-top: 0; font-size: var(--hb-text-xl); line-height: 1.2; letter-spacing: -.03em; font-weight: 600; color: var(--hb-ink); }
.hb-prose [class*="banner-"] .post-subtitle { margin-top: .5em; color: #3A3A36; }
.hb-prose [class*="banner-"] .post-meta { margin-top: .75em; font-size: 16px; }
.hb-prose .pager { margin-top: 20px; padding-left: 0; list-style: none; }
/* Service price cards (_partial.service-price-table) */
.hb-pricing { margin-top: 64px; }
.hb-pricing-group { margin: 56px 0 24px; padding-top: 20px; border-top: 1px solid var(--hb-ink); }
.hb-pricing-group:first-child { margin-top: 0; }
.hb-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.hb-price { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--hb-line); border-radius: 4px; }
.hb-price-kicker { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hb-muted); }
.hb-price h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; }
.hb-price p:not([class]) { font-size: 16px; line-height: 1.5; color: #3A3A36; }
.hb-price-tag { margin-top: 8px; font-size: clamp(36px, 4vw, 48px); line-height: 1; letter-spacing: -.035em; font-weight: 600; }
.hb-price-tag span { font-size: 18px; letter-spacing: 0; font-weight: 500; color: var(--hb-muted); }
.hb-price ul { margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hb-line); }
.hb-price li { padding: 10px 0; border-bottom: 1px solid var(--hb-line); font-size: 15px; line-height: 1.4; color: #3A3A36; }
.hb-price strong { font-weight: 600; color: var(--hb-ink); }
.hb-price .hb-btn { align-self: flex-start; margin-top: auto; }
.hb-price ul + .hb-btn { margin-top: 16px; }
.hb-prose .pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 24px; border-radius: 999px; background: var(--hb-ink); color: var(--hb-bg); text-decoration: none; font-size: 16px; font-weight: 500; }
.hb-post-image { display: block; width: 100%; height: auto; margin-top: 56px; aspect-ratio: 16 / 6; border-radius: 4px; background-color: #DAD8D0; object-fit: cover; }
.hb-meta dl { margin: 0; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; font-weight: 400; }
.hb-meta dt { margin-top: 16px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hb-muted); }
.hb-meta dt:first-child { margin-top: 0; }
.hb-meta dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; }
.hb-standfirst { font-size: var(--hb-text-xl); line-height: 1.4; letter-spacing: -.015em; font-weight: 500; color: var(--hb-ink); }
.hb-prose .hb-tags code { margin-right: 8px; font-size: 13px; color: var(--hb-muted); }
.hb-seealso, .hb-author, .hb-newsletter { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--hb-line); }
.hb-seealso h3, .hb-newsletter h3 { margin-top: 0; }
.hb-seealso ul { list-style: none; padding: 0; }
.hb-seealso li + li { margin-top: 12px; }
.hb-author { display: flex; flex-wrap: wrap; gap: 24px; font-size: 16px; line-height: 1.5; }
.hb-author img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
.hb-author > div { flex: 1 1 280px; min-width: 0; }
.hb-author > div > * + * { margin-top: 8px; }
.hb-author h3 { margin-top: 4px; }
.hb-newsletter p { font-size: 17px; }
.hb-newsletter .hb-btn { margin-top: 24px; color: var(--hb-bg); text-decoration: none; }
.hb-contact-arrow { color: #8F9CFF; }
.hb-contact.is-compact .hb-contact-link { font-size: clamp(28px, 5vw, 64px); }
.hb-contact.is-compact .hb-wrap { padding-top: 80px; }
.hb-contact.is-compact .hb-foot { margin-top: 80px; }

@media (max-width: 640px) {
  .hb-page { padding-top: 40px; padding-bottom: 80px; }
  .hb-page-body { margin-top: 48px; }
  .hb-wrap { padding-left: 20px; padding-right: 20px; }
  /* Nav links as an even 3 x 2 grid instead of a ragged wrap */
  .hb-links { display: grid; grid-template-columns: repeat(3, max-content); justify-content: space-between; gap: 10px 16px; width: 100%; }
  /* Article meta (author, category, reading time) in one row instead of six stacked lines */
  .hb-meta-inline { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; justify-content: start; column-gap: 28px; }
  .hb-meta-inline dt { margin-top: 0; }
  .hb-prose .banner-blue, .hb-prose .banner-green { padding: 20px; }
  .hb-pagination { margin-top: 56px; }
  .hb-pagination-pages { order: -1; flex-basis: 100%; }
  /* Floated images stack above the text; !important beats the inline float some bodies carry */
  .hb-prose .pull-right, .hb-prose [class*="banner-"] img[style*="float"] { float: none !important; display: block; margin: 0 0 16px !important; }
  .hb-hero { padding-top: 56px; padding-bottom: 80px; }
  .hb-section { padding-bottom: 80px; }
  .hb-contact .hb-wrap { padding-top: 80px; }
  .hb-foot { margin-top: 80px; }
}