.experience-page { overflow: hidden; }
.experience-page h1,
.experience-page h2,
.experience-page h3 { text-wrap: balance; }
.experience-page p { text-wrap: pretty; }

.experience-hero {
  position: relative;
  padding: clamp(52px, 8vw, 112px) 0 clamp(72px, 9vw, 128px);
}
.experience-hero::after {
  content: "";
  position: absolute;
  right: -12vw;
  top: 8%;
  width: 38vw;
  height: 38vw;
  border: 1px solid rgba(162, 58, 104, .13);
  border-radius: 50%;
  pointer-events: none;
}
.experience-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
  align-items: center;
  gap: clamp(38px, 7vw, 94px);
}
.experience-hero-copy { position: relative; z-index: 1; }
.experience-hero h1 {
  max-width: 820px;
  font-size: clamp(3rem, 6.3vw, 6.6rem);
  line-height: .96;
}
.experience-hero .hero-lead { max-width: 720px; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  color: var(--fig);
  font-weight: 800;
  border-bottom: 1px solid rgba(59, 31, 74, .28);
}
.text-link span { color: var(--fig-2); }
.experience-hero-visual { position: relative; min-height: 560px; }
.hero-photo {
  position: absolute;
  inset: 0 0 0 9%;
  margin: 0;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px 22px 22px 22px;
  box-shadow: 0 34px 80px rgba(59, 31, 74, .2);
}
.hero-proof {
  position: absolute;
  left: -4%;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--fig);
  color: #fff;
  box-shadow: 0 18px 48px rgba(59, 31, 74, .28);
}
.hero-proof strong { font-size: 2.4rem; line-height: 1; color: var(--gold); }
.hero-proof span { font-size: .84rem; line-height: 1.35; font-weight: 750; }

.experience-metrics { border-block: 1px solid rgba(59, 31, 74, .11); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.metrics-grid > div { padding: 28px 24px; border-right: 1px solid rgba(59, 31, 74, .11); }
.metrics-grid > div:first-child { padding-left: 0; }
.metrics-grid > div:last-child { border-right: 0; }
.metrics-grid strong { display: block; color: var(--fig); font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -.035em; }
.metrics-grid span { display: block; margin-top: 5px; color: var(--muted); font-size: .86rem; }

.section-index {
  margin: 5px 0 0;
  color: var(--fig-2);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.split-intro { display: grid; grid-template-columns: .48fr 1.52fr; gap: 50px; }
.split-intro > div { max-width: 850px; }
.split-intro h2,
.project-heading h2,
.systems-heading h2,
.value-grid h2 { font-size: clamp(2.2rem, 4.8vw, 4.5rem); }
.large-copy { margin: 28px 0 16px; color: var(--graphite); font-size: clamp(1.18rem, 2vw, 1.5rem); line-height: 1.5; }
.split-intro div > p:last-child { max-width: 720px; color: var(--muted); }

.project-section { background: #21122a; color: rgba(255,255,255,.76); }
.project-section h2,
.project-section h3 { color: #fff; }
.project-section .section-index,
.project-type { color: #edbc5e; }
.project-heading { display: grid; grid-template-columns: .48fr 1.52fr; gap: 50px; align-items: start; }
.project-heading h2 { max-width: 850px; }
.project-feature {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: center;
  margin-top: clamp(54px, 8vw, 104px);
}
.project-type { display: block; font-size: .8rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.project-feature-copy h3 { margin-top: 16px; font-size: clamp(1.9rem, 3.3vw, 3.15rem); }
.project-feature-copy p { margin: 22px 0 0; }
.clean-list { margin: 26px 0 0; padding: 0; list-style: none; }
.clean-list li { position: relative; padding: 12px 0 12px 25px; border-top: 1px solid rgba(255,255,255,.13); }
.clean-list li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.project-image-pair { position: relative; min-height: 650px; }
.project-image-pair figure { position: absolute; margin: 0; overflow: hidden; }
.project-image-pair img { width: 100%; height: 100%; object-fit: cover; }
.image-tall { inset: 0 27% 8% 0; }
.image-detail { inset: 32% 0 0 57%; border: 10px solid #21122a; }
.timeline { margin-top: clamp(70px, 10vw, 132px); border-top: 1px solid rgba(255,255,255,.18); }
.timeline-item { display: grid; grid-template-columns: .34fr 1.66fr; gap: 32px; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.timeline-item > span { color: var(--gold); font-weight: 850; }
.timeline-item h3 { font-size: clamp(1.25rem, 2.2vw, 1.8rem); }
.timeline-item p { max-width: 720px; margin: 8px 0 0; }

.systems-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px, 9vw, 120px); }
.systems-heading { position: sticky; top: 118px; align-self: start; }
.systems-heading h2 { margin-top: 18px; }
.systems-heading > p:last-child { max-width: 560px; color: var(--muted); }
.systems-list { border-top: 1px solid rgba(59,31,74,.15); }
.systems-list article { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid rgba(59,31,74,.15); }
.systems-list article > span { color: var(--fig-2); font-weight: 850; }
.systems-list h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.systems-list p { margin: 8px 0 0; color: var(--muted); }
.systems-gallery { display: grid; grid-template-columns: 1.45fr .75fr .75fr; gap: 12px; min-height: 500px; margin-top: clamp(64px, 9vw, 116px); }
.systems-gallery figure { min-height: 440px; margin: 0; overflow: hidden; }
.systems-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.systems-gallery figure:hover img { transform: scale(1.025); }

.experience-value { background: var(--cream-2); }
.value-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(48px, 9vw, 120px); }
.value-grid h2 { margin-top: 18px; }
.value-points { counter-reset: value; }
.value-points article { position: relative; padding: 0 0 28px 64px; margin-bottom: 28px; border-bottom: 1px solid rgba(59,31,74,.14); }
.value-points article::before { counter-increment: value; content: "0" counter(value); position: absolute; left: 0; top: 2px; color: var(--fig-2); font-size: .82rem; font-weight: 850; }
.value-points h3 { font-size: 1.5rem; }
.value-points p { margin: 8px 0 0; color: var(--muted); }

.experience-cta { background: #21122a; padding-top: 0; }
.cta-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(42px, 8vw, 100px); align-items: end; padding-top: 76px; color: rgba(255,255,255,.76); }
.cta-panel h2 { max-width: 720px; color: #fff; font-size: clamp(2.25rem, 4.6vw, 4.25rem); }
.cta-panel .kicker { color: var(--gold); }
.cta-panel > div:last-child > p { max-width: 520px; margin: 0; }
.cta-ghost { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }

@media (max-width: 980px) {
  .experience-hero-grid { grid-template-columns: 1fr .62fr; gap: 34px; }
  .experience-hero-visual { min-height: 460px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid > div:nth-child(2) { border-right: 0; }
  .metrics-grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(59,31,74,.11); }
  .metrics-grid > div:first-child,
  .metrics-grid > div:nth-child(3) { padding-left: 0; }
  .project-feature { grid-template-columns: 1fr; }
  .project-image-pair { min-height: 560px; }
  .systems-layout,
  .value-grid,
  .cta-panel { grid-template-columns: 1fr; }
  .systems-heading { position: static; }
}

@media (max-width: 720px) {
  .experience-hero { padding-top: 46px; }
  .experience-hero-grid { grid-template-columns: 1fr; }
  .experience-hero h1 { font-size: clamp(2.75rem, 14vw, 4.5rem); }
  .experience-hero-visual { min-height: 470px; margin-top: 12px; }
  .hero-photo { left: 6%; }
  .hero-photo img { border-radius: 120px 120px 18px 18px; }
  .hero-proof { left: 0; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metrics-grid > div { padding: 20px 0; border-right: 0; border-bottom: 1px solid rgba(59,31,74,.11); }
  .metrics-grid > div:last-child { border-bottom: 0; }
  .split-intro,
  .project-heading { grid-template-columns: 1fr; gap: 22px; }
  .project-image-pair { min-height: 440px; }
  .image-tall { inset-right: 22%; }
  .image-detail { inset: 38% 0 0 59%; border-width: 7px; }
  .timeline-item { grid-template-columns: 1fr; gap: 10px; }
  .systems-gallery { grid-template-columns: 1.25fr .75fr; min-height: 470px; }
  .systems-gallery figure { min-height: 250px; }
  .systems-gallery .gallery-wide { grid-column: 1 / -1; min-height: 280px; }
  .value-points article { padding-left: 46px; }
}

@media (max-width: 420px) {
  .experience-hero-visual { min-height: 410px; }
  .hero-proof { padding: 14px 16px; }
  .hero-proof strong { font-size: 2rem; }
  .project-image-pair { min-height: 380px; }
  .systems-gallery { min-height: 410px; }
}

@media (prefers-reduced-motion: reduce) {
  .systems-gallery img { transition: none; }
}

/* 2026-09-15 – Metrel banner és térköz javítás
   A teljes szélességű mérőműszeres kép nem örökli a galéria fix magasságát,
   ezért megszűnik az alatta látható nagy üres terület. */
.systems-section {
  padding-bottom: clamp(24px, 4vw, 44px);
}

.experience-value {
  padding-top: clamp(28px, 4vw, 52px);
}

.systems-gallery {
  margin-bottom: 0;
}

.systems-gallery .gallery-banner,
.systems-gallery .metrel-measurement-photo {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 6px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 4.6;
  border-radius: 0;
}

.systems-gallery .gallery-banner img,
.systems-gallery .metrel-measurement-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* A 10+ év gyakorlati tapasztalat jelölés olvashatóbb, kontrasztos hátteret kap. */
.experience-hero-visual .hero-proof {
  background: rgba(255, 255, 255, .96);
  color: #2b0f3c;
  border: 1px solid rgba(43, 15, 60, .14);
  box-shadow: 0 18px 50px rgba(43, 15, 60, .22);
  text-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.experience-hero-visual .hero-proof strong {
  color: #d0a744;
  text-shadow: none;
}

.experience-hero-visual .hero-proof span {
  color: #2b0f3c;
  font-weight: 900;
  line-height: 1.18;
  text-shadow: none;
}

@media (max-width: 720px) {
  .systems-section {
    padding-bottom: 22px;
  }

  .experience-value {
    padding-top: 26px;
  }

  .systems-gallery .gallery-banner,
  .systems-gallery .metrel-measurement-photo {
    aspect-ratio: 16 / 7;
    margin-top: 8px;
  }

  .experience-hero-visual .hero-proof {
    padding: 14px 16px;
    gap: 10px;
  }

  .experience-hero-visual .hero-proof strong {
    font-size: clamp(38px, 15vw, 58px);
  }

  .experience-hero-visual .hero-proof span {
    font-size: 15px;
  }
}