/* #region basic overrides and generic rules */

html { margin: 0px; padding: 0px; }

html, body { height: 100%; }

body { background: none; font-family: Georgia, 'Times New Roman', Times, serif; line-height: 2.4em; overflow: hidden; }

body nav a.nav-link { color: #ecb30eff !important; }

#sitenav .nav-link { position: relative; font-size: 1.1rem; }

#sitenav .nav-link::after {
    position: absolute;
    right: .5rem;
    bottom: .25rem;
    left: .5rem;
    height: 2px;
    background-color: currentColor;
    content: "";
    transform: scaleX(0);
    transition: transform .2s ease;
}

#sitenav .nav-link[aria-current="page"]::after,
#sitenav .nav-link:hover::after,
#sitenav .nav-link:focus-visible::after {
    transform: scaleX(1);
}

body main, body header { margin: 0px; }

.tighten { line-height: 1.6em; }

.tighten li { margin-bottom: 15px; }

.pull-left { float: left !important; }

.pull-right { float: right !important; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.justified { text-align: justify; }

.clear { clear: both; }

body footer { background-image: linear-gradient(160deg, #301919 10%, #1a2230); color: #ecb30eff; }

body footer .footer-content { display: flex; align-items: center; height: 52px; box-sizing: border-box; background-image: url('../img/textures/dark-wall.png'); padding: 8px 24px; }

body footer .footer-content > .row { width: 100%; }

body footer .row { flex-wrap: nowrap; }

body footer .footer-left { flex: 1 1 auto; }

body footer .footer-left p { margin: 0; font-size: .75em; line-height: 1.4; }

body footer .footer-right { display: flex; flex: 0 1 auto; align-items: center; gap: 14px; }

body footer a { color: inherit; }

body footer .footer-bottom { flex: 0 0 auto; margin-left: 18px; }

/* #endregion*/

/* #region intro */

#intro { background-image: url('../img/textures/dark-wall.png'), linear-gradient(160deg, #1a2230 40%, #301919); color: #ecb30eff; }

#intro .content { padding: 0 0 65px; margin: 0px; height: 100%; box-sizing: border-box; }

#intro .logo { width: 78%; min-height: 20vw; background: url('../img/logo.png') no-repeat center center; background-size: contain; height: 50%; margin: 0 auto; }

#intro .logo .sitename { opacity: 0; }

#intro .headline { color: #e05020; margin-top: 0px; font-weight: lighter; font-family: Georgia, 'Times New Roman', Times, serif !important; font-size: 1.5em; }

#intro .headline div { padding: 25px; }

#intro .headline .part2 { border-top: 1px solid #ecb30eff; }

#intro .headline em { font-size: clamp(3rem, 9.5vw, 3.8em); display: block; font-family: 'Pinyon Script', cursive; font-style: normal; }

#intro .blurb { font-size: 1.2em; margin-top: 50px; padding: 0px 100px; }

/* #endregion */


/* #region sections */

main section { margin: 0px; padding: 0px; background-image: linear-gradient(#d4bfac 45%,#b6aba2); color: #1a2230; }

main section .content { padding: 0 65px 65px; }

main h1, body main h2, body main h3 { color: #e05020; text-align: center; margin: 40px; }

main h1.enhanced { font-size: 7em;  font-family: 'Pinyon Script', cursive; }

#pages { position: fixed; inset: 78px 0 52px; padding: 0; }

#pages > .page {
    position: absolute;
    inset: 0;
    padding-bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(.99);
    z-index: 0;
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

#pages > .page.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: 1;
    transition-delay: 0s;
}

#sitenav {
    z-index: 1030;
    background-color: #1a2230;
    background-image: url('../img/textures/dark-wall.png'), linear-gradient(160deg, #1a2230 40%, #301919);
    background-size: auto, 100vw 100vh;
    background-position: left top, left top;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
}

body.is-home #sitenav .navbar-brand { display: none; }

body.is-home {
    background-color: #1a2230;
    background-image: url('../img/textures/dark-wall.png'), linear-gradient(160deg, #1a2230 40%, #301919);
    background-size: auto, 100vw 100vh;
    background-position: left top, left top;
    background-repeat: repeat, no-repeat;
    background-attachment: fixed, fixed;
}

body.is-home #pages > footer { background: transparent; }

body.is-home #pages > footer .footer-content { background-image: none; }

#sitenav { height: 78px; min-height: 78px; box-sizing: border-box; padding-top: 6px; padding-bottom: 6px; }

#sitenav .navbar-brand { padding-top: 1px; padding-bottom: 1px; }

#sitenav .navbar-brand img { display: block; width: 290px; max-width: 55vw; height: 64px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
    #pages > .page { transition: none; }
    #sitenav .nav-link::after { transition: none; }
}

@media (max-width: 767.98px) {
    body { line-height: 1.7; }

    #sitenav .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        padding: .5rem 1rem 1rem;
        background-color: #1a2230;
        background-image: url('../img/textures/dark-wall.png'), linear-gradient(160deg, #1a2230 40%, #301919);
    }

    #sitenav .navbar-nav .nav-link { padding: .5rem .75rem; }

    #intro .content {
        height: auto;
        min-height: 100%;
        padding: 14px 20px 24px;
    }

    #intro .logo {
        width: 100%;
        height: clamp(90px, 25vw, 125px);
        min-height: 0;
        margin: 0 auto 20px;
        background-size: contain;
    }

    #intro .row { margin: 0; }

    #intro .headline {
        margin: 0;
        font-size: 1.15rem;
    }

    #intro .headline div {
        float: none !important;
        width: 100%;
        padding: 14px 4px;
    }

    #intro .headline em {
        font-size: clamp(2.8rem, 13vw, 3.6rem);
        line-height: 1.08;
    }

    #intro .headline .part2 { margin-top: 4px; }

    #intro .blurb {
        margin: 16px 0 0;
        padding: 0 4px;
        font-size: 1rem;
        text-align: left;
    }

    main section .content { padding: 18px 20px 40px; }

    main h1.enhanced {
        margin: 8px 0 24px;
        font-size: clamp(3.25rem, 11vw, 4.25rem);
        line-height: 1.1;
    }

    main section p { font-size: 1rem; }

    #about #bio { padding: 8px 2px 20px; }

    #about #bio p { font-size: 1rem; }

    #about #clientele .row { margin-bottom: 0; }

    #about #clientele div.clienteleItem { margin: 8px; padding: 4px 8px; }

    #about #clientele div.clienteleItem h3 {
        margin: 4px 0 8px;
        padding: 8px;
        font-size: 1.3rem;
    }

    #about #clientele ul { padding-left: 24px; }

    #about #clientele li { margin-bottom: 8px; }

    #services .content p.blurb {
        margin: 0 0 22px;
        font-size: 1rem;
        text-align: left !important;
    }

    #services #servicetypes { min-height: 420px; font-size: 1rem; }

    #services #serviceCarousel,
    #services #serviceCarousel .carousel-item { min-height: 420px; }

    #services #servicetypes .service { min-height: 420px; padding: 24px 34px 54px; }

    #services #servicetypes .service h2 { margin: 12px 0 20px; font-size: 1.35rem; }

    #services #servicetypes .service .row { margin: 0; }

    #services #servicetypes .service ul { padding-left: 20px; }

    #services #servicetypes .service li { margin-bottom: 10px; }

    #services #serviceCarousel .carousel-control-prev,
    #services #serviceCarousel .carousel-control-next { width: 12%; }

    #testimonials #testimonialContainer { gap: 16px; }

    #testimonials .testimonial {
        gap: 12px;
        padding: 18px;
        width: 94%;
    }

    #testimonials .testimonial blockquote { font-size: 1rem; line-height: 1.65; }

    #testimonials .testimonial blockquote::before {
        top: -24px;
        left: -10px;
        font-size: 12rem;
    }

    #testimonials .testimonial .attribution { padding-top: 8px; }

    #sitenav .navbar-brand img {
        width: 180px;
        max-width: calc(100vw - 100px);
        height: 50px;
    }

    body footer .footer-content { padding: 8px 14px; }

    body footer .footer-right { gap: 9px; }

    body footer .footer-bottom { margin-left: 10px; }

    body footer .footer-left p { font-size: .68em; }
}

/* #region about */

#about { /* background-image: linear-gradient(#d4bfac 5%,#b6aba2); */ padding-top: 0%; color: #1a2230; }

/* #about .content { background: url('../img/textures/black-linen-2.png') } */

#about #bio { padding: 30px 80px; }

#about #bio p { font-size: 1.2em; }

/* #region clientele */

#about #clientele div.clienteleItem { background: #d67454 url('../img/textures/rice-paper-2.png'); color: #212b3d; border-radius: 8px;}

#about #clientele div.clienteleItem h3 { color: #1a2230; margin: 10px; padding: 10px; border-bottom: 1px solid #1a2230; font-size: 1.5em; }

/* #endregion */

/* #endregion */

/* #region services */

#services { /* background: linear-gradient(90deg, #ecb30eff, #e05020);  */ color: #1a2230; }

#services .content { background: url('../img/textures/otis-redding.png') }

#services .content p.blurb { font-size: 1.3em; }

/* #region service types */

#services #servicetypes { background: #1a2230 url('../img/textures/black-linen-2.png'); color: #ecb30eff; min-height: 400px; font-size: 1.2em; border-radius: 8px; }

#services #servicetypes h2 { color: #ecb30eff; border-bottom: 1px solid #ecb30eff; }

#services #serviceCarousel, #services #serviceCarousel .carousel-item { min-height: 400px; }

#services #servicetypes .service { min-height: 400px; padding: 20px 35px 45px; }

#services #serviceCarousel .carousel-indicators { margin: 0; }

#services #serviceCarousel .carousel-indicators li {
    width: 12px;
    height: 12px;
    margin: 0 5px;
    text-indent: 0;
    background: none;
    opacity: 1;
}

#services #serviceCarousel .carousel-indicators button {
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ecb30e;
    opacity: .5;
    cursor: pointer;
}

#services #serviceCarousel .carousel-indicators li.active button,
#services #serviceCarousel .carousel-indicators button:focus-visible {
    opacity: 1;
}

#services #serviceCarousel .carousel-control-prev,
#services #serviceCarousel .carousel-control-next { width: 8%; opacity: .85; }

/* #endregion */

/* #endregion */

/* #region contact */

#pages > footer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1020; min-height: 52px; }

/* #endregion */


/* #region testimonials */

#testimonials #testimonialContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#testimonials .testimonial {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    width: 82%;
    padding: 24px 30px;
    border: 0;
    background-image: linear-gradient(160deg, #1a2230 40%, #301919);
    color: #f6ead5;
    box-shadow: 0 8px 20px rgba(26, 34, 48, .12);
    border-radius: 8px;
}

#testimonials .testimonial:nth-child(odd) { align-self: flex-start; }

#testimonials .testimonial:nth-child(even) { align-self: flex-end; }

#testimonials .testimonial blockquote {
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: 8px 0 0;
    font-size: 1.08em;
    line-height: 1.8;
}

#testimonials .testimonial .quote-text { position: relative; z-index: 1; }

#testimonials .testimonial blockquote::before {
    position: absolute;
    top: -50px;
    left: -18px;
    z-index: 0;
    color: #45627a;
    opacity: .55;
    content: "\201C";
    font-size: 24rem;
    line-height: 1;
    pointer-events: none;
    margin-top: -10;
    padding-top: -10;
}

#testimonials .testimonial .attribution {
    justify-self: end;
    width: min(100%, 280px);
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, .65);
    color: #94a3b8;
    text-align: right;
}

@media (max-width: 767.98px) {
    #testimonials .testimonial {
        gap: 14px;
        padding: 22px;
        width: 90%;
    }
}

@media (max-width: 575.98px) {
    #testimonials .testimonial { width: 92%; }
    #testimonials .testimonial .attribution { width: min(100%, 220px); }
}

@media (max-width: 767.98px) {
    body.is-home #sitenav .navbar-toggler { margin-left: auto; }

    #about #bio { padding: 8px 2px 20px; }

    #about #bio p { font-size: 1rem; }

    #about #clientele div.clienteleItem h3 {
        margin: 4px 0 8px;
        padding: 8px;
        font-size: 1.3rem;
    }

    #services .content p.blurb {
        margin: 0 0 22px;
        font-size: 1rem;
        text-align: left !important;
    }

    #services #servicetypes { font-size: 1rem; }

    #services #servicetypes .service { padding: 24px 18px 54px; }
}

/* #endregion */


/* #region contact */


/* #endregion */

/* #endregion */