/* ── Quote ── */
.quote {
  --quote-box-py: 10.9375em; /* 175px */
  --quote-box-px: 9.9375em;  /* 159px */
  --quote-gap:    1.25em;    /* 20px  */
  background: var(--grey-5);
}
.quote__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--quote-box-py) var(--quote-box-px);
  background: var(--blue);
}
.quote__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--quote-gap);
  text-align: center;
}
.quote__text {
  font-family: var(--font-display);
  font-size:   var(--text-caption-l); /* 60px */
  line-height: var(--lh-caption-l);
  color: var(--white);
}
.quote__author {
  font-family: var(--font-body);
  font-size:   var(--text-caption-m); /* 26px */
  line-height: var(--lh-caption-m);
  color: var(--white);
}

/* ── Quote — Tablet ── */
@media (max-width: 1024px) {
  .quote {
    --quote-box-py: 6.25em; /* 100px */
    --quote-box-px: 4em;    /* 64px  */
  }
}

/* ── Quote — Mobile ── */
@media (max-width: 767.98px) {
  .quote {
    --quote-box-py: 3.75em; /* 60px */
    --quote-box-px: 1.25em; /* 20px */
  }
}


/* ── Section Split (shared: label + body) ── */
.section-split {
  display: flex;
  gap: 8.3125em; /* 133px */
  align-items: flex-start;
}
.section-split__label {
  flex: 0 0 12.125em; /* 194px */
  font-family: var(--font-body);
  font-size:   var(--text-caption-s); /* 16px */
  line-height: 1.1875;                /* 19px */
  font-weight: 500;
  color: var(--red);
}
.section-split__body {
  flex: 1;
  min-width: 0;
}

.mission{
  background: #fff;
}

/* ── Mission ── */
.mission__text {
  font-family: var(--font-display);
  font-size:   var(--text-caption-l); /* 60px */
  line-height: var(--lh-caption-l);
  color: var(--blue);
}

.line{
  background: #fff;
}

.line-box{
  width: 100%;
  height: 1px;
  background: #94A4B5;
}


/* ── Values ── */
.values {
  color: var(--black);
  background: #fff;

}
.values__content {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px */
}
.values__intro {
  display: flex;
  flex-direction: column;
  gap: 0.75em; /* 12px */
}
.values__intro-text {
  max-width: 46.125em; /* 738px */
}
.values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-grid-gap); /* 24px */
}

/* ── Value Card ── */
.value-card {
  --value-card-gap: 3.75em; /* 60px */
  display: flex;
  flex-direction: column;
  gap: var(--value-card-gap);
  padding: var(--space-card-small); /* 30px */
  background: var(--grey-5);
}
.value-card--wide {
  grid-column: 1 / -1;
}
.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
}
.value-card__glyph {
  fill: var(--grey-5);
}
.value-card__body {
  display: flex;
  flex-direction: column;
  gap: 1em; /* 16px */
}
.value-card__title {
  font-family: var(--font-display);
  font-size:   var(--text-h3); /* 30px */
  line-height: var(--lh-h3);
  color: var(--black);
}
.value-card__text {
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 8px */
}
.value-card__subtitle {
  font-weight: 600;
  color: var(--red);
}
.value-card__desc {
  color: var(--black);
}
.value-card--wide .value-card__desc {
  max-width: 42.25em; /* 676px */
}

/* ── Values — Tablet ── */
@media (max-width: 1024px) {
  .section-split { gap: 3.75em; } /* 60px */
  .values__grid { grid-template-columns: 1fr; }
}

/* ── Values — Mobile ── */
@media (max-width: 767.98px) {
  .value-card__title{
    font-size: 1.5em;
  }
  .section-split {
    flex-direction: column;
    gap: 1.5em; /* 24px */
  }
  .section-split__label { flex: none; }
  
}

/* ── Hero ── */
.hero__page {
  background: var(--grey-5);
  padding-left:  var(--space-wrapper-bg); /* 12px → сіра рамка навколо кадру */
  padding-right: var(--space-wrapper-bg);
  position: relative;
}
.hero__frame {
  position: relative;
  max-width: 100%;      /* 1416px */
  height:    50.0625em;   /* 801px  */
  margin: 0 auto;
  overflow: hidden;
}


.hero--blog .hero__frame {
  height: 41.3em;
}

/* media + затемнення */
.hero__media { position: absolute; inset: 0; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* вертикальна червона риска (Vector 10) */
.hero__accent {
  position: absolute;
  top: 0;
  left: 0;     /* 6px  */
  width: 0.75em;     /* 12px */
  height: 11.9375em; /* 191px */
  background: var(--red);
}

/* контент, прибитий до низу */
.hero__content {
  position: absolute;
  left: 0;
  bottom: 0;
  padding-left:   4.125em; /* 66px  (+12px рамки = лінія --space-wrapper) */
  padding-bottom: var(--space-container); /* 140px */
}

/* заголовок: базовий em = розмір H1, щоб плашка масштабувалась разом зі шрифтом */
.hero__heading {
  position: relative;
  font-size: var(--text-h1);
}
.hero__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1em;              /* = --text-h1 */
  line-height: var(--lh-h1);
  color: var(--white);
  text-shadow: 0 0 0.159em rgba(0, 0, 0, 0.55); /* 15.9px @100px */
}

/* червона плашка-хайлайт (Rectangle 1) — усе в em від H1 */
.hero__mark {
  position: absolute;
  z-index: 0;
  left:  -0.12em; /* 12px  ліворуч від тексту */
  top:    0.68em; /* 68px  */
  width:  6.04em; /* 604px */
  height: 0.32em; /* 32px  */
  background: var(--red);
}

@media (min-width: 1940px) {
  .hero__frame{
    height: 68.0625em;
  }
}

@media (max-width: 1024px) {
  .hero__frame {
    height: 32em;
  }
  .hero__content{
    padding-left:   2em;
    padding-bottom: 2em; /* 60px */
  }
}

/* ── Hero — Mobile ── */
@media (max-width: 767.98px) {
 .hero__frame {
  height: 32em;
}
.hero__page{
  padding: 0;
}
.hero__content {
  padding-left:   var(--space-wrapper);
  padding-bottom: 3.75em; /* 60px */
}

.hero__title{
  font-size: 48px;
}

.hero__mark {
  top: 0.64em;
  width: 5.54em;
  height: 0.22em;
}

}


/* ── Team ── */
.team{
  background: #fff;
}

.team__inner {
  display: flex;
  flex-direction: column;
  gap: 8.75em; /* 140px */
}

/* intro: two body columns */
.team-intro__cols {
  display: flex;
  gap: 4.375em; /* 70px */
  align-items: flex-start;
}
.team-intro__legal { flex: 0 1 14.9375em; } /* 239px */
.team-intro__lead  { flex: 0 1 40.5em; }    /* 648px */

/* divider */
.team__divider {
  display: block;
  height: 1px;
  background: var(--grey-30);
}

/* slider group */
.team__slider {
  display: flex;
  flex-direction: column;
  gap: 3.25em; /* 60px */
}
.team-swiper { width: 100%; }

/* team item */
.team .team-item {
  display: flex;
  flex-direction: column;
  gap: 1.5em; /* 24px */
  height: auto;
}
.team-item__media {
  position: relative;
  aspect-ratio: 412 / 475;
  overflow: hidden;
}
.team-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 8px */
}
.team-item__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size:   20px; /* 20px */
  line-height: 110%;
  color: var(--black);
}
.team-item__role { color: var(--black); }

/* controls */
.team-slider__controls {
  display: flex;
  flex-direction: column;
  gap: 2.5em; /* 40px */
}

/* progress bar */
.team .team-slider__progress .team__pagination {
  position: relative;
  height: 12px; /* 2px track (12px у макеті — під ретину лишаю тонким; став 0.75em якщо треба товстий) */
  background: var(--grey-5);
}

.team .team-slider__progress .swiper-pagination-progressbar-fill{
  background: #98001B;
}
.team-slider__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38.94%; /* 500/1284 — стартове; JS перезапише */
  background: var(--red);
}

/* nav */
.team-slider__nav {
  display: flex;
  gap: var(--space-grid-gap); /* 24px */
}
.team-slider__arrow {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.75em; /* 60px */
  border: 1px solid #002E5E;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.team-slider__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.team-slider__arrow:hover:not(:disabled){
  background: #002E5E;
  color: #fff;
}

/* ── Team — Tablet ── */
@media (max-width: 1024px) {
  .team__inner { gap: 5em; } /* 80px */
  .team-intro__cols {
    flex-direction: column;
    gap: 1.5em;
  }
  .team-item__media {
    aspect-ratio: 412 / 450;
  }
  .team-intro__legal,
  .team-intro__lead { flex: none; }
  .team__slider {
    gap: 1.25em;
  }
}

/* ── Team — Mobile ── */
@media (max-width: 767.98px) {
  .team__inner { gap: 3.75em; } /* 60px */

}

/* ── Contact ── */
.contact {
  background: var(--grey-5);
}
.contact__split {
  gap: 9em; /* 208px */
}
.contact__body {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px */
  width: 100%;
}

/* form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-grid-gap); /* 24px */
}
.contact-form__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-grid-gap); /* 24px */
}
.contact-form__row {
  display: flex;
  gap: var(--space-grid-gap); /* 24px */
}
.contact-form__row > .field { flex: 1; min-width: 0; }

/* field */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.75em; /* 12px */
}
.field__label { color: var(--black); }
.field__input {
  padding: 1.5em 1.25em; /* 24px 20px */
  background: var(--white);
  border: none;
  color: var(--black);
  width: 100%;
}
.field__input{
  height: 69px;
  font-size: 16px;
}
.field__input::placeholder { color: var(--grey-30); }
.field__input:focus {
  outline: 1px solid var(--blue);
  outline-offset: -1px;
}

/* ── Button — Blue ── */
.btn--blue {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  margin-top: 35px;
}

.btn--blue:hover{
  background: 0 0;
  color: var(--blue);;
}

/* ── Contact — Tablet ── */
@media (max-width: 1024px) {
  .contact__split { gap: 3.75em; } /* 60px */
}

/* ── Contact — Mobile ── */
@media (max-width: 767.98px) {
  .contact-form__row { flex-direction: column; }
  .btn--blue{
    margin-top: 10px;
  }
  .contact__split {
    gap: 1.75em;
  }
  .contact__body {
    gap: 2em;
  }
}

/* ── Hero — Project variant ── */
.hero--project .hero__media::after {
  background: rgba(0, 0, 0, 0.7); /* темніший, ніж page hero */
}

.hero--project .hero__media.hide-overlay::after {
  background: rgba(0, 0, 0, 0); 
}

/* центрований контент */
.hero-project__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.375em; /* 38px */
  width: 38em;   /* 608px */
  max-width: calc(100% - 2 * var(--space-wrapper));
  text-align: center;
}

/* заголовок з плашкою (базовий em = H1, щоб плашка масштабувалась зі шрифтом) */
.hero-project__heading {
  position: relative;
  font-size: var(--text-h1);
  align-self: stretch;
}
.hero-project__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1em; /* = --text-h1 */
  line-height: var(--lh-h1);
  color: var(--white);
  text-align: center;
}

.hero-project__title span.text{
  padding: 0 12px;
  position: relative;
}

/* червона плашка за текстом (Rectangle 1) — все в em від H1 */
.hero-project__mark {
  position: absolute;
  z-index: 0;
  left: 50%;  
  transform: translateX(-50%);  
  bottom: 10px;
  width:  100%; 
  height: 0.32em;
  background: var(--red);
  z-index: -1;
}

.hero-project__text {
  color: var(--white);
}

@media (max-width: 1023.98px) {
  .hero-project__mark{
    bottom: 6px;
  }
  
}

/* ── Hero Project — Mobile ── */
@media (max-width: 767.98px) {
  .hero-project__content {
   max-width: 100%;
   width: 100%;
   padding: 0 20px;
   gap: 2em;
 }
}

/* ── Gallery ── */
.gallery {
  background: var(--grey-5);
}
.gallery__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75em; /* 60px */
}
.gallery__title {
  text-align: center;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-grid-gap); /* 24px */
  width: 100%;
}
.gallery__item {
  position: relative;
  aspect-ratio: 412 / 400;
  overflow: hidden;
}

.gallery__item img{
  transition: transform .3s ease-in-out;
}

.gallery__item:hover img{
  transform: scale(1.08);
}

/* ── Gallery — Mobile ── */
@media (max-width: 767.98px) {
  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__title {
    max-width: 80%;
    margin: 0 auto;
  }
}

/* ── Banner ── */

.banner{
  background: #fff;
}

.banner__frame {
  position: relative;
  aspect-ratio: 1284 / 416;
  overflow: hidden;
}

.banner__bg{
  position: absolute;
  inset: 0;
}

.banner__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* градієнт знизу (прозорий → 0.5) */
.banner__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 44.35%, rgba(0,0,0,0.5) 100%);
}

/* контент у лівому нижньому куті */
.banner__content {
  position: absolute;
  z-index: 1;
  left:   3.75rem; /* 60px */
  bottom: 3.75rem; /* 60px (416 - 290 - 66 ≈ 60) */
  font-size: var(--text-caption-l); /* базовий em = Caption L, щоб плашка масштабувалась */
}
.banner__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1em; /* = --text-caption-l (60px) */
  line-height: var(--lh-caption-l);
  color: var(--white);
  text-shadow: 0 0 0.265em rgba(0,0,0,0.55); /* 15.9px @60px */
}

/* червона плашка за текстом (Rectangle 1) — все в em від Caption L */
.banner__mark {
  position: absolute;
  z-index: 0;
  left:  -0.2em;  /* 48px vs текст 60px → -12px */
  bottom: 0;      /* сідає на базову лінію тексту */
  width:   calc(100% + .4em); /* 693px */
  height: 0.333em; /* 20px  */
  background: var(--red);
}

.banner__title br{
  display: none;
}

@media (max-width: 1023.98px) {
  .banner__content{
    left: 2rem;
    bottom: 2rem;
  }
}

/* ── Banner — Mobile ── */
@media (max-width: 767.98px) {
 .banner__content {
  left: 0.5em;
  bottom: 1em;
}
.banner__mark { display: none; }

.banner__title br{
  display: block;
}

.banner__title span{
  position: relative;
}

.banner__title span:before{
  content: "";
  position: absolute;
  z-index: 0;
  left:  -0.2em;  /* 48px vs текст 60px → -12px */
  bottom: 4px;      /* сідає на базову лінію тексту */
  width:   calc(100% + .4em); /* 693px */
  height: 0.333em; /* 20px  */
  background: var(--red);
  z-index: -1;
}

.banner__frame {
  aspect-ratio: auto;
  height: 220px;
}
}

/* ── Power (culture triangle) ── */
.power {
  background: var(--grey-5);
}
.power__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* text column */
.power__text {
  display: flex;
  flex-direction: column;
  gap: 0.75em; /* 12px */
  width: 30rem;
  flex-shrink: 0;
}

.power__label{
  color: #98001b;
}

.power__body {
  display: flex;
  flex-direction: column;
  gap: 1.25em; /* 20px */
}



.power__desc { color: var(--black); }

.power__desc  p{
  max-width: 96%;
}

.power__desc p:not(:last-child){
  margin-bottom: 1.25em;
}

/* visual column (SVG slot) */
.power__visual {
  width:  46.75em; /* 748px */
  max-width: 100%;
  margin-right: -1em;
}

.power__visual img{
  width: 100%;
  height: auto;
}

.power__visual > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Power — Tablet ── */
@media (max-width: 1024px) {
  .power__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 3.75em; /* 60px */
  }
  .power__text,
  .power__visual { flex: none; width: 100%; margin-right: 0; }
  .power__visual {
    max-width: 32em;
    margin: 0 auto;
  }
  .power__desc  p{
    max-width: 100%;
  }
}

/* ── Power — Mobile ── */
@media (max-width: 767.98px) {
  .power__inner { gap: 2.5em; } /* 40px */
}

@media (max-width: 500px) {
  .power__label {
    max-width: 220px;
  }
}

/* ── People (collage) ── */
.people {
  background: var(--white);
}
.people__stage {
  position: relative;
  aspect-ratio: 1284 / 958;
}

/* text — position anchored to corner, size in em (стабільний шрифт) */
.people__text {
  position: absolute;
  left: 0;
  top: 0;
  width: 28.75em; /* 460px */
  max-width: 40%;
  display: flex;
  flex-direction: column;
  gap: 0.75em; /* 12px */
}
.people__body {
  display: flex;
  flex-direction: column;
  gap: 1.25em; /* 20px */
}

.people__label{
  color: #98001b;
}

.people__desc { color: var(--black); }

/* collage items — % від контейнера 1284×958 */
.people__item {
  position: absolute;
  overflow: hidden;
  margin: 0;
}

.people__item img{
  transition: transform .3s ease-in-out;
}

.people__item:hover img{
  transform: scale(1.08);
}

/* R16 — 412×491 @ 623,140 */
.people__item--16 { left: 42.45%; top: 0;      width: 32.09%; height: 51.25%; }
/* R13 — 303×506 @ 78,391  */
.people__item--13 { left: 0;      top: 26.20%; width: 23.60%; height: 52.82%; }
/* R14 — 194×240 @ 405,391 */
.people__item--14 { left: 25.47%; top: 26.20%; width: 15.11%; height: 25.05%; }
/* R18 — 303×240 @ 1059,391 */
.people__item--18 { left: 76.40%; top: 26.20%; width: 23.60%; height: 25.05%; }
/* R15 — 412×443 @ 405,655 */
.people__item--15 { left: 25.47%; top: 53.76%; width: 32.09%; height: 46.24%; }
/* R17 — 521×242 @ 841,655 */
.people__item--17 { left: 59.42%; top: 53.76%; width: 40.58%; height: 25.26%; }

/* ── People — Tablet (2 columns, masonry) ── */


@media (max-width: 1300px) {
  .people__stage{
    margin-top: 30px;
  }
  .people__text{
    margin-top: -30px;
  }

}

@media (max-width: 1124px) {
  .people__stage{
    margin-top: 130px;
  }
  .people__text{
    margin-top: -130px;
  }

}

.people-slider__nav {
  display: none;
  gap: var(--space-grid-gap); /* 24px */
}
.people-slider__arrow {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.75em; /* 60px */
  border: 1px solid #002E5E;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.people-slider__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.people-slider__arrow:hover:not(:disabled){
  background: #002E5E;
  color: #fff;
}

/* слайдер прихований на десктопі */
.people .people__slider { display: none; }

@media (max-width: 1023.98px) {
  .people-slider__nav{
    display: flex;
  }
  /* ховаємо колаж, показуємо слайдер */
  .people__collage { display: none; }
  .people .people__slider  { display: block; overflow: hidden; }

  .people__stage { aspect-ratio: auto; }

  .people__text {
    position: static;
    width: 100%;
    max-width: none;
    margin-bottom: 3.75em; /* 60px */
  }

  .people__slide {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;   /* єдина висота; прибери для рідних пропорцій + autoHeight */
  }
  .people__slide .image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .people__slider-pagination {
    display: flex;
    justify-content: center;
    margin-top: 1.25em; /* 20px */
  }
  .people__desc {
    max-width: 99%;
  }
}

/* ── Contact Form 7 — validation ── */

/* підказка під конкретним полем */
/* ── CF7 validation (contact + request-bid) ── */

/* підказка під полем */
.contact .wpcf7-not-valid-tip,
.request-bid .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.5em; /* 8px */
  font-family: var(--font-body);
  font-size: 0.75em; /* 12px */
  line-height: var(--lh-body-s);
  color: var(--red);
}

/* невалідне поле — червона рамка поверх білого фону */
.contact .wpcf7-form .wpcf7-not-valid,
.request-bid .wpcf7-form .wpcf7-not-valid {
  outline: 1px solid var(--red);
  outline-offset: -1px;
}

/* загальний рядок-відповідь під формою */
.contact .wpcf7-form .wpcf7-response-output,
.request-bid .wpcf7-form .wpcf7-response-output {
  margin: 1.5em 0 0; /* 24px зверху */
  padding: 1em 0;    /* скидаємо дефолтний padding/бордер CF7 */
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size:   var(--text-body-s);
  line-height: var(--lh-body-s);
}

/* стан: помилка валідації — без рамки, тільки колір тексту */
.contact .wpcf7-form.invalid .wpcf7-response-output,
.contact .wpcf7-form.unaccepted .wpcf7-response-output,
.contact .wpcf7-form.payment-required .wpcf7-response-output,
.request-bid .wpcf7-form.invalid .wpcf7-response-output,
.request-bid .wpcf7-form.unaccepted .wpcf7-response-output,
.request-bid .wpcf7-form.payment-required .wpcf7-response-output {
  border: 0;
  color: var(--red);
}

/* стан: помилка відправки (спам / мережа) */
.contact .wpcf7-form.failed .wpcf7-response-output,
.contact .wpcf7-form.spam .wpcf7-response-output,
.request-bid .wpcf7-form.failed .wpcf7-response-output,
.request-bid .wpcf7-form.spam .wpcf7-response-output {
  border: 0;
  color: var(--red);
}

/* стан: успішна відправка */
.contact .wpcf7-form.sent .wpcf7-response-output,
.request-bid .wpcf7-form.sent .wpcf7-response-output {
  border: 0;
  color: var(--green);
}

/* стан: помилка відправки (спам / мережа) */
.contact .wpcf7-form.failed .wpcf7-response-output,
.contact .wpcf7-form.spam .wpcf7-response-output,
.request-bid .wpcf7-form.failed .wpcf7-response-output,
.request-bid .wpcf7-form.spam .wpcf7-response-output {
  border: 0;
}

.wpcf7-spinner{
  display: none;
}


/* ── Map ── */
.map {
  position: relative;
  background: #fff;
}
.map__media {
  position: relative;
  aspect-ratio: 1073 / 886; /* пропорція зображення з макета */
  padding-left: var(--space-wrapper-bg);
  padding-right: var(--space-wrapper-bg);
}

/* оверлей на всю секцію, контент по .wrapper-сітці */
.map__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* клік проходить до карти, крім картки */
}

/* картка в правому верхньому куті */
.map__card {
  position: absolute;
  top: 8.75em;   /* 40px */
  right: var(--space-wrapper); /* по вертикалі сітки */
  width: 18.75em; /* 300px */
  display: flex;
  flex-direction: column;
  gap: 1.25em; /* 20px */
  padding: 1.5em; /* 24px */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--grey-60);
  pointer-events: auto;
}

/* stat */
.map__stat {
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 8px */
}
.map__stat-label {
  font-family: var(--font-body);
  font-size:   var(--text-caption-s); /* 16px */
  line-height: var(--lh-caption-s);
  color: var(--grey-30);
}
.map__stat-value {
  font-family: var(--font-display);
  font-size:   var(--text-h3); /* 30px */
  line-height: var(--lh-h3);
  color: var(--white);
}

/* legend — з розділювачем зверху */
.map__legend {
  display: flex;
  align-items: center;
  gap: 0.75em; /* 12px */
  padding-top: 1.25em; /* 20px */
  border-top: 1px solid var(--grey-60);
}
.map__legend-dot {
  width: 0.625em;  /* 10px */
  height: 0.625em; /* 10px */
  border-radius: 50%;
  background: #4A6FE3; /* синя крапка легенди — див. нижче */
  flex-shrink: 0;
}
.map__legend-label { color: var(--white); }

@media (min-width: 1950px) {
  .map__media {
    aspect-ratio: 1073 / 730;
  }
}

@media (max-width: 1023.98px) {
  .map__card {
    top: 1.75em;
    right: 2em;
  }
}

/* ── Map — Mobile ── */
@media (max-width: 767.98px) {
  .map__media {         aspect-ratio: 3 / 4.5; padding: 0; } /* карта витягується вертикально під портрет */
  .map__card {
    top: 1.25em;
    right: var(--space-wrapper);
    left: var(--space-wrapper);
    width: auto;
    gap: 0.5em;
    padding: 0.85em;
  }
}


/* ── Case ── */

.case{
  background: #f5f6f7;
}

.case__body {
  display: flex;
  flex-direction: column;
  gap: 2.5em; /* 40px */
}

/* head */
.case__head {
  display: flex;
  flex-direction: column;
  gap: 0.75em; /* 12px */
  border-bottom: 1px solid #94A4B5;
  padding-bottom: 40px;
}
.case__subtitle { color: #000; }

/* stats */
.case__stats {
 display: flex;
 justify-content: space-between;
 gap: var(--space-grid-gap); /* 24px */
}
.case-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 8px */
}
.case-stat__value {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 120%;
  color: #98001b;
}
.case-stat__label { color: var(--black); }

/* accordion */
/* accordion */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-grid-gap); /* 24px */
}
.accordion__item {
  background: var(--blue);
  color: var(--white);
}

/* кнопка */
.acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: 30px; /* 24px */
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--white);
  text-align: left;
}
.accordion__title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 110%;
  color: #fff;
}
.accordion__icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
  width: 30px;
  height: 30px;
}
.acc-btn.active .accordion__icon {
  transform: rotate(180deg);
}

/* контент — jQuery керує показом; тут лише відступи */
.acc-content {
  display: none; /* стартово сховано; jQuery покаже активний */
}
.acc-content > .accordion__text {
  margin: 0 30px 30px; /* 0 24 24 — вирівняно з паддінгом кнопки */
}

/* gallery */
.case__gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-grid-gap); /* 24px */
}

/* верхній ряд: асиметрія 412 : 521, обидва h=400 */
.case__gallery-row {
  display: grid;
  grid-template-columns: 412fr 521fr;
  gap: var(--space-grid-gap);
}
.case__shot {
  position: relative;
  overflow: hidden;
}

.case__shot img{
  transition: transform .3s ease-in-out;
}

.case__shot:hover img{
  transform: scale(1.08);
}

/* висота 400px для верхніх — через aspect-ratio кожного фото */
.case__gallery-row .case__shot:nth-child(1) { aspect-ratio: 412 / 400; }
.case__gallery-row .case__shot:nth-child(2) { aspect-ratio: 521 / 400; }

/* нижнє широке фото */
.case__shot--wide {
  aspect-ratio: 957 / 400; /* повна ширина ряду : 400px */
}

/* cta — outline button на всю ширину */
.btn--outline {
  background: transparent;
  border-color: #002e5e;
  color: var(--blue);
}

.btn--outline:hover{
  box-shadow: inset 0 0 0 1px #002e5e;
}

.case__cta {
  width: 100%;
}

/* ── Case — Tablet ── */
@media (max-width: 1024px) {
  .case__stats { flex-wrap:wrap; }
  .case-stat{
    width: 40%;
  }
}

/* ── Case — Mobile ── */
@media (max-width: 767.98px) {
 .case__gallery-row {
  grid-template-columns: 1fr;
}
.case__gallery-row .case__shot:nth-child(1),
.case__gallery-row .case__shot:nth-child(2),
.case__shot--wide {
  aspect-ratio: 3 / 2;
}
.acc-btn{
  padding: 24px;
}
.accordion__title {
  font-size: 18px;
}
.acc-content > .accordion__text{
  margin: 0 24px 24px;
}
}





/* ── Projects ── */

.projects{
  background: #fff;
}

.projects__body {
  display: flex;
  flex-direction: column;
  gap: 24px; /* 40px */
}

/* head */
.projects__head {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 36px;
}
.projects__badge {
  font-family: var(--font-body);
  font-size: 0.75em; /* 12px */
  line-height: 1;
  font-weight: 600;
  color: var(--white);
  background: var(--red);
  padding: 0.5em 0.75em; /* 6px 9px */
  margin-bottom: 10px;
}

/* panel */
.projects__panel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 30px; /* 40px */
  background: var(--grey-5);
}

/* ── Tabs ── */
.tabs {
  display: flex;
}
.tab-btn {
  flex: 1;
  padding: 12px 10px;
  background: var(--grey-10);
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size:   var(--text-h3); /* уточни за Figma */
  line-height: var(--lh-h3);
  color: var(--grey-30);
}
.tab-btn.active {
  background: var(--blue);
  color: var(--white);
}

/* ── Tab content ── */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Project list ── */
.project-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}
.project-row {
  padding: 20px;
  background: #fff;
}
.project-row:last-child { border-bottom: none; }

.project-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
}
.project-row__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-row__title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 110%;
  color: #000;
}
.project-row__client { 
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #002e5e;
}
.project-row__value {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 120%;
  text-align: right;
  color: #000;
}

/* progress */
.project-row__progress {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px; /* 8px */
  margin-top: 30px;
}
.progress-bar {
  position: relative;
  height: 12px; /* 2px */
  background: var(--grey-10);
  width: 100%;
  padding: 4px;
}
.progress-bar__fill {
  height: 4px;
  top: 4px;
  left: 4px;
  width: var(--progress, 0%);
  background: var(--red);
  display: block;
}
.project-row__percent {
  align-self: flex-end;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  text-align: right;
  color: #002e5e;
  width: 36px;
  flex-shrink: 0;
  text-align: right;
}

/* ── Completed variant ── */
.project-row--completed {
  display: flex;
  align-items: center;
  gap: 1.5em; /* 24px */
  padding: 0 20px;
  height: 94px;
}
.project-row--completed .project-row__info { flex: 1; }
.project-row--completed .project-row__value { white-space: nowrap; }
.project-row__tag {
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-size: 0.625em; /* 10px */
  font-weight: 600;
  letter-spacing: 0.05em;
  color:  #000;
  background: var(--green);
  padding: 0.75em 0.375em; /* вертикальний бейдж */
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -39px;
}

/* cta */
.projects__cta {
  width: 100%;
  color: var(--blue);
}

@media (max-width: 1024px) {
  .projects__body{
    width: 100%;
  }
  .projects .section-split__label{
    flex: auto;
  }
}

/* ── Projects — Mobile ── */
@media (max-width: 840px) {
  .projects .section-split {
    flex-direction: column;
    gap: 1.5em;
  }
  .projects__panel { padding: var(--space-card-small); } /* 30px */
  .tabs { flex-direction: column; }
  .project-row__head { flex-direction: column; gap: 0.5em;         align-items: flex-start; }
}

@media (max-width: 600px) {
  .project-row--completed {
    min-height: 150px;
    padding-left: 15px;
    gap: 1em;
  }
  .project-row__title {
    font-size: 18px;
  }
  .project-row__value {
    font-size: 25px;
  }

  .projects__panel {
    padding: 15px;
  }
  .btn{
   white-space: normal;
   text-align: center;
 }
 .projects__head{
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}
}


/* ── Portfolio ── */
.portfolio {
  background: #f5f6f7;
  position: relative; /* темно-синій фон секції */
  padding-top: 210px;
}

.portfolio__bg{
  background: #002e5e;
  position: absolute;
  top: 0;
  left: 12px;
  width: calc(100% - 24px);
  height: 100%;
}

.portfolio__wrapper {
  position: relative;
  z-index: 9;
}

/* червона риска зверху-зліва (як у hero) */
.portfolio__accent {
  position: absolute;
  top: 0; /* до верху секції, повз padding container */
  left: 0;
  width: 0.75em;      /* 12px */
  height: 11.9375em;  /* 191px */
  background: var(--red);
}

.portfolio__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.75em; /* 60px */
}

/* head */
.portfolio__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25em; /* 20px */
  text-align: center;
}
.portfolio__label {
  font-family: var(--font-body);
  font-size:   var(--text-caption-s); /* 16px */
  line-height: var(--lh-caption-s);
  font-weight: 500;
  color: var(--white);
}
.portfolio__title {
  color: var(--white);
  text-align: center;
}

/* grid — 3 рівні колонки */
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-grid-gap); /* 24px */
  width: 100%;
}

.portfolio .big-card-info{
  text-decoration: none;
}

.portfolio .big-card-info:before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #94a4b5;
  transition: .3s ease-out;
  z-index: 9;
  opacity: 0;
}



.portfolio .big-card-info:hover:before{
  opacity: 1;
}

/* cta — світлий outline на темному тлі */
.btn--outline-light {
  background: var(--grey-5);
  border-color: var(--grey-5);
  color: var(--black);
}

.btn--outline-light:hover{
  background: 0 0;
  color: #fff;
}

.portfolio__cta {
  min-width: 12.5em; /* 200px — компактна, як у макеті */
}

/* ── Portfolio — Tablet ── */
@media (max-width: 1024px) {
  .portfolio__grid { grid-template-columns: 1fr; }

  .portfolio{
    padding-top: 180px;
  }

  .portfolio__bg{
    width: 100%;
    left: 0;
  }
}

@media (max-width: 800px) {
  .portfolio__cta{
    min-width: 100%;
  }
}


@media (max-width: 767.98px) {
  .portfolio{
    padding-top: 150px;
  }
}



/* ── Multifamily Projects ── */
.mfp{
  background: #fff;
}

.mfp + .mfp{
  padding-top: 0;
}

.mfp__inner {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px */
}

/* head */
.mfp__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em; /* 12px */
  text-align: center;
}
.mfp__eyebrow {
  font-family: var(--font-body);
  font-size:   var(--text-caption-s); /* 16px */
  line-height: var(--lh-caption-s);
  font-weight: 600;
  color: var(--red);
}

/* grid 2 cols */
.mfp__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-grid-gap); /* 24px */
  background: #f5f6f7;
  padding: 30px;
}

/* card */
.proj-card {
  display: flex;
  flex-direction: column;
  gap: 1.5em; /* 24px */
  padding: 20px;
  background: #fff;
  height: 100%;
}

/* rows */
.proj-card__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.proj-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 7px 0; /* 10px — рядки з розділювачем */
  border-bottom: 1px solid var(--grey-10);
}
.proj-card__row:last-child { border-bottom: none; }

.proj-card__key {
  display: inline-flex;
  align-items: center;
  gap: 0.5em; /* 8px */
  flex-shrink: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #002e5e;
}
.proj-card__icon {
  width: 14px;  /* 16px — дрібна іконка перед лейблом */
  height: 14px;
  fill: var(--blue);
  flex-shrink: 0;
}
.proj-card__val {
  color: var(--black);
  text-align: right;
}

.proj-card__val-bold{
  font-weight: 600;
}


/* progress */
.proj-card__progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75em; /* 12px */
}
.proj-card__progress-label { color: var(--black); margin-right:20px; }
.proj-card__percent {
 font-family: "Inter", sans-serif;
 font-weight: 400;
 font-size: 12px;
 line-height: 150%;
 text-align: right;
 color: #002e5e;
 width: 36px;
 flex-shrink: 0;
}


/* ── MFP — Tablet ── */
@media (max-width: 1024px) {
  .mfp__grid { grid-template-columns: 1fr; }
}

/* ── MFP — Mobile ── */
@media (max-width: 767.98px) {
  .proj-card { padding: var(--space-card-small); }
  .proj-card__progress {
    grid-template-columns: 1fr auto;
  }
  .proj-card__progress-label {
    grid-column: 1 / -1;
  }
  .mfp__grid{
    padding: 15px;
  }
  .proj-card{
    padding: 15px;
  }
}

/* ── Completed Multifamily (timeline) ── */
.mfp-completed {
  background: var(--grey-5);
}
.mfp-completed__inner {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px */
}



/* head — спліт-патерн, але тут лейбл над контентом (не збоку) */
/* head — проста колонка зліва, БЕЗ спліту */
.mfp-completed__head {
  display: flex;
  flex-direction: column;
  gap: 0.75em; /* 12px */
  padding-left: 20.5em;
}

.btn-row{
  padding-left: 20.5em;
}

.mfp-completed__label {
  font-family: var(--font-body);
  font-size:   var(--text-caption-s); /* 16px */
  line-height: var(--lh-caption-s);
  font-weight: 500;
  color: var(--red);
}

.mfp-completed__head .section-split__body {
  display: flex;
  flex-direction: column;
  gap: 0.75em; /* 12px між лейблом і H2 */
}

/* years wrapper */
.mfp-completed__years {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px між роками */
}

/* year group — рік ліворуч, картки праворуч */
.year-group__year {
  color: var(--red);
  font-family: var(--font-display);
  font-size:   var(--text-h3); /* Bebas ~30px, як у макеті */
  line-height: var(--lh-h3);
  flex: 0 0 6.5em;
}
.year-group__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-grid-gap); /* 24px */
  align-items: start;
}

/* картка тут на білому, без прогресу */
.year-group .proj-card {
  background: var(--white);
}

/* cta */
.mfp-completed__cta {
  width: 100%;
}

.year-group__grid > .proj-card:only-child {
  grid-column: 1 / -1;
}

/* непарна остання (коли всього непарна кількість) — на всю ширину */
.year-group__grid > .proj-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.mfp__grid > .proj-card:only-child {
  grid-column: 1 / -1;
}

/* непарна остання (коли всього непарна кількість) — на всю ширину */
.mfp__grid > .proj-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.btn-row .mfp-completed__cta{
  margin-top: 0;
}

/* ── Completed — Tablet ── */
@media (max-width: 1024px) {
  .year-group {
    flex-direction: column;
    gap: 1.5em;
  }
  .year-group__grid { grid-template-columns: repeat(2, 1fr);         width: 100%; }
  .mfp-completed__head, .btn-row{
    padding-left: 0;
  }
  .year-group__year {
    flex: auto;
  }
}

/* ── Completed — Mobile ── */
@media (max-width: 767.98px) {
  .year-group__grid { grid-template-columns: 1fr; }
  .mfp-completed__inner {
    gap: 2em;
  }
  .testimonials .swiper-nav {
    position: initial;
  }
  .testimonials .layout-col{
    gap: 1.5em;
  }
}



:root {
  --brand-red:  #98001B;
  --brand-blue: #1A2B6D;
}


html { scroll-behavior: smooth; }
body.is-nav-locked { overflow: hidden; }

.animate-on-scroll            { opacity: 0; will-change: transform, opacity; }
.animate-on-scroll.is-visible { opacity: 1; }
.animate-on-scroll.anim-done  { will-change: auto; }


.scroll-progress {
  position: fixed; top: 0; left: var(--scroll-progress-left, 0);
  width: 12px; height: 100dvh; z-index: 2000;          
  pointer-events: none;
}
.scroll-progress__fill {                             
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--brand-red);
  transform: scaleY(0); transform-origin: top center;
  will-change: transform;
}

@media (max-width: 1023.98px) {
  .scroll-progress{
    width: 4px;
  }
}

.btn {
  transition: transform .3s ease, background-color .3s ease, color .3s ease,
  border-color .3s ease, box-shadow .3s ease;
}
.btn.gsap-anim { transition: none !important; } 


.header       { position: fixed; z-index: 1000; transition: top .35s ease, height .35s ease, background-color .35s ease; }
.header__logo { transform-origin: left center; transition: transform .35s ease; }
.header.is-scrolled              { top: 0; background-color: var(--dark, #0D1117);     padding-top: 0.25em;
  padding-bottom: 0.25em; }
  .header.is-scrolled .header__logo { transform: scale(.75); }

  .header__nav-link { position: relative; }             
  .header__nav-link::after {
    content: ''; position: absolute; left: 50%; right: 50%; bottom: -4px; height: 2px;
    background: var(--brand-red); transition: left .3s ease, right .3s ease;
  }
  .header__nav-link:hover::after,
  .header__nav-link:focus-visible::after,
  .header__nav-link.is-current::after { left: 0; right: 0; }

  .header__burger-line { transition: transform .35s ease, opacity .2s ease; }

  @media (max-width: 768px) {
    .header__nav,
    .header__cta { transform: translateX(100%); transition: transform .35s ease; }  /* required (off-canvas pos in your CSS) */
    .header__cta { transition-delay: .05s; }
    .header.is-menu-open .header__nav,
    .header.is-menu-open .header__cta { transform: translateX(0); }
    .header::before {
      content: ''; position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .5);
      opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
    }
    .header.is-menu-open::before { opacity: 1; visibility: visible; }
  }

/* =================================================================
   HERO — home + about (brief §4)
   ================================================================= */
   .hero               { overflow: hidden; }               /* required — parallax overscan */
   .hero__page .hero__media { overflow: hidden; }          /* required — clips zoom-in */
   .word-reveal        { display: inline-block; will-change: transform, opacity; } /* required */
   .hero-factoid__line { transform-origin: left center; }  /* required (scaleX) */

   .hero-lead__cta .btn {
    position: relative; overflow: hidden;                 /* required for shimmer ::after */
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out;
  }

/* =================================================================
   STATISTICS .factoids — count-up is JS; cards reveal here (brief §5)
   ================================================================= */
   .factoids .card { transform: translateY(40px); transition: opacity .7s ease-out, transform .7s ease-out; transition-delay: calc(var(--stagger-index, 0) * 100ms); }
   .factoids .card.is-visible { transform: none; }

/* =================================================================
   MAP (brief §5)
   ================================================================= */
   .map__media { overflow: hidden; }                       /* required — clips zoom */
   .map__media .image-cover { transform: scale(1.1); transition: transform 3s ease-out; }
   .map.is-visible .map__media .image-cover { transform: scale(1); }
   .map__card { opacity: 0; transform: translateX(-40px); transition: opacity .8s ease-out .4s, transform .8s ease-out .4s; }
   .map.is-visible .map__card { opacity: 1; transform: none; }
   .map__legend-dot { position: relative; }                /* required */
   .map__legend-dot::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
    background: var(--brand-red); animation: map-pulse 2s ease-out infinite;
  }
  @keyframes map-pulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.5); opacity: 0; } }

/* =================================================================
   TESTIMONIALS — section reveal (brief §7)
   ================================================================= */
   .testimonials-box            { transform: translateY(30px); transition: opacity .6s ease-out, transform .6s ease-out; }
   .testimonials-box.is-visible { transform: none; }

/* =================================================================
   TEAM slider — intro/divider/slider reveal (Swiper handles slides)
   ================================================================= */
   .team__intro   { transform: translateY(30px); transition: opacity .7s ease-out, transform .7s ease-out; }
   .team__slider  { transform: translateY(30px); transition: opacity .7s ease-out .1s, transform .7s ease-out .1s; }
   .team__intro.is-visible,
   .team__slider.is-visible { transform: none; }
   .team__divider { transform: scaleX(0); transform-origin: left center; transition: opacity .6s ease-out, transform .6s ease-out; }
   .team__divider.is-visible { transform: none; }

/* =================================================================
   BIG CARDS — .big-card-info (services + portfolio, brief §5)
   ================================================================= */
   .big-card-info.animate-on-scroll { transform: translateY(40px); transition: opacity .7s ease-out, transform .7s ease-out; transition-delay: calc(var(--stagger-index, 0) * 100ms); }
   .big-card-info.animate-on-scroll.is-visible { transform: none; }
   @media (max-width: 768px) {
    .big-card-info.animate-on-scroll { transition-duration: .4s; transition-delay: calc(var(--stagger-index, 0) * 50ms); }
  }
  .big-card-info__mask      { opacity: .6; }              /* required base for hover */
  .big-card-info__desc-clip { overflow: hidden; }         /* required to clip __desc */
  @media (hover: hover) {
    .big-card-info.anim-done { transition: transform .3s ease-out, box-shadow .3s ease-out; transition-delay: 0s; }
    .big-card-info.anim-done:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
    .big-card-info__mask { transition: opacity .3s ease-out; }
    .big-card-info.anim-done:hover .big-card-info__mask { opacity: 1; }
    .big-card-info__icon { transition: transform .3s ease-out; }
    .big-card-info.anim-done:hover .big-card-info__icon { transform: scale(1.15); }
    .big-card-info__desc { transform: translateY(100%); opacity: 0; transition: transform .4s ease-out, opacity .4s ease-out; }
    .big-card-info.anim-done:hover .big-card-info__desc { transform: none; opacity: 1; }
  }

/* =================================================================
   VALUES — grid reveal
   ================================================================= */
   .values__intro { transform: translateY(30px); transition: opacity .7s ease-out, transform .7s ease-out; }
   .values__intro.is-visible { transform: none; }
   .values__grid .value-card { transform: translateY(40px); transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: calc(var(--stagger-index, 0) * 90ms); }
   .values__grid .value-card.is-visible { transform: none; }

/* =================================================================
   GROW WITH US + simple About sections reveal
   ================================================================= */
   .grow-with-us__image-wrap { transform: translateY(40px); transition: opacity .8s ease-out, transform .8s ease-out; }
   .grow-with-us__image-wrap.is-visible { transform: none; }
   .grow-with-us__tag, .grow-with-us__heading-group, .grow-with-us__btn,
   .quote__content,
   .mission .section-split__label, .mission .section-split__body,
   .contact .section-split__label, .contact__body {
    transform: translateY(24px);
    transition: opacity .3s ease-out, transform .3s ease-out, box-shadow .3s ease-out;
    transition-delay: calc(var(--stagger-index, 0) * 120ms);
  }
  .grow-with-us__tag.is-visible, .grow-with-us__heading-group.is-visible, .grow-with-us__btn.is-visible,
  .quote__content.is-visible,
  .mission .section-split__label.is-visible, .mission .section-split__body.is-visible,
  .contact .section-split__label.is-visible, .contact__body.is-visible { transform: none; }

/* =================================================================
   FORMS (brief §6) — request-bid (.form-input / input) + contact (.field / button)
   ================================================================= */
/* Focus: border grey → brand blue + glow */
.request-bid__form .form-input__input, .field__input { 
  transition: border-color .2s ease, box-shadow .2s ease;
  border: 1px solid #fff;
}
.request-bid__form .form-input__input:focus, .field__input:focus {
  outline: none; border-color: #94A4B5;
}
/* Label colour on focus */
.form-input__label, .field__label { transition: color .2s ease; }
.form-input:focus-within .form-input__label,
.field:focus-within .field__label { color: var(--brand-blue); }

/* Validation (WPCF7) */
.wpcf7-form-control.wpcf7-not-valid { border-color: #E74C3C !important; }
.form-input:has(.wpcf7-not-valid) .form-input__label,
.field:has(.wpcf7-not-valid) .field__label { color: #E74C3C; }
.wpcf7-not-valid-tip { animation: rb-tip-in .3s ease-out both; }
@keyframes rb-tip-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Shake invalid field */
.form-input.is-shake, .field.is-shake { animation: rb-shake .5s ease-in-out; }
@keyframes rb-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); } 30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); } 60% { transform: translateX(6px); }
  75% { transform: translateX(-4px); } 90% { transform: translateX(4px); }
}

/* Submit — input (request-bid): green + text swap (spinner via WPCF7's own) */
.wpcf7-submit { transition: background-color .3s ease, transform .3s ease; }
.wpcf7-submit.is-sent { background: #27AE60 !important; }
.wpcf7-spinner { animation-duration: .8s !important; }

/* Submit — <button> (contact): full spinner → success morph */
button[type="submit"].btn { position: relative; transition: background-color .3s ease, transform .3s ease; }
.wpcf7-form.submitting button[type="submit"] { color: transparent !important; pointer-events: none; }
.wpcf7-form.submitting button[type="submit"]::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: rb-spin .8s linear infinite;
}
@keyframes rb-spin { to { transform: rotate(360deg); } }
button[type="submit"].btn.is-sent { background: #27AE60 !important; }

/* Global response output fade-in */
.wpcf7-response-output { animation: rb-tip-in .3s ease-out both; }

/* =================================================================
   POWER — text stagger + visual reveal
   ================================================================= */
   .power__label, .power__body {
    transform: translateY(24px);
    transition: opacity .6s ease-out, transform .6s ease-out;
    transition-delay: calc(var(--stagger-index, 0) * 120ms);
  }
  .power__label.is-visible, .power__body.is-visible { transform: none; }
  .power__visual { transform: translateY(40px) scale(.96); transition: opacity .8s ease-out, transform .8s ease-out; }
  .power__visual.is-visible { transform: none; }

/* =================================================================
   PEOPLE — text + collage reveal (parallax on imgs is JS)
   ================================================================= */
   .people__label, .people__body {
    transform: translateY(24px);
    transition: opacity .6s ease-out, transform .6s ease-out;
    transition-delay: calc(var(--stagger-index, 0) * 120ms);
  }
  .people__label.is-visible, .people__body.is-visible { transform: none; }
  .people__item {
    overflow: hidden;                                     /* required — clips parallax drift */
    transform: translateY(40px);
    transition: opacity .7s ease-out, transform .7s ease-out;
    transition-delay: calc(var(--stagger-index, 0) * 80ms);
  }
  .people__item.is-visible { transform: none; }

/* =================================================================
   GALLERY — title + items reveal
   ================================================================= */
   .gallery__title { transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; }
   .gallery__title.is-visible { transform: none; }
   .gallery__item {
    transform: translateY(40px);
    transition: opacity .7s ease-out, transform .7s ease-out;
    transition-delay: calc(var(--stagger-index, 0) * 90ms);
  }
  .gallery__item.is-visible { transform: none; }

/* =================================================================
   PROJECTS — head reveal, row stagger, tab progress bars
   ================================================================= */
   .projects .section-split__label,
   .projects__head { transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; transition-delay: calc(var(--stagger-index, 0) * 120ms); }
   .projects .section-split__label.is-visible,
   .projects__head.is-visible { transform: none; }

   .project-row {
    transform: translateY(24px);
    transition: opacity .5s ease-out, transform .5s ease-out;
    transition-delay: calc(var(--stagger-index, 0) * 70ms);
  }
  .project-row.is-visible { transform: none; }

/* Progress fill grows via scaleX (assumes your CSS sets fill width:var(--progress)) */
.progress-bar__fill { transform: scaleX(0); transform-origin: left center; transition: transform .9s ease-out; }
.progress-bar.is-filled .progress-bar__fill { transform: scaleX(1); }

/* =================================================================
   CASE — head/stats/accordion/gallery reveal + accordion behaviour
   ================================================================= */
   .case .section-split__label,
   .case__head { transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; }
   .case .section-split__label.is-visible,
   .case__head.is-visible { transform: none; }
   .case-stat { transform: translateY(24px); transition: opacity .5s ease-out, transform .5s ease-out; transition-delay: calc(var(--stagger-index, 0) * 80ms); }
   .case-stat.is-visible { transform: none; }
   .accordion { transform: translateY(24px); transition: opacity .6s ease-out, transform .6s ease-out; }
   .accordion.is-visible { transform: none; }
   .case__shot { transform: translateY(40px); transition: opacity .7s ease-out, transform .7s ease-out; transition-delay: calc(var(--stagger-index, 0) * 90ms); }
   .case__shot.is-visible { transform: none; }
   .case__cta { transform: translateY(20px); }
   .case__cta.is-visible { transform: none; }

/* Accordion open/close is handled by your jQuery (slideUp/slideDown).
   Here we only rotate the chevron, keyed to .acc-btn.active. */
   .accordion__icon { transition: transform .3s ease; }
   .acc-btn.active .accordion__icon { transform: rotate(180deg); }

/* =================================================================
   BANNER — content reveal (bg parallax is JS)
   ================================================================= */
   .banner__bg { overflow: hidden; }                       /* required — clips parallax */
   .banner__content { transform: translateY(24px); transition: opacity .7s ease-out, transform .7s ease-out; }
   .banner__content.is-visible { transform: none; }

/* =================================================================
   PORTFOLIO — first-screen hero, animated on load via GSAP (initPortfolio).
   No scroll-reveal base here on purpose (would flash above the fold).
   ================================================================= */

/* =================================================================
   PROJECT CARDS — .mfp + .mfp-completed (proj-card reveal, bar fill)
   ================================================================= */
   .mfp__head, .mfp-completed__head {
    transform: translateY(24px);
    transition: opacity .6s ease-out, transform .6s ease-out;
  }
  .mfp__head.is-visible, .mfp-completed__head.is-visible { transform: none; }

  .year-group__year {
    transform: translateY(20px);
    transition: opacity .5s ease-out, transform .5s ease-out;
  }
  .year-group__year.is-visible { transform: none; }

  .proj-card {
    transform: translateY(30px);
    transition: opacity .6s ease-out, transform .6s ease-out;
    transition-delay: calc(var(--stagger-index, 0) * 70ms);
  }
  .proj-card.is-visible { transform: none; }

  .mfp-completed .btn-row { transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; }
  .mfp-completed .btn-row.is-visible { transform: none; }

/* Completed cards live in a more specific grid (.year-group__grid = .section-split__body),
   which can out-specify the single-class reveal above. Scope it stronger so it wins. */
   .mfp-completed .year-group__year,
   .mfp-completed .year-group__grid .proj-card { opacity: 0; }
   .mfp-completed .year-group__grid .proj-card {
    transform: translateY(30px);
    transition: opacity .6s ease-out, transform .6s ease-out;
    transition-delay: calc(var(--stagger-index, 0) * 70ms);
  }
  .mfp-completed .year-group__year.is-visible,
  .mfp-completed .year-group__grid .proj-card.is-visible { opacity: 1; transform: none; }

/* =================================================================
   REDUCED MOTION (brief §9)
   ================================================================= */
   @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .word-reveal, .hero-lead__tag, .hero-factoid__line, .hero-factoid__item, .hero-lead__cta .btn,
    .animate-on-scroll, .testimonials-box, .big-card-info, .factoids .card,
    .map__media .image-cover, .map__card,
    .grow-with-us__image-wrap, .grow-with-us__tag, .grow-with-us__heading-group, .grow-with-us__btn,
    .hero__page .hero__title, .hero__mark,
    .team__intro, .team__slider, .team__divider,
    .values__intro, .values__grid .value-card,
    .quote__content, .mission .section-split__label, .mission .section-split__body,
    .contact .section-split__label, .contact__body,
    .power__label, .power__body, .power__visual,
    .people__label, .people__body, .people__item,
    .gallery__title, .gallery__item,
    .projects .section-split__label, .projects__head, .project-row, .progress-bar__fill,
    .case .section-split__label, .case__head, .case-stat, .accordion, .case__shot, .case__cta,
    .banner__content,
    .portfolio__label, .portfolio__title, .portfolio__cta,
    .mfp__head, .mfp-completed__head, .year-group__year, .proj-card, .mfp-completed .btn-row { opacity: 1 !important; transform: none !important; }
  }

  @media (hover: hover) {
    .btn:hover { transform: translateY(-6px); }
  }


  @media (max-width: 767.98px) {
    .hero-lead__cta a{
      min-width: 250px;
    }
    .hero-lead__tag, 
    .partners__tag, 
    .testimonials__tag, 
    .what-we-do .what-we-do__tag, 
    .request-bid__tag, 
    .grow-with-us__tag, 
    .section-split__label, 
    .power__label, 
    .people__label, 
    .portfolio__label, 
    .mfp__eyebrow,
    .mfp-completed__label{
      font-size: 13px;
    }

    .section-split__label.year-group__year{
      font-size: 20px;
    }

    .projects .section-split__label{
      width: 100%;
      text-align: center;
    }
    .testimonials .testimonials__quote{
      font-size: 1.75em;
    }
    .testimonials .testimonials-photo{
      width: 52px;
      height: 52px;
    }

    .swiper-nav{
      justify-content: space-between;
    }

    .btn-swiper {
      width: calc(50% - 16px);
    }
  }


/* ── Service Hero ── */
.service-hero {
  padding: var(--space-container) 0; /* 140px верт., як .container; горизонталь через .wrapper */
  position: relative;
}

.bg-block{
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
}

.bg-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.bg-block img{
 height: 100%;
 width: 100%;
 object-fit: cover;
}

.service-hero__inner {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: var(--space-title-gap); /* 60px */
  align-items: center;
}

/* content */
.service-hero__content {
  display: flex;
  flex-direction: column;
  gap: 2.5em; /* 40px */
}
.service-hero__eyebrow {
  font-family: var(--font-body);
  font-size:   var(--text-caption-s); /* 16px */
  line-height: var(--lh-caption-s);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
}
.service-hero__text {
  display: flex;
  flex-direction: column;
  gap: 1.25em; /* 20px */
}
.service-hero__title { color: #fff; }
.service-hero__desc { color: #fff; }

/* actions */
.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-grid-gap); /* 24px */
}

.service-hero .secondary{
  gap: 0.5em;
}

/* trust row */
.service-hero__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2em; /* 32px */
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.75em; /* 12px */
}
.trust-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;  /* 44px */
  height: 2.75em;
  color: #fff;
  flex-shrink: 0;
}

.trust-item__icon img{
  height: 100%;
  width: 100%;
}

.trust-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.125em; /* 2px */
  color: #fff;
}
.trust-item__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size:   var(--text-body-s);
  line-height: var(--lh-body-s);
  color: #fff;
}
.trust-item__sub { color: #fff;}

/* media */
.service-hero__media {
  position: relative;
  aspect-ratio: 588 / 468;
  overflow: hidden;
}

/* ── Buttons — new variants ── */
.btn--red {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  gap: 0.5em; /* під іконку */
}
.btn--outline-blue {
  background: transparent;
  border-color: var(--blue);
  color: var(--blue);
  gap: 0.5em;
}
.btn .icon-24px {
  width: 1.25em;  /* 20px */
  height: 1.25em;
}

/* ── Service Hero — Tablet ── */
@media (max-width: 1024px) {
  .service-hero__inner {
    grid-template-columns: 1fr;
    gap: 3.75em; /* 60px */
  }
  .service-hero__media { aspect-ratio: 16 / 10; }
}

/* ── Service Hero — Mobile ── */
@media (max-width: 768px) {
  .service-hero { padding: 3.75em 0; } /* 60px */
  .service-hero__actions .btn { flex: 1; } /* кнопки на всю ширину */
  .service-hero__trust { flex-direction: column; gap: 1.5em; }
}

/* ── Services ── */
.services {
  background: var(--white);
}
.services__inner {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px */
}

/* head */
.services__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em; /* 12px */
  text-align: center;
}
.services__eyebrow {
  font-family: var(--font-body);
  font-size:   var(--text-caption-s); /* 16px */
  line-height: var(--lh-caption-s);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--red);
}

/* grid 3×2 */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-grid-gap); /* 24px */
}

/* card */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 1.5em; /* 24px */
  padding: var(--space-card-big); /* 40px */
  background: var(--grey-5);
}

/* icon */
.service-card__icon {
  flex-shrink: 0;
}
.service-card__icon .icon-48px { color: var(--blue); }

/* body */
.service-card__body {
  display: flex;
  flex-direction: column;
  gap: 1em; /* 16px */
  flex: 1; /* штовхає link донизу при різній кількості пунктів */
}
.service-card__title {
  font-family: var(--font-display);
  font-size:   var(--text-h3); /* 30px */
  line-height: var(--lh-h3);
  color: var(--blue);
}
.service-card__desc { color: var(--black); }

/* list */
.service-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 8px */
  color: var(--black);
}
.service-card__list li {
  position: relative;
  padding-left: 1em; /* 16px під маркер */
}
.service-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.375em;  /* 6px */
  height: 0.375em;
  border-radius: 50%;
  background: var(--red);
}

/* learn more */
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em; /* 8px */
  font-family: var(--font-body);
  font-size:   var(--text-body-s);
  line-height: var(--lh-body-s);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--red);
  text-decoration: none;
}
.service-card__link .icon-24px {
  width: 1.125em; /* 18px */
  height: 1.125em;
  transition: transform 0.3s ease;
}
.service-card__link:hover .icon-24px {
  transform: translateX(0.25em);
}

/* ── Services — Tablet ── */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Services — Mobile ── */
@media (max-width: 768px) {
  .services__grid { grid-template-columns: 1fr; }
  .service-card { padding: var(--space-card-small); } /* 30px */
}

/* ── Commercial ── */
.commercial {
  background: var(--white);
}
.commercial__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-title-gap); /* 60px */
  align-items: center;
}

/* media */
.commercial__media {
  position: relative;
  aspect-ratio: 588 / 500;
  overflow: hidden;
}

/* content */
.commercial__content {
  display: flex;
  flex-direction: column;
  gap: 2.5em; /* 40px */
}
.commercial__head {
  display: flex;
  flex-direction: column;
  gap: 1.25em; /* 20px */
}
.commercial__eyebrow {
  font-family: var(--font-body);
  font-size:   var(--text-caption-s); /* 16px */
  line-height: var(--lh-caption-s);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--red);
}
.commercial__desc { color: var(--black); }

/* services row */
.commercial__services {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-grid-gap); /* 24px */
}
.comm-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em; /* 12px */
  flex: 1;
  min-width: 6.25em; /* 100px — щоб при звуженні переносились, а не стискались */
  text-align: center;
}
.comm-service__icon {
  flex-shrink: 0;
}
.comm-service__label { color: var(--blue); }

/* cta */
.commercial__cta {
  align-self: flex-start;
}

/* ── Commercial — Tablet ── */
@media (max-width: 1024px) {
  .commercial__inner {
    grid-template-columns: 1fr;
    gap: 3.75em; /* 60px */
  }
  .commercial__media { aspect-ratio: 16 / 9; }
}

/* ── Commercial — Mobile ── */
@media (max-width: 768px) {
  .commercial__services { gap: 1.25em; } /* 20px */
  .comm-service { min-width: 5.625em; } /* 90px — 2-3 в ряд */
  .commercial__cta { align-self: stretch; }
}

/* ── CTA Band ── */
.cta-band {
  background: var(--blue);
  padding: 3.75em 0; /* 60px */
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-title-gap); /* 60px */
}

/* lead: logo + text */
.cta-band__lead {
  display: flex;
  align-items: center;
  gap: 1.5em; /* 24px */
}
.cta-band__logo {
  display: inline-flex;
  width: 3.5em;  /* 56px */
  height: 3.5em;
  flex-shrink: 0;
  color: var(--white);
}
.cta-band__text {
  display: flex;
  flex-direction: column;
  gap: 0.5em; /* 8px */
}
.cta-band__title {
  font-family: var(--font-display);
  font-size:   var(--text-h3); /* 30px */
  line-height: var(--lh-h3);
  color: var(--white);
}
.cta-band__sub { color: var(--grey-30); }

/* actions */
.cta-band__actions {
  display: flex;
  gap: var(--space-grid-gap); /* 24px */
  flex-shrink: 0;
}

/* outline-light з іконкою (на темному тлі) */
.btn--outline-light-icon {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
  gap: 0.5em;
}

/* ── CTA Band — Tablet ── */
@media (max-width: 1024px) {
  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5em; /* 40px */
  }
}

/* ── CTA Band — Mobile ── */
@media (max-width: 768px) {
  .cta-band__actions {
    flex-direction: column;
    width: 100%;
  }
  .cta-band__actions .btn { width: 100%; }
}





/* ── Blog ── */
.blog {
 background: #f5f6f7;
 overflow: hidden;
}
.blog__inner {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px */
}

/* toolbar */
.blog__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-grid-gap); /* 24px */
}
.blog__sort-label {
  font-weight: 600;
  color: var(--black);
  font-size: 20px;
  line-height: 110%;
  flex-shrink: 0;
}
.blog__filters {
  display: flex;
  gap: var(--space-grid-gap); /* 24px */
  margin-left: auto;
}

/* ── Dropdown (custom select) ── */
.dropdown {
  position: relative;
  width: 412px; /* 327px */
}

/* toggle */
.dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: 1em 1em; /* 24px 20px */
  background: #f5f6f7;
  border: 1px solid #94a4b5;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--black);
  text-align: left;
}
.dropdown__value { flex: 1; }
.dropdown__arrow {
  width: 1.25em;  /* 20px */
  height: 1.25em;
  color: var(--blue);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.dropdown.is-open .dropdown__arrow {
  transform: rotate(180deg);
}

/* menu */
.dropdown__menu {
  position: absolute;
  top: 100%; /* стик із toggle (перекриває бордер) */
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #f5f6f7;
  border: 1px solid #94a4b5;
  border-top: none;
  display: none;
  padding: 1rem;
}
.dropdown.is-open .dropdown__menu {
  display: block;
}

/* option */
.dropdown__option {
  padding: 0; /* 12px 20px */
  font-family: var(--font-body);
  font-size:   var(--text-body-s);
  line-height: var(--lh-body-s);
  color: var(--black);
  cursor: pointer;
}

.dropdown__option:not(:last-child){
  margin-bottom: 16px;
}

.dropdown__option:last-child {
  border-bottom: none;
}
.dropdown__option:hover,
.dropdown__option:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.dropdown__option.is-selected {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1300px) {
  .dropdown { width: 350px; }
}


/* grid */
.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px var(--space-grid-gap) ; /* 24px */
}

/* post card */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
}
.post-card__media {
  position: relative;
  height: 220px;
  overflow: hidden;
  display: block;
}
.post-card__media img {
  transition: transform 0.4s ease;
}
.post-card:hover .post-card__media img {
  transform: scale(1.04);
}
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 1em; /* 16px */
  padding: 26px; /* 30px */
  flex: 1;
}
.post-card__title {
 font-family: "Inter", sans-serif;
 font-weight: 700;
 font-size: 20px;
 line-height: 110%;
 overflow: hidden;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 color: #000;
}
.post-card__title a {
  color: inherit;
  text-decoration: none;
}
.post-card__excerpt {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #000;
  flex: 1;
}

/* meta */
.post-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  margin-top: 0.5em; /* 8px */
}
.post-card__cat {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  padding: 4px 8px;
}
.post-card__time {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* 6px */
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-align: right;
  text-transform: uppercase;
  color: #002e5e;
  white-space: nowrap;
}
.post-card__time .icon-24px {
  width: 14px; /* 16px */
  height: 14px;
  color: var(--blue);
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px; /* 24px */
  margin-top: 10px;
}
.pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;  /* 54px */
  height: 60px;
  border: 1px solid var(--grey-30);
  color: var(--blue);
  transition: .3s ease-out;
}

.pagination__arrow svg{
  width: 25px;
  height: auto;
}
.pagination__arrow svg path{
 transition: .3s ease-out;
}

.pagination__arrow:hover{
  background:  var(--blue);
  color: #fff;
}

.pagination__arrow:hover svg path{
  stroke: #fff;
}

.pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 21px; /* 16px */
}
.pagination__num {
  font-family: var(--font-body);
  font-size:   var(--text-body-s);
  line-height: var(--lh-body-s);
  color: var(--grey-30);
  text-decoration: none;
}
.pagination__num.is-current {
  font-weight: 700;
  color: var(--black);
}
.pagination__dots {
  color: var(--grey-30);
}

/* ── Blog — Tablet ── */
@media (max-width: 1024px) {
  .blog__grid { grid-template-columns: repeat(2, 1fr); }
  .blog__toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 1em;
  }
  .blog__filters {
    flex-direction: column;
    margin-left: 0;
  }
  .dropdown { width: 100%; }
}

/* ── Blog — Mobile ── */
@media (max-width: 767.98px) {

  .blog__grid { grid-template-columns: 1fr; gap: 20px; }
  .blog__inner {
    gap: 2em;
  }
  .pagination__list {
    gap: 14px;
  }
  .pagination__arrow {
    width: 50px;
    height: 50px;
  }
  .pagination__arrow svg{
    width: 20px;
  }
  .pagination {
    gap: 24px;
    margin-top: 0;
  }
}


/* ── Blog Hero ── */
.blog-hero {
  background: var(--grey-5);
  padding-left:  var(--space-wrapper-bg); /* 12px рамка */
  padding-right: var(--space-wrapper-bg);
}
.blog-hero__frame {
  margin: 0 auto;
  background: var(--blue);
  padding: 14.625em 0 9em; /* 234px зверху — до заголовка; симетрично знизу */
}

/* спліт: back (194px) + контент (справа) */
.blog-hero__grid {
  display: grid;
  grid-template-columns: 12.125em 1fr; /* 194px + решта */
  gap: 121px;
  align-items: start;
}

.blog-hero__back {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* content */
.blog-hero__content {
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.blog-hero__title {
  font-family: var(--font-display);
  font-size:   var(--text-caption-l); /* 60px = Caption XL за макетом */
  line-height: var(--lh-caption-l);
  color: var(--white);
  max-width: 20em; /* ~957px обмеження */
}

/* two columns */
.blog-hero__cols {
  display: grid;
  grid-template-columns: 1.17fr 1fr;
  gap: 70px; /* 60px */
}

.blog-hero__col {
  color: var(--white);
}

.blog-hero__col strong{
  font-weight: 600;
}


@media (max-width: 1300px) {
  .blog-hero__grid{
    gap: 3rem;
  }
}

/* ── Blog Hero — Tablet ── */
@media (max-width: 1024px) {
  .blog-hero__frame { padding: 12em 0 5em; } /* 100px */
  .blog-hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5em; /* 40px */
  }
}

/* ── Blog Hero — Mobile ── */
@media (max-width: 767.98px) {
  .blog-hero__frame { padding: 10em 0 3.75em; } /* 60px */
  .blog-hero__cols {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }
}



/* ── Post (article) ── */
.post {
  background: var(--white);
}
.post__body {
  max-width: 957px; /* 720px reading column */
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px між секціями */
}

/* section */
.post__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.post__h2 {
  font-family: var(--font-display);
  font-size:   var(--text-h2); /* 40px */
  line-height: var(--lh-h2);
  color: var(--blue);
}

.post__h2 + .post__accent{
  margin-top: 0;
}

/* prose */
.post__prose {
  display: flex;
  flex-direction: column;
  gap: 24px;
  color: var(--black);
  max-width: 88%;
}

.post__prose h3{
  font-family: var(--font-body);
  font-size:   var(--text-body-s);
  line-height: var(--lh-body-s);
  font-weight: 600;
  color: var(--red);
  text-transform: uppercase;
}

.post__prose strong { font-weight: 600; }

/* accent line */
.post__accent {
  font-family: var(--font-body);
  font-size:   var(--text-body-s);
  line-height: var(--lh-body-s);
  font-weight: 600;
  color: var(--red);
  margin-top: 39px;
}

/* link */
.post__prose a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.post__prose a:hover{
 text-decoration: none;
}

/* accordion — переюз, але заголовки дрібніші за case-варіант */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 14px; /* 24px */
  margin-top: 0;
  margin-bottom: 24px;
}


/* footer */
.post__footer {
  padding-top: 1.5em; /* 24px */
  border-top: 1px solid  #94a4b5;;
}
.post__meta { color: #3b5168; }

@media (max-width: 1024px) {
  .post__prose{
    max-width: 100%;
  }
}

/* ── Post — Mobile ── */
@media (max-width: 768px) {
  .post__body { gap: 2.5em; } /* 40px */
  .post__h2{
    font-size: 1.75em;
  }
  .post__accent{
    margin-top: 20px;
  }
}


/* ── Related Articles ── */
.related {
  background: var(--grey-5);
}
.related__inner {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px */
}
.related__title {
  text-align: center;
}

/* slider group — той самий каркас, що team */
.related__slider {
  display: flex;
  flex-direction: column;
  gap: 3.75em; /* 60px */
}
.related-swiper { width: 100%; }
.related-swiper .post-card { height: auto; } /* слайди рівні по контенту */


/* controls */
.related-slider__controls {
  display: flex;
  flex-direction: column;
  gap: 2.5em; /* 40px */
}

/* progress bar */
.related .related-slider__progress .related__pagination {
  position: relative;
  height: 12px; /* 2px track (12px у макеті — під ретину лишаю тонким; став 0.75em якщо треба товстий) */
  background: #fff;
}

.related .related-slider__progress .swiper-pagination-progressbar-fill{
  background: #98001B;
}
.related-slider__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38.94%; /* 500/1284 — стартове; JS перезапише */
  background: var(--red);
}

/* nav */
.related-slider__nav {
  display: flex;
  gap: var(--space-grid-gap); /* 24px */
}
.related-slider__arrow {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.75em; /* 60px */
  border: 1px solid #002E5E;
  background: transparent;
  color: var(--black);
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.related-slider__arrow:disabled {
  opacity: 0.4;
  cursor: default;
}

.related-slider__arrow:hover:not(:disabled){
  background: #002E5E;
  color: #fff;
}

/* ── Related — Mobile ── */
@media (max-width: 767.98px) {
  .related-slider__arrow { height: 3.25em; }
  .related__inner {
    gap: 2em;
  }
  .related-slider__controls {
    gap: 2em;
  }
  .related__slider {
    gap: 2.5em;
  }
}