/* ==========================================================================
   Kinetic accents — inner pages

   Deliberately partial. The homepage carries the full poster variant; here we
   only bring across the three things that make the two feel like one site:

     1. the type system  — Oswald headings, Oswald labels, one scale
     2. the buttons      — violet, square, mono-ish label
     3. small accents    — violet eyebrows, gold hairlines, violet counters

   What is NOT brought across, on purpose: page backgrounds, the emerald
   sections, card fills, the dot grid, the page frame. Emerald still carries
   meaning on the method pages (dark section fills, certificate frames, seals),
   and repainting those would change their character far more than it changed
   the homepage.

   Loaded from functions.php on every page except the front page, which has
   home-kinetic.css instead.
   ========================================================================== */

body {
    --ka-violet: #6f528e;
    --ka-violet-dim: #634681;
    --ka-violet-ink: #2a1345;
    --ka-gold-rule: #c09645;
    --ka-gold-lit: #eec06a;

    --ka-poster: 'Oswald', 'Arial Narrow', sans-serif;

    /* same scale as the homepage */
    --ka-t-label: 0.8125rem;
    --ka-t-card: 1.75rem;
    --ka-t-section: clamp(2.2rem, 1.1rem + 3.4vw, 4rem);
    --ka-track-label: 0.18em;
    --ka-track-head: -0.01em;
}

/* ==========================================================================
   Type — headings move from Cormorant to the poster face
   ========================================================================== */

html[data-design="2"] body .entry-content h1,
html[data-design="2"] body .entry-content h2,
html[data-design="2"] body .page-hero h1,
html[data-design="2"] body .about-hero h1,
html[data-design="2"] body .site-main h2.wp-block-heading {
    font-family: var(--ka-poster) !important;
    font-weight: 600 !important;
    font-size: var(--ka-t-section) !important;
    line-height: 0.94 !important;
    letter-spacing: var(--ka-track-head) !important;
    text-transform: uppercase !important;

    /* Astra breaks long words mid-word; uppercase Oswald made that obvious
       ("ПСИХОСОМАТИК / А: МОВА ТІЛА"). Wrap between words only. */
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

html[data-design="2"] body .entry-content h3,
html[data-design="2"] body .premium-card h3,
html[data-design="2"] body .site-main h3.wp-block-heading {
    font-family: var(--ka-poster) !important;
    font-weight: 600 !important;
    font-size: var(--ka-t-card) !important;
    line-height: 1.05 !important;
    letter-spacing: var(--ka-track-head) !important;
    text-transform: uppercase !important;
}

/* Eyebrows and small caps labels — same treatment as the homepage. */
html[data-design="2"] body .subtitle,
html[data-design="2"] body .section-eyebrow,
html[data-design="2"] body .eyebrow {
    font-family: var(--ka-poster) !important;
    font-weight: 500 !important;
    font-size: var(--ka-t-label) !important;
    letter-spacing: var(--ka-track-label) !important;
    text-transform: uppercase !important;
    color: var(--ka-violet) !important;
}

/* ==========================================================================
   Header and footer — gold hairline and numbered nav, as on the homepage
   ========================================================================== */

html[data-design="2"] body .main-header-bar,
html[data-design="2"] body .ast-primary-header-bar {
    border-bottom: 1px solid color-mix(in srgb, var(--ka-gold-rule) 35%, transparent) !important;
}

html[data-design="2"] body .main-header-menu {
    counter-reset: ka-nav;
}

html[data-design="2"] body .main-header-menu > .menu-item {
    counter-increment: ka-nav;
}

html[data-design="2"] body .main-header-menu > .menu-item > a {
    font-family: var(--ka-poster) !important;
    font-weight: 500 !important;
    font-size: var(--ka-t-label) !important;
    letter-spacing: var(--ka-track-label) !important;
    text-transform: uppercase !important;
}

html[data-design="2"] body .main-header-menu > .menu-item:not(:last-child) > a {
    border-right: 1px solid color-mix(in srgb, var(--ka-gold-rule) 40%, transparent);
}

html[data-design="2"] body .main-header-menu > .menu-item > a::before {
    content: counter(ka-nav, decimal-leading-zero);
    margin-right: 0.6em;
    color: var(--ka-gold-rule);
    font-variant-numeric: tabular-nums;
}

html[data-design="2"] body .main-header-menu > .menu-item:hover > a,
html[data-design="2"] body .main-header-menu > .menu-item.current-menu-item > a {
    color: var(--ka-violet) !important;
}

/* ==========================================================================
   Buttons — the homepage violet, on light grounds only

   Dark emerald sections keep an outlined button: violet on emerald is muddy,
   and those sections are exactly where the emerald still has to read.
   ========================================================================== */

html[data-design="2"] body .wp-block-button__link,
html[data-design="2"] body .btn-primary,
html[data-design="2"] body .cta-button {
    background-color: var(--ka-violet) !important;
    border: 1px solid var(--ka-violet) !important;
    color: #fff8f1 !important;
    border-radius: 0 !important;
    font-family: var(--ka-poster) !important;
    font-weight: 500 !important;
    font-size: var(--ka-t-label) !important;
    letter-spacing: var(--ka-track-label) !important;
    text-transform: uppercase !important;
}

html[data-design="2"] body .wp-block-button__link:hover,
html[data-design="2"] body .btn-primary:hover,
html[data-design="2"] body .cta-button:hover {
    background-color: var(--ka-violet-ink) !important;
    border-color: var(--ka-gold-rule) !important;
    color: #fff8f1 !important;
}

/* The method pages style their CTA through a more specific selector
   (.method-cta .wp-block-button__link), which otherwise keeps it emerald.
   Those CTAs sit on the cream ground, so they take the violet like the rest. */
html[data-design="2"] body .method-cta .wp-block-button__link {
    background: var(--ka-violet) !important;
    border-color: var(--ka-violet) !important;
    color: #fff8f1 !important;
    font-weight: 500 !important;
    letter-spacing: var(--ka-track-label) !important;
}

html[data-design="2"] body .method-cta .wp-block-button__link:hover {
    background: var(--ka-violet-ink) !important;
    border-color: var(--ka-gold-rule) !important;
    color: #fff8f1 !important;
}

html[data-design="2"] body .bg-full-emerald .wp-block-button__link,
html[data-design="2"] body .premium-gradient .wp-block-button__link {
    background-color: transparent !important;
    border-color: var(--ka-gold-lit) !important;
    color: var(--ka-gold-lit) !important;
}

html[data-design="2"] body .bg-full-emerald .wp-block-button__link:hover,
html[data-design="2"] body .premium-gradient .wp-block-button__link:hover {
    background-color: var(--ka-gold-lit) !important;
    border-color: var(--ka-gold-lit) !important;
    color: #0d3f2c !important;
}

/* ==========================================================================
   Accents — violet where variant 2 used gold for emphasis on light grounds
   ========================================================================== */

html[data-design="2"] body ::selection {
    background: var(--ka-violet);
    color: #fff8f1;
}

html[data-design="2"] body .section-divider-gold {
    background: linear-gradient(
        90deg,
        transparent,
        var(--gold-muted, #d4ad60),
        transparent
    );
}

/* ==========================================================================
   Pass 2 — every page

   The first pass only caught hero headings and cards inside .entry-content,
   so section headings nested in each template's own wrappers stayed Cormorant
   and the two faces read as an accident rather than a rule. These are the
   per-template selectors, taken from each page stylesheet.
   ========================================================================== */

/* --- section headings ---------------------------------------------------- */

html[data-design="2"] body .about-hero h1,
html[data-design="2"] body .about-intro-text h2,
html[data-design="2"] body .methodology-hero h1,
html[data-design="2"] body .methodology-hero-content h2,
html[data-design="2"] body .directions-section h2,
html[data-design="2"] body .courses-hero h1,
html[data-design="2"] body .advantages-section h2,
html[data-design="2"] body .course-header h2,
html[data-design="2"] body .books-hero h1,
html[data-design="2"] body .books-list-section h2,
html[data-design="2"] body .certificates-hero h1,
html[data-design="2"] body .iso-cert-section h2,
html[data-design="2"] body .reviews-hero h1,
html[data-design="2"] body .contacts-hero h1,
html[data-design="2"] body .contact-primary__copy h2,
html[data-design="2"] body .contacts-video-section h2,
html[data-design="2"] body .quality-standard__copy h2,
html[data-design="2"] body .blog-intro h1 {
    font-family: var(--ka-poster) !important;
    font-weight: 600 !important;
    line-height: 0.96 !important;
    letter-spacing: var(--ka-track-head) !important;
    text-transform: uppercase !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* --- card / block headings, one step down -------------------------------- */

html[data-design="2"] body .team-info h3,
html[data-design="2"] body .founder-block h3,
html[data-design="2"] body .advantage-card h3,
html[data-design="2"] body .course-program h3,
html[data-design="2"] body .certificate-info h3,
html[data-design="2"] body .review-card-closing h3,
html[data-design="2"] body .method-cta h3,
html[data-design="2"] body .book-card-mini h4,
html[data-design="2"] body .day-block h4 {
    font-family: var(--ka-poster) !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
    letter-spacing: var(--ka-track-head) !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   Gold and violet detail

   Small, repeated, and always in the same role: gold is the rule that connects
   things, violet is the mark that starts them. Nothing here fills an area —
   the emerald sections keep their ground.
   ========================================================================== */

/* A gold tick under every section head, the way the homepage hangs its
   eyebrow on a rule. Applied to the light-ground headings only: on the dark
   emerald heroes it would disappear. */
html[data-design="2"] body .about-intro-text h2::after,
html[data-design="2"] body .directions-section h2::after,
html[data-design="2"] body .advantages-section h2::after,
html[data-design="2"] body .books-list-section h2::after,
html[data-design="2"] body .iso-cert-section h2::after,
html[data-design="2"] body .contact-primary__copy h2::after {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 18px;
    background: var(--ka-gold-rule);
}

/* Centred heads get a centred tick. */
html[data-design="2"] body .advantages-section h2,
html[data-design="2"] body .books-list-section h2,
html[data-design="2"] body .iso-cert-section h2 {
    text-align: center;
}

html[data-design="2"] body .advantages-section h2::after,
html[data-design="2"] body .books-list-section h2::after,
html[data-design="2"] body .iso-cert-section h2::after {
    margin-inline: auto;
}

/* Gold hairline on cards, the "signal row" notch from the homepage. */
html[data-design="2"] body .advantage-card,
html[data-design="2"] body .certificate-info,
html[data-design="2"] body .book-card-mini,
html[data-design="2"] body .day-block {
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ka-gold-rule) 70%, transparent);
}

/* Numbers, dates and other small facts in violet rather than gold-on-cream,
   which was too low-contrast to act as an accent. */
html[data-design="2"] body .book-card-mini .book-year,
html[data-design="2"] body .day-block .day-number,
html[data-design="2"] body .course-program .program-step {
    color: var(--ka-violet) !important;
}

/* Links inside body copy pick up the violet, with a gold underline on hover. */
html[data-design="2"] body .entry-content a:not(.wp-block-button__link):not(.cta-button),
html[data-design="2"] body .contact-primary__copy a {
    color: var(--ka-violet-dim);
    text-decoration-color: color-mix(in srgb, var(--ka-violet) 45%, transparent);
    text-underline-offset: 3px;
}

html[data-design="2"] body .entry-content a:not(.wp-block-button__link):not(.cta-button):hover,
html[data-design="2"] body .contact-primary__copy a:hover {
    color: var(--ka-violet-ink);
    text-decoration-color: var(--ka-gold-rule);
}

/* ==========================================================================
   Catch-all

   The per-template lists above cover the headings each stylesheet names, but
   every page had two or three more nested in wrappers nothing declares
   (.courses-intro-copy h2, .courses-organisers h2, .courses-enroll__sheet h2 …).
   Chasing them one by one is whack-a-mole, so: every heading in the main
   column is the poster face. Sizes still come from each page's own rules —
   this only settles family, case and wrapping.
   ========================================================================== */

html[data-design="2"] body .site-main :is(h1, h2, h3, h4) {
    font-family: var(--ka-poster) !important;
    font-weight: 600 !important;
    letter-spacing: var(--ka-track-head) !important;
    text-transform: uppercase !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Blockquotes keep the serif voice — it is the one place the old antiqua still
   earns its keep, the same role EB Garamond plays on the homepage. */
html[data-design="2"] body .site-main blockquote,
html[data-design="2"] body .site-main blockquote :is(h1, h2, h3, h4, p),
html[data-design="2"] body .site-main .review-card p,
html[data-design="2"] body .site-main .quote-text {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    text-transform: none !important;
    font-style: italic;
}

/* Templates that roll their own button classes rather than using the core
   block. Same violet, same rule as everything else. */
html[data-design="2"] body .contact-primary__btn,
html[data-design="2"] body .courses-enroll__btn,
html[data-design="2"] body .courses-enroll__btn--primary {
    background: var(--ka-violet) !important;
    border-color: var(--ka-violet) !important;
    color: #fff8f1 !important;
    border-radius: 0 !important;
    font-family: var(--ka-poster) !important;
    font-weight: 500 !important;
    letter-spacing: var(--ka-track-label) !important;
    text-transform: uppercase !important;
}

html[data-design="2"] body .contact-primary__btn:hover,
html[data-design="2"] body .courses-enroll__btn:hover,
html[data-design="2"] body .courses-enroll__btn--primary:hover {
    background: var(--ka-violet-ink) !important;
    border-color: var(--ka-gold-rule) !important;
    color: #fff8f1 !important;
}

/* ==========================================================================
   Методика — soft violet pass

   Scoped to body.page-slug-metodika so nothing here reaches the other pages.
   Everything is a tint or a hairline: the page keeps its cream ground and its
   emerald hero, the violet only lands on the parts that were previously plain
   white or plain gold. Values sit between 4% and 14% — the brief was "нежные",
   so nothing here fills an area at full strength.
   ========================================================================== */

body.page-slug-metodika {
    --mk-lilac: #f7f2fb;
    --mk-lilac-deep: #efe6f6;
    --mk-violet: #6f528e;
    --mk-violet-dim: #634681;
    --mk-violet-ink: #2a1345;
}

/* --- section grounds: cream warms toward lilac ---------------------------- */

html[data-design="2"] body.page-slug-metodika .methodology-intro {
    background: var(--mk-lilac) !important;
}

html[data-design="2"] body.page-slug-metodika .directions-section {
    background-color: var(--mk-lilac) !important;
    background-image: radial-gradient(
        circle at 2px 2px,
        color-mix(in srgb, var(--mk-violet) 12%, transparent) 1px,
        transparent 0
    );
    background-size: 40px 40px;
}

html[data-design="2"] body.page-slug-metodika .founders-section {
    background: linear-gradient(
        180deg,
        var(--mk-lilac) 0%,
        color-mix(in srgb, var(--mk-lilac) 40%, #fbf8f1) 100%
    ) !important;
}

/* --- rules and dividers --------------------------------------------------- */

html[data-design="2"] body.page-slug-metodika .section-divider-gold {
    background: linear-gradient(
        90deg,
        transparent,
        var(--gold-muted, #d4ad60),
        transparent
    ) !important;
}

/* --- intro callout: lilac panel with a violet spine ---------------------- */

html[data-design="2"] body.page-slug-metodika .intro-callout {
    background: radial-gradient(circle at 8% 18%, rgba(212, 173, 96, 0.14), transparent 28%), color-mix(in srgb, #ffffff 88%, var(--mk-lilac-deep)) !important;
    border-color: color-mix(in srgb, var(--gold-muted) 40%, transparent) !important;
    border-left-color: var(--gold-muted) !important;
    border-radius: 24px !important;
}

html[data-design="2"] body.page-slug-metodika .lead-text strong,
html[data-design="2"] body.page-slug-metodika .intro-text strong {
    color: var(--mk-violet-dim);
}

/* --- direction cards: violet halo behind the icon, lilac lift on hover --- */

html[data-design="2"] body.page-slug-metodika .direction-card {
    background: #ffffff !important;
    border: 1px solid color-mix(in srgb, var(--mk-violet) 14%, transparent) !important;
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--mk-violet) 45%, transparent);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

html[data-design="2"] body.page-slug-metodika .direction-card:hover {
    background: var(--mk-lilac) !important;
    box-shadow:
        inset 2px 0 0 var(--mk-violet),
        0 16px 32px color-mix(in srgb, var(--mk-violet-ink) 10%, transparent);
    transform: translateY(-4px);
}

html[data-design="2"] body.page-slug-metodika .direction-icon {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 52px;
    font-size: 0;
}

html[data-design="2"] body.page-slug-metodika .directions-section h2::after {
    width: 72px;
    height: 3px;
    margin: 22px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold-muted) 18%, var(--gold-muted) 82%, transparent) !important;
}

/* Subject-specific line art mirrors the watercolour watermark treatment used
   by the Ethical Code cards. The stored emoji remains only as fallback text. */
html[data-design="2"] body.page-slug-metodika .direction-icon::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -58px;
    right: -38px;
    width: 154px;
    height: 154px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.28;
    mix-blend-mode: multiply;
    filter: hue-rotate(250deg) saturate(0.85) brightness(0.98);
    pointer-events: none;
    transform: rotate(6deg);
    transform-origin: center;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(1) .direction-icon::after {
    background-image: url('assets/icons/line/joint-motion.webp');
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(2) .direction-icon::after {
    background-image: url('assets/icons/line/head-nerves.webp');
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(3) .direction-icon::after {
    background-image: url('assets/icons/line/flow-knot.webp');
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(4) .direction-icon::after {
    background-image: url('assets/icons/line/pelvis-roots.webp');
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(5) .direction-icon::after {
    background-image: url('assets/icons/line/droplet-tree.webp');
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(6) .direction-icon::after {
    background-image: url('assets/icons/line/face-leaf.webp');
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(7) .direction-icon::after {
    background-image: url('assets/icons/line/meditation.webp');
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(8) .direction-icon::after {
    background-image: url('assets/icons/line/hands-droplet.webp');
}

html[data-design="2"] body.page-slug-metodika .direction-card:nth-child(even) .direction-icon::after {
    transform: rotate(-6deg);
}

html[data-design="2"] body.page-slug-metodika .direction-card:hover .direction-icon::after {
    opacity: 0.4;
    transform: rotate(1deg) scale(1.05);
}

/* The counter itself: kept, recoloured from gold to violet. */
html[data-design="2"] body.page-slug-metodika .direction-icon::before {
    color: var(--mk-violet) !important;
    position: relative;
    z-index: 2;
}

html[data-design="2"] body.page-slug-metodika .direction-card p {
    position: relative;
    z-index: 2;
}

/* --- founders: violet dates, violet list markers ------------------------- */

html[data-design="2"] body.page-slug-metodika .founder-dates {
    color: var(--mk-violet) !important;
}

html[data-design="2"] body.page-slug-metodika .founder-image-container {
    position: relative;
}

/* Offset register frame, the same device the homepage puts behind its photo. */
html[data-design="2"] body.page-slug-metodika .founder-image-container::after {
    content: '';
    position: absolute;
    inset: 16px -16px -16px 16px;
    border: 1px solid color-mix(in srgb, var(--mk-violet) 45%, transparent);
    pointer-events: none;
    z-index: 0;
}

html[data-design="2"] body.page-slug-metodika .founder-image {
    position: relative;
    z-index: 1;
}

html[data-design="2"] body.page-slug-metodika .scientific-list li::marker,
html[data-design="2"] body.page-slug-metodika .publications-list li::marker {
    color: var(--mk-violet);
}

html[data-design="2"] body.page-slug-metodika .scientific-list li,
html[data-design="2"] body.page-slug-metodika .publications-list li {
    border-bottom: 1px solid color-mix(in srgb, var(--mk-violet) 12%, transparent);
}

/* --- poem: lilac field, violet ink --------------------------------------- */

html[data-design="2"] body.page-slug-metodika .poem-block {
    background: linear-gradient(135deg, color-mix(in srgb, #ffffff 88%, var(--mk-lilac-deep)) 0%, var(--mk-lilac) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--gold-muted) 32%, transparent) !important;
    border-left: 4px solid var(--gold-muted) !important;
    border-radius: 22px !important;
}

html[data-design="2"] body.page-slug-metodika .poem-line {
    color: var(--mk-violet-ink) !important;
}

html[data-design="2"] body.page-slug-metodika .intro-text .lead-text {
    font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.55rem) !important;
    line-height: 1.68 !important;
}

html[data-design="2"] body.page-slug-metodika .intro-text p:not(.lead-text) {
    font-size: clamp(1.1rem, 1.02rem + 0.25vw, 1.25rem) !important;
    line-height: 1.72 !important;
}

html[data-design="2"] body.page-slug-metodika .intro-callout p {
    font-size: clamp(1.18rem, 1.06rem + 0.34vw, 1.36rem) !important;
    line-height: 1.68 !important;
}

html[data-design="2"] body.page-slug-metodika .founder-content p {
    font-size: clamp(1.08rem, 1.01rem + 0.24vw, 1.22rem) !important;
    line-height: 1.78 !important;
}

html[data-design="2"] body.page-slug-metodika :is(.scientific-list, .publications-list) li {
    font-size: clamp(1.04rem, 1rem + 0.18vw, 1.15rem) !important;
    line-height: 1.68 !important;
}

/* --- audio player -------------------------------------------------------- */

html[data-design="2"] body.page-slug-metodika .berezovsky-audio-player {
    background: color-mix(in srgb, var(--mk-lilac-deep) 55%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--mk-violet) 20%, transparent) !important;
    border-radius: 0 !important;
}

/* --- hero eyebrow -------------------------------------------------------- */

/* On the dark emerald hero the violet would vanish, so the eyebrow keeps the
   gold there and only the underline picks up a violet cast. */
html[data-design="2"] body.page-slug-metodika .methodology-hero-content .subtitle {
    color: var(--ka-gold-lit) !important;
}

html[data-design="2"] body.page-slug-metodika .methodology-hero-content .subtitle::after {
    content: none;
    display: none;
}

/* Same header ground as the homepage: the shipped variant's #f5f3e6 is a
   greenish cream, which fights the violet accents. */
html[data-design="2"] body .ast-main-header-wrap,
html[data-design="2"] body .main-header-bar,
html[data-design="2"] body .ast-primary-header-bar,
html[data-design="2"] body .ast-primary-header,
html[data-design="2"] body #masthead .main-header-bar-wrap {
    background-color: #fffdf8 !important;
}

/* ==========================================================================
   «Етичний кодекс БЕСТ» — rose and violet

   The ten principle cards were ivory on gold with a sage watermark: correct
   for variant 2, but the odd one out now that the rest of the page carries
   violet. Same layout, repainted.
   ========================================================================== */

html[data-design="2"] body .ethical-item {
    background: linear-gradient(
        150deg,
        #fffdfb 0%,
        color-mix(in srgb, #f7f2fb 85%, #ffffff) 100%
    ) !important;
    border-left: 4px solid var(--ka-violet) !important;
    border-radius: 0 !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ka-violet) 10%, transparent) !important;
}

html[data-design="2"] body .ethical-item:hover {
    background: linear-gradient(
        150deg,
        #ffffff 0%,
        color-mix(in srgb, #efe6f6 75%, #ffffff) 100%
    ) !important;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--ka-violet) 22%, transparent),
        0 18px 38px color-mix(in srgb, var(--ka-violet-ink) 12%, transparent) !important;
    transform: translateY(-4px);
}

/* The corner disc behind the watermark: emerald tint becomes rose. */
html[data-design="2"] body .ethical-item::after {
    background: color-mix(in srgb, #e07fa4 12%, transparent) !important;
}

html[data-design="2"] body .ethical-item:hover::after {
    background: color-mix(in srgb, #e07fa4 20%, transparent) !important;
}

/* The watermark art is sage green; rotate its hue into the violet range rather
   than replacing the files. multiply blending keeps it a watermark. */
html[data-design="2"] body .ethical-icon img {
    filter: hue-rotate(250deg) saturate(0.85) brightness(0.98) !important;
}

html[data-design="2"] body .ethical-icon {
    opacity: 0.34 !important;
}

html[data-design="2"] body .ethical-item:hover .ethical-icon {
    opacity: 0.46 !important;
}

/* Numbers: violet, in the poster face, at full strength — at 50% gold they
   read as a smudge rather than an index. */
html[data-design="2"] body .ethical-number {
    font-family: var(--ka-poster) !important;
    font-weight: 600 !important;
    font-size: 2rem !important;
    letter-spacing: var(--ka-track-label) !important;
    color: var(--ka-violet) !important;
    opacity: 1 !important;
}

html[data-design="2"] body .ethical-text strong,
html[data-design="2"] body .ethical-text b {
    color: var(--ka-violet-ink);
}

/* ==========================================================================
   Контакти — rose hero

   The page reuses .about-hero, so everything here is pinned to the contacts
   slug as well; otherwise «Про нас» would take the wave too.
   ========================================================================== */

html[data-design="2"] body.page-slug-kontakty .contacts-hero,
html[data-design="2"] body.page-slug-kontakty .about-hero {
    position: relative;
    overflow: hidden;
    background-color: #fff7fb !important;
    background-image:
        linear-gradient(
            170deg,
            color-mix(in srgb, #fff7fb 88%, transparent) 0%,
            color-mix(in srgb, #fff7fb 62%, transparent) 55%,
            color-mix(in srgb, #fff7fb 42%, transparent) 100%
        ),
        url("assets/images/hero-rose.webp") !important;
    background-size: auto, cover !important;
    background-position: center, center 55% !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* The emerald/gold glows this hero shipped with become a slow rose shimmer. */
html[data-design="2"] body.page-slug-kontakty .about-hero::before {
    top: -50%;
    left: -50%;
    right: auto;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(
            circle at 30% 40%,
            color-mix(in srgb, #e07fa4 22%, transparent) 0%,
            transparent 55%
        ),
        radial-gradient(
            circle at 70% 60%,
            color-mix(in srgb, #cdabee 26%, transparent) 0%,
            transparent 55%
        );
    animation: ka-rose-drift 34s linear infinite;
    z-index: 0;
}

@keyframes ka-rose-drift {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

html[data-design="2"] body.page-slug-kontakty .about-hero-content,
html[data-design="2"] body.page-slug-kontakty .contacts-hero > * {
    position: relative;
    z-index: 1;
}

/* Keep the hero rule in the shared gold accent. */
html[data-design="2"] body.page-slug-kontakty .contacts-hero .section-divider-gold {
    background: linear-gradient(
        90deg,
        transparent,
        var(--gold-muted, #d4ad60),
        transparent
    ) !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="2"] body.page-slug-kontakty .about-hero::before {
        animation: none;
    }
}

/* ==========================================================================
   Книги · «Фундаментальна література» — homepage palette

   The section shipped as an emerald slab with gold headings and white body
   copy. Repainted to the homepage ground: rose paper, gold as the connecting
   rule, dark violet as the text colour.
   ========================================================================== */

html[data-design="2"] body.page-slug-knygy .books-list-section {
    background-color: #fff7fb !important;
    background-image: radial-gradient(
        circle at 2px 2px,
        color-mix(in srgb, var(--ka-gold-rule) 16%, transparent) 1px,
        transparent 0
    );
    background-size: 40px 40px;
    color: var(--ka-violet-ink) !important;
    border-block: 1px solid color-mix(in srgb, var(--ka-gold-rule) 30%, transparent);
}

html[data-design="2"] body.page-slug-knygy .books-list-section h2 {
    color: var(--ka-violet-dim) !important;
}

/* Cards: white on the rose ground, gold hairline, gold notch, violet lift. */
html[data-design="2"] body.page-slug-knygy .book-card-mini {
    background: color-mix(in srgb, #ffffff 88%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ka-gold-rule) 35%, transparent) !important;
    border-radius: 0 !important;
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ka-gold-rule) 75%, transparent) !important;
}

html[data-design="2"] body.page-slug-knygy .book-card-mini:hover {
    background: #ffffff !important;
    transform: translateY(-5px);
    box-shadow:
        inset 2px 0 0 var(--ka-gold-lit),
        0 18px 34px color-mix(in srgb, var(--ka-violet-ink) 12%, transparent) !important;
}

html[data-design="2"] body.page-slug-knygy .book-card-mini h4 {
    color: var(--ka-violet-ink) !important;
}

html[data-design="2"] body.page-slug-knygy .book-card-mini .book-year {
    color: var(--ka-gold-rule) !important;
    opacity: 1;
    font-weight: 600;
}

html[data-design="2"] body.page-slug-knygy .book-card-mini .book-description {
    color: color-mix(in srgb, var(--ka-violet-ink) 78%, transparent) !important;
    opacity: 1;
}

/* The flourish divider is a light-on-dark artwork: on white it disappeared,
   so it is knocked back to a gold rule of the same weight. */
html[data-design="2"] body.page-slug-knygy .book-icon {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--ka-gold-rule) 65%, transparent),
        transparent
    );
    margin: 4px 0 8px !important;
}

html[data-design="2"] body.page-slug-knygy .book-icon img {
    display: none !important;
}

/* Citation card at the foot of the section. */
html[data-design="2"] body.page-slug-knygy .books-citation {
    background: color-mix(in srgb, #ffffff 88%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ka-gold-rule) 35%, transparent) !important;
    border-left: 3px solid var(--ka-violet) !important;
    border-radius: 0 !important;
    color: var(--ka-violet-ink) !important;
}

html[data-design="2"] body.page-slug-knygy .books-citation__label {
    color: var(--ka-gold-rule) !important;
}

html[data-design="2"] body.page-slug-knygy .books-citation__ref {
    color: color-mix(in srgb, var(--ka-violet-ink) 82%, transparent) !important;
}

html[data-design="2"] body.page-slug-knygy .books-citation__link {
    color: var(--ka-violet-dim) !important;
    text-decoration-color: color-mix(in srgb, var(--ka-gold-rule) 60%, transparent);
}

html[data-design="2"] body.page-slug-knygy .books-citation__link:hover,
html[data-design="2"] body.page-slug-knygy .books-citation__link:focus-visible {
    color: var(--ka-violet-ink) !important;
    text-decoration-color: var(--ka-gold-rule);
}

/* ==========================================================================
   Психосоматика — rose hero with centered copy

   Keep the page's own rose atmosphere; only the copy alignment follows the
   centered, text-led composition used by «Розтяжки».
   ========================================================================== */

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type {
    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 5vw, 80px) !important;
    min-height: 0 !important;
    background-color: #fff7fb !important;
    background-image:
        linear-gradient(
            100deg,
            color-mix(in srgb, #fff7fb 90%, transparent) 0%,
            color-mix(in srgb, #fff7fb 66%, transparent) 48%,
            color-mix(in srgb, #fff7fb 40%, transparent) 100%
        ),
        url("assets/images/hero-rose.webp") !important;
    background-size: auto, cover !important;
    background-position: center, center 58% !important;
    background-repeat: no-repeat, no-repeat !important;
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type h2 {
    width: 100%;
    /* The first word is wider than 15ch in Oswald. Give it room so the
       unbreakable line stays centered instead of overflowing to the right. */
    max-width: 18ch !important;
    margin-inline: auto !important;
    color: var(--ka-violet-ink) !important;
    font-size: clamp(2.6rem, 4.4vw, 4.4rem) !important;
    text-align: center;
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type p {
    color: color-mix(in srgb, var(--ka-violet-ink) 76%, transparent) !important;
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type figure,
html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type > .wp-block-columns > :last-child {
    display: none !important;
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type > .wp-block-columns {
    grid-template-columns: minmax(0, 1fr) !important;
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type > .wp-block-columns > :first-child {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type > .wp-block-columns > :first-child::before {
    content: "Метод БЕСТ" !important;
    display: block !important;
    margin-bottom: 20px;
    color: var(--gold-ink, #8c6a22);
    font-family: var(--sans-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type p {
    max-width: 46ch !important;
    margin-inline: auto !important;
    text-align: center;
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-image:
        radial-gradient(
            60% 80% at 22% 40%,
            color-mix(in srgb, #e07fa4 22%, transparent) 0%,
            transparent 62%
        ),
        radial-gradient(
            55% 75% at 78% 62%,
            color-mix(in srgb, #cdabee 26%, transparent) 0%,
            transparent 60%
        );
    background-size: 160% 160%, 150% 150%;
    background-repeat: no-repeat;
    animation: ka-soft-drift 34s ease-in-out infinite alternate;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
}

@keyframes ka-soft-drift {
    from { background-position: 0% 40%, 100% 60%; }
    to   { background-position: 30% 60%, 70% 35%; }
}

html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type > .wp-block-columns {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="2"] body.page-slug-psyhosomatyka .entry-content > .premium-gradient:first-of-type::after {
        animation: none;
    }
}

/* ==========================================================================
   Курси — new hero plate

   The plate (assets/images/courses-hero-book-v2.png) already carries its own
   emerald ground with the book and hands on the right and an empty left half,
   so it needs no dark scrim over the artwork — only a soft one on the left
   where the copy sits.
   ========================================================================== */

html[data-design="2"] body.page-slug-kursy .courses-hero {
    background:
        linear-gradient(
            90deg,
            rgba(6, 70, 53, 0.72) 0%,
            rgba(6, 70, 53, 0.42) 32%,
            rgba(6, 70, 53, 0.08) 52%,
            transparent 66%
        ),
        url("assets/images/courses-hero-book-v2.png") !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
    padding: clamp(88px, 9vw, 130px) 0 !important;
    padding-inline: clamp(24px, 5vw, 80px) !important;
}

@media (max-width: 900px) {
    /* Narrow screens crop the plate to the book; the copy needs a flat scrim
       over the whole width to stay readable. */
    html[data-design="2"] body.page-slug-kursy .courses-hero {
        background:
            linear-gradient(rgba(6, 70, 53, 0.78), rgba(6, 70, 53, 0.78)),
            url("assets/images/courses-hero-book-v2.png") !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* ==========================================================================
   Polish pass — contrast, full-bleed sections, motion

   Three separate jobs, kept together because they were done in one review:

   1. Contrast. Audited every text node on every page against its effective
      background (WCAG AA: 4.5 normal, 3.0 large). Everything below is a
      measured failure, not a guess — the ratio is in each comment.
   2. Full-bleed. Astra caps #content > .ast-container at 1400px, so every
      section with its own background stopped short of the viewport and left
      pale gutters. Sections now run edge to edge; their content keeps the
      1400px measure.
   3. Motion. Scroll-driven reveals, a sheen on the buttons, and a few small
      drifting sparks. All CSS — no JavaScript, per docs/CONSTRAINTS.md — and
      all inside @media (prefers-reduced-motion: no-preference).
   ========================================================================== */

body {
    /* Gold at #c09645 measures 2.73:1 on white — fine as a rule or a border,
       far below AA as small text. This is the same hue darkened for type. */
    --ka-gold-ink: #8a6a1e;
}

/* ==========================================================================
   1. Contrast fixes
   ========================================================================== */

/* Книги: years and the citation label, gold on white — 2.73:1. */
html[data-design="2"] body.page-slug-knygy .book-card-mini .book-year,
html[data-design="2"] body.page-slug-knygy .books-citation__label {
    color: var(--ka-gold-ink) !important;
}

/* Книги: pull-quote attribution, #d4ad60 on white — 2.11:1 at 29px. */
html[data-design="2"] body .quote-author-label {
    color: var(--ka-gold-ink) !important;
}

/* Курси: organisers label, #8c6a22 on sage — 4.46:1, just under AA. */
html[data-design="2"] body .courses-organisers__label {
    color: #7d5f1b !important;
}

/* Головна, violet panel: body copy at 78% ivory measured 4.42:1. */
body.home .home-glass-card p {
    color: color-mix(in srgb, var(--k-panel-ink) 90%, transparent) !important;
}

/* Головна, violet panel: the gold accent line, #eec06a on violet — 3.78:1
   at 20px, which is under the 4.5 threshold for normal-size text. */
body.home .home-glass-card p:last-child {
    color: #f6ddab !important;
}

/* ==========================================================================
   Header and footer styles across all pages
   ========================================================================== */

html[data-design="2"] body .ast-main-header-wrap,
html[data-design="2"] body .main-header-bar,
html[data-design="2"] body .ast-primary-header-bar {
    padding: 4px 0 !important;
    background-color: #f5f3e6 !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(212, 173, 96, 0.15) !important;
    box-shadow: none !important;
}

html[data-design="2"] body .main-header-menu > .menu-item > a,
html[data-design="2"] body .main-header-menu .menu-item a.menu-link {
    font-family: var(--sans-body) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--emerald-deep) !important;
    border-right: none !important;
}

html[data-design="2"] body .main-header-menu > .menu-item > a::before {
    content: none !important;
    display: none !important;
}

html[data-design="2"] body .main-header-menu > .menu-item:hover > a,
html[data-design="2"] body .main-header-menu > .menu-item.current-menu-item > a {
    color: var(--gold-ink) !important;
}

/* ==========================================================================
   2. Full-bleed sections

   The cap moves off the page wrapper and onto each section's own inner
   container, so backgrounds reach the viewport edges while the copy keeps
   its measure.
   ========================================================================== */

html[data-design="2"] body #content > .ast-container {
    max-width: 100% !important;
    padding-inline: 0 !important;
}

html[data-design="2"] body #primary,
html[data-design="2"] body .site-main {
    width: 100%;
    max-width: 100% !important;
}

/* Every top-level band gets the page gutter back as its own padding. */
html[data-design="2"] body .site-main > section,
html[data-design="2"] body .site-main > .entry-content > section,
html[data-design="2"] body .site-main > .entry-content > .wp-block-group,
html[data-design="2"] body .site-main > .entry-content > .premium-gradient,
html[data-design="2"] body .site-main > .entry-content > .bg-subtle-ivory,
html[data-design="2"] body .site-main > .entry-content > .bg-full-emerald {
    padding-inline: clamp(20px, 4vw, 56px);
}

/* …and its content keeps the 1400px measure it had before. */
html[data-design="2"] body .site-main > section > .ast-container,
html[data-design="2"] body .site-main > .entry-content > section > .ast-container,
html[data-design="2"] body .site-main > .entry-content > .wp-block-group > .ast-container {
    width: min(1400px, 100%);
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* ==========================================================================
   3. Motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

    /* --- scroll reveals ---------------------------------------------------
       Progressive enhancement: browsers without scroll-driven animations
       simply show the content, which is the correct fallback for decoration.
       The (animation-range: entry) test is required — some engines report
       partial support for animation-timeline alone. */
    @supports ((animation-timeline: view()) and (animation-range: entry)) {

        @keyframes ka-rise {
            from { opacity: 0; transform: translateY(26px); }
            to   { opacity: 1; transform: none; }
        }

        html[data-design="2"] body .premium-card,
        html[data-design="2"] body .direction-card,
        html[data-design="2"] body .ethical-item,
        html[data-design="2"] body .book-card-mini,
        html[data-design="2"] body .advantage-card,
        html[data-design="2"] body .certificate-card,
        html[data-design="2"] body .review-card,
        html[data-design="2"] body .day-block,
        body.home .home-direction-card,
        body.home .home-glass-card,
        body.home .hero-candidate-static {
            animation: ka-rise auto linear both;
            animation-timeline: view();
            animation-range: entry 8% entry 46%;
        }

        /* Section headings and their copy rise a beat before the cards. */
        html[data-design="2"] body .site-main :is(h2, h3):not(.home-hero-content *),
        html[data-design="2"] body .site-main .subtitle {
            animation: ka-rise auto linear both;
            animation-timeline: view();
            animation-range: entry 4% entry 34%;
        }
    }

    /* --- button sheen -----------------------------------------------------
       A single wide highlight sweeping across on hover. Transform on a
       pseudo-element, so it stays on the compositor. */
    html[data-design="2"] body .wp-block-button__link,
    html[data-design="2"] body .contact-primary__btn,
    html[data-design="2"] body .courses-enroll__btn,
    body.home .wp-block-button__link {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    html[data-design="2"] body .wp-block-button__link::after,
    html[data-design="2"] body .contact-primary__btn::after,
    html[data-design="2"] body .courses-enroll__btn::after,
    body.home .wp-block-button__link::after {
        content: '';
        position: absolute;
        inset: 0 auto 0 -60%;
        width: 45%;
        background: linear-gradient(
            100deg,
            transparent,
            rgba(255, 255, 255, 0.42),
            transparent
        );
        transform: translateX(0);
        transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
        pointer-events: none;
        z-index: -1;
    }

    html[data-design="2"] body .wp-block-button__link:hover::after,
    html[data-design="2"] body .wp-block-button__link:focus-visible::after,
    html[data-design="2"] body .contact-primary__btn:hover::after,
    html[data-design="2"] body .courses-enroll__btn:hover::after,
    body.home .wp-block-button__link:hover::after,
    body.home .wp-block-button__link:focus-visible::after {
        transform: translateX(360%);
    }

    /* --- sparks -----------------------------------------------------------
       Three small points of light drifting inside dark bands. Drawn as one
       painted layer of radial gradients, animated by background-position, so
       there is no extra DOM and nothing reflows. */
    @keyframes ka-sparks {
        from { background-position: 12% 82%, 62% 24%, 86% 66%; opacity: 0.55; }
        50%  { opacity: 0.95; }
        to   { background-position: 18% 22%, 55% 78%, 78% 18%; opacity: 0.55; }
    }

    html[data-design="2"] body .bg-full-emerald,
    html[data-design="2"] body .premium-gradient:not(:first-child),
    html[data-design="2"] body .method-cta,
    body.home .wp-block-columns.home-spaces-grid {
        position: relative;
        isolation: isolate;
    }

    html[data-design="2"] body .bg-full-emerald::before,
    html[data-design="2"] body .method-cta::before,
    body.home .wp-block-columns.home-spaces-grid::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background-image:
            radial-gradient(circle, rgba(238, 192, 106, 0.9) 0 1.5px, transparent 2px),
            radial-gradient(circle, rgba(255, 253, 248, 0.75) 0 1px, transparent 1.6px),
            radial-gradient(circle, rgba(238, 192, 106, 0.7) 0 1.2px, transparent 1.8px);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        animation: ka-sparks 18s ease-in-out infinite alternate;
    }
}