/* tpl-service-article-projects-guides.css: GENERATED from prototype service.css, article.css, projects.css, guides.css (same order as the prototype head). */
/* ---- service.css ---- */
/* ==========================================================================
   Atheer Care prototype — Service template (CMS "Services") page styles
   Owner: UI/UX Developer. Shared components live in styles.css.
   ========================================================================== */


/* Hero (service): same split as home, lighter content */
.service-hero_meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--font-size-small); color: var(--text-muted); }
.service-hero_noobligation { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--font-size-small); color: var(--text-muted); }
.service-hero_noobligation .icon-embed-small { color: var(--amber-500); }

/* Slim trust strip (template 2b) */
.trust-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.trust-chips_item {
  display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: 2.5rem; padding: 0.25rem 0.75rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-round);
  font-family: var(--font-heading); font-size: 0.875rem; font-weight: 500; color: var(--text-primary);
}
.trust-chips_item .icon-embed-small { color: var(--steel-900); }

/* Answer-first intro */
.intro_answer { font-size: var(--font-size-large); line-height: var(--lh-large); color: var(--text-primary); max-inline-size: 46rem; }

/* Scope: included / not included */
.scope_component { display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .scope_component { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scope_col { border-radius: var(--radius-large); border: 1px solid var(--border-subtle); background: var(--bg-surface); overflow: hidden; }
.scope_head { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.25rem; font-family: var(--font-heading); font-weight: 700; }
.scope_col.is-in .scope_head { background: var(--success-50); color: var(--success-600); }
.scope_col.is-out .scope_head { background: var(--steel-100); color: var(--steel-700); }
.scope_list { list-style: none; padding: 0; margin: 0; }
.scope_list li { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; padding: 0.875rem 1.25rem; border-block-start: 1px solid var(--border-subtle); color: var(--text-secondary); }
.scope_list li .icon-embed-small { margin-block-start: 0.2em; }
.scope_col.is-in .scope_list .icon-embed-small { color: var(--success-600); }
.scope_col.is-out .scope_list .icon-embed-small { color: var(--steel-500); }
.scope_list strong { color: var(--text-primary); }
.scope_list a { color: var(--text-accent); font-family: var(--font-heading); font-weight: 600; }

/* Who-for + signs */
.signs_component { display: grid; gap: var(--space-medium); }
@media (min-width: 992px) { .signs_component { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.signs_box { padding: 1.5rem; border-radius: var(--radius-large); background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.signs_box.is-warning { border-inline-start: 4px solid var(--amber-600); }
.signs_box-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--font-size-h4); margin-block-end: 0.75rem; }
.signs_list { list-style: none; padding: 0; display: grid; gap: 0.625rem; }
.signs_list li { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; }
.signs_list .icon-embed-small { color: var(--amber-700); margin-block-start: 0.2em; }
.signs_risk { margin-block-start: 1rem; color: var(--text-secondary); }

/* Proof row: featured before/after + one project card */
.proof_component { display: grid; gap: var(--gutter); align-items: start; }
@media (min-width: 992px) { .proof_component { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

/* Method: process-steps rich text rendered as a numbered timeline (CSS counters on H4, RTL-aware) */
.method_component { display: grid; gap: var(--space-large); }
@media (min-width: 992px) { .method_component { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.text-rich-text.is-steps { counter-reset: step; max-inline-size: none; position: relative; }
.text-rich-text.is-steps h4 {
  counter-increment: step; position: relative; display: flex; align-items: center; gap: 0.75rem;
  margin-block-start: 1.5rem; font-size: var(--font-size-h4);
}
.text-rich-text.is-steps h4:first-child { margin-block-start: 0; }
.text-rich-text.is-steps h4::before {
  content: counter(step); flex: none; inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center;
  border-radius: var(--radius-round); background: var(--steel-900); color: var(--amber-500); font-size: 1rem; font-weight: 700;
}
.text-rich-text.is-steps p { padding-inline-start: 3.25rem; margin-block-start: 0.375rem; }
.method_points { padding: 1.5rem; border-radius: var(--radius-large); }
.method_offhours { display: flex; gap: 0.5rem; align-items: flex-start; margin-block-start: 1rem; padding: 0.875rem 1rem; border-radius: var(--radius-medium); background: var(--steel-800); color: var(--white); }
.method_offhours .icon-embed-small { color: var(--amber-500); }

/* Pricing factors */
.pricing_component { display: grid; gap: var(--space-medium); align-items: start; }
@media (min-width: 992px) { .pricing_component { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.pricing_factors { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 768px) { .pricing_factors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pricing_factors li { display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.875rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
.pricing_factors .icon-embed-small { color: var(--amber-700); margin-block-start: 0.15em; }
.pricing_aside { padding: 1.5rem; border-radius: var(--radius-large); display: grid; gap: 0.75rem; }

/* Related */
.related_component { display: grid; gap: var(--space-medium); }
@media (min-width: 992px) { .related_component { grid-template-columns: 2fr 1fr 1fr; } }
.related_title { font-family: var(--font-heading); font-weight: 700; font-size: var(--font-size-h4); margin-block-end: 0.75rem; }
.related_list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.related_link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-block-size: 3.25rem; padding: 0.5rem 1rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium);
  font-family: var(--font-heading); font-weight: 600; text-decoration: none; color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.related_link .is-directional { color: var(--text-accent); transition: transform var(--duration-fast) var(--ease-out); }
@media (hover: hover) { .related_link:hover { background: var(--bg-accent-tint); } .related_link:hover .is-directional { transform: translateX(calc(var(--dir) * -4px)); } }

/* Guarantee (beside the final form; hidden until signed off) */
.guarantee_box { margin-block-start: var(--space-medium); padding: 1.25rem; border-radius: var(--radius-large); border: 1px dashed var(--amber-500); display: grid; gap: 0.625rem; }
.guarantee_title { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-primary); }
.guarantee_title .icon-embed-medium { color: var(--amber-500); }
.guarantee_box .check-list { font-size: var(--font-size-small); }
.guarantee_status { font-size: 0.8125rem; color: var(--text-muted); }

.reviewed-date { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-muted); }

/* v2 additions (copy/service-hood-ar.md + template v2) */
.hero_visual.is-single { grid-template-columns: 1fr; }
.hero_visual.is-single .placeholder-media { aspect-ratio: 16 / 9; }
.method_photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding-inline-start: 3.25rem; margin-block-start: 0.75rem; }
.method_photos.is-single { grid-template-columns: minmax(0, 1fr); }
.method_photo { border-radius: var(--radius-medium); overflow: hidden; }
.method_photo .placeholder-media { aspect-ratio: 4 / 3; }
@media (max-width: 478px) { .method_photos { padding-inline-start: 0; } }
.related_component.is-2col { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .related_component.is-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- article.css ---- */
/* ==========================================================================
   article.css: page-only styles for article.html (Webflow CMS template "Posts")
   Owner: Designer 2 (UI/UX). Load order: ../tokens.css → styles.css → article.css
   Scope: article-progress_*, article-header_*, article-byline_*, article_layout,
   article-answer_*, article-takeaways_*, article-toc_*, .text-rich-text.is-article,
   article-cta-card_*, article-service_*, article-figure_*, article-sources_*,
   article-author_*, article-related_*.
   Shared components (header, breadcrumb, card, table, FAQ, CTA, form, sticky
   bar, sheet, footer) come from styles.css (Designer 1) and are not restyled.
   Reading-first: minimal motion, no scroll-jacking, content visible without JS.
   Items marked [ADD] extend the design system; listed in the handover.
   ========================================================================== */

/* ---------- Reading progress (motion #26) ---------- */
/* [ADD] 3px bar under the sticky header. Fill = transform scaleX, origin at the
   reading start (right in RTL). Colour amber-700 (4.81:1 on paper, 3:1 UI). */
.article-progress_component {
  position: fixed; inset-inline: 0; inset-block-start: var(--header-height); z-index: 39;
  block-size: 3px; pointer-events: none;
}
.article-progress_bar {
  block-size: 100%; background: var(--border-accent);
  transform: scaleX(0); transform-origin: var(--origin-start); will-change: transform;
}

/* ---------- Nav: "you are in this section" (guide is a child of the «الدليل» hub) ---------- */
/* Mirrors styles.css .nav_link[aria-current="page"]. [ADD] candidate for styles.css so every child page can use it. */
.nav_link[aria-current="true"] { color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--amber-700); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }

/* ---------- Sticky-bar trigger (blog-template §4: bar appears after ~40% scroll) ---------- */
/* Invisible sentinel covering the top 40% of the page. main.js shows the bar once it leaves the viewport. */
.article_sticky-sentinel { position: absolute; inset-inline-start: 0; inset-block: 0 60%; inline-size: 1px; pointer-events: none; visibility: hidden; }

/* ---------- Article container ---------- */
/* ≤991: one centred reading column. ≥992: prose column + TOC on the end side. */
.article_container { max-inline-size: var(--max-width-prose); margin-inline: auto; }
@media (min-width: 992px) { .article_container { max-inline-size: var(--container-medium); } }

/* ---------- Title block ---------- */
/* Tighter top on the article so the H1 (LCP) sits higher on a 375px screen */
.article_container.padding-section-small { padding-block-start: 1.25rem; }
@media (min-width: 992px) { .article_container.padding-section-small { padding-block-start: 2rem; } }
/* Current crumb = shortened title, one line, clipped with an ellipsis (blog-template §4 #1) */
.section_article .breadcrumb_item:last-child { min-inline-size: 0; flex: 1 1 8rem; }
.section_article .breadcrumb_item [aria-current="page"] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-inline-size: 100%; }
.article-header_component { display: grid; gap: 1.25rem; padding-block: var(--space-small) var(--space-medium); }
@media (min-width: 992px) { .article-header_component { max-inline-size: 48rem; padding-block-end: var(--space-large); } }
/* [ADD] Article H1 scale 28 → 44px. A 40–70 char question H1 at the display token (32 → 56px)
   runs 4–5 lines at 375px; this keeps it to 3–4 and reads as a title, not a banner. */
.article-header_title { font-size: clamp(1.75rem, 1.3333rem + 1.8519vw, 2.75rem); line-height: 1.35; }

.article-byline_component { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: center; }
.article-byline_avatar { inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-round); overflow: hidden; flex: none; }
.article-byline_avatar img, .article-byline_avatar .placeholder-media { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; padding: 0; }
.article-byline_text { display: grid; gap: 0.125rem; font-size: var(--font-size-small); line-height: 1.7; color: var(--text-muted); min-inline-size: 0; }
.article-byline_author { color: var(--text-primary); }
.article-byline_author a { font-family: var(--font-heading); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .article-byline_author a:hover { text-decoration: underline; } }
.article-byline_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.625rem; padding: 0; list-style: none; }
.article-byline_meta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.article-byline_meta-item + .article-byline_meta-item::before { content: "·"; color: var(--steel-400); margin-inline-end: 0.25rem; } /* decorative separator */
.article-byline_meta-item .icon-embed-xsmall { color: var(--text-accent); }
.article-byline_update { font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- Layout: intro + main + TOC ---------- */
.article_layout { display: grid; gap: var(--space-medium); grid-template-columns: minmax(0, 1fr); }
/* explicit minmax(0,1fr) track: an implicit auto track would grow to a wide table's min-content and push the page sideways */
.article_intro, .article_main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-medium); min-inline-size: 0; align-content: start; }
@media (min-width: 992px) {
  .article_layout {
    grid-template-columns: minmax(0, var(--max-width-prose)) minmax(13rem, 16rem);
    grid-template-areas: "intro toc" "main toc";
    justify-content: space-between; column-gap: clamp(2.5rem, 5vw, 4.5rem); row-gap: var(--space-large);
  }
  .article_intro { grid-area: intro; }
  .article_main { grid-area: main; }
  .article-toc_component { grid-area: toc; } /* end side = left in RTL (blog-template §5.3) */
}

/* ---------- Short answer box ---------- */
/* Tinted, editorial, no CTA inside (blog-template §4 #4). amber-800 label on amber-100 = 6.56:1;
   steel-900 text on amber-100 = 14.48:1. */
.article-answer_component {
  display: grid; gap: 0.5rem; padding: 1.25rem 1.25rem 1.375rem;
  background: var(--bg-accent-tint); border: 1px solid var(--amber-100); border-block-start: 2px solid var(--border-accent); border-radius: var(--radius-medium);
}
.article-answer_label { font-family: var(--font-heading); font-size: var(--font-size-small); line-height: 1.5; font-weight: 700; color: var(--text-accent); }
.article-answer_text { font-size: var(--font-size-large); line-height: var(--lh-large); color: var(--text-primary); }

/* Soft CTA: one text line, link style, not a button (blog-template §4 #5) */
.article-soft-cta { display: flex; gap: 0.625rem; align-items: flex-start; font-size: var(--font-size-medium); line-height: var(--lh-body); color: var(--text-secondary); }
.article-soft-cta .icon-embed-small { color: var(--text-accent); margin-block-start: 0.3em; }
.article-soft-cta a { color: var(--text-accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
@media (hover: hover) { .article-soft-cta a:hover { text-decoration-thickness: 2px; } }

/* ---------- Key takeaways ---------- */
.article-takeaways_component { padding: 1.25rem 1.25rem 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
.article-takeaways_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); margin-block-end: 1rem; }
.article-takeaways_rich ul { display: grid; gap: 0.75rem; padding: 0; list-style: none; }
/* Block + positioned marker (not grid): CMS bullets mix text, <strong> and <bdi>, and a grid would split them into cells */
.article-takeaways_rich li { position: relative; padding-inline-start: 1.375rem; line-height: 1.75; }
.article-takeaways_rich li::before { /* inspection-tag diamond, decorative */
  content: ""; position: absolute; inset-inline-start: 0.0625rem; inset-block-start: 0.65em;
  inline-size: 0.5rem; block-size: 0.5rem; background: var(--border-accent); transform: rotate(45deg);
}

/* ---------- Table of contents ---------- */
.article-toc_details { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
.article-toc_summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-block-size: 3.25rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); border-radius: var(--radius-medium);
}
.article-toc_summary::-webkit-details-marker { display: none; }
.article-toc_summary-label { display: inline-flex; align-items: center; gap: 0.5rem; }
.article-toc_summary-label .icon-embed-small { color: var(--text-accent); }
.article-toc_caret { color: var(--text-accent); transition: transform var(--duration-base) var(--ease-out); }
.article-toc_details[open] .article-toc_caret { transform: rotate(180deg); }
@media (hover: hover) { .article-toc_summary:hover { background: var(--bg-alt); } }

.article-toc_list { counter-reset: toc; display: grid; gap: 0.125rem; margin: 0; padding: 0 0.5rem 0.75rem; list-style: none; }
.article-toc_link {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.5rem; align-items: start;
  min-block-size: 2.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-small);
  border-inline-start: 2px solid transparent;
  font-size: var(--font-size-small); line-height: 1.6; color: var(--text-secondary); text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.article-toc_link::before { counter-increment: toc; content: counter(toc); font-family: var(--font-heading); font-weight: 600; color: var(--text-muted); }
@media (hover: hover) { .article-toc_link:hover { background: var(--bg-alt); color: var(--text-primary); } }
/* Current section: weight + start border + tint, never colour alone */
.article-toc_link[aria-current="true"] { background: var(--bg-alt); color: var(--text-primary); font-weight: 600; border-inline-start-color: var(--border-accent); }
.article-toc_link[aria-current="true"]::before { color: var(--text-accent); }

@media (min-width: 992px) {
  .article-toc_details {
    position: sticky; inset-block-start: calc(var(--header-height) + 1.5rem);
    max-block-size: calc(100dvh - var(--header-height) - 3rem); overflow-y: auto;
    background: transparent; border: 0; border-inline-start: 1px solid var(--border-subtle); border-radius: 0;
  }
  .article-toc_summary { cursor: default; min-block-size: 2.5rem; padding-block: 0 0.5rem; font-size: var(--font-size-small); color: var(--text-muted); }
  .article-toc_summary:hover { background: none; }
  .article-toc_caret { display: none; }
  .article-toc_list { padding: 0; }
  .article-toc_link { border-start-start-radius: 0; border-end-start-radius: 0; } /* flat on the marker side */
}

/* ---------- Rich text: long-form article body ---------- */
/* [ADD] Client-First .text-rich-text with an is-article combo. ~40rem measure
   (≈65–75 Arabic characters at 17px), line-height 1.8, text-align start (never justify). */
.text-rich-text.is-article { font-size: var(--font-size-medium); line-height: var(--lh-body); color: var(--text-primary); overflow-wrap: break-word; }
.text-rich-text.is-article > * + * { margin-block-start: 1.25rem; }
.text-rich-text.is-article > :first-child { margin-block-start: 0; }
.text-rich-text.is-article > h2 {
  margin-block: 3rem 1rem; font-size: clamp(1.375rem, 1.1667rem + 0.9259vw, 1.875rem); line-height: 1.4;
}
.text-rich-text.is-article > h2:first-child { margin-block-start: 0; }
.text-rich-text.is-article > h3 { margin-block: 2rem 0.75rem; font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.text-rich-text.is-article > h2 + *, .text-rich-text.is-article > h3 + * { margin-block-start: 0; }
.text-rich-text.is-article p { max-inline-size: var(--max-width-prose); }
.text-rich-text.is-article ul, .text-rich-text.is-article ol { display: grid; gap: 0.625rem; padding-inline-start: 1.5rem; }
.text-rich-text.is-article li { padding-inline-start: 0.25rem; }
.text-rich-text.is-article ul > li::marker { color: var(--text-accent); }
.text-rich-text.is-article ol > li::marker { font-family: var(--font-heading); font-weight: 700; color: var(--text-accent); }
.text-rich-text.is-article a {
  color: var(--text-accent); font-family: inherit; font-weight: inherit; /* underline + colour mark links; font and weight stay calm in running text (overrides the global .text-rich-text a) */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
@media (hover: hover) { .text-rich-text.is-article a:hover { text-decoration-thickness: 2px; } }
.text-rich-text.is-article strong { font-weight: 600; }
/* Webflow's RTE "Quote" block, used here as a practitioner callout */
.text-rich-text.is-article blockquote {
  margin-block: 2rem; padding: 1rem 1.25rem;
  background: var(--bg-alt); border-inline-start: 4px solid var(--steel-900); border-radius: var(--radius-medium);
  font-family: var(--font-heading); font-size: var(--font-size-large); font-weight: 500; line-height: 1.75; color: var(--text-primary);
}
.text-rich-text.is-article figure { margin-block: 2rem; }
.text-rich-text.is-article figcaption, .article-figure_caption {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-block-start: 0.75rem;
  font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted);
}
.text-rich-text.is-article hr { border: 0; block-size: 1px; background: var(--border-subtle); margin-block: 2.5rem; }
.text-rich-text.is-article .table_wrapper { margin-block: 1.5rem 0; }
.text-rich-text.is-article .article_table-source { margin-block-start: 0.5rem; font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }

/* ---------- Tables inside the article ---------- */
/* Tables are rich-text embeds (Webflow RTE has no native table [verify-WF]).
   The wrapper (styles.css .table_wrapper) scrolls; the page never does. */
.text-rich-text.is-article .table_wrapper { overscroll-behavior-x: contain; max-inline-size: 100%; }
/* [ADD] is-wide: 3–4 column tables keep a readable min width and scroll inside the wrapper at 375px */
.table_component.is-wide { min-inline-size: 38rem; }
.table_component.is-wide td:last-child { white-space: normal; min-inline-size: 8rem; }
/* [ADD] is-sticky-first: first column (row headers) stays put while the rest scrolls (blog-template §9 #3) */
.table_component.is-sticky-first tr > :first-child {
  position: sticky; inset-inline-start: 0; z-index: 1; inline-size: 9rem; min-inline-size: 9rem;
  background: var(--bg-surface);
}
.table_component.is-sticky-first thead tr > :first-child { background: var(--steel-900); }
.table_component.is-sticky-first tbody tr:nth-child(even) > :first-child { background: var(--steel-50); }
.table_component.is-sticky-first tr > :first-child::after { /* separator that travels with the sticky cell */
  content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 1px; background: var(--border-subtle);
}
.table_component tbody th { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
@media (min-width: 992px) {
  .table_component.is-sticky-first tr > :first-child { inline-size: auto; min-inline-size: 10rem; }
}
/* [ADD] is-plain-last: last column is prose, not a short value (overrides the nowrap/heading style) */
.table_component.is-plain-last td:last-child { font-family: var(--font-body); font-weight: 400; white-space: normal; }
/* Scroll hint: inserted by article.js only when the table actually overflows */
.article_table-hint { display: flex; align-items: center; gap: 0.375rem; margin-block-start: 0.5rem; font-size: 0.8125rem; color: var(--text-muted); }
.article_table-hint .icon-embed-xsmall { color: var(--text-accent); }

/* ---------- Main image / before-after figure ---------- */
.article-figure_pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.article-figure_item { position: relative; border-radius: var(--radius-medium); overflow: hidden; }
.article-figure_item img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.article-figure_tag {
  position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 1;
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
  padding: 0.125rem 0.5rem; border-radius: var(--radius-small); background: var(--steel-950); color: var(--white);
}
.article-figure_tag.is-after { background: var(--amber-500); color: var(--steel-950); }

/* ---------- Intent CTA card (after body-1) ---------- */
/* Quiet surface (blog-template §4 #9): steel-50, not the button colour. One button. */
.article-cta-card_component {
  display: grid; gap: 1rem; padding: 1.5rem;
  background: var(--bg-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
@media (min-width: 768px) { .article-cta-card_component { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; } .article-cta-card_content { grid-column: 2; } }
.article-cta-card_content { display: grid; gap: 0.5rem; justify-items: start; }
.article-cta-card_title { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; color: var(--text-primary); }
.article-cta-card_text { color: var(--text-secondary); }
.article-cta-card_content .button { margin-block-start: 0.5rem; }
@media (max-width: 478px) { .article-cta-card_content .button { inline-size: 100%; } }

/* ---------- Service box (after body-2) ---------- */
/* Dark steel surface so it can't be confused with the answer box or the CTA card. */
.article-service_component { display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-large); }
@media (min-width: 768px) { .article-service_component { grid-template-columns: auto minmax(0, 1fr); column-gap: 1.25rem; } .article-service_content { grid-column: 2; } }
.article-service_component .card_icon { background: var(--steel-800); }
.article-service_content { display: grid; gap: 0.5rem; justify-items: start; }
.article-service_name { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; color: var(--text-primary); }
.article-service_text { color: var(--text-secondary); }
.article-service_actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-block-start: 0.5rem; }
@media (max-width: 478px) { .article-service_actions .button.is-secondary { inline-size: 100%; } }

/* ---------- FAQ inside the article column ---------- */
.article_faq .faq_list { max-inline-size: none; margin-inline: 0; }
.article_faq-title { font-size: clamp(1.375rem, 1.1667rem + 0.9259vw, 1.875rem); line-height: 1.4; margin-block-end: 1rem; }

/* ---------- Sources ---------- */
.article-sources_component { display: grid; gap: 1rem; }
.article-sources_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.article-sources_rich ol { display: grid; gap: 0.75rem; padding-inline-start: 1.5rem; font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.article-sources_rich li::marker { font-family: var(--font-heading); font-weight: 600; color: var(--text-muted); }
.article-sources_rich a { color: var(--text-accent); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 0.25em; }
.article-sources_rich cite { font-style: normal; font-weight: 600; color: var(--text-primary); }

/* ---------- Author box ---------- */
.article-author_component {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem 1.25rem; align-items: start;
  padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.article-author_photo { inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--radius-round); overflow: hidden; }
.article-author_photo img, .article-author_photo .placeholder-media { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; padding: 0; }
.article-author_content { display: grid; gap: 0.375rem; min-inline-size: 0; }
.article-author_name { font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 700; }
.article-author_role { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 500; color: var(--text-accent); }
.article-author_bio { color: var(--text-secondary); font-size: var(--font-size-medium); line-height: var(--lh-body); }
.article-author_credentials { margin-block-start: 0.25rem; font-size: var(--font-size-small); }
@media (max-width: 478px) { .article-author_component { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Related posts + related services ---------- */
.article-related_media { border-radius: var(--radius-medium); overflow: hidden; }
.article-related_media .placeholder-media, .article-related_media img { aspect-ratio: 16 / 9; inline-size: 100%; block-size: auto; object-fit: cover; }
.article-related_category { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-accent); }
.article-related_date { font-size: 0.8125rem; color: var(--text-muted); }
.article-related-services_list { display: flex; flex-wrap: wrap; gap: 0 1.5rem; padding: 0; margin-block-start: 0.25rem; list-style: none; }
.article-related-services_title { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); margin-block-start: var(--space-large); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .article-toc_caret, .article-toc_link { transition: none; }
}

/* ---- projects.css ---- */
/* ==========================================================================
   projects.css: page styles for projects.html (/projects), project.html
   (/projects/{slug}) and the shared filter component used by guides.html.
   Owner: Designer 4. Load order: ../tokens.css → styles.css → projects.css.
   Shared components (header, breadcrumb, card, project-card, ba_component,
   report_*, check-list, CTA, form, sticky bar, sheet, footer) come from
   styles.css (Designer 1) and are NOT restyled here; this file only adds.
   Every value is a token from tokens.css. Items marked [ADD] extend the
   design system and are listed in the handover.
   Motion: transform/opacity only; prefers-reduced-motion kills it (tokens.css
   sets durations to 0.01ms; the stagger in projects.js checks the media query).
   ========================================================================== */

/* ---------- Page header (hub + case study) ---------- */
/* H1 + lead are LCP candidates: no motion, no reveal. */
.projects-header_container { padding-block: 1.25rem var(--section-small); }
@media (min-width: 992px) { .projects-header_container { padding-block: 2rem var(--section-medium); } }
.projects-header_component { display: grid; gap: 1rem; max-inline-size: 48rem; }
.projects-header_lead { color: var(--text-secondary); max-inline-size: var(--max-width-prose); }
/* [ADD] Consent note under the intro: lock icon + small secondary text */
.projects-header_note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: start; max-inline-size: var(--max-width-prose); font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.projects-header_note .icon-embed-small { color: var(--text-accent); margin-block-start: 0.2em; }

/* ---------- [ADD] Filter component (filter_*) ----------
   Toggle buttons with aria-pressed; one selection per group, AND across groups.
   Visual states mirror the form chip (design-system §6.4): steel-100 → steel-200
   hover → amber-100 + amber-700 border + check icon when pressed (never colour alone).
   Height = --touch-min (48px, design-system §6). Hidden without JS (list shows all). */
.filter_component { display: grid; gap: 1rem; margin-block-end: var(--space-medium); }
html:not(.js) .filter_component { display: none; }
.filter_title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 600; color: var(--text-primary); }
.filter_title .icon-embed-small { color: var(--text-accent); }
.filter_head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.filter_groups { display: grid; gap: 1rem; }
@media (min-width: 992px) { .filter_groups { gap: 1.25rem; } }
.filter_group { display: grid; gap: 0.5rem; min-inline-size: 0; }
@media (min-width: 768px) { .filter_group { grid-template-columns: 9rem minmax(0, 1fr); align-items: start; } .filter_label { padding-block-start: 0.75rem; } }
.filter_label { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-secondary); line-height: 1.5; }
.filter_chips { display: flex; flex-wrap: wrap; gap: 0.5rem; min-inline-size: 0; }
/* ≤767: one swipeable row per group (≈3 rows instead of 7). The row bleeds to the screen edge
   inside its own scroller, so the page never scrolls sideways; the cut-off chip signals "more". */
@media (max-width: 767px) {
  .filter_chips {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--global-padding)); padding: 0.25rem var(--global-padding);
    scroll-padding-inline: var(--global-padding);
  }
  .filter_chips::-webkit-scrollbar { display: none; }
  .filter_chip { flex: none; white-space: nowrap; }
}
.filter_chip {
  display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: var(--touch-min); padding-inline: 1rem;
  background: var(--bg-chip); border: 1px solid transparent; border-radius: var(--radius-medium); cursor: pointer;
  font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.filter_chip svg { display: none; inline-size: 1rem; block-size: 1rem; color: var(--amber-800); flex: none; }
@media (hover: hover) { .filter_chip:hover { background: var(--bg-chip-hover); } }
.filter_chip[aria-pressed="true"] { background: var(--bg-accent-tint); border-color: var(--border-accent); } /* steel-900 on amber-100 14.48:1 */
.filter_chip[aria-pressed="true"] svg { display: inline-flex; }
.filter_chip:active { transform: scale(0.98); }
.filter_chip-count { font-size: 0.8125rem; color: var(--text-muted); } /* steel-600 on steel-100 6.04:1 · on amber-100 6.35:1 (WCAG formula, 23 Sep) */
.filter_status { font-size: var(--font-size-small); color: var(--text-muted); font-family: var(--font-heading); font-weight: 500; }
.filter_reset[hidden] { display: none; }
.filter_reset .icon-embed-small { color: var(--text-accent); }
.filter_empty {
  display: grid; justify-items: center; gap: 0.75rem; text-align: center;
  padding: var(--space-large) 1.25rem; background: var(--bg-surface);
  border: 1px dashed var(--border-control); border-radius: var(--radius-large);
}
.filter_empty[hidden] { display: none; }
.filter_empty .text-color-secondary { max-inline-size: 34rem; }
.filter_empty .button-group { justify-content: center; }
.filter_empty-icon { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: var(--radius-round); background: var(--bg-chip); color: var(--text-accent); }
/* Filtered-out items leave the layout (hidden attribute). The list itself never animates. */
[data-filter-item][hidden] { display: none; }

/* ---------- [ADD] Prototype-only note (never ships) ---------- */
.proto-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: start;
  margin-block-end: 1rem; padding: 0.625rem 0.875rem; border: 1px dashed var(--amber-700); border-radius: var(--radius-medium);
  background: var(--bg-accent-tint); color: var(--amber-800); font-size: 0.8125rem; line-height: 1.7;
}
.proto-note .icon-embed-small { margin-block-start: 0.1em; }

/* ---------- Project list + card additions ---------- */
.projects_list { align-items: stretch; }
.projects_item { display: grid; min-inline-size: 0; }
/* [ADD] Cover: one composite image (before right, after left) with HTML overlay labels (copy §2.3).
   1200:630 reserved = no CLS. Tags sit on their own halves: «قبل» at inline-start (right), «بعد» at inline-end. */
.project-card_cover { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; }
.project-card_cover .placeholder-media { aspect-ratio: auto; block-size: 100%; border-radius: 0; padding: 0.5rem; gap: 0.25rem; }
.project-card_cover .placeholder-media code { font-size: 0.75rem; overflow-wrap: anywhere; max-inline-size: 100%; }
.project-card_cover::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: 2px; margin-inline-start: -1px; background: var(--amber-500); pointer-events: none; } /* decorative split line */
.project-card_cover-tag, .project-cover_tag {
  position: absolute; inset-block-start: 0.5rem; z-index: 1;
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
  padding: 0.0625rem 0.5rem; border-radius: var(--radius-small);
}
.project-card_cover-tag.is-before, .project-cover_tag.is-before { inset-inline-start: 0.5rem; background: var(--steel-950); color: var(--white); }
.project-card_cover-tag.is-after, .project-cover_tag.is-after { inset-inline-end: 0.5rem; background: var(--amber-500); color: var(--steel-950); }
.project-card_count { font-size: 0.8125rem; color: var(--text-muted); }
.project-card .project-card_body { flex: 1; align-content: start; grid-template-rows: auto auto 1fr auto; }
.project-card .project-card_meta .placeholder { font-size: 0.75rem; }
.project-card .project-card_meta { align-items: center; gap: 0.375rem 0.75rem; }
.project-card_meta-item { display: inline-flex; align-items: center; gap: 0.25rem; }
.project-card_meta-item .icon-embed-xsmall { color: var(--text-accent); }
.project-card .project-card_title a { text-decoration: none; }
.project-card .project-card_title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* same extended hit area as .card_title a */
/* [ADD] "systems cleaned" chips: non-interactive tags, radius-small, steel-100 (13.78:1) */
.project-card_systems { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0; list-style: none; align-content: start; }
.project-card_system {
  display: inline-flex; align-items: center; min-block-size: 1.75rem; padding-inline: 0.5rem;
  background: var(--bg-chip); border-radius: var(--radius-small);
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 500; color: var(--text-primary);
}

/* ---------- Case study (project.html) ---------- */
/* Breadcrumb: long CMS name → one line with ellipsis (same rule as article.css) */
.project-bc_current { min-inline-size: 0; flex: 1 1 8rem; }
.project-bc_current [aria-current="page"] { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-inline-size: 100%; }
/* Header: text then cover (stacked ≤991; 5/7 split on desktop, cover on the end side) */
.project-header_component { display: grid; gap: var(--space-medium); }
@media (min-width: 992px) { .project-header_component { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xlarge); align-items: center; } }
.project-header_text { display: grid; gap: 1rem; }
/* [ADD] Case-study H1: the display token (32→56) runs a 45-char CMS name to 4 lines at 375px;
   this scale (28→44, same as article.css .article-header_title) keeps it to 2–3. */
.projects-header_title { font-size: clamp(1.75rem, 1.3333rem + 1.8519vw, 2.75rem); line-height: 1.35; }
.project-cover { display: grid; gap: 0.75rem; margin: 0; }
.project-cover_media { position: relative; aspect-ratio: 1200 / 630; border-radius: var(--radius-large); overflow: hidden; }
.project-cover_media .placeholder-media { aspect-ratio: auto; block-size: 100%; }
.project-cover_media::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; inline-size: 2px; margin-inline-start: -1px; background: var(--amber-500); pointer-events: none; }
.project-cover_tag { inset-block-start: 0.75rem; }
.project-cover_tag.is-before { inset-inline-start: 0.75rem; }
.project-cover_tag.is-after { inset-inline-end: 0.75rem; }
.project-cover_note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: start; font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted); }
.project-cover_note .icon-embed-small { color: var(--text-accent); margin-block-start: 0.2em; }
.section_project-header .project-summary_component { margin-block-start: var(--space-medium); }

/* [ADD] Summary strip: dl of up to 8 facts; 2 columns on mobile, 4 on desktop. Values are CMS fields. */
.project-summary_component { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); box-shadow: var(--shadow-small); }
.project-summary_list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (min-width: 992px) { .project-summary_list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.project-summary_item { display: grid; gap: 0.25rem; align-content: start; padding: 1rem 1.25rem; border-block-end: 1px solid var(--border-subtle); min-inline-size: 0; }
.project-summary_item:nth-child(odd) { border-inline-end: 1px solid var(--border-subtle); }
@media (min-width: 992px) {
  .project-summary_item, .project-summary_item:nth-child(odd) { border-inline-end: 1px solid var(--border-subtle); }
  .project-summary_item:nth-child(4n) { border-inline-end: 0; }
  .project-summary_item:nth-last-child(-n+4) { border-block-end: 0; }
}
@media (max-width: 991px) { .project-summary_item:nth-last-child(-n+2) { border-block-end: 0; } }
@media (max-width: 374px) { .project-summary_list { grid-template-columns: minmax(0, 1fr); } .project-summary_item { border-inline-end: 0 !important; } }
.project-summary_item dt { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }
.project-summary_item dt .icon-embed-xsmall { color: var(--text-accent); }
.project-summary_item dd { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; line-height: 1.5; color: var(--text-primary); overflow-wrap: anywhere; }

/* Situation found + result: prose column + facts / report column */
.project-found_component, .project-result_component { display: grid; gap: var(--space-medium); }
@media (min-width: 992px) {
  .project-found_component, .project-result_component { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xlarge); align-items: start; }
}
.project-found_text { display: grid; gap: 0; max-inline-size: var(--max-width-prose); min-inline-size: 0; }
.project-found_text .section-head { margin-block-end: var(--space-small); }
/* [ADD] Found facts: label/value rows (dl) with dashed separators, report_row language */
.project-found_list { display: grid; margin: 0; padding: 0.25rem 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
.project-found_row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; padding-block: 0.875rem; border-block-end: 1px dashed var(--border-subtle); font-size: var(--font-size-small); line-height: 1.6; }
.project-found_row:last-child { border-block-end: 0; }
.project-found_row dt { color: var(--text-muted); }
.project-found_row dd { margin: 0; display: grid; gap: 0.25rem; font-weight: 600; color: var(--text-primary); min-inline-size: 0; }
.project-found_def { font-weight: 400; font-size: 0.8125rem; color: var(--text-muted); }

/* What we did, per component */
.project-steps_list { display: grid; gap: var(--space-large); padding: 0; list-style: none; }
@media (min-width: 992px) { .project-steps_list { gap: var(--space-xlarge); } }
.project-step { display: grid; gap: var(--space-small); }
@media (min-width: 992px) { .project-step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xlarge); align-items: center; } }
.project-step_text { display: grid; gap: 0.75rem; align-content: start; justify-items: start; }
/* [ADD] Component number badge: steel-900 square + amber numeral (card_icon language) */
.project-step_number {
  display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius-medium);
  background: var(--steel-900); color: var(--amber-500); font-family: var(--font-heading); font-weight: 700;
}
.project-step_title { font-size: var(--font-size-h3); line-height: var(--lh-h3); }

/* Report excerpt (redacted image from the real report; copy §5.1 field 17) */
.project-report { display: grid; gap: 0.75rem; margin: 0; align-content: start; justify-items: start; }
.project-report_media { inline-size: 100%; border-radius: var(--radius-large); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-medium); }
.project-report_media .placeholder-media { aspect-ratio: 4 / 3; }
.project-report_note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: start; font-size: var(--font-size-small); color: var(--text-muted); }
.project-report_note .icon-embed-small { color: var(--text-accent); margin-block-start: 0.15em; }

/* [ADD] Client quote (consented) + hidden-state variant */
.project-quote_component {
  position: relative; display: grid; gap: 1rem; padding: 1.5rem 1.5rem 1.5rem; margin: 0;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large);
}
@media (min-width: 768px) { .project-quote_component { padding: 2rem 2.5rem; } }
.project-quote_mark { color: var(--text-accent); }
.project-quote_text { font-family: var(--font-heading); font-size: var(--font-size-large); line-height: var(--lh-large); font-weight: 500; color: var(--text-primary); }
.project-quote_cite { display: grid; gap: 0.125rem; font-style: normal; font-size: var(--font-size-small); color: var(--text-muted); }
.project-quote_name { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.project-quote_consent { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--text-success); }
.project-quote_hidden { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.project-quote_hidden .icon-embed-medium { color: var(--text-muted); }
.project-quote_hidden p { font-size: var(--font-size-small); color: var(--text-secondary); }
[data-quote-state][hidden] { display: none; }

/* Method block: icon + sentence cards (no titles in the copy) */
.projects-method_item { gap: 1rem; }
.projects-method_item .card_text { color: var(--text-primary); }

/* Related: services + sector up-links, then 2 more projects */
.project-related_component { display: grid; gap: var(--space-medium); }
@media (min-width: 992px) { .project-related_component { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.project-related_group { display: grid; gap: 0.75rem; align-content: start; }
.project-related_label { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); }
.project-related_list { gap: 0.75rem; }
.project-related_card { flex-direction: row; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.project-related_card .card_title { flex: 1; font-size: 1.0625rem; }
.project-related_card .card_footer { margin: 0; }
.project-related_more { margin-block-start: var(--space-large); display: grid; gap: 1rem; }
.project-related_more-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }

/* ---------- Reduced motion (belt and braces; tokens already zero durations) ---------- */
@media (prefers-reduced-motion: reduce) {
  .filter_chip, .filter_chip:active { transition: none; transform: none; }
}

/* ---- guides.css ---- */
/* ==========================================================================
   guides.css: page styles for guides.html (/guides «الدليل»).
   Owner: Designer 4. Load order: ../tokens.css → styles.css → article.css
   (Designer 2: byline + reading tokens) → projects.css (filter_*, page header)
   → guides.css. Nothing from styles.css or article.css is restyled here.
   Card spec: copy/guides-hub-ar.md §6. [ADD] = design-system extension.
   ========================================================================== */

/* ---------- Hero author strip ---------- */
.guides-header_author { margin-block-start: 0.25rem; }
.guides-header_author .article-byline_avatar .placeholder-media { display: grid; place-items: center; }

/* ---------- [ADD] Guide card (guide-card_*) ----------
   One link per card (the title); the ::after stretches it over the card, as .card_title a does.
   Image 16:9 reserved (no CLS). Category = plain-text label (no category URLs). */
.guide-card { padding: 0; gap: 0; overflow: hidden; }
.guide-card_media { aspect-ratio: 16 / 9; }
.guide-card_media .placeholder-media { aspect-ratio: auto; block-size: 100%; border-radius: 0; }
.guide-card_body { flex: 1; display: grid; gap: 0.5rem; align-content: start; grid-template-rows: auto auto 1fr auto; padding: 1.25rem 1.25rem 1.5rem; }
.guide-card_category { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.5; color: var(--text-accent); } /* amber-800 on white 7.48:1 */
.guide-card_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.guide-card_title a { text-decoration: none; }
.guide-card_title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.guide-card_excerpt { color: var(--text-secondary); font-size: var(--font-size-medium); line-height: var(--lh-body); }
@media (max-width: 767px) {
  .guide-card_excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* copy §6: clamp to 3 lines on mobile */
}
/* Meta line: «آخر تحديث … · n دقائق قراءة · بقلم …»; separators are decorative */
.guide-card_meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.5rem; margin-block-start: 0.5rem; font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }
.guide-card_meta > span + span::before { content: "·"; margin-inline-end: 0.5rem; color: var(--steel-400); }
.guide-card_meta .placeholder { font-size: 0.75rem; }
.guides_item { display: grid; min-inline-size: 0; }

/* Featured: label «ابدأ من هنا» + larger card; image beside the text from 768px (image at inline-end) */
.guide-card_label {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.625rem;
  border-radius: var(--radius-small); background: var(--bg-accent-tint); color: var(--text-accent);
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; line-height: 1.6;
}
.guide-card.is-featured .guide-card_body { gap: 0.75rem; padding: 1.5rem; grid-template-rows: none; }
.guide-card.is-featured .guide-card_title { font-size: var(--font-size-h3); line-height: var(--lh-h3); font-weight: 700; }
.guide-card.is-featured .guide-card_excerpt { display: block; -webkit-line-clamp: unset; font-size: var(--font-size-large); line-height: var(--lh-large); }
@media (min-width: 768px) {
  .guide-card.is-featured { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .guide-card.is-featured .guide-card_media { order: 2; aspect-ratio: auto; min-block-size: 100%; }
  .guide-card.is-featured .guide-card_media .placeholder-media { aspect-ratio: 16 / 9; block-size: 100%; }
  .guide-card.is-featured .guide-card_body { align-content: center; padding: 2rem 2.5rem; }
}
.section_guides-featured { padding-block-end: 0; }

/* ---------- [ADD] Compliance pillar promo (dark panel, one sweep) ---------- */
.guides-promo_component { display: grid; gap: var(--space-medium); padding: 1.75rem 1.5rem; border-radius: var(--radius-large); align-items: center; }
@media (min-width: 768px) { .guides-promo_component { padding: 2.5rem; } }
@media (min-width: 992px) { .guides-promo_component { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xlarge); padding: 3rem 3.5rem; } }
.guides-promo_content { display: grid; gap: 0.75rem; max-inline-size: 44rem; }
.guides-promo_link { justify-self: start; }
@media (max-width: 478px) { .guides-promo_link { inline-size: 100%; } }

/* ---------- [ADD] Checklist lead magnet (P2) ---------- */
.guides-magnet_component { display: grid; gap: var(--space-medium); align-items: center; padding: 1.5rem; background: var(--bg-alt); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); }
@media (min-width: 768px) { .guides-magnet_component { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 2.5rem; gap: var(--space-large); } }
.guides-magnet_content { display: grid; gap: 0.75rem; justify-items: start; }
.guides-magnet_content .button-group { margin-block-start: 0.5rem; }
@media (max-width: 478px) { .guides-magnet_content .button-group > .button.is-secondary { inline-size: 100%; } }
/* Document mock: a white A4-ratio sheet, the "certificate paper" language of report_visual */
.guides-magnet_visual { display: grid; place-items: center; }
.guides-magnet_sheet {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 0.75rem;
  inline-size: min(100%, 13rem); aspect-ratio: 210 / 297; padding: 1.25rem;
  background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); box-shadow: var(--shadow-large);
  color: var(--text-accent);
}
.guides-magnet_sheet .placeholder { font-size: 0.6875rem; }
.guides-magnet_badge { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; padding: 0.0625rem 0.5rem; border-radius: var(--radius-small); background: var(--steel-900); color: var(--white); font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; }
.guides-magnet_lines { display: grid; gap: 0.5rem; inline-size: 100%; }
.guides-magnet_lines span { block-size: 0.375rem; border-radius: var(--radius-round); background: var(--steel-100); }
.guides-magnet_lines span:nth-child(2n) { inline-size: 75%; }