/* 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. */
html:not([data-scrolled]) .site-header {
  background-color: #fff;
}

.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;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.image-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

.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;
  }

  .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, .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; }
}