/* ==========================================================================
   Phase 4 — blog part: blog index (+ category/tag/search views), blog post,
   blog sidebar, site search and the services/industries/locations hubs.
   Everything is scoped to this part's own classes (this file loads on every page).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: two-column layout (feed / reading column + sidebar)
   -------------------------------------------------------------------------- */
.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(36px, 5vw, 56px);
}
@media (min-width: 992px) {
    .blog-layout { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
    .blog-layout--read { grid-template-columns: minmax(0, 720px) 320px; justify-content: space-between; }
}
.blog-layout__main, .blog-layout__side { min-width: 0; }

/* Empty states with a helper character */
.blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
    border-radius: var(--r-lg);
    background: var(--paper);
}
.blog-empty.d-none { display: none; }
.blog-empty__char { width: clamp(110px, 16vw, 150px); margin-bottom: 1.25rem; }
.blog-empty__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; color: var(--ink); margin-bottom: 0.6rem; }
.blog-empty__text { max-width: 46ch; color: var(--ink-2); margin-bottom: 1.5rem; }
.blog-empty__text:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Notebook cards (index feed + related posts)
   -------------------------------------------------------------------------- */
.blog-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 34px 24px;
    padding-top: 10px;
}
.blog-feed__item { min-width: 0; }
.blog-feed__item--featured { grid-column: 1 / -1; }

.blog-note {
    --tape: var(--butter);
    padding: 10px;
    overflow: visible;
    background: var(--paper);
    border-radius: var(--r-md);
}
.blog-note:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow-lift); }
/* A strip of washi tape holding the note in place */
.blog-note::after {
    content: '';
    position: absolute;
    z-index: 3;
    top: -11px;
    left: 50%;
    width: 86px;
    height: 24px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--tape) 82%, transparent);
    transform: translateX(-50%) rotate(-4deg);
    pointer-events: none;
}
.blog-feed__item:nth-child(5n + 2) .blog-note { --tape: var(--lilac); }
.blog-feed__item:nth-child(5n + 3) .blog-note { --tape: var(--mint); }
.blog-feed__item:nth-child(5n + 4) .blog-note { --tape: var(--peach); }
.blog-feed__item:nth-child(5n + 5) .blog-note { --tape: var(--sky); }
.blog-feed__item:nth-child(even) .blog-note::after { transform: translateX(-50%) rotate(3deg); }

.blog-note__media { border-radius: calc(var(--r-md) - 8px); background: var(--sand); }
.blog-note__media > a:not(.blog-category-tag) { display: block; }
.blog-note .blog-image { aspect-ratio: 16 / 10; border-radius: 0; }
/* Category label on the image: a small frosted tag that stays out of the way of the picture. */
.blog-note .blog-category-tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    top: auto;
    z-index: 2;
    display: inline-block;
    width: auto;
    height: auto;
    max-width: calc(100% - 20px);
    padding: 0.2rem 0.6rem;
    border-radius: var(--pill);
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: none;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.blog-category-tag:hover { background: var(--ink); color: var(--paper); }
.blog-note__body { padding: 18px 14px 14px; gap: 0.6rem; }
.blog-note__meta { gap: 6px; }
.blog-note__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: var(--pill);
    background: var(--cream);
    color: var(--ink-2);
    font-size: 0.8rem;
    font-weight: 700;
}
.blog-note .blog-title { margin: 0.15rem 0 0; font-size: clamp(1.2rem, 1.08rem + 0.4vw, 1.4rem); }
.blog-note .blog-title a { color: var(--ink); text-decoration: none; }
.blog-note .blog-title a:hover { color: var(--berry); }
.blog-note .blog-excerpt { margin: 0; font-size: 0.97rem; }
.blog-note .blog-read-more { margin-top: auto; padding-top: 0.4rem; }

/* Featured (first) post: a wide butter card, image beside the text on wider screens */
.blog-note--featured { --tape: var(--berry-soft); background: var(--butter-soft); }
.blog-note--featured:hover { transform: translateY(-4px); }
.blog-note--featured .blog-title { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.1; }
.blog-note--featured .blog-excerpt { font-size: 1.05rem; }
.blog-note--featured .blog-note__meta span { background: var(--paper); }
@media (min-width: 768px) {
    .blog-note--featured { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; }
    .blog-note--featured .blog-note__media,
    .blog-note--featured .blog-note__media > a:not(.blog-category-tag) { height: 100%; }
    .blog-note--featured .blog-image { height: 100%; min-height: 320px; aspect-ratio: auto; }
    .blog-note--featured .blog-note__body { padding: clamp(22px, 3vw, 36px); justify-content: center; }
    .blog-note--featured .blog-read-more { margin-top: 0.5rem; }
}

/* Pagination as one pill bar */
.blog-pager {
    width: fit-content;
    max-width: 100%;
    margin: clamp(40px, 5vw, 56px) auto 0;
    padding: 6px;
    gap: 4px;
    border-radius: var(--pill);
    background: var(--paper);
}
.blog-pager a, .blog-pager span { min-width: 44px; height: 44px; padding: 0 0.8rem; background: transparent; }
.blog-pager a:hover { background: var(--butter-soft); color: var(--ink); }
.blog-pager .active { background: var(--ink); color: var(--paper); }
@media (max-width: 400px) {
    .blog-pager { border-radius: var(--r-sm); }
    .blog-pager a, .blog-pager span { min-width: 40px; height: 40px; padding: 0 0.6rem; }
}

/* --------------------------------------------------------------------------
   Sidebar widgets
   -------------------------------------------------------------------------- */
.blog-side { display: grid; gap: 16px; }
.blog-side .sidebar-widget { margin: 0; padding: 24px; border-radius: var(--r-md); }
.blog-side .sidebar-title { display: flex; align-items: center; gap: 0.55rem; font-size: 1.3rem; margin-bottom: 0.9rem; }
.blog-side__widget .sidebar-title::before {
    content: '';
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    border-radius: var(--blob);
    background: var(--butter);
}
.blog-side__widget:nth-child(2) .sidebar-title::before { background: var(--lilac); }
.blog-side__widget:nth-child(3) .sidebar-title::before { background: var(--mint); }
.blog-side__widget:nth-child(4) .sidebar-title::before { background: var(--peach); }

.blog-side__widget--search { background: var(--sky-soft); }
.blog-side__search { border: 2px solid transparent; background: var(--paper); }
.blog-side__search:focus-within { border-color: var(--ink); }
.blog-side__search input { min-height: 46px; }
.blog-side__search button { cursor: pointer; transition: background 0.2s, transform 0.25s var(--ease); }
.blog-side__search button:hover { background: var(--berry); transform: rotate(-8deg); }

.blog-side__cats { gap: 6px; }
.blog-side__cats li { margin: 0; }
.blog-side__cats a { align-items: center; gap: 0.75rem; padding: 0.6rem 0.6rem 0.6rem 0.95rem; border-radius: var(--pill); background: var(--cream); transition: background 0.2s, color 0.2s; }
.blog-side__cats a span {
    min-width: 30px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    padding: 0 0.5rem;
    border-radius: var(--pill);
    background: var(--paper);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
}
.blog-side__cats a:hover { background: var(--butter-soft); color: var(--ink); }
.blog-side__cats a.active { background: var(--ink); color: var(--paper); }
.blog-side__cats a.active span { background: var(--berry); color: #fff; }

.blog-side__recent { padding: 8px; margin-bottom: 6px; border-radius: 18px; background: var(--cream); }
.blog-side__recent:last-child { margin-bottom: 0; }
.blog-side__recent h4 { font-size: 0.95rem; line-height: 1.3; margin: 0 0 0.2rem; }
.blog-side__recent h4 a:hover { color: var(--berry); }
.blog-side__recent span { font-size: 0.8rem; color: var(--muted); }
.blog-side__recent span i { color: var(--berry); }

.blog-side__tags { gap: 8px; }
.blog-side__tags .blog-tag { background: var(--cream); }
.blog-side__tags .blog-tag:nth-child(4n + 1):hover { background: var(--butter); color: var(--ink); }
.blog-side__tags .blog-tag:nth-child(4n + 2):hover { background: var(--lilac); color: var(--ink); }
.blog-side__tags .blog-tag:nth-child(4n + 3):hover { background: var(--mint); color: var(--ink); }
.blog-side__tags .blog-tag:nth-child(4n + 4):hover { background: var(--peach); color: var(--ink); }
.blog-side__tags .blog-tag.active { background: var(--berry); color: #fff; }

/* Berry newsletter card with a waving helper peeking over the edge */
.blog-side__news { position: relative; overflow: hidden; isolation: isolate; padding: 28px 24px 24px !important; }
.blog-side__news::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -50px;
    bottom: -70px;
    width: 180px;
    aspect-ratio: 1;
    border-radius: var(--blob);
    background: var(--berry-deep);
}
.blog-side__news-char { position: absolute; top: 10px; right: -6px; width: 78px; transform: rotate(10deg); }
.blog-side__news .sidebar-title { padding-right: 70px; font-size: 1.5rem; }
.blog-side__news-text { padding-right: 46px; margin-bottom: 1rem; }
.blog-side__news .form-group { margin-bottom: 0.65rem; }
.blog-side__news .form-control { border-radius: var(--pill); min-height: 50px; }
.blog-side__news .form-control:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--paper) 35%, transparent); }
.blog-side__news-btn { width: 100%; }

/* --------------------------------------------------------------------------
   Blog post: hero
   -------------------------------------------------------------------------- */
.blog-post-hero__card { isolation: isolate; }
.blog-post-hero__card::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: -70px;
    top: -90px;
    width: clamp(220px, 30vw, 420px);
    aspect-ratio: 1;
    border-radius: var(--blob);
    background: color-mix(in srgb, var(--paper) 42%, transparent);
}
.blog-post-hero__cat { margin-bottom: 1rem; box-shadow: var(--shadow-lift); }
.blog-post-hero__title {
    font-size: clamp(2.2rem, 1.35rem + 3.4vw, 4.3rem);
    font-weight: 800;
    line-height: 1.03;
    max-width: 19ch;
    margin: 0 0 1rem;
    overflow-wrap: break-word;
}
.blog-post-hero__title span { font-style: italic; font-weight: 600; color: var(--berry-deep); }
.blog-post-hero__lead { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem); max-width: 58ch; margin-bottom: 0.5rem; }
.blog-post-hero__meta { gap: 8px; margin-top: 1.5rem; }
.blog-post-hero__meta .meta-item { gap: 0.45rem; padding: 0.4rem 0.95rem 0.4rem 0.45rem; }
.blog-post-hero__meta .meta-item::before {
    content: '';
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--butter);
}
.blog-post-hero__meta .meta-item:nth-child(1)::before { background: var(--lilac); border-radius: var(--blob); }
.blog-post-hero__meta .meta-item:nth-child(2)::before { background: var(--sky); }
.blog-post-hero__meta .meta-item:nth-child(3) { background: var(--ink); color: var(--paper); }
.blog-post-hero__meta .meta-item:nth-child(3)::before { background: var(--butter); border-radius: var(--blob-2); }
.blog-post-hero__meta .meta-item:nth-child(3) .meta-label { color: color-mix(in srgb, var(--paper) 72%, transparent); }
.blog-post-hero__meta .meta-item:nth-child(4)::before { background: var(--peach); }
.blog-post-hero__meta .meta-label { font-size: 0.74rem; font-weight: 700; color: var(--muted); }
.blog-post-hero__meta .meta-value { font-size: 0.9rem; font-weight: 800; }
.blog-post-hero__char { display: none; }
@media (min-width: 992px) {
    .blog-post-hero__card { padding-right: clamp(220px, 22vw, 300px); }
    .blog-post-hero__char {
        display: block;
        position: absolute;
        right: clamp(40px, 5vw, 80px);
        bottom: clamp(36px, 4vw, 56px);
        width: clamp(140px, 13vw, 190px);
        transform: rotate(6deg);
    }
}

/* --------------------------------------------------------------------------
   Blog post: reading column
   -------------------------------------------------------------------------- */
.blog-read__figure {
    margin: 0 0 clamp(32px, 4vw, 48px);
    padding: 10px;
    border-radius: var(--r-lg);
    background: var(--paper);
    transform: rotate(-0.6deg);
}
.blog-read__figure .blog-featured-image {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: calc(var(--r-lg) - 10px);
    background: var(--sand);
}

/* Stored editor HTML: robust typography */
.blog-prose {
    font-size: clamp(1.05rem, 1rem + 0.2vw, 1.14rem);
    line-height: 1.8;
    color: var(--ink-2);
    overflow-wrap: break-word;
}
/* Some posts are plain text with line breaks and no markup at all */
.blog-prose:not(:has(*)) { white-space: pre-line; }
.blog-prose > * { max-width: none; }
.blog-prose > :first-child { margin-top: 0; }
.blog-prose p { margin: 0 0 1.25em; }
.blog-prose p:empty { display: none; }
.blog-prose a { color: var(--berry); text-decoration: underline; text-decoration-thickness: 0.08em; overflow-wrap: anywhere; }
.blog-prose a:hover { color: var(--berry-deep); }
.blog-prose strong, .blog-prose b { color: var(--ink); }
/* Neutralise colours/fonts pasted from the old dark theme or other editors */
.blog-prose [style*="color"] { color: inherit !important; }
.blog-prose [style*="background"] { background: transparent !important; }
.blog-prose [style*="font-family"] { font-family: inherit !important; }

.blog-prose h2 {
    position: relative;
    font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.3rem);
    line-height: 1.12;
    margin: 2.1em 0 0.65em;
}
.blog-prose h3 { font-size: clamp(1.28rem, 1.15rem + 0.55vw, 1.6rem); line-height: 1.2; margin: 1.8em 0 0.55em; }
.blog-prose h4 { font-size: 1.15rem; margin: 1.6em 0 0.5em; }
.blog-prose h5, .blog-prose h6 { font-size: 1rem; margin: 1.4em 0 0.5em; }
.blog-prose h2 + h3 { margin-top: 0.8em; }

.blog-prose ul, .blog-prose ol { margin: 0 0 1.4em; padding-left: 1.5em; }
.blog-prose ul { list-style: none; padding-left: 0.2em; }
.blog-prose ul > li { position: relative; padding-left: 1.6em; }
.blog-prose ul > li::before {
    content: '';
    position: absolute;
    left: 0.25em;
    top: 0.68em;
    width: 0.55em;
    height: 0.55em;
    border-radius: var(--blob);
    background: var(--berry);
}
.blog-prose ol > li { padding-left: 0.35em; }
.blog-prose ol > li::marker { color: var(--berry); font-weight: 800; }
.blog-prose li { margin-bottom: 0.5em; }
.blog-prose li > ul, .blog-prose li > ol { margin: 0.5em 0 0; }

/* Pull quotes: display italic on a lilac block */
.blog-prose blockquote {
    position: relative;
    margin: 2.25rem 0;
    padding: clamp(26px, 4vw, 40px) clamp(22px, 4vw, 40px) clamp(24px, 3.5vw, 34px) clamp(64px, 9vw, 92px);
    border: 0;
    border-radius: var(--r-md);
    background: var(--lilac);
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    font-style: italic;
    font-weight: 500;
    line-height: 1.45;
}
.blog-prose blockquote::before {
    content: '';
    position: absolute;
    left: clamp(18px, 3vw, 30px);
    top: clamp(24px, 3.6vw, 36px);
    width: clamp(32px, 4.5vw, 44px);
    height: clamp(26px, 3.6vw, 36px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'%3E%3Cpath fill='%237E2259' d='M0 36V22C0 9 7 2 19 0l2 6c-7 2-10 6-10 12h8v18H0Zm25 0V22C25 9 32 2 44 0l2 6c-7 2-10 6-10 12h8v18H25Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.blog-prose blockquote p:last-child { margin-bottom: 0; }
.blog-prose blockquote a { color: var(--berry-deep); }

.blog-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    border-radius: var(--r-md);
}
.blog-prose figure { margin: 2rem 0; }
.blog-prose figure img { margin: 0 auto; }
.blog-prose figcaption { margin-top: 0.6rem; text-align: center; font-size: 0.9rem; color: var(--muted); }
.blog-prose iframe, .blog-prose video { display: block; max-width: 100%; margin: 2rem auto; border: 0; border-radius: var(--r-md); }
.blog-prose iframe[src*="youtube"], .blog-prose iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }

.blog-prose code { padding: 0.12em 0.45em; border-radius: 8px; background: var(--sand); color: var(--ink); font-size: 0.88em; overflow-wrap: anywhere; }
.blog-prose pre {
    margin: 1.75rem 0;
    padding: 1.1rem 1.3rem;
    border-radius: var(--r-sm);
    background: var(--ink);
    color: var(--cream);
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
}
.blog-prose pre code { padding: 0; background: none; color: inherit; overflow-wrap: normal; }

.blog-prose hr {
    width: 120px;
    height: 14px;
    margin: 2.75rem auto;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M2 7c9-8 15-8 24 0s15 8 24 0 15-8 24 0 15 8 24 0 15-8 20-2' fill='none' stroke='%239B2C6E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Tables: tidy, rounded, scroll sideways on small screens */
.blog-prose table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 2rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--r-sm);
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 0.95rem;
    line-height: 1.5;
}
/* On small screens the (single) row group becomes the real table so it keeps a readable width and scrolls. */
.blog-prose table:not(:has(thead, tfoot)) > tbody { display: table; width: 100%; min-width: 560px; border-spacing: 0; }
@media (min-width: 768px) {
    .blog-prose table { display: table; }
    .blog-prose table:not(:has(thead, tfoot)) > tbody { display: table-row-group; min-width: 0; }
}
.blog-prose th, .blog-prose td {
    min-width: 110px;
    padding: 0.8rem 1rem;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    vertical-align: top;
    text-align: left;
    overflow-wrap: normal;
}
.blog-prose tr:last-child > td { border-bottom: 0 !important; }
.blog-prose th, .blog-prose thead td,
.blog-prose table:not(:has(thead)) tr:first-child > td:only-child { background: var(--sand); color: var(--ink); font-weight: 800; }
.blog-prose tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--cream) 70%, transparent); }
.blog-prose td:first-child { color: var(--ink); font-weight: 700; }
.blog-prose .ql-align-right { text-align: right; }
.blog-prose .ql-align-center { text-align: center; }
.blog-prose .ql-align-justify { text-align: left; }

/* Tags and share */
.blog-read__tags {
    align-items: center;
    gap: 8px;
    margin-top: clamp(36px, 5vw, 56px);
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: var(--paper);
}
.blog-read__tags .blog-tags-title { margin: 0 0.5rem 0 0; font-size: 1.15rem; }
.blog-read__tags .blog-tag { background: var(--lilac-soft); }
.blog-read__tags .blog-tag:hover { background: var(--ink); color: var(--paper); }

.blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    margin-top: 16px;
    padding: 18px 20px;
    border-radius: var(--r-md);
    background: var(--butter-soft);
}
.blog-share__title { margin: 0; font-family: var(--font-display); font-size: 1.3rem; }
.blog-share__list { display: flex; flex-wrap: wrap; gap: 14px; }
.blog-share .share-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}
.blog-share .share-btn i {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-size: 1.15rem;
    transition: background 0.2s, color 0.2s, transform 0.3s var(--ease);
}
.blog-share .share-btn:hover { color: var(--berry); }
.blog-share .share-btn:hover i { background: var(--berry); color: #fff; transform: translateY(-3px) rotate(-8deg); }

/* Author: a friendly card */
.blog-author {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 28px);
    margin-top: 16px;
    padding: clamp(22px, 3.5vw, 32px);
    border-radius: var(--r-lg);
    background: var(--peach-soft);
}
.blog-author__photo { position: relative; flex-shrink: 0; width: 96px; height: 96px; }
.blog-author__photo::before {
    content: '';
    position: absolute;
    inset: -8px -10px -6px -6px;
    border-radius: var(--blob-2);
    background: var(--peach);
    transform: rotate(-8deg);
}
.blog-author__img { position: relative; display: block; width: 96px; height: 96px; object-fit: cover; border-radius: var(--blob); background: var(--paper); }
.blog-author__body { min-width: 0; }
.blog-author__name { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: 0.35rem; }
.blog-author__bio { margin-bottom: 0.85rem; color: var(--ink-2); }
.blog-author__links { display: flex; gap: 8px; }
.blog-author__links a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.blog-author__links a:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 575.98px) {
    .blog-author { flex-direction: column; align-items: flex-start; }
}

/* Previous / next as pill cards */
.blog-postnav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .blog-postnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-postnav__spacer { display: none; }
@media (min-width: 640px) { .blog-postnav__spacer { display: block; } }
.blog-postnav__link {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 20px 14px 14px;
    border-radius: var(--pill);
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.blog-postnav__link--next { justify-content: flex-end; text-align: right; padding: 14px 14px 14px 20px; }
.blog-postnav__link:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.blog-postnav__link > i {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--butter);
    font-size: 1.15rem;
}
.blog-postnav__link--next > i { background: var(--mint); }
.blog-postnav__link > div { min-width: 0; }
.blog-postnav__label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.blog-postnav__title { margin: 0.1rem 0 0; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.25; }

/* Comments: speech bubbles, replies indented */
.blog-comments { margin-top: clamp(48px, 6vw, 72px); }
.blog-comments__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: 1.5rem; }
.blog-comments__title span { font-style: italic; font-weight: 600; color: var(--berry); }
.blog-comment { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.blog-comment__avatar { width: 52px; height: 52px; flex-shrink: 0; object-fit: cover; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 0 4px var(--paper); }
.blog-comment__bubble {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 16px 20px 18px;
    border-radius: 6px var(--r-md) var(--r-md) var(--r-md);
    background: var(--paper);
}
.blog-comment__bubble::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0;
    width: 18px;
    height: 18px;
    background: inherit;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.blog-comment__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 0.4rem; }
.blog-comment__name { margin: 0; font-size: 1rem; }
.blog-comment__date { padding: 0.15rem 0.6rem; border-radius: var(--pill); background: var(--cream); color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.blog-comment__text { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.blog-comment--reply { margin-left: clamp(26px, 8vw, 66px); }
.blog-comment--reply .blog-comment__avatar { width: 42px; height: 42px; background: var(--mint); }
.blog-comment--reply .blog-comment__bubble { background: var(--lilac-soft); }
.blog-comment--reply .blog-comment__date { background: var(--paper); }
.blog-comment--reply .blog-comment__text { font-size: 0.95rem; }

.blog-comments__empty {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 24px 18px 18px;
    border-radius: var(--r-md);
    background: var(--mint-soft);
}
.blog-comments__empty-char { width: 74px; flex-shrink: 0; }
.blog-comments__empty-text { margin: 0; color: var(--ink); font-weight: 600; }

/* Comment form in a paper card */
.blog-reply {
    margin-top: clamp(32px, 4vw, 48px);
    padding: clamp(24px, 4vw, 44px);
    border-radius: var(--r-lg);
    background: var(--paper);
}
.blog-reply__title { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: 1.4rem; }
.blog-reply__title span { font-style: italic; font-weight: 600; color: var(--berry); }
.blog-reply__textarea { min-height: 150px; }
.blog-reply__note { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--muted); }
.blog-reply__note i { color: var(--berry); margin-top: 0.15rem; }

/* Related posts */
.blog-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 34px 24px;
    padding-top: 10px;
}

/* --------------------------------------------------------------------------
   Site search
   -------------------------------------------------------------------------- */
.search-page__form { margin-bottom: clamp(28px, 4vw, 40px); }
.search-page__pill {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 8px 8px 8px 22px;
    border: 2px solid var(--ink);
    border-radius: var(--pill);
    background: var(--paper);
    box-shadow: 6px 6px 0 var(--butter);
    transition: box-shadow 0.3s var(--ease);
}
.search-page__pill:focus-within { box-shadow: 6px 6px 0 var(--berry-soft), 0 0 0 4px var(--butter-soft); }
.search-page__icon { flex-shrink: 0; font-size: 1.3rem; color: var(--ink); }
.search-page__pill .form-control {
    flex: 1;
    min-width: 0;
    min-height: 56px;
    padding: 0.6rem 0.5rem;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
}
.search-page__pill .btn-primary-custom { flex-shrink: 0; min-height: 56px; border-radius: var(--pill) !important; padding-inline: clamp(1rem, 3vw, 1.6rem); }
@media (max-width: 420px) {
    .search-page__pill { padding-left: 14px; }
    .search-page__icon { display: none; }
}
.search-page__count { display: inline-flex; margin-bottom: 1.25rem; padding: 0.4rem 0.95rem; border-radius: var(--pill); background: var(--paper); color: var(--ink); font-size: 0.92rem; font-weight: 700; }
.search-results { display: grid; gap: 12px; }
.search-card {
    --type: var(--sand);
    position: relative;
    padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 30px);
    border-radius: var(--r-md);
    background: var(--paper);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.search-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.search-card--blog { --type: var(--lilac); }
.search-card--portfolio { --type: var(--peach); }
.search-card--solution { --type: var(--mint); }
.search-card--faq { --type: var(--sky); }
.search-card__meta { gap: 8px; align-items: center; margin-bottom: 0.6rem; }
.search-card__type { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: var(--pill); background: var(--type); color: var(--ink); font-size: 0.8rem; font-weight: 800; }
.search-card__type i, .search-card__date i { color: var(--ink) !important; }
.search-card__date { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.search-card__title { font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem); margin: 0 0 0.4rem; }
.search-card__title a { color: var(--ink); text-decoration: none; }
.search-card__title a:hover { color: var(--berry); }
.search-card__excerpt { margin: 0 0 0.6rem; font-size: 0.97rem; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Page hubs (services / industries / locations)
   -------------------------------------------------------------------------- */
.hub-intro__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 992px) { .hub-intro__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.hub-intro__lead { max-width: 58ch; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); line-height: 1.7; color: var(--ink-2); }

.hub-switch { position: relative; padding: clamp(18px, 2.5vw, 26px); border-radius: var(--r-lg); background: var(--lilac-soft); }
.hub-switch__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.hub-switch__kicker { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; color: var(--muted); }
.hub-switch__badge { background: var(--butter); }
.hub-switch__seg { display: flex; width: 100%; }
.hub-switch__seg > .hub-tab {
    flex: 1 1 auto;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px !important;
    padding: 0.45rem 0.8rem !important;
    font-size: 0.92rem;
    white-space: nowrap;
}
.hub-tab__count {
    min-width: 26px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    padding: 0 0.4rem;
    border-radius: var(--pill);
    background: var(--cream);
    color: var(--ink);
    font-size: 0.74rem;
    font-weight: 800;
}
.hub-switch__seg > .is-active .hub-tab__count { background: var(--berry); color: #fff; }
@media (max-width: 479.98px) {
    .hub-switch__seg { border-radius: var(--r-sm); }
    .hub-switch__seg > .hub-tab { padding: 0.4rem 0.6rem !important; font-size: 0.86rem; }
}

/* Stats as stickers */
.hub-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: clamp(32px, 4vw, 48px);
}
@media (min-width: 992px) { .hub-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.hub-stat {
    --sticker: var(--butter-soft);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 16px 18px;
    border-radius: var(--r-sm);
    background: var(--sticker);
    transform: rotate(-1.2deg);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.hub-stat:nth-child(2) { --sticker: var(--mint-soft); transform: rotate(1deg); }
.hub-stat:nth-child(3) { --sticker: var(--sky-soft); transform: rotate(-0.6deg); }
.hub-stat:nth-child(4) { --sticker: var(--blush-soft); transform: rotate(1.4deg); }
.hub-stat:hover { transform: rotate(0) translateY(-3px); box-shadow: var(--shadow-lift); }
@media (min-width: 576px) { .hub-stat { flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; } }
.hub-stat .hub-stat-icon { width: 48px; height: 48px; background: var(--paper); font-size: 1.3rem; }
.hub-stat:nth-child(odd) .hub-stat-icon { border-radius: var(--blob-2); }
.hub-stat__title { font-weight: 800; color: var(--ink); font-size: 0.98rem; line-height: 1.25; }
.hub-stat__text { display: block; font-size: 0.82rem; color: var(--muted); }

/* Directory: sits on the sand slab */
.hub-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: clamp(28px, 4vw, 40px);
}
.hub-filter__field { position: relative; flex: 1 1 300px; max-width: 480px; }
.hub-filter__field .hub-search-icon { position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink); }
.hub-filter__field .hub-search-input { border: 2px solid transparent; }
.hub-filter__field .hub-search-input:focus { border-color: var(--ink); }
.hub-filter__count { display: inline-flex; gap: 0.3rem; padding: 0.45rem 1rem; border-radius: var(--pill); background: var(--paper); color: var(--ink-2); font-size: 0.9rem; font-weight: 600; }
.hub-filter__count strong { color: var(--ink); }

.hub-pages [hidden] { display: none !important; }
.hub-group + .hub-group { margin-top: clamp(40px, 5vw, 64px); }
.hub-group__title { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); margin-bottom: 1.1rem; }
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}
.hub-grid > .page-card-item { min-width: 0; }
.hub-card {
    --card: var(--butter-soft);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: clamp(20px, 2.4vw, 26px);
}
.hub-grid > :nth-child(6n + 2) .hub-card { --card: var(--lilac-soft); }
.hub-grid > :nth-child(6n + 3) .hub-card { --card: var(--mint-soft); }
.hub-grid > :nth-child(6n + 4) .hub-card { --card: var(--peach-soft); }
.hub-grid > :nth-child(6n + 5) .hub-card { --card: var(--sky-soft); }
.hub-grid > :nth-child(6n + 6) .hub-card { --card: var(--blush-soft); }
.hub-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0.35rem; }
.hub-card__icon { width: 52px; height: 52px; margin: 0; font-size: 1.3rem; background: var(--paper); }
.hub-card .hub-badge { padding: 0.3rem 0.75rem; font-size: 0.76rem; text-align: right; }
.hub-card__title { margin: 0; font-size: clamp(1.18rem, 1.08rem + 0.35vw, 1.35rem); }
.hub-card__desc { margin: 0 0 0.4rem; font-size: 0.95rem; }
.hub-card__link { margin-top: auto; }
/* The whole pastel card is the link target */
.hub-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.hub-card:has(.hub-card__link:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.hub-card__link:focus-visible { outline: 0; }
.hub-pages .hub-empty { margin-top: 1rem; }

/* Content sections sit close under their hero card */
.site-main > section:is(.blog-index, .blog-read, .search-page, .hub-intro) { padding-top: clamp(28px, 4vw, 52px); }