/* References proof block (templates/blocks/references_compact.html.j2).
   Header, a sector count strip, then one panel with the job filter, a grid of
   client tiles and the show-more row. Same editorial vocabulary as the fee
   summary and the process flowchart: cream section, white panel with a hairline
   border, mono kickers, display-serif names, cobalt accents, 2px radii.
   Without JS the first `limit` tiles show and the filter/more controls stay hidden. */
.ref-proof {
  --rp-cobalt: var(--color-cobalt, #1e40af);
  --rp-ink: var(--color-ink, #0f172a);
  --rp-rule: var(--color-rule, rgba(15, 23, 42, .12));
  --rp-muted: rgba(15, 23, 42, .66);
  padding: 72px 0 56px;
  background: var(--color-cream, #faf8f3);
}

.ref-proof__head { max-width: 680px; margin: 0 auto 2rem; text-align: center; }
.ref-proof__eyebrow {
  margin: 0 0 .75rem;
  font-family: var(--font-mono, monospace); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rp-cobalt);
}
.ref-proof__head h2 {
  margin: 0 0 .6rem;
  font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.015em;
  color: var(--rp-ink);
}
.ref-proof__intro { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--rp-muted); }

/* Sector strip: total first, then one cell per about.yaml category. */
.ref-proof__sectors {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: 1.25fr repeat(5, 1fr);
  border: 1px solid var(--rp-rule); border-radius: 2px; background: #fff;
}
.ref-proof__sector {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem 1.1rem; border-left: 1px solid var(--rp-rule);
}
.ref-proof__sector:first-child { border-left: 0; }
.ref-proof__sector--total { border-left: 0; box-shadow: inset 4px 0 0 var(--rp-cobalt); padding-left: 1.4rem; }
.ref-proof__num {
  font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.75rem;
  line-height: 1; letter-spacing: -.02em; color: var(--rp-ink); font-variant-numeric: tabular-nums;
}
.ref-proof__sector--total .ref-proof__num { color: var(--rp-cobalt); font-size: 2.1rem; }
.ref-proof__label {
  font-family: var(--font-mono, monospace); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.35; color: var(--rp-muted);
}

/* Panel */
.ref-proof__panel {
  background: #fff; border: 1px solid var(--rp-rule); border-radius: 2px;
  padding: 1.25rem 1.5rem 1.25rem;
}

.ref-proof__toolbar { display: none; }
html.js-enabled .ref-proof__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rp-rule);
}
.ref-proof__toolbar-label {
  font-family: var(--font-mono, monospace); font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rp-muted);
}
.ref-proof__filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.ref-filter {
  display: inline-flex; align-items: baseline; gap: .45rem;
  min-height: 40px; padding: .5rem .85rem;
  border: 1px solid #cdd5e3; border-radius: 2px; background: #fff;
  font-family: var(--font-body, sans-serif); font-size: .88rem; font-weight: 500; line-height: 1.2;
  color: var(--rp-ink); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ref-filter:hover { border-color: #2563eb; color: var(--rp-cobalt); }
.ref-filter:focus-visible,
.ref-proof__more:focus-visible,
.ref-proof__links a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.ref-filter[aria-pressed="true"] { background: #1e40af; border-color: #1e40af; color: #fff; }
.ref-filter__count {
  font-family: var(--font-mono, monospace); font-size: .74rem; font-variant-numeric: tabular-nums; opacity: .7;
}

/* Tiles: three columns of hairline-ruled entries. */
.ref-proof__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem;
}
.ref-tile {
  display: flex; flex-direction: column; gap: .2rem;
  padding: 1rem 0 1rem .9rem; border-bottom: 1px solid var(--rp-rule);
  box-shadow: inset 2px 0 0 transparent; transition: box-shadow .2s ease;
}
.ref-tile:hover { box-shadow: inset 2px 0 0 var(--rp-cobalt); }
.ref-tile[hidden] { display: none; }
.ref-tile__sector {
  font-family: var(--font-mono, monospace); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rp-cobalt);
}
.ref-tile__name {
  font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.04rem;
  line-height: 1.3; letter-spacing: -.005em; color: var(--rp-ink);
}
.ref-tile__jobs { font-size: .84rem; line-height: 1.45; color: var(--rp-muted); }

.ref-tile:focus { outline: none; }
.ref-tile:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.ref-proof__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; padding-top: 1.1rem;
}
.ref-proof__reveal { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.ref-proof__count {
  margin: 0; font-family: var(--font-mono, monospace); font-size: .74rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--rp-muted);
}
.ref-proof__count:empty { display: none; }
.ref-proof__more { display: none; }
html.js-enabled .ref-proof__more {
  display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1.2rem;
  border: 1px solid var(--rp-cobalt); border-radius: 2px; background: transparent;
  font-family: var(--font-body, sans-serif); font-size: .9rem; font-weight: 500; color: var(--rp-cobalt);
  cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
html.js-enabled .ref-proof__more:hover { background: var(--rp-cobalt); color: #fff; }
html.js-enabled .ref-proof__more[hidden] { display: none; }
.ref-proof__links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; margin-left: auto; }
.ref-proof__links a {
  font-family: var(--font-body, sans-serif); font-size: .92rem; font-weight: 500;
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease;
}
.ref-proof__full { color: var(--rp-muted); }
.ref-proof__full:hover { color: var(--rp-ink); border-bottom-color: currentColor; }
.ref-proof__links .ref-proof__cta { color: #2563eb; font-weight: 600; }
.ref-proof__cta:hover { border-bottom-color: currentColor; }

@media (max-width: 1100px) {
  .ref-proof__sectors { grid-template-columns: repeat(3, 1fr); }
  .ref-proof__sector:nth-child(n+4) { border-top: 1px solid var(--rp-rule); }
  .ref-proof__sector:nth-child(3n+1) { border-left: 0; }
}

@media (max-width: 860px) {
  .ref-proof { padding: 48px 0 40px; }
  .ref-proof__head { text-align: left; margin-bottom: 1.5rem; }
  .ref-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}

@media (max-width: 560px) {
  /* Sectors become a one-column ledger: no orphan cell with five sectors. */
  .ref-proof__sectors { grid-template-columns: 1fr; padding: .35rem 0; }
  .ref-proof__sector,
  .ref-proof__sector:nth-child(n) {
    flex-direction: row; align-items: baseline; gap: .75rem;
    padding: .45rem 1rem .45rem 1.25rem; border: 0;
  }
  .ref-proof__sector--total:nth-child(n) { padding: .55rem 1rem .7rem 1.25rem; margin-bottom: .2rem; box-shadow: inset 4px 0 0 var(--rp-cobalt); }
  .ref-proof__num { min-width: 2.4ch; font-size: 1.3rem; }
  .ref-proof__sector--total .ref-proof__num { font-size: 1.65rem; }
  .ref-proof__panel { padding: 1rem 1rem 1.1rem; }
  /* Filters scroll sideways in one row, bleeding to the panel edge so the
     cut-off chip signals there is more. */
  html.js-enabled .ref-proof__toolbar { gap: .6rem; }
  .ref-proof__filters {
    flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2rem);
    margin: 0 -1rem; padding: 0 1rem 2px; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .ref-proof__filters::-webkit-scrollbar { display: none; }
  .ref-filter { flex: 0 0 auto; white-space: nowrap; font-size: .85rem; padding: .45rem .75rem; }
  .ref-proof__grid { grid-template-columns: 1fr; }
  .ref-tile { padding: .8rem 0 .8rem .75rem; }
  .ref-proof__foot { flex-direction: column; align-items: stretch; }
  .ref-proof__reveal { flex-direction: column; align-items: stretch; text-align: center; }
  html.js-enabled .ref-proof__more { justify-content: center; }
  .ref-proof__links { margin-left: 0; flex-direction: column; align-items: flex-start; gap: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ref-filter, .ref-tile, .ref-proof__more, .ref-proof__links a { transition: none; }
}

/* ===== Tanácsadás ad page only (content/ads-kozbeszerzesi-tanacsadas.yaml) =====
   This file is loaded by that page and the szabályzat page, every selector below
   is a class only the ad page renders. Three pieces:
   1. .hero-facts: the four proof numbers in the page-hero side column
      (page_header side kind "html"). Same cream card, cobalt top rule and shadow
      as the .proof-block it replaced, numbers in a 2x2 ledger.
   2. .advisor-intro: the #szakerto block under the hero (photo, H2, three
      first-person lines, call + form buttons).
   3. .director-name: the director card next to the form renders the name as
      text (name_as_text), styled like the H2 it replaced. */
.hero-facts {
  list-style: none; margin: 0; padding: 0; width: 100%; max-width: 460px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--color-cream, #faf8f3);
  border-top: 4px solid var(--color-cobalt, #1e40af); border-radius: 2px;
  box-shadow: 0 18px 52px rgba(3, 7, 18, .45);
  text-align: left;
}
.hero-facts__item {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.6rem 1.6rem 1.5rem;
  border-bottom: 1px solid rgba(15, 23, 42, .1);
}
.hero-facts__item:nth-child(odd) { border-right: 1px solid rgba(15, 23, 42, .1); }
.hero-facts__item:nth-child(n+3) { border-bottom: 0; }
.hero-facts__num {
  font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 2.6rem;
  line-height: 1; letter-spacing: -.02em; color: var(--color-ink, #0f172a);
  font-variant-numeric: tabular-nums;
}
.hero-facts__item--lead .hero-facts__num { color: var(--color-cobalt, #1e40af); }
.hero-facts__label {
  font-family: var(--font-mono, monospace); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.4; color: rgba(15, 23, 42, .66);
}
@media (max-width: 1023px) {
  .page-hero-container:has(.hero-facts-wrap) { gap: 1.75rem; }
  .hero-facts { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hero-facts { box-shadow: 0 10px 28px rgba(3, 7, 18, .35); }
  .hero-facts__item { gap: .3rem; padding: .8rem .9rem .75rem; }
  .hero-facts__num { font-size: 1.55rem; }
  .hero-facts__label { font-size: .6rem; letter-spacing: .06em; }
}

.prose-section.advisor-intro-section { padding: 56px 0; background: #fff; }
.prose-section.advisor-intro-section .prose-content { max-width: 960px; }
.advisor-intro {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2.5rem; align-items: center;
}
.advisor-intro__photo {
  display: block; width: 200px; height: 200px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.prose-section .advisor-intro__eyebrow {
  margin: 0 0 .6rem; font-family: var(--font-mono, monospace); font-size: .72rem; font-weight: 600;
  line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--color-cobalt, #1e40af);
}
.prose-section.advisor-intro-section h2 {
  margin: 0 0 .9rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.15;
}
.prose-section .advisor-intro__text { margin: 0 0 1.4rem; }
.advisor-intro__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.advisor-intro__actions .btn { border-radius: 2px; padding: 12px 22px; }
@media (max-width: 767px) {
  .prose-section.advisor-intro-section { padding: 36px 0 40px; }
  .advisor-intro { grid-template-columns: 88px minmax(0, 1fr); gap: 0 1rem; align-items: start; }
  .advisor-intro__photo { width: 88px; height: 88px; }
  /* Photo beside eyebrow + name, text and buttons full width below. */
  .advisor-intro__body { display: contents; }
  .prose-section .advisor-intro__eyebrow { grid-column: 2; margin-bottom: .35rem; font-size: .66rem; letter-spacing: .1em; }
  .prose-section.advisor-intro-section h2 { grid-column: 2; font-size: 1.35rem; margin-bottom: 0; }
  .advisor-intro__photo { grid-row: 1 / span 2; }
  .prose-section .advisor-intro__text { grid-column: 1 / -1; margin: 1rem 0 1.1rem; font-size: .98rem; line-height: 1.6; }
  .advisor-intro__actions { grid-column: 1 / -1; flex-direction: column; }
  .advisor-intro__actions .btn { text-align: center; }
}

.director-intro-compact .director-info .director-name {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  line-height: 1.2; letter-spacing: -.005em; color: var(--color-ink); text-align: left; margin: 0;
}

/* ===== Támogatott projektek page (content/service-ajanlatkeroknek-tamogatott-projektek.yaml) =====
   Added 2026-11-01, v14. Every selector below is a class only that page renders.
   1. .hero-card: one cream card in the page-hero side column with Benkó's photo and
      name (.hero-advisor) on top and the three proof numbers in one row
      (.hero-facts--row) below. Same cobalt top rule and shadow as .hero-facts.
      Mobile budget about 220 px so the first screen holds H1, buttons, face, numbers.
   2. .scope-note--single: the "Mit vállalunk" list without the "Kinek nem szól"
      column. No transitions anywhere, so no reduced-motion block is needed. */
.hero-card {
  width: 100%; max-width: 460px;
  background: var(--color-cream, #faf8f3);
  border-top: 4px solid var(--color-cobalt, #1e40af); border-radius: 2px;
  box-shadow: 0 18px 52px rgba(3, 7, 18, .45);
  text-align: left;
}
.hero-card .hero-facts {
  max-width: none; background: transparent; box-shadow: none; border-radius: 0;
  border-top: 1px solid rgba(15, 23, 42, .1);
}
.hero-advisor { display: flex; align-items: center; gap: 1.1rem; padding: 1.4rem 1.6rem; }
.hero-advisor__photo {
  display: block; flex: none; width: 88px; height: 88px; object-fit: cover; border-radius: 2px;
}
.page-hero .hero-advisor p { margin: 0; max-width: none; text-shadow: none; }
.page-hero .hero-advisor .hero-advisor__name {
  font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.3rem;
  line-height: 1.2; letter-spacing: -.01em; color: var(--color-ink, #0f172a);
}
.page-hero .hero-advisor .hero-advisor__title {
  margin-top: .3rem; font-family: var(--font-body, sans-serif); font-size: .9rem; line-height: 1.4;
  color: rgba(15, 23, 42, .72);
}
.hero-facts--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-facts--row .hero-facts__item { border-bottom: 0; border-right: 1px solid rgba(15, 23, 42, .1); padding: 1.2rem 1.25rem 1.15rem; }
.hero-facts--row .hero-facts__item:last-child { border-right: 0; }
.hero-facts--row .hero-facts__num { font-size: 2.1rem; }
.hero-facts--row .hero-facts__label {
  font-family: var(--font-body, sans-serif); font-size: .85rem; letter-spacing: 0;
  text-transform: none; color: rgba(15, 23, 42, .72);
}
/* Tap-to-call under the advisor's title (owner, 2026-11-01): the hero's second button is now
   "Mit vállalunk", so the phone stays on the first screen here. Padding keeps a ~44 px tap target. */
.page-hero .hero-advisor .hero-advisor__phone { margin-top: .35rem; }
.page-hero .hero-advisor .hero-advisor__phone a {
  display: inline-block; padding: .35rem 0; font-family: var(--font-body, sans-serif); font-weight: 600;
  font-size: 1rem; color: var(--color-accent-blue, #1d4ed8); text-decoration: none;
}
.page-hero .hero-advisor .hero-advisor__phone a:hover { text-decoration: underline; }
.page-hero .hero-advisor .hero-advisor__phone a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 1023px) {
  .hero-card { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hero-card { box-shadow: 0 10px 28px rgba(3, 7, 18, .35); }
  .hero-advisor { gap: .9rem; padding: .9rem 1rem; }
  .hero-advisor__photo { width: 64px; height: 64px; }
  .page-hero .hero-advisor .hero-advisor__name { font-size: 1.1rem; }
  .page-hero .hero-advisor .hero-advisor__title { margin-top: .15rem; font-size: .8rem; }
  .hero-facts--row .hero-facts__item { gap: .2rem; padding: .7rem .8rem .7rem; }
  .hero-facts--row .hero-facts__num { font-size: 1.45rem; }
  .hero-facts--row .hero-facts__label { font-size: .75rem; line-height: 1.3; letter-spacing: 0; }
}

.scope-note--single { grid-template-columns: minmax(0, 1fr); }
.scope-note--single::before { display: none; }
.scope-note--single .scope-note__col--yes { grid-column: 1; }
@media (min-width: 641px) {
  .scope-note--single .scope-note__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .95rem 3rem; }
}
/* Section anchors clear the 80 px fixed navbar (outreach emails may deep-link them).
   Scoped through .hero-card so no other page that loads this file changes. */
body:has(.hero-card) :is(#folyamat, #vallalasok, #dijak, #referenciak, #kapcsolat, #eszkozok, #gyik) { scroll-margin-top: 80px; }
/* 3. #projektek "Támogatott projektek közbeszerzése programonként" (reworked 2026-11-01, v17):
      SEO reference section between the form and the FAQ. White band between the two cream
      sections, small left-aligned serif H2 (same scale as #eszkozok), one hairline row per
      programme (dl), then two columns: typical purchases and the aggregation note. Quieter than
      the selling blocks: no cards, no shadows, no cobalt rules, no transitions. */
.prose-section.funding-guide-section { background: #fff; padding: 56px 0 60px; }
.funding-guide-section .prose-content { max-width: 1040px; }
.prose-section.funding-guide-section .funding-guide__heading {
  margin: 0 0 .6rem; font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -.01em;
  color: var(--color-ink, #0f172a); text-align: left;
}
.prose-section.funding-guide-section .funding-guide__lede {
  margin: 0 0 1.5rem; max-width: 64ch; font-size: .98rem; line-height: 1.6; color: rgba(15, 23, 42, .72);
}
.funding-guide__programmes { margin: 0; border-top: 1px solid var(--color-rule, rgba(15, 23, 42, .12)); }
.funding-guide__row {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0 2.5rem;
  padding: .95rem 0; border-bottom: 1px solid var(--color-rule, rgba(15, 23, 42, .12));
}
.funding-guide__row dt {
  font-family: var(--font-display, Georgia, serif); font-weight: 600; font-size: 1.05rem;
  line-height: 1.3; color: var(--color-ink, #0f172a);
}
.funding-guide__full {
  display: block; margin-top: .2rem; font-family: var(--font-body, sans-serif); font-weight: 400;
  font-size: .8rem; line-height: 1.4; color: rgba(15, 23, 42, .72);
}
.funding-guide__row dd {
  margin: 0; max-width: 68ch; font-family: var(--font-body, sans-serif); font-size: .95rem;
  line-height: 1.6; color: rgba(15, 23, 42, .82);
}
.funding-guide__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; margin-top: 2.25rem;
}
.prose-section.funding-guide-section .funding-guide__subheading {
  margin: 0 0 .75rem; font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: 1.1rem; line-height: 1.3; color: var(--color-ink, #0f172a);
}
.funding-guide__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem;
}
.funding-guide__list li {
  position: relative; padding-left: 1.1rem; font-family: var(--font-body, sans-serif);
  font-size: .95rem; line-height: 1.5; color: rgba(15, 23, 42, .82);
}
.funding-guide__list li::before {
  content: "–"; position: absolute; left: 0; top: 0; color: rgba(15, 23, 42, .5);
  font-family: var(--font-mono, monospace); font-weight: 600;
}
.prose-section.funding-guide-section .funding-guide__text {
  margin: 0 0 .75rem; font-size: .95rem; line-height: 1.6; color: rgba(15, 23, 42, .82);
}
.prose-section.funding-guide-section .funding-guide__text:last-child { margin-bottom: 0; }
.funding-guide__text a:focus-visible { outline: 2px solid var(--color-cobalt, #2563eb); outline-offset: 2px; }
@media (max-width: 760px) {
  .funding-guide__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .funding-guide__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .prose-section.funding-guide-section { padding: 40px 0 44px; }
  .funding-guide__list { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
}
body:has(.hero-card) #projektek { scroll-margin-top: 80px; }
/* 4. #eszkozok "Ingyenes eszközeink ajánlatkérőknek" (added 2026-11-01, v16): a quiet row of tool
      links between the form and the FAQ. White band, small serif H2, four hairline-topped cells
      (2 x 2 on tablet, stacked on mobile). No cards, no shadows, no transitions. */
.prose-section.tool-links-section { background: #fff; padding: 48px 0 52px; }
.tool-links-section .prose-content { max-width: 1040px; }
.prose-section.tool-links-section .tool-links__heading {
  margin: 0 0 1.25rem; font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -.01em;
  color: var(--color-ink, #0f172a); text-align: left;
}
.tool-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem;
}
.tool-links__item { margin: 0; padding: .9rem 0 0; border-top: 1px solid var(--color-rule, rgba(15, 23, 42, .12)); }
.tool-links__link {
  font-family: var(--font-body, sans-serif); font-size: .98rem; font-weight: 600; line-height: 1.35;
  color: var(--color-cobalt, #2563eb); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(37, 99, 235, .35);
}
.tool-links__link:hover { text-decoration-color: currentColor; }
.tool-links__link:focus-visible { outline: 2px solid var(--color-cobalt, #2563eb); outline-offset: 2px; }
.tool-links__desc {
  display: block; margin-top: .3rem; font-family: var(--font-body, sans-serif); font-size: .88rem;
  line-height: 1.45; color: rgba(15, 23, 42, .72);
}
@media (max-width: 900px) {
  .tool-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; }
}
@media (max-width: 560px) {
  .prose-section.tool-links-section { padding: 36px 0 40px; }
  .tool-links { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
}

/* Támogatott projektek "Mit vállalunk": outcome-led 2x2 (owner, 2026-11-01). Quiet on purpose,
   the hero card stays the one bold element. Only this page uses these classes. */
.outcome-grid__lede {
  max-width: 40rem; margin: -.5rem auto 2.25rem; text-align: center;
  font-family: var(--font-body, sans-serif); font-size: 1.1rem; line-height: 1.5; color: rgba(15, 23, 42, .72);
}
.outcome-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: 58rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3rem;
}
.outcome-grid__item { padding-top: 1.1rem; border-top: 1px solid rgba(15, 23, 42, .14); }
.outcome-grid__title {
  margin: 0 0 .45rem; font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em; color: var(--color-ink, #0f172a);
}
.outcome-grid__text {
  margin: 0; max-width: 34rem; font-family: var(--font-body, sans-serif); font-size: 1rem; line-height: 1.55;
  color: rgba(15, 23, 42, .78);
}
@media (max-width: 640px) {
  .outcome-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .outcome-grid__lede { margin-bottom: 1.5rem; font-size: 1rem; }
  .outcome-grid__title { font-size: 1.15rem; }
}

/* 5. #nyertes-palyazat-utan "Mire készüljön a közbeszerzésben a nyertes pályázat után?" (SEO context
      block, added 2026-11-01, v20): two informational paragraphs between the references and the
      tools row. White band, small left-aligned serif H2 (same scale as #eszkozok and #projektek),
      body at 68ch. No cards, no shadows, no transitions. */
.prose-section.context-note-section { background: #fff; padding: 56px 0 8px; }
.context-note-section .prose-content { max-width: 1040px; }
.prose-section.context-note-section .context-note__heading {
  margin: 0 0 1rem; max-width: 34ch; font-family: var(--font-display, Georgia, serif); font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.2; letter-spacing: -.01em;
  color: var(--color-ink, #0f172a); text-align: left;
}
.prose-section.context-note-section .context-note__text {
  margin: 0 0 1rem; max-width: 68ch; font-family: var(--font-body, sans-serif); font-size: 1rem;
  line-height: 1.7; color: rgba(15, 23, 42, .82); text-align: left;
}
.prose-section.context-note-section .context-note__text:last-child { margin-bottom: 0; }
.context-note__text a:focus-visible { outline: 2px solid var(--color-cobalt, #2563eb); outline-offset: 2px; }
body:has(.hero-card) #nyertes-palyazat-utan { scroll-margin-top: 80px; }
@media (max-width: 560px) {
  .prose-section.context-note-section { padding: 40px 0 4px; }
}

/* 5b. #nyertes-palyazat-utan centred column + risk list (owner, 2026-11-01: centre it, no single
       text block). The column is centred, the H2 centred like the page's other section headings,
       body text stays left-aligned for readability. */
.prose-section.context-note-section .context-note { max-width: 68ch; margin: 0 auto; }
.prose-section.context-note-section .context-note__heading { margin-left: auto; margin-right: auto; text-align: center; }
.prose-section.context-note-section .context-note__list { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.prose-section.context-note-section .context-note__list li {
  margin: 0 0 .7rem; padding-left: 1rem; border-left: 2px solid var(--color-accent-blue, #1d4ed8);
  font-family: var(--font-body, sans-serif); font-size: 1rem; line-height: 1.65; color: rgba(15, 23, 42, .82);
}
.prose-section.context-note-section .context-note__list strong { color: var(--color-ink, #0f172a); font-weight: 600; }

/* 5c. #nyertes-palyazat-utan read-more (owner, 2026-11-01): first paragraph visible, the rest in a
       native <details>. Content stays in the HTML (crawlable), no JS. The label swaps on [open]. */
.context-note__more { margin: 0; }
.context-note__toggle {
  display: inline-flex; align-items: center; gap: .4rem; margin: .1rem 0 0; padding: .35rem 0;
  cursor: pointer; list-style: none; font-family: var(--font-body, sans-serif); font-size: .95rem;
  font-weight: 600; color: var(--color-accent-blue, #1d4ed8);
}
.context-note__toggle::-webkit-details-marker { display: none; }
.context-note__toggle::after {
  content: ""; width: .45em; height: .45em; margin-top: -.2em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
.context-note__more[open] > .context-note__toggle::after { margin-top: .2em; transform: rotate(-135deg); }
.context-note__toggle:hover { text-decoration: underline; }
.context-note__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.context-note__toggle-less, .context-note__more[open] .context-note__toggle-more { display: none; }
.context-note__more[open] .context-note__toggle-less { display: inline; }
.context-note__more[open] > .context-note__toggle { margin-bottom: .9rem; }

/* Hero advisor portrait: round with a soft shadow (owner, 2026-11-01), matching the round portrait
   beside the callback form. Only this page uses .hero-advisor__photo. */
.hero-advisor__photo {
  border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .18), 0 1px 3px rgba(15, 23, 42, .12);
}

/* Advisor card credential rows next to the callback form (owner, 2026-11-01): four native <details>,
   title + chevron by default, the whole row toggles. Pure CSS, content stays crawlable. */
.director-points { margin: .9rem 0 .4rem; border-bottom: 1px solid rgba(15, 23, 42, .12); }
.director-point { border-top: 1px solid rgba(15, 23, 42, .12); }
.director-point > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-body, sans-serif); font-size: 1rem; font-weight: 600; color: var(--color-ink, #0f172a);
}
.director-point > summary::-webkit-details-marker { display: none; }
.director-point > summary::after {
  content: ""; flex: none; width: .5em; height: .5em; margin: -.25em .3rem 0 0;
  border-right: 2px solid var(--color-accent-blue, #1d4ed8); border-bottom: 2px solid var(--color-accent-blue, #1d4ed8);
  transform: rotate(45deg); transition: transform .15s ease;
}
.director-point[open] > summary::after { margin-top: .25em; transform: rotate(-135deg); }
.director-point > summary:hover { color: var(--color-accent-blue, #1d4ed8); }
.director-point > summary:focus-visible { outline: 2px solid var(--color-accent-blue, #1d4ed8); outline-offset: 2px; }
.director-point > p {
  margin: 0 0 .9rem; text-align: left; font-family: var(--font-body, sans-serif); font-size: .95rem; line-height: 1.6;
  color: rgba(15, 23, 42, .78);
}
@media (prefers-reduced-motion: reduce) { .director-point > summary::after { transition: none; } }
/* The card is a centred flex column, so .director-info shrink-wrapped its content and widened as rows
   opened. Stretch it to the card width when the credential rows are present. */
.director-intro-compact:has(.director-points) .director-info { align-self: stretch; width: 100%; }

/* Hero keyword chips (owner, 2026-11-01): the four credential labels, non-interactive. The full texts
   sit in the advisor card by the form (.director-points). Hidden on phones so the photo, phone and
   numbers keep the first screen. */
.page-hero .hero-card .hero-chips {
  display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0 1.6rem 1.25rem; list-style: none;
}
.page-hero .hero-card .hero-chips li {
  margin: 0; padding: .3rem .75rem; border: 1px solid rgba(15, 23, 42, .16); border-radius: 999px;
  background: #fff; font-family: var(--font-body, sans-serif); font-size: .82rem; line-height: 1.3;
  color: rgba(15, 23, 42, .8); white-space: nowrap;
}
@media (max-width: 560px) { .page-hero .hero-card .hero-chips { display: none; } }