/* =========================================================
   AURÉLIA MED SPA
   Luxury Concept Website
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Italiana&family=Manrope:wght@400;500;600&display=swap');

:root {
    --cream: #f6f1ea;
    --cream-dark: #ebe1d6;
    --sand: #d7c5b5;
    --taupe: #806652;
    --brown: #5d493d;
    --dark: #28211d;
    --black: #171412;
    --white: #fffdf9;
    --muted: #766b64;
    --line: rgba(50, 40, 34, .14);

    --serif: "Italiana", Georgia, serif;
    --sans: "DM Sans", sans-serif;

    --max-width: 1320px;
    --transition: 350ms cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--cream);
    color: var(--dark);
    font-family: var(--sans);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}

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

.container {
    width: min(calc(100% - 60px), var(--max-width));
    margin-inline: auto;
}

.section {
    padding: 145px 0;
}

h1,
h2,
h3 {
    font-family: var(--serif);
    font-weight: 400;
}

h2 {
    font-size: clamp(3.2rem, 5.8vw, 6.4rem);
    line-height: .98;
    letter-spacing: -.035em;
}

h2 em {
    color: var(--taupe);
    font-weight: 400;
}

.section-number {
    display: block;
    margin-bottom: 18px;

    color: var(--taupe);
    font-size: .68rem;
}

.section-kicker {
    color: var(--brown);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .23em;
}


/* =========================================================
   CONCEPT BAR
========================================================= */

.concept-bar {
    min-height: 34px;
    padding: 7px 28px;

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

    background: var(--black);
    color: rgba(255,255,255,.7);

    font-size: .62rem;
    letter-spacing: .08em;
}

.concept-bar a {
    color: white;
    transition: opacity var(--transition);
}

.concept-bar a:hover {
    opacity: .65;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: absolute;
    z-index: 100;
    top: 34px;
    left: 0;

    width: 100%;

    color: var(--white);
}

.nav-container {
    width: min(calc(100% - 80px), 1480px);
    min-height: 100px;
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    border-bottom: 1px solid rgba(255,255,255,.25);
}

.logo {
    display: flex;
    flex-direction: column;

    font-family: var(--serif);
    font-size: 1.55rem;
    letter-spacing: .18em;
    line-height: 1;
}

.logo span {
    margin-top: 8px;

    font-family: var(--sans);
    font-size: .47rem;
    font-weight: 500;
    letter-spacing: .5em;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 38px;
}

.desktop-nav a {
    position: relative;

    font-size: .72rem;
    letter-spacing: .06em;

    opacity: .86;
    transition: var(--transition);
}

.desktop-nav a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -9px;

    width: 0;
    height: 1px;

    background: white;
    transition: var(--transition);
}

.desktop-nav a:hover {
    opacity: 1;
}

.desktop-nav a:hover::after {
    width: 100%;
}

.nav-button {
    padding: 13px 19px;

    border: 1px solid rgba(255,255,255,.7);

    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .08em;

    transition: var(--transition);
}

.nav-button:hover {
    background: white;
    color: var(--dark);
}

.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 6px;

    background: none;
    border: 0;
}

.mobile-menu span {
    width: 25px;
    height: 1px;

    background: white;
}


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

.hero {
    position: relative;

    min-height: 930px;

    display: flex;
    align-items: center;

    overflow: hidden;
}







.hero-content {
    position: relative;
    z-index: 5;

    width: min(calc(100% - 80px), 1480px);
    margin-inline: auto;

    padding-top: 80px;
}

.eyebrow {
    margin-bottom: 28px;

    color: #d9c5b7;

    font-size: .64rem;
    font-weight: 500;
    letter-spacing: .25em;
}

.hero h1 {
    max-width: 760px;

    color: var(--white);

    font-size: clamp(5.7rem, 9vw, 10.5rem);
    line-height: .78;
    letter-spacing: -.045em;
}

.hero h1 em {
    display: block;

    margin-left: 85px;

    color: #d5b7a2;

    font-weight: 400;
}

.hero-description {
    max-width: 480px;

    margin-top: 48px;

    color: rgba(255,255,255,.72);

    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.65;
}

.hero-actions {
    margin-top: 40px;

    display: flex;
    align-items: center;
    gap: 28px;
}

.button {
    min-height: 55px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 28px;

    padding: 0 24px;

    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .08em;

    transition: var(--transition);
}

.button-dark {
    background: var(--white);
    color: var(--dark);
}

.button-dark:hover {
    background: var(--sand);
    transform: translateY(-3px);
}

.text-button {
    display: inline-flex;
    align-items: center;
    gap: 20px;

    color: rgba(255,255,255,.8);

    font-size: .68rem;
    letter-spacing: .06em;
}

.hero-detail {
    position: absolute;
    z-index: 6;
    right: 4%;
    bottom: 65px;

    display: flex;
    align-items: center;
    gap: 15px;

    color: rgba(255,255,255,.65);
}

.hero-detail span {
    font-size: .58rem;
}

.hero-detail div {
    width: 65px;
    height: 1px;
    background: rgba(255,255,255,.35);
}

.hero-detail p {
    font-size: .53rem;
    letter-spacing: .18em;
    line-height: 1.7;
}


/* =========================================================
   INTRO
========================================================= */

.intro {
    background: var(--cream);
}

.intro-grid {
    display: grid;
    grid-template-columns: .35fr 1.65fr;
    gap: 80px;
}

.section-label span {
    display: block;

    color: #806652;
    font-size: .65rem;
}

.section-label p {
    margin-top: 20px;

    color: var(--brown);

    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
}

.intro-copy h2 {
    max-width: 1000px;
}

.intro-bottom {
    max-width: 850px;

    margin-top: 70px;
    margin-left: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.intro-bottom p {
    color: var(--muted);

    font-size: .9rem;
    line-height: 1.9;
}

.intro-bottom p:first-child {
    color: var(--brown);

    font-family: var(--serif);
    font-size: 1.25rem;
    line-height: 1.6;
}


/* =========================================================
   TREATMENTS
========================================================= */

.treatments {
    background: #e8ddd2;
}

.section-heading {
    margin-bottom: 75px;

    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 100px;
    align-items: end;
}

.section-heading h2 {
    max-width: 760px;
    margin-top: 18px;
}

.heading-description {
    max-width: 410px;

    color: var(--muted);

    font-size: .88rem;
    line-height: 1.9;
}

.treatment-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 28px;
}

.treatment-card {
    background: var(--cream);
}

.treatment-card:nth-child(3) {
    grid-column: 2;
}

.treatment-large {
    grid-row: span 2;
}

.treatment-image {
    position: relative;

    min-height: 335px;

    overflow: hidden;
}

.treatment-large .treatment-image {
    min-height: 610px;
}




/* ABSTRACT LUXURY VISUAL 1 */

.facial-image {
}






/* ABSTRACT LUXURY VISUAL 2 */

.injectable-image {
}




/* ABSTRACT LUXURY VISUAL 3 */

.wellness-image {
}





.treatment-info {
    min-height: 180px;

    padding: 30px;

    display: grid;
    grid-template-columns: 35px 1fr auto;
    gap: 20px;
    align-items: start;
}

.treatment-info > span {
    color: var(--taupe);
    font-size: .6rem;
}

.treatment-info h3 {
    font-size: 1.8rem;
}

.treatment-info p {
    max-width: 390px;

    margin-top: 9px;

    color: var(--muted);

    font-size: .76rem;
    line-height: 1.75;
}

.treatment-info a {
    padding-top: 6px;

    font-size: .64rem;
    border-bottom: 1px solid var(--brown);
}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience {
    min-height: 820px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    background: var(--dark);
}

.experience-image {
    position: relative;

    min-height: 820px;

    overflow: hidden;
}





.experience-content {
    padding: 120px 9%;

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

    color: var(--white);
}

.experience-content .section-number {
    color: #a99486;
}

.experience-content .section-kicker {
    color: #cdb4a2;
}

.experience-content h2 {
    max-width: 620px;

    margin-top: 25px;
}

.experience-content h2 em {
    color: #c6a994;
}

.experience-content > p:not(.section-kicker) {
    max-width: 500px;

    margin-top: 35px;

    color: rgba(255,255,255,.58);

    font-size: .88rem;
    line-height: 1.9;
}

.experience-features {
    margin-top: 65px;

    border-top: 1px solid rgba(255,255,255,.13);
}

.experience-features div {
    min-height: 72px;

    display: grid;
    grid-template-columns: 55px 1fr;
    align-items: center;

    border-bottom: 1px solid rgba(255,255,255,.13);
}

.experience-features strong {
    color: #b89c89;

    font-size: .6rem;
    font-weight: 400;
}

.experience-features span {
    font-family: var(--serif);
    font-size: 1rem;
}


/* =========================================================
   RESULTS / APPROACH
========================================================= */

.results {
    background: var(--white);
}

.results-heading {
    display: grid;
    grid-template-columns: .45fr 1.55fr;
    gap: 70px;

    margin-bottom: 90px;
}

.results-heading h2 {
    max-width: 930px;
}

.results-heading h2 em {
    display: block;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.result-stat {
    min-height: 320px;

    padding: 30px;

    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    transition: var(--transition);
}

.result-stat:hover {
    background: var(--cream);
}

.result-stat strong {
    color: var(--taupe);

    font-size: .62rem;
    font-weight: 400;
}

.result-stat h3 {
    margin-top: 95px;

    font-size: 2rem;
}

.result-stat p {
    margin-top: 14px;

    color: var(--muted);

    font-size: .76rem;
    line-height: 1.8;
}


/* =========================================================
   TESTIMONIAL
========================================================= */

.testimonial {
    padding: 160px 0;

    background: #d7c5b5;

    text-align: center;
}

.testimonial-content {
    max-width: 1050px;
}

.testimonial-content > span {
    display: block;

    height: 55px;

    color: rgba(74,54,43,.35);

    font-family: var(--serif);
    font-size: 6rem;
    line-height: 1;
}

blockquote {
    color: #49392f;

    font-family: var(--serif);
    font-size: clamp(2.5rem, 4.3vw, 4.8rem);
    line-height: 1.12;
}

.testimonial-content p {
    margin-top: 35px;

    color: #755f51;

    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .2em;
}


/* =========================================================
   CONSULTATION CTA
========================================================= */

.consultation {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    background: #30251f;
    color: white;

    overflow: hidden;
}

.consultation::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 120%,
            rgba(180,143,116,.34),
            transparent 45%
        );
}

.consultation-decoration {
    position: absolute;
    right: -30px;
    top: 50%;

    transform: translateY(-50%);

    color: rgba(255,255,255,.025);

    font-family: var(--serif);
    font-size: 42rem;
    line-height: .8;
}

.consultation-content {
    position: relative;
    z-index: 5;

    text-align: center;
}

.consultation .section-kicker {
    color: #c7a994;
}

.consultation h2 {
    max-width: 900px;

    margin: 25px auto 0;
}

.consultation h2 em {
    display: block;
    color: #c6a48e;
}

.consultation-content > p:not(.section-kicker) {
    max-width: 520px;

    margin: 30px auto 0;

    color: rgba(255,255,255,.57);

    font-size: .87rem;
}

.button-light {
    margin-top: 40px;

    background: var(--cream);
    color: var(--dark);
}

.button-light:hover {
    background: #dbc5b5;
    transform: translateY(-3px);
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding-top: 90px;

    background: #171311;
    color: white;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 70px;

    padding-bottom: 80px;
}

.footer-logo {
    display: inline-flex;
}

.footer-brand p {
    margin-top: 28px;

    color: rgba(255,255,255,.45);

    font-family: var(--serif);
    font-size: 1.05rem;
    line-height: 1.6;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.footer-column small {
    margin-bottom: 8px;

    color: #ad8e79;

    font-size: .56rem;
    letter-spacing: .2em;
}

.footer-column a,
.footer-column p {
    color: rgba(255,255,255,.55);

    font-size: .72rem;
    line-height: 1.8;

    transition: var(--transition);
}

.footer-column a:hover {
    color: white;
}

.footer-bottom {
    min-height: 80px;

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

    border-top: 1px solid rgba(255,255,255,.1);

    color: rgba(255,255,255,.35);

    font-size: .6rem;
}

.footer-bottom a {
    transition: color var(--transition);
}

.footer-bottom a:hover {
    color: white;
}


/* =========================================================
   SCROLL REVEALS
========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity 800ms cubic-bezier(.2,.7,.2,1),
        transform 800ms cubic-bezier(.2,.7,.2,1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .desktop-nav {
        display: none;
    }

    .mobile-menu {
        display: flex;
    }

    .intro-grid {
        grid-template-columns: 1fr;
    }

    .intro-bottom {
        margin-left: 0;
    }

    .treatment-grid {
        grid-template-columns: 1fr 1fr;
    }

    .treatment-large {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .treatment-card:nth-child(3) {
        grid-column: auto;
    }

    .treatment-large .treatment-image {
        min-height: 500px;
    }

    .results-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .footer-column:last-child {
        grid-column: 2;
    }
}


@media (max-width: 760px) {

    .container {
        width: min(calc(100% - 34px), var(--max-width));
    }

    .section {
        padding: 95px 0;
    }

    .concept-bar {
        padding-inline: 17px;
    }

    .concept-bar span {
        max-width: 190px;
    }

    .nav-container {
        width: calc(100% - 34px);
        min-height: 80px;
    }

    .nav-button {
        display: none;
    }

    .hero {
        min-height: 800px;
    }

    .hero-content {
        width: calc(100% - 34px);
    }

    .hero h1 {
        font-size: clamp(5rem, 22vw, 7rem);
    }

    .hero h1 em {
        margin-left: 35px;
    }

    .hero-description {
        max-width: 360px;

        font-size: 1.05rem;
    }

    .hero-detail {
        display: none;
    }

    .intro-bottom {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .section-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .treatment-grid {
        grid-template-columns: 1fr;
    }

    .treatment-card:nth-child(3) {
        grid-column: auto;
    }

    .treatment-image,
    .treatment-large .treatment-image {
        min-height: 410px;
    }

    .treatment-info {
        grid-template-columns: 30px 1fr;
    }

    .treatment-info a {
        grid-column: 2;
        width: fit-content;
    }

    .experience {
        grid-template-columns: 1fr;
    }

    .experience-image {
        min-height: 520px;
    }

    .experience-content {
        padding: 90px 30px;
    }

    .results-heading {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .results-grid {
        grid-template-columns: 1fr;
    }

    .result-stat {
        min-height: 250px;
    }

    .result-stat h3 {
        margin-top: 60px;
    }

    .testimonial {
        padding: 110px 0;
    }

    .consultation {
        min-height: 650px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-column:last-child {
        grid-column: auto;
    }

    .footer-bottom {
        padding: 25px 0;

        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}


@media (max-width: 500px) {

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero h1 {
        font-size: 4.8rem;
    }

    .hero h1 em {
        margin-left: 0;
    }

    .treatment-image,
    .treatment-large .treatment-image {
        min-height: 330px;
    }

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .footer-column:last-child {
        grid-column: auto;
    }
}
/* =========================================================
   AURELIA PHOTOGRAPHY INSTALLED
========================================================= */


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.hero {
    background:
        linear-gradient(
            90deg,
            rgba(35, 25, 20, .96) 0%,
            rgba(45, 31, 24, .80) 28%,
            rgba(55, 38, 29, .40) 49%,
            rgba(30, 20, 15, .05) 74%
        ),
        url("images/hero.jpg");

    background-size: cover;
    background-position: center 42%;
    background-repeat: no-repeat;
}


/* Remove original abstract hero artwork */

.hero::before,
.hero::after,
.hero-image {
    display: none;
}


/* Keep hero text above photography */

.hero-content,
.hero-detail {
    position: relative;
    z-index: 5;
}


/* ---------------------------------------------------------
   SKIN RENEWAL
--------------------------------------------------------- */

.facial-image {
    background:
        linear-gradient(
            rgba(47, 32, 24, .04),
            rgba(47, 32, 24, .04)
        ),
        url("images/skin-renewal.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ---------------------------------------------------------
   FACIAL BALANCING
--------------------------------------------------------- */

.injectable-image {
    background:
        linear-gradient(
            rgba(47, 32, 24, .03),
            rgba(47, 32, 24, .03)
        ),
        url("images/facial-balancing.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ---------------------------------------------------------
   ADVANCED WELLNESS
--------------------------------------------------------- */

.wellness-image {
    background:
        linear-gradient(
            rgba(47, 32, 24, .03),
            rgba(47, 32, 24, .03)
        ),
        url("images/advanced-wellness.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ---------------------------------------------------------
   REMOVE OLD ABSTRACT TREATMENT SHAPES
--------------------------------------------------------- */

.facial-image::before,
.facial-image::after,
.injectable-image::before,
.injectable-image::after,
.wellness-image::before,
.wellness-image::after {
    display: none;
}


/* ---------------------------------------------------------
   AURELIA EXPERIENCE IMAGE
--------------------------------------------------------- */

.experience-image {
    position: relative;

    background:
        linear-gradient(
            rgba(45, 30, 22, .08),
            rgba(45, 30, 22, .08)
        ),
        url("images/advanced-wellness.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Remove old large abstract shape */

.experience-image::before {
    display: none;
}


/* Preserve elegant frame */

.experience-image::after {
    content: "";

    position: absolute;
    inset: 45px;

    display: block;

    border: 1px solid rgba(255, 255, 255, .38);

    pointer-events: none;
}


/* ---------------------------------------------------------
   IMAGE POLISH
--------------------------------------------------------- */

.treatment-image {
    transition:
        filter 500ms ease,
        transform 700ms cubic-bezier(.2,.7,.2,1);
}

.treatment-card {
    overflow: hidden;
}

.treatment-card:hover .treatment-image {
    filter:
        brightness(1.04)
        saturate(1.03);
}


/* ---------------------------------------------------------
   DESKTOP IMAGE POSITIONING
--------------------------------------------------------- */

@media (min-width: 1051px) {

    .hero {
        background-position: center 40%;
    }

    .facial-image {
        background-position: center 48%;
    }

    .injectable-image {
        background-position: center 50%;
    }

    .wellness-image {
        background-position: center 48%;
    }

    .experience-image {
        background-position: center;
    }

}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1050px) {

    .hero {
        background-position: 60% center;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 760px) {

    .hero {
        background:
            linear-gradient(
                90deg,
                rgba(31, 22, 18, .94) 0%,
                rgba(38, 27, 21, .72) 52%,
                rgba(38, 27, 21, .30) 100%
            ),
            url("images/hero.jpg");

        background-size: cover;
        background-position: 58% center;
        background-repeat: no-repeat;
    }


    .facial-image {
        background-position: center;
    }


    .injectable-image {
        background-position: center;
    }


    .wellness-image {
        background-position: center;
    }


    .experience-image {
        background-position: center;
    }


    .experience-image::after {
        inset: 20px;
    }

}


/* Existing mobile navigation state */
@media (max-width: 1050px) {
    .desktop-nav.mobile-open {
        display: flex; position: absolute; top: 100%; left: 0; width: 100%;
        flex-direction: column; align-items: flex-start; gap: 0;
        padding: 20px 30px; background: var(--dark);
        border-bottom: 1px solid rgba(255,255,255,.25);
    }
    .desktop-nav.mobile-open a { width: 100%; padding: 14px 0; }
}

/* Accessible controls without changing the default composition */
a:focus-visible,button:focus-visible { outline:2px solid #806652; outline-offset:5px; }
.site-header :focus-visible,footer :focus-visible { outline-color:#dbc5b5; }
.aurelia-skip { position:fixed; top:12px; left:12px; z-index:1000; padding:12px 20px; background:var(--cream); color:var(--dark); transform:translateY(-160%); }
.aurelia-skip:focus { transform:none; }
.demo-action { border:0; cursor:pointer; }
.footer-column .demo-action { background:none; padding:0; color:rgba(255,255,255,.55); font-size:.72rem; line-height:1.8; transition:var(--transition); }
.footer-column .demo-action:hover { color:white; }
.aurelia-demo-status { position:fixed; z-index:200; bottom:20px; left:20px; right:20px; width:min(calc(100% - 40px),600px); margin-inline:auto; padding:18px 24px; background:var(--cream); color:var(--dark); border:1px solid var(--brown); box-shadow:0 10px 35px #0003; font-size:.8rem; }
[hidden] { display:none!important; }
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation:none!important; transition:none!important; }
    .reveal { opacity:1; transform:none; }
}