:root {
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

html {
    scroll-padding-top: 90px;
    height: auto
}

body {
    background: #FBF6F0;
    color: #2B1A10;
    font-family: Poppins, system-ui, sans-serif;
    overflow-x: hidden
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s ease
}

.reveal.in {
    opacity: 1;
    transform: none
}

.card {
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -16px rgba(74, 44, 26, .35);
    border-color: #D9692D
}

.btn {
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, color .3s ease;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 500;
    border-radius: 9999px;
    padding: .8rem 1.6rem
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -10px rgba(181, 74, 31, .6)
}

.btn-p {
    background: #D9692D;
    color: #fff
}

.btn-p:hover {
    background: #B54A1F
}

.btn-o {
    border: 1.5px solid #fff;
    color: #fff
}

.btn-o:hover {
    background: #fff;
    color: #4A2C1A
}

.nl {
    position: relative;
    transition: color .3s
}

.nl:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    height: 2px;
    width: 0;
    background: #D9692D;
    transition: width .3s
}

.nl:hover:after,
.nl.act:after {
    width: 100%
}

.nl:hover,
.nl.act {
    color: #D9692D
}

.arch {
    border-radius: 999px 999px 18px 18px
}

.strata {
    background: linear-gradient(90deg, #D9692D, #B54A1F, #4A2C1A, #2B1A10)
}

.dash {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: dr 3.2s ease forwards
}

@keyframes dr {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes fl {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.fl {
    animation: fl 5s ease-in-out infinite
}

.gimg {
    transition: transform .6s ease
}

.gi:hover .gimg {
    transform: scale(1.08)
}

.gi .cap {
    transform: translateY(100%);
    transition: transform .35s ease
}

.gi:hover .cap {
    transform: none
}

.sec-t {
    font-family: Cinzel, serif;
    font-weight: 700;
    color: #4A2C1A
}

.bg-tex {
    background-image: radial-gradient(rgba(181, 74, 31, .07) 1.2px, transparent 1.2px);
    background-size: 22px 22px
}

@media (prefers-reduced-motion:reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    .fl,
    .dash {
        animation: none;
        stroke-dashoffset: 0
    }

    html {
        scroll-behavior: auto
    }
}