/* ============================================================
   Cloudy Then Clear — the blog (/blog and /blog/…)
   Loaded after style.css and built entirely on its tokens, so a
   post looks like one more page of the homepage, not a bolt-on.
   Everything here is prefixed blog- (the listing, chrome shared by
   every blog page) or post- (the article body, whose markup is
   emitted by the CRM's renderer — see lib/blog/sample.js for the
   exact shape each block takes).
   ============================================================ */

:root {
  /* The article measure. 720px of Inter at 1.15rem is about 70 characters a
     line — long enough for a thought, short enough that the eye finds the
     next line without hunting. */
  --post-measure: 720px;
  /* Space either side of the measure that a "wide" figure may spill into.
     720 + 2 × 196 = 1112, the homepage container minus its gutters, so a
     wide picture lines up with the header and footer edges. */
  --post-bleed: 196px;
  --post-gutter: 24px;
}

/* The nav link for the page you are on keeps its orange underline, so a
   reader on the blog can see at a glance which section they're in. */
.nav-link[aria-current="page"]::after {
  right: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The listing pages sit on the pale tint so white cards lift off it, the
   same way the service cards do in the homepage's tinted sections. */
.blog-page--index .blog-main,
.blog-page--error .blog-main {
  background: var(--ice-50);
}

/* ---------- Hero band ---------- */
.blog-hero {
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(77, 159, 220, 0.25), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800));
  color: var(--white);
}

.blog-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 72px;
}

.blog-hero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 3rem);
  max-width: 22ch;
  margin-bottom: 18px;
}

.blog-hero-lead {
  color: var(--ice-200);
  font-size: 1.13rem;
  max-width: 56ch;
  margin: 0;
}

.blog-hero-lead strong {
  color: var(--white);
}

/* The tagline art, tilted the same way it is in the homepage's dark bands. */
.blog-hero-mark {
  width: clamp(180px, 19vw, 250px);
  margin: 0;
}

.blog-hero--compact .blog-hero-inner {
  grid-template-columns: 1fr;
  padding-top: 56px;
  padding-bottom: 56px;
}

.blog-hero--compact h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}

.blog-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ice-200);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 20px;
}

.blog-back:hover {
  color: var(--white);
}

/* Search: a pill on the navy band, so it reads as part of the hero rather
   than a form dropped onto it. */
.blog-search {
  display: flex;
  gap: 10px;
  max-width: 540px;
  margin-top: 30px;
}

.blog-search input {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 13px 20px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.blog-search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.blog-search input:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(77, 159, 220, 0.25);
}

.blog-search input::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.7;
}

.blog-search .btn {
  flex: none;
}

/* ---------- Category pills ---------- */
.blog-pills {
  background: var(--white);
  border-bottom: 1px solid var(--ice-200);
}

/* One row that scrolls sideways on a phone rather than wrapping into a
   block of pills that pushes the posts down. The scrollbar is hidden; the
   half-visible last pill is the cue that there is more. */
.blog-pills-inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.blog-pills-inner::-webkit-scrollbar {
  display: none;
}

.blog-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy-800);
  background: var(--white);
  border: 1.5px solid var(--ice-200);
  border-radius: 999px;
  padding: 9px 16px;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.blog-pill:hover {
  border-color: var(--blue-500);
  transform: translateY(-1px);
}

.blog-pill.is-active {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}

.blog-pill-count {
  margin-left: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-400);
}

.blog-pill.is-active .blog-pill-count {
  color: var(--ice-200);
}

/* ---------- Chips, meta rows, avatars (shared by cards and the post) ---------- */
.blog-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 1;
}

/* A post with no category leaves this empty; without this it would still
   take the card's gap and push the title down. */
.blog-card-top:empty {
  display: none;
}

.blog-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue-600);
  background: rgba(77, 159, 220, 0.13);
  padding: 5px 11px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

a.blog-chip:hover {
  background: rgba(77, 159, 220, 0.24);
  color: var(--navy-800);
}

.blog-chip--accent {
  color: var(--orange-600);
  background: rgba(242, 106, 33, 0.13);
}

.blog-chip--light {
  color: var(--ice-100);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

a.blog-chip--light:hover {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.blog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text-400);
}

/* The templates put a "·" span between items. On a phone the row wraps, and
   a free-standing separator would be left dangling at the end of a line, so
   the span is hidden and the item that follows it draws the dot itself —
   then the dot wraps with its text. */
.blog-dot {
  display: none;
}

.blog-meta > .blog-dot + *::before {
  content: "·";
  margin-right: 8px;
  color: var(--ice-200);
}

.blog-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-600);
  font-weight: 600;
}

.blog-avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--orange-500);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.78rem;
}

/* ---------- Featured post ---------- */
.blog-featured-wrap {
  padding-top: 48px;
}

.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--white);
  border: 1px solid var(--ice-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* The picture fills whatever height the copy needs, cropping rather than
   letterboxing, so the two halves always share one straight bottom edge. */
.blog-featured-media {
  position: relative;
  min-height: 380px;
  background: var(--ice-100);
}

.blog-featured-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-featured-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 40px 44px;
}

.blog-featured-title {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  line-height: 1.2;
  margin: 0;
}

.blog-featured-title a {
  color: var(--navy-800);
}

.blog-featured-title a:hover {
  color: var(--blue-600);
}

.blog-featured-excerpt {
  color: var(--text-600);
  font-size: 1.05rem;
  margin: 0;
}

.blog-featured-btn {
  margin-top: auto;
}

/* ---------- The card grid ---------- */
.blog-list {
  padding: 48px 0 32px;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* Same surface, radius, shadow and lift as the homepage's service cards. */
.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--ice-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.blog-card-media {
  aspect-ratio: 16 / 10;
  background: var(--ice-100);
  overflow: hidden;
}

.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}

/* No cover: the round brand mark on navy, so the grid never shows a hole. */
.blog-card-media--empty,
.blog-featured-media--empty {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900) 70%);
}

.blog-card-media--empty img,
.blog-featured-media--empty img {
  position: static;
  width: 38%;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  padding: 22px 24px 24px;
}

.blog-card-title {
  font-size: 1.2rem;
  line-height: 1.28;
  margin: 0;
}

.blog-card-title a {
  color: var(--navy-800);
}

/* The title's link is stretched over the whole card, so anywhere on the card
   opens the post. The chip row sits above it (z-index on .blog-card-top) so
   the category still works as its own link. */
.blog-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.blog-card:hover .blog-card-title a {
  color: var(--blue-600);
}

.blog-card-excerpt {
  color: var(--text-600);
  font-size: 0.95rem;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card .blog-meta {
  margin-top: auto;
  padding-top: 4px;
}

/* ---------- Empty state ---------- */
.blog-empty {
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 32px;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--ice-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.blog-empty img {
  margin: 0 auto 18px;
}

.blog-empty p {
  color: var(--text-600);
  margin: 0;
}

.blog-empty a {
  font-weight: 600;
}

/* ---------- Pagination ---------- */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
}

.blog-page-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy-800);
  background: var(--white);
  border: 1.5px solid var(--ice-200);
  border-radius: 999px;
  padding: 10px 18px;
  transition: border-color 0.15s, transform 0.15s;
}

a.blog-page-step:hover {
  border-color: var(--blue-500);
  transform: translateY(-1px);
}

.blog-page-step.is-disabled {
  opacity: 0.45;
}

.blog-page-nums {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-page-num,
.blog-page-gap {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 600;
  color: var(--navy-800);
}

.blog-page-gap {
  color: var(--text-400);
}

a.blog-page-num:hover {
  background: var(--ice-100);
}

.blog-page-num.is-current {
  background: var(--navy-800);
  color: var(--white);
}

/* ---------- Quote strip above the footer ---------- */
.blog-cta {
  padding: 48px 0 96px;
}

.blog-cta-card {
  display: grid;
  grid-template-columns: 1.3fr auto;
  align-items: center;
  gap: 36px;
  padding: 48px 52px;
  border-radius: 24px;
  color: var(--white);
  background:
    radial-gradient(700px 360px at 8% 120%, rgba(242, 106, 33, 0.28), transparent 55%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800));
  box-shadow: 0 30px 60px -24px rgba(11, 27, 51, 0.5);
}

.blog-cta-card h2 {
  color: var(--white);
  margin-bottom: 12px;
}

.blog-cta-card p {
  color: var(--ice-200);
  font-size: 1.05rem;
  max-width: 52ch;
  margin: 0;
}

.blog-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Error pages (404 / 503) ---------- */
.blog-error {
  padding: 56px 0 24px;
}

.blog-error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ============================================================
   The post page
   ============================================================ */

/* A thin orange bar along the top edge that fills as you read. The span is
   scaled by blog.js; scaleX rather than width so it never triggers layout. */
.post-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 80;
  pointer-events: none;
}

.post-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--orange-500), var(--orange-600));
  transform-origin: left;
  transform: scaleX(0);
}

.post-preview-ribbon {
  background: #FFF4EC;
  color: #8A3B0A;
  border-bottom: 1px solid #FFD9C2;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 10px 24px;
}

/* ---------- Title band ---------- */
.post-hero {
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(77, 159, 220, 0.25), transparent 60%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800));
  color: var(--white);
}

/* The band is as wide as the article measure plus its gutters, so the title
   starts on the same vertical line as the body text below it. */
.post-hero-inner {
  max-width: calc(var(--post-measure) + 2 * var(--post-gutter));
  padding-top: 52px;
  padding-bottom: 60px;
}

/* With a cover photo the band runs on underneath it and the photo is pulled
   up over the edge, so the picture is the hero and the band is its mount. */
.post-hero--cover .post-hero-inner {
  padding-bottom: 170px;
}

.post-title {
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin: 14px 0 20px;
}

.post-hero .blog-meta {
  color: var(--ice-200);
  font-size: 0.92rem;
}

.post-hero .blog-author {
  color: var(--white);
}

.post-hero .blog-dot {
  color: rgba(255, 255, 255, 0.35);
}

/* "Drafted with help from AI, then checked and edited by …" — a quiet
   footnote to the meta row, a step smaller and dimmer than it, with no icon
   or colour that would make it read as a warning. Ice at 72% on the navy band
   is still about 7:1, so it stays easy to read. On a phone it simply wraps;
   text-wrap: pretty keeps a lone word off the last line where supported. */
.post-ai-note {
  margin: 12px 0 0;
  max-width: 60ch;
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(217, 231, 244, 0.72);
  text-wrap: pretty;
}

.post-cover-wrap {
  max-width: 1008px;
  margin-top: -120px;
}

.post-cover {
  margin: 0;
}

.post-cover img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background: var(--ice-100);
}

/* ---------- The article layout ---------- */

/* The body is a grid of three named spans — content, wide, full — and every
   block sits in the content column unless it asks for more. Pictures that
   break out of the measure take the wide or full span instead of using
   viewport units, which would overshoot by the scrollbar's width on desktop
   and give the page a sideways wobble. The two bleed tracks shrink to
   nothing on a phone, where wide and content are the same thing. */
.post-layout {
  max-width: none;
  padding: 0;
}

.post-body {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--post-gutter), 1fr)
    [wide-start] minmax(0, var(--post-bleed))
    [content-start] min(var(--post-measure), calc(100% - 2 * var(--post-gutter)))
    [content-end] minmax(0, var(--post-bleed))
    [wide-end] minmax(var(--post-gutter), 1fr) [full-end];
  padding-top: 48px;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-900);
}

.post-body > * {
  grid-column: content;
  min-width: 0;
  /* Grid items don't collapse margins, so the rhythm is set once here and
     adjusted per block below rather than relying on top + bottom pairs. */
  margin: 0 0 1.6rem;
}

.post-body > :first-child {
  margin-top: 0;
}

.post-body > :last-child {
  margin-bottom: 0;
}

.post-body > h2 {
  font-size: clamp(1.55rem, 2.6vw, 1.95rem);
  margin-top: 1.4rem;
  margin-bottom: 1rem;
}

.post-body > h3 {
  font-size: 1.32rem;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}

/* Linked headings land below the sticky header rather than under it. */
.post-body > h2[id],
.post-body > h3[id] {
  scroll-margin-top: calc(var(--header-h) + 28px);
}

/* Running-text links only. The buttons in the article (the CTA, the button
   block) keep their white 700 label from style.css. */
.post-body a:not(.btn) {
  color: var(--blue-600);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(47, 134, 204, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s, color 0.15s;
}

.post-body a:not(.btn):hover {
  color: var(--navy-800);
  text-decoration-color: var(--orange-500);
}

.post-body b,
.post-body strong {
  color: var(--navy-800);
  font-weight: 700;
}

.post-body u {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Lists */
.post-list {
  padding-left: 1.5em;
}

.post-list li {
  margin-bottom: 0.55rem;
  padding-left: 0.2em;
}

.post-list li::marker {
  color: var(--orange-500);
  font-weight: 700;
}

/* Pull quote */
.post-quote {
  margin: 0.6rem 0 2.2rem;
  padding: 6px 0 6px 28px;
  border-left: 4px solid var(--orange-500);
}

.post-quote p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--navy-800);
  margin: 0;
}

.post-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-400);
}

.post-quote cite::before {
  content: "— ";
}

/* Figures: normal sits in the measure, wide reaches the container edges,
   full runs edge to edge with no frame of its own. */
.post-figure {
  margin: 0.8rem 0 2.4rem;
}

.post-figure a {
  display: block;
}

.post-figure img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: var(--ice-100);
}

.post-figure figcaption,
.post-gallery-item figcaption,
.post-compare figcaption,
.post-video figcaption,
.post-embed figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-400);
  text-align: center;
}

.post-figure--wide {
  grid-column: wide;
}

.post-figure--full {
  grid-column: full;
  margin-bottom: 2.6rem;
}

.post-figure--full img {
  border-radius: 0;
  box-shadow: none;
}

.post-figure--full figcaption {
  padding: 0 var(--post-gutter);
}

/* Gallery: a wide grid of equal tiles; the full picture opens in the lightbox. */
.post-gallery {
  grid-column: wide;
  display: grid;
  gap: 14px;
  margin: 0.8rem 0 2.4rem;
}

.post-gallery--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.post-gallery--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.post-gallery-item {
  margin: 0;
}

.post-gallery-item a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--ice-100);
  box-shadow: var(--shadow-md);
}

.post-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.post-gallery-item a:hover img {
  transform: scale(1.04);
}

.post-gallery-item figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
}

/* Before / after: both pictures fill the frame; the "after" one is clipped
   from the left to --pos, which blog.js moves with the invisible range input
   stretched over the whole frame. Without JS it stays a 50/50 split. */
.post-compare {
  margin: 0.8rem 0 2.4rem;
}

.post-compare-frame {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: var(--navy-900);
  user-select: none;
  -webkit-user-select: none;
}

.post-compare-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.post-compare-after {
  clip-path: inset(0 0 0 var(--pos));
}

/* The divider line and the round handle, both parked at --pos. */
.post-compare-frame::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  transform: translateX(-50%);
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(11, 27, 51, 0.15);
  pointer-events: none;
  z-index: 1;
}

.post-compare-frame::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2240' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  z-index: 1;
}

.post-compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  z-index: 2;
}

/* The range is invisible, so its keyboard focus is shown on the frame. */
.post-compare-frame:has(.post-compare-range:focus-visible) {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
}

.post-compare-label {
  position: absolute;
  top: 14px;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--white);
  background: rgba(11, 27, 51, 0.72);
  padding: 6px 12px;
  border-radius: 999px;
  pointer-events: none;
}

.post-compare-label--before {
  left: 14px;
}

.post-compare-label--after {
  right: 14px;
}

/* Video and embeds: a 16:9 frame that never jumps when the player loads. */
.post-video,
.post-embed {
  margin: 0.8rem 0 2.4rem;
}

.post-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: var(--navy-900);
}

.post-embed-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  background: var(--navy-900);
}

.post-embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Callouts: three tones, each with a small badge in the corner. */
.post-callout {
  position: relative;
  margin: 0.4rem 0 2rem;
  padding: 20px 24px 20px 60px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ice-200);
  background: var(--ice-100);
  font-size: 1.05rem;
}

.post-callout p {
  margin: 0;
}

.post-callout::before {
  content: "i";
  position: absolute;
  left: 20px;
  top: 21px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--white);
  background: var(--blue-600);
}

.post-callout--tip {
  background: #EDF8F0;
  border-color: #C6E9D0;
}

.post-callout--tip::before {
  content: "✓";
  background: #1E8E3E;
}

.post-callout--warning {
  background: #FFF4EC;
  border-color: #FFD9C2;
}

.post-callout--warning::before {
  content: "!";
  background: var(--orange-600);
}

/* The in-article quote card: navy, with the orange button. */
.post-cta {
  margin: 1rem 0 2.6rem;
  padding: 38px 40px;
  border-radius: 24px;
  text-align: center;
  color: var(--white);
  background:
    radial-gradient(600px 300px at 10% 120%, rgba(242, 106, 33, 0.28), transparent 55%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800));
  box-shadow: 0 24px 50px -24px rgba(11, 27, 51, 0.5);
}

.post-cta h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin: 0 0 10px;
}

.post-cta p {
  color: var(--ice-200);
  font-size: 1.05rem;
  margin: 0 0 24px;
}

.post-button {
  display: flex;
  margin: 0.4rem 0 2rem;
}

.post-button--left {
  justify-content: flex-start;
}

.post-button--center {
  justify-content: center;
}

/* A short orange rule rather than a grey line across the page: a pause,
   not a wall. */
.post-divider {
  width: 72px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--orange-500);
  margin: 1.4rem auto 3rem;
}

/* FAQ: the same card-per-question as the homepage, with a chevron that
   turns when the answer opens. */
.post-faq {
  display: grid;
  gap: 12px;
  margin: 0.8rem 0 2.4rem;
}

.post-faq-item {
  background: var(--white);
  border: 1px solid var(--ice-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 0 22px;
  overflow: hidden;
}

.post-faq-item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--navy-800);
  padding: 18px 48px 18px 0;
}

.post-faq-item summary::-webkit-details-marker {
  display: none;
}

.post-faq-item summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ice-100) url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2240' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  transition: transform 0.2s, background-color 0.2s;
}

.post-faq-item[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
  background-color: var(--ice-200);
}

.post-faq-answer {
  padding: 0 0 20px;
  color: var(--text-600);
  font-size: 1.02rem;
}

.post-faq-answer p {
  margin: 0 0 0.8em;
}

.post-faq-answer p:last-child {
  margin-bottom: 0;
}

/* ---------- Below the article ---------- */
.post-footer {
  max-width: calc(var(--post-measure) + 2 * var(--post-gutter));
  margin: 0 auto;
  padding: 40px var(--post-gutter) 72px;
}

.post-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 28px;
}

.post-tags a {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-600);
  background: var(--ice-100);
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}

.post-tags a:hover {
  background: var(--ice-200);
  color: var(--navy-800);
}

.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid var(--ice-200);
  border-bottom: 1px solid var(--ice-200);
  margin-bottom: 32px;
}

.post-share-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy-800);
  margin-right: 4px;
}

.post-share-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--ice-200);
  background: var(--white);
  color: var(--navy-800);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.post-share-btn .ic {
  width: 20px;
  height: 20px;
}

.post-share-btn:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
  transform: translateY(-2px);
}

/* The system share sheet exists on phones and some desktops; blog.js adds
   has-native-share when navigator.share is there, and the button appears. */
.post-share-btn--native {
  display: none;
}

.has-native-share .post-share-btn--native {
  display: grid;
}

.post-author {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--ice-50);
  border: 1px solid var(--ice-200);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 36px;
}

.post-author-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--orange-500);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  box-shadow: 0 6px 16px rgba(242, 106, 33, 0.35);
}

.post-author-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-400);
  margin: 0 0 2px;
}

.post-author-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy-800);
  margin: 0 0 6px;
}

.post-author-bio {
  color: var(--text-600);
  font-size: 0.95rem;
  margin: 0;
}

.post-author-bio a {
  font-weight: 600;
}

.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.post-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--ice-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  color: var(--navy-800);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.post-nav-link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-500);
}

.post-nav-link--next {
  text-align: right;
  align-items: flex-end;
}

.post-nav-link.is-empty {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.post-nav-kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange-600);
}

.post-nav-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
}

/* "Keep reading" */
.blog-related {
  background: var(--ice-50);
  padding: 80px 0 0;
}

.blog-related .section-head {
  margin-bottom: 36px;
}

/* ---------- Lightbox (built by blog.js) ---------- */
.blog-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px 84px;
  background: rgba(11, 27, 51, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

.blog-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.blog-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
}

.blog-lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 156px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.blog-lightbox-figure figcaption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 28px;
  text-align: center;
  color: var(--ice-200);
  font-size: 0.95rem;
}

.blog-lightbox-count {
  position: absolute;
  top: 24px;
  left: 24px;
  color: var(--ice-200);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 48px;
}

.blog-lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.blog-lightbox button:hover {
  background: var(--orange-500);
}

.blog-lightbox-close {
  top: 20px;
  right: 20px;
}

.blog-lightbox-prev,
.blog-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}

.blog-lightbox-prev {
  left: 16px;
}

.blog-lightbox-next {
  right: 16px;
}

body.has-lightbox {
  overflow: hidden;
}

/* ---------- Toast (built by blog.js) ---------- */
.blog-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 90;
  transform: translate(-50%, 16px);
  background: var(--navy-800);
  color: var(--white);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.blog-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------- Focus ---------- */
.blog-pill:focus-visible,
.blog-page-step:focus-visible,
.blog-page-num:focus-visible,
.post-share-btn:focus-visible,
.post-tags a:focus-visible,
.post-nav-link:focus-visible,
.post-gallery-item a:focus-visible,
.blog-lightbox button:focus-visible,
.blog-search .btn:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
}

/* The card's link is stretched over the card, so its focus ring is drawn
   around the card rather than around the title text. */
.blog-card:has(.blog-card-title a:focus-visible) {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-card-media img,
  .blog-pill,
  .post-gallery-item img,
  .post-nav-link,
  .post-share-btn,
  .blog-lightbox,
  .blog-toast,
  .post-faq-item summary::after {
    transition: none;
  }

  .blog-card:hover,
  .blog-pill:hover,
  a.post-nav-link:hover {
    transform: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .blog-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 52px;
    padding-bottom: 56px;
  }

  .blog-hero-mark {
    display: none;
  }

  .blog-featured {
    grid-template-columns: 1fr;
  }

  .blog-featured-media {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .blog-featured-body {
    padding: 30px 32px 32px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-cta-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 44px 36px;
  }

  .blog-cta-card p {
    margin: 0 auto;
  }

  .blog-cta-actions {
    justify-content: center;
  }

  .post-hero--cover .post-hero-inner {
    padding-bottom: 140px;
  }

  .post-cover-wrap {
    margin-top: -96px;
  }
}

@media (max-width: 760px) {
  .blog-hero-inner {
    padding-top: 40px;
    padding-bottom: 44px;
  }

  .blog-hero h1 {
    font-size: 1.85rem;
  }

  .blog-hero-lead {
    font-size: 1.02rem;
  }

  .blog-search {
    margin-top: 22px;
  }

  .blog-search input {
    padding: 11px 16px;
  }

  .blog-search .btn {
    padding-left: 1.2em;
    padding-right: 1.2em;
  }

  .blog-pills-inner {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .blog-featured-wrap {
    padding-top: 28px;
  }

  .blog-featured-body {
    padding: 22px 20px 24px;
    gap: 12px;
  }

  .blog-featured-excerpt {
    font-size: 0.98rem;
  }

  .blog-list {
    padding: 28px 0 24px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .blog-pagination {
    justify-content: center;
    margin-top: 32px;
  }

  .blog-cta {
    padding: 36px 0 72px;
  }

  .blog-cta-card {
    padding: 32px 22px;
    border-radius: 20px;
  }

  .blog-cta-actions .btn {
    width: 100%;
  }

  .post-hero-inner {
    padding-top: 36px;
    padding-bottom: 44px;
  }

  .post-hero--cover .post-hero-inner {
    padding-bottom: 92px;
  }

  .post-title {
    font-size: 1.75rem;
    margin: 10px 0 16px;
  }

  .post-cover-wrap {
    margin-top: -56px;
  }

  .post-cover img {
    aspect-ratio: 16 / 10;
    border-radius: 14px;
  }

  .post-body {
    padding-top: 32px;
    font-size: 1.05rem;
    line-height: 1.68;
  }

  .post-body > h2 {
    font-size: 1.45rem;
  }

  .post-body > h3 {
    font-size: 1.2rem;
  }

  .post-figure img,
  .post-compare-frame,
  .post-video video,
  .post-embed-frame {
    border-radius: 14px;
  }

  .post-quote {
    padding-left: 20px;
  }

  .post-quote p {
    font-size: 1.12rem;
  }

  /* Three tiles across a phone are postage stamps; two is a gallery. */
  .post-gallery--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-gallery {
    gap: 10px;
  }

  .post-compare-frame::after {
    width: 40px;
    height: 40px;
    background-size: 20px 20px;
  }

  .post-compare-label {
    top: 10px;
    font-size: 0.68rem;
    padding: 5px 10px;
  }

  .post-compare-label--before {
    left: 10px;
  }

  .post-compare-label--after {
    right: 10px;
  }

  .post-callout {
    padding: 18px 18px 18px 54px;
    font-size: 1rem;
  }

  .post-callout::before {
    left: 16px;
    top: 19px;
  }

  .post-cta {
    padding: 30px 22px;
    border-radius: 20px;
  }

  .post-cta h3 {
    font-size: 1.3rem;
  }

  .post-cta .btn,
  .post-button .btn {
    width: 100%;
  }

  .post-faq-item {
    padding: 0 18px;
  }

  .post-faq-item summary {
    font-size: 0.98rem;
    padding-right: 42px;
  }

  .post-footer {
    padding-top: 28px;
    padding-bottom: 56px;
  }

  .post-author {
    gap: 14px;
    padding: 20px 18px;
  }

  .post-author-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .post-nav {
    grid-template-columns: 1fr;
  }

  .post-nav-link.is-empty {
    display: none;
  }

  .blog-related {
    padding-top: 56px;
  }

  .blog-lightbox {
    padding: 72px 12px 84px;
  }

  .blog-lightbox-prev {
    left: 8px;
  }

  .blog-lightbox-next {
    right: 8px;
  }

  /* The sticky Call / Free Quote bar owns the bottom of a phone screen. */
  .blog-toast {
    bottom: calc(74px + 16px + env(safe-area-inset-bottom));
  }
}

/* ---------- Print ---------- */
@media print {
  .topbar,
  .header,
  .footer,
  .mobile-cta,
  .post-progress,
  .post-preview-ribbon,
  .blog-back,
  .blog-pills,
  .blog-search,
  .post-share,
  .post-nav,
  .post-cta,
  .post-button,
  .blog-related,
  .blog-cta,
  .blog-lightbox,
  .blog-toast {
    display: none !important;
  }

  .post-hero,
  .blog-hero {
    background: none;
    color: #000;
  }

  .post-title,
  .blog-hero h1 {
    color: #000;
  }

  .post-hero .blog-meta,
  .post-hero .blog-author,
  .blog-hero-lead {
    color: #444;
  }

  .post-ai-note {
    color: #555;
  }

  .post-hero--cover .post-hero-inner {
    padding-bottom: 24px;
  }

  .post-cover-wrap {
    margin-top: 0;
  }

  .post-cover img,
  .post-figure img {
    box-shadow: none;
  }

  .post-body {
    font-size: 11pt;
    line-height: 1.55;
    color: #000;
  }

  .post-body a {
    color: #000;
  }

  /* Links are worthless on paper without their address. */
  .post-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }

  .post-figure,
  .post-gallery-item,
  .post-callout,
  .post-faq-item,
  .post-quote {
    break-inside: avoid;
  }

  .post-faq-item summary::after {
    display: none;
  }

  /* Best effort: some browsers honour this and print the closed answers. */
  .post-faq-item:not([open]) .post-faq-answer {
    display: block !important;
  }
}