/* ═══════════════════════════════════════════════════════
   KUPOLLA — Inner Pages CSS Part 1
   Inner hero, breadcrumbs, About
   kupolla-pages-1.css
════════════════════════════════════════════════════════ */

/* ── BREADCRUMBS (shared all inner pages) ── */
.kp-breadcrumbs-wrap { background: var(--c-stone-bg); border-bottom: 1px solid var(--c-border); padding: calc(var(--hh) + var(--safe-t) + .75rem) 0 .75rem; max-width: 100%; overflow-x: clip; }
.kp-breadcrumbs { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kp-bc__item { font-size: .8125rem; color: var(--c-muted); min-height: 36px; display: flex; align-items: center; transition: color var(--tr-f); }
.kp-bc__item:hover { color: var(--c-forest); }
.kp-bc__item--cur { color: var(--c-text); font-weight: 500; }
.kp-bc__sep { color: var(--c-stone); font-size: .875rem; }

/* ── INNER PAGE HERO (shared) ── */
.kp-inner-hero {
  background: linear-gradient(145deg, #000 0%, #202020 100%);
  padding: 3.5rem 0 3rem;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}
.kp-inner-hero:not(.kp-inner-hero--about) {
  background: linear-gradient(140deg, #000 0%, #00311e 60%, #0a3a30 100%);
}
.kp-inner-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px; pointer-events: none;
  z-index: 0;
}
.kp-inner-hero > .kp-container,
.kp-inner-hero > .kp-inner-hero__layout {
  position: relative;
  z-index: 1;
}
.kp-inner-hero::after {
  content: ''; position: absolute;
  right: -5%; bottom: 0; width: 44%; max-width: 520px; height: 100%;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 360' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 340Q40 60 200 60Q360 60 360 340Z' stroke='rgba(5,31,67,.12)' stroke-width='1.5' fill='rgba(14,35,25,.2)'/%3E%3Cpath d='M75 265Q200 225 325 265' stroke='rgba(5,31,67,.08)' stroke-width='1'/%3E%3Cpath d='M105 195Q200 160 295 195' stroke='rgba(5,31,67,.07)' stroke-width='1'/%3E%3Ccircle cx='200' cy='60' r='4' fill='rgba(5,31,67,.3)'/%3E%3C/svg%3E") right bottom/contain no-repeat;
  pointer-events: none; opacity: .6;
}
.kp-inner-hero__content { position: relative; z-index: 2; max-width: 680px; }
.kp-inner-hero__badge { display: inline-block; font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: .75rem; }
.kp-inner-hero__title { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 300; line-height: 1.1; color: var(--c-white); margin-bottom: 1rem; }
/* На темному inner-hero градієнт бренду як text-fill нечитабельний → білий em */
.kp-inner-hero__title em { font-style: normal; color: var(--c-white); }
.kp-inner-hero__desc { font-size: 1rem; color: rgba(255,255,255,.62); line-height: 1.75; max-width: 540px; }

/* Inner hero with illustration (about, technologies) */
.kp-inner-hero--about::after,
.kp-inner-hero--tech::after,
.kp-inner-hero--gallery::after,
.kp-inner-hero--blog::after,
.kp-inner-hero--faq::after,
.kp-inner-hero--contacts::after,
.kp-inner-hero--catalog::after { display: none; }
.kp-inner-hero--about,
.kp-inner-hero--tech,
.kp-inner-hero--gallery,
.kp-inner-hero--blog,
.kp-inner-hero--faq,
.kp-inner-hero--contacts,
.kp-inner-hero--catalog {
  display: flex;
  align-items: stretch;
  min-height: clamp(420px, 52vh, 580px);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.kp-inner-hero--tech,
.kp-inner-hero--gallery,
.kp-inner-hero--blog,
.kp-inner-hero--faq,
.kp-inner-hero--contacts,
.kp-inner-hero--catalog {
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.kp-inner-hero--about > .kp-inner-hero__layout,
.kp-inner-hero--tech > .kp-inner-hero__layout,
.kp-inner-hero--gallery > .kp-inner-hero__layout,
.kp-inner-hero--blog > .kp-inner-hero__layout,
.kp-inner-hero--faq > .kp-inner-hero__layout,
.kp-inner-hero--contacts > .kp-inner-hero__layout,
.kp-inner-hero--catalog > .kp-inner-hero__layout {
  width: 100%;
}
.kp-inner-hero__layout {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.kp-inner-hero--about .kp-inner-hero__content,
.kp-inner-hero--tech .kp-inner-hero__content,
.kp-inner-hero--gallery .kp-inner-hero__content,
.kp-inner-hero--blog .kp-inner-hero__content,
.kp-inner-hero--faq .kp-inner-hero__content,
.kp-inner-hero--contacts .kp-inner-hero__content,
.kp-inner-hero--catalog .kp-inner-hero__content {
  flex: 1 1 320px;
  min-width: 0;
  max-width: none;
}
.kp-inner-hero__illustration {
  flex: 0 1 420px;
  width: min(42%, 420px);
  position: relative;
  align-self: center;
  pointer-events: none;
  z-index: 1;
  line-height: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.kp-inner-hero--tech .kp-inner-hero__illustration {
  flex: 0 1 560px;
  width: min(54%, 560px);
}
.kp-inner-hero--tech .kp-inner-hero__content {
  flex: 1 1 280px;
}
.kp-inner-hero--gallery .kp-inner-hero__illustration {
  flex: 0 1 520px;
  width: min(50%, 520px);
}
.kp-inner-hero--blog .kp-inner-hero__illustration {
  flex: 0 1 480px;
  width: min(48%, 480px);
}
.kp-inner-hero--faq .kp-inner-hero__illustration {
  flex: 0 1 460px;
  width: min(46%, 460px);
}
.kp-inner-hero--contacts .kp-inner-hero__illustration,
.kp-inner-hero--catalog .kp-inner-hero__illustration {
  flex: 0 1 500px;
  width: min(48%, 500px);
}
.kp-inner-hero__illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  opacity: 0.95;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
  -webkit-filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

/* ══════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════ */
/* Hero: хто ми + відео фон */
.kp-inner-hero--about.kp-about-hero {
  display: block;
  min-height: clamp(520px, 72vh, 720px);
  padding: 0;
  background: #0a0a0a;
}
.kp-about-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.kp-about-hero__photo,
.kp-about-hero__photo img,
.kp-about-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.kp-about-hero__photo { display: block; margin: 0; }
.kp-about-hero__video {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s var(--ease);
}
.kp-about-hero__bg.is-video-on .kp-about-hero__video {
  opacity: 1;
  visibility: visible;
}
.kp-about-hero__bg.is-video-on .kp-about-hero__photo {
  visibility: hidden;
}
.kp-about-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.35) 100%);
  z-index: 1;
  pointer-events: none;
}
.kp-about-hero__layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  min-height: clamp(520px, 72vh, 720px);
  padding-top: clamp(3.25rem, 6.5vw, 5.75rem);
  padding-bottom: clamp(3.25rem, 6.5vw, 5.75rem);
  padding-left: calc(clamp(1.5rem, 5vw, 3.25rem) + var(--safe-l));
  padding-right: calc(clamp(1.5rem, 5vw, 3.25rem) + var(--safe-r));
}
.kp-about-hero__content { min-width: 0; max-width: 40rem; }
.kp-label--on-dark { color: rgba(255,255,255,.78); }
.kp-about-hero__title {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(1.65rem, 3.2vw, 2.65rem);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--c-white);
  margin: .75rem 0 1.25rem;
  text-transform: none;
}
.kp-about-hero__text p {
  font-size: 1rem;
  color: rgba(255,255,255,.72);
  line-height: 1.75;
  margin: 0 0 1rem;
}
.kp-about-hero__text p:last-child { margin-bottom: 1.75rem; }
.kp-about-hero__media {
  margin: 0;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  overflow: hidden;
}
.kp-about-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.kp-about-hero__media-cap {
  padding: .75rem 1rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.65);
  line-height: 1.45;
}

/* Team */
.kp-about-team { background: var(--c-white); }
.kp-team__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.75rem 1.5rem; }
.kp-team__card { flex: 0 1 calc(25% - 1.125rem); min-width: 160px; max-width: 220px; text-align: center; }
.kp-team__photo { width: 128px; height: 128px; margin: 0 auto 1rem; border-radius: var(--r-circle); overflow: hidden; background: var(--c-forest); display: flex; align-items: center; justify-content: center; }
.kp-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-team__initials { font-family: var(--f-serif); text-transform: uppercase; letter-spacing: .01em; font-size: 1.75rem; color: var(--c-white); font-weight: 300; }
.kp-team__name { font-size: 1rem; font-weight: 500; color: var(--c-dark); margin-bottom: .25rem; }
.kp-team__role { font-size: .8125rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Production / "Як ми працюємо" */
.kp-about-production { background: var(--c-warm); }
.kp-about-prod-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.kp-about-prod-feature__media {
  overflow: hidden;
  border: 1px solid var(--c-border);
  background: var(--c-border);
  aspect-ratio: 16/9;
}
.kp-about-prod-feature__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}
.kp-about-prod-feature__title {
  font-family: var(--f-serif);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 400;
  color: var(--c-dark);
  margin: 0 0 .75rem;
}
.kp-about-prod-feature__desc {
  font-size: 1rem;
  color: var(--c-muted);
  line-height: 1.7;
  margin: 0;
}
.kp-production__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.kp-production__card { background: var(--c-white); border: 1px solid var(--c-border); overflow: hidden; }
.kp-production__img { aspect-ratio: 4/3; background: var(--c-border); overflow: hidden; }
.kp-production__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kp-production__body { padding: 1.25rem 1.25rem 1.5rem; }
.kp-production__title { font-size: .9375rem; font-weight: 500; color: var(--c-dark); margin-bottom: .375rem; }
.kp-production__desc { font-size: .8125rem; color: var(--c-muted); line-height: 1.55; margin: 0; }

/* Showroom */
.kp-about-showroom { background: linear-gradient(140deg, #000 0%, #202020 100%); position: relative; overflow: hidden; }
.kp-about-showroom::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 36px 36px; pointer-events: none; }
.kp-showroom__inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.kp-showroom__title {
  font-family: var(--f-serif);
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 .4rem;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
.kp-showroom__sub {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.kp-showroom__desc { font-size: 1rem; color: rgba(255,255,255,.65); line-height: 1.75; margin: 1rem 0 1.75rem; }
.kp-showroom__addr {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: rgba(255,255,255,.85);
  font-size: .9375rem;
  margin-bottom: 1.75rem;
  text-decoration: none;
  transition: color var(--tr-f);
}
.kp-showroom__addr:hover { color: var(--c-white); }
.kp-showroom__addr svg { width: 20px; height: 20px; flex-shrink: 0; color: currentColor; }
.kp-showroom__media {
  overflow: hidden;
  aspect-ratio: 4/3;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
}
.kp-showroom__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kp-showroom__map {
  position: relative;
  margin-top: 2rem;
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  aspect-ratio: 21/9;
  min-height: 220px;
}
.kp-showroom__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}