/* ==========================================================================
   Copernica Law - Custom CSS
   Additions NOT in the Lawfinity base CSS.
   Uses Lawfinity CSS variable system where appropriate.
   ========================================================================== */


/* ==========================================================================
   0. Global Overrides
   ========================================================================== */

.container {
    max-width: 1140px;
}

/* Button icon spacing: icon right = margin-left, icon left = margin-right */
.appointment > i:first-child,
.appointment-secondary > i:first-child,
.appointment-whatsapp > i:first-child,
.read_more > i:first-child {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

.appointment > i:last-child,
.appointment-secondary > i:last-child,
.appointment-whatsapp > i:last-child,
.read_more > i:last-child {
    margin-left: 8px !important;
    margin-right: 0 !important;
}

/* Accessibility: hide label from sight but keep it for screen readers. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Override Font Awesome's @font-face declarations to add font-display: swap.
   Without swap, FA renders invisible text (FOIT) while font loads — PageSpeed
   penalizes this. We can't edit the CDN file but adding font-display here
   merges with the existing declaration via CSS cascade. */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display: swap;
}

/* Standalone .read_more (used outside .expertise-con) styles like a CTA button.
   Inside .expertise-con the existing scoped rules win via specificity. */
a.read_more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    padding: 18px 32px;
    border-radius: 30px;
    color: var(--e-global-color-white);
    background: var(--e-global-color-primary);
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
a.read_more:hover {
    color: var(--e-global-color-white);
    background: var(--e-global-color-very-dark-black-blue);
    transform: translateY(-1px);
}

/* Legal navigation (Privatlivspolitik / Forretningsbetingelser) — under copyright */
.legal-nav {
    padding-bottom: 20px;
}
.legal-nav .legal-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.legal-nav .legal-menu li {
    position: relative;
}
.legal-nav .legal-menu li + li::before {
    content: "•";
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.3);
    font-size: 10px;
}
.legal-nav a {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}
.legal-nav a:hover {
    color: rgba(255, 255, 255, 0.95);
}

/* Centered eyebrow (h6 with line): when parent has .text-center, the absolute
   ::before line stays anchored to the h6 box, so we shrink h6 to its content
   width and center the whole block. The internal text stays left-aligned so
   the line and text remain aligned to each other. */
.committed_content.text-center > h6,
.practice_content.text-center > h6,
.section-title.text-center > h6 {
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* ==========================================================================
   1. Hero Video Section
   ========================================================================== */

.hero-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background: linear-gradient(180deg, var(--e-global-color-very-dark-black-blue) 0%, var(--e-global-color-primary) 100%);
    opacity: .6;
    z-index: 1;
}

/* Hero Avatar — round profile picture, top-right of hero, overflowing the container */
.hero-avatar {
    position: absolute;
    top: -28px;
    right: -28px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
    background: #fff;
    z-index: 5;
    pointer-events: none;
}

.hero-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991px) {
    .hero-avatar {
        width: 110px;
        height: 110px;
        top: -20px;
        right: -10px;
    }
}

@media (max-width: 575px) {
    .hero-avatar {
        width: 84px;
        height: 84px;
        top: -14px;
        right: 8px;
        border-width: 3px;
    }
}

/* Override Lawfinity's banner_outer background for video hero */
.banner_outer.position-relative {
    background: transparent;
}

.banner_outer::before {
    display: none; /* Hide the Lawfinity background image when using video */
}

.banner-con {
    padding: 160px 0 100px;
}

/* ==========================================================================
   Angled Section Dividers (clip-path on sections themselves)
   Works with ANY background — no color matching needed.
   ========================================================================== */

/* Hero (front page): clip bottom at angle — works with any background */
.banner_outer,
.banner_outer.position-relative {
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%) !important;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%) !important;
    margin-bottom: -60px;
}

/* Sub-banner (inner pages): clip bottom at angle */
.sub_banner {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
    margin-bottom: -60px;
}

/* Footer: angled top edge + pull up to overlap */
.footer-con {
    clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%);
    margin-top: -60px;
    padding-top: calc(60px + 72px);
}

/* Responsive: smaller angles on mobile */
@media (max-width: 767px) {
    .banner_outer {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%) !important;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%) !important;
        margin-bottom: -30px !important;
    }
    .sub_banner {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%) !important;
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 0 100%) !important;
        margin-bottom: -30px !important;
    }
    .footer-con {
        clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
        -webkit-clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
        margin-top: -30px;
        padding-top: calc(30px + 72px);
    }
}

.banner-con.has-video {
    position: relative;
    z-index: 1;
}

.banner-con.has-video .banner_content,
.banner-con.has-video .container {
    position: relative;
    z-index: 2;
}

/* Hero content layout */

/* Override the inherited text-align: center from .sub_banner_con on area pages
   so the desktop hero content aligns left like the front-page hero. */
.sub_banner_con .hero-desktop {
    text-align: left;
}
.sub_banner_con .hero-desktop .hero-promise {
    text-align: center;
}

/* Kill Lawfinity's 55px left padding on .banner_content at <=1199px — it makes
   .banner_content indent while sibling elements (Google badge) don't, so
   alignment breaks. Bootstrap column gutters already handle spacing. */
@media (max-width: 1199px) {
    .banner-con .banner_content,
    .sub_banner_con .banner_content {
        padding-left: 0 !important;
    }
}

.banner_content h1 {
    margin-bottom: 20px;
    font-size: 46px;
    line-height: 1.2;
}

.hero-description {
    max-width: 560px;
    opacity: 0.9;
    margin-bottom: 8px;
}

/* Hero bullets — small benefit list inside hero. Same look on desktop + mobile. */
.hero-bullets {
    list-style: none;
    padding: 0;
    margin: 16px 0 24px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    line-height: 1.55;
}
.hero-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.hero-bullets li:last-child { margin-bottom: 0; }
.hero-bullets i {
    color: var(--e-global-color-accent, #D4A853);
    margin-top: 5px;
    flex-shrink: 0;
    font-size: 13px;
}

/* Mobile hero block — reordered, no contact form, no trust row.
   Components keep their existing classes (.hero-stats-bar, .hero-cta-row,
   .google-review-badge, .hero-promise) so styling is identical to desktop. */
.hero-mobile {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
}
.hero-mobile__title {
    font-size: 28px;
    line-height: 1.25;
    margin-bottom: 0;
    color: #fff;
    font-weight: 700;
}
.hero-mobile .hero-bullets {
    margin: 0;
    text-align: left;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
}
.hero-mobile__badge {
    display: flex;
    justify-content: center;
}
.hero-mobile .hero-promise {
    margin: 0;
}
.hero-mobile .hero-cta-row {
    justify-content: center;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .hero-mobile__title {
        font-size: 18px;
    }
    .hero-mobile .hero-bullets {
        font-size: 13px;
        max-width: 300px;
    }
}

.hero-promise {
    margin-bottom: 28px;
}

/* Hero CTA row */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

/* Hero Trust Row (reviews + flag) — centered under stats bar */
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
}

/* Global Google Review Badge — reusable everywhere */
.google-review-badge {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    transition: background 0.3s ease;
}

.google-review-badge:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.google-review-badge .grb-logo {
    height: 18px;
    width: auto;
    flex-shrink: 0;
}

.google-review-badge .grb-rating {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.google-review-badge .fa-star {
    color: #fbbc04;
    font-size: 14px;
}

.google-review-badge .grb-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 4px;
    flex-shrink: 0;
}

.google-review-badge .grb-count {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

/* Mobile/tablet: center hero content when columns stack */
@media (max-width: 991px) {
    .google-review-badge {
        display: flex;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    /* Center the wrapper div too */
    .banner_content + div,
    .sub-banner-trust {
        text-align: center;
    }
    .banner-con .banner_content {
        text-align: center;
    }
    .banner-con .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    .banner-con .hero-cta-row {
        justify-content: center;
    }
}

/* Light variant (for use on white backgrounds) */
.google-review-badge--light {
    background: var(--e-global-color-light-grayish-orange, #f8f5f0);
    border-color: rgba(0, 0, 0, 0.06);
    color: var(--e-global-color-primary);
}

.google-review-badge--light:hover {
    background: #eee;
    color: var(--e-global-color-primary);
}

.google-review-badge--light .grb-rating {
    color: var(--e-global-color-primary);
}

.google-review-badge--light .grb-divider {
    background: rgba(0, 0, 0, 0.15);
}

.google-review-badge--light .grb-count {
    color: #555;
}

/* Legacy alias — keep old selectors working */
.hero-trust-reviews {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;
    padding: 10px 20px;
    transition: background 0.3s ease;
}

.hero-trust-reviews:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.hero-google-logo {
    height: 18px;
    width: auto;
    flex-shrink: 0;
}

.hero-google-rating {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.hero-trust-reviews .fa-star {
    color: #fbbc04;
    font-size: 14px;
}

.hero-google-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 4px;
    flex-shrink: 0;
}

.hero-google-count {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.hero-trust-flag {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

.hero-trust-flag svg {
    border-radius: 2px;
    flex-shrink: 0;
}

/* Hero Right Column - "Vi tilbyder" */
/* ==========================================================================
   Unified Inline Contact Form — dark & light variants
   ========================================================================== */

/* Shared base */
.inline-form__heading {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 2px;
    padding-right: 90px;
    text-align: left;
}

.inline-form__sub {
    font-size: 13px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    text-align: left;
}

.inline-form__form input,
.inline-form__form select,
.inline-form__form textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 14px;
    font-family: inherit;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.inline-form__row {
    margin-bottom: 10px;
}

.inline-form__row--half {
    display: flex;
    gap: 10px;
}

.inline-form__row--half input {
    flex: 1;
    min-width: 0;
}

.inline-form__form select {
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

.inline-form__form textarea {
    resize: vertical;
    min-height: 100px;
}

.inline-form__submit {
    width: 100%;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 2px;
}

.inline-form__submit:hover {
    transform: translateY(-1px);
}

.inline-form__response {
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
}

.inline-form__disclaimer {
    font-size: 11px;
    text-align: center;
    margin: 10px 0 0;
}

/* File upload — compact single line */
.inline-form__file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.inline-form__file i {
    font-size: 14px;
    flex-shrink: 0;
}

.inline-form__file-name {
    font-weight: 600;
    display: none;
}

.inline-form__file-name.has-file {
    display: inline;
}

/* === DARK variant (glassmorphism — hero, sub-banner) === */
.inline-form--dark .inline-form__heading { color: #fff; }
.inline-form--dark .inline-form__sub { color: rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.1); }

.inline-form--dark .inline-form__form input,
.inline-form--dark .inline-form__form select,
.inline-form--dark .inline-form__form textarea {
    color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
}

.inline-form--dark .inline-form__form input::placeholder,
.inline-form--dark .inline-form__form textarea::placeholder { color: rgba(255,255,255,0.45); }

.inline-form--dark .inline-form__form input:focus,
.inline-form--dark .inline-form__form select:focus,
.inline-form--dark .inline-form__form textarea:focus { border-color: var(--e-global-color-accent); background: rgba(255,255,255,0.12); }

.inline-form--dark .inline-form__form select {
    background: rgba(255,255,255,0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='rgba(255,255,255,0.5)'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
}

.inline-form--dark .inline-form__form select option { background: var(--e-global-color-primary); color: #fff; }

.inline-form--dark .inline-form__submit {
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary);
}

.inline-form--dark .inline-form__submit:hover { background: #c49a48; box-shadow: 0 4px 20px rgba(212,168,83,0.4); }

.inline-form--dark .inline-form__disclaimer { color: rgba(255,255,255,0.35); }

.inline-form--dark .inline-form__file {
    color: rgba(255,255,255,0.5);
    border: 1px dashed rgba(255,255,255,0.15);
}

.inline-form--dark .inline-form__file:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); }
.inline-form--dark .inline-form__file-name { color: var(--e-global-color-accent); }

/* === LIGHT variant (white card — contact section, kontakt-os) === */
.inline-form--light .inline-form__heading { color: var(--e-global-color-primary); }
.inline-form--light .inline-form__sub { color: #888; border-bottom: 1px solid #eee; }

.inline-form--light .inline-form__form input,
.inline-form--light .inline-form__form select,
.inline-form--light .inline-form__form textarea {
    color: var(--e-global-color-primary);
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
}

.inline-form--light .inline-form__form input::placeholder,
.inline-form--light .inline-form__form textarea::placeholder { color: #999; }

.inline-form--light .inline-form__form input:focus,
.inline-form--light .inline-form__form select:focus,
.inline-form--light .inline-form__form textarea:focus { border-color: var(--e-global-color-accent); background: #fff; }

.inline-form--light .inline-form__form select {
    background: #f8f9fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23999'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
}

.inline-form--light .inline-form__submit {
    background: var(--e-global-color-primary);
    color: #fff;
}

.inline-form--light .inline-form__submit:hover { background: #162440; box-shadow: 0 4px 20px rgba(15,29,47,0.3); }

.inline-form--light .inline-form__disclaimer { color: #aaa; }

.inline-form--light .inline-form__file {
    color: #888;
    border: 1px dashed #ddd;
}

.inline-form--light .inline-form__file:hover { border-color: #bbb; color: #666; }
.inline-form--light .inline-form__file-name { color: var(--e-global-color-accent); }

/* Responsive */
@media (max-width: 575px) {
    .inline-form__row--half {
        flex-direction: column;
        gap: 10px;
    }
}

/* Hero Contact Card (glassmorphism form) */
.hero-contact-card {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 32px 30px 28px;
}

.hero-contact-heading {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.hero-contact-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-form-group {
    margin-bottom: 12px;
}

.hero-form-group input,
.hero-form-group select,
.hero-form-group textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.3s ease, background 0.3s ease;
    box-sizing: border-box;
}

.hero-form-group input::placeholder,
.hero-form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.hero-form-group input:focus,
.hero-form-group select:focus,
.hero-form-group textarea:focus {
    border-color: var(--e-global-color-accent);
    background: rgba(255, 255, 255, 0.12);
}

.hero-form-group select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='rgba(255,255,255,0.6)'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.hero-form-group select option {
    background: var(--e-global-color-primary);
    color: #fff;
}

.hero-form-group textarea {
    resize: none;
    min-height: 56px;
}

.hero-form-submit {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    color: var(--e-global-color-primary);
    background: var(--e-global-color-accent);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 4px;
}

.hero-form-submit:hover {
    background: #c49a48;
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(212, 168, 83, 0.4);
}

.hero-form-submit i {
    transition: transform 0.3s ease;
}

.hero-form-submit:hover i {
    transform: translateX(4px);
}

/* Hero Primary CTA button — light pill with dark navy text */
.hero-cta-row > .appointment:not(.appointment-secondary):not(.appointment-whatsapp):not(.appointment-outline) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    color: var(--e-global-color-primary, #0F1D2F);
    background: #fff;
    border: 2px solid #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
}
.hero-cta-row > .appointment:not(.appointment-secondary):not(.appointment-whatsapp):not(.appointment-outline):hover {
    background: var(--e-global-color-accent, #D4A853);
    border-color: var(--e-global-color-accent, #D4A853);
    color: var(--e-global-color-primary, #0F1D2F);
    transform: translateY(-1px);
}

/* Hero Secondary CTA button */
.appointment-secondary {
    display: inline-block;
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    color: var(--e-global-color-white, #ffffff);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.appointment-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--e-global-color-white, #ffffff);
}

.appointment-secondary i {
    margin-right: 6px;
}

/* Hero Stats Bar - glassmorphism */
.hero-stats-bar {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 28px 40px;
    /*margin-top: 40px;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.hero-stat-item {
    text-align: center;
    color: var(--e-global-color-white, #ffffff);
    flex: 1;
}

.hero-stat-item .stat-number,
.hero-stat-item .hero-stat-number {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--e-global-color-secondary, #c9d6e8);
    display: block;
}

.hero-stat-item .stat-label,
.hero-stat-item .hero-stat-label {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-top: 4px;
}

/* Rotating Badge — positioned on hero-contact-card */
.hero-rotating-badge {
    position: absolute;
    bottom: -40px;
    right: -40px;
    z-index: 10;
    width: 110px;
    height: 110px;
    cursor: pointer;
}

.hero-rotating-badge svg {
    animation: rotateBadge 15s linear infinite;
}

.hero-rotating-badge .rotating-text {
    fill: #ffffff;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hero-rotating-badge .badge-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    background: var(--e-global-color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.hero-rotating-badge:hover .badge-icon {
    transform: translate(-50%, -50%) scale(1.1);
}

@keyframes rotateBadge {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Google trust mini-badge inside hero contact card */
.hero-form-trust {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
    padding-bottom: 0;
}

.hero-form-trust span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
}

/* Hero button variants */
.appointment-outline {
    display: inline-block;
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    color: var(--e-global-color-white, #ffffff);
    border: 2px solid var(--e-global-color-white, #ffffff);
    border-radius: 30px;
    background: transparent;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    cursor: pointer;
}

.appointment-outline:hover {
    background: var(--e-global-color-white, #ffffff);
    color: var(--e-global-color-accent, #0F1D2F);
}

.appointment-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 20px 32px 22px;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    color: #fff;
    background: #25d366;
    border: none;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    cursor: pointer;
}

.appointment-whatsapp:hover {
    background: #1da851;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.appointment-whatsapp i {
    font-size: 22px;
    color: #fff;
    line-height: 1;
}


/* ==========================================================================
   2. Floating Action Buttons (FABs) — unified system
   Order bottom→top: Phone (20px) → WhatsApp (78px) → Back-to-top (136px)
   Same size on ALL devices. No breakpoint overrides.
   ========================================================================== */

.floating-actions {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.fab {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.4s ease;
    opacity: 0;
    transform: translateX(80px);
}

.fab.visible {
    opacity: 1;
    transform: translateX(0);
}

.fab:hover {
    transform: translateX(0) scale(1.12);
}

/* Phone (bottom — green pill with text "Ring til os nu").
   Darker green for WCAG AA contrast with white text (4.5:1 needed for normal,
   3:1 for large text). #25d366 fails contrast — using #128c7e (WhatsApp
   official dark green) which passes ~5.2:1. */
.fab-phone {
    background: #128c7e;
    color: #fff;
}

.fab-phone:hover {
    background: #0e6f64;
    box-shadow: 0 6px 24px rgba(18, 140, 126, 0.5);
    color: #fff;
}

/* Pill variant: expands width to fit icon + text */
.fab-phone--pill {
    width: auto;
    min-width: 50px;
    height: 50px;
    border-radius: 28px;
    padding: 0 18px 0 16px;
    gap: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
}

.fab-phone--pill .fab-label {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    color: inherit;
}

.fab-phone--pill .fa-phone {
    font-size: 18px;
}

@media (max-width: 480px) {
    .fab-phone--pill {
        padding: 0 14px 0 12px;
        font-size: 13px;
    }
    .fab-phone--pill .fab-label {
        font-size: 13px;
    }
}

/* WhatsApp (middle — icon-only, so we keep the bright WhatsApp brand green.
   Contrast rules are more lenient for non-text content (3:1 vs 4.5:1). */
.fab-whatsapp {
    background: #25d366;
    color: #fff;
}

.fab-whatsapp:hover {
    box-shadow: 0 6px 24px rgba(18, 140, 126, 0.5);
    color: #fff;
}

/* Back to top (top position — only on scroll) */
.fab-top {
    background: rgba(15, 29, 47, 0.85);
    color: #fff;
    opacity: 0;
    transform: translateX(80px);
    pointer-events: none;
}

.fab-top.visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.fab-top:hover {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}


/* ==========================================================================
   3. (Removed — floating phone bar no longer used)
   ========================================================================== */

/* Legacy — kept for reference, element removed from template
.floating-phone-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--e-global-color-accent, #0F1D2F);
    color: var(--e-global-color-white, #ffffff);
    z-index: 9998;
    padding: 12px 16px;
    display: none;
*/

/* ==========================================================================
   4. Google Review Components
   ========================================================================== */

.google-review-badge {
    text-align: center;
    margin-bottom: 40px;
}

.google-badge-inner {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 32px;
    background: var(--e-global-color-white, #ffffff);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.google-badge-inner img.google-logo-small {
    height: 24px;
    width: auto;
}

.google-badge-inner .badge-rating {
    font-size: 24px;
    font-weight: 700;
    color: var(--e-global-color-primary, #282828);
    line-height: 1;
}

.google-badge-inner .badge-stars {
    display: flex;
    gap: 2px;
}

.google-badge-inner .badge-stars i {
    color: #fbbc04;
    font-size: 16px;
}

.google-badge-inner .badge-count {
    font-size: 14px;
    font-weight: 400;
    color: var(--e-global-color-text, #575757);
}

/* Review avatar */
.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--e-global-color-accent, #0F1D2F);
    color: var(--e-global-color-white, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Review stars */
.review-stars i {
    color: #fbbc04;
    font-size: 14px;
}

/* Review card (Google) */
.review-card-google {
    background: var(--e-global-color-white, #ffffff);
    border: 1px solid var(--e-global-color-light-white, #ececec);
    border-radius: 12px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.review-card-google:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.review-card-google .review-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.review-card-google .review-author {
    font-size: 15px;
    font-weight: 600;
    color: var(--e-global-color-primary, #282828);
    margin: 0;
    line-height: 1.3;
}

.review-card-google .review-date {
    font-size: 13px;
    color: var(--e-global-color-dark-gray, #a3a3a3);
    margin: 0;
}

.review-card-google .review-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--e-global-color-text, #575757);
    flex-grow: 1;
}

.review-card-google .review-text-short {
    display: block;
}

.review-card-google .review-text-full {
    display: none;
}

/* Review text truncation */
.review-text-wrap.is-truncated .review-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-text-wrap.is-expanded .review-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

/* Read more link */
.review-read-more,
.review-read-more-btn {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--e-global-color-accent, #0F1D2F);
    cursor: pointer;
    text-decoration: none;
    margin-top: 8px;
    border: none;
    background: none;
    padding: 0;
    transition: color 0.2s ease;
}

.review-read-more:hover,
.review-read-more-btn:hover {
    color: var(--e-global-color-very-soft-orange, #E8C97A);
    text-decoration: underline;
}

/* Google logo in reviews */
.google-logo-small {
    height: 24px;
    width: auto;
}


/* ==========================================================================
   4b. Testimonial Section Overrides (front page)
   Uses Lawfinity base .testimonial-con styles, only overrides what's needed.
   ========================================================================== */

/* Make wrapper a real box so we can position image/bg relative to it */
.testimonial-redesigned .testimonial_wrapper {
    display: block !important;
    position: relative;
    height: 100%;
}

/* Colored bg — extends from far left to 80% of the wrapper width */
.testimonial-redesigned .image-bg {
    left: -100vw !important;
    right: 50% !important;
    top: 0;
    height: 100%;
    width: auto !important;
}

/* No avatar — remove padding-left, add right space for nav arrows */
.testimonial-redesigned .review-content {
    padding-left: 0;
    padding-right: 80px;
}

/* Narrower review text */
.testimonial-redesigned .testimonial_content p {
    max-width: 520px;
}

/* Clip bg overflow */
.testimonial-redesigned {
    overflow: hidden;
}

/* Quote icon — Font Awesome instead of Lawfinity's PNG image */
.testimonial-redesigned .testimonial-quote {
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-redesigned .testimonial-quote i {
    color: var(--e-global-color-white, #ffffff);
    font-size: 28px;
}

/* Nav arrows — aligned with reviewer detail row */
.testimonial-redesigned .owl-carousel .owl-nav {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    top: auto !important;
    left: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: inline-flex;
    gap: 8px;
    width: auto !important;
}

/* Make carousel item relative so arrows anchor to it */
.testimonial-redesigned .owl-carousel .owl-stage-outer {
    position: relative;
}

.testimonial-redesigned .owl-carousel {
    position: relative;
    padding-bottom: 0;
}


/* Google badge pill */
.testimonial-google-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--e-global-color-light-grayish-orange, #f5f2ec);
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 10px;
}

.testimonial-google-badge .badge-rating {
    font-size: 16px;
    font-weight: 700;
    color: var(--e-global-color-primary, #282828);
}

.testimonial-google-badge .badge-stars i {
    color: #fbbc04;
    font-size: 12px;
}

.testimonial-google-badge .badge-divider {
    width: 1px;
    height: 14px;
    background: var(--e-global-color-very-light-gray, #dedede);
}

.testimonial-google-badge .badge-count {
    color: var(--e-global-color-text, #575757);
    font-weight: 500;
}

/* Review stars */
.testimonial-redesigned .review-stars i {
    color: #fbbc04;
}

.testimonial-con .testimonial-image {
    left: 60px;
}

/* CTA button — Lawfinity appointment style */
.testimonial-redesigned .testimonial-cta-btn {
    display: inline-block;
    margin-top: 20px;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    padding: 20px 34px 22px;
    border-radius: 30px;
    color: var(--e-global-color-very-dark-black-blue, #202226);
    background: var(--e-global-color-secondary, #c9d6e8);
    border: none;
    transition: all 0.3s ease-in-out;
}

.testimonial-redesigned .testimonial-cta-btn i {
    font-size: 14px;
    margin-left: 18px;
    color: var(--e-global-color-very-dark-black-blue, #202226);
    transition: all 0.3s ease-in-out;
}

.testimonial-redesigned .testimonial-cta-btn:hover {
    color: var(--e-global-color-white, #ffffff);
    background: var(--e-global-color-very-dark-black-blue, #202226);
}

.testimonial-redesigned .testimonial-cta-btn:hover i {
    color: var(--e-global-color-white, #ffffff);
}

/* ==========================================================================
   5. Review Grid Layout
   ========================================================================== */

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media screen and (max-width: 991px) {
    .review-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media screen and (max-width: 575px) {
    .review-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ==========================================================================
   6. Language Switcher (Header Flags)
   ========================================================================== */



/* ==========================================================================
   7. Preloader / Loader (Lawfinity compatible overrides)
   ========================================================================== */

.loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--e-global-color-very-dark-black-blue, #0a0e2a);
    z-index: 99999;
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 165px;
    margin: 0 !important;
    text-indent: 0 !important;
    font-size: inherit !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-logo {
    width: 100%;
    height: 100%;
    animation: loaderPulse 1.6s ease-in-out infinite;
    opacity: 0.9;
}

.loader .loader-logo--favicon {
    position: relative;
    display: block;
    float: none;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    background: transparent;
    border-radius: 0;
    animation: none;
    opacity: 1;
    overflow: visible;
}

.loader-logo__part {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    transform-origin: center;
}

.loader-logo__part--passport {
    clip-path: polygon(0 12%, 58% 12%, 58% 100%, 0 100%);
    animation: loaderPassport 1.45s ease-in-out infinite;
}

.loader-logo__part--flag {
    clip-path: polygon(33% 0, 100% 0, 100% 54%, 48% 54%, 48% 43%, 33% 43%);
    animation: loaderFlag 1.45s ease-in-out infinite;
}

@keyframes loaderPassport {
    0%, 100% {
        transform: translateY(2px) rotate(-1deg);
    }
    50% {
        transform: translateY(-2px) rotate(1deg);
    }
}

@keyframes loaderFlag {
    0%, 100% {
        transform: translate(0, -2px) rotate(0deg);
    }
    50% {
        transform: translate(7px, 2px) rotate(2deg);
    }
}

@keyframes loaderPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}


/* ==========================================================================
   8. Navbar Enhancements
   ========================================================================== */

/* Sticky header on all pages */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    background-color: var(--e-global-color-primary, #0F1D2F);
    transition: background-color 0.3s ease-in-out,
                padding 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out,
                backdrop-filter 0.3s ease-in-out;
}

/* Language Switcher */
.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
    margin-right: 8px;
}

.lang-btn {
    background: none;
    border: 2px solid transparent;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    display: flex;
    align-items: center;
    line-height: 0;
}

.lang-btn:hover {
    opacity: 0.8;
}

.lang-btn.active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.5);
}

.lang-btn svg {
    display: block;
    border-radius: 2px;
}

.navbar-nav li,
.navbar-nav li:last-child {
    margin: 0 4px;
}

/* Mobile: lang switcher in collapsed nav */
@media (max-width: 991px) {
    .lang-switcher {
        margin: 12px 0;
        justify-content: center;
    }
}

/* ==========================================================================
   Topbar — compact strip above header with reviews + languages
   ========================================================================== */
:root {
    --topbar-h: 30px;
}

.topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background: var(--e-global-color-primary, #0F1D2F);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: var(--topbar-h);
    line-height: 1;
    font-size: 12px;
}

.topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    white-space: nowrap;
}
.topbar__reviews { justify-self: start; }
.topbar__lang    { justify-self: center; }
.topbar__languages { justify-self: end; }

.topbar__reviews {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
    flex-shrink: 1;
    min-width: 0;
    text-overflow: ellipsis;
}

.topbar__reviews:hover { color: #fff; opacity: 0.85; }

.topbar__google-logo {
    height: 18px;
    width: auto;
    flex-shrink: 0;
    position: relative;
    top: 2px;
}

.topbar__rating { font-weight: 700; }

.topbar__stars {
    display: inline-flex;
    gap: 1px;
    color: #fbbc04;
    font-size: 10px;
}

.topbar__divider { opacity: 0.4; padding: 0 2px; }
.topbar__count { opacity: 0.85; font-size: 13px; }

.topbar__languages {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    flex-shrink: 1;
    min-width: 0;
    text-overflow: ellipsis;
}

.topbar__languages i { color: var(--e-global-color-accent, #D4A853); font-size: 11px; }

/* Language switcher inside topbar — compact flags, centered desktop / right mobile */
.topbar__lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.topbar__lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 3px;
    opacity: 0.55;
    line-height: 0;
    transition: opacity 0.2s, border-color 0.2s;
    text-decoration: none;
}
.topbar__lang-btn:hover { opacity: 0.9; }
.topbar__lang-btn.is-active {
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.5);
}
.topbar__lang-btn svg {
    display: block;
    border-radius: 2px;
}

/* Mobile: drop the languages text. Two-column layout — reviews left, lang right. */
@media (max-width: 767px) {
    .topbar { font-size: 10px; }
    .topbar__stars { font-size: 9px; }
    .topbar__google-logo { height: 12px; }
    .topbar__languages { display: none; }
    .topbar__inner {
        grid-template-columns: 1fr auto;
    }
    .topbar__reviews { justify-self: start; }
    .topbar__lang { justify-self: end; }
    .topbar__lang-btn svg { width: 16px; height: 12px; }
}

/* When header is scrolled, topbar also sticks to viewport top */
.topbar.scrolled {
    position: fixed;
}

/* Header: positioned absolutely over the banner, offset by topbar height,
   fixed when scrolled */
.header {
    position: absolute;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 100;
}

/* Inner pages: dark header background (since header is now outside the banner) */
.header:not(.header-transparent) {
    background: var(--e-global-color-primary);
}

/* Front page: transparent header before scroll */
.header.header-transparent {
    background-color: transparent;
}

/* Scrolled state: fixed + glassmorphism on all pages */
.header.scrolled {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    background: rgba(15, 29, 47, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    padding: 12px 0;
}

/* Offset page content for fixed header (inner pages only) */
.sub_banner {
    padding-top: 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.sub_banner::before {
    display: none;
}

/* clip-path divider is on .sub_banner itself (see section 1) */

.sub-banner-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    clip-path: inset(0);
}

.sub-banner-video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.sub-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(15, 29, 47, 0.45) 0%,
        rgba(15, 29, 47, 0.6) 100%
    );
}

.sub_banner .container {
    position: relative;
    z-index: 1;
}

.sub_banner .sub_banner_con {
    padding: 210px 0 120px;
}

.sub_banner .sub_banner_con p {
    margin-bottom: 0;
}

/* Sub-banner Google trust badge — uses global .google-review-badge */
.sub-banner-trust {
    margin-bottom: 16px;
}

.sub-banner-google-badge,
.google-review-badge {
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 30px;
    padding: 8px 16px;
    transition: background 0.3s;
}

.sub-banner-google-badge:hover {
    background: rgba(255,255,255,0.18);
}

.sub-banner-rating {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.sub-banner-count {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    margin-left: 4px;
}

/* Sub-banner contact form card */
.sub-banner-form-card {
    position: relative;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px;
    padding: 28px 24px 20px;
    margin-top: 10px;
}

.sub-banner-form-heading {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 2px;
}

.sub-banner-form-sub {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sub-banner-form input,
.sub-banner-form select,
.sub-banner-form textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    font-family: inherit;
    color: #fff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    outline: none;
    margin-bottom: 10px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.sub-banner-form input::placeholder,
.sub-banner-form textarea::placeholder {
    color: rgba(255,255,255,0.45);
}

.sub-banner-form input:focus,
.sub-banner-form select:focus,
.sub-banner-form textarea:focus {
    border-color: var(--e-global-color-accent);
}

.sub-banner-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='rgba(255,255,255,0.5)'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}

.sub-banner-form select option {
    background: var(--e-global-color-primary);
    color: #fff;
}

.sub-banner-form textarea {
    resize: none;
    min-height: 50px;
}

.sub-banner-form-row {
    display: flex;
    gap: 10px;
}

.sub-banner-form-row input {
    flex: 1;
}

.sub-banner-form button {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    color: var(--e-global-color-primary);
    background: var(--e-global-color-accent);
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
}

.sub-banner-form button:hover {
    background: #c49a48;
    transform: translateY(-1px);
}

.sub-banner-form-disclaimer {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-align: center;
    margin: 10px 0 0;
}

/* Responsive: sub-banner form */
@media (max-width: 991px) {
    .sub-banner-form-card {
        margin-top: 30px;
    }
    .sub_banner_content.text-lg-start {
        text-align: center;
    }
    .sub-banner-trust {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .sub-banner-form-row {
        flex-direction: column;
        gap: 0;
    }
}

.violence-con {
    background: url(../images/klartilhjaelp.jpg);
    background-size: cover;
}

/* Front page banner already fills viewport, no extra offset needed */
.banner_outer {
    padding-top: 0;
}

/* Phone icon next to number in nav */
.nav-phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--e-global-color-very-soft-orange, #E8C97A);
    margin-right: 8px;
    transition: all 0.3s ease-in-out;
}

.nav-phone-icon i {
    font-size: 14px;
    color: var(--e-global-color-white, #ffffff);
}

.nav-phone-icon:hover {
    background: var(--e-global-color-accent, #0F1D2F);
    transform: translateY(-2px);
}

/* Copernica adjustments for .last_list */
.last_list {
    display: flex;
    align-items: center;
}

.last_list .nav-phone-icon + a {
    margin-left: 0;
}


/* ==========================================================================
   9. Contact Form - Lawfinity Integration
   ========================================================================== */

/* Form response messages */
.form-response {
    margin-top: 16px;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.5;
    display: none;
}

.form-response.alert-success {
    display: block;
    background-color: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    color: #28a745;
}

.form-response.alert-danger {
    display: block;
    background-color: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
}

/* Loading button state */
.btn-loading {
    display: none;
}

.btn-loading .spinner-border {
    width: 18px;
    height: 18px;
    border-width: 2px;
    vertical-align: middle;
    margin-right: 6px;
}

/* Contact form grid layout */
.copernicalaw-contact-form .form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.copernicalaw-contact-form .form-col {
    flex: 1;
    min-width: 0;
}

.copernicalaw-contact-form .form-col-full {
    flex: 0 0 100%;
}

/* Override Lawfinity hardcoded widths */
.consultation-con .consultation_content input,
.consultation-con .consultation_content select {
    width: 100%;
}

.consultation-con .consultation_content textarea {
    width: 100%;
}

/* Contact section (front page redesigned) */
.contact-section .copernicalaw-contact-form input,
.contact-section .copernicalaw-contact-form select {
    font-size: 14px;
    line-height: 14px;
    font-weight: 400;
    height: 53px;
    width: 100%;
    padding: 10px 10px 14px 26px;
    color: var(--e-global-color-text);
    background-color: var(--e-global-color-white);
    border-radius: 25px;
    border: 1px solid var(--e-global-color-grayish-orange);
    outline: none;
    transition: all 0.3s ease;
}

.contact-section .copernicalaw-contact-form textarea {
    font-size: 14px;
    font-weight: 400;
    width: 100%;
    height: 118px;
    padding: 16px 26px;
    color: var(--e-global-color-text);
    background-color: var(--e-global-color-white);
    border-radius: 18px;
    border: 1px solid var(--e-global-color-grayish-orange);
    resize: none;
    outline: none;
    transition: all 0.3s ease;
}

.contact-section .copernicalaw-contact-form input:focus,
.contact-section .copernicalaw-contact-form textarea:focus,
.contact-section .copernicalaw-contact-form select:focus {
    border-color: var(--e-global-color-accent);
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15);
}

.contact-section .appointment {
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    padding: 21px 33.5px;
    border: none;
    border-radius: 30px;
    color: var(--e-global-color-white);
    background: var(--e-global-color-primary);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-section .appointment i {
    font-size: 14px;
    margin-left: 18px;
    color: var(--e-global-color-white);
}

.contact-section .appointment:hover {
    background: var(--e-global-color-very-dark-black-blue);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* Why Choose Us - pillar card hover */
.pillar-card:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(212,168,83,0.3) !important;
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Select dropdown arrow */
select.form_style {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23575757' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}

/* Form response message */
.copernicalaw-contact-form .form-response {
    margin-bottom: 16px;
}

/* Responsive: stack on mobile */
@media (max-width: 575px) {
    .copernicalaw-contact-form .form-row {
        flex-direction: column;
    }

    footer#footer .row > :nth-child(3) .links {
        padding: 0 !important;
    }
}


/* ==========================================================================
   10. Footer CTA Buttons
   ========================================================================== */

/* Footer needs position:relative for the angled divider */
.footer-con {
    position: relative;
}

/* Footer side motif */
.footer-con .footer-sideimage img {
    width: 100%;
    filter: brightness(0) invert(1);
    opacity: .1;
}

/* Consultation overrides */
.consultation-con .consultation-sideimage img {
    width: 100%;
    pointer-events: none;
}

.consultation-con .consultation-image {
    right: 50%;
    left: 0;
}

/* Footer upper CTA box — now lives in .footer-cta-bar, styles moved there */

.footer-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.footer-cta-buttons .appointment-outline {
    padding: 12px 24px;
    font-size: 14px;
}

.footer-cta-buttons .appointment-outline:hover {
    background: var(--e-global-color-very-soft-orange, #E8C97A);
    border-color: var(--e-global-color-very-soft-orange, #E8C97A);
    color: var(--e-global-color-white, #ffffff);
}

.footer-con .middle_portion {
    padding: 98px 0px 90px 0px;
}

.footer-con .middle_portion .links,
.footer-con .middle_portion .icon {
    padding-left: 30px;
}

.footer-con .middle_portion .icon .text {
    margin-bottom: 5px;
}

.footer-con .middle_portion .social-icons i {
    font-size: 22px;
}


/* ==========================================================================
   11. Stats Bar on single-arbejdsomrade
   ========================================================================== */

.area-stats-bar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 24px;
    padding: 30px 40px;
    background: var(--e-global-color-light-grayish-orange, #f5f2ec);
    border-radius: 12px;
    margin-bottom: 40px;
}

.area-stats-bar .area-stat {
    text-align: center;
}

.area-stats-bar .area-stat .stat-number {
    font-size: 32px;
    font-weight: 700;
    color: var(--e-global-color-accent, #0F1D2F);
    display: block;
    line-height: 1.2;
}

.area-stats-bar .area-stat .stat-label {
    font-size: 14px;
    font-weight: 400;
    color: var(--e-global-color-text, #575757);
    margin-top: 4px;
    display: block;
}


/* ==========================================================================
   12. Responsive Overrides
   ========================================================================== */

/* Lang switcher on mobile: move outside collapse */
@media screen and (max-width: 991px) {
    .lang-switcher {
        border-left: none;
        margin-left: 0;
        padding-left: 0;
    }
}

/* (Old #button rules removed — replaced by .fab system) */

@keyframes spineer-small {
    from {
        box-shadow: 0 0 0 0 rgb(225 187 152 / 41%);
    }
    to {
        box-shadow: 0 0 0 12px rgba(250, 87, 51, .01);
    }
}

@-webkit-keyframes spineer-small {
    from {
        box-shadow: 0 0 0 0 rgb(225 187 152 / 41%);
    }
    to {
        box-shadow: 0 0 0 12px rgba(250, 87, 51, .01);
    }
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {

    .sub_banner .sub_banner_con {
        padding: 130px 0 120px;
    }

    .banner-con .col-lg-7 {
        text-align: center;
    }

    .hero-stats-bar {
        flex-wrap: wrap;
        gap: 16px;
        padding: 20px 24px;
        margin-top: 24px;
        justify-content: center;
    }

    .hero-stat-item {
        flex: 0 0 calc(50% - 10px);
    }

    .hero-stat-item .stat-number,
    .hero-stat-item .hero-stat-number {
        font-size: 24px;
    }

    .hero-contact-card {
        margin-top: 30px;
        padding: 24px 20px;
    }

    .hero-rotating-badge {
        display: none;
    }

    .hero-trust-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .hero-trust-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-trust-flag {
        border-left: none;
        padding-left: 0;
        justify-content: center;
    }

    .hero-trust-reviews {
        justify-content: center;
    }

    .hero-promise {
        text-align: center;
    }

    /* Mobile hero CTA row — stacked column with equal-width buttons */
    .hero-cta-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero-cta-row > .appointment,
    .hero-cta-row > .appointment-secondary {
        width: 100%;
        padding: 14px 18px;
        font-size: 15px;
        text-align: center;
        justify-content: center;
        white-space: nowrap;
    }

    .appointment-outline,
    .appointment-whatsapp {
        padding: 12px 24px;
        font-size: 14px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .google-badge-inner {
        flex-direction: column;
        gap: 10px;
        padding: 14px 20px;
    }

    .testimonial-google-badge {
        flex-wrap: wrap;
        justify-content: center;
        padding: 6px 12px;
        gap: 6px;
    }

    .testimonial-redesigned .testimonial-cta-btn {
        margin-top: 20px;
        padding: 16px 28px 18px;
        font-size: 14px;
    }

    .area-stats-bar {
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
    }

    .footer-cta-buttons {
        flex-direction: column;
        width: 100%;
    }

    .footer-cta-buttons .appointment-outline {
        width: 100%;
        text-align: center;
    }
}

/* Tablet grid adjustments */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .hero-stats-bar {
        gap: 16px;
        padding: 20px 30px;
    }

    .hero-stat-item .hero-stat-number {
        font-size: 26px;
    }

    /* hero contact card — tablet adjustments already handled above */

    .area-stats-bar {
        padding: 24px 30px;
    }

    .google-badge-inner {
        padding: 14px 24px;
    }

}

/* Large screens */
@media screen and (min-width: 1200px) {
    .hero-stats-bar {
        max-width: none;
    }
}


/* ==========================================================================
   13. Navbar / Dropdown Fixes for BS5 + Lawfinity
   ========================================================================== */

/* Fix Lawfinity's display:inherit breaking BS5 flexbox nav */
.navbar-collapse ul.navbar-nav {
    display: flex !important;
    align-items: center;
}

/* Lawfinity dropdown: pure CSS hover for desktop */
@media screen and (min-width: 992px) {
    /* Parent li needs padding-bottom to bridge gap to dropdown */
    .navbar-nav .dropdown {
        padding-bottom: 16px;
        margin-bottom: -16px;
    }

    .navbar-nav .dropdown-menu.drop-down-content {
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 200px;
        padding: 0;
        border: none;
        border-radius: 15px;
        box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
        background-color: var(--e-global-color-white, #ffffff);
        z-index: 1000;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        pointer-events: none;
    }

    /* Show on hover — no click needed */
    .navbar-nav .dropdown:hover > .dropdown-menu.drop-down-content {
        display: block;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Make dropdown link clickable (navigable) */
    .navbar-nav .dropdown > a.dropdown-toggle {
        pointer-events: auto;
    }
}

/* Ensure drop-down-pages inherits properly */
.drop-down-pages {
    padding: 0;
    margin: 0;
}

/* Logo size and color control */
.navbar-brand .logo img {
    max-height: 50px;
    width: 100%;
    filter: brightness(0) invert(1); /* Make logo white for dark header */
    transition: filter 0.3s ease;
}

/* Footer logo - keep original colors */
.footer-con .logo-content img,
.footer-con .footer-logo img {
    width: 100%;
    filter: brightness(0) invert(1); /* White logo on dark footer */
}

/* Nav phone icon (Lawfinity style) */
.last_list .nav-phoneicon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.last_list .nav-phoneicon img {
    max-width: 100%;
}


/* ==========================================================================
   14. Lawfinity BS4 to BS5 Compatibility Fixes
   ========================================================================== */

/* .float-left -> float-start compatibility */
.float-left,
.float-start {
    float: left !important;
}

/* .float-right -> float-end compatibility */
.float-right,
.float-end {
    float: right !important;
}

/* .ml-auto -> ms-auto compatibility */
.ml-auto,
.ms-auto {
    margin-left: auto !important;
}

/* .mr-auto -> me-auto compatibility */
.mr-auto,
.me-auto {
    margin-right: auto !important;
}

/* .pl-* -> .ps-* and .pr-* -> .pe-* basic overrides */
.pl-0, .ps-0 { padding-left: 0 !important; }
.pr-0, .pe-0 { padding-right: 0 !important; }

/* data-toggle vs data-bs-toggle - make both selectors target same visual states */
/* Collapse */
[data-toggle="collapse"].collapsed .fa-minus::before,
[data-bs-toggle="collapse"].collapsed .fa-minus::before {
    content: "\f067"; /* plus icon */
}

/* ==========================================================================
   Mobile Fullscreen Menu
   ==========================================================================
   Layout when menu is open:
     [topbar]                                       ← stays visible (top:0)
     [header: logo + X close]                       ← becomes fixed; X stays
                                                       exactly where the
                                                       hamburger sat
     [menu panel: items, lang, contact footer]      ← starts BELOW header
   ========================================================================== */
@media screen and (max-width: 991.98px) {
    /* Header height on mobile (padding 20*2 + 50px logo ≈ 90px). Keep in
       sync with .header padding in lawfinity-responsive.css line 264. */
    :root {
        --mobile-header-h: 90px;
    }

    /* Menu panel: starts below topbar + header, fills the rest of the
       viewport. Never overlaps topbar or header.
       Solid background (no backdrop-filter) — the body is locked behind it
       so there's nothing visible to blur, and avoiding backdrop-filter on
       this branch removes any risk of the containing-block side-effects
       (see note on .header below). */
    .navbar-collapse {
        position: fixed !important;
        top: calc(var(--topbar-h, 30px) + var(--mobile-header-h)) !important;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: auto !important;
        background: #0c1230 !important;
        z-index: 9998; /* below header so X sits above */
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 0;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .navbar-collapse.show {
        opacity: 1;
        visibility: visible;
    }

    /* When menu is open, pin the header so its logo + X stay locked to the
       top — and the X is exactly where the hamburger was before opening
       (no jump, no relocate). Topbar stays visible above it (unchanged).
       Background matches the menu panel exactly so the two read as one
       continuous surface.
       NOTE: do NOT add backdrop-filter here. .navbar-collapse is a descendant
       of .header, and backdrop-filter creates a new containing block for any
       fixed descendant — which collapses the menu's top/bottom anchors into
       the header's 90px box and makes the menu invisible. */
    body.mobile-menu-open .header {
        position: fixed !important;
        top: var(--topbar-h, 30px) !important;
        left: 0;
        right: 0;
        z-index: 10000 !important;
        background: #0c1230 !important; /* matches the visual of menu panel's rgba(10,14,42,0.97) over dark page */
    }

    /* Lock body scroll. position:fixed on body is the only reliable lock
       on iOS Safari; CSS-only loss of scroll position is acceptable here. */
    body.mobile-menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* The mobile-menu-logo block inside .navbar-collapse is redundant
       (the .header above already shows the brand) — hide it. */
    .mobile-menu-logo {
        display: none !important;
    }

    /* Close button: stays in its natural place inside .header. We only
       swap the icon from ☰ to ✕ via pseudo-elements — no reposition. */
    .navbar-toggler {
        z-index: 10000;
        position: relative;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }

    /* Suppress the ugly browser focus outline / Bootstrap focus ring on
       tap/click. Keep a subtle keyboard-only focus indicator for a11y. */
    .navbar-toggler:focus,
    .navbar-toggler:active,
    .navbar-toggler:focus:not(:focus-visible) {
        outline: none !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .navbar-toggler:focus-visible {
        outline: 2px solid rgba(212, 168, 83, 0.6);
        outline-offset: 4px;
        border-radius: 4px;
    }

    body.mobile-menu-open .navbar-toggler .navbar-toggler-icon {
        display: none !important;
    }

    body.mobile-menu-open .navbar-toggler::before,
    body.mobile-menu-open .navbar-toggler::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
    }

    body.mobile-menu-open .navbar-toggler::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    body.mobile-menu-open .navbar-toggler::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* Body of menu — items + footer */
    .navbar-collapse .navbar-nav,
    .navbar-collapse .lang-switcher,
    .navbar-collapse .mobile-menu-footer {
        margin-left: 24px !important;
        margin-right: 24px !important;
    }

    .navbar-collapse .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0;
        width: auto;
        padding: 12px 0 0;
    }

    .navbar-collapse .navbar-nav > li {
        width: 100%;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .navbar-collapse .navbar-nav > li:last-child {
        border-bottom: 0 !important;
    }

    /* Top-level link — KILL legacy yellow background from lawfinity-responsive */
    .navbar-collapse .navbar-nav > li > a,
    .navbar-collapse .navbar-nav .nav-item > a {
        background: transparent !important;
        background-color: transparent !important;
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        padding: 16px 4px !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        letter-spacing: 0.2px;
        border-radius: 6px;
        transition: color 0.2s ease, padding-left 0.2s ease, background 0.2s ease;
    }

    .navbar-collapse .navbar-nav > li > a:hover,
    .navbar-collapse .navbar-nav > li > a:focus,
    .navbar-collapse .navbar-nav > li > a.active,
    .navbar-collapse .navbar-nav > li.active > a,
    .navbar-collapse .navbar-nav > li.current-menu-item > a,
    .navbar-collapse .navbar-nav > li.current-menu-parent > a,
    .navbar-collapse .navbar-nav .nav-item > a:hover {
        background: transparent !important;
        background-color: transparent !important;
        color: var(--e-global-color-accent) !important;
        padding-left: 10px !important;
    }

    /* Dropdown chevron */
    .navbar-collapse .navbar-nav .dropdown > a.dropdown-toggle::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: 12px;
        border: solid currentColor;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.25s ease;
        vertical-align: middle;
        flex-shrink: 0;
    }

    .navbar-collapse .navbar-nav .dropdown.show > a.dropdown-toggle::after {
        transform: rotate(-135deg);
    }

    /* Dropdown submenu */
    .navbar-collapse .dropdown-menu.drop-down-content {
        display: none;
        position: static !important;
        box-shadow: none;
        border-radius: 0;
        background: transparent !important;
        padding: 4px 0 12px 12px !important;
        margin: 0 !important;
        border: 0 !important;
        border-left: 2px solid rgba(255, 255, 255, 0.08) !important;
    }

    .navbar-collapse .dropdown-menu.drop-down-content.show {
        display: block;
        animation: cl-dropdown-fade 0.25s ease;
    }

    @keyframes cl-dropdown-fade {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .navbar-collapse .dropdown-menu.drop-down-content li {
        border: 0 !important;
        margin: 0 !important;
    }

    .navbar-collapse .dropdown-menu.drop-down-content li a {
        background: transparent !important;
        background-color: transparent !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.72) !important;
        padding: 9px 10px !important;
        display: block;
        border-radius: 4px;
        transition: color 0.2s ease, padding-left 0.2s ease;
    }

    .navbar-collapse .dropdown-menu.drop-down-content li a:hover,
    .navbar-collapse .dropdown-menu.drop-down-content li a:focus,
    .navbar-collapse .dropdown-menu.drop-down-content li.current-menu-item > a {
        background: transparent !important;
        background-color: transparent !important;
        color: var(--e-global-color-accent) !important;
        padding-left: 16px !important;
    }

    /* Lang switcher — pushed to bottom (above contact footer) via margin-top:auto.
       This pushes lang-switcher + everything after it (the contact footer)
       down to the bottom of the flex column. */
    .navbar-collapse .lang-switcher {
        margin-top: auto !important;
        padding-top: 24px;
        padding-bottom: 18px;
        justify-content: center;
        gap: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        margin-left: 24px !important;
        margin-right: 24px !important;
    }

    .navbar-collapse .lang-switcher .lang-btn {
        opacity: 0.75;
    }

    .navbar-collapse .lang-switcher .lang-btn.active,
    .navbar-collapse .lang-switcher .lang-btn:hover {
        opacity: 1;
    }

    /* Contact footer — directly below lang switcher */
    .mobile-menu-footer {
        margin-top: 0 !important;
        padding: 18px 0 36px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .mobile-menu-contact {
        display: flex;
        align-items: center;
        gap: 14px;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        font-size: 15px;
        padding: 6px 4px;
        border-radius: 6px;
        transition: color 0.2s ease, padding-left 0.2s ease;
    }

    .mobile-menu-contact:hover,
    .mobile-menu-contact:focus {
        color: var(--e-global-color-accent);
        padding-left: 10px;
    }

    .mobile-menu-contact i {
        width: 22px;
        text-align: center;
        color: var(--e-global-color-accent);
        font-size: 16px;
    }
}

/* Dropdown visual fixes */
[data-toggle="dropdown"],
[data-bs-toggle="dropdown"] {
    cursor: pointer;
}

/* Tab visual fixes */
[data-toggle="tab"].active,
[data-bs-toggle="tab"].active {
    color: var(--e-global-color-accent, #0F1D2F);
    border-bottom-color: var(--e-global-color-accent, #0F1D2F);
}

/* Modal backdrop */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}


/* ==========================================================================
   15. Visual Polish & Refinements
   ========================================================================== */

/* --- Hero flag icons row --- */
.hero-flag-icons {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.hero-flag-icons svg {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    vertical-align: middle;
}

/* Om os section — flag row */
.lang-flag-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 24px;
    padding: 10px 18px;
    background: var(--e-global-color-light-grayish-orange, #f8f5f0);
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.06);
    width: fit-content;
}
@media screen and (max-width: 991px) {
    .lang-flag-row {
        margin-left: auto;
        margin-right: auto;
    }
}

.lang-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.lang-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* --- Testimonials / Reviews section: heading on one line --- */
.testimonial-redesigned .content h2 {
    white-space: nowrap;
    font-size: 32px;
}

/* --- Testimonials: quote icon bigger + properly centered --- */
.testimonial-redesigned .testimonial-quote {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.testimonial-redesigned .testimonial-quote i {
    font-size: 36px;
    line-height: 1;
}

/* ==========================================================================
   Blog Preview Cards (front page + archive)
   ========================================================================== */

.blog-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.blog-card-image {
    display: block;
    height: 200px;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-body {
    padding: 22px 24px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 12px;
}

.blog-card-cat {
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary);
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-card-date {
    color: #888;
    font-size: 12px;
}

.blog-card-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

.blog-card-title a {
    color: var(--e-global-color-primary);
    transition: color 0.2s ease;
}

.blog-card-title a:hover {
    color: var(--e-global-color-accent);
}

.blog-card-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 14px;
    flex: 1;
}

.blog-card-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--e-global-color-accent);
    text-decoration: none;
    transition: gap 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-card-link:hover {
    gap: 10px;
    color: var(--e-global-color-accent);
}

/* Blog filter pills */
.blog-filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.blog-pill {
    display: inline-block;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 30px;
    border: 1px solid var(--e-global-color-accent);
    color: var(--e-global-color-accent);
    background: transparent;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-pill.active,
.blog-pill:hover {
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary);
}

/* Blog single post */
.blog-single-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
}

.blog-single-date,
.blog-single-reading {
    color: #888;
}

.blog-single-content {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

.blog-single-content h2 {
    font-size: 24px;
    margin-top: 32px;
    margin-bottom: 16px;
}

.blog-single-content h3 {
    font-size: 20px;
    margin-top: 28px;
    margin-bottom: 12px;
}

.blog-single-content p {
    margin-bottom: 18px;
}

.blog-single-content ul,
.blog-single-content ol {
    margin-bottom: 18px;
    padding-left: 24px;
}

.blog-single-content li {
    margin-bottom: 6px;
}

/* Tags */
.blog-tag {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    background: #f0f0f0;
    border-radius: 20px;
    text-decoration: none;
    margin-right: 6px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.blog-tag:hover {
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary);
}

/* Share buttons */
.blog-single-share {
    display: flex;
    align-items: center;
    gap: 16px;
}

.blog-share-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--e-global-color-primary);
}

.blog-share-buttons {
    display: flex;
    gap: 8px;
}

.blog-share-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
    color: var(--e-global-color-primary);
    text-decoration: none;
    font-size: 15px;
    transition: all 0.2s ease;
}

.blog-share-btn:hover {
    background: var(--e-global-color-accent);
    color: #fff;
}

/* Blog sidebar (sticky) */
.blog-sidebar {
    position: sticky;
    top: 100px;
}

.blog-sidebar-cta {
    background: var(--e-global-color-primary);
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    margin-bottom: 24px;
}

.blog-sidebar-cta h4 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 10px;
}

.blog-sidebar-cta p {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    margin-bottom: 18px;
}

.blog-sidebar-btn {
    display: block;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.blog-sidebar-btn.primary {
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary);
}

.blog-sidebar-btn.primary:hover {
    background: #c49a48;
}

.blog-sidebar-btn.outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
}

.blog-sidebar-btn.outline:hover {
    border-color: #fff;
}

.blog-sidebar-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.blog-sidebar-card h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--e-global-color-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

/* Recent posts in sidebar */
.blog-sidebar-post {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    transition: opacity 0.2s;
}

.blog-sidebar-post:last-child {
    border-bottom: none;
}

.blog-sidebar-post:hover {
    opacity: 0.8;
}

.blog-sidebar-post-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.blog-sidebar-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-sidebar-post-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--e-global-color-primary);
    line-height: 1.4;
}

.blog-sidebar-post-date {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* Sidebar areas list */
.blog-sidebar-areas {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-sidebar-areas li {
    border-bottom: 1px solid #f0f0f0;
}

.blog-sidebar-areas li:last-child {
    border-bottom: none;
}

.blog-sidebar-areas a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    color: var(--e-global-color-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-sidebar-areas a:hover {
    color: var(--e-global-color-accent);
}

.blog-sidebar-areas a i {
    font-size: 11px;
    color: var(--e-global-color-accent);
}

/* --- Practice cards: remove hover bg image, use solid accent color --- */
.practice-con .box::before {
    background-image: none !important;
    background: var(--e-global-color-primary) !important;
    opacity: 0 !important;
}

.practice-con .box:hover::before {
    opacity: 0 !important;
}

.practice-con .box:hover {
    background-color: var(--e-global-color-accent);
}

/* --- Committed-box (arbejdsområder cards): subtle hover color --- */
.committed-con .committed-box:hover {
    background: var(--e-global-color-accent);
    border-color: var(--e-global-color-accent);
}

.committed-con .committed-box:hover h5,
.committed-con .committed-box:hover i {
    color: var(--e-global-color-white) !important;
}

.committed-con .committed-box:hover .icon i {
    color: var(--e-global-color-white) !important;
}

/* --- Footer CTA bar: sits between violence-con and footer, overlapping both --- */
.footer-cta-bar {
    position: relative;
    z-index: 10;
    pointer-events: none;
}

.footer-cta-bar .container {
    position: relative;
}

.footer-cta-bar .upper_portion {
    pointer-events: auto;
    position: absolute;
    width: 100%;
    padding: 45px 55px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
}

.footer-cta-bar .upper_portion h6 {
    font-size: 12px;
    line-height: 12px;
    margin-bottom: 14px;
}

.footer-cta-bar .upper_portion h6::before {
    background: var(--e-global-color-white);
}

.footer-cta-bar .upper_portion .span_borderbootom {
    border-bottom: 1px solid var(--e-global-color-white);
}

.footer-cta-bar .upper_portion .appointment {
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    padding: 20px 32px 22px;
    border-radius: 50px;
    color: var(--e-global-color-very-dark-black-blue, #202226);
    background: var(--e-global-color-white, #ffffff);
    border: 1px solid var(--e-global-color-white, #ffffff);
    transition: all 0.3s ease-in-out;
}

.footer-cta-bar .upper_portion .appointment i {
    font-size: 14px;
    margin-left: 18px;
    color: var(--e-global-color-very-dark-black-blue, #202226);
    transition: all 0.3s ease-in-out;
}

.footer-cta-bar .upper_portion .appointment:hover {
    color: var(--e-global-color-white, #ffffff);
    background: var(--e-global-color-very-dark-black-blue, #202226);
    border-color: var(--e-global-color-very-dark-black-blue, #202226);
}

.footer-cta-bar .upper_portion .appointment:hover i {
    color: var(--e-global-color-white, #ffffff);
}

/* Override AOS transforms for the footer CTA bar only */
.footer-cta-bar .upper_portion[data-aos^=fade] {
    transform: translate3d(0, calc(-50% + 100px), 0) !important;
    opacity: 0;
    transition-property: opacity, transform;
}

.footer-cta-bar .upper_portion[data-aos^=fade].aos-animate {
    transform: translate3d(0, -50%, 0) !important;
    opacity: 1;
}

/* --- Process Steps / Timeline --- */
.process-section {
    padding: 120px 0;
    background: var(--e-global-color-light-grayish-orange, #f8f5f0);
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.process-step {
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.process-step-number {
    color: var(--e-global-color-accent);
    font-weight: 800;
}

.process-step-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: var(--e-global-color-primary, #0F1D2F);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
    z-index: 2;
}

.process-step-icon i {
    font-size: 2rem;
    color: var(--e-global-color-accent);
}

/* Connector line between steps */
.process-step-connector {
    position: absolute;
    top: 40px;
    left: calc(50% + 40px);
    width: calc(100% - 80px);
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--e-global-color-accent) 0,
        var(--e-global-color-accent) 6px,
        transparent 6px,
        transparent 12px
    );
    z-index: 1;
}

.process-step:last-child .process-step-connector {
    display: none;
}

.process-step-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--e-global-color-primary);
    margin-bottom: 8px;
}

.process-step-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--e-global-color-text);
    margin-bottom: 0;
}

/* Mobile: vertical centered timeline */
@media (max-width: 767px) {
    .process-timeline {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 360px;
        margin: 0 auto;
    }

    .process-step {
        display: grid;
        grid-template-columns: 64px 1fr;
        grid-template-rows: auto auto;
        column-gap: 16px;
        text-align: left;
        padding: 0;
        align-items: start;
    }

    .process-step-icon {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 64px;
        height: 64px;
        border-radius: 16px;
        margin: 0;
    }

    .process-step-icon i {
        font-size: 1.6rem;
    }

    .process-step-title {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 2px;
        font-size: 16px;
    }

    .process-step-desc {
        grid-column: 2;
        grid-row: 2;
        font-size: 13px;
    }

    .process-step-connector {
        display: none;
    }
}

/* Tablet: 2x2 grid */
@media (min-width: 768px) and (max-width: 991px) {
    .process-timeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 0;
    }

    .process-step-connector {
        display: none;
    }
}

/* --- Testimonial section: mobile fixes --- */
@media (max-width: 991px) {
    .testimonial-redesigned .content {
        padding: 0 !important;
        margin-bottom: 20px !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .testimonial-redesigned .testimonial-quote {
        position: relative !important;
        left: auto !important;
        margin-bottom: 12px;
    }

    .testimonial-redesigned .content h2 {
        white-space: normal;
        font-size: 26px;
        text-align: center;
    }

    .testimonial-redesigned .testimonial-google-badge {
        justify-content: center;
    }

    .testimonial-redesigned .testimonial_content {
        text-align: center;
        padding: 60px 20px !important;
    }

    .testimonial-redesigned .testimonial_content p {
        text-align: center;
        max-width: none;
        padding: 0 !important;
        margin-bottom: 20px;
    }

    .testimonial-redesigned .review-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center;
    }

    .testimonial-redesigned .review-content .detail {
        text-align: center;
        width: 100%;
    }

    .testimonial-redesigned .review-content .detail .name,
    .testimonial-redesigned .review-content .detail .position {
        display: block;
        text-align: center;
    }

    .testimonial-redesigned .owl-carousel .owl-nav {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        justify-content: center;
        margin-top: 16px !important;
    }

    .testimonial-redesigned .testimonial-cta-btn {
        display: block;
        text-align: center;
        margin: 24px auto 0;
    }
}


/* --- Violence-con + footer CTA bar: mobile fixes --- */
@media (max-width: 767px) {
    .violence-con .violence_content h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .violence-con {
        padding-bottom: 140px !important;
    }

    .violence-con .violence_content a,
    .violence-con .violence_content .appointment-whatsapp {
        display: block;
        width: 260px;
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .violence-con .violence_content a + a,
    .violence-con .violence_content .appointment-whatsapp {
        margin-top: 12px;
        margin-left: auto !important;
    }

    .footer-cta-bar .upper_portion {
        padding: 28px 24px !important;
        flex-direction: column;
        text-align: center;
        gap: 16px;
        left: 0;
        right: 0;
        width: auto !important;
        margin: 0 16px;
        box-sizing: border-box;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .violence-con .violence_content h1 {
        font-size: 34px !important;
    }

    .violence-con {
        padding-bottom: 80px !important;
    }
}

/* --- Sub-banner: smaller h1 + breadcrumbs on mobile --- */
@media (max-width: 575px) {
    .sub_banner .sub_banner_con h1,
    .sub_banner .sub_banner_content h1 {
        font-size: 24px !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sub_banner .sub_banner_con .box,
    .sub_banner .sub_banner_content .box {
        font-size: 11px !important;
        padding: 6px 12px 8px !important;
    }

    .sub_banner .sub_banner_con .box span,
    .sub_banner .sub_banner_content .box span,
    .sub_banner .sub_banner_con .box a span,
    .sub_banner .sub_banner_content .box a span {
        font-size: 11px !important;
    }

    .sub_banner .sub_banner_con .box .arrow,
    .sub_banner .sub_banner_content .box .arrow {
        font-size: 8px !important;
        margin: 0 4px !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .sub_banner .sub_banner_con h1,
    .sub_banner .sub_banner_content h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .sub_banner .sub_banner_con .box,
    .sub_banner .sub_banner_content .box {
        font-size: 12px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .sub_banner .sub_banner_con h1,
    .sub_banner .sub_banner_content h1 {
        font-size: 34px !important;
        line-height: 1.2 !important;
    }

    .sub_banner .sub_banner_con .box,
    .sub_banner .sub_banner_content .box {
        font-size: 13px !important;
    }
}

/* --- Contact section: less padding on mobile --- */
@media (max-width: 767px) {
    .contact-section {
        padding: 60px 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .contact-section {
        padding: 80px 0 !important;
    }
}

/* --- Mobile: force all AOS animations to fade-up (prevent horizontal overflow) --- */
@media (max-width: 991px) {
    [data-aos="fade-left"],
    [data-aos="fade-right"] {
        transform: translate3d(0, 50px, 0) !important;
        opacity: 0;
    }

    [data-aos="fade-left"].aos-animate,
    [data-aos="fade-right"].aos-animate {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1;
    }
}

/* Prevent horizontal overflow globally */
html, body {
    overflow-x: hidden;
}

/* --- Footer contact items: each on own line --- */
.footer-con .middle_portion .icon .text {
    display: block;
    width: 100%;
}

/* --- Social Proof Ticker --- */
.social-proof-ticker {
    background: var(--e-global-color-very-dark-black-blue, #0a0e2a);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
}

.ticker-track {
    display: inline-flex;
    animation: tickerScroll 40s linear infinite;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 40px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.ticker-item i {
    color: var(--e-global-color-accent);
    font-size: 16px;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Tak page — area cards */
.tak-area-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 28px 16px;
    text-align: center;
    transition: all 0.3s;
    height: 100%;
    min-height: 120px;
}

.tak-area-card:hover {
    border-color: var(--e-global-color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.tak-area-card i {
    font-size: 2.2rem;
    color: var(--e-global-color-accent);
    margin-bottom: 10px;
}

.tak-area-card span {
    color: var(--e-global-color-primary);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

/* (Old callback-float rules removed — replaced by .fab system) */

/* --- Scroll Progress Bar --- */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: var(--e-global-color-accent);
    z-index: 99999;
    transition: width 0.05s linear;
}

/* --- File upload zone --- */
.file-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed rgba(0,0,0,0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    gap: 4px;
}

.file-upload-zone:hover {
    border-color: var(--e-global-color-accent);
    background: rgba(212, 168, 83, 0.04);
}

.file-upload-zone.has-file {
    border-color: var(--e-global-color-accent);
    border-style: solid;
    background: rgba(212, 168, 83, 0.06);
}

.file-upload-zone i {
    font-size: 24px;
    color: var(--e-global-color-accent);
}

.file-upload-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--e-global-color-primary);
}

.file-upload-hint {
    font-size: 12px;
    color: #999;
}

.file-upload-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--e-global-color-accent);
    margin-top: 4px;
}

/* --- FAQ Page --- */
/* ==========================================================================
   FAQ PAGE — sidebar layout with light cards
   ========================================================================== */
.faq-page {
    padding: 80px 0 100px;
    background: #fafbfc;
}

/* Intro centered above the layout */
.faq-page__intro {
    max-width: 680px;
    margin: 0 auto 40px;
    text-align: center;
}

.faq-page__lead {
    font-size: 16px;
    line-height: 1.6;
    color: var(--e-global-color-text);
    margin-bottom: 8px;
}

.faq-page__stats {
    font-size: 13px;
    font-weight: 600;
    color: var(--e-global-color-accent);
    letter-spacing: 0.3px;
    margin: 0;
}

.faq-page__empty {
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
    color: var(--e-global-color-text);
}

/* Two-column layout */
.faq-layout {
    --faq-gap: 32px;
}

/* ==========================================================================
   Sidebar (desktop, lg+)
   ========================================================================== */
.faq-sidebar {
    position: sticky;
    top: 110px; /* clear of fixed header + topbar */
    padding: 24px;
    background: #fff;
    border: 1px solid rgba(15, 29, 47, 0.08);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(15, 29, 47, 0.04);
}

.faq-sidebar__search {
    position: relative;
    margin-bottom: 24px;
}

.faq-sidebar__search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.faq-sidebar__title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
    padding-left: 4px;
}

.faq-sidebar__cats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Shared category link styling (sidebar + mobile) */
.faq-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--e-global-color-primary);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.faq-cat-link:hover {
    background: rgba(15, 29, 47, 0.04);
}

.faq-cat-link.is-active {
    background: var(--e-global-color-primary);
    color: #fff;
    font-weight: 600;
}

.faq-cat-link.is-active .faq-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Count pill */
.faq-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: rgba(15, 29, 47, 0.06);
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

/* ==========================================================================
   Mobile bar (sticky search + collapsible category list)
   ========================================================================== */
.faq-mobile-bar {
    position: sticky;
    top: 80px;
    z-index: 20;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 29, 47, 0.08);
    padding: 10px;
    margin-bottom: 24px;
}

.faq-mobile-bar__row {
    display: flex;
    gap: 8px;
}

.faq-mobile-bar__search {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.faq-mobile-bar__search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.faq-mobile-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--e-global-color-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.faq-mobile-bar__toggle:hover {
    background: #1a2940;
}

.faq-mobile-bar__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.faq-mobile-bar__toggle .faq-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.faq-mobile-bar__chevron {
    font-size: 10px;
    transition: transform 0.2s;
}

.faq-mobile-bar__toggle[aria-expanded="true"] .faq-mobile-bar__chevron {
    transform: rotate(180deg);
}

.faq-mobile-bar__cats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 4px 4px;
    margin-top: 8px;
    border-top: 1px solid rgba(15, 29, 47, 0.06);
    max-height: 60vh;
    overflow-y: auto;
}

/* ==========================================================================
   Shared search input (sidebar + mobile)
   ========================================================================== */
.faq-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border-radius: 10px;
    border: 1px solid rgba(15, 29, 47, 0.10);
    background: #f8fafc;
    font-size: 14px;
    color: var(--e-global-color-primary);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.15s;
}

.faq-search-input:focus {
    outline: none;
    border-color: var(--e-global-color-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15);
}

.faq-search-input::placeholder {
    color: #94a3b8;
}

.faq-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 29, 47, 0.08);
    color: var(--e-global-color-primary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-search-clear:hover {
    background: rgba(15, 29, 47, 0.15);
}

/* ==========================================================================
   FAQ Category section
   ========================================================================== */
.faq-category {
    margin-bottom: 48px;
    scroll-margin-top: 100px;
}

.faq-category:last-child {
    margin-bottom: 0;
}

.faq-category__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(15, 29, 47, 0.10);
}

.faq-category__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--e-global-color-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.faq-category__count {
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
    text-transform: lowercase;
}

.faq-category__description {
    color: var(--e-global-color-text);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 20px;
}

/* ==========================================================================
   FAQ Items — light cards
   ========================================================================== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    background: #fff;
    border: 1px solid rgba(15, 29, 47, 0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.2s;
}

.faq-item:hover {
    border-color: rgba(15, 29, 47, 0.16);
}

.faq-item__header {
    margin: 0;
}

.faq-item__question.accordion-button {
    width: 100%;
    padding: 18px 56px 18px 22px;
    background: #fff;
    color: var(--e-global-color-primary);
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    border: none;
    border-radius: 12px;
    box-shadow: none !important;
    transition: background 0.15s, color 0.15s;
    line-height: 1.45;
}

.faq-item__question.accordion-button:hover {
    background: #fafbfc;
}

.faq-item__question.accordion-button:not(.collapsed) {
    background: #fff;
    color: var(--e-global-color-primary);
    border-radius: 12px 12px 0 0;
}

.faq-item__question.accordion-button::after {
    width: 18px;
    height: 18px;
    background-size: 18px;
    /* Use a custom chevron in the accent color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23D4A853'%3E%3Cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3E%3C/svg%3E");
    transition: transform 0.25s ease;
    position: absolute;
    right: 22px;
    top: 50%;
    margin-top: -9px;
}

.faq-item__question.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.faq-item__answer.accordion-collapse {
    background: #fff;
    border-radius: 0 0 12px 12px;
}

.faq-item__answer-inner.accordion-body {
    padding: 4px 22px 24px;
    color: var(--e-global-color-text);
    font-size: 14px;
    line-height: 1.75;
    background: transparent;
    border: none;
}

.faq-item__answer-inner.accordion-body p {
    margin-bottom: 12px;
}

.faq-item__answer-inner.accordion-body p:last-child {
    margin-bottom: 0;
}

.faq-item__answer-inner.accordion-body a {
    color: var(--e-global-color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.faq-item__answer-inner.accordion-body a:hover {
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   No results state
   ========================================================================== */
.faq-no-results {
    background: #fff;
    border: 1px dashed rgba(15, 29, 47, 0.16);
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
}

.faq-no-results__icon {
    font-size: 32px;
    color: var(--e-global-color-accent);
    opacity: 0.6;
    margin-bottom: 12px;
}

.faq-no-results__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--e-global-color-primary);
    margin: 0 0 6px;
}

.faq-no-results__text {
    font-size: 14px;
    color: var(--e-global-color-text);
    margin: 0 0 16px;
}

.faq-no-results__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--e-global-color-primary);
    color: #fff;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.faq-no-results__cta:hover {
    background: #1a2940;
    color: #fff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    .faq-page {
        padding: 32px 0 80px;
    }
    .faq-page__intro {
        margin-bottom: 20px;
    }
}

@media (max-width: 640px) {
    .faq-category__title {
        font-size: 18px;
    }
    .faq-item__question.accordion-button {
        font-size: 15px;
        padding: 16px 50px 16px 18px;
    }
    .faq-item__question.accordion-button::after {
        right: 18px;
    }
    .faq-item__answer-inner.accordion-body {
        padding: 4px 18px 20px;
    }
}

/* --- FAQ "See more" link on arbejdsomrade pages (kept from old) --- */
.faq-see-more-wrap {
    margin-top: 24px;
    text-align: center;
}

.faq-see-more-link {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    border-radius: 30px;
    background: transparent;
    border: 2px solid var(--e-global-color-accent);
    color: var(--e-global-color-primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.faq-see-more-link:hover {
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(10, 14, 42, 0.12);
}

/* --- FAQ Accordion on OTHER pages (arbejdsomrade etc.) — keeps original dark style --- */
.faq-con .faq_content h2 {
    font-size: 24px;
    margin-bottom: 28px;
}

.faq-con .faq_content h2 i {
    color: var(--e-global-color-accent);
}

.faq-con .accordion .accordion-item {
    border: none;
    border-radius: 16px !important;
    margin-bottom: 12px;
    background: var(--e-global-color-very-dark-black-blue, #0a0e2a);
    overflow: hidden;
}

.faq-con .accordion .accordion-button {
    background: var(--e-global-color-very-dark-black-blue, #0a0e2a);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 20px 24px;
    border: none;
    box-shadow: none !important;
    transition: background 0.3s ease;
}

.faq-con .accordion .accordion-button:not(.collapsed) {
    background: var(--e-global-color-primary, #0F1D2F);
    color: var(--e-global-color-accent);
}

.faq-con .accordion .accordion-button::after {
    filter: brightness(0) invert(1);
    width: 16px;
    height: 16px;
    background-size: 16px;
}

.faq-con .accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(0.7) sepia(1) hue-rotate(10deg) saturate(5);
}

.faq-con .accordion .accordion-body {
    background: var(--e-global-color-primary, #0F1D2F);
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.8;
    padding: 0 24px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-con .accordion .accordion-header {
    margin-bottom: 0;
}

/* --- Arbejdsomrade: smaller content text --- */
.area-content h1,
.area-content h2 {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 16px;
}

.area-content h3 {
    font-size: 22px;
    line-height: 1.3;
}

.area-content p,
.area-content li {
    font-size: 15px;
    line-height: 1.75;
}

/* --- Arbejdsomrade: sticky sidebar --- */
.area-sidebar {
    position: sticky;
    top: 100px;
}

/* --- Arbejdsomrade CTA button --- */
.area-cta-btn {
    display: inline-block;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
    padding: 20px 32px 22px;
    border-radius: 30px;
    color: var(--e-global-color-white, #fff);
    background: var(--e-global-color-accent, #D4A853);
    transition: all 0.3s ease-in-out;
}

.area-cta-btn:hover {
    background: var(--e-global-color-primary, #0F1D2F);
    color: var(--e-global-color-white, #fff);
}

.area-cta-btn i {
    color: var(--e-global-color-white, #fff);
    transition: all 0.3s ease-in-out;
}

/* --- Violence-con (CTA section): smaller heading to fit 2 lines + WhatsApp button --- */
.violence-con .violence_content h1 {
    font-size: 42px;
    line-height: 1.2;
}

/* WhatsApp button in violence-con — ensure green overrides lawfinity link styles */
.violence-con .violence_content .appointment-whatsapp {
    background: #25d366;
    color: #fff;
    border: none;
    max-height: 59px;
    box-sizing: border-box;
}

.violence-con .violence_content .appointment-whatsapp i {
    font-size: 22px;
    color: #fff;
    margin-left: 0;
}

.violence-con .violence_content .appointment-whatsapp:hover {
    background: #1da851;
    color: #fff;
}

/* Succeed-box cards: prevent overflow on mobile */
@media screen and (max-width: 767px) {
    .succeed-con .succeed-box {
        max-width: 100%;
        overflow: hidden;
    }
    .succeed-con .succeed-box .text {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   Ordbog — Juridisk ordbog (FAQ-style sidebar + sticky alphabet)
   ========================================================================== */
.ordbog-page {
    padding: 80px 0 100px;
    background: #fafbfc;
}

/* Intro */
.ordbog-page__intro {
    max-width: 760px;
    margin: 0 auto 24px;
    text-align: center;
}
.ordbog-page__eyebrow {
    color: var(--e-global-color-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 12px;
    margin-bottom: 10px;
}
.ordbog-page__title {
    margin: 0 0 12px;
    font-size: 36px;
    line-height: 1.2;
    color: var(--e-global-color-primary);
}
.ordbog-page__lead {
    font-size: 15px;
    line-height: 1.6;
    color: var(--e-global-color-text);
    margin: 0;
}

/* Alphabet strip — single row, sticky, horizontal scroll fallback */
.ordbog-alphabet-wrap {
    position: sticky;
    top: 100px;
    z-index: 30;
    background: #fafbfc;
    padding: 8px 0;
    margin: 0 -12px 20px;
}
.ordbog-alphabet {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid rgba(15, 29, 47, 0.08);
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.ordbog-alphabet::-webkit-scrollbar { height: 4px; }
.ordbog-alphabet::-webkit-scrollbar-thumb { background: rgba(15, 29, 47, 0.15); border-radius: 2px; }

.ordbog-letter {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--e-global-color-primary);
    font-weight: 700;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
    padding: 0;
}
.ordbog-letter:not(.is-empty):hover {
    background: rgba(15, 29, 47, 0.05);
    color: var(--e-global-color-primary);
}
.ordbog-letter.is-active {
    background: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    color: #fff;
}
.ordbog-letter.is-empty {
    opacity: 0.3;
    cursor: not-allowed;
}
.ordbog-letter--all {
    width: auto;
    min-width: 56px;
    padding: 0 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Layout */
.ordbog-layout {
    --ordbog-gap: 32px;
}

/* Sidebar (desktop only) */
.ordbog-sidebar {
    position: sticky;
    top: 180px;
    padding: 24px;
    background: #fff;
    border: 1px solid rgba(15, 29, 47, 0.08);
    border-radius: 16px;
    box-shadow: 0 1px 4px rgba(15, 29, 47, 0.04);
}
.ordbog-sidebar__search {
    position: relative;
    margin-bottom: 24px;
}
.ordbog-sidebar__search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}
.ordbog-sidebar__title {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 12px;
    padding-left: 4px;
}
.ordbog-sidebar__cats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Category link (shared sidebar + mobile) */
.ordbog-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--e-global-color-primary);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.ordbog-cat-link:hover {
    background: rgba(15, 29, 47, 0.04);
}
.ordbog-cat-link.is-active {
    background: var(--e-global-color-primary);
    color: #fff;
    font-weight: 600;
}
.ordbog-cat-link.is-active .ordbog-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* Count pill */
.ordbog-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    background: rgba(15, 29, 47, 0.06);
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

/* Mobile bar */
.ordbog-mobile-bar {
    position: sticky;
    top: 160px;  /* below the sticky alphabet (top:100 + ~50px) */
    z-index: 20;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15, 29, 47, 0.08);
    padding: 10px;
    margin-bottom: 20px;
}
.ordbog-mobile-bar__row {
    display: flex;
    gap: 8px;
}
.ordbog-mobile-bar__search {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}
.ordbog-mobile-bar__search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}
.ordbog-mobile-bar__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: var(--e-global-color-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.ordbog-mobile-bar__toggle .ordbog-pill {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.ordbog-mobile-bar__chevron {
    font-size: 10px;
    transition: transform 0.2s;
}
.ordbog-mobile-bar__toggle[aria-expanded="true"] .ordbog-mobile-bar__chevron {
    transform: rotate(180deg);
}
.ordbog-mobile-bar__cats {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 4px 4px;
    margin-top: 8px;
    border-top: 1px solid rgba(15, 29, 47, 0.06);
    max-height: 50vh;
    overflow-y: auto;
}

/* Search input */
.ordbog-search-input {
    width: 100%;
    padding: 12px 40px 12px 40px;
    border-radius: 10px;
    border: 1px solid rgba(15, 29, 47, 0.10);
    background: #f8fafc;
    font-size: 14px;
    color: var(--e-global-color-primary);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.15s;
}
.ordbog-search-input:focus {
    outline: none;
    border-color: var(--e-global-color-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15);
}
.ordbog-search-input::placeholder { color: #94a3b8; }

.ordbog-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 29, 47, 0.08);
    color: var(--e-global-color-primary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ordbog-search-clear:hover {
    background: rgba(15, 29, 47, 0.15);
}

/* Result count */
.ordbog-result-count {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 16px;
}

/* Letter group + heading (no badge now) */
.ordbog-letter-group {
    margin-bottom: 40px;
    scroll-margin-top: 200px; /* clear topbar + header + alphabet */
}
.ordbog-letter-heading {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 8px 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(15, 29, 47, 0.08);
}
.ordbog-letter-heading__text {
    font-size: 22px;
    font-weight: 700;
    color: var(--e-global-color-primary);
    letter-spacing: -0.01em;
}
.ordbog-letter-count {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Cards — no letter badge, cleaner layout */
.ordbog-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid rgba(15, 29, 47, 0.08);
    border-radius: 14px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    height: 100%;
    color: var(--e-global-color-primary);
}
.ordbog-card:hover {
    border-color: var(--e-global-color-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 29, 47, 0.08);
    color: var(--e-global-color-primary);
}
.ordbog-card-body { flex: 1; min-width: 0; }
.ordbog-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--e-global-color-primary);
    margin: 0 0 4px;
    line-height: 1.3;
}
.ordbog-card-short {
    font-size: 13px;
    color: #475569;
    margin: 0 0 6px;
    line-height: 1.5;
}
.ordbog-card-syn {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ordbog-card-syn i { color: var(--e-global-color-accent); font-size: 10px; }
.ordbog-card-arrow {
    flex: 0 0 auto;
    color: #c5cbd5;
    transition: color 0.2s, transform 0.2s;
}
.ordbog-card:hover .ordbog-card-arrow {
    color: var(--e-global-color-accent);
    transform: translateX(3px);
}

/* Empty state */
.ordbog-empty {
    text-align: center;
    padding: 60px 20px;
    color: #475569;
}
.ordbog-empty__icon {
    font-size: 3rem;
    color: var(--e-global-color-accent);
}
.ordbog-empty h3 {
    margin: 14px 0 8px;
    font-size: 22px;
    color: var(--e-global-color-primary);
}
.ordbog-empty p { font-size: 14px; margin: 0; }

/* Responsive */
@media (max-width: 991px) {
    .ordbog-page { padding: 30px 0 80px; }
    .ordbog-page__title { font-size: 28px; }
    .ordbog-alphabet-wrap { top: 95px; }
    .ordbog-letter { width: 30px; height: 30px; font-size: 12px; }
    .ordbog-letter--all { min-width: 48px; padding: 0 10px; font-size: 11px; }
}

@media (max-width: 575px) {
    .ordbog-page__title { font-size: 24px; }
    .ordbog-mobile-bar__toggle-label span:not(.ordbog-pill) { display: none; }
}

/* ---- Single: term hero ---- */
.ordbog-term-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}
.ordbog-term-letter {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--e-global-color-primary);
    color: var(--e-global-color-accent);
    font-size: 30px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(15, 29, 47, 0.15);
}
.ordbog-term-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ordbog-cat-tag {
    background: rgba(212, 168, 83, 0.12);
    color: var(--e-global-color-primary);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(212, 168, 83, 0.4);
    transition: background 0.2s ease;
}
.ordbog-cat-tag:hover {
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary);
}
.ordbog-short-def {
    font-size: 19px;
    line-height: 1.55;
    color: var(--e-global-color-primary);
    margin: 18px 0 18px;
    padding: 20px 24px;
    border-left: 4px solid var(--e-global-color-accent);
    background: linear-gradient(90deg, rgba(212, 168, 83, 0.08), transparent);
    border-radius: 0 12px 12px 0;
    font-weight: 500;
}
.ordbog-synonyms-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.ordbog-synonyms-label {
    font-size: 13px;
    color: #6b7588;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ordbog-synonyms-label i { color: var(--e-global-color-accent); }
.ordbog-synonym-chip {
    background: #fff;
    border: 1px solid #e4e7ec;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--e-global-color-primary);
}

/* ---- Single: main content ---- */
.ordbog-content {
    background: #fff;
    padding: 36px 40px;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(15, 29, 47, 0.04);
}
.ordbog-content h2 {
    font-size: 24px;
    color: var(--e-global-color-primary);
    margin: 28px 0 14px;
}
.ordbog-content h2:first-child { margin-top: 0; }
.ordbog-content h3 {
    font-size: 19px;
    color: var(--e-global-color-primary);
    margin: 22px 0 10px;
}
.ordbog-content p { font-size: 16px; line-height: 1.7; color: #2c3a50; }
.ordbog-content ul, .ordbog-content ol { padding-left: 22px; }
.ordbog-content li { font-size: 16px; line-height: 1.7; color: #2c3a50; margin-bottom: 6px; }
.ordbog-content a {
    color: var(--e-global-color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ordbog-content a:hover { color: var(--e-global-color-primary); }

.ordbog-updated {
    margin: 30px 0 0;
    padding-top: 20px;
    border-top: 1px solid #eef0f3;
    color: #8a93a3;
    font-size: 13px;
}
.ordbog-updated i { color: var(--e-global-color-accent); margin-right: 6px; }

.ordbog-back {
    margin-top: 22px;
}
.ordbog-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--e-global-color-accent);
    font-weight: 700;
    font-size: 14px;
}
.ordbog-back a:hover { color: var(--e-global-color-primary); }

/* ---- Single: sidebar ---- */
.ordbog-sidebar {
    position: sticky;
    top: 100px;
}
.ordbog-side-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px 22px;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(15, 29, 47, 0.04);
}
.ordbog-side-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--e-global-color-primary);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ordbog-side-title i { color: var(--e-global-color-accent); font-size: 18px; }
.ordbog-side-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f3;
}
.ordbog-side-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ordbog-side-label {
    font-size: 11px;
    color: #8a93a3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.ordbog-side-value {
    font-size: 14px;
    color: var(--e-global-color-primary);
    font-weight: 600;
}

.ordbog-area-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(212, 168, 83, 0.08);
    border-radius: 12px;
    color: var(--e-global-color-primary);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ordbog-area-link:hover {
    background: rgba(212, 168, 83, 0.18);
    transform: translateX(3px);
    color: var(--e-global-color-primary);
}
.ordbog-area-link > i:first-child {
    font-size: 22px;
    color: var(--e-global-color-accent);
}

/* CTA card */
.ordbog-side-cta {
    background: var(--e-global-color-primary);
    color: #fff;
    text-align: center;
}
.ordbog-side-cta-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 10px;
}
.ordbog-side-cta-text {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 18px;
}
.ordbog-side-cta-btn {
    display: block;
    padding: 13px 20px;
    background: var(--e-global-color-accent);
    color: var(--e-global-color-primary) !important;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ordbog-side-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(212, 168, 83, 0.35);
    color: var(--e-global-color-primary) !important;
}
.ordbog-side-cta-btn i { margin-left: 8px; }
.ordbog-side-cta-phone {
    display: block;
    padding: 12px 20px;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff !important;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
}
.ordbog-side-cta-phone i { margin-right: 6px; color: var(--e-global-color-accent); }

/* Related list */
.ordbog-related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ordbog-related-list li {
    border-bottom: 1px solid #eef0f3;
}
.ordbog-related-list li:last-child { border-bottom: 0; }
.ordbog-related-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: var(--e-global-color-primary);
    font-size: 14px;
    transition: color 0.2s ease;
}
.ordbog-related-list a:hover { color: var(--e-global-color-accent); }
.ordbog-related-letter {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(212, 168, 83, 0.12);
    color: var(--e-global-color-accent);
    font-weight: 700;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ordbog-related-title { flex: 1; font-weight: 600; }
.ordbog-related-list a i:last-child { font-size: 10px; color: #c5cbd5; }
.ordbog-related-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    color: var(--e-global-color-accent);
    font-size: 13px;
    font-weight: 700;
}
.ordbog-related-all:hover { color: var(--e-global-color-primary); }

/* ---- Responsive ---- */
@media screen and (max-width: 991px) {
    .ordbog-sidebar { position: static; margin-top: 30px; }
    .ordbog-alphabet { position: static; }
}
@media screen and (max-width: 767px) {
    .ordbog-search-input { font-size: 15px; padding: 16px 48px 16px 48px; }
    .ordbog-search-icon { left: 18px; font-size: 16px; }
    .ordbog-content { padding: 24px 22px; border-radius: 16px; }
    .ordbog-content h2 { font-size: 21px; }
    .ordbog-letter { width: 36px; height: 36px; font-size: 13px; }
    .ordbog-letter[data-letter="all"] { padding: 0 12px; font-size: 12px; }
    .ordbog-letter-badge { width: 42px; height: 42px; font-size: 20px; border-radius: 12px; }
    .ordbog-term-letter { width: 52px; height: 52px; font-size: 24px; flex-basis: 52px; }
    .ordbog-short-def { font-size: 16px; padding: 16px 18px; }
    .ordbog-card { padding: 14px 16px; }
    .ordbog-card-title { font-size: 16px; }
    .ordbog-cat-chip { font-size: 12px; padding: 7px 12px; }
}