@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}


@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
}


@font-face {
    font-family: "Montaga";
    src: url("fonts/Montaga-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    background-color:#F3F3F3;
}

.website {
    width: 100%;
    max-width: 1920px;

    min-height: 100vh;

    margin: 0 auto;

    background-color: #F3F3F3;
}

.page {
    width: calc(100% - 40px);

    max-width: 1760px;

    margin: 20px auto;

    background-color: #FDFDFD;

    border-radius: 18px;
}

.header {
    min-height: 130px;

    padding: 0 clamp(20px, 4vw, 80px);

    display: flex;

    align-items: center;
}

/* ========================================
   REGISTRÁCIA 2 % Z DANE
   ======================================== */

.tax-two-banner {
    position: relative;

    min-height: 150px;

    margin:
        0
        clamp(20px, 4vw, 80px)
        34px;

    padding:
        0
        170px
        0
        205px; /* was 132px */

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            105deg,
            #FBF8F2 0%,
            #FBF7EF 48%,
            #F8F2E7 100%
        );

    border: 1px solid #DCC79F;
    border-radius: 15px;

    box-shadow:
        0 5px 11px rgba(27, 38, 61, 0.10);

    color: #1B263D;
}


/* RED DIAGONAL STRIPE */

.tax-two-ribbon {
    position: absolute;

    width: 225px;
    height: 35px;

    top: 15px;
    left: -61px;

    background:
        linear-gradient(
            90deg,
            #B92332 0%,
            #D13542 52%,
            #C92D3B 100%
        );

    transform: rotate(-45deg);

    transform-origin: center;

    box-shadow:
        0 5px 8px rgba(80, 20, 25, 0.22);

    z-index: 4;

    pointer-events: none;
}


/* ========================================
   ICON
   ======================================== */

.tax-two-icon {
    position: absolute;

    left: 140px; /* was 92px */
    top: 50%;

    width: 82px;
    height: 82px;

    transform: translate(-50%, -50%);

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

    background-color: #FDFBF7;

    border: 1px solid #E4D6BF;
    border-radius: 50%;

    color: #C6A363;

    box-shadow:
        0 5px 13px rgba(27, 38, 61, 0.10);
}


.tax-two-icon svg {
    width: 50px;
    height: 50px;

    display: block;
}


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

.tax-two-content {
    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;
}


.tax-two-content h2 {
    margin: 0 0 10px 0;

    font-family: "Montaga", serif;

    font-size: clamp(30px, 2.15vw, 38px);
    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.2px;

    color: #1B263D;
}



.tax-two-content p {
    margin: 0;

    font-family: "Montserrat", sans-serif;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.4;

    color: #3D4658;
}


/* ========================================
   DIVIDER
   ======================================== */

.tax-two-divider {
    width: 1px;
    height: 69px;

    flex-shrink: 0;

    margin-left: 48px;
    margin-right: 48px;

    background-color: #D4BC91;

    opacity: 0.8;

    position: relative;

    z-index: 2;
}


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

.tax-two-button {
    position: relative;

    z-index: 3;

    width: 205px;
    height: 51px;

    flex-shrink: 0;

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

    background-color: #1B263D;

    border-radius: 8px;

    color: #FFFFFF;

    font-family: "Montserrat", sans-serif;

    font-size: 15px;

    font-weight: 500;

    text-decoration: none;

    box-shadow:
        0 3px 7px rgba(27, 38, 61, 0.08);

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


.tax-two-button:hover {
    background-color: #26344F;

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(27, 38, 61, 0.15);
}


/* ========================================
   DECORATIVE BRANCH
   ======================================== */

.tax-two-branch {
    position: absolute;

    right: -7px;
    bottom: -9px;

    width: 180px;
    height: 125px;

    fill: none;

    stroke: #D7C39D;

    stroke-width: 1.4;

    opacity: 0.48;

    pointer-events: none;
}


.tax-two-branch ellipse {
    fill: none;
    stroke: #D7C39D;
}


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

@media (max-width: 1100px) {

    .tax-two-banner {
        padding-right: 105px;
        padding-left: 120px;
    }


    .tax-two-icon {
        left: 78px;

        width: 72px;
        height: 72px;
    }


    .tax-two-icon svg {
        width: 44px;
        height: 44px;
    }


    .tax-two-divider {
        margin-left: 28px;
        margin-right: 28px;
    }


    .tax-two-button {
        width: 165px;
    }


    .tax-two-branch {
        width: 135px;
    }

}


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

@media (max-width: 850px) {

    .tax-two-banner {
        min-height: 135px;

        padding:
            22px
            28px
            22px
            105px;
    }


    .tax-two-icon {
        left: 63px;

        width: 67px;
        height: 67px;
    }


    .tax-two-content h2 {
        font-size: 28px;
    }


    .tax-two-content p {
        max-width: 360px;

        font-size: 12px;
    }


    .tax-two-divider {
        display: none;
    }


    .tax-two-button {
        width: 140px;

        margin-left: 25px;
    }


    .tax-two-branch {
        display: none;
    }

}


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

@media (max-width: 650px) {

    .tax-two-banner {
        min-height: auto;

        padding:
            25px
            20px
            24px
            84px;

        flex-wrap: wrap;
    }


    .tax-two-icon {
        left: 44px;

        top: 38px;

        width: 55px;
        height: 55px;

        transform: translate(-50%, 0);
    }


    .tax-two-icon svg {
        width: 34px;
        height: 34px;
    }


    .tax-two-content {
        width: 100%;

        flex: none;
    }


    .tax-two-content h2 {
        margin-bottom: 8px;

        font-size: 24px;

        line-height: 1.1;
    }


    .tax-two-content p {
        font-size: 12px;

        line-height: 1.5;
    }


    .tax-two-button {
        width: 145px;
        height: 45px;

        margin:
            20px
            0
            0
            0;
    }


    .tax-two-ribbon {
        width: 120px;

        left: -47px;
        top: -27px;
    }

}


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

@media (max-width: 900px) {

    .tax-promo {
        padding: 24px 28px;
    }

    .tax-promo-action {
        margin-left: 25px;
        margin-right: 20px;

        gap: 25px;
    }

    .tax-promo-decoration {
        display: none;
    }

}


@media (max-width: 700px) {

    .tax-promo {
        min-height: auto;

        padding: 25px 22px;

        align-items: flex-start;

        flex-wrap: wrap;
    }

    .tax-promo-icon {
        width: 58px;
        height: 58px;

        margin-right: 18px;
    }

    .tax-promo-icon svg {
        width: 31px;
        height: 31px;
    }

    .tax-promo-content {
        width: calc(100% - 80px);
    }

    .tax-promo-content h2 {
        font-size: 25px;
    }

    .tax-promo-text {
        font-size: 13px;

        line-height: 1.45;
    }

    .tax-promo-action {
        width: 100%;

        margin: 22px 0 0 76px;

        display: block;
    }

    .tax-promo-divider {
        display: none;
    }

    .tax-promo-button {
        width: 160px;
    }

}

.hero {
    padding: 0 clamp(20px, 4vw, 80px);

    display: grid;

    grid-template-columns: 1fr 1.15fr;

    gap: clamp(30px, 4vw, 85px);
    
}

.hero-image {
    width: 100%;
    height: 94%;

    background-color: #dddddd;

    border-radius: 16px;

    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: 60% center;

    display: block;
}

.logo {
    width: clamp(180px, 17vw, 230px);
}

.logo img {
    width: 100%;
    height: auto;
    display: block;

    -webkit-user-drag: none;
    user-select: none;
}

.navigation {
    display: flex;
    gap: clamp(20px, 4vw, 75px);
    padding-left: 80px;
}

.nav-link {
    position: relative;

    display: inline-block;

    color: #1b263d;

    text-decoration: none;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 600;

    line-height: 20px;

    padding-bottom: 10px;

    white-space: nowrap;

    -webkit-tap-highlight-color: transparent;
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 32px;
    height: 2px;

    background-color: #1b263d;

    border-radius: 10px;

    transform: translateX(-50%) scaleX(0);

    transition: transform 0.25s ease;
}

.nav-link.active::after {
    transform: translateX(-50%) scaleX(1);
}

.nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.contact-button {
    margin-left: auto;

    width: 155px;
    height: 48px;

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

    background-color: #1b263d;

    border-radius: 10px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

    cursor: pointer;

        /* your existing properties */

    transition: background-color 0.2s ease;

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

.contact-button:hover {
    background-color: #26344f;

    transform: scale(1.04);
}

.hero-left {
    display: flex;

    flex-direction: column;
}

.intro {
    padding-bottom: 42px;
    padding-top: 12px;
}

.intro h1 {
    margin: 0 0 16px 0;

    font-family: "Montaga", serif;

    font-size: 48px;
    font-weight: 400;

    line-height: 1.05;

    color: #1b263d;
}

.intro-text {
    margin: 0;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.45;

    color: #343b49;
}

.intro-line {
    width: 48px;
    height: 2px;

    margin-top: 22px;

    background-color: #B99A64;
}

.intro-label {
    margin: 0 0 16px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}

.information {
    display: grid;

    grid-template-columns: 340px 255px;

    column-gap: 30px;

    align-items: stretch;
}

.hours {
    width: 340px;
}

.hours-title {
    margin: 0 0 18px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}

.hours-table {
    width: 100%;

    border: 1px solid #E5DDD1;

    border-radius: 10px;

    overflow: hidden;

    background-color: #F2F2F2;
}

.hours-row {
    height: 36px;

    padding: 0 12px;

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

    font-size: 15px;
    font-weight: 500;

    color: #343b49;
}

.hours-row:not(:last-child) {
    border-bottom: 1px solid #FDFDFD;
}

.info-right {
    width: 255px;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}

.location-title {
    margin: 0 0 18px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}

.location-box {
    width: 100%;
    min-height: 64px;

    padding: 0 16px;

    display: flex;
    align-items: center;

    gap: 10px;

    border: 1px solid #E5DDD1;

    border-radius: 10px;

    background-color: #F7F5F2;

    font-size: 15px;
    font-weight: 500;

    color: #343B49;

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

.location-section {
    width: 100%;
}

.location-box {
    width: 100%;
}

.location-icon {
    font-size: 16px;
}

.location-pin {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    fill: #c29b55;
}

.copy-address {
    cursor: pointer;

    transition: color 0.2s ease;
}

.copy-address:hover {
    color: #c29b55;
}

.contact-title {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    font-size: 15px;
    font-weight: 500;
}

.contact-icon {
    width: 24px;
    height: 24px;

    fill: #ffffff;

    flex-shrink: 0;
}

.contact-box {
    width: 100%;
    min-height: 160px;

    padding: 24px 18px;

    background-color: #1b263d;

    border-radius: 12px;

    color: white;
}

.contact-phone,
.contact-email {
    display: block;
    width: fit-content;

    color: white;

    font-size: 15px;
    font-weight: 400;

    text-decoration: none;
}

.contact-phone {
    margin-bottom: 12px;
}

.contact-phone:hover,
.contact-email:hover {
    text-decoration: underline;
}
.services {
    margin: 30px clamp(20px, 4vw, 80px) 0;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    height: 205px;

    background-color: #f2f2f2;

    border-radius: 16px;

    overflow: hidden;
}

.service {
    padding: 30px 36px;

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

    gap: 24px;

    transition: background-color 0.2s ease;
}

.service:hover {
    background-color: #F7F5F2;
}

.service:not(:last-child) {
    border-right: 1px solid #E2E2E2;
}

.service-number {
    margin: 0 0 12px 0;

    font-size: 12px;

    font-weight: 500;

    color: #b99a64;
}

.service-title {
    margin: 0 0 10px 0;

    font-size: 20px;

    font-weight: 500;

    color: #1d2638;
}

.service-text {
    margin: 0;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.5;

    color: #5f6470;
}

.service-icon {
    width: 86px;
    height: 86px;

    flex-shrink: 0;

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

    background-color: #EEE8DF;

    border-radius: 50%;
}

.service-icon svg {
    width: 40px;
    height: 40px;

    fill: #c29b55;
}

.service-content {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}

.service-link {
    margin-top: 18px;

    font-size: 15px;
    font-weight: 500;

    color: #C29B55;

    text-decoration: none;

    transition: color 0.2s ease;
}

.service-link::after {
    content: " →";

    display: inline-block;

    margin-left: 4px;

    transition: transform 0.2s ease;
}

.service-link:hover {
    text-decoration: none;

    color: #A98548;
}

.service-link:hover::after {
    transform: translateX(3px);
}

.services-points {
    margin: 4px 0 0 0;
    padding: 0;

    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.services-points li {
    position: relative;

    padding-left: 16px;

    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;

    color: #5f6470;
}

.services-points li::before {
    content: "";

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

    width: 6px;
    height: 6px;

    background-color: #C29B55;
    border-radius: 50%;
}

.footer {
    height: 88px;

    margin-top: 76px;

    padding: 0 55px;

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

    background-color: #1b263d;

    border-radius: 12px;

    color: white;
}

.footer-item {
    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;

    font-size: 15px;
    font-weight: 400;

    color: #ffffff;
}

.footer-icon {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    fill: #c29b55;
}

.footer-name {
    font-size: 15px;
    font-weight: 400;

    color: #ffffff;

    white-space: nowrap;
}

.footer-link {
    color: white;

    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

.ZLTA15 {
    font-size: 15px;
    color: #B99A64;
}


@media (max-width: 1100px) {

    .footer {
        gap: 25px;

        padding: 0 30px;
    }

}

@media (max-width: 900px) {

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

    .services {
        grid-template-columns: 1fr;

        height: auto;
    }

    .footer {
        margin-top: 120px;
    }

    .services-list {
    grid-template-columns: repeat(2, 1fr);
    }

    .services-info {
    grid-template-columns: 1fr;
    }

}

@media (max-width: 700px) {

    .information {
        grid-template-columns: 1fr;
    }
    .navigation {
        display: none;
    }
    .footer {
        margin-top: 120px;
    }
    .services-list {
    grid-template-columns: 1fr;
}

}

/* COPY NOTIFICATION */

.copy-toast {
    position: fixed;

    left: 50%;
    bottom: 35px;

    transform: translate(-50%, 20px);

    padding: 14px 22px;

    background-color: #1A2438;

    color: white;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 500;

    opacity: 0;

    pointer-events: none;

    z-index: 9999;

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

.copy-toast.show {
    opacity: 1;

    transform: translate(-50%, 0);
}

/* ========================================
   SLUZBY PAGE
   ======================================== */

.services-page {
    padding: 40px clamp(20px, 4vw, 80px) 0px;
}


/* PAGE TITLE */

.services-heading {
    margin-bottom: 40px;
    margin-top: -28px;
}

.services-heading-line {
    width: 48px;
    height: 2px;

    margin-top: 22px;

    background-color: #B99A64;
}


/* SERVICES GRID */

.services-list {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}


/* INDIVIDUAL SERVICE */

.services-card {
    min-height: 220px;

    padding: 24px;

    background-color: #F7F5F2;

    border: 1px solid #E5DDD1;

    border-radius: 12px;

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


.services-card:hover {
    transform: translateY(-2px);

    background-color: #F4F1EC;

    border-color: #D7C7AD;

    box-shadow: 0 8px 22px rgba(27, 38, 61, 0.06);
}


/* NUMBER */

.services-number {
    display: block;

    margin-bottom: 16px;

    font-size: 12px;
    font-weight: 600;

    color: #B99A64;
}


/* ICON + TITLE */

.services-card-heading {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 14px;
}


.services-card-icon {
    width: 54px;
    height: 54px;

    flex-shrink: 0;

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

    background-color: #eee8df;

    border-radius: 50%;
}


.services-card-icon svg {
    width: 28px;
    height: 28px;

    fill: #c29b55;
}


.services-card h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;

    font-size: 20px;
    font-weight: 500;

    line-height: 1.25;

    color: #1B263D;
}


/* DESCRIPTION */

.services-card > p {
    margin: 0;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.5;

    color: #5f6470;
}



/* ========================================
   DARK INFORMATION CARDS
   ======================================== */

/* ========================================
   INFORMATION CARDS - SLUZBY
   same style as services on DOMOV
   ======================================== */

.services-info {
    margin-top: 40px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    height: 175px;

    background-color: #F2F2F2;

    border-radius: 16px;

    overflow: hidden;
}


.services-info-card {
    padding: 28px 36px;

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

    background-color: transparent;

    color: #1B263D;

    transition: background-color 0.2s ease;
}

.services-info-card:hover {
    background-color: #F7F5F2;
}


/* lines between the 3 sections */

.services-info-card:not(:last-child) {
    border-right: 1px solid #E2E2E2;
}


/* title */

.services-info-card h2 {
    margin: 0 0 10px 0;

    font-family: "Montserrat", sans-serif;

    font-size: 20px;
    font-weight: 500;

    color: #1d2638;
}


/* description */

.services-info-card p {
    margin: 0;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.5;

    color: #5f6470;
}

.services-heading-title {
    margin: 0 0 22px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}


.services-heading-text {
    margin: 12px 0 0 0;

    max-width: 520px;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.5;

    color: #1b263d;
}


.services-heading-line {
    width: 48px;
    height: 2px;

    margin-top: 22px;

    background-color: #B99A64;
}

.documents-page {
    padding: 40px clamp(20px, 4vw, 80px) 60px;
    min-height: 720px;
}

/* ========================================
   DOKUMENTY
   ======================================== */

.documents-list {
    width: 760px;
    max-width: 100%;

    border: 1px solid #E5DDD1;
    border-radius: 12px;

    overflow: hidden;

    background-color: #f2f2f2;
}


.document-row {
    width: 100%;
    min-height: 62px;

    padding: 0 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    color: #343B49;

    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

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


.document-row:not(:last-child) {
    border-bottom: 1px solid #E2E2E2;
}


.document-download-icon {
    width: 38px;
    height: 38px;

    padding: 9px;

    flex-shrink: 0;

    fill: #C29B55;

    background-color: #EEE8DF;

    border-radius: 50%;
}

.document-row::after {
    content: "Stiahnuť →";

    margin-left: auto;

    padding-left: 20px;

    font-size: 12px;
    font-weight: 600;

    color: #B99A64;

    white-space: nowrap;

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

.document-row:hover::after {
    color: #A98548;

    transform: translateX(3px);
}

.document-row:hover {
    background-color: #F7F5F2;

    padding-left: 21px;
}

/* ========================================
   O NAS PAGE
   ======================================== */

.about-page {
    padding: 40px clamp(20px, 4vw, 80px) 45px;
}



/* ========================================
   PAGE HEADING
   ======================================== */

.onas-heading {
    margin-top: -28px;
    margin-bottom: 40px;
}


.onas-heading-title {
    margin: 0 0 22px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}


.onas-heading-text {
    margin: 12px 0 0 0;

    max-width: 520px;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.5;

    color: #1B263D;
}


.onas-heading-line {
    width: 48px;
    height: 2px;

    margin-top: 22px;

    background-color: #B99A64;
}



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

.about-hero {
    display: grid;

    grid-template-columns: 0.82fr 1.18fr;

    gap: 30px;

    align-items: stretch;
}



/* ========================================
   NOTARY PROFILE CARD
   ======================================== */

.about-person {
    min-height: 440px;

    padding: 34px 36px;

    display: flex;
    flex-direction: column;

    background-color: #F2F2F2;

    border-radius: 16px;
}


.about-small-title {
    margin: 0 0 16px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}


.about-person h1 {
    margin: 0;

    font-family: "Montaga", serif;

    font-size: 48px;
    font-weight: 400;

    line-height: 1.1;

    color: #1B263D;
}


.about-person-intro {
    max-width: 480px;

    margin: 20px 0 20px 0;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.5;

    color: #5F6470;
}


/* ========================================
   PROFILE FACTS
   ======================================== */

.about-fact {
    min-height: 64px;

    display: grid;

    grid-template-columns: 38px 1fr;

    gap: 16px;

    align-items: center;

    padding: 14px 0;
}


.about-fact:not(:last-child) {
    border-bottom: 1px solid #E0E0E0;
}


.about-fact-number {
    font-size: 15px;
    font-weight: 600;

    color: #B99A64;
}


.about-fact p {
    margin: 0;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.45;

    color: #343B49;
}



/* ========================================
   OFFICE IMAGE
   ======================================== */

.about-office-image {
    position: relative;

    min-height: 440px;

    overflow: hidden;

    background-color: #EEEEEE;

    border-radius: 16px;
}


.about-office-image img {
    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    display: block;

    object-fit: cover;
    object-position: center 67%; /* show more of the bottom */
}



/* IMAGE ADDRESS */

.about-image-address {
    position: absolute;

    right: 20px;
    bottom: 20px;

    min-width: 245px;

    padding: 16px 18px;

    display: flex;

    align-items: center;

    gap: 12px;

    background-color: rgba(253, 253, 253, 0.96);

    border-radius: 10px;

    box-shadow: 0 8px 24px rgba(27, 38, 61, 0.10);
}


.about-image-address svg {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    fill: #B99A64;
}


.about-image-address > div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.about-image-address span {
    font-size: 15px;
    font-weight: 500;

    line-height: 1.35;

    color: #5F6470;
}


.about-image-address .about-image-address-title {
    color: #1B263D;
}



/* ========================================
   LOCATION HEADING
   ======================================== */

.about-location-heading {
    margin-top: 58px;

    margin-bottom: 28px;
}


.about-location-heading-text {
    margin: 0;

    font-size: 15px;
    font-weight: 500;

    color: #1B263D;
}


.about-location-heading-line {
    width: 48px;
    height: 2px;

    margin-top: 18px;

    background-color: #B99A64;
}



/* ========================================
   LOCATION SECTION
   ======================================== */

.about-location {
    display: grid;

    grid-template-columns: 1.55fr 0.65fr;

    min-height: 290px;

    overflow: hidden;

    border-radius: 16px;
}



/* ========================================
   MAP
   ======================================== */

.about-map {
    min-height: 290px;

    background-color: #EEEEEE;
}


.about-map iframe {
    width: 100%;
    height: 100%;

    min-height: 290px;

    display: block;

    border: 0;
}



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

.about-visit-card {
    min-height: 290px;

    padding: 32px 34px;

    display: flex;

    flex-direction: column;

    background-color: #1B263D;

    color: #FFFFFF;
}


.about-visit-label {
    margin: 0 0 12px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}


.about-visit-card h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;

    font-size: 20px;
    font-weight: 500;

    color: #FFFFFF;
}


.about-visit-line {
    width: 48px;
    height: 2px;

    margin: 20px 0 24px;

    background-color: #B99A64;
}



/* CONTACT DETAILS */

.about-visit-detail {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 14px;
}


.about-visit-detail svg {
    width: 20px;
    height: 20px;

    flex-shrink: 0;

    fill: #B99A64;
}


.about-visit-detail span,
.about-visit-detail a {
    font-size: 15px;
    font-weight: 400;

    line-height: 1.45;

    color: #E1E4E9;

    text-decoration: none;
}


.about-visit-detail a:hover {
    color: #B99A64;
}



/* CONTACT BUTTON */

.about-visit-button {
    width: fit-content;
    min-width: 150px;

    height: 46px;

    margin-top: auto;

    padding: 0 18px;

    display: flex;

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

    gap: 12px;

    background-color: #FFFFFF;

    border-radius: 10px;

    color: #1B263D;

    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

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


.about-visit-button:hover {
    background-color: #F2F2F2;

    transform: scale(1.03);
}


.about-visit-button span {
    font-size: 18px;
}



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

@media (max-width: 1050px) {

    .about-hero {
        grid-template-columns: 1fr 1fr;
    }


    .about-person h1 {
        font-size: 42px;
    }


    .about-location {
        grid-template-columns: 1.3fr 0.8fr;
    }

}



@media (max-width: 850px) {

    .about-hero {
        grid-template-columns: 1fr;
    }


    .about-person {
        min-height: auto;
    }


    .about-office-image {
        min-height: 380px;
    }


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

        overflow: visible;

        gap: 20px;
    }


    .about-map {
        border-radius: 16px;

        overflow: hidden;
    }


    .about-visit-card {
        border-radius: 16px;
    }

}



@media (max-width: 600px) {

    .about-person {
        padding: 28px 24px;
    }


    .about-person h1 {
        font-size: 36px;
    }


    .about-office-image {
        min-height: 300px;
    }


    .about-image-address {
        left: 15px;
        right: 15px;
        bottom: 15px;

        min-width: 0;
    }


    .about-location-heading {
        margin-top: 38px;
    }


    .about-visit-card {
        padding: 28px 24px;
    }

}

/* ========================================
   KONTAKT PAGE
   ======================================== */

.contact-page {
    padding: 40px clamp(20px, 4vw, 80px) 45px;
}


/* ========================================
   HEADING
   ======================================== */

.contact-page-heading {
    margin-top: -28px;
    margin-bottom: 32px;
}


.contact-page-heading-title {
    margin: 0 0 22px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}


.contact-page-heading-text {
    margin: 12px 0 0 0;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.5;

    color: #1B263D;
}


.contact-page-heading-line {
    width: 48px;
    height: 2px;

    margin-top: 22px;

    background-color: #B99A64;
}



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

.contact-page-layout {
    display: grid;

    grid-template-columns: 0.7fr 1.3fr;

    gap: 30px;

    align-items: stretch;
}



/* ========================================
   LEFT CONTACT CARD
   ======================================== */

.contact-page-info {
    min-height: 500px;

    padding: 38px 40px;

    background-color: #1B263D;

    border-radius: 12px;

    color: #ffffff;
}


.contact-page-info-small {
    margin: 0 0 18px 0;

    font-size: 15px;
    font-weight: 500;

    color: #B99A64;
}


.contact-page-info h2 {
    margin: 0;

    font-family: "Montserrat", sans-serif;

    font-size: 20px;
    font-weight: 500;

    color: #ffffff;
}


.contact-page-intro {
    max-width: 390px;

    margin: 18px 0 0 0;

    font-size: 15px;
    font-weight: 400;

    line-height: 1.5;

    color: #E1E4E9;
}


.contact-page-info-line {
    width: 48px;
    height: 2px;

    margin: 24px 0 34px;

    background-color: #B99A64;
}



/* CONTACT DETAILS */

.contact-page-detail {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 25px;
}


.contact-page-detail-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    background-color: rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}


.contact-page-detail-icon svg {
    width: 24px;
    height: 24px;

    fill: #B99A64;
}


.contact-page-detail > div:last-child {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.contact-page-detail-label {
    font-size: 15px;
    font-weight: 500;

    color: #ffffff;
}


.contact-page-detail a,
.contact-page-detail span:not(.contact-page-detail-label) {
    font-size: 15px;
    font-weight: 400;

    line-height: 1.4;

    color: #DADDE3;

    text-decoration: none;
}


.contact-page-detail a:hover {
    color: #B99A64;
}



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

.contact-page-form {
    min-height: 500px;

    padding: 38px 40px;

    display: flex;

    flex-direction: column;

    gap: 24px;

    background-color: #F2F2F2;

    border-radius: 12px;
}



/* TWO-COLUMN ROWS */

.contact-form-row {
    display: grid;

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

    gap: 24px;
}



/* FORM GROUP */

.contact-form-group {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.contact-form-group label {
    font-size: 15px;
    font-weight: 500;

    color: #1B263D;
}



/* INPUTS */

.contact-form-group input,
.contact-form-group textarea {
    width: 100%;

    padding: 0 16px;

    border: 1px solid #D9D9D9;

    border-radius: 10px;

    background-color: #FDFDFD;

    font-family: "Montserrat", sans-serif;

    font-size: 15px;
    font-weight: 400;

    color: #343B49;

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


.contact-form-group input {
    height: 52px;
}


.contact-form-group textarea {
    height: 145px;

    padding-top: 15px;

    resize: vertical;
}



/* PLACEHOLDER */

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #9A9DA5;
}



/* FOCUS */

.contact-form-group input:focus,
.contact-form-group textarea:focus {
    outline: none;

    border-color: #B99A64;

    box-shadow: 0 0 0 3px rgba(185, 154, 100, 0.10);
}



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

.contact-form-bottom {
    display: flex;

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

    gap: 30px;
}


.contact-form-privacy {
    max-width: 470px;

    margin: 0;

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

    line-height: 1.5;

    color: #777C86;
}



/* SUBMIT BUTTON */

.contact-submit-button {
    min-width: 175px;
    height: 48px;

    padding: 0 20px;

    flex-shrink: 0;

    display: flex;

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

    gap: 12px;

    border: none;

    border-radius: 10px;

    background-color: #1B263D;

    font-family: "Montserrat", sans-serif;

    font-size: 15px;
    font-weight: 500;

    color: #ffffff;

    cursor: pointer;

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


.contact-submit-button:not(:disabled):hover {
    background-color: #26344F;

    transform: scale(1.03);
}


/* BUTTON TEXT */

.contact-submit-label {
    font-size: 15px;
}


/* ARROW */

.contact-submit-arrow {
    font-size: 18px;

    transition: transform 0.2s ease;
}


.contact-submit-button:not(:disabled):hover .contact-submit-arrow {
    transform: translateX(3px);
}

/* ========================================
   CONTACT FORM - LOADING
   ======================================== */

.contact-submit-spinner {
    width: 17px;
    height: 17px;

    display: none;

    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;

    border-radius: 50%;

    animation: contact-spinner 0.7s linear infinite;
}


.contact-submit-button.is-loading {
    background-color: #26344F;

    cursor: wait;

    transform: none;
}


.contact-submit-button.is-loading .contact-submit-arrow {
    display: none;
}


.contact-submit-button.is-loading .contact-submit-spinner {
    display: block;
}


@keyframes contact-spinner {

    to {
        transform: rotate(360deg);
    }

}

/* ========================================
   CONTACT FORM - SUCCESS
   ======================================== */

.contact-form-success {
    width: 100%;

    padding: 16px 18px;

    display: none;

    align-items: center;

    gap: 14px;

    background-color: #F7F5F2;

    border: 1px solid #E5DDD1;

    border-radius: 10px;
}


/* SHOW SUCCESS */

.contact-form-success.show {
    display: flex;

    animation: contact-success-show 0.3s ease;
}


/* CHECK ICON */

.contact-form-success-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    background-color: #EEE8DF;

    border-radius: 50%;

    font-size: 20px;
    font-weight: 600;

    color: #B99A64;
}


/* TEXT */

.contact-form-success-text {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.contact-form-success-title {
    font-size: 15px;
    font-weight: 500;

    color: #1B263D;
}


.contact-form-success-description {
    font-size: 12px;
    font-weight: 400;

    color: #777C86;
}


/* SMALL APPEAR ANIMATION */

@keyframes contact-success-show {

    from {
        opacity: 0;

        transform: translateY(5px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}



/* ========================================
   ACTIVE CONTACT BUTTON
   ======================================== */

.contact-button-active {
    background-color: #26344F;
}



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

@media (max-width: 950px) {

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


    .contact-page-info {
        min-height: auto;
    }

}


@media (max-width: 700px) {

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


    .contact-page-info,
    .contact-page-form {
        padding: 28px 24px;
    }


    .contact-form-bottom {
        flex-direction: column;

        align-items: flex-start;
    }


    .contact-submit-button {
        width: 100%;
    }

}

/* ========================================
   CONTACT FORM - ANTI SPAM
   ======================================== */

.contact-honeypot {
    position: absolute;

    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;
}

/* ========================================
   CONTACT FORM - ERROR
   ======================================== */

.contact-form-error {
    width: 100%;

    padding: 16px 18px;

    display: none;

    align-items: center;

    gap: 14px;

    background-color: #F7F5F2;

    border: 1px solid #E5DDD1;

    border-radius: 10px;
}


.contact-form-error.show {
    display: flex;

    animation: contact-success-show 0.3s ease;
}


.contact-form-error-icon {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    background-color: #EEE8DF;

    border-radius: 50%;

    font-size: 20px;
    font-weight: 600;

    color: #B99A64;
}


.contact-form-error-text {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.contact-form-error-title {
    font-size: 15px;
    font-weight: 500;

    color: #1B263D;
}


.contact-form-error-description {
    font-size: 12px;
    font-weight: 400;

    color: #777C86;
}


/* =========================================================
   MOBILE HAMBURGER MENU
   ========================================================= */


/* Hide mobile-only elements on desktop */

.mobile-menu-toggle,
.mobile-nav-contact {
    display: none;
}


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

@media (max-width: 700px) {

    /* HEADER */

    .header {
        position: relative;

        min-height: 78px;

        padding-left: 16px;
        padding-right: 16px;

        z-index: 1000;
    }


    /* LOGO */

    .logo {
        width: 145px;

        flex-shrink: 0;
    }


    /* Hide desktop Kontakt button */

    .contact-button {
        display: none;
    }


    /* =====================================================
       HAMBURGER BUTTON
       ===================================================== */

    .mobile-menu-toggle {
        width: 44px;
        height: 44px;

        margin-left: auto;

        padding: 0;

        display: flex;

        flex-direction: column;

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

        gap: 5px;

        background-color: #F7F5F2;

        border: 1px solid #E5DDD1;

        border-radius: 9px;

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

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


    .mobile-menu-toggle:hover {
        background-color: #F2F2F2;

        border-color: #D7C7AD;
    }


    .mobile-menu-toggle:active {
        transform: scale(0.96);
    }


    /* THREE HAMBURGER LINES */

    .mobile-menu-toggle span {
        width: 20px;
        height: 2px;

        display: block;

        background-color: #1B263D;

        border-radius: 10px;

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


    /* =====================================================
       HAMBURGER -> X
       ===================================================== */

    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }


    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


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

    .navigation {
        position: absolute;

        top: calc(100% - 2px);

        left: 12px;
        right: 12px;

        width: auto;

        padding: 10px;

        display: flex;

        flex-direction: column;

        gap: 3px;

        background-color: #FDFDFD;

        border: 1px solid #E5DDD1;

        border-radius: 12px;

        box-shadow:
            0 12px 30px rgba(27, 38, 61, 0.12);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(-8px);

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

        z-index: 9999;
    }


    .navigation.mobile-open {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }


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

    .navigation .nav-link {
        width: 100%;
        min-height: 47px;

        padding: 0 14px;

        display: flex;

        align-items: center;

        border-radius: 8px;

        color: #1B263D;

        font-size: 13px;
        font-weight: 500;

        line-height: 1;

        text-decoration: none;

        white-space: normal;

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


    .navigation .nav-link::after {
        display: none;
    }


    .navigation .nav-link:hover {
        background-color: #F2F2F2;
    }


    .navigation .nav-link.active {
        background-color: #F2F2F2;

        color: #B99A64;
    }


    /* =====================================================
       CONTACT IN MOBILE MENU
       ===================================================== */

    .mobile-nav-contact {
        width: 100%;
        min-height: 47px;

        margin-top: 5px;

        padding: 0 14px;

        display: flex;

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

        background-color: #1B263D;

        border-radius: 8px;

        color: #FFFFFF;

        font-size: 13px;
        font-weight: 500;

        text-decoration: none;

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


    .mobile-nav-contact:hover {
        background-color: #26344F;
    }


    .mobile-nav-contact:active {
        transform: scale(0.98);
    }

}

/* =========================================================
   1024px RESPONSIVE LAYOUT
   Keeps the 1440px+ desktop design unchanged.
   ========================================================= */

/* Shared tablet / small-laptop refinements */
@media (min-width: 701px) and (max-width: 1024px) {

    .page {
        width: calc(100% - 24px);
        margin: 12px auto;
        border-radius: 16px;
    }

    .header {
        min-height: 112px;
        padding-left: 28px;
        padding-right: 28px;
    }

    .logo {
        width: 170px;
        flex-shrink: 0;
    }

    .navigation {
        padding-left: clamp(24px, 3vw, 34px);
        gap: clamp(18px, 2.4vw, 26px);
        min-width: 0;
    }

    .nav-link {
        font-size: 14px;
        padding-bottom: 8px;
    }

    .contact-button {
        width: 140px;
        height: 44px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .footer {
        min-height: 82px;
        height: auto;
        margin-top: 60px;
        padding: 20px 24px;
        gap: 16px;
    }

    .footer-item,
    .footer-name {
        font-size: 13px;
    }

    .footer-icon {
        width: 20px;
        height: 20px;
    }
}


/* =========================================================
   MAIN 900–1024px LAYOUT
   ========================================================= */

@media (min-width: 901px) and (max-width: 1024px) {

    /* =========================
       HOME - 2% BANNER
       ========================= */

    .tax-two-banner {
        min-height: 140px;
        margin: 0 28px 28px;
        padding-left: 112px;
        padding-right: 34px;
    }

    .tax-two-icon {
        left: 70px;
        width: 68px;
        height: 68px;
    }

    .tax-two-icon svg {
        width: 42px;
        height: 42px;
    }

    .tax-two-content h2 {
        font-size: 30px;
    }

    .tax-two-content p {
        font-size: 14px;
    }

    .tax-two-divider {
        height: 62px;
        margin-left: 22px;
        margin-right: 22px;
    }

    .tax-two-button {
        width: 150px;
        height: 48px;
        font-size: 14px;
    }

    .tax-two-branch {
        width: 120px;
        opacity: 0.38;
    }


    /* =========================
       HOME - HERO
       ========================= */

    .hero {
        padding-left: 28px;
        padding-right: 28px;

        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, 0.92fr);

        gap: 28px;
    }

    .hero-left,
    .hero-image {
        min-width: 0;
    }

    .intro {
        padding-top: 8px;
        padding-bottom: 30px;
    }

    .intro-label {
        margin-bottom: 13px;
        font-size: 14px;
    }

    .intro h1 {
        margin-bottom: 14px;
        font-size: 40px;
    }

    .intro-text {
        font-size: 14px;
    }

    .intro-line {
        margin-top: 18px;
    }


    /* =========================
       HOME - INFORMATION
       ========================= */

    .information {
        width: 100%;

        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(0, 0.8fr);

        column-gap: 16px;
    }

    .hours,
    .info-right {
        width: auto;
        min-width: 0;
    }

    .hours-title,
    .location-title {
        margin-bottom: 14px;
        font-size: 14px;
    }

    .hours-row {
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
    }

    .location-box {
        min-height: 58px;
        padding: 0 12px;
        gap: 8px;
        font-size: 13px;
    }

    .location-pin,
    .contact-icon {
        width: 21px;
        height: 21px;
    }

    .contact-box {
        min-height: 148px;
        padding: 20px 14px;
    }

    .contact-title {
        gap: 8px;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .contact-phone,
    .contact-email {
        max-width: 100%;
        font-size: 13px;
        overflow-wrap: anywhere;
    }

    .hero-image {
        height: 100%;
        min-height: 440px;
    }


    /* =========================
       HOME - SERVICES
       ========================= */

    .services {
        height: auto;
        min-height: 195px;
        margin: 28px 28px 0;
    }

    .service {
        padding: 24px 18px;
        gap: 14px;
        min-width: 0;
    }

    .service-icon {
        width: 64px;
        height: 64px;
    }

    .service-icon svg {
        width: 31px;
        height: 31px;
    }

    .service-content {
        min-width: 0;
    }

    .service-number {
        margin-bottom: 9px;
        font-size: 11px;
    }

    .service-title {
        margin-bottom: 8px;

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

    .service-text {
        font-size: 13px;
        line-height: 1.45;
    }

    .service-link {
        margin-top: 13px;
        font-size: 13px;
    }


    /* =========================
       SERVICES PAGE
       ========================= */

    .services-page {
        padding: 34px 28px 0;
    }

    .services-heading {
        margin-top: -20px;
        margin-bottom: 34px;
    }

    .services-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .services-card {
        min-height: 0;
        padding: 22px;
    }

    .services-card-heading {
        gap: 14px;
        margin-bottom: 13px;
    }

    .services-card-icon {
        width: 50px;
        height: 50px;
    }

    .services-card-icon svg {
        width: 26px;
        height: 26px;
    }

    .services-card h2 {
        font-size: 18px;
        line-height: 1.3;
    }

    .services-points li,
    .services-card > p {
        font-size: 14px;
    }

    .services-info {
        height: auto;
        min-height: 160px;
        margin-top: 32px;
    }

    .services-info-card {
        padding: 24px 22px;
    }

    .services-info-card h2 {
        font-size: 18px;
    }

    .services-info-card p {
        font-size: 14px;
        line-height: 1.45;
    }


    /* =========================
       DOCUMENTS PAGE
       ========================= */

    .documents-page {
        min-height: 650px;
        padding: 34px 28px 50px;
    }

    .documents-list {
        width: min(760px, 100%);
    }

    .document-row {
        min-height: 60px;

        padding-left: 16px;
        padding-right: 16px;

        gap: 12px;

        font-size: 14px;
    }

    .document-download-icon {
        width: 36px;
        height: 36px;
    }


    /* =========================
       ABOUT PAGE
       ========================= */

    .about-page {
        padding: 34px 28px 40px;
    }

    .onas-heading {
        margin-top: -20px;
        margin-bottom: 34px;
    }

    .about-hero {
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(0, 1.08fr);

        gap: 24px;
    }

    .about-person {
        min-height: 410px;
        padding: 30px;
    }

    .about-person h1 {
        font-size: 38px;
    }

    .about-person-intro,
    .about-fact p {
        font-size: 14px;
    }

    .about-fact {
        grid-template-columns: 34px 1fr;

        gap: 13px;
        padding: 12px 0;
    }

    .about-office-image {
        min-height: 410px;
    }

    .about-location-heading {
        margin-top: 48px;
        margin-bottom: 24px;
    }

    .about-location {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(0, 0.75fr);

        min-height: 280px;
    }

    .about-map,
    .about-map iframe,
    .about-visit-card {
        min-height: 280px;
    }

    .about-visit-card {
        padding: 28px 24px;
    }

    .about-visit-detail span,
    .about-visit-detail a {
        font-size: 14px;
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   CONTACT PAGE 951–1024px
   ========================================================= */

@media (min-width: 951px) and (max-width: 1024px) {

    .contact-page {
        padding: 34px 28px 40px;
    }

    .contact-page-heading {
        margin-top: -20px;
        margin-bottom: 28px;
    }

    .contact-page-layout {
        grid-template-columns:
            minmax(0, 0.78fr)
            minmax(0, 1.22fr);

        gap: 24px;
    }

    .contact-page-info {
        min-height: 480px;
        padding: 30px 28px;
    }

    .contact-page-intro,
    .contact-page-detail a,
    .contact-page-detail span:not(.contact-page-detail-label) {
        font-size: 14px;
    }

    .contact-page-detail {
        gap: 14px;
        margin-bottom: 22px;
    }

    .contact-page-detail-icon {
        width: 44px;
        height: 44px;
    }

    .contact-page-form {
        min-height: 480px;

        padding: 30px;

        gap: 20px;
    }

    .contact-form-row {
        gap: 18px;
    }

    .contact-form-group {
        gap: 8px;
    }

    .contact-form-group label,
    .contact-form-group input,
    .contact-form-group textarea,
    .contact-submit-label {
        font-size: 14px;
    }

    .contact-form-group input {
        height: 50px;
    }

    .contact-form-group textarea {
        height: 135px;
    }

    .contact-form-bottom {
        gap: 20px;
    }

    .contact-submit-button {
        min-width: 160px;
        padding: 0 16px;
    }
}

/* =========================================================
   1920px RESPONSIVE LAYOUT
   Optimized for large Full HD desktop screens.
   1440px version remains unchanged.
   ========================================================= */

@media (min-width: 1600px) {

    /* =========================
       GENERAL PAGE
       ========================= */

    .page {
        width: calc(100% - 80px);
        max-width: 1760px;

        margin: 30px auto;

        border-radius: 20px;
    }


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

    .header {
        min-height: 145px;

        padding-left: 90px;
        padding-right: 90px;
    }

    .logo {
        width: 245px;
    }

    .navigation {
        padding-left: 105px;

        gap: 78px;
    }

    .nav-link {
        font-size: 16px;

        line-height: 22px;

        padding-bottom: 11px;
    }

    .nav-link::after {
        width: 35px;
    }

    .contact-button {
        width: 155px;
        height: 52px;

        border-radius: 10px;

        font-size: 16px;
    }


    /* =====================================================
       HOME PAGE
       ===================================================== */


    /* =========================
       2% TAX BANNER
       ========================= */

    .tax-two-banner {
        min-height: 165px;

        margin-left: 90px;
        margin-right: 90px;
        margin-bottom: 40px;

        padding-left: 225px;
        padding-right: 185px;
    }

    .tax-two-icon {
        left: 152px;

        width: 90px;
        height: 90px;
    }

    .tax-two-icon svg {
        width: 54px;
        height: 54px;
    }

    .tax-two-content h2 {
        font-size: 40px;

        margin-bottom: 11px;
    }

    .tax-two-content p {
        font-size: 16px;
    }

    .tax-two-divider {
        height: 76px;

        margin-left: 58px;
        margin-right: 58px;
    }

    .tax-two-button {
        width: 220px;
        height: 54px;

        font-size: 16px;
    }

    .tax-two-branch {
        width: 195px;
        height: 135px;
    }


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

    .hero {
        padding-left: 90px;
        padding-right: 90px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.18fr);

        gap: 90px;
    }

    .hero-left,
    .hero-image {
        min-width: 0;
    }

    .hero-image {
        height: 96%;

        border-radius: 18px;
    }


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

    .intro {
        padding-top: 18px;
        padding-bottom: 46px;
    }

    .intro-label {
        margin-bottom: 18px;

        font-size: 16px;
    }

    .intro h1 {
        margin-bottom: 18px;

        font-size: 54px;

        line-height: 1.05;
    }

    .intro-text {
        font-size: 16px;

        line-height: 1.5;
    }

    .intro-line {
        width: 52px;
        height: 2px;

        margin-top: 25px;
    }


    /* =========================
       OPENING HOURS + INFO
       ========================= */

    .information {
        grid-template-columns: 370px 280px;

        column-gap: 34px;
    }

    .hours {
        width: 370px;
    }

    .hours-title,
    .location-title {
        margin-bottom: 20px;

        font-size: 16px;
    }

    .hours-row {
        height: 39px;

        padding-left: 14px;
        padding-right: 14px;

        font-size: 16px;
    }

    .info-right {
        width: 280px;
    }

    .location-box {
        min-height: 68px;

        padding-left: 18px;
        padding-right: 18px;

        gap: 11px;

        font-size: 16px;
    }

    .location-pin {
        width: 25px;
        height: 25px;
    }

    .contact-box {
        min-height: 174px;

        padding: 26px 20px;

        border-radius: 13px;
    }

    .contact-title {
        margin-bottom: 26px;

        gap: 11px;

        font-size: 16px;
    }

    .contact-icon {
        width: 25px;
        height: 25px;
    }

    .contact-phone,
    .contact-email {
        font-size: 16px;
    }

    .contact-phone {
        margin-bottom: 13px;
    }


    /* =========================
       HOME SERVICES
       ========================= */

    .services {
        height: 220px;

        margin-top: 38px;
        margin-left: 90px;
        margin-right: 90px;

        border-radius: 18px;
    }

    .service {
        padding: 32px 42px;

        gap: 27px;
    }

    .service-icon {
        width: 94px;
        height: 94px;
    }

    .service-icon svg {
        width: 44px;
        height: 44px;
    }

    .service-number {
        margin-bottom: 13px;

        font-size: 13px;
    }

    .service-title {
        margin-bottom: 11px;

        font-size: 21px;
    }

    .service-text {
        font-size: 16px;

        line-height: 1.5;
    }

    .service-link {
        margin-top: 19px;

        font-size: 16px;
    }


    /* =====================================================
       SERVICES PAGE
       ===================================================== */

    .services-page {
        padding:
            44px
            90px
            0;
    }

    .services-heading {
        margin-top: -28px;
        margin-bottom: 46px;
    }

    .services-heading-title,
    .services-heading-text {
        font-size: 16px;
    }

    .services-heading-text {
        max-width: 580px;
    }

    .services-heading-line {
        width: 52px;

        margin-top: 24px;
    }

    .services-list {
        gap: 34px;
    }

    .services-card {
        min-height: 240px;

        padding: 28px;

        border-radius: 13px;
    }

    .services-number {
        margin-bottom: 17px;

        font-size: 13px;
    }

    .services-card-heading {
        gap: 18px;

        margin-bottom: 16px;
    }

    .services-card-icon {
        width: 59px;
        height: 59px;
    }

    .services-card-icon svg {
        width: 31px;
        height: 31px;
    }

    .services-card h2 {
        font-size: 21px;

        line-height: 1.3;
    }

    .services-card > p,
    .services-points li {
        font-size: 16px;
    }

    .services-points {
        gap: 6px;
    }

    .services-info {
        height: 190px;

        margin-top: 44px;

        border-radius: 18px;
    }

    .services-info-card {
        padding: 30px 42px;
    }

    .services-info-card h2 {
        font-size: 21px;
    }

    .services-info-card p {
        font-size: 16px;
    }


    /* =====================================================
       DOCUMENTS PAGE
       ===================================================== */

    .documents-page {
        min-height: 760px;

        padding:
            44px
            90px
            70px;
    }

    .documents-list {
        width: 820px;

        border-radius: 13px;
    }

    .document-row {
        min-height: 67px;

        padding-left: 20px;
        padding-right: 20px;

        gap: 15px;

        font-size: 16px;
    }

    .document-download-icon {
        width: 41px;
        height: 41px;
    }

    .document-row::after {
        font-size: 13px;
    }


    /* =====================================================
       ABOUT PAGE
       ===================================================== */

    .about-page {
        padding:
            44px
            90px
            52px;
    }

    .onas-heading {
        margin-top: -28px;
        margin-bottom: 46px;
    }

    .onas-heading-title,
    .onas-heading-text {
        font-size: 16px;
    }

    .onas-heading-text {
        max-width: 580px;
    }

    .onas-heading-line {
        width: 52px;

        margin-top: 24px;
    }

    .about-hero {
        grid-template-columns:
            0.82fr
            1.18fr;

        gap: 36px;
    }

    .about-person {
        min-height: 485px;

        padding: 39px 42px;

        border-radius: 18px;
    }

    .about-small-title {
        margin-bottom: 18px;

        font-size: 16px;
    }

    .about-person h1 {
        font-size: 52px;
    }

    .about-person-intro {
        max-width: 520px;

        margin-top: 22px;
        margin-bottom: 22px;

        font-size: 16px;
    }

    .about-fact {
        min-height: 69px;

        grid-template-columns: 42px 1fr;

        gap: 17px;

        padding-top: 15px;
        padding-bottom: 15px;
    }

    .about-fact-number,
    .about-fact p {
        font-size: 16px;
    }

    .about-office-image {
        min-height: 485px;

        border-radius: 18px;
    }


    /* =========================
       ABOUT LOCATION
       ========================= */

    .about-location-heading {
        margin-top: 64px;
        margin-bottom: 31px;
    }

    .about-location-heading-text {
        font-size: 16px;
    }

    .about-location-heading-line {
        width: 52px;

        margin-top: 20px;
    }

    .about-location {
        min-height: 320px;

        grid-template-columns:
            1.55fr
            0.65fr;

        border-radius: 18px;
    }

    .about-map,
    .about-map iframe {
        min-height: 320px;
    }

    .about-visit-card {
        min-height: 320px;

        padding: 35px 38px;
    }

    .about-visit-label {
        font-size: 16px;
    }

    .about-visit-card h2 {
        font-size: 21px;
    }

    .about-visit-line {
        width: 52px;

        margin-top: 21px;
        margin-bottom: 26px;
    }

    .about-visit-detail {
        gap: 13px;

        margin-bottom: 15px;
    }

    .about-visit-detail svg {
        width: 22px;
        height: 22px;
    }

    .about-visit-detail span,
    .about-visit-detail a {
        font-size: 16px;
    }

    .about-visit-button {
        min-width: 160px;
        height: 49px;

        padding-left: 20px;
        padding-right: 20px;

        font-size: 16px;
    }


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

    .contact-page {
        padding:
            44px
            90px
            52px;
    }

    .contact-page-heading {
        margin-top: -28px;
        margin-bottom: 38px;
    }

    .contact-page-heading-title,
    .contact-page-heading-text {
        font-size: 16px;
    }

    .contact-page-heading-line {
        width: 52px;

        margin-top: 24px;
    }

    .contact-page-layout {
        grid-template-columns:
            0.7fr
            1.3fr;

        gap: 36px;
    }

    .contact-page-info {
        min-height: 540px;

        padding: 42px 44px;

        border-radius: 13px;
    }

    .contact-page-info-small {
        margin-bottom: 19px;

        font-size: 16px;
    }

    .contact-page-info h2 {
        font-size: 21px;
    }

    .contact-page-intro {
        max-width: 420px;

        margin-top: 19px;

        font-size: 16px;
    }

    .contact-page-info-line {
        width: 52px;

        margin-top: 26px;
        margin-bottom: 37px;
    }

    .contact-page-detail {
        gap: 20px;

        margin-bottom: 27px;
    }

    .contact-page-detail-icon {
        width: 52px;
        height: 52px;
    }

    .contact-page-detail-icon svg {
        width: 25px;
        height: 25px;
    }

    .contact-page-detail-label,
    .contact-page-detail a,
    .contact-page-detail span:not(.contact-page-detail-label) {
        font-size: 16px;
    }


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

    .contact-page-form {
        min-height: 540px;

        padding: 42px 44px;

        gap: 26px;

        border-radius: 13px;
    }

    .contact-form-row {
        gap: 27px;
    }

    .contact-form-group {
        gap: 11px;
    }

    .contact-form-group label {
        font-size: 16px;
    }

    .contact-form-group input,
    .contact-form-group textarea {
        padding-left: 18px;
        padding-right: 18px;

        font-size: 16px;
    }

    .contact-form-group input {
        height: 55px;
    }

    .contact-form-group textarea {
        height: 155px;

        padding-top: 16px;
    }

    .contact-form-bottom {
        gap: 34px;
    }

    .contact-form-privacy {
        max-width: 520px;

        font-size: 13px;
    }

    .contact-submit-button {
        min-width: 188px;
        height: 51px;

        padding-left: 22px;
        padding-right: 22px;

        font-size: 16px;
    }

    .contact-submit-label {
        font-size: 16px;
    }

    .contact-submit-arrow {
        font-size: 19px;
    }


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

    .footer {
        height: 96px;

        margin-top: 84px;

        padding-left: 65px;
        padding-right: 65px;

        border-radius: 13px;
    }

    .footer-item {
        gap: 11px;

        font-size: 16px;
    }

    .footer-icon {
        width: 25px;
        height: 25px;
    }

    .footer-name {
        font-size: 16px;
    }

}

/* =========================================================
   768px RESPONSIVE LAYOUT
   Optimized for tablet portrait.
   Does not affect mobile <= 700px.
   ========================================================= */

@media (min-width: 701px) and (max-width: 768px) {

    /* =====================================================
       GENERAL PAGE
       ===================================================== */

    .page {
        width: calc(100% - 20px);

        margin: 10px auto;

        border-radius: 15px;
    }


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

    .header {
        min-height: 96px;

        padding-left: 20px;
        padding-right: 20px;
    }

    .logo {
        width: 132px;

        flex-shrink: 0;
    }

    .navigation {
        padding-left: 18px;

        gap: 13px;

        min-width: 0;
    }

    .nav-link {
        font-size: 12px;

        line-height: 18px;

        padding-bottom: 7px;
    }

    .nav-link::after {
        width: 25px;
    }

    .contact-button {
        width: 120px;
        height: 40px;

        margin-left: auto;

        flex-shrink: 0;

        border-radius: 8px;

        font-size: 12px;
    }


    /* =====================================================
       HOME PAGE
       ===================================================== */


    /* =========================
       2% TAX BANNER
       ========================= */

    .tax-two-banner {
        min-height: 128px;

        margin:
            0
            20px
            26px;

        padding:
            20px
            24px
            20px
            92px;
    }

    .tax-two-icon {
        left: 55px;

        width: 62px;
        height: 62px;
    }

    .tax-two-icon svg {
        width: 38px;
        height: 38px;
    }

    .tax-two-content h2 {
        margin-bottom: 7px;

        font-size: 25px;

        line-height: 1.1;
    }

    .tax-two-content p {
        max-width: 290px;

        font-size: 11px;

        line-height: 1.4;
    }

    .tax-two-divider {
        display: none;
    }

    .tax-two-button {
        width: 118px;
        height: 43px;

        margin-left: 18px;

        flex-shrink: 0;

        font-size: 12px;
    }

    .tax-two-branch {
        display: none;
    }


    /* =====================================================
       HOME - HERO
       ===================================================== */

    .hero {
        padding-left: 20px;
        padding-right: 20px;

        grid-template-columns: 1fr;

        gap: 32px;
    }

    .hero-left,
    .hero-image {
        min-width: 0;
    }


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

    .intro {
        padding-top: 8px;
        padding-bottom: 30px;
    }

    .intro-label {
        margin-bottom: 12px;

        font-size: 13px;
    }

    .intro h1 {
        margin-bottom: 14px;

        font-size: 40px;

        line-height: 1.08;
    }

    .intro-text {
        font-size: 14px;

        line-height: 1.45;
    }

    .intro-line {
        width: 44px;

        margin-top: 18px;
    }


    /* =========================
       HOURS + CONTACT
       ========================= */

    .information {
        width: 100%;

        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(0, 0.85fr);

        column-gap: 20px;
    }

    .hours {
        width: 100%;
    }

    .info-right {
        width: 100%;
    }

    .hours-title,
    .location-title {
        margin-bottom: 13px;

        font-size: 13px;
    }

    .hours-row {
        height: 34px;

        padding-left: 11px;
        padding-right: 11px;

        font-size: 13px;
    }

    .location-box {
        min-height: 58px;

        padding-left: 12px;
        padding-right: 12px;

        gap: 8px;

        font-size: 12px;
    }

    .location-pin {
        width: 21px;
        height: 21px;
    }

    .contact-box {
        min-height: 150px;

        padding: 20px 14px;

        border-radius: 10px;
    }

    .contact-title {
        gap: 8px;

        margin-bottom: 20px;

        font-size: 13px;
    }

    .contact-icon {
        width: 21px;
        height: 21px;
    }

    .contact-phone,
    .contact-email {
        max-width: 100%;

        font-size: 12px;

        overflow-wrap: anywhere;
    }


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

    .hero-image {
        width: 100%;
        height: 380px;

        border-radius: 14px;
    }

    .hero-image img {
        object-position: 60% center;
    }


    /* =====================================================
       HOME SERVICES
       ===================================================== */

    .services {
        height: auto;

        margin:
            30px
            20px
            0;

        grid-template-columns: 1fr;

        border-radius: 14px;

        overflow: hidden;
    }

    .service {
        min-height: 160px;

        padding: 24px 30px;

        gap: 24px;
    }

    .service:not(:last-child) {
        border-right: none;

        border-bottom: 1px solid #E2E2E2;
    }

    .service-icon {
        width: 76px;
        height: 76px;
    }

    .service-icon svg {
        width: 35px;
        height: 35px;
    }

    .service-content {
        min-width: 0;
    }

    .service-number {
        margin-bottom: 8px;

        font-size: 11px;
    }

    .service-title {
        margin-bottom: 8px;

        font-size: 18px;
    }

    .service-text {
        max-width: 500px;

        font-size: 13px;

        line-height: 1.45;
    }

    .service-link {
        margin-top: 12px;

        font-size: 13px;
    }


    /* =====================================================
       SERVICES PAGE
       ===================================================== */

    .services-page {
        padding:
            32px
            20px
            0;
    }

    .services-heading {
        margin-top: -18px;
        margin-bottom: 30px;
    }

    .services-heading-title {
        margin-bottom: 17px;

        font-size: 13px;
    }

    .services-heading-text {
        font-size: 13px;
    }

    .services-heading-line {
        width: 44px;

        margin-top: 18px;
    }

    .services-list {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .services-card {
        min-height: 0;

        padding: 20px;

        border-radius: 11px;
    }

    .services-number {
        margin-bottom: 13px;

        font-size: 11px;
    }

    .services-card-heading {
        align-items: center;

        gap: 12px;

        margin-bottom: 12px;
    }

    .services-card-icon {
        width: 46px;
        height: 46px;
    }

    .services-card-icon svg {
        width: 24px;
        height: 24px;
    }

    .services-card h2 {
        font-size: 16px;

        line-height: 1.28;
    }

    .services-card > p,
    .services-points li {
        font-size: 12px;

        line-height: 1.45;
    }

    .services-points {
        gap: 4px;
    }

    .services-points li {
        padding-left: 14px;
    }

    .services-info {
        height: auto;

        margin-top: 28px;

        grid-template-columns: 1fr;

        border-radius: 14px;
    }

    .services-info-card {
        min-height: 130px;

        padding: 24px 28px;
    }

    .services-info-card:not(:last-child) {
        border-right: none;

        border-bottom: 1px solid #E2E2E2;
    }

    .services-info-card h2 {
        margin-bottom: 8px;

        font-size: 17px;
    }

    .services-info-card p {
        font-size: 13px;

        line-height: 1.45;
    }


    /* =====================================================
       DOCUMENTS PAGE
       ===================================================== */

    .documents-page {
        min-height: 620px;

        padding:
            32px
            20px
            45px;
    }

    .documents-page .services-heading {
        margin-bottom: 30px;
    }

    .documents-list {
        width: 100%;
        max-width: 100%;

        border-radius: 11px;
    }

    .document-row {
        min-height: 58px;

        padding-left: 15px;
        padding-right: 15px;

        gap: 11px;

        font-size: 13px;
    }

    .document-download-icon {
        width: 34px;
        height: 34px;

        padding: 8px;
    }

    .document-row::after {
        padding-left: 12px;

        font-size: 10px;
    }


    /* =====================================================
       ABOUT PAGE
       ===================================================== */

    .about-page {
        padding:
            32px
            20px
            40px;
    }

    .onas-heading {
        margin-top: -18px;
        margin-bottom: 30px;
    }

    .onas-heading-title {
        margin-bottom: 17px;

        font-size: 13px;
    }

    .onas-heading-text {
        font-size: 13px;
    }

    .onas-heading-line {
        width: 44px;

        margin-top: 18px;
    }


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

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

        gap: 20px;
    }

    .about-person {
        min-height: auto;

        padding: 30px;

        border-radius: 14px;
    }

    .about-small-title {
        margin-bottom: 13px;

        font-size: 13px;
    }

    .about-person h1 {
        font-size: 40px;
    }

    .about-person-intro {
        max-width: 560px;

        margin-top: 17px;
        margin-bottom: 17px;

        font-size: 13px;
    }

    .about-fact {
        min-height: 58px;

        grid-template-columns: 34px 1fr;

        gap: 13px;

        padding-top: 12px;
        padding-bottom: 12px;
    }

    .about-fact-number,
    .about-fact p {
        font-size: 13px;
    }

    .about-office-image {
        min-height: 370px;

        border-radius: 14px;
    }


    /* =========================
       ABOUT LOCATION
       ========================= */

    .about-location-heading {
        margin-top: 42px;
        margin-bottom: 22px;
    }

    .about-location-heading-text {
        font-size: 13px;
    }

    .about-location-heading-line {
        width: 44px;

        margin-top: 15px;
    }

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

        gap: 18px;

        min-height: 0;

        overflow: visible;
    }

    .about-map {
        min-height: 300px;

        border-radius: 14px;

        overflow: hidden;
    }

    .about-map iframe {
        min-height: 300px;
    }

    .about-visit-card {
        min-height: 275px;

        padding: 28px 30px;

        border-radius: 14px;
    }

    .about-visit-label {
        font-size: 13px;
    }

    .about-visit-card h2 {
        font-size: 18px;
    }

    .about-visit-line {
        width: 44px;

        margin-top: 17px;
        margin-bottom: 20px;
    }

    .about-visit-detail {
        gap: 11px;

        margin-bottom: 12px;
    }

    .about-visit-detail svg {
        width: 19px;
        height: 19px;
    }

    .about-visit-detail span,
    .about-visit-detail a {
        font-size: 13px;
    }

    .about-visit-button {
        min-width: 140px;
        height: 43px;

        font-size: 13px;
    }


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

    .contact-page {
        padding:
            32px
            20px
            40px;
    }

    .contact-page-heading {
        margin-top: -18px;
        margin-bottom: 28px;
    }

    .contact-page-heading-title {
        margin-bottom: 17px;

        font-size: 13px;
    }

    .contact-page-heading-text {
        font-size: 13px;
    }

    .contact-page-heading-line {
        width: 44px;

        margin-top: 18px;
    }


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

    .contact-page-layout {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .contact-page-info {
        min-height: auto;

        padding: 30px;

        border-radius: 12px;
    }

    .contact-page-info-small {
        margin-bottom: 14px;

        font-size: 13px;
    }

    .contact-page-info h2 {
        font-size: 18px;
    }

    .contact-page-intro {
        max-width: 520px;

        margin-top: 14px;

        font-size: 13px;
    }

    .contact-page-info-line {
        width: 44px;

        margin:
            20px
            0
            27px;
    }

    .contact-page-detail {
        gap: 14px;

        margin-bottom: 19px;
    }

    .contact-page-detail-icon {
        width: 44px;
        height: 44px;
    }

    .contact-page-detail-icon svg {
        width: 21px;
        height: 21px;
    }

    .contact-page-detail-label,
    .contact-page-detail a,
    .contact-page-detail span:not(.contact-page-detail-label) {
        font-size: 13px;
    }


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

    .contact-page-form {
        min-height: auto;

        padding: 30px;

        gap: 20px;

        border-radius: 12px;
    }

    .contact-form-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .contact-form-group {
        gap: 8px;
    }

    .contact-form-group label {
        font-size: 13px;
    }

    .contact-form-group input,
    .contact-form-group textarea {
        padding-left: 14px;
        padding-right: 14px;

        font-size: 13px;

        border-radius: 8px;
    }

    .contact-form-group input {
        height: 47px;
    }

    .contact-form-group textarea {
        height: 130px;

        padding-top: 13px;
    }

    .contact-form-bottom {
        gap: 18px;
    }

    .contact-form-privacy {
        max-width: 390px;

        font-size: 10px;
    }

    .contact-submit-button {
        min-width: 155px;
        height: 44px;

        padding-left: 15px;
        padding-right: 15px;

        font-size: 13px;
    }

    .contact-submit-label {
        font-size: 13px;
    }

    .contact-submit-arrow {
        font-size: 16px;
    }


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

    .footer {
        width: 100%;
        height: auto;

        min-height: 125px;

        margin-top: 55px;

        padding:
            22px
            28px;

        display: grid;

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

        column-gap: 30px;
        row-gap: 16px;

        border-radius: 11px;
    }

    .footer-item {
        gap: 8px;

        font-size: 12px;

        white-space: normal;
    }

    .footer-icon {
        width: 20px;
        height: 20px;
    }

    .footer-name {
        font-size: 12px;

        white-space: normal;
    }

}

/* =========================================================
   480px RESPONSIVE LAYOUT
   Optimized for mobile phones.
   ========================================================= */

@media (max-width: 480px) {

    /* =====================================================
       GENERAL
       ===================================================== */

    html,
    body {
        overflow-x: hidden;
    }

    .website {
        width: 100%;
    }

    .page {
        width: calc(100% - 12px);

        margin: 6px auto;

        border-radius: 12px;
    }


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

    .header {
        min-height: 82px;

        padding-left: 16px;
        padding-right: 16px;
    }

    .logo {
        width: 145px;

        flex-shrink: 0;
    }

    .navigation {
        display: none;
    }

    .contact-button {
        width: 130px;
        height: 40px;

        margin-left: auto;

        border-radius: 8px;

        font-size: 12px;
    }


    /* =====================================================
       HOME - 2% TAX BANNER
       ===================================================== */

    .tax-two-banner {
        min-height: 0;

        margin:
            0
            12px
            24px;

        padding:
            20px
            18px;

        display: block;

        border-radius: 12px;
    }

    .tax-two-icon {
        position: relative;

        left: auto;
        top: auto;

        width: 50px;
        height: 50px;

        margin-bottom: 14px;

        transform: none;
    }

    .tax-two-icon svg {
        width: 30px;
        height: 30px;
    }

    .tax-two-content {
        width: 100%;
    }

    .tax-two-content h2 {
        margin-bottom: 7px;

        font-size: 23px;

        line-height: 1.1;
    }

    .tax-two-content p {
        max-width: 100%;

        font-size: 12px;

        line-height: 1.45;
    }

    .tax-two-divider {
        display: none;
    }

    .tax-two-button {
        width: 100%;
        height: 44px;

        margin:
            18px
            0
            0;

        font-size: 13px;

        border-radius: 8px;
    }

    .tax-two-branch {
        display: none;
    }

    .tax-two-ribbon {
        width: 115px;
        height: 27px;

        left: -45px;
        top: -22px;
    }


    /* =====================================================
       HOME - HERO
       ===================================================== */

    .hero {
        padding-left: 16px;
        padding-right: 16px;

        grid-template-columns: 1fr;

        gap: 26px;
    }

    .hero-left,
    .hero-image {
        min-width: 0;
    }


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

    .intro {
        padding-top: 4px;
        padding-bottom: 28px;
    }

    .intro-label {
        margin-bottom: 11px;

        font-size: 12px;
    }

    .intro h1 {
        margin-bottom: 13px;

        font-size: 34px;

        line-height: 1.08;
    }

    .intro-text {
        font-size: 13px;

        line-height: 1.5;
    }

    .intro-text br {
        display: none;
    }

    .intro-line {
        width: 42px;

        margin-top: 17px;
    }


    /* =====================================================
       HOME - INFORMATION
       ===================================================== */

    .information {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 24px;
    }

    .hours,
    .info-right {
        width: 100%;
    }

    .hours-title,
    .location-title {
        margin-bottom: 12px;

        font-size: 12px;
    }

    .hours-row {
        height: 36px;

        padding-left: 11px;
        padding-right: 11px;

        font-size: 13px;
    }

    .hours-table {
        border-radius: 9px;
    }


    /* =========================
       LOCATION
       ========================= */

    .location-box {
        min-height: 58px;

        padding:
            0
            13px;

        gap: 9px;

        font-size: 13px;

        border-radius: 9px;
    }

    .location-pin {
        width: 21px;
        height: 21px;
    }


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

    .contact-box {
        min-height: auto;

        margin-top: 18px;

        padding:
            20px
            16px;

        border-radius: 10px;
    }

    .contact-title {
        gap: 8px;

        margin-bottom: 18px;

        font-size: 13px;
    }

    .contact-icon {
        width: 21px;
        height: 21px;
    }

    .contact-phone,
    .contact-email {
        max-width: 100%;

        font-size: 13px;

        overflow-wrap: anywhere;
    }

    .contact-phone {
        margin-bottom: 10px;
    }


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

    .hero-image {
        width: 100%;
        height: 260px;

        border-radius: 12px;
    }

    .hero-image img {
        object-position: 60% center;
    }


    /* =====================================================
       HOME SERVICES
       ===================================================== */

    .services {
        height: auto;

        margin:
            26px
            16px
            0;

        grid-template-columns: 1fr;

        border-radius: 12px;

        overflow: hidden;
    }

    .service {
        min-height: 145px;

        padding:
            22px
            20px;

        gap: 18px;
    }

    .service:not(:last-child) {
        border-right: none;

        border-bottom: 1px solid #E2E2E2;
    }

    .service-icon {
        width: 62px;
        height: 62px;
    }

    .service-icon svg {
        width: 29px;
        height: 29px;
    }

    .service-content {
        min-width: 0;
    }

    .service-number {
        margin-bottom: 7px;

        font-size: 10px;
    }

    .service-title {
        margin-bottom: 7px;

        font-size: 16px;

        line-height: 1.3;
    }

    .service-text {
        font-size: 12px;

        line-height: 1.45;
    }

    .service-link {
        margin-top: 10px;

        font-size: 12px;
    }


    /* =====================================================
       SERVICES PAGE
       ===================================================== */

    .services-page {
        padding:
            28px
            16px
            0;
    }

    .services-heading {
        margin-top: -12px;
        margin-bottom: 27px;
    }

    .services-heading-title {
        margin-bottom: 14px;

        font-size: 12px;
    }

    .services-heading-text {
        margin-top: 9px;

        font-size: 13px;
    }

    .services-heading-line {
        width: 42px;

        margin-top: 17px;
    }

    .services-list {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .services-card {
        min-height: 0;

        padding: 20px;

        border-radius: 10px;
    }

    .services-number {
        margin-bottom: 12px;

        font-size: 10px;
    }

    .services-card-heading {
        gap: 12px;

        margin-bottom: 12px;
    }

    .services-card-icon {
        width: 44px;
        height: 44px;
    }

    .services-card-icon svg {
        width: 23px;
        height: 23px;
    }

    .services-card h2 {
        font-size: 16px;

        line-height: 1.3;
    }

    .services-card > p,
    .services-points li {
        font-size: 12px;

        line-height: 1.5;
    }

    .services-points {
        gap: 5px;
    }

    .services-points li {
        padding-left: 14px;
    }


    /* =========================
       SERVICES INFO
       ========================= */

    .services-info {
        height: auto;

        margin-top: 24px;

        grid-template-columns: 1fr;

        border-radius: 12px;
    }

    .services-info-card {
        min-height: 115px;

        padding:
            22px
            20px;
    }

    .services-info-card:not(:last-child) {
        border-right: none;

        border-bottom: 1px solid #E2E2E2;
    }

    .services-info-card h2 {
        margin-bottom: 8px;

        font-size: 16px;
    }

    .services-info-card p {
        font-size: 12px;

        line-height: 1.5;
    }


    /* =====================================================
       DOCUMENTS PAGE
       ===================================================== */

    .documents-page {
        min-height: 560px;

        padding:
            28px
            16px
            40px;
    }

    .documents-page .services-heading {
        margin-bottom: 27px;
    }

    .documents-list {
        width: 100%;

        border-radius: 10px;
    }

    .document-row {
        min-height: 58px;

        padding:
            10px
            13px;

        gap: 10px;

        font-size: 12px;

        line-height: 1.35;
    }

    .document-download-icon {
        width: 32px;
        height: 32px;

        padding: 7px;
    }

    .document-row::after {
        content: "→";

        padding-left: 8px;

        font-size: 14px;
    }

    .document-row:hover {
        padding-left: 13px;
    }


    /* =====================================================
       ABOUT PAGE
       ===================================================== */

    .about-page {
        padding:
            28px
            16px
            36px;
    }

    .onas-heading {
        margin-top: -12px;
        margin-bottom: 27px;
    }

    .onas-heading-title {
        margin-bottom: 14px;

        font-size: 12px;
    }

    .onas-heading-text {
        margin-top: 9px;

        font-size: 13px;
    }

    .onas-heading-line {
        width: 42px;

        margin-top: 17px;
    }


    /* =========================
       ABOUT PERSON
       ========================= */

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

        gap: 16px;
    }

    .about-person {
        min-height: auto;

        padding:
            24px
            20px;

        border-radius: 12px;
    }

    .about-small-title {
        margin-bottom: 11px;

        font-size: 12px;
    }

    .about-person h1 {
        font-size: 33px;

        line-height: 1.1;
    }

    .about-person-intro {
        margin:
            16px
            0;

        font-size: 12px;

        line-height: 1.5;
    }

    .about-fact {
        min-height: 55px;

        grid-template-columns: 31px 1fr;

        gap: 11px;

        padding:
            11px
            0;
    }

    .about-fact-number {
        font-size: 12px;
    }

    .about-fact p {
        font-size: 12px;

        line-height: 1.45;
    }


    /* =========================
       ABOUT IMAGE
       ========================= */

    .about-office-image {
        min-height: 270px;

        border-radius: 12px;
    }

    .about-office-image img {
        object-position: center 67%;
    }


    /* =========================
       ABOUT LOCATION
       ========================= */

    .about-location-heading {
        margin-top: 34px;
        margin-bottom: 20px;
    }

    .about-location-heading-text {
        font-size: 13px;
    }

    .about-location-heading-line {
        width: 42px;

        margin-top: 14px;
    }

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

        gap: 14px;

        min-height: 0;

        overflow: visible;
    }

    .about-map {
        min-height: 260px;

        border-radius: 12px;

        overflow: hidden;
    }

    .about-map iframe {
        min-height: 260px;
    }

    .about-visit-card {
        min-height: 260px;

        padding:
            24px
            20px;

        border-radius: 12px;
    }

    .about-visit-label {
        margin-bottom: 10px;

        font-size: 12px;
    }

    .about-visit-card h2 {
        font-size: 17px;
    }

    .about-visit-line {
        width: 42px;

        margin:
            16px
            0
            19px;
    }

    .about-visit-detail {
        gap: 10px;

        margin-bottom: 12px;
    }

    .about-visit-detail svg {
        width: 18px;
        height: 18px;
    }

    .about-visit-detail span,
    .about-visit-detail a {
        font-size: 12px;
    }

    .about-visit-button {
        min-width: 135px;
        height: 42px;

        padding:
            0
            15px;

        font-size: 12px;

        border-radius: 8px;
    }


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

    .contact-page {
        padding:
            28px
            16px
            36px;
    }

    .contact-page-heading {
        margin-top: -12px;
        margin-bottom: 25px;
    }

    .contact-page-heading-title {
        margin-bottom: 14px;

        font-size: 12px;
    }

    .contact-page-heading-text {
        margin-top: 9px;

        font-size: 13px;
    }

    .contact-page-heading-line {
        width: 42px;

        margin-top: 17px;
    }


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

    .contact-page-layout {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .contact-page-info {
        min-height: 0;

        padding:
            24px
            20px;

        border-radius: 10px;
    }

    .contact-page-info-small {
        margin-bottom: 12px;

        font-size: 12px;
    }

    .contact-page-info h2 {
        font-size: 17px;
    }

    .contact-page-intro {
        margin-top: 13px;

        font-size: 12px;

        line-height: 1.5;
    }

    .contact-page-info-line {
        width: 42px;

        margin:
            18px
            0
            24px;
    }

    .contact-page-detail {
        gap: 12px;

        margin-bottom: 17px;
    }

    .contact-page-detail-icon {
        width: 40px;
        height: 40px;
    }

    .contact-page-detail-icon svg {
        width: 19px;
        height: 19px;
    }

    .contact-page-detail-label {
        font-size: 12px;
    }

    .contact-page-detail a,
    .contact-page-detail span:not(.contact-page-detail-label) {
        font-size: 12px;

        overflow-wrap: anywhere;
    }


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

    .contact-page-form {
        min-height: 0;

        padding:
            24px
            20px;

        gap: 18px;

        border-radius: 10px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .contact-form-group {
        gap: 7px;
    }

    .contact-form-group label {
        font-size: 12px;
    }

    .contact-form-group input,
    .contact-form-group textarea {
        padding:
            0
            13px;

        font-size: 13px;

        border-radius: 8px;
    }

    .contact-form-group input {
        height: 46px;
    }

    .contact-form-group textarea {
        height: 120px;

        padding-top: 13px;
    }

    .contact-form-bottom {
        flex-direction: column;

        align-items: stretch;

        gap: 16px;
    }

    .contact-form-privacy {
        max-width: 100%;

        font-size: 10px;
    }

    .contact-submit-button {
        width: 100%;
        height: 46px;

        font-size: 13px;

        border-radius: 8px;
    }

    .contact-submit-label {
        font-size: 13px;
    }

    .contact-submit-arrow {
        font-size: 17px;
    }


    /* =====================================================
       SUCCESS + ERROR MESSAGES
       ===================================================== */

    .contact-form-success,
    .contact-form-error {
        padding:
            13px
            14px;

        gap: 11px;
    }

    .contact-form-success-icon,
    .contact-form-error-icon {
        width: 34px;
        height: 34px;

        font-size: 17px;
    }

    .contact-form-success-title,
    .contact-form-error-title {
        font-size: 12px;
    }

    .contact-form-success-description,
    .contact-form-error-description {
        font-size: 10px;
    }


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

    .footer {
        width: 100%;
        height: auto;

        margin-top: 45px;

        padding:
            24px
            20px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        justify-content: flex-start;

        gap: 16px;

        border-radius: 10px;
    }

    .footer-item {
        width: 100%;

        gap: 9px;

        font-size: 12px;

        white-space: normal;
    }

    .footer-icon {
        width: 19px;
        height: 19px;
    }

    .footer-name {
        width: 100%;

        padding-top: 4px;

        font-size: 12px;

        line-height: 1.4;

        white-space: normal;
    }


    /* =====================================================
       SMALL FIXES
       ===================================================== */

    img,
    iframe,
    svg {
        max-width: 100%;
    }

    a,
    span,
    p,
    h1,
    h2 {
        overflow-wrap: break-word;
    }

}

/* =========================================================
   FINAL MOBILE HEADER
   Elegant hamburger + compact Kontakt
   ========================================================= */

@media (max-width: 700px) {

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

    .header {
        position: relative;

        min-height: 76px;

        padding-left: 16px;
        padding-right: 16px;

        gap: 8px;

        z-index: 1000;
    }


    /* =========================
       LOGO
       ========================= */

    .logo {
        width: 145px;

        flex-shrink: 0;
    }


    /* Hide desktop contact */

    .contact-button {
        display: none;
    }


    /* =====================================================
       SMALL MOBILE CONTACT BUTTON
       ===================================================== */

    .mobile-nav-contact {
        width: auto;
        min-width: 72px;

        height: 36px;
        min-height: 36px;

        margin: 0 0 0 auto;

        padding: 0 12px;

        display: inline-flex;

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

        flex-shrink: 0;

        background-color: #1B263D;

        border: 1px solid #1B263D;

        border-radius: 9px;

        color: #FFFFFF;

        font-family: "Montserrat", sans-serif;

        font-size: 11px;
        font-weight: 500;

        line-height: 1;

        text-decoration: none;

        box-shadow:
            0 3px 8px rgba(27, 38, 61, 0.10);

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


    .mobile-nav-contact:hover {
        background-color: #26344F;

        box-shadow:
            0 5px 12px rgba(27, 38, 61, 0.14);
    }


    .mobile-nav-contact:active {
        transform: scale(0.96);
    }


    /* =====================================================
       PREMIUM HAMBURGER BUTTON
       ===================================================== */

    .mobile-menu-toggle {
        position: relative;

        width: 40px;
        height: 40px;

        margin: 0;

        padding: 0;

        flex-shrink: 0;

        display: flex;

        flex-direction: column;

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

        gap: 4px;

        background:
            linear-gradient(
                145deg,
                #FDFBF7 0%,
                #F5F0E8 100%
            );

        border: 1px solid #DCC79F;

        border-radius: 10px;

        box-shadow:
            0 3px 10px rgba(27, 38, 61, 0.07);

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

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


    .mobile-menu-toggle:hover {
        border-color: #C7AA76;

        box-shadow:
            0 5px 14px rgba(27, 38, 61, 0.10);
    }


    .mobile-menu-toggle:active {
        transform: scale(0.94);
    }


    /* =========================
       HAMBURGER LINES
       ========================= */

    .mobile-menu-toggle span {
        width: 18px;
        height: 1.7px;

        display: block;

        flex-shrink: 0;

        background-color: #1B263D;

        border-radius: 100px;

        transition:
            width 0.2s ease,
            background-color 0.2s ease,
            transform 0.25s ease,
            opacity 0.2s ease;
    }


    /* Gold middle line */

    .mobile-menu-toggle span:nth-child(2) {
        width: 13px;

        background-color: #B99A64;
    }


    /* =====================================================
       OPEN STATE
       Hamburger becomes X
       ===================================================== */

    .mobile-menu-toggle.is-open {
        background: #1B263D;

        border-color: #1B263D;

        box-shadow:
            0 5px 14px rgba(27, 38, 61, 0.15);
    }


    .mobile-menu-toggle.is-open span {
        width: 18px;

        background-color: #FFFFFF;
    }


    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(5.7px)
            rotate(45deg);
    }


    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;

        transform: scaleX(0);
    }


    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-5.7px)
            rotate(-45deg);
    }


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

    .navigation {
        position: absolute;

        top: calc(100% + 3px);

        left: 10px;
        right: 10px;

        width: auto;

        /*
           IMPORTANT:
           overrides your older 480px display:none
        */
        display: flex;

        flex-direction: column;

        gap: 2px;

        padding: 8px;

        background-color: #FDFDFD;

        border:
            1px solid
            #E5DDD1;

        border-top:
            2px solid
            #DCC79F;

        border-radius: 11px;

        box-shadow:
            0 14px 35px rgba(27, 38, 61, 0.13);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(-7px);

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

        z-index: 9999;
    }


    .navigation.mobile-open {
        display: flex;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }


    /* =========================
       MENU ITEMS
       ========================= */

    .navigation .nav-link {
        width: 100%;

        min-height: 44px;

        padding: 0 13px;

        display: flex;

        align-items: center;

        border-radius: 7px;

        color: #1B263D;

        font-family: "Montserrat", sans-serif;

        font-size: 12px;
        font-weight: 500;

        line-height: 1;

        white-space: normal;

        text-decoration: none;

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


    .navigation .nav-link::after {
        display: none;
    }


    .navigation .nav-link:hover {
        background-color: #F7F5F2;
    }


    /* Current page */

    .navigation .nav-link.active {
        position: relative;

        background-color: #F7F5F2;

        color: #B08D51;

        font-weight: 600;
    }


    .navigation .nav-link.active::before {
        content: "";

        width: 3px;
        height: 17px;

        margin-right: 10px;

        background-color: #B99A64;

        border-radius: 10px;
    }

}


/* =========================================================
   SMALLER PHONE HEADER
   ========================================================= */

@media (max-width: 480px) {

    .header {
        min-height: 72px;

        padding-left: 14px;
        padding-right: 14px;

        gap: 7px;
    }


    .logo {
        width: clamp(
            125px,
            34vw,
            140px
        );
    }


    .mobile-nav-contact {
        min-width: 68px;

        height: 34px;
        min-height: 34px;

        padding: 0 10px;

        border-radius: 8px;

        font-size: 10.5px;
    }


    .mobile-menu-toggle {
        width: 38px;
        height: 38px;

        border-radius: 9px;
    }


    .mobile-menu-toggle span {
        width: 17px;
    }


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


    .mobile-menu-toggle.is-open span {
        width: 17px;
    }


    /*
       Your existing 480px CSS sets
       .navigation { display: none; }
       so this restores the hamburger dropdown.
    */

    .navigation {
        display: flex;

        left: 8px;
        right: 8px;

        top: calc(100% + 2px);
    }

}


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

@media (max-width: 360px) {

    .header {
        padding-left: 12px;
        padding-right: 12px;

        gap: 6px;
    }


    .logo {
        width: 120px;
    }


    .mobile-nav-contact {
        min-width: 64px;

        height: 32px;
        min-height: 32px;

        padding: 0 9px;

        font-size: 10px;
    }


    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
    }

}

/* =========================================================
   MOBILE HEADER + HAMBURGER MENU
   FINAL VERSION
   ========================================================= */


/* Mobile elements hidden on desktop */

.mobile-menu-toggle,
.mobile-nav-contact {
    display: none;
}


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

@media (max-width: 700px) {

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

    .header {
        position: relative;

        min-height: 76px;

        padding-left: 16px;
        padding-right: 16px;

        display: flex;
        align-items: center;

        gap: 8px;

        z-index: 1000;
    }


    /* =========================
       LOGO
       ========================= */

    .logo {
        width: 145px;

        flex-shrink: 0;
    }


    .logo img {
        width: 100%;
        height: auto;

        display: block;
    }


    /* Hide desktop Kontakt button */

    .contact-button {
        display: none;
    }


    /* =====================================================
       MOBILE CONTACT BUTTON
       ===================================================== */

    .mobile-nav-contact {
        width: auto;
        min-width: 72px;

        height: 36px;
        min-height: 36px;

        margin-left: auto;

        padding: 0 12px;

        display: inline-flex;

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

        flex-shrink: 0;

        background-color: #1B263D;

        border: 1px solid #1B263D;

        border-radius: 9px;

        color: #FFFFFF;

        font-family: "Montserrat", sans-serif;

        font-size: 11px;
        font-weight: 500;

        line-height: 1;

        text-decoration: none;

        box-shadow:
            0 3px 8px rgba(27, 38, 61, 0.10);

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


    .mobile-nav-contact:hover {
        background-color: #26344F;

        box-shadow:
            0 5px 12px rgba(27, 38, 61, 0.14);
    }


    .mobile-nav-contact:active {
        transform: scale(0.96);
    }


    /* =====================================================
       HAMBURGER BUTTON
       ===================================================== */

    .mobile-menu-toggle {
        width: 40px;
        height: 40px;

        margin: 0;

        padding: 0;

        flex-shrink: 0;

        display: flex;

        flex-direction: column;

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

        gap: 5px;

        background:
            linear-gradient(
                145deg,
                #FDFBF7 0%,
                #F5F0E8 100%
            );

        border: 1px solid #DCC79F;

        border-radius: 10px;

        box-shadow:
            0 3px 10px rgba(27, 38, 61, 0.07);

        cursor: pointer;

        -webkit-tap-highlight-color: transparent;

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


    .mobile-menu-toggle:hover {
        border-color: #C7AA76;

        box-shadow:
            0 5px 14px rgba(27, 38, 61, 0.10);
    }


    .mobile-menu-toggle:active {
        transform: scale(0.95);
    }


    /* =====================================================
       THREE HAMBURGER LINES
       ALL EXACTLY THE SAME SIZE
       ===================================================== */

    .mobile-menu-toggle span {
        display: block;

        width: 18px;
        min-width: 18px;
        max-width: 18px;

        height: 2px;
        min-height: 2px;
        max-height: 2px;

        flex: 0 0 2px;

        margin: 0;
        padding: 0;

        background-color: #5A4632;

        border: 0;

        border-radius: 50px;

        transform-origin: center;

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


    /*
       Intentionally repeat width on every line
       so no previous nth-child styling can make
       the middle line shorter.
    */

    .mobile-menu-toggle span:nth-child(1),
    .mobile-menu-toggle span:nth-child(2),
    .mobile-menu-toggle span:nth-child(3) {
        width: 18px;
        min-width: 18px;
        max-width: 18px;

        height: 2px;
        min-height: 2px;
        max-height: 2px;

        background-color: #5A4632;
    }


    /* =====================================================
       OPEN HAMBURGER -> X
       ===================================================== */

    .mobile-menu-toggle.is-open {
        background: #1B263D;

        border-color: #1B263D;

        box-shadow:
            0 5px 14px rgba(27, 38, 61, 0.15);
    }


    .mobile-menu-toggle.is-open span {
        background-color: #FFFFFF;
    }


    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(7px)
            rotate(45deg);
    }


    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;

        transform: scaleX(0);
    }


    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-7px)
            rotate(-45deg);
    }


    /* =====================================================
       DROPDOWN MENU
       ===================================================== */

    .navigation {
        position: absolute;

        top: calc(100% + 3px);

        left: 10px;
        right: 10px;

        width: auto;

        padding: 8px;

        display: flex;

        flex-direction: column;

        gap: 2px;

        background-color: #FDFDFD;

        border: 1px solid #E5DDD1;

        border-top: 2px solid #DCC79F;

        border-radius: 11px;

        box-shadow:
            0 14px 35px rgba(27, 38, 61, 0.13);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(-7px);

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

        z-index: 9999;
    }


    /* Open dropdown */

    .navigation.mobile-open {
        display: flex;

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }


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

    .navigation .nav-link {
        position: relative;

        width: 100%;

        min-height: 44px;

        padding: 0 13px;

        display: flex;

        align-items: center;

        border-radius: 7px;

        color: #1B263D;

        font-family: "Montserrat", sans-serif;

        font-size: 12px;
        font-weight: 500;

        line-height: 1;

        white-space: normal;

        text-decoration: none;

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


    /* Remove desktop underline */

    .navigation .nav-link::after {
        display: none;
    }


    .navigation .nav-link:hover {
        background-color: #F7F5F2;
    }


    /* Current page */

    .navigation .nav-link.active {
        background-color: #F7F5F2;

        color: #A98548;

        font-weight: 600;
    }


    .navigation .nav-link.active::before {
        content: "";

        width: 3px;
        height: 17px;

        margin-right: 10px;

        flex-shrink: 0;

        background-color: #B99A64;

        border-radius: 10px;
    }

}


/* =========================================================
   PHONE - 480px
   ========================================================= */

@media (max-width: 480px) {

    .header {
        min-height: 72px;

        padding-left: 14px;
        padding-right: 14px;

        gap: 7px;
    }


    /* Logo */

    .logo {
        width: clamp(
            125px,
            34vw,
            140px
        );
    }


    /* Smaller Kontakt */

    .mobile-nav-contact {
        min-width: 66px;

        height: 33px;
        min-height: 33px;

        padding: 0 9px;

        border-radius: 8px;

        font-size: 10px;
    }


    /* Hamburger */

    .mobile-menu-toggle {
        width: 38px;
        height: 38px;

        border-radius: 9px;

        gap: 5px;
    }


    /*
       ALL THREE LINES ARE STILL
       EXACTLY THE SAME SIZE
    */

    .mobile-menu-toggle span,
    .mobile-menu-toggle span:nth-child(1),
    .mobile-menu-toggle span:nth-child(2),
    .mobile-menu-toggle span:nth-child(3) {
        width: 17px;
        min-width: 17px;
        max-width: 17px;

        height: 2px;
        min-height: 2px;
        max-height: 2px;

        flex-basis: 2px;

        background-color: #5A4632;
    }


    /* X stays white */

    .mobile-menu-toggle.is-open span,
    .mobile-menu-toggle.is-open span:nth-child(1),
    .mobile-menu-toggle.is-open span:nth-child(2),
    .mobile-menu-toggle.is-open span:nth-child(3) {
        background-color: #FFFFFF;
    }


    /* Restore dropdown because older mobile CSS
       contains .navigation { display: none; } */

    .navigation {
        display: flex;

        top: calc(100% + 2px);

        left: 8px;
        right: 8px;
    }

}


/* =========================================================
   VERY SMALL PHONE - 360px
   ========================================================= */

@media (max-width: 360px) {

    .header {
        min-height: 68px;

        padding-left: 12px;
        padding-right: 12px;

        gap: 6px;
    }


    .logo {
        width: 116px;
    }


    .mobile-nav-contact {
        min-width: 60px;

        height: 31px;
        min-height: 31px;

        padding: 0 8px;

        border-radius: 7px;

        font-size: 9.5px;
    }


    .mobile-menu-toggle {
        width: 36px;
        height: 36px;

        border-radius: 8px;
    }


    .mobile-menu-toggle span,
    .mobile-menu-toggle span:nth-child(1),
    .mobile-menu-toggle span:nth-child(2),
    .mobile-menu-toggle span:nth-child(3) {
        width: 16px;
        min-width: 16px;
        max-width: 16px;

        height: 2px;
        min-height: 2px;
        max-height: 2px;
    }


    .mobile-menu-toggle.is-open span,
    .mobile-menu-toggle.is-open span:nth-child(1),
    .mobile-menu-toggle.is-open span:nth-child(2),
    .mobile-menu-toggle.is-open span:nth-child(3) {
        background-color: #FFFFFF;
    }

}


/* =========================================================
   375px RESPONSIVE LAYOUT
   Optimized for standard mobile phones.
   Does not affect <= 360px layout.
   ========================================================= */

@media (min-width: 361px) and (max-width: 375px) {

    /* =====================================================
       GENERAL PAGE
       ===================================================== */

    html,
    body {
        overflow-x: hidden;
    }

    .website {
        width: 100%;
    }

    .page {
        width: calc(100% - 10px);

        margin: 5px auto;

        border-radius: 11px;
    }


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

    .header {
        min-height: 69px;

        padding-left: 12px;
        padding-right: 12px;

        gap: 6px;
    }


    /* LOGO */

    .logo {
        width: 120px;

        flex-shrink: 0;
    }


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

    .mobile-nav-contact {
        width: auto;
        min-width: 62px;

        height: 32px;
        min-height: 32px;

        margin-left: auto;

        padding: 0 8px;

        border-radius: 7px;

        font-size: 9.5px;
    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    .mobile-menu-toggle {
        width: 36px;
        height: 36px;

        flex-shrink: 0;

        gap: 4px;

        border-radius: 8px;
    }


    /* ALL 3 LINES EXACTLY SAME SIZE */

    .mobile-menu-toggle span,
    .mobile-menu-toggle span:nth-child(1),
    .mobile-menu-toggle span:nth-child(2),
    .mobile-menu-toggle span:nth-child(3) {
        width: 16px;
        min-width: 16px;
        max-width: 16px;

        height: 2px;
        min-height: 2px;
        max-height: 2px;

        flex: 0 0 2px;

        margin: 0;
        padding: 0;

        background-color: #5A4632;
    }


    /* Open X */

    .mobile-menu-toggle.is-open span,
    .mobile-menu-toggle.is-open span:nth-child(1),
    .mobile-menu-toggle.is-open span:nth-child(2),
    .mobile-menu-toggle.is-open span:nth-child(3) {
        width: 16px;
        min-width: 16px;
        max-width: 16px;

        background-color: #FFFFFF;
    }


    .mobile-menu-toggle.is-open span:nth-child(1) {
        transform:
            translateY(6px)
            rotate(45deg);
    }


    .mobile-menu-toggle.is-open span:nth-child(2) {
        opacity: 0;

        transform: scaleX(0);
    }


    .mobile-menu-toggle.is-open span:nth-child(3) {
        transform:
            translateY(-6px)
            rotate(-45deg);
    }


    /* =====================================================
       DROPDOWN MENU
       ===================================================== */

    .navigation {
        display: flex;

        top: calc(100% + 2px);

        left: 7px;
        right: 7px;

        padding: 7px;

        gap: 2px;

        border-radius: 10px;
    }


    .navigation .nav-link {
        min-height: 42px;

        padding-left: 12px;
        padding-right: 12px;

        font-size: 11.5px;

        border-radius: 7px;
    }


    .navigation .nav-link.active::before {
        width: 3px;
        height: 16px;

        margin-right: 9px;
    }


    /* =====================================================
       HOME - 2% TAX BANNER
       ===================================================== */

    .tax-two-banner {
        margin:
            0
            10px
            22px;

        padding:
            18px
            16px;

        border-radius: 11px;
    }


    .tax-two-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 12px;
    }


    .tax-two-icon svg {
        width: 27px;
        height: 27px;
    }


    .tax-two-content h2 {
        margin-bottom: 6px;

        font-size: 21px;

        line-height: 1.1;
    }


    .tax-two-content p {
        font-size: 11px;

        line-height: 1.45;
    }


    .tax-two-button {
        width: 100%;
        height: 41px;

        margin-top: 16px;

        font-size: 12px;

        border-radius: 7px;
    }


    .tax-two-ribbon {
        width: 105px;
        height: 25px;

        left: -42px;
        top: -21px;
    }


    /* =====================================================
       HOME - HERO
       ===================================================== */

    .hero {
        padding-left: 13px;
        padding-right: 13px;

        gap: 22px;
    }


    .intro {
        padding-top: 2px;
        padding-bottom: 24px;
    }


    .intro-label {
        margin-bottom: 9px;

        font-size: 11px;
    }


    .intro h1 {
        margin-bottom: 11px;

        font-size: 30px;

        line-height: 1.08;
    }


    .intro-text {
        font-size: 12px;

        line-height: 1.5;
    }


    .intro-line {
        width: 38px;

        margin-top: 15px;
    }


    /* =====================================================
       OPENING HOURS
       ===================================================== */

    .information {
        gap: 21px;
    }


    .hours-title,
    .location-title {
        margin-bottom: 10px;

        font-size: 11px;
    }


    .hours-row {
        height: 34px;

        padding-left: 10px;
        padding-right: 10px;

        font-size: 12px;
    }


    /* =====================================================
       LOCATION
       ===================================================== */

    .location-box {
        min-height: 54px;

        padding-left: 11px;
        padding-right: 11px;

        gap: 8px;

        font-size: 12px;

        border-radius: 8px;
    }


    .location-pin {
        width: 19px;
        height: 19px;
    }


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

    .contact-box {
        margin-top: 15px;

        padding:
            18px
            14px;

        border-radius: 9px;
    }


    .contact-title {
        margin-bottom: 16px;

        gap: 7px;

        font-size: 12px;
    }


    .contact-icon {
        width: 19px;
        height: 19px;
    }


    .contact-phone,
    .contact-email {
        font-size: 12px;
    }


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

    .hero-image {
        height: 230px;

        border-radius: 11px;
    }


    /* =====================================================
       HOME SERVICES
       ===================================================== */

    .services {
        margin:
            22px
            13px
            0;

        border-radius: 11px;
    }


    .service {
        min-height: 132px;

        padding:
            19px
            16px;

        gap: 14px;
    }


    .service-icon {
        width: 54px;
        height: 54px;
    }


    .service-icon svg {
        width: 25px;
        height: 25px;
    }


    .service-number {
        margin-bottom: 6px;

        font-size: 9px;
    }


    .service-title {
        margin-bottom: 6px;

        font-size: 15px;

        line-height: 1.25;
    }


    .service-text {
        font-size: 11px;

        line-height: 1.45;
    }


    .service-link {
        margin-top: 9px;

        font-size: 11px;
    }


    /* =====================================================
       SERVICES PAGE
       ===================================================== */

    .services-page {
        padding:
            25px
            13px
            0;
    }


    .services-heading {
        margin-top: -10px;
        margin-bottom: 23px;
    }


    .services-heading-title {
        margin-bottom: 12px;

        font-size: 11px;
    }


    .services-heading-text {
        margin-top: 8px;

        font-size: 12px;
    }


    .services-heading-line {
        width: 38px;

        margin-top: 15px;
    }


    .services-list {
        gap: 12px;
    }


    .services-card {
        padding: 17px;

        border-radius: 9px;
    }


    .services-number {
        margin-bottom: 10px;

        font-size: 9px;
    }


    .services-card-heading {
        gap: 10px;

        margin-bottom: 10px;
    }


    .services-card-icon {
        width: 40px;
        height: 40px;
    }


    .services-card-icon svg {
        width: 21px;
        height: 21px;
    }


    .services-card h2 {
        font-size: 14px;

        line-height: 1.3;
    }


    .services-card > p,
    .services-points li {
        font-size: 11px;

        line-height: 1.45;
    }


    .services-points {
        gap: 4px;
    }


    .services-points li {
        padding-left: 13px;
    }


    /* =====================================================
       SERVICES INFO
       ===================================================== */

    .services-info {
        margin-top: 21px;

        border-radius: 11px;
    }


    .services-info-card {
        min-height: 105px;

        padding:
            19px
            17px;
    }


    .services-info-card h2 {
        margin-bottom: 7px;

        font-size: 15px;
    }


    .services-info-card p {
        font-size: 11px;

        line-height: 1.45;
    }


    /* =====================================================
       DOCUMENTS PAGE
       ===================================================== */

    .documents-page {
        min-height: 520px;

        padding:
            25px
            13px
            34px;
    }


    .documents-page .services-heading {
        margin-bottom: 23px;
    }


    .documents-list {
        border-radius: 9px;
    }


    .document-row {
        min-height: 55px;

        padding:
            9px
            11px;

        gap: 9px;

        font-size: 11px;

        line-height: 1.35;
    }


    .document-download-icon {
        width: 29px;
        height: 29px;

        padding: 6px;
    }


    .document-row::after {
        padding-left: 5px;

        font-size: 12px;
    }


    .document-row:hover {
        padding-left: 11px;
    }


    /* =====================================================
       ABOUT PAGE
       ===================================================== */

    .about-page {
        padding:
            25px
            13px
            32px;
    }


    .onas-heading {
        margin-top: -10px;
        margin-bottom: 23px;
    }


    .onas-heading-title {
        margin-bottom: 12px;

        font-size: 11px;
    }


    .onas-heading-text {
        margin-top: 8px;

        font-size: 12px;
    }


    .onas-heading-line {
        width: 38px;

        margin-top: 15px;
    }


    .about-hero {
        gap: 14px;
    }


    .about-person {
        padding:
            21px
            17px;

        border-radius: 11px;
    }


    .about-small-title {
        margin-bottom: 10px;

        font-size: 11px;
    }


    .about-person h1 {
        font-size: 29px;

        line-height: 1.1;
    }


    .about-person-intro {
        margin:
            14px
            0;

        font-size: 11px;

        line-height: 1.5;
    }


    .about-fact {
        min-height: 50px;

        grid-template-columns: 28px 1fr;

        gap: 9px;

        padding:
            10px
            0;
    }


    .about-fact-number,
    .about-fact p {
        font-size: 11px;
    }


    /* =====================================================
       ABOUT IMAGE
       ===================================================== */

    .about-office-image {
        min-height: 235px;

        border-radius: 11px;
    }


    /* =====================================================
       ABOUT LOCATION
       ===================================================== */

    .about-location-heading {
        margin-top: 30px;
        margin-bottom: 17px;
    }


    .about-location-heading-text {
        font-size: 12px;
    }


    .about-location-heading-line {
        width: 38px;

        margin-top: 12px;
    }


    .about-location {
        gap: 12px;
    }


    .about-map,
    .about-map iframe {
        min-height: 230px;
    }


    .about-map {
        border-radius: 11px;
    }


    .about-visit-card {
        min-height: 240px;

        padding:
            21px
            17px;

        border-radius: 11px;
    }


    .about-visit-label {
        margin-bottom: 9px;

        font-size: 11px;
    }


    .about-visit-card h2 {
        font-size: 16px;
    }


    .about-visit-line {
        width: 38px;

        margin:
            14px
            0
            17px;
    }


    .about-visit-detail {
        gap: 9px;

        margin-bottom: 11px;
    }


    .about-visit-detail svg {
        width: 17px;
        height: 17px;
    }


    .about-visit-detail span,
    .about-visit-detail a {
        font-size: 11px;
    }


    .about-visit-button {
        min-width: 125px;
        height: 39px;

        padding:
            0
            13px;

        font-size: 11px;

        border-radius: 7px;
    }


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

    .contact-page {
        padding:
            25px
            13px
            32px;
    }


    .contact-page-heading {
        margin-top: -10px;
        margin-bottom: 22px;
    }


    .contact-page-heading-title {
        margin-bottom: 12px;

        font-size: 11px;
    }


    .contact-page-heading-text {
        margin-top: 8px;

        font-size: 12px;
    }


    .contact-page-heading-line {
        width: 38px;

        margin-top: 15px;
    }


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

    .contact-page-layout {
        gap: 14px;
    }


    .contact-page-info {
        padding:
            21px
            17px;

        border-radius: 9px;
    }


    .contact-page-info-small {
        margin-bottom: 10px;

        font-size: 11px;
    }


    .contact-page-info h2 {
        font-size: 16px;
    }


    .contact-page-intro {
        margin-top: 11px;

        font-size: 11px;

        line-height: 1.5;
    }


    .contact-page-info-line {
        width: 38px;

        margin:
            16px
            0
            21px;
    }


    .contact-page-detail {
        gap: 10px;

        margin-bottom: 15px;
    }


    .contact-page-detail-icon {
        width: 37px;
        height: 37px;
    }


    .contact-page-detail-icon svg {
        width: 18px;
        height: 18px;
    }


    .contact-page-detail-label,
    .contact-page-detail a,
    .contact-page-detail span:not(.contact-page-detail-label) {
        font-size: 11px;
    }


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

    .contact-page-form {
        padding:
            21px
            17px;

        gap: 16px;

        border-radius: 9px;
    }


    .contact-form-row {
        gap: 16px;
    }


    .contact-form-group {
        gap: 6px;
    }


    .contact-form-group label {
        font-size: 11px;
    }


    .contact-form-group input,
    .contact-form-group textarea {
        padding:
            0
            11px;

        font-size: 12px;

        border-radius: 7px;
    }


    .contact-form-group input {
        height: 43px;
    }


    .contact-form-group textarea {
        height: 110px;

        padding-top: 11px;
    }


    .contact-form-bottom {
        gap: 14px;
    }


    .contact-form-privacy {
        font-size: 9px;
    }


    .contact-submit-button {
        height: 43px;

        font-size: 12px;

        border-radius: 7px;
    }


    .contact-submit-label {
        font-size: 12px;
    }


    .contact-submit-arrow {
        font-size: 16px;
    }


    /* =====================================================
       SUCCESS / ERROR
       ===================================================== */

    .contact-form-success,
    .contact-form-error {
        padding:
            11px
            12px;

        gap: 9px;

        border-radius: 8px;
    }


    .contact-form-success-icon,
    .contact-form-error-icon {
        width: 31px;
        height: 31px;

        font-size: 15px;
    }


    .contact-form-success-title,
    .contact-form-error-title {
        font-size: 11px;
    }


    .contact-form-success-description,
    .contact-form-error-description {
        font-size: 9px;
    }


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

    .footer {
        margin-top: 38px;

        padding:
            21px
            17px;

        gap: 14px;

        border-radius: 9px;
    }


    .footer-item {
        gap: 8px;

        font-size: 11px;
    }


    .footer-icon {
        width: 17px;
        height: 17px;
    }


    .footer-name {
        padding-top: 3px;

        font-size: 11px;

        line-height: 1.4;
    }

}

/* =========================================================
   2560px RESPONSIVE LAYOUT
   Optimized for 2560px / large desktop screens.
   1920px version remains unchanged.
   ========================================================= */

@media (min-width: 2200px) {

    /* =====================================================
       GENERAL PAGE
       ===================================================== */

    .website {
        width: 100%;
        max-width: 2560px;

        margin: 0 auto;
    }

    .page {
        width: calc(100% - 120px);
        max-width: 2320px;

        margin: 36px auto;

        border-radius: 22px;
    }


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

    .header {
        min-height: 160px;

        padding-left: 120px;
        padding-right: 120px;
    }

    .logo {
        width: 275px;
    }

    .navigation {
        padding-left: 130px;

        gap: 95px;
    }

    .nav-link {
        font-size: 17px;

        line-height: 23px;

        padding-bottom: 12px;
    }

    .nav-link::after {
        width: 38px;
    }

    .contact-button {
        width: 200px;
        height: 56px;

        border-radius: 11px;

        font-size: 17px;
    }


    /* =====================================================
       HOME - 2% TAX BANNER
       ===================================================== */

    .tax-two-banner {
        min-height: 180px;

        margin-left: 120px;
        margin-right: 120px;
        margin-bottom: 44px;

        padding-left: 260px;
        padding-right: 225px;

        border-radius: 18px;
    }

    .tax-two-icon {
        left: 175px;

        width: 98px;
        height: 98px;
    }

    .tax-two-icon svg {
        width: 59px;
        height: 59px;
    }

    .tax-two-content h2 {
        margin-bottom: 12px;

        font-size: 46px;
    }

    .tax-two-content p {
        font-size: 17px;
    }

    .tax-two-divider {
        height: 82px;

        margin-left: 70px;
        margin-right: 70px;
    }

    .tax-two-button {
        width: 235px;
        height: 58px;

        font-size: 17px;

        border-radius: 9px;
    }

    .tax-two-branch {
        width: 210px;
        height: 145px;
    }


    /* =====================================================
       HOME - HERO
       ===================================================== */

    .hero {
        padding-left: 120px;
        padding-right: 120px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1.2fr);

        gap: 120px;
    }

    .hero-left,
    .hero-image {
        min-width: 0;
    }

    .hero-image {
        height: 97%;

        border-radius: 20px;
    }


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

    .intro {
        padding-top: 22px;
        padding-bottom: 52px;
    }

    .intro-label {
        margin-bottom: 20px;

        font-size: 17px;
    }

    .intro h1 {
        margin-bottom: 20px;

        font-size: 62px;

        line-height: 1.04;
    }

    .intro-text {
        font-size: 17px;

        line-height: 1.5;
    }

    .intro-line {
        width: 56px;
        height: 2px;

        margin-top: 28px;
    }


    /* =====================================================
       OPENING HOURS + INFORMATION
       ===================================================== */

    .information {
        grid-template-columns:
            420px
            320px;

        column-gap: 40px;
    }

    .hours {
        width: 420px;
    }

    .hours-title,
    .location-title {
        margin-bottom: 22px;

        font-size: 17px;
    }

    .hours-row {
        height: 42px;

        padding-left: 16px;
        padding-right: 16px;

        font-size: 17px;
    }

    .info-right {
        width: 320px;
    }

    .location-box {
        min-height: 74px;

        padding-left: 20px;
        padding-right: 20px;

        gap: 12px;

        font-size: 17px;

        border-radius: 11px;
    }

    .location-pin {
        width: 27px;
        height: 27px;
    }

    .contact-box {
        min-height: 188px;

        padding:
            29px
            23px;

        border-radius: 14px;
    }

    .contact-title {
        margin-bottom: 29px;

        gap: 12px;

        font-size: 17px;
    }

    .contact-icon {
        width: 27px;
        height: 27px;
    }

    .contact-phone,
    .contact-email {
        font-size: 17px;
    }

    .contact-phone {
        margin-bottom: 14px;
    }


    /* =====================================================
       HOME SERVICES
       ===================================================== */

    .services {
        height: 240px;

        margin-top: 44px;
        margin-left: 120px;
        margin-right: 120px;

        border-radius: 20px;
    }

    .service {
        padding:
            36px
            50px;

        gap: 31px;
    }

    .service-icon {
        width: 102px;
        height: 102px;
    }

    .service-icon svg {
        width: 48px;
        height: 48px;
    }

    .service-number {
        margin-bottom: 14px;

        font-size: 13px;
    }

    .service-title {
        margin-bottom: 12px;

        font-size: 23px;
    }

    .service-text {
        font-size: 17px;

        line-height: 1.5;
    }

    .service-link {
        margin-top: 20px;

        font-size: 17px;
    }


    /* =====================================================
       SERVICES PAGE
       ===================================================== */

    .services-page {
        padding:
            50px
            120px
            0;
    }

    .services-heading {
        margin-top: -30px;
        margin-bottom: 52px;
    }

    .services-heading-title,
    .services-heading-text {
        font-size: 17px;
    }

    .services-heading-text {
        max-width: 640px;
    }

    .services-heading-line {
        width: 56px;

        margin-top: 26px;
    }

    .services-list {
        gap: 40px;
    }

    .services-card {
        min-height: 255px;

        padding: 32px;

        border-radius: 14px;
    }

    .services-number {
        margin-bottom: 18px;

        font-size: 13px;
    }

    .services-card-heading {
        gap: 20px;

        margin-bottom: 17px;
    }

    .services-card-icon {
        width: 64px;
        height: 64px;
    }

    .services-card-icon svg {
        width: 34px;
        height: 34px;
    }

    .services-card h2 {
        font-size: 23px;

        line-height: 1.3;
    }

    .services-card > p,
    .services-points li {
        font-size: 17px;

        line-height: 1.5;
    }

    .services-points {
        gap: 7px;
    }


    /* =====================================================
       SERVICES INFO
       ===================================================== */

    .services-info {
        height: 205px;

        margin-top: 50px;

        border-radius: 20px;
    }

    .services-info-card {
        padding:
            34px
            48px;
    }

    .services-info-card h2 {
        font-size: 23px;
    }

    .services-info-card p {
        font-size: 17px;
    }


    /* =====================================================
       DOCUMENTS PAGE
       ===================================================== */

    .documents-page {
        min-height: 820px;

        padding:
            50px
            120px
            80px;
    }

    .documents-list {
        width: 900px;

        border-radius: 14px;
    }

    .document-row {
        min-height: 72px;

        padding-left: 22px;
        padding-right: 22px;

        gap: 17px;

        font-size: 17px;
    }

    .document-download-icon {
        width: 44px;
        height: 44px;
    }

    .document-row::after {
        font-size: 14px;
    }


    /* =====================================================
       ABOUT PAGE
       ===================================================== */

    .about-page {
        padding:
            50px
            120px
            60px;
    }

    .onas-heading {
        margin-top: -30px;
        margin-bottom: 52px;
    }

    .onas-heading-title,
    .onas-heading-text {
        font-size: 17px;
    }

    .onas-heading-text {
        max-width: 640px;
    }

    .onas-heading-line {
        width: 56px;

        margin-top: 26px;
    }


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

    .about-hero {
        grid-template-columns:
            0.82fr
            1.18fr;

        gap: 42px;
    }

    .about-person {
        min-height: 520px;

        padding:
            44px
            48px;

        border-radius: 20px;
    }

    .about-small-title {
        margin-bottom: 20px;

        font-size: 17px;
    }

    .about-person h1 {
        font-size: 58px;
    }

    .about-person-intro {
        max-width: 570px;

        margin-top: 24px;
        margin-bottom: 24px;

        font-size: 17px;
    }

    .about-fact {
        min-height: 74px;

        grid-template-columns:
            45px
            1fr;

        gap: 19px;

        padding-top: 16px;
        padding-bottom: 16px;
    }

    .about-fact-number,
    .about-fact p {
        font-size: 17px;
    }

    .about-office-image {
        min-height: 520px;

        border-radius: 20px;
    }


    /* =====================================================
       ABOUT LOCATION
       ===================================================== */

    .about-location-heading {
        margin-top: 70px;
        margin-bottom: 34px;
    }

    .about-location-heading-text {
        font-size: 17px;
    }

    .about-location-heading-line {
        width: 56px;

        margin-top: 22px;
    }

    .about-location {
        min-height: 350px;

        grid-template-columns:
            1.58fr
            0.65fr;

        border-radius: 20px;
    }

    .about-map,
    .about-map iframe {
        min-height: 350px;
    }

    .about-visit-card {
        min-height: 350px;

        padding:
            39px
            43px;
    }

    .about-visit-label {
        font-size: 17px;
    }

    .about-visit-card h2 {
        font-size: 23px;
    }

    .about-visit-line {
        width: 56px;

        margin-top: 23px;
        margin-bottom: 28px;
    }

    .about-visit-detail {
        gap: 14px;

        margin-bottom: 17px;
    }

    .about-visit-detail svg {
        width: 23px;
        height: 23px;
    }

    .about-visit-detail span,
    .about-visit-detail a {
        font-size: 17px;
    }

    .about-visit-button {
        min-width: 170px;
        height: 52px;

        padding-left: 22px;
        padding-right: 22px;

        font-size: 17px;

        border-radius: 10px;
    }


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

    .contact-page {
        padding:
            50px
            120px
            60px;
    }

    .contact-page-heading {
        margin-top: -30px;
        margin-bottom: 42px;
    }

    .contact-page-heading-title,
    .contact-page-heading-text {
        font-size: 17px;
    }

    .contact-page-heading-line {
        width: 56px;

        margin-top: 26px;
    }

    .contact-page-layout {
        grid-template-columns:
            0.7fr
            1.3fr;

        gap: 42px;
    }


    /* =====================================================
       CONTACT INFO CARD
       ===================================================== */

    .contact-page-info {
        min-height: 580px;

        padding:
            48px
            50px;

        border-radius: 14px;
    }

    .contact-page-info-small {
        margin-bottom: 21px;

        font-size: 17px;
    }

    .contact-page-info h2 {
        font-size: 23px;
    }

    .contact-page-intro {
        max-width: 470px;

        margin-top: 21px;

        font-size: 17px;
    }

    .contact-page-info-line {
        width: 56px;

        margin-top: 28px;
        margin-bottom: 40px;
    }

    .contact-page-detail {
        gap: 22px;

        margin-bottom: 29px;
    }

    .contact-page-detail-icon {
        width: 56px;
        height: 56px;
    }

    .contact-page-detail-icon svg {
        width: 27px;
        height: 27px;
    }

    .contact-page-detail-label,
    .contact-page-detail a,
    .contact-page-detail span:not(.contact-page-detail-label) {
        font-size: 17px;
    }


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

    .contact-page-form {
        min-height: 580px;

        padding:
            48px
            50px;

        gap: 29px;

        border-radius: 14px;
    }

    .contact-form-row {
        gap: 30px;
    }

    .contact-form-group {
        gap: 12px;
    }

    .contact-form-group label {
        font-size: 17px;
    }

    .contact-form-group input,
    .contact-form-group textarea {
        padding-left: 20px;
        padding-right: 20px;

        font-size: 17px;

        border-radius: 11px;
    }

    .contact-form-group input {
        height: 58px;
    }

    .contact-form-group textarea {
        height: 165px;

        padding-top: 18px;
    }

    .contact-form-bottom {
        gap: 38px;
    }

    .contact-form-privacy {
        max-width: 570px;

        font-size: 13px;
    }

    .contact-submit-button {
        min-width: 200px;
        height: 54px;

        padding-left: 24px;
        padding-right: 24px;

        font-size: 17px;

        border-radius: 10px;
    }

    .contact-submit-label {
        font-size: 17px;
    }

    .contact-submit-arrow {
        font-size: 20px;
    }


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

    .footer {
        height: 102px;

        margin-top: 92px;

        padding-left: 75px;
        padding-right: 75px;

        border-radius: 14px;
    }

    .footer-item {
        gap: 12px;

        font-size: 17px;
    }

    .footer-icon {
        width: 27px;
        height: 27px;
    }

    .footer-name {
        font-size: 17px;
    }

}

.copy-address,
.copy-address:visited,
.copy-address:hover,
.copy-address:active {
    color: #343b49;
    text-decoration: none;
}

.copy-address:hover {
    text-decoration: underline;
    color: inherit;
}

.copy-address {
    cursor: pointer;
}







/* ========================================
   PAGE CONTENT TRANSITION
   Header stays static
   ======================================== */

main,
.tax-two-banner,
.services {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.12s ease,
        transform 0.20s cubic-bezier(0.22, 1, 0.36, 1);
}


/* PAGE ENTER */

body.page-loading main,
body.page-loading .tax-two-banner,
body.page-loading .services {
    opacity: 0;
    transform: translateY(18px);
}


/* PAGE LEAVE */

body.page-leaving main,
body.page-leaving .tax-two-banner,
body.page-leaving .services {
    opacity: 0;
    transform: translateY(-8px);

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