@media (max-width: 980px) {
      header { align-items: flex-start; }
      nav { display: none; }

      .hero,
      .two-col,
      .about-intro-grid,
      .education-wrap,
      .help-layout {
        grid-template-columns: 1fr;
      }

      .portrait img { height: 520px; }

      .floating-card {
        left: 22px;
        right: 22px;
        bottom: 22px;
        max-width: none;
      }

      .approach,
      .formats,
      .story-grid,
      .diploma-grid {
        grid-template-columns: 1fr;
      }

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

    @media (max-width: 700px) {
      .page {
        width: min(100% - 18px, var(--max));
        margin: 10px auto;
        border-radius: 22px;
      }

      header { padding: 18px; }

      .hero,
      section {
        padding-left: 18px;
        padding-right: 18px;
      }

  
    .about-intro-grid {
      display: grid;
      grid-template-columns: 1.03fr .97fr;
      gap: 18px;
      align-items: stretch;
      margin-bottom: 18px;
    }

    .about-highlight {
      background: var(--sage);
      color: #fff;
      border-radius: var(--radius-lg);
      padding: clamp(24px, 4vw, 38px);
      border: 1px solid rgba(37,37,33,.08);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 260px;
    }

    .about-highlight p {
      margin-top: 16px;
      color: rgba(255,255,255,.84);
      font-size: 17px;
    }

    .about-highlight .quote {
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.12;
      letter-spacing: -.045em;
      font-weight: 620;
    }

    .story-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin: 18px 0 28px;
    }

    .story-card {
      background: #fff;
      border: 1px solid rgba(37,37,33,.08);
      border-radius: var(--radius-lg);
      padding: 22px;
      min-height: 190px;
    }

    .story-card span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: var(--sage-soft);
      color: var(--sage-dark);
      font-weight: 650;
      margin-bottom: 16px;
    }

    .story-card p {
      margin-top: 12px;
      color: var(--muted);
      font-size: 15px;
    }

    .values-title {
      margin: 10px 0 18px;
      font-size: 28px;
    }

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

      .edu-item {
        grid-template-columns: 1fr;
      }

      footer { flex-direction: column; }

      .btn,
      .hero-actions {
        width: 100%;
      }

      h1 { font-size: 38px; }

      .lightbox {
        padding: 12px;
      }

      .lightbox-top,
      .lightbox-bottom {
        align-items: flex-start;
      }
    }
    /* Улучшенная мобильная версия: меньше вертикального растягивания, короче отступы, компактнее карточки */
    @media (max-width: 700px) {
      body {
        line-height: 1.46;
      }

      .page {
        width: min(100% - 12px, var(--max));
        margin: 6px auto;
        border-radius: 18px;
      }

      header {
        min-height: auto;
        padding: 14px 16px;
        align-items: center;
        gap: 12px;
      }

      .brand strong {
        font-size: 14px;
      }

      .brand span {
        font-size: 11px;
      }

      header .btn.secondary {
        width: auto;
        min-height: 38px;
        padding: 0 14px;
        font-size: 12px;
      }

      .hero {
        padding: 30px 16px 42px;
        gap: 24px;
      }

      .eyebrow {
        margin-bottom: 14px;
        font-size: 13px;
      }

      .eyebrow::before {
        width: 24px;
      }

      h1 {
        font-size: clamp(30px, 9vw, 35px);
        line-height: 1.08;
        letter-spacing: -.04em;
      }

      .hero h1::after {
        width: 76%;
        height: 5px;
        margin-top: 16px;
      }

      h2 {
        font-size: clamp(27px, 8vw, 32px);
        line-height: 1.08;
      }

      h3 {
        font-size: 19px;
        line-height: 1.16;
      }

      .hero-subtitle {
        margin-top: 16px;
        font-size: 15.5px;
        line-height: 1.48;
      }

      .hero-actions {
        gap: 10px;
        margin-top: 22px;
      }

      .btn {
        min-height: 42px;
        padding: 0 18px;
        font-size: 13px;
      }

      .hero-note {
        margin-top: 16px;
        gap: 8px;
        font-size: 12px;
      }

      .hero-note span {
        padding: 6px 9px;
      }

      .portrait img {
        height: clamp(360px, 112vw, 450px);
        object-position: center 32%;
      }

      .portrait {
        border-radius: 24px;
      }

      .floating-card {
        position: static;
        margin-top: 12px;
        padding: 16px;
        border-radius: 18px;
      }

      .floating-card strong {
        font-size: 24px;
      }

      section {
        padding: 42px 16px;
      }

      .section-head {
        margin-bottom: 22px;
      }

      .section-head p {
        margin-top: 12px;
        padding-left: 13px;
        font-size: 15px;
        line-height: 1.48;
      }

      .section-head p::before {
        width: 2px;
      }

      .section-head h2::after {
        left: -4px;
        right: -6px;
        bottom: 2px;
        height: .28em;
      }

      .two-col,
      .about-intro-grid,
      .help-layout,
      .education-wrap {
        gap: 14px;
      }

      .lead-card,
      .about-highlight,
      .story-card,
      .value-card,
      .method-card,
      .format-card,
      .edu-item,
      details {
        padding: 18px;
        border-radius: 18px;
        min-height: auto;
      }

      .lead-card p + p {
        margin-top: 12px;
      }

      .about-highlight {
        gap: 16px;
      }

      .about-highlight .quote {
        font-size: 24px;
        line-height: 1.14;
      }

      .about-highlight p {
        font-size: 15px;
        line-height: 1.48;
      }

      .story-grid {
        gap: 10px;
        margin: 14px 0 22px;
      }

      .story-card span {
        width: 28px;
        height: 28px;
        margin-bottom: 12px;
      }

      .story-card p,
      .value-card p,
      .method-card p,
      .format-card p,
      .edu-text,
      details p,
      .notice {
        font-size: 14.5px;
        line-height: 1.48;
      }

      .values-title {
        margin: 4px 0 14px;
        font-size: 24px;
      }

      .values-grid {
        gap: 10px;
      }

      .help-card {
        padding: 20px;
        min-height: auto;
        border-radius: 20px;
      }

      .help-label {
        margin-bottom: 14px;
        font-size: 12px;
        padding: 7px 10px;
      }

      .clean-list {
        margin-top: 16px;
        gap: 9px;
      }

      .clean-list li {
        grid-template-columns: 18px 1fr;
        gap: 8px;
        font-size: 14.5px;
        line-height: 1.42;
      }

      .notice {
        margin-top: 12px;
        padding: 14px;
      }

      .approach,
      .formats {
        gap: 10px;
      }

      .method-card .tag {
        margin-bottom: 12px;
        font-size: 12px;
      }

      .education-photo img {
        height: clamp(330px, 105vw, 430px);
        object-position: center 28%;
      }

      .timeline {
        gap: 10px;
      }

      .edu-item {
        gap: 8px;
      }

      .edu-date {
        font-size: 13px;
      }

      .price {
        padding-top: 18px;
        font-size: 25px;
      }

      .price small {
        font-size: 12px;
      }

      summary {
        font-size: 15px;
        line-height: 1.3;
      }

      summary::after {
        font-size: 20px;
      }

      .contact {
        padding: 22px 18px;
        border-radius: 22px;
        gap: 18px;
      }

      .contact p {
        font-size: 15px;
        line-height: 1.48;
      }

      footer {
        padding: 22px 16px 28px;
        gap: 8px;
        font-size: 12px;
      }

      .soft-line {
        opacity: .10;
      }

      .stripe-divider {
        width: calc(100% - 32px);
      }

      .mini-stripe {
        width: 36px;
        margin-bottom: 10px;
      }

      .modal {
        width: calc(100% - 14px);
        border-radius: 20px;
      }

      .modal-inner {
        padding: 18px;
      }

      .modal-head {
        margin-bottom: 16px;
      }

      .diploma-card {
        min-height: auto;
      }

      .diploma-card img {
        height: 170px;
      }

      .diploma-card-body {
        padding: 16px;
      }

      .diploma-actions .btn {
        width: auto;
      }

      .lightbox-image-wrap img {
        max-height: calc(100vh - 150px);
        border-radius: 12px;
      }

      .nav-btn {
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
      }
    }

    @media (max-width: 420px) {
      h1 {
        font-size: 29px;
      }

      h2 {
        font-size: 26px;
      }

      .hero-subtitle,
      .section-head p {
        font-size: 14.5px;
      }

      .portrait img {
        height: 360px;
      }

      .education-photo img {
        height: 330px;
      }

      section {
        padding-top: 36px;
        padding-bottom: 36px;
      }

      .hero {
        padding-top: 26px;
      }
    }

    /* Мобильная логика v7: все смысловые текстовые блоки идут строго друг под другом */
    @media (max-width: 980px) {
      .two-col,
      .about-intro-grid,
      .story-grid,
      .values-grid,
      .help-layout,
      .approach,
      .education-wrap,
      .formats,
      .diploma-grid {
        grid-template-columns: 1fr !important;
      }

      .lead-card,
      .about-highlight,
      .story-card,
      .value-card,
      .help-card,
      .method-card,
      .format-card,
      .edu-item,
      details {
        width: 100%;
      }

      .story-grid,
      .values-grid,
      .approach,
      .formats,
      .timeline,
      .faq {
        gap: 12px;
      }

      .help-layout {
        gap: 14px;
      }

      .education-wrap {
        gap: 18px;
      }

      .about-intro-grid {
        gap: 14px;
      }
    }

    @media (max-width: 820px) {
      .page {
        width: min(100% - 14px, var(--max));
      }

      .hero {
        grid-template-columns: 1fr !important;
      }

      .section-content,
      .lead-card,
      .about-highlight,
      .story-card,
      .value-card,
      .help-card,
      .method-card,
      .format-card,
      .edu-item,
      .notice,
      details {
        max-width: 100%;
      }

      .value-card,
      .story-card,
      .method-card,
      .format-card {
        min-height: auto !important;
      }
    }