:root {
      --black: #111;
      --dark: #1f1f1f;
      --muted: #666;
      --soft: #f5f5f2;
      --line: #e8e6de;
      --yellow: #ffd400;
      --yellow-dark: #e8bd00;
      --white: #fff;
      --radius: 22px;
      --shadow: 0 20px 55px rgba(0, 0, 0, .09);
      --transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease, opacity .25s ease, visibility .25s ease
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: Manrope, system-ui, sans-serif;
      background: var(--white);
      color: var(--black);
      line-height: 1.55;
      overflow-x: hidden;
      min-height: 100vh;
      display: flex;
      flex-direction: column
    }

    main {
      flex: 1 0 auto
    }

    .footer {
      margin-top: auto
    }

    .container {
      width: min(1180px, calc(100% - 32px));
      margin: auto
    }

    .page {
      display: none
    }

    .page.active {
      display: block
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line)
    }

    .nav {
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--black);
      font-weight: 900;
      letter-spacing: 0;
      font-size: 22px
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 26px;
      list-style: none
    }

    .menu a,
    .drawer a {
      color: var(--dark);
      text-decoration: none;
      font-weight: 700;
      font-size: 14px
    }

    .menu a.active,
    .menu a:hover,
    .drawer a.active {
      color: #a98600
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .btn {
      border: 0;
      border-radius: 14px;
      padding: 14px 18px;
      font-weight: 800;
      font-size: 14px;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 9px;
      transition: var(--transition);
      white-space: nowrap
    }

    .btn-primary {
      background: var(--yellow);
      color: var(--black)
    }

    .btn-primary:hover {
      background: var(--yellow-dark);
      transform: translateY(-2px)
    }

    .btn-outline {
      border: 2px solid var(--black);
      color: var(--black);
      background: transparent
    }

    .btn-outline:hover {
      background: var(--black);
      color: var(--white)
    }

    .icon-btn {
      display: none;
      border: 0;
      background: var(--soft);
      width: 44px;
      height: 44px;
      border-radius: 14px;
      font-size: 20px
    }

    .drawer-backdrop {
      /* Restore display after critical.css's first-paint `display:none` (it's
         fixed + opacity:0, so it stays invisible until opened). */
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 80;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition)
    }

    .drawer-backdrop.active {
      opacity: 1;
      visibility: visible
    }

    .drawer {
      position: fixed;
      z-index: 90;
      inset: 0 0 0 auto;
      width: min(86vw, 380px);
      background: var(--white);
      padding: 22px;
      transform: translateX(100%);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      gap: 14px;
      box-shadow: -25px 0 60px rgba(0, 0, 0, .18)
    }

    .drawer.active {
      transform: translateX(0)
    }

    .drawer ul {
      list-style: none;
      display: grid;
      gap: 8px
    }

    .drawer a {
      display: flex;
      justify-content: space-between;
      padding: 16px;
      border-radius: 16px;
      background: var(--soft)
    }

    .hero {
      background: radial-gradient(circle at 85% 15%, rgba(255, 212, 0, .28), transparent 32%), linear-gradient(135deg, #fff 0%, #f6f4eb 100%);
      padding: 72px 0 44px
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 38px;
      align-items: center
    }

    .hero h1 {
      font-size: clamp(40px, 6vw, 74px);
      line-height: .98;
      letter-spacing: 0;
      font-weight: 900;
      margin-bottom: 20px
    }

    .hero h1 span {
      color: #d8b100
    }

    .hero p {
      font-size: 19px;
      color: var(--dark);
      max-width: 620px;
      margin-bottom: 28px
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 28px
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px
    }

    .stat {
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(0, 0, 0, .05);
      border-radius: 18px;
      padding: 14px
    }

    .stat strong {
      display: block;
      font-size: 24px;
      font-weight: 900
    }

    .stat span {
      font-size: 12px;
      color: var(--muted);
      font-weight: 700
    }

    .hero-visual {
      border-radius: 32px;
      background: #181818;
      padding: 16px;
      box-shadow: var(--shadow)
    }

    .section {
      padding: 78px 0
    }

    .section.soft {
      background: var(--soft)
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 30px
    }

    .section-title {
      font-size: clamp(30px, 4vw, 48px);
      line-height: 1.05;
      letter-spacing: 0;
      font-weight: 900
    }

    .section-text {
      color: var(--muted);
      max-width: 680px
    }

    .eyebrow {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 212, 0, .18);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 18px
    }

    .grid {
      display: grid;
      gap: 18px
    }

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

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

    .card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .03)
    }

    
    .direction-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      font-size: 22px;
      margin-bottom: 18px;
      background: var(--yellow)
    }

    .card h3 {
      font-size: 22px;
      line-height: 1.2;
      margin-bottom: 10px
    }

    .card p {
      color: var(--muted)
    }

    .direction-card,
    .price-card {
      display: flex;
      flex-direction: column;
      height: 100%
    }

    .direction-card .card-footer,
    .price-card .card-footer {
      margin-top: auto
    }

    .price {
      font-weight: 900;
      font-size: 20px
    }

    .price span {
      font-size: 13px;
      color: var(--muted);
      font-weight: 700
    }

    .trainer-photo {
      height: 230px;
      border-radius: 18px;
      background: linear-gradient(135deg, #ededed, #dcdcdc);
      display: grid;
      place-items: center;
      font-size: 54px;
      color: #aaa;
      margin-bottom: 18px;
      overflow: hidden
    }

    .trainer-photo img,
    .gallery-img img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .trainer-achievements {
      margin: 14px 0 0;
      padding-left: 18px;
      display: grid;
      gap: 7px;
      color: var(--muted);
      font-size: 14px
    }

    .trainer-achievements li {
      line-height: 1.35
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin: 12px 0
    }

    .tag {
      font-size: 12px;
      font-weight: 800;
      padding: 6px 9px;
      border-radius: 999px;
      background: var(--soft);
      color: #5a5200
    }

    .price-card {
      position: relative
    }

    .price-card.popular {
      border: 2px solid var(--yellow);
      box-shadow: var(--shadow)
    }

    .price-main {
      font-size: 40px;
      font-weight: 900;
      letter-spacing: 0;
      margin: 14px 0
    }

    .price-main span {
      font-size: 15px;
      color: var(--muted);
      font-weight: 800
    }

    .features-list {
      list-style: none;
      display: grid;
      gap: 10px;
      margin: 18px 0
    }

    .features-list li {
      display: flex;
      gap: 9px;
      color: var(--dark)
    }

    .faq-list {
      display: grid;
      gap: 12px;
      max-width: 980px;
      margin: 0 auto
    }

    .faq-item {
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 12px 34px rgba(15, 23, 42, .06);
      overflow: hidden
    }

    .faq-item {
      opacity: 1;
      transform: translateY(0)
    }

    .faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      width: 100%;
      min-height: 64px;
      padding: 18px 22px;
      border: 0;
      background: transparent;
      color: var(--dark);
      cursor: pointer;
      font-size: 18px;
      font-family: inherit;
      font-weight: 900;
      line-height: 1.25;
      text-align: left
    }

    .faq-question:focus-visible {
      outline: 3px solid rgba(255, 215, 0, .85);
      outline-offset: -6px
    }

    .faq-question::after {
      content: '+';
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--yellow);
      color: var(--dark);
      display: grid;
      place-items: center;
      font-size: 22px;
      line-height: 1;
      transition: transform .24s ease, background-color .24s ease
    }

    .faq-item.is-open .faq-question::after {
      transform: rotate(45deg)
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-4px);
      transition: max-height .32s ease, opacity .24s ease, transform .24s ease
    }

    .faq-item.is-open .faq-answer {
      opacity: 1;
      transform: translateY(0)
    }

    .faq-answer-inner {
      padding: 0 22px 22px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.65;
      max-width: 760px
    }

    .faq-answer a {
      color: #9a7800;
      font-weight: 900;
      text-decoration: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px
    }

    .faq-answer a:hover {
      color: var(--dark)
    }

    .faq-empty {
      padding: 22px;
      border: 1px dashed rgba(15, 23, 42, .18);
      border-radius: 18px;
      background: #fff;
      color: var(--muted);
      font-weight: 800;
      text-align: center
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-item {
        opacity: 1;
        transform: none;
        animation: none
      }

      .faq-answer {
        transition: none
      }
    }

    .features-list i {
      color: #b59200;
      margin-top: 4px
    }

    .gallery-img {
      height: 250px;
      border-radius: 18px;
      background: linear-gradient(135deg, #eee, #ddd);
      display: grid;
      place-items: center;
      color: #aaa;
      font-size: 40px;
      overflow: hidden;
      margin-bottom: 14px
    }

    .gallery-wall {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-auto-rows: 150px;
      gap: 12px
    }

    .gallery-tile {
      min-height: 0;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #ededed;
      box-shadow: var(--shadow);
      position: relative
    }

    .gallery-tile .gallery-img {
      width: 100%;
      height: 100% !important;
      aspect-ratio: auto !important;
      margin: 0;
      border-radius: 0 !important
    }

    .gallery-tile img {
      transition: transform .35s ease
    }

    .gallery-tile:hover img {
      transform: scale(1.04)
    }

    .gallery-tile:nth-child(6n+1) {
      grid-column: span 3;
      grid-row: span 2
    }

    .gallery-tile:nth-child(6n+2),
    .gallery-tile:nth-child(6n+5) {
      grid-column: span 3
    }

    .gallery-tile:nth-child(6n+3),
    .gallery-tile:nth-child(6n+4),
    .gallery-tile:nth-child(6n+6) {
      grid-column: span 2
    }

    @media(max-width:900px) {
      .gallery-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 180px
      }

      .gallery-tile,
      .gallery-tile:nth-child(n) {
        grid-column: span 1;
        grid-row: span 1
      }
    }

    .contact-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 24px
    }

    .contact-list {
      display: grid;
      gap: 12px
    }

    .contact-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 16px;
      border-radius: 18px;
      background: var(--white);
      border: 1px solid var(--line)
    }

    .contact-item i {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      background: var(--yellow);
      border-radius: 14px
    }

    .contact-item a {
      color: var(--black);
      font-weight: 800;
      text-decoration: none
    }

    .form {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow)
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .field {
      display: grid;
      gap: 7px;
      margin-bottom: 14px
    }

    .field label {
      font-size: 13px;
      font-weight: 900
    }

    .field input,
    .field select,
    .field textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 14px;
      padding: 14px 15px;
      font: inherit
    }

    .field textarea {
      min-height: 110px;
      resize: vertical
    }

    .map {
      position: relative;
      height: 260px;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid var(--line);
      margin-top: 12px;
      background: var(--line)
    }

    .footer {
      background: #111;
      color: #fff;
      padding: 48px 0 24px
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 28px
    }

    .footer a {
      color: #aaa;
      text-decoration: none
    }

    .footer p,
    .footer li {
      color: #aaa
    }

    .footer ul {
      list-style: none;
      display: grid;
      gap: 10px;
      margin-top: 14px
    }

    .footer h4 {
      margin-bottom: 14px
    }

    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 100;
      background: #111;
      color: #fff;
      border-radius: 16px;
      padding: 14px 18px;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(20px);
      transition: var(--transition)
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0)
    }

    .contact-form { position: relative; }

    .contact-form.is-submitted > *:not(.contact-form-success):not(.contact-form-checklist) {
      visibility: hidden;
      pointer-events: none;
    }

    .field--error > input,
    .field--error > select,
    .field--error > textarea {
      border-color: #d9342b;
      box-shadow: 0 0 0 3px rgba(217, 52, 43, .12);
    }

    .field--error .phone-input {
      border-color: #d9342b !important;
      box-shadow: 0 0 0 3px rgba(217, 52, 43, .12) !important;
      transition: none !important;
    }

    .field--error .premium-direction-trigger {
      border-color: #d9342b !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 0 0 3px rgba(217, 52, 43, .12) !important;
      transition: none !important;
    }

    .phone-input {
      display: flex;
      align-items: stretch;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      overflow: hidden;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    .phone-input:focus-within {
      border-color: rgba(17, 17, 17, .35);
    }

    .phone-input__prefix {
      flex: none;
      display: inline-flex;
      align-items: center;
      padding: 0 12px 0 15px;
      font: inherit;
      font-weight: 800;
      color: var(--brand-black, #111);
      background: rgba(255, 212, 0, .22);
      border-right: 1px solid rgba(17, 17, 17, .08);
      user-select: none;
      cursor: default;
    }

    .phone-input > input {
      flex: 1 1 auto;
      min-width: 0;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      padding: 14px 15px;
    }

    .field-error {
      margin: 0;
      font-size: 12.5px;
      font-weight: 700;
      line-height: 1.3;
      color: #d9342b;
    }

    .contact-form-checklist {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 16px;
      padding: 24px clamp(8px, 2.5%, 24px);
      pointer-events: none;
      opacity: 1;
      transition: opacity 320ms ease;
    }

    .contact-form-checklist.is-done {
      opacity: 0;
    }

    .contact-form-checklist__item {
      position: relative;
      display: flex;
      align-items: center;
      gap: 18px;
      width: 100%;
      max-width: 560px;
      margin: 0 auto;
      padding: 22px 24px;
      border-radius: 20px;
      background: var(--brand-white, #fffdf6);
      border: 1.5px solid rgba(17, 17, 17, .08);
      box-shadow: 0 1px 0 rgba(17, 17, 17, .03);
      opacity: 0;
      transform: translateY(16px) scale(.96);
      transition: opacity 300ms ease,
                  transform 380ms cubic-bezier(.18, .89, .32, 1.28),
                  background 300ms ease,
                  border-color 300ms ease,
                  box-shadow 300ms ease;
    }

    .contact-form-checklist__item.is-on {
      opacity: 1;
      transform: translateY(0) scale(1);
      background: var(--brand-white, #fffdf6);
      border-color: rgba(255, 212, 0, .65);
      box-shadow: 0 14px 28px -14px rgba(17, 17, 17, .22), 0 2px 0 rgba(255, 212, 0, .18), 0 1px 0 rgba(17, 17, 17, .03);
    }

    .contact-form-checklist__item-step {
      flex: none;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(17, 17, 17, .06);
      color: rgba(17, 17, 17, .55);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .02em;
      transition: background 260ms ease, color 260ms ease, transform 320ms cubic-bezier(.18, .89, .32, 1.28);
    }

    .contact-form-checklist__item.is-on .contact-form-checklist__item-step {
      background: var(--brand-yellow, #ffd400);
      color: var(--brand-black, #111);
      transform: scale(1.04);
    }

    .contact-form-checklist__item-label {
      flex: 1;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: .005em;
      color: var(--brand-black, #111);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .contact-form-checklist__item-tick {
      width: 40px;
      height: 40px;
      flex: none;
    }

    .contact-form-checklist__item-tick-circle {
      fill: none;
      stroke: var(--brand-yellow, #ffd400);
      stroke-width: 3;
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      transition: stroke-dashoffset 380ms ease;
    }

    .contact-form-checklist__item.is-on .contact-form-checklist__item-tick-circle {
      stroke-dashoffset: 0;
    }

    .contact-form-checklist__item-tick-mark {
      fill: none;
      stroke: var(--brand-black, #111);
      stroke-width: 3.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 20;
      stroke-dashoffset: 20;
      transition: stroke-dashoffset 240ms ease 220ms;
    }

    .contact-form-checklist__item.is-on .contact-form-checklist__item-tick-mark {
      stroke-dashoffset: 0;
    }

    .contact-form-success {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 24px;
      text-align: center;
      opacity: 0;
      transform: scale(.94);
      transition: opacity 280ms ease, transform 380ms cubic-bezier(.18, .89, .32, 1.28);
      pointer-events: none;
    }

    .contact-form-success.is-shown {
      opacity: 1;
      transform: scale(1);
    }

    .contact-form-success__canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .contact-form-success__check {
      width: 128px;
      height: 128px;
      margin: 0 auto 16px;
      display: block;
      position: relative;
    }

    .contact-form-success__check-circle {
      fill: none;
      stroke: var(--brand-yellow, #ffd400);
      stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 188;
      stroke-dashoffset: 188;
      animation: contact-success-circle 540ms 80ms ease forwards;
    }

    .contact-form-success__check-mark {
      fill: none;
      stroke: var(--brand-black, #111);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
      animation: contact-success-mark 320ms 560ms ease forwards;
    }

    @keyframes contact-success-circle {
      to { stroke-dashoffset: 0; }
    }

    @keyframes contact-success-mark {
      to { stroke-dashoffset: 0; }
    }

    .contact-form-success__title {
      margin: 0 0 6px;
      font-size: 30px;
      font-weight: 800;
      letter-spacing: .01em;
      color: var(--brand-black, #111);
      position: relative;
    }

    .contact-form-success__message {
      margin: 0;
      max-width: 360px;
      font-size: 16px;
      line-height: 1.5;
      color: rgba(17, 17, 17, .68);
      position: relative;
    }

    @media (prefers-reduced-motion: reduce) {
      .contact-form-success,
      .contact-form-checklist,
      .contact-form-checklist__item,
      .contact-form-checklist__item-tick-circle,
      .contact-form-checklist__item-tick-mark { transition: none; }
      .contact-form-success__check-circle,
      .contact-form-success__check-mark { animation: none; stroke-dashoffset: 0; }
    }

    .empty {
      grid-column: 1/-1;
      text-align: center;
      color: var(--muted);
      padding: 32px
    }

    .filters {
      display: flex;
      gap: 8px;
      overflow: auto;
      padding-bottom: 8px;
      margin-bottom: 18px
    }

    .filter-btn {
      border: 1px solid var(--line);
      background: #fff;
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 900;
      white-space: nowrap
    }

    .filter-btn.active {
      background: var(--black);
      color: #fff;
      border-color: var(--black)
    }

    .schedule-board {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .day-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 22px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .03)
    }

    .day-card h3 {
      font-size: 22px;
      margin-bottom: 16px
    }

    .schedule-summary {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin: 24px 0 32px
    }

    .summary-card {
      padding: 18px;
      border-radius: 20px;
      background: #fff;
      border: 1px solid var(--line)
    }

    .summary-card strong {
      display: block;
      font-size: 24px;
      font-weight: 900
    }

    .summary-card span {
      display: block;
      font-size: 13px;
      color: var(--muted);
      font-weight: 700;
      margin-top: 6px
    }

    .mobile-hint {
      display: none;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      margin: -14px 0 16px
    }

    .direction-card {
      min-height: 400px;
      display: flex;
      flex-direction: column
    }

    .direction-card p {
      min-height: 52px
    }

    .direction-card .card-footer {
      min-height: 58px;
      align-items: flex-end
    }

    .price-card {
      min-height: 430px
    }

    .price-card .features-list {
      margin-top: auto
    }

    .mobile-hint {
      display: none;
      color: var(--muted);
      font-size: 13px;
      margin: -12px 0 16px
    }

    @media(max-width:980px) {

      .menu,
      .nav-actions>.btn {
        display: none
      }

      .icon-btn {
        display: block
      }

      .hero-grid,
      .contact-grid {
        grid-template-columns: 1fr
      }

      .hero-visual {
        order: -1
      }

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

      .footer-grid {
        grid-template-columns: 1fr 1fr
      }

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

    @media(max-width:720px) {
      .mobile-hint {
        display: block
      }

      .hero {
        padding: 42px 0 26px
      }

      .hero h1 {
        font-size: 40px
      }

      .hero p {
        font-size: 17px
      }

      .stats,
      .grid-4,
      .grid-3,
      .form-row,
      .footer-grid,
      .schedule-board,
      .schedule-summary {
        grid-template-columns: 1fr
      }

      .nav {
        height: 64px
      }

      .section {
        padding: 54px 0
      }

      .card {
        padding: 20px
      }
    }

    .nav-contact-btn {
      display: inline-flex !important
    }

    @media(max-width:980px) {
      .nav-actions {
        display: flex;
        margin-left: auto
      }

      .nav-contact-btn {
        display: inline-flex !important;
        padding: 11px 12px;
        font-size: 13px
      }

      .nav-contact-btn i {
        display: none
      }

      .icon-btn {
        display: block
      }

      .schedule-summary {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px
      }

      .summary-card {
        padding: 12px
      }

      .summary-card strong {
        font-size: 20px
      }

      .mobile-hint {
        display: block
      }
    }

    @media(max-width:520px) {
      .brand {
        font-size: 18px
      }

      .nav {
        gap: 8px
      }

      .nav-contact-btn {
        padding: 10px 10px;
        font-size: 12px
      }
    }

    .weekly-mobile {
      display: none
    }

    
    .mobile-session.striking {
      --session-accent: #ffd400
    }

    
    .mobile-session.grappling {
      --session-accent: #b9d9ff
    }

    
    .mobile-session {
      border-left: 5px solid var(--session-accent, #ddd) !important
    }

    .mobile-day-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 16px;
      margin-bottom: 14px;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .03)
    }

    .mobile-day-card h3 {
      font-size: 22px;
      margin-bottom: 12px;
      position: sticky;
      top: 64px;
      background: #fff;
      z-index: 3;
      padding: 8px 0;
      border-bottom: 1px solid var(--line)
    }

    .mobile-session {
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 12px;
      display: grid;
      gap: 7px;
      margin-bottom: 10px
    }

    .mobile-session .time {
      font-weight: 900;
      color: #6f5a00
    }

    .mobile-session strong {
      font-size: 17px
    }

    .mobile-session span {
      font-size: 13px;
      font-weight: 800;
      color: var(--muted);
      display: flex;
      gap: 6px;
      align-items: center
    }

    @media(max-width:720px) {

      .weekly-mobile {
        display: block
      }

      .schedule-summary {
        display: none
      }

      .mobile-hint {
        display: none !important
      }
    }


    /* Final schedule/trainer fixes */
    #trainerFilters {
      display: flex !important;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 8px;
      margin-bottom: 18px
    }

    .trainer-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 120;
      background: rgba(0, 0, 0, .58);
      display: grid;
      place-items: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition)
    }

    .trainer-modal-backdrop.active {
      opacity: 1;
      visibility: visible
    }

    .trainer-modal {
      position: relative;
      width: min(440px, 100%);
      max-height: calc(100vh - 40px);
      overflow: auto
    }

    .trainer-modal .card {
      box-shadow: var(--shadow);
      border-radius: 24px
    }

    .trainer-modal-close {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 2;
      width: 42px;
      height: 42px;
      border: 0;
      border-radius: 14px;
      background: rgba(17, 17, 17, .82);
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      font-size: 18px
    }

    .trainer-modal-close:hover {
      background: #000
    }

    .trainer-social-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: max-content;
      max-width: 100%;
      margin: 10px 0 2px;
      padding: 8px 11px;
      border-radius: 999px;
      background: var(--black);
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.1
    }

    .trainer-social-link span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      /* overflow:hidden (needed for the ellipsis) also clips vertically; the
         link's tight line-height:1.1 left no room below the baseline, shaving
         descenders (the loop of "g" in Instagram/Telegram, also y/p). Give the
         line box enough height to contain them. */
      line-height: 1.35
    }

    .trainer-social-link i {
      font-size: 11px;
      color: var(--yellow)
    }

    .trainer-social-link:hover,
    .trainer-social-link:focus-visible {
      background: #9a7800;
      color: #fff
    }

    .trainer-card {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 14px !important;
      overflow: hidden;
      border-color: rgba(17, 17, 17, .08) !important;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 252, 239, .9)),
        #fff !important;
    }

    .trainer-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: 4px;
      background: linear-gradient(90deg, var(--premium-yellow), rgba(112, 183, 255, .85));
      opacity: .92;
    }

    .trainer-card .trainer-photo {
      margin: 0;
      border-radius: 12px !important;
      background:
        radial-gradient(circle at 25% 20%, rgba(255, 212, 0, .32), transparent 34%),
        linear-gradient(135deg, #f4f4f4, #d9dee5);
      color: rgba(17, 17, 17, .26);
    }

    .trainer-card-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 16px 2px 2px;
    }

    .trainer-specialties {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      width: 100%;
    }

    .trainer-specialty {
      --trainer-specialty-color: var(--premium-yellow);
      min-height: 30px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      max-width: 100%;
      padding: 7px 10px;
      border: 1px solid color-mix(in srgb, var(--trainer-specialty-color) 46%, rgba(17, 17, 17, .16));
      border-radius: 9px;
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--trainer-specialty-color) 18%, #fff 82%),
          color-mix(in srgb, var(--trainer-specialty-color) 9%, #fff 91%));
      color: #171717;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
      font-size: 13px;
      font-weight: 900;
      line-height: 1.1;
    }

    .trainer-specialty-dot {
      flex: 0 0 9px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--trainer-specialty-color);
      box-shadow:
        0 0 0 3px color-mix(in srgb, var(--trainer-specialty-color) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, .48);
    }

    .trainer-card-name {
      margin: 0 !important;
      font-size: clamp(20px, 2vw, 24px);
      line-height: 1.08;
      letter-spacing: 0;
    }

    .trainer-experience {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: rgba(17, 17, 17, .68);
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
    }

    .trainer-experience i {
      color: #9a7800;
      font-size: 13px;
    }

    .trainer-card .trainer-social-link {
      --trainer-social-brand: var(--premium-ink);
      --trainer-social-brand-hover: #000;
      --trainer-social-soft: rgba(17, 17, 17, .08);
      --trainer-social-on-brand: #fff;
      width: 100%;
      min-height: 42px;
      justify-content: space-between;
      margin: auto 0 0;
      padding: 8px 12px 8px 8px;
      border-radius: 9px;
      border: 1px solid color-mix(in srgb, var(--trainer-social-brand) 20%, transparent);
      background: var(--trainer-social-soft);
      color: var(--trainer-social-brand);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 10px 22px rgba(17, 17, 17, .05);
    }

    .trainer-card .trainer-social-label {
      flex: 1;
      min-width: 0;
    }

    .trainer-card .trainer-social-link i {
      flex: 0 0 auto;
      color: currentColor;
    }

    .trainer-card .trainer-social-mark {
      flex: 0 0 30px;
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--trainer-social-brand);
      color: var(--trainer-social-on-brand);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    }

    .trainer-card .trainer-social-mark i {
      color: currentColor !important;
      font-size: 14px;
    }

    .trainer-card .trainer-social-mark svg {
      width: 18px;
      height: 18px;
      display: block;
    }

    .trainer-card .trainer-social-link.trainer-social-link--telegram {
      --trainer-social-brand: #229ed9;
      --trainer-social-brand-hover: #1688bd;
      --trainer-social-soft: rgba(34, 158, 217, .12);
      --trainer-social-on-brand: #fff;
    }

    .trainer-card .trainer-social-link.trainer-social-link--whatsapp {
      --trainer-social-brand: #25d366;
      --trainer-social-brand-hover: #128c7e;
      --trainer-social-soft: rgba(37, 211, 102, .13);
      --trainer-social-on-brand: #fff;
    }

    .trainer-card .trainer-social-link.trainer-social-link--instagram {
      --trainer-social-brand: #dd2a7b;
      --trainer-social-brand-hover: #c13584;
      --trainer-social-soft: rgba(221, 42, 123, .12);
      --trainer-social-on-brand: #fff;
    }

    .trainer-card .trainer-social-link.trainer-social-link--tiktok {
      --trainer-social-brand: #111111;
      --trainer-social-brand-hover: #000;
      --trainer-social-soft: rgba(0, 242, 234, .13);
      --trainer-social-on-brand: #fff;
    }

    .trainer-card .trainer-social-link--tiktok .trainer-social-mark {
      background:
        linear-gradient(135deg, #25f4ee 0 32%, #111 32% 68%, #fe2c55 68% 100%);
      color: #fff;
    }

    .trainer-card .trainer-social-link.trainer-social-link--vk {
      --trainer-social-brand: #0077ff;
      --trainer-social-brand-hover: #0069e0;
      --trainer-social-soft: rgba(0, 119, 255, .12);
      --trainer-social-on-brand: #fff;
    }

    .trainer-card .trainer-social-link.trainer-social-link--youtube {
      --trainer-social-brand: #ff0000;
      --trainer-social-brand-hover: #c70000;
      --trainer-social-soft: rgba(255, 0, 0, .1);
      --trainer-social-on-brand: #fff;
    }

    .trainer-card .trainer-social-link.trainer-social-link--max {
      --trainer-social-brand: #007aff;
      --trainer-social-brand-hover: #007aff;
      --trainer-social-soft: rgba(0, 122, 255, .12);
      --trainer-social-on-brand: #fff;
    }

    .trainer-card .trainer-social-link:hover,
    .trainer-card .trainer-social-link:focus-visible {
      border-color: color-mix(in srgb, var(--trainer-social-brand-hover) 52%, transparent);
      background: var(--trainer-social-brand-hover);
      color: var(--trainer-social-on-brand);
      box-shadow: 0 14px 26px color-mix(in srgb, var(--trainer-social-brand-hover) 22%, transparent);
    }

    .trainer-card .trainer-achievements {
      width: 100%;
      margin: 2px 0 0;
      padding: 0;
      gap: 8px;
      list-style: none;
    }

    .trainer-card .trainer-achievements li {
      position: relative;
      padding-left: 16px;
      color: rgba(17, 17, 17, .66);
      font-size: 14px;
      line-height: 1.42;
    }

    .trainer-card .trainer-achievements li::before {
      content: '';
      position: absolute;
      left: 0;
      top: .58em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--premium-yellow);
      box-shadow: 0 0 0 3px rgba(255, 212, 0, .16);
    }

    .price-card-head {
      min-height: 142px;
      display: flex;
      flex-direction: column
    }

    .price-card-head h3 {
      min-height: 54px
    }

    .price-card-head p {
      margin-top: 0
    }

    .price-card .price-main {
      margin-top: 0
    }

    
    .mobile-session.striking {
      background: #fff8cc !important;
      border-color: #f0cf2d !important;
      border-left-color: #ffd400 !important
    }

    
    .mobile-session.grappling {
      background: #eef6ff !important;
      border-color: #a8cffc !important;
      border-left-color: #70b7ff !important
    }

    
    .mobile-session.other {
      background: #f4f4f4 !important;
      border-left-color: #cfcfcf !important
    }

    @media(max-width:720px) {

      .weekly-mobile {
        display: block !important
      }

      .mobile-day-card h3 {
        position: sticky;
        top: 64px
      }

      .mobile-session {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .04)
      }
    }

    /* Direction colors and compact schedule rows */
    .direction-card {
      border-top: 5px solid var(--direction-color, #ffd400)
    }

    
    .mobile-session[style*="--session-accent"] {
      border-left-color: var(--session-accent, #ddd) !important
    }

    .timeline-wrap {
      display: block;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      overflow: auto;
      box-shadow: 0 4px 18px rgba(0, 0, 0, .03)
    }

    .timeline-head {
      display: grid;
      grid-template-columns: 78px repeat(7, minmax(150px, 1fr));
      min-width: 1128px;
      position: sticky;
      top: 0;
      z-index: 3;
      background: #fff;
      border-bottom: 1px solid var(--line)
    }

    .timeline-head>div {
      padding: 14px;
      font-weight: 900;
      text-align: center
    }

    .timeline-body {
      display: grid;
      grid-template-columns: 78px repeat(7, minmax(150px, 1fr));
      min-width: 1128px
    }

    .timeline-day-column {
      border-right: 1px solid var(--line);
      background: #fff
    }

    .timeline-column {
      position: relative
    }

    .timeline-session {
      position: absolute;
      left: 6px;
      right: 6px;
      border-radius: 14px;
      padding: 8px 10px;
      border-left: 5px solid var(--session-accent, var(--yellow));
      background: linear-gradient(135deg, rgba(255, 212, 0, .18), #fff);
      box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
      overflow: hidden;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .timeline-session.grappling {
      background: linear-gradient(135deg, rgba(59, 130, 246, .16), #fff)
    }

    .timeline-session.striking {
      background: linear-gradient(135deg, rgba(255, 212, 0, .22), #fff)
    }

    .timeline-session strong {
      font-size: 13px;
      line-height: 1.1
    }

    .timeline-session span {
      color: var(--dark);
      line-height: 1.25
    }

    .weekly-mobile {
      display: none
    }

    @media(max-width:720px) {
      .timeline-wrap {
        display: none
      }

      .weekly-mobile {
        display: grid;
        gap: 14px
      }

      .mobile-day-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 16px
      }

      .mobile-day-card h3 {
        position: sticky;
        top: 64px;
        background: #fff;
        z-index: 2;
        padding: 8px 0 12px;
        margin: 0 0 8px;
        font-size: 22px
      }

      .mobile-session {
        border-left: 5px solid var(--session-accent, var(--yellow));
        background: linear-gradient(135deg, rgba(255, 212, 0, .18), #fff);
        border-radius: 16px;
        padding: 12px;
        margin: 10px 0;
        display: grid;
        gap: 6px
      }

      .mobile-session.grappling {
        background: linear-gradient(135deg, rgba(59, 130, 246, .16), #fff)
      }

      .mobile-session .time {
        font-weight: 900;
        color: #6f5a00
      }
    }



    /* Final corrections: readable schedule cards */
    .timeline-head {
      grid-template-columns: 78px repeat(7, minmax(210px, 1fr)) !important;
      min-width: 1548px !important;
    }

    .timeline-body {
      grid-template-columns: 78px repeat(7, minmax(210px, 1fr)) !important;
      min-width: 1548px !important;
    }

    .timeline-session {
      padding: 7px 9px !important;
      gap: 2px !important;
      min-height: 44px;
      overflow: hidden !important;
    }

    .timeline-session strong,
    .timeline-session span {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.15 !important;
    }

    .timeline-session strong {
      font-size: 12.5px !important;
    }

    @media(max-width:720px) {
      .timeline-wrap {
        display: none !important
      }

      .weekly-mobile {
        display: block !important
      }

      .mobile-session span,
      .mobile-session strong {
        overflow-wrap: anywhere
      }

      .mobile-session {
        border-left: 5px solid var(--session-accent, var(--yellow)) !important
      }
    }

    /* Featured directions and readable schedule cards */
    .timeline-head,
    .timeline-body {
      grid-template-columns: var(--timeline-grid) !important;
      min-width: var(--timeline-min-width) !important;
    }

    .timeline-day-column {
      min-width: 230px;
    }

    .timeline-session {
      padding: 8px !important;
      gap: 4px !important;
      min-height: 88px;
      overflow: hidden !important;
    }

    .timeline-session .schedule-card-row,
    .mobile-session .schedule-card-row {
      display: grid !important;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 6px;
      align-items: start;
      line-height: 1.15 !important;
      white-space: normal !important;
      overflow: visible !important;
    }

    .timeline-session .schedule-card-row span,
    .mobile-session .schedule-card-row span {
      font-size: 9.5px !important;
      line-height: 1.1 !important;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--muted) !important;
      font-weight: 900 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .timeline-session .schedule-card-row b,
    .mobile-session .schedule-card-row b {
      font-size: 11px !important;
      line-height: 1.15 !important;
      color: var(--black) !important;
      font-weight: 900 !important;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .timeline-session .schedule-card-time b,
    .mobile-session .schedule-card-time b {
      color: #6f5a00 !important;
      font-size: 11.5px !important;
    }

    @media(max-width:720px) {
      .mobile-session .schedule-card-row {
        grid-template-columns: 86px minmax(0, 1fr)
      }

      .mobile-session .schedule-card-row span {
        font-size: 10px !important
      }

      .mobile-session .schedule-card-row b {
        font-size: 13px !important
      }

      .mobile-session {
        gap: 8px !important
      }
    }


    /* Final schedule card formatting: no visible field labels, one value per line */
    .timeline-session,
    .mobile-session {
      gap: 3px !important;
      line-height: 1.15 !important;
    }

    .timeline-session .schedule-card-row,
    .mobile-session .schedule-card-row {
      display: block !important;
      line-height: 1.15 !important;
      min-height: 0 !important;
    }

    .timeline-session .schedule-card-row span,
    .mobile-session .schedule-card-row span {
      display: none !important;
    }

    .timeline-session .schedule-card-row b,
    .mobile-session .schedule-card-row b {
      display: block !important;
      white-space: normal !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      -webkit-line-clamp: 1 !important;
      -webkit-box-orient: vertical !important;
      font-weight: 900 !important;
      line-height: 1.16 !important;
    }

    .timeline-session .schedule-card-time b,
    .mobile-session .schedule-card-time b {
      color: #6f5a00 !important;
    }

    .timeline-session {
      min-height: 78px !important;
      padding: 8px 9px !important;
    }

    .mobile-session .schedule-card-row b {
      font-size: 14px !important;
    }

    @media(max-width:720px) {
      .mobile-session {
        padding: 13px !important;
        gap: 5px !important
      }

      .mobile-session .schedule-card-row b {
        -webkit-line-clamp: 2 !important
      }
    }

    /* Visual tuning for schedule cards */

    .timeline-session,
    .mobile-session {
      box-sizing: border-box !important
    }

    .timeline-session .schedule-card-row b,
    .mobile-session .schedule-card-row b {
      font-weight: 500 !important;
      font-size: 12.5px !important;
      line-height: 1.22 !important;
      letter-spacing: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: block !important
    }

    .timeline-session .schedule-card-time b,
    .mobile-session .schedule-card-time b {
      font-weight: 600 !important;
      color: #5f4c00 !important
    }

    .timeline-session {
      padding: 9px 11px !important;
      min-width: 0 !important
    }

    .mobile-session .schedule-card-row b {
      font-size: 14px !important;
      white-space: normal !important
    }

    @media(max-width:720px) {
      .mobile-session .schedule-card-row b {
        font-weight: 500 !important
      }

      .mobile-session .schedule-card-time b {
        font-weight: 600 !important
      }
    }

    /* Schedule card emphasis: time includes weekday, sport is highlighted */

    .timeline-session .schedule-card-time b,
    .mobile-session .schedule-card-time b {
      font-weight: 600 !important;
      color: #5f4c00 !important
    }

    .timeline-session .schedule-card-row b,
    .mobile-session .schedule-card-row b {
      font-size: 12.5px !important
    }

    @media(max-width:720px) {

      .mobile-session .schedule-card-row b {
        font-size: 14px !important
      }
    }

    /* Alignment fix for schedule card header: keep original emphasis, align only outer line */
    .timeline-session,
    .mobile-session {
      padding-left: 11px !important;
      padding-right: 11px !important;
    }

    .timeline-session .schedule-card-time,
    .mobile-session .schedule-card-time {
      margin: 0 !important;
      padding: 0 !important;
    }

    .timeline-session .schedule-card-time b,
    .mobile-session .schedule-card-time b {
      display: flex !important;
      align-items: center !important;
      gap: 7px !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      line-height: 1.18 !important;
      font-weight: 600 !important;
      color: #5f4c00 !important;
    }

    .timeline-session .schedule-card-time .inline-direction,
    .mobile-session .schedule-card-time .inline-direction {
      display: inline-block !important;
      margin: 0 !important;
      padding: 2px 8px 2px 0 !important;
      border-radius: 0 999px 999px 0 !important;
      background: var(--session-accent, var(--yellow)) !important;
      color: #111 !important;
      font-weight: 700 !important;
      line-height: 1.12 !important;
      max-width: 52% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    .timeline-session .schedule-card-time .inline-time,
    .mobile-session .schedule-card-time .inline-time {
      display: inline !important;
      margin: 0 !important;
      padding: 0 !important;
      min-width: max-content !important;
      color: #5f4c00 !important;
      font-weight: 600 !important;
    }

    .timeline-session .schedule-card-row:not(.schedule-card-time),
    .mobile-session .schedule-card-row:not(.schedule-card-time) {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    .timeline-session .schedule-card-row:not(.schedule-card-time) b,
    .mobile-session .schedule-card-row:not(.schedule-card-time) b {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    /* Two-coach slots: each trainer on its own line so the second name is never
       clipped by the single-line nowrap+ellipsis used for the other rows. */
    .timeline-session .schedule-card-row.schedule-card-trainer b,
    .mobile-session .schedule-card-row.schedule-card-trainer b {
      white-space: normal !important;
      overflow: visible !important;
      display: block !important;
      -webkit-line-clamp: none !important;
    }

    .timeline-session .schedule-card-trainer .sch-trainer-name,
    .mobile-session .schedule-card-trainer .sch-trainer-name {
      display: block !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      /* .schedule-card-row span styles the hidden field labels (9.5px, uppercase,
         muted) — neutralize that here so trainer names match the <b> value text. */
      font-size: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
      color: inherit !important;
      text-transform: none !important;
      letter-spacing: normal !important;
    }

    @media(max-width:720px) {
      .mobile-session .schedule-card-time b {
        gap: 6px !important
      }

      .mobile-session .schedule-card-time .inline-direction {
        max-width: 55% !important
      }
    }

    /* Fix cropped direction badge: keep styling, increase safe inner spacing */
    .timeline-session,
    .mobile-session {
      padding-left: 15px !important;
      padding-right: 13px !important;
    }

    .timeline-session .schedule-card-row,
    .mobile-session .schedule-card-row {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    .timeline-session .schedule-card-time b,
    .mobile-session .schedule-card-time b {
      gap: 7px !important;
      align-items: center !important;
    }

    .timeline-session .schedule-card-time .inline-direction,
    .mobile-session .schedule-card-time .inline-direction {
      padding: 2px 8px !important;
      border-radius: 999px !important;
      margin-left: 0 !important;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

    .timeline-session .schedule-card-time .inline-time,
    .mobile-session .schedule-card-time .inline-time {
      padding-left: 0 !important;
    }

    @media(max-width:720px) {
      .mobile-session {
        padding-left: 16px !important;
        padding-right: 14px !important
      }

      .mobile-session .schedule-card-time .inline-direction {
        padding: 2px 8px !important
      }
    }

    /* Time and weekday: keep the original color and a moderate readable size */
    .timeline-session .schedule-card-time .inline-time,
    .mobile-session .schedule-card-time .inline-time {
      font-size: 12.5px !important;
      font-weight: 600 !important;
      color: inherit !important;
      letter-spacing: 0 !important;
      line-height: 1.18 !important;
    }

    .timeline-session .schedule-card-time b,
    .mobile-session .schedule-card-time b {
      align-items: center !important;
    }

    @media(max-width:720px) {
      .mobile-session .schedule-card-time .inline-time {
        font-size: 13px !important;
        font-weight: 600 !important
      }
    }

    /* Vertical-stack desktop schedule: each day column is a flex column of
       naturally-flowing cards (no time axis, no absolute positioning, no
       empty time slots). Mobile is untouched — it still uses .weekly-mobile
       / .mobile-session below 720px. */
    .timeline-column {
      position: static !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      padding: 14px 8px !important;
    }

    .timeline-session {
      position: static !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      width: auto !important;
      height: auto !important;
    }

    /* Fit-all-days: drop the legacy 230px floor on day columns so 6-7 days
       share the viewport without horizontal scroll. Cards shrink to fit. */
    .timeline-day-column {
      min-width: 0 !important;
    }

    .timeline-session,
    .mobile-session {
      min-width: 0 !important;
    }

    /* Desktop schedule card header: stack direction badge and time on TWO
       SEPARATE LINES. Each line is sized independently of the other, so a
       narrow day column no longer has to accommodate "BADGE + TIME" side-by-
       side — the column width only has to fit the wider of the two strings.
       Mobile (.mobile-session) keeps the existing horizontal layout. */
    .timeline-session .schedule-card-time b {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      flex-wrap: nowrap !important;
      gap: 4px !important;
      white-space: normal !important;
      overflow: visible !important;
    }

    .timeline-session .schedule-card-time .inline-direction {
      display: inline-block !important;
      max-width: 100% !important;
      width: auto !important;
    }

    .timeline-session .schedule-card-time .inline-time {
      display: block !important;
      min-width: 0 !important;
      white-space: normal !important;
    }


    /* Logo image */
    .brand-with-logo {
      gap: 0;
      letter-spacing: 0;
      font-size: 0;
      line-height: 0;
      flex-shrink: 0;
    }

    .brand-logo-img {
      display: block;
      width: 188px;
      height: auto;
      max-height: 48px;
      object-fit: contain;
    }

    .drawer .brand-logo-img {
      width: 180px;
      max-height: 46px;
    }

    @media(max-width:720px) {
      .brand-logo-img {
        width: 156px;
        max-height: 42px
      }

      .drawer .brand-logo-img {
        width: 170px
      }
    }

    @media(max-width:420px) {
      .brand-logo-img {
        width: 138px;
        max-height: 38px
      }
    }

    .footer-logo-link {
      display: inline-flex;
      align-items: center;
      line-height: 0;
      text-decoration: none;
      margin-bottom: 12px;
    }

    .footer-logo-img {
      display: block;
      width: 210px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    .footer-brand-text {
      max-width: 360px;
      margin-top: 12px;
      color: #aaa;
    }

    @media(max-width:720px) {
      .footer-logo-img {
        width: 190px
      }
    }

    .footer-social-logo {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      object-fit: cover;
      display: inline-block;
      vertical-align: -4px;
    }


    /* Budget seats page */
    .budget-layout {
      display: grid;
      gap: 22px
    }

    .budget-feature {
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(320px, .58fr);
      gap: 22px;
      align-items: stretch
    }

    .budget-feature-copy {
      padding: 28px;
      border: 1px solid var(--line);
      border-radius: var(--premium-radius, 8px);
      background: #fff;
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 28px
    }

    .budget-feature-copy .section-head {
      margin: 0
    }

    .budget-feature-copy .section-title {
      max-width: 760px
    }

    .budget-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px
    }

    .budget-flow-item {
      position: relative;
      padding: 22px 18px 20px;
      min-height: 138px;
      border-radius: var(--premium-radius, 8px);
      background: linear-gradient(180deg, #ffffff 0%, #fffaeb 100%);
      border: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 16px;
      overflow: hidden;
      transition:
        border-color .22s var(--premium-ease-standard, cubic-bezier(.2, .8, .2, 1)),
        box-shadow .26s var(--premium-ease, cubic-bezier(.16, 1, .3, 1)),
        transform .22s var(--premium-ease, cubic-bezier(.16, 1, .3, 1))
    }

    .budget-flow-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--premium-yellow, #ffd400), transparent);
      opacity: .85
    }

    .budget-flow-item>span {
      display: block;
      font-family: var(--premium-display-font, Oswald, Manrope, system-ui, sans-serif);
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
      color: #8a7200;
      text-transform: none
    }

    .budget-flow-item strong {
      font-family: var(--premium-display-font, Oswald, Manrope, system-ui, sans-serif);
      font-size: clamp(15px, 1.45vw, 17px);
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: 0;
      color: var(--premium-ink, #101010);
      overflow-wrap: anywhere
    }

    @media(hover:hover) {
      .budget-flow-item:hover {
        border-color: var(--premium-line-strong, rgba(17, 17, 17, .2));
        box-shadow: var(--premium-shadow-rest, 0 18px 54px rgba(17, 17, 17, .07));
        transform: translateY(-2px)
      }
    }

    .budget-hero-img {
      border-radius: var(--premium-radius, 8px);
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      background: linear-gradient(135deg, #ededed, #dcdcdc);
      display: grid;
      place-items: center;
      aspect-ratio: 4/5;
      /* The cell stretches to the .budget-feature row height (driven by copy
         content). Without an explicit width, aspect-ratio + stretched height
         pushes the box wider than its grid track, so its right edge would
         drift past the rules row below. Lock width to the track and let the
         inner <img object-fit: cover> crop. */
      width: 100%;
      min-width: 0
    }

    .budget-hero-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .budget-rules {
      counter-reset: rule;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px
    }

    .budget-rule {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--premium-radius, 8px);
      padding: 26px;
      display: grid;
      gap: 16px;
      align-content: start;
      min-height: 100%
    }

    .budget-rule-number {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 212, 0, .18);
      color: #8a7200;
      box-shadow: inset 0 0 0 1px rgba(255, 212, 0, .32);
      display: grid;
      place-items: center;
      font-weight: 900;
      font-size: 16px
    }

    .budget-rule h3 {
      margin-bottom: 8px;
      line-height: 1.2;
      font-family: var(--premium-display-font, Oswald, Manrope, system-ui, sans-serif);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 0
    }

    .budget-rule p {
      color: var(--muted);
      line-height: 1.62
    }

    .budget-rule ul {
      margin: 12px 0 0 18px;
      color: var(--muted);
      line-height: 1.6
    }

    .budget-rule li {
      margin: 6px 0
    }

    .footer-social-list a {
      display: inline-flex;
      gap: 8px;
      align-items: center
    }

    @media(max-width:980px) {
      .budget-feature {
        grid-template-columns: 1fr
      }

      .budget-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    @media(max-width:720px) {
      .budget-feature-copy {
        padding: 22px;
        gap: 22px
      }

      .budget-flow {
        grid-template-columns: 1fr
      }

      .budget-rules {
        grid-template-columns: 1fr
      }

      .budget-flow-item {
        min-height: 0;
        padding: 20px 20px 18px;
        gap: 14px
      }

      .budget-flow-item>span {
        font-size: 34px
      }

      .budget-flow-item strong {
        font-size: 17px
      }

      .budget-rule {
        padding: 22px;
        grid-template-columns: 1fr
      }

      .budget-rule-number {
        width: 38px;
        height: 38px;
        font-size: 15px
      }
    }

    /* Uploaded image slots: keep public containers aligned with the admin crop frame */
    .trainer-photo {
      height: auto !important;
      aspect-ratio: 3/2 !important;
    }

    .gallery-img {
      height: auto !important;
      aspect-ratio: 4/3 !important;
    }

    .budget-hero-img {
      height: auto !important;
      aspect-ratio: 4/5 !important;
    }

    @media(max-width:720px) {
      .budget-hero-img {
        height: auto !important;
        aspect-ratio: 4/5 !important;
      }
    }

    .footer-grid {
      grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr
    }

    @media(max-width:980px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:720px) {
      .footer-grid {
        grid-template-columns: 1fr
      }
    }

    /* home direction cards: trainer rows are visually anchored near the bottom, while the action button keeps a fixed gap */

    .direction-card .card-footer {
      margin-top: 16px !important;
    }

    .privacy-consent {
      margin: 12px 0 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
      text-align: center
    }

    .privacy-consent a,
    .footer-legal a,
    .privacy-content a {
      color: #9a7800;
      font-weight: 900;
      text-decoration: none
    }

    .privacy-consent a:hover,
    .footer-legal a:hover,
    .privacy-content a:hover {
      text-decoration: underline
    }

    .privacy-page .section {
      padding-top: 54px
    }

    .privacy-content {
      max-width: 920px
    }

    .privacy-content h2 {
      font-size: 24px;
      margin: 26px 0 10px
    }

    .privacy-content p,
    .privacy-content li {
      color: var(--dark);
      margin: 8px 0
    }

    .privacy-content ul {
      padding-left: 20px
    }

    .privacy-note {
      padding: 16px 18px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff8d8;
      color: var(--dark);
      font-weight: 700
    }

    .footer-legal {
      border-top: 1px solid rgba(255, 255, 255, .12);
      margin-top: 18px;
      padding-top: 16px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      color: #aaa;
      font-size: 14px
    }

    /* Premium redesign system: black, white, yellow; two consistent page backgrounds */
    :root {
      --surface-page: #fffaf0;
      --surface-band: #f1ede1;
      --surface-card: #fff;
      --surface-ink: #111;
      --surface-line: #e4ddcc;
      --surface-muted: #6a665d;
      --premium-shadow: 0 18px 44px rgba(17, 17, 17, .075);
      --premium-shadow-lg: 0 30px 74px rgba(17, 17, 17, .14);
      --premium-radius: 14px;
      --premium-radius-lg: 20px;
      --ease-premium: cubic-bezier(.16, 1, .3, 1);
      --ease-standard: cubic-bezier(.2, .8, .2, 1);
      --duration-small: 240ms;
      --duration-medium: 420ms
    }

    html {
      scroll-padding-top: 84px
    }

    body {
      background: var(--surface-page);
      -webkit-tap-highlight-color: rgba(255, 212, 0, .28)
    }

    body * {
      letter-spacing: 0 !important
    }

    html,
    body {
      max-width: 100%;
      overflow-x: hidden
    }

    .container {
      width: min(1160px, calc(100% - 32px))
    }

    .page,
    main {
      background: var(--surface-page)
    }

    .topbar {
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 12px 34px rgba(17, 17, 17, .052);
      border-bottom: 1px solid rgba(17, 17, 17, .07)
    }

    .nav {
      height: 72px
    }

    .brand-logo-img {
      filter: drop-shadow(0 8px 18px rgba(17, 17, 17, .08))
    }

    .menu {
      gap: 30px
    }

    .menu a {
      position: relative;
      color: #262626
    }

    .menu a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -12px;
      height: 3px;
      border-radius: 999px;
      background: var(--yellow);
      opacity: 0;
      transform: scaleX(.4);
      transform-origin: left;
      transition: opacity .22s var(--ease-standard), transform .22s var(--ease-standard)
    }

    .menu a.active,
    .menu a:hover {
      color: #111
    }

    .menu a.active::after,
    .menu a:hover::after {
      opacity: 1;
      transform: scaleX(1)
    }

    .hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--surface-page);
      padding: 74px 0 54px;
      border-bottom: 1px solid var(--surface-line)
    }

    .hero::before {
      content: "";
      position: absolute;
      left: max(16px, calc((100vw - 1160px)/2));
      top: 34px;
      width: 140px;
      height: 4px;
      background: var(--yellow);
      transform: skewX(-18deg);
      z-index: -1
    }

    .hero-grid {
      grid-template-columns: minmax(0, .9fr) minmax(430px, .92fr);
      gap: 58px;
      align-items: center
    }

    .hero-grid>* {
      min-width: 0
    }

    .hero h1,
    .section-title,
    .card h3,
    .price-main,
    .brand {
      font-family: Manrope, system-ui, sans-serif;
      letter-spacing: 0 !important;
      text-wrap: balance
    }

    .hero h1 {
      font-size: 64px;
      line-height: 1.02;
      font-weight: 900;
      max-width: 720px;
      margin-bottom: 22px
    }

    .hero h1 span {
      color: #111;
      position: relative;
      display: inline-block
    }

    .hero h1 span::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: .03em;
      height: .12em;
      background: var(--yellow);
      z-index: -1;
      transform: skewX(-12deg)
    }

    .hero p {
      font-size: 20px;
      line-height: 1.58;
      max-width: 650px;
      color: #252525;
      margin-bottom: 28px
    }

    .hero-actions {
      gap: 14px;
      margin-bottom: 28px
    }

    .hero-visual {
      position: relative;
      border-radius: var(--premium-radius-lg);
      background: #111;
      padding: 12px;
      box-shadow: var(--premium-shadow-lg)
    }

    .hero-visual {
      max-width: 100%;
      min-width: 0
    }

    .hero-visual::before {
      content: "";
      position: absolute;
      left: 18%;
      right: 12%;
      bottom: -10px;
      height: 18px;
      border-radius: 999px;
      background: var(--yellow);
      transform: skewX(-20deg);
      opacity: .95;
      z-index: -1
    }

    .stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      max-width: 640px
    }

    .stat {
      background: var(--surface-card);
      border: 1px solid var(--surface-line);
      border-radius: var(--premium-radius);
      box-shadow: 0 12px 30px rgba(17, 17, 17, .055);
      padding: 18px 16px
    }

    .stat strong {
      font-size: 27px;
      line-height: 1
    }

    .stat span {
      display: block;
      margin-top: 8px;
      color: var(--surface-muted)
    }

    .section {
      padding: 80px 0;
      background: var(--surface-page)
    }

    .section.soft {
      background: var(--surface-band)
    }

    #page-home>.section {
      background: var(--surface-page);
      border-top: 1px solid rgba(17, 17, 17, .045)
    }

    #page-home>.section:nth-of-type(even) {
      background: var(--surface-band)
    }

    #page-home>.section:nth-of-type(odd) {
      background: var(--surface-page)
    }

    .page>.section,
    .page>.section.soft {
      background: var(--surface-page)
    }

    .page:not(#page-home)>.section {
      min-height: calc(100vh - 72px)
    }

    .section-head {
      align-items: flex-start;
      margin-bottom: 34px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(17, 17, 17, .08)
    }

    .section-title {
      font-size: 42px;
      line-height: 1.1;
      font-weight: 900
    }

    .section-text,
    .card p,
    .privacy-content p,
    .privacy-content li {
      text-wrap: pretty;
      overflow-wrap: anywhere
    }

    .eyebrow {
      background: #fff5bd;
      border: 1px solid rgba(179, 139, 0, .18);
      color: #111;
      border-radius: 999px
    }

    .btn,
    .filter-btn,
    .trainer-social-link,
    .icon-btn,
    .drawer a {
      touch-action: manipulation;
      transition: background-color .22s var(--ease-standard), color .22s var(--ease-standard), border-color .22s var(--ease-standard), box-shadow .22s var(--ease-standard), transform .22s var(--ease-standard)
    }

    :where(a, button, input, select, textarea, summary, label, [role="button"], [tabindex]) {
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255, 212, 0, .22);
    }

    .btn {
      min-height: 50px;
      border-radius: 12px
    }

    .btn-primary {
      box-shadow: 0 12px 28px rgba(255, 212, 0, .24)
    }

    .btn-primary:hover {
      box-shadow: 0 16px 34px rgba(255, 212, 0, .32)
    }

    .btn-outline {
      background: rgba(255, 255, 255, .62)
    }

    .btn:active,
    .filter-btn:active {
      transform: translateY(0) scale(.98)
    }

    .card,
    .form,
    .day-card,
    .summary-card,
    .budget-rule {
      border: 1px solid rgba(17, 17, 17, .08);
      border-radius: var(--premium-radius);
      box-shadow: var(--premium-shadow);
      background: var(--surface-card)
    }

    .card {
      padding: 26px
    }

    .card h3 {
      font-size: 23px
    }

    
    .direction-icon {
      border-radius: 12px;
      background: #111;
      color: var(--yellow);
      box-shadow: inset 0 0 0 1px rgba(255, 212, 0, .22)
    }

    .direction-card {
      border-top: 4px solid var(--yellow)
    }

    .direction-card,
    .price-card {
      transition: box-shadow .22s var(--ease-standard), border-color .22s var(--ease-standard), transform .22s var(--ease-standard)
    }

    .direction-card:hover,
    .price-card:hover,
    .form:focus-within {
      box-shadow: 0 24px 58px rgba(17, 17, 17, .105);
      border-color: rgba(179, 139, 0, .36)
    }

    .direction-card:hover,
    .price-card:hover {
      transform: translateY(-3px)
    }

    .trainer-photo,
    .gallery-img {
      border-radius: 14px;
      background: #edeae0
    }

    .trainer-photo img,
    .gallery-img img,
    .budget-hero-img img {
      background: #e9e6dc
    }

    .filter-btn {
      border-radius: 10px
    }

    .price-card {
      justify-content: flex-start
    }

    .price-main {
      margin-top: auto;
      padding-top: 18px
    }

    .features-list li {
      align-items: flex-start
    }

    .contact-grid {
      grid-template-columns: .92fr 1.08fr;
      gap: 28px
    }

    .contact-item {
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(17, 17, 17, .045)
    }

    .form {
      border-radius: var(--premium-radius-lg);
      padding: 28px
    }

    .form:focus-within {
      transform: translateY(-1px)
    }

    .field input,
    .field select,
    .field textarea {
      border-radius: 12px;
      transition: border-color .2s var(--ease-standard), box-shadow .2s var(--ease-standard), background-color .2s var(--ease-standard)
    }

    .field input:focus-visible,
    .field select:focus-visible,
    .field textarea:focus-visible {
      border-color: var(--yellow);
      box-shadow: 0 0 0 4px rgba(255, 212, 0, .16)
    }

    .map {
      border-radius: 14px
    }

    .footer {
      background: #0f0f0f
    }

    .drawer,
    .trainer-modal {
      overscroll-behavior: contain
    }

    .toast {
      max-width: min(420px, calc(100vw - 32px))
    }

    .stagger-item {
      opacity: 0;
      transform: translateY(18px);
      animation: premiumReveal var(--duration-medium) var(--ease-premium) forwards;
      animation-delay: calc(var(--stagger-index, 0) * 58ms);
      will-change: opacity, transform
    }

    .hero h1.stagger-item {
      transform: translateY(22px)
    }

    @keyframes premiumReveal {
      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @media(max-width:980px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 30px
      }

      .hero-visual {
        order: -1
      }

      .hero h1 {
        font-size: 52px
      }

      .section-title {
        font-size: 38px
      }

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

    @media(max-width:720px) {
      .nav {
        height: 64px
      }

      .nav-actions {
        min-width: 0
      }

      .hero {
        padding: 40px 0 30px
      }

      .hero h1 {
        font-size: 37px
      }

      .hero p {
        font-size: 17px
      }

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

      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .section {
        padding: 56px 0
      }

      .section-title {
        font-size: 31px
      }

      .section-head {
        gap: 14px;
        margin-bottom: 26px
      }

      .stat {
        padding: 16px
      }

      .card {
        padding: 20px
      }

      .form {
        padding: 22px
      }
    }

    @media(max-width:520px) {
      .container {
        width: min(100% - 32px, 1160px)
      }

      .nav-contact-btn {
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis
      }

      .hero h1 {
        font-size: 35px
      }

      .section-title {
        font-size: 29px
      }

      .hero-visual {
        border-radius: 18px;
        padding: 10px
      }

      .hero-visual::before {
        left: 22%;
        right: 10%;
        bottom: -7px;
        height: 12px
      }

      .stats {
        grid-template-columns: 1fr
      }

      .stat strong {
        font-size: 25px
      }
    }

    /* Premium combat academy redesign: art direction, not cosmetic polish */
    :root {
      --academy-ink: #11100e;
      --academy-ink-2: #1c1a17;
      --academy-ivory: #f5f0e6;
      --academy-paper: #fffaf0;
      --academy-paper-2: #ece4d5;
      --academy-line: rgba(38, 32, 24, .14);
      --academy-muted: #756f65;
      --academy-gold: #c9a24a;
      --academy-gold-2: #e2c978;
      --academy-rust: #7d251f;
      --academy-shadow: 0 24px 70px rgba(17, 16, 14, .13);
      --academy-shadow-soft: 0 14px 36px rgba(17, 16, 14, .08);
      --academy-radius: 10px;
      --academy-radius-lg: 16px;
      --ease-premium: cubic-bezier(.16, 1, .3, 1);
      --ease-standard: cubic-bezier(.2, .8, .2, 1);
      --duration-micro: 180ms;
      --duration-small: 240ms;
      --duration-medium: 360ms;
      --duration-large: 460ms;
      --surface-page: var(--academy-paper);
      --surface-band: var(--academy-paper-2);
      --surface-card: rgba(255, 250, 240, .96);
      --surface-ink: var(--academy-ink);
      --surface-line: var(--academy-line);
      --surface-muted: var(--academy-muted);
      --yellow: var(--academy-gold);
      --yellow-dark: #af8732;
      --black: var(--academy-ink);
      --dark: var(--academy-ink-2);
      --muted: var(--academy-muted);
      --soft: #eee6d6;
      --line: var(--academy-line);
      --radius: var(--academy-radius);
      --shadow: var(--academy-shadow-soft);
    }

    html {
      background: var(--academy-ink);
      scroll-padding-top: 88px
    }

    body {
      font-family: Manrope, system-ui, sans-serif;
      background:
        linear-gradient(180deg, rgba(17, 16, 14, .05), transparent 280px),
        var(--academy-paper);
      color: var(--academy-ink);
      font-weight: 500;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .34;
      background:
        linear-gradient(90deg, rgba(17, 16, 14, .035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(17, 16, 14, .026) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, black, transparent 72%);
    }

    .container {
      width: min(1180px, calc(100% - 40px))
    }

    .topbar {
      background: rgba(17, 16, 14, .88);
      color: var(--academy-paper);
      border-bottom: 1px solid rgba(255, 250, 240, .11);
      box-shadow: 0 18px 52px rgba(0, 0, 0, .2);
    }

    .topbar::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201, 162, 74, .72), transparent);
    }

    .brand-logo-img {
      width: 178px;
      filter: brightness(1.06) drop-shadow(0 10px 24px rgba(0, 0, 0, .32))
    }

    .menu a,
    .drawer a {
      color: rgba(255, 250, 240, .74);
      font-weight: 700
    }

    .menu a.active,
    .menu a:hover {
      color: var(--academy-paper)
    }

    .menu a::after {
      bottom: -18px;
      height: 2px;
      background: var(--academy-gold-2);
      transform-origin: center
    }

    .nav-contact-btn {
      background: var(--academy-paper) !important;
      color: var(--academy-ink) !important;
      box-shadow: none !important
    }

    .icon-btn {
      background: rgba(255, 250, 240, .1);
      color: var(--academy-paper);
      border: 1px solid rgba(255, 250, 240, .14)
    }

    .drawer {
      background: var(--academy-ink);
      color: var(--academy-paper);
      border-left: 1px solid rgba(255, 250, 240, .12);
    }

    .drawer a {
      background: rgba(255, 250, 240, .07);
      border: 1px solid rgba(255, 250, 240, .08)
    }

    .hero {
      min-height: calc(100vh - 72px);
      display: grid;
      align-items: center;
      padding: 78px 0 68px;
      color: var(--academy-paper);
      background:
        radial-gradient(circle at 76% 30%, rgba(201, 162, 74, .18), transparent 34%),
        linear-gradient(112deg, rgba(17, 16, 14, .96) 0%, rgba(17, 16, 14, .92) 42%, rgba(35, 30, 24, .7) 100%),
        url("/assets/seed/hero-wrestling-hall.webp") center/cover no-repeat;
      border-bottom: 0;
    }

    .hero::before {
      left: max(20px, calc((100vw - 1180px)/2));
      top: 64px;
      width: 172px;
      height: 2px;
      background: linear-gradient(90deg, var(--academy-gold), transparent);
      transform: none;
      z-index: 0;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 34%;
      background: linear-gradient(0deg, var(--academy-paper), transparent);
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      z-index: 1;
      grid-template-columns: minmax(0, 1.02fr) minmax(390px, .82fr);
      gap: 68px
    }

    .hero-grid>div:first-child::before {
      content: "IMPERIAL FIGHT ACADEMY / KRASNODAR";
      display: inline-flex;
      margin-bottom: 24px;
      padding: 8px 11px;
      border: 1px solid rgba(226, 201, 120, .42);
      color: var(--academy-gold-2);
      background: rgba(255, 250, 240, .055);
      font: 700 11px/1 Manrope, system-ui, sans-serif;
      letter-spacing: .16em !important;
    }

    .hero h1,
    .section-title,
    .card h3,
    .price-main,
    .day-card h3,
    .mobile-day-card h3 {
      font-family: Oswald, Manrope, system-ui, sans-serif !important;
      text-transform: uppercase;
      letter-spacing: .012em !important;
    }

    .hero h1 {
      max-width: 780px;
      font-size: clamp(54px, 7.2vw, 92px);
      line-height: .92;
      font-weight: 700;
      margin-bottom: 26px;
    }

    .hero h1 span {
      color: var(--academy-paper)
    }

    .hero h1 span::after {
      bottom: .01em;
      height: .08em;
      background: linear-gradient(90deg, var(--academy-gold), rgba(201, 162, 74, .18));
      transform: none;
    }

    .hero p {
      color: rgba(255, 250, 240, .76);
      font-size: 19px;
      line-height: 1.75;
      max-width: 660px;
    }

    .hero-actions {
      margin-top: 34px;
      margin-bottom: 36px
    }

    .btn {
      border-radius: 8px;
      min-height: 52px;
      padding: 14px 20px;
      font-weight: 800;
      transition: background-color var(--duration-small) var(--ease-standard), color var(--duration-small) var(--ease-standard), border-color var(--duration-small) var(--ease-standard), box-shadow var(--duration-small) var(--ease-standard), transform var(--duration-small) var(--ease-standard);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--academy-gold-2), var(--academy-gold));
      color: var(--academy-ink);
      box-shadow: 0 18px 38px rgba(201, 162, 74, .2);
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, #efd98a, var(--academy-gold));
      transform: translateY(-2px);
      box-shadow: 0 22px 48px rgba(201, 162, 74, .26)
    }

    .btn-outline {
      background: transparent;
      border: 1px solid currentColor;
      color: inherit;
    }

    .hero .btn-outline {
      color: var(--academy-paper);
      border-color: rgba(255, 250, 240, .42)
    }

    .btn-outline:hover {
      background: var(--academy-ink);
      color: var(--academy-paper)
    }

    .hero .btn-outline:hover {
      background: rgba(255, 250, 240, .09)
    }

    .hero-visual {
      align-self: stretch;
      min-height: 540px;
      border-radius: var(--academy-radius-lg);
      padding: 10px;
      background: rgba(255, 250, 240, .08);
      border: 1px solid rgba(255, 250, 240, .13);
      box-shadow: 0 34px 90px rgba(0, 0, 0, .34);
      backdrop-filter: blur(12px);
    }

    .hero-visual::before {
      left: 18px;
      right: auto;
      bottom: 18px;
      width: 42%;
      height: 2px;
      border-radius: 0;
      background: var(--academy-gold);
      transform: none;
    }

    .stats {
      gap: 12px
    }

    .stat {
      background: rgba(255, 250, 240, .075);
      border: 1px solid rgba(255, 250, 240, .12);
      color: var(--academy-paper);
      box-shadow: none;
    }

    .stat strong {
      font-family: Oswald, Manrope, sans-serif;
      font-size: 32px;
      color: var(--academy-gold-2)
    }

    .stat span {
      color: rgba(255, 250, 240, .64);
      font-weight: 700
    }

    .section {
      padding: 96px 0;
      background: var(--academy-paper)
    }

    .section.soft {
      background: var(--academy-paper-2)
    }

    #page-home>.section {
      background: var(--academy-paper);
      border-top: 1px solid var(--academy-line)
    }

    #page-home>.section:nth-of-type(even) {
      background: var(--academy-paper-2)
    }

    .page:not(#page-home)>.section {
      padding-top: 74px;
      background: var(--academy-paper)
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 28px;
      padding-bottom: 24px;
      margin-bottom: 34px;
      border-bottom: 1px solid var(--academy-line);
    }

    .section-title {
      font-size: clamp(36px, 4.2vw, 58px);
      line-height: 1;
      font-weight: 700;
      color: var(--academy-ink);
    }

    .section-text {
      color: var(--academy-muted);
      font-size: 17px;
      line-height: 1.72;
    }

    .eyebrow {
      margin-bottom: 16px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--academy-rust);
      font-size: 12px;
      letter-spacing: .18em !important;
    }

    .grid {
      gap: 20px
    }

    .card,
    .form,
    .day-card,
    .summary-card,
    .budget-rule,
    .contact-item {
      border: 1px solid var(--academy-line);
      border-radius: var(--academy-radius);
      background: rgba(255, 250, 240, .9);
      box-shadow: var(--academy-shadow-soft);
    }

    .card {
      position: relative;
      overflow: hidden;
      padding: 28px;
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: linear-gradient(90deg, var(--academy-gold), transparent);
      opacity: .56;
    }

    .card h3 {
      font-size: 25px;
      line-height: 1.06
    }

    .card p {
      color: var(--academy-muted);
      line-height: 1.65
    }

    
    .direction-icon,
    .contact-item i {
      width: 46px;
      height: 46px;
      border-radius: 8px;
      background: var(--academy-ink);
      color: var(--academy-gold-2);
      box-shadow: inset 0 0 0 1px rgba(226, 201, 120, .28);
    }

    .direction-card,
    .price-card,
    .gallery-img,
    .trainer-photo {
      transition: box-shadow var(--duration-small) var(--ease-standard), border-color var(--duration-small) var(--ease-standard), transform var(--duration-small) var(--ease-standard);
    }

    .direction-card {
      border-top: 0
    }

    .direction-card:hover,
    .price-card:hover,
    .form:focus-within {
      transform: translateY(-3px);
      border-color: rgba(125, 37, 31, .32);
      box-shadow: 0 24px 58px rgba(17, 16, 14, .13);
    }

    
    .tag {
      background: rgba(236, 228, 213, .62);
      border: 1px solid rgba(38, 32, 24, .09);
      border-radius: 7px;
    }

    .tag {
      color: var(--academy-ink);
      font-weight: 800
    }

    .trainer-photo,
    .gallery-img,
    .budget-hero-img {
      border-radius: 10px;
      background: #d9d0bf;
      border: 1px solid var(--academy-line);
      overflow: hidden;
    }

    .trainer-photo img,
    .gallery-img img,
    .budget-hero-img img {
      filter: saturate(.86) contrast(1.03);
      transition: transform var(--duration-large) var(--ease-premium);
    }

    .card:hover .trainer-photo img,
    .card:hover .gallery-img img {
      transform: scale(1.035)
    }

    .price-card.popular {
      border: 1px solid rgba(201, 162, 74, .58);
      box-shadow: 0 26px 70px rgba(201, 162, 74, .15);
    }

    .price-main {
      font-size: 42px;
      color: var(--academy-ink)
    }

    .filter-btn {
      border-radius: 999px;
      background: rgba(255, 250, 240, .76);
      border-color: var(--academy-line);
    }

    .filter-btn.active {
      background: var(--academy-ink);
      color: var(--academy-paper)
    }

    
    .timeline-head {
      background: var(--academy-ink) !important;
      color: var(--academy-paper) !important;
    }

    .timeline-session,
    .mobile-session {
      border-radius: 9px !important;
      background: rgba(255, 250, 240, .94) !important;
      border: 1px solid rgba(38, 32, 24, .12) !important;
      box-shadow: 0 12px 30px rgba(17, 16, 14, .07) !important;
    }

    .mobile-day-card {
      border-radius: var(--academy-radius);
      background: rgba(255, 250, 240, .9);
      border: 1px solid var(--academy-line);
      box-shadow: var(--academy-shadow-soft);
    }

    .form {
      padding: 30px;
      background: rgba(255, 250, 240, .95)
    }

    .field label {
      color: var(--academy-ink);
      font-weight: 800
    }

    .field input,
    .field select,
    .field textarea {
      border-radius: 8px;
      border-color: rgba(38, 32, 24, .14);
      background: #fffdf8;
    }

    .field input:focus-visible,
    .field select:focus-visible,
    .field textarea:focus-visible {
      border-color: var(--academy-gold);
      box-shadow: 0 0 0 4px rgba(201, 162, 74, .18);
    }

    .contact-item {
      background: rgba(255, 250, 240, .82)
    }

    .map {
      border-radius: 10px;
      border-color: var(--academy-line)
    }

    .footer {
      background: var(--academy-ink);
      border-top: 1px solid rgba(226, 201, 120, .22);
    }

    .stagger-item {
      animation-duration: var(--duration-medium);
      animation-timing-function: var(--ease-premium);
      animation-delay: calc(var(--stagger-index, 0) * 54ms);
    }

    @media(max-width:980px) {
      .hero {
        min-height: auto;
        padding: 42px 0 58px
      }

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

      .hero-visual {
        order: 0;
        min-height: 420px
      }

      .section-head {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:720px) {
      .container {
        width: min(100% - 32px, 1180px)
      }

      .topbar {
        background: rgba(17, 16, 14, .94)
      }

      .brand-logo-img {
        width: 150px
      }

      .nav-contact-btn {
        max-width: 120px
      }

      .hero {
        padding: 34px 0 46px
      }

      .hero-grid>div:first-child::before {
        font-size: 10px;
        letter-spacing: .11em !important;
        margin-bottom: 18px
      }

      .hero h1 {
        font-size: clamp(42px, 14vw, 58px)
      }

      .hero p {
        font-size: 16px;
        line-height: 1.68
      }

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

      .hero-visual {
        min-height: 310px;
        padding: 8px
      }

      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }

      .section {
        padding: 66px 0
      }

      .section-title {
        font-size: 36px
      }

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

      .card {
        padding: 23px
      }
    }

    @media(max-width:520px) {
      .hero-visual {
        min-height: 260px
      }

      .stats {
        grid-template-columns: 1fr
      }
    }

    /* Palette correction: keep the brand white/yellow/black, no dark hero wash */
    :root {
      --brand-white: #fffdf6;
      --brand-soft: #f5f3eb;
      --brand-yellow: #ffd400;
      --brand-yellow-deep: #d6aa00;
      --brand-black: #111111;
      --brand-line: rgba(17, 17, 17, .11);
      --surface-page: var(--brand-white);
      --surface-band: var(--brand-soft);
      --surface-card: #ffffff;
      --surface-ink: var(--brand-black);
      --surface-line: var(--brand-line);
      --yellow: var(--brand-yellow);
      --yellow-dark: var(--brand-yellow-deep);
      --black: var(--brand-black);
      --dark: #202020;
      --muted: #68645c;
      --soft: var(--brand-soft);
      --line: var(--brand-line);
    }

    body {
      background: var(--brand-white);
      color: var(--brand-black);
    }

    body::before {
      opacity: .18;
      background-size: 84px 84px
    }

    .topbar {
      background: rgba(255, 255, 255, .94);
      color: var(--brand-black);
      border-bottom: 1px solid var(--brand-line);
      box-shadow: 0 12px 34px rgba(17, 17, 17, .055);
    }

    .topbar::after {
      background: linear-gradient(90deg, transparent, rgba(255, 212, 0, .88), transparent)
    }

    .brand-logo-img {
      filter: drop-shadow(0 8px 18px rgba(17, 17, 17, .08))
    }

    .menu a,
    .drawer a {
      color: #2b2b2b
    }

    .menu a.active,
    .menu a:hover {
      color: var(--brand-black)
    }

    .menu a::after {
      background: var(--brand-yellow)
    }

    .nav-contact-btn {
      background: var(--brand-yellow) !important;
      color: var(--brand-black) !important;
      box-shadow: 0 12px 26px rgba(255, 212, 0, .22) !important;
    }

    .icon-btn {
      background: var(--brand-black);
      color: #fff;
      border: 0;
    }

    .drawer {
      background: #fff;
      color: var(--brand-black);
      border-left: 1px solid var(--brand-line);
    }

    .drawer a {
      background: var(--brand-soft);
      color: var(--brand-black);
      border: 1px solid var(--brand-line);
    }

    .hero {
      min-height: calc(100vh - 72px);
      color: var(--brand-black);
      background:
        radial-gradient(circle at 78% 18%, rgba(255, 212, 0, .22), transparent 30%),
        linear-gradient(180deg, #fffef8 0%, #f8f5eb 100%);
      border-bottom: 1px solid var(--brand-line);
    }

    .hero::before {
      background: var(--brand-yellow);
      z-index: 0;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(90deg, rgba(255, 212, 0, .11) 0 1px, transparent 1px),
        linear-gradient(180deg, rgba(17, 17, 17, .035) 0 1px, transparent 1px);
      background-size: 76px 76px;
      mask-image: linear-gradient(to bottom, black, transparent 78%);
    }

    .hero-grid>div:first-child::before {
      border-color: rgba(17, 17, 17, .22);
      color: #6f5900;
      background: rgba(255, 212, 0, .16);
    }

    .hero h1 {
      color: var(--brand-black);
      text-shadow: none;
    }

    .hero h1 span {
      color: var(--brand-black)
    }

    .hero h1 span::after {
      background: var(--brand-yellow);
      opacity: .92;
    }

    .hero p {
      color: #34312c;
      max-width: 690px;
    }

    .hero .btn-outline {
      color: var(--brand-black);
      border-color: rgba(17, 17, 17, .34);
      background: rgba(255, 255, 255, .58);
    }

    .hero .btn-outline:hover {
      background: var(--brand-black);
      color: #fff;
    }

    .hero-visual {
      background: #fff;
      border: 1px solid rgba(17, 17, 17, .12);
      box-shadow: 0 28px 74px rgba(17, 17, 17, .16);
      backdrop-filter: none;
    }

    .hero-visual::before {
      background: var(--brand-yellow);
    }

    .stat {
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(17, 17, 17, .1);
      color: var(--brand-black);
      box-shadow: 0 10px 30px rgba(17, 17, 17, .06);
    }

    .stat strong {
      color: var(--brand-yellow-deep)
    }

    .stat span {
      color: #5f5b54
    }

    .section {
      background: var(--brand-white)
    }

    .section.soft,
    #page-home>.section:nth-of-type(even) {
      background: var(--brand-soft)
    }

    .eyebrow {
      color: #7c6300
    }

    .btn-primary {
      background: linear-gradient(135deg, #ffe173, var(--brand-yellow));
      color: var(--brand-black);
      box-shadow: 0 16px 36px rgba(255, 212, 0, .23);
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, #ffea99, var(--brand-yellow));
    }

    
    .direction-icon,
    .contact-item i {
      background: var(--brand-black);
      color: var(--brand-yellow);
    }

    .card::before {
      background: linear-gradient(90deg, var(--brand-yellow), transparent)
    }

    .footer {
      background: var(--brand-black);
      border-top: 1px solid rgba(255, 212, 0, .25);
    }

    @media(max-width:980px) {
      .hero-visual {
        order: -1
      }
    }

    @media(max-width:720px) {
      .topbar {
        background: rgba(255, 255, 255, .96)
      }

      .hero {
        min-height: auto;
        background:
          radial-gradient(circle at 90% 6%, rgba(255, 212, 0, .2), transparent 34%),
          linear-gradient(180deg, #fffef8 0%, #f6f2e6 100%);
      }

      .hero-visual {
        min-height: 286px
      }
    }

    /* QA fixes: trainer modal opacity and sane desktop photo proportions */
    .hero-grid {
      grid-template-columns: minmax(0, .98fr) minmax(500px, .82fr);
      align-items: center;
    }

    .hero-visual {
      align-self: center;
      width: 100%;
      min-height: 0;
      aspect-ratio: 1.24/1;
      padding: 10px;
    }

    #hero-ring-img {
      object-position: center center
    }

    #hero-mat-img {
      object-position: center center
    }

    .trainer-modal-backdrop {
      z-index: 1000;
      background: rgba(17, 17, 17, .72) !important;
      backdrop-filter: blur(8px);
    }

    .trainer-modal-backdrop.active {
      opacity: 1 !important;
      visibility: visible !important;
    }

    .trainer-modal {
      isolation: isolate;
      width: min(520px, calc(100vw - 32px));
      max-height: calc(100vh - 32px);
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 34px 90px rgba(0, 0, 0, .32);
    }

    .trainer-modal-content,
    .trainer-modal .card {
      background: #fff !important;
      color: var(--brand-black) !important;
    }

    .trainer-modal .card {
      margin: 0;
      border: 1px solid rgba(17, 17, 17, .12) !important;
      border-radius: 14px !important;
      box-shadow: none !important;
      overflow: hidden;
    }

    .trainer-modal .card::before {
      height: 4px;
      opacity: 1;
    }

    .trainer-modal .trainer-photo {
      aspect-ratio: 4/3 !important;
      background: #f1eee6 !important;
    }

    .trainer-modal .trainer-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .trainer-modal-close {
      background: var(--brand-black) !important;
      color: #fff !important;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
    }

    @media(max-width:980px) {
      .hero-grid {
        grid-template-columns: 1fr
      }

      .hero-visual {
        width: min(100%, 680px);
        margin: auto;
        aspect-ratio: 16/9;
      }
    }

    @media(max-width:720px) {
      .hero-visual {
        aspect-ratio: auto;
        min-height: 0;
      }

      .trainer-modal-backdrop {
        padding: 12px;
        align-items: center;
      }

      .trainer-modal {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
      }
    }

    /* Comment fixes: remove orphan hero stripe and top-align the media split */
    .hero::before {
      display: none !important;
    }

    .hero-grid {
      align-items: start;
    }

    .hero-grid>div:first-child {
      padding-top: 0;
    }

    .hero-visual {
      margin-top: 0;
    }

    @media(max-width:980px) {
      .hero-grid>div:first-child {
        padding-top: 0;
      }

      .hero-visual {
        margin-top: 0;
      }
    }

    /* Remove hero split and reveal cards only when their block enters the viewport */
    .hero-grid {
      grid-template-columns: minmax(0, 760px) !important;
      justify-content: start;
    }

    .hero-grid>div:first-child {
      max-width: 760px;
    }

    .hero-visual {
      display: none !important;
    }

    .hero {
      min-height: auto;
      padding: 96px 0 88px;
    }

    .stagger-item {
      opacity: 0 !important;
      transform: translateY(-28px) !important;
      animation: none !important;
      transition: none !important;
      will-change: opacity, transform;
    }

    .stagger-item.stagger-ready {
      transition:
        opacity 680ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow var(--duration-small) var(--ease-standard),
        border-color var(--duration-small) var(--ease-standard) !important;
      transition-delay: 0ms !important;
    }

    .stagger-item.is-visible {
      opacity: 1 !important;
      transform: translateY(0) !important;
    }

    @media(max-width:720px) {
      .hero {
        padding: 54px 0 62px;
      }

      .stagger-item {
        transform: translateY(-18px) !important;
      }
    }

    .price-card.popular {
      padding-top: 28px !important;
      border: 2px solid var(--brand-yellow) !important;
      box-shadow: 0 26px 70px rgba(255, 212, 0, .18) !important;
    }

    .price-card.popular .price-card-head {
      padding-top: 0;
    }

    :root {
      --topbar-fixed-height: 73px;
    }

    body {
      padding-top: var(--topbar-fixed-height) !important;
    }

    .topbar {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 1100 !important;
      transform: translateZ(0);
      isolation: isolate;
    }

    .drawer-backdrop {
      z-index: 1190 !important;
    }

    .drawer {
      z-index: 1200 !important;
    }

    @media(max-width:720px) {
      :root {
        --topbar-fixed-height: 64px;
      }

      /* The mobile drawer is a bottom sheet — its rules live in the
         .sheet-backdrop / .bottom-sheet block near the END of this file. The old
         "dropdown-from-top" drawer layer that used to sit here was removed
         2026-06-14: it was fully overridden by that later block (dead code). */
    }

    /* Premium art-direction pass: disciplined fight-academy UI, same black/white/yellow palette */
    :root {
      --premium-ink: #101010;
      --premium-muted: #5f5b52;
      --premium-soft: #fffaf0;
      --premium-paper: #fffdf7;
      --premium-line: rgba(17, 17, 17, .12);
      --premium-line-strong: rgba(17, 17, 17, .2);
      --premium-yellow: var(--brand-yellow, #ffd400);
      --premium-radius: 8px;
      --premium-ease: cubic-bezier(0.16, 1, 0.3, 1);
      --premium-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
      --sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
      --premium-shadow-rest: 0 18px 54px rgba(17, 17, 17, .07);
      --premium-shadow-lift: 0 28px 74px rgba(17, 17, 17, .11);
      --premium-display-font: Oswald, Manrope, system-ui, sans-serif;
      --premium-body-font: Manrope, system-ui, sans-serif;
    }

    body {
      font-family: var(--premium-body-font) !important;
      color: var(--premium-ink);
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
      background:
        linear-gradient(180deg, #ffffff 0%, var(--premium-soft) 52%, #ffffff 100%) !important;
    }

    .container {
      width: min(1180px, calc(100% - 48px));
    }

    .topbar {
      min-height: var(--topbar-fixed-height);
      background: rgba(255, 255, 255, .88) !important;
      border-bottom: 1px solid rgba(17, 17, 17, .1) !important;
      box-shadow: 0 12px 40px rgba(17, 17, 17, .055) !important;
      backdrop-filter: blur(20px) saturate(1.08);
    }

    .nav {
      height: var(--topbar-fixed-height);
    }

    .menu a {
      position: relative;
      display: inline-flex;
      align-items: center;
      padding: 26px 0 24px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      transition: color 220ms var(--premium-ease-standard);
    }

    .menu a::after {
      height: 2px !important;
      transform-origin: left center;
      transition:
        opacity 240ms var(--premium-ease),
        transform 320ms var(--premium-ease) !important;
    }

    .menu a:not(.active)::after {
      opacity: 0;
      transform: scaleX(.5);
    }

    .menu a:hover::after,
    .menu a.active::after {
      opacity: 1;
      transform: scaleX(1);
    }

    .menu a::after {
      content: none !important;
      display: none !important;
    }

    .menu a.active {
      color: var(--premium-ink) !important;
      font-weight: 900;
    }

    .hero {
      position: relative;
      padding: clamp(78px, 9vh, 112px) 0 clamp(72px, 9vh, 104px) !important;
      background:
        linear-gradient(90deg, rgba(255, 212, 0, .055) 0 1px, transparent 1px),
        linear-gradient(180deg, rgba(17, 17, 17, .035) 0 1px, transparent 1px),
        radial-gradient(circle at 78% 16%, rgba(255, 212, 0, .23), transparent 32%),
        linear-gradient(180deg, #fffef8 0%, #f8f4e8 100%) !important;
      background-size: 96px 96px, 96px 96px, auto, auto !important;
      border-bottom: 1px solid rgba(17, 17, 17, .1);
      overflow: clip;
    }

    .hero-grid {
      grid-template-columns: minmax(0, 860px) !important;
    }

    .hero-grid>div:first-child {
      max-width: 860px !important;
    }

    .hero .eyebrow,
    .eyebrow {
      letter-spacing: .2em !important;
      font-weight: 900 !important;
      color: #8a7200 !important;
    }

    .hero h1 {
      max-width: 850px;
      margin: 22px 0 26px !important;
      font-family: var(--premium-display-font) !important;
      font-size: clamp(68px, 8.4vw, 126px) !important;
      line-height: .86 !important;
      font-weight: 700 !important;
      letter-spacing: 0 !important;
      text-wrap: balance;
    }

    .hero h1 span {
      display: inline;
    }

    .hero h1 span::after {
      height: .08em !important;
      bottom: .03em !important;
      opacity: .94;
    }

    .hero p {
      max-width: 640px;
      color: #2f2d29 !important;
      font-size: clamp(18px, 1.45vw, 21px) !important;
      line-height: 1.68 !important;
      text-wrap: pretty;
    }

    .hero-actions {
      margin-top: 34px !important;
      gap: 12px !important;
    }

    .btn,
    .filter-btn,
    .icon-btn,
    .drawer a {
      border-radius: var(--premium-radius) !important;
      transition:
        background-color 220ms var(--premium-ease-standard),
        color 220ms var(--premium-ease-standard),
        border-color 220ms var(--premium-ease-standard),
        box-shadow 260ms var(--premium-ease),
        transform 260ms var(--premium-ease) !important;
    }

    .btn {
      min-height: 48px;
      padding: 13px 18px !important;
      font-weight: 900 !important;
    }

    .btn-primary {
      box-shadow: 0 18px 38px rgba(255, 212, 0, .2) !important;
    }

    .btn-outline {
      background: rgba(255, 255, 255, .72) !important;
      border-color: rgba(17, 17, 17, .28) !important;
    }

    .btn i {
      transition: transform 260ms var(--premium-ease);
    }

    .btn:focus-visible,
    .filter-btn:focus-visible,
    .drawer a:focus-visible,
    .menu a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--premium-yellow);
      outline-offset: 3px;
    }

    .stats {
      margin-top: 34px !important;
      gap: 10px !important;
    }

    .stat {
      min-height: 92px;
      border-radius: var(--premium-radius) !important;
      border: 1px solid rgba(17, 17, 17, .12) !important;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 250, 240, .78)) !important;
      box-shadow: 0 18px 44px rgba(17, 17, 17, .055) !important;
    }

    .stat strong {
      color: #c7a000 !important;
      font-family: Oswald, Manrope, system-ui, sans-serif !important;
      font-size: clamp(28px, 2.4vw, 38px) !important;
      font-weight: 700 !important;
      line-height: .95;
    }

    .section {
      padding: clamp(76px, 9vw, 118px) 0 !important;
    }

    .section-head {
      margin-bottom: 30px !important;
      padding-bottom: 20px !important;
      border-bottom: 1px solid rgba(17, 17, 17, .14) !important;
    }

    .section-title {
      max-width: 860px;
      font-family: var(--premium-display-font) !important;
      font-size: clamp(40px, 5vw, 72px) !important;
      line-height: .98 !important;
      letter-spacing: 0 !important;
      text-wrap: balance;
    }

    .section-text {
      max-width: 560px;
      color: var(--premium-muted) !important;
      font-size: 16px !important;
      line-height: 1.74 !important;
    }

    .grid {
      gap: 22px !important;
    }

    .card,
    .summary-card,
    .day-card,
    .mobile-day-card,
    .budget-rule,
    .contact-item,
    .form {
      border-radius: var(--premium-radius) !important;
      border: 1px solid var(--premium-line) !important;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 250, 240, .92)) !important;
      box-shadow: var(--premium-shadow-rest) !important;
    }

    .card {
      position: relative;
      overflow: hidden;
      padding: 26px !important;
      min-height: 176px;
    }

    .card::before {
      height: 3px !important;
      opacity: .85 !important;
    }

    .card h3,
    .price-card-head h3,
    .mobile-day-card h3 {
      font-family: var(--premium-display-font) !important;
      font-weight: 700 !important;
      letter-spacing: 0 !important;
    }

    .card p,
    .card li,
    .contact-item,
    .field label {
      color: var(--premium-muted) !important;
      line-height: 1.62;
    }

    .trainer-photo,
    .gallery-img {
      border-radius: var(--premium-radius) !important;
      overflow: hidden;
    }

    .trainer-photo img,
    .gallery-img img {
      transition: transform 520ms var(--premium-ease);
    }

    /* Исправление обрезки фото тренеров на мобильных устройствах (iOS/Safari fix) */
    .trainer-card .trainer-photo {
      flex: 0 0 auto !important;
      width: 100%;
      position: relative !important;
      display: block !important; /* Отключаем grid, который не дает картинке растянуться */
    }

    .trainer-card .trainer-photo img {
      position: absolute !important;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center top;
    }

    .price-card.popular {
      border-color: var(--premium-yellow) !important;
      box-shadow: 0 28px 70px rgba(255, 212, 0, .18) !important;
    }

    .price-card .price-main,
    .price {
      font-family: Oswald, Manrope, system-ui, sans-serif !important;
      letter-spacing: 0 !important;
    }

    input,
    select,
    textarea {
      border-radius: var(--premium-radius) !important;
      transition:
        border-color 220ms var(--premium-ease-standard),
        box-shadow 260ms var(--premium-ease),
        background-color 220ms var(--premium-ease-standard) !important;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(17, 17, 17, .34) !important;
      box-shadow: 0 0 0 4px rgba(255, 212, 0, .16) !important;
      background: #fff !important;
    }

    .stagger-item {
      transform: translateY(-20px) !important;
    }

    .stagger-item.stagger-ready {
      transition:
        opacity 620ms var(--premium-ease),
        transform 620ms var(--premium-ease),
        box-shadow 260ms var(--premium-ease),
        border-color 220ms var(--premium-ease-standard) !important;
    }

    .drawer {
      background: rgba(255, 255, 255, .96) !important;
      backdrop-filter: blur(18px) saturate(1.08);
    }

    /* Drawer links carry a LEADING icon chip + a label span (markup is
       icon-first at every breakpoint). This must be a flex row, not the old
       label|chevron grid — otherwise on the tablet side menu (721–980px) the
       label lands in the narrow icon track and its text overflows the tile. */
    .drawer a {
      display: flex !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 13px;
      line-height: 1.22 !important;
      font-weight: 800;
    }

    .drawer a i {
      display: grid !important;
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      place-items: center;
      align-self: center;
      margin: 0 !important;
      border-radius: 11px;
      background: rgba(17, 17, 17, .05);
      color: #1d1b16;
      line-height: 1 !important;
      font-size: 17px;
      transform: none !important;
    }

    .drawer a span {
      flex: 1 1 auto;
      min-width: 0;
    }

    .drawer-subgroup > ul {
      display: grid;
      gap: 8px;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .drawer-subgroup {
      display: grid;
      gap: 8px;
    }

    .drawer-subtitle {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 2px 4px;
      color: rgba(17, 17, 17, .66);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 10px;
      font-weight: 900;
      line-height: 1.2;
    }

    .drawer-extra {
      display: grid;
      overflow: hidden;
      border: 1px solid rgba(17, 17, 17, .08);
      border-radius: 14px;
      background: #fff;
      box-shadow: 0 1px 2px rgba(17, 17, 17, .05);
    }

    .drawer-extra-trigger {
      display: flex;
      align-items: center;
      gap: 13px;
      width: 100%;
      min-height: 58px;
      padding: 0 12px;
      border: 0;
      background: transparent;
      color: #111;
      font: inherit;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.22;
      text-align: left;
      cursor: pointer;
    }

    .drawer-extra-trigger-main {
      display: flex;
      align-items: center;
      gap: 13px;
      min-width: 0;
      flex: 1 1 auto;
      align-self: center;
    }

    .drawer-extra-trigger-main > span {
      display: inline-flex;
      min-height: 38px;
      align-items: center;
      line-height: 1.2;
    }

    .drawer-extra-icon {
      display: grid !important;
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 11px;
      background: rgba(255, 212, 0, .18);
      color: #1d1b16;
      font-size: 16px;
      line-height: 1;
      align-self: center;
    }

    .drawer-extra-chevron {
      display: grid !important;
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      place-items: center;
      align-self: center;
      color: rgba(17, 17, 17, .52);
      font-size: 12px;
      line-height: 1 !important;
      transition: transform 220ms var(--premium-ease-standard);
    }

    .drawer-extra-panel {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
      visibility: hidden;
      transition:
        grid-template-rows 260ms var(--premium-ease),
        opacity 180ms var(--premium-ease-standard),
        visibility 0s 260ms;
    }

    .drawer-extra-panel > ul {
      display: grid;
      gap: 8px;
      min-height: 0;
      overflow: hidden;
      margin: 0;
      padding: 0 10px 10px;
      list-style: none;
    }

    .drawer-extra.is-open .drawer-extra-panel {
      grid-template-rows: 1fr;
      opacity: 1;
      visibility: visible;
      transition:
        grid-template-rows 260ms var(--premium-ease),
        opacity 180ms var(--premium-ease-standard),
        visibility 0s;
    }

    .drawer-extra.is-open .drawer-extra-chevron {
      transform: rotate(180deg);
    }

    .drawer-extra-panel a {
      min-height: 46px !important;
      padding: 0 10px !important;
      border-radius: 12px !important;
      font-size: 14px !important;
    }

    .drawer-extra-panel a i {
      width: 34px !important;
      height: 34px !important;
      border-radius: 10px !important;
      font-size: 15px !important;
    }

    .toast {
      right: 18px !important;
      bottom: 18px !important;
      z-index: 1300 !important;
      max-width: min(360px, calc(100vw - 32px)) !important;
      padding: 12px 14px !important;
      border-radius: var(--premium-radius) !important;
      border: 1px solid rgba(255, 212, 0, .16);
      background: rgba(15, 15, 15, .94) !important;
      color: #fff !important;
      font-size: 14px !important;
      line-height: 1.4 !important;
      box-shadow: 0 18px 56px rgba(0, 0, 0, .24) !important;
      backdrop-filter: blur(10px);
      transition:
        opacity 260ms var(--premium-ease),
        transform 320ms var(--premium-ease) !important;
    }

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

      .btn:hover i {
        transform: translateY(-1px);
      }

      .card:hover,
      .summary-card:hover,
      .budget-rule:hover,
      .contact-item:hover {
        border-color: var(--premium-line-strong) !important;
        box-shadow: var(--premium-shadow-lift) !important;
        transform: translateY(-3px);
      }

      .card:hover .trainer-photo img,
      .card:hover .gallery-img img {
        transform: scale(1.035);
      }

      .drawer a:hover {
        border-color: rgba(17, 17, 17, .18) !important;
        transform: translateY(-1px);
      }
    }

    @media(max-width:980px) {
      .container {
        width: min(100% - 32px, 720px);
      }

      .section-head {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }
    }

    @media(max-width:720px) {
      .container {
        width: calc(100% - 32px);
      }

      .hero {
        padding: 46px 0 58px !important;
        background-size: 76px 76px, 76px 76px, auto, auto !important;
      }

      .hero h1 {
        margin: 18px 0 20px !important;
        font-size: clamp(44px, 12.8vw, 54px) !important;
        line-height: .94 !important;
        max-width: 100%;
        overflow-wrap: normal;
      }

      .hero p {
        font-size: 18px !important;
        line-height: 1.6 !important;
      }

      .hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        margin-top: 28px !important;
      }

      .hero-actions .btn,
      .nav-contact-btn {
        min-height: 56px;
      }

      .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        margin-top: 28px !important;
      }

      .stat {
        min-height: 84px;
        padding: 16px !important;
      }

      .section {
        padding: 64px 0 !important;
      }

      .section-title {
        font-size: clamp(38px, 12vw, 52px) !important;
        line-height: 1.02 !important;
      }

      .section-text {
        font-size: 16px !important;
      }

      .card {
        min-height: 0;
        padding: 22px !important;
      }

      .stagger-item {
        transform: translateY(-14px) !important;
      }

      .drawer {
        border-radius: 8px !important;
      }

      .drawer a {
        min-height: 54px;
      }

      .toast {
        left: 16px !important;
        right: 16px !important;
        bottom: 14px !important;
        max-width: none !important;
        font-size: 13px !important;
      }
    }

    /* QA patch: premium topbar, readable hero type, and stable outline-button hover */
    .topbar {
      background: rgba(255, 255, 255, .94) !important;
      border-bottom: 1px solid rgba(17, 17, 17, .09) !important;
      box-shadow: 0 14px 44px rgba(17, 17, 17, .07) !important;
      backdrop-filter: blur(22px) saturate(1.12);
    }

    .nav {
      gap: 24px !important;
    }

    .brand-logo-img {
      filter: drop-shadow(0 10px 24px rgba(17, 17, 17, .08)) !important;
    }

    .menu {
      gap: 4px !important;
      padding: 5px !important;
      border: 1px solid rgba(17, 17, 17, .08);
      border-radius: 8px;
      background: rgba(255, 255, 255, .62);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
    }

    .menu a {
      min-height: 38px;
      padding: 0 12px !important;
      border-radius: 6px;
      color: rgba(17, 17, 17, .78) !important;
      font-size: 13px !important;
      font-weight: 850 !important;
      transition:
        background-color 220ms var(--premium-ease-standard),
        color 220ms var(--premium-ease-standard),
        box-shadow 260ms var(--premium-ease),
        transform 260ms var(--premium-ease) !important;
    }

    .menu-more {
      position: relative;
    }

    .menu-more-trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 38px;
      padding: 0 12px !important;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: rgba(17, 17, 17, .78) !important;
      font-family: inherit;
      font-size: 13px !important;
      font-weight: 850 !important;
      line-height: 1;
      cursor: pointer;
      transition:
        background-color 220ms var(--premium-ease-standard),
        color 220ms var(--premium-ease-standard),
        transform 260ms var(--premium-ease) !important;
    }

    .menu-more-trigger i {
      font-size: 10px;
      transition: transform 220ms var(--premium-ease-standard);
    }

    .menu-more-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 1200;
      display: grid;
      min-width: 238px;
      padding: 8px;
      border: 1px solid rgba(17, 17, 17, .1);
      border-radius: 10px;
      background: #fffdf8;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 22px 58px rgba(17, 17, 17, .16);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-4px);
      pointer-events: none;
      transition:
        opacity 180ms var(--premium-ease-standard),
        visibility 0s 180ms,
        transform 220ms var(--premium-ease) !important;
    }

    .menu-more.is-open .menu-more-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
      transition: opacity 180ms var(--premium-ease-standard), transform 220ms var(--premium-ease), visibility 0s !important;
    }

    .menu-more.is-open .menu-more-trigger {
      color: var(--premium-ink) !important;
      background: rgba(17, 17, 17, .055);
      transform: translateY(-1px);
    }

    .menu-more.is-open .menu-more-trigger i {
      transform: rotate(180deg);
    }

    .menu-more-panel a {
      display: flex;
      align-items: center;
      min-height: 36px;
      padding: 0 10px !important;
    }

    .menu-more-group {
      display: grid;
      gap: 2px;
      padding-top: 4px;
      margin-top: 4px;
      border-top: 1px solid rgba(17, 17, 17, .08);
    }

    .menu-more-label {
      display: block;
      padding: 7px 10px 3px;
      color: rgba(17, 17, 17, .54);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .menu a.active {
      color: var(--premium-ink) !important;
      background: rgba(255, 212, 0, .16);
      box-shadow: inset 0 0 0 1px rgba(255, 212, 0, .22);
    }

    .nav-contact-btn {
      min-height: 40px !important;
      padding: 0 15px !important;
      gap: 9px !important;
      border: 1px solid rgba(17, 17, 17, .1) !important;
      border-radius: 6px !important;
      background: var(--premium-yellow) !important;
      color: var(--premium-ink) !important;
      font-size: 13px !important;
      font-weight: 900 !important;
      letter-spacing: 0 !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .44),
        0 10px 20px rgba(255, 212, 0, .15) !important;
    }

    .nav-contact-btn i {
      width: auto;
      height: auto;
      font-size: 12px;
      line-height: 1;
      background: transparent !important;
      border-radius: 0;
    }

    .hero h1 {
      max-width: 820px !important;
      font-size: clamp(60px, 7.1vw, 106px) !important;
      line-height: .99 !important;
      letter-spacing: 0 !important;
    }

    .btn-outline {
      color: var(--premium-ink) !important;
      background: rgba(255, 255, 255, .78) !important;
      border-color: rgba(17, 17, 17, .32) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75) !important;
    }

    .btn-outline i {
      color: currentColor !important;
    }

    .btn-outline:hover,
    .hero .btn-outline:hover {
      color: #fff !important;
      background: var(--premium-ink) !important;
      border-color: var(--premium-ink) !important;
      box-shadow: 0 18px 44px rgba(17, 17, 17, .16) !important;
    }

    @media(hover:hover) {
      .menu a:hover {
        color: var(--premium-ink) !important;
        background: rgba(17, 17, 17, .055);
        transform: translateY(-1px);
      }

      .menu a.active:hover {
        background: rgba(255, 212, 0, .22);
      }

      .nav-contact-btn:hover {
        background: #ffdc24 !important;
        transform: translateY(-1px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .5),
          0 14px 28px rgba(255, 212, 0, .22) !important;
      }
    }

    @media(max-width:1100px) {
      .menu {
        gap: 2px !important;
      }

      .menu a {
        padding: 0 9px !important;
        font-size: 12px !important;
      }

      .menu-more-trigger {
        padding: 0 9px !important;
        font-size: 12px !important;
      }
    }

    @media(max-width:720px) {
      .menu {
        padding: 0 !important;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .hero h1 {
        font-size: clamp(40px, 11.5vw, 50px) !important;
        line-height: 1.06 !important;
      }

      .nav-contact-btn {
        min-height: 48px !important;
        padding: 0 16px !important;
        border-radius: 8px !important;
      }
    }

    /* Hero video layout, organic mask, and orbit label */
    .hero {
      --hero-video-fill: #fff7df;
      --hero-video-line: rgba(17, 17, 17, .12);
    }

    .hero-grid {
      grid-template-columns: minmax(0, 650px) minmax(340px, 500px) !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: clamp(30px, 4.6vw, 64px) !important;
    }

    .hero-grid>div:first-child,
    .hero-copy {
      order: 1 !important;
      grid-column: 1;
      grid-row: 1;
      max-width: 650px !important;
    }

    .hero h1 {
      max-width: 650px !important;
      font-size: clamp(56px, 6vw, 94px) !important;
      /* 1.12: tight enough to read as a punchy heading, loose enough that
         Cyrillic Й-breve and ц/щ/р/у descenders don't clip into the next line. */
      line-height: 1.12 !important;
    }

    .hero-visual {
      display: block !important;
      position: relative;
      order: 2 !important;
      grid-column: 2;
      grid-row: 1;
      width: 100%;
      max-width: 500px;
      margin: 0 !important;
      padding: 0 !important;
      justify-self: end;
      overflow: visible !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .hero-visual::before {
      content: none !important;
      display: none !important;
    }

    .hero .stats {
      order: 3 !important;
      grid-column: 1;
      grid-row: 2;
    }

    .hero-video-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 5;
      min-height: 520px;
      overflow: visible;
      background: transparent;
      transform: translateZ(0);
      filter: drop-shadow(0 30px 52px rgba(17, 17, 17, .16));
    }

    .hero-video-wrapper {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: hidden;
      /* Poster (= video frame 0) as the blob fill so the blob is NEVER empty — shown
         until the video paints over it; poster decode gates the figure reveal. Keep in
         sync with critical.css. --hero-video-fill stays as the fallback color. */
      background-color: var(--hero-video-fill);
      background-image: url("/assets/seed/hero-poster.webp?v=20260619");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 125' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M49 5.5 C64 3.8 80 11 83 25 C86 38 78 45 84 58 C91 74 95 92 83 106 C71 120 52 121 39 116 C24 110 12 95 14 78 C16 66 24 58 18 46 C10 29 17 13 33 8 C38 6.5 43 6.18 49 5.5 Z' fill='black'/%3E%3C/svg%3E");
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 125' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M49 5.5 C64 3.8 80 11 83 25 C86 38 78 45 84 58 C91 74 95 92 83 106 C71 120 52 121 39 116 C24 110 12 95 14 78 C16 66 24 58 18 46 C10 29 17 13 33 8 C38 6.5 43 6.18 49 5.5 Z' fill='black'/%3E%3C/svg%3E");
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      mask-position: center;
    }

    .hero-video {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      margin: 0;
      padding: 0;
    }

    .hero-orbit-ribbon {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: block;
      margin: 0;
      padding: 0;
      overflow: visible;
      pointer-events: none;
    }

    .hero-ribbon-rail {
      fill: none;
      stroke: var(--brand-yellow);
      stroke-width: 24px;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
      opacity: .96;
    }

    .hero [data-hero-reveal] {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
      transition:
        opacity 760ms var(--premium-ease),
        transform 760ms var(--premium-ease);
      transition-delay: var(--hero-reveal-delay, 0ms);
      will-change: opacity, transform;
    }

    .hero.is-loaded [data-hero-reveal] {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    @media(max-width:1080px) {
      .hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 36px !important;
      }

      .hero-copy {
        order: 1 !important;
        grid-column: auto;
        grid-row: auto;
      }

      .hero-visual {
        order: 2 !important;
        grid-column: auto;
        grid-row: auto;
        max-width: min(680px, 100%);
        justify-self: start;
        /* Tablet portrait fix: in the stacked layout the visual must reserve the
           full height of its 4/5 blob frame. An older redesign layer still sets
           aspect-ratio:16/9 on .hero-visual at ≤980px, which is shorter than the
           frame — so the blob overflowed downward, the stats plates landed on top
           of the video, and .hero's overflow:clip cut the blob off at the bottom.
           auto lets the visual hug the frame (same as the ≤720 mobile rule). */
        aspect-ratio: auto !important;
      }

      .hero .stats {
        order: 3 !important;
        grid-column: auto;
        grid-row: auto;
      }

      .hero-video-frame {
        aspect-ratio: 4 / 5;
        min-height: 360px;
      }

      .hero-orbit-ribbon {
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .hero-ribbon-rail {
        stroke-width: 20px;
      }
    }

    @media(max-width:720px) {
      .hero-grid {
        gap: 28px !important;
      }

      .hero h1 {
        font-size: clamp(40px, 11.5vw, 50px) !important;
        line-height: 1.06 !important;
      }

      .hero-visual {
        max-width: 100%;
      }

      .hero-video-frame {
        aspect-ratio: 4 / 5;
        min-height: 250px;
      }

      .hero-orbit-ribbon {
        inset: 0;
        width: 100%;
        height: 100%;
      }


    }

    /* Typography QA: readable section titles and exact left alignment */
    .section-head {
      align-items: end !important;
      gap: 22px !important;
    }

    .section-head>div {
      display: grid;
      justify-items: start;
    }

    .section-head .eyebrow,
    .page .eyebrow {
      padding-left: 0 !important;
      padding-right: 0 !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      line-height: 1.25 !important;
      margin-left: 0 !important;
    }

    .section-title {
      /* Section titles (incl. direction-page H1) wrap to 2 lines on long
         Russian text — 1.18 keeps Й-breve and descenders from clipping. */
      line-height: 1.18 !important;
      max-width: 920px !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }

    .section-text {
      margin-top: 6px !important;
    }

    #page-pricing .section-head {
      margin-bottom: 34px !important;
    }

    @media(max-width:720px) {
      .section-head {
        gap: 14px !important;
        margin-bottom: 26px !important;
        padding-bottom: 18px !important;
      }

      .section-title {
        font-size: clamp(26px, 8vw, 42px) !important;
        line-height: 1.13 !important;
      }
    }

    /* Premium typography polish: link affordance, readable chips, and calmer CTA density */
    .section-head>div>.section-title+.section-text {
      margin-top: clamp(12px, 1.05vw, 18px) !important;
    }

    .section-text {
      line-height: 1.58 !important;
    }

    .contact-item strong {
      color: rgba(17, 17, 17, .5) !important;
      font-weight: 760 !important;
      letter-spacing: 0 !important;
    }

    .direction-icon {
      overflow: hidden;
      background: var(--premium-ink) !important;
      color: var(--premium-yellow) !important;
    }

    .direction-icon-image {
      width: 40px;
      height: 40px;
      display: block;
      object-fit: contain;
      filter: brightness(0) invert(1);
    }

    .direction-icon-image--wrestling,
    .direction-icon-image--judo,
    .direction-icon-image--sambo {
      width: 42px;
      height: 42px;
    }

    .direction-icon-image--mma {
      width: 40px;
      height: 40px;
    }

    .direction-icon-image--kickboxing,
    .direction-icon-image--muaythai,
    .direction-icon-image--karate {
      width: 43px;
      height: 43px;
    }

    .direction-icon-fallback {
      font-size: 20px;
      line-height: 1;
    }

    .field--premium-select {
      position: relative;
      z-index: 3;
    }

    .field--premium-select.is-open,
    .field--premium-select:focus-within {
      z-index: 40;
    }

    .premium-native-select {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      opacity: 0 !important;
      pointer-events: none !important;
      inset: auto auto 0 0;
    }

    .premium-direction-select {
      position: relative;
    }

    .premium-direction-trigger {
      width: 100%;
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 0 14px 0 16px;
      border: 1px solid rgba(17, 17, 17, .12);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 250, 240, .92));
      color: var(--premium-ink);
      font: inherit;
      font-weight: 680;
      letter-spacing: 0;
      text-align: left;
      cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 10px 24px rgba(17, 17, 17, .04);
      transition:
        border-color 220ms var(--premium-ease-standard),
        box-shadow 260ms var(--premium-ease),
        background-color 220ms var(--premium-ease-standard),
        transform 260ms var(--premium-ease);
    }

    .premium-direction-trigger i {
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(255, 212, 0, .22)),
        rgba(17, 17, 17, .04);
      border: 1px solid rgba(17, 17, 17, .1);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
      color: var(--premium-ink);
      font-size: 12px;
      transition: transform 220ms var(--premium-ease-standard);
      pointer-events: none;
    }

    .premium-direction-select.is-open .premium-direction-trigger {
      border-color: rgba(17, 17, 17, .28);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 18px 40px rgba(17, 17, 17, .1);
    }

    .premium-direction-select.is-open .premium-direction-trigger i {
      transform: rotate(180deg);
    }

    .premium-direction-menu {
      position: absolute;
      z-index: 45;
      inset: calc(100% + 8px) 0 auto;
      display: grid;
      gap: 3px;
      max-height: 280px;
      overflow: auto;
      margin: 0;
      padding: 8px;
      list-style: none;
      border: 1px solid rgba(17, 17, 17, .13);
      border-radius: 10px;
      background: #fffcf4;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 24px 54px rgba(17, 17, 17, .14);
      opacity: 0;
      transform: translateY(-6px) scale(.985);
      pointer-events: none;
      transform-origin: top center;
      transition:
        opacity 180ms var(--premium-ease-standard),
        transform 220ms var(--premium-ease);
    }

    .premium-direction-select.is-open .premium-direction-menu {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .premium-direction-option {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 11px 0 12px;
      border-radius: 7px;
      color: rgba(17, 17, 17, .74);
      font-size: 15px;
      font-weight: 680;
      line-height: 1.2;
      cursor: pointer;
      transition:
        background-color 160ms var(--premium-ease-standard),
        color 160ms var(--premium-ease-standard);
    }

    .premium-direction-option::after {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: transparent;
    }

    .premium-direction-option:hover,
    .premium-direction-option.is-active {
      background: rgba(17, 17, 17, .06);
      color: var(--premium-ink);
    }

    .premium-direction-option.is-selected {
      background: var(--premium-ink);
      color: #fff;
    }

    .premium-direction-option.is-selected::after {
      background: var(--premium-yellow);
      box-shadow: 0 0 0 4px rgba(255, 212, 0, .18);
    }

    .contact-time-options {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .contact-time-option {
      min-height: 48px;
      position: relative;
      display: grid;
      place-items: center;
      padding: 0 10px;
      border: 1px solid rgba(17, 17, 17, .12);
      border-radius: 8px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 250, 240, .92));
      color: rgba(17, 17, 17, .78);
      font-size: 14px;
      font-weight: 780;
      line-height: 1.15;
      text-align: center;
      cursor: pointer;
      transition:
        border-color 180ms var(--premium-ease-standard),
        background-color 180ms var(--premium-ease-standard),
        color 180ms var(--premium-ease-standard),
        box-shadow 220ms var(--premium-ease),
        transform 220ms var(--premium-ease);
    }

    .contact-time-option input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    .contact-time-option:has(input:checked) {
      border-color: rgba(17, 17, 17, .24);
      background: linear-gradient(180deg, #1d1a16, #080807);
      color: #fff !important;
      box-shadow: 0 12px 24px rgba(17, 17, 17, .12);
    }

    .contact-time-option:has(input:checked) span {
      color: #fff !important;
      opacity: 1;
    }

    .contact-time-option:focus-within {
      border-color: var(--premium-yellow);
      box-shadow: 0 0 0 4px rgba(255, 212, 0, .18);
    }

    @media(max-width:720px) {
      .field--premium-select.is-open {
        z-index: 80;
      }

      .contact-time-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .contact-item p {
      color: rgba(17, 17, 17, .86) !important;
      font-weight: 640 !important;
      line-height: 1.48 !important;
      margin-top: 3px !important;
    }

    .contact-item {
      position: relative;
      align-items: center !important;
      overflow: hidden;
    }

    .contact-item>div {
      min-width: 0;
    }

    a.contact-item {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
    }

    .contact-item-link {
      --contact-brand: var(--premium-yellow);
      --contact-brand-hover: var(--premium-yellow);
      --contact-brand-soft: rgba(255, 212, 0, .14);
      --contact-on-brand: var(--premium-ink);
      padding-right: 14px !important;
      transition:
        background-color 240ms var(--premium-ease-standard),
        border-color 240ms var(--premium-ease-standard),
        box-shadow 300ms var(--premium-ease),
        transform 300ms var(--premium-ease);
    }

    .contact-item>i {
      flex: 0 0 46px;
      width: 46px !important;
      height: 46px !important;
      display: grid;
      place-items: center;
      border: 1px solid rgba(17, 17, 17, .16) !important;
      border-radius: 10px !important;
      background: rgba(17, 17, 17, .1) !important;
      color: var(--premium-ink) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72) !important;
      transition:
        background-color 240ms var(--premium-ease-standard),
        border-color 240ms var(--premium-ease-standard),
        color 240ms var(--premium-ease-standard),
        box-shadow 300ms var(--premium-ease),
        transform 300ms var(--premium-ease);
    }

    .contact-item--telegram {
      --contact-brand: #229ed9;
      --contact-brand-hover: #1688bd;
      --contact-brand-soft: rgba(34, 158, 217, .12);
      --contact-on-brand: #fff;
    }

    .contact-item--whatsapp {
      --contact-brand: #25d366;
      --contact-brand-hover: #128c7e;
      --contact-brand-soft: rgba(37, 211, 102, .13);
      --contact-on-brand: #fff;
    }

    .contact-item--instagram {
      --contact-brand: #dd2a7b;
      --contact-brand-hover: #c13584;
      --contact-brand-soft: rgba(221, 42, 123, .12);
      --contact-on-brand: #fff;
    }

    .contact-item--vk {
      --contact-brand: #0077ff;
      --contact-brand-hover: #0069e0;
      --contact-brand-soft: rgba(0, 119, 255, .12);
      --contact-on-brand: #fff;
    }

    .contact-item--youtube {
      --contact-brand: #ff0000;
      --contact-brand-hover: #c70000;
      --contact-brand-soft: rgba(255, 0, 0, .1);
      --contact-on-brand: #fff;
    }

    .contact-item--max {
      --contact-brand: #007aff;
      --contact-brand-hover: #007aff;
      --contact-brand-soft: rgba(0, 122, 255, .12);
      --contact-on-brand: #fff;
    }

    .contact-brand-mark {
      flex: 0 0 46px;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid color-mix(in srgb, var(--contact-brand) 24%, transparent);
      border-radius: 10px;
      background: var(--contact-brand-soft);
      color: var(--contact-brand);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
      transition:
        background-color 240ms var(--premium-ease-standard),
        border-color 240ms var(--premium-ease-standard),
        color 240ms var(--premium-ease-standard);
    }

    .contact-brand-mark i,
    .contact-card-arrow i {
      width: auto !important;
      height: auto !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      color: currentColor !important;
      box-shadow: none !important;
      line-height: 1 !important;
    }

    .contact-brand-mark i {
      font-size: 24px !important;
    }

    .contact-brand-mark svg {
      width: 26px;
      height: 26px;
      display: block;
      color: currentColor;
    }

    .contact-brand-mark--max svg {
      width: 27px;
      height: 27px;
    }

    .footer-social-logo--max {
      color: currentColor;
      border-radius: 0;
    }

    .contact-card-arrow {
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      margin-left: auto;
      border-radius: 999px;
      background: rgba(17, 17, 17, .045);
      color: rgba(17, 17, 17, .56);
      transition:
        background-color 240ms var(--premium-ease-standard),
        color 240ms var(--premium-ease-standard),
        transform 300ms var(--premium-ease);
    }

    .contact-card-arrow i {
      font-size: 12px !important;
    }

    .filter-btn {
      min-height: 40px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 7px !important;
      padding: 0 14px !important;
      border-radius: 7px !important;
      font-size: 14px !important;
      font-weight: 760 !important;
      letter-spacing: 0 !important;
      line-height: 1.16 !important;
      background: rgba(255, 255, 255, .74) !important;
      border-color: rgba(17, 17, 17, .13) !important;
      color: var(--premium-ink) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .74) !important;
    }

    .filter-btn.active {
      background: var(--premium-ink) !important;
      border-color: var(--premium-ink) !important;
      color: #fff !important;
      box-shadow: 0 12px 24px rgba(17, 17, 17, .12) !important;
    }

    .filter-btn.active span,
    .filter-btn.active strong {
      color: inherit !important;
    }

    #page-schedule .schedule-filters .filter-btn.active,
    #trainerFilters .filter-btn.active {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px rgba(17, 17, 17, .055) !important;
    }

    .price-card .btn,
    .card-footer .btn {
      min-height: 48px !important;
      padding: 0 16px !important;
      border-radius: 7px !important;
      font-size: 14px !important;
      font-weight: 780 !important;
      letter-spacing: 0 !important;
      line-height: 1.22 !important;
      white-space: normal !important;
      text-wrap: balance;
    }

    .price-card {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
    }

    .price-card.popular {
      padding-top: 25px !important;
    }

    .price-card-head {
      min-height: 64px !important;
      display: flex !important;
      align-items: flex-start !important;
    }

    .price-card-head h3 {
      min-height: 0 !important;
      margin-bottom: 0 !important;
    }

    .price-card-head p {
      display: none !important;
    }

    .price-card .price-main {
      min-height: 60px !important;
      margin: 0 0 16px !important;
      padding-top: 0 !important;
      display: flex !important;
      align-items: baseline !important;
      flex-wrap: wrap !important;
      column-gap: 8px !important;
      row-gap: 2px !important;
    }

    .price-card .features-list {
      margin: 0 0 20px !important;
    }

    .price-card .card-footer {
      margin-top: auto !important;
    }

    @media(hover:hover) {

      .contact-item-link:hover {
        background: var(--contact-brand-hover) !important;
        border-color: color-mix(in srgb, var(--contact-brand-hover) 72%, #111 18%) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .24),
          0 18px 34px color-mix(in srgb, var(--contact-brand-hover) 28%, transparent) !important;
        transform: translateY(-1px);
      }

      .contact-item--max:hover {
        background:
          radial-gradient(136.12% 140.74% at 99.77% 99.04%,
            #8d28c8 0%,
            #7c42fa 20%,
            #007aff 80%,
            #609ceb 100%) !important;
        border-color: rgba(0, 122, 255, .38) !important;
      }

      .contact-item-link:hover strong,
      .contact-item-link:hover p {
        color: var(--contact-on-brand) !important;
      }

      .contact-item-link:hover strong {
        opacity: .72;
      }

      .contact-item-link:hover .contact-brand-mark {
        background: rgba(255, 255, 255, .18);
        border-color: rgba(255, 255, 255, .28);
        color: var(--contact-on-brand);
      }

      .contact-item-link:hover>i {
        background: rgba(17, 17, 17, .12) !important;
        border-color: rgba(17, 17, 17, .2) !important;
        color: var(--premium-ink) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .52) !important;
        transform: scale(1.03);
      }

      .contact-item-link:hover .contact-card-arrow {
        background: rgba(255, 255, 255, .22);
        color: var(--contact-on-brand);
        transform: translateX(3px);
      }
    }

    @media(max-width:720px) {
      .section-head>div>.section-title+.section-text {
        margin-top: 14px !important;
      }

      .filter-btn {
        min-height: 42px !important;
        padding: 0 13px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        text-align: center !important;
      }

      #page-schedule .schedule-filters {
        display: flex !important;
      }

      #page-schedule .schedule-filters,
      #trainerFilters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
      }

      #page-schedule .schedule-filters::-webkit-scrollbar,
      #trainerFilters::-webkit-scrollbar {
        display: none;
      }

      #page-schedule .schedule-filters .filter-btn,
      #trainerFilters .filter-btn {
        flex: 0 0 auto;
        color: var(--premium-ink) !important;
      }

      #page-schedule .schedule-filters .filter-btn.active,
      #trainerFilters .filter-btn.active {
        color: #fff !important;
      }

      .price-card .btn,
      .card-footer .btn {
        min-height: 50px !important;
        font-size: 14px !important;
      }
    }

    /* Direction concept: title, discipline note, centered martial-art mark, focused actions */
    :is(#home-directions, .directions-grid) {
      align-items: stretch;
    }

    :is(#home-directions, .directions-grid) .direction-card {
      min-height: 372px;
      display: grid !important;
      grid-template-rows: auto 1fr auto;
      gap: 22px;
      padding: 28px 26px 24px !important;
      text-align: left;
      isolation: isolate;
      color: #111 !important;
      background:
        radial-gradient(85% 75% at 50% 52%, rgba(255, 212, 0, .16), transparent 66%),
        linear-gradient(160deg, #fffef9 0%, color-mix(in srgb, var(--premium-yellow) 8%, #f7f2e8 92%) 100%) !important;
      border: 1px solid rgba(25, 22, 16, .12) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        0 22px 54px rgba(28, 25, 18, .09) !important;
      overflow: hidden;
    }

    :is(#home-directions, .directions-grid) .direction-card::before {
      content: none !important;
    }

    :is(#home-directions, .directions-grid) .direction-card::after {
      content: none;
    }

    :is(#home-directions, .directions-grid) .direction-card-copy {
      position: relative;
      z-index: 1;
      min-height: 112px;
    }

    :is(#home-directions, .directions-grid) .direction-card h3 {
      max-width: 11ch;
      margin-bottom: 10px;
      color: #111 !important;
      font-size: clamp(28px, 2.45vw, 36px) !important;
      /* Direction names like «Бразильское джиу-джитсу» wrap to two lines and
         contain ц/щ/у with descenders + sometimes Й — 1.12 is the minimum
         that keeps them from clipping into the adjacent line. */
      line-height: 1.12 !important;
      text-transform: uppercase;
      text-wrap: balance;
    }

    :is(#home-directions, .directions-grid) .direction-card p {
      max-width: 27ch;
      color: rgba(17, 17, 17, .58) !important;
      font-size: 16px !important;
      line-height: 1.46 !important;
    }

    :is(#home-directions, .directions-grid) .direction-icon {
      align-self: center;
      justify-self: center;
      width: min(84%, 228px);
      height: 180px;
      margin: 0 !important;
      border-radius: 0;
      background: transparent !important;
      color: var(--direction-color, var(--premium-yellow)) !important;
      box-shadow: none !important;
    }

    :is(#home-directions, .directions-grid) .direction-icon-link {
      text-decoration: none;
      cursor: pointer;
      outline: none;
      transition: transform 220ms var(--premium-ease), opacity 180ms var(--premium-ease-standard);
    }

    :is(#home-directions, .directions-grid) .direction-icon-link:focus-visible {
      outline: 2px solid var(--premium-yellow);
      outline-offset: 6px;
      border-radius: 12px;
    }

    :is(#home-directions, .directions-grid) .direction-icon-image {
      width: auto !important;
      max-width: 100% !important;
      height: 180px !important;
      max-height: 100% !important;
      display: block;
      object-fit: contain;
      filter: brightness(0);
      opacity: .94;
      transform: scale(var(--direction-icon-scale, 1));
      transform-origin: center;
    }

    :is(#home-directions, .directions-grid) .direction-icon-image--kickboxing,
    :is(#home-directions, .directions-grid) .direction-icon-image--muaythai,
    :is(#home-directions, .directions-grid) .direction-icon-image--karate {
      width: 100%;
      height: 100%;
    }

    :is(#home-directions, .directions-grid) .direction-icon-fallback {
      color: #111;
      font-size: 44px;
    }

    :is(#home-directions, .directions-grid) .direction-actions {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 10px;
      margin-top: 0 !important;
    }

    :is(#home-directions, .directions-grid) .direction-action {
      width: 100%;
      min-height: 50px !important;
      padding: 0 14px !important;
      border-radius: 10px !important;
      font-size: 13px !important;
      font-weight: 860 !important;
      letter-spacing: 0 !important;
      line-height: 1.15 !important;
      white-space: normal !important;
      text-wrap: balance;
    }

    :is(#home-directions, .directions-grid) .direction-action i {
      font-size: 12px;
    }

    :is(#home-directions, .directions-grid) .direction-action--schedule {
      color: #111 !important;
      background: var(--premium-yellow) !important;
      border: 1px solid color-mix(in srgb, var(--direction-color, #ffd400) 42%, rgba(17, 17, 17, .16)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        0 14px 30px color-mix(in srgb, var(--direction-color, #ffd400) 18%, transparent) !important;
    }

    :is(#home-directions, .directions-grid) .direction-action--trainers {
      color: #111 !important;
      background: rgba(255, 255, 255, .68) !important;
      border: 1px solid rgba(17, 17, 17, .16) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .54) !important;
    }

    @media(hover:hover) {
      :is(#home-directions, .directions-grid) .direction-card:hover {
        transform: translateY(-4px);
        border-color: rgba(25, 22, 16, .2) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, .82),
          0 30px 68px rgba(28, 25, 18, .14) !important;
      }

      :is(#home-directions, .directions-grid) .direction-action:hover,
      :is(#home-directions, .directions-grid) .direction-action:focus-visible {
        transform: translateY(-1px);
      }

      :is(#home-directions, .directions-grid) .direction-action--trainers:hover,
      :is(#home-directions, .directions-grid) .direction-action--trainers:focus-visible {
        background: #111 !important;
        border-color: #111 !important;
        color: #fff !important;
      }

      :is(#home-directions, .directions-grid) .direction-icon-link:hover {
        transform: translateY(-2px) scale(1.02);
        opacity: .98;
      }
    }

    @media(max-width:980px) {
      :is(#home-directions, .directions-grid) .direction-card {
        min-height: 350px;
      }
    }

    @media(max-width:720px) {
      :is(#home-directions, .directions-grid) .direction-card {
        min-height: auto;
        padding: 24px 22px 22px !important;
        gap: 20px;
      }

      :is(#home-directions, .directions-grid) .direction-card-copy {
        min-height: 0;
      }

      :is(#home-directions, .directions-grid) .direction-card h3,
      :is(#home-directions, .directions-grid) .direction-card p {
        max-width: 100%;
      }

      :is(#home-directions, .directions-grid) .direction-icon {
        width: min(82%, 190px);
        height: 148px;
      }

      :is(#home-directions, .directions-grid) .direction-icon-image {
        width: auto !important;
        max-width: 100% !important;
        height: 148px !important;
        max-height: 100% !important;
      }

      :is(#home-directions, .directions-grid) .direction-actions {
        grid-template-columns: 1fr;
      }
    }

    .home-kids-linkstrip {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, .84fr);
      gap: 18px 28px;
      align-items: center;
      margin-top: 26px;
      padding: 22px 0 2px;
      border-top: 1px solid rgba(25, 22, 16, .12);
    }

    .home-kids-linkstrip-copy {
      max-width: 700px;
    }

    .home-kids-eyebrow {
      margin: 0 0 7px;
      color: rgba(17, 17, 17, .54);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .home-kids-linkstrip h3 {
      margin: 0;
      color: #111;
      font-family: 'Oswald', sans-serif;
      font-size: clamp(24px, 2.2vw, 34px);
      line-height: 1.08;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .home-kids-linkstrip p:not(.home-kids-eyebrow) {
      margin: 10px 0 0;
      max-width: 78ch;
      color: rgba(17, 17, 17, .68);
      font-size: 15px;
      line-height: 1.58;
    }

    .home-kids-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 9px;
    }

    .home-kids-links a {
      display: inline-flex;
      align-items: center;
      min-height: 38px;
      padding: 8px 12px;
      border: 1px solid rgba(17, 17, 17, .14);
      border-radius: 999px;
      background: rgba(255, 255, 255, .5);
      color: #111;
      font-size: 13px;
      font-weight: 850;
      line-height: 1.15;
      text-decoration: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
      transition:
        transform 180ms var(--premium-ease-standard),
        background-color 180ms var(--premium-ease-standard),
        border-color 180ms var(--premium-ease-standard),
        color 180ms var(--premium-ease-standard);
    }

    .home-kids-links a:hover,
    .home-kids-links a:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(17, 17, 17, .28);
      background: #fff;
      color: #111;
      outline: none;
    }

    .home-kids-links .home-kids-all {
      border-color: rgba(17, 17, 17, .9);
      background: #111;
      color: #fff;
      box-shadow: 0 14px 30px rgba(17, 17, 17, .12);
    }

    .home-kids-links .home-kids-all:hover,
    .home-kids-links .home-kids-all:focus-visible {
      background: var(--premium-yellow);
      border-color: var(--premium-yellow);
      color: #111;
    }

    @media(max-width:980px) {
      .home-kids-linkstrip {
        grid-template-columns: 1fr;
      }

      .home-kids-links {
        justify-content: flex-start;
      }
    }

    @media(max-width:560px) {
      .home-kids-linkstrip {
        margin-top: 20px;
        padding-top: 18px;
      }

      .home-kids-links {
        display: grid;
        grid-template-columns: 1fr;
      }

      .home-kids-links a {
        justify-content: center;
        min-height: 44px;
        text-align: center;
      }
    }

    /* /kids variant: whole card is one <a> with a single "Подробнее" CTA —
       suppress link underline and let the button span the full footer width. */
    :is(#home-directions, .directions-grid) a.direction-card,
    :is(#home-directions, .directions-grid) a.direction-card:hover {
      text-decoration: none;
      color: #111;
    }

    :is(#home-directions, .directions-grid) a.direction-card .direction-actions {
      grid-template-columns: 1fr;
    }

    /* Unified card frame: no colored gradient rails */
    .card::before,
    .trainer-modal .card::before,
    :is(#home-directions, .directions-grid) .direction-card::before {
      content: none !important;
      display: none !important;
    }

    .card,
    .summary-card,
    .day-card,
    .mobile-day-card,
    .budget-rule,
    .contact-item,
    .form {
      border-color: rgba(25, 22, 16, .12) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .72),
        0 18px 44px rgba(28, 25, 18, .075) !important;
    }

    .card:hover,
    .summary-card:hover,
    .day-card:hover,
    .mobile-day-card:hover,
    .budget-rule:hover,
    .contact-item:hover,
    .form:focus-within {
      border-color: rgba(25, 22, 16, .18) !important;
    }

    @media(prefers-reduced-motion:reduce) {
      html {
        scroll-behavior: auto !important
      }

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
      }

      .stagger-item {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important
      }

      .stagger-item.is-visible {
        opacity: 1 !important;
        transform: none !important
      }
    }

    /* Schedule cards must use the admin-selected direction color, even for custom slugs */
    .timeline-session[style*="--session-accent"],
    .mobile-session[style*="--session-accent"] {
      border-left-color: var(--session-accent, var(--premium-yellow)) !important;
      border-color: color-mix(in srgb, var(--session-accent, var(--premium-yellow)) 46%, rgba(17, 17, 17, .12)) !important;
      background:
        linear-gradient(135deg,
          color-mix(in srgb, var(--session-accent, var(--premium-yellow)) 30%, #fff 70%),
          color-mix(in srgb, var(--session-accent, var(--premium-yellow)) 10%, #fff 90%)) !important;
    }

    /* UI/UX Pro Max motion pass: calm viewport-triggered reveals across pages.
       Cards/plates rise and fade as they scroll into view, cascading top-to-bottom
       and left-to-right via the JS-set --stagger-index. The hiding state is only
       added by JS once an IntersectionObserver is wired, so content is never left
       invisible when motion is unavailable. */
    .stagger-item {
      opacity: 0 !important;
      transform: translate3d(0, 24px, 0) scale(.985) !important;
      transition: none !important;
      will-change: opacity, transform;
    }

    .stagger-item.stagger-ready {
      transition:
        opacity 560ms cubic-bezier(.16, 1, .3, 1),
        transform 560ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 260ms cubic-bezier(.2, .8, .2, 1),
        border-color 180ms ease !important;
      transition-delay: calc(var(--stagger-index, 0) * 55ms) !important;
    }

    .stagger-item.is-visible {
      opacity: 1 !important;
      transform: translate3d(0, 0, 0) scale(1) !important;
      will-change: auto;
    }

    @media(max-width:720px) {
      .stagger-item {
        transform: translate3d(0, 14px, 0) scale(.992) !important;
      }

      .stagger-item.stagger-ready {
        transition-duration: 480ms, 480ms, 240ms, 180ms !important;
        transition-delay: calc(var(--stagger-index, 0) * 42ms) !important;
      }
    }

    /* Mobile bottom sheets: navigation and filters share one gesture model */
    @media(max-width:720px) {
      html.sheet-open,
      body.sheet-open {
        overflow: hidden !important;
        overscroll-behavior: none;
      }

      .sheet-backdrop {
        /* critical.css hides .drawer-backdrop (display:none) to keep it out of
           normal flow before app.css loads; it must be restored here or the
           backdrop never paints — no dim, no blur, and real taps fall straight
           through to the page (only the sheet's own swipe works). It's fixed +
           opacity:0 + pointer-events:none at rest, so display:block is harmless. */
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 1300 !important;
        background: rgba(17, 17, 17, .38) !important;
        -webkit-backdrop-filter: blur(7px) !important;
        backdrop-filter: blur(7px) !important;
        /* Force an own compositing layer: WKWebView silently drops backdrop-filter
           on a backdrop that's also animating opacity unless it's GPU-promoted.
           The dark tint above is the guaranteed fallback if blur still won't paint. */
        transform: translateZ(0);
        /* iOS Safari / WKWebView won't fire `click` on a bare <div> without a
           pointer affordance; this is what lets a tap on the dim area register
           (paired with the pointer-event handler in main.js). */
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        /* CLOSE timing: a short 80ms HOLD masks the instant SPA content flip,
           then the dim+blur fades gently across the whole descent — finishing
           (~460ms) exactly when the sheet is fully gone, so the blur lifts
           gradually (soft page reveal) and never disappears before the drawer
           does. Open timing (prompt fade-in) is on .is-active/.active below. */
        transition: opacity 380ms var(--premium-ease-standard) 80ms, visibility 0s 460ms;
        touch-action: none;
        overscroll-behavior: contain;
      }

      .sheet-backdrop.is-active,
      .sheet-backdrop.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        /* OPEN timing: blur/dim fades in gently with the sheet, no hold. */
        transition: opacity 260ms var(--premium-ease-standard), visibility 0s;
      }

      .bottom-sheet {
        position: fixed !important;
        top: auto !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: 0 !important;
        left: max(12px, env(safe-area-inset-left)) !important;
        z-index: 1301 !important;
        display: flex !important;
        flex-direction: column;
        width: auto !important;
        height: auto !important;
        max-height: 70% !important;
        padding: 10px 16px max(16px, env(safe-area-inset-bottom)) !important;
        border: 1px solid rgba(17, 17, 17, .13) !important;
        border-radius: 16px 16px 0 0 !important;
        background: #fffdf8 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 28px 80px rgba(17, 17, 17, .24) !important;
        overflow: hidden auto !important;
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transform: translateY(100%) !important;
        /* CLOSE timing (base = the state .active transitions TO when removed):
           a soft iOS-glide slide where the sheet stays opaque for the bulk of
           the travel (opacity holds 220ms, then eases out — no harsh linear cut)
           so the descent is clearly visible instead of fading out mid-slide; the
           fade ends exactly with the slide (460ms). Open timing is faster and
           lives on .bottom-sheet.is-active/.active below. */
        transition:
          transform 460ms var(--sheet-ease),
          opacity 240ms var(--sheet-ease) 220ms,
          visibility 0s 460ms !important;
        touch-action: pan-y;
        overscroll-behavior: contain;
        will-change: transform;
      }

      .bottom-sheet.is-active,
      .bottom-sheet.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        /* OPEN timing: soft iOS-glide slide-up (same curve as close, slightly
           quicker). Higher specificity + !important so it wins over the base
           CLOSE transition while the sheet is open; the base takes back over the
           instant .active is removed (the close). */
        transition:
          transform 400ms var(--sheet-ease),
          opacity 240ms var(--sheet-ease),
          visibility 0s !important;
      }

      .drawer::before {
        content: '';
        display: block;
        width: 40px !important;
        height: 4px;
        flex: 0 0 auto;
        margin: 0 auto 14px !important;
        border-radius: 4px;
        background: rgba(17, 17, 17, .18) !important;
      }

      .drawer ul {
        gap: 9px !important;
      }

      .drawer a {
        display: flex !important;
        align-items: center !important;
        gap: 13px !important;
        min-height: 58px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(17, 17, 17, .08) !important;
        border-radius: 14px !important;
        background: #fff !important;
        box-shadow: 0 1px 2px rgba(17, 17, 17, .05);
        font-size: 15px !important;
        font-weight: 700 !important;
      }

      /* Leading icon chip — replaces the old trailing chevron. Overrides the
         global trailing-icon layout (.drawer a i, ~L4912) for the bottom sheet:
         the glyph sits in a 38px tinted square at the start of the row. */
      .drawer a i {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 auto;
        border-radius: 11px !important;
        background: rgba(17, 17, 17, .05) !important;
        color: #1d1b16 !important;
        font-size: 17px !important;
      }

      .drawer a span {
        flex: 1 1 auto;
        min-width: 0;
      }

      /* Tactile press feedback — mobile has no :hover, so give the tap a state. */
      .drawer a:active {
        transform: scale(.985);
        background: #faf8f1 !important;
      }

      .drawer.is-dragging {
        transition: none !important;
      }

      /* Nav-item cascade: list items rise+fade in one after another as the sheet
         opens (≈45ms apart) for a more deliberate, premium reveal. CSS-only and
         self-contained — the drawer is excluded from both reveal engines
         (SOFT_TEXT_EXCLUDE_SELECTOR; items carry no .stagger-item), so there's no
         double-reveal. Delays live ONLY on the open state, so on close (class
         removed) the items fade out together with the sheet — no reverse cascade. */
      .bottom-sheet ul li {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 340ms var(--sheet-ease), transform 340ms var(--sheet-ease);
      }

      .bottom-sheet.is-active ul li,
      .bottom-sheet.active ul li {
        opacity: 1;
        transform: none;
      }

      .bottom-sheet.is-active ul li:nth-child(1), .bottom-sheet.active ul li:nth-child(1) { transition-delay: 60ms; }
      .bottom-sheet.is-active ul li:nth-child(2), .bottom-sheet.active ul li:nth-child(2) { transition-delay: 110ms; }
      .bottom-sheet.is-active ul li:nth-child(3), .bottom-sheet.active ul li:nth-child(3) { transition-delay: 160ms; }
      .bottom-sheet.is-active ul li:nth-child(4), .bottom-sheet.active ul li:nth-child(4) { transition-delay: 210ms; }
      .bottom-sheet.is-active ul li:nth-child(5), .bottom-sheet.active ul li:nth-child(5) { transition-delay: 260ms; }
      .bottom-sheet.is-active ul li:nth-child(6), .bottom-sheet.active ul li:nth-child(6) { transition-delay: 310ms; }
      .bottom-sheet.is-active ul li:nth-child(n+7), .bottom-sheet.active ul li:nth-child(n+7) { transition-delay: 360ms; }

    }

    @media(prefers-reduced-motion:reduce) {
      .stagger-item,
      .stagger-item.stagger-ready,
      .stagger-item.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
      }
    }

    /* Soft text and metric motion: no glow, no underline, no light sweep. */
    #hero-title span,
    #hero-title .soft-word {
      background-image: none !important;
      border-bottom: 0 !important;
      box-shadow: none !important;
      text-decoration: none !important;
    }

    #hero-title span::after,
    #hero-title .soft-word::after {
      content: none !important;
      display: none !important;
      background: none !important;
    }

    .soft-text-reveal {
      opacity: 0;
      transform: translate3d(0, 8px, 0);
      transition:
        opacity 820ms cubic-bezier(.16, 1, .3, 1),
        transform 820ms cubic-bezier(.16, 1, .3, 1);
      transition-delay: var(--text-reveal-delay, 0ms);
      will-change: opacity, transform;
    }

    /* Pre-paint hide of every selector that applySoftTextReveals() will later
       wrap with .soft-text-reveal. The head script sets html.js-armed-motion
       synchronously (before <body> parses) and main.js removes it once the
       soft-text-reveal class is actually on the elements; a 4s setTimeout in
       the head also strips the class as a load-failure failsafe, so content
       is never permanently hidden. Mirrors SOFT_TEXT_REVEAL_SELECTOR in main.js. */
    html.js-armed-motion .hero-copy h1,
    html.js-armed-motion .hero-copy p,
    html.js-armed-motion .stat > span,
    html.js-armed-motion .section-head .eyebrow,
    html.js-armed-motion .section-head .section-title,
    html.js-armed-motion .section-head .section-text,
    html.js-armed-motion .card h3,
    html.js-armed-motion .card p,
    html.js-armed-motion .trainer-experience span,
    html.js-armed-motion .trainer-achievements li,
    html.js-armed-motion .price-main > span,
    html.js-armed-motion .budget-flow-item strong,
    html.js-armed-motion .budget-rule h3,
    html.js-armed-motion .budget-rule p,
    html.js-armed-motion .budget-rule li,
    html.js-armed-motion .contact-item strong,
    html.js-armed-motion .contact-item p,
    html.js-armed-motion .faq-question-text {
      opacity: 0;
    }

    /* The FAQ question lives inside a flex button alongside a ::after "+" icon.
       Make the text wrapper take all remaining space so the icon stays pinned to
       the right, and let words wrap naturally inside it. */
    .faq-question .faq-question-text {
      flex: 1;
      min-width: 0;
      display: block;
    }

    .soft-text-reveal .soft-word {
      display: inline-block;
      opacity: 0;
      transform: translate3d(0, 6px, 0);
      transition:
        opacity 820ms cubic-bezier(.16, 1, .3, 1),
        transform 820ms cubic-bezier(.16, 1, .3, 1);
      transition-delay: calc(var(--text-reveal-delay, 0ms) + var(--word-delay, 0ms));
      will-change: opacity, transform;
    }

    .soft-text-reveal.is-visible {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      will-change: auto;
    }

    .soft-text-reveal.is-visible .soft-word {
      opacity: 1;
      transform: translate3d(0, 0, 0);
      will-change: auto;
    }

    .metric-counter {
      display: inline-block;
      min-width: max-content;
      font-variant-numeric: tabular-nums;
      transform-origin: left center;
      transition: transform 620ms cubic-bezier(.16, 1, .3, 1), opacity 620ms cubic-bezier(.16, 1, .3, 1);
    }

    .metric-counter.is-counting {
      transform: translate3d(0, -1px, 0) scale(1.015);
    }

    @media(prefers-reduced-motion:reduce) {
      .soft-text-reveal,
      .soft-text-reveal .soft-word,
      .soft-text-reveal.is-visible,
      .soft-text-reveal.is-visible .soft-word,
      .metric-counter,
      .metric-counter.is-counting {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
      }
    }

    /* Hall gallery: equal frames for admin-managed photos */
    .gallery-page .gallery-section {
      background: linear-gradient(180deg, #fff 0%, rgba(246, 244, 235, .72) 100%);
    }

    .gallery-page .section-head {
      align-items: end;
      margin-bottom: 28px;
    }

    .gallery-lead {
      margin-top: 14px;
      max-width: 620px;
    }

    .gallery-wall,
    .gallery-wall[data-count] {
      --gallery-gap: 20px;
      display: grid !important;
      grid-template-columns: repeat(auto-fill, 342px) !important;
      grid-auto-rows: auto !important;
      gap: var(--gallery-gap) !important;
      align-items: start !important;
      justify-content: center !important;
    }

    .gallery-tile,
    .gallery-tile:nth-child(n) {
      grid-column: auto !important;
      grid-row: auto !important;
      display: block !important;
      width: 342px !important;
      height: 262px !important;
      min-width: 342px;
      min-height: 262px;
      padding: 10px;
      border-radius: 14px !important;
      border: 1px solid rgba(17, 17, 17, .12) !important;
      background: #fff !important;
      box-shadow: 0 16px 40px rgba(17, 17, 17, .08) !important;
      overflow: hidden;
    }

    .gallery-tile .gallery-img,
    .gallery-tile:nth-child(n) .gallery-img {
      width: 320px !important;
      height: 240px !important;
      aspect-ratio: auto !important;
      margin: 0 !important;
      border-radius: 10px !important;
      border: 1px solid rgba(17, 17, 17, .08) !important;
      background: #d9d0bf;
    }

    .gallery-tile h3,
    .gallery-tile p {
      display: none !important;
    }

    .gallery-wall[data-count="1"] {
      grid-template-columns: 342px !important;
      justify-content: center;
    }

    .gallery-wall[data-count="2"] {
      grid-template-columns: repeat(2, 342px) !important;
    }

    @media (max-width: 700px) {
      .gallery-page .section-head {
        align-items: start;
        margin-bottom: 22px;
      }

      .gallery-wall,
      .gallery-wall[data-count],
      .gallery-wall[data-count="1"],
      .gallery-wall[data-count="2"] {
        --gallery-gap: 16px;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
      }

      .gallery-tile,
      .gallery-tile:nth-child(n) {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 8px;
      }

      .gallery-tile .gallery-img,
      .gallery-tile:nth-child(n) .gallery-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
      }
    }

    /* FOUC-safe failsafe: when JS does not load (and therefore the no-js→js
       swap never happens), the pre-rendered cards stay fully visible. The
       inline head script flips html.no-js → html.js synchronously before
       <body> parses, so JS-enabled users get the normal hidden-then-reveal
       animation; only true JS-disabled / load-failure paths hit this rule. */
    html.no-js .stagger-item,
    html.no-js .stagger-item.stagger-ready,
    html.no-js .soft-text-reveal,
    html.no-js .soft-text-reveal .soft-word {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }

    /* Mobile drawer: mark the current page decisively — a brand-yellow accent
       bar down the left edge, a faint yellow tint + outline, and a solid-yellow
       icon chip. Far more legible than the old 16%-opacity wash on cream. */
    .drawer a.active {
      background: #fffdf3 !important;
      border-color: rgba(255, 212, 0, .55) !important;
      box-shadow: inset 3px 0 0 var(--premium-yellow, #ffd400), 0 1px 2px rgba(17, 17, 17, .05) !important;
      color: var(--premium-ink, var(--brand-black, #101010)) !important;
      font-weight: 800 !important;
    }

    .drawer a.active i {
      background: var(--premium-yellow, #ffd400) !important;
      color: #14130f !important;
    }

    /* Topical landing pages — direction-, kids- and /kids hub styles.
       Engine emits #page-home with extra topical content; these classes
       shape the visual without changing the home page itself.
       --topic-color is set per-URL via inline style on #page-home. */

    .topical-breadcrumb {
      font-size: 13px;
      padding: 24px 0 0;
      color: #555;
    }
    .topical-breadcrumb .container { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .topical-breadcrumb a {
      color: #555;
      text-decoration: none;
      border-bottom: 1px solid rgba(122, 90, 0, .35);
      transition: color .2s ease, border-color .2s ease;
    }
    .topical-breadcrumb a:hover {
      color: #7a5a00;
      border-bottom-color: #7a5a00;
    }
    .topical-breadcrumb .crumb-sep {
      color: #aaa;
      margin: 0 2px;
    }
    .topical-breadcrumb .crumb-current {
      color: #7a5a00;
      font-weight: 700;
    }

    @media (max-width: 720px) {
      .topical-breadcrumb {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .topical-breadcrumb::-webkit-scrollbar { display: none; }
      .topical-breadcrumb .container { flex-wrap: nowrap; white-space: nowrap; }
    }

    /* Schedule list — replaces the previous inline-styled <ul> in kids/direction
       pages with a card-style block matching the home page rhythm. */
    .topical-schedule-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .topical-schedule-item {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 14px;
      padding: 16px 18px;
      background: rgba(255, 255, 255, .85);
      border-radius: 14px;
      border: 1px solid rgba(17, 17, 17, .08);
      box-shadow: 0 1px 2px rgba(0,0,0,.02);
    }
    .topical-schedule-item .sch-day {
      min-width: 120px;
      font-weight: 700;
      color: #111;
    }
    .topical-schedule-item .sch-time {
      font-weight: 700;
      color: #111;
      font-variant-numeric: tabular-nums;
    }
    .topical-schedule-item .sch-trainer { color: #555; }
    .topical-schedule-item .sch-meta {
      color: #7a5a00;
      font-size: 13px;
      font-weight: 600;
    }

    /* /kids schedule accordion — reuses FAQ .faq-item / .faq-question /
       .faq-answer markup so design and animation (max-height transition,
       "+" → "×" rotation) come from the FAQ rules above. Only the inner
       schedule list needs a small reset to live cleanly inside .faq-answer-inner. */
    .kids-schedule-faq-list {
      max-width: 980px;
      margin: 0 auto;
    }
    .kids-schedule-faq-item .faq-answer-inner {
      max-width: none;
    }
    .kids-schedule-faq-item .topical-schedule-list {
      margin: 0;
    }

    /* Topical mode flag — set as inline style on #page-home for non-home URLs.
       When .has-topic is on, default home stats block is hidden because the
       topical marker substitutes them out (kept here as defense-in-depth). */
    #page-home.has-topic .stats { display: none; }

    #page-home.has-topic .btn-primary {
      box-shadow: 0 6px 18px color-mix(in srgb, var(--topic-color, #ffd400) 35%, transparent);
    }

    /* Trainer card direction-color accent stripe (when --topic-color is set). */
    #page-home.has-topic .trainer-card {
      position: relative;
      overflow: hidden;
    }
    #page-home.has-topic .trainer-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 4px;
      height: 100%;
      background: linear-gradient(180deg, var(--topic-color, #ffd400), transparent);
      opacity: .9;
    }

    /* Компактная форма заявки на телефоне — вся форма вместе с кнопкой
       «Отправить заявку» должна помещаться в экран. Десктоп не трогаем. */
    @media (max-width: 720px) {
      .contact-form {
        padding: 18px;
      }

      .contact-form .field {
        gap: 4px;
        margin-bottom: 10px;
      }

      .contact-form .field label {
        font-size: 12px;
      }

      .contact-form .field input,
      .contact-form .field select {
        padding: 11px 13px;
      }

      .contact-form .phone-input > input {
        padding: 11px 13px;
      }

      .contact-form .field textarea {
        min-height: 64px;
        padding: 10px 13px;
      }

      .contact-form .premium-direction-trigger {
        min-height: 46px;
      }

      .contact-form .contact-time-options {
        gap: 6px;
      }

      .contact-form .contact-time-option {
        min-height: 44px;
        padding: 0 4px;
        font-size: 12.5px;
      }

      /* «Удобное время» (4 коротких варианта) — одной строкой вместо 2×2;
         у «Как с вами связаться» вариантов два — остаётся два столбца.
         Без поддержки :has() сетка просто остаётся 2×2. */
      .contact-form .contact-time-options:has(> :nth-child(4)) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .contact-form .privacy-consent {
        margin-top: 8px;
        font-size: 11px;
      }
    }

    /* Hero video reveal — decoupled from the early `.is-loaded` pass so the
       video fades in together with the headline word-cascade (which waits on
       document.fonts.ready in main.js) instead of popping in first on a heavier
       font load. The figure stays hidden under `.is-loaded` and only reveals
       once `.hero-media-ready` is set — by main.js the instant the hero
       soft-text reveal fires, with boot/failsafe backstops so it is never
       stuck hidden. Higher specificity + later position keep these winning over
       the shared `.hero.is-loaded [data-hero-reveal]` rule; the transition and
       150ms delay are inherited from the base `.hero [data-hero-reveal]` rule. */
    .hero.is-loaded .hero-visual[data-hero-reveal] {
      opacity: 0;
      transform: translate3d(0, 20px, 0);
    }

    .hero.is-loaded.hero-media-ready .hero-visual[data-hero-reveal] {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }

    /* ── Hall gallery lightbox (desktop / mouse only) ─────────────────────────
       Click a gym photo to open it full-screen with prev/next. The whole feature
       is gated to (hover: hover) and (pointer: fine) — i.e. mouse/trackpad
       devices only — so a TAP on a phone or tablet never triggers it and the
       grid stays a plain overview there (matched by the same media query in JS,
       galleryLightboxEnabled). The overlay node is built lazily in main.js
       (ensureGalleryLightbox) and appended to <body>, so prerender/critical CSS
       are untouched. WKWebView-safe: opacity + transform only (see
       [[frontend-animation-engine]]). */
    @media (hover: hover) and (pointer: fine) {
      .gallery-page .gallery-tile {
        cursor: zoom-in;
      }

      .gallery-page .gallery-tile img {
        transition: transform .4s var(--premium-ease, cubic-bezier(.16, 1, .3, 1));
      }

      .gallery-page .gallery-tile:hover img {
        transform: scale(1.05);
      }
    }

    .gallery-lightbox {
      position: fixed;
      inset: 0;
      /* Above the fixed topbar (1100/1200) and toast/drawer (1300/1301) so the
         dim covers the whole viewport and the close button (top:20px) isn't
         occluded by the nav bar. */
      z-index: 1400;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(20px, 5vw, 64px);
      background: rgba(8, 8, 8, .9);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transition: opacity .28s ease, visibility .28s ease;
    }

    .gallery-lightbox.is-open {
      opacity: 1;
      visibility: visible;
    }

    .gallery-lightbox-figure {
      position: relative;
      max-width: min(1100px, 92vw);
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gallery-lightbox-img {
      display: block;
      max-width: 100%;
      max-height: 80vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
      background: #1a1a1a;
      transform: scale(.96);
      transition: transform .28s var(--premium-ease, cubic-bezier(.16, 1, .3, 1));
    }

    .gallery-lightbox.is-open .gallery-lightbox-img {
      transform: scale(1);
    }

    .gallery-lightbox-btn {
      position: absolute;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      transition: background .2s ease, transform .2s ease;
    }

    .gallery-lightbox-btn:hover {
      background: rgba(255, 255, 255, .26);
    }

    .gallery-lightbox-close {
      top: 20px;
      right: 20px;
    }

    .gallery-lightbox-prev,
    .gallery-lightbox-next {
      top: 50%;
      transform: translateY(-50%);
    }

    .gallery-lightbox-prev { left: 20px; }
    .gallery-lightbox-next { right: 20px; }

    .gallery-lightbox-prev:hover,
    .gallery-lightbox-next:hover {
      transform: translateY(-50%) scale(1.08);
    }

    /* Single photo → no prev/next arrows. */
    .gallery-lightbox[data-single="true"] .gallery-lightbox-prev,
    .gallery-lightbox[data-single="true"] .gallery-lightbox-next {
      display: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .gallery-lightbox,
      .gallery-lightbox-img,
      .gallery-page .gallery-tile img {
        transition: none;
      }
    }

/* ── Self-hosted fonts: non-critical weights ─────────────────────────────────
   The critical weights (Oswald 700, Manrope 400/700) are declared + preloaded in
   critical.css/the shell. These lighter-used weights load here (async) so they
   don't bloat the inlined critical CSS. Replaces the old render-blocking Google
   Fonts <link>. unicode-range mirrors Google's cyrillic + latin subsets. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/manrope-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/oswald-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/oswald-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/oswald-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/oswald-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}