/* =========================================================
   ABOUT (О компании) — fixed layout, no columns, 900px sections
   ========================================================= */

/* FIX: если в теме где-то включены CSS columns — отключаем на шаблоне */
.page-template-page-about .site-main,
.page-template-page-about .entry-content,
.page-template-page-about .about,
.page-template-page-about .about-stack {
  -webkit-column-count: 1 !important;
  -moz-column-count: 1 !important;
  column-count: 1 !important;

  -webkit-columns: auto !important;
  -moz-columns: auto !important;
  columns: auto !important;

  column-gap: 0 !important;
}

.page-template-page-about .about-stack{
  display: flex;
  flex-direction: column;
}

.about{
  background: var(--color-bg-primary);
}

/* base typography */
.about :where(h1,h2,h3,p){ margin: 0; }

.about-eyebrow{
  font-weight: var(--font-weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-size: 14px;
  margin-bottom: 12px;
}

.about-title{
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  margin-bottom: 16px;
}

.about-text{
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 14px;
}

.about-text strong{
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.about-pill{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(202,148,44,.18);
  border: 1px solid rgba(202,148,44,.22);
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  margin-right: 6px;
}

.about-quote{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(51,39,26,.10);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1.45;
  margin: 10px 0 16px 0;
}

.about-quote strong{
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.about-quote--wide{
  max-width: 720px;
  margin-top: 18px;
}

.about-highlight{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: none;
  border: 1px solid #68BF39;
  color: #68BF39;
}

/* =========================================================
   Section wrapper (900px height)
   ========================================================= */

.about-section{
  position: relative;
  min-height: 900px;
  height: 900px;
  overflow: hidden;
}

@media (max-width: 1024px){
  .about-section{
    min-height: 900px;
    height: auto; /* на планшете можно авто, но если строго надо 900 — убери */
    padding: 64px 0;
  }
}

.about-section__bg{
  position: absolute;
  inset: 0;
  background-image: var(--about-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

.about-section__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.about-section__inner{
  position: relative;
  z-index: 2;

  /* РЕЗИНОВАЯ ширина */
  width: 100%;
  max-width: 1840px;           /* как в шапке, если хочешь общий максимум */
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);

  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* left-content variant (text block on left like макет) */
.about-section__inner--left{
  align-items: flex-start;
}

@media (max-width: 768px){
  .about-section__inner--left{
    align-items: center;
    text-align: center;
  }
}

/* =========================================================
   Page header (breadcrumbs only) — less noticeable
   ========================================================= */

.about-pagehead{
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1196px, calc(100% - 32px));
  z-index: 3;
  pointer-events: none; /* чтобы не мешало */
}

.about-pagehead .breadcrumbs{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(246,243,234,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(246,243,234,.75);
  font-size: 12px;
}

.about-pagehead .breadcrumbs a{
  color: rgba(246,243,234,.85);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.about-pagehead .breadcrumbs a:hover{ opacity: .85; }

/* =========================================================
   TOP hero center
   ========================================================= */

.about-top__content{
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.about-top__title{
  font-weight: var(--font-weight-bold);
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.05;
  color: rgba(246,243,234,.96);
  margin-bottom: 16px;
}

.about-top__text{
  color: rgba(246,243,234,.86);
  font-size: 18px;
  line-height: 1.55;
}

/* overlays per section (по твоему ТЗ) */
.about-overlay--top{
  background: linear-gradient(180deg, rgba(51, 39, 26, 0) 0%, rgba(51, 39, 26, 0.8) 100%);
}

/* философия: ты попросил такой же 180deg */
.about-overlay--philosophy{
  background: linear-gradient(180deg, rgba(51, 39, 26, 0) 0%, rgba(51, 39, 26, 0.8) 100%);
}

/* элита — оставим темнее для читабельности (можешь поменять) */
.about-overlay--elite{
  background: rgba(0,0,0,.35);
}

/* наш подход: 273.33deg светлый */
.about-overlay--approach{
  background: linear-gradient(273.33deg, rgba(246, 243, 234, 0) 13.11%, rgba(246, 243, 234, 0.95) 48.59%);
}

/* как мы работаем: 273.33deg тёмный */
.about-overlay--process{
  background: linear-gradient(273.33deg, rgba(44, 36, 26, 0.855) 13.11%, rgba(44, 36, 26, 0.95) 48.59%);
}

/* =========================================================
   Elite cards (glass)
   ========================================================= */

.about-dark__title{
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  color: rgba(246,243,234,.95);
  margin-bottom: 28px;
}

.about-dark__accent{ color: var(--color-accent); }

.about-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1024px){
  .about-cards{ grid-template-columns: 1fr; }
}

.glass-card{
  border-radius: 22px;
  padding: 22px;
  background: rgba(51,39,26,.48);
  border: 1px solid rgba(246,243,234,.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  min-height: 180px;
}

.glass-card__num{
  color: var(--color-accent);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 14px;
  font-size: 18px;
}

.glass-card__text{
  color: rgba(246,243,234,.92);
  font-size: 18px;
  line-height: 1.45;
}

.glass-card__text strong{
  color: #fff;
  font-weight: var(--font-weight-semibold);
}

/* =========================================================
   Process steps
   ========================================================= */

.steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 10px;
}

@media (max-width: 1024px){
  .steps{ grid-template-columns: 1fr; }
  .steps__line{ display: none; }
}

.steps__line{
  position: absolute;
  left: 7%;
  right: 7%;
  top: 38px;
  height: 2px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(202,148,44,.55) 0 10px,
    rgba(202,148,44,0) 10px 18px
  );
  z-index: 0;
}

.step-card{
  position: relative;
  z-index: 1;
  border-radius: 22px;
  padding: 22px 22px 20px 22px;
  background: rgba(51,39,26,.55);
  border: 1px solid rgba(246,243,234,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  min-height: 220px;
}

.step-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(202,148,44,1);
  border: 1px solid rgba(202,148,44,.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.step-card__icon img{
  width: 22px;
  height: 22px;
  display: block;
}

.step-card__title{
  color: rgba(246,243,234,.95);
  font-size: 18px;
  line-height: 1.25;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 10px;
}

.step-card__text{
  color: rgba(246,243,234,.86);
  font-size: 16px;
  line-height: 1.5;
}

/* =========================================================
   Reveal
   ========================================================= */

.js-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.js-reveal.is-inview{
  opacity: 1;
  transform: translateY(0);
}








/* =========================
   SPLIT sections (Философия / Наш подход)
   ========================= */

.about-split{
  position: relative;
  height: 900px;
  overflow: hidden;
}

.about-split__bg{
  position: absolute;
  inset: 0;
  background-image: var(--about-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
}

/* сам градиент — как ты указал */
.about-split__overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    273.33deg,
    rgba(246, 243, 234, 0) 13.11%,
    rgba(246, 243, 234, 0.95) 48.59%
  );
}

.about-split__inner{
position: relative;
    z-index: 2;
    /* width: min(1196px, 100%); */
    height: 100%;
    margin: 0 auto;
    padding: 0 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    justify-items: center;
}

.about-split__left{
  max-width: 720px;
}

.about-split__right{
  /* правая “картинка” остаётся чистой, без молока */
  height: 100%;
}

/* Мобилка: одна колонка, молоко становится “полной заливкой” мягко */
@media (max-width: 900px){
  .about-split{
    height: auto;
    min-height: 900px;
    padding: 64px 0;
  }

  .about-split__inner{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-split__left{
    max-width: 100%;
    margin: 0 auto;
  }

  .about-split__overlay{
    background: rgba(246, 243, 234, 0.20);
  }

  .about-quote{ justify-content: center; }
}

/* Чтобы Philosophy/Approach точно использовали split, даже если старые классы остались */
.about-philosophy.about-section,
.about-approach.about-section{
  padding: 0; /* если у тебя было padding сверху */
}


/* =========================
   Steps connectors (между иконками)
   ========================= */

.steps{
  position: relative;
}

/* контейнер для сегментов */
.steps__connectors{
  position: absolute;
  left: 0;
  right: 0;
  top: 62px !important; /* подстроено под центр иконок (44px иконка) */
  height: 2px;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 1024px){
  .steps__connectors{ display:none; }
}

/* сегмент между i и i+1 */
.steps__seg{
  position: absolute;
  height: 2px;

  background-image: repeating-linear-gradient(
    90deg,
    rgba(202,148,44,.55) 0 10px,
    rgba(202,148,44,0) 10px 18px
  );

  /* “прорисовка” */
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 600ms ease, opacity 300ms ease;
}

.steps__seg.is-on{
  transform: scaleX(1);
  opacity: 1;
}

/* карточки поверх */
.step-card{ z-index: 1; }

/* поочерёдное появление карточек */
.step-card{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.step-card.is-on{
  opacity: 1;
  transform: translateY(0);
}






/* =========================
   Steps layout fixes
   ========================= */

.steps{
  position: relative;
  /* место под линию, чтобы она НЕ была за карточками */
  padding-top: 18px;
}

/* соединители — поверх карточек, но под иконками не критично */
.steps__connectors{
  position: absolute;
  left: 0;
  right: 0;

  /* центр иконки 44px: (22px) + небольшой сдвиг вниз */
  top: 44px;

  height: 2px;
  z-index: 3;            /* <-- было 0/1, поднимаем */
  pointer-events: none;
}

/* карточки ниже соединителей по слоям */
.step-card{
  position: relative;
  z-index: 2;            /* <-- ниже connectors? нет: connectors=3, card=2 */
  /* (если хочешь, чтобы линия всегда сверху — поменяй местами) */
}

/* чтобы линия не попадала под текст — добавим отступ сверху в карточках */
.step-card{
  padding-top: 22px;     /* было 22 — оставь, но важно что есть воздух */
}

/* сегмент пунктирной линии */
.steps__seg{
  position: absolute;
  height: 2px;

  background-image: repeating-linear-gradient(
    90deg,
    rgba(202,148,44,.55) 0 10px,
    rgba(202,148,44,0) 10px 18px
  );

  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 600ms ease, opacity 300ms ease;
}

.steps__seg.is-on{
  transform: scaleX(1);
  opacity: 1;
}

/* мобилка — скрываем соединители */
@media (max-width: 1024px){
  .steps__connectors{ display:none; }
  .steps{ padding-top: 0; }
}

:root{
  --step-icon-size: 44px;   /* фактический размер иконки */
  --step-line-gap: 12px;    /* нужный визуальный отступ */
}

.steps{
  position: relative;
  width: 100%;
}

/* connectors внутри steps */
.steps__connectors{
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 2px;
  pointer-events: none;
}


/* =========================
   Mobile split text readability fix
   ========================= */

@media (max-width: 900px){
  .about-split{
    min-height: auto;
    height: auto;
    padding: 0;
  }

  .about-split__bg{
    background-position: center;
  }

  .about-split__overlay{
    background:
      linear-gradient(
        180deg,
        rgba(246, 243, 234, 0.96) 0%,
        rgba(246, 243, 234, 0.92) 58%,
        rgba(246, 243, 234, 0.72) 100%
      );
  }

  .about-split__inner{
    min-height: 620px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 96px 20px 72px;
  }

  .about-split__left{
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  .about-title{
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.08;
  }

  .about-text{
    font-size: 16px;
    line-height: 1.55;
    color: rgba(51, 39, 26, 0.88);
  }

  .about-quote{
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    background: rgba(255, 255, 255, 0.88);
  }
}

@media (max-width: 480px){
  .about-split__inner{
    min-height: 560px;
    padding: 88px 16px 64px;
  }

  .about-title{
    font-size: 30px;
  }

  .about-text,
  .about-quote{
    font-size: 15px;
  }
}

/* =========================
   Mobile top hero banner fix
   ========================= */

@media (max-width: 900px){
  .about-section.about-top,
  .about-top.about-section{
    min-height: 620px;
    height: auto;
    padding: 0;
  }

  .about-top .about-section__bg{
    background-position: center;
  }

  .about-top .about-section__inner{
    min-height: 620px;
    height: auto;
    justify-content: center;
    padding: 120px 20px 72px;
  }

  .about-overlay--top{
    background:
      linear-gradient(
        180deg,
        rgba(51, 39, 26, 0.58) 0%,
        rgba(51, 39, 26, 0.72) 48%,
        rgba(51, 39, 26, 0.9) 100%
      );
  }

  .about-top__content{
    width: 100%;
    max-width: 560px;
    text-align: left;
    margin: 0 auto;
  }

  .about-top__title{
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.08;
    color: #fff;
    margin-bottom: 16px;
  }

  .about-top__text{
    font-size: 16px;
    line-height: 1.55;
    color: rgba(246, 243, 234, 0.92);
  }
}

@media (max-width: 480px){
  .about-section.about-top,
  .about-top.about-section{
    min-height: 560px;
  }

  .about-top .about-section__inner{
    min-height: 560px;
    padding: 112px 16px 64px;
  }

  .about-top__title{
    font-size: 30px;
  }

  .about-top__text{
    font-size: 15px;
  }
}