/* =========================================================
   ANASCRIPTS
   MAIN SITE STYLES
========================================================= */

:root {
    --page-bg: #f7f1e8;
    --header-bg: rgba(247, 241, 232, 0.97);
    --text-color: #4a3529;
    --muted-text: #75695f;
    --accent-color: #b49467;
    --line-color: rgba(74, 53, 41, 0.14);
    --menu-shadow: 0 14px 34px rgba(70, 50, 34, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: var(--text-color);

    background: var(--page-bg);
}

img {
    max-width: 100%;
}

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

.site-header {
    position: sticky;
    top: 0;

    display: block;

    z-index: 1000;

    background: var(--header-bg);
}

.top-header-container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    min-height: 100px;
    margin: 0 auto;
    padding: 8px 50px 10px;
}


/* =========================
   BRAND
========================= */

.brand {
    position: absolute;
    top: 8px;
    left: 50px;

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

    color: var(--text-color);
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: auto;
    height: 65px;
    object-fit: contain;
}

.brand-tagline {
    display: block;
    margin-top: 7px;
    margin-left: 2px;

    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.35px;

    color: var(--muted-text);
}


/* =========================
   SOCIAL ICONS
========================= */

.social-links {
    position: absolute;
    top: 35px;
    right: 50px;

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

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.social-link img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
}

.social-link:hover,
.social-link:focus-visible {
    transform: translateY(-2px);
    opacity: 0.72;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.desktop-menu-bar {
    position: absolute;

    top: 70px;
    left: 50%;

    width: auto;
    height: auto;

    transform: translateX(-50%);

    background: transparent;
    border: none;

    z-index: 1000;
}

.desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    width: auto;
    height: auto;

    padding: 0 22px 12px;

    gap: 48px;

    white-space: nowrap;

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

.desktop-nav>a,
.nav-dropdown-button {
    position: relative;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--text-color);

    font: inherit;
    font-size: 14px;
    letter-spacing: 0.4px;

    text-decoration: none;
    cursor: pointer;
}


/* underline */

.desktop-nav>a::after,
.nav-dropdown-button::after {
    content: "";

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

    width: 0;
    height: 1px;

    background: var(--text-color);

    transition: width 0.25s ease;
}

.desktop-nav>a:hover::after,
.desktop-nav>a:focus-visible::after,
.desktop-nav>a.active::after,
.nav-dropdown:hover .nav-dropdown-button::after,
.nav-dropdown:focus-within .nav-dropdown-button::after,
.nav-dropdown.open .nav-dropdown-button::after {
    width: 100%;
}

/* =========================
   HOME INTRO LEAD
========================= */

.home-intro-description .home-intro-lead {
    margin-bottom: 28px;

    color: var(--text-color);

    font-size: 1.08em;
    font-weight: 400;
    line-height: 1.7;
}

/* =========================
   SERVICES DROPDOWN
========================= */

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-dropdown-button {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% - 1px);
    left: 0;

    min-width: 205px;

    padding: 10px 0;

    background: var(--page-bg);

    border: 1px solid var(--line-color);
    border-top: none;

    box-shadow: var(--menu-shadow);

    transform: translateY(-8px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

    z-index: 1100;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


.nav-dropdown-menu a {
    display: block;

    padding: 10px 16px;

    color: var(--text-color);

    font-size: 14px;
    line-height: 1.3;

    text-decoration: none;

    transition:
        background 0.2s ease,
        padding-left 0.2s ease;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
    padding-left: 20px;

    background: rgba(180, 148, 103, 0.08);
}


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

.mobile-header,
.mobile-nav {
    display: none;
}


/* =========================================================
   MAIN
========================================================= */

main {
    width: 100%;
}


/* =========================================================
   HOME INTRO / MEET THE ARTIST
========================================================= */

.home-intro-section {
    width: 100%;

    padding: 46px 30px 50px;

    background: #eee4d8;

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


.home-intro-container {
    width: min(900px, 100%);

    margin: 0 auto;

    text-align: center;
}


.home-intro-container h1 {
    margin: 0 0 22px;

    color: var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;

    letter-spacing: normal;
}


.home-intro-description {
    width: min(760px, 100%);

    margin: 0 auto;

    color: var(--muted-text);

    font-size: 16px;
    line-height: 1.75;
}


.home-intro-description p {
    margin: 0 0 14px;
}


.home-intro-description p:last-child {
    margin-bottom: 0;
}


.home-intro-description .home-intro-lead {
    margin-bottom: 18px;

    color: var(--text-color);

    font-size: 1.12em;
}


/* Mobile */

@media (max-width: 800px) {

    .home-intro-section {
        padding: 36px 20px 40px;
    }


    .home-intro-container h1 {
        margin-bottom: 18px;

        font-size: 28px;

        letter-spacing: normal;
    }


    .home-intro-description {
        font-size: 15px;
        line-height: 1.7;
    }

}

/* =========================================================
   ABOUT ME
========================================================= */

.about-section {
    width: 100%;

    padding: 80px 30px;

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


.about-container {
    display: grid;

    grid-template-columns:
        minmax(300px, 480px) minmax(320px, 600px);

    align-items: center;

    gap: 70px;

    width: min(1150px, 100%);

    margin: 0 auto;
}



/* =========================
   PHOTO
========================= */

.about-photo {
    width: 100%;
}


.about-photo img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 650px;

    object-fit: cover;

    border-radius: 10px;
}



/* =========================
   TEXT
========================= */

.about-content {
    width: 100%;
}


.about-content h2 {
    margin: 0 0 28px;

    color: var(--text-color);

    font-size: 36px;
    font-weight: 400;
    line-height: 1.2;
}


.about-description {
    color: var(--muted-text);

    font-size: 16px;
    line-height: 1.75;

    text-align: left;
}


.about-description p {
    margin: 0 0 20px;
}


.about-description p:last-child {
    margin-bottom: 0;
}


.about-description .about-lead {
    margin-bottom: 28px;

    color: var(--text-color);

    font-size: 1.08em;
    line-height: 1.7;
}


.about-description strong {
    color: var(--text-color);

    font-weight: 600;
}

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

.site-footer {
    width: 100%;

    padding: 26px 30px;

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

    background:
        var(--page-bg);
}


.site-footer-container {
    display: flex;

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

    gap: 30px;

    width:
        min(1150px, 100%);

    margin:
        0 auto;
}


/* =========================
   COPYRIGHT
========================= */

.site-footer-copy {
    color:
        var(--muted-text);

    font-size: 13px;

    white-space: nowrap;
}


/* =========================
   LINKS
========================= */

.site-footer-links {
    display: flex;

    align-items: center;

    gap: 24px;
}


.site-footer-links a {
    position: relative;

    color:
        var(--muted-text);

    font-size: 13px;

    text-decoration: none;

    transition:
        color 0.2s ease;
}


.site-footer-links a:hover {
    color:
        var(--text-color);
}

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

@media (max-width: 800px) {

    /* =========================
        ABOUT ME
    ========================= */

    .about-section {
        padding: 50px 20px 60px;
    }


    .about-container {
        grid-template-columns: 1fr;

        gap: 34px;

        width: min(560px, 100%);
    }


    .about-photo {
        width: 100%;

        margin: 0 auto;
    }


    .about-photo img {
        width: 100%;
        max-height: none;

        object-fit: cover;
    }


    .about-content h2 {
        margin-bottom: 22px;

        font-size: 30px;
    }


    .about-description {
        font-size: 15px;

        line-height: 1.7;
    }

    html {
        scroll-padding-top: 76px;
    }

    .site-header {
        display: none;
    }


    /* MOBILE HEADER */

    .mobile-header {
        position: sticky;
        top: 0;

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

        width: 100%;
        height: 76px;

        padding: 7px 18px;

        background: var(--header-bg);
        border-bottom: 1px solid var(--line-color);

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

        z-index: 1200;
    }


    /* MOBILE BRAND */

    .mobile-brand {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        min-width: 0;

        color: var(--text-color);
        text-decoration: none;
    }

    .mobile-brand-logo {
        display: block;
        width: auto;
        height: 45px;
        object-fit: contain;
    }

    .mobile-brand-tagline {
        display: block;

        margin-top: 3px;
        margin-left: 1px;

        font-size: 10px;
        line-height: 1.1;
        letter-spacing: 0.2px;

        color: var(--muted-text);

        white-space: nowrap;
    }


    /* HAMBURGER */

    .mobile-menu-button {
        position: relative;

        flex: 0 0 auto;

        width: 38px;
        height: 32px;

        margin-left: 14px;
        padding: 0;

        border: 0;
        background: transparent;

        cursor: pointer;

        z-index: 1300;
    }

    .mobile-menu-button span {
        position: absolute;
        left: 4px;

        width: 30px;
        height: 2px;

        background: var(--text-color);

        transition:
            top 0.3s ease,
            transform 0.3s ease,
            opacity 0.2s ease;
    }

    .mobile-menu-button span:nth-child(1) {
        top: 6px;
    }

    .mobile-menu-button span:nth-child(2) {
        top: 15px;
    }

    .mobile-menu-button span:nth-child(3) {
        top: 24px;
    }

    .mobile-menu-button.active span:nth-child(1) {
        top: 15px;
        transform: rotate(45deg);
    }

    .mobile-menu-button.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.active span:nth-child(3) {
        top: 15px;
        transform: rotate(-45deg);
    }


    /* MOBILE MENU */

    .mobile-nav {
        position: fixed;
        top: 76px;
        left: 0;

        display: flex;
        flex-direction: column;

        width: 100%;
        max-height: calc(100vh - 76px);

        padding: 12px 24px 22px;

        overflow-y: auto;

        background: var(--header-bg);
        border-bottom: 1px solid var(--line-color);

        transform: translateY(-115%);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            transform 0.32s ease,
            opacity 0.22s ease,
            visibility 0.32s ease;

        z-index: 1150;
    }

    .mobile-nav.open {
        transform: translateY(0);

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-main-link {
        display: block;

        padding: 12px 0;

        color: var(--text-color);

        font-size: 17px;
        line-height: 1.25;

        text-decoration: none;
    }


    /* SERVICES — ALWAYS EXPANDED */

    .mobile-services {
        padding: 0;
    }

    .mobile-services-title {
        padding-bottom: 7px;
    }

    .mobile-services-list {
        display: flex;
        flex-direction: column;

        margin: 0 0 7px 0;
        padding-left: 24px;

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

    .mobile-services-list a {
        position: relative;

        display: block;

        padding: 8px 0 8px 13px;

        color: var(--muted-text);

        font-size: 15px;
        line-height: 1.25;

        text-decoration: none;
    }

    .mobile-services-list a::before {
        content: "";

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

        width: 15px;
        height: 1px;

        background: var(--line-color);
    }

    .mobile-services-list a:hover,
    .mobile-services-list a:focus-visible {
        color: var(--text-color);
    }

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

    .site-footer {
        padding:
            26px 20px 30px;
    }


    .site-footer-container {
        flex-direction:
            column;

        justify-content:
            center;

        gap:
            16px;

        text-align:
            center;
    }


    .site-footer-links {
        justify-content:
            center;

        flex-wrap:
            wrap;

        gap:
            10px 18px;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .mobile-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .mobile-brand-logo {
        height: 41px;
    }

    .mobile-brand-tagline {
        font-size: 9px;
    }

    .mobile-nav {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =========================================================
   VERY SMALL SCREEN / HIGH ZOOM
========================================================= */

@media (max-width: 350px) {

    html {
        scroll-padding-top: 64px;
    }

    .mobile-header {
        height: 64px;
        padding: 5px 12px;
    }

    .mobile-brand-logo {
        height: 34px;
    }

    .mobile-brand-tagline {
        font-size: 8px;
    }

    .mobile-menu-button {
        width: 30px;
        height: 26px;
        margin-left: 8px;
    }

    .mobile-menu-button span {
        left: 3px;
        width: 24px;
        height: 1.5px;
    }

    .mobile-menu-button span:nth-child(1) {
        top: 5px;
    }

    .mobile-menu-button span:nth-child(2) {
        top: 12px;
    }

    .mobile-menu-button span:nth-child(3) {
        top: 19px;
    }

    .mobile-menu-button.active span:nth-child(1),
    .mobile-menu-button.active span:nth-child(3) {
        top: 12px;
    }

    .mobile-nav {
        top: 64px;
        max-height: calc(100vh - 64px);
        padding: 8px 16px 16px;
    }

    .mobile-main-link {
        padding: 10px 0;
        font-size: 15px;
    }

    .mobile-services-list {
        padding-left: 20px;
    }

    .mobile-services-list a {
        padding: 7px 0 7px 11px;
        font-size: 13px;
    }

    .mobile-services-list a::before {
        left: -20px;
        width: 12px;
    }
}

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

.contact-section {
    width: 100%;

    padding: 80px 30px 90px;

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


.contact-container {
    display: grid;

    grid-template-columns:
        minmax(320px, 560px) minmax(300px, 480px);

    align-items: start;

    gap: 90px;

    width: min(1150px, 100%);

    margin: 0 auto;
}

/* =========================================================
   CONTACT FILE UPLOAD
========================================================= */

.contact-file-field {
    position: relative;
}


.contact-field-label small {
    color: var(--muted-text);

    font-size: 12px;
    font-weight: 400;
}


/* Keep input accessible but visually hidden */

.contact-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


.contact-file-picker {
    display: flex;

    align-items: center;

    min-height: 46px;

    border:
        1px solid rgba(74, 53, 41, 0.22);

    border-radius: 7px;

    overflow: hidden;

    cursor: pointer;

    background:
        rgba(255, 255, 255, 0.28);

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.contact-file-picker:hover {
    border-color:
        var(--accent-color);

    background:
        rgba(255, 255, 255, 0.38);
}


.contact-file-button {
    display: flex;

    align-items: center;

    align-self: stretch;

    padding: 0 16px;

    border-right:
        1px solid rgba(74, 53, 41, 0.16);

    color: var(--text-color);

    font-size: 14px;

    white-space: nowrap;
}


.contact-file-name {
    min-width: 0;

    padding: 0 14px;

    overflow: hidden;

    color: var(--muted-text);

    font-size: 13px;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   HEADINGS
========================================================= */

.contact-form-column h2,
.contact-info-column h2 {
    margin: 0 0 30px;

    color: var(--text-color);

    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
}


/* =========================================================
   FORM
========================================================= */

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


.contact-field {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.contact-field label {
    color: var(--text-color);

    font-size: 14px;
}


.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;

    padding: 13px 14px;

    border:
        1px solid rgba(74, 53, 41, 0.22);

    border-radius: 7px;

    outline: none;

    background:
        rgba(255, 255, 255, 0.28);

    color: var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.contact-field textarea {
    resize: vertical;

    min-height: 150px;
}


.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color:
        var(--accent-color);

    box-shadow:
        0 0 0 3px rgba(180, 148, 103, 0.12);
}

/* =========================
   CONTACT METHOD
========================= */

.contact-field-label {
    color: var(--text-color);

    font-size: 14px;
}


.contact-method-options {
    display: flex;

    align-items: center;

    gap: 26px;

    padding-top: 4px;
}


.contact-method-option {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--text-color);

    font-size: 15px;

    cursor: pointer;
}


.contact-method-option input {
    width: auto;

    margin: 0;

    accent-color:
        var(--text-color);

    cursor: pointer;
}


/* =========================
   SEND BUTTON
========================= */

.contact-submit {
    align-self: flex-start;

    min-width: 170px;

    margin-top: 4px;

    padding: 13px 24px;

    border:
        1px solid var(--text-color);

    border-radius: 7px;

    background: transparent;

    color: var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}


.contact-submit:hover {
    background:
        var(--text-color);

    color:
        var(--page-bg);
}


.contact-form-status {
    min-height: 20px;

    margin: 0;

    color: var(--muted-text);

    font-size: 13px;
}

.contact-form-status.success {
    color: #657451;
}


.contact-form-status.error {
    color: #9b4e45;
}


.contact-submit:disabled {
    opacity: 0.6;

    cursor: wait;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-description {
    margin-bottom: 36px;

    color: var(--muted-text);

    font-size: 16px;
    line-height: 1.75;
}


.contact-description p {
    margin: 0 0 18px;
}


.contact-description p:last-child {
    margin-bottom: 0;
}


.contact-description .contact-lead {
    color: var(--text-color);

    font-size: 1.06em;
}


/* =========================
   EMAIL
========================= */

.contact-email-block {
    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-bottom: 34px;
}


.contact-email-block span {
    color: var(--muted-text);

    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.contact-email-copy {
    width: fit-content;

    padding: 0;

    border: none;
    border-bottom:
        1px solid rgba(74, 53, 41, 0.28);

    background: transparent;

    color: var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    cursor: copy;

    transition:
        border-color 0.2s ease,
        color 0.2s ease;
}


.contact-email-copy:hover {
    border-color:
        var(--text-color);
}


.contact-copy-status {
    min-height: 18px;

    color: var(--accent-color);

    font-size: 13px;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.contact-socials {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(130px, 1fr));

    gap: 12px;
}


.contact-social-link {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 12px 14px;

    border:
        1px solid rgba(74, 53, 41, 0.14);

    border-radius: 8px;

    color: var(--text-color);

    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.contact-social-link:hover {
    transform: translateY(-2px);

    border-color:
        rgba(74, 53, 41, 0.28);

    background:
        rgba(255, 255, 255, 0.18);
}


.contact-social-link img {
    width: 28px;
    height: 28px;

    object-fit: contain;
}


.contact-social-link span {
    font-size: 14px;
}

/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {
    width: 100%;

    padding: 70px 30px 80px;

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


.testimonials-container {
    width: min(1180px, 100%);

    margin: 0 auto;
}


/* =========================
   SLIDER
========================= */

.testimonials-slider {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;
}


/* =========================
   TRACK
========================= */

.testimonials-track {
    display: flex;

    gap: 24px;

    width: 100%;

    overflow-x: auto;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;
}


.testimonials-track::-webkit-scrollbar {
    display: none;
}


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

.testimonial-card {
    flex:
        0 0 calc((100% - 48px) / 3);

    scroll-snap-align: start;

    overflow: hidden;

    border-radius: 12px;

    box-shadow:
        0 10px 28px rgba(60, 45, 35, 0.10);
}


.testimonial-card img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================
   ARROWS
========================= */

.testimonials-arrow {
    flex: 0 0 auto;

    width: 44px;
    height: 58px;

    padding: 0;

    border: none;
    border-radius: 10px;

    background:
        rgba(250, 246, 239, 0.95);

    color: var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 6px 18px rgba(60, 45, 35, 0.08);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.testimonials-arrow:hover {
    background: #faf6ef;

    transform: scale(1.05);
}


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

@media (max-width: 1000px) {

    .testimonial-card {
        flex:
            0 0 calc((100% - 24px) / 2);
    }

}


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

@media (max-width: 800px) {

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

    .contact-section {
        padding: 55px 20px 65px;
    }


    .contact-container {
        grid-template-columns: 1fr;

        gap: 55px;

        width: min(560px, 100%);
    }


    .contact-form-column h2,
    .contact-info-column h2 {
        margin-bottom: 24px;

        font-size: 30px;
    }


    .contact-submit {
        width: 100%;
    }


    .contact-socials {
        grid-template-columns: 1fr 1fr;
    }


    .contact-social-link {
        padding: 11px;
    }


    .contact-social-link img {
        width: 25px;
        height: 25px;
    }

    .testimonials-section {
        padding:
            50px 14px 60px;
    }

    .testimonials-slider {
        gap: 8px;
    }


    .testimonial-card {
        flex: 0 0 100%;
    }


    .testimonials-arrow {
        width: 36px;
        height: 50px;

        font-size: 30px;
    }

}

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

.testimonial-card {
    cursor: zoom-in;
}


.testimonial-modal {
    position: fixed;

    inset: 0;

    display: none;

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

    padding: 30px;

    z-index: 5000;
}


.testimonial-modal.open {
    display: flex;
}


.testimonial-modal-backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(30, 22, 17, 0.72);

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


.testimonial-modal-window {
    position: relative;

    z-index: 1;

    display: flex;

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

    width: min(760px, 100%);

    max-height: 92vh;

    padding: 12px;

    border-radius: 14px;

    background: var(--page-bg);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.28);
}


.testimonial-modal-window img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: calc(92vh - 24px);

    object-fit: contain;

    border-radius: 10px;
}


.testimonial-modal-close {
    position: absolute;

    top: 10px;
    right: 12px;

    z-index: 2;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background:
        rgba(247, 241, 232, 0.94);

    color: var(--text-color);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.12);
}


body.modal-open {
    overflow: hidden;
}


/* =========================================================
   TESTIMONIAL MODAL MOBILE
========================================================= */

@media (max-width: 800px) {

    .testimonial-modal {
        padding: 12px;
    }


    .testimonial-modal-window {
        width: 100%;

        max-height: 94vh;

        padding: 8px;
    }


    .testimonial-modal-window img {
        max-height: calc(94vh - 16px);
    }


    .testimonial-modal-close {
        top: 8px;
        right: 8px;
    }

}

@media (max-width: 420px) {

    .contact-socials {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   HOME INTRO EDITABLE FORMATTING
========================================================= */


/* FONT */

.home-intro-font-serif {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


.home-intro-font-elegant {

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Palatino,
        serif;

}


.home-intro-font-sans {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* SIZE */

.home-intro-description.home-intro-size-small {

    font-size:
        14px;

}


.home-intro-description.home-intro-size-normal {

    font-size:
        16px;

}


.home-intro-description.home-intro-size-large {

    font-size:
        18px;

}


/* INLINE FORMATTING */

.home-intro-description strong {

    font-weight:
        700;

}


.home-intro-description em {

    font-style:
        italic;

}