/* Sabit Trumov, V3: visual identity (VI release, owner decisions 2026-10-05).
   ST mark B, Hero motto (text only), footer lockup, About credo, Lucide icons, the signal-judgement-decision motif.
   Loaded after mobile.css, so the phone rules below win without editing it. No new colours: ink is currentColor,
   the judgement node is the accent. Motion 150-200 ms, 1-2 px, all of it off under prefers-reduced-motion. */

/* ---------- ST mark ---------- */
.stm{display:block;flex:none;overflow:visible}
.stm .ink{stroke:currentColor}
.stm .node{fill:currentColor}
.stm .node.accent{fill:var(--accent)}

/* ---------- header: mark + mixed-case name ---------- */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand .stm .node.accent{transform-box:fill-box;transform-origin:center;transition:transform .18s var(--ease)}
.brand:hover .stm .node.accent,.brand:focus-visible .stm .node.accent{transform:scale(1.18)}

/* ---------- Hero motto: subordinate to name and role ---------- */
.hero-motto{margin:22px 0 0;font-weight:600;font-stretch:112%;font-size:.74rem;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero-motto + .cta{margin-top:24px}

/* ---------- footer lockup ---------- */
.foot-id{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:start}
.foot-id .stm{margin-top:1px;color:var(--text)}
.foot-in .foot-id span{display:block}
.foot-in .foot-desc{margin-top:4px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--dim)}
.foot-in .foot-motto{margin-top:14px;font-weight:600;font-stretch:112%;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- About: professional credo (separate from the leadership model on Career) ---------- */
.credo-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px}
.credo-label{font-weight:400;line-height:1.62}
.credo{list-style:none;margin:0;padding:0}
.credo li{border-top:1px solid var(--line);padding:16px 0;font-size:clamp(1.25rem,1.9vw,1.6rem);font-stretch:104%;letter-spacing:-.015em;line-height:1.25}
.credo li:last-child{border-bottom:1px solid var(--line)}

/* ---------- approved dry lines: 404 and empty search ---------- */
.nf-note{color:var(--dim);margin:-8px 0 0;font-size:.95rem}
.search-empty{margin:4px 0 0;font-size:1.06rem}
.search-empty .dry{display:block;color:var(--dim);font-size:.95rem;margin-top:2px}

/* ---------- Lucide icons next to text labels ---------- */
.ic{display:inline-block;flex:none;vertical-align:-2px;margin-right:8px}
.kv dt .ic{vertical-align:-2px;color:var(--muted)}
.search-results .meta .ic{color:var(--muted);transition:transform .18s var(--ease)}
.search-results li:hover .meta .ic,.search-results li:focus-within .meta .ic{transform:translateY(-1px)}

/* ---------- motif: Knowledge Book cover and the Decision Labs label ---------- */
.motif{display:block;color:var(--text);overflow:visible}
.motif .mf-s{fill:none;stroke:currentColor;stroke-width:1;opacity:.38}
.motif .mf-d{fill:none;stroke:currentColor;stroke-width:1.6;opacity:.8}
.motif .mf-j{fill:var(--accent)}
.motif .mf-n{fill:currentColor}
.book-in .motif{margin:0 0 18px}
.kb-labs .chapter-meta .motif{margin-top:16px}
@media (prefers-reduced-motion:no-preference){
  .motif path{stroke-dasharray:120;stroke-dashoffset:0;animation:mf-draw .7s var(--ease) both}
  .motif .mf-d{animation-delay:.25s}
  @keyframes mf-draw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
}

@media (prefers-reduced-motion:reduce){
  .brand .stm .node.accent,.search-results .meta .ic{transition:none}
  .brand:hover .stm .node.accent,.brand:focus-visible .stm .node.accent,
  .search-results li:hover .meta .ic,.search-results li:focus-within .meta .ic{transform:none}
}

/* desktop menu in RU/KK: the labels are longer than EN/TR, so the row needs tighter gaps to stay inside the gutters
   (it already ran 18 px into the right gutter before the mark was added) */
@media (min-width:1181px){
  :root[lang="ru"] .top-in,:root[lang="kk"] .top-in{gap:20px}
  :root[lang="ru"] .menu,:root[lang="kk"] .menu{gap:14px}
}
/* narrow desktop, just above the menu collapse: the gutter is fluid here, so every language needs a tighter row */
@media (min-width:1181px) and (max-width:1299px){
  .top-in{gap:18px}
  .menu{gap:16px}
  :root[lang="ru"] .top-in,:root[lang="kk"] .top-in{gap:16px}
  :root[lang="ru"] .menu,:root[lang="kk"] .menu{gap:12px}
  :root[lang="ru"] .menu a,:root[lang="kk"] .menu a{font-size:.82rem}
}
/* R7.3.2: the Problems item makes the row 70 to 75 px wider in every language; until the container widens (1700 px)
   the row keeps inside the gutters with tighter gaps and a slightly smaller menu size */
@media (min-width:1181px) and (max-width:1699px){
  .top-in{gap:20px}
  .menu{gap:14px}
  .menu a{font-size:.84rem}
  :root[lang="ru"] .top-in,:root[lang="kk"] .top-in{gap:14px}
  :root[lang="ru"] .menu,:root[lang="kk"] .menu{gap:9px}
  :root[lang="ru"] .menu a,:root[lang="kk"] .menu a{font-size:.8rem}
}
@media (min-width:1181px) and (max-width:1299px){
  .top-in{gap:14px}
  .menu{gap:11px}
  .menu a{font-size:.82rem}
  :root[lang="ru"] .top-in,:root[lang="kk"] .top-in{gap:8px}
  :root[lang="ru"] .menu,:root[lang="kk"] .menu{gap:8px}
  :root[lang="ru"] .menu a,:root[lang="kk"] .menu a{font-size:.78rem}
}

@media (max-width:980px){
  .credo-grid{grid-template-columns:1fr;gap:10px}
}

/* ---------- phones ---------- */
@media (max-width:767px){
  .brand{gap:8px}
  .hero-grid{grid-template-areas:"eye eye" "name pic" "head pic" "lead lead" "motto motto" "ctx ctx" "metrics metrics" "cta cta"}
  .hero-motto{grid-area:motto;margin:16px 0 0;font-size:.68rem;letter-spacing:.14em}
  .foot-id{gap:0 12px}
}
/* small phones: a smaller lockup keeps the header on one row inside the gutters at 390-419 px */
@media (max-width:419px){
  .brand{gap:7px}
  .brand .stm{width:27px;height:20px}
  .brand-name{font-size:1.0625rem}
}
/* narrow phones (below 390 px): the mark alone links home; the name stays in the DOM for screen readers */
@media (max-width:389px){
  .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:359px){
  .hero-grid{grid-template-areas:"eye" "name" "head" "pic" "lead" "motto" "ctx" "metrics" "cta"}
}