/* ==========================================================================
   single-article.css — single-post .single-entry--article styling
   Concatenated 2026-05-12 css-master refactor from four main.css sections:
     - Article hero — single post articles only
     - Single article — body typography, headings, code, blockquotes, author bio
     - Single article — external links, image captions, lead paragraph, back-to-top
     - Single article — mobile TOC, callout shortcode, reading-mode controls
   Conditionally enqueued via inc/setup.php on is_singular('post').
   .single-entry--article class is applied by single.php when $is_post_article
   is true; this file only matters when that class is present.
   ========================================================================== */

/* ============================================================
   Article hero — single post articles only.
   Atmospheric full-width hero above the 66/33 layout, mirrors
   the homepage / archive design system.
   ============================================================ */

.single-entry--article > .section-heading,
.single-entry--article > .single-featured-image {
  display: none;
}



/* --- Single: sidebar TOC list (consolidated 2026-05-12) ----------------
 *
 * Single rule set for the TOC list/items inside .single-service-toc-card.
 * The previous "refinements" block conflicted with an earlier set further
 * up: hover/active had both fill-pill backgrounds AND left-rules firing
 * simultaneously. This consolidation drops the fill, keeps the left rule,
 * and shifts the active treatment to --color-gold-text + --color-gold left
 * rule so it matches the gold-accent language used by the offer card and
 * other recently-rebuilt sidebar surfaces.
 */
.single-sidebar-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-sidebar-toc-item {
  margin: 0;
  line-height: 1.35;
  position: relative;
}

.single-sidebar-toc-item a {
  display: flex;
  align-items: center;
  padding: 0.4rem 0 0.4rem 0.85rem;
  min-height: 44px;
  font-size: 0.9rem;
  color: var(--color-muted);
  text-decoration: none;
  background: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  margin-left: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.single-sidebar-toc-item a:hover,
.single-sidebar-toc-item a:focus-visible {
  background: none;
  color: var(--color-text);
  border-left-color: var(--color-border-strong);
}

.single-sidebar-toc-item.is-active > a,
.single-sidebar-toc-item a.is-active,
.single-sidebar-toc-item a[aria-current="location"] {
  background: none;
  color: var(--color-gold-text);
  border-left-color: var(--color-gold);
  font-weight: 500;
}

.single-sidebar-toc-item--level-3 a {
  padding-left: 1.6rem;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--color-muted) 85%, transparent);
}


/* --- Single: share button pills ------------------------------------------ */
.single-post-share { padding: 0; }

.single-post-share h2,
.single-post-share h3 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.85rem;
}

.single-post-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.single-post-share__link:hover,
.single-post-share__link:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(18, 52, 86, 0.12);
}

.single-post-share__link svg {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
}

.single-post-share__link.is-copied {
  border-color: #1ea672;
  color: #0f6e4a;
  background: rgba(30, 166, 114, 0.08);
}

.single-post-share__label {
  white-space: nowrap;
}

.single-post-engagement {
  padding: 1rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(18, 52, 86, 0.18);
  background:
    radial-gradient(circle at 100% -15%, rgba(226, 176, 74, 0.2), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.single-post-engagement__eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.single-post-engagement h2 {
  margin: 0 0 0.4rem;
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--color-text);
}

.single-post-engagement__lead {
  margin: 0 0 0.9rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-muted);
}











.single-mobile-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.single-mobile-toc-item {
  margin: 0;
}

.single-mobile-toc-item a {
  display: block;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(18, 52, 86, 0.14);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
}

.single-mobile-toc-item--level-3 a { padding-left: 1.2rem; }



.single-mobile-toc-item a:hover,
.single-mobile-toc-item a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.single-sidebar-resource-group {
  border-top: 1px solid var(--color-border);
}

.single-sidebar-resource-group + .single-sidebar-resource-group {
  margin-top: 0.35rem;
}

.single-sidebar-resource-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
}

.single-sidebar-resource-group summary::-webkit-details-marker {
  display: none;
}

.single-sidebar-resource-group summary::after {
  content: "\203A";
  font-size: 1.15rem;
  color: var(--color-accent);
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}

.single-sidebar-resource-group[open] summary::after {
  transform: rotate(90deg);
}

.single-sidebar-resource-group > .single-sidebar-resource-list,
.single-sidebar-resource-group > .sidebar-events-list,
.single-sidebar-resource-group > p {
  margin-bottom: 0.9rem;
}

@media (max-width: 860px) {
  .single-article-mobile-companion {
    display: block;
    position: sticky;
    top: 76px;
    z-index: 12;
    margin: 0 0 1rem;
  }

  .single-article-mobile-companion__inner {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid rgba(18, 52, 86, 0.16);
    border-radius: 1rem;
    background: rgba(247, 251, 255, 0.96);
    box-shadow: 0 12px 28px rgba(18, 52, 86, 0.1);
    backdrop-filter: blur(12px);
  }

  .single-article-mobile-companion__panel {
    border: 1px solid rgba(18, 52, 86, 0.14);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
  }

  .single-article-mobile-companion__panel summary {
    list-style: none;
    display: grid;
    gap: 0.18rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
  }

  .single-article-mobile-companion__panel summary::-webkit-details-marker {
    display: none;
  }

  .single-article-mobile-companion__eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .single-article-mobile-companion__title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
  }

  .single-article-mobile-companion__meta {
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--color-muted);
  }

  .single-article-mobile-companion__panel .single-mobile-toc-list,
  .single-article-mobile-companion__panel .single-post-share__list--mobile,
  .single-article-mobile-companion__rating-action {
    margin: 0;
    padding: 0 0.85rem 0.85rem;
  }

  .single-post-share__list--mobile {
    gap: 0.55rem;
  }

  .single-article-mobile-companion__rating-action {
    padding-top: 0.15rem;
  }

  .single-service-sidebar {
    gap: 1rem;
  }
}

/* --- Article Guide: mobile-collapse / desktop-force-open -----------------
 *
 * On < 860px the guide <details> has no `open` attribute (removed from PHP),
 * so it defaults closed. The summary row shows a chevron that rotates 90deg
 * when the panel is open. Chevron rotation is a CSS transition guarded by
 * prefers-reduced-motion so it never fires for users who have requested
 * reduced motion.
 *
 * On >= 860px the list content is forced visible regardless of the `open`
 * attribute so the card always shows its full TOC on wider viewports — no JS,
 * no `open` attribute roundtrip needed.
 * ----------------------------------------------------------------------- */

/* Chevron on the guide panel summary only */
@media (max-width: 859px) {
  .single-article-mobile-companion__panel--guide summary {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: center;
  }

  .single-article-mobile-companion__panel--guide summary::after {
    content: "\203A"; /* › */
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    font-size: 1.4rem;
    color: var(--color-accent);
    transform: rotate(0deg);
    transition: transform 0.18s ease;
    padding-left: 0.5rem;
  }

  .single-article-mobile-companion__panel--guide[open] summary::after {
    transform: rotate(90deg);
  }
}

@media (max-width: 859px) and (prefers-reduced-motion: reduce) {
  .single-article-mobile-companion__panel--guide summary::after {
    transition: none;
  }
}

/* Force guide TOC visible on desktop regardless of open attribute */
@media (min-width: 860px) {
  .single-article-mobile-companion__panel--guide > :not(summary) {
    display: block;
  }
}

/* --- Single: bottom CTA block -------------------------------------------- */
.thisismyurl-service-bottom-cta {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--color-text);
  color: #ffffff;
  border-radius: var(--radius-md);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.thisismyurl-service-bottom-cta::before {
  /* Designer pass 2026-05-12: replaced the Tailwind-default indigo glow with
   * a quiet single-side gold wash. Indigo wasn't in the brand palette — it
   * was a starter-component leftover. Gold at 10% sits inside the system. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 320px at 85% 50%, rgba(226, 176, 74, 0.10), transparent 65%);
  pointer-events: none;
}

.thisismyurl-service-bottom-cta > * { position: relative; }

.thisismyurl-service-bottom-cta .service-next-step__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  /* Gold on dark navy reads ~8:1 — use --color-gold directly per tokens.css
   * usage note (the AA-text variant --color-gold-text is reserved for light
   * surfaces). */
  color: var(--color-gold);
}

.thisismyurl-service-bottom-cta h2 {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 1.85rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.7rem;
  color: #ffffff;
}

.thisismyurl-service-bottom-cta p {
  margin: 0 auto 1rem;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
}

.thisismyurl-service-bottom-cta .service-next-step__expectation {
  margin: 0.25rem auto 1.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.thisismyurl-service-bottom-cta .service-next-step__expectation-sep {
  display: inline-block;
  padding: 0 0.35rem;
  color: var(--color-gold);
}

.thisismyurl-service-bottom-cta .button {
  background: var(--color-gold);
  color: var(--color-text);
  border-color: var(--color-gold);
}

.thisismyurl-service-bottom-cta .button:hover,
.thisismyurl-service-bottom-cta .button:focus-visible {
  background: color-mix(in srgb, var(--color-gold) 88%, #ffffff);
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-gold) 88%, #ffffff);
}

/* About page – TOC + FAQ */











/* ==========================================================================
   Single article — body typography, headings, code, blockquotes, author bio
   ========================================================================== */

/* --- Single post: last-reviewed badge + entry-reviewed byline --- */

.single-last-reviewed {
  margin-top: 2.5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid #d7e4f3;
  border-radius: var(--radius-md, 12px);
  background: #f9fcff;
}

.single-last-reviewed h2 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
}

.single-last-reviewed p {
  margin: 0;
}

/* Entry reviewed byline — meta text showing reviewer and date */
.entry-reviewed-line {
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.entry-reviewed {
  display: inline;
}

.entry-reviewed__label,
.entry-reviewed__on {
  font-weight: 600;
  color: var(--color-muted);
}

.entry-reviewed__name {
  color: var(--color-text-strong);
  text-decoration: none;
  border-bottom: 1px dotted rgba(18, 52, 86, 0.3);
  font-weight: 600;
}

.entry-reviewed__name:hover,
.entry-reviewed__name:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.entry-reviewed__date {
  font-weight: 600;
  color: var(--color-text-strong);
}

/* Article body reading column — keep lines under ~70ch for readability */
.single-entry--article .entry-content {
  max-width: 100%;
}

.single-entry--article .entry-content > :where(p, ul, ol, blockquote, .wp-block-quote, .wp-block-pullquote, pre, .wp-block-code, .wp-block-preformatted, .callout) {
  max-width: 68ch;
}

.single-entry--article .entry-content > :where(.wp-block-table, figure, .wp-block-image, .single-featured-image, .single-content-feedback, .author-bio) {
  max-width: 100%;
}

.single-entry--article .entry-content > :where(p, ul, ol, blockquote, .wp-block-quote, .wp-block-pullquote, pre, .wp-block-code, .wp-block-preformatted, .callout, .wp-block-table, figure, .wp-block-image) + :where(p, ul, ol, blockquote, .wp-block-quote, .wp-block-pullquote, pre, .wp-block-code, .wp-block-preformatted, .callout, .wp-block-table, figure, .wp-block-image) {
  margin-top: 1.15rem;
}

/* Scroll-margin so anchored headings clear the sticky dark header */
.single-entry--article :where(h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 6rem;
}

/* Heading typography polish in article body */
.single-entry--article :where(h2, h3, h4) {
  position: relative;
  font-family: "Sora", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}









.single-entry--article :where(h2, h3, h4)[id]::before {
  content: "#";
  position: absolute;
  left: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.85em;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.single-entry--article :where(h2, h3, h4)[id]:hover::before, .single-entry--article :where(h2, h3, h4)[id]:focus-within::before {
  opacity: 1;
}

@media (max-width: 760px) {
  .single-entry--article :where(h2, h3, h4)[id]::before {
    display: none;
  }
}

/* Body paragraph rhythm */
.single-entry--article .entry-content p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--color-text);
}

.single-entry--article .entry-content > p:first-of-type {
  max-width: 60ch;
  font-size: clamp(1.14rem, 1.04rem + 0.45vw, 1.28rem);
  line-height: 1.78;
  color: var(--color-text-strong);
  letter-spacing: -0.01em;
  margin-top: 0;
}

/* Inline code + code blocks */
.single-entry--article :not(pre) > code,
.single-entry--article :not(pre) > kbd {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
  font-size: 0.88em;
  background: rgba(18, 52, 86, 0.08);
  color: var(--color-accent);
  padding: 0.12em 0.45em;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}





/* Blockquote polish — left rule, generous space, italic emphasis */
.single-entry--article blockquote,
.single-entry--article .wp-block-quote,
.single-entry--article .wp-block-pullquote {
  margin: 1.85rem 0;
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  background: transparent;
  color: var(--color-text);
  font-size: 1.1rem;
  line-height: 1.55;
  font-style: italic;
}

.single-entry--article blockquote :where(p),
.single-entry--article .wp-block-quote :where(p),
.single-entry--article .wp-block-pullquote :where(p) {
  margin: 0 0 0.6rem;
}

.single-entry--article blockquote :where(cite),
.single-entry--article .wp-block-quote :where(cite),
.single-entry--article .wp-block-pullquote :where(cite) {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
}

.single-entry--article .wp-block-pullquote {
  border-left: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 1.5rem 0;
  margin: 2.5rem 0;
  text-align: left;
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

/* Lists tighter */
.single-entry--article .entry-content :where(ul, ol) {
  margin: 1.1rem 0 1.35rem;
  padding-left: 1.3rem;
}

.single-entry--article .entry-content :where(ul, ol) li {
  font-size: 1.01rem;
  line-height: 1.65;
  margin: 0.35rem 0;
}

/* Tables */
.single-entry--article :where(table, .wp-block-table table) {
  border-collapse: collapse;
  width: 100%;
  margin: 1.75rem 0;
  font-size: 0.95rem;
  border: 1px solid var(--color-border);
}

/* Keep Gutenberg table wrappers full-width in service/article content. */
.single-entry--article .entry-content .wp-block-table {
  width: 100%;
  max-width: 100%;
}

.single-entry--article .entry-content .wp-block-table table {
  width: 100% !important;
  min-width: 100%;
}

.single-entry--article :where(table th) {
  background: #fafbfc;
  font-family: "Sora", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.single-entry--article :where(table td) {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.single-entry--article :where(table tr:last-child td) {
  border-bottom: 0;
}

/* Inline links in body — accent underline */
.single-entry--article .entry-content a:not(.button):not([class*="wp-block"]) {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.single-entry--article .entry-content a:not(.button):not([class*="wp-block"]):hover {
  color: var(--color-accent-strong);
}

/* --- Author bio prominence (post articles) --- */
.single-entry--article .author-bio {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Single article — external links, image captions, lead paragraph, back-to-top
   ========================================================================== */

/* External link indicator — small arrow on outbound links in the
   article body. Helps signal context and matches modern editorial
   pages. Skip internal links and links inside specific block types. */
.single-entry--article .entry-content a[href*="://"]:not([href*="thisismyurl.com"]):not([href*="thisismyurldev"]):not(.button):not([class*="wp-block"])::after {
  content: " ↗";
  display: inline-block;
  font-size: 0.78em;
  vertical-align: baseline;
  color: var(--color-muted);
  transition: color 0.15s ease, transform 0.15s ease;
}

.single-entry--article .entry-content a[href*="://"]:not([href*="thisismyurl.com"]):not([href*="thisismyurldev"]):not(.button):not([class*="wp-block"]):hover::after {
  color: var(--color-accent);
  transform: translate(2px, -2px);
}

/* Image captions */
.single-entry--article .entry-content :where(figcaption, .wp-caption-text) {
  margin-top: 0.6rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-muted);
  text-align: center;
  letter-spacing: 0.005em;
  font-style: italic;
}

.single-entry--article .entry-content :where(figure, .wp-block-image) {
  margin: 1.85rem 0;
}

.single-entry--article .entry-content :where(figure, .wp-block-image) :where(img) {
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 760px) {
  

  

  .single-entry--article .entry-content > p:first-of-type {
    max-width: 100%;
    font-size: 1.08rem;
    line-height: 1.72;
  }

  .single-entry--article .entry-content :where(ul, ol) {
    padding-left: 1.15rem;
  }
}

/* --- Floating back-to-top button --- */
.back-to-top {
  position: fixed;
  /* safe-area-inset-bottom keeps the button above the iOS home-indicator on
     notched devices. max() falls back to 1.5rem on devices without safe areas. */
  bottom: max(1.5rem, calc(1rem + env(safe-area-inset-bottom)));
  right: 1.5rem;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: #ffffff;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  box-shadow: 0 8px 22px rgba(11, 23, 38, 0.18);
  pointer-events: none;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--color-accent);
}

.back-to-top svg {
  display: block;
}

@media (max-width: 1100px) {
  .back-to-top {
    /* Preserve safe-area-inset-bottom on the mobile override so the button
       clears the iOS home-indicator zone (~34px) on notched devices. */
    bottom: max(1rem, calc(0.5rem + env(safe-area-inset-bottom)));
    right: 1rem;
  }
}

/* Subtle reading-progress fill at the bottom of the article hero
   that mirrors the global scroll progress for in-page context */




/* Legal/policy pages – TOC, last-updated stamp, contact card */




/* scroll-behavior: smooth is set on the global html rule near the top of this file. */
:target { scroll-margin-top: 1.2rem; }

/* Archive jump-nav, byline, last-updated, service areas, compare callout */
.archive-jump-nav {
  margin: 1.2rem 0 0;
  position: sticky;
  top: var(--site-header-offset, 84px);
  z-index: 20;
  background: rgba(250, 251, 252, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border, #e5e9ee);
}
.archive-jump-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  font-size: 0.92rem;
}
.archive-jump-nav a {
  color: var(--color-accent, var(--color-accent));
  text-decoration: none;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border, #e5e9ee);
  border-radius: var(--radius-pill);
}
.archive-jump-nav a:hover,
.archive-jump-nav a:focus-visible {
  background: var(--color-accent, var(--color-accent));
  color: #fff;
}

/* Pill treatment for archive jump-nav. Was scoped to .archive-jump-nav--training
   only; generalised 2026-05-11 to apply across every archive that emits the
   Browse all + Read the FAQ pair (Work, Services, Training, Insights, Case
   Studies). The --training alias is preserved so any cached HTML still hits
   the same rules. Live-review parity request: "make the other 4 pages look
   the same" as Training. */
.archive-jump-nav--training,
.archive-jump-nav--pills {
  border-bottom-color: var(--color-accent);
}

.archive-jump-nav--training .archive-jump-nav__link--primary,
.archive-jump-nav--pills .archive-jump-nav__link--primary {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(11, 31, 58, 0.14);
}

.archive-jump-nav--training .archive-jump-nav__link--primary:hover,
.archive-jump-nav--training .archive-jump-nav__link--primary:focus-visible,
.archive-jump-nav--pills .archive-jump-nav__link--primary:hover,
.archive-jump-nav--pills .archive-jump-nav__link--primary:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-gold) 88%, black);
  border-color: color-mix(in srgb, var(--color-gold) 88%, black);
  color: #fff;
}

.archive-jump-nav--training .archive-jump-nav__link--secondary,
.archive-jump-nav--pills .archive-jump-nav__link--secondary {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(18, 52, 86, 0.24);
  color: var(--color-accent);
  font-weight: 600;
}

.archive-jump-nav--training .archive-jump-nav__link--secondary:hover,
.archive-jump-nav--training .archive-jump-nav__link--secondary:focus-visible,
.archive-jump-nav--pills .archive-jump-nav__link--secondary:hover,
.archive-jump-nav--pills .archive-jump-nav__link--secondary:focus-visible {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

@supports (backdrop-filter: blur(4px)) {
  .archive-jump-nav--training .archive-jump-nav__link--secondary,
  .archive-jump-nav--pills .archive-jump-nav__link--secondary {
    backdrop-filter: blur(4px);
  }
}


.archive-compare-callout {
  margin-block: clamp(2rem, 4vw, 3rem);
  padding: 0;
}

/* ==========================================================================
   Single article — mobile TOC, callout shortcode, reading-mode controls
   ========================================================================== */

/* Author avatar in hero byline */




/* Callout blocks */
.callout {
  margin: 1.85rem 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fafbfc;
  border-left-width: 4px;
}



/* --- Notice / inline status blocks --------------------------------------- */
/* Use for short inline states: stub copy, incomplete sections, warnings. */





/* Reading-mode controls (floating Aa button + panel) */



/* panel is shown/hidden via the hidden attribute (JS-managed) */

/* Reading-mode themes — token rewrites at the attribute scope.
   base.css's body { background: var(--color-bg); color: var(--color-text) }
   picks these up automatically; descendants inherit. The explicit colour
   override below is only for entry-content prose elements that set their
   own colour elsewhere and can't reach the new token via inheritance. */
:root[data-reading-theme="sepia"] {
  --color-bg: #f4ecd8;
  --color-text: #3a2f1f;
}
:root[data-reading-theme="dark"] {
  --color-bg: #0d1320;
  --color-text: #e6ebf2;
  --reading-hr-color: rgba(255, 255, 255, 0.12);
}

:root:is([data-reading-theme="sepia"], [data-reading-theme="dark"]) .single-entry--article .entry-content :where(h2, h3, h4, p, li) {
  color: var(--color-text);
}

:root[data-reading-theme="dark"] .single-entry--article .entry-content h2 {
  border-top-color: var(--reading-hr-color);
}

/* Font-size scaling — explicit values, not tokenized: only 2 variants. */
:root[data-reading-size="lg"] .single-entry--article .entry-content { font-size: 1.08rem; }
:root[data-reading-size="lg"] .single-entry--article .entry-content p { font-size: 1.1rem; line-height: 1.75; }
:root[data-reading-size="xl"] .single-entry--article .entry-content { font-size: 1.18rem; }
:root[data-reading-size="xl"] .single-entry--article .entry-content p { font-size: 1.2rem; line-height: 1.8; }

/* Sort facet nav above archive grid */

/* Reading-time pill on blog cards */

/* Hero display H1 — confident expert positioning */
.hero h1,
.archive-hero__header h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* Final-CTA: amplified gold treatment for the page closer.
   Specificity matches existing body.home overrides (line 4577+) so the gold
   primary button wins on the homepage too. */
body .home-cta.footer-contextual-cta,
body.home .home-cta.footer-contextual-cta {
  background: linear-gradient(135deg, var(--color-accent) 0%, #1a4f7e 100%);
  border-top: 4px solid var(--color-gold);
  position: relative;
  overflow: hidden;
}
body .home-cta.footer-contextual-cta::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 180px;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, rgba(226, 176, 74, 0.08) 100%);
  pointer-events: none;
}
body .home-cta.footer-contextual-cta h2,
body.home .home-cta.footer-contextual-cta h2 {
  color: #fff;
}
body .home-cta.footer-contextual-cta p,
body.home .home-cta.footer-contextual-cta p {
  color: rgba(255,255,255,0.88);
}
body .home-cta.footer-contextual-cta .button,
body.home .home-cta.footer-contextual-cta .button {
  background: var(--color-gold);
  color: var(--color-accent);
  border-color: var(--color-gold);
}
body .home-cta.footer-contextual-cta .button:hover,
body .home-cta.footer-contextual-cta .button:focus-visible,
body.home .home-cta.footer-contextual-cta .button:hover,
body.home .home-cta.footer-contextual-cta .button:focus-visible {
  background: #f0c267;
  border-color: #f0c267;
  color: var(--color-accent);
}
body .home-cta.footer-contextual-cta .button-outline,
body.home .home-cta.footer-contextual-cta .button-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
body .home-cta.footer-contextual-cta .button-outline:hover,
body .home-cta.footer-contextual-cta .button-outline:focus-visible,
body.home .home-cta.footer-contextual-cta .button-outline:hover,
body.home .home-cta.footer-contextual-cta .button-outline:focus-visible {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}

/* Active sort facet — filled gold for clear primacy */

/* Gold section divider — paired band between hero and proof sections */


/* Hero audit panel: honest framing for the sample-snapshot note */


/* "How to choose" details progressive disclosure */







/* Location hub pages */












/* Location taxonomy: suppress card thumbnails.
   Decision: "no cards have images" for location hub grids — service cards
   don't universally have feature images, so mixing image/no-image produces
   severe visual weight imbalance. Hiding thumbnails site-wide within the
   location taxonomy gives a uniform, text-led card rhythm. */




/* Location taxonomy: restore canonical section-wrap padding on the area-map
   band, which inherits .related-section { padding-top: 1rem } and would
   otherwise crash against the header. Every band here is a primary content
   section — not a related/sidebar appendage — so the full 2.2rem token applies. */








/* Location hero landmark image */




/* Single testimonial — built to the per-type 100-standard */