/* Generated by scripts/build-css-bundles.mjs from styles.css, baseline-integration.css, planning-page.css, doors-page.css: edit those files, then rerun it. */
/* assets/css/styles.css */
/* Manrope és Sora helyi, változtatható súlyú WOFF2-fájlokból (latin és latin-ext), SIL OFL 1.1.
   Nincs külső betűtípus-kérés; lásd THIRD_PARTY_NOTICES.md. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --bg: #fbfdf9;
  --paper: #ffffff;
  --paper-2: #f1f8f3;
  --ink: #17211f;
  --muted: #65736f;
  --line: rgba(61, 117, 108, 0.16);
  --green: #3D756C;
  --mint: #B7DDC8;
  --black: #14201d;
  --shadow: 0 28px 85px rgba(45, 84, 76, 0.15);
  --max: 1680px;
  --content-pad: clamp(18px, 4.4vw, 76px);
  --cut-sm: 13px;
  --cut-md: 24px;
  --cut-lg: 42px;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 8% 12%, rgba(183, 221, 200, 0.54), transparent 31rem),
    radial-gradient(circle at 92% 2%, rgba(61, 117, 108, 0.11), transparent 34rem),
    linear-gradient(180deg, #fbfdf9 0%, #f5faf6 46%, #ffffff 100%);
  color: var(--ink);
  font-family: Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.82;
}

/* Lock scrolling on the root, not on body: with html's overflow-x:clip a
   hidden body becomes its own scroll container and the sticky header (and
   the menu under it) jump back to the top of the document. */
html:has(> body.menu-open) {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

main a:not([class]),
.card-link,
.contact-card-body a,
.footer-grid a {
  color: var(--green);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 calc(100% - 0.04em);
  background-repeat: no-repeat;
  background-size: 48% 1px;
  text-decoration: none;
  transition: background-size 220ms ease, color 180ms ease;
}

main a:not([class]):hover,
.card-link:hover,
.contact-card-body a:hover,
.footer-grid a:hover {
  color: var(--green);
  background-size: 100% 1px;
}

p {
  margin: 0 0 1rem;
  color: var(--muted);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  z-index: 100;
  padding: 10px 14px;
  background: #fff;
  color: #000;
}

.skip-link:focus {
  left: 10px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
  transition: background-color 0.6s ease;
}

/* Solid white at the very top of the page; once the page scrolls (baseline.js sets
   data-scrolled) it fades to the slightly translucent glass. Without JS it stays white.
   The blur behind solid white shows nothing, and it is a costly first paint for a
   phone that draws without a GPU (PageSpeed's test machine). */
html:not([data-scrolled]) .site-header {
  background-color: #fff;
  backdrop-filter: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  width: min(var(--max), calc(100% - var(--content-pad) * 2));
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 124px;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.brand small {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.55vw, 30px);
  font-size: clamp(0.7rem, 0.72vw, 0.78rem);
  font-weight: 800;
  text-transform: uppercase;
}

.nav-links a {
  position: relative;
  color: #22322f;
}

.nav-links a:not(.nav-cta)::after {
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 100%;
  height: 2px;
  background: var(--green);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms ease;
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta)[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-links .nav-cta,
.nav-links .nav-cta:hover {
  color: #fff;
}

.button,
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  background: var(--green);
  --cut-line: var(--green);
  --cut-size: var(--cut-sm);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - var(--cut-sm)) 0, 100% var(--cut-sm), 100% 100%, var(--cut-sm) 100%, 0 calc(100% - var(--cut-sm)));
  overflow: hidden;
  isolation: isolate;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button::before,
.nav-cta::before {
  display: none;
}

.button::after,
.nav-cta::after,
.accordion-item::before,
.footer-quick-item::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(var(--cut-line, rgba(61, 117, 108, 0.20)), var(--cut-line, rgba(61, 117, 108, 0.20))) top left / calc(100% - var(--cut-size, 24px)) 1px no-repeat,
    linear-gradient(var(--cut-line, rgba(61, 117, 108, 0.20)), var(--cut-line, rgba(61, 117, 108, 0.20))) bottom right / 1px calc(100% - var(--cut-size, 24px)) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 0.8px), var(--cut-line, rgba(61, 117, 108, 0.20)) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) top right / var(--cut-size, 24px) var(--cut-size, 24px) no-repeat,
    linear-gradient(var(--cut-line, rgba(61, 117, 108, 0.20)), var(--cut-line, rgba(61, 117, 108, 0.20))) bottom right / calc(100% - var(--cut-size, 24px)) 1px no-repeat,
    linear-gradient(var(--cut-line, rgba(61, 117, 108, 0.20)), var(--cut-line, rgba(61, 117, 108, 0.20))) top left / 1px calc(100% - var(--cut-size, 24px)) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 0.8px), var(--cut-line, rgba(61, 117, 108, 0.20)) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) bottom left / var(--cut-size, 24px) var(--cut-size, 24px) no-repeat;
  content: "";
  pointer-events: none;
}

.button:hover,
.nav-cta:hover {
  transform: translateY(-2px);
  background: var(--black);
  --cut-line: var(--black);
  color: #fff;
  box-shadow: 0 16px 38px rgba(61, 117, 108, 0.22);
}

.button:hover::before,
.nav-cta:hover::before {
  display: none;
}

.button.secondary {
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  --cut-line: rgba(61, 117, 108, 0.32);
}

.button.secondary:hover {
  background: rgba(183, 221, 200, 0.24);
  --cut-line: var(--green);
  color: var(--green);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--green);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
}

.side-rail {
  display: none;
}

.side-rail a {
  color: var(--green);
}

.side-rail + main {
  margin-left: 0;
}

.hero {
  position: relative;
  min-height: calc(100vh - 88px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(251, 253, 249, 0.98) 0 38%, rgba(251, 253, 249, 0.34) 56%, rgba(251, 253, 249, 0.10)),
    radial-gradient(circle at 19% 34%, rgba(183, 221, 200, 0.58), transparent 28rem),
    url("../images/halvany-alaprajz-hatter.webp") left 22% bottom -40px / 560px auto no-repeat,
    #fbfdf9;
  color: var(--ink);
}

.hero.short {
  min-height: 68vh;
}

.hero::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(61, 117, 108, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 117, 108, 0.055) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 68%);
  content: "";
  pointer-events: none;
}

.hero::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(251, 253, 249, 0.98) 0 34%, rgba(251, 253, 249, 0.58) 52%, rgba(251, 253, 249, 0.04)),
    linear-gradient(180deg, rgba(251, 253, 249, 0), rgba(251, 253, 249, 0.30));
  content: "";
  pointer-events: none;
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 42%;
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: 0.98;
  filter: saturate(0.88) contrast(1.02) brightness(1.04);
  animation: slowScale 16s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  min-height: inherit;
  width: min(var(--max), calc(100% - var(--content-pad) * 2));
  margin: 0 auto;
  padding: clamp(82px, 8vw, 126px) 0 clamp(82px, 8vw, 130px);
}

.hero-layout {
  grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.48fr);
  gap: clamp(36px, 7vw, 118px);
  align-items: center;
}

.hero-copy {
  max-width: 760px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 34px;
  height: 1px;
  background: currentColor;
  content: "";
}

h1,
h2,
h3 {
  margin: 0;
  color: inherit;
  font-family: Sora, Manrope, sans-serif;
  line-height: 1.13;
  letter-spacing: -0.02em;
}

h1 {
  max-width: 890px;
  font-size: clamp(3.2rem, 6.6vw, 7.1rem);
  font-weight: 500;
}

.hero.short h1 {
  font-size: clamp(3rem, 6vw, 6.2rem);
}

.lead {
  max-width: 720px;
  margin: 24px 0 0;
  color: #52625e;
  font-size: 1.04rem;
  line-height: 1.9;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.section {
  padding: clamp(86px, 9vw, 154px) 0;
}

.section.soft {
  background:
    linear-gradient(180deg, rgba(241, 248, 243, 0.88), rgba(255, 255, 255, 0.98)),
    url("../images/halvany-alaprajz-hatter.webp") left 8% top 12% / 360px auto no-repeat;
}

.container {
  width: min(var(--max), calc(100% - var(--content-pad) * 2));
  margin: 0 auto;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(320px, 0.56fr);
  gap: clamp(36px, 7vw, 118px);
  align-items: end;
  margin-bottom: clamp(42px, 6vw, 76px);
}

.section-head h2 {
  max-width: 900px;
  font-size: clamp(2.25rem, 3.65vw, 4.15rem);
  font-weight: 500;
}

.section-head p {
  font-size: 1.04rem;
}

.discipline-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr);
  gap: clamp(48px, 7vw, 126px);
  align-items: start;
}

.discipline-index-copy {
  position: sticky;
  top: 122px;
}

.discipline-index-copy h2 {
  max-width: 760px;
  font-size: clamp(2.25rem, 3.65vw, 4.15rem);
  font-weight: 500;
}

.discipline-index-copy p {
  max-width: 680px;
  margin-top: 28px;
  font-size: 1.04rem;
}

.discipline-index {
  position: relative;
  padding: clamp(22px, 2.6vw, 36px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(241, 248, 243, 0.78));
  --cut-line: rgba(61, 117, 108, 0.18);
  --cut-size: var(--cut-lg);
  clip-path: polygon(0 0, calc(100% - var(--cut-lg)) 0, 100% var(--cut-lg), 100% 100%, var(--cut-lg) 100%, 0 calc(100% - var(--cut-lg)));
  isolation: isolate;
}

.discipline-index::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(var(--cut-line), var(--cut-line)) top left / calc(100% - var(--cut-size)) 1px no-repeat,
    linear-gradient(var(--cut-line), var(--cut-line)) right 0 top var(--cut-size) / 1px calc(100% - var(--cut-size)) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 0.7px), var(--cut-line) calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)) top right / var(--cut-size) var(--cut-size) no-repeat,
    linear-gradient(var(--cut-line), var(--cut-line)) right 0 bottom 0 / calc(100% - var(--cut-size)) 1px no-repeat,
    linear-gradient(var(--cut-line), var(--cut-line)) left 0 top 0 / 1px calc(100% - var(--cut-size)) no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 0.7px), var(--cut-line) calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)) bottom left / var(--cut-size) var(--cut-size) no-repeat;
  content: "";
  pointer-events: none;
}

.discipline-index::after {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 1;
  width: var(--cut-size);
  height: var(--cut-size);
  background: linear-gradient(to bottom left, transparent calc(50% - 0.7px), var(--cut-line) calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px));
  content: "";
  pointer-events: none;
}

.discipline-index h2 {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(18px, 2vw, 26px);
  color: var(--ink);
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 500;
}

.discipline-index a {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 34px minmax(126px, 170px) minmax(54px, 0.54fr) minmax(330px, 1.12fr);
  gap: 14px;
  align-items: baseline;
  padding: 15px 14px;
  color: var(--ink);
  background-image: none;
  background-size: 0 0;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.discipline-index a:hover {
  color: var(--ink);
  background-image: none;
  background-size: 0 0;
  background: rgba(183, 221, 200, 0.16);
  transform: translateX(6px);
}

.discipline-index a + a {
  border-top: 1px solid rgba(61, 117, 108, 0.12);
}

.discipline-index-divider {
  position: relative;
  z-index: 2;
  margin: 22px 0 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(61, 117, 108, 0.22);
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.discipline-index span {
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.discipline-index strong {
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  font-weight: 650;
  transition: color 180ms ease;
}

.discipline-index i {
  border-bottom: 1px dotted rgba(61, 117, 108, 0.34);
  transform: translateY(-4px);
}

.discipline-index small {
  grid-column: 4;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: nowrap;
}

.discipline-index a:hover strong {
  color: var(--green);
}

.discipline-index a:hover i {
  border-bottom-color: var(--green);
}

.discipline-section {
  scroll-margin-top: 96px;
}

.special-solutions {
  padding: clamp(58px, 6vw, 96px) 0;
  border-top: 1px solid rgba(61, 117, 108, 0.14);
  border-bottom: 1px solid rgba(61, 117, 108, 0.12);
}

.special-solutions h2 {
  max-width: 920px;
  font-size: clamp(2.25rem, 3.65vw, 4.15rem);
  font-weight: 500;
}

.discipline-grid {
  display: grid;
  grid-template-columns: minmax(390px, 0.52fr) minmax(0, 1fr);
  gap: clamp(44px, 5vw, 88px);
  align-items: start;
}

.discipline-title {
  position: sticky;
  top: 116px;
}

.discipline-number {
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-bottom: 28px;
  background: rgba(183, 221, 200, 0.34);
  color: var(--green);
  font-size: 1.5rem;
  font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.discipline-copy h2 {
  max-width: 1040px;
  margin-bottom: 26px;
  font-size: clamp(2.05rem, 2.8vw, 3.35rem);
  line-height: 1.08;
  text-wrap: balance;
}

.discipline-copy > p {
  max-width: 820px;
  font-size: 1.06rem;
}

.discipline-thumb {
  display: block;
  width: min(470px, 100%);
  height: min(318px, 72vw);
  aspect-ratio: 4 / 3;
  margin-top: 34px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 18px 46px rgba(61, 117, 108, 0.12);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.discipline-gallery {
  margin-top: 34px;
}

.discipline-gallery .accordion-panel {
  transition: grid-template-rows 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-wrap {
  overflow: hidden;
  margin: 0;
  padding: 0 20px;
}

.accordion-item.active .gallery-wrap {
  padding-bottom: 20px;
}

.lazy-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.lazy-gallery figure {
  position: relative;
  min-height: 236px;
  margin: 0;
  overflow: hidden;
  background: rgba(241, 248, 243, 0.86);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.accordion-item.active .lazy-gallery figure {
  opacity: 1;
  transform: translateY(0);
}

.accordion-item.active .lazy-gallery figure:nth-child(2) {
  transition-delay: 70ms;
}

.accordion-item.active .lazy-gallery figure:nth-child(3) {
  transition-delay: 140ms;
}

.lazy-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 236px;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
  transition: transform 360ms ease, filter 360ms ease;
}

.lazy-gallery figure:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.04);
}

.lazy-gallery figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 8px 10px;
  background: rgba(11, 31, 28, 0.72);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  background: rgba(246, 251, 247, 0.54);
  backdrop-filter: blur(18px);
  opacity: 0;
  /* Closed, it is not drawn at all (its full-screen blur was still part of every
     frame); hidden only after the fade-out. */
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 0s 180ms;
}

.image-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

.image-lightbox figure {
  position: relative;
  display: inline-grid;
  width: auto;
  max-width: min(92vw, 1280px);
  max-height: min(82vh, 860px);
  margin: 0;
  transform: scale(0.92);
  transition: transform 220ms ease;
}

.image-lightbox.active figure {
  transform: scale(1);
}

.image-lightbox img {
  display: block;
  width: auto;
  max-width: min(92vw, 1280px);
  max-height: min(82vh, 860px);
  object-fit: contain;
  background: transparent;
  box-shadow: 0 34px 90px rgba(21, 44, 39, 0.24);
  clip-path: none;
}

.image-lightbox figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 9px 12px;
  background: rgba(11, 31, 28, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.lightbox-close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  background: var(--green);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  border: 0;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.lightbox-prev {
  left: 24px;
}

.lightbox-next {
  right: 24px;
}

.lightbox-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: square;
}

.lightbox-close,
.lightbox-nav {
  transition: background 160ms ease, color 160ms ease;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--mint);
  color: var(--ink);
}

.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.image-lightbox.single .lightbox-nav {
  display: none;
}

body.lightbox-open {
  overflow: hidden;
}

.accordion {
  display: grid;
  gap: 10px;
  margin-top: 34px;
  margin-bottom: 24px;
}

.accordion-item {
  position: relative;
  border: 0;
  background: rgba(255, 255, 255, 0.78);
  --cut-line: rgba(61, 117, 108, 0.17);
  --cut-size: 18px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  isolation: isolate;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.accordion-item.active {
  --cut-line: rgba(61, 117, 108, 0.38);
  box-shadow: 0 18px 46px rgba(61, 117, 108, 0.10);
}

.accordion-item:hover {
  --cut-line: rgba(61, 117, 108, 0.30);
  background: rgba(255, 255, 255, 0.94);
}

.accordion-item:nth-child(2n) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(241, 248, 243, 0.78));
}

.accordion-item button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 62px;
  padding: 0 20px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.accordion-item button::after {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  content: "";
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.accordion-item.active button::after {
  transform: rotate(225deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}

.accordion-panel > p {
  overflow: hidden;
  margin: 0;
  padding: 0 20px;
}

.accordion-item.active .accordion-panel {
  grid-template-rows: 1fr;
}

.accordion-item.active .accordion-panel > p {
  padding-bottom: 20px;
}

.card-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--green);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@keyframes tierTextIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tierFillIn {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes tierMarkerIn {
  from {
    opacity: 0;
    transform: translate(-28px, 10px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.contact-hero {
  background:
    radial-gradient(circle at 84% 18%, rgba(183, 221, 200, 0.34), transparent 28%),
    linear-gradient(135deg, rgba(251, 253, 249, 0.98), rgba(244, 250, 246, 0.92));
}

.contact-hero-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
  gap: clamp(34px, 6vw, 92px);
  align-items: center;
}

.contact-card {
  position: relative;
  --cut-line: rgba(61, 117, 108, 0.18);
  --cut-size: var(--cut-md);
  clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
}

.contact-card::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(var(--cut-line), var(--cut-line)) top left / calc(100% - var(--cut-size)) 1px no-repeat,
    linear-gradient(var(--cut-line), var(--cut-line)) right 0 top var(--cut-size) / 1px calc(100% - var(--cut-size)) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), var(--cut-line) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) top right / var(--cut-size) var(--cut-size) no-repeat,
    linear-gradient(var(--cut-line), var(--cut-line)) right 0 bottom 0 / calc(100% - var(--cut-size)) 1px no-repeat,
    linear-gradient(var(--cut-line), var(--cut-line)) left 0 top 0 / 1px calc(100% - var(--cut-size)) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.8px), var(--cut-line) calc(50% - 0.8px) calc(50% + 0.8px), transparent calc(50% + 0.8px)) bottom left / var(--cut-size) var(--cut-size) no-repeat;
  content: "";
  pointer-events: none;
}

.contact-card-body span {
  display: block;
  margin-bottom: 14px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
}

.contact-card {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 70px rgba(61, 117, 108, 0.10);
}

.map-frame {
  position: relative;
  min-height: 360px;
  background: rgba(183, 221, 200, 0.22);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  filter: grayscale(0.18) contrast(0.96) saturate(0.86);
}

.contact-card-body {
  padding: 28px;
}

.contact-card-body h3 {
  margin-bottom: 12px;
  font-size: clamp(1.22rem, 1.8vw, 1.62rem);
}

.contact-card-body p {
  margin-bottom: 18px;
}

/* Footer: dark brand band with the light logo, quick contacts and icon rows. */
.site-footer {
  --footer-text: #e3efe7;
  --footer-muted: rgba(227, 239, 231, 0.66);
  --footer-line: rgba(221, 240, 229, 0.16);
  padding: 64px 0 30px;
  background: #143e32;
  color: var(--footer-text);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px 56px;
  align-items: end;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--footer-line);
}

.footer-brand p {
  margin: 0;
  color: #fff;
  font-family: Sora, Manrope, sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.45;
}

.footer-brand .footer-partners {
  margin-top: 10px;
  color: var(--footer-muted);
  font-family: Manrope, sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
}

.footer-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.footer-quick-item {
  --cut-size: var(--cut-sm);
  --cut-line: rgba(221, 240, 229, 0.28);
  position: relative;
  display: grid;
  grid-template-columns: 34px auto;
  gap: 14px;
  align-items: center;
  padding: 16px 26px 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--cut-size)) 0, 100% var(--cut-size), 100% 100%, var(--cut-size) 100%, 0 calc(100% - var(--cut-size)));
  transition: background-color 200ms ease;
}

.footer-quick-item:hover,
.footer-quick-item:focus-visible {
  --cut-line: var(--mint);
  background: rgba(255, 255, 255, 0.08);
}

.footer-quick-item small {
  display: block;
  color: var(--footer-muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

.footer-quick-item strong {
  display: block;
  font-family: Sora, Manrope, sans-serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.35;
}

.footer-icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--mint);
}

.footer-quick-item .footer-icon {
  width: 34px;
  height: 34px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px clamp(28px, 4vw, 56px);
  padding-top: 44px;
}

.footer-grid > * {
  min-width: 0;
}

/* Footer headings are plain labels so they stay out of each page's outline. */
.footer-title {
  margin: 0 0 18px;
  color: var(--mint);
  font-family: Sora, Manrope, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-grid a {
  color: var(--footer-text);
}

.footer-grid a:hover {
  color: #fff;
}

.footer-grid nav a {
  display: table;
  margin: 0 0 11px;
  font-size: 0.94rem;
}

.footer-grid .footer-contact {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 15px;
  color: var(--footer-text);
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-contact .footer-icon {
  margin-top: 3px;
}

.footer-contact small {
  display: block;
  color: var(--footer-muted);
  font-size: 0.76rem;
}

.footer-grid .footer-contact a {
  display: inline;
  margin: 0;
}

.footer-grid .footer-legal {
  margin: 18px 0 0;
  padding-left: 34px;
  color: var(--footer-muted);
  font-size: 0.84rem;
  line-height: 1.75;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--footer-line);
  color: var(--footer-muted);
  font-size: 0.84rem;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 4px;
}

@media (max-width: 1180px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
}

/* The tagline stays on one line: below this width the contact buttons move under it. */
@media (max-width: 1360px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 620px) {
  .site-footer {
    padding-top: 52px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-quick {
    flex-direction: column;
  }
}

.scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--mint));
  transform: scaleX(0);
  transform-origin: left;
}

.pointer-glow {
  position: fixed;
  z-index: 0;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(61, 117, 108, 0.10), transparent 64%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease;
  mix-blend-mode: multiply;
}

@keyframes slowScale {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

@media (max-width: 980px) {
  .side-rail {
    display: none;
  }

  .side-rail + main {
    margin-left: 0;
  }

  .nav-links {
    position: fixed;
    inset: 88px 0 auto 0;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--line);
  }

  body.menu-open .nav-links {
    display: grid;
  }

  .nav-links a,
  .nav-links .nav-cta {
    padding: 16px 0;
  }

  .menu-toggle {
    display: block;
  }

  .discipline-index-layout,
.discipline-grid,
.lazy-gallery,
.section-head,
.contact-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    background:
      linear-gradient(180deg, rgba(251, 253, 249, 0.93), rgba(251, 253, 249, 0.80)),
      url("../images/halvany-alaprajz-hatter.webp") center bottom / 420px auto no-repeat,
      #fbfdf9;
  }

  /* Faint behind the text. Phones (up to 620px) load a lighter 640px copy of the
     photo (the <source> in each page's hero): at this opacity it looks the same. */
  .hero-media {
    left: 0;
    clip-path: none;
    opacity: 0.22;
  }

  .hero::after {
    background: linear-gradient(90deg, rgba(251, 253, 249, 0.95), rgba(251, 253, 249, 0.54));
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .discipline-title {
    position: static;
  }

  .discipline-index-copy {
    position: static;
  }

  .discipline-index a {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px 14px;
  }

  .discipline-index i {
    display: none;
  }

  .discipline-index small {
    grid-column: 2;
    white-space: normal;
  }

  .map-frame,
  .map-frame iframe {
    min-height: 320px;
    height: 320px;
  }

}

@media (max-width: 620px) {
  .nav,
.container,
.hero-content {
    width: min(100% - 28px, var(--max));
  }

  .brand small {
    display: none;
  }

  .section {
    padding: 78px 0;
  }

  .hero {
    min-height: 74vh;
  }

  h1,
  .hero.short h1 {
    font-size: 2.6rem;
  }

  .discipline-number {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    font-size: 1.2rem;
  }

  .gallery-wrap {
    padding-inline: 14px;
  }

  .lightbox-nav {
    top: auto;
    bottom: 24px;
    margin-top: 0;
  }

  .lazy-gallery figure,
  .lazy-gallery img {
    min-height: 220px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

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

  .pointer-glow {
    display: none;
  }
}

/* Impresszum és adatkezelési tájékoztató: keskeny, jól olvasható szöveghasáb. */
.legal-hero {
  padding: clamp(56px, 7vw, 110px) 0 clamp(30px, 4vw, 52px);
}

.legal-page h1 {
  max-width: 860px;
  font-size: clamp(2.4rem, 4.8vw, 3.8rem);
}

.legal-content {
  max-width: 860px;
}

.legal-content h2 {
  margin: 2.6rem 0 0.8rem;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.legal-content > h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  margin: 1.6rem 0 0.5rem;
  font-size: 1.08rem;
}

.legal-content ul {
  max-width: none;
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}

.legal-content li {
  margin: 0.3rem 0;
}

.legal-data {
  display: grid;
  grid-template-columns: minmax(180px, 0.42fr) 1fr;
  margin: 0 0 1.4rem;
  border-top: 1px solid var(--line);
}

.legal-data dt,
.legal-data dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.legal-data dt {
  padding-right: 20px;
  color: var(--muted);
}

.legal-data dd {
  color: var(--ink);
}

.legal-updated {
  margin-top: 2.4rem;
  font-size: 0.9rem;
}

@media (max-width: 620px) {
  .legal-data {
    grid-template-columns: 1fr;
  }

  .legal-data dt {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* ------------------------------------------------------------------------------------------------
   Restrained motion, switched on per page with <body data-motion> (script: assets/js/site-motion.js).
   ------------------------------------------------------------------------------------------------ */

/* Cards and boxes: on hover the top-right corner folds over like the corner of a page. One
   animated length drives both the clip and the folded flap, so the fold grows from the corner.
   The flap is drawn flat, like the icons: one light tone with a thin outline. Boxes with a green
   top border get a green crease. Boxes and lists with only a side bar do not fold. */
@property --card-cut { syntax: '<length>'; inherits: true; initial-value: 0px; }
@media (hover: hover) {
  /* Defaults without specificity, so the per-box settings below always win. */
  [data-motion] :where(.planning-usecase, .planning-system, .planning-tier, .construction-work, .doors-level,
    .about-facts li) {
    --card-cut: 0px;
    --card-cut-size: 22px;
    --card-crease: rgba(61, 117, 108, .45);
    --card-flap-edge: rgba(61, 117, 108, .3);
  }
  [data-motion] :is(.planning-usecase, .planning-system, .planning-tier, .construction-work, .doors-level,
    .about-facts li) {
    position: relative;
    clip-path: polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
    transition: --card-cut .42s cubic-bezier(.3, .7, .2, 1), border-color .34s ease;
  }
  [data-motion] :is(.planning-usecase, .planning-tier, .construction-work, .doors-level) { --card-crease: var(--green); }
  /* The small fact boxes fold a smaller corner, inside their padding. */
  [data-motion] .about-facts li { --card-cut-size: 10px; }

  [data-motion] :is(.planning-usecase, .planning-system, .planning-tier, .construction-work, .doors-level,
    .about-facts li)::after {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--card-cut);
    height: var(--card-cut);
    background:
      linear-gradient(to bottom left, transparent calc(50% - .6px), var(--card-crease) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)),
      linear-gradient(var(--card-flap-edge), var(--card-flap-edge)) left top / 1px 100% no-repeat,
      linear-gradient(var(--card-flap-edge), var(--card-flap-edge)) left bottom / 100% 1px no-repeat,
      linear-gradient(to bottom left, transparent 50%, rgba(61, 117, 108, .1) 50%);
    content: "";
    pointer-events: none;
  }
  [data-motion] :is(.planning-usecase, .planning-system, .planning-tier, .construction-work, .doors-level,
    .about-facts li):is(:hover, :focus-within) {
    --card-cut: var(--card-cut-size);
  }
  [data-motion] .planning-system:is(:hover, :focus-within) { border-color: rgba(61, 117, 108, .5); }
}

/* Scroll: content below the first screen rises in once. */
[data-motion] .reveal-ready:not(.is-revealed) { opacity: 0; }
[data-motion] .reveal-ready.is-revealed { animation: motion-rise .55s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms) both; }
@keyframes motion-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Vertical process list (design phases): the numbers and the line between them fill as the reader passes them. */
[data-motion] .planning-process-step::after {
  position: absolute;
  top: 50px;
  bottom: -17px;
  left: 15px;
  border-left: 1px solid var(--green);
  transform: scaleY(var(--step-fill, 0));
  transform-origin: top;
  content: "";
  pointer-events: none;
}
[data-motion] .planning-process-step:last-child::after { display: none; }
[data-motion] .planning-step-number { position: relative; z-index: 1; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
[data-motion] .planning-step-output { transition: border-color .3s ease; }
[data-motion] .planning-process-step.is-reached .planning-step-number { border-color: var(--green); background: var(--green); color: #fff; }
[data-motion] .planning-process-step.is-reached .planning-step-output { border-left-color: var(--green); }

/* Horizontal step rows (construction stages, EMC measurement): the steps fill one after another. */
[data-motion] :is(.construction-gate-number, .emc-step-number) {
  transition: background-color .35s ease var(--seq-delay, 0ms), border-color .35s ease var(--seq-delay, 0ms), color .35s ease var(--seq-delay, 0ms);
}
[data-motion] .is-reached :is(.construction-gate-number, .emc-step-number) { border-color: var(--green); background: var(--green); color: #fff; }
[data-motion] .construction-gates .construction-gate::before {
  background: linear-gradient(var(--green), var(--green)) left top / 0% 100% no-repeat var(--planning-rule);
  transition: background-size .5s ease calc(var(--seq-delay, 0ms) + 150ms);
}
[data-motion] .construction-gates .construction-gate.is-reached::before { background-size: 100% 100%; }
[data-motion] .construction-gate-result { transition: border-color .35s ease var(--seq-delay, 0ms); }
[data-motion] .construction-gate.is-reached .construction-gate-result { border-left-color: var(--green); }
[data-motion] .emc-process-step::after {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease var(--seq-delay, 0ms);
  content: "";
  pointer-events: none;
}
[data-motion] .emc-process-step.is-reached::after { transform: scaleX(1); }

/* The print header only shows on paper. */
.print-header { display: none; }

@media print {
  [data-motion] .reveal-ready { opacity: 1 !important; animation: none !important; }
}

/* ------------------------------------------------------------------------------------------------
   Print: every subpage prints as a tidy A4 document with a company header, without navigation,
   buttons and coloured bands. Browsers skip background colours by default, so text and diagram lines
   that were light on the green bands are darkened. The Szakterületek page has its own print view.
   ------------------------------------------------------------------------------------------------ */
@media print {
  @page { size: A4; margin: 12mm 12mm 13mm; }
  body:is(.planning-page:not(.specialties-page), .contact-page, .legal-page) { background: #fff !important; color: #1c2a24; font-size: 9.5pt; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) *, :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) *::before, :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) :is(.site-header, .site-footer, .skip-link, .scroll-progress, .pointer-glow, .image-lightbox, .planning-subnav,
    .hero-media, .hero-actions, .button, .text-link, .card-link, .map-frame) { display: none !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) a { color: inherit !important; background: none !important; text-decoration: none !important; }

  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) .print-header { display: flex; align-items: center; gap: 6mm; margin: 0 0 6mm; padding-bottom: 4mm; border-bottom: 1.2pt solid #2b5847; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main .print-header img { width: 32mm !important; height: auto; max-height: none; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) .print-header strong { display: block; color: #143e32; font: 600 12.5pt/1.3 Sora, Manrope, sans-serif; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) .print-header span { display: block; margin-top: 1mm; color: #4a5c54; font-size: 7.5pt; }

  /* Sections: no bands, no tall paddings, a thin rule between them. */
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.section, .hero, .legal-hero) { min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.section, .hero, .legal-hero) { color: #1c2a24 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main > .section { margin-top: 6mm !important; padding-top: 5mm !important; border-top: .8pt solid #c6d6cd !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) .hero::before, :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) .hero::after { display: none !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main .container, :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) .hero-content { width: auto !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) .hero-copy { max-width: none !important; padding: 0 !important; background: none !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main *:not(svg, svg *) { background-color: transparent !important; clip-path: none !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main .contact-card::before { display: none !important; }

  /* Type */
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(h1, h2, h3, h4, p, li, dt, dd, span, strong, small, figcaption, td, th, summary, a, div) { color: #1c2a24 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.eyebrow, .planning-system-index, .planning-render-index, .construction-caption-index, .maint-caption-index, .emc-caption-index,
    .planning-step-number, .emc-step-number, .construction-gate-number, .emc-leak-number, .planning-step-output, .construction-gate-result) { color: #2b5847 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main .planning-icon { color: #2b5847 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main h1 { margin: 0 0 2mm; font-size: 20pt; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main h2 { max-width: none; margin-bottom: 3mm; font-size: 14pt; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main h3 { font-size: 10.5pt; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(p, li, dd, dt, td) { font-size: 9.3pt; line-height: 1.5; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) .hero .lead { max-width: none; font-size: 10.5pt; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main .eyebrow { margin-bottom: 1.5mm; font-size: 7.5pt; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main .eyebrow::before { display: none; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(h2, h3) { break-after: avoid; }

  /* Layouts: keep the desktop columns on paper. */
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.planning-overview, .planning-ai, .planning-process-panel, .planning-columns, .planning-start, .construction-intro, .construction-live-grid,
    .construction-detail-grid, .emc-overview, .emc-explain-grid, .emc-filter-grid, .emc-leak-layout, .doors-explain-grid, .doors-feature-grid,
    .doors-partner-grid, .maint-intro, .maint-response-grid, .contact-grid, .section-head) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6mm !important; align-items: start !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.planning-system-grid, .construction-work-grid, .doors-level-grid, .planning-decision-grid) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4mm !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.planning-usecases, .construction-gates, .emc-process, .construction-handover-list, .doors-gallery) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 4mm !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.planning-tier-grid, .construction-test-strip, .planning-ai-checklist) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4mm !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.planning-usecase, .planning-system, .planning-tier, .construction-work, .doors-level) { padding: 3mm !important; border: .6pt solid #c6d6cd; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.planning-hero-facts) { display: flex !important; flex-wrap: wrap; gap: 3mm 8mm !important; margin: 3mm 0 0 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.doors-partner-logo, .construction-partner, .emc-laboshield-logo) img, :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main img.emc-laboshield-logo { width: 40mm !important; max-height: 18mm; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main img { width: auto !important; max-width: 100% !important; max-height: 70mm; object-fit: contain !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(article, figure, li, details, tr, .construction-gate, .planning-process-step, .planning-tier, .maint-area, .print-header) { break-inside: avoid; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.planning-decision-visual, .construction-zone-diagram, .emc-route-diagram, .doors-diagram, .emc-leak-diagram) { break-inside: avoid; }

  /* Diagrams drawn for the green bands: light lines and labels become dark on white paper. */
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main :is(.planning-decision-visual, .planning-motion, .doors-diagram) { color: #2f6b5c !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main svg :is([stroke="#b9dbca" i], [stroke="#b8ddd0" i], [stroke="#a9d9c7" i], [stroke="#81b7a1" i], [stroke="#d8eee7" i], [stroke="#dceee4" i]) { stroke: #2f6b5c !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main svg :is([fill="#b9dbca" i], [fill="#b8ddd0" i], [fill="#d8eee7" i]) { fill: #2f6b5c !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main svg :is([stroke="#d8b778" i], [stroke="#d8b97c" i]) { stroke: #a07a28 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main svg :is([fill="#d8b778" i], [fill="#d8b97c" i], [fill="#efd9a6" i]) { fill: #a07a28 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main svg :is([fill="#e4f0e8" i], [fill="#e2f0e7" i], [fill="#ffffff" i][fill-opacity]) { fill: #1c2a24 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main svg :is([fill="#ffffff" i][fill-opacity], [fill="#0f2f26" i]) { fill-opacity: .03 !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main svg [fill="#3D756C" i] { fill: #fff !important; }
  :is(.planning-page:not(.specialties-page), .contact-page, .legal-page) main svg [stroke="#e4f0e8" i] { stroke: #1c2a24 !important; }
}
/* assets/css/baseline-integration.css */
/* The supplied design. The full menu stays in the header down to 1241 px, so
   the common 1280 and 1366 px laptops keep it (the client did not notice the
   three-bar button there, 2026-10-16); narrower screens use the drop-down. */
@media (max-width:1240px) {
  /* The drop-down fades and slides in; closed, it stays hidden from focus and readers. */
  .nav-links {position:fixed;inset:88px 0 auto;display:grid;grid-template-columns:1fr;gap:0;padding:20px var(--content-pad);background:#fff;border-bottom:1px solid var(--line);max-height:calc(100svh - 89px);overflow:auto;
    visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s;}
  body.menu-open .nav-links {visibility:visible;opacity:1;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s;}
  .nav-links a,.nav-links .nav-cta {padding:14px 0;}
  /* One label per row: the full-width underline read as a divider between two
     items. The current page keeps its green line, under its own label only. */
  .nav-links a:not(.nav-cta)::after {display:none;}
  .nav-links a:not(.nav-cta):hover {color:var(--green);}
  .nav-links a:not(.nav-cta)[aria-current="page"] {color:var(--green);text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:currentColor;text-underline-offset:7px;}
  .menu-toggle {display:block;}
  html:not(.js) .nav-links {position:static;display:grid;max-height:none;visibility:visible;opacity:1;transform:none;}
  html:not(.js) .menu-toggle {display:none;}
}
.nav-links a:focus-visible,.menu-toggle:focus-visible {outline:2px solid var(--green);outline-offset:5px;}
/* The three bars carry a visible word: an icon alone read as a settings button. */
.menu-toggle {position:relative;}
.menu-toggle::before {content:"Menü";position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  color:var(--green);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.menu-toggle[aria-expanded="true"]::before {content:"Bezárás";}
/* Open menu: the three bars turn into a cross (bar centres are 7 px apart). */
.menu-toggle span {transition:transform .25s ease,opacity .2s ease;}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {transform:translateY(7px) rotate(45deg);}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {opacity:0;transform:scaleX(.4);}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {transform:translateY(-7px) rotate(-45deg);}
@media (prefers-reduced-motion:reduce) {
  .menu-toggle span,.nav-links,body.menu-open .nav-links {transition:none;}
}
/* Single-line menu labels on desktop. The tagline yields its space first. */
@media (min-width:1241px) {
  .nav-links a {white-space:nowrap;}
}
@media (min-width:1241px) and (max-width:1600px) {
  .brand small {display:none;}
}
/* 1241-1320 px: a tighter gap keeps all seven items and the button on one line. */
@media (min-width:1241px) and (max-width:1320px) {
  .nav-links {gap:14px;}
}
/* Phones: a compact sticky header (logo and menu button only), in the usual
   56-64 px range; the opened menu starts right under it. */
@media (max-width:760px) {
  .nav {min-height:60px;}
  .brand-mark {width:100px;}
  .nav-links {inset:60px 0 auto;max-height:calc(100svh - 61px);}
}
/* assets/css/planning-page.css */
/* Visual explanations for the planning page, within the existing Banktrade identity. */
.planning-page main {
  --planning-rule: rgba(61, 117, 108, .22);
  --planning-tint: #edf5ef;
}
/* On the tint the muted grey (#65736f, 4.46:1) falls just short of the 4.5:1
   text contrast (WCAG AA); a step darker it reaches 4.88:1. */
.planning-page main :where(.planning-usecase, .planning-start-section, .maint-area, .specialty-interface, .emc-filter-note) { --muted: #5f6d69; }
.planning-page main :where(section[id], h2[id]) { scroll-margin-top: 112px; }
.planning-page main :where(h1, h2, h3, p, li, a) { overflow-wrap: break-word; }
.planning-page main h1,
.planning-page .hero.short h1 {
  max-width: 28ch;
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.planning-page main h2 {
  max-width: 30ch;
  font-size: clamp(1.5rem, 2.1vw, 1.875rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.planning-page main h3 {
  font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.018em;
}
.planning-page main p { max-width: 65ch; font-size: 1rem; line-height: 1.7; }
.planning-page main .section { padding-block: clamp(48px, 5vw, 72px); }
.planning-page main .section.soft { background: var(--paper-2); }
.planning-page .hero.short { min-height: min(560px, 68vh); }
.planning-page .hero-content { padding-block: clamp(40px, 4.5vw, 68px); }
.planning-page .hero-copy { max-width: min(730px, 64%); min-width: 0; }
.planning-page .hero-media img { animation: none; will-change: auto; }
.planning-page .lead { margin-top: 20px; font-size: clamp(1rem, 1.2vw, 1.12rem); }
.planning-page .hero-actions { gap: 14px 22px; margin-top: 24px; }
.planning-page .section-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(24px, 5vw, 78px);
  margin-bottom: 30px;
  align-items: end;
}
.planning-page .section-head p { margin-bottom: 0; }
.planning-page .planning-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  padding-block: 14px;
  border-block: 1px solid var(--planning-rule);
  color: var(--green);
  font-size: .85rem;
  font-weight: 700;
}
.planning-page .planning-subnav a { padding-block: 8px; background-image: none; }
.planning-page .planning-subnav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.planning-page main :where(a, summary):focus-visible { outline: 2px solid var(--green); outline-offset: 5px; }
.planning-page .text-link {
  display: inline-block;
  color: var(--green);
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.planning-page .text-link:hover { text-decoration-thickness: 2px; }

.planning-page .planning-icon {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  color: var(--green);
}
.planning-page .planning-hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--planning-rule);
  list-style: none;
}
.planning-page .planning-hero-points > * { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.planning-page .planning-hero-points .planning-icon { width: 26px; height: 26px; }
.planning-page .planning-hero-points span { color: var(--ink); font-size: .79rem; font-weight: 600; line-height: 1.5; }
.planning-page :where(.planning-overview, .planning-ai, .planning-start) {
  display: grid;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.planning-page :where(.planning-overview, .planning-ai, .planning-start) > * { min-width: 0; }
.planning-page :where(.planning-overview, .planning-ai, .planning-start) h2 { margin-bottom: 18px; }
.planning-page .planning-overview { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 54px); }
.planning-page :where(.planning-overview-visual, .planning-process-visual, .planning-ai-visual) {
  position: relative;
  margin: 0;
  padding: 0;
  color: var(--green);
}
.planning-page .planning-render-image {
  display: block;
  width: 100%;
  height: auto;
  background: #f7f8f4;
}
.planning-page .planning-render-caption {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--planning-rule);
}
.planning-page .planning-render-heading {
  display: flex;
  align-items: baseline;
  gap: 13px;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.5;
}
.planning-page .planning-render-heading strong { font-weight: 600; }
.planning-page .planning-render-index { flex: 0 0 auto; color: var(--green); font-family: Sora, sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .07em; white-space: nowrap; }
.planning-page .planning-render-note { margin: 6px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }

.planning-page .planning-usecases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.planning-page .planning-usecase {
  position: relative;
  min-width: 0;
  padding: 24px;
  border-top: 2px solid var(--green);
  background: var(--planning-tint);
}
.planning-page .planning-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.planning-page :where(.planning-usecase > span, .planning-system-index) {
  display: block;
  color: var(--green);
  font-family: Sora, Manrope, sans-serif;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .07em;
}
.planning-page .planning-card-head .planning-system-index { margin-bottom: 0; }
.planning-page .planning-usecase > .planning-icon { float: right; margin: 0 0 12px 12px; }
.planning-page :where(.planning-usecase, .planning-system, .planning-decision-grid article) h3 { margin-bottom: 10px; }
.planning-page :where(.planning-usecase, .planning-system, .planning-decision-grid article) p:last-child { margin-bottom: 0; }
.planning-page .planning-usecase p { font-size: .95rem; }
.planning-page .planning-system-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.planning-page .planning-system {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--planning-rule);
  background: var(--paper);
}
.planning-page .planning-card-head > .planning-system-icon { width: 56px; height: 56px; color: var(--green); background: transparent; }
.planning-page .planning-system > .planning-system-index { margin-bottom: 12px; }
.planning-page .planning-system p { margin-bottom: 14px; }
.planning-page .planning-system .text-link { margin-top: auto; padding-top: 12px; align-self: flex-start; }

.planning-page .planning-decisions { background: var(--green); color: #fff; }
.planning-page .planning-decisions :where(p, .eyebrow) { color: #eef7f1; }
.planning-page .planning-decisions .planning-system-index { color: #d8eee7; }
.planning-page .planning-decisions .planning-icon { color: var(--mint); }
.planning-page .planning-decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 54px); }
.planning-page .planning-decision-grid article { min-width: 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .32); }
.planning-page .planning-decision-visual { display: grid; min-height: 128px; align-items: center; margin-bottom: 20px; color: #d8eee7; }
.planning-page .planning-decision-visual svg { display: block; width: 100%; max-height: 150px; overflow: visible; }

.planning-page .planning-process-panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.planning-page .planning-process-visual { margin-top: 8px; }
.planning-page .planning-process { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.planning-page .planning-process-step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-block: 18px;
  border-top: 1px solid var(--planning-rule);
}
.planning-page .planning-process-step:last-child { border-bottom: 1px solid var(--planning-rule); }
.planning-page .planning-process-step::before { position: absolute; top: 50px; bottom: -17px; left: 15px; border-left: 1px solid var(--planning-rule); content: ""; pointer-events: none; }
.planning-page .planning-process-step:last-child::before { display: none; }
.planning-page .planning-step-number { display: grid; width: 32px; height: 32px; margin: 0; place-items: center; border: 1px solid var(--planning-rule); background: var(--bg); color: var(--green); font-family: Sora, sans-serif; font-size: .72rem; font-weight: 600; }
.planning-page .planning-process-step h3 { margin: 3px 0 6px; font-size: 1rem; }
.planning-page .planning-process-step > div { min-width: 0; }
.planning-page .planning-process-step p { margin-bottom: 0; line-height: 1.65; }
.planning-page .planning-step-output { display: block; margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--mint); color: var(--green); font-size: .78rem; line-height: 1.5; }
.planning-page .planning-ai { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
.planning-page .planning-ai-note { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 20px; padding: 16px 18px; border-left: 2px solid var(--green); background: var(--paper-2); }
.planning-page .planning-ai-note .planning-icon { width: 30px; height: 30px; }
.planning-page .planning-ai-note p { margin: 0; font-size: .88rem; }
.planning-page main .planning-ai-note { font-size: .88rem; line-height: 1.65; }
.planning-page .planning-ai-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; width: 100%; margin: 28px 0 0; padding: 0; list-style: none; }
.planning-page .planning-ai > .planning-ai-checklist { grid-column: 1 / -1; margin-top: 0; }
.planning-page .planning-ai-checklist li { min-width: 0; padding: 14px 18px; border-left: 2px solid var(--mint); background: var(--paper-2); }
.planning-page .planning-ai-checklist strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: .88rem; font-weight: 700; line-height: 1.5; }
.planning-page .planning-ai-checklist span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.65; }
.planning-page .planning-start-section { background: var(--planning-tint); }
.planning-page .planning-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }
.planning-page .planning-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.planning-page .planning-input-list { margin: 0; padding: 0; list-style: none; counter-reset: planning-input; }
.planning-page .planning-input-list li { position: relative; padding: 16px 0 16px 44px; border-top: 1px solid var(--planning-rule); color: var(--muted); counter-increment: planning-input; }
.planning-page .planning-input-list li::before { position: absolute; top: 19px; left: 0; color: var(--green); font-family: Sora, sans-serif; font-size: .75rem; font-weight: 600; content: "0" counter(planning-input); }
.planning-page .planning-input-list strong { display: block; margin-bottom: 5px; color: var(--ink); }
.planning-page .planning-input-list span { display: block; line-height: 1.7; }
.planning-page .planning-start a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Only decorative SVG strokes move; all copy and illustration bases stay visible. */
.planning-page .planning-motion svg .plan-flow { stroke-dasharray: 8 7; animation: planning-flow 8s linear infinite paused; }
.planning-page .planning-motion svg .plan-pulse { animation: planning-pulse 4s ease-in-out infinite paused; }
.planning-page .planning-motion svg .plan-fan { transform-box: fill-box; transform-origin: center; animation: planning-fan 12s linear infinite paused; }
.planning-page .planning-motion svg .plan-flow-fast { stroke-dasharray: 5 5; animation: planning-flow 4s linear infinite paused; }
.planning-page .planning-motion svg .plan-ring { transform-box: fill-box; transform-origin: center; animation: planning-ring 2.6s ease-out infinite paused; }
.planning-page .planning-motion svg .plan-march { stroke-dasharray: 4 4; animation: planning-march 5s linear infinite paused; }
.planning-page .planning-motion svg .plan-blink { animation: planning-blink 2.4s linear infinite paused; }
.planning-page .planning-motion svg .plan-wave-run { animation: planning-wave 3s linear infinite paused; }
.planning-page .planning-motion svg .plan-noise-run { animation: planning-wave 1.6s linear infinite paused; }
.planning-page .planning-motion svg .plan-rotate { transform-box: view-box; transform-origin: 210px 190px; animation: planning-rotate 18s linear infinite paused; }
/* Construction sequence on one 10 s cycle: test, check, connect the B feed, then the A feed, the new racks come alive. */
.planning-page .planning-motion svg .plan-seq-bar { transform-box: fill-box; transform-origin: left center; animation: planning-seq-bar 10s ease-in-out infinite paused; }
.planning-page .planning-motion svg .plan-seq-check { animation: planning-seq-check 10s ease infinite paused; }
.planning-page .planning-motion svg .plan-seq-connect { stroke-dasharray: 1; animation: planning-seq-connect 10s ease-in-out infinite paused; }
.planning-page .planning-motion svg .plan-seq-connect-a { stroke-dasharray: 1; animation: planning-seq-connect-a 10s ease-in-out infinite paused; }
.planning-page .planning-motion svg .plan-seq-live { animation: planning-seq-live 10s ease infinite paused; }
.planning-page .planning-motion.is-in-view svg :where(.plan-flow, .plan-flow-fast, .plan-pulse, .plan-fan, .plan-ring, .plan-march, .plan-blink, .plan-wave-run, .plan-noise-run, .plan-rotate, .plan-seq-bar, .plan-seq-check, .plan-seq-connect, .plan-seq-connect-a, .plan-seq-live) { animation-play-state: running; }
.planning-page.planning-paused .planning-motion svg :where(.plan-flow, .plan-flow-fast, .plan-pulse, .plan-fan, .plan-ring, .plan-march, .plan-blink, .plan-wave-run, .plan-noise-run, .plan-rotate, .plan-seq-bar, .plan-seq-check, .plan-seq-connect, .plan-seq-connect-a, .plan-seq-live) { animation-play-state: paused; }
@keyframes planning-flow { to { stroke-dashoffset: -120; } }
@keyframes planning-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes planning-fan { to { transform: rotate(360deg); } }
@keyframes planning-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes planning-march { to { stroke-dashoffset: -32; } }
@keyframes planning-blink { 0%, 70% { opacity: 1; } 72%, 100% { opacity: .25; } }
@keyframes planning-wave { from { transform: translateX(0); } to { transform: translateX(40px); } }
@keyframes planning-rotate { to { transform: rotate(360deg); } }
@keyframes planning-seq-bar { 0% { transform: scaleX(0); opacity: 1; } 30%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes planning-seq-check { 0%, 30% { opacity: 0; } 36%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes planning-seq-connect { 0%, 38% { stroke-dashoffset: 1; opacity: 1; } 52%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes planning-seq-connect-a { 0%, 58% { stroke-dashoffset: 1; opacity: 1; } 72%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes planning-seq-live { 0%, 74% { opacity: 0; } 80%, 92% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width: 1100px) {
  .planning-page .hero-copy { max-width: min(690px, 72%); }
  .planning-page .planning-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planning-page .planning-process-panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .planning-page .planning-overview,
  .planning-page .planning-ai,
  .planning-page .planning-start { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .planning-page .hero-copy { max-width: 720px; }
  .planning-page .planning-overview-visual { max-width: 640px; width: 100%; }
  .planning-page .planning-ai-visual { max-width: 650px; width: 100%; }
  .planning-page .planning-process-panel { grid-template-columns: minmax(0, 1fr); }
  .planning-page .planning-process-visual { display: block; max-width: 640px; }

  .planning-page .planning-decision-grid { gap: 20px; }
  .planning-page .planning-usecase { padding: 20px; }
}
@media (max-width: 700px) {
  .planning-page main .section { padding-block: 44px; }
  .planning-page .hero.short { min-height: auto; }
  .planning-page .hero-content { padding-block: 36px 34px; }
  .planning-page .planning-subnav { gap: 0 22px; padding-block: 10px; }
  .planning-page .section-head,
  .planning-page .planning-usecases,
  .planning-page .planning-system-grid,
  .planning-page .planning-decision-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .planning-page .section-head { margin-bottom: 24px; }
  .planning-page .planning-usecases { margin-top: 24px; gap: 12px; }
  .planning-page .planning-usecase { padding: 20px; }
  .planning-page .planning-usecase .planning-card-head { margin-bottom: 12px; }
  .planning-page .planning-system { padding: 22px; }
  .planning-page .planning-decision-visual { min-height: 100px; max-width: 380px; margin-bottom: 16px; }
  .planning-page .planning-hero-points { gap: 10px; margin-top: 20px; padding-top: 16px; }
  .planning-page .planning-hero-points > * { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; }
  .planning-page .planning-hero-points span { font-size: .74rem; }
  .planning-page .planning-process-visual { display: block; }
  .planning-page .planning-render-caption { margin-top: 14px; padding-top: 14px; }

  .planning-page .planning-process-step { padding-block: 18px; gap: 14px; }
}
@media (max-width: 420px) {
  .planning-page .planning-ai-checklist { gap: 16px; }
  .planning-page .planning-ai-checklist strong { font-size: .85rem; }
  .planning-page .planning-ai-checklist span { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .planning-page .planning-motion svg :where(.plan-flow, .plan-flow-fast, .plan-pulse, .plan-fan, .plan-ring, .plan-march, .plan-blink, .plan-wave-run, .plan-noise-run, .plan-rotate, .plan-seq-bar, .plan-seq-check, .plan-seq-connect, .plan-seq-connect-a, .plan-seq-live) { animation: none !important; }
}

/* 4. szakasz (tervezési mintaoldal): adatsáv, négy esetkártya, kéthasábos szakaszok,
   Tier-szintek és a CDU-ábra. */
.planning-page .planning-hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--planning-rule);
  list-style: none;
}
.planning-page .planning-hero-facts li { min-width: 0; }
.planning-page .planning-hero-facts strong { display: block; color: var(--green); font-family: Sora, Manrope, sans-serif; font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.planning-page .planning-hero-facts span { display: block; margin-top: 4px; color: var(--ink); font-size: .79rem; font-weight: 600; line-height: 1.45; }
.planning-page .planning-usecases-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planning-page .planning-columns { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
.planning-page .planning-columns > * { min-width: 0; }
.planning-page .planning-columns h2 { margin-bottom: 18px; }
.planning-page .planning-columns > .planning-ai-checklist { margin-top: 0; }

@media (max-width: 1100px) {
  .planning-page .planning-usecases-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .planning-page .planning-columns { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 700px) {
  .planning-page .planning-usecases-4 { grid-template-columns: minmax(0, 1fr); }
  .planning-page .planning-hero-facts { gap: 10px; }
  .planning-page .planning-hero-facts span { font-size: .72rem; }
}
@media (max-width: 560px) {
  .planning-page :where(.planning-factor-list) { grid-template-columns: minmax(0, 1fr); }
}
.planning-page .planning-tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.planning-page .planning-tier { display: flex; flex-direction: column; min-width: 0; padding: 22px; border-top: 2px solid var(--green); background: var(--paper); }
.planning-page .planning-tier-visual { display: block; width: 100%; height: auto; margin-bottom: 18px; color: var(--green); }
.planning-page .planning-tier .planning-system-index { margin-bottom: 6px; font-size: .78rem; }
.planning-page .planning-tier h3 { margin-bottom: 10px; }
.planning-page .planning-tier p { font-size: .92rem; line-height: 1.65; }
.planning-page .planning-tier-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 12px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--planning-rule); font-size: .8rem; line-height: 1.5; }
.planning-page .planning-tier-facts dt { padding: 4px 0; color: var(--muted); }
.planning-page .planning-tier-facts dd { margin: 0; padding: 4px 0; color: var(--ink); font-weight: 600; }
.planning-page main .planning-tier-note { max-width: none; margin: 22px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.planning-page main .planning-tier-note + .planning-tier-note { margin-top: 6px; }
.planning-page main .planning-tier-callout { max-width: none; margin: 26px 0 0; padding: 16px 20px; border-left: 2px solid var(--green); background: var(--paper); color: var(--ink); font-size: .92rem; line-height: 1.65; }
.planning-page .planning-tier-callout strong { color: var(--green); }
/* Tier diagrams: current flows from the mains through the UPS to the IT rack. All four run the
   same 10 s cycle, so they compare one moment: normal operation, then maintenance on the first
   path (Tier IV: a fault). Tier I stops, the others keep the servers running. Paused, out of
   view or with reduced motion they show normal operation. */
.planning-page .planning-tier-visual .tier-bus { stroke: #cfe6da; stroke-width: 3; }
.planning-page .planning-tier-visual .tier-flow { stroke-width: 1.4; stroke-dasharray: 4 5; animation: tier-dash 1.2s linear infinite paused; }
.planning-page .planning-tier-visual .tier-p2 { opacity: 0; }
.planning-page .planning-tier-visual :is(.tier-p1, .tier-p2):not(.tier-flow) { animation: tier-p1 10s ease infinite paused; }
.planning-page .planning-tier-visual .tier-p2:not(.tier-flow) { animation-name: tier-p2; }
.planning-page .planning-tier-visual .tier-flow.tier-p1 { animation: tier-dash 1.2s linear infinite paused, tier-p1 10s ease infinite paused; }
.planning-page .planning-tier-visual .tier-flow.tier-p2 { animation: tier-dash 1.2s linear infinite paused, tier-p2 10s ease infinite paused; }
.planning-page .planning-tier-visual .tier-dim { animation: tier-dim 10s ease infinite paused; }
.planning-page .planning-motion.is-in-view .planning-tier-visual :where(.tier-flow, .tier-p1, .tier-p2, .tier-dim) { animation-play-state: running; }
.planning-page.planning-paused .planning-motion .planning-tier-visual :where(.tier-flow, .tier-p1, .tier-p2, .tier-dim) { animation-play-state: paused; }
@keyframes tier-dash { to { stroke-dashoffset: -18; } }
@keyframes tier-p1 { 0%, 44% { opacity: 1; } 50%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes tier-p2 { 0%, 44% { opacity: 0; } 50%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes tier-dim { 0%, 44% { opacity: 1; } 50%, 88% { opacity: .18; } 94%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .planning-page .planning-tier-visual :where(.tier-flow, .tier-p1, .tier-p2, .tier-dim) { animation: none !important; }
}
@media (max-width: 1100px) {
  .planning-page .planning-tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .planning-page .planning-tier-grid { grid-template-columns: minmax(0, 1fr); }
}
/* assets/css/doors-page.css */
/* Entrance solutions within the established Banktrade identity. */
.doors-page .doors-section-link { margin-top: 20px; }

/* Boon Edam partnership */
.doors-page .doors-partner-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.doors-page .doors-partner-grid > * { min-width: 0; }
.doors-page .doors-partner-logo { margin: 0; }
.doors-page .doors-partner-logo img { display: block; width: 200px; max-width: 100%; height: auto; }
.doors-page .doors-partner-grid h2 { margin-bottom: 15px; }
.doors-page .doors-partner-grid p { max-width: 72ch; }

/* Photo or schematic beside copy, on light sections */
.doors-page .doors-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.doors-page .doors-feature-grid > * { min-width: 0; }
.doors-page .doors-feature-photo { margin: 0; }
.doors-page .doors-feature-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper-2);
}
.doors-page .doors-feature-photo figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--planning-rule);
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.6;
}
.doors-page .doors-feature-grid > .planning-ai-checklist { margin-top: 0; }
.doors-page .doors-feature-copy h2 { margin-bottom: 18px; }
.doors-page .doors-feature-list { display: grid; margin: 24px 0 0; padding: 0; list-style: none; }
.doors-page .doors-feature-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding-block: 16px;
  border-top: 1px solid var(--planning-rule);
}
.doors-page .doors-feature-list .planning-icon { width: 30px; height: 30px; }
.doors-page .doors-feature-list strong { display: block; color: var(--ink); font-size: .95rem; font-weight: 600; }
.doors-page .doors-feature-list p { margin: 5px 0 0; font-size: .88rem; line-height: 1.65; }

/* Sliding door schematic */
.doors-page .doors-product-schematic > svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.doors-page .doors-product-schematic .doors-slide-left { animation: doors-slide-left 7s ease-in-out infinite paused; }
.doors-page .doors-product-schematic .doors-slide-right { animation: doors-slide-right 7s ease-in-out infinite paused; }
.doors-page .doors-product-schematic.is-in-view .doors-slide-left,
.doors-page .doors-product-schematic.is-in-view .doors-slide-right { animation-play-state: running; }
.doors-page.planning-paused .doors-product-schematic .doors-slide-left,
.doors-page.planning-paused .doors-product-schematic .doors-slide-right { animation-play-state: paused; }
@keyframes doors-slide-left { 0%, 15%, 100% { transform: translateX(0); } 40%, 70% { transform: translateX(-64px); } }
@keyframes doors-slide-right { 0%, 15%, 100% { transform: translateX(0); } 40%, 70% { transform: translateX(64px); } }
@media (prefers-reduced-motion: reduce) {
  .doors-page .doors-product-schematic .doors-slide-left,
  .doors-page .doors-product-schematic .doors-slide-right { animation: none; }
}

/* How a revolving door works (dark band) */
.doors-page .doors-explain-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.doors-page .doors-explain-grid > * { min-width: 0; }
.doors-page .doors-explain-grid h2 { margin-bottom: 18px; color: #fff; }
.doors-page .doors-explain-list { display: grid; margin: 24px 0 0; padding: 0; list-style: none; }
.doors-page .doors-explain-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  padding-block: 15px;
  border-top: 1px solid rgba(255, 255, 255, .24);
}
.doors-page .doors-explain-list .planning-icon { width: 30px; height: 30px; }
.doors-page .doors-explain-list h3 { margin: 0 0 5px; color: #fff; font-size: 1rem; }
.doors-page .doors-explain-list p { margin: 0; font-size: .9rem; line-height: 1.65; }
.doors-page .doors-explain-note { margin: 6px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .24); font-size: .82rem; }
.doors-page .doors-diagram { justify-self: center; width: 100%; max-width: 460px; margin: 0; }
.doors-page .doors-diagram svg { display: block; width: 100%; height: auto; }
.doors-page .doors-diagram figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .26); color: #e0eee5; font-size: .78rem; line-height: 1.6; }

/* Security levels */
.doors-page .doors-level-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.doors-page .doors-level {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(20px, 2vw, 28px);
  border-top: 2px solid var(--green);
  background: var(--paper);
}
.doors-page .doors-level h3 { margin: 12px 0 10px; }
.doors-page .doors-level p { margin: 0; font-size: .92rem; }
.doors-page .doors-level .doors-product-family { margin-top: auto; padding-top: 16px; }
.doors-page p.doors-product-family { margin-bottom: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.doors-page .doors-product-family strong { color: var(--green); font-weight: 600; }

/* Service */
.doors-page .doors-service-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--planning-rule);
  list-style: none;
}
.doors-page .doors-service-band > * {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 14px;
  min-width: 0;
  align-items: start;
}
.doors-page .doors-service-band .planning-icon { grid-row: 1 / span 2; width: 30px; height: 30px; }
.doors-page .doors-service-band strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.doors-page .doors-service-band span { margin: 4px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }

/* Installations, same caption style as the other photos */
.doors-page .doors-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.doors-page .doors-gallery > li { min-width: 0; }
.doors-page .doors-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); }
.doors-page .doors-gallery-caption { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--planning-rule); }
.doors-page .doors-gallery-caption strong { display: flex; gap: 12px; align-items: baseline; color: var(--ink); font-size: .92rem; font-weight: 600; line-height: 1.4; }
.doors-page .doors-gallery-caption strong span { color: var(--green); font-family: Sora, Manrope, sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .06em; }
.doors-page .doors-gallery-caption p { margin: 6px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.6; }

@media (max-width: 1100px) {
  .doors-page .doors-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
}
@media (max-width: 900px) {
  .doors-page .doors-feature-grid,
  .doors-page .doors-explain-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .doors-page .doors-level-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .doors-page .doors-partner-grid { grid-template-columns: 170px minmax(0, 1fr); gap: 30px; }
  .doors-page .doors-service-band { gap: 22px; }
}
@media (max-width: 700px) {
  .doors-page .doors-partner-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .doors-page .doors-partner-logo img { width: 180px; }
  .doors-page .doors-service-band { grid-template-columns: minmax(0, 1fr); gap: 21px; }
}
@media (max-width: 560px) {
  .doors-page .doors-gallery { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
}