/* =====================================================================
   GUSEVPIANO.COM — SHARED STYLESHEET (clean rebuild 2026-07-14)
   ---------------------------------------------------------------------
   Architecture, in file order (details: docs/responsive-versions.md and
   docs/layout-spec.md — read BEFORE any layout edit):

   1. BASE — width-neutral identity of the chrome (header / menus / footer)
      and of the shared .ap-* / widgets content system. No size-varying
      values live here except width-neutral defaults that the band blocks
      below re-state per band.
   2. UNIFIED SITE CHROME — the white sticky header + solid footer skin,
      Lora @font-face, the Palatino/Lora font law.
   3. WHITE PAGE CONTENT — the flat white/grey-band content skin for the
      nine <body class="page-white"> pages.
   4. THE FIVE VERSIONS — SHARED LAYER — five sealed, double-bounded
      @media bands (PHONE ≤768.98 · TABLET 769–1024.98 · MACBOOK
      1025–1599.98 · WIDE 1600–2099.98 · XWIDE ≥2100) carrying every
      size-varying value of the chrome + shared content system.

   The retired gold-era design was DELETED from this file on 2026-07-14
   (git history keeps every old revision — commit c4e53b0 and earlier).
   index.html, about-music.html and studio/index.html carry their own
   page-local <style> blocks that override this file; the other nine
   pages opt into the shared skin via body.page-white.

   EDIT LAW: a size-varying property changes in ALL FIVE band blocks or
   none; width-neutral identity changes in BASE (and, for chrome values,
   in the three page-local copies too). Never invent a new @media
   cut-off. Bump style.css?v= on all 12 pages after every edit.
   ===================================================================== */
   html { scroll-behavior: smooth; }
   body {
       margin: 0;
       padding: 0;
   }

   /* =========================================
      PURE HTML HEADER (solid white, sticky — see UNIFIED SITE CHROME at end)
      ========================================= */
   .site-header {
       /* Layout / stacking only. position, background, padding and the (now
          retired) transparent->solid transition are supplied by the UNIFIED SITE
          CHROME block at the end of this file, which makes the header solid white
          and sticky from the very top on every page. */
       left: 0; width: 100%; z-index: 9999;
   }
   .header-container {
       max-width: 1200px; margin: 0 auto; padding: 0 20px;
       display: flex; justify-content: space-between; align-items: center;
   }
   .header-logo { text-decoration: none; display: flex; flex-direction: column; align-items: stretch; }
   /* Brand lockup: NAME on top, ROLE justified to fill the name's exact width.
      The name (nowrap, widest line) sets the lockup width; the role line is
      justified edge-to-edge so it lines up perfectly under the name. */
   .logo-name { font-family: 'Georgia', serif; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 1.5px; color: #fff; font-weight: bold; white-space: nowrap; transition: color 0.4s ease; }
   .logo-role { font-size: 0.85rem; text-transform: uppercase; color: #fff; font-weight: 600; transition: color 0.4s ease;
                }


   .header-nav { display: flex; gap: 20px; align-items: center; }
   .header-nav > a,
   .header-nav .nav-link {
       text-decoration: none;
       font-weight: 500 !important;
       transition: color 0.3s ease;
       text-transform: uppercase;
       font-size: 0.9rem;
       letter-spacing: 1px;
       background: transparent;
       border: none;
       cursor: pointer;
       padding: 8px 0;
       display: inline-flex;
       align-items: center;
       gap: 6px;

   }

   /* Dropdown caret */
   .has-submenu > .nav-link::after,
   .has-submenu > .submenu-link::after {
       content: '';
       display: inline-block;
       width: 6px;
       height: 6px;
       border-right: 1.5px solid currentColor;
       border-bottom: 1.5px solid currentColor;
       transform: rotate(45deg) translate(-2px, -2px);
       transition: transform 0.3s ease;
       margin-left: 4px;
       flex-shrink: 0;
   }
   .nav-item { position: relative; }
   .nav-item:hover > .nav-link::after,
   .nav-item:focus-within > .nav-link::after { transform: rotate(225deg) translate(-2px, -2px); }

   /* Submenu (1st & 2nd level) — white panel, hairline border, black text.
      WIDTH: the panel hugs its longest item (nowrap items + their 20px side
      paddings size it), so the gap right of the text equals the 20px on the
      left. min-width:100% only keeps it from ever being narrower than its
      trigger («Студия фортепиано» is wider than its items) — a fixed px
      min-width would reopen a big dead zone right of short menus («Главная»).
      PADDING: symmetric top = bottom. Every item is uppercase, so the empty
      descender strip is identical above and below every gap and cancels out —
      equal metric spacing (a 12px gap everywhere) also reads as balanced. */
   .submenu {
       display: none;
       position: absolute;
       top: 100%;
       left: 0;
       min-width: 100%;
       background-color: rgba(255, 255, 255, 0.98);
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
       border: 1px solid rgba(0, 0, 0, 0.14);
       border-radius: 4px;
       padding: 6px 0;
       z-index: 10000;
       box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
       margin-top: 0;
   }

   /* Invisible bridge so the dropdown stays open when moving mouse from parent to the panel */
   .submenu::before {
       content: '';
       position: absolute;
       top: -10px;
       left: 0;
       right: 0;
       height: 10px;
       background: transparent;
   }
   .nav-item:hover > .submenu,
   .nav-item:focus-within > .submenu { display: block; }

   .submenu a,
   .submenu .submenu-link {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 6px 20px;
       color: #000000 !important;
       text-decoration: none;
       font-size: 0.82rem;
       text-transform: uppercase;
       letter-spacing: 1.2px;
       font-weight: 500 !important;
       white-space: nowrap;
       transition: color 0.2s ease;
       background: transparent;
       border: none;
       width: 100%;
       text-align: left;

       cursor: pointer;
       box-sizing: border-box;
   }
   .submenu a:hover,
   .submenu .submenu-link:hover {
       background-color: transparent;

   }

   /* Submenu section caption (e.g. «Уроки») — a small, quiet, non-clickable group
      label, flush-aligned with the items, set off above by a subtle hairline.
      Uniform 12px rhythm: the caption sits a 12px gap below the item above it
      (item pad-bottom 6 + margin-top 6) and its own text sits 12px below the
      hairline (pad-top 12), matching every other gap in the panel. */
   .submenu-caption {
       display: block;
       padding: 12px 20px 6px;
       margin-top: 6px;
       border-top: 1px solid rgba(0, 0, 0, 0.08);
       font-size: 0.82rem;
       text-transform: uppercase;
       letter-spacing: 1.2px;


       white-space: nowrap;
       cursor: default;
       box-sizing: border-box;
   }
   /* «Педагогам» (supervision) sits between the «Уроки» links and «Отзывы»,
      set off by hairlines ABOVE and BELOW it. The neighbours' 6px paddings +
      the 6px margins + the item's own 12px paddings make every empty gap
      around both lines an equal 12px — matching the rest of the panel.
      Class-based on purpose: positional nth-of-type rules break as soon as
      menu items are added or moved. */
   .submenu a.submenu-sep {
       border-top: 1px solid rgba(0, 0, 0, 0.08);
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       margin: 6px 0;
       padding: 12px 20px;
   }


   /* ---------- Language buttons (Ru / En) ---------- */
   .lang-group {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       margin-left: 10px;
   }
   .lang-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 36px;
       text-decoration: none;
       border: 1px solid rgba(255, 255, 255, 0.55);
       border-radius: 3px;
       padding: 5px 10px;
       font-size: 0.8rem;
       letter-spacing: 1px;
       text-transform: uppercase;

       font-weight: 600 !important;
       background: transparent;
       transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
   }
   /* Colors for the language buttons (black chrome look) come from the
      UNIFIED SITE CHROME block below. */


   /* ---------- Hamburger Button (hidden on desktop) ---------- */
   .hamburger-btn {
       display: none;
       background: transparent;
       border: none;
       cursor: pointer;
       padding: 8px;
       flex-direction: column;
       gap: 6px;
       z-index: 10001;
   }
   .hamburger-btn span {
       display: block;
       width: 28px;
       height: 2px;

       transition: all 0.3s ease;
       border-radius: 2px;
   }
   /* When the full-screen white menu is open, the close (X) icon must stay dark/visible */
   .hamburger-btn.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
   .hamburger-btn.is-active span:nth-child(2) { opacity: 0; }
   .hamburger-btn.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

   /* ---------- Mobile Menu (Full-screen white panel) ---------- */
   .mobile-menu {
       display: none;
       position: fixed;
       top: 0;
       right: 0;
       width: 100%;
       max-width: 100%;
       height: 100vh;
       height: 100dvh;
       background-color: #ffffff;
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       flex-direction: column;
       padding: 90px 40px 40px 40px;
       box-shadow: none;
       border: none;
       transform: translateX(100%);
       transition: transform 0.35s ease;
       z-index: 10000;
       box-sizing: border-box;
   }

   /* Studio logo at the top of the mobile drawer (above the menu items) */
   .mobile-menu .mobile-menu-logo {
       display: flex;
       flex-direction: column;
       text-decoration: none;
       padding: 0 0 22px 0;
       margin-bottom: 16px;

   }
   /* Inner lockup shrinks to the name's width (so the role justifies to the name,
      not to the full-width drawer); the divider stays full width on the <a>. */
   .mobile-menu .mobile-menu-logo .mm-logo-inner {
       display: inline-flex;
       flex-direction: column;
       align-items: stretch;
       align-self: flex-start;
   }
   .mobile-menu .mobile-menu-logo .logo-role { color: #555555 !important; }
   .mobile-menu .mobile-menu-logo .logo-name { color: #000000 !important; }
   .mobile-menu .mobile-menu-logo:hover { padding-left: 0; }
   .mobile-menu .mobile-menu-logo:hover .logo-name { color: #000000 !important; }
   .mobile-menu.is-open {
       display: flex;
       transform: translateX(0);
       overflow-y: auto;
   }
   .mobile-menu a,
   .mobile-menu .mm-toggle {
       color: #000000 !important;
       text-decoration: none;
       padding: 14px 0;
       font-size: 0.95rem;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       font-weight: 600 !important;
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       transition: color 0.3s ease, padding-left 0.3s ease;
       display: block;
       background: transparent;
       border-left: none;
       border-right: none;
       border-top: none;
       cursor: pointer;
       width: 100%;
       text-align: left;

   }
   /* Hover slide only on real-mouse devices, so a tap on touch screens doesn't
      leave the item stuck shifted. (Hover COLOR lives in UNIFIED SITE CHROME.) */
   @media (hover: hover) {
       .mobile-menu a:hover,
       .mobile-menu .mm-toggle:hover { padding-left: 8px; }
   }


   /* Mobile menu nested groups (column layout, collapsible) */
   .mobile-menu .mm-group { display: flex; flex-direction: column; }
   .mobile-menu .mm-toggle {
       display: flex;
       align-items: center;
       justify-content: space-between;
   }
   .mobile-menu .mm-toggle::after {
       content: '';
       display: inline-block;
       width: 7px;
       height: 7px;
       border-right: 1.5px solid currentColor;
       border-bottom: 1.5px solid currentColor;
       transform: rotate(45deg) translate(-2px, -2px);
       transition: transform 0.3s ease;
       margin-left: 12px;
       flex-shrink: 0;
   }
   .mobile-menu .mm-group.is-open > .mm-toggle::after {
       transform: rotate(225deg) translate(-2px, -2px);
   }

   /* Container-edge gaps: 13px top margin + first child's 11px padding = 24px
      from the toggle's hairline down to the first link; 0 bottom margin keeps
      the last link's 11px + the next top-level item's 14px = 25px below —
      so an expanded group reads balanced (was 17px above vs 31px below). */
   .mobile-menu .mm-children {
       display: none;
       flex-direction: column;
       padding-left: 18px;
       border-left: 1px solid rgba(0, 0, 0, 0.14);
       margin: 13px 0 0 4px;
   }
   .mobile-menu .mm-group.is-open > .mm-children { display: flex; }

   .mobile-menu .mm-children a,
   .mobile-menu .mm-children .mm-toggle {
       font-size: 0.85rem;
       padding: 11px 0;
       letter-spacing: 1.2px;
       font-weight: 500 !important;
       border-bottom: none;
   }
   /* Mobile submenu section caption (e.g. «Уроки») — same size as the items, set
      off above by a solid hairline that separates the «Уроки» section from «Студия». */
   .mobile-menu .mm-children .mm-caption {
       display: block;
       padding: 22px 0 11px;
       margin-top: 11px;
       border-top: 1px solid rgba(0, 0, 0, 0.08);
       font-size: 0.85rem;
       text-transform: uppercase;
       letter-spacing: 1.2px;


       cursor: default;
   }
   /* «Педагогам» in the drawer — same hairlines above/below as on desktop.
      Neighbours' 11px paddings + the 11px margins + the item's own 22px
      paddings = every empty gap around both lines is an equal 22px. */
   .mobile-menu .mm-children a.mm-sep {
       border-top: 1px solid rgba(0, 0, 0, 0.08);
       border-bottom: 1px solid rgba(0, 0, 0, 0.08);
       margin: 11px 0;
       padding: 22px 0;
   }
   .mobile-menu > *:last-child { border-bottom: none; }

   /* Language buttons inside mobile drawer (under all menus) */
   .mobile-menu .lang-group {
       margin: 25px 0 0 0;
       gap: 8px;
       align-self: flex-start;
   }
   .mobile-menu .lang-btn {
       padding: 8px 14px;
       font-size: 0.85rem;
       color: #333333 !important;
       border: 1px solid rgba(0, 0, 0, 0.25);
       border-radius: 3px;
       min-width: 44px;
       /* Mobile drawer items normally get a border-bottom — neutralise it for these buttons */
       border-bottom: 1px solid rgba(0, 0, 0, 0.25);
       width: auto;
   }
   .mobile-menu .lang-btn.is-active {
       color: #ffffff !important;
   }
   /* Hover only on real-mouse devices, so a tap doesn't leave a stuck state.
      padding-left: 14px = the button's own resting padding — it deliberately
      CANCELS the generic drawer-item hover slide (padding-left: 8px above),
      so the RU/EN buttons stay put on hover. Hover colors live in UNIFIED
      SITE CHROME. */
   @media (hover: hover) {
       .mobile-menu .lang-btn:hover {
           padding-left: 14px;
       }
       .mobile-menu .lang-btn.is-active:hover {
           color: #ffffff !important;
       }
   }


   .mobile-menu-backdrop {
       display: none;
       position: fixed;
       inset: 0;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 9998;
       opacity: 0;
       transition: opacity 0.35s ease;
   }
   .mobile-menu-backdrop.is-open { display: block; opacity: 1; }

   body.menu-open { overflow: hidden; }

   /* When the full-screen white menu is open, keep the close (X) button on top
      and clickable, hide the header's own logo (the menu has its own), and make
      the header transparent so the white panel shows through behind it. */
   body.menu-open .site-header {
       background-color: transparent !important;
       box-shadow: none !important;
       backdrop-filter: none !important;
       -webkit-backdrop-filter: none !important;
       z-index: 10001;
   }
   body.menu-open .header-logo {
       opacity: 0;
       pointer-events: none;
   }

   /* =========================================
      GLOBAL TEXT LAW — all body text black #000000 weight 400,
      all headings black weight 800 (the site-wide rule)
      ========================================= */


   body, p, li, a { color: #000000 !important; font-weight: 400 !important; text-shadow: none; }
   h1, h2, h3, h4, h5, h6 { color: #000000 !important; font-weight: 800 !important; }

   .hero-white-text, .hero-white-text h1, .hero-white-text p { color: #ffffff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.7); }

/* =========================================
   SHARED CARD TEXT SIZING (front-page principles, studio-index cards)
   ========================================= */
.glass-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Card paragraphs — explicit regular weight (matches the global 400 law) */
.card-text { font-weight: 400 !important; }

/* Reusable separation lines (recolored black per page — see the divider
   rules in WHITE PAGE CONTENT and the page-local blocks) */
.gold-divider-center { width: 50px; height: 3px; margin: 0 auto 20px auto; }
.gold-divider-left { width: 60px; height: 3px; margin: 0 0 20px 0; }


@media (min-width: 1600px) {
    .roman { font-size: 3rem !important; margin-bottom: 10px !important; }
    .card-title { margin-bottom: 20px !important; }
}

/* =========================================
   PATHWAYS SECTION
   ========================================= */
.pathway-card .image-wrapper { overflow: hidden; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.pathway-card img { transition: transform 0.6s ease; display: block; }
.pathway-card:hover img { transform: scale(1.05); }

/* Pathway paragraph text — explicit regular weight (matches the global 400 law) */
.pathway-text { font-weight: 400 !important; }

/* Solid CTA button (class name kept from the retired gold design — it now
   renders BLACK: every using page pins background/border #000000 + hover
   #333333 page-locally). Used by the pathway «Узнать больше» links on
   index.html, about-music.html and studio/index.html — no page-white page
   uses this class today. If one ever does, ADD the black-fill pin to
   WHITE PAGE CONTENT (no such rule exists there now). */
.solid-gold-btn {
    display: inline-block;

    border: 1px solid #000000;
    border-radius: 4px;
    padding: 12px 26px;


    font-size: 0.95rem;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Keyboard focus ring (recolored black with the rest of the button). */
.solid-gold-btn:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }


/* Uniform sizing for the pathway / method cards (studio index + advanced page):
   force every inline-styled card subheading to the canonical 1.2rem and every
   card body paragraph to 16px, overriding both the inline sizes and the old
   ≥1600 bumps, so these sections match the rest of the site. */
.pathway-title, .card-title { font-size: 1.2rem !important; }
.pathway-text, .card-text { font-size: 16px !important; line-height: 1.8 !important; }

/* =========================================
   REVIEWS / WIDGETS SECTION
   ========================================= */
.light-glass-video-card {
    border-radius: 4px;


    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fake-widget:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; }
.fake-widget:hover .avito-btn { background-color: #333333 !important; }
.solid-btn { color: #ffffff !important; font-weight: 700 !important; }
/* Black hover only on real-mouse devices (pointer:fine) so a tap on a touch
   tablet/phone can't leave the button "stuck" black (incl. after Back). */
@media (hover: hover) and (pointer: fine) {
    .solid-btn:hover { color: #ffffff !important; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
}
/* Tap/click and Back-button (bfcache) states keep the resting look so the
   button never gets "stuck" in its hover color. */
.solid-btn:active { color: #ffffff !important; }
.solid-btn:focus:not(:focus-visible) { color: #ffffff !important; }


/* Custom Play Button Overlay */
.play-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.2); cursor: pointer; transition: background 0.3s ease;
}
.play-overlay:hover { background: rgba(0,0,0,0.4); }
.play-overlay svg polygon { transition: fill 0.3s ease; }

/* =========================================
   CONTACTS & FOOTER SECTION
   ========================================= */


/* ---------- Footer Top Logo (aligned with header logo) ---------- */
.footer-top-logo {
    margin: 0 auto 40px auto;

    text-align: left !important;
    box-sizing: border-box;
}
.footer-top-logo a {
    text-decoration: none;
    display: inline-flex !important;
    flex-direction: column;
    gap: 2px;
    align-items: stretch !important;
}
/* Footer brand lockup: same treatment as the header — NAME on top, ROLE
   justified to fill the name's exact width. */
.footer-logo-name {
    font-size: 1.6rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #000000;
    font-weight: bold;
    white-space: nowrap;
}
.footer-logo-role {
    font-size: 0.95rem;
    text-transform: uppercase;

    color: #555555;
    font-weight: 600;

    text-align-last: justify;
    text-justify: inter-character;
}

/* ---------- Footer Grid (4 equal columns, 2x2 on tablet/mobile) ---------- */
.footer-grid {
    margin: 0 auto;

    display: grid;


    box-sizing: border-box;
}


.footer-col {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 0;
}

.footer-heading {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;

    margin: 0 0 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #dddddd;

}

.footer-col-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link,
.footer-link-text {
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease, padding-left 0.3s ease;
}


.footer-hours {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;

}

/* Address is the first item of the Контакты column: drop the top margin and
   match the links' line-height so its first line aligns with "Главная" in the
   adjacent Навигация column (the working-hours block below keeps its spacing). */
.footer-col-list > .footer-hours:first-child {
    margin-top: 0;
    line-height: normal;
}

.footer-link:hover { padding-left: 5px; }

/* Mobile: keep 2x2 (two menus on one line, then the next two) */
@media (max-width: 600px) {
    /* Keep the logo's padding identical to the grid's (15px) so it lines up with "Контакты" */
    .footer-top-logo { padding: 0 15px !important; }
}


/* =========================================
   MOBILE / TABLET OVERRIDES (Header & Hero Sizing)
   ========================================= */

/* Identity-only leftovers (docs/layout-spec.md §2.4, class C): header-row
   layout and footer-logo alignment — no sizes. The nav/hamburger switch
   lives in the FIVE VERSIONS chrome bands at the end of this file
   (desktop nav from 1025px). */


@media (max-width: 992px) {
    /* ---------- Header: logo left, hamburger right ---------- */
    .header-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;


    }
    .header-logo { align-items: stretch; text-align: left; }
    /* Drop the role's resting letter-spacing so its natural width stays safely
       narrower than the name (the lockup only aligns when the name is the wider
       line). text-align-last:justify then re-fills the role to the name's exact
       width — so it still looks justified, but can never overhang the name. */

    /* ---------- Footer: align logo to the left ---------- */
    .footer-top-logo { text-align: left !important; }
    .footer-top-logo a { align-items: stretch !important; }
}


/* =========================================================
   SHARED .ap-* CONTENT SYSTEM — width-neutral identity
   (used by the studio pages and the shared form/map/условия blocks;
   every size-varying value lives in THE FIVE VERSIONS bands at the end)
   ========================================================= */

/* ---------- Page hero (image background) ---------- */
/* The line break inside the subtitle is only used on mobile */


/* ---------- Section wrappers (floating creamy vs sticky bg) ---------- */
.ap-creamy {
    position: relative;
    z-index: 20;


}
/* Laptop: reduce the empty space above the "Создавайте прекрасное" heading
   (smaller top padding than the default 80px) */
.ap-sticky { position: relative; z-index: 10; }

.ap-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.ap-container-wide { max-width: 1000px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }

/* Wide monitors (>=1600px, e.g. a 27"-32" screen the owner cannot test): let the
   content breathe instead of sitting in a 1200px ribbon with ~680px blank gutters.
   Widen the shared container + header/footer chrome toward ~1400px. Nothing below
   1600px changes. Two-column grids are pushed toward 1500px per-page (inline). */
@media (min-width: 1600px) {
    .ap-container { max-width: 1400px !important; }
    .header-container { max-width: 1400px !important; }
    .footer-top-logo { max-width: 1400px !important; }
    .footer-grid { max-width: 1400px !important; }
    /* Keep single-column PROSE readable even though the container grew: cap the
       reading line ~820px and centre it (owner spec — widen the gutters, not the
       reading measure). Card/column grids are unaffected (their columns are their
       own reading unit). Only bites >=1600px, so the owner's <=1512 view is untouched. */
    .ap-method-text { max-width: 820px; margin-left: auto; margin-right: auto; }
    .ap-studio-desc--below { max-width: 820px; margin-left: auto; margin-right: auto; }
    .ap-start-card .ap-studio-text { max-width: 820px; margin-left: auto; margin-right: auto; }
}

/* ---------- Section headings & dividers ---------- */
.ap-head { text-align: center; margin-bottom: 50px; }
.ap-head h2 {
    text-transform: uppercase; letter-spacing: 2px;
    font-weight: 800; color: #000000;
    font-size: 2.2rem; margin: 0 0 18px 0;
}
.ap-divider { width: 60px; height: 3px; margin: 0 auto; }
.ap-divider-left { width: 60px; height: 3px; margin: 16px 0 28px 0; }
.ap-divider-center { width: 50px; height: 3px; margin: 0 auto 16px auto; }

.ap-sep { border: none; border-top: 1px solid rgba(0,0,0,0.28); margin: 22px 0; }

/* ---------- Intro section ---------- */
.ap-intro-grid { display: grid; }
.ap-intro-text h2 {
    text-transform: uppercase;
    font-weight: 800; color: #000; margin: 0; line-height: 1.25;

}
.ap-intro-text p {
    color: #000000 !important; font-weight: 400 !important;
}
.ap-photo-frame { position: relative; }
.ap-photo-frame img {
    width: 100%; object-position: center;
    border-radius: 4px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); display: block;
}
.ap-caption {
    text-align: center;
    color: #000000 !important; font-weight: 400 !important; margin-top: 12px; font-style: italic;
}
/* Tablet: photo to the RIGHT of the text, text fills the left side (like the scheme).
   The photo stretches to the text's height so the two are aligned together. */
@media (min-width: 601px) and (max-width: 900px) {
    .ap-intro-text { flex-direction: column; justify-content: center; }
    /* Tablet: keep "Создавайте прекрасное!" on ONE line. The heading column is
       0.6 of (viewport - 40px padding - 30px gap), so the font is scaled to that
       width (and tightened to 0.5px letter-spacing) so it fits on a single line
       from 601px up to 900px, shrinking only as much as needed. */

    /* Right column fills its height; the photo grows to match the text block */
    .ap-photo-frame { min-height: 0; }
    /* Tablet: reduce the empty space above the "Создавайте прекрасное" heading */
}
/* Wider tablets / small laptops (901–1199): the layout switches back to the
   1.2fr 1fr grid, where a fixed 2rem heading no longer fits on one line. Scale
   the font to the heading column width so "Создавайте прекрасное!" stays on a
   single line, shrinking only as much as needed (capped at the normal 2rem). */
/* Mobile: stack the photo under the text */


/* ---------- Audience cards ("Для кого уроки") ---------- */
/* align-items:start so only the clicked card grows on expand (like the "Чему можете
   научиться" cards), instead of all three stretching to the tallest card. */
.ap-cards-3 { display: grid; }
.ap-audience-card { text-align: left; display: flex; flex-direction: column; padding: 38px 26px; }
/* Buttons sit just under the text (closer to the divider), not pinned to the very bottom */
.ap-audience-card .ap-toggle { align-self: flex-start; margin-top: 18px; }
.ap-audience-card .ap-learn-extended { margin-top: 18px; }
.ap-audience-card .ap-divider-left { margin: 16px 0 20px 0; }
.ap-audience-card h3 {
    font-size: 1.2rem; color: #000;
    text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; margin: 0 0 4px 0; line-height: 1.3;
}
.ap-audience-card p {
    color: #000000 !important; font-weight: 400 !important; margin: 0;
}
/* Laptop: keep all three cards equal width; 2nd card heading on one line.
   Reserve two text lines for every card so the "Подробнее" buttons align. */
@media (max-width: 900px) {
    .ap-audience-card .ap-toggle { margin-top: 18px; }
}
/* 2nd audience card heading: one line on laptop/tablet, two lines on mobile */
.ap-br-mobile { display: none; }
@media (max-width: 600px) {
    .ap-br-mobile { display: inline; }
}

/* ---------- Video review section ---------- */
.ap-review-grid { display: grid; align-items: center; }
/* Text column: vertically centered to the video's height */
.ap-review-grid > div:not(.ap-review-video) {
    display: flex; flex-direction: column; justify-content: center;
}
.ap-quote-text {
    font-style: italic;
    color: #000000 !important; line-height: 1.7; text-align: center; margin: 0; font-weight: 400 !important;
}
.ap-quote-author {
    color: #000000 !important;
    text-transform: uppercase; letter-spacing: 1.5px; text-align: center; margin: 0; font-weight: 600 !important;
}
/* Laptop: wider video (without making it taller) */
/* Tablet: keep video side-by-side with text; give text the same side spacing
   as the video by constraining + centering it, and bring it closer to the video */
/* Mobile: stack video above text */

/* ---------- "Чему можете научиться" expandable cards ---------- */
/* Heading line break: hidden on laptop/tablet (one line "Чему можете научиться"),
   shown on mobile so it wraps to two lines: "Чему можете" / "научиться". */
.ap-learn-h2-br { display: none; }
@media (max-width: 600px) {
    .ap-learn-h2-br { display: inline; }
}
.ap-learn-grid { display: grid; }
.ap-learn-roman { font-size: 2.2rem; line-height: 1; margin-bottom: 6px; }
.ap-learn-card {
    margin-bottom: 0; transition: box-shadow .3s ease, border-color .3s ease;
}
.ap-learn-title {
    color: #000;
    text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; margin: 0; line-height: 1.35;
}
.ap-learn-short {
    color: #000000 !important; font-weight: 400 !important; margin: 0 0 18px 0;
}
.ap-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid #000000;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;
    font-weight: 700; padding: 10px 22px; border-radius: 4px; cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* «Подробнее» toggle: black fill everywhere (WHITE PAGE CONTENT pins it and
   supplies the #333333 hover); open state is driven by JS .is-open. The
   :active / :focus rules below keep the resting look on tap so touch screens
   never get a stuck hover state. */
.ap-toggle:active:not(.is-open) { color: #ffffff !important; }
/* Reset the lingering focus state after a click; the focus-visible outline
   is for keyboard users only. */
.ap-toggle:focus:not(:focus-visible) { color: #ffffff !important; }
.ap-toggle.is-open:focus:not(:focus-visible) { color: #ffffff !important; }
.ap-toggle:focus-visible { outline: 2px solid #000000; outline-offset: 2px; }
.ap-toggle::after {
    content: ''; width: 7px; height: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .3s ease;
}
.ap-toggle.is-open::after { transform: rotate(225deg) translateY(0); }
.ap-learn-extended { display: none; margin-top: 25px; }
.ap-learn-extended.is-open { display: block; }
.ap-quote-italic {
    font-style: italic;
    color: #000000 !important; text-align: right; font-weight: 400 !important; margin: 0;
}
.ap-quote-author-right {
    font-size: 0.95rem; color: #000000 !important;
    text-align: right; text-transform: uppercase; letter-spacing: 1px; margin: 8px 0 0 0; font-weight: 600 !important;
}
.ap-learn-full {
    color: #000000 !important; text-align: left; font-weight: 400 !important; margin: 0;
}

/* ---------- Methodology scheme ---------- */
.ap-method-quote { margin: 30px auto 80px; }
.ap-scheme { display: flex; flex-direction: column; align-items: center; gap: 0; }
.ap-scheme-row { display: flex; align-items: center; justify-content: center; }
.ap-scheme-box {
    border: 2px solid #000; border-radius: 4px;
    background: rgba(255,255,255,0.65);
    text-transform: uppercase; letter-spacing: 1px;
    font-weight: 700; color: #000; text-align: center;
}
.ap-scheme-desc {
    color: #000000 !important;
    text-align: center; font-style: italic; font-weight: 400 !important;
}
.ap-scheme-arrow { line-height: 1; }
.ap-scheme-arrow-h { font-size: 1.9rem; line-height: 1; }

/* ---------- Methodology text + image ---------- */
/* The scheme + painting are content-width columns CENTRED as one group (2026-07-13): the old
   1.05fr/0.85fr grid stretched to the full container, so on wide monitors the scheme drifted to
   the far left and the painting to the far right with a big void between them, and neither lined
   up with the centred method text below. `auto auto` + justify-content:center keeps them a fixed
   48px apart, centred, and aligned with the text column at every width. */
.ap-method-scheme-row { display: grid; margin: 30px auto 40px; }
.ap-method-scheme-row .ap-scheme { margin: 0; max-width: 480px; align-self: center; }
/* Compact scheme boxes + smaller labels so the scheme reads tidily next to the painting */
.ap-method-scheme-row .ap-scheme-desc { font-size: 0.76rem; margin: 6px 8px 2px; max-width: 250px; }
.ap-method-scheme-row .ap-scheme-arrow { font-size: 1.3rem; margin: 3px 0; }
/* Photo fits the scheme's height */
.ap-method-photo { display: flex; flex-direction: column; }
.ap-method-photo img { min-height: 0; border-radius: 4px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); display: block; }
.ap-method-body { margin-top: 10px; }
.ap-method-text h3 {
    font-size: 1.2rem; color: #000;
    text-transform: uppercase; letter-spacing: 1px; font-weight: 700; margin: 30px 0 20px 0;
}
.ap-method-text p {
    color: #000000 !important; font-weight: 400 !important; margin: 0 0 16px 0;
}
/* Reduce empty space after the last paragraph of the method text */
.ap-method-text > p:last-child { margin-bottom: 0; }
/* Tablet: keep scheme + painting side-by-side (centred group, just a tighter gap) */
/* Mobile: stack scheme above painting */


/* ---------- FAQ accordion ---------- */
.ap-faq {
    overflow: hidden;
}
.ap-faq-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.ap-faq-item:last-child { border-bottom: none; }
.ap-faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
    background: transparent; border: none; cursor: pointer; text-align: left;
    font-weight: 700; color: #000 !important;
    transition: color .3s ease;
}
.ap-faq-icon {
    flex-shrink: 0; width: 11px; height: 11px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform .3s ease;
}
.ap-faq-q.is-open .ap-faq-icon { transform: rotate(-135deg); }
.ap-faq-a { display: none; }
.ap-faq-a.is-open { display: block; }
.ap-faq-a p { color: #000000 !important; font-weight: 400 !important; margin: 0; }

/* ---------- Studio section ---------- */
.ap-studio-desc {
    line-height: 1.8;
    color: #000000 !important; font-weight: 400 !important; text-align: left; margin: 0;
}
/* Studio description placed UNDER the photos: centered, with a gap above it */
.ap-studio-desc--below { text-align: center; }
.ap-studio-photos { display: grid; gap: 25px; margin-top: 28px; }
/* When the photos come first (description below), the photos no longer need a top gap */
.ap-studio-photos:first-child { margin-top: 0; }
.ap-studio-photos img { width: 100%; height: 340px; object-fit: cover; border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); display: block; }
.ap-studio-text { font-size: 16px; line-height: 1.8; color: #000000 !important; font-weight: 400 !important; margin: 0; }
.ap-studio-card { border-radius: 4px; }
.ap-studio-block { margin-top: 60px; }
/* "Как начать" box, now centered under the "Заявка / контакты" heading */
.ap-start-card { margin: 0 auto 40px auto; text-align: center; }
.ap-start-card .ap-studio-text { text-align: center; color: #000000 !important; }
/* Laptop: widen the box so the description wraps to TWO balanced lines instead
   of leaving the last word ("помочь") alone on a third line. */

/* Условия (3 columns) */
.ap-conditions { display: grid; margin-top: 10px; }
.ap-condition {
    text-align: center;
    border-radius: 4px;
}
.ap-condition h4 {
    text-transform: uppercase;
    color: #000; margin: 0 0 12px 0; font-weight: 700;
}
.ap-condition p { color: #000000 !important; margin: 0; font-weight: 400 !important; }

/* ---------- Application form + map ---------- */
.ap-contact-grid { display: grid; align-items: stretch; margin-top: 10px; }
.ap-form-card {
    border: 1px solid rgba(255,255,255,0.5); border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    display: flex; flex-direction: column; box-sizing: border-box;
}
.ap-form-card h3 {
    color: #000;
    text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 6px 0; font-weight: 700;
}
.ap-form-note { margin: 0 0 12px 0; font-weight: 400 !important; }
.ap-field {
    width: 100%; box-sizing: border-box; color: #000;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 4px; background: #ffffff; transition: border-color .3s ease;
}
.ap-field:focus { outline: none; }
textarea.ap-field { resize: vertical; }
.ap-field::placeholder { color: #999999; opacity: 1; }
.ap-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ap-submit {
    width: 100%; color: #ffffff !important; border: none; border-radius: 4px;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; cursor: pointer; transition: background-color .3s ease;
}
/* Hover (black) only on real-mouse devices (pointer:fine), so a tap doesn't
   leave the button stuck black on mobile/tablet until you tap elsewhere. */

.ap-submit:disabled { cursor: default; opacity: 0.9; }
.ap-submit.is-success { background-color: #4a8a4a !important; }
.ap-form-status { font-size: 0.9rem; margin-top: 8px; min-height: 0; color: #555 !important; }
.ap-form-status:empty { margin-top: 0; }
.ap-form-status.error { color: #c0392b !important; }
.ap-contacts-block { border-top: 1px solid rgba(0,0,0,0.12); }
.ap-contacts-block h3 {
    color: #000;
    text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 10px 0; font-weight: 700;
}
.ap-contacts-block p { margin: 0 0 7px 0; font-weight: 400 !important; }
.ap-contacts-block a { text-decoration: none; }
.ap-map-wrapper {
    border-radius: 4px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3); background: transparent;
    box-sizing: border-box; display: flex; flex-direction: column; position: relative;
}
/* Laptop: make the left form/contacts block EXACTLY the same height as the 2GIS map
   (550px) and increase the fonts/spacing proportionally so the content fills that
   height — no empty cream gap under either column. */
@media (min-width: 901px) {
    .ap-contact-grid { align-items: stretch; }
    .ap-map-wrapper { height: 550px; min-height: 550px; align-self: stretch; }
    /* Match the map's exact height; space the content out evenly to fill it.
       Fonts are bumped up from the previous (smaller) laptop sizes so the card
       fills the 550px height, while still fitting at the narrowest laptop width
       (~901px) where the contact lines wrap the most. */
    .ap-form-card { height: 550px; min-height: 550px; padding: 24px 28px; justify-content: space-between; }
    .ap-form-card h3 { font-size: 1.16rem; margin-bottom: 8px; }
    /* Bigger note that sits right under the heading (fills the empty space a bit more) */
    .ap-form-head { margin-bottom: 4px; }
    .ap-form-note { font-size: 1rem; margin-bottom: 0; line-height: 1.5; }
    /* A bit more breathing room between the Имя / Телефон / message fields */
    .ap-field { padding: 11px 13px; margin-bottom: 13px; font-size: 0.96rem; }
    textarea.ap-field { min-height: 56px; margin-bottom: 0; }
    /* Laptop: drop the "Отправить" button down a little (more gap above it) */
    .ap-submit { padding: 13px; font-size: 0.96rem; margin-top: 16px; }
    .ap-contacts-block { margin-top: 12px; padding-top: 13px; }
    .ap-contacts-block h3 { font-size: 1.08rem; margin-bottom: 8px; }
    .ap-contacts-block p { font-size: 0.92rem; margin-bottom: 6px; line-height: 1.5; }
}
@media (max-width: 900px) {
    .ap-form-card { min-height: 0; }
}

/* =========================================================
   SHARED WIDTH CONSTRAINTS (form/widgets)
   (review widgets row on one line + narrower Заявка/контакты)
   ========================================================= */

/* Tablet: keep the three "Больше отзывов" widgets (Avito / Profi / "Читать все
   отзывы") on ONE line, scaled down to fit. Below 768px they keep stacking
   (handled by the .widgets-row-mobile column rule above). */
@media (min-width: 768px) and (max-width: 1100px) {
    .widgets-row-mobile {
        flex-wrap: nowrap !important;

    }
}
/* zoom shrinks the whole row (including the external Profi widget) AND reflows
   its layout, so all three widgets fit on a single line across tablet widths. */

/* Tablet: make the "Заявка / контакты" cards (form + map) a bit narrower than
   the full container width, centered. Shared .ap-contact-grid, so this applies
   to BOTH the front page and the adult lessons page. The intro "Как начать" box
   (.ap-start-card) is constrained to the same width so it lines up with the
   cards below it. */
@media (min-width: 601px) and (max-width: 900px) {
    /* box-sizing: border-box so the 600px is the OUTER width (same as the
       border-box form/map cards below) — otherwise the card's 40px side padding
       would be added on top and the box would render ~80px wider than the cards. */
    .ap-start-card { max-width: 600px; box-sizing: border-box; }
}


/* =====================================================================
   «Мои принципы» manifesto band — consumed by about.html,
   studio/advanced-piano-lessons.html and studio/index.html
   (NOT by the live index.html, which no longer uses these classes)
   ===================================================================== */
.principles-manifesto {
    margin: 0 auto;
    padding: 0 20px;
}
.principle-item {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 24px 0;
    text-align: center;
    box-shadow: none;
}
/* Thin hairline rule between the principles */
.principle-item + .principle-item {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
.principle-item:first-child { padding-top: 4px; }
.principle-item:last-child { padding-bottom: 4px; }
/* Pull the divider closer to its text to reduce dead space */
.principle-item .gold-divider-center { margin-top: 2px; margin-bottom: 14px; }

/* Mobile: compact «Читать все отзывы» button when the review widgets stack
   (the FIVE VERSIONS PHONE band re-states this). */


/* Quote subtitle ("найдите этот отзыв на profi.ru") under the author */
.ap-quote-source {
    font-size: 0.95rem;

    font-weight: 400 !important;
    margin: 10px 0 0 0;
}
.ap-quote-source a {
    text-decoration: none;
    font-weight: 400 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* =========================================================
   FRONT PAGE (live index.html) & shared — sizing refinements
   ========================================================= */

/* (1) Услуги: laptop gap-tightening for the 3 pathway cards — an INERT
   duplicate (docs/layout-spec.md §2.4, class D): the MACBOOK band at the
   end of this file restates the same 48px gap for its whole 1025–1599.98
   range later in source, and the container WIDENING itself lives there
   too (.pathways-container max-width 1380px !important) — this block only
   carries the gap. Kept: deleting BASE blocks needs a zero-diff
   computed-style proof (§2.4). */
@media (min-width: 1101px) and (max-width: 1599px) {
    .large-screen-pathways { gap: 48px !important; }
}

/* (2) Мои принципы: widen the centered "manifesto" so it fills more of the
   page on laptops/desktops (less dead space on the sides). */
.principles-manifesto { max-width: 1080px; }

/* (2b) The manual <br> line-breaks inside the principle texts look good on
   laptop/desktop, but cause awkward breaks on tablets. Collapse them at <=900px
   so the text wraps naturally there. */

/* (3) Отзывы (studio page): both review videos are tall 9:16 phone videos, so
   the box matches that shape — the earlier 4/5 box cropped ~30% of every
   frame and made the picture look zoomed-in and soft. The wrapper cap keeps
   the videos close to their native pixel size (Alyona's file is only 480px
   wide), so they are not blown up and stay sharp; both boxes are identical,
   so the two cards still line up. 360px on desktop/tablet (owner request
   2026-07-07: a bit wider than the 320 set earlier the same day), 250px on
   phones (owner requests 2026-07-07: 380px everywhere -> 320/280, then
   phones reduced again 280 -> 250 for a sharper, less blown-up picture). */
.light-glass-video-card .custom-video-wrapper {
    margin: 0 auto;
}
.light-glass-video-card .custom-video-wrapper video {
    aspect-ratio: 9 / 16;
    height: auto;
    object-fit: cover;
    object-position: center top;
}

/* (6) Hero: lift the heading + text a bit higher on tablets and laptops
   (large desktops keep the default position). */

/* (7) Welcome (tablet 601–900): single column ordered HEADING -> PHOTO -> TEXT
   so the greeting reads "Добро пожаловать!", then the face, then the welcome
   paragraphs. We flatten the text + photo wrappers with display:contents so the
   heading, divider, photo and paragraphs are all direct flex items we can
   reorder; align-items:stretch makes the photo frame full-width so its image
   centers (margin:0 auto). Scoped to .welcome-grid so the adult-lessons intro
   (which shares .ap-intro-grid) is unaffected. */


/* =========================================================
   CHILDREN LESSONS — method-scheme trio variant (three boxes in the top row)
   Method scheme with THREE boxes in the top row
   (Родители ⇄ Педагог ⇄ Ребёнок). Additive only — reuses the
   existing .ap-scheme / .ap-method-scheme-row styles, just makes
   the three top boxes narrower so they fit beside the photo.
   ========================================================= */
@media (max-width: 900px) {
    .ap-method-scheme-row .ap-scheme-row--trio .ap-scheme-box { max-width: 120px; padding: 8px 8px; font-size: 0.72rem; }
}
/* Mobile: the base rule already stacks .ap-scheme-row into a column;
   restore comfortable box sizing for the stacked trio. */

/* =========================================================
   UNIFIED SITE CHROME — white sticky header + solid footer
   ---------------------------------------------------------
   The site-wide chrome skin: solid-white sticky header from the very
   first paint, black logo name + grey role line, white footer. Scope
   is the CHROME ONLY — .site-header, .mobile-menu, .premium-footer.

   (index.html, about-music.html and studio/index.html carry an
   identical inline copy of these rules inside their page-local
   <style> blocks; the duplication is deliberate — same values, so
   the three self-contained pages render without this file too.)
   ========================================================= */

/* Chrome font — Palatino where present (macOS, incl. Cyrillic),
   else self-hosted Lora (an elegant serif with full Cyrillic).
   Applied to the chrome only, NOT to <body>/<main>. */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('assets/fonts/lora-regular.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('assets/fonts/lora-bold.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap;
    src: url('assets/fonts/lora-italic.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 700; font-display: swap;
    src: url('assets/fonts/lora-bolditalic.woff2') format('woff2'); }
.site-header, .site-header *,
.mobile-menu, .mobile-menu *,
.premium-footer, .premium-footer * {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', 'Lora', Georgia, serif !important;
}

/* HEADER — solid white and visible from the very top, STICKY so it
   takes its own space (the content / hero starts below it). Same look
   in both states, so the .is-scrolled JS toggle changes nothing
   visible (no flash / blink). */
.site-header,
.site-header.is-scrolled {
    position: sticky; top: 0;
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    transition: none !important;
    padding: 10px 0;
}
.logo-name { color: #000000 !important; }
.logo-role { color: #555555 !important; }
/* Logo micro-nudge: `position: relative` here is load-bearing identity; the
   per-band `top` values (2px on PHONE/TABLET, 0 from MACBOOK up — seam at
   1025px) live in the FIVE VERSIONS chrome bands at the end of this file. */
.header-logo { position: relative; top: 2px; }
/* Brand lockup: the NAME sets the width; the ROLE line is edge-justified
   flush beneath it. Drop the role's letter-spacing so the name stays the
   wider line at every width and the justify can never overhang. */
.logo-role, .footer-logo-role {
    text-align: justify !important;
    text-align-last: justify !important;
    text-justify: inter-character !important;
    letter-spacing: 0 !important;
}
.header-nav > a, .header-nav .nav-link { color: #333333 !important; }
/* Header nav: NO colour change on hover — text stays #333. */
.header-nav > a:hover, .header-nav .nav-link:hover,
.site-header.is-scrolled .header-nav > a:hover,
.site-header.is-scrolled .header-nav .nav-link:hover { color: #333333 !important; }
.lang-btn { color: #333333 !important; border-color: rgba(0,0,0,0.25) !important; }
.lang-btn:hover,
.site-header.is-scrolled .lang-btn:hover { color: #000000 !important; border-color: #000000 !important; }
/* The DRAWER's language buttons get an explicit hover rule at (0,3,0)
   specificity so the drawer always shows the black hover regardless of any
   higher-specificity drawer rule. */
.mobile-menu .lang-btn:hover { color: #000000 !important; border-color: #000000 !important; }
.lang-btn.is-active,
.site-header.is-scrolled .lang-btn.is-active { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; }
.hamburger-btn span { background-color: #000000 !important; }

/* The logo accent («Гусев» in the header, drawer and footer) is black. */
.site-header .gold-text, .mobile-menu .gold-text, .premium-footer .gold-text { color: #000000 !important; }

/* Dropdown / submenu — neutral hairline, black hover text, plain
   bold-black «Уроки» caption. The mobile drawer mirrors all of this. */
.submenu { border-color: rgba(0, 0, 0, 0.14) !important; }
.submenu a:hover, .submenu .submenu-link:hover { color: #000000 !important; }
.submenu-caption { color: #000000 !important; font-weight: 700 !important; }
.mobile-menu a:hover, .mobile-menu .mm-toggle:hover { color: #000000 !important; }
.mobile-menu .mm-children { border-left-color: rgba(0, 0, 0, 0.14) !important; }
.mobile-menu .mm-children .mm-caption { color: #000000 !important; font-weight: 700 !important; }
/* Open drawer: NO line under the logo (matches the clean desktop header). */
.mobile-menu .mobile-menu-logo { border-bottom: none !important; padding-bottom: 0; }

/* FOOTER — solid white with a black top rule (set inline per page), the
   logo directly above the nav (no divider), and labelled contact rows. */
.footer-logo-divider { display: none; }
.footer-top-logo { margin-bottom: 28px !important; }
/* All footer body texts are BLACK at regular weight (owner request
   2026-07-07, was grey #555): contact details, working hours, every
   nav/social link, and the © line. Only the labels (Адрес: / Тел.: /
   E-mail: / пн - пт:) and the column headings stay bold. The blanket
   p rule restates the GLOBAL TEXT LAW's weight-400 for the classless ©
   paragraph (the old global `p { font-weight: 600 !important }` died in
   the 2026-07-14 rebuild); the bold label spans/strongs have their own
   later 700 rules, so they win. */
.premium-footer p { font-weight: 400 !important; }
.footer-contact { margin: 0; color: #000000 !important; font-size: 0.85rem; line-height: 1.6; font-weight: 400 !important; }
.footer-contact .footer-clabel { font-weight: 700 !important; color: #000000 !important; }
/* Phone & e-mail: same black / weight / size as the address detail —
   only the labels (Адрес: / Тел.: / E-mail:) stay bold. The black/400
   restate the GLOBAL TEXT LAW (the base .footer-link-text rule carries
   no colour/weight since the 2026-07-14 rebuild); font-size:inherit is
   the load-bearing part — it overrides the base 0.95rem so the link
   picks up the row's 0.85rem. The :hover below keeps a lighten cue. */
.footer-contact .footer-link-text {
    color: #000000 !important;
    font-weight: 400 !important;
    font-size: inherit;
}
.footer-contact .footer-link-text:hover { color: #555555 !important; }
/* Working-hours: black regular text, bold labels (пн - пт / сб - вс). */
.footer-hours { color: #000000 !important; }
.footer-hours strong { color: #000000 !important; font-weight: 700 !important; }
/* Nav & social links: black regular (restates the GLOBAL TEXT LAW — the
   base .footer-link rule carries no colour/weight since the 2026-07-14
   rebuild). */
.footer-link { color: #000000 !important; font-weight: 400 !important; }
/* Footer links lighten to grey on hover (same cue as the contact links
   on the front page). */
.footer-link:hover, .footer-link-text:hover { color: #555555 !important; }
/* Small-phone footer rules (contact label on its own line + two-line
   bottom-aligned headings) live in the FIVE VERSIONS · PHONE ≤600.98
   sub-step at the end of this file — one guarded band, no 600.02–600.98
   crack (moved there 2026-07-14). */


/* =========================================================
   WHITE PAGE CONTENT (v7.5) — opt-in via <body class="page-white">
   ---------------------------------------------------------
   Extends the canonical white look (index.html / about-music.html /
   studio/index.html) to a page's CONTENT: flat white body, sections
   alternating white / #EBEBEB, Palatino→Lora type, black accents
   (dividers, buttons, links). The chrome (header / footer) is already handled
   by the UNIFIED SITE CHROME block above.

   Scope is the body class ONLY, so the three pages with their own
   self-contained white styles (index / about-music / studio index)
   stay untouched. studio/faq.html opted in on 2026-07-12 — no live
   page carries the old creamy content look anymore.
   ========================================================= */

/* Flat white page. The body itself must go white (not just the section
   wrappers): the advanced page's <main> sits directly on <body>. */
body.page-white {
    background-image: none !important;
    background-color: #ffffff !important;
}

/* Content font — Palatino where present (macOS, incl. Cyrillic), else
   self-hosted Lora (@font-face declared above). The chrome already has
   this; here it is extended to the page content and the hero. */
body.page-white main, body.page-white main *,
body.page-white .page-hero, body.page-white .page-hero * {
    font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', 'Lora', Georgia, serif !important;
}

/* SECTIONS — alternate flat white (.ap-creamy) / grey (.ap-sticky) with
   the same uniform 80px rhythm as the front page. Neutralises the creamy
   background, the lift shadow and the per-section padding/margin variants
   (--first / --review / --method / --gap), incl. the -60px pull-up that
   tucked the first section under the old 100vh hero. */
body.page-white .ap-creamy {
    background-color: #ffffff;
    box-shadow: none;
    margin-top: 0;
    padding: 80px 0;
}
body.page-white .ap-sticky {
    background-color: #EBEBEB;
    padding: 80px 0;
}
@media (max-width: 768px) {
    body.page-white .ap-creamy,
    body.page-white .ap-sticky { padding: 60px 0; }
}

/* (The old .page-hero / .page-hero--dark / .pw-wip under-construction rules
   were retired 2026-07-14 — no live page uses those classes anymore.) */

/* ---------------------------------------------------------
   GOLD -> BLACK (content). The same recolor the white pages
   use, applied to every content class these pages render.
   !important throughout: several of the base rules are themselves
   !important or live inside hover media queries.
   --------------------------------------------------------- */
body.page-white .gold-text { color: #000000 !important; }
body.page-white .ap-divider,
body.page-white .ap-divider-left,
body.page-white .ap-divider-center,
body.page-white .gold-divider-left,
body.page-white .gold-divider-center { background-color: #000000 !important; }

/* «Подробнее» toggles on the audience / learn cards */
body.page-white .ap-toggle { background-color: #000000 !important; border-color: #000000 !important; color: #ffffff !important; }
body.page-white .ap-toggle.is-open { background-color: #000000 !important; border-color: #000000 !important; }
body.page-white .ap-toggle:active:not(.is-open),
body.page-white .ap-toggle:focus:not(:focus-visible) { background-color: #000000 !important; border-color: #000000 !important; }
body.page-white .ap-toggle:focus-visible { outline-color: #000000 !important; }
@media (hover: hover) {
    body.page-white .ap-toggle:hover { background-color: #333333 !important; border-color: #333333 !important; }
}

/* Application form */
body.page-white .ap-submit { background-color: #000000 !important; }
@media (hover: hover) and (pointer: fine) {
    body.page-white .ap-submit:hover { background-color: #333333 !important; }
}
body.page-white .ap-submit.is-success { background-color: #4a8a4a !important; }
body.page-white .ap-field:focus { border-color: #000000 !important; }
/* Solid white card (the translucent 0.85 white reads dingy on #EBEBEB —
   same fix studio/index.html uses). */
body.page-white .ap-form-card { background-color: #ffffff !important; }

/* Cards & accents */
body.page-white .ap-learn-roman { color: #000000 !important; }
body.page-white .ap-scheme-arrow,
body.page-white .ap-scheme-arrow-h { color: #000000 !important; }
body.page-white .ap-condition { border-color: rgba(0, 0, 0, 0.14) !important; background: #ffffff !important; }
body.page-white .glass-card:hover { border-color: rgba(0, 0, 0, 0.18) !important; }
body.page-white .ap-learn-card:hover { border-color: rgba(0, 0, 0, 0.18) !important; }

/* FAQ question hover: black (the rule lives inside a hover media query). */
@media (hover: hover) {
    body.page-white .ap-faq-q:hover { color: #000000 !important; }
}

/* Links inside content */
body.page-white .ap-contacts-block a { color: #000000 !important; font-weight: 400 !important; }
body.page-white .ap-contacts-block a:hover { color: #555555 !important; }
/* The whole «найдите этот отзыв на …» line is black (the legacy base painted
   the paragraph #777777 and only the link was recolored — 2026-07-14 fix). */
body.page-white .ap-quote-source { color: #000000 !important; }
body.page-white .ap-quote-source a { color: #000000 !important; border-bottom-color: rgba(0, 0, 0, 0.35) !important; }
body.page-white .ap-quote-source a:hover { color: #555555 !important; border-bottom-color: #555555 !important; }

/* Video play button: white hover triangle on the dark thumbnail (the ring
   color lives in the SVG markup itself — same as studio/index.html). */
body.page-white .play-overlay:hover svg polygon { fill: #ffffff !important; }


/* =====================================================================
   THE FIVE VERSIONS — SHARED LAYER
   ---------------------------------------------------------------------
   The site-wide responsive ladder (docs/responsive-versions.md):
   PHONE ≤768 · TABLET 769–1024 · MACBOOK 1025–1599 · WIDE 1600–2099 ·
   XWIDE ≥2100, written as self-contained, double-bounded @media blocks
   (every max-width carries the .98 fractional-scaling guard). This
   layer comes LAST on purpose: it holds EVERY size-varying value of
   the shared chrome and the shared .ap-* / widgets content system,
   one sealed recipe per band. Since the 2026-07-14 clean rebuild the
   BASE above is width-neutral identity BY DESIGN: no NEW size rule may
   ever be added to it. A small set of width-carrying @media blocks
   deliberately remains in BASE — the complete verified inventory and
   the per-block edit rules live in docs/layout-spec.md §2.4.

   What this layer deliberately does NOT restate:
   - the few shared blocks already sitting exactly on ladder cut-offs
     (the ≥1600 container/reading-measure widening block in BASE —
     ≥1600 = WIDE+XWIDE together, a sanctioned pairing);
   - the page-local <style> blocks — every page's own rules come after
     this file in the cascade and keep winning, by design.

   Band recipes: each band re-states the FULL set of size-varying values
   for the selectors it owns. The values are the ones the owner's three
   screens showed before this pass (360 → PHONE, 780 → TABLET,
   1512 → MACBOOK), so nothing changes on his devices; the invisible
   ranges (601–768, 901–1024, 1025–1199…) are unified to their band's
   recipe. Sanctioned sub-steps used: PHONE ≤600 (footer), TABLET
   993–1024 (widgets zoom), MACBOOK 1025–1099 (widgets zoom) and
   MACBOOK ≥1280 (intro-heading step).
   ===================================================================== */

/* ---------------------------------------------------------------------
   CHROME · PHONE (≤768px) — Samsung upright, iPhones
   --------------------------------------------------------------------- */
@media (max-width: 768.98px) {
    .header-container { padding: 10px 20px; gap: 10px; max-width: 1200px; }
    .site-header .header-logo { top: 2px; }
    .logo-name { font-size: 1.1rem; }
    .logo-role { font-size: 0.7rem; }
    .header-nav { display: none !important; }
    .hamburger-btn { display: inline-flex !important; }
    .footer-top-logo { max-width: 1200px; padding: 0 20px; }
    .footer-grid { max-width: 1200px; grid-template-columns: repeat(2, 1fr); gap: 35px 30px; padding: 0 20px; }
}
/* CHROME · PHONE sub-step ≤600 (sanctioned): small-phone footer */
@media (max-width: 600.98px) {
    .footer-grid { gap: 30px 20px; padding: 0 15px; }
    .footer-top-logo { padding: 0 15px; }
    /* Contact label drops onto its own line, directly above the detail. */
    .footer-contact .footer-clabel { display: block; }
    /* Footer is a 2x2 grid here; reserve two lines for every heading and pin
       the text to the bottom so the short headings line up with the tall
       «Студия фортепиано» (merged 2026-07-14 from the old unguarded ≤600px
       UNIFIED-chrome block — the whole small-phone footer recipe now lives
       in this one guarded sub-step). */
    .footer-heading { font-size: 0.9rem; padding-bottom: 8px; min-height: 2.5em; line-height: 1.25; display: flex; align-items: flex-end; }
    .footer-link, .footer-link-text { font-size: 0.9rem; }
    .footer-hours { font-size: 0.85rem; }
}

/* ---------------------------------------------------------------------
   CHROME · TABLET (769–1024px) — phone sideways (~780), iPad upright
   --------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024.98px) {
    .header-container { padding: 10px 20px; gap: 10px; max-width: 1200px; }
    .site-header .header-logo { top: 2px; }
    .logo-name { font-size: 1.2rem; }
    .logo-role { font-size: 0.75rem; }
    .header-nav { display: none !important; }
    .hamburger-btn { display: inline-flex !important; }
    .footer-top-logo { max-width: 1200px; padding: 0 20px; }
    .footer-grid { max-width: 1200px; grid-template-columns: repeat(2, 1fr); gap: 35px 30px; padding: 0 20px; }
}

/* ---------------------------------------------------------------------
   CHROME · MACBOOK (1025–1599px) — the owner's screen; iPad sideways.
   The desktop nav now starts at 1025 (the old 1199 hamburger line was a
   legacy cut-off; the full nav + logo measure ~903px, so they fit the
   whole band — verified at 1025). script.js's drawer-close width check
   moved to 1024 with it (v3.2).
   --------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1599.98px) {
    .header-container { padding: 0 20px; max-width: 1200px; }
    .site-header .header-logo { top: 0; }
    .logo-name { font-size: 1.4rem; }
    .logo-role { font-size: 0.85rem; }
    .header-nav { display: flex !important; }
    .hamburger-btn { display: none !important; }
    .footer-top-logo { max-width: 1200px; padding: 0 20px; }
    .footer-grid { max-width: 1200px; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 0 20px; }
}

/* ---------------------------------------------------------------------
   CHROME · WIDE (1600–2099px) — 1080p monitors
   --------------------------------------------------------------------- */
@media (min-width: 1600px) and (max-width: 2099.98px) {
    .header-container { padding: 0 20px; max-width: 1400px; }
    .site-header .header-logo { top: 0; }
    .logo-name { font-size: 1.4rem; }
    .logo-role { font-size: 0.85rem; }
    .header-nav { display: flex !important; }
    .hamburger-btn { display: none !important; }
    .footer-top-logo { max-width: 1400px; padding: 0 20px; }
    .footer-grid { max-width: 1400px; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 0 20px; }
}

/* ---------------------------------------------------------------------
   CHROME · XWIDE (≥2100px) — 31.5″ (~2560), 4K
   --------------------------------------------------------------------- */
@media (min-width: 2100px) {
    .header-container { padding: 0 20px; max-width: 1400px; }
    .site-header .header-logo { top: 0; }
    .logo-name { font-size: 1.4rem; }
    .logo-role { font-size: 0.85rem; }
    .header-nav { display: flex !important; }
    .hamburger-btn { display: none !important; }
    .footer-top-logo { max-width: 1400px; padding: 0 20px; }
    .footer-grid { max-width: 1400px; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 0 20px; }
}

/* ---------------------------------------------------------------------
   SHARED CONTENT · PHONE (≤768px).
   One phone recipe for the whole band: the values the owner's Samsung
   (360) already showed. 601–768 (small phones sideways, iPad Mini
   upright at 744) now get the same stacked phone layout instead of the
   old half-tablet mix — the recorded-edge-case behaviour the rulebook
   asks for. The !importants only mirror legacy !importants above.
   --------------------------------------------------------------------- */
@media (max-width: 768.98px) {
    /* Intro (adults/children lesson pages) */
    .ap-intro-grid { grid-template-columns: 1fr; gap: 24px; align-items: center; }
    .ap-intro-text { display: block; }
    .ap-intro-grid > div:last-child { display: block; }
    .ap-photo-frame { flex: none; }
    .ap-photo-frame img { height: auto; aspect-ratio: 4/5; max-width: 360px; margin: 0 auto; }
    .ap-intro-text h2 { white-space: nowrap; letter-spacing: 0.5px; font-size: clamp(1rem, calc((100vw - 40px) / 16.9), 2rem); }
    /* Audience cards: stacked */
    .ap-cards-3 { grid-template-columns: 1fr; gap: 30px; align-items: start; }
    /* Learn cards: stacked */
    .ap-learn-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
    .ap-learn-card { padding: 28px 22px; }
    .ap-learn-title { font-size: 1.2rem; }
    /* Video review: video above the text */
    .ap-review-grid { grid-template-columns: 1fr; gap: 26px; }
    .ap-review--video-right .ap-review-video { order: 0; }
    .ap-review-video .custom-video-wrapper { max-width: 280px; margin-left: auto; margin-right: auto; }
    .ap-review-grid > div:not(.ap-review-video) { max-width: 100%; margin: 0 auto; }
    .ap-quote-text { font-size: 1.2rem; }
    .ap-quote-author { font-size: 1rem; }
    /* Method scheme: boxes stacked in one centered column */
    .ap-scheme-row { gap: 10px; flex-wrap: nowrap; }
    .ap-scheme-box { min-width: 0; padding: 12px 14px; font-size: 0.9rem; }
    .ap-method-scheme-row { grid-template-columns: 1fr; justify-content: stretch; column-gap: 32px; row-gap: 28px; align-items: center; }
    .ap-method-scheme-row .ap-scheme-box { max-width: 240px; margin-left: auto; margin-right: auto; padding: 9px 16px; font-size: 0.85rem; min-width: 0; width: 100%; }
    .ap-method-scheme-row .ap-scheme-row { flex-direction: column; gap: 6px; width: 100%; }
    .ap-method-scheme-row .ap-scheme-arrow-h { transform: none; margin: 2px 0; }
    .ap-method-scheme-row .ap-scheme-row--trio { gap: 8px; }
    .ap-method-scheme-row .ap-scheme-row--trio .ap-scheme-box { max-width: 240px; font-size: 0.9rem; padding: 12px 14px; }
    .ap-method-photo img { height: auto; flex: none; max-width: 360px; margin: 0 auto; }
    /* FAQ accordion: phone sizes */
    .ap-faq-q { font-size: 1rem; padding: 18px 18px; }
    .ap-faq-a { padding: 0 18px 20px 18px; }
    /* Studio photos & card */
    .ap-studio-photos { grid-template-columns: 1fr; }
    .ap-studio-card { padding: 26px 22px; }
    /* Условия: stacked */
    .ap-conditions { grid-template-columns: 1fr; gap: 18px; }
    .ap-condition { padding: 30px 22px; }
    .ap-condition h4 { font-size: 1.2rem; letter-spacing: 1.5px; white-space: normal; margin-bottom: 12px; }
    .ap-condition p { font-size: 15px; white-space: normal; }
    /* Заявка / контакты: stacked, full container width */
    .ap-contact-grid { grid-template-columns: 1fr; gap: 35px; max-width: none; margin-left: 0; margin-right: 0; }
    .ap-form-card { height: auto; min-height: 0; padding: 28px 30px; }
    .ap-form-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
    .ap-form-head { margin-bottom: 0; }
    .ap-form-note { font-size: 0.9rem; margin-bottom: 12px; line-height: 1.45; }
    .ap-field { padding: 10px 13px; margin-bottom: 9px; font-size: 0.98rem; }
    textarea.ap-field { min-height: 58px; margin-bottom: 9px; }
    .ap-submit { padding: 13px; font-size: 0.98rem; margin-top: 0; }
    .ap-contacts-block { margin-top: 12px; padding-top: 14px; }
    .ap-contacts-block h3 { font-size: 1.2rem; margin-bottom: 10px; }
    .ap-contacts-block p { font-size: 0.96rem; margin-bottom: 7px; line-height: 1.5; }
    .ap-map-wrapper { height: auto; min-height: 550px; }
    .ap-start-card { max-width: 760px; box-sizing: content-box; }
    /* Review widgets: stacked, compact button */
    .widgets-row-mobile { flex-direction: column !important; gap: 30px !important; zoom: 1; }
    .widgets-row-mobile .solid-btn { height: auto !important; min-height: 64px; padding: 16px 24px !important; }
    .widgets-row-mobile > * { max-width: 100%; } /* the 345px Avito mock and the 345px Profi-badge wrapper must fit the ~320px column of a 360px phone (2026-07-18) */
    /* Review video cards */
    .light-glass-video-card { padding: 20px; }
    .light-glass-video-card .custom-video-wrapper { max-width: 250px; }
    /* Principles: manual line-breaks collapse, text wraps naturally */
    .principle-item .card-text br { display: none; }
    /* Legacy phone rules above cut at a plain 768px and would miss the
       fractional 768.02–768.98 guard zone — restated here so the whole
       PHONE band is one coherent recipe (values verbatim from the legacy
       ≤768 blocks; page-local overrides keep winning as usual). */
    body.page-white .ap-creamy,
    body.page-white .ap-sticky { padding: 60px 0; }
    .reviews-grid-mobile { grid-template-columns: 1fr !important; gap: 40px !important; }
    .pathways-grid-mobile { grid-template-columns: 1fr !important; gap: 0px !important; }
    .pathway-card { padding-bottom: 50px; margin-bottom: 50px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
    .pathway-card:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
}

/* ---------------------------------------------------------------------
   SHARED CONTENT · TABLET (769–1024px).
   One tablet recipe for the whole band: the values the owner's sideways
   Samsung (780) already showed. 901–1024 (iPad upright) now matches it
   instead of the old desktop mix (side-by-side form+map, 3-across
   cards, full-size условия).
   --------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024.98px) {
    /* Intro: text left, photo right, photo stretches to the text height */
    .ap-intro-grid { grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: stretch; }
    .ap-intro-text { display: flex; flex-direction: column; justify-content: center; }
    .ap-intro-grid > div:last-child { display: flex; flex-direction: column; }
    .ap-photo-frame { flex: 1 1 auto; min-height: 0; }
    .ap-photo-frame img { height: 100%; aspect-ratio: auto; max-width: none; margin: 0; }
    .ap-intro-text h2 { white-space: nowrap; letter-spacing: 0.5px; font-size: clamp(1rem, calc((100vw - 70px) / 28.2), 2rem); }
    /* Audience cards: stacked (the 780 look, band-wide; the neutral values
       cancel the legacy ≥901 desktop extras inside 901–1024) */
    .ap-cards-3 { grid-template-columns: 1fr; gap: 30px; align-items: start; }
    .ap-cards-3 .ap-audience-card:nth-child(2) > h3 { white-space: normal; }
    .ap-cards-3 .ap-audience-card > p { min-height: auto; }
    /* Learn cards: stacked */
    .ap-learn-grid { grid-template-columns: 1fr; gap: 24px; align-items: start; }
    .ap-learn-card { padding: 35px 40px; }
    .ap-learn-title { font-size: 1.2rem; }
    /* Video review: side by side, narrow columns */
    .ap-review-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .ap-review--video-right .ap-review-video { order: 2; }
    .ap-review-video .custom-video-wrapper { max-width: 280px; margin-left: auto; margin-right: auto; }
    .ap-review-grid > div:not(.ap-review-video) { max-width: 300px; margin: 0 auto; }
    .ap-quote-text { font-size: 1.2rem; }
    .ap-quote-author { font-size: 1rem; }
    /* Method scheme: scheme + painting side by side, tighter gap */
    .ap-scheme-row { gap: 16px; flex-wrap: wrap; }
    .ap-scheme-box { min-width: 150px; padding: 14px 26px; font-size: 1rem; }
    .ap-method-scheme-row { grid-template-columns: auto auto; justify-content: center; column-gap: 32px; align-items: center; }
    .ap-method-scheme-row .ap-scheme-box { max-width: 230px; margin-left: 0; margin-right: 0; padding: 9px 16px; font-size: 0.85rem; min-width: 0; width: 100%; }
    .ap-method-scheme-row .ap-scheme-row { flex-direction: row; gap: 10px; width: auto; }
    .ap-method-scheme-row .ap-scheme-arrow-h { transform: none; margin: 0; }
    .ap-method-scheme-row .ap-scheme-row--trio { gap: 8px; }
    .ap-method-scheme-row .ap-scheme-row--trio .ap-scheme-box { max-width: 120px; padding: 8px 8px; font-size: 0.72rem; }
    /* FAQ accordion: full-size */
    .ap-faq-q { font-size: 1.1rem; padding: 22px 28px; }
    .ap-faq-a { padding: 0 28px 24px 28px; }
    /* Studio photos & card */
    .ap-studio-photos { grid-template-columns: 1fr 1fr; }
    .ap-studio-card { padding: 35px 40px; }
    /* Условия: three compact one-line columns */
    .ap-conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .ap-condition { padding: 22px 12px; }
    .ap-condition h4 { font-size: 0.98rem; letter-spacing: 1px; white-space: nowrap; margin-bottom: 10px; }
    .ap-condition p { font-size: 15px; white-space: nowrap; }
    /* Заявка / контакты: stacked, capped at 600px and centered (the neutral
       justify-content / align-self cancel the legacy ≥901 desktop extras
       inside 901–1024) */
    .ap-contact-grid { grid-template-columns: 1fr; gap: 35px; max-width: 600px; margin-left: auto; margin-right: auto; }
    .ap-form-card { height: auto; min-height: 0; padding: 28px 30px; justify-content: normal; }
    .ap-form-card h3 { font-size: 1.2rem; margin-bottom: 6px; }
    .ap-form-head { margin-bottom: 0; }
    .ap-form-note { font-size: 0.9rem; margin-bottom: 12px; line-height: 1.45; }
    .ap-field { padding: 10px 13px; margin-bottom: 9px; font-size: 0.98rem; }
    textarea.ap-field { min-height: 58px; margin-bottom: 9px; }
    .ap-submit { padding: 13px; font-size: 0.98rem; margin-top: 0; }
    .ap-contacts-block { margin-top: 12px; padding-top: 14px; }
    .ap-contacts-block h3 { font-size: 1.2rem; margin-bottom: 10px; }
    .ap-contacts-block p { font-size: 0.96rem; margin-bottom: 7px; line-height: 1.5; }
    .ap-map-wrapper { height: auto; min-height: 550px; align-self: auto; }
    .ap-start-card { max-width: 600px; box-sizing: border-box; }
    /* Review widgets: one zoomed row */
    .widgets-row-mobile { flex-direction: row !important; flex-wrap: nowrap !important; gap: 14px !important; zoom: 0.66; }
    .widgets-row-mobile > * { max-width: 100%; } /* full-set restatement (§0.4) — the cap only ever bites on PHONE */
    /* Review video cards */
    .light-glass-video-card { padding: 30px; }
    .light-glass-video-card .custom-video-wrapper { max-width: 360px; }
    /* Principles: manual line-breaks collapse on tablets too */
    .principle-item .card-text br { display: none; }
    /* Pathway cards (studio index): two columns, tighter gap */
    .pathways-grid-mobile { gap: 30px !important; }
}
/* SHARED CONTENT · TABLET sub-step 993–1024 (sanctioned): the widgets row
   has more room here — zoom up a step (the old 901–1100 value). */
@media (min-width: 993px) and (max-width: 1024.98px) {
    .widgets-row-mobile { zoom: 0.78; }
}

/* ---------------------------------------------------------------------
   SHARED CONTENT · MACBOOK (1025–1599px).
   The owner's-screen (1512) recipe, band-wide: 1025–1199 joins the
   desktop layout it was always meant to have (the old 900/901/992/1100
   seams all fell inside this band).
   --------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1599.98px) {
    /* Intro: desktop two-column */
    .ap-intro-grid { grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
    .ap-intro-text { display: block; }
    .ap-intro-grid > div:last-child { display: block; }
    .ap-photo-frame { flex: none; }
    .ap-photo-frame img { height: 430px; aspect-ratio: auto; max-width: none; margin: 0; }
    .ap-intro-text h2 { white-space: nowrap; letter-spacing: 0.5px; font-size: clamp(1rem, calc((100vw - 100px) / 31), 2rem); }
    /* Audience cards: three across */
    .ap-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
    .ap-cards-3 .ap-audience-card:nth-child(2) > h3 { white-space: nowrap; }
    .ap-cards-3 .ap-audience-card > p { min-height: 3.4rem; }
    /* Learn cards: two across */
    .ap-learn-grid { grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
    .ap-learn-card { padding: 35px 40px; }
    .ap-learn-title { font-size: 1.2rem; }
    /* Video review: desktop */
    .ap-review-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .ap-review--video-right .ap-review-video { order: 2; }
    .ap-review-video .custom-video-wrapper { max-width: 460px; margin-left: auto; margin-right: auto; }
    .ap-review-grid > div:not(.ap-review-video) { max-width: none; margin: 0; }
    .ap-quote-text { font-size: 1.45rem; }
    .ap-quote-author { font-size: 1.1rem; }
    /* Method scheme: desktop */
    .ap-scheme-row { gap: 16px; flex-wrap: wrap; }
    .ap-scheme-box { min-width: 150px; padding: 14px 26px; font-size: 1rem; }
    .ap-method-scheme-row { grid-template-columns: auto auto; justify-content: center; column-gap: 48px; align-items: center; }
    .ap-method-scheme-row .ap-scheme-box { max-width: 230px; margin-left: 0; margin-right: 0; padding: 9px 16px; font-size: 0.85rem; min-width: 0; width: 100%; }
    .ap-method-scheme-row .ap-scheme-row { flex-direction: row; gap: 10px; width: auto; }
    .ap-method-scheme-row .ap-scheme-arrow-h { transform: none; margin: 0; }
    .ap-method-scheme-row .ap-scheme-row--trio { gap: 8px; }
    .ap-method-scheme-row .ap-scheme-row--trio .ap-scheme-box { max-width: 150px; padding: 9px 10px; font-size: 0.82rem; letter-spacing: 0.5px; }
    /* FAQ accordion: full-size */
    .ap-faq-q { font-size: 1.1rem; padding: 22px 28px; }
    .ap-faq-a { padding: 0 28px 24px 28px; }
    /* Studio photos & card */
    .ap-studio-photos { grid-template-columns: 1fr 1fr; }
    .ap-studio-card { padding: 35px 40px; }
    /* Условия: full-size three columns */
    .ap-conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
    .ap-condition { padding: 30px 22px; }
    .ap-condition h4 { font-size: 1.2rem; letter-spacing: 1.5px; white-space: normal; margin-bottom: 12px; }
    .ap-condition p { font-size: 16px; white-space: normal; }
    /* Заявка / контакты: form and map side by side, both exactly 550px */
    .ap-contact-grid { grid-template-columns: 1fr 1fr; gap: 50px; max-width: none; margin-left: 0; margin-right: 0; align-items: stretch; }
    .ap-map-wrapper { height: 550px; min-height: 550px; align-self: stretch; }
    .ap-form-card { height: 550px; min-height: 550px; padding: 24px 28px; justify-content: space-between; }
    .ap-form-card h3 { font-size: 1.16rem; margin-bottom: 8px; }
    .ap-form-head { margin-bottom: 4px; }
    .ap-form-note { font-size: 1rem; margin-bottom: 0; line-height: 1.5; }
    .ap-field { padding: 11px 13px; margin-bottom: 13px; font-size: 0.96rem; }
    textarea.ap-field { min-height: 56px; margin-bottom: 0; }
    .ap-submit { padding: 13px; font-size: 0.96rem; margin-top: 16px; }
    .ap-contacts-block { margin-top: 12px; padding-top: 13px; }
    .ap-contacts-block h3 { font-size: 1.08rem; margin-bottom: 8px; }
    .ap-contacts-block p { font-size: 0.92rem; margin-bottom: 6px; line-height: 1.5; }
    .ap-start-card { max-width: 920px; box-sizing: content-box; }
    /* Review widgets: natural desktop row (row/gap restated so the legacy
       768–1100px rule cannot leak its compressed 14px gap in at exactly
       1100px; 25px = the markup's own inline gap) */
    .widgets-row-mobile { flex-direction: row !important; gap: 25px !important; zoom: 1; }
    .widgets-row-mobile > * { max-width: 100%; } /* full-set restatement (§0.4) — the cap only ever bites on PHONE */
    /* Review video cards */
    .light-glass-video-card { padding: 30px; }
    .light-glass-video-card .custom-video-wrapper { max-width: 360px; }
    /* Principles: manual line-breaks stay */
    .principle-item .card-text br { display: inline; }
    /* Pathway cards (studio index): the wide-laptop treatment, band-wide */
    .pathways-container { max-width: 1380px !important; }
    .pathways-grid-mobile, .large-screen-pathways { gap: 48px !important; }
}
/* SHARED CONTENT · MACBOOK sub-step 1025–1099 (sanctioned): the widgets
   row does not fit unzoomed until ~1100 — keep the old zoomed step. */
@media (min-width: 1025px) and (max-width: 1099.98px) {
    .widgets-row-mobile { flex-direction: row !important; flex-wrap: nowrap !important; gap: 14px !important; zoom: 0.78; }
}
/* SHARED CONTENT · MACBOOK sub-step ≥1280 (sanctioned heading step): the
   intro heading reaches its full size and letter-spacing. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
    .ap-intro-text h2 { letter-spacing: 1.5px; font-size: 2rem; }
}

/* ---------------------------------------------------------------------
   SHARED CONTENT · WIDE (1600–2099px).
   The MACBOOK desktop recipe on the widened ≥1600 containers (the
   .ap-container / chrome ≥1600 widening lives in its own blocks and is
   already on the ladder).
   --------------------------------------------------------------------- */
@media (min-width: 1600px) and (max-width: 2099.98px) {
    .ap-intro-grid { grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
    .ap-intro-text { display: block; }
    .ap-intro-grid > div:last-child { display: block; }
    .ap-photo-frame { flex: none; }
    .ap-photo-frame img { height: 430px; aspect-ratio: auto; max-width: none; margin: 0; }
    .ap-intro-text h2 { white-space: nowrap; letter-spacing: 1.5px; font-size: 2rem; }
    .ap-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
    .ap-cards-3 .ap-audience-card:nth-child(2) > h3 { white-space: nowrap; }
    .ap-cards-3 .ap-audience-card > p { min-height: 3.4rem; }
    .ap-learn-grid { grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
    .ap-learn-card { padding: 35px 40px; }
    .ap-learn-title { font-size: 1.2rem; }
    .ap-review-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .ap-review--video-right .ap-review-video { order: 2; }
    .ap-review-video .custom-video-wrapper { max-width: 460px; margin-left: auto; margin-right: auto; }
    .ap-review-grid > div:not(.ap-review-video) { max-width: none; margin: 0; }
    .ap-quote-text { font-size: 1.45rem; }
    .ap-quote-author { font-size: 1.1rem; }
    .ap-scheme-row { gap: 16px; flex-wrap: wrap; }
    .ap-scheme-box { min-width: 150px; padding: 14px 26px; font-size: 1rem; }
    .ap-method-scheme-row { grid-template-columns: auto auto; justify-content: center; column-gap: 48px; align-items: center; }
    .ap-method-scheme-row .ap-scheme-box { max-width: 230px; margin-left: 0; margin-right: 0; padding: 9px 16px; font-size: 0.85rem; min-width: 0; width: 100%; }
    .ap-method-scheme-row .ap-scheme-row { flex-direction: row; gap: 10px; width: auto; }
    .ap-method-scheme-row .ap-scheme-arrow-h { transform: none; margin: 0; }
    .ap-method-scheme-row .ap-scheme-row--trio { gap: 8px; }
    .ap-method-scheme-row .ap-scheme-row--trio .ap-scheme-box { max-width: 150px; padding: 9px 10px; font-size: 0.82rem; letter-spacing: 0.5px; }
    .ap-faq-q { font-size: 1.1rem; padding: 22px 28px; }
    .ap-faq-a { padding: 0 28px 24px 28px; }
    .ap-studio-photos { grid-template-columns: 1fr 1fr; }
    .ap-studio-card { padding: 35px 40px; }
    .ap-conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
    .ap-condition { padding: 30px 22px; }
    .ap-condition h4 { font-size: 1.2rem; letter-spacing: 1.5px; white-space: normal; margin-bottom: 12px; }
    .ap-condition p { font-size: 16px; white-space: normal; }
    .ap-contact-grid { grid-template-columns: 1fr 1fr; gap: 50px; max-width: none; margin-left: 0; margin-right: 0; align-items: stretch; }
    .ap-map-wrapper { height: 550px; min-height: 550px; align-self: stretch; }
    .ap-form-card { height: 550px; min-height: 550px; padding: 24px 28px; justify-content: space-between; }
    .ap-form-card h3 { font-size: 1.16rem; margin-bottom: 8px; }
    .ap-form-head { margin-bottom: 4px; }
    .ap-form-note { font-size: 1rem; margin-bottom: 0; line-height: 1.5; }
    .ap-field { padding: 11px 13px; margin-bottom: 13px; font-size: 0.96rem; }
    textarea.ap-field { min-height: 56px; margin-bottom: 0; }
    .ap-submit { padding: 13px; font-size: 0.96rem; margin-top: 16px; }
    .ap-contacts-block { margin-top: 12px; padding-top: 13px; }
    .ap-contacts-block h3 { font-size: 1.08rem; margin-bottom: 8px; }
    .ap-contacts-block p { font-size: 0.92rem; margin-bottom: 6px; line-height: 1.5; }
    .ap-start-card { max-width: 920px; box-sizing: content-box; }
    .widgets-row-mobile { flex-direction: row !important; gap: 25px !important; zoom: 1; }
    .widgets-row-mobile > * { max-width: 100%; } /* full-set restatement (§0.4) — the cap only ever bites on PHONE */
    .light-glass-video-card { padding: 30px; }
    .light-glass-video-card .custom-video-wrapper { max-width: 360px; }
    .principle-item .card-text br { display: inline; }
    /* Pathway cards (studio index): the ≥1600 widening (same values the
       legacy ≥1600 blocks above already set — restated so this band is
       self-contained) */
    .pathways-container { max-width: 1500px !important; }
    .pathways-grid-mobile, .large-screen-pathways { gap: 90px !important; }
    .pathway-card img { height: 500px !important; }
}

/* ---------------------------------------------------------------------
   SHARED CONTENT · XWIDE (≥2100px) — same recipe as WIDE (tuned at
   2560; restated in full so the band stays sealed).
   --------------------------------------------------------------------- */
@media (min-width: 2100px) {
    .ap-intro-grid { grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
    .ap-intro-text { display: block; }
    .ap-intro-grid > div:last-child { display: block; }
    .ap-photo-frame { flex: none; }
    .ap-photo-frame img { height: 430px; aspect-ratio: auto; max-width: none; margin: 0; }
    .ap-intro-text h2 { white-space: nowrap; letter-spacing: 1.5px; font-size: 2rem; }
    .ap-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
    .ap-cards-3 .ap-audience-card:nth-child(2) > h3 { white-space: nowrap; }
    .ap-cards-3 .ap-audience-card > p { min-height: 3.4rem; }
    .ap-learn-grid { grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
    .ap-learn-card { padding: 35px 40px; }
    .ap-learn-title { font-size: 1.2rem; }
    .ap-review-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .ap-review--video-right .ap-review-video { order: 2; }
    .ap-review-video .custom-video-wrapper { max-width: 460px; margin-left: auto; margin-right: auto; }
    .ap-review-grid > div:not(.ap-review-video) { max-width: none; margin: 0; }
    .ap-quote-text { font-size: 1.45rem; }
    .ap-quote-author { font-size: 1.1rem; }
    .ap-scheme-row { gap: 16px; flex-wrap: wrap; }
    .ap-scheme-box { min-width: 150px; padding: 14px 26px; font-size: 1rem; }
    .ap-method-scheme-row { grid-template-columns: auto auto; justify-content: center; column-gap: 48px; align-items: center; }
    .ap-method-scheme-row .ap-scheme-box { max-width: 230px; margin-left: 0; margin-right: 0; padding: 9px 16px; font-size: 0.85rem; min-width: 0; width: 100%; }
    .ap-method-scheme-row .ap-scheme-row { flex-direction: row; gap: 10px; width: auto; }
    .ap-method-scheme-row .ap-scheme-arrow-h { transform: none; margin: 0; }
    .ap-method-scheme-row .ap-scheme-row--trio { gap: 8px; }
    .ap-method-scheme-row .ap-scheme-row--trio .ap-scheme-box { max-width: 150px; padding: 9px 10px; font-size: 0.82rem; letter-spacing: 0.5px; }
    .ap-faq-q { font-size: 1.1rem; padding: 22px 28px; }
    .ap-faq-a { padding: 0 28px 24px 28px; }
    .ap-studio-photos { grid-template-columns: 1fr 1fr; }
    .ap-studio-card { padding: 35px 40px; }
    .ap-conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
    .ap-condition { padding: 30px 22px; }
    .ap-condition h4 { font-size: 1.2rem; letter-spacing: 1.5px; white-space: normal; margin-bottom: 12px; }
    .ap-condition p { font-size: 16px; white-space: normal; }
    .ap-contact-grid { grid-template-columns: 1fr 1fr; gap: 50px; max-width: none; margin-left: 0; margin-right: 0; align-items: stretch; }
    .ap-map-wrapper { height: 550px; min-height: 550px; align-self: stretch; }
    .ap-form-card { height: 550px; min-height: 550px; padding: 24px 28px; justify-content: space-between; }
    .ap-form-card h3 { font-size: 1.16rem; margin-bottom: 8px; }
    .ap-form-head { margin-bottom: 4px; }
    .ap-form-note { font-size: 1rem; margin-bottom: 0; line-height: 1.5; }
    .ap-field { padding: 11px 13px; margin-bottom: 13px; font-size: 0.96rem; }
    textarea.ap-field { min-height: 56px; margin-bottom: 0; }
    .ap-submit { padding: 13px; font-size: 0.96rem; margin-top: 16px; }
    .ap-contacts-block { margin-top: 12px; padding-top: 13px; }
    .ap-contacts-block h3 { font-size: 1.08rem; margin-bottom: 8px; }
    .ap-contacts-block p { font-size: 0.92rem; margin-bottom: 6px; line-height: 1.5; }
    .ap-start-card { max-width: 920px; box-sizing: content-box; }
    .widgets-row-mobile { flex-direction: row !important; gap: 25px !important; zoom: 1; }
    .widgets-row-mobile > * { max-width: 100%; } /* full-set restatement (§0.4) — the cap only ever bites on PHONE */
    .light-glass-video-card { padding: 30px; }
    .light-glass-video-card .custom-video-wrapper { max-width: 360px; }
    .principle-item .card-text br { display: inline; }
    .pathways-container { max-width: 1500px !important; }
    .pathways-grid-mobile, .large-screen-pathways { gap: 90px !important; }
    .pathway-card img { height: 500px !important; }
}


