/* tpl-service-projects.css: GENERATED from prototype service.css, projects.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)); } }

/* ---- 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; }
}