/* ============================================================
   Inner pages (Services · Portfolio · Sectors) — shared layer.
   Extends the LOCKED system (tokens.css + main.css + about.css) in the
   same idiom. No homepage/About styles are redefined here. RTL-first
   via logical properties → EN mirror = dir="ltr".
   ============================================================ */

/* NOTE: the `.hero-bright` scrim variant moved to about.css (beside `.about-hero`,
   its logical home) so the About page — which does not load this file — can use it.
   Unchanged rule; service pages still get it via about.css. */

/* ---------- breadcrumb ---------- */
.breadcrumb{
  font-family:var(--font-text); font-size:.8rem; letter-spacing:.02em;
  color:var(--color-text-muted); display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  margin-block-end:var(--space-3);
}
.breadcrumb a{ color:var(--color-text-muted); text-decoration:none; transition:color var(--motion-fast,.2s) var(--ease-out-quart,ease); }
.breadcrumb a:hover{ color:var(--color-accent-champagne-deep); }
.breadcrumb .sep{ opacity:.45; }
.breadcrumb [aria-current]{ color:var(--color-text); }

/* ---------- capability / spec grid ---------- */
.spec-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,4vw,64px); margin-block-start:var(--space-4); }
@media (max-width:720px){ .spec-grid{ grid-template-columns:1fr; } }
.spec{ padding-block:clamp(16px,1.8vw,24px); border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14)); }
.spec .n{ font-family:var(--font-display-lat); color:var(--color-accent-champagne); font-size:1rem; margin-inline-end:.55em; }
.spec b{ font-family:var(--font-display-ar); font-weight:400; font-size:clamp(1.2rem,1rem + .7vw,1.6rem); color:var(--color-text); }
.spec span{ display:block; margin-block-start:.5em; line-height:1.85; color:var(--color-text-muted); max-inline-size:46ch; }

/* ---------- gallery caption meta (uses the inherited .lang-grid/.lang-card) ---------- */
.lang-card .cap .meta{ display:block; font-family:var(--font-text); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-accent-champagne-on-dark); margin-block-start:6px; }

/* ---------- "spans every design language" band link ---------- */
.inline-note{ line-height:1.95; color:var(--color-text); max-inline-size:60ch; }

/* ---------- related crafts strip (lateral navigation) ---------- */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(20px,3vw,44px); margin-block-start:var(--space-4); }
@media (max-width:720px){ .related{ grid-template-columns:1fr; } }
.related a{
  display:flex; gap:12px; align-items:baseline; padding-block:15px;
  border-block-start:1px solid var(--color-hairline, rgba(59,44,24,.14));
  color:var(--color-text); text-decoration:none;
  transition:color var(--motion-fast,.2s) var(--ease-out-quart,ease);
}
.related a:hover{ color:var(--color-accent-champagne-deep); }
.related a:hover .n{ color:var(--color-accent-champagne-deep); }
.related .n{ font-family:var(--font-display-lat); color:var(--color-accent-champagne); font-size:.95rem; }
.related b{ font-family:var(--font-display-ar); font-weight:400; font-size:1.12rem; }
.related .en{ display:block; font-family:var(--font-text); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); margin-block-start:3px; }