/* NBMC V2 — arculati változók (A1 paletta, IBM Plex Sans).
   Minden oldal ezekből dolgozik; új színt vagy méretet ide vegyünk fel, ne a komponensekbe. */

/* IBM Plex: az IBM saját nyelvi részhalmazai (Latin1 + Latin2 a magyar ő/ű-höz, Pi a nyilakhoz);
   a böngésző csak a szövegben ténylegesen előforduló tartományt tölti le. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular-Latin2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium-Latin2.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-Medium-Pi.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-SemiBold-Pi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0E3F, U+2032-2033, U+2070, U+2075-2079, U+2080-2081, U+2083, U+2085-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular-Latin2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium-Latin2.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

:root {
  /* Színek — A1 */
  --c-ink: #183540;        /* fő szöveg, cím, sötét felület */
  --c-petrol: #35616d;     /* elsődleges gomb, link, finom hangsúly */
  --c-petrol-deep: #2a4f59;/* gomb hover/active (fehér szöveggel 8,9:1) */
  --c-paper: #fbfcfc;      /* fő háttér */
  --c-mist: #eef2f3;       /* másodlagos felület */
  --c-slate: #53616a;      /* másodlagos szöveg, képaláírás */
  --c-rule: #ccd5d8;       /* csak dekoratív elválasztó */
  --c-copper: #8a5838;     /* ritka meleg hangsúly */
  --c-white: #ffffff;
  --c-black: #0a0a0a;      /* lábléc háttere (a megrendelő kérésére fekete) */
  --c-on-ink-muted: #c9d5d9; /* másodlagos szöveg sötét alapon: tengerkéken 8,6:1, feketén 13,2:1 */
  --c-field: #53616a;      /* űrlapmező határa: lényeges határ, ezért nem a dekoratív vonalszín */
  --c-accent-on-ink: #e0b48f; /* a réz világos változata, kizárólag sötét felületen (tengerkéken 6,9:1) */
  --c-error: #9b2c1f;      /* hibaüzenet (7,4:1 törtfehéren) */

  /* Betűk */
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Méretek: mobil → asztali (390 → 1440 px) */
  --fs-display: clamp(2.375rem, 1.75rem + 2.6vw, 4rem);    /* nyitó főcím: 38 → 64 px */
  --fs-h1: clamp(2.25rem, 1.75rem + 2.1vw, 3.75rem);        /* aloldali főcím: 36 → 60 px */
  --fs-h2: clamp(1.75rem, 1.45rem + 1.25vw, 2.5rem);        /* szakaszcím: 28 → 40 px */
  --fs-h3: clamp(1.375rem, 1.3rem + 0.35vw, 1.625rem);      /* szolgáltatáscím: 22 → 26 px */
  --fs-h4: 1.1875rem;                                        /* kisebb egység címe: 19 px */
  --fs-lead: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);     /* bevezető: 18 → 20 px */
  --fs-statement: clamp(1.375rem, 1.15rem + 0.95vw, 2rem);  /* kiemelt állítás: 22 → 32 px */
  --fs-body: clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem);   /* törzsszöveg: 17 → 18 px */
  --fs-ui: 1rem;                                             /* navigáció, gomb */
  --fs-small: 0.875rem;                                      /* képaláírás, címke */
  --fs-mono: 0.875rem;

  --lh-display: 1.08;
  --lh-h2: 1.18;
  --lh-h3: 1.28;
  --lh-lead: 1.5;
  --lh-body: 1.6;
  --lh-small: 1.45;

  --measure: 30em;         /* olvasási hasáb ≈ 65 karakter: a Plex „0” jele (ch) szélesebb az átlagos magyar betűnél */

  /* Elrendezés */
  --container: 1280px;
  --gutter: clamp(20px, 4.2vw, 64px);   /* külső margó */
  --col-gap: clamp(20px, 2.2vw, 32px);  /* oszlopköz */
  --section: clamp(56px, 7.5vw, 112px); /* szakaszok közti tér */
  --header-h: 80px;

  --radius: 2px;
  --control-h: 48px;
  --rule: 1px solid var(--c-rule);
  --focus: 3px solid var(--c-petrol);
  --focus-on-dark: 3px solid var(--c-white);

  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-fast: 140ms;
}

@media (max-width: 767px) {
  :root { --header-h: 68px; }
}

/* Alapok és közös komponensek: fejléc, gombok, linkek, rács, lábléc, űrlap. */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  text-wrap: balance;
  hyphens: manual;
}
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-medium); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); }
p { text-wrap: pretty; }

a { color: var(--c-petrol); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-ink); text-decoration-thickness: 2px; }

:focus-visible { outline: var(--focus); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 16px;
  background: var(--c-ink); color: var(--c-white);
  font-weight: var(--fw-medium); text-decoration: none;
}
.skip-link:focus { top: 12px; outline: var(--focus-on-dark); }

/* --- Rács ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}
.grid > * { grid-column: 1 / -1; }

.section { padding-block: var(--section); }
.section--mist { background: var(--c-mist); }

.measure { max-width: var(--measure); }

/* --- Gombok és linkek ------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--control-h);
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit; font-size: var(--fs-ui); font-weight: var(--fw-medium); line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn--primary { background: var(--c-petrol); color: var(--c-white); }
.btn--primary:hover { background: var(--c-petrol-deep); color: var(--c-white); text-decoration: none; }
.btn--dark { background: var(--c-ink); color: var(--c-white); }
.btn--dark:hover { background: var(--c-petrol); color: var(--c-white); text-decoration: none; }
.btn--dark[aria-current="page"] { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn__icon { width: 14px; height: 14px; flex: none; }

/* Nyilas link: tördeléskor a nyíl az utolsó szóval együtt marad (layout.js), a kattintható felület nagyobb a szövegnél. */
.link-arrow {
  display: inline-block; position: relative;
  color: var(--c-petrol);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.link-arrow:hover { color: var(--c-ink); text-decoration-thickness: 2px; }
.link-arrow::after { content: ""; position: absolute; inset: -8px -4px; }
.link-arrow__nowrap { white-space: nowrap; }
.link-arrow__icon { display: inline-block; width: 12px; height: 12px; margin-left: 10px; vertical-align: -.05em; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover .link-arrow__icon { transform: translateX(3px); }

.link-quiet {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
  text-decoration: underline;
  text-decoration-color: var(--c-ink);
  text-underline-offset: 0.35em;
}
.link-quiet:hover { color: var(--c-petrol); text-decoration-color: var(--c-petrol); }

.label {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
  color: var(--c-slate);
  letter-spacing: 0.02em;
}

.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0; }

/* --- Fejléc ----------------------------------------------------------- */

.site-header {
  position: relative; z-index: 20;
  background: var(--c-paper);
  border-bottom: var(--rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--header-h);
}
.brand { display: block; flex: none; line-height: 0; }
.brand img { width: auto; height: 46px; }
@media (max-width: 767px) { .brand img { height: 38px; } }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); }
.nav__list { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 36px); }
.nav__link {
  display: inline-block; padding-block: 10px;
  color: var(--c-ink); text-decoration: none;
  font-size: var(--fs-ui); font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--c-petrol); text-decoration: none; border-bottom-color: var(--c-rule); }
.nav__link[aria-current="page"] { border-bottom-color: var(--c-petrol); }

.nav-toggle { display: none; }

/* Három menüpont 640 px felett egy sorban elfér; alatta lenyitható menü. */
@media (max-width: 639px) {
  /* JavaScript nélkül a menü látható marad; a .js osztály kapcsolja be a lenyitható változatot. */
  .js .nav-toggle {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: var(--control-h); padding: 0 4px 0 12px;
    background: none; border: 0; color: var(--c-ink);
    font: inherit; font-size: var(--fs-ui); font-weight: var(--fw-medium);
    cursor: pointer;
  }
  .nav-toggle__bars { position: relative; width: 26px; height: 12px; }
  .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
    transition: transform var(--t-fast) var(--ease), top var(--t-fast) var(--ease);
  }
  .nav-toggle__bars::before { top: 0; }
  .nav-toggle__bars::after { top: 10px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 5px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 5px; transform: rotate(-45deg); }

  .site-header__inner { flex-wrap: wrap; }
  .nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 16px; padding-bottom: 20px; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li + li { border-top: var(--rule); }
  .nav__link { display: block; padding-block: 14px; font-size: 1.125rem; border-bottom: 0; }
  .nav .btn { width: 100%; }
  .js .nav { display: none; }
  .js .nav.is-open { display: flex; }
}

/* --- Lábléc ----------------------------------------------------------- */

.site-footer {
  background: var(--c-black);
  color: var(--c-white);
  padding-block: clamp(56px, 6vw, 88px) 32px;
  font-size: 0.9375rem;
  line-height: 1.55;
}
.site-footer a { color: var(--c-white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.site-footer :focus-visible { outline: var(--focus-on-dark); }

.footer__top { row-gap: 40px; }
.footer__brand { grid-column: 1 / -1; }
.footer__brand img { height: 52px; width: auto; }
.footer__intro { margin-top: 20px; max-width: 30ch; color: var(--c-on-ink-muted); }
.footer__cols {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--col-gap);
}
.footer__title { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-on-ink-muted); letter-spacing: 0.02em; margin-bottom: 12px; }
.footer__links li + li { margin-top: 8px; }
@media (max-width: 767px) {
  .footer__links a { display: inline-block; padding-block: 8px; }
  .footer__links li + li { margin-top: 0; }
}
.footer__bottom {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: var(--c-on-ink-muted);
  font-size: var(--fs-small);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px;
}
.footer__registry { max-width: 80ch; }
.nowrap { white-space: nowrap; }
@media (max-width: 479px) { .footer__registry .nowrap { white-space: normal; } }
@media (min-width: 768px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .footer__brand { grid-column: 1 / span 4; }
  .footer__cols { grid-column: 5 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Űrlap ------------------------------------------------------------ */

.form { display: grid; gap: 24px; max-width: 720px; }
.field { display: grid; gap: 6px; }
.field__label { font-weight: var(--fw-medium); }
.field__req { color: var(--c-slate); font-weight: var(--fw-regular); font-size: var(--fs-small); margin-left: 6px; }
.field__hint { color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); }
.field__control {
  width: 100%;
  min-height: var(--control-h);
  padding: 11px 14px;
  background: var(--c-white);
  color: var(--c-ink);
  border: 1px solid var(--c-field);
  border-radius: var(--radius);
  font: inherit; font-size: 1rem; line-height: 1.5;
  -webkit-appearance: none; appearance: none;
}
select.field__control {
  padding-right: 44px;
  background: var(--c-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23183540' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px;
}
textarea.field__control { min-height: 160px; resize: vertical; line-height: 1.5; }
.field__control:focus-visible { outline: var(--focus); outline-offset: 1px; border-color: var(--c-petrol); }
.field__error { color: var(--c-error); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.field.is-invalid .field__control { border: 2px solid var(--c-error); padding: 10px 13px; }
.form__status {
  padding: 14px 16px;
  border-left: 3px solid var(--c-petrol);
  background: var(--c-mist);
}
.form__status--error { border-left-color: var(--c-error); }
.form__privacy { color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); }
.form__grid { display: grid; gap: 24px; }

/* --- Mozgás ------------------------------------------------------------------
   [data-reveal]: a .motion osztályt csak a v2.js teszi fel (JS és mozgás engedélyezése esetén),
   így JS nélkül, nyomtatásban és csökkentett mozgásnál minden azonnal látszik. */
.motion-ready [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.motion-ready [data-reveal].is-in { opacity: 1; transform: none; }
@media print { .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Főoldal (a tulajdonos 2026. október 26-i specifikációja). Mobil-első: felső sor → cím → bevezető → gomb → fotó.
   1024 px felett a szövegblokk a fotó égboltrészére kerül, egy halvány papírszínű átmenet mögé.
   Asztalon a szakaszok közös bal szövegéle az 5. oszlop (a címek az 1–4. oszlopban). */

/* --- Nyitófelület ---------------------------------------------------- */

.hero { display: grid; }

.hero__head { padding-block: clamp(36px, 8vw, 56px) 36px; }
.hero__kicker {
  color: var(--c-petrol);
  font-size: 0.8125rem; font-weight: var(--fw-medium);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.hero__title {
  margin-top: 16px;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.028em;
  max-width: 13ch;
}
.hero__lead {
  margin-top: 20px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  max-width: 34em;
}
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  margin-top: 28px;
}

.hero__media { position: relative; margin: 0; background: var(--c-mist); }
.hero__media img { width: 100%; height: auto; aspect-ratio: 887 / 490; object-fit: cover; }
.hero__caption {
  position: absolute; right: 12px; bottom: 12px;
  padding: 3px 8px;
  background: rgba(24, 53, 64, .78);
  color: var(--c-white);
  font-size: 0.75rem; line-height: 1.4;
}

@media (min-width: 1024px) {
  .hero {
    grid-template-areas: "stage";
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__media { grid-area: stage; }
  .hero__media img {
    aspect-ratio: auto;
    height: clamp(600px, 48vw, 780px);
    object-position: 50% 30%;
  }
  /* a szöveg mögött balról halványuló papírszín: a fák és a felhők fölött is olvasható marad */
  .hero__media::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(251, 252, 252, .94) 0%, rgba(251, 252, 252, .82) 30%, rgba(251, 252, 252, .35) 50%, rgba(251, 252, 252, 0) 62%);
  }
  .hero__head {
    grid-area: stage;
    align-self: center;
    position: relative; z-index: 1;
    padding-block: 48px;
  }
  .hero__title { max-width: 10.5em; }
  .hero__lead { max-width: 26em; font-size: clamp(1.1875rem, 0.95rem + 0.4vw, 1.375rem); line-height: 1.45; }
  .hero__caption { right: 20px; bottom: 16px; z-index: 1; }
}

/* Széles és ultraszéles kijelzőn a kép a tartalmi hasábhoz igazodik, nem a képernyő széléhez:
   a bal szövegél után 260 px-nél kezdődik, balra papírszín, így az épület mindig a szöveg jobb oldalán marad. */
@media (min-width: 1280px) {
  .hero { background: var(--c-paper); }
  .hero__media { margin-left: calc(max(var(--gutter), (100% - var(--container)) / 2) + 260px); }
  .hero__media img { object-position: 78% 30%; }
  .hero__media::after {
    background: linear-gradient(90deg, rgba(251, 252, 252, 1) 0%, rgba(251, 252, 252, .86) 14%, rgba(251, 252, 252, .45) 30%, rgba(251, 252, 252, 0) 44%);
  }
}

/* --- Szolgáltatásaink: három kiemelt sor, alatta egyszerű linksor ----------- */

.core__title { max-width: 22ch; }
.areas { margin-top: clamp(28px, 3.5vw, 48px); }
.area {
  display: grid; gap: 10px var(--col-gap);
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--c-ink);
}
.area:last-child { border-bottom: var(--rule); }
.area__title { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.375rem); line-height: 1.12; font-weight: var(--fw-semibold); letter-spacing: -0.018em; }
.area__body { display: grid; gap: 10px; justify-items: start; }
.area__body p { max-width: var(--measure); font-size: var(--fs-lead); line-height: var(--lh-lead); }
@media (min-width: 1024px) {
  .area { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .area__title { grid-column: 1 / span 5; }
  .area__body { grid-column: 7 / span 6; }
}

/* kapcsolódó feladatok: a fő sorok alá rendelve, kisebb címmel és egysoros leírással */
.related-links { margin-top: clamp(36px, 4.5vw, 64px); }
.related-links__title { font-size: var(--fs-h4); line-height: 1.35; font-weight: var(--fw-medium); color: var(--c-slate); }
.related-links__list { display: grid; margin-top: 16px; border-top: var(--rule); }
.sub { display: grid; gap: 4px var(--col-gap); padding-block: 14px; border-bottom: var(--rule); }
.sub__name { font-size: 1.125rem; font-weight: var(--fw-medium); color: var(--c-ink); text-decoration: none; justify-self: start; }
a.sub__name { text-decoration: underline; text-decoration-color: var(--c-rule); text-underline-offset: .3em; }
a.sub__name:hover { color: var(--c-petrol); text-decoration-color: var(--c-petrol); }
.sub__body { color: var(--c-slate); max-width: var(--measure); }
@media (min-width: 1024px) {
  .sub { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .sub__name { grid-column: 1 / span 5; }
  .sub__body { grid-column: 7 / span 6; }
}

/* --- Fázisvonal: bármelyik szakaszban bekapcsolódunk ----------------------
   Sötét (tengerkék) sáv; asztalon vízszintes vonal csomópontokkal, mobilon függőleges. */

.phases {
  background: var(--c-ink);
  color: var(--c-white);
  padding-block: clamp(64px, 8vw, 112px);
}
.phases :focus-visible { outline: var(--focus-on-dark); }
.phases__eyebrow {
  display: flex; align-items: center; gap: 14px;
  color: var(--c-accent-on-ink);
  font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.04em;
}
.phases__eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.phases__title {
  margin-top: 18px;
  font-size: clamp(1.875rem, 1.45rem + 1.6vw, 3rem);
  line-height: 1.12;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.phases__note { margin-top: 10px; color: var(--c-on-ink-muted); max-width: var(--measure); }
.phases__title:first-child { margin-top: 0; }
.phases__intro { margin-top: 18px; color: var(--c-on-ink-muted); max-width: var(--measure); font-size: var(--fs-lead); line-height: var(--lh-lead); }

.phases__list { position: relative; display: grid; margin-top: clamp(40px, 5vw, 64px); }
.phase { position: relative; padding: 0 0 32px 40px; }
.phase:last-child { padding-bottom: 0; }
/* függőleges vonal (mobil) */
.phase::before {
  content: ""; position: absolute; left: 7px; top: 16px; bottom: -2px;
  width: 2px; background: rgba(255, 255, 255, .28);
}
.phase:last-child::before { display: none; }
.phase__dot {
  position: absolute; left: 0; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--c-accent-on-ink); background: var(--c-ink);
}
.phase__name { font-size: 1.3125rem; font-weight: var(--fw-semibold);
  margin-top: 0; line-height: 1.3; color: var(--c-white); }
.phase__services { margin-top: 10px; display: grid; gap: 4px; font-size: 0.9375rem; line-height: 1.45; }
.phase__services a, .phases__throughout a { color: var(--c-on-ink-muted); text-decoration: underline; text-decoration-color: rgba(201, 213, 217, .4); text-underline-offset: .25em; }
.phase__services a:hover, .phases__throughout a:hover { color: var(--c-white); text-decoration-color: var(--c-white); }
.phase__services a, .phase__services span { display: inline-block; padding-block: 4px; }
.phase__services span { color: var(--c-on-ink-muted); }

.phases__throughout {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: var(--c-on-ink-muted);
}
.phases__throughout-label { color: var(--c-white); font-weight: var(--fw-medium); margin-right: 6px; }
.phases__throughout a { color: var(--c-white); }
.phases__more { margin-top: 28px; }
.phases .link-arrow { color: var(--c-white); }
.phases .link-arrow:hover { color: var(--c-on-ink-muted); }

@media (min-width: 1024px) {
  .phases__list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--col-gap); }
  /* vízszintes vonal a csomópontokon át */
  .phases__list::before {
    content: ""; position: absolute; left: 0; right: 0; top: 9px;
    height: 2px; background: rgba(255, 255, 255, .28);
  }
  .phase { padding: 40px 0 0; }
  .phase::before { display: none; }
  .phase__dot { top: 2px; }
}

/* Fázisvonal mozgása: a vonal balról jobbra (mobilon felülről lefelé) kirajzolódik, a fázisok sorban megjelennek.
   Csak .motion esetén (JS + nincs csökkentett mozgás kérés). */
.motion [data-reveal="line"] { opacity: 1; transform: none; }
.motion [data-reveal="line"] .phase { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 250ms); }
.motion [data-reveal="line"].is-in .phase { opacity: 1; transform: none; }
.motion [data-reveal="line"] .phase::before { transform: scaleY(0); transform-origin: top center; transition: transform .45s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 400ms); }
.motion [data-reveal="line"].is-in .phase::before { transform: scaleY(1); }
@media (min-width: 1024px) {
  .motion [data-reveal="line"]::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease) .1s; }
  .motion [data-reveal="line"].is-in::before { transform: scaleX(1); }
}

/* --- Munkamódszer: állítás, négy kérdés, a saját tervrajzfotó teljes szélességben ---- */

.work { border-top: var(--rule); }
.work__text { display: grid; gap: 24px var(--col-gap); }
.work__title { font-size: var(--fs-h2); max-width: 20ch; }
.work__body { display: grid; gap: 1em; justify-items: start; }
.work__body p { max-width: var(--measure); }
.work__questions { display: grid; gap: 6px; padding: 4px 0 4px 20px; border-left: 2px solid var(--c-petrol); }
.work__questions li { font-size: var(--fs-lead); line-height: 1.4; font-weight: var(--fw-medium); }
.work__media { margin: clamp(32px, 4vw, 56px) 0 0; }
.work__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-mist); }
.work__caption { margin-top: 10px; color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); }
@media (min-width: 1024px) {
  .work__text { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .work__title { grid-column: 1 / span 5; }
  .work__body { grid-column: 7 / span 6; padding-top: 8px; }
  .work__media img { aspect-ratio: 2 / 1; }
}

/* lépéssor (aloldalak munkamenete) */
.steps { display: grid; gap: 0 var(--col-gap); margin-top: 32px; }
.step { padding-block: 22px 26px; border-top: 1px solid var(--c-ink); }
.step__num { color: var(--c-copper); font-weight: var(--fw-medium); }
.step__title { margin-top: 10px; font-size: var(--fs-h4); line-height: 1.35; font-weight: var(--fw-medium); }
.step__body { margin-top: 8px; max-width: 44ch; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Szemléltető dokumentumrészlet */
.excerpt { margin-top: 40px; }
.excerpt__caption { margin-bottom: 10px; }
.excerpt__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-white);
  border: var(--rule);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.excerpt__table th, .excerpt__table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: var(--rule); }
.excerpt__table th { color: var(--c-slate); font-weight: var(--fw-medium); background: var(--c-paper); }
.excerpt__table tr:last-child td { border-bottom: 0; }
.excerpt__table td:first-child { color: var(--c-slate); white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; flex: none; background: currentColor; }
.status--open { color: var(--c-copper); }
.status--pending { color: var(--c-petrol); }
.status--closed { color: var(--c-slate); }
.status--closed::before { background: none; border: 1.5px solid currentColor; }

@media (max-width: 639px) {
  .excerpt__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .excerpt__table, .excerpt__table tbody, .excerpt__table tr, .excerpt__table td { display: block; }
  .excerpt__table tr { padding: 12px 14px; border-bottom: var(--rule); }
  .excerpt__table tr:last-child { border-bottom: 0; }
  .excerpt__table td { padding: 2px 0; border: 0; display: grid; grid-template-columns: 6.5rem 1fr; gap: 8px; }
  .excerpt__table td::before { content: attr(data-label); color: var(--c-slate); }
}


/* --- Szakmai referenciák / NBMC-projektek (csak ellenőrzött adatlappal) --- */

.home-collection { border-top: var(--rule); }
.home-collection__head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.home-collection__intro { max-width: var(--measure); color: var(--c-slate); }
.home-collection__more { margin-top: 32px; }

/* --- Mérnökök és partnerek ---------------------------------------------- */

.people { border-top: var(--rule); }
.people__eyebrow { color: var(--c-petrol); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; }
.people__title { margin-top: 14px; font-size: clamp(1.875rem, 1.45rem + 1.6vw, 3rem); line-height: 1.12; font-weight: var(--fw-semibold); letter-spacing: -0.02em; max-width: 16ch; }
.people__text { display: grid; gap: 1em; margin-top: 28px; justify-items: start; }
.people__text p { max-width: var(--measure); }
.people__lead { font-size: var(--fs-statement); line-height: 1.32; font-weight: var(--fw-medium); letter-spacing: -0.01em; max-width: 28ch !important; }
.people__partner { margin-top: 20px; padding-top: 22px; border-top: var(--rule); display: grid; gap: .6em; justify-items: start; }
.people__partner-label { font-size: var(--fs-small); color: var(--c-slate); font-weight: var(--fw-medium); }
@media (min-width: 1024px) {
  .people__head { grid-column: 1 / span 5; }
  .people__text { grid-column: 7 / span 6; margin-top: 0; padding-top: 6px; }
}

/* --- Az iroda (rövid) ------------------------------------------------------ */

.office { border-top: var(--rule); }
.office__title { max-width: 20ch; }
.office__text { display: grid; gap: 1em; margin-top: 24px; justify-items: start; }
.office__text p { max-width: var(--measure); }
@media (min-width: 1024px) {
  .office__title { grid-column: 1 / span 5; }
  .office__text { grid-column: 7 / span 6; margin-top: 0; padding-top: 6px; }
}

/* --- Képjogi megjegyzés a lábléc előtt ----------------------------------- */

.image-note { padding-block: 18px; border-top: var(--rule); }
.image-note p { color: var(--c-slate); font-size: 0.8125rem; line-height: 1.5; max-width: 60em; }

/* --- Zárás (főoldal és aloldalak közös komponense) ---------------------- */

.closing { padding-block: clamp(64px, 8vw, 120px); }
.closing__title { font-size: clamp(1.875rem, 1.5rem + 1.3vw, 2.75rem); line-height: 1.12; font-weight: var(--fw-semibold); letter-spacing: -0.02em; max-width: 22ch; }
.closing__text { margin-top: 24px; }
.closing__text > * + * { margin-top: 1em; }
.closing__text > .actions, .closing__text > .btn { margin-top: 28px; }
.closing__text p { max-width: var(--measure); }
@media (min-width: 1024px) {
  .closing__title { grid-column: 1 / span 8; }
  .closing__text { grid-column: 5 / span 8; margin-top: clamp(24px, 2.5vw, 36px); }
}

/* --- Nyitókép belépése: egyszeri, lassú beállás; csak .motion esetén ------------------ */
.motion .hero__media img { animation: hero-settle 1.8s var(--ease) both; }
.motion .hero__title { animation: hero-rise .9s var(--ease) .15s both; }
@keyframes hero-settle { from { transform: scale(1.035); opacity: .85; } to { transform: none; opacity: 1; } }
@keyframes hero-rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.hero__media { overflow: hidden; }

/* Aloldalak: nyitóblokk, szakaszrács, listák, lépések, kérdések, adatsorok, navigációs blokkok,
   gyűjtőkártyák és adatlap. Asztalon a szakaszcím a bal 4 oszlopban, a szöveg az 5. oszloptól
   (közös bal szövegél) áll. A vonalak a hasáb teljes szélességét kapják, a folyószöveg a
   --measure olvasási hasábot. */

.flow > * + * { margin-top: 1em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.flow > .actions { margin-top: 1.5em; }

.nav__link.is-active { border-bottom-color: var(--c-petrol); }
@media (max-width: 899px) { .nav__link.is-active { color: var(--c-petrol); } }

.draft-notice {
  background: var(--c-mist);
  border-bottom: var(--rule);
  color: var(--c-slate);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  padding-block: 10px;
}

/* --- Morzsamenü -------------------------------------------------------- */

.crumbs { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-slate); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li:not(:last-child)::after { content: "/"; margin: 0 10px; color: var(--c-rule); }
.crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--c-slate); text-decoration: none; }
.crumbs a:hover { color: var(--c-petrol); text-decoration: underline; }
.crumbs [aria-current] { color: var(--c-ink); }

/* --- Nyitóblokk -------------------------------------------------------- */

.page-hero { padding-block: clamp(28px, 4vw, 44px) clamp(48px, 6vw, 88px); border-bottom: var(--rule); }
.page-hero__grid { margin-top: clamp(32px, 5vw, 64px); row-gap: 28px; }
.page-hero__title {
  font-size: var(--fs-h1);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.024em;
  max-width: 22ch;
}
.page-hero__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.page-hero__body p { max-width: var(--measure); }
.page-hero--404 .page-hero__grid { margin-top: 0; }
.page-hero--404 { padding-top: clamp(56px, 8vw, 120px); border-bottom: 0; }
/* Ha az első szakasz cím nélküli egységsor, a nyitóblokk alsó vonala elmarad (nincs kettős vonal). */
.page-hero--joined { border-bottom: 0; }
.page-hero--joined + .sp { padding-top: 0; }
@media (min-width: 1024px) {
  .page-hero__title { grid-column: 1 / span 8; grid-row: 1; }
  .page-hero__body { grid-column: 1 / span 8; grid-row: 2; }
}

/* Ugrólista a nyitóblokkban: asztalon a jobb 4 oszlopban, a bevezetővel egy sorban.
   Jogi oldalakon (hosszú, cím nélküli nyitás) mobilon is látható. */
.toc { display: none; }
@media (min-width: 1024px) {
  .toc {
    display: block;
    grid-column: 9 / span 4; grid-row: 2;
    align-self: start;
    padding-top: 16px;
    border-top: 1px solid var(--c-ink);
  }
  .page-hero__grid--toc .page-hero__body { grid-column: 1 / span 7; }
}
@media (max-width: 1023px) {
  .page-hero--legal .toc { display: block; padding-top: 12px; border-top: 1px solid var(--c-ink); }
  .page-hero--legal .toc__list a { padding-block: 10px; }
}
.toc__title { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-slate); letter-spacing: 0.02em; }
.toc__list { margin-top: 10px; display: grid; gap: 2px; counter-reset: toc; }
.toc__list li { counter-increment: toc; display: grid; grid-template-columns: 1.75rem 1fr; align-items: baseline; font-size: 0.9375rem; line-height: 1.4; }
.toc__list li::before { content: counter(toc, decimal-leading-zero); font-family: var(--font-mono); font-size: 0.75rem; color: var(--c-slate); }
.toc__list a { display: block; padding-block: 5px; color: var(--c-ink); text-decoration: none; }
.toc__list a:hover { color: var(--c-petrol); text-decoration: underline; }

/* --- Szakaszrács -------------------------------------------------------- */

.sp { padding-block: clamp(48px, 6vw, 88px); }
.sp + .sp { border-top: var(--rule); }
.sp__title-wrap { display: grid; gap: 14px; align-content: start; }
.sp__aside { color: var(--c-slate); max-width: 34ch; }
.sp__aside-title { font-size: var(--fs-h4); line-height: 1.35; font-weight: var(--fw-medium); color: var(--c-ink); }
.sp__body { margin-top: 24px; }
.sp__body > p, .sp__body .flow > p { max-width: var(--measure); }
.sp--untitled .sp__body { margin-top: 0; }
.sp__body > .sp__more { margin-top: 2em; }
.sp__subtitle { font-size: var(--fs-h4); line-height: 1.35; font-weight: var(--fw-medium); }
.sp__note { color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); max-width: var(--measure); padding-top: 12px; border-top: var(--rule); }
.sp__body > p + .sp__note { margin-top: 1.5em; }

@media (min-width: 1024px) {
  .sp__title, .svcnav__title { font-size: clamp(1.625rem, 1.2rem + 0.75vw, 2.125rem); }
  .sp__title { grid-column: 1 / span 4; position: sticky; top: 32px; align-self: start; }
  .sp__title-wrap { grid-column: 1 / span 4; }
  .sp__title-wrap .sp__title { position: static; }
  .sp__body { grid-column: 5 / span 8; margin-top: 4px; }
  .sp--entries.sp--untitled .sp__body, .sp--faq.sp--untitled .sp__body { grid-column: 1 / -1; }
}

/* Felelősségi szakasz: rézszínű kísérővonal — csak szöveges szakaszon, oldalanként egyszer;
   asztalon az oszlopközben, hogy a szöveg a közös bal élen maradjon. */
.sp--prose.sp--responsibility .sp__body { border-left: 2px solid var(--c-copper); padding-left: 16px; }
@media (min-width: 1024px) {
  .sp--prose.sp--responsibility .sp__body { border-left: 0; padding-left: 0; position: relative; }
  .sp--prose.sp--responsibility .sp__body::before { content: ""; position: absolute; left: calc(var(--col-gap) / -2 - 1px); top: .3em; bottom: .3em; width: 2px; background: var(--c-copper); }
}
.sp--prose.sp--responsibility ~ .sp--prose.sp--responsibility .sp__body { border-left: 0; padding-left: 0; }
.sp--prose.sp--responsibility ~ .sp--prose.sp--responsibility .sp__body::before { content: none; }

/* --- Listák ------------------------------------------------------------- */

.ilist { display: grid; }
.ilist__label { display: block; font-weight: var(--fw-medium); }
.sp__body > .ilist + p, .sp__body > .steps + p { margin-top: 2em; }
.sp__body > p + .ilist { margin-top: 1.5em; }

.ilist--tasks { border-top: 1px solid var(--c-ink); }
.ilist--tasks .ilist__item { padding-block: 16px 18px; border-bottom: var(--rule); }
.ilist--tasks .ilist__label, .ilist--tasks .ilist__text { display: block; max-width: var(--measure); }
.ilist--tasks .ilist__label { margin-bottom: 4px; }

.ilist--plain { gap: 10px; }
.ilist--plain .ilist__item { position: relative; padding-left: 26px; max-width: var(--measure); }
.ilist--plain .ilist__item::before { content: ""; position: absolute; left: 2px; top: 0.8em; width: 12px; height: 1px; background: var(--c-slate); }

.ilist--docs { background: var(--c-white); border: var(--rule); }
.ilist--docs .ilist__item {
  display: grid; gap: 4px;
  padding: 16px 20px 16px 48px;
  position: relative;
}
.ilist--docs .ilist__item + .ilist__item { border-top: var(--rule); }
.ilist--docs .ilist__item::before {
  content: ""; position: absolute; left: 20px; top: 20px;
  width: 12px; height: 15px;
  border: 1.5px solid var(--c-petrol);
  background: linear-gradient(var(--c-petrol), var(--c-petrol)) 2px 5px / 6px 1.5px no-repeat,
              linear-gradient(var(--c-petrol), var(--c-petrol)) 2px 9px / 6px 1.5px no-repeat;
}
.ilist--docs .ilist__label { margin: 0; }
@media (min-width: 720px) {
  .ilist--docs .ilist__item { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); column-gap: 24px; }
}

/* --- Lépések az aloldalakon (a .steps/.step alapja a home.css-ben) -------- */

.steps--page { margin-top: 0; }
.sp__body > .steps--page:not(:first-child) { margin-top: 28px; }

/* --- Kérdések ------------------------------------------------------------- */

.qa-list { display: grid; border-top: 1px solid var(--c-ink); }
.qa { padding-block: 22px 26px; border-bottom: var(--rule); scroll-margin-top: 24px; }
.qa--single { padding: 0; border: 0; }
.sp:not(.sp--untitled) .qa-list > .qa:last-child { border-bottom: 0; padding-bottom: 0; }
.qa__q { font-size: var(--fs-h4); line-height: 1.35; font-weight: var(--fw-medium); max-width: 52ch; }
.qa__a { margin-top: 10px; }
.qa__a p { max-width: var(--measure); }
@media (min-width: 1024px) {
  .sp--untitled .qa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .sp--untitled .qa__q { grid-column: 1 / span 4; }
  .sp--untitled .qa__a { grid-column: 5 / span 8; margin-top: 0; }
}

.faq-index { padding-block: clamp(32px, 4vw, 48px); border-bottom: var(--rule); background: var(--c-mist); }
.faq-index__title { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-slate); letter-spacing: 0.02em; }
.faq-index__list { margin-top: 14px; display: grid; gap: 8px; counter-reset: q; }
.faq-index__list li { counter-increment: q; display: grid; grid-template-columns: 2rem 1fr; font-size: 1rem; line-height: 1.45; }
.faq-index__list li::before { content: counter(q, decimal-leading-zero); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--c-slate); padding-top: 2px; }
.faq-index__list a { color: var(--c-ink); text-decoration: none; }
.faq-index__list a:hover { color: var(--c-petrol); text-decoration: underline; }
@media (max-width: 899px) {
  .faq-index__list { gap: 0; }
  .faq-index__list li + li { border-top: var(--rule); }
  .faq-index__list a { display: block; padding-block: 10px; }
  .faq-index__list li::before { padding-top: 12px; }
}
@media (min-width: 1024px) {
  .faq-index__title { grid-column: 1 / span 4; }
  .faq-index__list { grid-column: 5 / span 8; margin-top: 0; }
}

/* --- Egységsorok (szolgáltatások, partnerek, álláshelyek) ------------------ */

.entries { display: grid; border-top: 1px solid var(--c-ink); }
.entry { display: grid; gap: 12px var(--col-gap); padding-block: 28px 32px; border-bottom: var(--rule); }
.sp--untitled .entries > .entry:last-child { border-bottom: 0; }
.entry__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); }
.sp:not(.sp--untitled) .entry__title { font-size: var(--fs-h4); line-height: 1.35; }
.entry__subtitle { margin-top: 6px; color: var(--c-slate); font-weight: var(--fw-regular); }
.entry__num { color: var(--c-slate); padding-top: 0.45em; }
.entry__body p { max-width: var(--measure); }
.entries--numbered .entry { grid-template-columns: 2.75rem minmax(0, 1fr); }
.entries--numbered .entry__head { grid-column: 2; }
.entries--numbered .entry__body { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .sp--untitled .entry { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sp--untitled .entry__head { grid-column: 1 / span 4; }
  .sp--untitled .entry__body { grid-column: 5 / span 8; }
  .sp--untitled .entries--numbered .entry__num { grid-column: 1; grid-row: 1; }
  .sp--untitled .entries--numbered .entry__head { grid-column: 1 / span 4; grid-row: 1; padding-left: 3.25rem; }
  .sp--untitled .entries--numbered .entry__body { grid-column: 5 / span 8; grid-row: 1; }
}

/* --- Szolgáltatások oldal: szakasz-idősáv ----------------------------------------
   Felül a négy szakasz oszlopként, soronként egy szolgáltatás egyetlen sávval. Asztalon a név a bal
   4 oszlopban, a sávmező az 5. oszloptól; mobilon a név a sáv fölött, a szakaszfejléc görgetéskor fent marad.
   A sáv dekoratív (aria-hidden), a lefedett szakaszokat a sor rejtett szövege mondja ki. */

.span { padding-block: clamp(48px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.span__title { font-size: var(--fs-h2); line-height: 1.15; font-weight: var(--fw-semibold); letter-spacing: -0.018em; }
.span__intro { margin-top: 16px; }
.span__intro p { max-width: var(--measure); color: var(--c-slate); }
.span__chart { margin-top: clamp(36px, 5vw, 64px); }

.span__phases {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-paper);
  border-bottom: 1px solid var(--c-ink);
}
.span__corner { display: none; }
.span__cols, .span__track { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.span__phase {
  padding: 10px 0 10px 6px;
  border-left: var(--rule);
  font-size: 0.75rem; line-height: 1.3;
  font-weight: var(--fw-medium);
  color: var(--c-ink);
}
.span__rows { display: grid; }
.span__row { padding-block: 14px 16px; border-bottom: var(--rule); }
.span__name { font-weight: var(--fw-medium); line-height: 1.35; }
.span__link { color: var(--c-ink); text-decoration: none; }
a.span__link:hover { color: var(--c-petrol); text-decoration: underline; text-underline-offset: .2em; }
.span__track {
  margin-top: 10px;
  row-gap: 6px;
  /* szakaszhatárok: ugyanott, ahol a fejléc oszlopai kezdődnek */
  background: repeating-linear-gradient(to right, var(--c-rule) 0 1px, transparent 1px calc(100% / var(--n, 4)));
}
.span__bar { grid-row: 1; height: 10px; margin-block: 4px; background: var(--c-ink); }
.span__bar--support {
  background: repeating-linear-gradient(135deg, var(--c-petrol) 0 1.5px, transparent 1.5px 6px);
  box-shadow: inset 0 0 0 1px var(--c-petrol);
}
.span__note { grid-row: 2; padding-left: 6px; color: var(--c-slate); font-size: 0.75rem; line-height: 1.3; }

@media (min-width: 1024px) {
  .span__title { grid-column: 1 / span 5; }
  .span__intro { grid-column: 7 / span 6; margin-top: 6px; }
  .span__phases, .span__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .span__phases { position: static; border-top: 1px solid var(--c-ink); border-bottom: var(--rule); }
  .span__corner { display: block; grid-column: 1 / span 4; }
  .span__cols { grid-column: 5 / span 8; }
  .span__phase { padding: 14px 0 14px 12px; font-size: var(--fs-small); }
  .span__row { align-items: center; padding-block: 0; min-height: 60px; }
  .span__name { grid-column: 1 / span 4; padding-block: 14px; font-size: 1.0625rem; }
  .span__track { grid-column: 5 / span 8; margin-top: 0; align-self: stretch; align-content: center; padding-block: 10px; }
  .span__bar { height: 12px; }
  .span__note { padding-left: 12px; }
}

/* Megjelenés: a sávok balról jobbra nőnek, soronként kis késleltetéssel (csak mozgásengedéllyel). */
.motion-ready [data-reveal="span"] { opacity: 1; transform: none; }
.motion-ready [data-reveal="span"] .span__bar { transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--ease); transition-delay: calc(var(--r, 0) * 70ms + 150ms); }
.motion-ready [data-reveal="span"].is-in .span__bar { transform: none; }
@media (prefers-reduced-motion: reduce) { .motion-ready [data-reveal="span"] .span__bar { transform: none; transition: none; } }
@media print { .motion-ready [data-reveal="span"] .span__bar { transform: none !important; } }

/* --- Szolgáltatások oldal: kiemelt blokk nagy képpel ------------------------------ */

.feature { padding-block: clamp(48px, 6vw, 88px); border-top: var(--rule); }
.feature__fig { margin: 0; }
.feature__fig img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--c-mist); }
.feature__fig figcaption { margin-top: 10px; color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); max-width: 46em; }
.feature__fig--lead img { aspect-ratio: 3 / 2; }
.feature__fig--side img { aspect-ratio: 4 / 5; }
.feature__grid { margin-top: clamp(36px, 5vw, 72px); row-gap: 40px; }
.feature__title { font-size: var(--fs-h2); line-height: 1.15; font-weight: var(--fw-semibold); letter-spacing: -0.018em; }
.feature__text p { max-width: var(--measure); font-size: var(--fs-lead); line-height: var(--lh-lead); }
.feature__text .actions { margin-top: 1.75em; }
@media (min-width: 1024px) {
  .feature__fig--lead img { aspect-ratio: 16 / 9; }
  .feature__text { grid-column: 1 / span 5; align-self: start; }
  .feature__fig--side { grid-column: 7 / span 6; margin-top: 0; }
}
@media (min-width: 1280px) { .feature__fig--side { grid-column: 8 / span 5; } }

/* --- Szolgáltatások oldal: nyitott zárás ------------------------------------------- */

.close-plain { padding-block: clamp(56px, 8vw, 120px); border-top: var(--rule); }
.close-plain__text { font-size: var(--fs-statement); line-height: 1.3; font-weight: var(--fw-medium); letter-spacing: -0.012em; max-width: 26ch; }
.close-plain__link { margin-top: 28px; }
@media (min-width: 1024px) { .close-plain__body { grid-column: 1 / span 9; } }

/* --- Adatsorok és táblázat ------------------------------------------------ */

.facts { border-top: 1px solid var(--c-ink); }
.facts__row { display: grid; gap: 2px 24px; padding-block: 12px; border-bottom: var(--rule); }
.facts dt { color: var(--c-slate); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); padding-top: 2px; }
.facts dd { margin: 0; }
.facts__note { display: block; color: var(--c-slate); font-size: var(--fs-small); }
.facts--single { border-top: 0; }
.facts--single .facts__row { border-bottom: 0; padding-block: 0; }
@media (min-width: 720px) { .facts__row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } }

.table-wrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; border-top: 1px solid var(--c-ink); }
.dtable th, .dtable td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: var(--rule); }
.dtable th { color: var(--c-slate); font-weight: var(--fw-medium); font-size: var(--fs-small); }
@media (max-width: 719px) {
  .dtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; }
  .dtable tr { padding-block: 4px; border-bottom: var(--rule); }
  .dtable td { padding: 8px 0; border-bottom: var(--rule); }
  .dtable td:last-child { border-bottom: 0; }
  .dtable td::before { content: attr(data-label); display: block; color: var(--c-slate); font-size: var(--fs-small); font-weight: var(--fw-medium); }
}

mark.ph {
  background: none;
  color: var(--c-copper);
  font-family: var(--font-mono);
  font-size: 0.875em;
  border-bottom: 1px dashed currentColor;
}

/* --- Mottó (Az iroda) ------------------------------------------------------- */

.motto { padding-block: clamp(64px, 9vw, 136px); border-top: var(--rule); border-bottom: var(--rule); }
.motto__title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.028em;
}
.motto__title::before { content: ""; display: block; width: 48px; height: 2px; margin-bottom: 28px; background: var(--c-copper); }
.motto__body { margin-top: 24px; max-width: var(--measure); font-size: var(--fs-lead); line-height: var(--lh-lead); }
@media (min-width: 1024px) { .motto__body { margin-left: calc((100% - 11 * var(--col-gap)) / 12 * 4 + 4 * var(--col-gap)); } }

/* --- Kínálat- és résztvevő-navigáció ---------------------------------------- */

.svcnav { padding-block: clamp(48px, 6vw, 88px); border-top: var(--rule); }
.svcnav__lists { display: grid; gap: 32px; margin-top: 24px; }
.svcnav__list { display: grid; border-top: 1px solid var(--c-ink); }
.svcnav__list li { border-bottom: var(--rule); }
.svcnav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding-block: 12px;
  color: var(--c-ink); text-decoration: none;
  font-weight: var(--fw-medium);
}
a.svcnav__item:hover { color: var(--c-petrol); text-decoration: none; }
a.svcnav__item:hover .link-arrow__icon { transform: translateX(3px); }
.svcnav__item .link-arrow__icon { color: var(--c-petrol); transition: transform var(--t-fast) var(--ease); }
.svcnav__item.is-current { color: var(--c-slate); }
.svcnav__item.is-current::after { content: ""; width: 8px; height: 8px; background: var(--c-copper); flex: none; }
.svcnav__subtitle { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-slate); margin-bottom: 10px; }
.svcnav__list--support .svcnav__item { font-weight: var(--fw-regular); }
.svcnav__list--audience { grid-template-columns: minmax(0, 1fr); max-width: var(--measure); }
@media (min-width: 720px) {
  .svcnav__list:not(.svcnav__list--audience) { grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .svcnav__list--support li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .svcnav__title { grid-column: 1 / span 4; }
  .svcnav__lists { grid-column: 5 / span 8; margin-top: 4px; }
  .svcnav__list--support { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Gyűjtőkártyák és adatlap (Szakmai referenciák, NBMC-projektek) ------- */

.cards { display: grid; gap: 40px var(--col-gap); }
.card { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--c-ink); }
.card__img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; margin-bottom: 8px; background: var(--c-mist); }
.card__label { color: var(--c-slate); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); }
.card__facts { display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.45; }
.card__facts dt { color: var(--c-slate); font-size: var(--fs-small); }
.card__facts dd { margin: 0; }
.card .link-arrow { margin-top: auto; align-self: flex-start; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sheet__label { color: var(--c-slate); font-weight: var(--fw-medium); }
.page-hero--sheet .page-hero__grid { row-gap: 16px; }
.facts--sheet { margin-top: 16px; }
.sheet__updated { margin-top: 14px; color: var(--c-slate); font-size: var(--fs-small); }
.sheet__figs { display: grid; gap: 32px; padding-block: clamp(40px, 5vw, 72px) 0; }
.sheet__fig figcaption { margin-top: 10px; color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); max-width: var(--measure); }
@media (min-width: 1024px) {
  .page-hero--sheet .sheet__label { grid-row: 1; }
  .page-hero--sheet .page-hero__title { grid-row: 2; }
  .page-hero--sheet .page-hero__body { grid-row: 3; grid-column: 1 / span 9; }
}

/* --- Partnerbemutató: logó és korábbi munkák ------------------------------ */

.page-hero__aside { display: none; }
.partner-logo { width: 220px; height: auto; }
@media (min-width: 1024px) {
  .page-hero__aside { display: block; grid-column: 10 / span 3; grid-row: 1; justify-self: end; padding-top: 12px; }
}
@media (max-width: 1023px) {
  .page-hero--partner-profile .page-hero__aside { display: block; order: -1; }
  .page-hero--partner-profile .partner-logo { width: 180px; }
}

.pgroup + .pgroup { margin-top: 36px; }
.pgroup__title { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-slate); letter-spacing: 0.02em; margin-bottom: 8px; }
.ptable { width: 100%; border-collapse: collapse; border-top: 1px solid var(--c-ink); font-size: 1rem; line-height: 1.45; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 13px 16px 13px 0; border-bottom: var(--rule); }
.ptable__name { font-weight: var(--fw-medium); width: 42%; }
.ptable__place { color: var(--c-slate); width: 22%; }
.ptable__role { padding-right: 0; }
@media (max-width: 719px) {
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; width: auto; }
  .ptable tr { padding-block: 12px; border-bottom: var(--rule); }
  .ptable th, .ptable td { padding: 0; border: 0; }
  .ptable__place:empty { display: none; }
  .ptable__role { margin-top: 2px; }
}

/* --- Kapcsolati űrlap szakasza --------------------------------------------- */

.sp--form .form { max-width: var(--measure); }
@media (max-width: 1023px) { .sp--form .sp__body { margin-top: 32px; } }

/* --- Projekt-esettanulmány (Szakmai referenciák / NBMC-projektek adatlapja) --------------------
   Kétsúlyú cím, szereplők szerepcímkével, négycellás tényadatsáv, nagy vezetőkép, számozott
   szakaszfejek, képsor, sötét rajzsáv, előző/következő projekt. A /project/001/ ötletei, saját tokenekkel. */

.cs-hero { padding-block: clamp(28px, 4vw, 44px) clamp(40px, 5vw, 64px); }
.cs-hero__eyebrow { margin-top: clamp(28px, 4vw, 48px); color: var(--c-slate); font-size: 0.8125rem; letter-spacing: 0.02em; }
.cs-hero__title { margin-top: 14px; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 5rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 16ch; }
.cs-hero__main { font-weight: var(--fw-semibold); }
.cs-hero__sub { display: block; font-weight: var(--fw-regular); color: var(--c-slate); }
.cs-hero__grid { margin-top: 28px; row-gap: 24px; }
.cs-hero__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--measure); }
.cs-credits { display: grid; gap: 12px; align-content: start; }
.cs-credit dt { color: var(--c-slate); font-size: 0.75rem; letter-spacing: 0.02em; }
.cs-credit dd { margin: 2px 0 0; font-weight: var(--fw-medium); }
@media (min-width: 1024px) {
  .cs-hero__lead { grid-column: 1 / span 7; }
  .cs-credits { grid-column: 9 / span 4; padding-left: 20px; border-left: var(--rule); }
}

.cs-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--col-gap); margin-top: clamp(32px, 4vw, 56px); padding-top: 18px; border-top: 2px solid var(--c-ink); }
.cs-strip__cell dt { color: var(--c-slate); font-size: 0.75rem; letter-spacing: 0.02em; }
.cs-strip__cell dd { margin: 6px 0 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.2; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .cs-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cs-fig { margin: 0; }
.cs-fig img { width: 100%; height: auto; object-fit: cover; background: var(--c-mist); }
.cs-fig figcaption { margin-top: 10px; color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); max-width: var(--measure); }
.cs-fig--contain img { object-fit: contain; background: var(--c-white); border: var(--rule); padding: clamp(8px, 2vw, 24px); }
.cs-lead { margin-bottom: clamp(16px, 3vw, 32px); }
.cs-fig--lead img { aspect-ratio: 16 / 8.5; }

.cs-sec { padding-block: clamp(40px, 5vw, 72px); border-top: var(--rule); }
.cs-head__num { color: var(--c-copper); font-weight: var(--fw-medium); }
.cs-head__title { margin-top: 8px; font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.125rem); line-height: 1.2; font-weight: var(--fw-medium); max-width: 18ch; }
.cs-sec__body { margin-top: 18px; }
.cs-sec__body p { max-width: var(--measure); }
@media (min-width: 1024px) {
  .cs-head { grid-column: 1 / span 4; }
  .cs-sec__body { grid-column: 5 / span 8; margin-top: 4px; }
}

.cs-gallery { padding-block: clamp(24px, 3vw, 40px) clamp(48px, 6vw, 88px); }
.cs-gallery__grid { display: grid; gap: clamp(24px, 3vw, 40px) var(--col-gap); }
.cs-gallery .cs-fig img { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
  .cs-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-fig--wide { grid-column: 1 / -1; }
  .cs-fig--wide img { aspect-ratio: 16 / 8; }
}

.cs-drawings { background: var(--c-ink); color: var(--c-white); padding-block: clamp(48px, 7vw, 104px); }
.cs-drawings__grid { display: grid; gap: clamp(28px, 4vw, 48px); }
.cs-drawings .cs-fig--sheet img { background: var(--c-white); border: 0; padding: clamp(10px, 2vw, 28px); object-fit: contain; }
.cs-drawings .cs-fig figcaption { color: var(--c-on-ink-muted); }

.cs-nav { border-top: var(--rule); }
.cs-nav__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.cs-nav__link { display: grid; gap: 6px; padding-block: clamp(24px, 3vw, 40px); color: var(--c-ink); text-decoration: none; }
.cs-nav__link--next { text-align: right; justify-items: end; }
.cs-nav__label { color: var(--c-slate); font-size: 0.75rem; }
.cs-nav__title { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); font-weight: var(--fw-medium); }
.cs-nav__link:hover .cs-nav__title { color: var(--c-petrol); text-decoration: underline; text-underline-offset: .25em; }

/* --- Képes referencia-lapozó ------------------------------------------------ */
.slider { padding-block: var(--section); border-top: var(--rule); }
.slider__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.slider__head .flow { max-width: 40em; }
.slider__title { font-size: var(--fs-h2); }
.slider__nav { display: flex; gap: 8px; }
.slider__nav[hidden] { display: none; }
.slider__btn {
  width: 48px; height: 48px; display: inline-grid; place-items: center;
  border: 1px solid var(--c-ink); background: var(--c-paper); color: var(--c-ink);
  font: inherit; font-size: 1.25rem; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) { .slider__btn:hover:not(:disabled) { background: var(--c-ink); color: var(--c-white); } }
.slider__place { font-weight: var(--fw-regular); color: var(--c-slate); }
.slider__btn:disabled { opacity: .35; cursor: default; background: var(--c-paper); color: var(--c-ink); }
.slider__list {
  --edge: max(var(--gutter), (100% - var(--container)) / 2);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 980px); gap: var(--col-gap);
  margin-top: clamp(24px, 3vw, 40px);
  padding-inline: var(--edge); scroll-padding-inline: var(--edge);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.slider__list:focus-visible { outline: var(--focus); outline-offset: 4px; }
.slider__slide { scroll-snap-align: start; }
.slider__slide img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-mist); }
.slider__slide figcaption { display: grid; gap: 2px; margin-top: 12px; max-width: 46em; }
.slider__name { font-weight: var(--fw-medium); color: var(--c-ink); }
.slider__cap { color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); }
@media (min-width: 1024px) { .slider__list { grid-auto-columns: min(62%, 920px); } }
@media (prefers-reduced-motion: no-preference) { .slider__list { scroll-behavior: smooth; } }
.slider__link { display: block; color: inherit; text-decoration: none; }
.slider__link img { transition: opacity var(--t-fast) var(--ease); }
.slider__link:hover img { opacity: .9; }
.slider__link:focus-visible { outline: var(--focus); outline-offset: 4px; }
.slider__more { margin-top: 6px; color: var(--c-petrol); font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: underline; text-decoration-color: var(--c-rule); text-underline-offset: .3em; }
.slider__link:hover .slider__more { text-decoration-color: var(--c-petrol); }

/* Az iroda oldal (/rolunk/) és a szakemberek profiloldala (/rolunk/<slug>/).
   Csak oldalhoz kötött osztályok (about-*, person*, work-card*): más oldal megjelenését nem érinti.
   Nagy betű, sok levegő, kevés keret; sorszám, ugrólista és díszpont nincs. */

/* --- Nyitás ------------------------------------------------------------------- */

.about-hero { padding-block: clamp(28px, 4vw, 44px) clamp(72px, 10vw, 152px); }
.about-hero__title {
  margin-top: clamp(48px, 8vw, 120px);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.028em;
  max-width: 15ch;
}
.about-hero__lead {
  margin-top: clamp(28px, 3.5vw, 44px);
  font-size: var(--fs-statement);
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 34ch;
}
.about-hero__scope {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex; flex-wrap: wrap;
  gap: 6px 0;
  color: var(--c-slate);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0.01em;
}
.about-hero__scope li:not(:last-child)::after { content: "·"; margin-inline: 12px; color: var(--c-slate); }
.about-hero__scope a { color: var(--c-slate); text-decoration: underline; text-decoration-color: var(--c-rule); text-underline-offset: .3em; }
.about-hero__scope a:hover { color: var(--c-ink); text-decoration-color: currentColor; }

/* --- Közös szakaszelemek ---------------------------------------------------------- */

.about-sec { padding-block: clamp(72px, 9vw, 136px); }
.about-hero + .about-sec, .about-sec + .about-sec { border-top: var(--rule); }
.about-people + .about-sec, .about-sec + .about-people { border-top: 0; }
.about-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-medium);
  letter-spacing: -0.018em;
  max-width: 22ch;
}

/* --- Együttműködés: nagy cím bal oldalt, szöveg jobb oldalt --------------------------- */

.about-collab__title {
  font-size: var(--fs-h1);
  line-height: 1.1;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.024em;
  max-width: 14ch;
}
.about-collab__body { margin-top: clamp(28px, 4vw, 40px); }
.about-collab__body > p { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 34em; }
.about-collab__body > .actions { margin-top: 2em; }
@media (min-width: 1024px) {
  .about-collab__title { grid-column: 1 / span 6; }
  .about-collab__body { grid-column: 7 / span 6; margin-top: .6em; }
}

/* --- Szakmai háttér: egy széles, tiszta blokk, soronként terület – mondat ------------- */

.about-bg__rows { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--c-ink); }
.about-bg__row {
  display: grid; gap: 6px var(--col-gap);
  padding-block: clamp(20px, 2.4vw, 32px);
  border-bottom: var(--rule);
}
.about-bg__row dt { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); letter-spacing: -0.01em; }
.about-bg__row dd { margin: 0; color: var(--c-ink); max-width: 36em; }
@media (min-width: 900px) {
  .about-bg__row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; }
  .about-bg__row dt { grid-column: 1 / span 5; }
  .about-bg__row dd { grid-column: 7 / span 6; font-size: var(--fs-lead); line-height: var(--lh-lead); }
}

/* --- Emberek: a legerősebb blokk — nagy portré, név, szakterület, jogosultság ---------- */

.about-people { background: var(--c-mist); }
.about-people__list {
  margin-top: clamp(40px, 5vw, 72px);
  display: grid;
  gap: clamp(56px, 6vw, 88px) var(--col-gap);
}
@media (min-width: 760px) { .about-people__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person { display: grid; gap: 24px; align-content: start; }
.person__media { position: relative; background: var(--c-white); }
.person__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.person__demo {
  position: absolute; left: 0; top: 0;
  padding: 6px 12px;
  background: var(--c-ink); color: var(--c-white);
  font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0.04em;
  text-transform: uppercase;
}
.person__text { display: grid; gap: 10px; justify-items: start; }
.person__name { font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.375rem); line-height: 1.15; font-weight: var(--fw-semibold); letter-spacing: -0.02em; }
.person__field { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.person__facts { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--c-ink); width: 100%; }
.person__facts dt { color: var(--c-slate); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.person__facts dd { margin: 2px 0 0; }
.person__bio { max-width: var(--measure); color: var(--c-ink); }
.person .link-arrow { margin-top: 8px; }
/* Egy szakembernél: kép balra, szöveg jobbra, a kép nagyobb, mint egy kétoszlopos rácsban. */
@media (min-width: 900px) {
  .about-people__list--single { grid-template-columns: 1fr; }
  .about-people__list--single .person { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .about-people__list--single .person__media { grid-column: 1 / span 6; }
  .about-people__list--single .person__text { grid-column: 8 / span 5; }
}

/* --- Munkáink: típuscímke + konkrét szerep ------------------------------------------- */

.about-work__list {
  margin-top: clamp(36px, 5vw, 64px);
  display: grid; gap: 40px var(--col-gap);
}
@media (min-width: 720px) { .about-work__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .about-work__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work-card { display: grid; gap: 14px; align-content: start; padding-top: 20px; border-top: 1px solid var(--c-ink); }
.work-card__type {
  justify-self: start;
  padding: 3px 10px;
  border: 1px solid var(--c-ink);
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); letter-spacing: 0.02em;
}
/* saját munka telt, közös munka keretes, személyes referencia halványabb keretes */
.work-card__type--nbmc { background: var(--c-ink); color: var(--c-white); }
.work-card__type--reference { border-color: var(--c-rule); color: var(--c-slate); }
.work-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); }
.work-card__title a { color: var(--c-ink); text-decoration: none; }
.work-card__title a:hover { color: var(--c-petrol); text-decoration: underline; text-decoration-thickness: 1px; }
.work-card__role { display: grid; gap: 10px; font-size: 1rem; line-height: 1.5; }
.work-card__role dt { color: var(--c-slate); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.work-card__role dd { margin: 0; }
.about-work .actions { margin-top: clamp(36px, 4vw, 56px); }

/* --- Záró márkamondat ---------------------------------------------------------------- */

.about-brand { background: var(--c-ink); color: var(--c-white); padding-block: clamp(88px, 11vw, 168px); }
.about-brand__title { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); letter-spacing: 0.04em; color: var(--c-on-ink-muted); }
.about-brand__lines { margin-top: clamp(28px, 4vw, 48px); }
.about-brand__lines p {
  font-size: var(--fs-h1);
  line-height: 1.14;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.about-brand__quote { margin-top: clamp(36px, 5vw, 64px); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-on-ink-muted); max-width: 34em; }

/* --- Cégadat: csendes záró sor ---------------------------------------------------------- */

.about-registry { padding-block: clamp(32px, 4vw, 48px); }
.about-registry__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; }
.about-registry__text { display: flex; flex-wrap: wrap; gap: 4px 20px; color: var(--c-slate); font-size: var(--fs-small); line-height: var(--lh-small); }
.about-registry__name { color: var(--c-ink); font-weight: var(--fw-medium); }
.about-registry .actions { font-size: var(--fs-small); gap: 12px 28px; }

/* --- Szakmai profil (/rolunk/<slug>/) ---------------------------------------------------- */

.person-hero { padding-block: clamp(28px, 4vw, 44px) clamp(56px, 7vw, 104px); border-bottom: var(--rule); }
.person-hero__grid { margin-top: clamp(32px, 5vw, 64px); row-gap: 32px; }
.person-hero__media { position: relative; max-width: 520px; }
.person-hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--c-mist); }
.person-hero__text { display: grid; gap: 20px; align-content: start; }
.person-hero__name { font-size: var(--fs-h1); line-height: 1.1; font-weight: var(--fw-semibold); letter-spacing: -0.024em; }
.person-hero__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: var(--measure); }
@media (min-width: 1024px) {
  .person-hero__media { grid-column: 1 / span 5; }
  .person-hero__text { grid-column: 7 / span 6; align-self: end; }
}