/* =========================================
   UrbanNest Studio — Home Page (home.html)
   Section 1: Hero
   ========================================= */

.un-hero {
  padding-top: 2.2rem;
  padding-bottom: 3.2rem;
}

.un-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr);
  gap: 1.8rem;
  background: radial-gradient(circle at 0% 0%, #ffffff, var(--un-bg-soft));
  border-radius: 32px;
  padding: 1.8rem 1.6rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  box-shadow: 0 26px 60px rgba(40, 32, 24, 0.06);
  position: relative;
  overflow: hidden;
}

/* Decorative background ribbon */
.un-hero-grid::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgba(196, 224, 217, 0.36), transparent 70%);
  top: -120px;
  right: -80px;
  opacity: 0.7;
  pointer-events: none;
}

.un-hero-grid::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 60% 40% 65% 35%;
  background: conic-gradient(
    from 200deg,
    rgba(233, 205, 168, 0.48),
    rgba(209, 139, 115, 0.07),
    rgba(196, 224, 217, 0.24),
    rgba(233, 205, 168, 0.48)
  );
  bottom: -200px;
  left: -140px;
  opacity: 0.16;
  pointer-events: none;
}

.un-hero-text {
  position: relative;
  z-index: 1;
}

.un-kicker {
  margin: 0 0 0.5rem;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--un-muted);
}

.un-hero-title {
  margin: 0 0 0.8rem;
  font-family: "UrbanNestDisplay", system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--un-ink);
}

.un-hero-lead {
  margin: 0 0 0.8rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--un-muted);
}

.un-hero-body {
  margin: 0 0 1.4rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--un-muted);
}

.un-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
}

.un-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.un-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: flex-end;
}

.un-hero-main-img {
  background: var(--un-bg-elevated);
  border-radius: var(--un-radius-xl);
  padding: 0.7rem;
  box-shadow: 0 22px 55px rgba(40, 32, 24, 0.12);
  position: relative;
}

.un-hero-main-img img {
  border-radius: calc(var(--un-radius-xl) - 6px);
  max-width: 320px; /* <= 350px */
  margin-inline: auto;
}

.un-hero-label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  background: rgba(39, 34, 29, 0.92);
  color: #fdf9f4;
  font-size: 0.72rem;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.un-hero-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.un-hero-card {
  background: rgba(251, 247, 242, 0.96);
  border-radius: var(--un-radius-lg);
  padding: 0.6rem 0.6rem 0.8rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 320px; /* <= 350px */
}

.un-hero-card img {
  border-radius: 18px;
  max-width: 100%;
}

.un-hero-card figcaption {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--un-muted);
}

.un-hero-card--accent {
  background: linear-gradient(
    135deg,
    rgba(233, 205, 168, 0.32),
    rgba(251, 247, 242, 0.96) 40%,
    rgba(196, 224, 217, 0.2)
  );
}

/* Hover micro-motions for cards */
.un-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(40, 32, 24, 0.12);
}

/* Responsive */
@media (max-width: 599px) {
  .un-hero-grid {
    padding: 1.4rem 1.2rem;
    gap: 1.4rem;
  }

  .un-hero-title {
    font-size: 1.34rem;
  }

  .un-hero-visual {
    grid-template-columns: minmax(0, 1fr);
  }

  .un-hero-main-img,
  .un-hero-card {
    max-width: 100%;
  }

  .un-hero-main-img img {
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .un-hero {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }

  .un-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
    padding: 2.2rem 2.2rem 2.4rem;
  }

  .un-hero-title {
    font-size: 2.1rem;
  }

  .un-hero-lead {
    font-size: 1.02rem;
  }

  .un-hero-body {
    max-width: 36rem;
  }

  .un-hero-main-img img {
    max-width: 340px; /* все равно < 350px */
  }
}

@media (min-width: 1024px) {
  .un-hero-grid {
    padding: 2.6rem 2.8rem 2.8rem;
  }

  .un-hero-title {
    font-size: 2.3rem;
  }
}
.un-hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center; /* изображения по центру по вертикали */
}

/* чуть поднимаем всю колонку с картинками на десктопе */
@media (min-width: 768px) {
  .un-hero-visual {
    margin-top: -0.8rem;
  }
}

@media (min-width: 1024px) {
  .un-hero-visual {
    margin-top: -1.4rem;
  }
}
@media (max-width: 599px) {
  .un-hero-grid {
    padding: 1.4rem 1.2rem;
    gap: 1.4rem;
  }

  .un-hero-title {
    font-size: 1.34rem;
  }

  /* Картинки на мобилке — по центру и без сжатия */
  .un-hero-visual {
    display: flex;              /* вместо grid */
    flex-direction: column;
    align-items: center;        /* центр по горизонтали */
    gap: 1rem;
  }

  .un-hero-main-img,
  .un-hero-card {
    width: min(100%, 320px);    /* нормальная ширина, не ужимается в тонкую колонку */
  }

  .un-hero-main-img img,
  .un-hero-card img {
    max-width: 100%;
  }

  .un-hero-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;        /* карточки тоже по центру */
    gap: 0.8rem;
  }

  .un-hero-card figcaption {
    text-align: center;
  }
}
/* =========================================
   Section 2: Flow
   ========================================= */

.un-section-title {
  margin: 0 0 0.6rem;
  font-family: "UrbanNestDisplay", system-ui, sans-serif;
  font-size: 1.36rem;
  line-height: 1.3;
  color: var(--un-ink);
}

.un-section-lead {
  margin: 0 0 0.7rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--un-muted);
}

.un-section-body {
  margin: 0 0 1.1rem;
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--un-muted);
}

.un-flow {
  margin-top: 2.6rem;
  margin-bottom: 2.6rem;
}

.un-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 1.8rem;
  background: var(--un-bg-soft);
  border-radius: 28px;
  padding: 1.6rem 1.4rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
}

.un-flow-text {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.un-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.un-flow-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 0.8rem;
  align-items: flex-start;
}

.un-flow-list h3 {
  margin: 0 0 0.15rem;
  font-size: 0.9rem;
  color: var(--un-ink);
}

.un-flow-list p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

.un-flow-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(209, 139, 115, 0.5);
  box-shadow: 0 0 0 4px rgba(209, 139, 115, 0.12);
  margin-top: 0.15rem;
}

.un-flow-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr);
  gap: 0.9rem;
  align-content: flex-start;
}

.un-flow-main,
.un-flow-secondary {
  background: var(--un-bg-elevated);
  border-radius: 24px;
  padding: 0.7rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
}

.un-flow-main img,
.un-flow-secondary img {
  border-radius: 18px;
  max-width: 340px; /* < 350px */
  margin-inline: auto;
}

.un-flow-main figcaption,
.un-flow-secondary figcaption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

/* =========================================
   Section 3: Material Palette Strip
   ========================================= */

.un-palette {
  margin-top: 0;
  margin-bottom: 2.6rem;
}

.un-palette-inner {
  background: radial-gradient(circle at 0% 0%, #ffffff, var(--un-bg-soft));
  border-radius: 32px;
  padding: 1.8rem 1.5rem 1.9rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
}

.un-palette-head {
  max-width: 34rem;
  margin-bottom: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.un-palette-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
}

.un-palette-main {
  background: var(--un-bg-elevated);
  border-radius: 26px;
  padding: 0.7rem;
  box-shadow: 0 20px 50px rgba(40, 32, 24, 0.09);
}

.un-palette-main img {
  border-radius: 20px;
  max-width: 340px; /* < 350px */
  margin-inline: auto;
}

.un-palette-main figcaption {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-palette-strip {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.un-palette-chip {
  background: rgba(251, 247, 242, 0.96);
  border-radius: 22px;
  padding: 0.55rem 0.6rem 0.75rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 320px;
}

.un-palette-chip img {
  border-radius: 18px;
  max-width: 100%;
}

.un-palette-chip figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

/* =========================================
   Section 4: Day Arc
   ========================================= */

.un-dayarc {
  margin-bottom: 3rem;
}

.un-dayarc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 1.8rem;
  background: var(--un-bg-soft);
  border-radius: 30px;
  padding: 1.7rem 1.5rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
}

.un-dayarc-visual {
  position: relative;
  display: grid;
  gap: 0.9rem;
}

.un-dayarc-img {
  background: var(--un-bg-elevated);
  border-radius: 24px;
  padding: 0.6rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 330px;
}

.un-dayarc-img img {
  border-radius: 18px;
  max-width: 100%;
}

.un-dayarc-img figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-dayarc-img--evening {
  margin-left: 1.8rem;
}

.un-dayarc-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.un-dayarc-steps {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.un-dayarc-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 0.9rem;
  align-items: flex-start;
}

.un-dayarc-time {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: var(--un-radius-pill);
  background: rgba(233, 205, 168, 0.25);
  color: var(--un-ink);
}

.un-dayarc-steps h3 {
  margin: 0 0 0.15rem;
  font-size: 0.92rem;
  color: var(--un-ink);
}

.un-dayarc-steps p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

/* =======================
   Responsive for sections
   ======================= */

@media (max-width: 599px) {
  .un-flow-grid,
  .un-palette-grid,
  .un-dayarc-grid {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.4rem 1.1rem;
  }

  .un-flow-visual,
  .un-dayarc-visual {
    justify-items: center;
  }

  .un-flow-main,
  .un-flow-secondary,
  .un-palette-main,
  .un-palette-chip,
  .un-dayarc-img {
    max-width: min(330px, 100%);
  }

  .un-dayarc-img--evening {
    margin-left: 0;
  }

  .un-dayarc-steps li,
  .un-flow-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .un-dayarc-time {
    margin-bottom: 0.1rem;
  }
}

@media (min-width: 768px) {
  .un-section-title {
    font-size: 1.6rem;
  }

  .un-flow-grid {
    padding: 2rem 2rem 2.1rem;
  }

  .un-palette-inner {
    padding: 2.1rem 2rem 2.4rem;
  }

  .un-dayarc-grid {
    padding: 2.1rem 2rem 2.2rem;
  }

  .un-dayarc-img--evening {
    margin-left: 2.4rem;
  }
}
/* =========================================
   Section 5: Vignettes
   ========================================= */

.un-vignettes {
  margin-bottom: 2.8rem;
}

.un-vignettes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr);
  gap: 1.8rem;
  background: var(--un-bg-elevated);
  border-radius: 30px;
  padding: 1.6rem 1.5rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  box-shadow: 0 20px 55px rgba(40, 32, 24, 0.07);
}

.un-vignettes-visual {
  position: relative;
  display: grid;
  gap: 0.9rem;
  align-content: flex-start;
}

.un-vignettes-visual::before {
  content: "";
  position: absolute;
  inset: 0.4rem 0.3rem;
  border-radius: 999px;
  border: 1px dashed rgba(223, 212, 200, 0.8);
  opacity: 0.5;
  pointer-events: none;
}

.un-vignette-img {
  position: relative;
  background: var(--un-bg-soft);
  border-radius: 24px;
  padding: 0.6rem;
  max-width: 320px; /* < 350px */
  border: 1px solid rgba(223, 212, 200, 0.9);
}

.un-vignette-img img {
  border-radius: 18px;
  max-width: 100%;
}

.un-vignette-img figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-vignette-img--top {
  margin-left: 0.6rem;
}

.un-vignette-img--middle {
  margin-left: 1.6rem;
}

.un-vignette-img--bottom {
  margin-left: 0.2rem;
}

.un-vignettes-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.un-vignettes-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.un-vignettes-list h3 {
  margin: 0 0 0.15rem;
  font-size: 0.9rem;
  color: var(--un-ink);
}

.un-vignettes-list p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

/* =========================================
   Section 6: Personas
   ========================================= */

.un-personas {
  margin-bottom: 2.8rem;
}

.un-personas-inner {
  border-radius: 32px;
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: radial-gradient(circle at 100% 0%, #ffffff, var(--un-bg-soft));
}

.un-personas-head {
  max-width: 34rem;
  margin-bottom: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.un-personas-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.un-persona-card {
  position: relative;
  border-radius: 24px;
  padding: 0.8rem 0.9rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  background: rgba(251, 247, 242, 0.98);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

.un-persona-card::after {
  content: "";
  position: absolute;
  inset: 0.6rem 0.4rem;
  border-radius: 22px;
  border: 1px solid rgba(196, 224, 217, 0.28);
  pointer-events: none;
}

.un-persona-photo {
  margin: 0;
  width: 90px;
  height: 90px;
  border-radius: 26px;
  overflow: hidden;
  background: #ddd;
}

.un-persona-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.un-persona-body h3 {
  margin: 0 0 0.15rem;
  font-size: 0.96rem;
  color: var(--un-ink);
}

.un-persona-body p {
  margin: 0 0 0.35rem;
  font-size: 0.86rem;
  color: var(--un-muted);
}

.un-persona-body ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.84rem;
  color: var(--un-muted);
}

.un-persona-body li + li {
  margin-top: 0.15rem;
}

/* =========================================
   Section 7: Consult CTA
   ========================================= */

.un-consult {
  margin-bottom: 3.2rem;
}

.un-consult-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr);
  gap: 1.8rem;
  border-radius: 32px;
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: linear-gradient(
    135deg,
    rgba(233, 205, 168, 0.32),
    rgba(251, 247, 242, 0.98),
    rgba(196, 224, 217, 0.3)
  );
}

.un-consult-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.un-consult-actions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.un-consult-note {
  margin: 0;
  font-size: 0.84rem;
  color: var(--un-muted);
}

.un-consult-visual {
  position: relative;
  display: grid;
  gap: 0.8rem;
  align-content: flex-start;
  justify-items: flex-start;
}

.un-consult-main,
.un-consult-secondary {
  background: var(--un-bg-elevated);
  border-radius: 26px;
  padding: 0.7rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  max-width: 330px; /* < 350px */
}

.un-consult-main img,
.un-consult-secondary img {
  border-radius: 20px;
  max-width: 100%;
}

.un-consult-main figcaption,
.un-consult-secondary figcaption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-consult-secondary {
  transform: translateX(1.8rem);
}

/* =======================
   Responsive for 5–7
   ======================= */

@media (max-width: 599px) {
  .un-vignettes-grid,
  .un-consult-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.4rem 1.1rem 1.6rem;
  }

  .un-vignettes-visual::before {
    inset-inline: 0.1rem;
  }

  .un-vignette-img,
  .un-consult-main,
  .un-consult-secondary {
    max-width: min(320px, 100%);
  }

  .un-vignettes-visual,
  .un-consult-visual {
    justify-items: center;
  }

  .un-vignette-img--middle,
  .un-vignette-img--bottom {
    margin-left: 0;
  }

  .un-persona-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .un-persona-photo {
    width: 100%;
    max-width: 240px;
    height: 130px;
  }

  .un-persona-card::after {
    inset-inline: 0.5rem;
  }

  .un-consult-secondary {
    transform: translateX(0);
  }
}

@media (min-width: 768px) {
  .un-personas-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .un-consult-inner {
    padding: 2.1rem 2rem 2.3rem;
  }

  .un-vignettes-grid {
    padding: 2rem 2rem 2.1rem;
  }
}
/* =========================================
   Section 8: Quiet Spots
   ========================================= */

.un-spots {
  margin-bottom: 2.6rem;
}

.un-spots-inner {
  border-radius: 30px;
  padding: 1.7rem 1.6rem 1.9rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: var(--un-bg-soft);
}

.un-spots-head {
  max-width: 32rem;
  margin-bottom: 1.2rem;
}

.un-spots-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.un-spot-card {
  flex: 1 1 0;
  min-width: 180px;
  max-width: 230px;
  background: var(--un-bg-elevated);
  border-radius: 24px;
  padding: 0.9rem 0.9rem 1rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
}

.un-spot-photo {
  margin: 0 0 0.6rem;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
}

.un-spot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.un-spot-card h3 {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--un-ink);
}

.un-spot-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

/* =========================================
   Section 9: Before / After
   ========================================= */

.un-beforeafter {
  margin-bottom: 2.8rem;
}

.un-beforeafter-inner {
  border-radius: 30px;
  padding: 1.7rem 1.6rem 1.9rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: radial-gradient(circle at 0% 100%, #ffffff, var(--un-bg-soft));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr);
  gap: 1.6rem;
}

.un-beforeafter-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.un-beforeafter-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.un-beforeafter-list h3 {
  margin: 0 0 0.1rem;
  font-size: 0.9rem;
  color: var(--un-ink);
}

.un-beforeafter-list p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

.un-beforeafter-visual {
  position: relative;
  display: grid;
  gap: 0.8rem;
  justify-items: flex-start;
}

.un-beforeafter-img {
  background: var(--un-bg-elevated);
  border-radius: 24px;
  padding: 0.6rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 330px; /* < 350px */
}

.un-beforeafter-img img {
  border-radius: 18px;
  max-width: 100%;
}

.un-beforeafter-img figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-beforeafter-img--after {
  transform: translateX(1.4rem);
}

/* =========================================
   Section 10: Quote Band
   ========================================= */

.un-quote-band {
  margin-bottom: 3rem;
}

.un-quote-band-inner {
  border-radius: 32px;
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: linear-gradient(
    90deg,
    rgba(196, 224, 217, 0.3),
    rgba(251, 247, 242, 0.98),
    rgba(233, 205, 168, 0.28)
  );
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.1fr);
  gap: 1.4rem;
  align-items: center;
}

.un-quote-card {
  background: rgba(251, 247, 242, 0.96);
  border-radius: 22px;
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
}

.un-quote-text {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--un-ink);
}

.un-quote-author {
  margin: 0;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-quote-photo {
  background: var(--un-bg-elevated);
  border-radius: 26px;
  padding: 0.6rem;
  max-width: 260px; /* < 350px */
  border: 1px solid rgba(223, 212, 200, 0.9);
}

.un-quote-photo img {
  border-radius: 20px;
  max-width: 100%;
}

.un-quote-photo figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-quote-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.un-quote-mini {
  background: rgba(251, 247, 242, 0.96);
  border-radius: 20px;
  padding: 0.5rem 0.55rem 0.7rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 220px; /* < 350px */
}

.un-quote-mini img {
  border-radius: 16px;
  max-width: 100%;
}

.un-quote-mini figcaption {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--un-muted);
}

/* =======================
   Responsive for 8–10
   ======================= */

@media (max-width: 599px) {
  .un-spots-inner {
    padding: 1.4rem 1.1rem 1.6rem;
  }

  .un-spots-row {
    justify-content: center;
  }

  .un-spot-card {
    max-width: 260px;
  }

  .un-beforeafter-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.4rem 1.1rem 1.7rem;
  }

  .un-beforeafter-visual {
    justify-items: center;
  }

  .un-beforeafter-img--after {
    transform: translateX(0);
  }

  .un-quote-band-inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
    padding: 1.5rem 1.1rem 1.8rem;
  }

  .un-quote-photo,
  .un-quote-mini {
    max-width: min(260px, 100%);
  }

  .un-quote-band-inner {
    justify-items: center;
  }

  .un-quote-card {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .un-spots-inner,
  .un-beforeafter-inner,
  .un-quote-band-inner {
    padding-inline: 2rem;
  }
}
/* =========================================
   Section 8: Quiet Spots
   ========================================= */

.un-spots {
  margin-bottom: 2.6rem;
}

.un-spots-inner {
  border-radius: 30px;
  padding: 1.7rem 1.6rem 1.9rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: var(--un-bg-soft);
}

.un-spots-head {
  max-width: 32rem;
  margin-bottom: 1.2rem;
}

.un-spots-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.un-spot-card {
  flex: 1 1 0;
  min-width: 180px;
  max-width: 230px;
  background: var(--un-bg-elevated);
  border-radius: 24px;
  padding: 0.9rem 0.9rem 1rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
}

.un-spot-photo {
  margin: 0 0 0.6rem;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
}

.un-spot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.un-spot-card h3 {
  margin: 0 0 0.2rem;
  font-size: 0.96rem;
  color: var(--un-ink);
}

.un-spot-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

/* =========================================
   Section 9: Before / After
   ========================================= */

.un-beforeafter {
  margin-bottom: 2.8rem;
}

.un-beforeafter-inner {
  border-radius: 30px;
  padding: 1.7rem 1.6rem 1.9rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: radial-gradient(circle at 0% 100%, #ffffff, var(--un-bg-soft));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr);
  gap: 1.6rem;
}

.un-beforeafter-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.un-beforeafter-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.un-beforeafter-list h3 {
  margin: 0 0 0.1rem;
  font-size: 0.9rem;
  color: var(--un-ink);
}

.un-beforeafter-list p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

.un-beforeafter-visual {
  position: relative;
  display: grid;
  gap: 0.8rem;
  justify-items: flex-start;
}

.un-beforeafter-img {
  background: var(--un-bg-elevated);
  border-radius: 24px;
  padding: 0.6rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 330px; /* < 350px */
}

.un-beforeafter-img img {
  border-radius: 18px;
  max-width: 100%;
}

.un-beforeafter-img figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-beforeafter-img--after {
  transform: translateX(1.4rem);
}

/* =========================================
   Section 10: Quote Band
   ========================================= */

.un-quote-band {
  margin-bottom: 3rem;
}

.un-quote-band-inner {
  border-radius: 32px;
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: linear-gradient(
    90deg,
    rgba(196, 224, 217, 0.3),
    rgba(251, 247, 242, 0.98),
    rgba(233, 205, 168, 0.28)
  );
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1.1fr);
  gap: 1.4rem;
  align-items: center;
}

.un-quote-card {
  background: rgba(251, 247, 242, 0.96);
  border-radius: 22px;
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
}

.un-quote-text {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--un-ink);
}

.un-quote-author {
  margin: 0;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-quote-photo {
  background: var(--un-bg-elevated);
  border-radius: 26px;
  padding: 0.6rem;
  max-width: 260px; /* < 350px */
  border: 1px solid rgba(223, 212, 200, 0.9);
}

.un-quote-photo img {
  border-radius: 20px;
  max-width: 100%;
}

.un-quote-photo figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-quote-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.un-quote-mini {
  background: rgba(251, 247, 242, 0.96);
  border-radius: 20px;
  padding: 0.5rem 0.55rem 0.7rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 220px; /* < 350px */
}

.un-quote-mini img {
  border-radius: 16px;
  max-width: 100%;
}

.un-quote-mini figcaption {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--un-muted);
}

/* =======================
   Responsive for 8–10
   ======================= */

@media (max-width: 599px) {
  .un-spots-inner {
    padding: 1.4rem 1.1rem 1.6rem;
  }

  .un-spots-row {
    justify-content: center;
  }

  .un-spot-card {
    max-width: 260px;
  }

  .un-beforeafter-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.4rem 1.1rem 1.7rem;
  }

  .un-beforeafter-visual {
    justify-items: center;
  }

  .un-beforeafter-img--after {
    transform: translateX(0);
  }

  .un-quote-band-inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
    padding: 1.5rem 1.1rem 1.8rem;
    justify-items: center;
  }

  .un-quote-photo,
  .un-quote-mini {
    max-width: min(260px, 100%);
  }

  .un-quote-card {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .un-spots-inner,
  .un-beforeafter-inner,
  .un-quote-band-inner {
    padding-inline: 2rem;
  }
}
/* =========================================
   Section 11: Urban Routes
   ========================================= */

.un-routes {
  margin-bottom: 2.8rem;
}

.un-routes-inner {
  border-radius: 30px;
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: var(--un-bg-elevated);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.25fr);
  gap: 1.8rem;
}

.un-routes-main {
  background: var(--un-bg-soft);
  border-radius: 26px;
  padding: 0.7rem;
  max-width: 330px; /* < 350px */
}

.un-routes-main img {
  border-radius: 20px;
  max-width: 100%;
}

.un-routes-main figcaption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-routes-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.un-routes-steps {
  list-style: none;
  margin: 0.4rem 0 0.6rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.un-routes-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 0.7rem;
  align-items: baseline;
}

.un-routes-time {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  background: rgba(196, 224, 217, 0.4);
  color: var(--un-ink);
}

.un-routes-steps p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

.un-routes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.4rem;
}

.un-routes-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem 0.6rem;
  align-items: center;
  border-radius: 22px;
  padding: 0.4rem 0.6rem;
  background: rgba(251, 247, 242, 0.96);
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 260px; /* < 350px */
}

.un-routes-chip img {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  object-fit: cover;
}

.un-routes-chip figcaption {
  margin: 0;
  font-size: 0.8rem;
  color: var(--un-muted);
}

/* =========================================
   Section 12: Plans Strip
   ========================================= */

.un-plans {
  margin-bottom: 2.8rem;
}

.un-plans-inner {
  border-radius: 30px;
  padding: 1.7rem 1.6rem 1.9rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: radial-gradient(circle at 50% 0%, #ffffff, var(--un-bg-soft));
}

.un-plans-head {
  max-width: 32rem;
  margin-bottom: 1.2rem;
}

.un-plans-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.un-plan-card {
  border-radius: 24px;
  padding: 0.9rem 0.9rem 1rem;
  background: var(--un-bg-elevated);
  border: 1px dashed rgba(223, 212, 200, 0.9);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.un-plan-photo {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #ddd;
}

.un-plan-photo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.un-plan-card h3 {
  margin: 0;
  font-size: 0.94rem;
  color: var(--un-ink);
}

.un-plan-card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

/* =========================================
   Section 13: Client Voices
   ========================================= */

.un-voices {
  margin-bottom: 3rem;
}

.un-voices-inner {
  border-radius: 32px;
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: var(--un-bg-elevated);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 1.8rem;
}

.un-voices-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.un-voice-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin-top: 0.4rem;
}

.un-voice-card {
  border-radius: 20px;
  padding: 0.7rem 0.9rem;
  background: rgba(251, 247, 242, 0.96);
  border: 1px dashed rgba(223, 212, 200, 0.9);
}

.un-voice-text {
  margin: 0 0 0.3rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--un-ink);
}

.un-voice-name {
  margin: 0;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-voices-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0.9rem;
  align-items: flex-end;
}

.un-voices-main {
  background: var(--un-bg-soft);
  border-radius: 26px;
  padding: 0.7rem;
  max-width: 320px; /* < 350px */
}

.un-voices-main img {
  border-radius: 20px;
  max-width: 100%;
}

.un-voices-main figcaption {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-voices-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.un-voices-mini {
  background: rgba(251, 247, 242, 0.96);
  border-radius: 22px;
  padding: 0.5rem 0.55rem 0.7rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 220px; /* < 350px */
}

.un-voices-mini img {
  border-radius: 16px;
  max-width: 100%;
}

.un-voices-mini figcaption {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--un-muted);
}

/* =======================
   Responsive 11–13
   ======================= */

@media (max-width: 599px) {
  .un-routes-inner,
  .un-plans-inner,
  .un-voices-inner {
    padding: 1.5rem 1.1rem 1.8rem;
  }

  .un-routes-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .un-routes-main {
    max-width: min(320px, 100%);
  }

  .un-routes-steps li {
    grid-template-columns: minmax(0, 1fr);
  }

  .un-plans-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .un-voices-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .un-voices-visual {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .un-voices-main {
    max-width: min(320px, 100%);
  }

  .un-voices-mini {
    max-width: min(220px, 100%);
  }
}

@media (min-width: 768px) {
  .un-routes-inner,
  .un-plans-inner,
  .un-voices-inner {
    padding-inline: 2rem;
  }

  .un-voice-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* =========================================
   Section 14: Quiet Evening Layer
   ========================================= */

.un-layers {
  margin-bottom: 2.8rem;
}

.un-layers-inner {
  border-radius: 30px;
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: radial-gradient(circle at 0% 0%, #ffffff, var(--un-bg-soft));
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr);
  gap: 1.8rem;
}

.un-layers-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.un-layers-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.un-layers-list h3 {
  margin: 0 0 0.1rem;
  font-size: 0.9rem;
  color: var(--un-ink);
}

.un-layers-list p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

.un-layers-visual {
  position: relative;
  display: grid;
  gap: 0.9rem;
  justify-items: flex-start;
}

.un-layers-img {
  background: var(--un-bg-elevated);
  border-radius: 24px;
  padding: 0.6rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 320px; /* < 350px */
}

.un-layers-img img {
  border-radius: 18px;
  max-width: 100%;
}

.un-layers-img figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

.un-layers-img--top {
  transform: translateX(0.6rem);
}

.un-layers-img--bottom {
  transform: translateX(1.4rem);
}

/* =========================================
   Section 15: Process Steps Strip
   ========================================= */

.un-stepsstrip {
  margin-bottom: 2.9rem;
}

.un-stepsstrip-inner {
  border-radius: 32px;
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: linear-gradient(
    135deg,
    rgba(196, 224, 217, 0.3),
    rgba(251, 247, 242, 0.98),
    rgba(233, 205, 168, 0.3)
  );
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 1.8rem;
}

.un-stepsstrip-head {
  max-width: 30rem;
  margin-bottom: 1.1rem;
}

.un-stepsstrip-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.un-stepchip {
  border-radius: 999px;
  padding: 0.45rem 0.7rem 0.5rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  background: rgba(251, 247, 242, 0.96);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem 0.6rem;
  align-items: center;
}

.un-stepchip-index {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 500;
  background: rgba(209, 139, 115, 0.28);
  color: var(--un-ink);
}

.un-stepchip-body h3 {
  margin: 0 0 0.1rem;
  font-size: 0.9rem;
  color: var(--un-ink);
}

.un-stepchip-body p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--un-muted);
}

.un-stepsstrip-visual {
  display: grid;
  gap: 0.9rem;
  justify-items: flex-start;
}

.un-stepsstrip-img {
  background: var(--un-bg-elevated);
  border-radius: 24px;
  padding: 0.6rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 320px; /* < 350px */
}

.un-stepsstrip-img img {
  border-radius: 18px;
  max-width: 100%;
}

.un-stepsstrip-img figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
}

/* =========================================
   Section 16: Final CTA Band
   ========================================= */

.un-finalcta {
  margin-bottom: 3.2rem;
}

.un-finalcta-inner {
  border-radius: 32px;
  padding: 1.9rem 1.6rem 2.1rem;
  border: 1px solid rgba(223, 212, 200, 0.9);
  background: radial-gradient(circle at 100% 0%, rgba(196, 224, 217, 0.4), rgba(251, 247, 242, 0.98));
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr);
  gap: 1.8rem;
  align-items: center;
}

.un-finalcta-text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.un-finalcta-actions {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.un-finalcta-photo {
  background: var(--un-bg-elevated);
  border-radius: 999px;
  padding: 0.5rem;
  border: 1px dashed rgba(223, 212, 200, 0.9);
  max-width: 260px; /* < 350px */
}

.un-finalcta-photo img {
  border-radius: 999px;
  max-width: 100%;
}

.un-finalcta-photo figcaption {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--un-muted);
  text-align: center;
}

/* =======================
   Responsive 14–16
   ======================= */

@media (max-width: 599px) {
  .un-layers-inner,
  .un-stepsstrip-inner,
  .un-finalcta-inner {
    padding: 1.5rem 1.1rem 1.8rem;
  }

  .un-layers-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .un-layers-img--top,
  .un-layers-img--bottom {
    transform: translateX(0);
  }

  .un-stepsstrip-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .un-stepsstrip-row {
    gap: 0.5rem;
  }

  .un-stepsstrip-visual {
    justify-items: center;
  }

  .un-stepsstrip-img {
    max-width: min(320px, 100%);
  }

  .un-finalcta-inner {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }

  .un-finalcta-photo {
    margin-inline: auto;
  }
}

@media (min-width: 768px) {
  .un-layers-inner,
  .un-stepsstrip-inner,
  .un-finalcta-inner {
    padding-inline: 2rem;
  }

  .un-stepsstrip-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ============================
   HOME — FIX MATERIAL PALETTE ON MOBILE
   ============================ */
@media (max-width: 599px) {
  /* Сетка: из двух колонок в одну */
  .un-palette-inner,
  .un-material-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  /* Текст сверху, картинка ниже по центру */
  .un-palette-media,
  .un-material-media {
    max-width: 340px;          /* <= 350px */
    margin: 0 auto 0.5rem;     /* центрируем */
  }

  /* Убираем любые сдвиги/оверлеи у карточки */
  .un-palette-card,
  .un-material-card,
  .un-palette-photo,
  .un-material-photo {
    transform: none;
    margin-top: 0;
  }

  .un-palette-card img,
  .un-material-card img,
  .un-palette-photo img,
  .un-material-photo img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}
/* ============================
   HOME — MOBILE IMAGE FIX
   ============================ */
@media (max-width: 599px) {
  /* Все секции на главной в одну колонку, без перекосов картинок */
  .un-main .un-section {
    padding-inline: 1.1rem;
  }

  /* Любые контейнеры с визуалом делаем колонкой и центрируем */
  .un-main .un-section [class*="visual"],
  .un-main .un-section [class*="gallery"],
  .un-main .un-section [class*="photos"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }

  /* Все figure на главной — по центру и не шире 340px */
  .un-main .un-section figure {
    max-width: min(340px, 100%);
    margin: 0 auto 0.8rem;
  }

  /* Сами картинки: не растягиваем, не сжимаем, без обрезания */
  .un-main .un-section figure img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Убираем все сдвиги/оверлеи у карточек и фото на мобилке */
  .un-main .un-section [class*="photo"],
  .un-main .un-section [class*="card"] {
    transform: none !important;
    margin-top: 0 !important;
  }
}