/* ===================================
   WEBNERIVO - RESPONSIVE DESIGN
   Полностью адаптивный дизайн
   =================================== */

/* ===== ТОЧКИ РАЗЛОМА ===== */
/* 
  xs: 320px - 480px (телефоны)
  sm: 480px - 640px (планшеты)
  md: 640px - 1024px (планшеты, ноутбуки)
  lg: 1024px - 1280px (ноутбуки, десктопы)
  xl: 1280px - 1536px (большие десктопы)
  2xl: 1536px+ (очень большие экраны)
*/

/* ===== МОБИЛЬНЫЕ УСТРОЙСТВА (320px - 640px) ===== */
@media screen and (max-width: 639px) {
  :root {
    --container-padding: 16px;
    --font-size-3xl: 28px;
    --font-size-2xl: 24px;
    --font-size-xl: 20px;
    --space-3xl: 32px;
  }

  .header {
    height: 60px;
  }

  main {
    padding-top: 60px;
  }

  section {
    padding: var(--space-2xl) 0;
  }

  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .flex {
    flex-direction: column;
  }

  .flex-between {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn {
    width: 100%;
    padding: var(--space-lg) var(--space-md);
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ===== ПЛАНШЕТЫ МАЛЫЕ (640px - 768px) ===== */
@media screen and (min-width: 640px) and (max-width: 767px) {
  :root {
    --container-padding: 16px;
    --font-size-3xl: 32px;
    --font-size-2xl: 28px;
    --font-size-xl: 22px;
  }

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== ПЛАНШЕТЫ (768px - 1024px) ===== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-padding: 20px;
  }

  .about-hero-inner,
  .approach-composition,
  .moldova-band {
    grid-template-columns: 1fr;
  }

  .about-signal {
    min-height: 420px;
  }

  .signal-frame {
    inset: 0;
    transform: none;
  }

  .about-split,
  .about-section-heading {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 32px;
  }

  .manifesto-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-hero-inner {
    display: block;
  }

  .portfolio-hero {
    min-height: 600px;
    background-position: 38% center;
  }

  .portfolio-case,
  .portfolio-case-reverse {
    grid-template-columns: 1fr;
  }

  .portfolio-case-reverse .portfolio-case-content,
  .portfolio-case-reverse .portfolio-visual {
    order: initial;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== ДЕСКТОПЫ И НОУТБУКИ (1024px - 1280px) ===== */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --container-padding: 24px;
    --container-max-width: 100%;
  }

  .container {
    max-width: 960px;
  }
}

/* ===== БОЛЬШИЕ ДЕСКТОПЫ (1280px - 1536px) ===== */
@media screen and (min-width: 1280px) and (max-width: 1535px) {
  :root {
    --container-padding: 32px;
  }
}

/* ===== ОЧЕНЬ БОЛЬШИЕ ЭКРАНЫ (1536px+) ===== */
@media screen and (min-width: 1536px) {
  :root {
    --container-padding: 48px;
  }
}

/* ===== ВЫСОКОЕ РАЗРЕШЕНИЕ (HIGH DPI) ===== */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* ===== ОРИЕНТАЦИЯ ===== */

/* Портретная ориентация */
@media screen and (orientation: portrait) {
  main {
    min-height: 100vh;
  }
}

/* Ландшафтная ориентация */
@media screen and (orientation: landscape) {
  .header {
    height: 60px;
  }

  main {
    padding-top: 60px;
  }

  section {
    padding: var(--space-xl) 0;
  }
}

/* ===== МАЛЫЕ ЭКРАНЫ И АДАПТИВНЫЕ МЕНЮ ===== */

/* Скрыть десктопное меню на мобильных */
@media screen and (max-width: 767px) {
  .about-page section { padding: 64px 0; }
  .about-page section:first-of-type { padding-top: 108px; }
  .about-hero { min-height: auto; }
  .about-hero-inner { display: block; }
  .about-hero-copy h1 { font-size: clamp(38px, 10vw, 56px); }
  .about-signal { min-height: 350px; margin-top: 34px; }
  .signal-frame { inset: 0; transform: none; }
  .about-signal:hover .signal-frame { transform: none; }
  .signal-frame::before { inset: 62px 18px 82px; background-size: 24px 24px; }
  .signal-frame::after { left: 18px; right: 18px; bottom: 82px; }
  .signal-topline, .signal-panels { left: 16px; right: 16px; font-size: 9px; }
  .signal-topline small { display: none; }
  .signal-core { inset: 82px 26px 110px; }
  .signal-core b { font-size: clamp(40px, 13vw, 58px); }
  .signal-panels { flex-wrap: wrap; bottom: 20px; }
  .signal-panels span { padding: 7px 8px; }
  .about-split,
  .about-section-heading,
  .approach-composition,
  .moldova-band {
    display: block;
  }
  .about-section-label,
  .about-section-heading > span {
    margin-bottom: 20px;
  }
  .approach-flow {
    grid-template-columns: 1fr;
    min-height: 0;
    margin-top: 30px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .approach-flow::before,
  .approach-flow::after {
    display: none;
  }
  .approach-flow div {
    min-height: 92px;
    padding: 18px 0;
    border-top: 1px solid rgba(148, 163, 184, .16);
  }
  .approach-flow div:last-child { border-bottom: 1px solid rgba(148, 163, 184, .16); }
  .approach-flow div:hover {
    padding-left: 12px;
    transform: none;
  }
  .belief-item,
  .belief-item:nth-child(2),
  .belief-item:nth-child(3) {
    min-height: 0;
    padding: 24px 0;
    border-top: 1px solid rgba(148, 163, 184, .16);
    background: transparent;
    transform: none;
  }
  .belief-item span { margin-bottom: 24px; }
  .belief-item h3 { font-size: clamp(29px, 10vw, 42px); }
  .contrast-row {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 0;
    padding: 22px 0;
  }
  .contrast-row:hover { padding-inline: 0; }
  .contrast-row b {
    width: 38px;
    text-align: left;
  }
  .manifesto-inner { padding: 28px 20px; }
  .manifesto-inner h2 { font-size: clamp(34px, 10vw, 52px); }
  .manifesto-grid {
    grid-template-columns: 1fr;
    background: transparent;
    gap: 12px;
  }
  .manifesto-grid p {
    min-height: 0;
    padding: 18px 0;
    border-top: 1px solid rgba(148, 163, 184, .16);
    background: transparent;
  }
  .moldova-band {
    min-height: 360px;
    padding: 28px 20px;
  }
  .moldova-band::before { left: 24px; top: 48%; width: 72%; }
  .moldova-band::after { right: 18px; top: 24px; width: 110px; height: 110px; }
  .moldova-band h2 { font-size: clamp(40px, 15vw, 64px); }
  .moldova-band p { margin-top: 38px; }
  .services-intro { padding: 108px 0 54px; }
  .portfolio-hero { min-height: 540px; padding: 104px 0 58px; background-position: 18% center; }
  .portfolio-hero::before { background: radial-gradient(ellipse 100% 88% at 12% 46%, rgba(3, 12, 24, .54), rgba(4, 15, 29, .22) 58%, transparent 82%); }
  .portfolio-hero-inner { display: block; }
  .portfolio-hero-copy, .portfolio-hero h1, .portfolio-hero .intro-copy { max-width: 100%; }
  .portfolio-hero h1 { font-size: clamp(36px, 10vw, 44px); }
  .portfolio-title-line-secondary { font-size: .86em; }
  .portfolio-showcase { padding-bottom: 0; }
  .portfolio-case, .portfolio-case-reverse { display: grid; grid-template-columns: 1fr; gap: 26px; min-height: 0; margin-bottom: 24px; padding: 24px 20px; }
  .portfolio-case-reverse .portfolio-case-content, .portfolio-case-reverse .portfolio-visual { order: initial; }
  .portfolio-case-meta { margin-bottom: 18px; }
  .portfolio-case h2 { font-size: clamp(30px, 9vw, 44px); }
  .portfolio-case p { font-size: 14px; }
  .portfolio-feature-list li { width: 100%; }
  .portfolio-link { width: 100%; justify-content: center; }
  .portfolio-visual { min-height: 0; aspect-ratio: 16 / 9; }
  .services-intro-inner { display: block; }
  .services-intro h1 { font-size: clamp(38px, 10vw, 56px); }
  .intro-copy { font-size: 15px; }
  .page-marker { display: inline-block; margin-top: 28px; }
  .service-catalog { padding-bottom: 70px; }
  .catalog-heading { display: block; }.catalog-heading > p:last-child { margin-top: 8px; }
  .catalog-layout { display: block; }
  .service-tab { grid-template-columns: 34px 1fr 26px; min-height: 62px; padding: 0 10px; }
  .service-tab:hover { padding-left: 14px; }
  .service-panel { min-height: 420px; margin-top: 22px; padding: 26px 22px; }
  .service-columns { grid-template-columns: 1fr; gap: 24px; }
  .service-panel-content { max-width: 100%; }.service-description { font-size: 14px; }
  .process-section { padding-bottom: 66px; }.process-section h2 { font-size: 27px; }.process-list { grid-template-columns: 1fr; gap: 24px; }.process-list::before { top: 14px; bottom: 14px; left: 14px; width: 1px; height: auto; background: linear-gradient(var(--color-primary), transparent); }.process-list li { grid-template-columns: 29px 1fr; align-items: center; gap: 14px; }
  .header { height: 68px; }
  .header-actions { gap: 8px; }
  .btn.btn-header { display: none; }
  .nav-mobile-toggle { display: block; }
  .nav-mobile {
    position: fixed;
    inset: 68px 0 0;
    z-index: var(--z-modal);
    display: flex;
    visibility: hidden;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(26px, 7vh, 48px) clamp(18px, 6vw, 28px) 28px;
    background:
      radial-gradient(ellipse 76% 42% at 86% 4%, rgba(60, 132, 171, .08), transparent 72%),
      linear-gradient(145deg, rgba(12, 27, 42, .985), rgba(8, 19, 31, .985));
    opacity: 0;
    transform: translateY(-10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
  }

  .nav-mobile.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-mobile .nav-menu {
    display: flex;
    width: min(100%, 480px);
    margin: 0 auto;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-mobile .nav-menu li {
    border-bottom: 1px solid rgba(150, 187, 209, .11);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .nav-mobile .nav-menu li:first-child {
    border-top: 1px solid rgba(150, 187, 209, .11);
  }

  .nav-mobile.active .nav-menu li {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-mobile.active .nav-menu li:nth-child(1) { transition-delay: 35ms; }
  .nav-mobile.active .nav-menu li:nth-child(2) { transition-delay: 65ms; }
  .nav-mobile.active .nav-menu li:nth-child(3) { transition-delay: 95ms; }
  .nav-mobile.active .nav-menu li:nth-child(4) { transition-delay: 125ms; }
  .nav-mobile.active .nav-menu li:nth-child(5) { transition-delay: 155ms; }

  .nav-mobile .nav-link {
    min-height: 56px;
    width: 100%;
    padding: 7px 10px 7px 18px;
    border-radius: 0;
    color: rgba(231, 239, 244, .82);
    background: transparent;
    font-size: clamp(23px, 7vw, 28px);
    font-weight: 580;
  }

  .nav-mobile .nav-link::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    width: 2px;
    height: 24px;
    background: linear-gradient(180deg, #77c5e8, rgba(80, 170, 213, .18));
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
  }

  .nav-mobile .nav-link:hover {
    color: #f5f9fb;
    background: transparent;
    transform: none;
  }

  .nav-mobile .nav-link.active {
    color: #f5f9fb;
    background: transparent;
    box-shadow: none;
  }

  .nav-mobile .nav-link.active::after {
    display: block;
    transform: translateY(-50%) scaleY(1);
  }

  .nav-mobile-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: min(100%, 480px);
    min-height: 52px;
    max-height: 56px;
    margin: 28px auto 0;
    padding: 12px 18px;
    flex: 0 0 auto;
    overflow: hidden;
    color: #f0f7fa;
    border: 1px solid rgba(125, 211, 252, .62);
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(125, 211, 252, .1), rgba(37, 103, 139, .05)), rgba(27, 70, 97, .46);
    box-shadow: inset 0 1px 0 rgba(219, 240, 250, .1), 0 7px 18px rgba(2, 12, 23, .12);
    font-size: 14px;
    font-weight: 650;
    opacity: 0;
    transform: translateY(8px);
    transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease 180ms, transform 200ms ease 180ms;
  }

  .nav-mobile-cta::before {
    position: absolute;
    top: 0;
    right: 12px;
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--nerivo-signal));
    content: '';
    opacity: .74;
  }

  .nav-mobile-cta::after {
    color: #83cceb;
    font-size: 15px;
    line-height: 1;
    content: '\2197';
    transition: transform 200ms ease;
  }

  .nav-mobile.active .nav-mobile-cta {
    opacity: 1;
    transform: translateY(0);
  }

  .nav-mobile-cta:hover {
    color: #fff;
    border-color: rgba(125, 211, 252, .78);
    background: linear-gradient(180deg, rgba(125, 211, 252, .14), rgba(43, 116, 155, .1)), rgba(31, 87, 117, .56);
    box-shadow: inset 0 1px 0 rgba(226, 245, 252, .13), 0 8px 20px rgba(5, 25, 40, .16);
    text-decoration: none;
    transform: translateY(-1px);
  }

  .nav-mobile-cta:hover::after {
    transform: translate(2px, -1px);
  }

  .nav-mobile-cta:active {
    border-color: rgba(125, 211, 252, .68);
    background: rgba(28, 72, 99, .6);
    box-shadow: inset 0 1px 2px rgba(2, 12, 23, .2);
    transform: translateY(0);
  }

  .nav-mobile-cta:focus-visible {
    outline: 2px solid rgba(125, 211, 252, .82);
    outline-offset: 3px;
    border-color: rgba(125, 211, 252, .82);
  }

  body.menu-open .header {
    background-color: rgba(10, 22, 35, .98);
  }
  body.menu-open { overflow: hidden; }
  .hero { min-height: calc(100vh - 68px); margin-top: -68px; padding-top: 68px; }
  main > .hero { padding-top: 68px; padding-bottom: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 48px; padding-bottom: 176px; }
  .hero h1 { font-size: clamp(42px, 11vw, 62px); }
  .hero-visual { width: min(108%, 560px); justify-self: center; }
  .browser-body { min-height: 210px; padding: 20px; }.browser-panel { min-height: 160px; padding: 14px; }
  .trust-row { right: 16px; bottom: 28px; left: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: 10px; }.trust-row > div { align-items: flex-start; flex-direction: column; gap: 4px; }.trust-icon { font-size: 15px; }
}

@media screen and (max-width: 389px) {
  .hero-grid { padding-top: 38px; }.hero h1 { font-size: 39px; }.hero-description { font-size: 15px; }.hero-actions { display: grid; grid-template-columns: 1fr; }.hero-actions .btn { width: 100%; }.visual-card-top { right: -2%; }.visual-card-bottom { right: 1%; }.browser-body { grid-template-columns: 30% 70%; padding: 14px; }.visual-card { min-width: 100px; padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .browser-window, .visual-card-top, .visual-card-bottom { animation: none; }
  .hero-content, .hero-visual { opacity: 1; transform: none; }

  .nav-mobile .nav-menu li,
  .nav-mobile-cta,
  .nav-mobile-cta::after {
    transition: none;
  }

  .nav-mobile.active .nav-menu li,
  .nav-mobile.active .nav-mobile-cta,
  .nav-mobile-cta:hover,
  .nav-mobile-cta:hover::after {
    transform: none;
  }
}

/* Скрыть десктопное меню на мобильных */
@media screen and (max-width: 767px) {
  .header-inner {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .nav-desktop {
    display: none;
  }

  .nav-mobile-toggle {
    display: block;
  }
}

/* Показать десктопное меню на планшетах и выше */
@media screen and (min-width: 768px) {
  .nav-mobile-toggle {
    display: none;
  }

  .nav-desktop {
    display: block;
  }

  .nav-mobile {
    display: none;
  }
}

/* ===== СЕТКА RESPONSIVENESS ===== */

/* Мобильный экран */
@media screen and (max-width: 480px) {
  .grid {
    gap: var(--space-lg);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Планшет */
@media screen and (min-width: 481px) and (max-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Десктоп */
@media screen and (min-width: 769px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== FLEXBOX ADAPTIVITY ===== */

@media screen and (max-width: 767px) {
  .flex-responsive {
    flex-direction: column;
  }

  .flex-responsive > * + * {
    margin-top: var(--space-lg);
  }
}

/* ===== ТИПОГРАФИЯ ДЛЯ МОБИЛЬНЫХ ===== */

@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  p {
    margin-bottom: var(--space-md);
  }
}

/* ===== ТАБЛИЦЫ НА МОБИЛЬНЫХ ===== */

@media screen and (max-width: 767px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
    width: 100%;
  }

  thead {
    display: none;
  }

  tr {
    margin-bottom: var(--space-lg);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  td {
    padding-left: 50%;
    position: relative;
    border: none;
    text-align: right;
  }

  td::before {
    content: attr(data-label);
    position: absolute;
    left: var(--space-md);
    font-weight: var(--font-weight-semibold);
    text-align: left;
  }
}

/* ===== КОНТАКТНЫЕ ФОРМЫ ===== */

@media screen and (max-width: 767px) {
  .form-row {
    flex-direction: column;
  }

  .form-group {
    margin-bottom: var(--space-lg);
  }

  .form-row .form-group {
    flex: 1 1 100%;
  }
}

/* ===== ДОСТУПНОСТЬ ===== */

@media screen and (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media screen and (prefers-color-scheme: dark) {
  /* Тёмная тема (основная) */
}

@media screen and (prefers-color-scheme: light) {
  /* Возможное расширение для светлой темы */
}

/* ===== ПЕЧАТЬ ===== */

@media print {
  .no-print,
  .header,
  .footer,
  .navigation {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }

  main {
    padding-top: 0;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }

  p {
    orphans: 2;
    widows: 2;
  }
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
  .header-inner { gap: 14px; }
  .nav-menu { gap: 0; }
  .nav-link { min-height: 38px; padding: 0 8px; font-size: 11px; }
  .nav-link::after { right: 8px; left: 8px; }
  .header-actions { gap: 9px; }
  .btn.btn-header { min-height: 36px; padding: 0 11px; font-size: 10px; }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
  .btn.btn-header { display: none; }
}

/* ===== ABOUT PAGE FINAL RESPONSIVE ===== */
@media screen and (max-width: 1180px) {
  .about-hero-inner,
  .approach-system,
  .manifesto-stage {
    grid-template-columns: 1fr;
  }

  .studio-visual {
    min-height: 300px;
  }

  .manifesto-sticky {
    position: relative;
    top: auto;
  }

  .about-page .about-editorial-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-page .approach-intro h2 {
    max-width: 760px;
  }

  .about-page .approach-intro p {
    max-width: 680px;
  }

  .about-page .about-approach {
    background-position: 54% center;
  }

  .about-page .about-beliefs {
    background-position: 64% center;
  }

  .about-page .about-moldova {
    background-position: 52% center;
  }

}

@media screen and (max-width: 900px) {
  .about-editorial-grid,
  .about-split,
  .about-section-heading {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .beliefs-editorial {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .belief-item:nth-child(1),
  .belief-item:nth-child(2),
  .belief-item:nth-child(3),
  .belief-item:nth-child(4) {
    grid-column: auto;
    transform: none;
  }

  .moldova-band {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
  .about-page .about-section,
  .about-page .about-beliefs,
  .about-page .about-contrast,
  .about-page .about-moldova {
    padding: 54px 0;
  }

  .about-page .about-hero {
    padding-top: 102px;
    padding-bottom: 46px;
  }

  .about-hero-copy h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .studio-visual {
    min-height: 0;
    aspect-ratio: auto;
    margin-top: 24px;
    padding: 50px 12px 40px;
  }

  .studio-system-label {
    top: 18px;
    left: 18px;
  }

  .studio-system-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .studio-system-stages {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin-top: 12px;
  }

  .studio-system-stages::before {
    display: none;
  }

  .studio-system-stage,
  .studio-system-stage-2,
  .studio-system-stage-3,
  .studio-system-stage-4 {
    position: relative;
    inset: auto;
    justify-items: start;
    min-width: 0;
    padding: 0 0 0 14px;
    text-align: left;
  }

  .studio-system-stage::before {
    top: 5px;
    right: auto;
    left: 0;
  }

  .studio-system-stage small {
    font-size: 6px;
  }

  .studio-system-status {
    right: auto;
    bottom: 12px;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 28px);
    transform: translateX(-50%);
    font-size: 7px;
    text-align: center;
  }

  .approach-board {
    min-height: 0;
  }

  .approach-steps {
    grid-template-columns: 1fr;
    padding: 18px;
  }

  .approach-step {
    min-height: 138px;
  }

  .approach-step b {
    margin-top: 26px;
  }

  .belief-item {
    min-height: 0;
    padding: 24px 20px;
  }

  .belief-item h3,
  .manifesto-point h3 {
    font-size: clamp(27px, 8.5vw, 38px);
  }

  .contrast-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }

  .contrast-row b::before {
    width: 38px;
  }

  .contrast-row:hover span,
  .contrast-row:hover strong {
    transform: none;
  }

  .manifesto-signal {
    height: 118px;
    margin-top: 24px;
  }

  .manifesto-point {
    min-height: 0;
    padding: 24px 20px;
    opacity: 1;
    transform: none;
  }

  .moldova-band {
    min-height: 330px;
  }

  .moldova-band h2 {
    font-size: clamp(38px, 14vw, 58px);
  }

  .home-node { left: 24%; top: 50%; }
  .away-one { right: 22%; top: 34%; }
  .away-two { right: 12%; bottom: 26%; }
  .route-one,
  .route-two {
    left: 26%;
    width: 64%;
  }

}

@media screen and (min-width: 901px) and (max-width: 1180px) {
  .about-hero-inner {
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  }

  .about-page .about-hero {
    background-position: 52% center;
  }

  .studio-visual {
    min-height: 300px;
  }
}

@media screen and (max-width: 900px) {
  .about-editorial-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .about-page .approach-intro h2,
  .about-page .approach-intro p {
    max-width: 680px;
  }

  .about-page .about-hero {
    background-position: 56% center;
  }

  .about-page .approach-board {
    min-height: 0;
  }

  .about-page .approach-steps {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 12px 0 0;
  }

  .about-page .approach-step,
  .about-page .approach-step:nth-child(n) {
    min-height: 0;
    margin-top: 0;
    padding: 0 0 34px 54px;
  }

  .about-page .approach-step:last-child {
    padding-bottom: 0;
  }

  .about-page .approach-step::before {
    top: 7px;
    left: 12px;
  }

  .about-page .approach-step::after {
    top: 16px;
    left: 16px;
    width: 1px;
    height: calc(100% - 8px);
    background: linear-gradient(180deg, rgba(17, 127, 173, .7), rgba(75, 154, 185, .28));
    transform: none;
  }

  .about-page .approach-step b {
    margin-top: 9px;
  }
}

@media screen and (max-width: 767px) {
  .about-page .about-hero::after {
    height: 64px;
  }

  .about-page .about-approach::after {
    height: 76px;
  }

  .about-page .about-beliefs::after {
    height: 58px;
  }

  .about-page .about-hero {
    padding-top: 96px;
    padding-bottom: 40px;
    background-position: 58% center;
  }

  .about-page .about-hero::before {
    background:
      linear-gradient(180deg, rgba(4, 13, 24, .28), rgba(5, 15, 27, .18) 62%, rgba(7, 18, 30, .9) 100%),
      linear-gradient(90deg, rgba(3, 12, 23, .86), rgba(5, 15, 27, .58) 72%, rgba(6, 17, 29, .34));
  }

  .about-page .about-approach,
  .about-page .about-beliefs {
    padding: 52px 0;
  }

  .about-page .about-approach {
    padding: 74px 0 88px;
    background-position: 42% center;
  }

  .about-page .about-approach::before {
    background:
      linear-gradient(180deg, #1d3444 0%, rgba(83, 113, 128, .8) 18px, rgba(185, 205, 214, .5) 44px, transparent 72px),
      radial-gradient(ellipse 110% 68% at 34% 42%, rgba(241, 246, 248, .5), transparent 78%),
      linear-gradient(90deg, rgba(230, 239, 242, .4), rgba(222, 233, 238, .28));
  }

  .about-page .about-beliefs {
    padding: 46px 0;
    background-position: 74% center;
  }

  .about-page .about-beliefs::before {
    background:
      linear-gradient(180deg, #0b1725 0%, rgba(7, 18, 30, .2) 10%, rgba(7, 18, 30, .18) 82%, rgba(8, 20, 32, .76) 100%),
      linear-gradient(90deg, rgba(4, 14, 25, .82) 0%, rgba(6, 18, 31, .68) 58%, rgba(4, 14, 25, .58) 100%),
      radial-gradient(ellipse 90% 42% at 70% 20%, rgba(76, 158, 195, .08), transparent 76%);
  }

  .approach-copy .about-section-label {
    margin-bottom: 20px;
  }

  .about-page .approach-intro h2 {
    margin-bottom: 22px;
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.02;
  }

  .about-page .approach-intro p {
    font-size: 14px;
    line-height: 1.65;
  }

  .about-page .approach-steps {
    padding-top: 6px;
  }

  .about-page .approach-step,
  .about-page .approach-step:nth-child(n) {
    padding: 0 0 30px 48px;
  }

  .about-page .approach-step:last-child {
    padding-bottom: 0;
  }

  .about-page .approach-step::before {
    left: 10px;
  }

  .about-page .approach-step::after {
    left: 14px;
  }

  .about-page .approach-step b {
    margin-top: 7px;
    font-size: 22px;
  }

  .about-page .approach-step small {
    max-width: 440px;
    margin-top: 8px;
  }

  .beliefs-editorial {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .beliefs-intro {
    padding-top: 0;
  }

  .beliefs-label {
    margin-bottom: 18px;
  }

  .beliefs-intro h2 {
    max-width: 100%;
    margin-bottom: 18px;
    font-size: clamp(38px, 12vw, 52px);
  }

  .beliefs-intro h2 span {
    white-space: normal;
  }

  .beliefs-intro-copy {
    max-width: 34rem;
    font-size: 13px;
  }

  .beliefs-list::before {
    top: 24px;
    bottom: 24px;
  }

  .about-beliefs .belief-item,
  .about-beliefs .belief-item:nth-child(1),
  .about-beliefs .belief-item:nth-child(2),
  .about-beliefs .belief-item:nth-child(3),
  .about-beliefs .belief-item:nth-child(4) {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 20px 0 20px 24px;
    border-right: 0;
  }

  .about-beliefs .belief-index {
    grid-row: 1 / span 2;
    grid-column: 1;
  }

  .belief-copy {
    grid-column: 2;
  }

  .about-beliefs .belief-item h3 {
    font-size: clamp(22px, 6.8vw, 27px);
  }

  .belief-annotation {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin-top: 8px;
    font-size: 10px;
  }

  .about-page .about-moldova {
    padding: 58px 0 82px;
    background-position: 54% center;
  }

  .about-page .about-moldova::before {
    background:
      linear-gradient(180deg, #081521 0%, rgba(5, 17, 29, .5) 10%, rgba(5, 17, 29, .12) 34%, rgba(5, 17, 29, .18) 74%, rgba(11, 22, 35, .48) 100%),
      linear-gradient(90deg, rgba(3, 12, 22, .52), rgba(5, 17, 29, .12) 52%, rgba(3, 12, 22, .42)),
      radial-gradient(ellipse 88% 58% at 50% 46%, rgba(84, 162, 193, .12), transparent 72%);
  }

  .about-page .about-moldova::after {
    height: 78px;
  }

  .about-page .moldova-band {
    min-height: 280px;
    padding-block: 28px;
    background:
      linear-gradient(180deg, rgba(5, 15, 27, .2), rgba(5, 15, 27, .24) 58%, rgba(7, 18, 30, .9) 100%),
      linear-gradient(90deg, rgba(3, 12, 23, .82), rgba(5, 15, 27, .58)),
      url('../assets/images/about-moldova-bg.webp') 58% center / cover no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .moldova-node::after,
  .beliefs-list::before {
    animation: none;
  }

  .studio-visual,
  .studio-system-media,
  .studio-system-media img,
  .studio-system-stage::before,
  .studio-system-stages::before,
  .approach-step,
  .approach-step::before,
  .approach-step::after,
  .approach-step b,
  .belief-item::after,
  .contrast-row span,
  .contrast-row strong,
  .manifesto-point {
    transition: none;
  }

  .approach-step:hover,
  .manifesto-point,
  .manifesto-point.is-active,
  .manifesto-point:hover {
    transform: none;
  }

  .about-beliefs .belief-item,
  .about-beliefs .belief-item > span {
    transition: none;
  }
}