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

/* ---- about.css ---- */
/* ==========================================================================
   Atheer Care prototype — About page styles (owner: Designer 3)
   Requires ../tokens.css + styles.css (Designer 1). Shared components (header,
   hero shell, process, cards, buttons, form, sheet, sticky bar, footer) are NOT
   restyled here. Only About-specific components live in this file.
   Rules: tokens only · logical properties only · transform/opacity motion only ·
   content visible without JS · no letter-spacing on Arabic.
   STABLE API: the facts_* spec-sheet classes may be reused by other pages
   (Designer 5, sector pages). Do not rename them.
   ========================================================================== */

/* ---------- Breadcrumb bar ----------
   IDENTICAL to the two .section_breadcrumb rules in service.css (Designer 1).
   Duplicated here only because page CSS may not link another page's CSS.
   → Proposal for Designer 1: promote to styles.css and delete both copies. */
.section_breadcrumb { background: var(--bg-page); }
.section_breadcrumb .breadcrumb_list { min-block-size: 3rem; }

/* ---------- Opening (reuses .section_hero / .hero_component shell) ---------- */
.about-hero_descriptor {                                     /* entity descriptor: a <p> under the H1 (copy G.1 #4) */
  font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 600;
  color: var(--text-accent); margin-block-start: -0.5rem;
}
.about-hero_lead { color: var(--text-primary); }            /* answer-first paragraph reads as primary text */
/* PROTOTYPE-ONLY: [[TOKEN]] placeholders in the first viewport use a system font so they don't re-wrap the
   LCP paragraph when Readex Latin swaps in (measured CLS 0.27 at 768 px with tokens, 0.003 with real values).
   Real values render in the page font; delete this rule at build. */
.about-hero_disambiguation { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted); max-inline-size: 38rem; }
.about-hero_ids .hero_proof-item { max-inline-size: 100%; }
.about-hero_actions .button { flex: 1 1 auto; }
@media (min-width: 479px) { .about-hero_actions .button { flex: 0 0 auto; } }
.about-hero_visual { border-radius: var(--radius-large); overflow: hidden; }
.about-hero_visual .placeholder-media { aspect-ratio: 4 / 3; }
@media (min-width: 992px) { .about-hero_visual .placeholder-media { aspect-ratio: 4 / 5; } }

/* ---------- Shared small helpers (page-scoped) ---------- */
.about_center { justify-content: center; }
.about_links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; margin-block-start: 0.75rem; padding: 0; list-style: none; }
.about_hub-link { margin-block-start: 1rem; }

/* ---------- Why we exist + founder block ---------- */
.why_component { display: grid; gap: var(--space-large); align-items: start; }
@media (min-width: 992px) { .why_component { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xlarge); } }
.why_text h2 { margin-block-start: 0.75rem; }
.why_text .text-rich-text a { min-block-size: var(--touch-min); display: inline-flex; align-items: center; }
.founder_card {
  display: grid; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large); box-shadow: var(--shadow-small);
}
.founder_media .placeholder-media { aspect-ratio: 16 / 9; }
.founder_body { display: grid; gap: 0.75rem; padding: 1.25rem 1.5rem 1.5rem; }
.founder_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.founder_quote { padding-inline-start: 1rem; border-inline-start: 2px solid var(--border-subtle); color: var(--text-primary); }
.founder_quote footer { margin-block-start: 0.25rem; font-size: var(--font-size-small); color: var(--text-muted); }

/* ---------- Commitments you can check (stack as cards on mobile, copy G.1 #7) ---------- */
.principles_list { display: grid; gap: var(--gutter); padding: 0; list-style: none; }
@media (min-width: 768px) { .principles_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .principles_list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principles_item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.875rem; align-content: start;
  padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.principles_icon {
  inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center;
  border-radius: var(--radius-medium); background: var(--bg-accent-tint); color: var(--text-accent);
}
.principles_icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.principles_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); align-self: center; }
.principles_detail, .principles_verify { grid-column: 1 / -1; }
.principles_detail { color: var(--text-secondary); }
.principles_verify { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); padding: 0.75rem; background: var(--bg-alt); border-radius: var(--radius-medium); }
.principles_verify-label { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }

/* ---------- Team ---------- */
.team_component { display: grid; gap: var(--space-medium); align-items: start; }
@media (min-width: 992px) { .team_component { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-large); } }
.team-lead_card { padding: 0; overflow: hidden; gap: 0; }
.team-lead_media .placeholder-media { aspect-ratio: 4 / 3; border-radius: 0; }
.team-lead_body { display: grid; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.team-lead_role { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-accent); }
.team-lead_line { color: var(--text-secondary); }
.team-lead_creds { padding-block-start: 0.5rem; border-block-start: 1px solid var(--border-subtle); color: var(--text-secondary); overflow-wrap: anywhere; }
.team-lead_creds-title { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-primary); }
.team-lead_card .card_footer { margin-block-start: 0.5rem; flex-wrap: wrap; }
.crew_block { display: grid; gap: 1rem; }
.crew_facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.crew_fact { padding: 0.75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
.crew_fact dt { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); }
.crew_fact dd { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.crew_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.5rem; padding: 0; list-style: none; }
.crew_item { min-inline-size: 0; }
.crew_item figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; margin: 0; }
.crew_item code, .founder_media code, .team-lead_media code { overflow-wrap: anywhere; max-inline-size: 100%; }
.crew_item .placeholder-media { aspect-ratio: 4 / 3; border-radius: var(--radius-medium); font-size: 0.75rem; }
.crew_item figcaption { font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }
.safety_note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: start;
  padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.safety_icon { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--steel-900); color: var(--amber-500); }
.safety_icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.safety_body { display: grid; gap: 0.5rem; color: var(--text-secondary); }

/* ---------- Equipment & materials (reuses .card-grid / .card / .card_icon) ---------- */
.equipment_list { display: grid; gap: 0.375rem; padding: 0; list-style: none; font-size: var(--font-size-small); overflow-wrap: anywhere; }
.equipment_spec { margin-block-start: auto; padding-block-start: 0.625rem; border-block-start: 1px dashed var(--border-subtle); font-size: var(--font-size-small); color: var(--text-muted); overflow-wrap: anywhere; }

/* ---------- Facts: procurement spec sheet (STABLE class names; reusable) ----------
   Reads as a printed supplier-data sheet on certificate paper: dark title strip,
   label/value rows with hairlines, Western digits, LTR isolation for IDs. */
.facts_component { display: grid; gap: var(--space-medium); align-items: start; max-inline-size: 56rem; }
.facts_sheet { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); box-shadow: var(--shadow-large); overflow: hidden; }
.facts_head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.875rem 1.25rem; background: var(--bg-inverse); color: var(--text-inverse);
}
.facts_title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 600; }
.facts_title .icon-embed-small { color: var(--amber-500); }
.facts_updated { font-size: var(--font-size-small); color: var(--steel-300); }
.facts_head .placeholder { color: var(--amber-500); background: var(--steel-800); border-color: var(--amber-500); }
.facts_list { margin: 0; }
.facts_row { display: grid; gap: 0.125rem; padding: 0.75rem 1.25rem; border-block-start: 1px solid var(--border-subtle); }
.facts_row:first-child { border-block-start: 0; }
.facts_row:nth-child(even) { background: var(--bg-alt); }
.facts_row dt { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); line-height: var(--lh-small); }
.facts_row dd { color: var(--text-primary); overflow-wrap: anywhere; min-inline-size: 0; }
.facts_row dd a[href^="tel:"] { display: inline-flex; align-items: center; min-block-size: var(--touch-min); color: var(--text-primary); font-family: var(--font-heading); font-weight: 600; }
@media (min-width: 768px) {
  .facts_row { grid-template-columns: minmax(10rem, 3fr) minmax(0, 7fr); gap: 1rem; align-items: baseline; }
}
.facts_verify { display: inline-flex; align-items: center; gap: 0.25rem; min-block-size: var(--touch-min); font-size: var(--font-size-small); }
.facts_row.is-conditional { background: var(--bg-surface); outline: 1px dashed var(--border-control); outline-offset: -6px; }
.facts_conditional-tag { display: inline-block; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
.facts_side { display: grid; gap: 1rem; }        /* optional aside next to the sheet (actions, notes) */
.facts_actions { display: grid; gap: 0.625rem; }
@media (min-width: 992px) { .facts_component.has-side { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-large); max-inline-size: none; } }

/* ---------- Who we serve: link lives in the card footer, whole card clickable ---------- */
.sector_link { text-decoration: none; min-block-size: var(--touch-min); }
.sector_link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* extended hit area */
.card.is-link:focus-within .sector_link:focus-visible { outline: none; }

/* ---------- Client logos (permission-gated) ---------- */
.logos_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 0; list-style: none; }
@media (min-width: 768px) { .logos_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logos_item {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 0.75rem;
  background: var(--bg-surface); border: 1px dashed var(--border-control); border-radius: var(--radius-medium);
}
/* Real logos (Webflow CMS image): grayscale is a static paint effect, never animated. */
.logos_item img { max-inline-size: 80%; max-block-size: 60%; object-fit: contain; filter: grayscale(1); opacity: 0.8; }
.logos_rule { margin-block-start: 1rem; display: flex; justify-content: center; }

/* ---------- For procurement: company profile ---------- */
.profile_component {
  display: grid; gap: 1rem 1.5rem; align-items: center; padding: 1.5rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); box-shadow: var(--shadow-small);
}
@media (min-width: 768px) { .profile_component { grid-template-columns: auto minmax(0, 1fr); } }
@media (min-width: 992px) { .profile_component { grid-template-columns: auto minmax(0, 1fr) minmax(15rem, auto); padding: 2rem; } }
.profile_icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--steel-900); color: var(--amber-500); }
.profile_icon svg { inline-size: 2rem; block-size: 2rem; }
.profile_body { display: grid; gap: 0.5rem; min-inline-size: 0; }
.profile_meta { font-size: var(--font-size-small); color: var(--text-muted); overflow-wrap: anywhere; }
.profile_actions { display: grid; gap: 0.5rem; }
.profile_actions .button { inline-size: 100%; }
.profile_actions .button.is-text { justify-content: center; }
.profile_wa .icon-embed-small { color: var(--whatsapp-700); }
@media (min-width: 768px) and (max-width: 991px) { .profile_actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- sector.css ---- */
/* ==========================================================================
   Atheer Care prototype — Sectors CMS template (owner: Designer 5)
   Pages: sector.html (/sectors/restaurant-chains) · sector-hotels.html ·
   sector-central-kitchens.html. One template, three CMS items: identical
   markup/classes/data-cms markers, only content differs.
   Load order: fonts.css → ../tokens.css → styles.css (Designer 1, shared) →
   service.css (Designer 1: trust-chips, scope_*, related_*, guarantee_*,
   is-switch-off) → about.css (Designer 3: facts_* spec sheet) → this file.
   In Webflow all of these are one global stylesheet, so linking them is the
   faithful model of production (no duplicated rules, no renamed clones).
   Only sector-specific components live here.
   Rules: tokens only · logical properties only · transform/opacity motion only ·
   content visible without JS · no letter-spacing / text-transform on Arabic.
   ========================================================================== */

/* ---------- Hero additions (reuses .section_hero / .hero_component shell) ---------- */
.sector-hero_answer { color: var(--text-secondary); max-inline-size: 40rem; }
.sector-hero_links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem;
  font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 500;
}
.sector-hero_link {
  display: inline-flex; align-items: center; gap: 0.375rem; min-block-size: var(--touch-min);
  color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--steel-600); text-underline-offset: 0.35em;
}
.sector-hero_link .icon-embed-small { color: var(--amber-500); }
.sector-hero_link.is-whatsapp .icon-embed-small { color: var(--whatsapp-500); }
@media (hover: hover) { .sector-hero_link:hover { text-decoration-color: var(--amber-500); } }
.sector-hero_response { display: inline-flex; align-items: flex-start; gap: 0.375rem; font-size: var(--font-size-small); color: var(--text-muted); }
.sector-hero_response .icon-embed-small { color: var(--amber-500); margin-block-start: 0.2em; }
/* Desktop has the inline Step 1; the mobile CTA block is hidden there (styles.css), links stay. */

/* ---------- Problems: rich text (bullets with bold lead + closing paragraph) as a ruled grid ----------
   CMS field `problems` is Rich Text, so styling targets the elements the editor produces. */
.problems_rich { max-inline-size: none; }
.problems_rich ul {
  list-style: none; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) { .problems_rich ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .problems_rich ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.problems_rich li {
  position: relative; padding: 1.25rem 1.25rem 1.25rem 1.25rem; padding-inline-start: 1.5rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
  color: var(--text-secondary); line-height: var(--lh-small);
}
.problems_rich li::before { /* hazard-tag marker: amber bar on the inline-start edge */
  content: ""; position: absolute; inset-block: 1.25rem; inset-inline-start: 0; inline-size: 4px;
  background: var(--amber-600); border-start-end-radius: 4px; border-end-end-radius: 4px;
}
.problems_rich li strong { display: block; margin-block-end: 0.25rem; font-size: var(--font-size-h4); line-height: var(--lh-h4); color: var(--text-primary); }
.problems_rich ul + p, .problems_rich p { max-inline-size: var(--max-width-prose); }
.problems_rich > p:last-child { margin-block-start: var(--space-medium); }

/* ---------- Rollout timeline: `sector-scheduling` rich text (H4 + p) as a numbered rail ----------
   The H4 text carries its own number (copy rule: no CSS counters). Rail + fill are template
   elements beside the rich text; sector.js scrubs the fill (scaleY, origin top). */
.rollout_component { display: grid; gap: var(--space-large); align-items: start; }
@media (min-width: 992px) { .rollout_component { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xlarge); } }
.rollout_track { position: relative; padding-inline-start: 2.75rem; }
.rollout_rail { position: absolute; inset-block: 0.75rem 0.5rem; inset-inline-start: calc(0.875rem - 1px); inline-size: 2px; background: var(--border-subtle); }
.rollout_rail-fill { position: absolute; inset: 0; background: var(--amber-500); transform-origin: top; }
.rollout_steps.text-rich-text { max-inline-size: 40rem; color: var(--text-secondary); }
.rollout_steps h4 { position: relative; margin-block-start: var(--space-medium); font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.rollout_steps h4:first-child { margin-block-start: 0; }
.rollout_steps h4::before { /* node on the rail */
  content: ""; position: absolute; inset-block-start: 0.3em; inset-inline-start: -2.75rem;
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-round);
  background: var(--steel-900); box-shadow: 0 0 0 5px var(--bg-page), inset 0 0 0 6px var(--steel-900), inset 0 0 0 20px var(--amber-500);
}
.rollout_steps h4 + p { margin-block-start: 0.375rem; }
.rollout_steps p + p { margin-block-start: 0.5rem; }
.rollout_steps strong { color: var(--text-primary); }
.rollout_steps figure { max-inline-size: 22rem; margin-block-start: 0.75rem; border-radius: var(--radius-medium); overflow: hidden; }
.rollout_steps figure .placeholder-media { aspect-ratio: 4 / 3; }
.rollout_steps img { border-radius: var(--radius-medium); }
.rollout_aside { display: grid; gap: 1rem; }
@media (min-width: 992px) { .rollout_aside { position: sticky; inset-block-start: calc(var(--header-height) + 1.5rem); } }
.rollout_photo { border-radius: var(--radius-large); overflow: hidden; }
.rollout_photo .placeholder-media { aspect-ratio: 4 / 3; }
.rollout_photo figcaption { padding-block-start: 0.5rem; font-size: var(--font-size-small); color: var(--text-muted); }
.rollout_deliver {
  padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-block-start: 4px solid var(--amber-500); border-radius: var(--radius-large);
}
.rollout_deliver-title { font-family: var(--font-heading); font-weight: 600; margin-block-end: 0.75rem; }
.rollout_deliver .check-list { font-size: var(--font-size-small); line-height: var(--lh-small); }

/* ---------- Optional block A (hotels): outlets under one roof, phased night schedule ----------
   CMS switch: show-outlets-schedule. Rows come from a nested list; one row = one kitchen/outlet. */
.outlets_component { display: grid; gap: var(--space-medium); align-items: start; }
@media (min-width: 992px) { .outlets_component { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-large); } }
.outlets_component .section-head, .shift_component .section-head { margin-block-end: 0; }
.outlets_board { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); box-shadow: var(--shadow-small); overflow: hidden; }
.outlets_legend {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.75rem 1.25rem; background: var(--bg-inverse); color: var(--text-inverse);
  font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600;
}
.outlets_legend .icon-embed-small { color: var(--amber-500); }
.outlets_legend-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.outlets_legend-note { font-weight: 400; color: var(--steel-300); }
.outlets_list { list-style: none; padding: 0; margin: 0; }
.outlets_row {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.875rem; align-items: start;
  padding: 0.875rem 1.25rem; border-block-start: 1px solid var(--border-subtle);
}
.outlets_row:first-child { border-block-start: 0; }
.outlets_icon {
  grid-row: span 2; inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center;
  border-radius: var(--radius-medium); background: var(--steel-900); color: var(--amber-500);
}
.outlets_icon svg { inline-size: 1.375rem; block-size: 1.375rem; }
.outlets_head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; }
.outlets_name { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); line-height: var(--lh-h4); }
.outlets_when {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-small);
  background: var(--amber-100); color: var(--amber-800); border: 1px solid var(--amber-700);
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
}
.outlets_detail { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); }
.outlets_foot { padding: 0.875rem 1.25rem; border-block-start: 1px dashed var(--border-control); font-size: var(--font-size-small); color: var(--text-muted); background: var(--bg-alt); }

/* ---------- Optional block B (central kitchens): shift / shutdown calendar, section by section ----------
   CMS switch: show-shift-calendar. A week grid: rows = production sections, cells = shift windows.
   Built as a real <table> (read by row + column headers); scrolls in its own region on ≤478. */
.shift_component { display: grid; gap: var(--space-medium); }
.shift_table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-large); background: var(--bg-surface); }
.shift_table { inline-size: 100%; min-inline-size: 34rem; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-small); }
.shift_table caption { text-align: start; padding: 1rem 1.25rem 0.5rem; font-family: var(--font-heading); font-weight: 600; color: var(--text-secondary); caption-side: top; }
.shift_table th, .shift_table td { padding: 0.75rem; text-align: start; vertical-align: top; border-block-start: 1px solid var(--border-subtle); }
.shift_table thead th { background: var(--steel-900); color: var(--white); font-family: var(--font-heading); font-weight: 600; border: 0; }
.shift_table tbody th { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); background: var(--bg-alt); min-inline-size: 8rem; }
.shift_cell { display: grid; gap: 0.125rem; }
.shift_tag {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-small);
  font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
}
.shift_tag.is-clean { background: var(--amber-100); color: var(--amber-800); border: 1px solid var(--amber-700); }
.shift_tag.is-run { background: var(--success-50); color: var(--success-600); }
.shift_tag .icon-embed-xsmall { flex: none; }
.shift_time { color: var(--text-muted); font-size: 0.8125rem; }
/* ≤767: each section becomes a stacked block; the phase name comes from data-label. Explicit ARIA
   table roles in the markup keep table semantics when display changes (Safari/VoiceOver). */
@media (max-width: 767px) {
  .shift_table-wrap { overflow: visible; }
  .shift_table { min-inline-size: 0; }
  .shift_table, .shift_table caption, .shift_table tbody, .shift_table tr, .shift_table th, .shift_table td { display: block; }
  .shift_table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .shift_table tbody tr { border-block-start: 1px solid var(--border-subtle); }
  .shift_table tbody th { border: 0; padding-block-end: 0.25rem; background: var(--bg-alt); }
  .shift_table td { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.5rem; align-items: start; border: 0; padding-block: 0.5rem; }
  .shift_table td::before { content: attr(data-label); font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); line-height: 1.8; }
}
.shift_key { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--font-size-small); color: var(--text-muted); }
.shift_key-item { display: inline-flex; align-items: center; gap: 0.375rem; }

/* Placeholder tokens stay on one line inside the slim trust pills (real CR/VAT numbers are short) */
.sector-trust .trust-chips_item .placeholder { white-space: nowrap; }

/* ---------- Services in the contract (reuses .card-grid / .card.is-link) ---------- */
.sector-services_scope { margin-block-start: var(--space-large); }
.sector-services_scope .scope_list li { font-size: var(--font-size-small); line-height: var(--lh-small); }

/* ---------- What procurement gets (reuses about.css facts_* spec sheet) ---------- */
.procurement_label { display: inline-flex; align-items: center; gap: 0.5rem; }
.procurement_label .icon-embed-small { color: var(--text-accent); flex: none; }
.procurement_side-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.procurement_side { padding: 1.5rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); display: grid; gap: 1rem; }
.procurement_side .profile_meta { margin-block-start: -0.5rem; }

/* ---------- Contract options (reuses .contract_component section-style-dark) ---------- */
.contract_rich.text-rich-text { max-inline-size: none; color: var(--text-secondary); }
.contract_rich h3 {
  font-size: var(--font-size-h4); line-height: var(--lh-h4); padding-block-start: 1rem; margin-block-start: 1.25rem;
  border-block-start: 1px solid var(--border-subtle);
}
.contract_rich h3:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.contract_rich ul { list-style: none; padding-inline-start: 0; }
.contract_rich li { position: relative; padding-inline-start: 1.25rem; }
.contract_rich li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.75em; inline-size: 0.5rem; block-size: 2px; background: var(--amber-500); }
.contract_note { font-size: var(--font-size-small); color: var(--text-muted); }
.contract_component .contract_actions .button.is-text { justify-self: start; }

/* ---------- Project cards: before/after pair inside Designer 1's .project-card (media = .hero_visual pair) ---------- */
.project-card_media.hero_visual { aspect-ratio: auto; gap: 2px; border-radius: 0; }
.project-card_media.hero_visual .hero_visual-item { border-radius: 0; }
.project-card_media.hero_visual .placeholder-media { aspect-ratio: 4 / 3; }
.project-card_media .placeholder-media code { overflow-wrap: anywhere; font-size: 0.6875rem; max-inline-size: 100%; }

/* ---------- Related sectors (Collection List of Sectors, current item excluded) ---------- */
.sector-related_list { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 768px) { .sector-related_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sector-related_list .related_link { min-block-size: 3.5rem; }
.sector-related_list .related_link > span:first-child { display: inline-flex; align-items: center; gap: 0.625rem; }
.sector-related_list .related_link .card_icon { inline-size: 2.25rem; block-size: 2.25rem; }
.sector-related_list .related_link .card_icon svg { inline-size: 1.25rem; block-size: 1.25rem; }

/* ---------- Final CTA alt row: profile + WhatsApp + call ---------- */
.sector-cta_alt { display: grid; gap: 0.75rem; }
.sector-cta_alt .button { justify-content: flex-start; }
@media (min-width: 479px) { .sector-cta_alt { grid-template-columns: repeat(2, minmax(0, max-content)); } }

/* ---------- Reviewer notes for the prototype: visible only in ?review=1 (production: CMS conditional visibility) ---------- */
.cms-note { display: none; }
.is-review .cms-note {
  display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.625rem 0.875rem; border-radius: var(--radius-medium);
  background: var(--warning-50); color: var(--text-warning); font-size: 0.8125rem; line-height: 1.6;
}
.cms-note .icon-embed-small { flex: none; margin-block-start: 0.1em; }
.cms-note code { direction: ltr; unicode-bidi: isolate; font-family: var(--font-heading); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .rollout_rail-fill { transform: none !important; }
}