/* =========================================
   VARIABLES
    ========================================= */
    :root {
        --color-bg: #f5f7fb;
        --color-bg-alt: #ffffff;
        --color-primary: #123E63;
        --color-primary-dark: #0F2740;
        --color-primary-light: #1B6FA8;
        --color-accent: #8B1E3F;
        --color-accent-light: #A32A4C;
        --color-accent-hover: #B53358;
        --color-text: #1f2933;
        --color-text-heading: #152029;
        --color-text-light: #6b7280;
        --color-border: #d1d5db;

        --radius-md: 12px;
        --radius-lg: 20px;
        --radius-xl: 24px;

        --shadow-soft: 0 10px 30px rgba(0, 0, 0, .08);
        --shadow-card: 0 10px 35px rgba(0, 0, 0, .08);
        --shadow-hover: 0 14px 38px rgba(0, 0, 0, .12);

        --bb-max: 1100px;
        --bb-gap: 28px;
        --bb-card-radius: 16px;
        --bb-card-bg: #fff;
        --bb-shadow: 0 10px 30px rgba(0, 0, 0, .08);
        --bb-text: #1f2937;
        --bb-muted: #6b7280;
        --bb-link: #111827;
    }

    /* =========================================
       BASE
    ========================================= */
    * {
        box-sizing: border-box;
    }


    body {
        margin: 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: var(--color-bg);
        color: var(--color-text);
        line-height: 1.6;
        font-size: 1.2rem;
    }

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

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

    .page-wrapper {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        align-items: center;
    }

    /* =========================================
       HEADER / TOPBAR / MENU
    ========================================= */
    header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: var(--color-bg-alt);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    }

    .gradient-border-top {
        height: 40px;
        padding: 5px 0;
        background: var(--color-primary-dark);
        color: #fff;
    }

    .gradient-border-top .container {
        gap: 25px;
        justify-content: space-between;
    }

    .topbar-left,
    .topbar-right {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        font-size: 1.1rem;
    }

    .usp-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .header-inner {
        max-width: 1600px;
        margin: 0 auto;
        padding: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    .logo-text-main {
        font-weight: 700;
        font-size: 1.1rem;
    }

    .logo-text-sub {
        font-size: .8rem;
        color: var(--color-text-light);
    }

    header .main-nav a {
        position: relative;
        color: #000;
        font-size: 1.5rem;
        white-space: nowrap;
    }

    header.main-nav a:hover {
        color: var(--color-accent);
    }

    header .main-nav a.active,
    .hero-home-content .btn {
        background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
        color: #fff;
        padding: 5px 25px;
        border-radius: 35px;
        display: inline-block;
        box-shadow: 0 10px 22px rgba(0, 0, 0, .08);
    }

    header .main-nav a.active:hover {
        color: #fff;
    }

    .sf-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 5px;
        max-width: 100%;
    }

    .sf-menu li {
        position: relative;
        list-style: none;
    }

    .sf-menu > li > a {
        display: block;
        padding: 10px 14px;
        border-radius: 8px;
        transition: all .2s ease;
    }

    .sf-menu-sub {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 260px;
        padding: 8px 0;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all .2s ease;
        z-index: 999;
    }

    .sf-menu li:hover > .sf-menu-sub {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .sf-menu-sub .sf-menu-sub {
        top: 0;
        left: 100%;
        transform: translateX(10px);
    }

    .sf-menu-sub li a {
        display: block;
        padding: 10px 16px;
        color: #333;
        font-size: 16px;
        white-space: nowrap;
        transition: all .2s ease;
    }

    .sf-menu-sub li a:hover {
        background: #f5f5f5;
    }

    .sf-menu-sub li a.active {
        background: var(--color-accent);
        color: #fff;
    }

    .nav-toggle {
        display: none;
    }

    /* =========================================
       HERO
    ========================================= */
    main {
        flex: 1;
    }

    .hero {
        max-width: 100%;
        display: grid;
        align-items: center;
        text-align: center;
        padding: 15px 20px 25px;
        color: #fff;
        background:
            radial-gradient(circle at top right, rgba(112, 199, 218, .25), transparent 44%),
            linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 58%, var(--color-primary-light) 100%);
    }

    .hero h1 {
        margin-bottom: 0;
        font-size: 2.2em;
        font-weight: 500;
    }

    .hero p {
        line-height: 1;
    }

    .hero.hero-home {
        padding-bottom: 0;
    }

    .hero.hero-home p {
        line-height: 1.6;
    }

    .hero-home .container {
        width: 100%;
        min-height: 545px;
        display: block;
        padding-bottom: 0;
        text-align: left;
        background: url(images/Paul-Haarman-Homepage-2-1170x540.png) bottom right no-repeat;
    }

    .hero-home h1 {
        font-size: 3.5em;
    }

    .hero-home p,
    .hero-home a.btn {
        font-size: 30px;
    }

    .hero-home-content {
        width: 50%;
    }

    .hero-home-content > * {
        opacity: 0;
        transform: translateY(20px);
        animation: heroFadeUp .7s ease forwards;
    }

    .hero-home-content h1 {
        animation-delay: .1s;
    }

    .hero-home-content p {
        animation-delay: .25s;
    }

    @keyframes heroFadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* =========================================
       BUTTONS / CTA
    ========================================= */
    .btn,
    .bb-cta__button,
    .priceItemList a,
    .columnContact input.btn {
        background: linear-gradient(180deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
        color: #fff;
        border: 0;
        cursor: pointer;
        transition: all .2s ease;
    }

    .bb-cta__button,
    .priceItemList a,
    .columnContact input.btn {
        font-weight: 700;
    }

    .hero-home-content .btn {
        font-weight: 500;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .7rem 1.3rem;
        border-radius: 999px;
        font-size: .95rem;
    }

    .btn-primary {
        background: var(--color-primary);
        color: #fff;
        box-shadow: 0 10px 25px rgba(37, 99, 235, .35);
        font-weight: 600;
    }

    .btn-secondary {
        background: transparent;
        border: 1px solid var(--color-border);
        color: var(--color-text);
    }

    .btn:hover,
    .bb-cta__button:hover,
    .priceItemList a:hover,
    .main-nav a.active:hover,
    .columnContact input.btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
    }

    .btn:active,
    .bb-cta__button:active,
    .priceItemList a:active,
    .columnContact input.btn:active {
        transform: translateY(0);
    }

    /* =========================================
       CONTENT / LAYOUT
    ========================================= */
    .content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 2.5rem 1.5rem 2rem;
        font-size: 1.2rem;
    }

    .content h1,
    .content h2,
    .content h3 {
        margin-bottom: 5px;
        color: var(--color-text-heading);
    }

    .content p {
        margin-top: 0;
    }

    .columns {
        display: flex;
        gap: 50px;
    }

    .column-left {
        width: 75%;
    }

    .column-right {
        width: 25%;
        position: sticky;
        top: 185px;
        align-self: flex-start;
        background: #fff;
        padding: 25px;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
    }

    .section {
        margin-top: 1.5rem;
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2.3fr);
        gap: 2rem;
    }

    .section-heading {
        font-size: 1.25rem;
    }

    .section-intro,
    .content-list {
        color: var(--color-text-light);
    }

    .content-right,
    .service-card {
        background: var(--color-bg-alt);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-soft);
    }

    .content-right {
        padding: 1.25rem 1.4rem;
    }

    .content-right h3 {
        margin: 0;
    }

    .content-list {
        margin: .7rem 0 0;
        padding-left: 1.1rem;
    }

    .service-grid {
        margin-top: 1.3rem;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }

    .service-card {
        padding: .9rem 1rem;
        border: 1px solid rgba(209, 213, 219, .7);
    }

    .service-label {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--color-text-light);
    }

    .service-title {
        font-size: .95rem;
        font-weight: 600;
    }

    .service-text {
        font-size: .85rem;
        color: var(--color-text-light);
    }

    /* =========================================
       BREADCRUMBS
    ========================================= */
    ol.breadcrumbs {
        margin-bottom: 15px;
        padding-left: 0;
    }

    .breadcrumbs li {
        display: inline-block;
        padding: 0 10px;
    }

    .breadcrumbs li:first-child {
        padding-left: 0;
    }

    .breadcrumbs li a:hover {
        text-decoration: underline;
    }

    .breadcrumbSeparator {
        color: #2a5192;
    }

    /* =========================================
       BIGBLOCKS / CARDS
    ========================================= */
    .bb-section {
        padding: 60px 16px;
        background: transparent;
        color: var(--bb-text);
        font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    .bb-section > h2,
    .bb-section > p {
        max-width: 900px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .bb-section > h2 {
        text-align: center;
        font-size: 34px;
    }

    .bb-container {
        max-width: var(--bb-max);
        margin: 0 auto;
    }

    .bb-section__header {
        text-align: center;
        margin-bottom: 28px;
    }

    .bb-eyebrow {
        margin: 0 0 10px;
        font-size: 13px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--bb-muted);
    }

    .bb-title {
        margin: 0;
        font-size: clamp(24px, 3vw, 34px);
        line-height: 1.15;
    }

    .bb-columns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--bb-gap);
    }

    .bb-card {
        background: var(--bb-card-bg);
        border-radius: var(--bb-card-radius);
        box-shadow: var(--bb-shadow);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 100%;
        transform: translateY(0);
        transition: transform .18s ease, box-shadow .18s ease;
    }

    .bb-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-hover);
    }

    .bb-card__media {
        position: relative;
        aspect-ratio: 16 / 10;
        background: #eef2f7;
    }

    .bb-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .bb-card__body {
        padding: 22px 22px 24px;
    }

    .bb-card__title {
        margin: 0 0 10px;
        font-size: 18px;
        line-height: 1.25;
    }

    .bb-card__text {
        margin: 0 0 14px;
        color: var(--bb-muted);
        line-height: 1.6;
        font-size: 15px;
    }

    .bb-card__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--bb-link);
        font-weight: 600;
    }

    .bb-card__link:hover {
        text-decoration: underline;
    }

    /* =========================================
       CTA BAND
    ========================================= */
    .bb-cta {
        padding: 22px 16px;
    }

    .bb-cta__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 20px 22px;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
    }

    .bb-cta__title {
        margin: 0;
        max-width: 820px;
    }

    .bb-cta__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 18px;
        border-radius: 999px;
        white-space: nowrap;
    }

    /* =========================================
       CONTACT PAGE
    ========================================= */
    input.inputRed,
    textarea.textareaRed {
        border: 1px solid #d90000 !important;
    }

    .red {
        background: var(--color-accent);
        padding: 5px;
        color: #fff;
    }

    .contentTop {
        max-width: 900px;
        margin: 0 0 30px;
    }

    .content .columnContact {
        float: left;
        width: 58%;
        margin: 0 4% 40px 0;
        background: #fff;
        padding: 30px;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
    }

    .content .columnContact + .columnContact {
        width: 38%;
        margin-right: 0;
        color: #374151;
    }

    .columnContact .contactTable,
    .columnContact .contactTable tbody,
    .columnContact .contactTable tr,
    .columnContact .contactTable td {
        display: block;
        width: 100%;
    }

    .columnContact .contactTable tr {
        margin-bottom: 16px;
    }

    .columnContact .contactTable td:first-child {
        width: 100%;
        padding: 0 0 6px;
        font-weight: 700;
        color: var(--color-primary);
    }

    .columnContact .contactTable td.nonMobile {
        display: none;
    }

    .columnContact input.input,
    .columnContact input.inputRed,
    .columnContact select.input,
    .columnContact textarea.textarea {
        width: 100%;
        max-width: 100%;
        padding: 13px 15px;
        border: 1px solid #d9dee8;
        border-radius: var(--radius-md);
        background: #f8fafc;
        box-sizing: border-box;
        font-size: 16px;
        font-family: inherit;
        transition: all .2s ease;
    }

    .columnContact select.input {
         min-height: 52px;
        padding: 13px 15px;
    }

    .columnContact textarea.textarea {
        min-height: 140px;
        resize: vertical;
    }

    .columnContact input.input:focus,
    .columnContact input.inputRed:focus,
    .columnContact select.input:focus,
    .columnContact textarea.textarea:focus {
        border-color: var(--color-accent);
        background: #fff;
        box-shadow: 0 0 0 4px rgba(139, 30, 63, .08);
        outline: none;
    }

    .columnContact input.btn {
        padding: 13px 28px;
        border-radius: 999px;
    }

    .columnContact + .columnContact a {
        color: var(--color-accent);
        font-weight: 700;
        text-decoration: underline;
        text-decoration-color: rgba(139, 30, 63, .35);
        text-underline-offset: 3px;
    }
    
    .columnContact {
        min-width: 0;
    }

    .columnContact a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* =========================================
       FAQ
    ========================================= */
    .faqBlock {
        margin: 20px 0;
    }

    .faqBlock__items {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .faqItem {
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
    }

    .faqQuestion {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
        border: 0;
        background: transparent;
        padding: 14px 25px;
        font-weight: 600;
        text-align: left;
    }

    .faqQuestion:focus {
        outline-offset: 2px;
    }

    .faqQuestion::after {
        content: '+';
        font-size: 24px;
        font-weight: 700;
        color: var(--color-accent);
        transition: transform .2s ease;
    }

    .faqItem[open] .faqQuestion::after {
        content: '−';
    }

    .faqAnswer {
        padding: 0 25px 25px;
        line-height: 1.55;
        border: none;
    }

    .faqItem.isOpen .faqAnswer {
        padding-top: 10px;
    }

    .faqAnswer p {
        margin: 0 0 10px;
    }

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

    /* =========================================
       CONTENT LINKS
    ========================================= */
    .column-left p a,
    .column-left li a {
        position: relative;
        display: inline-block;
        color: var(--color-primary);
        font-weight: 600;
        transition: color .2s ease;
    }

    .column-left p a::after,
    .column-left li a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--color-accent-light) 0%, #C13B63 100%);
        transition: width .25s ease;
    }

    .column-left p a:hover,
    .column-left li a:hover {
        color: var(--color-accent);
    }

    .column-left p a:hover::after,
    .column-left li a:hover::after {
        width: 100%;
    }

    /* CTA links inside price blocks should remain buttons */
    .column-left .priceItemList a,
    .column-left .priceItemList a:hover {
        color: #fff !important;
    }

    .column-left .priceItemList a::after {
        display: none;
    }

    /* =========================================
       PRICE BLOCKS
    ========================================= */
    .priceBlock {
        margin: 20px 0;
    }

    .priceBlockItems {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .priceItem {
        flex: 1 1 280px;
        border: 1px solid rgba(0, 0, 0, .12);
        border-radius: 12px;
        background: #fff;
        box-shadow: var(--bb-shadow);
    }

    .priceItemHeader {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
        background: var(--color-primary);
        padding: 25px;
        color: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .priceItemName,
    .priceItemPrice {
        font-weight: 700;
    }

    .priceItemPrice {
        white-space: nowrap;
    }

    .priceItemPrefix,
    .priceItemSuffix {
        font-weight: 700;
        opacity: .7;
        font-size: .9em;
    }

    .priceItemPrefix {
        margin-right: 6px;
        text-transform: lowercase;
    }

    .priceItemSuffix {
        margin-left: 6px;
    }

    .priceItemList {
        margin: 0;
        padding: 25px;
        display: grid;
        gap: 6px;
        list-style: none;
    }

    .priceItemList li {
        margin: 0 0 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }

    .priceItemList li:last-child {
        margin-bottom: 0;
        border: none;
    }

    .priceItemList a {
        display: inline-block;
        width: 100%;
        padding: 12px 25px;
        border-radius: 35px;
        text-align: center;
    }

    /* =========================================
       AUTHOR BOX
    ========================================= */
    .author-box {
        display: flex;
        gap: 30px;
        align-items: flex-start;
        background: #fff;
        padding: 25px;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-card);
        margin: 0 0 60px;
    }

    .author-box__image-wrap {
        flex: 0 0 100px;
    }

    .author-box__image {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 18px;
    }

    .author-box__content {
        flex: 1;
    }

    .author-box__label {
        display: inline-block;
        margin-bottom: 8px;
        font-weight: 700;
        text-transform: uppercase;
        color: var(--color-accent);
    }

    .author-box__name {
        margin: 0 0 6px;
        font-size: 28px;
        color: #111827;
    }

    .author-box__role {
        margin: 0 0 14px;
        font-weight: 600;
        color: var(--color-accent);
    }

    .author-box__text {
        margin: 0 0 18px;
        line-height: 1.7;
        color: #374151;
    }

    .author-box__text a {
        color: var(--color-accent);
        font-weight: 600;
        text-decoration: underline;
        text-decoration-color: rgba(139, 30, 63, .35);
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
    }

    .author-box__text a:hover {
        text-decoration-color: var(--color-accent);
    }

    .author-box__expertises {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0 0 20px;
    }

    .author-box__expertises span {
        padding: 8px 18px;
        border-radius: 999px;
        background: #fff;
        border: 1px solid #e5e7eb;
        color: #374151;
    }

    .author-box__button {
        display: inline-block;
        padding: 12px 18px;
        border-radius: 12px;
        background: #eef2f7;
        color: var(--color-primary);
        border: 1px solid #d1d5db;
        font-weight: 600;
        transition: opacity .2s ease;
    }

    .author-box__button:hover {
        opacity: .9;
    }

    /* =========================================
       ABOUT / HOME BLOCKS
    ========================================= */
    .about-business {
        margin: auto;
    }

    .about-row {
        display: flex;
        align-items: center;
        gap: 60px;
        margin: 80px 0;
        background: #fff;
        padding: 35px;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-card);
    }

    .about-row.reverse {
        flex-direction: row-reverse;
    }

    .about-text,
    .about-image {
        flex: 1;
    }

    .about-text h2 {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .about-image img {
        width: 100%;
        border-radius: 10px;
    }

    /* =========================================
       TEXT BLOCKS
    ========================================= */
    .texts {
        display: flex;
        flex-direction: column;
        gap: 60px;
        margin-top: 40px;
    }

    .texts .text {
        display: grid;
        grid-template-columns: 45% 1fr;
        grid-template-areas:
            "image header"
            "image content";
        gap: 0 50px;
        align-items: center;
        padding: 40px;
        border-radius: var(--radius-xl);
        background: #fff;
        box-shadow: var(--shadow-card);
    }

    .texts .text:nth-child(even) {
        grid-template-columns: 1fr 45%;
        grid-template-areas:
            "header image"
            "content image";
    }

    .texts .text:nth-child(even) .textImage img {
        float: right;
    }

    .texts .textImage {
        grid-area: image;
    }

    .texts .textHeader {
        grid-area: header;
        align-self: end;
    }

    .texts .textContent {
        grid-area: content;
        align-self: start;
    }

    .texts .textImage img {
        height: auto;
        border-radius: 18px;
        object-fit: cover;
    }

    .texts .textHeader h2 {
        margin: 0 0 15px;
    }

    .texts .textContent p {
        margin: 0;
    }

    /* =========================================
       FOOTER
    ========================================= */
    footer {
        background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 58%, var(--color-primary-light) 100%);
        color: #fff;
    }

    .footer-inner {
        max-width: 1600px;
        margin: 0 auto;
        padding: 2rem 1.5rem;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1.4fr;
        gap: 2rem;
    }

    .footer-col {
        font-size: 1.2rem;
    }

    .footer-col h4 {
        margin: 0 0 .6rem;
        font-size: .95rem;
        font-weight: 600;
    }

    footer p {
        margin: 0;
    }

    footer a {
        position: relative;
        display: inline-block;
        color: #fff;
        margin-bottom: .3rem;
    }

    footer a:hover {
        color: #fff;
    }

    footer a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -3px;
        width: 0;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--color-accent-light) 0%, #C13B63 100%);
        transition: width .25s ease;
    }

    footer a:hover::after {
        width: 100%;
    }

    .footer-col a:has(img)::after {
        display: none;
    }

    .footer-col a:has(img):hover {
        transform: none;
    }

    .footer-bottom {
        grid-column: 1 / -1;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, .15);
        color: #fff;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .footer-inner,
    .footer-inner * {
        min-width: 0;
    }

    .footer-inner a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    

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

    .mm-navbar {
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
    }

    .mm-menu a,
    .mm-menu .mm-listview a {
        color: #123E63 !important;
    }

    .mm-navbar .mm-btn_next:after,
    .mm-navbar .mm-btn:after,
    .mm-navbar .mm-btn:before {
        border-color: #123E63 !important;
    }

    .mm-menu .mm-listview .mm-btn_next:after,
    .mm-menu .mm-btn:after,
    .mm-menu .mm-btn:before {
        border-color: #123E63 !important;
    }

    .mm-menu .mm-listview .mm-btn_next {
        border-left: 1px solid #f1f3f5;
    }

    .mm-panels > .mm-panel > .mm-listview {
        margin-left: 0;
        margin-right: 0;
    }

    .mm-panel {
        background: #fff;
        padding-left: 0;
        padding-right: 0;
    }

    .mm-panel h1,
    .mm-menu a.mm-navbar__title {
        color: #123E63 !important;
        font-weight: 700;
    }
    
    .mm-menu a.mm-navbar__title { display: inline-block; position: relative; }
 
    .mm-listitem:after {
        border-bottom-width: 0;
    }

    .mm-listitem {
        background: #fff !important;
        width: 100%;
    }

    .mm-listitem a {
        text-align: left !important;
        border-bottom: 1px solid #f1f3f5 !important;
        font-size: 17px !important;
        font-weight: 500;
        display: block !important;
        border-radius: 0 !important;
    }

    .mm-listitem a:hover {
        color: #8B1E3F !important;
        background: transparent;
    }

    .mm-listitem a.active {
        color: #8B1E3F !important;
        font-weight: 700;
        background: none; 
        box-shadow: none;
        padding: 10px 14px !important;
    }

    /* BELANGRIJK: desktop flex menu uitschakelen */
    .mm-panels .sf-menu,
    .mm-panels .sf-menu-sub {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mm-panels .sf-menu li,
    .mm-panels .sf-menu-sub li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    .mm-panels .sf-menu-sub {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        min-width: 0 !important;
    }

    .mm-panels .sf-menu-sub li {
        height: auto;
        border-bottom: none;
        margin-bottom: 0;
    }

    .mm-panels .sf-menu-sub {
        width: 100%;
        padding: 0;
    }

    .mm-panels .sf-menu > li > a {
        font-size: 17px;
        padding-left: 20px !important;
    }

    #mm-1 .mm-listitem:first-child {
        margin-left: -1px;
    }

    /* #mm-1 .mm-listitem:last-child {
        text-align: left;
        padding: 20px;
        background: #fff !important;
    } */

    /* .mm-panels #mm-1 .sf-menu > .mm-listitem:last-child > a {
        border-bottom: 0 !important;
        display: inline-block;
        padding: 0 !important;
        font-size: 14px;
    }

    .mm-panels #mm-1 .sf-menu > .mm-listitem:last-child img {
        max-width: 100%;
    } */

    .mm-listitem .fa.fa-angle-right {
        display: none;
        visibility: hidden;
    }

    /* =========================================
       RESPONSIVE
    ========================================= */
    
     @media (max-width: 1600px) {
        .footer-inner {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            padding: 2rem 2.5rem;
        }
    }
    
    @media (max-width: 1200px) {
        .header-inner {
            flex-direction: column;
            gap: 20px;
        }

        .main-nav a {
            font-size: 1.25rem;
        }

        .hero-home-content {
            width: 58%;
        }
    }
    
    @media (max-width: 980px) {
        .bb-columns {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 900px) {
        .columns,
        .about-row,
        .about-row.reverse {
            flex-direction: column;
        }

        .column-left,
        .column-right {
            width: 100%;
        }

        .column-right {
            position: static;
        }

        .content .columnContact,
        .content .columnContact + .columnContact {
            float: none;
            width: 100%;
            margin-right: 0;
            margin-bottom: 24px;
        }

        .texts .text,
        .texts .text:nth-child(even) {
            display: flex;
            flex-direction: column;
            gap: 25px;
            padding: 25px;
        }

        .texts .textImage,
        .texts .textHeader,
        .texts .textContent {
            width: 100%;
        }

        .texts .textHeader h2 {
            font-size: 28px;
        }
 
        .hero-home .container {
            background-size: 55%;
            min-height: 460px;
        }

        .hero-home-content {
            width: 65%;
        }

        .hero-home h1 {
            font-size: 2.6em;
        }

        .hero-home p,
        .hero-home a.btn {
            font-size: 22px;
        }

        .columns {
            flex-direction: column;
        }

        .column-left,
        .column-right {
            width: 100%;
        }

        .column-right {
            position: static;
        }
    }
    
     .mm-page__blocker.mm-slideout { z-index: 9999; }

    @media (max-width: 880px) {
        .main-nav {
            display: none;
        }

        .nav-toggle {
            display: block;
            font-size: 1.4rem;
            background: none;
            border: none;
            cursor: pointer;
        }

        .hero,
        .section {
            grid-template-columns: minmax(0, 1fr);
        }

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

        .footer-inner {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        
         header .mobileMenu {
            display: block;
            position: fixed;
            z-index: 10001;
            top: 66px;
            right: 0;
            width: 50px;
            height: 35px;
            background: url("/images/menu-sign-open.png") no-repeat;
        }
        
        html.mm-opened header .mobileMenu,
        html.mm-wrapper_opened header .mobileMenu {
            background: url("/images/menu-sign-close.png") no-repeat;
        }
        
        .topbar-left { display: none; visibility: hidden; }
        .topbar-right { flex-direction: row; }
        
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9988;
        }

        #mm-nav,
        .mm-menu {
            z-index: 9999;
        }
   
        .page-wrapper {
            padding-top: var(--header-height, 120px);
        }
        
        .bb-section { padding: 0 16px; }
        
        .footer-inner { gap: 0; }
    }
    
    @media (max-width: 768px) {
        .author-box {
            display: block;
            padding: 24px;
        }

        .author-box__image-wrap {
            margin-bottom: 20px;
        }

        .author-box__image {
            width: 110px;
            height: 110px;
        }

        .author-box__name {
            font-size: 24px;
        }
        
        img { height: auto !important; }
        iframe { max-width: 100%; height: auto !important; }
    }

    @media (max-width: 720px) {
        .bb-cta__inner {
            flex-direction: column;
            align-items: flex-start;
        }

        .bb-cta__button {
            width: 100%;
        }
    }

    @media (max-width: 640px) {
        .bb-columns {
            grid-template-columns: 1fr;
        }

        .priceBlockItems {
            gap: 12px;
        }

        .priceItem {
            flex: 1 1 100%;
        }

        .gradient-border-top {
            height: auto;
        }

        .gradient-border-top .container {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .hero-home .container {
            background-image: none;
            min-height: auto;
            padding: 30px 20px;
        }

        .hero-home-content {
            width: 100%;
            text-align: center;
        }

        .hero-home h1 {
            font-size: 2.1em;
        }

        .hero-home p,
        .hero-home a.btn {
            font-size: 18px;
        }

        .about-row,
        .about-row.reverse {
            flex-direction: column;
            gap: 25px;
            margin: 40px 0;
            padding: 25px;
        }

        .author-box {
            margin-bottom: 35px;
        }
        
        #breadcrumbsTop {
            overflow-x: auto;
            padding-bottom: 6px;
        }

        ol.breadcrumbs {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 0 0 15px;
            padding: 0;
            font-size: 14px;
            line-height: 1.3;
        }

        .breadcrumbs li {
            display: inline-flex;
            align-items: center;
            padding: 0;
        }

        .breadcrumbs li a {
            display: inline-block;
            max-width: 220px;
            padding: 5px 9px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 999px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .breadcrumbSeparator {
            padding: 5px 0;
            color: var(--color-text-light);
        }
        
        .footer-inner {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 560px) {
        .header-inner,
        .hero,
        .content {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .service-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }
    
    @media (max-width: 480px) {
        #logo img {
            max-width: calc(100vw - 160px);
            height: auto;
        }
    }
    
    @media (max-width: 420px) {
        .breadcrumbs li a {
            max-width: 160px;
        }
    }