/* Blog-only presentation. Approved shared brand components remain unchanged. */
.blog-page { color: #091528; background: #fff; }
.blog-inner.container { width: min(80rem,89%); }
.blog-hero { padding-block: 2.25rem 2.75rem; color: #f6f9ff; background: linear-gradient(100deg,#021524ed,#061b2ce8),url('../images/work/website-study-v1.webp') center 48%/cover; }
.blog-hero__grid { display: grid; grid-template-columns: 1fr 17rem; gap: 3rem; align-items: center; }
.blog-breadcrumb { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1rem; font-size: .8125rem; color: #ccddf0; }
.blog-breadcrumb a { text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-hero h1 { margin: 0; font-size: clamp(2.25rem,4vw,3.5rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 780; }
.blog-hero p { max-width: 64ch; margin: 1rem 0 0; color: #d7e3f2; font-size: 1.125rem; line-height: 1.65; }
.blog-hero__topics { display: grid; gap: 1.1rem; margin: 0; padding: .75rem 0 .75rem 2.25rem; border-left: 1px solid #b5c7de55; list-style: none; }
.blog-hero__topics li { display: flex; align-items: center; gap: 1rem; font-size: .9375rem; }
.blog-hero__topics span { display: grid; place-items: center; width: 1.7rem; font-size: 1.75rem; line-height: 1; color: #54aeff; }
.blog-content { padding-block: 1.5rem 3rem; }
.blog-toolbar,.blog-layout { display: grid; grid-template-columns: minmax(0,1fr) 17rem; gap: 1.5rem; }
.blog-toolbar { align-items: start; margin-bottom: 1.5rem; }
.blog-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.blog-filters a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid #e0e6f1; border-radius: .45rem; background: #f6f8fc; color: #14223b; font-size: .75rem; text-decoration: none; }
.blog-filters a[aria-current="page"] { border-color: #1271ec; background: #096be5; color: #fff; }
.blog-filters a:hover { border-color: #84b7f3; }
.blog-search { display: flex; min-width: 0; }
.blog-search input[type="search"] { min-width: 0; width: 100%; min-height: 2.75rem; padding: .6rem .75rem; border: 1px solid #dce4f0; border-radius: .4rem 0 0 .4rem; background: #fff; color: #14223b; font: inherit; font-size: .75rem; }
.blog-search button { flex: 0 0 auto; white-space: nowrap; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid #126ce2; border-radius: 0 .4rem .4rem 0; background: #096be5; color: #fff; font: inherit; font-size: .75rem; cursor: pointer; }
.blog-results { min-width: 0; }
.blog-results__heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; align-items: center; }
.blog-results__heading h2 { margin: 0; font-size: 1.0625rem; font-weight: 700; }
.blog-results__heading p { margin: 0; color: #586781; font-size: .75rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.15rem; align-items: stretch; }
.blog-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e8edf4; border-radius: .5rem; background: #fff; box-shadow: 0 3px 10px #29466406; }
.blog-card__image { display: block; aspect-ratio: 16/9; overflow: hidden; background: #eef3fa; color: #387ad1; text-decoration: none; }
.blog-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 100%; height: 100%; background: linear-gradient(135deg,#eaf3ff,#efedff); }
.blog-image-placeholder > span { font-size: .6875rem; color: #536c91; }
.blog-card__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; min-width: 0; padding: .9rem; }
.blog-card__categories { font-size: .75rem; line-height: 1.4; color: #1263bf; }
.blog-card__categories a { text-decoration: none; }
.blog-card h3 { margin: 0; font-size: 1rem; line-height: 1.35; letter-spacing: -.025em; font-weight: 720; }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: #1263bf; }
.blog-card__excerpt { color: #53627c; font-size: .8125rem; line-height: 1.55; }
.blog-card__excerpt p { margin: 0; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.blog-card__meta time { font-size: .625rem; color: #586981; }
.blog-card__meta > a { font-size: .75rem; font-weight: 650; color: #1263bf; text-decoration: none; }
.blog-sidebar { display: grid; gap: 1rem; align-content: start; }
.blog-sidebar__panel { min-width: 0; padding: 1rem; border: 1px solid #e0e7f1; border-radius: .55rem; background: #f9fbfe; }
.blog-sidebar h2 { margin: 0 0 .9rem; font-size: 1.125rem; line-height: 1.25; letter-spacing: -.025em; font-weight: 750; }
.blog-sidebar__panel > p { margin: 0; font-size: .8125rem; color: #53627c; }
.blog-recent,.blog-categories { list-style: none; margin: 0; padding: 0; }
.blog-recent { display: grid; gap: .9rem; }
.blog-recent li { display: flex; align-items: flex-start; gap: .65rem; }
.blog-recent__image { display: block; flex-shrink: 0; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: .35rem; }
.blog-recent__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-recent h3 { margin: 0; font-size: .75rem; font-weight: 650; line-height: 1.5; }
.blog-recent h3 a { text-decoration: none; }
.blog-recent time { color: #5c6d85; font-size: .625rem; }
.blog-categories li + li { border-top: 1px solid #e2e8f0; }
.blog-categories a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 2.5rem; padding-block: .35rem; font-size: .8125rem; text-decoration: none; }
.blog-count { min-width: 1.4rem; padding: .05rem .35rem; border-radius: .3rem; background: #0c6bdc; color: #fff; text-align: center; font-size: .6875rem; }
.blog-sidebar__quote { padding: 1rem; border: 1px solid #cfe1fb; border-radius: .55rem; background: linear-gradient(135deg,#eaf4ff,#eef0ff); }
.blog-sidebar__quote h2 { color: #123a78; }
.blog-sidebar__quote p { margin: 0 0 1rem; color: #435879; font-size: .8125rem; line-height: 1.6; }
.blog-button { display: inline-flex; align-items: center; justify-content: center; gap: 1.3rem; min-height: 2.75rem; padding: .65rem 1rem; border: 1px solid #146cde; border-radius: .45rem; background: #096be5; color: #fff; font-size: .8125rem; font-weight: 600; text-decoration: none; }
.blog-sidebar__quote .blog-button { display: flex; }
.blog-button:hover,.blog-search button:hover { background: #0756ba; color: #fff; }
.blog-empty { display: grid; justify-items: center; padding: 3.5rem 1.5rem; border: 1px solid #dce7f7; border-radius: .8rem; background: linear-gradient(145deg,#f6faff,#f5f3ff); text-align: center; }
.blog-empty > span { font-size: 3rem; color: #5278cc; line-height: 1; }
.blog-empty h3 { margin: 1rem 0 .5rem; font-size: 1.4rem; letter-spacing: -.025em; }
.blog-empty p { max-width: 46ch; margin: 0 0 1.5rem; color: #53627c; font-size: .9375rem; }
.blog-pagination { margin-top: 2rem; }
.blog-pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.blog-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.blog-pagination a,.blog-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: .45rem .8rem; border: 1px solid #dce5f2; border-radius: .4rem; text-decoration: none; font-size: .8125rem; }
.blog-pagination .current { background: #096be5; color: #fff; border-color: #096be5; }
.blog-single__hero { padding-block: 2.25rem 2.75rem; color: #fff; background: radial-gradient(ellipse at 90% 20%,#233369,transparent 70%),#05192b; }
.blog-single__hero h1 { max-width: 22ch; margin: .9rem 0 1rem; font-size: clamp(2.25rem,4vw,3.75rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 780; }
.blog-single__categories { color: #9dcfff; font-size: .875rem; }
.blog-single__categories a { text-decoration: none; }
.blog-single__meta { margin: 0; color: #d1e0f1; font-size: .875rem; }
.blog-single__body { max-width: 62rem; padding-block: 2.5rem 3rem; }
.blog-single__article { max-width: 54rem; margin-inline: auto; }
.blog-single__image { margin: 0 0 2rem; }
.blog-single__image img { display: block; width: 100%; height: auto; border-radius: .8rem; }
.blog-single__image figcaption { margin-top: .65rem; color: #596a83; font-size: .8125rem; text-align: center; }
.blog-entry-content { color: #283b53; font-size: 1.0625rem; line-height: 1.8; overflow-wrap: anywhere; }
.blog-entry-content > :first-child { margin-top: 0; }
.blog-entry-content h2,.blog-entry-content h3,.blog-entry-content h4 { color: #0a1c32; line-height: 1.25; letter-spacing: -.025em; margin: 2rem 0 1rem; }
.blog-entry-content h2 { font-size: 1.8rem; }.blog-entry-content h3 { font-size: 1.4rem; }
.blog-entry-content a { color: #1263bf; }
.blog-entry-content img { max-width: 100%; height: auto; }
.blog-entry-content figure { max-width: 100%; margin-inline: 0; }
.blog-entry-content iframe,.blog-entry-content video { max-width: 100%; }
.blog-entry-content .wp-block-embed__wrapper { position: relative; }
.blog-entry-content .wp-has-aspect-ratio iframe { width: 100%; aspect-ratio: 16/9; height: auto; }
.blog-entry-content pre { overflow: auto; padding: 1rem; border-radius: .5rem; background: #0a192e; color: #eef5ff; font-size: .875rem; }
.blog-entry-content .wp-block-table { overflow-x: auto; }
.blog-entry-content table { width: 100%; border-collapse: collapse; }
.blog-entry-content th,.blog-entry-content td { padding: .6rem; border: 1px solid #dce3ed; }
.blog-entry-content blockquote { margin: 1.5rem 0; padding: .2rem 1.25rem; border-left: 3px solid #427ef0; background: #f6f9ff; }
.blog-single__tags { padding-block: 1rem; border-top: 1px solid #e1e8f0; font-size: .875rem; }
.blog-single__back { display: inline-flex; align-items: center; min-height: 2.75rem; color: #1263bf; font-size: .875rem; font-weight: 600; }
.blog-single .post-navigation { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid #e1e8f0; }
.blog-single .post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1.5rem; }
.blog-single .post-navigation a { color: #123c72; font-size: .875rem; text-decoration: none; }
.blog-single .post-navigation span { display: block; font-size: .6875rem; color: #60708a; }
.blog-single__quote { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-block: 2.5rem; padding: 2rem; border: 1px solid #d4e3f6; border-radius: .8rem; background: linear-gradient(120deg,#edf6ff,#f0efff); }
.blog-single__quote h2 { margin: 0 0 .5rem; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.025em; }
.blog-single__quote p { margin: 0; color: #52627a; font-size: .875rem; }
.blog-single__quote .blog-button { flex-shrink: 0; }
.blog-related > h2 { margin: 0 0 1.25rem; font-size: 1.5rem; }
.blog-page :focus-visible { outline: 3px solid #267ce2; outline-offset: 4px; }
.blog-hero :focus-visible,.blog-single__hero :focus-visible { outline-color: #73d4ff; }
@media(max-width:74.99rem) { .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:63.99rem) { .blog-inner.container { width: calc(100% - 3rem); }.blog-hero__grid { grid-template-columns: 1fr; gap: 1.5rem; }.blog-hero__topics { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 0; border: 0; }.blog-toolbar,.blog-layout { grid-template-columns: 1fr; }.blog-search { max-width: 30rem; }.blog-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }.blog-sidebar__quote { grid-column: 1/-1; }.blog-single__quote { align-items: flex-start; flex-direction: column; } }
@media(max-width:39.99rem) { .blog-inner.container { width: calc(100% - 2.5rem); }.blog-hero { padding-block: 1.75rem 2rem; }.blog-hero h1 { font-size: 2.35rem; }.blog-hero p { font-size: 1rem; }.blog-hero__topics { gap: .75rem 1rem; }.blog-hero__topics li { gap: .5rem; font-size: .8125rem; }.blog-hero__topics span { font-size: 1.4rem; }.blog-grid,.blog-sidebar { grid-template-columns: 1fr; }.blog-content { padding-block: 1.25rem 2rem; }.blog-filters { gap: .5rem; }.blog-filters a { padding-inline: .8rem; }.blog-card h2 { font-size: 1.125rem; }.blog-card__excerpt { font-size: .9375rem; }.blog-card__meta time { font-size: .75rem; }.blog-card__meta > a { font-size: .875rem; }.blog-single__hero h1 { font-size: 2.4rem; }.blog-single__body { padding-top: 1.75rem; }.blog-entry-content { font-size: 1rem; }.blog-single__quote { padding: 1.3rem; }.blog-single .post-navigation .nav-links { flex-direction: column; } }
@media(prefers-reduced-motion:reduce) { .blog-page { scroll-behavior: auto; } }