/*
Theme Name: KOBU Theme
Theme URI: https://kobu.local
Author: KOBU
Author URI: https://kobu.local
Description: Custom WordPress theme based on the KOBU Figma redesign.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: kobu-theme
*/

:root {
  --kobu-bg-dark: #2d2d2d;
  --kobu-text-light: #ffffff;
  --kobu-text-muted: #979797;
  --kobu-border-soft: #979797;
  --kobu-surface-soft: #d9d9d9;
  --kobu-surface-dark: #1f1f1f;
  --kobu-overlay: rgba(18, 18, 18, 0.15);
  --kobu-accent: #ffffff;
  --kobu-container: 1140px;
  --kobu-section-gap: 120px;
  /* Раньше шапка была в потоке (sticky) ~96px; при fixed добавляем к верхним отступам */
  --kobu-header-flow-gap: 96px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--kobu-bg-dark);
  color: var(--kobu-text-light);
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.22;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.kobu-container {
  width: min(var(--kobu-container), calc(100% - 40px));
  margin: 0 auto;
}

.kobu-title-xl,
.kobu-title-lg,
.kobu-title-md {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

.kobu-title-xl {
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1;
}

.kobu-title-lg {
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.05;
}

.kobu-title-md {
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.2;
}

.kobu-label {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--kobu-text-muted);
  letter-spacing: 0.06em;
}

/* Все страницы: лого и меню поверх контента, без сплошной тёмной полосы */
.kobu-site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}

/* Header: stretch logo/menu to screen sides (not limited by 1140 container). */
.kobu-site-header .kobu-container {
  width: calc(100% - 40px);
  max-width: none;
}

/* Figma «Lines»: одна общая сетка на body (раньше дублировалась на .kobu-projects-page__list-wrap и .kobu-project-detail) */
body.home::before,
body.page-template-page-projects-php::before,
body.page-template-page-contact-php::before,
body.page-template-page-about-us-php::before,
body.single-project::before {
  content: none;
  display: none;
}

body.home > .kobu-hero,
body.home > section,
body.home > footer,
body.page-template-page-projects-php > main,
body.page-template-page-projects-php > footer,
body.single-project > .kobu-project-detail,
body.single-project > footer,
body.page-template-page-contact-php > .kobu-contact,
body.page-template-page-contact-php > footer,
body.page-template-page-about-us-php > .kobu-about-page,
body.page-template-page-about-us-php > footer {
  position: relative;
  z-index: 1;
}

/* Contact (Figma 580:7869): четыре вертикали на полосе 1140 — 150 / 530 / 910 / 1290 */
/* About (Figma 568:4666): same vertical grid as Contact — 150 / 530 / 910 / 1290 */
body.page-template-page-about-us-php::before {
  content: none;
  display: none;
}

body.page-template-page-contact-php::before {
  content: none;
  display: none;
}

.kobu-projects-page__lines,
.kobu-about-page__lines,
.kobu-services-page__lines {
  display: none !important;
}

.kobu-site-header__inner {
  min-height: 105px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 32px;
  box-sizing: border-box;
  pointer-events: none;
}

.kobu-logo {
  width: 56px;
  height: 100px;
  display: inline-block;
  pointer-events: auto;
}

.kobu-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.custom-logo-link {
  width: 56px;
  height: 100px;
  display: inline-flex;
  pointer-events: auto;
}

.custom-logo-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kobu-main-menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kobu-main-menu a {
  font-family: 'Futura', 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.kobu-main-menu a:hover,
.kobu-main-menu .current-menu-item > a {
  border-color: var(--kobu-accent);
}

.kobu-menu-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transform: translate(12px, 6px);
  pointer-events: auto;
}

.kobu-menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--kobu-text-light);
  margin-left: auto;
}

.kobu-nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: flex-end;
}

.kobu-nav-drawer[hidden] {
  display: none !important;
}

.kobu-nav-drawer__inner {
  width: min(50vw, 760px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 120px 80px 48px;
  background: #2d2d2d;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

.kobu-nav-drawer__main {
  flex: 1 1 auto;
  padding-top: 40px;
}

.kobu-nav-drawer__secondary {
  flex-shrink: 0;
  padding-top: 8px;
}

.kobu-drawer-service-menu,
.kobu-drawer-service-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  column-gap: 28px;
  row-gap: 14px;
  width: 100%;
  max-width: none;
}

/* Full-width rows: 1st, 4th, 7th… (pattern from 4-line design, works for any count). */
.kobu-drawer-service-menu > li:nth-child(3n + 1) {
  grid-column: 1 / -1;
  justify-self: center;
}

.kobu-drawer-service-menu a {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.kobu-drawer-service-menu a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.65);
}

.kobu-main-menu--drawer {
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kobu-main-menu--drawer a {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.05;
  text-transform: none;
  border: 0 !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover / keyboard: серое тире слева и точка справа (как в макете). Drawer + footer nav. */
.kobu-main-menu--drawer a::before,
.kobu-main-menu--drawer a::after,
.kobu-site-footer__menu a::before,
.kobu-site-footer__menu a::after {
  content: '';
  flex-shrink: 0;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    width 0.2s ease,
    height 0.2s ease,
    margin 0.2s ease,
    transform 0.2s ease;
}

.kobu-main-menu--drawer a::before,
.kobu-site-footer__menu a::before {
  width: 0;
  height: 2px;
  margin-right: 0;
  background: rgba(170, 170, 170, 0.95);
}

.kobu-main-menu--drawer a::after,
.kobu-site-footer__menu a::after {
  width: 0;
  height: 0;
  margin-left: 0;
  border-radius: 50%;
  background: rgba(170, 170, 170, 0.95);
  transform: translateY(0);
}

.kobu-main-menu--drawer a:hover::before,
.kobu-main-menu--drawer a:focus-visible::before,
.kobu-site-footer__menu a:hover::before,
.kobu-site-footer__menu a:focus-visible::before {
  width: 36px;
  margin-right: 14px;
  opacity: 1;
}

.kobu-main-menu--drawer a:hover::after,
.kobu-main-menu--drawer a:focus-visible::after,
.kobu-site-footer__menu a:hover::after,
.kobu-site-footer__menu a:focus-visible::after {
  width: 7px;
  height: 7px;
  margin-left: 14px;
  opacity: 1;
}

.kobu-main-menu--drawer a:hover::after,
.kobu-main-menu--drawer a:focus-visible::after {
  transform: translateY(11px);
}

.kobu-main-menu--drawer a:hover,
.kobu-main-menu--drawer a:focus-visible,
.kobu-main-menu--drawer .current-menu-item > a,
.kobu-main-menu--drawer .current_page_item > a,
.kobu-main-menu--drawer .current-page-ancestor > a,
.kobu-site-footer__menu a:hover,
.kobu-site-footer__menu a:focus-visible {
  border: 0 !important;
  text-decoration: none;
}

.kobu-menu-open {
  overflow: hidden;
}

.kobu-hero {
  position: relative;
  min-height: 840px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.kobu-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(var(--kobu-overlay), var(--kobu-overlay)),
    url('https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?auto=format&fit=crop&w=1800&q=80')
      center/cover no-repeat;
}

.kobu-home-hero::before {
  background:
    linear-gradient(rgba(18, 18, 18, 0.15), rgba(18, 18, 18, 0.15)),
    url('https://images.unsplash.com/photo-1516156008625-3a9d6067fab5?auto=format&fit=crop&w=1937&q=80')
      center/cover no-repeat;
}

/* Если задан poster_src, используем его как постоянный fallback-кадр hero. */
.kobu-home-hero--has-poster::before {
  background:
    linear-gradient(rgba(18, 18, 18, 0.15), rgba(18, 18, 18, 0.15)),
    var(--kobu-home-hero-poster) center/cover no-repeat;
}

/* После фактического старта видео оставляем только затемнение поверх видео. */
.kobu-home-hero--video.kobu-home-hero--video-started::before {
  background: linear-gradient(rgba(18, 18, 18, 0.15), rgba(18, 18, 18, 0.15));
}

.kobu-home-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.kobu-home-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.kobu-home-hero--video.kobu-home-hero--video-started .kobu-home-hero__video {
  opacity: 1;
}

.kobu-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 100px 0 80px;
}

.kobu-home-hero__inner {
  position: relative;
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  height: 840px;
}

.kobu-home-hero__title-wrap {
  position: absolute;
  left: var(--kobu-hero-title-left, 148px);
  top: var(--kobu-hero-title-top, 332px);
}

.kobu-home-hero__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.kobu-home-hero__title > span:nth-child(1) {
  font-size: var(--kobu-hero-title-fs-1, inherit);
  margin-top: var(--kobu-hero-title-mt-1, 0);
}

.kobu-home-hero__title > span:nth-child(2) {
  font-size: var(--kobu-hero-title-fs-2, inherit);
  margin-top: var(--kobu-hero-title-mt-2, 0);
}

.kobu-home-hero__title > span:nth-child(3) {
  font-size: var(--kobu-hero-title-fs-3, inherit);
  margin-top: var(--kobu-hero-title-mt-3, 0);
}

.kobu-home-hero__title-last {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  padding-left: var(--kobu-hero-title-line3-indent, 92px);
}

.kobu-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: end;
}

.kobu-hero__services {
  text-align: right;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--kobu-text-light);
  opacity: 0.9;
}

.kobu-home-hero__services {
  position: absolute;
  left: 150px;
  right: 92px;
  top: 768px;
  width: auto;
  height: auto;
  min-height: 42px;
  text-align: left;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 14px;
  justify-content: stretch;
  align-items: start;
  z-index: 2;
}

.kobu-home-hero__services p {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-transform: uppercase;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.kobu-home-hero__services p span {
  display: inline-block;
  margin-bottom: 2px;
}

.kobu-home-hero__socials {
  position: absolute;
  right: 32px;
  bottom: 20px;
  width: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  z-index: 3;
  overflow: visible;
}

.kobu-home-hero__socials a {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kobu-text-light);
  opacity: 0.95;
  overflow: visible;
  box-sizing: border-box;
}

.kobu-home-hero__socials a span {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.kobu-home-hero__socials a svg {
  width: 18px;
  height: 18px;
  overflow: visible;
  flex-shrink: 0;
}

.kobu-home-hero__socials a:hover {
  opacity: 1;
}

.kobu-page-section {
  padding: var(--kobu-section-gap) 0;
}

.kobu-home-projects {
  padding: 0;
  position: relative;
  /* Линии сетки — body::before (home / Projects page / single project); отдельный фон не нужен */
}

.kobu-home-projects__inner {
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  min-height: 886px;
  padding: 0 150px 0 149px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.kobu-home-projects__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 1140px;
}

.kobu-home-projects__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* Figma H1 «OUR projects»: 56 / 100%, Poppins 500, uppercase; текст в блоке по правому краю + маркер 16×16 #979797 */
.kobu-home-projects__heading {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  max-width: min(441px, 100%);
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-home-projects__heading-text {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.kobu-home-projects__heading-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 0 10px;
  vertical-align: middle;
  background: #979797;
  border-radius: 50%;
  transform: translateY(4px);
}

/* JS вешает is-short/is-long по canPrev/canNext — не меняем геометрию иконок: обе стрелки 50×20, влево = зеркало вправо */
.kobu-home-projects__arrows {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  width: 108px;
  height: 20px;
  gap: 8px;
  box-sizing: border-box;
}

.kobu-home-projects__arrows .kobu-slider-arrow {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  flex-shrink: 0;
  padding: 0;
  min-height: 0;
  width: 50px;
  min-width: 50px;
  height: 20px;
}

.kobu-home-projects-arrow {
  display: block;
  width: 100%;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  transform-origin: center center;
  transition: transform 0.22s ease;
}

/* Влево = зеркало «вправо»; длинная линия + наконечник */
.kobu-home-projects-arrow--prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='20' viewBox='0 0 50 20' fill='none'%3E%3Cpath d='M1.25 10H41.75M41.75 10L36.25 4.75M41.75 10L36.25 15.25' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  transform: scaleX(-1);
}

/* Неактивно: серая линия короче (до H26), наконечник тот же размер */
.kobu-home-projects__arrows
  .kobu-slider-arrow--left:disabled
  .kobu-home-projects-arrow--prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='20' viewBox='0 0 50 20' fill='none'%3E%3Cpath d='M1.25 10H26M26 10L20.5 4.75M26 10L20.5 15.25' stroke='%23979797' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

.kobu-home-projects-arrow--next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='20' viewBox='0 0 50 20' fill='none'%3E%3Cpath d='M1.25 10H41.75M41.75 10L36.25 4.75M41.75 10L36.25 15.25' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

.kobu-home-projects__arrows
  .kobu-slider-arrow--right:disabled
  .kobu-home-projects-arrow--next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='20' viewBox='0 0 50 20' fill='none'%3E%3Cpath d='M1.25 10H26M26 10L20.5 4.75M26 10L20.5 15.25' stroke='%23979797' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}

.kobu-home-projects__arrows
  .kobu-slider-arrow:not(:disabled):hover
  .kobu-home-projects-arrow--prev {
  transform: scaleX(-1) scale(1.1);
}

.kobu-home-projects__arrows
  .kobu-slider-arrow:not(:disabled):hover
  .kobu-home-projects-arrow--next {
  transform: scale(1.1);
}

.kobu-home-projects__filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 1px;
}

.kobu-home-projects__filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.kobu-home-projects__filter {
  position: relative;
  margin: 0;
  padding: 0 0 10px;
  border: none;
  background: none;
  font: inherit;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #979797;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Figma Line 10: сегмент 23×2px под активным фильтром */
.kobu-home-projects__filter.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 23px;
  height: 0;
  border-bottom: 2px solid #979797;
}

.kobu-home-projects__filter:hover {
  color: #ffffff;
}

.kobu-home-projects__filter.is-active {
  color: #ffffff;
}

.kobu-home-project-card.kobu-project-highlight {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  grid-template-columns: unset;
}

.kobu-project-highlight:not(.kobu-home-project-card) {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  padding: 24px;
}

.kobu-home-project-card {
  width: 100%;
  max-width: 1137px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border: 0;
  background: transparent;
  padding: 0;
}

.kobu-home-projects-slider {
  position: relative;
  width: 100%;
  max-width: 1137px;
  height: 680px;
}

.kobu-home-projects-slider__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.kobu-home-projects-slider__track {
  width: 100%;
  height: 100%;
  position: relative;
}

.kobu-home-project-card__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.kobu-home-project-card__slide.is-hidden {
  display: none;
}

.kobu-home-project-card__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.kobu-home-project-card__slide-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

.kobu-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: auto;
  min-height: 14px;
  width: 28px;
  border: 0;
  padding: 2px 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
  transition:
    width 0.2s ease,
    opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kobu-home-projects__arrows .kobu-slider-arrow {
  position: relative;
  top: auto;
  transform: none;
}

.kobu-slider-arrow--left {
  left: 24px;
}

.kobu-slider-arrow--right {
  right: 24px;
}

.kobu-slider-arrow__svg {
  display: block;
  width: 100%;
  height: 12px;
  overflow: visible;
}

.kobu-slider-arrow.is-long {
  width: 64px;
}

.kobu-slider-arrow.is-short {
  width: 28px;
  opacity: 0.55;
}

.kobu-slider-arrow:disabled {
  cursor: default;
  opacity: 0.45;
}

/* Home OUR PROJECTS: не сужать до 28/64px из-за is-short/is-long в theme.js */
.kobu-home-projects__arrows .kobu-slider-arrow.is-short,
.kobu-home-projects__arrows .kobu-slider-arrow.is-long {
  width: 50px;
  min-width: 50px;
}

.kobu-home-projects__arrows .kobu-slider-arrow:not(:disabled) {
  opacity: 1;
}

/* Серый stroke на disabled — без доп. затемнения, иначе «неактив» нечитаем */
.kobu-home-projects__arrows .kobu-slider-arrow:disabled {
  opacity: 1;
}

.kobu-home-project-card__year {
  margin: 6px 0 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--kobu-text-muted);
}

.kobu-home-project-card__year:empty {
  display: none;
}

.kobu-home-project-card__image-wrap {
  position: relative;
  height: 100%;
  min-height: 360px;
  overflow: hidden;
  background: transparent;
}

.kobu-home-project-card__empty-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(18px, 2vw, 24px);
}

.kobu-home-project-card__image-wrap img,
.kobu-home-project-card__image-wrap video.kobu-home-project-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter 0.45s ease;
}

.kobu-home-project-card__scope-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
}

.kobu-home-project-card__scope-stage .kobu-home-project-card__scope {
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  border-top: 0;
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-rows: clamp(240px, 42vw, 360px) auto;
  align-content: start;
  gap: clamp(16px, 2vw, 24px);
  overflow: visible;
}

.kobu-home-project-card__slide.is-scope-mode
  .kobu-home-project-card__image-wrap {
  overflow: hidden;
}

.kobu-home-project-card__scope-stage .kobu-home-project-card__scope-fig {
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: visible;
  background: transparent;
}

.kobu-home-project-card__scope-stage .kobu-home-project-card__scope-fig img {
  width: 104%;
  margin-left: -2%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  filter: none;
}

.kobu-home-project-card__slide.is-scope-mode .kobu-home-project-card__video,
.kobu-home-project-card__slide.is-scope-mode
  .kobu-home-project-card__image-wrap
  > img,
.kobu-home-project-card__slide.is-scope-mode
  .kobu-home-project-card__empty-media,
.kobu-home-project-card__slide.is-scope-mode .kobu-home-project-card__cta {
  display: none !important;
}

.kobu-home-projects[data-active-filter='all']
  .kobu-home-project-card__slide
  .kobu-home-project-card__scope-stage {
  display: none !important;
}

.kobu-home-projects[data-active-filter='all']
  .kobu-home-project-card__slide
  .kobu-home-project-card__video,
.kobu-home-projects[data-active-filter='all']
  .kobu-home-project-card__slide
  .kobu-home-project-card__image-wrap
  > img {
  display: block !important;
}

.kobu-home-projects[data-active-filter='all']
  .kobu-home-project-card__slide
  .kobu-home-project-card__empty-media {
  display: flex !important;
}

.kobu-home-projects[data-active-filter='all']
  .kobu-home-project-card__slide
  .kobu-home-project-card__cta {
  display: flex !important;
}

.kobu-home-projects.is-scope-filter .kobu-home-project-card__title,
.kobu-home-projects.is-scope-filter .kobu-home-project-card__year {
  display: none !important;
}

.kobu-home-projects.is-scope-filter .kobu-home-project-card__meta-bar {
  justify-content: flex-end;
}

.kobu-home-project-card__image-wrap:hover img,
.kobu-home-project-card__image-wrap:hover video.kobu-home-project-card__video {
  filter: grayscale(0%);
}

.kobu-home-project-card__video {
  display: block;
  background: #0a0a0a;
}

.kobu-home-project-card__scope {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(20px, 3vw, 36px);
  padding-top: clamp(16px, 2.5vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kobu-home-project-card__scope-fig {
  margin: 0;
  max-width: 100%;
}

.kobu-home-project-card__scope-fig img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  filter: none;
}

.kobu-home-project-card__scope-fig figcaption {
  margin-top: 8px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: #979797;
}

.kobu-home-project-card__scope-text {
  margin: 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre-line;
  overflow: visible;
}

.kobu-home-projects[data-active-filter='interior']
  .kobu-home-project-card__scopes
  .kobu-home-project-card__scope--building {
  display: none;
}

.kobu-home-projects[data-active-filter='building']
  .kobu-home-project-card__scopes
  .kobu-home-project-card__scope--interior {
  display: none;
}

.kobu-home-project-card__cta {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  padding: 32px 40px;
  border: none;
  background: rgba(18, 18, 18, 0.25);
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kobu-text-light);
  text-decoration: none;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    background 0.28s ease;
}

.kobu-home-project-card__cta-open,
.kobu-home-project-card__cta-project {
  display: block;
  line-height: 1.25;
}

.kobu-home-project-card__cta-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin: 14px 0;
  background: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

.kobu-home-project-card__cta-project {
  letter-spacing: 0.22em;
}

.kobu-home-project-card__cta-arrow {
  display: inline-block;
  margin-left: 0.2em;
  letter-spacing: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
}

.kobu-home-project-card__slide.is-active .kobu-home-project-card__cta {
  pointer-events: auto;
}

.kobu-home-projects[data-cz-preview='1']
  .kobu-home-project-card__slide.is-active
  .kobu-home-project-card__cta {
  opacity: 1;
}

.kobu-home-project-card__image-wrap:hover .kobu-home-project-card__cta,
.kobu-home-project-card__image-wrap:focus-within .kobu-home-project-card__cta {
  opacity: 1;
  pointer-events: auto;
}

.kobu-home-project-card__cta:hover,
.kobu-home-project-card__cta:focus-visible {
  background: rgba(18, 18, 18, 0.38);
}

.kobu-home-project-card__meta-wrap {
  width: 100%;
  max-width: 1140px;
  min-height: 37px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(20px, 3vw, 36px);
}

.kobu-home-project-card__meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.kobu-home-project-card__scopes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.kobu-home-project-card__scopes > .kobu-home-project-card__scope:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.kobu-home-project-card__title {
  width: 207px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Figma: South Yarra — 24px, 120%, letter-spacing 0.5px, uppercase */
.kobu-home-project-card__title .kobu-title-md {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-project-highlight__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 16px;
  font-family: 'Poppins', 'Arial', sans-serif;
}

.kobu-home-project-card .kobu-project-highlight__meta {
  margin-top: 0;
}

.kobu-home-project-card
  .kobu-project-highlight__meta.kobu-home-project-card__pagination {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* ---------- Single project / Project details (Figma 532:6561 — Projects / Details) ---------- */

.kobu-project-detail {
  position: relative;
  background: #2d2d2d;
  color: var(--kobu-text-light);
  overflow-x: clip;
}

.kobu-project-detail__hero {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: calc(var(--kobu-header-flow-gap) + clamp(32px, 8vw, 95px)) 0
    clamp(28px, 4vw, 48px);
  overflow: visible;
  background: transparent;
}

.kobu-project-detail__hero::before {
  display: none;
}

.kobu-project-detail__hero-inner {
  --kobu-project-title-col-gap: 32px;
  --kobu-project-year-col-width: 7rem;
  --kobu-project-title-offset: calc(
    var(--kobu-project-year-col-width) + var(--kobu-project-title-col-gap)
  );
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 10vw, 149px);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kobu-project-detail__title-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px var(--kobu-project-title-col-gap);
}

/* Figma: год — Poppins 14, #979797, в колонку слева от заголовка */
.kobu-project-detail__year {
  flex: 0 0 var(--kobu-project-year-col-width);
  align-self: flex-start;
  margin: 0;
  max-width: var(--kobu-project-year-col-width);
  text-align: right;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #979797;
}

/* Figma style_7MF32D: H1 56px / 100%, uppercase, выравнивание по правому краю + маркер 16px */
.kobu-project-detail__title {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-project-detail__title-text {
  flex: 0 1 auto;
  text-align: left;
}

.kobu-project-detail__title-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 0 10px;
  vertical-align: middle;
  background: #979797;
  border-radius: 50%;
}

/* Details: wrap row gap 40 / column gap 120, блок по Figma ~378px */
.kobu-project-detail__meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 113px) minmax(0, 143px);
  gap: 40px 120px;
  margin: 0;
  margin-left: var(--kobu-project-title-offset);
  padding: 0;
  max-width: 378px;
}

.kobu-project-detail__meta-cell {
  margin: 0;
}

.kobu-project-detail__meta-grid dt {
  margin: 0 0 2px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-project-detail__meta-grid dd {
  margin: 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.22;
  color: #ffffff;
}

/* Lead: full bleed 1440×680 */
.kobu-project-detail__lead-figure {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  line-height: 0;
  background: #d9d9d9;
  min-height: min(680px, 85vh);
}

.kobu-project-detail__lead-img {
  display: block;
  width: 100%;
  height: min(680px, 85vh);
  min-height: min(680px, 85vh);
  object-fit: cover;
}

.kobu-project-detail__lead-figure--video .kobu-project-detail__lead-video {
  display: block;
  width: 100%;
  height: min(680px, 85vh);
  min-height: min(680px, 85vh);
  object-fit: cover;
  background: #0a0a0a;
}

/* Block stream — Figma 532:6562 (Projects / Details): 1140 inner modules */
.kobu-project-detail__stream {
  position: relative;
  z-index: 1;
  padding: clamp(48px, 6vw, 80px) 0 96px;
}

.kobu-project-detail__stream > * + * {
  margin-top: clamp(48px, 6vw, 80px) !important;
}

.kobu-project-detail__stream
  > .kobu-project-detail__media--full
  + .kobu-project-detail__media--full {
  margin-top: clamp(28px, 3.5vw, 48px) !important;
}

.kobu-project-detail__inner-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 10vw, 149px);
}

.kobu-project-detail__inner-wrap--rule {
  padding-top: 8px;
  padding-bottom: 8px;
}

.kobu-project-detail__gallery-slider {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
}

.kobu-project-detail__gallery-slider-head {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.kobu-project-detail__gallery-slider-arrows {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(10px, 2vw, 24px);
  align-items: center;
  gap: 0;
}

.kobu-project-detail__gallery-slider-arrows .kobu-slider-arrow {
  position: relative;
  top: auto;
  transform: none;
  left: auto;
  right: auto;
  pointer-events: auto;
}

.kobu-project-detail__gallery-slider-viewport {
  width: 100%;
  overflow: hidden;
}

.kobu-project-detail__gallery-slider-track {
  width: 100%;
  min-height: 0;
  position: relative;
  aspect-ratio: 1140 / 680;
  background: transparent;
}

.kobu-project-detail__gallery-slide {
  margin: 0;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.kobu-project-detail__gallery-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.kobu-project-detail__gallery-slide-img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.kobu-project-detail__gallery-slide-cap {
  flex-shrink: 0;
  margin: 12px 0 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: #979797;
}

.kobu-project-detail__gallery-slider-dots {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.kobu-project-detail__gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  padding: 0;
  cursor: pointer;
}

.kobu-project-detail__gallery-dot.is-active {
  background: rgba(255, 255, 255, 0.95);
}

.kobu-project-detail__media.kobu-project-detail__media--inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1140px;
  min-height: 0;
  aspect-ratio: 1140 / 680;
  background: transparent;
  line-height: 0;
}

.kobu-project-detail__media--inner .kobu-project-detail__media-img,
.kobu-project-detail__media--inner .kobu-project-detail__media-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
}

.kobu-project-detail__media-cap--inner {
  padding: 16px 0 0;
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
}

.kobu-project-detail__split {
  display: grid;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  gap: 80px;
  align-items: stretch;
}

.kobu-project-detail__split--380-680 {
  grid-template-columns: minmax(0, 380px) minmax(0, 680px);
}

/* Figma 532:6664 — два кадра 530px в ряд, gap 80 → 1140; высота больше 480px, чтобы cover меньше резал низ */
.kobu-project-detail__split--530-530 {
  grid-template-columns: minmax(0, 530px) minmax(0, 530px);
}

.kobu-project-detail__split--530-530.kobu-project-detail__split--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 530px;
  margin-left: 0;
  margin-right: auto;
}

.kobu-project-detail__split--380-680.kobu-project-detail__split--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 680px;
  margin-left: 0;
  margin-right: auto;
}

.kobu-project-detail__split-figure {
  margin: 0;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}

.kobu-project-detail__split--380-680 .kobu-project-detail__split-figure--380 {
  aspect-ratio: 380 / 480;
  max-width: 380px;
}

.kobu-project-detail__split--380-680 .kobu-project-detail__split-figure--680 {
  aspect-ratio: 680 / 480;
  max-width: 680px;
}

.kobu-project-detail__split--530-530 .kobu-project-detail__split-figure--530 {
  aspect-ratio: 530 / 620;
  max-width: 530px;
}

.kobu-project-detail__split--530-530.kobu-project-detail__split--single
  .kobu-project-detail__split-figure--530 {
  max-width: 530px;
}

.kobu-project-detail__split--380-680.kobu-project-detail__split--single
  .kobu-project-detail__split-figure--380 {
  max-width: 380px;
}

.kobu-project-detail__split--380-680.kobu-project-detail__split--single
  .kobu-project-detail__split-figure--680 {
  max-width: 680px;
}

.kobu-project-detail__split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kobu-project-detail__text-block {
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto 0 0;
  padding: 0 clamp(20px, 10vw, 149px);
  padding-left: clamp(20px, 34vw, 530px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  text-align: left;
}

.kobu-project-detail__text-block--right .kobu-project-detail__text-block-title,
.kobu-project-detail__text-block--right .kobu-project-detail__text-block-body {
  width: min(100%, 615px);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.kobu-project-detail__text-block-title {
  margin: 0;
  max-width: 615px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-project-detail__text-block-body {
  margin: 0;
  max-width: 615px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(200, 200, 200, 0.92);
}

.kobu-project-detail__rule {
  margin: 0;
  border: 0;
  border-top: 1.5px solid #ffffff;
  max-width: 1140px;
  width: 100%;
  opacity: 1;
}

.kobu-project-detail__media.kobu-project-detail__media--full {
  margin: 0;
  width: 100%;
  line-height: 0;
  background: #d9d9d9;
  min-height: min(680px, 90vh);
}

.kobu-project-detail__media-img,
.kobu-project-detail__media-video {
  display: block;
  width: 100%;
  height: min(680px, 90vh);
  min-height: min(680px, 90vh);
  object-fit: cover;
}

.kobu-project-detail__media-cap {
  margin: 0;
  padding: 16px clamp(20px, 10vw, 149px) 0;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: #979797;
}

.kobu-project-detail__quote-wrap {
  padding: 48px clamp(20px, 10vw, 149px);
}

/* Figma layout_0ZVATT: узкая колонка цитаты (Poppins) + основной текст (Montserrat 14 / 300) */
.kobu-project-detail__quote-row {
  max-width: 1140px;
  margin: 0 auto;
}

.kobu-project-detail__quote-row--split {
  display: grid;
  grid-template-columns: minmax(0, 379px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}

.kobu-project-detail__quote-row--split .kobu-project-detail__quote {
  margin: 0;
}

.kobu-project-detail__quote-secondary {
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 606px;
}

.kobu-project-detail__quote-secondary-inner {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.kobu-project-detail__quote-row--secondary-only {
  max-width: 1140px;
  margin: 0 auto;
}

.kobu-project-detail__quote-cite--solo {
  display: block;
  margin-top: 20px;
}

.kobu-project-detail__quote {
  margin: 0 auto;
  max-width: 1140px;
  padding: 0;
  border: 0;
  text-align: left;
}

.kobu-project-detail__quote-text {
  margin: 0 0 16px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 1px;
  font-style: normal;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-project-detail__quote-cite {
  display: block;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #979797;
}

.kobu-project-detail__stream > .kobu-project-detail__section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kobu-project-detail__stream
  > .kobu-project-detail__quote-wrap
  + .kobu-project-detail__inner-wrap--rule {
  margin-top: clamp(24px, 3vw, 40px) !important;
}

.kobu-project-detail__stream > .kobu-project-detail__section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.kobu-project-detail__section-head {
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 10vw, 149px) 8px;
  padding-left: clamp(20px, 10vw, 530px);
}

.kobu-project-detail__section-title {
  max-width: 615px;
  margin: 0 0 16px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-project-detail__section-body {
  margin-bottom: 28px;
  max-width: 615px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
}

.kobu-project-detail__text-block-body p,
.kobu-project-detail__section-body p,
.kobu-project-detail__quote-text p,
.kobu-project-detail__quote-secondary-inner p {
  margin: 0 0 1.2em;
}

.kobu-project-detail__text-block-body p:last-child,
.kobu-project-detail__section-body p:last-child,
.kobu-project-detail__quote-text p:last-child,
.kobu-project-detail__quote-secondary-inner p:last-child {
  margin-bottom: 0;
}

.kobu-project-detail__gallery-bleed {
  width: 100%;
  margin-top: 28px;
}

.kobu-project-detail__gallery-bleed .kobu-project-detail__gallery--section {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(20px, 10vw, 149px);
}

@media (max-width: 900px) {
  .kobu-project-detail__gallery-bleed .kobu-project-detail__gallery--section {
    padding: 0 20px;
  }

  .kobu-project-detail__media-cap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .kobu-project-detail__section-head {
    padding-left: 20px;
  }
}

/* Текстовая колонка как в Figma: left 530px, ширина 615 на вьюпорте 1440 */
.kobu-project-detail__body-wrap {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 10vw, 149px)
    clamp(64px, 10vw, 120px);
  padding-left: clamp(20px, 10vw, 530px);
}

.kobu-project-detail__content {
  max-width: 615px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: #ffffff;
}

.kobu-project-detail__content p {
  margin: 0 0 1.2em;
}

.kobu-project-detail__content > *:first-child {
  margin-top: 0;
}

.kobu-project-detail__content h1,
.kobu-project-detail__content h2,
.kobu-project-detail__content h3 {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  margin: 1.5em 0 0.75em;
}

.kobu-project-detail__content > h2:first-child,
.kobu-project-detail__content > h3:first-child {
  margin-top: 0;
}

/* Legacy Interior/Building sections (post editor flow) */
.kobu-project-detail__content .kobu-project-detail__section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kobu-project-detail__gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 615px;
}

.kobu-project-detail__figure {
  margin: 0;
}

.kobu-project-detail__gallery-img {
  width: 100%;
  height: auto;
  display: block;
}

.kobu-project-detail__caption {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--kobu-text-muted);
}

@media (max-width: 900px) {
  body.home::before,
  body.page-template-page-projects-php::before,
  body.page-template-page-contact-php::before,
  body.single-project::before {
    opacity: 0.35;
  }

  .kobu-project-detail__hero-inner {
    padding: 0 24px;
  }

  .kobu-project-detail__meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 32px;
    max-width: none;
    margin-left: 0;
  }

  .kobu-project-detail__title-text {
    text-align: left;
  }

  .kobu-project-detail__body-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .kobu-project-detail__quote-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .kobu-project-detail__quote-row--split {
    grid-template-columns: 1fr;
  }

  .kobu-project-detail__inner-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .kobu-project-detail__split--380-680 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .kobu-project-detail__split--380-680 .kobu-project-detail__split-figure--380,
  .kobu-project-detail__split--380-680 .kobu-project-detail__split-figure--680 {
    aspect-ratio: 16 / 10;
    max-width: none;
  }

  .kobu-project-detail__split--530-530 {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .kobu-project-detail__split--530-530 .kobu-project-detail__split-figure--530 {
    aspect-ratio: 16 / 12;
    max-width: none;
  }

  .kobu-project-detail__text-block {
    padding-left: clamp(24px, 32vw, 530px);
    padding-right: 24px;
    margin-left: 0;
    margin-right: auto;
    align-items: flex-start;
    text-align: left;
  }

  .kobu-project-detail__media--inner {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 520px) {
  .kobu-project-detail__meta-grid {
    grid-template-columns: 1fr;
  }
}

.kobu-project-single {
  display: grid;
  gap: 32px;
}

.kobu-projects-list {
  display: grid;
  gap: 40px;
}

.kobu-project-single__lead img {
  width: 100%;
  max-height: 760px;
  object-fit: cover;
}

.kobu-project-single__content {
  max-width: 760px;
}

.kobu-project-single__gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.kobu-project-single__gallery figure {
  margin: 0;
}

.kobu-project-single__gallery img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.kobu-home-project-card__pagination {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: auto;
  min-width: 114px;
  margin-top: 0;
  align-items: center;
  gap: 8px;
}

.kobu-home-project-card__pagination .kobu-label {
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #979797;
}

.kobu-home-project-card__pagination .kobu-label.is-active {
  color: #ffffff;
}

.kobu-home-project-card__pagination-line {
  flex: 0 0 60px;
  width: 60px;
  height: 0;
  border-top: 1.5px solid #979797;
}

.kobu-home-mission {
  padding: 0;
  /* Кадр крупнее (ближе к слайдеру Our Projects ~680); точные высоты 1/2/3 — из JS */
  --kobu-mission-strip-hover-h: 960px;
  --kobu-mission-strip-1-h: calc(var(--kobu-mission-strip-hover-h) * 0.78);
  --kobu-mission-strip-23-h: calc(var(--kobu-mission-strip-hover-h) * 0.45);
  --kobu-mission-strip-h: var(--kobu-mission-strip-23-h);
  background-color: #2d2d2d;
}

/* Figma “About Us” band: padding 150 150 220, gap 80 между текстом и блоком Services */
.kobu-home-mission__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  padding: 150px 150px 220px;
  box-sizing: border-box;
}

.kobu-home-mission__header {
  margin: 0;
  max-width: 755px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.kobu-home-mission__header .kobu-label {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #979797;
}

.kobu-home-mission__headline {
  margin: 0;
  max-width: 755px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

/* Одна строка grid + три колонки-обёртки: hover на 2/3 не двигает текст в соседней колонке */
.kobu-home-mission__layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  column-gap: 24px;
  align-items: start;
}

.kobu-home-mission__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  min-width: 0;
  width: 100%;
}

.kobu-home-mission__column--left {
  grid-column: 1;
}

.kobu-home-mission__column--mid {
  grid-column: 2;
}

.kobu-home-mission__column--right {
  grid-column: 3;
}

.kobu-home-mission__mid-sync {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  min-width: 0;
  position: relative;
  z-index: 0;
  width: 100%;
}

.kobu-home-mission__right-sync {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  min-width: 0;
  position: relative;
  z-index: 0;
  width: 100%;
}

.kobu-home-mission__strip-shell {
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.kobu-home-mission__stack--mid,
.kobu-home-mission__stack--right {
  position: relative;
  z-index: 2;
  width: 100%;
}

.kobu-home-mission__strip {
  margin: 0;
  overflow: hidden;
  background: #2a2a2a;
}

/*
 * Полоска 1: слот фикс. высоты + figure absolute — hover не тянет левую колонку в потоке.
 * Полоски 2 и 3: figure в потоке внутри auto-слота — при hover высота растёт и текст .01/.02 уезжает вниз.
 * Базовые высоты 1/2/3 задаёт JS (Figma).
 */
.kobu-home-mission__strip-slot {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: visible;
}

.kobu-home-mission__strip-slot--1 {
  height: var(--kobu-mission-strip-1-h);
}

.kobu-home-mission__strip-slot--1 > .kobu-home-mission__strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.kobu-home-mission__strip-slot--1 > .kobu-home-mission__strip--layered {
  height: var(--kobu-mission-strip-1-h);
}

.kobu-home-mission__mid-sync > .kobu-home-mission__strip-slot--23,
.kobu-home-mission__right-sync > .kobu-home-mission__strip-slot--23 {
  height: auto;
  min-height: 0;
}

.kobu-home-mission__mid-sync
  > .kobu-home-mission__strip-slot--23
  > .kobu-home-mission__strip--flow,
.kobu-home-mission__right-sync
  > .kobu-home-mission__strip-slot--23
  > .kobu-home-mission__strip--flow {
  position: relative;
  margin: 0;
  z-index: 1;
  overflow: hidden;
  transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.kobu-home-mission__mid-sync
  > .kobu-home-mission__strip-slot--23
  > .kobu-home-mission__strip--flow {
  height: var(--kobu-mission-strip-2-h, var(--kobu-mission-strip-23-h));
}

.kobu-home-mission__right-sync
  > .kobu-home-mission__strip-slot--23
  > .kobu-home-mission__strip--flow {
  height: var(--kobu-mission-strip-3-h, var(--kobu-mission-strip-23-h));
}

@media (hover: hover) and (pointer: fine) and (min-width: 681px) {
  .kobu-home-mission__strip-slot--1 > .kobu-home-mission__strip--layered:hover {
    height: var(--kobu-mission-strip-hover-h);
    z-index: 4;
  }

  .kobu-home-mission__mid-sync
    > .kobu-home-mission__strip-slot--23
    > .kobu-home-mission__strip--flow:hover,
  .kobu-home-mission__right-sync
    > .kobu-home-mission__strip-slot--23
    > .kobu-home-mission__strip--flow:hover {
    height: var(--kobu-mission-strip-hover-h);
    z-index: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kobu-home-mission__strip-slot--1 > .kobu-home-mission__strip,
  .kobu-home-mission__mid-sync
    > .kobu-home-mission__strip-slot--23
    > .kobu-home-mission__strip--flow,
  .kobu-home-mission__right-sync
    > .kobu-home-mission__strip-slot--23
    > .kobu-home-mission__strip--flow {
    transition: none;
  }
}

.kobu-home-mission__strip-crop {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*
 * Та же логика, что на Contact: высота img = полный hover-кадр, сверху якорь,
 * полоска обрезает низ; при hover выезжает скрытое — масштаб один на все три.
 */
.kobu-home-mission__strip-img {
  display: block;
  width: 300%;
  max-width: none;
  height: var(--kobu-mission-strip-hover-h);
  object-fit: cover;
  object-position: top center;
}

.kobu-home-mission__strip-img--slice1 {
  transform: translate3d(0, 0, 0);
}

.kobu-home-mission__strip-img--slice2 {
  transform: translate3d(-33.33333333333333%, 0, 0);
}

.kobu-home-mission__strip-img--slice3 {
  transform: translate3d(-66.66666666666666%, 0, 0);
}

.kobu-home-mission__stack {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  min-width: 0;
}

.kobu-home-mission__stack--mid,
.kobu-home-mission__stack--right {
  align-items: flex-start;
}

.kobu-home-mission .kobu-service-item {
  border-top: none;
  padding-top: 0;
}

.kobu-home-mission__service {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 0;
  padding-top: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.kobu-home-mission__service-title {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-about-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.kobu-services-list {
  display: grid;
  gap: 22px;
}

.kobu-service-item {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 16px;
  scroll-margin-top: 100px;
}

.kobu-service-item h3 {
  margin: 0 0 8px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 1.5;
}

.kobu-service-item p {
  margin: 0;
  color: var(--kobu-text-light);
  opacity: 0.88;
  font-size: 14px;
  line-height: 1.4;
}

/* Home mission: перекрываем глобальные .kobu-service-item (иначе h3/p ниже по файлу перебивают) */
.kobu-home-mission .kobu-service-item h3.kobu-home-mission__service-title {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-home-mission .kobu-service-item p {
  margin: 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  opacity: 1;
}

/* Figma: column, center, padding 220 150 60 (кнопка «наверх» — fixed, не в потоке) */
.kobu-site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 220px 24px 60px;
}

@media (min-width: 901px) {
  .kobu-site-footer {
    padding: 220px 150px 60px;
  }
}

.kobu-site-footer .kobu-container {
  width: 100%;
}

/* Figma: 4 columns, thin verticals; nav top→bottom in last column */
.kobu-site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  min-height: min(320px, 50vh);
}

.kobu-site-footer__col {
  padding: 0 clamp(12px, 2vw, 20px);
  box-sizing: border-box;
}

.kobu-site-footer__col--brand {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;
  padding-left: 0;
}

.kobu-site-footer__col--gap {
  min-height: 1px;
}

.kobu-site-footer__col--nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 0 8px;
}

.kobu-site-footer__legal {
  margin-top: 0;
  color: #ffffff;
}

.kobu-site-footer__copyright,
.kobu-site-footer__credit {
  margin: 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0;
}

.kobu-site-footer__credit {
  margin-top: 0;
}

.kobu-site-footer__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-transform: none;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}

.kobu-site-footer__menu li {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.kobu-site-footer__menu a {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  text-transform: none;
  text-decoration: none;
  border: 0 !important;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

/* Fixed — back to top (all pages), centered horizontally */
/* Figma: 80×80, border 1px white @ 10% */
.kobu-scroll-top {
  position: fixed;
  z-index: 10050;
  left: 50%;
  bottom: clamp(20px, 4vw, 40px);
  width: 80px;
  height: 80px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease,
    visibility 0.28s,
    background 0.2s ease,
    border-color 0.2s ease;
}

.kobu-scroll-top--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.kobu-scroll-top:hover,
.kobu-scroll-top:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  outline: none;
}

.kobu-scroll-top__icon {
  display: block;
  width: 28px;
  height: 28px;
}

/* —— Contact: CSS Grid — полоска сверху, блок текста снизу (как в Figma) —— */
.kobu-contact {
  background: #2d2d2d;
  color: #ffffff;
  overflow-x: clip;
  /*
   * Панорама: img = высота полного hover-кадра, полоска обрезает низ.
   * Центр: (покой + hover) / 2. Правая полоска чуть ниже левой; при фото у правой
   * колонки min-height = центру + margin-top: auto у текста — низ блока по умолчанию
   * на линии низа центральной картинки (если текст не выше «рамки»).
   */
  --kobu-contact-strip-h: 640px;
  --kobu-contact-strip-h-hover: 1040px;
  --kobu-contact-strip-h-mid: calc(
    (var(--kobu-contact-strip-h) + var(--kobu-contact-strip-h-hover)) / 2
  );
  --kobu-contact-strip-h-right: calc(var(--kobu-contact-strip-h) * 0.88);
}

.kobu-contact__hero {
  position: relative;
  padding: 0;
  overflow: visible;
}

/* Без hero-фото: отступ под фиксированный хедер, иначе заголовки уезжают в логотип/меню */
.kobu-contact__hero--no-photo {
  padding-top: calc(var(--kobu-header-flow-gap) + clamp(48px, 10vw, 100px));
}

.kobu-contact__hero--no-photo .kobu-contact__hero-stack--mid,
.kobu-contact__hero--no-photo .kobu-contact__hero-stack--right,
.kobu-contact__hero--no-photo .kobu-contact__hero-stack--left {
  height: auto;
  min-height: 0;
}

.kobu-contact__hero-grid {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: start;
}

/* С фото: как About — полоски на всю ширину блока 1440 без боковых padding, три колонки 505 | 380 | 502 */
.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-grid {
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding: 0;
}

.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-stack--left {
  width: min(505px, calc(100vw - 40px));
}

.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-stack--mid {
  width: min(380px, calc(100vw - 40px));
}

.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-stack--right {
  width: min(502px, calc(100vw - 40px));
}

.kobu-contact__hero--no-photo .kobu-contact__hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
  justify-content: center;
  padding: 0 min(150px, 8vw);
}

.kobu-contact__hero--no-photo .kobu-contact__hero-stack--mid {
  display: none;
}

.kobu-contact__hero-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(10px, 1.8vw, 18px);
  min-width: 0;
}

.kobu-contact__hero-stack--left {
  align-items: flex-start;
  align-self: start;
}

.kobu-contact__hero-stack--right {
  align-items: flex-end;
}

/* С hero-фото: заголовок под 1-й полоской и контакты под 3-й — по центру колонки, не к левому/правому краю */
.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-stack--left,
.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-stack--right {
  align-items: center;
}

/* Блок заголовка по центру колонки, как раньше: GET IN / TOUCH с отступом второй строки, выравнивание текста слева внутри блока */
.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-col--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: center;
  text-align: left;
  width: fit-content;
  max-width: 380px;
}

.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-title {
  align-items: flex-start;
}

.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-title-row2 {
  padding-left: 44px;
  justify-content: flex-start;
}

/* Блок контактов по центру колонки, текст и строки — вправо */
.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-col--right {
  align-self: center;
  align-items: flex-end;
  text-align: right;
  max-width: 215px;
  width: 100%;
}

.kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__socials {
  justify-content: flex-end;
}

@media (min-width: 1101px) {
  .kobu-contact__hero:not(.kobu-contact__hero--no-photo)
    .kobu-contact__hero-stack--right,
  .kobu-contact__hero:not(.kobu-contact__hero--no-photo)
    .kobu-contact__hero-stack--left {
    min-height: var(--kobu-contact-strip-h-mid);
  }

  .kobu-contact__hero:not(.kobu-contact__hero--no-photo)
    .kobu-contact__hero-col--right {
    flex: 1 1 auto;
    justify-content: center;
    margin-top: 0;
    min-height: 0;
  }

  .kobu-contact__hero:not(.kobu-contact__hero--no-photo)
    .kobu-contact__hero-col--left {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 0;
  }
}

.kobu-contact__strip {
  margin: 0;
  overflow: hidden;
  background: #3a3a3a;
  flex-shrink: 0;
}

.kobu-contact__hero-grid .kobu-contact__strip {
  width: 100%;
  max-width: 100%;
}

.kobu-contact__strip-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  line-height: 0;
}

.kobu-contact__strip--1 {
  width: min(505px, 100%);
  height: var(--kobu-contact-strip-h);
  position: relative;
  overflow: hidden;
  transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.kobu-contact__strip--2 {
  width: min(380px, 100%);
  flex: none;
  height: var(--kobu-contact-strip-h-mid);
  transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.kobu-contact__strip--3 {
  width: min(502px, 100%);
  height: var(--kobu-contact-strip-h-right);
  position: relative;
  overflow: hidden;
  transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

/*
 * Одна картинка на три полоски: как в OUR MISSION — 300% ширины окна + translate по третям,
 * при любой ширине колонок стык по горизонтали совпадает.
 */
.kobu-contact__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  max-width: none;
  height: var(--kobu-contact-strip-h-hover);
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: translate3d(0, 0, 0);
}

.kobu-contact__strip--2 .kobu-contact__img {
  transform: translate3d(-33.33333333333333%, 0, 0);
}

.kobu-contact__strip--3 .kobu-contact__img {
  transform: translate3d(-66.66666666666666%, 0, 0);
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .kobu-contact__strip--1:hover,
  .kobu-contact__strip--3:hover {
    height: var(--kobu-contact-strip-h-hover);
    z-index: 4;
  }

  .kobu-contact__strip--2:hover {
    height: var(--kobu-contact-strip-h-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kobu-contact__strip--1,
  .kobu-contact__strip--2,
  .kobu-contact__strip--3 {
    transition: none;
  }
}

.kobu-contact__hero-col--left {
  max-width: 380px;
  width: 100%;
}

.kobu-contact__hire-label {
  margin: 0 0 4px;
}

.kobu-contact__hero-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-contact__hero-title-line1 {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
}

.kobu-contact__hero-title-row2 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-left: 44px;
}

.kobu-contact__hero-title-line2 {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
}

.kobu-contact__hero-title-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #979797;
  flex-shrink: 0;
  /* Как у About (STUDIO + точка): опускаем маркер относительно строки TOUCH */
  transform: translateY(12px);
}

.kobu-contact__hero-col--right {
  width: 100%;
  max-width: 215px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 38px;
  text-align: right;
}

.kobu-contact__phone {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.kobu-contact__phone a {
  color: #ffffff;
  text-decoration: none;
}

.kobu-contact__phone a:hover,
.kobu-contact__phone a:focus-visible {
  opacity: 0.85;
}

.kobu-contact__subheading {
  margin: 0 0 4px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-contact__follow-block .kobu-contact__subheading {
  margin-bottom: 12px;
}

.kobu-contact__email {
  margin: 0;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.2;
}

.kobu-contact__email a {
  color: #ffffff;
  text-decoration: none;
}

.kobu-contact__email a:hover {
  text-decoration: underline;
}

.kobu-contact__socials {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kobu-contact__social-link {
  display: inline-flex;
  width: 24px;
  height: 24px;
  color: #ffffff;
  align-items: center;
  justify-content: center;
}

.kobu-contact__social-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.kobu-contact__notice {
  max-width: 1140px;
  margin: 0 auto;
  padding: 16px min(150px, 8vw);
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
}

.kobu-contact__notice--ok {
  color: #b8e0b8;
}

.kobu-contact__notice--err {
  color: #ffb3b3;
}

.kobu-contact__main {
  padding: clamp(72px, 10vw, 140px) 0 clamp(80px, 12vw, 160px);
}

.kobu-contact__main-inner {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 102px);
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 min(150px, 8vw);
  box-sizing: border-box;
}

.kobu-contact__mission {
  margin: 0;
  max-width: 278px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-contact__form-wrap {
  max-width: 760px;
  width: 100%;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.kobu-contact__form-head {
  margin-bottom: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.kobu-contact__form-title {
  margin: 0 0 16px;
  width: 100%;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  text-transform: uppercase;
  text-align: left;
  color: #ffffff;
}

.kobu-contact__form-intro {
  margin: 0;
  width: 100%;
  max-width: 500px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
  text-align: left;
}

.kobu-contact__form {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  align-items: stretch;
}

.kobu-contact__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.kobu-contact__label {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-contact__input,
.kobu-contact__textarea {
  width: 100%;
  margin: 0;
  padding: 8px 0 10px;
  background: transparent;
  border: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  outline: none;
}

.kobu-contact__textarea {
  min-height: 72px;
  resize: vertical;
}

.kobu-contact__rule {
  display: block;
  width: 100%;
  height: 0;
  border-top: 1.5px solid #ffffff;
}

.kobu-contact__form-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 8px;
}

.kobu-contact__send {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 0;
  background: #979797;
  color: #ffffff;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.kobu-contact__send:hover,
.kobu-contact__send:focus-visible {
  background: #a8a8a8;
  outline: none;
}

.kobu-contact__send-arrow {
  font-size: 14px;
  line-height: 1;
}

.kobu-contact__page-content {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

@media (max-width: 900px) {
  .kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-grid {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
    width: 100%;
  }

  .kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-stack--left,
  .kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-stack--mid,
  .kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-stack--right {
    width: 100%;
  }

  .kobu-contact__hero--no-photo .kobu-contact__hero-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    justify-items: stretch;
  }

  .kobu-contact__hero-stack--left {
    align-self: stretch;
  }

  .kobu-contact__hero-stack--mid,
  .kobu-contact__hero-stack--right {
    height: auto;
  }

  .kobu-contact__strip--2 {
    flex: none;
    height: var(--kobu-contact-strip-h-mid);
    min-height: 0;
    transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .kobu-contact__hero-stack--right {
    align-items: flex-start;
  }

  .kobu-contact__hero-col--right {
    align-items: flex-start;
    text-align: left;
    max-width: none;
  }

  .kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-col--right {
    align-self: stretch;
    align-items: flex-start;
    text-align: left;
    max-width: none;
  }

  .kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__socials {
    justify-content: flex-start;
  }

  .kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-col--left {
    align-self: stretch;
    width: 100%;
  }
}

@media (max-width: 900px) {
  .kobu-contact {
    --kobu-contact-strip-h: 280px;
    --kobu-contact-strip-h-hover: 420px;
  }

  .kobu-contact__hero-grid {
    padding: 0 min(150px, 8vw) clamp(12px, 3vw, 24px);
  }

  .kobu-contact__hero:not(.kobu-contact__hero--no-photo) .kobu-contact__hero-grid {
    padding-left: min(24px, 6vw);
    padding-right: min(24px, 6vw);
  }

  .kobu-contact__strip--1,
  .kobu-contact__strip--2,
  .kobu-contact__strip--3 {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .kobu-contact__strip--1 {
    height: var(--kobu-contact-strip-h);
  }

  .kobu-contact__strip--3 {
    height: var(--kobu-contact-strip-h-right);
  }

  .kobu-contact__strip--2 {
    flex: none;
    height: var(--kobu-contact-strip-h-mid);
    min-height: 0;
    transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .kobu-contact__img {
    width: 100%;
    left: 0;
    transform: none;
    object-position: top center;
  }

  .kobu-contact__main-inner {
    grid-template-columns: 1fr;
  }

  .kobu-contact__mission {
    max-width: none;
  }

  .kobu-contact__form-title,
  .kobu-contact__form-intro {
    text-align: left;
  }

  .kobu-contact__form-head,
  .kobu-contact__form-wrap {
    align-items: flex-start;
  }

  .kobu-contact__form-title {
    text-align: left;
  }

  .kobu-contact__form-wrap {
    justify-self: start;
  }

  @media (hover: hover) and (pointer: fine) {
    .kobu-contact__strip--1:hover,
    .kobu-contact__strip--3:hover {
      height: var(--kobu-contact-strip-h-hover);
    }

    .kobu-contact__strip--2:hover {
      height: var(--kobu-contact-strip-h-hover);
      min-height: 0;
    }
  }
}

/* Screen-reader-only heading (Projects landing carousel region) */
.kobu-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* —— Projects Page — Figma 528:4476: ALL = сетка; INTERIOR / BUILDING = карусель как на Home —— */
.kobu-projects-page {
  padding: 0;
  position: relative;
  background-color: #2d2d2d;
  overflow: hidden;
}

.kobu-projects-page__lines {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1140px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.kobu-projects-page__lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.kobu-projects-page__lines span:nth-child(1) {
  left: 0;
}

.kobu-projects-page__lines span:nth-child(2) {
  left: 380px;
}

.kobu-projects-page__lines span:nth-child(3) {
  left: 760px;
}

.kobu-projects-page__lines span:nth-child(4) {
  right: 0;
}

.kobu-projects-page__inner {
  width: 1440px;
  max-width: 100%;
  margin: 0 auto;
  padding: calc(var(--kobu-header-flow-gap) + 60px) 150px 160px;
  box-sizing: border-box;
}

@media (min-width: 901px) {
  .kobu-projects-page__inner {
    padding-top: calc(var(--kobu-header-flow-gap) + 100px);
  }
}

.kobu-projects-page__hero {
  margin-bottom: 40px;
}

.kobu-projects-page__headline {
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 1;
}

.kobu-projects-page__headline-line1 {
  display: block;
}

.kobu-projects-page__headline-line2 {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  margin-left: 120px;
}

.kobu-projects-page__intro {
  margin: 0;
  margin-left: calc(0.8 * clamp(200px, 38vw, 560px));
  max-width: 565px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-projects-page__landing {
  position: relative;
  z-index: 1;
}

/* Только одна зона контента: при ALL — сетка; при INTERIOR/BUILDING — карусель (то же место в потоке, без простора снизу) */
.kobu-projects-page__landing[data-active-filter='all']
  .kobu-projects-page__grid {
  display: flex !important;
}

.kobu-projects-page__landing[data-active-filter='all']
  [data-kobu-projects-carousel-panel] {
  display: none !important;
}

.kobu-projects-page__landing[data-active-filter='interior']
  .kobu-projects-page__grid,
.kobu-projects-page__landing[data-active-filter='building']
  .kobu-projects-page__grid {
  display: none !important;
}

.kobu-projects-page__landing[data-active-filter='interior']
  [data-kobu-projects-carousel-panel],
.kobu-projects-page__landing[data-active-filter='building']
  [data-kobu-projects-carousel-panel] {
  display: block !important;
}

.kobu-projects-page__filters-wrap {
  margin-bottom: 48px;
}

.kobu-projects-page__filters-wrap .kobu-home-projects__filters {
  position: relative;
  padding-left: 3px;
  padding-bottom: 0;
}

.kobu-projects-page__filters-wrap .kobu-home-projects__filter {
  color: #979797;
}

.kobu-projects-page__filters-wrap .kobu-home-projects__filter:hover {
  color: #ffffff;
}

.kobu-projects-page__filters-wrap .kobu-home-projects__filter.is-active {
  color: #ffffff;
}

.kobu-projects-page__filters-wrap .kobu-home-projects__filter.is-active::after {
  border-bottom-color: #ffffff;
}

/* ALL: скриншот / 3 колонки (380+gap) — одна сетка на chunk, без перекрытий (display:contents) */
.kobu-projects-page__grid {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 28px);
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.kobu-projects-page__chunk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  /* Без «натягивания» меты вверх — перекрытия; микрозазор між рядами */
  row-gap: 0;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: start;
  overflow: visible;
}

.kobu-projects-page__chunk-hero,
.kobu-projects-page__chunk-grid {
  display: contents;
}

.kobu-projects-page__chunk .kobu-projects-page__item--p1,
.kobu-projects-page__chunk .kobu-projects-page__item--p2,
.kobu-projects-page__chunk .kobu-projects-page__item--p3,
.kobu-projects-page__chunk .kobu-projects-page__item--p4,
.kobu-projects-page__chunk .kobu-projects-page__item--p5,
.kobu-projects-page__chunk .kobu-projects-page__item--p6,
.kobu-projects-page__chunk .kobu-projects-page__item--p7,
.kobu-projects-page__chunk .kobu-projects-page__item--p8 {
  display: contents;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p1
  > .kobu-projects-page__item-inner,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p2
  > .kobu-projects-page__item-inner,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p3
  > .kobu-projects-page__item-inner,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p4
  > .kobu-projects-page__item-inner,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p5
  > .kobu-projects-page__item-inner,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p6
  > .kobu-projects-page__item-inner,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p7
  > .kobu-projects-page__item-inner,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p8
  > .kobu-projects-page__item-inner {
  display: contents;
}

/* p1 — широкое фото col 1–2, подпись col 3 сверху */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p1
  .kobu-projects-page__media-link {
  grid-column: 1 / 3;
  grid-row: 1;
  min-width: 0;
  margin-bottom: clamp(20px, 2.8vw, 44px);
  position: relative;
  z-index: 2;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p1
  .kobu-projects-page__meta {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* p3 — портрет col3 на рядки 1–2: низ збігається з низом кадру p2; мета в ряд 3 (col3), без наїзду на p2 */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p3
  .kobu-projects-page__media-link {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: clamp(72px, 12vw, 200px);
  padding-top: clamp(8px, 1.2vw, 20px);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p3
  .kobu-projects-page__meta {
  grid-column: 3;
  grid-row: 3;
  align-self: start;
  min-width: 0;
  margin: 0;
  margin-top: 0;
  padding-top: 12px;
}

/* p2 — фото по центру двох колонок; тайтл і рік зліва в тій самій ширині й вирівнюванні, що й картка (68%, center) */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p2
  .kobu-projects-page__media-link {
  grid-column: 1 / 3;
  grid-row: 2;
  min-width: 0;
  max-width: min(100%, 68%);
  width: 100%;
  justify-self: center;
  margin-top: clamp(10px, 1.4vw, 22px);
  margin-left: 0;
  position: relative;
  z-index: 1;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p2
  .kobu-projects-page__meta {
  grid-column: 1 / 3;
  grid-row: 3;
  min-width: 0;
  margin: 0;
  max-width: min(100%, 68%);
  width: 100%;
  justify-self: center;
  align-self: start;
  margin-left: 0;
  margin-top: 0;
  transform: none;
  padding-top: 20px;
  text-align: left;
  position: relative;
  z-index: 2;
}

/* p4 Toorak + p5 Richmond — більший min-height p5; ряд 4–5 спільний — p4 мета компенсується margin (лише col 2–4) */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p5
  .kobu-projects-page__media-link {
  grid-column: 1;
  grid-row: 4 / 6;
  align-self: stretch;
  min-height: clamp(520px, 62vh, 920px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: clamp(120px, 15vw, 300px);
  padding-top: clamp(8px, 1.2vw, 20px);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* p4 Toorak: картка зверху ряду 4; margin-bottom < 0 лише col 2–4 — підтягує мету вгору, p5 не змінюється */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p4
  .kobu-projects-page__media-link {
  grid-column: 2 / 4;
  grid-row: 4;
  align-self: start;
  min-width: 0;
  width: 100%;
  max-width: none;
  justify-self: stretch;
  position: relative;
  z-index: 1;
  margin-top: clamp(8px, 1.2vw, 28px);
  margin-bottom: clamp(-108px, -11vw, -30px);
}

/* Richmond: підпис під портретом, справа внизу колонки 1 (ряд 6 — після смуги 4–5) */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p5
  .kobu-projects-page__meta {
  grid-column: 1;
  grid-row: 6;
  align-self: start;
  justify-self: end;
  min-width: 0;
  max-width: min(220px, 42vw);
  margin: 0;
  padding-bottom: 0;
  margin-top: 0;
  padding-top: clamp(8px, 1vw, 14px);
  text-align: right;
  position: relative;
  z-index: 3;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p5
  .kobu-projects-page__caption {
  align-items: flex-end;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p5
  .kobu-projects-page__year {
  text-align: right;
  align-self: flex-end;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p4
  .kobu-projects-page__meta {
  grid-column: 2 / 4;
  grid-row: 5;
  align-self: start;
  justify-self: stretch;
  min-width: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  /* лише col 2–4: компенсація після розтягу p5 — тайтл/рік ближче до Toorak */
  margin-top: clamp(-118px, -12vw, -36px);
  margin-bottom: clamp(8px, 1vw, 18px);
  padding-top: clamp(6px, 0.9vw, 12px);
  text-align: left;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p4
  .kobu-projects-page__caption {
  align-items: flex-start;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p4
  .kobu-projects-page__year {
  text-align: left;
  align-self: flex-start;
}

/* p6 — position+top (grid часто ігнорує margin-top); однаковий зсув для кадру й мети, лише col 2–4 */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p6
  .kobu-projects-page__media-link {
  grid-column: 2 / 4;
  grid-row: 6;
  position: relative;
  z-index: 4;
  min-width: 0;
  width: calc(100% / 1.5);
  max-width: calc(100% / 1.5);
  justify-self: end;
  margin-top: 0;
  margin-bottom: 0;
  top: clamp(-272px, -26.5vw, -102px);
  transform: none;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p6
  .kobu-projects-page__meta {
  grid-column: 2 / 4;
  grid-row: 7;
  position: relative;
  z-index: 4;
  align-self: start;
  justify-self: end;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: calc(100% / 1.5);
  max-width: calc(100% / 1.5);
  margin: 0;
  margin-top: 0;
  margin-bottom: clamp(-70px, -6vw, -18px);
  padding-top: clamp(4px, 0.55vw, 10px);
  text-align: left;
  top: clamp(-272px, -26.5vw, -102px);
  transform: none;
}

/* p7 — широкое фото 1–2, подпись col3 сверху зліва (Figma) */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p7
  .kobu-projects-page__media-link {
  grid-column: 1 / 3;
  grid-row: 8;
  min-width: 0;
  margin-top: clamp(-176px, -16vw, -54px);
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p7
  .kobu-projects-page__meta {
  grid-column: 3;
  grid-row: 8;
  align-self: start;
  min-width: 0;
  margin: 0;
  text-align: left;
}

/* p8 — подпись над широким фото, прижата к правому краю (как в макете) */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p8
  .kobu-projects-page__media-link {
  grid-column: 1 / -1;
  grid-row: 10;
  min-width: 0;
  margin-top: 0;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p8
  .kobu-projects-page__meta {
  grid-column: 1 / -1;
  grid-row: 9;
  align-self: end;
  justify-self: end;
  min-width: 0;
  margin: 0;
  text-align: right;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p1
  .kobu-projects-page__caption {
  align-items: flex-start;
  font-size: 24px;
  line-height: 1.2;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p7
  .kobu-projects-page__caption {
  align-items: flex-start;
  font-size: 24px;
  line-height: 1.2;
  transform: translateY(clamp(-208px, -12.425vw, -115px));
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p8
  .kobu-projects-page__caption {
  align-items: flex-end;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p1
  .kobu-projects-page__year {
  text-align: left;
  align-self: flex-start;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p7
  .kobu-projects-page__year {
  text-align: left;
  align-self: flex-start;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p8
  .kobu-projects-page__year {
  text-align: right;
  align-self: flex-end;
}

.kobu-projects-page__chunk .kobu-projects-page__caption {
  gap: 2px;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p2
  .kobu-projects-page__caption,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p3
  .kobu-projects-page__caption,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p4
  .kobu-projects-page__caption,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p5
  .kobu-projects-page__caption,
.kobu-projects-page__chunk
  .kobu-projects-page__item--p6
  .kobu-projects-page__caption {
  font-size: 20px;
  line-height: 1.2;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p2
  .kobu-projects-page__caption {
  align-items: flex-start;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p6
  .kobu-projects-page__caption {
  align-items: flex-start;
  align-self: stretch;
  text-align: left;
  width: 100%;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p6
  .kobu-projects-page__title {
  text-align: left;
  align-self: flex-start;
  width: 100%;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p6
  .kobu-projects-page__year {
  text-align: left;
  align-self: flex-start;
  width: 100%;
}

.kobu-projects-page__item {
  min-width: 0;
}

.kobu-projects-page__item-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
}

/*
 * Вертикальний ритм: висота рядів гріда ≈ max-height медіа.
 * Обмежуємо «коробки» жорстко (px + vh), без негативних margin на картках — сотні px менше по висоті чанка.
 */
.kobu-projects-page__chunk
  .kobu-projects-page__item--p1
  .kobu-projects-page__media {
  aspect-ratio: 910 / 620;
  max-height: min(360px, 42vh, 78vw);
  width: 100%;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p2
  .kobu-projects-page__media {
  aspect-ratio: 653 / 495;
  max-height: min(220px, 28vh, 68vw);
  width: 100%;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p3
  .kobu-projects-page__media {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-height: none;
  aspect-ratio: unset;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p4
  .kobu-projects-page__media {
  aspect-ratio: 1205 / 620;
  max-height: min(360px, 42vh, 92vw);
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p5
  .kobu-projects-page__media {
  flex: 1 1 auto;
  min-height: clamp(440px, 52vh, 780px);
  width: 100%;
  max-height: none;
  aspect-ratio: unset;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p6
  .kobu-projects-page__media {
  aspect-ratio: 637 / 455;
  max-height: min(150px, 20vh, 80vw);
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p7
  .kobu-projects-page__media {
  aspect-ratio: 910 / 620;
  max-height: min(360px, 42vh, 78vw);
  width: 100%;
}

.kobu-projects-page__chunk
  .kobu-projects-page__item--p8
  .kobu-projects-page__media {
  aspect-ratio: 1095 / 680;
  max-height: min(380px, 44vh, 94vw);
}

.kobu-projects-page__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.kobu-projects-page__media-link--static {
  pointer-events: none;
}

.kobu-projects-page__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

.kobu-projects-page__img,
.kobu-projects-page__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.45s ease;
}

.kobu-projects-page__media:hover .kobu-projects-page__img,
.kobu-projects-page__media:hover .kobu-projects-page__video {
  filter: grayscale(0%);
}

.kobu-projects-page__media:hover .kobu-home-project-card__cta,
.kobu-projects-page__media-link:focus-visible .kobu-home-project-card__cta {
  opacity: 1;
  pointer-events: auto;
}

.kobu-projects-page__media-link:hover .kobu-home-project-card__cta,
.kobu-projects-page__media-link:focus-visible .kobu-home-project-card__cta {
  background: rgba(18, 18, 18, 0.32);
}

.kobu-projects-page__grid .kobu-home-project-card__cta {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}

.kobu-projects-page__grid .kobu-home-project-card__cta-project {
  letter-spacing: 1px;
}

.kobu-projects-page__meta {
  min-width: 0;
  margin: 0;
}

.kobu-projects-page__caption {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-projects-page__title {
  display: block;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  width: 100%;
}

.kobu-projects-page__year {
  display: block;
  margin: 0;
  padding: 0;
  align-self: flex-start;
  text-align: left;
  width: 100%;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 17px;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0;
}

.kobu-projects-page__empty-hint {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--kobu-text-muted);
}

/* INTERIOR / BUILDING: карусель */
.kobu-projects-page__carousel-shell {
  margin-top: 0;
}

.kobu-projects-page__carousel-shell[hidden] {
  display: none !important;
}

.kobu-projects-page__our-projects.kobu-home-projects {
  padding: 0;
  margin-top: 0;
}

.kobu-projects-page__our-projects .kobu-home-projects__inner {
  padding: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
}

.kobu-projects-page__carousel-title-row {
  justify-content: flex-end;
  width: 100%;
}

@media (max-width: 900px) {
  .kobu-projects-page__lines {
    display: none;
  }

  .kobu-projects-page__inner {
    padding: calc(var(--kobu-header-flow-gap) + 80px) 24px 100px;
  }

  .kobu-projects-page__headline-line2,
  .kobu-projects-page__intro {
    margin-left: 0;
  }

  .kobu-projects-page__grid {
    gap: clamp(48px, 10vw, 80px);
  }

  .kobu-projects-page__chunk {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .kobu-projects-page__chunk-hero,
  .kobu-projects-page__chunk-grid {
    display: flex;
    flex-direction: column;
    gap: 48px;
    width: 100%;
  }

  .kobu-projects-page__chunk .kobu-projects-page__item--p1,
  .kobu-projects-page__chunk .kobu-projects-page__item--p2,
  .kobu-projects-page__chunk .kobu-projects-page__item--p3,
  .kobu-projects-page__chunk .kobu-projects-page__item--p4,
  .kobu-projects-page__chunk .kobu-projects-page__item--p5,
  .kobu-projects-page__chunk .kobu-projects-page__item--p6,
  .kobu-projects-page__chunk .kobu-projects-page__item--p7,
  .kobu-projects-page__chunk .kobu-projects-page__item--p8 {
    display: block;
    width: 100%;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p1
    > .kobu-projects-page__item-inner,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p2
    > .kobu-projects-page__item-inner,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p3
    > .kobu-projects-page__item-inner,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p4
    > .kobu-projects-page__item-inner,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p5
    > .kobu-projects-page__item-inner,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    > .kobu-projects-page__item-inner,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p7
    > .kobu-projects-page__item-inner,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p8
    > .kobu-projects-page__item-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p1
    .kobu-projects-page__media-link,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p1
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p2
    .kobu-projects-page__media-link,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p2
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p3
    .kobu-projects-page__media-link,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p3
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p4
    .kobu-projects-page__media-link,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p4
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p5
    .kobu-projects-page__media-link,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p5
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    .kobu-projects-page__media-link,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p7
    .kobu-projects-page__media-link,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p7
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p8
    .kobu-projects-page__media-link,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p8
    .kobu-projects-page__meta {
    grid-column: unset;
    grid-row: unset;
    margin-top: 0;
    align-self: stretch;
    min-width: 0;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p1
    .kobu-projects-page__media-link {
    z-index: auto;
    margin-bottom: 0;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p2
    .kobu-projects-page__media-link {
    max-width: none;
    justify-self: stretch;
    margin-top: 0;
    margin-left: 0;
    transform: none;
    z-index: auto;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p2
    .kobu-projects-page__meta {
    max-width: none;
    justify-self: stretch;
    margin-top: 0;
    margin-left: 0;
    transform: none;
    padding-top: 0;
    z-index: auto;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p3
    .kobu-projects-page__media-link {
    margin-top: 0;
    padding-top: 0;
    display: block;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p3
    .kobu-projects-page__media {
    flex: none;
    aspect-ratio: 472 / 750;
    max-height: min(46vh, 380px);
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p3
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p4
    .kobu-projects-page__meta,
  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    .kobu-projects-page__meta {
    margin-top: 0;
    margin-bottom: 0;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p4
    .kobu-projects-page__media-link {
    max-width: none;
    width: 100%;
    justify-self: stretch;
    align-self: stretch;
    margin-top: 0;
    margin-bottom: 0;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p4
    .kobu-projects-page__meta {
    max-width: none;
    justify-self: stretch;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p7
    .kobu-projects-page__meta {
    text-align: left;
    align-self: stretch;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p7
    .kobu-projects-page__caption {
    align-items: flex-start;
    transform: none;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p7
    .kobu-projects-page__year {
    text-align: left;
    align-self: flex-start;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p8
    .kobu-projects-page__meta {
    justify-self: stretch;
    text-align: left;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p8
    .kobu-projects-page__caption {
    align-items: flex-start;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p8
    .kobu-projects-page__year {
    text-align: left;
    align-self: flex-start;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p5
    .kobu-projects-page__media-link {
    margin-top: 0;
    min-height: 0;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p5
    .kobu-projects-page__media {
    min-height: 0;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    .kobu-projects-page__media-link {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
    margin-top: 0;
    margin-bottom: 0;
    top: auto;
    transform: none;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    .kobu-projects-page__meta {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    text-align: left;
    margin-top: 0;
    padding-top: 16px;
    display: block;
    top: auto;
    transform: none;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    .kobu-projects-page__caption {
    align-items: flex-start;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    .kobu-projects-page__year {
    text-align: left;
    align-self: flex-start;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p6
    .kobu-projects-page__media {
    max-height: min(26vh, 220px);
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p5
    .kobu-projects-page__meta {
    max-width: none;
    padding-bottom: 0;
    text-align: left;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p5
    .kobu-projects-page__caption {
    align-items: flex-start;
  }

  .kobu-projects-page__chunk
    .kobu-projects-page__item--p5
    .kobu-projects-page__year {
    text-align: left;
    align-self: flex-start;
  }
}

.kobu-page-hero {
  padding: calc(var(--kobu-header-flow-gap) + 120px) 0 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kobu-page-content {
  padding: 60px 0 100px;
}

/* ——— About page (Figma 568:4666) ——— */
.kobu-about-page {
  position: relative;
  background: #2d2d2d;
  color: #ffffff;
  /* visible: full-bleed gallery row выходит за контейнер 1140px */
  overflow-x: visible;
}

.kobu-about-page__lines {
  position: absolute;
  inset: 0;
  width: 1140px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  pointer-events: none;
  opacity: 0.1;
  z-index: 0;
}

.kobu-about-page__lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #fff;
}

.kobu-about-page__lines span:nth-child(1) {
  left: 0;
}
.kobu-about-page__lines span:nth-child(2) {
  left: 33.3333%;
}
.kobu-about-page__lines span:nth-child(3) {
  left: 66.6666%;
}
.kobu-about-page__lines span:nth-child(4) {
  right: 0;
}

.kobu-about-page__hero {
  position: relative;
  z-index: 1;
  padding: 0;
}

.kobu-about-page__hero--no-photo .kobu-about-page__strip {
  display: none;
}

.kobu-about-page__hero--no-photo .kobu-about-page__hero-grid {
  min-height: 0;
  padding-top: calc(var(--kobu-header-flow-gap, 105px) + 24px);
}

.kobu-about-page__hero-grid {
  display: flex;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  align-items: start;
  /* With hero photo: strips flush to top of viewport (same idea as Contact). */
  padding-top: 0;
}

.kobu-about-page__hero-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}

.kobu-about-page__hero-stack--left {
  align-items: flex-start;
  width: min(505px, calc(100vw - 40px));
}

.kobu-about-page__hero-stack--right {
  align-items: flex-start;
  width: min(502px, calc(100vw - 40px));
}

.kobu-about-page__hero-stack--mid {
  width: min(380px, calc(100vw - 40px));
}

.kobu-about-page {
  --about-strip-h: 590px;
  --about-strip-h-mid: 840px;
  --about-strip-h-right: 719px;
  --about-strip-h-hover: 1040px;
}

.kobu-about-page__strip {
  position: relative;
  margin: 0;
  overflow: hidden;
  transition: height 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.kobu-about-page__strip-inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  line-height: 0;
}

.kobu-about-page__strip--1 {
  width: min(505px, 100%);
  height: var(--about-strip-h);
}

.kobu-about-page__strip--2 {
  width: min(380px, 100%);
  height: var(--about-strip-h-mid);
}

.kobu-about-page__strip--3 {
  width: min(502px, 100%);
  height: var(--about-strip-h-right);
}

@media (min-width: 901px) {
  .kobu-about-page__hero:not(.kobu-about-page__hero--no-photo)
    .kobu-about-page__hero-stack--right {
    min-height: var(--about-strip-h-mid);
  }

  .kobu-about-page__hero-lead {
    margin-top: auto;
    padding-top: 16px;
  }
}

/* Natural order: col1 left third, col2 center, col3 right third */
.kobu-about-page__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  max-width: none;
  height: var(--about-strip-h-hover);
  object-fit: cover;
  object-position: top center;
  display: block;
  transform: translate3d(0, 0, 0);
}

/* Левая треть: якорь слева — меньше «съедания» важной части кадра при object-fit: cover */
.kobu-about-page__strip--1 .kobu-about-page__img {
  object-position: left top;
}

.kobu-about-page__strip--2 .kobu-about-page__img {
  transform: translate3d(-33.33333333333333%, 0, 0);
  object-position: center top;
}

.kobu-about-page__strip--3 .kobu-about-page__img {
  transform: translate3d(-66.66666666666666%, 0, 0);
  object-position: right top;
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .kobu-about-page__strip--1:hover,
  .kobu-about-page__strip--3:hover {
    height: var(--about-strip-h-hover);
    z-index: 4;
  }

  .kobu-about-page__strip--2:hover {
    height: var(--about-strip-h-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kobu-about-page__strip--1,
  .kobu-about-page__strip--2,
  .kobu-about-page__strip--3 {
    transition: none;
  }
}

.kobu-about-page__hero-title-block {
  margin-top: 24px;
  max-width: 309px;
  width: fit-content;
  align-self: flex-end;
}

.kobu-about-page__hero-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: #ffffff;
}

/* Первая строка (ABOUT KOBU): к левому краю блока */
.kobu-about-page__hero-title-line1 {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  align-self: flex-start;
  text-align: left;
}

/* Вторая строка (STUDIO + точка): с отступом вправо ближе к картинке */
.kobu-about-page__hero-title-row2 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding-left: 80px;
  padding-right: 0;
}

.kobu-about-page__hero-title-line2 {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
}

.kobu-about-page__hero-title-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #979797;
  flex-shrink: 0;
  transform: translateY(12px);
}

.kobu-about-page__hero-lead {
  margin: 24px 0 0;
  max-width: 379px;
  width: 100%;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-align: left;
}

.kobu-about-page__inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  padding: 100px min(150px, 8vw) 0;
  box-sizing: content-box;
}

.kobu-about-page__numbers {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 80px;
}

.kobu-about-page__numbers-head {
  max-width: 736px;
}

.kobu-about-page__numbers-kicker {
  margin: 0 0 8px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #979797;
}

.kobu-about-page__numbers-statement {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-about-page__stats {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.kobu-about-page__stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 84px;
  max-width: 760px;
  position: relative;
}

.kobu-about-page__stat {
  flex: 0 0 auto;
  width: 295px;
  position: relative;
  min-height: 64px;
}

.kobu-about-page__stat:nth-child(2) {
  width: 183px;
}

.kobu-about-page__stat:nth-child(4) {
  width: 278px;
}

.kobu-about-page__stat-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
}

.kobu-about-page__stat-num {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 80px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #979797;
  flex: 0 0 auto;
  min-width: 0.6em;
}

.kobu-about-page__stat-label {
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  max-width: 120px;
}

.kobu-about-page__featured {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: none;
  height: 680px;
  overflow: hidden;
  background: #d9d9d9;
  margin-bottom: 100px;
}

.kobu-about-page__featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.kobu-about-page__featured-placeholder {
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}

.kobu-about-page__process {
  margin-bottom: 120px;
}

.kobu-about-page__process-layout {
  position: relative;
  padding-left: 0;
  max-width: 1140px;
}

@media (min-width: 901px) {
  .kobu-about-page__process-layout {
    padding-left: 380px;
    min-height: 200px;
  }
}

.kobu-about-page__accordion {
  max-width: 760px;
}

/* About process list: title only by default; hover/focus-within reveals text + CTA */
.kobu-about-page__process-row {
  border-bottom: 1.5px solid #ffffff;
  transition: background-color 0.3s ease;
}

.kobu-about-page__process-row:hover,
.kobu-about-page__process-row:focus-within {
  background-color: rgba(255, 255, 255, 0.05);
}

.kobu-about-page__process-head {
  padding: 44px 0 48px;
}

.kobu-about-page__process-title {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 3.5vw, 40px);
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
}

.kobu-about-page__process-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    padding-bottom 0.3s ease,
    margin-top 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .kobu-about-page__process-row:hover .kobu-about-page__process-body,
  .kobu-about-page__process-row:focus-within .kobu-about-page__process-body {
    max-height: 360px;
    opacity: 1;
    margin-top: -12px;
    padding-bottom: 56px;
  }
}

@media (hover: none), (pointer: coarse) {
  .kobu-about-page__process-body {
    max-height: none;
    opacity: 1;
    margin-top: -12px;
    padding-bottom: 48px;
  }

  .kobu-about-page__process-head {
    padding-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kobu-about-page__process-body,
  .kobu-about-page__process-row {
    transition: none;
  }
}

.kobu-about-page__details-text {
  margin: 0;
  max-width: 500px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #ffffff;
}

.kobu-about-page__details-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  width: fit-content;
}

.kobu-about-page__details-cta:hover,
.kobu-about-page__details-cta:focus-visible {
  opacity: 0.85;
}

.kobu-about-page__process-note {
  margin: 40px 0 0;
  max-width: 380px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

@media (min-width: 901px) {
  .kobu-about-page__process-note {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
  }
}

.kobu-about-page__gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 60px;
  margin-bottom: 80px;
  width: 100%;
  max-width: 100%;
}

.kobu-about-page__gallery-note {
  margin: 0;
  max-width: 380px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-align: right;
}

.kobu-about-page__gallery-row {
  position: relative;
  overflow: hidden;
  /* на всю ширину вьюпорта: лента «уезжает» за края страницы */
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.kobu-about-page__gallery-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  width: max-content;
  will-change: transform;
  animation: kobuAboutGalleryScroll 36s linear infinite;
}

.kobu-about-page__gallery-cell {
  margin: 0;
  flex: 0 0 470px;
  max-width: 100%;
  height: 600px;
  overflow: hidden;
  background: #d9d9d9;
}

.kobu-about-page__gallery-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kobu-about-page__gallery-ph {
  display: block;
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}

@keyframes kobuAboutGalleryScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-50% - 15px), 0, 0);
  }
}

@media (max-width: 900px) {
  .kobu-about-page__hero-grid {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
    gap: 24px;
  }

  .kobu-about-page__hero--no-photo .kobu-about-page__hero-grid {
    padding-top: calc(var(--kobu-header-flow-gap, 76px) + 12px);
  }

  .kobu-about-page__hero-stack--right {
    align-items: flex-start;
  }

  .kobu-about-page__hero-lead {
    max-width: none;
  }

  .kobu-about-page {
    --about-strip-h: 280px;
    --about-strip-h-mid: 420px;
    --about-strip-h-right: 320px;
    --about-strip-h-hover: 520px;
  }

  .kobu-about-page__stats-grid {
    gap: 32px 24px;
  }

  .kobu-about-page__stats {
    justify-content: flex-start;
  }

  .kobu-about-page__stat,
  .kobu-about-page__stat:nth-child(2),
  .kobu-about-page__stat:nth-child(4) {
    width: calc(50% - 12px);
  }

  .kobu-about-page__featured {
    height: min(60vw, 480px);
  }

  .kobu-about-page__process-layout {
    padding-left: 0 !important;
  }

  .kobu-about-page__process-note {
    position: static !important;
    margin-top: 32px !important;
  }

  .kobu-about-page__gallery-row {
    overflow: visible;
  }

  .kobu-about-page__gallery-track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }

  .kobu-about-page__gallery-cell {
    flex: 1 1 min(100%, 470px);
    height: 70vw;
    max-height: 600px;
  }

  .kobu-about-page__gallery-track
    .kobu-about-page__gallery-cell:nth-child(n + 6) {
    display: none;
  }
}

.kobu-page-content input,
.kobu-page-content textarea {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--kobu-text-light);
  padding: 12px 14px;
  font-family: 'Montserrat', 'Arial', sans-serif;
}

.kobu-page-content button {
  border: 1px solid var(--kobu-text-light);
  background: transparent;
  color: var(--kobu-text-light);
  padding: 11px 22px;
  font-family: 'Poppins', 'Arial', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 1024px) {
  .kobu-site-header__inner {
    min-height: 76px;
  }

  .kobu-main-menu {
    gap: 0;
  }

  .kobu-nav-drawer__inner {
    width: min(70vw, 760px);
    padding: 100px 40px 48px;
  }

  .kobu-main-menu--drawer a {
    font-size: clamp(26px, 4vw, 40px);
  }

  .kobu-hero__grid,
  .kobu-project-highlight,
  .kobu-about-services {
    grid-template-columns: 1fr;
  }

  .kobu-home-hero__inner {
    height: auto;
    min-height: 840px;
    padding: 140px 0 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .kobu-home-hero__title-wrap,
  .kobu-home-hero__services {
    position: static;
    right: auto;
    width: auto;
    height: auto;
  }

  .kobu-home-hero__services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    width: auto;
  }

  .kobu-home-hero__socials {
    right: 10px;
    bottom: 10px;
  }

  .kobu-home-projects__inner,
  .kobu-home-projects__head,
  .kobu-home-project-card,
  .kobu-home-project-card__meta-wrap {
    width: 100%;
    min-height: 0;
    height: auto;
  }

  .kobu-home-projects-slider {
    width: 100%;
    min-height: 360px;
    height: clamp(360px, 62vw, 680px);
  }

  .kobu-home-projects__inner {
    padding: 0 20px;
  }

  .kobu-home-projects__heading-text {
    text-align: left;
  }

  .kobu-home-mission__inner {
    width: 100%;
    min-height: 0;
    padding: 80px 20px 120px;
  }

  .kobu-home-mission {
    --kobu-mission-strip-hover-h: 660px;
    --kobu-mission-strip-1-h: calc(var(--kobu-mission-strip-hover-h) * 0.78);
    --kobu-mission-strip-23-h: calc(var(--kobu-mission-strip-hover-h) * 0.45);
    --kobu-mission-strip-h: var(--kobu-mission-strip-23-h);
  }

  .kobu-home-mission__layout {
    column-gap: 10px;
  }

  .kobu-project-single__gallery {
    grid-template-columns: 1fr;
  }

  .kobu-site-footer {
    padding-top: 140px;
  }

  .kobu-site-footer__grid {
    min-height: 0;
  }
}

@media (max-width: 680px) {
  .kobu-site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 0;
  }

  .kobu-logo {
    height: 72px;
    width: 40px;
  }

  .kobu-main-menu {
    flex-wrap: nowrap;
    gap: 0;
  }

  .kobu-nav-drawer__inner {
    width: 100%;
    padding: 110px 24px 40px;
  }

  .kobu-drawer-service-menu,
  .kobu-drawer-service-menu ul {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .kobu-drawer-service-menu > li:nth-child(3n + 1) {
    grid-column: auto;
  }

  .kobu-hero {
    min-height: 620px;
  }

  .kobu-page-section {
    padding: 72px 0;
  }

  .kobu-home-mission {
    --kobu-mission-strip-hover-h: 540px;
    --kobu-mission-strip-1-h: calc(var(--kobu-mission-strip-hover-h) * 0.78);
    --kobu-mission-strip-23-h: calc(var(--kobu-mission-strip-hover-h) * 0.45);
    --kobu-mission-strip-h: var(--kobu-mission-strip-23-h);
  }

  .kobu-home-mission__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .kobu-home-mission__column {
    width: 100%;
    gap: 40px;
  }

  .kobu-home-mission__column--left,
  .kobu-home-mission__column--mid,
  .kobu-home-mission__column--right {
    grid-column: auto;
  }

  .kobu-home-mission__strip-shell {
    min-height: 0;
    height: auto;
  }

  @media (hover: hover) and (pointer: fine) {
    .kobu-home-mission__strip-slot--1
      > .kobu-home-mission__strip--layered:hover,
    .kobu-home-mission__mid-sync
      > .kobu-home-mission__strip-slot--23
      > .kobu-home-mission__strip--flow:hover,
    .kobu-home-mission__right-sync
      > .kobu-home-mission__strip-slot--23
      > .kobu-home-mission__strip--flow:hover {
      height: var(--kobu-mission-strip-hover-h);
      z-index: 4;
    }
  }

  .kobu-home-mission__stack--mid,
  .kobu-home-mission__stack--right {
    align-items: flex-start;
  }

  .kobu-site-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px 0;
  }

  .kobu-site-footer__col--gap {
    display: none;
  }

  .kobu-site-footer__col--brand {
    padding-left: 0;
    gap: 32px;
  }

  .kobu-site-footer__col--nav {
    align-items: flex-start;
    padding-right: 0;
  }

  .kobu-site-footer__menu {
    align-items: flex-start;
  }

  .kobu-site-footer__menu li {
    justify-content: flex-start;
  }
}

/* Services page (Figma-style composition) */
.kobu-services-page {
  position: relative;
  background: #2d2d2d;
  color: #fff;
  padding: calc(var(--kobu-header-flow-gap) + 70px) 0 0;
  overflow: hidden;
}

.kobu-services-page__inner {
  position: relative;
  width: 1140px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding-bottom: 140px;
  z-index: 2;
  /* Space from inner edge to viewport — used to pull images left without shifting chosen copy blocks */
  --kobu-svc-gutter: calc((100vw - min(1140px, calc(100% - 48px))) / 2);
}

.kobu-services-page__lines {
  position: absolute;
  inset: 0;
  width: 1140px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  pointer-events: none;
  opacity: 0.1;
}

.kobu-services-page__lines span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #fff;
}
.kobu-services-page__lines span:nth-child(1) {
  left: 0;
}
.kobu-services-page__lines span:nth-child(2) {
  left: 33.3333%;
}
.kobu-services-page__lines span:nth-child(3) {
  left: 66.6666%;
}
.kobu-services-page__lines span:nth-child(4) {
  right: 0;
}

.kobu-services-hero__title {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kobu-services-hero__title .is-indented {
  padding-left: 120px;
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
}

.kobu-services-hero__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #979797;
  flex: 0 0 16px;
  align-self: flex-end;
  margin-bottom: 8px;
}

.kobu-services-hero__lead {
  margin: 40px 0 0 380px;
  max-width: 615px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Триптих: flex + одна картинка через background-image. Ступень центра — margin-top (не flex-end: иначе лишний сдвиг при min-height). */
.kobu-services-hero__triptych {
  --kobu-services-triptych-step: 63px;
  --kobu-triptych-gap: 30px;
  --kobu-triptych-label-x: 22px; /* как отступ линий к левому краю подписи в колонке (рядом с figcaption 20px) */
  margin-top: 148px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--kobu-triptych-gap);
  min-width: 0;
}

/*
 * Линии над 01/02/03: x = левый край каждой колонки + --kobu-triptych-label-x.
 * Колонка w = (100% − 2·gap)/3; края: 0 | w+g | 2w+2g.
 */
.kobu-services-hero__triptych::before {
  content: '';
  position: absolute;
  top: -34px;
  left: 0;
  width: 100%;
  height: 137px;
  pointer-events: none;
  z-index: 3;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff),
    linear-gradient(#ffffff, #ffffff);
  background-size:
    2px 74px,
    2px 68px,
    2px 74px;
  background-position:
    var(--kobu-triptych-label-x) 0,
    calc(
        (100% - 2 * var(--kobu-triptych-gap)) / 3 + var(--kobu-triptych-gap) +
          var(--kobu-triptych-label-x)
      )
      calc(var(--kobu-services-triptych-step) + 6px),
    calc(
        2 * (100% - 2 * var(--kobu-triptych-gap)) / 3 + 2 *
          var(--kobu-triptych-gap) + var(--kobu-triptych-label-x)
      )
      0;
}

/*
 * Три доли: 300% × calc(100% + step) — один масштаб; запас по высоте, чтобы сдвигать кроп по Y без серого.
 * Боковые: верх окна = верх кадра. Центр (ступень на margin-top): кроп ниже на step — меньше «неба», больше низа,
 * как если отнять полосу сверху и добавить снизу (50% + смещение по Y в px).
 */
.kobu-services-hero__panel {
  display: block;
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  height: 700px;
  background-color: #3a3a3a;
  background-image: var(--kobu-triptych-img);
  background-size: 300% calc(100% + var(--kobu-services-triptych-step));
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
}

.kobu-services-hero__panel--left {
  background-position: 0% 0%;
}

.kobu-services-hero__panel--center {
  align-self: flex-start;
  margin-top: var(--kobu-services-triptych-step);
  background-position: 50% calc(-1 * var(--kobu-services-triptych-step));
}

.kobu-services-hero__panel--right {
  background-position: 100% 0%;
}

/* Hover / focus: лёгкая подсветка колонки */
.kobu-services-hero__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.kobu-services-hero__panel:hover::after,
.kobu-services-hero__panel:focus-within::after {
  opacity: 1;
}

.kobu-services-hero__panel-cap {
  position: absolute;
  left: 20px;
  top: 40px;
  right: 16px;
  z-index: 2;
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  pointer-events: none;
}

.kobu-services-hero__panel-cap a {
  pointer-events: auto;
}

.kobu-services-hero__panel-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.kobu-services-hero__slice-num {
  display: block;
  font-weight: 500;
}

.kobu-services-hero__slice-title {
  display: block;
  font-weight: 500;
}

/* Свернуто: только номер + заголовок; раскрытие по hover / focus-within */
.kobu-services-hero__panel-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    margin-top 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .kobu-services-hero__panel:hover .kobu-services-hero__panel-body,
  .kobu-services-hero__panel:focus-within .kobu-services-hero__panel-body {
    max-height: 420px;
    opacity: 1;
    margin-top: 20px;
  }
}

.kobu-services-hero__panel-desc {
  margin: 0 0 16px;
  max-width: 28em;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
}

.kobu-services-hero__panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
}

.kobu-services-hero__panel-cta:hover,
.kobu-services-hero__panel-cta:focus-visible {
  opacity: 0.9;
}

.kobu-services-hero__panel-cta-arrow {
  display: inline-block;
}

@media (hover: none), (pointer: coarse) {
  .kobu-services-hero__panel-body {
    max-height: none;
    opacity: 1;
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kobu-services-hero__panel-body,
  .kobu-services-hero__panel::after {
    transition: none;
  }

  .kobu-services-block--design {
    transform: none;
  }
}

.kobu-services-intro {
  margin-top: 230px;
  display: grid;
  grid-template-columns: 615px 1fr;
  grid-template-rows: auto 1fr;
  gap: 0 150px;
  align-items: start;
}

.kobu-services-intro__text h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  text-transform: uppercase;
}

.kobu-services-intro__text p {
  margin: 16px 0 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.kobu-services-intro__cta {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
}

.kobu-services-intro__cta-arrow {
  display: inline-block;
  transform: translateY(-1px);
  font-weight: 700;
  font-size: 16px;
}

.kobu-services-intro__img {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 530px;
  height: 650px;
  margin: 0;
  overflow: hidden;
}

.kobu-services-intro__img img,
.kobu-services-block__img img,
.kobu-services-block__smalls img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kobu-services-note {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 469px;
}

.kobu-services-note h3 {
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.kobu-services-note p {
  margin: 0;
  max-width: 400px;
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
}

.kobu-services-note--right {
  align-items: flex-end;
  text-align: right;
  justify-self: end;
}
.kobu-services-intro > .kobu-services-note--right {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  margin: 0 -85px 0 auto;
}
.kobu-services-block {
  margin-top: 150px;
}

.kobu-services-block--building .kobu-services-block__img--wide {
  /* Full-bleed left/right to viewport; image stays fully visible (contain, no crop) */
  margin: 40px calc(-1 * var(--kobu-svc-gutter)) 0;
  width: calc(100% + 2 * var(--kobu-svc-gutter));
  max-width: none;
  height: 400px;
  background: #2d2d2d;
}

.kobu-services-block--design {
  display: grid;
  grid-template-columns: minmax(0, 530px) minmax(0, 1fr);
  gap: 0 24px;
  align-items: stretch;
  /* Entire block (main image + copy + smalls) shifts left; internal gap unchanged */
  transform: translate3d(calc(-1 * var(--kobu-svc-gutter)), 0, 0);
}

/* Main photo: 530×650 in grid */
.kobu-services-block--design .kobu-services-block__img--left {
  box-sizing: border-box;
  width: 530px;
  height: 650px;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 0;
  background: #2d2d2d;
}

.kobu-services-block--design .kobu-services-block__img--left img {
  width: 100%;
  height: 100%;
  /* Кадр «тянем» влево внутри того же блока, без изменения его позиции */
  object-fit: cover;
  object-position: left center;
  display: block;
}

.kobu-services-block--building .kobu-services-block__img--wide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.kobu-services-block__img--left {
  width: 530px;
  height: 650px;
  margin: 0;
}

/*
 * Right column (Figma 573:6983): нижний ряд — две маленькие картинки;
 * заголовок и текст — только над правой картинкой, прижаты к левому нижнему углу этой ячейки.
 */
.kobu-services-block__design-right {
  /* cumulative bumps on base clamp(40px, 11%, 84px); last +50% */
  --kobu-design-smalls-bleed-x: calc(
    1.15 * 1.15 * 1.3 * 1.5 * clamp(40px, 11%, 84px)
  );
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 24px;
  width: 100%;
  min-width: 0;
  min-height: 650px;
  justify-self: stretch;
  align-self: stretch;
  align-items: stretch;
  overflow: visible;
}

/* Title + copy use full column width so long lines don’t break in the narrow half-cell */
.kobu-services-block__design-right .kobu-services-note--center {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  align-self: end;
  justify-self: start;
  text-align: left;
  max-width: none;
}

.kobu-services-block__design-right .kobu-services-note--center p {
  max-width: none;
}

.kobu-services-block__design-right .kobu-services-block__smalls {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-self: end;
  box-sizing: border-box;
  /* Wider to the right only (~10–15% of column), not taller */
  width: calc(100% + var(--kobu-design-smalls-bleed-x));
  margin-right: calc(-1 * var(--kobu-design-smalls-bleed-x));
}

.kobu-services-block__design-right .kobu-services-block__smalls figure {
  margin: 0;
  height: 280px;
  overflow: hidden;
}

.kobu-services-block--construction {
  margin-top: 150px;
  display: grid;
  grid-template-columns: 350px 1fr;
  align-items: start;
}

/* Title + copy: top-right of the left column (not vertically centered with the photo). */
.kobu-services-block--construction .kobu-services-note--right {
  align-self: start;
  justify-self: end;
}

.kobu-services-block__img--right {
  width: 910px;
  min-width: 910px;
  height: 475px;
  justify-self: end;
  margin: 0;
  overflow: hidden;
}

/* Softer right bleed than full / -2 (same as before triptych-alignment experiment). */
.kobu-services-block--construction .kobu-services-block__img--right {
  margin-right: calc((100vw - min(1140px, calc(100% - 48px))) / -4);
}

.kobu-services-block--construction .kobu-services-block__img--right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

@media (max-width: 900px) {
  .kobu-services-hero__triptych,
  .kobu-services-intro,
  .kobu-services-block--design,
  .kobu-services-block--construction {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .kobu-services-hero__lead {
    margin: 24px 0 0;
    max-width: 100%;
  }

  .kobu-services-hero__title {
    font-size: 40px;
  }
  .kobu-services-hero__title .is-indented {
    padding-left: 0;
  }

  .kobu-services-hero__triptych {
    min-height: 0;
    align-items: stretch;
  }

  .kobu-services-hero__triptych::before {
    display: none;
  }

  .kobu-services-hero__panel--left,
  .kobu-services-hero__panel--center,
  .kobu-services-hero__panel--right,
  .kobu-services-intro__img,
  .kobu-services-block__img--left,
  .kobu-services-block__img--right {
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 0;
    align-self: stretch;
  }

  .kobu-services-hero__panel--left,
  .kobu-services-hero__panel--center,
  .kobu-services-hero__panel--right {
    background-size: cover; /* в колонке снова cover, не auto 100% */
  }

  .kobu-services-hero__panel--left {
    background-position: left center;
  }

  .kobu-services-hero__panel--center {
    background-position: center center;
  }

  .kobu-services-hero__panel--right {
    background-position: right center;
  }

  .kobu-services-block--design {
    transform: none;
  }

  .kobu-services-block--design .kobu-services-block__img--left {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .kobu-services-block__design-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 24px;
  }

  .kobu-services-block__design-right .kobu-services-note--center {
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
    justify-self: stretch;
  }

  .kobu-services-block__design-right .kobu-services-block__smalls {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    margin-right: 0;
  }

  .kobu-services-block--construction .kobu-services-block__img--right {
    margin-right: 0;
    margin-left: 0;
    min-width: 0;
  }

  .kobu-services-block--building .kobu-services-block__img--wide {
    margin: 24px 0 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 6;
  }

  .kobu-services-note--right {
    align-items: flex-start;
    text-align: left;
    justify-self: start;
  }
}