/*
Theme Name:  Postura e Movimento
Theme URI:   https://posturaemovimento.it
Description: Tema child di Hello Elementor per lo studio Postura e Movimento (Pilates e Yoga, Fontanafredda PN). Palette ispirata a fusionpilates.it, no border-radius, font Merriweather + Montserrat.
Author:      Egon
Author URI:  https://posturaemovimento.it
Template:    hello-elementor
Version:     1.0.0
Text Domain: postura-child
*/

/* ============================================================
   1. DESIGN TOKENS — variabili globali
   ============================================================ */
:root {
    /* Brand palette (estratta da fusionpilates.it style_2.css)
       Stessi rapporti cromatici: fucsia primario, azzurro
       secondario, lime accento. Toni leggermente smorzati per
       tenere il mood "wellness/posturale" anziché "fitness pop". */
    --pem-primary:        #e7216d;   /* fucsia/magenta — CTA */
    --pem-primary-dark:   #b81656;
    --pem-primary-soft:   #fde7ef;
    --pem-secondary:      #62c5e2;   /* azzurro — link/sezioni */
    --pem-secondary-dark: #2a9bbd;
    --pem-accent:         #cdd60d;   /* lime — highlight occasionali */
    --pem-success:        #25d366;   /* WhatsApp green */

    /* Neutri */
    --pem-bg:             #ffffff;
    --pem-bg-alt:         #f8f8f8;
    --pem-bg-dark:        #1a1a1a;
    --pem-text:           #1a1a1a;
    --pem-text-soft:      #4d545c;
    --pem-text-on-dark:   #f5f5f5;
    --pem-border:         #e6e6e6;

    /* Tipografia */
    --pem-font-body:    'Merriweather', Georgia, 'Times New Roman', serif;
    --pem-font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --pem-font-mono:    'Inconsolata', 'Courier New', monospace;

    /* Layout */
    --pem-container:    1200px;
    --pem-container-w:  1400px;
    --pem-gutter:       24px;
    --pem-section-py:   96px;

    /* No riquadri arrotondati (richiesto nel PDF) */
    --pem-radius:       0;
}

/* ============================================================
   2. RESET / GLOBAL — niente border-radius da nessuna parte
   ============================================================ */
*,
*::before,
*::after {
    border-radius: 0 !important;
    box-sizing: border-box;
}

/* Skip-link a11y (WCAG 2.4.1 — Bypass Blocks).
   Visibile solo quando riceve focus tramite Tab. */
.pem-skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 10000;
    background: var(--pem-text);
    color: #fff;
    font-family: var(--pem-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 12px 20px;
    text-decoration: none;
}
.pem-skip-link:focus {
    left: 8px;
}

/* Focus visibile su tutti gli elementi interattivi.
   Usiamo :focus-visible così non viene mostrato sui click mouse. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--pem-secondary);
    outline-offset: 3px;
}
.pem-btn:focus-visible {
    outline-color: var(--pem-accent);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--pem-font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--pem-text);
    background: var(--pem-bg);
    margin: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--pem-font-heading);
    font-weight: 700;
    line-height: 1.18;
    color: var(--pem-text);
    margin: 0 0 0.6em;
    letter-spacing: -0.005em;
}

h1, .h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 800; }
h2, .h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 700; }
h3, .h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; }
h4, .h4 { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }

p { margin: 0 0 1em; }
strong, b { font-weight: 700; }

a {
    color: var(--pem-primary);
    text-decoration: none;
    transition: color .2s ease;
}
a:hover { color: var(--pem-primary-dark); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

/* ============================================================
   3. CONTAINER + UTILITY
   ============================================================ */
.pem-container {
    width: 100%;
    max-width: var(--pem-container);
    margin: 0 auto;
    padding: 0 var(--pem-gutter);
}

.pem-container-wide {
    width: 100%;
    max-width: var(--pem-container-w);
    margin: 0 auto;
    padding: 0 var(--pem-gutter);
}

.pem-section {
    padding: var(--pem-section-py) 0;
}
.pem-section--alt { background: var(--pem-bg-alt); }
.pem-section--dark {
    background: var(--pem-bg-dark);
    color: var(--pem-text-on-dark);
}
.pem-section--dark h1,
.pem-section--dark h2,
.pem-section--dark h3,
.pem-section--dark h4 { color: var(--pem-text-on-dark); }

.pem-eyebrow {
    display: inline-block;
    font-family: var(--pem-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: var(--pem-primary);
    margin-bottom: 0.8em;
}

.pem-text-center { text-align: center; }

/* Ruler decorativo (richiama linee orizzontali del PDF) */
.pem-rule {
    height: 2px;
    width: 64px;
    background: var(--pem-primary);
    border: 0;
    margin: 1.4em 0;
}
.pem-text-center .pem-rule { margin-left: auto; margin-right: auto; }

/* ============================================================
   4. BOTTONI / CTA
   ============================================================ */
.pem-btn,
.pem-btn:visited {
    display: inline-block;
    font-family: var(--pem-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    padding: 16px 32px;
    background: var(--pem-primary);
    color: #fff;
    border: 2px solid var(--pem-primary);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
    cursor: pointer;
    line-height: 1;
}
.pem-btn:hover {
    background: var(--pem-primary-dark);
    border-color: var(--pem-primary-dark);
    color: #fff;
}

.pem-btn--ghost {
    background: transparent;
    color: var(--pem-text);
    border-color: var(--pem-text);
}
.pem-btn--ghost:hover {
    background: var(--pem-text);
    color: #fff;
}
.pem-section--dark .pem-btn--ghost {
    color: #fff;
    border-color: #fff;
}
.pem-section--dark .pem-btn--ghost:hover {
    background: #fff;
    color: var(--pem-text);
}

.pem-btn--secondary {
    background: var(--pem-secondary);
    border-color: var(--pem-secondary);
}
.pem-btn--secondary:hover {
    background: var(--pem-secondary-dark);
    border-color: var(--pem-secondary-dark);
}

/* Variante "dark": nero pieno (per CTA dramma) */
.pem-btn--dark {
    background: var(--pem-text);
    border-color: var(--pem-text);
    color: #fff;
}
.pem-btn--dark:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Variante "outline": bordato fucsia, si riempie su hover */
.pem-btn--outline-primary {
    background: transparent;
    color: var(--pem-primary);
    border-color: var(--pem-primary);
}
.pem-btn--outline-primary:hover {
    background: var(--pem-primary);
    border-color: var(--pem-primary);
    color: #fff;
}

/* Variante "outline-light": bordato bianco (per sezioni dark) */
.pem-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: #fff;
}
.pem-btn--outline-light:hover {
    background: #fff;
    color: var(--pem-text);
}

/* Dimensioni */
.pem-btn--sm {
    padding: 10px 22px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}
.pem-btn--lg {
    padding: 22px 42px;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

/* Allineamento del bottone via wrap <p> (left/center/right) */
.pem-btn-wrap--center { text-align: center; }
.pem-btn-wrap--right  { text-align: right; }
.pem-btn-wrap--left   { text-align: left; }

/* Bottone "full-width" (occupa 100% della colonna) */
.pem-btn--block {
    display: block;
    width: 100%;
    text-align: center;
}

/* Icona freccia inline (decorativa, dopo il testo) */
.pem-btn .pem-btn__arrow {
    display: inline-block;
    margin-left: 0.5em;
    transition: transform 0.2s ease;
}
.pem-btn:hover .pem-btn__arrow {
    transform: translateX(4px);
}

/* ============================================================
   5. HEADER
   ============================================================ */
.pem-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--pem-border);
    transition: box-shadow .2s ease;
}
.pem-header.is-scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.pem-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px var(--pem-gutter);
    max-width: var(--pem-container-w);
    margin: 0 auto;
    gap: 32px;
}
.pem-header__logo a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pem-text);
    font-family: var(--pem-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pem-header__logo-mark {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: var(--pem-primary);
    position: relative;
}
.pem-header__logo-mark::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #fff;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

.pem-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: nowrap;
}
.pem-nav a {
    color: var(--pem-text);
    font-family: var(--pem-font-heading);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    display: inline-block;
}
.pem-nav a:hover,
.pem-nav .current-menu-item > a,
.pem-nav .current_page_item > a {
    color: var(--pem-primary);
    border-bottom-color: var(--pem-primary);
}
.pem-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
}
.pem-nav li { margin: 0; }
.pem-header__cta { white-space: nowrap; }

/* Su laptop standard (1366px) il menu + bottone arrivava a wrap.
   Riduco gap progressivamente prima di andare in burger. */
@media (max-width: 1280px) {
    .pem-nav, .pem-nav ul { gap: 18px; }
    .pem-nav a { font-size: 0.88rem; }
    .pem-header__inner { gap: 20px; }
    .pem-header__cta {
        padding: 12px 20px;
        font-size: 0.82rem;
    }
}

.pem-header__cta {
    display: inline-block;
}

/* Burger mobile */
.pem-burger {
    display: none;
    width: 36px;
    height: 36px;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
}
.pem-burger span,
.pem-burger span::before,
.pem-burger span::after {
    display: block;
    background: var(--pem-text);
    height: 2px;
    width: 24px;
    position: absolute;
    left: 6px;
    transition: transform .2s ease, top .2s ease;
}
.pem-burger span { top: 50%; transform: translateY(-50%); }
.pem-burger span::before { content: ""; top: -8px; }
.pem-burger span::after  { content: ""; top:  8px; }
.pem-burger.is-open span { background: transparent; }
.pem-burger.is-open span::before { top: 0; transform: rotate(45deg); }
.pem-burger.is-open span::after  { top: 0; transform: rotate(-45deg); }

/* Soglia burger alzata da 1024 a 1100: copre tablet landscape e laptop
   stretti dove menu + CTA non ci stanno comunque.
   Drawer = wrap del header__inner: nav e cta diventano blocchi 100%
   sotto la riga logo/burger. Niente position:absolute (che sovrapponeva
   nav e cta).
*/
@media (max-width: 1100px) {
    .pem-burger { display: block; }
    .pem-header__inner { flex-wrap: wrap; row-gap: 0; }

    /* nav e CTA: nascosti, ma quando il drawer è aperto diventano
       blocchi a piena larghezza che vanno in coda */
    .pem-nav,
    .pem-header__cta {
        display: none;
        flex-basis: 100%;
        width: 100%;
        order: 99;
        margin: 0;
        padding: 0;
    }
    .pem-header.is-mobile-open .pem-nav,
    .pem-header.is-mobile-open .pem-header__cta {
        display: block;
    }
    .pem-header.is-mobile-open .pem-nav {
        border-top: 1px solid var(--pem-border);
        margin-top: 14px;
    }
    .pem-nav ul {
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 8px 0 0;
    }
    .pem-nav li { width: 100%; margin: 0; }
    .pem-nav a {
        display: block;
        font-size: 1rem;
        padding: 14px 0;            /* tap target ≥ 48px */
        border-bottom: 1px solid var(--pem-border);
        white-space: normal;
    }
    .pem-nav li:last-child a { border-bottom: 0; }

    .pem-header.is-mobile-open .pem-header__cta {
        text-align: center;
        padding: 16px 0 18px;
        border-top: 1px solid var(--pem-border);
    }
    .pem-header.is-mobile-open .pem-header__cta .pem-btn,
    .pem-header.is-mobile-open .pem-btn.pem-header__cta {
        display: block;
        width: 100%;
    }
}

/* ============================================================
   6. HERO
   ============================================================ */
.pem-hero {
    padding: clamp(80px, 11vw, 160px) 0 clamp(64px, 9vw, 120px);
    background: linear-gradient(180deg, #fff 0%, var(--pem-bg-alt) 100%);
    position: relative;
    overflow: hidden;
}
.pem-hero__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    max-width: var(--pem-container-w);
    margin: 0 auto;
    padding: 0 var(--pem-gutter);
}
.pem-hero__title {
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    line-height: 1.05;
    margin-bottom: 0.4em;
}
.pem-hero__lead {
    font-size: 1.18rem;
    color: var(--pem-text-soft);
    max-width: 520px;
    margin-bottom: 2em;
}
.pem-hero__media {
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, var(--pem-secondary) 0%, var(--pem-primary) 100%);
    background-size: cover;
    background-position: center;
    position: relative;
}
.pem-hero__media:not(.pem-hero__media--has-image)::after {
    content: "Carica una foto in Personalizza › Hero";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--pem-font-heading);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
    opacity: 0.7;
    text-align: center;
    padding: 16px;
}
.pem-hero__media--has-image { background-image: var(--hero-img); }
@media (max-width: 768px) {
    .pem-hero__inner { grid-template-columns: 1fr; }
    .pem-hero__media { aspect-ratio: 4 / 3; }
}

/* ============================================================
   7. GRIGLIA CORSI
   ============================================================ */
.pem-courses {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* max 3 per riga su desktop */
    gap: 32px;
    margin-top: 48px;
}
@media (max-width: 1024px) {
    .pem-courses { grid-template-columns: repeat(2, 1fr); } /* tablet */
}
@media (max-width: 600px) {
    .pem-courses { grid-template-columns: 1fr; }            /* mobile */
}
.pem-course {
    background: #fff;
    border: 1px solid var(--pem-border);
    padding: 40px 36px 36px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.pem-course:hover {
    transform: translateY(-4px);
    border-color: var(--pem-primary);
    box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
/* Numerazione enorme ghost in background — richiama il pattern Fusion
   delle card con grosso numero outline. */
.pem-course::before {
    content: attr(data-num);
    position: absolute;
    top: -22px;
    right: -10px;
    font-family: var(--pem-font-heading);
    font-weight: 800;
    font-size: 9rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--pem-primary-soft);
    pointer-events: none;
    z-index: 0;
    transition: -webkit-text-stroke-color .25s ease;
}
.pem-course:hover::before {
    -webkit-text-stroke-color: var(--pem-secondary);
}
.pem-course > * { position: relative; z-index: 1; }
.pem-course__num {
    font-family: var(--pem-font-mono);
    font-size: 0.85rem;
    color: var(--pem-secondary);
    margin-bottom: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.pem-course__num::before { content: "— "; }
.pem-course__title {
    font-size: 1.4rem;
    margin-bottom: 0.4em;
    color: var(--pem-text);
}
.pem-course__body {
    color: var(--pem-text-soft);
    font-size: 0.98rem;
    flex: 1;
    margin-bottom: 24px;
}
.pem-course__link {
    align-self: flex-start;
    font-family: var(--pem-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.82rem;
    color: var(--pem-primary);
    border-bottom: 2px solid var(--pem-primary);
    padding-bottom: 4px;
}
.pem-course__link::after { content: " \2192"; }

/* ============================================================
   8. SPLIT (immagine + testo a colonne)
   ============================================================ */
.pem-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.pem-split--reverse > :first-child { order: 2; }
.pem-split__media {
    aspect-ratio: 4 / 3;
    background: var(--pem-bg-alt);
    border: 1px solid var(--pem-border);
}
@media (max-width: 768px) {
    .pem-split { grid-template-columns: 1fr; }
    .pem-split--reverse > :first-child { order: initial; }
}

/* ============================================================
   9. TEAM
   ============================================================ */
.pem-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    margin-top: 48px;
}
.pem-team__card { text-align: left; }
.pem-team__photo {
    aspect-ratio: 3 / 4;
    background: var(--pem-bg-alt);
    border: 1px solid var(--pem-border);
    margin-bottom: 16px;
}
.pem-team__name {
    font-family: var(--pem-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 4px;
}
.pem-team__role {
    font-size: 0.9rem;
    color: var(--pem-text-soft);
    margin: 0;
}

/* ============================================================
   10. FAQ / ACCORDION semplice (Info Corsi)
   ============================================================ */
.pem-accordion { border-top: 1px solid var(--pem-border); }
.pem-accordion details {
    border-bottom: 1px solid var(--pem-border);
    padding: 24px 0;
}
.pem-accordion summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--pem-font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--pem-text);
}
.pem-accordion summary::-webkit-details-marker { display: none; }
.pem-accordion summary::after {
    content: "+";
    font-size: 1.6rem;
    line-height: 1;
    color: var(--pem-primary);
    transition: transform .25s ease;
}
.pem-accordion details[open] summary::after { transform: rotate(45deg); }
.pem-accordion__body { padding-top: 16px; color: var(--pem-text-soft); }

/* Immagine dentro accordion item */
.pem-accordion__image {
    margin: 0 0 24px;
    overflow: hidden;
    border: 1px solid var(--pem-border);
    background: var(--pem-bg-alt);
}
.pem-accordion__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
/* Posizione immagine "left" / "right": testo prevalente 70%, immagine 30%.
   Immagine full-height (si stretcha verticalmente al testo accanto). */
.pem-accordion__body--image-left,
.pem-accordion__body--image-right {
    display: grid;
    gap: clamp(24px, 4vw, 48px);
    align-items: stretch;
}
/* Right: testo (70) | immagine (30) */
.pem-accordion__body--image-right { grid-template-columns: 7fr 3fr; }
/* Left: immagine (30) | testo (70) */
.pem-accordion__body--image-left  { grid-template-columns: 3fr 7fr; }
.pem-accordion__body--image-left .pem-accordion__image,
.pem-accordion__body--image-right .pem-accordion__image {
    margin: 0;
    height: 100%;        /* riempi tutta la cell del grid */
    min-height: 320px;   /* protezione su contenuti testuali corti */
}
.pem-accordion__body--image-left .pem-accordion__image  { order: 1; }
.pem-accordion__body--image-left .pem-accordion__text   { order: 2; }
.pem-accordion__body--image-right .pem-accordion__image { order: 2; }
.pem-accordion__body--image-right .pem-accordion__text  { order: 1; }
.pem-accordion__body--image-left .pem-accordion__image img,
.pem-accordion__body--image-right .pem-accordion__image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;  /* niente ratio fissa: l'img riempie la cell */
    object-fit: cover;
}

@media (max-width: 768px) {
    .pem-accordion__body--image-left,
    .pem-accordion__body--image-right {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .pem-accordion__body--image-left .pem-accordion__image,
    .pem-accordion__body--image-right .pem-accordion__image {
        order: 0;
        height: auto;
        min-height: 0;
    }
    .pem-accordion__body--image-left .pem-accordion__image img,
    .pem-accordion__body--image-right .pem-accordion__image img {
        height: auto;
        aspect-ratio: 16 / 9;  /* su mobile diventa banner */
    }
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.pem-footer {
    background: var(--pem-bg-dark);
    color: var(--pem-text-on-dark);
    padding: 64px 0 24px;
}
.pem-footer a { color: var(--pem-text-on-dark); }
.pem-footer a:hover { color: var(--pem-primary); }
.pem-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: var(--pem-container-w);
    margin: 0 auto;
    padding: 0 var(--pem-gutter);
}
.pem-footer h4 {
    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    margin-bottom: 16px;
}
.pem-footer__hours { font-family: var(--pem-font-mono); font-size: 0.92rem; line-height: 1.9; }
.pem-footer__hours dt { display: inline-block; min-width: 110px; color: #b8b8b8; }
.pem-footer__hours dd { display: inline; margin: 0; }
.pem-footer__hours dd::after { content: ""; display: block; }

.pem-footer__bottom {
    border-top: 1px solid #333;
    margin-top: 48px;
    padding: 24px var(--pem-gutter) 0;
    max-width: var(--pem-container-w);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    color: #999;
    font-size: 0.85rem;
}
@media (max-width: 768px) {
    .pem-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   12b. VALUES SECTION — 4 card con icona CSS + testo
        Richiama "values-section" di fusionpilates.it
   ============================================================ */
.pem-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    margin-top: 48px;
}
.pem-value {
    text-align: left;
    padding: 0 8px;
}
.pem-value__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--pem-primary);
    color: #fff;
    margin-bottom: 16px;
    font-family: var(--pem-font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}
.pem-value:nth-child(2) .pem-value__icon { background: var(--pem-secondary); }
.pem-value:nth-child(3) .pem-value__icon { background: var(--pem-text); }
.pem-value:nth-child(4) .pem-value__icon { background: var(--pem-accent); color: var(--pem-text); }
.pem-value h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
}
.pem-value p {
    font-size: 0.96rem;
    color: var(--pem-text-soft);
    margin: 0;
}

/* ============================================================
   12c. RIBBON PROMO — fascia colorata che scorre tra sezioni
        Inspirata dal "carousel-promo-home" di fusionpilates.it
   ============================================================ */
.pem-ribbon {
    background: var(--pem-text);
    color: #fff;
    padding: 14px 0;
    overflow: hidden;
    position: relative;
}
.pem-ribbon__track {
    display: flex;
    gap: 48px;
    animation: pem-ribbon-scroll 28s linear infinite;
    white-space: nowrap;
    will-change: transform;
}
.pem-ribbon__item {
    font-family: var(--pem-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.82rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.pem-ribbon__item::after {
    content: "✦";
    color: var(--pem-primary);
    font-size: 1rem;
}
@keyframes pem-ribbon-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .pem-ribbon__track { animation: none; }
}

/* ============================================================
   12d. CTA banner pre-footer — "Pronto a iniziare?"
        Richiama il banner-sundayclub di fusionpilates.it
   ============================================================ */
.pem-cta-banner {
    background: linear-gradient(135deg, var(--pem-primary) 0%, var(--pem-secondary) 100%);
    color: #fff;
    padding: clamp(64px, 9vw, 120px) var(--pem-gutter);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pem-cta-banner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.pem-cta-banner__inner { position: relative; max-width: 800px; margin: 0 auto; }
.pem-cta-banner h2 {
    color: #fff;
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.1;
    margin-bottom: 0.4em;
}
.pem-cta-banner p {
    font-size: 1.15rem;
    margin-bottom: 2em;
    opacity: 0.95;
}
.pem-cta-banner .pem-btn {
    background: #fff;
    color: var(--pem-text);
    border-color: #fff;
}
.pem-cta-banner .pem-btn:hover {
    background: var(--pem-text);
    color: #fff;
    border-color: var(--pem-text);
}
.pem-cta-banner .pem-btn--ghost {
    background: transparent;
    color: #fff;
    border-color: #fff;
    margin-left: 12px;
}
.pem-cta-banner .pem-btn--ghost:hover {
    background: #fff;
    color: var(--pem-text);
}

/* Slogan banner tra body e footer */
.pem-slogan {
    text-align: center;
    padding: clamp(48px, 7vw, 96px) var(--pem-gutter);
    background: var(--pem-primary);
    color: #fff;
}
.pem-slogan h2 {
    font-family: var(--pem-font-heading);
    font-style: italic;
    font-weight: 700;
    color: #fff;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    margin: 0;
    letter-spacing: -0.005em;
}

/* ============================================================
   12e. UTILITIES per Elementor (override radius su widget Elementor)
   ============================================================ */
.elementor *,
.elementor-button,
.elementor-image img,
.elementor-widget-image img,
.elementor-widget-image-box img,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    border-radius: 0 !important;
}

/* ============================================================
   13. WPForms — adattamento profondo allo stile del sito
   ============================================================ */
div.wpforms-container-full,
.wpforms-container { margin: 0 !important; }
.wpforms-form .wpforms-title,
.wpforms-form .wpforms-description { display: none !important; }
.wpforms-form {
    background: #fff;
    padding: 32px;
    border: 1px solid var(--pem-border);
}
.wpforms-form .wpforms-field {
    padding: 0 0 22px !important;
    margin: 0 !important;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form input[type="url"],
.wpforms-form input[type="password"],
.wpforms-form select,
.wpforms-form textarea {
    border: 1px solid var(--pem-border) !important;
    background: #fff !important;
    padding: 13px 14px !important;
    font-family: var(--pem-font-body) !important;
    font-size: 1rem !important;
    line-height: 1.4 !important;
    color: var(--pem-text) !important;
    width: 100% !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}
.wpforms-form textarea { min-height: 140px !important; resize: vertical !important; }
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder { color: #999 !important; opacity: 1; }
.wpforms-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e7216d' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    padding-right: 36px !important;
}
.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
    outline: 0 !important;
    border-color: var(--pem-primary) !important;
    box-shadow: 0 0 0 2px var(--pem-primary-soft) !important;
}
.wpforms-form .wpforms-field-label,
.wpforms-form label.wpforms-field-label {
    font-family: var(--pem-font-heading) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--pem-text) !important;
    margin: 0 0 8px !important;
    display: block !important;
}
.wpforms-form .wpforms-required-label { color: var(--pem-primary) !important; }
.wpforms-form .wpforms-field-description,
.wpforms-form .wpforms-field-sublabel {
    font-size: 0.85rem !important;
    color: var(--pem-text-soft) !important;
    margin: 6px 0 0 !important;
    font-family: var(--pem-font-body) !important;
}
.wpforms-form .wpforms-field-checkbox ul,
.wpforms-form .wpforms-field-radio ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.wpforms-form .wpforms-field-checkbox label,
.wpforms-form .wpforms-field-radio label {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    font-family: var(--pem-font-body) !important;
    font-size: 0.95rem !important;
    color: var(--pem-text) !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
.wpforms-form .wpforms-field-checkbox input[type="checkbox"],
.wpforms-form .wpforms-field-radio input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--pem-primary) !important;
}
.wpforms-form .wpforms-submit-container { padding: 8px 0 0 !important; margin: 0 !important; }
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
    background: var(--pem-primary) !important;
    border: 2px solid var(--pem-primary) !important;
    color: #fff !important;
    font-family: var(--pem-font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-size: 0.92rem !important;
    padding: 18px 32px !important;
    cursor: pointer !important;
    width: 100% !important;
}
.wpforms-form button[type="submit"]:hover {
    background: var(--pem-primary-dark) !important;
    border-color: var(--pem-primary-dark) !important;
}
.wpforms-form .wpforms-error {
    color: var(--pem-primary) !important;
    font-size: 0.85rem !important;
    margin-top: 6px !important;
}
.wpforms-form input.wpforms-error,
.wpforms-form select.wpforms-error,
.wpforms-form textarea.wpforms-error {
    border-color: var(--pem-primary) !important;
}
.wpforms-confirmation-container,
.wpforms-confirmation-container-full,
div.wpforms-confirmation-container-full {
    background: var(--pem-primary-soft) !important;
    border-left: 4px solid var(--pem-primary) !important;
    padding: 24px 28px !important;
    color: var(--pem-text) !important;
}

/* ============================================================
   14. MOBILE FINE-TUNING (≤768px e ≤480px)
   ============================================================ */
.pem-btn,
.pem-burger,
.pem-course__link,
.wpforms-form button[type="submit"] {
    min-height: 48px;
}
.pem-btn, .pem-nav a, .pem-burger, .pem-course, summary {
    touch-action: manipulation;
}

@media (max-width: 768px) {
    :root {
        --pem-section-py: 56px;
        --pem-gutter: 18px;
    }
    .pem-hero {
        padding: 64px 0 56px;
    }
    .pem-hero__inner { gap: 32px; }
    .pem-hero__title { font-size: clamp(2rem, 8vw, 3rem); }
    .pem-hero__lead { font-size: 1.05rem; }
    .pem-hero__media { aspect-ratio: 16 / 12; max-height: 360px; }

    .pem-course { padding: 32px 24px 28px; }
    .pem-course::before {
        font-size: 5.5rem;
        top: -8px;
        right: -4px;
    }
    .pem-course__title { font-size: 1.25rem; }

    .pem-value { padding: 0; }
    .pem-value__icon { width: 48px; height: 48px; font-size: 1.2rem; }

    .pem-btn {
        padding: 15px 24px;
        font-size: 0.85rem;
        letter-spacing: 0.06em;
    }

    .pem-cta-banner { padding: 56px 18px; }
    .pem-cta-banner h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .pem-cta-banner p { font-size: 1rem; margin-bottom: 1.5em; }
    .pem-cta-banner .pem-btn {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 12px !important;
    }
    .pem-cta-banner .pem-btn--ghost { margin: 0 auto !important; }

    .pem-slogan { padding: 48px 18px; }
    .pem-slogan h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); }

    .pem-ribbon { padding: 11px 0; }
    .pem-ribbon__item { font-size: 0.74rem; gap: 12px; letter-spacing: 0.14em; }
    .pem-ribbon__track { gap: 36px; }

    .pem-split__media { aspect-ratio: 16 / 11; }

    .pem-accordion summary {
        padding: 4px 0;
        min-height: 48px;
        font-size: 1.1rem;
    }
    .pem-accordion details { padding: 18px 0; }

    .pem-footer { padding: 48px 0 20px; }
    .pem-footer__bottom {
        margin-top: 32px;
        flex-direction: column;
        align-items: flex-start;
        font-size: 0.78rem;
    }

    .pem-eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; }
}

@media (max-width: 480px) {
    .pem-header__inner { padding: 12px 14px; gap: 8px; }
    .pem-header__logo a {
        font-size: 0.92rem;
        gap: 8px;
    }
    .pem-header__logo-mark { width: 22px; height: 22px; }

    .pem-footer__hours dt {
        display: block;
        min-width: 0;
        margin-top: 10px;
        font-weight: 700;
        color: #ddd;
    }
    .pem-footer__hours dt:first-of-type { margin-top: 0; }
    .pem-footer__hours dd {
        display: block;
        margin-left: 0;
        font-size: 0.92rem;
    }

    .pem-course::before { font-size: 4.5rem; }
    .pem-course { padding: 28px 22px 24px; }

    .wpforms-form { padding: 22px 16px; }
    .wpforms-form .wpforms-field { padding-bottom: 18px !important; }

    .pem-footer__bottom nav { width: 100%; gap: 14px; font-size: 0.8rem; }

    .pem-container, .pem-container-wide { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   15. ELEMENTOR COMPATIBILITY
   Forza font self-hosted, palette, no-radius e tipografia del
   tema sui widget Elementor. Necessario perché Elementor inietta
   il proprio CSS che vince sulle regole generiche del tema.
   ============================================================ */

/* Heading: tutti i widget Elementor heading usano Montserrat */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6,
.elementor-element h1,
.elementor-element h2,
.elementor-element h3,
.elementor-element h4 {
    font-family: var(--pem-font-heading) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.005em !important;
}
.elementor-widget-heading h1.elementor-heading-title,
.elementor-element h1 { font-weight: 800 !important; }

/* Text editor + paragraphs */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol,
.elementor-element p,
.elementor-element li {
    font-family: var(--pem-font-body) !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: var(--pem-text);
}
.elementor-widget-text-editor strong { font-weight: 700; }

/* Bottoni Elementor → stile pem-btn */
.elementor-button,
.elementor-button-link,
.elementor-widget-button .elementor-button {
    font-family: var(--pem-font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.9rem !important;
    padding: 16px 32px !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    min-height: 48px;
    border: 2px solid var(--pem-primary) !important;
    background-color: var(--pem-primary) !important;
    color: #fff !important;
    transition: background .2s ease, border-color .2s ease !important;
}
.elementor-button:hover,
.elementor-widget-button .elementor-button:hover {
    background-color: var(--pem-primary-dark) !important;
    border-color: var(--pem-primary-dark) !important;
    color: #fff !important;
}

/* Icon-box / image-box */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-image-box .elementor-image-box-title {
    font-family: var(--pem-font-heading) !important;
    font-weight: 700 !important;
}
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-description {
    font-family: var(--pem-font-body) !important;
    color: var(--pem-text-soft);
}

/* Section / column: niente radius */
.elementor-section,
.elementor-column,
.elementor-widget-wrap,
.elementor-element {
    border-radius: 0 !important;
}

/* Image widget: niente radius */
.elementor-widget-image img,
.elementor-image img {
    border-radius: 0 !important;
}

/* Eyebrow custom: aggiungi class .pem-eyebrow al heading widget
   in Advanced > CSS Classes, oppure usa size=small + colore primary */
.elementor-heading-title.pem-eyebrow {
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    color: var(--pem-primary) !important;
    font-weight: 700 !important;
}

/* Divider Elementor → stile pem-rule (linea fucsia 64px) */
.elementor-widget-divider .elementor-divider-separator,
.elementor-widget-divider hr {
    border-color: var(--pem-primary) !important;
    background-color: var(--pem-primary) !important;
}

/* Input form (per shortcode WPForms dentro Elementor): niente radius */
.elementor input,
.elementor textarea,
.elementor select { border-radius: 0 !important; }

/* Container Elementor: padding e gutter coerenti col tema */
.elementor-section-boxed > .elementor-container {
    max-width: var(--pem-container) !important;
}
.elementor-section.elementor-section-stretched {
    width: 100% !important;
}

/* ============================================================
   16. ELEMENTORIZED PAGES — passthrough wrapper Elementor
   Quando una pagina viene "elementorizzata" via lo script
   scripts/elementorize-pages.php, il body riceve la classe
   .pem-elementor-page. I widget interni producono già il loro
   markup completo (sezioni .pem-section, .pem-hero, .pem-split,
   contenitori .pem-container, ecc.) — quindi i wrapper Elementor
   devono solo "passare" la struttura senza aggiungere padding,
   margin, flex o larghezze proprie. Garantisce layout identico
   al template-part PHP originale.
   ============================================================ */
.pem-elementor-page .elementor,
.pem-elementor-page .elementor-section,
.pem-elementor-page .elementor-container,
.pem-elementor-page .elementor-row,
.pem-elementor-page .elementor-column,
.pem-elementor-page .elementor-column-wrap,
.pem-elementor-page .elementor-widget-wrap,
.pem-elementor-page .elementor-widget,
.pem-elementor-page .elementor-element,
.pem-elementor-page .elementor-widget-container,
.pem-elementor-page .elementor-widget-html .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    flex-basis: 100% !important;
}
.pem-elementor-page .elementor-section,
.pem-elementor-page .elementor-container,
.pem-elementor-page .elementor-row,
.pem-elementor-page .elementor-column,
.pem-elementor-page .elementor-widget-wrap {
    display: block !important;
}
/* Annulla l'auto-padding che Elementor mette sui top/bottom delle section */
.pem-elementor-page .elementor-section.elementor-top-section,
.pem-elementor-page .elementor-section.elementor-inner-section {
    padding: 0 !important;
}

/* ------------------------------------------------------------
   16b) Pattern combinati: i wrapper Elementor con classi pem-*
   riprendono il loro stile dal tema (padding, grid, container).
   Usato dallo script elementorize-identical.php quando applica
   le classi alle section/column Elementor.
   ------------------------------------------------------------ */

/* Sezione di tema: section Elementor con .pem-section* */
.pem-elementor-page .elementor-section.pem-section {
    padding: var(--pem-section-py) 0 !important;
}
.pem-elementor-page .elementor-section.pem-section--alt   { background: var(--pem-bg-alt) !important; }
.pem-elementor-page .elementor-section.pem-section--dark  { background: var(--pem-bg-dark) !important; color: var(--pem-text-on-dark) !important; }
.pem-elementor-page .elementor-section.pem-text-center    { text-align: center !important; }

/* Hero: la section diventa <section class="pem-hero"> equivalente */
.pem-elementor-page .elementor-section.pem-hero {
    padding: 96px 0 56px !important;
    background: linear-gradient(180deg, var(--pem-bg) 0%, var(--pem-bg-alt) 100%) !important;
}
/* Variante hero pagina interna: meno padding-bottom (matcha
   il "padding-bottom:48px" inline del template-part originale
   in chi-siamo / metodo / info-corsi / corso / come-prenotare / contatti) */
.pem-elementor-page .elementor-section.pem-hero.pem-hero--inner {
    padding: 96px 0 48px !important;
}

/* Container: column 100% Elementor con .pem-container/--wide */
.pem-elementor-page .elementor-column.pem-container,
.pem-elementor-page .elementor-column.pem-container-wide {
    max-width: var(--pem-container) !important;
    margin: 0 auto !important;
    padding: 0 var(--pem-gutter) !important;
}
.pem-elementor-page .elementor-column.pem-container-wide {
    max-width: var(--pem-container-w) !important;
}

/* Grid wrappers: column con .pem-courses/--values/--team
   Il grid-container vero è il widget-wrap interno (i widget
   sono i grid items). */
.pem-elementor-page .elementor-column.pem-courses > .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* max 3 per riga */
    gap: 32px !important;
}
@media (max-width: 1024px) {
    .pem-elementor-page .elementor-column.pem-courses > .elementor-widget-wrap {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .pem-elementor-page .elementor-column.pem-courses > .elementor-widget-wrap {
        grid-template-columns: 1fr !important;
    }
}
.pem-elementor-page .elementor-column.pem-values > .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px !important;
}
.pem-elementor-page .elementor-column.pem-team > .elementor-widget-wrap {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px !important;
}

/* Card uguali in altezza: i grid items (.elementor-element) sono già
   stretched verticalmente, ma .elementor-widget-container e la card
   interna .pem-course/.pem-value/.pem-team__card hanno height:auto.
   Forziamo height:100% lungo l'intera catena per replicare il
   template-part originale (in cui la card era figlia diretta del grid). */
.pem-elementor-page .elementor-column.pem-courses > .elementor-widget-wrap > .elementor-element,
.pem-elementor-page .elementor-column.pem-courses > .elementor-widget-wrap > .elementor-element > .elementor-widget-container,
.pem-elementor-page .elementor-column.pem-courses .pem-course,
.pem-elementor-page .elementor-column.pem-values > .elementor-widget-wrap > .elementor-element,
.pem-elementor-page .elementor-column.pem-values > .elementor-widget-wrap > .elementor-element > .elementor-widget-container,
.pem-elementor-page .elementor-column.pem-values .pem-value,
.pem-elementor-page .elementor-column.pem-team > .elementor-widget-wrap > .elementor-element,
.pem-elementor-page .elementor-column.pem-team > .elementor-widget-wrap > .elementor-element > .elementor-widget-container,
.pem-elementor-page .elementor-column.pem-team .pem-team__card {
    height: 100% !important;
}

/* Split 2-col: inner-section Elementor con .pem-split (2 column inside) */
.pem-elementor-page .elementor-section.pem-split > .elementor-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px) !important;
    align-items: center !important;
}
.pem-elementor-page .elementor-section.pem-split--reverse > .elementor-container > :first-child {
    order: 2 !important;
}

/* Hero __inner: stessa logica della split, ma 1.1fr/0.9fr */
.pem-elementor-page .elementor-section.pem-hero > .elementor-container {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(32px, 5vw, 80px) !important;
    align-items: center !important;
    max-width: var(--pem-container) !important;
    margin: 0 auto !important;
    padding: 0 var(--pem-gutter) !important;
}

@media (max-width: 768px) {
    .pem-elementor-page .elementor-section.pem-split > .elementor-container,
    .pem-elementor-page .elementor-section.pem-hero > .elementor-container {
        grid-template-columns: 1fr !important;
    }
    .pem-elementor-page .elementor-section.pem-split--reverse > .elementor-container > :first-child {
        order: initial !important;
    }
}