/* =========================================================
   AXIA — CONTACT PAGE
   FINAL CONSOLIDATED FILE
   ========================================================= */


/* =========================================================
   THEME TOKENS / SHARED SECTION SETUP
   ========================================================= */

.axia-contact-hero,
.axia-contact-details,
.axia-contact-visit,
.axia-contact-directions,
.axia-contact-arrival {
    --axia-purple: #351377;
    --axia-purple-mid: #7567dd;
    --axia-purple-soft: #a98ae5;
    --axia-lilac: #f5f0fb;
    --axia-lilac-deep: #e8dcf7;
    --axia-white: #ffffff;
    --axia-text: #2e2940;
    --axia-muted: #5f5a6d;
    --axia-border: rgba(53, 19, 119, 0.10);
    --axia-shadow: 0 14px 34px rgba(53, 19, 119, 0.07);
    --axia-shadow-strong: 0 18px 46px rgba(53, 19, 119, 0.11);
    --axia-squiggle-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 70'%3E%3Cpath d='M4 43C22 18 39 63 60 37C81 11 101 51 124 31C134 23 141 20 146 22' fill='none' stroke='%237567dd' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    --axia-squiggle-soft-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 70'%3E%3Cpath d='M4 43C22 18 39 63 60 37C81 11 101 51 124 31C134 23 141 20 146 22' fill='none' stroke='%23c9b6f2' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
    --axia-spark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L23.2 14.5 L36 20 L23.2 23.2 L20 36 L16.8 23.2 L4 20 L16.8 16.8 Z' fill='none' stroke='%237567dd' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
    --axia-spark-soft-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2 L23.2 14.5 L36 20 L23.2 23.2 L20 36 L16.8 23.2 L4 20 L16.8 16.8 Z' fill='none' stroke='%23c9b6f2' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");

    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}


/* =========================================================
   CONTENT WIDTH
   ========================================================= */

.axia-contact-details > *,
.axia-contact-visit > *,
.axia-contact-directions > *,
.axia-contact-arrival > * {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.axia-contact-hero h1,
.axia-contact-visit h2,
.axia-contact-directions h2,
.axia-contact-arrival h2,
.axia-contact-visit h3,
.axia-contact-help-card h3,
.axia-contact-travel summary {
    color: var(--axia-purple) !important;
}


.axia-contact-visit h2,
.axia-contact-directions h2,
.axia-contact-arrival h2 {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    font-size: clamp(36px, 4vw, 52px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
}


.axia-contact-visit h3,
.axia-contact-help-card h3 {
    font-size: clamp(25px, 2.5vw, 34px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}


.axia-contact-details p,
.axia-contact-visit p,
.axia-contact-directions p,
.axia-contact-arrival p,
.axia-contact-arrival li {
    color: var(--axia-text);
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.65;
}


.axia-contact-details a:not(.wp-block-button__link),
.axia-contact-visit a:not(.wp-block-button__link),
.axia-contact-directions a:not(.wp-block-button__link),
.axia-contact-arrival a:not(.wp-block-button__link) {
    color: var(--axia-purple) !important;
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* =========================================================
   HERO
   ========================================================= */

.axia-contact-hero {
    padding: 0 !important;
    background: #eee;
}


.axia-contact-hero__cover {
    min-height: clamp(360px, 35vw, 520px) !important;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(38px, 5vw, 70px) 22px !important;

    background-position: center !important;
    background-size: cover !important;
}


.axia-contact-hero__cover .wp-block-cover__background {
    background: rgba(25, 12, 38, 0.14) !important;
}


/* glass card */
.axia-contact-hero__panel {
    position: relative;
    width: min(92%, 620px) !important;

    padding: clamp(30px, 4vw, 50px) !important;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88),
            rgba(255, 255, 255, 0.76)
        ) !important;

    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;

    box-shadow:
        0 18px 46px rgba(53, 19, 119, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;

    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);

    overflow: hidden;
}


.axia-contact-hero__panel::before {
    content: "";

    position: absolute;
    inset: 8px;

    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 20px;

    pointer-events: none;
}


.axia-contact-hero__panel h1 {
    position: relative;
    z-index: 2;

    max-width: 900px;

    margin: 0 auto 18px !important;

    color: var(--axia-purple) !important;
    font-size: clamp(50px, 6vw, 82px) !important;
    font-weight: 700 !important;
    line-height: 0.98 !important;
    letter-spacing: -0.045em !important;

    text-align: center !important;
}


.axia-contact-hero__panel p {
    position: relative;
    z-index: 2;

    max-width: 500px;

    margin: 0 auto !important;

    color: #383242 !important;

    font-size: clamp(16px, 1.7vw, 20px) !important;
    line-height: 1.5 !important;

    text-align: center !important;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.axia-contact-details {
    padding: 10px clamp(20px, 5vw, 64px) clamp(58px, 6vw, 84px);

    background:
        radial-gradient(
            circle at 12% 30%,
            rgba(117, 103, 221, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(203, 184, 238, 0.14),
            transparent 27%
        ),
        #f5f0fb !important;
}


.axia-contact-details > .wp-block-columns {
    max-width: 1120px !important;

    gap: 28px !important;
    align-items: stretch;

    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* The actual three contact cards */
.axia-contact-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    min-width: 0;
    min-height: 310px;

    padding: 116px 30px 28px !important;

    text-align: center;

    background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.96),
            rgba(255, 255, 255, 0.88)
        ) !important;

    border: 1px solid rgba(53, 19, 119, 0.08) !important;
    border-radius: 26px !important;

    box-shadow: var(--axia-shadow) !important;

    transition:
        transform 200ms ease,
        box-shadow 200ms ease;
}


.axia-contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--axia-shadow-strong) !important;
}


/* circular icon background */
.axia-contact-card::before {
    content: "";

    position: absolute;
    top: 24px;
    left: 50%;

    width: 70px;
    height: 70px;

    transform: translateX(-50%);

    border-radius: 50%;

    background-color: #eee5fb;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px;
}


/* CSS-generated card heading */
.axia-contact-card::after {
    position: absolute;
    top: 101px;
    left: 20px;
    right: 20px;

    color: var(--axia-purple);

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}


.axia-contact-card--email::after {
    content: "Email us";
}


.axia-contact-card--phone::after {
    content: "Call us";
}


.axia-contact-card--visit::after {
    content: "Visit AXIA";
}


/* Envelope */
.axia-contact-card--email::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='10' width='36' height='28' rx='4' fill='none' stroke='%23351377' stroke-width='3'/%3E%3Cpath d='M8 14l16 13 16-13' fill='none' stroke='%23351377' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* Phone */
.axia-contact-card--phone::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M14 7l7 8-5 6c4 7 8 11 15 15l6-5 8 7c-3 6-7 8-12 7C20 42 6 28 4 15 3 10 7 6 14 7z' fill='none' stroke='%23351377' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* Location */
.axia-contact-card--visit::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 44s14-13 14-25A14 14 0 0010 19c0 12 14 25 14 25z' fill='none' stroke='%23351377' stroke-width='3'/%3E%3Ccircle cx='24' cy='19' r='5' fill='none' stroke='%23351377' stroke-width='3'/%3E%3C/svg%3E");
}


.axia-contact-card p {
    width: 100%;
    margin-top: 28px !important;
    margin-bottom: 24px !important;

    color: #3c3742;
    line-height: 1.55;
}


.axia-contact-card .wp-block-buttons {
    margin-top: auto !important;
    margin-bottom: 0 !important;
}


/* Safe cleanup if axia-contact-card was accidentally left on an inner block */
.axia-contact-card .axia-contact-card {
    min-height: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


.axia-contact-card .axia-contact-card::before,
.axia-contact-card .axia-contact-card::after {
    display: none !important;
}


/* =========================================================
   SHARED BUTTONS
   ========================================================= */

.axia-contact-details .wp-block-button__link,
.axia-contact-visit .wp-block-button__link,
.axia-contact-directions .wp-block-button__link,
.axia-contact-arrival .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 13px 25px !important;

    background: var(--axia-purple) !important;
    color: #ffffff !important;

    border: 1px solid var(--axia-purple) !important;
    border-radius: 999px !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 20px rgba(53, 19, 119, 0.16) !important;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.axia-contact-details .wp-block-button__link:hover,
.axia-contact-visit .wp-block-button__link:hover,
.axia-contact-directions .wp-block-button__link:hover,
.axia-contact-arrival .wp-block-button__link:hover {
    transform: translateY(-2px);

    background: #4c2392 !important;
    border-color: #4c2392 !important;

    box-shadow:
        0 12px 26px rgba(53, 19, 119, 0.22) !important;
}


.axia-contact-details .wp-block-button,
.axia-contact-visit .wp-block-button,
.axia-contact-directions .wp-block-button,
.axia-contact-arrival .wp-block-button {
    margin: 0 !important;
}


/* =========================================================
   VISITING AXIA
   ========================================================= */

.axia-contact-visit {
    padding: clamp(68px, 7vw, 100px) clamp(20px, 5vw, 64px);

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(203, 184, 238, 0.10),
            transparent 23%
        ),
        #ffffff !important;
}


.axia-contact-visit > .wp-block-columns {
    max-width: 1160px !important;

    align-items: center;
    gap: clamp(36px, 6vw, 82px);

    margin-bottom: 0 !important;
}


.axia-contact-visit > .wp-block-columns > .wp-block-column {
    min-width: 0;
}


.axia-contact-visit > .wp-block-columns > .wp-block-column:first-child {
    position: relative;
    padding-left: 42px;
}


.axia-contact-visit > .wp-block-columns > .wp-block-column:first-child::before {
    content: "";

    position: absolute;
    top: 80px;
    left: 0;

    width: 27px;
    height: 27px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 44s14-13 14-25A14 14 0 0010 19c0 12 14 25 14 25z' fill='none' stroke='%237567dd' stroke-width='3'/%3E%3Ccircle cx='24' cy='19' r='5' fill='none' stroke='%237567dd' stroke-width='3'/%3E%3C/svg%3E")
        center / contain no-repeat;
}


.axia-contact-visit h2 {
    text-align: left !important;
}


.axia-contact-visit h3 {
    margin-top: 28px !important;
    margin-bottom: 10px !important;
}


.axia-contact-visit .wp-block-buttons {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
}


/* Map */
.axia-contact-map {
    width: 100%;
    min-height: 430px;

    overflow: hidden;

    border: 1px solid rgba(53, 19, 119, 0.08);
    border-radius: 26px;

    background: #ece8f3;

    box-shadow:
        0 16px 40px rgba(53, 19, 119, 0.10);
}


.axia-contact-map iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;
    min-height: 430px;

    border: 0 !important;
}


/* Decorative squiggle */
.axia-contact-visit::before {
    content: "";

    position: absolute;
    left: 2%;
    top: 54%;

    width: 125px;
    height: 60px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 70'%3E%3Cpath d='M4 43C22 18 39 63 60 37C81 11 101 51 124 31C134 23 141 20 146 22' fill='none' stroke='%23c5aff0' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E")
        center / contain no-repeat;

    opacity: 0.70;

    pointer-events: none;
    z-index: 1;
}


/* Little diamond */
.axia-contact-visit::after {
    content: "";
    position: absolute;
    right: 4%;
    bottom: 40px;
    width: 46px;
    height: 46px;
    background: var(--axia-spark-soft-svg) center / contain no-repeat;
    pointer-events: none;
    z-index: 1;

}


/* =========================================================
   DIRECTIONS
   ========================================================= */

.axia-contact-directions {
    padding:
        clamp(70px, 7vw, 96px)
        clamp(20px, 5vw, 64px) !important;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(117, 103, 221, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(203, 184, 238, 0.12),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #f7f3fc 0%,
            #f2ecfa 100%
        ) !important;
}


.axia-contact-directions > h2 {
    max-width: 1240px !important;

    margin:
        0
        auto
        12px !important;

    text-align: center !important;
}


.axia-contact-directions > p {
    max-width: 760px !important;

    margin:
        0
        auto
        42px !important;

    color: #575060 !important;

    text-align: center !important;
}


/* TWO-COLUMN DIRECTIONS LAYOUT
   IMPORTANT: form does NOT stretch to match open accordions */
.axia-contact-directions__layout {
    width: 100% !important;
    max-width: 1240px !important;

    margin: 0 auto !important;

    gap: clamp(30px, 5vw, 68px) !important;

    align-items: flex-start !important;
}


.axia-contact-directions__layout > .wp-block-column {
    min-width: 0;
    align-self: flex-start !important;
}


.axia-contact-directions__accordions {
    display: flex !important;
    flex-direction: column !important;

    gap: 18px !important;

    min-width: 0;
}


/* =========================================================
   TRAVEL ACCORDIONS
   ========================================================= */

.axia-contact-travel {
    overflow: hidden;

    margin: 0 !important;

    background: rgba(255, 255, 255, 0.90) !important;

    border: 1px solid rgba(53, 19, 119, 0.08) !important;
    border-radius: 20px !important;

    box-shadow:
        0 10px 28px rgba(53, 19, 119, 0.055) !important;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}


.axia-contact-travel:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 34px rgba(53, 19, 119, 0.09) !important;
}


.axia-contact-travel[open] {
    background: #ffffff !important;

    box-shadow:
        0 16px 38px rgba(53, 19, 119, 0.09) !important;
}


.axia-contact-travel summary {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 84px;

    padding:
        18px
        62px
        18px
        92px;

    cursor: pointer;
    font-size: clamp(22px, 2vw, 28px) !important;
    font-weight: 700 !important;

    list-style: none;
}


.axia-contact-travel summary::-webkit-details-marker {
    display: none;
}


/* Icon circle */
.axia-contact-travel summary::before {
    content: "";

    position: absolute;
    left: 18px;
    top: 50%;

    width: 58px;
    height: 58px;

    transform: translateY(-50%);

    border-radius: 50%;

    background-color: #eee5fb;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 34px;
}


/* Arrow */
.axia-contact-travel summary::after {
    content: "";

    position: absolute;
    right: 24px;
    top: 50%;

    width: 15px;
    height: 15px;

    border-right: 4px solid var(--axia-purple);
    border-bottom: 4px solid var(--axia-purple);

    transform:
        translateY(-65%)
        rotate(45deg);

    transition: transform 200ms ease;
}


.axia-contact-travel[open] summary::after {
    transform:
        translateY(-25%)
        rotate(225deg);
}


/* Divider when open */
.axia-contact-travel[open] summary {
    border-bottom: 1px solid rgba(53, 19, 119, 0.14);
}


.axia-contact-travel > *:not(summary) {
    margin-left: 24px !important;
    margin-right: 24px !important;
}


.axia-contact-travel > p:first-of-type {
    padding-top: 18px;
}


.axia-contact-travel > p:last-child {
    padding-bottom: 22px;

    margin-bottom: 0 !important;
}


/* Car icon */
.axia-contact-travel--car summary::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M8 25l4-11h24l4 11v12H8V25z' fill='none' stroke='%23351377' stroke-width='3'/%3E%3Ccircle cx='15' cy='36' r='4' fill='none' stroke='%23351377' stroke-width='3'/%3E%3Ccircle cx='33' cy='36' r='4' fill='none' stroke='%23351377' stroke-width='3'/%3E%3C/svg%3E");
}


/* Train icon */
.axia-contact-travel--train summary::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='11' y='5' width='26' height='33' rx='6' fill='none' stroke='%23351377' stroke-width='3'/%3E%3Cpath d='M15 14h18M16 30h4M28 30h4M17 38l-5 6M31 38l5 6' fill='none' stroke='%23351377' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* Bus icon */
.axia-contact-travel--bus summary::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='9' y='5' width='30' height='35' rx='5' fill='none' stroke='%23351377' stroke-width='3'/%3E%3Cpath d='M13 14h22M14 31h5M29 31h5M15 40v4M33 40v4' fill='none' stroke='%23351377' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* =========================================================
   DIRECTIONS FORM
   Natural height only — never matches accordion column height
   ========================================================= */

.axia-contact-directions__form {
    align-self: flex-start !important;

    height: auto !important;
    min-height: 0 !important;

    padding: clamp(30px, 3vw, 42px) !important;

    background:
        rgba(255, 255, 255, 0.82) !important;

    border: 1px solid rgba(53, 19, 119, 0.09) !important;
    border-radius: 26px !important;

    box-shadow:
        0 14px 34px rgba(53, 19, 119, 0.06) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.axia-contact-directions__form input,
.axia-contact-directions__form textarea,
.axia-contact-directions__form select {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    padding: 14px 15px !important;

    border: 1px solid rgba(53, 19, 119, 0.16) !important;
    border-radius: 10px !important;

    background:
        rgba(255, 255, 255, 0.86) !important;

    color: var(--axia-text) !important;

    font: inherit !important;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.axia-contact-directions__form textarea {
    min-height: 120px;
    resize: vertical;
}


.axia-contact-directions__form input:focus,
.axia-contact-directions__form textarea:focus,
.axia-contact-directions__form select:focus {
    outline: none !important;

    border-color: var(--axia-purple-mid) !important;

    box-shadow:
        0 0 0 3px rgba(117, 103, 221, 0.12) !important;
}


/* Form submit button */
.axia-contact-directions__form input[type="submit"],
.axia-contact-directions__form button[type="submit"] {
    width: auto !important;
    min-height: 50px !important;

    padding: 12px 24px !important;

    background: var(--axia-purple) !important;
    color: #ffffff !important;

    border: 1px solid var(--axia-purple) !important;
    border-radius: 999px !important;

    font-weight: 700 !important;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(53, 19, 119, 0.16) !important;
}


/* =========================================================
   DIRECTIONS BUTTONS
   ========================================================= */

.axia-contact-directions__buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap;

    width: 100% !important;
    max-width: 1240px !important;

    margin:
        34px
        auto
        0 !important;

    gap: 12px !important;
}


.axia-contact-directions__buttons .wp-block-button__link {
    min-height: 52px !important;

    padding: 13px 27px !important;

    border-radius: 999px !important;

    background: var(--axia-purple) !important;
    color: #ffffff !important;

    border: 1px solid var(--axia-purple) !important;

    font-weight: 700 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 20px rgba(53, 19, 119, 0.14) !important;
}


.axia-contact-directions__buttons
.wp-block-button:nth-child(2)
.wp-block-button__link {
    background:
        rgba(255, 255, 255, 0.54) !important;

    color: var(--axia-purple) !important;

    border-color: var(--axia-purple-mid) !important;

    box-shadow: none !important;
}


.axia-contact-directions__buttons
.wp-block-button:nth-child(2)
.wp-block-button__link:hover {
    background: var(--axia-purple) !important;
    color: #ffffff !important;
    border-color: var(--axia-purple) !important;
}


/* Directions decorations */
.axia-contact-directions::before {
    content: "";
    position: absolute;
    left: 3%;
    top: 70px;
    width: 48px;
    height: 48px;
    background: var(--axia-spark-soft-svg) center / contain no-repeat;
    pointer-events: none;
    z-index: 1;

}


.axia-contact-directions::after {
    content: "";

    position: absolute;
    right: 3%;
    top: 70px;

    width: 64px;
    height: 64px;

    opacity: 0.46;

    background-image:
        radial-gradient(
            circle,
            #9c7ddb 2px,
            transparent 2.5px
        );

    background-size: 14px 14px;

    pointer-events: none;
    z-index: 1;
}


/* =========================================================
   ARRIVING EARLY
   ========================================================= */

.axia-contact-arrival {
    padding:
        clamp(70px, 7vw, 100px)
        clamp(20px, 5vw, 64px) !important;

    background:
        radial-gradient(
            circle at 85% 70%,
            rgba(203, 184, 238, 0.08),
            transparent 25%
        ),
        #ffffff !important;
}


.axia-contact-arrival > .wp-block-columns {
    width: 100% !important;
    max-width: 1120px !important;

    margin: 0 auto !important;

    gap: clamp(42px, 7vw, 90px) !important;

    align-items: stretch !important;
}


.axia-contact-arrival > .wp-block-columns > .wp-block-column {
    min-width: 0;
}


.axia-contact-arrival__info {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0;
}


.axia-contact-arrival__info h2 {
    margin:
        0
        0
        22px !important;

    text-align: left !important;
}


.axia-contact-arrival__info > p {
    margin-top: 0 !important;
}


.axia-contact-arrival__info ul {
    width: 100%;

    margin:
        24px
        0
        0 !important;

    padding: 0 !important;

    list-style: none;
}


.axia-contact-arrival__info li {
    position: relative;

    padding-left: 32px;

    margin-bottom: 14px;
}


.axia-contact-arrival__info li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 2px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    border: 2px solid #c8b5f2;
    border-radius: 50%;

    color: var(--axia-purple-mid);

    font-size: 10px;
    font-weight: 800;
}


/* =========================================================
   HELP CARD
   ========================================================= */

.axia-contact-help-card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0;

    padding:
        clamp(34px, 4vw, 48px) !important;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(245, 238, 252, 0.96),
            rgba(229, 214, 247, 0.90)
        ) !important;

    border: 1px solid rgba(53, 19, 119, 0.10) !important;
    border-radius: 28px !important;

    box-shadow:
        0 16px 40px rgba(53, 19, 119, 0.09) !important;
}


.axia-contact-help-card h3 {
    position: relative;
    z-index: 2;

    margin:
        0
        0
        16px !important;
}


.axia-contact-help-card p,
.axia-contact-help-card a,
.axia-contact-help-card .wp-block-buttons {
    position: relative;
    z-index: 2;
}


.axia-contact-help-card .wp-block-buttons {
    margin-top: 22px !important;
}


/* Squiggle in help card */
.axia-contact-help-card::before {
    content: "";

    position: absolute;
    right: 20px;
    top: 24px;

    width: 90px;
    height: 42px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 70'%3E%3Cpath d='M4 43C22 18 39 63 60 37C81 11 101 51 124 31C134 23 141 20 146 22' fill='none' stroke='%23a98ae5' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E")
        center / contain no-repeat;

    opacity: 0.64;

    pointer-events: none;
}


/* Sparkle */
.axia-contact-help-card::after {
    content: "";
    position: absolute;
    right: 42px;
    bottom: 46px;
    width: 48px;
    height: 48px;
    background: var(--axia-spark-svg) center / contain no-repeat;
    pointer-events: none;

}


/* Arrival overlapping rings */
.axia-contact-arrival::before {
    content: "";
    position: absolute;
    left: 1%;
    bottom: 56px;
    width: 48px;
    height: 48px;
    background: var(--axia-spark-soft-svg) center / contain no-repeat;
    pointer-events: none;
    z-index: 1;

}


.axia-contact-arrival::after {
    content: "";
    position: absolute;
    left: 5%;
    bottom: 24px;
    width: 34px;
    height: 34px;
    background: var(--axia-spark-svg) center / contain no-repeat;
    pointer-events: none;
    z-index: 1;

}


/* =========================================================
   GUTENBERG CLEANUP
   ========================================================= */

.axia-contact-details .wp-block-columns,
.axia-contact-visit .wp-block-columns,
.axia-contact-directions .wp-block-columns,
.axia-contact-arrival .wp-block-columns {
    margin-left: auto !important;
    margin-right: auto !important;
}


.axia-contact-details .wp-block-buttons,
.axia-contact-visit .wp-block-buttons,
.axia-contact-directions .wp-block-buttons,
.axia-contact-arrival .wp-block-buttons {
    margin-bottom: 0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .axia-contact-details {
        padding-left: 24px;
        padding-right: 24px;
    }


    .axia-contact-details > .wp-block-columns,
    .axia-contact-visit > .wp-block-columns,
    .axia-contact-directions__layout,
    .axia-contact-arrival > .wp-block-columns {
        flex-direction: column !important;
    }


    .axia-contact-card,
    .axia-contact-visit .wp-block-column,
    .axia-contact-directions__layout > .wp-block-column,
    .axia-contact-arrival .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }


    .axia-contact-card {
        min-height: 280px;
    }


    .axia-contact-visit > .wp-block-columns > .wp-block-column:first-child {
        padding-left: 0;
    }


    .axia-contact-visit > .wp-block-columns > .wp-block-column:first-child::before {
        display: none;
    }


    .axia-contact-visit::before,
    .axia-contact-visit::after,
    .axia-contact-directions::before,
    .axia-contact-directions::after {
        opacity: 0.22;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .axia-contact-details,
    .axia-contact-visit,
    .axia-contact-directions,
    .axia-contact-arrival {
        padding:
            54px
            max(18px, env(safe-area-inset-right))
            54px
            max(18px, env(safe-area-inset-left)) !important;
    }


    .axia-contact-hero__cover {
        min-height: 380px !important;
        padding: 24px 18px !important;
    }


    .axia-contact-hero__panel {
        width: 94% !important;

        padding:
            28px
            20px !important;

        border-radius: 22px !important;
    }


    .axia-contact-hero__panel::before {
        inset: 6px;
        border-radius: 17px;
    }


    .axia-contact-hero__panel h1 {
        font-size: clamp(43px, 14vw, 60px) !important;
    }


    .axia-contact-details {
        padding-top: 18px !important;
    }


    .axia-contact-details > .wp-block-columns {
        gap: 18px !important;
    }


    .axia-contact-card {
        min-height: 270px;

        padding:
            112px
            20px
            24px !important;
    }


    .axia-contact-map,
    .axia-contact-map iframe {
        min-height: 340px;
    }


    .axia-contact-travel summary {
        min-height: 72px;

        padding:
            16px
            50px
            16px
            78px;

        font-size: 22px !important;
    }


    .axia-contact-travel summary::before {
        left: 12px;

        width: 52px;
        height: 52px;
    }


    .axia-contact-travel summary::after {
        right: 18px;

        width: 13px;
        height: 13px;

        border-right-width: 3px;
        border-bottom-width: 3px;
    }


    .axia-contact-directions__form {
        width: 100% !important;
        padding: 24px 20px !important;
    }


    .axia-contact-directions__buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }


    .axia-contact-directions__buttons .wp-block-button,
    .axia-contact-directions__buttons .wp-block-button__link {
        width: 100% !important;
        box-sizing: border-box;
    }


    .axia-contact-help-card {
        padding:
            30px
            22px !important;
    }


    /* Decorations stay visible but unobtrusive */
    .axia-contact-visit::before,
    .axia-contact-visit::after,
    .axia-contact-directions::before,
    .axia-contact-directions::after,
    .axia-contact-arrival::before,
    .axia-contact-arrival::after {
        opacity: 0.18;
    }
}



/* =========================================================
   GLOBAL TYPOGRAPHY + DECORATION DENSITY
   Keep AXIA's site-wide fonts; contact CSS controls only
   size, weight, spacing and colour.
   ========================================================= */

/*
 * No font-family is declared anywhere in this contact file.
 * Headings, body copy, buttons and form fields therefore use
 * the typography already defined by AXIA's global stylesheet.
 */


/* CONTACT CARDS — more background marks without cluttering cards */
.axia-contact-details {
    background-color: #f5f0fb !important;

    background-image:
        var(--axia-squiggle-soft-svg),
        var(--axia-spark-svg),
        var(--axia-spark-soft-svg),
        var(--axia-spark-soft-svg),
        radial-gradient(
            circle at 12% 30%,
            rgba(117, 103, 221, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(203, 184, 238, 0.14),
            transparent 27%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-size:
        145px 68px,
        46px 46px,
        72px 72px,
        58px 58px,
        auto,
        auto !important;

    background-position:
        3% 18%,
        94% 15%,
        5% 86%,
        95% 82%,
        center,
        center !important;
}


/* VISITING AXIA — retain existing squiggle/diamond and add two more marks */
.axia-contact-visit {
    background-color: #ffffff !important;

    background-image:
        var(--axia-spark-svg),
        var(--axia-spark-soft-svg),
        var(--axia-squiggle-soft-svg),
        radial-gradient(
            circle at 88% 18%,
            rgba(203, 184, 238, 0.10),
            transparent 23%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-size:
        44px 44px,
        68px 68px,
        125px 58px,
        auto !important;

    background-position:
        91% 22%,
        7% 20%,
        88% 88%,
        center !important;
}


/* DIRECTIONS — denser AXIA pattern around, never behind form controls */
.axia-contact-directions {
    background-color: #f4effb !important;

    background-image:
        var(--axia-squiggle-svg),
        var(--axia-squiggle-soft-svg),
        var(--axia-spark-soft-svg),
        var(--axia-spark-svg),
        radial-gradient(
            circle at 12% 18%,
            rgba(117, 103, 221, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 90% 82%,
            rgba(203, 184, 238, 0.12),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #f7f3fc 0%,
            #f2ecfa 100%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-size:
        145px 68px,
        125px 58px,
        72px 72px,
        44px 44px,
        auto,
        auto,
        auto !important;

    background-position:
        2% 32%,
        97% 57%,
        4% 91%,
        94% 28%,
        center,
        center,
        center !important;
}


/* ARRIVAL — retain rings and add several light marks across the section */
.axia-contact-arrival {
    background-color: #ffffff !important;

    background-image:
        var(--axia-squiggle-soft-svg),
        var(--axia-spark-svg),
        var(--axia-spark-soft-svg),
        var(--axia-spark-soft-svg),
        radial-gradient(
            circle at 85% 70%,
            rgba(203, 184, 238, 0.08),
            transparent 25%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-size:
        140px 64px,
        46px 46px,
        54px 54px,
        66px 66px,
        auto !important;

    background-position:
        92% 14%,
        6% 20%,
        93% 84%,
        8% 83%,
        center !important;
}


/* Additional small decorations around the contact-card row itself */
.axia-contact-details > .wp-block-columns::before,
.axia-contact-details > .wp-block-columns::after,
.axia-contact-directions__layout::before,
.axia-contact-directions__layout::after,
.axia-contact-arrival > .wp-block-columns::before,
.axia-contact-arrival > .wp-block-columns::after {
    content: "";
    position: absolute;
    display: block;
    pointer-events: none;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


.axia-contact-details > .wp-block-columns::before {
    width: 82px;
    height: 38px;
    left: -72px;
    top: 42%;
    background-image: var(--axia-squiggle-svg);
    transform: rotate(-10deg);
}


.axia-contact-details > .wp-block-columns::after {
    width: 42px;
    height: 42px;
    right: -54px;
    top: 18%;
    background-image: var(--axia-spark-svg);
}


.axia-contact-directions__layout {
    position: relative;
}


.axia-contact-directions__layout::before {
    width: 92px;
    height: 42px;
    left: -94px;
    bottom: 9%;
    background-image: var(--axia-squiggle-soft-svg);
    transform: rotate(8deg);
}


.axia-contact-directions__layout::after {
    width: 46px;
    height: 46px;
    right: -62px;
    bottom: 18%;
    background-image: var(--axia-spark-svg);
}


.axia-contact-arrival > .wp-block-columns {
    position: relative;
}


.axia-contact-arrival > .wp-block-columns::before {
    width: 86px;
    height: 40px;
    right: -84px;
    top: 24%;
    background-image: var(--axia-squiggle-svg);
    transform: rotate(10deg);
}


.axia-contact-arrival > .wp-block-columns::after {
    width: 44px;
    height: 44px;
    left: -64px;
    top: 20%;
    background-image: var(--axia-spark-svg);
}


/* On narrower screens keep the density, but push marks to the edges */
@media (max-width: 900px) {

    .axia-contact-details,
    .axia-contact-visit,
    .axia-contact-directions,
    .axia-contact-arrival {
        background-size:
            105px 50px,
            36px 36px,
            52px 52px,
            44px 44px,
            auto,
            auto !important;
    }

    .axia-contact-details > .wp-block-columns::before,
    .axia-contact-details > .wp-block-columns::after,
    .axia-contact-directions__layout::before,
    .axia-contact-directions__layout::after,
    .axia-contact-arrival > .wp-block-columns::before,
    .axia-contact-arrival > .wp-block-columns::after {
        display: none;
    }
}


@media (max-width: 600px) {

    /*
     * Decorative marks remain present on mobile but are smaller and
     * lower-opacity so they never compete with the content.
     */
    .axia-contact-details,
    .axia-contact-visit,
    .axia-contact-directions,
    .axia-contact-arrival {
        background-size:
            82px 40px,
            30px 30px,
            42px 42px,
            34px 34px,
            auto,
            auto !important;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .axia-contact-card,
    .axia-contact-travel,
    .axia-contact-travel summary::after,
    .axia-contact-details .wp-block-button__link,
    .axia-contact-visit .wp-block-button__link,
    .axia-contact-directions .wp-block-button__link,
    .axia-contact-arrival .wp-block-button__link {
        transition: none !important;
    }


    .axia-contact-card:hover,
    .axia-contact-travel:hover,
    .axia-contact-details .wp-block-button__link:hover,
    .axia-contact-visit .wp-block-button__link:hover,
    .axia-contact-directions .wp-block-button__link:hover,
    .axia-contact-arrival .wp-block-button__link:hover {
        transform: none !important;
    }
}
/* =========================================================
   CONTACT PAGE — LIVE POLISH
   Equal card spacing + cleaner arrival ticks
   ========================================================= */


/* ---------------------------------------------------------
   CONTACT CARDS
   Centre the row vertically within the lilac section
   --------------------------------------------------------- */

.axia-contact-details {
    padding-top: clamp(58px, 6vw, 84px) !important;
    padding-bottom: clamp(58px, 6vw, 84px) !important;
}


/* ---------------------------------------------------------
   ARRIVING EARLY LIST
   Replace the tiny outlined text ticks with proper AXIA icons
   --------------------------------------------------------- */

.axia-contact-arrival__info li {
    position: relative;

    padding-left: 38px !important;
    margin-bottom: 16px !important;
}


/* Clean lilac check circle */
.axia-contact-arrival__info li::before {
    content: "" !important;

    position: absolute;
    left: 0;
    top: 3px;

    width: 24px !important;
    height: 24px !important;

    border: 0 !important;
    border-radius: 50%;

    background-color: #eee5fb;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.3l3.3 3.3 7.7-8' fill='none' stroke='%23351377' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;

    box-shadow:
        0 3px 9px rgba(53, 19, 119, 0.08);

    color: transparent !important;
    font-size: 0 !important;
}


/* ---------------------------------------------------------
   MOBILE
   Keep contact-card section equally spaced here too
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .axia-contact-details {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
    }

    .axia-contact-arrival__info li {
        padding-left: 36px !important;
        margin-bottom: 14px !important;
    }

    .axia-contact-arrival__info li::before {
        width: 22px !important;
        height: 22px !important;
        background-size: 14px 14px;
    }
}
/* =========================================================
   AXIA CONTACT PAGE — STAR ANIMATION
   Squiggles remain static.
   ALL stars fade, drift and gently scale.
   ========================================================= */


/* =========================================================
   1. STOP SQUIGGLE ANIMATION
   Keep all existing rotations / mirroring / placement
   ========================================================= */

.axia-contact-details > .wp-block-columns::before,
.axia-contact-visit::before,
.axia-contact-directions__layout::before,
.axia-contact-arrival > .wp-block-columns::before {
    animation: none !important;
}


/* =========================================================
   2. REMOVE STATIC STARS FROM SECTION BACKGROUNDS
   Keep squiggles + gradients exactly where they are.
   ========================================================= */


/* CONTACT CARDS */

.axia-contact-details {
    background-color: #f5f0fb !important;

    background-image:
        var(--axia-squiggle-soft-svg),
        radial-gradient(
            circle at 12% 30%,
            rgba(117, 103, 221, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(203, 184, 238, 0.14),
            transparent 27%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-size:
        145px 68px,
        auto,
        auto !important;

    background-position:
        3% 18%,
        center,
        center !important;
}


/* VISITING AXIA */

.axia-contact-visit {
    background-color: #ffffff !important;

    background-image:
        var(--axia-squiggle-soft-svg),
        radial-gradient(
            circle at 88% 18%,
            rgba(203, 184, 238, 0.10),
            transparent 23%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-size:
        125px 58px,
        auto !important;

    background-position:
        88% 88%,
        center !important;
}


/* DIRECTIONS */

.axia-contact-directions {
    background-color: #f4effb !important;

    background-image:
        var(--axia-squiggle-svg),
        var(--axia-squiggle-soft-svg),

        radial-gradient(
            circle at 12% 18%,
            rgba(117, 103, 221, 0.08),
            transparent 24%
        ),

        radial-gradient(
            circle at 90% 82%,
            rgba(203, 184, 238, 0.12),
            transparent 25%
        ),

        linear-gradient(
            180deg,
            #f7f3fc 0%,
            #f2ecfa 100%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat !important;

    background-size:
        145px 68px,
        125px 58px,
        auto,
        auto,
        auto !important;

    background-position:
        2% 32%,
        97% 57%,
        center,
        center,
        center !important;
}


/* ARRIVING EARLY */

.axia-contact-arrival {
    background-color: #ffffff !important;

    background-image:
        var(--axia-squiggle-soft-svg),

        radial-gradient(
            circle at 85% 70%,
            rgba(203, 184, 238, 0.08),
            transparent 25%
        ) !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-size:
        140px 64px,
        auto !important;

    background-position:
        92% 14%,
        center !important;
}



/* =========================================================
   3. CONTACT CARD SECTION STARS
   Recreates the stars that were previously baked into
   the background.
   ========================================================= */

.axia-contact-details::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background-image:
        var(--axia-spark-svg),
        var(--axia-spark-soft-svg);

    background-repeat:
        no-repeat,
        no-repeat;

    background-size:
        46px 46px,
        72px 72px;

    background-position:
        94% 15%,
        5% 86%;

    animation:
        axia-star-field-a
        7.8s
        ease-in-out
        infinite;
}


.axia-contact-details::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background:
        var(--axia-spark-soft-svg)
        95% 82% / 58px 58px
        no-repeat;

    animation:
        axia-star-field-b
        9.3s
        ease-in-out
        2.2s
        infinite;
}



/* Existing star beside card row */

.axia-contact-details > .wp-block-columns::after {
    animation:
        axia-star-single-a
        7.1s
        ease-in-out
        1.1s
        infinite !important;
}



/* =========================================================
   4. VISITING AXIA STARS
   ========================================================= */

.axia-contact-visit::after {
    content: "";

    position: absolute;
    inset: 0;

    width: auto;
    height: auto;

    z-index: 1;
    pointer-events: none;

    background-image:
        var(--axia-spark-svg),
        var(--axia-spark-soft-svg),
        var(--axia-spark-soft-svg);

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    background-size:
        44px 44px,
        68px 68px,
        46px 46px;

    background-position:
        91% 22%,
        7% 20%,
        94% 88%;

    animation:
        axia-star-field-c
        8.9s
        ease-in-out
        0.7s
        infinite;
}



/* =========================================================
   5. DIRECTIONS STARS
   ========================================================= */

/*
 * ::before used to be one star.
 * It now carries that star PLUS the two previously-static
 * background stars.
 */

.axia-contact-directions::before {
    content: "";

    position: absolute;
    inset: 0;

    width: auto;
    height: auto;

    z-index: 1;
    pointer-events: none;

    background-image:
        var(--axia-spark-soft-svg),
        var(--axia-spark-svg),
        var(--axia-spark-soft-svg);

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    background-size:
        72px 72px,
        44px 44px,
        48px 48px;

    background-position:
        4% 91%,
        94% 28%,
        3% 8%;

    animation:
        axia-star-field-d
        10.2s
        ease-in-out
        2.6s
        infinite;
}


/* Existing star beside accordion/form layout */

.axia-contact-directions__layout::after {
    animation:
        axia-star-single-b
        8.2s
        ease-in-out
        0.4s
        infinite !important;
}



/* =========================================================
   6. ARRIVING EARLY STARS
   ========================================================= */

/*
 * Four-star animated field:
 * three stars that were baked into the section background
 * + the former bottom-left ::before star.
 */

.axia-contact-arrival::before {
    content: "";

    position: absolute;
    inset: 0;

    width: auto;
    height: auto;

    z-index: 1;
    pointer-events: none;

    background-image:
        var(--axia-spark-svg),
        var(--axia-spark-soft-svg),
        var(--axia-spark-soft-svg),
        var(--axia-spark-soft-svg);

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;

    background-size:
        46px 46px,
        54px 54px,
        66px 66px,
        48px 48px;

    background-position:
        6% 20%,
        93% 84%,
        8% 83%,
        2% 72%;

    animation:
        axia-star-field-e
        9.7s
        ease-in-out
        1.5s
        infinite;
}


/* Existing separate lower-left star */

.axia-contact-arrival::after {
    animation:
        axia-star-single-c
        7.4s
        ease-in-out
        3.8s
        infinite !important;
}


/* Existing star beside arrival columns */

.axia-contact-arrival > .wp-block-columns::after {
    animation:
        axia-star-single-d
        8.8s
        ease-in-out
        0.9s
        infinite !important;
}



/* =========================================================
   7. STAR FIELD ANIMATIONS
   Fields move very slightly while fading completely in/out.
   Different directions stop the page feeling synchronised.
   ========================================================= */


@keyframes axia-star-field-a {

    0%,
    100% {
        opacity: 0;
        transform: translate3d(-5px, 7px, 0);
    }

    20% {
        opacity: 0;
    }

    38% {
        opacity: 0.82;
        transform: translate3d(0, 0, 0);
    }

    58% {
        opacity: 1;
        transform: translate3d(4px, -4px, 0);
    }

    78% {
        opacity: 0;
        transform: translate3d(8px, -8px, 0);
    }
}


@keyframes axia-star-field-b {

    0%,
    100% {
        opacity: 0;
        transform: translate3d(6px, 5px, 0);
    }

    16% {
        opacity: 0;
    }

    35% {
        opacity: 0.72;
    }

    55% {
        opacity: 0.94;
        transform: translate3d(0, -4px, 0);
    }

    76% {
        opacity: 0;
        transform: translate3d(-6px, -9px, 0);
    }
}


@keyframes axia-star-field-c {

    0%,
    100% {
        opacity: 0;
        transform: translate3d(-4px, -3px, 0);
    }

    22% {
        opacity: 0;
    }

    39% {
        opacity: 0.76;
    }

    58% {
        opacity: 1;
        transform: translate3d(5px, 3px, 0);
    }

    80% {
        opacity: 0;
        transform: translate3d(9px, 7px, 0);
    }
}


@keyframes axia-star-field-d {

    0%,
    100% {
        opacity: 0;
        transform: translate3d(6px, 7px, 0);
    }

    18% {
        opacity: 0;
    }

    34% {
        opacity: 0.7;
    }

    56% {
        opacity: 0.96;
        transform: translate3d(0, -3px, 0);
    }

    79% {
        opacity: 0;
        transform: translate3d(-8px, -7px, 0);
    }
}


@keyframes axia-star-field-e {

    0%,
    100% {
        opacity: 0;
        transform: translate3d(-7px, 4px, 0);
    }

    21% {
        opacity: 0;
    }

    37% {
        opacity: 0.74;
    }

    59% {
        opacity: 1;
        transform: translate3d(3px, -4px, 0);
    }

    81% {
        opacity: 0;
        transform: translate3d(8px, -9px, 0);
    }
}



/* =========================================================
   8. INDIVIDUAL STAR ANIMATION
   Slight rotation + scaling gives the hand-drawn sparkles
   a little more life.
   ========================================================= */


@keyframes axia-star-single-a {

    0%,
    100% {
        opacity: 0;
        transform:
            translate3d(-4px, 5px, 0)
            scale(0.72)
            rotate(-8deg);
    }

    25% {
        opacity: 0;
    }

    43% {
        opacity: 0.9;
        transform:
            translate3d(0, 0, 0)
            scale(1)
            rotate(0deg);
    }

    60% {
        opacity: 1;
        transform:
            translate3d(3px, -4px, 0)
            scale(1.09)
            rotate(7deg);
    }

    79% {
        opacity: 0;
        transform:
            translate3d(6px, -8px, 0)
            scale(0.82)
            rotate(12deg);
    }
}


@keyframes axia-star-single-b {

    0%,
    100% {
        opacity: 0;
        transform:
            translate3d(5px, 4px, 0)
            scale(0.76)
            rotate(10deg);
    }

    18% {
        opacity: 0;
    }

    38% {
        opacity: 0.78;
    }

    56% {
        opacity: 1;
        transform:
            translate3d(0, -4px, 0)
            scale(1.12)
            rotate(-3deg);
    }

    77% {
        opacity: 0;
        transform:
            translate3d(-6px, -8px, 0)
            scale(0.8)
            rotate(-10deg);
    }
}


@keyframes axia-star-single-c {

    0%,
    100% {
        opacity: 0;
        transform:
            translate3d(-3px, 5px, 0)
            scale(0.7)
            rotate(-13deg);
    }

    24% {
        opacity: 0;
    }

    41% {
        opacity: 0.88;
    }

    59% {
        opacity: 1;
        transform:
            translate3d(2px, -3px, 0)
            scale(1.08)
            rotate(3deg);
    }

    81% {
        opacity: 0;
        transform:
            translate3d(6px, -7px, 0)
            scale(0.78)
            rotate(11deg);
    }
}


@keyframes axia-star-single-d {

    0%,
    100% {
        opacity: 0;
        transform:
            translate3d(4px, 6px, 0)
            scale(0.74)
            rotate(12deg);
    }

    20% {
        opacity: 0;
    }

    39% {
        opacity: 0.8;
    }

    57% {
        opacity: 1;
        transform:
            translate3d(-2px, -3px, 0)
            scale(1.1)
            rotate(0deg);
    }

    80% {
        opacity: 0;
        transform:
            translate3d(-6px, -8px, 0)
            scale(0.8)
            rotate(-9deg);
    }
}



/* =========================================================
   9. PERFORMANCE
   ========================================================= */

.axia-contact-details::before,
.axia-contact-details::after,
.axia-contact-details > .wp-block-columns::after,
.axia-contact-visit::after,
.axia-contact-directions::before,
.axia-contact-directions__layout::after,
.axia-contact-arrival::before,
.axia-contact-arrival::after,
.axia-contact-arrival > .wp-block-columns::after {
    will-change: transform, opacity;
}



/* =========================================================
   10. MOBILE
   Same animation, slightly quieter.
   ========================================================= */

@media (max-width: 600px) {

    .axia-contact-details::before,
    .axia-contact-details::after,
    .axia-contact-visit::after,
    .axia-contact-directions::before,
    .axia-contact-arrival::before {
        opacity: 0.72;
    }
}



/* =========================================================
   11. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .axia-contact-details::before,
    .axia-contact-details::after,
    .axia-contact-details > .wp-block-columns::after,
    .axia-contact-visit::after,
    .axia-contact-directions::before,
    .axia-contact-directions__layout::after,
    .axia-contact-arrival::before,
    .axia-contact-arrival::after,
    .axia-contact-arrival > .wp-block-columns::after {
        animation: none !important;
        transform: none !important;
        opacity: 0.55 !important;
    }
}