/* ==========================================================================
   Головна · поточна презентаційна версія для локального стенду 8085.

   Scope: everything here hangs off body.home, so the rest of this theme (all
   inner pages) keeps the shipped variant-2 emerald/gold look. Loaded from
   functions.php on is_front_page() only.

   Constraint: the homepage content lives in the DB as Gutenberg blocks and is
   not editable (docs/CONSTRAINTS.md). Nothing here changes markup — only what
   paints. Devices that need extra DOM (ticker, halftone, grain) are drawn with
   pseudo-elements; no JavaScript is used, per the same document.

   Palette and type ported from the Next.js "variant B" poster study.
   ========================================================================== */

body.home {
    /* ground */
    --k-bone: #FBF8F1;
    --k-bone-warm: #EFF3EF;
    --k-lilac: #EFF3EF;

    /* primary accent */
    --k-violet: #064635;
    --k-violet-hot: #052C22;
    --k-violet-ink: #052C22;

    /* secondary accents */
    --k-rose: #D4AD60;
    --k-blush: #F7F3E9;
    --k-sky: #8C6A22;
    --k-mist: #EFF3EF;

    /* kept from variant 2 */
    --k-emerald: #064635;
    --k-gold: #D4AD60;

    /* text */
    --k-ink: #2D2E2E;
    --k-ink-soft: #505252;

    --k-hairline: rgba(6, 70, 53, 0.15);
    --k-rule: rgba(212, 173, 96, 0.25);

    --k-poster: 'Cormorant Garamond', serif;
    --k-display: 'Cormorant Garamond', serif;
    --k-mono: 'Inter', sans-serif;

    background-color: var(--k-bone) !important;
    color: var(--k-ink);
}

/* Printed-poster grain over the whole page. Fixed, non-interactive, multiply
   so it darkens the bone ground without touching text colour. */
body.home::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 80;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.home ::selection {
    background: var(--k-violet-hot);
    color: var(--k-bone);
}

/* ==========================================================================
   Header — hairline rule, mono nav, numbered items via CSS counters
   ========================================================================== */

body.home .ast-main-header-wrap,
body.home .main-header-bar,
body.home .ast-primary-header-bar {
    background-color: #f5f3e6 !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(212, 173, 96, 0.2) !important;
    box-shadow: none !important;
}

body.home .site-title,
body.home .site-title a {
    font-family: var(--k-poster) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--k-emerald) !important;
}

body.home .main-header-menu {
    counter-reset: k-nav;
}

body.home .main-header-menu > .menu-item > a,
body.home .main-header-menu .menu-item a.menu-link {
    font-family: var(--k-mono) !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--k-emerald) !important;
}

body.home .main-header-menu > .menu-item {
    counter-increment: k-nav;
}

/* "01" prefixes, decorative counter. */
body.home .main-header-menu > .menu-item > a::before {
    content: counter(k-nav, decimal-leading-zero);
    margin-right: 0.6em;
    color: var(--k-gold);
    font-variant-numeric: tabular-nums;
}

body.home .main-header-menu > .menu-item:hover > a,
body.home .main-header-menu > .menu-item.current-menu-item > a,
body.home .main-header-menu > .menu-item.current_page_item > a {
    color: var(--k-gold-ink) !important;
}

/* ==========================================================================
   Hero — bone ground, left-hung poster type, brand ticker along the base
   ========================================================================== */

/* Rose/violet 3D wave from the brand social kit, cropped out of the banner's
   clean lower band (assets/images/hero-rose.webp). The scrim is heavy on the
   left, where the poster headline sits, and thins out to the right so the waves
   stay visible — ink type on bare mid-tone rose does not hold up. */
body.home .home-hero {
    background-color: #064635 !important;
    background-image: linear-gradient(135deg, #052c22 0%, #064635 50%, #0c2b21 100%) !important;
    border-bottom: 1px solid var(--k-gold);
    color: var(--k-bone) !important;
    padding: clamp(72px, 9vw, 140px) 0 0 !important;
    text-align: left;
}

/* Variant 2's rotating gold aura is off — the wave carries the texture now. */
body.home .home-hero::before {
    display: none;
}

body.home .home-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px clamp(64px, 8vw, 108px);
}

/* WP's constrained layout gives every direct child `margin-inline: auto`, which
   centred the capped-width headline and lead against the flush-left rules and
   button. Hang them all on the same left edge. */
body.home .home-hero-content > * {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.home .home-hero-content .subtitle {
    font-family: var(--k-mono) !important;
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--k-gold) !important;
    animation: none;
    margin-bottom: 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(212, 173, 96, 0.4);
}

body.home .home-hero-content h1,
body.home .home-hero-content h2 {
    font-family: var(--k-poster) !important;
    font-weight: 600;
    font-size: clamp(2.9rem, 1.2rem + 7vw, 8rem) !important;
    line-height: 0.9;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    color: var(--k-bone) !important;
    text-shadow: none;
    max-width: 15ch;
    margin-bottom: 32px;
    animation: none;
}

body.home .home-hero-content .lead {
    font-family: var(--sans-body);
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
    line-height: 1.6;
    color: rgba(251, 248, 241, 0.9) !important;
    max-width: 46ch;
    margin-bottom: 36px;
    animation: none;
}

body.home .home-hero .wp-block-buttons {
    justify-content: flex-start;
    margin-top: 0;
}

/* No ticker along the hero base — dropped on review, the hero closes on the
   button and the section rule instead. */

/* ==========================================================================
   Buttons — square, violet, hard hover
   ========================================================================== */

body.home .wp-block-button__link {
    background-color: var(--k-emerald) !important;
    border: 1px solid var(--k-emerald) !important;
    color: var(--k-bone) !important;
    border-radius: 0 !important;
    font-family: var(--k-mono) !important;
    font-size: 0.8125rem !important;
    font-weight: 500;
    letter-spacing: 0.12em;
    padding: 16px 40px !important;
    transition: all 0.3s ease;
    animation: none;
}

body.home .wp-block-button__link:hover {
    background-color: var(--k-gold) !important;
    border-color: var(--k-gold) !important;
    color: var(--k-emerald) !important;
}

body.home .home-hero .wp-block-button__link {
    background-color: var(--k-gold) !important;
    border-color: var(--k-gold) !important;
    color: var(--k-emerald) !important;
    padding: 17px 44px !important;
    font-size: 0.875rem !important;
    font-weight: 600;
}

body.home .home-hero .wp-block-button__link:hover {
    background-color: transparent !important;
    border-color: var(--k-gold) !important;
    color: var(--k-gold) !important;
}

body.home .section-divider-gold {
    background: var(--k-rule);
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
}

/* ==========================================================================
   Intro — «Суть Методу»: uncropped portrait beside the copy
   ========================================================================== */

body.home .home-intro-section {
    background-color: var(--k-bone) !important;
    padding: clamp(72px, 8vw, 120px) 0;
    border-bottom: 1px solid var(--k-hairline);
}

body.home .hero-candidate-static {
    position: relative;
    align-self: center;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    background: transparent;
}

body.home .hero-candidate-static::before {
    content: none;
    display: none;
}

body.home .home-intro-image-col img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

/* Glass card loses the glass: hard panel on the warm bone, one hairline. */
body.home .home-glass-card {
    background: var(--k-bone-warm) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--k-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(32px, 4vw, 56px) !important;
}

body.home .home-glass-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--k-violet) !important;
}

/* «Суть Методу» in the same poster face as the hero — Prata read as a leftover
   from the old serif system next to it. */
body.home .home-glass-card h2 {
    font-family: var(--k-poster) !important;
    font-weight: 600;
    font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem);
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--k-violet-ink) !important;
}

body.home .home-glass-card p {
    color: var(--k-ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
}

body.home .home-glass-card p:last-child {
    color: var(--k-violet) !important;
    font-weight: 500;
}

/* ==========================================================================
   Directions — halftone field, outlined section head, numbered hard cards
   ========================================================================== */

body.home .home-directions-section {
    background-color: var(--k-lilac) !important;
    background-image: radial-gradient(
        color-mix(in srgb, var(--k-violet) 22%, transparent) 1px,
        transparent 1.1px
    );
    background-size: 9px 9px;
    padding: clamp(80px, 9vw, 130px) 0;
    border-bottom: 1px solid var(--k-ink);
}

/* The recurring poster device: the section head is drawn as outline only. */
body.home .home-directions-section h2 {
    font-family: var(--k-poster) !important;
    font-weight: 600;
    font-size: clamp(2.6rem, 1rem + 6vw, 6.5rem);
    line-height: 0.9;
    text-transform: uppercase;
    text-align: left;
    color: transparent !important;
    -webkit-text-stroke: 1.4px var(--k-violet-ink);
    margin: 0 auto clamp(48px, 6vw, 80px);
    max-width: 1160px;
    padding: 0 20px;
}

body.home .wp-block-columns.home-directions-grid {
    counter-reset: k-card;
    gap: 0 !important;
    border-top: 1px solid var(--k-ink);
    border-left: 1px solid var(--k-ink);
}

body.home .home-directions-grid > .wp-block-column {
    counter-increment: k-card;
    margin: 0 !important;
}

body.home .home-direction-card {
    position: relative;
    background: var(--k-bone) !important;
    backdrop-filter: none;
    border: 0 !important;
    border-right: 1px solid var(--k-ink) !important;
    border-bottom: 1px solid var(--k-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: clamp(32px, 4vw, 52px) !important;
    text-align: left;
    align-items: flex-start;
    height: 100%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.home .home-direction-card::before {
    content: none;
    font-family: var(--k-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    color: var(--k-violet);
    margin-bottom: 22px;
}

body.home .home-direction-card:hover {
    transform: none;
    box-shadow: none;
    background: var(--k-violet-hot) !important;
}

body.home .home-direction-card .icon-wrapper {
    background: transparent;
    border-radius: 0;
    width: 84px;
    height: 84px;
    margin-bottom: 22px;
    justify-content: flex-start;
}

body.home .home-direction-card:hover .icon-wrapper {
    background: transparent;
}

/* The glass-and-gold set, cut from the labelled source sheet — one visual
   language across the whole site. The earlier medallions and the frosted-glass
   SVGs stay in assets/icons/ in case we go back. Overrides the same src-matched swap style.css does for variant 2:
   the markup (src, alt, dimensions) is DB content and stays untouched, only
   what paints changes. */
body.home .home-direction-card img[src*="icon_manual.png"] {
    content: url("assets/icons/glass-gold/manual-correction.webp");
}
body.home .home-direction-card img[src*="icon_psycho.png"] {
    content: url("assets/icons/glass-gold/psychosomatic.webp");
}
body.home .home-direction-card img[src*="icon_energy.png"] {
    content: url("assets/icons/glass-gold/bioenergy.webp");
}

body.home .home-direction-card .premium-icon img {
    filter: drop-shadow(0 6px 14px rgba(42, 19, 69, 0.14));
    transition: filter 0.3s ease, transform 0.3s ease;
}

body.home .home-direction-card:hover .premium-icon img {
    filter: drop-shadow(0 8px 18px rgba(42, 19, 69, 0.3));
    transform: translateY(-3px);
}

body.home .home-direction-card h3 {
    font-family: var(--k-poster) !important;
    font-weight: 600;
    font-size: clamp(1.3rem, 1rem + 0.8vw, 1.9rem);
    line-height: 1;
    text-transform: uppercase;
    color: var(--k-ink) !important;
    margin-bottom: 14px;
}

body.home .home-direction-card p {
    color: var(--k-ink-soft);
    font-size: 1rem;
    line-height: 1.65;
}

body.home .home-direction-card:hover::before,
body.home .home-direction-card:hover h3,
body.home .home-direction-card:hover p {
    color: var(--k-bone) !important;
}

/* ==========================================================================
   Spaces — testimonials on a violet-ink panel
   ========================================================================== */

body.home .home-spaces-section {
    background: var(--k-bone) !important;
    padding: clamp(80px, 9vw, 130px) 24px;
}

body.home .home-spaces-section h2 {
    font-family: var(--k-display) !important;
    font-weight: 400;
    font-size: clamp(2.4rem, 1.4rem + 3.4vw, 5rem);
    line-height: 0.96;
    letter-spacing: -0.015em;
    color: var(--k-violet-ink) !important;
    text-transform: none;
}

body.home .wp-block-columns.home-spaces-grid {
    border-top: 1px solid var(--k-ink);
    border-bottom: 1px solid var(--k-ink);
}

body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
    background: var(--k-violet-ink) !important;
}

body.home .home-spaces-grid > .wp-block-column:nth-child(2) .home-testimonial-card,
body.home .home-spaces-grid > .wp-block-column:nth-child(3) .home-testimonial-card {
    border-left: 1px solid var(--k-ink) !important;
}

body.home .home-spaces-grid > .wp-block-column:nth-child(2) .home-testimonial-card {
    border-bottom: 1px solid var(--k-ink) !important;
}

body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card p {
    font-family: var(--k-display), Georgia, serif;
    color: var(--k-bone);
}

body.home .home-testimonial-card p {
    font-style: normal;
    color: var(--k-ink-soft);
}

/* ==========================================================================
   Footer
   ========================================================================== */

body.home .site-footer,
body.home .ast-small-footer,
body.home .site-below-footer-wrap {
    background-color: var(--k-bone-warm) !important;
    border-top: 1px solid var(--k-ink);
    color: var(--k-ink-soft) !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 991px) {
    body.home .home-hero-content h1,
    body.home .home-hero-content h2 {
        max-width: none;
    }

    body.home .wp-block-columns.home-directions-grid {
        border-left: 0;
    }

    body.home .home-direction-card {
        border-right: 0 !important;
        border-left: 1px solid var(--k-ink) !important;
    }

    body.home .hero-candidate-static::before {
        inset: 12px -12px -12px 12px;
    }
}

@media (max-width: 767px) {
    /* Narrow screens crop the wave to its busiest part; flatten the scrim so
       the headline still wins. */
    body.home .home-hero {
        background-image:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--k-bone) 88%, transparent),
                color-mix(in srgb, var(--k-bone) 62%, transparent)
            ),
            url("assets/images/hero-rose.webp") !important;
    }
}

/* ==========================================================================
   Stitch layer — «БЕСТ Social & Brand Visual System», screens
   «Variant 2: Mystical Anatomy» / «Variant 3: Event Billboard».

   Ported from that study: its violet/gold/paper palette, EB Garamond display
   with a gold italic accent, gold hairline rules between nav items, the 40px
   gold dot grid, the thin page frame, the decorative gold rings and the
   "signal row" card treatment (gold notch left, lift on hover).

   Layered after the poster rules above so it wins where the two disagree.
   ========================================================================== */

body.home {
    --k-gold-rule: #D4AD60;
    --k-gold-lit: #D4AD60;
    --k-paper: #FBF8F1;
    --k-panel: #064635;
    --k-panel-dim: #052C22;
    --k-panel-ink: #FBF8F1;
    --k-frame: #EFF3EF;
    --k-serif: 'Cormorant Garamond', serif;
}

/* Thin inner frame around the viewport — disabled to remove light side strips */
body.home::before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* ==========================================================================
   Header — gold hairlines instead of the hard ink rule
   ========================================================================== */

body.home .ast-main-header-wrap,
body.home .main-header-bar,
body.home .ast-primary-header-bar {
    border-bottom: 1px solid color-mix(in srgb, var(--k-gold-rule) 35%, transparent) !important;
}

body.home .main-header-menu > .menu-item:not(:last-child) > a {
    border-right: 1px solid color-mix(in srgb, var(--k-gold-rule) 40%, transparent);
}

body.home .main-header-menu > .menu-item > a::before {
    color: var(--k-gold-rule);
}

/* ==========================================================================
   Hero — decorative gold rings, gold eyebrow rule
   ========================================================================== */

/* Two thin orbital rings, the study's ornament. Kept as two separate
   pseudo-elements: a box-shadow on a round element paints a filled disc, not a
   second ring. */
body.home .home-hero::after,
body.home .home-hero::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    background: none;
    border: 1px solid color-mix(in srgb, var(--k-gold-rule) 26%, transparent);
    pointer-events: none;
    z-index: 1;
    animation: none;
    mask-image: none;
    -webkit-mask-image: none;
}

body.home .home-hero::after {
    top: -90px;
    right: -90px;
    width: 380px;
    height: 380px;
}

body.home .home-hero::before {
    top: auto;
    left: auto;
    bottom: -120px;
    right: 190px;
    width: 260px;
    height: 260px;
    border-color: color-mix(in srgb, var(--k-gold-rule) 18%, transparent);
}

body.home .home-hero-content .subtitle {
    color: var(--k-panel-dim) !important;
    border-bottom-color: color-mix(in srgb, var(--k-gold-rule) 55%, transparent);
}

/* ==========================================================================
   Intro — the study's violet editorial panel
   ========================================================================== */

/* 40px gold dot grid, the study's page texture. */
body.home .home-intro-section,
body.home .home-spaces-section {
    background-image: radial-gradient(
        circle at 2px 2px,
        color-mix(in srgb, var(--k-gold-rule) 18%, transparent) 1px,
        transparent 0
    ) !important;
    background-size: 40px 40px !important;
    background-color: var(--k-paper) !important;
}

body.home .home-glass-card {
    background: var(--k-panel) !important;
    border: 0 !important;
    box-shadow: 0 24px 48px rgba(58, 30, 87, 0.18) !important;
    position: relative;
    overflow: hidden;
}

/* Orbital ring, cropped by the panel — the recurring ornament of the study. */
body.home .home-glass-card::after {
    content: '';
    position: absolute;
    right: -110px;
    bottom: -140px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--k-gold-lit) 30%, transparent);
    pointer-events: none;
}

body.home .home-glass-card:hover {
    border-color: transparent !important;
}

body.home .home-glass-card h2 {
    font-family: var(--k-serif) !important;
    font-weight: 600;
    font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.6rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--k-panel-ink) !important;
}

body.home .home-glass-card p {
    color: color-mix(in srgb, var(--k-panel-ink) 78%, transparent);
    position: relative;
    z-index: 1;
}

body.home .home-glass-card p:last-child {
    color: var(--k-gold-lit) !important;
    font-family: var(--k-serif);
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 400;
}

/* ==========================================================================
   Directions — "signal rows": gold notch, lift on hover, no violet flood
   ========================================================================== */

body.home .home-directions-section {
    background-color: var(--k-paper) !important;
    background-image: radial-gradient(
        circle at 2px 2px,
        color-mix(in srgb, var(--k-gold-rule) 20%, transparent) 1px,
        transparent 0
    );
    background-size: 40px 40px;
    border-bottom: 1px solid color-mix(in srgb, var(--k-gold-rule) 35%, transparent);
}

/* Outline-only was the poster device, but at this size and weight it did not
   read — solid violet instead. */
body.home .home-directions-section h2 {
    -webkit-text-stroke: 0;
    color: var(--k-panel-dim) !important;
}

/* One box, one scale for all three medallions (their source files are trimmed
   to matching bounds, see the note in the Python that generated them). */
body.home .home-direction-card .icon-wrapper,
body.home .home-direction-card .premium-icon {
    width: 116px !important;
    height: 116px !important;
    margin-bottom: 26px;
}

body.home .home-direction-card .premium-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

body.home .wp-block-columns.home-directions-grid {
    border-top: 1px solid color-mix(in srgb, var(--k-gold-rule) 35%, transparent);
    border-left: 0;
    gap: 24px !important;
}

body.home .home-direction-card {
    background: color-mix(in srgb, #ffffff 62%, transparent) !important;
    border: 0 !important;
    box-shadow:
        inset 2px 0 0 var(--k-gold-rule),
        0 10px 24px rgba(58, 30, 87, 0.06) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.home .home-direction-card::before {
    color: var(--k-gold-rule);
}

/* The medallions are emerald and gold; flooding the card violet on hover
   muddied them. Lift the row instead, the way the study's signal rows do. */
body.home .home-direction-card:hover {
    background: #ffffff !important;
    transform: translateY(-6px);
    box-shadow:
        inset 2px 0 0 var(--k-gold-lit),
        0 18px 34px rgba(58, 30, 87, 0.12) !important;
}

body.home .home-direction-card:hover::before {
    color: var(--k-gold-rule) !important;
}

body.home .home-direction-card:hover h3 {
    color: var(--k-panel) !important;
}

body.home .home-direction-card:hover p {
    color: var(--k-ink-soft) !important;
}

/* ==========================================================================
   Spaces — serif quote in the panel violet
   ========================================================================== */

/* Emerald — the third brand colour, kept alive here so the page is not violet
   and gold end to end. Matches the medallions two sections above. */
body.home .home-spaces-section h2 {
    font-family: var(--k-poster) !important;
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--k-emerald) !important;
}

body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
    background: var(--k-panel) !important;
}

body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card p {
    font-family: var(--k-serif), Georgia, serif;
    font-style: italic;
    color: var(--k-panel-ink);
}

body.home .wp-block-columns.home-spaces-grid,
body.home .home-spaces-grid > .wp-block-column:nth-child(2) .home-testimonial-card,
body.home .home-spaces-grid > .wp-block-column:nth-child(3) .home-testimonial-card {
    border-color: color-mix(in srgb, var(--k-gold-rule) 35%, transparent) !important;
}

/* ==========================================================================
   Buttons and footer pick up the study's violet
   ========================================================================== */

body.home .wp-block-button__link {
    background-color: var(--k-panel) !important;
    border-color: var(--k-panel) !important;
}

body.home .wp-block-button__link:hover {
    background-color: var(--k-panel-dim) !important;
    border-color: var(--k-gold-rule) !important;
}

body.home .home-hero .wp-block-button__link {
    background-color: var(--k-panel) !important;
    border-color: var(--k-panel) !important;
}

body.home .home-hero .wp-block-button__link:hover {
    background-color: transparent !important;
    border-color: var(--k-gold-rule) !important;
    color: var(--k-panel-dim) !important;
}

body.home .site-footer,
body.home .ast-small-footer,
body.home .site-below-footer-wrap {
    background-color: var(--k-frame) !important;
    border-top: 1px solid color-mix(in srgb, var(--k-gold-rule) 35%, transparent);
}

@media (max-width: 991px) {
    body.home .home-direction-card {
        border-left: 0 !important;
    }

    body.home .home-hero::after {
        display: none;
    }
}

/* ==========================================================================
   Typography system — consolidation pass

   Before this block the page carried 18 distinct font/weight/size/tracking
   combinations across four families, including three section headings that
   were all Oswald 72px but with three different letter-spacings, PT Mono in
   two weights, and body text at 15/16/17/19/20px with no scale behind it.

   Four roles, one family each, one weight each:

     display / heading   Oswald 600, uppercase      hero + every section head
     label               PT Mono 400, uppercase     eyebrows, nav, buttons
     body                Inter 400 (500 for emphasis)
     quote               EB Garamond 400 italic     pull-quote and accent line

   Sizes come from one scale below; nothing outside it is used.
   ========================================================================== */

body.home {
    /* type scale — 1.4 ratio off a 16px base, clamped where it must breathe */
    --k-t-label: 0.8125rem;
    --k-t-body: 1rem;
    --k-t-lead: 1.25rem;
    --k-t-card: 1.75rem;
    --k-t-section: clamp(2.4rem, 1.1rem + 4vw, 4.5rem);
    --k-t-display: clamp(2.9rem, 1rem + 7.4vw, 8rem);

    /* one tracking per role */
    --k-track-label: 0.18em;
    --k-track-head: -0.01em;
}

/* Astra's own footer and widget text arrived at 15px in weights 500 and 600,
   two sizes and two weights nothing else on the page uses. Fold them into the
   body role. */
body.home .site-footer,
body.home .site-footer p,
body.home .site-footer span,
body.home .site-footer a,
body.home .ast-small-footer,
body.home .ast-small-footer span,
body.home .ast-small-footer a,
body.home .site-below-footer-wrap span,
body.home .site-below-footer-wrap a {
    font-family: var(--sans-body) !important;
    font-size: var(--k-t-body) !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* --- display: hero headline ---------------------------------------------- */

body.home .home-hero-content h1,
body.home .home-hero-content h2 {
    font-family: var(--k-poster) !important;
    font-weight: 600 !important;
    font-size: var(--k-t-display) !important;
    line-height: 0.9;
    letter-spacing: var(--k-track-head);
    text-transform: uppercase;
}

/* --- heading: every section head, one treatment -------------------------- */

body.home .home-glass-card h2,
body.home .home-directions-section h2,
body.home .home-spaces-section h2 {
    font-family: var(--k-poster) !important;
    font-weight: 600 !important;
    font-size: var(--k-t-section) !important;
    line-height: 0.92 !important;
    letter-spacing: var(--k-track-head) !important;
    text-transform: uppercase !important;
    -webkit-text-stroke: 0;
}

/* Only the colour separates them: violet on paper, ivory on the violet panel,
   emerald to bring the third brand colour back at the foot of the page. */
body.home .home-glass-card h2 {
    color: var(--k-panel-ink) !important;
    font-size: clamp(2.8rem, 1.7rem + 4vw, 5rem) !important;
    font-weight: 700 !important;
}

body.home .home-directions-section h2 {
    color: var(--k-panel-dim) !important;
}

body.home .home-spaces-section h2 {
    color: var(--k-emerald) !important;
}

/* --- heading: card titles, same family, one step down -------------------- */

body.home .home-direction-card h3 {
    font-family: var(--k-poster) !important;
    font-weight: 600 !important;
    font-size: var(--k-t-card) !important;
    line-height: 1 !important;
    letter-spacing: var(--k-track-head) !important;
    text-transform: uppercase !important;
}

/* --- label: eyebrow, nav, buttons, counters ------------------------------
   PT Mono is gone. At 11px with 0.28em tracking it was too thin and too small
   to read, and it was the only reason a fourth family was loaded. Labels now
   run in the same Oswald as the headings, one weight down. */

body.home .home-hero-content .subtitle,
body.home .main-header-menu > .menu-item > a,
body.home .main-header-menu .menu-item a.menu-link,
body.home .wp-block-button__link,
body.home .home-hero .wp-block-button__link {
    font-family: var(--k-poster) !important;
    font-weight: 500 !important;
    font-size: var(--k-t-label) !important;
    letter-spacing: var(--k-track-label) !important;
    text-transform: uppercase !important;
}

body.home .home-direction-card::before,
body.home .main-header-menu > .menu-item > a::before {
    font-family: var(--k-poster);
    font-weight: 500;
    font-size: var(--k-t-label);
    letter-spacing: var(--k-track-label);
}

/* --- body: two weights, two sizes ---------------------------------------- */

body.home .home-hero-content .lead {
    font-family: var(--sans-body) !important;
    font-weight: 400 !important;
    font-size: var(--k-t-lead) !important;
    font-style: normal !important;
    line-height: 1.6;
    letter-spacing: normal;
}

body.home .home-glass-card p,
body.home .home-direction-card p,
body.home .home-testimonial-card p {
    font-family: var(--sans-body) !important;
    font-weight: 400 !important;
    font-size: var(--k-t-body) !important;
    font-style: normal !important;
    line-height: 1.65 !important;
    letter-spacing: normal !important;
}

/* --- quote: the one serif voice, italic only ----------------------------- */

body.home .home-glass-card p:last-child,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card p {
    font-family: var(--k-serif) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    letter-spacing: normal !important;
}

body.home .home-glass-card p:last-child {
    font-size: clamp(1.5rem, 1.35rem + 0.65vw, 1.75rem) !important;
    line-height: 1.5 !important;
}

body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card p {
    font-size: var(--k-t-section) !important;
    line-height: 1.15 !important;
}

/* ==========================================================================
   Spaces — emerald band

   The violet slab plus two small floating quotes read as one hero testimonial
   and two afterthoughts, with a hole in the middle of the right column. The
   three quotes carry equal weight, so they get equal columns, and the band
   goes emerald: the third brand colour finally gets real area, and the page
   closes on a dark chord before the footer.
   ========================================================================== */

body.home .wp-block-columns.home-spaces-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    background: var(--k-emerald);
    border: 0 !important;
    width: min(1160px, 100%);
    margin-inline: auto !important;
}

body.home .home-spaces-grid > .wp-block-column {
    grid-row: auto !important;
}

body.home .home-spaces-grid > .wp-block-column .home-testimonial-card,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
    background: transparent !important;
    min-height: 0 !important;
    padding: clamp(34px, 3.6vw, 56px) !important;
    align-items: flex-start;
    border: 0 !important;
}

/* Hairline gutters inside the band, gold at low strength so they read as
   rules rather than as card edges. */
body.home .home-spaces-grid > .wp-block-column + .wp-block-column .home-testimonial-card {
    border-left: 1px solid color-mix(in srgb, var(--k-gold-lit) 28%, transparent) !important;
}

/* All three quotes in one voice and one size — no more lead quote. */
body.home .home-spaces-grid .home-testimonial-card p,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card p {
    font-family: var(--k-serif) !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: var(--k-t-lead) !important;
    line-height: 1.45 !important;
    letter-spacing: normal !important;
    color: var(--k-panel-ink) !important;
    max-width: 30ch !important;
}

@media (max-width: 991px) {
    body.home .wp-block-columns.home-spaces-grid {
        grid-template-columns: 1fr !important;
    }

    body.home .home-spaces-grid > .wp-block-column + .wp-block-column .home-testimonial-card {
        border-left: 0 !important;
        border-top: 1px solid color-mix(in srgb, var(--k-gold-lit) 28%, transparent) !important;
    }
}

/* Both section heads centred on the page axis. They keep the same 1160px
   measure as the content under them, so "centre" means centre of that column,
   which is the centre of the site. */
body.home .home-directions-section h2,
body.home .home-spaces-section h2 {
    text-align: center !important;
    width: min(1160px, 100%);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   Hero motion

   Two animations there: `rotate-aura`, a radial glow turning once every 25s,
   and `fadeInUp`, the staggered rise of the four hero lines. Both come across;
   the glow turns rose instead of gold.

   The two gold rings move onto .home-hero-content so .home-hero::before is
   free to carry the aura again — a rotating element and a static ring cannot
   share one pseudo-element.
   ========================================================================== */

body.home .home-hero {
    position: relative;
    overflow: hidden;
}

body.home .home-hero::before {
    display: block;
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    border: 0;
    border-radius: 0;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--k-rose) 26%, transparent) 0%,
        transparent 60%
    );
    animation: k-rotate-aura 25s linear infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes k-rotate-aura {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Second rose glow, counter-turning and slower, so the light never settles
   into an obvious single sweep. */
body.home .home-hero::after {
    display: block;
    content: '';
    position: absolute;
    top: -60%;
    right: -60%;
    left: auto;
    bottom: auto;
    width: 190%;
    height: 190%;
    border: 0;
    border-radius: 0;
    background: radial-gradient(
        circle,
        color-mix(in srgb, var(--k-blush) 34%, transparent) 0%,
        transparent 55%
    );
    animation: k-rotate-aura 38s linear infinite reverse;
    z-index: 1;
    pointer-events: none;
}

/* The gold rings, rehoused. */
body.home .home-hero-content {
    position: relative;
    z-index: 2;
}

body.home .home-hero-content::before,
body.home .home-hero-content::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--k-gold-rule) 26%, transparent);
    pointer-events: none;
    z-index: -1;
}

body.home .home-hero-content::before {
    top: -120px;
    right: -80px;
    width: 380px;
    height: 380px;
}

body.home .home-hero-content::after {
    bottom: -60px;
    right: 210px;
    width: 260px;
    height: 260px;
    border-color: color-mix(in srgb, var(--k-gold-rule) 18%, transparent);
}

/* --- staggered entry ----------------------------------------------------- */

@keyframes k-fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

body.home .home-hero-content .subtitle {
    animation: k-fade-in-up 1s ease both !important;
}

body.home .home-hero-content h1,
body.home .home-hero-content h2 {
    animation: k-fade-in-up 1.2s ease 0.2s both !important;
}

body.home .home-hero-content .lead {
    animation: k-fade-in-up 1.2s ease 0.4s both !important;
}

body.home .home-hero .wp-block-button__link {
    animation: k-fade-in-up 1.2s ease 0.6s both !important;
}

@media (prefers-reduced-motion: reduce) {
    body.home .home-hero::before,
    body.home .home-hero::after,
    body.home .home-hero-content .subtitle,
    body.home .home-hero-content h1,
    body.home .home-hero-content h2,
    body.home .home-hero-content .lead,
    body.home .home-hero .wp-block-button__link {
        animation: none !important;
    }
}

/* Header ground: bone #f7f4ee is a warm grey and read green next to the rose
   hero. Clean ivory instead, on the wrap as well as the bar — Astra paints
   both, so setting one leaves a strip of the other. */
body.home .ast-main-header-wrap,
body.home .main-header-bar,
body.home .ast-primary-header-bar,
body.home .ast-primary-header,
body.home #masthead .main-header-bar-wrap {
    background-color: #fffdf8 !important;
}

/* ==========================================================================
   Spaces band — legibility pass

   Solid emerald under italic serif at 20px was hard to read. Three changes:
   the emerald goes translucent so the lilac dot ground shows through and the
   block stops reading as a slab, the quotes go up two steps in size, and each
   card gets a gold quote mark as an ornament above the text.
   ========================================================================== */

body.home .wp-block-columns.home-spaces-grid {
    background: color-mix(in srgb, var(--k-emerald) 86%, transparent);
    backdrop-filter: saturate(1.1);
}

body.home .home-spaces-grid > .wp-block-column .home-testimonial-card,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

/* Gold quote mark. Decorative — the quoted text carries its own marks, this
   sits above them as an ornament rather than replacing them. */
body.home .home-spaces-grid .home-testimonial-card::before {
    content: '“';
    display: block;
    font-family: var(--k-serif), Georgia, serif;
    font-size: 4.5rem;
    line-height: 0.6;
    color: color-mix(in srgb, var(--k-gold-lit) 85%, transparent);
    margin-bottom: 10px;
}

body.home .home-spaces-grid .home-testimonial-card p,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card p {
    font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem) !important;
    line-height: 1.5 !important;
    color: #fffdf8 !important;
    max-width: 34ch !important;
}

/* The 60px gap between the last section and the footer showed the body ground,
   and bone #f7f4ee next to the pink sections read as a green strip. Body takes
   the paper tint instead, so the seam disappears. */
body.home {
    background-color: var(--k-paper) !important;
}

body.home .site-content,
body.home #content,
body.home .ast-container {
    background-color: transparent;
}

/* ==========================================================================
   Polish pass — the homepage half

   kinetic-accents.css carries the same pass for the inner pages; the homepage
   has its own stylesheet, so the shared pieces are repeated here rather than
   moved to a third file that both would have to load.
   ========================================================================== */

/* Contrast: measured 4.42:1 for the panel copy and 3.78:1 for the gold accent
   line, both under AA against the violet panel. */
body.home .home-glass-card p {
    color: color-mix(in srgb, var(--k-panel-ink) 90%, transparent) !important;
}

body.home .home-glass-card p:last-child {
    color: #f6ddab !important;
}

@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        @keyframes k-rise {
            from { opacity: 0; transform: translateY(26px); }
            to   { opacity: 1; transform: none; }
        }

        body.home .home-direction-card,
        body.home .home-glass-card,
        body.home .hero-candidate-static,
        body.home .home-testimonial-card {
            animation: k-rise auto linear both;
            animation-timeline: view();
            animation-range: entry 8% entry 46%;
        }

        body.home .home-intro-section h2,
        body.home .home-directions-section h2,
        body.home .home-spaces-section h2,
        body.home .home-direction-card h3 {
            animation: k-rise auto linear both;
            animation-timeline: view();
            animation-range: entry 4% entry 34%;
        }
    }

    /* Sheen sweeping the buttons on hover. */
    body.home .wp-block-button__link {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    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;
    }

    body.home .wp-block-button__link:hover::after,
    body.home .wp-block-button__link:focus-visible::after {
        transform: translateX(360%);
    }

    /* Sparks inside the emerald testimonial band. */
    @keyframes k-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; }
    }

    body.home .wp-block-columns.home-spaces-grid {
        position: relative;
        isolation: isolate;
    }

    body.home .wp-block-columns.home-spaces-grid::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        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: k-sparks 18s ease-in-out infinite alternate;
    }
}

/* ==========================================================================
   HEADER MENU & GREEN HERO BLOCK OVERRIDES
   ========================================================================== */

/* 1. Header & Navigation */
body.home .ast-main-header-wrap,
body.home .main-header-bar,
body.home .ast-primary-header-bar,
body.home .ast-primary-header,
body.home #masthead .main-header-bar-wrap {
    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;
}

body.home .site-logo-img img,
body.home .custom-logo,
body.home .ast-logo-svg,
body.home .custom-logo-link img {
    max-height: none !important;
    max-width: none !important;
    height: 68px !important;
    width: auto !important;
    object-fit: contain !important;
}

body.home .main-header-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.home .main-header-menu > .menu-item > a,
body.home .main-header-menu .menu-item a.menu-link {
    font-family: var(--sans-body) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    color: var(--emerald-deep) !important;
    transition: opacity 0.3s ease !important;
    white-space: nowrap !important;
    padding: 0 1.2em !important;
    border-right: none !important;
}

body.home .main-header-menu > .menu-item > a::before {
    content: none !important;
    display: none !important;
}

body.home .main-header-menu .current-menu-item > a,
body.home .main-header-menu .current_page_item > a,
body.home .main-header-menu .menu-item a[aria-current="page"],
body.home .main-header-menu .menu-item:hover > a,
body.home .main-header-menu .menu-link:hover {
    color: var(--gold-ink) !important;
    border-color: var(--gold-ink) !important;
    opacity: 1 !important;
}

body.home .main-header-menu .sub-menu {
    border-top-color: var(--gold-ink) !important;
}

/* 2. Green Hero Block */
body.home .home-hero {
    position: relative !important;
    background: linear-gradient(135deg, #052c22 0%, #064635 50%, #0c2b21 100%) !important;
    overflow: hidden !important;
    padding: 160px 0 !important;
    text-align: center !important;
    color: var(--ivory-bg) !important;
    width: 100% !important;
    border-bottom: none !important;
}

body.home .home-hero::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    border: none !important;
    border-radius: 0 !important;
    background: radial-gradient(circle, rgba(212, 173, 96, 0.15) 0%, transparent 60%) !important;
    animation: rotate-aura 25s linear infinite !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.home .home-hero::after {
    display: none !important;
}

@keyframes rotate-aura {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body.home .home-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    text-align: center !important;
}

body.home .home-hero-content::before,
body.home .home-hero-content::after {
    display: none !important;
}

body.home .home-hero-content > * {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.home .home-hero-content .subtitle {
    font-family: var(--sans-body), 'Inter', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    font-size: 0.85rem !important;
    color: #D4AD60 !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin-bottom: 30px !important;
    padding: 6px 18px !important;
    border: 1px solid rgba(212, 173, 96, 0.35) !important;
    border-radius: 0 !important;
    animation: fadeInUp 1s ease both !important;
}

body.home .home-hero-content h1,
body.home .home-hero-content h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: clamp(3rem, 2.2rem + 3.6vw, 5.2rem) !important;
    line-height: 1.08 !important;
    color: #FBF8F1 !important;
    margin: 0 auto 30px auto !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
    max-width: 680px !important;
    animation: fadeInUp 1.2s ease 0.2s both !important;
}

body.home .home-hero-content .lead {
    font-family: var(--sans-body), 'Inter', sans-serif !important;
    font-size: 1.25rem !important;
    font-style: normal !important;
    color: rgba(251, 248, 241, 0.88) !important;
    margin: 0 auto 40px auto !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    max-width: 660px !important;
    border-top: 1px solid rgba(212, 173, 96, 0.25) !important;
    padding-top: 24px !important;
    animation: fadeInUp 1.2s ease 0.4s both !important;
}

body.home .home-hero .wp-block-buttons {
    justify-content: center !important;
    margin-top: 10px !important;
}

body.home .home-hero .wp-block-button__link {
    background-color: #D4AD60 !important;
    border-color: #D4AD60 !important;
    color: #064635 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 46px !important;
    line-height: 1.2 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    font-family: var(--sans-body), 'Inter', sans-serif !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 0px !important;
    animation: fadeInUp 1.2s ease 0.6s both !important;
}

@media (min-width: 992px) {
    body.home .home-intro-image-col,
    body.home .home-intro-text-col {
        align-self: stretch;
    }

    body.home .hero-candidate-static,
    body.home .home-intro-image-col img {
        height: 100%;
    }

    body.home .home-intro-image-col img {
        object-fit: cover;
        object-position: center 38%;
    }
}

body.home .home-hero .wp-block-button__link:hover {
    background-color: transparent !important;
    border-color: #D4AD60 !important;
    color: #D4AD60 !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   EXACT "Простір Трансформації" (Spaces of Transformation) OVERRIDE
   ========================================================================== */

body.home .home-spaces-section {
    position: relative !important;
    background-color: #FBF8F1 !important;
    background-image: none !important;
    padding: clamp(80px, 8vw, 120px) 24px !important;
}

body.home .home-spaces-section h2 {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-size: clamp(2.4rem, 1.8rem + 2vw, 3.8rem) !important;
    line-height: 1.1 !important;
    text-transform: none !important;
    text-align: center !important;
    color: #064635 !important;
    margin: 0 auto clamp(40px, 5vw, 60px) auto !important;
    width: 100% !important;
    max-width: 1160px !important;
    -webkit-text-stroke: 0 !important;
}

body.home .wp-block-columns.home-spaces-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
    gap: 28px !important;
    background: transparent !important;
    border: none !important;
    width: min(1160px, 100%) !important;
    margin-inline: auto !important;
    backdrop-filter: none !important;
}

body.home .wp-block-columns.home-spaces-grid::before {
    display: none !important;
    content: none !important;
}

body.home .home-spaces-grid > .wp-block-column {
    grid-row: auto !important;
    display: flex !important;
    margin: 0 !important;
}

body.home .home-spaces-grid > .wp-block-column .home-testimonial-card,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(212, 173, 96, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    padding: clamp(32px, 3vw, 44px) !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body.home .home-spaces-grid > .wp-block-column .home-testimonial-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 40px rgba(6, 70, 53, 0.08) !important;
    border-color: #D4AD60 !important;
}

body.home .home-spaces-grid .home-testimonial-card::before {
    content: '“' !important;
    display: block !important;
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 3.2rem !important;
    line-height: 0.8 !important;
    color: #D4AD60 !important;
    margin-bottom: 8px !important;
}

body.home .home-spaces-grid .home-testimonial-card p,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card p {
    font-family: var(--sans-body), 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: 1.05rem !important;
    line-height: 1.65 !important;
    letter-spacing: normal !important;
    color: #2D2E2E !important;
    max-width: 100% !important;
}

@media (max-width: 991px) {
    body.home .wp-block-columns.home-spaces-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ======================================================================
   Простір Трансформації — a single featured story, then two supporting
   voices. The image is deliberately contained in the first quote rather
   than becoming a decorative section background: it makes the treatment
   and the people behind these words the visual centre of the section.
   ====================================================================== */
body.home .home-spaces-section {
    background:
        radial-gradient(circle at 10% 0%, rgba(178, 142, 210, 0.34), transparent 36%),
        linear-gradient(126deg, #5d437f 0%, #49356d 56%, #394a69 100%) !important;
    padding: clamp(44px, 4.5vw, 64px) 24px !important;
}

body.home .home-spaces-section h2 {
    color: #e8c272 !important;
    max-width: 1160px !important;
    margin-bottom: clamp(28px, 3vw, 42px) !important;
}

body.home .home-spaces-heading h2 {
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}

body.home .home-spaces-subtitle {
    margin: 0 auto clamp(18px, 2vw, 26px) !important;
    color: #fffaf0 !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: clamp(1.25rem, 1rem + 0.55vw, 1.65rem) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    text-align: center;
}

body.home .home-spaces-subtitle em {
    font-style: inherit;
    font-weight: inherit;
}

body.home .wp-block-columns.home-spaces-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(290px, 0.95fr) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.4vw, 20px) !important;
    background: transparent !important;
}

body.home .home-spaces-grid > .wp-block-column:first-child {
    grid-row: 1 / 3 !important;
}

body.home .home-spaces-grid > .wp-block-column .home-testimonial-card,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
    position: relative !important;
    isolation: isolate;
    min-height: 0 !important;
    padding: clamp(20px, 1.8vw, 28px) clamp(28px, 3vw, 46px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
    justify-content: flex-end !important;
    min-height: 365px !important;
    background:
        linear-gradient(0deg, rgba(34, 19, 62, 0.93) 0%, rgba(55, 31, 88, 0.72) 54%, rgba(84, 57, 119, 0.45) 100%),
        linear-gradient(90deg, rgba(48, 26, 80, 0.32), rgba(48, 26, 80, 0.06)),
        url('assets/images/home-spaces-teaching.jpg') center 64% / cover no-repeat !important;
}

body.home .home-spaces-grid > .wp-block-column:not(:first-child) .home-testimonial-card {
    justify-content: center !important;
    background: linear-gradient(
        145deg,
        rgba(220, 204, 239, 0.2),
        rgba(192, 181, 226, 0.13)
    ) !important;
    backdrop-filter: blur(5px);
}

body.home .home-spaces-grid > .wp-block-column .home-testimonial-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 38px rgba(8, 5, 22, 0.24) !important;
}

body.home .home-spaces-grid .home-testimonial-card::before {
    color: #e8c272 !important;
    font-size: clamp(3.1rem, 4vw, 3.8rem) !important;
    position: relative;
    top: 8px;
    margin-bottom: 2px !important;
}

body.home .home-spaces-grid .home-testimonial-card p,
body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card p {
    color: #fffaf0 !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    font-style: italic !important;
    font-size: clamp(1.78rem, 1.35rem + 0.86vw, 2.28rem) !important;
    line-height: 1.12 !important;
    max-width: 30ch !important;
}

body.home .home-spaces-grid > .wp-block-column:not(:first-child) .home-testimonial-card p {
    font-size: clamp(1.55rem, 1.16rem + 0.76vw, 2.08rem) !important;
    line-height: 1.2 !important;
    max-width: 25ch !important;
}

body.home .wp-block-columns.home-spaces-grid > .wp-block-column .home-testimonial-card p.home-testimonial-attribution {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: clamp(10px, 1vw, 14px) 0 0 !important;
    color: #e8c272 !important;
    font-family: 'Inter', Arial, sans-serif !important;
    font-size: 0.625rem !important;
    font-style: normal !important;
    font-weight: 500 !important;
    letter-spacing: 0.09em !important;
    line-height: 1.2 !important;
    text-transform: uppercase;
    white-space: nowrap;
}

body.home .wp-block-columns.home-spaces-grid > .wp-block-column .home-testimonial-card p.home-testimonial-attribution::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    flex: 0 0 28px;
    background: rgba(232, 194, 114, 0.72);
}

@media (max-width: 991px) {
    body.home .wp-block-columns.home-spaces-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }

    body.home .home-spaces-grid > .wp-block-column:first-child {
        grid-row: auto !important;
    }

    body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
        min-height: 270px !important;
    }
}

@media (max-width: 600px) {
    body.home .home-spaces-section {
        padding-inline: 18px !important;
    }

    body.home .home-spaces-grid > .wp-block-column:first-child .home-testimonial-card {
        min-height: 250px !important;
    }
}

/* ======================================================================
   Closing invitation — adapted from the two homepage design studies.
   The quiet paper field bridges the violet testimonial section and footer.
   ====================================================================== */

body.home .biest-invitation {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    padding: clamp(64px, 7vw, 104px) 24px;
    background: #fbf8f1;
}

body.home .biest-invitation::before,
body.home .biest-invitation::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: min(58vw, 820px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

body.home .biest-invitation::before {
    top: -30%;
    right: -18%;
    background: rgba(238, 205, 218, 0.48);
}

body.home .biest-invitation::after {
    bottom: -42%;
    left: -18%;
    background: rgba(205, 224, 232, 0.56);
}

body.home .biest-invitation__inner {
    position: relative;
    width: min(1400px, 100%);
    margin: 0 auto;
    padding: clamp(44px, 5.5vw, 78px);
    border: 0;
    background: transparent;
    backdrop-filter: none;
}

body.home .biest-invitation__inner::before,
body.home .biest-invitation__inner::after {
    content: none;
    display: none;
}

body.home .biest-invitation__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    align-items: center;
    gap: clamp(48px, 7vw, 110px);
}

body.home .biest-invitation__grid--no-photo {
    grid-template-columns: minmax(0, 760px);
}

body.home .biest-invitation__eyebrow {
    display: block;
    margin: 0 0 18px;
    color: #b58125;
    font-family: var(--sans-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.34em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.home .biest-invitation h2.biest-invitation__heading {
    max-width: 760px !important;
    margin: 0 !important;
    color: #382252 !important;
    font-family: var(--serif-header) !important;
    font-size: clamp(2.5rem, 4.8vw, 5.5rem) !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.92 !important;
    text-align: left !important;
    text-transform: none !important;
    white-space: nowrap;
}

body.home .biest-invitation__accent {
    display: inline;
    color: #176b4d;
    font-style: italic;
    font-weight: inherit;
}

body.home .biest-invitation p.biest-invitation__body {
    max-width: 58ch !important;
    margin: clamp(24px, 3vw, 38px) 0 0 !important;
    color: #5d5667 !important;
    font-family: var(--sans-body) !important;
    font-size: clamp(1.06rem, 0.98rem + 0.22vw, 1.16rem) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.8 !important;
}

body.home .biest-invitation__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: clamp(28px, 3.5vw, 44px);
}

body.home .biest-invitation__btn {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 16px 32px;
    background: #382252;
    color: #fffaf0 !important;
    font-family: var(--sans-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background-color 220ms ease, transform 220ms ease;
}

body.home .biest-invitation__btn:hover,
body.home .biest-invitation__btn:focus-visible {
    background: #7440a6;
    color: #fffaf0 !important;
    transform: translateY(-2px);
}

body.home .biest-invitation__arrow {
    font-size: 1rem;
    font-weight: 400;
}

body.home .biest-invitation__email {
    color: #4b3a5e !important;
    font-family: var(--sans-body);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-decoration-color: rgba(181, 129, 37, 0.78) !important;
    text-underline-offset: 7px;
}

body.home .biest-invitation__social {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 30px;
    max-width: 700px;
    margin-top: clamp(32px, 4vw, 50px);
    padding-top: 22px;
    border-top: 1px solid rgba(56, 34, 82, 0.14);
}

body.home .biest-invitation__social-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #4e4857 !important;
    font-family: var(--sans-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none !important;
    text-transform: uppercase;
}

body.home .biest-invitation__social-link:hover,
body.home .biest-invitation__social-link:focus-visible {
    color: #7440a6 !important;
}

body.home .biest-invitation__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c69537;
}

body.home .biest-invitation__photo-wrap {
    position: relative;
    width: min(100%, 410px);
    margin: 0 auto;
}

body.home .biest-invitation__blob {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0;
    box-shadow: 0 30px 66px -34px rgba(56, 34, 82, 0.42);
}

body.home .biest-invitation__blob::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 14px;
    border: 1px solid rgba(255, 250, 240, 0.42);
    pointer-events: none;
}

body.home .biest-invitation__blob img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body.home .biest-invitation__blob-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(125, 67, 189, 0.02), rgba(56, 34, 82, 0.18));
    pointer-events: none;
}

body.home .biest-invitation__medallion {
    position: absolute;
    z-index: 2;
    left: -46px;
    bottom: -28px;
    width: clamp(112px, 11vw, 154px);
    height: auto;
    filter: drop-shadow(0 15px 24px rgba(23, 107, 77, 0.24));
    pointer-events: none;
}

@media (max-width: 991px) {
    body.home .biest-invitation__grid {
        grid-template-columns: 1fr;
    }

    body.home .biest-invitation__photo-wrap {
        width: min(76vw, 390px);
    }
}

@media (max-width: 600px) {
    body.home .biest-invitation {
        padding: 48px 16px;
    }

    body.home .biest-invitation__inner {
        padding: 38px 24px 48px;
    }

    body.home .biest-invitation h2.biest-invitation__heading {
        font-size: clamp(1.75rem, 8.4vw, 2.75rem) !important;
    }

    body.home .biest-invitation__actions {
        align-items: flex-start;
        flex-direction: column;
    }

    body.home .biest-invitation__photo-wrap {
        width: min(74vw, 330px);
    }

    body.home .biest-invitation__medallion {
        left: -28px;
    }
}