/* =============================================================
   Ashstep Surveys — Service detail pages (V4 style)
   New components for long-form service content, built on the same
   tokens/visual rules as V4 (concept-d.css + home.css + home-v4.css,
   all loaded before this). Adds: checklist grid, property-type
   chips, mid-page callout strip, and an FAQ accordion.
   ============================================================= */

/* ---------- checklist grid (e.g. "the report can cover", benefits) ---------- */
.checks { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
/* same family as body copy, lighter weight so it reads less heavy */
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; color: var(--grey-600); }
.checks__icon { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; background: var(--brand-blue); color: #fff; margin-top: 2px; }
.checks__icon svg { width: 14px; height: 14px; }
@media (min-width: 620px) { .checks { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } }
@media (min-width: 980px) { .checks--3 { grid-template-columns: repeat(3, 1fr); } }

/* checklist contained as a panel so it reads like a table/checklist */
.checks-panel { background: var(--surface); border: 1px solid var(--grey-200); border-bottom: 3px solid var(--brand-blue); padding: var(--space-6); margin-top: var(--space-6); }
.checks-panel__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin: 0; }
.checks-panel .checks { margin-top: var(--space-5); }
/* divide rows on wider screens for a table feel */
@media (min-width: 620px) { .checks-panel .checks li { padding-bottom: var(--space-4); border-bottom: 1px solid var(--grey-200); } }

/* ---------- property-type chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink); background: var(--surface); border: 1px solid var(--grey-300); padding: .55rem 1rem; }
.chip::before { content: ""; width: 8px; height: 8px; background: var(--brand-blue); flex: 0 0 auto; }

/* ---------- mid-page callout strip (compact CTA) ---------- */
.callout { background: var(--brand-blue); color: #fff; padding: var(--space-7) var(--space-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.callout__text { max-width: 60ch; }
.callout__text h2 { color: #fff; margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.callout__text p { color: rgba(255,255,255,.9); margin: 0; }
.callout .btn--secondary { color: #fff; border-color: #fff; }
.callout .btn--secondary::after { background: #fff; }
.callout .btn--secondary:hover { color: var(--brand-blue); border-color: #fff; }

/* ---------- FAQ accordion (native <details>) ---------- */
.faq { display: grid; gap: var(--space-3); margin-top: var(--space-6); max-width: 900px; }
.faq__item { border: 1px solid var(--grey-200); border-bottom: 3px solid var(--brand-blue); background: var(--surface); }
.faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.faq__q::-webkit-details-marker { display: none; }
.faq__item[open] .faq__q { color: var(--brand-blue); }
.faq__icon { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1; color: var(--brand-blue); transition: transform .2s var(--ease); }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 var(--space-5) var(--space-5); }
.faq__a p { margin: 0; }

/* keep service-detail intro images cropped to a consistent frame */
.intro-split__media .media { aspect-ratio: 4 / 3; object-fit: cover; }
/* opt out of the crop where the original proportions should be kept */
.intro-split__media .media--natural { aspect-ratio: auto; object-fit: contain; }

/* ---------- dark gradient section (matches the homepage stats box) ---------- */
.sec-gradient { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.sec-gradient::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% -20%, rgba(51,64,255,.4), transparent 60%); }
.sec-gradient > .container { position: relative; z-index: 1; }
.sec-gradient .section-head__title, .sec-gradient h2 { color: #fff; }
.sec-gradient .lede, .sec-gradient p { color: rgba(255,255,255,.85); }
.sec-gradient .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.sec-gradient .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.sec-gradient .chip::before { background: #aeb4ff; }

/* ---------- FAQ split: accordion at 50% with an image alongside ---------- */
.faq-split { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: stretch; }
.faq-split .faq { margin-top: 0; max-width: none; }
.faq-split__media { position: relative; line-height: 0; }
.faq-split__media .media { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
/* blue diagonal accent (matches the other V4 images) */
.faq-split__media::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: 4; pointer-events: none; width: clamp(110px, 34%, 200px); height: clamp(40px, 16%, 78px); background: var(--brand-blue); clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%); }
@media (min-width: 900px) { .faq-split { grid-template-columns: 1fr 1fr; } }

/* ---------- categorised defect grid (cards with a heading + bulleted list) ----------
   Used where content groups findings under sub-headings, e.g. "What Can a Drone
   Roof Survey Identify?". Same card frame as .why-card, but houses a short list. */
.deflist-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-6); }
.deflist-card { padding: var(--space-5); border: 1px solid var(--grey-200); border-top: 3px solid var(--brand-blue); border-radius: var(--radius); background: var(--surface); }
.deflist-card__num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--brand-blue); }
.deflist-card__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.1rem; margin: var(--space-2) 0 var(--space-4); }
.deflist-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.deflist-card__list li { position: relative; padding-left: var(--space-5); font-family: var(--font-body); font-size: var(--fs-small); color: var(--grey-600); }
.deflist-card__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; background: var(--brand-blue); }
/* prose variant for cards that carry a description rather than a bullet list */
.deflist-card__text { margin: 0; font-family: var(--font-body); font-size: var(--fs-small); color: var(--grey-600); }
@media (min-width: 620px) { .deflist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .deflist-grid { grid-template-columns: repeat(3, 1fr); } }
/* on the dark gradient section the card stays a light surface for legibility */
.sec-gradient .deflist-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.sec-gradient .deflist-card__title { color: #fff; }
.sec-gradient .deflist-card__list li { color: rgba(255,255,255,.85); }
.sec-gradient .deflist-card__list li::before { background: #aeb4ff; }

/* ---------- three-column CTA (parallel calls to action) ----------
   A row of equal-weight action cards. Each card is a link: reads as a card on
   the section background, fills brand-blue on hover. */
.cta-tri { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-top: var(--space-7); }
.cta-tri__card { display: flex; flex-direction: column; gap: var(--space-3); min-height: 190px; padding: var(--space-6); background: var(--brand-blue); border: 1px solid var(--brand-blue); border-top: 3px solid #fff; color: #fff; text-decoration: none; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease); }
.cta-tri__card:hover { transform: translateY(-4px); background: var(--brand-blue-deep); border-color: var(--brand-blue-deep); color: #fff; text-decoration: none; }
.cta-tri__num { font-family: var(--font-mono); font-size: var(--fs-mono); color: rgba(255,255,255,.75); }
.cta-tri__title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; margin: var(--space-2) 0 0; color: #fff; }
.cta-tri__spacer { flex: 1 1 auto; }
.cta-tri__cue { font-family: var(--font-display); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: var(--space-2); color: #fff; }
.cta-tri__card:hover .cta-tri__cue .arrow { transform: translateX(3px); }
.cta-tri__cue .arrow { transition: transform .2s var(--ease); }
@media (min-width: 760px) { .cta-tri { grid-template-columns: repeat(3, 1fr); } }

/* ---------- single stat highlight (large figure + supporting text) ----------
   For a striking, standalone number, e.g. an average penalty. Designed to sit
   on .sec-gradient (dark), where the eyebrow/headings are already white. */
.stat-flag { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; margin-top: var(--space-6); padding-top: 50px; }
.stat-flag__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 2rem + 6vw, 5.5rem); line-height: .9; letter-spacing: -.02em; color: #fff; }
.stat-flag__body p { margin: 0; }
.stat-flag__body p + p { margin-top: var(--space-3); }
@media (min-width: 760px) { .stat-flag { grid-template-columns: minmax(0, auto) 1fr; gap: var(--space-8); } }

/* ---------- related-services links (clickable tags to sibling service pages) ---------- */
.rel-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.rel-links a { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); background: var(--surface); border: 1px solid var(--grey-300); padding: .6rem 1.1rem; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.rel-links a::before { content: ""; width: 8px; height: 8px; background: var(--brand-blue); flex: 0 0 auto; }
.rel-links a:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; text-decoration: none; }
.rel-links a:hover::before { background: #fff; }

/* ---------- short tagline used in the final CTA band ---------- */
.cta-tagline { font-family: var(--font-display); font-weight: 700; color: #fff; letter-spacing: .01em; margin: 0 0 var(--space-4); font-size: 1.05rem; }

/* ---------- pull-note: an emphasised statement with a blue rule ---------- */
.pull-note { border-left: 4px solid var(--brand-blue); padding: var(--space-3) 0 var(--space-3) var(--space-5); margin: var(--space-6) 0 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.4; color: var(--ink); max-width: 70ch; }
.pull-note span { display: block; margin-top: var(--space-3); font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); color: var(--grey-600); }

/* ---------- headline figures row (e.g. About career stats) ----------
   Reusable on light or dark; on .sec-gradient the numbers/labels go light. */
.figures { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-7); }
.figure__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.figure__label { margin-top: var(--space-2); font-size: .95rem; color: var(--grey-600); }
.sec-gradient .figure__num { color: #fff; }
.sec-gradient .figure__label { color: rgba(255,255,255,.75); }
@media (min-width: 700px) { .figures { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }

/* ---------- dark logo/credential badge ---------- */
.logo-badge { display: inline-flex; align-items: center; justify-content: center; background: var(--ink); padding: var(--space-6) var(--space-7); border-bottom: 3px solid var(--brand-blue); }
.logo-badge img { max-width: 180px; height: auto; display: block; }

/* ---------- long-form legal / policy pages ----------
   A readable single-column article with an optional sticky table of contents. */
.legal-layout { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
.legal-toc__title { font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-600); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--grey-300); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.legal-toc a { display: block; font-family: var(--font-display); font-size: .9rem; font-weight: 500; color: var(--grey-600); text-decoration: none; padding: 2px 0; line-height: 1.4; }
.legal-toc a:hover { color: var(--brand-blue); }
.legal-article { max-width: 72ch; }
.legal-article h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--ink); margin: var(--space-8) 0 var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--grey-200); scroll-margin-top: var(--space-6); }
.legal-article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-article h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: var(--space-6) 0 var(--space-3); }
.legal-article p { line-height: 1.7; margin: 0 0 var(--space-4); color: var(--ink); }
.legal-article ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.legal-article li { line-height: 1.6; color: var(--ink); }
.legal-article a { color: var(--brand-blue); }
.legal-article strong { color: var(--ink); }
.legal-address { font-style: normal; line-height: 1.7; margin: 0 0 var(--space-4); color: var(--ink); }
@media (min-width: 980px) {
  .legal-layout { grid-template-columns: 240px 1fr; gap: var(--space-9); align-items: start; }
  .legal-toc { position: sticky; top: var(--space-6); max-height: calc(100vh - var(--space-7)); overflow: auto; }
}

/* ---------- expansive service feature rows (category landing pages) ----------
   Each service gets a large media + content row, alternating sides, with a
   sub-service checklist and a "learn more" button. Bigger than the .svc-tile grid. */
.feature-rows { margin-top: var(--space-7); }
.feature-row { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; padding: var(--space-8) 0; border-top: 1px solid var(--grey-300); }
.feature-row:first-child { border-top: 0; padding-top: var(--space-4); }
.feature-row__ref { font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-blue); display: block; margin-bottom: var(--space-3); }
.feature-row__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: var(--fs-h3); margin: 0 0 var(--space-4); }
.feature-row .checks { margin-top: var(--space-5); }
.feature-row__cta { margin-top: var(--space-6); }
.feature-row__media { position: relative; line-height: 0; }
.feature-row__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; border: 1px solid var(--grey-200); }
.feature-row__media::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: 4; pointer-events: none; width: clamp(110px, 34%, 200px); height: clamp(40px, 16%, 78px); background: var(--brand-blue); clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%); }
@media (min-width: 900px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .feature-row--rev .feature-row__media { order: -1; }
}

/* ---------- "which service do you need?" decision table ---------- */
.decide { margin-top: var(--space-6); border-top: 2px solid var(--ink); }
.decide__row { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-4) 0; border-bottom: 1px solid var(--grey-300); }
.decide__q { font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink); }
.decide__a { font-family: var(--font-display); font-weight: 600; color: var(--brand-blue); display: inline-flex; align-items: center; gap: var(--space-2); }
.decide__a a { color: inherit; text-decoration: none; }
.decide__a a:hover { text-decoration: underline; }
.decide__row--head .decide__q, .decide__row--head .decide__a { font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--grey-600); }
@media (min-width: 720px) { .decide__row { grid-template-columns: 1.5fr 1fr; gap: var(--space-6); align-items: baseline; } }
/* dark-section variant */
.sec-gradient .decide { border-top-color: rgba(255,255,255,.5); }
.sec-gradient .decide__row { border-bottom-color: rgba(255,255,255,.18); }
.sec-gradient .decide__q { color: rgba(255,255,255,.9); }
.sec-gradient .decide__a { color: #aeb4ff; }
.sec-gradient .decide__row--head .decide__q, .sec-gradient .decide__row--head .decide__a { color: rgba(255,255,255,.6); }

/* ---------- EPC energy-rating scale (A–G colour bands) ----------
   A recognisable stepped chart, mirroring the official EPC certificate.
   Bands step wider from A to G; each carries its own colour + letter. */
.epc-scale { display: grid; gap: 6px; margin-top: var(--space-6); max-width: 560px; }
.epc-band { display: flex; align-items: center; justify-content: flex-end; height: 36px; padding: 0 15px; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.epc-a { background: #008054; width: 46%; }
.epc-b { background: #19b459; width: 55%; }
.epc-c { background: #8dce46; width: 64%; }
.epc-d { background: #ffd500; color: var(--ink); width: 73%; }
.epc-e { background: #fcaa65; color: var(--ink); width: 82%; }
.epc-f { background: #ef8023; width: 91%; }
.epc-g { background: #e9153b; width: 100%; }
.epc-caption { margin: var(--space-4) 0 0; font-family: var(--font-display); font-size: var(--fs-small); color: var(--grey-600); }
/* when the intro-split media slot holds the scale (not an image), drop the
   decorative blue corner accent and restore normal text line-height */
.intro-split__media--bare { line-height: normal; }

/* =============================================================
   Blog / article template
   Reusable long-form editorial styling — built so ANY future post
   written through the normal WordPress editor (headings, paragraphs,
   lists, the built-in "Details" block) inherits this look automatically,
   without needing bespoke markup per article.
   ============================================================= */

/* ---------- hero byline (author · date · read time), sits under the hero title ---------- */
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: .9rem; color: rgba(255,255,255,.8); }
.post-meta span:not(:last-child)::after { content: "·"; margin-left: var(--space-4); color: rgba(255,255,255,.4); }

/* ---------- article + sticky table of contents (right-hand side on desktop) ---------- */
.post-layout { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
.post-toc__title { font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-600); margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--grey-300); }
.post-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.post-toc a { display: block; font-family: var(--font-display); font-size: .86rem; font-weight: 500; color: var(--grey-600); text-decoration: none; padding: 3px 0; line-height: 1.4; border-left: 2px solid transparent; padding-left: var(--space-3); transition: color .15s var(--ease), border-color .15s var(--ease); }
.post-toc a:hover { color: var(--brand-blue); }
.post-toc a.is-active { color: var(--brand-blue); font-weight: 600; border-left-color: var(--brand-blue); }
@media (min-width: 980px) {
  .post-layout { grid-template-columns: 1fr 240px; gap: var(--space-9); align-items: start; }
  .post-toc { position: sticky; top: var(--space-6); max-height: calc(100vh - var(--space-7)); overflow: auto; }
}

/* ---------- article body: generic prose styling for the_content() ---------- */
.post-article { max-width: 72ch; }
.post-article h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--ink); margin: var(--space-8) 0 var(--space-4); scroll-margin-top: 90px; }
.post-article h2:first-child { margin-top: 0; }
.post-article h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--ink); margin: var(--space-6) 0 var(--space-3); }
.post-article p { line-height: 1.75; margin: 0 0 var(--space-4); color: var(--ink); }
.post-article ul, .post-article ol { margin: 0 0 var(--space-5); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.post-article li { line-height: 1.65; color: var(--ink); }
.post-article a { color: var(--brand-blue); }
.post-article strong { color: var(--ink); }
.post-article blockquote { margin: var(--space-6) 0; padding: var(--space-4) var(--space-6); border-left: 4px solid var(--brand-blue); font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.post-article img { max-width: 100%; height: auto; margin: var(--space-5) 0; }
/* WordPress's native "Columns" block — used to lay short, repeated groups
   (e.g. categorised bullet lists) out side by side instead of stacking them
   full-width down the page. This is a core WP block, not a custom one, so
   the client lays it out themselves via the normal block inserter: insert
   "Columns", pick a layout (e.g. "3 equal columns"), then add a heading +
   list/paragraph into each column. Repeat with another Columns block for
   the next row of items. */
.post-article .wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: var(--space-6) 0; }
.post-article .wp-block-column { flex: 1 1 200px; min-width: 0; }
.post-article .wp-block-column h3 { margin: 0 0 var(--space-3); font-size: 1.02rem; }
.post-article .wp-block-column p { margin-bottom: 0; }
.post-article .wp-block-column ul { margin-bottom: 0; padding-left: var(--space-4); gap: var(--space-1); }
.post-article .wp-block-column li { font-size: var(--fs-small); }
@media (max-width: 620px) { .post-article .wp-block-columns { flex-direction: column; } }
/* native <details>/<summary> (WordPress's built-in "Details" block) reads as
   an accordion matching the site's FAQ component — no custom markup needed */
/* :not(.faq__item) — the dedicated FAQ meta-box output below renders real
   .faq__item markup, which already has its own complete styling. This
   generic rule only needs to catch a plain <details> an author drops
   straight into the body via WordPress's native "Details" block. */
.post-article details:not(.faq__item) { border: 1px solid var(--grey-200); border-bottom: 3px solid var(--brand-blue); background: var(--surface); margin: 0 0 var(--space-3); padding: var(--space-4) var(--space-5); }
.post-article details:not(.faq__item) + details { margin-top: var(--space-3); }
.post-article summary:not(.faq__q) { cursor: pointer; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.post-article details:not(.faq__item)[open] summary { color: var(--brand-blue); margin-bottom: var(--space-3); }
.post-article details:not(.faq__item) p:last-child { margin-bottom: 0; }
/* the .faq block sits inside .post-article for TOC purposes — give it the
   same top spacing the rest of the article's sections get */
.post-article .faq { margin-top: var(--space-6); }

/* ---------- author bio box, closes out the article ---------- */
.post-author { display: flex; gap: var(--space-5); align-items: center; margin-top: var(--space-8); padding: var(--space-6); background: var(--surface); border: 1px solid var(--grey-200); border-top: 3px solid var(--brand-blue); max-width: 72ch; }
.post-author__avatar { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.post-author__label { font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-blue); margin: 0 0 var(--space-2); }
.post-author__text { margin: 0; color: var(--grey-600); }
.post-author__text strong { color: var(--ink); }
.intro-split__media--bare::before { display: none; }

/* =============================================================
   Blog archive
   ============================================================= */

/* ---------- category filter chips (client-side filter on the archive) ---------- */
.blog-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-7); }
.blog-filters button { font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink); background: var(--surface); border: 1px solid var(--grey-300); padding: .5rem 1.1rem; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.blog-filters button:hover { border-color: var(--brand-blue); }
.blog-filters button.is-active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }

/* ---------- pagination (older / newer posts) ---------- */
.blog-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--grey-200); }
.blog-pagination__link { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--brand-blue); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.blog-pagination__link:hover { text-decoration: underline; }
.blog-pagination__spacer { flex: 1 1 auto; }
.blog-pagination__page { font-family: var(--font-display); font-size: .85rem; color: var(--grey-600); }

/* empty state, e.g. a category filter with no matching posts yet */
.blog-empty { padding: var(--space-7) 0; text-align: center; color: var(--grey-600); }

/* ---------- process timeline (ordered, connected steps) ----------
   For sequential "how it works" content — distinct from .why-grid, which
   reads as an unordered set of features. Vertical with a connecting line
   by default; switches to a horizontal connected row on wide screens. */
.timeline { list-style: none; counter-reset: timeline; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.timeline__step { position: relative; padding-left: 52px; }
.timeline__marker { position: absolute; left: 0; top: 0; width: 36px; height: 36px; background: var(--brand-blue); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .85rem; z-index: 2; }
.timeline__step::before { content: ""; position: absolute; left: 17px; top: 36px; width: 2px; height: calc(100% - 36px + var(--space-6)); background: var(--grey-300); z-index: 1; }
.timeline__step:last-child::before { display: none; }
.timeline__title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.1rem; margin: 6px 0 var(--space-2); }
.timeline__text { margin: 0; color: var(--grey-600); font-size: var(--fs-small); }
@media (min-width: 1100px) {
  .timeline { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
  .timeline__step { padding-left: 0; padding-top: 52px; }
  .timeline__step::before { left: 36px; top: 17px; width: calc(100% - 36px + var(--space-4)); height: 2px; }
  .timeline__text { max-width: 34ch; }
}
/* on the dark gradient section, mute the connecting line to suit */
.sec-gradient .timeline__step::before { background: rgba(255,255,255,.25); }